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

package/dist/src/assets/icons/text-circled.vue

@@ -1,12 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    height="16"
-    width="16"
-  >
-    <path
-      d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15ZM4.75 4H11.25C11.6642 4 12 4.33579 12 4.75C12 5.16421 11.6642 5.5 11.25 5.5H4.75C4.33579 5.5 4 5.16421 4 4.75C4 4.33579 4.33579 4 4.75 4ZM4.75 7H11.25C11.6642 7 12 7.33579 12 7.75C12 8.16421 11.6642 8.5 11.25 8.5H4.75C4.33579 8.5 4 8.16421 4 7.75C4 7.33579 4.33579 7 4.75 7ZM4.75 10H8.25C8.66421 10 9 10.3358 9 10.75C9 11.1642 8.66421 11.5 8.25 11.5H4.75C4.33579 11.5 4 11.1642 4 10.75C4 10.3358 4.33579 10 4.75 10Z"
-    />
-  </svg>
-</template>

package/dist/src/assets/icons/text-filled.vue

@@ -1,12 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    height="16"
-    width="16"
-  >
-    <path
-      d="M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16ZM4.75 4C4.33579 4 4 4.33579 4 4.75C4 5.16421 4.33579 5.5 4.75 5.5H11.25C11.6642 5.5 12 5.16421 12 4.75C12 4.33579 11.6642 4 11.25 4H4.75ZM4.75 7C4.33579 7 4 7.33579 4 7.75C4 8.16421 4.33579 8.5 4.75 8.5H11.25C11.6642 8.5 12 8.16421 12 7.75C12 7.33579 11.6642 7 11.25 7H4.75ZM4.75 10C4.33579 10 4 10.3358 4 10.75C4 11.1642 4.33579 11.5 4.75 11.5H8.25C8.66421 11.5 9 11.1642 9 10.75C9 10.3358 8.66421 10 8.25 10H4.75Z"
-    />
-  </svg>
-</template>

package/dist/src/assets/icons/video-circled.vue

@@ -1,12 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    height="16"
-    width="16"
-  >
-    <path
-      d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15ZM6.7 11.8672C6.268 11.6632 6 11.2585 6 10.8099V5.19252C6 4.74385 6.268 4.33918 6.7 4.13518C7.188 3.90518 7.76667 3.97252 8.17267 4.30785L11.572 7.11718C11.8447 7.34118 12 7.66385 12 8.00118C12 8.33852 11.8447 8.66118 11.572 8.88518L8.17267 11.6939C7.92733 11.8972 7.618 12.0019 7.304 12.0019C7.09933 12.0019 6.89267 11.9579 6.7 11.8672Z"
-    />
-  </svg>
-</template>

package/dist/src/assets/icons/video-filled.vue

@@ -1,12 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    height="16"
-    width="16"
-  >
-    <path
-      d="M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16ZM7.304 12.0019C7.618 12.0019 7.92733 11.8972 8.17267 11.6939L11.572 8.88518C11.8447 8.66118 12 8.33852 12 8.00118C12 7.66385 11.8447 7.34118 11.572 7.11718L8.17267 4.30785C7.76667 3.97252 7.188 3.90518 6.7 4.13518C6.268 4.33918 6 4.74385 6 5.19252V10.8099C6 11.2585 6.268 11.6632 6.7 11.8672C6.89267 11.9579 7.09933 12.0019 7.304 12.0019Z"
-    />
-  </svg>
-</template>

package/dist/src/assets/icons/video-rounded.vue

@@ -1,13 +0,0 @@
-<template>
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M10.3846 18.0028C10.0776 18.0028 9.76759 17.9368 9.47859 17.8008C8.83059 17.4948 8.42859 16.8878 8.42859 16.2148V7.78878C8.42859 7.11578 8.83059 6.50878 9.47859 6.20278C10.2106 5.85778 11.0786 5.95878 11.6876 6.46178L16.7866 10.6758C17.1956 11.0118 17.4286 11.4958 17.4286 12.0018C17.4286 12.5078 17.1956 12.9918 16.7866 13.3278L11.6876 17.5408C11.3196 17.8458 10.8556 18.0028 10.3846 18.0028Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>

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

