feat: Add CDropdown and child components.

Author: woothu

src/components/Dropdown/CDropdown.vue

@@ -0,0 +1,124 @@
+<template>
+  <li :class="computedDropdownClasses">
+    <a href="#"
+       aria-haspopup="true"
+       :aria-expanded="visible"
+       :class="computedToggleClasses"
+       @click="click($event)"
+       ref="toggle"
+    >
+      <slot name="button">
+        <button class="btn btn-outline-primary dropdown-toggle">{{text}}</button>
+      </slot>
+    </a>
+    <div :class="computedMenuClasses" ref="menu" v-on-clickaway="hide">
+      <slot></slot>
+    </div>
+  </li>
+</template>
+<script>
+import Popper from 'popper.js'
+import { mixin as clickaway } from 'vue-clickaway'
+
+export default {
+  name: 'CDropdown',
+  mixins: [ clickaway ],
+  data () {
+    return {
+      visible: this.show
+    }
+  },
+  props: {
+    text: {
+      type: String,
+      default: 'Dropdown'
+    },
+    show: Boolean,
+    dropup: Boolean,
+    disabled: Boolean,
+    right: Boolean,
+    menuClasses: String,
+    toggleClasses: String,
+    popperConfig: Object
+    // popperConfig: {
+    //   type: Object,
+    //   default () {
+    //     return  {
+    //       modifiers: {
+    //         placement: 'bottom-end',
+    //         offset: {
+    //           offset: '20px'
+    //         },
+    //         computeStyle: {
+    //           enabled: true
+    //         },
+    //         flip: {
+    //           enabled: true
+    //         }
+    //       }
+    //     }
+    //   }
+    // }
+  },
+  mounted () {
+    this.checkForPopper()
+  },
+  methods:{
+    hide () {
+      if(this.$refs.menu.classList.contains('show'))
+        this.toggle(false)
+    },
+    click (e) {
+      e.preventDefault()
+      this.toggle(!this.visible)
+    },
+    toggle (visible) {
+      if(this.disabled)
+        return
+      this.visible = visible
+      this.checkForPopper()
+    },
+    checkForPopper () {
+      if(this.popperConfig)
+          setTimeout(() => this.visible ? this.createPopper() : this.removePopper(), 0)
+    },
+    removePopper () {
+      if (this._popper) {
+        this._popper.destroy()
+      }
+      this._popper = null
+    },
+    createPopper () {
+      this.removePopper()
+      this._popper = new Popper(this.$refs.toggle, this.$refs.menu, this.popperConfig)
+    }
+  },
+  computed: {
+    computedDropdownClasses () {
+      return [
+        'dropdown',
+        {
+          'dropup': this.dropup,
+          'show': this.visible
+        }
+      ]
+    },
+    computedToggleClasses () {
+      return [
+        this.toggleClasses,
+        {
+          'disabled' : this.disabled
+        }
+      ]
+    },
+    computedMenuClasses () {
+      return [
+        this.menuClasses,
+        'dropdown-menu',
+        this.right ? 'dropdown-menu-right' : 'dropdown-menu-left',
+        { 'show': this.visible }
+      ]
+    }
+  },
+}
+</script>

src/components/Dropdown/CDropdownDivider.js

@@ -0,0 +1,23 @@
+import { mergeData } from 'vue-functional-data-merge'
+
+export const props = {
+  tag: {
+    type: String,
+    default: 'div'
+  }
+}
+
+export default {
+  functional: true,
+  name: 'CDropdownDivider',
+  props,
+  render (h, { props, data }) {
+    return h(
+      props.tag,
+      mergeData(data, {
+        staticClass: 'dropdown-divider',
+        attrs: { role: 'separator' }
+      })
+    )
+  }
+}

src/components/Dropdown/CDropdownHeader.js

@@ -0,0 +1,23 @@
+import { mergeData } from 'vue-functional-data-merge'
+
+export const props = {
+  tag: {
+    type: String,
+    default: 'h6'
+  }
+}
+
+export default {
+  functional: true,
+  name: 'CDropdownHeader',
+  props,
+  render (h, { props, data, children }) {
+    return h(
+      props.tag,
+      mergeData(data, {
+        staticClass: 'dropdown-header',
+      }),
+      children
+    )
+  }
+}

src/components/Dropdown/CDropdownItem.js

@@ -0,0 +1,21 @@
+import { mergeData } from 'vue-functional-data-merge'
+import CLink, { propsFactory as linkPropsFactory } from '../Link/CLink'
+
+export const props = linkPropsFactory()
+
+export default {
+  functional: true,
+  name: 'CDropdownItem',
+  props,
+  render (h, { props, data, children }) {
+    return h(
+      CLink,
+      mergeData(data, {
+        props,
+        staticClass: 'dropdown-item',
+        attrs: { role: 'menuitem' }
+      }),
+      children
+    )
+  }
+}

src/components/Dropdown/index.js

@@ -0,0 +1,12 @@
+import CDropdown from './CDropdown'
+import CDropdownHeader from './CDropdownHeader'
+import CDropdownDivider from './CDropdownDivider'
+import CDropdownItem from './CDropdownItem'
+
+
+export {
+  CDropdown,
+  CDropdownHeader,
+  CDropdownDivider,
+  CDropdownItem
+}

src/components/index.js

@@ -14,3 +14,4 @@ export * from './Progress'
 export * from './Alert'
 export * from './Button'
 export * from './Card'
+export * from './Dropdown'