@opentiny/vue-renderless 3.9.2 → 3.10.0

package/select/vue.js

@@ -74,13 +74,34 @@ import {
   getScrollListener,
   computeCollapseTags,
   computeMultipleLimit,
+  handleDropdownClick,
+  handleEnterTag,
+  calcCollapseTags,
+  initValue,
+  watchInputHover,
+  initQuery,
+  updateModelValue,
+  getLabelSlotValue,
+  computedTagsStyle,
+  computedReadonly,
+  computedShowClose,
+  computedCollapseTagSize,
+  computedShowNewOption,
+  computedShowCopy,
+  computedOptionsAllDisabled,
+  computedDisabledTooltipContent,
+  computedSelectDisabled,
+  computedIsExpandAll,
+  watchInitValue,
+  watchShowClose,
+  loadTreeData,
   resetFilter,
-  computedGetIcon
+  computedGetIcon,
+  computedGetTagType,
+  computedShowDropdownIcon
 } from "./index";
-import { BROWSER_NAME } from "../common";
-import browserInfo from "../common/browser";
 import debounce from "../common/deps/debounce";
-import { isNumber, isNull } from "../common/type";
+import { isNumber } from "../common/type";
 const api = [
   "state",
   "nodeCollapse",
@@ -133,9 +154,14 @@ const api = [
   "onMouseenterNative",
   "onMouseleaveNative",
   "onCopying",
-  "resetFilter"
+  "handleDropdownClick",
+  "handleEnterTag",
+  "getLabelSlotValue",
+  "loadTreeData",
+  "resetFilter",
+  "computedGetIcon"
 ];
-const initStateAdd = ({ computed, props, api: api2, parent, emitter }) => ({
+const initStateAdd = ({ computed, props, api: api2, parent }) => ({
   selectedTags: [],
   tips: "",
   showTip: false,
@@ -146,21 +172,23 @@ const initStateAdd = ({ computed, props, api: api2, parent, emitter }) => ({
   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,
-  createdLabel: null,
   createdSelected: false,
   isOnComposition: false,
   cachedPlaceHolder: props.placeholder,
-  initialInputHeight: 0,
+  inputHeight: 0,
+  initialInputHeight: 28,
   currentPlaceholder: props.placeholder,
   filteredOptionsCount: 0,
   gridData: [],
@@ -169,104 +197,110 @@ const initStateAdd = ({ computed, props, api: api2, parent, emitter }) => ({
   currentKey: props.modelValue,
   updateId: "",
   popperElm: null,
-  selectEmitter: emitter(),
   debounce: computed(() => isNumber(props.queryDebounce) ? props.queryDebounce : props.remote ? 300 : 0),
   emptyText: computed(() => api2.emptyText()),
   formItemSize: computed(() => (parent.formItem || {}).formItemSize),
-  selectDisabled: computed(() => props.disabled || (parent.form || {}).disabled),
+  selectDisabled: computed(() => api2.computedSelectDisabled()),
+  isDisplayOnly: computed(() => props.displayOnly || (parent.form || {}).displayOnly),
   gridCheckedData: computed(() => api2.getcheckedData()),
-  isExpandAll: computed(
-    () => props.treeOp && props.treeOp.defaultExpandAll !== void 0 ? props.treeOp.defaultExpandAll : true
-  ),
+  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 }) => {
-  const stateAdd = initStateAdd({ computed, props, api: api2, parent, emitter });
+const initState = ({ reactive, computed, props, api: api2, emitter, parent, constants, designConfig }) => {
+  const stateAdd = initStateAdd({ computed, props, api: api2, parent });
   const state = reactive(__spreadProps(__spreadValues({}, stateAdd), {
+    selectEmitter: emitter(),
     datas: [],
     query: "",
     options: [],
     visible: false,
-    showCopy: computed(() => props.multiple && props.copyable && state.inputHovering && state.selected.length),
+    showCopy: computed(() => api2.computedShowCopy()),
     showWarper: true,
-    // 显示下拉外层控制
     selected: props.multiple ? [] : {},
     softFocus: false,
     hover: false,
-    firstAutoSeach: props.remoteConfig.autoSeach,
-    tagsStyle: computed(() => ({ "max-width": state.inputWidth - 32 + "px", width: "100%" })),
-    readonly: computed(
-      () => props.readonly || !props.filterable || props.searchable || props.multiple || browserInfo.name !== BROWSER_NAME.IE && browserInfo.name !== BROWSER_NAME.Edge && !state.visible
-    ),
+    firstAutoSearch: props.remoteConfig.autoSearch,
+    tagsStyle: computed(() => api2.computedTagsStyle()),
+    readonly: computed(() => api2.computedReadonly()),
     iconClass: computed(() => state.visible ? "" : constants.CLASS.IsReverse),
-    showClose: computed(
-      () => props.clearable && !state.selectDisabled && state.inputHovering && (props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : !isNull(props.modelValue) && props.modelValue !== "")
-    ),
-    optionsAllDisabled: computed(
-      () => state.options.filter((option) => option.visible).every((option) => option.disabled)
-    ),
-    collapseTagSize: computed(() => state.selectSize),
-    showNewOption: computed(
-      () => props.filterable && props.allowCreate && state.query !== "" && !state.options.filter((option) => !option.created).some((option) => option.state.currentLabel === state.query)
-    ),
+    showClose: computed(() => api2.computedShowClose()),
+    optionsAllDisabled: computed(() => api2.computedOptionsAllDisabled()),
+    collapseTagSize: computed(() => api2.computedCollapseTagSize()),
+    showNewOption: computed(() => api2.computedShowNewOption()),
     selectSize: computed(() => props.size || state.formItemSize),
     optimizeOpts: computed(() => api2.computeOptimizeOpts()),
     optimizeStore: { flag: false, valueIndex: 0, startIndex: 0, viewStyle: "", datas: [] },
     collapseTags: computed(() => api2.computeCollapseTags()),
     multipleLimit: computed(() => api2.computeMultipleLimit()),
+    disabledTooltipContent: computed(() => api2.computedDisabledTooltipContent()),
+    collapseTagsLength: 0,
+    initValue: [],
+    key: 0,
     isSelectAll: computed(() => state.selectCls === "checked-sur"),
     isHalfSelect: computed(() => state.selectCls === "halfselect"),
-    getIcon: computed(() => api2.computedGetIcon())
+    getIcon: computed(() => api2.computedGetIcon(name = "dropdownIcon")),
+    getTagType: computed(() => api2.computedGetTagType()),
+    isShowDropdownIcon: computed(() => api2.computedShowDropdownIcon())
   }));
   return state;
 };
-const addApi = ({ api: api2, props, state, refs, emit, constants, parent, nextTick, dispatch, vm, designConfig }) => {
+const addApi = ({ api: api2, props, state, emit, constants, parent, nextTick, dispatch, vm, designConfig }) => {
   Object.assign(api2, {
-    resetInputHeight: resetInputHeight({ api: api2, constants, nextTick, props, refs, state }),
-    calcOverFlow: calcOverFlow({ refs, props, state }),
+    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, state }),
-    watchValue: watchValue({ api: api2, constants, dispatch, props, refs, 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, refs, state }),
+    setSelected: setSelected({ api: api2, constants, nextTick, props, vm, state }),
     selectOption: selectOption({ api: api2, state, props }),
-    handleResize: handleResize({ api: api2, props }),
+    handleResize: handleResize({ api: api2, props, state }),
     watchOptions: watchOptions({ api: api2, constants, nextTick, parent, props, state }),
-    watchVisible: watchVisible({ api: api2, constants, emit, state, refs }),
-    deletePrevTag: deletePrevTag({ api: api2, constants, emit, props, state, vm }),
+    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, refs, 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, emit, nextTick, props, refs, state }),
+    handleOptionSelect: handleOptionSelect({ api: api2, nextTick, props, vm, state }),
     getPluginOption: getPluginOption({ api: api2, props, state }),
-    toggleCheckAll: toggleCheckAll({ api: api2, emit, state }),
+    toggleCheckAll: toggleCheckAll({ api: api2, emit, state, props }),
     debouncedQueryChange: debounce(state.debounce, (event) => {
-      api2.handleQueryChange(event.target.value);
+      api2.handleQueryChange(props.shape ? event : event.target.value);
     }),
     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, refs }),
-    unMount: unMount({ api: api2, parent, refs, state }),
-    watchOptimizeOpts: watchOptimizeOpts({ api: api2, props, refs, state }),
+    mounted: mounted({ api: api2, parent, state, props, vm }),
+    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 })
+    computedGetIcon: computedGetIcon({ constants, designConfig, props }),
+    computedGetTagType: computedGetTagType({ designConfig, props }),
+    computedShowDropdownIcon: computedShowDropdownIcon({ props, state })
   });
 };
 const initApi = ({
   api: api2,
   props,
   state,
-  refs,
   emit,
   maskState,
   constants,
@@ -280,30 +314,30 @@ const initApi = ({
   Object.assign(api2, {
     state,
     maskState,
-    doDestroy: doDestroy(refs),
+    doDestroy: doDestroy(vm),
     getTreeData: getTreeData(props),
-    blur: blur({ refs, state }),
-    focus: focus({ refs, state }),
+    blur: blur({ vm, state }),
+    focus: focus({ vm, state }),
     getValueKey: getValueKey(props),
     handleClose: handleClose(state),
     getValueIndex: getValueIndex(props),
     getChildValue: getChildValue(),
     getOption: getOption({ props, state }),
     emitChange: emitChange({ emit, props, state, constants }),
-    toggleMenu: toggleMenu({ refs, state, props }),
-    showTip: showTip({ props, state, refs }),
+    toggleMenu: toggleMenu({ vm, state, props }),
+    showTip: showTip({ props, state, vm }),
     onOptionDestroy: onOptionDestroy(state),
-    setSoftFocus: setSoftFocus({ refs, state }),
+    setSoftFocus: setSoftFocus({ vm, state }),
     getcheckedData: getcheckedData({ props, state }),
-    resetInputWidth: resetInputWidth({ refs, state }),
+    resetInputWidth: resetInputWidth({ vm, state }),
     resetHoverIndex: resetHoverIndex({ props, state }),
-    scrollToOption: scrollToOption({ refs, constants }),
-    selectChange: selectChange({ emit, props, refs, state }),
-    radioChange: radioChange({ emit, props, state }),
+    scrollToOption: scrollToOption({ vm, constants }),
+    selectChange: selectChange({ emit, props, vm, state, api: api2 }),
+    radioChange: radioChange({ emit, props, state, api: api2 }),
     handleCopyClick: handleCopyClick({ parent, props, state }),
-    treeNodeClick: treeNodeClick({ emit, props, state }),
-    managePlaceholder: managePlaceholder({ refs, state }),
-    nodeCheckClick: nodeCheckClick({ emit, props, state }),
+    treeNodeClick: treeNodeClick({ emit, props, state, api: api2, vm }),
+    managePlaceholder: managePlaceholder({ vm, state }),
+    nodeCheckClick: nodeCheckClick({ emit, props, state, api: api2 }),
     checkDefaultFirstOption: checkDefaultFirstOption(state),
     nodeExpand: nodeExpand({ state, constants, nextTick }),
     nodeCollapse: nodeCollapse({ state, constants, nextTick }),
@@ -315,39 +349,70 @@ const initApi = ({
     buildRadioConfig: buildRadioConfig({ props, state }),
     onMouseenterNative: onMouseenterNative({ state }),
     onMouseleaveNative: onMouseleaveNative({ state }),
-    onCopying: onCopying({ state, refs }),
-    gridOnQueryChange: gridOnQueryChange({ props, refs, constants, state }),
+    onCopying: onCopying({ state, vm }),
+    gridOnQueryChange: gridOnQueryChange({ props, vm, constants, state }),
     watchHoverIndex: watchHoverIndex({ state }),
     computeOptimizeOpts: computeOptimizeOpts({ props, state }),
-    getScrollListener: getScrollListener({ props, refs, state }),
+    getScrollListener: getScrollListener({ props, vm, state }),
     computeCollapseTags: computeCollapseTags(props),
-    computeMultipleLimit: computeMultipleLimit({ props, state })
+    computeMultipleLimit: computeMultipleLimit({ props, state }),
+    watchInputHover: watchInputHover({ vm }),
+    initQuery: initQuery({ props, state, constants, vm }),
+    updateModelValue: updateModelValue({ emit, state }),
+    computedTagsStyle: computedTagsStyle({ props, parent, state }),
+    computedReadonly: computedReadonly({ props, state }),
+    computedShowClose: computedShowClose({ props, state }),
+    computedCollapseTagSize: computedCollapseTagSize(state),
+    computedShowNewOption: computedShowNewOption({ props, state }),
+    computedShowCopy: computedShowCopy({ props, state }),
+    computedOptionsAllDisabled: computedOptionsAllDisabled(state),
+    computedDisabledTooltipContent: computedDisabledTooltipContent(state),
+    computedSelectDisabled: computedSelectDisabled({ props, parent }),
+    computedIsExpandAll: computedIsExpandAll(props),
+    watchInitValue: watchInitValue({ props, emit }),
+    watchShowClose: watchShowClose({ nextTick, state, parent })
   });
-  addApi({ api: api2, props, state, refs, emit, constants, parent, nextTick, dispatch, vm, designConfig });
+  addApi({ api: api2, props, state, emit, constants, parent, nextTick, dispatch, vm, designConfig });
 };
-const addWatch = ({ watch, props, api: api2, state }) => {
+const addWatch = ({ watch, props, api: api2, state, nextTick }) => {
   watch(() => [...state.options], api2.watchOptions);
-  watch(() => state.gridData, api2.setSelected, { immediate: true });
-  watch(() => state.treeData, api2.setSelected, { immediate: true });
+  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);
-  props.options && watch(() => props.options, api2.watchPropsOption, { immediate: true, deep: true });
+  if (props.options) {
+    watch(() => props.options, api2.watchPropsOption, { immediate: true, deep: true });
+  }
   watch(() => state.optimizeOpts, api2.watchOptimizeOpts);
-};
-const initWatch = ({ watch, props, api: api2, state, nextTick, refs }) => {
-  props.treeOp.data && watch(
-    () => props.treeOp.data,
-    (data) => {
-      state.treeData = data;
-    },
-    { immediate: true, deep: true }
-  );
-  props.gridOp.data && watch(
-    () => props.gridOp.data,
-    (data) => {
-      state.gridData = data;
-    },
-    { immediate: true, deep: 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 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(
     () => state.selectDisabled,
     () => nextTick(api2.resetInputHeight)
@@ -360,27 +425,27 @@ const initWatch = ({ watch, props, api: api2, state, nextTick, refs }) => {
   );
   watch(() => props.modelValue, api2.watchValue);
   watch(
-    () => state.visible,
-    (value) => {
-      var _a;
-      if ((state.filterOrSearch || props.remote) && !value) {
-        (_a = refs.reference) == null ? void 0 : _a.blur();
-      }
-      api2.watchVisible(value);
-    }
+    () => props.extraQueryParams,
+    () => api2.handleQueryChange(state.previousQuery, true),
+    { deep: true }
   );
-  addWatch({ watch, props, api: api2, state });
+  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, refs, parent, emit, constants, nextTick, dispatch, t, emitter, designConfig }) => {
+const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, watch, provide }, { vm, parent, emit, constants, nextTick, dispatch, t, emitter, designConfig }) => {
   const api2 = {};
-  const state = initState({ reactive, computed, props, api: api2, emitter, parent, constants });
+  const state = initState({ reactive, computed, props, api: api2, emitter, parent, constants, designConfig });
   provide("selectEmitter", state.selectEmitter);
   provide("selectVm", vm);
   const maskState = reactive({ width: "", height: "", top: "" });
-  initApi({ api: api2, props, state, refs, emit, maskState, constants, parent, nextTick, dispatch, t, vm, designConfig });
-  initWatch({ watch, props, api: api2, state, nextTick, refs });
+  initApi({ api: api2, props, state, emit, maskState, constants, parent, nextTick, dispatch, t, vm, designConfig });
+  initWatch({ watch, props, api: api2, state, nextTick });
   onMounted(api2.mounted);
   onBeforeUnmount(api2.unMount);
+  parent.$on("handle-clear", (event) => {
+    api2.handleClearClick(event);
+  });
   if (props.multiple && !Array.isArray(props.modelValue)) {
     emit("update:modelValue", []);
   }
@@ -389,6 +454,7 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
   }
   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);
   return api2;
 };
 export {

package/select-dropdown/vue.js

@@ -23,16 +23,18 @@ const initApi = ({ api: api2, popper, state, selectEmitter, constants, selectVm,
     mounted: mounted({ selectEmitter, constants, state, selectVm, updatePopper, destroyPopper, parent })
   });
 };
-const initWatch = ({ watch, selectVm, state }) => {
+const initWatch = ({ watch, selectVm, state, nextTick }) => {
   watch(
     () => selectVm.state.inputWidth,
-    () => {
-      state.minWidth = (selectVm && selectVm.$el && selectVm.$el.getBoundingClientRect().width) + "px";
+    (val) => {
+      nextTick(() => {
+        state.minWidth = (selectVm && selectVm.$el && selectVm.$el.getBoundingClientRect().width || val) + "px";
+      });
     },
     { immediate: true }
   );
 };
-const renderless = (props, { computed, onBeforeUnmount, onDeactivated, onMounted, reactive, toRefs, watch, inject }, { refs, slots, parent, emit, nextTick }) => {
+const renderless = (props, { computed, onBeforeUnmount, onDeactivated, onMounted, reactive, toRefs, watch, inject }, { vm, slots, parent, emit, nextTick }) => {
   const api2 = {};
   const constants = parent.select._constants;
   const selectEmitter = inject("selectEmitter");
@@ -44,14 +46,14 @@ const renderless = (props, { computed, onBeforeUnmount, onDeactivated, onMounted
     onDeactivated,
     props,
     reactive,
-    refs,
+    vm,
     slots,
     toRefs,
     watch
   });
   const state = initState({ reactive, computed, popper, selectVm });
   initApi({ api: api2, popper, state, selectEmitter, constants, selectVm, parent });
-  initWatch({ watch, selectVm, state });
+  initWatch({ watch, selectVm, state, nextTick });
   onBeforeUnmount(() => {
     popper.destroyPopper("remove");
     state.popperElm = null;

package/select-mobile/index.js

@@ -14,17 +14,7 @@ const watchVisible = ({ emit, state, props, api }) => (bool) => {
   }, 0);
   emit("update:visible", bool);
 };
-const watchModelValue = ({ props, state, emit }) => (value) => {
-  const { multiple, menus, valueField, textField, textSplit } = props;
-  if (multiple) {
-    const ids = menus.map((option) => option[valueField]);
-    state.checkList = (value || []).map((id) => {
-      return ids.indexOf(id) > -1 ? menus[ids.indexOf(id)] : { [valueField]: id, [textField]: id };
-    });
-  }
-  const text = multiple ? state.checkList.map((item) => item[textField]) : menus.filter((item) => item[valueField] === value).map((item) => item[textField]);
-  emit("update:text", text.join(textSplit));
-};
+const watchModelValue = ({ api }) => () => api.setSelected();
 const includeOptionIndex = (props) => (list, option) => {
   const { valueField } = props;
   let index = -1;
@@ -43,6 +33,7 @@ const selectOption = ({ emit, state, props, api }) => (option) => {
   } else {
     emit("update:visible", false);
     emit("update:modelValue", option[valueField]);
+    emit("confirm", option[valueField]);
   }
   emit("click", option);
 };
@@ -62,9 +53,9 @@ const searchMethod = ({ state, props }) => () => {
   if (searchConfig && searchConfig.searchMethod) {
     list = searchConfig.searchMethod({ input, options }) || [];
   } else {
-    list = options.filter((item) => item[textField].indexOf(input) > -1);
+    list = options.filter((item) => item[textField].includes(input));
   }
-  if (list.then === "function") {
+  if (typeof list.then === "function") {
     list.then((data) => state.search.filterOptions = data);
   } else {
     state.search.filterOptions = list;
@@ -97,15 +88,37 @@ const searchSelectHandler = ({ state, emit, api, props }) => (option) => {
   }
   emit("search-click", option);
 };
+const isSelected = ({ state, api, props }) => (option) => {
+  const { valueField, multiple, modelValue } = props;
+  return multiple ? api.includeOptionIndex(state.checkList, option) > -1 : option[valueField] === modelValue;
+};
+const watchPropsOption = ({ api }) => () => api.setSelected();
+const setSelected = ({ props, state, emit }) => () => {
+  const { multiple, menus, valueField, textField, textSplit, modelValue } = props;
+  if (!menus.length)
+    return;
+  if (multiple) {
+    const ids = menus.map((option) => option[valueField]);
+    state.checkList = (modelValue || []).map((id) => {
+      return ids.includes(id) ? menus[ids.indexOf(id)] : { [valueField]: id, [textField]: id };
+    });
+  }
+  const text = multiple ? state.checkList.map((item) => item[textField]) : menus.filter((item) => item[valueField] === modelValue).map((item) => item[textField]);
+  state.selectedLabel = text.join(textSplit);
+  emit("update:text", state.selectedLabel);
+};
 export {
   allCheckHandler,
   confirm,
   hide,
   includeOptionIndex,
+  isSelected,
   searchBoxToggle,
   searchMethod,
   searchSelectHandler,
   selectOption,
+  setSelected,
   watchModelValue,
+  watchPropsOption,
   watchVisible
 };

package/select-mobile/vue.js

@@ -9,7 +9,10 @@ import {
   searchBoxToggle,
   watchModelValue,
   includeOptionIndex,
-  allCheckHandler
+  isSelected,
+  allCheckHandler,
+  watchPropsOption,
+  setSelected
 } from "./index";
 const api = [
   "state",
@@ -20,6 +23,7 @@ const api = [
   "searchSelectHandler",
   "searchBoxToggle",
   "includeOptionIndex",
+  "isSelected",
   "allCheckHandler"
 ];
 const renderless = (props, { computed, reactive, watch }, { emit }) => {
@@ -33,7 +37,8 @@ const renderless = (props, { computed, reactive, watch }, { emit }) => {
       options: [],
       filterOptions: []
     },
-    checkIds: computed(() => state.checkList.map((option) => option[props.valueField]))
+    checkIds: computed(() => state.checkList.map((option) => option[props.valueField])),
+    selectedLabel: ""
   });
   Object.assign(api2, {
     state,
@@ -41,15 +46,19 @@ const renderless = (props, { computed, reactive, watch }, { emit }) => {
     selectOption: selectOption({ state, emit, props, api: api2 }),
     hide: hide({ state, emit }),
     watchVisible: watchVisible({ emit, state, props, api: api2 }),
-    watchModelValue: watchModelValue({ props, state, emit }),
+    watchModelValue: watchModelValue({ api: api2 }),
     searchMethod: searchMethod({ state, props, api: api2 }),
     searchSelectHandler: searchSelectHandler({ state, emit, api: api2, props }),
     searchBoxToggle: searchBoxToggle({ state, props, api: api2 }),
     allCheckHandler: allCheckHandler({ state, props }),
-    includeOptionIndex: includeOptionIndex(props)
+    includeOptionIndex: includeOptionIndex(props),
+    isSelected: isSelected({ state, api: api2, props }),
+    watchPropsOption: watchPropsOption({ api: api2 }),
+    setSelected: setSelected({ props, state, emit })
   });
   watch(() => props.visible, api2.watchVisible);
-  watch(() => props.modelValue, api2.watchModelValue, { immediate: true });
+  watch(() => props.modelValue, api2.watchModelValue);
+  watch(() => props.menus, api2.watchPropsOption, { immediate: true, deep: true });
   return api2;
 };
 export {

package/select-view/index.js

@@ -23,7 +23,7 @@ const watchModelValue = ({ props, state, emit }) => (value) => {
   if (multiple) {
     const ids = menus.map((option) => option[valueField]);
     state.checkList = (value || []).map((id) => {
-      return ids.indexOf(id) > -1 ? menus[ids.indexOf(id)] : { [valueField]: id, [textField]: id };
+      return ids.includes(id) ? menus[ids.indexOf(id)] : { [valueField]: id, [textField]: id };
     });
   }
   const textStr = multiple ? state.checkList.map((data) => data[textField]) : menus.filter((data) => data[valueField] === value).map((data) => data[textField]);
@@ -39,17 +39,6 @@ const includeOptionIndex = (props) => (list, option) => {
   });
   return OptionIndex;
 };
-const selectOption = ({ emit, state, props, api }) => (data) => {
-  const { valueField, multiple } = props;
-  if (multiple) {
-    const index = api.includeOptionIndex(state.checkList, data);
-    index > -1 ? state.checkList.splice(index, 1) : state.checkList.push(data);
-  } else {
-    emit("update:visible", false);
-    emit("update:modelValue", data[valueField]);
-  }
-  emit("click", data);
-};
 const confirm = ({ state, props, api, emit }) => () => {
   const { search, checkIds } = state;
   if (!search.show) {
@@ -68,9 +57,7 @@ const searchMethod = ({ state, props }) => () => {
   if (searchConfig && searchConfig.searchMethod) {
     list = searchConfig.searchMethod({ input, options }) || [];
   } else {
-    list = options.filter(
-      (item) => item[textField].indexOf(input) > -1 && topOptionIds.indexOf(item[valueField]) === -1
-    );
+    list = options.filter((item) => item[textField].includes(input) && !topOptionIds.includes(item[valueField]));
   }
   if (typeof list.then === "function") {
     list.then((data) => state.search.filterOptions = data);
@@ -97,7 +84,7 @@ const searchSelectHandler = ({ state, emit, api, props }) => (option) => {
   const { valueField, multiple, requiredSelectedList } = props;
   if (multiple) {
     const index = api.includeOptionIndex(state.checkList, option);
-    if (index > -1 && requiredSelectedList.indexOf(option[valueField]) !== -1) {
+    if (index > -1 && requiredSelectedList.includes(option[valueField])) {
       emit("search-click", option, false);
       return;
     }
@@ -105,6 +92,7 @@ const searchSelectHandler = ({ state, emit, api, props }) => (option) => {
   } else {
     api.searchBoxToggle(false);
     emit("update:modelValue", option[valueField]);
+    emit("confirm", option[valueField], option);
   }
   emit("search-click", option, true);
 };
@@ -121,9 +109,7 @@ const toggleCheckList = ({ state }) => (value) => {
 };
 const clean = ({ state, props }) => () => {
   const { valueField, requiredSelectedList } = props;
-  state.selected.options = state.selected.options.filter(
-    (item) => requiredSelectedList.indexOf(item[valueField]) !== -1
-  );
+  state.selected.options = state.selected.options.filter((item) => requiredSelectedList.includes(item[valueField]));
 };
 const selectedOptionHandler = ({ state, api }) => (option) => {
   const index = api.includeOptionIndex(state.selected.options, option);
@@ -139,7 +125,6 @@ const load = ({ state, props, api }) => () => {
   }
   const list = infiniteScroll.load({ input: search.input, options: search.options });
   if (!list) {
-    return;
   } else if (typeof list.then === "function") {
     state.search.loading = true;
     list.then((data) => {
@@ -162,7 +147,6 @@ export {
   searchBoxToggle,
   searchMethod,
   searchSelectHandler,
-  selectOption,
   selectedOptionHandler,
   toggleCheckList,
   watchModelValue,