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

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

@@ -0,0 +1,99 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiTextButton from "./UiTextButton.vue";
+
+describe("UiTextButton", () => {
+  it("should render defaults", () => {
+    const wrapper = mount(UiTextButton);
+    expect(wrapper.classes("font-normal")).toBe(true);
+  });
+
+  it("should render semibold font-weight", () => {
+    const wrapper = mount(UiTextButton, {
+      props: {
+        weight: "semibold",
+      },
+    });
+    expect(wrapper.classes("font-semibold")).toBe(true);
+  });
+
+  it("should render xsmall font-size", () => {
+    const wrapper = mount(UiTextButton, {
+      props: {
+        size: "xsmall",
+      },
+    });
+    expect(wrapper.classes("text-xs")).toBe(true);
+  });
+
+  it("should render small font-size", () => {
+    const wrapper = mount(UiTextButton, {
+      props: {
+        size: "small",
+      },
+    });
+    expect(wrapper.classes("text-sm")).toBe(true);
+  });
+
+  it("should render medium font-size", () => {
+    const wrapper = mount(UiTextButton, {
+      props: {
+        size: "medium",
+      },
+    });
+    expect(wrapper.classes("text-base")).toBe(true);
+  });
+
+  it("should render blue text color", () => {
+    const wrapper = mount(UiTextButton, {
+      props: {
+        color: "blue",
+      },
+    });
+    expect(wrapper.classes("text-blue-default")).toBe(true);
+  });
+
+  it("should render gray text color", () => {
+    const wrapper = mount(UiTextButton, {
+      props: {
+        color: "gray",
+      },
+    });
+    expect(wrapper.classes("text-gray-700")).toBe(true);
+  });
+
+  it("should render iconLeft", () => {
+    const iconLeft = "alert";
+    const wrapper = mount(UiTextButton, {
+      props: {
+        iconLeft,
+      },
+    });
+    expect(wrapper.findComponent({ name: "UiIcon" }).props()).toMatchObject({
+      name: iconLeft,
+    });
+  });
+
+  it("should render iconRight", () => {
+    const iconRight = "alert";
+    const wrapper = mount(UiTextButton, {
+      props: {
+        iconRight,
+      },
+    });
+    expect(wrapper.findComponent({ name: "UiIcon" }).props()).toMatchObject({
+      name: iconRight,
+    });
+  });
+
+  it("should change gray text color when placement is oncanvas", () => {
+    const wrapper = mount(UiTextButton, {
+      props: {
+        color: "gray",
+        placement: "oncanvas",
+      },
+    });
+    expect(wrapper.classes("text-gray-800")).toBe(true);
+  });
+});

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import { icons } from "../UiIcon/icons.js";
+import UiTextButton from "./UiTextButton.vue";
+
+const meta = {
+  title: "Ui/UiTextButton",
+  component: UiTextButton,
+  argTypes: {
+    color: {
+      control: "select",
+      options: ["blue", "gray"],
+    },
+    href: { control: "text" },
+    linkTarget: { control: "text" },
+    iconLeft: {
+      control: "select",
+      options: Object.keys(icons),
+    },
+    iconRight: {
+      control: "select",
+      options: Object.keys(icons),
+    },
+    placement: {
+      control: "select",
+      options: ["onsurface", "oncanvas"],
+    },
+    size: {
+      control: "select",
+      options: ["xsmall", "small", "medium"],
+    },
+    weight: {
+      control: "select",
+      options: ["regular", "semibold"],
+    },
+  },
+  args: {
+    color: "blue",
+    href: undefined,
+    iconLeft: undefined,
+    iconRight: undefined,
+    placement: "onsurface",
+    size: "medium",
+    weight: "regular",
+    linkTarget: undefined,
+  },
+} satisfies Meta<typeof UiTextButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiTextButton },
+    template: "<UiTextButton v-bind='args'>Link</UiTextButton>",
+  }),
+};

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

