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

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

@@ -1,90 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { computed, ref } from "vue";
-
-import UiButton from "../UiButton/UiButton.vue";
-import UiChip from "../UiChip/UiChip.vue";
-import UiIcon from "../UiIcon/UiIcon.vue";
-
-import UiSearchBar from "./UiSearchBar.vue";
-
-const meta = {
-  title: "Ui/UiSearchBar",
-  component: UiSearchBar,
-  args: {
-    placeholder: "Suchen",
-    appearance: "neutral-whisper",
-  },
-} satisfies Meta<typeof UiSearchBar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { UiSearchBar },
-    setup() {
-      return { args };
-    },
-    template:
-      "<div class='bg-neutral h-24 flex items-center p-4 w-full'><UiSearchBar v-bind='args'></UiSearchBar></div>",
-  }),
-};
-
-export const WithActionButtons: Story = {
-  render: (args) => ({
-    components: {
-      UiSearchBar,
-      UiButton,
-      UiIcon,
-    },
-    setup() {
-      return { args };
-    },
-    template: `
-      <UiSearchBar v-bind="args">
-        <template #action>
-          <UiButton
-            size="xs"
-            appearance="ghost"
-          >
-            Erweiterte Suche
-            <UiIcon
-              name="chevron-down"
-              size="xs"
-            />
-          </UiButton>
-        </template>
-      </UiSearchBar>`,
-  }),
-};
-
-export const WithChips: Story = {
-  render: (args) => ({
-    components: {
-      UiSearchBar,
-      UiButton,
-      UiIcon,
-      UiChip,
-    },
-    setup() {
-      const model = ref("Lorem Ipsum Dolor Sit Amet");
-      const chips = computed(() => {
-        return model.value.split(" ").filter((str) => str);
-      });
-
-      function removeChip(value: string) {
-        const arrayChips = chips.value.filter((chip) => chip !== value);
-        model.value = arrayChips.join(" ");
-      }
-      return { args, model, chips, removeChip };
-    },
-    template: `
-      <UiSearchBar v-bind="args" v-model="model" @reset="model = ''">
-        <template #chips>
-          <UiChip v-for="chip in chips" :key="chip" :close-button="true" size="md" @close="removeChip(chip)">
-            {{ chip }}
-          </UiChip>
-        </template>
-      </UiSearchBar>`,
-  }),
-};

package/dist/src/components/UiSearchBar/UiSearchBar.vue

