diff --git a/demo/src/pages/index.astro b/demo/src/pages/index.astro index 6af9401..136844d 100644 --- a/demo/src/pages/index.astro +++ b/demo/src/pages/index.astro @@ -1,5 +1,9 @@ --- -import { FormControl, FormGroup } from "astro-reactive-form/core"; +import { + ControlConfig, + FormControl, + FormGroup, +} from "astro-reactive-form/core"; import Form from "astro-reactive-form"; const form = new FormGroup([ @@ -17,15 +21,15 @@ const form = new FormGroup([ form.name = "Simple Form"; +const config: ControlConfig = { + type: "checkbox", + name: "is-awesome", + label: "is Awesome?", + labelPosition: "right", +}; + // insert a control -form.controls.push( - new FormControl({ - type: "checkbox", - name: "is-awesome", - label: "is Awesome?", - labelPosition: "right", - }) -); +form.controls.push(new FormControl(config)); // get the FormControl object const userNameControl = form.get("username"); diff --git a/packages/astro-reactive-form/client/controls.ts b/packages/astro-reactive-form/client/controls.ts index 227e034..ad238fe 100644 --- a/packages/astro-reactive-form/client/controls.ts +++ b/packages/astro-reactive-form/client/controls.ts @@ -1,10 +1,9 @@ import { FormControl, FormGroup } from '../core'; -import type { FormControlType } from '../core/form-control-types'; +import type { ControlType } from '../core/form-control-types'; export const getFormGroup = (formName: string) => { const fieldSetEl = (document.getElementById(formName) as HTMLFieldSetElement) || null; if (fieldSetEl === null) { - console.error(`Formgroup with name: '${formName}' doesn't exist!`); return undefined; } @@ -22,14 +21,13 @@ export const getFormGroup = (formName: string) => { const getFormControl = (name: string) => { const inputEl = document.getElementById(name) as HTMLInputElement | null; if (inputEl === null) { - console.error(`Input with name: ${name} doesn't exist!`); return undefined; } const formControl = new FormControl({ name: inputEl.name, value: inputEl.value, - type: inputEl.type as FormControlType, + type: inputEl.type as ControlType, label: inputEl.dataset.label as string, labelPosition: inputEl.dataset.labelPosition as 'right' | 'left', }); @@ -46,8 +44,6 @@ const getFormControl = (name: string) => { const controlProxy = new Proxy(formControl, { set() { - //prevent any setter to be able to work in client; - console.error('Setting this property manually is prohibited!'); return true; }, }); diff --git a/packages/astro-reactive-form/core/form-control-types.ts b/packages/astro-reactive-form/core/form-control-types.ts index e9eebf3..60fd232 100644 --- a/packages/astro-reactive-form/core/form-control-types.ts +++ b/packages/astro-reactive-form/core/form-control-types.ts @@ -1,8 +1,8 @@ /** - * FormControlType - determines the type of form control + * ControlType - determines the type of form control * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types */ -export type FormControlType = +export type ControlType = | 'text' | 'checkbox' | 'radio' @@ -25,31 +25,33 @@ export type FormControlType = | 'url' | 'week'; -export interface FormControlBase { +export type ControlConfig = ControlBase | Checkbox | Radio | Submit | Button; + +export interface ControlBase { name: string; - type?: FormControlType; + type?: ControlType; value?: string | number | string[]; label?: string; labelPosition?: 'right' | 'left'; placeholder?: string; } -export interface Checkbox extends FormControlBase { +export interface Checkbox extends ControlBase { type: 'checkbox'; checked: boolean; } -export interface Radio extends FormControlBase { +export interface Radio extends ControlBase { type: 'radio'; checked: boolean; } -export interface Submit extends FormControlBase { +export interface Submit extends ControlBase { type: 'submit'; callBack?: () => void; } -export interface Button extends FormControlBase { +export interface Button extends ControlBase { type: 'button'; callBack?: () => void; } diff --git a/packages/astro-reactive-form/core/form-control.ts b/packages/astro-reactive-form/core/form-control.ts index cd66881..df0f7a9 100644 --- a/packages/astro-reactive-form/core/form-control.ts +++ b/packages/astro-reactive-form/core/form-control.ts @@ -1,15 +1,8 @@ -import type { - FormControlType, - Button, - Checkbox, - FormControlBase, - Radio, - Submit, -} from './form-control-types'; +import type { ControlConfig, ControlType } from './form-control-types'; export class FormControl { private _name = ''; - private _type: FormControlType = 'text'; + private _type: ControlType = 'text'; private _value?: string | number | null | string[]; private _label?: string; private _labelPosition?: 'right' | 'left' = 'left'; @@ -17,7 +10,7 @@ export class FormControl { private _isPristine = true; private _placeholder?; - constructor(config: FormControlBase | Checkbox | Radio | Submit | Button) { + constructor(config: ControlConfig) { const { name, type, value, label, labelPosition, placeholder } = config; this._name = name; this._type = type || 'text'; diff --git a/packages/astro-reactive-form/core/form-group.ts b/packages/astro-reactive-form/core/form-group.ts index af471a0..49af54d 100644 --- a/packages/astro-reactive-form/core/form-group.ts +++ b/packages/astro-reactive-form/core/form-group.ts @@ -1,11 +1,11 @@ -import type { FormControlBase } from './form-control-types'; +import type { ControlBase } from './form-control-types'; import { FormControl } from './form-control'; export class FormGroup { controls: FormControl[]; name?: string; - constructor(controls: FormControlBase[], name = '') { + constructor(controls: ControlBase[], name = '') { this.name = name; this.controls = controls .filter((control) => control.type !== 'submit')