@dpa-id-components/dpa-shared-components 20.0.3 → 20.0.5

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.",
-  },
-};

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

@@ -1,160 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiDialog from "./UiDialog.vue";
-
-describe("UiDialog", () => {
-  it("renders dialog with default slot content", () => {
-    const wrapper = mount(UiDialog, {
-      slots: {
-        default: "Default Slot",
-      },
-    });
-
-    expect(wrapper.find("main").text()).toBe("Default Slot");
-  });
-
-  it("renders dialog with header slot content", () => {
-    const wrapper = mount(UiDialog, {
-      slots: {
-        header: "Header Slot",
-        default: "Default Slot",
-      },
-    });
-
-    expect(wrapper.find("header").text()).toBe("Header Slot");
-  });
-
-  it("renders dialog with close button if by prop provided", () => {
-    const wrapper = mount(UiDialog, {
-      slots: {
-        header: "Header Slot",
-        default: "Default Slot",
-      },
-      props: {
-        hasCloseButton: true,
-      },
-    });
-
-    expect(wrapper.find("button")).toBeTruthy();
-  });
-
-  it("renders dialog with footer slot content", () => {
-    const wrapper = mount(UiDialog, {
-      slots: {
-        default: "Default Slot",
-        footer: "Footer Slot",
-      },
-    });
-
-    expect(wrapper.find("footer").text()).toBe("Footer Slot");
-  });
-
-  it("has maximum height set if provided through prop", () => {
-    const wrapper = mount(UiDialog, {
-      slots: {
-        default: "Default Slot",
-      },
-      props: {
-        maxHeight: "100px",
-      },
-    });
-
-    expect(
-      wrapper
-        .find('[data-testid="container"]')
-        .attributes()
-        .style.includes("max-height: 100px;"),
-    ).toBeTruthy();
-  });
-
-  it("has maximum width set if provided through prop", () => {
-    const wrapper = mount(UiDialog, {
-      slots: {
-        default: "Default Slot",
-      },
-      props: {
-        maxWidth: "700px",
-      },
-    });
-
-    expect(
-      wrapper
-        .find('[data-testid="container"]')
-        .attributes()
-        .style.includes("max-width: 700px;"),
-    ).toBeTruthy();
-  });
-
-  it("is scrollable through prop", () => {
-    const wrapper = mount(UiDialog, {
-      slots: {
-        default: "Default Slot",
-      },
-      props: {
-        scrollable: true,
-      },
-    });
-
-    expect(wrapper.find('[data-testid="container"]').classes()).toContain(
-      "overflow-y-auto",
-    );
-  });
-
-  it("fires 'close' event when background is clicked", async () => {
-    const wrapper = mount(UiDialog, {
-      slots: {
-        default: "Default Slot",
-      },
-      props: {
-        closeOnClickOutside: true,
-      },
-    });
-    const bg = wrapper.find('[data-testid="background"]');
-
-    await bg.trigger("click");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted().close).toBeTruthy();
-  });
-
-  it("fires 'close' event when close button is clicked", async () => {
-    const wrapper = mount(UiDialog, {
-      slots: {
-        header: "Header Slot",
-        default: "Default Slot",
-      },
-      props: {
-        hasCloseButton: true,
-      },
-    });
-    const btn = wrapper.find("button");
-
-    await btn.trigger("click");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted().close).toBeTruthy();
-  });
-
-  it("fires 'close' event when esc key is pressed and prop is set", async () => {
-    // Workaround to make events on `Document` Level work. See: https://test-utils.vuejs.org/api/#attachTo
-
-    document.body.innerHTML = `
-  <div>
-    <div id="app"></div>
-  </div>
-`;
-
-    const wrapper = mount(UiDialog, {
-      attachTo: "#app",
-      slots: {
-        header: "Header Slot",
-        default: "Default Slot",
-      },
-      props: {
-        closeOnEsc: true,
-      },
-    });
-    await wrapper.trigger("keyup.Escape");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted().close).toBeTruthy();
-  });
-});

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

@@ -1,79 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
-
-import UiDialog from "./UiDialog.vue";
-
-const meta = {
-  title: "Ui/UiDialog",
-  component: UiDialog,
-  argTypes: {
-    scrollable: { control: "boolean" },
-    roundedBorder: { control: "boolean" },
-    hasPaddingX: { control: "boolean" },
-    hasPaddingY: { control: "boolean" },
-    hasCloseButton: { control: "boolean" },
-    maxHeight: { control: "text" },
-    maxWidth: { control: "text" },
-    headerClasses: { control: "text" },
-    mainClasses: { control: "text" },
-    closeOnClickOutside: { control: "boolean" },
-    positionTop: {
-      control: "select",
-      options: ["50%", "20%", "40%"],
-    },
-  },
-  args: {
-    scrollable: false,
-    roundedBorder: false,
-    hasPaddingX: true,
-    hasPaddingY: true,
-    hasCloseButton: true,
-    maxHeight: "",
-    maxWidth: "600px",
-    headerClasses: "",
-    mainClasses: "",
-    closeOnClickOutside: true,
-    positionTop: "50%",
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiDialog },
-    template:
-      "<UiDialog v-bind='args' @close='close'>" +
-      "<template #header>Dialog header</template>" +
-      "Dialog main" +
-      "<template #footer>Dialog footer</template>" +
-      "</UiDialog>",
-    methods: {
-      close: action("close"),
-    },
-  }),
-} satisfies Meta<typeof UiDialog>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Scrollable: Story = {
-  args: {
-    scrollable: true,
-    maxHeight: "100px",
-  },
-};
-
-export const RoundedBorder: Story = {
-  args: {
-    roundedBorder: true,
-  },
-};
-
-export const CustomClasses: Story = {
-  args: {
-    headerClasses: "bg-transparent",
-    mainClasses:
-      "h-16 flex flex-row justify-center items-center bg-green-night text-white mx-4 rounded-lg",
-  },
-};

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

