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

package/src/components/UiMenu/UiMenuItem.vue

@@ -5,8 +5,8 @@
     :icon-size="iconSize"
     :image-shape="imageShape"
     :checkbox-size="checkboxSize"
-    :check-box-color="checkboxColor"
-    :class="cn('hover:bg-gray-100 focus:bg-gray-300', $props.class)"
+    :checkbox-appearance="checkboxAppearance"
+    :class="cn('hover:bg-neutral-whisper focus:bg-neutral-faint', $props.class)"
     v-bind="{
       ...(props.option
         ? {
@@ -21,8 +21,27 @@
   </UiListItem>
 </template>
 
+<script lang="ts">
+/**
+ * @deprecated Use `UiListItem` instead.
+ */
+export default {
+  name: "UiMenuItem",
+  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" generic="Value">
-import type { HTMLAttributes } from "vue";
+import { type HTMLAttributes, onMounted } from "vue";
 
 import { cn } from "../../utils/cn.ts";
 import UiListItem from "../UiListItem/UiListItem.vue";
@@ -34,17 +53,17 @@ const props = withDefaults(
     class?: HTMLAttributes["class"];
     option?: UiMenuOptionType<Value>;
     listVariant?: "checkbox" | "selectable" | "blank";
-    iconSize?: "small" | "medium" | "large";
+    iconSize?: "sm" | "md" | "lg";
     imageShape?: "rounded" | "square";
-    checkboxSize?: "small" | "medium";
-    checkboxColor?: "blue" | "gray";
+    checkboxSize?: "sm" | "md";
+    checkboxAppearance?: "primary" | "secondary";
   }>(),
   {
     class: undefined,
     option: undefined,
-    checkboxColor: "blue",
-    checkboxSize: "medium",
-    iconSize: "small",
+    checkboxAppearance: "primary",
+    checkboxSize: "md",
+    iconSize: "sm",
     imageShape: "square",
     listVariant: "blank",
   },

package/src/components/UiMenu/UiMenuList.vue

@@ -4,7 +4,29 @@
   </ul>
 </template>
 
+<script lang="ts">
+/**
+ * @deprecated
+ * Please replace with your own component
+ */
+export default {
+  name: "UiMenuList",
+  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 lang="ts" setup>
+import { onMounted } from "vue";
+
 import { cn } from "../../utils/cn.ts";
 
 withDefaults(

package/src/components/UiOverlay/README.md

@@ -9,7 +9,7 @@ Component will be removed in a future update
 <template>
     <UiOverlay>
         <div class='grid place-items-center'>
-            <span class='text-white'>Here is a Overlay</span>
+            <span class='text-neutral'>Here is a Overlay</span>
         </div>
     </UiOverlay>
 </template>

package/src/components/UiOverlay/UiOverlay.vue

@@ -27,9 +27,9 @@ const emit = defineEmits<{
 
 onMounted(() => {
   if (window.location.origin.includes("local")) {
-    // eslint-disable-next-line
+    // eslint-disable-next-line no-console
     console.warn(
-      "UiOverlay is deprecated. It will be removed in a future update.",
+      "Component is deprecated. It will be removed in a future update.",
     );
   }
 });

package/src/components/UiOverlayMenu/README.md

@@ -9,7 +9,7 @@ Component will be removed in a future update
 <template>
     <UiOverlayMenu :is-open="true">
         <div class='grid place-items-center'>
-            <span class='text-white'>Here is Content</span>
+            <span class='text-neutral'>Here is Content</span>
         </div>
     </UiOverlayMenu>
 </template>

package/src/components/UiOverlayMenu/UiOverlayMenu.vue

@@ -5,7 +5,7 @@
     class="relative size-full border-none"
   >
     <div
-      class="absolute top-12 right-3 z-10 block border-t bg-white px-4 py-3 shadow-lg"
+      class="absolute top-12 right-3 z-10 block border-t bg-neutral px-4 py-3 shadow-lg"
     >
       <slot />
     </div>
@@ -42,9 +42,9 @@ const close = (): void => {
 
 onMounted(() => {
   if (window.location.origin.includes("local")) {
-    // eslint-disable-next-line
+    // eslint-disable-next-line no-console
     console.warn(
-      "UiOverlayMenu is deprecated. It will be removed in a future update.",
+      "Component is deprecated. It will be removed in a future update.",
     );
   }
 });

package/src/components/UiPopover/README.md

@@ -0,0 +1,56 @@
+# UiPopover
+
+A general purpose popover component.
+
+## Usage
+
+```vue
+<UiPopover animate placement="bottom-start">
+  <template #button="{ toggle }">
+    <UiButton @click="toggle">
+      Toggle open
+    </UiButton>
+  </template>
+
+  <template #default="{ close }">
+    <p>Popover content</p>
+
+    <UiButton @click="close">
+      Close
+    </UiButton>
+  </template>
+</UiPopover>
+```
+
+## Props
+
+### `animate`
+
+- **Description**: Whether to animate the opening and closing of the popover content.
+- **Type**: `boolean`
+- **Required**: No
+- **Default**: `false`
+
+### `initiallyOpen`
+
+- **Description**: Whether the popover content is initially open.
+- **Type**: `boolean`
+- **Required**: No
+- **Default**: `false`
+
+### `placement`
+
+- **Description**: The placement of the popover content.
+- **Type**: `Placement`
+- **Required**: No
+- **Default**: `"bottom-start"`
+
+## Slots
+
+### `button`
+
+The trigger button. Receives as slot props the `isOpen` property and the `open`, `close`, and `toggle` functions.
+
+### `default`
+
+The popover content. Receives as slot props the `close` function.

package/src/components/UiPopover/UiPopover.vue

@@ -0,0 +1,187 @@
+<template>
+  <div ref="reference" v-click-away="close" class="w-fit" @click="update">
+    <slot name="button" v-bind="{ open, close, toggle, isOpen }" />
+
+    <Transition :name="animate ? 'fade-up' : 'none'">
+      <div
+        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]"
+        :data-side="placement"
+      >
+        <slot v-bind="{ close }" />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  autoUpdate,
+  flip,
+  offset,
+  type Placement,
+  shift,
+  useFloating,
+} from "@floating-ui/vue";
+import { ref, useTemplateRef } from "vue";
+
+import { vClickAway } from "../../directives/vClickAway.ts";
+
+defineSlots<{
+  button: (props: {
+    open: typeof open;
+    close: typeof close;
+    toggle: typeof toggle;
+    isOpen: typeof isOpen.value;
+  }) => any;
+  default: (props: { close: typeof close }) => any;
+}>();
+
+const {
+  animate = false,
+  initiallyOpen = false,
+  placement = "bottom-start",
+} = defineProps<{
+  /**
+   * Whether to animate the opening and closing of the popover content.
+   * @default false
+   */
+  animate?: boolean;
+  /**
+   * Whether the popover content is initially open.
+   * @default false
+   */
+  initiallyOpen?: boolean;
+  /**
+   * The placement of the popover content.
+   * @default "bottom-start"
+   */
+  placement?: Placement;
+}>();
+
+const reference = useTemplateRef("reference");
+const floating = useTemplateRef("floating");
+const isOpen = ref(initiallyOpen);
+
+const { floatingStyles, update } = useFloating(reference, floating, {
+  placement,
+  middleware: [offset(4), flip(), shift()],
+  whileElementsMounted: autoUpdate,
+});
+
+function open() {
+  isOpen.value = true;
+}
+
+function close() {
+  isOpen.value = false;
+}
+
+function toggle() {
+  isOpen.value = !isOpen.value;
+}
+
+defineExpose({ open, close });
+</script>
+
+<style scoped>
+@keyframes fade-slide-down {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -4px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fade-slide-right {
+  0% {
+    opacity: 0;
+    transform: translate3d(4px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fade-slide-left {
+  0% {
+    opacity: 0;
+    transform: translate3d(-4px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fade-slide-up {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 4px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.fade-up-enter-active {
+  animation: fade-in calc(var(--transition-duration) + 5ms);
+}
+
+.fade-up-leave-active {
+  animation: fade-in calc(var(--transition-close-duration) + 5ms);
+  animation-direction: reverse;
+}
+
+[data-side*="bottom"].fade-up-enter-active > * {
+  animation: fade-slide-up var(--transition-duration);
+}
+
+[data-side*="bottom"].fade-up-leave-active > * {
+  animation: fade-slide-up var(--transition-close-duration);
+  animation-direction: reverse;
+}
+
+[data-side*="top"].fade-up-enter-active > * {
+  animation: fade-slide-down var(--transition-duration);
+}
+
+[data-side*="top"].fade-up-leave-active > * {
+  animation: fade-slide-down var(--transition-close-duration);
+  animation-direction: reverse;
+}
+
+[data-side*="left"].fade-up-enter-active > * {
+  animation: fade-slide-left var(--transition-duration);
+}
+
+[data-side*="left"].fade-up-leave-active > * {
+  animation: fade-slide-left var(--transition-close-duration);
+  animation-direction: reverse;
+}
+
+[data-side*="right"].fade-up-enter-active > * {
+  animation: fade-slide-right var(--transition-duration);
+}
+
+[data-side*="right"].fade-up-leave-active > * {
+  animation: fade-slide-right var(--transition-close-duration);
+  animation-direction: reverse;
+}
+</style>

package/src/components/UiRadioButton/README.md

@@ -0,0 +1,44 @@
+# @dpa-shared-components/UiRadioButton
+
+## Usage
+
+```vue
+<!-- SomeComponent.vue using UiRadioButton -->
+<template>
+  <div class="space-y-2">
+    <UiRadioButton v-model="selected" name="option" value="option1">Option 1</UiRadioButton>
+    <UiRadioButton v-model="selected" name="option" value="option2">Option 2</UiRadioButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { UiRadioButton } from "@dpa-id-components/dpa-shared-components";
+  import { ref } from "vue";
+
+  const selected = ref("option1");
+</script>
+```
+
+### Props
+
+| Name         | Type                       | Default        | Description                                                       |
+|--------------|----------------------------|----------------|-------------------------------------------------------------------|
+| `modelValue` | `string`                   | `undefined`    | The selected value (use with `v-model`)                           |
+| `id`         | `string`                   | auto-generated | ID of the `input` element. Used for the `label`'s `for` attribute |
+| `appearance` | `"primary" \| "secondary"` | `"primary"`    | Visual style of the radio button                                  |
+| `size`       | `"sm" \| "md"`             | `"md"`         | Size of the radio button and label text                           |
+
+All native `input` attributes (e.g. `value`, `disabled`, `name`, `data-testid`) are forwarded to the underlying `<input>` element.
+
+### Events
+
+| Name                | Type     | Description                                        |
+|---------------------|----------|----------------------------------------------------|
+| `update:modelValue` | `string` | Emitted when the selected value changes (v-model)  |
+
+### Slots
+
+| Name      | Description                                                     |
+|-----------|-----------------------------------------------------------------|
+| `default` | Label content displayed next to the radio button                |
+| `errors`  | Error message content, rendered below the radio in an error box |

package/src/components/UiRadioButton/UiRadioButton.vue

@@ -0,0 +1,82 @@
+<template>
+  <div :class="cn('max-w-max space-y-1', $attrs.class)">
+    <UiLabel
+      class="inline-flex items-center [&:has(>input:enabled)]:cursor-pointer"
+      :class="{
+        'gap-1 text-sm': size === 'sm',
+        'gap-2 text-base': size === 'md',
+        'text-neutral-soft': $attrs.disabled,
+      }"
+      :for="uniqueId"
+      :data-testid="$attrs['data-testid']"
+    >
+      <input
+        :id="uniqueId"
+        v-model="model"
+        class="inline-flex aspect-square appearance-none items-center justify-center rounded-full border-2 bg-neutral align-middle transition-colors after:size-2 after:rounded-full checked:after:content-[''] not-read-only:enabled:cursor-pointer disabled:border-neutral-muted disabled:text-neutral-soft disabled:checked:after:bg-neutral-muted"
+        :class="{
+          'size-4': size === 'sm',
+          'size-5': size === 'md',
+          'border-primary checked:after:bg-primary enabled:hover:border-primary-hover':
+            appearance === 'primary',
+          'border-neutral-emphasis checked:after:bg-neutral-emphasis enabled:hover:border-neutral-primary':
+            appearance === 'secondary',
+        }"
+        type="radio"
+        :aria-invalid="$slots.errors ? 'true' : 'false'"
+        :aria-errormessage="$slots.errors ? `${uniqueId}-errors` : undefined"
+        v-bind="{ ...$attrs, class: null, 'data-testid': null }"
+      />
+
+      <slot />
+    </UiLabel>
+
+    <div
+      v-if="$slots.errors"
+      :id="`${uniqueId}-errors`"
+      class="bg-error px-4 py-1 text-xs/normal font-medium text-neutral transition-all duration-150 ease-in-out"
+    >
+      <slot name="errors" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from "vue";
+
+import { cn } from "../../utils/cn.ts";
+import UiLabel from "../UiLabel/UiLabel.vue";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineSlots<{
+  /**
+   * Label content.
+   */
+  default: () => any;
+  /**
+   * Error content.
+   */
+  errors?: () => any;
+}>();
+
+const {
+  id = undefined,
+  appearance = "primary",
+  size = "md",
+} = defineProps<{
+  /**
+   * ID of the `input` element. Used for the `label`'s `for` attribute.
+   */
+  id?: string;
+  appearance?: "primary" | "secondary";
+  size?: "sm" | "md";
+}>();
+
+const model = defineModel<string>();
+
+const defaultId = useId();
+const uniqueId = computed(() => id ?? `id-${defaultId}`);
+</script>

package/src/components/UiRadioInputGroup/UiRadioInputGroup.vue

@@ -1,35 +1,30 @@
 <template>
   <ul
-    class="flex"
     :class="[
-      cn('gap-4', $attrs.class as string),
-      {
-        'flex-col': direction === 'vertical',
-      },
+      cn(
+        'flex gap-4',
+        {
+          'flex-col': direction === 'vertical',
+        },
+        $attrs.class,
+      ),
     ]"
   >
-    <li v-for="option in internalOptions" :key="option.value">
-      <UiLabel class="flex">
-        <input
-          v-model="pickedOption"
-          :name="groupName"
-          :value="option.value"
-          :checked="option.selected"
-          :disabled="disabled"
-          type="radio"
-          :class="cn(sizeClassName, variantClassName)"
-          class="cursor-pointer appearance-none rounded-full border-2 bg-clip-content disabled:cursor-default disabled:border-gray-500 disabled:bg-gray-500"
-        />
-        <span
-          class="ml-1 cursor-pointer"
-          :class="[labelClass, disabled ? 'text-gray-500' : '']"
-        >
-          {{ option.label }}
-        </span>
-      </UiLabel>
+    <li v-for="option in options" :key="option.value">
+      <UiRadioButton
+        v-model="model"
+        :appearance
+        :disabled
+        :size
+        :name="groupName"
+        :value="option.value"
+      >
+        {{ option.label }}
+      </UiRadioButton>
     </li>
   </ul>
 </template>
+
 <script lang="ts">
 /**
  * @deprecated
@@ -39,62 +34,42 @@ export default {
   name: "UiRadioInputGroup",
 };
 </script>
-<script setup lang="ts" generic="T extends string | number">
-import { computed, onMounted } from "vue";
+
+<script setup lang="ts">
+import { onMounted } from "vue";
 
 import { cn } from "../../utils/cn.ts";
-import UiLabel from "../UiLabel/UiLabel.vue";
+import UiRadioButton from "../UiRadioButton/UiRadioButton.vue";
 
-export interface UiRadioInputGroupOption<T> {
-  value: T;
+export interface UiRadioInputGroupOption {
+  value: string;
   label: string;
-  selected: boolean;
+  /** @deprecated has no effect */
+  selected?: boolean;
 }
 
-const pickedOption = defineModel<T>();
-const props = withDefaults(
-  defineProps<{
-    groupName: string;
-    disabled?: boolean;
-    direction?: "horizontal" | "vertical";
-    options: UiRadioInputGroupOption<T>[];
-    variant?: "blue" | "gray";
-    size?: "small" | "medium";
-    labelClass?: string;
-  }>(),
-  {
-    direction: "horizontal",
-    variant: "blue",
-    size: "medium",
-    disabled: false,
-    labelClass: "",
-  },
-);
-
-const variantClassName = computed(() => {
-  return props.variant === "blue"
-    ? "border-blue-default checked:bg-blue-default checked:hover:bg-blue-dark hover:border-blue-dark"
-    : "border-gray-800 checked:bg-gray-800 checked:hover:bg-gray-900 hover:border-gray-900";
-});
+const {
+  options,
+  direction = "horizontal",
+  appearance = "primary",
+  size = "md",
+  disabled = false,
+} = defineProps<{
+  options: UiRadioInputGroupOption[];
+  groupName: string;
+  disabled?: boolean;
+  direction?: "horizontal" | "vertical";
+  appearance?: "primary" | "secondary";
+  size?: "sm" | "md";
+}>();
 
-const sizeClassName = computed(() => {
-  return props.size === "medium" ? "h-5 w-5 p-1" : "w-4 h-4 p-[3px]";
-});
-
-const internalOptions = computed(() => {
-  return props.options.map((option) => {
-    return {
-      ...option,
-      selected: pickedOption.value === option.value,
-    };
-  });
-});
+const model = defineModel<string>();
 
 onMounted(() => {
   if (window.location.origin.includes("local")) {
-    // eslint-disable-next-line
+    // eslint-disable-next-line no-console
     console.warn(
-      "UiRadioInputGroup is deprecated. It will be removed in a future update.",
+      "Component is deprecated. It will be removed in a future update.",
     );
   }
 });