{"id":13532986,"url":"https://github.com/ChronicStone/vue-sweetforms","last_synced_at":"2025-04-01T21:31:32.006Z","repository":{"id":45273619,"uuid":"435845363","full_name":"ChronicStone/vue-sweetforms","owner":"ChronicStone","description":"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 !","archived":false,"fork":false,"pushed_at":"2023-10-15T15:34:08.000Z","size":2504,"stargazers_count":27,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T03:51:41.091Z","etag":null,"topics":["async","async-validation","breakpoint","cross-field-dependency","form","form-generator","form-generator-vue3","json-form","responsive","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://sweetforms.netlify.app/","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ChronicStone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-07T11:00:15.000Z","updated_at":"2025-02-17T01:10:53.000Z","dependencies_parsed_at":"2024-06-06T04:50:02.199Z","dependency_job_id":"44bf7b8e-ae32-46be-8003-71244a59b878","html_url":"https://github.com/ChronicStone/vue-sweetforms","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChronicStone%2Fvue-sweetforms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChronicStone%2Fvue-sweetforms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChronicStone%2Fvue-sweetforms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChronicStone%2Fvue-sweetforms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChronicStone","download_url":"https://codeload.github.com/ChronicStone/vue-sweetforms/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246713142,"owners_count":20821844,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["async","async-validation","breakpoint","cross-field-dependency","form","form-generator","form-generator-vue3","json-form","responsive","vue3","vuejs"],"created_at":"2024-08-01T07:01:15.592Z","updated_at":"2025-04-01T21:31:30.377Z","avatar_url":"https://github.com/ChronicStone.png","language":"TypeScript","funding_links":[],"categories":["List"],"sub_categories":["Other Projects Using NaiveUI"],"readme":"\u003ch1 style=\"color: red\"\u003eDEPRECATED PROJECT, NOW REFER TO https://github.com/ChronicStone/vue-sweettools/\u003c/h1\u003e\n\n\n\u003ch1 align=\"center\"\u003e\n  \u003ca\u003e\u003cimg src=\"https://github.com/ChronicStone/sweetforms/blob/main/logo_sweetforms.svg\" alt=\"Vue SweetForms\" width=\"200\"\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003eA Vue 3 package based on  \u003ca href=\"https://github.com/TuSimple/naive-ui\" target=\"_blank\"\u003eNaive UI\u003c/a\u003e that provides highly customizable promised-based popup forms, with features like form advanced validation, optional http request handling, multiple-steps, and many more !\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://badge.fury.io/js/@chronicstone%2Fvue-sweetforms\"\u003e\u003cimg src=\"https://badge.fury.io/js/@chronicstone%2Fvue-sweetforms.svg\" alt=\"npm version\" height=\"18\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#key-features\"\u003eKey Features\u003c/a\u003e •\n  \u003ca href=\"#how-to-use\"\u003eHow To Use\u003c/a\u003e •\n  \u003ca href=\"#documentation-and-live-examples\"\u003eDocumentation \u0026 Live Examples\u003c/a\u003e •\n  \u003ca href=\"#improvements-roadmap\"\u003eImprovements roadmap\u003c/a\u003e •\n  \u003ca href=\"#credits\"\u003eCredits\u003c/a\u003e\n\u003c/p\u003e\n\n## Key Features\n\n- 📝 Schema-based form definition\n\n- 🔀 Supports function-based and component-based usage\n\n- 📐 Auto grid-based templating, with breakpoint-based responsiveness control (Tailwind-like API)\n\n- ✏️ 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`)\n\n- 📁 Supports deeply nested data structures (objects \u0026 arrays)\n\n- 🔗 Advanced cross-fields dependency system (conditional rendering, validation, field options, ...)\n\n- ✔️ Advanced validation based on [Vuelidate](https://vuelidate-next.netlify.app/)\n\n- 🌙 Dark/Light mode\n\n- 🎨 Highly customizable design\n\n- ⚙️ Supports multiple steps forms\n\n- ➕ And many more !\n\n\n## Documentation and live examples\n\n- DOCUMENTATION : https://sweetforms.netlify.app/\n- LIVE EXAMPLES : https://sweetforms-demo.netlify.app/\n\n\n## How To Use\n\n#### 1. Install the package\n```bash\nnpm i -s @chronicstone/vue-sweetforms\n```\n\n#### 2. Import styles in main.js\n```js\nimport \"vue-sweetforms/dist/style.css\"\n```\n\n\n#### 3. Wrap your app with the FormProvider component\n```vue\n// App.vue\n\n\u003cscript setup\u003e\n  import { FormProvider } from \"vue-sweetforms\"\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cFormProvider\u003e\n    \u003c!-- Your app content here --\u003e\n    \u003crouter-view/\u003e\n  \u003c/FormProvider\n\u003c/template\u003e\n```\n\n#### 4. Use the form API anywhere in your app :\n```vue\n\u003cscript setup\u003e\n  import { useSweetform } from \"vue-sweetforms\"\n  import axios from \"axios\"\n  \n  const GetDogBreeds =  async () =\u003e await axios.get('https://dog.ceo/api/breeds/list/all').then(response =\u003e Object.keys(response.data.message).map(item =\u003e ({ label: item, value: item }))).catch(_ =\u003e [])\n  \n  const GetSubbreedByBreed = async ({ dogBreed }) =\u003e !dogBreed ? [] : await axios.get(`https://dog.ceo/api/breed/${dogBreed}/list`).then(response =\u003e response.data.message.map(item =\u003e ({ label: item, value: item }))).catch(err =\u003e [])\n  \n  const { createForm } = useSweetform()\n  \n  \n  const OpenForm = async () =\u003e {\n    const { isCompleted, formData } = await createForm({\n      title: \"Demonstration\",\n      gridSize: 6,\n      fields: [\n        { key: \"firstName\", type: \"text\", label: \"First name\", placeholder: \"John\", size: 2 },\n        { key: \"lastName\", type: \"text\", label: \"Last name\", placeholder: \"Doe\", size: 2 },\n        { key: \"email\", type: \"text\", label: \"Email address\", placeholder: \"john.doe@gmail.com\", size: 2 },\n        { key: \"dogBreed\", type: \"select\", label: \"Dog breed\", placeholder: \"Select a breed\", options: GetDogBreeds, size: 3 },\n        { key: \"dogSubBreed\", type: \"select\", label: \"Dog sub-breed\", placeholder: \"Select a sub-breed\", dependencies: ['dogBreed'], options: GetSubbreedByBreed, size: 3 }     \n      ]\n    })\n  }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton @click=\"OpenForm\"\u003eOPEN FORM\u003c/button\u003e\n\u003c/template\u003e\n```\n## Improvements roadmap\n\n- [ ] Improve / complete documentation\n- [ ] Migrate documentation to [VitePress](https://vitepress.vuejs.org/) or  [IlesJs](https://github.com/ElMassimo/iles)\n- [ ] Integrate documentation examples to docs app (w/ Vitepress or IlesJs)\n- [ ] Make Sweetform work as standalone component (If user don't want to use the function-based API)\n- [ ] Make optimizations to improve performance\n- [ ] Add full WAI-ARIA support\n- [ ] Improve styles customization API\n\nAny PR is gladly welcomed and will be greatly appreciated.\n\n## Credits\n\nThis 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\n\n\nMIT\n\n---\n\n\u003e GitHub [@ChronicStone](https://github.com/ChronicStone) \u0026nbsp;\u0026middot;\u0026nbsp;\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FChronicStone%2Fvue-sweetforms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FChronicStone%2Fvue-sweetforms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FChronicStone%2Fvue-sweetforms/lists"}