@gzmjs/form 0.1.0

package/dist/040-input/00-common.d.ts

@@ -0,0 +1,18 @@
+export declare const inputAutoComplete: readonly ["", "on", "off"];
+export type InputAutoComplete = typeof inputAutoComplete[number];
+export declare function getInputIdForLabel($ipt: HTMLElement): string;
+/**
+ * 主要对绑定多个字段的情况进行处理：
+ *  假设绑定了 2 个字段，且没有选中项，这时 dataValue = [null, null]，这时应该返回 ''。
+ *  但是 toString() 之后是 ','，所以下面用了一个正则表达式判断 ret 中是否全是逗号。
+ *
+ * 测试：042-check-list-test.html 中最后一个 check-list 可以测试这种情况。
+ * @returns 将作为 this.$.ipt.value 的值。
+ */
+export declare function getHiddenValueFromDataValue(dv: unknown): string;
+export declare function removeZWC(s: string): string;
+export declare function toDateStr(d: Date): string;
+export declare function toMonthStr(d: Date): string;
+export declare function toWeekStr(d: Date): string;
+export declare function toTimeStr(d: Date): string;
+export declare const iptStyle: CSSStyleSheet;

package/dist/040-input/01-input.d.ts

@@ -0,0 +1,122 @@
+import { ViewModel, ViewElement, ObjValue, ObjMember, ModelEventSubscriber, ListSource, handleModelEvent, ModelEvent } from '@gzmjs/mvvm';
+export declare class InputDataSource<T extends object> {
+    constructor(o: T, vm: ObjMember | string | string[]);
+    readonly data: T;
+    readonly valueMember: ObjMember;
+    getValue(): ObjValue;
+    setValue(v: unknown): void;
+    onDataEvent(listener: ModelEventSubscriber): boolean;
+    offDataEvent(listener: ModelEventSubscriber): boolean;
+}
+export declare const textAlign: readonly ["start", "end", "center"];
+export type LabelTextAlign = typeof textAlign[number];
+export interface InputOptions<V, E extends InputBase<V, InputOptions<V, E>>> extends ViewModel<E> {
+    name: string;
+    dataSource?: InputDataSource<object>;
+    listSource?: ListSource<object>;
+    /**
+     * 验证属性，required 表示必须有值，所有组件（除了 input-check）都支持。
+     */
+    required?: boolean;
+    /**
+     * 无效值的组件，默认显示红色的框，但并不显示具体的错误信息。
+     * 如果设置为 true，则会在组件下方显示具体的错误信息。
+     */
+    showValidityMessage?: boolean;
+    /**
+     * 虽然只是 input-label 使用的属性，但是在 form 中每一个 input 都可以和 label 互相转换。
+     * 所以作为基础属性。
+     */
+    textAlign?: LabelTextAlign;
+    /**
+     * 涉及到 $ipt 的值改变或者验证条件改变时，都会调用此函数。
+     * 一般而言只有需要调用 setCustomValidity() 的组件才需要实现此函数。
+     * @param $ipt
+     * @returns
+     */
+    checkValidity?: ($ipt: HTMLInputElement | HTMLTextAreaElement) => void | Promise<void>;
+    /**
+     * 组件 dataValue 改变时调用此函数。
+     * @param newValue
+     * @param oldValue
+     * @returns
+     */
+    dataValueChanged?: (newValue: unknown, oldValue: unknown) => void;
+}
+export declare const inputCopyAttributes: {
+    name: string;
+    required: string;
+};
+export declare abstract class InputBase<V, T extends InputOptions<V, InputBase<V, T>>> extends ViewElement<T> {
+    #private;
+    constructor();
+    readonly ei: ElementInternals;
+    readonly $ipt: HTMLInputElement | HTMLTextAreaElement;
+    protected abstract _createInput(): HTMLInputElement | HTMLTextAreaElement;
+    protected abstract _showValue(): void;
+    get dataValue(): V | undefined;
+    set dataValue(val: V | undefined);
+    /**
+     * 在处理与 listSource 相关的操作时需要用到！
+     */
+    protected get dsValue(): ObjValue;
+    /**
+     * 对于定义了 dataType 属性的组件，需要将 #dv 转换为 dataType 指定的类型
+     */
+    protected _checkValueType(dv: V | undefined): V | undefined;
+    protected _changeValue2Type(v: V | undefined, t: unknown): V | undefined;
+    protected _writeDataSource(): void;
+    /**
+     * form 的值与 #dv 同步
+     * @param dv
+     * @returns
+     */
+    protected _setFormValue(): void;
+    /**
+     * $ipt 的值与 #dv 同步。这主要针对 $ipt.hidden = true 的组件，如 CheckList, SearchList。
+     * 这些组件的 $ipt 只是用来满足表单验证需求的，并不直接显示数据。而且也只能满足 required 验证需求。
+     * 所以这里设置 $ipt 的值不必太复杂。
+     */
+    protected _setIptValue($ipt?: HTMLInputElement | HTMLTextAreaElement): void;
+    get dataSource(): InputDataSource<object> | undefined;
+    set dataSource(ds: InputDataSource<object> | undefined);
+    _getValueFromDataSource(): void;
+    [handleModelEvent](source: unknown, evt: ModelEvent): boolean;
+    get listSource(): ListSource<object> | undefined;
+    set listSource(ls: ListSource<object> | undefined);
+    protected _setActiveItem(...activeItems: object[]): void;
+    /**
+     * 对于有 list 属性的组件，需要生成一个 <datalist>
+     * <datalist> 的弹出由浏览器自己控制，所以需要有一个 bind 的过程。
+     * 对于 input-combo，list 弹出由代码控制，所以就无需重写 _bindList()。
+     */
+    protected _bindList($ipt?: HTMLInputElement | HTMLTextAreaElement): void;
+    protected _createListItems($dl: Element, ls: string[]): void;
+    focus(): void;
+    /**
+     * 因为这个函数完全是基于 $ipt 的 validity 来设置 ei 的 validity，
+     * 所以当 $ipt 的值变化时，必须调用此函数以确保 ei 的 validity 正确。
+     * 1 - _showValue() 中调用此函数，以确保 ei 的 validity 正确。
+     * 2 - 验证属性变化时（如 required, max, min 等），也需要调用此函数。
+     * 3 - 在 oninput onchange 事件中也需要调用此函数。
+     */
+    protected _setValidity($ipt?: HTMLInputElement | HTMLTextAreaElement): Promise<void>;
+    protected _required_set(): void;
+    protected _pattern_set(): void;
+    protected _min_set(): void;
+    protected _max_set(): void;
+    protected _minLength_set(): void;
+    protected _maxLength_set(): void;
+    protected _step_set(): void;
+    protected _type_set(): void;
+    protected _show_validity_message(): void;
+    setCustomError(error: string): void;
+    /**
+     * 通过 setCustomError() 设置的错误，只能通过此函数才能去掉！
+     * @returns
+     */
+    clearCustomError(): void;
+    accessor name: string | undefined;
+    accessor required: boolean;
+    accessor showValidityMessage: boolean;
+}

