v-uixy 1.3.0 → 1.4.0

package/templates/components/Select/SelectTreeItem.vue

@@ -0,0 +1,154 @@
+<template>
+  <li class="flex flex-col">
+    <div
+      :tabIndex="option.disabled ? -1 : 0"
+      :class="
+        itemStyles({
+          selected: isSelected(option),
+          disabled: !!option.disabled,
+        })
+      "
+      :style="{
+        paddingLeft: `${depth * 28 + 12}px`,
+        cursor: option.disabled ? 'not-allowed' : 'pointer',
+      }"
+      @click.stop="handleItemClick"
+    >
+      <div class="flex items-center gap-2 flex-1 min-h-6">
+        <div
+          v-if="hasChildren"
+          class="shrink-0 size-6 flex items-center justify-center -ml-1 hover:bg-gray-200 dark:hover:bg-gray-800 rounded transition cursor-pointer"
+          @click.stop="$emit('toggle-expand', getValue(option))"
+        >
+          <uixy-icon
+            name="chevron-right"
+            class="size-4.5 transition-transform"
+            :class="{ 'rotate-90': isExpanded }"
+          />
+        </div>
+        <span
+          class="truncate"
+          :class="{
+            'text-gray-400 dark:text-gray-600':
+              isNotSelectable && !option.disabled,
+          }"
+          >{{ option.label }}</span
+        >
+      </div>
+      <uixy-icon
+        v-if="isSelected(option)"
+        name="check"
+        class="absolute right-2 top-1/2 -translate-y-1/2 size-4"
+      />
+      <div
+        v-else-if="isPartiallySelected?.(option)"
+        class="absolute right-2 top-1/2 -translate-y-1/2 size-4 flex items-center justify-center"
+      >
+        <div class="h-0.5 w-2.5 rounded bg-current"></div>
+      </div>
+    </div>
+
+    <animate-presence>
+      <motion.ul
+        v-if="hasChildren && isExpanded"
+        class="flex flex-col gap-1 pt-1 overflow-hidden"
+        :initial="{ opacity: 0, height: 0 }"
+        :animate="{ opacity: 1, height: 'auto' }"
+        :exit="{ opacity: 0, height: 0 }"
+        :transition="{ duration: 0.15 }"
+      >
+        <SelectTreeItem
+          v-for="child in option.children"
+          :key="child.value ?? child.label"
+          :option="child"
+          :depth="depth + 1"
+          :is-selected="isSelected"
+          :is-partially-selected="isPartiallySelected"
+          :expanded-items="expandedItems"
+          :leaf-only="leafOnly"
+          :multiple="multiple"
+          :search-term="searchTerm"
+          :original-options="originalOptions"
+          @toggle-expand="$emit('toggle-expand', $event)"
+          @select="$emit('select', $event)"
+        />
+      </motion.ul>
+    </animate-presence>
+  </li>
+</template>
+
+<script setup lang="ts">
+  import { motion, AnimatePresence } from "motion-v";
+  import { itemStyles } from "./Select.styles";
+  import type { UixySelectOptionType } from "./Select.types";
+  import { UixyIcon } from "../Icon";
+
+  const props = defineProps<{
+    option: UixySelectOptionType;
+    depth: number;
+    isSelected: (option: UixySelectOptionType) => boolean;
+    isPartiallySelected?: (option: UixySelectOptionType) => boolean;
+    expandedItems: string[];
+    leafOnly?: boolean;
+    multiple?: boolean;
+    searchTerm?: string;
+    originalOptions?: UixySelectOptionType[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: "toggle-expand", value: string): void;
+    (e: "select", value: string): void;
+  }>();
+
+  const getValue = (option: UixySelectOptionType) =>
+    option.value ?? option.label;
+
+  const hasChildren = computed(
+    () => props.option.children && props.option.children.length > 0,
+  );
+
+  const hasChildrenInOriginal = computed(() => {
+    if (!props.originalOptions) return hasChildren.value;
+
+    const findInTree = (
+      options: UixySelectOptionType[],
+      value: string,
+    ): UixySelectOptionType | null => {
+      for (const opt of options) {
+        if ((opt.value ?? opt.label) === value) return opt;
+        if (opt.children && opt.children.length > 0) {
+          const found = findInTree(opt.children, value);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+
+    const originalOption = findInTree(
+      props.originalOptions,
+      getValue(props.option),
+    );
+    return originalOption?.children && originalOption.children.length > 0;
+  });
+
+  const isExpanded = computed(() =>
+    props.expandedItems.includes(getValue(props.option)),
+  );
+
+  const isNotSelectable = computed(
+    () =>
+      props.option.disabled ||
+      (props.leafOnly && hasChildrenInOriginal.value && !props.multiple),
+  );
+
+  const handleItemClick = () => {
+    if (props.option.disabled) return;
+
+    if (props.leafOnly && hasChildrenInOriginal.value && !props.multiple) {
+      emit("toggle-expand", getValue(props.option));
+      return;
+    }
+
+    emit("select", getValue(props.option));
+  };
+</script>

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

@@ -1,33 +1,238 @@
-import { onWatcherCleanup, watch } from "vue";
-import type { UixySelectOptionType } from "../Select.types";
+import {
+  onWatcherCleanup,
+  watch,
+  computed,
+  ref,
+  onUnmounted,
+  type Ref,
+} from "vue";
+import type { UixySelectOptionType, UixySelectProps } from "../Select.types";
 
-export const useSelect = <T>(
+const normalizeForSearch = (str: string): string =>
+  str.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "");
+
+const getValue = (option: UixySelectOptionType): string =>
+  option.value ?? option.label;
+
+const collectLeafValues = (option: UixySelectOptionType): string[] => {
+  if (!option.children || option.children.length === 0)
+    return [getValue(option)];
+  return option.children.flatMap(collectLeafValues);
+};
+
+const findInTree = (
   options: UixySelectOptionType[],
-  disabled: boolean,
-  onChange: (e: string) => void
+  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);
+      if (found) return found;
+    }
+  }
+  return null;
+};
+
+export const useSelect = <T extends string | string[]>(
+  props: UixySelectProps,
+  model: Ref<T>,
+  emit: (event: "change", v: string) => void,
+  dropdownRef?: Ref<HTMLElement | undefined>,
 ) => {
   const open = ref(false);
   const search = ref("");
   const refOptions = ref<HTMLDivElement>();
+  const lastScrollAt = ref(0);
+  const expandedItems = ref<string[]>([]);
 
-  const filteredOptions = computed(() =>
-    options.filter((option) =>
-      option.label.toLowerCase().includes(search.value.toLowerCase())
-    )
-  );
+  const filterTreeOptions = (
+    items: UixySelectOptionType[],
+    searchTerm: string,
+  ): UixySelectOptionType[] => {
+    if (!searchTerm) return items;
+    const normSearch = 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;
+    };
+    return items
+      .map(filterNode)
+      .filter((n): n is UixySelectOptionType => n !== null);
+  };
 
