@dpa-id-components/dpa-shared-components 22.3.1 → 23.0.0

package/dist/src/components/UiDatePicker/UiDatePicker.stories.ts

@@ -1,308 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import {
-  addDays,
-  differenceInDays,
-  endOfDay,
-  endOfMonth,
-  format,
-  getMonth,
-  getYear,
-  isToday,
-  isYesterday,
-  startOfDay,
-  startOfMonth,
-  startOfYear,
-  sub,
-  subMonths,
-} from "date-fns";
-import { de, enCA } from "date-fns/locale";
-import { computed, ref } from "vue";
-
-import UiButton from "../UiButton/UiButton.vue";
-import UiIcon from "../UiIcon/UiIcon.vue";
-
-import UiDatePicker, { type PresetRange } from "./UiDatePicker.vue";
-
-const QUICKFILTERS: PresetRange[] = [
-  {
-    label: "Heute",
-    range: [startOfDay(new Date()), endOfDay(new Date())],
-  },
-  {
-    label: "Dieser Monat",
-    range: [startOfMonth(new Date()), endOfMonth(new Date())],
-  },
-  {
-    label: "Dieses Jahr",
-    range: [startOfYear(new Date()), endOfDay(new Date())],
-  },
-  {
-    label: "Letzter Monat",
-    range: [
-      startOfMonth(subMonths(new Date(), 1)),
-      endOfMonth(subMonths(new Date(), 1)),
-    ],
-  },
-];
-const callback = (date: Date | [Date, Date]) => {
-  const DATE_FORMAT = "dd.MM.yyyy";
-  if (!Array.isArray(date)) {
-    return format(date, DATE_FORMAT);
-  }
-
-  const [start, end] = date;
-  const difference = differenceInDays(start, end);
-  if (difference === 0 && isToday(start)) {
-    return "Heute";
-  }
-  if (difference === 0 && isYesterday(start)) {
-    return "Gestern";
-  }
-  if (difference === 0 && isToday(addDays(start, 2))) {
-    return "Vorgestern";
-  }
-  if (isToday(end) && differenceInDays(start, new Date()) <= 7) {
-    return "Letzte " + differenceInDays(new Date(), start) + " Tage";
-  }
-
-  if (format(start, DATE_FORMAT) === format(end, DATE_FORMAT)) {
-    return format(start, DATE_FORMAT);
-  }
-  return `${format(start, DATE_FORMAT)} - ${format(end, DATE_FORMAT)}`;
-};
-const meta = {
-  title: "forms/UiDatePicker",
-  component: UiDatePicker,
-  args: {
-    autoApply: true,
-    closeOnAutoApply: true,
-    inline: false,
-    disabled: false,
-    locale: de,
-    teleport: false,
-    minDate: new Date("1948-01-01"),
-    maxDate: startOfDay(new Date()),
-    autoRange: undefined,
-    maxRange: undefined,
-    multiCalendars: false,
-    monthPicker: false,
-    enableTimePicker: false,
-    autoPosition: true,
-    triggerPlaceholderText: "Datum",
-    customFormatCallback: undefined,
-    leftTriggerIcon: undefined,
-    triggerWidth: "fit",
-    leftSidebar: false,
-    quickFilterHeadline: undefined,
-    quickFilterRanges: [],
-    actionExtraContent: undefined,
-  },
-  argTypes: {
-    autoRange: {
-      control: "number",
-    },
-    maxRange: {
-      control: "number",
-    },
-    leftSidebar: {
-      control: "boolean",
-    },
-  },
-} satisfies Meta<typeof UiDatePicker>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { UiDatePicker },
-    setup() {
-      return { args };
-    },
-    template: /*html*/ `
-      <UiDatePicker v-bind="args" />
-    `,
-  }),
-};
-
-export const Inline: Story = {
-  args: {
-    inline: true,
-    leftSidebar: true,
-  },
-  render: (args) => ({
-    components: { UiDatePicker, UiButton },
-    setup() {
-      const date = ref();
-      const formattedDate = computed(() => {
-        if (!date.value) return;
-        return callback(date.value);
-      });
-      return { args, date, formattedDate };
-    },
-    template: /*html*/ `
-      <div class="space-y-8">
-        <UiDatePicker v-bind="args" v-model="date" />
-        <div>Selected Date: {{ formattedDate }}</div>
-      </div>
-    `,
-  }),
-};
-
-export const WithResetButton: Story = {
-  render: (args) => ({
-    components: { UiDatePicker, UiButton, UiIcon },
-    setup() {
-      const date = ref([new Date(), new Date()]);
-      return { args, date };
-    },
-    template: /*html*/ `
-      <UiDatePicker v-bind="args" v-model="date">
-        <template #action-extra="{ reset }">
-          <div class="text-left">
-            <UiButton  appearance="secondary" size="xs" @click="reset">
-              <UiIcon name="reset" />
-              <span>Zurücksetzen</span>
-            </UiButton>
-          </div>
-        </template>
-      </UiDatePicker>
-    `,
-  }),
-};
-
-export const WithActionRow: Story = {
-  args: {
-    autoApply: false,
-  },
-  render: (args) => ({
-    components: { UiDatePicker, UiButton, UiIcon },
-    setup() {
-      const date = ref();
-      return { args, date };
-    },
-    template: /*html*/ `
-      <UiDatePicker v-bind="args" v-model="date">
-        <template #action-row="{ selectDate, closePicker }">
-          <UiButton appearance="secondary" size="xs" @click="closePicker">
-            Abbrechen
-          </UiButton>
-          <UiButton size="xs" @click="selectDate">
-            Anwenden
-          </UiButton>
-        </template>
-      </UiDatePicker>
-    `,
-  }),
-};
-
-export const MonthPicker: Story = {
-  args: {
-    monthPicker: true,
-    locale: enCA,
-    quickFilterHeadline: "Schnellfilter",
-    quickFilterRanges: [
-      {
-        label: "Dieser Monat",
-        range: { year: getYear(new Date()), month: getMonth(new Date()) },
-      },
-    ],
-    leftSidebar: true,
-  },
-  render: (args) => ({
-    components: { UiDatePicker },
-    setup() {
-      return { args };
-    },
-    template: /*html*/ `
-      <UiDatePicker v-bind="args" />
-    `,
-  }),
-};
-
-export const WithQuickfilters: Story = {
-  args: {
-    closeOnAutoApply: true,
-    leftSidebar: true,
-    triggerPlaceholderText: "Datum",
-    autoApply: true,
-    quickFilterHeadline: "Schnellfilter",
-    quickFilterRanges: QUICKFILTERS,
-  },
-  render: (args) => ({
-    components: { UiDatePicker },
-    setup() {
-      return { args };
-    },
-    template: /*html*/ `
-      <UiDatePicker v-bind="args" />
-    `,
-  }),
-};
-
-export const WithMultiCalendars: Story = {
-  args: {
-    closeOnAutoApply: true,
-    triggerPlaceholderText: "Datum",
-    autoApply: true,
-    multiCalendars: true,
-  },
-  render: (args) => ({
-    components: { UiDatePicker },
-    setup() {
-      return { args };
-    },
-    template: /*html*/ `
-      <UiDatePicker v-bind="args" />
-    `,
-  }),
-};
-
-export const WithCustomFormatter: Story = {
-  args: {
-    autoApply: true,
-    closeOnAutoApply: true,
-    customFormatCallback: callback,
-    triggerPlaceholderText: "Datum",
-  },
-  render: (args) => ({
-    components: { UiDatePicker },
-    setup() {
-      const date = ref([new Date(), new Date()]);
-      return { args, date };
-    },
-    template: /*html*/ `
-      <UiDatePicker v-bind="args" v-model="date" />
-    `,
-  }),
-};
-
-export const WithAllSettings: Story = {
-  args: {
-    closeOnAutoApply: true,
-    teleport: "body",
-    leftSidebar: true,
-    triggerPlaceholderText: "Datum",
-    leftTriggerIcon: "event",
-    autoApply: true,
-    maxDate: new Date(),
-    locale: enCA,
-    minDate: sub(new Date(), { years: 5 }),
-    multiCalendars: true,
-    enableTimePicker: true,
-    maxRange: 4,
-    customFormatCallback: callback,
-    quickFilterHeadline: "Schnellfilter",
-    quickFilterRanges: QUICKFILTERS,
-    actionExtraContent: "Nicht meht als 4 Tage wählen",
-  },
-  render: (args) => ({
-    components: { UiDatePicker, UiButton, UiIcon },
-    setup() {
-      return { args };
-    },
-    template: /*html*/ `
-      <UiDatePicker v-bind="args" />
-    `,
-  }),
-};