package/dist/040-input/03-label.d.ts

@@ -0,0 +1,38 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { InputBase, InputOptions, LabelTextAlign } from './01-input';
+export declare const tagName = "GZM-INPUT-LABEL";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: InputLabel;
+    }
+}
+export interface InputLabelOptions extends InputOptions<unknown, InputLabel> {
+    tagName?: typeof tagName;
+    trueText?: string;
+    falseText?: string;
+    /**
+     * 当 listSource.multiple = true 时，显示选中多项用此符号隔开。
+     */
+    multipleDelimiter?: string;
+}
+declare const mutableAttributes: readonly ["name", "text-align", "true-text", "false-text"];
+declare const copyAttributes: {
+    name: string;
+};
+export declare class InputLabel extends InputBase<unknown, InputLabelOptions> implements AttributeHandlers<Exclude<typeof mutableAttributes[number], keyof typeof copyAttributes>> {
+    static formAssociated: boolean;
+    /**
+     * 不开启 shadowRoot，因为其本质上是在 innerHTML 中显示内容
+     * 本来打算在这里放一个 <output> 元素，但阅读了文档后又觉得没有必要：https://devdocs.io/html/element/output。
+     */
+    _createInput(): HTMLInputElement;
+    _showValue(): void;
+    accessor textAlign: LabelTextAlign;
+    _text_align_set(nv: string | null): void;
+    accessor trueText: string | undefined;
+    _true_text_set(): void;
+    accessor falseText: string | undefined;
+    _false_text_set(): void;
+    accessor multipleDelimiter: string;
+}
+export {};

