@dragonmastery/zinia-forms-core 0.3.0 → 0.3.2

package/dist/index.d.ts

@@ -139,6 +139,87 @@ interface CheckboxFieldProps<FormType> {
     variant?: string;
 }
 
+/**
+ * Option item for combobox fields - can be a string or label/value object
+ */
+type ComboboxOption = string | {
+    label: string;
+    value: string;
+};
+/**
+ * Props for the ComboboxField component
+ */
+interface ComboboxFieldProps<FormType, P extends Path<FormType> = Path<FormType>> {
+    /**
+     * 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 (array of strings or label/value objects)
+     * If not provided, will use options from schema metadata
+     *
+     * For async loading, use form-level dataLoaders and pass options via extraData:
+     * ```ts
+     * useForm(schema, {
+     *   dataLoaders: { products: loadProducts },
+     * });
+     * // Then: :options="form.extraData.products || []"
+     * ```
+     */
+    options?: ComboboxOption[];
+    /**
+     * Whether to allow creating new values that don't exist in the options
+     * Default: true
+     */
+    allowCreate?: boolean;
+    /**
+     * Custom filter function for options
+     * Default: filters by case-insensitive substring match
+     */
+    filterFn?: (query: string, option: ComboboxOption) => boolean;
+}
+
 interface CurrencyFieldProps<FormType> {
     name: FlexiblePath<FormType>;
     label?: string;
@@ -811,7 +892,7 @@ interface FieldMetadata {
     /** The data type of the field */
     type: 'string' | 'number' | 'boolean' | 'array' | 'object' | 'enum' | 'date' | 'union';
     /** The input type for rendering the field */
-    inputType?: 'text' | 'email' | 'url' | 'tel' | 'number' | 'select' | 'checkbox' | 'radio' | 'textarea' | 'password' | 'array' | 'currency' | 'date' | 'time' | 'datetime-local' | 'file' | 'range' | 'search';
+    inputType?: 'text' | 'email' | 'url' | 'tel' | 'number' | 'select' | 'checkbox' | 'radio' | 'textarea' | 'password' | 'array' | 'currency' | 'date' | 'time' | 'datetime-local' | 'file' | 'range' | 'search' | 'combobox';
     /** The display label for the field */
     label?: string;
     /** Placeholder text for the field */
@@ -870,7 +951,7 @@ interface FieldMetadata {
  */
 interface SchemaFieldMetadata {
     /** The input type for rendering the field */
-    inputType?: 'text' | 'email' | 'tel' | 'number' | 'select' | 'checkbox' | 'radio' | 'textarea' | 'password' | 'currency' | 'date' | 'time' | 'datetime-local';
+    inputType?: 'text' | 'email' | 'tel' | 'number' | 'select' | 'checkbox' | 'radio' | 'textarea' | 'password' | 'currency' | 'date' | 'time' | 'datetime-local' | 'combobox';
     /** Placeholder text for the field */
     placeholder?: string;
     /** The display label for the field */
@@ -928,6 +1009,7 @@ interface StyleCreators {
     createSearchField: <FormType>() => FunctionalComponent<SearchFieldProps<FormType>, {}, any, {}>;
     createTimeField: <FormType>() => FunctionalComponent<TimeFieldProps<FormType>, {}, any, {}>;
     createDateTimeLocalField: <FormType>() => FunctionalComponent<DateTimeLocalFieldProps<FormType>, {}, any, {}>;
+    createComboboxField: <FormType>() => FunctionalComponent<ComboboxFieldProps<FormType>, {}, any, {}>;
     createArrayField: <FormType, ItemType = any>() => FunctionalComponent<ArrayFieldProps<FormType, ItemType>, {}, {
         itemRenderer: (props: {
             item: ItemType;
@@ -1107,6 +1189,12 @@ declare function useForm<T extends z.ZodObject<any>, CalcType = (values: z.infer
         resetField: (path: string) => void;
         hasError: (path: string) => boolean;
         getError: (path: string) => string;
+        setFocus: (path: string, value: boolean) => void;
+        isFocused: (path: string) => boolean;
+        setDisplayText: (path: string, text: string) => void;
+        getDisplayText: (path: string) => string;
+        setSelectedIndex: (path: string, index: number) => void;
+        getSelectedIndex: (path: string) => number;
     };
     ZiniaForm: vue.FunctionalComponent<FormProps<z.TypeOf<T>>, {}, any, {}>;
     ZiniaSubmitButton: vue.FunctionalComponent<SubmitButtonProps<z.TypeOf<T>>, {}, any, {}>;
@@ -1506,6 +1594,10 @@ interface FilterValue {
     value: any;
     operator: 'eq' | 'contains' | 'gt' | 'lt' | 'in' | 'between';
 }
+type FilterOptionItem = {
+    label: string;
+    value: any;
+} | string | number;
 interface BaseActionItem<TData> {
     key: string;
     /**
@@ -1557,8 +1649,8 @@ interface ColumnDefinition<TData, TField extends keyof TData> {
     format?: (value: TData[TField], row: TData) => string;
     render?: (value: TData[TField], row: TData) => any;
     filterType?: 'text' | 'select' | 'number' | 'boolean';
-    filterOptions?: any[];
-    filterOptionsLoader?: () => Promise<any[]>;
+    filterOptions?: FilterOptionItem[];
+    filterOptionsLoader?: () => Promise<FilterOptionItem[]>;
     sortLabels?: {
         asc: string;
         desc: string;
@@ -2160,4 +2252,4 @@ declare const ActionIcons: {
     readonly dotsHorizontal: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z\" /></svg>";
 };
 
-export { ActionIcons, type ActionItem, type ActionsConfig, type ButtonActionItem, type ColumnDefinition, type CursorDataTableOptions, type CursorFetchParams, type CursorFetchResult, type DataTableColumns, type DataTableOptions, type DisplayComponentsType, type DisplayFieldComponent, ErrorDisplay, type FetchDataParams, type FetchDataResult, type FilterValue, type LinkActionItem, LoadingDisplay, NoDataDisplay, SCHEMA_ID_SYMBOL, type TypedSelectFieldComponent, type UseCursorDataTableType, type UseDataTableType, type UseDeleteModalType, type UseDisplayType, type UseFormType, type UseFormTyped, 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, type ZiniaDataTable, type ZiniaDeleteModal, type ZiniaDeleteModalFields, type ZiniaDeleteModalGenericFields, type ZiniaDisplay, type ZiniaDisplayFields, type ZiniaDisplayGenericFields, type ZiniaForm, type ZiniaFormFields, type ZiniaFormGenericFields, ZiniaPlugin, type ZiniaPluginOptions, clearAllMetadata, clearSchemaMetadata, createBaseComponents, createBaseDisplayComponents, createPartialStyle, createStyleTemplate, createTypedArrayField, createTypedSelectField, daisyUIStyle, extendStyle, generateDisplayComponents, generateFieldComponents, getAllSchemaMetadata, getDefaultStyle, getFieldMetadata, getRegisteredStyle, getRegisteredStyleNames, getSchemaId, hasRegisteredStyle, hasSchemaMetadata, mergeStyles, plainStyle, registerSchemaMetadata, registerStyle, setSchemaMetadata, useCursorDataTable, useDataTable, useDeleteModal, useDisplay, useForm, withMetadata };
+export { ActionIcons, type ActionItem, type ActionsConfig, type ButtonActionItem, type ColumnDefinition, type CursorDataTableOptions, type CursorFetchParams, type CursorFetchResult, type DataTableColumns, type DataTableOptions, type DisplayComponentsType, type DisplayFieldComponent, ErrorDisplay, type FetchDataParams, type FetchDataResult, type FilterOptionItem, type FilterValue, type LinkActionItem, LoadingDisplay, NoDataDisplay, SCHEMA_ID_SYMBOL, type TypedSelectFieldComponent, type UseCursorDataTableType, type UseDataTableType, type UseDeleteModalType, type UseDisplayType, type UseFormType, type UseFormTyped, 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, type ZiniaDataTable, type ZiniaDeleteModal, type ZiniaDeleteModalFields, type ZiniaDeleteModalGenericFields, type ZiniaDisplay, type ZiniaDisplayFields, type ZiniaDisplayGenericFields, type ZiniaForm, type ZiniaFormFields, type ZiniaFormGenericFields, ZiniaPlugin, type ZiniaPluginOptions, clearAllMetadata, clearSchemaMetadata, createBaseComponents, createBaseDisplayComponents, createPartialStyle, createStyleTemplate, createTypedArrayField, createTypedSelectField, daisyUIStyle, extendStyle, generateDisplayComponents, generateFieldComponents, getAllSchemaMetadata, getDefaultStyle, getFieldMetadata, getRegisteredStyle, getRegisteredStyleNames, getSchemaId, hasRegisteredStyle, hasSchemaMetadata, mergeStyles, plainStyle, registerSchemaMetadata, registerStyle, setSchemaMetadata, useCursorDataTable, useDataTable, useDeleteModal, useDisplay, useForm, withMetadata };