@type-dom/ui 0.0.2 → 0.0.4

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

@@ -0,0 +1,232 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdRadio = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const var_1 = require("../../../styles/var");
+const td_radio_group_class_1 = require("../td-radio-group/td-radio-group.class");
+class TdRadio extends ui_abstract_1.UI {
+    constructor(config) {
+        super({ tag: 'label' });
+        this.className = 'TdRadio';
+        this.addStyleObj({
+            color: var_1.$textColor.regular,
+            fontWeight: var_1.$fontWeightPrimary,
+            position: 'relative',
+            cursor: framework_1.StyleCursor.pointer,
+            display: 'inline-flex',
+            alignItems: 'center',
+            whiteSpace: 'nowrap',
+            outline: 'none',
+            fontSize: var_1.$fontSizes.base,
+            userSelect: 'none',
+            marginRight: '32px',
+            height: var_1.$commonComponentSize.default
+        });
+        this.inputOriginal = new framework_1.Input({
+            attrObj: {
+                type: 'radio',
+                name: 'radio-name',
+                value: 'radio-value'
+            },
+            styleObj: {
+                opacity: 0,
+                outline: 'none',
+                position: 'absolute',
+                zIndex: -1,
+                top: '0',
+                left: '0',
+                right: '0',
+                bottom: '0',
+                margin: '0'
+            }
+        });
+        this.inputInner = new framework_1.Span({
+            styleObj: {
+                // radio-inner 样式
+                position: 'relative',
+                borderWidth: '1px',
+                // borderWidth: '5px',
+                borderStyle: 'solid',
+                borderColor: var_1.$borderColor.base,
+                // borderColor: $colors.primary.base,
+                borderRadius: '100%',
+                // width: var(--el-radio-input-width),
+                width: '14px',
+                // height: var(--el-radio-input-height),
+                height: '14px',
+                // background-color: var(--el-radio-input-bg-color),
+                backgroundColor: '#ffffff',
+                cursor: framework_1.StyleCursor.pointer,
+                display: 'inline-block',
+                boxSizing: 'border-box',
+                transition: 'transform .15s ease-in'
+            }
+        });
+        this.radioInput = new framework_1.Span({
+            styleObj: {
+                whiteSpace: 'nowrap',
+                cursor: framework_1.StyleCursor.pointer,
+                outline: 'none',
+                display: 'inline-flex',
+                position: 'relative',
+                verticalAlign: 'middle'
+            },
+            childNodes: [this.inputOriginal, this.inputInner]
+        });
+        this.radioLabel = new framework_1.Span({
+            name: 'radio-label',
+            text: (config === null || config === void 0 ? void 0 : config.label) || 'option',
+            styleObj: {
+                // 下面这些是变量，要动态复制的。
+                // font-size: var(--el-radio-font-size),
+                color: var_1.$colors.default.base,
+                fontSize: var_1.$fontSizes[(config === null || config === void 0 ? void 0 : config.size) || 'base'],
+                paddingLeft: '8px'
+            }
+        });
+        this.addChildren(this.radioInput, this.radioLabel);
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        var _a;
+        super.setConfig(config);
+        if (config === null || config === void 0 ? void 0 : config.name) {
+            console.log('setConfig config?.name', config === null || config === void 0 ? void 0 : config.name);
+            this.inputOriginal.addAttrName(config.name);
+        }
+        if (config === null || config === void 0 ? void 0 : config.value) {
+            this.inputOriginal.addAttrObj({ value: config.value });
+        }
+        if (config === null || config === void 0 ? void 0 : config.checked) {
+            this.inputOriginal.addAttrObj({ checked: config.checked || false });
+        }
+        if (config === null || config === void 0 ? void 0 : config.label) {
+            (_a = this.radioLabel.textNode) === null || _a === void 0 ? void 0 : _a.setText(config.label);
+        }
+        if (config === null || config === void 0 ? void 0 : config.disabled) {
+            this.inputOriginal.addAttrObj({ disabled: config.disabled });
+            //   todo 样式
+        }
+        if (config === null || config === void 0 ? void 0 : config.size) {
+            this.addStyleObj({
+                height: var_1.$commonComponentSize[config.size],
+                fontSize: var_1.$fontSizes[config.size]
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.border) {
+            this.addStyleObj({
+                borderWidth: var_1.$borderWidth,
+                borderStyle: var_1.$borderStyle,
+                borderColor: var_1.$borderColor.base,
+                borderRadius: var_1.$borderRadius.base,
+                padding: '0 19px 0 11px'
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.checked) {
+            this.setChecked(config === null || config === void 0 ? void 0 : config.checked);
+        }
+        if (config === null || config === void 0 ? void 0 : config.disabled) {
+            this.setDisabled(config === null || config === void 0 ? void 0 : config.disabled);
+        }
+    }
+    setDisabled(disabled) {
+        this.disabled = disabled;
+        if (disabled) {
+            this.setStyleObj({
+                cursor: framework_1.StyleCursor.notAllowed,
+                opacity: 0.5
+                //   禁用事件
+                //   pointerEvents: 'none',
+            });
+            this.radioLabel.setStyleObj({
+                color: var_1.$colors.default.base
+            });
+            this.inputOriginal.setAttrObj({ disabled: true });
+            this.inputInner.setStyleObj({
+                cursor: framework_1.StyleCursor.notAllowed,
+                // color: $colors.default.base,
+                // borderWidth: '1px',
+                // borderStyle: 'solid',
+                borderColor: var_1.$textColor.placeholder // $borderColors.base,
+                // backgroundColor: $textColors.placeholder,
+                // transform: 'translate(-50%, -50%) scale(1)'
+            });
+        }
+        else {
+            this.setStyleObj({
+                cursor: framework_1.StyleCursor.pointer,
+                opacity: 1,
+                pointerEvents: 'auto'
+            });
+            this.inputOriginal.removeAttribute('disabled');
+            this.inputInner.setStyleObj({
+                cursor: framework_1.StyleCursor.auto
+            });
+        }
+    }
+    setChecked(checked) {
+        if (checked) {
+            this.setStyleObj({
+                borderColor: var_1.$colors.primary.base
+            });
+            this.inputOriginal.setAttrObj({
+                checked: true
+            });
+            //  设置选中样式
+            this.radioLabel.setStyleObj({
+                color: var_1.$colors.primary.base
+            });
+            this.inputInner.setStyleObj({
+                color: var_1.$colors.primary.base,
+                borderWidth: '5px',
+                borderStyle: 'solid',
+                borderColor: var_1.$colors.primary.base
+            });
+        }
+        else {
+            // 设置非选中样式
+            this.setStyleObj({
+                borderColor: var_1.$borderColor.base
+            });
+            this.inputOriginal.removeAttribute('checked');
+            this.radioLabel.setStyleObj({
+                color: var_1.$colors.default.base
+            });
+            this.inputInner.setStyleObj({
+                color: var_1.$colors.default.base,
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                borderColor: var_1.$borderColor.base
+            });
+        }
+    }
+    initEvents() {
+        // 点击事件 todo 会触发两次，先不管。
+        this.addEvents({
+            click: (evt) => {
+                var _a;
+                console.log('this.subscriptions is ', this.subscriptions);
+                console.log('this.inputOriginal.dom click . ');
+                console.log('this.inputOriginal.dom.value is ', this.inputOriginal.dom.value);
+                if (this.disabled) {
+                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                    return;
+                }
+                // this.inputOriginal.dom.click();
+                if (this.parent instanceof td_radio_group_class_1.TdRadioGroup) {
+                    this.parent.setModelValue(this.inputOriginal.value); // 触发父级的事件，重置整个组。
+                }
+                this.setChecked(true);
+                (_a = this.parent) === null || _a === void 0 ? void 0 : _a.childNodes.forEach((node) => {
+                    if (node instanceof TdRadio &&
+                        node.inputOriginal.attrObj.name === this.inputOriginal.attrObj.name &&
+                        node !== this) {
+                        node.setChecked(false);
+                    }
+                });
+            }
+        });
+    }
+}
+exports.TdRadio = TdRadio;

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

@@ -0,0 +1,38 @@
+import { ISize } from '../../../styles/size';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdRadio extends IUI {
+    className: 'TdRadio';
+}
+export interface ITdRadioConfig extends IUIConfig {
+    /**
+     * @description binding value
+     */
+    modelValue?: string | number | boolean;
+    /**
+     * @description size of the Radio
+     */
+    size?: ISize;
+    /**
+     * @description whether Radio is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @description the label of Radio
+     */
+    label?: string;
+    /**
+     * @description the value of Radio
+     */
+    value?: string | number | boolean;
+    /**
+     * @description native `name` attribute
+     */
+    name?: string;
+    /**
+     * @description whether to add a border around Radio
+     */
+    border?: boolean;
+    checked?: boolean;
+    isFirst?: boolean;
+    isLast?: boolean;
+}

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

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

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

@@ -0,0 +1,15 @@
+import { Input, Span } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { ITdRadioButton, ITdRadioButtonConfig } from './td-radio-button.interface';
+export declare class TdRadioButton extends UI implements ITdRadioButton {
+    className: 'TdRadioButton';
+    inputOriginal: Input;
+    radioLabel: Span;
+    config?: ITdRadioButtonConfig;
+    private disabled?;
+    constructor(config?: ITdRadioButtonConfig);
+    setConfig(config?: ITdRadioButtonConfig): void;
+    setDisabled(disabled?: boolean): void;
+    setChecked(checked: boolean): void;
+    initEvents(): void;
+}

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

@@ -0,0 +1,195 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdRadioButton = void 0;
+const framework_1 = require("@type-dom/framework");
+const var_1 = require("../../../styles/var");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_radio_group_class_1 = require("../td-radio-group/td-radio-group.class");
+class TdRadioButton extends ui_abstract_1.UI {
+    constructor(config) {
+        super({ tag: 'label' });
+        this.className = 'TdRadioButton';
+        this.addAttrName('radio-button');
+        this.addStyleObj({
+            position: 'relative',
+            display: 'inline-block',
+            outline: 'none'
+        });
+        this.inputOriginal = new framework_1.Input({
+            attrObj: {
+                type: 'radio',
+                name: 'radio-button-name',
+                value: 'radio-value'
+            },
+            styleObj: {
+                opacity: 0,
+                outline: 'none',
+                margin: '0',
+                position: 'absolute',
+                zIndex: -1
+                // top: '0',
+                // left: '0',
+                // right: '0',
+                // bottom: '0',
+                // margin: '0',
+            }
+        });
+        this.radioLabel = new framework_1.Span({
+            name: 'radio-label',
+            text: (config === null || config === void 0 ? void 0 : config.label) || 'option',
+            styleObj: {
+                display: 'inline-block',
+                lineHeight: '1',
+                whiteSpace: 'nowrap',
+                verticalAlign: 'middle',
+                // borderLeft: '0',
+                '-webkit-appearance': 'none',
+                textAlign: 'center',
+                boxSizing: 'border-box',
+                outline: 'none',
+                margin: '0',
+                position: 'relative',
+                cursor: framework_1.StyleCursor.pointer,
+                userSelect: 'none',
+                // 下面是会变化的样式；
+                color: var_1.$textColor.regular,
+                background: var_1.$fillColor.blank,
+                borderWidth: var_1.$borderWidth,
+                borderStyle: var_1.$borderStyle,
+                borderColor: var_1.$borderColor.base,
+                fontWeight: var_1.$fontWeightPrimary,
+                // color: $buttonTextColor.default,
+                // transition: getCssVar('transition-all'),
+                fontSize: var_1.$fontSizes.base,
+                padding: var_1.$paddingVerticalMap.default + ' ' + var_1.$paddingHorizontalMap.default
+            }
+        });
+        this.addChildren(this.inputOriginal, this.radioLabel);
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        var _a;
+        super.setConfig(config);
+        if (config === null || config === void 0 ? void 0 : config.name) {
+            console.log('setConfig config?.name', config === null || config === void 0 ? void 0 : config.name);
+            this.inputOriginal.addAttrName(config.name);
+        }
+        if (config === null || config === void 0 ? void 0 : config.value) {
+            this.inputOriginal.addAttrObj({ value: config.value });
+        }
+        if (config === null || config === void 0 ? void 0 : config.checked) {
+            this.inputOriginal.addAttrObj({ checked: config.checked || false });
+        }
+        if (config === null || config === void 0 ? void 0 : config.label) {
+            (_a = this.radioLabel.textNode) === null || _a === void 0 ? void 0 : _a.setText(config.label);
+        }
+        if (config === null || config === void 0 ? void 0 : config.disabled) {
+            this.inputOriginal.addAttrObj({ disabled: config.disabled });
+            //   todo 样式
+        }
+        // size 默认值是 default
+        const size = (config === null || config === void 0 ? void 0 : config.size) || 'default';
+        this.addStyleObj({
+            height: var_1.$commonComponentSize[size]
+        });
+        this.radioLabel.addStyleObj({
+            padding: var_1.$paddingVerticalMap[size] + ' ' + var_1.$paddingHorizontalMap[size],
+            fontSize: var_1.$fontSizes[size]
+        });
+        if (config === null || config === void 0 ? void 0 : config.isFirst) {
+            const radius = var_1.$borderRadiusMap[size];
+            this.radioLabel.addStyleObj({
+                borderRadius: radius + ' 0 0 ' + radius
+            });
+        }
+        else {
+            this.radioLabel.addStyleObj({
+                borderLeft: '0'
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.isLast) {
+            const radius = var_1.$borderRadiusMap[size];
+            this.radioLabel.addStyleObj({
+                borderRadius: '0 ' + radius + ' ' + radius + ' 0'
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.checked) {
+            this.setChecked(config === null || config === void 0 ? void 0 : config.checked);
+        }
+        if (config === null || config === void 0 ? void 0 : config.disabled) {
+            this.setDisabled(config === null || config === void 0 ? void 0 : config.disabled);
+        }
+    }
+    setDisabled(disabled) {
+        this.disabled = disabled;
+        if (disabled) {
+            this.setStyleObj({
+                cursor: framework_1.StyleCursor.notAllowed,
+                opacity: 0.5
+                //   禁用事件
+                //   pointerEvents: 'none',
+            });
+            this.radioLabel.setStyleObj({
+                color: var_1.$colors.default.base
+            });
+            this.inputOriginal.setAttrObj({ disabled: true });
+        }
+        else {
+            this.setStyleObj({
+                cursor: framework_1.StyleCursor.pointer,
+                opacity: 1,
+                pointerEvents: 'auto'
+            });
+            this.inputOriginal.removeAttribute('disabled');
+        }
+    }
+    setChecked(checked) {
+        if (checked) {
+            this.inputOriginal.setAttrObj({
+                checked: true
+            });
+            //  设置选中样式
+            this.radioLabel.setStyleObj({
+                color: var_1.$colorWhite,
+                backgroundColor: var_1.$colors.primary.base
+            });
+        }
+        else {
+            this.inputOriginal.removeAttribute('checked');
+            // 设置非选中样式
+            this.radioLabel.setStyleObj({
+                borderColor: var_1.$borderColor.base,
+                background: var_1.$fillColor.blank,
+                color: var_1.$colors.default.base
+            });
+        }
+    }
+    initEvents() {
+        this.addEvents({
+            // 点击事件 todo 会触发两次，先不管。
+            click: (evt) => {
+                var _a;
+                console.log('radio-button this.subscriptions is ', this.subscriptions);
+                console.log('radio-button this.inputOriginal.dom click . ');
+                console.log('radio-button this.inputOriginal.dom.value is ', this.inputOriginal.dom.value);
+                if (this.disabled) {
+                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                    return;
+                }
+                // this.inputOriginal.dom.click();
+                if (this.parent instanceof td_radio_group_class_1.TdRadioGroup) {
+                    this.parent.setModelValue(this.inputOriginal.value); // 触发父级的事件，重置整个组。
+                }
+                this.setChecked(true);
+                (_a = this.parent) === null || _a === void 0 ? void 0 : _a.childNodes.forEach((node) => {
+                    if (node instanceof TdRadioButton &&
+                        node.inputOriginal.attrObj.name === this.inputOriginal.attrObj.name &&
+                        node !== this) {
+                        node.setChecked(false);
+                    }
+                });
+            }
+        });
+    }
+}
+exports.TdRadioButton = TdRadioButton;

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

@@ -0,0 +1,34 @@
+import { ISize } from '../../../styles/size';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdRadioButton extends IUI {
+    className: 'TdRadioButton';
+}
+export interface ITdRadioButtonConfig extends IUIConfig {
+    /**
+     * @description binding value
+     */
+    modelValue?: string | number | boolean;
+    /**
+     * @description size of the Radio
+     */
+    size?: ISize;
+    /**
+     * @description whether Radio is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @description the label of Radio
+     */
+    label?: string;
+    /**
+     * @description the value of Radio
+     */
+    value?: string | number | boolean;
+    /**
+     * @description native `name` attribute
+     */
+    name?: string;
+    checked?: boolean;
+    isFirst?: boolean;
+    isLast?: boolean;
+}

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

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

package/src/components/form/td-radio-button/td-radio-button.style.d.ts

@@ -0,0 +1 @@
+export declare const $tdRadioButtonActive: {};

package/src/components/form/td-radio-button/td-radio-button.style.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$tdRadioButtonActive = void 0;
+exports.$tdRadioButtonActive = {
+// backgroundColor: radioGroup?.fill || '',
+// borderColor: radioGroup?.fill || '',
+// boxShadow: radioGroup?.fill ? `-1px 0 0 0 ${radioGroup.fill}` : '',
+// color: radioGroup?.textColor || '',
+};

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

@@ -0,0 +1,16 @@
+import { IJsonData, IJsonDataProp, IPrimitive } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { TdRadio } from '../td-radio/td-radio.class';
+import { ITdRadioConfig } from '../td-radio/td-radio.interface';
+import { ITdRadioGroup, ITdRadioGroupConfig } from './td-radio-group.interface';
+export declare class TdRadioGroup extends UI implements ITdRadioGroup {
+    className: 'TdRadioGroup';
+    disabled?: boolean;
+    childNodes: TdRadio[];
+    config?: ITdRadioGroupConfig;
+    constructor(config?: ITdRadioGroupConfig);
+    get resultValue(): IPrimitive | IJsonData | IJsonDataProp[];
+    setConfig(config?: ITdRadioGroupConfig): void;
+    setRadios(options: ITdRadioConfig[]): void;
+    setModelValue(value: IPrimitive): void;
+}

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

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdRadioGroup = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_radio_class_1 = require("../td-radio/td-radio.class");
+const td_radio_button_class_1 = require("../td-radio-button/td-radio-button.class");
+class TdRadioGroup extends ui_abstract_1.UI {
+    constructor(config) {
+        super();
+        this.className = 'TdRadioGroup';
+        this.addStyleObj({
+            display: 'inline-flex',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            fontSize: '0',
+            marginRight: '12px'
+        });
+        this.childNodes = [];
+        this.setConfig(config);
+    }
+    get resultValue() {
+        if (this.modelValue instanceof framework_1.XProxy) {
+            return this.modelValue.value;
+        }
+        else {
+            return this.modelValue;
+        }
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        this.config = config;
+        if (config === null || config === void 0 ? void 0 : config.modelValue) {
+            this.modelValue = config.modelValue;
+            console.log('this.modelValue is is ', this.modelValue);
+        }
+        if (config === null || config === void 0 ? void 0 : config.options) {
+            this.setRadios(config.options);
+        }
+    }
+    setRadios(options) {
+        this.clearChildren();
+        const random = Math.random();
+        options.forEach((opt, index) => {
+            var _a, _b;
+            opt.parent = this; // 父级
+            if (index === 0) {
+                opt.isFirst = true;
+            }
+            else if (index === options.length - 1) {
+                opt.isLast = true;
+            }
+            if (opt.name) { /* empty */
+            }
+            else {
+                opt.name = 'radio-name' + random;
+            }
+            // 当存在 resultValue 时，清理options中设置的checked
+            if (this.resultValue !== undefined) {
+                delete opt.checked;
+            }
+            let radioObj;
+            if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.isButton) {
+                radioObj = new td_radio_button_class_1.TdRadioButton(opt);
+            }
+            else {
+                radioObj = new td_radio_class_1.TdRadio(opt);
+            }
+            if (this.resultValue === opt.value) { // 反显
+                radioObj.setChecked(true);
+            }
+            else if (opt.checked) {
+                // this.modelValue = opt.value;
+                this.setModelValue(opt.value);
+                // 设置选中样式
+                radioObj.setChecked(true);
+            }
+            if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.disabled) {
+                radioObj.setDisabled(this.config.disabled);
+            }
+            this.addChild(radioObj);
+        });
+    }
+    setModelValue(value) {
+        console.error('setModelValue value is ', value);
+        if ((this === null || this === void 0 ? void 0 : this.modelValue) instanceof framework_1.XProxy) {
+            this.modelValue.setValue(value);
+        }
+        else {
+            this.modelValue = value;
+        }
+        // console.error('value is ', value);
+        this.childNodes.forEach((opt) => {
+            if (String(opt.inputOriginal.attrObj.value) === String(value)) {
+                // 设置选中样式
+                opt.setChecked(true);
+            }
+            else {
+                // 设置非选中样式
+                opt.setChecked(false);
+            }
+        });
+    }
+}
+exports.TdRadioGroup = TdRadioGroup;