package/dist/040-input/06-text.d.ts

@@ -0,0 +1,57 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { InputBase, InputOptions } from './01-input';
+import { InputAutoComplete } from './00-common';
+export declare const tagName = "GZM-INPUT-TEXT";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: TextInput;
+    }
+}
+declare const textType: readonly ["text", "password", "email", "tel", "url", "search"];
+type InputTextType = typeof textType[number];
+export interface InputTextOptions extends InputOptions<string, TextInput> {
+    tagName?: typeof tagName;
+    type?: InputTextType;
+    autocomplete?: InputAutoComplete;
+    maxlength?: string;
+    minlength?: string;
+    /**
+     * email,url 有默认的 pattern，无需代码处理。
+     */
+    pattern?: string;
+    placeholder?: string;
+    /**
+     * HTMLElement 本身有此属性，所以只需要定义 mutableAttributes 和 copyAttributes，保证能够复制到 $ipt。
+     */
+    spellcheck?: boolean;
+    list?: string[];
+}
+declare const mutableAttributes: readonly ["name", "spellcheck", "type", "autocomplete", "maxlength", "minlength", "pattern", "placeholder", "required", "list"];
+declare const copyAttributes: {
+    type: string;
+    autocomplete: string;
+    maxlength: string;
+    minlength: string;
+    pattern: string;
+    placeholder: string;
+    spellcheck: string;
+} & {
+    name: string;
+    required: string;
+};
+export declare class TextInput extends InputBase<string, InputTextOptions> implements AttributeHandlers<Exclude<typeof mutableAttributes[number], keyof typeof copyAttributes>> {
+    static formAssociated: boolean;
+    _createInput(): HTMLInputElement;
+    readonly shadowRoot: ShadowRoot;
+    $ipt: HTMLInputElement;
+    protected _showValue($ipt?: HTMLInputElement): void;
+    accessor type: InputTextType;
+    accessor autoComplete: InputAutoComplete;
+    accessor maxlength: string | undefined;
+    accessor minlength: string | undefined;
+    accessor pattern: string | undefined;
+    accessor placeholder: string | undefined;
+    accessor list: string[] | undefined;
+    _list_set(): void;
+}
+export {};

package/dist/040-input/09-cal.d.ts

