@type-dom/ui 0.0.1 → 0.0.3

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

@@ -0,0 +1,33 @@
+import { Div, Input, TypeDiv, TypeElement } from '@type-dom/framework';
+import { TdInput } from '../td-input.class';
+import { ITdInputConfig } from '../td-input.interface';
+import { ITdInputWrapper } from './td-input-wrapper.interface';
+import { TdInputSuffix } from './suffix';
+import { TdInputPrefix } from './prefix';
+export declare class TdInputWrapper extends TypeDiv implements ITdInputWrapper {
+    className: 'TdInputWrapper';
+    parent?: TdInput;
+    config?: ITdInputConfig;
+    prepend?: Div;
+    append?: Div;
+    prefix?: TdInputPrefix;
+    suffix: TdInputSuffix;
+    inner: Input;
+    private isComposing?;
+    passwordVisible?: boolean;
+    private isWordLimitVisible?;
+    private validateState?;
+    private needStatusIcon?;
+    constructor(config?: ITdInputConfig);
+    setConfig(config?: ITdInputConfig): void;
+    get suffixVisible(): boolean;
+    get showClear(): boolean | undefined;
+    get showPwdVisible(): boolean | undefined;
+    get nativeInputValue(): string;
+    set nativeInputValue(value: string);
+    setDisabled(disabled: boolean): void;
+    setShowClear(showClear: boolean | undefined): void;
+    setShowPassword(showPassword: boolean | undefined): void;
+    setNativeInputValue(): void;
+    handleInput(event?: Event, element?: TypeElement): void;
+}

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

