@touchvue/ui 1.0.0-beta.54 → 1.0.0-beta.56

package/es/packages/components/select/src/select.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, onMounted, onUnmounted, inject, computed, watch, nextTick, resolveDirective, openBlock, createElementBlock, Fragment, createCommentVNode, withDirectives, unref, normalizeClass, normalizeStyle, withKeys, createElementVNode, vShow, renderSlot, toDisplayString, createBlock, renderList, vModelSelect, createTextVNode, withCtx, createVNode, Teleport, withModifiers } from 'vue';
+import { defineComponent, ref, onMounted, nextTick, onUnmounted, inject, getCurrentInstance, computed, watch, resolveDirective, openBlock, createElementBlock, Fragment, createCommentVNode, withDirectives, unref, normalizeClass, normalizeStyle, withKeys, createElementVNode, vShow, renderSlot, toDisplayString, createBlock, renderList, vModelSelect, createTextVNode, withCtx, withModifiers, createVNode, Teleport } from 'vue';
 import { langKey, t } from '../../../locale/index.mjs';
 import { selectProps } from './select.mjs';
 import { ToButton } from '../../button/index.mjs';
@@ -39,8 +39,13 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       calcScale();
       window.addEventListener("resize", calcScale);
+      nextTick(() => setupTagResizeObserver());
       onUnmounted(() => {
         window.removeEventListener("resize", calcScale);
+        if (tagResizeObserver) {
+          tagResizeObserver.disconnect();
+          tagResizeObserver = null;
+        }
       });
     });
     const props = __props;
@@ -50,6 +55,28 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const $TouchUI = inject("$TouchUI", {
       colors: ["primary", "success", "warning", "danger", "info", "default", "dark"]
     });
+    const ins = getCurrentInstance();
+    const iClearType = computed(() => {
+      var _a, _b, _c;
+      if (props.clearType) {
+        return props.clearType;
+      }
+      return (_c = (_b = (_a = ins == null ? void 0 : ins.appContext.config.globalProperties.$TouchUI) == null ? void 0 : _a.select) == null ? void 0 : _b.clearType) != null ? _c : "icon";
+    });
+    const showClearIcon = computed(() => {
+      var _a;
+      if (!props.clearable || disabled.value || props.native)
+        return false;
+      if (iClearType.value !== "icon")
+        return false;
+      if (props.inputable || props.filterable || props.setDataFn || props.remoteMethod)
+        return false;
+      if (props.multiple) {
+        return selected.value.filter((item) => !item.hide).length > 0;
+      } else {
+        return Boolean((_a = selected.value) == null ? void 0 : _a[iValueText.value]);
+      }
+    });
     const { isPhone } = useDevice();
     const $phone = isPhone.value;
     const iValue = ref(props.modelValue);
@@ -66,6 +93,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const multipleInputValue = ref("");
     const multipleFilterValue = ref("");
     const setDataInputValue = ref("");
+    const isFiltering = ref(false);
     const dataLoading = ref(false);
     const errorTip = ref("");
     const errorType = ref("rule");
@@ -86,6 +114,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const popupFilter = ref(null);
     const popupInput = ref(null);
     const trigger = ref(null);
