@type-dom/ui 0.1.0 → 0.1.1

package/src/components/form/td-select/td-select-dropdown/td-select-dropdown.style.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$selectDropdownFooterStyle = exports.$selectDropdownHeaderStyle = exports.$selectDropdownListStyle = exports.$selectDropdownWrapStyle = exports.$selectDropdownEmptyStyle = exports.$selectDropdownLoading = exports.$selectDropdownStyle = void 0;
+const td_select_style_1 = require("../td-select.style");
+const var_1 = require("../../../../styles/var");
+exports.$selectDropdownStyle = {
+    // zIndex: calc(#{getCssVar('index-top')} + 1),
+    zIndex: 'calc(index-top + 1)',
+    // border-radius: getCssVar('border-radius-base'),
+    borderRadius: var_1.$borderRadius.base,
+    boxSizing: 'border-box',
+    // {
+    //   .#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list {
+    //     padding: 0;
+    //   }
+    // }
+};
+exports.$selectDropdownLoading = {
+    // padding: map.get($select-dropdown, 'empty-padding'),
+    padding: td_select_style_1.$selectDropdown.emptyPadding,
+    margin: 0,
+    textAlign: 'center',
+    // color: map.get($select-dropdown, 'empty-color'),
+    color: td_select_style_1.$selectDropdown.emptyColor,
+    // font-size: getCssVar('select-font-size'),
+    fontSize: td_select_style_1.$select.fontSize,
+};
+exports.$selectDropdownEmptyStyle = {
+    // padding: map.get($selectDropdown, 'empty-padding'),
+    padding: td_select_style_1.$selectDropdown.emptyPadding,
+    margin: 0,
+    textAlign: 'center',
+    // color: map.get($selectDropdown, 'empty-color'),
+    color: td_select_style_1.$selectDropdown.emptyColor,
+    // font-size: getCssVar('select-font-size'),
+    fontSize: td_select_style_1.$select.fontSize,
+};
+exports.$selectDropdownWrapStyle = {
+    // max-height: map.get($selectDropdown, 'max-height')
+    maxHeight: td_select_style_1.$selectDropdown.maxHeight,
+};
+exports.$selectDropdownListStyle = {
+    listStyle: 'none',
+    // padding: map.get($selectDropdown, 'padding'),
+    padding: td_select_style_1.$selectDropdown.padding,
+    margin: 0,
+    boxSizing: 'border-box',
+    // &.#{$namespace}-vl__window {
+    //   // for select-v2
+    //   margin: map.get($selectDropdown, 'padding');
+    //   padding: 0;
+    // }
+};
+exports.$selectDropdownHeaderStyle = {
+    // padding: map.get($selectDropdown, 'header-padding'),
+    padding: td_select_style_1.$selectDropdown.headerPadding,
+    // border-bottom: map.get($selectDropdown, 'border'),
+    borderBottom: td_select_style_1.$selectDropdown.border,
+};
+exports.$selectDropdownFooterStyle = {
+    // padding: map.get($selectDropdown, 'footer-padding');
+    padding: td_select_style_1.$selectDropdown.footerPadding,
+    // border-top: map.get($selectDropdown, 'border');
+    borderTop: td_select_style_1.$selectDropdown.border,
+};

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

@@ -1,6 +1,9 @@
 import { TypeDiv } from '@type-dom/framework';
-import { ITdSelect, ITdSelectConfig } from './td-select.interface';
+import { ITdSelect, TdSelectProps } from './td-select.interface';
+import './style';
 export declare class TdSelect extends TypeDiv implements ITdSelect {
     className: 'TdSelect';
-    constructor(params?: ITdSelectConfig);
+    props: TdSelectProps;
+    constructor(params?: TdSelectProps);
+    setup(): void;
 }

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

@@ -2,29 +2,425 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSelect = void 0;
 const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const use_calc_input_width_1 = require("../../../hooks/use-calc-input-width");
