@dpa-id-components/dpa-shared-components 16.0.1 → 17.0.0

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

@@ -0,0 +1,51 @@
+import UiColorPicker from "./UiColorPicker.vue";
+import { mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+import { COLORS } from "./lib/colors.js";
+
+describe("UiColorPicker", () => {
+  it("should have a default color selected", () => {
+    const wrapper = mount(UiColorPicker, {
+      props: {
+        modelValue: "",
+      },
+    });
+    const defaultColor = wrapper.find("#color-e53935");
+    expect(defaultColor.find("#cp-checkmark")).toBeTruthy();
+  });
+
+  it("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();
+  });
+
+  it("should switch selected color from available options", () => {
+    const wrapper = mount(UiColorPicker, {
+      props: {
+        modelValue: "",
+      },
+    });
+    const thirdOption = wrapper.find(`#color-${COLORS[2]}`);
+    thirdOption.trigger("click");
+    expect(thirdOption.find("#cp-checkmark")).toBeTruthy();
+    expect(wrapper.emitted()["update:modelValue"][1]).toEqual([
+      `#${COLORS[2]}`,
+    ]);
+  });
+
+  it("should switch selected color from native color input", () => {
+    const wrapper = mount(UiColorPicker, {
+      props: {
+        modelValue: "",
+      },
+    });
+    const colorInputContainer = wrapper.find(".UiColorPicker-input");
+    colorInputContainer.setValue("#00c58e");
+    expect(wrapper.emitted()["update:modelValue"][1]).toEqual(["#00c58e"]);
+  });
+});

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

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

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

@@ -0,0 +1,107 @@
+<template>
+  <div class="flex">
+    <div
+      v-for="(hexColor, index) of COLORS"
+      :id="`color-${hexColor}`"
+      :key="`ui-cp-${index}`"
+      class="mr-3 flex size-4 rotate-45 cursor-pointer items-center justify-center"
+      :style="{ backgroundColor: `#${hexColor}` }"
+      :aria-checked="value === hexColor"
+      @click="
+        value = hexColor;
+        emit('update:modelValue', `#${hexColor}`);
+      "
+    >
+      <UiIcon
+        v-if="value === hexColor"
+        id="cp-checmark"
+        name="checkmark"
+        class="-rotate-45"
+        :class="checkmarkIconColor"
+        size="xs"
+      />
+    </div>
+    <div
+      class="UiColorPicker-inputWrapper flex size-4 rotate-45 items-center justify-center"
+      :style="{
+        backgroundColor: !COLORS.includes(value) ? customInputValue : '',
+      }"
+      :aria-checked="!COLORS.includes(value)"
+    >
+      <input
+        v-model="customInputValue"
+        type="color"
+        class="UiColorPicker-input absolute z-10 size-inherit cursor-pointer bg-gray-200 opacity-0"
+      />
+      <UiIcon
+        v-if="COLORS.includes(value)"
+        name="color-palette"
+        size="medium"
+        class="-rotate-45"
+      />
+      <UiIcon
+        v-else
+        id="cp-checmark"
+        name="checkmark"
+        class="-rotate-45"
+        :class="checkmarkIconColor"
+        size="xs"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import UiIcon from "../UiIcon/UiIcon.vue";
+import { watch } from "vue";
+import { COLORS } from "./lib/colors.js";
+import Color from "color";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+  }>(),
+  {
+    modelValue: `#${COLORS[0]}`,
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [string];
+}>();
+
+const value = ref(COLORS[0]);
+watch(
+  () => props.modelValue,
+  () => {
+    const unHexed = props.modelValue?.substring(1);
+    value.value = unHexed || COLORS[0];
+    if (!unHexed) {
+      emit("update:modelValue", `#${value.value}`);
+    }
+  },
+  { immediate: true },
+);
+
+const customInputValue = computed({
+  get() {
+    return `#${value.value}`;
+  },
+  set(hexColor) {
+    value.value = hexColor.substring(1);
+    emit("update:modelValue", `#${value.value}`);
+  },
+});
+
+const checkmarkIconColor = computed(() => {
+  const selectedColor = Color(`#${value.value}`);
+  const contrastGray = selectedColor.contrast(Color.rgb(77, 77, 77));
+  const contrastWhite = selectedColor.contrast(Color("white"));
+
+  if (contrastWhite >= contrastGray) {
+    return "text-white";
+  }
+  return "text-gray-800";
+});
+</script>

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

