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

package/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/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/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/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/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/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/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/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/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/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/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>
 

package/src/components/UiSelect/UiSelect.vue

@@ -89,7 +89,7 @@ select,
 }
 
 ::picker(select) {
-  @apply shadow-lg border border-neutral-whisper;
+  @apply mt-1 overscroll-none rounded-lg border border-neutral-faint shadow-md;
 }
 
 select::picker-icon {
@@ -97,12 +97,24 @@ select::picker-icon {
 }
 
 select > :deep(option) {
-  @apply flex justify-between items-center px-4 py-3;
+  @apply flex items-center justify-between px-4 py-1.5 focus-visible:focus-outline;
+
+  &:first-child {
+    @apply rounded-t-lg;
+  }
+
+  &:last-child {
+    @apply rounded-b-lg;
+  }
 
   &:enabled:hover {
     @apply bg-neutral-pale;
   }
 
+  &:focus-visible {
+    @apply -outline-offset-2;
+  }
+
   &::checkmark {
     @apply order-1 text-lg;
   }

package/src/components/UiSpinner/UiSpinner.vue

@@ -1,37 +1,36 @@
 <template>
-  <div :class="sizeClass">
-    <svg
-      class="animate-spin"
-      width="32"
-      height="32"
-      viewBox="0 0 32 32"
+  <svg
+    class="inline-flex animate-spin"
+    :class="sizeClass"
+    width="24"
+    height="24"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="16"
+      cy="16"
+      r="14.5"
+      data-testid="background-circle"
+      stroke="currentColor"
+      :class="backgroundClass"
+      stroke-width="3"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <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>
-  </div>
+    />
+    <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>
 </template>
 
 <script setup lang="ts">