@dpa-id-components/dpa-shared-components 22.0.0-next.9 → 22.0.1

package/dist/src/components/UiMenu/UiMenuItem.vue

@@ -1,71 +0,0 @@
-<template>
-  <UiListItem
-    :selectable="listVariant === 'selectable'"
-    :check-box-menu="listVariant === 'checkbox'"
-    :icon-size="iconSize"
-    :image-shape="imageShape"
-    :checkbox-size="checkboxSize"
-    :checkbox-appearance="checkboxAppearance"
-    :class="cn('hover:bg-neutral-whisper focus:bg-neutral-faint', $props.class)"
-    v-bind="{
-      ...(props.option
-        ? {
-            selected: props.option.selected,
-            isChecked: props.option.selected,
-            imageSrc: props.option.imageSrc,
-          }
-        : {}),
-    }"
-  >
-    <slot :option="option" />
-  </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, onMounted } from "vue";
-
-import { cn } from "../../utils/cn.ts";
-import UiListItem from "../UiListItem/UiListItem.vue";
-
-import type { UiMenuOptionType } from "./UiMenu.vue";
-
-const props = withDefaults(
-  defineProps<{
-    class?: HTMLAttributes["class"];
-    option?: UiMenuOptionType<Value>;
-    listVariant?: "checkbox" | "selectable" | "blank";
-    iconSize?: "sm" | "md" | "lg";
-    imageShape?: "rounded" | "square";
-    checkboxSize?: "sm" | "md";
-    checkboxAppearance?: "primary" | "secondary";
-  }>(),
-  {
-    class: undefined,
-    option: undefined,
-    checkboxAppearance: "primary",
-    checkboxSize: "md",
-    iconSize: "sm",
-    imageShape: "square",
-    listVariant: "blank",
-  },
-);
-</script>

package/dist/src/components/UiMenu/UiMenuList.vue

@@ -1,40 +0,0 @@
-<template>
-  <ul :class="cn('max-h-80 overflow-y-auto', $props.class)" tabindex="0">
-    <slot />
-  </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(
-  defineProps<{
-    class?: string;
-  }>(),
-  {
-    class: undefined,
-  },
-);
-</script>

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

@@ -1,38 +0,0 @@
-# @deprecated
-Component will be removed in a future update
-# @dpa-shared-components/UiOverlay
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiOverlay -->
-<template>
-    <UiOverlay>
-        <div class='grid place-items-center'>
-            <span class='text-neutral'>Here is a Overlay</span>
-        </div>
-    </UiOverlay>
-</template>
-
-<script setup lang="ts">
-    import {UiOverlay} from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-This component has no properties
-
-### Events
-
-| Name    | Type         | Description                        |
-|---------|--------------|------------------------------------|
-| `close` | none | Emitted when the Overlay is closed |
-
-### Slots
-
-| Name      | Description                                  |
-|-----------|----------------------------------------------|
-| `default` | slot for the rendering the overlay's content |

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

@@ -1,16 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiOverlay from "./UiOverlay.vue";
-
-describe("UiOverlay", () => {
-  const wrapper = mount(UiOverlay, {});
-
-  test("emits correct event when clicked", async () => {
-    const bg = wrapper.find('[data-testid="background"]');
-
-    await bg.trigger("click");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted().close).toBeTruthy();
-  });
-});

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

@@ -1,22 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiOverlay from "./UiOverlay.vue";
-
-const meta = {
-  title: "Ui/UiOverlay",
-  component: UiOverlay,
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiOverlay },
-    template:
-      "<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>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/dist/src/components/UiOverlay/UiOverlay.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="fixed inset-0 z-50 max-h-screen" role="dialog">
-    <div
-      class="fixed inset-0 h-screen bg-black opacity-60"
-      data-testid="background"
-      style="z-index: -1"
-      @click="emit('close')"
-    />
-    <slot />
-  </div>
-</template>
-<script lang="ts">
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiOverlay",
-};
-</script>
-<script setup lang="ts">
-import { onMounted } from "vue";
-
-const emit = defineEmits<{
-  close: [];
-}>();
-
-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>

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

@@ -1,40 +0,0 @@
-# @deprecated
-Component will be removed in a future update
-# @dpa-shared-components/UiOverlayMenu
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiOverlay -->
-<template>
-    <UiOverlayMenu :is-open="true">
-        <div class='grid place-items-center'>
-            <span class='text-neutral'>Here is Content</span>
-        </div>
-    </UiOverlayMenu>
-</template>
-
-<script setup lang="ts">
-    import {UiOverlay} from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-| Name     | Type      | Default | Description                                |
-|----------|-----------|---------|--------------------------------------------|
-| `isOpen` | `boolean` | `false` | controls if Overlay Menu is open or closed |
-
-### Events
-
-| Name    | Type         | Description                                       |
-|---------|--------------|---------------------------------------------------|
-| `close` | none | Emitted when the clicked outside the Overlay Menu |
-
-### Slots
-
-| Name      | Description                                       |
-|-----------|---------------------------------------------------|
-| `default` | slot for the rendering the overlay menu's content |

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