@@ -1,128 +0,0 @@
-<template>
-  <div
-    class="h-12 w-full rounded-full outline-2 outline-transparent focus-within:outline-primary hover:outline-neutral-faint hover:focus-within:outline-primary"
-    :class="BG_COLOR[appearance]"
-  >
-    <div class="relative flex h-full items-center pl-4">
-      <div
-        v-if="!isInputFocused && model"
-        class="flex h-full grow-0 flex-row items-center gap-x-1 overflow-hidden py-2"
-        @click="searchInputRef?.focus()"
-      >
-        <slot name="chips"></slot>
-      </div>
-      <div class="h-full min-w-0 flex-1">
-        <input
-          ref="searchInputRef"
-          v-model="model"
-          class="size-full bg-transparent py-2 outline-hidden placeholder:text-neutral-subtle lg:text-sm"
-          :class="[
-            !isInputFocused && $slots.chips?.().length
-              ? 'text-transparent'
-              : '',
-          ]"
-          spellcheck="false"
-          type="text"
-          :placeholder="placeholder"
-          @keyup.enter="onEnter"
-          @focus="handleFocus($event)"
-          @blur="handleBlur($event)"
-        />
-      </div>
-      <div class="relative flex items-center gap-x-1 px-2">
-        <slot name="action"></slot>
-
-        <div class="flex items-center">
-          <UiButton
-            :class="
-              showResetButtonOnMobile ? 'inline-flex' : 'hidden sm:inline-flex'
-            "
-            :aria-label="resetSearchButtonTitle"
-            :disabled="!model"
-            appearance="ghost"
-            size="sm"
-            @click="handleResetButton"
-          >
-            <UiIcon name="close" size="sm" />
-          </UiButton>
-
-          <div class="mx-1 h-8 border-r border-neutral-faint"></div>
-
-          <UiButton
-            :aria-label="executeSearchButtonTitle"
-            :appearance="
-              isInputFocused || searchIconHover ? 'fill-emphasis' : 'ghost'
-            "
-            size="sm"
-            @click="handleSearchButton"
-            @mouseover="searchIconHover = true"
-            @mouseleave="searchIconHover = false"
-          >
-            <UiIcon name="search" size="sm" />
-          </UiButton>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, useTemplateRef } from "vue";
-
-import UiButton from "../UiButton/UiButton.vue";
-import UiIcon from "../UiIcon/UiIcon.vue";
-
-const emit = defineEmits<{
-  blur: [FocusEvent];
-  focus: [FocusEvent];
-  reset: [string];
-  search: [string];
-  submit: [string];
-}>();
-
-const model = defineModel<string>({ default: "" });
-
-const {
-  placeholder = "",
-  appearance = "neutral-whisper",
-  executeSearchButtonTitle = "Execute Search",
-  resetSearchButtonTitle = "Reset Search",
-  showResetButtonOnMobile = false,
-} = defineProps<{
-  placeholder?: string;
-  appearance?: "neutral-whisper" | "neutral";
-  executeSearchButtonTitle?: string;
-  resetSearchButtonTitle?: string;
-  showResetButtonOnMobile?: boolean;
-}>();
-
-const BG_COLOR = {
-  "neutral-whisper": "bg-neutral-whisper",
-  neutral: "bg-neutral shadow-sm",
-};
-
-const isInputFocused = ref(false);
-const searchInputRef = useTemplateRef<HTMLInputElement>("searchInputRef");
-
-const searchIconHover = ref(false);
-
-const handleFocus = (event: FocusEvent): void => {
-  isInputFocused.value = true;
-  emit("focus", event);
-};
-
-const handleBlur = (event: FocusEvent): void => {
-  isInputFocused.value = false;
-  emit("blur", event);
-};
-
-const onEnter = (): void => {
-  searchInputRef.value?.blur();
-  emit("submit", model.value);
-};
-const handleResetButton = (): void => {
-  emit("reset", model.value);
-};
-const handleSearchButton = (): void => {
-  emit("search", model.value);
-};
-</script>

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

@@ -1,58 +0,0 @@
-# @dpa-shared-components/UiSearchInput
-
-## Usage
-
-```vue
-<template>
-  <UiSearchInput
-    :has-add-entry-option="true"
-    :model-value="internalValue"
-    label="This is a Label"
-    placeholder="This is a placeholder"
-    @update:model-value="handleInput"
-    @handle-keypress="handleKeypress"
-    @blur="handleBlur"
-  />
-</template>
-
-<script setup lang="ts">
-  import { UiSearchInput } from "./UiSearchInput.vue";
-
-  const internalValue = ref([""]);
-  function handleInput(newValue) {
-    internalValue.value = newValue;
-  }
-
-  function handleKeypress({ event, value }) {
-    if (event.key === 'Enter') {
-      // do something when enter key is pressed
-    }
-  }
-
-  function handleBlur(value) {
-    // value is the same as from handleInput
-  }
-</script>
-```
-
-### Props
-| Name                | Type       | Default               | Description                                               |
-|---------------------|------------|-----------------------|-----------------------------------------------------------|
-| `hadAddEntryOption` | `boolean`  | `false`               | Ability to add more search input                          |
-| `modelValue`        | `string[]` | `required`            | Array of string arrays with the values of the input Field |
-| `label`             | `string`   | `""`                  | Sets Label for the input field                            |
-| `placeholder`       | `string`   | `Default placeholder` | Sets Placeholder attribute for the input                  |
-
-### Slots
-
-| Name      | Description   |
-|-----------|---------------|
-| `default` | Label content |
-
-### Events
-
-| Name                | Type                  | Description                                                                         |
-|---------------------|-----------------------|-------------------------------------------------------------------------------------|
-| `update:modelValue` | `UpdateValueEvent`    | Emits the Array of strings so the parent can handle the modification                |
-| `handleKeypress`    | `HandleKeypressEvent` | Emits the keyboard event and the array of strings                                   |
-| `blur`              | `BlurEven`            | Emits blur event of the input field and transports the values entered at this point |

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

