@type-dom/ui 0.1.1 → 0.1.2

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

@@ -19,13 +19,13 @@ class CheckboxOption extends framework_1.TypeSpan {
     setup() {
         this.input.addEvents({
             click: () => {
-                var _a, _b, _c, _d, _e, _f, _g;
-                console.log('this.input.dom click . ');
-                console.log('this.input.dom.value is ', (_a = this.input.dom) === null || _a === void 0 ? void 0 : _a.value);
-                const flag = (_b = this.parent) === null || _b === void 0 ? void 0 : _b.value.findIndex((item) => { var _a; return item === ((_a = this.input.dom) === null || _a === void 0 ? void 0 : _a.value); });
-                if ((_c = this.input.dom) === null || _c === void 0 ? void 0 : _c.checked) {
+                var _a, _b, _c, _d, _e, _f;
+                // console.log('this.input.dom click . ');
+                // console.log('this.input.dom.value is ', this.input.dom?.value);
+                const flag = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.value.findIndex((item) => { var _a; return item === ((_a = this.input.dom) === null || _a === void 0 ? void 0 : _a.value); });
+                if ((_b = this.input.dom) === null || _b === void 0 ? void 0 : _b.checked) {
                     if (flag === -1) {
-                        (_d = this.parent) === null || _d === void 0 ? void 0 : _d.value.push((_e = this.input.dom) === null || _e === void 0 ? void 0 : _e.value);
+                        (_c = this.parent) === null || _c === void 0 ? void 0 : _c.value.push((_d = this.input.dom) === null || _d === void 0 ? void 0 : _d.value);
                         this.input.attr.setObj({
                             checked: true,
                         });
@@ -34,7 +34,7 @@ class CheckboxOption extends framework_1.TypeSpan {
                 else {
                     this.input.attr.remove('checked');
                     if (flag && flag !== -1) {
-                        ((_f = this.parent) === null || _f === void 0 ? void 0 : _f.value) && ((_g = this.parent) === null || _g === void 0 ? void 0 : _g.value.splice(flag, 1));
+                        ((_e = this.parent) === null || _e === void 0 ? void 0 : _e.value) && ((_f = this.parent) === null || _f === void 0 ? void 0 : _f.value.splice(flag, 1));
                     }
                 }
             },

package/src/components/form/index.d.ts

@@ -6,8 +6,6 @@ export { FieldSelect } from './field-item/select/field-select.abstract';
 export { FieldSpan } from './field-item/span/field-span.abstract';
 export { FieldTextarea } from './field-item/textarea/field-textarea.abstract';
 export * from './field-item/field-item.interface';
-export { TdInputField } from './td-input/td-input-field.class';
-export type { ITdInputFieldConfig } from './td-input/td-input-field.interface';
 export { RadioGroup } from './radio-group/radio-group.class';
 export { RadioOption } from './radio-group/radio-option/radio-option.class';
 export { TdCheckbox } from './td-checkbox/td-checkbox.class';
@@ -21,6 +19,8 @@ export { TdFormItem } from './td-form-item/td-form-item.class';
 export type { ITdFormItem, ILabelPosition, } from './td-form-item/td-form-item.interface';
 export { TdInput } from './td-input/td-input.class';
 export type * from './td-input/td-input.interface';
+export { TdInputNumber } from './td-input-number/td-input-number.class';
+export type * from './td-input-number/td-input-number.interface';
 export { TdOption } from './td-option/td-option.class';
 export type * from './td-option/td-option.interface';
 export { TdOptionGroup } from './td-option-group/td-option-group.class';
@@ -39,3 +39,6 @@ export { TdSlider } from './td-slider/td-slider.class';
 export type * from './td-slider/td-slider.interface';
 export { TdSwitch } from './td-switch/td-switch.class';
 export type * from './td-switch/td-switch.interface';
+export { TdUpload } from './td-upload/td-upload.class';
+export type * from './td-upload/td-upload.interface';
+export * from './td-upload/td-upload.const';

package/src/components/form/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdSwitch = exports.TdSlider = exports.TdSelect = exports.TdRate = exports.TdRadioGroup = exports.TdRadioButton = exports.TdRadio = exports.TdOptionGroup = exports.TdOption = exports.TdInput = exports.TdFormItem = exports.TdForm = exports.TdCheckboxButton = exports.TdCheckboxGroup = exports.TdCheckbox = exports.RadioOption = exports.RadioGroup = exports.TdInputField = exports.FieldTextarea = exports.FieldSpan = exports.FieldSelect = exports.FieldRadio = exports.FieldInput = exports.CheckboxOption = exports.CheckboxGroup = void 0;
+exports.TdUpload = exports.TdSwitch = exports.TdSlider = exports.TdSelect = exports.TdRate = exports.TdRadioGroup = exports.TdRadioButton = exports.TdRadio = exports.TdOptionGroup = exports.TdOption = exports.TdInputNumber = exports.TdInput = exports.TdFormItem = exports.TdForm = exports.TdCheckboxButton = exports.TdCheckboxGroup = exports.TdCheckbox = exports.RadioOption = exports.RadioGroup = exports.FieldTextarea = exports.FieldSpan = exports.FieldSelect = exports.FieldRadio = exports.FieldInput = exports.CheckboxOption = exports.CheckboxGroup = void 0;
 const tslib_1 = require("tslib");
 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; } });
@@ -17,8 +17,6 @@ Object.defineProperty(exports, "FieldSpan", { enumerable: true, get: function ()
 var field_textarea_abstract_1 = require("./field-item/textarea/field-textarea.abstract");
 Object.defineProperty(exports, "FieldTextarea", { enumerable: true, get: function () { return field_textarea_abstract_1.FieldTextarea; } });
 tslib_1.__exportStar(require("./field-item/field-item.interface"), exports);
-var td_input_field_class_1 = require("./td-input/td-input-field.class");
-Object.defineProperty(exports, "TdInputField", { enumerable: true, get: function () { return td_input_field_class_1.TdInputField; } });
 var 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");
@@ -35,6 +33,8 @@ var td_form_item_class_1 = require("./td-form-item/td-form-item.class");
 Object.defineProperty(exports, "TdFormItem", { enumerable: true, get: function () { return td_form_item_class_1.TdFormItem; } });
 var td_input_class_1 = require("./td-input/td-input.class");
 Object.defineProperty(exports, "TdInput", { enumerable: true, get: function () { return td_input_class_1.TdInput; } });
+var td_input_number_class_1 = require("./td-input-number/td-input-number.class");
+Object.defineProperty(exports, "TdInputNumber", { enumerable: true, get: function () { return td_input_number_class_1.TdInputNumber; } });
 var td_option_class_1 = require("./td-option/td-option.class");
 Object.defineProperty(exports, "TdOption", { enumerable: true, get: function () { return td_option_class_1.TdOption; } });
 var td_option_group_class_1 = require("./td-option-group/td-option-group.class");
@@ -53,3 +53,6 @@ var td_slider_class_1 = require("./td-slider/td-slider.class");
 Object.defineProperty(exports, "TdSlider", { enumerable: true, get: function () { return td_slider_class_1.TdSlider; } });
 var td_switch_class_1 = require("./td-switch/td-switch.class");
 Object.defineProperty(exports, "TdSwitch", { enumerable: true, get: function () { return td_switch_class_1.TdSwitch; } });
+var td_upload_class_1 = require("./td-upload/td-upload.class");
+Object.defineProperty(exports, "TdUpload", { enumerable: true, get: function () { return td_upload_class_1.TdUpload; } });
+tslib_1.__exportStar(require("./td-upload/td-upload.const"), exports);

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

@@ -1,4 +1,4 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-autocomplete.css';
 import '@element-plus/components/input/style/css';
 import '@element-plus/components/scrollbar/style/css';

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-autocomplete.css");
 require("@element-plus/components/input/style/css");
 require("@element-plus/components/scrollbar/style/css");

package/src/components/form/td-checkbox/composables/use-checkbox-event.js

@@ -18,6 +18,7 @@ const framework_1 = require("@type-dom/framework");
 const signals_1 = require("@type-dom/signals");
 const utils_1 = require("@type-dom/utils");
 const use_form_item_1 = require("../../td-form/hooks/use-form-item");
+const event_1 = require("../../../../constants/event");
 const td_checkbox_const_1 = require("../td-checkbox.const");
 const useCheckboxEvent = (props, { model, isLimitExceeded, hasOwnLabel, isDisabled, isLabeledByFormItem, }) => {
     const checkboxGroup = (0, framework_1.inject)(td_checkbox_const_1.checkboxGroupContextKey, undefined);
@@ -30,11 +31,11 @@ const useCheckboxEvent = (props, { model, isLimitExceeded, hasOwnLabel, isDisabl
             : (_d = (_c = props.falseValue) !== null && _c !== void 0 ? _c : props.falseLabel) !== null && _d !== void 0 ? _d : false;
     }
     function emitChangeEvent(checked, e) {
-        console.warn('emitChangeEvent . checked is ', checked);
-        emit('change', getLabeledValue(checked), e);
+        // console.warn('emitChangeEvent . checked is ', checked);
+        emit(event_1.CHANGE_EVENT, getLabeledValue(checked), e);
     }
     function handleChange(e) {
-        console.warn('handleChange . ');
+        // console.warn('handleChange . ');
         if (isLimitExceeded.get()) {
             return;
         }
@@ -42,12 +43,12 @@ const useCheckboxEvent = (props, { model, isLimitExceeded, hasOwnLabel, isDisabl
             return;
         } // add by me
         const target = e === null || e === void 0 ? void 0 : e.target;
-        emit('change', getLabeledValue(target.checked), e);
+        emit(event_1.CHANGE_EVENT, getLabeledValue(target.checked), e);
     }
     function onClickRoot(e) {
         return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            console.warn('onClickRoot . ');
-            console.warn('onClickRoot . model.get() is ', model.get());
+            // console.warn('onClickRoot . ');
+            // console.warn('onClickRoot . model.get() is ', model.get());
             if (isLimitExceeded.get())
                 return;
             if (!hasOwnLabel.get() && !isDisabled.get() && isLabeledByFormItem.get()) {
@@ -63,7 +64,7 @@ const useCheckboxEvent = (props, { model, isLimitExceeded, hasOwnLabel, isDisabl
         });
     }
     const validateEvent = (0, signals_1.computed)(() => (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.validateEvent) || props.validateEvent);
-    (0, signals_1.watch)(() => (0, signals_1.unref)(props.modelValue), () => {
+    (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, () => {
         if (validateEvent.get()) {
             formItem === null || formItem === void 0 ? void 0 : formItem.validate('change').catch((err) => (0, utils_1.debugWarn)(err));
         }

package/src/components/form/td-checkbox/composables/use-checkbox-model.d.ts

@@ -1,6 +1,6 @@
 import { CheckboxProps } from '../td-checkbox.interface';
 export declare const useCheckboxModel: (props: CheckboxProps) => {
-    model: import("@type-dom/signals").Computed<unknown>;
+    model: import("@type-dom/signals").Computed<any>;
     isGroup: import("@type-dom/signals").Computed<boolean>;
     isLimitExceeded: import("@type-dom/signals").Signal<boolean>;
 };

package/src/components/form/td-checkbox/composables/use-checkbox-model.js

@@ -10,35 +10,32 @@ const useCheckboxModel = (props) => {
     const selfModel = (0, signals_1.signal)(false);
     const { emit } = (0, framework_1.getCurrentInstance)();
     const checkboxGroup = (0, framework_1.inject)(td_checkbox_const_1.checkboxGroupContextKey, undefined);
-    console.log('inject checkGroup is ', checkboxGroup);
+    // console.log('inject checkGroup is ', checkboxGroup);
     const isGroup = (0, signals_1.computed)(() => (0, utils_1.isUndefined)(checkboxGroup) === false);
     const isLimitExceeded = (0, signals_1.signal)(false);
-    const model = (0, signals_1.computed)({
-        get() {
-            var _a, _b, _c;
-            console.log('get model value isGroup is  ', isGroup.get());
-            return isGroup.get()
-                ? (_a = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.modelValue) === null || _a === void 0 ? void 0 : _a.get()
-                : // 这里的computed监听props.modelValue，与vuejs中的监听props.modelValue是不同的，
-                    // 因为vuejs中的监听props.modelValue，当props.modelValue变化时就会促发。
-                    // 而这里的computed监听，只有Signal类型的get/set才会触发
-                    //   所以这里还是用 vModel.get的方式。
-                    (_c = (_b = props.vModel) === null || _b === void 0 ? void 0 : _b.get()) !== null && _c !== void 0 ? _c : selfModel.get(); // : props.modelValue ?? selfModel.get();
-        },
-        set(val) {
-            var _a, _b;
-            console.log('set model value is ', val);
-            if (isGroup.get() && (0, utils_1.isArray)(val)) {
-                isLimitExceeded.set(((_a = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.max) === null || _a === void 0 ? void 0 : _a.get()) !== undefined &&
-                    val.length > checkboxGroup.max.get() &&
-                    val.length > model.get().length);
-                isLimitExceeded.get() === false && ((_b = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.changeEvent) === null || _b === void 0 ? void 0 : _b.call(checkboxGroup, val));
-            }
-            else {
-                emit(event_1.UPDATE_MODEL_EVENT, val);
-                selfModel.set(val);
-            }
-        },
+    const model = (0, signals_1.computed)(() => {
+        var _a, _b, _c;
+        // console.log('get model value isGroup is  ', isGroup.get());
+        return isGroup.get()
+            ? (_a = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.modelValue) === null || _a === void 0 ? void 0 : _a.get()
+            : // 这里的computed监听props.modelValue，与vuejs中的监听props.modelValue是不同的，
+                // 因为vuejs中的监听props.modelValue，当props.modelValue变化时就会促发。
+                // 而这里的computed监听，只有Signal类型的get/set才会触发
+                //   所以这里还是用 vModel.get的方式。
+                (_c = (_b = props.vModel) === null || _b === void 0 ? void 0 : _b.get()) !== null && _c !== void 0 ? _c : selfModel.get(); // : props.modelValue ?? selfModel.get();
+    }, (val) => {
+        var _a, _b;
+        // console.log('set model value is ', val);
+        if (isGroup.get() && (0, utils_1.isArray)(val)) {
+            isLimitExceeded.set(((_a = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.max) === null || _a === void 0 ? void 0 : _a.get()) !== undefined &&
+                val.length > checkboxGroup.max.get() &&
+                val.length > model.get().length);
+            isLimitExceeded.get() === false && ((_b = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.changeEvent) === null || _b === void 0 ? void 0 : _b.call(checkboxGroup, val));
+        }
+        else {
+            emit(event_1.UPDATE_MODEL_EVENT, val);
+            selfModel.set(val);
+        }
     });
     return {
         model,

package/src/components/form/td-checkbox/composables/use-checkbox-status.js

@@ -18,17 +18,18 @@ const useCheckboxStatus = (props, slots, { model }) => {
         return props.label;
     });
     const isChecked = (0, signals_1.computed)(() => {
+        // console.warn('computed isChecked . ');
         const value = model.get();
         if ((0, utils_1.isBoolean)(value)) {
             return value;
         }
         else if ((0, utils_1.isArray)(value)) {
-            console.warn('isChecked is array . ');
+            // console.warn('isChecked is array . ');
             if ((0, utils_1.isObject)(actualValue.get())) {
                 return value.map(signals_1.toRaw).some((o) => (0, utils_1.isEqual)(o, actualValue.get()));
             }
             else {
-                console.warn('computed value is ', value, ' toRaw is ', signals_1.toRaw);
+                // console.warn('computed value is ', value, ' toRaw is ', toRaw);
                 return value.map(signals_1.toRaw).includes(actualValue.get());
             }
         }

package/src/components/form/td-checkbox/composables/use-checkbox.d.ts

@@ -9,7 +9,7 @@ export declare const useCheckbox: (props: CheckboxProps, slots?: ISlots) => {
     checkboxButtonSize: import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
     checkboxSize: import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
     hasOwnLabel: import("@type-dom/signals").Computed<boolean>;
-    model: import("@type-dom/signals").Computed<unknown>;
+    model: import("@type-dom/signals").Computed<any>;
     actualValue: import("@type-dom/signals").Computed<string | number | boolean | object | undefined>;
     handleChange: (e?: Event) => void;
     onClickRoot: (e?: MouseEvent) => Promise<void>;

package/src/components/form/td-checkbox/composables/use-checkbox.js

@@ -12,7 +12,12 @@ const signals_1 = require("@type-dom/signals");
 const useCheckbox = (props, slots = {}) => {
     const { formItem: elFormItem } = (0, use_form_item_1.useFormItem)();
     const { model, isGroup, isLimitExceeded } = (0, use_checkbox_model_1.useCheckboxModel)(props);
-    console.log('isGroup is ', isGroup.get(), ' isLimitExceeded is ', isLimitExceeded.get());
+    // console.log(
+    //   'isGroup is ',
+    //   isGroup.get(),
+    //   ' isLimitExceeded is ',
+    //   isLimitExceeded.get()
+    // );
     const { isFocused, isChecked, checkboxButtonSize, checkboxSize, hasOwnLabel, actualValue, } = (0, use_checkbox_status_1.useCheckboxStatus)(props, slots, { model });
     const { isDisabled } = (0, use_checkbox_disabled_1.useCheckboxDisabled)({ model, isChecked });
     const { inputId, isLabeledByFormItem } = (0, use_form_item_1.useFormItemInputId)(props, {

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

@@ -21,7 +21,7 @@ class TdCheckbox extends framework_1.TypeHtml {
     }
     setup() {
         var _a;
-        console.warn('TdCheckbox setup');
+        // console.warn('TdCheckbox setup');
         const props = this.props;
         const slots = (0, framework_1.useSlots)();
         const { inputId, isLabeledByFormItem, isChecked, isDisabled, isFocused, checkboxSize, hasOwnLabel, model, actualValue, handleChange, onClickRoot, } = (0, use_checkbox_1.useCheckbox)(props, slots);
@@ -30,7 +30,7 @@ class TdCheckbox extends framework_1.TypeHtml {
             nodeName: !hasOwnLabel && isLabeledByFormItem ? 'span' : 'label',
         });
         const ns = (0, use_namespace_1.useNamespace)('checkbox');
-        console.warn('isChecked is ', isChecked);
+        // console.warn('isChecked is ', isChecked);
         const compKls = (0, signals_1.computed)(() => [
             ns.b(),
             ns.m(checkboxSize.get()),
@@ -72,11 +72,11 @@ class TdCheckbox extends framework_1.TypeHtml {
                     },
                     events: {
                         click: (ev) => {
-                            console.warn('td-checkbox input click . ');
+                            // console.warn('td-checkbox input click . ');
                             ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
                         },
                         change: (ev) => {
-                            console.warn('td-checkbox input change . ');
+                            // console.warn('td-checkbox input change . ');
                             handleChange(ev);
                             ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
                         },
@@ -116,15 +116,30 @@ class TdCheckbox extends framework_1.TypeHtml {
             click: onClickRoot,
         });
         // add by me todo why should add ???
+        // console.warn('then this.addEmits . ');
         this.addEmits({
             change: (newValue) => {
-                console.warn('change emit , newValue is ', newValue);
+                // console.warn('change emit , newValue is ', newValue);
+                // 应该根据newValue是否为选中状态判断来看是否要过滤。
                 const selected = model.get();
                 // todo 数组 还是 值
                 if ((0, utils_1.isArray)(selected)) {
-                    model.set(selected.includes(actualValue.get())
-                        ? selected.filter((item) => item !== actualValue.get())
-                        : [...selected, actualValue.get()]);
+                    // model.set(
+                    //   selected.includes(actualValue.get())
+                    //     ? selected.filter((item) => {
+                    //         if (newValue) {
+                    //           return true;
+                    //         } else {
+                    //           return item !== actualValue.get();
+                    //         }
+                    //       })
+                    //     : newValue ? [...selected, actualValue.get()] : [...selected]
+                    // );
+                    const value = actualValue.get();
+                    const shouldAdd = !selected.includes(value);
+                    model.set(shouldAdd
+                        ? newValue ? [...selected, value] : [...selected]
+                        : selected.filter(item => newValue || item !== value));
                 }
                 else {
                     model.set(newValue);

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

@@ -121,9 +121,16 @@ class TdCheckboxButton extends framework_1.TypeLabel {
                 const selected = model.get();
                 // todo 数组 还时 值
                 if ((0, utils_1.isArray)(selected)) {
-                    model === null || model === void 0 ? void 0 : model.set(selected.includes(actualValue.get())
-                        ? selected.filter((item) => item !== actualValue.get())
-                        : [...selected, actualValue.get()]);
+                    model.set(selected.includes(actualValue.get())
+                        ? selected.filter((item) => {
+                            if (newValue) {
+                                return true;
+                            }
+                            else {
+                                return item !== actualValue.get();
+                            }
+                        })
+                        : newValue ? [...selected, actualValue.get()] : [...selected]);
                 }
                 else {
                     model.set(newValue);

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

@@ -40,23 +40,20 @@ class TdCheckboxGroup extends framework_1.TypeHtml {
         });
         this.slotChildren(props.slot);
         const changeEvent = (value) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-            console.warn('td-check-group changeEvent, value is ', value);
+            // console.warn('td-check-group changeEvent, value is ', value);
             this.emit(event_1.UPDATE_MODEL_EVENT, value);
             yield (0, framework_1.nextTick)();
-            this.emit('change', value);
+            this.emit(event_1.CHANGE_EVENT, value);
         });
-        const modelValue = (0, signals_1.computed)({
-            get() {
-                var _a;
-                // return props.modelValue; // 无法触发监听
-                return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get();
-            },
-            set(val) {
-                console.warn('modelValue', val);
-                changeEvent(val);
-            },
+        const modelValue = (0, signals_1.computed)(() => {
+            var _a;
+            // return props.modelValue; // 无法触发监听
+            return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get();
+        }, (val) => {
+            // console.warn('modelValue', val);
+            changeEvent(val);
         });
-        console.log('then provide checkboxGroupContext . ');
+        // console.log('then provide checkboxGroupContext . ');
         this.provide(td_checkbox_const_1.checkboxGroupContextKey, Object.assign(Object.assign({}, (0, utils_1.pick)((0, signals_1.toRefs)(props), [
             'size',
             'min',

package/src/components/form/td-date-picker/composables/use-range-picker.d.ts

@@ -24,7 +24,7 @@ export declare const useRangePicker: (props: PanelRangeSharedProps, { defaultVal
         bm: (blockSuffix?: string, modifier?: string) => string;
         bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
         is: {
-            (name: string, state: boolean | undefined): string;
+            (name: string, state: boolean | "" | undefined): string;
             (name: string): string;
         };
         cssVar: (object: Record<string, string>) => Record<string, string>;
@@ -42,7 +42,7 @@ export declare const useRangePicker: (props: PanelRangeSharedProps, { defaultVal
         bm: (blockSuffix?: string, modifier?: string) => string;
         bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
         is: {
-            (name: string, state: boolean | undefined): string;
+            (name: string, state: boolean | "" | undefined): string;
             (name: string): string;
         };
         cssVar: (object: Record<string, string>) => Record<string, string>;

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

@@ -1,4 +1,4 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-date-picker.css';
 import '@element-plus/components/input/style/css';
 import '@element-plus/components/scrollbar/style/css';

package/src/components/form/td-date-picker/style/css.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-date-picker.css");
 require("@element-plus/components/input/style/css");
 require("@element-plus/components/scrollbar/style/css");

package/src/components/form/td-form/form-label-wrap/form-label-wrap.class.js

@@ -61,7 +61,7 @@ class FormLabelWrap extends framework_1.TypeFragment {
                 formContext === null || formContext === void 0 ? void 0 : formContext.registerLabelWidth(val, oldVal);
             }
         });
-        (0, framework_1.useResizeObserver)((0, signals_1.computed)(() => { var _a, _b; return ((_b = (_a = el.get()) === null || _a === void 0 ? void 0 : _a.firstElementChild) !== null && _b !== void 0 ? _b : null); }), updateLabelWidthFn);
+        (0, framework_1.useResizeObserver)((0, signals_1.computed)(() => { var _a; return ((_a = el.get()) === null || _a === void 0 ? void 0 : _a.firstElementChild); }), updateLabelWidthFn);
         if (!props.slot && !(slots === null || slots === void 0 ? void 0 : slots.default)) {
             return;
         }

package/src/components/form/td-form/hooks/use-form-common-props.d.ts

@@ -1,6 +1,6 @@
 import { MaybeRef } from '@type-dom/signals';
 import { ComponentSize } from '../../../../constants/size';
 export declare const useFormSize: (fallback?: MaybeRef<ComponentSize | undefined>, ignore?: Partial<Record<"prop" | "form" | "formItem" | "global", boolean>>) => import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
-export declare const useFormDisabled: (fallback?: MaybeRef<boolean>) => import("@type-dom/signals").Computed<boolean>;
+export declare const useFormDisabled: (fallback?: MaybeRef<boolean | undefined>) => import("@type-dom/signals").Computed<boolean>;
 export declare const useSize: (fallback?: MaybeRef<ComponentSize | undefined>, ignore?: Partial<Record<"prop" | "form" | "formItem" | "global", boolean>>) => import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
-export declare const useDisabled: (fallback?: MaybeRef<boolean>) => import("@type-dom/signals").Computed<boolean>;
+export declare const useDisabled: (fallback?: MaybeRef<boolean | undefined>) => import("@type-dom/signals").Computed<boolean>;

package/src/components/form/td-form/hooks/use-form-common-props.js

@@ -26,8 +26,9 @@ const useFormSize = (fallback, ignore = {}) => {
 exports.useFormSize = useFormSize;
 const useFormDisabled = (fallback) => {
     const disabled = (0, use_prop_1.useProp)('disabled');
+    // console.warn('disabled is ', disabled);
     const form = (0, framework_1.inject)(td_form_const_1.formContextKey, undefined);
-    return (0, signals_1.computed)(() => disabled.get() || (0, signals_1.unref)(fallback) || (0, signals_1.unref)(form === null || form === void 0 ? void 0 : form.disabled) || false);
+    return (0, signals_1.computed)(() => ((0, signals_1.unref)(disabled) || (0, signals_1.unref)(fallback) || (0, signals_1.unref)(form === null || form === void 0 ? void 0 : form.disabled) || false));
 };
 exports.useFormDisabled = useFormDisabled;
 // These exports are used for preventing breaking changes

package/src/components/form/td-form/hooks/use-form-item.d.ts

@@ -1,4 +1,4 @@
-import { Signal, Computed } from '@type-dom/signals';
+import { Signal, Computed, Ref } from '@type-dom/signals';
 import { FormContext, FormItemContext } from '../td-form.interface';
 export declare const useFormItem: () => {
     form: FormContext;
@@ -11,8 +11,8 @@ export type IUseFormItemInputCommonProps = {
 };
 export declare const useFormItemInputId: (props: Partial<IUseFormItemInputCommonProps>, { formItemContext, disableIdGeneration, disableIdManagement, }: {
     formItemContext?: FormItemContext;
-    disableIdGeneration?: Computed | Signal<string | boolean>;
-    disableIdManagement?: Computed<boolean> | Signal<boolean>;
+    disableIdGeneration?: Ref<string | boolean>;
+    disableIdManagement?: Ref<boolean>;
 }) => {
     isLabeledByFormItem: Computed<boolean>;
     inputId: Signal<string | undefined>;

package/src/components/form/td-form/hooks/use-form-item.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormItemInputId = exports.useFormItem = void 0;
 const signals_1 = require("@type-dom/signals");
 const framework_1 = require("@type-dom/framework");
-const td_form_const_1 = require("../td-form.const");
 const use_id_1 = require("../../../../hooks/use-id");
+const td_form_const_1 = require("../td-form.const");
 const useFormItem = () => {
     const form = (0, framework_1.inject)(td_form_const_1.formContextKey, undefined);
     const formItem = (0, framework_1.inject)(td_form_const_1.formItemContextKey, undefined);

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

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

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

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

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

@@ -30,7 +30,7 @@ export interface FormMetaProps {
     /**
      * @description Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component.
      */
-    disabled?: MaybeRef<boolean>;
+    disabled?: MaybeRef<boolean | undefined>;
 }
 export interface FormProps extends FormMetaProps, TypeFormProps {
     /**

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

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-form-item.css';

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

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

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

@@ -99,7 +99,7 @@ class TdFormItem extends framework_1.TypeDiv {
             return (props.for ||
                 (inputIds.get().length === 1 ? inputIds.get()[0] : undefined));
         });
-        console.error('labelFor', labelFor.get());
+        // console.error('labelFor', labelFor.get());
         const isGroup = (0, signals_1.computed)(() => {
             return !labelFor.get() && hasLabel.get();
         });
@@ -249,7 +249,7 @@ class TdFormItem extends framework_1.TypeDiv {
             isResettingField = false;
         });
         const addInputId = (id) => {
-            console.error('addInputId . ');
+            // console.error('addInputId . ');
             if (!inputIds.get().includes(id)) {
                 inputIds.get().push(id);
             }

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

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

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

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

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

@@ -6,7 +6,7 @@ const field_input_abstract_1 = require("../field-item/input/field-input.abstract
 class TdInputField extends field_input_abstract_1.FieldInput {
     constructor(params) {
         super(params.labelTitle, params.placeholder);
-        console.log('InputItem constructor . ');
+        // console.log('InputItem constructor . ');
         this.className = 'TdInputField';
         this.style.addObj({
             padding: '2px 10px 2px 0',