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

package/dist/src/components/UiSnackbar/UiSnackbar.vue

@@ -1,84 +0,0 @@
-<template>
-  <Transition
-    enter-active-class="duration-200 ease-out"
-    enter-from-class="transform opacity-0"
-    enter-to-class="opacity-100"
-    leave-active-class="duration-200 ease-in"
-    leave-from-class="opacity-100"
-    leave-to-class="transform opacity-0"
-  >
-    <div
-      v-if="isShown"
-      role="status"
-      class="fixed bottom-5 sm:bottom-12"
-      :class="{
-        'left-5 sm:left-12': position === 'left',
-        'right-5 sm:right-12': position === 'right',
-      }"
-    >
-      <div
-        class="flex items-center rounded-full px-4 py-3 shadow-md ease-in"
-        :class="{
-          'bg-accent-red text-neutral': type === 'error',
-          'bg-neutral-primary text-neutral': type === 'info',
-          'bg-accent-green text-neutral': type === 'success',
-        }"
-      >
-        <UiIcon
-          v-if="iconName || type === 'error'"
-          :name="iconName || 'alert-filled'"
-          :size="iconSize"
-          class="mr-2 text-neutral"
-        />
-
-        <p class="text-sm/5 font-normal">
-          <slot />
-        </p>
-
-        <button
-          v-if="$slots.action"
-          ref="actionBtn"
-          type="button"
-          class="ml-3 cursor-pointer text-sm/5 font-semibold hover:underline focus:outline-hidden focus-visible:underline"
-          @click="emit('action-click')"
-        >
-          <slot name="action" />
-        </button>
-      </div>
-    </div>
-  </Transition>
-</template>
-
-<script setup lang="ts">
-import { watch } from "vue";
-
-import UiIcon, { ICON_SIZES, type UiIconName } from "../UiIcon/UiIcon.vue";
-
-const emit = defineEmits<{
-  input: [boolean];
-  "action-click": [];
-}>();
-
-const {
-  isShown = false,
-  position = "left",
-  iconName = undefined,
-  iconSize = "lg",
-  type = "info",
-} = defineProps<{
-  isShown?: boolean;
-  position?: "left" | "right";
-  iconName?: UiIconName;
-  iconSize?: Extract<keyof typeof ICON_SIZES, "sm" | "md" | "lg">;
-  type?: "info" | "error" | "success";
-}>();
-
-watch(
-  () => isShown,
-  (isShown) => {
-    if (isShown) {
-      emit("input", isShown);
-    }
-  },
-);
-</script>

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

@@ -1,28 +0,0 @@
-# @dpa-shared-components/UiSpinner
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiSpinner -->
-<template>
-    <UiSpinner appearance="primary" size="lg"></UiSpinner>
-</template>
-
-<script>
-    import {UiSpinner} from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-| Name         | Type     | Default   | Description                                                                             |
-|--------------|----------|-----------|-----------------------------------------------------------------------------------------|
-| `appearance` | `String` | `primary` | Sets the color theme for the spinner, affecting both the background circle and the arc. |
-| `size`       | `String` | `lg`      | sets size of the spinner                                                                |
-
-
-### Slots
-
-This component has no slots

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

@@ -1,45 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiSpinner from "./UiSpinner.vue";
-
-describe("Spinner", () => {
-  test("renders with default props", () => {
-    const wrapper = mount(UiSpinner);
-
-    // Wrapper div should have size-6 class (lg size)
-    const wrapperDiv = wrapper.find("svg");
-    expect(wrapperDiv.classes()).toContain("size-6");
-
-    // SVG should exist and animate
-    const svg = wrapper.find("svg");
-    expect(svg.exists()).toBe(true);
-    expect(svg.classes()).toContain("animate-spin");
-
-    // Only select circles that are direct children of svg (not inside mask/defs)
-    const visibleCircles = wrapper.findAll("svg > circle");
-    expect(visibleCircles).toHaveLength(2);
-
-    // Background circle should have text-neutral-faint class
-    const bgCircle = wrapper.find("[data-testid=background-circle]");
-    expect(bgCircle.classes()).toContain("text-neutral-faint");
-
-    // Arc circle should have text-primary class
-    const arcCircle = wrapper.find("[data-testid=arc-circle]");
-    expect(arcCircle.classes()).toContain("text-primary");
-  });
-
-  test("renders neutral with opacity color class when appearance is neutral", () => {
-    const wrapper = mount(UiSpinner, {
-      props: {
-        appearance: "neutral",
-      },
-    });
-
-    const arcCircle = wrapper.find("[data-testid=arc-circle]");
-    const bgCircle = wrapper.find("[data-testid=background-circle]");
-
-    expect(arcCircle.classes()).toContain("text-neutral");
-    expect(bgCircle.classes()).toContain("text-neutral/25");
-  });
-});

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

