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

package/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/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/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/src/components/UiSection/UiSection.vue

@@ -0,0 +1,45 @@
+<template>
+  <section :class="borderClass" class="w-full border-gray-200 bg-white">
+    <div
+      :class="[sizeClasses[size], paddingClasses[verticalPadding]]"
+      data-testid="inner"
+    >
+      <slot></slot>
+    </div>
+  </section>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    size?: "wide" | "small";
+    verticalPadding?: "small" | "large" | "none";
+    borderTop?: boolean;
+    borderBottom?: boolean;
+  }>(),
+  {
+    size: "wide",
+    verticalPadding: "large",
+    borderTop: false,
+    borderBottom: false,
+  },
+);
+
+const sizeClasses: Record<string, string> = {
+  wide: "w-full  md:px-28 text-gray-900 lg:flex",
+  small: "w-full lg:mx-auto lg:w-2/3",
+};
+
+const paddingClasses: Record<string, string> = {
+  small: "lg:py-12 pt-8 pb-12",
+  large: "py-24",
+  none: "py-0",
+};
+
+const borderClass = computed(() => {
+  const borderTopClass = props.borderTop ? "border-t" : "";
+  const borderBottomClass = props.borderBottom ? "border-b" : "";
+  return `${borderTopClass} ${borderBottomClass}`;
+});
+</script>

package/src/components/UiSectionDivider/README.md

@@ -0,0 +1,27 @@
+# @dpa-shared-components/UiSectionDivider
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiSectionDivider -->
+<template>
+    <UiSectionDivider></UiSectionDivider>
+</template>
+
+<script>
+    import {UiSectionDivider} from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+| Name            | Type                     | Default   | Description            |
+|-----------------|--------------------------|-----------|------------------------|
+| `size`          | `"large" &#124; "small"` | `"large"` | Determines the height. |
+| `customClasses` | `String`                 | `""`      | Custom class string.   |
+
+### Slots
+
+This component has no slot

package/src/components/UiSectionDivider/UiSectionDivider.vue

@@ -0,0 +1,27 @@
+<template>
+  <div :class="[sizeClass, customClasses]" class="bg-gray-100" />
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    size?: "small" | "large";
+    customClasses?: string[] | string;
+  }>(),
+  {
+    customClasses: "",
+    size: "large",
+  },
+);
+
+const sizeClasses: Record<string, string> = {
+  small: "h-px",
+  large: "h-4",
+};
+
+const sizeClass = computed(() => {
+  return sizeClasses[props.size];
+});
+</script>

package/src/components/UiSimpleInput/README.md

@@ -0,0 +1,38 @@
+# @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/src/components/UiSimpleInput/UiSimpleInput.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="flex items-center" :class="$attrs.class">
+    <UiIcon
+      v-if="hasIcon"
+      class="absolute text-gray-700"
+      name="search"
+      :size="size"
+    />
+    <input
+      ref="autofocusRef"
+      data-testid="simple-input"
+      v-bind="{ ...$attrs, class: null }"
+      type="text"
+      spellcheck="false"
+      class="w-full focus:outline-none"
+      :class="[paddingClasses, fontSizeClasses]"
+      :placeholder="placeholder"
+      :value="value"
+      @input="updateValue($event as InputEvent)"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import UiIcon from "../UiIcon/UiIcon.vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const emit = defineEmits<{
+  input: [string];
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    value?: string;
+    placeholder?: string;
+    size?: "xs" | "small" | "medium" | "large" | "xl";
+    hasIcon?: boolean;
+    autofocus?: boolean;
+  }>(),
+  {
+    value: "",
+    placeholder: "",
+    size: "small",
+    hasIcon: true,
+    autofocus: false,
+  },
+);
+
+const autofocusRef = ref<HTMLInputElement | null>(null);
+
+const setAutofocus = () => {
+  if (props.autofocus && autofocusRef.value) {
+    autofocusRef.value.focus();
+  }
+};
+
+watch(
+  () => props.autofocus,
+  () => {
+    nextTick(setAutofocus);
+  },
+);
+
+onMounted(async () => {
+  setAutofocus();
+});
+
+const paddingClasses = computed(() => {
+  if (!props.hasIcon) return "";
+  const sizeLookup = {
+    xs: "pl-4",
+    small: "pl-6",
+    medium: "pl-7",
+    large: "pl-9",
+    xl: "pl-14",
+  };
+  return sizeLookup[props.size as keyof typeof sizeLookup];
+});
+
+const fontSizeClasses = computed(() => {
+  const sizeLookup = {
+    xs: "text-xs",
+    small: "text-sm",
+    medium: "text-base",
+    large: "text-lg",
+    xl: "text-xl",
+  };
+  return sizeLookup[props.size as keyof typeof sizeLookup];
+});
+
+const updateValue = ({ target }: InputEvent): void => {
+  emit("input", (target as HTMLInputElement).value);
+};
+</script>

package/src/components/UiSkeletonBox/README.md

