@opentiny/vue-renderless 3.12.0 → 3.13.0-alpha.0

package/select/vue.js

@@ -22,6 +22,7 @@ import {
   scrollToOption,
   handleMenuEnter,
   emitChange,
+  directEmitChange,
   getOption,
   setSelected,
   handleFocus,
@@ -49,6 +50,7 @@ import {
   resetInputWidth,
   handleResize,
   checkDefaultFirstOption,
+  setOptionHighlight,
   getValueKey,
   emptyText,
   watchValue,
@@ -95,11 +97,11 @@ import {
   watchInitValue,
   watchShowClose,
   loadTreeData,
-  resetFilter,
   computedGetIcon,
   computedGetTagType,
   computedShowDropdownIcon,
-  clearNoMatchValue
+  clearNoMatchValue,
+  resetFilter
 } from "./index";
 import debounce from "../common/deps/debounce";
 import { isNumber } from "../common/type";
@@ -129,6 +131,7 @@ const api = [
   "resetInputHeight",
   "managePlaceholder",
   "checkDefaultFirstOption",
+  "setOptionHighlight",
   "toggleLastOptionHitState",
   "deleteTag",
   "setSelected",
@@ -159,6 +162,7 @@ const api = [
   "handleEnterTag",
   "getLabelSlotValue",
   "loadTreeData",
+  "updateModelValue",
   "resetFilter",
   "computedGetIcon"
 ];
@@ -200,7 +204,7 @@ const initStateAdd = ({ computed, props, api: api2, parent }) => ({
   popperElm: null,
   debounce: computed(() => isNumber(props.queryDebounce) ? props.queryDebounce : props.remote ? 300 : 0),
   emptyText: computed(() => api2.emptyText()),
-  formItemSize: computed(() => (parent.formItem || {}).formItemSize),
+  formItemSize: computed(() => (parent.formItem || { state: {} }).state.formItemSize),
   selectDisabled: computed(() => api2.computedSelectDisabled()),
   isDisplayOnly: computed(() => props.displayOnly || (parent.form || {}).displayOnly),
   gridCheckedData: computed(() => api2.getcheckedData()),
@@ -211,7 +215,7 @@ const initStateAdd = ({ computed, props, api: api2, parent }) => ({
   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, useBreakpoint }) => {
   const stateAdd = initStateAdd({ computed, props, api: api2, parent });
   const state = reactive(__spreadProps(__spreadValues({}, stateAdd), {
     selectEmitter: emitter(),
@@ -225,10 +229,10 @@ 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()),
-    iconClass: computed(() => state.visible ? "" : constants.CLASS.IsReverse),
     showClose: computed(() => api2.computedShowClose()),
     optionsAllDisabled: computed(() => api2.computedOptionsAllDisabled()),
     collapseTagSize: computed(() => api2.computedCollapseTagSize()),
@@ -239,18 +243,44 @@ const initState = ({ reactive, computed, props, api: api2, emitter, parent, cons
     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,
+    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 : "",
     isSelectAll: computed(() => state.selectCls === "checked-sur"),
     isHalfSelect: computed(() => state.selectCls === "halfselect"),
-    getIcon: computed(() => api2.computedGetIcon(name = "dropdownIcon")),
+    getIcon: computed(() => api2.computedGetIcon()),
     getTagType: computed(() => api2.computedGetTagType()),
     isShowDropdownIcon: computed(() => api2.computedShowDropdownIcon())
   }));
   return state;
 };
-const addApi = ({ api: api2, props, state, emit, constants, parent, nextTick, dispatch, vm, designConfig }) => {
+const addApi = ({
+  api: api2,
+  props,
+  state,
+  emit,
+  constants,
+  parent,
+  nextTick,
+  dispatch,
+  vm,
+  designConfig,
+  isMobileFirstMode
+}) => {
   Object.assign(api2, {
     resetInputHeight: resetInputHeight({ api: api2, constants, nextTick, props, vm, state, designConfig }),
     calcOverFlow: calcOverFlow({ vm, props, state }),
@@ -263,19 +293,19 @@ const addApi = ({ api: api2, props, state, emit, constants, parent, nextTick, di
     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 }),
+    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 }),
     resetInputState: resetInputState({ api: api2, vm, state }),
-    navigateOptions: navigateOptions({ api: api2, nextTick, state }),
+    navigateOptions: navigateOptions({ api: api2, nextTick, state, props }),
     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 }),
+    toggleCheckAll: toggleCheckAll({ api: api2, state }),
     debouncedQueryChange: debounce(state.debounce, (event) => {
       api2.handleQueryChange(props.shape ? event : event.target.value);
     }),
@@ -284,7 +314,7 @@ const addApi = ({ api: api2, props, state, emit, constants, parent, nextTick, di
     }),
     debouncRquest: debouncRquest({ api: api2, state, props }),
     defaultOnQueryChange: defaultOnQueryChange({ props, state, constants, api: api2 }),
-    mounted: mounted({ api: api2, parent, state, props, vm, constants }),
+    mounted: mounted({ api: api2, parent, state, props, vm, constants, designConfig }),
     unMount: unMount({ api: api2, parent, vm, state }),
     watchOptimizeOpts: watchOptimizeOpts({ api: api2, props, vm, state }),
     handleDropdownClick: handleDropdownClick({ emit }),
@@ -312,7 +342,8 @@ const initApi = ({
   dispatch,
   t,
   vm,
-  designConfig
+  designConfig,
+  isMobileFirstMode
 }) => {
   Object.assign(api2, {
     state,
@@ -327,7 +358,8 @@ const initApi = ({
     getChildValue: getChildValue(),
     getOption: getOption({ 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 }),
@@ -342,11 +374,12 @@ const initApi = ({
     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 }),
     watchPropsOption: watchPropsOption({ constants, parent, props, state }),
     buildSelectConfig: buildSelectConfig({ props, state }),
     buildRadioConfig: buildRadioConfig({ props, state }),
@@ -361,7 +394,7 @@ const initApi = ({
     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 }),
@@ -375,7 +408,7 @@ const initApi = ({
     watchInitValue: watchInitValue({ props, emit }),
     watchShowClose: watchShowClose({ nextTick, state, parent })
   });
-  addApi({ api: api2, props, state, emit, constants, parent, nextTick, dispatch, vm, designConfig });
+  addApi({ api: api2, props, state, emit, constants, parent, nextTick, dispatch, vm, designConfig, isMobileFirstMode });
 };
 const addWatch = ({ watch, props, api: api2, state, nextTick }) => {
   watch(() => [...state.options], api2.watchOptions);
@@ -426,23 +459,75 @@ 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 renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, watch, provide }, { 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, designConfig, useBreakpoint });
   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,
+    designConfig,
+    isMobileFirstMode
+  });
   initWatch({ watch, props, api: api2, state, nextTick });
   onMounted(api2.mounted);
   onBeforeUnmount(api2.unMount);

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;
+      state.referenceElm = selectVm.$refs.reference && selectVm.$refs.reference.$el;
       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
 };

package/select-dropdown/vue.js

@@ -1,7 +1,30 @@
 import "../chunk-G2ADBYYC.js";
-import { mounted } from "./index";
+import {
+  mounted,
+  closeModal,
+  handleQueryChange,
+  toggleSelectedBox,
+  deleteSelected,
+  selectedBoxConfirm,
+  selectDropdownConfirm,
+  cancelSearch,
+  handleClear
+} from "./index";
 import userPopper from "../common/deps/vue-popper";
-const api = ["state", "doDestroy"];
+import PopupManager from "../common/deps/popup-manager";
+import debounce from "../common/deps/debounce";
+const api = [
+  "state",
+  "doDestroy",
+  "closeModal",
+  "debouncedQueryChange",
+  "toggleSelectedBox",
+  "deleteSelected",
+  "selectedBoxConfirm",
+  "selectDropdownConfirm",
+  "cancelSearch",
+  "handleClear"
+];
 const initState = ({ reactive, computed, popper, selectVm }) => {
   const { showPopper, currentPlacement, popperElm, referenceElm } = popper;
   const state = reactive({
@@ -10,16 +33,43 @@ const initState = ({ reactive, computed, popper, selectVm }) => {
     popperElm,
     referenceElm,
     minWidth: "",
+    query: "",
+    showSelectedBox: false,
+    debounce: 300,
+    selectedArr: [],
+    deletedArr: [],
+    originValue: [],
+    showClose: computed(() => selectVm.clearable && !selectVm.multiple && selectVm.modelValue !== ""),
+    filterable: computed(() => selectVm.filterable),
     multiple: computed(() => selectVm.multiple),
-    popperClass: computed(() => selectVm.popperClass)
+    popperClass: computed(() => selectVm.popperClass),
+    selected: computed(
+      () => selectVm.renderType === "tree" && !selectVm.treeOp.checkStrictly ? selectVm.state.selected.filter((item) => !item.children) : selectVm.state.selected
+    ),
+    device: computed(() => selectVm.state.device),
+    visible: false,
+    windowScrollTop: 0,
+    zIndex: 2e3,
+    valueField: computed(() => selectVm.renderType === "tree" ? "id" : "value")
   });
   return state;
 };
-const initApi = ({ api: api2, popper, state, selectEmitter, constants, selectVm, parent }) => {
+const initApi = ({ api: api2, popper, state, selectEmitter, constants, selectVm, parent, nextTick, props }) => {
   const { destroyPopper, doDestroy, updatePopper } = popper;
   Object.assign(api2, {
     state,
     doDestroy,
+    handleQueryChange: handleQueryChange({ state, selectVm }),
+    debouncedQueryChange: debounce(state.debounce, (value) => {
+      api2.handleQueryChange(value);
+    }),
+    toggleSelectedBox: toggleSelectedBox({ state }),
+    deleteSelected: deleteSelected({ state }),
+    selectedBoxConfirm: selectedBoxConfirm({ state, selectVm, nextTick }),
+    selectDropdownConfirm: selectDropdownConfirm({ state, selectVm }),
+    closeModal: closeModal({ state, selectVm, props }),
+    cancelSearch: cancelSearch({ api: api2, state, selectVm }),
+    handleClear: handleClear({ state, selectVm }),
     mounted: mounted({ selectEmitter, constants, state, selectVm, updatePopper, destroyPopper, parent })
   });
 };
@@ -33,8 +83,35 @@ const initWatch = ({ watch, selectVm, state, nextTick }) => {
     },
     { immediate: true }
   );
+  watch(
+    () => state.query,
+    (val) => {
+      selectVm.state.queryValue = val;
+    }
+  );
+  watch(
+    () => selectVm.state.visible,
+    (val) => {
+      state.query = "";
+      setTimeout(() => {
+        state.visible = val;
+        state.zIndex = PopupManager.nextZIndex();
+      }, 0);
+      if (val && selectVm.multiple) {
+        state.originValue = selectVm.modelValue.slice(0);
+      }
+    }
+  );
+  watch(
+    () => selectVm.shape,
+    () => {
+      nextTick(() => {
+        state.referenceElm = selectVm.$refs.reference && selectVm.$refs.reference.$el;
+      });
+    }
+  );
 };
-const renderless = (props, { computed, onBeforeUnmount, onDeactivated, onMounted, reactive, toRefs, watch, inject }, { vm, slots, parent, emit, nextTick }) => {
+const renderless = (props, { computed, onBeforeUnmount, onDeactivated, onMounted, reactive, toRefs, watch, inject }, { vm, slots, parent, emit, nextTick, isMobileFirstMode }) => {
   const api2 = {};
   const constants = parent.select._constants;
   const selectEmitter = inject("selectEmitter");
@@ -51,9 +128,9 @@ const renderless = (props, { computed, onBeforeUnmount, onDeactivated, onMounted
     toRefs,
     watch
   });
-  const state = initState({ reactive, computed, popper, selectVm });
-  initApi({ api: api2, popper, state, selectEmitter, constants, selectVm, parent });
-  initWatch({ watch, selectVm, state, nextTick });
+  const state = initState({ reactive, computed, popper, props, selectVm });
+  initApi({ api: api2, popper, state, selectEmitter, constants, selectVm, parent, nextTick, props, isMobileFirstMode });
+  initWatch({ watch, selectVm, state, nextTick, api: api2 });
   onBeforeUnmount(() => {
     popper.destroyPopper("remove");
     state.popperElm = null;

package/select-view/index.js

@@ -125,7 +125,9 @@ const load = ({ state, props, api }) => () => {
   }
   const list = infiniteScroll.load({ input: search.input, options: search.options });
   if (!list) {
-  } else if (typeof list.then === "function") {
+    return;
+  }
+  if (typeof list.then === "function") {
     state.search.loading = true;
     list.then((data) => {
       state.search.loading = false;