@dpa-id-components/dpa-shared-components 23.0.0 → 23.1.1

package/src/components/UiSnackbar/UiSnackbar.vue

@@ -55,7 +55,13 @@ import { watch } from "vue";
 import UiIcon, { ICON_SIZES, type UiIconName } from "../UiIcon/UiIcon.vue";
 
 const emit = defineEmits<{
+  /**
+   * Emitted when the snackbar's visibility becomes `true` (i.e. when it is shown).
+   */
   input: [boolean];
+  /**
+   * Emitted when the action button is clicked.
+   */
   "action-click": [];
 }>();
 
@@ -66,13 +72,45 @@ const {
   iconSize = "lg",
   type = "info",
 } = defineProps<{
+  /**
+   * Visibility of the snackbar.
+   * @default false
+   */
   isShown?: boolean;
+  /**
+   * Position of the snackbar, fixed in the viewport.
+   * @default "left"
+   */
   position?: "left" | "right";
+  /**
+   * Name of the icon to display. If not set, defaults to `"alert-filled"`
+   * when `type` is `"error"`.
+   */
   iconName?: UiIconName;
+  /**
+   * Size of the icon.
+   * @default "lg"
+   */
   iconSize?: Extract<keyof typeof ICON_SIZES, "sm" | "md" | "lg">;
+  /**
+   * Overall design/color scheme of the snackbar.
+   * @default "info"
+   */
   type?: "info" | "error" | "success";
 }>();
 
