@type-dom/ui 0.0.10 → 0.1.1

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

@@ -15,11 +15,11 @@ class TdTextareaWrapper extends framework_1.TypeDiv {
             verticalAlign: 'bottom',
             // font-size: getCssVar('font-size', 'base'),
             fontSize: var_1.$fontSizes.base,
-            borderRadius: td_input_style_1.$input.borderRadius
+            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'
+                type: (params === null || params === void 0 ? void 0 : params.type) || 'text',
             },
             styleObj: {
                 position: 'relative',
@@ -58,7 +58,7 @@ class TdTextareaWrapper extends framework_1.TypeDiv {
                 borderRadius: td_input_style_1.$input.borderRadius,
                 //   transition: getCssVar('transition-box-shadow')
                 border: 'none',
-                outline: 'none' // add by me 2024-4-6
+                outline: 'none', // add by me 2024-4-6
             },
             events: {
                 compositionstart: () => {
@@ -78,25 +78,23 @@ class TdTextareaWrapper extends framework_1.TypeDiv {
                 },
                 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);
+                    // this.parent?.setFocus(true);
                 },
                 blur: () => {
-                    var _a;
                     console.log('blur . ');
-                    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.setFocus(false);
+                    // this.parent?.setFocus(false);
                 },
                 change: () => {
                     console.log('change . ');
                 },
                 keydown: () => {
                     console.log('keydown . ');
-                }
-            }
+                },
+            },
         });
         this.countSpan = new framework_1.Span({
-            styleObj: {}
+            styleObj: {},
         });
         this.addChildren(this.inner, this.countSpan);
         // this.childNodes = [this.inner, this.countSpan];
