@type-dom/ui 0.1.1 → 0.1.3

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

@@ -14,18 +14,27 @@ const td_select_dropdown_class_1 = require("./td-select-dropdown/td-select-dropd
 const td_select_const_1 = require("./td-select.const");
 const token_1 = require("./token");
 const useSelect_1 = require("./useSelect");
+const td_options_class_1 = require("./td-options/td-options.class");
 require("./style");
 class TdSelect extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
         this.className = 'TdSelect';
+        this.addEmits(td_select_const_1.selectEmits);
         this.assignProps(td_select_const_1.selectProps);
         this.props = this.useParams(params);
     }
     setup() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        console.log('TdSelect setup. ');
+        const props = this.props;
+        const emit = this.emit;
         const modelValue = (0, signals_1.computed)(() => {
-            const { modelValue: rawModelValue, multiple } = props;
+            var _a;
+            // const { modelValue: rawModelValue, multiple } = props;
+            const rawModelValue = (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get();
+            const multiple = props.multiple;
+            console.warn('rawModelValue is ', rawModelValue);
             const fallback = multiple ? [] : undefined;
             // When it is array, we check if this is multi-select.
             // Based on the result we get
@@ -34,15 +43,15 @@ class TdSelect extends framework_1.TypeDiv {
             }
             return multiple ? fallback : rawModelValue;
         });
-        const props = this.props;
-        const API = (0, useSelect_1.useSelect)(props, this.emit);
+        const _props = Object.assign(Object.assign({}, (0, signals_1.toRefs)(props)), { modelValue: modelValue });
+        const API = (0, useSelect_1.useSelect)(_props, emit);
         const { nsSelect, nsInput, states } = API;
         const { calculatorRef, inputStyle } = (0, use_calc_input_width_1.useCalcInputWidth)();
         (0, framework_1.provide)(token_1.selectKey, 
         // reactive(
         {
-            props: props,
-            states: API.states,
+            props: _props,
+            states: states,
             optionsArray: API.optionsArray.get(),
             handleOptionSelect: API.handleOptionSelect,
             onOptionCreate: API.onOptionCreate,
@@ -50,24 +59,25 @@ class TdSelect extends framework_1.TypeDiv {
             selectRef: API.selectRef,
             setSelected: API.setSelected,
         });
-        const selectedLabel = (0, signals_1.computed)(() => {
+        this.selectedLabel = (0, signals_1.computed)(() => {
             if (!props.multiple) {
-                return API.states.selectedLabel;
+                return (0, signals_1.unref)(states.selectedLabel);
             }
-            return API.states.selected.map((i) => i.currentLabel);
+            return states.selected.map((i) => { var _a; return (_a = i.currentLabel) === null || _a === void 0 ? void 0 : _a.get(); });
         });
         this.assignProps({
             refDom: API.selectRef,
             //  v-click-outside:[popperRef]="handleClickOutside"
         });
         this.attr.addClass((0, signals_1.computed)(() => [nsSelect.b(), nsSelect.m(API.selectSize.get())]));
+        console.warn('API.mouseEnterEventName.get() is ', API.mouseEnterEventName.get());
         this.addEmits({
-            [API.mouseEnterEventName.get()]: () => (API.states.inputHovering = true),
-            mouseleave: () => (API.states.inputHovering = false),
+            [API.mouseEnterEventName.get()]: () => (states.inputHovering = true),
+            mouseleave: () => (states.inputHovering = false),
         });
         this.addChild(new td_tooltip_class_1.TdTooltip({
             refEl: API.tooltipRef,
-            // visible: API.dropdownMenuVisible, // TODO not show ???
+            visible: API.dropdownMenuVisible,
             placement: props.placement,
             teleported: props.teleported,
             popperClass: [nsSelect.e('popper'), props.popperClass],
@@ -85,19 +95,20 @@ class TdSelect extends framework_1.TypeDiv {
             offset: props.offset,
             emits: {
                 beforeShow: API.handleMenuEnter,
-                hide: () => (API.states.isBeforeHide = false),
+                hide: () => (states.isBeforeHide = false),
             },
             slot: new framework_1.Div({
                 refDom: API.wrapperRef,
                 class: [
                     nsSelect.e('wrapper'),
                     nsSelect.is('focused', API.isFocused.get()),
-                    nsSelect.is('hovering', API.states.inputHovering),
+                    nsSelect.is('hovering', states.inputHovering),
                     nsSelect.is('filterable', props.filterable),
-                    nsSelect.is('disabled', API.selectDisabled.get()),
+                    nsSelect.is('disabled', (0, signals_1.unref)(API.selectDisabled)),
                 ],
                 events: {
                     click: (evt) => {
+                        console.warn('click . ');
                         API.toggleMenu();
                         evt === null || evt === void 0 ? void 0 : evt.preventDefault();
                     },
@@ -116,104 +127,110 @@ class TdSelect extends framework_1.TypeDiv {
                             nsSelect.e('selection'),
                             nsSelect.is('near', props.multiple &&
                                 !((_b = props.slots) === null || _b === void 0 ? void 0 : _b.prefix) &&
-                                !!API.states.selected.length),
+                                !!states.selected.length),
                         ],
                         slot: [
-                            new framework_1.Fragment({
-                                vIf: props.multiple,
-                                slot: [
-                                    new framework_1.For({
-                                        data: API.showTagList,
-                                        getter: (item) => {
-                                            var _a, _b;
-                                            return new framework_1.Div({
-                                                // key: API.getValueKey(item),
-                                                class: nsSelect.e('selected-item'),
-                                                slot: new td_tag_class_1.TdTag({
-                                                    closable: !API.selectDisabled && !item.isDisabled,
-                                                    size: API.collapseTagSize.get(),
-                                                    type: props.tagType,
-                                                    effect: props.tagEffect,
-                                                    disableTransitions: true,
-                                                    // style: API.tagStyle.get(),
-                                                    events: {
-                                                        close: (evt) => {
-                                                            API.deleteTag(evt, item);
+                            props.multiple
+                                ? new framework_1.Fragment({
+                                    slot: (_d = (_c = props.slots) === null || _c === void 0 ? void 0 : _c.tag) !== null && _d !== void 0 ? _d : [
+                                        new framework_1.For({
+                                            data: API.showTagList,
+                                            getter: (item) => {
+                                                var _a, _b, _c;
+                                                return new framework_1.Div({
+                                                    // key: API.getValueKey(item),
+                                                    class: nsSelect.e('selected-item'),
+                                                    slot: new td_tag_class_1.TdTag({
+                                                        closable: !API.selectDisabled && !item.isDisabled,
+                                                        size: API.collapseTagSize.get(),
+                                                        type: props.tagType,
+                                                        effect: props.tagEffect,
+                                                        disableTransitions: true,
+                                                        styleObj: API.tagStyle.get(),
+                                                        emits: {
+                                                            close: (evt) => {
+                                                                API.deleteTag(evt, item);
+                                                            },
                                                         },
-                                                    },
-                                                    slot: new framework_1.Span({
-                                                        class: nsSelect.e('tags-text'),
-                                                        slot: (_b = (_a = props.slots) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : item.currentLabel,
+                                                        slot: new framework_1.Span({
+                                                            class: nsSelect.e('tags-text'),
+                                                            slot: (_c = (_b = (_a = props.slots) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.call(_a, item.currentLabel, item.value)) !== null && _c !== void 0 ? _c : item.currentLabel,
+                                                        }),
                                                     }),
-                                                }),
-                                            });
-                                        },
-                                    }),
-                                    new td_tooltip_class_1.TdTooltip({
-                                        vIf: props.collapseTags &&
-                                            API.states.selected.length > props.maxCollapseTags,
-                                        refEl: API.tagTooltipRef,
-                                        disabled: API.dropdownMenuVisible || !props.collapseTagsTooltip,
-                                        fallbackPlacements: ['bottom', 'top', 'right', 'left'],
-                                        effect: props.effect,
-                                        placement: 'bottom',
-                                        teleported: props.teleported,
-                                        slots: {
-                                            default: new framework_1.Div({
-                                                refDom: API.collapseItemRef,
-                                                class: nsSelect.e('selected-item'),
-                                                slot: new td_tag_class_1.TdTag({
-                                                    closable: false,
-                                                    size: API.collapseTagSize.get(),
-                                                    type: props.tagType,
-                                                    effect: props.tagEffect,
-                                                    disableTransitions: true,
-                                                    styleObj: API.collapseTagStyle.get(),
-                                                    slot: new framework_1.Span({
-                                                        class: nsSelect.e('tags-text'),
-                                                        slot: `+${API.states.selected.length -
-                                                            props.maxCollapseTags}`,
+                                                });
+                                            },
+                                        }),
+                                        new td_tooltip_class_1.TdTooltip({
+                                            vIf: props.collapseTags &&
+                                                states.selected.length > props.maxCollapseTags,
+                                            refEl: API.tagTooltipRef,
+                                            disabled: API.dropdownMenuVisible ||
+                                                !props.collapseTagsTooltip,
+                                            fallbackPlacements: [
+                                                'bottom',
+                                                'top',
+                                                'right',
+                                                'left',
+                                            ],
+                                            effect: props.effect,
+                                            placement: 'bottom',
+                                            teleported: props.teleported,
+                                            slots: {
+                                                default: new framework_1.Div({
+                                                    refDom: API.collapseItemRef,
+                                                    class: nsSelect.e('selected-item'),
+                                                    slot: new td_tag_class_1.TdTag({
+                                                        closable: false,
+                                                        size: API.collapseTagSize.get(),
+                                                        type: props.tagType,
+                                                        effect: props.tagEffect,
+                                                        disableTransitions: true,
+                                                        styleObj: API.collapseTagStyle.get(),
+                                                        slot: new framework_1.Span({
+                                                            class: nsSelect.e('tags-text'),
+                                                            slot: `+${states.selected.length -
+                                                                props.maxCollapseTags}`,
+                                                        }),
                                                     }),
                                                 }),
-                                            }),
-                                            content: new framework_1.Div({
-                                                refDom: API.tagMenuRef,
-                                                class: nsSelect.e('selection'),
-                                                slot: new framework_1.For({
-                                                    data: API.states.collapseTagList,
-                                                    getter: (item) => {
-                                                        var _a;
-                                                        return new framework_1.Div({
-                                                            // key: API.getValueKey(item),
-                                                            class: nsSelect.e('selected-item'),
-                                                            slot: new td_tag_class_1.TdTag({
-                                                                class: 'in-tooltip',
-                                                                closable: !API.selectDisabled &&
-                                                                    !item.isDisabled,
-                                                                size: API.collapseTagSize.get(),
-                                                                type: props.tagType,
-                                                                effect: props.tagEffect,
-                                                                disableTransitions: true,
-                                                                events: {
-                                                                    close: (evt) => {
-                                                                        API.deleteTag(evt, item);
+                                                content: new framework_1.Div({
+                                                    refDom: API.tagMenuRef,
+                                                    class: nsSelect.e('selection'),
+                                                    slot: new framework_1.For({
+                                                        data: API.collapseTagList,
+                                                        getter: (item) => {
+                                                            var _a, _b;
+                                                            return new framework_1.Div({
+                                                                // key: API.getValueKey(item),
+                                                                class: nsSelect.e('selected-item'),
+                                                                slot: new td_tag_class_1.TdTag({
+                                                                    class: 'in-tooltip',
+                                                                    closable: !API.selectDisabled && !item.isDisabled,
+                                                                    size: API.collapseTagSize.get(),
+                                                                    type: props.tagType,
+                                                                    effect: props.tagEffect,
+                                                                    disableTransitions: true,
+                                                                    emits: {
+                                                                        close: (evt) => {
+                                                                            API.deleteTag(evt, item);
+                                                                        },
                                                                     },
-                                                                },
-                                                                slot: new framework_1.Span({
-                                                                    class: nsSelect.e('tags-text'),
-                                                                    slot: (0, utils_1.isFunction)((_a = props.slots) === null || _a === void 0 ? void 0 : _a.label)
-                                                                        ? props.slots.label(item.currentLabel, item.vlaue)
-                                                                        : item.currentLabel,
+                                                                    slot: new framework_1.Span({
+                                                                        class: nsSelect.e('tags-text'),
+                                                                        slot: (0, utils_1.isFunction)((_a = props.slots) === null || _a === void 0 ? void 0 : _a.label)
+                                                                            ? (_b = props.slots) === null || _b === void 0 ? void 0 : _b.label(item.currentLabel, item.vlaue)
+                                                                            : item.currentLabel,
+                                                                    }),
                                                                 }),
-                                                            }),
-                                                        });
-                                                    },
+                                                            });
+                                                        },
+                                                    }),
                                                 }),
-                                            }),
-                                        },
-                                    }),
-                                ],
-                            }),
+                                            },
+                                        }),
+                                    ],
+                                })
+                                : undefined,
                             new framework_1.Div({
                                 class: [
                                     nsSelect.e('selected-item'),
@@ -223,7 +240,7 @@ class TdSelect extends framework_1.TypeDiv {
                                 slot: [
                                     new framework_1.Input({
                                         refDom: API.inputRef,
-                                        vModel: API.states.inputValue,
+                                        vModel: states.inputValue,
                                         attrObj: {
                                             id: API.inputId.get(),
                                             type: 'text',
@@ -238,7 +255,7 @@ class TdSelect extends framework_1.TypeDiv {
                                             role: 'combobox',
                                             readonly: !props.filterable,
                                             spellcheck: false,
-                                            ariaActivedescendant: ((_c = API.hoverOption.get()) === null || _c === void 0 ? void 0 : _c.id) || '',
+                                            ariaActivedescendant: ((_e = API.hoverOption.get()) === null || _e === void 0 ? void 0 : _e.id) || '',
                                             ariaControls: API.contentId.get(),
                                             ariaExpanded: API.dropdownMenuVisible,
                                             ariaLabel: props.ariaLabel,
@@ -290,7 +307,7 @@ class TdSelect extends framework_1.TypeDiv {
                                         attrObj: {
                                             ariaHidden: true,
                                         },
-                                        slot: API.states.inputValue,
+                                        slot: states.inputValue,
                                     }),
                                 ],
                             }),
@@ -299,18 +316,28 @@ class TdSelect extends framework_1.TypeDiv {
                                 class: (0, signals_1.computed)(() => [
                                     nsSelect.e('selected-item'),
                                     nsSelect.e('placeholder'),
-                                    nsSelect.is('transparent', !API.hasModelValue ||
-                                        (API.expanded.get() && !API.states.inputValue.get())),
+                                    nsSelect.is('transparent', !API.hasModelValue.get() ||
+                                        (API.expanded.get() && !states.inputValue.get())),
                                 ]),
-                                slot: API.hasModelValue
-                                    ? ((_d = props.slots) === null || _d === void 0 ? void 0 : _d.label)
-                                        ? (_f = (_e = props.slots) === null || _e === void 0 ? void 0 : _e.label) === null || _f === void 0 ? void 0 : _f.call(_e, API.currentPlaceholder.get(), props.modelValue)
-                                        : new framework_1.Span({
-                                            slot: API.currentPlaceholder,
-                                        })
-                                    : new framework_1.Span({
-                                        slot: API.currentPlaceholder,
-                                    }),
+                                slot: (0, signals_1.computed)(() => {
+                                    var _a, _b, _c;
+                                    console.warn('API.hasModelValue.get() is ', API.hasModelValue.get());
+                                    if (API.hasModelValue.get()) {
+                                        if ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.label) {
+                                            return (_c = (_b = props.slots) === null || _b === void 0 ? void 0 : _b.label) === null || _c === void 0 ? void 0 : _c.call(_b, (0, signals_1.unref)(API.currentPlaceholder), props.modelValue);
+                                        }
+                                        else {
+                                            return new framework_1.Span({
+                                                slot: API.currentPlaceholder
+                                            });
+                                        }
+                                    }
+                                    else {
+                                        return new framework_1.Span({
+                                            slot: API.currentPlaceholder
+                                        });
+                                    }
+                                })
                             }),
                         ],
                     }),
@@ -325,7 +352,8 @@ class TdSelect extends framework_1.TypeDiv {
                                     nsSelect.e('icon'),
                                     API.iconReverse,
                                 ],
-                                slot: new (API.iconComponent.get())(),
+                                slot: API.iconComponent.get() &&
+                                    new (API.iconComponent.get())(),
                             }),
                             new td_icon_class_1.TdIcon({
                                 vIf: (0, signals_1.computed)(() => API.showClose.get() && props.clearIcon),
@@ -360,24 +388,29 @@ class TdSelect extends framework_1.TypeDiv {
                     refDom: API.menuRef,
                     slot: [
                         new framework_1.Div({
-                            vIf: (_g = props.slots) === null || _g === void 0 ? void 0 : _g.header,
+                            vIf: (_f = props.slots) === null || _f === void 0 ? void 0 : _f.header,
                             class: nsSelect.be('dropdown', 'header'),
-                            slot: (_h = props.slots) === null || _h === void 0 ? void 0 : _h.header,
+                            slot: (_g = props.slots) === null || _g === void 0 ? void 0 : _g.header,
                             events: {
                                 click: (evt) => evt === null || evt === void 0 ? void 0 : evt.stopPropagation(),
                             },
                         }),
                         new td_scrollbar_class_1.TdScrollbar({
-                            vShow: (0, signals_1.computed)(() => API.states.options.size > 0 && !(0, signals_1.unref)(props.loading)),
+                            vShow: (0, signals_1.computed)(() => {
+                                // console.error('API.states.options.get().size > 0 && !unref(props.loading) is ',
+                                //   states.options.get().size);
+                                return states.options.get().size > 0 && !(0, signals_1.unref)(props.loading);
+                            } // todo
+                            ),
                             refEl: API.scrollbarRef,
                             tag: 'ul',
-                            // wrapClass: nsSelect.be('dropdown', 'wrap'),
+                            wrapClass: nsSelect.be('dropdown', 'wrap'),
                             viewClass: nsSelect.be('dropdown', 'list'),
                             class: [
-                                nsSelect.is('empty', API.filteredOptionsCount.get() === 0),
+                                (0, signals_1.computed)(() => nsSelect.is('empty', API.filteredOptionsCount.get() === 0)),
                             ],
                             attrObj: {
-                                id: (0, signals_1.unref)(API.contentId),
+                                id: API.contentId,
                                 role: 'listbox',
                                 ariaLabel: props.ariaLabel,
                                 ariaOrientation: 'vertical',
@@ -388,34 +421,35 @@ class TdSelect extends framework_1.TypeDiv {
                             slot: [
                                 new td_option_class_1.TdOption({
                                     vIf: API.showNewOption,
-                                    value: API.states.inputValue,
+                                    value: states.inputValue, // 这里的value是会变的，是选中的值
                                     created: true,
                                 }),
-                                // new TdOptions({ // todo
-                                //   slot: props.slot
-                                // })
+                                new td_options_class_1.TdOptions({
+                                    // todo
+                                    slot: props.slot, // 这里面的 TdOption的value的值是不变的。
+                                }),
                             ],
                         }),
+                        ((_h = props.slots) === null || _h === void 0 ? void 0 : _h.loading) && (0, signals_1.unref)(props.loading)
+                            ? new framework_1.Div({
+                                class: nsSelect.be('dropdown', 'loading'),
+                                slot: (_j = props.slots) === null || _j === void 0 ? void 0 : _j.loading,
+                            })
+                            : (0, signals_1.unref)(props.loading) || API.filteredOptionsCount.get() === 0
+                                ? new framework_1.Div({
+                                    class: nsSelect.be('dropdown', 'empty'),
+                                    slot: (_l = (_k = props.slots) === null || _k === void 0 ? void 0 : _k.empty) !== null && _l !== void 0 ? _l : new framework_1.Span({
+                                        slot: API.emptyText,
+                                    }),
+                                })
+                                : undefined,
                         new framework_1.Div({
-                            vIf: ((_j = props.slots) === null || _j === void 0 ? void 0 : _j.loading) && props.loading,
-                            class: nsSelect.be('dropdown', 'loading'),
-                            slot: (_k = props.slots) === null || _k === void 0 ? void 0 : _k.loading,
-                        }),
-                        new framework_1.Div({
-                            vIf: !(((_l = props.slots) === null || _l === void 0 ? void 0 : _l.loading) && props.loading) &&
-                                (props.loading || API.filteredOptionsCount.get() === 0),
-                            class: nsSelect.be('dropdown', 'empty'),
-                            slot: (_o = (_m = props.slots) === null || _m === void 0 ? void 0 : _m.empty) !== null && _o !== void 0 ? _o : new framework_1.Span({
-                                slot: API.emptyText,
-                            }),
-                        }),
-                        new framework_1.Div({
-                            vIf: (_p = props.slots) === null || _p === void 0 ? void 0 : _p.footer,
+                            vIf: (_m = props.slots) === null || _m === void 0 ? void 0 : _m.footer,
                             class: nsSelect.be('dropdown', 'footer'),
                             events: {
                                 click: (evt) => evt === null || evt === void 0 ? void 0 : evt.stopPropagation(),
                             },
-                            slot: (_q = props.slots) === null || _q === void 0 ? void 0 : _q.footer,
+                            slot: (_o = props.slots) === null || _o === void 0 ? void 0 : _o.footer,
                         }),
                     ],
                 }),

package/src/components/form/td-select/td-select.const.d.ts

@@ -1,2 +1,15 @@
 import { TdSelectProps } from './td-select.interface';
 export declare const selectProps: TdSelectProps;
+export declare const selectEmits: {
+    "update:modelValue": (val: TdSelectProps["modelValue"]) => boolean;
+    change: (val: TdSelectProps["modelValue"]) => boolean;
+    'popup-scroll': ({ scrollTop, scrollLeft, }: {
+        scrollTop: number;
+        scrollLeft: number;
+    }) => boolean;
+    'remove-tag': (val: unknown) => boolean;
+    'visible-change': (visible: boolean) => boolean;
+    focus: (evt: FocusEvent) => boolean;
+    blur: (evt: FocusEvent) => boolean;
+    clear: () => boolean;
+};

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

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectProps = void 0;
+exports.selectEmits = exports.selectProps = void 0;
 const svgs_1 = require("@type-dom/svgs");
+const event_1 = require("../../../constants/event");
+const td_scrollbar_const_1 = require("../../basic/td-scrollbar/td-scrollbar.const");
 exports.selectProps = {
     autocomplete: 'off',
     effect: 'light',
@@ -16,6 +18,21 @@ exports.selectProps = {
     clearIcon: svgs_1.ElCircleCloseSvg, // 同下
     suffixIcon: svgs_1.ElArrowDownSvg, // 必须是类，而不是对象；这样全局就只有一个了。
     tagType: 'info',
+    tagEffect: 'light',
     validateEvent: true,
+    showArrow: true,
+    offset: 12,
     placement: 'bottom-start',
+    fallbackPlacements: ['bottom-start', 'top-start', 'right', 'left'],
+    tabindex: 0
+};
+exports.selectEmits = {
+    [event_1.UPDATE_MODEL_EVENT]: (val) => true,
+    [event_1.CHANGE_EVENT]: (val) => true,
+    'popup-scroll': td_scrollbar_const_1.scrollbarEmits.scroll,
+    'remove-tag': (val) => true,
+    'visible-change': (visible) => true,
+    focus: (evt) => evt instanceof FocusEvent,
+    blur: (evt) => evt instanceof FocusEvent,
+    clear: () => true,
 };