@dpa-id-components/dpa-shared-components 22.0.0-next.5 → 22.0.0-next.7

package/dist/src/components/UiBadge/UiBadge.stories.ts

@@ -41,7 +41,7 @@ export const PlanningItem: Story = {
     template: `<UiBadge v-bind='args'>3</UiBadge>`,
   }),
   args: {
-    appearance: "neutral-emphasis",
+    appearance: "neutral-medium",
     iconName: "video",
   },
 };

package/dist/src/components/UiBadge/UiBadge.vue

@@ -16,31 +16,26 @@ import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 const { appearance = "accent-red", iconName = undefined } = defineProps<{
   appearance?:
     | "accent-red"
-    | "accent-red-dark"
     | "accent-orange"
     | "accent-purple"
     | "accent-green"
     | "primary"
     | "neutral-primary"
-    | "neutral-emphasis"
     | "neutral-medium"
     | "neutral-faint";
   iconName?: UiIconName;
 }>();
 
 const colorClass = computed(() => {
-  const colorClasses: Record<string, string> = {
+  return {
     "accent-red": "bg-accent-red text-neutral",
-    "accent-red-dark": "bg-accent-red-dark text-neutral",
     "accent-orange": "bg-accent-orange text-neutral",
     "accent-purple": "bg-accent-purple text-neutral",
     "accent-green": "bg-accent-green text-neutral",
     primary: "bg-primary text-neutral",
     "neutral-primary": "bg-neutral-primary text-neutral",
-    "neutral-emphasis": "bg-neutral-emphasis text-neutral",
     "neutral-medium": "bg-neutral-medium text-neutral",
-    "neutral-faint": "bg-neutral-faint text-neutral-emphasis",
-  };
-  return colorClasses[appearance];
+    "neutral-faint": "bg-neutral-faint text-neutral-subtle",
+  }[appearance];
 });
 </script>

package/dist/src/components/UiButton/UiButton.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
 
 import UiIcon from "../UiIcon/UiIcon.vue";
 
