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

package/src/components/UiDialog/UiDialog.vue

@@ -57,14 +57,26 @@ import UiIcon from "../UiIcon/UiIcon.vue";
 const dialog = useTemplateRef<HTMLDialogElement>("dialog");
 
 defineSlots<{
+  /**
+   * The dialog header content, shown above the main content. Receives as
+   * slot props the `close` and `requestClose` functions.
+   */
   header?: (props: {
     close: typeof close;
     requestClose: typeof requestClose;
   }) => any;
+  /**
+   * The dialog's main content. Receives as slot props the `close` and
+   * `requestClose` functions.
+   */
   default?: (props: {
     close: typeof close;
     requestClose: typeof requestClose;
   }) => any;
+  /**
+   * The dialog footer content, shown below the main content. Receives as
+   * slot props the `close` and `requestClose` functions.
+   */
   footer?: (props: {
     close: typeof close;
     requestClose: typeof requestClose;
@@ -76,8 +88,19 @@ const {
   closeLabel = undefined,
   animate = false,
 } = defineProps<{
+  /**
+   * Whether to show the close button in the dialog header.
+   * @default true
+   */
   hasCloseButton?: boolean;
+  /**
+   * Accessible label (`aria-label`) for the close button.
+   */
   closeLabel?: string;
+  /**
+   * Whether to animate the opening and closing of the dialog.
+   * @default false
+   */
   animate?: boolean;
 }>();
 
@@ -94,8 +117,17 @@ function showModal() {
 }
 
 defineExpose({
+  /**
+   * Exposes the native `showModal()` function of the underlying `<dialog>` element.
+   */
   showModal,
+  /**
+   * Exposes the native `close()` function of the underlying `<dialog>` element.
+   */
   close,
+  /**
+   * Exposes the native `requestClose()` function of the underlying `<dialog>` element.
+   */
   requestClose,
 });
 </script>

package/src/components/UiFilterBadge/README.md

@@ -1,5 +1,7 @@
 # @dpa-shared-components/UiFilterBadge
 
+Displays a saved-search icon next to a piece of text, typically used to label active filters.
+
 ## Usage
 
 ```html
@@ -12,20 +14,3 @@
     import {UiFilterBadge} from "@dpa-id-components/dpa-shared-components";
 </script>
 ```
-
-## API
-
-### Props
-
-| Name           | Type                                             | Default | Description                                      |
-|----------------|--------------------------------------------------|---------|--------------------------------------------------|
-| `textColor`    | `string`                                         | `#000`  | Sets the color of the text.                      |
-| `iconColor`    | `string`                                         | `#333`  | Sets the color of the icon.                      |
-| `iconIsFilled` | `boolean`                                        | `true`  | If true, renders the filled version of the icon. |
-| `size`         | `"sm"`, `"md"`, `"lg"`, or `"xl"` | `"lg"`    | Determines the font size and weight.             |
-
-### Slots
-
-| Name      | Description                                |
-|-----------|--------------------------------------------|
-| `default` | slot for the rendering the badge's content |

package/src/components/UiFilterBadge/UiFilterBadge.vue

@@ -35,11 +35,34 @@ const {
   iconIsFilled = true,
   size = "lg",
 } = defineProps<{
+  /**
+   * Sets the color of the text.
+   * @default "#000"
+   */
   textColor?: string;
+  /**
+   * Sets the color of the icon.
+   * @default "#333"
+   */
   iconColor?: string;
+  /**
+   * If true, renders the filled version of the icon.
+   * @default true
+   */
   iconIsFilled?: boolean;
+  /**
+   * Determines the font size and weight.
+   * @default "lg"
+   */
   size?: keyof typeof FILTER_BADGE_SIZES;
 }>();
 
+defineSlots<{
+  /**
+   * Slot for rendering the badge's content.
+   */
+  default: () => any;
+}>();
+
 const textSizeClass = computed(() => FILTER_BADGE_SIZES[size]);
 </script>

package/src/components/UiIcon/README.md

@@ -1,8 +1,8 @@
 # @dpa-shared-components/UiIcon
 
-## Usage
+Renders an SVG icon by name. The icon's color is inherited from the current text color.
 
-Color is set by text color:
+## Usage
 
 ```html
 <!-- SomeComponent.vue using UiIcon -->
@@ -14,19 +14,3 @@ Color is set by text color:
     import {UiIcon} from "@dpa-id-components/dpa-shared-components";
 </script>
 ```
-
-## API
-
-### Props
-
-| Name          | Type                                                                          | Default  | Description                                          |
-|---------------|-------------------------------------------------------------------------------|----------|------------------------------------------------------|
-| `name`        | `UiIconName`                                  | required | Sets the `name`, which determines which svg is used. |
-| `size`        | `"xs" &#124; "small" &#124; "medium" &#124; "large" &#124; "xl" &#124; "2xl"` | `large`  | Sets the `size` attribute of the icon.               |
-| `sizeClasses` | `string`                                                                      | `''`     | Overwrites the size classes of the size prop.        |
-
-### Slots
-
-| Name      | Description                                |
-|-----------|--------------------------------------------|
-| `default` | slot for the rendering the badge's content |

package/src/components/UiIcon/UiIcon.vue

@@ -32,8 +32,18 @@ const {
   size = "lg",
   sizeClasses = undefined,
 } = defineProps<{
+  /**
+   * Sets the `name`, which determines which svg is used.
+   */
   name: UiIconName;
+  /**
+   * Sets the size of the icon.
+   * @default "lg"
+   */
   size?: keyof typeof ICON_SIZES;
+  /**
+   * Overwrites the size classes of the size prop.
+   */
   sizeClasses?: string;
 }>();
 

package/src/components/UiInfoContent/README.md

@@ -1,5 +1,7 @@
 # @dpa-id-components/ui-info-content
 
+Displays an icon, a title, some content, and optional actions, typically used to communicate an empty or informational state.
+
 ## Usage
 
 ```html
@@ -23,20 +25,3 @@
     import UiInfoContent from "@dpa-id-components/ui-info-content";
 </script>
 ```
-
-## API
-
-## Props
-
-| Name          | Description                                                                                    |
-|---------------|------------------------------------------------------------------------------------------------|
-| `iconName`    | icon to be displayed                                                                           |
-| `appearance`  | Visual appearance of the component. One of `"default"`, `"default-alt"`, `"success"`. Defaults to `"default"`. |
-
-### Slots
-
-| Name      | Description                               |
-|-----------|-------------------------------------------|
-| `title`   | Optional slot for title elements          |
-| `default` | Optional slot for content elements        |
-| `actions` | Optional slot for action related elements |

package/src/components/UiInfoContent/UiInfoContent.vue

@@ -62,9 +62,31 @@ const APPEARANCE_MAP = {
 };
 
 const { appearance = "default", iconName = undefined } = defineProps<{
+  /**
+   * Visual appearance of the component.
+   * @default "default"
+   */
   appearance?: keyof typeof APPEARANCE_MAP;
+  /**
+   * Icon to be displayed.
+   */
   iconName?: UiIconName;
 }>();
 
+defineSlots<{
+  /**
+   * Optional slot for title elements.
+   */
+  title?: () => any;
+  /**
+   * Optional slot for content elements.
+   */
+  default?: () => any;
+  /**
+   * Optional slot for action related elements.
+   */
+  actions?: () => any;
+}>();
+
 const classes = computed(() => APPEARANCE_MAP[appearance]);
 </script>

package/src/components/UiInput/README.md

@@ -2,7 +2,7 @@
 
 ## Usage
 
-```vue
+```html
 <UiInput
   id="postal-code"
   name="postal_code"
@@ -16,7 +16,7 @@
 
 **Using `v-model`**:
 
-```vue
+```html
 <UiInput v-model="postalCode">
   Postal code
 </UiInput>
@@ -24,38 +24,10 @@
 
 **With `number` value**:
 
-```vue
+```html
 <UiInput v-model="count" type="number">
   Count
 </UiInput>
 ```
 
-## API
-
-### Models
-
-| Name      | Type               | Default     | Description          |
-|-----------|--------------------|-------------|----------------------|
-| _default_ | `string \| number` | `undefined` | Sets the input value |
-
-### Props
-
-**Note**: This component binds all non-prop attributes (apart from `class`) on its principal element (either an `input` or `textarea` element) instead of the root element. This allows you to add arbitrary HTML attributes (and event listeners) on the principal element without them being explicitly supported by the component.
-
-| Name               | Type                                                                        | Default    | Description                                                                         |
-|--------------------|-----------------------------------------------------------------------------|------------|-------------------------------------------------------------------------------------|
-| `type`             | `HTMLInputElement` type | `text`     | Sets the `type` attribute of the input                                              |
-| `label`            | `string`                                                                    | `""`       | The displayed and aria label of the input                                           |
-| `errorMessage`     | `string`                                                                    | `""`       | Error message to be displayed underneath the input                                  |
-| `warningMessage`   | `string`                                                                    | `""`       | Warning message to be displayed underneath the input                                |
-| `infoText`         | `string`                                                                    | `""`       | Info message to be displayed underneath the input                                   |
-| `isTextarea`       | `boolean`                                                                   | `false`    | Input gets rendered as textarea                                                     |
-| `inputStatus`      | `"info"`, `"warning"`, `"error"` | `"default` | The status the input is styled for                                                  |
-
-### Slots
-
-| Name      | Description                                        |
-|-----------|----------------------------------------------------|
-| `buttons` | Render extra content like a “Reveal password” button |
-| `default` | Label content |
-| `errors`  | Validation error content that's associated with the form control via `aria-errormessage` |
+This component binds all non-prop attributes (apart from `class`) on its principal element (either an `input` or `textarea` element) instead of the root element. This allows you to add arbitrary HTML attributes (and event listeners) on the principal element without them being explicitly supported by the component.

package/src/components/UiInput/UiInput.vue

@@ -98,9 +98,13 @@ defineSlots<{
    */
   default?: () => any;
   /**
-   * Extra content.
+   * Extra content shown underneath the input, e.g. an error, warning or info
+   * message. Associated with the input via `aria-errormessage`.
    */
   extra?: () => any;
+  /**
+   * Extra content rendered inside the input, e.g. a "Reveal password" button.
+   */
   buttons?: () => any;
 }>();
 
@@ -111,7 +115,14 @@ const {
   isTextarea = false,
   inputStatus = undefined,
 } = defineProps<{
+  /**
+   * The `id` attribute of the input element. Auto-generated when not set.
+   */
   id?: string;
+  /**
+   * Sets the `type` attribute of the input.
+   * @default "text"
+   */
   type?:
     | "date"
     | "datetime-local"
@@ -125,11 +136,24 @@ const {
     | "url"
     // Allows arbitrary strings while still offering autocompletion on the explicitly listed strings.
     | (string & {});
+  /**
+   * The displayed and aria label of the input.
+   */
   label?: string;
+  /**
+   * Renders the input as a `textarea` instead of an `input` element.
+   * @default false
+   */
   isTextarea?: boolean;
+  /**
+   * The status the input is styled for.
+   */
   inputStatus?: "info" | "warning" | "error";
 }>();
 
+/**
+ * The input's value.
+ */
 const model = defineModel<ModelValue>();
 
 const hasInput = computed(

package/src/components/UiLabel/README.md

@@ -6,7 +6,7 @@ Wraps the native `label` element. Currently only used to provide some default st
 
 **Associate with input via `id` attribute**:
 
-```vue
+```html
 <UiLabel for="name-input">
   Name
 </UiLabel>
@@ -16,7 +16,7 @@ Wraps the native `label` element. Currently only used to provide some default st
 
 **Associate with input by wrapping**:
 
-```vue
+```html
 <UiLabel>
   Name
   <UiInput name="name" required />

package/src/components/UiListItem/README.md

@@ -14,33 +14,3 @@
     import {UiListItem} from "@dpa-id-components/dpa-shared-components";
 </script>
 ```
-
-## API
-
-### Props
-
-| Name              | Type                        | Default    | Description                                                         |
-|-------------------|-----------------------------|------------|---------------------------------------------------------------------|
-| `value`           | `string`                    | `""`       | Sets the value which gets emitted with the click event              |
-| `checkBoxMenu`    | `Boolean`                   | `false`    | Displays checkbox on the beginning of list item                     |
-| `isChecked`       | `Boolean`                   | `false`    | Checked attribute of checkbox, if displayed                         |
-| `selectable`      | `Boolean`                   | `false`    | Makes the list item selectable                                      |
-| `selected`        | `Boolean`                   | `false`    | Displays checkmark at the end of the list item                      |
-| `overrideClasses` | `String`                    | `false`    | Adds classes to the inner of the list item                          |
-| `iconName`        | `UiIconName`                |            | Icon to be displayed at the beginning of the list item              |
-| `iconSize`        | `sm` `md` `lg`              |            | Size of the checkmark icon when selected and selectable is set true |
-| `imageSrc`        | `String`                    | `""`       | Image to be displayed at the beginning of the list item.            |
-| `imageShape`      | `"rounded" &#124; "square"` | `"square"` | Shape pf the image to be displayed.                                 |
-| `checkboxColor`   | `"blue" &#124; "gray"`      | `"blue"`   | Checkbox color style.                                               |
-
-### Events
-
-| Name              | Type     | Description                           |
-|-------------------|----------|---------------------------------------|
-| `list-item-click` | `string` | Emitted when the list item is clicked |
-
-### Slots
-
-| Name      | Description                                     |
-|-----------|-------------------------------------------------|
-| `default` | slot for the rendering the list items's content |

package/src/components/UiListItem/UiListItem.vue

@@ -69,21 +69,77 @@ const {
   isChecked = false,
   disabled = false,
 } = defineProps<{
+  /**
+   * Sets the value which gets emitted with the click event.
+   * @default ""
+   */
   value?: string;
+  /**
+   * Displays a checkbox at the beginning of the list item.
+   * @default false
+   */
   checkBoxMenu?: boolean;
+  /**
+   * Displays a checkmark at the end of the list item.
+   * @default false
+   */
   selected?: boolean;
+  /**
+   * Makes the list item selectable.
+   * @default false
+   */
   selectable?: boolean;
+  /**
+   * Adds classes to the inner element of the list item.
+   */
   overrideClasses?: string;
+  /**
+   * Icon to be displayed at the beginning of the list item.
+   */
   iconName?: UiIconName;
+  /**
+   * Image to be displayed at the beginning of the list item.
+   */
   imageSrc?: string;
+  /**
+   * Shape of the image to be displayed.
+   * @default "rounded"
+   */
   imageShape?: "rounded" | "square";
+  /**
+   * Size of the checkmark icon shown when `selected` and `selectable` are
+   * both set to `true`.
+   * @default "md"
+   */
   iconSize?: "sm" | "md" | "lg";
+  /**
+   * Color appearance of the checkbox, if displayed.
+   * @default "primary"
+   */
   checkboxAppearance?: "primary" | "secondary";
+  /**
+   * Checked state of the checkbox, if displayed.
+   * @default false
+   */
   isChecked?: boolean;
+  /**
+   * Disables the list item, preventing interaction and applying disabled styling.
+   * @default false
+   */
   disabled?: boolean;
 }>();
 
+defineSlots<{
+  /**
+   * Slot for rendering the list item's content.
+   */
+  default: () => any;
+}>();
+
 defineEmits<{
+  /**
+   * Emitted when the list item is clicked.
+   */
   "list-item-click": [value: string];
 }>();
 </script>

package/src/components/UiMediaTypeIcon/README.md

@@ -2,7 +2,7 @@
 
 ## Usage
 
-```vue
+```html
 <template>
   <UiMediaTypeIcon name="alert" />
 </template>
@@ -11,12 +11,3 @@
 import { UiMediaTypeIcon } from "@dpa-id-components/dpa-shared-components";
 </script>
 ```
-
-## API
-
-### Props
-
-| Name   | Type | Default | Description |
-|--------|------|---------|-------------|
-| `name` | `UiMediaTypeIconName` |  | Icon name |
-| `size` | `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`, or `"2xl"` | `"lg"` | Icon size |

package/src/components/UiMediaTypeIcon/UiMediaTypeIcon.vue

@@ -26,7 +26,14 @@ import { icons } from "./icons.ts";
 import UiMediaTypeIconLoading from "./UiMediaTypeIconLoading.vue";
 
 const { name, size = "lg" } = defineProps<{
+  /**
+   * The name of the media type icon to display.
+   */
   name: UiMediaTypeIconName;
+  /**
+   * The size of the icon.
+   * @default "lg"
+   */
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 }>();
 

package/src/components/UiMenu/README.md

@@ -1,8 +1,10 @@
 # @dpa-shared-components/UiMenu
 
+A button that opens a popover menu of selectable options. Supports a flat list via the `options` prop or a grouped list (with optional group labels) via the `groupedOptions` prop — these are mutually exclusive. Optionally includes a search input (`hasSearch`) to filter options and a reset button (`hasResetOption`). The menu can animate its open/close transition via the `animate` prop; the transition duration can be customized by applying `placed-list-class="[--transition-duration:3000ms]"` for animating in and `placed-list-class="[--transition-close-duration:2000ms]"` for animating out.
+
 ## Usage
 
-```vue
+```html
 <template>
   <UiMenu :options="options" />
 </template>
@@ -33,7 +35,7 @@ const options = ref([
 
 **With search**:
 
-```vue
+```html
 <template>
   <UiMenu
     v-model:query="query"
@@ -68,55 +70,6 @@ const options = ref([
 </script>
 ```
 
-## API
-
-### Models
-
-| Name   | Type     | Default | Description          |
-|--------|----------|---------|----------------------|
-| `query`| `string` | `""`    | Search `input` value |
-
-### Props
-
-| Name                   | Type                                                                                                            | Default                       | Description                                                                                                                                                                                                                                  |
-|------------------------|-----------------------------------------------------------------------------------------------------------------|-------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `options`              | `UiMenuOptionType<Value>[]`                                     | required (un-grouped variant) | Array of options for selection.                                                                                                                                                                                                              |
-| `groupedOptions`       | `UiMenuGroupedOption<Value>[];` | required (grouped variant)    | Array of grouped options for selection.                                                                                                                                                                                                      |
-| `defaultTitle`         | `string`                                                                                                        | `""`                          | Default title to display when nothing is selected.                                                                                                                                                                                           |
-| `isOpen`               | `boolean`                                                                                                       | `false`                       | Whether the menu is initially open.                                                                                                                                                                                                           |
-| `disabled`             | `boolean`                                                                                                       | `false`                       | Disables the button to open selection.                                                                                                                                                                                                       |
-| `active`               | `boolean`                                                                                                       | `false`                       | Sets active style to indicate an active filter selection.                                                                                                                                                                                    |
-| `buttonAppearance` | `"primary"`, `"secondary"`, `"secondary-alt"`, or `"ghost"` | `"secondary-alt"` |  |
-| `listVariant`          | `"checkbox" &#124; "selectable" &#124; "blank"`                                                                 | `"blank"`                     | Menu style.                                                                                                                                                                                                                                  |
-| `checkboxColor`        | `"blue" &#124; "gray"`                                                                                          | `"blue"`                      | Checkbox color style.                                                                                                                                                                                                                        |
-| `imageShape`           | `"rounded" &#124; "square"`                                                                                     | `"square"`                    | shape of image.                                                                                                                                                                                                                              |
-| `hasResetOption`       | `boolean`                                                                                                       | `false`                       | Toggles option for a reset button                                                                                                                                                                                                            |
-| `resetLabel`           | `string`                                                                                                        | `""`                         | Sets text of reset button.                                                                                                                                                                                                                   |
-| `searchPlaceholder`    | `string`                                                                                                        | `""`                         | Sets text of search input placeholder.                                                                                                                                                                                                       |
-| `hasSearch`            | `boolean`                                                                                                       | `false`                       | Toggles option for a search input.                                                                                                                                                                                                           |
-| `hasAutoFocus`         | `boolean`                                                                                                       | `false`                       | Toggles autofocus of input in searchfield.                                                                                                                                                                                                   |
-| `iconLeft`             | `UiIconName`                                                                                               | `null`                             | Adds Icon to left side of the text.                                                                                                                                                                                                          |
-| `noTitle`              | `boolean`                                                                                                       | `false`                       | Enabled prop displays dropdown without a title.                                                                                                                                                                                              |
-| `floatingStylesActive` | `boolean`                                                                                                       | `true`                        | prop to disable styles from floating-ui.                                                                                                                                                                                                     |
-| `floatingUiPlacement`  | `Placement`                                                                                                     | `bottom-start`                | Options for [Floating Ui](https://floating-ui.com/) [Interface](https://github.com/floating-ui/floating-ui/blob/afca34cc59321569ccfca9b41934859809c47a3d/packages/utils/src/index.ts#L8)                                                     |
-| `animate`              | `boolean`                                                                                                       | `false`                       | Animate the opening and closing of the menu, the duration can be changed when applying `placed-list-class="[--transition-duration:3000ms]"` for animating in and `placed-list-class="[-transition-close-duration:2000ms]"` for animating out |
-
-### Events
-
-| Name              | Type     | Description                                                 |
-|-------------------|----------|-------------------------------------------------------------|
-| `open`            | none     |  |
-| `close`           | none     |  |
-| `option-selected` | `UiMenuSelectedOption<Value>` |  |
-| `reset`           | none     | Emitted when reset button is clicked                        |
-
-### Slots
-
-| Name      | Description                                              |
-|-----------|----------------------------------------------------------|
-| `default` | Slot within positioned div to build custom menu contents |
-
-
 ## SubComponents
 ### UiMenuList
 A wrapper component for the opened Menu