@dpa-id-components/dpa-shared-components 19.4.2 → 20.0.0

package/src/components/UiDatePicker/UiDatePicker.vue

@@ -1,48 +1,52 @@
 <template>
   <div>
-    <Datepicker
-      ref="datePickerRef"
+    <VueDatePicker
+      ref="datePicker"
       v-model="date"
       offset="10"
       :inline="inline"
-      :utc="utc"
+      :timezone="utc ? 'utc' : undefined"
       :class="{
         dynamicPadding: multiCalendars,
         singleCalWidth: !multiCalendars,
         singleCalWithSidebar: !multiCalendars && leftSidebar,
       }"
       :text-input="!roundedEdges"
-      :text-input-options="{
-        format: formatInput,
-      }"
       :ui="uiConfig"
-      :multi-calendars="multiCalendars as boolean"
-      :locale="locale as string"
-      :enable-time-picker="enableTimePicker as boolean"
-      :auto-apply="autoApply as boolean"
-      :close-on-auto-apply="closeOnAutoApply as boolean"
-      :clearable="false"
-      :format="formatInput"
-      :min-date="minDate as Date"
-      :max-date="maxDate as Date"
-      :month-change-on-scroll="false"
+      :multi-calendars="multiCalendars"
+      :locale="locale"
+      :time-config="{ enableTimePicker }"
+      :auto-apply="autoApply"
+      :close-on-auto-apply="closeOnAutoApply"
+      :input-attrs="{ clearable: false }"
+      :formats="{ input: formatInput }"
+      :min-date="minDate"
+      :max-date="maxDate"
       :prevent-min-max-navigation="true"
       :year-range="getAvailableDateRange"
-      :auto-position="autoPosition as boolean"
       :transitions="false"
-      position="left"
-      :disabled="disabledState as boolean"
-      :keep-action-row="actionArea as boolean"
-      :month-picker="monthPicker as boolean"
+      :floating="{
+        arrow: menuArrow ?? false,
+        flip: autoPosition,
+        placement: 'bottom-start',
+      }"
+      :disabled="disabledState"
+      :keep-action-row="actionArea"
+      :month-picker="monthPicker"
       :teleport="teleport"
       :config="{
         closeOnScroll,
+        monthChangeOnScroll: false,
       }"
       v-bind="
         monthPicker
           ? {}
           : {
-              range: rangeConfig,
+              range: {
+                autoRange: props.autoRange,
+                maxRange: props.maxRange,
+                partialRange: false,
+              },
               startDate: Array.isArray(props.selectedDate)
                 ? props.selectedDate[0]
                 : (props.selectedDate as Date),
@@ -130,34 +134,33 @@
         <div
           class="flex w-full justify-between border-t-2 border-t-gray-200 p-0"
         >
-          <UiButton
-            class="my-4 ml-4 p-0"
-            color="white"
-            :rounded="true"
-            @click="handleCancel"
+          <UiButton class="my-4 ml-4 p-0" color="white" @click="handleCancel"
             >{{ cancel }}
           </UiButton>
           <UiButton
             class="my-4 mr-4 p-0"
             color="blue"
-            :rounded="true"
             data-testid="ui-mobile-datepicker-submit-button"
             @click="selectDate"
             >{{ submit }}
           </UiButton>
         </div>
       </template>
-    </Datepicker>
+
+      <template #arrow>
+        <div ref="menu-arrow" class="dp__arrow_top"></div>
+      </template>
+    </VueDatePicker>
   </div>
 </template>
 
 <script setup lang="ts">
 import "@vuepic/vue-datepicker/dist/main.css";
 
-import Datepicker, { type RangeConfig } from "@vuepic/vue-datepicker";
-import { format, getYear, startOfMonth } from "date-fns";
+import { VueDatePicker } from "@vuepic/vue-datepicker";
+import { format, getYear, type Locale, startOfMonth } from "date-fns";
 import { de } from "date-fns/locale";
-import { computed, ref, watch, watchEffect } from "vue";
+import { computed, ref, useTemplateRef, watch, watchEffect } from "vue";
 
 import UiButton from "../UiButton/UiButton.vue";
 import UiFilterButton from "../UiFilterButton/UiFilterButton.vue";
@@ -191,7 +194,7 @@ const props = withDefaults(
     autoApply?: boolean;
     closeOnAutoApply?: boolean;
     roundedEdges?: boolean;
-    locale?: string;
+    locale?: Locale;
     placeholderText?: string;
     quickFilterRanges?: PresetRange[];
     quickFilterHeadline?: string;
@@ -210,7 +213,7 @@ const props = withDefaults(
     activeState?: boolean;
     disabledState?: boolean;
     monthPicker?: boolean;
-    customFormatCallback?: any;
+    customFormatCallback?: (date: Date | [Date, Date]) => string;
     inputLabel?: string;
     iconLeft?: UiIconName | null;
     inline?: boolean;
@@ -222,7 +225,7 @@ const props = withDefaults(
   {
     definesRange: true,
     multiCalendars: true,
-    locale: "de",
+    locale: () => de,
     enableTimePicker: false,
     autoApply: true,
     closeOnAutoApply: true,
@@ -256,15 +259,11 @@ const props = withDefaults(
   },
 );
 
-const datePickerRef = ref();
+const datePickerRef = useTemplateRef("datePicker");
+const menuArrow = ref();
 
 const date = ref<DateType>();
 
-const rangeConfig = ref<RangeConfig>({
-  autoRange: props.autoRange,
-  maxRange: props.maxRange,
-});
-
 const uiConfig = ref({
   menu: "datepicker-wrapper",
   calendar: "datepicker-calendar-instance",
@@ -296,12 +295,12 @@ const formatRange = (dateRange: [Date, Date]): string => {
 const formatSingle = (date: Date): string => {
   const selectedDate = format(new Date(date), "dd.MM.yyyy");
   const selectedMonth = format(startOfMonth(new Date(date)), "MMMM yyyy", {
-    locale: de,
+    locale: props.locale,
   });
   return props.monthPicker ? selectedMonth : selectedDate;
 };
 
-const formatInput = (date: Date | [Date, Date]) => {
+const formatInput = (date: Date | [Date, Date]): string => {
   if (props.customFormatCallback) {
     return props.customFormatCallback(date);
   } else {
@@ -311,7 +310,7 @@ const formatInput = (date: Date | [Date, Date]) => {
   }
 };
 
-const getAvailableDateRange = computed(() => {
+const getAvailableDateRange = computed<[number, number]>(() => {
   const nextTenYears = getYear(new Date()) + 10;
   return [props.firstAvailableDate, nextTenYears];
 });

package/src/components/UiMenu/UiMenu.vue

@@ -145,7 +145,6 @@
             data-testid="reset-button"
           >
             <UiButton
-              rounded
               color="transparent"
               :disabled="disabledReset"
               disabled-variant="secondary"