@dragonmastery/zinia-forms-core 0.3.12 → 0.3.13

package/dist/index.d.ts

@@ -148,40 +148,6 @@ interface CheckboxFieldProps<FormType> {
     variant?: string;
 }
 
-interface DateFieldProps<FormType> {
-    name: FlexiblePath<FormType>;
-    label?: string;
-    hideLabel?: boolean;
-    description?: string;
-    required?: boolean;
-    placeholder?: string;
-    disabled?: boolean;
-    readonly?: boolean;
-    class?: string | string[];
-    size?: string;
-    variant?: string;
-    min?: string;
-    max?: string;
-    formatter?: (date: string) => unknown;
-}
-
-interface NumberFieldProps<FormType> {
-    name: FlexiblePath<FormType>;
-    label?: string;
-    hideLabel?: boolean;
-    description?: string;
-    required?: boolean;
-    placeholder?: string;
-    disabled?: boolean;
-    readonly?: boolean;
-    class?: string | string[];
-    size?: string;
-    variant?: string;
-    min?: number;
-    max?: number;
-    step?: number;
-}
-
 /**
  * Option item for select fields
  * @template TData - Type of the optional data object for storing additional metadata
@@ -368,6 +334,186 @@ interface SelectFieldProps<FormType, P extends Path<FormType> = Path<FormType>,
  */
 declare const SELECT_FIELD_PROP_NAMES: readonly ["name", "selectOptions", "placeholder", "disabled", "readonly", "class", "label", "hideLabel", "description", "required", "size", "variant", "valueToLabel", "useSchemaOptions", "dependsOn", "optionFilterFn", "autoReset"];
 
