@opentiny/vue-renderless 3.13.1 → 3.14.0

package/select/vue.js

@@ -22,7 +22,9 @@ import {
   scrollToOption,
   handleMenuEnter,
   emitChange,
+  directEmitChange,
   getOption,
+  getSelectedOption,
   setSelected,
   handleFocus,
   focus,
@@ -37,6 +39,7 @@ import {
   resetInputState,
   resetInputHeight,
   resetHoverIndex,
+  resetDatas,
   handleOptionSelect,
   setSoftFocus,
   getValueIndex,
@@ -49,8 +52,11 @@ import {
   resetInputWidth,
   handleResize,
   checkDefaultFirstOption,
+  setOptionHighlight,
   getValueKey,
   emptyText,
+  emptyFlag,
+  recycleScrollerHeight,
   watchValue,
   watchVisible,
   watchOptions,
@@ -64,6 +70,7 @@ import {
   onCopying,
   gridOnQueryChange,
   defaultOnQueryChange,
+  queryChange,
   toVisible,
   toHide,
   mounted,
@@ -71,7 +78,6 @@ import {
   watchHoverIndex,
   computeOptimizeOpts,
   watchOptimizeOpts,
-  getScrollListener,
   computeCollapseTags,
   computeMultipleLimit,
   handleDropdownClick,
@@ -95,13 +101,12 @@ import {
   watchInitValue,
   watchShowClose,
   loadTreeData,
-  resetFilter,
+  getOptionIndexArr,
+  queryVisibleOptions,
   computedGetIcon,
   computedGetTagType,
-  computedShowDropdownIcon,
-  clearNoMatchValue,
-  debouncedQueryChange,
-  handleDebouncedQueryChange
+  clearSearchText,
+  clearNoMatchValue
 } from "./index";
 import debounce from "../common/deps/debounce";
 import { isNumber } from "../common/type";
@@ -131,6 +136,7 @@ const api = [
   "resetInputHeight",
   "managePlaceholder",
   "checkDefaultFirstOption",
+  "setOptionHighlight",
   "toggleLastOptionHitState",
   "deleteTag",
   "setSelected",
@@ -161,64 +167,17 @@ const api = [
   "handleEnterTag",
   "getLabelSlotValue",
   "loadTreeData",
-  "resetFilter",
-  "computedGetIcon"
+  "updateModelValue",
+  "clearSearchText"
 ];
-const initStateAdd = ({ computed, props, api: api2, parent }) => ({
-  selectedTags: [],
-  tips: "",
-  showTip: false,
-  tipHover: false,
-  selectHover: false,
-  tipTimer: null,
-  selectCls: "checked-sur",
-  overflow: null,
-  completed: false,
-  inputWidth: 0,
-  inputPaddingRight: 0,
-  hoverIndex: -1,
-  hoverOption: -1,
-  inputLength: 20,
-  optionsCount: 0,
-  selectFiexd: {},
-  createdLabel: null,
-  isSilentBlur: false,
-  cachedOptions: [],
-  selectedLabel: "",
-  previousQuery: null,
-  inputHovering: false,
-  createdSelected: false,
-  isOnComposition: false,
-  cachedPlaceHolder: props.placeholder,
-  inputHeight: 0,
-  initialInputHeight: 28,
-  currentPlaceholder: props.placeholder,
-  filteredOptionsCount: 0,
-  gridData: [],
-  treeData: [],
-  remoteData: [],
-  currentKey: props.modelValue,
-  updateId: "",
-  popperElm: null,
-  debounce: computed(() => isNumber(props.queryDebounce) ? props.queryDebounce : props.remote ? 300 : 0),
-  emptyText: computed(() => api2.emptyText()),
-  formItemSize: computed(() => (parent.formItem || {}).formItemSize),
-  selectDisabled: computed(() => api2.computedSelectDisabled()),
-  isDisplayOnly: computed(() => props.displayOnly || (parent.form || {}).displayOnly),
-  gridCheckedData: computed(() => api2.getcheckedData()),
-  isExpandAll: computed(() => api2.computedIsExpandAll()),
-  searchSingleCopy: computed(() => props.allowCopy && !props.multiple && props.filterable),
-  tooltipContent: {},
-  isHidden: false,
-  defaultCheckedKeys: [],
-  filterOrSearch: computed(() => props.filterable || props.searchable)
-});
-const initState = ({ reactive, computed, props, api: api2, emitter, parent, constants, designConfig }) => {
+const initState = ({ reactive, computed, props, api: api2, emitter, parent, constants, useBreakpoint, vm }) => {
   const stateAdd = initStateAdd({ computed, props, api: api2, parent });
   const state = reactive(__spreadProps(__spreadValues({}, stateAdd), {
     selectEmitter: emitter(),
     datas: [],
+    initDatas: [],
     query: "",
+    magicKey: 0,
     options: [],
     visible: false,
     showCopy: computed(() => api2.computedShowCopy()),
@@ -227,6 +186,7 @@ const initState = ({ reactive, computed, props, api: api2, emitter, parent, cons
     selected: props.multiple ? [] : {},
     softFocus: false,
     hover: false,
+    triggerSearch: false,
     firstAutoSearch: props.remoteConfig.autoSearch,
     tagsStyle: computed(() => api2.computedTagsStyle()),
     readonly: computed(() => api2.computedReadonly()),
@@ -237,69 +197,90 @@ const initState = ({ reactive, computed, props, api: api2, emitter, parent, cons
     showNewOption: computed(() => api2.computedShowNewOption()),
     selectSize: computed(() => props.size || state.formItemSize),
     optimizeOpts: computed(() => api2.computeOptimizeOpts()),
-    optimizeStore: { flag: false, valueIndex: 0, startIndex: 0, viewStyle: "", datas: [] },
+    optimizeStore: { valueIndex: 0, recycleScrollerHeight: computed(() => api2.recycleScrollerHeight()) },
     collapseTags: computed(() => api2.computeCollapseTags()),
     multipleLimit: computed(() => api2.computeMultipleLimit()),
     disabledTooltipContent: computed(() => api2.computedDisabledTooltipContent()),
+    isExpand: computed(() => (state.selectHover || state.visible) && props.hoverExpand && !props.disabled),
     collapseTagsLength: 0,
     initValue: [],
     key: 0,
-    isSelectAll: computed(() => state.selectCls === "checked-sur"),
-    isHalfSelect: computed(() => state.selectCls === "halfselect"),
-    getIcon: computed(() => api2.computedGetIcon(name = "dropdownIcon")),
+    device: "",
+    timer: null,
+    modelValue: [],
+    queryValue: "",
+    selectedCopy: [],
+    compareValue: null,
+    selectedVal: computed(
+      () => state.device === "mb" && props.multiple && state.visible ? state.selectedCopy : state.selected
+    ),
+    displayOnlyContent: computed(
+      () => props.multiple && Array.isArray(state.selected) ? state.selected.map((item) => item.state ? item.state.currentLabel : item.currentLabel).join("; ") : ""
+    ),
+    breakpoint: useBreakpoint ? useBreakpoint().current : "",
+    isSaaSTheme: vm.theme === "saas",
+    disabledOptionHover: false,
+    hasClearSelection: false,
+    // tiny 新增
+    getIcon: computed(() => api2.computedGetIcon()),
     getTagType: computed(() => api2.computedGetTagType()),
-    isShowDropdownIcon: computed(() => api2.computedShowDropdownIcon())
+    isSelectAll: computed(() => state.selectCls === "checked-sur")
   }));
   return state;
 };
-const addApi = ({ api: api2, props, state, emit, constants, parent, nextTick, dispatch, vm, designConfig }) => {
-  Object.assign(api2, {
-    resetInputHeight: resetInputHeight({ api: api2, constants, nextTick, props, vm, state, designConfig }),
-    calcOverFlow: calcOverFlow({ vm, props, state }),
-    handleFocus: handleFocus({ api: api2, emit, props, state }),
-    deleteTag: deleteTag({ api: api2, constants, emit, props, vm, nextTick, state }),
-    watchValue: watchValue({ api: api2, constants, dispatch, props, vm, state }),
-    toHide: toHide({ constants, state, props, vm, api: api2, nextTick }),
-    toVisible: toVisible({ constants, state, props, vm, api: api2, nextTick }),
-    setSelected: setSelected({ api: api2, constants, nextTick, props, vm, state }),
-    selectOption: selectOption({ api: api2, state, props }),
-    handleResize: handleResize({ api: api2, props, state }),
-    watchOptions: watchOptions({ api: api2, constants, nextTick, parent, props, state }),
-    watchVisible: watchVisible({ api: api2, constants, emit, state, vm, props }),
-    deletePrevTag: deletePrevTag({ api: api2, constants, props, state, vm }),
-    onInputChange: onInputChange({ api: api2, props, state, constants, nextTick }),
-    deleteSelected: deleteSelected({ api: api2, constants, emit, props, vm, state }),
-    handleMenuEnter: handleMenuEnter({ api: api2, nextTick, state }),
-    resetInputState: resetInputState({ api: api2, vm, state }),
-    navigateOptions: navigateOptions({ api: api2, nextTick, state }),
-    handleClearClick: handleClearClick(api2),
-    handleComposition: handleComposition({ api: api2, nextTick, state }),
-    handleQueryChange: handleQueryChange({ api: api2, constants, nextTick, props, vm, state }),
-    handleOptionSelect: handleOptionSelect({ api: api2, nextTick, props, vm, state }),
-    getPluginOption: getPluginOption({ api: api2, props, state }),
-    toggleCheckAll: toggleCheckAll({ api: api2, emit, state, props }),
-    handleDebouncedQueryChange: handleDebouncedQueryChange({ state, api: api2 }),
-    debouncedQueryChange: debouncedQueryChange({ props, api: api2 }),
-    debouncedOnInputChange: debounce(state.debounce, () => {
-      api2.onInputChange();
-    }),
-    debouncRquest: debouncRquest({ api: api2, state, props }),
-    defaultOnQueryChange: defaultOnQueryChange({ props, state, constants, api: api2 }),
-    mounted: mounted({ api: api2, parent, state, props, vm, constants }),
-    unMount: unMount({ api: api2, parent, vm, state }),
-    watchOptimizeOpts: watchOptimizeOpts({ api: api2, props, vm, state }),
-    handleDropdownClick: handleDropdownClick({ emit }),
-    handleEnterTag: handleEnterTag({ state }),
-    calcCollapseTags: calcCollapseTags({ state, vm }),
-    initValue: initValue({ state }),
-    getLabelSlotValue: getLabelSlotValue({ props, state }),
-    loadTreeData: loadTreeData({ state, vm, props, api: api2 }),
-    resetFilter: resetFilter({ state, api: api2 }),
-    computedGetIcon: computedGetIcon({ constants, designConfig, props }),
-    computedGetTagType: computedGetTagType({ designConfig, props }),
-    computedShowDropdownIcon: computedShowDropdownIcon({ props, state }),
-    clearNoMatchValue: clearNoMatchValue({ props, emit })
-  });
+const initStateAdd = ({ computed, props, api: api2, parent }) => {
+  return {
+    selectedTags: [],
+    tips: "",
+    showTip: false,
+    tipHover: false,
+    selectHover: false,
+    tipTimer: null,
+    selectCls: "checked-sur",
+    filteredSelectCls: "checked-sur",
+    overflow: null,
+    completed: false,
+    inputWidth: 0,
+    inputPaddingRight: 0,
+    hoverIndex: -1,
+    hoverValue: -1,
+    optionsIndex: -1,
+    inputLength: 20,
+    optionsCount: 0,
+    selectFiexd: {},
+    createdLabel: null,
+    isSilentBlur: false,
+    cachedOptions: [],
+    selectedLabel: "",
+    previousQuery: null,
+    inputHovering: false,
+    createdSelected: false,
+    isOnComposition: false,
+    cachedPlaceHolder: props.placeholder,
+    inputHeight: 0,
+    initialInputHeight: 0,
+    currentPlaceholder: props.placeholder,
+    filteredOptionsCount: 0,
+    gridData: [],
+    treeData: [],
+    remoteData: [],
+    currentKey: props.modelValue,
+    updateId: "",
+    popperElm: null,
+    debounce: computed(() => isNumber(props.queryDebounce) ? props.queryDebounce : props.remote ? 300 : 0),
+    emptyText: computed(() => api2.emptyText()),
+    emptyFlag: computed(() => api2.emptyFlag()),
+    formItemSize: computed(() => (parent.formItem || { state: {} }).state.formItemSize),
+    selectDisabled: computed(() => api2.computedSelectDisabled()),
+    isDisplayOnly: computed(() => props.displayOnly || (parent.form || {}).displayOnly),
+    gridCheckedData: computed(() => api2.getcheckedData()),
+    isExpandAll: computed(() => api2.computedIsExpandAll()),
+    searchSingleCopy: computed(() => props.allowCopy && !props.multiple && props.filterable),
+    tooltipContent: {},
+    isHidden: false,
+    defaultCheckedKeys: [],
+    optionIndexArr: []
+  };
 };
 const initApi = ({
   api: api2,
@@ -313,6 +294,7 @@ const initApi = ({
   dispatch,
   t,
   vm,
+  isMobileFirstMode,
   designConfig
 }) => {
   Object.assign(api2, {
@@ -326,28 +308,36 @@ const initApi = ({
     handleClose: handleClose(state),
     getValueIndex: getValueIndex(props),
     getChildValue: getChildValue(),
-    getOption: getOption({ props, state }),
+    getOption: getOption({ props, state, api: api2 }),
+    getSelectedOption: getSelectedOption({ props, state }),
     emitChange: emitChange({ emit, props, state, constants }),
-    toggleMenu: toggleMenu({ vm, state, props }),
+    directEmitChange: directEmitChange({ emit, props, state, constants }),
+    toggleMenu: toggleMenu({ vm, state, props, api: api2, isMobileFirstMode }),
     showTip: showTip({ props, state, vm }),
     onOptionDestroy: onOptionDestroy(state),
     setSoftFocus: setSoftFocus({ vm, state }),
     getcheckedData: getcheckedData({ props, state }),
     resetInputWidth: resetInputWidth({ vm, state }),
     resetHoverIndex: resetHoverIndex({ props, state }),
+    resetDatas: resetDatas({ props, state }),
     scrollToOption: scrollToOption({ vm, constants }),
     selectChange: selectChange({ emit, props, vm, state, api: api2 }),
-    radioChange: radioChange({ emit, props, state, api: api2 }),
+    radioChange: radioChange({ emit, props, state, api: api2, vm }),
     handleCopyClick: handleCopyClick({ parent, props, state }),
     treeNodeClick: treeNodeClick({ emit, props, state, api: api2, vm }),
     managePlaceholder: managePlaceholder({ vm, state }),
     nodeCheckClick: nodeCheckClick({ emit, props, state, api: api2 }),
     checkDefaultFirstOption: checkDefaultFirstOption(state),
+    setOptionHighlight: setOptionHighlight(state),
     nodeExpand: nodeExpand({ state, constants, nextTick }),
     nodeCollapse: nodeCollapse({ state, constants, nextTick }),
     handleBlur: handleBlur({ constants, dispatch, emit, state }),
     toggleLastOptionHitState: toggleLastOptionHitState({ state }),
-    emptyText: emptyText({ I18N: constants.I18N, props, state, t }),
+    emptyText: emptyText({ I18N: constants.I18N, props, state, t, isMobileFirstMode }),
+    emptyFlag: emptyFlag({ props, state }),
+    getOptionIndexArr: getOptionIndexArr({ props, state, api: api2 }),
+    queryVisibleOptions: queryVisibleOptions({ props, vm, isMobileFirstMode }),
+    recycleScrollerHeight: recycleScrollerHeight({ state, props, recycle: constants.RECYCLE }),
     watchPropsOption: watchPropsOption({ constants, parent, props, state }),
     buildSelectConfig: buildSelectConfig({ props, state }),
     buildRadioConfig: buildRadioConfig({ props, state }),
@@ -356,13 +346,12 @@ const initApi = ({
     onCopying: onCopying({ state, vm }),
     gridOnQueryChange: gridOnQueryChange({ props, vm, constants, state }),
     watchHoverIndex: watchHoverIndex({ state }),
-    computeOptimizeOpts: computeOptimizeOpts({ props, state }),
-    getScrollListener: getScrollListener({ props, vm, state }),
+    computeOptimizeOpts: computeOptimizeOpts({ props, designConfig }),
     computeCollapseTags: computeCollapseTags(props),
     computeMultipleLimit: computeMultipleLimit({ props, state }),
     watchInputHover: watchInputHover({ vm }),
     initQuery: initQuery({ props, state, constants, vm }),
-    updateModelValue: updateModelValue({ emit, state }),
+    updateModelValue: updateModelValue({ props, emit, state }),
     computedTagsStyle: computedTagsStyle({ props, parent, state }),
     computedReadonly: computedReadonly({ props, state }),
     computedShowClose: computedShowClose({ props, state }),
@@ -374,49 +363,84 @@ const initApi = ({
     computedSelectDisabled: computedSelectDisabled({ props, parent }),
     computedIsExpandAll: computedIsExpandAll(props),
     watchInitValue: watchInitValue({ props, emit }),
-    watchShowClose: watchShowClose({ nextTick, state, parent })
+    watchShowClose: watchShowClose({ nextTick, state, parent }),
+    // tiny 新增
+    computedGetIcon: computedGetIcon({ designConfig, props }),
+    computedGetTagType: computedGetTagType({ designConfig, props }),
+    clearSearchText: clearSearchText({ state, api: api2 }),
+    clearNoMatchValue: clearNoMatchValue({ props, emit })
   });
-  addApi({ api: api2, props, state, emit, constants, parent, nextTick, dispatch, vm, designConfig });
+  addApi({ api: api2, props, state, emit, constants, parent, nextTick, dispatch, vm, isMobileFirstMode, designConfig });
 };
-const addWatch = ({ watch, props, api: api2, state, nextTick }) => {
-  watch(() => [...state.options], api2.watchOptions);
-  if (props.renderType === "grid") {
-    watch(() => state.gridData, api2.setSelected, { immediate: true });
-  }
-  if (props.renderType === "tree") {
-    watch(() => state.treeData, api2.setSelected, { immediate: true });
-  }
-  watch(() => state.hoverIndex, api2.watchHoverIndex);
-  if (props.options) {
-    watch(() => props.options, api2.watchPropsOption, { immediate: true, deep: true });
-  }
-  watch(() => state.optimizeOpts, api2.watchOptimizeOpts);
-  watch([() => state.inputHovering, () => state.visible], api2.watchInputHover);
-  watch(() => state.showClose, api2.watchShowClose, { immediate: true });
-  watch(
-    () => state.selectHover,
-    () => props.hoverExpand && !props.disabled && !state.isDisplayOnly && nextTick(api2.resetInputHeight)
-  );
+const addApi = ({
+  api: api2,
+  props,
+  state,
+  emit,
+  constants,
+  parent,
+  nextTick,
+  dispatch,
+  vm,
+  isMobileFirstMode,
+  designConfig
+}) => {
+  Object.assign(api2, {
+    resetInputHeight: resetInputHeight({ api: api2, constants, nextTick, props, vm, state, designConfig }),
+    calcOverFlow: calcOverFlow({ vm, props, state }),
+    handleFocus: handleFocus({ api: api2, emit, props, state }),
+    deleteTag: deleteTag({ api: api2, constants, emit, props, vm, nextTick, state }),
+    watchValue: watchValue({ api: api2, constants, dispatch, props, vm, state }),
+    toHide: toHide({ constants, state, props, vm, api: api2 }),
+    toVisible: toVisible({ constants, state, props, vm, api: api2, nextTick }),
+    setSelected: setSelected({ api: api2, constants, nextTick, props, vm, state }),
+    selectOption: selectOption({ api: api2, state, props }),
+    handleResize: handleResize({ api: api2, props, state }),
+    watchOptions: watchOptions({ api: api2, constants, nextTick, parent, props, state, vm }),
+    watchVisible: watchVisible({ api: api2, constants, emit, state, vm, props, isMobileFirstMode }),
+    deletePrevTag: deletePrevTag({ api: api2, constants, props, state, vm }),
+    onInputChange: onInputChange({ api: api2, props, state, constants, nextTick }),
+    deleteSelected: deleteSelected({ api: api2, constants, emit, props, vm, state }),
+    handleMenuEnter: handleMenuEnter({ api: api2, nextTick, state, props }),
+    resetInputState: resetInputState({ api: api2, vm, state }),
+    navigateOptions: navigateOptions({ api: api2, state, props, nextTick }),
+    handleClearClick: handleClearClick(api2),
+    handleComposition: handleComposition({ api: api2, nextTick, state }),
+    handleQueryChange: handleQueryChange({ api: api2, constants, nextTick, props, vm, state }),
+    handleOptionSelect: handleOptionSelect({ api: api2, nextTick, props, vm, state }),
+    getPluginOption: getPluginOption({ api: api2, props, state }),
+    toggleCheckAll: toggleCheckAll({ api: api2, emit, state, props }),
+    debouncedQueryChange: debounce(state.debounce, (event) => {
+      api2.handleQueryChange(props.shape ? event : event.target.value, false, true);
+    }),
+    debouncedOnInputChange: debounce(state.debounce, () => {
+      api2.onInputChange();
+    }),
+    debouncRquest: debouncRquest({ api: api2, state, props }),
+    defaultOnQueryChange: defaultOnQueryChange({ props, state, constants, api: api2, nextTick, vm }),
+    queryChange: queryChange({ props, state, constants, api: api2, nextTick, vm }),
+    mounted: mounted({ api: api2, parent, state, props, vm, designConfig }),
+    unMount: unMount({ api: api2, parent, vm, state }),
+    watchOptimizeOpts: watchOptimizeOpts({ props, state }),
+    handleDropdownClick: handleDropdownClick({ emit }),
+    handleEnterTag: handleEnterTag({ state }),
+    calcCollapseTags: calcCollapseTags({ state, vm }),
+    initValue: initValue({ state }),
+    getLabelSlotValue: getLabelSlotValue({ props, state }),
+    loadTreeData: loadTreeData({ state, vm, props, api: api2 })
+  });
 };
 const initWatch = ({ watch, props, api: api2, state, nextTick }) => {
-  if (props.renderType === "tree" && props.treeOp.data) {
-    watch(
-      () => props.treeOp.data,
-      (data) => {
-        data && (state.treeData = data);
-      },
-      { immediate: true, deep: true }
-    );
-  }
-  if (props.renderType === "grid" && props.gridOp.data) {
-    watch(
-      () => props.gridOp.data,
-      (data) => {
-        data && (state.gridData = data);
-      },
-      { immediate: true, deep: true }
-    );
-  }
+  watch(
+    () => props.treeOp.data,
+    (data) => data && (state.treeData = data),
+    { immediate: true, deep: true }
+  );
+  watch(
+    () => props.gridOp.data,
+    (data) => data && (state.gridData = data),
+    { immediate: true, deep: true }
+  );
   watch(
     () => state.selectDisabled,
     () => nextTick(api2.resetInputHeight)
@@ -427,23 +451,94 @@ const initWatch = ({ watch, props, api: api2, state, nextTick }) => {
       state.cachedPlaceHolder = state.currentPlaceholder = value;
     }
   );
-  watch(() => props.modelValue, api2.watchValue);
+  watch(
+    () => props.modelValue,
+    () => {
+      if (props.multiple && Array.isArray(props.modelValue)) {
+        state.modelValue = [...props.modelValue];
+      } else {
+        state.modelValue = props.modelValue;
+      }
+    },
+    { immediate: true, deep: true }
+  );
+  watch(() => state.modelValue, api2.watchValue);
+  watch(
+    () => state.selectedLabel,
+    () => {
+      if (props.trim) {
+        state.selectedLabel = state.selectedLabel.trim();
+      }
+    }
+  );
   watch(
     () => props.extraQueryParams,
     () => api2.handleQueryChange(state.previousQuery, true),
     { deep: true }
   );
+  watch(
+    () => state.breakpoint,
+    (val) => {
+      if (val === "default") {
+        state.device = "mb";
+      } else {
+        state.device = "pc";
+      }
+    },
+    { immediate: true, deep: true }
+  );
+  watch(
+    () => state.device,
+    (newVal, oldVal) => {
+      if (oldVal !== "" && state.visible) {
+        api2.updateModelValue(state.modelValue, true);
+      }
+    }
+  );
   watch(() => state.visible, api2.watchVisible);
   watch(() => state.initValue, api2.watchInitValue, { deep: true });
   addWatch({ watch, props, api: api2, state, nextTick });
 };
-const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, watch, provide }, { vm, parent, emit, constants, nextTick, dispatch, t, emitter, designConfig }) => {
+const addWatch = ({ watch, props, api: api2, state, nextTick }) => {
+  watch(() => [...state.options], api2.watchOptions);
+  if (props.renderType === "grid" && !props.optimization) {
+    watch(() => state.gridData, api2.setSelected, { immediate: true });
+  }
+  if (props.renderType === "tree" && !props.optimization) {
+    watch(() => state.treeData, api2.setSelected, { immediate: true });
+  }
+  watch(() => state.hoverIndex, api2.watchHoverIndex);
+  props.options && watch(() => props.options, api2.watchPropsOption, { immediate: true, deep: true });
+  props.optimization && watch(() => state.optimizeOpts, api2.watchOptimizeOpts, { immediate: true });
+  watch([() => state.inputHovering, () => state.visible], api2.watchInputHover);
+  watch(() => state.showClose, api2.watchShowClose, { immediate: true });
+  watch(
+    () => state.selectHover,
+    () => props.hoverExpand && !props.disabled && !state.isDisplayOnly && nextTick(api2.resetInputHeight)
+  );
+};
+const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, watch, provide, inject }, { vm, parent, emit, constants, nextTick, dispatch, t, emitter, isMobileFirstMode, useBreakpoint, designConfig }) => {
   const api2 = {};
-  const state = initState({ reactive, computed, props, api: api2, emitter, parent, constants, designConfig });
+  const state = initState({ reactive, computed, props, api: api2, emitter, parent, constants, useBreakpoint, vm });
+  const dialog = inject("dialog", null);
   provide("selectEmitter", state.selectEmitter);
   provide("selectVm", vm);
   const maskState = reactive({ width: "", height: "", top: "" });
-  initApi({ api: api2, props, state, emit, maskState, constants, parent, nextTick, dispatch, t, vm, designConfig });
+  initApi({
+    api: api2,
+    props,
+    state,
+    emit,
+    maskState,
+    constants,
+    parent,
+    nextTick,
+    dispatch,
+    t,
+    vm,
+    isMobileFirstMode,
+    designConfig
+  });
   initWatch({ watch, props, api: api2, state, nextTick });
   onMounted(api2.mounted);
   onBeforeUnmount(api2.unMount);
@@ -456,6 +551,7 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
   if (!props.multiple && Array.isArray(props.modelValue)) {
     emit("update:modelValue", "");
   }
+  dialog && dialog.state.emitter.on("handleSelectClose", api2.handleClose);
   state.selectEmitter.on(constants.EVENT_NAME.handleOptionClick, api2.handleOptionSelect);
   state.selectEmitter.on(constants.EVENT_NAME.setSelected, api2.setSelected);
   state.selectEmitter.on(constants.EVENT_NAME.initValue, api2.initValue);

package/select-dropdown/index.js

@@ -1,18 +1,76 @@
 import "../chunk-G2ADBYYC.js";
 const mounted = ({ selectEmitter, constants, state, selectVm, updatePopper, destroyPopper, parent }) => () => {
-  selectEmitter.on(constants.EVENT_NAME.updatePopper, () => {
+  selectEmitter.on(constants.EVENT_NAME.updatePopper, (keepZIndex) => {
     let hideDrop = false;
     if (!state.referenceElm || state.referenceElm.nodeType !== 1) {
       state.referenceElm = selectVm.$refs.reference ? selectVm.$refs.reference.$el : selectVm.$refs.select;
       selectVm.popperElm = selectVm.state.popperElm = state.popperElm = parent.$el;
     }
     if (parent.select.state.visible && !hideDrop) {
-      updatePopper();
+      updatePopper(keepZIndex);
       hideDrop = true;
     }
   });
   selectEmitter.on(constants.EVENT_NAME.destroyPopper, destroyPopper);
 };
+const closeModal = ({ selectVm, state, props }) => ($event, isMask) => {
+  if (!props.closeByMask && isMask)
+    return;
+  selectVm.multiple && selectVm.updateModelValue(state.originValue);
+  selectVm.state.visible = false;
+  selectVm.state.softFocus = false;
+};
+const handleQueryChange = ({ selectVm }) => (value) => {
+  selectVm.handleQueryChange(value);
+};
+const toggleSelectedBox = ({ state }) => (show) => {
+  if (show) {
+    state.selectedArr = state.selected.slice(0);
+    state.deletedArr = [];
+  }
+  state.showSelectedBox = show;
+};
+const deleteSelected = ({ state }) => (option, clear) => {
+  if (clear) {
+    state.deletedArr = state.selectedArr.slice(0);
+    state.selectedArr = [];
+  } else {
+    state.selectedArr = state.selectedArr.filter((item) => item[state.valueField] !== option[state.valueField]);
+    state.deletedArr.push(option);
+  }
+};
+const selectedBoxConfirm = ({ state, selectVm }) => () => {
+  if (state.deletedArr.length) {
+    if (state.deletedArr.length === state.selected.length) {
+      selectVm.updateModelValue([]);
+    } else {
+      selectVm.updateModelValue(state.selectedArr.map((item) => item[state.valueField]));
+    }
+  }
+  state.showSelectedBox = false;
+};
+const selectDropdownConfirm = ({ selectVm }) => () => {
+  selectVm.multiple && selectVm.updateModelValue(selectVm.state.modelValue, true);
+  selectVm.state.visible = false;
+  selectVm.state.softFocus = false;
+  selectVm.$emit("confirm", selectVm.state.modelValue);
+  selectVm.emitChange(selectVm.state.modelValue, true);
+};
+const cancelSearch = ({ api, state }) => () => {
+  state.query = "";
+  api.debouncedQueryChange("");
+};
+const handleClear = ({ selectVm }) => () => {
+  selectVm.deleteSelected();
+};
 export {
-  mounted
+  cancelSearch,
+  closeModal,
+  deleteSelected,
+  handleClear,
+  handleQueryChange,
+  mounted,
+  selectDropdownConfirm,
+  selectedBoxConfirm,
+  toggleSelectedBox
 };