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

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

@@ -1,410 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
-import { ref } from "vue";
-
-import { icons } from "../UiIcon/icons.ts";
-
-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: {
-    options: { control: false },
-    groupedOptions: { control: false },
-    iconLeft: {
-      control: "select",
-      options: Object.keys(icons),
-    },
-  },
-  args: {
-    isOpen: false,
-    floatingUiPlacement: "bottom-start",
-    animate: true,
-
-    // Button slot
-    disabled: false,
-    active: false,
-    iconLeft: undefined,
-    buttonAppearance: "outline-subtle",
-    filterButtonSize: undefined,
-    defaultTitle: "Default Title",
-    multiLabel: "selected options",
-    noTitle: false,
-
-    // Search
-    hasSearch: false,
-    query: "",
-    searchPlaceholder: "Suchen",
-    hasAutoFocus: true,
-    hasResetOption: false,
-    resetLabel: "Zurücksetzen",
-
-    // Menu
-    iconSize: "sm",
-    imageShape: "square",
-    checkboxAppearance: "primary",
-    listVariant: "blank",
-  },
-} satisfies Meta<typeof UiMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    buttonAppearance: "fill-emphasis",
-  },
-  render: (args) => ({
-    setup() {
-      const options = ref<UiMenuOptionType<string>[]>([
-        {
-          label: "Option 1",
-          value: "value 1",
-          selected: true,
-          iconName: "info",
-        },
-        {
-          label: "Option 2 is really long, much longer than the rest",
-          value: "value 2",
-          selected: false,
-          iconName: "alert",
-          hasDividerAbove: true,
-        },
-        {
-          label: "Option 3",
-          value: "value 3",
-          selected: false,
-          iconName: "bulb",
-        },
-        {
-          label: "Option 4",
-          value: "value 4",
-          selected: false,
-          iconName: "language",
-        },
-      ]);
-      const filteredOptions = ref(Array.from(options.value));
-
-      const onSelect = (selectedOption: UiMenuSelectedOption<string>) => {
-        for (const option of filteredOptions.value) {
-          option.selected =
-            option.value === selectedOption.value ? true : false;
-        }
-      };
-
-      const onUpdateQuery = (value: string) => {
-        filteredOptions.value = options.value.filter((option) =>
-          option.label.toLowerCase().includes(value.toLowerCase()),
-        );
-      };
-
-      return {
-        args,
-        onSelect,
-        onUpdateQuery,
-        filteredOptions,
-        options,
-      };
-    },
-    components: { UiMenu },
-    template: /*html*/ `
-    <aside>
-      <UiMenu
-        v-bind="args"
-        v-model:query="args.query"
-        :options="filteredOptions"
-        @option-selected="(option)=> { onSelect(option); optionSelected(option); }"
-        @update:query="(value) => { onUpdateQuery(value); updateQuery(value); }"
-      />
-    </aside>
-  `,
-    methods: {
-      optionSelected: action("option-selected"),
-      updateQuery: action("update:query"),
-    },
-  }),
-};
-
-export const WidthOverride: Story = {
-  args: {
-    buttonAppearance: "fill-emphasis",
-  },
-  render: (args) => ({
-    setup() {
-      const options = ref<UiMenuOptionType<string>[]>([
-        {
-          label: "Option 1",
-          value: "value 1",
-          selected: true,
-          iconName: "info",
-        },
-        {
-          label: "Option 2 is really long, much longer than the rest",
-          value: "value 2",
-          selected: false,
-          iconName: "alert",
-          hasDividerAbove: true,
-        },
-        {
-          label: "Option 3",
-          value: "value 3",
-          selected: false,
-          iconName: "bulb",
-        },
-        {
-          label: "Option 4",
-          value: "value 4",
-          selected: false,
-          iconName: "language",
-        },
-      ]);
-      const filteredOptions = ref(Array.from(options.value));
-
-      const onSelect = (selectedOption: UiMenuSelectedOption<string>) => {
-        for (const option of filteredOptions.value) {
-          option.selected =
-            option.value === selectedOption.value ? true : false;
-        }
-      };
-
-      const onUpdateQuery = (value: string) => {
-        filteredOptions.value = options.value.filter((option) =>
-          option.label.toLowerCase().includes(value.toLowerCase()),
-        );
-      };
-
-      return {
-        args,
-        onSelect,
-        onUpdateQuery,
-        filteredOptions,
-        options,
-      };
-    },
-    components: { UiMenu },
-    template: /*html*/ `
-    <aside class="w-70 h-200 p-4 bg-neutral-pale space-y-4">
-      <UiMenu
-        class="w-full"
-        v-bind="args"
-        v-model:query="args.query"
-        :options="filteredOptions"
-        @option-selected="(option)=> { onSelect(option); optionSelected(option); }"
-        @update:query="(value) => { onUpdateQuery(value); updateQuery(value); }"
-      />
-      <UiMenu
-        class="w-full"
-        v-bind="args"
-        :disabled="true"
-      />
-    </aside>
-  `,
-    methods: {
-      optionSelected: action("option-selected"),
-      updateQuery: action("update:query"),
-    },
-  }),
-};
-
-export const GroupedOptions: Story = {
-  args: {
-    hasResetOption: true,
-    hasSearch: true,
-    resetLabel: "Zurücksetzen",
-    searchPlaceholder: "Suchen",
-    buttonAppearance: "outline-subtle",
-    listVariant: "checkbox",
-    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(Array.from(groupedOptions.value));
-
-      const onSelect = (selectedOption: UiMenuSelectedOption<string>) => {
-        for (const { options } of filteredOptions.value) {
-          const option = options.find(
-            ({ value }) => value === selectedOption.value,
-          );
-          if (option) {
-            option.selected = !option.selected;
-            break;
-          }
-        }
-      };
-
-      const onUpdateQuery = (value: string) => {
-        filteredOptions.value = groupedOptions.value.map(
-          ({ groupLabel, options }) => ({
-            groupLabel,
-            options: options.filter((option) =>
-              option.label.toLowerCase().includes(value.toLowerCase()),
-            ),
-          }),
-        );
-      };
-
-      return {
-        args,
-        groupedOptions,
-        filteredOptions,
-        onSelect,
-        onUpdateQuery,
-      };
-    },
-    components: { UiMenu },
-    template: /*html*/ `
-      <UiMenu
-        v-bind="args"
-        v-model:query="args.query"
-        :grouped-options="filteredOptions"
-        @option-selected="(option)=> { onSelect(option); optionSelected(option); }"
-        @update:query="(value) => { onUpdateQuery(value); updateQuery(value); }"
-      />
-    `,
-    methods: {
-      optionSelected: action("option-selected"),
-      updateQuery: action("update:query"),
-    },
-  }),
-};
-
-export const WithImages: 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(Array.from(options.value));
-
-      const onSelect = (selectedOption: UiMenuSelectedOption<string>) => {
-        for (const option of filteredOptions.value) {
-          if (option.value === selectedOption.value) {
-            option.selected = !option.selected;
-          }
-        }
-      };
-
-      const onUpdateQuery = (value: string) => {
-        filteredOptions.value = options.value.filter((option) =>
-          option.label.toLowerCase().includes(value.toLowerCase()),
-        );
-      };
-
-      return {
-        args,
-        onSelect,
-        onUpdateQuery,
-        filteredOptions,
-        options,
-      };
-    },
-    components: { UiMenu },
-    template: /*html*/ `
-      <UiMenu
-        v-bind="args"
-        v-model:query="args.query"
-        :options="filteredOptions"
-        @option-selected="(option)=> { onSelect(option); optionSelected(option); }"
-        @update:query="(value) => { onUpdateQuery(value); updateQuery(value); }"
-      />
-    `,
-    methods: {
-      optionSelected: action("option-selected"),
-      updateQuery: action("update:query"),
-    },
-  }),
-  args: {
-    listVariant: "checkbox",
-  },
-};

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

