@type-dom/ui 0.1.1 → 0.1.3

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

@@ -15,7 +15,7 @@ const use_cursor_1 = require("../../../hooks/use-cursor");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const use_form_item_1 = require("../td-form/hooks/use-form-item");
 const use_form_common_props_1 = require("../td-form/hooks/use-form-common-props");
-const utils_2 = require("./widget/utils");
+const utils_2 = require("./utils");
 const td_input_const_1 = require("./td-input.const");
 require("./style/index");
 class TdInput extends framework_1.TypeDiv {
@@ -26,14 +26,15 @@ class TdInput extends framework_1.TypeDiv {
         this.attr.addObj({
             name: 'td-input',
         });
-        this.assignProps(td_input_const_1.inputProps);
         this.addEmits(td_input_const_1.inputEmits);
+        this.assignProps(td_input_const_1.inputProps);
         this.props = this.useParams(params);
     }
     setup() {
+        var _a, _b;
         const props = this.props;
         const emit = this.emit;
-        // const rawAttrs = useRawAttrs()
+        const rawAttrs = (0, framework_1.useAttrs)();
         const attrs = (0, use_attrs_1.useAttrs)();
         const slots = (0, framework_1.useSlots)();
         const containerKls = (0, signals_1.computed)(() => [
@@ -52,7 +53,7 @@ class TdInput extends framework_1.TypeDiv {
                 [nsInput.bm('suffix', 'password-clear')]: showClear.get() && showPwdVisible.get(),
                 [nsInput.b('hidden')]: props.type === 'hidden',
             },
-            // rawAttrs.class,
+            rawAttrs === null || rawAttrs === void 0 ? void 0 : rawAttrs.class,
         ]);
         const wrapperKls = (0, signals_1.computed)(() => [
             nsInput.e('wrapper'),
@@ -91,12 +92,16 @@ class TdInput extends framework_1.TypeDiv {
         const validateIcon = (0, signals_1.computed)(() => validateState.get() &&
             svgs_1.ValidateComponentsMap[validateState.get()]);
         const passwordIcon = (0, signals_1.computed)(() => passwordVisible.get() ? new svgs_1.ElViewSvg() : new svgs_1.ElHideSvg());
-        // const containerStyle = computed(() => [
-        //   // rawAttrs.style,
-        // ])
-        const textareaStyle = (0, signals_1.computed)(() => Object.assign({}, props.inputStyle, textareaCalcStyle.get(), {
-            resize: props.resize,
-        }));
+        const containerStyle = (0, signals_1.computed)(() => [
+            rawAttrs === null || rawAttrs === void 0 ? void 0 : rawAttrs.style,
+        ]);
+        const textareaStyle = (0, signals_1.computed)(() => [
+            props.inputStyle,
+            textareaCalcStyle.get(),
+            {
+                resize: props.resize,
+            }
+        ]);
         const nativeInputValue = (0, signals_1.computed)(() => { var _a, _b; return (0, utils_1.isNil)((_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get()) ? '' : String((_b = props.vModel) === null || _b === void 0 ? void 0 : _b.get()); });
         const showClear = (0, signals_1.computed)(() => props.clearable &&
             !inputDisabled.get() &&
@@ -184,20 +189,23 @@ class TdInput extends framework_1.TypeDiv {
         // fix: https://github.com/element-plus/element-plus/issues/12074
         const onceInitSizeTextarea = createOnceInitResize(resizeTextarea);
         const setNativeInputValue = () => {
+            // console.warn('setNativeInputValue . ');
             const input = _ref.get();
             const formatterValue = props.formatter
                 ? props.formatter(nativeInputValue.get())
                 : nativeInputValue.get();
+            // console.warn('formatterValue is ', formatterValue);
             if (!input || input.value === formatterValue) {
                 return;
             }
             input.value = formatterValue;
         };
         const handleInput = (event) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            // console.warn('handleInput . event is ', event);
             recordCursor();
             let { value } = event === null || event === void 0 ? void 0 : event.target;
-            if (props.formatter) {
-                value = props.parser ? props.parser(value) : value;
+            if (props.formatter && props.parser) {
+                value = props.parser(value);
             }
             // should not emit input during composition
             // see: https://github.com/ElemeFE/element/issues/10516
@@ -211,7 +219,8 @@ class TdInput extends framework_1.TypeDiv {
                 return;
             }
             emit(event_1.UPDATE_MODEL_EVENT, value);
-            emit('input', value);
+            // console.warn('then emit(INPUT_EVENT) , value is ', value);
+            emit(event_1.INPUT_EVENT, value);
             // ensure native input value is controlled
             // see: https://github.com/ElemeFE/element/issues/12850
             yield (0, framework_1.nextTick)();
@@ -219,7 +228,11 @@ class TdInput extends framework_1.TypeDiv {
             setCursor();
         });
         const handleChange = (event) => {
-            emit('change', (event === null || event === void 0 ? void 0 : event.target).value);
+            let { value } = event === null || event === void 0 ? void 0 : event.target;
+            if (props.formatter && props.parser) {
+                value = props.parser(value);
+            }
+            emit(event_1.CHANGE_EVENT, value);
         };
         const { isComposing, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd, } = (0, use_composition_1.useComposition)({ emit: this.emit, afterComposition: handleInput });
         const handlePasswordVisible = () => {
@@ -232,28 +245,29 @@ class TdInput extends framework_1.TypeDiv {
         const blur = () => { var _a; return (_a = _ref.get()) === null || _a === void 0 ? void 0 : _a.blur(); };
         const handleMouseLeave = (evt) => {
             hovering.set(false);
-            // this.emit('mouseleave', evt); // todo 循环调用了
+            emit('mouseleave', evt); // todo 循环调用了
         };
         const handleMouseEnter = (evt) => {
             hovering.set(true);
-            // this.emit('mouseenter', evt); // todo 循环调用了
+            emit('mouseenter', evt); // todo 循环调用了
         };
         const handleKeydown = (evt) => {
-            // this.emit('keydown', evt); // todo 循环调用了
+            emit('keydown', evt); // todo 循环调用了
         };
         const select = () => {
             var _a;
             (_a = _ref.get()) === null || _a === void 0 ? void 0 : _a.select();
         };
         const clear = () => {
+            // console.warn('clear . ');
             emit(event_1.UPDATE_MODEL_EVENT, '');
-            emit('change', '');
+            emit(event_1.CHANGE_EVENT, '');
             emit('clear');
-            emit('input', '');
+            emit(event_1.INPUT_EVENT, '');
         };
         (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, () => {
             var _a;
-            (0, framework_1.nextTick)(() => { var _a; return (_a = this.resizeTextarea) === null || _a === void 0 ? void 0 : _a.call(this); });
+            (0, framework_1.nextTick)(() => resizeTextarea());
             if (props.validateEvent) {
                 (_a = elFormItem === null || elFormItem === void 0 ? void 0 : elFormItem.validate) === null || _a === void 0 ? void 0 : _a.call(elFormItem, 'change').catch((err) => (0, utils_1.debugWarn)(err));
             }
@@ -266,17 +280,16 @@ class TdInput extends framework_1.TypeDiv {
         // update DOM dependent value and styles
         // https://github.com/ElemeFE/element/issues/14857
         (0, signals_1.watch)(() => (0, signals_1.unref)(props.type), () => tslib_1.__awaiter(this, void 0, void 0, function* () {
-            var _a;
             yield (0, framework_1.nextTick)();
             setNativeInputValue();
-            (_a = this.resizeTextarea) === null || _a === void 0 ? void 0 : _a.call(this);
+            resizeTextarea();
         }));
         (0, framework_1.onMounted)(() => {
             if (!props.formatter && props.parser) {
                 (0, utils_1.debugWarn)('TdInput', 'If you set the parser, you also need to set the formatter.');
             }
             setNativeInputValue();
-            (0, framework_1.nextTick)(this.resizeTextarea);
+            (0, framework_1.nextTick)(resizeTextarea);
         });
         (0, framework_1.defineExpose)({
             /** @description HTML input element */
@@ -287,7 +300,7 @@ class TdInput extends framework_1.TypeDiv {
             ref: _ref,
             /** @description style of textarea. */
             textareaStyle,
-            /** @description from props (used on unit test) */
+            /** @description from props (used on unit test-dts) */
             autosize: (0, signals_1.toRef)(props, 'autosize'),
             /** @description is input composing */
             isComposing,
@@ -302,19 +315,14 @@ class TdInput extends framework_1.TypeDiv {
             /** @description resize textarea. */
             resizeTextarea,
         });
-        this.attr.addClass((0, signals_1.computed)(() => {
-            const cls = containerKls.get();
-            // console.log('cls is ', cls);
-            if (slots === null || slots === void 0 ? void 0 : slots.append) {
-                cls.push(nsInput.bm('group', 'append'));
-            }
-            if (slots === null || slots === void 0 ? void 0 : slots.prepend) {
-                cls.push(nsInput.bm('group', 'prepend'));
-            }
-            // console.warn('cls is ', cls);
-            return cls;
-        }));
-        // this.style.addObj(containerStyle);
+        this.attr.addClass([
+            containerKls,
+            {
+                [nsInput.bm('group', 'append')]: (_a = props.slots) === null || _a === void 0 ? void 0 : _a.append,
+                [nsInput.bm('group', 'prepend')]: (_b = props.slots) === null || _b === void 0 ? void 0 : _b.prepend,
+            },
+        ]);
+        this.style.addObj(containerStyle);
         this.addEvents({
             mouseenter: handleMouseEnter,
             mouseleave: handleMouseLeave,
@@ -339,9 +347,12 @@ class TdInput extends framework_1.TypeDiv {
                             new framework_1.Span({
                                 class: nsInput.e('prefix-inner'),
                                 slot: [
-                                    ...(0, framework_1.arraySlot)(slots === null || slots === void 0 ? void 0 : slots.prefix),
+                                    new framework_1.Fragment({
+                                        slot: slots === null || slots === void 0 ? void 0 : slots.prefix
+                                    }),
                                     new td_icon_class_1.TdIcon({
                                         vIf: props.prefixIcon,
+                                        class: nsInput.e('icon'),
                                         slot: props.prefixIcon,
                                     }),
                                 ],
@@ -349,19 +360,19 @@ class TdInput extends framework_1.TypeDiv {
                         ],
                     }),
                     new framework_1.Input({
-                        id: inputId.get(),
                         refDom: input,
                         class: nsInput.e('inner'),
+                        // v-bind="attrs" todo attr 到底对应什么 父组件的所有属性
                         attrObj: {
-                            // v-bind="attrs" todo attr 到底对应什么 父组件的所有属性
+                            id: inputId.get(),
                             minlength: props.minlength,
                             maxlength: props.maxlength,
-                            disabled: inputDisabled,
                             type: (0, signals_1.computed)(() => props.showPassword
                                 ? passwordVisible.get()
                                     ? 'text'
                                     : 'password'
                                 : props.type),
+                            disabled: inputDisabled,
                             readonly: props.readonly,
                             autocomplete: props.autocomplete,
                             tabindex: props.tabindex,
@@ -393,7 +404,9 @@ class TdInput extends framework_1.TypeDiv {
                                         !showPwdVisible.get() ||
                                         !isWordLimitVisible.get()),
                                     slot: [
-                                        ...(0, framework_1.arraySlot)(slots === null || slots === void 0 ? void 0 : slots.suffix),
+                                        new framework_1.Fragment({
+                                            slot: slots === null || slots === void 0 ? void 0 : slots.suffix,
+                                        }),
                                         new td_icon_class_1.TdIcon({
                                             vIf: props.suffixIcon,
                                             class: nsInput.e('icon'),
@@ -404,30 +417,29 @@ class TdInput extends framework_1.TypeDiv {
                                 new td_icon_class_1.TdIcon({
                                     vIf: showClear,
                                     class: [nsInput.e('icon'), nsInput.e('clear')],
-                                    slot: new svgs_1.ElCircleCloseSvg(),
                                     events: {
-                                        click: this.clear,
                                         mousedown: (evt) => {
                                             (0, utils_1.NOOP)();
                                             evt === null || evt === void 0 ? void 0 : evt.preventDefault();
                                         },
+                                        click: clear,
                                     },
+                                    slot: new svgs_1.ElCircleCloseSvg(),
                                 }),
                                 new td_icon_class_1.TdIcon({
                                     vIf: showPwdVisible,
                                     class: [nsInput.e('icon'), nsInput.e('password')],
-                                    // ToDo svg要变化的
-                                    slot: passwordIcon,
                                     events: {
                                         click: handlePasswordVisible,
                                     },
+                                    slot: passwordIcon,
                                 }),
                                 new framework_1.Span({
                                     vIf: isWordLimitVisible,
                                     class: nsInput.e('count'),
                                     slot: new framework_1.Span({
                                         class: nsInput.e('count-inner'),
-                                        slot: (0, signals_1.computed)(() => (textLength.get() + ' / ' + props.maxlength)), // todo 动态
+                                        slot: (0, signals_1.computed)(() => (textLength.get() + ' / ' + props.maxlength)),
                                     }),
                                 }),
                                 new td_icon_class_1.TdIcon({
@@ -437,9 +449,7 @@ class TdInput extends framework_1.TypeDiv {
                                         nsInput.e('validateIcon'),
                                         nsInput.is('loading', validateState.get() === 'validating'),
                                     ],
-                                    slot: validateIcon.get()
-                                        ? new (validateIcon.get())()
-                                        : undefined,
+                                    slot: validateIcon.get() && new (validateIcon.get())()
                                 }),
                             ],
                         }),
@@ -473,7 +483,6 @@ class TdInput extends framework_1.TypeDiv {
                     disabled: inputDisabled,
                     readonly: props.readonly,
                     autocomplete: props.autocomplete,
-                    // style: textareaStyle,
                     ariaLabel: props.ariaLabel,
                     placeholder: props.placeholder,
                     form: props.form,

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

@@ -1,5 +1,5 @@
 import { InputEnum, ITypeDiv, TypeDivProps, Span, TypeSvgSvg } from '@type-dom/framework';
-import { Computed, MaybeRef, Signal } from '@type-dom/signals';
+import { Computed, MaybeRef, Ref, Signal } from '@type-dom/signals';
 import { IStyle } from '@type-dom/css-type';
 import { ComponentSize } from '../../../constants/size';
 import { TdInput } from './td-input.class';
@@ -23,7 +23,7 @@ export interface TdInputProps extends TypeDivProps {
     /**
      * @description whether to disable
      */
-    disabled?: MaybeRef<boolean>;
+    disabled?: MaybeRef<boolean | undefined>;
     /**
      * @description binding value
      */
@@ -129,7 +129,7 @@ export interface TdInputProps extends TypeDivProps {
      */
     autofocus?: boolean;
     rows?: number;
-    vModel?: Signal<string> | Computed<string>;
+    vModel?: Ref<string | number | null | undefined>;
     prepend?: boolean;
     append?: boolean;
     prefix?: Span;

package/src/components/form/td-input/{widget/utils.js → utils.js}

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calcTextareaHeight = calcTextareaHeight;
+// import { isFirefox, isNumber } from '@element-plus/utils'
 const utils_1 = require("@type-dom/utils");
 let hiddenTextarea = undefined;
-const HIDDEN_STYLE = `
-  height:0 !important;
-  visibility:hidden !important;
-  ${utils_1.isFireFox ? '' : 'overflow:hidden !important;'}
-  position:absolute !important;
-  z-index:-1000 !important;
-  top:0 !important;
-  right:0 !important;
-`;
+const HIDDEN_STYLE = {
+    height: '0',
+    visibility: 'hidden',
+    overflow: (0, utils_1.isFirefox)() ? '' : 'hidden',
+    position: 'absolute',
+    'z-index': '-1000',
+    top: '0',
+    right: '0',
+};
 const CONTEXT_STYLE = [
     'letter-spacing',
     'line-height',
@@ -36,7 +37,10 @@ function calculateNodeStyling(targetElement) {
         Number.parseFloat(style.getPropertyValue('padding-top'));
     const borderSize = Number.parseFloat(style.getPropertyValue('border-bottom-width')) +
         Number.parseFloat(style.getPropertyValue('border-top-width'));
-    const contextStyle = CONTEXT_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join(';');
+    const contextStyle = CONTEXT_STYLE.map((name) => [
+        name,
+        style.getPropertyValue(name),
+    ]);
     return { contextStyle, paddingSize, borderSize, boxSizing };
 }
 function calcTextareaHeight(targetElement, minRows = 1, maxRows) {
@@ -46,7 +50,8 @@ function calcTextareaHeight(targetElement, minRows = 1, maxRows) {
         document.body.appendChild(hiddenTextarea);
     }
     const { paddingSize, borderSize, boxSizing, contextStyle } = calculateNodeStyling(targetElement);
-    hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
+    contextStyle.forEach(([key, value]) => hiddenTextarea === null || hiddenTextarea === void 0 ? void 0 : hiddenTextarea.style.setProperty(key, value));
+    Object.entries(HIDDEN_STYLE).forEach(([key, value]) => hiddenTextarea === null || hiddenTextarea === void 0 ? void 0 : hiddenTextarea.style.setProperty(key, value, 'important'));
     hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';
     let height = hiddenTextarea.scrollHeight;
     const result = {};

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { TypeDiv } from '@type-dom/framework';
+import { AnyFn } from '@type-dom/utils';
+import { InputNumberProps } from './td-input-number.interface';
+import './style/index';
+export declare class TdInputNumber extends TypeDiv implements TdInputNumber {
+    className: 'TdInputNumber';
+    props: InputNumberProps;
+    focus?: AnyFn;
+    blur?: AnyFn;
+    constructor(params?: InputNumberProps);
+    setup(): void;
+}