vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Implemented Dropdown Component

pull/12/head
cagataycivici 2018-12-28 15:03:07 +03:00
parent d26626a969
commit c8fb79571f
10 changed files with 623 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/AppMenu.vue
View File

@ -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>

1
src/assets/styles/primevue.css
View File

@ -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';

15
src/components/common/Common.css
View File

@ -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;
}

123
src/components/dropdown/Dropdown.css Normal file
View File

@ -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%;
}

397
src/components/dropdown/Dropdown.vue Normal file
View File

@ -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>

1
src/components/utils/DomHandler.js
View File

@ -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';

2
src/main.js
View File

@ -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);

5
src/router.js
View File

@ -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',

77
src/views/dropdown/DropdownDemo.vue Normal file
View File

@ -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>

6
src/views/listbox/ListboxDemo.vue
View File

@ -51,8 +51,4 @@ export default {
}
}
}
</script>
<style>
</style>
</script>