[ADD] input dropdown component

src/components/common/InputDropdown.vue

@@ -0,0 +1,154 @@
+<template lang="pug">
+    .input-group
+        input(type='text' v-model='value')
+        .input-group-button
+            button(type='button' @click='onShowOptions' :disabled='isDisabledOptions()' ref='button') {{ text }}
+                span.caret
+            ul.dropdown(:style="{ 'display': isShowOptions ? 'block' : 'none' }" ref='dropdown')
+                li(v-for='option in options' :key='option.id')
+                    a(@click='onClickOption(option)') {{ option.name }}
+</template>
+
+<script>
+    export default {
+        props: {
+            value: {
+                type: String,
+                default: ''
+            },
+            text: {
+                type: String,
+                default: 'Dropdown'
+            },
+            options: {
+                type: Array,
+                default: []
+            }
+        },
+        watch: {
+            value(data) {
+                this.onChange(data)
+            }
+        },
+        methods: {
+            onChange(data) {
+                this.$emit('onChange', data)
+            },
+            hideOptions() {
+                this.isShowOptions = false
+            },
+            isDisabledOptions() {
+                return this.options.length == 0
+            },
+            onShowOptions() {
+                this.isShowOptions = !this.isShowOptions
+            },
+            onClickOutside(e) {
+                let target = e.target
+                let button = this.$refs.button
+
+                if (target === button) {
+                    return
+                }
+
+                let el = this.$refs.dropdown
+                
+                if (el !== target && !el.contains(target)) {
+                    this.hideOptions()
+                }
+            },
+            onClickOption(option) {
+                this.hideOptions()
+                this.$emit('onOption', option)
+            }
+        },
+        created() {
+            document.addEventListener('click', this.onClickOutside)
+        },
+        destroyed() {
+            document.removeEventListener('click', this.onClickOutside)
+        },
+        data() {
+            return {
+                value: '',
+                isShowOptions: false
+            }
+        }
+    }
+</script>
+
+<style lang="sass">
+    .input-group
+        position: relative
+        display: table
+        border-collapse: separate
+        input
+            width: 100%
+            height: 35px
+            display: table-cell
+            position: relative
+            float: left
+            border-radius: 0
+            margin-bottom: 0
+            z-index: 2
+            &:focus
+                z-index: 3
+        .input-group-button
+            display: table-cell
+            width: 1%
+            white-space: nowrap
+            vertical-align: middle
+            button
+                height: 35px
+                display: inline-block
+                margin-bottom: 0
+                text-align: center
+                vertical-align: middle
+                white-space: nowrap
+                border: 1px solid #ccc
+                border-radius: 0
+                box-shadow: none
+                margin-left: -1px
+                background: #e0e0e0
+                &:focus
+                    outline: 0 !important
+                    border: 1px solid #ccc
+                    box-shadow: none
+                &:caret
+                    display: inline-block
+                    width: 0
+                    height: 0
+                    margin-left: 2px
+                    vertical-align: middle
+                    border-top: 4px dashed
+                    border-right: 4px solid transparent
+                    border-left: 4px solid transparent
+            .dropdown
+                position: absolute
+                top: 100%
+                float: left
+                left: auto
+                right: 0
+                list-style: none
+                text-align: left
+                border: 1px solid #ccc
+                background-color: #fff
+                background-clip: padding-box
+                min-width: 160px
+                padding: 5px 0
+                margin: 2px 0 0
+                z-index: 1000
+                & > li > a
+                    height: 35px
+                    display: block
+                    padding: 3px 20px
+                    clear: both
+                    font-weight: normal
+                    line-height: 2.1
+                    white-space: nowrap
+                    color: #333
+                    border-bottom: 1px solid #e5e5e5
+                    &:hover, &:focus
+                        text-decoration: none
+                        border-bottom: 2px solid #7c7bad
+</style>

webpack.config.js

@@ -28,7 +28,7 @@ module.exports = {
             cacheDirectory: 'node_modules/.cache/hard-source/[confighash]',
             recordsPath: 'node_modules/.cache/hard-source/[confighash]/records.json',
             configHash: function(webpackConfig) {
-                return require('node-object-hash')({sort: false}).hash(webpackConfig);
+                return require('node-object-hash')({sort: false}).hash(webpackConfig)
             },
             environmentHash: {
                 root: process.cwd(),