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

api-generator/components/calendar.js

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

api-generator/components/rating.js

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

components/lib/autocomplete/AutoComplete.vue

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

components/lib/calendar/BaseCalendar.vue

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

components/lib/calendar/Calendar.d.ts

@@ -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.
      */

components/lib/calendar/Calendar.vue

@@ -48,9 +48,11 @@
             </button>
         </slot>
         <template v-else-if="showIcon && iconDisplay === 'input'">
+            <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')">
+                                        <template #icon="slotProps">
-                                            <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[cx('previousIcon'), previousIcon]" v-bind="ptm('previousIcon')" />
+                                            <slot name="previousicon">
+                                                <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[previousIcon, slotProps.class]" v-bind="ptm('previousButton')['icon']" />
                                             </slot>
-                                    </button>
+                                        </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')">
+                                        <template #icon="slotProps">
-                                            <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('nextIcon'), nextIcon]" v-bind="ptm('nextIcon')" />
+                                            <slot name="nexticon">
+                                                <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[nextIcon, slotProps.class]" v-bind="ptm('nextButton')['icon']" />
                                             </slot>
-                                    </button>
+                                        </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
+                            <Button
-                                v-ripple
                                 :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="timepickerButtonProps"
-                                v-bind="ptm('incrementButton')"
+                                :pt="ptm('incrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
+                                <template #icon="slotProps">
                                     <slot name="incrementicon">
-                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
+                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
-                            </button>
+                                </template>
+                            </Button>
                             <span v-bind="ptm('hour')" data-pc-group-section="timepickerlabel">{{ formattedCurrentHour }}</span>
-                            <button
+                            <Button
-                                v-ripple
                                 :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="timepickerButtonProps"
-                                v-bind="ptm('decrementButton')"
+                                :pt="ptm('decrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
+                                <template #icon="slotProps">
                                     <slot name="decrementicon">
-                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
+                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
-                            </button>
+                                </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
+                            <Button
-                                v-ripple
                                 :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="timepickerButtonProps"
-                                v-bind="ptm('incrementButton')"
+                                :pt="ptm('incrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
+                                <template #icon="slotProps">
                                     <slot name="incrementicon">
-                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
+                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
-                            </button>
+                                </template>
+                            </Button>
                             <span v-bind="ptm('minute')" data-pc-group-section="timepickerlabel">{{ formattedCurrentMinute }}</span>
-                            <button
+                            <Button
-                                v-ripple
                                 :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="timepickerButtonProps"
-                                v-bind="ptm('decrementButton')"
+                                :pt="ptm('decrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
+                                <template #icon="slotProps">
                                     <slot name="decrementicon">
-                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
+                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
-                            </button>
+                                </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
+                            <Button
-                                v-ripple
                                 :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="timepickerButtonProps"
-                                v-bind="ptm('incrementButton')"
+                                :pt="ptm('incrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
+                                <template #icon="slotProps">
                                     <slot name="incrementicon">
-                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
+                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
-                            </button>
+                                </template>
+                            </Button>
                             <span v-bind="ptm('second')" data-pc-group-section="timepickerlabel">{{ formattedCurrentSecond }}</span>
-                            <button
+                            <Button
-                                v-ripple
                                 :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="timepickerButtonProps"
-                                v-bind="ptm('decrementButton')"
+                                :pt="ptm('decrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
+                                <template #icon="slotProps">
                                     <slot name="decrementicon">
-                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
+                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
-                            </button>
+                                </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
+                            <Button
-                                v-ripple
                                 :class="cx('incrementButton')"
                                 :aria-label="$primevue.config.locale.am"
+                                :disabled="disabled"
+                                :unstyled="unstyled"
                                 @click="toggleAMPM($event)"
                                 @keydown="onContainerButtonKeydown"
-                                type="button"
+                                v-bind="timepickerButtonProps"
-                                :disabled="disabled"
+                                :pt="ptm('incrementButton')"
-                                v-bind="ptm('incrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
+                                <template #icon="slotProps">
                                     <slot name="incrementicon" :class="cx('incrementIcon')">
-                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="cx('incrementIcon')" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
+                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[cx('incrementIcon'), slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
-                            </button>
+                                </template>
+                            </Button>
                             <span v-bind="ptm('ampm')" data-pc-group-section="timepickerlabel">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
-                            <button
+                            <Button
-                                v-ripple
                                 :class="cx('decrementButton')"
                                 :aria-label="$primevue.config.locale.pm"
+                                :disabled="disabled"
                                 @click="toggleAMPM($event)"
                                 @keydown="onContainerButtonKeydown"
-                                type="button"
+                                v-bind="timepickerButtonProps"
-                                :disabled="disabled"
+                                :pt="ptm('decrementButton')"
-                                v-bind="ptm('decrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
+                                <template #icon="slotProps">
                                     <slot name="decrementicon" :class="cx('decrementIcon')">
-                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="cx('decrementIcon')" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
+                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('decrementIcon'), slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
-                            </button>
+                                </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
-                        <Button :label="clearLabel" @click="onClearButtonClick($event)" :class="cx('clearButton')" @keydown="onContainerButtonKeydown" v-bind="clearButtonProps" :pt="ptm('clearButton')" data-pc-group-section="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);
+                ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay);
-                else 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) {
+            if (this.overlay) {
-                this.enableModality();
-            } else 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,

components/lib/calendar/style/CalendarStyle.js

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

components/lib/chips/Chips.vue

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

components/lib/multiselect/MultiSelect.vue

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

components/lib/rating/BaseRating.vue

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

components/lib/rating/Rating.d.ts

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

components/lib/rating/Rating.spec.js

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

components/lib/rating/Rating.vue

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

components/lib/rating/style/RatingStyle.js

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

components/lib/treeselect/TreeSelect.vue

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

doc/calendar/TouchUIDoc.vue

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

doc/rating/NumberOfStarsDoc.vue

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

pages/calendar/index.vue

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