-  const handleOpen = (e?: MouseEvent) => {
-    if (disabled || (e && "badge" in (e?.target as HTMLDivElement).dataset))
+  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 collectParentsWithMatchingDescendants = (
+    items: UixySelectOptionType[],
+    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;
+        }
+      }
+      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 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 Array.isArray(model.value)
+      ? (model.value as string[]).includes(v)
+      : (model.value as string) === v;
+  };
+
+  const isPartiallySelected = (option: UixySelectOptionType): boolean => {
+    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 setMultiValues = (next: string[]) => {
+    (model.value as string[]) = next;
+  };
+
+  const toggleMultiValue = (v: string) => {
+    const prev = Array.isArray(model.value) ? (model.value as string[]) : [];
+    if (prev.includes(v)) {
+      setMultiValues(prev.filter((item) => item !== v));
+      return;
+    }
+    if (props.max && prev.length >= props.max) {
+      setMultiValues([...prev.slice(1), v]);
       return;
+    }
+    setMultiValues([...prev, v]);
+  };
+
+  const cascadeMultiTree = (option: UixySelectOptionType) => {
+    const leaves = collectLeafValues(option);
+    const prev = Array.isArray(model.value) ? (model.value as string[]) : [];
+    const allSelected = leaves.every((l) => prev.includes(l));
+    if (allSelected) {
+      setMultiValues(prev.filter((v) => !leaves.includes(v)));
+      return;
+    }
+    const merged = Array.from(new Set([...prev, ...leaves]));
+    if (props.max && merged.length > props.max) {
+      setMultiValues(merged.slice(merged.length - props.max));
+      return;
+    }
+    setMultiValues(merged);
+  };
 
+  const applyChange = (v: string) => {
+    if (!props.multiple) {
+      (model.value as string) = v;
+      return;
+    }
+    if (props.tree) {
+      const node = findInTree(props.options, v);
+      if (node?.children?.length) {
+        cascadeMultiTree(node);
+        return;
+      }
+    }
+    toggleMultiValue(v);
+  };
+
+  const handleClick = (value: string) => {
+    applyChange(value);
+    emit("change", value);
+    if (props.clearSearchOnSelect) search.value = "";
+    if (!props.multiple) open.value = false;
+  };
+
+  const handleClickSelectedOption = (item: string) => {
+    applyChange(item);
+    emit("change", item);
+  };
+
+  const handleDeselect = () => {
+    (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;
+    const lowerSearch = search.value.toLowerCase();
+    return !filteredOptions.value.some(
+      (opt) => opt.label.toLowerCase() === lowerSearch,
+    );
+  });
+
+  const handleCustomAdd = () => {
+    handleClick(search.value);
+  };
+
+  const handleOpen = (e?: MouseEvent) => {
+    if (
+      props.disabled ||
+      (e && "badge" in (e?.target as HTMLDivElement).dataset)
+    )
+      return;
     open.value = !open.value;
   };
 
   const handleKeydownSelect = (e: KeyboardEvent) => {
     const key = e.key;
-
     if (key === "Tab") return;
-
     if (key === "ArrowDown" || key === "Enter" || key === " ") {
       e.preventDefault();
       open.value = !open.value;
@@ -36,73 +241,76 @@ export const useSelect = <T>(
 
   const handleKeydownOption = (
     e: KeyboardEvent,
-    option: UixySelectOptionType
+    option: UixySelectOptionType,
   ) => {
     const key = e.key;
-
     if ((key === "Enter" || key === " ") && !option.disabled) {
       e.preventDefault();
-      return onChange(option.label);
+      return handleClick(getValue(option));
     }
-
     if (key !== "ArrowDown" && key !== "ArrowUp") return;
-
-    const container = refOptions.value;
-
+    const container = dropdownRef?.value ?? refOptions.value;
     if (!container) return;
-
     const focusables = Array.from(
       container.querySelectorAll<HTMLElement>(
-        "[select-dropdown] input, [select-dropdown] li"
-      )
+        "[select-dropdown] input, [select-dropdown] li",
+      ),
     ).filter(
       (el) =>
         el.tabIndex >= 0 &&
         el.getAttribute("aria-disabled") !== "true" &&
-        !el.hasAttribute("disabled")
+        !el.hasAttribute("disabled"),
     );
-
     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;
-
-    const nextEl = focusables[index];
-    nextEl?.focus();
+    focusables[index]?.focus();
   };
 
-  const handleClickSelectedOption = (item: string) => {
-    onChange(item);
+  const handleClickOutside = (e: MouseEvent) => {
+    if (Date.now() - lastScrollAt.value < 250) return;
+    const target = e.target as Node;
+    if (refOptions.value?.contains(target)) return;
+    if (dropdownRef?.value?.contains(target)) return;
+    const el = target as HTMLElement;
+    if (el.closest?.("[select-dropdown]")) return;
+    open.value = false;
   };
 
-  const handleClickOutside = (e: MouseEvent) => {
-    if (refOptions.value && !refOptions.value.contains(e.target as Node))
-      open.value = false;
+  const markScroll = () => {
+    lastScrollAt.value = Date.now();
   };
 
   watch(
     () => open.value,
-    (_, prevVal) => {
+    (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);
       });
-    }
+    },
   );
 
   onUnmounted(() => {
     window.removeEventListener("click", handleClickOutside);
+    window.removeEventListener("scroll", markScroll, true);
+    window.removeEventListener("wheel", markScroll as any);
+    window.removeEventListener("touchmove", markScroll as any);
   });
 
   return {
@@ -110,9 +318,19 @@ export const useSelect = <T>(
     search,
     refOptions,
     filteredOptions,
+    expandedItems,
+    effectiveExpandedItems,
+    customAddVisible,
+    isSelected,
+    isPartiallySelected,
+    getLabel,
+    toggleExpand,
     handleOpen,
     handleKeydownSelect,
     handleKeydownOption,
     handleClickSelectedOption,
+    handleClick,
+    handleDeselect,
+    handleCustomAdd,
   };
 };

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

@@ -79,4 +79,10 @@
       setScale(1);
     }
   );
