vueless 1.2.8-beta.3 → 1.2.8-beta.4

package/ui.dropdown-button/UDropdownButton.vue

@@ -55,6 +55,12 @@ const emit = defineEmits([
    * @property {string} query
    */
   "searchChange",
+
+  /**
+   * Triggers when the search v-model updates.
+   * @property {string} query
+   */
+  "update:search",
 ]);
 
 provide("hideDropdownOptions", hideOptions);
@@ -78,6 +84,11 @@ const dropdownValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
+const dropdownSearch = computed({
+  get: () => props.search ?? "",
+  set: (value: string) => emit("update:search", value),
+});
+
 const selectedOptions = computed(() => {
   if (props.multiple) {
     return props.options.filter((option) => {
@@ -139,7 +150,7 @@ function getFullOptionLabels(value: Option | Option[]) {
 function onClickOption(option: Option) {
   emit("clickOption", option);
 
-  if (!props.multiple) hideOptions();
+  if (!props.multiple && props.closeOnSelect) hideOptions();
 }
 
 function onClickButton() {
@@ -245,16 +256,54 @@ const { getDataTest, config, dropdownButtonAttrs, listboxAttrs, toggleIconAttrs,
       v-if="isShownOptions"
       ref="dropdown-list"
       v-model="dropdownValue"
+      v-model:search="dropdownSearch"
       :searchable="searchable"
       :multiple="multiple"
       :color="color"
       :options="options"
+      :options-limit="optionsLimit"
+      :visible-options="visibleOptions"
       :label-key="labelKey"
       :value-key="valueKey"
+      :group-label-key="groupLabelKey"
+      :group-value-key="groupValueKey"
       v-bind="listboxAttrs"
       :data-test="getDataTest('list')"
       @click-option="onClickOption"
       @search-change="onSearchChange"
-    />
+      @update:search="(value) => emit('update:search', value)"
+    >
+      <template #before-option="{ option, index }">
+        <!--
+            @slot Use it to add something before option.
+            @binding {object} option
+            @binding {number} index
+          -->
+        <slot name="before-option" :option="option" :index="index" />
+      </template>
+
+      <template #option="{ option, index }">
+        <!--
+            @slot Use it to customize the option.
+            @binding {object} option
+            @binding {number} index
+          -->
+        <slot name="option" :option="option" :index="index" />
+      </template>
+
+      <template #after-option="{ option, index }">
+        <!--
+            @slot Use it to add something after option.
+            @binding {object} option
+            @binding {number} index
+          -->
+        <slot name="after-option" :option="option" :index="index" />
+      </template>
+
+      <template #empty>
+        <!-- @slot Use it to add something instead of empty state. -->
+        <slot name="empty" />
+      </template>
+    </UListbox>
   </div>
 </template>

package/ui.dropdown-button/config.ts

@@ -51,15 +51,19 @@ export default /*tw*/ {
     variant: "solid",
     labelKey: "label",
     valueKey: "id",
+    groupLabelKey: "label",
     yPosition: "bottom",
     xPosition: "left",
+    optionsLimit: 0,
+    visibleOptions: 8,
+    labelDisplayCount: 2,
     searchable: false,
     round: false,
     block: false,
     square: false,
     disabled: false,
     multiple: false,
-    labelDisplayCount: 2,
+    closeOnSelect: true,
     /* icons */
     toggleIcon: "keyboard_arrow_down",
   },

package/ui.dropdown-button/storybook/stories.ts

@@ -12,10 +12,18 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import ULink from "../../ui.button-link/ULink.vue";
 import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import UText from "../../ui.text-block/UText.vue";
+import ULoader from "../../ui.loader/ULoader.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
 
+import johnDoe from "../../ui.form-select/storybook/assets/images/john-doe.png";
+import emilyDavis from "../../ui.form-select/storybook/assets/images/emily-davis.png";
+import alexJohnson from "../../ui.form-select/storybook/assets/images/alex-johnson.png";
+import patMorgan from "../../ui.form-select/storybook/assets/images/pat-morgan.png";
+
 interface DefaultUDropdownButtonArgs extends Props {
   slotTemplate?: string;
 }
@@ -54,7 +62,7 @@ export default {
 const DefaultTemplate: StoryFn<DefaultUDropdownButtonArgs> = (
   args: DefaultUDropdownButtonArgs,
 ) => ({
-  components: { UDropdownButton, UIcon, ULink, UAvatar },
+  components: { UDropdownButton, UIcon, ULink, UAvatar, ULoader, URow, UText },
   setup: () => ({ args, slots: getSlotNames(UDropdownButton.__name) }),
   template: `
     <UDropdownButton v-bind="args">
@@ -111,6 +119,35 @@ const MultiEnumTemplate: StoryFn<EnumUDropdownButtonArgs> = (
   `,
 });
 
+const GroupValuesTemplate: StoryFn<DefaultUDropdownButtonArgs> = (
+  args: DefaultUDropdownButtonArgs,
+) => ({
+  components: { UDropdownButton },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `
+    <UDropdownButton
+      v-bind="args"
+      v-model="args.modelValue"
+      label="Single"
+      :config="{ listbox: 'min-w-[200px]' }"
+      class="max-w-96 mr-20"
+    />
+
+    <UDropdownButton
+      v-bind="args"
+      v-model="args.modelValueMultiple"
+      label="Multiple"
+      multiple
+      :config="{ listbox: 'min-w-[200px]' }"
+      class="mt-5 max-w-96"
+    />
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 Default.parameters = {
@@ -121,6 +158,9 @@ Default.parameters = {
   },
 };
 
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
 export const Searchable = DefaultTemplate.bind({});
 Searchable.args = { searchable: true };
 Searchable.parameters = {
@@ -131,6 +171,27 @@ Searchable.parameters = {
   },
 };
 
+export const SearchModelValue = DefaultTemplate.bind({});
+SearchModelValue.args = { searchable: true, search: "Copy" };
+SearchModelValue.parameters = {
+  docs: {
+    story: {
+      height: "250px",
+    },
+  },
+};
+
+export const NoCloseOnSelect = SelectableTemplate.bind({});
+NoCloseOnSelect.args = {
+  modelValue: "pending",
+  options: [
+    { label: "Active", id: "active" },
+    { label: "Pending", id: "pending" },
+    { label: "Archived", id: "archived" },
+  ],
+  closeOnSelect: false,
+};
+
 export const OptionSelection = SelectableTemplate.bind({});
 OptionSelection.args = {
   label: "Select status",
@@ -176,8 +237,59 @@ ListboxYPosition.parameters = {
   storyClasses: "h-[350px] flex items-center px-6 pt-8 pb-12",
 };
 
-export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true };
+export const GroupValue = GroupValuesTemplate.bind({});
+GroupValue.args = {
+  modelValue: "",
+  groupValueKey: "libs",
+  groupLabelKey: "language",
+  labelKey: "name",
+  valueKey: "name",
+  options: [
+    {
+      language: "Javascript",
+      libs: [{ name: "Vue.js" }, { name: "Adonis" }],
+    },
+    {
+      language: "Ruby",
+      libs: [
+        { name: "Frameworks", isSubGroup: true, level: 2 },
+        { name: "Rails", level: 3 },
+        { name: "Sinatra", level: 3 },
+      ],
+    },
+    {
+      language: "Other",
+      libs: [{ name: "Laravel" }, { name: "Phoenix" }],
+    },
+  ],
+};
+GroupValue.parameters = {
+  docs: {
+    story: {
+      height: "400px",
+    },
+  },
+};
+
+export const OptionsLimit = DefaultTemplate.bind({});
+OptionsLimit.args = { optionsLimit: 2 };
+OptionsLimit.parameters = {
+  docs: {
+    description: {
+      story: "`optionsLimit` prop controls the number of options displayed in the dropdown.",
+    },
+  },
+};
+
+export const VisibleOptions = DefaultTemplate.bind({});
+VisibleOptions.args = { visibleOptions: 2 };
+VisibleOptions.parameters = {
+  docs: {
+    description: {
+      story: "`visibleOptions` prop controls the number of options you can see without a scroll.",
+    },
+  },
+};
 
 export const WithoutToggleIcon = Default.bind({});
 WithoutToggleIcon.args = { toggleIcon: false };
@@ -228,3 +340,176 @@ ToggleSlot.args = {
     </template>
   `,
 };
+
+export const EmptySlot = DefaultTemplate.bind({});
+EmptySlot.args = {
+  options: [],
+  slotTemplate: `
+    <template #empty>
+      <URow align="center">
+        <ULoader loading size="sm" />
+        <UText label="Loading, this may take a while..." />
+      </URow>
+    </template>
+  `,
+};
+
+export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
+  components: { UDropdownButton, URow, UCol, UAvatar, UIcon, UBadge, UText },
+  setup: () => ({ args, johnDoe, emilyDavis, alexJohnson, patMorgan }),
+  template: `
+    <URow>
+      <UDropdownButton
+        v-model="args.beforeOptionModel"
+        label="Before option slot"
+        :options="[
+          {
+            label: 'John Doe',
+            id: '1',
+            role: 'Developer',
+            avatar: johnDoe,
+            status: 'online',
+            statusColor: 'success',
+          },
+          {
+            label: 'Jane Smith',
+            id: '2',
+            role: 'Designer',
+            avatar: emilyDavis,
+            status: 'away',
+            statusColor: 'warning',
+          },
+          {
+            label: 'Mike Johnson',
+            id: '3',
+            role: 'Product Manager',
+            avatar: alexJohnson,
+            status: 'offline',
+            statusColor: 'grayscale',
+          },
+          {
+            label: 'Sarah Wilson',
+            id: '4',
+            role: 'QA Engineer',
+            avatar: patMorgan,
+            status: 'online',
+            statusColor: 'success',
+          },
+        ]"
+      >
+        <template #before-option="{ option }">
+          <UAvatar :src="option.avatar" size="sm" />
+        </template>
+      </UDropdownButton>
+
+      <UDropdownButton
+        v-model="args.optionModel"
+        label="Option slot"
+        :options="[
+          {
+            label: 'John Doe',
+            id: '1',
+            role: 'Developer',
+            avatar: johnDoe,
+            status: 'online',
+            statusColor: 'success',
+          },
+          {
+            label: 'Jane Smith',
+            id: '2',
+            role: 'Designer',
+            avatar: emilyDavis,
+            status: 'away',
+            statusColor: 'warning',
+          },
+          {
+            label: 'Mike Johnson',
+            id: '3',
+            role: 'Product Manager',
+            avatar: alexJohnson,
+            status: 'offline',
+            statusColor: 'grayscale',
+          },
+          {
+            label: 'Sarah Wilson',
+            id: '4',
+            role: 'QA Engineer',
+            avatar: patMorgan,
+            status: 'online',
+            statusColor: 'success',
+          },
+        ]"
+      >
+        <template #option="{ option }">
+          <URow align="center" gap="xs">
+            <UCol gap="none">
+              <UText size="sm">{{ option.label }}</UText>
+              <UText variant="lifted" size="xs">{{ option.role }}</UText>
+            </UCol>
+            <UBadge
+              :label="option.status"
+              :color="option.statusColor"
+              size="sm"
+              variant="subtle"
+            />
+          </URow>
+        </template>
+      </UDropdownButton>
+
+      <UDropdownButton
+        v-model="args.afterOptionModel"
+        label="After option slot"
+        :options="[
+          {
+            label: 'John Doe',
+            id: '1',
+            role: 'Developer',
+            avatar: johnDoe,
+            status: 'online',
+            statusColor: 'success',
+          },
+          {
+            label: 'Jane Smith',
+            id: '2',
+            role: 'Designer',
+            avatar: emilyDavis,
+            status: 'away',
+            statusColor: 'warning',
+          },
+          {
+            label: 'Mike Johnson',
+            id: '3',
+            role: 'Product Manager',
+            avatar: alexJohnson,
+            status: 'offline',
+            statusColor: 'grayscale',
+          },
+          {
+            label: 'Sarah Wilson',
+            id: '4',
+            role: 'QA Engineer',
+            avatar: patMorgan,
+            status: 'online',
+            statusColor: 'success',
+          },
+        ]"
+      >
+        <template #after-option="{ option }">
+          <UBadge
+            :label="option.status"
+            :color="option.statusColor"
+            size="sm"
+            variant="subtle"
+          />
+        </template>
+      </UDropdownButton>
+    </URow>
+  `,
+});
+OptionSlots.parameters = {
+  docs: {
+    story: {
+      height: "300px",
+    },
+  },
+};

package/ui.dropdown-button/tests/UDropdownButton.test.ts

@@ -300,6 +300,97 @@ describe("UDropdownButton.vue", () => {
 
       expect(component.findComponent(UButton).attributes("data-test")).toBe(dataTest);
     });
+
+    // OptionsLimit prop
+    it("passes optionsLimit prop to UListbox component", async () => {
+      const optionsLimit = 2;
+
+      const component = mount(UDropdownButton, {
+        props: {
+          optionsLimit,
+          options: defaultOptions,
+        },
+      });
+
+      await component.findComponent(UButton).trigger("click");
+
+      expect(component.findComponent(UListbox).props("optionsLimit")).toBe(optionsLimit);
+    });
+
+    it("Search v-model – passes search to UListbox and filters", async () => {
+      const component = mount(UDropdownButton, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+          search: "Option 2",
+        },
+      });
+
+      await component.findComponent(UButton).trigger("click");
+
+      const listbox = component.getComponent(UListbox);
+      const options = listbox.findAll("[vl-child-key='option']");
+
+      expect(options).toHaveLength(1);
+      expect(options[0].text()).toBe("Option 2");
+    });
+
+    // VisibleOptions prop
+    it("passes visibleOptions prop to UListbox component", async () => {
+      const visibleOptions = 5;
+
+      const component = mount(UDropdownButton, {
+        props: {
+          visibleOptions,
+          options: defaultOptions,
+        },
+      });
+
+      await component.findComponent(UButton).trigger("click");
+
+      expect(component.findComponent(UListbox).props("visibleOptions")).toBe(visibleOptions);
+    });
+
+    // GroupLabelKey prop
+    it("passes groupLabelKey prop to UListbox component", async () => {
+      const groupLabelKey = "category";
+      const groupedOptions = [
+        { groupLabel: "Group 1", category: "group1" },
+        { label: "Option 1", id: "option1", category: "group1" },
+        { groupLabel: "Group 2", category: "group2" },
+        { label: "Option 2", id: "option2", category: "group2" },
+      ];
+
+      const component = mount(UDropdownButton, {
+        props: {
+          groupLabelKey,
+          options: groupedOptions,
+        },
+      });
+
+      await component.findComponent(UButton).trigger("click");
+
+      expect(component.findComponent(UListbox).props("groupLabelKey")).toBe(groupLabelKey);
+    });
+
+    // CloseOnSelect prop
+    it("keeps dropdown open when closeOnSelect is false", async () => {
+      const component = mount(UDropdownButton, {
+        props: {
+          options: defaultOptions,
+          closeOnSelect: false,
+        },
+      });
+
+      await component.findComponent(UButton).trigger("click");
+      expect(component.findComponent(UListbox).exists()).toBe(true);
+
+      const listbox = component.findComponent(UListbox);
+
+      listbox.vm.$emit("update:modelValue", 2);
+
+      expect(component.findComponent(UListbox).exists()).toBe(true);
+    });
   });
 
   // Slots tests
@@ -361,6 +452,105 @@ describe("UDropdownButton.vue", () => {
       expect(component.find(`.${slotClass}`).exists()).toBe(true);
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
+
+    // Before-option slot
+    it("renders content from before-option slot", async () => {
+      const label = "Dropdown Button";
+      const slotText = "Before";
+      const slotClass = "before-option-content";
+
+      const component = mount(UDropdownButton, {
+        props: {
+          label,
+          options: defaultOptions,
+        },
+        slots: {
+          "before-option": `<span class='${slotClass}'>${slotText}</span>`,
+        },
+      });
+
+      await component.findComponent(UButton).trigger("click");
+
+      const listbox = component.findComponent(UListbox);
+      const beforeOptionSlot = listbox.find(`.${slotClass}`);
+
+      expect(beforeOptionSlot.exists()).toBe(true);
+      expect(beforeOptionSlot.text()).toBe(slotText);
+    });
+
+    // Option slot
+    it("renders custom content from option slot", async () => {
+      const label = "Dropdown Button";
+      const slotClass = "custom-option-content";
+
+      const component = mount(UDropdownButton, {
+        props: {
+          label,
+          options: defaultOptions,
+        },
+        slots: {
+          option: `<span class='${slotClass}'>Custom {{ params.option.label }}</span>`,
+        },
+      });
+
+      await component.findComponent(UButton).trigger("click");
+
+      const listbox = component.findComponent(UListbox);
+      const customOptionSlot = listbox.find(`.${slotClass}`);
+
+      expect(customOptionSlot.exists()).toBe(true);
+      expect(customOptionSlot.text()).toBe("Custom Option 1");
+    });
+
+    // After-option slot
+    it("renders content from after-option slot", async () => {
+      const label = "Dropdown Button";
+      const slotText = "After";
+      const slotClass = "after-option-content";
+
+      const component = mount(UDropdownButton, {
+        props: {
+          label,
+          options: defaultOptions,
+        },
+        slots: {
+          "after-option": `<span class='${slotClass}'>${slotText}</span>`,
+        },
+      });
+
+      await component.findComponent(UButton).trigger("click");
+
+      const listbox = component.findComponent(UListbox);
+      const afterOptionSlot = listbox.find(`.${slotClass}`);
+
+      expect(afterOptionSlot.exists()).toBe(true);
+      expect(afterOptionSlot.text()).toBe(slotText);
+    });
+
+    // Empty slot
+    it("renders custom content from empty slot", async () => {
+      const label = "Dropdown Button";
+      const slotContent = "No options available";
+      const slotClass = "custom-empty";
+
+      const component = mount(UDropdownButton, {
+        props: {
+          label,
+          options: [],
+        },
+        slots: {
+          empty: `<span class='${slotClass}'>${slotContent}</span>`,
+        },
+      });
+
+      await component.findComponent(UButton).trigger("click");
+
+      const listbox = component.findComponent(UListbox);
+      const emptySlot = listbox.find(`.${slotClass}`);
+
+      expect(emptySlot.exists()).toBe(true);
+      expect(emptySlot.text()).toBe(slotContent);
+    });
   });
 
   // Events tests

package/ui.dropdown-button/types.ts

@@ -36,6 +36,26 @@ export interface Props {
    */
   valueKey?: string;
 
+  /**
+   * Set a name of the property containing the group label.
+   */
+  groupLabelKey?: string;
+
+  /**
+   * Set a name of the property containing the group values.
+   */
+  groupValueKey?: string;
+
+  /**
+   * Number of options displayed in the dropdown.
+   */
+  optionsLimit?: number;
+
+  /**
+   * Number of options you can see without a scroll.
+   */
+  visibleOptions?: number;
+
   /**
    * Button variant.
    */
@@ -70,6 +90,16 @@ export interface Props {
    */
   searchable?: boolean;
 
+  /**
+   * Search input model value for the dropdown list.
+   */
+  search?: string;
+
+  /**
+   * Close dropdown on option select.
+   */
+  closeOnSelect?: boolean;
+
   /**
    * Allows multiple selection.
    */