@dragonmastery/zinia-forms-core 0.4.8 → 0.5.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { reactive, watch, provide, ref, computed, unref, inject, getCurrentInstance, nextTick, Teleport } from 'vue';
+import { reactive, watch, provide, ref, computed, unref, nextTick, onMounted, inject, getCurrentInstance, Teleport } from 'vue';
 import { z } from 'zod';
 import { jsxs, jsx, Fragment } from 'vue/jsx-runtime';
 
@@ -6767,6 +6767,166 @@ function createDaisyUIDeleteModal() {
   return DaisyUIDeleteModal;
 }
 
+// src/filtering/operators.ts
+var OPERATORS = {
+  // Comparison operators
+  EQUALS: "eq",
+  NOT_EQUALS: "ne",
+  // String operators
+  CONTAINS: "contains",
+  // case-insensitive contains (default for strings)
+  STARTS_WITH: "sw",
+  ENDS_WITH: "ew",
+  // Number/Date comparison operators
+  GREATER_THAN: "gt",
+  GREATER_THAN_OR_EQUAL: "gte",
+  LESS_THAN: "lt",
+  LESS_THAN_OR_EQUAL: "lte",
+  BETWEEN: "between",
+  // Array operators
+  IS_ONE_OF: "in",
+  IS_NOT_ONE_OF: "notIn",
+  // Null check operators
+  IS_EMPTY: "isEmpty",
+  IS_NOT_EMPTY: "isNotEmpty"
+};
+var DATA_TYPES = {
+  STRING: "string",
+  NUMBER: "number",
+  DATE: "date",
+  BOOLEAN: "boolean",
+  MONEY: "money",
+  PERCENTAGE: "percentage"
+};
+var NUMERIC_TYPES = [
+  DATA_TYPES.NUMBER,
+  DATA_TYPES.MONEY,
+  DATA_TYPES.PERCENTAGE
+];
+var OPERATORS_BY_TYPE = {
+  string: [
+    OPERATORS.EQUALS,
+    OPERATORS.NOT_EQUALS,
+    OPERATORS.CONTAINS,
+    OPERATORS.STARTS_WITH,
+    OPERATORS.ENDS_WITH,
+    OPERATORS.IS_ONE_OF,
+    OPERATORS.IS_NOT_ONE_OF
+  ],
+  number: [
+    OPERATORS.EQUALS,
+    OPERATORS.NOT_EQUALS,
+    OPERATORS.GREATER_THAN,
+    OPERATORS.GREATER_THAN_OR_EQUAL,
+    OPERATORS.LESS_THAN,
+    OPERATORS.LESS_THAN_OR_EQUAL,
+    OPERATORS.BETWEEN
+  ],
+  date: [
+    OPERATORS.EQUALS,
+    OPERATORS.NOT_EQUALS,
+    OPERATORS.GREATER_THAN,
+    OPERATORS.GREATER_THAN_OR_EQUAL,
+    OPERATORS.LESS_THAN,
+    OPERATORS.LESS_THAN_OR_EQUAL,
+    OPERATORS.BETWEEN,
+    OPERATORS.IS_EMPTY,
+    OPERATORS.IS_NOT_EMPTY
+  ],
+  boolean: [OPERATORS.EQUALS, OPERATORS.NOT_EQUALS],
+  enum: [
+    OPERATORS.EQUALS,
+    OPERATORS.NOT_EQUALS,
+    OPERATORS.IS_ONE_OF,
+    OPERATORS.IS_NOT_ONE_OF
+  ],
+  money: [
+    OPERATORS.EQUALS,
+    OPERATORS.NOT_EQUALS,
+    OPERATORS.GREATER_THAN,
+    OPERATORS.GREATER_THAN_OR_EQUAL,
+    OPERATORS.LESS_THAN,
+    OPERATORS.LESS_THAN_OR_EQUAL,
+    OPERATORS.BETWEEN
+  ],
+  percentage: [
+    OPERATORS.EQUALS,
+    OPERATORS.NOT_EQUALS,
+    OPERATORS.GREATER_THAN,
+    OPERATORS.GREATER_THAN_OR_EQUAL,
+    OPERATORS.LESS_THAN,
+    OPERATORS.LESS_THAN_OR_EQUAL,
+    OPERATORS.BETWEEN
+  ]
+};
+var SINGLE_VALUE_OPERATORS = [
+  OPERATORS.EQUALS,
+  OPERATORS.NOT_EQUALS,
+  OPERATORS.CONTAINS,
+  OPERATORS.STARTS_WITH,
+  OPERATORS.ENDS_WITH,
+  OPERATORS.GREATER_THAN,
+  OPERATORS.GREATER_THAN_OR_EQUAL,
+  OPERATORS.LESS_THAN,
+  OPERATORS.LESS_THAN_OR_EQUAL
+];
+var ARRAY_VALUE_OPERATORS = [
+  OPERATORS.IS_ONE_OF,
+  OPERATORS.IS_NOT_ONE_OF,
+  OPERATORS.BETWEEN
+];
+var NULL_CHECK_OPERATORS = [OPERATORS.IS_EMPTY, OPERATORS.IS_NOT_EMPTY];
+function isValidOperatorForType(operator, type) {
+  const validOperators = OPERATORS_BY_TYPE[type];
+  return validOperators.includes(operator);
+}
+function requiresSingleValue(operator) {
+  return SINGLE_VALUE_OPERATORS.includes(operator);
+}
+function requiresArrayValues(operator) {
+  return ARRAY_VALUE_OPERATORS.includes(operator);
+}
+function isNullCheckOperator(operator) {
+  return NULL_CHECK_OPERATORS.includes(operator);
+}
+
+// src/filtering/operator-map.ts
+var SHORTHAND_TO_OPERATOR = {
+  eq: OPERATORS.EQUALS,
+  ne: OPERATORS.NOT_EQUALS,
+  contains: OPERATORS.CONTAINS,
+  sw: OPERATORS.STARTS_WITH,
+  ew: OPERATORS.ENDS_WITH,
+  gt: OPERATORS.GREATER_THAN,
+  gte: OPERATORS.GREATER_THAN_OR_EQUAL,
+  lt: OPERATORS.LESS_THAN,
+  lte: OPERATORS.LESS_THAN_OR_EQUAL,
+  between: OPERATORS.BETWEEN,
+  in: OPERATORS.IS_ONE_OF,
+  notIn: OPERATORS.IS_NOT_ONE_OF,
+  isEmpty: OPERATORS.IS_EMPTY,
+  isNotEmpty: OPERATORS.IS_NOT_EMPTY,
+  // Legacy aliases for backward compatibility
+  isNull: OPERATORS.IS_EMPTY,
+  isNotNull: OPERATORS.IS_NOT_EMPTY
+};
+var DEFAULT_OPERATORS = {
+  string: OPERATORS.CONTAINS,
+  // 'contains' - always case-insensitive
+  number: OPERATORS.EQUALS,
+  // 'eq'
+  date: OPERATORS.EQUALS,
+  // 'eq'
+  boolean: OPERATORS.EQUALS,
+  // 'eq'
+  enum: OPERATORS.IS_ONE_OF,
+  // 'in' - Multi-select is the primary control for enums
+  money: OPERATORS.EQUALS,
+  // 'eq'
+  percentage: OPERATORS.EQUALS
+  // 'eq'
+};
+
 // src/components/createDataTableComponents.ts
 function createDataTableComponents(schema, renderStyle) {
   const styleToUse = renderStyle || getDefaultStyle();
@@ -6779,6 +6939,570 @@ function createDataTableComponents(schema, renderStyle) {
     ZiniaDataTable
   };
 }
