@type-dom/ui 0.0.2 → 0.0.3

package/src/{form → components/form}/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdInput = exports.FieldTextarea = exports.FieldSpan = exports.FieldSelect = exports.FieldRadio = exports.FieldInput = exports.CheckboxOption = exports.CheckboxGroup = exports.RadioOption = exports.RadioGroup = void 0;
+exports.TdFormItem = exports.TdForm = exports.TdSwitch = exports.TdInput = exports.TdRadioGroup = exports.TdRadioButton = exports.TdRadio = exports.TdInputField = exports.FieldTextarea = exports.FieldSpan = exports.FieldSelect = exports.FieldRadio = exports.FieldInput = exports.CheckboxOption = exports.CheckboxGroup = exports.RadioOption = exports.RadioGroup = void 0;
+const tslib_1 = require("tslib");
 var radio_group_class_1 = require("./radio-group/radio-group.class");
 Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return radio_group_class_1.RadioGroup; } });
 var radio_option_class_1 = require("./radio-group/radio-option/radio-option.class");
@@ -19,5 +20,20 @@ var field_span_abstract_1 = require("./field-item/span/field-span.abstract");
 Object.defineProperty(exports, "FieldSpan", { enumerable: true, get: function () { return field_span_abstract_1.FieldSpan; } });
 var field_textarea_abstract_1 = require("./field-item/textarea/field-textarea.abstract");
 Object.defineProperty(exports, "FieldTextarea", { enumerable: true, get: function () { return field_textarea_abstract_1.FieldTextarea; } });
+tslib_1.__exportStar(require("./field-item/field-item.interface"), exports);
+var td_input_field_class_1 = require("./td-input/td-input-field.class");
+Object.defineProperty(exports, "TdInputField", { enumerable: true, get: function () { return td_input_field_class_1.TdInputField; } });
+var td_radio_class_1 = require("./td-radio/td-radio.class");
+Object.defineProperty(exports, "TdRadio", { enumerable: true, get: function () { return td_radio_class_1.TdRadio; } });
+var td_radio_button_class_1 = require("./td-radio-button/td-radio-button.class");
+Object.defineProperty(exports, "TdRadioButton", { enumerable: true, get: function () { return td_radio_button_class_1.TdRadioButton; } });
+var td_radio_group_class_1 = require("./td-radio-group/td-radio-group.class");
+Object.defineProperty(exports, "TdRadioGroup", { enumerable: true, get: function () { return td_radio_group_class_1.TdRadioGroup; } });
 var td_input_class_1 = require("./td-input/td-input.class");
 Object.defineProperty(exports, "TdInput", { enumerable: true, get: function () { return td_input_class_1.TdInput; } });
+var td_switch_class_1 = require("./td-switch/td-switch.class");
+Object.defineProperty(exports, "TdSwitch", { enumerable: true, get: function () { return td_switch_class_1.TdSwitch; } });
+var td_form_class_1 = require("./td-form/td-form.class");
+Object.defineProperty(exports, "TdForm", { enumerable: true, get: function () { return td_form_class_1.TdForm; } });
+var td_form_item_class_1 = require("./td-form-item/td-form-item.class");
+Object.defineProperty(exports, "TdFormItem", { enumerable: true, get: function () { return td_form_item_class_1.TdFormItem; } });

package/src/{form → components/form}/radio-group/radio-group.class.d.ts

@@ -1,13 +1,12 @@
-import { TypeDiv, TypeHtml } from '@type-dom/framework';
-import { IOption } from '../checkbox-group/checkbox-option/checkbox-option.interface';
+import { IOptionConfig, TypeDiv } from '@type-dom/framework';
 import { RadioOption } from './radio-option/radio-option.class';