@@ -76,3 +77,19 @@ export const IconOnlyAndAriaLabel: Story = {
     `,
   }),
 };
+
+export const ToggleIcon: Story = {
+  render: (args) => ({
+    setup() {
+      const isVisible = ref(false);
+
+      return { args, isVisible };
+    },
+    components: { UiButton, UiIcon },
+    template: /*html*/ `
+      <UiButton v-bind="args" aria-label="Is visible" @click="isVisible = !isVisible">
+        <UiIcon :name="isVisible ? 'view' : 'view-off'" />
+      </UiButton>
+    `,
+  }),
+};

package/dist/src/components/UiCheckbox/README.md

@@ -3,19 +3,19 @@
 ## Usage
 
 ```vue
-<template>
-  <UiCheckbox required name="terms" appearance="secondary">
-    Accept terms and conditions
-  </UiCheckbox>
-</template>
-
-<script setup lang="ts">
-import { UiCheckbox } from "@dpa-id-components/dpa-shared-components";
-</script>
+<UiCheckbox required name="terms" appearance="secondary">
+  Accept terms and conditions
+</UiCheckbox>
 ```
 
 ## API
 
+### Models
+
+| Name      | Type               | Default     | Description          |
+|-----------|--------------------|-------------|----------------------|
+| _default_ | `string[] \| string \| boolean` | `undefined` | Sets the input value |
+
 ### Props
 
 **Note**: This component binds all non-prop attributes (apart from `class`) on its principal element (`input[type="checkbox"]`) 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/dist/src/components/UiDatePicker/UiDatePicker.spec.ts

@@ -71,7 +71,7 @@ describe("UiDatePicker", () => {
       inline: true,
     });
     await flushPromises();
-    expect(wrapper.find(".dp__sidebar_left").exists()).toBe(true);
+    expect(wrapper.find(".dp--sidebar-left").exists()).toBe(true);
     expect(wrapper.html()).toContain("Schnellfilter");
     for (const range of quickFilterRanges) {
       expect(wrapper.find(`[data-testid="${range.label}"]`).exists()).toBe(
@@ -134,7 +134,7 @@ describe("UiDatePicker", () => {
     test("should be empty when neither prop nor slot is set", async () => {
       const wrapper = createWrapper({ inline: true });
 
-      const actionExtra = wrapper.find(".dp__action_extra");
+      const actionExtra = wrapper.find(".dp--action-extra");
       if (actionExtra.exists()) {
         expect(actionExtra.text().trim()).toBe("");
       }

package/dist/src/components/UiDatePicker/UiDatePicker.vue

@@ -130,7 +130,7 @@
         <UiIcon class="text-neutral-subtle" name="chevron-right" size="sm" />
       </template>
       <template #arrow>
-        <div ref="menuArrow" class="dp__arrow_top"></div>
+        <div ref="menuArrow" class="dp--arrow-top"></div>
       </template>
     </VueDatePicker>
   </div>
@@ -306,17 +306,17 @@ function formatInput(date: Date | [Date, Date]): string {
 <style>
 @reference "../../tailwindPreset.css";
 
-.dp__arrow_top {
+.dp--arrow-top {
   left: 10%;
 }
 
-.dp__menu {
+.dp--menu {
   border-radius: var(--radius-2xl);
   box-shadow: var(--shadow-lg);
 }
 
 .dp--year-select,
-.dp__month_year_select {
+.dp--month-year-select {
   border-radius: var(--radius-2xl);
 }
 
@@ -325,45 +325,45 @@ function formatInput(date: Date | [Date, Date]): string {
   padding: 0.25rem;
 }
 
-.dp__flex_display {
+.dp--flex-display {
   gap: 2rem;
 }
 
-.dp__sidebar_left {
+.dp--sidebar-left {
   padding: 0;
 }
 
-.dp__cell_inner {
+.dp--cell-inner {
   border-radius: calc(infinity * 1px);
 }
 
-.dp__cell_inner:hover {
+.dp--cell-inner:hover {
   border-radius: calc(infinity * 1px);
 }
 
-.dp__today {
+.dp--today {
   border: 1px solid var(--color-neutral-primary);
 }
 
-.dp__cell_auto_range,
-.dp__cell_auto_range_start,
-.dp__cell_auto_range_end {
+.dp--cell-auto-range,
+.dp--cell-auto-range-start,
+.dp--cell-auto-range-end {
   border: none;
   color: var(--color-neutral-primary);
   background-color: var(--color-neutral-faint);
 }
 
-.dp__month_year_select {
+.dp--month-year-select {
   font-size: var(--text-base);
   font-weight: var(--font-weight-semibold);
   color: var(--color-neutral-primary);
 }
 
-.dp__calendar_header_separator {
+.dp--calendar-header-separator {
   display: none;
 }
 
-.dp__calendar_header {
+.dp--calendar-header {
   gap: 0.25rem;
   align-items: center;
   font-size: var(--text-xs);
@@ -371,26 +371,26 @@ function formatInput(date: Date | [Date, Date]): string {
   font-weight: var(--font-weight-semibold);
 }
 
-.dp__calendar_header_item {
+.dp--calendar-header-item {
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-neutral-subtle);
 }
 
-.dp__calendar_row {
+.dp--calendar-row {
   gap: 0.25rem;
 }
 
-.dp__action_row,
-.dp__action_extra {
+.dp--action-row,
+.dp--action-extra {
   justify-content: end;
   gap: 1rem;
   border-top: 1px solid var(--color-neutral-faint);
   padding: 0.5rem 1rem;
 }
 
-.dp__theme_light {
+.dp--theme-light {
   --dp-font-family: var(--font-sans);
   --dp-month-year-row-height: 2rem; /*Height of the month-year select row*/
   --dp-button-icon-height: 1.5rem; /*Icon sizing in buttons*/

package/dist/src/components/UiIcon/UiIconLoading.vue

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

package/dist/src/components/UiInput/README.md

@@ -3,29 +3,40 @@
 ## Usage
 
 ```vue
-<template>
-  <UiInput
-    label="Postal code"
-    id="postal_code-1"
-    name="postal_code"
-    value="04277"
-    required
-    placeholder="12345"
-  ></UiInput>
-</template>
-
-<script setup lang="ts">
-import { UiInput } from "@dpa-id-components/dpa-shared-components";
-</script>
+<UiInput
+  id="postal-code"
+  name="postal_code"
+  value="04277"
+  required
+  placeholder="12345"
+>
+  Postal code
+</UiInput>
+```
+
+**Using `v-model`**:
+
+```vue
+<UiInput v-model="postalCode">
+  Postal code
+</UiInput>
+```
+
+**With `number` value**:
+
+```vue
+<UiInput v-model="count" type="number">
+  Count
+</UiInput>
 ```
 
 ## API
 
 ### Models
 
-| Name      | Type     | Default     | Description          |
-|-----------|----------|-------------|----------------------|
-| _default_ | `string` | `undefined` | Sets the input value |
+| Name      | Type               | Default     | Description          |
+|-----------|--------------------|-------------|----------------------|
+| _default_ | `string \| number` | `undefined` | Sets the input value |
 
 ### Props
 

package/dist/src/components/UiInput/UiInput.spec.ts

@@ -205,4 +205,24 @@ describe("UiInput", () => {
     await wrapper.setProps({ modelValue: "" });
     expect(input.element.value).toBe("");
   });
+
+  test("works with number model", async () => {
+    const wrapper = mount(UiInput, {
+      props: {
+        type: "number",
+        modelValue: 1,
+      },
+    });
+
+    const input = wrapper.find("input");
+    expect(input.element.value).toBe("1");
+
+    await input.setValue(2);
+    expect(input.element.value).toBe("2");
+    expect((wrapper.emitted("update:modelValue") ?? []).at(-1)).toEqual([2]);
+
+    await input.setValue(3);
+    expect(input.element.value).toBe("3");
+    expect((wrapper.emitted("update:modelValue") ?? []).at(-1)).toEqual([3]);
+  });
 });

package/dist/src/components/UiInput/UiInput.stories.ts

@@ -17,6 +17,7 @@ type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiInput> & {
 
 const meta = {
   title: "forms/UiInput",
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
   component: UiInput,
   args: {
     // Attributes
@@ -84,7 +85,7 @@ export const Placeholder: Story = {
   },
 };
 
-export const Value: Story = {
+export const StringValue: Story = {
   args: {
     // Props
     modelValue: "Text value",
@@ -94,6 +95,19 @@ export const Value: Story = {
   },
 };
 
+export const NumberValue: Story = {
+  args: {
+    // Attributes
+    type: "number",
+
+    // Props
+    modelValue: 2,
+
+    // Slots
+    default: "Count",
+  },
+};
+
 export const Errors: Story = {
   args: {
     // Props

package/dist/src/components/UiInput/UiInput.vue

@@ -34,7 +34,7 @@
       data-testid="input-value"
       v-bind="{ ...$attrs, class: null }"
       :data-is-label-raised="
-        $attrs.placeholder || isFocused || model ? '' : undefined
+        $attrs.placeholder || isFocused || hasInput ? '' : undefined
       "
       @focus="isFocused = true"
       @blur="isFocused = false"
@@ -55,7 +55,7 @@
       data-testid="input-value"
       v-bind="{ ...$attrs, class: null }"
       :data-is-label-raised="
-        $attrs.placeholder || isFocused || model ? '' : undefined
+        $attrs.placeholder || isFocused || hasInput ? '' : undefined
       "
       @focus="isFocused = true"
       @blur="isFocused = false"
@@ -82,7 +82,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="ModelValue extends string | number">
 import { computed, ref, useId } from "vue";
 
 import { cn } from "../../utils/cn.ts";
@@ -130,8 +130,11 @@ const {
   inputStatus?: "info" | "warning" | "error";
 }>();
 
-const model = defineModel<string>();
+const model = defineModel<ModelValue>();
 
+const hasInput = computed(
+  () => model.value !== undefined && model.value !== "",
+);
 const isFocused = ref(false);
 
 const defaultId = useId();

package/dist/src/components/UiListItem/README.md

@@ -31,7 +31,6 @@
 | `imageSrc`        | `String`                    | `""`       | Image to be displayed at the beginning of the list item. |
 | `imageShape`      | `"rounded" | "square"` | `"square"` | Shape pf the image to be displayed.                      |
 | `checkboxColor`   | `"blue" | "gray"`      | `"blue"`   | Checkbox color style.                                    |
-| `checkboxSize`    | `"small" | "medium"`   | `"medium"` | Checkbox size style.                                     |
 
 ### Events
 

package/dist/src/components/UiListItem/UiListItem.vue

@@ -2,11 +2,10 @@
   <li
     :class="
       cn(
-        'flex cursor-pointer list-none items-center gap-2 px-4 py-2 text-sm/normal text-neutral-emphasis select-none hover:text-primary focus:outline-hidden focus-visible:focus-outline focus-visible:-outline-offset-2',
+        'flex cursor-pointer list-none items-center gap-2 px-4 py-1.5 text-sm/normal text-neutral-emphasis select-none hover:text-primary focus:outline-hidden focus-visible:focus-outline focus-visible:-outline-offset-2',
         {
           'cursor-default text-neutral-medium': disabled,
           'is-selected': selected,
-          'py-3': checkboxSize === 'md',
         },
         overrideClasses,
         $attrs.class,
@@ -20,7 +19,7 @@
       :appearance="checkboxAppearance"
       :model-value="isChecked"
       :disabled="disabled"
-      :size="checkboxSize"
+      size="sm"
       @click.stop="$emit('list-item-click', value)"
     >
       <span class="sr-only"><slot /></span>
@@ -65,7 +64,6 @@ const {
   imageSrc = undefined,
   imageShape = "rounded",
   checkboxAppearance = "primary",
-  checkboxSize = "md",
   isChecked = false,
   disabled = false,
 } = defineProps<{
@@ -79,7 +77,6 @@ const {
   imageShape?: "rounded" | "square";
   iconSize?: "sm" | "md" | "lg";
   checkboxAppearance?: "primary" | "secondary";
-  checkboxSize?: "sm" | "md";
   isChecked?: boolean;
   disabled?: boolean;
 }>();

package/dist/src/components/UiMediaTypeIcon/UiMediaTypeIcon.vue

@@ -42,7 +42,7 @@ const iconComponent = computed(() =>
 
 watchEffect(() => {
   if (!icons[name]) {
-    throw new Error(`UiMediaFormatIcon: No icon named “${name}” exists.`);
+    throw new Error(`UiMediaTypeIcon: No icon named “${name}” exists.`);
   }
 });
 </script>

package/dist/src/components/UiMenu/README.md

@@ -89,7 +89,6 @@ const options = ref([
 | `buttonAppearance` | `"primary"`, `"secondary"`, `"secondary-alt"`, or `"ghost"` | `"secondary-alt"` |  |
 | `listVariant`          | `"checkbox" | "selectable" | "blank"`                                                                 | `"blank"`                     | Menu style.                                                                                                                                                                                                                                  |
 | `checkboxColor`        | `"blue" | "gray"`                                                                                          | `"blue"`                      | Checkbox color style.                                                                                                                                                                                                                        |
-| `checkboxSize`         | `"small" | "medium"`                                                                                       | `"medium"`                    | Checkbox size style.                                                                                                                                                                                                                         |
 | `imageShape`           | `"rounded" | "square"`                                                                                     | `"square"`                    | shape of image.                                                                                                                                                                                                                              |
 | `hasResetOption`       | `boolean`                                                                                                       | `false`                       | Toggles option for a reset button                                                                                                                                                                                                            |
 | `resetLabel`           | `string`                                                                                                        | `""`                         | Sets text of reset button.                                                                                                                                                                                                                   |
@@ -142,7 +141,6 @@ Wraps the UiListItem and uses the same settings as in the original UiMenu, helps
 | `listVariant?`   | `"checkbox" | "selectable" | "blank"`   | `blank`     | Provide the list variant, same as in UiMenu.vue           |
 | `iconSize?`      | `"small" | "medium" | "large"`      | `small`     | Provide the icon size, same as in UiMenu.vue              |
 | `imageShape?`    | `"rounded" | "square"`    | `square`    | Provide the imageShape, same as in UiMenu.vue             |
-| `checkboxSize?`  | `"small" | "medium"`  | `medium`    | Provide the checkboxSize, same as in UiMenu.vue           |
 | `checkboxColor?` | `"blue" | "gray"` | `blue`      | Provide the checkboxColor, same as in UiMenu.vue          |
 
 #### Slots

package/dist/src/components/UiMenu/UiMenu.stories.ts

@@ -48,7 +48,6 @@ const meta = {
     // Menu
     iconSize: "sm",
     imageShape: "square",
-    checkboxSize: "md",
     checkboxAppearance: "primary",
     listVariant: "blank",
   },
@@ -137,7 +136,6 @@ export const GroupedOptions: Story = {
     searchPlaceholder: "Suchen",
     buttonAppearance: "secondary-alt",
     listVariant: "checkbox",
-    checkboxSize: "sm",
     defaultTitle: "Optionen",
     hasAutoFocus: true,
   },
@@ -325,6 +323,5 @@ export const WithImages: Story = {
   }),
   args: {
     listVariant: "checkbox",
-    checkboxSize: "sm",
   },
 };

package/dist/src/components/UiMenu/UiMenu.vue

@@ -26,11 +26,11 @@
     </template>
 
     <div
-      class="block w-max max-w-full divide-y overflow-hidden rounded-sm text-base/6 shadow-lg focus:outline-hidden sm:text-sm/5"
+      class="block w-max max-w-full divide-y overflow-hidden rounded-lg border border-neutral-faint bg-neutral text-base/6 shadow-md focus:outline-hidden sm:text-sm/5"
     >
       <div
         v-if="hasSearch"
-        class="flex items-center gap-2 rounded-t-sm px-4 py-2 text-neutral-primary [&:has(>input:focus-visible)]:focus-outline [&:has(>input:focus-visible)]:-outline-offset-2"
+        class="flex items-center gap-2 rounded-t-lg px-4 pt-2.5 pb-1.5 text-neutral-primary [&:has(>input:focus-visible)]:focus-outline [&:has(>input:focus-visible)]:-outline-offset-2"
       >
         <UiIcon
           class="shrink-0 text-neutral-emphasis"
@@ -51,7 +51,6 @@
       <slot
         v-bind="{
           checkboxAppearance,
-          checkboxSize,
           iconSize,
           imageShape,
           listVariant,
@@ -71,7 +70,7 @@
             <template v-if="group.options.length > 0">
               <li
                 v-if="group.groupLabel"
-                class="flex h-6 items-center bg-neutral-whisper px-4 text-xs font-semibold tracking-wider text-neutral-subtle uppercase"
+                class="flex h-6 items-center bg-neutral-faint px-4 text-xs font-semibold tracking-wider text-neutral-subtle uppercase"
               >
                 {{ group.groupLabel }}
               </li>
@@ -87,7 +86,6 @@
                 :image-shape="imageShape"
                 :image-src="option.imageSrc"
                 :icon-name="option.iconName"
-                :checkbox-size="checkboxSize"
                 :checkbox-appearance="checkboxAppearance"
                 class="hover:bg-neutral-whisper focus:bg-neutral-faint"
                 :class="{
@@ -102,7 +100,7 @@
         </ul>
       </slot>
 
-      <div v-if="hasResetOption" class="px-4 py-2 text-neutral-primary">
+      <div v-if="hasResetOption" class="px-2 pt-1.5 pb-2 text-neutral-primary">
         <UiButton
           appearance="secondary"
           :disabled="disabledReset"
@@ -154,7 +152,6 @@ export type UiMenuGroupedOption<Value = unknown> = {
 defineSlots<{
   default?: (props: {
     checkboxAppearance: typeof checkboxAppearance;
-    checkboxSize: typeof checkboxSize;
     iconSize: typeof iconSize;
     imageShape: typeof imageShape;
     listVariant: typeof listVariant;
@@ -192,7 +189,6 @@ const {
   // Menu
   iconSize = "sm",
   imageShape = "square",
-  checkboxSize = "md",
   checkboxAppearance = "primary",
   listVariant = "blank",
 } = defineProps<{
@@ -222,7 +218,6 @@ const {
   // Menu
   iconSize?: "sm" | "md" | "lg";
   imageShape?: "rounded" | "square";
-  checkboxSize?: "sm" | "md";
   checkboxAppearance?: "primary" | "secondary";
   listVariant?: "checkbox" | "selectable" | "blank";
 }>();

package/dist/src/components/UiPopover/UiPopover.stories.ts

@@ -29,7 +29,7 @@ const meta = {
           </template>
 
           <template #default="{ close }">
-            <div class="space-y-2 rounded-sm border border-neutral-soft p-2 shadow-sm">
+            <div class="space-y-2 rounded-lg border border-neutral-faint bg-neutral p-2 shadow-md">
               <p>Popover content</p>
 
               <UiButton @click="close">

package/dist/src/components/UiPopover/UiPopover.vue

@@ -1,16 +1,5 @@
 <template>
-  <div
-    ref="reference"
-    v-click-away="
-      () => {
-        if (isOpen) {
-          close();
-        }
-      }
-    "
-    class="w-fit"
-    @click="update"
-  >
+  <div ref="reference" class="w-fit" @click="update">
     <slot name="button" v-bind="{ open, close, toggle, isOpen }" />
 
     <Transition :name="animate ? 'fade-up' : 'none'">
@@ -18,7 +7,7 @@
         v-show="isOpen"
         ref="floating"
         :style="floatingStyles"
-        class="z-10 w-fit rounded-sm bg-neutral [text-align:initial] [--transition-close-duration:100ms] [--transition-duration:200ms]"
+        class="z-10 w-fit [text-align:initial] [--transition-close-duration:100ms] [--transition-duration:200ms]"
         :data-side="placement"
       >
         <slot v-bind="{ close }" />
@@ -36,10 +25,9 @@ import {
   shift,
   useFloating,
 } from "@floating-ui/vue";
+import { onClickOutside } from "@vueuse/core";
 import { ref, useTemplateRef, watch } from "vue";
 
-import { vClickAway } from "../../directives/vClickAway.ts";
-
 defineSlots<{
   button: (props: {
     open: typeof open;
@@ -103,6 +91,21 @@ function toggle() {
   isOpen.value = !isOpen.value;
 }
 
+onClickOutside(
+  floating,
+  () => {
+    if (isOpen.value) {
+      close();
+    }
+  },
+  {
+    ignore: [
+      // Ignore clicks on the reference element
+      reference,
+    ],
+  },
+);
+
 defineExpose({ open, close });
 </script>