+
+  onUnmounted(async () => {
+    await nextTick();
+
+    setScale(1);
+  });
 </script>

package/templates/components/Tabs/Tabs.component.vue

@@ -23,7 +23,16 @@
     </div>
     <slot name="nav-extra" />
     <div>
-      <animate-presence mode="wait" :initial="false">
+      <template v-if="props.keepAlive">
+        <div
+          v-for="tab in props.tabs"
+          :key="tab.value"
+          v-show="active === tab.value"
+        >
+          <slot :name="tab.value" />
+        </div>
+      </template>
+      <animate-presence v-else mode="wait" :initial="false">
         <motion.div
           :key="active"
           :initial="{ opacity: 0, y: 4 }"
@@ -55,6 +64,6 @@
   const layoutId = computed(() => `uixy-tabs-${uuidv4()}`);
 
   onBeforeMount(() => {
-    if (props.tabs.length > 0) active.value = props.tabs[0].value;
+    if (props.tabs.length > 0) active.value = props.tabs[0]?.value;
   });
 </script>

package/templates/components/Tabs/Tabs.types.ts

@@ -4,4 +4,5 @@ export interface UixyTabsProps {
     value: string | number;
   }[];
   variant: "primary" | "secondary";
+  keepAlive?: boolean;
 }

package/templates/components/Textarea/Textarea.component.vue

