@dpa-id-components/dpa-shared-components 20.0.4 → 20.0.6

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

@@ -1,335 +0,0 @@
-import { flushPromises, mount } from "@vue/test-utils";
-import {
-  addMonths,
-  differenceInDays,
-  endOfMonth,
-  endOfYear,
-  format,
-  isToday,
-  startOfMonth,
-  startOfYear,
-  subMonths,
-  subYears,
-} from "date-fns";
-import { de } from "date-fns/locale";
-import { describe, expect, it } from "vitest";
-
-import UiDatePicker, { type PresetRange } from "./UiDatePicker.vue";
-const callback = (value: Date | [Date, Date]): string => {
-  if (!Array.isArray(value)) {
-    return "";
-  }
-
-  const difference = differenceInDays(value[0], value[1]);
-  if (difference === 0 && isToday(value[0])) {
-    return "Heute";
-  }
-
-  return "";
-};
-
-const quickfilterDateRanges: PresetRange[] = [
-  {
-    label: "Heute",
-    range: [new Date(), new Date()],
-    name: "today",
-  },
-  {
-    label: "Dieser Monat",
-    range: [startOfMonth(new Date()), new Date()],
-    name: "this_month",
-  },
-  {
-    label: "Dieses Jahr",
-    range: [startOfYear(new Date()), new Date()],
-    name: "this_year",
-  },
-  {
-    label: "Letzter Monat",
-    range: [
-      startOfMonth(subMonths(new Date(), 1)),
-      endOfMonth(subMonths(new Date(), 1)),
-    ],
-    name: "last_month",
-  },
-  {
-    label: "Letztes Jahr",
-    range: [
-      startOfYear(subYears(new Date(), 1)),
-      endOfYear(subYears(new Date(), 1)),
-    ],
-    name: "last_year",
-  },
-  {
-    label: "Gesamte Zeit",
-    range: [new Date("01.01.2020"), new Date()],
-    name: "whole_time",
-  },
-];
-
-describe("Datepicker", () => {
-  const wrapper = mount(UiDatePicker, {
-    props: {
-      quickFilterRanges: quickfilterDateRanges,
-      quickFilterHeadline: "SCHNELLFILTER",
-    },
-  });
-
-  it("renders Datepicker", () => {
-    expect(wrapper.html()).toContain("desktop-datepicker");
-  });
-
-  it("should emit a open event", async () => {
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    expect(wrapper.emitted()).toHaveProperty("open");
-  });
-
-  it("should emit a close event", async () => {
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    expect(wrapper.emitted()).toHaveProperty("close");
-    //click on input to open modal again
-    await wrapper.find("#desktop-datepicker").trigger("click");
-  });
-
-  it("should show cta-area when open ", async () => {
-    await wrapper.setProps({ actionArea: true });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    expect(wrapper.find("dp__action_row"));
-    await wrapper.setProps({ actionArea: false });
-    expect(wrapper.find("dp__action_row").exists()).toBe(false);
-    //click on input to close modal again
-    await wrapper.find("#desktop-datepicker").trigger("click");
-  });
-
-  it("should show quickfilters when open ", async () => {
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    expect(wrapper.find("dp__sidebar_left"));
-    expect(wrapper.html()).toContain("SCHNELLFILTER");
-    await wrapper.setProps({ leftSidebar: false });
-    expect(wrapper.find("dp__sidebar_left").exists()).toBe(false);
-    //click on input to close modal again
-    await wrapper.find("#desktop-datepicker").trigger("click");
-  });
-
-  it("shows current and next month by default ", async () => {
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    const now = new Date();
-
-    const nameOfMonth = format(now, "LLL", { locale: de });
-    const nameOfNextMonth = format(addMonths(now, 1), "LLL", { locale: de });
-    wrapper.find(nameOfMonth);
-    wrapper.find(nameOfNextMonth);
-  });
-});
-
-describe("Datepicker Quickfilter", () => {
-  it("should emit range for Heute Quickfilter", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-      },
-    });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Heute']").trigger("click");
-    expect(wrapper.emitted()["quickfilter-changed"][0]).toStrictEqual([
-      quickfilterDateRanges[0],
-    ]);
-  });
-
-  it("should work without custom formatter function", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        quickFilterRanges: quickfilterDateRanges,
-      },
-    });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Heute']").trigger("click");
-    expect(wrapper.emitted()["quickfilter-changed"][0]).toEqual([
-      quickfilterDateRanges[0],
-    ]);
-  });
-
-  it("should emit range for Diesen Monat Quickfilter", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-      },
-    });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Dieser Monat']").trigger("click");
-    expect(wrapper.emitted()["quickfilter-changed"][0]).toEqual([
-      quickfilterDateRanges[1],
-    ]);
-  });
-
-  it("should emit range for Dieses Jahr Quickfilter", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-      },
-    });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Dieses Jahr']").trigger("click");
-
-    expect(wrapper.emitted()["quickfilter-changed"][0]).toEqual([
-      quickfilterDateRanges[2],
-    ]);
-  });
-
-  it("should emit range for Letzter Monat Quickfilter", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-      },
-    });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Letzter Monat']").trigger("click");
-
-    expect(wrapper.emitted()["quickfilter-changed"][0]).toEqual([
-      quickfilterDateRanges[3],
-    ]);
-  });
-
-  it("should emit range for Letztes Jahr Quickfilter", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-      },
-    });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Letztes Jahr']").trigger("click");
-
-    expect(wrapper.emitted()["quickfilter-changed"][0]).toEqual([
-      quickfilterDateRanges[4],
-    ]);
-  });
-
-  it("should emit range for Gesamte Zeit Quickfilter", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-      },
-    });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Gesamte Zeit']").trigger("click");
-    expect(wrapper.emitted()["quickfilter-changed"][0]).toEqual([
-      quickfilterDateRanges[5],
-    ]);
-  });
-
-  it("should set the selected quickfilter as the input label", async () => {
-    const formattedDate = format(new Date(), "dd.MM.yyyy");
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        quickFilterRanges: quickfilterDateRanges,
-      },
-    });
-    const inputButton = wrapper.get("#desktop-datepicker");
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Heute']").trigger("click");
-    expect(inputButton.text()).toBe(`${formattedDate}-${formattedDate}`);
-  });
-});
-
-describe("custom date formatter", () => {
-  it("should format selected date according to provided formatter function for input box ui", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-        roundedEdges: false,
-      },
-    });
-
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Heute']").trigger("click");
-    expect(wrapper.find("input").element.value).toBe("Heute");
-  });
-
-  it("should format selected date according to provided formatter function for filter button ui", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-        roundedEdges: true,
-      },
-    });
-
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Heute']").trigger("click");
-    expect(wrapper.find("[data-testid='filterbutton-title']").text()).toBe(
-      "Heute",
-    );
-  });
-});
-
-describe("Action Area content", function () {
-  it("Should show string when prop is set and no slot", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        actionAreaExtraContent: "Test to show string",
-      },
-    });
-
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    const actionArea = wrapper.find(".dp__action_extra");
-    expect(actionArea.text()).toBe("Test to show string");
-  });
-
-  it("Show override Text when slot actionArea is used and prop is set", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        actionAreaExtraContent: "Test to show string",
-      },
-      slots: {
-        actionArea: "This is another string",
-      },
-    });
-
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    const actionArea = wrapper.find(".dp__action_extra");
-    expect(actionArea.text()).not.toBe("Test to show string");
-    expect(actionArea.text()).toBe("This is another string");
-  });
-
-  it("should be empty when neither prop or slot is set", async () => {
-    const wrapper = mount(UiDatePicker, {});
-
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    const actionArea = wrapper.find(".dp__action_extra");
-    expect(actionArea.text()).toBe("");
-  });
-});

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

