Quick HTML forms.
Features:
- Easy to use API
- Dynamic form generation
- Supports bulma
- Can be used standalone or as a VueComponent
Pre-requisites:
- Bulma (If using standard quick form fields)
- Vue 2
- A module bundler (Webpack, ParcelJS, etc)
npm i quick-form
import Vue from "vue";
import { QuickForm } from "quick-form";
const Form = Vue.extend({
components: { QuickForm },
template: `
<QuickForm
:fields="fields
@submit="onSubmit($event)"></QuickForm>
`,
data() {
return {
fields: [
{ type: "Input", model: "test1", label: "Field 1", inputType: "text" },
{ type: "Input", model: "test2", label: "Field 2", inputType: "text" },
{ type: "Input", model: "test4", label: "Field 4", inputType: "number" },
{ type: "Submit" }
],
}
},
methods: {
onSubmit(document: object) {
api.post(document)
}
}
})import Vue from "vue";
import { QuickFormVanilla } from "quick-form";
const form = new QuickFormVanilla({
fields: [
{ type: "Input", model: "test1", label: "Field 1", inputType: "text" },
{ type: "Input", model: "test2", label: "Field 2", inputType: "text" },
{ type: "Input", model: "test4", label: "Field 4", inputType: "number" },
{ type: "Submit" }
]
});
const main = document.getElementById("main")!;
main.appendChild(form);<QuickForm :fields="fields"><QuickForm>fields(Required) An array of QuickField objects representing the form (required). QuickFields are documented later.document(Optional) The object the form data is saved tocancellable(Optional) Determines whether or not to show the cancel buttonresettable(Optional) Determines whether or not to show the reset button
submitFired when the form is submitted, passes document as the first argument to the callbackinputFired when the form data is changed, passes document as the first argument to the callback
QuickFormVanilla has the following interface:
class QuickFormVanilla {
readonly vue: Vue;
readonly element: HTMLElement;
constructor({ fields, quickFormComponent }: {
fields: QuickField[],
/** Use a Custom version of the quick form component */
quickFormComponent?: VueConstructor;
});
on(event: "submit", cb: (formData: object) => void): this;
on(event: string, cb: (...args: any[]) => void): this;
}The following interfaces represent fields that can be passed to QuickForm
export interface QuickField<T = any> {
/** The type of field. Equivalent to the name of the field component. */
type: string;
/** Default value of the field */
default?: T;
/**
* When a user submits a quick form, the instance will emit a submit event
* that returns an object with all the values the user supplied. model represents
* the field of that object the QuickField value will be attached to.
*
* Internally, this value is what v-model gets set to on the input. For
* more information visit: https://vuejs.org/v2/api/#v-model
*/
model?: string;
/** The field is required, defaults to true */
required?: boolean;
/** A label for the field to present to the user */
label?: string;
/**
* If the value of the specified value does not equal the value specified
* by is, hide this field.
*/
showIf?: { field: string, is: any };
/**
* A custom validator for the field. Can be async.
*
* If the function returns true, this.isInvalid will be set to true.
* If the function returns a string, this.isInvalid will be set to true
* and the errorMessage will be set to said string.
*
* Note: Will mot work if field has been passed through JSON.stringify.
*
* @param val - The value the user has entered for the field in the form
*/
validator?(val: T): string | undefined | Promise<string | undefined>;
/**
* An error message to show the user.
* This value is automatically set by the validator function.
* It's best to not set this to anything.
*/
errorMessage?: string;
/** Additional data, passed to the corresponding QuickFieldTemplate of this type */
[extensions: string]: any;
}
export interface QuickInputField<T = any> extends QuickField<T> {
type: "Input";
inputType: "text" | "number" | "password" | "email" | "tel" | "url" | "color";
}
export interface QuickTextareaField<T = any> extends QuickField<T> {
type: "Textarea";
}
export interface QuickSelectField<T = any> extends QuickField<T> {
type: "Select";
options: { label: string; value: any }[];
}
export interface QuickCheckboxField<T = any> extends QuickField<T> {
type: "Checkbox";
}
export interface QuickRadioField<T = any> extends QuickField<T> {
type: "Radio";
options: { label: string; value: any }[];
}
export interface QuickSubmitField<T = any> extends QuickField<T> {
type: "Submit";
}
export interface QuickFormField<T = any> extends QuickField<T> {
type: "QuickForm";
fields: QuickField[];
}![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent