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

package/dist/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/dist/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/dist/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/dist/src/components/UiOverlay/UiOverlay.stories.ts

@@ -11,7 +11,7 @@ const meta = {
     },
     components: { UiOverlay },
     template:
-      "<UiOverlay v-bind='args'><div class='grid place-items-center'><span class='text-white'>Here is a Overlay</span></div></UiOverlay>",
+      "<UiOverlay v-bind='args'><div class='grid place-items-center'><span class='text-neutral'>Here is a Overlay</span></div></UiOverlay>",
   }),
   tags: ["deprecated"],
 } satisfies Meta<typeof UiOverlay>;

package/dist/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/dist/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/dist/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/dist/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/dist/src/components/UiPopover/UiPopover.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import UiButton from "../UiButton/UiButton.vue";
+
+import UiPopover from "./UiPopover.vue";
+
+const meta = {
+  title: "Ui/UiPopover",
+  component: UiPopover,
+  args: {
+    animate: true,
+    placement: "bottom-start",
+  },
+  render(args) {
+    return {
+      setup() {
+        return { args };
+      },
+      components: { UiPopover, UiButton },
+      template: /*html*/ `
+        <UiPopover v-bind="args">
+          <template #button="{ open, close, isOpen }">
+            <UiButton
+              appearance="secondary-alt"
+              @click="isOpen ? close() : open()"
+            >
+              Toggle open
+            </UiButton>
+          </template>
+
+          <template #default="{ close }">
+            <div class="space-y-2 rounded-sm border border-neutral-soft p-2 shadow-sm">
+              <p>Popover content</p>
+
+              <UiButton @click="close">
+                Close
+              </UiButton>
+            </div>
+          </template>
+        </UiPopover>
+      `,
+    };
+  },
+} satisfies Meta<typeof UiPopover>;
+
+export default meta;
+type Story = StoryObj<typeof UiPopover>;
+
+export const Default: Story = {};

package/dist/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/dist/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/dist/src/components/UiRadioButton/UiRadioButton.stories.ts

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+
+import UiRadioButton from "./UiRadioButton.vue";
+
+const meta = {
+  title: "forms/UiRadioButton",
+  component: UiRadioButton,
+  argTypes: {
+    // Attributes
+    // @ts-ignore Storybook doesn't know that **any** component can receive arbitrary attributes and enforces this on the type level.
+    disabled: { control: "boolean" },
+  },
+  args: {
+    // Attributes
+    // @ts-ignore Storybook doesn't know that **any** component can receive arbitrary attributes and enforces this on the type level.
+    disabled: false,
+
+    // Props
+    appearance: "primary",
+    size: "md",
+
+    // Slots
+    default: "Radio",
+    errors: "",
+  },
+} satisfies Meta<typeof UiRadioButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiRadioButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <UiRadioButton v-bind="args">
+        {{ args.default }}
+        <template v-if="args.errors" #errors>
+          {{ args.errors }}
+        </template>
+      </UiRadioButton>
+    `,
+  }),
+};
+
+export const Errors: Story = {
+  args: {
+    errors: "This field is required.",
+  },
+  render: (args) => ({
+    components: { UiRadioButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <UiRadioButton v-bind="args">
+        {{ args.default }}
+        <template #errors>
+          {{ args.errors }}
+        </template>
+      </UiRadioButton>
+    `,
+  }),
+};
+
+export const Group: Story = {
+  render: (args) => ({
+    components: { UiRadioButton },
+    setup() {
+      const language = ref("de");
+
+      return { args, language };
+    },
+    template: `
+      <div class="space-y-2">
+        <UiRadioButton v-model="language" name="language" v-bind="args" value="en">English</UiRadioButton>
+        <UiRadioButton v-model="language" name="language" v-bind="args" value="de">German</UiRadioButton>
+        <UiRadioButton v-model="language" name="language" v-bind="args" value="fr">French</UiRadioButton>
+      </div>
+    `,
+  }),
+};

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