@opentiny/vue-renderless 3.6.7 → 3.8.0

package/image/vue.js

@@ -12,11 +12,14 @@ import {
   getImageStyle,
   clickHandler,
   closeViewer,
-  mounted
+  mounted,
+  deleteHander
 } from "./index";
-const api = ["state", "src", "zIndex", "previewSrcList", "loadImage", "clickHandler", "closeViewer", "handleLoad", "handleError"];
-const initState = ({ reactive, computed, api: api2, props }) => {
+const api = ["state", "src", "zIndex", "previewSrcList", "loadImage", "clickHandler", "closeViewer", "handleLoad", "handleError", "deleteHander"];
+const initState = ({ reactive, computed, api: api2, props, images }) => {
   const state = reactive({
+    mfPreviewVisible: props.previewVisible,
+    images,
     error: false,
     loading: true,
     imageWidth: 0,
@@ -44,7 +47,8 @@ const initApi = ({ api: api2, state, emit, props, vm, constants, nextTick, attrs
     handleLazyLoad: handleLazyLoad({ api: api2, state, vm, nextTick }),
     loadImage: loadImage({ api: api2, state, props, attrs }),
     computedGetImageStyle: computedGetImageStyle({ api: api2, props }),
-    addLazyLoadListener: addLazyLoadListener({ api: api2, props, state, vm })
+    addLazyLoadListener: addLazyLoadListener({ api: api2, props, state, vm }),
+    deleteHander: deleteHander(emit)
   });
 };
 const initWatch = ({ watch, state, api: api2, props }) => {
@@ -57,13 +61,15 @@ const initWatch = ({ watch, state, api: api2, props }) => {
     (value) => value && api2.loadImage()
   );
 };
-const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, watch }, { vm, emit, constants, nextTick, attrs }) => {
+const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, watch, provide }, { vm, emit, constants, nextTick, attrs }, { images }) => {
   const api2 = {};
-  const state = initState({ reactive, computed, api: api2, props });
+  const state = initState({ reactive, computed, api: api2, props, images });
   initApi({ api: api2, state, emit, props, vm, constants, nextTick, attrs });
   initWatch({ watch, state, api: api2, props });
   onMounted(api2.mounted);
   onBeforeUnmount(() => props.lazy && api2.removeLazyLoadListener());
+  provide("mfPreviewVisible", state.mfPreviewVisible);
+  provide("urlList", props.previewSrcList);
   return api2;
 };
 export {

package/image-viewer/index.js

@@ -1,9 +1,9 @@
 import {
   __spreadValues
 } from "../chunk-PKUHTIDK.js";
-import { on, off } from "@opentiny/vue-renderless/common/deps/dom";
-import { KEY_CODE } from "@opentiny/vue-renderless/common";
-import PopupManager from "@opentiny/vue-renderless/common/deps/popup-manager";
+import { on, off } from "../common/deps/dom";
+import { KEY_CODE } from "../common";
+import PopupManager from "../common/deps/popup-manager";
 const isFirefox = () => !!window.navigator.userAgent.match(/firefox/i);
 const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";
 const rafThrottle = (fn) => {

package/image-viewer/vue.js

@@ -47,14 +47,24 @@ const api = [
   "swipeRight",
   "handleDelete"
 ];
-const initState = ({ reactive, computed, api: api2, mode, props, constants }) => {
+const initState = ({ reactive, computed, api: api2, mode, props, constants, inject }) => {
   const state = reactive({
-    index: mode == "pc" ? 0 : props.startPosition,
+    originScale: "",
+    moveable: false,
+    pageX: "",
+    pageY: "",
+    pageY2: "",
+    pageX2: "",
+    mfPreviewVisible: inject("mfPreviewVisible", null),
+    scale: 1,
+    time: null,
+    index: mode === "pc" || mode === "mobile-first" ? 0 : props.startPosition,
+    imageName: "",
     isShow: false,
     infinite: true,
     loading: false,
     transform: { scale: 1, deg: 0, offsetX: 0, offsetY: 0, objfit: "contain", enableTransition: false },
-    urlList: props.urlList,
+    urlList: inject("urlList", null) || props.urlList,
     mode: constants.MODE.CONTAIN,
     previewVisible: props.previewVisible,
     fullScreen: props.imageFullCurrent,
@@ -120,7 +130,7 @@ const initWatch = ({ watch, state, api: api2, props, nextTick, vm }) => {
     () => props.previewVisible,
     (value) => {
       api2.watchVisible(value);
-      if (props.previewVisible) {
+      if (props.previewVisible || state.mfPreviewVisible) {
         nextTick(() => {
           state.urlList = props.urlList;
           api2.getImageWidth();
@@ -146,9 +156,9 @@ const initWatch = ({ watch, state, api: api2, props, nextTick, vm }) => {
     { immediate: true }
   );
 };
-const renderless = (props, { computed, onMounted, onUpdated, reactive, watch }, { t, parent, nextTick, emit, constants, vm, mode }) => {
+const renderless = (props, { computed, onMounted, onUpdated, reactive, watch, inject }, { t, parent, nextTick, emit, constants, vm, mode }) => {
   const api2 = {};
-  const state = initState({ reactive, computed, api: api2, mode, props, constants });
+  const state = initState({ reactive, computed, api: api2, mode, props, constants, inject });
   initApi({ api: api2, state, props, parent, nextTick, emit, t, constants });
   initWatch({ watch, state, api: api2, props, nextTick, vm });
   onMounted(api2.deviceSupportInstall);

package/input/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { isSame } from "@opentiny/vue-renderless/common/type";
+import { isSame } from "../common/type";
 const HIDDEN_STYLE = `
 height:0 !important;visibility:hidden !important;overflow:hidden !important;
 position:absolute !important;z-index:-1000 !important;top:0 !important;right:0 !important
@@ -221,13 +221,44 @@ const hasSelection = (api) => () => {
   const input = api.getInput();
   return input && input.selectionStart !== input.selectionEnd;
 };
+const handleEnterDisplayOnlyContent = ({ state, props }) => ($event, type) => {
+  const target = $event.target;
+  if (target && (target.scrollWidth > target.offsetWidth || type === "textarea" && target.scrollHeight > target.offsetHeight)) {
+    state.displayOnlyTooltip = props.displayOnlyContent || state.nativeInputValue;
+  }
+};
+const hiddenPassword = ({ state, props }) => () => {
+  let str = "";
+  const password = props.displayOnlyContent || state.nativeInputValue;
+  for (let i = 0; i < password.length; i++) {
+    str += "*";
+  }
+  return str;
+};
+const dispatchDisplayedValue = ({ state, props, dispatch, api }) => () => {
+  if (state.isDisplayOnly) {
+    dispatch("FormItem", "displayed-value-changed", {
+      type: props.type || "text",
+      val: api.getDisplayedValue()
+    });
+  }
+};
+const getDisplayedValue = ({ state, props }) => () => {
+  if (props.type === "password") {
+    return state.hiddenPassword || "-";
+  } else {
+    return props.displayOnlyContent || state.nativeInputValue || "-";
+  }
+};
 export {
   blur,
   calcIconOffset,
   calcTextareaHeight,
   calculateNodeStyling,
   clear,
+  dispatchDisplayedValue,
   focus,
+  getDisplayedValue,
   getInput,
   getSuffixVisible,
   handleBlur,
@@ -235,10 +266,12 @@ export {
   handleCompositionEnd,
   handleCompositionStart,
   handleCompositionUpdate,
+  handleEnterDisplayOnlyContent,
   handleFocus,
   handleInput,
   handlePasswordVisible,
   hasSelection,
+  hiddenPassword,
   resizeTextarea,
   select,
   setNativeInputValue,

package/input/vue.js

@@ -26,9 +26,13 @@ import {
   handlePasswordVisible,
   handleCompositionStart,
   handleCompositionUpdate,
-  hasSelection
+  hasSelection,
+  handleEnterDisplayOnlyContent,
+  hiddenPassword,
+  dispatchDisplayedValue,
+  getDisplayedValue
 } from "./index";
-import useStorageBox from "@opentiny/vue-renderless/tall-storage/vue-storage-box";
+import useStorageBox from "../tall-storage/vue-storage-box";
 const api = [
   "blur",
   "showBox",
@@ -57,7 +61,9 @@ const api = [
   "selectedMemory",
   "storageData",
   "isMemoryStorage",
-  "hasSelection"
+  "hasSelection",
+  "handleEnterDisplayOnlyContent",
+  "hiddenPassword"
 ];
 const initState = ({ reactive, computed, mode, props, parent, constants }) => {
   const state = reactive({
@@ -88,7 +94,12 @@ const initState = ({ reactive, computed, mode, props, parent, constants }) => {
     nativeInputValue: computed(() => props.modelValue === null || props.modelValue === void 0 ? "" : String(props.modelValue)),
     isWordLimitVisible: computed(
       () => (props.showWordLimit && parent.$attrs.maxlength || props.counter) && (parent.type === "text" || parent.type === "textarea") && !state.inputDisabled && !props.readonly && !props.showPassword
-    )
+    ),
+    isDisplayOnly: computed(
+      () => (props.displayOnly || (parent.tinyForm || {}).displayOnly) && ["text", "textarea", "password", "number"].includes(props.type)
+    ),
+    displayOnlyTooltip: "",
+    hiddenPassword: computed(() => api.hiddenPassword())
   });
   return state;
 };
@@ -106,7 +117,9 @@ const initApi = ({ api: api2, state, dispatch, broadcast, emit, refs, props, CLA
     getSuffixVisible: getSuffixVisible({ parent, props, state }),
     calculateNodeStyling: calculateNodeStyling(),
     handleCompositionStart: handleCompositionStart(state),
-    handleCompositionUpdate: handleCompositionUpdate(state)
+    handleCompositionUpdate: handleCompositionUpdate(state),
+    dispatchDisplayedValue: dispatchDisplayedValue({ state, props, dispatch, api: api2 }),
+    getDisplayedValue: getDisplayedValue({ state, props })
   });
 };
 const mergeApi = ({ storages, api: api2, componentName, props, emit, eventName, nextTick, parent, state, refs }) => {
@@ -140,7 +153,9 @@ const mergeApi = ({ storages, api: api2, componentName, props, emit, eventName,
     setNativeInputValue: setNativeInputValue({ api: api2, state }),
     handleCompositionEnd: handleCompositionEnd({ api: api2, state }),
     handlePasswordVisible: handlePasswordVisible({ api: api2, nextTick, state }),
-    hasSelection: hasSelection(api2)
+    hasSelection: hasSelection(api2),
+    handleEnterDisplayOnlyContent: handleEnterDisplayOnlyContent({ state, props }),
+    hiddenPassword: hiddenPassword({ state, props })
   });
 };
 const initWatch = ({ watch, state, api: api2, props, nextTick, emit, componentName, eventName }) => {
@@ -202,6 +217,7 @@ const renderless = (props, { computed, onMounted, onUpdated, reactive, toRefs, w
     api2.setNativeInputValue();
     api2.resizeTextarea();
     api2.updateIconOffset();
+    api2.dispatchDisplayedValue();
     dispatch("Select", "input-mounted", vm.$el);
     dispatch("Tooltip", "tooltip-update", vm.$el);
   });

package/ip-address/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { KEY_CODE, IPTHRESHOLD } from "@opentiny/vue-renderless/common";
+import { KEY_CODE, IPTHRESHOLD } from "../common";
 const isIP6 = (str) => /^IPv6$/i.test(str);
 const isIP4 = (str) => /^IPv4$/i.test(str);
 const ipValidator = ({ props, api }) => (value) => {

package/ip-address/vue.js

@@ -18,7 +18,7 @@ import {
   keydown,
   getHeightOfSize
 } from "./index";
-import { KEY_CODE } from "@opentiny/vue-renderless/common";
+import { KEY_CODE } from "../common";
 const api = ["state", "focus", "inputEvent", "blur", "keyup", "keydown", "change", "select"];
 const initState = ({ reactive, computed, handleValue, parent, props }) => {
   const state = reactive(__spreadProps(__spreadValues({}, handleValue.state), {

package/link-menu/index.js

@@ -2,8 +2,8 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-PKUHTIDK.js";
-import { mapTree } from "@opentiny/vue-renderless/grid/static";
-import { copyArray } from "@opentiny/vue-renderless/common/object";
+import { mapTree } from "../grid/static";
+import { copyArray } from "../common/object";
 const dialogTitle = ({ constants, props, t }) => () => props.title || t(constants.DIALOG_TITLE);
 const showDialog = (state) => () => state.boxVisibility = true;
 const hideDialog = ({ api, state, vm, props }) => () => {

package/link-menu/vue.js

@@ -1,7 +1,7 @@
 import "../chunk-PKUHTIDK.js";
 import { initData, dialogTitle, disabledParentNode, filterNode, getValue, hideDialog, showDialog, sureNodevalue, disabledTreeNode, initService } from "./index";
-import { copyArray } from "@opentiny/vue-renderless/common/object";
-import { setMenuKey } from "@opentiny/vue-renderless/tree-menu";
+import { copyArray } from "../common/object";
+import { setMenuKey } from "../tree-menu";
 const api = ["state", "initData", "filterNode", "getValue", "hideDialog", "setMenuKey", "showDialog", "sureNodevalue"];
 const initState = ({ reactive, computed, api: api2 }) => {
   const state = reactive({

package/loading/index.js

@@ -1,6 +1,6 @@
 import "../chunk-PKUHTIDK.js";
-import afterLeave from "@opentiny/vue-renderless/common/deps/after-leave";
-import { removeClass } from "@opentiny/vue-renderless/common/deps/dom";
+import afterLeave from "../common/deps/after-leave";
+import { removeClass } from "../common/deps/dom";
 const handleAfterLeave = (emit) => () => {
   emit("after-leave");
 };

package/loading/vue.js

@@ -9,7 +9,8 @@ const renderless = (props, { reactive }, { constants, vm, emit }) => {
     customClass: "",
     background: null,
     fullscreen: true,
-    closed: false
+    closed: false,
+    size: "small"
   });
   const api2 = {
     state,

package/locales/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { xss } from "@opentiny/vue-renderless/common";
+import { xss } from "../common";
 const getLocales = ({ api, service, state }) => () => {
   Promise.all([service.getLocale(), service.getCurrentLocale()]).then(([locales, current]) => {
     state.locales = locales || ["zhCN"];

package/logout/index.js

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

package/milestone/index.js

@@ -1,6 +1,10 @@
 import "../chunk-PKUHTIDK.js";
 const hexToRgb = (hex) => {
-  hex = hex.slice(1);
+  if (hex.includes("var")) {
+    hex = hex.replace(/var\(|\)/g, "");
+    hex = getComputedStyle(document.documentElement).getPropertyValue(hex);
+  }
+  hex = hex.replace(/\s*#/g, "");
   if (hex.length == 3) {
     hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
   }

package/modal/index.js

@@ -1,8 +1,8 @@
 import "../chunk-PKUHTIDK.js";
-import { KEY_CODE } from "@opentiny/vue-renderless/common";
-import { on, off, addClass, hasClass, removeClass } from "@opentiny/vue-renderless/common/deps/dom";
-import PopupManager from "@opentiny/vue-renderless/common/deps/popup-manager";
-import { getDomNode } from "@opentiny/vue-renderless/common/deps/dom";
+import { KEY_CODE } from "../common";
+import { on, off, addClass, hasClass, removeClass } from "../common/deps/dom";
+import PopupManager from "../common/deps/popup-manager";
+import { getDomNode } from "../common/deps/dom";
 const DragClass = "is__drag";
 const emitZoom = ({ params, parent, emit, event }) => {
   let { $listeners, events = {} } = parent;
@@ -21,18 +21,23 @@ const created = ({ api, props, state }) => () => {
   }
   state.modalZindex = props.zIndex || PopupManager.nextZIndex();
 };
-const mounted = ({ api, parent, props }) => () => {
-  let modalBoxElem = api.getBox();
-  Object.assign(modalBoxElem.style, {
-    width: props.width ? isNaN(props.width) ? props.width : `${props.width}px` : null,
-    height: props.height ? isNaN(props.height) ? props.height : `${props.height}px` : null
-  });
+const mounted = ({ api, parent, props, isMobileFirstMode }) => () => {
+  if (!isMobileFirstMode) {
+    let modalBoxElem = api.getBox();
+    Object.assign(modalBoxElem.style, {
+      width: props.width ? isNaN(props.width) ? props.width : `${props.width}px` : null,
+      height: props.height ? isNaN(props.height) ? props.height : `${props.height}px` : null
+    });
+  } else {
+    on(window, "resize", api.resetDragStyle);
+  }
   if (props.escClosable) {
     on(document, "keydown", api.handleGlobalKeydownEvent);
   }
   document.body.appendChild(parent.$el);
 };
-const beforeUnmouted = ({ api, parent }) => () => {
+const beforeUnmouted = ({ api, parent, isMobileFirstMode }) => () => {
+  isMobileFirstMode && off(window, "resize", api.resetDragStyle);
   off(document, "keydown", api.handleGlobalKeydownEvent);
   api.removeMsgQueue();
   if (parent.$el.parentNode) {
@@ -47,7 +52,7 @@ const selfClickEvent = ({ api, parent, props }) => (event) => {
 const updateZindex = ({ state, props }) => () => {
   state.modalZindex = props.zIndex || PopupManager.nextZIndex();
 };
-const handleEvent = ({ api, emit, parent, props }) => (type, event) => {
+const handleEvent = ({ api, emit, parent, props, isMobileFirstMode }) => (type, event, options) => {
   if (~["close", "confirm", "cancel"].indexOf(type) && typeof props.beforeClose === "function" && props.beforeClose(type) === false) {
     return;
   }
@@ -56,6 +61,9 @@ const handleEvent = ({ api, emit, parent, props }) => (type, event) => {
     type,
     $modal: parent
   };
+  if (isMobileFirstMode && type === "confirm") {
+    params.options = options;
+  }
   emit(type, params, event);
   events[type] && events[type].call(parent, params);
   api.close(type);
@@ -69,7 +77,7 @@ const confirmEvent = (api) => (event) => {
 const cancelEvent = (api) => (event) => {
   api.handleEvent("cancel", event);
 };
-const open = ({ api, emit, nextTick, parent, props, state }) => () => {
+const open = ({ api, emit, nextTick, parent, props, state, isMobileFirstMode }) => () => {
   let { $listeners, events = {} } = parent;
   if (!state.visible) {
     let params = { type: "show", $modal: parent };
@@ -95,12 +103,14 @@ const open = ({ api, emit, nextTick, parent, props, state }) => () => {
       }, parseFloat(props.duration));
     } else {
       nextTick(() => {
-        let modalBoxElem = api.getBox();
-        let clientVisibleWidth = document.documentElement.clientWidth || document.body.clientWidth;
-        let clientVisibleHeight = document.documentElement.clientHeight || document.body.clientHeight;
-        modalBoxElem.style.left = `${clientVisibleWidth / 2 - modalBoxElem.offsetWidth / 2}px`;
-        if (modalBoxElem.offsetHeight + modalBoxElem.offsetTop + props.marginSize > clientVisibleHeight) {
-          modalBoxElem.style.top = `${props.marginSize}px`;
+        if (!isMobileFirstMode) {
+          let modalBoxElem = api.getBox();
+          let clientVisibleWidth = document.documentElement.clientWidth || document.body.clientWidth;
+          let clientVisibleHeight = document.documentElement.clientHeight || document.body.clientHeight;
+          modalBoxElem.style.left = `${clientVisibleWidth / 2 - modalBoxElem.offsetWidth / 2}px`;
+          if (modalBoxElem.offsetHeight + modalBoxElem.offsetTop + props.marginSize > clientVisibleHeight) {
+            modalBoxElem.style.top = `${props.marginSize}px`;
+          }
         }
         if (props.fullscreen) {
           nextTick(api.maximize);
@@ -159,7 +169,7 @@ const handleGlobalKeydownEvent = (api) => (event) => {
   }
 };
 const getBox = (refs) => () => refs.modalBox;
-const maximize = ({ api, nextTick, props, state }) => () => nextTick().then(() => {
+const maximize = ({ api, nextTick, props, state, isMobileFirstMode }) => () => nextTick().then(() => {
   if (!state.zoomLocat) {
     let marginSize = props.marginSize;
     let modalBoxElement = api.getBox();
@@ -170,32 +180,37 @@ const maximize = ({ api, nextTick, props, state }) => () => nextTick().then(() =
       width: modalBoxElement.clientWidth,
       height: modalBoxElement.clientHeight
     };
-    Object.assign(modalBoxElement.style, {
-      width: `${visibleWidth - marginSize * 2}px`,
-      height: `${visibleHeight - marginSize * 2}px`,
-      top: `${marginSize}px`,
-      left: `${marginSize}px`
-    });
+    if (!isMobileFirstMode) {
+      Object.assign(modalBoxElement.style, {
+        width: `${visibleWidth - marginSize * 2}px`,
+        height: `${visibleHeight - marginSize * 2}px`,
+        top: `${marginSize}px`,
+        left: `${marginSize}px`
+      });
+    }
     state.emitter.emit("boxdrag");
   }
 });
-const revert = ({ api, nextTick, state }) => () => nextTick().then(() => {
+const revert = ({ api, nextTick, state, isMobileFirstMode }) => () => nextTick().then(() => {
   let zoomLocat = state.zoomLocat;
   if (zoomLocat) {
     let modalBoxElement = api.getBox();
     state.zoomLocat = null;
-    Object.assign(modalBoxElement.style, {
-      width: `${zoomLocat.width}px`,
-      height: `${zoomLocat.height}px`,
-      top: `${zoomLocat.top}px`,
-      left: `${zoomLocat.left}px`
-    });
+    if (!isMobileFirstMode) {
+      Object.assign(modalBoxElement.style, {
+        width: `${zoomLocat.width}px`,
+        height: `${zoomLocat.height}px`,
+        top: `${zoomLocat.top}px`,
+        left: `${zoomLocat.left}px`
+      });
+    }
     state.emitter.emit("boxdrag");
   }
 });
-const toggleZoomEvent = ({ api, emit, parent, state }) => (event) => {
+const toggleZoomEvent = ({ api, emit, parent, state, isMobileFirstMode }) => (event) => {
   let params = { type: state.zoomLocat ? "min" : "max", $modal: parent };
   const callback = state.zoomLocat ? api.revert : api.maximize;
+  isMobileFirstMode && api.resetDragStyle();
   return callback().then(() => {
     emitZoom({ params, parent, emit, event });
   });
@@ -217,7 +232,7 @@ function getEventTargetNode(event, container, queryCls) {
   }
   return { flag: false };
 }
-const mousedownEvent = ({ api, nextTick, props, state, emit }) => (event) => {
+const mousedownEvent = ({ api, nextTick, props, state, emit, isMobileFirstMode }) => (event) => {
   let modalBoxElement = api.getBox();
   if (!state.zoomLocat && event.button === 0 && !getEventTargetNode(event, modalBoxElement, "trigger__btn").flag) {
     event.preventDefault();
@@ -231,12 +246,20 @@ const mousedownEvent = ({ api, nextTick, props, state, emit }) => (event) => {
       state.emitter.emit("boxdrag");
       let offsetWidth = modalBoxElement.offsetWidth;
       let offsetHeight = modalBoxElement.offsetHeight;
-      let minX = props.marginSize;
-      let maxX = visibleWidth - offsetWidth - props.marginSize;
-      let minY = props.marginSize;
-      let maxY = visibleHeight - offsetHeight - props.marginSize;
       let left = event2.clientX - disX;
       let top = event2.clientY - disY;
+      let minX, maxX, minY, maxY;
+      if (isMobileFirstMode) {
+        minX = offsetWidth / 2 + props.marginSize;
+        maxX = visibleWidth - offsetWidth / 2 - props.marginSize;
+        minY = offsetHeight / 2 + props.marginSize;
+        maxY = visibleHeight - offsetHeight / 2 - props.marginSize;
+      } else {
+        minX = props.marginSize;
+        maxX = visibleWidth - offsetWidth - props.marginSize;
+        minY = props.marginSize;
+        maxY = visibleHeight - offsetHeight - props.marginSize;
+      }
       if (left < minX) {
         left = minX;
       }
@@ -489,6 +512,11 @@ const resetFormTip = (parent, isFormReset = true) => {
     });
   }
 };
+const resetDragStyle = (api) => () => {
+  const modalBoxElement = api.getBox();
+  modalBoxElement.style.left = null;
+  modalBoxElement.style.top = null;
+};
 export {
   MsgQueue,
   addMsgQueue,
@@ -508,6 +536,7 @@ export {
   mousedownEvent,
   open,
   removeMsgQueue,
+  resetDragStyle,
   resetFormTip,
   revert,
   selfClickEvent,

package/modal/vue.js

@@ -22,7 +22,8 @@ import {
   closeEvent,
   confirmEvent,
   cancelEvent,
-  open
+  open,
+  resetDragStyle
 } from "./index";
 const api = [
   "state",
@@ -40,9 +41,10 @@ const api = [
   "confirmEvent",
   "cancelEvent",
   "open",
-  "beforeUnmouted"
+  "beforeUnmouted",
+  "resetDragStyle"
 ];
-const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch }, { refs, emit, emitter, nextTick, broadcast, vm: parent }) => {
+const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch }, { refs, emit, emitter, nextTick, broadcast, vm: parent }, { isMobileFirstMode }) => {
   const api2 = {};
   const state = reactive({
     emitter: emitter(),
@@ -63,24 +65,25 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
     getBox: getBox(refs),
     watchValue: watchValue(api2),
     created: created({ api: api2, props, state }),
-    mounted: mounted({ api: api2, parent, props }),
-    beforeUnmouted: beforeUnmouted({ api: api2, parent }),
+    mounted: mounted({ api: api2, parent, props, isMobileFirstMode }),
+    beforeUnmouted: beforeUnmouted({ api: api2, parent, isMobileFirstMode }),
     selfClickEvent: selfClickEvent({ api: api2, parent, props }),
     updateZindex: updateZindex({ state, props }),
-    handleEvent: handleEvent({ api: api2, emit, parent, props }),
+    handleEvent: handleEvent({ api: api2, emit, parent, props, isMobileFirstMode }),
     closeEvent: closeEvent(api2),
     confirmEvent: confirmEvent(api2),
     cancelEvent: cancelEvent(api2),
-    open: open({ api: api2, emit, nextTick, parent, props, state }),
+    open: open({ api: api2, emit, nextTick, parent, props, state, isMobileFirstMode }),
     addMsgQueue: addMsgQueue({ api: api2, parent }),
     removeMsgQueue: removeMsgQueue({ api: api2, parent }),
     close: close({ emit, parent, props, state }),
     handleGlobalKeydownEvent: handleGlobalKeydownEvent(api2),
-    maximize: maximize({ api: api2, nextTick, props, state }),
-    revert: revert({ api: api2, nextTick, state }),
-    toggleZoomEvent: toggleZoomEvent({ api: api2, emit, parent, state }),
-    mousedownEvent: mousedownEvent({ api: api2, nextTick, props, state, emit }),
-    dragEvent: dragEvent({ api: api2, emit, parent, props, state })
+    maximize: maximize({ api: api2, nextTick, props, state, isMobileFirstMode }),
+    revert: revert({ api: api2, nextTick, state, isMobileFirstMode }),
+    toggleZoomEvent: toggleZoomEvent({ api: api2, emit, parent, state, isMobileFirstMode }),
+    mousedownEvent: mousedownEvent({ api: api2, nextTick, props, state, emit, isMobileFirstMode }),
+    dragEvent: dragEvent({ api: api2, emit, parent, props, state }),
+    resetDragStyle: resetDragStyle(api2)
   });
   watch(() => props.modelValue, api2.watchValue);
   api2.created();

package/month-range/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { isDate, modifyWithTimeString, prevYear, nextYear, nextMonth } from "@opentiny/vue-renderless/common/deps/date-util";
+import { isDate, modifyWithTimeString, prevYear, nextYear, nextMonth } from "../common/deps/date-util";
 const calcDefaultValue = (defaultValue) => {
   if (Array.isArray(defaultValue)) {
     return [new Date(defaultValue[0]), new Date(defaultValue[1])];

package/month-range/vue.js

@@ -15,7 +15,7 @@ import {
   handleShortcutClick,
   doPick
 } from "./index";
-import { nextYear } from "@opentiny/vue-renderless/common/deps/date-util";
+import { nextYear } from "../common/deps/date-util";
 const api = ["state", "rightNextYear", "rightPrevYear", "handleRangePick", "handleShortcutClick", "handleChangeRange", "leftPrevYear", "leftNextYear"];
 const initState = ({ reactive, computed, api: api2, t }) => {
   const state = reactive({

package/month-table/index.js

@@ -1,9 +1,9 @@
 import "../chunk-PKUHTIDK.js";
-import { toDate } from "@opentiny/vue-renderless/common/date";
-import { hasClass } from "@opentiny/vue-renderless/common/deps/dom";
-import { range as rangeDate, getDayCountOfMonth, nextDate } from "@opentiny/vue-renderless/common/deps/date-util";
-import { arrayFindIndex, coerceTruthyValueToArray, arrayFind } from "@opentiny/vue-renderless/date-table";
-import { DATEPICKER } from "@opentiny/vue-renderless/common";
+import { toDate } from "../common/date";
+import { hasClass } from "../common/deps/dom";
+import { range as rangeDate, getDayCountOfMonth, nextDate } from "../common/deps/date-util";
+import { arrayFindIndex, coerceTruthyValueToArray, arrayFind } from "../date-table";
+import { DATEPICKER } from "../common";
 const datesInMonth = (year, month) => {
   const numOfDays = getDayCountOfMonth(year, month);
   const firstDay = new Date(year, month, 1);

package/month-table/vue.js

@@ -10,7 +10,7 @@ import {
   getCellStyle,
   getMonthOfCell
 } from "./index";
-import { DATEPICKER } from "@opentiny/vue-renderless/common";
+import { DATEPICKER } from "../common";
 const api = ["state", "handleMonthTableClick", "handleMouseMove", "getCellStyle"];
 const renderless = (props, { computed, reactive, watch }, { t, vm, emit }) => {
   const api2 = {};