@opentiny/vue-renderless 3.18.6 → 3.19.0

package/input/vue.js

@@ -86,7 +86,8 @@ const initState = ({
   parent,
   constants,
   api: api2,
-  vm
+  vm,
+  designConfig
 }) => {
   const state = reactive({
     mode,
@@ -104,7 +105,10 @@ const initState = ({
     inputSize: computed(() => props.size || state.formItemSize || (parent.tinyForm || {}).size),
     inputSizeMf: computed(() => props.size || state.formItemSize || (parent.tinyForm || {}).size),
     showClear: computed(
-      () => props.clearable && !state.inputDisabled && !props.readonly && state.nativeInputValue && (state.focused || state.hovering)
+      () => {
+        var _a;
+        return props.clearable && !state.inputDisabled && !props.readonly && state.nativeInputValue && (!((_a = designConfig == null ? void 0 : designConfig.options) == null ? void 0 : _a.isCloseIconHide) || state.focused || state.hovering);
+      }
     ),
     textareaHeight: vm.theme === "saas" ? "28px" : "30px",
     upperLimit: computed(() => parent.$attrs.maxlength),
@@ -155,7 +159,6 @@ const initApi = ({
   emit,
   vm,
   props,
-  CLASS_PREFIX,
   parent,
   nextTick
 }) => {
@@ -169,7 +172,7 @@ const initApi = ({
     setShowMoreBtn: setShowMoreBtn({ state, vm }),
     handleChange: handleChange(emit),
     watchFormSelect: watchFormSelect({ emit, props, state }),
-    calcIconOffset: calcIconOffset({ CLASS_PREFIX, parent }),
+    calcIconOffset: calcIconOffset({ vm, parent }),
     getSuffixVisible: getSuffixVisible({ parent, props, state }),
     calculateNodeStyling: calculateNodeStyling(),
     handleCompositionStart: handleCompositionStart(state),
@@ -309,16 +312,12 @@ const initWatch = ({
     { immediate: true }
   );
 };
-const renderless = (props, { computed, onMounted, onBeforeUnmount, onUpdated, reactive, toRefs, watch, inject }, { vm, refs, parent, emit, constants, nextTick, broadcast, dispatch, mode }) => {
+const renderless = (props, { computed, onMounted, onBeforeUnmount, onUpdated, reactive, toRefs, watch, inject }, { vm, refs, parent, emit, constants, nextTick, broadcast, dispatch, mode, designConfig }) => {
   const api2 = {};
   const componentName = constants.COMPONENT_NAME.FormItem;
   const eventName = { change: "form.change", blur: "form.blur" };
-  const CLASS_PREFIX = {
-    Input: constants.inputMode(mode),
-    InputGroup: constants.inputGroupMode(mode)
-  };
-  const state = initState({ reactive, computed, mode, props, parent, constants, api: api2, vm });
-  initApi({ api: api2, state, dispatch, broadcast, emit, refs, props, CLASS_PREFIX, parent, vm, nextTick });
+  const state = initState({ reactive, computed, mode, props, parent, constants, api: api2, vm, designConfig });
+  initApi({ api: api2, state, dispatch, broadcast, emit, refs, props, parent, vm, nextTick });
   const storages = useStorageBox({ api: api2, props, reactive, toRefs });
   parent.tinyForm = parent.tinyForm || inject("form", null);
   mergeApi({ api: api2, storages, componentName, emit, eventName, props, state, nextTick, parent, vm, mode, constants });

package/ip-address/index.js

@@ -254,21 +254,11 @@ const keydown = ({ api, props, state }) => ({ item, index, event }) => {
     return false;
   }
 };
-const getHeightOfSize = (size, isLineHeight = "height") => {
-  const sizeMap = {
-    medium: "42px",
-    small: "36px",
-    mini: "24px"
-  };
-  const sizePX = sizeMap[size];
-  return sizePX ? isLineHeight + ":" + sizePX + ";" : "";
-};
 export {
   blur,
   change,
   focus,
   getCursorPosition,
-  getHeightOfSize,
   getValue,
   inputEvent,
   ipValidator,

package/ip-address/vue.js

@@ -15,8 +15,7 @@ import {
   change,
   blur,
   keyup,
-  keydown,
-  getHeightOfSize
+  keydown
 } from "./index";
 import { KEY_CODE } from "../common";
 const api = ["state", "focus", "inputEvent", "blur", "keyup", "keydown", "change", "select"];
@@ -40,9 +39,7 @@ const initState = ({
     ],
     formDisabled: computed(() => (parent.tinyForm || {}).disabled),
     disabled: computed(() => props.disabled || state.formDisabled),
-    heightStyle: computed(() => getHeightOfSize(props.size)),
-    lineHeightStyle: computed(() => getHeightOfSize(props.size, "line-height")),
-    allHeightStyle: computed(() => `${state.heightStyle}${state.lineHeightStyle}`)
+    size: computed(() => props.size)
   }));
   return state;
 };

package/load-list/index.js

@@ -0,0 +1,43 @@
+import "../chunk-G2ADBYYC.js";
+import { isDisplayNone } from "../common/deps/dom";
+const clickList = ({ emit, props }) => () => {
+  const list = {
+    id: props.id,
+    content: props.content,
+    subtext: props.subText,
+    contentdes: props.contentDes
+  };
+  emit("click", list);
+};
+const check = ({ api, emit, props, state, vm }) => () => {
+  if (state.loading || props.finished || props.disabled || props.error || // skip check when inside an inactive tab
+  state.tabStatus === false) {
+    return;
+  }
+  const offset = +props.offset;
+  const scrollParentRect = api.useRect(state.scroller);
+  if (!scrollParentRect.height || isDisplayNone(vm.$el)) {
+    return;
+  }
+  let isReachEdge = false;
+  const placeholderRect = api.useRect(vm.$refs.placeholder);
+  if (props.direction === "up") {
+    isReachEdge = scrollParentRect.top - placeholderRect.top <= offset;
+  } else {
+    isReachEdge = placeholderRect.bottom - scrollParentRect.bottom <= offset;
+  }
+  if (isReachEdge) {
+    state.loading = true;
+    emit("update:loading", true);
+    emit("load");
+  }
+};
+const clickErrorText = ({ api, emit }) => () => {
+  emit("update:error", false);
+  api.check();
+};
+export {
+  check,
+  clickErrorText,
+  clickList
+};

package/load-list/vue.js

@@ -0,0 +1,69 @@
+import "../chunk-G2ADBYYC.js";
+import { clickList, check, clickErrorText } from "./index";
+import { getScrollParent } from "../common/deps/dom";
+import { useRect } from "../common/deps/useRect";
+import { useEventListener } from "../common/deps/useEventListener";
+import debounce from "../common/deps/debounce";
+const api = ["state", "clickList", "check", "clickErrorText"];
+const renderless = (props, {
+  inject,
+  reactive,
+  computed,
+  onMounted,
+  unref,
+  watch,
+  onUpdated,
+  isRef,
+  onUnmounted,
+  onActivated,
+  onDeactivated,
+  toRef
+}, { emit, vm, nextTick }) => {
+  const api2 = {};
+  const state = reactive({
+    loading: props.loading,
+    tabStatus: inject("TabStatus", null),
+    scrollParent: null,
+    scroller: computed(() => props.scroller || state.scrollParent)
+  });
+  Object.assign(api2, {
+    state,
+    clickList: clickList({ emit, props }),
+    useRect: useRect(unref),
+    check: debounce(+props.delay, check({ api: api2, emit, props, state, vm })),
+    clickErrorText: clickErrorText({ api: api2, emit }),
+    useEventListener: useEventListener({
+      unref,
+      isRef,
+      watch,
+      nextTick,
+      onMounted,
+      onUnmounted,
+      onActivated,
+      onDeactivated
+    })
+  });
+  watch(
+    () => [props.loading, props.finished, props.error],
+    () => api2.check()
+  );
+  watch(
+    () => state.tabStatus,
+    (tabActive) => tabActive && api2.check()
+  );
+  api2.useEventListener("scroll", api2.check, { target: toRef(state, "scroller"), passive: true });
+  onUpdated(() => {
+    state.loading = props.loading;
+  });
+  onMounted(() => {
+    state.scrollParent = getScrollParent(vm.$el);
+    if (props.immediateCheck) {
+      api2.check();
+    }
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/locales/index.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { xss } from "../common";
+import { xss } from "../common/xss";
 const getLocales = ({ api, service, state }) => () => {
   Promise.all([service.getLocale(), service.getCurrentLocale()]).then(([locales, current]) => {
     state.locales = locales || ["zhCN"];
@@ -14,12 +14,8 @@ const setText = (state) => () => {
 };
 const switchLanguage = ({ api, state, service }) => (lang) => {
   const { locales, current } = state;
-  const domain = service.getDomain();
   const hasMultiLocale = state.locales.length === 2;
   state.current = hasMultiLocale ? state.current = locales.indexOf(current) === 0 ? locales[1] : locales[0] : lang;
-  const expires = new Date((/* @__PURE__ */ new Date()).getTime() + 36e5).toGMTString();
-  const currLang = state.current.substring(0, 2) === "zh" ? "zh" : "en";
-  document.cookie = `lang=${currLang};expires=${expires};domain=${domain};path=/`;
   api.setText();
 };
 const changeLocale = ({ props, service, vnode }) => (value, oldValue) => {

package/logout/index.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { xss } from "../common";
+import { xss } from "../common/xss";
 const logout = ({ service, state, props }) => () => {
   let { isMock, isLocal, redirectUrl = "", getLogoutUrl, showLogin } = service;
   if (typeof props.beforeLogout === "function" && !state.logout) {

package/milestone/index.js

@@ -32,14 +32,54 @@ const flagOperate = ({ constants, refs, state }) => ({ event, over, text }) => {
   }
 };
 const getMileIcon = ({ constants, props }) => (node) => {
-  const status = props.milestonesStatus[node[props.statusField]] || constants.DEFAULT_COLOR;
-  const isCompleted = node[props.statusField] === props.completedField;
-  const switchColor = isCompleted && !props.solid;
-  const { r, g, b } = hexToRgb(status);
+  const smbConstants = {
+    STATUS_COLOR_MAP: {
+      DEFAULT: {
+        BORDER_COLOR: "#C2C2C2",
+        BACKGROUND_COLOR: "#FFFFFF",
+        COLOR: "#191919",
+        BOX_SHADOW_PX: "0px 0px 0px 4px",
+        FLAG_CONTENT_CLS: ".content"
+      },
+      COMPLETED: {
+        BORDER_COLOR: "#191919",
+        BACKGROUND_COLOR: "#FFFFFF",
+        COLOR: "#191919",
+        BOX_SHADOW_PX: "0px 0px 0px 4px",
+        FLAG_CONTENT_CLS: ".content"
+      },
+      DOING: {
+        BORDER_COLOR: "#191919",
+        BACKGROUND_COLOR: "#191919",
+        COLOR: "#FFFFFF",
+        BOX_SHADOW_PX: "0px 0px 0px 4px",
+        FLAG_CONTENT_CLS: ".content"
+      }
+    }
+  };
+  const status = node[props.statusField];
+  const statusColor = props.milestonesStatus[status];
+  if (props.solid || status === constants.STATUS_MAP.DOING) {
+    return {
+      "background-color": statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BACKGROUND_COLOR + "!important",
+      color: smbConstants.STATUS_COLOR_MAP.DOING.COLOR + "!important",
+      "border-color": statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BORDER_COLOR,
+      boxShadow: "unset"
+    };
+  }
+  if (status === constants.STATUS_MAP.COMPLETED) {
+    return {
+      "background-color": smbConstants.STATUS_COLOR_MAP.COMPLETED.BACKGROUND_COLOR + "!important",
+      color: statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.COLOR + "!important",
+      "border-color": statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.BORDER_COLOR,
+      boxShadow: "unset"
+    };
+  }
   return {
-    background: (switchColor ? constants.DEFAULT_BACK_COLOR : status) + "!important",
-    color: (switchColor ? status : constants.DEFAULT_BACK_COLOR) + "!important",
-    boxShadow: `rgba(${r},${g},${b},.4) ${constants.BOX_SHADOW_PX}`
+    background: smbConstants.STATUS_COLOR_MAP.DEFAULT.BACKGROUND_COLOR + "!important",
+    color: statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.COLOR + "!important",
+    "border-color": statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.BORDER_COLOR,
+    boxShadow: "unset"
   };
 };
 const getMileContent = (props) => ({ data, index }) => {
@@ -65,11 +105,18 @@ const handleFlagClick = (emit) => ({ idx, flag }) => {
   emit("flagclick", idx, flag);
   emit("flag-click", idx, flag);
 };
+const getFlagStyle = (props) => ({ index, idx }) => {
+  return {
+    left: `calc(${100 / props.data[props.flagBefore ? index : index + 1][props.flagField].length * idx}%  + ${idx * 8}px)`
+  };
+};
 export {
   flagOperate,
+  getFlagStyle,
   getLineColor,
   getMileContent,
   getMileIcon,
   handleClick,
-  handleFlagClick
+  handleFlagClick,
+  hexToRgb
 };

package/milestone/vue.js

@@ -1,5 +1,14 @@
 import "../chunk-G2ADBYYC.js";
-import { handleClick, flagOperate, getMileIcon, getMileContent, getLineColor, handleFlagClick } from "./index";
+import {
+  handleClick,
+  flagOperate,
+  getMileIcon,
+  getMileContent,
+  getLineColor,
+  handleFlagClick,
+  hexToRgb,
+  getFlagStyle
+} from "./index";
 const api = [
   "state",
   "showTip",
@@ -10,7 +19,9 @@ const api = [
   "getMileContent",
   "getMileFlagStyle",
   "getLineColor",
-  "getStatus"
+  "getStatus",
+  "hexToRgb",
+  "getFlagStyle"
 ];
 const renderless = (props, { reactive }, { emit, refs, constants }) => {
   const state = reactive({
@@ -23,7 +34,9 @@ const renderless = (props, { reactive }, { emit, refs, constants }) => {
     handleFlagClick: handleFlagClick(emit),
     handleClick: handleClick({ emit }),
     getMileIcon: getMileIcon({ constants, props }),
-    flagOperate: flagOperate({ constants, refs, state })
+    flagOperate: flagOperate({ constants, refs, state }),
+    hexToRgb,
+    getFlagStyle: getFlagStyle(props)
   };
   return api2;
 };

package/modal/index.js

@@ -5,7 +5,6 @@ import PopupManager from "../common/deps/popup-manager";
 import { getDomNode } from "../common/deps/dom";
 import { getViewportWindow } from "../common/global";
 const DragClass = "is__drag";
-let timer;
 const emitZoom = ({ params, parent, emit, event }) => {
   let { $listeners, events = {} } = parent;
   if ($listeners.zoom) {
@@ -83,12 +82,12 @@ const selfClickEvent = ({ api, parent, props }) => (event) => {
     api.close("mask");
   }
 };
-const mouseEnterEvent = () => () => {
-  clearTimeout(timer);
+const mouseEnterEvent = (state) => () => {
+  clearTimeout(state.timer);
 };
-const mouseLeaveEvent = ({ api, props }) => () => {
+const mouseLeaveEvent = ({ api, props, state }) => () => {
   api.addMsgQueue();
-  timer = window.setTimeout(
+  state.timer = window.setTimeout(
     () => {
       api.close("close");
     },
@@ -158,7 +157,7 @@ const open = ({
     }, 10);
     if (state.isMsg) {
       api.addMsgQueue();
-      timer = window.setTimeout(
+      state.timer = window.setTimeout(
         () => {
           api.close(params.type);
         },
@@ -226,6 +225,7 @@ const close = ({ emit, parent, props, state }) => (type) => {
     setTimeout(() => {
       state.visible = false;
       let params = { type, $modal: parent };
+      emit("close", params);
       if (events.hide) {
         events.hide.call(parent, params);
       } else {

package/modal/vue.js

@@ -70,7 +70,8 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
     prevEvent: null,
     options: [],
     theme: props.tiny_theme,
-    boxStyle: computed(() => api2.computedBoxStyle())
+    boxStyle: computed(() => api2.computedBoxStyle()),
+    timer: 0
   });
   Object.assign(api2, {
     state,
@@ -83,8 +84,8 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
     mounted: mounted({ api: api2, parent, props, isMobileFirstMode, state }),
     beforeUnmouted: beforeUnmouted({ api: api2, parent, isMobileFirstMode }),
     selfClickEvent: selfClickEvent({ api: api2, parent, props }),
-    mouseEnterEvent: mouseEnterEvent(),
-    mouseLeaveEvent: mouseLeaveEvent({ api: api2, props }),
+    mouseEnterEvent: mouseEnterEvent(state),
+    mouseLeaveEvent: mouseLeaveEvent({ api: api2, props, state }),
     updateZindex: updateZindex({ state, props }),
     handleEvent: handleEvent({ api: api2, emit, parent, props, isMobileFirstMode }),
     closeEvent: closeEvent(api2),

package/nav-menu/index.js

@@ -5,7 +5,7 @@ import PopupManager from "../common/deps/popup-manager";
 import { mapTree } from "../grid/static";
 import { transformTreeData } from "../common/array";
 import { on, off } from "../common/deps/dom";
-import { xss } from "../common/xss.js";
+import { xss } from "../common/xss";
 const { nextZIndex } = PopupManager;
 const computedIsShowMore = ({ props, state }) => () => !/^(retract|fixed|hidden)$/.test(props.overflow) && state.more && state.more.length;
 const computedPopClass = (state) => () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.18.6",
+  "version": "3.19.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",

package/pager/index.js

@@ -13,6 +13,7 @@ const computedInternalLayout = ({ props }) => () => {
     props.mode === "simple" && (layout = "sizes, total, prev, current, next");
     props.mode === "complete" && (layout = "sizes, total, prev, pager, next, jumper");
     props.mode === "fixed" && (layout = "prev,pager,next");
+    props.mode === "simplest" && (layout = "total, prev, simplest-pager, next");
   } else if (!props.mode && props.layout || props.mode && props.layout) {
     layout = props.layout;
   } else {
@@ -52,6 +53,27 @@ const computedInternalPageCount = ({ props, state }) => () => {
   }
   return null;
 };
+const computedSimplestPagerOption = ({ props, state }) => () => {
+  const itemSizes = Math.max(1, Math.ceil(props.total / state.internalPageSize));
+  return Array.from({ length: itemSizes }).map((item, index) => ({
+    value: index + 1,
+    label: `${index + 1}/${itemSizes}`
+  }));
+};
+const computedSimplestPagerWidth = ({ state }) => () => {
+  const baseWidth = 60;
+  const num = String(state.internalCurrentPage).length + String(state.simplestPagerOption.length).length;
+  return baseWidth + num * 8;
+};
+const computedPageSizeText = ({ props, designConfig }) => () => {
+  if (props.pageSizeText) {
+    return props.pageSizeText;
+  }
+  if ((designConfig == null ? void 0 : designConfig.state) && Object.hasOwnProperty.call(designConfig.state, "pageSizeText")) {
+    return designConfig.state.pageSizeText;
+  }
+  return "";
+};
 const handleJumperFocus = ({ state }) => (e) => {
   var _a;
   state.jumperBackup = (_a = e.target) == null ? void 0 : _a.value;
@@ -344,7 +366,10 @@ export {
   clickSizes,
   computedInternalLayout,
   computedInternalPageCount,
+  computedPageSizeText,
   computedShowPager,
+  computedSimplestPagerOption,
+  computedSimplestPagerWidth,
   computedTotalText,
   copyEmit,
   emitChange,

package/pager/vue.js

@@ -4,6 +4,9 @@ import {
   computedInternalLayout,
   computedTotalText,
   computedInternalPageCount,
+  computedSimplestPagerOption,
+  computedSimplestPagerWidth,
+  computedPageSizeText,
   handleJumperFocus,
   handleSizeChange,
   handleJumperInput,
@@ -60,7 +63,7 @@ const api = [
   "clickSizes"
 ];
 const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick, t, designConfig }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d;
   const api2 = {};
   const state = reactive({
     showSizes: false,
@@ -71,14 +74,22 @@ const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick,
     internalTotal: props.total,
     jumperValue: "1",
     jumperBackup: "1",
+    simplestPagerOption: computed(() => api2.computedSimplestPagerOption()),
+    simplestPagerWidth: computed(() => api2.computedSimplestPagerWidth()),
     showPager: computed(() => api2.computedShowPager()),
     internalLayout: computed(() => api2.computedInternalLayout()),
     totalText: computed(() => api2.computedTotalText()),
     internalPageCount: computed(() => api2.computedInternalPageCount()),
-    showJumperSufix: (_b = (_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.showJumperSufix) != null ? _b : true,
-    align: props.align || ((_c = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _c.align) || "left",
+    showJumperSuffix: (_b = (_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.showJumperSuffix) != null ? _b : true,
+    align: props.align || ((_c = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _c.align) || "right",
     totalI18n: ((_d = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _d.totalI18n) || "totals",
-    totalFixedLeft: (_g = (_f = props.totalFixedLeft) != null ? _f : (_e = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _e.totalFixedLeft) != null ? _g : false
+    totalFixedLeft: computed(
+      () => {
+        var _a2, _b2, _c2, _d2;
+        return (_d2 = (_c2 = (_b2 = props.totalFixedLeft) != null ? _b2 : (_a2 = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a2.totalFixedLeft) != null ? _c2 : props.mode !== "simplest") != null ? _d2 : true;
+      }
+    ),
+    pageSizeText: computed(() => api2.computedPageSizeText())
   });
   Object.assign(api2, {
     state,
@@ -86,6 +97,9 @@ const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick,
     computedInternalLayout: computedInternalLayout({ props }),
     computedTotalText: computedTotalText({ props, t }),
     computedInternalPageCount: computedInternalPageCount({ props, state }),
+    computedSimplestPagerOption: computedSimplestPagerOption({ props, state }),
+    computedSimplestPagerWidth: computedSimplestPagerWidth({ state }),
+    computedPageSizeText: computedPageSizeText({ props, designConfig }),
     getValidCurrentPage: getValidCurrentPage({ state }),
     handleJumperFocus: handleJumperFocus({ state }),
     handleSizeChange: handleSizeChange({ props, state, api: api2, emit, vm }),

package/picker/index.js

@@ -47,7 +47,7 @@ const watchMobileVisible = ({ api, props, state, nextTick }) => ([dateMobileVisi
   }
 };
 const watchPickerVisible = ({ api, vm, dispatch, emit, props, state, nextTick }) => (value) => {
-  if (props.readonly || state.pickerDisabled || state.isMobileMode)
+  if (props.readonly || state.pickerDisabled || state.isMobileScreen)
     return;
   if (value) {
     api.showPicker();
@@ -703,9 +703,9 @@ const handleClose = ({ api, props, state }) => () => {
 const handleFocus = ({ emit, vm, state, api }) => () => {
   const type = state.type;
   if (DATEPICKER.TriggerTypes.includes(type)) {
-    if (state.isMobileMode && state.isDateMobileComponent) {
+    if (state.isMobileScreen && state.isDateMobileComponent) {
       api.dateMobileToggle(true);
-    } else if (state.isMobileMode && state.isTimeMobileComponent) {
+    } else if (state.isMobileScreen && state.isTimeMobileComponent) {
       api.timeMobileToggle(true);
     } else {
       state.pickerVisible = true;

package/picker/vue.js

@@ -123,7 +123,7 @@ const initState = ({ api: api2, reactive, vm, computed, props, utils, parent, br
     labelTooltip: "",
     displayOnlyTooltip: "",
     isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly),
-    isMobileMode: computed(() => vm.$mode.includes("mobile")),
+    isMobileScreen: computed(() => breakpoint.current.value === "default"),
     dateMobileOption: {
       visible: false,
       type: props.type,

package/popeditor/index.js

@@ -254,7 +254,7 @@ const initDisplay = ({ api, constants, props, state, nextTick }) => (value) => {
     });
   }
 };
-const openDialog = ({ api, props, state, emit }) => () => {
+const openDialog = ({ api, props, state, emit, nextTick }) => () => {
   if (state.disabled) {
     return;
   }
@@ -264,6 +264,9 @@ const openDialog = ({ api, props, state, emit }) => () => {
   state.showContent = true;
   emit("popup");
   props.autoLookup && props.alwaysLoad && api.query();
+  nextTick(() => {
+    api.computedTreeMaxHeight();
+  });
 };
 const localFilter = ({ props, state }) => {
   const keys = Object.keys(state.search);
@@ -651,10 +654,18 @@ const selectedBoxDrag = ({ props, state }) => ({ state: { select } }) => {
     state.selectedValues = values;
   }
 };
+const computedTreeMaxHeight = ({ vm, state }) => () => {
+  var _a;
+  const dialogBoxEl = vm.$refs.popeditorDialogBox.$el;
+  const searchInputBottom = 20;
+  const searchInputHeight = ((_a = dialogBoxEl.querySelector(".tiny-popeditor__filter-input")) == null ? void 0 : _a.clientHeight) || 0;
+  state.treeWrapperMaxHeight = `${dialogBoxEl.querySelector(".tiny-dialog-box__body").clientHeight - searchInputHeight - searchInputBottom}px`;
+};
 export {
   closeSuggestPanel,
   computedGetTitle,
   computedModalWidth,
+  computedTreeMaxHeight,
   computedTreeOp,
   createSearchForm,
   doClear,

package/popeditor/vue.js

@@ -46,7 +46,8 @@ import {
   selectedBoxClear,
   selectedBoxDelete,
   selectedBoxDrag,
-  radioChangeFn
+  radioChangeFn,
+  computedTreeMaxHeight
 } from "./index";
 const api = [
   "state",
@@ -76,7 +77,8 @@ const api = [
   "selectedBoxClear",
   "selectedBoxDelete",
   "selectedBoxDrag",
-  "radioChangeFn"
+  "radioChangeFn",
+  "computedTreeMaxHeight"
 ];
 const initState = ({ reactive, computed, props, api: api2, constants, t, parent, vm }) => {
   const state = reactive({
@@ -117,7 +119,8 @@ const initState = ({ reactive, computed, props, api: api2, constants, t, parent,
     showSuggestPanel: false,
     inputHover: false,
     search: null,
-    closeSuggestPanelInvoker: null
+    closeSuggestPanelInvoker: null,
+    treeWrapperMaxHeight: "auto"
   });
   return state;
 };
@@ -140,7 +143,7 @@ const initApi = ({ api: api2, props, state, parent, vm, emit, popper, constants,
     selectedGridSelectAll: selectedGridSelectAll({ constants, props, vm, state }),
     selectedGridSelectChange: selectedGridSelectChange({ constants, props, vm, state }),
     handleReset: handleReset({ api: api2, state, props }),
-    openDialog: openDialog({ api: api2, emit, props, state }),
+    openDialog: openDialog({ api: api2, emit, props, state, nextTick }),
     initDisplay: initDisplay({ api: api2, constants, props, state, nextTick }),
     handleSearch: handleSearch({ api: api2, props, state, vm, constants }),
     computedTreeOp: computedTreeOp({ api: api2, constants }),
@@ -167,7 +170,8 @@ const initApi = ({ api: api2, props, state, parent, vm, emit, popper, constants,
     selectedBoxClear: selectedBoxClear(api2),
     selectedBoxDelete: selectedBoxDelete(api2),
     selectedBoxDrag: selectedBoxDrag({ props, state }),
-    radioChangeFn: radioChangeFn({ props, api: api2 })
+    radioChangeFn: radioChangeFn({ props, api: api2 }),
+    computedTreeMaxHeight: computedTreeMaxHeight({ vm, state })
   });
   state.search = api2.createSearchForm(false);
 };