@type-dom/ui 0.1.0 → 0.1.2

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

@@ -2,191 +2,70 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdRadioButton = void 0;
 const framework_1 = require("@type-dom/framework");
-const var_1 = require("../../../styles/var");
-const td_button_style_1 = require("../../basic/td-button/td-button.style");
-const td_radio_group_class_1 = require("../td-radio-group/td-radio-group.class");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_radio_1 = require("../td-radio/use-radio");
+require("./style/index");
 class TdRadioButton extends framework_1.TypeLabel {
     constructor(params = {}) {
         super();
         this.className = 'TdRadioButton';
-        this.attr.addName('radio-button');
-        this.style.addObj({
-            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: (params === null || params === void 0 ? void 0 : params.label) || 'option',
-            styleObj: {
-                display: 'inline-block',
-                lineHeight: '1',
-                whiteSpace: 'nowrap',
-                verticalAlign: 'middle',
-                // borderLeft: '0',
-                WebkitAppearance: 'none',
-                textAlign: 'center',
-                boxSizing: 'border-box',
-                outline: 'none',
-                margin: '0',
-                position: 'relative',
-                cursor: '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: td_button_style_1.$buttonPaddingVertical.default + ' ' + td_button_style_1.$buttonPaddingHorizontal.default
-            }
-        });
-        this.addChildren(this.inputOriginal, this.radioLabel);
+        this.attr.addName('td-radio-button');
         this.props = this.useParams(params);
     }
     setup() {
         var _a;
         const props = this.props;
-        if (props.name) {
-            console.log('setConfig props.name', props.name);
-            this.inputOriginal.attr.addName(props.name);
-        }
-        if (props.value) {
-            this.inputOriginal.attr.addObj({ value: props.value });
-        }
-        if (props.checked) {
-            this.inputOriginal.attr.addObj({ checked: props.checked || false });
-        }
-        if (props === null || props === void 0 ? void 0 : props.label) {
-            (_a = this.radioLabel.textNode) === null || _a === void 0 ? void 0 : _a.setText(props.label);
-        }
-        if (props === null || props === void 0 ? void 0 : props.disabled) {
-            this.inputOriginal.attr.addObj({ disabled: props.disabled });
-            //   todo 样式
-        }
-        // size 默认值是 default
-        const size = (props === null || props === void 0 ? void 0 : props.size) || 'default';
-        this.style.addObj({
-            height: var_1.$commonComponentSize[size]
-        });
-        this.radioLabel.style.addObj({
-            padding: td_button_style_1.$buttonPaddingVertical[size] + ' ' + td_button_style_1.$buttonPaddingHorizontal[size],
-            fontSize: var_1.$fontSizes[size]
-        });
-        if (props === null || props === void 0 ? void 0 : props.isFirst) {
-            const radius = td_button_style_1.$buttonBorderRadius[size];
-            this.radioLabel.style.addObj({
-                borderRadius: radius + ' 0 0 ' + radius
-            });
-        }
-        else {
-            this.radioLabel.style.addObj({
-                borderLeft: '0'
-            });
-        }
-        if (props === null || props === void 0 ? void 0 : props.isLast) {
-            const radius = td_button_style_1.$buttonBorderRadius[size];
-            this.radioLabel.style.addObj({
-                borderRadius: '0 ' + radius + ' ' + radius + ' 0'
-            });
-        }
-        if (props === null || props === void 0 ? void 0 : props.checked) {
-            this.setChecked(!!(props === null || props === void 0 ? void 0 : props.checked));
-        }
-        if (props === null || props === void 0 ? void 0 : props.disabled) {
-            this.setDisabled(props === null || props === void 0 ? void 0 : props.disabled);
-        }
-        this.addEvents({
-            // 点击事件 todo 会触发两次，先不管。
-            click: (evt) => {
-                var _a;
-                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.attr.get('name') ===
-                            this.inputOriginal.attr.get('name') &&
-                        node !== this) {
-                        node.setChecked(false);
-                    }
-                });
-            }
+        const emit = this.emit;
+        const ns = (0, use_namespace_1.useNamespace)('radio');
+        const { radioRef, focus, size, disabled, modelValue, radioGroup, actualValue, } = (0, use_radio_1.useRadio)(props);
+        const activeStyle = (0, signals_1.computed)(() => {
+            return {
+                backgroundColor: (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.fill) || '',
+                borderColor: (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.fill) || '',
+                boxShadow: (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.fill) ? `-1px 0 0 0 ${radioGroup.fill}` : '',
+                color: (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.textColor) || '',
+            };
         });
-    }
-    setDisabled(disabled) {
-        this.disabled = disabled;
-        if (disabled) {
-            this.style.setObj({
-                cursor: 'not-allowed',
-                opacity: 0.5
-                //   禁用事件
-                //   pointerEvents: 'none',
-            });
-            this.radioLabel.style.setObj({
-                color: var_1.$colors.default.base
-            });
-            this.inputOriginal.attr.setObj({ disabled: true });
-        }
-        else {
-            this.style.setObj({
-                cursor: 'pointer',
-                opacity: 1,
-                pointerEvents: 'auto'
-            });
-            this.inputOriginal.attr.remove('disabled');
-        }
-    }
-    setChecked(checked) {
-        if (checked) {
-            this.inputOriginal.attr.setObj({
-                checked: true
-            });
-            //  设置选中样式
-            this.radioLabel.style.setObj({
-                color: var_1.$colorWhite,
-                backgroundColor: var_1.$colors.primary.base
-            });
-        }
-        else {
-            this.inputOriginal.attr.remove('checked');
-            // 设置非选中样式
-            this.radioLabel.style.setObj({
-                borderColor: var_1.$borderColor.base,
-                background: var_1.$fillColor.blank,
-                color: var_1.$colors.default.base
-            });
+        this.attr.addClass((0, signals_1.computed)(() => [
+            ns.b('button'),
+            ns.is('active', modelValue.get() === actualValue.get()),
+            ns.is('disabled', disabled.get()),
+            ns.is('focus', focus.get()),
+            ns.bm('button', size.get()),
+        ]));
+        this.addChildren(new framework_1.Input({
+            refDom: radioRef,
+            vModel: modelValue,
+            attrObj: {
+                class: ns.be('button', 'original-radio'),
+                value: actualValue.get(),
+                type: 'radio',
+                name: (0, signals_1.computed)(() => props.name || (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.name) || ''),
+                disabled: disabled.get(),
+            },
+            events: {
+                focus: () => focus.set(true),
+                blur: () => focus.set(false),
+                click: (evt) => {
+                    handleChange(); // add by me todo
+                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                },
+            },
+        }), new framework_1.Span({
+            class: ns.be('button', 'inner'),
+            styleObj: (0, signals_1.computed)(() => modelValue.get() === actualValue.get() ? activeStyle.get() : {}),
+            events: {
+                keydown: (evt) => evt === null || evt === void 0 ? void 0 : evt.stopPropagation(),
+            },
+            slot: props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default) || props.label,
+        }));
+        // add by me
+        function handleChange() {
+            // console.warn('handleChange . modelValue.get() is ', modelValue.get());
+            modelValue.set(actualValue.get()); // add by me todo refine  value绑定的问题
+            // todo 值没有变
+            (0, framework_1.nextTick)(() => emit('change', modelValue.get()));
         }
     }
 }

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

