From 9622a2b5640bc3e486823b28cf4e22f4297bacad Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 25 Mar 2024 15:59:02 +0300
Subject: [PATCH] Refactor #5426 - For Calendar

---
 components/lib/calendar/BaseCalendar.vue | 12 ++++++++++++
 components/lib/calendar/Calendar.d.ts    | 19 +++++++++++++++++--
 components/lib/calendar/Calendar.vue     |  8 ++------
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/components/lib/calendar/BaseCalendar.vue b/components/lib/calendar/BaseCalendar.vue
index 5bbd95842..76be002c6 100644
--- a/components/lib/calendar/BaseCalendar.vue
+++ b/components/lib/calendar/BaseCalendar.vue
@@ -220,6 +220,18 @@ export default {
             type: Object,
             default: null
         },
+        todayButtonProps: {
+            type: Object,
+            default() {
+                return { severity: 'secondary', text: true };
+            }
+        },
+        clearButtonProps: {
+            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 f5b974424..fc4698fde 100755
--- a/components/lib/calendar/Calendar.d.ts
+++ b/components/lib/calendar/Calendar.d.ts
@@ -9,6 +9,7 @@
  */
 import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ButtonPassThroughOptions, ButtonProps } from '../button';
 import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
@@ -308,12 +309,14 @@ export interface CalendarPassThroughOptions {
     buttonbar?: CalendarPassThroughOptionType;
     /**
      * Used to pass attributes to the today button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
      */
-    todayButton?: CalendarPassThroughOptionType;
+    todayButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the clear button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
      */
-    clearButton?: CalendarPassThroughOptionType;
+    clearButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the aria selected day's DOM element.
      */
@@ -750,6 +753,18 @@ interface BaseCalendarProps {
      * Style class of the overlay panel.
      */
     panelClass?: string | object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the today button component.
+     * @type {ButtonProps}
+     * @defaultValue { severity: 'secondary', text: true }
+     */
+    todayButtonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the clear button component.
+     * @type {ButtonProps}
+     * @defaultValue { severity: 'secondary', text: true }
+     */
+    clearButtonProps?: 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 85d50527d..000c4230e 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -482,12 +482,8 @@
                         </div>
                     </div>
                     <div v-if="showButtonBar" :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
-                        <button type="button" @click="onTodayButtonClick($event)" :class="cx('todayButton')" @keydown="onContainerButtonKeydown" v-bind="ptm('todayButton')" data-pc-group-section="button">
-                            {{ todayLabel }}
-                        </button>
-                        <button type="button" @click="onClearButtonClick($event)" :class="cx('clearButton')" @keydown="onContainerButtonKeydown" v-bind="ptm('clearButton')" data-pc-group-section="button">
-                            {{ clearLabel }}
-                        </button>
+                        <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" />
                     </div>
                     <slot name="footer"></slot>
                 </div>