@dragonmastery/zinia-forms-core 0.5.6 → 0.5.8

package/dist/index.d.ts

@@ -278,13 +278,13 @@ interface SelectOption<TData = Record<string, any>> {
  */
 type ZodEnumValues<T extends z.ZodEnum<[string, ...string[]]>> = T['_def']['values'][number];
 /**
- * Type for a mapping of enum values to labels
+ * Type for a mapping of enum values to labels (values and labels can be string or number)
  */
-type EnumValueToLabelMap<T extends string> = Record<T, string>;
+type EnumValueToLabelMap<T extends string | number = string | number> = Record<T, string | number>;
 /**
  * Type for a value-to-label mapping that can be either a function or an object map
  */
-type ValueToLabelMapping<T extends string = string> = ((value: string) => string) | EnumValueToLabelMap<T>;
+type ValueToLabelMapping<T extends string | number = string | number> = ((value: T) => string | number) | EnumValueToLabelMap<T>;
 /**
  * Helper type to extract the type of a field at a given path
  */
@@ -671,7 +671,7 @@ type ArrayFieldComponent<T, P extends Path<T>> = vue.FunctionalComponent<Omit<Ar
  * Type for enum field components that require valueToLabel
  */
 type EnumFieldComponent<T, P extends Path<T>> = (props: Omit<SelectFieldProps<T>, 'name' | 'valueToLabel'> & {
-    valueToLabel: Record<FieldPathToEnum<T, P>, string>;
+    valueToLabel: Record<FieldPathToEnum<T, P>, string | number>;
 }, context?: any) => any;
 /**
  * Type for combobox field components (searchable select with optional creation)
@@ -753,9 +753,9 @@ interface FieldMetadata$1 {
     max?: number;
     /** Regular expression pattern for validation */
     pattern?: RegExp;
-    /** Options for enum fields */
+    /** Options for enum fields (value can be string or number when valueType is 'number') */
     options?: Array<{
-        value: string;
+        value: string | number;
         label: string;
     }>;
     /** Default value for the field */
@@ -774,8 +774,13 @@ interface FieldMetadata$1 {
     rows?: number;
     /** For textarea fields, number of columns to display */
     cols?: number;
-    /** For enum fields, map values to display labels */
-    valueToLabel?: Record<string, string>;
+    /** For enum fields, map values to display labels (keys and values can be string or number) */
+    valueToLabel?: Record<string | number, string | number>;
+    /**
+     * Coerce select/combobox values to this type when setting form state.
+     * Use 'number' when valueToLabel has numeric keys - stores numbers instead of strings.
+     */
+    valueType?: 'number';
     /** Whether the field should be disabled */
     disabled?: boolean;
     /** Whether the field should be hidden */
@@ -854,7 +859,7 @@ declare function createTypedComboboxField<T, P extends Path<T>>(baseComboboxFiel
  * @returns A factory function that creates a type-safe select field
  */
 declare function createTypedSelectField<T, P extends Path<T>>(baseSelectField: FunctionalComponent<SelectFieldProps<T>>, fieldPath: P): <E extends FieldPathToEnum<T, P> = FieldPathToEnum<T, P>>(props: Omit<SelectFieldProps<T>, "name" | "valueToLabel"> & {
-    valueToLabel: Record<E, string>;
+    valueToLabel: Record<E, string | number>;
 }, context?: any) => any;
 /**
  * Type-safe select field component with valueToLabel based on field path
@@ -862,7 +867,7 @@ declare function createTypedSelectField<T, P extends Path<T>>(baseSelectField: F
 interface TypedSelectFieldComponent<T> {
     <P extends Path<T>>(props: Omit<SelectFieldProps<T>, 'valueToLabel'> & {
         name: P;
-        valueToLabel?: Record<string, string>;
+        valueToLabel?: Record<string | number, string | number>;
     }): ReturnType<FunctionalComponent>;
 }
 
@@ -880,7 +885,7 @@ type DisplayFieldComponent<T, P extends Path<T>, _FieldType extends string = 'st
     size?: string;
     variant?: string;
     copyable?: boolean;
-    valueToLabel?: Record<string, string>;
+    valueToLabel?: Record<string | number, string | number>;
     separator?: string;
     itemRenderer?: (item: any, index: number) => string;
     maxItems?: number;
@@ -996,10 +1001,10 @@ declare function generateFieldComponents<T extends z.ZodObject<any>>(schema: T,
             default: () => any;
         }, {}>;
         createTypedSelectField: <P extends Path<z.TypeOf<T>>>(fieldPath: P) => <E extends FieldPathToEnum<z.TypeOf<T>, P> = FieldPathToEnum<z.TypeOf<T>, P>>(props: Omit<SelectFieldProps<z.TypeOf<T>, Path<z.TypeOf<T>>, any>, "name" | "valueToLabel"> & {
-            valueToLabel: Record<E, string>;
+            valueToLabel: Record<E, string | number>;
         }, context?: any) => any;
         typedSelectFields: { [K in Path<z.TypeOf<T>>]?: (<E extends FieldPathToEnum<z.TypeOf<T>, K> = FieldPathToEnum<z.TypeOf<T>, K>>(props: Omit<SelectFieldProps<z.TypeOf<T>, Path<z.TypeOf<T>>, any>, "name" | "valueToLabel"> & {
-            valueToLabel: Record<E, string>;
+            valueToLabel: Record<E, string | number>;
         }, context?: any) => any) | undefined; };
         fields: Record<Path<z.TypeOf<T>>, any>;
         field: <P extends Path<z.TypeOf<T>>>(path: P) => any;
@@ -1445,7 +1450,7 @@ interface DisplayFieldProps<FormType> {
         class: string;
         label?: string;
     }>;
-    valueToLabel?: Record<string, string>;
+    valueToLabel?: Record<string | number, string | number>;
     separator?: string;
     itemRenderer?: (item: any, index: number) => string;
     maxItems?: number;
@@ -1688,8 +1693,14 @@ interface SchemaFieldMetadata {
     rows?: number;
     /** For textarea fields, number of columns to display */
     cols?: number;
-    /** For enum fields, map values to display labels */
-    valueToLabel?: Record<string, string>;
+    /** For enum fields, map values to display labels (keys and values can be string or number) */
+    valueToLabel?: Record<string | number, string | number>;
+    /**
+     * Coerce select/combobox values to this type when setting form state.
+     * Use 'number' when valueToLabel has numeric keys - stores numbers instead of strings.
+     * Keeps Zod strict (no transforms needed); the field handles coercion at input time.
+     */
+    valueType?: 'number';
     /** Whether to hide validation errors */
     hideError?: boolean;
     /** Step value for numeric fields */
@@ -2817,10 +2828,10 @@ declare function useForm<T extends z.ZodObject<any>, CalcType = (values: z.infer
             default: () => any;
         }, {}>;
         createTypedSelectField: <P extends Path<z.TypeOf<T>>>(fieldPath: P) => <E extends FieldPathToEnum<z.TypeOf<T>, P> = FieldPathToEnum<z.TypeOf<T>, P>>(props: Omit<SelectFieldProps<z.TypeOf<T>, Path<z.TypeOf<T>>, any>, "name" | "valueToLabel"> & {
-            valueToLabel: Record<E, string>;
+            valueToLabel: Record<E, string | number>;
         }, context?: any) => any;
         typedSelectFields: { [K in Path<z.TypeOf<T>>]?: (<E extends FieldPathToEnum<z.TypeOf<T>, K> = FieldPathToEnum<z.TypeOf<T>, K>>(props: Omit<SelectFieldProps<z.TypeOf<T>, Path<z.TypeOf<T>>, any>, "name" | "valueToLabel"> & {
-            valueToLabel: Record<E, string>;
+            valueToLabel: Record<E, string | number>;
         }, context?: any) => any) | undefined; };
         fields: Record<Path<z.TypeOf<T>>, any>;
         field: <P extends Path<z.TypeOf<T>>>(path: P) => any;

package/dist/index.js

@@ -1252,18 +1252,24 @@ function extractFieldMetadata(schema, path = "", parentSchema, schemaId) {
         metadata.inputType = "textarea";
       }
       if (customMetadata.valueToLabel && metadata.type === "enum" && metadata.options) {
-        metadata.options = metadata.options.map((option) => ({
-          value: option.value,
-          label: customMetadata.valueToLabel?.[option.value] || option.label
-        }));
+        const valueType = customMetadata.valueType;
+        metadata.options = metadata.options.map((option) => {
+          const rawValue = option.value;
+          const value = valueType === "number" ? Number(rawValue) : rawValue;
+          return {
+            value,
+            label: String(customMetadata.valueToLabel?.[rawValue] ?? option.label)
+          };
+        });
       }
       if (customMetadata.inputType === "select") {
         metadata.type = "enum";
         if (!metadata.options || metadata.options.length === 0) {
           if (customMetadata.valueToLabel) {
+            const valueType = customMetadata.valueType;
             metadata.options = Object.entries(customMetadata.valueToLabel).map(([value, label]) => ({
-              value,
-              label
+              value: valueType === "number" ? Number(value) : value,
+              label: String(label)
             }));
           } else if (customMetadata.options) {
             metadata.options = customMetadata.options;
@@ -5053,7 +5059,7 @@ function createDaisyUISelectField() {
         const valueToLabel = normalizedProps.valueToLabel;
         return schemaOptions.map((option) => ({
           value: option.value,
-          label: typeof valueToLabel === "function" ? valueToLabel(option.value) : valueToLabel[option.value] || option.value
+          label: typeof valueToLabel === "function" ? valueToLabel(option.value) : valueToLabel[option.value] ?? option.value
         }));
       }
       return schemaOptions;
@@ -5112,7 +5118,9 @@ function createDaisyUISelectField() {
       value: formState.getValue(props.name),
       onChange: (event) => {
         const target = event.target;
-        formState.setValue(props.name, target.value);
+        const rawValue = target.value;
+        const value = fieldMetadata?.valueType === "number" && rawValue !== "" ? Number(rawValue) : rawValue;
+        formState.setValue(props.name, value);
         formState.touchField(props.name);
         formState.validateField(props.name);
       },
@@ -8968,6 +8976,7 @@ var EnumMultiSelectFilter = (props) => {
                     e.preventDefault();
                     e.stopPropagation();
                     closeDropdown();
+                    document.activeElement?.blur();
                   },
                   onMousedown: (e) => {
                     e.preventDefault();
@@ -10240,6 +10249,10 @@ function convertToDataType(metadataType) {
   }
 }
 var FilterDrawer = (props) => {
+  const handleClose = () => {
+    props.onClose();
+    document.activeElement?.blur();
+  };
   const injectedFilterOptionsState = inject(
     ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY,
     void 0
@@ -10261,7 +10274,7 @@ var FilterDrawer = (props) => {
           "div",
           {
             class: "absolute inset-0 bg-black/50 transition-opacity opacity-100 pointer-events-auto",
-            onClick: () => props.onClose()
+            onClick: handleClose
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -10313,7 +10326,7 @@ var FilterDrawer = (props) => {
                     "button",
                     {
                       class: "btn btn-ghost btn-sm btn-circle hover:bg-base-300",
-                      onClick: () => props.onClose(),
+                      onClick: handleClose,
                       "aria-label": "Close filters",
                       children: /* @__PURE__ */ jsx(
                         "svg",
@@ -10458,7 +10471,7 @@ var FilterDrawer = (props) => {
                 "button",
                 {
                   class: "btn btn-primary w-full btn-sm text-xs md:text-sm",
-                  onClick: () => props.onClose(),
+                  onClick: handleClose,
                   "data-testid": `${props.tableName || "datatable"}-filter-drawer-apply`,
                   children: "Done"
                 }
@@ -10708,6 +10721,10 @@ var LoadingSkeletons = (props) => {
   ] });
 };
 var SortDrawer = (props) => {
+  const handleClose = () => {
+    props.onClose();
+    document.activeElement?.blur();
+  };
   watch(
     () => props.isOpen,
     (isOpen) => {
@@ -10719,7 +10736,7 @@ var SortDrawer = (props) => {
     }
   );
   if (!props.isOpen) return null;
-  return /* @__PURE__ */ jsx(Teleport, { to: "body", children: /* @__PURE__ */ jsx("div", { class: "fixed inset-0 z-50 bg-black/50", onClick: () => props.onClose(), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Teleport, { to: "body", children: /* @__PURE__ */ jsx("div", { class: "fixed inset-0 z-50 bg-black/50", onClick: handleClose, children: /* @__PURE__ */ jsx(
     "div",
     {
       class: "fixed bottom-0 left-0 right-0 bg-base-100 rounded-t-lg animate-slide-up",
@@ -10728,7 +10745,7 @@ var SortDrawer = (props) => {
       children: /* @__PURE__ */ jsxs("div", { class: "p-4", children: [
         /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between mb-4", children: [
           /* @__PURE__ */ jsx("h3", { class: "text-lg font-semibold", children: "Sort Options" }),
-          /* @__PURE__ */ jsx("button", { class: "btn btn-ghost btn-sm btn-circle", onClick: () => props.onClose(), children: "\u2715" })
+          /* @__PURE__ */ jsx("button", { class: "btn btn-ghost btn-sm btn-circle", onClick: handleClose, children: "\u2715" })
         ] }),
         /* @__PURE__ */ jsxs("div", { class: "space-y-2 max-h-96 overflow-y-auto", children: [
           /* @__PURE__ */ jsxs(
@@ -10737,7 +10754,7 @@ var SortDrawer = (props) => {
               class: `w-full text-left p-3 rounded-lg transition-colors ${!props.sortingField ? "bg-primary text-primary-content" : "hover:bg-base-200"}`,
               onClick: () => {
                 props.onClearSort();
-                props.onClose();
+                handleClose();
               },
               "data-testid": `${props.tableName || "datatable"}-sort-drawer-clear`,
               children: [
@@ -10758,7 +10775,7 @@ var SortDrawer = (props) => {
                   class: `w-full text-left p-3 rounded-lg transition-colors ${props.sortingField === field && props.sortingDirection === "asc" ? "bg-primary text-primary-content" : "hover:bg-base-200"}`,
                   onClick: () => {
                     props.onSort(field, "asc");
-                    props.onClose();
+                    handleClose();
                   },
                   "data-testid": `${props.tableName || "datatable"}-sort-drawer-${field}-asc`,
                   children: /* @__PURE__ */ jsxs("div", { class: "font-medium", children: [
@@ -10776,7 +10793,7 @@ var SortDrawer = (props) => {
                   class: `w-full text-left p-3 rounded-lg transition-colors ${props.sortingField === field && props.sortingDirection === "desc" ? "bg-primary text-primary-content" : "hover:bg-base-200"}`,
                   onClick: () => {
                     props.onSort(field, "desc");
-                    props.onClose();
+                    handleClose();
                   },
                   "data-testid": `${props.tableName || "datatable"}-sort-drawer-${field}-desc`,
                   children: /* @__PURE__ */ jsxs("div", { class: "font-medium", children: [