@@ -1,44 +0,0 @@
-# @dpa-shared-components/ui-autocomplete
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiAutocomplete -->
-<template>
-  <UiAutocomplete
-    :value="inputValue"
-    label="Name"
-    placeholder="Example: James"
-    :options="['James Cameron', 'James Bond']"
-    @input="handleEvent"
-    @select="handleEvent"
-  />
-</template>
-
-<script>
-  import UiAutocomplete from "@dpa-id-components/dpa-shared-components";
-  import { ref } from 'vue';
-
-  const inputValue = ref("")
-  const handleEvent = (value) => {
-    inputValue.value = value
-    // do something
-  }
-</script>
-```
-## API
-
-### Props
-| Name          | Type        | Default | Description                             |
-| ------------- | ----------- | ------- |---------------------------------------- |
-| `label`       | `String`    | `""`    | Text for the `input`'s `label`          |
-| `placeholder` | `String`    | `""`    | Text for the `input`'s placeholder      |
-| `value`       | `String`    | `""`    | The `input`'s value                     |
-| `options`     | `String[]`  | `[]`    | An array of possible values             |
-| `readonly`    | `boolean`   | `false` | Sets `readonly` prop of the `UiInput`   |
-
-### Events
-
-| Name     | Type     | Description                                              |
-| -------- |--------- | -------------------------------------------------------- |
-| `select` | `string` | Emitted when an option is selected                       |

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

@@ -1,39 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiAutocomplete from "./UiAutocomplete.vue";
-
-const wrapper = mount(UiAutocomplete, {
-  props: {
-    value: "",
-    label: "Sprecher/in",
-    placeholder: "",
-    options: ["Olaf Scholz", "Christian Lindner"],
-  },
-});
-describe("UiAutocomplete", () => {
-  it("renders options correctly", async () => {
-    const firstOption = wrapper.findAll('[data-testid="innerText"]')[0];
-    expect(firstOption).toBeTruthy();
-
-    const secondOption = wrapper.findAll('[data-testid="innerText"]')[1];
-    expect(secondOption).toBeTruthy();
-  });
-
-  it("should emit a select event when an option is clicked", async () => {
-    const secondOption = wrapper.findAll('[data-testid="innerText"]')[1];
-
-    await secondOption.trigger("click");
-
-    expect(wrapper.emitted().select[0]).toEqual(["Christian Lindner"]);
-  });
-
-  it("should emit a select event when an option is selected and entered via keyboard events", async () => {
-    const input = wrapper.find("input");
-    await input.trigger("keyup.down");
-    await input.trigger("keyup.down");
-    await input.trigger("keyup.enter");
-
-    expect(wrapper.emitted().select[0]).toEqual(["Christian Lindner"]);
-  });
-});

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

@@ -1,46 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
-
-import UiAutocomplete from "./UiAutocomplete.vue";
-
-const meta = {
-  title: "Ui/UiAutocomplete",
-  component: UiAutocomplete,
-  argTypes: {
-    label: { control: "text" },
-    placeholder: { control: "text" },
-    value: { control: "text" },
-    chevron: { control: "boolean" },
-    readonly: { control: "boolean" },
-    options: {
-      control: false,
-    },
-  },
-  args: {
-    label: "Label",
-    placeholder: "Autocomplete",
-    value: "",
-    readonly: false,
-    chevron: false,
-  },
-} satisfies Meta<typeof UiAutocomplete>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiAutocomplete },
-    template:
-      "<UiAutocomplete v-bind='args' @input='input' @select='select'></UiAutocomplete>",
-    methods: { input: action("input"), select: action("select") },
-  }),
-  args: {
-    label: "Sprecher/in",
-    placeholder: "Beispiel: Scholz",
-    value: "",
-    options: ["Olaf Scholz", "Christian Lindner", "Annalena Baerbock"],
-  },
-};

package/dist/src/components/UiAutocomplete/UiAutocomplete.vue

@@ -1,159 +0,0 @@
-<template>
-  <div v-click-away="hideOptions">
-    <!-- Input -->
-    <UiInput
-      ref="inputRef"
-      :label="label"
-      :placeholder="placeholder"
-      :model-value="value"
-      :chevron="chevron"
-      :readonly="readonly"
-      is-ui-autocomplete
-      @input="
-        (inputValue) => {
-          emit('select', inputValue);
-          hideOptions();
-        }
-      "
-      @keyup.down.stop.prevent="onArrowDownKey"
-      @keyup.up.stop.prevent="onArrowUpKey"
-      @keyup.enter.stop.prevent="onEnterKey()"
-      @keyup.esc.stop.prevent="
-        options && options.length && areOptionsVisible ? hideOptions() : ''
-      "
-      @focus="showOptions"
-    />
-
-    <!-- Dropdown Options -->
-    <div
-      v-show="options && options.length && areOptionsVisible"
-      ref="dropdownRef"
-      class="absolute z-10 mt-1 max-h-60 overflow-y-auto bg-white shadow-lg"
-      :style="dropdownStyle"
-    >
-      <UiList>
-        <UiListItem
-          v-for="(option, index) in options"
-          :id="`listbox-item-${index}`"
-          :key="`option-${index}`"
-          :value="option"
-          :class="`${
-            options && index === options.length - 1
-              ? 'shadow-none'
-              : 'shadow-sm'
-          } ${index === activeDescendant ? 'bg-gray-100' : ''}`"
-          :aria-label="option"
-          @list-item-click="
-            emit('select', option);
-            hideOptions();
-          "
-          @mouseenter="activeDescendant = index"
-          @mouseleave="activeDescendant = undefined"
-        >
-          {{ option }}
-        </UiListItem>
-      </UiList>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
-
-import { vClickAway } from "../../directives/vClickAway.ts";
-import UiInput from "../UiInput/UiInput.vue";
-import UiList from "../UiList/UiList.vue";
-import UiListItem from "../UiListItem/UiListItem.vue";
-
-const emit = defineEmits<{
-  select: [string];
-}>();
-
-const props = withDefaults(
-  defineProps<{
-    label?: string;
-    placeholder?: string;
-    value?: string;
-    options?: string[];
-    readonly?: boolean;
-    chevron?: boolean;
-  }>(),
-  {
-    label: "",
-    placeholder: "",
-    value: "",
-    options: () => [],
-    readonly: false,
-    chevron: false,
-  },
-);
-
-const inputRef = ref<{ inputRef: HTMLInputElement } | null>(null);
-const dropdownRef = ref<HTMLElement>();
-const dropdownWidth = ref(0);
-const areOptionsVisible = ref(false);
-const activeDescendant = ref<undefined | number>(undefined);
-const resizeObserver = ref<ResizeObserver | undefined>(undefined);
-
-const dropdownStyle = computed(() => ({
-  width: `${dropdownWidth.value}px`,
-}));
-
-function onEnterKey() {
-  if (areOptionsVisible.value && props.options.length) {
-    const selectedOption = props.options[activeDescendant.value || 0];
-    hideOptions();
-    emit("select", selectedOption);
-  }
-}
-
-function hideOptions() {
-  areOptionsVisible.value = false;
-}
-
-function showOptions() {
-  areOptionsVisible.value = true;
-}
-
-function setDropdownWidth(width = 0) {
-  if (inputRef.value) {
-    dropdownWidth.value =
-      inputRef.value.inputRef.getBoundingClientRect()?.width || width;
-  } else {
-    dropdownWidth.value = width;
-  }
-}
-
-function onArrowDownKey() {
-  if (!areOptionsVisible.value && props.options.length) {
-    areOptionsVisible.value = true;
-  }
-  if (activeDescendant.value === undefined) {
-    activeDescendant.value = 0;
-  } else if (activeDescendant.value <= props.options.length - 2) {
-    activeDescendant.value += 1;
-  }
-}
-
-function onArrowUpKey() {
-  if (!activeDescendant.value) return;
-  if (activeDescendant.value > 0) {
-    activeDescendant.value -= 1;
-  }
-}
-
-onMounted(() => {
-  if (props.options.length) {
-    showOptions();
-  }
-  setDropdownWidth();
-  if (typeof window.ResizeObserver !== "undefined") {
-    resizeObserver.value = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        setDropdownWidth(entry?.contentRect?.width);
-      }
-    });
-    resizeObserver.value.observe(inputRef.value?.inputRef as HTMLElement);
-  }
-});
-</script>

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

@@ -1,38 +0,0 @@
-# @dpa-shared-components/UiFilterBadgeButton
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiFilterBadgeButton -->
-<template>
-    <UiFilterBadgeButton color="#123" fill="#456" label="Label text"/>
-</template>
-
-<script>
-    import {UiFilterBadgeButton} from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-| Name           | Type      | Default | Description                                                                |
-|----------------|-----------|---------|----------------------------------------------------------------------------|
-| `fill`         | `String`  | `#000`  | Sets the color of the wrapper and thereby of the icon.                     |
-| `color`        | `String`  | ``      | Sets the Color of the Label                                                |
-| `label`        | `String`  | ``      | Sets the label of the Button                                               |
-| `iconIsFilled` | `boolean` | ``      | Sets whether the icon is outlined or filled                                |
-| `isActive`     | `boolean` | ``      | Sets whether the background color changes on hover or is permanently added |
-
-### Slots
-
-| Name      | Description                                             |
-|-----------|---------------------------------------------------------|
-| `default` | slot for the rendering additional content i.e. a Button |
-
-### Events
-
-| Name    | Type         | Description                       |
-|---------|--------------|-----------------------------------|
-| `click` | none         |  |

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