@@ -1,44 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiButton from "../UiButton/UiButton.vue";
-
-import UiSpinner from "./UiSpinner.vue";
-
-const meta = {
-  title: "UI/UiSpinner",
-  component: UiSpinner,
-  args: {
-    appearance: "primary",
-  },
-  render: (args) => ({
-    components: { UiSpinner },
-    setup() {
-      return { args };
-    },
-    template: '<UiSpinner v-bind="args" ></UiSpinner>',
-  }),
-} satisfies Meta<typeof UiSpinner>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    size: "xl",
-    appearance: "primary",
-  },
-};
-
-export const OnButton: Story = {
-  args: {
-    appearance: "neutral",
-  },
-  render: (args) => ({
-    components: { UiSpinner, UiButton },
-    setup() {
-      return { args };
-    },
-    template:
-      '<UiButton appearance="primary"><UiSpinner v-bind="args" ></UiSpinner></UiButton>',
-  }),
-};

package/dist/src/components/UiSpinner/UiSpinner.vue

@@ -1,71 +0,0 @@
-<template>
-  <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"
-    />
-    <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">
-import { computed } from "vue";
-
-export interface SpinnerProps {
-  appearance?: "primary" | "neutral";
-  size?: "sm" | "md" | "lg" | "xl";
-}
-
-const { appearance = "primary", size = "lg" } = defineProps<SpinnerProps>();
-
-const sizeClass = computed(() => {
-  const sizes = {
-    sm: "size-4",
-    md: "size-5",
-    lg: "size-6",
-    xl: "size-8",
-  };
-  return sizes[size];
-});
-
-const arcClass = computed(() => {
-  const variants = {
-    primary: "text-primary",
-    neutral: "text-neutral",
-  };
-  return variants[appearance];
-});
-
-const backgroundClass = computed(() => {
-  const variants = {
-    primary: "text-neutral-faint",
-    neutral: "text-neutral/25",
-  };
-  return variants[appearance];
-});
-</script>

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

@@ -1,43 +0,0 @@
-# @dpa-shared-components/UiToggleButton
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiToggleButton -->
-<template>
-  <UiToggleButton v-model="value">Toggle me</UiToggleButton>
-</template>
-
-
-<script setup lang="ts">
-  import { UiToggleButton } from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-
-## API
-
-### Props
-
-| Name            | Type      | Default | Description                                                  |
-|-----------------|-----------|---------|--------------------------------------------------------------|
-| `id`            | `String`  |         | Sets the `id` of the input. Auto-generated if not provided.  |
-| `modelValue`    | `Boolean` | `false` | The `checked` state of the checkbox                          |
-| `labelPosition` | `String`  | `left`  | To place the label to the right side set this to `"right"`   |
-| `size`          | `String`  | `sm`    | Sets the element's size to either `"sm"` or `"lg"`           |
-
-### Attributes
-
-HTML attributes like `disabled`, `aria-label`, etc. are forwarded to the underlying `<input>` element via `v-bind="$attrs"`.
-
-### Slots
-
-| Name      | Description   |
-|-----------|---------------|
-| `default` | Label content |
-
-### Events
-
-| Name                 | Type      | Description                            |
-|----------------------|-----------|----------------------------------------|
-| `update:model-value` | `boolean` |                                        |

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

