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

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

@@ -0,0 +1,33 @@
+# @dpa-shared-components/UiCheckBoxGroup
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiCheckBoxGroup -->
+
+<template>
+  <UiCheckBoxGroup :item="checkboxes" :first-entry-checks-all="true" @item-checked="handleEvent"
+                   @checked-all="handleEvent" />
+</template>
+
+<script setup lang="ts">
+    import { UiCheckBoxGroup } from "@dpa-id-components/dpa-shared-components";
+</script>
+
+```
+### Props
+
+The "CheckboxItem"-Type is used. Consisting of "name", "isChecked" and "iconName"
+
+| Name                  | Type           | Default | Description                                                                                      |
+|-----------------------|----------------|---------|--------------------------------------------------------------------------------------------------|
+| `item`                | `CheckboxItem` | ``      | Adds the value to the checkbox, consiting of name, isChecked and iconName  ("CheckboxItem"-Type) |
+| `firstEntryChecksAll` | `Boolean`      | `false` | Wether the first item checks all the boxes                                                       |
+
+### Events
+
+| Name           | Type | Description                                  |
+|----------------|------|----------------------------------------------|
+| `checked-all`  | `boolean`        | Emitted when all items are selected          |
+| `input`        | `CheckboxItem[]` |  |
+| `item-checked` | `CheckboxItem`   | Emitted when each individual item is checked |

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

@@ -0,0 +1,66 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import UiCheckBoxGroup, { type CheckboxItem } from "./UiCheckBoxGroup.vue";
+import { randomInt } from "crypto";
+
+const entries = [
+  {
+    name: "alle wählen",
+    isChecked: false,
+  },
+  {
+    name: "Wissenschaft",
+    isChecked: false,
+  },
+  {
+    name: "Kultur",
+    isChecked: false,
+  },
+  {
+    name: "Sport",
+    isChecked: false,
+  },
+] as CheckboxItem[];
+
+describe("UiCheckBoxGroup", () => {
+  it("renders menu with prop values", async () => {
+    const wrapper = mount(UiCheckBoxGroup, {
+      props: {
+        item: entries,
+      },
+    });
+
+    const listElements = wrapper.findAll("li");
+
+    listElements.forEach((entry) => {
+      expect(entries.some((item) => item.name === entry.text())).toBe(true);
+    });
+  });
+
+  it("emits checked-all when first item is clicked", async () => {
+    const wrapper = mount(UiCheckBoxGroup, {
+      props: {
+        item: entries,
+        firstEntryChecksAll: true,
+      },
+    });
+
+    const firstListElement = wrapper.findAll("li")[0];
+
+    await firstListElement.trigger("click");
+    expect(wrapper.emitted()).toHaveProperty("checked-all");
+  });
+
+  it("emits item-checked when one item is clicked", async () => {
+    const wrapper = mount(UiCheckBoxGroup, {
+      props: {
+        item: entries,
+      },
+    });
+
+    const randomListElement = wrapper.findAll("li")[randomInt(0, 3)];
+
+    await randomListElement.trigger("click");
+    expect(wrapper.emitted()).toHaveProperty("item-checked");
+  });
+});

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

@@ -0,0 +1,57 @@
+import UiCheckBoxGroup from "./UiCheckBoxGroup.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+const meta = {
+  title: "Ui/UiCheckBoxGroup",
+  component: UiCheckBoxGroup,
+  argTypes: {
+    firstEntryChecksAll: { control: "boolean" },
+    disabled: { control: "boolean" },
+  },
+  args: {
+    firstEntryChecksAll: true,
+    disabled: false,
+  },
+} satisfies Meta<typeof UiCheckBoxGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiCheckBoxGroup },
+    template: "<UiCheckBoxGroup v-bind='args'/>",
+  }),
+  args: {
+    item: [
+      {
+        name: "alle Ressorts",
+        isChecked: false,
+      },
+      {
+        name: "Wirtschaft",
+        isChecked: false,
+        iconName: "clock",
+      },
+      {
+        name: "Panorama",
+        isChecked: false,
+      },
+      {
+        name: "Wissenschaft",
+        isChecked: false,
+      },
+      {
+        name: "Kultur",
+        isChecked: false,
+      },
+      {
+        name: "Sport",
+        isChecked: false,
+      },
+    ],
+  },
+};

package/dist/src/components/UiCheckBoxGroup/UiCheckBoxGroup.vue

@@ -0,0 +1,89 @@
+<template>
+  <ui-list class="grid grid-cols-2 flex-wrap border-none pt-2 lg:flex lg:pt-0">
+    <ui-list-item
+      v-for="(entry, index) in checkboxItems"
+      :key="entry.name"
+      :is-checked="entry.isChecked"
+      class="flex h-8 items-center border-none py-2 text-sm shadow-none lg:py-3"
+      check-box-menu
+      :label="entry.name"
+      :disabled="disabled"
+      :icon-name="entry.iconName"
+      @list-item-click="toggle(index)"
+      >{{ entry.name }}
+    </ui-list-item>
+  </ui-list>
+</template>
+
+<script setup lang="ts">
+import UiList from "../UiList/UiList.vue";
+import UiListItem from "../UiListItem/UiListItem.vue";
+import { computed, ref, watchEffect } from "vue";
+import type { UiIconName } from "../UiIcon/UiIcon.vue";
+
+const emit = defineEmits<{
+  "checked-all": [boolean];
+  input: [CheckboxItem[]];
+  "item-checked": [CheckboxItem];
+}>();
+
+export type CheckboxItem = {
+  name: string;
+  isChecked: boolean;
+  iconName?: UiIconName;
+};
+
+const props = withDefaults(
+  defineProps<{
+    item?: CheckboxItem[];
+    firstEntryChecksAll?: boolean;
+    disabled?: boolean;
+  }>(),
+  {
+    item: () => [],
+    firstEntryChecksAll: false,
+    disabled: false,
+  },
+);
+
+const checkboxItems = ref<CheckboxItem[]>(props.item);
+
+watchEffect(() => {
+  checkboxItems.value = props.item;
+});
+
+const areAllChecked = computed(() => {
+  const checkboxEntries = checkboxItems.value.slice(1);
+  return checkboxEntries.every((entry: CheckboxItem) => entry.isChecked);
+});
+
+const toggleAll = () => {
+  checkboxItems.value = checkboxItems.value.map((entry: CheckboxItem) => {
+    const isChecked = !checkboxItems.value[0].isChecked;
+    return {
+      ...entry,
+      isChecked,
+    };
+  });
+  emit("checked-all", checkboxItems.value[0].isChecked);
+  emit("input", checkboxItems.value);
+};
+
+const toggle = (index: number) => {
+  // With List Item Click we are overriding the normal checkbox `input` event, hence the disabled attribute has no effect
+  if (props.disabled) {
+    return;
+  }
+  if (index === 0 && props.firstEntryChecksAll) {
+    toggleAll();
+  } else {
+    checkboxItems.value[index].isChecked =
+      !checkboxItems.value[index].isChecked;
+    if (props.firstEntryChecksAll) {
+      checkboxItems.value[0].isChecked = areAllChecked.value;
+    }
+  }
+  emit("item-checked", checkboxItems.value[index]);
+  emit("input", checkboxItems.value);
+};
+</script>

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

@@ -0,0 +1,30 @@
+# @dpa-shared-components/UiChip
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiChip -->
+<template>
+    <UiChip>Chip Content</UiChip>
+</template>
+
+<script>
+    import {UiChip} from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+| Name          | Type                                       | Default | Description                                         |
+|---------------|--------------------------------------------|---------|-----------------------------------------------------|
+| `cursorStyle` | `"default" &#124; "text" &#124; "pointer"` | `text`  | Determines the styling of the cursor while hovering |
+| `isVisible`   | `Boolean`                                  | `true`  | Sets display hidden if false, otherwise inline-flex |
+| `size`        | `"small" &#124; "medium" &#124; "big"`     | `big`   | Determines the height and font-size                 |
+
+### Slots
+
+| Name      | Description                               |
+|-----------|-------------------------------------------|
+| `default` | slot for the rendering the chip's content |

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

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import UiChip from "./UiChip.vue";
+
+describe("UiChip", () => {
+  it("renders big size by default", () => {
+    const wrapper = mount(UiChip);
+
+    expect(wrapper.classes("h-8")).toBe(true);
+    expect(wrapper.classes("px-2")).toBe(true);
+    expect(wrapper.classes("text-sm")).toBe(true);
+  });
+  it("renders small size", () => {
+    const wrapper = mount(UiChip, {
+      props: {
+        size: "small",
+      },
+    });
+
+    expect(wrapper.classes("h-5")).toBe(true);
+    expect(wrapper.classes("px-1")).toBe(true);
+    expect(wrapper.classes("text-xs")).toBe(true);
+  });
+  it("renders medium size", () => {
+    const wrapper = mount(UiChip, {
+      props: {
+        size: "medium",
+      },
+    });
+
+    expect(wrapper.classes("h-6")).toBe(true);
+    expect(wrapper.classes("px-2")).toBe(true);
+    expect(wrapper.classes("text-sm")).toBe(true);
+  });
+
+  it("renders hidden", () => {
+    const wrapper = mount(UiChip, {
+      props: {
+        isVisible: false,
+      },
+    });
+    expect(wrapper.classes("hidden")).toBe(true);
+  });
+
+  it("renders with pointer class", () => {
+    const wrapper = mount(UiChip, {
+      props: {
+        cursorStyle: "pointer",
+      },
+    });
+
+    expect(wrapper.classes("cursor-pointer")).toBe(true);
+  });
+
+  it("renders with text class", () => {
+    const wrapper = mount(UiChip, {
+      props: {
+        cursorStyle: "text",
+      },
+    });
+
+    expect(wrapper.classes("cursor-text")).toBe(true);
+  });
+
+  it("renders with default class", () => {
+    const wrapper = mount(UiChip, {
+      props: {
+        cursorStyle: "default",
+      },
+    });
+
+    expect(wrapper.classes("cursor-default")).toBe(true);
+  });
+});

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

