@touchvue/ui 1.0.0-beta.6 → 1.0.0-beta.61

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

@@ -3,25 +3,24 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var index$7 = require('../../../locale/index.js');
+var index = require('../../../locale/index.js');
 var select = require('./select.js');
 var index$8 = require('../../button/index.js');
-var index = require('../../icon/index.js');
-var index$5 = require('../../grid/index.js');
-var index$6 = require('../../header/index.js');
-var index$1 = require('../../input/index.js');
-var index$4 = require('../../padding/index.js');
+var index$1 = require('../../icon/index.js');
+var index$6 = require('../../grid/index.js');
+var index$7 = require('../../header/index.js');
+var index$2 = require('../../input/index.js');
+var index$5 = require('../../padding/index.js');
 var index$a = require('../../checkbox/index.js');
-var index$2 = require('../../tag/index.js');
-var index$3 = require('../../float/index.js');
+var index$3 = require('../../tag/index.js');
+var index$4 = require('../../float/index.js');
 var index$9 = require('../../scroll/index.js');
-var index$b = require('../../submit/index.js');
 var dis = require('../../../directives/dis/src/dis.js');
 var color = require('../../../directives/color/src/color.js');
 var useDevice = require('../../../hooks/useDevice.js');
 var useSelectOptionData = require('./hooks/use-select-option-data.js');
 var useSelectClassStyle = require('./hooks/use-select-class-style.js');
-var types = require('../../../utils/types.js');
+var useSetClass = require('../../../hooks/useSetClass.js');
 
 const __default__ = vue.defineComponent({
   name: "ToSelect",
@@ -32,6 +31,28 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
   props: select.selectProps,
   emits: ["change", "select", "update:modelValue", "option-loaded"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const currentScale = vue.ref(1);
+    const calcScale = () => {
+      if (!$el.value)
+        return;
+      const layoutWidth = $el.value.offsetWidth;
+      if (layoutWidth === 0)
+        return;
+      const visualWidth = $el.value.getBoundingClientRect().width;
+      currentScale.value = Number((visualWidth / layoutWidth).toFixed(4));
+    };
+    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;
     const emit = __emit;
     const ToForm = vue.inject("ToForm", null);
@@ -39,6 +60,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);
@@ -47,7 +90,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const focused = vue.ref(false);
     const blurByLayer = vue.ref(false);
     const layerSlide = vue.ref(false);
-    const layerPosition = vue.ref("auto");
+    const layerPosition = vue.ref("");
     const disabled = vue.ref(props.disabled);
     const isChanging = vue.ref(false);
     const filterValue = vue.ref("");
@@ -55,6 +98,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");
@@ -74,13 +118,21 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const optionLayer = vue.ref(null);
     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 optionVisibleCount = vue.ref(0);
+    const optionLoading = vue.ref(false);
     const { selected } = useSelectOptionData.useSelectOptionData({
       props
     });
     const filterByValue = (item) => {
-      if (!props.filterable)
+      if (!props.filterable && !props.remoteMethod)
+        return true;
+      if (props.remoteMethod)
+        return true;
+      if (!isFiltering.value)
         return true;
       const value = filterValue.value;
       if (value === "")
@@ -88,7 +140,11 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return item[iLabelText.value].includes(value);
     };
     const multipleFilter = (item) => {
-      if (!props.filterable)
+      if (!props.filterable && !props.remoteMethod)
+        return true;
+      if (props.remoteMethod)
+        return true;
+      if (!isFiltering.value)
         return true;
       const value = multipleFilterValue.value;
       if (value === "")
@@ -96,18 +152,45 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       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 === "" || options.value.findIndex((option) => option[iLabelText.value].includes(value)) > -1) {
+      if (value === "") {
         nomatch2 = false;
+      } else if (!props.remoteMethod) {
+        if (filteredOptions.value.length > 0) {
+          nomatch2 = false;
+        }
+      } else {
+        if (options.value.length > 0) {
+          nomatch2 = false;
+        }
       }
       return nomatch2;
     });
     const nodata = vue.computed(() => {
       return options.value.length === 0;
     });
+    const filteredOptions = vue.computed(() => {
+      if (!props.filterable && !props.remoteMethod)
+        return options.value;
+      const value = props.multiple ? multipleFilterValue.value : filterValue.value;
+      if (!value)
+        return options.value;
+      return options.value.filter((item) => String(item[iLabelText.value]).toLowerCase().includes(value.toLowerCase()));
+    });
+    const displayOptions = vue.computed(() => {
+      if (props.filterable && (filterValue.value || multipleFilterValue.value)) {
+        return filteredOptions.value;
+      }
+      if (optionVisibleCount.value && options.value.length > optionVisibleCount.value) {
+        return options.value.slice(0, optionVisibleCount.value);
+      }
+      return options.value;
+    });
     const setOptions = () => {
-      if (props.data && props.data.length > 0) {
+      if (props.data) {
         setData();
       }
       if (props.api) {
@@ -124,14 +207,14 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             obj[iLabelText.value] = obj[iValueText.value] = el;
             arr.push(obj);
           }
-          if ($phone && props.filterable) {
+          if ($phone && (props.filterable || props.remoteMethod)) {
             options.value = arr.slice(0, 100);
             anotherOptions.value = arr.slice(100);
           } else {
             options.value = arr;
           }
         } else {
-          if ($phone && props.filterable) {
+          if ($phone && (props.filterable || props.remoteMethod)) {
             options.value = props.data.slice(0, 100);
             anotherOptions.value = props.data.slice(100);
           } else {
@@ -145,6 +228,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
         setValue();
         setPlaceholder();
+        optionVisibleCount.value = options.value.length > props.optionPageSize ? props.optionPageSize : 0;
         emit("option-loaded", options.value);
       }
     };
@@ -177,12 +261,13 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
         if (sessionStorage.getItem("static." + props.api)) {
           options.value = JSON.parse(sessionStorage.getItem("static." + props.api));
-          if ($phone && props.filterable) {
+          if ($phone && (props.filterable || props.remoteMethod)) {
             anotherOptions.value = options.value.slice(100);
             options.value = options.value.slice(0, 100);
           }
           setValue();
           setPlaceholder();
+          optionVisibleCount.value = options.value.length > props.optionPageSize ? props.optionPageSize : 0;
           emit("option-loaded", options.value);
         } else {
           dataLoading.value = true;
@@ -212,12 +297,13 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
               if (Array.isArray(res)) {
                 options.value = res;
                 sessionStorage.setItem("static." + props.api, JSON.stringify(res));
-                if ($phone && props.filterable) {
+                if ($phone && (props.filterable || props.remoteMethod)) {
                   anotherOptions.value = res.slice(100);
                   options.value = res.slice(0, 100);
                 }
                 setValue();
                 setPlaceholder();
+                optionVisibleCount.value = options.value.length > props.optionPageSize ? props.optionPageSize : 0;
                 emit("option-loaded", options.value);
               } else if (res.code === iSuccessCode.value) {
                 let data = res;
@@ -229,21 +315,22 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 }
                 options.value = data;
                 sessionStorage.setItem("static." + props.api, JSON.stringify(data));
-                if ($phone && props.filterable) {
+                if ($phone && (props.filterable || props.remoteMethod)) {
                   anotherOptions.value = data.slice(100);
                   options.value = data.slice(0, 100);
                 }
                 setValue();
                 setPlaceholder();
+                optionVisibleCount.value = options.value.length > props.optionPageSize ? props.optionPageSize : 0;
                 emit("option-loaded", options.value);
               } else {
                 options.value = [];
-                console.error(index$7.t("to.select.tip.error.res", `select api(${props.api})`));
+                console.error(index.t("to.select.tip.error.res", `select api(${props.api})`));
               }
             },
             onError: () => {
               dataLoading.value = false;
-              console.error(index$7.t("to.select.tip.error.api", `select api(${props.api}) `));
+              console.error(index.t("to.select.tip.error.api", `select api(${props.api}) `));
             }
           };
           const req = props.httpRequest(requestOptions);
@@ -257,13 +344,24 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (props.native) {
         return;
       }
-      if (!props.multiple && props.clearable && !props.inputable && !props.setDataFn && !props.filterable && (!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]: ""
         });
       }
     };
+    const handleOptionScroll = () => {
+      if (optionVisibleCount.value && optionVisibleCount.value < options.value.length && !optionLoading.value) {
+        optionLoading.value = true;
+        optionVisibleCount.value = Math.min(optionVisibleCount.value + props.optionPageSize, options.value.length);
+        vue.nextTick(() => {
+          setTimeout(() => {
+            optionLoading.value = false;
+          }, 300);
+        });
+      }
+    };
     const setValue = () => {
       if (props.multiple) {
         selected.value = [];
@@ -271,9 +369,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           const arr = Array.isArray(iValue.value) ? iValue.value : iValue.value.toString().split(props.splitSymbol || ",");
           arr.forEach((item) => {
             if (item && item.toString().trim()) {
-              let option = options.value.find(
-                (option2) => String(option2[iValueText.value]) === String(item)
-              );
+              let option = options.value.find((option2) => String(option2[iValueText.value]) === String(item));
               if (option) {
                 selected.value.push(option);
               } else if (props.inputable) {
@@ -287,9 +383,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           });
         }
       } else {
-        let option = options.value.find(
-          (option2) => String(option2[iValueText.value]) === String(iValue.value)
-        );
+        let option = options.value.find((option2) => String(option2[iValueText.value]) === String(iValue.value));
         if (option) {
           selected.value = option;
         } else {
@@ -300,8 +394,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             };
           } else {
             selected.value = {
-              [iLabelText.value]: "",
-              [iValueText.value]: ""
+              [iLabelText.value]: iValue.value,
+              [iValueText.value]: iValue.value
             };
           }
         }
@@ -325,7 +419,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const selectAll = () => {
       allChange();
     };
-    const deselect = () => {
+    const inverse = () => {
       reverseChange();
     };
     const multipleItemChange = (value, item) => {
@@ -346,6 +440,10 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         selectedOptions = selectedOptions.filter((option) => option[iValueText.value] !== value);
       }
       change(arr.join(props.splitSymbol || ","), selectedOptions);
+      vue.nextTick(() => {
+        multipleFilterValue.value = "";
+        filter.value.focus();
+      });
     };
     const removeTag = (item) => {
       if (props.disabled || disabled.value)
@@ -387,7 +485,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         layerSlide.value = true;
         layerPosition.value = "bottom";
       }
-      if (props.optionDisplay === "popup" || $phone && (props.filterable || props.inputable)) {
+      if (props.optionDisplay === "popup" || $phone && (props.filterable || props.inputable || props.remoteMethod)) {
         layerSlide.value = true;
         layerPosition.value = "right";
         if (!props.optionWidth) {
@@ -491,6 +589,89 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       changed,
       ToForm
     });
+    const setOptionClass = vue.computed(() => {
+      let arr = [];
+      if (props.mode) {
+        arr.push(...useSetClass.getModeClasses(props.mode));
+      }
+      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);
@@ -509,8 +690,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
     const optionLayerTrigger = vue.ref(null);
     const openOptionLayer = () => {
-      const trigger = props.optionDisplay == "popup" ? null : $el.value;
-      optionLayer.value.toggle(trigger);
+      const el = props.optionDisplay == "popup" ? null : trigger.value;
+      optionLayer.value.toggle(el);
     };
     const click = () => {
       if (!props.native && !(props.disabled || disabled.value)) {
@@ -519,7 +700,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
     const phoneCloseLayer = () => {
       optionLayer.value.close();
-      if (props.filterable && $phone) {
+      if ((props.filterable || props.remoteMethod) && $phone) {
         options.value = options.value.slice(0, 100);
       }
     };
@@ -527,6 +708,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       blurByLayer.value = true;
     };
     const focus = () => {
+      errorTip.value = "";
       focused.value = true;
     };
     const blur = () => {
@@ -565,7 +747,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         layerSlide.value = false;
         layerClose();
       }
-      blurByLayer.value = false;
+      blurByLayer.value = true;
     };
     const multipleInputFocus = () => {
       focused.value = true;
@@ -576,7 +758,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         layerSlide.value = false;
         layerClose();
       }
-      blurByLayer.value = false;
+      blurByLayer.value = true;
     };
     const multipleFilterFocus = () => {
       focused.value = true;
@@ -588,9 +770,24 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
       }
     };
+    let remoteSearchTimer = null;
+    const remoteSearch = (keyword) => {
+      if (props.remoteMethod) {
+        props.remoteMethod(keyword);
+      }
+    };
     const filterInput = () => {
+      isFiltering.value = true;
+      if (props.remoteMethod) {
+        const keyword = props.multiple ? multipleFilterValue.value : filterValue.value;
+        clearTimeout(remoteSearchTimer);
+        remoteSearchTimer = setTimeout(() => {
+          remoteSearch(keyword);
+        }, 300);
+      }
     };
     const filterClear = () => {
+      isFiltering.value = false;
       iValue.value = "";
     };
     const setDataLoading = (loading) => {
@@ -600,9 +797,9 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (!(props.multiple && props.inputable)) {
         toggleLayer();
       } else {
-        let value = props.filterable ? multipleFilterValue.value : multipleInputValue.value;
+        let value = props.filterable || props.remoteMethod ? multipleFilterValue.value : multipleInputValue.value;
         if (selected.value.find((item) => item[iLabelText.value] === value) || selected.value.find((item) => item[iValueText.value] === value)) {
-          errorTip.value = index$7.t("to.select.tip.error.repetition");
+          errorTip.value = index.t("to.select.tip.error.repetition");
           errorType.value = "rule";
           return;
         }
@@ -628,13 +825,13 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         } else {
           selected.value.push(newOption);
         }
-        if (props.filterable) {
+        if (props.filterable || props.remoteMethod) {
           multipleFilterValue.value = "";
         } else {
           multipleInputValue.value = "";
         }
         if ($phone) {
-          if (props.filterable) {
+          if (props.filterable || props.remoteMethod) {
             setTimeout(() => {
               var _a;
               (_a = popupFilter.value) == null ? void 0 : _a.focus();
@@ -651,13 +848,17 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const clear = () => {
       clearChange();
     };
+    const clearClick = () => {
+      clear();
+      closeLayer();
+    };
     const clearChange = () => {
       if (props.multiple) {
         change("", []);
       } else {
         change("", null);
       }
-      if (props.focusWhenClear && props.filterable) {
+      if (props.focusWhenClear && (props.filterable || props.remoteMethod)) {
         layerSlide.value = true;
       }
     };
@@ -687,15 +888,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     vue.watch(
       selected,
       (val) => {
-        var _a;
-        if (props.optionDisplay !== "none" && ((_a = optionLayer.value) == null ? void 0 : _a.show)) {
-          vue.nextTick(() => {
-            var _a2;
-            if (((_a2 = optionLayer.value) == null ? void 0 : _a2.set) && optionLayerTrigger.value) {
-              optionLayer.value.set(optionLayerTrigger.value);
-            }
-          });
-        }
         if (props.multiple) {
           let arr = [];
           val.map((item) => {
@@ -750,21 +942,14 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     });
     vue.watch(iValue, (val) => {
       setSelected(val);
-      let finalVal = val;
-      if (props.multiple && props.valueType === "array" && types.isString(val)) {
-        finalVal = val ? String(val).split(",") : [];
-      }
-      emit("change", finalVal, selected.value);
       emit("update:modelValue", val);
       valueChange(val);
     });
     vue.watch(
       () => props.modelValue,
       (newVal) => {
-        if (!isChanging.value) {
-          iValue.value = String(newVal || "");
-          setValue();
-        }
+        iValue.value = String(newVal || "");
+        setValue();
       },
       { immediate: true }
     );
@@ -811,8 +996,23 @@ 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) => item[iValueText.value] === val);
+      const obj = options.value.find((item) => String(item[iValueText.value]) === String(val));
       if (obj && obj[iLabelText.value]) {
         return obj[iLabelText.value];
       }
@@ -880,10 +1080,10 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         if (props.inputable) {
           inputValue.value = getLabel(val) || val;
         }
-        if (props.filterable && !props.inputable) {
+        if ((props.filterable || props.remoteMethod) && !props.inputable) {
           filterValue.value = getLabel(val) || "";
         }
-        if (props.filterable && props.inputable) {
+        if ((props.filterable || props.remoteMethod) && props.inputable) {
           filterValue.value = getLabel(val) || val;
         }
         if (props.setDataFn && !props.inputable) {
@@ -895,8 +1095,9 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     };
     const layerClose = () => {
+      isFiltering.value = false;
       if (!props.multiple) {
-        if (props.filterable && !props.inputable) {
+        if ((props.filterable || props.remoteMethod) && !props.inputable) {
           if (iValue.value) {
             const label = getLabel(iValue.value);
             if (label) {
@@ -912,7 +1113,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         if (props.inputable) {
           multipleInputValue.value = "";
         }
-        if (props.filterable) {
+        if (props.filterable || props.remoteMethod) {
           multipleFilterValue.value = "";
         }
       }
@@ -924,6 +1125,10 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const toggleLayer = () => {
       openOptionLayer();
     };
+    const layerOpen = () => {
+      isFiltering.value = false;
+      calcScale();
+    };
     const compare = () => {
       valueStore.value.unshift(iValue.value);
     };
@@ -940,720 +1145,1241 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       compare,
       setDisabled,
       restore,
-      changed
+      changed,
+      errorTip,
+      errorType
     });
     return (_ctx, _cache) => {
       var _a;
-      const _directive_align = vue.resolveDirective("align");
-      const _directive_size = vue.resolveDirective("size");
       const _directive_tip = vue.resolveDirective("tip");
-      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
-        id: _ctx.id,
-        ref_key: "$el",
-        ref: $el,
-        class: vue.normalizeClass(["to-select", vue.unref(setClass)]),
-        style: vue.normalizeStyle(vue.unref(setStyle)),
-        tabindex: _ctx.inputable || _ctx.filterable ? "-1" : _ctx.tabindex,
-        onMousedown: layerMousedown,
-        onFocus: focus,
-        onBlur: blur,
-        onKeyup: [
-          vue.withKeys(enter, ["enter"]),
-          vue.withKeys(closeLayer, ["esc"])
-        ],
-        onClick: click
-      }, [
-        _ctx.verifiable && (_ctx.rule || _ctx.required || ((_a = vue.unref(ToFormItem)) == null ? void 0 : _a.required)) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
-          key: 0,
-          trim: _ctx.trim,
-          req: validateRequired.value,
-          class: "to-validate",
-          desc: validateDesc.value,
-          rule: _ctx.rule,
-          value: validateValue.value
-        }, null, 8, ["trim", "req", "desc", "rule", "value"])), [
-          [vue.vShow, false]
-        ]) : vue.createCommentVNode("", true),
-        _ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("span", {
-          key: 1,
-          class: "to-select-prefix"
-        }, [
-          vue.renderSlot(_ctx.$slots, "prefix")
-        ])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("span", {
-          ref_key: "optionLayerTrigger",
-          ref: optionLayerTrigger,
-          class: "to-select-content"
-        }, [
-          _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(index.ToIcon), vue.mergeProps({ key: 0 }, _ctx.iconProps, {
-            value: _ctx.icon,
-            mode: "none",
-            class: "to-select-icon"
-          }), null, 16, ["value"])) : vue.createCommentVNode("", true),
-          _ctx.prefix ? (vue.openBlock(), vue.createElementBlock("span", {
-            key: 1,
-            class: "to-select-prefix-label"
-          })) : vue.createCommentVNode("", true),
-          _ctx.native ? (vue.openBlock(), vue.createElementBlock("span", {
-            key: 2,
-            class: "to-select-value"
+      const _directive_align = vue.resolveDirective("align");
+      return vue.openBlock(), vue.createElementBlock(
+        vue.Fragment,
+        null,
+        [
+          vue.createCommentVNode(" \u9009\u62E9\u5668\u4E3B\u5BB9\u5668 "),
+          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+            id: _ctx.id,
+            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)),
+            tabindex: _ctx.tabindex,
+            onMousedown: layerMousedown,
+            onFocus: focus,
+            onBlur: blur,
+            onKeyup: [
+              vue.withKeys(enter, ["enter"]),
+              vue.withKeys(closeLayer, ["esc"])
+            ],
+            onClick: click
           }, [
-            vue.withDirectives(vue.createElementVNode("select", {
-              ref_key: "selector",
-              ref: selector,
-              "onUpdate:modelValue": ($event) => iValue.value = $event
-            }, [
-              _ctx.clearable ? (vue.openBlock(), vue.createElementBlock("option", {
-                key: 0,
-                value: ""
-              }, vue.toDisplayString(_ctx.placeholder), 1)) : vue.createCommentVNode("", true),
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(options.value, (item, index) => {
-                return vue.openBlock(), vue.createElementBlock("option", {
-                  key: index,
-                  value: item[iValueText.value]
-                }, vue.toDisplayString(item[iLabelText.value]), 9, ["value"]);
-              }), 128))
-            ], 8, ["onUpdate:modelValue"]), [
-              [vue.vModelSelect, iValue.value]
-            ])
-          ])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
-            !_ctx.multiple ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-              !_ctx.inputable && !_ctx.filterable && !_ctx.setDataFn || vue.unref($phone) ? (vue.openBlock(), vue.createElementBlock("span", {
-                key: 0,
-                class: "to-select-value"
-              }, [
-                vue.unref(selected)[iLabelText.value] ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  vue.createTextVNode(vue.toDisplayString(vue.unref(selected)[iLabelText.value]), 1)
-                ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                  vue.createTextVNode(vue.toDisplayString(_ctx.placeholder), 1)
-                ], 64))
-              ])) : (vue.openBlock(), vue.createElementBlock("span", {
-                key: 1,
-                class: "to-select-input"
-              }, [
-                _ctx.inputable && !_ctx.filterable && !_ctx.setDataFn ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToInput), {
+            vue.createElementVNode(
+              "div",
+              {
+                ref_key: "trigger",
+                ref: trigger,
+                class: "to-select-el"
+              },
+              [
+                vue.createCommentVNode(" \u8868\u5355\u9A8C\u8BC1\u5143\u7D202\uFF08\u9690\u85CF\uFF09 "),
+                _ctx.verifiable && (_ctx.rule || _ctx.required || ((_a = vue.unref(ToFormItem)) == null ? void 0 : _a.required)) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
                   key: 0,
-                  ref_key: "input",
-                  ref: input,
-                  modelValue: inputValue.value,
-                  "onUpdate:modelValue": ($event) => inputValue.value = $event,
-                  "sp-chars": _ctx.spChars,
-                  tabindex: _ctx.tabindex,
-                  clearable: _ctx.clearable,
-                  "prevent-focus": "",
-                  width: "full",
-                  mode: "none",
-                  placeholder: _ctx.placeholder,
-                  onFocus: inputFocus,
-                  onKeyup: inputInput,
-                  onBlur: inputBlur
-                }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "tabindex", "clearable", "placeholder"])) : vue.createCommentVNode("", true),
-                _ctx.filterable ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToInput), {
+                  trim: _ctx.trim,
+                  req: validateRequired.value,
+                  class: "to-validate",
+                  desc: validateDesc.value,
+                  rule: _ctx.rule,
+                  value: validateValue.value
+                }, null, 8, ["trim", "req", "desc", "rule", "value"])), [
+                  [vue.vShow, false]
+                ]) : vue.createCommentVNode("v-if", true),
+                vue.createCommentVNode(" \u524D\u7F00\u63D2\u69FD "),
+                _ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("span", {
                   key: 1,
-                  ref_key: "filter",
-                  ref: filter,
-                  modelValue: filterValue.value,
-                  "onUpdate:modelValue": ($event) => filterValue.value = $event,
-                  "focus-when-clear": _ctx.focusWhenClear,
-                  "sp-chars": _ctx.inputable ? _ctx.spChars : false,
-                  tabindex: _ctx.tabindex,
-                  clearable: _ctx.clearable,
-                  "prevent-focus": "",
-                  width: "full",
-                  mode: "none",
-                  placeholder: _ctx.placeholder,
-                  onClear: filterClear,
-                  onFocus: filterFocus,
-                  onKeyup: filterInput,
-                  onBlur: filterBlur
-                }, null, 8, ["modelValue", "onUpdate:modelValue", "focus-when-clear", "sp-chars", "tabindex", "clearable", "placeholder"])) : vue.createCommentVNode("", true),
-                _ctx.setDataFn ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToInput), {
+                  class: "to-select-prefix"
+                }, [
+                  vue.renderSlot(_ctx.$slots, "prefix")
+                ])) : vue.createCommentVNode("v-if", true),
+                vue.createCommentVNode(" \u524D\u7F00\u6587\u672C "),
+                _ctx.prefix ? (vue.openBlock(), vue.createElementBlock("span", {
                   key: 2,
-                  modelValue: setDataInputValue.value,
-                  "onUpdate:modelValue": ($event) => setDataInputValue.value = $event,
-                  "sp-chars": _ctx.inputable ? _ctx.spChars : false,
-                  tabindex: _ctx.tabindex,
-                  clearable: _ctx.clearable,
-                  "prevent-focus": "",
-                  width: "full",
-                  mode: "none",
-                  placeholder: _ctx.placeholder,
-                  onClear: filterClear,
-                  onFocus: filterFocus,
-                  onKeyup: filterInput,
-                  onBlur: filterBlur
-                }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "tabindex", "clearable", "placeholder"])) : vue.createCommentVNode("", true)
-              ]))
-            ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-              vue.unref(selected).filter((item) => !item.hide).length === 0 && !_ctx.inputable && !_ctx.filterable && !_ctx.setDataFn ? (vue.openBlock(), vue.createElementBlock("span", {
-                key: 0,
-                class: "to-select-value"
-              }, vue.toDisplayString(_ctx.placeholder), 1)) : isAll.value && _ctx.useAllText ? (vue.openBlock(), vue.createElementBlock("span", {
-                key: 1,
-                class: "to-select-value"
-              }, vue.toDisplayString(_ctx.allText), 1)) : (vue.openBlock(), vue.createElementBlock("span", {
-                key: 2,
-                class: "to-select-tag"
-              }, [
-                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$2.ToTag), {
-                      key: index,
-                      deletable: !disabled.value,
-                      onDelete: ($event) => removeTag(item)
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createTextVNode(vue.toDisplayString(item[iLabelText.value]), 1)
-                      ]),
-                      _: 2
-                    }, 1032, ["deletable", "onDelete"])) : vue.createCommentVNode("", true)
-                  ], 64);
-                }), 256)) : vue.createCommentVNode("", true),
-                !vue.unref($phone) || vue.unref($phone) && vue.unref(selected).length === 0 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                  _ctx.inputable && !_ctx.filterable ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.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,
-                    onFocus: multipleInputFocus,
-                    onBlur: multipleInputBlur
-                  }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "disabled", "placeholder"])) : vue.createCommentVNode("", true),
-                  _ctx.filterable ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.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,
-                    onFocus: multipleFilterFocus,
-                    onBlur: multipleFilterBlur
-                  }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "disabled", "placeholder"])) : vue.createCommentVNode("", true),
-                  _ctx.setDataFn ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.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,
-                    onFocus: multipleFilterFocus,
-                    onBlur: multipleFilterBlur
-                  }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "placeholder"])) : vue.createCommentVNode("", true)
-                ], 64)) : vue.createCommentVNode("", true)
-              ]))
-            ], 64))
-          ], 64)),
-          _ctx.suffix ? (vue.openBlock(), vue.createElementBlock("span", {
-            key: 4,
-            class: "to-select-suffix-label"
-          }, vue.toDisplayString(_ctx.suffix), 1)) : vue.createCommentVNode("", true)
-        ], 512),
-        _ctx.$slots.suffix ? (vue.openBlock(), vue.createElementBlock("span", {
-          key: 2,
-          class: "to-select-suffix"
-        }, [
-          vue.renderSlot(_ctx.$slots, "suffix")
-        ])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("span", {
-          class: vue.normalizeClass(["to-select-arrow", `type-${_ctx.arrowType}`])
-        }, null, 2),
-        errorTip.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
-          key: 3,
-          class: "to-box-tip"
-        }, [
-          errorType.value === "rule" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            _ctx.inputable ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-              vue.createTextVNode("\u8F93\u5165\u6709\u8BEF")
-            ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-              vue.createTextVNode("\u9009\u62E9\u6709\u8BEF")
-            ], 64)),
-            vue.createVNode(vue.unref(index.ToIcon), {
-              value: "help",
-              color: "danger",
-              mode: "toast",
-              fillet: "round"
-            })
-          ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createTextVNode(" \u4E0D\u80FD\u4E3A\u7A7A ")
-          ], 64))
-        ])), [
-          [vue.unref(color.default), "danger"]
-        ]) : vue.createCommentVNode("", true),
-        vue.createVNode(vue.unref(index$3.ToFloat), {
-          ref_key: "optionLayer",
-          ref: optionLayer,
-          align: _ctx.optionDisplay === "popup" ? "center" : _ctx.optionAlign,
-          lazy: _ctx.lazy,
-          width: iOptionWidth.value,
-          slide: layerSlide.value,
-          position: layerPosition.value,
-          onClosed: layerClose,
-          onMousedown: layerMousedown
-        }, {
-          default: vue.withCtx(() => [
-            dataLoading.value ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$4.ToPadding), {
-              key: 0,
-              value: 2
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(index.ToIcon), { value: "loading" })
-              ]),
-              _: 1
-            })), [
-              [_directive_align, "center"]
-            ]) : vue.renderSlot(_ctx.$slots, "default", {
-              key: 1,
-              data: options.value
-            }, () => [
-              _ctx.optionDisplay === "popup" || (_ctx.inputable || _ctx.filterable) && vue.unref($phone) ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.ToGrid), {
-                key: 0,
-                style: { "width": "100%" },
-                type: "v"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(index$5.ToGridItem), {
-                    side: "",
-                    width: "full"
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(index$4.ToPadding), { value: "1" }, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(vue.unref(index$6.ToHeader), {
-                            level: "0",
-                            title: validateDesc.value ? vue.unref(index$7.t)("to.select.float.title", validateDesc.value) : vue.unref(index$7.t)("to.select.float.titlePlaceholder", validateDesc.value),
-                            onBack: ($event) => closeLayer()
-                          }, {
-                            default: vue.withCtx(() => [
-                              vue.createVNode(vue.unref(index$8.ToButton), {
-                                fillet: "normal",
-                                icon: "close",
-                                mode: "none",
-                                color: "primary",
-                                onClick: ($event) => (clear(), closeLayer())
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createTextVNode(vue.toDisplayString(vue.unref(index$7.t)("to.common.clear")), 1)
-                                ]),
-                                _: 1
-                              }, 8, ["onClick"])
-                            ]),
-                            _: 1
-                          }, 8, ["title", "onBack"])
-                        ]),
-                        _: 1
-                      }),
-                      _ctx.filterable || _ctx.inputable ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.ToPadding), {
-                        key: 0,
-                        position: "side",
-                        value: "1"
-                      }, {
-                        default: vue.withCtx(() => [
-                          _ctx.multiple ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                            _ctx.inputable ? (vue.openBlock(), vue.createElementBlock("span", {
+                  class: "to-select-prefix-text"
+                }, [
+                  vue.createElementVNode(
+                    "span",
+                    null,
+                    vue.toDisplayString(_ctx.prefix),
+                    1
+                    /* TEXT */
+                  )
+                ])) : vue.createCommentVNode("v-if", true),
+                vue.createCommentVNode(" \u9009\u62E9\u5668\u5185\u5BB9\u533A\u57DF "),
+                vue.createElementVNode(
+                  "span",
+                  {
+                    ref_key: "optionLayerTrigger",
+                    ref: optionLayerTrigger,
+                    class: "to-select-content"
+                  },
+                  [
+                    vue.createCommentVNode(" \u524D\u7F00\u56FE\u6807 "),
+                    _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToIcon), {
+                      key: 0,
+                      value: _ctx.icon,
+                      mode: "none",
+                      class: "to-select-icon"
+                    }, null, 8, ["value"])) : vue.createCommentVNode("v-if", true),
+                    vue.createCommentVNode(" \u539F\u751Fselect\u6A21\u5F0F "),
+                    _ctx.native ? (vue.openBlock(), vue.createElementBlock("span", {
+                      key: 1,
+                      class: "to-select-box"
+                    }, [
+                      vue.withDirectives(vue.createElementVNode("select", {
+                        ref_key: "selector",
+                        ref: selector,
+                        "onUpdate:modelValue": ($event) => iValue.value = $event
+                      }, [
+                        _ctx.clearable && iClearType.value === "default" ? (vue.openBlock(), vue.createElementBlock(
+                          "option",
+                          {
+                            key: 0,
+                            value: ""
+                          },
+                          vue.toDisplayString(_ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select")),
+                          1
+                          /* TEXT */
+                        )) : vue.createCommentVNode("v-if", true),
+                        (vue.openBlock(true), vue.createElementBlock(
+                          vue.Fragment,
+                          null,
+                          vue.renderList(options.value, (item, index) => {
+                            return vue.openBlock(), vue.createElementBlock("option", {
+                              key: index,
+                              value: item[iValueText.value]
+                            }, vue.toDisplayString(item[iLabelText.value]), 9, ["value"]);
+                          }),
+                          128
+                          /* KEYED_FRAGMENT */
+                        ))
+                      ], 8, ["onUpdate:modelValue"]), [
+                        [vue.vModelSelect, iValue.value]
+                      ])
+                    ])) : (vue.openBlock(), vue.createElementBlock(
+                      vue.Fragment,
+                      { key: 2 },
+                      [
+                        vue.createCommentVNode(" \u81EA\u5B9A\u4E49\u6A21\u62DF\u9009\u62E9\u5668 "),
+                        vue.createCommentVNode(" \u5355\u9009\u6A21\u5F0F "),
+                        !_ctx.multiple ? (vue.openBlock(), vue.createElementBlock(
+                          vue.Fragment,
+                          { key: 0 },
+                          [
+                            vue.createCommentVNode(" \u5355\u9009\u663E\u793A\u503C\uFF08\u975E\u8F93\u5165\u6A21\u5F0F\u6216\u624B\u673A\u7AEF\uFF09 "),
+                            !_ctx.inputable && !_ctx.filterable && !_ctx.setDataFn && !_ctx.remoteMethod || !_ctx.$pc ? (vue.openBlock(), vue.createElementBlock("span", {
                               key: 0,
-                              class: vue.normalizeClass(["to-select to-select-arrow-none", _ctx.fillet === "normal" ? "to-input-fillet-normal" : ""]),
-                              style: { "width": "100%" }
+                              class: "to-select-box"
                             }, [
-                              vue.createElementVNode("span", { class: "to-select-content" }, [
-                                vue.createElementVNode("span", { class: "to-select-tag" }, [
-                                  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$2.ToTag), {
-                                        key: index,
-                                        color: "fg",
-                                        mode: "plain",
-                                        deletable: !disabled.value,
-                                        onDelete: ($event) => removeTag(item)
-                                      }, {
-                                        default: vue.withCtx(() => [
-                                          vue.createTextVNode(vue.toDisplayString(item[iLabelText.value]), 1)
-                                        ]),
-                                        _: 2
-                                      }, 1032, ["deletable", "onDelete"])) : vue.createCommentVNode("", true)
-                                    ], 64);
-                                  }), 256)) : vue.createCommentVNode("", true),
-                                  _ctx.filterable ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToInput), {
-                                    key: 1,
-                                    ref_key: "popupFilter",
-                                    ref: popupFilter,
-                                    modelValue: multipleFilterValue.value,
-                                    "onUpdate:modelValue": ($event) => multipleFilterValue.value = $event,
+                              vue.unref(selected)[iLabelText.value] ? (vue.openBlock(), vue.createElementBlock(
+                                vue.Fragment,
+                                { key: 0 },
+                                [
+                                  vue.createTextVNode(
+                                    vue.toDisplayString(vue.unref(selected)[iLabelText.value]) + " ",
+                                    1
+                                    /* TEXT */
+                                  ),
+                                  _ctx.unit ? (vue.openBlock(), vue.createElementBlock(
+                                    vue.Fragment,
+                                    { key: 0 },
+                                    [
+                                      vue.createTextVNode(
+                                        vue.toDisplayString(_ctx.unit),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ],
+                                    64
+                                    /* STABLE_FRAGMENT */
+                                  )) : vue.createCommentVNode("v-if", true)
+                                ],
+                                64
+                                /* STABLE_FRAGMENT */
+                              )) : (vue.openBlock(), vue.createElementBlock(
+                                vue.Fragment,
+                                { key: 1 },
+                                [
+                                  vue.createTextVNode(
+                                    vue.toDisplayString(_ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select")),
+                                    1
+                                    /* TEXT */
+                                  )
+                                ],
+                                64
+                                /* STABLE_FRAGMENT */
+                              ))
+                            ])) : (vue.openBlock(), vue.createElementBlock(
+                              vue.Fragment,
+                              { key: 1 },
+                              [
+                                vue.createCommentVNode(" \u5355\u9009\u8F93\u5165\u6846\u533A\u57DF "),
+                                vue.createElementVNode("span", { class: "to-select-input" }, [
+                                  vue.createCommentVNode(" \u53EF\u8F93\u5165\u6A21\u5F0F inputable = true filterable = false \u7684\u8F93\u5165\u6846 "),
+                                  _ctx.inputable && !_ctx.filterable && !_ctx.setDataFn && !_ctx.remoteMethod ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ToInput), {
+                                    key: 0,
+                                    ref_key: "input",
+                                    ref: input,
+                                    modelValue: inputValue.value,
+                                    "onUpdate:modelValue": ($event) => inputValue.value = $event,
+                                    disabled: disabled.value,
                                     "sp-chars": _ctx.spChars,
+                                    tabindex: _ctx.tabindex,
+                                    clearable: _ctx.clearable,
                                     "prevent-focus": "",
+                                    width: "full",
                                     mode: "none",
-                                    placeholder: vue.unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder
-                                  }, {
-                                    default: vue.withCtx(() => [
-                                      vue.createVNode(vue.unref(index$8.ToButton), {
-                                        icon: "ok",
-                                        mode: "none",
-                                        color: "primary",
-                                        onClick: enter
-                                      })
-                                    ]),
-                                    _: 1
-                                  }, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "placeholder"])) : (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToInput), {
+                                    placeholder: _ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select"),
+                                    onFocus: inputFocus,
+                                    onKeyup: inputInput,
+                                    onBlur: inputBlur
+                                  }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "sp-chars", "tabindex", "clearable", "placeholder"])) : vue.createCommentVNode("v-if", true),
+                                  vue.createCommentVNode(" \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: filterValue.value,
+                                    "onUpdate:modelValue": ($event) => filterValue.value = $event,
+                                    disabled: disabled.value,
+                                    "focus-when-clear": _ctx.focusWhenClear,
+                                    "sp-chars": _ctx.inputable ? _ctx.spChars : false,
+                                    tabindex: _ctx.tabindex,
+                                    clearable: _ctx.clearable,
+                                    "prevent-focus": "",
+                                    width: "full",
+                                    mode: "none",
+                                    placeholder: _ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select"),
+                                    onClear: filterClear,
+                                    onFocus: filterFocus,
+                                    onKeyup: filterInput,
+                                    onBlur: filterBlur
+                                  }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "focus-when-clear", "sp-chars", "tabindex", "clearable", "placeholder"])) : vue.createCommentVNode("v-if", true),
+                                  vue.createCommentVNode(" \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: "popupInput",
-                                    ref: popupInput,
-                                    modelValue: multipleInputValue.value,
-                                    "onUpdate:modelValue": ($event) => multipleInputValue.value = $event,
+                                    modelValue: setDataInputValue.value,
+                                    "onUpdate:modelValue": ($event) => setDataInputValue.value = $event,
+                                    disabled: disabled.value,
+                                    "sp-chars": _ctx.inputable ? _ctx.spChars : false,
+                                    tabindex: _ctx.tabindex,
+                                    clearable: _ctx.clearable,
                                     "prevent-focus": "",
+                                    width: "full",
                                     mode: "none",
-                                    placeholder: vue.unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder
-                                  }, {
-                                    default: vue.withCtx(() => [
-                                      vue.createVNode(vue.unref(index$8.ToButton), {
-                                        icon: "ok",
-                                        mode: "none",
-                                        color: "primary",
-                                        onClick: enter
-                                      })
-                                    ]),
-                                    _: 1
-                                  }, 8, ["modelValue", "onUpdate:modelValue", "placeholder"]))
+                                    placeholder: _ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select"),
+                                    onClear: filterClear,
+                                    onFocus: filterFocus,
+                                    onKeyup: filterInput,
+                                    onBlur: filterBlur
+                                  }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "sp-chars", "tabindex", "clearable", "placeholder"])) : vue.createCommentVNode("v-if", true)
                                 ])
