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": { "devDependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"vue": "^3.0.0-0", "vue": "3.0.0",
"vue-router": "^4.0.0-0", "vue-router": "^4.0.0-0",
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~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-category">Data</div>
<div class="menu-items"> <div class="menu-items">
<router-link to="/datatable" v-slot="{isActive}"> <router-link to="/datatable" v-slot="{isActive}" custom>
<div> <div>
<a tabindex="0" @click="toggleSubmenu($event, 'datatable')">DataTable</a> <a tabindex="0" @click="toggleSubmenu($event, 'datatable')">DataTable</a>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
@ -115,7 +115,7 @@
<router-link to="/organizationchart">OrganizationChart</router-link> <router-link to="/organizationchart">OrganizationChart</router-link>
<router-link to="/paginator">Paginator</router-link> <router-link to="/paginator">Paginator</router-link>
<router-link to="/picklist">PickList</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> <div>
<a tabindex="0" @click="toggleSubmenu($event, 'tree')">Tree</a> <a tabindex="0" @click="toggleSubmenu($event, 'tree')">Tree</a>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
@ -131,7 +131,7 @@
</transition> </transition>
</div> </div>
</router-link> </router-link>
<router-link to="/treetable" v-slot="{isActive}"> <router-link to="/treetable" v-slot="{isActive}" custom>
<div> <div>
<a tabindex="0" @click="toggleSubmenu($event, 'treetable')">TreeTable</a> <a tabindex="0" @click="toggleSubmenu($event, 'treetable')">TreeTable</a>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
@ -215,7 +215,7 @@
<div class="menu-category">Media</div> <div class="menu-category">Media</div>
<div class="menu-items"> <div class="menu-items">
<router-link to="/carousel">Carousel</router-link> <router-link to="/carousel">Carousel</router-link>
<router-link to="/galleria" v-slot="{isActive}"> <router-link to="/galleria" v-slot="{isActive}" custom>
<div> <div>
<a tabindex="0" @click="toggleSubmenu($event, 'galleria')">Galleria</a> <a tabindex="0" @click="toggleSubmenu($event, 'galleria')">Galleria</a>
<transition name="p-toggleable-content"> <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> <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"/> <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"> <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"> <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> <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"> <slot name="item" :item="item" :index="i">
@ -84,6 +84,7 @@ export default {
}, },
timeout: null, timeout: null,
outsideClickListener: null, outsideClickListener: null,
overlay: null,
data() { data() {
return { return {
searching: false, searching: false,
@ -108,28 +109,30 @@ export default {
beforeUnmount() { beforeUnmount() {
this.restoreAppend(); this.restoreAppend();
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.overlay = null;
}, },
methods: { methods: {
onOverlayEnter() { onOverlayEnter() {
this.$refs.overlay.style.zIndex = String(DomHandler.generateZIndex()); this.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.appendContainer(); this.appendContainer();
this.alignOverlay(); this.alignOverlay();
this.bindOutsideClickListener(); this.bindOutsideClickListener();
}, },
onOverlayLeave() { onOverlayLeave() {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.overlay = null;
}, },
alignOverlay() { alignOverlay() {
let target = this.multiple ? this.$refs.multiContainer : this.$refs.input; let target = this.multiple ? this.$refs.multiContainer : this.$refs.input;
if (this.appendTo) if (this.appendTo)
DomHandler.absolutePosition(this.$refs.overlay, target); DomHandler.absolutePosition(this.overlay, target);
else else
DomHandler.relativePosition(this.$refs.overlay, target); DomHandler.relativePosition(this.overlay, target);
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
if (!this.outsideClickListener) { if (!this.outsideClickListener) {
this.outsideClickListener = (event) => { this.outsideClickListener = (event) => {
if (this.overlayVisible && this.$refs.overlay && this.isOutsideClicked(event)) { if (this.overlayVisible && this.overlay && this.isOutsideClicked(event)) {
this.hideOverlay(); this.hideOverlay();
} }
}; };
@ -137,7 +140,7 @@ export default {
} }
}, },
isOutsideClicked(event) { 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) { isInputClicked(event) {
if (this.multiple) if (this.multiple)
@ -266,7 +269,7 @@ export default {
}, },
onKeyDown(event) { onKeyDown(event) {
if (this.overlayVisible) { 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) { switch(event.which) {
//down //down
@ -276,11 +279,11 @@ export default {
if (nextElement) { if (nextElement) {
DomHandler.addClass(nextElement, 'p-highlight'); DomHandler.addClass(nextElement, 'p-highlight');
DomHandler.removeClass(highlightItem, 'p-highlight'); DomHandler.removeClass(highlightItem, 'p-highlight');
DomHandler.scrollInView(this.$refs.overlay, nextElement); DomHandler.scrollInView(this.overlay, nextElement);
} }
} }
else { else {
DomHandler.addClass(this.$refs.overlay.firstChild.firstChild, 'p-highlight'); DomHandler.addClass(this.overlay.firstChild.firstChild, 'p-highlight');
} }
event.preventDefault(); event.preventDefault();
@ -293,7 +296,7 @@ export default {
if (previousElement) { if (previousElement) {
DomHandler.addClass(previousElement, 'p-highlight'); DomHandler.addClass(previousElement, 'p-highlight');
DomHandler.removeClass(highlightItem, '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() { appendContainer() {
if (this.appendTo) { if (this.appendTo) {
if (this.appendTo === 'body') if (this.appendTo === 'body')
document.body.appendChild(this.$refs.overlay); document.body.appendChild(this.overlay);
else else
document.getElementById(this.appendTo).appendChild(this.$refs.overlay); document.getElementById(this.appendTo).appendChild(this.overlay);
} }
}, },
restoreAppend() { restoreAppend() {
if (this.$refs.overlay && this.appendTo) { if (this.overlay && this.appendTo) {
if (this.appendTo === 'body') if (this.appendTo === 'body')
document.body.removeChild(this.$refs.overlay); document.body.removeChild(this.overlay);
else else
document.getElementById(this.appendTo).removeChild(this.$refs.overlay); document.getElementById(this.appendTo).removeChild(this.overlay);
} }
},
overlayRef(el) {
this.overlay = el;
} }
}, },
computed: { computed: {

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

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

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

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

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

@ -1,7 +1,7 @@
<template> <template>
<div ref="mask" :class="maskClass" v-if="maskVisible" @click="onMaskClick"> <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"> <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"> <div class="p-dialog-header" v-if="showHeader">
<slot name="header"> <slot name="header">
<span :id="ariaLabelledById" class="p-dialog-title" v-if="header" >{{header}}</span> <span :id="ariaLabelledById" class="p-dialog-title" v-if="header" >{{header}}</span>
@ -229,11 +229,6 @@ export default {
} }
}, },
computed: { computed: {
listeners() {
return {
...this.$listeners
};
},
maskClass() { maskClass() {
return ['p-dialog-mask', this.getPositionClass()]; return ['p-dialog-mask', this.getPositionClass()];
}, },

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

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

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

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

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

@ -1,5 +1,6 @@
<template> <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> </template>
<script> <script>
@ -7,7 +8,7 @@ import DomHandler from '../utils/DomHandler';
export default { export default {
props: { props: {
value: null, modelValue: null,
slotChar: { slotChar: {
type: String, type: String,
default: '_' default: '_'
@ -23,10 +24,160 @@ export default {
unmask: { unmask: {
type: Boolean, type: Boolean,
default: false default: false
}, }
ariaLabelledBy: null
}, },
methods: { 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) { caret(first, last) {
let range, begin, end; let range, begin, end;
@ -237,16 +388,16 @@ export default {
}, },
updateModel(e) { updateModel(e) {
let val = this.unmask ? this.getUnmaskedValue() : e.target.value; 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() { updateValue() {
if (this.$el) { if (this.$el) {
if (this.value == null) { if (this.modelValue == null) {
this.$el.value = ''; this.$el.value = '';
this.$emit('input', ''); this.$emit('update:modelValue', '');
} }
else { else {
this.$el.value = this.value; this.$el.value = this.modelValue;
this.checkVal(); this.checkVal();
setTimeout(() => { setTimeout(() => {
@ -255,7 +406,7 @@ export default {
this.checkVal(); this.checkVal();
let val = this.unmask ? this.getUnmaskedValue() : this.$el.value; 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); }, 10);
} }
@ -320,171 +471,12 @@ export default {
} }
}, },
computed: { 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() { filled() {
return (this.value != null && this.value.toString().length > 0) return (this.modelValue != null && this.modelValue.toString().length > 0)
}, },
inputClass() { inputClass() {
return ['p-inputmask p-inputtext p-component', { return ['p-inputmask p-inputtext p-component', {
'p-filled': this.filled, 'p-filled': this.filled
'p-disabled': this.$attrs.disabled
}]; }];
}, },
} }

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

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

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

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

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

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

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

@ -1,12 +1,12 @@
<template> <template>
<div ref="container" :class="containerClass" @click="onClick"> <div :class="containerClass" @click="onClick">
<div class="p-hidden-accessible"> <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" <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"/> aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
</div> </div>
<div class="p-multiselect-label-container"> <div class="p-multiselect-label-container">
<div :class="labelClass"> <div :class="labelClass">
<slot name="value" :value="value" :placeholder="placeholder"> <slot name="value" :value="modelValue" :placeholder="placeholder">
{{label}} {{label}}
</slot> </slot>
</div> </div>
@ -15,7 +15,7 @@
<span class="p-multiselect-trigger-icon pi pi-chevron-down"></span> <span class="p-multiselect-trigger-icon pi pi-chevron-down"></span>
</div> </div>
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave"> <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-multiselect-header">
<div class="p-checkbox p-component" @click="onToggleAll" role="checkbox" :aria-checked="allSelected"> <div class="p-checkbox p-component" @click="onToggleAll" role="checkbox" :aria-checked="allSelected">
<div class="p-hidden-accessible"> <div class="p-hidden-accessible">
@ -33,7 +33,7 @@
<span class="p-multiselect-close-icon pi pi-times" /> <span class="p-multiselect-close-icon pi pi-times" />
</button> </button>
</div> </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"> <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)" <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> :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 { export default {
props: { props: {
value: null, modelValue: null,
options: Array, options: Array,
optionLabel: null, optionLabel: null,
optionValue: null, optionValue: null,
@ -97,9 +97,11 @@ export default {
}; };
}, },
outsideClickListener: null, outsideClickListener: null,
overlay: null,
beforeUnmount() { beforeUnmount() {
this.restoreAppend(); this.restoreAppend();
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.overlay = null;
}, },
updated() { updated() {
if (this.overlayVisible && this.filterValue) { if (this.overlayVisible && this.filterValue) {
@ -123,8 +125,8 @@ export default {
let selected = false; let selected = false;
let optionValue = this.getOptionValue(option); let optionValue = this.getOptionValue(option);
if (this.value) { if (this.modelValue) {
for (let val of this.value) { for (let val of this.modelValue) {
if (ObjectUtils.equals(val, optionValue, this.equalityKey)) { if (ObjectUtils.equals(val, optionValue, this.equalityKey)) {
selected = true; selected = true;
break; break;
@ -155,7 +157,7 @@ export default {
this.headerCheckboxFocused = false; this.headerCheckboxFocused = false;
}, },
onClick() { 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) if (this.overlayVisible)
this.hide(); this.hide();
else else
@ -211,11 +213,11 @@ export default {
let value = null; let value = null;
if (selected) 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 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}); this.$emit('change', {originalEvent: event, value: value});
}, },
onOptionKeyDown(event, option) { onOptionKeyDown(event, option) {
@ -269,7 +271,7 @@ export default {
return null; return null;
}, },
onOverlayEnter() { onOverlayEnter() {
this.$refs.overlay.style.zIndex = String(DomHandler.generateZIndex()); this.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.appendContainer(); this.appendContainer();
this.alignOverlay(); this.alignOverlay();
this.bindOutsideClickListener(); this.bindOutsideClickListener();
@ -278,14 +280,15 @@ export default {
onOverlayLeave() { onOverlayLeave() {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.$emit('hide'); this.$emit('hide');
this.overlay = null;
}, },
alignOverlay() { alignOverlay() {
if (this.appendTo) { if (this.appendTo) {
DomHandler.absolutePosition(this.$refs.overlay, this.$refs.container); DomHandler.absolutePosition(this.overlay, this.$el);
this.$refs.overlay.style.minWidth = DomHandler.getOuterWidth(this.$refs.container) + 'px'; this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
} }
else { else {
DomHandler.relativePosition(this.$refs.overlay, this.$refs.container); DomHandler.relativePosition(this.overlay, this.$el);
} }
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
@ -305,7 +308,7 @@ export default {
} }
}, },
isOutsideClicked(event) { 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) { getLabelByValue(val) {
let label = null; let label = null;
@ -326,27 +329,30 @@ export default {
onToggleAll(event) { onToggleAll(event) {
const value = this.allSelected ? [] : this.visibleOptions && this.visibleOptions.map(option => this.getOptionValue(option)); 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}); this.$emit('change', {originalEvent: event, value: value});
}, },
appendContainer() { appendContainer() {
if (this.appendTo) { if (this.appendTo) {
if (this.appendTo === 'body') if (this.appendTo === 'body')
document.body.appendChild(this.$refs.overlay); document.body.appendChild(this.overlay);
else else
document.getElementById(this.appendTo).appendChild(this.$refs.overlay); document.getElementById(this.appendTo).appendChild(this.overlay);
} }
}, },
restoreAppend() { restoreAppend() {
if (this.$refs.overlay && this.appendTo) { if (this.overlay && this.appendTo) {
if (this.appendTo === 'body') if (this.appendTo === 'body')
document.body.removeChild(this.$refs.overlay); document.body.removeChild(this.overlay);
else else
document.getElementById(this.appendTo).removeChild(this.$refs.overlay); document.getElementById(this.appendTo).removeChild(this.overlay);
} }
}, },
onFilterChange(event) { onFilterChange(event) {
this.$emit('filter', {originalEvent: event, value: event.target.value}); this.$emit('filter', {originalEvent: event, value: event.target.value});
},
overlayRef(el) {
this.overlay = el;
} }
}, },
computed: { computed: {
@ -362,7 +368,7 @@ export default {
{ {
'p-disabled': this.disabled, 'p-disabled': this.disabled,
'p-focus': this.focused, '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 'p-inputwrapper-focus': this.focused
} }
]; ];
@ -372,21 +378,21 @@ export default {
'p-multiselect-label', 'p-multiselect-label',
{ {
'p-placeholder': this.label === this.placeholder, '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() { label() {
let label; let label;
if (this.value && this.value.length) { if (this.modelValue && this.modelValue.length) {
label = ''; label = '';
for(let i = 0; i < this.value.length; i++) { for(let i = 0; i < this.modelValue.length; i++) {
if(i !== 0) { if(i !== 0) {
label += ', '; label += ', ';
} }
label += this.getLabelByValue(this.value[i]); label += this.getLabelByValue(this.modelValue[i]);
} }
} }
else { else {
@ -411,7 +417,7 @@ export default {
return allSelected; return allSelected;
} }
else { 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() { equalityKey() {

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

@ -1,5 +1,5 @@
<template> <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> <span class="p-paginator-icon pi pi-angle-double-left"></span>
</button> </button>
</template> </template>

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

@ -1,5 +1,5 @@
<template> <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> <span class="p-paginator-icon pi pi-angle-double-right"></span>
</button> </button>
</template> </template>

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

@ -1,5 +1,5 @@
<template> <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> <span class="p-paginator-icon pi pi-angle-right"></span>
</button> </button>
</template> </template>

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

@ -4,7 +4,7 @@
<slot name="left" :state="currentState"></slot> <slot name="left" :state="currentState"></slot>
</div> </div>
<template v-for="item of templateItems" :key="item"> <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" /> <PrevPageLink v-else-if="item === 'PrevPageLink'" @click="changePageToPrev($event)" :disabled="isFirstPage" />
<NextPageLink v-else-if="item === 'NextPageLink'" @click="changePageToNext($event)" :disabled="isLastPage" /> <NextPageLink v-else-if="item === 'NextPageLink'" @click="changePageToNext($event)" :disabled="isLastPage" />
<LastPageLink v-else-if="item === 'LastPageLink'" @click="changePageToLast($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> <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> <span class="p-paginator-icon pi pi-angle-left"></span>
</button> </button>
</template> </template>

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

@ -1,5 +1,6 @@
<template> <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> </template>
<script> <script>
@ -7,7 +8,7 @@ import DomHandler from '../utils/DomHandler';
export default { export default {
props: { props: {
value: String, modelValue: String,
promptLabel: { promptLabel: {
type: String, type: String,
default: 'Enter a password' default: 'Enter a password'
@ -68,87 +69,76 @@ export default {
this.info.className = 'p-password-info'; this.info.className = 'p-password-info';
this.info.textContent = this.promptLabel; 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.meter);
this.panel.appendChild(this.info); this.panel.appendChild(this.info);
document.body.appendChild(this.panel); 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: { 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() { 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"> <div :class="containerClass">
<span class="p-rating-icon p-rating-cancel pi pi-ban" :tabindex="focusIndex" v-if="cancel" @click="onCancelClick"></span> <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)" <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> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
value: { modelValue: {
type: Number, type: Number,
default: null default: null
}, },
@ -42,7 +42,7 @@ export default {
} }
}, },
updateModel(event, value) { updateModel(event, value) {
this.$emit('input', value); this.$emit('update:modelValue', value);
this.$emit('change', { this.$emit('change', {
originalEvent: event, originalEvent: event,
value: value value: value

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

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

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

@ -1,12 +1,12 @@
<template> <template>
<div :class="containerClass" @click="onBarClick" ref="container"> <div :class="containerClass" @click="onBarClick">
<span class="p-slider-range" :style="rangeStyle"></span> <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" <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" <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" <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> </div>
</template> </template>
@ -15,7 +15,7 @@ import DomHandler from '../utils/DomHandler';
export default { export default {
props: { props: {
value: [Number,Array], modelValue: [Number,Array],
min: { min: {
type: Number, type: Number,
default: 0 default: 0
@ -58,24 +58,24 @@ export default {
}, },
methods: { methods: {
updateDomData() { updateDomData() {
let rect = this.$refs.container.getBoundingClientRect(); let rect = this.$el.getBoundingClientRect();
this.initX = rect.left + DomHandler.getWindowScrollLeft(); this.initX = rect.left + DomHandler.getWindowScrollLeft();
this.initY = rect.top + DomHandler.getWindowScrollTop(); this.initY = rect.top + DomHandler.getWindowScrollTop();
this.barWidth = this.$refs.container.offsetWidth; this.barWidth = this.$el.offsetWidth;
this.barHeight = this.$refs.container.offsetHeight; this.barHeight = this.$el.offsetHeight;
}, },
setValueFromHandlePosition(event, handlePosition) { setValueFromHandlePosition(event, handlePosition) {
let newValue = (this.max - this.min) * (handlePosition / 100) + this.min; let newValue = (this.max - this.min) * (handlePosition / 100) + this.min;
if (this.range) { if (this.range) {
if (this.step) if (this.step)
this.handleStepChange(event, newValue, this.value[this.handleIndex]); this.handleStepChange(event, newValue, this.modelValue[this.handleIndex]);
else else
this.updateModel(event, newValue); this.updateModel(event, newValue);
} }
else { else {
if (this.step) if (this.step)
this.handleStepChange(event, newValue, this.value); this.handleStepChange(event, newValue, this.modelValue);
else else
this.updateModel(event, newValue); this.updateModel(event, newValue);
} }
@ -103,17 +103,17 @@ export default {
if (this.handleIndex == 0) { if (this.handleIndex == 0) {
if (newValue < this.min) if (newValue < this.min)
newValue = this.min; newValue = this.min;
else if (newValue >= this.value[1]) else if (newValue >= this.modelValue[1])
newValue = this.value[1]; newValue = this.modelValue[1];
} }
else { else {
if (newValue > this.max) if (newValue > this.max)
newValue = this.max; newValue = this.max;
else if (newValue <= this.value[0]) else if (newValue <= this.modelValue[0])
newValue = this.value[0]; newValue = this.modelValue[0];
} }
modelValue = [...this.value]; modelValue = [...this.modelValue];
modelValue[this.handleIndex] = Math.floor(newValue); modelValue[this.handleIndex] = Math.floor(newValue);
} }
else { else {
@ -125,7 +125,7 @@ export default {
modelValue = Math.floor(newValue); modelValue = Math.floor(newValue);
} }
this.$emit('input', modelValue); this.$emit('update:modelValue', modelValue);
this.$emit('change', modelValue); this.$emit('change', modelValue);
}, },
onBarClick(event) { onBarClick(event) {
@ -196,15 +196,15 @@ export default {
if (this.range) { if (this.range) {
if (this.step) if (this.step)
newValue = this.value[index] - this.step; newValue = this.modelValue[index] - this.step;
else else
newValue = this.value[index] - 1; newValue = this.modelValue[index] - 1;
} }
else { else {
if (this.step) if (this.step)
newValue = this.value - this.step; newValue = this.modelValue - this.step;
else else
newValue = this.value - 1; newValue = this.modelValue - 1;
} }
this.updateModel(event, newValue); this.updateModel(event, newValue);
@ -216,15 +216,15 @@ export default {
if (this.range) { if (this.range) {
if (this.step) if (this.step)
newValue = this.value[index] + this.step; newValue = this.modelValue[index] + this.step;
else else
newValue = this.value[index] + 1; newValue = this.modelValue[index] + 1;
} }
else { else {
if (this.step) if (this.step)
newValue = this.value + this.step; newValue = this.modelValue + this.step;
else else
newValue = this.value + 1; newValue = this.modelValue + 1;
} }
this.updateModel(event, newValue); this.updateModel(event, newValue);
@ -247,7 +247,7 @@ export default {
if (this.dragging) { if (this.dragging) {
this.dragging = false; this.dragging = false;
DomHandler.removeClass(this.$el, 'p-slider-sliding'); 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() { handlePosition() {
if (this.value === 0) if (this.modelValue === 0)
return 0; return 0;
else if (this.value < this.min) else if (this.modelValue < this.min)
return 0; return 0;
else if (this.value > this.max) else if (this.modelValue > this.max)
return 100; return 100;
else else
return (this.value - this.min) * 100 / (this.max - this.min); return (this.modelValue - this.min) * 100 / (this.max - this.min);
}, },
rangeStartPosition() { rangeStartPosition() {
if (this.value) if (this.modelValue)
return (this.value[0] < this.min ? 0 : this.value[0] - this.min) * 100 / (this.max - this.min); return (this.modelValue[0] < this.min ? 0 : this.modelValue[0] - this.min) * 100 / (this.max - this.min);
else else
return 0; return 0;
}, },
rangeEndPosition() { rangeEndPosition() {
if (this.value) if (this.modelValue)
return (this.value[1] > this.max ? 100 : this.value[1] - this.min) * 100 / (this.max - this.min); return (this.modelValue[1] > this.max ? 100 : this.modelValue[1] - this.min) * 100 / (this.max - this.min);
else else
return 0; return 0;
}, },

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

@ -1,11 +1,11 @@
<template> <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> </template>
<script> <script>
export default { export default {
props: { props: {
value: null, modelValue: null,
autoResize: Boolean autoResize: Boolean
}, },
cachedScrollHeight: null, cachedScrollHeight: null,
@ -40,21 +40,16 @@ export default {
this.cachedScrollHeight = this.$el.scrollHeight; this.cachedScrollHeight = this.$el.scrollHeight;
} }
},
onInput(event) {
if (this.autoResize) {
this.resize();
}
this.$emit('update:modelValue', event.target.value);
} }
}, },
computed: { computed: {
listeners() {
return {
...this.$listeners,
input: event => {
if (this.autoResize) {
this.resize();
}
this.$emit('input', event.target.value);
}
};
},
filled() { filled() {
return (this.value != null && this.value.toString().length > 0) return (this.value != null && this.value.toString().length > 0)
} }

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

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

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

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