@dragonmastery/zinia-forms-core 0.3.13 → 0.3.16

package/dist/index.js

@@ -1,4 +1,4 @@
-import { provide, ref, computed, unref, inject, getCurrentInstance, watch, 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';
 
@@ -1612,7 +1612,16 @@ function useFormState(initialData, options) {
     isReady: !options?.hasFetchData,
     isLoading: !!options?.hasFetchData,
     loadError: null,
-    extraData: options?.extraData || {}
+    extraData: options?.extraData || {},
+    // Async cascading selection state
+    fetchedOptions: {},
+    loadingOptions: {},
+    asyncCascadingParents: {},
+    // Track child → parent relationships
+    // Auto-population loading state
+    loadingAutoPopulate: {},
+    populatingFields: {}
+    // Track which target fields are being populated
   });
   if (options?.calculationFn) {
     const reactiveUpdater = ReactiveUpdater.getInstance(options.storeName, options.debug || false);
@@ -2000,6 +2009,8 @@ function useForm(schema, options) {
     storeName: options.storeName,
     // Direct access to the reactive form data
     values: formState.state.data,
+    // Direct access to full state (for async cascading selects and advanced features)
+    state: formState.state,
     // Access to calculated values (now a computed property)
     get calculatedValues() {
       return formState.calculatedValues.value;
@@ -2094,6 +2105,137 @@ function useForm(schema, options) {
     swapArrayItemIds: (path, indexA, indexB) => swapArrayItemIds(formState.state, path, indexA, indexB),
     syncArrayItemIds: (path) => syncArrayItemIds(formState.state, path)
   };
+  const getNestedValue = (obj, path) => {
+    return path.split(".").reduce((current, key) => current?.[key], obj);
+  };
+  if (options.asyncCascadingSelects) {
+    Object.entries(options.asyncCascadingSelects).forEach(([_key, config]) => {
+      const { parentField, childField, fetchOptionsFn, clearOnParentChange = true } = config;
+      formState.state.asyncCascadingParents[childField] = parentField;
+      let abortController = null;
+      const fetchOptions = async (parentValue) => {
+        if (abortController) abortController.abort();
+        if (!parentValue) {
+          formState.state.fetchedOptions[childField] = [];
+          formState.state.loadingOptions[childField] = false;
+          return;
+        }
+        formState.state.loadingOptions[childField] = true;
+        abortController = new AbortController();
+        try {
+          const options2 = await fetchOptionsFn(parentValue);
+          if (!abortController.signal.aborted) {
+            formState.state.fetchedOptions[childField] = options2 || [];
+          }
+        } catch (error) {
+          if (error.name !== "AbortError" && !abortController.signal.aborted) {
+            formState.state.fetchedOptions[childField] = [];
+          }
+        } finally {
+          if (!abortController.signal.aborted) {
+            formState.state.loadingOptions[childField] = false;
+          }
+        }
+      };
+      const initialParent = getFieldValue(formState.state, parentField);
+      if (initialParent) {
+        fetchOptions(initialParent);
+      }
+      watch(
+        () => getFieldValue(formState.state, parentField),
+        (newVal, oldVal) => {
+          if (oldVal === void 0) return;
+          if (newVal === oldVal) return;
+          fetchOptions(newVal);
+          if (clearOnParentChange) {
+            setFieldValue(formState.state, initialFormData, childField, "", schema, schemaCache);
+          }
+        }
+      );
+    });
+  }
+  if (options.autoPopulate) {
+    Object.entries(options.autoPopulate).forEach(([sourceField, config]) => {
+      if (!config) return;
+      const autoPopulateConfig = config;
+      if (!autoPopulateConfig || !autoPopulateConfig.fields) return;
+      watch(
+        () => getFieldValue(formState.state, sourceField),
+        async (newValue, oldValue) => {
+          if (oldValue === void 0) return;
+          if (newValue === oldValue) return;
+          if (!newValue) {
+            if (autoPopulateConfig.fields) {
+              const targetFields2 = Object.keys(autoPopulateConfig.fields);
+              targetFields2.forEach((fieldName) => {
+                setFieldValue(formState.state, initialFormData, fieldName, "", schema, schemaCache);
+                formState.state.populatingFields[fieldName] = false;
+              });
+            }
+            return;
+          }
+          const fetchedOptions = formState.state.fetchedOptions[sourceField] || [];
+          const fetchedOption = fetchedOptions.find((opt) => opt.value === newValue);
+          const fieldMetadata = fieldsMetadata[sourceField];
+          const schemaOption = fieldMetadata?.options?.find((opt) => opt.value === newValue);
+          const isValueFromOption = !!fetchedOption || !!schemaOption;
+          if (!isValueFromOption) {
+            return;
+          }
+          let optionData = null;
+          const targetFields = autoPopulateConfig.fields ? Object.keys(autoPopulateConfig.fields) : [];
+          if (autoPopulateConfig.fetchDataFn) {
+            formState.state.loadingAutoPopulate[sourceField] = true;
+            targetFields.forEach((fieldName) => {
+              formState.state.populatingFields[fieldName] = true;
+            });
+            try {
+              optionData = await autoPopulateConfig.fetchDataFn(newValue);
+            } catch (error) {
+              console.error(`Error fetching auto-populate data for ${sourceField}:`, error);
+              formState.state.loadingAutoPopulate[sourceField] = false;
+              targetFields.forEach((fieldName) => {
+                formState.state.populatingFields[fieldName] = false;
+              });
+              return;
+            } finally {
+              formState.state.loadingAutoPopulate[sourceField] = false;
+            }
+          } else {
+            if (fetchedOption?.data) {
+              optionData = fetchedOption.data;
+            } else if (schemaOption && "data" in schemaOption && schemaOption.data) {
+              optionData = schemaOption.data;
+            }
+            targetFields.forEach((fieldName) => {
+              formState.state.populatingFields[fieldName] = true;
+            });
+          }
+          if (optionData && autoPopulateConfig.fields) {
+            Object.entries(autoPopulateConfig.fields).forEach(([fieldName, mapping]) => {
+              let value;
+              if (typeof mapping === "function") {
+                try {
+                  value = mapping(optionData);
+                } catch (error) {
+                  console.warn(`Auto-populate transform error for ${fieldName}:`, error);
+                  value = "";
+                }
+              } else {
+                value = getNestedValue(optionData, mapping) || "";
+              }
+              setFieldValue(formState.state, initialFormData, fieldName, value, schema, schemaCache);
+              formState.state.populatingFields[fieldName] = false;
+            });
+          } else {
+            targetFields.forEach((fieldName) => {
+              formState.state.populatingFields[fieldName] = false;
+            });
+          }
+        }
+      );
+    });
+  }
   if (options.autoProvide !== false) {
     provide(ZINIA_FORM_SCHEMA_KEY, schema);
     provide(ZINIA_FORM_KEY, form);
@@ -2579,6 +2721,7 @@ function useDataTableState(initialData = [], options = {}) {
     totalRows: 0
   });
   const sortDrawerOpen = ref(false);
+  const filterDrawerOpen = ref(false);
   const sorting = reactive({
     field: null,
     direction: "asc"
@@ -2705,6 +2848,7 @@ function useDataTableState(initialData = [], options = {}) {
     selection,
     // UI state
     sortDrawerOpen,
+    filterDrawerOpen,
     // Computed properties
     hasData,
     isEmpty,
@@ -3062,7 +3206,10 @@ function useDataTable(schema, options) {
     ui: {
       sortDrawerOpen: tableState.state.sortDrawerOpen,
       openSortDrawer: () => tableState.state.sortDrawerOpen.value = true,
-      closeSortDrawer: () => tableState.state.sortDrawerOpen.value = false
+      closeSortDrawer: () => tableState.state.sortDrawerOpen.value = false,
+      filterDrawerOpen: tableState.state.filterDrawerOpen,
+      openFilterDrawer: () => tableState.state.filterDrawerOpen.value = true,
+      closeFilterDrawer: () => tableState.state.filterDrawerOpen.value = false
     },
     // Metadata
     fieldsMetadata,
@@ -3136,6 +3283,7 @@ function useCursorDataTableState(initialData = [], options = {}) {
     // Track which page we're conceptually on
   });
   const sortDrawerOpen = ref(false);
+  const filterDrawerOpen = ref(false);
   const sorting = reactive({
     field: null,
     direction: "asc"
@@ -3279,6 +3427,7 @@ function useCursorDataTableState(initialData = [], options = {}) {
     selection,
     // UI state
     sortDrawerOpen,
+    filterDrawerOpen,
     // Computed properties
     hasData,
     isEmpty,
@@ -3637,7 +3786,10 @@ function useCursorDataTable(schema, options) {
     ui: {
       sortDrawerOpen: tableState.state.sortDrawerOpen,
       openSortDrawer: () => tableState.state.sortDrawerOpen.value = true,
-      closeSortDrawer: () => tableState.state.sortDrawerOpen.value = false
+      closeSortDrawer: () => tableState.state.sortDrawerOpen.value = false,
+      filterDrawerOpen: tableState.state.filterDrawerOpen,
+      openFilterDrawer: () => tableState.state.filterDrawerOpen.value = true,
+      closeFilterDrawer: () => tableState.state.filterDrawerOpen.value = false
     },
     // Metadata
     fieldsMetadata,
@@ -4637,6 +4789,7 @@ function createDaisyUICheckboxField() {
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const inputClass = [
       "checkbox",
       props.size ? `checkbox-${props.size}` : "",
@@ -4645,15 +4798,17 @@ function createDaisyUICheckboxField() {
       isTouched2 && hasErrors ? "checkbox-error" : "",
       props.class
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("div", { class: "form-control", children: [
       /* @__PURE__ */ jsxs("label", { class: "label cursor-pointer justify-start gap-2", children: [
-        /* @__PURE__ */ jsx("input", { class: inputClass, disabled: props.disabled, readonly: props.readonly, "data-testid": `${formState.storeName}-checkbox-field-${String(props.name)}`, ...inputProps }),
+        /* @__PURE__ */ jsx("input", { class: inputClass, disabled: isDisabled, readonly: props.readonly, "data-testid": `${formState.storeName}-checkbox-field-${String(props.name)}`, ...inputProps }),
         !props.hideLabel && /* @__PURE__ */ jsxs("span", { class: "label-text", children: [
           props.label || fieldMetadata.label,
           fieldMetadata.isRequired && /* @__PURE__ */ jsx("span", { class: "text-error", children: " *" })
         ] })
       ] }),
-      props.description && /* @__PURE__ */ jsx("p", { class: "text-sm mt-1", children: props.description }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "text-sm mt-1", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-sm text-error mt-1", children: formState.getError(props.name) })
     ] });
   };
@@ -4748,7 +4903,31 @@ function createDaisyUIComboboxField() {
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
     const normalizedProps = normalizePropsFromAttrs(props, propsDefinition, attrs);
     const allowCreate = computed(() => normalizedProps.allowCreate === true);
+    const fetchedOptions = computed(() => formState.state?.fetchedOptions?.[props.name] || []);
+    const isLoadingOptions = computed(() => formState.state?.loadingOptions?.[props.name] || false);
+    const isBeingPopulated = computed(() => formState.state?.populatingFields?.[props.name] || false);
+    const asyncCascadingParent = computed(() => formState.state?.asyncCascadingParents?.[props.name]);
+    const parentFieldName = computed(() => normalizedProps.dependsOn || asyncCascadingParent.value);
+    const parentValue = computed(() => {
+      if (parentFieldName.value) {
+        return formState.getValue(parentFieldName.value);
+      }
+      return null;
+    });
+    const isDisabled = computed(() => {
+      if (props.disabled) return true;
+      if (isLoadingOptions.value) return true;
+      if (isBeingPopulated.value) return true;
+      if (parentFieldName.value) {
+        const parentVal = parentValue.value;
+        return parentVal === null || parentVal === void 0 || parentVal === "";
+      }
+      return false;
+    });
     const getOptions = computed(() => {
+      if (fetchedOptions.value.length > 0) {
+        return fetchedOptions.value;
+      }
       if (normalizedProps.selectOptions) {
         return normalizedProps.selectOptions;
       }
@@ -5080,9 +5259,9 @@ function createDaisyUIComboboxField() {
               {
                 ref: inputElement,
                 class: inputClass,
-                placeholder: props.placeholder || "Search or type new value",
-                disabled: props.disabled,
-                autocomplete: "off",
+                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: "nope",
                 "data-testid": `${formState.storeName}-combobox-field-${String(props.name)}`,
                 ...inputProps
               }
@@ -5192,7 +5371,7 @@ function createDaisyUIComboboxField() {
           ]
         }
       ),
-      props.description && /* @__PURE__ */ jsx("p", { class: "text-sm mt-1", children: props.description }),
+      (isBeingPopulated.value ? "Loading..." : props.description) && /* @__PURE__ */ jsx("p", { class: "text-sm mt-1", children: isBeingPopulated.value ? "Loading..." : props.description }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) }),
       isNewValue.value && displayText.value && !hasErrors && /* @__PURE__ */ jsxs("p", { class: "text-success text-xs", children: [
         '\u2713 New value "',
@@ -5234,6 +5413,7 @@ function createDaisyUICurrencyField() {
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const inputClass = [
       "input",
       props.size ? `input-${props.size}` : "",
@@ -5242,6 +5422,8 @@ function createDaisyUICurrencyField() {
       isTouched2 && hasErrors ? "input-error" : "",
       props.class
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
       !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
         props.label || fieldMetadata.label,
@@ -5252,7 +5434,7 @@ function createDaisyUICurrencyField() {
         {
           class: inputClass,
           placeholder: props.placeholder,
-          disabled: props.disabled,
+          disabled: isDisabled,
           readonly: props.readonly,
           min: fieldMetadata.min,
           max: fieldMetadata.max,
@@ -5261,7 +5443,7 @@ function createDaisyUICurrencyField() {
           ...inputProps
         }
       ),
-      props.description && /* @__PURE__ */ jsx("p", { class: "", children: props.description }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
@@ -5330,6 +5512,7 @@ function createDaisyUIDateField() {
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const inputClass = [
       "input",
       props.size ? `input-${props.size}` : "",
@@ -5338,6 +5521,8 @@ function createDaisyUIDateField() {
       isTouched2 && hasErrors ? "input-error" : "",
       props.class
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
       !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
         props.label || fieldMetadata.label,
@@ -5348,7 +5533,7 @@ function createDaisyUIDateField() {
         {
           class: inputClass,
           placeholder: props.placeholder,
-          disabled: props.disabled,
+          disabled: isDisabled,
           readonly: props.readonly,
           min: props.min,
           max: props.max,
@@ -5356,7 +5541,7 @@ function createDaisyUIDateField() {
           ...inputProps
         }
       ),
-      props.description && /* @__PURE__ */ jsx("p", { class: "", children: props.description }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
@@ -5425,6 +5610,7 @@ function createDaisyUIDateTimeLocalField() {
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const inputClass = [
       "input",
       props.size ? `input-${props.size}` : "",
@@ -5433,6 +5619,8 @@ function createDaisyUIDateTimeLocalField() {
       isTouched2 && hasErrors ? "input-error" : "",
       props.class
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
       !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
         props.label || fieldMetadata.label,
@@ -5443,13 +5631,13 @@ function createDaisyUIDateTimeLocalField() {
         {
           class: inputClass,
           placeholder: props.placeholder,
-          disabled: props.disabled,
+          disabled: isDisabled,
           readonly: props.readonly,
           "data-testid": `${formState.storeName}-datetime-local-field-${String(props.name)}`,
           ...inputProps
         }
       ),
-      props.description && /* @__PURE__ */ jsx("p", { class: "", children: props.description }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
@@ -5497,6 +5685,7 @@ function createDaisyUIEmailField() {
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const inputClass = [
       "input",
       props.size ? `input-${props.size}` : "",
@@ -5505,6 +5694,8 @@ function createDaisyUIEmailField() {
       isTouched2 && hasErrors ? "input-error" : "",
       props.class
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
       !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
         props.label || fieldMetadata.label,
@@ -5515,13 +5706,13 @@ function createDaisyUIEmailField() {
         {
           class: inputClass,
           placeholder: props.placeholder,
-          disabled: props.disabled,
+          disabled: isDisabled,
           readonly: props.readonly,
           "data-testid": `${formState.storeName}-email-field-${String(props.name)}`,
           ...inputProps
         }
       ),
-      props.description && /* @__PURE__ */ jsx("p", { class: "", children: props.description }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
@@ -5566,6 +5757,7 @@ function createDaisyUIFileField() {
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const inputClass = [
       "file-input",
       props.size ? `file-input-${props.size}` : "",
@@ -5574,13 +5766,15 @@ function createDaisyUIFileField() {
       isTouched2 && hasErrors ? "file-input-error" : "",
       props.class
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("div", { class: "form-control", children: [
       !props.hideLabel && /* @__PURE__ */ jsx("label", { class: "label", children: /* @__PURE__ */ jsxs("span", { class: "label-text", children: [
         props.label || fieldMetadata.label,
         fieldMetadata.isRequired && /* @__PURE__ */ jsx("span", { class: "text-error", children: " *" })
       ] }) }),
-      /* @__PURE__ */ jsx("input", { class: inputClass, disabled: props.disabled, readonly: props.readonly, "data-testid": `${formState.storeName}-file-field-${String(props.name)}`, ...inputProps }),
-      props.description && /* @__PURE__ */ jsx("p", { class: "text-sm mt-1", children: props.description }),
+      /* @__PURE__ */ jsx("input", { class: inputClass, disabled: isDisabled, readonly: props.readonly, "data-testid": `${formState.storeName}-file-field-${String(props.name)}`, ...inputProps }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "text-sm mt-1", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-sm text-error mt-1", children: formState.getError(props.name) })
     ] });
   };
@@ -5777,6 +5971,7 @@ function createDaisyUINumberField() {
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const inputClass = [
       "input",
       props.size ? `input-${props.size}` : "",
@@ -5785,6 +5980,8 @@ function createDaisyUINumberField() {
       isTouched2 && hasErrors ? "input-error" : "",
       props.class
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
       !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
         props.label || fieldMetadata.label,
@@ -5795,7 +5992,7 @@ function createDaisyUINumberField() {
         {
           class: inputClass,
           placeholder: props.placeholder,
-          disabled: props.disabled,
+          disabled: isDisabled,
           readonly: props.readonly,
           min: fieldMetadata.min,
           max: fieldMetadata.max,
@@ -5804,7 +6001,7 @@ function createDaisyUINumberField() {
           ...inputProps
         }
       ),
-      props.description && /* @__PURE__ */ jsx("p", { class: "", children: props.description }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
@@ -5851,6 +6048,7 @@ function createDaisyUIPasswordField() {
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const inputClass = [
       "input",
       props.size ? `input-${props.size}` : "",
@@ -5859,6 +6057,8 @@ function createDaisyUIPasswordField() {
       isTouched2 && hasErrors ? "input-error" : "",
       props.class
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
       !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
         props.label || fieldMetadata.label,
@@ -5869,13 +6069,13 @@ function createDaisyUIPasswordField() {
         {
           class: inputClass,
           placeholder: props.placeholder,
-          disabled: props.disabled,
+          disabled: isDisabled,
           readonly: props.readonly,
           "data-testid": `${formState.storeName}-password-field-${String(props.name)}`,
           ...inputProps
         }
       ),
-      props.description && /* @__PURE__ */ jsx("p", { class: "", children: props.description }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
@@ -5907,6 +6107,7 @@ function createDaisyUIRadioField() {
     const currentValue = formState.getValue(props.name);
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const radioClass = [
       "radio",
       props.size ? `radio-${props.size}` : "",
@@ -5914,6 +6115,8 @@ function createDaisyUIRadioField() {
       isTouched2 && !hasErrors ? "radio-success" : "",
       isTouched2 && hasErrors ? "radio-error" : ""
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     const handleChange = (value) => {
       formState.setValue(props.name, value);
       formState.touchField(props.name);
@@ -5945,7 +6148,7 @@ function createDaisyUIRadioField() {
                 checked: currentValue === option.value,
                 onChange: () => handleChange(option.value),
                 onBlur: handleBlur,
-                disabled: props.disabled,
+                disabled: isDisabled,
                 readonly: props.readonly,
                 name: props.name,
                 "data-testid": `${formState.storeName}-radio-field-${String(props.name)}-${option.value}`,
@@ -5956,7 +6159,7 @@ function createDaisyUIRadioField() {
           ]
         }
       ) }, option.value)) }),
-      props.description && /* @__PURE__ */ jsx("p", { class: "label mt-2 text-sm text-base-content/70", children: props.description }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "label mt-2 text-sm text-base-content/70", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-sm text-error mt-2", children: formState.getError(props.name) })
     ] }) });
   };
@@ -6005,6 +6208,7 @@ function createDaisyUIRangeField() {
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const inputClass = [
       "range",
       props.size ? `range-${props.size}` : "",
@@ -6013,6 +6217,8 @@ function createDaisyUIRangeField() {
       isTouched2 && hasErrors ? "range-error" : "",
       props.class
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("div", { class: "form-control", children: [
       !props.hideLabel && /* @__PURE__ */ jsxs("label", { class: "label", children: [
         /* @__PURE__ */ jsxs("span", { class: "label-text", children: [
@@ -6021,8 +6227,8 @@ function createDaisyUIRangeField() {
         ] }),
         props.showValue && /* @__PURE__ */ jsx("span", { class: "label-text-alt", children: currentValue })
       ] }),
-      /* @__PURE__ */ jsx("input", { class: inputClass, disabled: props.disabled, readonly: props.readonly, "data-testid": `${formState.storeName}-range-field-${String(props.name)}`, ...inputProps }),
-      props.description && /* @__PURE__ */ jsx("p", { class: "text-sm mt-1", children: props.description }),
+      /* @__PURE__ */ jsx("input", { class: inputClass, disabled: isDisabled, readonly: props.readonly, "data-testid": `${formState.storeName}-range-field-${String(props.name)}`, ...inputProps }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "text-sm mt-1", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-sm text-error mt-1", children: formState.getError(props.name) })
     ] });
   };
@@ -6099,6 +6305,7 @@ function createDaisyUISearchField() {
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const inputClass = [
       "input",
       props.size ? `input-${props.size}` : "",
@@ -6107,6 +6314,8 @@ function createDaisyUISearchField() {
       isTouched2 && hasErrors ? "input-error" : "",
       props.class
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
       !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
         props.label || fieldMetadata.label,
@@ -6117,13 +6326,13 @@ function createDaisyUISearchField() {
         {
           class: inputClass,
           placeholder: props.placeholder,
-          disabled: props.disabled,
+          disabled: isDisabled,
           readonly: props.readonly,
           "data-testid": `${formState.storeName}-search-field-${String(props.name)}`,
           ...inputProps
         }
       ),
-      props.description && /* @__PURE__ */ jsx("p", { class: "", children: props.description }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
@@ -6174,13 +6383,20 @@ function createDaisyUISelectField() {
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
     const normalizedProps = normalizePropsFromAttrs(props, propsDefinition, attrs);
+    const asyncCascadingParent = computed(() => formState.state?.asyncCascadingParents?.[props.name]);
+    const parentFieldName = computed(() => normalizedProps.dependsOn || asyncCascadingParent.value);
     const parentValue = computed(() => {
-      if (normalizedProps.dependsOn) {
-        return formState.getValue(normalizedProps.dependsOn);
+      if (parentFieldName.value) {
+        return formState.getValue(parentFieldName.value);
       }
       return null;
     });
+    const fetchedOptions = computed(() => formState.state?.fetchedOptions?.[props.name] || []);
+    const isLoadingOptions = computed(() => formState.state?.loadingOptions?.[props.name] || false);
     const allOptions = computed(() => {
+      if (fetchedOptions.value.length > 0) {
+        return fetchedOptions.value;
+      }
       if (normalizedProps.selectOptions) {
         return normalizedProps.selectOptions;
       }
@@ -6226,14 +6442,26 @@ function createDaisyUISelectField() {
         { immediate: false }
       );
     }
+    const isBeingPopulated = computed(() => formState.state?.populatingFields?.[props.name] || false);
     const isDisabled = computed(() => {
       if (props.disabled) return true;
-      if (normalizedProps.dependsOn) {
+      if (isLoadingOptions.value) return true;
+      if (isBeingPopulated.value) return true;
+      if (parentFieldName.value) {
         const parentVal = parentValue.value;
         return parentVal === null || parentVal === void 0 || parentVal === "";
       }
       return false;
     });
+    const placeholderText = computed(() => {
+      if (isLoadingOptions.value) {
+        return props.placeholder ? `${props.placeholder} (Loading...)` : "Loading...";
+      }
+      if (isBeingPopulated.value) {
+        return props.placeholder ? `${props.placeholder} (Loading...)` : "Loading...";
+      }
+      return props.placeholder;
+    });
     const htmlAttrs = filterComponentPropsFromAttrs(propsDefinition, attrs);
     const selectProps = {
       value: formState.getValue(props.name),
@@ -6265,11 +6493,20 @@ function createDaisyUISelectField() {
         props.label || fieldMetadata.label,
         fieldMetadata.isRequired && /* @__PURE__ */ jsx("span", { class: "text-error", children: " *" })
       ] }),
-      /* @__PURE__ */ jsxs("select", { class: selectClass, disabled: isDisabled.value, "data-testid": `${formState.storeName}-select-field-${String(props.name)}`, ...selectProps, children: [
-        props.placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, selected: true, children: props.placeholder }),
-        getOptions.value.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
-      ] }),
-      props.description && /* @__PURE__ */ jsx("p", { class: "", children: props.description }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          class: selectClass,
+          disabled: isDisabled.value,
+          "data-testid": `${formState.storeName}-select-field-${String(props.name)}`,
+          ...selectProps,
+          children: [
+            placeholderText.value && /* @__PURE__ */ jsx("option", { value: "", disabled: true, selected: true, children: placeholderText.value }),
+            getOptions.value.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+          ]
+        }
+      ),
+      (isBeingPopulated.value ? "Loading..." : props.description) && /* @__PURE__ */ jsx("p", { class: "", children: isBeingPopulated.value ? "Loading..." : props.description }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
@@ -6318,6 +6555,7 @@ function createDaisyUITelField() {
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const inputClass = [
       "input",
       props.size ? `input-${props.size}` : "",
@@ -6326,6 +6564,8 @@ function createDaisyUITelField() {
       isTouched2 && hasErrors ? "input-error" : "",
       props.class
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
       !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
         props.label || fieldMetadata.label,
@@ -6336,13 +6576,13 @@ function createDaisyUITelField() {
         {
           class: inputClass,
           placeholder: props.placeholder,
-          disabled: props.disabled,
+          disabled: isDisabled,
           readonly: props.readonly,
           "data-testid": `${formState.storeName}-tel-field-${String(props.name)}`,
           ...inputProps
         }
       ),
-      props.description && /* @__PURE__ */ jsx("p", { class: "", children: props.description }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
@@ -6422,6 +6662,7 @@ function createDaisyUITextareaField() {
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const textareaClass = [
       "textarea",
       props.size ? `textarea-${props.size}` : "",
@@ -6430,6 +6671,8 @@ function createDaisyUITextareaField() {
       isTouched2 && hasErrors ? "textarea-error" : "",
       props.class
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
       !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
         props.label || fieldMetadata.label,
@@ -6441,14 +6684,14 @@ function createDaisyUITextareaField() {
           ref: setTextareaRef,
           class: textareaClass,
           placeholder: props.placeholder,
-          disabled: props.disabled,
+          disabled: isDisabled,
           readonly: props.readonly,
           rows: props.rows || 3,
           "data-testid": `${formState.storeName}-textarea-field-${String(props.name)}`,
           ...textareaProps
         }
       ),
-      props.description && /* @__PURE__ */ jsx("p", { class: "", children: props.description }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
@@ -6496,6 +6739,7 @@ function createDaisyUITextField() {
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const inputClass = [
       "input",
       props.size ? `input-${props.size}` : "",
@@ -6504,6 +6748,8 @@ function createDaisyUITextField() {
       isTouched2 && hasErrors ? "input-error" : "",
       props.class
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
       !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
         props.label || fieldMetadata.label,
@@ -6514,13 +6760,13 @@ function createDaisyUITextField() {
         {
           class: inputClass,
           placeholder: props.placeholder,
-          disabled: props.disabled,
+          disabled: isDisabled,
           readonly: props.readonly,
           "data-testid": `${formState.storeName}-text-field-${String(props.name)}`,
           ...inputProps
         }
       ),
-      props.description && /* @__PURE__ */ jsx("p", { class: "", children: props.description }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
@@ -6567,6 +6813,7 @@ function createDaisyUITimeField() {
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const inputClass = [
       "input",
       props.size ? `input-${props.size}` : "",
@@ -6575,6 +6822,8 @@ function createDaisyUITimeField() {
       isTouched2 && hasErrors ? "input-error" : "",
       props.class
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
       !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
         props.label || fieldMetadata.label,
@@ -6585,13 +6834,13 @@ function createDaisyUITimeField() {
         {
           class: inputClass,
           placeholder: props.placeholder,
-          disabled: props.disabled,
+          disabled: isDisabled,
           readonly: props.readonly,
           "data-testid": `${formState.storeName}-time-field-${String(props.name)}`,
           ...inputProps
         }
       ),
-      props.description && /* @__PURE__ */ jsx("p", { class: "", children: props.description }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
@@ -7127,6 +7376,7 @@ function createDaisyUIUrlField() {
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
+    const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
     const inputClass = [
       "input",
       props.size ? `input-${props.size}` : "",
@@ -7135,6 +7385,8 @@ function createDaisyUIUrlField() {
       isTouched2 && hasErrors ? "input-error" : "",
       props.class
     ].filter(Boolean).join(" ");
+    const isDisabled = props.disabled || isBeingPopulated;
+    const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
       !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
         props.label || fieldMetadata.label,
@@ -7145,13 +7397,13 @@ function createDaisyUIUrlField() {
         {
           class: inputClass,
           placeholder: props.placeholder,
-          disabled: props.disabled,
+          disabled: isDisabled,
           readonly: props.readonly,
           "data-testid": `${formState.storeName}-url-field-${String(props.name)}`,
           ...inputProps
         }
       ),
-      props.description && /* @__PURE__ */ jsx("p", { class: "", children: props.description }),
+      descriptionText && /* @__PURE__ */ jsx("p", { class: "", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
@@ -7497,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";
@@ -7833,20 +8087,19 @@ var SelectFilter = (props) => {
   return /* @__PURE__ */ jsxs(
     "select",
     {
-      value: props.value,
+      value: props.value || "",
       onChange: (e) => {
         const value = e.target.value;
         props.onFilterChange(props.field, value, "eq");
       },
-      class: "select select-bordered flex-1 sm:flex-none sm:w-auto",
+      class: "select select-bordered select-sm w-full",
       disabled: props.isLoading || props.isOptionsLoading,
       "data-testid": `datatable-filter-${props.field}-input`,
       children: [
         /* @__PURE__ */ jsx("option", { value: "", children: props.isOptionsLoading ? "Loading options..." : `All ${props.label}` }),
         props.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
       ]
-    },
-    props.field
+    }
   );
 };
 
@@ -7865,7 +8118,7 @@ function debounce(key, callback, delay = 300) {
 }
 var TextFilter = (props) => {
   const currentOperator = props.filterOperators.value[props.field] || "contains";
-  return /* @__PURE__ */ jsxs("div", { class: "flex gap-2 flex-1 sm:flex-none", children: [
+  return /* @__PURE__ */ jsxs("div", { class: "flex gap-1.5 md:gap-2 w-full items-center", children: [
     /* @__PURE__ */ jsxs(
       "select",
       {
@@ -7878,7 +8131,7 @@ var TextFilter = (props) => {
             props.onFilterChange(props.field, currentValue, newOperator);
           }
         },
-        class: "select select-bordered select-sm w-28",
+        class: "select select-bordered select-sm w-24 md:w-32 flex-shrink-0 text-xs",
         "data-testid": `datatable-filter-${props.field}-operator`,
         children: [
           /* @__PURE__ */ jsx("option", { value: "contains", children: "Contains" }),
@@ -7910,16 +8163,15 @@ var TextFilter = (props) => {
           }
         },
         placeholder: `Filter by ${props.label}`,
-        class: "input input-bordered input-sm flex-1",
+        class: "input input-bordered input-sm flex-1 min-w-0",
         "data-testid": `datatable-filter-${props.field}-input`
-      },
-      props.field
+      }
     )
   ] });
 };
 var NumberFilter = (props) => {
   const currentOperator = props.filterOperators.value[props.field] || "eq";
-  return /* @__PURE__ */ jsxs("div", { class: "flex gap-2 flex-1 sm:flex-none", children: [
+  return /* @__PURE__ */ jsxs("div", { class: "flex gap-1.5 md:gap-2 w-full items-center", children: [
     /* @__PURE__ */ jsxs(
       "select",
       {
@@ -7932,7 +8184,7 @@ var NumberFilter = (props) => {
             props.onFilterChange(props.field, currentValue, newOperator);
           }
         },
-        class: "select select-bordered select-sm w-16",
+        class: "select select-bordered select-sm w-16 md:w-20 flex-shrink-0 text-xs font-medium",
         "data-testid": `datatable-filter-${props.field}-operator`,
         children: [
           /* @__PURE__ */ jsx("option", { value: "eq", children: "=" }),
@@ -7965,10 +8217,9 @@ var NumberFilter = (props) => {
           }
         },
         placeholder: `Filter by ${props.label}`,
-        class: "input input-bordered input-sm flex-1",
+        class: "input input-bordered input-sm flex-1 min-w-0",
         "data-testid": `datatable-filter-${props.field}-input`
-      },
-      props.field
+      }
     )
   ] });
 };
@@ -7976,13 +8227,13 @@ var BooleanFilter = (props) => {
   return /* @__PURE__ */ jsxs(
     "select",
     {
-      value: props.value,
+      value: props.value || "",
       onChange: (e) => {
         const stringValue = e.target.value;
         const value = stringValue === "true" ? true : stringValue === "false" ? false : stringValue;
         props.onFilterChange(props.field, value, "eq");
       },
-      class: "select select-bordered flex-1 sm:flex-none sm:w-auto",
+      class: "select select-bordered select-sm w-full",
       disabled: props.isLoading,
       "data-testid": `datatable-filter-${props.field}-input`,
       children: [
@@ -7990,89 +8241,640 @@ var BooleanFilter = (props) => {
         /* @__PURE__ */ jsx("option", { value: "true", children: "Yes" }),
         /* @__PURE__ */ jsx("option", { value: "false", children: "No" })
       ]
-    },
-    props.field
+    }
   );
 };
-var FiltersRow = (props) => {
-  const filterOptionsState = inject(ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY);
-  const filterOptionsLoading = inject(ZINIA_DATA_TABLE_FILTER_OPTIONS_LOADING_KEY);
-  return /* @__PURE__ */ jsx("div", { class: "mb-4", children: /* @__PURE__ */ jsxs("div", { class: "flex flex-col sm:flex-row gap-3 sm:items-center", children: [
-    /* @__PURE__ */ jsx("div", { class: "flex flex-col sm:flex-row gap-2 sm:gap-3 flex-1", children: Object.entries(props.columns).map(([field, column]) => {
-      if (!column?.filterable) return null;
-      const currentFilter = props.activeFilters[field];
-      const currentValue = currentFilter?.value ?? "";
-      const filterType = getFilterType(field, column, props.fieldsMetadata);
-      if (filterType === "select") {
-        const filterOptions = getFilterOptions(field, column, props.fieldsMetadata, filterOptionsState?.value);
-        return /* @__PURE__ */ jsx(
-          SelectFilter,
-          {
-            field,
-            value: currentValue,
-            options: filterOptions,
-            label: column.label,
-            isLoading: props.isLoading,
-            isOptionsLoading: filterOptionsLoading?.value?.[field] ?? false,
-            onFilterChange: props.onFilterChange
-          },
-          field
-        );
+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] = "";
       }
-      if (filterType === "text") {
-        return /* @__PURE__ */ jsx(
-          TextFilter,
-          {
-            field,
-            value: currentValue,
-            label: column.label,
-            filterInputValues: props.filterInputValues,
-            filterOperators: props.filterOperators,
-            onFilterChange: props.onFilterChange
-          },
-          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 (filterType === "number") {
-        return /* @__PURE__ */ jsx(
-          NumberFilter,
-          {
-            field,
-            value: currentValue,
-            label: column.label,
-            filterInputValues: props.filterInputValues,
-            filterOperators: props.filterOperators,
-            onFilterChange: props.onFilterChange
-          },
-          field
-        );
+      if (state.selectedIndex === filteredOptions.value.length && isNewValue.value && props.allowCreate) {
+        handleSelectNewValue();
+        return;
       }
-      if (filterType === "boolean") {
-        return /* @__PURE__ */ jsx(
-          BooleanFilter,
-          {
-            field,
-            value: currentValue,
-            label: column.label,
-            isLoading: props.isLoading,
-            onFilterChange: props.onFilterChange
-          },
-          field
-        );
+      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,
+    void 0
+  );
+  const injectedFilterOptionsLoading = inject(
+    ZINIA_DATA_TABLE_FILTER_OPTIONS_LOADING_KEY,
+    void 0
+  );
+  const filterOptionsState = props.filterOptionsState || injectedFilterOptionsState;
+  const filterOptionsLoading = props.filterOptionsLoading || injectedFilterOptionsLoading;
+  const filterableColumns = Object.entries(props.columns).filter(([_, column]) => column?.filterable);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: `absolute inset-0 z-50 pointer-events-none ${props.isOpen ? "" : "hidden"}`,
+      style: { display: props.isOpen ? "block" : "none" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "absolute inset-0 bg-black/50 transition-opacity opacity-100 pointer-events-auto",
+            onClick: () => props.onClose()
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "aside",
+          {
+            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: [
+              /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between p-2 md:p-3 border-b border-base-300 bg-base-200/50 flex-shrink-0", children: [
+                /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("h3", { class: "text-sm md:text-base font-semibold", children: "Filters" }),
+                  Object.keys(props.activeFilters).length > 0 && /* @__PURE__ */ jsx("span", { class: "badge badge-primary badge-sm", children: Object.keys(props.activeFilters).length })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-2", children: [
+                  Object.keys(props.activeFilters).length > 0 && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: () => props.onClearAllFilters(),
+                      class: "btn btn-ghost btn-sm",
+                      disabled: props.isLoading,
+                      title: "Clear all filters",
+                      "data-testid": `${props.tableName || "datatable"}-filter-drawer-clear-all`,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "svg",
+                          {
+                            xmlns: "http://www.w3.org/2000/svg",
+                            class: "h-4 w-4 mr-1",
+                            fill: "none",
+                            viewBox: "0 0 24 24",
+                            stroke: "currentColor",
+                            children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M6 18L18 6M6 6l12 12" })
+                          }
+                        ),
+                        "Clear All"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      class: "btn btn-ghost btn-sm btn-circle hover:bg-base-300",
+                      onClick: () => props.onClose(),
+                      "aria-label": "Close filters",
+                      children: /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          xmlns: "http://www.w3.org/2000/svg",
+                          class: "h-5 w-5",
+                          fill: "none",
+                          viewBox: "0 0 24 24",
+                          stroke: "currentColor",
+                          children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M6 18L18 6M6 6l12 12" })
+                        }
+                      )
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { class: "p-2 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { class: "space-y-2", children: filterableColumns.map(([field, column]) => {
+                const currentFilter = props.activeFilters[field];
+                const currentValue = currentFilter?.value ?? "";
+                const filterType = getFilterType(field, column, props.fieldsMetadata);
+                const hasValue = currentValue !== "" && currentValue !== null && currentValue !== void 0;
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    class: `space-y-1.5 md:space-y-2 p-2 md:p-2.5 rounded-lg transition-colors ${hasValue ? "bg-primary/10 border border-primary/20" : "bg-base-200/30 border border-base-300/50"}`,
+                    children: [
+                      /* @__PURE__ */ jsxs("label", { class: "text-xs md:text-sm font-semibold text-base-content flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx("span", { children: column.label }),
+                        hasValue && /* @__PURE__ */ jsx("span", { class: "badge badge-primary badge-xs", children: "Active" })
+                      ] }),
+                      filterType === "select" && /* @__PURE__ */ jsx(
+                        SelectFilter,
+                        {
+                          field,
+                          value: currentValue,
+                          options: getFilterOptions(
+                            field,
+                            column,
+                            props.fieldsMetadata,
+                            filterOptionsState?.value || {}
+                          ),
+                          label: column.label,
+                          isLoading: props.isLoading,
+                          isOptionsLoading: filterOptionsLoading?.value?.[field] ?? false,
+                          onFilterChange: props.onFilterChange
+                        }
+                      ),
+                      filterType === "text" && /* @__PURE__ */ jsx(
+                        TextFilter,
+                        {
+                          field,
+                          value: currentValue,
+                          label: column.label,
+                          filterInputValues: props.filterInputValues,
+                          filterOperators: props.filterOperators,
+                          onFilterChange: props.onFilterChange
+                        }
+                      ),
+                      filterType === "number" && /* @__PURE__ */ jsx(
+                        NumberFilter,
+                        {
+                          field,
+                          value: currentValue,
+                          label: column.label,
+                          filterInputValues: props.filterInputValues,
+                          filterOperators: props.filterOperators,
+                          onFilterChange: props.onFilterChange
+                        }
+                      ),
+                      filterType === "boolean" && /* @__PURE__ */ jsx(
+                        BooleanFilter,
+                        {
+                          field,
+                          value: currentValue,
+                          label: column.label,
+                          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
+                        }
+                      )
+                    ]
+                  },
+                  field
+                );
+              }) }) }),
+              /* @__PURE__ */ jsx("div", { class: "p-2 md:p-3 border-t border-base-300 bg-base-200/50 flex-shrink-0", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  class: "btn btn-primary w-full btn-sm text-xs md:text-sm",
+                  onClick: () => props.onClose(),
+                  "data-testid": `${props.tableName || "datatable"}-filter-drawer-apply`,
+                  children: "Done"
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+function formatFilterValue(field, value, column, fieldsMetadata, filterOptionsState) {
+  if (value === "" || value === null || value === void 0) return "";
+  if (typeof value === "boolean") {
+    return value ? "Yes" : "No";
+  }
+  const options = getFilterOptions(field, column, fieldsMetadata, filterOptionsState);
+  if (options.length > 0) {
+    const option = options.find((opt) => opt.value === value);
+    if (option) return option.label;
+  }
+  if (value instanceof Date) {
+    return value.toLocaleDateString();
+  }
+  const strValue = String(value);
+  return strValue.length > 20 ? strValue.substring(0, 20) + "..." : strValue;
+}
+function getOperatorLabel(operator) {
+  const labels = {
+    eq: "=",
+    contains: "contains",
+    gt: ">",
+    lt: "<",
+    in: "in",
+    between: "between"
+  };
+  return labels[operator] || operator;
+}
+var FiltersRow = (props) => {
+  const filterableColumns = Object.entries(props.columns).filter(([_, column]) => column?.filterable);
+  const activeFilterBadges = filterableColumns.map(([field, column]) => {
+    const filter = props.activeFilters[field];
+    if (!filter || filter.value === "" || filter.value === null || filter.value === void 0) {
       return null;
-    }) }),
-    /* @__PURE__ */ jsxs("div", { class: "flex gap-2 sm:gap-3", children: [
+    }
+    const displayValue = formatFilterValue(
+      field,
+      filter.value,
+      column,
+      props.fieldsMetadata,
+      props.filterOptionsState?.value
+    );
+    const operator = filter.operator || "eq";
+    const operatorLabel = getOperatorLabel(operator);
+    return {
+      field,
+      label: column.label,
+      value: filter.value,
+      displayValue,
+      operator,
+      operatorLabel
+    };
+  }).filter((badge) => badge !== null);
+  const handleRemoveFilter = (field) => {
+    props.filterInputValues.value[field] = "";
+    if (props.filterOperators.value[field]) {
+      delete props.filterOperators.value[field];
+    }
+    props.onFilterChange(field, "", "eq");
+  };
+  return /* @__PURE__ */ jsxs("div", { class: "mb-4 space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxs(
         "button",
         {
-          onClick: () => props.onClearAllFilters(),
-          class: "btn btn-outline flex-1 sm:flex-none",
-          disabled: props.isLoading || props.filterCount === 0,
-          "data-testid": `${props.tableName || "datatable"}-filters-clear-all`,
+          onClick: () => {
+            if (props.filterDrawerOpen.value) {
+              props.onCloseFilterDrawer();
+            } else {
+              props.onOpenFilterDrawer();
+            }
+          },
+          class: "btn btn-outline btn-sm",
+          "data-testid": `${props.tableName || "datatable"}-filters-toggle`,
           children: [
-            /* @__PURE__ */ jsx("span", { class: "hidden sm:inline", children: "Clear Filters" }),
-            /* @__PURE__ */ jsx("span", { class: "sm:hidden", children: "Clear" })
+            /* @__PURE__ */ jsx("svg", { class: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+              }
+            ) }),
+            "Filters",
+            props.filterCount > 0 && /* @__PURE__ */ jsx("span", { class: "badge badge-primary badge-sm ml-1", children: props.filterCount })
           ]
         }
       ),
@@ -8080,55 +8882,43 @@ var FiltersRow = (props) => {
         "button",
         {
           onClick: () => props.onRefresh(),
-          class: "btn btn-primary flex-1 sm:flex-none",
+          class: "btn btn-primary btn-sm ml-auto",
           disabled: props.isLoading,
           "data-testid": `${props.tableName || "datatable"}-refresh`,
           children: [
-            props.isLoading && /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                class: "animate-spin -ml-1 mr-2 h-4 w-4",
-                xmlns: "http://www.w3.org/2000/svg",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "circle",
-                    {
-                      class: "opacity-25",
-                      cx: "12",
-                      cy: "12",
-                      r: "10",
-                      stroke: "currentColor",
-                      "stroke-width": "4"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      class: "opacity-75",
-                      fill: "currentColor",
-                      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { class: "hidden sm:inline", children: props.isLoading ? "Loading..." : "Refresh" }),
-            /* @__PURE__ */ jsx("span", { class: "sm:hidden", children: !props.isLoading && /* @__PURE__ */ jsx("svg", { class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round",
-                "stroke-width": "2",
-                d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-              }
-            ) }) })
+            props.isLoading && /* @__PURE__ */ jsx("span", { class: "loading loading-spinner loading-xs mr-2" }),
+            props.isLoading ? "Loading..." : "Refresh"
           ]
         }
       )
-    ] })
-  ] }) });
+    ] }),
+    activeFilterBadges.length > 0 && /* @__PURE__ */ jsx("div", { class: "flex flex-wrap items-center gap-2", children: activeFilterBadges.map((badge) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        class: "badge badge-primary badge-lg gap-1.5 px-3 py-2",
+        "data-testid": `${props.tableName || "datatable"}-filter-badge-${badge.field}`,
+        children: [
+          /* @__PURE__ */ jsxs("span", { class: "font-medium", children: [
+            badge.label,
+            ":"
+          ] }),
+          badge.operator !== "eq" && badge.operator !== "contains" && /* @__PURE__ */ jsx("span", { class: "opacity-70", children: badge.operatorLabel }),
+          /* @__PURE__ */ jsx("span", { children: badge.displayValue }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              class: "btn btn-ghost btn-xs btn-circle h-4 w-4 min-h-0 p-0 ml-1",
+              onClick: () => handleRemoveFilter(badge.field),
+              title: `Remove ${badge.label} filter`,
+              "data-testid": `${props.tableName || "datatable"}-filter-badge-${badge.field}-remove`,
+              children: /* @__PURE__ */ jsx("svg", { class: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M6 18L18 6M6 6l12 12" }) })
+            }
+          )
+        ]
+      },
+      badge.field
+    )) })
+  ] });
 };
 var LoadingSkeletons = (props) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -8575,7 +9365,9 @@ function createDaisyUIDataTable() {
     const actions = inject(ZINIA_DATA_TABLE_ACTIONS_KEY);
     const searchInputValue = inject(ZINIA_DATA_TABLE_SEARCH_INPUT_KEY);
     const filterInputValues = inject(ZINIA_DATA_TABLE_FILTER_INPUTS_KEY);
-    const filterOperators = inject(ZINIA_DATA_TABLE_FILTER_OPERATORS_KEY);
+    const filterOperators = inject(
+      ZINIA_DATA_TABLE_FILTER_OPERATORS_KEY
+    );
     const filterOptionsState = inject(ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY);
     const filterOptionsLoading = inject(ZINIA_DATA_TABLE_FILTER_OPTIONS_LOADING_KEY);
     const tableName = inject(ZINIA_DATA_TABLE_NAME_KEY);
@@ -8602,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) {
@@ -8627,7 +9440,7 @@ function createDaisyUIDataTable() {
         table.sort(field);
       }
     };
-    return /* @__PURE__ */ jsxs("div", { class: props.class, children: [
+    return /* @__PURE__ */ jsxs("div", { class: `relative ${props.class || ""}`, children: [
       options.search?.searchableFields && options.search.searchableFields.length > 0 && searchInputValue && /* @__PURE__ */ jsx(
         SearchInput,
         {
@@ -8642,23 +9455,6 @@ function createDaisyUIDataTable() {
           }
         }
       ),
-      Object.values(columns).some((col) => col?.filterable) && filterInputValues && filterOperators && /* @__PURE__ */ jsx(
-        FiltersRow,
-        {
-          columns,
-          activeFilters: table.filters.active,
-          filterInputValues,
-          filterOperators,
-          filterOptionsState,
-          filterOptionsLoading,
-          fieldsMetadata: table.fieldsMetadata,
-          isLoading: table.isLoading,
-          filterCount: table.filters.count,
-          onFilterChange: (field, value, operator) => table.setFilter(field, value, operator),
-          onClearAllFilters: () => table.clearAllFilters(),
-          onRefresh: () => table.refresh()
-        }
-      ),
       hasSelection.value && slots["selection-actions"] && /* @__PURE__ */ jsx(
         SelectionActions,
         {
@@ -8670,92 +9466,107 @@ function createDaisyUIDataTable() {
           triggerBulkAction: table.triggerBulkAction
         }
       ),
-      table.isLoading ? /* @__PURE__ */ jsx(
-        LoadingSkeletons,
-        {
-          pageSize: table.pagination.pageSize,
-          columnKeys: columnKeys.value,
-          hasSelection: hasSelection.value
-        }
-      ) : table.hasError ? (
-        /* Show error state */
-        /* @__PURE__ */ jsxs("div", { class: "mt-4", children: [
-          /* @__PURE__ */ jsx(ErrorDisplay, { error: table.error || "An error occurred while loading data" }),
-          /* @__PURE__ */ jsx("div", { class: "mt-4 flex justify-center", children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => table.refresh(),
-              class: "btn btn-primary",
-              children: [
-                /* @__PURE__ */ jsx("svg", { class: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    "stroke-linecap": "round",
-                    "stroke-linejoin": "round",
-                    "stroke-width": "2",
-                    d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                  }
-                ) }),
-                "Try Again"
-              ]
-            }
-          ) })
-        ] })
-      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          MobileCards,
+      /* @__PURE__ */ jsxs("div", { class: containerHeightClasses.value, style: containerHeightStyle.value, children: [
+        Object.values(columns).some((col) => col?.filterable) && filterInputValues && filterOperators && /* @__PURE__ */ jsx(
+          FiltersRow,
           {
-            data: table.data,
             columns,
-            columnKeys: columnKeys.value,
-            actions,
-            hasSelection: hasSelection.value,
-            selectionMode: selectionMode.value,
-            isAllSelected: table.selection.isAllSelected,
-            hasData: table.hasData,
-            isLoading: table.isLoading,
-            isEmpty: table.isEmpty,
-            sortingField: table.sorting.field,
-            sortingDirection: table.sorting.direction,
-            sortDrawerOpen: table.ui.sortDrawerOpen.value,
+            activeFilters: table.filters.active,
+            filterInputValues,
+            filterOperators,
+            filterOptionsState,
+            filterOptionsLoading,
             fieldsMetadata: table.fieldsMetadata,
-            slots,
-            tableName,
-            isRowSelected: (row) => table.isRowSelected(row),
-            onSelectAll: () => table.selectAll(),
-            onClearSelection: () => table.clearSelection(),
-            onSelectRow: (row) => table.selectRow(row),
-            onOpenSortDrawer: () => table.ui.openSortDrawer(),
-            onCloseSortDrawer: () => table.ui.closeSortDrawer(),
-            onClearSort: () => table.clearSort(),
-            onSort: (field, direction) => table.sort(field, direction)
+            isLoading: table.isLoading,
+            filterCount: table.filters.count,
+            filterDrawerOpen: table.ui.filterDrawerOpen,
+            onFilterChange: (field, value, operator) => table.setFilter(field, value, operator),
+            onClearAllFilters: () => table.clearAllFilters(),
+            onRefresh: () => table.refresh(),
+            onOpenFilterDrawer: () => table.ui.openFilterDrawer(),
+            onCloseFilterDrawer: () => table.ui.closeFilterDrawer()
           }
         ),
-        /* @__PURE__ */ jsx(
-          DesktopTable,
+        /* @__PURE__ */ jsx("div", { class: "w-full flex-1 min-h-0 overflow-auto", children: table.isLoading ? /* @__PURE__ */ jsx(
+          LoadingSkeletons,
           {
-            data: table.data,
-            columns,
+            pageSize: table.pagination.pageSize,
             columnKeys: columnKeys.value,
-            actions,
-            hasSelection: hasSelection.value,
-            selectionMode: selectionMode.value,
-            isAllSelected: table.selection.isAllSelected,
-            hasData: table.hasData,
-            isLoading: table.isLoading,
-            isEmpty: table.isEmpty,
-            sortingField: table.sorting.field,
-            sortingDirection: table.sorting.direction,
-            slots,
-            tableName,
-            isRowSelected: (row) => table.isRowSelected(row),
-            onSelectAll: () => table.selectAll(),
-            onClearSelection: () => table.clearSelection(),
-            onSelectRow: (row) => table.selectRow(row),
-            onSort: (field) => handleSort(field)
+            hasSelection: hasSelection.value
           }
-        ),
-        table.hasData && !table.isLoading && /* @__PURE__ */ jsx(
+        ) : table.hasError ? (
+          /* Show error state */
+          /* @__PURE__ */ jsxs("div", { class: "mt-4", children: [
+            /* @__PURE__ */ jsx(ErrorDisplay, { error: table.error || "An error occurred while loading data" }),
+            /* @__PURE__ */ jsx("div", { class: "mt-4 flex justify-center", children: /* @__PURE__ */ jsxs("button", { onClick: () => table.refresh(), class: "btn btn-primary", children: [
+              /* @__PURE__ */ jsx("svg", { class: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "2",
+                  d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                }
+              ) }),
+              "Try Again"
+            ] }) })
+          ] })
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            MobileCards,
+            {
+              data: table.data,
+              columns,
+              columnKeys: columnKeys.value,
+              actions,
+              hasSelection: hasSelection.value,
+              selectionMode: selectionMode.value,
+              isAllSelected: table.selection.isAllSelected,
+              hasData: table.hasData,
+              isLoading: table.isLoading,
+              isEmpty: table.isEmpty,
+              sortingField: table.sorting.field,
+              sortingDirection: table.sorting.direction,
+              sortDrawerOpen: table.ui.sortDrawerOpen.value,
+              fieldsMetadata: table.fieldsMetadata,
+              slots,
+              tableName,
+              isRowSelected: (row) => table.isRowSelected(row),
+              onSelectAll: () => table.selectAll(),
+              onClearSelection: () => table.clearSelection(),
+              onSelectRow: (row) => table.selectRow(row),
+              onOpenSortDrawer: () => table.ui.openSortDrawer(),
+              onCloseSortDrawer: () => table.ui.closeSortDrawer(),
+              onClearSort: () => table.clearSort(),
+              onSort: (field, direction) => table.sort(field, direction)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DesktopTable,
+            {
+              data: table.data,
+              columns,
+              columnKeys: columnKeys.value,
+              actions,
+              hasSelection: hasSelection.value,
+              selectionMode: selectionMode.value,
+              isAllSelected: table.selection.isAllSelected,
+              hasData: table.hasData,
+              isLoading: table.isLoading,
+              isEmpty: table.isEmpty,
+              sortingField: table.sorting.field,
+              sortingDirection: table.sorting.direction,
+              slots,
+              tableName,
+              isRowSelected: (row) => table.isRowSelected(row),
+              onSelectAll: () => table.selectAll(),
+              onClearSelection: () => table.clearSelection(),
+              onSelectRow: (row) => table.selectRow(row),
+              onSort: (field) => handleSort(field)
+            }
+          )
+        ] }) }),
+        table.hasData && !table.isLoading && /* @__PURE__ */ jsx("div", { class: "flex-shrink-0 mt-4", children: /* @__PURE__ */ jsx(
           Pagination,
           {
             currentPage: table.pagination.currentPage,
@@ -8774,11 +9585,29 @@ function createDaisyUIDataTable() {
             onNextPage: () => table.nextPage(),
             onSetPageSize: (size) => table.setPageSize(size)
           }
+        ) }),
+        Object.values(columns).some((col) => col?.filterable) && filterInputValues && filterOperators && /* @__PURE__ */ jsx(
+          FilterDrawer,
+          {
+            isOpen: table.ui.filterDrawerOpen.value,
+            columns,
+            activeFilters: table.filters.active,
+            filterInputValues,
+            filterOperators,
+            filterOptionsState,
+            filterOptionsLoading,
+            fieldsMetadata: table.fieldsMetadata,
+            isLoading: table.isLoading,
+            tableName,
+            onClose: () => table.ui.closeFilterDrawer(),
+            onFilterChange: (field, value, operator) => table.setFilter(field, value, operator),
+            onClearAllFilters: () => table.clearAllFilters()
+          }
         )
       ] })
     ] });
   };
-  DaisyUIDataTable.props = ["class"];
+  DaisyUIDataTable.props = ["class", "name", "height"];
   return DaisyUIDataTable;
 }