@@ -1,75 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiToggleButton from "./UiToggleButton.vue";
-
-function mountToggle(props = {}, slotContent = "Label") {
-  return mount(UiToggleButton, {
-    props,
-    slots: { default: slotContent },
-  });
-}
-
-describe("UiToggleButton", () => {
-  test("renders with correct defaults when no props are provided", () => {
-    const wrapper = mountToggle();
-
-    const input = wrapper.find("[data-testid='toggleButton']");
-    const inputEl = input.element as HTMLInputElement;
-
-    expect(inputEl.checked).toBe(false);
-    expect(inputEl.disabled).toBe(false);
-    expect(input.attributes("id")).toBeTruthy();
-  });
-
-  test("renders slot content", () => {
-    const wrapper = mountToggle({}, "Slot Label");
-
-    expect(wrapper.text()).toContain("Slot Label");
-  });
-
-  test("emits update:modelValue when clicked", async () => {
-    const wrapper = mountToggle({ modelValue: false });
-
-    const input = wrapper.find("[data-testid='toggleButton']");
-    await input.setValue(true);
-
-    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([true]);
-  });
-
-  test("emits update:modelValue false when toggled from true", async () => {
-    const wrapper = mountToggle({ modelValue: true });
-
-    const input = wrapper.find("[data-testid='toggleButton']");
-    await input.setValue(false);
-
-    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
-  });
-
-  test("disables the input when disabled prop is set", () => {
-    const wrapper = mountToggle({ disabled: true });
-
-    const input = wrapper.find("[data-testid='toggleButton']");
-
-    expect((input.element as HTMLInputElement).disabled).toBe(true);
-  });
-
-  test("does not emit update:modelValue when disabled", async () => {
-    const wrapper = mountToggle({ disabled: true, modelValue: false });
-
-    const input = wrapper.find("[data-testid='toggleButton']");
-    await input.setValue(true);
-
-    expect(wrapper.emitted("update:modelValue")).toBeFalsy();
-  });
-
-  test("uses provided id on the input", () => {
-    const wrapper = mountToggle({ id: "custom-id" });
-
-    const input = wrapper.find("[data-testid='toggleButton']");
-
-    expect(input.attributes("id")).toBe("custom-id");
-  });
-});

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

@@ -1,93 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { ref } from "vue";
-
-import UiIcon from "../UiIcon/UiIcon.vue";
-
-import UiToggleButton from "./UiToggleButton.vue";
-
-const meta = {
-  title: "forms/UiToggleButton",
-  component: UiToggleButton,
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: ["sm", "lg"],
-    },
-    modelValue: {
-      control: "boolean",
-    },
-    labelPosition: {
-      control: "select",
-      options: ["left", "right"],
-    },
-  },
-  args: {
-    size: "sm",
-    modelValue: false,
-    labelPosition: "left",
-  },
-} satisfies Meta<typeof UiToggleButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    setup() {
-      const isChecked = ref(args.modelValue);
-      return { args, isChecked };
-    },
-    components: { UiToggleButton },
-    template: `
-      <UiToggleButton v-bind='args' v-model='isChecked'>
-        Label
-      </UiToggleButton>
-    `,
-  }),
-};
-
-export const WithIcon: Story = {
-  render: (args) => ({
-    setup() {
-      const isChecked = ref(args.modelValue);
-      return { args, isChecked };
-    },
-    components: { UiToggleButton, UiIcon },
-    template: `
-      <UiToggleButton v-bind="args" v-model="isChecked">
-      <div class="flex items-center">
-        <UiIcon size="sm" name="flag" />
-        <span class="pl-1.5">Label</span></div>
-      </UiToggleButton>`,
-  }),
-};
-
-export const WithoutLabel: Story = {
-  render: (args) => ({
-    setup() {
-      const isChecked = ref(args.modelValue);
-      return { args, isChecked };
-    },
-    components: { UiToggleButton },
-    template: `
-      <UiToggleButton v-bind="args" v-model="isChecked">
-        <span class="sr-only">Accessible label</span>
-      </UiToggleButton>
-    `,
-  }),
-};
-
-export const Disabled: Story = {
-  render: (args) => ({
-    setup() {
-      const isChecked = ref(args.modelValue);
-      return { args, isChecked };
-    },
-    components: { UiToggleButton },
-    template: `
-      <UiToggleButton v-bind="args" v-model="isChecked" disabled>
-        Label
-      </UiToggleButton>
-    `,
-  }),
-};

