@type-dom/ui 0.0.1

package/src/form/index.js

@@ -0,0 +1,23 @@
+"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;
+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");
+Object.defineProperty(exports, "RadioOption", { enumerable: true, get: function () { return radio_option_class_1.RadioOption; } });
+var checkbox_group_class_1 = require("./checkbox-group/checkbox-group.class");
+Object.defineProperty(exports, "CheckboxGroup", { enumerable: true, get: function () { return checkbox_group_class_1.CheckboxGroup; } });
+var checkbox_option_class_1 = require("./checkbox-group/checkbox-option/checkbox-option.class");
+Object.defineProperty(exports, "CheckboxOption", { enumerable: true, get: function () { return checkbox_option_class_1.CheckboxOption; } });
+var field_input_abstract_1 = require("./field-item/input/field-input.abstract");
+Object.defineProperty(exports, "FieldInput", { enumerable: true, get: function () { return field_input_abstract_1.FieldInput; } });
+var field_radio_abstract_1 = require("./field-item/radio/field-radio.abstract");
+Object.defineProperty(exports, "FieldRadio", { enumerable: true, get: function () { return field_radio_abstract_1.FieldRadio; } });
+var field_select_abstract_1 = require("./field-item/select/field-select.abstract");
+Object.defineProperty(exports, "FieldSelect", { enumerable: true, get: function () { return field_select_abstract_1.FieldSelect; } });
+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; } });
+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; } });

package/src/form/input-number/td-input-number.class.d.ts

@@ -0,0 +1,9 @@
+import { TypeHtml } from '@type-dom/framework';
+import { FieldInput } from '../field-item/input/field-input.abstract';
+import { ITdInputNumberConfig } from './td-input-number.interface';
+export declare class TdInputNumber extends FieldInput {
+    className: 'InputNumber';
+    parent?: TypeHtml;
+    constructor(config: Partial<ITdInputNumberConfig>);
+    reset(value?: string): void;
+}

package/src/form/input-number/td-input-number.class.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdInputNumber = void 0;
+const field_input_abstract_1 = require("../field-item/input/field-input.abstract");
+// 标题属性
+class TdInputNumber extends field_input_abstract_1.FieldInput {
+    constructor(config) {
+        super(config.labelTitle, config.placeholder);
+        console.log('InputNumber constructor . ');
+        this.className = 'InputNumber';
+        this.addStyleObj({
+            padding: '2px 10px 2px 0',
+        });
+        this.addAttrName('input-number');
+        this.label.addStyleObj({
+            fontSize: '16px',
+            width: '100px',
+        });
+        this.content.addAttrObj({
+            type: 'number',
+        });
+        // todo 有后缀时才需要这样
+        // this.content.addStyleObj({
+        //   borderRadius: '4px 0 0 4px',
+        // });
+        if (config.readonly) {
+            this.content.addAttrObj({
+                disabled: true,
+            });
+        }
+        // this.button.setStyleObj({
+        //   display: 'inline-block',
+        //   padding: '4px 3px',
+        //   fontSize: '14px',
+        //   borderRadius: '0 4px 4px 0',
+        //   height: '28px'
+        // });
+        // this.button.setTitle('');
+        // console.log('this.dom is ', this.dom);
+    }
+    reset(value) {
+        // console.log('value is ', value);
+        // if (value !== undefined) {
+        //   OfdEditor.selectedControl?.resetLabelText(this.content.dom.value);
+        //   return;
+        // }
+        // if (this.styleObj.display === 'none') this.setStyle('display', 'block');
+        // if (OfdEditor.selectedControl?.formItem.labelText?.text) {
+        //   this.resetInputValue(OfdEditor.selectedControl.formItem.labelText.text);
+        // } else {
+        //   this.resetInputValue('');
+        // }
+    }
+}
+exports.TdInputNumber = TdInputNumber;

package/src/form/input-number/td-input-number.interface.d.ts

@@ -0,0 +1,9 @@
+import { TypeComponent } from '@type-dom/framework';
+export interface ITdInputNumber extends TypeComponent {
+    className: 'TdInputNumber';
+}
+export interface ITdInputNumberConfig {
+    labelTitle?: string;
+    placeholder?: string;
+    readonly?: boolean;
+}

package/src/form/input-number/td-input-number.interface.js

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

package/src/form/radio-group/radio-group.class.d.ts