+/**
+ * Props for the ComboboxField component
+ * @template FormType - The form type
+ * @template P - The field path in the form
+ * @template TData - The type of the data property in SelectOption (for cascading dropdowns)
+ */
+interface ComboboxFieldProps<FormType, P extends Path<FormType> = Path<FormType>, TData = any> {
+    /**
+     * Field name (path in the form state)
+     * Accepts both static paths and dynamic paths for use in array fields
+     */
+    name: FlexiblePath<FormType>;
+    /**
+     * Field label
+     */
+    label?: string;
+    /**
+     * Whether to hide the label
+     */
+    hideLabel?: boolean;
+    /**
+     * Field description
+     */
+    description?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Whether the field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is readonly
+     */
+    readonly?: boolean;
+    /**
+     * CSS classes to apply to the field
+     */
+    class?: string | string[];
+    /**
+     * Field size
+     */
+    size?: string;
+    /**
+     * Field variant
+     */
+    variant?: string;
+    /**
+     * Combobox options (overrides options from schema)
+     * Using selectOptions instead of options to avoid conflicts with HTML select element
+     *
+     * For async loading, use form-level dataLoaders and pass options via extraData:
+     * ```ts
+     * useForm(schema, {
+     *   dataLoaders: { products: loadProducts },
+     * });
+     * // Then: :selectOptions="form.extraData.products || []"
+     * ```
+     *
+     * @example
+     * // With typed data
+     * interface CityData { country: string; }
+     * const options: SelectOption<CityData>[] = [
+     *   { value: 'nyc', label: 'New York', data: { country: 'usa' } }
+     * ];
+     */
+    selectOptions?: SelectOption<TData>[];
+    /**
+     * Custom mapping function to convert values to labels
+     * This is useful when you want to customize how labels are displayed
+     * without providing a full options array
+     *
+     * Can be provided as either:
+     * 1. A function that takes a value and returns a label
+     * 2. An object map where keys are enum values and values are labels
+     */
+    valueToLabel?: ValueToLabelMapping<FieldPathToEnum$1<FormType, P>>;
+    /**
+     * Whether to use options from the schema (default: true)
+     * Set to false to ignore schema options even when no options prop is provided
+     */
+    useSchemaOptions?: boolean;
+    /**
+     * Field path that this field depends on for cascading dropdowns
+     * When the parent field changes, this field's options will be filtered
+     * and the field will be reset (unless autoReset is false)
+     *
+     * @example
+     * // City field depends on country field
+     * <ComboboxField name="city" dependsOn="country" :optionFilterFn="filterCitiesByCountry" />
+     */
+    dependsOn?: FlexiblePath<FormType>;
+    /**
+     * Function to filter options based on the parent field's value
+     * Receives the parent field value and all available options
+     * Should return the filtered options array
+     *
+     * The function signature is tied to the TData type parameter, ensuring type safety
+     * between selectOptions and optionFilterFn
+     *
+     * @example
+     * // With typed data - both props must use the same data type
+     * interface CityData { country: string; }
+     * const filterCitiesByCountry = (
+     *   countryValue: string,
+     *   allOptions: SelectOption<CityData>[]
+     * ): SelectOption<CityData>[] => {
+     *   return allOptions.filter(opt => opt.data?.country === countryValue);
+     * };
+     */
+    optionFilterFn?: (parentValue: any, allOptions: SelectOption<TData>[]) => SelectOption<TData>[];
+    /**
+     * Whether to automatically reset this field when the parent field changes (default: true)
+     * Set to false if you want to preserve the value when parent changes
+     */
+    autoReset?: boolean;
+    /**
+     * Whether to allow creating new values that don't exist in the options
+     * Default: false (must be explicitly set to true to allow creation)
+     *
+     * Note: This is specific to ComboboxField and not available in SelectField
+     */
+    allowCreate?: boolean;
+    /**
+     * Custom filter function for filtering options as user types
+     * Default: filters by case-insensitive substring match
+     *
+     * Note: This is specific to ComboboxField and not available in SelectField
+     * This is different from optionFilterFn which filters based on parent field values
+     */
+    filterFn?: (query: string, option: SelectOption<TData>) => boolean;
+}
+/**
+ * Array of prop names for ComboboxField component.
+ * This is derived from ComboboxFieldProps interface and ensures type safety.
+ * Used for prop normalization and filtering in component implementations.
+ *
+ * TypeScript ensures all entries are valid keys of ComboboxFieldProps.
+ */
+declare const COMBOBOX_FIELD_PROP_NAMES: readonly ["name", "selectOptions", "placeholder", "disabled", "readonly", "class", "label", "hideLabel", "description", "required", "size", "variant", "valueToLabel", "useSchemaOptions", "dependsOn", "optionFilterFn", "autoReset", "allowCreate", "filterFn"];
+
+interface DateFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+    min?: string;
+    max?: string;
+    formatter?: (date: string) => unknown;
+}
+
+interface NumberFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+
 /**
  * Type to convert underscores to PascalCase
  * This helper type processes a single segment by capitalizing after underscores
@@ -429,11 +575,11 @@ type EnumFieldComponent<T, P extends Path<T>> = (props: Omit<SelectFieldProps<T>
     valueToLabel: Record<FieldPathToEnum<T, P>, string>;
 }, context?: any) => any;
 /**
- * Type for select field components (can work with string or enum fields)
- * Uses SelectFieldProps<T, P, TData> to preserve path-specific typing for props like dependsOn
- * and ensure type safety between selectOptions and optionFilterFn
+ * Type for combobox field components (searchable select with optional creation)
+ * Uses ComboboxFieldProps<T, P, TData> which extends SelectFieldProps with allowCreate and filterFn
+ * Preserves path-specific typing for props like dependsOn and ensures type safety
  */
-type SelectFieldComponent<T, P extends Path<T>> = <TData = any>(props: Omit<SelectFieldProps<T, P, TData>, 'name'>, context?: any) => any;
+type ComboboxFieldComponent<T, P extends Path<T>> = <TData = any>(props: Omit<ComboboxFieldProps<T, P, TData>, 'name'>, context?: any) => any;
 /**
  * Type for number field components
  */
@@ -461,14 +607,19 @@ type GenericFieldComponent = (props: any, context?: any) => any;
 type UnwrapOptional<T> = Exclude<T, undefined | null>;
 /**
  * Maps a field path to its component type based on the field's actual type
- * Enums are explicitly passed as FieldType = 'enum' since they can't be auto-detected
- * Everything else is inferred from the actual TypeScript type at the path
+ * FieldType can be 'enum', 'combobox', or 'string' (default)
+ * - 'enum': Uses EnumFieldComponent (requires valueToLabel)
+ * - 'combobox': Uses ComboboxFieldComponent (includes allowCreate and filterFn)
+ * - 'string': Uses ComboboxFieldComponent (superset of SelectField with allowCreate and filterFn)
+ *
+ * We use ComboboxFieldComponent for all string fields because:
+ * 1. ComboboxFieldProps includes all SelectFieldProps (it's a superset)
+ * 2. This allows allowCreate to be available in types even if the field uses SelectField at runtime
+ * 3. ComboboxField can handle all SelectField use cases, so it's safe to use as the default
  *
- * For string fields, we use SelectFieldComponent<T, P> which is a superset that includes
- * all TextField functionality plus additional props like dependsOn for cascading dropdowns.
- * This provides better type safety and autocomplete.
+ * Everything else is inferred from the actual TypeScript type at the path
  */
