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

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

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiList from "../UiList/UiList.vue";
-import UiListItem from "../UiListItem/UiListItem.vue";
-import UiOverlayMenu from "./UiOverlayMenu.vue";
-
-const meta = {
-  title: "Ui/UiOverlayMenu",
-  component: UiOverlayMenu,
-  subcomponents: { UiList, UiListItem },
-  argTypes: {
-    isOpen: {
-      control: "boolean",
-    },
-  },
-  args: {
-    isOpen: true,
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiOverlayMenu, UiList, UiListItem },
-    template:
-      "<UiOverlayMenu v-bind='args'>" +
-      "<UiList>" +
-      "<UiListItem checkBoxMenu='true'>Test</UiListItem>" +
-      "<UiListItem checkBoxMenu='true'>Test</UiListItem>" +
-      "<UiListItem checkBoxMenu='true'>Test</UiListItem>" +
-      "</UiList>" +
-      "</UiOverlayMenu>",
-  }),
-  tags: ["deprecated"],
-} satisfies Meta<typeof UiOverlayMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

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

@@ -1,66 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiRadioInput from "./UiRadioInputGroup.vue";
-
-describe("UiRadioInput", () => {
-  it("renders UiRadioInputGroup with props content", () => {
-    const wrapper = mount(UiRadioInput, {
-      props: {
-        options: [
-          {
-            label: "default name",
-            selected: false,
-            value: "default value",
-          },
-        ],
-        groupName: "Options",
-      },
-    });
-    expect(wrapper.text()).toBe("default name");
-  });
-
-  it("should click change value", async () => {
-    const wrapper = mount(UiRadioInput, {
-      props: {
-        modelValue: "default value",
-        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
-        options: [
-          {
-            label: "default name",
-            selected: true,
-            value: "default value",
-          },
-          {
-            label: "second option",
-            selected: false,
-            value: "second option",
-          },
-        ],
-        groupName: "Options",
-      },
-    });
-
-    await wrapper.find("input[value='second option']").setValue(true);
-    expect(wrapper.props("modelValue")).toBe("second option");
-  });
-
-  it("renders attributes on correct element", () => {
-    const wrapper = mount(UiRadioInput, {
-      props: {
-        options: [],
-        groupName: "",
-        id: "id",
-        class: "testClass gap-8",
-        "data-testid": "testId",
-      },
-    });
-
-    const root = wrapper.find(":first-child");
-    expect(root.attributes("id")).toBe("id");
-    expect(root.element.classList.contains("testClass")).toBe(true);
-    expect(root.element.classList.contains("gap-4")).toBe(false);
-    expect(root.element.classList.contains("gap-8")).toBe(true);
-    expect(root.attributes("data-testid")).toBe("testId");
-  });
-});

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

@@ -1,70 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
-
-import UiRadioInputGroup from "./UiRadioInputGroup.vue";
-
-const meta = {
-  title: "Ui/UiRadioInputGroup",
-  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
-  component: UiRadioInputGroup,
-  argTypes: {
-    options: {
-      control: "object",
-    },
-    variant: {
-      control: "select",
-      options: ["blue", "gray"],
-    },
-    size: {
-      control: "select",
-      options: ["small", "medium"],
-    },
-    direction: {
-      control: "select",
-      options: ["horizontal", "vertical"],
-    },
-    disabled: { control: "boolean" },
-    groupName: { control: "text" },
-    class: { control: "text" },
-  },
-  args: {
-    options: [
-      {
-        label: "Option A",
-        value: "value 1",
-        selected: true,
-      },
-      {
-        label: "Option B",
-        value: "value 2",
-        selected: false,
-      },
-      {
-        label: "Option C",
-        value: "value 3",
-        selected: false,
-      },
-    ],
-    variant: "blue",
-    size: "medium",
-    direction: "horizontal",
-    disabled: false,
-    groupName: "default",
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiRadioInputGroup },
-    template:
-      "<UiRadioInputGroup v-bind='args' @input='input'></UiRadioInputGroup>",
-    methods: { input: action("input") },
-  }),
-  tags: ["deprecated"],
-} satisfies Meta<typeof UiRadioInputGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-// TODO: Remove this again once possible.
-// @ts-ignore Bogus TypeScript error
-export const Default: Story = {};

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

