vueless 1.2.8 → 1.2.10-beta.0

package/ui.dropdown-badge/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;
+
   /**
    * Badge 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.
    */

package/ui.dropdown-button/UDropdownButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, computed, provide, ref, useId, useTemplateRef } from "vue";
+import { nextTick, computed, ref, useId, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
 import useUI from "../composables/useUI";
@@ -55,13 +55,18 @@ const emit = defineEmits([
    * @property {string} query
    */
   "searchChange",
-]);
 
-provide("hideDropdownOptions", hideOptions);
+  /**
+   * Triggers when the search v-model updates.
+   * @property {string} query
+   */
+  "update:search",
+]);
 
 type UListboxRef = InstanceType<typeof UListbox>;
 
 const isShownOptions = ref(false);
+const isClickingOption = ref(false);
 const listboxRef = useTemplateRef<UListboxRef>("dropdown-list");
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
@@ -78,6 +83,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) => {
@@ -137,9 +147,23 @@ function getFullOptionLabels(value: Option | Option[]) {
 }
 
 function onClickOption(option: Option) {
+  isClickingOption.value = true;
+
   emit("clickOption", option);
 
-  if (!props.multiple) hideOptions();
+  if (!props.multiple && props.closeOnSelect) hideOptions();
+
+  nextTick(() => {
+    setTimeout(() => {
+      isClickingOption.value = false;
+    }, 10);
+  });
+}
+
+function handleClickOutside() {
+  if (isClickingOption.value) return;
+
+  hideOptions();
 }
 
 function onClickButton() {
@@ -154,6 +178,7 @@ function onClickButton() {
 
 function hideOptions() {
   isShownOptions.value = false;
+  dropdownSearch.value = "";
 
   emit("close");
 }
@@ -188,7 +213,7 @@ const { getDataTest, config, dropdownButtonAttrs, listboxAttrs, toggleIconAttrs,
 <template>
   <div
     ref="wrapper"
-    v-click-outside="hideOptions"
+    v-click-outside="handleClickOutside"
     v-bind="wrapperAttrs"
     :data-test="getDataTest('wrapper')"
   >
@@ -245,16 +270,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",
+    },
+  },
+};