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

index.mddocs/

FormCreate Core

FormCreate Core is a Vue.js low-code form rendering engine that enables developers to generate dynamic forms through JSON configuration. It provides comprehensive form creation, validation, data binding, and component management capabilities with support for 6 UI frameworks, mobile adaptation, and extensible architecture.

Package Information

  • Package Name: @form-create/core
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install @form-create/core

Core Imports

import FormCreateFactory, { 
  Creator, 
  Manager, 
  creatorFactory, 
  parseJson, 
  toJson, 
  copyRule, 
  copyRules, 
  mergeRule, 
  fragment 
} from "@form-create/core";

For CommonJS:

const FormCreateFactory = require("@form-create/core");
const { Creator, Manager, creatorFactory } = FormCreateFactory;

Basic Usage

import FormCreateFactory from "@form-create/core";

// Create FormCreate instance with UI framework configuration
const FormCreate = FormCreateFactory({
  manager: {
    // UI framework-specific manager implementation
  },
  version: "2.7.16",
  ui: "element-ui", // or other supported UI framework
  isMobile: false
});

// Define form rules using JSON configuration
const rules = [
  {
    type: "input",
    field: "username",
    title: "Username",
    value: "",
    props: {
      placeholder: "Enter username"
    },
    validate: [
      { required: true, message: "Username is required" }
    ]
  },
  {
    type: "input",
    field: "email", 
    title: "Email",
    value: "",
    props: {
      type: "email"
    }
  }
];

// Create form instance
const formApi = FormCreate.create(rules, {
  onSubmit: (formData, api) => {
    console.log("Form submitted:", formData);
  }
});

// Access form data
console.log(formApi.formData());

// Manipulate form
formApi.setValue("username", "john_doe");
formApi.hidden(true, "email"); // Hide email field

Architecture

FormCreate Core is built around several key architectural components:

  • Factory Pattern: FormCreateFactory creates configured FormCreate instances for specific UI frameworks
  • Rule-Based Configuration: JSON rules define form structure, validation, and behavior declaratively
  • API Layer: Comprehensive API for form manipulation, data binding, and lifecycle management
  • Component System: Extensible parser and component registration system supporting custom components
  • Event System: Built-in event bus for component communication and form lifecycle events
  • Driver Architecture: UI framework abstraction layer for cross-framework compatibility
  • Reactive Data Binding: Vue.js reactivity integration for automatic UI updates

Capabilities

Form Factory and Configuration

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

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> {
  manager: { [key: string]: Object | Function };
  attrs?: {
    key?: string[];
    array?: string[];
    normal?: string[];
  };
  extendApi?: (api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, h: Object) => Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
  version?: string;
  isMobile?: boolean;
  ui?: string;
  install?: Install<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
}

Form Factory and Configuration

Form Creation and Management

Core form creation capabilities including form instantiation, mounting, initialization, and lifecycle management.

interface FormCreate<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
  // Form creation
  (rule: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>[], option?: Options<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>): Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
  
  // Instance creation
  create(rules: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>[], options?: Options<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, parent?: any): Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
  
  // Form initialization
  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>;
  };
}

Form Creation and Management

Rule System and Creators

Rule creation and management system for defining form structure, validation, and behavior through JSON configuration and fluent API builders.

interface BaseRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
  type?: string;
  field?: string;
  value?: any;
  title?: string;
  props?: { [key: string]: any };
  validate?: Object[];
  hidden?: boolean;
  display?: boolean;
  children?: Array<RuleChildren<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>>;
  control?: Control<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>[];
  effect?: { [key: string]: any };
  hook?: { [key: string]: Function };
}

class BaseCreator<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
  constructor(type: string, title?: string | Object, field?: string, value?: any, props?: Object);
  field(prop: string): this;
  value(prop: any): this;
  props(prop: { [key: string]: any }): this;
  validate(prop: Object[]): this;
  hidden(prop: boolean): this;
  // ... many more chainable methods
}

Rule System and Creators

Form API and Data Management

Comprehensive API for form data manipulation, field management, validation control, and form state management.

interface BaseApi<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
  // Data access
  formData(): FormData;
  formData(field: string | Array<string>): FormData;
  getValue(field: string): any;
  setValue(field: string, value: any): void;
  setValue(formData: FormData): void;
  
  // Field management
  fields(): string[];
  append(rule: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>): void;
  removeField(field: string): FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
  
  // Form operations
  submit(success?: Function, fail?: Function): Promise<any>;
  resetFields(): void;
  refresh(): void;
  destroy(): void;
}

Form API and Data Management

Component System and Extensions

Component registration, parser system, and extensibility features for integrating custom components and UI frameworks.

interface FormCreate<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
  // Component management
  component(name: string, component: any): void;
  component(component: string | any): any;
  
  // Parser system
  parser(name: string, parser: Parser): void;
  parser(parser: Parser): void;
  
  // Extensions
  use(install: Install<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, opt?: any): void;
  register(name: string, effect: Effect<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>): void;
}

Component System and Extensions

Validation and Control System

Form validation system with built-in validators, conditional display logic, and dynamic form control mechanisms.

interface Control<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
  value?: any;
  handle?: (val: any, api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => boolean;
  method?: 'display' | 'disabled' | 'hidden' | 'required';
  condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween' | 'empty' | 'notEmpty' | 'pattern';
  rule: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>[] | string[];
}

interface BaseApi<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
  updateValidate(id: string, validate: Object[], merge?: boolean): Promise<any>;
  updateValidates(validates: { [id: string]: Object[] }, merge?: boolean): Promise<any>;
  hidden(hidden: boolean, field?: string | Array<string>): void;
  display(hidden: boolean, field?: string | Array<string>): void;
  disabled(disabled: boolean, field?: string | Array<string>): void;
}

Validation and Control System

Data Binding and Effects

Advanced data binding, global data management, effect system, and reactive data loading capabilities.

interface FormCreate<MakerAttrs, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
  // Global data management
  setData(id: string, data: any): void;
  getData(id: string, defaultValue?: any): any;
  setDataDriver(id: string, callback: (key: string) => any): void;
  refreshData(id: string): void;
  
  // Fetch utilities
  fetch(option: FetchOption, effectArgs: Object): void;
}

interface FetchOption {
  action: string;
  method?: string;
  data?: Object;
  query?: Object;
  headers?: Object;
  withCredentials?: boolean;
  onSuccess: (body: any) => void;
  onError?: (e: Error | ProgressEvent) => void;
}

Data Binding and Effects

Types

type FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> = 
  Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> | 
  Creator<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;

type Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> = 
  BaseRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> & RuleAttrs;

type Options<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> = 
  BaseOptions<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> & OptionAttrs;

interface FormData {
  [field: string]: any;
}

interface ValidationSchema<T> {
  [K in keyof T]: Validator<T[K]>;
}

interface ValidationResult<T> {
  isValid: boolean;
  data: T;
  errors: ValidationError[];
}

interface StaticDataItem {
  label: string;
  type: 'static';
  result: any;
}

interface FetchDataItem {
  label: string;
  type: 'fetch';
  action: string;
  method: 'GET' | 'POST';
  headers?: Object;
  data?: Object;
  parse?: string | ((res: any) => any);
  onError?: string | ((e) => void);
}

interface GlobalData {
  [id: string]: StaticDataItem | FetchDataItem;
}

interface GlobalEvent {
  [id: string]: {
    label: string;
    handle: string | (($inject: Object) => void);
  };
}