@@ -1,82 +0,0 @@
-import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiSearchBar from "./UiSearchBar.vue";
-
-function createWrapper(
-  options: ComponentMountingOptions<typeof UiSearchBar> = {},
-) {
-  return mount(UiSearchBar, {
-    ...options,
-  });
-}
-
-describe("UiSearchBar", () => {
-  it("renders the placeholder", () => {
-    const placeholder = "Example query";
-    const wrapper = createWrapper({ props: { placeholder } });
-
-    const textInput = wrapper.find("input");
-    expect(textInput.element.placeholder).toBe(placeholder);
-  });
-
-  it("renders the value", async () => {
-    const wrapper = createWrapper();
-
-    const searchQuery = "Ein Suchbegriff";
-    const textInput = wrapper.find("input");
-    await textInput.setValue(searchQuery);
-    expect(wrapper.emitted()["update:modelValue"]).toBeTruthy();
-    expect(textInput.element.value).toBe(searchQuery);
-  });
-
-  it("emits focus event", async () => {
-    const wrapper = createWrapper();
-
-    const textInput = wrapper.find("input");
-    await textInput.trigger("focus");
-    expect(wrapper.emitted("focus")).toBeTruthy();
-  });
-
-  it("emits blur event", async () => {
-    const wrapper = createWrapper();
-
-    const textInput = wrapper.find("input");
-    await textInput.trigger("blur");
-    expect(wrapper.emitted("blur")).toBeTruthy();
-  });
-
-  it("renders slots", () => {
-    const wrapper = createWrapper({
-      props: {
-        modelValue: "Test",
-        placeholder: "Suchen",
-        backgroundColor: "gray",
-        hiddenFilterRules: 0,
-        isFilterChipEditable: true,
-      },
-      slots: {
-        searchCriteriaButton: "<button>+ 1 Suchkriterium</button>",
-        extendedSearchButton: "<button>Erweiterte Suche</button>",
-        nonEditableChips: "<p>Favorite</p>",
-        editableChips: "<p>Hamburg</p>",
-      },
-    });
-    expect(wrapper.html()).toContain("<button>+ 1 Suchkriterium</button>");
-    expect(wrapper.html()).toContain("<button>Erweiterte Suche</button>");
-    expect(wrapper.html()).toContain("<p>Favorite</p>");
-    expect(wrapper.html()).toContain("<p>Hamburg</p>");
-  });
-
-  it("can clear input value by setting modelValue to empty string (bug fix)", async () => {
-    const wrapper = createWrapper();
-    const input = wrapper.find("input");
-    expect(input.element.value).toBe("");
-
-    await input.setValue("test");
-    expect(input.element.value).toBe("test");
-
-    await wrapper.setProps({ modelValue: "" });
-    expect(input.element.value).toBe("");
-  });
-});

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

