@dpa-id-components/dpa-shared-components 22.0.0-next.9 → 22.0.1

package/src/components/UiFilterButton/UiFilterButton.vue

@@ -1,170 +0,0 @@
-<template>
-  <div
-    :class="
-      cn(
-        'w-full px-3',
-        $attrs.class,
-        'flex cursor-pointer items-center rounded-full select-none',
-        variantClasses,
-        buttonWidth === 'full' ? 'w-full' : 'max-w-max',
-        props.size === 'xs' ? 'py-0.5' : 'py-1.5',
-      )
-    "
-    @click="onClick"
-  >
-    <button
-      class="w-full rounded-full focus:outline-hidden focus-visible:focus-outline"
-      :disabled="disabled"
-      type="button"
-      data-testid="filter-button"
-    >
-      <span
-        data-testid="filterbutton-title"
-        class="flex w-full items-center justify-between text-left text-sm/normal font-medium"
-        :class="`${textColorClass} ${props.size === 'xs' ? 'text-xs' : 'text-sm'}`"
-      >
-        <UiIcon
-          v-if="hasIcon && iconLeft"
-          :name="iconLeft"
-          :size="iconSize"
-          class="flex-none"
-          :class="
-            cn(
-              {
-                'mr-2': title.length !== 0,
-              },
-              iconLeftClass,
-            )
-          "
-        />
-        <span class="w-full grow truncate">
-          {{ title }}
-        </span>
-        <UiIcon
-          v-if="hasIcon"
-          :name="chevronIcon"
-          :class="
-            cn(
-              {
-                'origin-center rotate-180': rotateIcon,
-                'ml-2': title.length !== 0,
-              },
-              iconRightClass,
-            )
-          "
-          :size="iconSize"
-          class="flex-none"
-        />
-      </span>
-    </button>
-  </div>
-</template>
-
-<script lang="ts">
-/**
- * @deprecated Use `UiButton` instead
- */
-export default {
-  name: "UiFilterButton",
-};
-</script>
-
-<script setup lang="ts">
-import type { ClassValue } from "clsx";
-import { computed } from "vue";
-
-import { cn } from "../../utils/cn.ts";
-import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
-
-const emit = defineEmits<{
-  click: [];
-}>();
-
-const props = withDefaults(
-  defineProps<{
-    title?: string;
-    variant?:
-      | "blue-rounded"
-      | "white-rounded"
-      | "transparent-rounded"
-      | "blank"
-      | "blue-blank";
-    buttonWidth?: "full" | "max";
-    chevronIcon?: UiIconName;
-    rotateIcon?: boolean;
-    iconSize?: "xs" | "sm" | "lg";
-    size?: "xs" | "small";
-    disabled?: boolean;
-    active?: boolean;
-    hasIcon?: boolean;
-    iconLeft?: UiIconName;
-    iconLeftClass?: ClassValue | ClassValue[];
-    iconRightClass?: ClassValue | ClassValue[];
-  }>(),
-  {
-    title: "",
-    variant: "white-rounded",
-    buttonWidth: "max",
-    chevronIcon: "chevron-down",
-    rotateIcon: false,
-    iconSize: "xs",
-    size: "small",
-    disabled: false,
-    active: false,
-    hasIcon: true,
-    iconLeft: undefined,
-    iconLeftClass: undefined,
-    iconRightClass: undefined,
-  },
-);
-
-const variants = {
-  "blue-rounded": "bg-primary hover:bg-primary-dark",
-  "white-rounded":
-    "bg-neutral hover:border-neutral-subtle border border-neutral-soft",
-  blank: "bg-transparent hover:bg-neutral-faint",
-  "blue-blank": "bg-transparent hover:bg-neutral-faint",
-  "transparent-rounded":
-    "bg-transparent border border-neutral-soft hover:border-neutral-subtle",
-};
-
-const textColors = {
-  "blue-rounded": "text-neutral",
-  "white-rounded": "text-neutral-emphasis hover:text-neutral-primary",
-  blank: "text-neutral-emphasis hover:text-neutral-primary",
-  "blue-blank": "text-primary hover:text-primary-dark",
-  "transparent-rounded": "text-neutral-emphasis",
-};
-
-const variantClasses = computed(() => {
-  if (props.disabled) {
-    if (props.variant === "blank") {
-      return "border border-transparent";
-    }
-    return "bg-neutral border border-neutral-soft";
-  }
-  if (props.active) {
-    if (variants[props.variant as keyof typeof variants].includes("border")) {
-      return "bg-primary hover:bg-primary-dark border border-primary hover:border-primary-dark";
-    }
-    return "bg-primary hover:bg-primary-dark";
-  }
-  return variants[props.variant as keyof typeof variants];
-});
-
-const textColorClass = computed(() => {
-  if (props.disabled) {
-    return "text-neutral-soft";
-  }
-  if (props.active) {
-    return "text-neutral";
-  }
-  return textColors[props.variant as keyof typeof textColors];
-});
-
-const onClick = () => {
-  if (!props.disabled) {
-    emit("click");
-  }
-};
-</script>

