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

package/dist/src/components/UiListItem/UiListItem.vue

@@ -2,26 +2,25 @@
   <li
     :class="
       cn(
-        'flex cursor-pointer list-none items-center gap-2 px-4 py-2 text-sm/normal text-neutral-emphasis select-none hover:text-primary focus:outline-hidden focus-visible:focus-outline focus-visible:-outline-offset-2',
+        'flex cursor-pointer list-none items-center gap-2 px-4 py-1.5 text-sm/normal text-neutral-emphasis select-none hover:text-primary focus:outline-hidden focus-visible:focus-outline focus-visible:-outline-offset-2',
         {
           'cursor-default text-neutral-medium': disabled,
           'is-selected': selected,
-          'py-3': checkboxSize === 'md',
         },
         overrideClasses,
         $attrs.class,
       )
     "
     tabindex="0"
-    @click.prevent.stop="$emit('list-item-click', value, true)"
+    @click.prevent.stop="$emit('list-item-click', value)"
   >
     <UiCheckbox
       v-if="checkBoxMenu"
       :appearance="checkboxAppearance"
       :model-value="isChecked"
       :disabled="disabled"
-      :size="checkboxSize"
-      @click.stop="$emit('list-item-click', value, false)"
+      size="sm"
+      @click.stop="$emit('list-item-click', value)"
     >
       <span class="sr-only"><slot /></span>
     </UiCheckbox>
@@ -65,7 +64,6 @@ const {
   imageSrc = undefined,
   imageShape = "rounded",
   checkboxAppearance = "primary",
-  checkboxSize = "md",
   isChecked = false,
   disabled = false,
 } = defineProps<{
@@ -79,12 +77,11 @@ const {
   imageShape?: "rounded" | "square";
   iconSize?: "sm" | "md" | "lg";
   checkboxAppearance?: "primary" | "secondary";
-  checkboxSize?: "sm" | "md";
   isChecked?: boolean;
   disabled?: boolean;
 }>();
 
 defineEmits<{
-  "list-item-click": [value: string, shouldCloseMenu: boolean];
+  "list-item-click": [value: string];
 }>();
 </script>

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

@@ -1,9 +1,13 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import type {
+  ComponentPropsAndSlots,
+  Meta,
+  StoryObj,
+} from "@storybook/vue3-vite";
 
 import { icons } from "./icons.ts";
 import UiMediaTypeIcon from "./UiMediaTypeIcon.vue";
 
-type PropsAndStoryProps = InstanceType<typeof UiMediaTypeIcon> & {
+type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiMediaTypeIcon> & {
   outline: boolean;
 };
 
@@ -18,10 +22,10 @@ const meta = {
   argTypes: {
     outline: { control: "boolean" },
   },
-} satisfies Meta<PropsAndStoryProps>;
+} satisfies Meta<PropsAndCustomArgs>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<PropsAndCustomArgs>;
 
 export const Default: Story = {
   render: (args) => ({

package/dist/src/components/UiMediaTypeIcon/UiMediaTypeIcon.vue

@@ -42,7 +42,7 @@ const iconComponent = computed(() =>
 
 watchEffect(() => {
   if (!icons[name]) {
-    throw new Error(`UiMediaFormatIcon: No icon named “${name}” exists.`);
+    throw new Error(`UiMediaTypeIcon: No icon named “${name}” exists.`);
   }
 });
 </script>

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

@@ -89,7 +89,6 @@ const options = ref([
 | `buttonAppearance` | `"primary"`, `"secondary"`, `"secondary-alt"`, or `"ghost"` | `"secondary-alt"` |  |
 | `listVariant`          | `"checkbox" | "selectable" | "blank"`                                                                 | `"blank"`                     | Menu style.                                                                                                                                                                                                                                  |
 | `checkboxColor`        | `"blue" | "gray"`                                                                                          | `"blue"`                      | Checkbox color style.                                                                                                                                                                                                                        |
-| `checkboxSize`         | `"small" | "medium"`                                                                                       | `"medium"`                    | Checkbox size style.                                                                                                                                                                                                                         |
 | `imageShape`           | `"rounded" | "square"`                                                                                     | `"square"`                    | shape of image.                                                                                                                                                                                                                              |
 | `hasResetOption`       | `boolean`                                                                                                       | `false`                       | Toggles option for a reset button                                                                                                                                                                                                            |
 | `resetLabel`           | `string`                                                                                                        | `""`                         | Sets text of reset button.                                                                                                                                                                                                                   |
@@ -142,7 +141,6 @@ Wraps the UiListItem and uses the same settings as in the original UiMenu, helps
 | `listVariant?`   | `"checkbox" | "selectable" | "blank"`   | `blank`     | Provide the list variant, same as in UiMenu.vue           |
 | `iconSize?`      | `"small" | "medium" | "large"`      | `small`     | Provide the icon size, same as in UiMenu.vue              |
 | `imageShape?`    | `"rounded" | "square"`    | `square`    | Provide the imageShape, same as in UiMenu.vue             |
-| `checkboxSize?`  | `"small" | "medium"`  | `medium`    | Provide the checkboxSize, same as in UiMenu.vue           |
 | `checkboxColor?` | `"blue" | "gray"` | `blue`      | Provide the checkboxColor, same as in UiMenu.vue          |
 
 #### Slots

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

@@ -40,7 +40,7 @@ describe("UiMenu", () => {
         options,
       },
     });
-    expect(wrapper.find('[data-testid="menu-option-list"]').isVisible()).toBe(
+    expect(wrapper.find('[data-testid="menu-option-list"]').exists()).toBe(
       false,
     );
   });
@@ -126,7 +126,7 @@ describe("UiMenu", () => {
         ],
       },
     });
-    expect(wrapper.find('[data-testid="menu-option-list"]').isVisible()).toBe(
+    expect(wrapper.find('[data-testid="menu-option-list"]').exists()).toBe(
       false,
     );
     const toggleButton = wrapper.find<HTMLButtonElement>(
@@ -206,7 +206,7 @@ describe("UiMenu", () => {
         ],
       },
     });
-    expect(wrapper.find('[data-testid="menu-option-list"]').isVisible()).toBe(
+    expect(wrapper.find('[data-testid="menu-option-list"]').exists()).toBe(
       false,
     );
     const toggleButton = wrapper.find<HTMLButtonElement>(
@@ -282,7 +282,7 @@ describe("UiMenu", () => {
       },
     });
 
-    expect(wrapper.find('[data-testid="menu-option-list"]').isVisible()).toBe(
+    expect(wrapper.find('[data-testid="menu-option-list"]').exists()).toBe(
       false,
     );
 
@@ -301,7 +301,7 @@ describe("UiMenu", () => {
 
     await items[0].trigger("click");
     expect(wrapper.find('[data-testid="menu-option-list"]').isVisible()).toBe(
-      false,
+      true,
     );
   });
 });

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

@@ -31,10 +31,10 @@ const meta = {
     disabled: false,
     active: false,
     iconLeft: undefined,
-    buttonAppearance: "secondary-alt",
+    buttonAppearance: "outline-subtle",
     filterButtonSize: undefined,
     defaultTitle: "Default Title",
-    multiLabel: "selected Options",
+    multiLabel: "selected options",
     noTitle: false,
 
     // Search
@@ -48,7 +48,6 @@ const meta = {
     // Menu
     iconSize: "sm",
     imageShape: "square",
-    checkboxSize: "md",
     checkboxAppearance: "primary",
     listVariant: "blank",
   },
@@ -57,52 +56,61 @@ const meta = {
 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 is really long, much longer than the rest",
-        value: "value 2",
-        selected: false,
-        hasDividerAbove: true,
-      },
-      {
-        label: "Option 3",
-        value: "value 3",
-        selected: false,
-      },
-      {
-        label: "Option 4",
-        value: "value 4",
-        selected: false,
-      },
-    ]);
-    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 Default: Story = {
+  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));
 
-    return {
-      args,
-      onSelect,
-      onUpdateQuery,
-      filteredOptions,
-      options,
-    };
-  },
-  components: { UiMenu },
-  template: `
+      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-50 h-200 p-4 bg-accent-green">
       <UiMenu
         v-bind="args"
@@ -113,40 +121,21 @@ const renderDefault: Story["render"] = (args) => ({
       />
     </aside>
   `,
-  methods: {
-    optionSelected: action("option-selected"),
-    updateQuery: action("update:query"),
-  },
-});
-
-export const Default: Story = {
-  render: renderDefault,
-};
-
-export const WithResetAndSearch: Story = {
-  render: renderDefault,
-  args: {
-    hasResetOption: true,
-    hasSearch: true,
-    resetLabel: "Zurücksetzen",
-    searchPlaceholder: "Suchen",
-    buttonAppearance: "secondary-alt",
-    listVariant: "checkbox",
-    checkboxSize: "sm",
-    defaultTitle: "Optionen",
-    hasAutoFocus: true,
-  },
+    methods: {
+      optionSelected: action("option-selected"),
+      updateQuery: action("update:query"),
+    },
+  }),
 };
 
-export const WithGroupedOptions: Story = {
+export const GroupedOptions: Story = {
   args: {
     hasResetOption: true,
     hasSearch: true,
     resetLabel: "Zurücksetzen",
     searchPlaceholder: "Suchen",
-    buttonAppearance: "secondary-alt",
+    buttonAppearance: "outline-subtle",
     listVariant: "checkbox",
-    checkboxSize: "sm",
     defaultTitle: "Optionen",
     hasAutoFocus: true,
   },
@@ -224,17 +213,19 @@ export const WithGroupedOptions: Story = {
         },
       ]);
       const filteredOptions = ref(Array.from(groupedOptions.value));
-      const onSelect = (option: UiMenuSelectedOption<string>) => {
-        filteredOptions.value.forEach(({ options }, groupIndex) => {
-          options.forEach(({ value }, optionsIndex) => {
-            if (value === option.value) {
-              filteredOptions.value[groupIndex].options[optionsIndex].selected =
-                !filteredOptions.value?.[groupIndex].options?.[optionsIndex]
-                  .selected;
-            }
-          });
-        });
+
+      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 }) => ({
@@ -255,7 +246,7 @@ export const WithGroupedOptions: Story = {
       };
     },
     components: { UiMenu },
-    template: `
+    template: /*html*/ `
       <UiMenu
         v-bind="args"
         v-model:query="args.query"
@@ -292,67 +283,15 @@ export const WithImages: Story = {
         },
       ]);
       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()),
-        );
-      };
 
-      return {
-        args,
-        onSelect,
-        onUpdateQuery,
-        filteredOptions,
-        options,
+      const onSelect = (selectedOption: UiMenuSelectedOption<string>) => {
+        for (const option of filteredOptions.value) {
+          if (option.value === selectedOption.value) {
+            option.selected = !option.selected;
+          }
+        }
       };
-    },
-    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: "sm",
-  },
-};
 
-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()),
@@ -368,12 +307,11 @@ export const WithIcons: Story = {
       };
     },
     components: { UiMenu },
-    template: `
+    template: /*html*/ `
       <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); }"
       />
@@ -385,6 +323,5 @@ export const WithIcons: Story = {
   }),
   args: {
     listVariant: "checkbox",
-    checkboxSize: "sm",
   },
 };