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

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

@@ -0,0 +1,233 @@
+<template>
+  <div
+    class="h-12 w-full overflow-hidden rounded-full border-2 border-transparent focus-within:border-blue-default hover:border-gray-400 hover:focus-within:border-blue-default"
+    :class="[
+      bgColorClass,
+      {
+        shadow: hasShadow,
+      },
+    ]"
+  >
+    <div class="relative flex h-full">
+      <div class="flex h-full grow-0 flex-row items-center">
+        <slot name="nonEditableChips"></slot>
+      </div>
+      <div
+        v-if="!isFocused"
+        class="flex h-full grow-0 flex-row items-center overflow-hidden"
+      >
+        <slot name="editableChips"></slot>
+      </div>
+      <div class="h-full grow" @click="handleHiddenInputFocus()">
+        <input
+          ref="searchInputRef"
+          :value="modelValue"
+          class="size-full bg-transparent outline-none placeholder:text-gray-700 lg:text-sm"
+          :class="[
+            isFilterChipEditable ? 'px-4' : 'px-2',
+            !isFocused && hasChips ? 'text-transparent' : '',
+            !isFocused && (modelValue || !isFilterChipEditable)
+              ? 'absolute'
+              : '',
+          ]"
+          spellcheck="false"
+          type="text"
+          :placeholder="!isFilterChipEditable ? '' : placeholder"
+          @input="updateValue($event as InputEvent)"
+          @keyup.enter="onEnter"
+          @focus="handleFocus($event)"
+          @blur="handleBlur($event)"
+        />
+      </div>
+      <div
+        class="pointer-events-none relative flex h-full flex-none overflow-hidden"
+        :class="isFocused ? '' : '-ml-12'"
+      >
+        <!-- gradient -->
+        <div
+          v-if="!isFocused"
+          class="h-full w-12 flex-none bg-gradient-to-l"
+          :class="gradientClass"
+        ></div>
+        <div
+          :class="
+            cn(
+              'pointer-events-auto flex items-center px-2',
+              slotClass,
+              bgColorClass,
+            )
+          "
+        >
+          <div>
+            <slot name="searchCriteriaButton"></slot>
+          </div>
+          <div>
+            <slot name="extendedSearchButton"></slot>
+          </div>
+
+          <div :class="cn('mx-2', resetButtonWrapperClass)">
+            <div
+              :class="
+                cn(
+                  'flex-none items-center justify-center',
+                  resetButtonClass,
+                  'h-full',
+                  showResetButtonOnMobile ? 'flex' : 'hidden lg:flex',
+                  bgColorClass,
+                )
+              "
+            >
+              <UiIconButton
+                :disabled="hasNoEntry && !isFocused"
+                icon-name="close"
+                :title="resetSearchButtonTittle"
+                :background-color="closeBtnBgColor"
+                :icon-color="isFocused ? 'blue' : 'gray'"
+                size="medium"
+                @click="handleResetButton"
+              />
+            </div>
+          </div>
+
+          <div
+            class="flex h-full w-12 flex-none items-center justify-center"
+            :class="bgColorClass"
+          >
+            <div class="flex items-center justify-center">
+              <div class="h-8 w-2 border-l border-gray-300"></div>
+              <UiIconButton
+                icon-name="search"
+                :title="executeSearchButtonTitle"
+                :background-color="
+                  isFocused || searchIconHover ? 'blue' : 'none'
+                "
+                :icon-color="isFocused || searchIconHover ? 'white' : 'gray'"
+                size="medium"
+                @click="handleSearchButton"
+                @mouseover="searchIconHover = true"
+                @mouseleave="searchIconHover = false"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import UiIconButton from "../UiIconButton/UiIconButton.vue";
+import { cn } from "../../utils/cn.js";
+import type { ClassValue } from "clsx";
+
+const emit = defineEmits<{
+  "update:modelValue": [string];
+  blur: [FocusEvent];
+  focus: [FocusEvent];
+  reset: [string];
+  search: [string];
+  submit: [string];
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    placeholder?: string;
+    backgroundColor?: "gray" | "white";
+    isFilterChipEditable?: boolean;
+    hasChips?: boolean;
+    executeSearchButtonTitle?: string;
+    resetSearchButtonTittle?: string;
+    hasShadow?: boolean;
+    slotClass?: ClassValue | ClassValue[];
+    resetButtonWrapperClass?: ClassValue | ClassValue[];
+    resetButtonClass?: ClassValue | ClassValue[];
+    showResetButtonOnMobile?: boolean;
+  }>(),
+  {
+    modelValue: "",
+    placeholder: "",
+    backgroundColor: "gray",
+    isFilterChipEditable: true,
+    hasChips: true,
+    executeSearchButtonTitle: "Execute Search",
+    resetSearchButtonTittle: "Reset Search",
+    hasShadow: false,
+    slotClass: undefined,
+    resetButtonWrapperClass: undefined,
+    resetButtonClass: undefined,
+    showResetButtonOnMobile: false,
+  },
+);
+
+const isFocused = ref(false);
+const searchIconHover = ref(false);
+const searchInputRef = ref<HTMLInputElement>();
+
+const hasNoEntry = computed(() => {
+  return props.modelValue === "" && props.isFilterChipEditable;
+});
+
+const bgColor = {
+  gray: "bg-gray-100",
+  white: "bg-white",
+};
+
+const gradientColor = {
+  gray: "from-gray-100",
+  white: "from-white",
+};
+
+const gradientClass = computed(() => {
+  return gradientColor[props.backgroundColor as keyof typeof gradientColor];
+});
+
+const bgColorClass = computed(() => {
+  return bgColor[props.backgroundColor as keyof typeof bgColor];
+});
+
+const closeBtnBgColor = computed(() => {
+  if (props.backgroundColor === "gray") {
+    return "gray-hover";
+  }
+  return "none";
+});
+
+const updateValue = ({ target }: InputEvent): void => {
+  emit("update:modelValue", (target as HTMLInputElement).value);
+};
+
+const handleHiddenInputFocus = (): void => {
+  (searchInputRef.value as HTMLInputElement)?.focus();
+};
+
+const handleFocus = (event: FocusEvent): void => {
+  isFocused.value = true;
+  emit("focus", event);
+};
+
+const handleBlur = (event: FocusEvent): void => {
+  isFocused.value = false;
+  emit("blur", event);
+};
+
+const onEnter = (): void => {
+  isFocused.value = false;
+  (searchInputRef.value as HTMLInputElement)?.blur();
+  emit("submit", props.modelValue);
+};
+const handleResetButton = (): void => {
+  isFocused.value = false;
+  (searchInputRef.value as HTMLInputElement)?.blur();
+  emit("reset", props.modelValue);
+};
+const handleSearchButton = (): void => {
+  isFocused.value = false;
+  (searchInputRef.value as HTMLInputElement)?.blur();
+  emit("search", props.modelValue);
+};
+
+defineExpose({
+  searchInputRef,
+});
+</script>

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

