From c8fb79571f844ca9648e52451f5a89cd8b24de8d Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 28 Dec 2018 15:03:07 +0300
Subject: [PATCH] Implemented Dropdown Component

---
 src/AppMenu.vue                      |   1 +
 src/assets/styles/primevue.css       |   1 +
 src/components/common/Common.css     |  15 +
 src/components/dropdown/Dropdown.css | 123 +++++++++
 src/components/dropdown/Dropdown.vue | 397 +++++++++++++++++++++++++++
 src/components/utils/DomHandler.js   |   1 +
 src/main.js                          |   2 +
 src/router.js                        |   5 +
 src/views/dropdown/DropdownDemo.vue  |  77 ++++++
 src/views/listbox/ListboxDemo.vue    |   6 +-
 10 files changed, 623 insertions(+), 5 deletions(-)
 create mode 100644 src/components/dropdown/Dropdown.css
 create mode 100644 src/components/dropdown/Dropdown.vue
 create mode 100644 src/views/dropdown/DropdownDemo.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index dbe620b0f..6ffdd7f39 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -10,6 +10,7 @@
                 <div>
                     <router-link to="/checkbox">&#9679; Checkbox</router-link>
                     <router-link to="/chips">&#9679; Chips</router-link>
+                    <router-link to="/dropdown">&#9679; Dropdown</router-link>
                     <router-link to="/editor">&#9679; Editor</router-link>
                     <router-link to="/inputswitch">&#9679; InputSwitch</router-link>
                     <router-link to="/inputtext">&#9679; InputText</router-link>
diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index a510190a2..4fb9e0efd 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -4,6 +4,7 @@
 @import '../../components/card/Card.css';
 @import '../../components/checkbox/Checkbox.css';
 @import '../../components/chips/Chips.css';
+@import '../../components/dropdown/Dropdown.css';
 @import '../../components/fieldset/Fieldset.css';
 @import '../../components/inputtext/InputText.css';
 @import '../../components/inputswitch/InputSwitch.css';
diff --git a/src/components/common/Common.css b/src/components/common/Common.css
index de44799f9..c436ddbc7 100644
--- a/src/components/common/Common.css
+++ b/src/components/common/Common.css
@@ -133,4 +133,19 @@ button {
     transform: translateY(5%);
     -webkit-transition: transform .3s, opacity .15s;
     transition: transform .3s, opacity .15s;
+}
+
+/* Overlay Animations */
+.p-input-overlay-enter,
+.p-input-overlay-leave-to {
+    opacity: 0;
+    -webkit-transform: translateY(5%);
+    -ms-transform: translateY(5%);
+    transform: translateY(5%);
+}
+
+.p-input-overlay-enter-active,
+.p-input-overlay-leave-active {
+    -webkit-transition: transform .3s, opacity .15s;
+    transition: transform .3s, opacity .15s;
 }
