@dragonmastery/zinia-forms-core 0.3.15 → 0.3.16

package/dist/index.d.ts

@@ -1170,6 +1170,14 @@ interface DeleteModalProps<FormType = any> {
 interface DataTableProps<FormType> {
     class?: string;
     name?: string;
+    /**
+     * Height behavior for the table container
+     * - 'auto' (default): Table expands to fill available space with a minimum height to prevent squishing
+     * - 'fixed': Uses fixed height (850px, max 90vh) - original behavior
+     * - number: Fixed pixel height (e.g., 600)
+     * - string: Custom CSS height value (e.g., '50vh', '600px')
+     */
+    height?: 'auto' | 'fixed' | number | string;
 }
 
 /**
@@ -2048,9 +2056,10 @@ interface ColumnDefinition<TData, TField extends keyof TData> {
     textWrap?: 'truncate' | 'wrap';
     format?: (value: TData[TField], row: TData) => string;
     render?: (value: TData[TField], row: TData) => any;
-    filterType?: 'text' | 'select' | 'number' | 'boolean';
+    filterType?: 'text' | 'select' | 'number' | 'boolean' | 'combobox';
     filterOptions?: FilterOptionItem[];
     filterOptionsLoader?: () => Promise<FilterOptionItem[]>;
+    filterAllowCreate?: boolean;
     sortLabels?: {
         asc: string;
         desc: string;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { watch, provide, ref, computed, unref, inject, getCurrentInstance, reactive, nextTick, Teleport } from 'vue';
+import { reactive, watch, provide, ref, computed, unref, inject, getCurrentInstance, nextTick, Teleport } from 'vue';
 import { z } from 'zod';
 import { jsxs, jsx, Fragment } from 'vue/jsx-runtime';
 
@@ -5261,7 +5261,7 @@ function createDaisyUIComboboxField() {
                 class: inputClass,
                 placeholder: isBeingPopulated.value ? "Loading..." : isLoadingOptions.value ? "Loading options..." : parentFieldName.value && !parentValue.value ? "Select parent field first" : props.placeholder || "Search or type new value",
                 disabled: isDisabled.value,
-                autocomplete: "off",
+                autocomplete: "nope",
                 "data-testid": `${formState.storeName}-combobox-field-${String(props.name)}`,
                 ...inputProps
               }
@@ -7749,6 +7749,8 @@ function getFilterType(field, column, fieldsMetadata) {
         return "number";
       case "checkbox":
         return "boolean";
+      case "combobox":
+        return "combobox";
       case "select":
       case "radio":
         return column.filterOptions || fieldMetadata?.options ? "select" : "text";
@@ -8242,6 +8244,366 @@ var BooleanFilter = (props) => {
     }
   );
 };
+var comboboxState = reactive({});
+var ComboboxFilter = (props) => {
+  if (!comboboxState[props.field]) {
+    comboboxState[props.field] = {
+      isOpen: false,
+      selectedIndex: -1
+    };
+  }
+  const state = comboboxState[props.field];
+  const searchQuery = computed(() => props.filterInputValues.value[props.field] || "");
+  const selectedOption = computed(() => {
+    if (!props.value) return "";
+    return props.options.find((opt) => opt.value === props.value)?.label || String(props.value);
+  });
+  if (!(props.field in props.filterInputValues.value) && props.value) {
+    const label = selectedOption.value;
+    if (label) {
+      props.filterInputValues.value[props.field] = label;
+    }
+  }
+  const filteredOptions = computed(() => {
+    const query = searchQuery.value.trim().toLowerCase();
+    if (!query) {
+      return props.options;
+    }
+    return props.options.filter((opt) => opt.label.toLowerCase().includes(query));
+  });
+  const isNewValue = computed(() => {
+    if (!props.allowCreate || !searchQuery.value.trim()) return false;
+    const query = searchQuery.value.trim();
+    return !props.options.some((opt) => opt.label.toLowerCase() === query.toLowerCase());
+  });
+  const isInvalidValue = computed(() => {
+    if (!searchQuery.value.trim()) return false;
+    if (props.allowCreate) return false;
+    const query = searchQuery.value.trim();
+    return !props.options.some((opt) => opt.label.toLowerCase() === query.toLowerCase());
+  });
+  const handleInput = (e) => {
+    const value = e.target.value;
+    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");
+    }
+  };
+  const handleSelectOption = (option) => {
+    props.filterInputValues.value[props.field] = option.label;
+    props.onFilterChange(props.field, option.value, "eq");
+    state.isOpen = false;
+    state.selectedIndex = -1;
+  };
+  const handleSelectNewValue = () => {
+    const newValue = searchQuery.value.trim();
+    if (newValue) {
+      props.onFilterChange(props.field, newValue, "eq");
+      state.isOpen = false;
+      state.selectedIndex = -1;
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      state.isOpen = false;
+      state.selectedIndex = -1;
+      if (props.value) {
+        props.filterInputValues.value[props.field] = selectedOption.value;
+      } else {
+        props.filterInputValues.value[props.field] = "";
+      }
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (state.selectedIndex >= 0 && state.selectedIndex < filteredOptions.value.length) {
+        handleSelectOption(filteredOptions.value[state.selectedIndex]);
+        return;
+      }
+      if (state.selectedIndex === filteredOptions.value.length && isNewValue.value && props.allowCreate) {
+        handleSelectNewValue();
+        return;
+      }
+      if (searchQuery.value.trim() === "") {
+        state.isOpen = false;
+        state.selectedIndex = -1;
+        if (props.value) {
+          props.onFilterChange(props.field, "", "eq");
+          props.filterInputValues.value[props.field] = "";
+        }
+        return;
+      }
+      const currentLabel = selectedOption.value;
+      const queryMatchesCurrentValue = currentLabel && searchQuery.value.trim().toLowerCase() === currentLabel.toLowerCase();
+      if (queryMatchesCurrentValue) {
+        state.isOpen = false;
+        state.selectedIndex = -1;
+        return;
+      }
+      if (isInvalidValue.value) {
+        state.isOpen = false;
+        state.selectedIndex = -1;
+        const currentLabel2 = selectedOption.value;
+        if (currentLabel2) {
+          props.filterInputValues.value[props.field] = currentLabel2;
+        } else {
+          props.filterInputValues.value[props.field] = "";
+        }
+        return;
+      }
+      if (isNewValue.value && state.selectedIndex < 0 && props.allowCreate) {
+        handleSelectNewValue();
+        return;
+      }
+      const matchingOption = props.options.find(
+        (opt) => opt.label.toLowerCase() === searchQuery.value.trim().toLowerCase()
+      );
+      if (matchingOption) {
+        handleSelectOption(matchingOption);
+        return;
+      }
+      state.isOpen = false;
+      state.selectedIndex = -1;
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      e.stopPropagation();
+      state.isOpen = true;
+      const totalOptions = filteredOptions.value.length + (isNewValue.value && props.allowCreate ? 1 : 0);
+      if (totalOptions > 0) {
+        const currentIndex = state.selectedIndex;
+        const newIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % totalOptions;
+        state.selectedIndex = newIndex;
+        nextTick(() => {
+          scrollToSelectedOption(newIndex);
+        });
+      }
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      e.stopPropagation();
+      state.isOpen = true;
+      const totalOptions = filteredOptions.value.length + (isNewValue.value && props.allowCreate ? 1 : 0);
+      if (totalOptions > 0) {
+        const currentIndex = state.selectedIndex;
+        const newIndex = currentIndex < 0 ? totalOptions - 1 : (currentIndex - 1 + totalOptions) % totalOptions;
+        state.selectedIndex = newIndex;
+        nextTick(() => {
+          scrollToSelectedOption(newIndex);
+        });
+      }
+      return;
+    }
+  };
+  const handleFocus = () => {
+    state.isOpen = true;
+  };
+  const scrollToSelectedOption = (index) => {
+    const container = document.querySelector(`[data-combobox-dropdown="${props.field}"]`);
+    if (!container) return;
+    const optionId = index === filteredOptions.value.length ? "option-new" : `option-${index}`;
+    const selectedElement = container.querySelector(`#${optionId}`);
+    if (!selectedElement) return;
+    const elementTop = selectedElement.offsetTop;
+    const elementHeight = selectedElement.offsetHeight;
+    const containerHeight = container.clientHeight;
+    const containerScrollTop = container.scrollTop;
+    if (elementTop < containerScrollTop) {
+      container.scrollTop = elementTop;
+    } else if (elementTop + elementHeight > containerScrollTop + containerHeight) {
+      container.scrollTop = elementTop + elementHeight - containerHeight;
+    }
+  };
+  const handleBlur = (e) => {
+    const relatedTarget = e.relatedTarget || document.activeElement;
+    const container = document.querySelector(`[data-combobox-container="${props.field}"]`);
+    if (container && container.contains(relatedTarget)) {
+      return;
+    }
+    state.isOpen = false;
+    const currentQuery = searchQuery.value.trim();
+    const currentValue = props.value;
+    const currentLabel = selectedOption.value;
+    if (currentQuery === "") {
+      if (currentValue) {
+        props.onFilterChange(props.field, "", "eq");
+        props.filterInputValues.value[props.field] = "";
+      }
+    } else {
+      const queryMatchesCurrentValue = currentLabel && currentQuery.toLowerCase() === currentLabel.toLowerCase();
+      if (isInvalidValue.value) {
+        if (currentLabel) {
+          props.filterInputValues.value[props.field] = currentLabel;
+        } else {
+          props.filterInputValues.value[props.field] = "";
+        }
+        return;
+      }
+      if (!queryMatchesCurrentValue) {
+        const matchingOption = props.options.find((opt) => opt.label.toLowerCase() === currentQuery.toLowerCase());
+        if (matchingOption) {
+          props.onFilterChange(props.field, matchingOption.value, "eq");
+        } else if (props.allowCreate) {
+          props.onFilterChange(props.field, currentQuery, "eq");
+        } else {
+          if (currentLabel) {
+            props.filterInputValues.value[props.field] = currentLabel;
+          }
+        }
+      } else {
+        if (currentLabel && currentQuery !== currentLabel) {
+          props.filterInputValues.value[props.field] = currentLabel;
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { class: "relative w-full", "data-combobox-container": props.field, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value: searchQuery.value,
+        onInput: handleInput,
+        onKeydown: handleKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        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`
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { class: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none", children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "h-4 w-4 text-base-content/50",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        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(
+      "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",
+        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",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              class: "h-4 w-4 text-error flex-shrink-0",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { class: "text-sm", children: [
+            /* @__PURE__ */ jsx("p", { class: "font-medium text-error", children: "Invalid value" }),
+            /* @__PURE__ */ jsxs("p", { class: "text-error/80", children: [
+              '"',
+              searchQuery.value,
+              '" is not a valid option. Please select from the list.'
+            ] })
+          ] })
+        ] }) }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          filteredOptions.value.map((option, index) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              id: `option-${index}`,
+              role: "option",
+              "aria-selected": index === state.selectedIndex,
+              class: index === state.selectedIndex ? "bg-base-200" : "",
+              children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "#",
+                  tabindex: 0,
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleSelectOption(option);
+                  },
+                  onMousedown: (e) => {
+                    e.preventDefault();
+                  },
+                  class: "w-full",
+                  children: option.label
+                }
+              )
+            },
+            option.value
+          )),
+          isNewValue.value && props.allowCreate && /* @__PURE__ */ jsx(
+            "li",
+            {
+              id: "option-new",
+              role: "option",
+              "aria-selected": state.selectedIndex === filteredOptions.value.length,
+              class: state.selectedIndex === filteredOptions.value.length ? "bg-base-200" : "",
+              children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "#",
+                  tabindex: 0,
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleSelectNewValue();
+                  },
+                  onMousedown: (e) => {
+                    e.preventDefault();
+                  },
+                  class: "w-full",
+                  children: /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        class: "h-4 w-4 text-success",
+                        fill: "none",
+                        viewBox: "0 0 24 24",
+                        stroke: "currentColor",
+                        "stroke-width": "2",
+                        children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 4v16m8-8H4" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { class: "text-sm", children: [
+                      /* @__PURE__ */ jsx("span", { class: "font-medium text-success", children: "New value:" }),
+                      ' "',
+                      searchQuery.value,
+                      '"'
+                    ] })
+                  ] })
+                }
+              )
+            }
+          )
+        ] }) })
+      }
+    )
+  ] });
+};
 var FilterDrawer = (props) => {
   const injectedFilterOptionsState = inject(
     ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY,
@@ -8270,8 +8632,7 @@ var FilterDrawer = (props) => {
         /* @__PURE__ */ jsxs(
           "aside",
           {
-            class: "absolute top-0 left-0 h-full w-full md:w-80 bg-base-100 flex flex-col shadow-xl transform transition-transform duration-300 ease-out translate-x-0 pointer-events-auto",
-            style: { maxHeight: "100%" },
+            class: "absolute top-0 left-0 h-full h-[600px] max-h-[90vh] w-full md:w-80 bg-base-100 flex flex-col shadow-xl transform transition-transform duration-300 ease-out translate-x-0 pointer-events-auto",
             onClick: (e) => e.stopPropagation(),
             "data-testid": `${props.tableName || "datatable"}-filter-drawer`,
             children: [
@@ -8388,6 +8749,25 @@ var FilterDrawer = (props) => {
                           isLoading: props.isLoading,
                           onFilterChange: props.onFilterChange
                         }
+                      ),
+                      filterType === "combobox" && /* @__PURE__ */ jsx(
+                        ComboboxFilter,
+                        {
+                          field,
+                          value: currentValue,
+                          options: getFilterOptions(
+                            field,
+                            column,
+                            props.fieldsMetadata,
+                            filterOptionsState?.value || {}
+                          ),
+                          label: column.label,
+                          isLoading: props.isLoading,
+                          isOptionsLoading: filterOptionsLoading?.value?.[field] ?? false,
+                          allowCreate: column.filterAllowCreate ?? false,
+                          filterInputValues: props.filterInputValues,
+                          onFilterChange: props.onFilterChange
+                        }
                       )
                     ]
                   },
@@ -9014,6 +9394,27 @@ function createDaisyUIDataTable() {
     });
     const selectionMode = computed(() => options.selection?.mode ?? "none");
     const hasSelection = computed(() => selectionMode.value !== "none");
+    const containerHeightClasses = computed(() => {
+      const height = props.height ?? "auto";
+      if (height === "fixed") {
+        return "relative h-[850px] max-h-[90vh] flex flex-col";
+      } else if (height === "auto") {
+        return "relative flex-1 min-h-[670px] flex flex-col";
+      } else if (typeof height === "number") {
+        return `relative flex flex-col`;
+      } else {
+        return "relative flex flex-col";
+      }
+    });
+    const containerHeightStyle = computed(() => {
+      const height = props.height;
+      if (typeof height === "number") {
+        return { height: `${height}px` };
+      } else if (typeof height === "string" && height !== "auto" && height !== "fixed") {
+        return { height };
+      }
+      return {};
+    });
     if (filterInputValues && Object.keys(filterInputValues.value).length === 0) {
       Object.entries(columns).forEach(([field, column]) => {
         if (column?.filterable) {
@@ -9065,7 +9466,7 @@ function createDaisyUIDataTable() {
           triggerBulkAction: table.triggerBulkAction
         }
       ),
-      /* @__PURE__ */ jsxs("div", { class: "relative h-[600px] max-h-[90vh] flex flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { class: containerHeightClasses.value, style: containerHeightStyle.value, children: [
         Object.values(columns).some((col) => col?.filterable) && filterInputValues && filterOperators && /* @__PURE__ */ jsx(
           FiltersRow,
           {
@@ -9086,7 +9487,7 @@ function createDaisyUIDataTable() {
             onCloseFilterDrawer: () => table.ui.closeFilterDrawer()
           }
         ),
-        /* @__PURE__ */ jsx("div", { class: "w-full overflow-auto", style: { maxHeight: "calc(100% - 80px)" }, children: table.isLoading ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { class: "w-full flex-1 min-h-0 overflow-auto", children: table.isLoading ? /* @__PURE__ */ jsx(
           LoadingSkeletons,
           {
             pageSize: table.pagination.pageSize,
@@ -9206,7 +9607,7 @@ function createDaisyUIDataTable() {
       ] })
     ] });
   };
-  DaisyUIDataTable.props = ["class"];
+  DaisyUIDataTable.props = ["class", "name", "height"];
   return DaisyUIDataTable;
 }