package/dist/src/components/UiToggleButton/UiToggleButton.vue

@@ -1,63 +0,0 @@
-<template>
-  <UiLabel
-    :for="toggleId"
-    :class="
-      cn(
-        'inline-flex cursor-pointer gap-2 align-middle leading-4 font-normal text-neutral-emphasis',
-        $attrs.class,
-      )
-    "
-  >
-    <slot v-if="labelPosition === 'left'" />
-
-    <input
-      :id="toggleId"
-      v-model="model"
-      class="relative appearance-none rounded-full shadow-inner transition-opacity duration-200 ease-in-out after:absolute after:-left-1 after:block after:rounded-full after:shadow-sm after:transition-transform after:duration-200 after:ease-in-out after:content-[''] enabled:cursor-pointer"
-      :class="{
-        'bg-secondary-emphasis after:translate-x-full after:bg-secondary':
-          model,
-        'bg-neutral-faint after:bg-neutral-muted': !model,
-        'h-3 w-6 after:-top-0.5 after:size-4': size === 'sm',
-        'h-4 w-10 after:-top-1 after:size-6': size === 'lg',
-      }"
-      type="checkbox"
-      role="switch"
-      data-testid="toggleButton"
-      v-bind="{ ...$attrs, class: null }"
-    />
-
-    <slot v-if="labelPosition === 'right'" />
-  </UiLabel>
-</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 });
-
-const model = defineModel<boolean>({ default: false });
-
-defineSlots<{
-  /**
-   * Label content.
-   */
-  default: () => any;
-}>();
-
-const {
-  id = undefined,
-  labelPosition = "left",
-  size = "sm",
-} = defineProps<{
-  id?: string;
-  labelPosition?: "left" | "right";
-  size?: "sm" | "lg";
-}>();
-
-const defaultId = useId();
-const toggleId = computed(() => id ?? `id-${defaultId}`);
-</script>

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

@@ -1,51 +0,0 @@
-# @dpa-shared-components/UiTooltip
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiTooltip -->
-<template>
-  <UiTooltip>
-    <template #activator>
-      <button>Target</button>
-    </template>
-    Tooltip Content
-  </UiTooltip>
-</template>
-
-
-<script lang="ts" setup>
-  import UiTooltip from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-| Name                | Type                        | Default                             | Description                                                                                                                                                                             |
-|---------------------|-----------------------------|-------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `position`          | `Placement`                 | `bottom`                            | Position of the tooltip relative to the activator slot                                                                                                                                  |
-| `fixed`             | `Boolean`                   | `true`                              | Whether the tooltip positioning is fixed instead of absolute                                                                                                                            |
-| `floatingUiOptions` | `UseFloatingOptions`        | `null`                              | Options for [Floating Ui](https://floating-ui.com/) [Interface](https://github.com/floating-ui/floating-ui/blob/afca34cc59321569ccfca9b41934859809c47a3d/packages/vue/src/types.ts#L60) |
-| `animate`           | `Boolean`                   | `false`                             | Whether the tooltip should be animated                                                                                                                                                  |
-| `hidden`            | `Boolean`                   | `false`                             | Allows you to turn off the tooltip content, useful for scenarios like mobile devices where tooltips may not be needed.                                                                  |
-
-### Attributes
-
-### Attributes
-
-The `class` attribute is forwarded to the component's root element, so e.g. `<UiTooltip class="mt-4">` styles the outer wrapper (useful for layout or positioning).
-The root element has `inline-block` and `align-middle` as default classes, which can be overridden via `tailwind-merge`.
-
-All other attributes (`aria-*`, `data-*`, event listeners, etc.) are forwarded to the inner tooltip content element via `v-bind="$attrs"`.
-
-To style the tooltip content itself, wrap the slot content in your own element with the desired classes.
-
-
-### Slots
-
-| Name        | Description                                  |
-|-------------|----------------------------------------------|
-| `default`   | Default slot for text/content of the tooltip |
-| `activator` | Slot for tooltip activator                   |