@@ -0,0 +1,13 @@
+import { TypeDiv, TypeHtml } from '@type-dom/framework';
+import { IOption } from '../checkbox-group/checkbox-option/checkbox-option.interface';
+import { RadioOption } from './radio-option/radio-option.class';
+import { IRadioGroup } 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;
+    setValue(value: string | number | boolean): void;
+}

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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() {
+        super();
+        this.className = 'RadioGroup';
+        this.addAttrName('radio-group');
+        this.value = '';
+        this.childNodes = [];
+    }
+    setOptions(options) {
+        this.clearChildNodes();
+        this.clearChildDom();
+        const random = Math.random();
+        options.forEach((opt) => {
+            const optObj = new radio_option_class_1.RadioOption();
+            optObj.input.addAttrObj({
+                name: 'radio' + random,
+                label: opt.label,
+                value: opt.value,
+                checked: opt.checked || false
+            });
+            if (opt.checked) {
+                this.value = opt.value;
+            }
+            optObj.text.setText(opt.label);
+            this.addChild(optObj);
+        });
+    }
+    setValue(value) {
+        this.value = value;
+        // console.error('value is ', value);
+        this.childNodes.forEach(opt => {
+            if (String(opt.input.attrObj.value) === String(value)) {
+                opt.input.setAttrObj({
+                    checked: true,
+                });
+            }
+            else {
+                opt.input.removeAttribute('checked');
+            }
+        });
+    }
+}
+exports.RadioGroup = RadioGroup;

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

@@ -0,0 +1,6 @@
+import { ITypeDiv } from '@type-dom/framework';
+import { IRadioOption } from './radio-option/radio-option.interface';
+export interface IRadioGroup extends ITypeDiv {
+    className: 'RadioGroup';
+    childNodes: IRadioOption[];
+}

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

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

package/src/form/radio-group/radio-option/radio-option.class.d.ts

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

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

@@ -0,0 +1,33 @@
+"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() {
+        super();
+        this.className = 'RadioOption';
+        this.addStyleObj({
+            padding: '0 5px',
+        });
+        this.input = new framework_1.Input(this);
+        this.input.addAttrObj({
+            type: 'radio',
+            // name: optionConfig.name,
+            // label: opt.label,
+            // value: opt.value,
+            // checked: opt.checked || false
+        });
+        this.text = new framework_1.TextNode('');
+        this.childNodes = [this.input, this.text];
+    }
+    initEvents() {
+        this.events.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/form/radio-group/radio-option/radio-option.interface.d.ts

@@ -0,0 +1,5 @@
+import { ITypeSpan, IInput, ITextNode } from '@type-dom/framework';
+export interface IRadioOption extends ITypeSpan {
+    className: 'RadioOption';
+    childNodes: [IInput, ITextNode];
+}

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

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

package/src/form/select/select.class.d.ts

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

package/src/form/select/select.class.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const rxjs_1 = require("rxjs");
+const framework_1 = require("@type-dom/framework");
+class Select extends framework_1.TypeSelect {
+    constructor() {
+        super();
+        this.className = 'Select';
+        this.childNodes = [];
+        this.value = '';
+    }
+    setOptionConfig(optionConfig) {
+        this.clearChildNodes();
+        this.clearChildDom();
+        optionConfig.options.forEach((opt) => {
+            const optionObj = new framework_1.Option(this);
+            optionObj.setAttrObj({
+                // label: opt.label,
+                value: opt.value,
+                selected: opt.selected || false,
+            });
+            if (opt.selected) {
+                this.value = opt.value;
+            }
+            const text = new framework_1.TextNode(opt.label);
+            optionObj.childNodes = [text];
+            this.addChild(optionObj);
+        });
+    }
+    initEvents() {
+        this.events.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,
+                    });
+                }
+                else {
+                    opt.removeAttribute('selected');
+                }
+            });
+        }));
+    }
+    // 1.判断select选项中 是否存在Value="paraValue"的Item
+    jsSelectIsExitItem(objSelect, objItemValue) {
+        let isExit = false;
+        for (let i = 0; i < objSelect.options.length; i++) {
+            if (objSelect.options[i].value === objItemValue) {
+                isExit = true;
+                break;
+            }
+        }
+        return isExit;
+    }
+    // 2.向select选项中 加入一个Item
+    jsAddItemToSelect(objSelect, objItemText, objItemValue) {
+        // 判断是否存在
+        if (this.jsSelectIsExitItem(objSelect, objItemValue)) {
+            alert('该Item的Value值已经存在');
+        }
+        else {
+            // let varItem = new Option(objItemText, objItemValue);
+            // objSelect.options.add(varItem);
+            alert('成功加入');
+        }
+    }
+    // 3.从select选项中 删除一个Item
+    jsRemoveItemFromSelect(objSelect, objItemValue) {
+        // 判断是否存在
+        if (this.jsSelectIsExitItem(objSelect, objItemValue)) {
+            for (let i = 0; i < objSelect.options.length; i++) {
+                if (objSelect.options[i].value === objItemValue) {
+                    objSelect.options.remove(i);
+                    break;
+                }
+            }
+            alert('成功删除');
+        }
+        else {
+            alert('该select中 不存在该项');
+        }
+    }
+    // 4.删除select中选中的项
+    jsRemoveSelectedItemFromSelect(objSelect) {
+        const length = objSelect.options.length - 1;
+        for (let i = length; i >= 0; i--) {
+            if (objSelect[i].selected === true) {
+                // objSelect.options[i] = null;
+            }
+        }
+    }
+    // 5.修改select选项中 value="paraValue"的text为"paraText"
+    jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
+        // 判断是否存在
+        if (this.jsSelectIsExitItem(objSelect, objItemValue)) {
+            for (let i = 0; i < objSelect.options.length; i++) {
+                if (objSelect.options[i].value === objItemValue) {
+                    objSelect.options[i].text = objItemText;
+                    break;
+                }
+            }
+            alert('成功修改');
+        }
+        else {
+            alert('该select中 不存在该项');
+        }
+    }
+    // 6.设置select中text="paraText"的第一个Item为选中
+    jsSelectItemByValue(objSelect, objItemText) {
+        // 判断是否存在
+        let isExit = false;
+        for (let i = 0; i < objSelect.options.length; i++) {
+            if (objSelect.options[i].text === objItemText) {
+                objSelect.options[i].selected = true;
+                isExit = true;
+                break;
+            }
+        }
+        // Show出结果
+        if (isExit) {
+            alert('成功选中');
+        }
+        else {
+            alert('该select中 不存在该项');
+        }
+    }
+}
+exports.Select = Select;

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