@@ -0,0 +1,28 @@
+# @dpa-shared-components/UiSkeletonBox
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiSkeletonBox -->
+<template>
+    <UiSkeletonBox dynamicSize></UiSkeletonBox>
+</template>
+
+<script>
+    import {UiSkeletonBox} from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+| Name          | Type      | Default | Description                        |
+|---------------|-----------|---------|------------------------------------|
+| `dynamicSize` | `Boolean` | `false` | If true, generates a random width. |
+| `maxWidth`    | `Number`  | `100`   | Max width for random width.        |
+| `minWidth`    | `Number`  | `80`    | Min width for random width.        |
+
+### Slots
+
+This component has no slots

package/src/components/UiSkeletonBox/UiSkeletonBox.vue

@@ -0,0 +1,38 @@
+<template>
+  <span
+    class="inline-block animate-pulse rounded bg-gray-200"
+    :class="{
+      'h-4 w-full': dynamicSize,
+    }"
+    :style="{ width: computedWidth as string }"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    maxWidth?: number;
+    minWidth?: number;
+    dynamicSize?: boolean;
+  }>(),
+  {
+    maxWidth: 100,
+    minWidth: 80,
+    dynamicSize: false,
+  },
+);
+
+/**
+ * Use either given width or random width between min and max value
+ */
+const computedWidth = computed(() => {
+  return (
+    props.dynamicSize &&
+    `${Math.floor(
+      Math.random() * (props.maxWidth - props.minWidth) + props.minWidth,
+    )}%`
+  );
+});
+</script>

package/src/components/UiSnackbar/README.md

@@ -0,0 +1,55 @@
+# @dpa-id-components/UiSnackbar
+
+## Installation
+
+```
+yarn add @dpa-id-components/UiSnackbar
+```
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiSnackbar -->
+<template>
+  <UiSnackbar :is-shown="isVisible" @action-click="handleAction">
+    HELLO
+    <template #action>action</template>
+  </UiSnackbar>
+</template>
+
+<script setup lang="ts">
+  import UiSnackbar from "@dpa-id-components/UiSnackbar";
+
+  const isVisible = ref(false);
+
+  const handleAction = () => {
+    console.log("do something");
+  };
+</script>
+```
+
+## API
+
+### Props
+
+| Name       | Type                             | Default  | Description                                                  |
+| ---------- | -------------------------------- | -------- | ------------------------------------------------------------ |
+| `isShown`  | `boolean`                        | `false`  | Visibility of the snackbar.                                  |
+| `position` | `left` or `right`                | `left`   | Location of the snackbar, fixed in the viewport.             |
+| `iconName` | `UiIconName`                     | required | Sets the `name`, which determines which svg is used as icon. |
+| `iconSize` | `small`, `medium`, `large`       | `medium` | Sets the `size` of the icon.                                 |
+| `type`     | `info`, `warning`                | `info`   | Sets the overall design of the snackbar.                     |
+
+### Slots
+
+| Name      | Description                             |
+| --------- | --------------------------------------- |
+| `default` | Default slot for text of the snackbar   |
+| `action`  | Optional slot for text in action button |
+
+### Events
+
+| Name           | Type      | Description                            |
+| -------------- | --------- | -------------------------------------- |
+| `action-click` | none      | Emitted when the action is clicked     |
+| `input`        | `boolean` | Emitted when the snackbar gets visible |

package/src/components/UiSnackbar/UiSnackbar.vue

@@ -0,0 +1,86 @@
+<template>
+  <transition
+    enter-active-class="duration-200 ease-out"
+    enter-from-class="transform opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="duration-200 ease-in"
+    leave-from-class="opacity-100"
+    leave-to-class="transform opacity-0"
+  >
+    <div
+      v-if="isShown"
+      role="status"
+      class="fixed bottom-5 sm:bottom-12"
+      :class="{
+        'left-5 sm:left-12': position === 'left',
+        'right-5 sm:right-12': position === 'right',
+      }"
+    >
+      <div
+        class="flex items-center rounded-full px-4 py-3 shadow-md ease-in"
+        :class="{
+          'bg-red-500 text-white': type === 'error',
+          'bg-gray-900 text-white': type === 'info',
+          'bg-green-primary text-white': type === 'success',
+        }"
+      >
+        <UiIcon
+          v-if="iconName || type === 'error'"
+          :name="iconName || 'alert-fill'"
+          :size="iconSize"
+          class="mr-2 text-white"
+        />
+
+        <p class="text-sm font-normal leading-5">
+          <slot />
+        </p>
+
+        <button
+          v-if="$slots.action"
+          ref="actionBtn"
+          type="button"
+          class="pointer ml-3 text-sm font-bold leading-5 hover:underline focus:outline-none focus-visible:underline"
+          @click="emit('action-click')"
+        >
+          <slot name="action" />
+        </button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { watch } from "vue";
+import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
+
+const emit = defineEmits<{
+  input: [boolean];
+  "action-click": [];
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    isShown?: boolean;
+    position?: "left" | "right";
+    iconName?: UiIconName | null;
+    iconSize?: "small" | "medium" | "large";
+    type?: "info" | "error" | "success";
+  }>(),
+  {
+    isShown: false,
+    position: "left",
+    iconName: null,
+    iconSize: "large",
+    type: "info",
+  },
+);
+
+watch(
+  () => props.isShown,
+  (isShown) => {
+    if (isShown) {
+      emit("input", isShown);
+    }
+  },
+);
+</script>