+const td_tag_class_1 = require("../../data/td-tag/td-tag.class");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_tooltip_class_1 = require("../../feedback/td-tooltip/td-tooltip.class");
-const dropdown_class_1 = require("./dropdown/dropdown.class");
+const td_scrollbar_class_1 = require("../../basic/td-scrollbar/td-scrollbar.class");
+const td_option_class_1 = require("../td-option/td-option.class");
+const td_select_dropdown_class_1 = require("./td-select-dropdown/td-select-dropdown.class");
+const td_select_const_1 = require("./td-select.const");
+const token_1 = require("./token");
+const useSelect_1 = require("./useSelect");
+require("./style");
 class TdSelect extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
         this.className = 'TdSelect';
-        // this.style.addObj($select); // todo 应该是 $selectStyle
+        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;
+        const modelValue = (0, signals_1.computed)(() => {
+            const { modelValue: rawModelValue, multiple } = props;
+            const fallback = multiple ? [] : undefined;
+            // When it is array, we check if this is multi-select.
+            // Based on the result we get
+            if ((0, utils_1.isArray)(rawModelValue)) {
+                return multiple ? rawModelValue : fallback;
+            }
+            return multiple ? fallback : rawModelValue;
+        });
+        const props = this.props;
+        const API = (0, useSelect_1.useSelect)(props, this.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,
+            optionsArray: API.optionsArray.get(),
+            handleOptionSelect: API.handleOptionSelect,
+            onOptionCreate: API.onOptionCreate,
+            onOptionDestroy: API.onOptionDestroy,
+            selectRef: API.selectRef,
+            setSelected: API.setSelected,
+        });
+        const selectedLabel = (0, signals_1.computed)(() => {
+            if (!props.multiple) {
+                return API.states.selectedLabel;
+            }
+            return API.states.selected.map((i) => i.currentLabel);
+        });
+        this.assignProps({
+            refDom: API.selectRef,
+            //  v-click-outside:[popperRef]="handleClickOutside"
+        });
+        this.attr.addClass((0, signals_1.computed)(() => [nsSelect.b(), nsSelect.m(API.selectSize.get())]));
+        this.addEmits({
+            [API.mouseEnterEventName.get()]: () => (API.states.inputHovering = true),
+            mouseleave: () => (API.states.inputHovering = false),
+        });
         this.addChild(new td_tooltip_class_1.TdTooltip({
-            slot: [
-                new framework_1.Div({
-                    name: 'wrapper'
-                }),
-                new framework_1.Div({
-                    name: 'content',
-                    childNodes: [
-                        new dropdown_class_1.TdSelectDropDown({
-                            name: 'content-inner'
+            refEl: API.tooltipRef,
+            // visible: API.dropdownMenuVisible, // TODO not show ???
+            placement: props.placement,
+            teleported: props.teleported,
+            popperClass: [nsSelect.e('popper'), props.popperClass],
+            popperOptions: props.popperOptions,
+            fallbackPlacements: props.fallbackPlacements,
+            effect: props.effect,
+            pure: true,
+            trigger: 'click',
+            transition: `${nsSelect.namespace.get()}-zoom-in-top`,
+            stopPopperMouseEvent: false,
+            gpuAcceleration: false,
+            persistent: props.persistent,
+            appendTo: props.appendTo,
+            showArrow: props.showArrow,
+            offset: props.offset,
+            emits: {
+                beforeShow: API.handleMenuEnter,
+                hide: () => (API.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('filterable', props.filterable),
+                    nsSelect.is('disabled', API.selectDisabled.get()),
+                ],
+                events: {
+                    click: (evt) => {
+                        API.toggleMenu();
+                        evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                    },
+                },
+                slot: [
+                    ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.prefix)
+                        ? new framework_1.Div({
+                            refDom: API.prefixRef,
+                            class: nsSelect.e('prefix'),
+                            slot: props.slots.prefix,
                         })
-                    ]
-                })
-            ]
+                        : undefined,
+                    new framework_1.Div({
+                        refDom: API.selectionRef,
+                        class: [
+                            nsSelect.e('selection'),
+                            nsSelect.is('near', props.multiple &&
+                                !((_b = props.slots) === null || _b === void 0 ? void 0 : _b.prefix) &&
+                                !!API.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);
+                                                        },
+                                                    },
+                                                    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,
+                                                    }),
+                                                }),
+                                            });
+                                        },
+                                    }),
+                                    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}`,
+                                                    }),
+                                                }),
+                                            }),
+                                            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);
+                                                                    },
+                                                                },
+                                                                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,
+                                                                }),
+                                                            }),
+                                                        });
+                                                    },
+                                                }),
+                                            }),
+                                        },
+                                    }),
+                                ],
+                            }),
+                            new framework_1.Div({
+                                class: [
+                                    nsSelect.e('selected-item'),
+                                    nsSelect.e('input-wrapper'),
+                                    nsSelect.is('hidden', !props.filterable),
+                                ],
+                                slot: [
+                                    new framework_1.Input({
+                                        refDom: API.inputRef,
+                                        vModel: API.states.inputValue,
+                                        attrObj: {
+                                            id: API.inputId.get(),
+                                            type: 'text',
+                                            name: props.name,
+                                            class: [
+                                                nsSelect.e('input'),
+                                                nsSelect.is(API.selectSize.get()),
+                                            ],
+                                            disabled: API.selectDisabled,
+                                            autocomplete: props.autocomplete,
+                                            tabindex: props.tabindex,
+                                            role: 'combobox',
+                                            readonly: !props.filterable,
+                                            spellcheck: false,
+                                            ariaActivedescendant: ((_c = API.hoverOption.get()) === null || _c === void 0 ? void 0 : _c.id) || '',
+                                            ariaControls: API.contentId.get(),
+                                            ariaExpanded: API.dropdownMenuVisible,
+                                            ariaLabel: props.ariaLabel,
+                                            ariaAutocomplete: 'none',
+                                            ariaHaspopup: 'listbox',
+                                        },
+                                        styleObj: inputStyle,
+                                        events: {
+                                            keydown: (evt) => {
+                                                if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Down') {
+                                                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                                                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                                                    API.navigateOptions('next');
+                                                }
+                                                if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Up') {
+                                                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                                                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                                                    API.navigateOptions('prev');
+                                                }
+                                                if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Escape') {
+                                                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                                                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                                                    API.handleEsc();
+                                                }
+                                                if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter') {
+                                                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                                                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                                                    API.selectOption();
+                                                }
+                                                if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Delete') {
+                                                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                                                    API.deletePrevTag(evt);
+                                                }
+                                            },
+                                            compositionstart: API.handleCompositionStart,
+                                            compositionupdate: API.handleCompositionUpdate,
+                                            compositionend: API.handleCompositionEnd,
+                                            input: API.onInput,
+                                            click: (evt) => {
+                                                evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                                                API.toggleMenu();
+                                            },
+                                        },
+                                    }),
+                                    new framework_1.Span({
+                                        vIf: props.filterable,
+                                        refDom: calculatorRef,
+                                        class: nsSelect.e('input-calculator'),
+                                        attrObj: {
+                                            ariaHidden: true,
+                                        },
+                                        slot: API.states.inputValue,
+                                    }),
+                                ],
+                            }),
+                            new framework_1.Div({
+                                vIf: API.shouldShowPlaceholder,
+                                class: (0, signals_1.computed)(() => [
+                                    nsSelect.e('selected-item'),
+                                    nsSelect.e('placeholder'),
+                                    nsSelect.is('transparent', !API.hasModelValue ||
+                                        (API.expanded.get() && !API.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,
+                                    }),
+                            }),
+                        ],
+                    }),
+                    new framework_1.Div({
+                        refDom: API.suffixRef,
+                        class: nsSelect.e('suffix'),
+                        slot: [
+                            new td_icon_class_1.TdIcon({
+                                vIf: (0, signals_1.computed)(() => API.iconComponent.get() && !API.showClose.get()),
+                                class: [
+                                    nsSelect.e('caret'),
+                                    nsSelect.e('icon'),
+                                    API.iconReverse,
+                                ],
+                                slot: new (API.iconComponent.get())(),
+                            }),
+                            new td_icon_class_1.TdIcon({
+                                vIf: (0, signals_1.computed)(() => API.showClose.get() && props.clearIcon),
+                                class: [
+                                    nsSelect.e('caret'),
+                                    nsSelect.e('icon'),
+                                    API.iconReverse,
+                                ],
+                                slot: new props.clearIcon(),
+                                events: {
+                                    click: API.handleClearClick,
+                                },
+                            }),
+                            new td_icon_class_1.TdIcon({
+                                vIf: (0, signals_1.computed)(() => API.validateState.get() &&
+                                    API.validateIcon.get() &&
+                                    API.needStatusIcon.get()),
+                                class: [
+                                    nsInput.e('icon'),
+                                    nsInput.e('validateIcon'),
+                                    nsInput.is('loading', API.validateState.get() === 'validating'),
+                                ],
+                                slot: API.validateIcon.get() &&
+                                    new (API.validateIcon.get())(),
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+            slots: {
+                content: new td_select_dropdown_class_1.TdSelectDropDown({
+                    refDom: API.menuRef,
+                    slot: [
+                        new framework_1.Div({
+                            vIf: (_g = props.slots) === null || _g === void 0 ? void 0 : _g.header,
+                            class: nsSelect.be('dropdown', 'header'),
+                            slot: (_h = props.slots) === null || _h === void 0 ? void 0 : _h.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)),
+                            refEl: API.scrollbarRef,
+                            tag: 'ul',
+                            // wrapClass: nsSelect.be('dropdown', 'wrap'),
+                            viewClass: nsSelect.be('dropdown', 'list'),
+                            class: [
+                                nsSelect.is('empty', API.filteredOptionsCount.get() === 0),
+                            ],
+                            attrObj: {
+                                id: (0, signals_1.unref)(API.contentId),
+                                role: 'listbox',
+                                ariaLabel: props.ariaLabel,
+                                ariaOrientation: 'vertical',
+                            },
+                            emits: {
+                                scroll: API.popupScroll,
+                            },
+                            slot: [
+                                new td_option_class_1.TdOption({
+                                    vIf: API.showNewOption,
+                                    value: API.states.inputValue,
+                                    created: true,
+                                }),
+                                // new TdOptions({ // todo
+                                //   slot: props.slot
+                                // })
+                            ],
+                        }),
+                        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,
+                            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,
+                        }),
+                    ],
+                }),
+            },
         }));
-        this.props = this.useParams(params);
     }
 }
 exports.TdSelect = TdSelect;

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

@@ -0,0 +1,2 @@
+import { TdSelectProps } from './td-select.interface';
+export declare const selectProps: TdSelectProps;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectProps = void 0;
+const svgs_1 = require("@type-dom/svgs");
+exports.selectProps = {
+    autocomplete: 'off',
+    effect: 'light',
+    noMatchText: 'No matching data',
+    noDataText: 'No data',
+    multipleLimit: 0,
+    placeholder: 'Select',
+    reserveKeyword: true,
+    valueKey: 'value',
+    maxCollapseTags: 1,
+    persistent: true,
+    clearIcon: svgs_1.ElCircleCloseSvg, // 同下
+    suffixIcon: svgs_1.ElArrowDownSvg, // 必须是类，而不是对象；这样全局就只有一个了。
+    tagType: 'info',
+    validateEvent: true,
+    placement: 'bottom-start',
+};