-import { IRadioGroup } from './radio-group.interface';
+import { IRadioGroup, IRadioGroupConfig } from './radio-group.interface';
 export declare class RadioGroup extends TypeDiv implements IRadioGroup {
     className: 'RadioGroup';
-    parent?: TypeHtml;
     childNodes: RadioOption[];
     value: string | number | boolean;
-    constructor();
-    setOptions(options: IOption[]): void;
+    constructor(config?: IRadioGroupConfig);
+    setConfig(config?: Partial<IRadioGroupConfig>): void;
+    setOptions(options: IOptionConfig[]): void;
     setValue(value: string | number | boolean): void;
 }

package/src/{form → components/form}/radio-group/radio-group.class.js

@@ -4,18 +4,25 @@ exports.RadioGroup = void 0;
 const framework_1 = require("@type-dom/framework");
 const radio_option_class_1 = require("./radio-option/radio-option.class");
 class RadioGroup extends framework_1.TypeDiv {
-    constructor() {
+    constructor(config) {
         super();
         this.className = 'RadioGroup';
         this.addAttrName('radio-group');
         this.value = '';
         this.childNodes = [];
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        if (config === null || config === void 0 ? void 0 : config.options) {
+            this.setOptions(config.options);
+        }
     }
     setOptions(options) {
         this.clearChildren();
         const random = Math.random();
         options.forEach((opt) => {
-            const optObj = new radio_option_class_1.RadioOption();
+            const optObj = new radio_option_class_1.RadioOption({ parent: this });
             optObj.input.addAttrObj({
                 name: 'radio' + random,
                 label: opt.label,
@@ -25,7 +32,7 @@ class RadioGroup extends framework_1.TypeDiv {
             if (opt.checked) {
                 this.value = opt.value;
             }
-            optObj.text.setText(opt.label);
+            optObj.textNode.setText(opt.label);
             this.addChild(optObj);
         });
     }
@@ -35,7 +42,7 @@ class RadioGroup extends framework_1.TypeDiv {
         this.childNodes.forEach(opt => {
             if (String(opt.input.attrObj.value) === String(value)) {
                 opt.input.setAttrObj({
-                    checked: true,
+                    checked: true
                 });
             }
             else {

package/src/components/form/radio-group/radio-group.interface.d.ts

@@ -0,0 +1,11 @@
+import { IOptionConfig, ITypeConfig, ITypeDiv } from '@type-dom/framework';
+import { IRadioOption } from './radio-option/radio-option.interface';
+export interface IRadioGroup extends ITypeDiv {
+    className: 'RadioGroup';
+    childNodes: IRadioOption[];
+}
+export interface IRadioGroupConfig extends ITypeConfig {
+    name: string;
+    options: IOptionConfig[];
+    value?: string | number;
+}

package/src/components/form/radio-group/radio-group.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/{form → components/form}/radio-group/radio-option/radio-option.class.d.ts

@@ -1,12 +1,13 @@
 import { Input, TextNode, TypeSpan } from '@type-dom/framework';
 import { RadioGroup } from '../radio-group.class';
-import { IRadioOption } from './radio-option.interface';
+import { IRadioOption, IRadioOptionConfig } from './radio-option.interface';
 export declare class RadioOption extends TypeSpan implements IRadioOption {
     className: 'RadioOption';
+    input: Input;
     parent?: RadioGroup;
     childNodes: [Input, TextNode];
-    input: Input;
-    text: TextNode;
-    constructor();
+    textNode: TextNode;
+    constructor(config?: IRadioOptionConfig);
+    setConfig(config?: IRadioOptionConfig): void;
     initEvents(): void;
 }

package/src/components/form/radio-group/radio-option/radio-option.class.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioOption = void 0;
+const rxjs_1 = require("rxjs");
+const framework_1 = require("@type-dom/framework");
+class RadioOption extends framework_1.TypeSpan {
+    constructor(config) {
+        super();
+        this.className = 'RadioOption';
+        this.addStyleObj({
+            padding: '0 5px'
+        });
+        this.input = new framework_1.Input({ parent: this });
+        this.input.addAttrObj({
+            type: 'radio'
+            // name: optionSetting.name,
+            // label: opt.label,
+            // value: opt.value,
+            // checked: opt.checked || false
+        });
+        this.textNode = new framework_1.TextNode('');
+        this.childNodes = [this.input, this.textNode];
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        if (config === null || config === void 0 ? void 0 : config.name) {
+            this.input.addAttrName(config.name);
+        }
+        if (config === null || config === void 0 ? void 0 : config.value) {
+            this.input.addAttrObj({ value: config.value });
+        }
+        if (config === null || config === void 0 ? void 0 : config.checked) {
+            this.input.addAttrObj({ checked: config.checked || false });
+        }
+    }
+    initEvents() {
+        this.subscriptions.push((0, rxjs_1.fromEvent)(this.input.dom, 'click').subscribe(() => {
+            console.log('this.input.dom click . ');
+            console.log('this.input.dom.value is ', this.input.dom.value);
+            if (this.parent)
+                this.parent.value = this.input.dom.value;
+        }));
+    }
+}
+exports.RadioOption = RadioOption;

package/src/components/form/radio-group/radio-option/radio-option.interface.d.ts

@@ -0,0 +1,10 @@
+import { ITypeSpan, IInput, ITextNode, ITypeConfig } from '@type-dom/framework';
+export interface IRadioOption extends ITypeSpan {
+    className: 'RadioOption';
+    childNodes: [IInput, ITextNode];
+}
+export interface IRadioOptionConfig extends ITypeConfig {
+    value?: string | number;
+    name?: string;
+    checked?: boolean;
+}

package/src/components/form/radio-group/radio-option/radio-option.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/{form → components/form}/select/select.class.d.ts

@@ -1,12 +1,11 @@
-import { Option, TypeHtml, TypeSelect } from '@type-dom/framework';
-import { IOptionConfig } from './select.interface';
-export declare class Select extends TypeSelect {
+import { Option, TypeSelect, IOptionSetting } from '@type-dom/framework';
+import { ISelect } from './select.interface';
+export declare class Select extends TypeSelect implements ISelect {
     className: 'Select';
-    parent?: TypeHtml;
     childNodes: Option[];
     value: string | number | boolean;
     constructor();
-    setOptionConfig(optionConfig: IOptionConfig): void;
+    setOptionSetting(optionSetting: IOptionSetting): void;
     initEvents(): void;
     jsSelectIsExitItem(objSelect: HTMLSelectElement, objItemValue: string): boolean;
     jsAddItemToSelect(objSelect: HTMLSelectElement, objItemText: string | undefined, objItemValue: string): void;

package/src/{form → components/form}/select/select.class.js

@@ -10,14 +10,14 @@ class Select extends framework_1.TypeSelect {
         this.childNodes = [];
         this.value = '';
     }
-    setOptionConfig(optionConfig) {
+    setOptionSetting(optionSetting) {
         this.clearChildren();
-        optionConfig.options.forEach((opt) => {
+        optionSetting.options.forEach((opt) => {
             const optionObj = new framework_1.Option({ parent: this });
             optionObj.setAttrObj({
                 // label: opt.label,
                 value: opt.value,
-                selected: opt.selected || false,
+                selected: opt.selected || false
             });
             if (opt.selected) {
                 this.value = opt.value;
@@ -28,14 +28,14 @@ class Select extends framework_1.TypeSelect {
         });
     }
     initEvents() {
-        this.events.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
+        this.subscriptions.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
             console.log('this.dom click . ');
             console.log('this.dom.value is ', this.dom.value);
             this.value = this.dom.value; // 对应的opt.label.
             this.childNodes.forEach(opt => {
                 if (opt.dom.value === this.dom.value) {
                     opt.setAttrObj({
-                        selected: true,
+                        selected: true
                     });
                 }
                 else {

package/src/components/form/select/select.interface.d.ts

@@ -0,0 +1,4 @@
+import { ITypeSelect } from '@type-dom/framework';
+export interface ISelect extends ITypeSelect {
+    className: 'Select';
+}

package/src/components/form/select/select.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/form/td-checkbox/td-checkbox.class.d.ts

@@ -0,0 +1,7 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdCheckbox, ITdCheckboxConfig } from './td-checkbox.interface';
+export declare class TdCheckbox extends UI implements ITdCheckbox {
+    className: 'TdCheckbox';
+    constructor(config?: ITdCheckboxConfig);
+    setConfig(config?: ITdCheckboxConfig): void;
+}

package/src/components/form/td-checkbox/td-checkbox.class.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCheckbox = void 0;
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
+const var_1 = require("../../../styles/var");
+const td_checkbox_style_1 = require("./td-checkbox.style");
+class TdCheckbox extends ui_abstract_1.UI {
+    constructor(config) {
+        super({ tag: 'label' }); // label | span
+        this.className = 'TdCheckbox';
+        this.addAttrObj({
+            name: 'td-checkbox'
+        });
+        this.addStyleObj({
+            //   color: getCssVar('checkbox-text-color'),
+            color: var_1.$textColor.regular,
+            //   font-weight: getCssVar('checkbox-font-weight'),
+            fontWeight: var_1.$fontWeightPrimary,
+            // font-size: getCssVar('font-size', 'base'),
+            fontSize: var_1.$fontSizes.base,
+            position: 'relative',
+            cursor: framework_1.StyleCursor.pointer,
+            display: 'inline-flex',
+            alignItems: 'center',
+            whiteSpace: 'nowrap',
+            userSelect: 'none',
+            marginRight: '30px',
+            // height: getCssVarWithDefault(
+            //   'checkbox-height',
+            //   map.get($checkbox-height, 'default')
+            // );
+            height: td_checkbox_style_1.$checkboxHeight['default']
+        });
+        const inputSpan = new framework_1.Span({
+            attrObj: {
+                name: 'td-checkbox-input-span'
+            },
+            styleObj: {
+                whiteSpace: 'nowrap',
+                cursor: framework_1.StyleCursor.pointer,
+                outline: 'none',
+                display: 'inline - flex',
+                position: 'relative'
+            },
+            childNodes: [
+                new framework_1.Input({
+                    name: 'original',
+                    attrObj: {
+                        type: 'checkbox'
+                    },
+                    styleObj: {
+                        opacity: 0,
+                        outline: 'none',
+                        position: 'absolute',
+                        margin: '0',
+                        width: 0,
+                        height: 0,
+                        zIndex: -1
+                    }
+                }),
+                new framework_1.Span({
+                    name: 'inner',
+                    styleObj: {
+                        display: 'inline-block',
+                        position: 'relative',
+                        // border: getCssVar('checkbox-input-border'),
+                        // border: $checkboxInputBorder,
+                        // borderRadius: getCssVar('checkbox-border-radius'),
+                        borderRadius: var_1.$borderRadius['base'],
+                        boxSizing: 'border-box',
+                        // width: getCssVar('checkbox-input-width'),
+                        // width: $checkboxInputWidth,
+                        // height: getCssVar('checkbox-input-height'),
+                        height: td_checkbox_style_1.$checkboxHeight['default'],
+                        // background-color: getCssVar('checkbox-bg-color'),
+                        backgroundColor: var_1.$bgColor.default,
+                        // z-index: getCssVar('index-normal'),
+                        zIndex: var_1.$zIndex.normal
+                        // transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+                        // background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+                        //   outline 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
+                    }
+                })
+            ]
+        });
+        const labelSpan = new framework_1.Span({
+            name: 'label',
+            styleObj: {
+                display: 'inline-block',
+                paddingLeft: '8px',
+                lineHeight: 1,
+                // fontSize: getCssVar('checkbox-font-size'),
+                fontSize: var_1.$fontSizes.base
+            }
+        });
+        this.childNodes = [inputSpan, labelSpan];
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        super.setConfig(config);
+    }
+}
+exports.TdCheckbox = TdCheckbox;

package/src/components/form/td-checkbox/td-checkbox.interface.d.ts

@@ -0,0 +1,78 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ISize } from '../../../styles/size';
+export interface ITdCheckbox extends IUI {
+    className: 'TdCheckbox';
+}
+export interface ITdCheckboxConfig extends IUIConfig {
+    /**
+     * @description binding value
+     */
+    modelValue?: number | string | boolean;
+    /**
+     * @description label of the Checkbox when used inside a `checkbox-group`
+     */
+    label?: string | boolean | number | object;
+    /**
+     * @description value of the Checkbox when used inside a `checkbox-group`
+     */
+    value?: string | boolean | number | object;
+    /**
+     * @description Set indeterminate state, only responsible for style control
+     */
+    indeterminate?: boolean;
+    /**
+     * @description whether the Checkbox is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @description if the Checkbox is checked
+     */
+    checked?: boolean;
+    /**
+     * @description native 'name' attribute
+     */
+    name?: string;
+    /**
+     * @description value of the Checkbox if it's checked
+     */
+    trueValue?: string | number;
+    /**
+     * @description value of the Checkbox if it's not checked
+     *     default: undefined,
+     */
+    falseValue?: string | number;
+    /**
+     * @deprecated use `trueValue` instead
+     * @description value of the Checkbox if it's checked
+     */
+    trueLabel?: string | number;
+    /**
+     * @deprecated use `falseValue` instead
+     * @description value of the Checkbox if it's not checked
+     */
+    falseLabel?: string | number;
+    /**
+     * @description input id
+     */
+    id?: string;
+    /**
+     * @description same as [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls), takes effect when `indeterminate` is `true`
+     */
+    controls?: string;
+    /**
+     * @description whether to add a border around Checkbox
+     */
+    border?: boolean;
+    /**
+     * @description size of the Checkbox
+     */
+    size?: ISize;
+    /**
+     * @description input tabindex
+     */
+    tabindex?: string | number;
+    /**
+     * @description whether to trigger form validation
+     */
+    validateEvent?: boolean;
+}

package/src/components/form/td-checkbox/td-checkbox.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/form/td-checkbox/td-checkbox.style.d.ts

@@ -0,0 +1,14 @@
+export declare const $checkboxHeight: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $checkboxBorderedInputHeight: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $checkboxFontSize: {
+    large: string;
+    small: string;
+};

package/src/components/form/td-checkbox/td-checkbox.style.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$checkboxFontSize = exports.$checkboxBorderedInputHeight = exports.$checkboxHeight = void 0;
+const var_1 = require("../../../styles/var");
+exports.$checkboxHeight = var_1.$commonComponentSize;
+exports.$checkboxBorderedInputHeight = {
+    'large': '14px',
+    'default': '12px',
+    'small': '12px'
+};
+exports.$checkboxFontSize = {
+    'large': '14px',
+    'small': '12px'
+};
+// export const $checkboxBorderedInputWidth = {
+//   $checkboxBorderedInputHeight,
+//   $checkboxBorderedInputWidth
+// }

package/src/components/form/td-checkbox-button/td-checkbox-button.class.d.ts

@@ -0,0 +1,7 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdCheckboxButton } from './td-checkbox-button.interface';
+import { ITdCheckboxConfig } from '../td-checkbox/td-checkbox.interface';
+export declare class TdCheckboxButton extends UI implements ITdCheckboxButton {
+    className: 'TdCheckboxButton';
+    constructor(config: ITdCheckboxConfig);
+}

package/src/components/form/td-checkbox-button/td-checkbox-button.class.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCheckboxButton = void 0;
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
+class TdCheckboxButton extends ui_abstract_1.UI {
+    constructor(config) {
+        super({ tag: 'label' });
+        this.className = 'TdCheckboxButton';
+        const originalInput = new framework_1.Input({});
+        const labelSpan = new framework_1.Span({});
+        this.setConfig(config);
+    }
+}
+exports.TdCheckboxButton = TdCheckboxButton;

package/src/components/form/td-checkbox-button/td-checkbox-button.interface.d.ts

@@ -0,0 +1,6 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdCheckboxButton extends IUI {
+    className: 'TdCheckboxButton';
+}
+export interface ITdCheckboxButtonConfig extends IUIConfig {
+}

package/src/components/form/td-checkbox-button/td-checkbox-button.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/form/td-checkbox-group/td-checkbox-group.class.d.ts

@@ -0,0 +1,7 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdCheckboxGroup, ITdCheckboxGroupConfig } from './td-checkbox-group.interface';
+export declare class TdCheckboxGroup extends UI implements ITdCheckboxGroup {
+    config?: ITdCheckboxGroupConfig | undefined;
+    className: 'TdCheckboxGroup';
+    constructor(config?: ITdCheckboxGroupConfig | undefined);
+}

package/src/components/form/td-checkbox-group/td-checkbox-group.class.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCheckboxGroup = void 0;
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+class TdCheckboxGroup extends ui_abstract_1.UI {
+    constructor(config) {
+        super({ tag: config === null || config === void 0 ? void 0 : config.tag });
+        this.config = config;
+        this.className = 'TdCheckboxGroup';
+        this.addAttrObj({
+            role: 'group'
+        });
+        this.addStyleObj({
+            fontSize: '0',
+            lineHeight: 0
+        });
+        this.setConfig(config);
+    }
+}
+exports.TdCheckboxGroup = TdCheckboxGroup;

package/src/components/form/td-checkbox-group/td-checkbox-group.interface.d.ts

@@ -0,0 +1,50 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ISize } from '../../../styles/size';
+import { IPrimitive } from '@type-dom/framework';
+export interface ITdCheckboxGroup extends IUI {
+    className: 'TdCheckboxGroup';
+}
+export interface ITdCheckboxGroupConfig extends IUIConfig {
+    /**
+     * @description binding value
+     */
+    modelValue?: IPrimitive[];
+    /**
+     * @description whether the nesting checkboxes are disabled
+     */
+    disabled?: boolean;
+    /**
+     * @description minimum number of checkbox checked
+     */
+    min?: number;
+    /**
+     * @description maximum number of checkbox checked
+     */
+    max?: number;
+    /**
+     * @description size of checkbox
+     */
+    size?: ISize;
+    /**
+     * @description label for screen reader
+     */
+    label?: string;
+    /**
+     * @description border and background color when button is active
+     */
+    fill?: string;
+    /**
+     * @description font color when button is active
+     */
+    textColor?: string;
+    /**
+     * @description element tag of the checkbox group
+     *     default: 'div',
+     */
+    tag?: string;
+    /**
+     * @description whether to trigger form validation
+     *     default: true,
+     */
+    validateEvent?: boolean;
+}

package/src/components/form/td-checkbox-group/td-checkbox-group.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/form/td-form/td-form.class.d.ts

@@ -0,0 +1,22 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdForm, ITdFormConfig } from './td-form.interface';
+/**
+ * TdForm类继承自UI抽象类，实现ITdForm接口，用于创建和管理表单。
+ * 提交表单时，应该要获取所有子元素 form-item 里的 如 TdInput 这些可输入的组件的值。
+ * 表单提交地址也应该是可以配置的。
+ */
+export declare class TdForm extends UI implements ITdForm {
+    className: 'TdForm';
+    config?: ITdFormConfig;
+    private model?;
+    /**
+     * 构造函数，初始化表单配置。
+     * @param {ITdFormConfig} config? 可选的表单配置对象。
+     */
+    constructor(config?: ITdFormConfig);
+    /**
+     * 设置表单配置，包括模型和样式配置，并应用到子元素。
+     * @param {ITdFormConfig} config? 可选的表单配置对象。
+     */
+    setConfig(config?: ITdFormConfig): void;
+}