@dpa-id-components/dpa-shared-components 19.4.1 → 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),
@@ -88,7 +92,7 @@
             @click="mobileQuickfiltersOpen = !mobileQuickfiltersOpen"
           >
             <span
-              class="p-3 text-xs leading-4 font-semibold tracking-wider text-gray-700"
+              class="p-3 text-xs/4 font-semibold tracking-wider text-gray-700"
             >
               {{ props.quickFilterHeadline }}
             </span>
@@ -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/UiFilterBadgeButton/UiFilterBadgeButton.vue

@@ -14,7 +14,7 @@
       :style="{ backgroundColor: fill }"
     />
     <p
-      class="z-0 w-full cursor-pointer text-sm leading-normal font-medium"
+      class="z-0 w-full cursor-pointer text-sm/normal font-medium"
       :style="{ color }"
       data-testid="labelText"
       @click.self="emit('click')"

package/src/components/UiFilterButton/UiFilterButton.vue

@@ -20,7 +20,7 @@
     >
       <span
         data-testid="filterbutton-title"
-        class="flex w-full items-center justify-between text-left text-sm leading-normal font-medium"
+        class="flex w-full items-center justify-between text-left text-sm/normal font-medium"
         :class="`${textColorClass} ${
           props.size === 'xs' ? 'text-xs' : 'text-sm'
         }`"

package/src/components/UiInput/UiInput.vue

@@ -86,7 +86,7 @@
       :id="addonTextId"
       :class="
         cn(
-          'rounded-b-sm px-4 py-1 text-xs leading-normal font-medium transition-all duration-150 ease-in-out peer-disabled:opacity-70 peer-aria-invalid:bg-alert-red-default peer-aria-invalid:text-white peer-enabled:peer-aria-invalid:peer-hover:bg-alert-red-dark peer-enabled:peer-aria-invalid:peer-focus:bg-alert-red-dark',
+          'rounded-b-sm px-4 py-1 text-xs/normal font-medium transition-all duration-150 ease-in-out peer-disabled:opacity-70 peer-aria-invalid:bg-alert-red-default peer-aria-invalid:text-white peer-enabled:peer-aria-invalid:peer-hover:bg-alert-red-dark peer-enabled:peer-aria-invalid:peer-focus:bg-alert-red-dark',
           addonClass,
         )
       "

package/src/components/UiList/UiList.vue

@@ -1,6 +1,6 @@
 <template>
   <ul
-    class="rounded-sm border text-base leading-6 shadow-lg focus:outline-hidden sm:text-sm sm:leading-5"
+    class="rounded-sm border text-base/6 shadow-lg focus:outline-hidden sm:text-sm/5"
   >
     <slot />
   </ul>

package/src/components/UiListItem/UiListItem.vue

@@ -11,7 +11,7 @@
     <span
       :class="
         cn(
-          'flex items-center justify-between gap-1 text-sm leading-normal hover:text-blue-default',
+          'flex items-center justify-between gap-1 text-sm/normal hover:text-blue-default',
           itemClasses,
           overrideClasses,
         )

package/src/components/UiMenu/UiMenu.vue

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

package/src/components/UiSelect/UiSelect.vue

@@ -37,6 +37,7 @@
       :class="
         cn(`
           peer
+          disabled:text-color-gray-400
           h-14
           w-full
           appearance-none
@@ -51,15 +52,14 @@
           transition-all
           duration-150
           outline-none
-          disabled:text-color-gray-400
-          disabled:border-gray-500
-          disabled:opacity-70
           not-aria-invalid:rounded-b-sm
           placeholder:text-gray-500
           focus:border-2
           focus:border-blue-default
           focus:p-inputFocused
           enabled:not-focus:hover:border-gray-700
+          disabled:border-gray-500
+          disabled:opacity-70
           aria-invalid:border-2
           aria-invalid:border-alert-red-default
           aria-invalid:focus:border-alert-red-dark
@@ -85,8 +85,8 @@
           bg-alert-red-default
           px-4
           py-1
-          text-xs
-          leading-normal
+          text-xs/normal
+          
           font-medium
           text-white
           transition-all

package/src/components/UiSnackbar/UiSnackbar.vue

@@ -31,7 +31,7 @@
           class="mr-2 text-white"
         />
 
-        <p class="text-sm leading-5 font-normal">
+        <p class="text-sm/5 font-normal">
           <slot />
         </p>
 
@@ -39,7 +39,7 @@
           v-if="$slots.action"
           ref="actionBtn"
           type="button"
-          class="ml-3 cursor-pointer text-sm leading-5 font-bold hover:underline focus:outline-hidden focus-visible:underline"
+          class="ml-3 cursor-pointer text-sm/5 font-bold hover:underline focus:outline-hidden focus-visible:underline"
           @click="emit('action-click')"
         >
           <slot name="action" />

package/src/components/UiTooltip/UiTooltip.vue

@@ -3,7 +3,6 @@
     <div
       ref="activatorElm"
       data-testid="activator"
-      tabindex="1"
       @mouseenter="isShown = true"
       @focus="isShown = true"
       @mouseleave="isShown = false"
@@ -29,7 +28,7 @@
             <ul
               v-show="isShown"
               data-testid="tooltipElement"
-              class="my-1 w-72 rounded-2xl border border-gray-300 bg-white text-xs leading-5 shadow-lg"
+              class="my-1 w-72 rounded-2xl border border-gray-300 bg-white text-xs/5 shadow-lg"
               :class="[tooltipClasses]"
             >
               <slot>
@@ -67,11 +66,11 @@
             <div
               v-show="isShown"
               data-testid="tooltipElement"
-              class="flex items-center bg-gray-900 px-2 py-half text-xs leading-5 text-white"
+              class="flex items-center bg-gray-900 px-2 py-half text-xs/5 text-white"
               :class="[
                 tooltipClasses,
                 multilines
-                  ? 'h-auto max-w-[300px] flex-wrap rounded-2xl'
+                  ? 'h-auto max-w-75 flex-wrap rounded-2xl'
                   : 'h-6 w-max rounded-full',
               ]"
             >