@type-dom/ui 0.0.10 → 0.1.0

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

@@ -1,16 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCheckbox = void 0;
+const tslib_1 = require("tslib");
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-const td_checkbox_style_1 = require("./td-checkbox.style");
 const use_checkbox_1 = require("./composables/use-checkbox");
-class TdCheckbox extends ui_abstract_1.UI {
+const td_checkbox_style_1 = require("./td-checkbox.style");
+const styles_1 = require("../../../styles");
+const event_1 = require("../../../constants/event");
+const utils_1 = require("@type-dom/utils");
+class TdCheckbox extends framework_1.TypeHtml {
     constructor(params = {}) {
-        const { hasOwnLabel } = (0, use_checkbox_1.useCheckbox)(params);
-        const tag = !hasOwnLabel ? 'span' : 'label';
-        super(params, tag); // label | span
+        super(); // label | span
         this.className = 'TdCheckbox';
+        (0, td_checkbox_style_1.useCheckboxStyle)(params);
+        const { hasOwnLabel } = (0, use_checkbox_1.useCheckbox)(params);
+        console.log('hasOwnLabel is ', hasOwnLabel);
+        this.nodeName = !hasOwnLabel ? 'span' : 'label';
+        this.dom = document.createElement(this.nodeName);
         this.attr.addObj({
             name: 'td-checkbox'
         });
@@ -49,6 +55,10 @@ class TdCheckbox extends ui_abstract_1.UI {
                     name: 'inner',
                     styleObj: td_checkbox_style_1.$checkboxInnerStyle,
                     childNodes: [
+                        new framework_1.Span({
+                            name: 'inner-before',
+                            styleObj: td_checkbox_style_1.$checkboxInnerBeforeStyle,
+                        }),
                         new framework_1.Span({
                             name: 'inner-after',
                             styleObj: td_checkbox_style_1.$checkboxInnerAfterStyle
@@ -67,17 +77,229 @@ class TdCheckbox extends ui_abstract_1.UI {
                 labelSpan.slotChild(params.slot);
             }
             else {
-                labelSpan.addChild(new framework_1.TextNode(params === null || params === void 0 ? void 0 : params.label));
+                labelSpan.slotChild(String(params.label || ''));
             }
             this.addChild(labelSpan);
         }
+        this.addEvents({
+            click: (evt) => {
+                // todo
+                console.log('click . ');
+                if (this.props.disabled) {
+                    return;
+                }
+                const input = this.down('name', 'original');
+                const checked = input.dom.checked = !input.dom.checked;
+                this.setChecked(checked);
+            }
+        });
+        this.addEmits({
+            [event_1.UPDATE_MODEL_EVENT]: (val) => (0, utils_1.isString)(val) || (0, utils_1.isNumber)(val) || (0, utils_1.isBoolean)(val),
+            change: (val) => (0, utils_1.isString)(val) || (0, utils_1.isNumber)(val) || (0, utils_1.isBoolean)(val),
+        });
         this.props = this.useParams(params);
     }
+    get checkedValue() {
+        var _a;
+        return (_a = this.down('name', 'original')) === null || _a === void 0 ? void 0 : _a.dom.checked;
+    }
+    mounted() {
+        const input = this.down('name', 'original');
+        if (this.props.modelValue) {
+            input.dom.checked = true;
+            this.props.checked = true;
+        }
+        if (this.props.indeterminate) {
+            this.setIndeterminate(true);
+        }
+    }
     handleChange(ev) {
-        if (this.isLimitExceeded)
+        console.log('handleChange . ');
+        if (this.isLimitExceeded) {
             return;
+        }
         const target = ev === null || ev === void 0 ? void 0 : ev.target;
-        // emit('change', getLabeledValue(target.checked), e)
+        target.checked = !target.checked;
+        this.props.checked = target.checked;
+        // this.emit('change', target.checked, ev)
+    }
+    onClickRoot(e) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            console.log('onClickRoot . ');
+            if (this.isLimitExceeded) {
+                return;
+            }
+            if (!this.hasOwnLabel && !this.isDisabled && this.isLabeledByFormItem) {
+                // fix: https://github.com/element-plus/element-plus/issues/9981
+                const eventTargets = e.composedPath();
+                const hasLabel = eventTargets.some((item) => item.tagName === 'LABEL');
+                if (!hasLabel) {
+                    this.model = this.getLabeledValue([false, this.props.falseValue, this.props.falseLabel].includes(this.model));
+                    yield (0, framework_1.nextTick)();
+                    this.emitChangeEvent(this.model, e);
+                }
+            }
+        });
+    }
+    getLabeledValue(value) {
+        var _a, _b, _c, _d;
+        return [true, this.props.trueValue, this.props.trueLabel].includes(value)
+            ? (_b = (_a = this.props.trueValue) !== null && _a !== void 0 ? _a : this.props.trueLabel) !== null && _b !== void 0 ? _b : true
+            : (_d = (_c = this.props.falseValue) !== null && _c !== void 0 ? _c : this.props.falseLabel) !== null && _d !== void 0 ? _d : false;
+    }
+    emitChangeEvent(checked, e) {
+        // this.emit('change', this.getLabeledValue(checked), e)
+    }
+    setChecked(checked) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        //   todo 待实现 选中、不选中
+        console.log('setChecked . checked is ', checked);
+        const label = this.down('name', 'label');
+        const inner = this.down('name', 'inner');
+        const innerAfter = this.down('name', 'inner-after');
+        const innerBefore = this.down('name', 'inner-before');
+        const input = this.down('name', 'original');
+        input.dom.checked = !!checked;
+        this.props.checked = !!checked;
+        // this.props.modelValue = checked; // todo modelValue = checkbox.value
+        if (checked) {
+            (_a = label === null || label === void 0 ? void 0 : label.style) === null || _a === void 0 ? void 0 : _a.setObj({
+                color: td_checkbox_style_1.$checkbox.checkedTextColor,
+            });
+            (_b = inner === null || inner === void 0 ? void 0 : inner.style) === null || _b === void 0 ? void 0 : _b.setObj({
+                borderColor: td_checkbox_style_1.$checkbox.checkedInputBorderColor,
+                background: td_checkbox_style_1.$checkbox.checkedBgColor,
+            });
+            (_c = innerBefore === null || innerBefore === void 0 ? void 0 : innerBefore.style) === null || _c === void 0 ? void 0 : _c.setObj({
+                display: 'none',
+            });
+            (_d = innerAfter === null || innerAfter === void 0 ? void 0 : innerAfter.style) === null || _d === void 0 ? void 0 : _d.setObj({
+                transform: 'rotate(45deg) scaleY(1)',
+                display: 'block',
+                borderColor: td_checkbox_style_1.$checkbox.checkedIconColor
+            });
+            if (this.props.border) {
+                (_e = this.style) === null || _e === void 0 ? void 0 : _e.setObj({
+                    borderColor: styles_1.$colorPrimary
+                });
+            }
+        }
+        else {
+            (_f = label === null || label === void 0 ? void 0 : label.style) === null || _f === void 0 ? void 0 : _f.setObj({
+                color: td_checkbox_style_1.$checkbox.textColor,
+            });
+            (_g = innerAfter === null || innerAfter === void 0 ? void 0 : innerAfter.style) === null || _g === void 0 ? void 0 : _g.setObj({
+                transform: 'rotate(45deg) scaleY(0)',
+            });
+            (_h = innerBefore === null || innerBefore === void 0 ? void 0 : innerBefore.style) === null || _h === void 0 ? void 0 : _h.setObj({
+                display: 'none',
+            });
+            (_j = inner === null || inner === void 0 ? void 0 : inner.style) === null || _j === void 0 ? void 0 : _j.setObj({
+                borderColor: styles_1.$borderColor.base,
+                background: td_checkbox_style_1.$checkbox.bgColor,
+            });
+            if (this.props.border) {
+                if (this.props.disabled) {
+                    (_k = this.style) === null || _k === void 0 ? void 0 : _k.setObj({
+                        borderColor: styles_1.$borderColor.lighter
+                    });
+                }
+                else {
+                    (_l = this.style) === null || _l === void 0 ? void 0 : _l.setObj({
+                        border: styles_1.$border
+                    });
+                }
+            }
+        }
+        // if (this.props.indeterminate) {
+        //   this.setIndeterminate(true);
+        // }
+        if (this.props.disabled) {
+            this.setDisabled(true);
+        }
+    }
+    setDisabled(disabled) {
+        var _a, _b, _c, _d, _e, _f;
+        const label = this.down('name', 'label');
+        const inner = this.down('name', 'inner');
+        const innerAfter = this.down('name', 'inner-after');
+        this.props.disabled = disabled;
+        if (disabled) {
+            this.style.addObj({
+                cursor: 'not-allowed',
+                borderColor: styles_1.$borderColor.lighter,
+                // pointerEvents: 'none',
+            });
+            (_a = label === null || label === void 0 ? void 0 : label.style) === null || _a === void 0 ? void 0 : _a.setObj({
+                color: styles_1.$disabled.textColor,
+                cursor: 'not-allowed',
+            });
+            (_b = inner === null || inner === void 0 ? void 0 : inner.style) === null || _b === void 0 ? void 0 : _b.setObj({
+                background: td_checkbox_style_1.$checkbox.disabledInputFill,
+                borderColor: td_checkbox_style_1.$checkbox.disabledBorderColor,
+                cursor: 'not-allowed',
+            });
+            (_c = innerAfter === null || innerAfter === void 0 ? void 0 : innerAfter.style) === null || _c === void 0 ? void 0 : _c.setObj({
+                cursor: 'not-allowed',
+                borderColor: td_checkbox_style_1.$checkbox.disabledIconColor
+            });
+        }
+        else {
+            this.style.setObj({
+                cursor: 'pointer',
+                borderColor: styles_1.$borderColor.base,
+            });
+            (_d = label === null || label === void 0 ? void 0 : label.style) === null || _d === void 0 ? void 0 : _d.setObj({
+                color: '',
+                cursor: '',
+            });
+            (_e = inner === null || inner === void 0 ? void 0 : inner.style) === null || _e === void 0 ? void 0 : _e.setObj({
+                background: td_checkbox_style_1.$checkbox.bgColor,
+                borderColor: td_checkbox_style_1.$checkbox.inputBorder,
+                cursor: 'pointer',
+            });
+            (_f = innerAfter === null || innerAfter === void 0 ? void 0 : innerAfter.style) === null || _f === void 0 ? void 0 : _f.setObj({
+                cursor: 'pointer',
+                borderColor: td_checkbox_style_1.$checkbox.checkedIconColor,
+            });
+        }
+    }
+    setIndeterminate(indeterminate) {
+        var _a, _b, _c, _d, _e;
+        this.props.indeterminate = indeterminate;
+        const inner = this.down('name', 'inner');
+        const innerAfter = this.down('name', 'inner-after');
+        const innerBefore = this.down('name', 'inner-before');
+        if (indeterminate) { // todo 部分选中
+            (_a = innerBefore === null || innerBefore === void 0 ? void 0 : innerBefore.style) === null || _a === void 0 ? void 0 : _a.setObj({
+                display: 'block',
+            });
+            (_b = innerAfter === null || innerAfter === void 0 ? void 0 : innerAfter.style) === null || _b === void 0 ? void 0 : _b.setObj({
+                transform: 'rotate(45deg) scaleY(0)',
+                display: 'none',
+            });
+            (_c = inner === null || inner === void 0 ? void 0 : inner.style) === null || _c === void 0 ? void 0 : _c.setObj({
+                borderColor: td_checkbox_style_1.$checkbox.checkedInputBorderColor,
+                background: td_checkbox_style_1.$checkbox.checkedBgColor,
+            });
+            return;
+        }
+        else {
+            (_d = innerBefore === null || innerBefore === void 0 ? void 0 : innerBefore.style) === null || _d === void 0 ? void 0 : _d.setObj({
+                display: 'none',
+            });
+            (_e = innerAfter === null || innerAfter === void 0 ? void 0 : innerAfter.style) === null || _e === void 0 ? void 0 : _e.setObj({
+                // transform: 'rotate(45deg) scaleY(1)',
+                display: 'block',
+            });
+            // inner?.style?.setObj({
+            //   borderColor: $borderColor.base,
+            //   background: $checkbox.bgColor,
+            // });
+        }
+    }
+    setSize(size) {
+        // todo
     }
 }
 exports.TdCheckbox = TdCheckbox;

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

