Core factory functionality for creating and configuring FormCreate instances with UI framework-specific settings, global options, and extensibility features.
Main factory function that creates FormCreate instances configured for specific UI frameworks with custom manager implementations and global settings.
/**
* Creates a FormCreate instance configured for a specific UI framework
* @param config - Factory configuration with manager, UI settings, and extensions
* @returns Configured FormCreate instance with full API
*/
function FormCreateFactory<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>(
config: FormCreateFactoryConfig<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>
): FormCreate<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
interface FormCreateFactoryConfig<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
/** UI framework-specific manager classes and methods */
manager: { [key: string]: Object | Function };
/** Attribute configuration for rule properties */
attrs?: {
key?: string[];
array?: string[];
normal?: string[];
};
/** Function to extend the API with additional methods */
extendApi?: (api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, h: Object) => Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
/** Package version identifier */
version?: string;
/** Mobile mode configuration */
isMobile?: boolean;
/** UI framework identifier */
ui?: string;
/** Installation plugin for Vue integration */
install?: Install<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
}Usage Examples:
import FormCreateFactory from "@form-create/core";
import ElementManager from "@form-create/element-ui/src/manager";
// Create FormCreate instance for Element UI
const FormCreate = FormCreateFactory({
manager: {
...ElementManager
},
version: "2.7.16",
ui: "element-ui",
isMobile: false,
extendApi: (api, h) => {
// Add custom API methods
api.customMethod = () => { /* custom logic */ };
return api;
}
});
// Mobile configuration
const MobileFormCreate = FormCreateFactory({
manager: { /* mobile manager */ },
version: "2.7.16",
ui: "vant",
isMobile: true
});Plugin installation interface for Vue.js integration, allowing FormCreate to be registered as a Vue plugin with global configuration.
/**
* Plugin installation interface for Vue.js integration
* @param formCreate - FormCreate instance to install
* @param opt - Installation options and global configuration
*/
interface Install<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
(formCreate: FormCreate<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, opt: any): void;
}Core properties available on FormCreate instances providing version information, configuration access, and global utilities.
interface FormCreate<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
/** Package version string */
readonly version: string;
/** UI framework identifier */
readonly ui: string;
/** Global data object for cross-form data sharing */
readonly data: Object;
/** Maker instance for creating rules with fluent API */
readonly maker: Maker<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
/** Mobile mode flag */
isMobile?: boolean;
}Factory inheritance system for creating derived FormCreate instances that share components, parsers, and configuration.
/**
* Creates a new FormCreate factory optionally inheriting from current instance
* @param inherit - Whether to inherit components, parsers, and configuration
* @returns New FormCreate factory instance
*/
factory(inherit?: boolean): FormCreate<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;Usage Example:
// Create base FormCreate instance
const BaseFormCreate = FormCreateFactory({
manager: { /* base manager */ },
ui: "element-ui"
});
// Create derived instance with inheritance
const CustomFormCreate = BaseFormCreate.factory(true);
// Create independent instance without inheritance
const IndependentFormCreate = BaseFormCreate.factory(false);Vue.js plugin installation method for registering FormCreate globally with Vue applications.
/**
* Install FormCreate as a Vue plugin
* @param Vue - Vue constructor
* @param options - Global configuration options
*/
install(Vue: typeof Vue, options?: Options<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>): void;Usage Example:
import Vue from "vue";
import FormCreate from "@form-create/element-ui";
// Install as Vue plugin
Vue.use(FormCreate, {
// Global options
submitBtn: {
props: { type: "primary" }
},
resetBtn: {
props: { type: "default" }
}
});
// Now available in all Vue components
export default {
methods: {
createForm() {
return this.$formCreate([/* rules */], {/* options */});
}
}
};Global configuration management for setting default options that apply to all forms created by the instance.
interface BaseOptions<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
/** Global rule templates and presets */
global?: { [key: string]: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> };
/** Form submission configuration */
onSubmit?: (formData: FormData, api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void;
/** Form reset configuration */
onReset?: (api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void;
/** Form mount lifecycle hook */
mounted?: (api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void;
/** Global event handlers */
globalEvent?: GlobalEvent;
/** Global data sources */
globalData?: GlobalData;
/** Global CSS classes */
globalClass?: GlobalClass;
/** Custom CSS styles */
style?: string;
}UI framework driver system for abstracting UI-specific rendering logic and enabling cross-framework compatibility.
/**
* Register a UI framework driver
* @param name - Driver name identifier
* @param driver - Driver implementation with parsers and methods
*/
setDriver(name: string, driver: Driver): void;
interface Driver {
/** Component parsers for the UI framework */
parsers: { [id: string]: Parser };
/** Initialize form options for the framework */
initOptions: (options: Object) => void;
/** Update form options */
updateOptions: (options: Object) => void;
/** Update form wrapper */
updateWrap: (ctx: Object) => void;
/** Default render method */
defaultRender: (children: Slots, ctx: Object) => VNode | VNode[];
/** Default preview render method */
defaultPreview: (children: Slots, ctx: Object) => VNode | VNode[];
}This factory system provides the foundation for creating flexible, UI framework-agnostic form solutions while maintaining full configurability and extensibility.