defaultkavy
a57246e6e1
update: $Async.await() allow $ContainerContentType object. update: $Container.insert() and .content() can handler Promise object and Async function. update: $Select.value() will sync value with $State.value when update. update: Array.prototype.detype will exclude `undefined` and `void` automatically. new: $.events function, create EventManager in faster way. fork: move $View to extensions repository new: $.call function, just a simple function caller.
48 lines
2.5 KiB
TypeScript
48 lines
2.5 KiB
TypeScript
import { $Container, $ContainerOptions } from "./$Container";
|
|
import { $OptGroup } from "./$OptGroup";
|
|
import { $Option } from "./$Option";
|
|
import { $State, $StateArgument } from "../$State";
|
|
import { $HTMLElementAPIFilter, $HTMLElementAPIs } from "../$ElementTemplate";
|
|
import { $Util } from "../$Util";
|
|
|
|
export interface $SelectOptions extends $ContainerOptions {}
|
|
export class $Select extends $Container<HTMLSelectElement> {
|
|
constructor(options?: $SelectOptions) {
|
|
super('select')
|
|
}
|
|
|
|
add(option: $SelectContentType | OrMatrix<$SelectContentType>) {
|
|
this.insert(option);
|
|
return this;
|
|
}
|
|
|
|
item(index: number) { return $(this.dom.item(index)) }
|
|
namedItem(name: string) { return $(this.dom.namedItem(name)) }
|
|
|
|
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))}
|
|
|
|
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)) }
|
|
|
|
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 as $State<string> | string, (value$) => {
|
|
this.on('input', () => {
|
|
if (value$.attributes.has(this.dom) === false) return;
|
|
if (typeof value$.value === 'string') (value$ as $State<string>).set(`${this.value()}`)
|
|
if (typeof value$.value === 'number') (value$ as unknown as $State<number>).set(Number(this.value()))
|
|
})
|
|
}))}
|
|
|
|
get labels() { return Array.from(this.dom.labels ?? []).map(label => $(label)) }
|
|
}
|
|
|
|
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; |