\ No newline at end of file
diff --git a/src/components/dropdown/Dropdown.css b/src/components/dropdown/Dropdown.css
new file mode 100644
index 000000000..97265d7a4
--- /dev/null
+++ b/src/components/dropdown/Dropdown.css
@@ -0,0 +1,123 @@
+.p-dropdown {
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+.p-dropdown .p-dropdown-clear-icon {
+    position: absolute;
+    right: 2em;
+    top: 50%;
+    font-size: 1em;
+    height: 1em;
+    margin-top: -.5em;
+}
+
+.p-dropdown .p-dropdown-trigger {
+    border-right: none;
+    border-top: none;
+    border-bottom: none;
+    cursor: pointer;
+    width: 1.5em;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 0 .25em;
+}
+
+.p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon {
+    top: 50%;
+    left: 50%;
+    margin-top: -.5em;
+    margin-left: -.5em;
+    position: absolute;
+}
+
+.p-dropdown .p-dropdown-label  {
+    display: block;
+    border: none;
+    white-space: nowrap;
+    overflow: hidden;
+    font-weight: normal;
+    width: 100%;
+    padding-right: 1.5em;
+}
+
+.p-dropdown .p-dropdown-item-empty,
+.p-dropdown .p-dropdown-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+}
+
+.p-dropdown.p-disabled .p-dropdown-trigger,
+.p-dropdown.p-disabled .p-dropdown-label {
+    cursor: default;
+}
+
+.p-dropdown label.p-dropdown-label  {
+    cursor: pointer;
+}
+
+.p-dropdown input.p-dropdown-label  {
+    cursor: default;
+}
+
+.p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+    z-index: 1;
+}
+
+.p-dropdown-panel {
+    position: absolute;
+    height: auto;
+}
+
+.p-dropdown-panel .p-dropdown-items-wrapper {
+    overflow: auto;
+}
+
+.p-dropdown-panel .p-dropdown-item {
+    font-weight: normal;
+    border: 0 none;
+    cursor: pointer;
+    margin: 1px 0;
+    padding: .125em .25em;
+    text-align: left;
+}
+
+.p-dropdown-panel .p-dropdown-item-group {
+    font-weight: bold;
+}
+
+.p-dropdown-panel .p-dropdown-list {
+    padding: 0.4em;
+    border: 0 none;
+    margin: 0;
+    list-style-type: none;
+}
+
+.p-dropdown-panel .p-dropdown-filter {
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 1.5em;
+}
+
+.p-dropdown-panel .p-dropdown-filter-container {
+    position: relative;
+    margin: 0;
+    padding: 0.4em;
+    display: inline-block;
+}
+
+.p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
+    position: absolute;
+    top: .8em;
+    right: 1em;
+}
+
+/** Dropdown **/
+.p-fluid .p-dropdown {
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
new file mode 100644
index 000000000..dd5183029
--- /dev/null
+++ b/src/components/dropdown/Dropdown.vue
@@ -0,0 +1,397 @@
+<template>
+    <div ref="container" :class="containerClass">
+        <div class="p-hidden-accessible">
+            <select :required="this.required" aria-hidden="true" tabindex="-1">
+                <option v-for="option of visibleOptions" :key="getOptionLabel(option)" :value="getOptionValue(option)">{{getOptionLabel(option)}}</option>
+            </select>
+        </div>
+        <div class="p-hidden-accessible">
+            <input ref="focusInput" type="text" role="listbox" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"/>
+        </div>
+        <input v-if="editable" type="text" class="p-dropdown-label p-inputtext" :disabled="disabled" @focus="onFocus" @blur="onBlur" :placeholder="placeholder" :value="editableInputValue" @input="onEditableInput">
+        <label v-if="!editable" :class="labelClass" @click="onLabelClick">{{label}}</label>
+        <i v-if="showClear && value != null" class="p-dropdown-clear-icon pi pi-times" @click="clear"></i>
+        <div class="p-dropdown-trigger" @click="onDropdownClick">
+            <span class="p-dropdown-trigger-icon pi pi-chevron-down p-clickable"></span>
+        </div>
+        <transition name="p-input-overlay" @enter="onOverlayEnter">
+            <div ref="overlay" class="p-dropdown-panel" v-if="overlayVisible">
+                <div v-if="filter" class="p-dropdown-filter-container">
+                    <input type="text" v-model="filterValue" autoComplete="off" class="p-dropdown-filter p-inputtext p-component" :placeholder="filterPlaceholder"  @keydown="onFilterKeyDown" />
+                    <span class="p-dropdown-filter-icon pi pi-search"></span>
+                </div>
+                <div ref="itemsWrapper" class="p-dropdown-items-wrapper" :style="{'max-height': scrollHeight}">
+                    <ul class="p-dropdown-items p-dropdown-list p-component">
+                        <li v-for="(option, i) of visibleOptions" :class="['p-dropdown-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" 
+                            :aria-label="getOptionLabel(option)" :key="getOptionLabel(option)" @click="onOptionSelect($event, option)">
+                            <slot name="option" :option="option" :index="i">  
+                                {{getOptionLabel(option)}}
+                            </slot>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+import ObjectUtils from '../utils/ObjectUtils';
+import DomHandler from '../utils/DomHandler';
+
+export default {
+    props: {
+        value: null,
+        options: Array,
+        dataKey: null,
+        filter: Boolean,
+        optionLabel: null,
+        optionValue: null,
+        optionDisabled: null,
+        disabled: Boolean,
+        required: Boolean,
+        tabindex: String,
+        editable: Boolean,
+        placeholder: String,
+        showClear: Boolean,
+        scrollHeight: {
+            type: String,
+            default: '200px'
+        },
+        filterPlaceholder: String
+    },
+    data() {
+        return {
+            focused: false,
+            filterValue: null,
+            overlayVisible: false
+        };
+    },
+    beforeDestroy() {
+        this.unbindOutsideClickListener();
+    },
+    updated() {
+        if (this.overlayVisible && this.filterValue) {
+            this.alignOverlay();
+        }
+    },
+    outsideClickListener: null,
+    searchTimeout: null,
+    currentSearchChar: null,
+    previousSearchChar: null,
+    searchValue: null,
+    methods: {
+        getOptionLabel(option) {
+            return ObjectUtils.resolveFieldData(option, this.optionLabel);
+        },
+        getOptionValue(option) {
+            return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option;
+        },
+        isOptionDisabled(option) {
+            return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
+        },
+        getSelectedOption() {
+            let selectedOption;
+
+            if (this.value && this.options) {
+                for (let option of this.options) {
+                    if ((ObjectUtils.equals(this.value, this.getOptionValue(option), this.dataKey))) {
+                        selectedOption = option;
+                        break;
+                    }
+                }
+            }
+
+            return selectedOption;
+        },
+        isSelected(option) {
+            return ObjectUtils.equals(this.value, this.getOptionValue(option), this.dataKey);
+        },
+        getSelectedOptionIndex() {
+            let selectedOptionIndex = -1;
+
+            if (this.value && this.visibleOptions) {
+                for (let i = 0; i < this.visibleOptions.length; i++) {
+                    if ((ObjectUtils.equals(this.value, this.getOptionValue(this.visibleOptions[i]), this.dataKey))) {
+                        selectedOptionIndex = i;
+                        break;
+                    }
+                }
+            }
+
+            return selectedOptionIndex;
+        },
+        onFocus() {
+            this.focused = true;
+        },
+        onBlur() {
+            this.focused = false;
+        },
+        onKeyDown(event) {
+            switch(event.which) {
+                //down
+                case 40:
+                    this.onDownKey(event);
+                break;
+
+                //up
+                case 38:
+                    this.onUpKey(event);
+                break;
+
+                //space
+                case 32:
+                    if (!this.overlayVisible) {
+                        this.overlayVisible = true;
+                        event.preventDefault();
+                    }
+                break;
+
+                //enter and escape
+                case 13:
+                case 27:
+                    if (this.overlayVisible) {
+                        this.hideOverlay();
+                        event.preventDefault();
+                    }
+                break;
+
+                //escape and tab
+                case 9:
+                    this.hideOverlay();
+                break;
+
+                default:
+                    this.search(event);
+                break;
+            }
+        },
+        onFilterKeyDown(event) {
+            switch (event.which) {
+                //down
+                case 40:
+                    this.onDownKey(event);
+                    break;
+
+                //up
+                case 38:
+                    this.onUpKey(event);
+                    break;
+
+                //enter and escape
+                case 13:
+                case 27:
+                    this.hideOverlay();
+                    event.preventDefault();
+                break;
+
+                default:
+                break;
+            }
+        },
+        onDownKey(event) {
+            if (this.visibleOptions) {
+                if (!this.overlayVisible && event.altKey) {
+                    this.overlayVisible = true;
+                }
+                else {
+                    let nextOption = this.findNextOption(this.getSelectedOptionIndex());
+
+                    if (nextOption) {
+                        this.updateModel(event, this.getOptionValue(nextOption));
+                    }
+                }
+            }
+
+            event.preventDefault();
+        },
+        onUpKey(event) {
+            if (this.visibleOptions) {
+                let prevOption = this.findPrevOption(this.getSelectedOptionIndex());
+
+                if (prevOption) {
+                    this.updateModel(event, this.getOptionValue(prevOption));
+                }
+            }
+
+            event.preventDefault();
+        },
+        findNextOption(index) {
+            let i = index + 1;
+            if (i === this.visibleOptions.length) {
+                return null;
+            }
+
+            let option = this.visibleOptions[i];
+            if (this.isOptionDisabled(option))
+                return this.findNextOption(i);
+            else
+                return option;
+            
+        },
+        findPrevOption(index) {
+            let i = index - 1;
+            if (i < 0) {
+                return null;
+            }
+
+            let option = this.visibleOptions[i];
+            if (this.isOptionDisabled(option))
+                return this.findPrevOption(i);
+            else
+                return option;
+        },
+        onLabelClick() {
+            if (!this.overlayVisible) {
+                this.overlayVisible = true;
+            }
+            this.$refs.focusInput.focus();
+        },
+        onDropdownClick() {
+            if (!this.overlayVisible) {
+                this.overlayVisible = true;
+            }
+            this.$refs.focusInput.focus();
+        },
+        onOptionSelect(event, option) {
+            let value = this.getOptionValue(option);
+            this.updateModel(event, value);
+
+            setTimeout(() => {
+                this.hideOverlay();
+            }, 100);
+        },
+        onEditableInput(event) {
+            this.$emit('input', event.target.value);
+        },
+        onOverlayEnter() {
+            this.alignOverlay();
+            this.bindOutsideClickListener();
+        },
+        alignOverlay() {
+            DomHandler.relativePosition(this.$refs.overlay, this.$refs.container);
+        },
+        clear(event) {
+            this.updateModel(event, null);
+        },
+        updateModel(event, value) {
+            this.$emit('input', value);
+            this.$emit('change', {originalEvent: event, value: value});
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.$refs.overlay && !this.$refs.overlay.contains(event.target)) {
+                        this.hideOverlay();
+                    }
+                };
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
+        hideOverlay() {
+            this.overlayVisible = false;
+            this.unbindOutsideClickListener();
+        },
+        search(event) {
+            if (!this.visibleOptions) {
+                return;
+            }
+
+            if (this.searchTimeout) {
+                clearTimeout(this.searchTimeout);
+            }
+
+            const char = String.fromCharCode(event.keyCode);
+            this.previousSearchChar = this.currentSearchChar;
+            this.currentSearchChar = char;
+
+            if (this.previousSearchChar === this.currentSearchChar)
+                this.searchValue = this.currentSearchChar;
+            else
+                this.searchValue = this.searchValue ? this.searchValue + char : char;
+
+            let searchIndex =this.getSelectedOptionIndex();
+            let newOption = this.searchOption(++searchIndex);
+
+            if (newOption) {
+                this.updateModel(event, this.getOptionValue(newOption));
+            }
+
+            this.searchTimeout = setTimeout(() => {
+                this.searchValue = null;
+            }, 250);
+        },
+        searchOption(index) {
+            let option;
+
+            if (this.searchValue) {
+                option = this.searchOptionInRange(index, this.visibleOptions.length);
+
+                if (!option) {
+                    option = this.searchOptionInRange(0, index);
+                }
+            }
+
+            return option;
+        },
+        searchOptionInRange(start, end) {
+            for (let i = start; i < end; i++) {
+                let opt = this.visibleOptions[i];
+                let label = this.getOptionLabel(opt).toLowerCase();
+                if (label.startsWith(this.searchValue.toLowerCase())) {
+                    return opt;
+                }
+            }
+
+            return null;
+        }
+    },
+    computed: {
+        visibleOptions() {
+            if (this.filterValue)
+                return this.options.filter(option => this.getOptionLabel(option).toLowerCase().indexOf(this.filterValue.toLowerCase()) > -1);
+            else
+                return this.options;
+        },
+        containerClass() {
+            return [
+                'p-dropdown p-component p-unselectable-text',
+                {
+                    'p-disabled': this.disabled, 
+                    'p-dropdown-clearable': this.showClear && !this.disabled,
+                    'p-focus': this.focused
+                }
+            ];
+        },
+        labelClass() {
+            return [
+                'p-dropdown-label p-inputtext', 
+                {
+                    'p-placeholder': this.label === null && this.placeholder, 
+                    'p-dropdown-label-empty': !this.placeholder
+                }
+            ];
+        },
+        label() {
+            let selectedOption = this.getSelectedOption();
+            if (selectedOption)
+                return this.getOptionLabel(selectedOption);
+            else
+                return this.placeholder||'p-dropdown';
+        },
+        editableInputValue() {
+            let selectedOption = this.getSelectedOption();
+            if (selectedOption)
+                return this.getOptionLabel(selectedOption);
+            else
+                return this.value;
+        }
+    }
+}
+</script>
diff --git a/src/components/utils/DomHandler.js b/src/components/utils/DomHandler.js
index 3df8bf588..2fe83b11c 100644
--- a/src/components/utils/DomHandler.js
+++ b/src/components/utils/DomHandler.js
@@ -207,6 +207,7 @@ export default class DomHandler {
         element.style.top = top + 'px';
         element.style.left = left + 'px';
     }
