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

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

@@ -1,103 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { ref } from "vue";
-
-import UiIcon from "../UiIcon/UiIcon.vue";
-
-import UiButton from "./UiButton.vue";
-
-type UiButtonArgs = InstanceType<typeof UiButton>["$props"] & {
-  disabled?: boolean;
-};
-const meta = {
-  title: "Ui/UiButton",
-  component: UiButton,
-  args: {
-    appearance: "fill-emphasis",
-    size: "md",
-    to: undefined,
-  },
-  argTypes: {
-    disabled: {
-      control: "boolean",
-      description: "Native disabled attribute",
-    },
-  },
-} satisfies Meta<UiButtonArgs>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiButton },
-    template: /*html*/ `
-      <UiButton v-bind="args">
-        Save
-      </UiButton>
-    `,
-  }),
-};
-
-export const WithIcon: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiButton, UiIcon },
-    template: /*html*/ `
-      <UiButton v-bind="args">
-        <UiIcon name="save" />
-        Save
-      </UiButton>
-    `,
-  }),
-};
-
-export const WithTwoIcons: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiButton, UiIcon },
-    template: /*html*/ `
-      <UiButton v-bind="args">
-        <UiIcon name="edit" />
-        Edit
-        <UiIcon name="chevron-down" />
-      </UiButton>
-    `,
-  }),
-};
-
-export const IconOnlyAndAriaLabel: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiButton, UiIcon },
-    template: /*html*/ `
-      <UiButton v-bind="args" aria-label="Save">
-        <UiIcon name="save" />
-      </UiButton>
-    `,
-  }),
-};
-
-export const ToggleIcon: Story = {
-  render: (args) => ({
-    setup() {
-      const isVisible = ref(false);
-
-      return { args, isVisible };
-    },
-    components: { UiButton, UiIcon },
-    template: /*html*/ `
-      <UiButton v-bind="args" aria-label="Is visible" @click="isVisible = !isVisible">
-        <UiIcon :name="isVisible ? 'view' : 'view-off'" />
-      </UiButton>
-    `,
-  }),
-};

package/dist/src/components/UiButton/UiButton.vue

@@ -1,85 +0,0 @@
-<template>
-  <component
-    :is="typeof to === 'string' ? 'a' : to ? 'RouterLink' : 'button'"
-    :class="
-      cn(
-        'UiButton inline-flex items-center justify-center gap-2 rounded-full border align-middle leading-normal font-medium whitespace-nowrap not-disabled:cursor-pointer focus:outline-hidden focus-visible:focus-outline disabled:cursor-not-allowed',
-        appearanceClasses,
-        BUTTON_SIZE_CLASSES[size],
-        $attrs.class,
-      )
-    "
-    v-bind="{ ...attributes, class: undefined }"
-  >
-    <template v-for="(vNode, index) in $slots.default?.()" :key="index">
-      <span v-if="vNode.type === Text"><component :is="vNode" /></span>
-      <template v-else><component :is="vNode" /></template>
-    </template>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed, Text } from "vue";
-import type { RouteLocationRaw } from "vue-router";
-
-import type { Size } from "../../types/index.ts";
-import { cn } from "../../utils/cn.ts";
-
-const BUTTON_SIZE_CLASSES = {
-  xs: "h-6 text-xs [&:has(>svg:only-child)]:w-6 [&:not(:has(>svg:only-child))]:px-2 [&>svg]:size-3 [&:has(>svg:only-child)>svg]:size-4",
-  sm: "h-8 text-sm [&:has(>svg:only-child)]:w-8 [&:not(:has(>svg:only-child))]:px-4 [&>svg]:size-4 [&:has(>svg:only-child)>svg]:size-6",
-  md: "h-10 text-base [&:has(>svg:only-child)]:w-10 [&:not(:has(>svg:only-child))]:px-4 [&>svg]:size-5 [&:has(>svg:only-child)>svg]:size-6",
-  lg: "h-12 text-base [&:has(>svg:only-child)]:w-12 [&:not(:has(>svg:only-child))]:px-4 [&>svg]:size-5 [&:has(>svg:only-child)>svg]:size-6",
-} satisfies Partial<Record<Size, string>>;
-
-defineSlots<{
-  /**
-   * Button content. Note, that text nodes are wrapped in a `span` element to ensure they can be detected using the CSS selectors responsible for applying icon-only-specific styles.
-   */
-  default: () => any;
-}>();
-
-const {
-  to = undefined,
-  size = "md",
-  appearance = "fill-emphasis",
-} = defineProps<{
-  to?: RouteLocationRaw;
-  size?: keyof typeof BUTTON_SIZE_CLASSES;
-  appearance?:
-    | "fill-emphasis"
-    | "fill-subtle"
-    | "outline-emphasis"
-    | "outline-subtle"
-    | "ghost";
-}>();
-
-const attributes = computed(() => {
-  const attrs: Record<string, unknown> = {};
-  if (typeof to === "string") {
-    attrs.href = to;
-  } else if (to) {
-    attrs.to = to;
-  } else {
-    attrs.type = "button";
-  }
-
-  return attrs;
-});
-
-const appearanceClasses = computed(
-  () =>
-    ({
-      "fill-emphasis":
-        "border-transparent bg-primary text-neutral not-disabled:hover:bg-primary-hover disabled:bg-neutral-faint disabled:text-neutral-soft",
-      "outline-emphasis":
-        "border-neutral-faint bg-transparent text-primary-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-primary-hover disabled:text-neutral-faint",
-      "outline-subtle":
-        "border-neutral-faint bg-transparent text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",
-      "fill-subtle":
-        "border-transparent bg-neutral-subtle text-neutral not-disabled:hover:bg-neutral-emphasis disabled:bg-neutral-faint disabled:text-neutral-soft",
-      ghost:
-        "border-transparent bg-transparent text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",
-    })[appearance],
-);
-</script>

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

@@ -1,33 +0,0 @@
-# @dpa-shared-components/UiCheckbox
-
-## Usage
-
-```vue
-<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.
-
-| Name           | Type      | Default    | Description                                 |
-|----------------|-----------|------------|---------------------------------------------|
-| `appearance` | `"primary"`, `"secondary"` | `"primary"` |  |
-| `size` | `"sm"`, `"md"` | `"md"` |  |
-
-### Slots
-
-| Name      | Description                                 |
-|-----------|---------------------------------------------|
-| `default` | Checkbox label |
-| `errors`  | For validation error content that's associated with the form control via `aria-errormessage` |

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

@@ -1,47 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiCheckbox from "./UiCheckbox.vue";
-
-describe("UiCheckbox", () => {
-  test("renders attributes on correct elements", () => {
-    const wrapper = mount(UiCheckbox, {
-      slots: {
-        default: "default",
-        errors: "errors",
-      },
-      props: {
-        id: "id",
-        class: "testClass",
-        "data-testid": "testId",
-        name: "name",
-        value: "value",
-        checked: true,
-        required: "required",
-        disabled: true,
-      },
-    });
-
-    const root = wrapper.find(":first-child");
-    expect(root.element.classList.contains("testClass")).toBe(true);
-
-    const label = wrapper.find("label");
-    expect(label.element.classList.contains("testClass")).toBe(false);
-    expect(label.element.getAttribute("data-testid")).toBe("testId");
-
-    const input = wrapper.find("input");
-    expect(input.element.classList.contains("testClass")).toBe(false);
-    expect(input.element.getAttribute("data-testid")).not.toBe("testId");
-    expect(input.element.getAttribute("id")).toBe("id");
-    expect(input.element.getAttribute("name")).toBe("name");
-    expect(input.element.getAttribute("value")).toBe("value");
-    expect(input.element.hasAttribute("checked")).toBe(true);
-    expect(input.element.hasAttribute("required")).toBe(true);
-    expect(input.element.hasAttribute("disabled")).toBe(true);
-    expect(input.element.getAttribute("aria-invalid")).toBe("true");
-    expect(input.element.getAttribute("aria-errormessage")).not.toBe(undefined);
-
-    expect(wrapper.text()).toContain("default");
-    expect(wrapper.text()).toContain("errors");
-  });
-});

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

@@ -1,98 +0,0 @@
-import type {
-  ComponentPropsAndSlots,
-  Meta,
-  StoryObj,
-} from "@storybook/vue3-vite";
-import { ref } from "vue";
-
-import UiCheckbox from "./UiCheckbox.vue";
-
-type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiCheckbox> & {
-  name?: string;
-  disabled?: boolean;
-};
-
-const meta = {
-  title: "forms/UiCheckbox",
-  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
-  component: UiCheckbox,
-  argTypes: {
-    // Attributes
-    name: { control: "text" },
-    disabled: { control: "boolean" },
-  },
-  args: {
-    // Attributes
-    name: "name",
-    disabled: false,
-
-    // Props
-    appearance: "primary",
-    size: "md",
-
-    // Slots
-    default: "Checkbox",
-    errors: "",
-  },
-} satisfies Meta<PropsAndCustomArgs>;
-
-export default meta;
-type Story = StoryObj<PropsAndCustomArgs>;
-
-export const Default: Story = {
-  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
-  render: (args) => ({
-    components: { UiCheckbox },
-    setup() {
-      return { args };
-    },
-    template: /*html*/ `
-      <UiCheckbox v-bind="args">
-        {{ args.default }}
-        <template v-if="args.errors" #errors>
-          {{ args.errors }}
-        </template>
-      </UiCheckbox>
-    `,
-  }),
-};
-
-export const Errors: Story = {
-  args: {
-    errors: "This field is required.",
-  },
-  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
-  render: (args) => ({
-    components: { UiCheckbox },
-    setup() {
-      return { args };
-    },
-    template: /*html*/ `
-      <UiCheckbox v-bind="args">
-        {{ args.default }}
-        <template #errors>
-          {{ args.errors }}
-        </template>
-      </UiCheckbox>
-    `,
-  }),
-};
-
-export const Group: Story = {
-  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
-  render: (args) => ({
-    components: { UiCheckbox },
-    setup() {
-      const languages = ref(["de", "en"]);
-
-      return { args, languages };
-    },
-    template: /*html*/ `
-      <div class="space-y-2">
-        <UiCheckbox v-model="languages" v-bind="args" value="en">English</UiCheckbox>
-        <UiCheckbox v-model="languages" v-bind="args" value="de">German</UiCheckbox>
-        <UiCheckbox v-model="languages" v-bind="args" value="fr">French</UiCheckbox>
-      </div>
-    `,
-  }),
-};

package/dist/src/components/UiCheckbox/UiCheckbox.vue

@@ -1,86 +0,0 @@
-<template>
-  <div :class="cn('max-w-max space-y-1', $attrs.class)">
-    <UiLabel
-      class="inline-flex items-center align-middle [&: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="aspect-square appearance-none rounded-sm border-2 bg-neutral transition-colors after:block after:size-full after:leading-0 checked:after:content-[url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTYuMjkgMTIuOGEuOC44IDAgMCAxLS41ODMtLjI1MmwtMy44OS00LjE0M2EuOC44IDAgMSAxIDEuMTY2LTEuMDk2bDMuMyAzLjUxMyA2LjcyNi03LjM2MWEuOC44IDAgMCAxIDEuMTgyIDEuMDc4bC03LjMxIDhhLjguOCAwIDAgMS0uNTg1LjI2eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==)] enabled:cursor-pointer disabled:border-neutral-muted disabled:text-neutral-soft disabled:checked:bg-neutral-muted"
-        :class="{
-          'size-4': size === 'sm',
-          'size-5': size === 'md',
-          'border-primary checked:bg-primary enabled:hover:border-primary-hover checked:enabled:hover:bg-primary-hover':
-            appearance === 'primary',
-          'border-neutral-emphasis checked:bg-neutral-emphasis enabled:hover:border-neutral-primary checked:enabled:hover:bg-neutral-primary':
-            appearance === 'secondary',
-        }"
-        type="checkbox"
-        :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"
-  generic="ModelValue extends string[] | string | boolean"
->
-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<ModelValue>();
-
-const defaultId = useId();
-const uniqueId = computed(() => id ?? `id-${defaultId}`);
-</script>

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

@@ -1,35 +0,0 @@
-# @dpa-shared-components/UiChip
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiChip -->
-<template>
-    <UiChip>Chip Content</UiChip>
-</template>
-
-<script>
-    import {UiChip} from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-| Name          | Type                   | Default | Description                                                  |
-|---------------|------------------------|---------|--------------------------------------------------------------|
-| `size`        | `"xs" \| "sm" \| "md"` | `sm`    | Determines the font-size and line-height of the chip content |
-| `closeButton` | `boolean`              | `false` | renders optional close button                                |
-
-### Events
-
-| Name    | Payload | Description                          |
-|---------|---------|--------------------------------------|
-| `close` | `[]`    | Emitted when close button is clicked |
-
-### Slots
-
-| Name      | Description                               |
-|-----------|-------------------------------------------|
-| `default` | slot for the rendering the chip's content |

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

@@ -1,20 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiChip from "./UiChip.vue";
-
-describe("UiChip", () => {
-  test("renders sm size by default", () => {
-    const wrapper = mount(UiChip);
-    expect(wrapper.classes("text-sm/6")).toBe(true);
-  });
-  test("renders md size", () => {
-    const wrapper = mount(UiChip, {
-      props: {
-        size: "md",
-      },
-    });
-
-    expect(wrapper.classes("text-sm/8")).toBe(true);
-  });
-});

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

@@ -1,75 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiChip from "./UiChip.vue";
-
-const meta = {
-  title: "UI/UiChip",
-  component: UiChip,
-  args: {
-    size: "sm",
-    closeButton: true,
-  },
-} satisfies Meta<typeof UiChip>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { UiChip },
-    setup() {
-      return { args };
-    },
-    template: '<UiChip v-bind="args">Klima</UiChip>',
-  }),
-};
-
-export const WithSearchStrings: Story = {
-  render: (args) => ({
-    components: { UiChip },
-    setup() {
-      return { args };
-    },
-    template: `<UiChip v-bind="args">
-      <div class="flex items-center gap-1">
-        <span>Wirtschaft</span> <span class="uppercase font-semibold text-neutral-subtle">oder</span><span>Politik</span>
-      </div>
-    </UiChip>`,
-  }),
-};
-
-export const AsKeywords: Story = {
-  args: {
-    closeButton: false,
-    size: "sm",
-  },
-  render: (args) => ({
-    components: { UiChip },
-    setup() {
-      return { args };
-    },
-    template: `<div class="flex gap-2">
-      <UiChip v-bind="args">Politzei</UiChip>
-      <UiChip v-bind="args">Kriminalität</UiChip>
-      <UiChip v-bind="args">Niedersachsen</UiChip>
-    </div>`,
-  }),
-};
-
-export const AsTags: Story = {
-  args: {
-    closeButton: true,
-    size: "xs",
-  },
-  render: (args) => ({
-    components: { UiChip },
-    setup() {
-      return { args };
-    },
-    template: `<div class="border border-neutral-faint p-4 flex gap-2">
-      <UiChip v-bind="args">Politzei</UiChip>
-      <UiChip v-bind="args">Kriminalität</UiChip>
-      <UiChip v-bind="args">Niedersachsen</UiChip>
-    </div>`,
-  }),
-};

package/dist/src/components/UiChip/UiChip.vue

@@ -1,43 +0,0 @@
-<template>
-  <div
-    class="flex max-w-min flex-nowrap items-center gap-x-1 rounded-full bg-neutral-faint px-2 font-normal whitespace-nowrap text-neutral-primary"
-    :class="CHIP_SIZES[size]"
-  >
-    <slot />
-    <button
-      v-if="closeButton"
-      class="flex items-center justify-center rounded-full hover:bg-neutral-soft"
-      @click.stop="$emit('close')"
-    >
-      <UiIcon
-        class="text-current"
-        name="close"
-        :size="size == 'xs' ? 'xs' : 'sm'"
-      />
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Size } from "../../types";
-import UiIcon from "../UiIcon/UiIcon.vue";
-
-defineSlots<{
-  default: () => any;
-}>();
-
-defineEmits<{
-  close: [];
-}>();
-
-const CHIP_SIZES: Record<Extract<Size, "xs" | "sm" | "md">, string> = {
-  xs: "text-xs/5",
-  sm: "text-sm/6",
-  md: "text-sm/8",
-};
-
-const { size = "sm", closeButton = undefined } = defineProps<{
-  closeButton?: boolean;
-  size?: Extract<Size, "xs" | "sm" | "md">;
-}>();
-</script>

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

@@ -1,31 +0,0 @@
-# @dpa-shared-components/UiColorPicker
-
-## Usage
-
-```vue
-<template>
-  <UiLabel for="colorPicker">Farbe wählen</UiLabel>
-  <UiColorPicker id="colorPicker" v-model="colorValue" />
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { UiColorPicker, UiLabel } from "@dpa-id-components/dpa-shared-components";
-
-const colorValue = ref("");
-</script>
-```
-
-## API
-
-### Props
-
-| Name          | Type        | Default                              | Description                                         |
-|---------------|-------------|--------------------------------------|-----------------------------------------------------|
-| `modelValue`  | `String`    | `"#e53935"` (see `./lib/colors.ts`)  | Color code in hexadecimal syntax                    |
-
-### Events
-
-| Name                | Type                                        | Description                                       |
-|---------------------|---------------------------------------------|---------------------------------------------------|
-| `update:modelValue` | `string` (color code in hexadecimal syntax) | Emitted when a color has been selected or entered |