@chronicstone/vue-sweetforms

A Vue 3 package based on Naive UI that provides 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 & Live Examples • Improvements roadmap • Credits

Key Features

• 📝 Schema-based form definition

• 📐 Auto grid-based templating, with breakpoint-based responsiveness control

• ✏️ Any type of field supported A lot of field types supported (text | textarea | password | number | slider | switch | select | radio | checkbox | checkboxGroup | date | time | datetime | datetimerange | daterange | month | year | file | array | object | customComponent)

• 📁 Supports deeply nested data structures (objects & arrays)

• 🔗 Advanced cross-fields dependency system (conditional rendering, validation, field options, ...)

• ✔️ Advanced validation based on Vuelidate

• 🌙 Dark/Light mode

• 🎨 Highly customizable design

• ⚙️ Supports multiple steps forms

• ➕ And many more !

Documentation and live examples

• DOCUMENTATION : https://sweetforms.netlify.app/
• LIVE EXAMPLES : https://sweetforms-demo.netlify.app/

How To Use

1. Install the package

npm i -s @chronicstone/vue-sweetforms

2. Import styles in main.js

import "vue-sweetforms/dist/style.css"

3. Wrap your app with the FormProvider component

// App.vue

<script setup>
  import { FormProvider } from "vue-sweetforms"
</script>

<template>
  <FormProvider>
    <!-- Your app content here -->
    <router-view/>
  </FormProvider
</template>

4. Use the form API anywhere in your app :

<script setup>
  import { useSweetform } from "vue-sweetforms"
  import axios from "axios"
  
  const GetDogBreeds =  async () => await axios.get('https://dog.ceo/api/breeds/list/all').then(response => Object.keys(response.data.message).map(item => ({ label: item, value: item }))).catch(_ => [])
  
  const GetSubbreedByBreed = async ({ dogBreed }) => !dogBreed ? [] : await axios.get(`https://dog.ceo/api/breed/${dogBreed}/list`).then(response => response.data.message.map(item => ({ label: item, value: item }))).catch(err => [])
  
  const { createForm } = useSweetform()
  
  
  const OpenForm = async () => {
    const { isCompleted, formData } = await createForm({
      title: "Demonstration",
      gridSize: 6,
      fields: [
        { key: "firstName", type: "text", label: "First name", placeholder: "John", size: 2 },
        { key: "lastName", type: "text", label: "Last name", placeholder: "Doe", size: 2 },
        { key: "email", type: "text", label: "Email address", placeholder: "john.doe@gmail.com", size: 2 },
        { key: "dogBreed", type: "select", label: "Dog breed", placeholder: "Select a breed", options: GetDogBreeds, size: 3 },
        { key: "dogSubBreed", type: "select", label: "Dog sub-breed", placeholder: "Select a sub-breed", dependencies: ['dogBreed'], options: GetSubbreedByBreed, size: 3 }     
      ]
    })
  }
</script>

<template>
  <button @click="OpenForm">OPEN FORM</button>
</template>

Improvements roadmap

• Improve / complete documentation
• Migrate documentation to VitePress or IlesJs
• Integrate documentation examples to docs app (w/ Vitepress or IlesJs)
• Make Sweetform work as standalone component (If user don't want to use the function-based API)
• Make optimizations to improve performance
• Add full WAI-ARIA support
• Improve styles customization API

Any PR is gladly welcomed and will be greatly appreciated.

Credits

This packages uses Naive UI component library internally to render most field types. Particular thanks to @TuSimple who was of a big help in how to immplement the underlying concepts behin

MIT

GitHub @ChronicStone  ·