@dragonmastery/zinia-forms-core 0.5.3 → 0.5.5

package/dist/index.d.ts

@@ -2864,6 +2864,7 @@ interface UrlSyncOptions {
 }
 interface DataTable {
     setFilter: (field: any, filter: any) => Promise<void>;
+    clearFilter: (field: any) => Promise<void>;
     clearAllFilters: () => Promise<void>;
     setFiltersFromQueryParams: (params: Record<string, string | string[]>) => Promise<void>;
     load: () => Promise<void>;

package/dist/index.js

@@ -8218,6 +8218,14 @@ function getFilterOptions(field, column, fieldsMetadata, filterOptionsState) {
   }
   return [];
 }
+function isBooleanOperator(operator) {
+  if (!operator) return true;
+  return OPERATORS_BY_TYPE.boolean.includes(operator);
+}
+function isEnumOperator(operator) {
+  if (!operator) return true;
+  return OPERATORS_BY_TYPE.enum.includes(operator);
+}
 function getSortLabels(field, column, fieldsMetadata) {
   if (column?.sortLabels) {
     return column.sortLabels;
@@ -8611,6 +8619,13 @@ var EnumMultiSelectFilter = (props) => {
       updateDropdownPosition();
     });
   };
+  const closeDropdown = () => {
+    applyPendingFilter();
+    state.isOpen = false;
+    state.searchQuery = "";
+    state.selectedIndex = -1;
+    cleanupEventListeners();
+  };
   const removeSelected = (value) => {
     const currentValues = (Array.isArray(props.value) ? props.value : props.value ? [props.value] : []).filter(
       (v) => !valuesEqual(v, value)
@@ -8863,60 +8878,94 @@ var EnumMultiSelectFilter = (props) => {
           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(
+      state.isOpen && /* @__PURE__ */ jsx(Teleport, { to: "body", children: /* @__PURE__ */ jsxs(
         "div",
         {
           "data-enum-multiselect-dropdown": props.field,
-          class: "bg-base-100 border border-base-300 rounded-box shadow-lg overflow-auto",
+          class: "bg-base-100 border border-base-300 rounded-box shadow-lg flex flex-col",
           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)
-            );
-          }) })
+          children: [
+            /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between p-2 border-b border-base-300 flex-shrink-0", children: [
+              /* @__PURE__ */ jsx("span", { class: "text-xs font-semibold text-base-content/70", children: props.label }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    closeDropdown();
+                  },
+                  onMousedown: (e) => {
+                    e.preventDefault();
+                  },
+                  class: "btn btn-ghost btn-xs p-0 h-5 w-5 min-h-0 rounded hover:bg-base-300",
+                  "aria-label": "Close dropdown",
+                  "data-testid": `datatable-filter-${props.field}-close`,
+                  children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      class: "h-4 w-4",
+                      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" })
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { class: "overflow-auto flex-1", 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" })
+    /* @__PURE__ */ jsx("div", { class: "text-xs text-base-content/60", children: props.operator === OPERATORS.IS_ONE_OF ? "Select one or more values" : "Show rows that do not match these values" })
   ] });
 };
 var SelectFilter = (props) => {
@@ -10122,7 +10171,15 @@ var FilterDrawer = (props) => {
                             fill: "none",
                             viewBox: "0 0 24 24",
                             stroke: "currentColor",
-                            children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M6 18L18 6M6 6l12 12" })
+                            children: /* @__PURE__ */ jsx(
+                              "path",
+                              {
+                                "stroke-linecap": "round",
+                                "stroke-linejoin": "round",
+                                "stroke-width": "2",
+                                d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                              }
+                            )
                           }
                         ),
                         "Clear All"
@@ -10180,7 +10237,7 @@ var FilterDrawer = (props) => {
                           isOptionsLoading: filterOptionsLoading?.value?.[field] ?? false,
                           allOptionText: column.filterAllOptionText,
                           showAllOption: column.filterShowAllOption,
-                          operator: currentFilter?.operator,
+                          operator: isEnumOperator(currentFilter?.operator) ? currentFilter?.operator : void 0,
                           fieldType: convertToDataType(props.fieldsMetadata[field]?.type || "enum"),
                           onFilterChange: props.onFilterChange,
                           onClearFilter: props.onClearFilter
@@ -10220,7 +10277,7 @@ var FilterDrawer = (props) => {
                           isLoading: props.isLoading,
                           allOptionText: column.filterAllOptionText,
                           showAllOption: column.filterShowAllOption,
-                          operator: currentFilter?.operator,
+                          operator: isBooleanOperator(currentFilter?.operator) ? currentFilter?.operator : void 0,
                           fieldType: convertToDataType(props.fieldsMetadata[field]?.type || "boolean"),
                           options: getFilterOptions(
                             field,
@@ -11933,6 +11990,7 @@ function useDataTableUrlSync(table, router, options = {}) {
   const { loadOnMount = true } = options;
   const isUpdatingFromRoute = ref(false);
   const originalSetFilter = table.setFilter.bind(table);
+  const originalClearFilter = table.clearFilter.bind(table);
   const originalClearAllFilters = table.clearAllFilters.bind(table);
   const extractFilterParams = (query) => {
     const filterParams = {};
@@ -11956,12 +12014,22 @@ function useDataTableUrlSync(table, router, options = {}) {
     router.push({ query });
   };
   table.setFilter = async (field, filter) => {
-    await originalSetFilter(field, filter);
+    const filterPromise = originalSetFilter(field, filter);
+    await nextTick();
+    updateUrlFromFilters();
+    await filterPromise;
+  };
+  table.clearFilter = async (field) => {
+    const filterPromise = originalClearFilter(field);
+    await nextTick();
     updateUrlFromFilters();
+    await filterPromise;
   };
   table.clearAllFilters = async () => {
-    await originalClearAllFilters();
+    const filterPromise = originalClearAllFilters();
+    await nextTick();
     updateUrlFromFilters();
+    await filterPromise;
   };
   watch(
     () => router.currentRoute.value.query,