@gzmjs/form 0.1.0

package/dist/040-input/94.form.d.ts

@@ -0,0 +1,15 @@
+import { FormInputOptions } from './95-form-input';
+import { FormInputGroupOptions } from './96-form-group';
+import { FormListOptions } from './97-form-list';
+export declare const formInputTagName = "GZM-FORM-INPUT";
+export declare const formGroupTagName = "GZM-INPUT-GROUP";
+export declare const formListTagName = "GZM-FORM";
+export declare const styleSheet: CSSStyleSheet;
+/**
+ * 《model 与 data 的融合.md》非 PlainObject 化
+ * 同时允许非代理对象作为数据源
+ * @param ds
+ * @param model
+ * @returns
+ */
+export declare function checkDataSource(ds: object, model?: FormListOptions | FormInputGroupOptions | FormInputOptions): void;

package/dist/040-input/95-form-input.d.ts

@@ -0,0 +1,51 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { ViewModel, ViewElement } from '@gzmjs/mvvm';
+import { InputLabelOptions, InputLabel } from './03-label';
+import { InputTextOptions } from './06-text';
+import { InputCalOptions } from './09-cal';
+import { InputCheckOptions } from './12-check';
+import { InputNumOptions } from './15-num';
+import { InputColorOptions } from './18-color';
+import { InputLinesOptions } from './21-lines';
+import { InputComboOptions } from './26-combo';
+import { CheckListOptions } from './27-checklist';
+import { SearchListOptions } from './30-search-list';
+import { FormInputGroup } from './96-form-group';
+import { formInputTagName } from './94.form';
+declare global {
+    interface HTMLElementTagNameMap {
+        [formInputTagName]: FormInput;
+    }
+}
+type AllInputTypes = InputLabelOptions | InputTextOptions | InputCalOptions | InputCheckOptions | InputNumOptions | InputColorOptions | InputLinesOptions | InputComboOptions | CheckListOptions | SearchListOptions;
+export interface FormInputOptions extends ViewModel<FormInput> {
+    label: string;
+    input: AllInputTypes;
+    dataSource?: object;
+}
+declare const mutableAttributes: readonly ["label", "title"];
+export declare class FormInput extends ViewElement<FormInputOptions> implements AttributeHandlers<typeof mutableAttributes[number]> {
+    #private;
+    get $head(): HTMLElement;
+    get $label(): HTMLLabelElement;
+    /**
+     * <gzm-input-*>
+     * 可能不是 InputLabel，但是它们都有共同的基类，所以用 Label 来欺骗 TypeScript。
+     */
+    $ipt?: InputLabel;
+    /**
+     * 在录入组件和 label 之间切换，其实就是用来生成 $ipt。
+     * @param readonly - 必须是所属组的 readonly，所以请等到 connectedCallback() 后再调用！
+     */
+    switchLabel(readonly?: boolean): void;
+    get $group(): FormInputGroup | null;
+    connectedCallback(): void;
+    accessor label: string | undefined;
+    _label_set(): void;
+    _title_set(): void;
+    get dataSource(): object | undefined;
+    set dataSource(ds: object);
+    get input(): AllInputTypes | undefined;
+    set input(v: AllInputTypes | undefined);
+}
+export {};

package/dist/040-input/96-form-group.d.ts

@@ -0,0 +1,39 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { ViewListElement, ViewListModel } from '@gzmjs/mvvm';
+import { FormInput, FormInputOptions } from './95-form-input';
+import { formGroupTagName } from './94.form';
+declare global {
+    interface HTMLElementTagNameMap {
+        [formGroupTagName]: FormInputGroup;
+    }
+}
+export interface FormInputGroupOptions extends ViewListModel<FormInputOptions, FormInput, FormInputGroup> {
+    label?: string;
+    collapsed?: boolean;
+    /**
+     * 需要放在 modelList 之后！
+     */
+    readonly?: boolean;
+    /**
+     * 需要放在 modelList 之后！
+     */
+    dataSource?: object;
+}
+declare const mutableAttributes: readonly ["label", "collapsed", "readonly"];
+export declare class FormInputGroup extends ViewListElement<FormInputOptions, FormInput, FormInputGroupOptions> implements AttributeHandlers<typeof mutableAttributes[number]> {
+    #private;
+    get $head(): HTMLElement;
+    get $icn(): HTMLButtonElement;
+    get $lbl(): HTMLElement;
+    get $section(): HTMLElement;
+    protected _getViewItemTagName(): string;
+    get $viewItemsContainer(): HTMLElement | ShadowRoot;
+    set dataSource(ds: object);
+    accessor label: string | undefined;
+    _label_set(): void;
+    accessor collapsed: boolean;
+    _collapsed_set(): void;
+    accessor readonly: boolean;
+    _readonly_set(): void;
+}
+export {};

package/dist/040-input/97-form-list.d.ts

@@ -0,0 +1,38 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { ViewListElement, ViewListModel } from '@gzmjs/mvvm';
+import { FormInputGroup, FormInputGroupOptions } from './96-form-group';
+import { formListTagName } from './94.form';
+declare global {
+    interface HTMLElementTagNameMap {
+        [formListTagName]: FormList;
+    }
+}
+export interface FormListOptions extends ViewListModel<FormInputGroupOptions, FormInputGroup, FormList> {
+    tagName?: typeof formListTagName;
+    /**
+     * 需要放在 modelList 之后！
+     */
+    readonly?: boolean;
+    /**
+     * 需要放在 modelList 之后！
+     */
+    dataSource?: object;
+}
+declare const mutableAttributes: readonly ["readonly"];
+export declare class FormList extends ViewListElement<FormInputGroupOptions, FormInputGroup, FormListOptions> implements AttributeHandlers<typeof mutableAttributes[number]> {
+    constructor();
+    readonly $form: HTMLFormElement;
+    getFormData(): FormData;
+    submit(): void;
+    checkValidity(): boolean;
+    protected _getViewItemTagName(): string;
+    get $viewItemsContainer(): HTMLElement | ShadowRoot;
+    accessor readonly: boolean;
+    _readonly_set(): void;
+    /**
+     * 必须要等到 modelList 处理完毕之后再调用！
+     * 其实还有一种方法：queueMicrotask()
+     */
+    set dataSource(ds: object);
+}
+export {};