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

Merge branch 'v4' of https://github.com/primefaces/primevue into v4

pull/5677/head
Cagatay Civici 2024-04-09 11:27:25 +03:00
parent 3404a75533 40ae9b5f6e
commit 5f7a0d00ad
18 changed files with 180 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/calendar.js
View File

@ -83,12 +83,6 @@ const CalendarProps = [
default: 'date',
description: 'Type of view to display, valid valids are "date" for datepicker and "month" for month picker.'
},
{
name: 'touchUI',
type: 'boolean',
default: 'false',
description: 'When enabled, calendar overlay is displayed as optimized for touch devices.'
},
{
name: 'monthNavigator',
type: 'boolean',

16
api-generator/components/rating.js
View File

@ -23,12 +23,6 @@ const RatingProps = [
default: '5',
description: 'Number of stars.'
},
{
name: 'cancel',
type: 'boolean',
default: 'true',
description: 'When specified a cancel icon is displayed to allow clearing the value.'
},
{
name: 'onIcon',
type: 'string',
@ -41,12 +35,6 @@ const RatingProps = [
default: 'null',
description: 'Icon for the off state.'
},
{
name: 'cancelIcon',
type: 'string',
default: 'null',
description: 'Icon for the cancelable state.'
},
{
name: 'pt',
type: 'any',
@ -62,10 +50,6 @@ const RatingProps = [
];
const RatingSlots = [
{
name: 'cancelicon',
description: 'Custom cancel icon template.'
},
{
name: 'onicon',
description: 'Custom on icon template.'

2
components/lib/autocomplete/AutoComplete.vue
View File

@ -56,7 +56,7 @@
v-bind="ptm('token')"
>
<slot name="chip" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)">
<Chip :class="cx('tokenLabel')" :label="getOptionLabel(option)" :removeIcon="removeTokenIcon" removable @remove="removeOption($event, i)" :pt="ptm('tokenLabel')">
<Chip :class="cx('tokenLabel')" :label="getOptionLabel(option)" :removeIcon="removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('tokenLabel')">
<template #removeicon>
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" />
</template>

16
components/lib/calendar/BaseCalendar.vue
View File

@ -68,10 +68,6 @@ export default {
type: String,
default: 'date'
},
touchUI: {
type: Boolean,
default: false
},
monthNavigator: {
type: Boolean,
default: false
@ -232,6 +228,18 @@ export default {
return { severity: 'secondary', text: true, size: 'small' };
}
},
navigatorButtonProps: {
type: Object,
default() {
return { severity: 'secondary', text: true };
}
},
timepickerButtonProps: {
type: Object,
default() {
return { severity: 'secondary', text: true };
}
},
ariaLabelledby: {
type: String,
default: null

29
components/lib/calendar/Calendar.d.ts vendored
View File

@ -161,8 +161,9 @@ export interface CalendarPassThroughOptions {
header?: CalendarPassThroughOptionType;
/**
* Used to pass attributes to the previous button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
previousButton?: CalendarPassThroughOptionType;
previousButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the title's DOM element.
*/
@ -180,9 +181,10 @@ export interface CalendarPassThroughOptions {
*/
decadeTitle?: CalendarPassThroughOptionType;
/**
* Used to pass attributes to the previous button's DOM element.
* Used to pass attributes to the next button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
nextButton?: CalendarPassThroughOptionType;
nextButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the container's DOM element.
*/
@ -579,11 +581,6 @@ export interface CalendarProps {
* @defaultValue date
*/
view?: 'date' | 'month' | 'year' | undefined;
/**
* When enabled, calendar overlay is displayed as optimized for touch devices.
* @defaultValue false
*/
touchUI?: boolean | undefined;
/**
* Whether the month should be rendered as a dropdown instead of text.
*
@ -766,15 +763,27 @@ export interface CalendarProps {
/**
* Used to pass all properties of the ButtonProps to the today button component.
* @type {ButtonProps}
* @defaultValue { severity: 'secondary', text: true }
* @defaultValue { severity: 'secondary', text: true, size: 'small' }
*/
todayButtonProps?: object | undefined;
/**
* Used to pass all properties of the ButtonProps to the clear button component.
* @type {ButtonProps}
* @defaultValue { severity: 'secondary', text: true }
* @defaultValue { severity: 'secondary', text: true, size: 'small' }
*/
clearButtonProps?: object | undefined;
/**
* Used to pass all properties of the ButtonProps to the navigator button component.
* @type {ButtonProps}
* @defaultValue { severity: 'secondary', text: true }
*/
navigatorButtonProps?: object | undefined;
/**
* Used to pass all properties of the ButtonProps to the timepicker button component.
* @type {ButtonProps}
* @defaultValue { severity: 'secondary', text: true }
*/
timepickerButtonProps?: object | undefined;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/

309
components/lib/calendar/Calendar.vue
View File

@ -48,9 +48,11 @@
</button>
</slot>
<template v-else-if="showIcon && iconDisplay === 'input'">
<slot name="inputicon" :class="cx('inputIcon')" :clickCallback="onButtonClick">
<component :is="icon ? 'i' : 'CalendarIcon'" :class="[icon, cx('inputIcon')]" @click="onButtonClick" v-bind="ptm('inputicon')" />
</slot>
<span :class="cx('inputIconContainer')">
<slot name="inputicon" :class="cx('inputIcon')" :clickCallback="onButtonClick">
<component :is="icon ? 'i' : 'CalendarIcon'" :class="[icon, cx('inputIcon')]" @click="onButtonClick" v-bind="ptm('inputicon')" />
</slot>
</span>
</template>
<Portal :appendTo="appendTo" :disabled="inline">
<transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave" v-bind="ptm('transition')">
@ -73,23 +75,25 @@
<div v-for="(month, groupIndex) of months" :key="month.month + month.year" :class="cx('calendar')" v-bind="ptm('calendar')">
<div :class="cx('header')" v-bind="ptm('header')">
<slot name="header"></slot>
<button
<Button
v-show="showOtherMonths ? groupIndex === 0 : false"
:ref="previousButtonRef"
v-ripple
:class="cx('previousButton')"
@click="onPrevButtonClick"
type="button"
@keydown="onContainerButtonKeydown"
:disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
v-bind="ptm('previousButton')"
:unstyled="unstyled"
@click="onPrevButtonClick"
@keydown="onContainerButtonKeydown"
v-bind="navigatorButtonProps"
:pt="ptm('previousButton')"
data-pc-group-section="navigator"
>
<slot name="previousicon" :class="cx('previousIcon')">
<component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[cx('previousIcon'), previousIcon]" v-bind="ptm('previousIcon')" />
</slot>
</button>
<template #icon="slotProps">
<slot name="previousicon">
<component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[previousIcon, slotProps.class]" v-bind="ptm('previousButton')['icon']" />
</slot>
</template>
</Button>
<div :class="cx('title')" v-bind="ptm('title')">
<template v-if="$primevue.config.locale.showMonthAfterYear">
<button
@ -151,23 +155,25 @@
<slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot>
</span>
</div>
<button
<Button
v-show="showOtherMonths ? (numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1) : false"
:ref="nextButtonRef"
v-ripple
:class="cx('nextButton')"
@click="onNextButtonClick"
type="button"
@keydown="onContainerButtonKeydown"
:disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
v-bind="ptm('nextButton')"
:unstyled="unstyled"
@click="onNextButtonClick"
@keydown="onContainerButtonKeydown"
v-bind="navigatorButtonProps"
:pt="ptm('nextButton')"
data-pc-group-section="navigator"
>
<slot name="nexticon" :class="cx('nextIcon')">
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('nextIcon'), nextIcon]" v-bind="ptm('nextIcon')" />
</slot>
</button>
<template #icon="slotProps">
<slot name="nexticon">
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[nextIcon, slotProps.class]" v-bind="ptm('nextButton')['icon']" />
</slot>
</template>
</Button>
</div>
<table v-if="currentView === 'date'" :class="cx('grid')" role="grid" v-bind="ptm('grid')">
<thead v-bind="ptm('tableHeader')">
@ -304,10 +310,10 @@
</template>
<div v-if="(showTime || timeOnly) && currentView === 'date'" :class="cx('timePicker')" v-bind="ptm('timePicker')">
<div :class="cx('hourPicker')" v-bind="ptm('hourPicker')" data-pc-group-section="timepickerContainer">
<button
v-ripple
<Button
:class="cx('incrementButton')"
:aria-label="$primevue.config.locale.nextHour"
:unstyled="unstyled"
@mousedown="onTimePickerElementMouseDown($event, 0, 1)"
@mouseup="onTimePickerElementMouseUp($event)"
@keydown="onContainerButtonKeydown"
@ -316,19 +322,21 @@
@keydown.space="onTimePickerElementMouseDown($event, 0, 1)"
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('incrementButton')"
v-bind="timepickerButtonProps"
:pt="ptm('incrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
<template #icon="slotProps">
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
<span v-bind="ptm('hour')" data-pc-group-section="timepickerlabel">{{ formattedCurrentHour }}</span>
<button
v-ripple
<Button
:class="cx('decrementButton')"
:aria-label="$primevue.config.locale.prevHour"
:unstyled="unstyled"
@mousedown="onTimePickerElementMouseDown($event, 0, -1)"
@mouseup="onTimePickerElementMouseUp($event)"
@keydown="onContainerButtonKeydown"
@ -337,151 +345,181 @@
@keydown.space="onTimePickerElementMouseDown($event, 0, -1)"
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('decrementButton')"
v-bind="timepickerButtonProps"
:pt="ptm('decrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
<template #icon="slotProps">
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
</div>
<div :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
<span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
</div>
<div :class="cx('minutePicker')" v-bind="ptm('minutePicker')" data-pc-group-section="timepickerContainer">
<button
v-ripple
<Button
:class="cx('incrementButton')"
:aria-label="$primevue.config.locale.nextMinute"
:disabled="disabled"
:unstyled="unstyled"
@mousedown="onTimePickerElementMouseDown($event, 1, 1)"
@mouseup="onTimePickerElementMouseUp($event)"
@keydown="onContainerButtonKeydown"
:disabled="disabled"
@mouseleave="onTimePickerElementMouseLeave()"
@keydown.enter="onTimePickerElementMouseDown($event, 1, 1)"
@keydown.space="onTimePickerElementMouseDown($event, 1, 1)"
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('incrementButton')"
v-bind="timepickerButtonProps"
:pt="ptm('incrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
<template #icon="slotProps">
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
<span v-bind="ptm('minute')" data-pc-group-section="timepickerlabel">{{ formattedCurrentMinute }}</span>
<button
v-ripple
<Button
:class="cx('decrementButton')"
:aria-label="$primevue.config.locale.prevMinute"
:disabled="disabled"
@mousedown="onTimePickerElementMouseDown($event, 1, -1)"
@mouseup="onTimePickerElementMouseUp($event)"
@keydown="onContainerButtonKeydown"
:disabled="disabled"
@mouseleave="onTimePickerElementMouseLeave()"
@keydown.enter="onTimePickerElementMouseDown($event, 1, -1)"
@keydown.space="onTimePickerElementMouseDown($event, 1, -1)"
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('decrementButton')"
v-bind="timepickerButtonProps"
:pt="ptm('decrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
<template #icon="slotProps">
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
</div>
<div v-if="showSeconds" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
<span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
</div>
<div v-if="showSeconds" :class="cx('secondPicker')" v-bind="ptm('secondPicker')" data-pc-group-section="timepickerContainer">
<button
v-ripple
<Button
:class="cx('incrementButton')"
:aria-label="$primevue.config.locale.nextSecond"
:disabled="disabled"
:unstyled="unstyled"
@mousedown="onTimePickerElementMouseDown($event, 2, 1)"
@mouseup="onTimePickerElementMouseUp($event)"
@keydown="onContainerButtonKeydown"
:disabled="disabled"
@mouseleave="onTimePickerElementMouseLeave()"
@keydown.enter="onTimePickerElementMouseDown($event, 2, 1)"
@keydown.space="onTimePickerElementMouseDown($event, 2, 1)"
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('incrementButton')"
v-bind="timepickerButtonProps"
:pt="ptm('incrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
<template #icon="slotProps">
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
<span v-bind="ptm('second')" data-pc-group-section="timepickerlabel">{{ formattedCurrentSecond }}</span>
<button
v-ripple
<Button
:class="cx('decrementButton')"
:aria-label="$primevue.config.locale.prevSecond"
:disabled="disabled"
:unstyled="unstyled"
@mousedown="onTimePickerElementMouseDown($event, 2, -1)"
@mouseup="onTimePickerElementMouseUp($event)"
@keydown="onContainerButtonKeydown"
:disabled="disabled"
@mouseleave="onTimePickerElementMouseLeave()"
@keydown.enter="onTimePickerElementMouseDown($event, 2, -1)"
@keydown.space="onTimePickerElementMouseDown($event, 2, -1)"
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('decrementButton')"
v-bind="timepickerButtonProps"
:pt="ptm('decrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
<template #icon="slotProps">
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
</div>
<div v-if="hourFormat == '12'" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
<span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
</div>
<div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')">
<button
v-ripple
<Button
:class="cx('incrementButton')"
:aria-label="$primevue.config.locale.am"
:disabled="disabled"
:unstyled="unstyled"
@click="toggleAMPM($event)"
@keydown="onContainerButtonKeydown"
type="button"
:disabled="disabled"
v-bind="ptm('incrementButton')"
v-bind="timepickerButtonProps"
:pt="ptm('incrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="incrementicon" :class="cx('incrementIcon')">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="cx('incrementIcon')" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
<template #icon="slotProps">
<slot name="incrementicon" :class="cx('incrementIcon')">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[cx('incrementIcon'), slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
<span v-bind="ptm('ampm')" data-pc-group-section="timepickerlabel">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
<button
v-ripple
<Button
:class="cx('decrementButton')"
:aria-label="$primevue.config.locale.pm"
:disabled="disabled"
@click="toggleAMPM($event)"
@keydown="onContainerButtonKeydown"
type="button"
:disabled="disabled"
v-bind="ptm('decrementButton')"
v-bind="timepickerButtonProps"
:pt="ptm('decrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="decrementicon" :class="cx('decrementIcon')">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="cx('decrementIcon')" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
<template #icon="slotProps">
<slot name="decrementicon" :class="cx('decrementIcon')">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('decrementIcon'), slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
</div>
</div>
<div v-if="showButtonBar" :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
<Button :label="todayLabel" @click="onTodayButtonClick($event)" :class="cx('todayButton')" @keydown="onContainerButtonKeydown" v-bind="todayButtonProps" :pt="ptm('todayButton')" data-pc-group-section="button" />
<Button :label="clearLabel" @click="onClearButtonClick($event)" :class="cx('clearButton')" @keydown="onContainerButtonKeydown" v-bind="clearButtonProps" :pt="ptm('clearButton')" data-pc-group-section="button" />
<Button
:label="todayLabel"
@click="onTodayButtonClick($event)"
:class="cx('todayButton')"
:unstyled="unstyled"
@keydown="onContainerButtonKeydown"
v-bind="todayButtonProps"
:pt="ptm('todayButton')"
data-pc-group-section="button"
/>
<Button
:label="clearLabel"
@click="onClearButtonClick($event)"
:class="cx('clearButton')"
:unstyled="unstyled"
@keydown="onContainerButtonKeydown"
v-bind="clearButtonProps"
:pt="ptm('clearButton')"
data-pc-group-section="button"
/>
</div>
<slot name="footer"></slot>
</div>
@ -491,6 +529,7 @@
</template>
<script>
import Button from 'primevue/button';
import CalendarIcon from 'primevue/icons/calendar';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronLeftIcon from 'primevue/icons/chevronleft';
@ -512,12 +551,10 @@ export default {
timePickerChange: false,
scrollHandler: null,
outsideClickListener: null,
maskClickListener: null,
resizeListener: null,
matchMediaListener: null,
overlay: null,
input: null,
mask: null,
previousButton: null,
nextButton: null,
timePickerTimer: null,
@ -550,7 +587,6 @@ export default {
this.updateCurrentMetaData();
if (!this.typeUpdate && !this.inline && this.input) {
// this.input.value = this.formatValue(newValue);
this.input.value = this.inputFieldValue;
}
@ -606,7 +642,6 @@ export default {
this.initFocusableCell();
}
} else {
// this.input.value = this.formatValue(this.modelValue);
this.input.value = this.inputFieldValue;
}
},
@ -628,10 +663,6 @@ export default {
clearTimeout(this.timePickerTimer);
}
if (this.mask) {
this.destroyMask();
}
this.destroyResponsiveStyleElement();
this.unbindOutsideClickListener();
@ -831,13 +862,12 @@ export default {
},
onOverlayEnter(el) {
el.setAttribute(this.attributeSelector, '');
const styles = this.touchUI ? { position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' } : !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
const styles = !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
DomHandler.addStyles(el, styles);
if (this.autoZIndex) {
if (this.touchUI) ZIndexUtils.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal);
else ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay);
ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay);
}
this.alignOverlay();
@ -860,10 +890,6 @@ export default {
this.unbindResizeListener();
this.$emit('hide');
if (this.mask) {
this.disableModality();
}
this.overlay = null;
},
onPrevButtonClick(event) {
@ -1049,9 +1075,7 @@ export default {
return (this.previousButton && (this.previousButton.isSameNode(event.target) || this.previousButton.contains(event.target))) || (this.nextButton && (this.nextButton.isSameNode(event.target) || this.nextButton.contains(event.target)));
},
alignOverlay() {
if (this.touchUI) {
this.enableModality();
} else if (this.overlay) {
if (this.overlay) {
if (this.appendTo === 'self' || this.inline) {
DomHandler.relativePosition(this.overlay, this.$el);
} else {
@ -1677,60 +1701,6 @@ export default {
setTimeout(this.updateFocus, 0);
},
enableModality() {
if (!this.mask) {
let styleClass = 'p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay p-component-overlay-enter';
this.mask = DomHandler.createElement('div', {
class: !this.isUnstyled && styleClass,
'p-bind': this.ptm('datepickermask')
});
this.mask.style.zIndex = String(parseInt(this.overlay.style.zIndex, 10) - 1);
this.maskClickListener = () => {
this.overlayVisible = false;
};
this.mask.addEventListener('click', this.maskClickListener);
document.body.appendChild(this.mask);
DomHandler.blockBodyScroll();
}
},
disableModality() {
if (this.mask) {
if (this.isUnstyled) {
this.destroyMask();
} else {
DomHandler.addClass(this.mask, 'p-component-overlay-leave');
this.mask.addEventListener('animationend', () => {
this.destroyMask();
});
}
}
},
destroyMask() {
this.mask.removeEventListener('click', this.maskClickListener);
this.maskClickListener = null;
document.body.removeChild(this.mask);
this.mask = null;
let bodyChildren = document.body.children;
let hasBlockerMasks;
for (let i = 0; i < bodyChildren.length; i++) {
let bodyChild = bodyChildren[i];
if (DomHandler.isAttributeEquals(bodyChild, 'data-pc-section', 'datepickermask')) {
hasBlockerMasks = true;
break;
}
}
if (!hasBlockerMasks) {
DomHandler.unblockBodyScroll();
}
},
updateCurrentMetaData() {
const viewDate = this.viewDate;
@ -2677,10 +2647,10 @@ export default {
this.input = el ? el.$el : undefined;
},
previousButtonRef(el) {
this.previousButton = el;
this.previousButton = el ? el.$el : undefined;
},
nextButtonRef(el) {
this.nextButton = el;
this.nextButton = el ? el.$el : undefined;
},
getMonthName(index) {
return this.$primevue.config.locale.monthNames[index];
@ -2997,6 +2967,7 @@ export default {
},
components: {
InputText,
Button,
Portal,
CalendarIcon,
ChevronLeftIcon,

1
components/lib/calendar/style/CalendarStyle.js
View File

@ -16,6 +16,7 @@ const classes = {
],
input: 'p-datepicker-input',
dropdownButton: 'p-datepicker-dropdown',
inputIconContainer: 'p-datepicker-input-icon-container',
inputIcon: 'p-datepicker-input-icon',
panel: ({ instance, props }) => [
'p-datepicker-panel p-component',

2
components/lib/chips/Chips.vue
View File

@ -29,7 +29,7 @@
:data-p-focused="focusedIndex === i"
>
<slot name="chip" :class="cx('label')" :index="i" :value="val" :removeCallback="(event) => removeOption(event, i)">
<Chip :class="cx('label')" :label="val" :removeIcon="removeTokenIcon" removable @remove="removeItem($event, i)" :pt="ptm('label')">
<Chip :class="cx('label')" :label="val" :removeIcon="removeTokenIcon" removable :unstyled="unstyled" @remove="removeItem($event, i)" :pt="ptm('label')">
<template #removeicon>
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :removeCallback="(event) => removeItem(event, i)" />
</template>

2
components/lib/multiselect/MultiSelect.vue
View File

@ -32,7 +32,7 @@
<template v-else-if="display === 'chip'">
<div v-for="item of chipSelectedItems" :key="getLabelByValue(item)" :class="cx('token')" v-bind="ptm('token')">
<slot name="chip" :value="item" :removeCallback="(event) => removeOption(event, item)">
<Chip :class="cx('tokenLabel')" :label="getLabelByValue(item)" :removeIcon="removeTokenIcon" removable @remove="removeOption($event, item)" :pt="ptm('tokenLabel')">
<Chip :class="cx('tokenLabel')" :label="getLabelByValue(item)" :removeIcon="removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, item)" :pt="ptm('tokenLabel')">
<template #removeicon>
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :item="item" :removeCallback="(event) => removeOption(event, item)" />
</template>

8
components/lib/rating/BaseRating.vue
View File

@ -22,10 +22,6 @@ export default {
type: Number,
default: 5
},
cancel: {
type: Boolean,
default: false
},
onIcon: {
type: String,
default: undefined
@ -33,10 +29,6 @@ export default {
offIcon: {
type: String,
default: undefined
},
cancelIcon: {
type: String,
default: undefined
}
},
style: RatingStyle,

37
components/lib/rating/Rating.d.ts vendored
View File

@ -57,14 +57,6 @@ export interface RatingPassThroughOptions {
* Used to pass attributes to the root's DOM element.
*/
root?: RatingPassThroughOptionType;
/**
* Used to pass attributes to the cancel item's DOM element.
*/
cancelItem?: RatingPassThroughOptionType;
/**
* Used to pass attributes to the cancel icon's DOM element.
*/
cancelIcon?: RatingPassThroughOptionType;
/**
* Used to pass attributes to the item's DOM element.
*/
@ -77,14 +69,6 @@ export interface RatingPassThroughOptions {
* Used to pass attributes to the off icon's DOM element.
*/
offIcon?: RatingPassThroughOptionType;
/**
* Used to pass attributes to the hidden cancel inputW wapper's DOM element.
*/
hiddenCancelInputWrapper?: RatingPassThroughOptionType;
/**
* Used to pass attributes to the hidden cancel input's DOM element.
*/
hiddenCancelInput?: RatingPassThroughOptionType;
/**
* Used to pass attributes to the hidden item input wrapper's DOM element.
*/
@ -179,12 +163,6 @@ export interface RatingProps {
* @defaultValue 5
*/
stars?: number | undefined;
/**
* When specified a cancel icon is displayed to allow clearing the value.
* @deprecated since v4.0.0-beta.1
* @defaultValue false
*/
cancel?: boolean | undefined;
/**
* Icon for the on state.
* @deprecated since v3.27.0. Use 'onicon' slot.
@ -195,11 +173,6 @@ export interface RatingProps {
* @deprecated since v3.27.0. Use 'officon' slot.
*/
offIcon?: string | undefined;
/**
* Icon for the cancelable state.
* @deprecated since v3.27.0. Use 'cancelicon' slot.
*/
cancelIcon?: string | undefined;
/**
* It generates scoped CSS variables using design tokens for the component.
*/
@ -225,16 +198,6 @@ export interface RatingProps {
* Defines valid slots in Rating component.
*/
export interface RatingSlots {
/**
* Custom cancel icon template.
* @param {Object} scope - cancelicon slot's params.
*/
cancelicon(scope: {
/**
* Style class of the icon.
*/
class: string;
}): VNode[];
/**
* Custom on icon template.
* @param {Object} scope - on icon slot's params.

6
components/lib/rating/Rating.spec.js
View File

@ -28,12 +28,6 @@ describe('Rating.vue', () => {
expect(wrapper.emitted()['blur'][0]).toEqual([true]);
});
it('should not cancel', async () => {
await wrapper.setProps({ cancel: false });
expect(wrapper.find('.p-rating-cancel').exists()).toBe(false);
});
it('When star is clicked, onOptionClick method should triggered', async () => {
await wrapper.find('.p-rating-item').trigger('click');

24
components/lib/rating/Rating.vue
View File

@ -1,25 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptmi('root')">
<div v-if="cancel" :class="cx('cancelItem')" @click="onOptionClick($event, 0)" v-bind="getPTOptions('cancelItem', 0)" :data-p-focused="focusedOptionIndex === 0">
<span class="p-hidden-accessible" v-bind="ptm('hiddenCancelInputWrapper')" :data-p-hidden-accessible="true">
<input
type="radio"
value="0"
:name="name"
:checked="modelValue === 0"
:disabled="disabled"
:readonly="readonly"
:aria-label="cancelAriaLabel()"
@focus="onFocus($event, 0)"
@blur="onBlur"
@change="onChange($event, 0)"
v-bind="ptm('hiddenCancelInput')"
/>
</span>
<slot name="cancelicon" :class="cx('cancelIcon')">
<component :is="cancelIcon ? 'span' : 'BanIcon'" :class="[cx('cancelIcon'), cancelIcon]" v-bind="ptm('cancelIcon')" />
</slot>
</div>
<template v-for="value in stars" :key="value">
<div :class="cx('item', { value })" @click="onOptionClick($event, value)" v-bind="getPTOptions('item', value)" :data-p-active="value <= modelValue" :data-p-focused="value === focusedOptionIndex">
<span class="p-hidden-accessible" v-bind="ptm('hiddenItemInputWrapper')" :data-p-hidden-accessible="true">
@ -94,6 +74,7 @@ export default {
}
},
onFocus(event, value) {
console.log(event);
this.focusedOptionIndex = value;
this.$emit('focus', event);
},
@ -118,9 +99,6 @@ export default {
this.$emit('update:modelValue', value);
this.$emit('change', { originalEvent: event, value });
},
cancelAriaLabel() {
return this.$primevue.config.locale.clear;
},
starAriaLabel(value) {
return value === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, value);
}

7
components/lib/rating/style/RatingStyle.js
View File

@ -8,13 +8,6 @@ const classes = {
'p-disabled': props.disabled
}
],
cancelItem: ({ instance }) => [
'p-rating-item p-rating-cancel-item',
{
'p-focus-visible': instance.focusedOptionIndex === 0 && instance.isFocusVisibleItem
}
],
cancelIcon: 'p-rating-icon p-rating-cancel',
item: ({ instance, props, value }) => [
'p-rating-option',
{

2
components/lib/treeselect/TreeSelect.vue
View File

@ -30,7 +30,7 @@
</template>
<template v-else-if="display === 'chip'">
<div v-for="node of selectedNodes" :key="node.key" :class="cx('token')" v-bind="ptm('token')">
<Chip :class="cx('tokenLabel')" :label="node.label" :pt="ptm('tokenLabel')" />
<Chip :class="cx('tokenLabel')" :label="node.label" :unstyled="unstyled" :pt="ptm('tokenLabel')" />
</div>
<template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
</template>

54
doc/calendar/TouchUIDoc.vue
View File

@ -1,54 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>touchUI</i> is enabled, overlay is displayed as optimized for touch devices.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Calendar v-model="date" touchUI />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
date: null,
code: {
basic: `
<Calendar v-model="date" touchUI />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" touchUI />
</div>
</template>
<script>
export default {
data() {
return {
date: null
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" touchUI />
</div>
</template>
<script setup>
import { ref } from "vue";
const date = ref();
<\/script>
`
}
};
}
};
</script>

6
doc/rating/NumberOfStarsDoc.vue
View File

@ -12,7 +12,7 @@
export default {
data() {
return {
value: null,
value: 5,
code: {
basic: `
<Rating v-model="value" :stars="10" />
@ -28,7 +28,7 @@ export default {
export default {
data() {
return {
value: null
value: 5
}
}
};
@ -44,7 +44,7 @@ export default {
<script setup>
import { ref } from 'vue';
const value = ref(null);
const value = ref(5);
<\/script>
`
}

6
pages/calendar/index.vue
View File

@ -30,7 +30,6 @@ import MultipleDoc from '@/doc/calendar/MultipleDoc.vue';
import MultipleMonthsDoc from '@/doc/calendar/MultipleMonthsDoc.vue';
import RangeDoc from '@/doc/calendar/RangeDoc.vue';
import TimeDoc from '@/doc/calendar/TimeDoc.vue';
import TouchUIDoc from '@/doc/calendar/TouchUIDoc.vue';
import YearPickerDoc from '@/doc/calendar/YearPickerDoc.vue';
import PTComponent from '@/doc/calendar/pt/index.vue';
import ThemingDoc from '@/doc/calendar/theming/index.vue';
@ -109,11 +108,6 @@ export default {
label: 'Date Template',
component: DateTemplateDoc
},
{
id: 'touchui',
label: 'Touch UI',
component: TouchUIDoc
},
{
id: 'inline',
label: 'Inline',