@@ -1,45 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiSearchInput from "./UiSearchInput.vue";
-
-describe("UiSearchInput", () => {
-  const wrapper = mount(UiSearchInput, {
-    props: {
-      hasAddEntryOption: true,
-      placeholder: "Default placeholder",
-      modelValue: [""],
-    },
-  });
-
-  test("displays and emits entries", async () => {
-    const searchQuery = "Suchbegriff";
-    const textInput = wrapper.find("input");
-    await textInput.setValue(searchQuery);
-    expect(wrapper.emitted().input).toBeTruthy();
-    expect(textInput.element.value).toBe(searchQuery);
-  });
-
-  test("adds searchbar row when addRow button is clicked", async () => {
-    const searchQuery = "Suchbegriff";
-    const textInput = wrapper.find("input");
-    await textInput.setValue(searchQuery);
-    await textInput.trigger("input");
-    const addRowButton = wrapper.find("button");
-    await addRowButton.trigger("click");
-    expect(wrapper.findAll("input")).toHaveLength(2);
-  });
-
-  test("deletes second row when there is no text in the searchbar", async () => {
-    const searchQuery = "Suchbegriff";
-    const textInput = wrapper.find("input");
-    await textInput.setValue(searchQuery);
-    await textInput.trigger("input");
-    const addRowButton = wrapper.find("button");
-    await addRowButton.trigger("click");
-
-    const [, secondInput] = wrapper.findAll("input");
-    await secondInput.trigger("keyup.delete");
-    expect(wrapper.findAll("input")).toHaveLength(1);
-  });
-});

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

@@ -1,61 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
-
-import UiSearchInput from "./UiSearchInput.vue";
-
-const meta = {
-  title: "Ui/UiSearchInput",
-  component: UiSearchInput,
-  argTypes: {
-    hasAddEntryOption: {
-      control: "boolean",
-    },
-    label: {
-      control: "text",
-    },
-    modelValue: {
-      control: {
-        type: "object",
-      },
-    },
-    placeholder: {
-      control: "text",
-    },
-  },
-  args: {
-    hasAddEntryOption: false,
-    label: "",
-    modelValue: [""],
-    placeholder: "Default placeholder",
-  },
-  parameters: {
-    backgrounds: { default: "white" },
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiSearchInput },
-    template:
-      "<UiSearchInput v-bind='args' :model-value='args.modelValue' @update:model-value='action' />",
-    methods: { action: action("update:modelValue") },
-  }),
-} satisfies Meta<typeof UiSearchInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithLabel = {
-  args: {
-    label: "Default label",
-  },
-};
-
-export const MultipleInputs = {
-  args: {
-    label: "Default label",
-    hasAddEntryOption: true,
-  },
-};

package/dist/src/components/UiSearchInput/UiSearchInput.vue