@@ -0,0 +1,286 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdInputWrapper = void 0;
+const framework_1 = require("@type-dom/framework");
+const var_1 = require("../../../../styles/var");
+const td_input_style_1 = require("../td-input.style");
+const suffix_1 = require("./suffix");
+const prefix_1 = require("./prefix");
+class TdInputWrapper extends framework_1.TypeDiv {
+    constructor(config) {
+        super();
+        this.className = 'TdInputWrapper';
+        this.config = config;
+        this.parent = config === null || config === void 0 ? void 0 : config.parent;
+        this.addStyleObj({
+            display: 'inline-flex',
+            flexGrow: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: framework_1.StyleCursor.text,
+            transform: 'translate3d(0, 0, 0)',
+            // transform: 'translateZ(0)',
+            // padding: $border-width map.get($input-padding-horizontal, 'default')-$border-width,
+            padding: td_input_style_1.$wrapperPadding[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+            //   background-color: var(
+            //     #{getCssVarName('input-bg-color')},
+            //     map.get($input, 'bg-color')
+            // ),
+            backgroundColor: td_input_style_1.$input.bgColor,
+            backgroundImage: 'none',
+            //   border-radius: getCssVarWithDefault(
+            //     'input-border-radius',
+            //     map.get($input, 'border-radius')
+            //   ),
+            borderRadius: td_input_style_1.$input.borderRadius,
+            //   transition: getCssVar('transition-box-shadow'),
+            //       transition: var(--el-transition-box-shadow),
+            boxShadow: '0 0 0 1px ' + td_input_style_1.$input.borderColor + ' inset'
+        });
+        this.prefix = new prefix_1.TdInputPrefix(this, config);
+        this.unshiftChild(this.prefix);
+        let placeholder = '';
+        if ((config === null || config === void 0 ? void 0 : config.placeholder) instanceof framework_1.XProxy) {
+            placeholder = config.placeholder.value;
+        }
+        else if (config === null || config === void 0 ? void 0 : config.placeholder) {
+            placeholder = config.placeholder;
+        }
+        this.inner = new framework_1.Input({
+            attrObj: {
+                type: (config === null || config === void 0 ? void 0 : config.showPassword)
+                    ? (config === null || config === void 0 ? void 0 : config.passwordVisible)
+                        ? 'text'
+                        : 'password'
+                    : config === null || config === void 0 ? void 0 : config.type,
+                placeholder: placeholder ? placeholder : 'Please input'
+            },
+            styleObj: {
+                width: '100%',
+                flexGrow: 1,
+                fontSize: 'inherit',
+                padding: '0',
+                outline: 'none',
+                border: 'none',
+                background: 'none',
+                boxSizing: 'border-box',
+                '-webkit-appearance': 'none',
+                //   color: var(
+                //     #{getCssVarName('input-text-color')},
+                //     map.get($input, 'text-color')
+                // );
+                color: td_input_style_1.$inputTextColor,
+                //   height: getCssVar('input-inner-height');
+                height: td_input_style_1.$inputInnerHeight,
+                //   line-height: getCssVar('input-inner-height');
+                lineHeight: td_input_style_1.$inputInnerHeight
+            },
+            events: {
+                compositionstart: () => {
+                    console.log('compositionstart . ');
+                    this.isComposing = true;
+                },
+                compositionupdate: () => {
+                    console.log('compositionupdate . ');
+                },
+                compositionend: (event) => {
+                    console.log('compositionend . ');
+                    this.isComposing = false;
+                    if (this.isComposing) {
+                        this.isComposing = false;
+                        this.handleInput(event);
+                    }
+                },
+                input: (event, element) => this.handleInput(event, element),
+                focus: (i) => {
+                    var _a;
+                    console.log('td-input focus . this.parent is ', this.parent);
+                    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.setFocus(true);
+                },
+                blur: () => {
+                    var _a, _b, _c;
+                    console.log('blur . ');
+                    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.setFocus(false);
+                    if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.clearable) {
+                        this.setShowClear(this.showClear);
+                    }
+                    if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.showPassword) {
+                        this.setShowPassword(this.showPwdVisible);
+                    }
+                },
+                change: () => {
+                    console.log('change . ');
+                },
+                keydown: () => {
+                    console.log('keydown . ');
+                }
+            }
+        });
+        this.addChild(this.inner);
+        this.suffix = new suffix_1.TdInputSuffix(this, config);
+        this.addChild(this.suffix);
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        if (config === null || config === void 0 ? void 0 : config.prefix) {
+            //   todo
+        }
+        if (config === null || config === void 0 ? void 0 : config.size) {
+            this.addStyleObj({
+                padding: td_input_style_1.$wrapperPadding[config.size || 'default'],
+                fontSize: td_input_style_1.$inputFontSize[config.size || 'default'],
+                height: td_input_style_1.$inputHeight[config.size || 'default']
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.disabled) {
+            this.setDisabled(config.disabled);
+        }
+        this.setNativeInputValue();
+    }
+    get suffixVisible() {
+        var _a, _b;
+        return !!this.suffix ||
+            !!((_a = this.config) === null || _a === void 0 ? void 0 : _a.suffixIcon) ||
+            this.showClear ||
+            ((_b = this.config) === null || _b === void 0 ? void 0 : _b.showPassword) ||
+            this.isWordLimitVisible ||
+            (!!this.validateState && this.needStatusIcon);
+    }
+    get showClear() {
+        var _a, _b, _c, _d, _e;
+        // console.error('compute showClear . this.config is ', this.config);
+        // console.log('!this.config?.disabled is ', !this.config?.disabled);
+        // console.log('!this.config?.readonly is ', !this.config?.readonly);
+        // console.log('this.nativeInputValue is ', this.nativeInputValue);
+        // console.log('this.parent?.isFocused is ', this.parent?.isFocused);
+        // console.log('this.parent?.hovering is ', this.parent?.hovering);
+        return (((_a = this.config) === null || _a === void 0 ? void 0 : _a.clearable) &&
+            !((_b = this.config) === null || _b === void 0 ? void 0 : _b.disabled) &&
+            !((_c = this.config) === null || _c === void 0 ? void 0 : _c.readonly) &&
+            !!this.nativeInputValue &&
+            (((_d = this.parent) === null || _d === void 0 ? void 0 : _d.isFocused) || ((_e = this.parent) === null || _e === void 0 ? void 0 : _e.hovering)));
+    }
+    get showPwdVisible() {
+        var _a, _b, _c, _d;
+        return (((_a = this.config) === null || _a === void 0 ? void 0 : _a.showPassword) &&
+            !((_b = this.config) === null || _b === void 0 ? void 0 : _b.disabled) &&
+            !((_c = this.config) === null || _c === void 0 ? void 0 : _c.readonly) &&
+            !!this.nativeInputValue &&
+            (!!this.nativeInputValue || ((_d = this.parent) === null || _d === void 0 ? void 0 : _d.isFocused)));
+    }
+    get nativeInputValue() {
+        return this.inner.dom.value || '';
+    }
+    set nativeInputValue(value) {
+        this.inner.dom.value = value;
+    }
+    setDisabled(disabled) {
+        if (disabled) {
+            this.inner.setAttrObj({ disabled: 'disabled' });
+            this.inner.setStyleObj({
+                // color: var(--el-disabled-text-color),
+                color: var_1.$textColor.disabled,
+                // -webkit-text-fill-color: var(--el-disabled-text-color),
+                '-webkit-text-fill-color': var_1.$textColor.disabled,
+                cursor: framework_1.StyleCursor.notAllowed
+            });
+        }
+        else {
+            this.inner.removeAttribute('disabled');
+            this.inner.setStyleObj({
+                // color: var(--el-text-color),
+                color: var_1.$textColor.regular,
+                // -webkit-text-fill-color: var(--el-text-color),
+                '-webkit-text-fill-color': var_1.$textColor.regular,
+                cursor: framework_1.StyleCursor.text
+            });
+        }
+    }
+    // setFocus(isFocused: boolean) {
+    //   this.isFocused = isFocused;
+    //   if (isFocused) {
+    //     this.setStyleObj({
+    //       boxShadow: '0 0 0 1px ' + $input.focusBorderColor + ' inset',
+    //     });
+    //   } else {
+    //     this.setStyleObj({
+    //       boxShadow: '0 0 0 1px ' + $input.borderColor + ' inset',
+    //     });
+    //   }
+    // }
+    //
+    // setHovering(hovering: boolean) {
+    //   this.hovering = hovering;
+    //   if (hovering) {
+    //     if (!this.isFocused) {
+    //       this.setStyleObj({
+    //         boxShadow: '0 0 0 1px ' + $input.hoverBorderColor + ' inset',
+    //       });
+    //     }
+    //   } else {
+    //     if (!this.isFocused) {
+    //       this.setStyleObj({
+    //         boxShadow: '0 0 0 1px ' + $input.borderColor + ' inset',
+    //       });
+    //     }
+    //   }
+    // }
+    setShowClear(showClear) {
+        var _a;
+        console.log('setShowClear . showClear is ', showClear);
+        this.suffix.show(this.suffixVisible ? framework_1.StyleDisplay.inlineFlex : framework_1.StyleDisplay.none);
+        (_a = this.suffix.clearIcon) === null || _a === void 0 ? void 0 : _a.show(showClear ? framework_1.StyleDisplay.inlineFlex : framework_1.StyleDisplay.none);
+    }
+    setShowPassword(showPassword) {
+        var _a;
+        (_a = this.suffix.passwordIcon) === null || _a === void 0 ? void 0 : _a.show(showPassword ? framework_1.StyleDisplay.inlineFlex : framework_1.StyleDisplay.none);
+    }
+    setNativeInputValue() {
+        var _a;
+        console.log('setNativeInputValue . ');
+        const input = this.inner;
+        const formatterValue = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.formatter)
+            ? this.config.formatter(this.nativeInputValue)
+            : this.nativeInputValue;
+        if (!input || input.value === formatterValue)
+            return;
+        input.setValue(formatterValue);
+    }
+    handleInput(event, element) {
+        var _a, _b, _c, _d;
+        console.log('input . this is ', this);
+        const [recordCursor, setCursor] = (0, framework_1.useCursor)(element === null || element === void 0 ? void 0 : element.dom);
+        recordCursor();
+        let { value } = event === null || event === void 0 ? void 0 : event.target;
+        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.formatter) {
+            value = ((_b = this.config) === null || _b === void 0 ? void 0 : _b.parser) ? this.config.parser(value) : value;
+            console.log('parser value is ', value);
+        }
+        // should not emit input during composition
+        // see: https://github.com/ElemeFE/element/issues/10516
+        if (this.isComposing)
+            return;
+        // hack for https://github.com/ElemeFE/element/issues/8548
+        // should remove the following line when we don't support IE
+        // if (value === this.nativeInputValue) {
+        //   this.setNativeInputValue();
+        //   return;
+        // }
+        // emit(UPDATE_MODEL_EVENT, value)
+        // emit('input', value)
+        // ensure native input value is controlled
+        // see: https://github.com/ElemeFE/element/issues/12850
+        // await nextTick()
+        this.nativeInputValue = value;
+        this.setNativeInputValue();
+        setCursor();
+        console.log('handleInput then setShowClear . ');
+        if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.clearable) {
+            this.setShowClear(this.showClear);
+        }
+        if ((_d = this.config) === null || _d === void 0 ? void 0 : _d.showPassword) {
+            this.setShowPassword(this.showPwdVisible);
+        }
+    }
+}
+exports.TdInputWrapper = TdInputWrapper;

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