@@ -0,0 +1,11 @@
+export const COLORS = [
+  "e53935",
+  "f50057",
+  "8e24aa",
+  "2196f3",
+  "00acc1",
+  "00897b",
+  "00e676",
+  "ffff00",
+  "ffb300",
+];

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

@@ -0,0 +1,67 @@
+# @dpa-shared-components/UiDatePicker
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiCard -->
+<template>
+    <UiDatePicker/>
+</template>
+
+<script setup lang="ts">
+    import {UiDatePicker} from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+| Name                     | Type                                      | Default                  | Description                                                                                                         |
+|--------------------------|-------------------------------------------|--------------------------|---------------------------------------------------------------------------------------------------------------------|
+| `quickFilterRanges`      | `PresetRange[]`                           | ``                       | Adds buttons for the quick filter area
+| `enableQuickfilterToggle`      | `Boolean`                           | `false`                       | Enable Quickfilter Menu toggle for mobile - should be set to false for desktop views                                                                             |                                                                              |
+| `leftSidebar`            | `Boolean`                                 | `true`                   | Enebles quick filter area / side menu                                                                               |
+| `quickFilterHeadline`    | `String`                                  | `SCHNELLFILTER`          | Headline for quickfilter menu                                                                                       |
+| `roundedBorder`          | `Boolean`                                 | `true`                   | Rounds the edges of the Dialog                                                                                      |
+| `enableTimePicker`       | `Boolean`                                 | `false`                  | Enables a time picker                                                                                               |
+| `multiCalendars`         | `Boolean`                                 | `true`                   | Shows just one or more months                                                                                       |
+| `inputLabel`             | `String`                                  | `Zeitraum`               | placeholder in the input                                                                                            |
+| `selectedDate`           | `date[] or null`                          | null                     | predefined date has to have the right value coresponding to datae range or single date picker!                      |
+| `actionArea`             | `Boolean`                                 | `false`                  | enebles cta area                                                                                                    |
+| `cancel`                 | `string`                                  | `Abbrechen`              | cancel cta label                                                                                                    |
+| `closeOnScroll`          | `boolean`                                 | `false`                  | Close datepicker Menu on scroll                                                                                     |
+| `submit`                 | `string`                                  | `Hinzufügen`             | submit cta label                                                                                                    |
+| `definesRange`           | `Boolean`                                 | `true`                   | enables range picker mode                                                                                           |
+| `autoApply`              | `Boolean`                                 | `true`                   | clicking date becomes selecting date                                                                                |
+| `closeOnAutoApply`       | `Boolean`                                 | `true`                   | Close datepicker menu on page scroll                                                                                |
+| `autoPosition`           | `Boolean`                                 | `false`                  | will position based on viewport                                                                                     |
+| `dateRangeStart`         | `Number`                                  | `1948`                   | defines the startyear of the daterange                                                                              |
+| `minDate`                | `Boolean`                                 | `new Date("1949-01-01")` | defined the start of the datepicker range                                                                           |
+| `maxDate`                | `Date`                                    | `null`                   | defines the end of the datepicker range                                                                             |
+| `autoRange`              | `number or Null`                          | `Null`                   | defines dayrange / amount of selected dates                                                                         |
+| `maxRange`               | `number`                                  | `null`                   | defined the maximum of the selectable date range                                                                    |
+| `activeState`            | `Boolean`                                 | `false`                  | delivers our trusty blue button when activated (like filter button)                                                 |
+| `disabledState`          | `Boolean`                                 | `false`                  | disables date picker and adds disabled stylings                                                                     |
+| `customFormatCallback`   | `(value: Date or [Date, Date]) => string` | `() => null`             | optional callback function that must returns a formatted date string or null to use default formatting              |
+| `inputLabel`             | `String`                                  | `""`                     | label text for square input boxes                                                                                   |
+| `actionAreaExtraContent` | `String`                                  | `""`                     | optional text content to display on the bottom of the DatePicker. Will be overridden when slot `actionArea` is used |
+| `iconLeft`               | `UiIconName`                              | `null`                   | If you want an icon left of the title put in icon name here.                                                        |
+| `utc`                    | `Boolean`                                 | `true`                   | Set if output dates should be converted to UTC ot local timezone.                                                   |
+| `teleport`               | `boolean or string`                       | `null`                   | Teleports the datepicker to the body or provided selector, can solve issues with hidden overflow                    |
+
+### Events
+
+| Name                         | Type                     | Description                                       |
+|------------------------------|--------------------------|---------------------------------------------------|
+| `date-changed`               | `Date` or `[Date, Date]` | Emitted when the a date or date range is selected |
+| `datepickerQuickfilterClick` | `string`                 |  |
+| `open`                       | none                     | Emitted when the datepicker opens                 |
+| `close`                      | none                     | Emitted when the datepicker closes                |
+| `reset`                      | none                     |  |
+
+### Slots
+
+| Name         | Description                                                                                                                          |
+|--------------|--------------------------------------------------------------------------------------------------------------------------------------|
+| `actionArea` | When you need more then the string you can set via the prop `actionAreaExtraContent` you can use this slot to add whatever you like. |

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

