From 7f8f599b8a69eabfa0d3a430f53318fccdc490cc Mon Sep 17 00:00:00 2001 From: defaultkavy Date: Wed, 15 May 2024 18:38:45 +0800 Subject: [PATCH] v0.2.2 new: $HTMLElementAPIs optimize: collect utilty method of HTMLElement and merge into different $Element --- $index.ts | 6 +-- lib/$ElementTemplate.ts | 94 +++++++++++++++++++++++++++++++++++++++++ lib/node/$Button.ts | 33 +++------------ lib/node/$Form.ts | 13 +++--- lib/node/$Input.ts | 59 +++----------------------- lib/node/$Label.ts | 8 +++- lib/node/$OptGroup.ts | 13 +++--- lib/node/$Option.ts | 15 +++---- lib/node/$Select.ts | 27 +++--------- lib/node/$Textarea.ts | 37 +++------------- package.json | 2 +- 11 files changed, 146 insertions(+), 161 deletions(-) create mode 100644 lib/$ElementTemplate.ts diff --git a/$index.ts b/$index.ts index 84f0ea6..65de40c 100644 --- a/$index.ts +++ b/$index.ts @@ -122,7 +122,7 @@ export namespace $ { * @param action The action to execute when arguments length not equal 0. * @returns */ - export function fluent(instance: T, args: IArguments, value: () => V, action: (...args: any[]) => void) { + export function fluent(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 methodKey Variant key name when apply value on $State.set() + * @param value Value of target property or parameter of method (Using Tuple to apply parameter). + * @param handle callback when param `value` is $State object. * @returns */ export function set( diff --git a/lib/$ElementTemplate.ts b/lib/$ElementTemplate.ts new file mode 100644 index 0000000..ec99e1a --- /dev/null +++ b/lib/$ElementTemplate.ts @@ -0,0 +1,94 @@ +import { $StateArgument } from "./$State"; +import { $Form } from "./node/$Form"; +export abstract class $HTMLElementAPIs { + + 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): This; + //@ts-ignore + disabled(disabled?: $StateArgument) { 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 | undefined): This; + //@ts-ignore + name(name?: $StateArgument | 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 | undefined): This; + //@ts-ignore + label(label?: $StateArgument | 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 = Pick<$HTMLElementAPIs, M> \ No newline at end of file diff --git a/lib/node/$Button.ts b/lib/node/$Button.ts index 8accab0..1eca85a 100644 --- a/lib/node/$Button.ts +++ b/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 { constructor(options?: $ButtonOptions) { super('button', options); } - disabled(): boolean; - disabled(disabled: $StateArgument): this; - disabled(disabled?: $StateArgument) { 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; - 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))} -} \ No newline at end of file +export interface $Button extends $HTMLElementAPIFilter<$Button, 'disabled' | 'checkValidity' | 'formAction' | 'formEnctype' | 'formMethod' | 'formNoValidate' | 'formTarget' | 'reportValidity'> {} +$Util.mixin($Button, $HTMLElementAPIs.create('disabled', 'checkValidity', 'formAction', 'formEnctype', 'formMethod', 'formNoValidate', 'formTarget', 'reportValidity')) \ No newline at end of file diff --git a/lib/node/$Form.ts b/lib/node/$Form.ts index 208b8db..87caf48 100644 --- a/lib/node/$Form.ts +++ b/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 { @@ -5,10 +7,6 @@ export class $Form extends $Container { 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 { 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)) } -} \ No newline at end of file +} + +export interface $Form extends $HTMLElementAPIFilter<$Form, 'checkValidity' | 'reportValidity' | 'autocomplete'> {} +$Util.mixin($Form, $HTMLElementAPIs.create('checkValidity', 'reportValidity', 'autocomplete')) \ No newline at end of file diff --git a/lib/node/$Input.ts b/lib/node/$Input.ts index 7cbb288..ae11610 100644 --- a/lib/node/$Input.ts +++ b/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 extends $Element { @@ -40,10 +42,6 @@ export class $Input extends $Element 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 extends $Element 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 extends $Element 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 extends $Element 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 | undefined): this; - name(name?: $StateArgument | 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 { constructor(options?: $InputOptions) { super(options) diff --git a/lib/node/$Label.ts b/lib/node/$Label.ts index 976d80b..b3e7966 100644 --- a/lib/node/$Label.ts +++ b/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 { @@ -10,6 +12,8 @@ export class $Label extends $Container { for(name: $StateArgument): this; for(name?: $StateArgument) { return $.fluent(this, arguments, () => this.dom.htmlFor, () => { $.set(this.dom, 'htmlFor', name)}) } - get form() { return this.dom.form } get control() { return this.dom.control } -} \ No newline at end of file +} + +export interface $Label extends $HTMLElementAPIFilter<$Label, 'form'> {} +$Util.mixin($Label, $HTMLElementAPIs.create('form',)) \ No newline at end of file diff --git a/lib/node/$OptGroup.ts b/lib/node/$OptGroup.ts index a99034a..0cd41c5 100644 --- a/lib/node/$OptGroup.ts +++ b/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 { @@ -10,8 +12,7 @@ export class $OptGroup extends $Container { disabled(): boolean; disabled(disabled: $StateArgument | undefined): this; disabled(disabled?: $StateArgument | undefined) { return $.fluent(this, arguments, () => this.dom.disabled, () => $.set(this.dom, 'disabled', disabled))} - - label(): string; - label(label: $StateArgument | undefined): this; - label(label?: $StateArgument | undefined) { return $.fluent(this, arguments, () => this.dom.label, () => $.set(this.dom, 'label', label))} -} \ No newline at end of file +} + +export interface $OptGroup extends $HTMLElementAPIFilter<$OptGroup, 'disabled' | 'label'> {} +$Util.mixin($OptGroup, $HTMLElementAPIs.create('disabled', 'label')) \ No newline at end of file diff --git a/lib/node/$Option.ts b/lib/node/$Option.ts index eabf21b..5ed0645 100644 --- a/lib/node/$Option.ts +++ b/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 { @@ -11,14 +13,6 @@ export class $Option extends $Container { defaultSelected(defaultSelected: $StateArgument | undefined): this; defaultSelected(defaultSelected?: $StateArgument | undefined) { return $.fluent(this, arguments, () => this.dom.defaultSelected, () => $.set(this.dom, 'defaultSelected', defaultSelected))} - disabled(): boolean; - disabled(disabled: $StateArgument | undefined): this; - disabled(disabled?: $StateArgument | undefined) { return $.fluent(this, arguments, () => this.dom.disabled, () => $.set(this.dom, 'disabled', disabled))} - - label(): string; - label(label: $StateArgument | undefined): this; - label(label?: $StateArgument | undefined) { return $.fluent(this, arguments, () => this.dom.label, () => $.set(this.dom, 'label', label))} - selected(): boolean; selected(selected: $StateArgument | undefined): this; selected(selected?: $StateArgument | undefined) { return $.fluent(this, arguments, () => this.dom.selected, () => $.set(this.dom, 'selected', selected))} @@ -34,4 +28,7 @@ export class $Option extends $Container { get form() { return this.dom.form ? $(this.dom.form) : null } get index() { return this.dom.index } -} \ No newline at end of file +} + +export interface $Option extends $HTMLElementAPIFilter<$Option, 'form' | 'disabled' | 'label'> {} +$Util.mixin($Option, $HTMLElementAPIs.create('form', 'disabled', 'label')) \ No newline at end of file diff --git a/lib/node/$Select.ts b/lib/node/$Select.ts index b72dbac..0d2b442 100644 --- a/lib/node/$Select.ts +++ b/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 { @@ -17,41 +19,24 @@ export class $Select extends $Container { item(index: number) { return $(this.dom.item(index)) } namedItem(name: string) { return $(this.dom.namedItem(name)) } - disabled(): boolean; - disabled(disabled: $StateArgument | undefined): this; - disabled(disabled?: $StateArgument | undefined) { return $.fluent(this, arguments, () => this.dom.disabled, () => $.set(this.dom, 'disabled', disabled))} - multiple(): boolean; multiple(multiple: $StateArgument | undefined): this; multiple(multiple?: $StateArgument | 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 | undefined): this; - name(name?: $StateArgument | undefined) { return $.fluent(this, arguments, () => this.dom.name, () => $.set(this.dom, 'name', name))} - value(): string; value(value?: $StateArgument | undefined): this; value(value?: $StateArgument | 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; \ No newline at end of file diff --git a/lib/node/$Textarea.ts b/lib/node/$Textarea.ts index a195dce..1605709 100644 --- a/lib/node/$Textarea.ts +++ b/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 { @@ -11,10 +13,6 @@ export class $Textarea extends $Container { cols(cols: number): this; cols(cols?: number) { return $.fluent(this, arguments, () => this.dom.cols, () => $.set(this.dom, 'cols', cols))} - name(): string; - name(name?: $StateArgument | undefined): this; - name(name?: $StateArgument | undefined) { return $.fluent(this, arguments, () => this.dom.name, () => $.set(this.dom, 'name', name))} - wrap(): string; wrap(wrap?: $StateArgument | undefined): this; wrap(wrap?: $StateArgument | undefined) { return $.fluent(this, arguments, () => this.dom.wrap, () => $.set(this.dom, 'wrap', wrap))} @@ -23,18 +21,6 @@ export class $Textarea extends $Container { value(value?: $StateArgument | undefined): this; value(value?: $StateArgument | 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 { 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 { 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 { 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)) } -} \ No newline at end of file +} + +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')) \ No newline at end of file diff --git a/package.json b/package.json index 68f278a..1f11418 100644 --- a/package.json +++ b/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",