-                              ])
-                            ], 2)) : (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToInput), {
-                              key: 1,
-                              ref_key: "popupFilter",
-                              ref: popupFilter,
-                              modelValue: multipleFilterValue.value,
-                              "onUpdate:modelValue": ($event) => multipleFilterValue.value = $event,
-                              "sp-chars": false,
-                              width: "full",
-                              "prevent-focus": "",
-                              placeholder: vue.unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder
-                            }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"]))
-                          ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                            _ctx.inputable ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToInput), {
-                              key: 0,
-                              ref_key: "popupInput",
-                              ref: popupInput,
-                              modelValue: inputValue.value,
-                              "onUpdate:modelValue": ($event) => inputValue.value = $event,
-                              "sp-chars": _ctx.spChars,
-                              "prevent-focus": "",
-                              width: "full",
-                              placeholder: _ctx.placeholder
-                            }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "placeholder"])) : (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToInput), {
-                              key: 1,
-                              ref_key: "popupFilter",
-                              ref: popupFilter,
-                              modelValue: filterValue.value,
-                              "onUpdate:modelValue": ($event) => filterValue.value = $event,
-                              "sp-chars": false,
-                              "prevent-focus": "",
-                              width: "full",
-                              placeholder: "\u7B5B\u9009",
-                              onClear: filterClear
-                            }, null, 8, ["modelValue", "onUpdate:modelValue"]))
-                          ], 64))
-                        ]),
-                        _: 1
-                      })) : vue.createCommentVNode("", true)
-                    ]),
-                    _: 1
-                  }),
-                  vue.createVNode(vue.unref(index$5.ToGridItem), { width: "full" }, {
+                              ],
+                              2112
+                              /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                            ))
+                          ],
+                          64
+                          /* STABLE_FRAGMENT */
+                        )) : (vue.openBlock(), vue.createElementBlock(
+                          vue.Fragment,
+                          { key: 1 },
+                          [
+                            vue.createCommentVNode(" \u591A\u9009\u6A21\u5F0F "),
+                            vue.createCommentVNode(" \u591A\u9009\u5360\u4F4D\u7B26\uFF08\u65E0\u9009\u4E2D\u9879\u4E14\u975E\u8F93\u5165\u6A21\u5F0F\u65F6\u663E\u793A\uFF09 "),
+                            vue.unref(selected).filter((item) => !item.hide).length === 0 && !_ctx.inputable && !_ctx.filterable && !_ctx.setDataFn && !_ctx.remoteMethod ? (vue.openBlock(), vue.createElementBlock(
+                              "span",
+                              {
+                                key: 0,
+                                class: "to-select-box"
+                              },
+                              vue.toDisplayString(_ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select")),
+                              1
+                              /* TEXT */
+                            )) : isAll.value && _ctx.useAllText ? (vue.openBlock(), vue.createElementBlock(
+                              vue.Fragment,
+                              { key: 1 },
+                              [
+                                vue.createCommentVNode(" \u5168\u9009\u72B6\u6001\u663E\u793A\u6587\u672C "),
+                                vue.createElementVNode(
+                                  "span",
+                                  { class: "to-select-box" },
+                                  vue.toDisplayString(_ctx.allText || vue.unref(index.t)("to.select.input.allSelected")),
+                                  1
+                                  /* TEXT */
+                                )
+                              ],
+                              2112
+                              /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                            )) : (vue.openBlock(), vue.createElementBlock(
+                              vue.Fragment,
+                              { key: 2 },
+                              [
+                                vue.createCommentVNode(" \u591A\u9009\u6807\u7B7E\u5BB9\u5668 "),
+                                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,
+                                      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 */
+                            ))
+                          ],
+                          64
+                          /* STABLE_FRAGMENT */
+                        ))
+                      ],
+                      64
+                      /* STABLE_FRAGMENT */
+                    )),
+                    vue.createCommentVNode(" \u6E05\u9664\u56FE\u6807 "),
+                    showClearIcon.value && !vue.unref($phone) ? (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.createVNode(vue.unref(index$1.ToIcon), {
+                      class: "to-select-arrow",
+                      value: "expand"
+                    })
+                  ],
+                  512
+                  /* NEED_PATCH */
+                ),
+                vue.createCommentVNode(" \u540E\u7F00\u6587\u672C "),
+                _ctx.suffix ? (vue.openBlock(), vue.createElementBlock("span", {
+                  key: 3,
+                  class: "to-select-suffix-text"
+                }, [
+                  vue.createElementVNode(
+                    "span",
+                    null,
+                    vue.toDisplayString(_ctx.suffix),
+                    1
+                    /* TEXT */
+                  )
+                ])) : vue.createCommentVNode("v-if", true),
+                vue.createCommentVNode(" \u540E\u7F00\u63D2\u69FD "),
+                _ctx.$slots.suffix ? (vue.openBlock(), vue.createElementBlock("span", {
+                  key: 4,
+                  class: "to-select-suffix"
+                }, [
+                  vue.renderSlot(_ctx.$slots, "suffix")
+                ])) : vue.createCommentVNode("v-if", true),
+                vue.createCommentVNode(" \u9519\u8BEF\u63D0\u793A\u4FE1\u606F "),
+                errorTip.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+                  key: 5,
+                  class: "to-box-tip"
+                }, [
+                  errorType.value === "rule" ? (vue.openBlock(), vue.createElementBlock(
+                    vue.Fragment,
+                    { key: 0 },
+                    [
+                      _ctx.inputable ? (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 0 },
+                        [
+                          vue.createTextVNode(
+                            vue.toDisplayString(vue.unref(index.t)("to.input.inputError")),
+                            1
+                            /* TEXT */
+                          )
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      )) : (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 1 },
+                        [
+                          vue.createTextVNode(
+                            vue.toDisplayString(vue.unref(index.t)("to.select.selectError")),
+                            1
+                            /* TEXT */
+                          )
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      )),
+                      vue.withDirectives(vue.createVNode(
+                        vue.unref(index$1.ToIcon),
+                        {
+                          value: "help",
+                          color: "danger",
+                          mode: "toast"
+                        },
+                        null,
+                        512
+                        /* NEED_PATCH */
+                      ), [
+                        [
+                          _directive_tip,
+                          errorTip.value,
+                          void 0,
+                          { danger: true }
+                        ]
+                      ])
+                    ],
+                    64
+                    /* STABLE_FRAGMENT */
+                  )) : (vue.openBlock(), vue.createElementBlock(
+                    vue.Fragment,
+                    { key: 1 },
+                    [
+                      vue.createTextVNode(
+                        vue.toDisplayString(vue.unref(index.t)("to.select.required")),
+                        1
+                        /* TEXT */
+                      )
+                    ],
+                    64
+                    /* STABLE_FRAGMENT */
+                  ))
+                ])), [
+                  [vue.unref(color.default), "danger"]
+                ]) : vue.createCommentVNode("v-if", true)
+              ],
+              512
+              /* NEED_PATCH */
+            ),
+            vue.createCommentVNode(" \u4E0B\u62C9\u9009\u9879\u9762\u677F "),
+            (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+              vue.createElementVNode(
+                "div",
+                {
+                  class: vue.normalizeClass(["to-select", vue.unref(setClass)])
+                },
+                [
+                  vue.createVNode(vue.unref(index$4.ToFloat), {
+                    ref_key: "optionLayer",
+                    ref: optionLayer,
+                    style: vue.normalizeStyle({ transform: `scale(${currentScale.value})`, transformOrigin: "left top" }),
+                    global: false,
+                    class: vue.normalizeClass(["to-select-option", setOptionClass.value]),
+                    align: _ctx.optionDisplay === "popup" ? "center" : _ctx.optionAlign,
+                    width: iOptionWidth.value,
+                    slide: layerSlide.value,
+                    position: layerPosition.value,
+                    onClosed: layerClose,
+                    onMousedown: layerMousedown,
+                    onBeforeOpen: layerOpen
+                  }, {
                     default: vue.withCtx(() => [
-                      nodata.value ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$4.ToPadding), {
+                      vue.createCommentVNode(" \u6570\u636E\u52A0\u8F7D\u72B6\u6001 "),
+                      dataLoading.value ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$5.ToPadding), {
                         key: 0,
                         value: 2
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createTextVNode(vue.toDisplayString(_ctx.nodataText), 1)
-                        ]),
-                        _: 1
-                      })), [
-                        [vue.unref(color.default), "info"]
-                      ]) : nomatch.value ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$4.ToPadding), {
-                        key: 1,
-                        value: 2
-                      }, {
-                        default: vue.withCtx(() => [
-                          vue.createTextVNode(vue.toDisplayString(_ctx.nomatchText), 1)
+                          vue.createVNode(vue.unref(index$1.ToIcon), { value: "loading" })
                         ]),
                         _: 1
+                        /* STABLE */
                       })), [
-                        [vue.unref(color.default), "info"]
-                      ]) : vue.createCommentVNode("", true),
-                      !nodata.value && !nomatch.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$9.ToScroll), { key: 2 }, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(vue.unref(index$4.ToPadding), { value: 0.5 }, {
-                            default: vue.withCtx(() => [
-                              _ctx.multiple ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                                vue.createVNode(vue.unref(index$4.ToPadding), { value: 0.5 }, {
+                        [_directive_align, "center"]
+                      ]) : (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 1 },
+                        [
+                          vue.createCommentVNode(" \u9009\u9879\u5185\u5BB9\u533A\u57DF "),
+                          vue.createCommentVNode(" \u9009\u9879\u6570\u636E\u63D2\u69FD "),
+                          vue.renderSlot(_ctx.$slots, "default", { data: options.value }, () => [
+                            vue.createCommentVNode(" \u5F39\u7A97\u6A21\u5F0F "),
+                            _ctx.optionDisplay === "popup" || (_ctx.inputable || _ctx.filterable) && vue.unref($phone) ? (vue.openBlock(), vue.createBlock(vue.unref(index$6.ToGrid), {
+                              key: 0,
+                              height: "full",
+                              dir: "v"
+                            }, {
+                              default: vue.withCtx(() => [
+                                vue.createCommentVNode(" \u5F39\u7A97\u5934\u90E8\u533A\u57DF "),
+                                vue.createVNode(vue.unref(index$6.ToGridItem), null, {
                                   default: vue.withCtx(() => [
-                                    vue.createVNode(vue.unref(index$8.ToButton), {
-                                      mode: "text",
-                                      color: "primary",
-                                      fillet: "normal",
-                                      onClick: selectAll
+                                    vue.createCommentVNode(" \u5F39\u7A97\u6807\u9898\u680F "),
+                                    vue.createVNode(vue.unref(index$7.ToHeader), {
+                                      title: validateDesc.value ? vue.unref(index.t)("to.select.float.title", validateDesc.value) : vue.unref(index.t)("to.select.float.titlePlaceholder", validateDesc.value),
+                                      onBack: ($event) => closeLayer()
                                     }, {
                                       default: vue.withCtx(() => [
-                                        vue.createTextVNode(vue.toDisplayString(vue.unref(index$7.t)("to.common.selectAll")), 1)
+                                        vue.createVNode(vue.unref(index$8.ToButton), {
+                                          icon: "close",
+                                          mode: "none",
+                                          color: "primary",
+                                          onClick: ($event) => (clear(), closeLayer())
+                                        }, {
+                                          default: vue.withCtx(() => [
+                                            vue.createTextVNode(
+                                              vue.toDisplayString(vue.unref(index.t)("to.common.clear")),
+                                              1
+                                              /* TEXT */
+                                            )
+                                          ]),
+                                          _: 1
+                                          /* STABLE */
+                                        }, 8, ["onClick"])
                                       ]),
                                       _: 1
-                                    }),
-                                    vue.createVNode(vue.unref(index$8.ToButton), {
-                                      mode: "text",
-                                      color: "primary",
-                                      fillet: "normal",
-                                      onClick: deselect
+                                      /* STABLE */
+                                    }, 8, ["title", "onBack"]),
+                                    vue.createCommentVNode(" \u5F39\u7A97\u5185\u7684\u641C\u7D22/\u8F93\u5165\u533A\u57DF "),
+                                    _ctx.filterable || _ctx.inputable || _ctx.remoteMethod ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.ToPadding), {
+                                      key: 0,
+                                      position: "side",
+                                      value: "1"
                                     }, {
                                       default: vue.withCtx(() => [
-                                        vue.createTextVNode(vue.toDisplayString(vue.unref(index$7.t)("to.common.Deselect")), 1)
+                                        vue.createCommentVNode(" \u591A\u9009\u6A21\u5F0F\u7684\u5F39\u7A97\u8F93\u5165\u533A\u57DF "),
+                                        _ctx.multiple ? (vue.openBlock(), vue.createElementBlock(
+                                          vue.Fragment,
+                                          { key: 0 },
+                                          [
+                                            vue.createCommentVNode(" \u591A\u9009\u53EF\u8F93\u5165\u6A21\u5F0F "),
+                                            _ctx.inputable && !_ctx.filterable && !_ctx.remoteMethod ? (vue.openBlock(), vue.createElementBlock("span", {
+                                              key: 0,
+                                              class: "to-select to-select-arrow-none",
+                                              style: { "width": "100%" }
+                                            }, [
+                                              vue.createElementVNode("span", { class: "to-select-content" }, [
+                                                vue.createElementVNode("span", { class: "to-select-tag" }, [
+                                                  vue.createCommentVNode(" \u5F39\u7A97\u5185\u5DF2\u9009\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,
+                                                            color: "fg",
+                                                            mode: "plain",
+                                                            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(" \u5F39\u7A97\u5185\u8FC7\u6EE4\u8F93\u5165\u6846 "),
+                                                  _ctx.filterable || _ctx.remoteMethod ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ToInput), {
+                                                    key: 1,
+                                                    ref_key: "popupFilter",
+                                                    ref: popupFilter,
+                                                    modelValue: multipleFilterValue.value,
+                                                    "onUpdate:modelValue": ($event) => multipleFilterValue.value = $event,
+                                                    "sp-chars": _ctx.spChars,
+                                                    "prevent-focus": "",
+                                                    mode: "none",
+                                                    placeholder: vue.unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select")
+                                                  }, {
+                                                    default: vue.withCtx(() => [
+                                                      vue.createVNode(vue.unref(index$8.ToButton), {
+                                                        icon: "ok",
+                                                        mode: "none",
+                                                        color: "primary",
+                                                        onClick: enter
+                                                      })
+                                                    ]),
+                                                    _: 1
+                                                    /* STABLE */
+                                                  }, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "placeholder"])) : (vue.openBlock(), vue.createElementBlock(
+                                                    vue.Fragment,
+                                                    { key: 2 },
+                                                    [
+                                                      vue.createCommentVNode(" \u5F39\u7A97\u5185\u8F93\u5165\u6846 "),
+                                                      vue.createVNode(vue.unref(index$2.ToInput), {
+                                                        ref_key: "popupInput",
+                                                        ref: popupInput,
+                                                        modelValue: multipleInputValue.value,
+                                                        "onUpdate:modelValue": ($event) => multipleInputValue.value = $event,
+                                                        "prevent-focus": "",
+                                                        mode: "none",
+                                                        placeholder: vue.unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select")
+                                                      }, {
+                                                        default: vue.withCtx(() => [
+                                                          vue.createVNode(vue.unref(index$8.ToButton), {
+                                                            icon: "ok",
+                                                            mode: "none",
+                                                            color: "primary",
+                                                            onClick: enter
+                                                          })
+                                                        ]),
+                                                        _: 1
+                                                        /* STABLE */
+                                                      }, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])
+                                                    ],
+                                                    2112
+                                                    /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                                                  ))
+                                                ])
+                                              ])
+                                            ])) : (vue.openBlock(), vue.createElementBlock(
+                                              vue.Fragment,
+                                              { key: 1 },
+                                              [
+                                                vue.createCommentVNode(" \u591A\u9009\u4EC5\u8FC7\u6EE4\u6A21\u5F0F "),
+                                                vue.createVNode(vue.unref(index$2.ToInput), {
+                                                  ref_key: "popupFilter",
+                                                  ref: popupFilter,
+                                                  modelValue: multipleFilterValue.value,
+                                                  "onUpdate:modelValue": ($event) => multipleFilterValue.value = $event,
+                                                  "sp-chars": false,
+                                                  width: "full",
+                                                  "prevent-focus": "",
+                                                  placeholder: vue.unref(selected).filter((item) => !item.hide).length > 0 ? "" : _ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select")
+                                                }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])
+                                              ],
+                                              2112
+                                              /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                                            ))
+                                          ],
+                                          64
+                                          /* STABLE_FRAGMENT */
+                                        )) : (vue.openBlock(), vue.createElementBlock(
+                                          vue.Fragment,
+                                          { key: 1 },
+                                          [
+                                            vue.createCommentVNode(" \u5355\u9009\u6A21\u5F0F\u7684\u5F39\u7A97\u8F93\u5165\u533A\u57DF "),
+                                            vue.createCommentVNode(" \u5355\u9009\u53EF\u8F93\u5165\u6A21\u5F0F "),
+                                            _ctx.inputable && !_ctx.filterable && !_ctx.remoteMethod ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ToInput), {
+                                              key: 0,
+                                              ref_key: "popupInput",
+                                              ref: popupInput,
+                                              modelValue: inputValue.value,
+                                              "onUpdate:modelValue": ($event) => inputValue.value = $event,
+                                              "sp-chars": _ctx.spChars,
+                                              "prevent-focus": "",
+                                              width: "full",
+                                              placeholder: _ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select")
+                                            }, null, 8, ["modelValue", "onUpdate:modelValue", "sp-chars", "placeholder"])) : _ctx.filterable || _ctx.remoteMethod ? (vue.openBlock(), vue.createElementBlock(
+                                              vue.Fragment,
+                                              { key: 1 },
+                                              [
+                                                vue.createCommentVNode(" \u5355\u9009\u8FC7\u6EE4\u6A21\u5F0F \u6216 \u8FDC\u7A0B\u641C\u7D22\u6A21\u5F0F "),
+                                                vue.createVNode(vue.unref(index$2.ToInput), {
+                                                  ref_key: "popupFilter",
+                                                  ref: popupFilter,
+                                                  modelValue: filterValue.value,
+                                                  "onUpdate:modelValue": ($event) => filterValue.value = $event,
+                                                  "sp-chars": false,
+                                                  "prevent-focus": "",
+                                                  width: "full",
+                                                  placeholder: vue.unref(index.t)("to.select.filter"),
+                                                  onClear: filterClear
+                                                }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])
+                                              ],
+                                              2112
+                                              /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                                            )) : vue.createCommentVNode("v-if", true)
+                                          ],
+                                          64
+                                          /* STABLE_FRAGMENT */
+                                        ))
                                       ]),
                                       _: 1
-                                    })
+                                      /* STABLE */
+                                    })) : vue.createCommentVNode("v-if", true)
                                   ]),
                                   _: 1
+                                  /* STABLE */
                                 }),
