@dragonmastery/zinia-forms-core 0.4.0 → 0.4.2

package/dist/index.d.ts

@@ -2059,6 +2059,7 @@ interface ActionsConfig<TData> {
     column?: {
         label?: string;
         align?: 'left' | 'center' | 'right';
+        verticalAlign?: 'top' | 'middle' | 'bottom';
         width?: number;
     };
     items: ActionItem<TData>[];
@@ -2070,6 +2071,7 @@ interface ColumnDefinition<TData, TField extends keyof TData> {
     filterable?: boolean;
     searchable?: boolean;
     align?: 'left' | 'center' | 'right';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
     textWrap?: 'truncate' | 'wrap';
     format?: (value: TData[TField], row: TData) => string;
     render?: (value: TData[TField], row: TData) => any;
@@ -2077,6 +2079,8 @@ interface ColumnDefinition<TData, TField extends keyof TData> {
     filterOptions?: FilterOptionItem[];
     filterOptionsLoader?: () => Promise<FilterOptionItem[]>;
     filterAllowCreate?: boolean;
+    filterAllOptionText?: string;
+    filterShowAllOption?: boolean;
     sortLabels?: {
         asc: string;
         desc: string;
@@ -2124,6 +2128,7 @@ interface DataTableOptions<TData> {
     search?: {
         searchableFields?: Array<keyof TData>;
     };
+    initialFilters?: Record<string, FilterValue>;
     renderStyle?: RegisteredStyleName;
     schemaId?: string;
     name?: string;
@@ -2292,6 +2297,7 @@ interface CursorDataTableOptions<TData> {
     search?: {
         searchableFields?: Array<keyof TData>;
     };
+    initialFilters?: Record<string, FilterValue>;
     renderStyle?: RegisteredStyleName;
     schemaId?: string;
     name?: string;

package/dist/index.js

@@ -3001,6 +3001,15 @@ function useDataTable(schema, options) {
   if (options.search?.searchableFields) {
     tableState.setSearch("", options.search.searchableFields);
   }
+  if (options.initialFilters) {
+    tableState.setFilters(options.initialFilters);
+    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 extractActiveFilters = (filterState) => {
     const activeFilters = {};
     Object.entries(filterState).forEach(([key, filter]) => {
@@ -3571,6 +3580,15 @@ function useCursorDataTable(schema, options) {
   if (options.search?.searchableFields) {
     tableState.setSearch("", options.search.searchableFields);
   }
+  if (options.initialFilters) {
+    tableState.setFilters(options.initialFilters);
+    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 extractActiveFilters = (filterState) => {
     const activeFilters = {};
     Object.entries(filterState).forEach(([key, filter]) => {
@@ -4282,7 +4300,12 @@ function createDaisyUIArrayField() {
       }
       const itemCopy = JSON.parse(JSON.stringify(item));
       const newArray = [...currentArray, itemCopy];
-      formState.addArrayItemId(props.name, newArray.length - 1);
+      const newItemIndex = newArray.length - 1;
+      formState.addArrayItemId(props.name, newItemIndex);
+      const collapsedIndex = collapseState.collapsedItems.indexOf(newItemIndex);
+      if (collapsedIndex > -1) {
+        collapseState.collapsedItems.splice(collapsedIndex, 1);
+      }
       formState.setValue(props.name, newArray);
       formState.validateField(props.name);
       if (props.onAddItem) {
@@ -4469,7 +4492,7 @@ function createDaisyUIArrayField() {
                     "button",
                     {
                       type: "button",
-                      class: "btn btn-sm btn-ghost min-h-[32px] sm:min-h-[36px] px-3 sm:px-4 text-xs sm:text-sm",
+                      class: "btn btn-sm btn-secondary min-h-[32px] sm:min-h-[36px] px-3 sm:px-4 text-xs sm:text-sm",
                       onClick: () => cancelPendingOperation(index),
                       "aria-label": "Undo removal",
                       children: [
@@ -8097,6 +8120,7 @@ var DesktopTable = (props) => {
       ) }),
       props.columnKeys.map((field) => {
         if (field === "actions" && props.actions) {
+          const verticalAlign2 = props.actions.column?.verticalAlign || "middle";
           return /* @__PURE__ */ jsx(
             "th",
             {
@@ -8104,6 +8128,7 @@ var DesktopTable = (props) => {
                 props.actions.column?.align === "center" && "text-center",
                 props.actions.column?.align === "right" && "text-right"
               ],
+              style: { verticalAlign: verticalAlign2 },
               children: props.actions.column?.label || "Actions"
             },
             "actions"
@@ -8111,6 +8136,7 @@ var DesktopTable = (props) => {
         }
         const column = props.columns[field];
         if (!column) return null;
+        const verticalAlign = column.verticalAlign || "middle";
         return /* @__PURE__ */ jsx(
           "th",
           {
@@ -8123,6 +8149,7 @@ var DesktopTable = (props) => {
               column.align === "right" && "text-right",
               props.isLoading && "opacity-50 cursor-not-allowed"
             ],
+            style: { verticalAlign },
             onClick: () => props.onSort(field),
             "data-testid": column.sortable ? `${props.tableName || "datatable"}-sort-${field}` : void 0,
             children: /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-2", children: [
@@ -8183,6 +8210,7 @@ var DesktopTable = (props) => {
             ) }),
             props.columnKeys.map((field) => {
               if (field === "actions" && props.actions) {
+                const verticalAlign2 = props.actions.column?.verticalAlign || "middle";
                 return /* @__PURE__ */ jsx(
                   "td",
                   {
@@ -8190,6 +8218,7 @@ var DesktopTable = (props) => {
                       props.actions.column?.align === "center" && "text-center",
                       props.actions.column?.align === "right" && "text-right"
                     ],
+                    style: { verticalAlign: verticalAlign2 },
                     children: /* @__PURE__ */ jsx("div", { class: "flex gap-1 justify-center", children: props.actions.items.map((action) => renderActionItem(action, row)) })
                   },
                   "actions"
@@ -8199,6 +8228,7 @@ var DesktopTable = (props) => {
               if (!column) return null;
               const value = row[field];
               const formattedValue = formatCellValue(value, field, row, column);
+              const verticalAlign = column.verticalAlign || "middle";
               return /* @__PURE__ */ jsx(
                 "td",
                 {
@@ -8208,6 +8238,7 @@ var DesktopTable = (props) => {
                     column.textWrap === "truncate" && "max-w-xs",
                     column.textWrap === "wrap" && "whitespace-normal"
                   ],
+                  style: { verticalAlign },
                   children: props.slots[`cell-${field}`] ? props.slots[`cell-${field}`]?.({ value, row, field, formattedValue }) : /* @__PURE__ */ jsx("span", { class: column.textWrap === "truncate" ? "truncate block" : void 0, children: formattedValue })
                 },
                 field
@@ -8243,7 +8274,7 @@ var SelectFilter = (props) => {
       disabled: props.isLoading || props.isOptionsLoading,
       "data-testid": `datatable-filter-${props.field}-input`,
       children: [
-        /* @__PURE__ */ jsx("option", { value: "", children: props.isOptionsLoading ? "Loading options..." : `All ${props.label}` }),
+        props.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))
       ]
     }
@@ -8384,7 +8415,7 @@ var BooleanFilter = (props) => {
       disabled: props.isLoading,
       "data-testid": `datatable-filter-${props.field}-input`,
       children: [
-        /* @__PURE__ */ jsx("option", { value: "", children: "All" }),
+        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" })
       ]
@@ -8862,6 +8893,8 @@ var FilterDrawer = (props) => {
                           label: column.label,
                           isLoading: props.isLoading,
                           isOptionsLoading: filterOptionsLoading?.value?.[field] ?? false,
+                          allOptionText: column.filterAllOptionText,
+                          showAllOption: column.filterShowAllOption,
                           onFilterChange: props.onFilterChange
                         }
                       ),
@@ -8894,6 +8927,8 @@ var FilterDrawer = (props) => {
                           value: currentValue,
                           label: column.label,
                           isLoading: props.isLoading,
+                          allOptionText: column.filterAllOptionText,
+                          showAllOption: column.filterShowAllOption,
                           onFilterChange: props.onFilterChange
                         }
                       ),