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

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

@@ -1,110 +1,90 @@
 <template>
   <li
-    ref="itemEl"
-    class="relative cursor-pointer list-none border-t fill-current text-gray-900 shadow-none select-none first-of-type:border-none focus:outline-hidden focus-visible:outline-blue"
-    :class="disabled ? 'cursor-default' : 'cursor-pointer'"
-    style="outline-offset: -2px"
+    :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',
+        {
+          'cursor-default text-neutral-medium': disabled,
+          'is-selected': selected,
+          'py-3': checkboxSize === 'md',
+        },
+        overrideClasses,
+        $attrs.class,
+      )
+    "
     tabindex="0"
-    data-testid="list-item-button"
-    @click.prevent.stop="handleClick"
+    @click.prevent.stop="$emit('list-item-click', value, true)"
   >
-    <span
-      :class="
-        cn(
-          'flex items-center justify-between gap-1 text-sm/normal hover:text-blue-default',
-          itemClasses,
-          overrideClasses,
-        )
-      "
+    <UiCheckbox
+      v-if="checkBoxMenu"
+      :appearance="checkboxAppearance"
+      :model-value="isChecked"
+      :disabled="disabled"
+      :size="checkboxSize"
+      @click.stop="$emit('list-item-click', value, false)"
     >
-      <span class="flex items-center" data-testid="innerText">
-        <span v-if="checkBoxMenu" class="inset-y-0 flex items-center pr-2">
-          <UiCheckbox
-            :color="checkBoxColor"
-            :checked="isChecked"
-            :disabled="disabled"
-            :size="checkboxSize"
-          />
-        </span>
-        <UiIcon
-          v-if="iconName"
-          :name="iconName"
-          size-classes="mr-2 h-4 w-4"
-        ></UiIcon>
-        <img
-          v-if="imageSrc"
-          class="mr-2 w-4"
-          :class="{
-            'aspect-square': imageShape === 'square',
-            'aspect-square rounded-full object-center':
-              imageShape === 'rounded',
-          }"
-          :src="imageSrc"
-          :alt="value"
-        />
-        <slot />
-      </span>
+      <span class="sr-only"><slot /></span>
+    </UiCheckbox>
 
