vueless 1.3.7-beta.1 → 1.3.7-beta.3

package/ui.dropdown/UDropdown.vue

@@ -0,0 +1,324 @@
+<script setup lang="ts">
+import { nextTick, computed, ref, useTemplateRef } from "vue";
+import { isEqual } from "lodash-es";
+
+import { useUI } from "../composables/useUI";
+import { getDefaults, cx } from "../utils/ui";
+
+import UListbox from "../ui.form-listbox/UListbox.vue";
+import UCollapsible from "../ui.container-collapsible/UCollapsible.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 });
+
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  options: () => [],
+  modelValue: "",
+  label: "",
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers on a dropdown option click.
+   * @property {string} value
+   */
+  "clickOption",
+
+  /**
+   * Triggers when an option is selected.
+   * @property {string} value
+   * @property {number} value
+   */
+  "update:modelValue",
+
+  /**
+   * Triggers when a dropdown list is opened.
+   */
+  "open",
+
+  /**
+   * Triggers when a dropdown list is closed.
+   */
+  "close",
+
+  /**
+   * Triggers when the search value is changed.
+   * @property {string} query
+   */
+  "searchChange",
+
+  /**
+   * Triggers when the search v-model updates.
+   * @property {string} query
+   */
+  "update:search",
+]);
+
+type UListboxRef = InstanceType<typeof UListbox>;
+type UCollapsibleRef = InstanceType<typeof UCollapsible>;
+
+const isClickingOption = ref(false);
+const listboxRef = useTemplateRef<UListboxRef>("dropdown-list");
+const collapsibleRef = useTemplateRef<UCollapsibleRef>("collapsible");
+
+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 displayLabel = computed(() => {
+  if (!props.labelDisplayCount || !selectedOptions.value.length) {
+    return props.label;
+  }
+
+  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 fullLabel = computed(() => {
+  if (!selectedOptions.value.length) {
+    return "";
+  }
+
+  return selectedOptions.value.map((option) => option[props.labelKey]).join(", ");
+});
+
+function onSearchChange(query: string) {
+  emit("searchChange", query);
+}
+
+function onClickOption(option: Option) {
+  isClickingOption.value = true;
+
+  emit("clickOption", option);
+
+  if (props.closeOnSelect) {
+    hide();
+  }
+
+  nextTick(() => {
+    setTimeout(() => {
+      isClickingOption.value = false;
+    }, 10);
+  });
+}
+
+function onOpen() {
+  nextTick(() => listboxRef.value?.wrapperRef?.focus());
+
+  emit("open");
+}
+
+function onClose() {
+  dropdownSearch.value = "";
+
+  emit("close");
+}
+
+function toggle() {
+  collapsibleRef.value?.toggle();
+}
+
+function hide() {
+  collapsibleRef.value?.hide();
+}
+
+defineExpose({
+  /**
+   * A reference to the component's wrapper element for direct DOM manipulation.
+   * @property {HTMLDivElement}
+   */
+  wrapperRef: computed(() => collapsibleRef.value?.wrapperRef),
+
+  /**
+   * Hides the dropdown.
+   * @property {function}
+   */
+  hide,
+
+  /**
+   * Toggles the dropdown visibility.
+   * @property {function}
+   */
+  toggle,
+
+  /**
+   * Indicates whether the dropdown is opened.
+   * @property {boolean}
+   */
+  isOpened: computed(() => collapsibleRef.value?.isOpened ?? false),
+
+  /**
+   * The currently selected options.
+   * @property {Option[]}
+   */
+  selectedOptions,
+
+  /**
+   * The display label for the dropdown.
+   * @property {string}
+   */
+  displayLabel,
+
+  /**
+   * Returns full option labels joined by comma.
+   * @property {string}
+   */
+  fullLabel,
+});
+
+/*
+ * 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: collapsibleRef.value?.isOpened ?? false,
+}));
+
+const { getDataTest, dropdownAttrs, listboxAttrs } = useUI<Config>(
+  defaultConfig,
+  mutatedProps,
+  "dropdown",
+);
+</script>
+
+<template>
+  <UCollapsible
+    :id="id"
+    ref="collapsible"
+    :y-position="yPosition"
+    :x-position="xPosition"
+    :close-on-click-outside="!isClickingOption"
+    :close-on-content-click="false"
+    :disabled="disabled"
+    v-bind="dropdownAttrs"
+    :data-test="dataTest"
+    @open="onOpen"
+    @close="onClose"
+  >
+    <template #default="{ opened }">
+      <!--
+        @slot Use it to add custom trigger element for the dropdown.
+        @binding {boolean} opened
+        @binding {string} displayLabel
+        @binding {string} fullLabel
+        @binding {Option[]} selectedOptions
+      -->
+      <slot
+        :opened="opened"
+        :display-label="displayLabel"
+        :full-label="fullLabel"
+        :selected-options="selectedOptions"
+      />
+    </template>
+
+    <template #content="{ opened, contentClasses }">
+      <!--
+        @slot Use it to replace the UListbox with custom dropdown content.
+        @binding {boolean} opened
+        @binding {string} contentClasses
+      -->
+      <slot name="dropdown" :opened="opened" :content-classes="contentClasses">
+        <UListbox
+          ref="dropdown-list"
+          v-model="dropdownValue"
+          v-model:search="dropdownSearch"
+          :size="size"
+          :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"
+          :class="cx([contentClasses, listboxAttrs.class])"
+          :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>
+      </slot>
+    </template>
+  </UCollapsible>
+</template>

package/ui.dropdown/config.ts

@@ -0,0 +1,27 @@
+export default /*tw*/ {
+  dropdown: "{UCollapsible}",
+  listbox: {
+    base: "{UListbox}",
+    defaults: {
+      size: {
+        sm: "sm",
+        md: "md",
+        lg: "lg",
+      },
+    },
+  },
+  defaults: {
+    color: "primary",
+    size: "md",
+    labelKey: "label",
+    valueKey: "value",
+    groupLabelKey: "label",
+    yPosition: "bottom",
+    xPosition: "left",
+    optionsLimit: 0,
+    visibleOptions: 8,
+    searchable: false,
+    multiple: false,
+    closeOnSelect: true,
+  },
+};

package/ui.dropdown/constants.ts

@@ -0,0 +1 @@
+export const COMPONENT_NAME = "UDropdown";

package/ui.dropdown/storybook/docs.mdx

@@ -0,0 +1,17 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
+import { getSource } from "../../utils/storybook.ts";
+
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />
+

package/ui.dropdown/storybook/stories.ts

@@ -0,0 +1,286 @@
+import {
+  getArgs,
+  getArgTypes,
+  getSlotNames,
+  getSlotsFragment,
+  getDocsDescription,
+} from "../../utils/storybook";
+
+import UDropdown from "../../ui.dropdown/UDropdown.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UButton from "../../ui.button/UButton.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import ULink from "../../ui.button-link/ULink.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 UAvatar from "../../ui.image-avatar/UAvatar.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Props } from "../types";
+
+interface DefaultUDropdownArgs extends Props {
+  slotTemplate?: string;
+}
+
+interface EnumUDropdownArgs extends DefaultUDropdownArgs {
+  enum: keyof Pick<Props, "size" | "xPosition" | "yPosition" | "color">;
+  class?: string;
+  buttonClass?: string;
+}
+
+export default {
+  id: "2000",
+  title: "Dropdowns / Dropdown",
+  component: UDropdown,
+  args: {
+    label: "Select option",
+    options: [
+      { label: "Edit", value: "edit" },
+      { label: "Copy", value: "copy" },
+      { label: "Remove", value: "delete" },
+    ],
+  },
+  argTypes: {
+    ...getArgTypes(UDropdown.__name),
+  },
+  parameters: {
+    docs: {
+      ...getDocsDescription(UDropdown.__name),
+      story: {
+        height: "230px",
+      },
+    },
+  },
+} as Meta;
+
+const defaultTemplate = `
+  <UAvatar label="JD" interactive />
+`;
+
+const DefaultTemplate: StoryFn<DefaultUDropdownArgs> = (args: DefaultUDropdownArgs) => ({
+  components: { UDropdown, UButton, UIcon, ULink, UBadge, ULoader, URow, UCol, UText, UAvatar },
+  setup: () => ({ args, slots: getSlotNames(UDropdown.__name) }),
+  template: `
+    <UDropdown v-bind="args">
+      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
+    </UDropdown>
+  `,
+});
+
+const SelectableTemplate: StoryFn<DefaultUDropdownArgs> = (args: DefaultUDropdownArgs) => ({
+  components: { UDropdown, UButton, UIcon, UAvatar },
+  setup: () => ({ args, slots: getSlotNames(UDropdown.__name) }),
+  template: `
+    <UDropdown v-bind="args" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
+    </UDropdown>
+  `,
+});
+
+const EnumTemplate: StoryFn<EnumUDropdownArgs> = (args: EnumUDropdownArgs, { argTypes }) => ({
+  components: { UDropdown, UButton, UIcon, URow, UAvatar },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <URow>
+      <UDropdown
+        v-for="option in argTypes?.[args.enum]?.options"
+        v-bind="getArgs(args, option)"
+        :key="option"
+        #default="{ opened }"
+      >
+        <UButton :[args.enum]="option" :label="option" :class="args.buttonClass" interactive />
+      </UDropdown>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+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: "270px",
+    },
+  },
+};
+
+export const SearchModelValue = DefaultTemplate.bind({});
+SearchModelValue.args = { searchable: true, search: "Copy" };
+SearchModelValue.parameters = {
+  docs: {
+    story: {
+      height: "270px",
+    },
+  },
+};
+
+export const NoCloseOnSelect = SelectableTemplate.bind({});
+NoCloseOnSelect.args = {
+  modelValue: "pending",
+  closeOnSelect: false,
+  options: [
+    { label: "Active", value: "active" },
+    { label: "Pending", value: "pending" },
+    { label: "Archived", value: "archived" },
+  ],
+  slotTemplate: `
+    <template #default>
+      <UButton label="Select status" />
+    </template>
+  `,
+};
+
+export const OptionSelection = SelectableTemplate.bind({});
+OptionSelection.args = {
+  modelValue: "active",
+  options: [
+    { label: "Active", value: "active" },
+    { label: "Pending", value: "pending" },
+    { label: "Archived", value: "archived" },
+  ],
+  slotTemplate: `
+    <template #default>
+      <UButton label="Select status" />
+    </template>
+  `,
+};
+
+export const MultipleOptionSelection = SelectableTemplate.bind({});
+MultipleOptionSelection.args = {
+  modelValue: ["active", "pending", "archived"],
+  multiple: true,
+  options: [
+    { label: "Active", value: "active" },
+    { label: "Pending", value: "pending" },
+    { label: "Archived", value: "archived" },
+  ],
+  slotTemplate: `
+    <template #default>
+      <UButton label="Select status" />
+    </template>
+  `,
+};
+
+export const Size = EnumTemplate.bind({});
+Size.args = { enum: "size" };
+
+export const Color = EnumTemplate.bind({});
+Color.args = { enum: "color" };
+
+export const ListboxXPosition = EnumTemplate.bind({});
+ListboxXPosition.args = { enum: "xPosition", buttonClass: "min-w-32" };
+
+export const ListboxYPosition = EnumTemplate.bind({});
+ListboxYPosition.args = { enum: "yPosition" };
+ListboxYPosition.parameters = {
+  storyClasses: "h-[350px] flex items-center px-6 pt-8 pb-12",
+};
+
+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 EmptySlot = DefaultTemplate.bind({});
+EmptySlot.args = {
+  options: [],
+  slotTemplate: `
+    ${defaultTemplate}
+    <template #empty>
+      <UCol align="center" gap="xs" class="w-32 p-2">
+        <ULoader loading size="sm" />
+        <UText align="center" label="Loading, this may take a while..." />
+      </UCol>
+    </template>
+  `,
+};
+
+export const OptionSlots: StoryFn<DefaultUDropdownArgs> = (args) => ({
+  components: { UDropdown, UAvatar, UIcon, URow, UCol, UBadge, UText },
+  setup: () => ({ args }),
+  template: `
+    <URow>
+      <UDropdown
+        :options="[
+          { label: 'John Doe', value: '1', role: 'Developer' },
+          { label: 'Jane Smith', value: '2', role: 'Designer' },
+          { label: 'Mike Johnson', value: '3', role: 'Product Manager' },
+        ]"
+      >
+        <UAvatar label="JD" interactive />
+        <template #before-option="{ option }">
+          <UIcon name="person" size="xs" color="neutral" />
+        </template>
+      </UDropdown>
+
+      <UDropdown
+        :options="[
+          { label: 'John Doe', value: '1', role: 'Developer', status: 'online', statusColor: 'success' },
+          { label: 'Jane Smith', value: '2', role: 'Designer', status: 'away', statusColor: 'warning' },
+          { label: 'Mike Johnson', value: '3', role: 'Product Manager', status: 'offline', statusColor: 'grayscale' },
+        ]"
+      >
+        <UAvatar label="JD" interactive />
+        <template #option="{ option }">
+          <URow align="center" gap="xs" justify="between" class="w-40">
+            <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>
+      </UDropdown>
+
+      <UDropdown
+        :options="[
+          { label: 'John Doe', value: '1', verified: true },
+          { label: 'Jane Smith', value: '2', verified: true },
+          { label: 'Mike Johnson', value: '3', verified: false },
+        ]"
+      >
+        <UAvatar label="JD" interactive />
+        <template #after-option="{ option }">
+          <UIcon v-if="option.verified" name="verified" size="xs" color="success" />
+        </template>
+      </UDropdown>
+    </URow>
+  `,
+});
+OptionSlots.parameters = {
+  docs: {
+    story: {
+      height: "300px",
+    },
+  },
+};