@@ -0,0 +1,65 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { InputBase, InputOptions } from './01-input';
+import { InputAutoComplete } from './00-common';
+export declare const tagName = "GZM-INPUT-CAL";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: CalInput;
+    }
+}
+declare const calType: readonly ["date", "time", "datetime-local", "month", "week"];
+type InputCalType = typeof calType[number];
+/**
+ * 根据 /try/html/input-date.html 的测试，并不是每一种 calType 支持 valueAsDate 和 valueAsNumber。
+ * 而且不同浏览器的情况还不一样！不过对于 value 的支持是肯定的，所以一定要以 value 即字符串值作为基础。
+ */
+declare const calDataType: readonly ["string", "date", "number"];
+type InputCalDataType = typeof calDataType[number];
+type CalDataType = string | number | Date;
+export interface InputCalOptions extends InputOptions<CalDataType, CalInput> {
+    tagName?: typeof tagName;
+    type?: InputCalType;
+    dataType?: InputCalDataType;
+    autocomplete?: InputAutoComplete;
+    max?: string;
+    min?: string;
+    step?: string;
+    list?: string[];
+}
+declare const mutableAttributes: readonly ["name", "type", "autocomplete", "max", "min", "step", "required", "list"];
+declare const copyAttributes: {
+    type: string;
+    autocomplete: string;
+    max: string;
+    min: string;
+    step: string;
+} & {
+    name: string;
+    required: string;
+};
+export declare class CalInput extends InputBase<CalDataType, InputCalOptions> implements AttributeHandlers<Exclude<typeof mutableAttributes[number], keyof typeof copyAttributes>> {
+    #private;
+    static formAssociated: boolean;
+    _createInput(): HTMLInputElement;
+    readonly shadowRoot: ShadowRoot;
+    $ipt: HTMLInputElement;
+    /**
+     * number -> Date -> string
+     * 为了提高可用性，这里没有判断 dataType，而是根据实际的数据类型来处理。
+     */
+    protected _showValue($ipt?: HTMLInputElement): void;
+    /**
+     * 对于这个 input 而言，值就是一个字符串。当 t === string，无需进行任何转换。
+     * 所以只需要处理 date 或者 number, string -> Date -> number。
+     */
+    _changeValue2Type(v: unknown, t: InputCalDataType): CalDataType | undefined;
+    accessor type: InputCalType;
+    accessor dataType: InputCalDataType;
+    accessor autocomplete: InputAutoComplete;
+    accessor max: string | undefined;
+    accessor min: string | undefined;
+    accessor Step: string | undefined;
+    accessor list: string[] | undefined;
+    _list_set(): void;
+}
+export {};

package/dist/040-input/12-check.d.ts

@@ -0,0 +1,33 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { InputBase, InputOptions } from './01-input';
+export declare const tagName = "GZM-INPUT-CHECK";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: CheckInput;
+    }
+}
+declare const checkDataType: readonly ["boolean", "string", "number"];
+type InputCheckDataType = typeof checkDataType[number];
+type CheckDataType = boolean | string | number;
+export interface InputCheckOptions extends InputOptions<CheckDataType, CheckInput> {
+    tagName?: typeof tagName;
+    dataType?: InputCheckDataType;
+    trueText?: string;
+    falseText?: string;
+}
+declare const mutableAttributes: readonly ["name"];
+declare const copyAttributes: {
+    name: string;
+};
+export declare class CheckInput extends InputBase<CheckDataType, InputCheckOptions> implements AttributeHandlers<Exclude<typeof mutableAttributes[number], keyof typeof copyAttributes>> {
+    static formAssociated: boolean;
+    _createInput(): HTMLInputElement;
+    readonly shadowRoot: ShadowRoot;
+    $ipt: HTMLInputElement;
+    protected _showValue($ipt?: HTMLInputElement): void;
+    _changeValue2Type(v: unknown, t: InputCheckDataType): CheckDataType | undefined;
+    accessor dataType: InputCheckDataType;
+    accessor trueText: string | undefined;
+    accessor falseText: string | undefined;
+}
+export {};

package/dist/040-input/15-num.d.ts