@@ -1,191 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiButton from "../UiButton/UiButton.vue";
-import UiChip from "../UiChip/UiChip.vue";
-import UiIcon from "../UiIcon/UiIcon.vue";
-import UiIconButton from "../UiIconButton/UiIconButton.vue";
-import UiSearchBar from "./UiSearchBar.vue";
-
-type PropsAndStoryProps = InstanceType<typeof UiSearchBar> & {
-  hiddenFilterRules: number;
-};
-
-const meta = {
-  title: "Ui/UiSearchBar",
-  component: UiSearchBar,
-  argTypes: {
-    modelValue: { control: "text" },
-    placeholder: { control: "text" },
-    backgroundColor: {
-      control: "select",
-      options: ["gray", "white"],
-    },
-    hiddenFilterRules: { control: "number" },
-    isFilterChipEditable: { control: "boolean" },
-    hasShadow: { control: "boolean" },
-    slotClass: { control: "text" },
-    resetButtonWrapperClass: { control: "text" },
-  },
-  args: {
-    modelValue: "",
-    placeholder: "Suchen",
-    backgroundColor: "gray",
-    hiddenFilterRules: 0,
-    isFilterChipEditable: true,
-    hasShadow: false,
-    slotClass: "",
-    resetButtonWrapperClass: "",
-  },
-} satisfies Meta<PropsAndStoryProps>;
-
-export default meta;
-type Story = StoryObj<PropsAndStoryProps>;
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { UiSearchBar },
-    setup() {
-      return { args };
-    },
-    template:
-      "<div class='bg-white h-24 flex items-center p-4 w-full'><UiSearchBar v-bind='args'></UiSearchBar></div>",
-  }),
-};
-
-export const WithActionButtons: Story = {
-  render: (args) => ({
-    components: {
-      UiSearchBar,
-      UiButton,
-      UiIconButton,
-      UiIcon,
-    },
-    setup() {
-      const getLabelText = (num: number) => {
-        if (!num) {
-          return "";
-        }
-        if (num > 1) {
-          return `+ ${num} Suchkriterien`;
-        }
-        return "+ 1 Suchkriterium";
-      };
-      const criteriaLabelText = () => {
-        return getLabelText(args.hiddenFilterRules);
-      };
-      return { args, criteriaLabelText };
-    },
-    template: `
-      <div class="bg-white h-24 flex items-center p-4 w-full">
-      <UiSearchBar v-bind="args">
-        <template #searchCriteriaButton>
-          <div class="mr-2">
-            <span
-              v-if="criteriaLabelText"
-              class="
-                self-center
-                mr-1
-                text-xs
-                font-medium
-                whitespace-no-wrap
-                cursor-pointer
-                text-blue
-                hover:text-blue-dark
-              "
-            >
-              {{ criteriaLabelText() }}
-            </span>
-          </div>
-        </template>
-        <template #extendedSearchButton>
-          <UiButton
-            size="xs"
-            class="border-none mr-1 font-semibold text-gray-800 hover:text-blue-default"
-            color="transparent"
-
-          >
-            Erweiterte Suche
-            <UiIcon
-              name="chevron-down"
-              size="medium"
-            />
-          </UiButton>
-        </template>
-        <template #resetButton>
-          <div class="mx-2">
-            <div
-              class="
-                flex
-                items-center
-                justify-center
-                flex-none
-                h-full
-                bg-gray-100
-              "
-            >
-              <UiIconButton icon-name="close" background-color="none" icon-color="gray" size="large" />
-            </div>
-          </div>
-        </template>
-        <template #searchButton>
-          <div class="flex items-center justify-center">
-            <div class="w-2 h-8 border-l border-gray-300"></div>
-            <UiIconButton icon-name="search" background-color="none" icon-color="gray" size="large" />
-          </div>
-        </template>
-      </UiSearchBar>
-      </div>`,
-  }),
-};
-
-export const WithChips: Story = {
-  render: (args) => ({
-    components: {
-      UiSearchBar,
-      UiButton,
-      UiIconButton,
-      UiIcon,
-      UiChip,
-    },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="bg-white h-24 flex items-center p-4 w-full">
-      <UiSearchBar v-bind="args">
-        <template #nonEditableChips>
-          <UiChip v-if="!args.isFilterChipEditable" class="ml-2">
-            <UiIcon
-              name="pin"
-              size="small"
-              class="mr-2"
-            />
-            <span class="text-small">Nur Top-Einträge</span>
-            <UiIconButton icon-name="close" background-color="none" icon-color="gray" size="small"
-                          class="hover:bg-gray-400 active:bg-gray-500 ml-1" />
-          </UiChip>
-        </template>
-        <template #editableChips>
-          <UiChip v-if="args.value" class="ml-2">
-            <span class="text-small">{{ args.value }}</span>
-            <UiIconButton icon-name="close" background-color="none" icon-color="gray" size="small"
-                          class="hover:bg-gray-400 active:bg-gray-500 ml-1" />
-          </UiChip>
-        </template>
-        <template #extendedSearchButton>
-          <UiButton
-            size="xs"
-            class="border-none mr-1 font-semibold text-gray-800 hover:text-blue-default"
-            color="transparent"
-          >
-            Erweiterte Suche
-            <UiIcon
-              name="chevron-down"
-              size="medium"
-            />
-          </UiButton>
-        </template>
-      </UiSearchBar>
-      </div>`,
-  }),
-};

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

@@ -1,45 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiSearchInput from "./UiSearchInput.vue";
-
-describe("UiSearchInput", () => {
-  const wrapper = mount(UiSearchInput, {
-    props: {
-      hasAddEntryOption: true,
-      placeholder: "Default placeholder",
-      modelValue: [""],
-    },
-  });
-
-  it("displays and emits entries", async () => {
-    const searchQuery = "Suchbegriff";
-    const textInput = wrapper.find("input");
-    await textInput.setValue(searchQuery);
-    expect(wrapper.emitted().input).toBeTruthy();
-    expect(textInput.element.value).toBe(searchQuery);
-  });
-
-  it("adds searchbar row when addRow button is clicked", async () => {
-    const searchQuery = "Suchbegriff";
-    const textInput = wrapper.find("input");
-    await textInput.setValue(searchQuery);
-    await textInput.trigger("input");
-    const addRowButton = wrapper.find("button");
-    await addRowButton.trigger("click");
-    expect(wrapper.findAll("input")).toHaveLength(2);
-  });
-
-  it("deletes second row when there is no text in the searchbar", async () => {
-    const searchQuery = "Suchbegriff";
-    const textInput = wrapper.find("input");
-    await textInput.setValue(searchQuery);
-    await textInput.trigger("input");
-    const addRowButton = wrapper.find("button");
-    await addRowButton.trigger("click");
-
-    const [, secondInput] = wrapper.findAll("input");
-    await secondInput.trigger("keyup.delete");
-    expect(wrapper.findAll("input")).toHaveLength(1);
-  });
-});

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

@@ -1,61 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
-
-import UiSearchInput from "./UiSearchInput.vue";
-
-const meta = {
-  title: "Ui/UiSearchInput",
-  component: UiSearchInput,
-  argTypes: {
-    hasAddEntryOption: {
-      control: "boolean",
-    },
-    label: {
-      control: "text",
-    },
-    modelValue: {
-      control: {
-        type: "object",
-      },
-    },
-    placeholder: {
-      control: "text",
-    },
-  },
-  args: {
-    hasAddEntryOption: false,
-    label: "",
-    modelValue: [""],
-    placeholder: "Default placeholder",
-  },
-  parameters: {
-    backgrounds: { default: "white" },
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiSearchInput },
-    template:
-      "<UiSearchInput v-bind='args' :model-value='args.modelValue' @update:model-value='action' />",
-    methods: { action: action("update:modelValue") },
-  }),
-} satisfies Meta<typeof UiSearchInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithLabel = {
-  args: {
-    label: "Default label",
-  },
-};
-
-export const MultipleInputs = {
-  args: {
-    label: "Default label",
-    hasAddEntryOption: true,
-  },
-};

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

@@ -1,49 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiSection from "./UiSection.vue";
-
-describe("UiSection", () => {
-  const wrapper = mount(UiSection, {
-    slots: {
-      default: "Slot text",
-    },
-  });
-
-  it("renders with slot content", () => {
-    const inner = wrapper.find('[data-testid="inner"]');
-
-    expect(inner.text()).toBe("Slot text");
-  });
-
-  it("renders with border classes", async () => {
-    await wrapper.setProps({
-      borderTop: true,
-      borderBottom: true,
-    });
-    expect(wrapper.classes("border-t")).toBe(true);
-    expect(wrapper.classes("border-b")).toBe(true);
-  });
-
-  it("renders with padding classes", async () => {
-    await wrapper.setProps({
-      verticalPadding: "small",
-    });
-    const inner = wrapper.find('[data-testid="inner"]');
-
-    expect(inner.classes("lg:py-12")).toBe(true);
-    expect(inner.classes("pt-8")).toBe(true);
-    expect(inner.classes("pb-12")).toBe(true);
-  });
-
-  it("renders with size classes", async () => {
-    await wrapper.setProps({
-      size: "small",
-    });
-    const inner = wrapper.find('[data-testid="inner"]');
-
-    expect(inner.classes("w-full")).toBe(true);
-    expect(inner.classes("lg:mx-auto")).toBe(true);
-    expect(inner.classes("lg:w-2/3")).toBe(true);
-  });
-});

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

@@ -1,61 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiSection from "./UiSection.vue";
-
-const meta = {
-  title: "Ui/UiSection",
-  component: UiSection,
-  argTypes: {
-    size: {
-      control: "select",
-      options: ["wide", "small"],
-    },
-    verticalPadding: {
-      control: "select",
-      options: ["small", "large", "none"],
-    },
-    borderTop: {
-      control: "boolean",
-    },
-    borderBottom: {
-      control: "boolean",
-    },
-  },
-  args: {
-    size: "small",
-    verticalPadding: "large",
-    borderTop: false,
-    borderBottom: false,
-  },
-  parameters: {
-    backgrounds: { default: "gray-100" },
-  },
-  tags: ["deprecated"],
-} satisfies Meta<typeof UiSection>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiSection },
-    template: "<UiSection v-bind='args'>Slot</UiSection>",
-  }),
-};
-
-export const Multiple: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiSection },
-    template:
-      "<UiSection v-bind='args'>Slot1</UiSection>" +
-      "<UiSection v-bind='args'>Slot2</UiSection>" +
-      "<UiSection v-bind='args'>Slot3</UiSection>" +
-      "<UiSection v-bind='args'>Slot4</UiSection>",
-  }),
-};

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

@@ -1,19 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiSectionDivider from "./UiSectionDivider.vue";
-
-describe("UiSectionDivider", () => {
-  const wrapper = mount(UiSectionDivider);
-
-  it("renders default size class", () => {
-    expect(wrapper.classes("h-4")).toBe(true);
-  });
-
-  it("renders small size class", async () => {
-    await wrapper.setProps({
-      size: "small",
-    });
-    expect(wrapper.classes("h-px")).toBe(true);
-  });
-});