@@ -1,41 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiFilterBadgeButton from "./UiFilterBadgeButton.vue";
-
-describe("UiFilterBadgeButton", () => {
-  it("renders with colors set", () => {
-    const wrapper = mount(UiFilterBadgeButton, {
-      props: {
-        color: "#000",
-        fill: "#fff",
-        label: "Foo",
-      },
-    });
-    expect(wrapper.attributes().style).toBe("color: rgb(255, 255, 255);");
-    const innerText = wrapper.find('[data-testid="labelText"]');
-    expect(innerText.attributes().style).toBe("color: rgb(0, 0, 0);");
-  });
-
-  it("renders the label correctly", () => {
-    const wrapper = mount(UiFilterBadgeButton, {
-      props: {
-        label: "Foo",
-      },
-    });
-
-    expect(wrapper.text()).toBe("Foo");
-  });
-
-  it("should emit click event when clicked", async () => {
-    const wrapper = mount(UiFilterBadgeButton, {
-      props: {
-        label: "Foo",
-      },
-    });
-    const label = wrapper.find('[data-testid="labelText"]');
-    await label.trigger("click");
-
-    expect(wrapper.emitted().click).toBeTruthy();
-  });
-});

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

@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
-
-import UiIconButton from "../UiIconButton/UiIconButton.vue";
-
-import UiFilterBadgeButton from "./UiFilterBadgeButton.vue";
-
-const meta = {
-  title: "Ui/UiFilterBadgeButton",
-  component: UiFilterBadgeButton,
-  argTypes: {
-    color: {
-      control: "color",
-      defaultValue: "#666",
-    },
-    fill: {
-      control: "color",
-      defaultValue: "#666",
-    },
-    iconIsFilled: {
-      control: "boolean",
-      defaultValue: true,
-    },
-    label: {
-      control: "text",
-      defaultValue: "Example Label",
-    },
-    isActive: {
-      control: "boolean",
-      defaultValue: false,
-    },
-  },
-  args: {
-    color: "#666",
-    fill: "#666",
-    iconIsFilled: true,
-    label: "Example Label",
-    isActive: false,
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiFilterBadgeButton, UiIconButton },
-    template:
-      "<UiFilterBadgeButton v-bind='args' @click='click'>  <UiIconButton  icon-color='gray' background-color='none' icon-name='more-horizontal'/> </UiFilterBadgeButton>",
-    methods: {
-      click: action("click"),
-    },
-  }),
-} satisfies Meta<typeof UiFilterBadgeButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/dist/src/components/UiFilterBadgeButton/UiFilterBadgeButton.vue

