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

package/lib/packages/components/select/src/select.vue2.js

@@ -43,8 +43,13 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     vue.onMounted(() => {
       calcScale();
       window.addEventListener("resize", calcScale);
+      vue.nextTick(() => setupTagResizeObserver());
       vue.onUnmounted(() => {
         window.removeEventListener("resize", calcScale);
+        if (tagResizeObserver) {
+          tagResizeObserver.disconnect();
+          tagResizeObserver = null;
+        }
       });
     });
     const props = __props;
@@ -54,6 +59,28 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const $TouchUI = vue.inject("$TouchUI", {
       colors: ["primary", "success", "warning", "danger", "info", "default", "dark"]
     });
+    const ins = vue.getCurrentInstance();
+    const iClearType = vue.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 = vue.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.useDevice();
     const $phone = isPhone.value;
     const iValue = vue.ref(props.modelValue);
@@ -70,6 +97,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const multipleInputValue = vue.ref("");
     const multipleFilterValue = vue.ref("");
     const setDataInputValue = vue.ref("");
+    const isFiltering = vue.ref(false);
     const dataLoading = vue.ref(false);
     const errorTip = vue.ref("");
     const errorType = vue.ref("rule");
@@ -90,6 +118,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const popupFilter = vue.ref(null);
     const popupInput = vue.ref(null);
     const trigger = vue.ref(null);
