Form Creation and Management

/**
 * Create and mount a form instance immediately
 * @param rules - Array of form rules defining structure and behavior
 * @param options - Form configuration options
 * @param parent - Parent Vue component context
 * @returns Form API instance for interaction
 */
create(
  rules: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>[], 
  options?: Options<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, 
  parent?: any
): Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;

/**
 * Initialize form without mounting, providing manual control over lifecycle
 * @param rule - Array of form rules defining structure and behavior  
 * @param option - Form configuration options
 * @returns Form controller with mount, remove, destroy methods and API access
 */
init(
  rule: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>[], 
  option?: Options<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>
): {
  mount($el?: Element): Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
  remove(): void;
  destroy(): void;
  api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
};

import FormCreate from "@form-create/element-ui";

// Immediate creation and mounting
const api = FormCreate.create([
  {
    type: "input",
    field: "username", 
    title: "Username",
    value: ""
  }
], {
  el: "#form-container",
  onSubmit: (formData, api) => {
    console.log("Form submitted:", formData);
  }
});

// Manual lifecycle control
const formController = FormCreate.init([
  {
    type: "input",
    field: "email",
    title: "Email", 
    value: ""
  }
], {
  onSubmit: (formData) => {
    console.log("Email form submitted:", formData);
  }
});

// Mount when ready
const formApi = formController.mount(document.getElementById("email-form"));

// Later cleanup
formController.destroy();

/**
 * Call FormCreate instance as function for convenient form creation
 * @param rule - Array of form rules
 * @param option - Form configuration options
 * @returns Form API instance
 */
(rule: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>[], option?: Options<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>): Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;

// Direct function call syntax
const api = FormCreate([
  { type: "input", field: "name", title: "Name" }
], {
  el: "#form"
});

/**
 * Get FormCreate Vue component for template usage
 * @returns Vue component that can be used in templates
 */
$form(): Component;

/**
 * Get fragment component for custom rendering
 * @returns Fragment component for wrapping content
 */
$vnode(): Component;

// Get Vue component
const FormComponent = FormCreate.$form();

// Use in Vue template
export default {
  components: {
    'form-create': FormComponent
  },
  template: `
    <form-create 
      :rule="formRules" 
      :option="formOptions"
      @created="onFormCreated"
    />
  `,
  data() {
    return {
      formRules: [
        { type: "input", field: "title", title: "Title" }
      ],
      formOptions: {
        onSubmit: this.handleSubmit
      }
    };
  }
};

interface BaseOptions<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
  /** Target DOM element for form mounting */
  el?: Element | string;
  /** Initial form data values */
  formData?: FormData;
  /** Form submission handler */
  onSubmit?: (formData: FormData, api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void;
  /** Form reset handler */
  onReset?: (api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void;
  /** Form created lifecycle hook */
  mounted?: (api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void;
  /** Form reload handler */  
  reload?: (api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void;
  /** Field value change handler */
  onChange?: (field: string, value: any, opt: {
    rule: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
    api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
    setFlag: boolean;
  }) => void;
  /** Preview mode flag */
  preview?: boolean;
  /** Append form values to existing data */
  appendValue?: boolean;
  /** Ignore hidden fields in form data */
  ignoreHiddenFields?: boolean;
  /** Validate only on form submission */
  validateOnSubmit?: boolean;
  /** Force overwrite existing values */
  forceCoverValue?: boolean;
  /** Transform event names */
  transformEventName?: boolean;
  /** Inject events into components */
  injectEvent?: boolean;
  /** Global event handlers */
  globalEvent?: GlobalEvent;
  /** Global data sources */
  globalData?: GlobalData;
  /** Global CSS classes */
  globalClass?: GlobalClass;
  /** Custom form styles */
  style?: string;
}

/**
 * Destroy form instance and clean up resources
 * Removes DOM elements, event listeners, and Vue watchers
 */
destroy(): void;

/**
 * Reload form with new rules while preserving instance
 * @param rules - New form rules to replace current ones
 */
reload(rules: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>[]): void;

/**
 * Refresh form rendering and update display
 * Triggers re-render of all form components
 */
refresh(): void;

const api = FormCreate.create(initialRules, options);

// Update form with new rules
api.reload([
  { type: "input", field: "newField", title: "New Field" }
]);

// Refresh display after changes
api.refresh();

// Clean up when done
api.destroy();

interface FormCreateController {
  /** Form API instance for programmatic interaction */
  api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
  
  /** Mount form to specific DOM element */
  mount($el?: Element): Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
  
  /** Remove form from DOM without destroying instance */
  remove(): void;
  
  /** Completely destroy form instance and clean up resources */
  destroy(): void;
}

interface FormCreateProps<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
  /** Form rules array */
  rule: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>[];
  /** Form configuration options */
  option?: Options<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
  /** Extend parent form options */
  extendOption?: boolean;
  /** Disable entire form */
  disabled?: boolean;
  /** Enable preview mode */
  preview?: boolean;
  /** Initial form values */
  value?: Object;
  /** External API reference */
  api?: Object;
}