Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/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, multiple-steps, cross-field dependency, nested object / arrays, and many more !
https://github.com/ChronicStone/vue-sweetforms
async async-validation breakpoint cross-field-dependency form form-generator form-generator-vue3 json-form responsive vue3 vuejs
Last synced: 3 months ago
JSON representation
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 !
- Host: GitHub
- URL: https://github.com/ChronicStone/vue-sweetforms
- Owner: ChronicStone
- License: mit
- Created: 2021-12-07T11:00:15.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-15T15:34:08.000Z (over 1 year ago)
- Last Synced: 2024-05-21T13:58:29.619Z (9 months ago)
- Topics: async, async-validation, breakpoint, cross-field-dependency, form, form-generator, form-generator-vue3, json-form, responsive, vue3, vuejs
- Language: TypeScript
- Homepage: https://sweetforms.netlify.app/
- Size: 2.39 MB
- Stars: 26
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-naive - Sweetforms - A feature rich schema-based form generator package build with Naive UI + Typescript. (List / Other Projects Using NaiveUI)
README
DEPRECATED PROJECT, NOW REFER TO https://github.com/ChronicStone/vue-sweettools/
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
- 🔀 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](https://vuelidate-next.netlify.app/)
- 🌙 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
```bash
npm i -s @chronicstone/vue-sweetforms
```
#### 2. Import styles in main.js
```js
import "vue-sweetforms/dist/style.css"
```
#### 3. Wrap your app with the FormProvider component
```vue
// App.vue
import { FormProvider } from "vue-sweetforms"
```
#### 4. Use the form API anywhere in your app :
```vue
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: "[email protected]", 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 }
]
})
}
OPEN FORM
```
## Improvements roadmap
- [ ] Improve / complete documentation
- [ ] Migrate documentation to [VitePress](https://vitepress.vuejs.org/) or [IlesJs](https://github.com/ElMassimo/iles)
- [ ] 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](https://github.com/TuSimple/naive-ui) component library internally to render most field types. Particular thanks to [@TuSimple](https://github.com/TuSimple) who was of a big help in how to immplement the underlying concepts behin
MIT
---
> GitHub [@ChronicStone](https://github.com/ChronicStone) ·