-                                vue.createVNode(vue.unref(index$5.ToGrid), { col: _ctx.optionCol }, {
+                                vue.createCommentVNode(" \u5F39\u7A97\u9009\u9879\u5185\u5BB9\u533A\u57DF "),
+                                vue.createVNode(vue.unref(index$6.ToGridItem), { flex: "" }, {
                                   default: vue.withCtx(() => [
-                                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(options.value, (item) => {
-                                      return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$5.ToGridItem), {
-                                        key: item[iValueText.value],
-                                        width: "full"
-                                      }, {
-                                        default: vue.withCtx(() => [
-                                          vue.createVNode(vue.unref(index$a.ToCheckbox), {
-                                            wrap: _ctx.optionWrap,
-                                            title: item[iLabelText.value],
-                                            width: "full",
-                                            label: item[iLabelText.value],
-                                            disabled: !!item.disabled,
-                                            value: Boolean(
-                                              vue.unref(selected).find((el) => el[iValueText.value] === item[iValueText.value])
-                                            ),
-                                            onChange: (value) => {
-                                              return multipleItemChange(value, item);
-                                            }
-                                          }, null, 8, ["wrap", "title", "label", "disabled", "value", "onChange"])
-                                        ]),
-                                        _: 2
-                                      }, 1024)), [
-                                        [vue.vShow, multipleFilter(item)],
-                                        [vue.unref(dis.default), !!item.disabled]
-                                      ]);
-                                    }), 128))
+                                    vue.createCommentVNode(" \u65E0\u6570\u636E\u63D0\u793A "),
+                                    nodata.value ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$5.ToPadding), {
+                                      key: 0,
+                                      value: 2
+                                    }, {
+                                      default: vue.withCtx(() => [
+                                        vue.createTextVNode(
+                                          vue.toDisplayString(_ctx.nodataText || vue.unref(index.t)("to.select.noData")),
+                                          1
+                                          /* TEXT */
+                                        )
+                                      ]),
+                                      _: 1
+                                      /* STABLE */
+                                    })), [
+                                      [vue.unref(color.default), "info"]
+                                    ]) : nomatch.value ? (vue.openBlock(), vue.createElementBlock(
+                                      vue.Fragment,
+                                      { key: 1 },
+                                      [
+                                        vue.createCommentVNode(" \u65E0\u5339\u914D\u9879\u63D0\u793A "),
+                                        vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$5.ToPadding), { value: 2 }, {
+                                          default: vue.withCtx(() => [
+                                            vue.createTextVNode(
+                                              vue.toDisplayString(_ctx.nomatchText || vue.unref(index.t)("to.select.noMatch")),
+                                              1
+                                              /* TEXT */
+                                            )
+                                          ]),
+                                          _: 1
+                                          /* STABLE */
+                                        })), [
+                                          [vue.unref(color.default), "info"]
+                                        ])
+                                      ],
+                                      2112
+                                      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                                    )) : vue.createCommentVNode("v-if", true),
+                                    vue.createCommentVNode(" \u9009\u9879\u5217\u8868\u6EDA\u52A8\u533A\u57DF"),
+                                    !nodata.value && !nomatch.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$9.ToScroll), {
+                                      key: 2,
+                                      onBottom: handleOptionScroll
+                                    }, {
+                                      default: vue.withCtx(() => [
+                                        vue.createVNode(vue.unref(index$5.ToPadding), { value: 0.5 }, {
+                                          default: vue.withCtx(() => [
+                                            vue.createCommentVNode(" \u5F39\u7A97\u5185\u591A\u9009\u9009\u9879 "),
+                                            _ctx.multiple ? (vue.openBlock(), vue.createElementBlock(
+                                              vue.Fragment,
+                                              { key: 0 },
+                                              [
+                                                vue.createCommentVNode(" \u5168\u9009/\u53CD\u9009\u6309\u94AE "),
+                                                vue.createVNode(vue.unref(index$5.ToPadding), { value: 0.5 }, {
+                                                  default: vue.withCtx(() => [
+                                                    vue.createVNode(vue.unref(index$8.ToButton), { onClick: selectAll }, {
+                                                      default: vue.withCtx(() => [
+                                                        vue.createTextVNode(
+                                                          vue.toDisplayString(vue.unref(index.t)("to.common.selectAll")),
+                                                          1
+                                                          /* TEXT */
+                                                        )
+                                                      ]),
+                                                      _: 1
+                                                      /* STABLE */
+                                                    }),
+                                                    vue.createVNode(vue.unref(index$8.ToButton), { onClick: inverse }, {
+                                                      default: vue.withCtx(() => [
+                                                        vue.createTextVNode(
+                                                          vue.toDisplayString(vue.unref(index.t)("to.common.inverse")),
+                                                          1
+                                                          /* TEXT */
+                                                        )
+                                                      ]),
+                                                      _: 1
+                                                      /* STABLE */
+                                                    })
+                                                  ]),
+                                                  _: 1
+                                                  /* STABLE */
+                                                }),
+                                                vue.createCommentVNode(" \u591A\u9009\u9009\u9879\u7F51\u683C "),
+                                                vue.createVNode(vue.unref(index$6.ToGrid), { col: _ctx.optionCol }, {
+                                                  default: vue.withCtx(() => [
+                                                    (vue.openBlock(true), vue.createElementBlock(
+                                                      vue.Fragment,
+                                                      null,
+                                                      vue.renderList(displayOptions.value, (item) => {
+                                                        return vue.withDirectives((vue.openBlock(), vue.createBlock(
+                                                          vue.unref(index$6.ToGridItem),
+                                                          {
+                                                            key: item[iValueText.value],
+                                                            width: "full"
+                                                          },
+                                                          {
+                                                            default: vue.withCtx(() => [
+                                                              vue.createVNode(vue.unref(index$a.ToCheckbox), {
+                                                                wrap: _ctx.optionWrap,
+                                                                title: item[iLabelText.value],
+                                                                width: "full",
+                                                                label: item[iLabelText.value],
+                                                                disabled: !!item.disabled,
+                                                                value: Boolean(vue.unref(selected).find((el) => el[iValueText.value] === item[iValueText.value])),
+                                                                onChange: (value) => {
+                                                                  return multipleItemChange(value, item);
+                                                                }
+                                                              }, null, 8, ["wrap", "title", "label", "disabled", "value", "onChange"])
+                                                            ]),
+                                                            _: 2
+                                                            /* DYNAMIC */
+                                                          },
+                                                          1024
+                                                          /* DYNAMIC_SLOTS */
+                                                        )), [
+                                                          [vue.vShow, multipleFilter(item)],
+                                                          [vue.unref(dis.default), !!item.disabled]
+                                                        ]);
+                                                      }),
+                                                      128
+                                                      /* KEYED_FRAGMENT */
+                                                    ))
+                                                  ]),
+                                                  _: 1
+                                                  /* STABLE */
+                                                }, 8, ["col"])
+                                              ],
+                                              64
+                                              /* STABLE_FRAGMENT */
+                                            )) : (vue.openBlock(), vue.createElementBlock(
+                                              vue.Fragment,
+                                              { key: 1 },
+                                              [
+                                                vue.createCommentVNode(" \u5F39\u7A97\u5185\u5355\u9009\u9009\u9879 "),
+                                                vue.createCommentVNode(" \u5355\u9009\u9009\u9879\u7F51\u683C "),
+                                                vue.createVNode(vue.unref(index$6.ToGrid), { col: _ctx.optionCol }, {
+                                                  default: vue.withCtx(() => [
+                                                    (vue.openBlock(true), vue.createElementBlock(
+                                                      vue.Fragment,
+                                                      null,
+                                                      vue.renderList(displayOptions.value, (item) => {
+                                                        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                                                          key: item[iValueText.value],
+                                                          class: vue.normalizeClass({ "is-on": vue.unref(selected)[iValueText.value] === item[iValueText.value] }),
+                                                          onClick: vue.withModifiers(($event) => itemChange(item), ["stop"])
+                                                        }, [
+                                                          item[iLabelText.value] ? (vue.openBlock(), vue.createElementBlock(
+                                                            vue.Fragment,
+                                                            { key: 0 },
+                                                            [
+                                                              vue.createTextVNode(
+                                                                vue.toDisplayString(item[iLabelText.value]),
+                                                                1
+                                                                /* TEXT */
+                                                              )
+                                                            ],
+                                                            64
+                                                            /* STABLE_FRAGMENT */
+                                                          )) : (vue.openBlock(), vue.createElementBlock(
+                                                            vue.Fragment,
+                                                            { key: 1 },
+                                                            [
+                                                              vue.createTextVNode(
+                                                                vue.toDisplayString(_ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select")),
+                                                                1
+                                                                /* TEXT */
+                                                              )
+                                                            ],
+                                                            64
+                                                            /* STABLE_FRAGMENT */
+                                                          ))
+                                                        ], 10, ["onClick"])), [
+                                                          [vue.vShow, filterByValue(item)],
+                                                          [vue.unref(dis.default), !!item.disabled]
+                                                        ]);
+                                                      }),
+                                                      128
+                                                      /* KEYED_FRAGMENT */
+                                                    ))
+                                                  ]),
+                                                  _: 1
+                                                  /* STABLE */
+                                                }, 8, ["col"])
+                                              ],
+                                              64
+                                              /* STABLE_FRAGMENT */
+                                            ))
+                                          ]),
+                                          _: 1
+                                          /* STABLE */
+                                        })
+                                      ]),
+                                      _: 1
+                                      /* STABLE */
+                                    })) : vue.createCommentVNode("v-if", true)
                                   ]),
                                   _: 1