+    
     static getHiddenElementOuterHeight(element) {
         element.style.visibility = 'hidden';
         element.style.display = 'block';
diff --git a/src/main.js b/src/main.js
index 527f500f0..6c5fdd64d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,7 @@ import Button from './components/button/Button';
 import Card from './components/card/Card';
 import Checkbox from './components/checkbox/Checkbox';
 import Chips from './components/chips/Chips';
+import Dropdown from './components/dropdown/Dropdown';
 import Editor from './components/editor/Editor';
 import InputSwitch from './components/inputswitch/InputSwitch';
 import InputText from './components/inputtext/InputText';
@@ -39,6 +40,7 @@ Vue.component('p-button', Button);
 Vue.component('p-card', Card);
 Vue.component('p-checkbox', Checkbox);
 Vue.component('p-chips', Chips);
+Vue.component('p-dropdown', Dropdown);
 Vue.component('p-editor', Editor);
 Vue.component('p-inputSwitch', InputSwitch);
 Vue.component('p-inputtext', InputText);
diff --git a/src/router.js b/src/router.js
index 5c272f7bc..3e6ef2cf5 100644
--- a/src/router.js
+++ b/src/router.js
@@ -36,6 +36,11 @@ export default new Router({
         name: 'chips',
         component: () => import('./views/chips/ChipsDemo.vue')
     },
+    {
+        path: '/dropdown',
+        name: 'dropdown',
+        component: () => import('./views/dropdown/DropdownDemo.vue')
+    },
     {
         path: '/editor',
         name: 'editor',
diff --git a/src/views/dropdown/DropdownDemo.vue b/src/views/dropdown/DropdownDemo.vue
new file mode 100644
index 000000000..b03b28fdc
--- /dev/null
+++ b/src/views/dropdown/DropdownDemo.vue
@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Dropdown</h1>
+                <p>Dropdown is used to select an item from a list of options.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Basic</h3>
+            <p-dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
+
+            <h3>Editable</h3>
+            <p-dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
+
+            <h3>Advanced with Templating, Filtering and Clear Icon</h3>
+            <p-dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
+                <template slot="option" slot-scope="{option}">
+                    <div class="p-clearfix p-dropdown-car-option">
+                        <img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
+                        <span>{{option.brand}}</span>
+                    </div>
+                </template>
+            </p-dropdown>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity1: null,
+            selectedCity2: null,
+            selectedCar: null,
+            cities: [
+                {name: 'New York', code: 'NY'},
+                {name: 'Rome', code: 'RM'},
+                {name: 'London', code: 'LDN'},
+                {name: 'Istanbul', code: 'IST'},
+                {name: 'Paris', code: 'PRS'}
+            ],
+            cars: [
+                {brand: 'Audi', value: 'Audi'},
+                {brand: 'Bmw', value: 'Bmw'},
+                {brand: 'Fiat', value: 'Fiat'},
+                {brand: 'Honda', value: 'Honda'},
+                {brand: 'Jaguar', value: 'Jaguar'},
+                {brand: 'Mercedes', value: 'Mercedes'},
+                {brand: 'Renault', value: 'Renault'},
+                {brand: 'Volkswagen', value: 'Volkswagen'},
+                {brand: 'Volvo', value: 'Volvo'}
+            ]
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.p-dropdown {
+    width: 12em;
+}
+
+.p-dropdown-car-option {
+    img {
+        vertical-align: middle;
+        margin-right: .5em;
+        width: 24px;
+    }
+
+    span {
+        float: right;
+        margin-top: .125em;
+    }
+}
+</style>
diff --git a/src/views/listbox/ListboxDemo.vue b/src/views/listbox/ListboxDemo.vue
index ff1d2a8a3..e4e8f62b1 100644
--- a/src/views/listbox/ListboxDemo.vue
+++ b/src/views/listbox/ListboxDemo.vue
@@ -51,8 +51,4 @@ export default {
         }
     }
 }
-</script>
-
-<style>
-
-</style>
+</script>
\ No newline at end of file