+    const tagContainerRef = vue.ref(null);
     const options = vue.ref([]);
     const anotherOptions = vue.ref([]);
     const { selected } = useSelectOptionData.useSelectOptionData({
@@ -100,6 +129,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return true;
       if (props.remoteMethod)
         return true;
+      if (!isFiltering.value)
+        return true;
       const value = filterValue.value;
       if (value === "")
         return true;
@@ -110,12 +141,16 @@ var _sfc_main = /* @__PURE__ */ vue.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 = vue.computed(() => {
+      if (!isFiltering.value)
+        return false;
       let nomatch2 = true;
       let value = props.multiple ? multipleFilterValue.value : filterValue.value;
       if (value === "") {
@@ -285,7 +320,7 @@ var _sfc_main = /* @__PURE__ */ vue.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]: ""
@@ -528,6 +563,82 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       return arr;
     });
+    const visibleCount = vue.ref(Infinity);
+    let isRecalculating = false;
+    let tagResizeObserver = null;
+    const displaySelected = vue.computed(() => {
+      return selected.value.filter((item) => !item.hide);
+    });
+    const overflowCount = vue.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;
+      vue.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;
+        vue.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);
@@ -633,6 +744,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     };
     const filterInput = () => {
+      isFiltering.value = true;
       if (props.remoteMethod) {
         const keyword = props.multiple ? multipleFilterValue.value : filterValue.value;
         clearTimeout(remoteSearchTimer);
@@ -642,6 +754,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     };
     const filterClear = () => {
+      isFiltering.value = false;
       iValue.value = "";
     };
     const setDataLoading = (loading) => {
@@ -702,6 +815,10 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const clear = () => {
       clearChange();
     };
+    const clearClick = () => {
+      clear();
+      closeLayer();
+    };
     const clearChange = () => {
       if (props.multiple) {
         change("", []);
@@ -846,6 +963,21 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         disabled.value = newVal;
       }
     );
+    vue.watch(
+      () => props.isCount,
+      () => {
+        vue.nextTick(() => setupTagResizeObserver());
+      }
+    );
+    vue.watch(
+      selected,
+      () => {
+        if (props.isCount) {
+          vue.nextTick(() => recalcVisibleCount());
+        }
+      },
+      { deep: true }
+    );
     const getLabel = (val) => {
       const obj = options.value.find((item) => String(item[iValueText.value]) === String(val));
       if (obj && obj[iLabelText.value]) {
@@ -930,6 +1062,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     };
     const layerClose = () => {
+      isFiltering.value = false;
       if (!props.multiple) {
         if ((props.filterable || props.remoteMethod) && !props.inputable) {
           if (iValue.value) {
@@ -960,6 +1093,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       openOptionLayer();
     };
     const layerOpen = () => {
+      isFiltering.value = false;
       calcScale();
     };
     const compare = () => {
@@ -997,6 +1131,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             key: vue.unref(index.langKey),
             ref_key: "$el",
             ref: $el,
+            role: "button",
             flex: _ctx.flex ? _ctx.flex : null,
             class: vue.normalizeClass(["to-select", vue.unref(setClass)]),
             style: vue.normalizeStyle(vue.unref(setStyle)),
@@ -1076,7 +1211,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         ref: selector,
                         "onUpdate:modelValue": ($event) => iValue.value = $event
                       }, [
-                        _ctx.clearable ? (vue.openBlock(), vue.createElementBlock(
+                        _ctx.clearable && iClearType.value === "default" ? (vue.openBlock(), vue.createElementBlock(
                           "option",
                           {
                             key: 0,
@@ -1261,91 +1396,124 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                               { key: 2 },
                               [
                                 vue.createCommentVNode(" \u591A\u9009\u6807\u7B7E\u5BB9\u5668 "),
-                                vue.createElementVNode("span", { class: "to-select-tag" }, [
-                                  vue.createCommentVNode(" \u5DF2\u9009\u4E2D\u9879\u7684\u6807\u7B7E\u663E\u793A "),
-                                  vue.unref(selected).length > 0 && !(isAll.value && _ctx.useAllText) ? (vue.openBlock(true), vue.createElementBlock(
-                                    vue.Fragment,
-                                    { key: 0 },
-                                    vue.renderList(vue.unref(selected), (item, index) => {
-                                      return vue.openBlock(), vue.createElementBlock(
-                                        vue.Fragment,
-                                        null,
-                                        [
-                                          !item.hide ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.ToTag), {
-                                            key: index,
-                                            class: "to-select-item",
-                                            removable: _ctx.removable && !disabled.value,
-                                            onRemove: ($event) => removeTag(item)
-                                          }, {
-                                            default: vue.withCtx(() => [
-                                              vue.createTextVNode(
-                                                vue.toDisplayString(item[iLabelText.value]),
-                                                1
-                                                /* TEXT */
-                                              )
-                                            ]),
-                                            _: 2
-                                            /* DYNAMIC */
-                                          }, 1032, ["removable", "onRemove"])) : vue.createCommentVNode("v-if", true)
-                                        ],
-                                        64
-                                        /* STABLE_FRAGMENT */
-                                      );
-                                    }),
-                                    256
-                                    /* UNKEYED_FRAGMENT */
-                                  )) : vue.createCommentVNode("v-if", true),
-                                  vue.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 "),
-                                  !vue.unref($phone) || vue.unref($phone) && vue.unref(selected).length === 0 ? (vue.openBlock(), vue.createElementBlock("span", {
-                                    key: 1,
-                                    class: "to-select-input"
-                                  }, [
-                                    vue.createCommentVNode(" \u591A\u9009\u53EF\u8F93\u5165\u6A21\u5F0F\u7684\u8F93\u5165\u6846 "),
-                                    _ctx.inputable && !_ctx.filterable && !_ctx.remoteMethod ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ToInput), {
-                                      key: 0,
-                                      ref_key: "input",
-                                      ref: input,
-                                      modelValue: multipleInputValue.value,
-                                      "onUpdate:modelValue": ($event) => multipleInputValue.value = $event,
-                                      "sp-chars": _ctx.spChars,
-                                      disabled: vue.unref($phone),
-                                      "prevent-focus": "",
-                                      mode: "none",
-                                      placeholder: vue.unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select"),
-                                      onFocus: multipleInputFocus,
-                                      onBlur: multipleInputBlur
-                                    }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "disabled", "placeholder"])) : vue.createCommentVNode("v-if", true),
-                                    vue.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 ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ToInput), {
+                                vue.createElementVNode(
+                                  "span",
+                                  {
+                                    ref_key: "tagContainerRef",
+                                    ref: tagContainerRef,
+                                    class: vue.normalizeClass(["to-select-tag", { "is-collapse": _ctx.isCount }])
+                                  },
+                                  [
+                                    vue.createCommentVNode(" \u5DF2\u9009\u4E2D\u9879\u7684\u6807\u7B7E\u663E\u793A "),
+                                    vue.unref(selected).length > 0 && !(isAll.value && _ctx.useAllText) ? (vue.openBlock(), vue.createElementBlock(
+                                      vue.Fragment,
+                                      { key: 0 },
+                                      [
+                                        (vue.openBlock(true), vue.createElementBlock(
+                                          vue.Fragment,
+                                          null,
+                                          vue.renderList(_ctx.isCount ? displaySelected.value : vue.unref(selected), (item, index) => {
+                                            return vue.openBlock(), vue.createElementBlock(
+                                              vue.Fragment,
+                                              { key: index },
+                                              [
+                                                (_ctx.isCount ? index < visibleCount.value : !item.hide) ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.ToTag), {
+                                                  key: 0,
+                                                  class: "to-select-item",
+                                                  removable: _ctx.removable && !disabled.value,
+                                                  onRemove: ($event) => removeTag(item)
+                                                }, {
+                                                  default: vue.withCtx(() => [
+                                                    vue.createTextVNode(
+                                                      vue.toDisplayString(item[iLabelText.value]),
+                                                      1
+                                                      /* TEXT */
+                                                    )
+                                                  ]),
+                                                  _: 2
+                                                  /* DYNAMIC */
+                                                }, 1032, ["removable", "onRemove"])) : vue.createCommentVNode("v-if", true)
+                                              ],
+                                              64
+                                              /* STABLE_FRAGMENT */
+                                            );
+                                          }),
+                                          128
+                                          /* KEYED_FRAGMENT */
+                                        )),
+                                        vue.createCommentVNode(" \u6298\u53E0\u6A21\u5F0F\u4E0B\u663E\u793A +N "),
+                                        _ctx.isCount && overflowCount.value > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.ToTag), {
+                                          key: 0,
+                                          class: "to-select-overflow"
+                                        }, {
+                                          default: vue.withCtx(() => [
+                                            vue.createTextVNode(
+                                              " +" + vue.toDisplayString(overflowCount.value),
+                                              1
+                                              /* TEXT */
+                                            )
+                                          ]),
+                                          _: 1
+                                          /* STABLE */
+                                        })) : vue.createCommentVNode("v-if", true)
+                                      ],
+                                      64
+                                      /* STABLE_FRAGMENT */
+                                    )) : vue.createCommentVNode("v-if", true),
+                                    vue.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 "),
+                                    !vue.unref($phone) || vue.unref($phone) && vue.unref(selected).length === 0 ? (vue.openBlock(), vue.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: vue.unref($phone),
-                                      "prevent-focus": "",
-                                      mode: "none",
-                                      placeholder: vue.unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select"),
-                                      onFocus: multipleFilterFocus,
-                                      onBlur: multipleFilterBlur
-                                    }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "disabled", "placeholder"])) : vue.createCommentVNode("v-if", true),
-                                    vue.createCommentVNode(" \u591A\u9009\u81EA\u5B9A\u4E49\u6570\u636E\u8BBE\u7F6E\u6A21\u5F0F\u7684\u8F93\u5165\u6846 "),
-                                    _ctx.setDataFn ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.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: vue.unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select"),
-                                      onFocus: multipleFilterFocus,
-                                      onBlur: multipleFilterBlur
-                                    }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "placeholder"])) : vue.createCommentVNode("v-if", true)
-                                  ])) : vue.createCommentVNode("v-if", true)
-                                ])
+                                      class: "to-select-input"
+                                    }, [
+                                      vue.createCommentVNode(" \u591A\u9009\u53EF\u8F93\u5165\u6A21\u5F0F\u7684\u8F93\u5165\u6846 "),
+                                      _ctx.inputable && !_ctx.filterable && !_ctx.remoteMethod ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ToInput), {
+                                        key: 0,
+                                        ref_key: "input",
+                                        ref: input,
+                                        modelValue: multipleInputValue.value,
+                                        "onUpdate:modelValue": ($event) => multipleInputValue.value = $event,
+                                        "sp-chars": _ctx.spChars,
+                                        disabled: vue.unref($phone),
+                                        "prevent-focus": "",
+                                        mode: "none",
+                                        placeholder: vue.unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select"),
+                                        onFocus: multipleInputFocus,
+                                        onBlur: multipleInputBlur
+                                      }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "disabled", "placeholder"])) : vue.createCommentVNode("v-if", true),
+                                      vue.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 ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.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: vue.unref($phone),
+                                        "prevent-focus": "",
+                                        mode: "none",
+                                        placeholder: vue.unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select"),
+                                        onFocus: multipleFilterFocus,
+                                        onBlur: multipleFilterBlur
+                                      }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "disabled", "placeholder"])) : vue.createCommentVNode("v-if", true),
+                                      vue.createCommentVNode(" \u591A\u9009\u81EA\u5B9A\u4E49\u6570\u636E\u8BBE\u7F6E\u6A21\u5F0F\u7684\u8F93\u5165\u6846 "),
+                                      _ctx.setDataFn ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.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: vue.unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select"),
+                                        onFocus: multipleFilterFocus,
+                                        onBlur: multipleFilterBlur
+                                      }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "placeholder"])) : vue.createCommentVNode("v-if", true)
+                                    ])) : vue.createCommentVNode("v-if", true)
+                                  ],
+                                  2
+                                  /* CLASS */
+                                )
                               ],
                               2112
                               /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
@@ -1358,6 +1526,14 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       64
                       /* STABLE_FRAGMENT */
                     )),
+                    vue.createCommentVNode(" \u6E05\u9664\u56FE\u6807 "),
+                    showClearIcon.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToIcon), {
+                      key: 3,
+                      class: "to-select-clear",
+                      link: "",
+                      value: "close",
+                      onClick: vue.withModifiers(clearClick, ["stop"])
+                    })) : vue.createCommentVNode("v-if", true),
                     vue.createCommentVNode(" \u4E0B\u62C9\u7BAD\u5934\u56FE\u6807 "),
                     vue.createElementVNode(
                       "span",