or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

component-system.mddata-binding.mdform-api.mdform-creation.mdform-factory.mdindex.mdrule-system.mdvalidation.md
tile.json

form-factory.mddocs/

Form Factory and Configuration

Core factory functionality for creating and configuring FormCreate instances with UI framework-specific settings, global options, and extensibility features.

Capabilities

FormCreateFactory

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

Install Interface

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

FormCreate Instance Properties

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

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 Plugin Installation

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

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

Driver System

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.