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

package/src/components/UiSelect/UiSelect.vue

@@ -1,27 +1,13 @@
 <template>
-  <div :class="cn('relative', $attrs.class as string)">
+  <div :class="cn('relative', $attrs.class)">
     <UiLabel
       v-if="$slots.default"
-      :for="id"
+      :for="uniqueId"
       :class="
         cn(
-          `
-            absolute
-            left-3
-            z-1
-            origin-left
-            px-1
-            text-gray-500
-            transition-all
-            duration-150
-            [*:has(+select:where(:enabled:hover))]:text-gray-700
-            [*:has(+select:where(:focus))]:text-blue-default
-            [*:has(+select:where([aria-invalid=true]))]:text-alert-red-default
-            [*:has(+select:where([aria-invalid=true]:enabled:hover))]:text-alert-red-dark
-            [*:has(+select:where([aria-invalid=true]:focus))]:text-alert-red-dark
-          `,
+          'absolute left-3 z-1 origin-left px-1 text-neutral-muted transition-all duration-150 [*:has(+select:where(:enabled:hover))]:text-neutral-subtle [*:has(+select:where(:focus))]:text-primary [*:has(+select:where([aria-invalid=true]))]:text-error [*:has(+select:where([aria-invalid=true]:enabled:hover))]:text-error-hover [*:has(+select:where([aria-invalid=true]:focus))]:text-error-hover',
           model !== undefined
-            ? '-translate-y-1/2 bg-white text-xs'
+            ? '-translate-y-1/2 bg-neutral text-xs'
             : 'translate-y-4',
         )
       "
@@ -30,42 +16,11 @@
     </UiLabel>
 
     <select
-      :id
+      :id="uniqueId"
       v-model="model"
       :aria-invalid="Boolean($slots.errors)"
-      :aria-errormessage="$slots.errors ? `${id}-errors` : undefined"
-      :class="
-        cn(`
-          peer
-          disabled:text-color-gray-400
-          h-14
-          w-full
-          appearance-none
-          rounded-t-sm
-          border
-          border-gray-300
-          p-4
-          pr-2
-          text-left
-          text-sm
-          text-gray-900
-          transition-all
-          duration-150
-          outline-none
-          not-aria-invalid:rounded-b-sm
-          placeholder:text-gray-500
-          focus:border-2
-          focus:border-blue-default
-          focus:p-inputFocused
-          enabled:not-focus:hover:border-gray-700
-          disabled:border-gray-500
-          disabled:opacity-70
-          aria-invalid:border-2
-          aria-invalid:border-alert-red-default
-          aria-invalid:focus:border-alert-red-dark
-          enabled:aria-invalid:hover:border-alert-red-dark
-        `)
-      "
+      :aria-errormessage="$slots.errors ? `${uniqueId}-errors` : undefined"
+      class="peer disabled:text-color-neutral-soft h-14 w-full appearance-none rounded-t-sm border border-neutral-faint p-4 pr-2 text-left text-sm text-neutral-primary transition-all duration-150 outline-none not-aria-invalid:rounded-b-sm placeholder:text-neutral-muted focus:border-2 focus:border-primary focus:p-inputFocused not-read-only:enabled:cursor-pointer enabled:not-focus:hover:border-neutral-subtle disabled:border-neutral-muted disabled:opacity-70 aria-invalid:border-2 aria-invalid:border-error aria-invalid:focus:border-error-hover enabled:aria-invalid:hover:border-error-hover"
       v-bind="{ ...$attrs, class: null }"
     >
       <slot name="options" />
@@ -78,25 +33,8 @@
 
     <div
       v-if="$slots.errors"
-      :id="`${id}-errors`"
-      :class="
-        cn(`
-          rounded-b-sm
-          bg-alert-red-default
-          px-4
-          py-1
-          text-xs/normal
-
-          font-medium
-          text-white
-          transition-all
-          duration-150
-          ease-in-out
-          peer-focus:bg-alert-red-dark
-          peer-enabled:peer-hover:bg-alert-red-dark
-          peer-disabled:opacity-70
-        `)
-      "
+      :id="`${uniqueId}-errors`"
+      class="rounded-b-sm bg-error px-4 py-1 text-xs/normal font-medium text-neutral transition-all duration-150 ease-in-out peer-focus:bg-error-hover peer-enabled:peer-hover:bg-error-hover peer-disabled:opacity-70"
     >
       <slot name="errors" />
     </div>
@@ -104,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { v4 as uuidv4 } from "uuid";
+import { computed, useId } from "vue";
 
 import { cn } from "../../utils/cn.ts";
 import UiIcon from "../UiIcon/UiIcon.vue";
@@ -129,7 +67,7 @@ defineSlots<{
   options: () => any;
 }>();
 
-const { id = `id-${uuidv4()}` } = defineProps<{
+const { id = undefined } = defineProps<{
   /**
    * ID of the `select` element. Used for the `label`'s `for` attribute if the `default` slot is provided.
    */
@@ -137,6 +75,9 @@ const { id = `id-${uuidv4()}` } = defineProps<{
 }>();
 
 const model = defineModel<string>();
+
+const defaultId = useId();
+const uniqueId = computed(() => id ?? `id-${defaultId}`);
 </script>
 
 <style scoped>
@@ -148,7 +89,7 @@ select,
 }
 
 ::picker(select) {
-  @apply shadow-md border border-gray-100;
+  @apply shadow-lg border border-neutral-whisper;
 }
 
 select::picker-icon {
@@ -159,7 +100,7 @@ select > :deep(option) {
   @apply flex justify-between items-center px-4 py-3;
 
   &:enabled:hover {
-    @apply bg-gray-200;
+    @apply bg-neutral-pale;
   }
 
   &::checkmark {
@@ -167,7 +108,7 @@ select > :deep(option) {
   }
 
   & + option {
-    @apply border-t border-gray-100;
+    @apply border-t border-neutral-whisper;
   }
 }
 </style>

package/src/components/UiSkeletonBox/UiSkeletonBox.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="inline-block animate-pulse rounded-sm bg-gray-200"
+    class="inline-block animate-pulse rounded-sm bg-neutral-pale"
     :class="{
       'h-4 w-full': dynamicSize,
     }"
@@ -11,28 +11,23 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-const props = withDefaults(
-  defineProps<{
-    maxWidth?: number;
-    minWidth?: number;
-    dynamicSize?: boolean;
-  }>(),
-  {
-    maxWidth: 100,
-    minWidth: 80,
-    dynamicSize: false,
-  },
-);
+const {
+  maxWidth = 100,
+  minWidth = 80,
+  dynamicSize = false,
+} = defineProps<{
+  maxWidth?: number;
+  minWidth?: number;
+  dynamicSize?: boolean;
+}>();
 
 /**
  * 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,
-    )}%`
+    dynamicSize &&
+    `${Math.floor(Math.random() * (maxWidth - minWidth) + minWidth)}%`
   );
 });
 </script>

package/src/components/UiSnackbar/UiSnackbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition
+  <Transition
     enter-active-class="duration-200 ease-out"
     enter-from-class="transform opacity-0"
     enter-to-class="opacity-100"
@@ -19,16 +19,16 @@
       <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',
+          'bg-accent-red text-neutral': type === 'error',
+          'bg-neutral-primary text-neutral': type === 'info',
+          'bg-accent-green text-neutral': type === 'success',
         }"
       >
         <UiIcon
           v-if="iconName || type === 'error'"
-          :name="iconName || 'alert-fill'"
+          :name="iconName || 'alert-filled'"
           :size="iconSize"
-          class="mr-2 text-white"
+          class="mr-2 text-neutral"
         />
 
         <p class="text-sm/5 font-normal">
@@ -39,45 +39,42 @@
           v-if="$slots.action"
           ref="actionBtn"
           type="button"
-          class="ml-3 cursor-pointer text-sm/5 font-bold hover:underline focus:outline-hidden focus-visible:underline"
+          class="ml-3 cursor-pointer text-sm/5 font-semibold hover:underline focus:outline-hidden focus-visible:underline"
           @click="emit('action-click')"
         >
           <slot name="action" />
         </button>
       </div>
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <script setup lang="ts">
 import { watch } from "vue";
 
-import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
+import UiIcon, { ICON_SIZES, 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",
-  },
-);
+const {
+  isShown = false,
+  position = "left",
+  iconName = undefined,
+  iconSize = "lg",
+  type = "info",
+} = defineProps<{
+  isShown?: boolean;
+  position?: "left" | "right";
+  iconName?: UiIconName;
+  iconSize?: Extract<keyof typeof ICON_SIZES, "sm" | "md" | "lg">;
+  type?: "info" | "error" | "success";
+}>();
 
 watch(
-  () => props.isShown,
+  () => isShown,
   (isShown) => {
     if (isShown) {
       emit("input", isShown);

package/src/components/UiSpinner/README.md

@@ -5,7 +5,7 @@
 ```html
 <!-- SomeComponent.vue using UiSpinner -->
 <template>
-    <UiSpinner color="#000"></UiSpinner>
+    <UiSpinner appearance="primary" size="lg"></UiSpinner>
 </template>
 
 <script>
@@ -17,9 +17,11 @@
 
 ### Props
 
-| Name    | Type     | Default     | Description                        |
-|---------|----------|-------------|------------------------------------|
-| `color` | `String` | `"#00E281"` | Color string for css inline color. |
+| Name         | Type     | Default   | Description                                                                             |
+|--------------|----------|-----------|-----------------------------------------------------------------------------------------|
+| `appearance` | `String` | `primary` | Sets the color theme for the spinner, affecting both the background circle and the arc. |
+| `size`       | `String` | `lg`      | sets size of the spinner                                                                |
+
 
 ### Slots
 

package/src/components/UiSpinner/UiSpinner.vue

@@ -1,104 +1,72 @@
 <template>
-  <div :class="colorClass">
+  <div :class="sizeClass">
     <svg
-      v-if="variant === 'bubbles'"
-      class="mx-auto"
-      width="100"
-      height="40"
-      viewBox="0 0 100 40"
+      class="animate-spin"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="25" cy="20" r="3.5" fill="currentColor">
-        <animateTransform
-          attributeName="transform"
-          type="translate"
-          dur="1.8s"
-          values="0,0;-25,-20;0,0;25,20;0,0"
-          repeatCount="indefinite"
-          easing="ease-in-out"
-          begin="0.16s"
-        />
-        <animateTransform
-          attributeName="transform"
-          additive="sum"
-          type="scale"
-          dur="1.8s"
-          values="1; 2; 1; 0; 1"
-          repeatCount="indefinite"
-          easing="ease-in-out"
-          begin="0.16s"
-        />
-      </circle>
-      <circle cx="50" cy="20" r="3.5" fill="currentColor">
-        <animateTransform
-          attributeName="transform"
-          type="translate"
-          dur="1.8s"
-          values="0,0;-50,-20;0,0;50,20;0,0"
-          repeatCount="indefinite"
-          easing="ease-in-out"
-          begin="0.26s"
-        />
-        <animateTransform
-          attributeName="transform"
-          additive="sum"
-          type="scale"
-          dur="1.8s"
-          values="1; 2; 1; 0; 1"
-          repeatCount="indefinite"
-          easing="ease-in-out"
-          begin="0.26s"
-        />
-      </circle>
-      <circle cx="75" cy="20" r="3.5" fill="currentColor">
-        <animateTransform
-          attributeName="transform"
-          type="translate"
-          dur="1.8s"
-          values="0,0;-75,-20;0,0;75,20;0,0"
-          repeatCount="indefinite"
-          easing="ease-in-out"
-          begin="0.42s"
-        />
-        <animateTransform
-          attributeName="transform"
-          additive="sum"
-          type="scale"
-          dur="1.8s"
-          values="1; 2; 1; 0; 1"
-          repeatCount="indefinite"
-          easing="ease-in-out"
-          begin="0.42s"
-        />
-      </circle>
+      <circle
+        cx="16"
+        cy="16"
+        r="14.5"
+        data-testid="background-circle"
+        stroke="currentColor"
+        :class="backgroundClass"
+        stroke-width="3"
+        fill="none"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        r="14.5"
+        data-testid="arc-circle"
+        stroke="currentColor"
+        :class="arcClass"
+        stroke-width="3"
+        fill="none"
+        stroke-dasharray="22.78 68.33"
+        stroke-linecap="square"
+      />
     </svg>
-    <UiIcon v-else name="spinner" class="animate-spin" size="large" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 
-import UiIcon from "../UiIcon/UiIcon.vue";
+export interface SpinnerProps {
+  appearance?: "primary" | "neutral";
+  size?: "sm" | "md" | "lg" | "xl";
+}
 
-const props = withDefaults(
-  defineProps<{
-    color?: "blue" | "white" | "green";
-    variant?: "spinner" | "bubbles";
-  }>(),
-  {
-    variant: "spinner",
-    color: "blue",
-  },
-);
+const { appearance = "primary", size = "lg" } = defineProps<SpinnerProps>();
 
-const colorClass = computed(() => {
-  const colorClasses: Record<string, string> = {
-    blue: "text-blue-default",
-    green: "text-green-primary",
-    white: "text-white",
+const sizeClass = computed(() => {
+  const sizes = {
+    sm: "size-4",
+    md: "size-5",
+    lg: "size-6",
+    xl: "size-8",
   };
+  return sizes[size];
+});
 
-  return colorClasses[props.color];
+const arcClass = computed(() => {
+  const variants = {
+    primary: "text-primary",
+    neutral: "text-neutral",
+  };
+  return variants[appearance];
+});
+
+const backgroundClass = computed(() => {
+  const variants = {
+    primary: "text-neutral-faint",
+    neutral: "text-neutral/25",
+  };
+  return variants[appearance];
 });
 </script>

package/src/components/UiTextButton/UiTextButton.vue

@@ -21,8 +21,27 @@
     />
   </component>
 </template>
+<script lang="ts">
+/**
+ * @deprecated
+ * Please replace with your own component
+ */
+export default {
+  name: "UiTextButton",
+  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">
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 
@@ -76,9 +95,9 @@ const weightClassName = computed((): string => {
     fontClass = "font-semibold rounded-lg";
 
     if (props.placement === "onsurface") {
-      hoverClass = "hover:bg-gray-100";
+      hoverClass = "hover:bg-neutral-whisper";
     } else if (props.placement === "oncanvas") {
-      hoverClass = "hover:bg-gray-200";
+      hoverClass = "hover:bg-neutral-pale";
     }
   }
 
@@ -108,22 +127,22 @@ const textClassName = computed((): string => {
 
 const colorClass = computed((): string => {
   if (props.color === "blue") {
-    return "text-blue-default";
+    return "text-primary";
   } else if (props.color === "gray") {
     if (props.placement === "onsurface") {
-      return "text-gray-700";
+      return "text-neutral-subtle";
     } else if (props.placement === "oncanvas") {
-      return "text-gray-800";
+      return "text-neutral-emphasis";
     }
   }
   return "";
 });
 
-const iconSize = computed((): "small" | "medium" => {
+const iconSize = computed((): "sm" | "md" => {
   if (props.size === "xsmall") {
-    return "small";
+    return "sm";
   } else {
-    return "medium";
+    return "md";
   }
 });
 

package/src/components/UiToggleButton/README.md

@@ -5,38 +5,39 @@
 ```html
 <!-- SomeComponent.vue using UiToggleButton -->
 <template>
-  <UiToggleButton labelText="Toggle me" v-model="value" />
+  <UiToggleButton v-model="value">Toggle me</UiToggleButton>
 </template>
 
+
 <script setup lang="ts">
   import { UiToggleButton } from "@dpa-id-components/dpa-shared-components";
 </script>
 ```
 
+
 ## API
 
 ### Props
 
-| Name            | Type      | Default   | Description                                              |
-| --------------- | --------- |-----------|----------------------------------------------------------|
-| `labelText`     | `String`  | ``        | Sets label for the Toggle                                |
-| `labelSpace`    | `String`  | `default` | For more space between label and toggle set this to "xl" |
-| `labelPosition` | `String`  | `left`    | To place the label to the right side set this to "right" |
-| `labelTextSize` | `String`  | `xs`      | Adjust the label-font-size to your needs                 |
-| `labelVisible`  | `boolean` | `true`    | Whether the label visible or not. Set to `false` to visually hide the label while keeping it accessible. |
-| `modelValue`    | `Boolean` | `false`   | The `checked` state of the checkbox                      |
-| `disabled`      | `Boolean` | `false`   | Wether the `button` is disabled                          |
-| `color`         | `String`  | `blue`    | Sets the `color` of the toggle while it is active        |
-| `size`          | `String`  | `small`   | Sets the element's `size` to either "small" or "large"   |
+| Name            | Type      | Default | Description                                                  |
+|-----------------|-----------|---------|--------------------------------------------------------------|
+| `id`            | `String`  |         | Sets the `id` of the input. Auto-generated if not provided.  |
+| `modelValue`    | `Boolean` | `false` | The `checked` state of the checkbox                          |
+| `labelPosition` | `String`  | `left`  | To place the label to the right side set this to `"right"`   |
+| `size`          | `String`  | `sm`    | Sets the element's size to either `"sm"` or `"lg"`           |
+
+### Attributes
+
+HTML attributes like `disabled`, `aria-label`, etc. are forwarded to the underlying `<input>` element via `v-bind="$attrs"`.
 
 ### Slots
 
 | Name      | Description   |
-| --------- | ------------- |
+|-----------|---------------|
 | `default` | Label content |
 
 ### Events
 
 | Name                 | Type      | Description                            |
-| -------------------- | --------- | -------------------------------------- |
-| `update:model-value` | `boolean` |  |
+|----------------------|-----------|----------------------------------------|
+| `update:model-value` | `boolean` |                                        |