@dpa-id-components/dpa-shared-components 22.0.0-next.1 → 22.0.0-next.11

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

@@ -1,7 +1,7 @@
 import { randomInt } from "node:crypto";
 
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiCheckBoxGroup, { type CheckboxItem } from "./UiCheckBoxGroup.vue";
 
@@ -25,7 +25,7 @@ const entries = [
 ] as CheckboxItem[];
 
 describe("UiCheckBoxGroup", () => {
-  it("renders menu with prop values", async () => {
+  test("renders menu with prop values", async () => {
     const wrapper = mount(UiCheckBoxGroup, {
       props: {
         item: entries,
@@ -41,7 +41,7 @@ describe("UiCheckBoxGroup", () => {
     });
   });
 
-  it("emits checked-all when first item is clicked", async () => {
+  test("emits checked-all when first item is clicked", async () => {
     const wrapper = mount(UiCheckBoxGroup, {
       props: {
         item: entries,
@@ -55,7 +55,7 @@ describe("UiCheckBoxGroup", () => {
     expect(wrapper.emitted()).toHaveProperty("checked-all");
   });
 
-  it("emits item-checked when one item is clicked", async () => {
+  test("emits item-checked when one item is clicked", async () => {
     const wrapper = mount(UiCheckBoxGroup, {
       props: {
         item: entries,

package/dist/src/components/UiCheckbox/README.md

@@ -3,19 +3,19 @@
 ## Usage
 
 ```vue
-<template>
-  <UiCheckbox required name="terms" appearance="secondary">
-    Accept terms and conditions
-  </UiCheckbox>
-</template>
-
-<script setup lang="ts">
-import { UiCheckbox } from "@dpa-id-components/dpa-shared-components";
-</script>
+<UiCheckbox required name="terms" appearance="secondary">
+  Accept terms and conditions
+</UiCheckbox>
 ```
 
 ## API
 
+### Models
+
+| Name      | Type               | Default     | Description          |
+|-----------|--------------------|-------------|----------------------|
+| _default_ | `string[] \| string \| boolean` | `undefined` | Sets the input value |
+
 ### Props
 
 **Note**: This component binds all non-prop attributes (apart from `class`) on its principal element (`input[type="checkbox"]`) instead of the root element. This allows you to add arbitrary HTML attributes (and event listeners) on the principal element without them being explicitly supported by the component.

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

@@ -1,19 +1,29 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import type {
+  ComponentPropsAndSlots,
+  Meta,
+  StoryObj,
+} from "@storybook/vue3-vite";
 import { ref } from "vue";
 
 import UiCheckbox from "./UiCheckbox.vue";
 
+type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiCheckbox> & {
+  name?: string;
+  disabled?: boolean;
+};
+
 const meta = {
   title: "forms/UiCheckbox",
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
   component: UiCheckbox,
   argTypes: {
     // Attributes
-    // @ts-ignore Storybook doesn't know that **any** component can receive arbitrary attributes and enforces this on the type level.
+    name: { control: "text" },
     disabled: { control: "boolean" },
   },
   args: {
     // Attributes
-    // @ts-ignore Storybook doesn't know that **any** component can receive arbitrary attributes and enforces this on the type level.
+    name: "name",
     disabled: false,
 
     // Props
@@ -24,18 +34,19 @@ const meta = {
     default: "Checkbox",
     errors: "",
   },
-} satisfies Meta<typeof UiCheckbox>;
+} satisfies Meta<PropsAndCustomArgs>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<PropsAndCustomArgs>;
 
 export const Default: Story = {
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
   render: (args) => ({
     components: { UiCheckbox },
     setup() {
       return { args };
     },
-    template: `
+    template: /*html*/ `
       <UiCheckbox v-bind="args">
         {{ args.default }}
         <template v-if="args.errors" #errors>
@@ -50,12 +61,13 @@ export const Errors: Story = {
   args: {
     errors: "This field is required.",
   },
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
   render: (args) => ({
     components: { UiCheckbox },
     setup() {
       return { args };
     },
-    template: `
+    template: /*html*/ `
       <UiCheckbox v-bind="args">
         {{ args.default }}
         <template #errors>
@@ -67,6 +79,7 @@ export const Errors: Story = {
 };
 
 export const Group: Story = {
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
   render: (args) => ({
     components: { UiCheckbox },
     setup() {
@@ -74,7 +87,7 @@ export const Group: Story = {
 
       return { args, languages };
     },
-    template: `
+    template: /*html*/ `
       <div class="space-y-2">
         <UiCheckbox v-model="languages" v-bind="args" value="en">English</UiCheckbox>
         <UiCheckbox v-model="languages" v-bind="args" value="de">German</UiCheckbox>

package/dist/src/components/UiCheckbox/UiCheckbox.vue

@@ -41,7 +41,11 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+  generic="ModelValue extends string[] | string | boolean"
+>
 import { computed, useId } from "vue";
 
 import { cn } from "../../utils/cn.ts";
@@ -75,7 +79,7 @@ const {
   size?: "sm" | "md";
 }>();
 
-const model = defineModel<boolean | string | string[]>();
+const model = defineModel<ModelValue>();
 
 const defaultId = useId();
 const uniqueId = computed(() => id ?? `id-${defaultId}`);

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

@@ -1,14 +1,14 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiChip from "./UiChip.vue";
 
 describe("UiChip", () => {
-  it("renders sm size by default", () => {
+  test("renders sm size by default", () => {
     const wrapper = mount(UiChip);
-    expect(wrapper.classes("text-sm/5.5")).toBe(true);
+    expect(wrapper.classes("text-sm/6")).toBe(true);
   });
-  it("renders md size", () => {
+  test("renders md size", () => {
     const wrapper = mount(UiChip, {
       props: {
         size: "md",

package/dist/src/components/UiChip/UiChip.vue

@@ -31,8 +31,8 @@ defineEmits<{
 }>();
 
 const CHIP_SIZES: Record<Extract<Size, "xs" | "sm" | "md">, string> = {
-  xs: "text-xs",
-  sm: "text-sm/5.5",
+  xs: "text-xs/5",
+  sm: "text-sm/6",
   md: "text-sm/8",
 };
 

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

@@ -1,10 +1,10 @@
 import { shallowMount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiCollapseNavigation from "./UiCollapseNavigation.vue";
 
 describe("UiCollapseNavigation", () => {
-  it("should toggle the menu when the button is clicked", async () => {
+  test("should toggle the menu when the button is clicked", async () => {
     const wrapper = shallowMount(UiCollapseNavigation);
     const button = wrapper.findComponent({ name: "UiButton" });
 

package/dist/src/components/UiCollapseNavigation/UiCollapseNavigation.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="hasBorderTop ? 'border-t border-t-neutral-faint' : ''" />
   <UiButton
-    appearance="secondary"
+    appearance="outline-emphasis"
     class="flex w-full justify-between border-none"
     @click="toggleMenuHandler"
   >

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

@@ -1,11 +1,11 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import { COLORS } from "./lib/colors.ts";
 import UiColorPicker from "./UiColorPicker.vue";
 
 describe("UiColorPicker", () => {
-  it("should have a default color selected", () => {
+  test("should have a default color selected", () => {
     const wrapper = mount(UiColorPicker);
     const defaultColor = wrapper.find(
       `[data-testid='color-btn-${COLORS[0].substring(1)}']`,
@@ -13,7 +13,7 @@ describe("UiColorPicker", () => {
     expect(defaultColor.find("#cp-checkmark")).toBeTruthy();
   });
 
-  it("should have a custom color set from v-model", () => {
+  test("should have a custom color set from v-model", () => {
     const wrapper = mount(UiColorPicker, {
       props: {
         modelValue: "#00c58e",
@@ -23,7 +23,7 @@ describe("UiColorPicker", () => {
     expect(colorInputContainer.find("#cp-checkmark")).toBeTruthy();
   });
 
-  it("should switch selected color from available options", async () => {
+  test("should switch selected color from available options", async () => {
     const wrapper = mount(UiColorPicker);
     const thirdOption = wrapper.findAll("button").at(2);
     await thirdOption?.trigger("click");
@@ -31,7 +31,7 @@ describe("UiColorPicker", () => {
     expect(wrapper.emitted()["update:modelValue"][0]).toEqual([COLORS[2]]);
   });
 
-  it("should switch selected color from native color input", () => {
+  test("should switch selected color from native color input", () => {
     const wrapper = mount(UiColorPicker);
     const colorInputContainer = wrapper.find(".UiColorPicker-input");
     colorInputContainer.setValue("#00c58e");

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

@@ -9,7 +9,7 @@ import {
   subMonths,
   subYears,
 } from "date-fns";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiDatePicker, { type PresetRange } from "./UiDatePicker.vue";
 
@@ -41,21 +41,21 @@ function createWrapper(
 }
 
 describe("UiDatePicker", () => {
-  it("renders Datepicker", () => {
+  test("renders Datepicker", () => {
     const wrapper = createWrapper();
     expect(wrapper.find('[data-testid="datepicker-trigger"]').exists()).toBe(
       true,
     );
   });
 
-  it("should emit an open event", async () => {
+  test("should emit an open event", async () => {
     const wrapper = createWrapper();
     const trigger = wrapper.find('[data-testid="datepicker-trigger"]');
     await trigger.trigger("click");
     expect(wrapper.emitted("open")).toBeTruthy();
   });
 
-  it("should emit a closed event", async () => {
+  test("should emit a closed event", async () => {
     const wrapper = createWrapper();
     const trigger = wrapper.find('[data-testid="datepicker-trigger"]');
     await trigger.trigger("click");
@@ -63,7 +63,7 @@ describe("UiDatePicker", () => {
     expect(wrapper.emitted().closed[0]).toBeTruthy();
   });
 
-  it("should show QuickFilters when leftSidebar is true", async () => {
+  test("should show QuickFilters when leftSidebar is true", async () => {
     const wrapper = createWrapper({
       leftSidebar: true,
       quickFilterHeadline: "Schnellfilter",
@@ -71,7 +71,7 @@ describe("UiDatePicker", () => {
       inline: true,
     });
     await flushPromises();
-    expect(wrapper.find(".dp__sidebar_left").exists()).toBe(true);
+    expect(wrapper.find(".dp--sidebar-left").exists()).toBe(true);
     expect(wrapper.html()).toContain("Schnellfilter");
     for (const range of quickFilterRanges) {
       expect(wrapper.find(`[data-testid="${range.label}"]`).exists()).toBe(
@@ -80,7 +80,7 @@ describe("UiDatePicker", () => {
     }
   });
 
-  it("should emit range for Heute Quickfilter", async () => {
+  test("should emit range for Heute Quickfilter", async () => {
     const wrapper = createWrapper({
       leftSidebar: true,
       quickFilterRanges,
@@ -93,7 +93,7 @@ describe("UiDatePicker", () => {
     );
   });
 
-  it("should emit range for Dieser Monat Quickfilter", async () => {
+  test("should emit range for Dieser Monat Quickfilter", async () => {
     const wrapper = createWrapper({
       leftSidebar: true,
       quickFilterRanges,
@@ -107,7 +107,7 @@ describe("UiDatePicker", () => {
   });
 
   describe("action-extra slot", () => {
-    it("should show string when prop is set and no slot", async () => {
+    test("should show string when prop is set and no slot", async () => {
       const wrapper = createWrapper({
         actionExtraContent: "Extra info text",
         inline: true,
@@ -116,7 +116,7 @@ describe("UiDatePicker", () => {
       expect(wrapper.text()).toContain("Extra info text");
     });
 
-    it("should override text when slot action-extra is used and prop is set", async () => {
+    test("should override text when slot action-extra is used and prop is set", async () => {
       const wrapper = createWrapper(
         {
           actionExtraContent: "Prop text",
@@ -131,10 +131,10 @@ describe("UiDatePicker", () => {
       expect(wrapper.text()).not.toContain("Prop text");
     });
 
-    it("should be empty when neither prop nor slot is set", async () => {
+    test("should be empty when neither prop nor slot is set", async () => {
       const wrapper = createWrapper({ inline: true });
 
-      const actionExtra = wrapper.find(".dp__action_extra");
+      const actionExtra = wrapper.find(".dp--action-extra");
       if (actionExtra.exists()) {
         expect(actionExtra.text().trim()).toBe("");
       }

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

@@ -119,7 +119,9 @@ export const Default: Story = {
     setup() {
       return { args };
     },
-    template: `<UiDatePicker v-bind='args' />`,
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" />
+    `,
   }),
 };
 
@@ -138,8 +140,12 @@ export const Inline: Story = {
       });
       return { args, date, formattedDate };
     },
-    template: `<div class="space-y-8">
-      <UiDatePicker v-bind='args' v-model="date"></UiDatePicker><div>Selected Date: {{ formattedDate }}</div></div>`,
+    template: /*html*/ `
+      <div class="space-y-8">
+        <UiDatePicker v-bind="args" v-model="date" />
+        <div>Selected Date: {{ formattedDate }}</div>
+      </div>
+    `,
   }),
 };
 
@@ -150,16 +156,18 @@ export const WithResetButton: Story = {
       const date = ref([new Date(), new Date()]);
       return { args, date };
     },
-    template: `<UiDatePicker v-bind='args' v-model="date">
-      <template #action-extra="{ reset }">
-        <div class="text-left">
-          <UiButton  appearance="secondary" size="xs" @click="reset">
-            <UiIcon name="reset" />
-            <span>Zurücksetzen</span>
-          </UiButton>
-      </div>
-      </template>
-    </UiDatePicker>`,
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" v-model="date">
+        <template #action-extra="{ reset }">
+          <div class="text-left">
+            <UiButton  appearance="secondary" size="xs" @click="reset">
+              <UiIcon name="reset" />
+              <span>Zurücksetzen</span>
+            </UiButton>
+          </div>
+        </template>
+      </UiDatePicker>
+    `,
   }),
 };
 
@@ -173,16 +181,18 @@ export const WithActionRow: Story = {
       const date = ref();
       return { args, date };
     },
-    template: `<UiDatePicker v-bind='args' v-model="date">
-      <template #action-row="{ selectDate, closePicker }">
-            <UiButton  appearance="secondary" size="xs" @click="closePicker">
-              <span>Abbrechen</span>
-            </UiButton>
-            <UiButton  appearance="primary" size="xs" @click="selectDate">
-              <span>Anwenden</span>
-            </UiButton>
-      </template>
-    </UiDatePicker>`,
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" v-model="date">
+        <template #action-row="{ selectDate, closePicker }">
+          <UiButton appearance="secondary" size="xs" @click="closePicker">
+            Abbrechen
+          </UiButton>
+          <UiButton size="xs" @click="selectDate">
+            Anwenden
+          </UiButton>
+        </template>
+      </UiDatePicker>
+    `,
   }),
 };
 
@@ -204,7 +214,9 @@ export const MonthPicker: Story = {
     setup() {
       return { args };
     },
-    template: "<UiDatePicker v-bind='args' />",
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" />
+    `,
   }),
 };
 
@@ -222,7 +234,9 @@ export const WithQuickfilters: Story = {
     setup() {
       return { args };
     },
-    template: "<UiDatePicker v-bind='args' />",
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" />
+    `,
   }),
 };
 
@@ -238,7 +252,9 @@ export const WithMultiCalendars: Story = {
     setup() {
       return { args };
     },
-    template: "<UiDatePicker v-bind='args' />",
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" />
+    `,
   }),
 };
 
@@ -255,7 +271,9 @@ export const WithCustomFormatter: Story = {
       const date = ref([new Date(), new Date()]);
       return { args, date };
     },
-    template: `<UiDatePicker v-bind='args' v-model="date" />`,
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" v-model="date" />
+    `,
   }),
 };
 
@@ -283,6 +301,8 @@ export const WithAllSettings: Story = {
     setup() {
       return { args };
     },
-    template: `<UiDatePicker v-bind='args'></UiDatePicker>`,
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" />
+    `,
   }),
 };

package/dist/src/components/UiDatePicker/UiDatePicker.vue

@@ -70,7 +70,7 @@
             'w-full min-w-0': triggerWidth === 'full',
             'flex-none': triggerWidth === 'fit',
           }"
-          :appearance="value ? 'primary' : 'secondary-alt'"
+          :appearance="value ? 'fill-emphasis' : 'outline-subtle'"
           :disabled
           size="sm"
           data-testid="datepicker-trigger"
@@ -130,7 +130,7 @@
         <UiIcon class="text-neutral-subtle" name="chevron-right" size="sm" />
       </template>
       <template #arrow>
-        <div ref="menuArrow" class="dp__arrow_top"></div>
+        <div ref="menuArrow" class="dp--arrow-top"></div>
       </template>
     </VueDatePicker>
   </div>
@@ -306,17 +306,17 @@ function formatInput(date: Date | [Date, Date]): string {
 <style>
 @reference "../../tailwindPreset.css";
 
-.dp__arrow_top {
+.dp--arrow-top {
   left: 10%;
 }
 
-.dp__menu {
+.dp--menu {
   border-radius: var(--radius-2xl);
   box-shadow: var(--shadow-lg);
 }
 
 .dp--year-select,
-.dp__month_year_select {
+.dp--month-year-select {
   border-radius: var(--radius-2xl);
 }
 
@@ -325,45 +325,45 @@ function formatInput(date: Date | [Date, Date]): string {
   padding: 0.25rem;
 }
 
-.dp__flex_display {
+.dp--flex-display {
   gap: 2rem;
 }
 
-.dp__sidebar_left {
+.dp--sidebar-left {
   padding: 0;
 }
 
-.dp__cell_inner {
+.dp--cell-inner {
   border-radius: calc(infinity * 1px);
 }
 
-.dp__cell_inner:hover {
+.dp--cell-inner:hover {
   border-radius: calc(infinity * 1px);
 }
 
-.dp__today {
+.dp--today {
   border: 1px solid var(--color-neutral-primary);
 }
 
-.dp__cell_auto_range,
-.dp__cell_auto_range_start,
-.dp__cell_auto_range_end {
+.dp--cell-auto-range,
+.dp--cell-auto-range-start,
+.dp--cell-auto-range-end {
   border: none;
   color: var(--color-neutral-primary);
   background-color: var(--color-neutral-faint);
 }
 
-.dp__month_year_select {
+.dp--month-year-select {
   font-size: var(--text-base);
   font-weight: var(--font-weight-semibold);
   color: var(--color-neutral-primary);
 }
 
-.dp__calendar_header_separator {
+.dp--calendar-header-separator {
   display: none;
 }
 
-.dp__calendar_header {
+.dp--calendar-header {
   gap: 0.25rem;
   align-items: center;
   font-size: var(--text-xs);
@@ -371,26 +371,26 @@ function formatInput(date: Date | [Date, Date]): string {
   font-weight: var(--font-weight-semibold);
 }
 
-.dp__calendar_header_item {
+.dp--calendar-header-item {
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-neutral-subtle);
 }
 
-.dp__calendar_row {
+.dp--calendar-row {
   gap: 0.25rem;
 }
 
-.dp__action_row,
-.dp__action_extra {
+.dp--action-row,
+.dp--action-extra {
   justify-content: end;
   gap: 1rem;
   border-top: 1px solid var(--color-neutral-faint);
   padding: 0.5rem 1rem;
 }
 
-.dp__theme_light {
+.dp--theme-light {
   --dp-font-family: var(--font-sans);
   --dp-month-year-row-height: 2rem; /*Height of the month-year select row*/
   --dp-button-icon-height: 1.5rem; /*Icon sizing in buttons*/

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

@@ -1,10 +1,10 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiDialog from "./UiDialog.vue";
 
 describe("UiDialog", () => {
-  it("renders dialog with default slot content", () => {
+  test("renders dialog with default slot content", () => {
     const wrapper = mount(UiDialog, {
       slots: {
         header: "Header Slot",
@@ -14,7 +14,7 @@ describe("UiDialog", () => {
     expect(wrapper.text()).toContain("Default Slot");
   });
 
-  it("renders dialog with header slot content", () => {
+  test("renders dialog with header slot content", () => {
     const wrapper = mount(UiDialog, {
       slots: {
         header: "Header Slot",
@@ -25,7 +25,7 @@ describe("UiDialog", () => {
     expect(wrapper.find("header").text()).toBe("Header Slot");
   });
 
-  it("renders dialog with close button if by prop provided", () => {
+  test("renders dialog with close button if by prop provided", () => {
     const wrapper = mount(UiDialog, {
       slots: {
         header: "Header Slot",
@@ -39,7 +39,7 @@ describe("UiDialog", () => {
     expect(wrapper.find("button")).toBeTruthy();
   });
 
-  it("renders dialog with footer slot content", () => {
+  test("renders dialog with footer slot content", () => {
     const wrapper = mount(UiDialog, {
       slots: {
         header: "Header Slot",