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

package/ui.dropdown/types.ts

@@ -0,0 +1,127 @@
+import defaultConfig from "./config";
+
+import type { Option } from "../ui.form-listbox/types";
+import type { ComponentConfig, UnknownObject } from "../types";
+
+export type Config = typeof defaultConfig;
+
+export interface Props {
+  /**
+   * Selected dropdown value.
+   */
+  modelValue?: string | number | UnknownObject | (string | number | UnknownObject)[];
+
+  /**
+   * Dropdown label.
+   */
+  label?: string;
+
+  /**
+   * Determines how many selected option labels are shown in the label.
+   */
+  labelDisplayCount?: number;
+
+  /**
+   * Options list.
+   */
+  options?: Option[];
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey?: string;
+
+  /**
+   * Value key in the item object of options.
+   */
+  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;
+
+  /**
+   * Dropdown color.
+   */
+  color?:
+    | "primary"
+    | "secondary"
+    | "error"
+    | "warning"
+    | "success"
+    | "info"
+    | "notice"
+    | "neutral"
+    | "grayscale";
+
+  /**
+   * Dropdown size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Shows input to search value in a list.
+   */
+  searchable?: boolean;
+
+  /**
+   * Search input model value for the dropdown list.
+   */
+  search?: string;
+
+  /**
+   * Close dropdown on option select.
+   */
+  closeOnSelect?: boolean;
+
+  /**
+   * Allows multiple selection.
+   */
+  multiple?: boolean;
+
+  /**
+   * Disable the dropdown.
+   */
+  disabled?: boolean;
+
+  /**
+   * The position of a dropdown list on the x-axis.
+   */
+  xPosition?: "left" | "right";
+
+  /**
+   * The position of a dropdown list on the y-axis.
+   */
+  yPosition?: "top" | "bottom";
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string | null;
+}

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
-import { ref, computed, nextTick, 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 UBadge from "../ui.text-badge/UBadge.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 badgeLabel = 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 getFullOptionLabels(value: Option | Option[]) {
-  const labelKey = props.labelKey;
-
-  if (Array.isArray(value)) {
-    return value.map((item) => item[labelKey]).join(", ");
-  }
-
-  return "";
-}
-
-function onSearchChange(query: string) {
-  emit("searchChange", query);
-}
-
-function onClickBadge() {
-  isShownOptions.value = !isShownOptions.value;
-
-  if (isShownOptions.value) {
-    nextTick(() => listboxRef.value?.wrapperRef?.focus());
-
-    emit("open");
-  }
-}
-
-function hideOptions() {
-  isShownOptions.value = false;
-  dropdownSearch.value = "";
-
-  emit("close");
-}
-
-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 hide() {
+  dropdownRef.value?.hide();
 }
 
 defineExpose({
@@ -188,137 +80,137 @@ 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, wrapperAttrs, dropdownBadgeAttrs, listboxAttrs, toggleIconAttrs } =
-  useUI<Config>(defaultConfig, mutatedProps, "dropdownBadge");
+const { getDataTest, config, toggleBadgeAttrs, dropdownBadgeAttrs, toggleIconAttrs } =
+  useUI<Config>(defaultConfig, mutatedProps, "toggleBadge");
 </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"
+    :size="size"
+    :close-on-select="closeOnSelect"
+    v-bind="dropdownBadgeAttrs"
+    :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')"
   >
-    <UBadge
-      :id="elementId"
-      :label="badgeLabel"
-      :size="size"
-      :color="color"
-      :variant="variant"
-      :round="round"
-      :title="getFullOptionLabels(selectedOptions)"
-      v-bind="dropdownBadgeAttrs"
-      tabindex="0"
-      :data-test="getDataTest()"
-      @click="onClickBadge"
-      @keydown.enter="onClickBadge"
-      @keydown.space.prevent="onClickBadge"
-    >
-      <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="badgeLabel" :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>
-    </UBadge>
-
-    <UListbox
-      v-if="isShownOptions"
-      ref="dropdown-list"
-      v-model="dropdownValue"
-      v-model:search="dropdownSearch"
-      :searchable="searchable"
-      :multiple="multiple"
-      :size="size"
-      :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 }">
+      <UBadge
+        :label="displayLabel"
+        :size="size"
+        :color="color"
+        :variant="variant"
+        :round="round"
+        :title="fullLabel"
+        v-bind="toggleBadgeAttrs"
+        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>
+      </UBadge>
+    </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-badge/config.ts

@@ -1,6 +1,15 @@
 export default /*tw*/ {
-  wrapper: "relative inline-block h-max",
   dropdownBadge: {
+    base: "{UDropdown}",
+    defaults: {
+      size: {
+        sm: "sm",
+        md: "md",
+        lg: "lg",
+      },
+    },
+  },
+  toggleBadge: {
     base: "{UBadge}",
     variants: {
       disabled: {
@@ -9,7 +18,14 @@ export default /*tw*/ {
     },
   },
   toggleIcon: {
-    base: "{UIcon} transition duration-300 -mr-0.5",
+    base: "{UIcon} transition duration-300",
+    variants: {
+      size: {
+        sm: "-ml-0.5 -mr-0.5",
+        md: "-ml-1 -mr-1",
+        lg: "-ml-1 -mr-1.5",
+      },
+    },
     defaults: {
       size: {
         sm: "2xs",
@@ -19,19 +35,6 @@ export default /*tw*/ {
     },
     compoundVariants: [{ opened: true, class: "rotate-180" }],
   },
-  listbox: {
-    base: "{UListbox} w-fit",
-    variants: {
-      yPosition: {
-        top: "bottom-full mb-1.5",
-        bottom: "top-full mt-1.5",
-      },
-      xPosition: {
-        left: "left-0",
-        right: "right-0",
-      },
-    },
-  },
   defaults: {
     color: "primary",
     size: "md",

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

@@ -158,6 +158,13 @@ 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 };
@@ -378,7 +385,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
         ]"
       >
         <template #before-option="{ option }">
-          <UAvatar :src="option.avatar" size="sm" />
+          <UAvatar :src="option.avatar" size="xs" />
         </template>
       </UDropdownBadge>
 
@@ -421,7 +428,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (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>
@@ -440,47 +447,13 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (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>
       </UDropdownBadge>
     </URow>