Component System and Extensions

/**
 * 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;

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");

/**
 * 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;
}

// 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);
  }
});

/**
 * 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;

// 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;
});

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;
}

/**
 * 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;

// Register custom directive
FormCreate.directive("focus", {
  inserted(el) {
    el.focus();
  }
});

// Use in rules
const rule = {
  type: "input",
  field: "username",
  directives: [
    { name: "focus" }
  ]
};

/**
 * 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;

// Map custom component model field
FormCreate.setModelField("custom-switch", "checked");
FormCreate.setModelField("custom-select", "selected");

/**
 * Register custom formula function
 * @param name - Formula name identifier
 * @param fn - Formula calculation function
 */
setFormula(name: string, fn: Function): void;

// 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)"
};

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;