+defineSlots<{
+  /**
+   * Text content of the snackbar.
+   */
+  default: () => any;
+  /**
+   * Optional slot for the text of the action button. If provided, an action
+   * button is rendered.
+   */
+  action?: () => any;
+}>();
+
 watch(
   () => isShown,
   (isShown) => {

package/src/components/UiSpinner/README.md

@@ -12,17 +12,3 @@
     import {UiSpinner} from "@dpa-id-components/dpa-shared-components";
 </script>
 ```
-
-## API
-
-### Props
-
-| 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
-
-This component has no slots

package/src/components/UiSpinner/UiSpinner.vue

@@ -37,7 +37,16 @@
 import { computed } from "vue";
 
 export interface SpinnerProps {
+  /**
+   * Sets the color theme for the spinner, affecting both the background
+   * circle and the arc.
+   * @default "primary"
+   */
   appearance?: "primary" | "neutral";
+  /**
+   * Sets the size of the spinner.
+   * @default "lg"
+   */
   size?: "sm" | "md" | "lg" | "xl";
 }
 

package/src/components/UiTShirtSizeIcon/README.md

@@ -0,0 +1,13 @@
+# UiTShirtSizeIcon
+
+## Usage
+
+```html
+<template>
+  <UiTShirtSizeIcon name="xl" />
+</template>
+
+<script setup>
+import { UiTShirtSizeIcon } from "@dpa-id-components/dpa-shared-components";
+</script>
+```

package/src/components/UiTShirtSizeIcon/UiTShirtSizeIcon.vue

@@ -0,0 +1,42 @@
+<template>
+  <component
+    :is="iconComponent"
+    class="inline-flex"
+    :class="
+      {
+        xs: 'size-3',
+        sm: 'size-4',
+        md: 'size-5',
+        lg: 'size-6',
+        xl: 'size-10',
+        '2xl': 'size-14',
+      }[size]
+    "
+  />
+</template>
+
+<script lang="ts">
+export type UiTShirtSizeIconName = keyof typeof icons;
+</script>
+
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from "vue";
+
+import { icons } from "./icons.ts";
+import UiTShirtSizeIconLoading from "./UiTShirtSizeIconLoading.vue";
+
+const { name, size = "lg" } = defineProps<{
+  name: UiTShirtSizeIconName;
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+}>();
+
+const iconComponent = computed(() =>
+  defineAsyncComponent({
+    loader: icons[name],
+    // Render a substitute element while loading for classes to attach to.
+    loadingComponent: UiTShirtSizeIconLoading,
+    // Immediately render the loadingComponent so that it can receive classes.
+    delay: 0,
+  }),
+);
+</script>

package/src/components/UiTShirtSizeIcon/UiTShirtSizeIconLoading.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  ></svg>
+</template>

package/src/components/UiTShirtSizeIcon/icons/l.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5Z"
+      stroke="currentColor"
+    />
+    <path
+      d="M5.78906 12V4H7.23828V10.7852H10.7617V12H5.78906Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/UiTShirtSizeIcon/icons/m.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5Z"
+      stroke="currentColor"
+    />
+    <path
+      d="M3.78906 4H5.5625L7.9375 9.79687H8.03125L10.4063 4H12.1797V12H10.7891V6.50391H10.7148L8.50391 11.9766H7.46484L5.25391 6.49219H5.17969V12H3.78906V4Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/UiTShirtSizeIcon/icons/xl.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5Z"
+      stroke="currentColor"
+    />
+    <path
+      d="M4.76278 4.81818L6.00941 6.92507H6.05771L7.31037 4.81818H8.7864L6.89986 7.90909L8.82866 11H7.32546L6.05771 8.89009H6.00941L4.74165 11H3.2445L5.17933 7.90909L3.28072 4.81818H4.76278ZM9.61346 11V4.81818H10.9205V9.92241H13.5707V11H9.61346Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/UiTShirtSizeIcon/icons.ts

@@ -0,0 +1,5 @@
+export const icons = {
+  m: () => import("./icons/m.vue"),
+  l: () => import("./icons/l.vue"),
+  xl: () => import("./icons/xl.vue"),
+} as const;

package/src/components/UiToggleButton/README.md

@@ -14,30 +14,4 @@
 </script>
 ```
 
-
-## API
-
-### Props
-
-| 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` |                                        |

package/src/components/UiToggleButton/UiToggleButton.vue

@@ -39,6 +39,10 @@ import UiLabel from "../UiLabel/UiLabel.vue";
 
 defineOptions({ inheritAttrs: false });
 
+/**
+ * The `checked` state of the toggle.
+ * @default false
+ */
 const model = defineModel<boolean>({ default: false });
 
 defineSlots<{
@@ -53,8 +57,20 @@ const {
   labelPosition = "left",
   size = "sm",
 } = defineProps<{
+  /**
+   * The `id` attribute of the underlying `input` element. Auto-generated if not provided.
+   */
   id?: string;
+  /**
+   * Position of the label relative to the toggle switch. Set to `"right"` to
+   * place the label after the switch.
+   * @default "left"
+   */
   labelPosition?: "left" | "right";
+  /**
+   * Size of the toggle switch.
+   * @default "sm"
+   */
   size?: "sm" | "lg";
 }>();
 

package/src/components/UiTooltip/README.md

@@ -19,33 +19,8 @@
 </script>
 ```
 
-## API
-
-### Props
-
-| Name                | Type                        | Default                             | Description                                                                                                                                                                             |
-|---------------------|-----------------------------|-------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `position`          | `Placement`                 | `bottom`                            | Position of the tooltip relative to the activator slot                                                                                                                                  |
-| `fixed`             | `Boolean`                   | `true`                              | Whether the tooltip positioning is fixed instead of absolute                                                                                                                            |
-| `floatingUiOptions` | `UseFloatingOptions`        | `null`                              | Options for [Floating Ui](https://floating-ui.com/) [Interface](https://github.com/floating-ui/floating-ui/blob/afca34cc59321569ccfca9b41934859809c47a3d/packages/vue/src/types.ts#L60) |
-| `animate`           | `Boolean`                   | `false`                             | Whether the tooltip should be animated                                                                                                                                                  |
-| `hidden`            | `Boolean`                   | `false`                             | Allows you to turn off the tooltip content, useful for scenarios like mobile devices where tooltips may not be needed.                                                                  |
-
-### Attributes
-
-### Attributes
-
-The `class` attribute is forwarded to the component's root element, so e.g. `<UiTooltip class="mt-4">` styles the outer wrapper (useful for layout or positioning).
-The root element has `inline-block` and `align-middle` as default classes, which can be overridden via `tailwind-merge`.
+The `class` attribute is forwarded to the component's root element, so e.g. `<UiTooltip class="mt-4">` styles the outer wrapper (useful for layout or positioning). The root element has `inline-block` and `align-middle` as default classes, which can be overridden via tailwind-merge.
 
 All other attributes (`aria-*`, `data-*`, event listeners, etc.) are forwarded to the inner tooltip content element via `v-bind="$attrs"`.
 
 To style the tooltip content itself, wrap the slot content in your own element with the desired classes.
-
-
-### Slots
-
-| Name        | Description                                  |
-|-------------|----------------------------------------------|
-| `default`   | Default slot for text/content of the tooltip |
-| `activator` | Slot for tooltip activator                   |

package/src/components/UiTooltip/UiTooltip.vue

@@ -63,13 +63,45 @@ const {
   animate = false,
   hidden = false,
 } = defineProps<{
+  /**
+   * Position of the tooltip relative to the activator slot.
+   * @default "bottom"
+   */
   position?: Placement;
+  /**
+   * Whether the tooltip positioning is fixed instead of absolute.
+   * @default true
+   */
   fixed?: boolean;
+  /**
+   * Options for [Floating UI](https://floating-ui.com/).
+   * @default null
+   */
   floatingUiOptions?: UseFloatingOptions | null;
+  /**
+   * Whether the tooltip should be animated when opening and closing.
+   * @default false
+   */
   animate?: boolean;
+  /**
+   * Turns off the tooltip content entirely, useful for scenarios like mobile
+   * devices where tooltips may not be needed.
+   * @default false
+   */
   hidden?: boolean;
 }>();
 
+defineSlots<{
+  /**
+   * Content of the tooltip.
+   */
+  default: () => any;
+  /**
+   * The element that triggers the tooltip when hovered or focused.
+   */
+  activator: () => any;
+}>();
+
 const transitionFromTo = computed(() => {
   if (!animate) return undefined;
   const map: Partial<Record<Placement, string>> = {