@@ -1,17 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiFilterBadge from "./UiFilterBadge.vue";
-describe("UiFilterBadge", () => {
-  it("renders with colors set", () => {
-    const wrapper = mount(UiFilterBadge, {
-      props: {
-        color: "#000",
-        fill: "#fff",
-      },
-    });
-    expect(wrapper.attributes().style).toBe("color: rgb(255, 255, 255);");
-    const innerText = wrapper.find('[data-testid="innerText"]');
-    expect(innerText.attributes().style).toBe("color: rgb(0, 0, 0);");
-  });
-});

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

@@ -1,44 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiIconButton from "../UiIconButton/UiIconButton.vue";
-import UiFilterBadge from "./UiFilterBadge.vue";
-
-const meta = {
-  title: "Ui/UiFilterBadge",
-  component: UiFilterBadge,
-  argTypes: {
-    size: {
-      control: "select",
-      options: ["small", "medium", "large", "xl"],
-    },
-    color: {
-      control: "color",
-    },
-    fill: {
-      control: "color",
-    },
-    iconIsFilled: {
-      control: "boolean",
-    },
-  },
-  args: {
-    size: "medium",
-    color: "#666",
-    fill: "#666",
-    iconIsFilled: true,
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiFilterBadge, UiIconButton },
-    template: "<UiFilterBadge v-bind='args'> slot </UiFilterBadge>",
-  }),
-} satisfies Meta<typeof UiFilterBadge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithIsOutlined: Story = { args: { iconIsFilled: false } };

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

@@ -1,41 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiFilterBadgeButton from "./UiFilterBadgeButton.vue";
-
-describe("UiFilterBadgeButton", () => {
-  it("renders with colors set", () => {
-    const wrapper = mount(UiFilterBadgeButton, {
-      props: {
-        color: "#000",
-        fill: "#fff",
-        label: "Foo",
-      },
-    });
-    expect(wrapper.attributes().style).toBe("color: rgb(255, 255, 255);");
-    const innerText = wrapper.find('[data-testid="labelText"]');
-    expect(innerText.attributes().style).toBe("color: rgb(0, 0, 0);");
-  });
-
-  it("renders the label correctly", () => {
-    const wrapper = mount(UiFilterBadgeButton, {
-      props: {
-        label: "Foo",
-      },
-    });
-
-    expect(wrapper.text()).toBe("Foo");
-  });
-
-  it("should emit click event when clicked", async () => {
-    const wrapper = mount(UiFilterBadgeButton, {
-      props: {
-        label: "Foo",
-      },
-    });
-    const label = wrapper.find('[data-testid="labelText"]');
-    await label.trigger("click");
-
-    expect(wrapper.emitted().click).toBeTruthy();
-  });
-});

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

@@ -1,55 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
-
-import UiIconButton from "../UiIconButton/UiIconButton.vue";
-import UiFilterBadgeButton from "./UiFilterBadgeButton.vue";
-
-const meta = {
-  title: "Ui/UiFilterBadgeButton",
-  component: UiFilterBadgeButton,
-  argTypes: {
-    color: {
-      control: "color",
-      defaultValue: "#666",
-    },
-    fill: {
-      control: "color",
-      defaultValue: "#666",
-    },
-    iconIsFilled: {
-      control: "boolean",
-      defaultValue: true,
-    },
-    label: {
-      control: "text",
-      defaultValue: "Example Label",
-    },
-    isActive: {
-      control: "boolean",
-      defaultValue: false,
-    },
-  },
-  args: {
-    color: "#666",
-    fill: "#666",
-    iconIsFilled: true,
-    label: "Example Label",
-    isActive: false,
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiFilterBadgeButton, UiIconButton },
-    template:
-      "<UiFilterBadgeButton v-bind='args' @click='click'>  <UiIconButton  icon-color='gray' background-color='none' icon-name='more-horizontal'/> </UiFilterBadgeButton>",
-    methods: {
-      click: action("click"),
-    },
-  }),
-} satisfies Meta<typeof UiFilterBadgeButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};