@dpa-id-components/dpa-shared-components 16.0.1 → 17.0.0

package/src/components/UiDatePicker/UiDatePicker.vue

@@ -0,0 +1,558 @@
+<template>
+  <div>
+    <Datepicker
+      ref="datePickerRef"
+      v-model="date"
+      offset="10"
+      :inline="inline"
+      :utc="utc"
+      :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"
+      :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"
+      :teleport="teleport"
+      :config="{
+        closeOnScroll,
+      }"
+      v-bind="
+        monthPicker
+          ? {}
+          : {
+              range: rangeConfig,
+              startDate: Array.isArray(props.selectedDate)
+                ? props.selectedDate[0]
+                : (props.selectedDate as Date),
+            }
+      "
+      focus-start-date
+      @open="showDatepicker = true"
+      @closed="closeAction"
+      @update:model-value="handleDateChange"
+      @clear="emit('reset')"
+    >
+      <template #dp-input="{ value }">
+        <UiFilterButton
+          v-if="roundedEdges"
+          id="desktop-datepicker"
+          rounded
+          variant="transparent-rounded"
+          icon-size="small"
+          :active="activeState"
+          :disabled="disabledState"
+          chevron-icon="chevron-down"
+          :has-icon="true"
+          :icon-left="iconLeft"
+          :title="value || placeholderText"
+          @click="emit('open')"
+        />
+        <UiInput
+          v-else
+          id="desktop-datepicker"
+          :model-value="value"
+          :label="inputLabel"
+          :chevron="true"
+          :disabled="disabledState"
+          :placeholder="placeholderText"
+        />
+      </template>
+      <template v-if="leftSidebar" #left-sidebar>
+        <div
+          class="flex w-full flex-col md:w-37 md:border-r-2 md:border-r-gray-200"
+        >
+          <div
+            class="flex items-center justify-between"
+            @click="mobileQuickfiltersOpen = !mobileQuickfiltersOpen"
+          >
+            <span
+              class="p-3 text-xs font-semibold leading-4 tracking-wider text-gray-700"
+            >
+              {{ props.quickFilterHeadline }}
+            </span>
+            <UiIcon
+              v-if="enableQuickfilterToggle"
+              name="chevron-down"
+              class="inline-flex rounded-full text-gray-700 transition-transform duration-500 hover:bg-gray-300 md:hidden"
+              :class="{ 'rotate-180': mobileQuickfiltersOpen }"
+            />
+          </div>
+          <div
+            v-for="range in quickFilterRanges"
+            :key="range.label"
+            :class="[
+              !mobileQuickfiltersOpen && enableQuickfilterToggle
+                ? 'hidden'
+                : 'md:block',
+            ]"
+          >
+            <UiFilterButton
+              :data-testid="range.label"
+              :variant="range.isSelected ? 'blue-blank' : 'blank'"
+              :title="range.label"
+              :has-icon="false"
+              @click="setRange(range.range as [Date, Date], range.label)"
+            >
+            </UiFilterButton>
+          </div>
+        </div>
+      </template>
+      <template #action-extra>
+        <slot name="actionArea">
+          <div v-if="actionAreaExtraContent.length > 0" class="p-2">
+            {{ actionAreaExtraContent }}
+          </div>
+        </slot>
+      </template>
+      <template #action-row="{ selectDate }">
+        <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"
+            >{{ 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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Datepicker, { type RangeConfig } from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
+import { computed, ref, watch, watchEffect } from "vue";
+import UiFilterButton from "../UiFilterButton/UiFilterButton.vue";
+import { format, getYear, startOfMonth } from "date-fns";
+import UiButton from "../UiButton/UiButton.vue";
+import { de } from "date-fns/locale";
+import UiInput from "../UiInput/UiInput.vue";
+import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
+
+export interface PresetRange {
+  label: string;
+  range: Date[] | string[];
+  isSelected?: boolean;
+  style?: Record<string, string>;
+  slot?: string;
+}
+
+const emit = defineEmits<{
+  "date-changed": [Date | [Date, Date]];
+  close: [];
+  open: [];
+  reset: [];
+  datepickerQuickfilterClick: [string];
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    definesRange?: boolean;
+    multiCalendars?: boolean;
+    enableTimePicker?: boolean;
+    autoApply?: boolean;
+    closeOnAutoApply?: boolean;
+    roundedEdges?: boolean;
+    locale?: string;
+    placeholderText?: string;
+    quickFilterRanges?: PresetRange[] | null;
+    quickFilterHeadline?: string;
+    selectedDate?:
+      | Date
+      | [Date, Date]
+      | string
+      | { month: number; year: number };
+    autoPosition?: boolean;
+    leftSidebar?: boolean;
+    actionArea?: boolean;
+    actionAreaExtraContent?: string;
+    cancel?: string;
+    submit?: string;
+    firstAvailableDate?: number;
+    minDate?: Date | string;
+    maxDate?: Date;
+    autoRange?: string | number | undefined;
+    maxRange?: number | string | undefined;
+    activeState?: boolean;
+    disabledState?: boolean;
+    monthPicker?: boolean;
+    customFormatCallback?: any;
+    inputLabel?: string;
+    iconLeft?: UiIconName | null;
+    inline?: boolean;
+    utc?: boolean;
+    teleport?: boolean | string;
+    closeOnScroll?: boolean;
+    enableQuickfilterToggle?: boolean;
+  }>(),
+  {
+    definesRange: true,
+    multiCalendars: true,
+    locale: "de",
+    enableTimePicker: false,
+    autoApply: true,
+    closeOnAutoApply: true,
+    placeholderText: "",
+    roundedEdges: true,
+    quickFilterHeadline: "",
+    quickFilterRanges: null,
+    selectedDate: "",
+    autoPosition: false,
+    leftSidebar: true,
+    actionArea: true,
+    actionAreaExtraContent: "",
+    cancel: "",
+    submit: "",
+    firstAvailableDate: 1948,
+    minDate: () => new Date("1948-01-01"),
+    maxDate: undefined,
+    autoRange: undefined,
+    maxRange: undefined,
+    activeState: false,
+    disabledState: false,
+    monthPicker: false,
+    inputLabel: "",
+    iconLeft: null,
+    inline: false,
+    utc: true,
+    teleport: undefined,
+    closeOnScroll: false,
+    enableQuickfilterToggle: true,
+    customFormatCallback: undefined,
+  },
+);
+
+const datePickerRef = ref();
+
+const date = ref();
+
+const rangeConfig = ref<RangeConfig>({
+  autoRange: props.autoRange,
+  maxRange: props.maxRange,
+});
+
+const uiConfig = ref({
+  menu: "datepicker-wrapper",
+  calendar: "datepicker-calendar-instance",
+  calendarCell: "datepicker-cell",
+});
+
+watchEffect(() => {
+  date.value = props?.selectedDate;
+});
+
+const showDatepicker = ref(false);
+const closePicker = () => {
+  datePickerRef.value?.closeMenu();
+};
+
+const setRange = (range: any, label: string): void => {
+  emit("datepickerQuickfilterClick", label);
+  if (Array.isArray(range)) {
+    date.value = range.map((entry: any) => new Date(entry));
+  } else {
+    date.value = range;
+  }
+  handleDateChange(date.value);
+  closePicker();
+};
+
+const formatRange = (dateRange: [Date, Date]): string => {
+  const startDate = format(dateRange[0], "dd.MM.yyyy");
+  const endDate = format(dateRange[1], "dd.MM.yyyy");
+
+  return startDate + "-" + endDate;
+};
+
+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,
+  });
+  return props.monthPicker ? selectedMonth : selectedDate;
+};
+
+const formatInput = (date: Date | [Date, Date]) => {
+  if (props.customFormatCallback) {
+    return props.customFormatCallback(date);
+  } else {
+    return props.definesRange
+      ? formatRange(date as [Date, Date])
+      : formatSingle(date as Date);
+  }
+};
+
+const getAvailableDateRange = computed(() => {
+  const nextTenYears = getYear(new Date()) + 10;
+  return [props.firstAvailableDate, nextTenYears];
+});
+
+const handleDateChange = (event: Date | [Date, Date]) => {
+  emit("date-changed", event);
+  showDatepicker.value = false;
+  closePicker();
+};
+
+const handleCancel = () => {
+  date.value = props.selectedDate;
+  showDatepicker.value = false;
+  closePicker();
+};
+
+const closeAction = () => {
+  emit("close");
+  showDatepicker.value = false;
+};
+
+watch(
+  () => props.selectedDate,
+  () => (date.value = props.selectedDate),
+);
+
+const mobileQuickfiltersOpen = ref(false);
+</script>
+
+<style>
+.singleCalWidth .dp__instance_calendar {
+  @apply md:w-[269px];
+}
+
+.singleCalWithSidebar .dp__menu_content_wrapper {
+  @apply md:w-[428px];
+}
+
+.dynamicArrow .dp__arrow_top {
+  @apply hidden;
+}
+
+.dynamicPadding .dp__month_year_wrap {
+  @apply px-12;
+}
+
+.dynamicArrow .dp__menu {
+  @apply border-t-0 rounded-t-none;
+  box-shadow:
+    0 2px 6px -2px rgb(0 0 0 / 0.25),
+    0 2px 6px -2px rgb(0 0 0 / 0.25) !important;
+  border-bottom-right-radius: 1rem !important;
+  border-bottom-left-radius: 1rem !important;
+}
+
+.datepicker-wrapper {
+  @apply bg-white;
+  @apply font-sans;
+  @apply text-gray-900;
+  @apply text-xs;
+  @apply font-medium;
+  @apply z-10;
+  @apply rounded-2xl;
+  @apply shadow-lg;
+}
+
+.dp__menu_content_wrapper {
+  @apply grid md:flex md:flex-row md:flex-wrap md:w-[794px];
+}
+
+.dp__instance_calendar {
+  @apply md:w-[634px];
+}
+
+.dp__action_extra {
+  @apply order-3 md:order-none md:w-[634px] basis-full border-t border-gray-300 text-gray-700;
+}
+
+.dp__action_extra:empty {
+  @apply hidden;
+}
+
+.dp__menu_content_wrapper > .dp__action_extra {
+  @apply md:max-w-full;
+}
+
+.dp__sidebar_left {
+  @apply block md:flex py-0 order-2 md:order-none;
+}
+
+.dp__action_row {
+  @apply p-0;
+}
+
+.dp__cell_inner {
+  @apply rounded-full;
+}
+
+.dp__cell_disabled:hover {
+  @apply bg-transparent;
+  @apply text-gray-500;
+}
+
+.dp__cell_auto_range,
+.dp__cell_auto_range_start,
+.dp__cell_auto_range_end {
+  @apply border-none text-gray-900 bg-gray-300;
+}
+
+.datepicker-cell:active {
+  @apply rounded-full;
+}
+
+.datepicker-cell:hover {
+  @apply rounded-full bg-gray-300 text-gray-900;
+}
+
+.dp__button.dp__overlay_action {
+  @apply hidden;
+}
+
+.dp__range_between {
+  @apply bg-gray-200 !important;
+  @apply border-none;
+  @apply text-gray-900;
+}
+
+.dp__date_hover_end:hover {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+
+.dp__date_hover_start:hover {
+  border-radius: 9999px;
+}
+
+.datepicker-calendar-instance {
+  @apply px-3;
+  @apply py-3;
+}
+
+.dp__month_year_wrap {
+  width: inherit !important;
+}
+
+.dp__month_year_row {
+  @apply mt-3;
+  @apply mx-3;
+  @apply leading-6;
+  @apply text-base;
+  @apply font-medium;
+  @apply text-gray-900;
+  justify-content: space-between;
+}
+
+.dp__month_year_select {
+  width: inherit;
+  @apply p-3;
+}
+
+.dp__overlay {
+  @apply rounded-3xl;
+}
+
+.dp__inner_nav > svg {
+  @apply text-gray-800;
+  @apply w-4 h-4;
+}
+
+.dp__inner_nav:hover > svg {
+  @apply fill-white;
+}
+
+.dp__calendar_next {
+  margin-left: 0;
+}
+
+.dp__calendar_header {
+  @apply text-xs;
+  @apply text-gray-600;
+  @apply font-semibold;
+}
+
+.dp__preset_ranges {
+  @apply font-sans;
+  @apply text-gray-800;
+  @apply font-semibold;
+  @apply p-5;
+  @apply flex;
+  @apply flex-col;
+  @apply justify-evenly;
+  @apply w-44;
+  @apply border-r-2;
+  @apply border-r-gray-200;
+}
+
+.dp__arrow_top {
+  left: 10%;
+}
+
+.dp__inner_nav_disabled {
+  @apply bg-transparent;
+}
+
+.dp__inner_nav_disabled:hover {
+  @apply bg-transparent;
+}
+
+.dp__inner_nav_disabled > svg {
+  @apply fill-gray-400;
+}
+
+.dp__inner_nav_disabled > svg:hover {
+  @apply fill-gray-400;
+}
+
+.dp__overlay_cell_active,
+.dp__month_year_select {
+  @apply rounded-full;
+}
+
+.dp__overlay_cell:hover,
+.dp__month_year_select:hover {
+  @apply rounded-full bg-gray-300 text-gray-900;
+}
+
+.dp__theme_light {
+  --dp-font-family: "Inter";
+  --dp-background-color: #ffffff;
+  --dp-text-color: rgba(33, 33, 33, 1);
+  --dp-hover-color: #003edb;
+  --dp-hover-icon-color: white;
+  --dp-hover-text-color: #ffffff;
+  --dp-primary-color: #003edb;
+  --dp-primary-text-color: #ffffff;
+  --dp-secondary-color: #bababa;
+  --dp-border-color: rgba(255, 255, 255, 0.99);
+  --dp-menu-padding: 0;
+}
+</style>

package/src/components/UiDialog/README.md

@@ -0,0 +1,50 @@
+# @dpa-shared-components/UiDialog
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiDialog -->
+<template>
+    <UiDialog v-bind='args'>
+        <template #header>Dialog header</template>
+        Dialog main
+        <template #footer>Dialog footer</template>
+    </UiDialog>
+</template>
+
+<script setup lang="ts">
+    import {UiDialog} from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+
+| Name            | Type      | Default   | Description                                                                |
+|-----------------|-----------|-----------|----------------------------------------------------------------------------|
+| `scrollable`    | `Boolean` | `false`   | Adds scollability to the componbent, best used with `maxHeight`            |
+| `maxHeight`     | `String`  | `""`      | Sets the `max-height` style of the Dialog.                                 |
+| `maxWidth`      | `String`  | `"600px"` | Sets the `max-width` style of the Dialog.                                  |
+| `roundedBorder` | `Boolean` | `false`   | Rounds the edges of the Dialog                                             |
+| `hasPaddingY`   | `Boolean` | `true`    | Sets a vertical padding of the Dialog                                      |
+| `hasPaddingX`   | `Boolean` | `true`    | Sets a horizontal padding of the Dialog                                    |
+| `headerClasses` | `String`  | `null`    | A list of classes for the header slot.                                     |
+| `mainClasses`   | `String`  | `null`    | A list of classes for the main slot.                                       |
+| `positionTop`   | `String`  | `50%`     | Enter css value for vertical positioning of the Dialog (default is center) |
+| `closeOnEsc`    | `booelan` | `false%`  | The modal closes when ESC-Key is pressed                                   |
+
+### Events
+
+| Name    | Type         | Description                       |
+|---------|--------------|-----------------------------------|
+| `close` | none         | Emitted when the Dialog is closed |
+
+### Slots
+
+| Name      | Description                               |
+|-----------|-------------------------------------------|
+| `default` | slot for the rendering the main section   |
+| `header`  | slot for the rendering the header section |
+| `footer`  | slot for the rendering the footer section |

package/src/components/UiDialog/UiDialog.vue

@@ -0,0 +1,116 @@
+<template>
+  <UiOverlay @close="handleClickAway">
+    <div
+      :class="{
+        'scrolling-touch overflow-y-auto': scrollable,
+        'rounded-[24px]': roundedBorder,
+      }"
+      :style="`
+      max-height: ${maxHeight};
+      max-width: ${maxWidth};
+      top: ${positionTop}
+      `"
+      class="fixed bg-white shadow-lg"
+      data-testid="container"
+      style="
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: calc(100% - 2rem);
+      "
+    >
+      <header
+        v-if="$slots.header"
+        :class="
+          cn(
+            'flex h-12 items-center justify-between bg-gray-100 py-3 pl-4 pr-2 lg:h-14 lg:py-4 lg:pl-6 lg:pr-3',
+            headerClasses,
+            { 'rounded-t-[24px]': roundedBorder },
+          )
+        "
+      >
+        <slot name="header" />
+        <UiIconButton
+          v-if="hasCloseButton"
+          icon-name="close"
+          background-color="none"
+          icon-color="gray"
+          size="medium"
+          class="hover:bg-gray-400 active:bg-gray-500"
+          @click="emit('close')"
+        ></UiIconButton>
+      </header>
+      <main
+        :class="
+          cn(mainClasses, {
+            'px-4 lg:px-6': hasPaddingX,
+            'pb-3 pt-6': hasPaddingY,
+          })
+        "
+      >
+        <slot />
+      </main>
+      <footer
+        v-if="$slots.footer"
+        class="flex justify-between px-4 py-6 lg:px-6"
+      >
+        <slot name="footer" />
+      </footer>
+    </div>
+  </UiOverlay>
+</template>
+<script setup lang="ts">
+import UiOverlay from "../UiOverlay/UiOverlay.vue";
+import UiIconButton from "../UiIconButton/UiIconButton.vue";
+import { cn } from "../../utils/cn.js";
+import { useEventListener } from "@vueuse/core";
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    scrollable?: boolean;
+    maxWidth?: string;
+    maxHeight?: string;
+    roundedBorder?: boolean;
+    hasPaddingY?: boolean;
+    hasPaddingX?: boolean;
+    headerClasses?: string;
+    mainClasses?: string;
+    hasCloseButton?: boolean;
+    closeOnClickOutside?: boolean;
+    positionTop?: string;
+    closeOnEsc?: boolean;
+  }>(),
+  {
+    scrollable: false,
+    maxWidth: "600px",
+    maxHeight: "",
+    roundedBorder: false,
+    hasPaddingY: true,
+    hasPaddingX: true,
+    headerClasses: "",
+    mainClasses: "",
+    hasCloseButton: false,
+    closeOnClickOutside: true,
+    positionTop: "50%",
+    closeOnEsc: false,
+  },
+);
+
+const handleClickAway = () => {
+  if (props.closeOnClickOutside) {
+    emit("close");
+  }
+};
+const onEscapeKeyUp = (event: KeyboardEvent) => {
+  if (props.closeOnEsc) {
+    if (event.key === "Escape") {
+      emit("close");
+    }
+  }
+};
+
+useEventListener(document, "keyup", (event) => onEscapeKeyUp(event));
+</script>