v-uixy 1.3.0 → 1.4.0

package/templates/components/Input/Input.styles.ts

@@ -17,7 +17,7 @@ export const inputStyles = styles(
       right: "pr-8",
       none: "",
     },
-  }
+  },
 );
 
 export const iconStyles = styles(
@@ -41,7 +41,7 @@ export const iconStyles = styles(
       true: "pointer-events-auto cursor-pointer",
       false: "",
     },
-  }
+  },
 );
 
 export const labelStyles = styles(
@@ -53,7 +53,7 @@ export const labelStyles = styles(
       disabled: "text-gray-500 dark:text-gray-700",
       valid: "",
     },
-  }
+  },
 );
 
 export const helperStyles = styles(
@@ -65,5 +65,5 @@ export const helperStyles = styles(
       disabled: "text-gray-400 dark:text-gray-800",
       valid: "text-gray-600",
     },
-  }
+  },
 );

package/templates/components/Modal/Modal.component.vue

@@ -11,7 +11,6 @@
           :class="modalStyles($attrs.class as string)"
           data-modal
           @click.self="handleClick"
-          @keydown{esc}="handleClick"
         >
           <motion.div
             :initial="{ scale: 0.8 }"
@@ -32,7 +31,7 @@
   import { modalStyles } from "./Modal.styles";
   import { AnimatePresence, motion } from "motion-v";
 
-  defineProps<UixyModalProps>();
+  const props = defineProps<UixyModalProps>();
 
   defineOptions({
     inheritAttrs: false,
@@ -41,14 +40,30 @@
   const open = defineModel<boolean>();
 
   const handleClick = () => {
+    if (props.persistent) return;
+
     open.value = false;
   };
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      handleClick();
+      return;
+    }
+    if (e.key === "Enter") {
+      const target = e.target as HTMLElement;
+      if (target.tagName === "TEXTAREA" || target.tagName === "BUTTON") return;
+      const modalEl = document.querySelector("[data-modal]");
+      const form = modalEl?.querySelector("form");
+      form?.requestSubmit();
+    }
+  };
+
   const toggleSiblingsInert = (enable?: boolean) => {
     if (typeof document === "undefined") return;
 
     const modalEl = document.querySelector(
-      "[data-modal]"
+      "[data-modal]",
     ) as HTMLElement | null;
 
     Array.from(document.body.children).forEach((el) => {
@@ -68,7 +83,16 @@
     open,
     (isOpen) => {
       toggleSiblingsInert(isOpen);
+      if (isOpen) {
+        window.addEventListener("keydown", handleKeyDown);
+      } else {
+        window.removeEventListener("keydown", handleKeyDown);
+      }
     },
-    { immediate: true }
+    { immediate: true },
   );
+
+  onUnmounted(() => {
+    window.removeEventListener("keydown", handleKeyDown);
+  });
 </script>

package/templates/components/Modal/Modal.types.ts

@@ -1 +1,3 @@
-export interface UixyModalProps {}
+export interface UixyModalProps {
+  persistent?: boolean;
+}

package/templates/components/Popover/Popover.component.vue

@@ -27,12 +27,16 @@
 
 <script setup lang="ts">
   import { AnimatePresence, motion } from "motion-v";
+  import { v4 as uuidv4 } from "uuid";
   import { usePosition } from "~/composables";
   import { onWatcherCleanup } from "vue";
   import type { UixyPopoverProps } from "./Popover.types";
 
   const props = defineProps<UixyPopoverProps>();
 
+  const POPOVER_GROUP_EVENT = "uixy:popover-group-open";
+  const instanceId = uuidv4();
+
   const { active, handleOpen, handleLeave, styles, refElement } = usePosition({
     direction: props.direction ?? "bottom",
   });
@@ -45,22 +49,49 @@
       handleLeave();
   };
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") handleLeave();
+  };
+
   watch(
     () => active.value,
-    (_, prevVal) => {
+    (isActive, prevVal) => {
       if (prevVal) return;
 
+      if (isActive && props.group) {
+        window.dispatchEvent(
+          new CustomEvent(POPOVER_GROUP_EVENT, { detail: { id: instanceId } }),
+        );
+      }
+
       requestAnimationFrame(() => {
         window.addEventListener("click", handleClickOutside);
+        window.addEventListener("keydown", handleKeyDown);
       });
 
       onWatcherCleanup(() => {
         window.removeEventListener("click", handleClickOutside);
+        window.removeEventListener("keydown", handleKeyDown);
       });
-    }
+    },
   );
 