-      <span v-if="selected && selectable" class="flex items-center">
-        <UiIcon name="checkmark" :size="iconSize" />
-      </span>
-    </span>
+    <UiIcon v-if="iconName" :name="iconName" size="sm" />
+
+    <img
+      v-if="imageSrc"
+      class="size-4"
+      :class="{
+        'rounded-full object-center': imageShape === 'rounded',
+      }"
+      :src="imageSrc"
+      alt=""
+    />
+
+    <slot />
+
+    <UiIcon
+      v-if="selected && selectable"
+      class="ml-auto"
+      name="checkmark"
+      :size="iconSize"
+    />
   </li>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-
 import { cn } from "../../utils/cn.ts";
 import UiCheckbox from "../UiCheckbox/UiCheckbox.vue";
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 
-const props = withDefaults(
-  defineProps<{
-    value?: string;
-    checkBoxMenu?: boolean;
-    isChecked?: boolean;
-    selected?: boolean;
-    selectable?: boolean;
-    overrideClasses?: string;
-    checkBoxColor?: "blue" | "gray";
-    iconName?: UiIconName | null;
-    imageSrc?: string;
-    imageShape?: "rounded" | "square";
-    iconSize?: "small" | "medium" | "large";
-    checkboxSize?: "small" | "medium";
-    disabled?: boolean;
-  }>(),
-  {
-    value: "",
-    checkBoxMenu: false,
-    isChecked: false,
-    selected: false,
-    selectable: false,
-    overrideClasses: "",
-    checkBoxColor: "blue",
-    iconName: null,
-    iconSize: "medium",
-    imageSrc: "",
-    imageShape: "rounded",
-    checkboxSize: "medium",
-    disabled: false,
-  },
-);
-
-const emit = defineEmits<{
-  "list-item-click": [string];
+const {
+  value = "",
+  checkBoxMenu = false,
+  selected = false,
+  selectable = false,
+  overrideClasses = undefined,
+  iconName = undefined,
+  iconSize = "md",
+  imageSrc = undefined,
+  imageShape = "rounded",
+  checkboxAppearance = "primary",
+  checkboxSize = "md",
+  isChecked = false,
+  disabled = false,
+} = defineProps<{
+  value?: string;
+  checkBoxMenu?: boolean;
+  selected?: boolean;
+  selectable?: boolean;
+  overrideClasses?: string;
+  iconName?: UiIconName;
+  imageSrc?: string;
+  imageShape?: "rounded" | "square";
+  iconSize?: "sm" | "md" | "lg";
+  checkboxAppearance?: "primary" | "secondary";
+  checkboxSize?: "sm" | "md";
+  isChecked?: boolean;
+  disabled?: boolean;
 }>();
-const itemClasses = computed(() => {
-  return [
-    props.selected ? "is-selected" : "",
-    props.disabled ? "text-gray-600" : "text-gray-800",
-    props.selectable ? "pr-9" : "pr-4",
-    props.checkboxSize === "medium" ? "py-3 px-4" : "px-4 py-2",
-  ];
-});
 
-const handleClick = () => {
-  emit("list-item-click", props.value);
-};
+defineEmits<{
+  "list-item-click": [value: string, shouldCloseMenu: boolean];
+}>();
 </script>

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

@@ -9,11 +9,73 @@
 
 <script setup>
 import { UiMenu } from "@dpa-id-components/dpa-shared-components";
+import { ref } from "vue";
+
+const options = ref([
+  {
+    value: "code",
+    label: "Code",
+    selected: true,
+  },
+  {
+    value: "issues",
+    label: "Issues",
+    selected: false,
+  },
+  {
+    value: "pull_requests",
+    label: "Pull requests",
+    selected: false,
+  },
+]);
+</script>
+```
+
+**With search**:
+
+```vue
+<template>
+  <UiMenu
+    v-model:query="query"
+    :options="options"
+    has-search
+    has-reset-option
+  />
+</template>
+
+<script setup>
+import { UiMenu } from "@dpa-id-components/dpa-shared-components";
+import { ref } from "vue";
+
+const query = ref("");
+const options = ref([
+  {
+    value: "code",
+    label: "Code",
+    selected: true,
+  },
+  {
+    value: "issues",
+    label: "Issues",
+    selected: false,
+  },
+  {
+    value: "pull_requests",
+    label: "Pull requests",
+    selected: false,
+  },
+]);
 </script>
 ```
 
 ## API
 
+### Models
+
+| Name   | Type     | Default | Description          |
+|--------|----------|---------|----------------------|
+| `query`| `string` | `""`    | Search `input` value |
+
 ### Props
 
 | Name                   | Type                                                                                                            | Default                       | Description                                                                                                                                                                                                                                  |
@@ -21,16 +83,15 @@ import { UiMenu } from "@dpa-id-components/dpa-shared-components";
 | `options`              | `UiMenuOptionType<Value>[]`                                     | required (un-grouped variant) | Array of options for selection.                                                                                                                                                                                                              |
 | `groupedOptions`       | `UiMenuGroupedOption<Value>[];` | required (grouped variant)    | Array of grouped options for selection.                                                                                                                                                                                                      |
 | `defaultTitle`         | `string`                                                                                                        | `""`                          | Default title to display when nothing is selected.                                                                                                                                                                                           |
-| `isOpen`               | `boolean`                                                                                                       | `false`                       | Toggles visibility selection list.                                                                                                                                                                                                           |
+| `isOpen`               | `boolean`                                                                                                       | `false`                       | Whether the menu is initially open.                                                                                                                                                                                                           |
 | `disabled`             | `boolean`                                                                                                       | `false`                       | Disables the button to open selection.                                                                                                                                                                                                       |
 | `active`               | `boolean`                                                                                                       | `false`                       | Sets active style to indicate an active filter selection.                                                                                                                                                                                    |
-| `buttonVariant`        | `"blue rounded" &#124; "white-rounded" &#124; "transparent-rounded" &#124; "blank"`                             | `"white-rounded"`             | Button style, see UiFilterButton.                                                                                                                                                                                                            |
+| `buttonAppearance` | `"primary"`, `"secondary"`, `"secondary-alt"`, or `"ghost"` | `"secondary-alt"` |  |
 | `listVariant`          | `"checkbox" &#124; "selectable" &#124; "blank"`                                                                 | `"blank"`                     | Menu style.                                                                                                                                                                                                                                  |
 | `checkboxColor`        | `"blue" &#124; "gray"`                                                                                          | `"blue"`                      | Checkbox color style.                                                                                                                                                                                                                        |
 | `checkboxSize`         | `"small" &#124; "medium"`                                                                                       | `"medium"`                    | Checkbox size style.                                                                                                                                                                                                                         |
 | `imageShape`           | `"rounded" &#124; "square"`                                                                                     | `"square"`                    | shape of image.                                                                                                                                                                                                                              |
 | `hasResetOption`       | `boolean`                                                                                                       | `false`                       | Toggles option for a reset button                                                                                                                                                                                                            |
-| `disabledReset`        | `boolean`                                                                                                       | `false`                       | Disables reset button.                                                                                                                                                                                                                       |
 | `resetLabel`           | `string`                                                                                                        | `""`                         | Sets text of reset button.                                                                                                                                                                                                                   |
 | `searchPlaceholder`    | `string`                                                                                                        | `""`                         | Sets text of search input placeholder.                                                                                                                                                                                                       |
 | `hasSearch`            | `boolean`                                                                                                       | `false`                       | Toggles option for a search input.                                                                                                                                                                                                           |
@@ -39,9 +100,7 @@ import { UiMenu } from "@dpa-id-components/dpa-shared-components";
 | `noTitle`              | `boolean`                                                                                                       | `false`                       | Enabled prop displays dropdown without a title.                                                                                                                                                                                              |
 | `floatingStylesActive` | `boolean`                                                                                                       | `true`                        | prop to disable styles from floating-ui.                                                                                                                                                                                                     |
 | `floatingUiPlacement`  | `Placement`                                                                                                     | `bottom-start`                | Options for [Floating Ui](https://floating-ui.com/) [Interface](https://github.com/floating-ui/floating-ui/blob/afca34cc59321569ccfca9b41934859809c47a3d/packages/utils/src/index.ts#L8)                                                     |
-| `floatingUiOptions`    | `UseFloatingOptions`                                                                                            | `null`                        | Options for [Floating Ui](https://floating-ui.com/) [Interface](https://github.com/floating-ui/floating-ui/blob/afca34cc59321569ccfca9b41934859809c47a3d/packages/vue/src/types.ts#L60)                                                      |
 | `animate`              | `boolean`                                                                                                       | `false`                       | Animate the opening and closing of the menu, the duration can be changed when applying `placed-list-class="[--transition-duration:3000ms]"` for animating in and `placed-list-class="[-transition-close-duration:2000ms]"` for animating out |
-| `query`| `string` | `""` | Initial value for the search input. |
 
 ### Events
 
@@ -50,9 +109,7 @@ import { UiMenu } from "@dpa-id-components/dpa-shared-components";
 | `open`            | none     |  |
 | `close`           | none     |  |
 | `option-selected` | `UiMenuSelectedOption<Value>` |  |
-| `input`           | `string` | Emits the string whenever the value in search input changes |
 | `reset`           | none     | Emitted when reset button is clicked                        |
-| `placed`          | none     |  |
 
 ### Slots
 

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

@@ -1,10 +1,11 @@
 import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiMenu, { type UiMenuOptionType } from "./UiMenu.vue";
 
 function createWrapper(options: ComponentMountingOptions<typeof UiMenu> = {}) {
   return mount(UiMenu, {
+    attachTo: document.body,
     ...options,
   });
 }
@@ -33,53 +34,30 @@ const options: UiMenuOptionType<string>[] = [
 ];
 
 describe("UiMenu", () => {
-  it("renders closed", () => {
+  test("renders closed", () => {
     const wrapper = createWrapper({
       props: {
         options,
       },
     });
-    const menu = wrapper.find('[data-testid="menu"]');
-    expect(menu.exists()).toBe(false);
+    expect(wrapper.find('[data-testid="menu-option-list"]').isVisible()).toBe(
+      false,
+    );
   });
 
-  it("renders open", () => {
+  test("renders open", () => {
     const wrapper = createWrapper({
       props: {
         options,
         isOpen: true,
       },
     });
-    expect(wrapper.find('[data-testid="menu-option-list"]').exists()).toBe(
+    expect(wrapper.find('[data-testid="menu-option-list"]').isVisible()).toBe(
       true,
     );
   });
 
-  it("renders blue button", () => {
-    const wrapper = createWrapper({
-      props: {
-        options,
-        buttonVariant: "blue-rounded",
-      },
-    });
-
-    const button = wrapper.find('[data-testid="button"]');
-    expect(button.classes("bg-blue-default")).toBe(true);
-  });
-
-  it("renders blank button", () => {
-    const wrapper = createWrapper({
-      props: {
-        options,
-        buttonVariant: "blank",
-      },
-    });
-
-    const button = wrapper.find('[data-testid="button"]');
-    expect(button.classes("bg-transparent")).toBe(true);
-  });
-
-  it("renders selected entry", () => {
+  test("renders selected entry", () => {
     const wrapper = createWrapper({
       props: {
         options: options.map((option, index) => ({
@@ -90,10 +68,10 @@ describe("UiMenu", () => {
       },
     });
 
-    expect(wrapper.find(".is-selected").exists()).toBe(true);
+    expect(wrapper.find(".is-selected").isVisible()).toBe(true);
   });
 
-  it("emits option-selected event", async () => {
+  test("emits option-selected event", async () => {
     const wrapper = createWrapper({
       props: {
         options,
@@ -104,64 +82,29 @@ describe("UiMenu", () => {
     expect(wrapper.emitted()).toHaveProperty("option-selected");
   });
 
-  it("renders search input", () => {
+  test("emits “update:query” event", async () => {
     const wrapper = createWrapper({
       props: {
         options,
         isOpen: true,
         hasSearch: true,
-      },
-    });
-
-    expect(wrapper.find('[data-testid="menu-search-input"]').exists()).toBe(
-      true,
-    );
-  });
-
-  it("renders reset button", () => {
-    const wrapper = createWrapper({
-      props: {
-        options,
-        isOpen: true,
         hasResetOption: true,
       },
     });
-    expect(
-      wrapper.find('[data-testid="menu-search-reset-button"]').exists(),
-    ).toBe(true);
-  });
 
-  it("emits search input event", async () => {
-    const wrapper = createWrapper({
-      props: {
-        options,
-        isOpen: true,
-        hasSearch: true,
-      },
-    });
-    await wrapper
-      .find('[data-testid="menu-search-input"]')
-      .setValue("Option 1");
-    expect(wrapper.emitted()).toHaveProperty("input");
-    expect(wrapper.emitted("input")).toEqual([["Option 1"]]);
-  });
+    const input = wrapper.find<HTMLInputElement>(
+      '[data-testid="menu-search-input"]',
+    );
+    await input.setValue("test");
+    expect(input.element.value).toBe("test");
+    expect((wrapper.emitted("update:query") ?? []).at(-1)).toEqual(["test"]);
 
-  it("emits reset event", async () => {
-    const wrapper = createWrapper({
-      props: {
-        options,
-        isOpen: true,
-        hasResetOption: true,
-        disabledReset: false,
-      },
-    });
-    await wrapper
-      .find('[data-testid="menu-search-reset-button"]')
-      .trigger("click");
-    expect(wrapper.emitted()).toHaveProperty("reset");
+    await input.setValue("");
+    expect(input.element.value).toBe("");
+    expect((wrapper.emitted("update:query") ?? []).at(-1)).toEqual([""]);
   });
 
-  it("emits correct option-selected event data for options", async () => {
+  test("emits correct option-selected event data for options", async () => {
     const wrapper = createWrapper({
       props: {
         options: [
@@ -183,16 +126,15 @@ describe("UiMenu", () => {
         ],
       },
     });
-    expect(wrapper.find('[data-testid="menu"]').exists()).toBe(false);
+    expect(wrapper.find('[data-testid="menu-option-list"]').isVisible()).toBe(
+      false,
+    );
     const toggleButton = wrapper.find<HTMLButtonElement>(
-      '[data-testid="button"]',
+      '[data-testid="menu-button"]',
     );
     await toggleButton.trigger("click");
-    // TODO: Fix this. For some reason, one has to pass the `isOpen` prop from the outside to control the open state.
-    await wrapper.setProps({ isOpen: true });
 
-    const menu = wrapper.find('[data-testid="menu"]');
-    const items = menu.findAll("li");
+    const items = wrapper.findAll('[data-testid^="menu-option-button-"]');
     expect(items.length).toBe(3);
 
     await items[0].trigger("click");
@@ -217,7 +159,7 @@ describe("UiMenu", () => {
     ]);
   });
 
-  it("emits correct option-selected event data for groupedOptions", async () => {
+  test("emits correct option-selected event data for groupedOptions", async () => {
     const wrapper = createWrapper({
       props: {
         groupedOptions: [
@@ -264,29 +206,28 @@ describe("UiMenu", () => {
         ],
       },
     });
-    expect(wrapper.find('[data-testid="menu"]').exists()).toBe(false);
+    expect(wrapper.find('[data-testid="menu-option-list"]').isVisible()).toBe(
+      false,
+    );
     const toggleButton = wrapper.find<HTMLButtonElement>(
-      '[data-testid="button"]',
+      '[data-testid="menu-button"]',
     );
     await toggleButton.trigger("click");
-    // TODO: Fix this. Currently, one has to pass the `isOpen` prop from the outside to _change_ the open state, but this should be strictly internal state.
-    await wrapper.setProps({ isOpen: true });
 
-    const menu = wrapper.find('[data-testid="menu"]');
-    const items = menu.findAll("li");
-    expect(items.length).toBe(8);
+    const items = wrapper.findAll('[data-testid^="menu-option-button-"]');
+    expect(items.length).toBe(6);
 
-    await items[1].trigger("click");
+    await items[0].trigger("click");
     expect((wrapper.emitted("option-selected") ?? []).at(-1)).toEqual([
       { index: 0, value: "code_1", label: "Code", selected: true },
     ]);
 
-    await items[2].trigger("click");
+    await items[1].trigger("click");
     expect((wrapper.emitted("option-selected") ?? []).at(-1)).toEqual([
       { index: 1, value: "issues_1", label: "Issues", selected: false },
     ]);
 
-    await items[3].trigger("click");
+    await items[2].trigger("click");
     expect((wrapper.emitted("option-selected") ?? []).at(-1)).toEqual([
       {
         index: 2,
@@ -296,17 +237,17 @@ describe("UiMenu", () => {
       },
     ]);
 
-    await items[5].trigger("click");
+    await items[3].trigger("click");
     expect((wrapper.emitted("option-selected") ?? []).at(-1)).toEqual([
       { index: 3, value: "code_2", label: "Code", selected: false },
     ]);
 
-    await items[6].trigger("click");
+    await items[4].trigger("click");
     expect((wrapper.emitted("option-selected") ?? []).at(-1)).toEqual([
       { index: 4, value: "issues_2", label: "Issues", selected: true },
     ]);
 
-    await items[7].trigger("click");
+    await items[5].trigger("click");
     expect((wrapper.emitted("option-selected") ?? []).at(-1)).toEqual([
       {
         index: 5,
@@ -316,4 +257,51 @@ describe("UiMenu", () => {
       },
     ]);
   });
+
+  test("keeps menu open when checking options", async () => {
+    const wrapper = createWrapper({
+      props: {
+        listVariant: "checkbox",
+        options: [
+          {
+            value: "code_1",
+            label: "Code",
+            selected: true,
+          },
+          {
+            value: "issues_1",
+            label: "Issues",
+            selected: false,
+          },
+          {
+            value: "pull_requests_1",
+            label: "Pull requests",
+            selected: false,
+          },
+        ],
+      },
+    });
+
+    expect(wrapper.find('[data-testid="menu-option-list"]').isVisible()).toBe(
+      false,
+    );
+
+    await wrapper.find('[data-testid="menu-button"]').trigger("click");
+    expect(wrapper.find('[data-testid="menu-option-list"]').isVisible()).toBe(
+      true,
+    );
+
+    const items = wrapper.findAll('[data-testid^="menu-option-button-"]');
+    expect(items.length).toBe(3);
+
+    await items[0].find("input").trigger("click");
+    expect(wrapper.find('[data-testid="menu-option-list"]').isVisible()).toBe(
+      true,
+    );
+
+    await items[0].trigger("click");
+    expect(wrapper.find('[data-testid="menu-option-list"]').isVisible()).toBe(
+      false,
+    );
+  });
 });