vueless 1.3.7-beta.2 → 1.3.7-beta.4

package/ui.dropdown-button/UDropdownButton.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
-import { nextTick, computed, ref, useId, useTemplateRef } from "vue";
-import { isEqual } from "lodash-es";
+import { computed, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
-import UListbox from "../ui.form-listbox/UListbox.vue";
-
-import vClickOutside from "../v.click-outside/vClickOutside";
+import UDropdown from "../ui.dropdown/UDropdown.vue";
 
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
 import type { Props, Config } from "./types";
-import type { Option, SelectedValue } from "../ui.form-listbox/types";
 
 defineOptions({ inheritAttrs: false });
 
@@ -63,66 +59,9 @@ const emit = defineEmits([
   "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");
-
-const elementId = props.id || useId();
-
-const dropdownValue = computed({
-  get: () => {
-    if (props.multiple && !Array.isArray(props.modelValue)) {
-      return props.modelValue ? [props.modelValue] : [];
-    }
-
-    return props.modelValue;
-  },
-  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) => {
-      return (
-        option[props.valueKey] &&
-        (dropdownValue.value as SelectedValue[]).find((selected) =>
-          isEqual(selected, option[props.valueKey]),
-        )
-      );
-    });
-  }
-
-  return [
-    props.options.find(
-      (option) => option[props.valueKey] && isEqual(option[props.valueKey], dropdownValue.value),
-    ),
-  ].filter((option) => !!option);
-});
-
-const buttonLabel = computed(() => {
-  if (!props.labelDisplayCount || !selectedOptions.value.length) {
-    return props.label;
-  }
+type UDropdownRef = InstanceType<typeof UDropdown>;
 
-  const selectedLabels = selectedOptions.value
-    .slice(0, props.labelDisplayCount)
-    .map((option) => option[props.labelKey]);
-  const restLabelCount = selectedOptions.value.length - props.labelDisplayCount;
-
-  if (restLabelCount > 0) {
-    selectedLabels.push(`+${restLabelCount}`);
-  }
-
-  return selectedLabels.join(", ");
-});
+const dropdownRef = useTemplateRef<UDropdownRef>("dropdown");
 
 const toggleIconName = computed(() => {
   if (typeof props.toggleIcon === "string") {
@@ -132,55 +71,8 @@ const toggleIconName = computed(() => {
   return props.toggleIcon ? config.value.defaults.toggleIcon : "";
 });
 
-function onSearchChange(query: string) {
-  emit("searchChange", query);
-}
-
-function getFullOptionLabels(value: Option | Option[]) {
-  const labelKey = props.labelKey;
-
-  if (Array.isArray(value)) {
-    return value.map((item) => item[labelKey]).join(", ");
-  }
-
-  return "";
-}
-
-function onClickOption(option: Option) {
-  isClickingOption.value = true;
-
-  emit("clickOption", option);
-
-  if (!props.multiple && props.closeOnSelect) hideOptions();
-
-  nextTick(() => {
-    setTimeout(() => {
-      isClickingOption.value = false;
-    }, 10);
-  });
-}
-
-function handleClickOutside() {
-  if (isClickingOption.value) return;
-
-  hideOptions();
-}
-
-function onClickButton() {
-  isShownOptions.value = !isShownOptions.value;
-
-  if (isShownOptions.value) {
-    nextTick(() => listboxRef.value?.wrapperRef?.focus());
-
-    emit("open");
-  }
-}
-
-function hideOptions() {
-  isShownOptions.value = false;
-  dropdownSearch.value = "";
-
-  emit("close");
+function hide() {
+  dropdownRef.value?.hide();
 }
 
 defineExpose({
@@ -188,136 +80,139 @@ defineExpose({
    * A reference to the component's wrapper element for direct DOM manipulation.
    * @property {HTMLDivElement}
    */
-  wrapperRef,
+  wrapperRef: computed(() => dropdownRef.value?.wrapperRef),
 
   /**
-   * Hides the dropdown options.
+   * Hides the dropdown.
    * @property {function}
    */
-  hideOptions,
+  hide,
 });
 
-/**
- * Get element / nested component attributes for each config token ✨
+/*
+ * Vueless: Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
   /* component state, not a props */
-  opened: isShownOptions.value,
+  opened: dropdownRef.value?.isOpened ?? false,
 }));
 
-const { getDataTest, config, dropdownButtonAttrs, listboxAttrs, toggleIconAttrs, wrapperAttrs } =
-  useUI<Config>(defaultConfig, mutatedProps, "dropdownButton");
+const { getDataTest, config, toggleButtonAttrs, dropdownButtonAttrs, toggleIconAttrs } =
+  useUI<Config>(defaultConfig, mutatedProps, "toggleButton");
 </script>
 
 <template>
-  <div
-    ref="wrapper"
-    v-click-outside="handleClickOutside"
-    v-bind="wrapperAttrs"
-    :data-test="getDataTest('wrapper')"
+  <UDropdown
+    :id="id"
+    ref="dropdown"
+    :model-value="modelValue"
+    :label="label"
+    :label-display-count="labelDisplayCount"
+    :search="search"
+    :y-position="yPosition"
+    :x-position="xPosition"
+    :disabled="disabled"
+    :options="options"
+    :options-limit="optionsLimit"
+    :visible-options="visibleOptions"
+    :label-key="labelKey"
+    :value-key="valueKey"
+    :group-label-key="groupLabelKey"
+    :group-value-key="groupValueKey"
+    :searchable="searchable"
+    :multiple="multiple"
+    :color="color"
+    :close-on-select="closeOnSelect"
+    v-bind="dropdownButtonAttrs"
+    :data-test="dataTest"
+    @click-option="(option) => emit('clickOption', option)"
+    @update:model-value="(value) => emit('update:modelValue', value)"
+    @update:search="(value) => emit('update:search', value)"
+    @search-change="(query) => emit('searchChange', query)"
+    @open="emit('open')"
+    @close="emit('close')"
   >
-    <UButton
-      :id="elementId"
-      :label="buttonLabel"
-      :size="size"
-      :color="color"
-      :block="block"
-      :round="round"
-      :square="square"
-      :variant="variant"
-      :disabled="disabled"
-      :title="getFullOptionLabels(selectedOptions)"
-      v-bind="dropdownButtonAttrs"
-      :data-test="getDataTest()"
-      @click="onClickButton"
-    >
-      <template #left>
-        <!--
-          @slot Use it to add something before the label.
-          @binding {boolean} opened
-        -->
-        <slot name="left" :opened="isShownOptions" />
-      </template>
-
-      <template #default>
-        <!--
-          @slot Use it to add something instead of the default label.
-          @binding {string} label
-          @binding {boolean} opened
-        -->
-        <slot :label="buttonLabel" :opened="isShownOptions" />
-      </template>
-
-      <template #right>
-        <!--
-          @slot Use it to add something instead of the toggle icon.
-          @binding {boolean} opened
-        -->
-        <slot name="toggle" :opened="isShownOptions">
-          <UIcon
-            v-if="toggleIconName"
-            color="inherit"
-            :name="toggleIconName"
-            v-bind="toggleIconAttrs"
-            :data-test="getDataTest('dropdown')"
-          />
-        </slot>
-      </template>
-    </UButton>
-
-    <UListbox
-      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
+    <template #default="{ opened, displayLabel, fullLabel }">
+      <UButton
+        :label="displayLabel"
+        :size="size"
+        :color="color"
+        :block="block"
+        :round="round"
+        :square="square"
+        :variant="variant"
+        :disabled="disabled"
+        :title="fullLabel"
+        v-bind="toggleButtonAttrs"
+        tabindex="-1"
+        :data-test="getDataTest()"
+      >
+        <template #left>
+          <!--
+            @slot Use it to add something before the label.
+            @binding {boolean} opened
           -->
-        <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="left" :opened="opened" />
+        </template>
+
+        <template #default>
+          <!--
+            @slot Use it to add something instead of the default label.
+            @binding {string} label
+            @binding {boolean} opened
           -->
-        <slot name="option" :option="option" :index="index" />
-      </template>
+          <slot :label="displayLabel" :opened="opened" />
+        </template>
 
-      <template #after-option="{ option, index }">
-        <!--
-            @slot Use it to add something after option.
-            @binding {object} option
-            @binding {number} index
+        <template #right>
+          <!--
+            @slot Use it to add something instead of the toggle icon.
+            @binding {boolean} opened
           -->
-        <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>
+          <slot name="toggle" :opened="opened">
+            <UIcon
+              v-if="toggleIconName"
+              color="inherit"
+              :name="toggleIconName"
+              v-bind="toggleIconAttrs"
+              :data-test="getDataTest('dropdown')"
+            />
+          </slot>
+        </template>
+      </UButton>
+    </template>
+
+    <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>
+  </UDropdown>
 </template>

package/ui.dropdown-button/config.ts

@@ -1,49 +1,53 @@
 export default /*tw*/ {
-  wrapper: {
-    base: "relative inline-block h-max",
+  dropdownButton: {
+    base: "{UDropdown}",
     variants: {
       block: {
-        true: "w-full",
+        true: "!block w-full",
       },
     },
-  },
-  dropdownButton: "{UButton} justify-between",
-  toggleIcon: {
-    base: "{UIcon} transition duration-300 -mr-1",
     defaults: {
       size: {
-        "2xs": "2xs",
-        xs: "xs",
-        sm: "sm",
-        md: "sm",
-        lg: "sm",
-        xl: "sm",
+        "2xs": "sm",
+        xs: "sm",
+        sm: "md",
+        md: "md",
+        lg: "lg",
+        xl: "lg",
       },
     },
-    compoundVariants: [{ opened: true, class: "rotate-180" }],
   },
-  listbox: {
-    base: "{UListbox} w-fit",
+  toggleButton: {
+    base: "{UButton} justify-between",
     variants: {
-      yPosition: {
-        top: "bottom-full mb-1.5",
-        bottom: "top-full mt-1.5",
+      block: {
+        true: "w-full",
       },
-      xPosition: {
-        left: "left-0",
-        right: "right-0",
+    },
+  },
+  toggleIcon: {
+    base: "{UIcon} transition duration-300",
+    variants: {
+      size: {
+        "2xs": "-ml-0.5 -mr-1",
+        xs: "-ml-1 -mr-1",
+        sm: "-ml-1 -mr-1.5",
+        md: "-ml-1 -mr-2",
+        lg: "-ml-1.5 -mr-2.5",
+        xl: "-ml-1.5 -mr-2.5",
       },
     },
     defaults: {
       size: {
-        "2xs": "sm",
-        xs: "sm",
-        sm: "md",
-        md: "md",
-        lg: "lg",
-        xl: "lg",
+        "2xs": "2xs",
+        xs: "xs",
+        sm: "sm",
+        md: "sm",
+        lg: "md",
+        xl: "md",
       },
     },
+    compoundVariants: [{ opened: true, class: "rotate-180" }],
   },
   defaults: {
     color: "primary",

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

@@ -160,13 +160,20 @@ Default.parameters = {
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
+Disabled.parameters = {
+  docs: {
+    story: {
+      height: "120px",
+    },
+  },
+};
 
 export const Searchable = DefaultTemplate.bind({});
 Searchable.args = { searchable: true };
 Searchable.parameters = {
   docs: {
     story: {
-      height: "250px",
+      height: "270px",
     },
   },
 };
@@ -176,7 +183,7 @@ SearchModelValue.args = { searchable: true, search: "Copy" };
 SearchModelValue.parameters = {
   docs: {
     story: {
-      height: "250px",
+      height: "270px",
     },
   },
 };
@@ -398,7 +405,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
         ]"
       >
         <template #before-option="{ option }">
-          <UAvatar :src="option.avatar" size="sm" />
+          <UAvatar :src="option.avatar" size="xs" />
         </template>
       </UDropdownButton>
 
@@ -441,7 +448,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
         ]"
       >
         <template #option="{ option }">
-          <URow align="center" gap="xs">
+          <URow justify="between" align="center" gap="xs" block>
             <UCol gap="none">
               <UText size="sm">{{ option.label }}</UText>
               <UText variant="lifted" size="xs">{{ option.role }}</UText>
@@ -460,47 +467,13 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
         v-model="args.afterOptionModel"
         label="After option slot"
         :options="[
-          {
-            label: 'John Doe',
-            value: '1',
-            role: 'Developer',
-            avatar: johnDoe,
-            status: 'online',
-            statusColor: 'success',
-          },
-          {
-            label: 'Jane Smith',
-            value: '2',
-            role: 'Designer',
-            avatar: emilyDavis,
-            status: 'away',
-            statusColor: 'warning',
-          },
-          {
-            label: 'Mike Johnson',
-            value: '3',
-            role: 'Product Manager',
-            avatar: alexJohnson,
-            status: 'offline',
-            statusColor: 'grayscale',
-          },
-          {
-            label: 'Sarah Wilson',
-            value: '4',
-            role: 'QA Engineer',
-            avatar: patMorgan,
-            status: 'online',
-            statusColor: 'success',
-          },
+          { label: 'John Doe', value: '1', verified: true },
+          { label: 'Jane Smith', value: '2', verified: true },
+          { label: 'Mike Johnson', value: '3', verified: false },
         ]"
       >
         <template #after-option="{ option }">
-          <UBadge
-            :label="option.status"
-            :color="option.statusColor"
-            size="sm"
-            variant="subtle"
-          />
+          <UIcon v-if="option.verified" name="verified" size="xs" color="success" />
         </template>
       </UDropdownButton>
     </URow>