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

Migrated input components to Vue 3

pull/496/head
Cagatay Civici 2020-09-21 14:43:12 +03:00
parent 91aef8c761
commit 2855620131
27 changed files with 527 additions and 15006 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14492
npm-shrinkwrap.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -28,7 +28,7 @@
],
"devDependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0-0",
"vue": "3.0.0",
"vue-router": "^4.0.0-0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",

8
src/AppMenu.vue
View File

@ -70,7 +70,7 @@
<div class="menu-category">Data</div>
<div class="menu-items">
<router-link to="/datatable" v-slot="{isActive}">
<router-link to="/datatable" v-slot="{isActive}" custom>
<div>
<a tabindex="0" @click="toggleSubmenu($event, 'datatable')">DataTable</a>
<transition name="p-toggleable-content">
@ -115,7 +115,7 @@
<router-link to="/organizationchart">OrganizationChart</router-link>
<router-link to="/paginator">Paginator</router-link>
<router-link to="/picklist">PickList</router-link>
<router-link to="/tree" v-slot="{isActive}">
<router-link to="/tree" v-slot="{isActive}" custom>
<div>
<a tabindex="0" @click="toggleSubmenu($event, 'tree')">Tree</a>
<transition name="p-toggleable-content">
@ -131,7 +131,7 @@
</transition>
</div>
</router-link>
<router-link to="/treetable" v-slot="{isActive}">
<router-link to="/treetable" v-slot="{isActive}" custom>
<div>
<a tabindex="0" @click="toggleSubmenu($event, 'treetable')">TreeTable</a>
<transition name="p-toggleable-content">
@ -215,7 +215,7 @@
<div class="menu-category">Media</div>
<div class="menu-items">
<router-link to="/carousel">Carousel</router-link>
<router-link to="/galleria" v-slot="{isActive}">
<router-link to="/galleria" v-slot="{isActive}" custom>
<div>
<a tabindex="0" @click="toggleSubmenu($event, 'galleria')">Galleria</a>
<transition name="p-toggleable-content">

36
src/components/autocomplete/AutoComplete.vue
View File