@@ -1,9 +1,9 @@
-import { ITypeConfig, ITypeLabel } from '@type-dom/framework';
-import { ISize } from '../../../styles/size';
+import { ITypeLabel, TypeLabelProps } from '@type-dom/framework';
+import { ComponentSize } from '../../../constants/size';
 export interface ITdRadioButton extends ITypeLabel {
     className: 'TdRadioButton';
 }
-export interface ITdRadioButtonConfig extends ITypeConfig {
+export interface RadioButtonProps extends TypeLabelProps {
     /**
      * @description binding value
      */
@@ -11,7 +11,7 @@ export interface ITdRadioButtonConfig extends ITypeConfig {
     /**
      * @description size of the Radio
      */
-    size?: ISize;
+    size?: ComponentSize;
     /**
      * @description whether Radio is disabled
      */

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

@@ -0,0 +1,2 @@
+import '../../../base/style/css';
+import '@element-plus/theme-chalk/el-radio-group.css';

package/src/components/form/td-radio-group/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style/css");
+require("@element-plus/theme-chalk/el-radio-group.css");

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

@@ -0,0 +1,2 @@
+import '../../../base/style';
+import '../../../../theme-chalk/radio-group.scss';

package/src/components/form/td-radio-group/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style");
+require("../../../../theme-chalk/radio-group.scss");

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

@@ -1,13 +1,10 @@
-import { IJsonData, IJsonDataProp, IPrimitive, TypeDiv } from '@type-dom/framework';
-import { ITdRadioConfig } from '../td-radio/td-radio.interface';
-import { ITdRadioGroup, ITdRadioGroupConfig } from './td-radio-group.interface';
+import { TypeDiv } from '@type-dom/framework';
+import { ITdRadioGroup, RadioGroupProps } from './td-radio-group.interface';
+import './style/index';
 export declare class TdRadioGroup extends TypeDiv implements ITdRadioGroup {
     className: 'TdRadioGroup';
     disabled?: boolean;
-    props: ITdRadioGroupConfig;
-    constructor(params?: ITdRadioGroupConfig);
-    get resultValue(): IPrimitive | IJsonData | IJsonDataProp[];
+    props: RadioGroupProps;
+    constructor(params?: RadioGroupProps);
     setup(): void;
-    setRadios(options: ITdRadioConfig[]): void;
-    setModelValue(value: IPrimitive): void;
 }

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

@@ -2,108 +2,74 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdRadioGroup = void 0;
 const framework_1 = require("@type-dom/framework");
-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");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const use_id_1 = require("../../../hooks/use-id");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const event_1 = require("../../../constants/event");
+const constants_1 = require("../td-radio/constants");
+const use_form_item_1 = require("../td-form/hooks/use-form-item");
+const td_radio_group_const_1 = require("./td-radio-group.const");
+require("./style/index");
 class TdRadioGroup extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
         this.className = 'TdRadioGroup';
         this.attr.addObj({
-            name: 'td-radio-group'
-        });
-        this.style.addObj({
-            display: 'inline-flex',
-            alignItems: 'center',
-            flexWrap: 'wrap',
-            fontSize: '0',
-            marginRight: '12px',
+            name: 'td-radio-group',
         });
+        this.addEmits(td_radio_group_const_1.radioGroupEmits);
+        this.assignProps(td_radio_group_const_1.radioGroupProps);
         this.props = this.useParams(params);
     }
-    get resultValue() {
-        if (this.modelValue instanceof framework_1.XProxy) {
-            return this.modelValue.value;
-        }
-        else {
-            return this.modelValue;
-        }
-    }
     setup() {
+        var _a;
         const props = this.props;
-        if (props === null || props === void 0 ? void 0 : props.modelValue) {
-            this.modelValue = props.modelValue;
-            console.log('this.modelValue is is ', this.modelValue);
-        }
-        if (props === null || props === void 0 ? void 0 : props.options) {
-            this.setRadios(props.options);
-        }
-    }
-    setRadios(options) {
-        this.clearChildren();
-        const random = Math.random();
-        options.forEach((opt, index) => {
+        const emit = this.emit;
+        const ns = (0, use_namespace_1.useNamespace)('radio');
+        const radioId = (0, use_id_1.useId)();
+        // console.warn('radioId is ', radioId);
+        const radioGroupRef = (0, signals_1.signal)();
+        const { formItem } = (0, use_form_item_1.useFormItem)();
+        const { inputId: groupId, isLabeledByFormItem } = (0, use_form_item_1.useFormItemInputId)(props, {
+            formItemContext: formItem,
+        });
+        const changeEvent = (value) => {
+            emit(event_1.UPDATE_MODEL_EVENT, value);
+            (0, framework_1.nextTick)(() => emit(event_1.CHANGE_EVENT, value));
+        };
+        (0, framework_1.onMounted)(() => {
             var _a;
-            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 (this.props.isButton) {
-                radioObj = new td_radio_button_class_1.TdRadioButton(opt);
+            const radios = (_a = radioGroupRef.get()) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[type=radio]');
+            const firstLabel = radios === null || radios === void 0 ? void 0 : radios[0];
+            if (radios &&
+                !Array.from(radios).some((radio) => radio.checked) &&
+                firstLabel) {
+                firstLabel.tabIndex = 0;
             }
-            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 ((_a = this.props) === null || _a === void 0 ? void 0 : _a.disabled) {
-                radioObj.setDisabled(this.props.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 (opt instanceof td_radio_class_1.TdRadio) {
-                if (String(opt.inputOriginal.attr.get('value')) === String(value)) {
-                    // 设置选中样式
-                    opt.setChecked(true);
-                }
-                else {
-                    // 设置非选中样式
-                    opt.setChecked(false);
-                }
+        const name = (0, signals_1.computed)(() => {
+            return props.name || radioId.get();
+        });
+        (0, framework_1.provide)(constants_1.radioGroupKey, Object.assign(Object.assign({}, props), { changeEvent, name: name.get() }));
+        (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, () => {
+            if (props.validateEvent) {
+                formItem === null || formItem === void 0 ? void 0 : formItem.validate('change').catch((err) => (0, utils_1.debugWarn)(err));
             }
         });
+        this.assignProps({
+            refDom: radioGroupRef,
+        });
+        this.attr.addObj({
+            id: groupId,
+            class: ns.b('group'),
+            role: 'radiogroup',
+            ariaLabel: !isLabeledByFormItem.get()
+                ? props.ariaLabel || 'radio-group'
+                : undefined,
+            ariaLabelledby: isLabeledByFormItem.get() ? formItem === null || formItem === void 0 ? void 0 : formItem.labelId : undefined,
+        });
+        this.slotChildren(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
     }
 }
 exports.TdRadioGroup = TdRadioGroup;

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

@@ -0,0 +1,6 @@
+import { RadioGroupProps } from './td-radio-group.interface';
+export declare const radioGroupProps: RadioGroupProps;
+export declare const radioGroupEmits: {
+    "update:modelValue": (val: string | number | boolean | undefined) => val is string | number | boolean;
+    change: (val: string | number | boolean | undefined) => val is string | number | boolean;
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radioGroupEmits = exports.radioGroupProps = void 0;
+const td_radio_const_1 = require("../td-radio/td-radio.const");
+exports.radioGroupProps = {
+    fill: '',
+    textColor: '',
+    validateEvent: true,
+    // ...useAriaProps(['ariaLabel']),
+};
+exports.radioGroupEmits = td_radio_const_1.radioEmits;

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

@@ -1,12 +1,14 @@
-import { IJsonData, IPrimitive, ITypeConfig, ITypeDiv, XProxy } from '@type-dom/framework';
-import { ISize } from '../../../styles/size';
-import { ITdRadioConfig } from '../td-radio/td-radio.interface';
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
+import { MaybeRef } from '@type-dom/signals';
+import { ComponentSize } from '../../../constants/size';
+import { RadioProps } from '../td-radio/td-radio.interface';
+import { IPrimitive } from '@type-dom/utils';
 export interface ITdRadioGroup extends ITypeDiv {
     className: 'TdRadioGroup';
 }
-export interface ITdRadioGroupConfig extends ITypeConfig {
+export interface RadioGroupProps extends TypeDivProps {
     isButton?: boolean;
-    options?: ITdRadioConfig[];
+    options?: RadioProps[];
     /**
      * @description native `id` attribute
      */
@@ -14,7 +16,7 @@ export interface ITdRadioGroupConfig extends ITypeConfig {
     /**
      * @description the size of radio buttons or bordered radios
      */
-    size?: ISize;
+    size?: ComponentSize;
     /**
      * @description whether the nesting radios are disabled
      */
@@ -22,7 +24,7 @@ export interface ITdRadioGroupConfig extends ITypeConfig {
     /**
      * @description binding value
      */
-    modelValue?: IPrimitive | XProxy<IJsonData>;
+    modelValue?: MaybeRef<IPrimitive>;
     /**
      * @description border and background color when button is active
      */

package/src/components/form/td-rate/style/css.d.ts

@@ -0,0 +1,2 @@
+import '../../../base/style/css';
+import '@element-plus/theme-chalk/el-rate.css';

package/src/components/form/td-rate/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style/css");
+require("@element-plus/theme-chalk/el-rate.css");

package/src/components/form/td-rate/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../components/base/style';
+import '../../../../theme-chalk/rate.scss';

package/src/components/form/td-rate/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../components/base/style");
+require("../../../../theme-chalk/rate.scss");

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

@@ -0,0 +1,11 @@
+import { TypeDiv } from '@type-dom/framework';
+import { ITdRate, RateProps } from './td-rate.interface';
+import './style/index';
+export declare class TdRate extends TypeDiv implements ITdRate {
+    className: 'TdRate';
+    props: RateProps;
+    setCurrentValue?: (value: number, event?: MouseEvent) => void;
+    resetCurrentValue?: () => void;
+    constructor(params?: RateProps);
+    setup(): void;
+}