@@ -1,50 +0,0 @@
-<template>
-  <div
-    class="group relative flex items-center px-2 py-1.5"
-    :style="{ color: fill }"
-  >
-    <UiIcon
-      class="mr-5 shrink-0"
-      :size="'small'"
-      :name="iconIsFilled ? 'saved-search-fill' : 'saved-search'"
-    />
-    <div
-      class="absolute inset-0 mt-0 size-full rounded-full opacity-10 group-hover:block"
-      :class="{ hidden: !isActive }"
-      :style="{ backgroundColor: fill }"
-    />
-    <p
-      class="z-0 w-full cursor-pointer text-sm/normal font-medium"
-      :style="{ color }"
-      data-testid="labelText"
-      @click.self="emit('click')"
-    >
-      {{ label }}
-    </p>
-    <div class="z-10">
-      <slot />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import UiIcon from "../UiIcon/UiIcon.vue";
-
-withDefaults(
-  defineProps<{
-    color?: string;
-    fill?: string;
-    iconIsFilled?: boolean;
-    label: string;
-    isActive?: boolean;
-  }>(),
-  {
-    color: "#4D4D4D",
-    fill: "#333",
-    iconIsFilled: true,
-    isActive: false,
-  },
-);
-const emit = defineEmits<{
-  click: [];
-}>();
-</script>

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

