Component registration, parser system, and extensibility features for integrating custom components, UI frameworks, and extending FormCreate functionality.
System for registering, managing, and accessing Vue components within the FormCreate ecosystem.
/**
* Register or retrieve Vue components
* @param name - Component name identifier
* @param component - Vue component to register (optional for retrieval)
* @returns Component if retrieving, void if registering
*/
component(name: string, component: any): void;
component(component: string | any): any;
/**
* Set component name aliases for easier reference
* @param alias - Object mapping alias names to component names
*/
componentAlias(alias: { [alias: string]: string }): void;
/**
* Get form component for Vue template usage
* @returns Vue component that renders forms
*/
$form(): Component;Usage Examples:
import CustomInput from "./components/CustomInput.vue";
import FormCreate from "@form-create/core";
// Register custom component
FormCreate.component("custom-input", CustomInput);
// Register component with auto-naming
FormCreate.component(CustomInput); // Uses component.name
// Set up aliases
FormCreate.componentAlias({
"input": "el-input",
"select": "el-select"
});
// Get FormCreate Vue component
const FormComponent = FormCreate.$form();
// Retrieve registered component
const MyInput = FormCreate.component("custom-input");Component parser system for defining how components are rendered, configured, and integrated into forms.
/**
* Register or retrieve component parsers
* @param name - Parser name (usually matches component type)
* @param parser - Parser implementation (optional for retrieval)
* @returns Parser if retrieving, void if registering
*/
parser(name: string, parser: Parser): void;
parser(parser: Parser): void;
interface Parser {
/** Parser name identifier */
name?: string;
/** Whether to merge with existing parser */
merge?: boolean;
/** Initialize parser with context */
init?: (ctx: Object) => void;
/** Convert form value to component value */
toFormValue?: (value: any, ctx: Object) => void;
/** Convert component value to form value */
toValue?: (value: any, ctx: Object) => void;
/** Component mounted lifecycle hook */
mounted?: (ctx: Object) => void;
/** Render component with children and context */
render?: (children: Slots, ctx: Object) => VNode | VNode[];
/** Render component in preview mode */
preview?: (children: Slots, ctx: Object) => VNode | VNode[];
/** Merge component props with context */
mergeProp?: (ctx: Object) => void;
}
interface Slots {
[slot: string]: () => any;
}Usage Examples:
// Register custom input parser
FormCreate.parser("custom-input", {
name: "custom-input",
toFormValue(value, ctx) {
// Transform value when setting to form
return String(value || "");
},
toValue(value, ctx) {
// Transform value when reading from component
return value?.trim() || null;
},
render(children, ctx) {
// Custom render logic
return ctx.h("el-input", ctx.prop, children);
},
preview(children, ctx) {
// Preview mode rendering
return ctx.h("span", {}, [ctx.rule.value]);
}
});
// Register parser with merge capability
FormCreate.parser({
name: "enhanced-input",
merge: true, // Will merge with existing input parser
mounted(ctx) {
console.log("Enhanced input mounted:", ctx.rule.field);
}
});System for extending FormCreate functionality through plugins, effects, and custom integrations.
/**
* Use plugin or extension
* @param install - Plugin installation function or plugin object
* @param opt - Plugin options and configuration
*/
use(install: Install<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> | {
install: Install<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
[key: string]: any;
}, opt?: any): void;
/**
* Register effects or providers
* @param name - Effect name identifier
* @param effect - Effect implementation or provider function
*/
register(name: string, effect: Effect<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> | ((fc: Object) => void)): void;
register(effect: Effect<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>): void;
/**
* Extend API with additional methods
* @param fn - Function that receives API and returns extended API
*/
extendApi(fn: (api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => Object): void;
/**
* Use with Vue app integration
* @param formCreate - FormCreate instance
* @param vue - Vue constructor
*/
useApp(formCreate: FormCreate<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, vue: typeof Vue): void;Usage Examples:
// Install plugin
FormCreate.use({
install(fc, options) {
// Add custom functionality
fc.customMethod = () => { /* implementation */ };
// Register custom components
fc.component("plugin-input", PluginInput);
}
}, { pluginOption: true });
// Register effect
FormCreate.register("validation-effect", {
name: "validation-effect",
components: ["input", "select"],
init(data, rule, api) {
// Initialize effect
},
value(data, rule, api) {
// Handle value changes
}
});
// Extend API
FormCreate.extendApi((api) => {
api.customValidate = (field) => {
// Custom validation logic
return api.getRule(field)?.validate || [];
};
return api;
});Comprehensive effect system for adding reactive behaviors, data loading, and component interactions.
interface Effect<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
/** Effect name identifier */
name?: string;
/** Component types this effect applies to */
components?: string | string[];
/** Initialize effect when rule is created */
init?: (data: {
value: any;
getValue: () => any;
repeat: boolean;
}, rule: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void;
/** Effect loaded lifecycle hook */
load?: (data: EffectValue, rule: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void;
/** Effect fully loaded hook */
loaded?: (data: EffectValue, rule: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void;
/** Watch for data changes */
watch?: (data: EffectValue, rule: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void;
/** Handle value changes */
value?: (data: EffectValue, rule: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void;
/** Handle control logic */
control?: (data: EffectValue, rule: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void;
/** Component deleted hook */
deleted?: (data: EffectValue, rule: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void;
/** Component mounted hook */
mounted?: (data: EffectValue, rule: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void;
}
interface EffectValue {
/** Current effect value */
value: any;
/** Get current props */
getProp: () => Object;
/** Clear all props */
clearProp: () => void;
/** Get current value */
getValue: () => any;
/** Merge props with existing */
mergeProp: (prop: Object) => Object;
}Vue directive registration and management for custom DOM behaviors and interactions.
/**
* Register or retrieve Vue directives
* @param name - Directive name
* @param directive - Directive implementation (optional for retrieval)
*/
directive(name: string, directive: any): void;
directive(directive: any): void;Usage Example:
// Register custom directive
FormCreate.directive("focus", {
inserted(el) {
el.focus();
}
});
// Use in rules
const rule = {
type: "input",
field: "username",
directives: [
{ name: "focus" }
]
};System for mapping component types to their model field names for proper v-model integration.
/**
* Set model field mapping for component types
* @param type - Component type identifier
* @param field - Model field name (e.g., 'value', 'checked', 'selected')
*/
setModelField(type: string, field: string): void;Usage Example:
// Map custom component model field
FormCreate.setModelField("custom-switch", "checked");
FormCreate.setModelField("custom-select", "selected");Custom formula registration for computed values and dynamic calculations.
/**
* Register custom formula function
* @param name - Formula name identifier
* @param fn - Formula calculation function
*/
setFormula(name: string, fn: Function): void;Usage Example:
// Register formula
FormCreate.setFormula("calculateTotal", (price, quantity, tax) => {
return (price * quantity) * (1 + tax);
});
// Use in rules
const rule = {
type: "input",
field: "total",
computed: "calculateTotal(price, quantity, taxRate)"
};Built-in fragment component for wrapping and organizing form content without additional DOM elements.
interface FragmentComponent {
/** Component name */
name: string;
/** Functional component flag */
functional: boolean;
/** Component props */
props: string[];
/** Render function */
render: (h: Function, ctx: any) => VNode | VNode[];
}
const fragment: FragmentComponent;This comprehensive component system provides complete extensibility for integrating custom components, behaviors, and UI frameworks while maintaining consistency and performance.