@@ -0,0 +1,50 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { InputBase, InputOptions } from './01-input';
+import { InputAutoComplete } from './00-common';
+export declare const tagName = "GZM-INPUT-NUM";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: NumInput;
+    }
+}
+declare const numDataType: readonly ["number", "int", "currency"];
+type InputNumDataType = typeof numDataType[number];
+export interface InputNumOptions extends InputOptions<number, NumInput> {
+    tagName?: typeof tagName;
+    dataType?: InputNumDataType;
+    autocomplete?: InputAutoComplete;
+    max?: string;
+    min?: string;
+    step?: string;
+    placeholder?: string;
+    list?: string[];
+}
+declare const mutableAttributes: readonly ["name", "data-type", "autocomplete", "max", "min", "step", "placeholder", "list", "required"];
+declare const copyAttributes: {
+    autocomplete: string;
+    max: string;
+    min: string;
+    step: string;
+    placeholder: string;
+} & {
+    name: string;
+    required: string;
+};
+export declare class NumInput extends InputBase<number, InputNumOptions> implements AttributeHandlers<Exclude<typeof mutableAttributes[number], keyof typeof copyAttributes>> {
+    static formAssociated: boolean;
+    _createInput(): HTMLInputElement;
+    readonly shadowRoot: ShadowRoot;
+    $ipt: HTMLInputElement;
+    protected _showValue($ipt?: HTMLInputElement): void;
+    _changeValue2Type(v: unknown, t: InputNumDataType): number | undefined;
+    accessor dataType: InputNumDataType;
+    accessor autoComplete: InputAutoComplete;
+    accessor max: string | undefined;
+    accessor min: string | undefined;
+    accessor step: string | undefined;
+    accessor placeholder: string | undefined;
+    accessor list: string[] | undefined;
+    _list_set(): void;
+    _data_type_set(): void;
+}
+export {};

package/dist/040-input/18-color.d.ts

@@ -0,0 +1,41 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { InputBase, InputOptions } from './01-input';
+import { InputAutoComplete } from './00-common';
+export declare const tagName = "GZM-INPUT-COLOR";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: ColorInput;
+    }
+}
+declare const colorDataType: readonly ["string", "int"];
+type InputColorDataType = typeof colorDataType[number];
+type ColorDataType = string | number;
+export interface InputColorOptions extends InputOptions<ColorDataType, ColorInput> {
+    tagName?: typeof tagName;
+    dataType?: InputColorDataType;
+    autocomplete?: InputAutoComplete;
+    list?: string[];
+}
+declare const mutableAttributes: readonly ["name", "autocomplete", "list", "required"];
+declare const copyAttributes: {
+    autocomplete: string;
+} & {
+    name: string;
+    required: string;
+};
+export declare class ColorInput extends InputBase<ColorDataType, InputColorOptions> implements AttributeHandlers<Exclude<typeof mutableAttributes[number], keyof typeof copyAttributes>> {
+    #private;
+    static formAssociated: boolean;
+    constructor();
+    _createInput(): HTMLInputElement;
+    readonly shadowRoot: ShadowRoot;
+    $ipt: HTMLInputElement;
+    private $lbl?;
+    protected _showValue($ipt?: HTMLInputElement): void;
+    _changeValue2Type(v: unknown, t: InputColorDataType): ColorDataType | undefined;
+    accessor dataType: InputColorDataType;
+    accessor autocomplete: InputAutoComplete;
+    accessor list: string[] | undefined;
+    _list_set(): void;
+}
+export {};

package/dist/040-input/21-lines.d.ts

@@ -0,0 +1,53 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { InputBase, InputOptions } from './01-input';
+export declare const tagName = "GZM-INPUT-LINES";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: LinesInput;
+    }
+}
+declare const linesDataType: readonly ["string", "array"];
+type InputLinesDataType = typeof linesDataType[number];
+type LinesDataType = string | string[];
+export interface InputLinesOptions extends InputOptions<LinesDataType, LinesInput> {
+    tagName?: typeof tagName;
+    /**
+     * array 类型适用于【标签】这种类型的数据。
+     */
+    dataType?: InputLinesDataType;
+    /**
+     * 忽略 rows 属性，ta高度由外层决定
+     */
+    ignoreRows?: boolean;
+    /**
+     * 未设置时，浏览器中 <textarea> 默认值是 2。
+     * 如果设置了 input-lines 的高度，因为 :host display=flex 的原因，rows 不起作用。
+     */
+    rows?: number;
+    /**
+     * HTMLElement 本身有此属性，所以只需要定义 mutableAttributes 和 copyAttributes，保证能够复制到 $ipt。
+     */
+    spellcheck?: boolean;
+}
+declare const mutableAttributes: readonly ["name", "spellcheck", "rows", "required", "data-type", "ignore-rows"];
+declare const copyAttributes: {
+    rows: string;
+    spellcheck: string;
+    'data-type': string;
+    'ignore-rows': string;
+} & {
+    name: string;
+    required: string;
+};
+export declare class LinesInput extends InputBase<LinesDataType, InputLinesOptions> implements AttributeHandlers<Exclude<typeof mutableAttributes[number], keyof typeof copyAttributes>> {
+    static formAssociated: boolean;
+    _createInput(): HTMLTextAreaElement;
+    readonly shadowRoot: ShadowRoot;
+    $ipt: HTMLTextAreaElement;
+    protected _showValue($ipt?: HTMLTextAreaElement): void;
+    _changeValue2Type(v: unknown, t: InputLinesDataType): LinesDataType | undefined;
+    accessor dataType: InputLinesDataType;
+    accessor rows: number | undefined;
+    accessor ignoreRows: boolean;
+}
+export {};