@@ -0,0 +1,38 @@
+import UiChip from "./UiChip.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+const meta = {
+  title: "UI/UiChip",
+  component: UiChip,
+  argTypes: {
+    isVisible: {
+      control: "boolean",
+    },
+    cursorStyle: {
+      control: "select",
+      options: ["default", "text", "pointer"],
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium", "big"],
+    },
+  },
+  args: {
+    isVisible: true,
+    cursorStyle: "text",
+    size: "big",
+  },
+} satisfies Meta<typeof UiChip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiChip },
+    setup() {
+      return { args };
+    },
+    template: '<UiChip v-bind="args">Chip</UiChip>',
+  }),
+};

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

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="whitespace-no-wrap min-w-max items-center rounded-full bg-gray-300 align-middle leading-normal text-gray-900"
+    :class="[isVisible ? 'inline-flex' : 'hidden', sizeClass, cursorStyle]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    cursorStyle?: "default" | "text" | "pointer";
+    isVisible?: boolean;
+    size?: "small" | "medium" | "big";
+  }>(),
+  {
+    cursorStyle: "text",
+    isVisible: true,
+    size: "big",
+  },
+);
+
+const cursorStyle = computed(() => {
+  const cursorStyles: Record<string, string> = {
+    default: "cursor-default",
+    text: "cursor-text",
+    pointer: "cursor-pointer",
+  };
+
+  return cursorStyles[props.cursorStyle];
+});
+
+const sizeClass = computed(() => {
+  const sizeClasses: Record<string, string> = {
+    small: "h-5 px-1 text-xs",
+    medium: "h-6 px-2 text-sm",
+    big: "h-8 px-2 text-sm",
+  };
+
+  return sizeClasses[props.size];
+});
+</script>

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

@@ -0,0 +1,35 @@
+# @dpa-shared-components/UiCollapseNavigation
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiCollapseNavigation -->
+<template>
+  <UiCollapseNavigation headline="Menu eins">
+    <UiFilterBadgeButton label="test eins" />
+    <UiFilterBadgeButton label="test zwei" />
+    <UiFilterBadgeButton label="test drei" />
+  </UiCollapseNavigation>
+</template>
+
+<script>
+  import UiCollapseNavigation from "./UiCollapseNavigation.vue";
+</script>
+```
+
+## API
+
+### Props
+
+| Name            | Type    | Default | Description                       |
+|-----------------|---------|---------|-----------------------------------|
+| `headline`      | string  | ''      | Headline of the menu              |
+| `borderTop`     | boolean | true    | Has top border                    |
+| `openAsDefault` | boolean | true    | defines default state of the menu |
+
+
+### Slots
+
+| Name      | Description                |
+|-----------|----------------------------|
+| `default` | slot for the menus content |

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

@@ -0,0 +1,20 @@
+import { shallowMount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import UiCollapseNavigation from "./UiCollapseNavigation.vue";
+
+describe("UiCollapseNavigation", () => {
+  it("should toggle the menu when the button is clicked", async () => {
+    const wrapper = shallowMount(UiCollapseNavigation);
+    const button = wrapper.findComponent({ name: "UiButton" });
+
+    expect(wrapper.vm.openMenu).toBe(true);
+
+    await button.trigger("click");
+
+    expect(wrapper.vm.openMenu).toBe(false);
+
+    await button.trigger("click");
+
+    expect(wrapper.vm.openMenu).toBe(true);
+  });
+});

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

@@ -0,0 +1,64 @@
+import UiCollapseNavigation from "./UiCollapseNavigation.vue";
+import UiFilterBadgeButton from "../UiFilterBadgeButton/UiFilterBadgeButton.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+const meta = {
+  title: "Ui/UiCollapseNavigation",
+  component: UiCollapseNavigation,
+  argTypes: {
+    headline: {
+      control: "text",
+    },
+    hasBorderTop: {
+      control: "boolean",
+    },
+    openAsDefault: {
+      control: "boolean",
+    },
+  },
+  args: {
+    headline: "Gespeicherte Suchen",
+    hasBorderTop: true,
+    openAsDefault: true,
+  },
+} satisfies Meta<typeof UiCollapseNavigation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiCollapseNavigation, UiFilterBadgeButton },
+    template: `
+      <UiCollapseNavigation v-bind='args' >
+      <UiFilterBadgeButton label="test eins" />
+      <UiFilterBadgeButton label="test zwei" />
+      <UiFilterBadgeButton label="test drei" />
+      </UiCollapseNavigation>
+    `,
+  }),
+};
+
+export const MultipleMenus: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiCollapseNavigation, UiFilterBadgeButton },
+    template: `
+      <UiCollapseNavigation headline="Menu eins">
+      <UiFilterBadgeButton label="test eins" />
+      <UiFilterBadgeButton label="test zwei" />
+      <UiFilterBadgeButton label="test drei" />
+      </UiCollapseNavigation>
+      <UiCollapseNavigation headline="Menu zwei">
+      <UiFilterBadgeButton label="test vier" />
+      <UiFilterBadgeButton label="test fünf" />
+      <UiFilterBadgeButton label="test sechs" />
+      </UiCollapseNavigation>
+    `,
+  }),
+};

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

@@ -0,0 +1,59 @@
+<template>
+  <div :class="hasBorderTop ? 'border-t-[1px] border-t-gray-300' : ''" />
+  <UiButton
+    color="transparent"
+    class="flex w-full justify-between border-none"
+    @click="toggleMenuHandler"
+  >
+    <h3 class="text-xs font-semibold uppercase tracking-widest text-gray-700">
+      {{ headline }}
+    </h3>
+    <UiIcon
+      name="chevron-down"
+      class="rounded-full text-gray-700 transition-transform duration-500 hover:bg-gray-300"
+      :class="{ 'rotate-180': openMenu }"
+    />
+  </UiButton>
+  <transition
+    enter-active-class="duration-200"
+    enter-from-class="transform -translate-y-[20px] opacity-0"
+    enter-to-class="transform translate-y-0 opacity-1"
+    leave-active-class="duration-200"
+    leave-from-class="transform translate-y-0 opacity-1"
+    leave-to-class="transform -translate-y-[20px] opacity-0"
+  >
+    <div v-if="openMenu">
+      <slot />
+    </div>
+  </transition>
+</template>
+<script setup lang="ts">
+import UiIcon from "../UiIcon/UiIcon.vue";
+import UiButton from "../UiButton/UiButton.vue";
+import { ref, watchEffect } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    headline?: string;
+    hasBorderTop?: boolean;
+    openAsDefault?: boolean;
+  }>(),
+  {
+    headline: "",
+    hasBorderTop: true,
+    openAsDefault: true,
+  },
+);
+
+const openMenu = ref();
+
+watchEffect(() => {
+  openMenu.value = props.openAsDefault;
+});
+
+const toggleMenuHandler = () => {
+  openMenu.value = !openMenu.value;
+};
+
+defineExpose({ openMenu });
+</script>

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

@@ -0,0 +1,31 @@
+# @dpa-shared-components/UiColorPicker
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiColorPicker -->
+<template>
+    <label for="colorPicker">Farbe wählen</label>
+    <UiColorPicker id="colorPicker" v-model="colorValue" />
+</template>
+
+<script setup>
+import { UiColorPicker } from "@dpa-id-components/dpa-shared-components";
+
+const colorValue = ref("");
+</script>
+```
+
+## API
+
+### Props
+
+| Name          | Type        | Default                              | Description                                         |
+|---------------|-------------|--------------------------------------|-----------------------------------------------------|
+| `modelValue`  | `String`    | `"#e53935"` (see `./lib/colors.ts`)  | Color code in hexadecimal syntax                    |
+
+### Events
+
+| Name                | Type                                        | Description                                       |
+|---------------------|---------------------------------------------|---------------------------------------------------|
+| `update:modelValue` | `string` (color code in hexadecimal syntax) | Emitted when a color has been selected or entered |