+  const handleGroupOpen = (e: Event) => {
+    const event = e as CustomEvent<{ id: string }>;
+    if (event.detail.id !== instanceId) handleLeave();
+  };
+
+  onMounted(() => {
+    if (props.group) {
+      window.addEventListener(POPOVER_GROUP_EVENT, handleGroupOpen);
+    }
+  });
+
   onUnmounted(() => {
     window.removeEventListener("click", handleClickOutside);
+    window.removeEventListener("keydown", handleKeyDown);
+    if (props.group) {
+      window.removeEventListener(POPOVER_GROUP_EVENT, handleGroupOpen);
+    }
   });
 </script>

package/templates/components/Popover/Popover.types.ts

@@ -1,4 +1,5 @@
 export interface UixyPopoverProps {
   direction?: "top" | "bottom";
   closeOnClick?: boolean;
+  group?: string;
 }

package/templates/components/Select/Select.component.vue

@@ -5,6 +5,7 @@
         :class="selectStyles({ status }, $attrs.class as string)"
         :tabIndex="props.disabled ? -1 : 0"
         :auto-focus="props.autoFocus"
+        ref="refTrigger"
         @click="handleOpen"
         @keydown="handleKeydownSelect"
         v-bind="filteredAttrs"
@@ -20,7 +21,7 @@
           :class="badgesWrapperStyles({ disabled: props.disabled })"
         >
           <uixy-badge
-            v-for="(item, index) in model"
+            v-for="(item, index) in model as string[]"
             data-badge
             variant="tertiary"
             size="xs"
@@ -28,64 +29,113 @@
             :key="`${item}--${index}`"
             @click.stop="handleClickSelectedOption(item)"
           >
-            {{ item }}
+            {{ getLabel(item) }}
           </uixy-badge>
         </div>
-        <p v-else>{{ model }}</p>
+        <p v-else>{{ getLabel(model as string) }}</p>
 
+        <uixy-icon
+          v-if="props.deselectable && !props.multiple && model"
+          name="close"
+          class="absolute right-7 top-1/2 h-4 w-4 -translate-y-1/2 cursor-pointer z-10 text-gray-500 dark:text-gray-600 hover:text-black dark:hover:text-gray-400"
+          @click.stop="handleDeselect"
+        />
         <uixy-icon name="chevron-down" :class="iconStyles({ open })" />
       </div>
