@dragonmastery/zinia-forms-core 0.4.3 → 0.4.6

package/dist/index.js

@@ -8423,14 +8423,50 @@ var BooleanFilter = (props) => {
   );
 };
 var comboboxState = reactive({});
+var DROPDOWN_MAX_HEIGHT = 240;
+var MIN_SPACE_BELOW = 100;
 var ComboboxFilter = (props) => {
   if (!comboboxState[props.field]) {
     comboboxState[props.field] = {
       isOpen: false,
-      selectedIndex: -1
+      selectedIndex: -1,
+      position: { top: 0, left: 0, width: 0, openUpward: false }
     };
   }
   const state = comboboxState[props.field];
+  const updateDropdownPosition = () => {
+    const input = document.querySelector(`[data-combobox-input="${props.field}"]`);
+    if (!input) return;
+    const rect = input.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const openUpward = spaceBelow < MIN_SPACE_BELOW && spaceAbove > spaceBelow;
+    state.position = {
+      top: openUpward ? rect.top - 4 : rect.bottom + 4,
+      // 4px gap
+      left: rect.left,
+      width: rect.width,
+      openUpward
+    };
+  };
+  const handleScrollOrResize = () => {
+    if (state.isOpen) {
+      updateDropdownPosition();
+    }
+  };
+  let cleanupFns = [];
+  const setupEventListeners = () => {
+    window.addEventListener("scroll", handleScrollOrResize, true);
+    window.addEventListener("resize", handleScrollOrResize);
+    cleanupFns.push(() => {
+      window.removeEventListener("scroll", handleScrollOrResize, true);
+      window.removeEventListener("resize", handleScrollOrResize);
+    });
+  };
+  const cleanupEventListeners = () => {
+    cleanupFns.forEach((fn) => fn());
+    cleanupFns = [];
+  };
   const searchQuery = computed(() => props.filterInputValues.value[props.field] || "");
   const selectedOption = computed(() => {
     if (!props.value) return "";
@@ -8465,10 +8501,7 @@ var ComboboxFilter = (props) => {
     props.filterInputValues.value[props.field] = value;
     state.isOpen = true;
     state.selectedIndex = -1;
-    const exactMatch = props.options.find((opt) => opt.label.toLowerCase() === value.toLowerCase().trim());
-    if (exactMatch) {
-      props.onFilterChange(props.field, exactMatch.value, "eq");
-    }
+    updateDropdownPosition();
   };
   const handleSelectOption = (option) => {
     props.filterInputValues.value[props.field] = option.label;
@@ -8553,7 +8586,10 @@ var ComboboxFilter = (props) => {
     if (e.key === "ArrowDown") {
       e.preventDefault();
       e.stopPropagation();
-      state.isOpen = true;
+      if (!state.isOpen) {
+        state.isOpen = true;
+        updateDropdownPosition();
+      }
       const totalOptions = filteredOptions.value.length + (isNewValue.value && props.allowCreate ? 1 : 0);
       if (totalOptions > 0) {
         const currentIndex = state.selectedIndex;
@@ -8568,7 +8604,10 @@ var ComboboxFilter = (props) => {
     if (e.key === "ArrowUp") {
       e.preventDefault();
       e.stopPropagation();
-      state.isOpen = true;
+      if (!state.isOpen) {
+        state.isOpen = true;
+        updateDropdownPosition();
+      }
       const totalOptions = filteredOptions.value.length + (isNewValue.value && props.allowCreate ? 1 : 0);
       if (totalOptions > 0) {
         const currentIndex = state.selectedIndex;
@@ -8583,6 +8622,8 @@ var ComboboxFilter = (props) => {
   };
   const handleFocus = () => {
     state.isOpen = true;
+    updateDropdownPosition();
+    setupEventListeners();
   };
   const scrollToSelectedOption = (index) => {
     const container = document.querySelector(`[data-combobox-dropdown="${props.field}"]`);
@@ -8603,10 +8644,12 @@ var ComboboxFilter = (props) => {
   const handleBlur = (e) => {
     const relatedTarget = e.relatedTarget || document.activeElement;
     const container = document.querySelector(`[data-combobox-container="${props.field}"]`);
-    if (container && container.contains(relatedTarget)) {
+    const dropdown = document.querySelector(`[data-combobox-dropdown="${props.field}"]`);
+    if (container && container.contains(relatedTarget) || dropdown && dropdown.contains(relatedTarget)) {
       return;
     }
     state.isOpen = false;
+    cleanupEventListeners();
     const currentQuery = searchQuery.value.trim();
     const currentValue = props.value;
     const currentLabel = selectedOption.value;
@@ -8643,6 +8686,18 @@ var ComboboxFilter = (props) => {
       }
     }
   };
+  const dropdownStyle = computed(() => {
+    const pos = state.position;
+    return {
+      position: "fixed",
+      top: pos.openUpward ? "auto" : `${pos.top}px`,
+      bottom: pos.openUpward ? `${window.innerHeight - pos.top}px` : "auto",
+      left: `${pos.left}px`,
+      width: `${pos.width}px`,
+      maxHeight: `${DROPDOWN_MAX_HEIGHT}px`,
+      zIndex: 9999
+    };
+  });
   return /* @__PURE__ */ jsxs("div", { class: "relative w-full", "data-combobox-container": props.field, children: [
     /* @__PURE__ */ jsx(
       "input",
@@ -8656,7 +8711,8 @@ var ComboboxFilter = (props) => {
         placeholder: props.isOptionsLoading ? "Loading options..." : `Search ${props.label}`,
         class: "input input-bordered input-sm w-full",
         disabled: props.isLoading || props.isOptionsLoading,
-        "data-testid": `datatable-filter-${props.field}-input`
+        "data-testid": `datatable-filter-${props.field}-input`,
+        "data-combobox-input": props.field
       }
     ),
     /* @__PURE__ */ jsx("div", { class: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none", children: /* @__PURE__ */ jsx(
@@ -8671,11 +8727,15 @@ var ComboboxFilter = (props) => {
         children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8 9l4-4 4 4m0 6l-4 4-4-4" })
       }
     ) }),
-    state.isOpen && /* @__PURE__ */ jsx(
+    state.isOpen && /* @__PURE__ */ jsx(Teleport, { to: "body", children: /* @__PURE__ */ jsx(
       "div",
       {
         "data-combobox-dropdown": props.field,
-        class: "absolute z-50 mt-1 bg-base-100 border border-base-300 rounded-box shadow-lg max-h-60 overflow-auto w-full",
+        class: "bg-base-100 border border-base-300 rounded-box shadow-lg overflow-auto",
+        style: dropdownStyle.value,
+        onMousedown: (e) => {
+          e.preventDefault();
+        },
         children: /* @__PURE__ */ jsx("ul", { class: "menu w-full", role: "listbox", id: `combobox-listbox-${props.field}`, children: props.isOptionsLoading ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", { class: "text-sm text-base-content/70 p-2", children: "Loading options..." }) }) : filteredOptions.value.length === 0 && !isNewValue.value && !isInvalidValue.value ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", { class: "text-sm text-base-content/70 p-2", children: "No options available" }) }) : isInvalidValue.value ? /* @__PURE__ */ jsx("li", { class: "bg-error/10 border-l-4 border-error", children: /* @__PURE__ */ jsx("div", { class: "p-2", children: /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx(
             "svg",
@@ -8779,7 +8839,7 @@ var ComboboxFilter = (props) => {
           )
         ] }) })
       }
-    )
+    ) })
   ] });
 };
 var FilterDrawer = (props) => {
@@ -9336,7 +9396,8 @@ var MobileCards = (props) => {
             if (!column) return null;
             const value = row[field];
             const formattedValue = formatCellValue(value, field, row, column);
-            if (!value && value !== 0 && value !== false) return null;
+            const hasCustomSlot = !!props.slots[`cell-${field}`];
+            if (!hasCustomSlot && !value && value !== 0 && value !== false) return null;
             return /* @__PURE__ */ jsxs("div", { class: "flex justify-between items-center", children: [
               /* @__PURE__ */ jsxs("span", { class: "text-sm font-medium text-base-content/70 min-w-0 flex-shrink-0 mr-2", children: [
                 column.label,