@@ -0,0 +1,4 @@
+import { ITypeDiv } from '@type-dom/framework';
+export interface ITdInputWrapper extends ITypeDiv {
+    className: 'TdInputWrapper';
+}

package/src/components/form/td-input/widget/td-input-wrapper.interface.js

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

package/src/components/form/td-input/widget/td-textarea-wrapper.d.ts

@@ -0,0 +1,13 @@
+import { Span, Textarea, TypeDiv, TypeElement } from '@type-dom/framework';
+import { ITdInputConfig } from '../td-input.interface';
+import { TdInput } from '../td-input.class';
+export declare class TdTextareaWrapper extends TypeDiv {
+    className: 'TextareaWrapper';
+    inner: Textarea;
+    countSpan: Span;
+    config?: ITdInputConfig;
+    parent?: TdInput;
+    private isComposing?;
+    constructor(config?: ITdInputConfig);
+    handleInput(event?: Event, element?: TypeElement): void;
+}

package/src/components/form/td-input/widget/td-textarea-wrapper.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdTextareaWrapper = void 0;
+const framework_1 = require("@type-dom/framework");
+const var_1 = require("../../../../styles/var");
+const td_input_style_1 = require("../td-input.style");
+class TdTextareaWrapper extends framework_1.TypeDiv {
+    constructor(config) {
+        super();
+        this.className = 'TextareaWrapper';
+        this.addStyleObj({
+            position: 'relative',
+            display: 'inline-block',
+            width: '100%',
+            verticalAlign: 'bottom',
+            // font-size: getCssVar('font-size', 'base'),
+            fontSize: var_1.$fontSizes.base,
+            borderRadius: td_input_style_1.$input.borderRadius
+        });
+        this.inner = new framework_1.Textarea({
+            attrObj: {
+                type: (config === null || config === void 0 ? void 0 : config.type) || 'text'
+            },
+            styleObj: {
+                position: 'relative',
+                display: 'block',
+                resize: 'vertical',
+                // padding: 5px map.get($input-padding-horizontal, 'default')-$border-width,
+                padding: '5px ' + td_input_style_1.$inputPaddingHorizontal[(config === null || config === void 0 ? void 0 : config.size) || 'default'] + 'px',
+                lineHeight: '1.5',
+                boxSizing: 'border-box',
+                width: '100%',
+                fontSize: 'inherit',
+                fontFamily: 'inherit',
+                //   color: var(
+                //     #{getCssVarName('input-text-color')},
+                //     map.get($input, 'text-color')
+                // );
+                color: td_input_style_1.$inputTextColor,
+                //   background-color: var(
+                //     #{getCssVarName('input-bg-color')},
+                //     map.get($input, 'bg-color')
+                // );
+                backgroundColor: td_input_style_1.$input.bgColor,
+                backgroundImage: 'none',
+                '-webkit-appearance': 'none',
+                // @include inset-input-border(
+                //   var(
+                //     #{getCssVarName('input-border-color')},
+                //     map.get($input, 'border-color')
+                // )
+                // )
+                boxShadow: '0 0 0 1px ' + td_input_style_1.$input.borderColor + ' inset',
+                //   border-radius: getCssVarWithDefault(
+                //     'input-border-radius',
+                //     map.get($input, 'border-radius')
+                //   );
+                borderRadius: td_input_style_1.$input.borderRadius,
+                //   transition: getCssVar('transition-box-shadow')
+                border: 'none',
+                outline: 'none' // add by me 2024-4-6
+            },
+            events: {
+                compositionstart: () => {
+                    console.log('compositionstart . ');
+                    this.isComposing = true;
+                },
+                compositionupdate: () => {
+                    console.log('compositionupdate . ');
+                },
+                compositionend: (event) => {
+                    console.log('compositionend . ');
+                    this.isComposing = false;
+                    if (this.isComposing) {
+                        this.isComposing = false;
+                        this.handleInput(event);
+                    }
+                },
+                input: (event, element) => this.handleInput(event, element),
+                focus: (i) => {
+                    var _a;
+                    console.log('td-input focus . this.parent is ', this.parent);
+                    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.setFocus(true);
+                },
+                blur: () => {
+                    var _a;
+                    console.log('blur . ');
+                    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.setFocus(false);
+                },
+                change: () => {
+                    console.log('change . ');
+                },
+                keydown: () => {
+                    console.log('keydown . ');
+                }
+            }
+        });
+        this.countSpan = new framework_1.Span({
+            styleObj: {}
+        });
+        this.addChildren(this.inner, this.countSpan);
+        // this.childNodes = [this.inner, this.countSpan];
+        this.setConfig(config);
+    }
+    // todo
+    handleInput(event, element) {
+        var _a;
+        console.log('input . this is ', this);
+        // should not emit input during composition
+        // see: https://github.com/ElemeFE/element/issues/10516
+        if (this.isComposing)
+            return;
+        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.autosize) {
+            this.inner.setStyleObj({
+                // height: 'auto',
+                height: this.inner.dom.scrollHeight + 'px'
+            });
+            // this.style.height = "auto";
+            // this.style.height = this.scrollHeight + "px"; // 自动调整高度至内容所需的最小高度
+        }
+    }
+}
+exports.TdTextareaWrapper = TdTextareaWrapper;