-      <animate-presence>
-        <motion.div
-          v-if="open && !props.disabled"
-          class="scrollbar absolute top-full z-20 mt-[2px] max-h-[320px] w-full overflow-y-auto rounded-1 border border-gray-300 bg-white p-1 text-sm dark:border-gray-900 dark:bg-gray-1000"
-          :initial="{ opacity: 0, y: -4, scale: 0.8 }"
-          :animate="{ opacity: 1, y: 0, scale: 1 }"
-          :exit="{ opacity: 0, scale: 0.8 }"
-          :transition="{ duration: 0.15, ease: 'easeInOut' }"
-          select-dropdown
-        >
-          <div v-if="props.search" class="mb-2">
-            <uixy-input
-              v-model="search"
-              status="default"
-              icon="search"
-              iconPositon="right"
-              placeholder="Search..."
-              hide-helper
-              auto-focus
-            />
-          </div>
-          <ul class="flex flex-col gap-1 py-1">
-            <li
-              v-for="option in filteredOptions"
-              :tabIndex="option.disabled ? -1 : 0"
-              :key="option.label"
-              :class="
-                itemStyles({
-                  selected: isSelected(option),
-                  disabled: !!option.disabled,
-                })
-              "
-              @keydown="handleKeydownOption($event, option)"
-              @click="handleClick(option.label)"
-            >
-              {{ option.label }}
-              <uixy-icon
-                v-if="isSelected(option)"
-                name="check"
-                class="absolute right-2 top-2 size-4"
-              />
-            </li>
-            <li
-              v-if="filteredOptions.length === 0"
-              class="px-3 text-center dark:text-gray-600"
-            >
-              No results found
-            </li>
-          </ul>
-        </motion.div>
-      </animate-presence>
+
+      <teleport to="body">
+        <animate-presence>
+          <motion.div
+            v-if="open && !props.disabled"
+            class="scrollbar z-50 max-h-60 overflow-y-auto rounded-1 border border-gray-300 bg-white p-1 text-sm shadow-sm dark:border-gray-900 dark:bg-gray-1000"
+            :style="dropdownStyles"
+            :initial="{ opacity: 0, y: -4, scale: 0.98 }"
+            :animate="{ opacity: 1, y: 0, scale: 1 }"
+            :exit="{ opacity: 0, scale: 0.98 }"
+            :transition="{ duration: 0.12, ease: 'easeInOut' }"
+          >
+            <div ref="refDropdownEl" select-dropdown>
+              <div v-if="props.search" class="mb-2" @click.stop>
+                <uixy-input
+                  ref="refSearchInput"
+                  v-model="search"
+                  status="default"
+                  icon="search"
+                  iconPositon="right"
+                  placeholder="Search..."
+                  hide-helper
+                />
+              </div>
+
+              <ul v-if="props.tree" class="flex flex-col gap-1 py-1">
+                <template
+                  v-for="option in filteredOptions"
+                  :key="option.value ?? option.label"
+                >
+                  <SelectTreeItem
+                    :option="option"
+                    :depth="0"
+                    :is-selected="isSelected"
+                    :is-partially-selected="isPartiallySelected"
+                    :expanded-items="effectiveExpandedItems"
+                    :leaf-only="props.leafOnly"
+                    :multiple="props.multiple"
+                    :search-term="search"
+                    :original-options="props.options"
+                    @toggle-expand="toggleExpand"
+                    @select="handleClick"
+                  />
+                </template>
+
+                <li
+                  v-if="filteredOptions.length === 0"
+                  class="px-3 text-center dark:text-gray-600"
+                >
+                  No results found
+                </li>
+              </ul>
+
+              <ul v-else class="flex flex-col gap-1 py-1">
+                <li
+                  v-for="option in filteredOptions"
+                  :tabIndex="option.disabled ? -1 : 0"
+                  :key="option.value ?? option.label"
+                  :class="
+                    itemStyles({
+                      selected: isSelected(option),
+                      disabled: !!option.disabled,
+                    })
+                  "
+                  @keydown="handleKeydownOption($event, option)"
+                  @click="handleClick(option.value ?? option.label)"
+                >
+                  {{ option.label }}
+                  <uixy-icon
+                    v-if="isSelected(option)"
+                    name="check"
+                    class="absolute right-2 top-2 size-4"
+                  />
+                </li>
+
+                <li
+                  v-if="customAddVisible"
+                  class="relative py-2 px-3 rounded-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-900 text-gray-500 dark:text-gray-600"
+                  @click="handleCustomAdd"
+                >
+                  Add: "{{ search }}"
+                </li>
+
+                <li
+                  v-if="filteredOptions.length === 0 && !customAddVisible"
+                  class="px-3 text-center dark:text-gray-600"
+                >
+                  No results found
+                </li>
+              </ul>
+            </div>
+          </motion.div>
+        </animate-presence>
+      </teleport>
       <div v-if="props.label" :class="labelStyles({ status })">
         {{ props.label }}
       </div>
@@ -106,7 +156,8 @@
   </div>
 </template>
 
-<script setup lang="ts" generic="T extends (string | string[])">
+<script setup lang="ts" generic="T extends string | string[]">
+  import { nextTick, onWatcherCleanup, onMounted } from "vue";
   import {
     selectStyles,
     iconStyles,
@@ -115,16 +166,13 @@
     helperStyles,
     badgesWrapperStyles,
   } from "./Select.styles";
-  import type {
-    UixySelectEmits,
-    UixySelectOptionType,
-    UixySelectProps,
-  } from "./Select.types";
+  import type { UixySelectEmits, UixySelectProps } from "./Select.types";
   import { UixyBadge } from "../Badge";
   import { UixyIcon } from "../Icon";
   import { UixyInput } from "../Input";
   import { motion, AnimatePresence } from "motion-v";
   import { useSelect } from "./composables";
