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

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.

docs

component-system.md

data-binding.md

form-api.md

form-creation.md

form-factory.md

index.md

rule-system.md

validation.md

tile.json