@@ -1,33 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import { vClickAway } from "../../directives/vClickAway.ts";
-import UiButton from "../UiButton/UiButton.vue";
-
-import UiOverlayMenu from "./UiOverlayMenu.vue";
-
-document.body.innerHTML = `
-    <div id="app"></div>
-`;
-describe("UiOverlayMenu", () => {
-  const overlayWrapper = mount(UiOverlayMenu, {
-    attachTo: document.getElementById("app") || "#app",
-    props: {
-      isOpen: true,
-    },
-    global: {
-      directives: {
-        clickAway: vClickAway,
-      },
-    },
-  });
-
-  const buttonWrapper = mount(UiButton, {
-    attachTo: document.getElementById("app") || "#app",
-  });
-
-  test("emits correct event when clicked outside of slot content", async () => {
-    await buttonWrapper.trigger("mousedown");
-    expect(overlayWrapper.emitted().close).toBeTruthy();
-  });
-});

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

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiList from "../UiList/UiList.vue";
-import UiListItem from "../UiListItem/UiListItem.vue";
-
-import UiOverlayMenu from "./UiOverlayMenu.vue";
-
-const meta = {
-  title: "Ui/UiOverlayMenu",
-  component: UiOverlayMenu,
-  subcomponents: { UiList, UiListItem },
-  argTypes: {
-    isOpen: {
-      control: "boolean",
-    },
-  },
-  args: {
-    isOpen: true,
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiOverlayMenu, UiList, UiListItem },
-    template:
-      "<UiOverlayMenu v-bind='args'>" +
-      "<UiList>" +
-      "<UiListItem checkBoxMenu='true'>Test</UiListItem>" +
-      "<UiListItem checkBoxMenu='true'>Test</UiListItem>" +
-      "<UiListItem checkBoxMenu='true'>Test</UiListItem>" +
-      "</UiList>" +
-      "</UiOverlayMenu>",
-  }),
-  tags: ["deprecated"],
-} satisfies Meta<typeof UiOverlayMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/dist/src/components/UiOverlayMenu/UiOverlayMenu.vue

@@ -1,51 +0,0 @@
-<template>
-  <div
-    v-show="isOpen"
-    v-click-away="close"
-    class="relative size-full border-none"
-  >
-    <div
-      class="absolute top-12 right-3 z-10 block border-t bg-neutral px-4 py-3 shadow-lg"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-<script lang="ts">
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiOverlayMenu",
-};
-</script>
-<script setup lang="ts">
-import { onMounted } from "vue";
-
-import { vClickAway } from "../../directives/vClickAway.ts";
-
-withDefaults(
-  defineProps<{
-    isOpen?: boolean;
-  }>(),
-  {
-    isOpen: false,
-  },
-);
-const emit = defineEmits<{
-  close: [];
-}>();
-const close = (): void => {
-  emit("close");
-};
-
-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>

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

@@ -1,51 +0,0 @@
-# @deprecated
-Component will be removed in a future update
-# @dpa-id-components/UiRadioInputGroup
-
-## Usage
-
-```html
-<template>
-  <UiRadioInput
-    :options="options"
-    group-name="someName"
-    v-model="selectedOption"
-  />
-</template>
-
-<script lang="ts" setup>
-  import { UiRadioInputGroup } from "@dpa-id-components/dpa-shared-components";
-
-  const selectedOption = ref("first option");
-  const options = computed(() => {
-    return [
-      {
-        value: "first option",
-        label: "First option",
-        selected: selectedOption.value === "first option",
-      },
-      {
-        value: "second option",
-        label: "Second option",
-        selected: selectedOption.value === "second option",
-      },
-    ];
-  });
-</script>
-```
-
-### Props
-
-| Name         | Type                   | Default  | Description                                                      |
-| ------------ | ---------------------- | -------- | ---------------------------------------------------------------- |
-| `options`    | `Array`                | --       | Array with RadioMenu specific content                            |
-| `groupName`  | `String`               | --       | common name for Radio Input Group                                |
-| `size`       | `String`               | `medium` | Sets the `size` attribute of the Radio Inputs                    |
-| `color`      | `"blue" &#124; "gray"` | `blue`   | Sets the `color` and `background` attributes of the Radio Inputs |
-| `disabled`   | `Boolean`              | `false`  | Whether the `Radio Input Group` is disabled                      |
-| `labelClass` | `string`               | ``       | Custom class for the Radio Label                                 |
-| `class`      | `string`               | ``       | Custom class for Wrapper                                         |
-
-### Events
-
-The component uses `v-model` to determine the current selected option, therefor it emits the `update:modelValue` event but it doesn't need to be specified as you should use v-model when used as you can see in the example

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

