docs: add breadcrumbs doc

altai-ui · Nov 26, 2021 · e020e39 · cheesytim · Nov 26, 2021 · cheesytim
1 parent 6c84885
commit e020e39
Show file tree

Hide file tree

Showing 5 changed files with 269 additions and 2 deletions.
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
@@ -21,6 +21,10 @@ export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
           {
             text: 'QButton',
             link: '/components/QButton'
+          },
+          {
+            text: 'QBreadcrumbs',
+            link: '/components/QBreadcrumbs'
           }
         ]
       },

diff --git a/docs/.vuepress/public/QBreadcrumbs.html b/docs/.vuepress/public/QBreadcrumbs.html
@@ -0,0 +1,66 @@
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <!-- import CSS -->
+  <link rel="stylesheet" href="https://unpkg.com/@qvant/qui/dist/qui.css" />
+</head>
+
+<body>
+  <div id="app">
+    <div class="block">
+      <q-breadcrumbs :route="route" />
+    </div>
+  </div>
+</body>
+<!-- import Vue before Qui -->
+<script src="https://unpkg.com/vue@next"></script>
+<!-- import JavaScript -->
+<script src="https://unpkg.com/@qvant/qui-max@latest"></script>
+<script>
+  const app = Vue.createApp({
+    setup() {
+      const route = Vue.computed(() => {  
+        return [
+          {
+            path: 'path-a',
+            name: 'ROUTE_A',
+            meta: {
+              breadcrumb: 'First route'
+            }
+          },
+          {
+            path: 'path-b',
+            name: 'ROUTE_b',
+            meta: {
+              breadcrumb: 'Second route'
+            }
+          },
+          {
+            path: 'path-c',
+            name: 'ROUTE_c',
+            meta: {
+              breadcrumb: 'Third route'
+            }
+          },
+        ];
+      });
+
+      return { route }
+    }
+  });
+
+  const Qui = window['qui-max'].default;
+  app.use(Qui);
+  app.mount('#app');
+</script>
+<style>
+  .block {
+    margin: 20px;
+    width: 450px;
+    display: flex;
+    flex-direction: column;
+  }
+</style>
+
+</html>
diff --git a/docs/.vuepress/public/QBreadcrumbs[last].html b/docs/.vuepress/public/QBreadcrumbs[last].html
@@ -0,0 +1,66 @@
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <!-- import CSS -->
+  <link rel="stylesheet" href="https://unpkg.com/@qvant/qui/dist/qui.css" />
+</head>
+
+<body>
+  <div id="app">
+    <div class="block">
+      <q-breadcrumbs :route="route" last="Custom String" />
+    </div>
+  </div>
+</body>
+<!-- import Vue before Qui -->
+<script src="https://unpkg.com/vue@next"></script>
+<!-- import JavaScript -->
+<script src="https://unpkg.com/@qvant/qui-max@latest"></script>
+<script>
+  const app = Vue.createApp({
+    setup() {
+      const route = Vue.computed(() => {
+        return [
+          {
+            path: 'path-a',
+            name: 'ROUTE_A',
+            meta: {
+              breadcrumb: 'First route'
+            }
+          },
+          {
+            path: 'path-b',
+            name: 'ROUTE_b',
+            meta: {
+              breadcrumb: 'Second route'
+            }
+          },
+          {
+            path: 'path-c',
+            name: 'ROUTE_c',
+            meta: {
+              breadcrumb: 'Third route'
+            }
+          },
+        ];
+      });
+
+      return { route }
+    }
+  });
+
+  const Qui = window['qui-max'].default;
+  app.use(Qui);
+  app.mount('#app');
+</script>
+<style>
+  .block {
+    margin: 20px;
+    width: 450px;
+    display: flex;
+    flex-direction: column;
+  }
+</style>
+
+</html>
diff --git a/docs/components/QBreadcrumbs.md b/docs/components/QBreadcrumbs.md
@@ -0,0 +1,123 @@
+# QBreadcrumbs
+
+Displays the location of the current page, shows all nested levels. Try a sandbox [story](https://qui-max.netlify.app/?path=/story/components-qbreadcrumbs--default)
+
+## Example
+
+Default view:
+
+<iframe height="80" style="width: 100%;" scrolling="no" frameborder="no" src="/qui-max/QBreadcrumbs.html"></iframe>
+
+Using in template:
+
+```vue
+  <q-breadcrumbs :route="route" />
+```
+Using in component instance:
+<CodeGroup>
+  <CodeGroupItem title="JS" active>
+
+  ```js
+  setup() {
+    const route = [
+      {
+        path: 'path-a',
+        name: 'ROUTE_A',
+        meta: {
+          breadcrumb: 'First route'
+        }
+      },
+      {
+        path: 'path-b',
+        name: 'ROUTE_b',
+        meta: {
+          breadcrumb: 'Second route'
+        }
+      },
+      {
+        path: 'path-c',
+        name: 'ROUTE_c',
+        meta: {
+          breadcrumb: 'Third route'
+        }
+      },
+    ];
+
+    return { route }
+  }
+  ```
+  </CodeGroupItem>
+
+  <CodeGroupItem title="TS">
+
+  ```ts
+  import type { QBreadcrumbsPropRoute } from '@qvant/qui-max';
+
+  setup() {
+    const route: QBreadcrumbsPropRoute = [
+      {
+        path: 'path-a',
+        name: 'ROUTE_A',
+        meta: {
+          breadcrumb: 'First route'
+        }
+      },
+      {
+        path: 'path-b',
+        name: 'ROUTE_b',
+        meta: {
+          breadcrumb: 'Second route'
+        }
+      },
+      {
+        path: 'path-c',
+        name: 'ROUTE_c',
+        meta: {
+          breadcrumb: 'Third route'
+        }
+      },
+    ];
+
+    return { route };
+  }
+  ```
+
+  </CodeGroupItem>
+</CodeGroup>
+
+## Props
+
+### route
+
+- Type: `Array`
+- Default: `null`
+
+```ts
+import type { QBreadcrumbsPropRoute } from '@qvant/qui-max';
+```
+
+`route` MUST be an `Array` of `Object`s, each object MUST contain required fields:
+  - `path` - uses as route path
+  - `name` - route name
+  - `meta` - MUST contain:
+    - `breadcrumb` - visible title
+
+### linkComponent
+
+- Type: `String`
+- Default: `'RouterLink'`
+
+The name of the component for enabling user navigation in a router-enabled app, if you use [Vue Router](https://router.vuejs.org/), you don't need change this prop, `RouterLink` by default. With Nuxt change on `NuxtLink`
+
+### last
+
+- Type: `String`
+
+Changes last crumb with custom string
+
+```vue
+  <q-breadcrumbs :route="route" last="Custom string" />
+```
+
+<iframe height="80" style="width: 100%;" scrolling="no" frameborder="no" src="/qui-max/QBreadcrumbs[last].html"></iframe>
+
diff --git a/docs/components/QButton.md b/docs/components/QButton.md
@@ -13,10 +13,11 @@ All kind of types:
 ### theme
 
 - Type: `String`
+- Default: `'primary'`
 
 A `theme` prop defines how button appearence, can accept values:
 
-- `'primary'` - (default) button style, being used for primary actions
+- `'primary'` - button style, being used for primary actions
 - `'secondary'` - button style, being used for secondary actions
 - `'link'` - text button style
 
@@ -78,8 +79,9 @@ Result:
 ### size
 
 - Type: `'medium'` | `'small'`
+- Default: `'medium'`
 
-Changes button size. `medium` by default
+Changes button size.
 
 Code example:
 
@@ -94,6 +96,7 @@ Result:
 ### loading
 
 - Type: `Boolean`
+- Default: `false`
 
 Set loading animation inside button
 
@@ -110,6 +113,7 @@ Result:
 ### disabled
 
 - Type: `Boolean`
+- Default: `false`
 
 Sets disabled button state
 
@@ -126,6 +130,7 @@ Result:
 ### circle
 
 - Type `Boolean`
+- Default: `false`
 
 Changes button's shape to circle (use with icon)
 
@@ -142,18 +147,21 @@ Result:
 ### fullWidth
 
 - Type: `Boolean`
+- Default: `false`
 
 Sets button width to 100%
 
 ### autofocus
 
 - Type: `Boolean`
+- Default: `false`
 
 As native autofocus
 
 ### nativeType
 
 - Type: `'submit' | 'reset' | 'button'`
+- Default: `'button'`
 
 As native button type