Skip to content

A Vue 3 package based on Naive UI that provides highly customizable promised-based popup forms, with features like form advanced validation, multiple-steps, cross-field dependency, nested object / arrays, and many more !

License

Notifications You must be signed in to change notification settings

ChronicStone/vue-sweetforms

Repository files navigation

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 !

npm version

Key FeaturesHow To UseDocumentation & Live ExamplesImprovements roadmapCredits

Key Features

  • 📝 Schema-based form definition

  • 🔀 Supports function-based and component-based usage

  • 📐 Auto grid-based templating, with breakpoint-based responsiveness control (Tailwind-like API)

  • ✏️ 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

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  · 

About

A Vue 3 package based on Naive UI that provides highly customizable promised-based popup forms, with features like form advanced validation, multiple-steps, cross-field dependency, nested object / arrays, and many more !

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages