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

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

@@ -0,0 +1,37 @@
+import UiOverlayMenu from "./UiOverlayMenu.vue";
+import UiList from "../UiList/UiList.vue";
+import UiListItem from "../UiListItem/UiListItem.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+const meta = {
+  title: "Ui/UiOverlayMenu",
+  component: UiOverlayMenu,
+  subcomponents: { UiList, UiListItem },
+  argTypes: {
+    isOpen: {
+      control: "boolean",
+    },
+  },
+  args: {
+    isOpen: true,
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiOverlayMenu, UiList, UiListItem },
+    template:
+      "<UiOverlayMenu v-bind='args'>" +
+      "<UiList>" +
+      "<UiListItem checkBoxMenu='true'>Test</UiListItem>" +
+      "<UiListItem checkBoxMenu='true'>Test</UiListItem>" +
+      "<UiListItem checkBoxMenu='true'>Test</UiListItem>" +
+      "</UiList>" +
+      "</UiOverlayMenu>",
+  }),
+} satisfies Meta<typeof UiOverlayMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/dist/src/components/UiOverlayMenu/UiOverlayMenu.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    v-show="isOpen"
+    v-click-away="close"
+    class="relative size-full border-none"
+  >
+    <div
+      class="absolute right-3 top-12 z-10 block border-t bg-white px-4 py-3 shadow-lg"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { vClickAway } from "../../directives/vClickAway.js";
+
+withDefaults(
+  defineProps<{
+    isOpen?: boolean;
+  }>(),
+  {
+    isOpen: false,
+  },
+);
+const emit = defineEmits<{
+  close: [];
+}>();
+const close = (): void => {
+  emit("close");
+};
+</script>

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

@@ -0,0 +1,49 @@
+# @dpa-id-components/UiRadioInputGroup
+
+## Usage
+
+```html
+<template>
+  <UiRadioInput
+    :options="options"
+    group-name="someName"
+    v-model="selectedOption"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { UiRadioInputGroup } from "@dpa-id-components/dpa-shared-components";
+
+  const selectedOption = ref("first option");
+  const options = computed(() => {
+    return [
+      {
+        value: "first option",
+        label: "First option",
+        selected: selectedOption.value === "first option",
+      },
+      {
+        value: "second option",
+        label: "Second option",
+        selected: selectedOption.value === "second option",
+      },
+    ];
+  });
+</script>
+```
+
+### Props
+
+| Name         | Type                   | Default  | Description                                                      |
+| ------------ | ---------------------- | -------- | ---------------------------------------------------------------- |
+| `options`    | `Array`                | --       | Array with RadioMenu specific content                            |
+| `groupName`  | `String`               | --       | common name for Radio Input Group                                |
+| `size`       | `String`               | `medium` | Sets the `size` attribute of the Radio Inputs                    |
+| `color`      | `"blue" &#124; "gray"` | `blue`   | Sets the `color` and `background` attributes of the Radio Inputs |
+| `disabled`   | `Boolean`              | `false`  | Whether the `Radio Input Group` is disabled                      |
+| `labelClass` | `string`               | ``       | Custom class for the Radio Label                                 |
+| `class`      | `string`               | ``       | Custom class for Wrapper                                         |
+
+### Events
+
+The component uses `v-model` to determine the current selected option, therefor it emits the `update:modelValue` event but it doesn't need to be specified as you should use v-model when used as you can see in the example

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

@@ -0,0 +1,65 @@
+import UiRadioInput from "./UiRadioInputGroup.vue";
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+
+describe("UiRadioInput", () => {
+  it("renders UiRadioInputGroup with props content", () => {
+    const wrapper = mount(UiRadioInput, {
+      props: {
+        options: [
+          {
+            label: "default name",
+            selected: false,
+            value: "default value",
+          },
+        ],
+        groupName: "Options",
+      },
+    });
+    expect(wrapper.text()).toBe("default name");
+  });
+
+  it("should click change value", async () => {
+    const wrapper = mount(UiRadioInput, {
+      props: {
+        modelValue: "default value",
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+        options: [
+          {
+            label: "default name",
+            selected: true,
+            value: "default value",
+          },
+          {
+            label: "second option",
+            selected: false,
+            value: "second option",
+          },
+        ],
+        groupName: "Options",
+      },
+    });
+
+    await wrapper.find("input[value='second option']").setValue(true);
+    expect(wrapper.props("modelValue")).toBe("second option");
+  });
+
+  it("renders attributes on correct element", () => {
+    const wrapper = mount(UiRadioInput, {
+      props: {
+        options: [],
+        groupName: "",
+        id: "id",
+        class: "testClass gap-8",
+        "data-testid": "testId",
+      },
+    });
+
+    const root = wrapper.find(":first-child");
+    expect(root.attributes("id")).toBe("id");
+    expect(root.element.classList.contains("testClass")).toBe(true);
+    expect(root.element.classList.contains("gap-4")).toBe(false);
+    expect(root.element.classList.contains("gap-8")).toBe(true);
+    expect(root.attributes("data-testid")).toBe("testId");
+  });
+});

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

@@ -0,0 +1,67 @@
+import UiRadioInputGroup from "./UiRadioInputGroup.vue";
+import { action } from "storybook/actions";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+const meta = {
+  title: "Ui/UiRadioInputGroup",
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
+  component: UiRadioInputGroup,
+  argTypes: {
+    options: {
+      control: "object",
+    },
+    variant: {
+      control: "select",
+      options: ["blue", "gray"],
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium"],
+    },
+    direction: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+    },
+    disabled: { control: "boolean" },
+    groupName: { control: "text" },
+    class: { control: "text" },
+  },
+  args: {
+    options: [
+      {
+        label: "Option A",
+        value: "value 1",
+        selected: true,
+      },
+      {
+        label: "Option B",
+        value: "value 2",
+        selected: false,
+      },
+      {
+        label: "Option C",
+        value: "value 3",
+        selected: false,
+      },
+    ],
+    variant: "blue",
+    size: "medium",
+    direction: "horizontal",
+    disabled: false,
+    groupName: "default",
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiRadioInputGroup },
+    template:
+      "<UiRadioInputGroup v-bind='args' @input='input'></UiRadioInputGroup>",
+    methods: { input: action("input") },
+  }),
+} satisfies Meta<typeof UiRadioInputGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/dist/src/components/UiRadioInputGroup/UiRadioInputGroup.vue

@@ -0,0 +1,82 @@
+<template>
+  <ul
+    class="flex"
+    :class="[
+      cn('gap-4', $attrs.class as HTMLAttributes['class']),
+      {
+        'flex-col': direction === 'vertical',
+      },
+    ]"
+  >
+    <li v-for="option in internalOptions" :key="option.value">
+      <label class="flex items-center text-sm">
+        <input
+          v-model="pickedOption"
+          :name="groupName"
+          :value="option.value"
+          :checked="option.selected"
+          :disabled="disabled"
+          type="radio"
+          :class="cn(sizeClassName, variantClassName)"
+          class="cursor-pointer appearance-none rounded-full border-2 bg-clip-content disabled:cursor-default disabled:border-gray-500 disabled:bg-gray-500"
+        />
+        <span
+          class="ml-1 cursor-pointer"
+          :class="[labelClass, disabled ? 'text-gray-500' : 'text-inherit']"
+        >
+          {{ option.label }}
+        </span>
+      </label>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts" generic="T extends string | number">
+import { computed, type HTMLAttributes } from "vue";
+import { cn } from "../../utils/cn.js";
+
+export interface UiRadioInputGroupOption<T> {
+  value: T;
+  label: string;
+  selected: boolean;
+}
+
+const pickedOption = defineModel<T>();
+const props = withDefaults(
+  defineProps<{
+    groupName: string;
+    disabled?: boolean;
+    direction?: "horizontal" | "vertical";
+    options: UiRadioInputGroupOption<T>[];
+    variant?: "blue" | "gray";
+    size?: "small" | "medium";
+    labelClass?: string;
+  }>(),
+  {
+    direction: "horizontal",
+    variant: "blue",
+    size: "medium",
+    disabled: false,
+    labelClass: "",
+  },
+);
+
+const variantClassName = computed(() => {
+  return props.variant === "blue"
+    ? "border-blue-default checked:bg-blue-default checked:hover:bg-blue-dark hover:border-blue-dark"
+    : "border-gray-800 checked:bg-gray-800 checked:hover:bg-gray-900 hover:border-gray-900";
+});
+
+const sizeClassName = computed(() => {
+  return props.size === "medium" ? "h-5 w-5 p-1" : "w-4 h-4 p-[3px]";
+});
+
+const internalOptions = computed(() => {
+  return props.options.map((option) => {
+    return {
+      ...option,
+      selected: pickedOption.value === option.value,
+    };
+  });
+});
+</script>

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