+    const tagContainerRef = ref(null);
     const options = ref([]);
     const anotherOptions = ref([]);
     const { selected } = useSelectOptionData({
@@ -96,6 +125,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         return true;
       if (props.remoteMethod)
         return true;
+      if (!isFiltering.value)
+        return true;
       const value = filterValue.value;
       if (value === "")
         return true;
@@ -106,12 +137,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         return true;
       if (props.remoteMethod)
         return true;
+      if (!isFiltering.value)
+        return true;
       const value = multipleFilterValue.value;
       if (value === "")
         return true;
       return item[iLabelText.value].includes(value);
     };
     const nomatch = computed(() => {
+      if (!isFiltering.value)
+        return false;
       let nomatch2 = true;
       let value = props.multiple ? multipleFilterValue.value : filterValue.value;
       if (value === "") {
@@ -281,7 +316,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       if (props.native) {
         return;
       }
-      if (!props.multiple && props.clearable && !props.inputable && !props.setDataFn && !props.filterable && !props.remoteMethod && (!props.optionDisplay || props.optionDisplay === "float")) {
+      if (!props.multiple && props.clearable && iClearType.value === "default" && !props.inputable && !props.setDataFn && !props.filterable && !props.remoteMethod && (!props.optionDisplay || props.optionDisplay === "float")) {
         options.value.unshift({
           [iLabelText.value]: "",
           [iValueText.value]: ""
@@ -524,6 +559,82 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return arr;
     });
+    const visibleCount = ref(Infinity);
+    let isRecalculating = false;
+    let tagResizeObserver = null;
+    const displaySelected = computed(() => {
+      return selected.value.filter((item) => !item.hide);
+    });
+    const overflowCount = computed(() => {
+      if (!props.isCount)
+        return 0;
+      const max = visibleCount.value;
+      if (max >= displaySelected.value.length)
+        return 0;
+      return displaySelected.value.length - max;
+    });
+    const recalcVisibleCount = () => {
+      if (!props.isCount || isRecalculating || !tagContainerRef.value)
+        return;
+      isRecalculating = true;
+      visibleCount.value = Infinity;
+      nextTick(() => {
+        const container = tagContainerRef.value;
+        if (!container) {
+          isRecalculating = false;
+          return;
+        }
+        const containerWidth = container.clientWidth;
+        const tags = container.querySelectorAll(".to-select-item");
+        if (tags.length === 0) {
+          isRecalculating = false;
+          return;
+        }
+        const style = getComputedStyle(container);
+        const fontSize = parseFloat(style.fontSize) || 16;
+        const gap = parseFloat(style.gap || style.rowGap) || 0;
+        const firstTagStyle = getComputedStyle(tags[0]);
+        const tagMarginLeft = parseFloat(firstTagStyle.marginLeft) || 0;
+        const tagMarginRight = parseFloat(firstTagStyle.marginRight) || 0;
+        const tagMargin = tagMarginLeft + tagMarginRight;
+        const overflowEstimate = 3 * fontSize + tagMargin + gap;
+        let reserved = overflowEstimate;
+        const inputEl = container.querySelector(".to-select-input");
+        if (inputEl) {
+          const inputStyle = getComputedStyle(inputEl);
+          const inputMargin = (parseFloat(inputStyle.marginLeft) || 0) + (parseFloat(inputStyle.marginRight) || 0);
+          reserved += inputEl.offsetWidth + inputMargin + gap;
+        }
+        let totalWidth = reserved;
+        let count = 0;
+        for (let i = 0; i < tags.length; i++) {
+          const w = tags[i].offsetWidth + tagMargin + gap;
+          if (totalWidth + w > containerWidth)
+            break;
+          totalWidth += w;
+          count++;
+        }
+        visibleCount.value = count > 0 ? count : 1;
+        nextTick(() => {
+          isRecalculating = false;
+        });
+      });
+    };
+    const setupTagResizeObserver = () => {
+      if (props.isCount && props.multiple && tagContainerRef.value) {
+        if (!tagResizeObserver) {
+          tagResizeObserver = new ResizeObserver(() => recalcVisibleCount());
+        }
+        tagResizeObserver.observe(tagContainerRef.value);
+        recalcVisibleCount();
+      } else {
+        if (tagResizeObserver) {
+          tagResizeObserver.disconnect();
+          tagResizeObserver = null;
+        }
+        visibleCount.value = Infinity;
+      }
+    };
     const change = (value, option) => {
       if (props.beforeChange) {
         let result = props.beforeChange(value, option);
@@ -629,6 +740,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const filterInput = () => {
+      isFiltering.value = true;
       if (props.remoteMethod) {
         const keyword = props.multiple ? multipleFilterValue.value : filterValue.value;
         clearTimeout(remoteSearchTimer);
@@ -638,6 +750,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const filterClear = () => {
+      isFiltering.value = false;
       iValue.value = "";
     };
     const setDataLoading = (loading) => {
@@ -698,6 +811,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const clear = () => {
       clearChange();
     };
+    const clearClick = () => {
+      clear();
+      closeLayer();
+    };
     const clearChange = () => {
       if (props.multiple) {
         change("", []);
@@ -842,6 +959,21 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         disabled.value = newVal;
       }
     );
+    watch(
+      () => props.isCount,
+      () => {
+        nextTick(() => setupTagResizeObserver());
+      }
+    );
+    watch(
+      selected,
+      () => {
+        if (props.isCount) {
+          nextTick(() => recalcVisibleCount());
+        }
+      },
+      { deep: true }
+    );
     const getLabel = (val) => {
       const obj = options.value.find((item) => String(item[iValueText.value]) === String(val));
       if (obj && obj[iLabelText.value]) {
@@ -926,6 +1058,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const layerClose = () => {
+      isFiltering.value = false;
       if (!props.multiple) {
         if ((props.filterable || props.remoteMethod) && !props.inputable) {
           if (iValue.value) {
@@ -956,6 +1089,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       openOptionLayer();
     };
     const layerOpen = () => {
+      isFiltering.value = false;
       calcScale();
     };
     const compare = () => {
@@ -993,6 +1127,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             key: unref(langKey),
             ref_key: "$el",
             ref: $el,
+            role: "button",
             flex: _ctx.flex ? _ctx.flex : null,
             class: normalizeClass(["to-select", unref(setClass)]),
             style: normalizeStyle(unref(setStyle)),
@@ -1072,7 +1207,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                         ref: selector,
                         "onUpdate:modelValue": ($event) => iValue.value = $event
                       }, [
-                        _ctx.clearable ? (openBlock(), createElementBlock(
+                        _ctx.clearable && iClearType.value === "default" ? (openBlock(), createElementBlock(
                           "option",
                           {
                             key: 0,
@@ -1257,91 +1392,124 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                               { key: 2 },
                               [
                                 createCommentVNode(" \u591A\u9009\u6807\u7B7E\u5BB9\u5668 "),
-                                createElementVNode("span", { class: "to-select-tag" }, [
-                                  createCommentVNode(" \u5DF2\u9009\u4E2D\u9879\u7684\u6807\u7B7E\u663E\u793A "),
-                                  unref(selected).length > 0 && !(isAll.value && _ctx.useAllText) ? (openBlock(true), createElementBlock(
-                                    Fragment,
-                                    { key: 0 },
-                                    renderList(unref(selected), (item, index) => {
-                                      return openBlock(), createElementBlock(
-                                        Fragment,
-                                        null,
-                                        [
-                                          !item.hide ? (openBlock(), createBlock(unref(ToTag), {
-                                            key: index,
-                                            class: "to-select-item",
-                                            removable: _ctx.removable && !disabled.value,
-                                            onRemove: ($event) => removeTag(item)
-                                          }, {
-                                            default: withCtx(() => [
-                                              createTextVNode(
-                                                toDisplayString(item[iLabelText.value]),
-                                                1
-                                                /* TEXT */
-                                              )
-                                            ]),
-                                            _: 2
-                                            /* DYNAMIC */
-                                          }, 1032, ["removable", "onRemove"])) : createCommentVNode("v-if", true)
-                                        ],
-                                        64
-                                        /* STABLE_FRAGMENT */
-                                      );
-                                    }),
-                                    256
-                                    /* UNKEYED_FRAGMENT */
-                                  )) : createCommentVNode("v-if", true),
-                                  createCommentVNode(" \u591A\u9009\u8F93\u5165\u6846\u533A\u57DF\uFF08\u975E\u624B\u673A\u7AEF\u6216\u624B\u673A\u7AEF\u65E0\u9009\u4E2D\u9879\u65F6\u663E\u793A\uFF09 "),
-                                  !unref($phone) || unref($phone) && unref(selected).length === 0 ? (openBlock(), createElementBlock("span", {
-                                    key: 1,
-                                    class: "to-select-input"
-                                  }, [
-                                    createCommentVNode(" \u591A\u9009\u53EF\u8F93\u5165\u6A21\u5F0F\u7684\u8F93\u5165\u6846 "),
-                                    _ctx.inputable && !_ctx.filterable && !_ctx.remoteMethod ? (openBlock(), createBlock(unref(ToInput), {
-                                      key: 0,
-                                      ref_key: "input",
-                                      ref: input,
-                                      modelValue: multipleInputValue.value,
-                                      "onUpdate:modelValue": ($event) => multipleInputValue.value = $event,
-                                      "sp-chars": _ctx.spChars,
-                                      disabled: unref($phone),
-                                      "prevent-focus": "",
-                                      mode: "none",
-                                      placeholder: unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder || unref(t)("to.common.placeholder.select"),
-                                      onFocus: multipleInputFocus,
-                                      onBlur: multipleInputBlur
-                                    }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "disabled", "placeholder"])) : createCommentVNode("v-if", true),
-                                    createCommentVNode(" \u591A\u9009\u53EF\u8FC7\u6EE4\u6A21\u5F0F filterable = true \u6216 \u8FDC\u7A0B\u641C\u7D22\u6A21\u5F0F remoteMethod \u5B58\u5728\u7684\u8F93\u5165\u6846 "),
-                                    _ctx.filterable || _ctx.remoteMethod ? (openBlock(), createBlock(unref(ToInput), {
+                                createElementVNode(
+                                  "span",
+                                  {
+                                    ref_key: "tagContainerRef",
+                                    ref: tagContainerRef,
+                                    class: normalizeClass(["to-select-tag", { "is-collapse": _ctx.isCount }])
+                                  },
+                                  [
+                                    createCommentVNode(" \u5DF2\u9009\u4E2D\u9879\u7684\u6807\u7B7E\u663E\u793A "),
+                                    unref(selected).length > 0 && !(isAll.value && _ctx.useAllText) ? (openBlock(), createElementBlock(
+                                      Fragment,
+                                      { key: 0 },
+                                      [
+                                        (openBlock(true), createElementBlock(
+                                          Fragment,
+                                          null,
+                                          renderList(_ctx.isCount ? displaySelected.value : unref(selected), (item, index) => {
+                                            return openBlock(), createElementBlock(
+                                              Fragment,
+                                              { key: index },
+                                              [
+                                                (_ctx.isCount ? index < visibleCount.value : !item.hide) ? (openBlock(), createBlock(unref(ToTag), {
+                                                  key: 0,
+                                                  class: "to-select-item",
+                                                  removable: _ctx.removable && !disabled.value,
+                                                  onRemove: ($event) => removeTag(item)
+                                                }, {
+                                                  default: withCtx(() => [
+                                                    createTextVNode(
+                                                      toDisplayString(item[iLabelText.value]),
+                                                      1
+                                                      /* TEXT */
+                                                    )
+                                                  ]),
+                                                  _: 2
+                                                  /* DYNAMIC */
+                                                }, 1032, ["removable", "onRemove"])) : createCommentVNode("v-if", true)
+                                              ],
+                                              64
+                                              /* STABLE_FRAGMENT */
+                                            );
+                                          }),
+                                          128
+                                          /* KEYED_FRAGMENT */
+                                        )),
+                                        createCommentVNode(" \u6298\u53E0\u6A21\u5F0F\u4E0B\u663E\u793A +N "),
+                                        _ctx.isCount && overflowCount.value > 0 ? (openBlock(), createBlock(unref(ToTag), {
+                                          key: 0,
+                                          class: "to-select-overflow"
+                                        }, {
+                                          default: withCtx(() => [
+                                            createTextVNode(
+                                              " +" + toDisplayString(overflowCount.value),
+                                              1
+                                              /* TEXT */
+                                            )
+                                          ]),
+                                          _: 1
+                                          /* STABLE */
+                                        })) : createCommentVNode("v-if", true)
+                                      ],
+                                      64
+                                      /* STABLE_FRAGMENT */
+                                    )) : createCommentVNode("v-if", true),
+                                    createCommentVNode(" \u591A\u9009\u8F93\u5165\u6846\u533A\u57DF\uFF08\u975E\u624B\u673A\u7AEF\u6216\u624B\u673A\u7AEF\u65E0\u9009\u4E2D\u9879\u65F6\u663E\u793A\uFF09 "),
+                                    !unref($phone) || unref($phone) && unref(selected).length === 0 ? (openBlock(), createElementBlock("span", {
                                       key: 1,
-                                      ref_key: "filter",
-                                      ref: filter,
-                                      modelValue: multipleFilterValue.value,
-                                      "onUpdate:modelValue": ($event) => multipleFilterValue.value = $event,
-                                      "sp-chars": _ctx.inputable ? _ctx.spChars : false,
-                                      disabled: unref($phone),
-                                      "prevent-focus": "",
-                                      mode: "none",
-                                      placeholder: unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder || unref(t)("to.common.placeholder.select"),
-                                      onFocus: multipleFilterFocus,
-                                      onBlur: multipleFilterBlur
-                                    }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "disabled", "placeholder"])) : createCommentVNode("v-if", true),
-                                    createCommentVNode(" \u591A\u9009\u81EA\u5B9A\u4E49\u6570\u636E\u8BBE\u7F6E\u6A21\u5F0F\u7684\u8F93\u5165\u6846 "),
-                                    _ctx.setDataFn ? (openBlock(), createBlock(unref(ToInput), {
-                                      key: 2,
-                                      ref_key: "filter",
-                                      ref: filter,
-                                      modelValue: setDataInputValue.value,
-                                      "onUpdate:modelValue": ($event) => setDataInputValue.value = $event,
-                                      "sp-chars": _ctx.inputable ? _ctx.spChars : false,
-                                      "prevent-focus": "",
-                                      mode: "none",
-                                      placeholder: unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder || unref(t)("to.common.placeholder.select"),
-                                      onFocus: multipleFilterFocus,
-                                      onBlur: multipleFilterBlur
-                                    }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "placeholder"])) : createCommentVNode("v-if", true)
-                                  ])) : createCommentVNode("v-if", true)
-                                ])
+                                      class: "to-select-input"
+                                    }, [
+                                      createCommentVNode(" \u591A\u9009\u53EF\u8F93\u5165\u6A21\u5F0F\u7684\u8F93\u5165\u6846 "),
+                                      _ctx.inputable && !_ctx.filterable && !_ctx.remoteMethod ? (openBlock(), createBlock(unref(ToInput), {
+                                        key: 0,
+                                        ref_key: "input",
+                                        ref: input,
+                                        modelValue: multipleInputValue.value,
+                                        "onUpdate:modelValue": ($event) => multipleInputValue.value = $event,
+                                        "sp-chars": _ctx.spChars,
+                                        disabled: unref($phone),
+                                        "prevent-focus": "",
+                                        mode: "none",
+                                        placeholder: unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder || unref(t)("to.common.placeholder.select"),
+                                        onFocus: multipleInputFocus,
+                                        onBlur: multipleInputBlur
+                                      }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "disabled", "placeholder"])) : createCommentVNode("v-if", true),
+                                      createCommentVNode(" \u591A\u9009\u53EF\u8FC7\u6EE4\u6A21\u5F0F filterable = true \u6216 \u8FDC\u7A0B\u641C\u7D22\u6A21\u5F0F remoteMethod \u5B58\u5728\u7684\u8F93\u5165\u6846 "),
+                                      _ctx.filterable || _ctx.remoteMethod ? (openBlock(), createBlock(unref(ToInput), {
+                                        key: 1,
+                                        ref_key: "filter",
+                                        ref: filter,
+                                        modelValue: multipleFilterValue.value,
+                                        "onUpdate:modelValue": ($event) => multipleFilterValue.value = $event,
+                                        "sp-chars": _ctx.inputable ? _ctx.spChars : false,
+                                        disabled: unref($phone),
+                                        "prevent-focus": "",
+                                        mode: "none",
+                                        placeholder: unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder || unref(t)("to.common.placeholder.select"),
+                                        onFocus: multipleFilterFocus,
+                                        onBlur: multipleFilterBlur
+                                      }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "disabled", "placeholder"])) : createCommentVNode("v-if", true),
+                                      createCommentVNode(" \u591A\u9009\u81EA\u5B9A\u4E49\u6570\u636E\u8BBE\u7F6E\u6A21\u5F0F\u7684\u8F93\u5165\u6846 "),
+                                      _ctx.setDataFn ? (openBlock(), createBlock(unref(ToInput), {
+                                        key: 2,
+                                        ref_key: "filter",
+                                        ref: filter,
+                                        modelValue: setDataInputValue.value,
+                                        "onUpdate:modelValue": ($event) => setDataInputValue.value = $event,
+                                        "sp-chars": _ctx.inputable ? _ctx.spChars : false,
+                                        "prevent-focus": "",
+                                        mode: "none",
+                                        placeholder: unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder || unref(t)("to.common.placeholder.select"),
+                                        onFocus: multipleFilterFocus,
+                                        onBlur: multipleFilterBlur
+                                      }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "placeholder"])) : createCommentVNode("v-if", true)
+                                    ])) : createCommentVNode("v-if", true)
+                                  ],
+                                  2
+                                  /* CLASS */
+                                )
                               ],
                               2112
                               /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
@@ -1354,6 +1522,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                       64
                       /* STABLE_FRAGMENT */
                     )),
+                    createCommentVNode(" \u6E05\u9664\u56FE\u6807 "),
+                    showClearIcon.value ? (openBlock(), createBlock(unref(ToIcon), {
+                      key: 3,
+                      class: "to-select-clear",
+                      link: "",
+                      value: "close",
+                      onClick: withModifiers(clearClick, ["stop"])
+                    })) : createCommentVNode("v-if", true),
                     createCommentVNode(" \u4E0B\u62C9\u7BAD\u5934\u56FE\u6807 "),
                     createElementVNode(
                       "span",