-type FieldComponentType<T, P extends Path<T>, FieldType extends string = 'string'> = FieldType extends 'enum' ? EnumFieldComponent<T, P> : P extends keyof T ? UnwrapOptional<T[P]> extends Array<any> | ReadonlyArray<any> ? ArrayFieldComponent<T, P> : UnwrapOptional<T[P]> extends number ? NumberFieldComponent<T> : UnwrapOptional<T[P]> extends boolean ? CheckboxFieldComponent<T> : UnwrapOptional<T[P]> extends Date ? DateFieldComponent<T> : UnwrapOptional<T[P]> extends string ? SelectFieldComponent<T, P> : GenericFieldComponent : GenericFieldComponent;
+type FieldComponentType<T, P extends Path<T>, FieldType extends string = 'string'> = FieldType extends 'enum' ? EnumFieldComponent<T, P> : FieldType extends 'combobox' ? ComboboxFieldComponent<T, P> : P extends keyof T ? UnwrapOptional<T[P]> extends Array<any> | ReadonlyArray<any> ? ArrayFieldComponent<T, P> : UnwrapOptional<T[P]> extends number ? NumberFieldComponent<T> : UnwrapOptional<T[P]> extends boolean ? CheckboxFieldComponent<T> : UnwrapOptional<T[P]> extends Date ? DateFieldComponent<T> : UnwrapOptional<T[P]> extends string ? ComboboxFieldComponent<T, P> : GenericFieldComponent : GenericFieldComponent;
 /**
  * Type for the components object with PascalCase keys derived from field paths
  * Each component gets the right type based on what the field actually is
@@ -580,152 +731,6 @@ type MetadataRegistry = Record<string, SchemaFieldMetadata>;
  */
 type PathsOf<T extends z.ZodTypeAny> = Path<z.infer<T>>;
 