@@ -0,0 +1,10 @@
+import { ITypeSelect } from '@type-dom/framework';
+import { IOption } from '../field-item/field-item.interface';
+export interface ISelect extends ITypeSelect {
+    className: 'Select';
+}
+export interface IOptionConfig {
+    name: string;
+    resultValue: string | number | boolean;
+    options: IOption[];
+}

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

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

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

@@ -0,0 +1,9 @@
+import { TypeHtml } from '@type-dom/framework';
+import { FieldInput } from '../field-item/input/field-input.abstract';
+import { ITdInput, ITdInputConfig } from './td-input.interface';
+export declare class TdInput extends FieldInput implements ITdInput {
+    className: 'TdInput';
+    parent?: TypeHtml;
+    constructor(config: Partial<ITdInputConfig>);
+    reset(value?: string): void;
+}

package/src/form/td-input/td-input.class.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdInput = void 0;
+const field_input_abstract_1 = require("../field-item/input/field-input.abstract");
+// 标题属性
+class TdInput extends field_input_abstract_1.FieldInput {
+    constructor(config) {
+        super(config.labelTitle, config.placeholder);
+        console.log('InputItem constructor . ');
+        this.className = 'TdInput';
+        this.addStyleObj({
+            padding: '2px 10px 2px 0',
+        });
+        this.addAttrName('input-item');
+        this.label.addStyleObj({
+            fontSize: '16px',
+            width: config.labelWidth || '150px',
+        });
+        this.content.addAttrObj({
+            type: (config === null || config === void 0 ? void 0 : config.type) || 'text',
+        });
+        // todo 有后缀时才需要这样
+        // this.content.addStyleObj({
+        //   borderRadius: '4px 0 0 4px',
+        // });
+        if (config.readonly) {
+            this.content.addAttrObj({
+                disabled: true,
+            });
+        }
+        // this.button.setStyleObj({
+        //   display: 'inline-block',
+        //   padding: '4px 3px',
+        //   fontSize: '14px',
+        //   borderRadius: '0 4px 4px 0',
+        //   height: '28px'
+        // });
+        // this.button.setTitle('');
+        // console.log('this.dom is ', this.dom);
+    }
+    reset(value) {
+        // console.log('value is ', value);
+        // if (value !== undefined) {
+        //   OfdEditor.selectedControl?.resetLabelText(this.content.dom.value);
+        //   return;
+        // }
+        // if (this.styleObj.display === 'none') this.setStyle('display', 'block');
+        // if (OfdEditor.selectedControl?.formItem.labelText?.text) {
+        //   this.resetInputValue(OfdEditor.selectedControl.formItem.labelText.text);
+        // } else {
+        //   this.resetInputValue('');
+        // }
+    }
+}
+exports.TdInput = TdInput;

package/src/form/td-input/td-input.interface.d.ts