@@ -1,283 +0,0 @@
-<template>
-  <UiPopover
-    :initially-open="isOpen"
-    :animate
-    :placement="floatingUiPlacement"
-    @toggle="$event ? $emit('open') : $emit('close')"
-  >
-    <template #button="{ toggle, isOpen: isPopoverOpen }">
-      <UiButton
-        class="w-full justify-between"
-        :class="{
-          'border-neutral-subtle': isPopoverOpen,
-        }"
-        :appearance="active ? 'fill-emphasis' : buttonAppearance"
-        :disabled
-        :size="filterButtonSize"
-        data-testid="menu-button"
-        @click="toggle"
-      >
-        <div class="flex min-w-0 items-center gap-2 overflow-hidden">
-          <UiIcon v-if="iconLeft" class="shrink-0" :name="iconLeft" size="sm" />
-          <span class="truncate">{{ selectedOptionLabel }}</span>
-        </div>
-        <UiIcon class="shrink-0" name="chevron-down" size="sm" />
-      </UiButton>
-    </template>
-
-    <div
-      class="block w-max max-w-full divide-y overflow-hidden rounded-lg border border-neutral-faint bg-neutral text-base/6 shadow-md focus:outline-hidden sm:text-sm/5"
-    >
-      <div
-        v-if="hasSearch"
-        class="flex items-center gap-2 rounded-t-lg p-2 text-neutral-primary [&:has(>input:focus-visible)]:focus-outline [&:has(>input:focus-visible)]:-outline-offset-2"
-      >
-        <UiIcon
-          class="shrink-0 text-neutral-emphasis"
-          name="search"
-          size="sm"
-        />
-        <input
-          ref="search-input"
-          v-model="queryModel"
-          type="text"
-          spellcheck="false"
-          class="w-full text-sm/4 focus:outline-hidden"
-          :placeholder="searchPlaceholder"
-          data-testid="menu-search-input"
-        />
-      </div>
-
-      <slot
-        v-bind="{
-          checkboxAppearance,
-          iconSize,
-          imageShape,
-          listVariant,
-          options,
-          groupedOptions,
-        }"
-      >
-        <ul
-          v-if="processedOptions.some(({ options }) => options.length > 0)"
-          class="max-h-80 overflow-y-auto"
-          data-testid="menu-option-list"
-        >
-          <template
-            v-for="group in processedOptions"
-            :key="`group-${group.groupLabel ?? 'default'}`"
-          >
-            <template v-if="group.options.length > 0">
-              <li
-                v-if="group.groupLabel"
-                class="flex h-6 items-center bg-neutral-faint px-2 text-xs font-semibold tracking-wider text-neutral-subtle uppercase"
-              >
-                {{ group.groupLabel }}
-              </li>
-
-              <UiListItem
-                v-for="(option, index) in group.options"
-                :key="`option-${option.value}`"
-                :selected="option.selected"
-                :selectable="listVariant === 'selectable'"
-                :is-checked="option.selected"
-                :check-box-menu="listVariant === 'checkbox'"
-                :icon-size="iconSize"
-                :image-shape="imageShape"
-                :image-src="option.imageSrc"
-                :icon-name="option.iconName"
-                :checkbox-appearance="checkboxAppearance"
-                :class="{
-                  'first:rounded-t-lg': !hasSearch,
-                  'last:rounded-b-lg': !hasResetOption,
-                  'border-t': option.hasDividerAbove,
-                }"
-                :data-testid="`menu-option-button-${index}`"
-                @list-item-click="selectOption(option)"
-                >{{ option.label }}</UiListItem
-              >
-            </template>
-          </template>
-        </ul>
-      </slot>
-
-      <div v-if="hasResetOption" class="px-2 pt-1.5 pb-2 text-neutral-primary">
-        <UiButton
-          appearance="outline-emphasis"
-          :disabled="disabledReset"
-          icon-name="reset"
-          size="xs"
-          data-testid="menu-search-reset-button"
-          @click="
-            queryModel = '';
-            $emit('reset');
-          "
-        >
-          <UiIcon name="reset" />
-          {{ resetLabel }}
-        </UiButton>
-      </div>
-    </div>
-  </UiPopover>
-</template>
-
-<script setup lang="ts" generic="Value">
-import type { Placement } from "@floating-ui/vue";
-import { computed, onMounted, useTemplateRef } from "vue";
-
-import UiButton from "../UiButton/UiButton.vue";
-import type { UiIconName } from "../UiIcon/UiIcon.vue";
-import UiIcon from "../UiIcon/UiIcon.vue";
-import UiListItem from "../UiListItem/UiListItem.vue";
-import UiPopover from "../UiPopover/UiPopover.vue";
-
-export type UiMenuOptionType<Value = unknown> = {
-  label: string;
-  imageSrc?: string;
-  iconName?: UiIconName;
-  selected: boolean;
-  value: Value;
-  /** @default false */
-  hasDividerAbove?: boolean;
-};
-
-export type UiMenuSelectedOption<Value = unknown> = UiMenuOptionType<Value> & {
-  index: number;
-};
-
-export type UiMenuGroupedOption<Value = unknown> = {
-  groupLabel?: string;
-  options: UiMenuOptionType<Value>[];
-};
-
-defineSlots<{
-  default?: (props: {
-    checkboxAppearance: typeof checkboxAppearance;
-    iconSize: typeof iconSize;
-    imageShape: typeof imageShape;
-    listVariant: typeof listVariant;
-    options: typeof options;
-    groupedOptions: typeof groupedOptions;
-  }) => any;
-}>();
-
-const queryModel = defineModel<string>("query", { default: "" });
-
-const {
-  options = undefined,
-  groupedOptions = undefined,
-  isOpen = false,
-  floatingUiPlacement = "bottom-start",
-  animate = false,
-
-  // Button slot
-  disabled = false,
-  active = false,
-  iconLeft = null,
-  buttonAppearance = "outline-subtle",
-  filterButtonSize = "sm",
-  defaultTitle = "",
-  multiLabel = "",
-  noTitle = false,
-
-  // Search
-  hasSearch = false,
-  searchPlaceholder = "",
-  hasAutoFocus = false,
-  hasResetOption = false,
-  resetLabel = "",
-
-  // Menu
-  iconSize = "sm",
-  imageShape = "square",
-  checkboxAppearance = "primary",
-  listVariant = "blank",
-} = defineProps<{
-  options?: UiMenuOptionType<Value>[];
-  groupedOptions?: UiMenuGroupedOption<Value>[];
-  isOpen?: boolean;
-  floatingUiPlacement?: Placement;
-  animate?: boolean;
-
-  // Button slot
-  disabled?: boolean;
-  active?: boolean;
-  iconLeft?: UiIconName;
-  buttonAppearance?:
-    | "fill-emphasis"
-    | "fill-subtle"
-    | "outline-emphasis"
-    | "outline-subtle"
-    | "ghost";
-  filterButtonSize?: "sm" | "xs";
-  defaultTitle?: string;
-  multiLabel?: string;
-  noTitle?: boolean;
-
-  // Search
-  hasSearch?: boolean;
-  searchPlaceholder?: string;
-  hasAutoFocus?: boolean;
-  hasResetOption?: boolean;
-  resetLabel?: string;
-
-  // Menu
-  iconSize?: "sm" | "md" | "lg";
-  imageShape?: "rounded" | "square";
-  checkboxAppearance?: "primary" | "secondary";
-  listVariant?: "checkbox" | "selectable" | "blank";
-}>();
-
-const emit = defineEmits<{
-  open: [];
-  close: [];
-  "option-selected": [UiMenuSelectedOption<Value>];
-  reset: [];
-}>();
-
-const searchInputRef = useTemplateRef("search-input");
-
-onMounted(() => {
-  if (hasAutoFocus) {
-    searchInputRef.value?.focus();
-  }
-});
-
-const processedOptions = computed<UiMenuGroupedOption<Value>[]>(
-  () => groupedOptions ?? [{ options: options ?? [] }],
-);
-
-const disabledReset = computed(() => {
-  return processedOptions.value
-    .flatMap(({ options }) => options)
-    .every((option) => !option.selected);
-});
-
-const selectedOptionLabel = computed<string>(() => {
-  if (noTitle) {
-    return defaultTitle;
-  }
-
-  const selectedOptions = processedOptions.value
-    .flatMap((group) => group.options)
-    .filter((option) => option.selected);
-
-  if (selectedOptions.length === 0) {
-    return defaultTitle;
-  }
-
-  if (selectedOptions.length === 1) {
-    return selectedOptions[0].label;
-  }
-
-  return `${selectedOptions.length} ${multiLabel}`.trim();
-});
-
-const selectOption = (selectedOption: UiMenuOptionType<Value>): void => {
-  const index = processedOptions.value
-    .flatMap((group) => group.options)
-    .findIndex(({ value }) => value === selectedOption.value);
-
-  emit("option-selected", { ...selectedOption, index });
-};
-</script>