@@ -112,7 +110,7 @@ class TdTextareaWrapper extends framework_1.TypeDiv {
         if (this.props.autosize) {
             this.inner.style.setObj({
                 // height: 'auto',
-                height: this.inner.dom.scrollHeight + 'px'
+                height: this.inner.dom.scrollHeight + 'px',
             });
             // this.style.height = "auto";
             // this.style.height = this.scrollHeight + "px"; // 自动调整高度至内容所需的最小高度

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

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.calcTextareaHeight = calcTextareaHeight;
 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 !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',
@@ -27,7 +27,7 @@ const CONTEXT_STYLE = [
     'padding-left',
     'padding-right',
     'border-width',
-    'box-sizing'
+    'box-sizing',
 ];
 function calculateNodeStyling(targetElement) {
     const style = window.getComputedStyle(targetElement);

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

@@ -0,0 +1,3 @@
+import '@element-plus/components/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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@element-plus/components/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/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../components/base/style';
+import '../../../../components/form/td-input/style';
+import '../../../../theme-chalk/input-number.scss';

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,11 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdOption, ITdOptionConfig } from './td-option.interface';
-export declare class TdOption extends UI implements ITdOption {
+import { TypeLI } from '@type-dom/framework';
+import { Signal } from '@type-dom/signals';
+import { ITdOption, TdOptionProps } from './td-option.interface';
+import './style/index';
+export declare class TdOption extends TypeLI implements ITdOption {
     className: 'TdOption';
-    props: ITdOptionConfig;
-    constructor(params?: ITdOptionConfig);
+    props: TdOptionProps;
+    visible?: Signal<boolean>;
+    constructor(params?: TdOptionProps);
+    setup(): void;
 }

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

@@ -1,35 +1,92 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdOption = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-const td_select_style_1 = require("../td-select/td-select.style");
-class TdOption extends ui_abstract_1.UI {
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_id_1 = require("../../../hooks/use-id");
+const useOption_1 = require("./useOption");
+require("./style/index");
+class TdOption extends framework_1.TypeLI {
     constructor(params = {}) {
-        super(params, 'li');
+        super();
         this.className = 'TdOption';
         this.attr.addObj({
             name: 'td-option',
-            role: 'option'
-        });
-        this.style.addObj({
-            // font-size: map.get($select, 'font-size'),
-            fontSize: td_select_style_1.$select.fontSize, // $fontSizes.base,
-            // 20 as the padding of option item, 12 as the size of ✓ icon size
-            padding: '0 #{20 + 12}px 0 20px',
-            position: 'relative',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            // color: map.get($select-option, 'text-color'),
-            color: td_select_style_1.$selectOption.textColor,
-            // height: map.get($select-option, 'height'),
-            height: td_select_style_1.$selectOption.height,
-            // line-height: map.get($select-option, 'height'),
-            lineHeight: td_select_style_1.$selectOption.height,
-            boxSizing: 'border-box',
-            cursor: 'pointer'
+            role: 'option',
         });
         this.props = this.useParams(params);
     }
+    setup() {
+        var _a;
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('select');
+        const id = (0, use_id_1.useId)();
+        const containerKls = (0, signals_1.computed)(() => [
+            ns.be('dropdown', 'item'),
+            ns.is('disabled', (0, signals_1.unref)(isDisabled)),
+            ns.is('selected', (0, signals_1.unref)(itemSelected)),
+            ns.is('hovering', (0, signals_1.unref)(hover)),
+        ]);
+        const states = {
+            index: -1,
+            groupDisabled: false,
+            visible: true,
+            hover: false,
+        };
+        const { currentLabel, itemSelected, isDisabled, select, hoverItem, updateOption, } = (0, useOption_1.useOption)(props, states);
+        const { visible, hover } = (0, signals_1.toSignals)(states);
+        // todo
+        // const vm = getCurrentInstance().proxy as unknown as SelectOptionProxy
+        // select.onOptionCreate(vm);
+        (0, framework_1.onBeforeUnmount)(() => {
+            // const key = vm.value
+            // const { selected: selectedOptions } = select.states
+            // const doesSelected = selectedOptions.some((item) => {
+            //   return item.value === vm.value
+            // })
+            // // if option is not selected, remove it from cache
+            // nextTick(() => {
+            //   if (select.states.cachedOptions.get(key) === vm && !doesSelected) {
+            //     select.states.cachedOptions.delete(key)
+            //   }
+            // })
+            // select.onOptionDestroy(key, vm)
+        });
+        function selectOptionClick() {
+            if (!isDisabled.get()) {
+                // select.handleOptionSelect(vm)
+            }
+        }
+        this.assignProps({
+            vShow: visible,
+        });
+        this.attr.addObj({
+            id: id.get(),
+            class: containerKls,
+            role: 'option',
+            ariaDisabled: isDisabled.get() || undefined,
+            ariaSelected: itemSelected.get(),
+        });
+        this.addEvents({
+            mousemove: hoverItem,
+            click: (evt) => {
+                selectOptionClick(), evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+            },
+        });
+        this.slotChildren(props.slot ||
+            ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default) ||
+            new framework_1.Span({
+                slot: currentLabel,
+            }));
+        (0, framework_1.defineExpose)({
+            visible,
+            hover,
+            selectOptionClick,
+            states,
+            isDisabled,
+            select,
+        });
+    }
 }
 exports.TdOption = TdOption;

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

@@ -0,0 +1,7 @@
+"use strict";
+// import { ITdOption } from './td-option.interface';
+// export const   tdOptionProps: ITdOption = {
+//   /**
+//    * @description value of option
+//    */
+// }

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

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdOption extends IUI {
+import { ITypeLI, TypeLIProps } from '@type-dom/framework';
+export interface ITdOption extends ITypeLI {
     className: 'TdOption';
 }
-export interface ITdOptionConfig extends IUIConfig {
+export interface TdOptionProps extends TypeLIProps {
     /**
      * @description value of option
      *     required: true,

package/src/components/form/td-option/td-option.old.d.ts

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,24 @@
+"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-option/td-option.style.d.ts

@@ -0,0 +1,11 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $selectOption: {
+    textColor: string;
+    disabledColor: string;
+    height: string;
+    hoverBackground: string;
+    selectedTextColor: string;
+};
+export declare const $checkedIcon = "data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E";
+export declare const checkedIconStyle: IStyle;
+export declare const $selectDropdownItemStyle: IStyle;

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

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$selectDropdownItemStyle = exports.checkedIconStyle = exports.$checkedIcon = exports.$selectOption = void 0;
+const var_1 = require("../../../styles/var");
+const td_select_style_1 = require("../td-select/td-select.style");
+exports.$selectOption = {
+    // 'text-color': getCssVar('text-color-regular'),
+    textColor: var_1.$textColor.regular,
+    // 'disabled-color': getCssVar('text-color-placeholder'),
+    disabledColor: var_1.$textColor.placeholder,
+    height: '34px',
+    // 'hover-background': getCssVar('fill-color', 'light'),
+    hoverBackground: var_1.$fillColor.light,
+    // 'selected-text-color': getCssVar('color-primary'),
+    selectedTextColor: var_1.$colors.primary.base,
+};
+exports.$checkedIcon = "data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E";
+exports.checkedIconStyle = {
+    content: '',
+    position: 'absolute',
+    top: '50%',
+    right: '20px',
+    borderTop: 'none',
+    borderRight: 'none',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    // backgroundColor: map.get($select-option, 'selected-text-color'),
+    backgroundColor: exports.$selectOption.selectedTextColor,
+    mask: 'url(#' + exports.$checkedIcon + ') no-repeat',
+    maskSize: '100% 100%',
+    '-webkit-mask': 'url(#' + exports.$checkedIcon + ') no-repeat',
+    '-webkit-mask-size': '100% 100%',
+    transform: 'translateY(-50%)',
+    width: '12px',
+    height: '12px',
+};
+exports.$selectDropdownItemStyle = {
+    // font-size: map.get($select, 'font-size'),
+    fontSize: td_select_style_1.$select.fontSize,
+    // 20 as the padding of option item, 12 as the size of ✓ icon siz,
+    padding: '0 32px 0 20px',
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    // color: map.get($select-option, 'text-color'),
+    color: exports.$selectOption.textColor,
+    // height: map.get($select-option, 'height'),
+    height: exports.$selectOption.height,
+    // line-height: map.get($select-option, 'height'),
+    lineHeight: exports.$selectOption.height,
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+};
+//     @include when(hovering) {
+//       background-color: map.get($select-option, 'hover-background');
+//     }
+//
+//     @include when(selected) {
+//       color: map.get($select-option, 'selected-text-color');
+//       font-weight: bold;
+//     }
+//
+//     @include when(disabled) {
+//       color: map.get($select-option, 'disabled-color');
+//       cursor: not-allowed;
+//       background-color: unset;
+//     }
+//   }
+//
+//   @include when(multiple) {
+//     .#{$namespace}-select-dropdown__item.is-selected {
+//       &::after {
+//         @include checked-icon;
+//       }
+//     }
+//
+//     .#{$namespace}-select-dropdown__item.is-disabled {
+//       &::after {
+//         background-color: map.get($select-option, 'disabled-color');
+//       }
+//     }
+//   }
+// }

package/src/components/form/td-option/useOption.d.ts

@@ -0,0 +1,9 @@
+export declare function useOption(props: any, states: any): {
+    select: import("..").SelectContext | undefined;
+    currentLabel: import("@type-dom/signals").Computed<any>;
+    currentValue: import("@type-dom/signals").Computed<any>;
+    itemSelected: import("@type-dom/signals").Computed<boolean>;
+    isDisabled: import("@type-dom/signals").Computed<any>;
+    hoverItem: () => void;
+    updateOption: (query: string) => void;
+};

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

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOption = useOption;
+// @ts-nocheck
+// import { computed, getCurrentInstance, inject, toRaw, watch } from 'vue'
+const signals_1 = require("@type-dom/signals");
+const lodash_1 = require("lodash");
+const utils_1 = require("@type-dom/utils");
+const framework_1 = require("@type-dom/framework");
+const token_1 = require("../td-select/token");
+function useOption(props, states) {
+    // inject
+    const select = (0, framework_1.inject)(token_1.selectKey);
+    const selectGroup = (0, framework_1.inject)(token_1.selectGroupKey, { disabled: false });
+    // computed
+    const itemSelected = (0, signals_1.computed)(() => {
+        return contains((0, utils_1.ensureArray)(select.props.modelValue), props.value);
+    });
+    const limitReached = (0, signals_1.computed)(() => {
+        var _a;
+        if (select.props.multiple) {
+            const modelValue = (0, utils_1.ensureArray)((_a = select.props.modelValue) !== null && _a !== void 0 ? _a : []);
+            return (!itemSelected.value &&
+                modelValue.length >= select.props.multipleLimit &&
+                select.props.multipleLimit > 0);
+        }
+        else {
+            return false;
+        }
+    });
+    const currentLabel = (0, signals_1.computed)(() => {
+        return props.label || ((0, utils_1.isObject)(props.value) ? '' : props.value);
+    });
+    const currentValue = (0, signals_1.computed)(() => {
+        return props.value || props.label || '';
+    });
+    const isDisabled = (0, signals_1.computed)(() => {
+        return props.disabled || states.groupDisabled || limitReached.value;
+    });
+    const instance = (0, framework_1.getCurrentInstance)();
+    const contains = (arr = [], target) => {
+        if (!(0, utils_1.isObject)(props.value)) {
+            return arr && arr.includes(target);
+        }
+        else {
+            const valueKey = select.props.valueKey;
+            return (arr &&
+                arr.some((item) => {
+                    return (0, signals_1.toRaw)((0, lodash_1.get)(item, valueKey)) === (0, lodash_1.get)(target, valueKey);
+                }));
+        }
+    };
+    const hoverItem = () => {
+        if (!props.disabled && !selectGroup.disabled) {
+            select.states.hoveringIndex = select.optionsArray.indexOf(instance);
+        }
+    };
+    const updateOption = (query) => {
+        const regexp = new RegExp((0, utils_1.escapeStringRegexp)(query), 'i');
+        states.visible = regexp.test(currentLabel.value) || props.created;
+    };
+    (0, signals_1.watch)(() => currentLabel.get(), () => {
+        if (!props.created && !select.props.remote)
+            select.setSelected();
+    });
+    (0, signals_1.watch)(() => props.value, (val, oldVal) => {
+        if (!select)
+            return;
+        const { remote, valueKey } = select === null || select === void 0 ? void 0 : select.props;
+        if (val !== oldVal) {
+            select.onOptionDestroy(oldVal, instance);
+            select.onOptionCreate(instance);
+        }
+        if (!props.created && !remote) {
+            if (valueKey &&
+                (0, utils_1.isObject)(val) &&
+                (0, utils_1.isObject)(oldVal) &&
+                val[valueKey] === oldVal[valueKey]) {
+                return;
+            }
+            select.setSelected();
+        }
+    });
+    (0, signals_1.watch)(() => selectGroup.disabled, () => {
+        states.groupDisabled = selectGroup.disabled;
+    }, { immediate: true });
+    return {
+        select,
+        currentLabel,
+        currentValue,
+        itemSelected,
+        isDisabled,
+        hoverItem,
+        updateOption,
+    };
+}

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,8 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdOptionGroup, ITdOptionGroupConfig } from './td-option-group.interface';
-export declare class TdOptionGroup extends UI implements ITdOptionGroup {
+import { TypeUL } from '@type-dom/framework';
+import { ITdOptionGroup, OptionGroupProps } from './td-option-group.interface';
+export declare class TdOptionGroup extends TypeUL implements ITdOptionGroup {
     className: 'TdOptionGroup';
-    props: ITdOptionGroupConfig;
-    constructor(params?: ITdOptionGroupConfig);
+    props: OptionGroupProps;
+    constructor(params?: OptionGroupProps);
+    setup(): void;
 }