package/dist/040-input/24-comboItem.d.ts

@@ -0,0 +1,31 @@
+import { AttributeHandlers, Icon } from '@gzmjs/ui-basic';
+import { ViewElement, ViewModel } from '@gzmjs/mvvm';
+import { ComboList } from './25-comboList';
+export declare const tagName = "GZM-COMBO-ITEM";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: ComboItem;
+    }
+}
+export interface ComboItemOptions extends ViewModel<ComboItem> {
+    active?: boolean;
+    data: object;
+    values: string[];
+    labels: string[];
+}
+declare const mutableAttributes: readonly ["active"];
+export declare class ComboItem extends ViewElement<ComboItemOptions> implements AttributeHandlers<typeof mutableAttributes[number]> {
+    #private;
+    get $list(): ComboList;
+    get multiple(): boolean;
+    /**
+     * 无论是单选还是多选，都只在选中 active 状态下才显示勾
+     * 注意：这个只是 icon 的容器，且只有这个用 div，其他显示文本的都用 span。
+     */
+    get $icon(): Icon;
+    set values(v: string[]);
+    set labels(v: string[]);
+    accessor active: boolean;
+    _active_set(): void;
+}
+export {};

package/dist/040-input/25-comboList.d.ts

@@ -0,0 +1,27 @@
+import { ViewListElement, ViewListModel, ListSource } from '@gzmjs/mvvm';
+import { ComboItem, ComboItemOptions } from './24-comboItem';
+export declare const tagName = "GZM-COMBO-LIST";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: ComboList;
+    }
+}
+export interface ComboListOptions extends ViewListModel<ComboItemOptions, ComboItem, ComboList> {
+    listSource: ListSource<object>;
+    /**
+     * 这个属性要求在 listSource 之后定义，需要先通过 listSource 初始化各个 ComboItem，然后才能设置 active 状态。
+     */
+    activeItems: Set<object>;
+    activeItemsChanged?: (activeItems: Set<object>) => void;
+    emptyTip?: string;
+}
+export declare class ComboList extends ViewListElement<ComboItemOptions, ComboItem, ComboListOptions> {
+    #private;
+    constructor();
+    protected _getViewItemTagName(): string;
+    get $viewItemsContainer(): HTMLElement;
+    protected $section: HTMLElement;
+    set listSource(l: ListSource<object>);
+    set activeItems(items: Set<object>);
+    accessor emptyTip: string | undefined;
+}

package/dist/040-input/26-combo.d.ts

