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

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

@@ -1,228 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiInput from "./UiInput.vue";
-
-describe("UiInput", () => {
-  test("renders attributes on correct element", () => {
-    const wrapper = mount(UiInput, {
-      props: {
-        id: "id",
-        class: "testClass",
-        "data-testid": "testId",
-        name: "name",
-        modelValue: "value",
-        placeholder: "placeholder",
-        required: "required",
-        readonly: true,
-        disabled: true,
-        "aria-invalid": "true",
-        "aria-errormessage": "message",
-      },
-    });
-
-    const root = wrapper.find(":first-child");
-    expect(root.element.classList.contains("testClass")).toBe(true);
-    expect(root.element.getAttribute("data-testid")).not.toBe("testId");
-
-    const input = wrapper.find("input");
-    expect(input.element.classList.contains("testClass")).toBe(false);
-    expect(input.element.getAttribute("data-testid")).toBe("testId");
-    expect(input.element.getAttribute("id")).toBe("id");
-    expect(input.element.getAttribute("name")).toBe("name");
-    expect(input.element.getAttribute("placeholder")).toBe("placeholder");
-    expect(input.element.hasAttribute("required")).toBe(true);
-    expect(input.element.hasAttribute("readonly")).toBe(true);
-    expect(input.element.hasAttribute("disabled")).toBe(true);
-    expect(input.element.getAttribute("aria-invalid")).toBe("true");
-    expect(input.element.getAttribute("aria-errormessage")).toBe("message");
-  });
-
-  test("renders the label", async () => {
-    const wrapper = mount(UiInput, {
-      props: {
-        label: "Date",
-      },
-    });
-
-    expect(wrapper.find("label").text()).toBe("Date");
-  });
-
-  test("renders value", async () => {
-    const wrapper = mount(UiInput, {
-      props: {
-        modelValue: "foo",
-      },
-    });
-
-    expect(wrapper.find("input").element.value).toBe("foo");
-  });
-
-  test("changes value on input", async () => {
-    const wrapper = mount(UiInput, {
-      props: {
-        modelValue: "foo",
-      },
-    });
-
-    const input = wrapper.find("input");
-    expect(input.element.value).toBe("foo");
-
-    await wrapper.setProps({
-      modelValue: "bar",
-    });
-    expect(input.element.value).toBe("bar");
-  });
-
-  test("renders the info", () => {
-    const wrapper = mount(UiInput, {
-      props: {
-        inputStatus: "info",
-      },
-      slots: {
-        extra: "This is an info example",
-      },
-    });
-
-    expect(wrapper.find("input + div").text()).toBe("This is an info example");
-  });
-
-  test("renders the warning", () => {
-    const wrapper = mount(UiInput, {
-      props: {
-        inputStatus: "warning",
-      },
-      slots: {
-        extra: "This is an warning example",
-      },
-    });
-
-    expect(wrapper.find("input + div").text()).toBe(
-      "This is an warning example",
-    );
-  });
-
-  test("renders the error", async () => {
-    const wrapper = mount(UiInput, {
-      props: {
-        inputStatus: "error",
-      },
-      slots: {
-        extra: "This is an error example",
-      },
-    });
-
-    expect(wrapper.find("input + div").text()).toBe("This is an error example");
-  });
-
-  test("works without v-model", async () => {
-    const wrapper = mount(UiInput);
-
-    const input = wrapper.find("input");
-    expect(input.element.value).toBe("");
-    expect((wrapper.emitted("update:modelValue") ?? []).at(-1)).toEqual(
-      undefined,
-    );
-
-    await input.setValue("a");
-    expect(input.element.value).toBe("a");
-    expect((wrapper.emitted("update:modelValue") ?? []).at(-1)).toEqual(["a"]);
-
-    await input.setValue("ab");
-    expect(input.element.value).toBe("ab");
-    expect((wrapper.emitted("update:modelValue") ?? []).at(-1)).toEqual(["ab"]);
-  });
-
-  test("doesn't undo inputs on blur (bug fix)", async () => {
-    const wrapper = mount(UiInput);
-    const input = wrapper.find("input");
-
-    // Focus the input to trigger an internal mechanism that swaps out styles on the `label` element.
-    await input.trigger("focus");
-    await input.setValue("ab");
-    expect(input.element.value).toBe("ab");
-
-    // Blur the input to trigger an internal mechanism that swaps out styles on the `label` element (again). This can trigger a bug.
-    await input.trigger("blur");
-    expect(input.element.value).toBe("ab");
-  });
-
-  test("renders as textarea with isTextarea prop", async () => {
-    const wrapper = mount(UiInput, {
-      props: {
-        isTextarea: true,
-      },
-    });
-
-    expect(wrapper.find("textarea").exists()).toBe(true);
-  });
-
-  test("raises/lowers label correctly when making inputs and focusing/blurring the input (bug fix)", async () => {
-    const wrapper = mount(UiInput, { props: { label: "test" } });
-
-    // Initially, the label is not raised
-    const input = wrapper.find("input");
-    expect(input.element.hasAttribute("data-is-label-raised")).toBe(false);
-
-    // Upon focusing, the label will be raised
-    await input.trigger("focus");
-    expect(input.element.hasAttribute("data-is-label-raised")).toBe(true);
-
-    // Making an input keeps the label raised
-    input.element.value = "ab";
-    await input.trigger("input");
-    expect(input.element.value).toBe("ab");
-    expect(input.element.hasAttribute("data-is-label-raised")).toBe(true);
-
-    // Blurring the input keeps the label raised because there's now a value
-    await input.trigger("blur");
-    expect(input.element.hasAttribute("data-is-label-raised")).toBe(true);
-
-    // After focusing, the label is still raised
-    await input.trigger("focus");
-    expect(input.element.hasAttribute("data-is-label-raised")).toBe(true);
-
-    // Clearing the input but keeping the focus keeps the label raised
-    input.element.value = "";
-    await input.trigger("input");
-    expect(input.element.value).toBe("");
-    expect(input.element.hasAttribute("data-is-label-raised")).toBe(true);
-
-    // Blurring the input will eventually lower the label again
-    await input.trigger("blur");
-    expect(input.element.hasAttribute("data-is-label-raised")).toBe(false);
-  });
-
-  test("can clear input value by setting modelValue to empty string (bug fix)", async () => {
-    const wrapper = mount(UiInput);
-
-    const input = wrapper.find("input");
-    expect(input.element.value).toBe("");
-
-    await input.setValue("test");
-    expect(input.element.value).toBe("test");
-
-    await wrapper.setProps({ modelValue: "" });
-    expect(input.element.value).toBe("");
-  });
-
-  test("works with number model", async () => {
-    const wrapper = mount(UiInput, {
-      props: {
-        type: "number",
-        modelValue: 1,
-      },
-    });
-
-    const input = wrapper.find("input");
-    expect(input.element.value).toBe("1");
-
-    await input.setValue(2);
-    expect(input.element.value).toBe("2");
-    expect((wrapper.emitted("update:modelValue") ?? []).at(-1)).toEqual([2]);
-
-    await input.setValue(3);
-    expect(input.element.value).toBe("3");
-    expect((wrapper.emitted("update:modelValue") ?? []).at(-1)).toEqual([3]);
-  });
-});

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

