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

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

@@ -1,99 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,12 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-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/dist/standard-view-Dxki5peq.js

@@ -1,17 +0,0 @@
-import { openBlock as e, createElementBlock as o, createElementVNode as r } from "vue";
-import { _ as n } from "./index-FTIb4npT.js";
-const s = {}, c = {
-  width: "18",
-  height: "18",
-  viewBox: "0 0 18 18",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-function d(i, t) {
-  return e(), o("svg", c, [...t[0] || (t[0] = [
-    r("path", { d: "M2 16V12H16L16.001 16H2ZM16 10H2C0.897 10 0 10.897 0 12V16C0 17.103 0.897 18 2 18H16C17.103 18 18 17.103 18 16V12C18 10.897 17.103 10 16 10ZM2 6V2H16L16.001 6H2ZM16 0H2C0.897 0 0 0.897 0 2V6C0 7.103 0.897 8 2 8H16C17.103 8 18 7.103 18 6V2C18 0.897 17.103 0 16 0Z" }, null, -1)
-  ])]);
-}
-const l = /* @__PURE__ */ n(s, [["render", d]]);
-export {
-  l as default
-};

package/dist/star-C1PxgOY0.js

@@ -1,20 +0,0 @@
-import { openBlock as e, createElementBlock as L, createElementVNode as o } from "vue";
-import { _ as r } from "./index-FTIb4npT.js";
-const C = {}, n = {
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-function s(c, t) {
-  return e(), L("svg", n, [...t[0] || (t[0] = [
-    o("path", {
-      d: "M11.9995 16.05C12.1585 16.05 12.3175 16.088 12.4625 16.163L16.2315 18.133L15.5145 13.976C15.4575 13.65 15.5665 13.318 15.8045 13.087L18.8405 10.151L14.6375 9.539C14.3125 9.492 14.0315 9.289 13.8855 8.995L11.9995 5.201L10.1135 8.995C9.96755 9.289 9.68655 9.492 9.36155 9.539L5.15855 10.151L8.19455 13.087C8.43255 13.318 8.54155 13.65 8.48455 13.976L7.76755 18.133L11.5365 16.163C11.6815 16.088 11.8405 16.05 11.9995 16.05ZM17.5615 20.955C17.4025 20.955 17.2435 20.918 17.0985 20.842L11.9995 18.178L6.90055 20.842C6.56255 21.018 6.15455 20.987 5.84955 20.763C5.54155 20.539 5.38855 20.16 5.45255 19.785L6.42455 14.157L2.30455 10.172C2.02955 9.907 1.93155 9.509 2.04855 9.146C2.16455 8.783 2.47855 8.519 2.85555 8.464L8.55655 7.636L11.1035 2.51C11.4415 1.83 12.5575 1.83 12.8955 2.51L15.4425 7.636L21.1435 8.464C21.5205 8.519 21.8345 8.783 21.9505 9.146C22.0675 9.509 21.9695 9.907 21.6945 10.172L17.5745 14.157L18.5465 19.785C18.6105 20.16 18.4575 20.539 18.1495 20.763C17.9765 20.891 17.7695 20.955 17.5615 20.955Z",
-      fill: "currentColor"
-    }, null, -1)
-  ])]);
-}
-const _ = /* @__PURE__ */ r(C, [["render", s]]);
-export {
-  _ as default
-};