v-uixy 1.3.1 → 1.4.0

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/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,44 +9,35 @@
         :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>
-    <animate-presence mode="wait" :initial="false">
-      <motion.div
-        v-if="!!text"
-        class="overflow-hidden"
-        :initial="{ height: 0 }"
-        :animate="{ height: 'auto' }"
-        :exit="{ height: 0 }"
-        :transition="{ duration: 0.1, ease: 'easeInOut' }"
-      >
-        <animate-presence mode="wait" :initial="false">
-          <motion.p
-            :key="status + text"
-            :class="
-              helperStyles({
-                status,
-                align: props.alignText ?? 'left',
-              })
-            "
-            :initial="{ opacity: 0, y: -4 }"
-            :animate="{ opacity: 1, y: 0 }"
-            :exit="{ opacity: 0, y: 4 }"
-            :transition="{ duration: 0.12, ease: 'easeInOut', delay: 0.1 }"
+    <div v-if="!props.hideHelper" class="h-4">
+      <animate-presence mode="wait" :initial="false">
+        <motion.div
+          :initial="{ opacity: 0, y: '-4px' }"
+          :animate="{ opacity: 1, y: 0 }"
+          :exit="{ opacity: 0, y: '-4px' }"
+          :transition="{ duration: 0.125 }"
+          :key="status"
+        >
+          <p
+            :class="helperStyles({ status, align: props.alignText ?? 'left' })"
           >
             {{ text }}
-          </motion.p>
-        </animate-presence>
-      </motion.div>
-    </animate-presence>
+          </p>
+        </motion.div>
+      </animate-presence>
+    </div>
   </div>
 </template>
 
@@ -74,7 +65,7 @@
   const id = useId();
 
   const status = computed(() =>
-    props.disabled ? "disabled" : props.status ?? "default"
+    props.disabled ? "disabled" : (props.status ?? "default"),
   );
 
   const text = computed(
@@ -84,6 +75,6 @@
         default: props.helperText,
         disabled: "",
         valid: "",
-      }[props.status ?? "default"])
+      })[props.status ?? "default"],
   );
 </script>

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

@@ -17,11 +17,11 @@ export const textareaStyles = styles(
       true: "resize-none",
       false: "",
     },
-  }
+  },
 );
 
 export const labelStyles = styles(
-  "transition-colors ease-in-out duration-150 text-xs font-500",
+  "transition-colors ease-in-out duration-150 text-sm font-500",
   {
     status: {
       default: "",
@@ -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",
     },
-  }
+  },
 );

package/templates/components/Textarea/Textarea.types.ts

@@ -10,4 +10,5 @@ export interface UixyTextareaProps {
   noResize?: boolean;
   rows?: number;
   maxLength?: number;
+  hideHelper?: boolean;
 }

package/templates/components/TimePicker/TimePicker.component.vue

@@ -62,29 +62,34 @@
 
   const validateAndFormatTime = (
     value: string,
-    type: "hour" | "minute" | "second"
-  ) => {
+    type: "hour" | "minute" | "second",
+  ): string => {
     const num = parseInt(value, 10);
     if (isNaN(num)) return "00";
-
-    let validatedNum = num;
-
-    if (type === "hour") validatedNum = Math.min(23, Math.max(0, num));
-    else if (type === "minute") validatedNum = Math.min(59, Math.max(0, num));
-    else validatedNum = Math.min(59, Math.max(0, num));
-
-    return validatedNum < 10 ? `0${validatedNum}` : `${validatedNum}`;
+    const max = type === "hour" ? 23 : 59;
+    const clamped = Math.max(0, Math.min(max, num));
+    return clamped < 10 ? `0${clamped}` : `${clamped}`;
   };
 
   const handleChange = (event: Event, type: "hour" | "minute" | "second") => {
     const target = event.target as HTMLInputElement;
-    const valueStr = validateAndFormatTime(target.value, type);
-    const valueNum = Number.parseInt(valueStr, 10);
+    const value = target.value.replace(/\D/g, "");
+
+    if (value === "") return;
+
+    let num = parseInt(value, 10);
 
-    model.value = {
-      ...model.value,
-      [type]: Number.isFinite(valueNum) ? valueNum : 0,
-    };
+    if (type === "hour") {
+      if (props.allowMidnight && num >= 24) {
+        num = 0;
+      } else if (num > 23) {
+        num = 23;
+      }
+    } else {
+      if (num > 59) num = 59;
+    }
+
+    model.value = { ...model.value, [type]: num };
   };
 
   const displaySeparator = (order: "first" | "second") => {
@@ -92,7 +97,6 @@
 
     if (order === "first") {
       if (!model.value?.hasOwnProperty("hour")) return false;
-
       if (
         model.value?.hasOwnProperty("minute") ||
         model.value?.hasOwnProperty("second")
@@ -102,7 +106,6 @@
 
     if (order === "second") {
       if (!model.value?.hasOwnProperty("second")) return false;
-
       if (
         model.value?.hasOwnProperty("hour") ||
         model.value?.hasOwnProperty("minute")

package/templates/components/TimePicker/TimePicker.styles.ts

@@ -1,5 +1,5 @@
 import styles from "~/utils/styles";
 
 export const timePickerStyles = styles(
-  "flex items-center justify-between gap-3 rounded-2 border border-gray-300 bg-gray-100 p-2 shadow-xs dark:border-gray-900 dark:bg-black"
+  "flex items-center justify-start gap-2 rounded-1 border border-gray-300 bg-white dark:bg-gray-1000 px-2 py-0.5 min-h-[38px] text-sm transition-colors ease-in-out duration-150 shadow-xs dark:border-gray-900",
 );

package/templates/components/TimePicker/TimePicker.types.ts

@@ -1,3 +1,4 @@
 export interface UixyTimePickerProps {
   disabled?: boolean;
+  allowMidnight?: boolean;
 }

package/templates/components.json

@@ -111,7 +111,7 @@
     {
       "name": "Popover",
       "related-components": [],
-      "packages": ["motion-v"],
+      "packages": ["motion-v", "uuid"],
       "composables": ["usePosition"]
     },
     {

package/templates/composables/usePosition.ts

@@ -39,12 +39,27 @@ export function usePosition({ direction = "bottom" }: UsePositionOptions) {
     const tooltipRect = refElement.value.getBoundingClientRect();
     const targetRect = target.value.getBoundingClientRect();
     const winW = window.innerWidth;
+    const winH = window.innerHeight;
 
     let top: number;
     const scrollY = hasFixedParent(target.value) ? 0 : window.scrollY;
 
-    top =
+    const spaceBelow = winH - targetRect.bottom;
+    const spaceAbove = targetRect.top;
+    const fitsBelow = spaceBelow >= tooltipRect.height + 6;
+    const fitsAbove = spaceAbove >= tooltipRect.height + 6;
+
+    const effectiveDirection =
       direction === "top"
+        ? fitsAbove || !fitsBelow
+          ? "top"
+          : "bottom"
+        : fitsBelow || !fitsAbove
+          ? "bottom"
+          : "top";
+
+    top =
+      effectiveDirection === "top"
         ? targetRect.top - tooltipRect.height - 6 + scrollY
         : targetRect.bottom + 6 + scrollY;
 
@@ -80,7 +95,7 @@ export function usePosition({ direction = "bottom" }: UsePositionOptions) {
         window.removeEventListener("resize", updatePosition);
       }
     },
-    { flush: "post" }
+    { flush: "post" },
   );
 
   onBeforeUnmount(() => {