v0.2.2

new: $HTMLElementAPIs
optimize: collect utilty method of HTMLElement and merge into different $Element

$index.ts

@@ -122,7 +122,7 @@ export namespace $ {
      * @param action The action to execute when arguments length not equal 0.
      * @returns 
      */
-    export function fluent<T, A, V>(instance: T, args: IArguments, value: () => V, action: (...args: any[]) => void) {
+    export function fluent<T, A, V>(instance: T, args: IArguments, value: () => V, action: (...args: any[]) => void): T | V {
         if (!args.length) return value();
         action();
         return instance;
@@ -138,8 +138,8 @@ export namespace $ {
      * A helper for undefined able value and $State.set() which apply value to target.
      * @param object Target object.
      * @param key The key of target object.
-     * @param value Value of target property or parameter of method(Using Tuple to apply parameter).
+     * @param value Value of target property or parameter of method (Using Tuple to apply parameter).
-     * @param methodKey Variant key name when apply value on $State.set()
+     * @param handle callback when param `value` is $State object.
      * @returns 
      */
     export function set<O extends Object, K extends keyof O, V>(

lib/$ElementTemplate.ts

@@ -0,0 +1,94 @@
+import { $StateArgument } from "./$State";
+import { $Form } from "./node/$Form";
+export abstract class $HTMLElementAPIs<This = any> {
+
+    static create(...args: (keyof $HTMLElementAPIs)[]) {
+        const $template = class {};
+        Object.getOwnPropertyNames($HTMLElementAPIs.prototype).forEach(name => {
+        if (name === 'constructor') return;
+        if (!args.includes(name as keyof $HTMLElementAPIs)) return;
+        Object.defineProperty(
+            $template.prototype,
+            name,
+            Object.getOwnPropertyDescriptor($HTMLElementAPIs.prototype, name) || Object.create(null)
+        )
+        })
+        return $template;
+    }
+
+    disabled(): boolean;
+    disabled(disabled: $StateArgument<boolean>): This;
+    //@ts-ignore
+    disabled(disabled?: $StateArgument<boolean>) { return $.fluent(this, arguments, () => this.dom.disabled, () => $.set(this.dom, 'disabled', disabled)) }
+    
+    //@ts-ignore
+    checkValidity(): boolean { return this.dom.checkValidity() }
+    //@ts-ignore
+    reportValidity(): boolean { return this.dom.reportValidity() }
+
+    formAction(): string;
+    formAction(action: string | undefined): This;
+    //@ts-ignore
+    formAction(action?: string) { return $.fluent(this, arguments, () => this.dom.formAction, () => $.set(this.dom, 'formAction', action))}
+
+    formEnctype(): string;
+    formEnctype(enctype: string | undefined): This;
+    //@ts-ignore
+    formEnctype(enctype?: string) { return $.fluent(this, arguments, () => this.dom.formEnctype, () => $.set(this.dom, 'formEnctype', enctype))}
+    
+    formMethod(): string;
+    formMethod(method: string | undefined): This;
+    //@ts-ignore
+    formMethod(method?: string) { return $.fluent(this, arguments, () => this.dom.formMethod, () => $.set(this.dom, 'formMethod', method))}
+
+    formNoValidate(): boolean;
+    formNoValidate(boolean: boolean | undefined): This;
+    //@ts-ignore
+    formNoValidate(boolean?: boolean) { return $.fluent(this, arguments, () => this.dom.formNoValidate, () => $.set(this.dom, 'formNoValidate', boolean))}
+
+    formTarget(): string;
+    formTarget(target: string | undefined): This;
+    //@ts-ignore
+    formTarget(target?: string) { return $.fluent(this, arguments, () => this.dom.formTarget, () => $.set(this.dom, 'formTarget', target))}
+    
+    autocomplete(): AutoFill;
+    //@ts-ignore
+    autocomplete(autocomplete: AutoFill | undefined): This;
+    //@ts-ignore
+    autocomplete(autocomplete?: AutoFill) { return $.fluent(this, arguments, () => this.dom.autocomplete as AutoFill, () => $.set(this.dom, 'autocomplete', autocomplete as AutoFillBase))}
+    
+    name(): string;
+    name(name?: $StateArgument<string> | undefined): This;
+    //@ts-ignore
+    name(name?: $StateArgument<string> | undefined) { return $.fluent(this, arguments, () => this.dom.name, () => $.set(this.dom, 'name', name))}
+
+    maxLength(): number;
+    maxLength(maxLength: number): This;
+    //@ts-ignore
+    maxLength(maxLength?: number) { return $.fluent(this, arguments, () => this.dom.maxLength, () => $.set(this.dom, 'maxLength', maxLength))}
+    
+    minLength(): number;
+    minLength(minLength: number): This;
+    //@ts-ignore
+    minLength(minLength?: number) { return $.fluent(this, arguments, () => this.dom.minLength, () => $.set(this.dom, 'minLength', minLength))}
+    
+    required(): boolean;
+    required(required: boolean): This;
+    //@ts-ignore
+    required(required?: boolean) { return $.fluent(this, arguments, () => this.dom.required, () => $.set(this.dom, 'required', required))}
+    
+    label(): string;
+    label(label: $StateArgument<string> | undefined): This;
+    //@ts-ignore
+    label(label?: $StateArgument<string> | undefined) { return $.fluent(this, arguments, () => this.dom.label, () => $.set(this.dom, 'label', label))}
+    
+    //@ts-ignore
+    get form(): $Form | null { return this.dom.form ? $(this.dom.form) : null }
+    //@ts-ignore
+    get validationMessage(): string { return this.dom.validationMessage }
+    //@ts-ignore
+    get validity(): ValidityState { return this.dom.validity }
+    //@ts-ignore
+    get willValidate(): boolean { return this.dom.willValidate }
+}
+export type $HTMLElementAPIFilter<This, M extends keyof $HTMLElementAPIs> = Pick<$HTMLElementAPIs<This>, M>

lib/node/$Button.ts

@@ -1,39 +1,16 @@
 import { $Container, $ContainerOptions } from "./$Container";
-import { $State, $StateArgument } from "../$State";
+import { $Util } from "../$Util";
+import { $HTMLElementAPIFilter, $HTMLElementAPIs } from "../$ElementTemplate";
 export interface $ButtonOptions extends $ContainerOptions {}
 export class $Button extends $Container<HTMLButtonElement> {
     constructor(options?: $ButtonOptions) {
         super('button', options);
     }
     
-    disabled(): boolean;
-    disabled(disabled: $StateArgument<boolean>): this;
-    disabled(disabled?: $StateArgument<boolean>) { return $.fluent(this, arguments, () => this.dom.disabled, () => $.set(this.dom, 'disabled', disabled))}
-    
     type(): ButtonType;
     type(type: ButtonType): this;
     type(type?: ButtonType) { return $.fluent(this, arguments, () => this.dom.type as ButtonType, () => $.set(this.dom, 'type', type as any))}
-    
+}
-    checkValidity() { return this.dom.checkValidity() }
-    reportValidity() { return this.dom.reportValidity() }
 
-    formAction(): string;
+export interface $Button extends $HTMLElementAPIFilter<$Button, 'disabled' | 'checkValidity' | 'formAction' | 'formEnctype' | 'formMethod' | 'formNoValidate' | 'formTarget' | 'reportValidity'> {}
-    formAction(action: string | undefined): this;
+$Util.mixin($Button, $HTMLElementAPIs.create('disabled', 'checkValidity', 'formAction', 'formEnctype', 'formMethod', 'formNoValidate', 'formTarget', 'reportValidity'))
-    formAction(action?: string) { return $.fluent(this, arguments, () => this.dom.formAction, () => $.set(this.dom, 'formAction', action))}
-
-    formEnctype(): string;
-    formEnctype(enctype: string | undefined): this;
-    formEnctype(enctype?: string) { return $.fluent(this, arguments, () => this.dom.formEnctype, () => $.set(this.dom, 'formEnctype', enctype))}
-    
-    formMethod(): string;
-    formMethod(method: string | undefined): this;
-    formMethod(method?: string) { return $.fluent(this, arguments, () => this.dom.formMethod, () => $.set(this.dom, 'formMethod', method))}
-
-    formNoValidate(): boolean;
-    formNoValidate(boolean: boolean | undefined): this;
-    formNoValidate(boolean?: boolean) { return $.fluent(this, arguments, () => this.dom.formNoValidate, () => $.set(this.dom, 'formNoValidate', boolean))}
-
-    formTarget(): string;
-    formTarget(target: string | undefined): this;
-    formTarget(target?: string) { return $.fluent(this, arguments, () => this.dom.formTarget, () => $.set(this.dom, 'formTarget', target))}
-}

lib/node/$Form.ts

@@ -1,3 +1,5 @@
+import { $HTMLElementAPIFilter, $HTMLElementAPIs } from "../$ElementTemplate";
+import { $Util } from "../$Util";
 import { $Container, $ContainerOptions } from "./$Container";
 export interface $FormOptions extends $ContainerOptions {}
 export class $Form extends $Container<HTMLFormElement> {
@@ -5,10 +7,6 @@ export class $Form extends $Container<HTMLFormElement> {
         super('form', options);
     }
     
-    autocomplete(): AutoFill;
-    autocomplete(autocomplete: AutoFill | undefined): this;
-    autocomplete(autocomplete?: AutoFill) { return $.fluent(this, arguments, () => this.dom.autocomplete as AutoFill, () => $.set(this.dom, 'autocomplete', autocomplete as AutoFillBase))}
-    
     action(): string;
     action(action: string | undefined): this;
     action(action?: string) { return $.fluent(this, arguments, () => this.dom.formAction, () => $.set(this.dom, 'formAction', action))}
@@ -36,9 +34,10 @@ export class $Form extends $Container<HTMLFormElement> {
     requestSubmit() { this.dom.requestSubmit(); return this }
     reset(): this { this.dom.reset(); return this }
     submit() { this.dom.submit(); return this }
-    checkValidity() { return this.dom.checkValidity() }
-    reportValidity() { return this.dom.reportValidity() }
 
     get length() { return this.dom.length }
     get elements() { return Array.from(this.dom.elements).map(ele => $(ele)) }
-}
+}
+
+export interface $Form extends $HTMLElementAPIFilter<$Form, 'checkValidity' | 'reportValidity' | 'autocomplete'> {}
+$Util.mixin($Form, $HTMLElementAPIs.create('checkValidity', 'reportValidity', 'autocomplete'))

lib/node/$Input.ts

@@ -1,5 +1,7 @@
 import { $Element, $ElementOptions } from "./$Element";
 import { $State, $StateArgument } from "../$State";
+import { $HTMLElementAPIFilter, $HTMLElementAPIs } from "../$ElementTemplate";
+import { $Util } from "../$Util";
 
 export interface $InputOptions extends $ElementOptions {}
 export class $Input<T extends string | number = string> extends $Element<HTMLInputElement> {
@@ -40,10 +42,6 @@ export class $Input<T extends string | number = string> extends $Element<HTMLInp
     width(wdith: number): this;
     width(width?: number) { return $.fluent(this, arguments, () => this.dom.width, () => $.set(this.dom, 'width', width))}
     
-    autocomplete(): AutoFill;
-    autocomplete(autocomplete: AutoFill): this;
-    autocomplete(autocomplete?: AutoFill) { return $.fluent(this, arguments, () => this.dom.autocomplete, () => $.set(this.dom, 'autocomplete', autocomplete))}
-    
     defaultValue(): string;
     defaultValue(defaultValue: string): this;
     defaultValue(defaultValue?: string) { return $.fluent(this, arguments, () => this.dom.defaultValue, () => $.set(this.dom, 'defaultValue', defaultValue))}
@@ -52,10 +50,6 @@ export class $Input<T extends string | number = string> extends $Element<HTMLInp
     dirName(dirName: string): this;
     dirName(dirName?: string) { return $.fluent(this, arguments, () => this.dom.dirName, () => $.set(this.dom, 'dirName', dirName))}
     
-    disabled(): boolean;
-    disabled(disabled: boolean): this;
-    disabled(disabled?: boolean) { return $.fluent(this, arguments, () => this.dom.disabled, () => $.set(this.dom, 'disabled', disabled))}
-    
     pattern(): string;
     pattern(pattern: string): this;
     pattern(pattern?: string) { return $.fluent(this, arguments, () => this.dom.pattern, () => $.set(this.dom, 'pattern', pattern))}
@@ -68,10 +62,6 @@ export class $Input<T extends string | number = string> extends $Element<HTMLInp
     readOnly(readOnly: boolean): this;
     readOnly(readOnly?: boolean) { return $.fluent(this, arguments, () => this.dom.readOnly, () => $.set(this.dom, 'readOnly', readOnly))}
     
-    required(): boolean;
-    required(required: boolean): this;
-    required(required?: boolean) { return $.fluent(this, arguments, () => this.dom.required, () => $.set(this.dom, 'required', required))}
-    
     selectionDirection(): SelectionDirection | null;
     selectionDirection(selectionDirection: SelectionDirection | null): this;
     selectionDirection(selectionDirection?: SelectionDirection | null) { return $.fluent(this, arguments, () => this.dom.selectionDirection, () => $.set(this.dom, 'selectionDirection', selectionDirection))}
@@ -119,52 +109,15 @@ export class $Input<T extends string | number = string> extends $Element<HTMLInp
     }
     setSelectionRange(start: number | null, end: number | null, direction?: SelectionDirection) { this.dom.setSelectionRange(start, end, direction); return this }
     showPicker() { this.dom.showPicker(); return this }
-    
+
-    checkValidity() { return this.dom.checkValidity() }
-    reportValidity() { return this.dom.reportValidity() }
     get files() { return this.dom.files }
     get webkitEntries() { return this.dom.webkitEntries }
-    
-
-    formAction(): string;
-    formAction(action: string | undefined): this;
-    formAction(action?: string) { return $.fluent(this, arguments, () => this.dom.formAction, () => $.set(this.dom, 'formAction', action))}
-
-    formEnctype(): string;
-    formEnctype(enctype: string | undefined): this;
-    formEnctype(enctype?: string) { return $.fluent(this, arguments, () => this.dom.formEnctype, () => $.set(this.dom, 'formEnctype', enctype))}
-    
-    formMethod(): string;
-    formMethod(method: string | undefined): this;
-    formMethod(method?: string) { return $.fluent(this, arguments, () => this.dom.formMethod, () => $.set(this.dom, 'formMethod', method))}
-
-    formNoValidate(): boolean;
-    formNoValidate(boolean: boolean | undefined): this;
-    formNoValidate(boolean?: boolean) { return $.fluent(this, arguments, () => this.dom.formNoValidate, () => $.set(this.dom, 'formNoValidate', boolean))}
-
-    formTarget(): string;
-    formTarget(target: string | undefined): this;
-    formTarget(target?: string) { return $.fluent(this, arguments, () => this.dom.formTarget, () => $.set(this.dom, 'formTarget', target))}
-    
-    name(): string;
-    name(name?: $StateArgument<string> | undefined): this;
-    name(name?: $StateArgument<string> | undefined) { return $.fluent(this, arguments, () => this.dom.name, () => $.set(this.dom, 'name', name))}
-
-    maxLength(): number;
-    maxLength(maxLength: number): this;
-    maxLength(maxLength?: number) { return $.fluent(this, arguments, () => this.dom.maxLength, () => $.set(this.dom, 'maxLength', maxLength))}
-    
-    minLength(): number;
-    minLength(minLength: number): this;
-    minLength(minLength?: number) { return $.fluent(this, arguments, () => this.dom.minLength, () => $.set(this.dom, 'minLength', minLength))}
-
-    get form() { return this.dom.form ? $(this.dom.form) : null }
     get labels() { return Array.from(this.dom.labels ?? []).map(label => $(label)) }
-    get validationMessage() { return this.dom.validationMessage }
-    get validity() { return this.dom.validity }
-    get willValidate() { return this.dom.willValidate }
 }
 
+export interface $Input extends $HTMLElementAPIFilter<$Input, 'checkValidity' | 'reportValidity' | 'autocomplete' | 'name' | 'form' | 'required' | 'validationMessage' | 'validity' | 'willValidate' | 'formAction' | 'formEnctype' | 'formMethod' | 'formNoValidate' | 'formTarget'> {}
+$Util.mixin($Input, $HTMLElementAPIs.create('checkValidity', 'reportValidity', 'autocomplete', 'name', 'form', 'required', 'validationMessage', 'validity', 'willValidate', 'formAction', 'formEnctype', 'formMethod', 'formNoValidate', 'formTarget'))
+
 export class $NumberInput extends $Input<number> {
     constructor(options?: $InputOptions) {
         super(options)

lib/node/$Label.ts

@@ -1,4 +1,6 @@
+import { $HTMLElementAPIFilter, $HTMLElementAPIs } from "../$ElementTemplate";
 import { $StateArgument } from "../$State";
+import { $Util } from "../$Util";
 import { $Container, $ContainerOptions } from "./$Container";
 export interface $LabelOptions extends $ContainerOptions {}
 export class $Label extends $Container<HTMLLabelElement> {
@@ -10,6 +12,8 @@ export class $Label extends $Container<HTMLLabelElement> {
     for(name: $StateArgument<string>): this;
     for(name?: $StateArgument<string>) { return $.fluent(this, arguments, () => this.dom.htmlFor, () => { $.set(this.dom, 'htmlFor', name)}) }
 
-    get form() { return this.dom.form }
     get control() { return this.dom.control }
-}
+}
+
+export interface $Label extends $HTMLElementAPIFilter<$Label, 'form'> {}
+$Util.mixin($Label, $HTMLElementAPIs.create('form',))

lib/node/$OptGroup.ts

@@ -1,5 +1,7 @@
 import { $Container, $ContainerOptions } from "./$Container";
-import { $State, $StateArgument } from "../$State";
+import { $StateArgument } from "../$State";
+import { $HTMLElementAPIFilter, $HTMLElementAPIs } from "../$ElementTemplate";
+import { $Util } from "../$Util";
 
 export interface $OptGroupOptions extends $ContainerOptions {}
 export class $OptGroup extends $Container<HTMLOptGroupElement> {
@@ -10,8 +12,7 @@ export class $OptGroup extends $Container<HTMLOptGroupElement> {
     disabled(): boolean;
     disabled(disabled: $StateArgument<boolean> | undefined): this;
     disabled(disabled?: $StateArgument<boolean> | undefined) { return $.fluent(this, arguments, () => this.dom.disabled, () => $.set(this.dom, 'disabled', disabled))}
-    
+}
-    label(): string;
+
-    label(label: $StateArgument<string> | undefined): this;
+export interface $OptGroup extends $HTMLElementAPIFilter<$OptGroup, 'disabled' | 'label'> {}
-    label(label?: $StateArgument<string> | undefined) { return $.fluent(this, arguments, () => this.dom.label, () => $.set(this.dom, 'label', label))}
+$Util.mixin($OptGroup, $HTMLElementAPIs.create('disabled', 'label'))
-}

lib/node/$Option.ts

@@ -1,5 +1,7 @@
 import { $Container, $ContainerOptions } from "./$Container";
 import { $State, $StateArgument } from "../$State";
+import { $HTMLElementAPIFilter, $HTMLElementAPIs } from "../$ElementTemplate";
+import { $Util } from "../$Util";
 
 export interface $OptionOptions extends $ContainerOptions {}
 export class $Option extends $Container<HTMLOptionElement> {
@@ -11,14 +13,6 @@ export class $Option extends $Container<HTMLOptionElement> {
     defaultSelected(defaultSelected: $StateArgument<boolean> | undefined): this;
     defaultSelected(defaultSelected?: $StateArgument<boolean> | undefined) { return $.fluent(this, arguments, () => this.dom.defaultSelected, () => $.set(this.dom, 'defaultSelected', defaultSelected))}
     
-    disabled(): boolean;
-    disabled(disabled: $StateArgument<boolean> | undefined): this;
-    disabled(disabled?: $StateArgument<boolean> | undefined) { return $.fluent(this, arguments, () => this.dom.disabled, () => $.set(this.dom, 'disabled', disabled))}
-    
-    label(): string;
-    label(label: $StateArgument<string> | undefined): this;
-    label(label?: $StateArgument<string> | undefined) { return $.fluent(this, arguments, () => this.dom.label, () => $.set(this.dom, 'label', label))}
-    
     selected(): boolean;
     selected(selected: $StateArgument<boolean> | undefined): this;
     selected(selected?: $StateArgument<boolean> | undefined) { return $.fluent(this, arguments, () => this.dom.selected, () => $.set(this.dom, 'selected', selected))}
@@ -34,4 +28,7 @@ export class $Option extends $Container<HTMLOptionElement> {
     get form() { return this.dom.form ? $(this.dom.form) : null }
     get index() { return this.dom.index }
 
-}
+}
+
+export interface $Option extends $HTMLElementAPIFilter<$Option, 'form' | 'disabled' | 'label'> {}
+$Util.mixin($Option, $HTMLElementAPIs.create('form', 'disabled', 'label'))

lib/node/$Select.ts

@@ -1,7 +1,9 @@
 import { $Container, $ContainerOptions } from "./$Container";
 import { $OptGroup } from "./$OptGroup";
 import { $Option } from "./$Option";
-import { $State, $StateArgument } from "../$State";
+import { $StateArgument } from "../$State";
+import { $HTMLElementAPIFilter, $HTMLElementAPIs } from "../$ElementTemplate";
+import { $Util } from "../$Util";
 
 export interface $SelectOptions extends $ContainerOptions {}
 export class $Select extends $Container<HTMLSelectElement> {
@@ -17,41 +19,24 @@ export class $Select extends $Container<HTMLSelectElement> {
     item(index: number) { return $(this.dom.item(index)) }
     namedItem(name: string) { return $(this.dom.namedItem(name)) }
     
-    disabled(): boolean;
-    disabled(disabled: $StateArgument<boolean> | undefined): this;
-    disabled(disabled?: $StateArgument<boolean> | undefined) { return $.fluent(this, arguments, () => this.dom.disabled, () => $.set(this.dom, 'disabled', disabled))}
-    
     multiple(): boolean;
     multiple(multiple: $StateArgument<boolean> | undefined): this;
     multiple(multiple?: $StateArgument<boolean> | undefined) { return $.fluent(this, arguments, () => this.dom.multiple, () => $.set(this.dom, 'multiple', multiple))}
 
-    required(): boolean;
-    required(required: boolean): this;
-    required(required?: boolean) { return $.fluent(this, arguments, () => this.dom.required, () => $.set(this.dom, 'required', required))}
-    
-    autocomplete(): AutoFill;
-    autocomplete(autocomplete: AutoFill): this;
-    autocomplete(autocomplete?: AutoFill) { return $.fluent(this, arguments, () => this.dom.autocomplete, () => $.set(this.dom, 'autocomplete', autocomplete))}
-
     get length() { return this.dom.length }
     get size() { return this.dom.size }
     get options() { return Array.from(this.dom.options).map($option => $($option)) }
     get selectedIndex() { return this.dom.selectedIndex }
     get selectedOptions() { return Array.from(this.dom.selectedOptions).map($option => $($option)) }
     
-    name(): string;
-    name(name?: $StateArgument<string> | undefined): this;
-    name(name?: $StateArgument<string> | undefined) { return $.fluent(this, arguments, () => this.dom.name, () => $.set(this.dom, 'name', name))}
-    
     value(): string;
     value(value?: $StateArgument<string> | undefined): this;
     value(value?: $StateArgument<string> | undefined) { return $.fluent(this, arguments, () => this.dom.value, () => $.set(this.dom, 'value', value))}
 
-    get form() { return this.dom.form ? $(this.dom.form) : null }
     get labels() { return Array.from(this.dom.labels ?? []).map(label => $(label)) }
-    get validationMessage() { return this.dom.validationMessage }
-    get validity() { return this.dom.validity }
-    get willValidate() { return this.dom.willValidate }
 }
 
+export interface $Select extends $HTMLElementAPIFilter<$Select, 'checkValidity' | 'reportValidity' | 'autocomplete' | 'name' | 'form' | 'required' | 'disabled' | 'validationMessage' | 'validity' | 'willValidate'> {}
+$Util.mixin($Select, $HTMLElementAPIs.create('checkValidity', 'reportValidity', 'autocomplete', 'name', 'form', 'required', 'disabled', 'validationMessage', 'validity', 'willValidate'))
+
 export type $SelectContentType = $Option | $OptGroup | undefined;

lib/node/$Textarea.ts

@@ -1,5 +1,7 @@
 import { $Container, $ContainerOptions } from "./$Container";
 import { $StateArgument } from "../$State";
+import { $HTMLElementAPIFilter, $HTMLElementAPIs } from "../$ElementTemplate";
+import { $Util } from "../$Util";
 
 export interface $TextareaOptions extends $ContainerOptions {}
 export class $Textarea extends $Container<HTMLTextAreaElement> {
@@ -11,10 +13,6 @@ export class $Textarea extends $Container<HTMLTextAreaElement> {
     cols(cols: number): this;
     cols(cols?: number) { return $.fluent(this, arguments, () => this.dom.cols, () => $.set(this.dom, 'cols', cols))}
     
-    name(): string;
-    name(name?: $StateArgument<string> | undefined): this;
-    name(name?: $StateArgument<string> | undefined) { return $.fluent(this, arguments, () => this.dom.name, () => $.set(this.dom, 'name', name))}
-    
     wrap(): string;
     wrap(wrap?: $StateArgument<string> | undefined): this;
     wrap(wrap?: $StateArgument<string> | undefined) { return $.fluent(this, arguments, () => this.dom.wrap, () => $.set(this.dom, 'wrap', wrap))}
@@ -23,18 +21,6 @@ export class $Textarea extends $Container<HTMLTextAreaElement> {
     value(value?: $StateArgument<string> | undefined): this;
     value(value?: $StateArgument<string> | undefined) { return $.fluent(this, arguments, () => this.dom.value, () => $.set(this.dom, 'value', value))}
     
-    maxLength(): number;
-    maxLength(maxLength: number): this;
-    maxLength(maxLength?: number) { return $.fluent(this, arguments, () => this.dom.maxLength, () => $.set(this.dom, 'maxLength', maxLength))}
-    
-    minLength(): number;
-    minLength(minLength: number): this;
-    minLength(minLength?: number) { return $.fluent(this, arguments, () => this.dom.minLength, () => $.set(this.dom, 'minLength', minLength))}
-    
-    autocomplete(): AutoFill;
-    autocomplete(autocomplete: AutoFill): this;
-    autocomplete(autocomplete?: AutoFill) { return $.fluent(this, arguments, () => this.dom.autocomplete, () => $.set(this.dom, 'autocomplete', autocomplete))}
-    
     defaultValue(): string;
     defaultValue(defaultValue: string): this;
     defaultValue(defaultValue?: string) { return $.fluent(this, arguments, () => this.dom.defaultValue, () => $.set(this.dom, 'defaultValue', defaultValue))}
@@ -43,10 +29,6 @@ export class $Textarea extends $Container<HTMLTextAreaElement> {
     dirName(dirName: string): this;
     dirName(dirName?: string) { return $.fluent(this, arguments, () => this.dom.dirName, () => $.set(this.dom, 'dirName', dirName))}
     
-    disabled(): boolean;
-    disabled(disabled: boolean): this;
-    disabled(disabled?: boolean) { return $.fluent(this, arguments, () => this.dom.disabled, () => $.set(this.dom, 'disabled', disabled))}
-    
     placeholder(): string;
     placeholder(placeholder?: string): this;
     placeholder(placeholder?: string) { return $.fluent(this, arguments, () => this.dom.placeholder, () => $.set(this.dom, 'placeholder', placeholder))}
@@ -55,10 +37,6 @@ export class $Textarea extends $Container<HTMLTextAreaElement> {
     readOnly(readOnly: boolean): this;
     readOnly(readOnly?: boolean) { return $.fluent(this, arguments, () => this.dom.readOnly, () => $.set(this.dom, 'readOnly', readOnly))}
     
-    required(): boolean;
-    required(required: boolean): this;
-    required(required?: boolean) { return $.fluent(this, arguments, () => this.dom.required, () => $.set(this.dom, 'required', required))}
-    
     selectionDirection(): SelectionDirection;
     selectionDirection(selectionDirection: SelectionDirection): this;
     selectionDirection(selectionDirection?: SelectionDirection) { return $.fluent(this, arguments, () => this.dom.selectionDirection, () => $.set(this.dom, 'selectionDirection', selectionDirection))}
@@ -89,12 +67,9 @@ export class $Textarea extends $Container<HTMLTextAreaElement> {
         return this 
     }
     setSelectionRange(start: number | null, end: number | null, direction?: SelectionDirection) { this.dom.setSelectionRange(start, end, direction); return this }
-    
-    checkValidity() { return this.dom.checkValidity() }
-    reportValidity() { return this.dom.reportValidity() }
 
-    get validationMessage() { return this.dom.validationMessage }
-    get validity() { return this.dom.validity }
-    get form() { return this.dom.form ? $(this.dom.form) : null }
     get labels() { return Array.from(this.dom.labels ?? []).map(label => $(label)) }
-}
+}
+
+export interface $Textarea extends $HTMLElementAPIFilter<$Textarea, 'checkValidity' | 'reportValidity' | 'autocomplete' | 'name' | 'form' | 'required' | 'disabled' | 'minLength' | 'maxLength' | 'validationMessage' | 'validity' | 'willValidate'> {}
+$Util.mixin($Textarea, $HTMLElementAPIs.create('checkValidity', 'reportValidity', 'autocomplete', 'name', 'form', 'required', 'disabled', 'minLength', 'maxLength', 'validationMessage', 'validity', 'willValidate'))

package.json

@@ -1,7 +1,7 @@
 {
   "name": "elexis",
   "description": "Build Web in Native JavaScript Syntax",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "author": {
     "name": "defaultkavy",
     "email": "defaultkavy@gmail.com",