├── .gitignore ├── .netlify └── state.json ├── .npmignore ├── .vscode └── extensions.json ├── LICENSE ├── README.md ├── demo ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── netlify.toml ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── DemoRenderer.vue │ ├── config │ │ ├── index.js │ │ └── themeOverrides.js │ ├── demos │ │ ├── SimpleDemo1.js │ │ ├── index.js │ │ └── usageInstructions.js │ ├── main.js │ └── useTheme.ts ├── tailwindcss.config.js └── vite.config.js ├── docs ├── .editorconfig ├── .github │ └── renovate.json ├── .gitignore ├── .prettierignore ├── .prettierrc.js ├── LICENCE ├── content │ └── docs │ │ ├── index.md │ │ ├── installation.md │ │ └── usage │ │ ├── breakpoints.md │ │ ├── data-sources.md │ │ ├── dependencies.md │ │ ├── fields.md │ │ ├── form-provider.md │ │ ├── index.md │ │ ├── initial-state.md │ │ ├── steps.md │ │ ├── theming.md │ │ └── validation.md ├── gridsome.config.js ├── gridsome.server.js ├── netlify.toml ├── package-lock.json ├── package.json ├── src │ ├── assets │ │ ├── favicon.png │ │ └── logo.png │ ├── components │ │ ├── LayoutHeader.vue │ │ ├── Logo.vue │ │ ├── NextPrevLinks.vue │ │ ├── OnThisPage.vue │ │ ├── Search.vue │ │ ├── Sidebar.vue │ │ └── ToggleDarkMode.vue │ ├── layouts │ │ └── Default.vue │ ├── main.js │ ├── pages │ │ ├── 404.vue │ │ └── Index.vue │ └── templates │ │ └── MarkdownPage.vue ├── static │ └── logo.jpg ├── tailwind.config.js └── yarn.lock ├── index.html ├── netlify.toml ├── package-lock.json ├── package.json ├── public └── favicon.ico ├── src ├── App.vue ├── DemoRenderer.vue ├── TestComp.vue ├── assets │ └── logo.png ├── components │ ├── CollapseButton.vue │ ├── DescriptionPopup.vue │ ├── Form.vue │ ├── FormInlineContainer.vue │ ├── FormInput.vue │ ├── FormModal.vue │ ├── FormModalFullscreen.vue │ ├── FormProvider.vue │ ├── FormSteps.vue │ └── index.ts ├── config │ ├── index.ts │ └── themeOverrides.ts ├── constants │ ├── defaultStyles.ts │ ├── index.ts │ ├── injectionKeys.ts │ └── twClasses.ts ├── demos │ ├── SimpleDemo1 copy.ts │ ├── SimpleDemo1.ts │ └── index.ts ├── env.d.ts ├── hooks │ ├── index.ts │ ├── useBreakpointStyle.ts │ ├── useBreakpoints.ts │ ├── useForm.ts │ └── useSweetform.ts ├── index.ts ├── main.ts ├── slotRender.tsx ├── types │ ├── fieldOption.types.ts │ ├── form.types.ts │ └── index.ts ├── useTheme.ts └── utils │ ├── baseUtils.ts │ ├── fieldUtils.ts │ ├── formUtils.ts │ ├── index.ts │ ├── stylesUtils.ts │ └── vueUtils.ts ├── tailwindcss.config.js ├── tsconfig.json └── vite.config.ts /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /.netlify/state.json: -------------------------------------------------------------------------------- 1 | { 2 | "siteId": "50cd599e-b956-4608-9f6a-66c11bf2442c" 3 | } -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | docs/ 3 | public/ -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 ChronicStone 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

DEPRECATED PROJECT, NOW REFER TO https://github.com/ChronicStone/vue-sweettools/

2 | 3 | 4 |

5 | Vue SweetForms 6 |

7 | 8 |

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 !

9 | 10 |

11 | npm version 12 |

13 | 14 |

15 | Key Features • 16 | How To Use • 17 | Documentation & Live Examples • 18 | Improvements roadmap • 19 | Credits 20 |

21 | 22 | ## Key Features 23 | 24 | - 📝 Schema-based form definition 25 | 26 | - 🔀 Supports function-based and component-based usage 27 | 28 | - 📐 Auto grid-based templating, with breakpoint-based responsiveness control (Tailwind-like API) 29 | 30 | - ✏️ 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`) 31 | 32 | - 📁 Supports deeply nested data structures (objects & arrays) 33 | 34 | - 🔗 Advanced cross-fields dependency system (conditional rendering, validation, field options, ...) 35 | 36 | - ✔️ Advanced validation based on [Vuelidate](https://vuelidate-next.netlify.app/) 37 | 38 | - 🌙 Dark/Light mode 39 | 40 | - 🎨 Highly customizable design 41 | 42 | - ⚙️ Supports multiple steps forms 43 | 44 | - ➕ And many more ! 45 | 46 | 47 | ## Documentation and live examples 48 | 49 | - DOCUMENTATION : https://sweetforms.netlify.app/ 50 | - LIVE EXAMPLES : https://sweetforms-demo.netlify.app/ 51 | 52 | 53 | ## How To Use 54 | 55 | #### 1. Install the package 56 | ```bash 57 | npm i -s @chronicstone/vue-sweetforms 58 | ``` 59 | 60 | #### 2. Import styles in main.js 61 | ```js 62 | import "vue-sweetforms/dist/style.css" 63 | ``` 64 | 65 | 66 | #### 3. Wrap your app with the FormProvider component 67 | ```vue 68 | // App.vue 69 | 70 | 73 | 74 |