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

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

@@ -1,56 +0,0 @@
-# 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

@@ -1,49 +0,0 @@
-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-lg border border-neutral-faint bg-neutral p-2 shadow-md">
-              <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

@@ -1,210 +0,0 @@
-<template>
-  <div ref="reference" class="w-fit" @click="update">
-    <slot name="button" v-bind="{ open, close, toggle, isOpen }" />
-
-    <Transition :name="animate ? 'fade-up' : 'none'">
-      <div
-        v-if="isOpen"
-        ref="floating"
-        :style="floatingStyles"
-        class="z-10 w-fit [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 { onClickOutside } from "@vueuse/core";
-import { ref, useTemplateRef, watch } from "vue";
-
-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 emit = defineEmits<{
-  toggle: [isOpen: boolean];
-}>();
-
-const reference = useTemplateRef("reference");
-const floating = useTemplateRef("floating");
-
-const { floatingStyles, update } = useFloating(reference, floating, {
-  placement,
-  middleware: [offset(4), flip(), shift()],
-  whileElementsMounted: autoUpdate,
-});
-
-const isOpen = ref(initiallyOpen);
-
-watch(isOpen, (isOpen) => {
-  emit("toggle", isOpen);
-});
-
-function open() {
-  isOpen.value = true;
-}
-
-function close() {
-  isOpen.value = false;
-}
-
-function toggle() {
-  isOpen.value = !isOpen.value;
-}
-
-onClickOutside(
-  floating,
-  () => {
-    if (isOpen.value) {
-      close();
-    }
-  },
-  {
-    ignore: [
-      // Ignore clicks on the reference element
-      reference,
-    ],
-  },
-);
-
-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

@@ -1,44 +0,0 @@
-# @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

@@ -1,94 +0,0 @@
-import type {
-  ComponentPropsAndSlots,
-  Meta,
-  StoryObj,
-} from "@storybook/vue3-vite";
-import { ref } from "vue";
-
-import UiRadioButton from "./UiRadioButton.vue";
-
-type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiRadioButton> & {
-  name?: string;
-  disabled?: boolean;
-};
-
-const meta = {
-  title: "forms/UiRadioButton",
-  component: UiRadioButton,
-  argTypes: {
-    // Attributes
-    name: { control: "text" },
-    disabled: { control: "boolean" },
-  },
-  args: {
-    // Attributes
-    name: "name",
-    disabled: false,
-
-    // Props
-    appearance: "primary",
-    size: "md",
-
-    // Slots
-    default: "Radio",
-    errors: "",
-  },
-} satisfies Meta<PropsAndCustomArgs>;
-
-export default meta;
-type Story = StoryObj<PropsAndCustomArgs>;
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { UiRadioButton },
-    setup() {
-      return { args };
-    },
-    template: /*html*/ `
-      <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: /*html*/ `
-      <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: /*html*/ `
-      <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

@@ -1,82 +0,0 @@
-<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-[''] 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/dist/src/components/UiSearchBar/README.md

@@ -1,56 +0,0 @@
-# @dpa-shared-components/UiSearchBar
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiSearchBar -->
-<template>
-  <UiSearchBar
-    v-model="searchValue"
-    placeholder="Search..."
-    appearance="neutral-whisper"
-    @focus="handleFocus"
-    @blur="handleBlur"
-    @submit="handleSubmit"
-    @search="handleSearch"
-    @reset="handleReset"
-  >
-    <template #chips>
-      <!-- Optional: render filter chips when input is blurred and has a value -->
-    </template>
-    <template #action>
-      <!-- Optional: additional action buttons -->
-    </template>
-  </UiSearchBar>
-</template>
-
-```
-
-### Props
-
-| Name                       | Type                             | Default             | Description                                 |
-|----------------------------|----------------------------------|---------------------|---------------------------------------------|
-| `modelValue`               | `string`                         | `""`                | The `input`'s value (use with `v-model`)    |
-| `placeholder`              | `string`                         | `""`                | Text for the `input`'s placeholder          |
-| `appearance`               | `"neutral-whisper" \| "neutral"` | `"neutral-whisper"` | Sets the background color of the search bar |
-| `executeSearchButtonTitle` | `string`                         | `"Execute Search"`  | Aria-label for the search button            |
-| `resetSearchButtonTitle`   | `string`                         | `"Reset Search"`    | Aria-label for the reset button             |
-| `showResetButtonOnMobile`  | `boolean`                        | `false`             | Shows the reset button on mobile viewports  |
-
-### Events
-
-| Name                | Type         | Description                                             |
-|---------------------|--------------|---------------------------------------------------------|
-| `blur`              | `FocusEvent` | Emitted when the `input` loses focus                    |
-| `focus`             | `FocusEvent` | Emitted when the `input` is focused                     |
-| `reset`             | `string`     | Emitted when the reset button is clicked                |
-| `search`            | `string`     | Emitted when the search button is clicked               |
-| `submit`            | `string`     | Emitted when the user presses Enter                     |
-| `update:modelValue` | `string`     | Emitted when the input value changes (implicit v-model) |
-
-### Slots
-
-| Name     | Description                                                                            |
-|----------|----------------------------------------------------------------------------------------|
-| `chips`  | Content displayed in place of the input text when the input is blurred and has a value |
-| `action` | Additional action elements rendered before the reset and search buttons                |

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

@@ -1,65 +0,0 @@
-import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiSearchBar from "./UiSearchBar.vue";
-
-function createWrapper(
-  options: ComponentMountingOptions<typeof UiSearchBar> = {},
-) {
-  return mount(UiSearchBar, {
-    ...options,
-  });
-}
-
-describe("UiSearchBar", () => {
-  test("renders the placeholder", () => {
-    const placeholder = "Example query";
-    const wrapper = createWrapper({ props: { placeholder } });
-
-    const textInput = wrapper.find("input");
-    expect(textInput.element.placeholder).toBe(placeholder);
-  });
-
-  test("renders the value", async () => {
-    const wrapper = createWrapper();
-
-    const searchQuery = "Ein Suchbegriff";
-    const textInput = wrapper.find("input");
-    await textInput.setValue(searchQuery);
-    expect(wrapper.emitted()["update:modelValue"]).toBeTruthy();
-    expect(textInput.element.value).toBe(searchQuery);
-  });
-
-  test("emits focus event", async () => {
-    const wrapper = createWrapper();
-
-    const textInput = wrapper.find("input");
-    await textInput.trigger("focus");
-    expect(wrapper.emitted("focus")).toBeTruthy();
-  });
-
-  test("emits blur event", async () => {
-    const wrapper = createWrapper();
-
-    const textInput = wrapper.find("input");
-    await textInput.trigger("blur");
-    expect(wrapper.emitted("blur")).toBeTruthy();
-  });
-
-  test("renders chips and action slot", async () => {
-    const wrapper = createWrapper({
-      props: {
-        placeholder: "Suchen",
-        backgroundColor: "neutral-whisper",
-      },
-      slots: {
-        action: "<button>Erweiterte Suche</button>",
-        chips: "<p>Hamburg</p>",
-      },
-    });
-    const textInput = wrapper.find("input");
-    await textInput.setValue("Test");
-    expect(wrapper.html()).toContain("<button>Erweiterte Suche</button>");
-    expect(wrapper.html()).toContain("<p>Hamburg</p>");
-  });
-});