@@ -0,0 +1,89 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiToggleButton from "./UiToggleButton.vue";
+
+describe("UiToggleButton", () => {
+  const labelText = "Foo";
+  const wrapper = mount(UiToggleButton, {
+    props: {
+      modelValue: false,
+      disabled: false,
+      labelText: labelText,
+    },
+  });
+
+  it("shows correct label text ", () => {
+    expect(wrapper.text()).toContain(labelText);
+  });
+
+  it("emits correct event when clicked", async () => {
+    const input = wrapper.find("[data-testid='toggleButton']");
+
+    await input.trigger("click");
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted()["update:modelValue"]).toBeTruthy();
+  });
+
+  it("should render correct colors when checked", async () => {
+    await wrapper.setProps({
+      modelValue: true,
+      color: "green",
+    });
+
+    const dot = wrapper.find(".dot");
+    const line = wrapper.find(".line");
+    expect((dot.element as HTMLInputElement).className).toContain(
+      "translate-x-full bg-green-primary",
+    );
+    expect((line.element as HTMLInputElement).className).toContain(
+      "opacity-50",
+    );
+  });
+
+  it("should render correct size when size=small", async () => {
+    await wrapper.setProps({
+      modelValue: true,
+      size: "small",
+    });
+
+    const dot = wrapper.find(".dot");
+    const line = wrapper.find(".line");
+    expect((dot.element as HTMLInputElement).className).toContain("h-4 w-4");
+    expect((line.element as HTMLInputElement).className).toContain("h-3 w-6");
+  });
+
+  it("should render correct size when size=large", async () => {
+    await wrapper.setProps({
+      modelValue: true,
+      size: "large",
+    });
+
+    const dot = wrapper.find(".dot");
+    const line = wrapper.find(".line");
+    expect((dot.element as HTMLInputElement).className).toContain("h-6 w-6");
+    expect((line.element as HTMLInputElement).className).toContain("h-4 w-10");
+  });
+
+  it("should show correct disabled value when props are set", async () => {
+    await wrapper.setProps({
+      disabled: true,
+    });
+
+    const input = wrapper.find("[data-testid='toggleButton']");
+    expect((input.element as HTMLInputElement).disabled).toBeTruthy();
+  });
+
+  it("should render slot content", () => {
+    const wrapperWithSlotContent = mount(UiToggleButton, {
+      props: {
+        modelValue: false,
+        disabled: false,
+      },
+      slots: {
+        default: "Slot Label",
+      },
+    });
+    expect(wrapperWithSlotContent.text()).toContain("Slot Label");
+  });
+});

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

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+
+import UiIcon from "../UiIcon/UiIcon.vue";
+import UiToggleButton from "./UiToggleButton.vue";
+
+const meta = {
+  title: "Ui/UiToggleButton",
+  component: UiToggleButton,
+  argTypes: {
+    color: {
+      control: { type: "select" },
+      options: ["blue", "green"],
+    },
+    size: {
+      control: { type: "select" },
+      options: ["small", "large"],
+    },
+    modelValue: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    labelText: {
+      control: "text",
+    },
+    labelSpace: {
+      control: "select",
+      options: ["default", "xl"],
+    },
+    labelPosition: {
+      control: "select",
+      options: ["left", "right"],
+    },
+    labelTextSize: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg"],
+    },
+  },
+  args: {
+    color: "blue",
+    size: "small",
+    modelValue: false,
+    disabled: false,
+    labelSpace: "default",
+    labelTextSize: "xs",
+    labelPosition: "left",
+  },
+} satisfies Meta<typeof UiToggleButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      const isChecked = ref(args.modelValue);
+      return { args, isChecked };
+    },
+    components: { UiToggleButton },
+    template: `
+      <UiToggleButton v-bind='args' v-model='isChecked'>
+        Label
+      </UiToggleButton>
+    `,
+  }),
+};
+
+export const MultipleToggles: Story = {
+  render: (args) => ({
+    setup() {
+      const isChecked = ref(args.modelValue);
+      const secondToggle = ref(true);
+      return { args, isChecked, secondToggle };
+    },
+    components: { UiToggleButton },
+    template: `
+      <UiToggleButton label-text="first" v-bind='args' v-model='isChecked' />
+      <UiToggleButton label-text="second" color="green" v-model='secondToggle' />
+    `,
+  }),
+};
+
+export const WithSlot: Story = {
+  args: {
+    color: "green",
+  },
+  render: (args) => ({
+    setup() {
+      const isChecked = ref(args.modelValue);
+      return { args, isChecked };
+    },
+    components: { UiToggleButton, UiIcon },
+    template: `
+      <UiToggleButton v-bind="args" v-model="isChecked">
+      <div class="flex items-center text-gray-800">
+        <UiIcon size="small" name="flag-filled" />
+        <span class="pl-1.5">Label</span></div>
+      </UiToggleButton>`,
+  }),
+};

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