@@ -1,38 +0,0 @@
-# @dpa-shared-components/UiSimpleInput
-
-## Usage
-
-```vue
-<template>
-  <UiSimpleInput
-    placeholder="Suchen"
-    size="small"
-    :has-icon="true"
-    @input="handleInput"
-  />
-</template>
-
-<script setup>
-import { UiSimpleInput } from "@dpa-id-components/dpa-shared-components";
-
-const handleInput = (value) => {
-  console.log(value)
-}
-</script>
-```
-
-### Props
-
-| Name          | Type                                                             | Default   | Description                                |
-|---------------|------------------------------------------------------------------|-----------|--------------------------------------------|
-| `placeholder` | `string`                                                         | " "       | String of placeholder text in input field. |
-| `size`        | `"xs" &#124; "small" &#124; "medium" &#124; "large" &#124; "xl"` | `"small"` | size of search icon and placeholder text.  |
-| `hasIcon`     | `boolean`                                                        | `true`    | Toggles visibility of search icon.         |
-| `autofocus`   | `Boolean`                                                        | `false`   | Enables initial focus inside input.        |
-| `value` | `string` | Initial input value. |
-
-### Events
-
-| Name    | Type     | Description                                                 |
-|---------|----------|-------------------------------------------------------------|
-| `input` | `string` | Emits the string whenever the value in search input changes |

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

@@ -1,58 +0,0 @@
-import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiIconSearchInput from "./UiSimpleInput.vue";
-
-function createWrapper(
-  options: ComponentMountingOptions<typeof UiIconSearchInput> = {},
-) {
-  return mount(UiIconSearchInput, {
-    ...options,
-  });
-}
-
-describe("UiSimpleInput", () => {
-  it("renders attributes on correct element", () => {
-    const wrapper = createWrapper({
-      props: {
-        id: "id",
-        class: "testClass",
-        "data-testid": "testId",
-      },
-    });
-
-    const root = wrapper.find(":first-child");
-    expect(root.element.classList.contains("testClass")).toBe(true);
-    expect(root.element.getAttribute("data-testid")).not.toBe("testId");
-
-    const input = wrapper.find("input");
-    expect(input.element.classList.contains("testClass")).toBe(false);
-    expect(input.element.getAttribute("data-testid")).toBe("testId");
-    expect(input.element.getAttribute("id")).toBe("id");
-  });
-
-  it("has initial value", async () => {
-    const wrapper = createWrapper({
-      props: {
-        value: "a",
-      },
-    });
-
-    const input = wrapper.find("input");
-    expect(input.element.value).toBe("a");
-
-    await wrapper.setProps({ value: "b" });
-    expect(input.element.value).toBe("b");
-  });
-
-  it("emits search input event", async () => {
-    const wrapper = createWrapper({
-      props: {
-        placeholder: "Suchen",
-      },
-    });
-
-    await wrapper.find("input").setValue("Hello World");
-    expect(wrapper.emitted("input")).toEqual([["Hello World"]]);
-  });
-});