FormStack

FormStack is a robust and flexible Vue 3 library designed for creating, managing, and rendering dynamic forms. It provides a powerful drag-and-drop builder for form design and a high-performance engine for form rendering, supporting complex validation, conditional logic, and multi-platform integration.

Key Features

• Form Builder (Design Mode):

  • Interactive drag-and-drop interface powered by vuedraggable.
  • Support for multi-section forms and nested/repeating elements.
  • Comprehensive configuration for each form element.
  • Tree-view and Panel-view design modes.

• Form Renderer (Render Mode):

  • Dynamic rendering from JSON templates.
  • Built-in validation using vee-validate and yup.
  • Multiple appearance modes: Default, Tabbed, Review, and Preview.
  • Platform-aware features for Web, .NET Core, and Flutter (WebView).

• Library Integration:

  • Exported as a UMD/ESM library for easy embedding.
  • Exposed APIs for programmatically controlling form state and data submission.

Tech Stack

• Framework: Vue 3 (Composition API)
• State Management: Pinia
• Language: TypeScript
• Build Tool: Vite
• Styling: Bootstrap 5, Sass/SCSS
• Key Libraries: Axios, Vee-Validate, Yup, Vuedraggable, SweetAlert2, Moment.js

Project Setup

Installation

npm install

Development

Run the development server with hot-reload:

npm run dev

Production Build

Build the project as a library for production:

npm run build

The output will be available in the dist/ directory as FormStack.min.js and FormStack.min.mjs.

Specialized Builds

For .NET Core integration:

npm run build:netcore

Quality Assurance

# Type-check and build
npm run build:type-check

# Lint files
npm run lint

# Format code
npm run format

IDE Setup

• Recommended: VSCode
• Extensions: Vue - Official (Volar)
• Settings: Enable "Take Over Mode" or use the "TypeScript Vue Plugin" for optimal TS support in .vue files.

Documentation

For detailed API documentation and usage examples, please refer to the files in the docs/ directory:

• docs/design API.md
• docs/render API.md