@@ -9,17 +9,19 @@
         :auto-focus="props.autoFocus"
         :rows="props.rows ?? 3"
         :max-length="props.maxLength"
-        :class="textareaStyles(
-              { status, noResize: !!props.noResize },
-              $attrs.class as string,
-            )"
+        :class="
+          textareaStyles(
+            { status, noResize: !!props.noResize },
+            $attrs.class as string,
+          )
+        "
         v-bind="filteredAttrs"
       />
       <label v-if="props.label" :for="id" :class="labelStyles({ status })">
         {{ props.label }}
       </label>
     </div>
-    <div class="h-4" v-if="!props.hideHelper">
+    <div v-if="!props.hideHelper" class="h-4">
       <animate-presence mode="wait" :initial="false">
         <motion.div
           :initial="{ opacity: 0, y: '-4px' }"
@@ -29,12 +31,7 @@
           :key="status"
         >
           <p
-            :class="
-              helperStyles({
-                status,
-                align: props.alignText ?? 'left',
-              })
-            "
+            :class="helperStyles({ status, align: props.alignText ?? 'left' })"
           >
             {{ text }}
           </p>
@@ -68,7 +65,7 @@
   const id = useId();
 
   const status = computed(() =>
-    props.disabled ? "disabled" : props.status ?? "default"
+    props.disabled ? "disabled" : (props.status ?? "default"),
   );
 
   const text = computed(
@@ -78,6 +75,6 @@
         default: props.helperText,
         disabled: "",
         valid: "",
-      }[props.status ?? "default"])
+      })[props.status ?? "default"],
   );
 </script>

package/templates/components/Textarea/Textarea.styles.ts

@@ -17,7 +17,7 @@ export const textareaStyles = styles(
       true: "resize-none",
       false: "",
     },
-  }
+  },
 );
 
 export const labelStyles = styles(
@@ -29,7 +29,7 @@ export const labelStyles = styles(
       disabled: "text-gray-500 dark:text-gray-700",
       valid: "",
     },
-  }
+  },
 );
 
 export const helperStyles = styles(
@@ -46,5 +46,5 @@ export const helperStyles = styles(
       right: "text-right",
       center: "text-center",
     },
-  }
+  },
 );