Form-Builder 🏗️(under rapid construction)

Generate from in a minutes

Todo

Overall

• Initiate a basic vue project with vitest cypress vue pinia and router
• Create some base element like input, select,radio
• Some derived from like single-step form & multi-step-form
• Add proper if condition for base element that read if logic from fun and apply proper reactivity
• Remove key from form when element is unmounted
• Merge model value with the generated value
• Multi step from process
• Add function and computed both feature for if conditions
• Add other other basic property in select radio checkbox text area
• Check if create-ui, initial-value and fun can load from api call
• Add watcher fo watch some components value
• Rerun when watcher changes
• Component level fetch
  • Extract the function and call properly
  • Save the value somewhere to properly use this
• From Level fetch
  • Extract the function and call properly
  • Save the value somewhere to properly use this
• Add slots for form actions
• Remove lodash from dependency
• Remove same type of code from base components
• Basic Validation
• Add editor element
• Create Platform UI Credential create form
• Create Platform UI Credential Edit form

Component Specific Feature

• Base Element
  • Input
    • Conditional Render
    • Loader check
    • Initial value calculate
    • Watcher changes
    • Validation
    • Proper input type guess
  • TextArea
    • Conditional Render
    • Loader check
    • Initial value calculate
    • Watcher changes
    • Validation
    • Proper input type guess
  • Single Select
    • Conditional Render
    • Loader check
    • Initial value calculate
    • Watcher changes
    • Validation
    • Proper input type guess
  • Checkbox
    • Conditional Render
    • Loader check
    • Initial value calculate
    • Watcher changes
    • Validation
    • Proper input type guess
  • Radio
    • Conditional Render
    • Loader check
    • Initial value calculate
    • Watcher changes
    • Validation
    • Proper input type guess
  • Switch
    • Conditional Render
    • Loader check
    • Initial value calculate
    • Watcher changes
    • Validation
    • Proper input type guess
  • Anchor
    • Conditional Render
    • Loader check
    • Initial value calculate
    • Watcher changes
    • Validation
    • Proper input type guess

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Cypress

npm run test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

npm run build
npm run test:e2e

Lint with ESLint

npm run lint