+  import SelectTreeItem from "./SelectTreeItem.vue";
 
   const props = defineProps<UixySelectProps>();
 
@@ -144,49 +192,155 @@
     return rest;
   });
 
-  const handleChange = (v: string) => {
-    if (props.multiple) {
-      let prevArray = model.value as string[];
-
-      if (!Array.isArray(prevArray)) prevArray = [];
+  const refTrigger = ref<HTMLElement>();
+  const refDropdownEl = ref<HTMLElement>();
+  const refSearchInput = ref<{ focus: () => void } | null>(null);
 
-      if (prevArray.includes(v)) {
-        (model.value as string[]) = prevArray.filter((item) => item !== v);
-      } else {
-        if (props.max && prevArray.length >= props.max)
-          (model.value as string[]) = [...prevArray.slice(1), v];
-
-        (model.value as string[]) = [...prevArray, v];
-      }
-    } else {
-      (model.value as string) = v;
-    }
-  };
+  const dropdownStyles = ref<Record<string, string>>({
+    position: "absolute",
+    top: "0px",
+    left: "0px",
+    width: "0px",
+  });
 
   const {
     refOptions,
     open,
     search,
     filteredOptions,
+    effectiveExpandedItems,
+    customAddVisible,
+    isSelected,
+    isPartiallySelected,
+    getLabel,
+    toggleExpand,
     handleOpen,
     handleKeydownSelect,
     handleKeydownOption,
     handleClickSelectedOption,
-  } = useSelect<T>(props.options, !!props.disabled, handleChange);
+    handleClick,
+    handleDeselect,
+    handleCustomAdd,
+  } = useSelect<T>(props, model as Ref<T>, emits, refDropdownEl);
+
+  const updateDropdownPosition = async () => {
+    if (!open.value || props.disabled) return;
+
+    await nextTick();
+    await new Promise<void>((r) => requestAnimationFrame(() => r()));
+
+    const trigger = refTrigger.value;
+    const dropdown = refDropdownEl.value;
+    if (!trigger || !dropdown) return;
+
+    const triggerRect = trigger.getBoundingClientRect();
+    const gap = 4;
+    const pad = 8;
+    const width = Math.max(80, triggerRect.width);
+
+    const scrollY = window.scrollY;
+    const scrollX = window.scrollX;
+
+    const cs = window.getComputedStyle(dropdown);
+    const maxH = Number.parseFloat(cs.maxHeight || "") || 240;
+    const desiredH = Math.min(dropdown.scrollHeight || 0, maxH);
+
+    const availableBelow = window.innerHeight - triggerRect.bottom - gap - pad;
+    const availableAbove = triggerRect.top - gap - pad;
 
-  const handleClick = (label: string) => {
-    handleChange(label);
+    const placeBelow =
+      desiredH <= availableBelow || availableBelow >= availableAbove;
 
-    if (!props.multiple) open.value = false;
+    let top =
+      (placeBelow
+        ? triggerRect.bottom + gap
+        : triggerRect.top - gap - desiredH) + scrollY;
+
+    const minTop = scrollY + pad;
+    const maxTop = scrollY + window.innerHeight - desiredH - pad;
+    top = Math.min(Math.max(minTop, top), Math.max(minTop, maxTop));
+
+    let left = triggerRect.left + scrollX;
+    const minLeft = scrollX + pad;
+    const maxLeft = scrollX + window.innerWidth - width - pad;
+    left = Math.min(Math.max(minLeft, left), Math.max(minLeft, maxLeft));
+
+    dropdownStyles.value = {
+      position: "absolute",
+      top: `${Math.round(top)}px`,
+      left: `${Math.round(left)}px`,
+      width: `${Math.round(width)}px`,
+    };
+  };
+
+  const onResize = () => {
+    void updateDropdownPosition();
+  };
+
+  const onAnyScroll = () => {
+    void updateDropdownPosition();
   };
 
-  const isSelected = (option: UixySelectOptionType) =>
-    Array.isArray(model.value)
-      ? model.value.includes(option.label)
-      : model.value === option.label;
+  watch(
+    () => open.value,
+    (isOpen) => {
+      emits("openChange", isOpen);
+
+      if (!isOpen) return;
+
+      void updateDropdownPosition();
+
+      if (props.search) {
+        nextTick(() => refSearchInput.value?.focus());
+      }
+
+      window.addEventListener("resize", onResize);
+      if (props.followOnScroll) {
+        window.addEventListener("scroll", onAnyScroll, true);
+      }
+
+      onWatcherCleanup(() => {
+        window.removeEventListener("resize", onResize);
+        window.removeEventListener("scroll", onAnyScroll, true);
+      });
+    },
+  );
+
+  onMounted(() => {
+    if (props.autoOpen && !props.disabled) {
+      const delayMs = (props.delay ?? 0) * 1000;
+      setTimeout(() => {
+        nextTick(() => {
+          open.value = true;
+        });
+      }, delayMs);
+    }
+  });
+
+  watch(search, () => {
+    if (!open.value) return;
+    void updateDropdownPosition();
+  });
+
+  watch(
+    () => filteredOptions.value.length,
+    () => {
+      if (!open.value) return;
+      void updateDropdownPosition();
+    },
+  );
+
+  watch(
+    () => model.value,
+    () => {
+      if (!open.value) return;
+      void updateDropdownPosition();
+    },
+    { deep: true },
+  );
 
   const status = computed(() =>
-    props.disabled ? "disabled" : props.status ?? "default"
+    props.disabled ? "disabled" : (props.status ?? "default"),
   );
 
   const text = computed(
@@ -196,6 +350,6 @@
         default: props.helperText,
         disabled: "",
         valid: "",
-      }[props.status ?? "default"])
+      })[props.status ?? "default"],
   );
 </script>