@@ -1,163 +0,0 @@
-import type {
-  ComponentPropsAndSlots,
-  Meta,
-  StoryObj,
-} from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
-
-import UiInput from "./UiInput.vue";
-
-type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiInput> & {
-  name?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  readonly?: boolean;
-  autocomplete?: string;
-};
-
-const meta = {
-  title: "forms/UiInput",
-  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
-  component: UiInput,
-  args: {
-    // Attributes
-    name: "name",
-    placeholder: undefined,
-    disabled: false,
-    readonly: false,
-    autocomplete: "on",
-
-    // Props
-    modelValue: "",
-    type: "text",
-    inputStatus: undefined,
-    label: "",
-    isTextarea: false,
-
-    // Slots
-    default: "Name",
-  },
-  argTypes: {
-    // Attributes
-    name: { control: "text" },
-    placeholder: { control: "text" },
-    disabled: { control: "boolean" },
-    readonly: { control: "boolean" },
-  },
-  render: (args) => ({
-    components: { UiInput },
-    setup() {
-      return { args };
-    },
-    template: /*html*/ `
-      <UiInput
-        v-bind="args"
-        v-model="args.modelValue"
-        @input="input"
-        @update:modelValue="update"
-      >
-        {{ args.default }}
-
-        <template v-if="args.extra" #extra>
-          {{ args.extra }}
-        </template>
-      </UiInput>
-    `,
-    methods: {
-      input: action("input"),
-      update: action("update:modelValue"),
-    },
-  }),
-} satisfies Meta<PropsAndCustomArgs>;
-
-export default meta;
-type Story = StoryObj<PropsAndCustomArgs>;
-
-export const Default: Story = {};
-
-export const Placeholder: Story = {
-  args: {
-    // Attributes
-    placeholder: "Some placeholder text",
-
-    // Slots
-    default: "Name",
-  },
-};
-
-export const StringValue: Story = {
-  args: {
-    // Props
-    modelValue: "Text value",
-
-    // Slots
-    default: "Name",
-  },
-};
-
-export const NumberValue: Story = {
-  args: {
-    // Attributes
-    type: "number",
-
-    // Props
-    modelValue: 2,
-
-    // Slots
-    default: "Count",
-  },
-};
-
-export const Errors: Story = {
-  args: {
-    // Props
-    inputStatus: "error",
-
-    // Slots
-    default: "Name",
-    extra: "This field is required.",
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    // Props
-    inputStatus: "warning",
-
-    // Slots
-    default: "Warning",
-    extra: "Warning text",
-  },
-};
-
-export const Info: Story = {
-  args: {
-    // Props
-    inputStatus: "info",
-
-    // Slots
-    default: "Info",
-    extra: "Info text",
-  },
-};
-
-export const DateTime: Story = {
-  args: {
-    // Props
-    type: "datetime-local",
-    modelValue: "2018-06-12T19:30",
-
-    // Slots
-    default: "Date time",
-  },
-};
-
-export const Textarea: Story = {
-  args: {
-    // Props
-    isTextarea: true,
-
-    // Slots
-    default: "Textarea",
-  },
-};

