Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@chronicstone/vue-sweetforms

Package Overview
Dependencies
Maintainers
1
Versions
96
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@chronicstone/vue-sweetforms

A Vue 3 highly customizable rich-featured form popup generator

  • 0.7.0
  • npm
  • Socket score

Version published
Weekly downloads
2
increased by100%
Maintainers
1
Weekly downloads
 
Created
Source

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

  • 📐 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

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  · 

FAQs

Package last updated on 27 Oct 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc