From 47711d5af9e96ee1d5e1f81461b4de21c821fb83 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 15 May 2024 10:07:32 +0300
Subject: [PATCH] Refactored datepicker input

---
 assets/styles/layout/_topbar.scss                  | 7 ++++---
 components/lib/datepicker/DatePicker.vue           | 2 +-
 components/lib/datepicker/style/DatePickerStyle.js | 6 +++---
 doc/datepicker/IconDoc.vue                         | 8 ++++----
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/assets/styles/layout/_topbar.scss b/assets/styles/layout/_topbar.scss
index 5629f6cc7..8f197e901 100644
--- a/assets/styles/layout/_topbar.scss
+++ b/assets/styles/layout/_topbar.scss
@@ -108,7 +108,7 @@
             position: absolute;
             top: calc(100% + 2px);
             right: 0;
-            width: 14rem;
+            width: 16rem;
             padding: .75rem;
             background-color: var(--overlay-background);
             border-radius: 6px;
@@ -135,11 +135,12 @@
                     display: flex;
                     gap: .5rem;
                     flex-wrap: wrap;
+                    justify-content: space-between;
     
                     button {
                         border: none;
-                        width: 1em;
-                        height: 1rem;
+                        width: 1.25rem;
+                        height: 1.25rem;
                         border-radius: 50%;
                         cursor: pointer;
                         outline-color: transparent;
diff --git a/components/lib/datepicker/DatePicker.vue b/components/lib/datepicker/DatePicker.vue
index 8f2f429f8..b91291039 100755
--- a/components/lib/datepicker/DatePicker.vue
+++ b/components/lib/datepicker/DatePicker.vue
@@ -48,7 +48,7 @@
             </button>
         </slot>
         <template v-else-if="showIcon && iconDisplay === 'input'">
-            <span :class="cx('inputIconContainer')">
+            <span v-if="$slots.inputicon || showIcon" :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>
diff --git a/components/lib/datepicker/style/DatePickerStyle.js b/components/lib/datepicker/style/DatePickerStyle.js
index b8cc030b3..a2267a6fd 100644
--- a/components/lib/datepicker/style/DatePickerStyle.js
+++ b/components/lib/datepicker/style/DatePickerStyle.js
@@ -54,15 +54,15 @@ const theme = ({ dt }) => `
     outline-offset: ${dt('datepicker.dropdown.focus.ring.offset')};
 }
 
-.p-datepicker:has(.p-datepicker-input-icon) {
+.p-datepicker:has(.p-datepicker-input-icon-container) {
     position: relative;
 }
 
-.p-datepicker:has(.p-datepicker-input-icon) .p-datepicker-input {
+.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {
     padding-right: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
 }
 
-.p-datepicker-input-icon {
+.p-datepicker-input-icon-container {
     cursor: pointer;
     position: absolute;
     top: 50%;
diff --git a/doc/datepicker/IconDoc.vue b/doc/datepicker/IconDoc.vue
index 52a04af04..9d834700a 100644
--- a/doc/datepicker/IconDoc.vue
+++ b/doc/datepicker/IconDoc.vue
@@ -15,7 +15,7 @@
             <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
             <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
                 <template #inputicon="slotProps">
-                    <InputIcon class="pi pi-clock" :class="slotProps.class" @click="slotProps.clickCallback" />
+                    <i class="pi pi-clock" @click="slotProps.clickCallback" />
                 </template>
             </DatePicker>
         </div>
@@ -36,7 +36,7 @@ export default {
 <DatePicker v-model="icondisplay" showIcon iconDisplay="input" />
 <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly>
     <template #inputicon="slotProps">
-        <InputIcon class="pi pi-clock" :class="slotProps.class" @click="slotProps.clickCallback" />
+        <i class="pi pi-clock" @click="slotProps.clickCallback" />
     </template>
 </DatePicker>
 `,
@@ -55,7 +55,7 @@ export default {
             <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
             <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
                 <template #inputicon="slotProps">
-                    <InputIcon class="pi pi-clock" :class="slotProps.class" @click="slotProps.clickCallback" />
+                    <i class="pi pi-clock" @click="slotProps.clickCallback" />
                 </template>
             </DatePicker>
         </div>
@@ -89,7 +89,7 @@ export default {
             <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
             <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
                 <template #inputicon="slotProps">
-                    <InputIcon class="pi pi-clock" :class="slotProps.class" @click="slotProps.clickCallback" />
+                    <i class="pi pi-clock" @click="slotProps.clickCallback" />
                 </template>
             </DatePicker>
         </div>