-                                }, 8, ["col"])
-                              ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(index$5.ToGrid), {
-                                key: 1,
-                                col: _ctx.optionCol
-                              }, {
-                                default: vue.withCtx(() => [
-                                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(options.value, (item) => {
-                                    return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-                                      key: item[iValueText.value],
-                                      class: vue.normalizeClass({ "is-on": vue.unref(selected)[iValueText.value] === item[iValueText.value] }),
-                                      onClick: vue.withModifiers(($event) => itemChange(item), ["stop"])
-                                    }, [
-                                      item[iLabelText.value] ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                                        vue.createTextVNode(vue.toDisplayString(item[iLabelText.value]), 1)
-                                      ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                                        vue.createTextVNode(vue.toDisplayString(_ctx.placeholder), 1)
-                                      ], 64))
-                                    ], 10, ["onClick"])), [
-                                      [vue.vShow, filterByValue(item)],
-                                      [vue.unref(dis.default), !!item.disabled]
-                                    ]);
-                                  }), 128))
-                                ]),
-                                _: 1
-                              }, 8, ["col"]))
-                            ]),
-                            _: 1
-                          })
-                        ]),
-                        _: 1
-                      })) : vue.createCommentVNode("", true)
-                    ]),
-                    _: 1
-                  }),
-                  vue.createVNode(vue.unref(index$5.ToGridItem), {
-                    side: "",
-                    width: "full"
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(index$b.ToSubmit), {
-                        width: "full",
-                        space: "0"
-                      }, {
-                        default: vue.withCtx(() => [
-                          vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$8.ToButton), {
-                            fillet: "none",
-                            color: "primary",
-                            mode: "line",
-                            onClick: ($event) => (phoneCloseLayer(), iValue.value = "")
-                          }, {
-                            default: vue.withCtx(() => [
-                              vue.createTextVNode(vue.toDisplayString(vue.unref(index$7.t)("to.common.clear")), 1)
-                            ]),
-                            _: 1
-                          }, 8, ["onClick"])), [
-                            [_directive_size, "l"]
-                          ]),
-                          vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$8.ToButton), {
-                            mode: "fill",
-                            color: "primary",
-                            fillet: "none",
-                            onClick: ($event) => phoneCloseLayer()
-                          }, {
-                            default: vue.withCtx(() => [
-                              vue.createTextVNode(vue.toDisplayString(vue.unref(index$7.t)("to.common.confirm")), 1)
-                            ]),
-                            _: 1
-                          }, 8, ["onClick"])), [
-                            [_directive_size, "l"]
-                          ])
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              })) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                nodata.value ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$4.ToPadding), {
-                  key: 0,
-                  value: 2
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createTextVNode(vue.toDisplayString(_ctx.nodataText), 1)
-                  ]),
-                  _: 1
-                })), [
-                  [vue.unref(color.default), "info"]
-                ]) : nomatch.value ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$4.ToPadding), {
-                  key: 1,
-                  value: 2
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createTextVNode(vue.toDisplayString(_ctx.nomatchText), 1)
-                  ]),
-                  _: 1
-                })), [
-                  [vue.unref(color.default), "info"]
-                ]) : vue.createCommentVNode("", true),
-                !nodata.value && !nomatch.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$9.ToScroll), { key: 2 }, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(vue.unref(index$4.ToPadding), { value: 0.5 }, {
-                      default: vue.withCtx(() => [
-                        _ctx.multiple ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                          vue.createVNode(vue.unref(index$4.ToPadding), { value: 0.5 }, {
-                            default: vue.withCtx(() => [
-                              vue.createVNode(vue.unref(index$8.ToButton), {
-                                mode: "text",
-                                color: "primary",
-                                fillet: "normal",
-                                onClick: selectAll
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createTextVNode(vue.toDisplayString(vue.unref(index$7.t)("to.common.selectAll")), 1)
-                                ]),
-                                _: 1
-                              }),
-                              vue.createVNode(vue.unref(index$8.ToButton), {
-                                mode: "text",
-                                color: "primary",
-                                fillet: "normal",
-                                onClick: deselect
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createTextVNode(vue.toDisplayString(vue.unref(index$7.t)("to.common.Deselect")), 1)
-                                ]),
-                                _: 1
-                              })
-                            ]),
-                            _: 1
-                          }),
-                          vue.createVNode(vue.unref(index$5.ToGrid), {
-                            col: _ctx.optionCol,
-                            gap: "0"
-                          }, {
-                            default: vue.withCtx(() => [
-                              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(options.value, (item) => {
-                                return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$5.ToGridItem), {
-                                  key: item[iValueText.value]
+                                  /* STABLE */
+                                }),
+                                vue.createElementVNode("div", { class: "to-select-option-fn" }, [
+                                  vue.createVNode(vue.unref(index$8.ToButton), {
+                                    color: "primary",
+                                    onClick: ($event) => (phoneCloseLayer(), iValue.value = "")
+                                  }, {
+                                    default: vue.withCtx(() => [
+                                      vue.createTextVNode(
+                                        vue.toDisplayString(vue.unref(index.t)("to.common.clear")),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ]),
+                                    _: 1
+                                    /* STABLE */
+                                  }, 8, ["onClick"]),
+                                  vue.createVNode(vue.unref(index$8.ToButton), {
+                                    mode: "fill",
+                                    onClick: ($event) => phoneCloseLayer()
+                                  }, {
+                                    default: vue.withCtx(() => [
+                                      vue.createTextVNode(
+                                        vue.toDisplayString(vue.unref(index.t)("to.common.confirm")),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ]),
+                                    _: 1
+                                    /* STABLE */
+                                  }, 8, ["onClick"])
+                                ])
+                              ]),
+                              _: 1
+                              /* STABLE */
+                            })) : (vue.openBlock(), vue.createElementBlock(
+                              vue.Fragment,
+                              { key: 1 },
+                              [
+                                vue.createCommentVNode(" \u666E\u901A\u6A21\u5F0F "),
+                                vue.createCommentVNode(" \u65E0\u6570\u636E\u63D0\u793A "),
+                                nodata.value ? (vue.openBlock(), vue.createElementBlock(
+                                  "div",
+                                  {
+                                    key: 0,
+                                    class: "to-select-option-tip"
+                                  },
+                                  vue.toDisplayString(_ctx.nodataText || vue.unref(index.t)("to.select.noData")),
+                                  1
+                                  /* TEXT */
+                                )) : nomatch.value ? (vue.openBlock(), vue.createElementBlock(
+                                  vue.Fragment,
+                                  { key: 1 },
+                                  [
+                                    vue.createCommentVNode(" \u65E0\u5339\u914D\u63D0\u793A "),
+                                    vue.createElementVNode(
+                                      "div",
+                                      { class: "to-select-option-tip" },
+                                      vue.toDisplayString(_ctx.nomatchText || vue.unref(index.t)("to.select.noMatch")),
+                                      1
+                                      /* TEXT */
+                                    )
+                                  ],
+                                  2112
+                                  /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                                )) : vue.createCommentVNode("v-if", true),
+                                vue.createCommentVNode(" \u666E\u901A\u4E0B\u62C9\u9009\u9879\u6EDA\u52A8\u533A\u57DF"),
+                                !nodata.value && !nomatch.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$9.ToScroll), {
+                                  key: 2,
+                                  class: "to-select-option-scroll",
+                                  onBottom: handleOptionScroll
                                 }, {
                                   default: vue.withCtx(() => [
-                                    vue.createVNode(vue.unref(index$a.ToCheckbox), {
-                                      wrap: _ctx.optionWrap,
-                                      title: item[iLabelText.value],
-                                      width: "full",
-                                      label: item[iLabelText.value],
-                                      disabled: !!item.disabled,
-                                      value: Boolean(vue.unref(selected).find((el) => el[iValueText.value] === item[iValueText.value])),
-                                      onChange: (value) => {
-                                        return multipleItemChange(value, item);
-                                      }
-                                    }, null, 8, ["wrap", "title", "label", "disabled", "value", "onChange"])
+                                    vue.createCommentVNode(" \u591A\u9009\u9009\u9879 "),
+                                    _ctx.multiple ? (vue.openBlock(), vue.createElementBlock(
+                                      vue.Fragment,
+                                      { key: 0 },
+                                      [
+                                        vue.createCommentVNode(" \u591A\u9009\u9009\u9879\u7F51\u683C "),
+                                        vue.createVNode(vue.unref(index$6.ToGrid), {
+                                          class: "to-select-list is-multiple",
+                                          col: _ctx.optionCol
+                                        }, {
+                                          default: vue.withCtx(() => [
+                                            (vue.openBlock(true), vue.createElementBlock(
+                                              vue.Fragment,
+                                              null,
+                                              vue.renderList(displayOptions.value, (item) => {
+                                                return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$a.ToCheckbox), {
+                                                  key: item[iValueText.value],
+                                                  class: "to-select-check",
+                                                  wrap: _ctx.optionWrap,
+                                                  title: item[iLabelText.value],
+                                                  width: "full",
+                                                  label: item[iLabelText.value],
+                                                  disabled: !!item.disabled,
+                                                  value: Boolean(vue.unref(selected).find((el) => el[iValueText.value] === item[iValueText.value])),
+                                                  onChange: (value) => {
+                                                    return multipleItemChange(value, item);
+                                                  }
+                                                }, null, 8, ["wrap", "title", "label", "disabled", "value", "onChange"])), [
+                                                  [vue.vShow, multipleFilter(item)],
+                                                  [vue.unref(dis.default), !!item.disabled]
+                                                ]);
+                                              }),
+                                              128
+                                              /* KEYED_FRAGMENT */
+                                            ))
+                                          ]),
+                                          _: 1
+                                          /* STABLE */
+                                        }, 8, ["col"])
+                                      ],
+                                      64
+                                      /* STABLE_FRAGMENT */
+                                    )) : (vue.openBlock(), vue.createElementBlock(
+                                      vue.Fragment,
+                                      { key: 1 },
+                                      [
+                                        vue.createCommentVNode(" \u5355\u9009\u9009\u9879 "),
+                                        vue.createCommentVNode(" \u5355\u9009\u9009\u9879\u7F51\u683C "),
+                                        vue.createVNode(vue.unref(index$6.ToGrid), {
+                                          col: _ctx.optionCol,
+                                          class: "to-select-list"
+                                        }, {
+                                          default: vue.withCtx(() => [
+                                            (vue.openBlock(true), vue.createElementBlock(
+                                              vue.Fragment,
+                                              null,
+                                              vue.renderList(displayOptions.value, (item) => {
+                                                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                                                  key: item[iValueText.value],
+                                                  class: vue.normalizeClass(["to-select-option-item", { "is-on": vue.unref(selected)[iValueText.value] === item[iValueText.value] }]),
+                                                  onClick: vue.withModifiers(($event) => itemChange(item), ["stop"])
+                                                }, [
+                                                  item[iLabelText.value] ? (vue.openBlock(), vue.createElementBlock(
+                                                    "span",
+                                                    {
+                                                      key: 0,
+                                                      class: "to-select-option-item-text"
+                                                    },
+                                                    vue.toDisplayString(item[iLabelText.value]),
+                                                    1
+                                                    /* TEXT */
+                                                  )) : (vue.openBlock(), vue.createElementBlock(
+                                                    "span",
+                                                    {
+                                                      key: 1,
+                                                      class: "to-select-option-item-text"
+                                                    },
+                                                    vue.toDisplayString(_ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select")),
+                                                    1
+                                                    /* TEXT */
+                                                  ))
+                                                ], 10, ["onClick"])), [
+                                                  [vue.vShow, filterByValue(item)],
+                                                  [vue.unref(dis.default), !!item.disabled]
+                                                ]);
+                                              }),
+                                              128
+                                              /* KEYED_FRAGMENT */
+                                            ))
+                                          ]),
+                                          _: 1
+                                          /* STABLE */
+                                        }, 8, ["col"])
+                                      ],
+                                      64
+                                      /* STABLE_FRAGMENT */
+                                    ))
                                   ]),