package/src/components/UiIconButton/README.md

@@ -1,31 +0,0 @@
-# @dpa-shared-components/UiIconButton
-
-## Usage
-
-Color is set by text color:
-
-```html
-<!-- SomeComponent.vue using UiIconButton -->
-<template>
-  <UiIconButtonIcon iconName="alert"></UiIconButtonIcon>
-</template>
-
-<script>
-  import { UiIconButton } from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-| Name              | Type                                                 | Default  | Description                                                                           |
-|-------------------|------------------------------------------------------|----------|---------------------------------------------------------------------------------------|
-| `iconName`        | `UiIconName`                                         | required | Sets the `name`, which determines which svg is used as icon.                          |
-| `size`            | `"small" &#124; "medium" &#124; "large" &#124; "xl"` | `large`  | Sets the `size` attribute of the iconButton.                                          |
-| `backgroundColor` | `"blue" &#124; "none" "gray-hover"`                  | `blue`   | Sets the `color` of the button background including hover, active and disable states. |
-| `iconColor`       | `"blue" &#124; "white" &#124; "gray`                 | `white`  | Sets the `color` of the button icon including hover, active and disable states.       |
-| `disabled`        | `boolean`                                            | `false`  | Disables the button.                                                                  |
-| `title`           | `string`                                             | `""`     | Sets the aria label of the button.                                                    |
-
-### Slots

package/src/components/UiIconButton/UiIconButton.vue

@@ -1,112 +0,0 @@
-<template>
-  <button
-    :disabled="disabled"
-    :aria-label="title"
-    class="group flex flex-none items-center justify-center rounded-full focus:outline-hidden focus-visible:focus-outline"
-    :class="[colorClass, backgroundClass, buttonSizeClass]"
-    type="button"
-    @click="($event) => emit('click', $event)"
-  >
-    <UiIcon
-      class="flex items-center justify-center"
-      :name="iconName"
-      :size="iconSize"
-    />
-  </button>
-</template>
-
-<script lang="ts">
-/**
- * @deprecated Use `UiButton` instead
- */
-export default {
-  name: "UiIconButton",
-};
-</script>
-
-<script lang="ts" setup>
-import { computed, onMounted } from "vue";
-
-import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
-
-const emit = defineEmits<{
-  click: [MouseEvent];
-}>();
-
-const props = withDefaults(
-  defineProps<{
-    iconName: UiIconName;
-    title: string;
-    disabled?: boolean;
-    backgroundColor?: "blue" | "none" | "gray-hover";
-    iconColor?: "blue" | "gray" | "white";
-    size?: "small" | "medium" | "large" | "xl";
-  }>(),
-  {
-    disabled: false,
-    backgroundColor: "blue",
-    iconColor: "white",
-    size: "small",
-  },
-);
-
-const backgroundColorVariants = {
-  blue: "hover:bg-primary-dark active:bg-primary-dark bg-primary disabled:bg-neutral-faint disabled:hover:bg-none",
-  none: "hover:bg-neutral-whisper active:bg-primary disabled:hover:bg-transparent",
-  "gray-hover": "hover:bg-neutral-faint disabled:hover:bg-none",
-};
-
-const iconColorVariants = {
-  blue: "text-primary hover:text-primary-dark disabled:text-neutral-soft active:text-neutral",
-  gray: "text-neutral-emphasis hover:text-neutral-primary active:text-neutral-primary disabled:text-neutral-soft",
-  white: "text-neutral disabled:text-neutral-soft",
-};
-
-const sizeVariants = {
-  small: {
-    iconSize: "small",
-    buttonSize: "h-6 w-6",
-  },
-  medium: {
-    iconSize: "large",
-    buttonSize: "h-8 w-8",
-  },
-  large: {
-    iconSize: "large",
-    buttonSize: "h-12 w-12",
-  },
-  xl: {
-    iconSize: "large",
-    buttonSize: "h-16 w-16",
-  },
-};
-
-const backgroundClass = computed(() => {
-  return backgroundColorVariants[
-    props.backgroundColor as keyof typeof backgroundColorVariants
-  ];
-});
-
-const colorClass = computed(() => {
-  return iconColorVariants[props.iconColor as keyof typeof iconColorVariants];
-});
-
-const buttonSizeClass = computed(() => {
-  return sizeVariants[props.size as keyof typeof sizeVariants].buttonSize;
-});
-
-const iconSize = computed(() => {
-  return sizeVariants[props.size as keyof typeof sizeVariants].iconSize as
-    | "lg"
-    | "sm";
-});
-
-onMounted(() => {
-  if (window.location.origin.includes("local")) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      "Component is deprecated. It will be removed in a future update.",
-    );
-  }
-});
-</script>

