{"id":26482485,"url":"https://github.com/drew-y/quick-form","last_synced_at":"2025-03-20T04:14:01.458Z","repository":{"id":34021624,"uuid":"145050431","full_name":"drew-y/quick-form","owner":"drew-y","description":"Quick HTML forms.","archived":false,"fork":false,"pushed_at":"2023-03-04T02:47:55.000Z","size":801,"stargazers_count":4,"open_issues_count":9,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-30T02:51:23.124Z","etag":null,"topics":["form-builder","forms","html-form","vue-components"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drew-y.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-16T23:53:34.000Z","updated_at":"2024-04-30T02:51:23.124Z","dependencies_parsed_at":"2023-01-15T04:00:35.937Z","dependency_job_id":null,"html_url":"https://github.com/drew-y/quick-form","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drew-y%2Fquick-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drew-y%2Fquick-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drew-y%2Fquick-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drew-y%2Fquick-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drew-y","download_url":"https://codeload.github.com/drew-y/quick-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244547614,"owners_count":20470104,"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":["form-builder","forms","html-form","vue-components"],"created_at":"2025-03-20T04:14:00.894Z","updated_at":"2025-03-20T04:14:01.451Z","avatar_url":"https://github.com/drew-y.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Quick Form\n\nQuick HTML forms.\n\n**Features:**\n\n- Easy to use API\n- Dynamic form generation\n- Supports bulma\n- Can be used standalone or as a VueComponent\n\n## Installation\n\n**Pre-requisites:**\n\n- Bulma (If using standard quick form fields)\n- Vue 2\n- A module bundler (Webpack, ParcelJS, etc)\n\n`npm i quick-form`\n\n## Usage Examples\n\n### As a Vue component\n\n```typescript\nimport Vue from \"vue\";\nimport { QuickForm } from \"quick-form\";\n\nconst Form = Vue.extend({\n    components: { QuickForm },\n    template: `\n        \u003cQuickForm\n            :fields=\"fields\n            @submit=\"onSubmit($event)\"\u003e\u003c/QuickForm\u003e\n    `,\n\n    data() {\n        return {\n            fields: [\n                { type: \"Input\", model: \"test1\", label: \"Field 1\", inputType: \"text\" },\n                { type: \"Input\", model: \"test2\", label: \"Field 2\", inputType: \"text\" },\n                { type: \"Input\", model: \"test4\", label: \"Field 4\", inputType: \"number\" },\n                { type: \"Submit\" }\n            ],\n        }\n    },\n\n    methods: {\n        onSubmit(document: object) {\n            api.post(document)\n        }\n    }\n})\n```\n\n### Standalone (Vanilla)\n\n```typescript\nimport Vue from \"vue\";\nimport { QuickFormVanilla } from \"quick-form\";\n\nconst form = new QuickFormVanilla({\n    fields: [\n        { type: \"Input\", model: \"test1\", label: \"Field 1\", inputType: \"text\" },\n        { type: \"Input\", model: \"test2\", label: \"Field 2\", inputType: \"text\" },\n        { type: \"Input\", model: \"test4\", label: \"Field 4\", inputType: \"number\" },\n        { type: \"Submit\" }\n    ]\n});\n\nconst main = document.getElementById(\"main\")!;\nmain.appendChild(form);\n```\n\n## Vue Component\n\n```html\n\u003cQuickForm :fields=\"fields\"\u003e\u003cQuickForm\u003e\n```\n\n## Properties\n\n- `fields` (Required) An array of QuickField objects representing the form (required). QuickFields are documented later.\n- `document` (Optional) The object the form data is saved to\n- `cancellable` (Optional) Determines whether or not to show the cancel button\n- `resettable` (Optional) Determines whether or not to show the reset button\n\n## Events\n\n- `submit` Fired when the form is submitted, passes document as the first argument to the callback\n- `input` Fired when the form data is changed, passes document as the first argument to the callback\n\n## Vanilla Usage\n\nQuickFormVanilla has the following interface:\n\n```typescript\nclass QuickFormVanilla {\n    readonly vue: Vue;\n    readonly element: HTMLElement;\n\n    constructor({ fields, quickFormComponent }: {\n        fields: QuickField[],\n\n        /** Use a Custom version of the quick form component */\n        quickFormComponent?: VueConstructor;\n    });\n\n    on(event: \"submit\", cb: (formData: object) =\u003e void): this;\n    on(event: string, cb: (...args: any[]) =\u003e void): this;\n}\n```\n\n## Fields\n\nThe following interfaces represent fields that can be passed to QuickForm\n\n```typescript\nexport interface QuickField\u003cT = any\u003e {\n    /** The type of field. Equivalent to the name of the field component. */\n    type: string;\n\n    /** Default value of the field */\n    default?: T;\n\n    /**\n     * When a user submits a quick form, the instance will emit a submit event\n     * that returns an object with all the values the user supplied. model represents\n     * the field of that object the QuickField value will be attached to.\n     *\n     * Internally, this value is what v-model gets set to on the input. For\n     * more information visit: https://vuejs.org/v2/api/#v-model\n     */\n    model?: string;\n\n    /** The field is required, defaults to true */\n    required?: boolean;\n\n    /** A label for the field to present to the user */\n    label?: string;\n\n    /**\n     * If the value of the specified value does not equal the value specified\n     * by is, hide this field.\n     */\n    showIf?: { field: string, is: any };\n\n    /**\n     * A custom validator for the field. Can be async.\n     *\n     * If the function returns true, this.isInvalid will be set to true.\n     * If the function returns a string, this.isInvalid will be set to true\n     * and the errorMessage will be set to said string.\n     *\n     * Note: Will mot work if field has been passed through JSON.stringify.\n     *\n     * @param val - The value the user has entered for the field in the form\n     */\n    validator?(val: T): string | undefined | Promise\u003cstring | undefined\u003e;\n\n    /**\n     * An error message to show the user.\n     * This value is automatically set by the validator function.\n     * It's best to not set this to anything.\n     */\n    errorMessage?: string;\n\n    /** Additional data, passed to the corresponding QuickFieldTemplate of this type */\n    [extensions: string]: any;\n}\n\nexport interface QuickInputField\u003cT = any\u003e extends QuickField\u003cT\u003e {\n    type: \"Input\";\n    inputType: \"text\" | \"number\" | \"password\" | \"email\" | \"tel\" | \"url\" | \"color\";\n}\n\nexport interface QuickTextareaField\u003cT = any\u003e extends QuickField\u003cT\u003e {\n    type: \"Textarea\";\n}\n\nexport interface QuickSelectField\u003cT = any\u003e extends QuickField\u003cT\u003e {\n    type: \"Select\";\n    options: { label: string; value: any }[];\n}\n\nexport interface QuickCheckboxField\u003cT = any\u003e extends QuickField\u003cT\u003e {\n    type: \"Checkbox\";\n}\n\nexport interface QuickRadioField\u003cT = any\u003e extends QuickField\u003cT\u003e {\n    type: \"Radio\";\n    options: { label: string; value: any }[];\n}\n\nexport interface QuickSubmitField\u003cT = any\u003e extends QuickField\u003cT\u003e {\n    type: \"Submit\";\n}\n\nexport interface QuickFormField\u003cT = any\u003e extends QuickField\u003cT\u003e {\n    type: \"QuickForm\";\n    fields: QuickField[];\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrew-y%2Fquick-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrew-y%2Fquick-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrew-y%2Fquick-form/lists"}