Vue.js low-code form rendering engine that generates dynamic forms through JSON configuration with validation, data binding, and component management capabilities.
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
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.