package/templates/components/Select/Select.styles.ts

@@ -13,7 +13,7 @@ export const selectStyles = styles(
       valid:
         "bg-white dark:bg-gray-1000 focus-visible:border-gray-500 dark:focus-visible:border-gray-600 cursor-pointer",
     },
-  }
+  },
 );
 
 export const iconStyles = styles(
@@ -23,7 +23,7 @@ export const iconStyles = styles(
       true: "rotate-180",
       false: "",
     },
-  }
+  },
 );
 
 export const labelStyles = styles(
@@ -36,7 +36,7 @@ export const labelStyles = styles(
         "text-gray-500 dark:text-gray-700 pointer-events-none select-none",
       valid: "",
     },
-  }
+  },
 );
 
 export const itemStyles = styles(
@@ -50,7 +50,7 @@ export const itemStyles = styles(
       true: "pointer-events-none text-gray-500 dark:text-gray-700",
       false: "",
     },
-  }
+  },
 );
 
 export const helperStyles = styles(
@@ -63,7 +63,7 @@ export const helperStyles = styles(
         "text-gray-400 dark:text-gray-800 pointer-events-none select-none",
       valid: "text-gray-600",
     },
-  }
+  },
 );
 
 export const badgesWrapperStyles = styles("flex flex-wrap gap-1", {

package/templates/components/Select/Select.types.ts

@@ -1,6 +1,8 @@
 export interface UixySelectOptionType {
   label: string;
+  value?: string;
   disabled?: boolean;
+  children?: UixySelectOptionType[];
 }
 
 export interface UixyMultipleSelectProps {
@@ -13,6 +15,7 @@ export interface UixySingleSelectProps {
 
 export interface UixySelectEmits {
   (event: "change", v: string): void;
+  (event: "openChange", isOpen: boolean): void;
 }
 
 export type UixySelectProps = {
@@ -26,6 +29,14 @@ export type UixySelectProps = {
   helperText?: string;
   errorText?: string;
   autoFocus?: boolean;
-  hideHelper?: boolean;
   max?: number;
+  tree?: boolean;
+  leafOnly?: boolean;
+  autoOpen?: boolean;
+  delay?: number;
+  hideHelper?: boolean;
+  deselectable?: boolean;
+  allowCustom?: boolean;
+  clearSearchOnSelect?: boolean;
+  followOnScroll?: boolean;
 } & (UixyMultipleSelectProps | UixySingleSelectProps);