@ -15,7 +15,7 @@
<i class="p-autocomplete-loader pi pi-spinner pi-spin" v-if="searching"></i>
<Button ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div ref="overlay" class="p-autocomplete-panel p-component" :style="{'max-height': scrollHeight}" v-if="overlayVisible">
<div :ref="overlayRef" class="p-autocomplete-panel p-component" :style="{'max-height': scrollHeight}" v-if="overlayVisible">
<ul :id="listId" class="p-autocomplete-items" role="listbox">
<li v-for="(item, i) of suggestions" class="p-autocomplete-item" :key="i" @click="selectItem($event, item)" role="option" v-ripple>
<slot name="item" :item="item" :index="i">
@ -84,6 +84,7 @@ export default {
},
timeout: null,
outsideClickListener: null,
overlay: null,
data() {
return {
searching: false,
@ -108,28 +109,30 @@ export default {
beforeUnmount() {
this.restoreAppend();
this.unbindOutsideClickListener();
this.overlay = null;
},
methods: {
onOverlayEnter() {
this.$refs.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.appendContainer();
this.alignOverlay();
this.bindOutsideClickListener();
},
onOverlayLeave() {
this.unbindOutsideClickListener();
this.overlay = null;
},
alignOverlay() {
let target = this.multiple ? this.$refs.multiContainer : this.$refs.input;
if (this.appendTo)
DomHandler.absolutePosition(this.$refs.overlay, target);
DomHandler.absolutePosition(this.overlay, target);
else
DomHandler.relativePosition(this.$refs.overlay, target);
DomHandler.relativePosition(this.overlay, target);
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
if (this.overlayVisible && this.$refs.overlay && this.isOutsideClicked(event)) {
if (this.overlayVisible && this.overlay && this.isOutsideClicked(event)) {
this.hideOverlay();
}
};
@ -137,7 +140,7 @@ export default {
}
},
isOutsideClicked(event) {
return !this.$refs.overlay.contains(event.target) && !this.isInputClicked(event) && !this.isDropdownClicked(event);
return !this.overlay.contains(event.target) && !this.isInputClicked(event) && !this.isDropdownClicked(event);
},
isInputClicked(event) {
if (this.multiple)
@ -266,7 +269,7 @@ export default {
},
onKeyDown(event) {
if (this.overlayVisible) {
let highlightItem = DomHandler.findSingle(this.$refs.overlay, 'li.p-highlight');
let highlightItem = DomHandler.findSingle(this.overlay, 'li.p-highlight');
switch(event.which) {
//down
@ -276,11 +279,11 @@ export default {
if (nextElement) {
DomHandler.addClass(nextElement, 'p-highlight');
DomHandler.removeClass(highlightItem, 'p-highlight');
DomHandler.scrollInView(this.$refs.overlay, nextElement);
DomHandler.scrollInView(this.overlay, nextElement);
}
}
else {
DomHandler.addClass(this.$refs.overlay.firstChild.firstChild, 'p-highlight');
DomHandler.addClass(this.overlay.firstChild.firstChild, 'p-highlight');
}
event.preventDefault();
@ -293,7 +296,7 @@ export default {
if (previousElement) {
DomHandler.addClass(previousElement, 'p-highlight');
DomHandler.removeClass(highlightItem, 'p-highlight');
DomHandler.scrollInView(this.$refs.overlay, previousElement);
DomHandler.scrollInView(this.overlay, previousElement);
}
}
@ -367,18 +370,21 @@ export default {
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.$refs.overlay);
document.body.appendChild(this.overlay);
else
document.getElementById(this.appendTo).appendChild(this.$refs.overlay);
document.getElementById(this.appendTo).appendChild(this.overlay);
}
},
restoreAppend() {
if (this.$refs.overlay && this.appendTo) {
if (this.overlay && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.$refs.overlay);
document.body.removeChild(this.overlay);
else
document.getElementById(this.appendTo).removeChild(this.$refs.overlay);
document.getElementById(this.appendTo).removeChild(this.overlay);
}
},
overlayRef(el) {
this.overlay = el;
}
},
computed: {

61
src/components/calendar/Calendar.vue
View File

@ -2,8 +2,8 @@
<span :class="containerClass" :style="style">
<CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" :value="inputFieldValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" :aria-labelledby="ariaLabelledBy" inputmode="none" />
<CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
<div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" :aria-labelledby="ariaLabelledBy">
<transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
<div :ref="overlayRef" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" :aria-labelledby="ariaLabelledBy">
<template v-if="!timeOnly">
<div class="p-datepicker-group-container">
<div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year">
@ -321,7 +321,7 @@ export default {
}
},
updated() {
if (this.$refs.overlay) {
if (this.overlay) {
this.updateFocus();
}
@ -344,6 +344,7 @@ export default {
this.restoreAppend();
this.unbindOutsideClickListener();
this.overlay = null;
},
data() {
return {
@ -359,6 +360,7 @@ export default {
},
outsideClickListener: null,
maskClickListener: null,
overlay: null,
mask: null,
timePickerTimer: null,
isKeydown: false,
@ -531,7 +533,7 @@ export default {
},
onOverlayEnter() {
if (this.autoZIndex) {
this.$refs.overlay.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
this.overlay.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
}
this.appendContainer();
this.alignOverlay();
@ -543,6 +545,7 @@ export default {
onOverlayLeave() {
this.unbindOutsideClickListener();
this.$emit('hide');
this.overlay = null;
},
onPrevButtonClick(event) {
this.navigationState = {backward: true, button: true};
@ -641,7 +644,7 @@ export default {
},
isOutsideClicked(event) {
return !(this.$el.isSameNode(event.target) || this.isNavIconClicked(event) ||
this.$el.contains(event.target) || (this.$refs.overlay && this.$refs.overlay.contains(event.target)));
this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
},
isNavIconClicked(event) {
return (DomHandler.hasClass(event.target, 'p-datepicker-prev') || DomHandler.hasClass(event.target, 'p-datepicker-prev-icon')
@ -651,11 +654,11 @@ export default {
if (this.touchUI) {
this.enableModality();
}
else if (this.$refs.overlay) {
else if (this.overlay) {
if (this.appendTo)
DomHandler.absolutePosition(this.$refs.overlay, this.$el);
DomHandler.absolutePosition(this.overlay, this.$el);
else
DomHandler.relativePosition(this.$refs.overlay, this.$el);
DomHandler.relativePosition(this.overlay, this.$el);
}
},
onButtonClick() {
@ -701,7 +704,7 @@ export default {
return;
}
DomHandler.find(this.$refs.overlay, '.p-datepicker-calendar td span:not(.p-disabled)').forEach(cell => cell.tabIndex = -1);
DomHandler.find(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled)').forEach(cell => cell.tabIndex = -1);
if (event) {
event.currentTarget.focus();
@ -1261,7 +1264,7 @@ export default {
enableModality() {
if (!this.mask) {
this.mask = document.createElement('div');
this.mask.style.zIndex = String(parseInt(this.$refs.overlay.style.zIndex, 10) - 1);
this.mask.style.zIndex = String(parseInt(this.overlay.style.zIndex, 10) - 1);
DomHandler.addMultipleClasses(this.mask, 'p-datepicker-mask p-datepicker-mask-scrollblocker');
this.maskClickListener = () => {
@ -1708,7 +1711,7 @@ export default {
this.navBackward(event);
}
else {
let prevMonthContainer = this.$refs.overlay.children[groupIndex - 1];
let prevMonthContainer = this.overlay.children[groupIndex - 1];
let cells = DomHandler.find(prevMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled)');
let focusCell = cells[cells.length - 1];
focusCell.tabIndex = '0';
@ -1721,7 +1724,7 @@ export default {
this.navForward(event);
}
else {
let nextMonthContainer = this.$refs.overlay.children[groupIndex + 1];
let nextMonthContainer = this.overlay.children[groupIndex + 1];
let focusCell = DomHandler.findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled)');
focusCell.tabIndex = '0';
focusCell.focus();
@ -1803,17 +1806,17 @@ export default {
this.initFocusableCell();
if (this.navigationState.backward)
DomHandler.findSingle(this.$refs.overlay, '.p-datepicker-prev').focus();
DomHandler.findSingle(this.overlay, '.p-datepicker-prev').focus();
else
DomHandler.findSingle(this.$refs.overlay, '.p-datepicker-next').focus();
DomHandler.findSingle(this.overlay, '.p-datepicker-next').focus();
}
else {
if (this.navigationState.backward) {
let cells = DomHandler.find(this.$refs.overlay, '.p-datepicker-calendar td span:not(.p-disabled)');
let cells = DomHandler.find(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled)');
cell = cells[cells.length - 1];
}
else {
cell = DomHandler.findSingle(this.$refs.overlay, '.p-datepicker-calendar td span:not(.p-disabled)');
cell = DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled)');
}
if (cell) {
@ -1830,20 +1833,21 @@ export default {
},
initFocusableCell() {
let cell;
if (this.view === 'month') {
let cells = DomHandler.find(this.$refs.overlay, '.p-monthpicker .p-monthpicker-month');
let selectedCell= DomHandler.findSingle(this.$refs.overlay, '.p-monthpicker .p-monthpicker-month.p-highlight');
let cells = DomHandler.find(this.overlay, '.p-monthpicker .p-monthpicker-month');
let selectedCell= DomHandler.findSingle(this.overlay, '.p-monthpicker .p-monthpicker-month.p-highlight');
cells.forEach(cell => cell.tabIndex = -1);
cell = selectedCell || cells[0];
}
else {
cell = DomHandler.findSingle(this.$refs.overlay, 'span.p-highlight');
cell = DomHandler.findSingle(this.overlay, 'span.p-highlight');
if (!cell) {
let todayCell = DomHandler.findSingle(this.$refs.overlay, 'td.p-datepicker-today span:not(.p-disabled)');
let todayCell = DomHandler.findSingle(this.overlay, 'td.p-datepicker-today span:not(.p-disabled)');
if (todayCell)
cell = todayCell;
else
cell = DomHandler.findSingle(this.$refs.overlay, '.p-datepicker-calendar td span:not(.p-disabled)');
cell = DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled)');
}
}
@ -1853,7 +1857,7 @@ export default {
},
trapFocus(event) {
event.preventDefault();
let focusableElements = DomHandler.getFocusableElements(this.$refs.overlay);
let focusableElements = DomHandler.getFocusableElements(this.getPicker());
if (focusableElements && focusableElements.length > 0) {
if (!document.activeElement) {
@ -1918,17 +1922,17 @@ export default {
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.$refs.overlay);
document.body.appendChild(this.overlay);
else
document.getElementById(this.appendTo).appendChild(this.$refs.overlay);
document.getElementById(this.appendTo).appendChild(this.overlay);
}
},
restoreAppend() {
if (this.$refs.overlay && this.appendTo) {
if (this.overlay && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.$refs.overlay);
document.body.removeChild(this.overlay);
else
document.getElementById(this.appendTo).removeChild(this.$refs.overlay);
document.getElementById(this.appendTo).removeChild(this.overlay);
}
},
onFocus() {
@ -1967,6 +1971,9 @@ export default {
//no op
break;
}
},
overlayRef(el) {
this.overlay = el;
}
},
computed: {

4
src/components/chips/Chips.vue
View File

@ -8,8 +8,8 @@
</slot>
</li>
<li class="p-chips-input-token">
<input ref="input" type="text" v-bind="$attrs" @focus="onFocus" @blur="onBlur($event)" :placeholder="placeholder" @input="onInput"
@keydown="onKeyDown($event)" @paste="onPaste($event)" :disabled="$attrs.disabled || maxedOut" :aria-labelledby="ariaLabelledBy">
<input ref="input" type="text" v-bind="$attrs" @focus="onFocus" @blur="onBlur($event)" @input="onInput" @keydown="onKeyDown($event)" @paste="onPaste($event)"
:placeholder="placeholder" :disabled="$attrs.disabled || maxedOut" :aria-labelledby="ariaLabelledBy">
</li>
</ul>
</div>

71
src/components/colorpicker/ColorPicker.vue
View File

@ -3,15 +3,15 @@
<input ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled"
@click="onInputClick" @keydown="onInputKeydown" v-if="!inline" :aria-labelledby="ariaLabelledBy"/>
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div ref="picker" :class="pickerClass" v-if="inline ? true : overlayVisible">
<div :ref="pickerRef" :class="pickerClass" v-if="inline ? true : overlayVisible">
<div class="p-colorpicker-content">
<div ref="colorSelector" class="p-colorpicker-color-selector" @mousedown="onColorMousedown">
<div :ref="colorSelectorRef" class="p-colorpicker-color-selector" @mousedown="onColorMousedown">
<div class="p-colorpicker-color">
<div ref="colorHandle" class="p-colorpicker-color-handle"></div>
<div :ref="colorHandleRef" class="p-colorpicker-color-handle"></div>
</div>
</div>
<div ref="hueView" class="p-colorpicker-hue" @mousedown="onHueMousedown">
<div ref="hueHandle" class="p-colorpicker-hue-handle"></div>
<div :ref="hueViewRef" class="p-colorpicker-hue" @mousedown="onHueMousedown">
<div :ref="hueHandleRef" class="p-colorpicker-hue-handle"></div>
</div>
</div>
</div>
@ -24,7 +24,7 @@ import DomHandler from '../utils/DomHandler';
export default {
props: {
value: {
modelValue: {
type: null,
default: null
},
@ -73,10 +73,16 @@ export default {
hueDragging: null,
colorDragging: null,
selfUpdate: null,
picker: null,
colorSelector: null,
colorHandle: null,
hueView: null,
hueHandle: null,
beforeUnmount() {
this.unbindOutsideClickListener();
this.unbindDocumentMouseMoveListener();
this.unbindDocumentMouseUpListener();
this.clearRefs();
},
mounted() {
this.updateUI();
@ -96,7 +102,7 @@ export default {
},
methods: {
pickColor(event) {
let rect = this.$refs.colorSelector.getBoundingClientRect();
let rect = this.colorSelector.getBoundingClientRect();
let top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
let left = rect.left + document.body.scrollLeft;
let saturation = Math.floor(100 * (Math.max(0, Math.min(150, (event.pageX - left)))) / 150);
@ -113,7 +119,7 @@ export default {
this.updateModel();
},
pickHue(event) {
let top = this.$refs.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
let top = this.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
this.hsbValue = this.validateHSB({
h: Math.floor(360 * (150 - Math.max(0, Math.min(150, (event.pageY - top)))) / 150),
s: 100,
@ -128,15 +134,15 @@ export default {
updateModel() {
switch(this.format) {
case 'hex':
this.$emit('input', this.HSBtoHEX(this.hsbValue));
this.$emit('update:modelValue', this.HSBtoHEX(this.hsbValue));
break;
case 'rgb':
this.$emit('input', this.HSBtoRGB(this.hsbValue));
this.$emit('update:modelValue', this.HSBtoRGB(this.hsbValue));
break;
case 'hsb':
this.$emit('input', this.hsbValue);
this.$emit('update:modelValue', this.hsbValue);
break;
default:
@ -145,24 +151,24 @@ export default {
}
},
updateColorSelector() {
if (this.$refs.colorSelector) {
if (this.colorSelector) {
let hsbValue = this.validateHSB({
h: this.hsbValue.h,
s: 100,
b: 100
});
this.$refs.colorSelector.style.backgroundColor = '#' + this.HSBtoHEX(hsbValue);
this.colorSelector.style.backgroundColor = '#' + this.HSBtoHEX(hsbValue);
}
},
updateColorHandle() {
if (this.$refs.colorHandle) {
this.$refs.colorHandle.style.left = Math.floor(150 * this.hsbValue.s / 100) + 'px';
this.$refs.colorHandle.style.top = Math.floor(150 * (100 - this.hsbValue.b) / 100) + 'px';
if (this.colorHandle) {
this.colorHandle.style.left = Math.floor(150 * this.hsbValue.s / 100) + 'px';
this.colorHandle.style.top = Math.floor(150 * (100 - this.hsbValue.b) / 100) + 'px';
}
},
updateHue() {
if (this.$refs.hueHandle) {
this.$refs.hueHandle.style.top = Math.floor(150 - (150 * this.hsbValue.h / 360)) + 'px';
if (this.hueHandle) {
this.hueHandle.style.top = Math.floor(150 - (150 * this.hsbValue.h / 360)) + 'px';
}
},
updateInput() {
@ -319,14 +325,15 @@ export default {
this.bindOutsideClickListener();
if (this.autoZIndex) {
this.$refs.picker.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
this.picker.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
}
},
onOverlayLeave() {
this.unbindOutsideClickListener();
this.clearRefs();
},
alignOverlay() {
DomHandler.relativePosition(this.$refs.picker, this.$refs.input);
DomHandler.relativePosition(this.picker, this.$refs.input);
},
onInputClick() {
if (this.disabled) {
@ -382,7 +389,7 @@ export default {
bindOutsideClickListener() {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
if (this.overlayVisible && this.$refs.picker && !this.$refs.picker.contains(event.target) && !this.isInputClicked(event)) {
if (this.overlayVisible && this.picker && !this.picker.contains(event.target) && !this.isInputClicked(event)) {
this.overlayVisible = false;
}
};
@ -432,6 +439,28 @@ export default {
document.removeEventListener('mouseup', this.documentMouseUpListener);
this.documentMouseUpListener = null;
}
},
pickerRef(el) {
this.picker = el
},
colorSelectorRef(el) {
this.colorSelector = el;
},
colorHandleRef(el) {
this.colorHandle = el;
},
hueViewRef(el) {
this.hueView = el;
},
hueHandleRef(el) {
this.hueHandle = el;
},
clearRefs() {
this.picker = null;
this.colorSelector = null;
this.colorHandle = null;
this.hueView = null;
this.hueHandle = null;
}
},
computed: {

7
src/components/dialog/Dialog.vue
View File

@ -1,7 +1,7 @@
<template>
<div ref="mask" :class="maskClass" v-if="maskVisible" @click="onMaskClick">
<transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" @appear="onAppear">
<div ref="dialog" :class="dialogClass" :style="dialogStyle" v-if="visible" v-bind="$attrs" v-on="listeners" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" @click.stop>
<div ref="dialog" :class="dialogClass" :style="dialogStyle" v-if="visible" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" @click.stop>
<div class="p-dialog-header" v-if="showHeader">
<slot name="header">
<span :id="ariaLabelledById" class="p-dialog-title" v-if="header" >{{header}}</span>
@ -229,11 +229,6 @@ export default {
}
},
computed: {
listeners() {
return {
...this.$listeners
};
},
maskClass() {
return ['p-dialog-mask', this.getPositionClass()];
},

58
src/components/dropdown/Dropdown.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="container" :class="containerClass" @click="onClick($event)">
<div :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible">
<input ref="focusInput" type="text" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
@ -7,23 +7,23 @@
<input v-if="editable" type="text" class="p-dropdown-label p-inputtext" :disabled="disabled" @focus="onFocus" @blur="onBlur" :placeholder="placeholder" :value="editableInputValue" @input="onEditableInput"
aria-haspopup="listbox" :aria-expanded="overlayVisible">
<span v-if="!editable" :class="labelClass">
<slot name="value" :value="value" :placeholder="placeholder">
<slot name="value" :value="modelValue" :placeholder="placeholder">
{{label}}
</slot>
</span>
<i v-if="showClear && value != null" class="p-dropdown-clear-icon pi pi-times" @click="onClearClick($event)"></i>
<i v-if="showClear && modelValue != null" class="p-dropdown-clear-icon pi pi-times" @click="onClearClick($event)"></i>
<div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
<span class="p-dropdown-trigger-icon pi pi-chevron-down"></span>
</div>
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div ref="overlay" class="p-dropdown-panel p-component" v-if="overlayVisible">
<div :ref="overlayRef" class="p-dropdown-panel p-component" v-if="overlayVisible">
<div class="p-dropdown-header" v-if="filter">
<div class="p-dropdown-filter-container">
<input type="text" ref="filterInput" v-model="filterValue" autoComplete="off" class="p-dropdown-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeyDown" @input="onFilterChange"/>
<span class="p-dropdown-filter-icon pi pi-search"></span>
</div>
</div>
<div ref="itemsWrapper" class="p-dropdown-items-wrapper" :style="{'max-height': scrollHeight}">
<div class="p-dropdown-items-wrapper" :style="{'max-height': scrollHeight}">
<ul class="p-dropdown-items" role="listbox">
<li v-for="(option, i) of visibleOptions" :class="['p-dropdown-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" v-ripple
:aria-label="getOptionLabel(option)" :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" role="option" :aria-selected="isSelected(option)">
@ -46,7 +46,7 @@ import Ripple from '../ripple/Ripple';
export default {
props: {
value: null,
modelValue: null,
options: Array,
optionLabel: null,
optionValue: null,
@ -87,9 +87,11 @@ export default {
currentSearchChar: null,
previousSearchChar: null,
searchValue: null,
overlay: null,
beforeUnmount() {
this.restoreAppend();
this.unbindOutsideClickListener();
this.overlay = null;
},
updated() {
if (this.overlayVisible && this.filterValue) {
@ -112,9 +114,9 @@ export default {
getSelectedOption() {
let selectedOption;
if (this.value != null && this.options) {
if (this.modelValue != null && this.options) {
for (let option of this.options) {
if ((ObjectUtils.equals(this.value, this.getOptionValue(option), this.equalityKey))) {
if ((ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.equalityKey))) {
selectedOption = option;
break;
}
@ -124,14 +126,14 @@ export default {
return selectedOption;
},
isSelected(option) {
return ObjectUtils.equals(this.value, this.getOptionValue(option), this.equalityKey);
return ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
},
getSelectedOptionIndex() {
let selectedOptionIndex = -1;
if (this.value != null && this.visibleOptions) {
if (this.modelValue != null && this.visibleOptions) {
for (let i = 0; i < this.visibleOptions.length; i++) {
if ((ObjectUtils.equals(this.value, this.getOptionValue(this.visibleOptions[i]), this.equalityKey))) {
if ((ObjectUtils.equals(this.modelValue, this.getOptionValue(this.visibleOptions[i]), this.equalityKey))) {
selectedOptionIndex = i;
break;
}
@ -279,7 +281,7 @@ export default {
if (DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || event.target.tagName === 'INPUT') {
return;
}
else if (!this.$refs.overlay || !this.$refs.overlay.contains(event.target)) {
else if (!this.overlay || !this.overlay.contains(event.target)) {
if (this.overlayVisible)
this.hide();
else
@ -298,10 +300,10 @@ export default {
}, 200);
},
onEditableInput(event) {
this.$emit('input', event.target.value);
this.$emit('update:modelValue', event.target.value);
},
onOverlayEnter() {
this.$refs.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.appendContainer();
this.alignOverlay();
this.bindOutsideClickListener();
@ -315,23 +317,24 @@ export default {
onOverlayLeave() {
this.unbindOutsideClickListener();
this.$emit('hide');
this.overlay = null;
},
alignOverlay() {
if (this.appendTo) {
DomHandler.absolutePosition(this.$refs.overlay, this.$refs.container);
this.$refs.overlay.style.minWidth = DomHandler.getOuterWidth(this.$refs.container) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
} else {
DomHandler.relativePosition(this.$refs.overlay, this.$refs.container);
DomHandler.relativePosition(this.overlay, this.$el);
}
},
updateModel(event, value) {
this.$emit('input', value);
this.$emit('update:modelValue', value);
this.$emit('change', {originalEvent: event, value: value});
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
if (this.overlayVisible && this.$refs.overlay && !this.$refs.container.contains(event.target) && !this.$refs.overlay.contains(event.target)) {
if (this.overlayVisible && this.overlay && !this.$el.contains(event.target) && !this.overlay.contains(event.target)) {
this.hide();
}
};
@ -400,21 +403,24 @@ export default {
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.$refs.overlay);
document.body.appendChild(this.overlay);
else
document.getElementById(this.appendTo).appendChild(this.$refs.overlay);
document.getElementById(this.appendTo).appendChild(this.overlay);
}
},
restoreAppend() {
if (this.$refs.overlay && this.appendTo) {
if (this.overlay && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.$refs.overlay);
document.body.removeChild(this.overlay);
else
document.getElementById(this.appendTo).removeChild(this.$refs.overlay);
document.getElementById(this.appendTo).removeChild(this.overlay);
}
},
onFilterChange(event) {
this.$emit('filter', {originalEvent: event, value: event.target.value});
},
overlayRef(el) {
this.overlay = el;
}
},
computed: {
@ -431,7 +437,7 @@ export default {
'p-disabled': this.disabled,
'p-dropdown-clearable': this.showClear && !this.disabled,
'p-focus': this.focused,
'p-inputwrapper-filled': this.value,
'p-inputwrapper-filled': this.modelValue,
'p-inputwrapper-focus': this.focused
}
];
@ -457,7 +463,7 @@ export default {
if (selectedOption)
return this.getOptionLabel(selectedOption);
else
return this.value;
return this.modelValue;
},
equalityKey() {
return this.optionValue ? null : this.dataKey;

14
src/components/editor/Editor.vue
View File

@ -52,7 +52,7 @@ import Quill from "quill";
export default {
props: {
value: String,
modelValue: String,
placeholder: String,
readonly: Boolean,
formats: Array,
@ -60,10 +60,10 @@ export default {
},
quill: null,
watch: {
value(newValue, oldValue) {
if (newValue !== oldValue && this.quill && !this.quill.hasFocus()) {
this.renderValue(newValue);
}
modelValue(newValue, oldValue) {
if (newValue !== oldValue && this.quill && !this.quill.hasFocus()) {
this.renderValue(newValue);
}
}
},
mounted() {
@ -77,7 +77,7 @@ export default {
placeholder: this.placeholder
});
this.renderValue(this.value);
this.renderValue(this.modelValue);
this.quill.on('text-change', (delta, oldContents, source) => {
if (source === 'user') {
@ -87,7 +87,7 @@ export default {
html = '';
}
this.$emit('input', html);
this.$emit('update:modelValue', html);
this.$emit('text-change', {
htmlValue: html,
textValue: text,

332
src/components/inputmask/InputMask.vue
View File

@ -1,5 +1,6 @@
<template>
<input :class="inputClass" v-on="listeners" :value="value" />
<input :class="inputClass" v-bind="$attrs" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur"
@keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" />
</template>
<script>
@ -7,7 +8,7 @@ import DomHandler from '../utils/DomHandler';
export default {
props: {
value: null,
modelValue: null,
slotChar: {
type: String,
default: '_'
@ -23,10 +24,160 @@ export default {
unmask: {
type: Boolean,
default: false
},
ariaLabelledBy: null
}
},
methods: {
onInput(event) {
if (this.androidChrome)
this.handleAndroidInput(event);
else
this.handleInputChange(event);
this.$emit('update:modelValue', event.target.value);
},
onFocus(event) {
if (this.$attrs.readonly) {
return;
}
this.focus = true;
clearTimeout(this.caretTimeoutId);
let pos;
this.focusText = this.$el.value;
pos = this.checkVal();
this.caretTimeoutId = setTimeout(() => {
if (this.$el !== document.activeElement) {
return;
}
this.writeBuffer();
if (pos === this.mask.replace("?", "").length) {
this.caret(0, pos);
} else {
this.caret(pos);
}
}, 10);
this.$emit('focus', event)
},
onBlur(event) {
this.focus = false;
this.checkVal();
this.updateModel(event);
if (this.$el.value !== this.focusText) {
let e = document.createEvent('HTMLEvents');
e.initEvent('change', true, false);
this.$el.dispatchEvent(e);
}
this.$emit('blur', event);
},
onKeyDown(event) {
if (this.$attrs.readonly) {
return;
}
let k = event.which || event.keyCode,
pos,
begin,
end;
let iPhone = /iphone/i.test(DomHandler.getUserAgent());
this.oldVal = this.$el.value;
//backspace, delete, and escape get special treatment
if (k === 8 || k === 46 || (iPhone && k === 127)) {
pos = this.caret();
begin = pos.begin;
end = pos.end;
if (end - begin === 0) {
begin = k !== 46 ? this.seekPrev(begin) : (end = this.seekNext(begin - 1));
end = k === 46 ? this.seekNext(end) : end;
}
this.clearBuffer(begin, end);
this.shiftL(begin, end - 1);
this.updateModel(event);
event.preventDefault();
} else if (k === 13) { // enter
this.$el.blur();
this.updateModel(event);
} else if (k === 27) { // escape
this.$el.value = this.focusText;
this.caret(0, this.checkVal());
this.updateModel(event);
event.preventDefault();
}
this.$emit('keydown', event);
},
onKeyPress(event) {
if (this.$attrs.readonly) {
return;
}
var k = event.which || event.keyCode,
pos = this.caret(),
p,
c,
next,
completed;
if (event.ctrlKey || event.altKey || event.metaKey || k < 32) {//Ignore
return;
} else if (k && k !== 13) {
if (pos.end - pos.begin !== 0) {
this.clearBuffer(pos.begin, pos.end);
this.shiftL(pos.begin, pos.end - 1);
}
p = this.seekNext(pos.begin - 1);
if (p < this.len) {
c = String.fromCharCode(k);
if (this.tests[p].test(c)) {
this.shiftR(p);
this.buffer[p] = c;
this.writeBuffer();
next = this.seekNext(p);
if (/android/i.test(DomHandler.getUserAgent())) {
//Path for CSP Violation on FireFox OS 1.1
let proxy = () => {
this.caret(next);
};
setTimeout(proxy, 0);
} else {
this.caret(next);
}
if (pos.begin <= this.lastRequiredNonMaskPos) {
completed = this.isCompleted();
}
}
}
event.preventDefault();
}
this.updateModel(event);
if (completed) {
this.$emit('complete', event);
}
this.$emit('keypress', event);
},
onPaste(event) {
this.handleInputChange(event);
this.$emit('paste', event);
},
caret(first, last) {
let range, begin, end;
@ -237,16 +388,16 @@ export default {
},
updateModel(e) {
let val = this.unmask ? this.getUnmaskedValue() : e.target.value;
this.$emit('input', (this.defaultBuffer !== val) ? val : '');
this.$emit('update:modelValue', (this.defaultBuffer !== val) ? val : '');
},
updateValue() {
if (this.$el) {
if (this.value == null) {
if (this.modelValue == null) {
this.$el.value = '';
this.$emit('input', '');
this.$emit('update:modelValue', '');
}
else {
this.$el.value = this.value;
this.$el.value = this.modelValue;
this.checkVal();
setTimeout(() => {
@ -255,7 +406,7 @@ export default {
this.checkVal();
let val = this.unmask ? this.getUnmaskedValue() : this.$el.value;
this.$emit('input', (this.defaultBuffer !== val) ? val : '');
this.$emit('update:modelValue', (this.defaultBuffer !== val) ? val : '');
}
}, 10);
}
@ -320,171 +471,12 @@ export default {
}
},
computed: {
listeners() {
let $vm = this;
return {
...$vm.$listeners,
input: event => {
if ($vm.androidChrome)
$vm.handleAndroidInput(event);
else
$vm.handleInputChange(event);
$vm.$emit('input', event.target.value);
},
focus: event => {
if ($vm.$attrs.readonly) {
return;
}
$vm.focus = true;
clearTimeout($vm.caretTimeoutId);
let pos;
$vm.focusText = $vm.$el.value;
pos = $vm.checkVal();
$vm.caretTimeoutId = setTimeout(() => {
if ($vm.$el !== document.activeElement) {
return;
}
$vm.writeBuffer();
if (pos === $vm.mask.replace("?", "").length) {
$vm.caret(0, pos);
} else {
$vm.caret(pos);
}
}, 10);
$vm.$emit('focus', event)
},
blur: event => {
$vm.focus = false;
$vm.checkVal();
$vm.updateModel(event);
if ($vm.$el.value !== $vm.focusText) {
let e = document.createEvent('HTMLEvents');
e.initEvent('change', true, false);
$vm.$el.dispatchEvent(e);
}
$vm.$emit('blur', event);
},
keydown: event => {
if ($vm.$attrs.readonly) {
return;
}
let k = event.which || event.keyCode,
pos,
begin,
end;
let iPhone = /iphone/i.test(DomHandler.getUserAgent());
$vm.oldVal = $vm.$el.value;
//backspace, delete, and escape get special treatment
if (k === 8 || k === 46 || (iPhone && k === 127)) {
pos = $vm.caret();
begin = pos.begin;
end = pos.end;
if (end - begin === 0) {
begin = k !== 46 ? $vm.seekPrev(begin) : (end = $vm.seekNext(begin - 1));
end = k === 46 ? $vm.seekNext(end) : end;
}
$vm.clearBuffer(begin, end);
$vm.shiftL(begin, end - 1);
$vm.updateModel(event);
event.preventDefault();
} else if (k === 13) { // enter
$vm.$el.blur();
$vm.updateModel(event);
} else if (k === 27) { // escape
$vm.$el.value = $vm.focusText;
$vm.caret(0, $vm.checkVal());
$vm.updateModel(event);
event.preventDefault();
}
$vm.$emit('keydown', event);
},
keypress: event => {
if ($vm.$attrs.readonly) {
return;
}
var k = event.which || event.keyCode,
pos = $vm.caret(),
p,
c,
next,
completed;
if (event.ctrlKey || event.altKey || event.metaKey || k < 32) {//Ignore
return;
} else if (k && k !== 13) {
if (pos.end - pos.begin !== 0) {
$vm.clearBuffer(pos.begin, pos.end);
$vm.shiftL(pos.begin, pos.end - 1);
}
p = $vm.seekNext(pos.begin - 1);
if (p < $vm.len) {
c = String.fromCharCode(k);
if ($vm.tests[p].test(c)) {
$vm.shiftR(p);
$vm.buffer[p] = c;
$vm.writeBuffer();
next = $vm.seekNext(p);
if (/android/i.test(DomHandler.getUserAgent())) {
//Path for CSP Violation on FireFox OS 1.1
let proxy = () => {
$vm.caret(next);
};
setTimeout(proxy, 0);
} else {
$vm.caret(next);
}
if (pos.begin <= $vm.lastRequiredNonMaskPos) {
completed = $vm.isCompleted();
}
}
}
event.preventDefault();
}
$vm.updateModel(event);
if (completed) {
$vm.$emit('complete', event);
}
$vm.$emit('keypress', event);
},
paste: event => {
$vm.handleInputChange(event);
$vm.$emit('paste', event);
}
};
},
filled() {
return (this.value != null && this.value.toString().length > 0)
return (this.modelValue != null && this.modelValue.toString().length > 0)
},
inputClass() {
return ['p-inputmask p-inputtext p-component', {
'p-filled': this.filled,
'p-disabled': this.$attrs.disabled
'p-filled': this.filled
}];
},
}

38
src/components/inputnumber/InputNumber.vue
View File

@ -1,6 +1,7 @@
<template>
<span :class="containerClass">
<INInputText ref="input" class="p-inputnumber-input" :value="formattedValue" v-bind="$attrs" v-on="listeners" :aria-valumin="min" :aria-valuemax="max" />
<span :class="containerClass" :style="style">
<INInputText ref="input" class="p-inputnumber-input" :value="formattedValue" v-bind="$attrs" :aria-valumin="min" :aria-valuemax="max"
@input="onInput" @keydown="onInputKeyDown" @keypress="onInputKeyPress" @paste="onPaste" @click="onInputClick" @focus="onInputFocus" @blur="onInputBlur"/>
<span class="p-inputnumber-button-group" v-if="showButtons && buttonLayout === 'stacked'">
<INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="$attrs.disabled" />
<INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="$attrs.disabled" />
@ -17,7 +18,7 @@ import Button from '../button/Button';
export default {
inheritAttrs: false,
props: {
value: {
modelValue: {
type: Number,
default: null
},
@ -100,7 +101,9 @@ export default {
step: {
type: Number,
default: 1
}
},
class: null,
style: null
},
numberFormat: null,
_numeral: null,
@ -695,21 +698,18 @@ export default {
this.$refs.input.$el.setAttribute('aria-valuenow', value);
},
updateModel(event, value) {
this.$emit('input', value);
this.$emit('update:modelValue', value);
},
onInputFocus(event) {
onInputFocus() {
this.focused = true;
this.$emit('focus', event);
},
onInputBlur(event) {
onInputBlur() {
this.focused = false;
let newValue = this.validateValue(this.parseValue(this.$refs.input.$el.value));
this.$refs.input.$el.value = this.formatValue(newValue);
this.$refs.input.$el.setAttribute('aria-valuenow', newValue);
this.updateModel(event, newValue);
this.$emit('blur', event);
},
clearTimer() {
if (this.timer) {
@ -719,7 +719,7 @@ export default {
},
computed: {
containerClass() {
return ['p-inputnumber p-component', {
return ['p-inputnumber p-component', this.class, {
'p-inputwrapper-filled': this.filled,
'p-inputwrapper-focus': this.focused,
'p-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',
@ -734,19 +734,7 @@ export default {
return ['p-inputnumber-button p-inputnumber-button-down', this.decrementButtonClass];
},
filled() {
return (this.value != null && this.value.toString().length > 0)
},
listeners() {
return {
...this.$listeners,
input: val => this.onInput(val),
keydown: event => this.onInputKeyDown(event),
keypress: event => this.onInputKeyPress(event),
paste: event => this.onPaste(event),
click: event => this.onInputClick(event),
focus: event => this.onInputFocus(event),
blur: event => this.onInputBlur(event)
};
return (this.modelValue != null && this.modelValue.toString().length > 0)
},
upButtonListeners() {
return {
@ -767,7 +755,7 @@ export default {
}
},
formattedValue() {
return this.formatValue(this.value);
return this.formatValue(this.modelValue);
}
},
components: {

32
src/components/inputswitch/InputSwitch.vue
View File

@ -1,8 +1,8 @@
<template>
<div :class="containerClass" @click="onClick($event)">
<div :class="containerClass" @click="onClick($event)" :style="style">
<div class="p-hidden-accessible">
<input ref="input" type="checkbox" :id="inputId" :name="name" :checked="value" :disabled="disabled"
@focus="onFocus($event)" @blur="onBlur($event)" @keydown.enter.prevent="onClick($event)" role="switch" :aria-checked="value" :aria-labelledby="ariaLabelledBy">
<input ref="input" type="checkbox" :checked="modelValue" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.enter.prevent="onClick($event)"
role="switch" :aria-checked="modelValue">
</div>
<span class="p-inputswitch-slider"></span>
</div>
@ -10,12 +10,11 @@
<script>
export default {
inheritAttrs: false,
props: {
value: Boolean,
inputId: String,
name: String,
disabled: Boolean,
ariaLabelledBy: null
modelValue: Boolean,
class: null,
style: null
},
data() {
return {
@ -24,29 +23,28 @@ export default {
},
methods: {
onClick(event) {
if (!this.disabled) {
if (!this.$attrs.disabled) {
this.$emit('click', event);
this.$emit('input', !this.value);
this.$emit('update:modelValue', !this.modelValue);
this.$emit('change', event);
this.$refs.input.focus();
}
event.preventDefault();
},
onFocus(event) {
onFocus() {
this.focused = true;
this.$emit('focus', event);
},
onBlur(event) {
onBlur() {
this.focused = false;
this.$emit('blur', event);
}
},
computed: {
containerClass() {
return [
'p-inputswitch p-component',
'p-inputswitch p-component', this.class,
{
'p-inputswitch-checked': this.value,
'p-disabled': this.disabled,
'p-inputswitch-checked': this.modelValue,
'p-disabled': this.$attrs.disabled,
'p-focus': this.focused
}
];

16
src/components/listbox/Listbox.vue
View File

@ -27,7 +27,7 @@ import Ripple from '../ripple/Ripple';
export default {
props: {
value: null,
modelValue: null,
options: Array,
optionLabel: null,
optionValue: null,
@ -130,7 +130,7 @@ export default {
valueChanged = true;
}
else {
value = (metaKey) ? this.value || [] : [];
value = (metaKey) ? this.modelValue || [] : [];
value = [...value, this.getOptionValue(option)];
valueChanged = true;
}
@ -139,7 +139,7 @@ export default {
if (selected)
value = this.removeOption(option);
else
value = [...this.value || [], this.getOptionValue(option)];
value = [...this.modelValue || [], this.getOptionValue(option)];
valueChanged = true;
}
@ -153,8 +153,8 @@ export default {
let optionValue = this.getOptionValue(option);
if (this.multiple) {
if (this.value) {
for (let val of this.value) {
if (this.modelValue) {
for (let val of this.modelValue) {
if (ObjectUtils.equals(val, optionValue, this.equalityKey)) {
selected = true;
break;
@ -163,16 +163,16 @@ export default {
}
}
else {
selected = ObjectUtils.equals(this.value, optionValue, this.equalityKey);
selected = ObjectUtils.equals(this.modelValue, optionValue, this.equalityKey);
}
return selected;
},
removeOption(option) {
return this.value.filter(val => !ObjectUtils.equals(val, this.getOptionValue(option), this.equalityKey));
return this.modelValue.filter(val => !ObjectUtils.equals(val, this.getOptionValue(option), this.equalityKey));
},
updateModel(event, value) {
this.$emit('input', value);
this.$emit('update:modelValue', value);
this.$emit('change', {originalEvent: event, value: value});
},
onOptionKeyDown(event, option) {

62
src/components/multiselect/MultiSelect.vue
View File

@ -1,12 +1,12 @@
<template>
<div ref="container" :class="containerClass" @click="onClick">
<div :class="containerClass" @click="onClick">
<div class="p-hidden-accessible">
<input ref="focusInput" type="text" role="listbox" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
</div>
<div class="p-multiselect-label-container">
<div :class="labelClass">
<slot name="value" :value="value" :placeholder="placeholder">
<slot name="value" :value="modelValue" :placeholder="placeholder">
{{label}}
</slot>
</div>
@ -15,7 +15,7 @@
<span class="p-multiselect-trigger-icon pi pi-chevron-down"></span>
</div>
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div ref="overlay" class="p-multiselect-panel p-component" v-if="overlayVisible">
<div :ref="overlayRef" class="p-multiselect-panel p-component" v-if="overlayVisible">
<div class="p-multiselect-header">
<div class="p-checkbox p-component" @click="onToggleAll" role="checkbox" :aria-checked="allSelected">
<div class="p-hidden-accessible">
@ -33,7 +33,7 @@
<span class="p-multiselect-close-icon pi pi-times" />
</button>
</div>
<div ref="itemsWrapper" class="p-multiselect-items-wrapper" :style="{'max-height': scrollHeight}">
<div class="p-multiselect-items-wrapper" :style="{'max-height': scrollHeight}">
<ul class="p-multiselect-items p-component" role="listbox" aria-multiselectable="true">
<li v-for="(option, i) of visibleOptions" :class="['p-multiselect-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" role="option" :aria-selected="isSelected(option)"
:aria-label="getOptionLabel(option)" :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @keydown="onOptionKeyDown($event, option)" :tabindex="tabindex||'0'" v-ripple>
@ -61,7 +61,7 @@ import Ripple from '../ripple/Ripple';
export default {
props: {
value: null,
modelValue: null,
options: Array,
optionLabel: null,
optionValue: null,
@ -97,9 +97,11 @@ export default {
};
},
outsideClickListener: null,
overlay: null,
beforeUnmount() {
this.restoreAppend();
this.unbindOutsideClickListener();
this.overlay = null;
},
updated() {
if (this.overlayVisible && this.filterValue) {
@ -123,8 +125,8 @@ export default {
let selected = false;
let optionValue = this.getOptionValue(option);
if (this.value) {
for (let val of this.value) {
if (this.modelValue) {
for (let val of this.modelValue) {
if (ObjectUtils.equals(val, optionValue, this.equalityKey)) {
selected = true;
break;
@ -155,7 +157,7 @@ export default {
this.headerCheckboxFocused = false;
},
onClick() {
if (!this.disabled && (!this.$refs.overlay || !this.$refs.overlay.contains(event.target))) {
if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target))) {
if (this.overlayVisible)
this.hide();
else
@ -211,11 +213,11 @@ export default {
let value = null;
if (selected)
value = this.value.filter(val => !ObjectUtils.equals(val, this.getOptionValue(option), this.equalityKey));
value = this.modelValue.filter(val => !ObjectUtils.equals(val, this.getOptionValue(option), this.equalityKey));
else
value = [...this.value || [], this.getOptionValue(option)];
value = [...this.modelValue || [], this.getOptionValue(option)];
this.$emit('input', value);
this.$emit('update:modelValue', value);
this.$emit('change', {originalEvent: event, value: value});
},
onOptionKeyDown(event, option) {
@ -269,7 +271,7 @@ export default {
return null;
},
onOverlayEnter() {
this.$refs.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.appendContainer();
this.alignOverlay();
this.bindOutsideClickListener();
@ -278,14 +280,15 @@ export default {
onOverlayLeave() {
this.unbindOutsideClickListener();
this.$emit('hide');
this.overlay = null;
},
alignOverlay() {
if (this.appendTo) {
DomHandler.absolutePosition(this.$refs.overlay, this.$refs.container);
this.$refs.overlay.style.minWidth = DomHandler.getOuterWidth(this.$refs.container) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
}
else {
DomHandler.relativePosition(this.$refs.overlay, this.$refs.container);
DomHandler.relativePosition(this.overlay, this.$el);
}
},
bindOutsideClickListener() {
@ -305,7 +308,7 @@ export default {
}
},
isOutsideClicked(event) {
return !(this.$refs.container.isSameNode(event.target) || this.$refs.container.contains(event.target) || (this.$refs.overlay && this.$refs.overlay.contains(event.target)));
return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
},
getLabelByValue(val) {
let label = null;
@ -326,27 +329,30 @@ export default {
onToggleAll(event) {
const value = this.allSelected ? [] : this.visibleOptions && this.visibleOptions.map(option => this.getOptionValue(option));
this.$emit('input', value);
this.$emit('update:modelValue', value);
this.$emit('change', {originalEvent: event, value: value});
},
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.$refs.overlay);
document.body.appendChild(this.overlay);
else
document.getElementById(this.appendTo).appendChild(this.$refs.overlay);
document.getElementById(this.appendTo).appendChild(this.overlay);
}
},
restoreAppend() {
if (this.$refs.overlay && this.appendTo) {
if (this.overlay && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.$refs.overlay);
document.body.removeChild(this.overlay);
else
document.getElementById(this.appendTo).removeChild(this.$refs.overlay);
document.getElementById(this.appendTo).removeChild(this.overlay);
}
},
onFilterChange(event) {
this.$emit('filter', {originalEvent: event, value: event.target.value});
},
overlayRef(el) {
this.overlay = el;
}
},
computed: {
@ -362,7 +368,7 @@ export default {
{
'p-disabled': this.disabled,
'p-focus': this.focused,
'p-inputwrapper-filled': this.value && this.value.length,
'p-inputwrapper-filled': this.modelValue && this.modelValue.length,
'p-inputwrapper-focus': this.focused
}
];
@ -372,21 +378,21 @@ export default {
'p-multiselect-label',
{
'p-placeholder': this.label === this.placeholder,
'p-multiselect-label-empty': !this.$slots['value'] && !this.placeholder && (!this.value || this.value.length === 0)
'p-multiselect-label-empty': !this.$slots['value'] && !this.placeholder && (!this.modelValue || this.modelValue.length === 0)
}
];
},
label() {
let label;
if (this.value && this.value.length) {
if (this.modelValue && this.modelValue.length) {
label = '';
for(let i = 0; i < this.value.length; i++) {
for(let i = 0; i < this.modelValue.length; i++) {
if(i !== 0) {
label += ', ';
}
label += this.getLabelByValue(this.value[i]);
label += this.getLabelByValue(this.modelValue[i]);
}
}
else {
@ -411,7 +417,7 @@ export default {
return allSelected;
}
else {
return this.value && this.options && (this.value.length > 0 && this.value.length === this.options.length);
return this.modelValue && this.options && (this.modelValue.length > 0 && this.modelValue.length === this.options.length);
}
},
equalityKey() {

2
src/components/paginator/FirstPageLink.vue
View File

@ -1,5 +1,5 @@
<template>
<button :class="containerClass" v-on="$listeners" type="button" v-ripple>
<button :class="containerClass" type="button" v-ripple>
<span class="p-paginator-icon pi pi-angle-double-left"></span>
</button>
</template>

2
src/components/paginator/LastPageLink.vue
View File

@ -1,5 +1,5 @@
<template>
<button :class="containerClass" v-on="$listeners" type="button" v-ripple>
<button :class="containerClass" type="button" v-ripple>
<span class="p-paginator-icon pi pi-angle-double-right"></span>
</button>
</template>

2
src/components/paginator/NextPageLink.vue
View File

@ -1,5 +1,5 @@
<template>
<button :class="containerClass" v-on="$listeners" type="button" v-ripple>
<button :class="containerClass" type="button" v-ripple>
<span class="p-paginator-icon pi pi-angle-right"></span>
</button>
</template>

2
src/components/paginator/Paginator.vue
View File

@ -4,7 +4,7 @@
<slot name="left" :state="currentState"></slot>
</div>
<template v-for="item of templateItems" :key="item">
<FirstPageLink v-if="item === 'FirstPageLink'" @click="changePageToFirst($event)" :disabled="isFirstPage" />
<FirstPageLink v-if="item === 'FirstPageLink'" @click="changePageToFirst($event)" :disabled="isFirstPage" />
<PrevPageLink v-else-if="item === 'PrevPageLink'" @click="changePageToPrev($event)" :disabled="isFirstPage" />
<NextPageLink v-else-if="item === 'NextPageLink'" @click="changePageToNext($event)" :disabled="isLastPage" />
<LastPageLink v-else-if="item === 'LastPageLink'" @click="changePageToLast($event)" :disabled="isLastPage" />

2
src/components/paginator/PrevPageLink.vue
View File

@ -1,5 +1,5 @@
<template>
<button :class="containerClass" v-on="$listeners" type="button" v-ripple>
<button :class="containerClass" type="button" v-ripple>
<span class="p-paginator-icon pi pi-angle-left"></span>
</button>
</template>

142
src/components/password/Password.vue
View File

@ -1,5 +1,6 @@
<template>
<input ref="input" type="password" :class="['p-inputtext p-component', {'p-filled': filled}]" v-on="listeners" :value="value" />
<input type="password" :class="['p-inputtext p-component', {'p-filled': filled}]" :value="modelValue"
@input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" />
</template>
<script>
@ -7,7 +8,7 @@ import DomHandler from '../utils/DomHandler';
export default {
props: {
value: String,
modelValue: String,
promptLabel: {
type: String,
default: 'Enter a password'
@ -68,87 +69,76 @@ export default {
this.info.className = 'p-password-info';
this.info.textContent = this.promptLabel;
this.panel.style.minWidth = DomHandler.getOuterWidth(this.$refs.input) + 'px';
this.panel.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
this.panel.appendChild(this.meter);
this.panel.appendChild(this.info);
document.body.appendChild(this.panel);
},
onInput(event) {
this.$emit('update:modelValue', event.target.value)
},
onFocus() {
if (this.feedback) {
if (!this.panel) {
this.createPanel();
}
this.panel.style.zIndex = String(DomHandler.generateZIndex());
this.panel.style.display = 'block';
setTimeout(() => {
DomHandler.addClass(this.panel, 'p-connected-overlay-visible');
DomHandler.removeClass(this.panel, 'p-connected-overlay-hidden');
}, 1);
DomHandler.absolutePosition(this.panel, this.$el);
}
},
onBlur() {
if (this.panel) {
DomHandler.addClass(this.panel, 'p-connected-overlay-hidden');
DomHandler.removeClass(this.panel, 'p-connected-overlay-visible');
setTimeout(() => {
this.panel.style.display = 'none';
DomHandler.removeClass(this.panel, 'p-connected-overlay-hidden');
}, 150);
}
},
onKeyUp(event) {
if (this.panel) {
let value = event.target.value;
let label = null;
let meterPos = null;
switch (this.testStrength(value)) {
case 1:
label = this.weakLabel;
meterPos = '0px -10px';
break;
case 2:
label = this.mediumLabel;
meterPos = '0px -20px';
break;
case 3:
label = this.strongLabel;
meterPos = '0px -30px';
break;
default:
label = this.promptLabel;
meterPos = '0px 0px';
break;
}
this.meter.style.backgroundPosition = meterPos;
this.info.textContent = label;
}
}
},
computed: {
listeners() {
let vm = this;
return {
...this.$listeners,
input: event => this.$emit('input', event.target.value),
focus: event => {
if (this.feedback) {
if (!this.panel) {
this.createPanel();
}
vm.panel.style.zIndex = String(DomHandler.generateZIndex());
vm.panel.style.display = 'block';
setTimeout(() => {
DomHandler.addClass(this.panel, 'p-connected-overlay-visible');
DomHandler.removeClass(this.panel, 'p-connected-overlay-hidden');
}, 1);
DomHandler.absolutePosition(this.panel, this.$refs.input);
}
this.$emit('focus', event);
},
blur: event => {
if (this.panel) {
DomHandler.addClass(this.panel, 'p-connected-overlay-hidden');
DomHandler.removeClass(this.panel, 'p-connected-overlay-visible');
setTimeout(() => {
vm.panel.style.display = 'none';
DomHandler.removeClass(this.panel, 'p-connected-overlay-hidden');
}, 150);
}
this.$emit('blur', event);
},
keyup: event => {
if(this.panel) {
let value = event.target.value;
let label = null;
let meterPos = null;
switch (this.testStrength(value)) {
case 1:
label = this.weakLabel;
meterPos = '0px -10px';
break;
case 2:
label = this.mediumLabel;
meterPos = '0px -20px';
break;
case 3:
label = this.strongLabel;
meterPos = '0px -30px';
break;
default:
label = this.promptLabel;
meterPos = '0px 0px';
break;
}
vm.meter.style.backgroundPosition = meterPos;
vm.info.textContent = label;
}
this.$emit('keyup', event);
}
};
},
filled() {
return (this.value != null && this.value.toString().length > 0)
return (this.modelValue != null && this.modelValue.toString().length > 0)
}
}
}

6
src/components/rating/Rating.vue
View File

@ -2,14 +2,14 @@
<div :class="containerClass">
<span class="p-rating-icon p-rating-cancel pi pi-ban" :tabindex="focusIndex" v-if="cancel" @click="onCancelClick"></span>
<span :key="i" v-for="i in stars" @click="onStarClick($event,i)" :tabindex="focusIndex" @keydown.enter.prevent="onStarClick($event,i)"
:class="['p-rating-icon', {'pi pi-star-o': (i > value), 'pi pi-star': (i <= value)}]"></span>
:class="['p-rating-icon', {'pi pi-star-o': (i > modelValue), 'pi pi-star': (i <= modelValue)}]"></span>
</div>
</template>
<script>
export default {
props: {
value: {
modelValue: {
type: Number,
default: null
},
@ -42,7 +42,7 @@ export default {
}
},
updateModel(event, value) {
this.$emit('input', value);
this.$emit('update:modelValue', value);
this.$emit('change', {
originalEvent: event,
value: value

14
src/components/selectbutton/SelectButton.vue
View File

@ -17,7 +17,7 @@ import Ripple from '../ripple/Ripple';
export default {
props: {
value: null,
modelValue: null,
options: Array,
optionLabel: null,
optionValue: null,
@ -51,23 +51,23 @@ export default {
if(this.multiple) {
if (selected)
newValue = this.value.filter(val => !ObjectUtils.equals(val, optionValue, this.equalityKey));
newValue = this.modelValue.filter(val => !ObjectUtils.equals(val, optionValue, this.equalityKey));
else
newValue = this.value ? [...this.value, optionValue]: [optionValue];
newValue = this.modelValue ? [...this.modelValue, optionValue]: [optionValue];
}
else {
newValue = selected ? null : optionValue;
}
this.$emit('input', newValue);
this.$emit('update:modelValue', newValue);
},
isSelected(option) {
let selected = false;
let optionValue = this.getOptionValue(option);
if (this.multiple) {
if (this.value) {
for (let val of this.value) {
if (this.modelValue) {
for (let val of this.modelValue) {
if (ObjectUtils.equals(val, optionValue, this.equalityKey)) {
selected = true;
break;
@ -76,7 +76,7 @@ export default {
}
}
else {
selected = ObjectUtils.equals(this.value, optionValue, this.equalityKey);
selected = ObjectUtils.equals(this.modelValue, optionValue, this.equalityKey);
}
return selected;

66
src/components/slider/Slider.vue
View File

@ -1,12 +1,12 @@
<template>
<div :class="containerClass" @click="onBarClick" ref="container">
<div :class="containerClass" @click="onBarClick">
<span class="p-slider-range" :style="rangeStyle"></span>
<span v-if="!range" class="p-slider-handle" :style="handleStyle" @mousedown="onHandleMouseDown($event)" @keydown="onHandleKeyDown($event)" tabindex="0"
role="slider" :aria-valuemin="min" aria-valuenow="value" aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
role="slider" :aria-valuemin="min" aria-valuenow="modelValue" aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
<span v-if="range" class="p-slider-handle" :style="rangeStartHandleStyle" @mousedown="onHandleMouseDown($event, 0)" @keydown="onHandleKeyDown($event, 0)" tabindex="0"
role="slider" :aria-valuemin="min" aria-valuenow="value ? value[0] : null" aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
role="slider" :aria-valuemin="min" aria-valuenow="modelValue ? modelValue[0] : null" aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
<span v-if="range" class="p-slider-handle" :style="rangeEndHandleStyle" @mousedown="onHandleMouseDown($event, 1)" @keydown="onHandleKeyDown($event, 1)" tabindex="0"
role="slider" :aria-valuemin="min" aria-valuenow="value = value[1] : null" aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
role="slider" :aria-valuemin="min" aria-valuenow="modelValue = modelValue[1] : null" aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
</div>
</template>
@ -15,7 +15,7 @@ import DomHandler from '../utils/DomHandler';
export default {
props: {
value: [Number,Array],
modelValue: [Number,Array],
min: {
type: Number,
default: 0
@ -58,24 +58,24 @@ export default {
},
methods: {
updateDomData() {
let rect = this.$refs.container.getBoundingClientRect();
let rect = this.$el.getBoundingClientRect();
this.initX = rect.left + DomHandler.getWindowScrollLeft();
this.initY = rect.top + DomHandler.getWindowScrollTop();
this.barWidth = this.$refs.container.offsetWidth;
this.barHeight = this.$refs.container.offsetHeight;
this.barWidth = this.$el.offsetWidth;
this.barHeight = this.$el.offsetHeight;
},
setValueFromHandlePosition(event, handlePosition) {
let newValue = (this.max - this.min) * (handlePosition / 100) + this.min;
if (this.range) {
if (this.step)
this.handleStepChange(event, newValue, this.value[this.handleIndex]);
this.handleStepChange(event, newValue, this.modelValue[this.handleIndex]);
else
this.updateModel(event, newValue);
}
else {
if (this.step)
this.handleStepChange(event, newValue, this.value);
this.handleStepChange(event, newValue, this.modelValue);
else
this.updateModel(event, newValue);
}
@ -103,17 +103,17 @@ export default {
if (this.handleIndex == 0) {
if (newValue < this.min)
newValue = this.min;
else if (newValue >= this.value[1])
newValue = this.value[1];
else if (newValue >= this.modelValue[1])
newValue = this.modelValue[1];
}
else {
if (newValue > this.max)
newValue = this.max;
else if (newValue <= this.value[0])
newValue = this.value[0];
else if (newValue <= this.modelValue[0])
newValue = this.modelValue[0];
}
modelValue = [...this.value];
modelValue = [...this.modelValue];
modelValue[this.handleIndex] = Math.floor(newValue);
}
else {
@ -125,7 +125,7 @@ export default {
modelValue = Math.floor(newValue);
}
this.$emit('input', modelValue);
this.$emit('update:modelValue', modelValue);
this.$emit('change', modelValue);
},
onBarClick(event) {
@ -196,15 +196,15 @@ export default {
if (this.range) {
if (this.step)
newValue = this.value[index] - this.step;
newValue = this.modelValue[index] - this.step;
else
newValue = this.value[index] - 1;
newValue = this.modelValue[index] - 1;
}
else {
if (this.step)
newValue = this.value - this.step;
newValue = this.modelValue - this.step;
else
newValue = this.value - 1;
newValue = this.modelValue - 1;
}
this.updateModel(event, newValue);
@ -216,15 +216,15 @@ export default {
if (this.range) {
if (this.step)
newValue = this.value[index] + this.step;
newValue = this.modelValue[index] + this.step;
else
newValue = this.value[index] + 1;
newValue = this.modelValue[index] + 1;
}
else {
if (this.step)
newValue = this.value + this.step;
newValue = this.modelValue + this.step;
else
newValue = this.value + 1;
newValue = this.modelValue + 1;
}
this.updateModel(event, newValue);
@ -247,7 +247,7 @@ export default {
if (this.dragging) {
this.dragging = false;
DomHandler.removeClass(this.$el, 'p-slider-sliding');
this.$emit('slideend', {originalEvent: event, values: this.value});
this.$emit('slideend', {originalEvent: event, values: this.modelValue});
}
};
@ -302,24 +302,24 @@ export default {
},
handlePosition() {
if (this.value === 0)
if (this.modelValue === 0)
return 0;
else if (this.value < this.min)
else if (this.modelValue < this.min)
return 0;
else if (this.value > this.max)
else if (this.modelValue > this.max)
return 100;
else
return (this.value - this.min) * 100 / (this.max - this.min);
return (this.modelValue - this.min) * 100 / (this.max - this.min);
},
rangeStartPosition() {
if (this.value)
return (this.value[0] < this.min ? 0 : this.value[0] - this.min) * 100 / (this.max - this.min);
if (this.modelValue)
return (this.modelValue[0] < this.min ? 0 : this.modelValue[0] - this.min) * 100 / (this.max - this.min);
else
return 0;
},
rangeEndPosition() {
if (this.value)
return (this.value[1] > this.max ? 100 : this.value[1] - this.min) * 100 / (this.max - this.min);
if (this.modelValue)
return (this.modelValue[1] > this.max ? 100 : this.modelValue[1] - this.min) * 100 / (this.max - this.min);
else
return 0;
},

23
src/components/textarea/Textarea.vue
View File

@ -1,11 +1,11 @@
<template>
<textarea :class="['p-inputtextarea p-inputtext p-component', {'p-filled': filled, 'p-inputtextarea-resizable ': autoResize}]" v-on="listeners" :value="value"></textarea>
<textarea :class="['p-inputtextarea p-inputtext p-component', {'p-filled': filled, 'p-inputtextarea-resizable ': autoResize}]" v-bind="$attrs" :value="modelValue" @input="onInput"></textarea>
</template>
<script>
export default {
props: {
value: null,
modelValue: null,
autoResize: Boolean
},
cachedScrollHeight: null,
@ -40,21 +40,16 @@ export default {
this.cachedScrollHeight = this.$el.scrollHeight;
}
},
onInput(event) {
if (this.autoResize) {
this.resize();
}
this.$emit('update:modelValue', event.target.value);
}
},
computed: {
listeners() {
return {
...this.$listeners,
input: event => {
if (this.autoResize) {
this.resize();
}
this.$emit('input', event.target.value);
}
};
},
filled() {
return (this.value != null && this.value.toString().length > 0)
}

13
src/components/togglebutton/ToggleButton.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="buttonClass" @click="onClick($event)" role="checkbox" :aria-labelledby="ariaLabelledBy" :aria-checked="value" :tabindex="$attrs.disabled ? null : '0'" v-ripple>
<div :class="buttonClass" @click="onClick($event)" role="checkbox" :aria-labelledby="ariaLabelledBy" :aria-checked="modelValue" :tabindex="$attrs.disabled ? null : '0'" v-ripple>
<span v-if="hasIcon" :class="iconClass"></span>
<span class="p-button-label">{{label}}</span>
</div>
@ -10,7 +10,7 @@ import Ripple from '../ripple/Ripple';
export default {
props: {
value: Boolean,
modelValue: Boolean,
onIcon: String,
offIcon: String,
onLabel: String,
@ -24,8 +24,7 @@ export default {
methods: {
onClick(event) {
if (!this.$attrs.disabled) {
this.$emit('click', event);
this.$emit('input', !this.value);
this.$emit('update:modelValue', !this.modelValue);
this.$emit('change', event);
}
}
@ -36,12 +35,12 @@ export default {
'p-button p-togglebutton p-component': true,
'p-button-icon-only': this.hasIcon && !this.hasLabel,
'p-disabled': this.$attrs.disabled,
'p-highlight': this.value === true
'p-highlight': this.modelValue === true
}
},
iconClass() {
return [
this.value ? this.onIcon: this.offIcon,
this.modelValue ? this.onIcon: this.offIcon,
'p-button-icon',
{
'p-button-icon-left': this.iconPos === 'left' && this.label,
@ -56,7 +55,7 @@ export default {
return this.onIcon && this.onIcon.length > 0 && this.offIcon && this.offIcon.length > 0;
},
label() {
return this.hasLabel ? (this.value ? this.onLabel : this.offLabel): '&nbsp;';
return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel): '&nbsp;';
}
},
directives: {

26
src/components/tristatecheckbox/TriStateCheckbox.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="p-checkbox p-component" @click="onClick($event)">
<div :class="containerClass" @click="onClick($event)" :style="style">
<div class="p-hidden-accessible">
<input ref="input" type="checkbox" :checked="value === true" v-bind="$attrs" @focus="onFocus()" @blur="onBlur()" :aria-labelledby="ariaLabelledBy">
<input ref="input" type="checkbox" :checked="modelValue === true" v-bind="$attrs" @focus="onFocus()" @blur="onBlur()">
</div>
<div ref="box" :class="['p-checkbox-box', {'p-highlight': (value != null), 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="value === true">
<div ref="box" :class="['p-checkbox-box', {'p-highlight': (modelValue != null), 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="modelValue === true">
<span :class="['p-checkbox-icon', icon]"></span>
</div>
</div>
@ -13,8 +13,9 @@
export default {
inheritAttrs: false,
props: {
value: null,
ariaLabelledBy: String
modelValue: null,
class: null,
style: null
},
data() {
return {
@ -26,7 +27,7 @@ export default {
if (!this.$attrs.disabled) {
let newValue;
switch (this.value) {
switch (this.modelValue) {
case true:
newValue = false;
break;
@ -41,24 +42,22 @@ export default {
}
this.$emit('click', event);
this.$emit('input', newValue);
this.$emit('update:modelValue', newValue);
this.$emit('change', event);
this.$refs.input.focus();
}
},
onFocus(event) {
onFocus() {
this.focused = true;
this.$emit('focus', event);
},
onBlur(event) {
onBlur() {
this.focused = false;
this.$emit('blur', event);
}
},
computed: {
icon() {
let icon;
switch (this.value) {
switch (this.modelValue) {
case true:
icon = 'pi pi-check';
break;
@ -73,6 +72,9 @@ export default {
}
return icon;
},
containerClass() {
return ['p-checkbox p-component', this.class, {'p-checkbox-checked': this.modelValue === true, 'p-checkbox-disabled': this.$attrs.disabled, 'p-checkbox-focused': this.focused}];
}
}
}