From c0076f770ca48bf12fb6f017318c540c0a5f5771 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 9 Apr 2024 09:05:44 +0300
Subject: [PATCH] Refactor #5548 - For Calendar

---
 components/lib/calendar/BaseCalendar.vue |  12 ++
 components/lib/calendar/Calendar.d.ts    |  24 ++-
 components/lib/calendar/Calendar.vue     | 226 +++++++++++++----------
 3 files changed, 163 insertions(+), 99 deletions(-)

diff --git a/components/lib/calendar/BaseCalendar.vue b/components/lib/calendar/BaseCalendar.vue
index 80a5a72fd..bc5139dab 100644
--- a/components/lib/calendar/BaseCalendar.vue
+++ b/components/lib/calendar/BaseCalendar.vue
@@ -232,6 +232,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
diff --git a/components/lib/calendar/Calendar.d.ts b/components/lib/calendar/Calendar.d.ts
index 4bac218fd..6d5e6207e 100755
--- a/components/lib/calendar/Calendar.d.ts
+++ b/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.
      */
@@ -766,15 +768,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.
      */
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index f8ec80005..dc2152985 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -73,23 +73,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 +153,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 +308,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 +320,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 +343,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 +527,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';
@@ -2677,10 +2714,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 +3034,7 @@ export default {
     },
     components: {
         InputText,
+        Button,
         Portal,
         CalendarIcon,
         ChevronLeftIcon,