@dpa-id-components/dpa-shared-components 22.3.1 → 23.1.0

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

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

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

@@ -1,44 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { ref } from "vue";
-
-import UiLabel from "../UiLabel/UiLabel.vue";
-
-import UiColorPicker from "./UiColorPicker.vue";
-
-const meta = {
-  title: "Ui/UiColorPicker",
-  component: UiColorPicker,
-  argTypes: {
-    modelValue: {
-      control: "select",
-      options: [
-        "#e53935",
-        "#f50057",
-        "#8e24aa",
-        "#2196f3",
-        "#00acc1",
-        "#00897b",
-        "#00e676",
-        "#ffff00",
-        "#ffb300",
-      ],
-    },
-  },
-} satisfies Meta<typeof UiColorPicker>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { UiColorPicker, UiLabel },
-    template: `
-      <UiLabel class="inline-block mb-2 text-xs text-neutral-subtle">Farbe wählen</UiLabel>
-      <UiColorPicker v-model="color" />
-    `,
-    setup() {
-      const color = ref("#e53935");
-      return { args, color };
-    },
-  }),
-};

package/dist/src/components/UiColorPicker/UiColorPicker.vue

@@ -1,69 +0,0 @@
-<template>
-  <div class="flex gap-3">
-    <button
-      v-for="(hexColor, index) of COLORS"
-      :key="`ui-cp-${index}`"
-      :data-testid="`color-btn-${hexColor.substring(1)}`"
-      class="flex size-4 flex-none rotate-45 items-center justify-center"
-      :style="{ backgroundColor: hexColor }"
-      @click="model = hexColor"
-    >
-      <UiIcon
-        v-if="model === hexColor"
-        id="cp-checkmark"
-        name="checkmark"
-        class="-rotate-45"
-        :class="checkmarkIconColor"
-        size="xs"
-      />
-    </button>
-    <div
-      class="UiColorPicker-inputWrapper flex size-4 flex-none rotate-45 items-center justify-center"
-      :style="{
-        backgroundColor: !COLORS.includes(model) ? model : '',
-      }"
-    >
-      <input
-        v-model="model"
-        type="color"
-        class="UiColorPicker-input absolute z-10 size-inherit cursor-pointer opacity-0"
-      />
-      <UiIcon
-        v-if="COLORS.includes(model)"
-        name="color-palette"
-        size="md"
-        class="-rotate-45"
-      />
-      <UiIcon
-        v-else
-        id="cp-checkmark"
-        name="checkmark"
-        class="-rotate-45"
-        :class="checkmarkIconColor"
-        size="xs"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Color from "color";
-import { computed } from "vue";
-
-import UiIcon from "../UiIcon/UiIcon.vue";
-
-import { COLORS } from "./lib/colors.ts";
-
-const model = defineModel<string>({ default: COLORS[0] });
-
-const checkmarkIconColor = computed(() => {
-  const selectedColor = Color(model.value);
-  const contrastGray = selectedColor.contrast(Color.rgb(77, 77, 77));
-  const contrastWhite = selectedColor.contrast(Color("white"));
-
-  if (contrastWhite >= contrastGray) {
-    return "text-neutral";
-  }
-  return "text-neutral-emphasis";
-});
-</script>

package/dist/src/components/UiColorPicker/lib/colors.ts

@@ -1,11 +0,0 @@
-export const COLORS = [
-  "#e53935",
-  "#f5138d",
-  "#8e24aa",
-  "#2196f3",
-  "#00acc1",
-  "#00897b",
-  "#00e281",
-  "#f9f500",
-  "#ffb300",
-];

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