@@ -0,0 +1,11 @@
+import { TypeComponent } from '@type-dom/framework';
+export interface ITdInput extends TypeComponent {
+    className: 'TdInput';
+}
+export interface ITdInputConfig {
+    labelTitle?: string;
+    labelWidth?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    type?: 'text' | 'password' | 'radio' | 'checkbox' | 'submit' | 'reset' | 'hidden' | 'date' | 'time' | 'file' | 'number' | 'email' | 'url' | 'search';
+}

package/src/form/td-input/td-input.interface.js

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

package/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from './basic';
+export * from './feedback';
+export * from './form';
+export * from './others';

package/src/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./basic"), exports);
+tslib_1.__exportStar(require("./feedback"), exports);
+tslib_1.__exportStar(require("./form"), exports);
+// export * from './navigation';
+tslib_1.__exportStar(require("./others"), exports);

package/src/navigation/index.js

@@ -0,0 +1 @@
+"use strict";

package/src/others/collapsible-box/collapsible-box.d.ts

@@ -0,0 +1,15 @@
+import { TypeComponent } from '@type-dom/framework';
+import { CollapsibleBoxContents } from './contents/contents';
+import { ExpandHeading } from './heading/expand-heading';
+/**
+ * 可收缩盒子组件
+ */
+export declare class CollapsibleBox extends TypeComponent {
+    className: 'CollapsibleBox' | string;
+    parent?: TypeComponent;
+    childNodes: [ExpandHeading, CollapsibleBoxContents];
+    heading: ExpandHeading;
+    contents: CollapsibleBoxContents;
+    constructor();
+    get children(): (CollapsibleBoxContents | ExpandHeading)[];
+}

package/src/others/collapsible-box/collapsible-box.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleBox = void 0;
+const framework_1 = require("@type-dom/framework");
+const contents_1 = require("./contents/contents");
+const expand_heading_1 = require("./heading/expand-heading");
+/**
+ * 可收缩盒子组件
+ */
+class CollapsibleBox extends framework_1.TypeComponent {
+    constructor() {
+        super('div');
+        this.className = 'CollapsibleBox';
+        this.propObj = {
+            styleObj: {
+                // borderTop: '1px solid #dddddd',
+                // borderBottom: '1px solid #dddddd',
+                listStyle: 'none',
+                padding: '3px',
+                marginBottom: '5px',
+            },
+            attrObj: {
+                name: 'collapsible-box',
+            }
+        };
+        this.heading = new expand_heading_1.ExpandHeading('标题');
+        this.heading.parent = this;
+        this.contents = new contents_1.CollapsibleBoxContents();
+        this.contents.parent = this;
+        this.childNodes = [this.heading, this.contents];
+    }
+    // contents重新赋值后，children刷新。render渲染会变。
+    get children() {
+        return [this.heading, this.contents];
+    }
+}
+exports.CollapsibleBox = CollapsibleBox;

package/src/others/collapsible-box/contents/contents.d.ts

@@ -0,0 +1,7 @@
+import { TypeComponent } from '@type-dom/framework';
+import { CollapsibleBox } from '../collapsible-box';
+export declare class CollapsibleBoxContents extends TypeComponent {
+    className: 'CollapsibleBoxContents' | string;
+    parent?: CollapsibleBox;
+    constructor();
+}

package/src/others/collapsible-box/contents/contents.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleBoxContents = void 0;
+const framework_1 = require("@type-dom/framework");
+class CollapsibleBoxContents extends framework_1.TypeComponent {
+    // childNodes: ControlMenu[];
+    constructor() {
+        super('div');
+        this.className = 'CollapsibleBoxContents';
+        this.propObj = {
+            styleObj: {
+                display: framework_1.StyleDisplay.flex,
+                flexWrap: 'wrap',
+                justifyContent: 'flex-start',
+                // width: '194px',
+                border: '1px solid #a0a0a0',
+            },
+            attrObj: {
+                name: 'collapsible-box-contents',
+            }
+        };
+        this.childNodes = [];
+    }
+}
+exports.CollapsibleBoxContents = CollapsibleBoxContents;

package/src/others/collapsible-box/heading/expand-heading.d.ts

@@ -0,0 +1,12 @@
+import { Span, TextNode, TypeComponent } from '@type-dom/framework';
+import { ElCaretBottomSvg } from '@type-dom/svgs';
+export declare class ExpandHeading extends TypeComponent {
+    className: 'ExpandHeading';
+    parent?: TypeComponent;
+    childNodes: [ElCaretBottomSvg, Span];
+    svg: ElCaretBottomSvg;
+    title: TextNode;
+    constructor(title: string);
+    setTitle(title: string): void;
+    initEvents(): void;
+}