vueless 1.2.8 → 1.2.10-beta.0

package/ui.form-listbox/storybook/stories.ts

@@ -8,10 +8,21 @@ import {
 
 import UListbox from "../UListbox.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import UIcon from "../../ui.image-icon/UIcon.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 { Option, 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 DefaultUListboxArgs extends Props {
   slotTemplate?: string;
 }
@@ -47,7 +58,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<DefaultUListboxArgs> = (args: DefaultUListboxArgs) => ({
-  components: { UListbox },
+  components: { UListbox, ULoader, UText, URow },
   setup: () => ({ args, slots: getSlotNames(UListbox.__name) }),
   template: `
     <UListbox
@@ -82,6 +93,9 @@ Default.args = {};
 export const Searchable = DefaultTemplate.bind({});
 Searchable.args = { searchable: true };
 
+export const SearchModelValue = DefaultTemplate.bind({});
+SearchModelValue.args = { search: "New York", searchable: true };
+
 export const Multiple = DefaultTemplate.bind({});
 Multiple.args = { multiple: true, modelValue: [] };
 
@@ -205,3 +219,176 @@ OptionSettings.parameters = {
     },
   },
 };
+
+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<DefaultUListboxArgs> = (args) => ({
+  components: { UListbox, URow, UCol, UAvatar, UIcon, UBadge, UText },
+  setup: () => ({ args, johnDoe, emilyDavis, alexJohnson, patMorgan }),
+  template: `
+    <URow gap="lg">
+      <UListbox
+        v-model="args.beforeOptionModel"
+        class="static"
+        :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>
+      </UListbox>
+
+      <UListbox
+        v-model="args.optionModel"
+        class="static"
+        :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>
+      </UListbox>
+
+      <UListbox
+        v-model="args.afterOptionModel"
+        class="static"
+        :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>
+      </UListbox>
+    </URow>
+  `,
+});
+OptionSlots.parameters = {
+  docs: {
+    story: {
+      height: "300px",
+    },
+  },
+};

package/ui.form-listbox/tests/UListbox.test.ts

@@ -417,6 +417,41 @@ describe("UListbox.vue", () => {
   });
 
   describe("Functionality", () => {
+    it("Search v-model – filters options using external search prop", async () => {
+      const targetValue = "Option 2";
+
+      const component = mount(UListbox, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+          search: targetValue,
+        },
+      });
+
+      await flushPromises();
+
+      const options = component.findAll('[vl-key="option"]');
+
+      expect(options).toHaveLength(1);
+      expect(options[0].text()).toBe(targetValue);
+    });
+
+    it("Search v-model – emits update:search on input change", async () => {
+      const component = mount(UListbox, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+      });
+
+      const searchInput = component.getComponent(UInputSearch);
+
+      await searchInput.setValue("Option 3");
+
+      expect(component.emitted("update:search")).toBeTruthy();
+      expect(component.emitted("update:search")![0][0]).toBe("Option 3");
+    });
+
     it("Search – filters options based on search input", async () => {
       const targetValue = "Option 1";
       const filteredOptionsAmount = 1;
@@ -431,6 +466,7 @@ describe("UListbox.vue", () => {
       const searchInput = component.getComponent(UInputSearch);
 
       await searchInput.setValue(targetValue);
+      await flushPromises();
 
       const options = component.findAll('[vl-key="option"]');
 

package/ui.form-listbox/types.ts

@@ -24,6 +24,11 @@ export interface Props {
    */
   modelValue?: string | number | UnknownObject | (string | number | UnknownObject)[];
 
+  /**
+   * Search input model value.
+   */
+  search?: string;
+
   /**
    * List options.
    */

package/ui.form-radio/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
   radio: {
     base: `
       bg-default cursor-pointer transition
-      border border-default rounded-full outline-transparent
+      border border-solid border-default rounded-full outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted hover:checked:border-{color}
       active:border-{color} active:bg-{color}/15

package/ui.form-radio/tests/URadio.test.ts

@@ -183,7 +183,7 @@ describe("URadio.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(customLabelContent);
     });
@@ -201,7 +201,7 @@ describe("URadio.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });

package/ui.form-radio-group/tests/URadioGroup.test.ts

@@ -211,7 +211,7 @@ describe("URadioGroup.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(customLabelContent);
     });
@@ -230,7 +230,7 @@ describe("URadioGroup.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });

package/ui.form-select/USelect.vue

@@ -57,6 +57,12 @@ const emit = defineEmits([
    */
   "searchChange",
 
+  /**
+   * Triggers when the search v-model updates.
+   * @property {string} query
+   */
+  "update:search",
+
   /**
    * Triggers when the option from multiple select is removed.
    * @property {string} option
@@ -129,7 +135,7 @@ const dropdownValue = computed({
     emit("update:modelValue", value);
     emit("change", { value, options: props.options });
 
-    if (!props.multiple) deactivate();
+    if (!props.multiple && props.closeOnSelect) deactivate();
   },
 });
 
@@ -181,6 +187,11 @@ const selectedOptionsLabel = computed(() => {
   };
 });
 
+const dropdownSearch = computed({
+  get: () => props.search ?? "",
+  set: (value: string) => emit("update:search", value),
+});
+
 const hiddenSelectedOptionsCount = computed(() => {
   return selectedOptions.value.hidden.length;
 });
@@ -255,6 +266,7 @@ function deactivate() {
   wrapperRef.value?.blur();
 
   isOpen.value = false;
+  dropdownSearch.value = "";
 
   nextTick(() => emit("close", localValue.value, elementId));
 }
@@ -472,7 +484,6 @@ const {
 <template>
   <ULabel
     ref="labelComponent"
-    :for="elementId"
     :size="size"
     :label="label"
     :error="error"
@@ -797,6 +808,7 @@ const {
         v-if="isOpen"
         ref="listbox"
         v-model="dropdownValue as string | number"
+        v-model:search="dropdownSearch"
         :searchable="searchable"
         :options-limit="optionsLimit"
         :multiple="multiple"
@@ -818,6 +830,7 @@ const {
         @blur="onListboxBlur"
         @search-blur="onListboxSearchBlur"
         @search-change="onSearchChange"
+        @update:search="(value) => emit('update:search', value)"
       >
         <template #before-option="{ option, index }">
           <!--
@@ -845,6 +858,11 @@ const {
           -->
           <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

package/ui.form-select/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex flex-row-reverse justify-between w-full min-h-full box-border relative
-      rounded-medium border border-default bg-default outline-transparent
+      rounded-medium border border-solid border-default bg-default outline-transparent
       hover:border-lifted hover:transition hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,
@@ -152,6 +152,7 @@ export default /*tw*/ {
     searchable: false,
     clearable: true,
     addOption: false,
+    closeOnSelect: true,
     /* icons */
     toggleIcon: "keyboard_arrow_down",
     clearIcon: "close_small",

package/ui.form-select/storybook/stories.ts

@@ -15,6 +15,7 @@ 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 UText from "../../ui.text-block/UText.vue";
+import ULoader from "../../ui.loader/ULoader.vue";
 
 import johnDoe from "./assets/images/john-doe.png";
 import emilyDavis from "./assets/images/emily-davis.png";
@@ -59,7 +60,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<USelectArgs> = (args: USelectArgs) => ({
-  components: { USelect, UIcon, ULink, UText },
+  components: { USelect, UIcon, ULink, UText, ULoader, URow },
   setup: () => ({ args, slots: getSlotNames(USelect.__name) }),
   template: `
     <USelect
@@ -148,6 +149,19 @@ NotClearable.args = { clearable: false };
 export const Searchable = DefaultTemplate.bind({});
 Searchable.args = { searchable: true };
 
+export const SearchModelValue = DefaultTemplate.bind({});
+SearchModelValue.args = { search: "New York", searchable: true };
+SearchModelValue.parameters = {
+  docs: {
+    story: {
+      height: "350px",
+    },
+  },
+};
+
+export const NoCloseOnSelect = DefaultTemplate.bind({});
+NoCloseOnSelect.args = { modelValue: 3, closeOnSelect: false };
+
 export const Readonly = DefaultTemplate.bind({});
 Readonly.args = { readonly: true, modelValue: "1", clearable: false };
 
@@ -212,9 +226,9 @@ GroupValue.parameters = {
   },
 };
 
-export const OptionsLimit2 = DefaultTemplate.bind({});
-OptionsLimit2.args = { optionsLimit: 2 };
-OptionsLimit2.parameters = {
+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.",
@@ -530,6 +544,19 @@ SelectedCounterSlot.args = {
   `,
 };
 
+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<USelectArgs> = (args) => ({
   components: { USelect, URow, UCol, UAvatar, UIcon, UBadge, UText },
   setup: () => ({ args, johnDoe, emilyDavis, alexJohnson, patMorgan }),

package/ui.form-select/tests/USelect.test.ts

@@ -255,6 +255,25 @@ describe("USelect.vue", () => {
       expect(component.getComponent(UListbox).props("searchable")).toBe(true);
     });
 
+    it("Search v-model – passes search to UListbox and filters", async () => {
+      const component = mount(USelect, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+          search: "Option 2",
+        },
+      });
+
+      await component.get("[role='combobox']").trigger("focus");
+      await flushPromises();
+
+      const listbox = component.getComponent(UListbox);
+      const options = listbox.findAll("[vl-child-key='option']");
+
+      expect(options).toHaveLength(1);
+      expect(options[0].text()).toBe("Option 2");
+    });
+
     it("Clearable – renders clear icon when true", async () => {
       const component = mount(USelect, {
         props: {
@@ -356,6 +375,24 @@ describe("USelect.vue", () => {
       expect(component.getComponent(UListbox).props("valueKey")).toBe(valueKey);
     });
 
+    it("Keeps dropdown open when closeOnSelect is false", async () => {
+      const component = mount(USelect, {
+        props: {
+          modelValue: "",
+          options: defaultOptions,
+          closeOnSelect: false,
+        },
+      });
+
+      await component.get("[role='combobox']").trigger("focus");
+
+      const firstOption = component.find("[vl-child-key='option']");
+
+      await firstOption.trigger("click");
+
+      expect(component.findComponent(UListbox).exists()).toBe(true);
+    });
+
     it("Options Limit – passes optionsLimit prop to UListbox", async () => {
       const optionsLimit = 5;
 
@@ -659,6 +696,93 @@ describe("USelect.vue", () => {
 
       expect(component.text()).toContain(slotContent);
     });
+
+    it("Before Option – renders custom content from before-option slot", async () => {
+      const slotContent = "Before Option";
+      const slotClass = "before-option-content";
+
+      const component = mount(USelect, {
+        props: {
+          options: defaultOptions,
+        },
+        slots: {
+          "before-option": `<span class='${slotClass}'>${slotContent}</span>`,
+        },
+      });
+
+      await component.get("[role='combobox']").trigger("focus");
+
+      const listbox = component.findComponent(UListbox);
+      const beforeOptionSlot = listbox.find(`.${slotClass}`);
+
+      expect(beforeOptionSlot.exists()).toBe(true);
+      expect(beforeOptionSlot.text()).toBe(slotContent);
+    });
+
+    it("Option – renders custom content from option slot", async () => {
+      const slotClass = "custom-option-content";
+
+      const component = mount(USelect, {
+        props: {
+          options: defaultOptions,
+        },
+        slots: {
+          option: `<span class='${slotClass}'>Custom {{ params.option.label }}</span>`,
+        },
+      });
+
+      await component.get("[role='combobox']").trigger("focus");
+
+      const listbox = component.findComponent(UListbox);
+      const customOptionSlot = listbox.find(`.${slotClass}`);
+
+      expect(customOptionSlot.exists()).toBe(true);
+      expect(customOptionSlot.text()).toBe("Custom Option 1");
+    });
+
+    it("After Option – renders custom content from after-option slot", async () => {
+      const slotContent = "After Option";
+      const slotClass = "after-option-content";
+
+      const component = mount(USelect, {
+        props: {
+          options: defaultOptions,
+        },
+        slots: {
+          "after-option": `<span class='${slotClass}'>${slotContent}</span>`,
+        },
+      });
+
+      await component.get("[role='combobox']").trigger("focus");
+
+      const listbox = component.findComponent(UListbox);
+      const afterOptionSlot = listbox.find(`.${slotClass}`);
+
+      expect(afterOptionSlot.exists()).toBe(true);
+      expect(afterOptionSlot.text()).toBe(slotContent);
+    });
+
+    it("Empty – renders custom content from empty slot", async () => {
+      const slotContent = "No options available";
+      const slotClass = "custom-empty";
+
+      const component = mount(USelect, {
+        props: {
+          options: [],
+        },
+        slots: {
+          empty: `<span class='${slotClass}'>${slotContent}</span>`,
+        },
+      });
+
+      await component.get("[role='combobox']").trigger("focus");
+
+      const listbox = component.findComponent(UListbox);
+      const emptySlot = listbox.find(`.${slotClass}`);
+
+      expect(emptySlot.exists()).toBe(true);
+      expect(emptySlot.text()).toBe(slotContent);
+    });
   });
 
   describe("Events", () => {
@@ -728,6 +852,25 @@ describe("USelect.vue", () => {
       vi.useRealTimers();
     });
 
+    it("Update:search – re-emits from UListbox", async () => {
+      const component = mount(USelect, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+      });
+
+      await component.get("[role='combobox']").trigger("focus");
+
+      const input = component.get("input");
+
+      await input.setValue("Option 3");
+      await flushPromises();
+
+      expect(component.emitted("update:search")).toBeTruthy();
+      expect(component.emitted("update:search")![0][0]).toBe("Option 3");
+    });
+
     it("Clear – emits when clear icon is clicked", async () => {
       const component = mount(USelect, {
         props: {

package/ui.form-select/types.ts

@@ -51,6 +51,16 @@ export interface Props {
    */
   debounce?: number | string;
 
+  /**
+   * Search input model value for the dropdown list.
+   */
+  search?: string;
+
+  /**
+   * Close dropdown on option select.
+   */
+  closeOnSelect?: boolean;
+
   /**
    * Left icon name.
    */

package/ui.form-textarea/config.ts

@@ -15,7 +15,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex px-3 py-2 gap-3 w-full bg-default transition
-      rounded-medium border border-default outline-transparent
+      rounded-medium border border-solid border-default outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,