[Breadcrumbs] Add component

uiv-lib · Oct 21, 2017 · 7174700 · 7174700
1 parent 02d54e5
commit 7174700
Show file tree

Hide file tree

Showing 11 changed files with 378 additions and 40 deletions.
diff --git a/build/webpack.dist.conf.js b/build/webpack.dist.conf.js
@@ -21,7 +21,7 @@ for (let i = 0; i < rules.length; i++) {
 
 let webpackConfig = {
   entry: {
-    app: './src/components/index.js'
+    app: './src/index.js'
   },
   externals: {
     vue: {

diff --git a/docs/main.js b/docs/main.js
@@ -9,7 +9,7 @@ import VueRouter from 'vue-router'
 import router from './router'
 import PageWrapper from './components/architecture/PageWrapper.vue'
 import MarkdownWrapper from './components/architecture/MarkdownWrapper.vue'
-import * as uiv from './../src/components/index'
+import * as uiv from './../src'
 
 Vue.config.productionTip = false
 

diff --git a/docs/pages/components/Breadcrumbs.md b/docs/pages/components/Breadcrumbs.md
@@ -0,0 +1,189 @@
+# Breadcrumbs
+
+> Indicate the current page's location within a navigational hierarchy.
+
+## Example
+
+Use `items` array to create a breadcrumbs nav. `active` state of last element is automatically set if it is undefined.
+
+```html
+<template>
+  <breadcrumbs :items="items"/>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        items: [
+          {text: 'Home', href: '#'},
+          {text: 'Library', href: '#'},
+          {text: 'Data', href: '#'}
+        ]
+      }
+    }
+  }
+</script>
+<!-- Live demo -->
+```
+
+
+## Breadcrumb Item
+
+You can also use `<breadcrumb-item>` in breadcrumbs directly. This is useful while full control of item text is need (e.g. HTML tags).
+
+Note that `active` state will not automatically set if using this mode.
+
+```html
+<breadcrumbs>
+  <breadcrumb-item href="#"><b>Home</b></breadcrumb-item>
+  <breadcrumb-item href="#">Library</breadcrumb-item>
+  <breadcrumb-item :active="true">Data</breadcrumb-item>
+</breadcrumbs>
+<!-- Live demo -->
+```
+
+## Router Link
+
+Parse `to` (String or Object) instead of `href` will create a `router-link` for the breadcrumb item, which you can use with [Vue-Router](https://router.vuejs.org/).
+
+```html
+<template>
+  <breadcrumbs :items="items2"/>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        items2: [
+          {text: 'Home', to: '/'},
+          {text: 'Breadcrumbs', to: '/breadcrumbs'}
+        ]
+      }
+    }
+  }
+</script>
+<!-- Live demo -->
+```
+
+<!-- Live demo script
+<script>
+  export default {
+    data () {
+      return {
+        items: [
+          {text: 'Home', href: '#'},
+          {text: 'Library', href: '#'},
+          {text: 'Data', href: '#'}
+        ],
+        items2: [
+          {text: 'Home', to: '/'},
+          {text: 'Breadcrumbs', to: '/breadcrumbs'}
+        ]
+      }
+    }
+  }
+</script>
+-->
+
+# API Reference
+
+## [Breadcrumbs.vue](https://github.com/wxsms/uiv/tree/master/src/components/breadcrumbs/Breadcrumbs.vue)
+
+<div class="table-responsive">
+  <table class="table table-bordered">
+    <tbody>
+    <tr>
+      <td colspan="5"><span class="label label-default">Props</span></td>
+    </tr>
+    <tr>
+      <th>Name</th>
+      <th>Type</th>
+      <th>Default</th>
+      <th width="50px">Required</th>
+      <th>Description</th>
+    </tr>
+    <tr>
+      <td nowrap="nowrap"><code>items</code></td>
+      <td>Array</td>
+      <td></td>
+      <td></td>
+      <td>Breadcrumb items to create. Props defined in each item object is the same with BreadcrumbItem.vue, except <code>text</code> will be replace as the breadcrumb item body.</td>
+    </tr>
+    </tbody>
+    <tbody>
+    <tr>
+      <td colspan="5"><span class="label label-default">Slots</span></td>
+    </tr>
+    <tr>
+      <th>Name</th>
+      <th colspan="4">Description</th>
+    </tr>
+    <tr>
+      <td nowrap="nowrap"><code>default</code></td>
+      <td colspan="4">The breadcrumbs body.</td>
+    </tr>
+    </tbody>
+  </table>
+</div>
+
+## [BreadcrumbItem.vue](https://github.com/wxsms/uiv/tree/master/src/components/breadcrumbs/BreadcrumbItem.vue)
+
+<div class="table-responsive">
+  <table class="table table-bordered">
+    <tbody>
+    <tr>
+      <td colspan="5"><span class="label label-default">Props</span></td>
+    </tr>
+    <tr>
+      <th>Name</th>
+      <th>Type</th>
+      <th>Default</th>
+      <th width="50px">Required</th>
+      <th>Description</th>
+    </tr>
+    <tr>
+      <td nowrap="nowrap"><code>acive</code></td>
+      <td>Boolean</td>
+      <td>false</td>
+      <td></td>
+      <td>Set item to active state.</td>
+    </tr>
+    <tr>
+      <td nowrap="nowrap"><code>href</code></td>
+      <td>String</td>
+      <td></td>
+      <td></td>
+      <td>An ordinary link will be created if this prop present.</td>
+    </tr>
+    <tr>
+      <td nowrap="nowrap"><code>target</code></td>
+      <td>String</td>
+      <td></td>
+      <td>_self</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td nowrap="nowrap"><code>to</code></td>
+      <td>String or Object</td>
+      <td></td>
+      <td></td>
+      <td>An Vue-Router link will be created if this prop present.</td>
+    </tr>
+    </tbody>
+    <tbody>
+    <tr>
+      <td colspan="5"><span class="label label-default">Slots</span></td>
+    </tr>
+    <tr>
+      <th>Name</th>
+      <th colspan="4">Description</th>
+    </tr>
+    <tr>
+      <td nowrap="nowrap"><code>default</code></td>
+      <td colspan="4">The breadcrumb item body.</td>
+    </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/docs/router/routes.js b/docs/router/routes.js
@@ -26,6 +26,11 @@ const routes = [
     meta: {type: 'component', label: 'Alert'},
     component: () => import('./../pages/components/Alert.md')
   },
+  {
+    path: '/breadcrumbs',
+    meta: {type: 'component', label: 'Breadcrumbs'},
+    component: () => import('./../pages/components/Breadcrumbs.md')
+  },
   {
     path: '/carousel',
     meta: {type: 'component', label: 'Carousel'},

diff --git a/src/components/breadcrumbs/BreadcrumbItem.vue b/src/components/breadcrumbs/BreadcrumbItem.vue
@@ -0,0 +1,38 @@
+<template>
+  <li :class="{active: active}">
+    <template v-if="active">
+      <slot></slot>
+    </template>
+    <template v-else-if="href">
+      <a :href="href" :target="target">
+        <slot></slot>
+      </a>
+    </template>
+    <template v-else-if="to">
+      <router-link :to="to">
+        <slot></slot>
+      </router-link>
+    </template>
+  </li>
+</template>
+
+<script>
+  export default {
+    props: {
+      active: {
+        type: Boolean,
+        default: false
+      },
+      // <a> props
+      href: {
+        type: String
+      },
+      target: {
+        type: String,
+        default: '_self'
+      },
+      // <router-link> props
+      to: {}
+    }
+  }
+</script>
diff --git a/src/components/breadcrumbs/Breadcrumbs.vue b/src/components/breadcrumbs/Breadcrumbs.vue
@@ -0,0 +1,31 @@
+<template>
+  <ol class="breadcrumb">
+    <slot>
+      <breadcrumb-item
+        v-for="(item, index) in items"
+        :key="item.key ? item.key : index"
+        :active="isItemActive(item, index)"
+        :href="item.href"
+        :target="item.target"
+        :to="item.to">{{item.text}}</breadcrumb-item>
+    </slot>
+  </ol>
+</template>
+
+<script>
+  import BreadcrumbItem from './BreadcrumbItem.vue'
+
+  export default {
+    components: {BreadcrumbItem},
+    props: {
+      items: {
+        type: Array
+      }
+    },
+    methods: {
+      isItemActive (item, index) {
+        return typeof item.active === 'boolean' ? item.active : index === this.items.length - 1
+      }
+    }
+  }
+</script>
diff --git a/src/components/index.js b/src/components/index.js
@@ -15,43 +15,10 @@ import TimePicker from './timepicker/TimePicker.vue'
 import Typeahead from './typeahead/Typeahead.vue'
 import ProgressBar from './progressbar/ProgressBar.vue'
 import ProgressBarStack from './progressbar/ProgressBarStack.vue'
-import locale from './../locale'
-
-const components = {
-  Affix,
-  Tooltip,
-  Carousel,
-  Slide,
-  Collapse,
-  Dropdown,
-  Modal,
-  Tab,
-  Tabs,
-  DatePicker,
-  Alert,
-  Pagination,
-  Popover,
-  TimePicker,
-  Typeahead,
-  ProgressBar,
-  ProgressBarStack
-}
-
-const install = (Vue, options = {}) => {
-  locale.use(options.locale)
-  locale.i18n(options.i18n)
-  for (let key in components) {
-    Vue.component(key, components[key])
-  }
-}
-
-// auto install
-if (typeof window !== 'undefined' && window.Vue) {
-  install(window.Vue)
-}
+import Breadcrumbs from './breadcrumbs/Breadcrumbs.vue'
+import BreadcrumbItem from './breadcrumbs/BreadcrumbItem.vue'
 
 export {
-  install,
   Affix,
   Tooltip,
   Carousel,
@@ -68,5 +35,7 @@ export {
   TimePicker,
   Typeahead,
   ProgressBar,
-  ProgressBarStack
+  ProgressBarStack,
+  Breadcrumbs,
+  BreadcrumbItem
 }
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,2 @@
+export * from './components'
+export * from './install'
diff --git a/src/install.js b/src/install.js
@@ -0,0 +1,19 @@
+import * as components from './components'
+import locale from './locale'
+
+const install = (Vue, options = {}) => {
+  // Setup language, en-US for default
+  locale.use(options.locale)
+  locale.i18n(options.i18n)
+  // Register components
+  for (let key in components) {
+    Vue.component(key, components[key])
+  }
+}
+
+// auto install
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export { install }
diff --git a/test/unit/index.js b/test/unit/index.js
@@ -1,9 +1,12 @@
 import 'es6-promise/auto'
 import Vue from 'vue'
-import * as uiv from '@src/components/index.js'
+import * as uiv from '@src/install'
 
 Vue.config.productionTip = false
-
+// simulate router-link
+Vue.component('router-link', {
+  template: '<a href="#router-link"><slot></slot></a>'
+})
 Vue.use(uiv)
 
 // Polyfill fn.bind() for PhantomJS