[ProgressBar] Change to functional component.

docs/pages/components/ProgressBar.md

@@ -154,9 +154,9 @@ Place multiple `<progress-bar-stack>` into the same `<progress-bar>` to stack th
 
 # API Reference
 
-## [ProgressBar.vue](https://github.com/wxsms/uiv/tree/master/src/components/progressbar/ProgressBar.vue)
+## [ProgressBar.js](https://github.com/wxsms/uiv/tree/master/src/components/progressbar/ProgressBar.js)
 
-`ProgressBar.vue` and `ProgressBarStack.vue` share same prop attributes.
+`ProgressBar` and `ProgressBarStack` share same prop attributes.
 
 ### Props
 

src/components/index.js

@@ -13,8 +13,8 @@ import Tooltip from './tooltip/Tooltip.vue'
 import Popover from './popover/Popover.vue'
 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 ProgressBar from './progressbar/ProgressBar'
+import ProgressBarStack from './progressbar/ProgressBarStack'
 import Breadcrumbs from './breadcrumbs/Breadcrumbs.vue'
 import BreadcrumbItem from './breadcrumbs/BreadcrumbItem.vue'
 import Btn from './button/Btn'

src/components/progressbar/ProgressBar.js

@@ -0,0 +1,13 @@
+import mergeData from 'vue-functional-data-merge'
+import ProgressBarStack from './ProgressBarStack'
+
+export default {
+  functional: true,
+  render (h, {props, data, children}) {
+    return h(
+      'div',
+      mergeData(data, {class: 'progress'}),
+      children && children.length ? children : [h(ProgressBarStack, {props})]
+    )
+  }
+}

src/components/progressbar/ProgressBarStack.js

@@ -0,0 +1,56 @@
+import mergeData from 'vue-functional-data-merge'
+
+export default {
+  functional: true,
+  render (h, {props, data}) {
+    return h(
+      'div',
+      mergeData(data, {
+        class: {
+          'progress-bar': true,
+          'progress-bar-striped': props.striped,
+          'active': props.striped && props.active,
+          [`progress-bar-${props.type}`]: Boolean(props.type)
+        },
+        style: {
+          minWidth: props.minWidth ? '2em' : null,
+          width: `${props.value}%`
+        },
+        attrs: {
+          role: 'progressbar',
+          'aria-valuemin': 0,
+          'aria-valuenow': props.value,
+          'aria-valuemax': 100
+        }
+      }),
+      props.label ? (props.labelText ? props.labelText : `${props.value}%`) : null
+    )
+  },
+  props: {
+    value: {
+      type: Number,
+      required: true,
+      validator (value) {
+        return value >= 0 && value <= 100
+      }
+    },
+    labelText: String,
+    type: String,
+    label: {
+      type: Boolean,
+      default: false
+    },
+    minWidth: {
+      type: Boolean,
+      default: false
+    },
+    striped: {
+      type: Boolean,
+      default: false
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+}

test/unit/specs/BtnGroup.spec.js

@@ -52,7 +52,7 @@ describe('BtnGroup', () => {
     let _$el = $(vm.$refs['btn-group-justified'].$el)
     await vm.$nextTick()
     expect(_$el.find('.btn-group-justified').length).to.equal(2)
-    expect(_$el.find('.btn-group-justified > .btn-group').length).to.equal(6)
-    expect(_$el.find('.btn-group-justified > .btn-group > .btn').length).to.equal(6)
+    expect(_$el.find('.btn-group-justified > .btn-group').length).to.equal(3)
+    expect(_$el.find('.btn-group-justified > .btn-group > .btn').length).to.equal(3)
   })
 })