Display: Fix styles for primevue calendar

Author: AngelFQC

assets/css/scss/atoms/_calendar.scss

@@ -1,11 +1,191 @@
-.p-calendar {
-  @apply flex;
+.p-datepicker {
+  @apply inline-flex max-w-full;
 
-  .p-inputtext {
-    @apply rounded-r-none;
+  &-input {
+    @apply flex-auto w-[1%];
   }
 
-  .p-button {
-    @apply rounded-l-none;
+  &:has(&-dropdown) &-input {
+    @apply rounded-r-lg;
+  }
+
+  &-dropdown {
+    @apply cursor-pointer inline-flex select-none items-center justify-center overflow-hidden relative w-full bg-white transition-colors outline-none rounded-l-lg
+      focus-visible:outline-none;
+
+    &:not(:disabled) {
+      @apply
+      hover:bg-support-1
+      active:bg-support-1
+      focus:bg-support-1;
+    }
+  }
+
+  &:has(&-input-icon-container) {
+    @apply relative;
+  }
+
+  &:has(&-input-icon-container) &-input {
+    @apply pr-12;
+  }
+
+  &-input-icon-container {
+    @apply cursor-pointer absolute top-3 right-4 text-gray-90;
+
+    .p-icon {
+      @apply w-4 h-4 text-body-1 leading-none;
+    }
+  }
+
+  &-fluid {
+    @apply flex;
+  }
+
+  &-fluid &-input {
+    @apply w-[1%];
+  }
+
+  & &-panel {
+    @apply min-w-full;
+  }
+
+  &-panel {
+    @apply absolute overflow-auto top-0 left-0 bg-white drop-shadow-lg rounded-lg border-none text-gray-90 mt-1 p-0
+      before:content-[""] before:w-full before:block before:h-3 before:sticky before:bg-white before:z-[2] before:top-0 before:rounded-t-lg before:rounded-b-none
+      after:content-[""] after:w-full after:block after:h-3 after:sticky after:bg-white after:z-[2] after:bottom-0 after:rounded-b-lg after:rounded-t-none;
+  }
+
+  &-panel-inline {
+    @apply inline-block overflow-x-auto drop-shadow-none;
+  }
+
+  &-header {
+    @apply flex items-center justify-between p-0 text-gray-90;
+  }
+
+  &-next-button {
+    @apply rtl:-order-1;
+  }
+
+  &-prev-button {
+    @apply rtl:order-1;
+  }
+
+  &-title {
+    @apply flex items-center justify-between gap-2 font-semibold;
+  }
+
+  &-select-year,
+  &-select-month {
+    @apply border-none bg-transparent m-0 cursor-pointer transition-colors text-gray-90 px-2 py-0
+      enabled:text-primary
+      hover:text-primary
+      focus-visible:text-primary focus-visible:outline-none;
+  }
+
+  &-calendar-container {
+    @apply flex px-4;
+  }
+
+  &-calendar-container &-calendar {
+    @apply flex-auto border-0 p-0;
+  }
+
+  &-day-view {
+    @apply w-full border-collapse text-base m-0;
+  }
+
+  &-weekday {
+    @apply font-semibold text-gray-90;
+  }
+
+  &-day-cell {
+    @apply p-1;
+  }
+
+  &-day {
+    @apply flex justify-center items-center cursor-pointer m-0 overflow-hidden relative w-7 h-7 border-0 rounded-lg text-gray-90 text-body-2 transition-colors outline-none
+      focus-visible:outline-none;
+
+    .p-datepicker-today > & {
+      @apply font-semibold;
+    }
+
+    &-selected,
+    &-selected-range {
+      @apply bg-support-1 text-primary;
+
+      .p-datepicker-today > & {
+      }
+    }
+  }
+
+  &-day:not(.p-disabled):not(&-day-selected),
+  &-month:not(.p-disabled):not(&-month-selected),
+  &-year:not(.p-disabled):not(&-year-selected) {
+    @apply hover:bg-support-1;
+  }
+
+  &-weeknumber {
+    @apply font-semibold text-secondary text-center;
+  }
+
+  &-month-view,
+  &-year-view,
+  &-time-picker {
+    @apply mx-4;
+  }
+
+  &-month,
+  &-year{
+    @apply w-1/3 h-7 inline-flex items-center justify-center cursor-pointer overflow-hidden relative p-0 transition-colors rounded-lg outline-none text-gray-90 text-body-2;
+
+    &-selected {
+      @apply bg-support-1 text-primary;
+    }
+  }
+
+  &-month:not(.p-disabled),
+  &-year:not(.p-disabled) {
+    @apply focus-visible:outline-none;
+  }
+
+  &-buttonbar {
+    @apply flex justify-between items-center p-2;
+
+    .p-button {
+      @apply w-auto;
+    }
+  }
+
+  &-time-picker {
+    @apply flex justify-center items-center gap-4;
+
+    & > div {
+      @apply flex items-center flex-col gap-1;
+    }
+
+    span {
+      @apply text-body-2;
+    }
+
+    .p-timepicker-only & {
+    }
+  }
+
+  &:has(.p-inputtext-sm) &-dropdown {
+    .p-icon {
+    }
+  }
+
+  &:has(.p-inputtext-sm) &-input-icon {
+  }
+
+  &:has(.p-inputtext-lg) &-dropdown {
+    .p-icon {
+    }
+  }
+
+  &:has(.p-inputtext-lg) &-input-icon {
   }
 }

assets/vue/components/basecomponents/BaseCalendar.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, onMounted, ref, watch } from "vue"
 import DatePicker from "primevue/datepicker"
+import FloatLabel from "primevue/floatlabel"
 import { calendarLocales } from "../../utils/calendarLocales"
 import { useLocale } from "../../composables/locale"
 import { usePrimeVue } from "primevue/config"
@@ -94,20 +95,24 @@ onMounted(() => {
 </script>
 <template>
   <div class="field">
-    <div class="p-float-label">
+    <FloatLabel variant="on">
       <DatePicker
-        :id="id"
         v-model="model"
         :class="{ 'p-invalid': isInvalid }"
         :date-format="dateFormat"
+        :input-id="id"
         :locale="selectedLocale"
         :manual-input="type !== 'range'"
         :selection-mode="type"
         :show-icon="showIcon"
         :show-time="showTime"
+        fluid
+        icon-display="input"
       />
-      <label v-text="label" />
-    </div>
-    <small></small>
+      <label
+        :for="id"
+        v-text="label"
+      />
+    </FloatLabel>
   </div>
 </template>

assets/vue/components/basecomponents/BaseInputDate.vue

@@ -1,18 +1,21 @@
 <template>
   <div class="field">
-    <div class="p-float-label">
+    <FloatLabel variant="on">
       <DatePicker
         :class="{ 'p-invalid': isInvalid }"
         :input-id="id"
         :model-value="modelValue"
         :show-time="showTime"
+        fluid
+        icon-display="input"
+        show-icon
         @update:model-value="$emit('update:modelValue', $event)"
       />
       <label
         :for="id"
         v-text="label"
       />
-    </div>
+    </FloatLabel>
     <small
       v-if="isInvalid"
       :class="{ 'p-error': isInvalid }"
@@ -22,6 +25,7 @@
 </template>
 
 <script setup>
+import FloatLabel from "primevue/floatlabel"
 import DatePicker from "primevue/datepicker"
 
 defineProps({