@type-dom/ui 0.1.1 → 0.1.3

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

@@ -1,287 +0,0 @@
-"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");
-const signals_1 = require("@type-dom/signals");
-class TdInputWrapper extends framework_1.TypeDiv {
-    constructor(params = {}) {
-        super();
-        this.className = 'TdInputWrapper';
-        this.parent = params === null || params === void 0 ? void 0 : params.parent;
-        this.style.addObj({
-            display: 'inline-flex',
-            flexGrow: 1,
-            alignItems: 'center',
-            justifyContent: 'center',
-            cursor: '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[(params === null || params === void 0 ? void 0 : params.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, params);
-        this.unshiftChild(this.prefix);
-        let placeholder = '';
-        if ((params === null || params === void 0 ? void 0 : params.placeholder) instanceof signals_1.Signal ||
-            (params === null || params === void 0 ? void 0 : params.placeholder) instanceof signals_1.Computed) {
-            placeholder = params.placeholder.get();
-        }
-        else if (params === null || params === void 0 ? void 0 : params.placeholder) {
-            placeholder = params.placeholder;
-        }
-        this.inner = new framework_1.Input({
-            attrObj: {
-                type: (params === null || params === void 0 ? void 0 : params.showPassword)
-                    ? (params === null || params === void 0 ? void 0 : params.passwordVisible)
-                        ? 'text'
-                        : 'password'
-                    : params === null || params === void 0 ? void 0 : params.type,
-                placeholder: placeholder,
-            },
-            styleObj: {
-                width: '100%',
-                flexGrow: 1,
-                fontSize: 'inherit',
-                padding: '0',
-                outline: 'none',
-                border: 'none',
-                background: 'none',
-                boxSizing: 'border-box',
-                WebkitAppearance: '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) => {
-                    console.log('td-input focus . this.parent is ', this.parent);
-                    // this.parent?.setFocus(true);
-                },
-                blur: () => {
-                    console.log('blur . ');
-                    // this.parent?.setFocus(false);
-                    if (this.props.clearable) {
-                        this.setShowClear(this.showClear);
-                    }
-                    if (this.props.showPassword) {
-                        this.setShowPassword(this.showPwdVisible);
-                    }
-                },
-                change: () => {
-                    console.log('change . ');
-                },
-                keydown: () => {
-                    console.log('keydown . ');
-                },
-            },
-        });
-        this.addChild(this.inner);
-        this.suffix = new suffix_1.TdInputSuffix(this, params);
-        this.addChild(this.suffix);
-        this.props = this.useParams(params);
-    }
-    setup() {
-        const props = this.props;
-        if (props === null || props === void 0 ? void 0 : props.prefix) {
-            //   todo
-        }
-        if (props === null || props === void 0 ? void 0 : props.size) {
-            this.style.addObj({
-                padding: td_input_style_1.$wrapperPadding[props.size || 'default'],
-                fontSize: td_input_style_1.$inputFontSize[props.size || 'default'],
-                height: td_input_style_1.$inputHeight[props.size || 'default'],
-            });
-        }
-        if (props === null || props === void 0 ? void 0 : props.disabled) {
-            this.setDisabled((0, signals_1.unref)(props.disabled));
-        }
-        this.setNativeInputValue();
-    }
-    get suffixVisible() {
-        return (!!this.suffix ||
-            !!this.props.suffixIcon ||
-            this.showClear ||
-            this.props.showPassword ||
-            this.isWordLimitVisible ||
-            (!!this.validateState && this.needStatusIcon));
-    }
-    get showClear() {
-        // console.error('compute showClear . this.props is ', this.props);
-        // console.log('!this.props.disabled is ', !this.props.disabled);
-        // console.log('!this.props.readonly is ', !this.props.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 (this.props.clearable &&
-            !this.props.disabled &&
-            !this.props.readonly &&
-            !!this.nativeInputValue // &&
-        // (this.parent?.isFocused || this.parent?.hovering)
-        );
-    }
-    get showPwdVisible() {
-        return (this.props.showPassword &&
-            !this.props.disabled &&
-            !this.props.readonly &&
-            !!this.nativeInputValue
-        // &&
-        // (!!this.nativeInputValue || this.parent?.isFocused)
-        );
-    }
-    get nativeInputValue() {
-        var _a;
-        return ((_a = this.inner.dom) === null || _a === void 0 ? void 0 : _a.value) || '';
-    }
-    set nativeInputValue(value) {
-        if (this.inner.dom) {
-            this.inner.dom.value = value;
-        }
-    }
-    setDisabled(disabled) {
-        if (disabled) {
-            this.inner.attr.setObj({ disabled: 'disabled' });
-            this.inner.style.setObj({
-                // color: var(--el-disabled-text-color),
-                color: var_1.$textColor.disabled,
-                // -webkit-text-fill-color: var(--el-disabled-text-color),
-                WebkitTextFillColor: var_1.$textColor.disabled,
-                cursor: 'not-allowed',
-            });
-        }
-        else {
-            this.inner.attr.remove('disabled');
-            this.inner.style.setObj({
-                // color: var(--el-text-color),
-                color: var_1.$textColor.regular,
-                // -webkit-text-fill-color: var(--el-text-color),
-                WebkitTextFillColor: var_1.$textColor.regular,
-                cursor: '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, _b, _c;
-        console.log('setShowClear . showClear is ', showClear);
-        this.suffix.style.show(this.suffixVisible ? 'inline-flex' : 'none');
-        (_c = (_b = (_a = this.suffix) === null || _a === void 0 ? void 0 : _a.clearIcon) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.show(showClear ? 'inline-flex' : 'none');
-    }
-    setShowPassword(showPassword) {
-        var _a, _b;
-        (_b = (_a = this.suffix.passwordIcon) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.show(showPassword ? 'inline-flex' : 'none');
-    }
-    setNativeInputValue() {
-        console.log('setNativeInputValue . ');
-        const input = this.inner;
-        const formatterValue = this.props.formatter
-            ? this.props.formatter(this.nativeInputValue)
-            : this.nativeInputValue;
-        if (!input || input.value === formatterValue)
-            return;
-        input.setValue(formatterValue);
-    }
-    handleInput(event, element) {
-        console.log('input . this is ', this);
-        // const [recordCursor, setCursor] = useCursor(element?.dom);
-        // recordCursor();
-        let { value } = event === null || event === void 0 ? void 0 : event.target;
-        if (this.props.formatter) {
-            value = this.props.parser ? this.props.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 (this.props.clearable) {
-            this.setShowClear(this.showClear);
-        }
-        if (this.props.showPassword) {
-            this.setShowPassword(this.showPwdVisible);
-        }
-    }
-}
-exports.TdInputWrapper = TdInputWrapper;

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

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

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

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

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

@@ -1,120 +0,0 @@
-"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(params = {}) {
-        super();
-        this.className = 'TextareaWrapper';
-        this.style.addObj({
-            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: (params === null || params === void 0 ? void 0 : params.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[(params === null || params === void 0 ? void 0 : params.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',
-                WebkitAppearance: '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) => {
-                    console.log('td-input focus . this.parent is ', this.parent);
-                    // this.parent?.setFocus(true);
-                },
-                blur: () => {
-                    console.log('blur . ');
-                    // this.parent?.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.props = this.useParams(params);
-    }
-    // todo
-    handleInput(event, element) {
-        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 (this.props.autosize) {
-            this.inner.style.setObj({
-                // 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-option/td-option.old.d.ts

@@ -1,8 +0,0 @@
-import { TypeLI } from '@type-dom/framework';
-import { ITdOption, TdOptionProps } from './td-option.interface';
-import './style/index';
-export declare class TdOption extends TypeLI implements ITdOption {
-    className: 'TdOption';
-    props: TdOptionProps;
-    constructor(params?: TdOptionProps);
-}

package/src/components/form/td-option/td-option.old.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdOption = void 0;
-const framework_1 = require("@type-dom/framework");
-const td_option_style_1 = require("./td-option.style");
-require("./style/index");
-class TdOption extends framework_1.TypeLI {
-    constructor(params = {}) {
-        super();
-        this.className = 'TdOption';
-        this.attr.addObj({
-            name: 'td-option',
-            role: 'option',
-        });
-        this.style.addObj(td_option_style_1.$selectDropdownItemStyle);
-        if (params.label) {
-            this.addChild(new framework_1.Span({
-                slot: params.label,
-            }));
-        }
-        this.props = this.useParams(params);
-    }
-}
-exports.TdOption = TdOption;

package/src/components/form/td-slider/td-slider-marker.d.ts

@@ -1,13 +0,0 @@
-import { TypeDivProps, TypeDiv, TypeNode } from '@type-dom/framework';
-import { IStyle } from '@type-dom/css-type';
-export interface ITdSliderMarkerConfig extends TypeDivProps {
-    mark: string | {
-        style: IStyle;
-        label: string | TypeNode;
-    };
-}
-export declare class TdSliderMarker extends TypeDiv {
-    className: 'TdSliderMarker';
-    props: ITdSliderMarkerConfig;
-    constructor(params: ITdSliderMarkerConfig);
-}

package/src/components/form/td-slider/td-slider-marker.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdSliderMarker = void 0;
-const framework_1 = require("@type-dom/framework");
-const utils_1 = require("@type-dom/utils");
-const td_slider_style_1 = require("./td-slider.style");
-class TdSliderMarker extends framework_1.TypeDiv {
-    constructor(params) {
-        super();
-        this.className = 'TdSliderMarker';
-        const label = (0, utils_1.isString)(params.mark) ? params.mark : params.mark.label;
-        this.style.addObj(td_slider_style_1.$sliderMarksTextStyle);
-        const style = (0, utils_1.isString)(params.mark) ? undefined : params.mark.style;
-        this.style.addObj(style);
-        this.slotChildren(label);
-        this.props = this.useParams(params);
-    }
-}
-exports.TdSliderMarker = TdSliderMarker;