@@ -1,89 +0,0 @@
-# @dpa-shared-components/UiDatePicker
-
-## Usage
-
-```vue
-<template>
-  <UiDatePicker v-model="date" />
-</template>
-
-<script setup lang="ts">
-  import { ref } from "vue";
-  import { UiDatePicker } from "@dpa-id-components/dpa-shared-components";
-  import type { DateType } from "@dpa-id-components/dpa-shared-components";
-
-  const date = ref<DateType>();
-</script>
-```
-
-## API
-
-### Props
-
-
-| Name                     | Type                                     | Default                  | Description                                                                                                 |
-|--------------------------|------------------------------------------|--------------------------|-------------------------------------------------------------------------------------------------------------|
-| `autoApply`              | `boolean`                                | `true`                   | Clicking a date immediately selects it without requiring confirmation                                       |
-| `closeOnAutoApply`       | `boolean`                                | `true`                   | Close the datepicker menu after auto-applying a selection                                                   |
-| `inline`                 | `boolean`                                | `false`                  | Renders the datepicker inline instead of as a popup                                                         |
-| `disabled`               | `boolean`                                | `false`                  | Disables the datepicker and applies disabled styling                                                        |
-| `locale`                 | `Locale`                                 | `de`                     | date-fns locale used for formatting and translations                                                        |
-| `utc`                    | `boolean`                                | `false`                  | Sets Timezone to utc or not                                                                                 |
-| `teleport`               | `boolean \| string \| HTMLElement`       | `false`                  | Teleports the datepicker menu to the body or a provided selector. Useful for solving hidden overflow issues |
-| `minDate`                | `Date \| string \| number`               | `new Date("1948-01-01")` | Minimum selectable date                                                                                     |
-| `maxDate`                | `Date \| string \| number`               | `undefined`              | Maximum selectable date                                                                                     |
-| `multiCalendars`         | `boolean`                                | `false`                  | Shows multiple calendar months side by side                                                                 |
-| `monthPicker`            | `boolean`                                | `false`                  | Switches to month-only picker mode. Disables range selection                                                |
-| `enableTimePicker`       | `boolean`                                | `false`                  | Enables a time picker alongside the date picker                                                             |
-| `autoPosition`           | `boolean`                                | `true`                   | Automatically repositions the menu based on viewport (flip & shift)                                         |
-| `autoRange`              | `string \| number`                       | `undefined`              | Automatically selects a range of N days from the clicked date                                               |
-| `maxRange`               | `string \| number`                       | `undefined`              | Maximum number of days allowed in a selected range                                                          |
-| `triggerWidth`           | `full \| fit`                            | `full`                   | Trigger button has either w-full applied ot w-fit                                                           |
-| `triggerPlaceholderText` | `string`                                 | `undefined`              | Placeholder text shown in the trigger button when no date is selected                                       |
-| `customFormatCallback`   | `(date: Date \| [Date, Date]) => string` | `undefined`              | Custom callback for formatting the displayed date string in the input                                       |
-| `leftTriggerIcon`        | `UiIconName`                             | `undefined`              | Icon displayed to the left of the label in the trigger button                                               |
-| `leftSidebar`            | `boolean`                                | `false`                  | Enables the quick filter sidebar                                                                            |
-| `quickFilterHeadline`    | `string`                                 | `undefined`              | Headline text for the quick filter sidebar                                                                  |
-| `quickFilterRanges`      | `PresetRange[]`                          | `[]`                     | Preset date ranges displayed as buttons in the quick filter sidebar                                         |
-| `actionExtraContent`     | `string`                                 | `undefined`              | Text content displayed at the bottom of the datepicker. Overridden when the `action-extra` slot is used     |
-
-### Model
-
-| Name         | Type       | Description                                                                                        |
-|--------------|------------|----------------------------------------------------------------------------------------------------|
-| `modelValue` | `DateType` | The selected date. Supports `Date`, `[Date, Date]`, `string`, or `{ month: number; year: number }` |
-
-### Events
-
-| Name                   | Payload       | Description                                    |
-|------------------------|---------------|------------------------------------------------|
-| `update:modelValue`    | `DateType`    | Emitted when a date or date range is selected  |
-| `quick-filter-changed` | `PresetRange` | Emitted when a quick filter preset is selected |
-| `open`                 | —             | Emitted when the datepicker menu opens         |
-| `closed`               | —             | Emitted when the datepicker menu closes        |
-| `start-range`          | `Date`        | Emitted when first date of range is selected   |
-| `end-range`            | `Date`        | Emitted when last date of range is selected    |
-
-### Slots
-
-| Name           | Slot Props                                             | Description                                                                                      |
-|----------------|--------------------------------------------------------|--------------------------------------------------------------------------------------------------|
-| `action-row`   | `ActionRowSlotProps`                                   | Custom action row at the bottom of the datepicker (e.g. confirm/cancel buttons)                  |
-| `action-extra` | `{ selectCurrentDate: () => void, reset: () => void }` | Additional content above the action row. Falls back to `actionExtraContent` prop if not provided |
-
-
-### Types
-
-```typescript
-export interface PresetRange {
-  label: string;
-  range: [Date, Date] | { year: number; month: number };
-  name?: string;
-}
-
-export type DateType =
-  | Date
-  | [Date, Date]
-  | string
-  | { month: number; year: number };
-```

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