@@ -0,0 +1,52 @@
+# @dpa-shared-components/UiSearchInput
+
+## Usage
+
+```html
+<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                  |
+
+### 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

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import UiSearchInput from "./UiSearchInput.vue";
+import { mount } from "@vue/test-utils";
+
+describe("UiSearchInput", () => {
+  const wrapper = mount(UiSearchInput, {
+    props: {
+      hasAddEntryOption: true,
+      placeholder: "Default placeholder",
+      modelValue: [""],
+    },
+  });
+
+  it("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);
+  });
+
+  it("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);
+  });
+
+  it("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

@@ -0,0 +1,60 @@
+import UiSearchInput from "./UiSearchInput.vue";
+import { action } from "storybook/actions";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+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

@@ -0,0 +1,144 @@
+<template>
+  <div
+    class="mb-4 grid text-gray-900 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"
+    >
+      <label class="font-medium">{{ label }}</label>
+      <slot name="tooltip"></slot>
+    </div>
+
+    <div
+      v-for="(value, index) in internalValue"
+      :key="index"
+      :class="inputWrapperClass"
+    >
+      <div class="flex items-center">
+        <input
+          ref="inputs"
+          :value="internalValue[index]"
+          type="text"
+          class="w-full py-1 pb-2 text-sm focus:outline-none"
+          :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,
+            )
+          "
+        />
+        <UiIconButton
+          v-if="hasAddEntryOption && isLastIndex(index)"
+          icon-name="plus-circle"
+          icon-color="gray"
+          background-color="none"
+          size="medium"
+          title="Add Row"
+          data-testid="add-entry"
+          :disabled="!canAddRow"
+          @click="addRow"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watchEffect } from "vue";
+import UiIconButton from "../UiIconButton/UiIconButton.vue";
+
+const props = withDefaults(
+  defineProps<{
+    hasAddEntryOption?: boolean;
+    label?: string;
+    modelValue: string[];
+    placeholder?: string;
+  }>(),
+  {
+    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 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 isLastIndex = (index: number) => {
+  return index === internalValue.value.length - 1;
+};
+
+const hasLabel = computed(() => {
+  return props.label.length > 0;
+});
+
+const inputWrapperClass = computed(() => {
+  const baseClass = "border-b border-b-gray-200 self-start flex-shrink-0";
+  return hasLabel.value
+    ? ["lg:col-start-2 lg:text-base", baseClass]
+    : [baseClass];
+});
+</script>

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

@@ -0,0 +1,31 @@
+# @dpa-shared-components/UiSection
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiSection -->
+<template>
+    <UiSection size="small" vertical-padding="small" border-top border-bottom>Section Content</UiSection>
+</template>
+
+<script>
+    import {UiSection} from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+| Name              | Type                                   | Default   | Description                                   |
+|-------------------|----------------------------------------|-----------|-----------------------------------------------|
+| `size`            | `"wide" &#124; "small"`                | `"wide"`  | Determines the spread of the section content. |
+| `verticalPadding` | `"small" &#124; "large" &#124; "none"` | `"large"` | Determines the padding of the section.        |
+| `borderTop`       | `Boolean`                              | `false`   | Displays a top border on the section.         |
+| `BorderBottom`    | `Boolean`                              | `false`   | Displays a bottom border on the section.      |
+
+### Slots
+
+| Name      | Description                                  |
+|-----------|----------------------------------------------|
+| `default` | slot for the rendering the section's content |

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

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import UiSection from "./UiSection.vue";
+
+describe("UiSection", () => {
+  const wrapper = mount(UiSection, {
+    slots: {
+      default: "Slot text",
+    },
+  });
+
+  it("renders with slot content", () => {
+    const inner = wrapper.find('[data-testid="inner"]');
+
+    expect(inner.text()).toBe("Slot text");
+  });
+
+  it("renders with border classes", async () => {
+    await wrapper.setProps({
+      borderTop: true,
+      borderBottom: true,
+    });
+    expect(wrapper.classes("border-t")).toBe(true);
+    expect(wrapper.classes("border-b")).toBe(true);
+  });
+
+  it("renders with padding classes", async () => {
+    await wrapper.setProps({
+      verticalPadding: "small",
+    });
+    const inner = wrapper.find('[data-testid="inner"]');
+
+    expect(inner.classes("lg:py-12")).toBe(true);
+    expect(inner.classes("pt-8")).toBe(true);
+    expect(inner.classes("pb-12")).toBe(true);
+  });
+
+  it("renders with size classes", async () => {
+    await wrapper.setProps({
+      size: "small",
+    });
+    const inner = wrapper.find('[data-testid="inner"]');
+
+    expect(inner.classes("w-full")).toBe(true);
+    expect(inner.classes("lg:mx-auto")).toBe(true);
+    expect(inner.classes("lg:w-2/3")).toBe(true);
+  });
+});

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

@@ -0,0 +1,59 @@
+import UiSection from "./UiSection.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+const meta = {
+  title: "Ui/UiSection",
+  component: UiSection,
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["wide", "small"],
+    },
+    verticalPadding: {
+      control: "select",
+      options: ["small", "large", "none"],
+    },
+    borderTop: {
+      control: "boolean",
+    },
+    borderBottom: {
+      control: "boolean",
+    },
+  },
+  args: {
+    size: "small",
+    verticalPadding: "large",
+    borderTop: false,
+    borderBottom: false,
+  },
+  parameters: {
+    backgrounds: { default: "gray-100" },
+  },
+} satisfies Meta<typeof UiSection>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiSection },
+    template: "<UiSection v-bind='args'>Slot</UiSection>",
+  }),
+};
+
+export const Multiple: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiSection },
+    template:
+      "<UiSection v-bind='args'>Slot1</UiSection>" +
+      "<UiSection v-bind='args'>Slot2</UiSection>" +
+      "<UiSection v-bind='args'>Slot3</UiSection>" +
+      "<UiSection v-bind='args'>Slot4</UiSection>",
+  }),
+};