@@ -0,0 +1,53 @@
+# @dpa-shared-components/UiSearchBar
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiSearchBar -->
+<template>
+  <UiSearchBar
+    v-model="value"
+    :placeholder="placeholder"
+    @input="handleEvent"
+    @focus="handleEvent"
+    @blur="handleEvent"
+    @keyup.enter="handleEvent"
+  />
+</template>
+
+<script setup lang="ts">
+  import UiSearchBar from "@dpa-shared-components";
+  const searchInput = ref();
+    const handleInput = (input) => {
+      searchInput.value = input;
+    }
+</script>
+```
+
+### Props
+| Name                       | Type      | Default          | Description                                   |
+|----------------------------|-----------|------------------|-----------------------------------------------|
+| `placeholder`              | `String`  | `""`             | Text for the `input`'s  placeholder           |
+| `value`                    | `String`  | `""`             | The `input`'s value                           |
+| `backgroundColor`          | `String`  | `"gray"`         | sets the `background-color` of the search bar |
+| `hiddenFilterRules`        | `Number`  | `0`              | Number of advance search criteria             |
+| `isFilterChipEditable`     | `Boolean` | `true`           | Defines if the Filter Chip is editable        |
+| `executeSearchButtonTtile` | `String`  | `Execute Search` | Aria-Label for searchIconBtn                  |
+| `resetSearchButtonTitle`   | `String`  | `Reset Search`   | Aria-Label for resetSearchBtn                 |
+
+### Events
+
+| Name                | Type            | Description                                              |
+| ------------------- |---------------- | -------------------------------------------------------- |
+| `blur`              | `FocusEvent`    | Emitted when the `input` loses focus                     |
+| `focus`             | `FocusEvent`    | Emitted when the `input` is focused                      |
+| `reset`             | `string`        | Emitted when the `reset` button is clicked               |
+| `search`            | `string`        | Emitted when the `search` button is clicked              |
+| `submit`            | `string`        |  |
+| `update:modelValue` | `string`        |  |
+
+### Exposes
+
+| Name             | Type               | Description                                                      |
+|------------------|--------------------|------------------------------------------------------------------|
+| `searchInputRef` | `HTMLInputElement` | Exposes a ref to the input element to the parent component       |

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

@@ -0,0 +1,82 @@
+import { describe, expect, it } from "vitest";
+import { mount, type ComponentMountingOptions } from "@vue/test-utils";
+
+import UiSearchBar from "./UiSearchBar.vue";
+
+function createWrapper(
+  options: ComponentMountingOptions<typeof UiSearchBar> = {},
+) {
+  return mount(UiSearchBar, {
+    ...options,
+  });
+}
+
+describe("UiSearchBar", () => {
+  it("renders the placeholder", () => {
+    const placeholder = "Example query";
+    const wrapper = createWrapper({ props: { placeholder } });
+
+    const textInput = wrapper.find("input");
+    expect(textInput.element.placeholder).toBe(placeholder);
+  });
+
+  it("renders the value", async () => {
+    const wrapper = createWrapper();
+
+    const searchQuery = "Ein Suchbegriff";
+    const textInput = wrapper.find("input");
+    await textInput.setValue(searchQuery);
+    expect(wrapper.emitted()["update:modelValue"]).toBeTruthy();
+    expect(textInput.element.value).toBe(searchQuery);
+  });
+
+  it("emits focus event", async () => {
+    const wrapper = createWrapper();
+
+    const textInput = wrapper.find("input");
+    await textInput.trigger("focus");
+    expect(wrapper.emitted("focus")).toBeTruthy();
+  });
+
+  it("emits blur event", async () => {
+    const wrapper = createWrapper();
+
+    const textInput = wrapper.find("input");
+    await textInput.trigger("blur");
+    expect(wrapper.emitted("blur")).toBeTruthy();
+  });
+
+  it("renders slots", () => {
+    const wrapper = createWrapper({
+      props: {
+        modelValue: "Test",
+        placeholder: "Suchen",
+        backgroundColor: "gray",
+        hiddenFilterRules: 0,
+        isFilterChipEditable: true,
+      },
+      slots: {
+        searchCriteriaButton: "<button>+ 1 Suchkriterium</button>",
+        extendedSearchButton: "<button>Erweiterte Suche</button>",
+        nonEditableChips: "<p>Favorite</p>",
+        editableChips: "<p>Hamburg</p>",
+      },
+    });
+    expect(wrapper.html()).toContain("<button>+ 1 Suchkriterium</button>");
+    expect(wrapper.html()).toContain("<button>Erweiterte Suche</button>");
+    expect(wrapper.html()).toContain("<p>Favorite</p>");
+    expect(wrapper.html()).toContain("<p>Hamburg</p>");
+  });
+
+  it("can clear input value by setting modelValue to empty string (bug fix)", async () => {
+    const wrapper = createWrapper();
+    const input = wrapper.find("input");
+    expect(input.element.value).toBe("");
+
+    await input.setValue("test");
+    expect(input.element.value).toBe("test");
+
+    await wrapper.setProps({ modelValue: "" });
+    expect(input.element.value).toBe("");
+  });
+});

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

@@ -0,0 +1,192 @@
+import UiSearchBar from "./UiSearchBar.vue";
+import UiIcon from "../UiIcon/UiIcon.vue";
+import UiIconButton from "../UiIconButton/UiIconButton.vue";
+import UiButton from "../UiButton/UiButton.vue";
+import UiChip from "../UiChip/UiChip.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+type PropsAndStoryProps = InstanceType<typeof UiSearchBar> & {
+  hiddenFilterRules: number;
+};
+
+const meta = {
+  title: "Ui/UiSearchBar",
+  component: UiSearchBar,
+  argTypes: {
+    modelValue: { control: "text" },
+    placeholder: { control: "text" },
+    backgroundColor: {
+      control: "select",
+      options: ["gray", "white"],
+    },
+    hiddenFilterRules: { control: "number" },
+    isFilterChipEditable: { control: "boolean" },
+    hasShadow: { control: "boolean" },
+    slotClass: { control: "text" },
+    resetButtonWrapperClass: { control: "text" },
+  },
+  args: {
+    modelValue: "",
+    placeholder: "Suchen",
+    backgroundColor: "gray",
+    hiddenFilterRules: 0,
+    isFilterChipEditable: true,
+    hasShadow: false,
+    slotClass: "",
+    resetButtonWrapperClass: "",
+  },
+} satisfies Meta<PropsAndStoryProps>;
+
+export default meta;
+type Story = StoryObj<PropsAndStoryProps>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiSearchBar },
+    setup() {
+      return { args };
+    },
+    template:
+      "<div class='bg-white h-24 flex items-center p-4 w-full'><UiSearchBar v-bind='args'></UiSearchBar></div>",
+  }),
+};
+
+export const WithActionButtons: Story = {
+  render: (args) => ({
+    components: {
+      UiSearchBar,
+      UiButton,
+      UiIconButton,
+      UiIcon,
+    },
+    setup() {
+      const getLabelText = (num: number) => {
+        if (!num) {
+          return "";
+        }
+        if (num > 1) {
+          return `+ ${num} Suchkriterien`;
+        }
+        return "+ 1 Suchkriterium";
+      };
+      const criteriaLabelText = () => {
+        return getLabelText(args.hiddenFilterRules);
+      };
+      return { args, criteriaLabelText };
+    },
+    template: `
+      <div class="bg-white h-24 flex items-center p-4 w-full">
+      <UiSearchBar v-bind="args">
+        <template #searchCriteriaButton>
+          <div class="mr-2">
+            <span
+              v-if="criteriaLabelText"
+              class="
+                self-center
+                mr-1
+                text-xs
+                font-medium
+                whitespace-no-wrap
+                cursor-pointer
+                text-blue
+                hover:text-blue-dark
+              "
+            >
+              {{ criteriaLabelText() }}
+            </span>
+          </div>
+        </template>
+        <template #extendedSearchButton>
+          <UiButton
+            rounded
+            size="xs"
+            class="border-none mr-1 font-semibold text-gray-800 hover:text-blue-default"
+            color="transparent"
+
+          >
+            Erweiterte Suche
+            <UiIcon
+              name="chevron-down"
+              size="medium"
+            />
+          </UiButton>
+        </template>
+        <template #resetButton>
+          <div class="mx-2">
+            <div
+              class="
+                flex
+                items-center
+                justify-center
+                flex-none
+                h-full
+                bg-gray-100
+              "
+            >
+              <UiIconButton icon-name="close" background-color="none" icon-color="gray" size="large" />
+            </div>
+          </div>
+        </template>
+        <template #searchButton>
+          <div class="flex items-center justify-center">
+            <div class="w-2 h-8 border-l border-gray-300"></div>
+            <UiIconButton icon-name="search" background-color="none" icon-color="gray" size="large" />
+          </div>
+        </template>
+      </UiSearchBar>
+      </div>`,
+  }),
+};
+
+export const WithChips: Story = {
+  render: (args) => ({
+    components: {
+      UiSearchBar,
+      UiButton,
+      UiIconButton,
+      UiIcon,
+      UiChip,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="bg-white h-24 flex items-center p-4 w-full">
+      <UiSearchBar v-bind="args">
+        <template #nonEditableChips>
+          <UiChip v-if="!args.isFilterChipEditable" class="ml-2">
+            <UiIcon
+              name="pin"
+              size="small"
+              class="mr-2"
+            />
+            <span class="text-small">Nur Top-Einträge</span>
+            <UiIconButton icon-name="close" background-color="none" icon-color="gray" size="small"
+                          class="hover:bg-gray-400 active:bg-gray-500 ml-1" />
+          </UiChip>
+        </template>
+        <template #editableChips>
+          <UiChip v-if="args.value" class="ml-2">
+            <span class="text-small">{{ args.value }}</span>
+            <UiIconButton icon-name="close" background-color="none" icon-color="gray" size="small"
+                          class="hover:bg-gray-400 active:bg-gray-500 ml-1" />
+          </UiChip>
+        </template>
+        <template #extendedSearchButton>
+          <UiButton
+            rounded
+            size="xs"
+            class="border-none mr-1 font-semibold text-gray-800 hover:text-blue-default"
+            color="transparent"
+          >
+            Erweiterte Suche
+            <UiIcon
+              name="chevron-down"
+              size="medium"
+            />
+          </UiButton>
+        </template>
+      </UiSearchBar>
+      </div>`,
+  }),
+};