@opentiny/vue-renderless 3.10.7 → 3.11.0

package/modal/index.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { KEY_CODE } from "../common";
 import { on, off, addClass, hasClass, removeClass } from "../common/deps/dom";
 import PopupManager from "../common/deps/popup-manager";
@@ -14,6 +14,20 @@ const emitZoom = ({ params, parent, emit, event }) => {
 };
 const MsgQueue = [];
 const computedIsMsg = () => (props) => props.type === "message";
+const computedBoxStyle = ({ props, isMobileFirstMode }) => () => {
+  if (isMobileFirstMode) {
+    return {};
+  }
+  let width = "";
+  let height = "";
+  if (props.width) {
+    width = isNaN(props.width) ? props.width : `${props.width}px`;
+  }
+  if (props.height) {
+    height = isNaN(props.height) ? props.height : `${props.height}px`;
+  }
+  return { width, height };
+};
 const watchValue = (api) => (visible) => visible ? api.open() : api.close("hide");
 const created = ({ api, props, state }) => () => {
   if (props.modelValue) {
@@ -21,14 +35,13 @@ const created = ({ api, props, state }) => () => {
   }
   state.modalZindex = props.zIndex || PopupManager.nextZIndex();
 };
-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 {
+const mounted = ({
+  api,
+  parent,
+  props,
+  isMobileFirstMode
+}) => () => {
+  if (isMobileFirstMode) {
     on(window, "resize", api.resetDragStyle);
   }
   if (props.escClosable) {
@@ -52,7 +65,13 @@ const selfClickEvent = ({ api, parent, props }) => (event) => {
 const updateZindex = ({ state, props }) => () => {
   state.modalZindex = props.zIndex || PopupManager.nextZIndex();
 };
-const handleEvent = ({ api, emit, parent, props, isMobileFirstMode }) => (type, event, options) => {
+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;
   }
@@ -71,13 +90,21 @@ const handleEvent = ({ api, emit, parent, props, isMobileFirstMode }) => (type,
 const closeEvent = (api) => (event) => {
   api.handleEvent("close", event);
 };
-const confirmEvent = (api) => (event) => {
-  api.handleEvent("confirm", event);
+const confirmEvent = ({ api, state }) => (event) => {
+  api.handleEvent("confirm", event, state.options);
 };
 const cancelEvent = (api) => (event) => {
   api.handleEvent("cancel", event);
 };
-const open = ({ api, emit, nextTick, parent, props, state, isMobileFirstMode }) => () => {
+const open = ({
+  api,
+  emit,
+  nextTick,
+  parent,
+  props,
+  state,
+  isMobileFirstMode
+}) => () => {
   let { $listeners, events = {} } = parent;
   if (!state.visible) {
     let params = { type: "show", $modal: parent };
@@ -98,9 +125,12 @@ const open = ({ api, emit, nextTick, parent, props, state, isMobileFirstMode })
     }, 10);
     if (state.isMsg) {
       api.addMsgQueue();
-      setTimeout(() => {
-        api.close(params.type);
-      }, parseFloat(props.duration));
+      setTimeout(
+        () => {
+          api.close(params.type);
+        },
+        parseFloat(props.duration)
+      );
     } else {
       nextTick(() => {
         if (!isMobileFirstMode) {
@@ -170,46 +200,67 @@ const handleGlobalKeydownEvent = (api) => (event) => {
     api.close("esc");
   }
 };
-const getBox = (refs) => () => refs.modalBox;
-const maximize = ({ api, nextTick, props, state, isMobileFirstMode }) => () => nextTick().then(() => {
-  if (!state.zoomLocat) {
-    let marginSize = props.marginSize;
-    let modalBoxElement = api.getBox();
-    let { visibleHeight, visibleWidth } = getDomNode();
-    state.zoomLocat = {
-      top: modalBoxElement.offsetTop,
-      left: modalBoxElement.offsetLeft,
-      width: modalBoxElement.clientWidth,
-      height: modalBoxElement.clientHeight
-    };
-    if (!isMobileFirstMode) {
-      Object.assign(modalBoxElement.style, {
-        width: `${visibleWidth - marginSize * 2}px`,
-        height: `${visibleHeight - marginSize * 2}px`,
-        top: `${marginSize}px`,
-        left: `${marginSize}px`
-      });
+const getBox = ({ vm }) => () => vm.$refs.modalBox;
+const maximize = ({
+  api,
+  nextTick,
+  props,
+  state,
+  isMobileFirstMode
+}) => () => {
+  return nextTick().then(() => {
+    if (!state.zoomLocat) {
+      let marginSize = props.marginSize;
+      let modalBoxElement = api.getBox();
+      let { visibleHeight, visibleWidth } = getDomNode();
+      state.zoomLocat = {
+        top: modalBoxElement.offsetTop,
+        left: modalBoxElement.offsetLeft,
+        width: modalBoxElement.clientWidth,
+        height: modalBoxElement.clientHeight
+      };
+      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");
     }
-    state.emitter.emit("boxdrag");
-  }
-});
-const revert = ({ api, nextTick, state, isMobileFirstMode }) => () => nextTick().then(() => {
-  let zoomLocat = state.zoomLocat;
-  if (zoomLocat) {
-    let modalBoxElement = api.getBox();
-    state.zoomLocat = null;
-    if (!isMobileFirstMode) {
-      Object.assign(modalBoxElement.style, {
-        width: `${zoomLocat.width}px`,
-        height: `${zoomLocat.height}px`,
-        top: `${zoomLocat.top}px`,
-        left: `${zoomLocat.left}px`
-      });
+  });
+};
+const revert = ({
+  api,
+  nextTick,
+  state,
+  isMobileFirstMode
+}) => () => {
+  return nextTick().then(() => {
+    let zoomLocat = state.zoomLocat;
+    if (zoomLocat) {
+      let modalBoxElement = api.getBox();
+      state.zoomLocat = null;
+      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");
     }
-    state.emitter.emit("boxdrag");
-  }
-});
-const toggleZoomEvent = ({ api, emit, parent, state, isMobileFirstMode }) => (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();
@@ -234,7 +285,14 @@ function getEventTargetNode(event, container, queryCls) {
   }
   return { flag: false };
 }
-const mousedownEvent = ({ api, nextTick, props, state, emit, isMobileFirstMode }) => (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();
@@ -290,7 +348,16 @@ const mousedownEvent = ({ api, nextTick, props, state, emit, isMobileFirstMode }
     emit("custom-mousedown", event);
   }
 };
-const computeLeft = ({ width, offsetWidth, x, minWidth, temp, offsetLeft, marginSize, left }) => {
+const computeLeft = ({
+  width,
+  offsetWidth,
+  x,
+  minWidth,
+  temp,
+  offsetLeft,
+  marginSize,
+  left
+}) => {
   width = offsetWidth - x;
   width = width < minWidth ? minWidth : width;
   temp = offsetLeft + offsetWidth - marginSize;
@@ -298,7 +365,16 @@ const computeLeft = ({ width, offsetWidth, x, minWidth, temp, offsetLeft, margin
   left = offsetLeft + offsetWidth - width;
   return { width, left };
 };
-const computeTop = ({ height, offsetHeight, y, minHeight, temp, offsetTop, marginSize, top }) => {
+const computeTop = ({
+  height,
+  offsetHeight,
+  y,
+  minHeight,
+  temp,
+  offsetTop,
+  marginSize,
+  top
+}) => {
   height = offsetHeight - y;
   height = height < minHeight ? minHeight : height;
   temp = offsetTop + offsetHeight - marginSize;
@@ -306,21 +382,42 @@ const computeTop = ({ height, offsetHeight, y, minHeight, temp, offsetTop, margi
   top = offsetTop + offsetHeight - height;
   return { height, top };
 };
-const computeRight = ({ width, offsetWidth, x, minWidth, temp, visibleWidth, offsetLeft, marginSize }) => {
+const computeRight = ({
+  width,
+  offsetWidth,
+  x,
+  minWidth,
+  temp,
+  visibleWidth,
+  offsetLeft,
+  marginSize
+}) => {
   width = offsetWidth + x;
   width = width < minWidth ? minWidth : width;
   temp = visibleWidth - offsetLeft - marginSize;
   width = width > temp ? temp : width;
   return { width };
 };
-const computeBottom = ({ height, offsetHeight, y, minHeight, temp, visibleHeight, offsetTop, marginSize }) => {
+const computeBottom = ({
+  height,
+  offsetHeight,
+  y,
+  minHeight,
+  temp,
+  visibleHeight,
+  offsetTop,
+  marginSize
+}) => {
   height = offsetHeight + y;
   height = height < minHeight ? minHeight : height;
   temp = visibleHeight - offsetTop - marginSize;
   height = height > temp ? temp : height;
   return { height };
 };
-const updateModalBox = ({ ret: { width, left, height, top }, modalBoxElem: modalBoxElement }) => {
+const updateModalBox = ({
+  ret: { width, left, height, top },
+  modalBoxElem: modalBoxElement
+}) => {
   if (width) {
     modalBoxElement.style.width = `${width}px`;
   }
@@ -334,63 +431,67 @@ const updateModalBox = ({ ret: { width, left, height, top }, modalBoxElem: modal
     modalBoxElement.style.top = `${top}px`;
   }
 };
-const updateWl = ({ width, offsetWidth, x, minWidth, temp, offsetLeft, marginSize, left, modalBoxElem }) => {
+const updateWl = ({
+  width,
+  offsetWidth,
+  x,
+  minWidth,
+  temp,
+  offsetLeft,
+  marginSize,
+  left,
+  modalBoxElem
+}) => {
   updateModalBox({
-    ret: computeLeft({
-      width,
-      offsetWidth,
-      x,
-      minWidth,
-      temp,
-      offsetLeft,
-      marginSize,
-      left
-    }),
+    ret: computeLeft({ width, offsetWidth, x, minWidth, temp, offsetLeft, marginSize, left }),
     modalBoxElem
   });
 };
-const updateWr = ({ width, offsetWidth, x, minWidth, temp, visibleWidth, offsetLeft, marginSize, modalBoxElem }) => {
+const updateWr = ({
+  width,
+  offsetWidth,
+  x,
+  minWidth,
+  temp,
+  visibleWidth,
+  offsetLeft,
+  marginSize,
+  modalBoxElem
+}) => {
   updateModalBox({
-    ret: computeRight({
-      width,
-      offsetWidth,
-      x,
-      minWidth,
-      temp,
-      visibleWidth,
-      offsetLeft,
-      marginSize
-    }),
+    ret: computeRight({ width, offsetWidth, x, minWidth, temp, visibleWidth, offsetLeft, marginSize }),
     modalBoxElem
   });
 };
-const updateSt = ({ height, offsetHeight, y, minHeight, temp, offsetTop, marginSize, top, modalBoxElem }) => {
+const updateSt = ({
+  height,
+  offsetHeight,
+  y,
+  minHeight,
+  temp,
+  offsetTop,
+  marginSize,
+  top,
+  modalBoxElem
+}) => {
   updateModalBox({
-    ret: computeTop({
-      height,
-      offsetHeight,
-      y,
-      minHeight,
-      temp,
-      offsetTop,
-      marginSize,
-      top
-    }),
+    ret: computeTop({ height, offsetHeight, y, minHeight, temp, offsetTop, marginSize, top }),
     modalBoxElem
   });
 };
-const updateSb = ({ height, offsetHeight, y, minHeight, temp, visibleHeight, offsetTop, marginSize, modalBoxElem }) => {
+const updateSb = ({
+  height,
+  offsetHeight,
+  y,
+  minHeight,
+  temp,
+  visibleHeight,
+  offsetTop,
+  marginSize,
+  modalBoxElem
+}) => {
   updateModalBox({
-    ret: computeBottom({
-      height,
-      offsetHeight,
-      y,
-      minHeight,
-      temp,
-      visibleHeight,
-      offsetTop,
-      marginSize
-    }),
+    ret: computeBottom({ height, offsetHeight, y, minHeight, temp, visibleHeight, offsetTop, marginSize }),
     modalBoxElem
   });
 };
@@ -466,6 +567,7 @@ const updateFormTip = (parent) => {
   }
 };
 const dragEvent = ({ api, emit, parent, props, state }) => (event) => {
+  var _a;
   event.preventDefault();
   const delta = { x: 0, y: 0 };
   const { visibleHeight, visibleWidth } = getDomNode();
@@ -481,7 +583,7 @@ const dragEvent = ({ api, emit, parent, props, state }) => (event) => {
     visibleHeight,
     disX: event.clientX,
     disY: event.clientY,
-    type: event.target.dataset.type
+    type: (_a = event.target) == null ? void 0 : _a.dataset.type
   };
   document.onmousemove = (event2) => {
     updateFormTip(parent);
@@ -516,8 +618,8 @@ const resetFormTip = (parent, isFormReset = true) => {
 };
 const resetDragStyle = (api) => () => {
   const modalBoxElement = api.getBox();
-  modalBoxElement.style.left = null;
-  modalBoxElement.style.top = null;
+  modalBoxElement.style.left = "";
+  modalBoxElement.style.top = "";
 };
 export {
   MsgQueue,
@@ -526,6 +628,7 @@ export {
   cancelEvent,
   close,
   closeEvent,
+  computedBoxStyle,
   computedIsMsg,
   confirmEvent,
   created,

package/modal/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import {
   dragEvent,
   handleEvent,
@@ -23,7 +23,8 @@ import {
   confirmEvent,
   cancelEvent,
   open,
-  resetDragStyle
+  resetDragStyle,
+  computedBoxStyle
 } from "./index";
 const api = [
   "state",
@@ -44,7 +45,7 @@ const api = [
   "beforeUnmouted",
   "resetDragStyle"
 ];
-const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch }, { refs, emit, emitter, nextTick, broadcast, vm: parent }, { isMobileFirstMode }) => {
+const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch }, { vm, emit, emitter, nextTick, broadcast, vm: parent }, { isMobileFirstMode }) => {
   const api2 = {};
   const state = reactive({
     emitter: emitter(),
@@ -57,14 +58,15 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
     isMsg: computed(() => api2.computedIsMsg(props)),
     prevEvent: null,
     options: [],
-    theme: props.tiny_theme
+    theme: props.tiny_theme,
+    boxStyle: computed(() => api2.computedBoxStyle())
   });
   Object.assign(api2, {
     state,
     broadcast,
     computedIsMsg: computedIsMsg(),
     updateStyle: updateStyle({ nextTick, props }),
-    getBox: getBox(refs),
+    getBox: getBox({ vm }),
     watchValue: watchValue(api2),
     created: created({ api: api2, props, state }),
     mounted: mounted({ api: api2, parent, props, isMobileFirstMode }),
@@ -73,7 +75,7 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
     updateZindex: updateZindex({ state, props }),
     handleEvent: handleEvent({ api: api2, emit, parent, props, isMobileFirstMode }),
     closeEvent: closeEvent(api2),
-    confirmEvent: confirmEvent(api2),
+    confirmEvent: confirmEvent({ api: api2, state }),
     cancelEvent: cancelEvent(api2),
     open: open({ api: api2, emit, nextTick, parent, props, state, isMobileFirstMode }),
     addMsgQueue: addMsgQueue({ api: api2, parent }),
@@ -85,7 +87,8 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
     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)
+    resetDragStyle: resetDragStyle(api2),
+    computedBoxStyle: computedBoxStyle({ props, isMobileFirstMode })
   });
   watch(() => props.modelValue, api2.watchValue);
   api2.created();

package/month-range/index.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { isDate, modifyWithTimeString, prevYear, nextYear, nextMonth } from "../common/deps/date-util";
 const calcDefaultValue = (defaultValue) => {
   if (Array.isArray(defaultValue)) {
@@ -6,7 +6,7 @@ const calcDefaultValue = (defaultValue) => {
   } else if (defaultValue) {
     return [new Date(defaultValue), nextMonth(new Date(defaultValue))];
   }
-  return [new Date(), nextMonth(new Date())];
+  return [/* @__PURE__ */ new Date(), nextMonth(/* @__PURE__ */ new Date())];
 };
 const watchValue = ({ state }) => (val) => {
   if (!val) {

package/month-range/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import {
   resetView,
   isValidValue,
@@ -35,8 +35,8 @@ const initState = ({ reactive, computed, api: api2, t }) => {
     defaultTime: null,
     minDate: "",
     maxDate: "",
-    leftDate: new Date(),
-    rightDate: nextYear(new Date()),
+    leftDate: /* @__PURE__ */ new Date(),
+    rightDate: nextYear(/* @__PURE__ */ new Date()),
     rangeState: { endDate: null, selecting: false, row: null, column: null },
     shortcuts: "",
     visible: "",

package/month-table/index.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { toDate } from "../common/date";
 import { hasClass } from "../common/deps/dom";
 import { range as rangeDate, getDayCountOfMonth, nextDate } from "../common/deps/date-util";
@@ -22,7 +22,7 @@ const getRows = ({ props, state, vm }) => () => {
   const tableRows = state.tableRows;
   const disabledDate = state.disabledDate;
   const selectedDate = [];
-  const now = getMonthTimestamp(new Date());
+  const now = getMonthTimestamp(/* @__PURE__ */ new Date());
   const { date, minDate, maxDate } = props;
   for (let i = 0; i < 3; i++) {
     const row = tableRows[i];
@@ -156,7 +156,7 @@ const cellMatchesDate = (props) => (cell, date) => {
 const getCellStyle = ({ api, props }) => (cell) => {
   const style = {};
   const year = props.date.getFullYear();
-  const today = new Date();
+  const today = /* @__PURE__ */ new Date();
   const month = cell.text;
   const defaultValue = props.defaultValue ? Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue] : [];
   style.disabled = typeof props.disabledDate === "function" ? datesInMonth(year, month).every(props.disabledDate) : false;

package/month-table/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import {
   getRows,
   getMonthTimestamp,

package/multi-select/index.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { cloneDeep } from "../chart-core/deps/utils";
 const created = ({ props, state, refs, nextTick }) => () => {
   nextTick(() => {

package/multi-select/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { created, handleClick, confirm, reset, wheelChange, clickWheelItem, loadDefault } from "./index";
 const api = [
   "state",