@@ -1,143 +0,0 @@
-import { flushPromises, mount } from "@vue/test-utils";
-import {
-  endOfDay,
-  endOfMonth,
-  endOfYear,
-  startOfDay,
-  startOfMonth,
-  startOfYear,
-  subMonths,
-  subYears,
-} from "date-fns";
-import { describe, expect, test } from "vitest";
-
-import UiDatePicker, { type PresetRange } from "./UiDatePicker.vue";
-
-const today = new Date("2026-04-02");
-
-const quickFilterRanges: PresetRange[] = [
-  { label: "Heute", range: [startOfDay(today), endOfDay(today)] },
-  { label: "Dieser Monat", range: [startOfMonth(today), endOfMonth(today)] },
-  { label: "Dieses Jahr", range: [startOfYear(today), endOfYear(today)] },
-  {
-    label: "Letzter Monat",
-    range: [startOfMonth(subMonths(today, 1)), endOfMonth(subMonths(today, 1))],
-  },
-  {
-    label: "Letztes Jahr",
-    range: [startOfYear(subYears(today, 1)), endOfYear(subYears(today, 1))],
-  },
-  { label: "Gesamte Zeit", range: [new Date("1948-01-01"), endOfDay(today)] },
-];
-
-function createWrapper(
-  props: Record<string, any> = {},
-  slots: Record<string, any> = {},
-) {
-  return mount(UiDatePicker, {
-    props,
-    slots,
-  });
-}
-
-describe("UiDatePicker", () => {
-  test("renders Datepicker", () => {
-    const wrapper = createWrapper();
-    expect(wrapper.find('[data-testid="datepicker-trigger"]').exists()).toBe(
-      true,
-    );
-  });
-
-  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();
-  });
-
-  test("should emit a closed event", async () => {
-    const wrapper = createWrapper();
-    const trigger = wrapper.find('[data-testid="datepicker-trigger"]');
-    await trigger.trigger("click");
-    await trigger.trigger("keydown", { key: "Escape" });
-    expect(wrapper.emitted().closed[0]).toBeTruthy();
-  });
-
-  test("should show QuickFilters when leftSidebar is true", async () => {
-    const wrapper = createWrapper({
-      leftSidebar: true,
-      quickFilterHeadline: "Schnellfilter",
-      quickFilterRanges,
-      inline: true,
-    });
-    await flushPromises();
-    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(
-        true,
-      );
-    }
-  });
-
-  test("should emit range for Heute Quickfilter", async () => {
-    const wrapper = createWrapper({
-      leftSidebar: true,
-      quickFilterRanges,
-      inline: true,
-    });
-    await flushPromises();
-    await wrapper.find('[data-testid="Heute"]').trigger("click");
-    expect(wrapper.emitted("quick-filter-changed")![0][0]).toStrictEqual(
-      quickFilterRanges[0],
-    );
-  });
-
-  test("should emit range for Dieser Monat Quickfilter", async () => {
-    const wrapper = createWrapper({
-      leftSidebar: true,
-      quickFilterRanges,
-      inline: true,
-    });
-    await flushPromises();
-    await wrapper.find('[data-testid="Dieser Monat"]').trigger("click");
-    expect(wrapper.emitted("quick-filter-changed")![0][0]).toStrictEqual(
-      quickFilterRanges[1],
-    );
-  });
-
-  describe("action-extra slot", () => {
-    test("should show string when prop is set and no slot", async () => {
-      const wrapper = createWrapper({
-        actionExtraContent: "Extra info text",
-        inline: true,
-      });
-      await flushPromises();
-      expect(wrapper.text()).toContain("Extra info text");
-    });
-
-    test("should override text when slot action-extra is used and prop is set", async () => {
-      const wrapper = createWrapper(
-        {
-          actionExtraContent: "Prop text",
-          inline: true,
-        },
-        {
-          "action-extra": () => "<div>Slot override</div>",
-        },
-      );
-      await flushPromises();
-      expect(wrapper.text()).toContain("Slot override");
-      expect(wrapper.text()).not.toContain("Prop text");
-    });
-
-    test("should be empty when neither prop nor slot is set", async () => {
-      const wrapper = createWrapper({ inline: true });
-
-      const actionExtra = wrapper.find(".dp--action-extra");
-      if (actionExtra.exists()) {
-        expect(actionExtra.text().trim()).toBe("");
-      }
-    });
-  });
-});