vueless 1.2.8 → 1.2.10-beta.0

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

@@ -8,14 +8,22 @@ import {
 
 import UDropdownLink from "../../ui.dropdown-link/UDropdownLink.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UBadge from "../../ui.text-badge/UBadge.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 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 DefaultUDropdownLinkArgs extends Props {
   slotTemplate?: string;
 }
@@ -51,7 +59,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<DefaultUDropdownLinkArgs> = (args: DefaultUDropdownLinkArgs) => ({
-  components: { UDropdownLink, UIcon, ULink, UBadge, UAvatar },
+  components: { UDropdownLink, UIcon, ULink, UBadge, UAvatar, ULoader, URow, UText },
   setup: () => ({ args, slots: getSlotNames(UDropdownLink.__name) }),
   template: `
     <UDropdownLink v-bind="args">
@@ -87,6 +95,35 @@ const EnumTemplate: StoryFn<EnumUDropdownLinkArgs> = (
   `,
 });
 
+const GroupValuesTemplate: StoryFn<DefaultUDropdownLinkArgs> = (
+  args: DefaultUDropdownLinkArgs,
+) => ({
+  components: { UDropdownLink },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `
+    <UDropdownLink
+      v-bind="args"
+      v-model="args.modelValue"
+      label="Single"
+      :config="{ listbox: 'min-w-[200px]' }"
+      class="max-w-96 mr-20"
+    />
+
+    <UDropdownLink
+      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 = {
@@ -97,6 +134,9 @@ Default.parameters = {
   },
 };
 
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
 export const Searchable = DefaultTemplate.bind({});
 Searchable.args = { searchable: true };
 Searchable.parameters = {
@@ -107,6 +147,19 @@ Searchable.parameters = {
   },
 };
 
+export const SearchModelValue = DefaultTemplate.bind({});
+SearchModelValue.args = { searchable: true, search: "Settings" };
+SearchModelValue.parameters = {
+  docs: {
+    story: {
+      height: "250px",
+    },
+  },
+};
+
+export const NoCloseOnSelect = SelectableTemplate.bind({});
+NoCloseOnSelect.args = { modelValue: "logout", closeOnSelect: false };
+
 export const OptionSelection = SelectableTemplate.bind({});
 OptionSelection.args = { modelValue: "profile" };
 
@@ -132,6 +185,60 @@ ListboxYPosition.parameters = {
   storyClasses: "h-[350px] flex items-center px-6 pt-8 pb-12",
 };
 
+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 Color = EnumTemplate.bind({});
 Color.args = { enum: "color", label: "{enumValue}" };
 
@@ -149,9 +256,6 @@ export const UnderlineVariants: StoryFn<EnumUDropdownLinkArgs> = (args: EnumUDro
   `,
 });
 
-export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true };
-
 export const WithoutToggleIcon = Default.bind({});
 WithoutToggleIcon.args = { toggleIcon: false };
 
@@ -202,3 +306,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<DefaultUDropdownLinkArgs> = (args) => ({
+  components: { UDropdownLink, URow, UCol, UAvatar, UIcon, UBadge, UText },
+  setup: () => ({ args, johnDoe, emilyDavis, alexJohnson, patMorgan }),
+  template: `
+    <URow>
+      <UDropdownLink
+        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>
+      </UDropdownLink>
+
+      <UDropdownLink
+        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>
+      </UDropdownLink>
+
+      <UDropdownLink
+        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>
+      </UDropdownLink>
+    </URow>
+  `,
+});
+OptionSlots.parameters = {
+  docs: {
+    story: {
+      height: "300px",
+    },
+  },
+};

package/ui.dropdown-link/tests/UDropdownLink.test.ts

@@ -268,6 +268,101 @@ describe("UDropdownLink.vue", () => {
 
       expect(component.findComponent(ULink).attributes("data-test")).toBe(dataTest);
     });
+
+    // OptionsLimit prop
+    it("passes optionsLimit prop to UListbox component", async () => {
+      const optionsLimit = 2;
+
+      const component = mount(UDropdownLink, {
+        props: {
+          optionsLimit,
+          options: defaultOptions,
+        },
+      });
+
+      await component.findComponent(ULink).trigger("click");
+
+      expect(component.findComponent(UListbox).props("optionsLimit")).toBe(optionsLimit);
+    });
+
+    // VisibleOptions prop
+    it("passes visibleOptions prop to UListbox component", async () => {
+      const visibleOptions = 5;
+
+      const component = mount(UDropdownLink, {
+        props: {
+          visibleOptions,
+          options: defaultOptions,
+        },
+      });
+
+      await component.findComponent(ULink).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(UDropdownLink, {
+        props: {
+          groupLabelKey,
+          options: groupedOptions,
+        },
+      });
+
+      await component.findComponent(ULink).trigger("click");
+
+      expect(component.findComponent(UListbox).props("groupLabelKey")).toBe(groupLabelKey);
+    });
+
+    it("Search v-model – passes search to UListbox and filters", async () => {
+      const component = mount(UDropdownLink, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+          search: "Option 3",
+        },
+      });
+
+      await component.findComponent(ULink).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 3");
+    });
+
+    // CloseOnSelect prop
+    it("keeps dropdown open when closeOnSelect is false", async () => {
+      const component = mount(UDropdownLink, {
+        props: {
+          options: defaultOptions,
+          closeOnSelect: false,
+        },
+      });
+
+      // Open the dropdown
+      await component.findComponent(ULink).trigger("click");
+      expect(component.findComponent(UListbox).exists()).toBe(true);
+
+      // Find the listbox component
+      const listbox = component.findComponent(UListbox);
+
+      // Simulate selecting an option by emitting update:modelValue from the listbox
+      listbox.vm.$emit("update:modelValue", 2);
+
+      // Dropdown should remain open
+      expect(component.findComponent(UListbox).exists()).toBe(true);
+    });
   });
 
   // Slots tests
