@dpa-id-components/dpa-shared-components 21.1.1 → 22.0.0-next.1

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { action } from "storybook/actions";
-import { computed, ref } from "vue";
+import { ref } from "vue";
 
 import { icons } from "../UiIcon/icons.ts";
 
@@ -15,99 +15,42 @@ const meta = {
   // @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"],
-    },
+    options: { control: false },
+    groupedOptions: { control: false },
     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",
+    isOpen: false,
+    floatingUiPlacement: "bottom-start",
+    animate: true,
+
+    // Button slot
     disabled: false,
     active: false,
+    iconLeft: undefined,
+    buttonAppearance: "secondary-alt",
+    filterButtonSize: undefined,
+    defaultTitle: "Default Title",
+    multiLabel: "selected Options",
+    noTitle: false,
+
+    // Search
+    hasSearch: false,
+    query: "",
+    searchPlaceholder: "Suchen",
+    hasAutoFocus: true,
     hasResetOption: false,
     resetLabel: "Zurücksetzen",
-    searchPlaceholder: "Suchen",
-    hasSearch: false,
-    noTitle: false,
-    floatingUiPlacement: "bottom-start",
+
+    // Menu
+    iconSize: "sm",
+    imageShape: "square",
+    checkboxSize: "md",
+    checkboxAppearance: "primary",
+    listVariant: "blank",
   },
 } satisfies Meta<typeof UiMenu>;
 
@@ -123,9 +66,10 @@ const renderDefault: Story["render"] = (args) => ({
         selected: true,
       },
       {
-        label: "Option 2",
+        label: "Option 2 is really long, much longer than the rest",
         value: "value 2",
         selected: false,
+        hasDividerAbove: true,
       },
       {
         label: "Option 3",
@@ -138,60 +82,40 @@ const renderDefault: Story["render"] = (args) => ({
         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 filteredOptions = ref(Array.from(options.value));
+    const onSelect = (option: UiMenuSelectedOption<string>) => {
+      filteredOptions.value[option.index].selected =
+        !filteredOptions.value[option.index].selected;
     };
-    const onInput = (e: string) => {
+    const onUpdateQuery = (value: string) => {
       filteredOptions.value = options.value.filter((option) =>
-        option.label.toLowerCase().includes(e.toLowerCase()),
+        option.label.toLowerCase().includes(value.toLowerCase()),
       );
     };
-    const onReset = () => {
-      options.value.forEach((option) => {
-        option.selected = false;
-      });
-    };
+
     return {
       args,
-      isOpen,
-      resetIsDisabled,
-      onClose,
-      onOpen,
       onSelect,
-      onInput,
-      onReset,
+      onUpdateQuery,
       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(); }"
-    />
+    <aside class="w-50 h-200 p-4 bg-accent-green">
+      <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: {
-    open: action("open"),
-    close: action("close"),
     optionSelected: action("option-selected"),
-    input: action("input"),
-    reset: action("reset"),
+    updateQuery: action("update:query"),
   },
 });
 
@@ -206,9 +130,9 @@ export const WithResetAndSearch: Story = {
     hasSearch: true,
     resetLabel: "Zurücksetzen",
     searchPlaceholder: "Suchen",
-    buttonVariant: "transparent-rounded",
+    buttonAppearance: "secondary-alt",
     listVariant: "checkbox",
-    checkboxSize: "small",
+    checkboxSize: "sm",
     defaultTitle: "Optionen",
     hasAutoFocus: true,
   },
@@ -220,9 +144,9 @@ export const WithGroupedOptions: Story = {
     hasSearch: true,
     resetLabel: "Zurücksetzen",
     searchPlaceholder: "Suchen",
-    buttonVariant: "transparent-rounded",
+    buttonAppearance: "secondary-alt",
     listVariant: "checkbox",
-    checkboxSize: "small",
+    checkboxSize: "sm",
     defaultTitle: "Optionen",
     hasAutoFocus: true,
   },
@@ -299,20 +223,11 @@ export const WithGroupedOptions: Story = {
           ],
         },
       ]);
-      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>) => {
+      const filteredOptions = ref(Array.from(groupedOptions.value));
+      const onSelect = (option: UiMenuSelectedOption<string>) => {
         filteredOptions.value.forEach(({ options }, groupIndex) => {
           options.forEach(({ value }, optionsIndex) => {
-            if (value === e.value) {
+            if (value === option.value) {
               filteredOptions.value[groupIndex].options[optionsIndex].selected =
                 !filteredOptions.value?.[groupIndex].options?.[optionsIndex]
                   .selected;
@@ -320,316 +235,156 @@ export const WithGroupedOptions: Story = {
           });
         });
       };
-      const onInput = (e: string) => {
+      const onUpdateQuery = (value: string) => {
         filteredOptions.value = groupedOptions.value.map(
           ({ groupLabel, options }) => ({
             groupLabel,
             options: options.filter((option) =>
-              option.label.toLowerCase().includes(e.toLowerCase()),
+              option.label.toLowerCase().includes(value.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,
+        onUpdateQuery,
       };
     },
     components: { UiMenu },
     template: `
       <UiMenu
         v-bind="args"
+        v-model:query="args.query"
         :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(); }"
+        @option-selected="(option)=> { onSelect(option); optionSelected(option); }"
+        @update:query="(value) => { onUpdateQuery(value); updateQuery(value); }"
       />
     `,
     methods: {
-      open: action("open"),
-      close: action("close"),
       optionSelected: action("option-selected"),
-      input: action("input"),
-      reset: action("reset"),
+      updateQuery: action("update:query"),
     },
   }),
 };
 
-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"),
-  },
-});
+  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 = (option: UiMenuSelectedOption<string>) => {
+        filteredOptions.value[option.index].selected =
+          !filteredOptions.value[option.index].selected;
+      };
+      const onUpdateQuery = (value: string) => {
+        filteredOptions.value = options.value.filter((option) =>
+          option.label.toLowerCase().includes(value.toLowerCase()),
+        );
+      };
 
-export const WithIcons: Story = {
-  render: renderWithIcons,
+      return {
+        args,
+        onSelect,
+        onUpdateQuery,
+        filteredOptions,
+        options,
+      };
+    },
+    components: { UiMenu },
+    template: `
+      <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",
-    checkboxSize: "small",
+    checkboxSize: "sm",
   },
 };
 
-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 WithIcons: 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(Array.from(options.value));
+      const onSelect = (option: UiMenuSelectedOption<string>) => {
+        filteredOptions.value[option.index].selected =
+          !filteredOptions.value[option.index].selected;
+      };
+      const onUpdateQuery = (value: string) => {
+        filteredOptions.value = options.value.filter((option) =>
+          option.label.toLowerCase().includes(value.toLowerCase()),
+        );
+      };
 
-export const DefaultAnimated: Story = {
-  render: renderDefaultAnimated,
-  parameters: {
-    docs: {
-      canvas: {
-        className: "h-full p-400",
-      },
+      return {
+        args,
+        onSelect,
+        onUpdateQuery,
+        filteredOptions,
+        options,
+      };
     },
+    components: { UiMenu },
+    template: `
+      <UiMenu
+        v-bind="args"
+        v-model:query="args.query"
+        :options="filteredOptions"
+        :button-variant="filteredOptions.some((option) => option.selected) ? 'primary' : 'secondary-alt'"
+        @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",
+    checkboxSize: "sm",
   },
 };