@@ -0,0 +1,301 @@
+import UiDatePicker, { type PresetRange } from "./UiDatePicker.vue";
+import { describe, expect, it } from "vitest";
+import {
+  addMonths,
+  differenceInDays,
+  endOfMonth,
+  endOfYear,
+  format,
+  isToday,
+  startOfMonth,
+  startOfYear,
+  subMonths,
+  subYears,
+} from "date-fns";
+import { mount } from "@vue/test-utils";
+import { de } from "date-fns/locale";
+
+const quickfilterDateRanges = [
+  {
+    label: "Heute",
+    range: [new Date(), new Date()],
+  },
+  {
+    label: "Dieser Monat",
+    range: [startOfMonth(new Date()), new Date()],
+  },
+  {
+    label: "Dieses Jahr",
+    range: [startOfYear(new Date()), new Date()],
+  },
+  {
+    label: "Letzter Monat",
+    range: [
+      startOfMonth(subMonths(new Date(), 1)),
+      endOfMonth(subMonths(new Date(), 1)),
+    ],
+  },
+  {
+    label: "Letztes Jahr",
+    range: [
+      startOfYear(subYears(new Date(), 1)),
+      endOfYear(subYears(new Date(), 1)),
+    ],
+  },
+  {
+    label: "Gesamte Zeit",
+    range: [new Date("01.01.2020"), new Date()],
+  },
+] as PresetRange[];
+
+describe("Datepicker", () => {
+  const wrapper = mount(UiDatePicker, {
+    props: {
+      quickFilterRanges: quickfilterDateRanges,
+      quickFilterHeadline: "SCHNELLFILTER",
+    },
+  });
+
+  it("renders Datepicker", () => {
+    expect(wrapper.html()).toContain("desktop-datepicker");
+  });
+
+  it("should emit a open event", async () => {
+    await wrapper.find("#desktop-datepicker").trigger("click");
+    expect(wrapper.emitted()).toHaveProperty("open");
+  });
+
+  it("should emit a close event", async () => {
+    await wrapper.find("#desktop-datepicker").trigger("click");
+    await wrapper.find("#desktop-datepicker").trigger("click");
+    expect(wrapper.emitted()).toHaveProperty("close");
+    //click on input to open modal again
+    await wrapper.find("#desktop-datepicker").trigger("click");
+  });
+
+  it("should show cta-area when open ", async () => {
+    await wrapper.setProps({ actionArea: true });
+    await wrapper.find("#desktop-datepicker").trigger("click");
+    expect(wrapper.find("dp__action_row"));
+    await wrapper.setProps({ actionArea: false });
+    expect(wrapper.find("dp__action_row").exists()).toBe(false);
+    //click on input to close modal again
+    await wrapper.find("#desktop-datepicker").trigger("click");
+  });
+  it("should show quickfilters when open ", async () => {
+    await wrapper.find("#desktop-datepicker").trigger("click");
+    expect(wrapper.find("dp__sidebar_left"));
+    expect(wrapper.html()).toContain("SCHNELLFILTER");
+    await wrapper.setProps({ leftSidebar: false });
+    expect(wrapper.find("dp__sidebar_left").exists()).toBe(false);
+    //click on input to close modal again
+    await wrapper.find("#desktop-datepicker").trigger("click");
+  });
+  it("shows current and next month by default ", async () => {
+    await wrapper.find("#desktop-datepicker").trigger("click");
+    const now = new Date();
+
+    const nameOfMonth = format(now, "LLL", { locale: de });
+    const nameOfNextMonth = format(addMonths(now, 1), "LLL", { locale: de });
+    wrapper.find(nameOfMonth);
+    wrapper.find(nameOfNextMonth);
+  });
+});
+describe("Datepicker Quickfilter", () => {
+  const callback = (value: [Date, Date]) => {
+    const difference = differenceInDays(value[0], value[1]);
+    if (difference === 0 && isToday(value[0])) {
+      return "Heute";
+    }
+  };
+
+  it("should emit range for Heute Quickfilter", async () => {
+    const wrapper = mount(UiDatePicker, {
+      props: {
+        customFormatCallback: callback,
+        quickFilterRanges: quickfilterDateRanges,
+      },
+    });
+    await wrapper.find("#desktop-datepicker").trigger("click");
+    await wrapper.find("[data-testid='Heute']").trigger("click");
+    expect(wrapper.emitted()["date-changed"][0]).toEqual([
+      quickfilterDateRanges[0].range,
+    ]);
+  });
+
+  it("should work without custom formatter function", async () => {
+    const wrapper = mount(UiDatePicker, {
+      props: {
+        quickFilterRanges: quickfilterDateRanges,
+      },
+    });
+    await wrapper.find("#desktop-datepicker").trigger("click");
+    await wrapper.find("[data-testid='Heute']").trigger("click");
+    expect(wrapper.emitted()["date-changed"][0]).toEqual([
+      quickfilterDateRanges[0].range,
+    ]);
+  });
+
+  it("should emit range for Diesen Monat Quickfilter", async () => {
+    const wrapper = mount(UiDatePicker, {
+      props: {
+        customFormatCallback: callback,
+        quickFilterRanges: quickfilterDateRanges,
+      },
+    });
+    await wrapper.find("#desktop-datepicker").trigger("click");
+
+    await wrapper.find("[data-testid='Dieser Monat']").trigger("click");
+
+    expect(wrapper.emitted()["date-changed"][0]).toEqual([
+      quickfilterDateRanges[1].range,
+    ]);
+  });
+
+  it("should emit range for Dieses Jahr Quickfilter", async () => {
+    const wrapper = mount(UiDatePicker, {
+      props: {
+        customFormatCallback: callback,
+        quickFilterRanges: quickfilterDateRanges,
+      },
+    });
+    await wrapper.find("#desktop-datepicker").trigger("click");
+
+    await wrapper.find("[data-testid='Dieses Jahr']").trigger("click");
+
+    expect(wrapper.emitted()["date-changed"][0]).toEqual([
+      quickfilterDateRanges[2].range,
+    ]);
+  });
+
+  it("should emit range for Letzter Monat Quickfilter", async () => {
+    const wrapper = mount(UiDatePicker, {
+      props: {
+        customFormatCallback: callback,
+        quickFilterRanges: quickfilterDateRanges,
+      },
+    });
+    await wrapper.find("#desktop-datepicker").trigger("click");
+
+    await wrapper.find("[data-testid='Letzter Monat']").trigger("click");
+
+    expect(wrapper.emitted()["date-changed"][0]).toEqual([
+      quickfilterDateRanges[3].range,
+    ]);
+  });
+
+  it("should emit range for Letztes Jahr Quickfilter", async () => {
+    const wrapper = mount(UiDatePicker, {
+      props: {
+        customFormatCallback: callback,
+        quickFilterRanges: quickfilterDateRanges,
+      },
+    });
+    await wrapper.find("#desktop-datepicker").trigger("click");
+
+    await wrapper.find("[data-testid='Letztes Jahr']").trigger("click");
+
+    expect(wrapper.emitted()["date-changed"][0]).toEqual([
+      quickfilterDateRanges[4].range,
+    ]);
+  });
+
+  it("should emit range for Gesamte Zeit Quickfilter", async () => {
+    const wrapper = mount(UiDatePicker, {
+      props: {
+        customFormatCallback: callback,
+        quickFilterRanges: quickfilterDateRanges,
+      },
+    });
+    await wrapper.find("#desktop-datepicker").trigger("click");
+
+    await wrapper.find("[data-testid='Gesamte Zeit']").trigger("click");
+
+    expect(wrapper.emitted()["date-changed"][0]).toEqual([
+      quickfilterDateRanges[5].range,
+    ]);
+  });
+});
+
+describe("custom date formatter", () => {
+  it("should format selected date according to provided formatter function for input box ui", async () => {
+    const callback = (value: [Date, Date]) => {
+      const difference = differenceInDays(value[0], value[1]);
+      if (difference === 0 && isToday(value[0])) {
+        return "Heute";
+      }
+    };
+    const wrapper = mount(UiDatePicker, {
+      props: {
+        customFormatCallback: callback,
+        quickFilterRanges: quickfilterDateRanges,
+        roundedEdges: false,
+      },
+    });
+
+    await wrapper.find("#desktop-datepicker").trigger("click");
+    await wrapper.find("[data-testid='Heute']").trigger("click");
+    expect(wrapper.find("input").element.value).toBe("Heute");
+  });
+
+  it("should format selected date according to provided formatter function for filter button ui", async () => {
+    const callback = (value: [Date, Date]) => {
+      const difference = differenceInDays(value[0], value[1]);
+      if (difference === 0 && isToday(value[0])) {
+        return "Heute";
+      }
+    };
+    const wrapper = mount(UiDatePicker, {
+      props: {
+        customFormatCallback: callback,
+        quickFilterRanges: quickfilterDateRanges,
+        roundedEdges: true,
+      },
+    });
+
+    await wrapper.find("#desktop-datepicker").trigger("click");
+    await wrapper.find("[data-testid='Heute']").trigger("click");
+    expect(wrapper.find("[data-testid='filterbutton-title']").text()).toBe(
+      "Heute",
+    );
+  });
+});
+
+describe("Action Area content", function () {
+  it("Should show string when prop is set and no slot", async () => {
+    const wrapper = mount(UiDatePicker, {
+      props: {
+        actionAreaExtraContent: "Test to show string",
+      },
+    });
+
+    await wrapper.find("#desktop-datepicker").trigger("click");
+
+    const actionArea = wrapper.find(".dp__action_extra");
+    expect(actionArea.text()).toBe("Test to show string");
+  });
+
+  it("Show override Text when slot actionArea is used and prop is set", async () => {
+    const wrapper = mount(UiDatePicker, {
+      props: {
+        actionAreaExtraContent: "Test to show string",
+      },
+      slots: {
+        actionArea: "This is another string",
+      },
+    });
+
+    await wrapper.find("#desktop-datepicker").trigger("click");
+    const actionArea = wrapper.find(".dp__action_extra");
+    expect(actionArea.text()).not.toBe("Test to show string");
+    expect(actionArea.text()).toBe("This is another string");
+  });
+
+  it("should be empty when neither prop or slot is set", async () => {
+    const wrapper = mount(UiDatePicker, {});
+
+    await wrapper.find("#desktop-datepicker").trigger("click");
+    const actionArea = wrapper.find(".dp__action_extra");
+    expect(actionArea.text()).toBe("");
+  });
+});