@@ -329,6 +424,105 @@ describe("UDropdownLink.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 Link";
+      const slotText = "Before";
+      const slotClass = "before-option-content";
+
+      const component = mount(UDropdownLink, {
+        props: {
+          label,
+          options: defaultOptions,
+        },
+        slots: {
+          "before-option": `<span class='${slotClass}'>${slotText}</span>`,
+        },
+      });
+
+      await component.findComponent(ULink).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 Link";
+      const slotClass = "custom-option-content";
+
+      const component = mount(UDropdownLink, {
+        props: {
+          label,
+          options: defaultOptions,
+        },
+        slots: {
+          option: `<span class='${slotClass}'>Custom {{ params.option.label }}</span>`,
+        },
+      });
+
+      await component.findComponent(ULink).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 Link";
+      const slotText = "After";
+      const slotClass = "after-option-content";
+
+      const component = mount(UDropdownLink, {
+        props: {
+          label,
+          options: defaultOptions,
+        },
+        slots: {
+          "after-option": `<span class='${slotClass}'>${slotText}</span>`,
+        },
+      });
+
+      await component.findComponent(ULink).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 Link";
+      const slotContent = "No options available";
+      const slotClass = "custom-empty";
+
+      const component = mount(UDropdownLink, {
+        props: {
+          label,
+          options: [],
+        },
+        slots: {
+          empty: `<span class='${slotClass}'>${slotContent}</span>`,
+        },
+      });
+
+      await component.findComponent(ULink).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-link/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;
+
   /**
    * Link color.
    */
@@ -65,6 +85,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.
    */

package/ui.form-calendar/config.ts

@@ -1,5 +1,7 @@
 export default /*tw*/ {
-  wrapper: "p-3 w-[19rem] border border-default rounded-medium bg-default shadow-sm overflow-hidden focus:outline-hidden",
+  wrapper: `
+    p-3 w-[19rem] bg-default shadow-sm overflow-hidden focus:outline-hidden
+    border border-solid border-default rounded-medium`,
   navigation: "mb-2 pb-2 border-b border-muted flex items-center justify-between",
   viewSwitchButton: {
     base: "{UButton}",
@@ -54,7 +56,7 @@ export default /*tw*/ {
   timepicker: "mt-2 pl-1 pt-3 text-medium flex items-stretch justify-between gap-2 border-t border-muted",
   timepickerLabel: "w-full self-center",
   timepickerInputWrapper: `
-    flex items-center rounded-medium border border-default
+    flex items-center rounded-medium border border-solid border-default
     hover:focus-within:border-primary focus-within:border-primary
     focus-within:outline focus-within:outline-small focus-within:outline-primary
   `,

package/ui.form-checkbox/config.ts

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

package/ui.form-checkbox/tests/UCheckbox.test.ts

@@ -261,7 +261,7 @@ describe("UCheckbox.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(customLabelContent);
     });
@@ -279,7 +279,7 @@ describe("UCheckbox.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-checkbox-group/tests/UCheckboxGroup.test.ts

@@ -201,7 +201,7 @@ describe("UCheckboxGroup.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(customLabelContent);
     });
@@ -219,7 +219,7 @@ describe("UCheckboxGroup.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-date-picker-range/config.ts

@@ -31,7 +31,7 @@ export default /*tw*/ {
   menu: {
     base: `
       absolute z-40 mb-3 w-80 overflow-hidden rounded-medium
-      border border-default bg-default p-2 shadow-sm focus:outline-hidden
+      border border-solid border-default bg-default p-2 shadow-sm focus:outline-hidden
     `,
     variants: {
       openDirectionX: {

package/ui.form-input/UInput.vue

@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits([
   /**
-   * Triggers when the input value is changes.
+   * Triggers when the input value is changed.
    * @property {string} modelValue
    * @property {number} modelValue
    */
@@ -43,6 +43,7 @@ const emit = defineEmits([
 
   /**
    * Triggers when the input gains focus.
+   * @property {FocusEvent} event
    */
   "focus",
 
@@ -53,11 +54,12 @@ const emit = defineEmits([
 
   /**
    * Triggers when the input loses focus.
+   * @property {FocusEvent} event
    */
   "blur",
 
   /**
-   * Triggers when the input value is changes.
+   * Triggers when the input value is changed.
    * @property {string} modelValue
    * @property {number} modelValue
    */