package/dist/src/components/UiDatePicker/UiDatePicker.vue

@@ -1,418 +0,0 @@
-<template>
-  <div>
-    <VueDatePicker
-      ref="datePicker"
-      v-model="date"
-      :inline="inline"
-      :locale="locale"
-      :teleport="teleport"
-      :timezone="utc ? 'utc' : undefined"
-      :disabled="disabled"
-      :min-date="minDate"
-      :max-date="maxDate"
-      prevent-min-max-navigation
-      transitions
-      :multi-calendars="multiCalendars"
-      :month-picker="monthPicker"
-      :year-range="getYearRange"
-      :auto-apply="autoApply"
-      :config="{
-        monthChangeOnScroll: false,
-        closeOnAutoApply,
-        keepActionRow: !!$slots['action-row'],
-      }"
-      :range="
-        monthPicker
-          ? undefined
-          : {
-              partialRange: false,
-              showLastInRange: false,
-              autoRange,
-              maxRange,
-            }
-      "
-      :floating="{
-        arrow: menuArrow ?? false,
-        flip: autoPosition,
-        shift: autoPosition,
-        placement: 'bottom-start',
-      }"
-      :formats="{
-        month: 'LLLL',
-        input: customFormatCallback ? customFormatCallback : formatInput,
-      }"
-      :time-config="{
-        enableTimePicker,
-      }"
-      :input-attrs="{ clearable: false }"
-      :ui="{
-        calendar: 'calendar-wrapper',
-        navBtnNext: 'nav-btn-next',
-        navBtnPrev: 'nav-btn-prev',
-      }"
-      @open="
-        emit('open');
-        internalIsOpen = true;
-      "
-      @closed="
-        emit('closed');
-        internalIsOpen = false;
-      "
-      @keydown.esc="closeMenu"
-      @range-start="emit('range-start', $event)"
-      @range-end="emit('range-end', $event)"
-    >
-      <template #dp-input="{ value }">
-        <UiButton
-          class="flex justify-between"
-          :class="{
-            'border-neutral-subtle': internalIsOpen,
-            'w-full min-w-0': triggerWidth === 'full',
-            'flex-none': triggerWidth === 'fit',
-          }"
-          :appearance="value ? 'fill-emphasis' : 'outline-subtle'"
-          :disabled
-          size="sm"
-          data-testid="datepicker-trigger"
-        >
-          <div class="flex min-w-0 items-center gap-2">
-            <UiIcon
-              v-if="leftTriggerIcon"
-              class="shrink-0"
-              :name="leftTriggerIcon"
-              size="sm"
-            />
-            <span class="truncate">{{ value || triggerPlaceholderText }}</span>
-          </div>
-          <UiIcon class="shrink-0" name="chevron-down" size="sm" />
-        </UiButton>
-      </template>
-      <template v-if="leftSidebar" #left-sidebar>
-        <div class="flex w-full flex-col gap-y-2 px-6 py-4">
-          <h2
-            class="text-xs/4 font-semibold tracking-wider text-neutral-subtle uppercase"
-          >
-            {{ quickFilterHeadline }}
-          </h2>
-          <div
-            class="flex flex-col flex-nowrap items-start gap-y-2 whitespace-nowrap"
-          >
-            <button
-              v-for="filter in quickFilterRanges"
-              :key="filter.label"
-              :data-testid="filter.label"
-              class="text-sm font-semibold text-neutral-primary hover:text-primary"
-              :class="{ 'text-primary': quickFilterActive(filter.range) }"
-              @click="setQuickFilter(filter)"
-            >
-              {{ filter.label }}
-            </button>
-          </div>
-        </div>
-      </template>
-      <template v-if="$slots['action-row']" #action-row="slotProps">
-        <slot name="action-row" v-bind="slotProps" />
-      </template>
-      <template
-        v-if="$slots['action-extra'] || actionExtraContent"
-        #action-extra="slotProps"
-      >
-        <slot name="action-extra" v-bind="{ ...slotProps, reset }">
-          <div v-if="actionExtraContent">
-            {{ actionExtraContent }}
-          </div>
-        </slot>
-      </template>
-      <template #arrow-left>
-        <UiIcon class="text-neutral-subtle" name="chevron-left" size="sm" />
-      </template>
-      <template #arrow-right>
-        <UiIcon class="text-neutral-subtle" name="chevron-right" size="sm" />
-      </template>
-      <template #arrow>
-        <div ref="menuArrow" class="dp--arrow-top"></div>
-      </template>
-    </VueDatePicker>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { type ActionRowSlotProps, VueDatePicker } from "@vuepic/vue-datepicker";
-import "@vuepic/vue-datepicker/dist/main.css";
-import { format, getYear, type Locale } from "date-fns";
-import { de } from "date-fns/locale";
-import { computed, ref, type ShallowRef, useTemplateRef } from "vue";
-
-import UiButton from "../UiButton/UiButton.vue";
-import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
-
-export interface PresetRange {
-  label: string;
-  range: [Date, Date] | { year: number; month: number };
-  name?: string;
-}
-export type DateType =
-  Date | [Date, Date] | string | { month: number; year: number };
-
-const datePicker =
-  useTemplateRef<InstanceType<typeof VueDatePicker>>("datePicker");
-
-const menuArrow =
-  useTemplateRef<Readonly<ShallowRef<HTMLDivElement>>>("menuArrow");
-
-defineSlots<{
-  "action-row"?: (props: ActionRowSlotProps) => any;
-  "action-extra"?: (props: {
-    selectCurrentDate: () => void;
-    reset: () => void;
-  }) => any;
-}>();
-
-const date = defineModel<DateType>();
-
-const emit = defineEmits<{
-  closed: [];
-  open: [];
-  "range-start": [Date];
-  "range-end": [Date];
-  "quick-filter-changed": [PresetRange];
-}>();
-
-const {
-  autoApply = true,
-  closeOnAutoApply = true,
-  inline = false,
-  disabled = false,
-  locale = de,
-  utc = undefined,
-  teleport = false,
-  minDate = new Date("1948-01-01"),
-  maxDate = undefined,
-  autoRange = undefined,
-  maxRange = undefined,
-  multiCalendars = false,
-  monthPicker = false,
-  enableTimePicker = false,
-  autoPosition = true,
-  triggerPlaceholderText = undefined,
-  customFormatCallback = undefined,
-  leftTriggerIcon = undefined,
-  triggerWidth = "fit",
-  leftSidebar = false,
-  quickFilterHeadline = undefined,
-  quickFilterRanges = [],
-  actionExtraContent = undefined,
-} = defineProps<{
-  autoApply?: boolean;
-  locale?: Locale;
-  disabled?: boolean;
-  minDate?: Date | string | number;
-  maxDate?: Date | string | number;
-  inline?: boolean;
-  teleport?: string | boolean | HTMLElement;
-  monthPicker?: boolean;
-  multiCalendars?: boolean;
-  utc?: boolean;
-
-  // Time Config
-  enableTimePicker?: boolean;
-
-  // Floating Config
-  autoPosition?: boolean;
-
-  // Range Config
-  autoRange?: string | number;
-  maxRange?: string | number;
-
-  // General Config
-  closeOnAutoApply?: boolean;
-
-  // Slots
-  triggerPlaceholderText?: string;
-  triggerWidth?: "full" | "fit";
-  customFormatCallback?: (date: Date | [Date, Date]) => string;
-  leftTriggerIcon?: UiIconName;
-  leftSidebar?: boolean;
-  quickFilterHeadline?: string;
-  quickFilterRanges?: PresetRange[];
-  actionExtraContent?: string;
-}>();
-
-const internalIsOpen = ref(false);
-const getYearRange = computed<[number, number]>(() => {
-  return [getYear(minDate), getYear(maxDate || new Date())];
-});
-
-function closeMenu() {
-  datePicker.value?.closeMenu();
-}
-
-function reset() {
-  date.value = undefined;
-  closeMenu();
-}
-
-function setQuickFilter(value: PresetRange) {
-  date.value = value.range;
-  emit("quick-filter-changed", value);
-  closeMenu();
-}
-
-function isMonthYear(date: DateType): date is { month: number; year: number } {
-  return typeof date === "object" && "month" in date && "year" in date;
-}
-
-function quickFilterActive(
-  quickFilterDate: [Date, Date] | { year: number; month: number },
-) {
-  const internalDate = date.value;
-  if (!internalDate) return false;
-  if (Array.isArray(internalDate) && Array.isArray(quickFilterDate)) {
-    const [start, end] = internalDate;
-    const [quickFilterStart, quickFilterEnd] = quickFilterDate;
-    return (
-      start.toDateString() == quickFilterStart.toDateString() &&
-      end.toDateString() == quickFilterEnd.toDateString()
-    );
-  } else if (isMonthYear(internalDate) && isMonthYear(quickFilterDate)) {
-    return (
-      internalDate.year === quickFilterDate.year &&
-      internalDate.month === quickFilterDate.month
-    );
-  }
-  return false;
-}
-
-function formatMonth(date: Date) {
-  return format(date, "LLLL yyyy", {
-    locale,
-  });
-}
-
-function formatInput(date: Date | [Date, Date]): string {
-  const DATE_FORMAT = "dd.MM.yyyy";
-  if (Array.isArray(date)) {
-    const [start, end] = date;
-    if (start.toISOString() == end.toISOString())
-      return format(start, DATE_FORMAT, { locale });
-    return `${format(start, DATE_FORMAT, { locale })} - ${format(end, DATE_FORMAT, { locale })}`;
-  }
-  return monthPicker ? formatMonth(date) : format(date, "dd.MM.yyyy");
-}
-</script>
-<style>
-@reference "../../tailwindPreset.css";
-
-.dp--arrow-top {
-  left: 10%;
-}
-
-.dp--menu {
-  border-radius: var(--radius-2xl);
-  box-shadow: var(--shadow-lg);
-}
-
-.dp--year-select,
-.dp--month-year-select {
-  border-radius: var(--radius-2xl);
-}
-
-.nav-btn-prev,
-.nav-btn-next {
-  padding: 0.25rem;
-}
-
-.dp--flex-display {
-  gap: 2rem;
-}
-
-.dp--sidebar-left {
-  padding: 0;
-}
-
-.dp--cell-inner {
-  border-radius: calc(infinity * 1px);
-}
-
-.dp--cell-inner:hover {
-  border-radius: calc(infinity * 1px);
-}
-
-.dp--today {
-  border: 1px solid var(--color-neutral-primary);
-}
-
-.dp--cell-auto-range,
-.dp--cell-auto-range-start,
-.dp--cell-auto-range-end {
-  border: none;
-  color: var(--color-neutral-primary);
-  background-color: var(--color-neutral-faint);
-}
-
-.dp--month-year-select {
-  font-size: var(--text-base);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-neutral-primary);
-}
-
-.dp--calendar-header-separator {
-  display: none;
-}
-
-.dp--calendar-header {
-  gap: 0.25rem;
-  align-items: center;
-  font-size: var(--text-xs);
-  color: var(--color-neutral-subtle);
-  font-weight: var(--font-weight-semibold);
-}
-
-.dp--calendar-header-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-neutral-subtle);
-}
-
-.dp--calendar-row {
-  gap: 0.25rem;
-}
-
-.dp--action-row,
-.dp--action-extra {
-  justify-content: end;
-  gap: 1rem;
-  border-top: 1px solid var(--color-neutral-faint);
-  padding: 0.5rem 1rem;
-}
-
-.dp--theme-light {
-  --dp-font-family: var(--font-sans);
-  --dp-month-year-row-height: 2rem; /*Height of the month-year select row*/
-  --dp-button-icon-height: 1.5rem; /*Icon sizing in buttons*/
-  --dp-calendar-header-cell-padding: 0.25rem; /*Adjust padding in calendar header cells*/
-  --dp-menu-padding: 1rem;
-  --dp-cell-size: 2rem; /*Font sizes*/
-  --dp-font-size: var(--text-xs); /*Default font-size*/
-  --dp-background-color: var(--color-surface-level-1);
-  --dp-primary-color: var(--color-primary);
-  --dp-hover-color: var(--color-neutral-faint);
-  --dp-hover-text-color: var(--color-neutral-primary);
-  --dp-hover-icon-color: var(--color-neutral);
-  --dp-primary-disabled-color: var(--color-neutral-soft);
-  --dp-primary-text-color: var(--color-neutral);
-  --dp-secondary-color: oklch(0.82 0.012 264.559);
-  --dp-border-color: var(--color-neutral-pale);
-  --dp-menu-border-color: var(--color-neutral-pale);
-  --dp-range-between-dates-background-color: var(
-    --dp-hover-color,
-    oklch(0.964 0 0)
-  );
-  --dp-range-between-dates-text-color: var(
-    --dp-hover-text-color,
-    var(--color-neutral-primary)
-  );
-  --dp-range-between-border-color: var(--dp-hover-color, oklch(0.964 0 0));
-}
-</style>