-                                  _: 2
-                                }, 1024)), [
-                                  [vue.vShow, multipleFilter(item)],
-                                  [vue.unref(dis.default), !!item.disabled]
-                                ]);
-                              }), 128))
-                            ]),
-                            _: 1
-                          }, 8, ["col"])
-                        ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(index$5.ToGrid), {
-                          key: 1,
-                          col: _ctx.optionCol,
-                          gap: "0"
-                        }, {
-                          default: vue.withCtx(() => [
-                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(options.value, (item) => {
-                              return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-                                key: item[iValueText.value],
-                                class: vue.normalizeClass(["to-select-item", { "is-on": vue.unref(selected)[iValueText.value] === item[iValueText.value] }]),
-                                onClick: vue.withModifiers(($event) => itemChange(item), ["stop"])
-                              }, [
-                                item[iLabelText.value] ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                                  vue.createTextVNode(vue.toDisplayString(item[iLabelText.value]), 1)
-                                ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                                  vue.createTextVNode(vue.toDisplayString(_ctx.placeholder), 1)
-                                ], 64))
-                              ], 10, ["onClick"])), [
-                                [vue.vShow, filterByValue(item)],
-                                [vue.unref(dis.default), !!item.disabled]
-                              ]);
-                            }), 128))
-                          ]),
-                          _: 1
-                        }, 8, ["col"]))
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                })) : vue.createCommentVNode("", true)
-              ], 64))
-            ])
-          ]),
-          _: 3
-        }, 8, ["align", "lazy", "width", "slide", "position"])
-      ], 46, ["id", "tabindex"])), [
-        [_directive_tip, changed.value ? vue.unref(index$7.t)("to.common.originalValue", getLabel(valueStore.value[0])) : ""]
-      ]);
+                                  _: 1
+                                  /* STABLE */
+                                })) : vue.createCommentVNode("v-if", true),
+                                _ctx.multiple || !_ctx.$pc ? (vue.openBlock(), vue.createElementBlock("div", {
+                                  key: 3,
+                                  class: "to-select-option-fn"
+                                }, [
+                                  !_ctx.$pc ? (vue.openBlock(), vue.createBlock(vue.unref(index$8.ToButton), {
+                                    key: 0,
+                                    class: "to-select-option-button value-clear",
+                                    mode: "none",
+                                    color: "primary",
+                                    onClick: ($event) => (clear(), closeLayer())
+                                  }, {
+                                    default: vue.withCtx(() => [
+                                      vue.createTextVNode(
+                                        vue.toDisplayString(vue.unref(index.t)("to.common.clear")),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ]),
+                                    _: 1
+                                    /* STABLE */
+                                  }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true),
+                                  _ctx.multiple ? (vue.openBlock(), vue.createElementBlock(
+                                    vue.Fragment,
+                                    { key: 1 },
+                                    [
+                                      vue.createVNode(vue.unref(index$8.ToButton), {
+                                        class: "to-select-option-button value-all",
+                                        onClick: selectAll
+                                      }, {
+                                        default: vue.withCtx(() => [
+                                          vue.createTextVNode(
+                                            vue.toDisplayString(vue.unref(index.t)("to.common.selectAll")),
+                                            1
+                                            /* TEXT */
+                                          )
+                                        ]),
+                                        _: 1
+                                        /* STABLE */
+                                      }),
+                                      vue.createVNode(vue.unref(index$8.ToButton), {
+                                        class: "to-select-option-button value-inverse",
+                                        onClick: inverse
+                                      }, {
+                                        default: vue.withCtx(() => [
+                                          vue.createTextVNode(
+                                            vue.toDisplayString(vue.unref(index.t)("to.common.inverse")),
+                                            1
+                                            /* TEXT */
+                                          )
+                                        ]),
+                                        _: 1
+                                        /* STABLE */
+                                      })
+                                    ],
+                                    64
+                                    /* STABLE_FRAGMENT */
+                                  )) : vue.createCommentVNode("v-if", true)
+                                ])) : vue.createCommentVNode("v-if", true)
+                              ],
+                              64
+                              /* STABLE_FRAGMENT */
+                            ))
+                          ])
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      ))
+                    ]),
+                    _: 3
+                    /* FORWARDED */
+                  }, 8, ["style", "class", "align", "width", "slide", "position"])
+                ],
+                2
+                /* CLASS */
+              )
+            ]))
+          ], 46, ["id", "flex", "tabindex"])), [
+            [_directive_tip, changed.value ? vue.unref(index.t)("to.common.originalValue", getLabel(valueStore.value[0])) : ""]
+          ])
+        ],
+        2112
+        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+      );
     };
   }
 });