+
+// src/filtering/validation.ts
+function validateFieldRegistry(registry) {
+  const errors = [];
+  if (!registry || typeof registry !== "object") {
+    return {
+      valid: false,
+      errors: [{ message: "Field registry must be an object", code: "INVALID_REGISTRY" }]
+    };
+  }
+  const fieldNames = Object.keys(registry);
+  if (fieldNames.length === 0) {
+    return {
+      valid: false,
+      errors: [{ message: "Field registry must contain at least one field", code: "EMPTY_REGISTRY" }]
+    };
+  }
+  const validTypes = ["string", "number", "date", "boolean", "enum", "money", "percentage"];
+  const seenFields = /* @__PURE__ */ new Set();
+  for (const [fieldName, metadata] of Object.entries(registry)) {
+    if (!fieldName || typeof fieldName !== "string") {
+      errors.push({
+        field: fieldName,
+        message: "Field name must be a non-empty string",
+        code: "INVALID_FIELD_NAME"
+      });
+      continue;
+    }
+    if (seenFields.has(fieldName)) {
+      errors.push({
+        field: fieldName,
+        message: `Duplicate field name: ${fieldName}`,
+        code: "DUPLICATE_FIELD"
+      });
+      continue;
+    }
+    seenFields.add(fieldName);
+    if (!metadata || typeof metadata !== "object") {
+      errors.push({
+        field: fieldName,
+        message: "Field metadata must be an object",
+        code: "INVALID_METADATA"
+      });
+      continue;
+    }
+    if (!metadata.type || !validTypes.includes(metadata.type)) {
+      errors.push({
+        field: fieldName,
+        message: `Invalid type: ${metadata.type}. Must be one of: ${validTypes.join(", ")}`,
+        code: "INVALID_TYPE"
+      });
+    }
+    if (metadata.filterable !== void 0 && typeof metadata.filterable !== "boolean") {
+      errors.push({
+        field: fieldName,
+        message: "filterable must be a boolean",
+        code: "INVALID_FILTERABLE"
+      });
+    }
+    if (metadata.searchable !== void 0 && typeof metadata.searchable !== "boolean") {
+      errors.push({
+        field: fieldName,
+        message: "searchable must be a boolean",
+        code: "INVALID_SEARCHABLE"
+      });
+    }
+    if (metadata.sortable !== void 0 && typeof metadata.sortable !== "boolean") {
+      errors.push({
+        field: fieldName,
+        message: "sortable must be a boolean",
+        code: "INVALID_SORTABLE"
+      });
+    }
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function validateFilterValueObject(fieldName, filter, registry) {
+  const errors = [];
+  if (!(fieldName in registry)) {
+    return {
+      valid: false,
+      errors: [
+        {
+          field: fieldName,
+          message: `Field "${fieldName}" does not exist in registry`,
+          code: "FIELD_NOT_IN_REGISTRY"
+        }
+      ]
+    };
+  }
+  const fieldMetadata = registry[fieldName];
+  const isFilterable = fieldMetadata.filterable !== false;
+  if (!isFilterable) {
+    return {
+      valid: false,
+      errors: [
+        {
+          field: fieldName,
+          message: `Field "${fieldName}" is not filterable`,
+          code: "FIELD_NOT_FILTERABLE"
+        }
+      ]
+    };
+  }
+  const fieldType = fieldMetadata.type;
+  if (!filter.operator || typeof filter.operator !== "string") {
+    errors.push({
+      field: fieldName,
+      message: "Operator is required and must be a string",
+      code: "MISSING_OPERATOR"
+    });
+  } else if (!isValidOperatorForType(filter.operator, fieldType)) {
+    errors.push({
+      field: fieldName,
+      message: `Operator "${filter.operator}" is not valid for type "${fieldType}"`,
+      code: "INVALID_OPERATOR_FOR_TYPE"
+    });
+  }
+  if (filter.operator) {
+    if (isNullCheckOperator(filter.operator)) {
+      if (filter.value !== void 0) {
+        errors.push({
+          field: fieldName,
+          message: `Operator "${filter.operator}" must not have a value`,
+          code: "NULL_CHECK_WITH_VALUE"
+        });
+      }
+      if (filter.values !== void 0) {
+        errors.push({
+          field: fieldName,
+          message: `Operator "${filter.operator}" must not have values`,
+          code: "NULL_CHECK_WITH_VALUES"
+        });
+      }
+    } else if (requiresSingleValue(filter.operator)) {
+      if (filter.value === void 0) {
+        errors.push({
+          field: fieldName,
+          message: `Operator "${filter.operator}" requires a value`,
+          code: "MISSING_VALUE"
+        });
+      }
+      if (filter.values !== void 0) {
+        errors.push({
+          field: fieldName,
+          message: `Operator "${filter.operator}" must use "value", not "values"`,
+          code: "SINGLE_VALUE_WITH_ARRAY"
+        });
+      }
+    } else if (requiresArrayValues(filter.operator)) {
+      if (!filter.values || !Array.isArray(filter.values)) {
+        errors.push({
+          field: fieldName,
+          message: `Operator "${filter.operator}" requires a values array`,
+          code: "MISSING_VALUES"
+        });
+      } else if (filter.values.length === 0) {
+        errors.push({
+          field: fieldName,
+          message: `Operator "${filter.operator}" requires a non-empty values array`,
+          code: "EMPTY_VALUES_ARRAY"
+        });
+      } else if (filter.operator === OPERATORS.BETWEEN && filter.values.length !== 2) {
+        errors.push({
+          field: fieldName,
+          message: `Operator "${OPERATORS.BETWEEN}" requires exactly 2 values, got ${filter.values.length}`,
+          code: "INVALID_BETWEEN_COUNT"
+        });
+      } else if (filter.operator === OPERATORS.BETWEEN) {
+        const [min, max] = filter.values;
+        if (NUMERIC_TYPES.includes(fieldType)) {
+          if (typeof min !== "number" || typeof max !== "number") {
+            errors.push({
+              field: fieldName,
+              message: "between operator values must be numbers",
+              code: "INVALID_BETWEEN_TYPE"
+            });
+          } else if (min > max) {
+            errors.push({
+              field: fieldName,
+              message: `between operator: min (${min}) must be <= max (${max})`,
+              code: "INVALID_BETWEEN_RANGE"
+            });
+          }
+        } else if (fieldType === DATA_TYPES.DATE) {
+          if (typeof min !== "string" || typeof max !== "string") {
+            errors.push({
+              field: fieldName,
+              message: "between operator values must be ISO 8601 date strings",
+              code: "INVALID_BETWEEN_TYPE"
+            });
+          } else {
+            try {
+              const minDate = new Date(min);
+              const maxDate = new Date(max);
+              if (isNaN(minDate.getTime()) || isNaN(maxDate.getTime())) {
+                errors.push({
+                  field: fieldName,
+                  message: "between operator values must be valid ISO 8601 dates",
+                  code: "INVALID_DATE_FORMAT"
+                });
+              } else if (minDate > maxDate) {
+                errors.push({
+                  field: fieldName,
+                  message: `between operator: start date must be <= end date`,
+                  code: "INVALID_BETWEEN_RANGE"
+                });
+              }
+            } catch (e) {
+              errors.push({
+                field: fieldName,
+                message: "between operator values must be valid ISO 8601 dates",
+                code: "INVALID_DATE_FORMAT"
+              });
+            }
+          }
+        }
+      }
+      if (filter.value !== void 0) {
+        errors.push({
+          field: fieldName,
+          message: `Operator "${filter.operator}" must use "values", not "value"`,
+          code: "ARRAY_VALUE_WITH_SINGLE"
+        });
+      }
+    }
+  }
+  if (filter.caseSensitive !== void 0 && fieldType !== "string" && fieldType !== "enum") {
+    errors.push({
+      field: fieldName,
+      message: "caseSensitive is only applicable to string and enum types",
+      code: "INVALID_CASE_SENSITIVE"
+    });
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function validateFilterConfiguration(config, registry) {
+  const errors = [];
+  const registryValidation = validateFieldRegistry(registry);
+  if (!registryValidation.valid) {
+    return registryValidation;
+  }
+  if (!config || typeof config !== "object") {
+    return {
+      valid: false,
+      errors: [{ message: "Filter configuration must be an object", code: "INVALID_CONFIG" }]
+    };
+  }
+  for (const [fieldName, filter] of Object.entries(config)) {
+    const filterValidation = validateFilterValueObject(fieldName, filter, registry);
+    if (!filterValidation.valid) {
+      errors.push(...filterValidation.errors);
+    }
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function mapTypeToFilterDataType(type, inputType) {
+  switch (type) {
+    case "string":
+      if (inputType === "select" || inputType === "combobox" || inputType === "radio") {
+        return "enum";
+      }
+      return "string";
+    case "number":
+      if (inputType === "currency") {
+        return "money";
+      }
+      return "number";
+    case "boolean":
+      return "boolean";
+    case "date":
+      return "date";
+    case "enum":
+      return "enum";
+    default:
+      return "string";
+  }
+}
+function buildFieldRegistryFromSchema(schema, fieldsMetadata) {
+  const registry = {};
+  const shape = schema.shape;
+  const fieldNames = Object.keys(shape);
+  for (const fieldName of fieldNames) {
+    const fieldMetadata = fieldsMetadata[fieldName];
+    if (!fieldMetadata) {
+      const fieldSchema = shape[fieldName];
+      const inferredType = inferTypeFromZodSchema(fieldSchema);
+      registry[fieldName] = {
+        type: inferredType,
+        filterable: true,
+        searchable: false,
+        sortable: true
+      };
+      continue;
+    }
+    const filterType = mapTypeToFilterDataType(fieldMetadata.type, fieldMetadata.inputType);
+    const filterable = "filterable" in fieldMetadata ? fieldMetadata.filterable !== false : true;
+    const searchable = "searchable" in fieldMetadata ? fieldMetadata.searchable === true : false;
+    const sortable = "sortable" in fieldMetadata ? fieldMetadata.sortable !== false : true;
+    registry[fieldName] = {
+      type: filterType,
+      filterable,
+      searchable,
+      sortable
+    };
+  }
+  return registry;
+}
+function inferTypeFromZodSchema(schema) {
+  let unwrapped = schema;
+  while (unwrapped instanceof z.ZodOptional || unwrapped instanceof z.ZodNullable || unwrapped instanceof z.ZodDefault) {
+    if (unwrapped instanceof z.ZodOptional) {
+      unwrapped = unwrapped._def.innerType;
+    } else if (unwrapped instanceof z.ZodNullable) {
+      unwrapped = unwrapped._def.innerType;
+    } else if (unwrapped instanceof z.ZodDefault) {
+      unwrapped = unwrapped._def.innerType;
+    }
+  }
+  if (unwrapped instanceof z.ZodString) {
+    return "string";
+  } else if (unwrapped instanceof z.ZodNumber) {
+    return "number";
+  } else if (unwrapped instanceof z.ZodBoolean) {
+    return "boolean";
+  } else if (unwrapped instanceof z.ZodDate) {
+    return "date";
+  } else if (unwrapped instanceof z.ZodEnum) {
+    return "enum";
+  } else {
+    return "string";
+  }
+}
+
+// src/filtering/serialization.ts
+function serializeFiltersToQueryString(config) {
+  if (Object.keys(config).length === 0) {
+    return "";
+  }
+  try {
+    const params = new URLSearchParams();
+    for (const [fieldName, filter] of Object.entries(config)) {
+      const prefix = `filters[${fieldName}]`;
+      params.append(`${prefix}[operator]`, filter.operator);
+      if (filter.value !== void 0) {
+        params.append(`${prefix}[value]`, String(filter.value));
+      }
+      if (filter.values !== void 0 && Array.isArray(filter.values)) {
+        params.append(`${prefix}[values]`, JSON.stringify(filter.values));
+      }
+      if (filter.caseSensitive !== void 0) {
+        params.append(`${prefix}[caseSensitive]`, String(filter.caseSensitive));
+      }
+    }
+    return params.toString();
+  } catch (error) {
+    console.error("Failed to serialize filters to query string:", error);
+    return "";
+  }
+}
+function deserializeFiltersFromQueryString(queryString, registry) {
+  if (!queryString || queryString.trim() === "") {
+    return {};
+  }
+  try {
+    try {
+      const params = new URLSearchParams(queryString);
+      const config = {};
+      const fieldMap = /* @__PURE__ */ new Map();
+      for (const [key, value] of params.entries()) {
+        const match = key.match(/^filters\[([^\]]+)\]\[([^\]]+)\]$/);
+        if (!match) {
+          throw new Error("Not URLSearchParams format, trying base64");
+        }
+        const [, fieldName, property] = match;
+        if (!fieldMap.has(fieldName)) {
+          fieldMap.set(fieldName, {});
+        }
+        const filter = fieldMap.get(fieldName);
+        switch (property) {
+          case "operator":
+            filter.operator = value;
+            break;
+          case "value":
+            filter.value = value;
+            break;
+          case "values":
+            try {
+              filter.values = JSON.parse(value);
+            } catch {
+            }
+            break;
+          case "caseSensitive":
+            filter.caseSensitive = value === "true";
+            break;
+        }
+      }
+      for (const [fieldName, filter] of fieldMap.entries()) {
+        if (filter.operator) {
+          config[fieldName] = filter;
+        }
+      }
+      const validation = validateFilterConfiguration(config, registry);
+      if (!validation.valid) {
+        console.warn("Deserialized filters failed validation:", validation.errors);
+        return {};
+      }
+      return config;
+    } catch {
+      let jsonString;
+      if (typeof atob !== "undefined") {
+        jsonString = atob(queryString);
+      } else if (typeof Buffer !== "undefined") {
+        jsonString = Buffer.from(queryString, "base64").toString("utf-8");
+      } else {
+        jsonString = decodeURIComponent(queryString);
+      }
+      const config = JSON.parse(jsonString);
+      const validation = validateFilterConfiguration(config, registry);
+      if (!validation.valid) {
+        console.warn("Deserialized filters failed validation:", validation.errors);
+        return {};
+      }
+      return config;
+    }
+  } catch (error) {
+    console.error("Failed to deserialize filters from query string:", error);
+    return {};
+  }
+}
+function serializeFiltersToQueryParams(config, registry) {
+  const params = {};
+  for (const [fieldName, filter] of Object.entries(config)) {
+    const fieldMeta = registry[fieldName];
+    if (!fieldMeta) continue;
+    const operator = filter.operator;
+    if (!SHORTHAND_TO_OPERATOR[operator]) {
+      console.warn(`Invalid operator: ${operator}`);
+      continue;
+    }
+    if (isNullCheckOperator(operator)) {
+      params[`flt[${fieldName}][${operator}]`] = "";
+    } else if (requiresArrayValues(operator)) {
+      if (filter.values && Array.isArray(filter.values)) {
+        params[`flt[${fieldName}][${operator}]`] = JSON.stringify(filter.values);
+      }
+    } else {
+      params[`flt[${fieldName}][${operator}]`] = String(filter.value);
+    }
+  }
+  return params;
+}
+function deserializeFiltersFromQueryParams(params, registry) {
+  const config = {};
+  const fieldMap = /* @__PURE__ */ new Map();
+  for (const [key, value] of Object.entries(params)) {
+    const matchDefault = key.match(/^flt\[([^\]]+)\]$/);
+    const matchWithOp = key.match(/^flt\[([^\]]+)\]\[([^\]]+)\]$/);
+    if (!matchDefault && !matchWithOp) continue;
+    const fieldName = matchDefault ? matchDefault[1] : matchWithOp[1];
+    const operatorShorthand = matchWithOp ? matchWithOp[2] : null;
+    const stringValue = Array.isArray(value) ? value[0] : value;
+    const fieldMeta = registry[fieldName];
+    if (!fieldMeta) continue;
+    const fieldType = fieldMeta.type;
+    const defaultOp = DEFAULT_OPERATORS[fieldType] || "eq";
+    let operator;
+    if (operatorShorthand) {
+      if (!SHORTHAND_TO_OPERATOR[operatorShorthand]) {
+        continue;
+      }
+      operator = operatorShorthand;
+    } else {
+      operator = defaultOp;
+    }
+    if (!fieldMap.has(fieldName)) {
+      fieldMap.set(fieldName, { operator });
+    }
+    const filter = fieldMap.get(fieldName);
+    filter.operator = operator;
+    if (isNullCheckOperator(operator)) ; else if (requiresArrayValues(operator)) {
+      if (!stringValue || stringValue.trim() === "") {
+        fieldMap.delete(fieldName);
+        continue;
+      }
+      try {
+        const parsed = JSON.parse(stringValue);
+        if (Array.isArray(parsed) && parsed.length > 0) {
+          if (NUMERIC_TYPES.includes(fieldType)) {
+            filter.values = parsed.map((v) => Number(v));
+          } else {
+            filter.values = parsed;
+          }
+        } else {
+          fieldMap.delete(fieldName);
+          continue;
+        }
+      } catch (e) {
+        const values = stringValue.split(",").map((v) => v.trim()).filter((v) => v.length > 0);
+        if (values.length === 0) {
+          fieldMap.delete(fieldName);
+          continue;
+        }
+        if (operator === OPERATORS.BETWEEN && values.length === 2) {
+          if (NUMERIC_TYPES.includes(fieldType)) {
+            filter.values = [Number(values[0]), Number(values[1])];
+          } else if (fieldType === DATA_TYPES.DATE) {
+            filter.values = [values[0], values[1]];
+          } else {
+            filter.values = values;
+          }
+        } else if (operator === OPERATORS.BETWEEN) {
+          fieldMap.delete(fieldName);
+          continue;
+        } else {
+          if (NUMERIC_TYPES.includes(fieldType)) {
+            filter.values = values.map((v) => Number(v));
+          } else {
+            filter.values = values;
+          }
+        }
+      }
+    } else {
+      if ((operator === OPERATORS.IS_ONE_OF || operator === OPERATORS.IS_NOT_ONE_OF) && stringValue) {
+        if (NUMERIC_TYPES.includes(fieldType)) {
+          filter.values = [Number(stringValue)];
+        } else {
+          filter.values = [stringValue];
+        }
+      } else {
+        if (NUMERIC_TYPES.includes(fieldType)) {
+          filter.value = Number(stringValue);
+        } else if (fieldType === DATA_TYPES.BOOLEAN) {
+          filter.value = stringValue === "true" || stringValue === "1";
+        } else {
+          filter.value = stringValue;
+        }
+        if (fieldType === DATA_TYPES.STRING && operator === OPERATORS.CONTAINS) {
+          filter.caseSensitive = false;
+        }
+      }
+    }
+  }
+  for (const [fieldName, filter] of fieldMap.entries()) {
+    if (filter.operator) {
+      config[fieldName] = filter;
+    }
+  }
+  const validation = validateFilterConfiguration(config, registry);
+  if (!validation.valid) {
+    console.warn("Deserialized filters failed validation:", validation.errors);
+    return {};
+  }
+  return config;
+}
 function useDataTableState(initialData = [], options = {}) {
   const data = ref(initialData);
   const isLoading = ref(false);
@@ -6796,6 +7520,7 @@ function useDataTableState(initialData = [], options = {}) {
     field: null,
     direction: "asc"
   });
+  const fieldRegistry = ref(null);
   const filters = ref({});
   const search = reactive({
     query: "",
@@ -6857,6 +7582,9 @@ function useDataTableState(initialData = [], options = {}) {
   const setFilters = (newFilters) => {
     filters.value = newFilters;
   };
+  const setFieldRegistry = (registry) => {
+    fieldRegistry.value = registry;
+  };
   const setSearch = (query, searchableFields) => {
     search.query = query;
     if (searchableFields) {
@@ -6914,6 +7642,7 @@ function useDataTableState(initialData = [], options = {}) {
     pagination,
     sorting,
     filters,
+    fieldRegistry,
     search,
     selection,
     // UI state
@@ -6937,6 +7666,7 @@ function useDataTableState(initialData = [], options = {}) {
     setPagination,
     setSorting,
     setFilters,
+    setFieldRegistry,
     setSearch,
     // Selection methods
     selectRow,
@@ -6954,6 +7684,7 @@ var ZINIA_DATA_TABLE_ACTIONS_KEY = "ziniaDataTableActions";
 var ZINIA_DATA_TABLE_SEARCH_INPUT_KEY = "ziniaDataTableSearchInput";
 var ZINIA_DATA_TABLE_FILTER_INPUTS_KEY = "ziniaDataTableFilterInputs";
 var ZINIA_DATA_TABLE_FILTER_OPERATORS_KEY = "ziniaDataTableFilterOperators";
+var ZINIA_DATA_TABLE_FILTER_CASE_SENSITIVE_KEY = "ziniaDataTableFilterCaseSensitive";
 var ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY = "ziniaDataTableFilterOptionsState";
 var ZINIA_DATA_TABLE_FILTER_OPTIONS_LOADING_KEY = "ziniaDataTableFilterOptionsLoading";
 var ZINIA_DATA_TABLE_NAME_KEY = "ziniaDataTableName";
@@ -6962,12 +7693,15 @@ function useDataTable(schema, options) {
     schemaId: options.schemaId,
     storeName: "dataTable"
   });
+  const fieldRegistry = buildFieldRegistryFromSchema(schema, fieldsMetadata);
   const tableState = useDataTableState([], {
     debug: options.debug
   });
+  tableState.setFieldRegistry(fieldRegistry);
   const searchInputValue = ref("");
   const filterInputValues = ref({});
   const filterOperators = ref({});
+  const filterCaseSensitive = ref({});
   const filterOptionsState = ref({});
   const filterOptionsLoading = ref({});
   if (options.pagination?.pageSize) {
@@ -6984,15 +7718,20 @@ function useDataTable(schema, options) {
     Object.entries(options.initialFilters).forEach(([field, filter]) => {
       if (filter && filter.value !== "" && filter.value !== null && filter.value !== void 0) {
         filterInputValues.value[field] = String(filter.value);
-        filterOperators.value[field] = filter.operator || "eq";
+        const fieldMetadata = fieldRegistry[field];
+        const defaultOperator = fieldMetadata ? DEFAULT_OPERATORS[fieldMetadata.type] || OPERATORS.EQUALS : OPERATORS.EQUALS;
+        filterOperators.value[field] = filter.operator || defaultOperator;
       }
     });
   }
   const extractActiveFilters = (filterState) => {
     const activeFilters = {};
-    Object.entries(filterState).forEach(([key, filter]) => {
-      if (filter && filter.value !== "" && filter.value !== null && filter.value !== void 0) {
-        activeFilters[key] = filter;
+    Object.entries(filterState).forEach(([fieldName, filter]) => {
+      const hasValue = filter.value !== void 0 && filter.value !== "" && filter.value !== null;
+      const hasValues = filter.values !== void 0 && Array.isArray(filter.values) && filter.values.length > 0;
+      const isNullCheck = filter.operator === OPERATORS.IS_EMPTY || filter.operator === OPERATORS.IS_NOT_EMPTY;
+      if (hasValue || hasValues || isNullCheck) {
+        activeFilters[fieldName] = filter;
       }
     });
     return activeFilters;
@@ -7022,6 +7761,16 @@ function useDataTable(schema, options) {
     try {
       tableState.setLoading(true);
       tableState.setError(null);
+      const activeFilters = extractActiveFilters(tableState.state.filters.value);
+      const validation = validateFilterConfiguration(activeFilters, fieldRegistry);
+      if (!validation.valid) {
+        const errorMessage = `Filter validation failed: ${validation.errors.map((e) => e.message).join(", ")}`;
+        tableState.setError(errorMessage);
+        if (options.debug) {
+          console.error("\u274C Filter validation errors:", validation.errors);
+        }
+        throw new Error(errorMessage);
+      }
       if (options.debug) {
         console.log("\u{1F504} Fetching table data with params:", {
           page: tableState.state.pagination.currentPage,
@@ -7030,7 +7779,7 @@ function useDataTable(schema, options) {
             field: tableState.state.sorting.field,
             direction: tableState.state.sorting.direction
           } : null,
-          filters: extractActiveFilters(tableState.state.filters.value),
+          filters: activeFilters,
           search: {
             query: tableState.state.search.query,
             searchableFields: tableState.state.search.searchableFields
@@ -7044,7 +7793,7 @@ function useDataTable(schema, options) {
           field: tableState.state.sorting.field,
           direction: tableState.state.sorting.direction
         } : null,
-        filters: extractActiveFilters(tableState.state.filters.value),
+        filters: activeFilters,
         search: {
           query: tableState.state.search.query,
           searchableFields: tableState.state.search.searchableFields
@@ -7079,13 +7828,30 @@ function useDataTable(schema, options) {
     tableState.setPagination(0);
     await fetchData();
   };
-  const setFilter = async (field, value, operator = "eq") => {
+  const setFilter = async (field, filter) => {
     const currentFilters = { ...tableState.state.filters.value };
-    if (value === "" || value === null || value === void 0) {
-      delete currentFilters[field];
-    } else {
-      currentFilters[field] = { value, operator };
+    const fieldName = field;
+    const hasValue = filter.value !== void 0 && filter.value !== "" && filter.value !== null;
+    const hasValues = filter.values !== void 0 && Array.isArray(filter.values) && filter.values.length > 0;
+    const isNullCheck = filter.operator === OPERATORS.IS_EMPTY || filter.operator === OPERATORS.IS_NOT_EMPTY;
+    const isEmpty = !hasValue && !hasValues && !isNullCheck;
+    if (isEmpty) {
+      delete currentFilters[fieldName];
+      tableState.setFilters(currentFilters);
+      tableState.setPagination(0);
+      await fetchData();
+      return;
+    }
+    const validation = validateFilterValueObject(fieldName, filter, fieldRegistry);
+    if (!validation.valid) {
+      const errorMessage = `Invalid filter for field "${fieldName}": ${validation.errors.map((e) => e.message).join(", ")}`;
+      tableState.setError(errorMessage);
+      if (options.debug) {
+        console.error("\u274C Filter validation errors:", validation.errors);
+      }
+      throw new Error(errorMessage);
     }
+    currentFilters[fieldName] = filter;
     tableState.setFilters(currentFilters);
     tableState.setPagination(0);
     await fetchData();
@@ -7095,13 +7861,39 @@ function useDataTable(schema, options) {
     delete currentFilters[field];
     tableState.setFilters(currentFilters);
     tableState.setPagination(0);
+    delete filterInputValues.value[field];
+    delete filterInputValues.value[`${field}_start`];
+    delete filterInputValues.value[`${field}_end`];
+    delete filterOperators.value[field];
+    delete filterCaseSensitive.value[field];
     await fetchData();
   };
   const clearAllFilters = async () => {
     tableState.setFilters({});
     tableState.setPagination(0);
+    filterInputValues.value = {};
+    filterOperators.value = {};
+    filterCaseSensitive.value = {};
+    await fetchData();
+  };
+  const setFiltersFromQueryParams = async (params) => {
+    const filters = deserializeFiltersFromQueryParams(params, fieldRegistry);
+    tableState.setFilters(filters);
+    tableState.setPagination(0);
     await fetchData();
   };
+  const setFiltersFromQueryString = async (queryString) => {
+    if (queryString && queryString.trim() !== "") {
+      const params = new URLSearchParams(queryString);
+      const paramsObj = {};
+      params.forEach((value, key) => {
+        paramsObj[key] = value;
+      });
+      await setFiltersFromQueryParams(paramsObj);
+    } else {
+      await setFiltersFromQueryParams({});
+    }
+  };
   const setSearch = async (query) => {
     tableState.setSearch(query);
     tableState.setPagination(0);
@@ -7236,8 +8028,20 @@ function useDataTable(schema, options) {
       },
       get count() {
         return Object.keys(extractActiveFilters(tableState.state.filters.value)).length;
+      },
+      get queryParams() {
+        const activeFilters = extractActiveFilters(tableState.state.filters.value);
+        return serializeFiltersToQueryParams(activeFilters, fieldRegistry);
+      },
+      // Legacy: queryString for backward compatibility (returns empty string, use queryParams instead)
+      get queryString() {
+        return "";
       }
     },
+    // Field registry
+    get fieldRegistry() {
+      return fieldRegistry;
+    },
     // Search
     search: {
       get query() {
@@ -7270,6 +8074,8 @@ function useDataTable(schema, options) {
     setFilter,
     clearFilter,
     clearAllFilters,
+    setFiltersFromQueryParams,
+    setFiltersFromQueryString,
     setSearch,
     clearSearch,
     goToPage,
@@ -7303,6 +8109,7 @@ function useDataTable(schema, options) {
     provide(ZINIA_DATA_TABLE_SEARCH_INPUT_KEY, searchInputValue);
     provide(ZINIA_DATA_TABLE_FILTER_INPUTS_KEY, filterInputValues);
     provide(ZINIA_DATA_TABLE_FILTER_OPERATORS_KEY, filterOperators);
+    provide(ZINIA_DATA_TABLE_FILTER_CASE_SENSITIVE_KEY, filterCaseSensitive);
     provide(ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY, filterOptionsState);
     provide(ZINIA_DATA_TABLE_FILTER_OPTIONS_LOADING_KEY, filterOptionsLoading);
     provide(ZINIA_DATA_TABLE_NAME_KEY, options.name || "datatable");
@@ -7312,11 +8119,13 @@ function useDataTable(schema, options) {
       console.error("Failed to load filter options:", err);
     }
   });
-  fetchData().catch((err) => {
-    if (options.debug) {
-      console.error("Failed to auto-load table data:", err);
-    }
-  });
+  if (options.autoLoad !== false) {
+    fetchData().catch((err) => {
+      if (options.debug) {
+        console.error("Failed to auto-load table data:", err);
+      }
+    });
+  }
   return {
     table,
     // Components
@@ -7329,6 +8138,7 @@ function useDataTable(schema, options) {
     setFilter,
     clearFilter,
     clearAllFilters,
+    setFiltersFromQueryString,
     setSearch,
     clearSearch,
     goToPage,
@@ -7358,6 +8168,10 @@ function getFilterType(field, column, fieldsMetadata) {
         return "boolean";
       case "combobox":
         return "combobox";
+      case "date":
+      case "datetime-local":
+      case "time":
+        return "date";
       case "select":
       case "radio":
         return column.filterOptions || fieldMetadata?.options ? "select" : "text";
@@ -7709,170 +8523,787 @@ var DesktopTable = (props) => {
     ] })
   ] }) });
 };
-var SelectFilter = (props) => {
-  return /* @__PURE__ */ jsxs(
-    "select",
-    {
-      value: props.value || "",
-      onChange: (e) => {
-        const value = e.target.value;
-        props.onFilterChange(props.field, value, "eq");
-      },
-      class: "select select-bordered select-sm w-full",
-      disabled: props.isLoading || props.isOptionsLoading,
-      "data-testid": `datatable-filter-${props.field}-input`,
-      children: [
-        props.showAllOption !== false && /* @__PURE__ */ jsx("option", { value: "", children: props.isOptionsLoading ? "Loading options..." : props.allOptionText !== void 0 ? props.allOptionText : `All ${props.label}` }),
-        props.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
-      ]
-    }
-  );
-};
-
-// src/fields/daisy_ui/datatable/helpers/debounce.ts
-var timeoutStore = /* @__PURE__ */ new Map();
-function debounce(key, callback, delay = 300) {
-  const existing = timeoutStore.get(key);
-  if (existing) {
-    clearTimeout(existing);
+var dropdownState = reactive({});
+var DROPDOWN_MAX_HEIGHT = 240;
+var MIN_SPACE_BELOW = 100;
+var EnumMultiSelectFilter = (props) => {
+  if (!dropdownState[props.field]) {
+    dropdownState[props.field] = {
+      isOpen: false,
+      searchQuery: "",
+      selectedIndex: -1,
+      position: { top: 0, left: 0, width: 0, openUpward: false },
+      cleanupFns: []
+    };
   }
-  const timeoutId = setTimeout(() => {
-    callback();
-    timeoutStore.delete(key);
-  }, delay);
-  timeoutStore.set(key, timeoutId);
-}
-var TextFilter = (props) => {
-  const currentOperator = props.filterOperators.value[props.field] || "contains";
-  return /* @__PURE__ */ jsxs("div", { class: "flex gap-1.5 md:gap-2 w-full items-center", children: [
-    /* @__PURE__ */ jsxs(
+  const state = dropdownState[props.field];
+  const selectedValues = state.isOpen && state.pendingValues !== void 0 ? state.pendingValues : Array.isArray(props.value) ? props.value : props.value ? [props.value] : [];
+  const valuesEqual = (a, b) => {
+    if (typeof a === typeof b) {
+      return a === b;
+    }
+    return String(a) === String(b);
+  };
+  const selectedOptions = computed(() => {
+    return selectedValues.map((val) => {
+      const option = props.options.find((opt) => valuesEqual(opt.value, val));
+      return option || { label: String(val), value: val };
+    }).filter((opt) => Boolean(opt));
+  });
+  const filteredOptions = computed(() => {
+    const query = state.searchQuery.trim().toLowerCase();
+    if (!query) {
+      return props.options;
+    }
+    return props.options.filter((opt) => opt.label.toLowerCase().includes(query));
+  });
+  const updateDropdownPosition = () => {
+    const container = document.querySelector(`[data-enum-multiselect-container="${props.field}"]`);
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const openUpward = spaceBelow < MIN_SPACE_BELOW && spaceAbove > spaceBelow;
+    state.position = {
+      top: openUpward ? rect.top - 4 : rect.bottom + 4,
+      left: rect.left,
+      width: rect.width,
+      openUpward
+    };
+  };
+  const applyPendingFilter = () => {
+    if (state.pendingValues === void 0) return;
+    if (state.pendingValues.length === 0) {
+      if (props.onClearFilter) {
+        props.onClearFilter(props.field);
+      }
+      state.pendingValues = void 0;
+      return;
+    }
+    const filter = {
+      operator: props.operator,
+      values: state.pendingValues
+    };
+    props.onFilterChange(props.field, filter);
+    state.pendingValues = void 0;
+  };
+  const toggleOption = (option) => {
+    const currentValues = [...selectedValues];
+    const index = currentValues.findIndex((v) => valuesEqual(v, option.value));
+    if (index >= 0) {
+      currentValues.splice(index, 1);
+    } else {
+      currentValues.push(option.value);
+    }
+    state.pendingValues = currentValues;
+    nextTick(() => {
+      updateDropdownPosition();
+    });
+  };
+  const removeSelected = (value) => {
+    const currentValues = (Array.isArray(props.value) ? props.value : props.value ? [props.value] : []).filter(
+      (v) => !valuesEqual(v, value)
+    );
+    state.isOpen = false;
+    state.searchQuery = "";
+    state.selectedIndex = -1;
+    state.pendingValues = void 0;
+    cleanupEventListeners();
+    if (currentValues.length === 0) {
+      if (props.onClearFilter) {
+        props.onClearFilter(props.field);
+      }
+      return;
+    }
+    const filter = {
+      operator: props.operator,
+      values: currentValues
+    };
+    props.onFilterChange(props.field, filter);
+  };
+  const handleScrollOrResize = () => {
+    if (state.isOpen) {
+      updateDropdownPosition();
+    }
+  };
+  const handleClickOutside = (e) => {
+    const container = document.querySelector(`[data-enum-multiselect-container="${props.field}"]`);
+    const dropdown = document.querySelector(`[data-enum-multiselect-dropdown="${props.field}"]`);
+    const target = e.target;
+    if (state.isOpen && container && !container.contains(target) && dropdown && !dropdown.contains(target)) {
+      applyPendingFilter();
+      state.isOpen = false;
+      state.searchQuery = "";
+      state.selectedIndex = -1;
+      cleanupEventListeners();
+    }
+  };
+  if (!state.cleanupFns) {
+    state.cleanupFns = [];
+  }
+  const setupEventListeners = () => {
+    if (!state.cleanupFns) {
+      state.cleanupFns = [];
+    }
+    if (state.cleanupFns.length > 0) return;
+    window.addEventListener("scroll", handleScrollOrResize, true);
+    window.addEventListener("resize", handleScrollOrResize);
+    document.addEventListener("click", handleClickOutside, true);
+    state.cleanupFns.push(() => {
+      window.removeEventListener("scroll", handleScrollOrResize, true);
+      window.removeEventListener("resize", handleScrollOrResize);
+      document.removeEventListener("click", handleClickOutside, true);
+    });
+  };
+  const cleanupEventListeners = () => {
+    if (state.cleanupFns && state.cleanupFns.length > 0) {
+      state.cleanupFns.forEach((fn) => fn());
+      state.cleanupFns = [];
+    }
+  };
+  const handleFocus = () => {
+    if (state.pendingValues === void 0) {
+      state.pendingValues = Array.isArray(props.value) ? [...props.value] : props.value ? [props.value] : [];
+    }
+    state.isOpen = true;
+    updateDropdownPosition();
+    setupEventListeners();
+  };
+  const handleBlur = (e) => {
+    setTimeout(() => {
+      const relatedTarget = e.relatedTarget || document.activeElement;
+      const container = document.querySelector(
+        `[data-enum-multiselect-container="${props.field}"]`
+      );
+      const dropdown = document.querySelector(`[data-enum-multiselect-dropdown="${props.field}"]`);
+      if (container && container.contains(relatedTarget) || dropdown && dropdown.contains(relatedTarget)) {
+        return;
+      }
+      if (state.isOpen) {
+        applyPendingFilter();
+        state.isOpen = false;
+        state.searchQuery = "";
+        state.selectedIndex = -1;
+        cleanupEventListeners();
+      }
+    }, 100);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      state.pendingValues = void 0;
+      state.isOpen = false;
+      state.searchQuery = "";
+      state.selectedIndex = -1;
+      cleanupEventListeners();
+      return;
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (state.selectedIndex >= 0 && state.selectedIndex < filteredOptions.value.length) {
+        toggleOption(filteredOptions.value[state.selectedIndex]);
+      } else if (e.key === "Enter" && filteredOptions.value.length === 1) {
+        toggleOption(filteredOptions.value[0]);
+      }
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!state.isOpen) {
+        state.isOpen = true;
+        updateDropdownPosition();
+        setupEventListeners();
+      }
+      const totalOptions = filteredOptions.value.length;
+      if (totalOptions > 0) {
+        state.selectedIndex = state.selectedIndex < 0 ? 0 : (state.selectedIndex + 1) % totalOptions;
+        nextTick(() => scrollToSelected());
+      }
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!state.isOpen) {
+        state.isOpen = true;
+        updateDropdownPosition();
+        setupEventListeners();
+      }
+      const totalOptions = filteredOptions.value.length;
+      if (totalOptions > 0) {
+        state.selectedIndex = state.selectedIndex < 0 ? totalOptions - 1 : (state.selectedIndex - 1 + totalOptions) % totalOptions;
+        nextTick(() => scrollToSelected());
+      }
+      return;
+    }
+    if (e.key === "Tab") {
+      applyPendingFilter();
+      state.isOpen = false;
+      state.searchQuery = "";
+      state.selectedIndex = -1;
+      cleanupEventListeners();
+    }
+  };
+  const scrollToSelected = () => {
+    const dropdown = document.querySelector(`[data-enum-multiselect-dropdown="${props.field}"]`);
+    if (!dropdown || state.selectedIndex < 0) return;
+    const option = dropdown.querySelector(`[data-option-index="${state.selectedIndex}"]`);
+    if (!option) return;
+    const elementTop = option.offsetTop;
+    const elementHeight = option.offsetHeight;
+    const containerHeight = dropdown.clientHeight;
+    const containerScrollTop = dropdown.scrollTop;
+    if (elementTop < containerScrollTop) {
+      dropdown.scrollTop = elementTop;
+    } else if (elementTop + elementHeight > containerScrollTop + containerHeight) {
+      dropdown.scrollTop = elementTop + elementHeight - containerHeight;
+    }
+  };
+  const dropdownStyle = computed(() => {
+    const pos = state.position;
+    return {
+      position: "fixed",
+      top: pos.openUpward ? "auto" : `${pos.top}px`,
+      bottom: pos.openUpward ? `${window.innerHeight - pos.top}px` : "auto",
+      left: `${pos.left}px`,
+      width: `${pos.width}px`,
+      maxHeight: `${DROPDOWN_MAX_HEIGHT}px`,
+      zIndex: 9999
+    };
+  });
+  return /* @__PURE__ */ jsxs("div", { class: "flex flex-col gap-2 w-full", children: [
+    selectedOptions.value.length > 0 && /* @__PURE__ */ jsx("div", { class: "flex flex-wrap gap-1.5 max-h-24 overflow-y-auto", children: selectedOptions.value.map((option) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        class: "badge badge-primary badge-sm gap-1.5 pr-1 max-w-full",
+        "data-testid": `datatable-filter-${props.field}-chip-${option.value}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { class: "truncate max-w-[120px] sm:max-w-[200px]", title: option.label, children: option.label }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                removeSelected(option.value);
+              },
+              onMousedown: (e) => {
+                e.preventDefault();
+              },
+              class: "btn btn-ghost btn-xs p-0 h-4 w-4 min-h-0 rounded-full hover:bg-primary-focus flex-shrink-0",
+              "aria-label": `Remove ${option.label}`,
+              tabindex: -1,
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  class: "h-3 w-3",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M6 18L18 6M6 6l12 12" })
+                }
+              )
+            }
+          )
+        ]
+      },
+      String(option.value)
+    )) }),
+    /* @__PURE__ */ jsxs("div", { class: "relative", "data-enum-multiselect-container": props.field, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: state.searchQuery,
+          onInput: (e) => {
+            const value = e.target.value;
+            state.searchQuery = value;
+            state.isOpen = true;
+            state.selectedIndex = -1;
+            updateDropdownPosition();
+            if (!state.cleanupFns || state.cleanupFns.length === 0) {
+              setupEventListeners();
+            }
+          },
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onKeydown: handleKeyDown,
+          placeholder: props.isOptionsLoading ? "Loading options..." : selectedOptions.value.length > 0 ? `Search ${props.label}...` : `Select ${props.label}...`,
+          class: "input input-bordered input-sm w-full pr-8",
+          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 transition-transform ${state.isOpen ? "rotate-180" : ""}`,
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M19 9l-7 7-7-7" })
+        }
+      ) }),
+      state.isOpen && /* @__PURE__ */ jsx(Teleport, { to: "body", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-enum-multiselect-dropdown": props.field,
+          class: "bg-base-100 border border-base-300 rounded-box shadow-lg overflow-auto",
+          style: dropdownStyle.value,
+          onMousedown: (e) => {
+            e.preventDefault();
+          },
+          children: props.isOptionsLoading ? /* @__PURE__ */ jsx("div", { class: "p-2", children: /* @__PURE__ */ jsx("span", { class: "text-sm text-base-content/70", children: "Loading options..." }) }) : props.options.length === 0 ? /* @__PURE__ */ jsx("div", { class: "p-2", children: /* @__PURE__ */ jsx("span", { class: "text-sm text-base-content/70", children: "No options available" }) }) : filteredOptions.value.length === 0 ? /* @__PURE__ */ jsx("div", { class: "p-2", children: /* @__PURE__ */ jsxs("span", { class: "text-sm text-base-content/70", children: [
+            'No options found matching "',
+            state.searchQuery,
+            '"'
+          ] }) }) : /* @__PURE__ */ jsx("ul", { class: "menu menu-sm w-full p-2", role: "listbox", "aria-label": `${props.label} options`, children: filteredOptions.value.map((option, index) => {
+            const isSelected = selectedValues.some((v) => valuesEqual(v, option.value));
+            const isHighlighted = index === state.selectedIndex;
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                "data-option-index": index,
+                role: "option",
+                "aria-selected": isSelected,
+                class: isHighlighted ? "bg-base-200 rounded" : "",
+                children: /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    class: "label cursor-pointer gap-2 p-2 rounded hover:bg-base-200",
+                    onMousedown: (e) => {
+                      e.preventDefault();
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: isSelected,
+                          onChange: () => toggleOption(option),
+                          class: "checkbox checkbox-sm checkbox-primary",
+                          "data-testid": `datatable-filter-${props.field}-option-${option.value}`,
+                          tabindex: -1
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { class: "label-text flex-1 truncate", title: option.label, children: option.label })
+                    ]
+                  }
+                )
+              },
+              String(option.value)
+            );
+          }) })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { class: "text-xs text-base-content/60", children: props.operator === "isOneOf" ? "Select one or more values" : "Exclude one or more values" })
+  ] });
+};
+var SelectFilter = (props) => {
+  const currentOperator = props.operator || OPERATORS.IS_ONE_OF;
+  const isArrayOperator = currentOperator === OPERATORS.IS_ONE_OF || currentOperator === OPERATORS.IS_NOT_ONE_OF;
+  const isDefaultOperator = currentOperator === OPERATORS.IS_ONE_OF;
+  const showOperatorSelect = !isDefaultOperator;
+  const selectedValues = Array.isArray(props.value) ? props.value : props.value ? [props.value] : [];
+  const handleValueChange = (value) => {
+    if (value === "" || value === null || value === void 0) {
+      props.onFilterChange(props.field, { operator: currentOperator, value: "" });
+      return;
+    }
+    const filter = {
+      operator: currentOperator
+    };
+    if (isArrayOperator) {
+      filter.values = Array.isArray(value) ? value : [value];
+    } else {
+      filter.value = value;
+    }
+    props.onFilterChange(props.field, filter);
+  };
+  if (isArrayOperator) {
+    return /* @__PURE__ */ jsxs("div", { class: "flex flex-col gap-1.5 md:gap-2 w-full", children: [
+      showOperatorSelect && /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: currentOperator,
+          onChange: (e) => {
+            const newOperator = e.target.value;
+            const currentValue = props.value;
+            if (currentValue !== "" && currentValue !== null && currentValue !== void 0) {
+              const filter = {
+                operator: newOperator
+              };
+              if (newOperator === OPERATORS.IS_ONE_OF || newOperator === OPERATORS.IS_NOT_ONE_OF) {
+                filter.values = Array.isArray(currentValue) ? currentValue : [currentValue];
+              } else {
+                filter.value = Array.isArray(currentValue) ? currentValue[0] : currentValue;
+              }
+              props.onFilterChange(props.field, filter);
+            }
+          },
+          class: "select select-bordered select-sm w-full text-xs font-medium",
+          "data-testid": `datatable-filter-${props.field}-operator`,
+          children: [
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.IS_ONE_OF, children: "in" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.IS_NOT_ONE_OF, children: "notIn" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EnumMultiSelectFilter,
+        {
+          field: props.field,
+          value: selectedValues,
+          options: props.options,
+          label: props.label,
+          isLoading: props.isLoading,
+          isOptionsLoading: props.isOptionsLoading,
+          operator: currentOperator,
+          onFilterChange: props.onFilterChange,
+          onClearFilter: props.onClearFilter
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { class: "flex flex-col gap-1.5 md:gap-2 w-full", children: /* @__PURE__ */ jsxs("div", { class: "flex gap-1.5 md:gap-2 w-full items-center", children: [
+    showOperatorSelect && /* @__PURE__ */ jsxs(
+      "select",
+      {
+        value: currentOperator,
+        onChange: (e) => {
+          const newOperator = e.target.value;
+          const currentValue = props.value;
+          if (currentValue !== "" && currentValue !== null && currentValue !== void 0) {
+            const filter = {
+              operator: newOperator,
+              value: Array.isArray(currentValue) ? currentValue[0] : currentValue
+            };
+            props.onFilterChange(props.field, filter);
+          }
+        },
+        class: "select select-bordered select-sm w-20 md:w-24 flex-shrink-0 text-xs font-medium",
+        "data-testid": `datatable-filter-${props.field}-operator`,
+        children: [
+          /* @__PURE__ */ jsx("option", { value: OPERATORS.EQUALS, children: "eq" }),
+          /* @__PURE__ */ jsx("option", { value: OPERATORS.NOT_EQUALS, children: "ne" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        value: props.value || "",
+        onChange: (e) => {
+          const value = e.target.value;
+          handleValueChange(value);
+        },
+        class: "select select-bordered select-sm flex-1 min-w-0",
+        disabled: props.isLoading || props.isOptionsLoading,
+        "data-testid": `datatable-filter-${props.field}-input`,
+        children: [
+          props.showAllOption !== false && /* @__PURE__ */ jsx("option", { value: "", children: props.isOptionsLoading ? "Loading options..." : props.allOptionText !== void 0 ? props.allOptionText : `All ${props.label}` }),
+          props.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+        ]
+      }
+    )
+  ] }) });
+};
+
+// src/fields/daisy_ui/datatable/helpers/debounce.ts
+var timeoutStore = /* @__PURE__ */ new Map();
+function debounce(key, callback, delay = 300) {
+  const existing = timeoutStore.get(key);
+  if (existing) {
+    clearTimeout(existing);
+  }
+  const timeoutId = setTimeout(() => {
+    callback();
+    timeoutStore.delete(key);
+  }, delay);
+  timeoutStore.set(key, timeoutId);
+}
+var TextFilter = (props) => {
+  const currentOperator = props.filterOperators.value[props.field] || OPERATORS.CONTAINS;
+  const isArrayOperator = currentOperator === OPERATORS.IS_ONE_OF || currentOperator === OPERATORS.IS_NOT_ONE_OF;
+  const isDefaultOperator = currentOperator === OPERATORS.CONTAINS;
+  const showOperatorSelect = !isDefaultOperator;
+  const filterInputValue = props.filterInputValues.value[props.field];
+  const displayValue = filterInputValue !== void 0 && filterInputValue !== "" ? filterInputValue : props.value || "";
+  const handleFilterChange = (value, operator = currentOperator) => {
+    const filter = {
+      operator,
+      // Strings are always case-insensitive (contains is default)
+      caseSensitive: false
+    };
+    if (isArrayOperator) {
+      if (typeof value === "string" && value.trim()) {
+        filter.values = value.split(",").map((v) => v.trim()).filter((v) => v.length > 0);
+      } else if (Array.isArray(value)) {
+        filter.values = value;
+      }
+    } else {
+      filter.value = value;
+    }
+    props.onFilterChange(props.field, filter);
+  };
+  return /* @__PURE__ */ jsxs("div", { class: "flex flex-col gap-1.5 md:gap-2 w-full", children: [
+    /* @__PURE__ */ jsxs("div", { class: "flex gap-1.5 md:gap-2 w-full items-center", children: [
+      showOperatorSelect && /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: currentOperator,
+          onChange: (e) => {
+            const newOperator = e.target.value;
+            props.filterOperators.value[props.field] = newOperator;
+            const currentValue = props.filterInputValues.value[props.field];
+            if (currentValue) {
+              handleFilterChange(currentValue, newOperator);
+            }
+          },
+          class: "select select-bordered select-sm w-20 md:w-24 flex-shrink-0 text-xs",
+          "data-testid": `datatable-filter-${props.field}-operator`,
+          children: [
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.CONTAINS, children: "contains" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.EQUALS, children: "eq" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.NOT_EQUALS, children: "ne" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.STARTS_WITH, children: "sw" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.ENDS_WITH, children: "ew" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.IS_ONE_OF, children: "in" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.IS_NOT_ONE_OF, children: "notIn" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: displayValue,
+          onInput: (e) => {
+            const value = e.target.value;
+            props.filterInputValues.value[props.field] = value;
+            debounce(
+              `filter_${props.field}`,
+              () => {
+                handleFilterChange(value);
+              },
+              300
+            );
+          },
+          onKeydown: (e) => {
+            if (e.key === "Escape" && props.filterInputValues.value[props.field]) {
+              e.preventDefault();
+              props.filterInputValues.value[props.field] = "";
+              handleFilterChange("");
+            }
+          },
+          placeholder: isArrayOperator ? `Filter by ${props.label} (comma-separated)` : `Filter by ${props.label}`,
+          class: "input input-bordered input-sm flex-1 min-w-0",
+          "data-testid": `datatable-filter-${props.field}-input`
+        }
+      )
+    ] }),
+    isArrayOperator && /* @__PURE__ */ jsx("div", { class: "text-xs text-base-content/60", children: 'Enter multiple values separated by commas (e.g., "value1, value2, value3")' })
+  ] });
+};
+var NumberFilter = (props) => {
+  if (!props.filterOperators.value[props.field]) {
+    props.filterOperators.value[props.field] = OPERATORS.EQUALS;
+  }
+  const currentOperator = props.filterOperators.value[props.field] || OPERATORS.EQUALS;
+  const isBetween = currentOperator === OPERATORS.BETWEEN;
+  const filterInputValue = props.filterInputValues.value[props.field];
+  const displayValue = filterInputValue !== void 0 && filterInputValue !== "" ? filterInputValue : props.value !== void 0 && props.value !== null && props.value !== "" ? String(props.value) : "";
+  const handleFilterChange = (value, operator = currentOperator) => {
+    const filter = {
+      operator
+    };
+    if (isBetween) {
+      if (typeof value === "string" && value.includes(",")) {
+        const parts = value.split(",").map((v) => parseFloat(v.trim())).filter((v) => !isNaN(v));
+        if (parts.length === 2) {
+          filter.values = [Math.min(parts[0], parts[1]), Math.max(parts[0], parts[1])];
+        }
+      } else if (Array.isArray(value) && value.length === 2) {
+        filter.values = [Math.min(value[0], value[1]), Math.max(value[0], value[1])];
+      }
+    } else {
+      const numValue = typeof value === "number" ? value : parseFloat(value);
+      if (!isNaN(numValue)) {
+        filter.value = numValue;
+      }
+    }
+    props.onFilterChange(props.field, filter);
+  };
+  return /* @__PURE__ */ jsxs("div", { class: "flex flex-col gap-1.5 md:gap-2 w-full", children: [
+    /* @__PURE__ */ jsxs("div", { class: "flex gap-1.5 md:gap-2 w-full items-center", children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: currentOperator,
+          onChange: (e) => {
+            const newOperator = e.target.value;
+            props.filterOperators.value[props.field] = newOperator;
+            const currentValue = props.filterInputValues.value[props.field];
+            if (currentValue) {
+              handleFilterChange(currentValue, newOperator);
+            }
+          },
+          class: "select select-bordered select-sm w-20 md:w-24 flex-shrink-0 text-xs font-medium",
+          "data-testid": `datatable-filter-${props.field}-operator`,
+          children: [
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.EQUALS, children: "eq" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.NOT_EQUALS, children: "ne" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.GREATER_THAN, children: "gt" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.GREATER_THAN_OR_EQUAL, children: "gte" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.LESS_THAN, children: "lt" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.LESS_THAN_OR_EQUAL, children: "lte" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.BETWEEN, children: "between" })
+          ]
+        }
+      ),
+      !isBetween && /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          value: displayValue,
+          onInput: (e) => {
+            const value = e.target.value;
+            props.filterInputValues.value[props.field] = value;
+            debounce(
+              `filter_${props.field}`,
+              () => {
+                handleFilterChange(value);
+              },
+              300
+            );
+          },
+          onKeydown: (e) => {
+            if (e.key === "Escape" && props.filterInputValues.value[props.field]) {
+              e.preventDefault();
+              props.filterInputValues.value[props.field] = "";
+              handleFilterChange("");
+            }
+          },
+          placeholder: `Filter by ${props.label}`,
+          class: "input input-bordered input-sm flex-1 min-w-0",
+          "data-testid": `datatable-filter-${props.field}-input`
+        }
+      )
+    ] }),
+    isBetween && /* @__PURE__ */ jsxs("div", { class: "flex gap-2 items-center w-full", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          placeholder: "Min",
+          class: "input input-bordered input-sm flex-1 min-w-0",
+          "data-testid": `datatable-filter-${props.field}-input-min`,
+          onInput: (e) => {
+            const minValue = e.target.value;
+            const maxValue = props.filterInputValues.value[`${props.field}_max`] || "";
+            if (minValue && maxValue) {
+              props.filterInputValues.value[props.field] = `${minValue},${maxValue}`;
+              handleFilterChange(`${minValue},${maxValue}`);
+            } else {
+              props.filterInputValues.value[`${props.field}_min`] = minValue;
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { class: "text-xs text-base-content/60", children: "to" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          placeholder: "Max",
+          class: "input input-bordered input-sm flex-1 min-w-0",
+          "data-testid": `datatable-filter-${props.field}-input-max`,
+          onInput: (e) => {
+            const maxValue = e.target.value;
+            const minValue = props.filterInputValues.value[`${props.field}_min`] || props.filterInputValues.value[props.field]?.split(",")[0] || "";
+            if (minValue && maxValue) {
+              props.filterInputValues.value[props.field] = `${minValue},${maxValue}`;
+              handleFilterChange(`${minValue},${maxValue}`);
+            } else {
+              props.filterInputValues.value[`${props.field}_max`] = maxValue;
+            }
+          }
+        }
+      )
+    ] })
+  ] });
+};
+var BooleanFilter = (props) => {
+  const currentOperator = props.operator || OPERATORS.EQUALS;
+  const isDefaultOperator = currentOperator === OPERATORS.EQUALS;
+  const showOperatorSelect = !isDefaultOperator;
+  const trueOption = props.options?.find((opt) => opt.value === true) || { label: "Yes"};
+  const falseOption = props.options?.find((opt) => opt.value === false) || { label: "No"};
+  return /* @__PURE__ */ jsx("div", { class: "flex flex-col gap-1.5 md:gap-2 w-full", children: /* @__PURE__ */ jsxs("div", { class: "flex gap-1.5 md:gap-2 w-full items-center", children: [
+    showOperatorSelect && /* @__PURE__ */ jsxs(
       "select",
       {
         value: currentOperator,
         onChange: (e) => {
           const newOperator = e.target.value;
-          props.filterOperators.value[props.field] = newOperator;
-          const currentValue = props.filterInputValues.value[props.field];
-          if (currentValue) {
-            props.onFilterChange(props.field, currentValue, newOperator);
+          const currentValue = props.value;
+          if (currentValue !== "" && currentValue !== null && currentValue !== void 0) {
+            const filter = {
+              operator: newOperator,
+              value: currentValue === true || currentValue === "true"
+            };
+            props.onFilterChange(props.field, filter);
           }
         },
-        class: "select select-bordered select-sm w-24 md:w-32 flex-shrink-0 text-xs",
+        class: "select select-bordered select-sm w-20 md:w-24 flex-shrink-0 text-xs font-medium",
         "data-testid": `datatable-filter-${props.field}-operator`,
         children: [
-          /* @__PURE__ */ jsx("option", { value: "contains", children: "Contains" }),
-          /* @__PURE__ */ jsx("option", { value: "eq", children: "Equals" })
+          /* @__PURE__ */ jsx("option", { value: OPERATORS.EQUALS, children: "eq" }),
+          /* @__PURE__ */ jsx("option", { value: OPERATORS.NOT_EQUALS, children: "ne" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "text",
-        value: props.filterInputValues.value[props.field] || "",
-        onInput: (e) => {
-          const value = e.target.value;
-          props.filterInputValues.value[props.field] = value;
-          debounce(
-            `filter_${props.field}`,
-            () => {
-              props.onFilterChange(props.field, value, currentOperator);
-            },
-            300
-          );
-        },
-        onKeydown: (e) => {
-          if (e.key === "Escape" && props.filterInputValues.value[props.field]) {
-            e.preventDefault();
-            props.filterInputValues.value[props.field] = "";
-            props.onFilterChange(props.field, "", currentOperator);
-          }
-        },
-        placeholder: `Filter by ${props.label}`,
-        class: "input input-bordered input-sm flex-1 min-w-0",
-        "data-testid": `datatable-filter-${props.field}-input`
-      }
-    )
-  ] });
-};
-var NumberFilter = (props) => {
-  const currentOperator = props.filterOperators.value[props.field] || "eq";
-  return /* @__PURE__ */ jsxs("div", { class: "flex gap-1.5 md:gap-2 w-full items-center", children: [
     /* @__PURE__ */ jsxs(
       "select",
       {
-        value: currentOperator,
+        value: props.value === true || props.value === "true" ? "true" : props.value === false || props.value === "false" ? "false" : "",
         onChange: (e) => {
-          const newOperator = e.target.value;
-          props.filterOperators.value[props.field] = newOperator;
-          const currentValue = props.filterInputValues.value[props.field];
-          if (currentValue) {
-            props.onFilterChange(props.field, currentValue, newOperator);
+          const stringValue = e.target.value;
+          if (stringValue === "") {
+            props.onFilterChange(props.field, { operator: currentOperator, value: "" });
+          } else {
+            const boolValue = stringValue === "true";
+            const filter = {
+              operator: currentOperator,
+              value: boolValue
+            };
+            props.onFilterChange(props.field, filter);
           }
         },
-        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`,
+        class: "select select-bordered select-sm flex-1 min-w-0",
+        disabled: props.isLoading,
+        "data-testid": `datatable-filter-${props.field}-input`,
         children: [
-          /* @__PURE__ */ jsx("option", { value: "eq", children: "=" }),
-          /* @__PURE__ */ jsx("option", { value: "gt", children: ">" }),
-          /* @__PURE__ */ jsx("option", { value: "lt", children: "<" })
+          props.showAllOption !== false && /* @__PURE__ */ jsx("option", { value: "", children: props.allOptionText ?? "All" }),
+          /* @__PURE__ */ jsx("option", { value: "true", children: trueOption.label }),
+          /* @__PURE__ */ jsx("option", { value: "false", children: falseOption.label })
         ]
       }
-    ),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "number",
-        value: props.filterInputValues.value[props.field] || "",
-        onInput: (e) => {
-          const value = e.target.value;
-          props.filterInputValues.value[props.field] = value;
-          debounce(
-            `filter_${props.field}`,
-            () => {
-              props.onFilterChange(props.field, value, currentOperator);
-            },
-            300
-          );
-        },
-        onKeydown: (e) => {
-          if (e.key === "Escape" && props.filterInputValues.value[props.field]) {
-            e.preventDefault();
-            props.filterInputValues.value[props.field] = "";
-            props.onFilterChange(props.field, "", currentOperator);
-          }
-        },
-        placeholder: `Filter by ${props.label}`,
-        class: "input input-bordered input-sm flex-1 min-w-0",
-        "data-testid": `datatable-filter-${props.field}-input`
-      }
     )
-  ] });
-};
-var BooleanFilter = (props) => {
-  return /* @__PURE__ */ jsxs(
-    "select",
-    {
-      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 select-sm w-full",
-      disabled: props.isLoading,
-      "data-testid": `datatable-filter-${props.field}-input`,
-      children: [
-        props.showAllOption !== false && /* @__PURE__ */ jsx("option", { value: "", children: props.allOptionText ?? "All" }),
-        /* @__PURE__ */ jsx("option", { value: "true", children: "Yes" }),
-        /* @__PURE__ */ jsx("option", { value: "false", children: "No" })
-      ]
-    }
-  );
+  ] }) });
 };
 var comboboxState = reactive({});
-var DROPDOWN_MAX_HEIGHT = 240;
-var MIN_SPACE_BELOW = 100;
+var DROPDOWN_MAX_HEIGHT2 = 240;
+var MIN_SPACE_BELOW2 = 100;
 var ComboboxFilter = (props) => {
   if (!comboboxState[props.field]) {
     comboboxState[props.field] = {
@@ -7888,7 +9319,7 @@ var ComboboxFilter = (props) => {
     const rect = input.getBoundingClientRect();
     const spaceBelow = window.innerHeight - rect.bottom;
     const spaceAbove = rect.top;
-    const openUpward = spaceBelow < MIN_SPACE_BELOW && spaceAbove > spaceBelow;
+    const openUpward = spaceBelow < MIN_SPACE_BELOW2 && spaceAbove > spaceBelow;
     state.position = {
       top: openUpward ? rect.top - 4 : rect.bottom + 4,
       // 4px gap
@@ -7953,14 +9384,26 @@ var ComboboxFilter = (props) => {
   };
   const handleSelectOption = (option) => {
     props.filterInputValues.value[props.field] = option.label;
-    props.onFilterChange(props.field, option.value, "eq");
+    const operator = props.filterOperators?.value[props.field] || (props.fieldType === "string" ? DEFAULT_OPERATORS.string : OPERATORS.EQUALS);
+    const filter = {
+      operator,
+      value: option.value,
+      caseSensitive: props.caseSensitive?.value[props.field] || false
+    };
+    props.onFilterChange(props.field, filter);
     state.isOpen = false;
     state.selectedIndex = -1;
   };
   const handleSelectNewValue = () => {
     const newValue = searchQuery.value.trim();
     if (newValue) {
-      props.onFilterChange(props.field, newValue, "eq");
+      const operator = props.filterOperators?.value[props.field] || (props.fieldType === "string" ? DEFAULT_OPERATORS.string : OPERATORS.EQUALS);
+      const filter = {
+        operator,
+        value: newValue,
+        caseSensitive: props.caseSensitive?.value[props.field] || false
+      };
+      props.onFilterChange(props.field, filter);
       state.isOpen = false;
       state.selectedIndex = -1;
     }
@@ -7993,7 +9436,8 @@ var ComboboxFilter = (props) => {
         state.isOpen = false;
         state.selectedIndex = -1;
         if (props.value) {
-          props.onFilterChange(props.field, "", "eq");
+          const operator = props.filterOperators?.value[props.field] || (props.fieldType === "string" ? DEFAULT_OPERATORS.string : OPERATORS.EQUALS);
+          props.onFilterChange(props.field, { operator, value: "" });
           props.filterInputValues.value[props.field] = "";
         }
         return;
@@ -8103,7 +9547,8 @@ var ComboboxFilter = (props) => {
     const currentLabel = selectedOption.value;
     if (currentQuery === "") {
       if (currentValue) {
-        props.onFilterChange(props.field, "", "eq");
+        const operator = props.filterOperators?.value[props.field] || (props.fieldType === "string" ? DEFAULT_OPERATORS.string : OPERATORS.EQUALS);
+        props.onFilterChange(props.field, { operator, value: "" });
         props.filterInputValues.value[props.field] = "";
       }
     } else {
@@ -8119,9 +9564,23 @@ var ComboboxFilter = (props) => {
       if (!queryMatchesCurrentValue) {
         const matchingOption = props.options.find((opt) => opt.label.toLowerCase() === currentQuery.toLowerCase());
         if (matchingOption) {
-          props.onFilterChange(props.field, matchingOption.value, "eq");
+          const operator = props.filterOperators?.value[props.field] || (props.fieldType === "string" ? DEFAULT_OPERATORS.string : OPERATORS.EQUALS);
+          const filter = {
+            operator,
+            value: matchingOption.value,
+            // Strings are always case-insensitive (contains is default)
+            caseSensitive: false
+          };
+          props.onFilterChange(props.field, filter);
         } else if (props.allowCreate) {
-          props.onFilterChange(props.field, currentQuery, "eq");
+          const operator = props.filterOperators?.value[props.field] || (props.fieldType === "string" ? DEFAULT_OPERATORS.string : OPERATORS.EQUALS);
+          const filter = {
+            operator,
+            value: currentQuery,
+            // Strings are always case-insensitive (contains is default)
+            caseSensitive: false
+          };
+          props.onFilterChange(props.field, filter);
         } else {
           if (currentLabel) {
             props.filterInputValues.value[props.field] = currentLabel;
@@ -8142,7 +9601,7 @@ var ComboboxFilter = (props) => {
       bottom: pos.openUpward ? `${window.innerHeight - pos.top}px` : "auto",
       left: `${pos.left}px`,
       width: `${pos.width}px`,
-      maxHeight: `${DROPDOWN_MAX_HEIGHT}px`,
+      maxHeight: `${DROPDOWN_MAX_HEIGHT2}px`,
       zIndex: 9999
     };
   });
@@ -8290,6 +9749,296 @@ var ComboboxFilter = (props) => {
     ) })
   ] });
 };
+function formatDateForInput(dateValue) {
+  if (!dateValue) return "";
+  try {
+    const date = typeof dateValue === "string" ? new Date(dateValue) : dateValue;
+    if (isNaN(date.getTime())) return "";
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  } catch {
+    return "";
+  }
+}
+function parseDateValue(value) {
+  if (!value) return "";
+  if (/^\d{4}-\d{2}-\d{2}$/.test(value)) return value;
+  return formatDateForInput(value);
+}
+var DateFilter = (props) => {
+  if (!props.filterOperators.value[props.field]) {
+    props.filterOperators.value[props.field] = OPERATORS.EQUALS;
+  }
+  const currentOperator = props.filterOperators.value[props.field] || OPERATORS.EQUALS;
+  const isBetween = currentOperator === OPERATORS.BETWEEN;
+  const isNullCheck = currentOperator === OPERATORS.IS_EMPTY || currentOperator === OPERATORS.IS_NOT_EMPTY;
+  const currentFilterValue = props.value?.value;
+  const currentFilterValues = props.value?.values;
+  if (props.value?.operator && props.value.operator !== currentOperator) {
+    props.filterOperators.value[props.field] = props.value.operator;
+  }
+  const singleDateValue = parseDateValue(
+    props.filterInputValues.value[props.field] || (currentFilterValue ? String(currentFilterValue) : "")
+  );
+  let startDateValue = "";
+  let endDateValue = "";
+  if (isBetween) {
+    if (currentFilterValues && Array.isArray(currentFilterValues) && currentFilterValues.length === 2) {
+      startDateValue = parseDateValue(String(currentFilterValues[0]));
+      endDateValue = parseDateValue(String(currentFilterValues[1]));
+      if (startDateValue && endDateValue) {
+        props.filterInputValues.value[`${props.field}_start`] = startDateValue;
+        props.filterInputValues.value[`${props.field}_end`] = endDateValue;
+      }
+    } else {
+      const commaValue = props.filterInputValues.value[props.field];
+      if (commaValue && typeof commaValue === "string" && commaValue.includes(",")) {
+        const parts = commaValue.split(",").map((v) => v.trim());
+        if (parts.length === 2) {
+          startDateValue = parseDateValue(parts[0]);
+          endDateValue = parseDateValue(parts[1]);
+          props.filterInputValues.value[`${props.field}_start`] = startDateValue;
+          props.filterInputValues.value[`${props.field}_end`] = endDateValue;
+        }
+      } else {
+        startDateValue = parseDateValue(props.filterInputValues.value[`${props.field}_start`]);
+        endDateValue = parseDateValue(props.filterInputValues.value[`${props.field}_end`]);
+      }
+    }
+  }
+  const handleFilterChange = (value, operator = currentOperator) => {
+    const isNullCheckOp = operator === OPERATORS.IS_EMPTY || operator === OPERATORS.IS_NOT_EMPTY;
+    if (!value && !isNullCheckOp) {
+      if (props.onClearFilter) {
+        props.onClearFilter(props.field);
+      }
+      return;
+    }
+    const filter = {
+      operator
+    };
+    if (isNullCheckOp) ; else if (operator === OPERATORS.BETWEEN) {
+      if (typeof value === "string" && value.includes(",")) {
+        const parts = value.split(",").map((v) => v.trim()).filter((v) => v.length > 0);
+        if (parts.length === 2) {
+          const date1 = new Date(parts[0]);
+          const date2 = new Date(parts[1]);
+          if (!isNaN(date1.getTime()) && !isNaN(date2.getTime())) {
+            filter.values = date1 <= date2 ? [parts[0], parts[1]] : [parts[1], parts[0]];
+          } else {
+            if (props.onClearFilter) {
+              props.onClearFilter(props.field);
+            }
+            return;
+          }
+        } else {
+          if (props.onClearFilter) {
+            props.onClearFilter(props.field);
+          }
+          return;
+        }
+      } else if (Array.isArray(value) && value.length === 2) {
+        const date1 = new Date(value[0]);
+        const date2 = new Date(value[1]);
+        if (!isNaN(date1.getTime()) && !isNaN(date2.getTime())) {
+          filter.values = date1 <= date2 ? value : [value[1], value[0]];
+        } else {
+          if (props.onClearFilter) {
+            props.onClearFilter(props.field);
+          }
+          return;
+        }
+      } else {
+        if (props.onClearFilter) {
+          props.onClearFilter(props.field);
+        }
+        return;
+      }
+    } else {
+      if (value) {
+        if (typeof value === "string") {
+          const date = new Date(value);
+          if (!isNaN(date.getTime())) {
+            filter.value = value;
+          } else {
+            if (props.onClearFilter) {
+              props.onClearFilter(props.field);
+            }
+            return;
+          }
+        } else if (value instanceof Date) {
+          filter.value = value.toISOString();
+        } else {
+          if (props.onClearFilter) {
+            props.onClearFilter(props.field);
+          }
+          return;
+        }
+      }
+    }
+    props.onFilterChange(props.field, filter);
+  };
+  const handleNullCheckToggle = (operator) => {
+    props.filterOperators.value[props.field] = operator;
+    handleFilterChange("", operator);
+  };
+  return /* @__PURE__ */ jsxs("div", { class: "flex flex-col gap-1.5 md:gap-2 w-full", children: [
+    /* @__PURE__ */ jsxs("div", { class: "flex gap-1.5 md:gap-2 w-full items-center", children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: currentOperator,
+          onChange: (e) => {
+            const newOperator = e.target.value;
+            props.filterOperators.value[props.field] = newOperator;
+            const currentValue = props.filterInputValues.value[props.field];
+            const isNewNullCheck = newOperator === OPERATORS.IS_EMPTY || newOperator === OPERATORS.IS_NOT_EMPTY;
+            if (currentValue || isNewNullCheck) {
+              handleFilterChange(currentValue, newOperator);
+            } else if (!currentValue && props.onClearFilter) {
+              props.onClearFilter(props.field);
+            }
+          },
+          class: "select select-bordered select-sm w-20 md:w-24 flex-shrink-0 text-xs font-medium",
+          "data-testid": `datatable-filter-${props.field}-operator`,
+          children: [
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.EQUALS, children: "eq" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.NOT_EQUALS, children: "ne" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.GREATER_THAN, children: "gt" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.GREATER_THAN_OR_EQUAL, children: "gte" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.LESS_THAN, children: "lt" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.LESS_THAN_OR_EQUAL, children: "lte" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.BETWEEN, children: "between" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.IS_EMPTY, children: "isEmpty" }),
+            /* @__PURE__ */ jsx("option", { value: OPERATORS.IS_NOT_EMPTY, children: "isNotEmpty" })
+          ]
+        }
+      ),
+      !isBetween && /* @__PURE__ */ jsx(Fragment, { children: isNullCheck ? /* @__PURE__ */ jsxs("div", { class: "flex gap-2 items-center flex-1", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handleNullCheckToggle(OPERATORS.IS_EMPTY),
+            class: `btn btn-sm ${currentOperator === OPERATORS.IS_EMPTY ? "btn-primary" : "btn-outline"}`,
+            "data-testid": `datatable-filter-${props.field}-empty`,
+            children: "Empty"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handleNullCheckToggle(OPERATORS.IS_NOT_EMPTY),
+            class: `btn btn-sm ${currentOperator === OPERATORS.IS_NOT_EMPTY ? "btn-primary" : "btn-outline"}`,
+            "data-testid": `datatable-filter-${props.field}-not-empty`,
+            children: "Not Empty"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "date",
+          value: singleDateValue,
+          onInput: (e) => {
+            const value = e.target.value;
+            props.filterInputValues.value[props.field] = value;
+            if (!value) {
+              if (props.onClearFilter) {
+                props.onClearFilter(props.field);
+              }
+              return;
+            }
+            debounce(
+              `filter_${props.field}`,
+              () => {
+                handleFilterChange(value);
+              },
+              300
+            );
+          },
+          onKeydown: (e) => {
+            if (e.key === "Escape" && singleDateValue) {
+              e.preventDefault();
+              props.filterInputValues.value[props.field] = "";
+              if (props.onClearFilter) {
+                props.onClearFilter(props.field);
+              }
+            }
+          },
+          placeholder: `Filter by ${props.label}`,
+          class: "input input-bordered input-sm flex-1 min-w-0",
+          "data-testid": `datatable-filter-${props.field}-input`
+        }
+      ) })
+    ] }),
+    isBetween && /* @__PURE__ */ jsxs("div", { class: "flex gap-2 items-center w-full", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "date",
+          value: startDateValue,
+          placeholder: "Start date",
+          class: "input input-bordered input-sm flex-1 min-w-0",
+          "data-testid": `datatable-filter-${props.field}-input-start`,
+          onInput: (e) => {
+            const startValue = e.target.value;
+            props.filterInputValues.value[`${props.field}_start`] = startValue;
+            const endValue = props.filterInputValues.value[`${props.field}_end`] || endDateValue;
+            if (startValue && endValue) {
+              props.filterInputValues.value[props.field] = `${startValue},${endValue}`;
+              handleFilterChange(`${startValue},${endValue}`);
+            } else if (!startValue && !endValue) {
+              if (props.onClearFilter) {
+                props.onClearFilter(props.field);
+              }
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { class: "text-xs text-base-content/60", children: "to" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "date",
+          value: endDateValue,
+          placeholder: "End date",
+          class: "input input-bordered input-sm flex-1 min-w-0",
+          "data-testid": `datatable-filter-${props.field}-input-end`,
+          onInput: (e) => {
+            const endValue = e.target.value;
+            props.filterInputValues.value[`${props.field}_end`] = endValue;
+            const startValue = props.filterInputValues.value[`${props.field}_start`] || startDateValue;
+            if (startValue && endValue) {
+              props.filterInputValues.value[props.field] = `${startValue},${endValue}`;
+              handleFilterChange(`${startValue},${endValue}`);
+            } else if (!startValue && !endValue) {
+              if (props.onClearFilter) {
+                props.onClearFilter(props.field);
+              }
+            }
+          }
+        }
+      )
+    ] })
+  ] });
+};
+function convertToDataType(metadataType) {
+  switch (metadataType) {
+    case "string":
+    case "number":
+    case "boolean":
+    case "date":
+    case "enum":
+      return metadataType;
+    case "array":
+    case "object":
+    case "union":
+      return "string";
+    default:
+      return "string";
+  }
+}
 var FilterDrawer = (props) => {
   const injectedFilterOptionsState = inject(
     ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY,
@@ -8391,7 +10140,7 @@ var FilterDrawer = (props) => {
                         SelectFilter,
                         {
                           field,
-                          value: currentValue,
+                          value: Array.isArray(currentFilter?.values) ? currentFilter.values : currentValue,
                           options: getFilterOptions(
                             field,
                             column,
@@ -8403,7 +10152,10 @@ var FilterDrawer = (props) => {
                           isOptionsLoading: filterOptionsLoading?.value?.[field] ?? false,
                           allOptionText: column.filterAllOptionText,
                           showAllOption: column.filterShowAllOption,
-                          onFilterChange: props.onFilterChange
+                          operator: currentFilter?.operator,
+                          fieldType: convertToDataType(props.fieldsMetadata[field]?.type || "enum"),
+                          onFilterChange: props.onFilterChange,
+                          onClearFilter: props.onClearFilter
                         }
                       ),
                       filterType === "text" && /* @__PURE__ */ jsx(
@@ -8414,6 +10166,8 @@ var FilterDrawer = (props) => {
                           label: column.label,
                           filterInputValues: props.filterInputValues,
                           filterOperators: props.filterOperators,
+                          caseSensitive: props.caseSensitive || { value: {} },
+                          fieldType: convertToDataType(props.fieldsMetadata[field]?.type || "string"),
                           onFilterChange: props.onFilterChange
                         }
                       ),
@@ -8425,6 +10179,7 @@ var FilterDrawer = (props) => {
                           label: column.label,
                           filterInputValues: props.filterInputValues,
                           filterOperators: props.filterOperators,
+                          fieldType: convertToDataType(props.fieldsMetadata[field]?.type || "number"),
                           onFilterChange: props.onFilterChange
                         }
                       ),
@@ -8437,6 +10192,14 @@ var FilterDrawer = (props) => {
                           isLoading: props.isLoading,
                           allOptionText: column.filterAllOptionText,
                           showAllOption: column.filterShowAllOption,
+                          operator: currentFilter?.operator,
+                          fieldType: convertToDataType(props.fieldsMetadata[field]?.type || "boolean"),
+                          options: getFilterOptions(
+                            field,
+                            column,
+                            props.fieldsMetadata,
+                            filterOptionsState?.value || {}
+                          ).map((opt) => ({ label: opt.label, value: opt.value })),
                           onFilterChange: props.onFilterChange
                         }
                       ),
@@ -8456,8 +10219,24 @@ var FilterDrawer = (props) => {
                           isOptionsLoading: filterOptionsLoading?.value?.[field] ?? false,
                           allowCreate: column.filterAllowCreate ?? false,
                           filterInputValues: props.filterInputValues,
+                          filterOperators: props.filterOperators,
+                          caseSensitive: props.caseSensitive || { value: {} },
+                          fieldType: convertToDataType(props.fieldsMetadata[field]?.type || "string"),
                           onFilterChange: props.onFilterChange
                         }
+                      ),
+                      filterType === "date" && /* @__PURE__ */ jsx(
+                        DateFilter,
+                        {
+                          field,
+                          value: currentFilter,
+                          label: column.label,
+                          filterInputValues: props.filterInputValues,
+                          filterOperators: props.filterOperators,
+                          fieldType: convertToDataType(props.fieldsMetadata[field]?.type || "date"),
+                          onFilterChange: props.onFilterChange,
+                          onClearFilter: props.onClearFilter
+                        }
                       )
                     ]
                   },
@@ -8480,30 +10259,81 @@ var FilterDrawer = (props) => {
     }
   );
 };
-function formatFilterValue(field, value, column, fieldsMetadata, filterOptionsState) {
+function formatFilterValue(field, filter, column, fieldsMetadata, filterOptionsState) {
+  if (filter.operator === "isEmpty" || filter.operator === "isNotEmpty" || filter.operator === "isNull" || filter.operator === "isNotNull") {
+    return filter.operator === "isEmpty" || filter.operator === "isNull" ? "Empty" : "Not Empty";
+  }
+  if (Array.isArray(filter.values) && filter.values.length > 0) {
+    if (filter.operator === "between" && filter.values.length === 2) {
+      return `${filter.values[0]} - ${filter.values[1]}`;
+    }
+    if (filter.operator === "in" || filter.operator === "notIn") {
+      const options2 = getFilterOptions(field, column, fieldsMetadata, filterOptionsState);
+      if (options2.length > 0) {
+        const labels = filter.values.map((val) => {
+          const option = options2.find((opt) => opt.value === val);
+          return option ? option.label : String(val);
+        });
+        return labels.join(", ");
+      }
+    }
+    return filter.values.join(", ");
+  }
+  const value = filter.value;
   if (value === "" || value === null || value === void 0) return "";
+  const options = getFilterOptions(field, column, fieldsMetadata, filterOptionsState);
   if (typeof value === "boolean") {
+    const option = options.find((opt) => opt.value === value);
+    if (option) return option.label;
     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();
+  if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}/.test(value)) {
+    try {
+      const date = new Date(value);
+      if (!isNaN(date.getTime())) {
+        return date.toLocaleDateString();
+      }
+    } catch {
+    }
   }
   const strValue = String(value);
   return strValue.length > 20 ? strValue.substring(0, 20) + "..." : strValue;
 }
 function getOperatorLabel(operator) {
   const labels = {
-    eq: "=",
+    // Shorthand operators (current standard)
+    eq: "eq",
+    ne: "ne",
     contains: "contains",
-    gt: ">",
-    lt: "<",
+    sw: "sw",
+    ew: "ew",
+    gt: "gt",
+    gte: "gte",
+    lt: "lt",
+    lte: "lte",
+    between: "between",
     in: "in",
-    between: "between"
+    notIn: "notIn",
+    isEmpty: "isEmpty",
+    isNotEmpty: "isNotEmpty",
+    // Legacy aliases (map to new names for backward compatibility)
+    isNull: "isEmpty",
+    isNotNull: "isNotEmpty",
+    // Legacy full names (map to shorthand for consistency)
+    equals: "eq",
+    notEquals: "ne",
+    startsWith: "sw",
+    endsWith: "ew",
+    greaterThan: "gt",
+    greaterThanOrEqual: "gte",
+    lessThan: "lt",
+    lessThanOrEqual: "lte",
+    isOneOf: "in",
+    isNotOneOf: "notIn"
   };
   return labels[operator] || operator;
 }
@@ -8511,12 +10341,18 @@ 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) {
+    if (!filter) {
+      return null;
+    }
+    const hasValue = filter.value !== void 0 && filter.value !== "" && filter.value !== null;
+    const hasValues = Array.isArray(filter.values) && filter.values.length > 0;
+    const isNullCheck = filter.operator === "isEmpty" || filter.operator === "isNotEmpty" || filter.operator === "isNull" || filter.operator === "isNotNull";
+    if (!hasValue && !hasValues && !isNullCheck) {
       return null;
     }
     const displayValue = formatFilterValue(
       field,
-      filter.value,
+      filter,
       column,
       props.fieldsMetadata,
       props.filterOptionsState?.value
@@ -8537,7 +10373,17 @@ var FiltersRow = (props) => {
     if (props.filterOperators.value[field]) {
       delete props.filterOperators.value[field];
     }
-    props.onFilterChange(field, "", "eq");
+    if (props.onClearFilter) {
+      props.onClearFilter(field);
+    } else {
+      const currentFilter = props.activeFilters[field];
+      if (currentFilter) {
+        props.onFilterChange(field, {
+          operator: currentFilter.operator,
+          value: ""
+        });
+      }
+    }
   };
   return /* @__PURE__ */ jsxs("div", { class: "mb-4 space-y-2", children: [
     /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-2", children: [
@@ -8592,7 +10438,7 @@ var FiltersRow = (props) => {
             badge.label,
             ":"
           ] }),
-          badge.operator !== "eq" && badge.operator !== "contains" && /* @__PURE__ */ jsx("span", { class: "opacity-70", children: badge.operatorLabel }),
+          /* @__PURE__ */ jsx("span", { class: "opacity-70", children: badge.operatorLabel }),
           /* @__PURE__ */ jsx("span", { children: badge.displayValue }),
           /* @__PURE__ */ jsx(
             "button",
@@ -9056,9 +10902,8 @@ 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 filterCaseSensitive = inject(ZINIA_DATA_TABLE_FILTER_CASE_SENSITIVE_KEY, ref({}));
     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);
@@ -9114,11 +10959,10 @@ function createDaisyUIDataTable() {
             const currentFilter = table.filters.active[field];
             filterInputValues.value[field] = currentFilter?.value || "";
             if (filterOperators) {
-              if (filterType === "text") {
-                filterOperators.value[field] = currentFilter?.operator || "contains";
-              } else if (filterType === "number") {
-                filterOperators.value[field] = currentFilter?.operator || "eq";
-              }
+              const fieldMetadata = table.fieldsMetadata[field];
+              const fieldType = fieldMetadata?.type;
+              const defaultOperator = fieldType ? DEFAULT_OPERATORS[fieldType] || OPERATORS.EQUALS : filterType === "text" ? OPERATORS.CONTAINS : OPERATORS.EQUALS;
+              filterOperators.value[field] = currentFilter?.operator || defaultOperator;
             }
           }
         }
@@ -9171,7 +11015,8 @@ function createDaisyUIDataTable() {
             isLoading: table.isLoading,
             filterCount: table.filters.count,
             filterDrawerOpen: table.ui.filterDrawerOpen,
-            onFilterChange: (field, value, operator) => table.setFilter(field, value, operator),
+            onFilterChange: (field, filter) => table.setFilter(field, filter),
+            onClearFilter: (field) => table.clearFilter(field),
             onClearAllFilters: () => table.clearAllFilters(),
             onRefresh: () => table.refresh(),
             onOpenFilterDrawer: () => table.ui.openFilterDrawer(),
@@ -9291,7 +11136,9 @@ function createDaisyUIDataTable() {
             isLoading: table.isLoading,
             tableName,
             onClose: () => table.ui.closeFilterDrawer(),
-            onFilterChange: (field, value, operator) => table.setFilter(field, value, operator),
+            caseSensitive: filterCaseSensitive,
+            onFilterChange: (field, filter) => table.setFilter(field, filter),
+            onClearFilter: (field) => table.clearFilter(field),
             onClearAllFilters: () => table.clearAllFilters()
           }
         )
@@ -9403,6 +11250,7 @@ function useCursorDataTableState(initialData = [], options = {}) {
     field: null,
     direction: "asc"
   });
+  const fieldRegistry = ref(null);
   const filters = ref({});
   const search = reactive({
     query: "",
@@ -9480,6 +11328,9 @@ function useCursorDataTableState(initialData = [], options = {}) {
     filters.value = newFilters;
     pagination.currentPageNumber = 0;
   };
+  const setFieldRegistry = (registry) => {
+    fieldRegistry.value = registry;
+  };
   const setSearch = (query, searchableFields) => {
     search.query = query;
     if (searchableFields) {
@@ -9538,6 +11389,7 @@ function useCursorDataTableState(initialData = [], options = {}) {
     pagination,
     sorting,
     filters,
+    fieldRegistry,
     search,
     selection,
     // UI state
@@ -9562,6 +11414,7 @@ function useCursorDataTableState(initialData = [], options = {}) {
     setPageSize,
     setSorting,
     setFilters,
+    setFieldRegistry,
     setSearch,
     // Selection methods
     selectRow,
@@ -9577,12 +11430,15 @@ function useCursorDataTable(schema, options) {
     schemaId: options.schemaId,
     storeName: "dataTable"
   });
+  const fieldRegistry = buildFieldRegistryFromSchema(schema, fieldsMetadata);
   const tableState = useCursorDataTableState([], {
     debug: options.debug
   });
+  tableState.setFieldRegistry(fieldRegistry);
   const searchInputValue = ref("");
   const filterInputValues = ref({});
   const filterOperators = ref({});
+  const filterCaseSensitive = ref({});
   const filterOptionsState = ref({});
   const filterOptionsLoading = ref({});
   if (options.pagination?.pageSize) {
@@ -9599,15 +11455,20 @@ function useCursorDataTable(schema, options) {
     Object.entries(options.initialFilters).forEach(([field, filter]) => {
       if (filter && filter.value !== "" && filter.value !== null && filter.value !== void 0) {
         filterInputValues.value[field] = String(filter.value);
-        filterOperators.value[field] = filter.operator || "eq";
+        const fieldMetadata = fieldRegistry[field];
+        const defaultOperator = fieldMetadata ? DEFAULT_OPERATORS[fieldMetadata.type] || OPERATORS.EQUALS : OPERATORS.EQUALS;
+        filterOperators.value[field] = filter.operator || defaultOperator;
       }
     });
   }
   const extractActiveFilters = (filterState) => {
     const activeFilters = {};
-    Object.entries(filterState).forEach(([key, filter]) => {
-      if (filter && filter.value !== "" && filter.value !== null && filter.value !== void 0) {
-        activeFilters[key] = filter;
+    Object.entries(filterState).forEach(([fieldName, filter]) => {
+      const hasValue = filter.value !== void 0 && filter.value !== "" && filter.value !== null;
+      const hasValues = filter.values !== void 0 && Array.isArray(filter.values) && filter.values.length > 0;
+      const isNullCheck = filter.operator === "isEmpty" || filter.operator === "isNotEmpty";
+      if (hasValue || hasValues || isNullCheck) {
+        activeFilters[fieldName] = filter;
       }
     });
     return activeFilters;
@@ -9637,6 +11498,16 @@ function useCursorDataTable(schema, options) {
     try {
       tableState.setLoading(true);
       tableState.setError(null);
+      const activeFilters = extractActiveFilters(tableState.state.filters.value);
+      const validation = validateFilterConfiguration(activeFilters, fieldRegistry);
+      if (!validation.valid) {
+        const errorMessage = `Filter validation failed: ${validation.errors.map((e) => e.message).join(", ")}`;
+        tableState.setError(errorMessage);
+        if (options.debug) {
+          console.error("\u274C Filter validation errors:", validation.errors);
+        }
+        throw new Error(errorMessage);
+      }
       if (options.debug) {
         console.log("\u{1F504} Fetching cursor table data with params:", {
           cursor: tableState.state.pagination.currentCursor,
@@ -9645,7 +11516,7 @@ function useCursorDataTable(schema, options) {
             field: tableState.state.sorting.field,
             direction: tableState.state.sorting.direction
           } : null,
-          filters: extractActiveFilters(tableState.state.filters.value),
+          filters: activeFilters,
           search: {
             query: tableState.state.search.query,
             searchableFields: tableState.state.search.searchableFields
@@ -9659,7 +11530,7 @@ function useCursorDataTable(schema, options) {
           field: tableState.state.sorting.field,
           direction: tableState.state.sorting.direction
         } : null,
-        filters: extractActiveFilters(tableState.state.filters.value),
+        filters: activeFilters,
         search: {
           query: tableState.state.search.query,
           searchableFields: tableState.state.search.searchableFields
@@ -9700,13 +11571,29 @@ function useCursorDataTable(schema, options) {
     tableState.setCursorNavigation(void 0);
     await fetchData();
   };
-  const setFilter = async (field, value, operator = "eq") => {
+  const setFilter = async (field, filter) => {
     const currentFilters = { ...tableState.state.filters.value };
-    if (value === "" || value === null || value === void 0) {
-      delete currentFilters[field];
-    } else {
-      currentFilters[field] = { value, operator };
+    const fieldName = field;
+    const hasValue = filter.value !== void 0 && filter.value !== "" && filter.value !== null;
+    const hasValues = filter.values !== void 0 && Array.isArray(filter.values) && filter.values.length > 0;
+    const isNullCheck = filter.operator === "isEmpty" || filter.operator === "isNotEmpty";
+    const isEmpty = !hasValue && !hasValues && !isNullCheck;
+    if (isEmpty) {
+      delete currentFilters[fieldName];
+      tableState.setFilters(currentFilters);
+      tableState.setCursorNavigation(void 0);
+      return;
+    }
+    const validation = validateFilterValueObject(fieldName, filter, fieldRegistry);
+    if (!validation.valid) {
+      const errorMessage = `Invalid filter for field "${fieldName}": ${validation.errors.map((e) => e.message).join(", ")}`;
+      tableState.setError(errorMessage);
+      if (options.debug) {
+        console.error("\u274C Filter validation errors:", validation.errors);
+      }
+      throw new Error(errorMessage);
     }
+    currentFilters[fieldName] = filter;
     tableState.setFilters(currentFilters);
     tableState.setCursorNavigation(void 0);
     await fetchData();
@@ -9716,13 +11603,39 @@ function useCursorDataTable(schema, options) {
     delete currentFilters[field];
     tableState.setFilters(currentFilters);
     tableState.setCursorNavigation(void 0);
+    delete filterInputValues.value[field];
+    delete filterInputValues.value[`${field}_start`];
+    delete filterInputValues.value[`${field}_end`];
+    delete filterOperators.value[field];
+    delete filterCaseSensitive.value[field];
     await fetchData();
   };
   const clearAllFilters = async () => {
     tableState.setFilters({});
     tableState.setCursorNavigation(void 0);
+    filterInputValues.value = {};
+    filterOperators.value = {};
+    filterCaseSensitive.value = {};
     await fetchData();
   };
+  const setFiltersFromQueryParams = async (params) => {
+    const filters = deserializeFiltersFromQueryParams(params, fieldRegistry);
+    tableState.setFilters(filters);
+    tableState.setCursorNavigation(void 0);
+    await fetchData();
+  };
+  const setFiltersFromQueryString = async (queryString) => {
+    if (queryString && queryString.trim() !== "") {
+      const params = new URLSearchParams(queryString);
+      const paramsObj = {};
+      params.forEach((value, key) => {
+        paramsObj[key] = value;
+      });
+      await setFiltersFromQueryParams(paramsObj);
+    } else {
+      await setFiltersFromQueryParams({});
+    }
+  };
   const setSearch = async (query) => {
     tableState.setSearch(query);
     tableState.setCursorNavigation(void 0);
@@ -9861,8 +11774,20 @@ function useCursorDataTable(schema, options) {
       },
       get count() {
         return Object.keys(extractActiveFilters(tableState.state.filters.value)).length;
+      },
+      get queryParams() {
+        const activeFilters = extractActiveFilters(tableState.state.filters.value);
+        return serializeFiltersToQueryParams(activeFilters, fieldRegistry);
+      },
+      // Legacy: queryString for backward compatibility (returns empty string, use queryParams instead)
+      get queryString() {
+        return "";
       }
     },
+    // Field registry
+    get fieldRegistry() {
+      return fieldRegistry;
+    },
     // Search (same interface)
     search: {
       get query() {
@@ -9895,6 +11820,8 @@ function useCursorDataTable(schema, options) {
     setFilter,
     clearFilter,
     clearAllFilters,
+    setFiltersFromQueryParams,
+    setFiltersFromQueryString,
     setSearch,
     clearSearch,
     nextPage,
@@ -9928,6 +11855,7 @@ function useCursorDataTable(schema, options) {
     provide(ZINIA_DATA_TABLE_SEARCH_INPUT_KEY, searchInputValue);
     provide(ZINIA_DATA_TABLE_FILTER_INPUTS_KEY, filterInputValues);
     provide(ZINIA_DATA_TABLE_FILTER_OPERATORS_KEY, filterOperators);
+    provide(ZINIA_DATA_TABLE_FILTER_CASE_SENSITIVE_KEY, filterCaseSensitive);
     provide(ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY, filterOptionsState);
     provide(ZINIA_DATA_TABLE_FILTER_OPTIONS_LOADING_KEY, filterOptionsLoading);
     provide(ZINIA_DATA_TABLE_NAME_KEY, options.name || "datatable");
@@ -9937,11 +11865,13 @@ function useCursorDataTable(schema, options) {
       console.error("Failed to load filter options:", err);
     }
   });
-  fetchData().catch((err) => {
-    if (options.debug) {
-      console.error("Failed to auto-load cursor table data:", err);
-    }
-  });
+  if (options.autoLoad !== false) {
+    fetchData().catch((err) => {
+      if (options.debug) {
+        console.error("Failed to auto-load cursor table data:", err);
+      }
+    });
+  }
   return {
     table,
     // Components
@@ -9954,6 +11884,7 @@ function useCursorDataTable(schema, options) {
     setFilter,
     clearFilter,
     clearAllFilters,
+    setFiltersFromQueryString,
     setSearch,
     clearSearch,
     nextPage,
@@ -9966,7 +11897,79 @@ function useCursorDataTable(schema, options) {
     isRowSelected
   };
 }
+function useDataTableUrlSync(table, router, options = {}) {
+  const { loadOnMount = true } = options;
+  const isUpdatingFromRoute = ref(false);
+  const originalSetFilter = table.setFilter.bind(table);
+  const originalClearAllFilters = table.clearAllFilters.bind(table);
+  const extractFilterParams = (query) => {
+    const filterParams = {};
+    Object.keys(query).forEach((key) => {
+      if (key.startsWith("flt[")) {
+        filterParams[key] = query[key];
+      }
+    });
+    return filterParams;
+  };
+  const updateUrlFromFilters = () => {
+    if (isUpdatingFromRoute.value) return;
+    const queryParams = table.filters.queryParams || {};
+    const query = { ...router.currentRoute.value.query };
+    Object.keys(query).forEach((key) => {
+      if (key.startsWith("flt[")) delete query[key];
+    });
+    if (Object.keys(queryParams).length > 0) {
+      Object.assign(query, queryParams);
+    }
+    router.push({ query });
+  };
+  table.setFilter = async (field, filter) => {
+    await originalSetFilter(field, filter);
+    updateUrlFromFilters();
+  };
+  table.clearAllFilters = async () => {
+    await originalClearAllFilters();
+    updateUrlFromFilters();
+  };
+  watch(
+    () => router.currentRoute.value.query,
+    async (newQuery) => {
+      if (isUpdatingFromRoute.value) return;
+      const filterParams = extractFilterParams(newQuery);
+      const currentParams = table.filters.queryParams || {};
+      const paramsMatch = Object.keys(filterParams).length === Object.keys(currentParams).length && Object.keys(filterParams).every((key) => filterParams[key] === currentParams[key]);
+      if (paramsMatch) return;
+      isUpdatingFromRoute.value = true;
+      try {
+        if (Object.keys(filterParams).length > 0) {
+          await table.setFiltersFromQueryParams(filterParams);
+        } else if (Object.keys(currentParams).length > 0) {
+          await originalClearAllFilters();
+        }
+      } finally {
+        await nextTick();
+        isUpdatingFromRoute.value = false;
+      }
+    },
+    { deep: true }
+  );
+  if (loadOnMount) {
+    onMounted(async () => {
+      const filterParams = extractFilterParams(router.currentRoute.value.query);
+      if (Object.keys(filterParams).length > 0) {
+        try {
+          await table.setFiltersFromQueryParams(filterParams);
+        } catch (error) {
+          console.error("Failed to load filters from URL:", error);
+          await table.load();
+        }
+      } else {
+        await table.load();
+      }
+    });
+  }
+}
 
-export { ActionIcons, COMBOBOX_FIELD_PROP_NAMES, DEBUG_CONFIG, ErrorDisplay, LoadingDisplay, NoDataDisplay, SCHEMA_ID_SYMBOL, SELECT_FIELD_PROP_NAMES, ZINIA_DATA_TABLE_ACTIONS_KEY, ZINIA_DATA_TABLE_COLUMNS_KEY, ZINIA_DATA_TABLE_FILTER_INPUTS_KEY, ZINIA_DATA_TABLE_FILTER_OPERATORS_KEY, ZINIA_DATA_TABLE_FILTER_OPTIONS_LOADING_KEY, ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY, ZINIA_DATA_TABLE_KEY, ZINIA_DATA_TABLE_NAME_KEY, ZINIA_DATA_TABLE_OPTIONS_KEY, ZINIA_DATA_TABLE_SEARCH_INPUT_KEY, ZINIA_DELETE_MODAL_FIELDS_GENERIC_KEY, ZINIA_DELETE_MODAL_FIELDS_KEY, ZINIA_DELETE_MODAL_KEY, ZINIA_DELETE_MODAL_SCHEMA_KEY, ZINIA_DISPLAY_FIELDS_GENERIC_KEY, ZINIA_DISPLAY_FIELDS_KEY, ZINIA_DISPLAY_KEY, ZINIA_DISPLAY_SCHEMA_KEY, ZINIA_FIELDS_GENERIC_KEY, ZINIA_FIELDS_KEY, ZINIA_FORM_KEY, ZINIA_FORM_SCHEMA_KEY, ZiniaPlugin, clearAllMetadata, clearSchemaMetadata, createBaseComponents, createBaseDisplayComponents, createPartialStyle, createStyleTemplate, createTypedArrayField, createTypedComboboxField, createTypedSelectField, daisyUIStyle, extendStyle, generateDisplayComponents, generateFieldComponents, getAllSchemaMetadata, getDefaultStyle, getFieldMetadata, getRegisteredStyle, getRegisteredStyleNames, getSchemaId, hasRegisteredStyle, hasSchemaMetadata, isDebugEnabled, mergeStyles, registerSchemaMetadata, registerStyle, setSchemaMetadata, useCursorDataTable, useDataTable, useDeleteModal, useDisplay, useForm, withMetadata };
+export { ActionIcons, COMBOBOX_FIELD_PROP_NAMES, DEBUG_CONFIG, ErrorDisplay, LoadingDisplay, NoDataDisplay, SCHEMA_ID_SYMBOL, SELECT_FIELD_PROP_NAMES, ZINIA_DATA_TABLE_ACTIONS_KEY, ZINIA_DATA_TABLE_COLUMNS_KEY, ZINIA_DATA_TABLE_FILTER_CASE_SENSITIVE_KEY, ZINIA_DATA_TABLE_FILTER_INPUTS_KEY, ZINIA_DATA_TABLE_FILTER_OPERATORS_KEY, ZINIA_DATA_TABLE_FILTER_OPTIONS_LOADING_KEY, ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY, ZINIA_DATA_TABLE_KEY, ZINIA_DATA_TABLE_NAME_KEY, ZINIA_DATA_TABLE_OPTIONS_KEY, ZINIA_DATA_TABLE_SEARCH_INPUT_KEY, ZINIA_DELETE_MODAL_FIELDS_GENERIC_KEY, ZINIA_DELETE_MODAL_FIELDS_KEY, ZINIA_DELETE_MODAL_KEY, ZINIA_DELETE_MODAL_SCHEMA_KEY, ZINIA_DISPLAY_FIELDS_GENERIC_KEY, ZINIA_DISPLAY_FIELDS_KEY, ZINIA_DISPLAY_KEY, ZINIA_DISPLAY_SCHEMA_KEY, ZINIA_FIELDS_GENERIC_KEY, ZINIA_FIELDS_KEY, ZINIA_FORM_KEY, ZINIA_FORM_SCHEMA_KEY, ZiniaPlugin, buildFieldRegistryFromSchema, clearAllMetadata, clearSchemaMetadata, createBaseComponents, createBaseDisplayComponents, createPartialStyle, createStyleTemplate, createTypedArrayField, createTypedComboboxField, createTypedSelectField, daisyUIStyle, deserializeFiltersFromQueryString, extendStyle, generateDisplayComponents, generateFieldComponents, getAllSchemaMetadata, getDefaultStyle, getFieldMetadata, getRegisteredStyle, getRegisteredStyleNames, getSchemaId, hasRegisteredStyle, hasSchemaMetadata, isDebugEnabled, isValidOperatorForType, mergeStyles, registerSchemaMetadata, registerStyle, serializeFiltersToQueryString, setSchemaMetadata, useCursorDataTable, useDataTable, useDataTableUrlSync, useDeleteModal, useDisplay, useForm, validateFieldRegistry, validateFilterConfiguration, withMetadata };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map