package/src/components/UiList/README.md

@@ -1,31 +0,0 @@
-# @dpa-shared-components/UiList
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiList -->
-<template>
-    <UiList>
-        <UiListItem>Item 1</UiListItem>
-        <UiListItem>Item 2</UiListItem>
-        <UiListItem>Item 3</UiListItem>
-    </UiList>
-</template>
-
-<script setup lang="ts">
-    import {UiList, UiListItem} from "@dpa-id-components/dpa-shared-components";
-</script>
-
-```
-
-## API
-
-### Props
-
-This component has no properties.
-
-### Slots
-
-| Name      | Description                                                      |
-|-----------|------------------------------------------------------------------|
-| `default` | Slot for the rendering the list's content (probably UiListItems) |

package/src/components/UiList/UiList.vue

@@ -1,29 +0,0 @@
-<template>
-  <ul
-    class="rounded-sm border text-base/6 shadow-lg focus:outline-hidden sm:text-sm/5"
-  >
-    <slot />
-  </ul>
-</template>
-
-<script lang="ts">
-import { onMounted } from "vue";
-
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiList",
-  setup() {
-    onMounted(() => {
-      if (window.location.origin.includes("local")) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          "Component is deprecated. It will be removed in a future update.",
-        );
-      }
-    });
-  },
-};
-</script>

package/src/components/UiMenu/UiMenuItem.vue

@@ -1,71 +0,0 @@
-<template>
-  <UiListItem
-    :selectable="listVariant === 'selectable'"
-    :check-box-menu="listVariant === 'checkbox'"
-    :icon-size="iconSize"
-    :image-shape="imageShape"
-    :checkbox-size="checkboxSize"
-    :checkbox-appearance="checkboxAppearance"
-    :class="cn('hover:bg-neutral-whisper focus:bg-neutral-faint', $props.class)"
-    v-bind="{
-      ...(props.option
-        ? {
-            selected: props.option.selected,
-            isChecked: props.option.selected,
-            imageSrc: props.option.imageSrc,
-          }
-        : {}),
-    }"
-  >
-    <slot :option="option" />
-  </UiListItem>
-</template>
-
-<script lang="ts">
-/**
- * @deprecated Use `UiListItem` instead.
- */
-export default {
-  name: "UiMenuItem",
-  setup() {
-    onMounted(() => {
-      if (window.location.origin.includes("local")) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          "Component is deprecated. It will be removed in a future update.",
-        );
-      }
-    });
-  },
-};
-</script>
-
-<script setup lang="ts" generic="Value">
-import { type HTMLAttributes, onMounted } from "vue";
-
-import { cn } from "../../utils/cn.ts";
-import UiListItem from "../UiListItem/UiListItem.vue";
-
-import type { UiMenuOptionType } from "./UiMenu.vue";
-
-const props = withDefaults(
-  defineProps<{
-    class?: HTMLAttributes["class"];
-    option?: UiMenuOptionType<Value>;
-    listVariant?: "checkbox" | "selectable" | "blank";
-    iconSize?: "sm" | "md" | "lg";
-    imageShape?: "rounded" | "square";
-    checkboxSize?: "sm" | "md";
-    checkboxAppearance?: "primary" | "secondary";
-  }>(),
-  {
-    class: undefined,
-    option: undefined,
-    checkboxAppearance: "primary",
-    checkboxSize: "md",
-    iconSize: "sm",
-    imageShape: "square",
-    listVariant: "blank",
-  },
-);
-</script>

package/src/components/UiMenu/UiMenuList.vue

@@ -1,40 +0,0 @@
-<template>
-  <ul :class="cn('max-h-80 overflow-y-auto', $props.class)" tabindex="0">
-    <slot />
-  </ul>
-</template>
-
-<script lang="ts">
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiMenuList",
-  setup() {
-    onMounted(() => {
-      if (window.location.origin.includes("local")) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          "Component is deprecated. It will be removed in a future update.",
-        );
-      }
-    });
-  },
-};
-</script>
-
-<script lang="ts" setup>
-import { onMounted } from "vue";
-
-import { cn } from "../../utils/cn.ts";
-
-withDefaults(
-  defineProps<{
-    class?: string;
-  }>(),
-  {
-    class: undefined,
-  },
-);
-</script>

package/src/components/UiOverlay/README.md

@@ -1,38 +0,0 @@
-# @deprecated
-Component will be removed in a future update
-# @dpa-shared-components/UiOverlay
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiOverlay -->
-<template>
-    <UiOverlay>
-        <div class='grid place-items-center'>
-            <span class='text-neutral'>Here is a Overlay</span>
-        </div>
-    </UiOverlay>
-</template>
-
-<script setup lang="ts">
-    import {UiOverlay} from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-This component has no properties
-
-### Events
-
-| Name    | Type         | Description                        |
-|---------|--------------|------------------------------------|
-| `close` | none | Emitted when the Overlay is closed |
-
-### Slots
-
-| Name      | Description                                  |
-|-----------|----------------------------------------------|
-| `default` | slot for the rendering the overlay's content |

package/src/components/UiOverlay/UiOverlay.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="fixed inset-0 z-50 max-h-screen" role="dialog">
-    <div
-      class="fixed inset-0 h-screen bg-black opacity-60"
-      data-testid="background"
-      style="z-index: -1"
-      @click="emit('close')"
-    />
-    <slot />
-  </div>
-</template>
-<script lang="ts">
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiOverlay",
-};
-</script>
-<script setup lang="ts">
-import { onMounted } from "vue";
-
-const emit = defineEmits<{
-  close: [];
-}>();
-
-onMounted(() => {
-  if (window.location.origin.includes("local")) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      "Component is deprecated. It will be removed in a future update.",
-    );
-  }
-});
-</script>

package/src/components/UiOverlayMenu/README.md

@@ -1,40 +0,0 @@
-# @deprecated
-Component will be removed in a future update
-# @dpa-shared-components/UiOverlayMenu
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiOverlay -->
-<template>
-    <UiOverlayMenu :is-open="true">
-        <div class='grid place-items-center'>
-            <span class='text-neutral'>Here is Content</span>
-        </div>
-    </UiOverlayMenu>
-</template>
-
-<script setup lang="ts">
-    import {UiOverlay} from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-| Name     | Type      | Default | Description                                |
-|----------|-----------|---------|--------------------------------------------|
-| `isOpen` | `boolean` | `false` | controls if Overlay Menu is open or closed |
-
-### Events
-
-| Name    | Type         | Description                                       |
-|---------|--------------|---------------------------------------------------|
-| `close` | none | Emitted when the clicked outside the Overlay Menu |
-
-### Slots
-
-| Name      | Description                                       |
-|-----------|---------------------------------------------------|
-| `default` | slot for the rendering the overlay menu's content |

package/src/components/UiOverlayMenu/UiOverlayMenu.vue

@@ -1,51 +0,0 @@
-<template>
-  <div
-    v-show="isOpen"
-    v-click-away="close"
-    class="relative size-full border-none"
-  >
-    <div
-      class="absolute top-12 right-3 z-10 block border-t bg-neutral px-4 py-3 shadow-lg"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-<script lang="ts">
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiOverlayMenu",
-};
-</script>
-<script setup lang="ts">
-import { onMounted } from "vue";
-
-import { vClickAway } from "../../directives/vClickAway.ts";
-
-withDefaults(
-  defineProps<{
-    isOpen?: boolean;
-  }>(),
-  {
-    isOpen: false,
-  },
-);
-const emit = defineEmits<{
-  close: [];
-}>();
-const close = (): void => {
-  emit("close");
-};
-
-onMounted(() => {
-  if (window.location.origin.includes("local")) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      "Component is deprecated. It will be removed in a future update.",
-    );
-  }
-});
-</script>