@@ -0,0 +1,63 @@
+export declare const checkboxProps: {
+    /**
+     * @description binding value
+     *     type: [Number, String, Boolean],
+     */
+    /**
+     * @description label of the Checkbox when used inside a `checkbox-group`
+     *     type: [String, Boolean, Number, Object],
+     */
+    /**
+     * @description value of the Checkbox when used inside a `checkbox-group`
+     *     type: [String, Boolean, Number, Object],
+     */
+    /**
+     * @description Set indeterminate state, only responsible for style control
+     */
+    /**
+     * @description whether the Checkbox is disabled
+     */
+    /**
+     * @description if the Checkbox is checked
+     */
+    /**
+     * @description native 'name' attribute
+     *     type: String,
+     */
+    /**
+     * @description value of the Checkbox if it's checked
+     *     type: [String, Number],
+     */
+    /**
+     * @description value of the Checkbox if it's not checked
+     *     type: [String, Number],
+     */
+    /**
+     * @deprecated use `trueValue` instead
+     * @description value of the Checkbox if it's checked
+     *     type: [String, Number],
+     */
+    /**
+     * @deprecated use `falseValue` instead
+     * @description value of the Checkbox if it's not checked
+     *     type: [String, Number],
+     */
+    /**
+     * @description input id
+     *     type: String,
+     */
+    /**
+     * @description whether to add a border around Checkbox
+     */
+    /**
+     * @description size of the Checkbox
+     */
+    /**
+     * @description input tabindex
+     */
+    /**
+     * @description whether to trigger form validation
+     *     type: Boolean,
+     */
+    validateEvent: boolean;
+};

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

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkboxProps = void 0;
+exports.checkboxProps = {
+    /**
+     * @description binding value
+     *     type: [Number, String, Boolean],
+     */
+    // modelValue: undefined,
+    /**
+     * @description label of the Checkbox when used inside a `checkbox-group`
+     *     type: [String, Boolean, Number, Object],
+     */
+    // label: undefined,
+    /**
+     * @description value of the Checkbox when used inside a `checkbox-group`
+     *     type: [String, Boolean, Number, Object],
+     */
+    // value: undefined,
+    /**
+     * @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
+     *     type: String,
+     */
+    // name: undefined,
+    /**
+     * @description value of the Checkbox if it's checked
+     *     type: [String, Number],
+     */
+    // trueValue: undefined,
+    /**
+     * @description value of the Checkbox if it's not checked
+     *     type: [String, Number],
+     */
+    // falseValue: undefined,
+    /**
+     * @deprecated use `trueValue` instead
+     * @description value of the Checkbox if it's checked
+     *     type: [String, Number],
+     */
+    // trueLabel: undefined,
+    /**
+     * @deprecated use `falseValue` instead
+     * @description value of the Checkbox if it's not checked
+     *     type: [String, Number],
+     */
+    // falseLabel: undefined,
+    /**
+     * @description input id
+     *     type: String,
+     */
+    // id: undefined,
+    /**
+     * @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
+     *     type: Boolean,
+     */
+    validateEvent: true,
+    // ...useAriaProps(['ariaControls']),
+};
+// export const checkboxEmits = {
+//   [UPDATE_MODEL_EVENT]: (val: CheckboxValueType) =>
+//     isString(val) || isNumber(val) || isBoolean(val),
+//   change: (val: CheckboxValueType) =>
+//     isString(val) || isNumber(val) || isBoolean(val),
+// }

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