@@ -0,0 +1,40 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { ListSource } from '@gzmjs/mvvm';
+import { InputBase, InputOptions } from './01-input';
+import { ComboList } from './25-comboList';
+export declare const tagName = "GZM-INPUT-COMBO";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: ComboInput;
+    }
+}
+export interface InputComboOptions extends InputOptions<unknown, ComboInput> {
+    tagName?: typeof tagName;
+    listSource: ListSource<object>;
+    /**
+     * 当 listSource.multiple = true 时，显示选中多项用此符号隔开。
+     */
+    multipleDelimiter?: string;
+    /**
+     * 传递给 combo-list
+     */
+    emptyTip?: string;
+}
+declare const mutableAttributes: readonly ["name", "required", "multiple-delimiter"];
+declare const copyAttributes: {
+    name: string;
+    required: string;
+};
+export declare class ComboInput extends InputBase<unknown, InputComboOptions> implements AttributeHandlers<Exclude<typeof mutableAttributes[number], keyof typeof copyAttributes>> {
+    #private;
+    static formAssociated: boolean;
+    protected _createInput(): HTMLInputElement;
+    readonly shadowRoot: ShadowRoot;
+    $ipt: HTMLInputElement;
+    protected _showValue($ipt?: HTMLInputElement): void;
+    get $currentList(): ComboList | undefined;
+    accessor multipleDelimiter: string;
+    accessor emptyTip: string | undefined;
+    _multiple_delimiter_set(): void;
+}
+export {};

package/dist/040-input/27-checklist.d.ts

@@ -0,0 +1,36 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { ListSource } from '@gzmjs/mvvm';
+import { InputBase, InputOptions } from './01-input';
+import { ComboList } from './25-comboList';
+export declare const tagName = "GZM-CHECK-LIST";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: CheckList;
+    }
+}
+export interface CheckListOptions extends InputOptions<unknown, CheckList> {
+    tagName?: typeof tagName;
+    listSource: ListSource<object>;
+    /**
+     * 传递给 combo-list
+     */
+    emptyTip?: string;
+}
+declare const mutableAttributes: readonly ["name", "required", "empty-tip"];
+declare const copyAttributes: {
+    'empty-tip': string;
+} & {
+    name: string;
+    required: string;
+};
+export declare class CheckList extends InputBase<unknown, CheckListOptions> implements AttributeHandlers<Exclude<typeof mutableAttributes[number], keyof typeof copyAttributes>> {
+    static formAssociated: boolean;
+    constructor();
+    readonly shadowRoot: ShadowRoot;
+    readonly $ipt: HTMLInputElement;
+    $list: ComboList;
+    protected _createInput(): HTMLInputElement;
+    protected _showValue(): void;
+    accessor emptyTip: string | undefined;
+}
+export {};

package/dist/040-input/30-search-list.d.ts

@@ -0,0 +1,50 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { ListSource } from '@gzmjs/mvvm';
+import { InputBase, InputOptions } from './01-input';
+import { ComboList } from './25-comboList';
+export declare const tagName = "GZM-SEARCH-LIST";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: SearchList;
+    }
+}
+export interface SearchListOptions extends InputOptions<unknown, SearchList> {
+    tagName?: typeof tagName;
+    listSource: ListSource<object>;
+    /**
+     * 传递给 combo-list
+     */
+    emptyTip?: string;
+    search?: (txt: string) => object[] | Promise<object[]>;
+}
+declare const mutableAttributes: readonly ["name", "required", "empty-tip"];
+declare const copyAttributes: {
+    'empty-tip': string;
+} & {
+    name: string;
+    required: string;
+};
+/**
+ * 基本上就是 check-list 的基础上添加了一个 input[search]。
+ * 要实现到服务器端搜索，需要从 SearchListSource 继承后重写 search() 方法。
+ */
+export declare class SearchList extends InputBase<unknown, SearchListOptions> implements AttributeHandlers<Exclude<typeof mutableAttributes[number], keyof typeof copyAttributes>> {
+    #private;
+    static formAssociated: boolean;
+    constructor();
+    readonly shadowRoot: ShadowRoot;
+    readonly $ipt: HTMLInputElement;
+    $list: ComboList;
+    $qb: HTMLInputElement;
+    protected _createInput(): HTMLInputElement;
+    protected _showValue(): void;
+    accessor emptyTip: string | undefined;
+    readonly T: {
+        readonly qbPlaceholder: string;
+        readonly noListSource: string;
+        readonly noRecord: string;
+    } & {
+        bindHtmlElement: <P>(this: P, $ele: HTMLElement) => P;
+    };
+}
+export {};