package/dist/src/components/UiInput/UiInput.vue

@@ -1,154 +0,0 @@
-<template>
-  <div :class="cn('relative', $attrs.class)">
-    <UiLabel
-      v-if="$slots.default || label"
-      :for="uniqueId"
-      :class="
-        cn(
-          `pointer-events-none absolute left-3 z-1 origin-left translate-y-4 px-1 text-neutral-muted transition-all duration-150 select-none [&:has(+:is(input,textarea):where(:enabled:hover))]:text-neutral-subtle [&:has(+:is(input,textarea):where(:focus))]:text-primary [&:has(+:is(input,textarea):where(:read-only:enabled:hover))]:text-neutral-subtle [&:has(+:is(input,textarea):where(:read-only:focus))]:text-neutral-subtle [&:has(+:is(input,textarea):where([aria-invalid='true']))]:text-error [&:has(+:is(input,textarea):where([aria-invalid='true']:enabled:hover))]:text-error-hover [&:has(+:is(input,textarea):where([aria-invalid='true']:focus))]:text-error-hover [&:has(+[data-is-label-raised])]:-translate-y-1/2 [&:has(+[data-is-label-raised])]:bg-neutral [&:has(+[data-is-label-raised])]:text-xs`,
-          {
-            '[&:has(+:is(input,textarea):where(:focus))]:text-neutral-subtle':
-              inputStatus === 'info',
-            'text-orange-default [&:has(+:is(input,textarea):where(:enabled:hover))]:text-orange-dark [&:has(+:is(input,textarea):where(:focus))]:text-orange-dark':
-              inputStatus === 'warning',
-          },
-        )
-      "
-    >
-      <slot>
-        {{ label }}
-      </slot>
-    </UiLabel>
-
-    <textarea
-      v-if="isTextarea"
-      :id="uniqueId"
-      v-model="model"
-      :aria-invalid="inputStatus === 'error'"
-      :aria-errormessage="
-        inputStatus === 'error' ? `${uniqueId}-extra` : undefined
-      "
-      :aria-label="label"
-      class="h-24"
-      :class="componentClass"
-      data-testid="input-value"
-      v-bind="{ ...$attrs, class: null }"
-      :data-is-label-raised="
-        $attrs.placeholder || isFocused || hasInput ? '' : undefined
-      "
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-    <input
-      v-else
-      :id="uniqueId"
-      v-model="model"
-      :aria-invalid="inputStatus === 'error'"
-      :aria-errormessage="
-        inputStatus === 'error' ? `${uniqueId}-extra` : undefined
-      "
-      :aria-label="label"
-      class="h-14"
-      :class="componentClass"
-      :type="type"
-      autocomplete="on"
-      data-testid="input-value"
-      v-bind="{ ...$attrs, class: null }"
-      :data-is-label-raised="
-        $attrs.placeholder || isFocused || hasInput ? '' : undefined
-      "
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-
-    <div
-      v-if="$slots.extra && inputStatus !== undefined"
-      :id="`${uniqueId}-extra`"
-      :class="
-        cn(
-          'rounded-b-sm px-4 py-1 text-xs/normal font-medium transition-all duration-150 ease-in-out peer-disabled:opacity-70 peer-aria-invalid:bg-error peer-aria-invalid:text-neutral peer-enabled:peer-aria-invalid:peer-hover:bg-error-hover peer-enabled:peer-aria-invalid:peer-focus:bg-error-hover',
-          {
-            'bg-neutral-faint text-neutral-primary': inputStatus === 'info',
-            'bg-orange-default text-neutral-primary peer-focus:bg-orange-dark peer-enabled:peer-hover:bg-orange-dark':
-              inputStatus === 'warning',
-          },
-        )
-      "
-    >
-      <slot name="extra" />
-    </div>
-
-    <slot name="buttons" />
-  </div>
-</template>
-
-<script setup lang="ts" generic="ModelValue extends string | number">
-import { computed, ref, useId } from "vue";
-
-import { cn } from "../../utils/cn.ts";
-import UiLabel from "../UiLabel/UiLabel.vue";
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-defineSlots<{
-  /**
-   * Label content.
-   */
-  default?: () => any;
-  /**
-   * Extra content.
-   */
-  extra?: () => any;
-  buttons?: () => any;
-}>();
-
-const {
-  id = undefined,
-  type = "text",
-  label = undefined,
-  isTextarea = false,
-  inputStatus = undefined,
-} = defineProps<{
-  id?: string;
-  type?:
-    | "date"
-    | "datetime-local"
-    | "email"
-    | "number"
-    | "password"
-    | "search"
-    | "tel"
-    | "text"
-    | "time"
-    | "url"
-    // Allows arbitrary strings while still offering autocompletion on the explicitly listed strings.
-    | (string & {});
-  label?: string;
-  isTextarea?: boolean;
-  inputStatus?: "info" | "warning" | "error";
-}>();
-
-const model = defineModel<ModelValue>();
-
-const hasInput = computed(
-  () => model.value !== undefined && model.value !== "",
-);
-const isFocused = ref(false);
-
-const defaultId = useId();
-const uniqueId = computed(() => id ?? `id-${defaultId}`);
-
-const componentClass = computed(() =>
-  cn(
-    "peer block w-full rounded-sm border border-neutral-faint p-4 text-sm text-neutral-primary outline-hidden transition duration-150 placeholder:text-neutral-soft read-only:border-neutral-faint focus:border-2 focus:border-primary focus:p-inputFocused not-read-only:enabled:cursor-pointer enabled:hover:border-neutral-subtle enabled:hover:focus:border-primary disabled:bg-neutral-whisper disabled:opacity-70 aria-invalid:rounded-b-none aria-invalid:border-2 aria-invalid:border-error aria-invalid:focus:border-error-hover aria-invalid:enabled:hover:border-error-hover",
-    {
-      "rounded-b-none focus:border-neutral-subtle enabled:hover:border-neutral-subtle":
-        inputStatus === "info",
-      "rounded-b-none border-2 border-orange-default focus:border-orange-dark enabled:hover:border-orange-dark":
-        inputStatus === "warning",
-    },
-  ),
-);
-</script>

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

@@ -1,24 +0,0 @@
-# UiLabel
-
-Wraps the native `label` element. Currently only used to provide some default styles for labels.
-
-## Usage
-
-**Associate with input via `id` attribute**:
-
-```vue
-<UiLabel for="name-input">
-  Name
-</UiLabel>
-
-<UiInput id="name-input" name="name" required />
-```
-
-**Associate with input by wrapping**:
-
-```vue
-<UiLabel>
-  Name
-  <UiInput name="name" required />
-</UiLabel>
-```

package/dist/src/components/UiLabel/UiLabel.vue

@@ -1,16 +0,0 @@
-<template>
-  <label :class="cn('max-w-max items-center text-sm', $attrs.class)">
-    <slot />
-  </label>
-</template>
-
-<script setup lang="ts">
-import { cn } from "../../utils/cn.ts";
-
-defineSlots<{
-  /**
-   * Label content.
-   */
-  default: () => any;
-}>();
-</script>

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

@@ -1,46 +0,0 @@
-# @dpa-shared-components/UiListItem
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiListItem -->
-<template>
-    <UiListItem iconName="alert">
-        ListItem
-    </UiListItem>
-</template>
-
-<script setup lang="ts">
-    import {UiListItem} from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-| Name              | Type                        | Default    | Description                                                         |
-|-------------------|-----------------------------|------------|---------------------------------------------------------------------|
-| `value`           | `string`                    | `""`       | Sets the value which gets emitted with the click event              |
-| `checkBoxMenu`    | `Boolean`                   | `false`    | Displays checkbox on the beginning of list item                     |
-| `isChecked`       | `Boolean`                   | `false`    | Checked attribute of checkbox, if displayed                         |
-| `selectable`      | `Boolean`                   | `false`    | Makes the list item selectable                                      |
-| `selected`        | `Boolean`                   | `false`    | Displays checkmark at the end of the list item                      |
-| `overrideClasses` | `String`                    | `false`    | Adds classes to the inner of the list item                          |
-| `iconName`        | `UiIconName`                |            | Icon to be displayed at the beginning of the list item              |
-| `iconSize`        | `sm` `md` `lg`              |            | Size of the checkmark icon when selected and selectable is set true |
-| `imageSrc`        | `String`                    | `""`       | Image to be displayed at the beginning of the list item.            |
-| `imageShape`      | `"rounded" &#124; "square"` | `"square"` | Shape pf the image to be displayed.                                 |
-| `checkboxColor`   | `"blue" &#124; "gray"`      | `"blue"`   | Checkbox color style.                                               |
-
-### Events
-
-| Name              | Type     | Description                           |
-|-------------------|----------|---------------------------------------|
-| `list-item-click` | `string` | Emitted when the list item is clicked |
-
-### Slots
-
-| Name      | Description                                     |
-|-----------|-------------------------------------------------|
-| `default` | slot for the rendering the list items's content |