package/src/components/form/td-input/widget/utils.d.ts

@@ -0,0 +1,6 @@
+type TextAreaHeight = {
+    height: string;
+    minHeight?: string;
+};
+export declare function calcTextareaHeight(targetElement: HTMLTextAreaElement, minRows?: number, maxRows?: number): TextAreaHeight;
+export {};

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calcTextareaHeight = void 0;
+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 CONTEXT_STYLE = [
+    'letter-spacing',
+    'line-height',
+    'padding-top',
+    'padding-bottom',
+    'font-family',
+    'font-weight',
+    'font-size',
+    'text-rendering',
+    'text-transform',
+    'width',
+    'text-indent',
+    'padding-left',
+    'padding-right',
+    'border-width',
+    'box-sizing'
+];
+function calculateNodeStyling(targetElement) {
+    const style = window.getComputedStyle(targetElement);
+    const boxSizing = style.getPropertyValue('box-sizing');
+    const paddingSize = Number.parseFloat(style.getPropertyValue('padding-bottom')) +
+        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(';');
+    return { contextStyle, paddingSize, borderSize, boxSizing };
+}
+function calcTextareaHeight(targetElement, minRows = 1, maxRows) {
+    var _a;
+    if (!hiddenTextarea) {
+        hiddenTextarea = document.createElement('textarea');
+        document.body.appendChild(hiddenTextarea);
+    }
+    const { paddingSize, borderSize, boxSizing, contextStyle } = calculateNodeStyling(targetElement);
+    hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
+    hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';
+    let height = hiddenTextarea.scrollHeight;
+    const result = {};
+    if (boxSizing === 'border-box') {
+        height = height + borderSize;
+    }
+    else if (boxSizing === 'content-box') {
+        height = height - paddingSize;
+    }
+    hiddenTextarea.value = '';
+    const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+    if ((0, utils_1.isNumber)(minRows)) {
+        let minHeight = singleRowHeight * minRows;
+        if (boxSizing === 'border-box') {
+            minHeight = minHeight + paddingSize + borderSize;
+        }
+        height = Math.max(minHeight, height);
+        result.minHeight = `${minHeight}px`;
+    }
+    if ((0, utils_1.isNumber)(maxRows)) {
+        let maxHeight = singleRowHeight * maxRows;
+        if (boxSizing === 'border-box') {
+            maxHeight = maxHeight + paddingSize + borderSize;
+        }
+        height = Math.min(maxHeight, height);
+    }
+    result.height = `${height}px`;
+    (_a = hiddenTextarea.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(hiddenTextarea);
+    hiddenTextarea = undefined;
+    return result;
+}
+exports.calcTextareaHeight = calcTextareaHeight;

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

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