Readd listbox
cagataycivici
parent
664a638036
commit
b7893ab5ea
|
|
@ -0,0 +1,68 @@
|
||||||
|
.p-listbox {
|
||||||
|
padding: .25em;
|
||||||
|
width: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox .p-listbox-list-wrapper {
|
||||||
|
overflow:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox .p-listbox-list {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox .p-listbox-item {
|
||||||
|
padding: .25em;
|
||||||
|
border: 0 none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox .p-listbox-item > span {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox .p-listbox-item:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox.p-disabled .p-listbox-item {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox-header {
|
||||||
|
margin-bottom: 0.3em;
|
||||||
|
padding: .125em .2em;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox-header .p-checkbox {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox-header .p-listbox-filter-container {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox-header.p-listbox-header-w-checkbox .p-listbox-filter-container {
|
||||||
|
width: calc(100% - 2em);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox-header .p-listbox-filter-container .p-listbox-filter-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: .25em;
|
||||||
|
left: .25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox-header .p-inputtext {
|
||||||
|
padding: .125em .125em .125em 1.25em;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,224 @@
|
||||||
|
<template>
|
||||||
|
<div class="p-listbox p-inputtext p-component">
|
||||||
|
<div class="p-listbox-header" v-if="filter">
|
||||||
|
<div class="p-listbox-filter-container">
|
||||||
|
<input type="text" role="textbox" class="p-inputtext p-component" v-model="filterValue">
|
||||||
|
<span class="p-listbox-filter-icon pi pi-search"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-listbox-list-wrapper" :style="listStyle">
|
||||||
|
<ul class="p-listbox-list">
|
||||||
|
<li v-for="(option, i) of visibleOptions" :tabindex="isOptionDisabled(option) ? null : '0'" :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]"
|
||||||
|
:aria-label="getOptionLabel(option)" :key="getOptionLabel(option)" @click="onOptionSelect($event, option)" @touchend="onOptionTouchEnd()" @keydown="onOptionKeyDown($event, option)">
|
||||||
|
<slot :option="option" :index="i">
|
||||||
|
{{getOptionLabel(option)}}
|
||||||
|
</slot>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ObjectUtils from '../utils/ObjectUtils';
|
||||||
|
import DomHandler from '../utils/DomHandler';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
value: null,
|
||||||
|
options: Array,
|
||||||
|
disabled: Boolean,
|
||||||
|
dataKey: null,
|
||||||
|
listStyle: null,
|
||||||
|
multiple: Boolean,
|
||||||
|
metaKeySelection: Boolean,
|
||||||
|
filter: Boolean,
|
||||||
|
optionLabel: null,
|
||||||
|
optionValue: null,
|
||||||
|
optionDisabled: null
|
||||||
|
},
|
||||||
|
optionTouched: false,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
filterValue: 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;
|
||||||
|
},
|
||||||
|
onOptionSelect(event, option) {
|
||||||
|
if (this.disabled || this.isOptionDisabled(option)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.multiple)
|
||||||
|
this.onOptionSelectMultiple(event, option);
|
||||||
|
else
|
||||||
|
this.onOptionSelectSingle(event, option);
|
||||||
|
|
||||||
|
this.optionTouched = false;
|
||||||
|
},
|
||||||
|
onOptionTouchEnd() {
|
||||||
|
if (this.disabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.optionTouched = true;
|
||||||
|
},
|
||||||
|
onOptionSelectSingle(event, option) {
|
||||||
|
let selected = this.isSelected(option);
|
||||||
|
let valueChanged = false;
|
||||||
|
let value = null;
|
||||||
|
let metaSelection = this.optionTouched ? false : this.metaKeySelection;
|
||||||
|
|
||||||
|
if (metaSelection) {
|
||||||
|
let metaKey = (event.metaKey || event.ctrlKey);
|
||||||
|
|
||||||
|
if (selected) {
|
||||||
|
if (metaKey) {
|
||||||
|
value = null;
|
||||||
|
valueChanged = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
value = this.getOptionValue(option);
|
||||||
|
valueChanged = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
value = selected ? null : this.getOptionValue(option);
|
||||||
|
valueChanged = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (valueChanged) {
|
||||||
|
this.updateModel(event, value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onOptionSelectMultiple(event, option) {
|
||||||
|
let selected = this.isSelected(option);
|
||||||
|
let valueChanged = false;
|
||||||
|
let value = null;
|
||||||
|
let metaSelection = this.optionTouched ? false : this.metaKeySelection;
|
||||||
|
|
||||||
|
if (metaSelection) {
|
||||||
|
let metaKey = (event.metaKey || event.ctrlKey);
|
||||||
|
|
||||||
|
if (selected) {
|
||||||
|
if(metaKey)
|
||||||
|
value = this.removeOption(option);
|
||||||
|
else
|
||||||
|
value = [this.getOptionValue(option)];
|
||||||
|
|
||||||
|
valueChanged = true;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
value = (metaKey) ? this.value || [] : [];
|
||||||
|
value = [...value, this.getOptionValue(option)];
|
||||||
|
valueChanged = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (selected)
|
||||||
|
value = this.removeOption(option);
|
||||||
|
else
|
||||||
|
value = [...this.value || [], this.getOptionValue(option)];
|
||||||
|
|
||||||
|
valueChanged = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(valueChanged) {
|
||||||
|
this.updateModel(event, value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isSelected(option) {
|
||||||
|
let selected = false;
|
||||||
|
let optionValue = this.getOptionValue(option);
|
||||||
|
|
||||||
|
if (this.multiple) {
|
||||||
|
if (this.value) {
|
||||||
|
for (let val of this.value) {
|
||||||
|
if (ObjectUtils.equals(val, optionValue, this.dataKey)) {
|
||||||
|
selected = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
selected = ObjectUtils.equals(this.value, optionValue, this.dataKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
return selected;
|
||||||
|
},
|
||||||
|
removeOption(option) {
|
||||||
|
return this.value.filter(val => !ObjectUtils.equals(val, this.getOptionValue(option), this.dataKey));
|
||||||
|
},
|
||||||
|
updateModel(event, value) {
|
||||||
|
this.$emit('input', value);
|
||||||
|
this.$emit('change', {originalEvent: event, value: value});
|
||||||
|
},
|
||||||
|
onOptionKeyDown(event, option) {
|
||||||
|
let item = event.currentTarget;
|
||||||
|
|
||||||
|
switch (event.which) {
|
||||||
|
//down
|
||||||
|
case 40:
|
||||||
|
var nextItem = this.findNextItem(item);
|
||||||
|
if(nextItem) {
|
||||||
|
nextItem.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
break;
|
||||||
|
|
||||||
|
//up
|
||||||
|
case 38:
|
||||||
|
var prevItem = this.findPrevItem(item);
|
||||||
|
if(prevItem) {
|
||||||
|
prevItem.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
break;
|
||||||
|
|
||||||
|
//enter
|
||||||
|
case 13:
|
||||||
|
this.onOptionSelect(event, option);
|
||||||
|
event.preventDefault();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
findNextItem(item) {
|
||||||
|
let nextItem = item.nextElementSibling;
|
||||||
|
|
||||||
|
if (nextItem)
|
||||||
|
return DomHandler.hasClass(nextItem, 'p-disabled') ? this.findNextOption(nextItem) : nextItem;
|
||||||
|
else
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
findPrevItem(item) {
|
||||||
|
let prevItem = item.previousElementSibling;
|
||||||
|
|
||||||
|
if (prevItem)
|
||||||
|
return DomHandler.hasClass(prevItem, 'p-disabled') ? this.findPrevItem(prevItem) : prevItem;
|
||||||
|
else
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue