@chronicstone/sweetforms

A package based on Sweetalert2. that profides highly customizable promised-based popup forms, with features like form advanced validation, optional http request handling, multiple-steps, and many more !

Key Features • How To Use • Documentation & Examples • Improvements roadmap • Credits

Key Features

• Grid-based templating - Create your layouts
  • High depth of forms layout customisation, based on css grid
• High variety of fields input availables
  • List of supported input types : text, textarea, email, password, number, select, radio, checkbox, file, week, month, time, datetime-local, date
  • Custom input types coming soon (Data-table select, and others !)
• Support advanced customisable validation
  • Includes basic validators : required, email, phone number. Other validators comming soon
  • Custom validators : Define your own validators and apply them to any field. Supports assynchroneous task check
• Dark/Light mode
• Supports multiple steps forms
• Provide feedback functions that allow you to show success / error feedback after processing form content
• 100% Responsive
• Works with VanillaJS, and any front-end javascript framework (Vue, React, Angular, ..)

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Install the package
$ npm install --save @chronicstone/sweetforms

// Import the package to your project
import { SimpleForm, SteppedForm } from "@chronicstone/sweetforms"

// Call one of the provided methods to generate your form.
SimpleForm({
  themeConfig: {
    darkMode: false
  },
  itemsByLine: 1
  title: "Sign in
  fields: [
    {
      label: "Email address",
      key: "email",
      type: "text",
      validation: ['email']
    },
    {
      label: "Password",
      key: "email",
      type: "password",
      validation: ['email']
    }
  ]
}).then(result => {
  const {success, formData, ShowFeedback } = result
  // ... Do some stuff here
  
  // ShowFeedback method allow you to display a feedback popup after processing the form content if needed
  ShowFeedback({success: true, title: "Form completed !", text: "", timer: 3000})
})

Documentation and examples

• Comming soon

Improvements roadmap

• Webpack bundle + tailwind setup
• Tailwind-based css rework
• Add support for more data-forms
• Add input / output parsing module for fields values. (Handling of objects / array, multi-select checkboxes, ...)
• Add new input formats
• Add new default validators

Credits

This package is entirely based on Sweetalert2, and its promise-based notification system.

You want to improve this library ? Or any ideas of improvements ?

This project is 100 % open-source, do not hesitate to give feedback on the library, ask for new features or even make a pull request. Any participation is welcomed.

License

MIT

---

GitHub @ChronicStone  ·