@@ -1,178 +0,0 @@
-<template>
-  <div
-    class="mb-4 grid text-neutral-primary lg:mb-0 lg:grid-rows-1 lg:gap-y-5"
-    :class="{
-      'lg:grid-cols-[224px_1fr]': hasLabel,
-      'lg:grid-cols-1': !hasLabel,
-    }"
-  >
-    <div
-      v-if="hasLabel"
-      class="col-span-1 flex items-center pr-5 text-sm lg:py-2"
-    >
-      <UiLabel :for="uniqueId" class="font-medium">
-        <slot>
-          {{ label }}
-        </slot>
-      </UiLabel>
-      <slot name="tooltip"></slot>
-    </div>
-
-    <div
-      v-for="(value, index) in internalValue"
-      :key="index"
-      :class="inputWrapperClass"
-    >
-      <div class="flex items-center">
-        <input
-          :id="uniqueId"
-          ref="inputs"
-          :value="internalValue[index]"
-          type="text"
-          class="w-full py-1 pb-2 text-sm focus:outline-hidden"
-          :placeholder="placeholder"
-          @input="updateValue(index, ($event.target as HTMLInputElement).value)"
-          @blur="handleBlur"
-          @keyup.delete="
-            deleteRow(index, ($event.target as HTMLInputElement).value)
-          "
-          @keydown="
-            handleKeydown(
-              index,
-              ($event.target as HTMLInputElement).value,
-              $event,
-            )
-          "
-        />
-        <UiButton
-          v-if="hasAddEntryOption && index === internalValue.length - 1"
-          aria-label="Add Row"
-          :disabled="!canAddRow"
-          appearance="ghost"
-          size="sm"
-          data-testid="add-entry"
-          @click="addRow"
-        >
-          <UiIcon name="plus" />
-        </UiButton>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  computed,
-  nextTick,
-  onBeforeUpdate,
-  ref,
-  useId,
-  watchEffect,
-} from "vue";
-
-import UiButton from "../UiButton/UiButton.vue";
-import UiIcon from "../UiIcon/UiIcon.vue";
-import UiLabel from "../UiLabel/UiLabel.vue";
-
-const slots = defineSlots<{
-  /**
-   * Label content.
-   */
-  default?: () => any;
-  /**
-   * Tooltip content.
-   */
-  tooltip?: () => any;
-}>();
-
-const props = withDefaults(
-  defineProps<{
-    id?: string;
-    hasAddEntryOption?: boolean;
-    label?: string;
-    modelValue: string[];
-    placeholder?: string;
-  }>(),
-  {
-    id: undefined,
-    hasAddEntryOption: false,
-    placeholder: "Default placeholder",
-    label: "",
-  },
-);
-
-const internalValue = ref([""]);
-
-const stopPropWatching = watchEffect(() => {
-  internalValue.value = props.modelValue;
-});
-
-const inputs = ref<HTMLInputElement[] | null>(null);
-const addRow = async () => {
-  internalValue.value.push("");
-  if (inputs.value) {
-    await nextTick();
-    inputs.value[inputs.value?.length - 1].focus();
-  }
-};
-
-const defaultId = useId();
-const uniqueId = computed(() => props.id ?? `id-${defaultId}`);
-
-const canAddRow = computed(() => {
-  return (
-    internalValue.value[internalValue.value.length - 1].length > 0 &&
-    props.hasAddEntryOption
-  );
-});
-
-const deleteRow = (index: number, value: string) => {
-  if (props.hasAddEntryOption && value.length === 0 && index !== 0) {
-    internalValue.value.splice(index, 1);
-  }
-};
-
-const emit = defineEmits<{
-  "update:modelValue": [string[]];
-  handleKeypress: [{ event: KeyboardEvent; value: string[] }];
-  blur: [string[]];
-}>();
-
-function updateValue(index: number, newValue: string) {
-  stopPropWatching();
-  if (newValue.length === 0 && index > 0) {
-    return;
-  }
-
-  internalValue.value[index] = newValue;
-  emit("update:modelValue", internalValue.value);
-}
-
-function handleKeydown(index: number, newValue: string, event: KeyboardEvent) {
-  const newValues = [...internalValue.value];
-  newValues[index] = newValue;
-  emit("handleKeypress", { event, value: newValues });
-}
-
-function handleBlur() {
-  emit("blur", internalValue.value);
-}
-
-const hasDefaultSlot = ref("default" in slots);
-
-// Manually tracks whether the “errors” slot is in use since `useSlots()` isn't reactive and so can't be correctly used inside computed reactive state.
-onBeforeUpdate(() => {
-  hasDefaultSlot.value = "default" in slots;
-});
-
-const hasLabel = computed(() => {
-  return hasDefaultSlot.value || props.label.length > 0;
-});
-
-const inputWrapperClass = computed(() => {
-  const baseClass = "border-b border-b-neutral-pale self-start shrink-0";
-  return hasLabel.value
-    ? ["lg:col-start-2 lg:text-base", baseClass]
-    : [baseClass];
-});
-</script>

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

@@ -1,54 +0,0 @@
-# UiSelect
-
-Wraps the native `select` element.
-
-## Usage
-
-```vue
-
-<UiSelect
-  v-model="appearance"
-  name="appearance"
-  required
->
-  Appearance
-
-  <template #options>
-    <option
-      v-for="appearance in appearances"
-      :key="appearance.id"
-      :value="appearance.id"
-    >
-      {{ appearance.name }}
-    </option>
-  </template>
-</UiSelect>
-```
-
-## Props
-
-**Note**: This component binds all non-prop attributes (apart from `class`) on its principal element (the `select` element) instead of the root element. This allows you to add arbitrary HTML attributes (and event listeners) on the principal element without them being explicitly supported by the component.
-
-### modelValue
-
-- **Description**: Sets the `value` IDL attribute of the underlying `select` element. Allows using `v-model` on `UiSelect`.
-- **Type**: `string`
-- **Required**: No
-- **Default**: `undefined`
-
-## Slots
-
-### default
-
-The label content.
-
-### options
-
-Receives arbitrarily many `option` elements (or anything that is allowed in a native `select` element, see [select: Technical summary](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select#technical_summary)).
-
-## Events
-
-### update:modelValue
-
-- **Description**: Fired when `select` fires `input`. Allows using `v-model` on `UiSelect`.
-- **Type**: `string`