@touchvue/ui 1.0.0-beta.2 → 1.0.0-beta.3

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

@@ -0,0 +1,1662 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var index$7 = 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$a = require('../../checkbox/index.js');
+var index$2 = require('../../tag/index.js');
+var index$3 = 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');
+
+const __default__ = vue.defineComponent({
+  name: "ToSelect",
+  componentName: "ToSelect"
+});
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: select.selectProps,
+  emits: ["change", "select", "update:modelValue", "option-loaded"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const ToForm = vue.inject("ToForm", null);
+    const ToFormItem = vue.inject("ToFormItem", null);
+    const $TouchUI = vue.inject("$TouchUI", {
+      colors: ["primary", "success", "warning", "danger", "info", "default", "dark"]
+    });
+    const { isPhone } = useDevice.useDevice();
+    const $phone = isPhone.value;
+    const iValue = vue.ref(props.modelValue);
+    const valueStore = vue.ref([]);
+    const inited = vue.ref(false);
+    const focused = vue.ref(false);
+    const blurByLayer = vue.ref(false);
+    const layerSlide = vue.ref(false);
+    const layerPosition = vue.ref("auto");
+    const disabled = vue.ref(props.disabled);
+    const isChanging = vue.ref(false);
+    const filterValue = vue.ref("");
+    const inputValue = vue.ref("");
+    const multipleInputValue = vue.ref("");
+    const multipleFilterValue = vue.ref("");
+    const setDataInputValue = vue.ref("");
+    const dataLoading = vue.ref(false);
+    const errorTip = vue.ref("");
+    const errorType = vue.ref("rule");
+    const iApiHeaders = vue.ref({});
+    const iResPath = vue.ref(props.resPath);
+    const iSuccessCode = vue.ref(props.successCode);
+    const iApiParam = vue.ref(props.apiParam);
+    const iApiLabel = vue.ref(props.apiLabel);
+    const iErrorPath = vue.ref(props.errorPath);
+    const iOptionWidth = vue.ref(props.optionWidth);
+    const iLabelText = vue.ref(props.labelText);
+    const iValueText = vue.ref(props.valueText);
+    const $el = vue.ref(null);
+    const selector = vue.ref(null);
+    const input = vue.ref(null);
+    const filter = vue.ref(null);
+    const optionLayer = vue.ref(null);
+    const popupFilter = vue.ref(null);
+    const popupInput = vue.ref(null);
+    const options = vue.ref([]);
+    const anotherOptions = vue.ref([]);
+    const { selected } = useSelectOptionData.useSelectOptionData({
+      props
+    });
+    const filterByValue = (item) => {
+      if (!props.filterable)
+        return true;
+      const value = filterValue.value;
+      if (value === "")
+        return true;
+      return item[iLabelText.value].includes(value);
+    };
+    const multipleFilter = (item) => {
+      if (!props.filterable)
+        return true;
+      const value = multipleFilterValue.value;
+      if (value === "")
+        return true;
+      return item[iLabelText.value].includes(value);
+    };
+    const nomatch = vue.computed(() => {
+      let nomatch2 = true;
+      let value = props.multiple ? multipleFilterValue.value : filterValue.value;
+      if (value === "" || options.value.findIndex((option) => option[iLabelText.value].includes(value)) > -1) {
+        nomatch2 = false;
+      }
+      return nomatch2;
+    });
+    const nodata = vue.computed(() => {
+      return options.value.length === 0;
+    });
+    const setOptions = () => {
+      if (props.data && props.data.length > 0) {
+        setData();
+      }
+      if (props.api) {
+        getData();
+      }
+    };
+    const setData = () => {
+      if (props.data) {
+        if (typeof props.data === "string") {
+          let arr = [];
+          for (let i = 0; i < props.data.split(",").length; i++) {
+            const el = props.data.split(",")[i];
+            let obj = {};
+            obj[iLabelText.value] = obj[iValueText.value] = el;
+            arr.push(obj);
+          }
+          if ($phone && props.filterable) {
+            options.value = arr.slice(0, 100);
+            anotherOptions.value = arr.slice(100);
+          } else {
+            options.value = arr;
+          }
+        } else {
+          if ($phone && props.filterable) {
+            options.value = props.data.slice(0, 100);
+            anotherOptions.value = props.data.slice(100);
+          } else {
+            options.value = [...props.data];
+          }
+          if (typeof props.setLabelFn === "function") {
+            options.value.forEach((item) => {
+              item.label = props.setLabelFn(item);
+            });
+          }
+        }
+        setValue();
+        setPlaceholder();
+        emit("option-loaded", options.value);
+      }
+    };
+    const getData = () => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+      if (props.api) {
+        if (((_a = $TouchUI.staticDataApiConfig) == null ? void 0 : _a.labelText) && props.labelText === "label") {
+          iLabelText.value = $TouchUI.staticDataApiConfig.labelText;
+        }
+        if (((_b = $TouchUI.staticDataApiConfig) == null ? void 0 : _b.valueText) && props.valueText === "value") {
+          iValueText.value = $TouchUI.staticDataApiConfig.valueText;
+        }
+        if (((_c = $TouchUI.staticDataApiConfig) == null ? void 0 : _c.resPath) && !props.resPath) {
+          iResPath.value = $TouchUI.staticDataApiConfig.resPath;
+        }
+        if (((_d = $TouchUI.staticDataApiConfig) == null ? void 0 : _d.apiParam) && !props.apiParam) {
+          iApiParam.value = $TouchUI.staticDataApiConfig.apiParam;
+        }
+        if (((_e = $TouchUI.staticDataApiConfig) == null ? void 0 : _e.apiHeaders) && !props.apiHeaders) {
+          iApiHeaders.value = $TouchUI.staticDataApiConfig.apiHeaders;
+        }
+        if (((_f = $TouchUI.staticDataApiConfig) == null ? void 0 : _f.apiLabel) && !props.apiLabel) {
+          iApiLabel.value = $TouchUI.staticDataApiConfig.apiLabel;
+        }
+        if (((_g = $TouchUI.staticDataApiConfig) == null ? void 0 : _g.errorPath) && !props.errorPath) {
+          iErrorPath.value = $TouchUI.staticDataApiConfig.errorPath;
+        }
+        if (((_h = $TouchUI.staticDataApiConfig) == null ? void 0 : _h.successCode) && !props.successCode) {
+          iSuccessCode.value = $TouchUI.staticDataApiConfig.successCode;
+        }
+        if (sessionStorage.getItem("static." + props.api)) {
+          options.value = JSON.parse(sessionStorage.getItem("static." + props.api));
+          if ($phone && props.filterable) {
+            anotherOptions.value = options.value.slice(100);
+            options.value = options.value.slice(0, 100);
+          }
+          setValue();
+          setPlaceholder();
+          emit("option-loaded", options.value);
+        } else {
+          dataLoading.value = true;
+          let action = "";
+          let param = { ...iApiParam.value };
+          if (iApiLabel.value && props.api) {
+            Object.assign(param, { [iApiLabel.value]: props.api });
+          }
+          if (props.api.indexOf("http") > -1) {
+            action = props.api;
+          } else {
+            if (((_i = $TouchUI.staticDataApiConfig) == null ? void 0 : _i.action) && $TouchUI.staticDataApiConfig.action.indexOf("=") > -1 && $TouchUI.staticDataApiConfig.action.indexOf("?") > -1) {
+              action = $TouchUI.staticDataApiConfig.action + props.api;
+            } else {
+              action = ((_j = $TouchUI.staticDataApiConfig) == null ? void 0 : _j.action) || props.api;
+            }
+          }
+          const requestOptions = {
+            data: param,
+            action,
+            headers: Object.assign({}, iApiHeaders.value),
+            onSuccess: (res) => {
+              dataLoading.value = false;
+              if (typeof res === "string") {
+                res = JSON.parse(res);
+              }
+              if (Array.isArray(res)) {
+                options.value = res;
+                sessionStorage.setItem("static." + props.api, JSON.stringify(res));
+                if ($phone && props.filterable) {
+                  anotherOptions.value = res.slice(100);
+                  options.value = res.slice(0, 100);
+                }
+                setValue();
+                setPlaceholder();
+                emit("option-loaded", options.value);
+              } else if (res.code === iSuccessCode.value) {
+                let data = res;
+                if (iResPath.value) {
+                  let resPath = iResPath.value.split("/");
+                  resPath.forEach((el) => {
+                    data = data[el];
+                  });
+                }
+                options.value = data;
+                sessionStorage.setItem("static." + props.api, JSON.stringify(data));
+                if ($phone && props.filterable) {
+                  anotherOptions.value = data.slice(100);
+                  options.value = data.slice(0, 100);
+                }
+                setValue();
+                setPlaceholder();
+                emit("option-loaded", options.value);
+              } else {
+                options.value = [];
+                console.error(index$7.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}) `));
+            }
+          };
+          const req = props.httpRequest(requestOptions);
+          if (req && req.then) {
+            req.then(requestOptions.onSuccess, requestOptions.onError);
+          }
+        }
+      }
+    };
+    const setPlaceholder = () => {
+      if (props.native) {
+        return;
+      }
+      if (!props.multiple && props.clearable && !props.inputable && !props.setDataFn && !props.filterable && (!props.optionDisplay || props.optionDisplay === "float")) {
+        options.value.unshift({
+          [iLabelText.value]: "",
+          [iValueText.value]: ""
+        });
+      }
+    };
+    const setValue = () => {
+      if (props.multiple) {
+        selected.value = [];
+        if (iValue.value) {
+          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)
+              );
+              if (option) {
+                selected.value.push(option);
+              } else if (props.inputable) {
+                selected.value.push({
+                  [iLabelText.value]: item,
+                  [iValueText.value]: item,
+                  hide: false
+                });
+              }
+            }
+          });
+        }
+      } else {
+        let option = options.value.find(
+          (option2) => String(option2[iValueText.value]) === String(iValue.value)
+        );
+        if (option) {
+          selected.value = option;
+        } else {
+          if (iValue.value && props.inputable) {
+            selected.value = {
+              [iLabelText.value]: iValue.value,
+              [iValueText.value]: iValue.value
+            };
+          } else {
+            selected.value = {
+              [iLabelText.value]: "",
+              [iValueText.value]: ""
+            };
+          }
+        }
+      }
+      inited.value = true;
+    };
+    const itemChange = (option) => {
+      if (option.disabled) {
+        return;
+      }
+      if (props.multiple) {
+        multipleItemChange(true, option);
+      } else {
+        change(option[iValueText.value], option);
+        closeLayer();
+      }
+      vue.nextTick(() => {
+        emit("select", option);
+      });
+    };
+    const selectAll = () => {
+      allChange();
+    };
+    const deselect = () => {
+      reverseChange();
+    };
+    const multipleItemChange = (value, item) => {
+      if (item && item.disabled)
+        return;
+      let arr = iValue.value ? iValue.value.toString().split(props.splitSymbol || ",") : [];
+      let selectedOptions = [...selected.value];
+      if (value) {
+        if (arr.indexOf(item[iValueText.value]) === -1) {
+          arr.push(item[iValueText.value]);
+          selectedOptions.push(item);
+        } else {
+          arr = removeItem(arr, item[iValueText.value]);
+          selectedOptions = selectedOptions.filter((option) => option[iValueText.value] !== value);
+        }
+      } else {
+        arr = removeItem(arr, item[iValueText.value]);
+        selectedOptions = selectedOptions.filter((option) => option[iValueText.value] !== value);
+      }
+      change(arr.join(props.splitSymbol || ","), selectedOptions);
+    };
+    const removeTag = (item) => {
+      if (props.disabled || disabled.value)
+        return;
+      let arr = iValue.value.toString().split(props.splitSymbol || ",");
+      arr = removeItem(arr, item[iValueText.value]);
+      let selectedOptions = [];
+      selected.value.map((selectedItem) => {
+        if (selectedItem[iValueText.value] !== item[iValueText.value]) {
+          selectedOptions.push(selectedItem);
+        }
+      });
+      change(arr.join(props.splitSymbol || ","), selectedOptions);
+    };
+    const removeItem = (arr, value) => {
+      if (typeof arr === "string") {
+        arr = arr.split(",");
+      }
+      let index = arr.indexOf(value);
+      if (index > -1) {
+        arr.splice(index, 1);
+      }
+      return arr;
+    };
+    vue.watch(
+      () => props.data,
+      () => {
+        setOptions();
+      }
+    );
+    vue.watch(
+      () => props.api,
+      () => {
+        setOptions();
+      }
+    );
+    const initLayerSlide = () => {
+      if ($phone) {
+        layerSlide.value = true;
+        layerPosition.value = "bottom";
+      }
+      if (props.optionDisplay === "popup" || $phone && (props.filterable || props.inputable)) {
+        layerSlide.value = true;
+        layerPosition.value = "right";
+        if (!props.optionWidth) {
+          iOptionWidth.value = "100%";
+        }
+      }
+    };
+    const onCreated = () => {
+      iLabelText.value = props.labelText;
+      iValueText.value = props.valueText;
+      iResPath.value = props.resPath;
+      iSuccessCode.value = props.successCode;
+      iApiParam.value = props.apiParam;
+      iApiHeaders.value = props.apiHeaders;
+      iApiLabel.value = props.apiLabel;
+      iErrorPath.value = props.errorPath;
+      iOptionWidth.value = props.optionWidth;
+      setOptions();
+      initLayerSlide();
+    };
+    onCreated();
+    vue.watch(
+      () => props.apiParam,
+      () => {
+        iApiParam.value = props.apiParam;
+        if (props.api) {
+          getData();
+        }
+      },
+      { deep: true }
+    );
+    vue.watch(
+      () => props.labelText,
+      (newVal) => {
+        iLabelText.value = newVal;
+        setValue();
+      }
+    );
+    vue.watch(
+      () => props.valueText,
+      (newVal) => {
+        iValueText.value = newVal;
+        setValue();
+      }
+    );
+    const isAll = vue.computed(() => {
+      let arr = [];
+      options.value.map((item) => {
+        if (item[iValueText.value] !== "") {
+          arr.push(item[iValueText.value]);
+        }
+      });
+      if (arr.sort().toString() === iValue.value.toString().split(",").sort().toString()) {
+        return true;
+      } else {
+        return false;
+      }
+    });
+    const changed = vue.computed(() => {
+      if ((props.comparable || ToForm && (ToForm == null ? void 0 : ToForm.comparable)) && valueStore.value.length > 0 && iValue.value !== valueStore.value[0]) {
+        return true;
+      } else {
+        return false;
+      }
+    });
+    const validateRequired = vue.computed(() => {
+      if (props.required) {
+        return "true";
+      } else if (ToFormItem && ToFormItem.required) {
+        return "true";
+      } else {
+        return "false";
+      }
+    });
+    const validateDesc = vue.computed(() => {
+      if (props.desc) {
+        return props.desc;
+      } else if (ToFormItem && ToFormItem.label) {
+        return ToFormItem.label;
+      } else {
+        return "";
+      }
+    });
+    const validateValue = vue.computed(() => {
+      if (props.multiple) {
+        if (selected.value.length > 0) {
+          return "true";
+        } else {
+          return "";
+        }
+      } else {
+        return selected.value[iValueText.value];
+      }
+    });
+    const { setClass, setStyle } = useSelectClassStyle.useSetSelectClassStyle({
+      props,
+      disabled,
+      selected,
+      iValueText,
+      errorTip,
+      changed,
+      ToForm
+    });
+    const change = (value, option) => {
+      if (props.beforeChange) {
+        let result = props.beforeChange(value, option);
+        if (result === false) {
+          return;
+        }
+      }
+      isChanging.value = true;
+      iValue.value = value;
+      setValue();
+      emit("change", value, option);
+      emit("update:modelValue", value);
+      vue.nextTick(() => {
+        isChanging.value = false;
+      });
+    };
+    const optionLayerTrigger = vue.ref(null);
+    const openOptionLayer = () => {
+      const trigger = props.optionDisplay == "popup" ? null : $el.value;
+      optionLayer.value.toggle(trigger);
+    };
+    const click = () => {
+      if (!props.native && !(props.disabled || disabled.value)) {
+        toggleLayer();
+      }
+    };
+    const phoneCloseLayer = () => {
+      optionLayer.value.close();
+      if (props.filterable && $phone) {
+        options.value = options.value.slice(0, 100);
+      }
+    };
+    const layerMousedown = () => {
+      blurByLayer.value = true;
+    };
+    const focus = () => {
+      focused.value = true;
+    };
+    const blur = () => {
+      if (!blurByLayer.value) {
+        focused.value = false;
+        layerSlide.value = false;
+        layerClose();
+      }
+      blurByLayer.value = false;
+    };
+    const inputBlur = () => {
+      if (!blurByLayer.value) {
+        focused.value = false;
+        layerSlide.value = false;
+        layerClose();
+      }
+      blurByLayer.value = false;
+    };
+    const inputFocus = () => {
+      focused.value = true;
+    };
+    const filterBlur = () => {
+      if (!blurByLayer.value) {
+        focused.value = false;
+        layerSlide.value = false;
+        layerClose();
+      }
+      blurByLayer.value = false;
+    };
+    const filterFocus = () => {
+      focused.value = true;
+    };
+    const multipleInputBlur = () => {
+      if (!blurByLayer.value) {
+        focused.value = false;
+        layerSlide.value = false;
+        layerClose();
+      }
+      blurByLayer.value = false;
+    };
+    const multipleInputFocus = () => {
+      focused.value = true;
+    };
+    const multipleFilterBlur = () => {
+      if (!blurByLayer.value) {
+        focused.value = false;
+        layerSlide.value = false;
+        layerClose();
+      }
+      blurByLayer.value = false;
+    };
+    const multipleFilterFocus = () => {
+      focused.value = true;
+    };
+    const inputInput = (e) => {
+      if (e.keyCode === 13) {
+        if (props.setDataFn) {
+          props.setDataFn(setDataInputValue.value, setDataLoading);
+        }
+      }
+    };
+    const filterInput = () => {
+    };
+    const filterClear = () => {
+      iValue.value = "";
+    };
+    const setDataLoading = (loading) => {
+      dataLoading.value = loading;
+    };
+    const enter = () => {
+      if (!(props.multiple && props.inputable)) {
+        toggleLayer();
+      } else {
+        let value = props.filterable ? 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");
+          errorType.value = "rule";
+          return;
+        }
+        if (!value.trim()) {
+          return;
+        }
+        const newOption = {
+          [iLabelText.value]: value,
+          [iValueText.value]: value
+        };
+        if (props.beforeChange) {
+          const fn = props.beforeChange(newOption);
+          if (fn && fn.then) {
+            fn.then(() => {
+              selected.value.push(newOption);
+            }).catch(() => {
+            });
+          } else {
+            if (fn) {
+              selected.value.push(newOption);
+            }
+          }
+        } else {
+          selected.value.push(newOption);
+        }
+        if (props.filterable) {
+          multipleFilterValue.value = "";
+        } else {
+          multipleInputValue.value = "";
+        }
+        if ($phone) {
+          if (props.filterable) {
+            setTimeout(() => {
+              var _a;
+              (_a = popupFilter.value) == null ? void 0 : _a.focus();
+            }, 500);
+          } else {
+            setTimeout(() => {
+              var _a;
+              (_a = popupInput.value) == null ? void 0 : _a.focus();
+            }, 500);
+          }
+        }
+      }
+    };
+    const clear = () => {
+      clearChange();
+    };
+    const clearChange = () => {
+      if (props.multiple) {
+        change("", []);
+      } else {
+        change("", null);
+      }
+      if (props.focusWhenClear && props.filterable) {
+        layerSlide.value = true;
+      }
+    };
+    const allChange = () => {
+      let arr = [];
+      let selectedOptions = [];
+      options.value.forEach((item) => {
+        if (item[iValueText.value] !== "" && !item.disabled) {
+          arr.push(item[iValueText.value]);
+          selectedOptions.push(item);
+        }
+      });
+      change(arr.join(props.splitSymbol || ","), selectedOptions);
+    };
+    const reverseChange = () => {
+      let arr = [];
+      let selectedOptions = [];
+      let selectedArr = iValue.value ? iValue.value.toString().split(props.splitSymbol || ",") : [];
+      options.value.forEach((item) => {
+        if (item[iValueText.value] !== "" && !item.disabled && selectedArr.indexOf(item[iValueText.value].toString()) === -1) {
+          arr.push(item[iValueText.value]);
+          selectedOptions.push(item);
+        }
+      });
+      change(arr.join(props.splitSymbol || ","), selectedOptions);
+    };
+    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) => {
+            arr.push(item[iValueText.value]);
+          });
+          if (inited.value) {
+            iValue.value = arr.join(props.splitSymbol || ",");
+          }
+        } else {
+          if (inited.value) {
+            isChanging.value = true;
+            iValue.value = String(val[iValueText.value] || "");
+            setTimeout(() => {
+              isChanging.value = false;
+            }, 100);
+          }
+        }
+        if (!inited.value) {
+          if (Array.isArray(props.modelValue)) {
+            iValue.value = props.modelValue.join(",");
+          } else {
+            iValue.value = props.modelValue;
+          }
+          vue.nextTick(() => {
+            inited.value = true;
+          });
+        }
+      },
+      { deep: true }
+    );
+    vue.watch(inputValue, () => {
+      if (!isChanging.value) {
+        iValue.value = inputValue.value;
+      }
+    });
+    vue.watch(filterValue, (val) => {
+      if (props.inputable) {
+        vue.nextTick(() => {
+          iValue.value = val;
+        });
+      }
+    });
+    vue.watch(setDataInputValue, (val) => {
+      if (props.setDataFn) {
+        props.setDataFn(val);
+      }
+      if (props.inputable) {
+        vue.nextTick(() => {
+          iValue.value = val;
+        });
+      }
+    });
+    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();
+        }
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      () => props.apiHeaders,
+      () => {
+        iApiHeaders.value = props.apiHeaders;
+      },
+      { deep: true }
+    );
+    vue.watch(
+      () => props.resPath,
+      (newVal) => {
+        iResPath.value = newVal;
+      }
+    );
+    vue.watch(
+      () => props.successCode,
+      (newVal) => {
+        iSuccessCode.value = newVal;
+      }
+    );
+    vue.watch(
+      () => props.apiLabel,
+      (newVal) => {
+        iApiLabel.value = newVal;
+      }
+    );
+    vue.watch(
+      () => props.errorPath,
+      (newVal) => {
+        iErrorPath.value = newVal;
+      }
+    );
+    vue.watch(
+      () => props.optionWidth,
+      (newVal) => {
+        iOptionWidth.value = newVal;
+      }
+    );
+    vue.watch(
+      () => props.disabled,
+      (newVal) => {
+        disabled.value = newVal;
+      }
+    );
+    const getLabel = (val) => {
+      const obj = options.value.find((item) => item[iValueText.value] === val);
+      if (obj && obj[iLabelText.value]) {
+        return obj[iLabelText.value];
+      }
+      return null;
+    };
+    const setSelected = (val) => {
+      let selectedData = JSON.parse(JSON.stringify(selected.value));
+      if (!props.multiple) {
+        if (options.value.findIndex((option) => option[iValueText.value] === val) === -1) {
+          selectedData = {
+            [iLabelText.value]: val,
+            [iValueText.value]: val
+          };
+        } else {
+          selectedData = options.value.find((option) => option[iValueText.value] === val);
+        }
+      } else {
+        if (val === "") {
+          selectedData = [];
+        } else {
+          const arr = Array.isArray(val) ? unique(val) : unique(val.split(props.splitSymbol || ","));
+          let selectedArr = [];
+          arr.map((item) => {
+            if (item && item.trim()) {
+              if (options.value.findIndex((option) => String(option[iValueText.value]) === String(item)) === -1) {
+                selectedArr.push({
+                  [iLabelText.value]: item,
+                  [iValueText.value]: item,
+                  hide: !props.inputable
+                  // 当输入一个不存在的值的时候，如果可自定义则显示，否则不显示
+                });
+              } else {
+                options.value.map((option) => {
+                  if (String(option[iValueText.value]) === String(item)) {
+                    selectedArr.push(option);
+                  }
+                });
+              }
+            }
+          });
+          selectedData = selectedArr;
+        }
+      }
+      if (props.beforeChange) {
+        const fn = props.beforeChange(selectedData);
+        if (fn && fn.then) {
+          fn.then(() => {
+            selected.value = selectedData;
+          }).catch(() => {
+          });
+        } else {
+          if (fn) {
+            selected.value = selectedData;
+          }
+        }
+      } else {
+        selected.value = selectedData;
+      }
+    };
+    const unique = (arr) => {
+      return [...new Set(arr)];
+    };
+    const valueChange = (val) => {
+      if (!props.multiple) {
+        if (props.inputable) {
+          inputValue.value = getLabel(val) || val;
+        }
+        if (props.filterable && !props.inputable) {
+          filterValue.value = getLabel(val) || "";
+        }
+        if (props.filterable && props.inputable) {
+          filterValue.value = getLabel(val) || val;
+        }
+        if (props.setDataFn && !props.inputable) {
+          setDataInputValue.value = getLabel(val) || "";
+        }
+        if (props.setDataFn && props.inputable) {
+          setDataInputValue.value = getLabel(val) || val;
+        }
+      }
+    };
+    const layerClose = () => {
+      if (!props.multiple) {
+        if (props.filterable && !props.inputable) {
+          if (iValue.value) {
+            const label = getLabel(iValue.value);
+            if (label) {
+              filterValue.value = label;
+            } else {
+              filterValue.value = "";
+            }
+          } else {
+            filterValue.value = "";
+          }
+        }
+      } else {
+        if (props.inputable) {
+          multipleInputValue.value = "";
+        }
+        if (props.filterable) {
+          multipleFilterValue.value = "";
+        }
+      }
+    };
+    const closeLayer = () => {
+      optionLayer.value.close();
+      layerClose();
+    };
+    const toggleLayer = () => {
+      openOptionLayer();
+    };
+    const compare = () => {
+      valueStore.value.unshift(iValue.value);
+    };
+    const setDisabled = (f) => {
+      disabled.value = f;
+    };
+    const restore = () => {
+      iValue.value = valueStore.value[0];
+      valueStore.value.splice(0, 1);
+    };
+    __expose({
+      closeLayer,
+      setSelected,
+      compare,
+      setDisabled,
+      restore,
+      changed
+    });
+    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"
+          }, [
+            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), {
+                  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), {
+                  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), {
+                  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", {
+                              key: 0,
+                              class: vue.normalizeClass(["to-select to-select-arrow-none", _ctx.fillet === "normal" ? "to-input-fillet-normal" : ""]),
+                              style: { "width": "100%" }
+                            }, [
+                              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,
+                                    "sp-chars": _ctx.spChars,
+                                    "prevent-focus": "",
+                                    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), {
+                                    key: 2,
+                                    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
+                                  }, {
+                                    default: vue.withCtx(() => [
+                                      vue.createVNode(vue.unref(index$8.ToButton), {
+                                        icon: "ok",
+                                        mode: "none",
+                                        color: "primary",
+                                        onClick: enter
+                                      })
+                                    ]),
+                                    _: 1
+                                  }, 8, ["modelValue", "onUpdate:modelValue", "placeholder"]))
+                                ])
+                              ])
+                            ], 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" }, {
+                    default: vue.withCtx(() => [
+                      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 }, {
+                                  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))
+                                  ]),
+                                  _: 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]
+                                }, {
+                                  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))
+                            ]),
+                            _: 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])) : ""]
+      ]);
+    };
+  }
+});
+
+exports.default = _sfc_main;
+//# sourceMappingURL=select.vue2.js.map