@@ -1,273 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import {
-  addDays,
-  addYears,
-  differenceInDays,
-  endOfDay,
-  endOfMonth,
-  endOfYear,
-  isToday,
-  isYesterday,
-  startOfDay,
-  startOfMonth,
-  startOfYear,
-  subMonths,
-  subYears,
-} from "date-fns";
-
-import { icons } from "../UiIcon/icons.js";
-import UiDatePicker from "./UiDatePicker.vue";
-
-const singleDate = "2022-03-07T23:00:00.000Z";
-const dateRange = ["2022-03-07T23:00:00.000Z", "2022-03-11T23:00:00.000Z"];
-const callback = (date: Date | [Date, Date]): string => {
-  if (!Array.isArray(date)) {
-    return "";
-  }
-
-  const difference = differenceInDays(date[0], date[1]);
-  if (difference === 0 && isToday(date[0])) {
-    return "Heute";
-  }
-  if (difference === 0 && isYesterday(date[0])) {
-    return "Gestern";
-  }
-  if (difference === 0 && isToday(addDays(date[0], 2))) {
-    return "Vorgestern";
-  }
-  if (isToday(date[1]) && differenceInDays(date[0], new Date()) <= 7) {
-    return "Letzte " + differenceInDays(new Date(), date[0]) + " Tage";
-  }
-
-  return "";
-};
-
-const meta = {
-  title: "UI/UiDatePicker",
-  component: UiDatePicker,
-  argTypes: {
-    monthPicker: {
-      control: "boolean",
-    },
-    activeState: {
-      control: "boolean",
-    },
-    disabledState: {
-      control: "boolean",
-    },
-    quickFilterHeadline: {
-      control: "text",
-    },
-    inputLabel: {
-      control: "text",
-    },
-    maxRange: {
-      control: "number",
-    },
-    cancel: {
-      control: "text",
-    },
-    submit: {
-      control: "text",
-    },
-    actionArea: {
-      control: "boolean",
-    },
-    leftSidebar: {
-      control: "boolean",
-    },
-    multiCalendars: {
-      control: "boolean",
-    },
-    definesRange: {
-      control: "boolean",
-    },
-    enableTimePicker: {
-      control: "boolean",
-    },
-    roundedEdges: {
-      control: "boolean",
-    },
-    autoApply: {
-      control: "boolean",
-    },
-    autoPosition: {
-      control: "boolean",
-    },
-    closeOnAutoApply: {
-      control: "boolean",
-    },
-    placeholderText: {
-      control: "text",
-    },
-    enableQuickfilterToggle: {
-      control: "boolean",
-    },
-    selectedDate: {
-      control: "select",
-      options: [dateRange, undefined],
-    },
-    quickFilterRanges: { table: { disable: true } },
-    autoRange: {
-      control: "select",
-      options: [1, 2, 3, 4, 5, 6],
-    },
-    iconLeft: {
-      control: "select",
-      options: Object.keys(icons),
-    },
-  },
-  args: {
-    monthPicker: false,
-    activeState: false,
-    quickFilterHeadline: "SCHNELLFILTER",
-    cancel: "Abbrechen",
-    submit: "Anwenden",
-    inputLabel: "Datum",
-    minDate: new Date("1948-01-01"),
-    maxDate: undefined,
-    maxRange: undefined,
-    actionArea: false,
-    leftSidebar: false,
-    multiCalendars: false,
-    definesRange: false,
-    closeOnAutoApply: false,
-    enableTimePicker: false,
-    roundedEdges: true,
-    autoApply: true,
-    autoPosition: true,
-    placeholderText: "ab heute",
-    selectedDate: singleDate,
-    autoRange: undefined,
-    customFormatCallback: () => "",
-    iconLeft: null,
-    enableQuickfilterToggle: false,
-  },
-  render: (args) => ({
-    components: { UiDatePicker },
-    setup() {
-      return { args };
-    },
-    template: `
-      <UiDatePicker
-        v-bind="args"
-      />`,
-  }),
-} satisfies Meta<typeof UiDatePicker>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const AsPredefinedRangepicker: Story = {
-  args: {
-    definesRange: true,
-    autoRange: 4,
-    selectedDate: [new Date(), addDays(new Date(), 4)],
-  },
-};
-
-export const AsRangepickerWithMenu: Story = {
-  args: {
-    definesRange: true,
-    selectedDate: [new Date(), addYears(new Date(), 10)],
-    leftSidebar: true,
-    multiCalendars: true,
-    enableQuickfilterToggle: true,
-    quickFilterRanges: [
-      {
-        label: "Heute",
-        range: [startOfDay(new Date()), endOfDay(new Date())],
-        isSelected: true,
-      },
-      {
-        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)),
-        ],
-      },
-      {
-        label: "Letztes Jahr",
-        range: [
-          startOfYear(subYears(new Date(), 1)),
-          endOfYear(subYears(new Date(), 1)),
-        ],
-      },
-      {
-        label: "Gesamte Zeit",
-        range: [new Date("01.01.2020"), endOfDay(addYears(new Date(), 10))],
-      },
-    ],
-  },
-};
-
-export const MonthPicker: Story = {
-  args: {
-    definesRange: false,
-    monthPicker: true,
-    multiCalendars: false,
-    iconLeft: "event",
-  },
-};
-
-export const WithCustomDateFormat: Story = {
-  args: {
-    definesRange: true,
-    minDate: new Date("2022-05-01"),
-    maxRange: 7,
-    placeholderText: "Datum auswählen",
-    selectedDate: "",
-    customFormatCallback: callback,
-  },
-};
-
-export const WithCustomDateFormatAndInput: Story = {
-  args: {
-    definesRange: true,
-    minDate: new Date("2022-05-01"),
-    maxRange: 7,
-    placeholderText: "Datum auswählen",
-    selectedDate: "",
-    roundedEdges: false,
-    customFormatCallback: callback,
-  },
-};
-
-export const WithActionArea: Story = {
-  args: {
-    cancel: "Abbrechen",
-    submit: "Abschicken",
-    actionArea: true,
-    autoApply: false,
-    selectedDate: singleDate,
-  },
-};
-
-export const AsInputBox: Story = {
-  args: {
-    definesRange: true,
-    inputLabel: "Datum",
-    roundedEdges: false,
-    selectedDate: [new Date(), new Date()],
-  },
-};
-
-export const WithExtraFooterContent: Story = {
-  args: {
-    definesRange: true,
-    autoRange: 4,
-    multiCalendars: true,
-    selectedDate: [new Date(), addDays(new Date(), 4)],
-    actionAreaExtraContent: "Bitte nur maximal 4 Tage auswählen.",
-  },
-};