v-uixy 1.9.1 → 1.9.3

package/templates/components/Select/composables/useSelect.composable.ts

@@ -15,8 +15,8 @@ const getValue = (option: UixySelectOptionType): string =>
   option.value ?? option.label;
 
 const collectLeafValues = (option: UixySelectOptionType): string[] => {
-  if (!option.children || option.children.length === 0)
-    return [getValue(option)];
+  if (!option.children?.length) return [getValue(option)];
+
   return option.children.flatMap(collectLeafValues);
 };
 
@@ -24,16 +24,23 @@ const findInTree = (
   options: UixySelectOptionType[],
   value: string,
 ): UixySelectOptionType | null => {
-  for (const opt of options) {
-    if (getValue(opt) === value) return opt;
-    if (opt.children?.length) {
-      const found = findInTree(opt.children, value);
+  for (const option of options) {
+    if (getValue(option) === value) return option;
+
+    if (option.children?.length) {
+      const found = findInTree(option.children, value);
+
       if (found) return found;
     }
   }
+
   return null;
 };
 
+const isNotNull = (
+  option: UixySelectOptionType | null,
+): option is UixySelectOptionType => option !== null;
+
 export const useSelect = <T extends string | string[]>(
   props: UixySelectProps,
   model: Ref<T>,
@@ -46,39 +53,43 @@ export const useSelect = <T extends string | string[]>(
   const lastScrollAt = ref(0);
   const expandedItems = ref<string[]>([]);
 
+  const selectedValues = computed<string[]>(() =>
+    Array.isArray(model.value) ? (model.value as string[]) : [],
+  );
+
   const filterTreeOptions = (
     items: UixySelectOptionType[],
     searchTerm: string,
   ): UixySelectOptionType[] => {
     if (!searchTerm) return items;
-    const normSearch = normalizeForSearch(searchTerm);
+
+    const normalizedSearch = normalizeForSearch(searchTerm);
+
     const filterNode = (
       node: UixySelectOptionType,
     ): UixySelectOptionType | null => {
-      const matches = normalizeForSearch(node.label).includes(normSearch);
-      let filteredChildren: UixySelectOptionType[] = [];
-      if (node.children?.length) {
-        filteredChildren = node.children
-          .map(filterNode)
-          .filter((n): n is UixySelectOptionType => n !== null);
-      }
-      if (matches || filteredChildren.length > 0) {
-        return { ...node, children: filteredChildren };
-      }
-      return null;
+      const matches = normalizeForSearch(node.label).includes(normalizedSearch);
+      const filteredChildren = (node.children ?? [])
+        .map(filterNode)
+        .filter(isNotNull);
+
+      if (!matches && filteredChildren.length === 0) return null;
+
+      return { ...node, children: filteredChildren };
     };
-    return items
-      .map(filterNode)
-      .filter((n): n is UixySelectOptionType => n !== null);
+
+    return items.map(filterNode).filter(isNotNull);
   };
 
   const filteredOptions = computed(() => {
-    const list = props.options ?? [];
-    if (props.tree) return filterTreeOptions(list, search.value);
-    return list.filter((option) =>
-      normalizeForSearch(option.label).includes(
-        normalizeForSearch(search.value),
-      ),
+    const options = props.options ?? [];
+
+    if (props.tree) return filterTreeOptions(options, search.value);
+
+    const normalizedSearch = normalizeForSearch(search.value);
+
+    return options.filter((option) =>
+      normalizeForSearch(option.label).includes(normalizedSearch),
     );
   });
 
@@ -87,133 +98,221 @@ export const useSelect = <T extends string | string[]>(
     searchTerm: string,
   ): string[] => {
     if (!searchTerm) return [];
+
     const lowerSearch = searchTerm.toLowerCase();
     const parentsToExpand: string[] = [];
+
     const checkNode = (node: UixySelectOptionType): boolean => {
       const nodeMatches = node.label.toLowerCase().includes(lowerSearch);
       let hasMatchingDescendant = false;
-      if (node.children?.length) {
-        for (const child of node.children) {
-          if (checkNode(child)) hasMatchingDescendant = true;
-        }
+
+      for (const child of node.children ?? []) {
+        if (checkNode(child)) hasMatchingDescendant = true;
       }
+
       if (hasMatchingDescendant) parentsToExpand.push(getValue(node));
+
       return nodeMatches || hasMatchingDescendant;
     };
+
     for (const item of items) checkNode(item);
+
     return parentsToExpand;
   };
 
   const effectiveExpandedItems = computed(() => {
     if (!search.value) return expandedItems.value;
+
     const autoExpanded = collectParentsWithMatchingDescendants(
       props.options,
       search.value,
     );
+
     return Array.from(new Set([...expandedItems.value, ...autoExpanded]));
   });
 
   const toggleExpand = (value: string) => {
-    const idx = expandedItems.value.indexOf(value);
-    if (idx >= 0) expandedItems.value.splice(idx, 1);
-    else expandedItems.value.push(value);
+    const index = expandedItems.value.indexOf(value);
+
+    if (index >= 0) {
+      expandedItems.value.splice(index, 1);
+    } else {
+      expandedItems.value.push(value);
+    }
   };
 
   const isSelected = (option: UixySelectOptionType): boolean => {
-    const v = getValue(option);
     if (props.tree && props.multiple && option.children?.length) {
       const leaves = collectLeafValues(option);
-      const arr = (model.value as string[]) ?? [];
-      return leaves.length > 0 && leaves.every((l) => arr.includes(l));
+
+      return (
+        leaves.length > 0 &&
+        leaves.every((leaf) => selectedValues.value.includes(leaf))
+      );
     }
-    return Array.isArray(model.value)
-      ? (model.value as string[]).includes(v)
-      : (model.value as string) === v;
+
+    const value = getValue(option);
+
+    if (Array.isArray(model.value)) return selectedValues.value.includes(value);
+
+    return (model.value as string) === value;
   };
 
   const isPartiallySelected = (option: UixySelectOptionType): boolean => {
-    if (!props.tree || !props.multiple || !option.children?.length)
+    if (!props.tree || !props.multiple || !option.children?.length) {
       return false;
+    }
+
     const leaves = collectLeafValues(option);
-    const arr = (model.value as string[]) ?? [];
-    const selected = leaves.filter((l) => arr.includes(l)).length;
-    return selected > 0 && selected < leaves.length;
+    const selectedCount = leaves.filter((leaf) =>
+      selectedValues.value.includes(leaf),
+    ).length;
+
+    return selectedCount > 0 && selectedCount < leaves.length;
+  };
+
+  const minSelected = computed(() => {
+    if (!props.multiple) return props.deselectable ? 0 : 1;
+
+    const min = Math.max(props.min ?? 0, 0);
+
+    return props.deselectable ? min : Math.max(min, 1);
+  });
+
+  const hasMax = computed(
+    () => !!props.multiple && typeof props.max === "number",
+  );
+
+  const isAtMax = computed(
+    () => hasMax.value && selectedValues.value.length >= props.max!,
+  );
+
+  const canReplace = computed(
+    () => props.maxBehavior === "replace" && props.max !== 0,
+  );
+
+  const isBlocked = (option: UixySelectOptionType): boolean => {
+    if (!hasMax.value || canReplace.value || isSelected(option)) return false;
+
+    const prev = selectedValues.value;
+    const values =
+      props.tree && option.children?.length
+        ? collectLeafValues(option)
+        : [getValue(option)];
+    const added = values.filter((v) => !prev.includes(v)).length;
+
+    return prev.length + added > props.max!;
   };
 
   const setMultiValues = (next: string[]) => {
     (model.value as string[]) = next;
   };
 
-  const toggleMultiValue = (v: string) => {
-    const prev = Array.isArray(model.value) ? (model.value as string[]) : [];
+  const toggleMultiValue = (v: string): boolean => {
+    const prev = selectedValues.value;
+
     if (prev.includes(v)) {
+      if (prev.length <= minSelected.value) return false;
+
       setMultiValues(prev.filter((item) => item !== v));
-      return;
+
+      return true;
     }
-    if (props.max && prev.length >= props.max) {
-      setMultiValues([...prev.slice(1), v]);
-      return;
+
+    if (hasMax.value && prev.length >= props.max!) {
+      if (!canReplace.value) return false;
+
+      setMultiValues([...prev.slice(prev.length - props.max! + 1), v]);
+
+      return true;
     }
+
     setMultiValues([...prev, v]);
+
+    return true;
   };
 
-  const cascadeMultiTree = (option: UixySelectOptionType) => {
+  const cascadeMultiTree = (option: UixySelectOptionType): boolean => {
     const leaves = collectLeafValues(option);
-    const prev = Array.isArray(model.value) ? (model.value as string[]) : [];
-    const allSelected = leaves.every((l) => prev.includes(l));
+    const prev = selectedValues.value;
+    const allSelected = leaves.every((leaf) => prev.includes(leaf));
+
     if (allSelected) {
-      setMultiValues(prev.filter((v) => !leaves.includes(v)));
-      return;
+      const next = prev.filter((v) => !leaves.includes(v));
+
+      if (next.length < minSelected.value) return false;
+
+      setMultiValues(next);
+
+      return true;
     }
+
     const merged = Array.from(new Set([...prev, ...leaves]));
-    if (props.max && merged.length > props.max) {
-      setMultiValues(merged.slice(merged.length - props.max));
-      return;
+
+    if (hasMax.value && merged.length > props.max!) {
+      if (!canReplace.value) return false;
+
+      setMultiValues(merged.slice(merged.length - props.max!));
+
+      return true;
     }
+
     setMultiValues(merged);
+
+    return true;
   };
 
-  const applyChange = (v: string) => {
+  const applyChange = (v: string): boolean => {
     if (!props.multiple) {
       (model.value as string) = v;
-      return;
+
+      return true;
     }
+
     if (props.tree) {
       const node = findInTree(props.options, v);
-      if (node?.children?.length) {
-        cascadeMultiTree(node);
-        return;
-      }
+
+      if (node?.children?.length) return cascadeMultiTree(node);
     }
-    toggleMultiValue(v);
+
+    return toggleMultiValue(v);
   };
 
   const handleClick = (value: string) => {
-    applyChange(value);
+    if (!applyChange(value)) return;
+
     emit("change", value);
+
     if (props.clearSearchOnSelect) search.value = "";
     if (!props.multiple) open.value = false;
   };
 
   const handleClickSelectedOption = (item: string) => {
-    applyChange(item);
+    if (!applyChange(item)) return;
+
     emit("change", item);
   };
 
   const handleDeselect = () => {
+    if (minSelected.value > 0) return;
+
     (model.value as string) = "";
   };
 
   const getLabel = (value: string): string => {
     if (!value) return "";
+
     return findInTree(props.options, value)?.label ?? value;
   };
 
   const customAddVisible = computed(() => {
     if (!props.allowCustom || !search.value) return false;
+    if (isAtMax.value && !canReplace.value) return false;
+
     const lowerSearch = search.value.toLowerCase();
+
     return !filteredOptions.value.some(
-      (opt) => opt.label.toLowerCase() === lowerSearch,
+      (option) => option.label.toLowerCase() === lowerSearch,
     );
   });
 
@@ -222,61 +321,79 @@ export const useSelect = <T extends string | string[]>(
   };
 
   const handleOpen = (e?: MouseEvent) => {
-    if (
-      props.disabled ||
-      (e && "badge" in (e?.target as HTMLDivElement).dataset)
-    )
-      return;
+    const isBadgeClick =
+      !!e && "badge" in (e.target as HTMLDivElement).dataset;
+
+    if (props.disabled || isBadgeClick) return;
+
     open.value = !open.value;
   };
 
   const handleKeydownSelect = (e: KeyboardEvent) => {
-    const key = e.key;
-    if (key === "Tab") return;
-    if (key === "ArrowDown" || key === "Enter" || key === " ") {
+    if (e.key === "Tab") return;
+
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
       e.preventDefault();
+
       open.value = !open.value;
     }
   };
 
+  const getFocusableOptions = (): HTMLElement[] => {
+    const container = dropdownRef?.value ?? refOptions.value;
+
+    if (!container) return [];
+
+    const elements = container.querySelectorAll<HTMLElement>(
+      "[select-dropdown] input, [select-dropdown] li",
+    );
+
+    return Array.from(elements).filter(
+      (el) =>
+        el.tabIndex >= 0 &&
+        el.getAttribute("aria-disabled") !== "true" &&
+        !el.hasAttribute("disabled"),
+    );
+  };
+
   const handleKeydownOption = (
     e: KeyboardEvent,
     option: UixySelectOptionType,
   ) => {
-    const key = e.key;
-    if ((key === "Enter" || key === " ") && !option.disabled) {
+    const isSelectKey = e.key === "Enter" || e.key === " ";
+
+    if (isSelectKey && !option.disabled) {
       e.preventDefault();
+
       return handleClick(getValue(option));
     }
-    if (key !== "ArrowDown" && key !== "ArrowUp") return;
-    const container = dropdownRef?.value ?? refOptions.value;
-    if (!container) return;
-    const focusables = Array.from(
-      container.querySelectorAll<HTMLElement>(
-        "[select-dropdown] input, [select-dropdown] li",
-      ),
-    ).filter(
-      (el) =>
-        el.tabIndex >= 0 &&
-        el.getAttribute("aria-disabled") !== "true" &&
-        !el.hasAttribute("disabled"),
-    );
+
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+
+    const focusables = getFocusableOptions();
+
     if (!focusables.length) return;
-    const currentEl = (e.currentTarget as HTMLElement) || null;
-    let index = currentEl ? focusables.indexOf(currentEl) : -1;
+
     e.preventDefault();
-    const val = key === "ArrowDown" ? 1 : -1;
-    index = (index + val + focusables.length) % focusables.length;
-    focusables[index]?.focus();
+
+    const current = e.currentTarget as HTMLElement | null;
+    const currentIndex = current ? focusables.indexOf(current) : -1;
+    const step = e.key === "ArrowDown" ? 1 : -1;
+    const nextIndex =
+      (currentIndex + step + focusables.length) % focusables.length;
+
+    focusables[nextIndex]?.focus();
   };
 
   const handleClickOutside = (e: MouseEvent) => {
     if (Date.now() - lastScrollAt.value < 250) return;
-    const target = e.target as Node;
+
+    const target = e.target as HTMLElement;
+
     if (refOptions.value?.contains(target)) return;
     if (dropdownRef?.value?.contains(target)) return;
-    const el = target as HTMLElement;
-    if (el.closest?.("[select-dropdown]")) return;
+    if (target.closest?.("[select-dropdown]")) return;
+
     open.value = false;
   };
 
@@ -284,34 +401,34 @@ export const useSelect = <T extends string | string[]>(
     lastScrollAt.value = Date.now();
   };
 
+  const addWindowListeners = () => {
+    window.addEventListener("click", handleClickOutside);
+    window.addEventListener("scroll", markScroll, true);
+    window.addEventListener("wheel", markScroll, { passive: true });
+    window.addEventListener("touchmove", markScroll, { passive: true });
+  };
+
+  const removeWindowListeners = () => {
+    window.removeEventListener("click", handleClickOutside);
+    window.removeEventListener("scroll", markScroll, true);
+    window.removeEventListener("wheel", markScroll);
+    window.removeEventListener("touchmove", markScroll);
+  };
+
   watch(
     () => open.value,
-    (isOpen, prevVal) => {
-      if (!isOpen) {
-        expandedItems.value = [];
-      }
-      if (prevVal) return;
-      requestAnimationFrame(() => {
-        window.addEventListener("click", handleClickOutside);
-        window.addEventListener("scroll", markScroll, true);
-        window.addEventListener("wheel", markScroll, { passive: true });
-        window.addEventListener("touchmove", markScroll, { passive: true });
-      });
-      onWatcherCleanup(() => {
-        window.removeEventListener("click", handleClickOutside);
-        window.removeEventListener("scroll", markScroll, true);
-        window.removeEventListener("wheel", markScroll as any);
-        window.removeEventListener("touchmove", markScroll as any);
-      });
+    (isOpen, wasOpen) => {
+      if (!isOpen) expandedItems.value = [];
+
+      if (wasOpen) return;
+
+      requestAnimationFrame(addWindowListeners);
+
+      onWatcherCleanup(removeWindowListeners);
     },
   );
 
-  onUnmounted(() => {
-    window.removeEventListener("click", handleClickOutside);
-    window.removeEventListener("scroll", markScroll, true);
-    window.removeEventListener("wheel", markScroll as any);
-    window.removeEventListener("touchmove", markScroll as any);
-  });
+  onUnmounted(removeWindowListeners);
 
   return {
     open,
@@ -321,8 +438,13 @@ export const useSelect = <T extends string | string[]>(
     expandedItems,
     effectiveExpandedItems,
     customAddVisible,
+    selectedValues,
+    hasMax,
+    isAtMax,
+    minSelected,
     isSelected,
     isPartiallySelected,
+    isBlocked,
     getLabel,
     toggleExpand,
     handleOpen,

package/templates/components/Select/index.ts

@@ -4,6 +4,7 @@ import {
   type UixySelectOptionType,
   type UixySingleSelectProps,
   type UixyMultipleSelectProps,
+  type UixySelectMaxBehavior,
 } from "./Select.types";
 
 export {
@@ -12,4 +13,5 @@ export {
   type UixySelectOptionType,
   type UixySingleSelectProps,
   type UixyMultipleSelectProps,
+  type UixySelectMaxBehavior,
 };

package/templates/components/Sheet/Sheet.component.vue

@@ -11,7 +11,7 @@
             :style="{ zIndex }"
             data-uixy-overlay
             @click.self="handleClick"
-            class="fixed left-0 top-0 size-full bg-white/5 backdrop-blur-[2px] dark:bg-gray-900/5"
+            class="fixed left-0 top-0 size-full bg-white/5 [html[data-uixy-gpu=on]_&]:backdrop-blur-[2px] dark:bg-gray-900/5"
           />
           <motion.div
             initial="initial"
@@ -37,7 +37,7 @@
 <script setup lang="ts">
   import { AnimatePresence, motion } from "motion-v";
   import { useScale } from "../Scale";
-  import { useOverlayLayer } from "~/composables";
+  import { useOverlayLayer, useGpuAcceleration } from "~/composables";
   import type { UixySheetProps } from "./Sheet.types";
   import { sheetStyles } from "./Sheet.styles";
 
@@ -72,6 +72,8 @@
 
   const { zIndex, acquire, release } = useOverlayLayer();
 
+  useGpuAcceleration();
+
   const open = defineModel<boolean>();
 
   const handleClick = () => {

package/templates/components/index.ts

@@ -2,11 +2,17 @@ export * from "./Accordion";
 export * from "./Alert";
 export * from "./Avatar";
 export * from "./Badge";
+export * from "./Breadcrumb";
 export * from "./Button";
 export * from "./Calendar";
 export * from "./Card";
+export * from "./Chart";
 export * from "./Checkbox";
+export * from "./ColorPicker";
 export * from "./Command";
+export * from "./DatePicker";
+export * from "./DateRangePicker";
+export * from "./FileUpload";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./Input";
@@ -18,12 +24,14 @@ export * from "./PieChart";
 export * from "./Popover";
 export * from "./Radio";
 export * from "./Scale";
+export * from "./SegmentedControl";
 export * from "./Select";
 export * from "./Separator";
 export * from "./Sheet";
 export * from "./Skeleton";
 export * from "./Slider";
 export * from "./Switch";
+export * from "./Table";
 export * from "./TableOfContents";
 export * from "./Tabs";
 export * from "./Textarea";
@@ -32,4 +40,3 @@ export * from "./TimePicker";
 export * from "./Toast";
 export * from "./Toggle";
 export * from "./Tooltip";
-export * from "./ColorPicker";

package/templates/components.json

@@ -130,12 +130,12 @@
       "name": "Modal",
       "related-components": [],
       "packages": ["motion-v"],
-      "composables": ["useOverlayLayer"]
+      "composables": ["useOverlayLayer", "useGpuAcceleration"]
     },
     {
       "name": "PieChart",
       "related-components": [],
-      "packages": ["motion-v"],
+      "packages": [],
       "composables": []
     },
     {
@@ -178,7 +178,7 @@
       "name": "Sheet",
       "related-components": ["Scale"],
       "packages": ["motion-v"],
-      "composables": ["useOverlayLayer"]
+      "composables": ["useOverlayLayer", "useGpuAcceleration"]
     },
     {
       "name": "Skeleton",
@@ -213,7 +213,7 @@
     {
       "name": "Tabs",
       "related-components": [],
-      "packages": ["motion-v"],
+      "packages": ["motion-v", "uuid"],
       "composables": []
     },
     {