-/**
- * Props for the ComboboxField component
- * @template FormType - The form type
- * @template P - The field path in the form
- * @template TData - The type of the data property in SelectOption (for cascading dropdowns)
- */
-interface ComboboxFieldProps<FormType, P extends Path<FormType> = Path<FormType>, TData = any> {
-    /**
-     * Field name (path in the form state)
-     * Accepts both static paths and dynamic paths for use in array fields
-     */
-    name: FlexiblePath<FormType>;
-    /**
-     * Field label
-     */
-    label?: string;
-    /**
-     * Whether to hide the label
-     */
-    hideLabel?: boolean;
-    /**
-     * Field description
-     */
-    description?: string;
-    /**
-     * Whether the field is required
-     */
-    required?: boolean;
-    /**
-     * Placeholder text
-     */
-    placeholder?: string;
-    /**
-     * Whether the field is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Whether the field is readonly
-     */
-    readonly?: boolean;
-    /**
-     * CSS classes to apply to the field
-     */
-    class?: string | string[];
-    /**
-     * Field size
-     */
-    size?: string;
-    /**
-     * Field variant
-     */
-    variant?: string;
-    /**
-     * Combobox options (overrides options from schema)
-     * Using selectOptions instead of options to avoid conflicts with HTML select element
-     *
-     * For async loading, use form-level dataLoaders and pass options via extraData:
-     * ```ts
-     * useForm(schema, {
-     *   dataLoaders: { products: loadProducts },
-     * });
-     * // Then: :selectOptions="form.extraData.products || []"
-     * ```
-     *
-     * @example
-     * // With typed data
-     * interface CityData { country: string; }
-     * const options: SelectOption<CityData>[] = [
-     *   { value: 'nyc', label: 'New York', data: { country: 'usa' } }
-     * ];
-     */
-    selectOptions?: SelectOption<TData>[];
-    /**
-     * Custom mapping function to convert values to labels
-     * This is useful when you want to customize how labels are displayed
-     * without providing a full options array
-     *
-     * Can be provided as either:
-     * 1. A function that takes a value and returns a label
-     * 2. An object map where keys are enum values and values are labels
-     */
-    valueToLabel?: ValueToLabelMapping<FieldPathToEnum$1<FormType, P>>;
-    /**
-     * Whether to use options from the schema (default: true)
-     * Set to false to ignore schema options even when no options prop is provided
-     */
-    useSchemaOptions?: boolean;
-    /**
-     * Field path that this field depends on for cascading dropdowns
-     * When the parent field changes, this field's options will be filtered
-     * and the field will be reset (unless autoReset is false)
-     *
-     * @example
-     * // City field depends on country field
-     * <ComboboxField name="city" dependsOn="country" :optionFilterFn="filterCitiesByCountry" />
-     */
-    dependsOn?: FlexiblePath<FormType>;
-    /**
-     * Function to filter options based on the parent field's value
-     * Receives the parent field value and all available options
-     * Should return the filtered options array
-     *
-     * The function signature is tied to the TData type parameter, ensuring type safety
-     * between selectOptions and optionFilterFn
-     *
-     * @example
-     * // With typed data - both props must use the same data type
-     * interface CityData { country: string; }
-     * const filterCitiesByCountry = (
-     *   countryValue: string,
-     *   allOptions: SelectOption<CityData>[]
-     * ): SelectOption<CityData>[] => {
-     *   return allOptions.filter(opt => opt.data?.country === countryValue);
-     * };
-     */
-    optionFilterFn?: (parentValue: any, allOptions: SelectOption<TData>[]) => SelectOption<TData>[];
-    /**
-     * Whether to automatically reset this field when the parent field changes (default: true)
-     * Set to false if you want to preserve the value when parent changes
-     */
-    autoReset?: boolean;
-    /**
-     * Whether to allow creating new values that don't exist in the options
-     * Default: true
-     *
-     * Note: This is specific to ComboboxField and not available in SelectField
-     */
-    allowCreate?: boolean;
-    /**
-     * Custom filter function for filtering options as user types
-     * Default: filters by case-insensitive substring match
-     *
-     * Note: This is specific to ComboboxField and not available in SelectField
-     * This is different from optionFilterFn which filters based on parent field values
-     */
-    filterFn?: (query: string, option: SelectOption<TData>) => boolean;
-}
-/**
- * Array of prop names for ComboboxField component.
- * This is derived from ComboboxFieldProps interface and ensures type safety.
- * Used for prop normalization and filtering in component implementations.
- *
- * TypeScript ensures all entries are valid keys of ComboboxFieldProps.
- */
-declare const COMBOBOX_FIELD_PROP_NAMES: readonly ["name", "selectOptions", "placeholder", "disabled", "readonly", "class", "label", "hideLabel", "description", "required", "size", "variant", "valueToLabel", "useSchemaOptions", "dependsOn", "optionFilterFn", "autoReset", "allowCreate", "filterFn"];
-
 interface CurrencyFieldProps<FormType> {
     name: FlexiblePath<FormType>;
     label?: string;

package/dist/index.js

@@ -4747,6 +4747,7 @@ function createDaisyUIComboboxField() {
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
     const normalizedProps = normalizePropsFromAttrs(props, propsDefinition, attrs);
+    const allowCreate = computed(() => normalizedProps.allowCreate === true);
     const getOptions = computed(() => {
       if (normalizedProps.selectOptions) {
         return normalizedProps.selectOptions;
@@ -4771,7 +4772,7 @@ function createDaisyUIComboboxField() {
       return getOptions.value.filter((opt) => filterFn(query, opt));
     });
     const isNewValue = computed(() => {
-      if (!normalizedProps.allowCreate) return false;
+      if (!allowCreate.value) return false;
       const currentText = String(displayText.value || "").trim().toLowerCase();
       if (!currentText) return false;
       return !getOptions.value.some(
@@ -4806,7 +4807,7 @@ function createDaisyUIComboboxField() {
     const showDropdown = computed(() => {
       if (!isFocused.value) return false;
       if (getOptions.value.length > 0) return true;
-      if (normalizedProps.allowCreate) {
+      if (allowCreate.value) {
         return String(formState.getValue(props.name) || "").trim().length > 0;
       }
       return false;
@@ -4847,7 +4848,7 @@ function createDaisyUIComboboxField() {
         if (matchingOption) {
           formState.setValue(props.name, matchingOption.value);
           displayText.value = matchingOption.label;
-        } else if (normalizedProps.allowCreate && displayValue) {
+        } else if (allowCreate.value && displayValue) {
           formState.setValue(props.name, displayValue);
           displayText.value = displayValue;
         } else if (!displayValue) {
@@ -4858,6 +4859,23 @@ function createDaisyUIComboboxField() {
         }
         formState.touchField(props.name);
         formState.validateField(props.name);
+        if (!allowCreate.value && displayValue) {
+          const currentValue = formState.getValue(props.name);
+          const isValidOption = getOptions.value.some(
+            (opt) => opt.value === currentValue || opt.label === currentValue || opt.value.toLowerCase() === String(currentValue).toLowerCase() || opt.label.toLowerCase() === String(currentValue).toLowerCase()
+          );
+          if (!isValidOption) {
+            formState.errors[props.name] = `"${displayValue}" is not a valid option. Please select from the list.`;
+          } else {
+            if (formState.errors[props.name]?.includes("is not a valid option")) {
+              delete formState.errors[props.name];
+            }
+          }
+        } else if (allowCreate.value || !displayValue) {
+          if (formState.errors[props.name]?.includes("is not a valid option")) {
+            delete formState.errors[props.name];
+          }
+        }
         formState.setFocus(props.name, false);
       },
       onFocus: () => {
@@ -4990,6 +5008,9 @@ function createDaisyUIComboboxField() {
               displayText.value = option.label;
               formState.touchField(props.name);
               formState.validateField(props.name);
+              if (formState.errors[props.name]?.includes("is not a valid option")) {
+                delete formState.errors[props.name];
+              }
               formState.setSelectedIndex(props.name, -1);
               formState.setFocus(props.name, false);
             } else if (selectedIndex.value === filteredOptions.value.length && isNewValue.value) {
@@ -4997,6 +5018,18 @@ function createDaisyUIComboboxField() {
               formState.setValue(props.name, displayValue);
               formState.touchField(props.name);
               formState.validateField(props.name);
+              if (!allowCreate.value) {
+                const isValidOption = getOptions.value.some(
+                  (opt) => opt.value === displayValue || opt.label === displayValue || opt.value.toLowerCase() === displayValue.toLowerCase() || opt.label.toLowerCase() === displayValue.toLowerCase()
+                );
+                if (!isValidOption) {
+                  formState.errors[props.name] = `"${displayValue}" is not a valid option. Please select from the list.`;
+                }
+              } else {
+                if (formState.errors[props.name]?.includes("is not a valid option")) {
+                  delete formState.errors[props.name];
+                }
+              }
               formState.setSelectedIndex(props.name, -1);
               formState.setFocus(props.name, false);
             } else if (isNewValue.value && selectedIndex.value < 0) {
@@ -5004,6 +5037,18 @@ function createDaisyUIComboboxField() {
               formState.setValue(props.name, displayValue);
               formState.touchField(props.name);
               formState.validateField(props.name);
+              if (!allowCreate.value) {
+                const isValidOption = getOptions.value.some(
+                  (opt) => opt.value === displayValue || opt.label === displayValue || opt.value.toLowerCase() === displayValue.toLowerCase() || opt.label.toLowerCase() === displayValue.toLowerCase()
+                );
+                if (!isValidOption) {
+                  formState.errors[props.name] = `"${displayValue}" is not a valid option. Please select from the list.`;
+                }
+              } else {
+                if (formState.errors[props.name]?.includes("is not a valid option")) {
+                  delete formState.errors[props.name];
+                }
+              }
               formState.setSelectedIndex(props.name, -1);
               formState.setFocus(props.name, false);
             }
@@ -5077,6 +5122,9 @@ function createDaisyUIComboboxField() {
                             e.stopPropagation();
                             formState.setValue(props.name, option.value);
                             displayText.value = option.label;
+                            if (formState.errors[props.name]) {
+                              delete formState.errors[props.name];
+                            }
                             formState.touchField(props.name);
                             formState.validateField(props.name);
                             formState.setSelectedIndex(props.name, -1);
@@ -5088,7 +5136,7 @@ function createDaisyUIComboboxField() {
                     },
                     option.value
                   )),
-                  isNewValue.value && /* @__PURE__ */ jsx(
+                  isNewValue.value && allowCreate.value && /* @__PURE__ */ jsx(
                     "li",
                     {
                       id: `option-new`,
@@ -5104,6 +5152,9 @@ function createDaisyUIComboboxField() {
                             e.stopPropagation();
                             const displayValue = String(displayText.value || "").trim();
                             formState.setValue(props.name, displayValue);
+                            if (formState.errors[props.name]) {
+                              delete formState.errors[props.name];
+                            }
                             formState.touchField(props.name);
                             formState.validateField(props.name);
                             formState.setSelectedIndex(props.name, -1);