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

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

@@ -1,98 +0,0 @@
-<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-hidden"
-      :class="[paddingClasses, fontSizeClasses]"
-      :placeholder="placeholder"
-      :value="value"
-      @input="updateValue($event as InputEvent)"
-    />
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed, nextTick, onMounted, ref, watch } from "vue";
-
-import UiIcon from "../UiIcon/UiIcon.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>