Feat: add CButton, CButtonClose, CButtonToolbar, CButtonGroup components.

Author: woothu

src/components/Button/CButton.js

@@ -0,0 +1,95 @@
+import { mergeData } from 'vue-functional-data-merge'
+import pluckProps from '../../utils/pluck-props'
+import { assign } from '../../utils/object'
+import CLink, { propsFactory as linkPropsFactory } from '../Link/CLink'
+
+const btnProps = {
+  block: Boolean,
+  pill: Boolean,
+  square: Boolean,
+  ghost: Boolean,
+  size: {
+    type: String,
+    validator: (value) => ['sm','lg'].indexOf(value) !== -1
+  },
+  variant: {
+    type: String,
+    default: 'secondary'
+  },
+  type: {
+    type: String,
+    default: 'button'
+  },
+  pressed: {
+    type: Boolean,
+    default: null
+  }
+}
+export const props = assign(linkPropsFactory(), btnProps)
+
+// Helper functons to minimize runtime memory footprint when lots of buttons on page(TODO: check it)
+function isLink (props) {
+  return Boolean(props.href || props.to)
+}
+function isToggle (props) {
+  return props.pressed !== null
+}
+
+function computeClasses (props) {
+  return [
+    `btn-${props.variant}`,
+    props.pill ? 'btn-pill' : props.square ? 'btn-square' : '',
+    {
+      [`btn-${props.size}`]: Boolean(props.size),
+      [`btn-ghost-${props.variant}`]: props.ghost,
+      'btn-block': props.block,
+      disabled: props.disabled,
+      active: props.pressed
+    }
+  ]
+}
+
+function computePassedProps (props) {
+  return isLink(props) ? pluckProps(linkPropsFactory(), props) : null
+}
+
+function computeAttrs (props, data, link, toggle) {
+  return {
+    type: !link ? props.type : null,
+    // in CLink disabled property works diffrently
+    disabled: !link ? props.disabled : null,
+    'aria-pressed': toggle ? String(props.pressed) : null,
+    // autocomplete off is needed in toggle mode to prevent some browsers from
+    // remembering the previous setting when using the back button.
+    autocomplete: toggle ? 'off' : null,
+  }
+}
+
+export default {
+  functional: true,
+  name: 'CButton',
+  props: props,
+  render (h, { props, data, listeners, children }) {
+    const toggle = isToggle(props)
+    const link = isLink(props)
+    const on = {
+      click (e) {
+        if (props.disabled && e instanceof Event) {
+          e.stopPropagation()
+          e.preventDefault()
+        } else if (toggle && listeners && listeners['update:pressed']) {
+          // Send .sync updates to any "pressed" prop (if .sync listeners)
+          listeners['update:pressed'](!props.pressed)
+        }
+      }
+    }
+    const componentData = {
+      staticClass: 'btn',
+      class: computeClasses(props),
+      props: computePassedProps(props),
+      attrs: computeAttrs(props, data, link, toggle),
+      on
+    }
+    return h(link ? CLink : 'button', mergeData(data, componentData), children)
+  }
+}

src/components/Button/CButtonClose.js

@@ -3,15 +3,17 @@ export default {
   name: 'CButtonClose',
   functional: true,
   render (h, { data, props, slots }) {
-    const componentData = {
-      staticClass: 'close',
-      attrs: {
-        type: props.type || 'button',
-        'aria-label': props.ariaLabel || 'Close'
-      }
-    }
-    if (!slots().default)
-      componentData.domProps = { innerHTML: '×' }
-    return h('button', mergeData(data, componentData), slots().default)
+    return h(
+      'button',
+      mergeData(data,  {
+        staticClass: 'close',
+        attrs: {
+          type: props.type || 'button',
+          'aria-label': props.ariaLabel || 'Close'
+        },
+        domProps: !slots().default ? { innerHTML: '×' } : null
+      }),
+      slots().default
+    )
   }
 }

src/components/Button/CButtonGroup.js

@@ -0,0 +1,24 @@
+import { mergeData } from 'vue-functional-data-merge'
+export default {
+  functional: true,
+  name: 'CButtonGroup',
+  props: {
+    vertical: Boolean,
+    size: String,
+  },
+  render (h, { props, data, children }) {
+    return h(
+      'div',
+      mergeData(data, {
+        class: [
+          !props.vertical ? 'btn-group' : 'btn-group-vertical',
+          { [`btn-group-${props.size}`] : Boolean(props.size) }
+        ],
+        attrs: {
+          role: 'group'
+        }
+      }),
+      children
+    )
+  }
+}

src/components/Button/CButtonToolbar.js

@@ -0,0 +1,23 @@
+import { mergeData } from 'vue-functional-data-merge'
+export default {
+  functional: true,
+  name: 'CButtonToolbar',
+  props: {
+    justify: Boolean,
+  },
+  render (h, { props, data, children }) {
+    return h(
+      'div',
+      mergeData(data, {
+        class: [
+          'btn-toolbar',
+          props.justify ? 'justify-content-between' : ''
+        ],
+        attrs: {
+          role: 'toolbar'
+        }
+      }),
+      children
+    )
+  }
+}

src/components/Button/index.js

@@ -1,5 +1,11 @@
+import CButton from './CButton'
 import CButtonClose from './CButtonClose'
+import CButtonGroup from './CButtonGroup'
+import CButtonToolbar from './CButtonToolbar'
 
 export {
-  CButtonClose
+  CButton,
+  CButtonClose,
+  CButtonGroup,
+  CButtonToolbar
 }

src/components/Button/tests/CButton.spec.js

@@ -0,0 +1,52 @@
+import { mount } from '@vue/test-utils'
+import Component from "../CButton";
+import {props} from "../CButton";
+
+
+const ComponentName = 'CButton'
+const defaultWrapper = mount(Component)
+const toggleWrapper = mount(Component, {
+  context: {
+    props: {
+      pressed: true,
+      type: 'input',
+      size: 'lg',
+      variant: 'info',
+      ghost: true,
+      block: true,
+      square: true
+    }
+  },
+  slots: {
+    default: 'button'
+  }
+})
+const routerLinkWrapper = mount(Component, {
+  context: {
+    props: {
+      to: '/dashboard',
+      size: 'sm',
+      variant: 'success',
+      ghost: true,
+      pill: true
+    }
+  },
+  slots: {
+    default: 'button'
+  }
+})
+
+describe(ComponentName, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+  it('renders correctly', () => {
+    expect(defaultWrapper.element).toMatchSnapshot()
+  })
+  // it('renders correctly router link button', () => {
+  //   expect(routerLinkWrapper.element).toMatchSnapshot()
+  // })
+  // it('renders correctly toggle button', () => {
+  //   expect(toggleWrapper.element).toMatchSnapshot()
+  // })
+})

src/components/Button/tests/__snapshots__/CButton.spec.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CButton renders correctly 1`] = `
+<button
+  class="btn btn-secondary"
+  type="button"
+/>
+`;