CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-form-create--core

Vue.js low-code form rendering engine that generates dynamic forms through JSON configuration with validation, data binding, and component management capabilities.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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);
  };
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@form-create/core@2.7.x
Publish Source
CLI
Badge
tessl/npm-form-create--core badge