@@ -0,0 +1,139 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiTooltip from "./UiTooltip.vue";
+
+document.body.innerHTML = `
+    <div id="app"></div>
+`;
+
+describe("UiTooltip", () => {
+  it("shows correct content", () => {
+    const wrapper = mount(UiTooltip, {
+      props: {
+        fixed: false,
+      },
+      slots: {
+        default: "tooltip content",
+      },
+    });
+    expect(wrapper.text()).toBe("tooltip content");
+  });
+
+  it("uses the structured tooltip", () => {
+    const wrapper = mount(UiTooltip, {
+      props: {
+        fixed: false,
+        structuredLayout: true,
+        structuredInfo: [
+          {
+            title: "Typ",
+            description: "Termine",
+          },
+          {
+            title: "Ressort",
+            description: "Wirtschaft",
+          },
+        ],
+      },
+    });
+    const firstEl = wrapper.findAll("li")[0];
+    const secondEl = wrapper.findAll("li")[1];
+    expect(firstEl.text()).toBe("TypTermine");
+    expect(secondEl.text()).toBe("RessortWirtschaft");
+  });
+
+  it("is not rendered without mouseover", () => {
+    const wrapper = mount(UiTooltip, {
+      props: {
+        fixed: false,
+      },
+      slots: {
+        activator: "<button>activate</button>",
+      },
+    });
+
+    expect(
+      wrapper.find('[data-testid="tooltipElement"]').isVisible(),
+    ).toBeFalsy();
+  });
+
+  it("is rendered upon mouseover", async () => {
+    const wrapper = mount(UiTooltip, {
+      props: {
+        fixed: false,
+      },
+      slots: {
+        activator: "<button>Hover me</button>",
+        default: "I'm a tooltip",
+      },
+    });
+    const activator = wrapper.find('[data-testid="activator"]');
+    await activator.trigger("mouseenter");
+
+    expect(wrapper.find('[data-testid="tooltip"]').classes("hidden")).toBe(
+      false,
+    );
+
+    expect(wrapper.find('[data-testid="tooltipElement"]').text()).toBe(
+      "I'm a tooltip",
+    );
+  });
+
+  it("is rendered in the correct position", async () => {
+    const wrapper = mount(UiTooltip, {
+      props: {
+        fixed: false,
+        position: "right",
+      },
+      slots: {
+        activator: "<button>Hover me</button>",
+      },
+    });
+    const activator = wrapper.find('[data-testid="activator"]');
+    await activator.trigger("mouseenter");
+
+    expect(
+      wrapper.find('[data-testid="tooltip"]').attributes("data-placement"),
+    ).toBe("right");
+  });
+
+  it("is in a fixed position", () => {
+    const wrapper = mount(UiTooltip, {
+      props: {
+        fixed: true,
+      },
+    });
+
+    // Find Tooltip that is teleported to the body
+    const tooltip = document.querySelector(
+      '[data-testid="tooltip"]',
+    ) as HTMLElement;
+
+    expect(tooltip).not.toBeNull();
+    expect(tooltip?.style.position).toBe("fixed");
+
+    // Cleanup after the test
+    wrapper.unmount();
+  });
+
+  it("shows no tooltip content when disabled", async () => {
+    const wrapper = mount(UiTooltip, {
+      props: {
+        disabled: true,
+        fixed: false,
+      },
+      slots: {
+        activator: "<button>Hover me</button>",
+        default: "I'm a Tooltip",
+      },
+    });
+
+    const activator = wrapper.find('[data-testid="activator"]');
+
+    expect(activator.exists()).toBe(true);
+    await activator.trigger("mouseenter");
+
+    expect(wrapper.find('[data-testid="tooltipElement"]').exists()).toBe(false);
+  });
+});

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

