gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
194 lines (176 loc) • 5.71 kB
TypeScript
/**
* <div id="demo"></div>
* <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gd-sprest-bs/5.0.3/gd-sprest-bs.min.js"></script>
* <script type="text/javascript">
* // Wait for the window to be loaded
* window.addEventListener("load", function() {
* // Render the form
* $REST.Components.Form({
* el: document.querySelector("#demo"),
* rows: [
* {
* columns: [
* {
* control: {
* label: "First Name:",
* name: "FName",
* type: $REST.Components.FormControlTypes.TextField
* }
* },
* {
* control: {
* label: "Last Name:",
* name: "LName",
* type: $REST.Components.FormControlTypes.TextField
* }
* },
* {
* control: {
* label: "Choices:",
* name: "Choice",
* type: $REST.Components.FormControlTypes.Dropdown,
* items: [
* { text: "Choice 1", value: "1" },
* { text: "Choice 2", value: "2" },
* { text: "Choice 3", value: "3" },
* { text: "Choice 4", value: "4" },
* { text: "Choice 5", value: "5" }
* ]
* }
* }
* ]
* }
* ],
* value: {
* FName: "Gunjan",
* LName: "Datta",
* Choice: "3"
* }
* });
* });
* </script>
*/
/**
* ### Form
*
* ```ts
* import { Components } from "gd-sprest-bs";
*
* // Create the form
* let el = document.querySelector("#myForm");
* let form = Components.Form({
* el: el,
* rows: [
* {
* control: {
* label: "First Name:",
* name: "FName",
* type: Components.FormControlTypes.TextField
* }
* },
* {
* control: {
* label: "Last Name:",
* name: "LName",
* type: Components.FormControlTypes.TextField
* }
* },
* {
* control: {
* label: "Choices:",
* name: "Choice",
* type: Components.FormControlTypes.Dropdown,
* items: [
* { text: "Choice 1", value: "1" },
* { text: "Choice 2", value: "2" },
* { text: "Choice 3", value: "3" },
* { text: "Choice 4", value: "4" },
* { text: "Choice 5", value: "5" }
* ]
* }
* }
* ],
* value: {
* FName: "Gunjan",
* LName: "Datta",
* Choice: "3"
* }
* });
* ```
*/
export const Form: (props: IFormProps) => IForm;
import { IBaseProps } from "../types";
import { IFormControl, IFormControlProps } from "./controlTypes";
/**
* Form Validation Types
*/
export const FormValidationTypes: IFormValidationTypes;
/**
* Form
*/
export interface IForm {
/** Appends controls to the form */
appendControls: (controls: Array<IFormControlProps>) => void;
/** Appends rows to the form */
appendRows: (rows: Array<IFormRow>) => void;
/** Clears the validation on the form. */
clearValidation: () => void;
/** The form controls */
controls: Array<IFormControl>;
/** The form element */
el: HTMLFormElement;
/** Gets a control by its name */
getControl: (name: string) => IFormControl;
/** Returns the form values */
getValues: () => { [key: string]: any };
/** Hides the form. */
hide: () => void;
/** Inserts a control into the form */
insertControl: (idx: number, control: IFormControlProps) => void;
/** Validates the form */
isValid: () => boolean;
/** Shows the form. */
show: () => void;
}
/**
* Form Column
*/
export interface IFormColumn {
className?: string;
control: IFormControlProps;
isAutoSized?: boolean;
size?: number;
}
/**
* Form Properties
*/
export interface IFormProps extends IBaseProps<IForm> {
controls?: Array<IFormControlProps>;
groupClassName?: string;
isFloating?: boolean;
onControlRendering?: (control: IFormControlProps) => void | PromiseLike<IFormControlProps>;
onControlRendered?: (control: IFormControl) => void | PromiseLike<IFormControl>;
onRendered?: (controls: Array<IFormControl>) => void;
rowClassName?: string;
rows?: Array<IFormRow>;
validationType?: number;
value?: any;
}
/**
* Form Row
*/
export interface IFormRow {
className?: string;
isAutoSized?: boolean;
isCentered?: boolean;
isDisabled?: boolean;
isReadOnly?: boolean;
columns?: Array<IFormColumn>;
}
/**
* Form Validation Types
*/
export type IFormValidationTypes = {
Default: number;
Tooltip: number;
}