@@ -1,66 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiRadioInputGroup from "./UiRadioInputGroup.vue";
-
-describe("UiRadioInputGroup", () => {
-  test("renders UiRadioInputGroup with props content", () => {
-    const wrapper = mount(UiRadioInputGroup, {
-      props: {
-        options: [
-          {
-            label: "default name",
-            selected: false,
-            value: "default value",
-          },
-        ],
-        groupName: "Options",
-      },
-    });
-    expect(wrapper.text()).toBe("default name");
-  });
-
-  test("should click change value", async () => {
-    const wrapper = mount(UiRadioInputGroup, {
-      props: {
-        modelValue: "default value",
-        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
-        options: [
-          {
-            label: "default name",
-            selected: true,
-            value: "default value",
-          },
-          {
-            label: "second option",
-            selected: false,
-            value: "second option",
-          },
-        ],
-        groupName: "Options",
-      },
-    });
-
-    await wrapper.find("input[value='second option']").setValue(true);
-    expect(wrapper.props("modelValue")).toBe("second option");
-  });
-
-  test("renders attributes on correct element", () => {
-    const wrapper = mount(UiRadioInputGroup, {
-      props: {
-        options: [],
-        groupName: "",
-        id: "id",
-        class: "testClass gap-8",
-        "data-testid": "testId",
-      },
-    });
-
-    const root = wrapper.find(":first-child");
-    expect(root.attributes("id")).toBe("id");
-    expect(root.element.classList.contains("testClass")).toBe(true);
-    expect(root.element.classList.contains("gap-4")).toBe(false);
-    expect(root.element.classList.contains("gap-8")).toBe(true);
-    expect(root.attributes("data-testid")).toBe("testId");
-  });
-});

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

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiRadioInputGroup from "./UiRadioInputGroup.vue";
-
-const meta = {
-  title: "forms/UiRadioButtonGroup",
-  component: UiRadioInputGroup,
-  args: {
-    options: [
-      {
-        label: "Option A",
-        value: "value 1",
-        selected: true,
-      },
-      {
-        label: "Option B",
-        value: "value 2",
-        selected: false,
-      },
-      {
-        label: "Option C",
-        value: "value 3",
-        selected: false,
-      },
-    ],
-    appearance: "primary",
-    size: "md",
-    direction: "horizontal",
-    disabled: false,
-    groupName: "default",
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiRadioInputGroup },
-    template: /*html*/ `<UiRadioInputGroup v-bind="args" />`,
-  }),
-  tags: ["deprecated"],
-} satisfies Meta<typeof UiRadioInputGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/dist/src/components/UiRadioInputGroup/UiRadioInputGroup.vue

@@ -1,76 +0,0 @@
-<template>
-  <ul
-    :class="[
-      cn(
-        'flex gap-4',
-        {
-          'flex-col': direction === 'vertical',
-        },
-        $attrs.class,
-      ),
-    ]"
-  >
-    <li v-for="option in options" :key="option.value">
-      <UiRadioButton
-        v-model="model"
-        :appearance
-        :disabled
-        :size
-        :name="groupName"
-        :value="option.value"
-      >
-        {{ option.label }}
-      </UiRadioButton>
-    </li>
-  </ul>
-</template>
-
-<script lang="ts">
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiRadioInputGroup",
-};
-</script>
-
-<script setup lang="ts">
-import { onMounted } from "vue";
-
-import { cn } from "../../utils/cn.ts";
-import UiRadioButton from "../UiRadioButton/UiRadioButton.vue";
-
-export interface UiRadioInputGroupOption {
-  value: string;
-  label: string;
-  /** @deprecated has no effect */
-  selected?: boolean;
-}
-
-const {
-  options,
-  direction = "horizontal",
-  appearance = "primary",
-  size = "md",
-  disabled = false,
-} = defineProps<{
-  options: UiRadioInputGroupOption[];
-  groupName: string;
-  disabled?: boolean;
-  direction?: "horizontal" | "vertical";
-  appearance?: "primary" | "secondary";
-  size?: "sm" | "md";
-}>();
-
-const model = defineModel<string>();
-
-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>

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

@@ -1,33 +0,0 @@
-# @deprecated
-Component will be removed in a future update
-# @dpa-shared-components/UiSection
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiSection -->
-<template>
-    <UiSection size="small" vertical-padding="small" border-top border-bottom>Section Content</UiSection>
-</template>
-
-<script>
-    import {UiSection} from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-| Name              | Type                                   | Default   | Description                                   |
-|-------------------|----------------------------------------|-----------|-----------------------------------------------|
-| `size`            | `"wide" &#124; "small"`                | `"wide"`  | Determines the spread of the section content. |
-| `verticalPadding` | `"small" &#124; "large" &#124; "none"` | `"large"` | Determines the padding of the section.        |
-| `borderTop`       | `Boolean`                              | `false`   | Displays a top border on the section.         |
-| `BorderBottom`    | `Boolean`                              | `false`   | Displays a bottom border on the section.      |
-
-### Slots
-
-| Name      | Description                                  |
-|-----------|----------------------------------------------|
-| `default` | slot for the rendering the section's content |