@@ -0,0 +1,107 @@
+import { shift } from "@floating-ui/vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import UiTooltip from "./UiTooltip.vue";
+
+const meta = {
+  title: "Ui/UiTooltip",
+  component: UiTooltip,
+  argTypes: {
+    position: {
+      control: { type: "select" },
+      options: [
+        "top-start",
+        "top",
+        "top-end",
+        "right",
+        "bottom-end",
+        "bottom",
+        "bottom-start",
+        "left",
+      ],
+    },
+    structuredLayout: {
+      control: "boolean",
+    },
+    structuredInfo: {
+      control: "object",
+    },
+    fixed: {
+      control: "boolean",
+    },
+    multilines: {
+      control: "boolean",
+    },
+    enterActiveClasses: {
+      control: "text",
+    },
+    leaveActiveClasses: {
+      control: "text",
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+  args: {
+    position: "bottom",
+    structuredLayout: false,
+    structuredInfo: [],
+    fixed: false,
+    multilines: false,
+    enterActiveClasses:
+      "motion-safe:transition motion-safe:duration-300 motion-safe:delay-500",
+    leaveActiveClasses: "motion-safe:transition",
+    disabled: false,
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiTooltip },
+    template: `
+      <div style="margin-top: 50px; margin-left: 120px; max-width: max-content;">
+        <UiTooltip v-bind="args">
+          <template v-slot:activator>
+            <button>Target</button>
+          </template>
+          Tooltip Content
+        </UiTooltip>
+      </div>
+    `,
+  }),
+} satisfies Meta<typeof UiTooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Structured: Story = {
+  args: {
+    structuredLayout: true,
+    structuredInfo: [
+      {
+        title: "Typ",
+        description: "Termine",
+      },
+      {
+        title: "Ressort",
+        description: "Wirtschaft",
+      },
+      {
+        title: "Veranstaltungsort",
+        description: "Hamburg",
+      },
+    ],
+  },
+};
+
+export const CustomFloatingUi: Story = {
+  args: {
+    animate: true,
+    floatingUiOptions: {
+      middleware: [shift()],
+    },
+    position: "bottom-end",
+  },
+};

package/dist/src/compositions/useBreakpoints/UseBreakpoints.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import UseBreakpoints from "./UseBreakpoints.stories.vue";
+
+const meta = {
+  title: "tailwind/UseBreakpoints.ts",
+  component: UseBreakpoints,
+  argTypes: {},
+  parameters: {},
+} satisfies Meta<typeof UseBreakpoints>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UseBreakpoints },
+    template: `<div><UseBreakpoints /></div>`,
+  }),
+};

package/dist/src/compositions/useBreakpoints/UseBreakpoints.stories.vue

@@ -0,0 +1,12 @@
+<template>
+  <UiButton v-if="lg">Button for LG</UiButton>
+  <UiIconButton v-else title="Button" icon-name="emoji" />
+</template>
+
+<script setup lang="ts">
+import UiButton from "../../components/UiButton/UiButton.vue";
+import UiIconButton from "../../components/UiIconButton/UiIconButton.vue";
+import { useBreakpoints } from "./useBreakpoints.js";
+
+const { lg } = useBreakpoints();
+</script>

package/dist/src/utils/index.spec.ts

@@ -0,0 +1,12 @@
+import { describe, expect, test } from "vitest";
+
+import { cn } from "./cn.js";
+
+describe("cn", () => {
+  test.each<[Parameters<typeof cn>, ReturnType<typeof cn>]>([
+    [["items-center", "items-start"], "items-start"],
+    [["items-center", undefined], "items-center"],
+  ])("works", (parameters, expected) => {
+    expect(cn(...parameters)).toBe(expected);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "20.0.6",
+  "version": "20.0.7",
   "description": "Shared Vue components library for dpa projects",
   "files": [
     "src",
@@ -63,12 +63,12 @@
     "npm-run-all2": "8.0.4",
     "prettier": "3.8.1",
     "rimraf": "6.1.3",
+    "rollup-plugin-copy": "3.5.0",
     "storybook": "10.3.3",
     "tailwindcss": "4.2.2",
     "typescript": "5.9.3",
     "vite": "8.0.2",
     "vite-plugin-dts": "4.5.4",
-    "vite-plugin-static-copy": "4.0.0",
     "vitest": "4.1.1",
     "vue": "3.5.30",
     "vue-router": "5.0.4",
@@ -91,9 +91,10 @@
     "vue-eslint-parser": "^10.4.0"
   },
   "peerDependencies": {
+    "@eslint/js": "^9.39.2 || ^10.0.1",
     "@tailwindcss/typography": "^0.5.16",
-    "eslint": ">= 9",
-    "prettier": ">= 3",
+    "eslint": "^9.39.2 || ^10.1.0",
+    "prettier": "^3.8.1",
     "tailwindcss": "^4.1.11",
     "vue": "^3.5.0",
     "vue-router": "^4.6.4 || ^5.0.0"