@@ -1,10 +1,9 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeHtml } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
-import { IJsonData, XProxy } from '@type-dom/framework';
-export interface ITdCheckbox extends IUI {
+export interface ITdCheckbox extends ITypeHtml {
     className: 'TdCheckbox';
 }
-export interface ITdCheckboxConfig extends IUIConfig {
+export interface ITdCheckboxConfig extends ITypeConfig {
     /**
      * @description binding value
      */
@@ -12,7 +11,7 @@ export interface ITdCheckboxConfig extends IUIConfig {
     /**
      * @description label of the Checkbox when used inside a `checkbox-group`
      */
-    label?: string | number | XProxy<IJsonData>;
+    label?: string | number;
     /**
      * @description value of the Checkbox when used inside a `checkbox-group`
      */
@@ -77,3 +76,4 @@ export interface ITdCheckboxConfig extends IUIConfig {
      */
     validateEvent?: boolean;
 }
+export type CheckboxValueType = string | number | boolean;

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

@@ -1,4 +1,5 @@
 import { IStyle } from '@type-dom/css-type';
+import { ITdCheckboxConfig } from './td-checkbox.interface';
 export declare const $checkbox: {
     fontSize: string;
     fontWeight: number;
@@ -42,6 +43,7 @@ export declare const $checkboxBorderedInputHeight: {
 };
 export declare const $checkboxFontSize: {
     large: string;
+    default: string;
     small: string;
 };
 export declare const $checkboxBorderedInputWidth: {
@@ -55,6 +57,13 @@ export declare const $checkboxStyle: IStyle;
 export declare const $checkboxInputStyle: IStyle;
 export declare const $checkboxInnerStyle: IStyle;
 export declare const $checkboxInnerAfterStyle: IStyle;
+export declare const $checkboxInnerBeforeStyle: IStyle;
 export declare const $checkboxOriginalStyle: IStyle;
 export declare const $checkboxLabelStyle: IStyle;
 export declare const $checkboxGroupStyle: IStyle;
+export declare function useCheckboxStyle(params: ITdCheckboxConfig): void;
+export declare function useSize(params: ITdCheckboxConfig): void;
+export declare function useBordered(params: ITdCheckboxConfig): void;
+export declare function useDisabled(params: ITdCheckboxConfig): void;
+export declare function useChecked(params: ITdCheckboxConfig): void;
+export declare function useIndeterminate(params: ITdCheckboxConfig): void;