@dpa-id-components/dpa-shared-components 20.0.4 → 20.0.6

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

@@ -1,634 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
-import { computed, ref } from "vue";
-
-import { icons } from "../UiIcon/icons.js";
-import UiMenu, {
-  type UiMenuGroupedOption,
-  type UiMenuOptionType,
-  type UiMenuSelectedOption,
-} from "./UiMenu.vue";
-
-const meta = {
-  title: "Ui/UiMenu",
-  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
-  component: UiMenu,
-  argTypes: {
-    defaultTitle: {
-      control: "text",
-    },
-    multiLabel: {
-      control: "text",
-    },
-    buttonVariant: {
-      control: "select",
-      options: [
-        "blue-rounded",
-        "white-rounded",
-        "blank",
-        "transparent-rounded",
-      ],
-    },
-    listVariant: {
-      control: "select",
-      options: ["checkbox", "selectable", "blank"],
-    },
-    listWidth: {
-      control: "select",
-      options: ["full", "max"],
-    },
-    checkboxColor: {
-      control: "select",
-      options: ["blue", "gray"],
-    },
-    filterButtonSize: {
-      control: "select",
-      options: ["xs", "small"],
-    },
-    iconSize: {
-      control: "select",
-      options: ["small", "medium", "large"],
-    },
-    iconLeft: {
-      control: "select",
-      options: Object.keys(icons),
-    },
-    imageShape: {
-      control: "select",
-      options: ["rounded", "square"],
-    },
-    checkboxSize: {
-      control: "select",
-      options: ["small", "medium"],
-    },
-    isOpen: { control: false },
-    disabled: { control: "boolean" },
-    active: { control: "boolean" },
-    hasResetOption: { control: "boolean" },
-    disabledReset: { control: false },
-    resetLabel: { control: "text" },
-    searchPlaceholder: { control: "text" },
-    hasSearch: { control: "boolean" },
-    options: { control: false },
-    noTitle: { control: "boolean" },
-    floatingUiPlacement: {
-      control: "select",
-      options: [
-        "bottom",
-        "bottom-start",
-        "bottom-end",
-        "left",
-        "left-start",
-        "left-end",
-        "top-start",
-        "top",
-        "top-end",
-        "right-start",
-        "right",
-        "right-end",
-      ],
-    },
-  },
-  args: {
-    defaultTitle: "Default Title",
-    multiLabel: "selected Options",
-    buttonVariant: "white-rounded",
-    listVariant: "blank",
-    checkboxColor: "blue",
-    iconSize: "small",
-    iconLeft: null,
-    imageShape: "square",
-    checkboxSize: "medium",
-    disabled: false,
-    active: false,
-    hasResetOption: false,
-    resetLabel: "Zurücksetzen",
-    searchPlaceholder: "Suchen",
-    hasSearch: false,
-    noTitle: false,
-    floatingUiPlacement: "bottom-start",
-  },
-} satisfies Meta<typeof UiMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const renderDefault: Story["render"] = (args) => ({
-  setup() {
-    const options = ref<UiMenuOptionType<string>[]>([
-      {
-        label: "Option 1",
-        value: "value 1",
-        selected: true,
-      },
-      {
-        label: "Option 2",
-        value: "value 2",
-        selected: false,
-      },
-      {
-        label: "Option 3",
-        value: "value 3",
-        selected: false,
-      },
-      {
-        label: "Option 4",
-        value: "value 4",
-        selected: false,
-      },
-    ]);
-    const filteredOptions = ref([...options.value]);
-    const isOpen = ref(true);
-    const resetIsDisabled = computed(() => {
-      return options.value.every((option) => !option.selected);
-    });
-    const onClose = () => (isOpen.value = false);
-    const onOpen = () => (isOpen.value = true);
-    const onSelect = (e: UiMenuSelectedOption<string>) => {
-      filteredOptions.value[e.index].selected =
-        !filteredOptions.value[e.index].selected;
-    };
-    const onInput = (e: string) => {
-      filteredOptions.value = options.value.filter((option) =>
-        option.label.toLowerCase().includes(e.toLowerCase()),
-      );
-    };
-    const onReset = () => {
-      options.value.forEach((option) => {
-        option.selected = false;
-      });
-    };
-    return {
-      args,
-      isOpen,
-      resetIsDisabled,
-      onClose,
-      onOpen,
-      onSelect,
-      onInput,
-      onReset,
-      filteredOptions,
-      options,
-    };
-  },
-  components: { UiMenu },
-  template: `
-    <UiMenu
-      v-bind="args"
-      :options="filteredOptions"
-      :is-open="isOpen"
-      :disabled-reset="resetIsDisabled"
-      @option-selected="(e)=> { onSelect(e); optionSelected(e); }"
-      @open="() => { onOpen(); open(); }"
-      @close="() => { onClose(); close(); }"
-      @input="(e) => { onInput(e); input(e); }"
-      @reset="() => { onReset(); reset(); }"
-    />
-  `,
-  methods: {
-    open: action("open"),
-    close: action("close"),
-    optionSelected: action("option-selected"),
-    input: action("input"),
-    reset: action("reset"),
-  },
-});
-
-export const Default: Story = {
-  render: renderDefault,
-};
-
-export const WithResetAndSearch: Story = {
-  render: renderDefault,
-  args: {
-    hasResetOption: true,
-    hasSearch: true,
-    resetLabel: "Zurücksetzen",
-    searchPlaceholder: "Suchen",
-    buttonVariant: "transparent-rounded",
-    listVariant: "checkbox",
-    checkboxSize: "small",
-    defaultTitle: "Optionen",
-    hasAutoFocus: true,
-  },
-};
-
-export const WithGroupedOptions: Story = {
-  args: {
-    hasResetOption: true,
-    hasSearch: true,
-    resetLabel: "Zurücksetzen",
-    searchPlaceholder: "Suchen",
-    buttonVariant: "transparent-rounded",
-    listVariant: "checkbox",
-    checkboxSize: "small",
-    defaultTitle: "Optionen",
-    hasAutoFocus: true,
-  },
-  render: (args) => ({
-    setup() {
-      const groupedOptions = ref<UiMenuGroupedOption<string>[]>([
-        {
-          options: [
-            {
-              label: "Four Tet",
-              value: "four-tet",
-              selected: true,
-            },
-            {
-              label: "Floating Points",
-              value: "floating-points",
-              selected: false,
-            },
-            {
-              label: "Burial",
-              value: "burial",
-              selected: false,
-            },
-            {
-              label: "Daphni",
-              value: "daphni",
-              selected: false,
-            },
-          ],
-        },
-        {
-          groupLabel: "Aliases",
-          options: [
-            {
-              label: "KH",
-              value: "alias-1",
-              selected: true,
-            },
-            {
-              label: "△▃△▓",
-              value: "alias-2",
-              selected: false,
-            },
-            {
-              label: "⣎⡇ꉺლ༽இ•̛)ྀ◞ ༎ຶ ༽ৣৢ؞ৢ؞ؖ ꉺლ",
-              value: "alias-3",
-              selected: false,
-            },
-            {
-              label: "00110100 01010100",
-              value: "alias-4",
-              selected: false,
-            },
-            {
-              label: "4T Recordings",
-              value: "alias-5",
-              selected: false,
-            },
-            {
-              label: "4TLRPercussions",
-              value: "alias-6",
-              selected: false,
-            },
-            {
-              label: "00000ooooo",
-              value: "alias-7",
-              selected: false,
-            },
-            {
-              label: "Joshua Falken",
-              value: "alias-8",
-              selected: false,
-            },
-          ],
-        },
-      ]);
-      const filteredOptions = ref([...groupedOptions.value]);
-      const isOpen = ref(true);
-      const resetIsDisabled = computed(() => {
-        return groupedOptions.value
-          .map(({ options }) => options)
-          .flat()
-          .every((option) => !option.selected);
-      });
-      const onClose = () => (isOpen.value = false);
-      const onOpen = () => (isOpen.value = true);
-      const onSelect = (e: UiMenuSelectedOption<string>) => {
-        filteredOptions.value.forEach(({ options }, groupIndex) => {
-          options.forEach(({ value }, optionsIndex) => {
-            if (value === e.value) {
-              filteredOptions.value[groupIndex].options[optionsIndex].selected =
-                !filteredOptions.value?.[groupIndex].options?.[optionsIndex]
-                  .selected;
-            }
-          });
-        });
-      };
-      const onInput = (e: string) => {
-        filteredOptions.value = groupedOptions.value.map(
-          ({ groupLabel, options }) => ({
-            groupLabel,
-            options: options.filter((option) =>
-              option.label.toLowerCase().includes(e.toLowerCase()),
-            ),
-          }),
-        );
-      };
-      const onReset = () => {
-        groupedOptions.value.forEach((group) => {
-          group.options.forEach((option) => {
-            option.selected = false;
-          });
-        });
-      };
-
-      return {
-        args,
-        groupedOptions,
-        filteredOptions,
-        resetIsDisabled,
-        isOpen,
-        onClose,
-        onOpen,
-        onSelect,
-        onInput,
-        onReset,
-      };
-    },
-    components: { UiMenu },
-    template: `
-      <UiMenu
-        v-bind="args"
-        :grouped-options="filteredOptions"
-        :is-open="isOpen"
-        has-search
-        :disabled-reset="resetIsDisabled"
-        @option-selected="(e)=> { onSelect(e); optionSelected(e); }"
-        @open="() => { onOpen(); open(); }"
-        @close="() => { onClose(); close(); }"
-        @input="(e) => { onInput(e); input(e); }"
-        @reset="() => { onReset(); reset(); }"
-      />
-    `,
-    methods: {
-      open: action("open"),
-      close: action("close"),
-      optionSelected: action("option-selected"),
-      input: action("input"),
-      reset: action("reset"),
-    },
-  }),
-};
-
-const renderWithImage: Story["render"] = (args) => ({
-  setup() {
-    const options = ref<UiMenuOptionType<string>[]>([
-      {
-        label: "T-Online",
-        value: "t-online",
-        selected: true,
-        imageSrc:
-          "https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.t-online.de&size=24",
-      },
-      {
-        label: "Spiegel",
-        value: "spiegel",
-        selected: false,
-        imageSrc:
-          "https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.spiegel.de&size=24",
-      },
-    ]);
-    const filteredOptions = ref([...options.value]);
-    const isOpen = ref(true);
-    const resetIsDisabled = computed(() => {
-      return options.value.every((option) => !option.selected);
-    });
-    const onClose = () => (isOpen.value = false);
-    const onOpen = () => (isOpen.value = true);
-    const onSelect = (e: UiMenuSelectedOption<string>) => {
-      filteredOptions.value[e.index].selected =
-        !filteredOptions.value[e.index].selected;
-    };
-    const onInput = (e: string) => {
-      filteredOptions.value = options.value.filter((option) =>
-        option.label.toLowerCase().includes(e.toLowerCase()),
-      );
-    };
-    const onReset = () => {
-      options.value.forEach((option) => {
-        option.selected = false;
-      });
-    };
-    return {
-      args,
-      isOpen,
-      resetIsDisabled,
-      onClose,
-      onOpen,
-      onSelect,
-      onInput,
-      onReset,
-      filteredOptions,
-      options,
-    };
-  },
-  components: { UiMenu },
-  template: `
-    <UiMenu
-      v-bind="args"
-      :options="filteredOptions"
-      :is-open="isOpen"
-      :disabled-reset="resetIsDisabled"
-      @option-selected="(e)=> { onSelect(e); optionSelected(e); }"
-      @open="() => { onOpen(); open(); }"
-      @close="() => { onClose(); close(); }"
-      @input="(e) => { onInput(e); input(e); }"
-      @reset="() => { onReset(); reset(); }"
-    />
-  `,
-  methods: {
-    open: action("open"),
-    close: action("close"),
-    optionSelected: action("option-selected"),
-    input: action("input"),
-    reset: action("reset"),
-  },
-});
-
-export const WithImages: Story = {
-  render: renderWithImage,
-  args: {
-    listVariant: "checkbox",
-    checkboxSize: "small",
-  },
-};
-
-const renderWithIcons: Story["render"] = (args) => ({
-  setup() {
-    const options = ref<UiMenuOptionType<string>[]>([
-      {
-        label: "Update me",
-        value: "updateme",
-        selected: true,
-        iconName: "user-need-update-me",
-      },
-      {
-        label: "Help me",
-        value: "helpme",
-        selected: true,
-        iconName: "user-need-help-me",
-      },
-    ]);
-    const filteredOptions = ref([...options.value]);
-    const isOpen = ref(true);
-    const resetIsDisabled = computed(() => {
-      return options.value.every((option) => !option.selected);
-    });
-    const onClose = () => (isOpen.value = false);
-    const onOpen = () => (isOpen.value = true);
-    const onSelect = (e: UiMenuSelectedOption<string>) => {
-      filteredOptions.value[e.index].selected =
-        !filteredOptions.value[e.index].selected;
-    };
-    const onInput = (e: string) => {
-      filteredOptions.value = options.value.filter((option) =>
-        option.label.toLowerCase().includes(e.toLowerCase()),
-      );
-    };
-    const onReset = () => {
-      options.value.forEach((option) => {
-        option.selected = false;
-      });
-    };
-    return {
-      args,
-      isOpen,
-      resetIsDisabled,
-      onClose,
-      onOpen,
-      onSelect,
-      onInput,
-      onReset,
-      filteredOptions,
-      options,
-    };
-  },
-  components: { UiMenu },
-  template: `
-    <UiMenu
-      v-bind="args"
-      :options="filteredOptions"
-      :is-open="isOpen"
-      :disabled-reset="resetIsDisabled"
-      :button-variant="filteredOptions.find(option => option.selected) ? 'blue-rounded' : 'white-rounded'"
-      @option-selected="(e)=> { onSelect(e); optionSelected(e); }"
-      @open="() => { onOpen(); open(); }"
-      @close="() => { onClose(); close(); }"
-      @input="(e) => { onInput(e); input(e); }"
-      @reset="() => { onReset(); reset(); }"
-    />
-  `,
-  methods: {
-    open: action("open"),
-    close: action("close"),
-    optionSelected: action("option-selected"),
-    input: action("input"),
-    reset: action("reset"),
-  },
-});
-
-export const WithIcons: Story = {
-  render: renderWithIcons,
-  args: {
-    listVariant: "checkbox",
-    checkboxSize: "small",
-  },
-};
-
-const renderDefaultAnimated: Story["render"] = (args) => ({
-  setup() {
-    const options = ref<UiMenuOptionType<string>[]>([
-      {
-        label: "Option 1",
-        value: "value 1",
-        selected: true,
-      },
-      {
-        label: "Option 2",
-        value: "value 2",
-        selected: false,
-      },
-      {
-        label: "Option 3",
-        value: "value 3",
-        selected: false,
-      },
-      {
-        label: "Option 4",
-        value: "value 4",
-        selected: false,
-      },
-    ]);
-    const filteredOptions = ref([...options.value]);
-    const isOpen = ref(true);
-    const resetIsDisabled = computed(() => {
-      return options.value.every((option) => !option.selected);
-    });
-    const onClose = () => (isOpen.value = false);
-    const onOpen = () => (isOpen.value = true);
-    const onSelect = (e: UiMenuSelectedOption<string>) => {
-      filteredOptions.value[e.index].selected =
-        !filteredOptions.value[e.index].selected;
-    };
-    const onInput = (e: string) => {
-      filteredOptions.value = options.value.filter((option) =>
-        option.label.toLowerCase().includes(e.toLowerCase()),
-      );
-    };
-    const onReset = () => {
-      options.value.forEach((option) => {
-        option.selected = false;
-      });
-    };
-    return {
-      args,
-      isOpen,
-      resetIsDisabled,
-      onClose,
-      onOpen,
-      onSelect,
-      onInput,
-      onReset,
-      filteredOptions,
-      options,
-    };
-  },
-  components: { UiMenu },
-  template: `
-    <UiMenu
-      v-bind="args"
-      :options="filteredOptions"
-      :is-open="isOpen"
-      :animate="true"
-      :disabled-reset="resetIsDisabled"
-      @option-selected="(e)=> { onSelect(e); optionSelected(e); }"
-      @open="() => { onOpen(); open(); }"
-      @close="() => { onClose(); close(); }"
-      @input="(e) => { onInput(e); input(e); }"
-      @reset="() => { onReset(); reset(); }"
-    />
-  `,
-  methods: {
-    open: action("open"),
-    close: action("close"),
-    optionSelected: action("option-selected"),
-    input: action("input"),
-    reset: action("reset"),
-  },
-});
-
-export const DefaultAnimated: Story = {
-  render: renderDefaultAnimated,
-  parameters: {
-    docs: {
-      canvas: {
-        className: "h-full p-400",
-      },
-    },
-  },
-};

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

@@ -1,16 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiOverlay from "./UiOverlay.vue";
-
-describe("UiOverlay", () => {
-  const wrapper = mount(UiOverlay, {});
-
-  it("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-white'>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/UiOverlayMenu/UiOverlayMenu.spec.ts

@@ -1,32 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import { vClickAway } from "../../directives/vClickAway.js";
-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",
-  });
-
-  it("emits correct event when clicked outside of slot content", async () => {
-    await buttonWrapper.trigger("mousedown");
-    expect(overlayWrapper.emitted().close).toBeTruthy();
-  });
-});