yuang-framework-ui-pc 1.1.15 → 1.1.17

package/lib/ele-dialog/util.cjs

@@ -8,18 +8,18 @@ const wrapperClass = "ele-dialog";
 const closedClass = "ele-dialog-closed";
 const fixTop = 0.65;
 const fixLeft = 0.65;
-function getModalEl(dialogRef) {
+function getDialogEl(dialogRef) {
   var _a, _b;
   const el = (_b = vue.unref((_a = vue.unref(dialogRef)) == null ? void 0 : _a.dialogContentRef)) == null ? void 0 : _b.$el;
   return el;
 }
-function initModalStyle(modalEl) {
-  modalEl.style.top = modalEl.offsetTop + "px";
-  modalEl.style.left = modalEl.offsetLeft + "px";
-  modalEl.style.right = "auto";
-  modalEl.style.bottom = "auto";
-  modalEl.style.position = "absolute";
-  modalEl.style.margin = "0";
+function initDialogStyle(dialogEl) {
+  dialogEl.style.top = dialogEl.offsetTop + "px";
+  dialogEl.style.left = dialogEl.offsetLeft + "px";
+  dialogEl.style.right = "auto";
+  dialogEl.style.bottom = "auto";
+  dialogEl.style.position = "absolute";
+  dialogEl.style.margin = "0";
 }
 function canMoveOut(moveOut, direction) {
   if (direction && moveOut != null && Array.isArray(moveOut)) {
@@ -27,9 +27,9 @@ function canMoveOut(moveOut, direction) {
   }
   return false;
 }
-function getModalContainer(inner, multiple, appendTo, modalsEl) {
+function getDialogContainer(inner, multiple, appendTo, dialogsEl) {
   if (multiple) {
-    const parent = (inner ? modalsEl : void 0) || document.body;
+    const parent = (inner ? dialogsEl : void 0) || document.body;
     const wrapper = core.queryChild(parent, containerClass);
     if (wrapper) {
       return wrapper;
@@ -39,37 +39,37 @@ function getModalContainer(inner, multiple, appendTo, modalsEl) {
     parent.appendChild(elem);
     return elem;
   }
-  if (inner && modalsEl) {
-    return modalsEl;
+  if (inner && dialogsEl) {
+    return dialogsEl;
   }
   return appendTo || "body";
 }
-function useModalMove(dialogRef, props, isFullscreen) {
-  let modalEl = null;
+function useDialogMove(dialogRef, props, isFullscreen) {
+  let dialogEl = null;
   let wrapEl = null;
   let downOL = null;
   let downOT = null;
   const { handleMousedown, handleTouchstart } = hook.useMoveEvent({
     start: () => {
-      modalEl = getModalEl(dialogRef);
-      wrapEl = modalEl == null ? void 0 : modalEl.parentElement;
-      if (!modalEl || !wrapEl || !props.draggable || isFullscreen.value) {
+      dialogEl = getDialogEl(dialogRef);
+      wrapEl = dialogEl == null ? void 0 : dialogEl.parentElement;
+      if (!dialogEl || !wrapEl || !props.draggable || isFullscreen.value) {
         return;
       }
-      modalEl.style.userSelect = "none";
-      initModalStyle(modalEl);
-      downOL = modalEl.offsetLeft;
-      downOT = modalEl.offsetTop;
+      dialogEl.style.userSelect = "none";
+      initDialogStyle(dialogEl);
+      downOL = dialogEl.offsetLeft;
+      downOT = dialogEl.offsetTop;
     },
     move: ({ distanceX, distanceY, e }) => {
-      if (!modalEl || !wrapEl || downOL == null || downOT == null || distanceX == null || distanceY == null) {
+      if (!dialogEl || !wrapEl || downOL == null || downOT == null || distanceX == null || distanceY == null) {
         return;
       }
       e.preventDefault();
       let positionLeft = distanceX + downOL;
       let positionTop = distanceY + downOT;
-      const limitL = wrapEl.clientWidth - modalEl.clientWidth - fixLeft;
-      const limitT = wrapEl.clientHeight - modalEl.clientHeight - fixTop;
+      const limitL = wrapEl.clientWidth - dialogEl.clientWidth - fixLeft;
+      const limitT = wrapEl.clientHeight - dialogEl.clientHeight - fixTop;
       if (!props.moveOut) {
         if (positionLeft < 0) {
           positionLeft = 0;
@@ -104,16 +104,16 @@ function useModalMove(dialogRef, props, isFullscreen) {
           positionTop = minLimitT;
         }
       }
-      modalEl.style.left = `${Math.floor(positionLeft)}px`;
-      modalEl.style.top = `${Math.floor(positionTop)}px`;
+      dialogEl.style.left = `${Math.floor(positionLeft)}px`;
+      dialogEl.style.top = `${Math.floor(positionTop)}px`;
     },
     end: () => {
-      if (modalEl) {
-        modalEl.style.userSelect = "";
+      if (dialogEl) {
+        dialogEl.style.userSelect = "";
       }
       downOL = null;
       downOT = null;
-      modalEl = null;
+      dialogEl = null;
       wrapEl = null;
     },
     touchmoveOptions: { passive: false }
@@ -123,52 +123,52 @@ function useModalMove(dialogRef, props, isFullscreen) {
     handleHeaderTouchstart: handleTouchstart
   };
 }
-function useModalResize(dialogRef, props, isFullscreen) {
-  let modalEl = null;
+function useDialogResize(dialogRef, props, isFullscreen) {
+  let dialogEl = null;
   let wrapEl = null;
   let downW = null;
   let downH = null;
   const { handleMousedown, handleTouchstart } = hook.useMoveEvent({
     start: () => {
-      modalEl = getModalEl(dialogRef);
-      wrapEl = modalEl == null ? void 0 : modalEl.parentElement;
-      if (!modalEl || !wrapEl || !props.resizable || isFullscreen.value) {
+      dialogEl = getDialogEl(dialogRef);
+      wrapEl = dialogEl == null ? void 0 : dialogEl.parentElement;
+      if (!dialogEl || !wrapEl || !props.resizable || isFullscreen.value) {
         return;
       }
-      modalEl.style.userSelect = "none";
-      initModalStyle(modalEl);
-      downW = modalEl.clientWidth;
-      downH = modalEl.clientHeight;
+      dialogEl.style.userSelect = "none";
+      initDialogStyle(dialogEl);
+      downW = dialogEl.clientWidth;
+      downH = dialogEl.clientHeight;
     },
     move: ({ distanceX, distanceY, e }) => {
-      if (!modalEl || !wrapEl || downW == null || downH == null || distanceX == null || distanceY == null) {
+      if (!dialogEl || !wrapEl || downW == null || downH == null || distanceX == null || distanceY == null) {
         return;
       }
       e.preventDefault();
       if (props.resizable !== "vertical") {
         const w = distanceX + downW;
-        const maxW = wrapEl.clientWidth - modalEl.offsetLeft - fixLeft;
+        const maxW = wrapEl.clientWidth - dialogEl.offsetLeft - fixLeft;
         const nw = (w < props.minWidth ? props.minWidth : !canMoveOut(props.moveOut, "right") && w > maxW ? maxW : w) + "px";
-        modalEl.style.width = nw;
-        modalEl.style.maxWidth = nw;
-        modalEl.style.minWidth = nw;
+        dialogEl.style.width = nw;
+        dialogEl.style.maxWidth = nw;
+        dialogEl.style.minWidth = nw;
       }
       if (props.resizable !== "horizontal") {
         const h = distanceY + downH;
-        const maxH = wrapEl.clientHeight - modalEl.offsetTop - fixTop;
+        const maxH = wrapEl.clientHeight - dialogEl.offsetTop - fixTop;
         const nh = (h < props.minHeight ? props.minHeight : !canMoveOut(props.moveOut, "bottom") && h > maxH ? maxH : h) + "px";
-        modalEl.style.height = nh;
-        modalEl.style.maxHeight = nh;
-        modalEl.style.minHeight = nh;
+        dialogEl.style.height = nh;
+        dialogEl.style.maxHeight = nh;
+        dialogEl.style.minHeight = nh;
       }
     },
     end: () => {
-      if (modalEl) {
-        modalEl.style.userSelect = "";
+      if (dialogEl) {
+        dialogEl.style.userSelect = "";
       }
       downW = null;
       downH = null;
-      modalEl = null;
+      dialogEl = null;
       wrapEl = null;
     },
     touchmoveOptions: { passive: false }
@@ -178,38 +178,30 @@ function useModalResize(dialogRef, props, isFullscreen) {
     handleResizeTouchstart: handleTouchstart
   };
 }
-function useModalEvent(dialogRef, props, isFullscreen) {
-  const { handleHeaderMousedown, handleHeaderTouchstart } = useModalMove(
-    dialogRef,
-    props,
-    isFullscreen
-  );
-  const { handleResizeMousedown, handleResizeTouchstart } = useModalResize(
-    dialogRef,
-    props,
-    isFullscreen
-  );
+function useDialogEvent(dialogRef, props, isFullscreen) {
+  const { handleHeaderMousedown, handleHeaderTouchstart } = useDialogMove(dialogRef, props, isFullscreen);
+  const { handleResizeMousedown, handleResizeTouchstart } = useDialogResize(dialogRef, props, isFullscreen);
   let isInitPosition = true;
   const getZIndex = () => {
     return props.zIndex ?? 2e3;
   };
-  const topModal = (el) => {
+  const topDialog = (el) => {
     var _a;
-    const modalEl = el ?? getModalEl(dialogRef);
-    const overlayEl = (_a = modalEl == null ? void 0 : modalEl.parentElement) == null ? void 0 : _a.parentElement;
+    const dialogEl = el ?? getDialogEl(dialogRef);
+    const overlayEl = (_a = dialogEl == null ? void 0 : dialogEl.parentElement) == null ? void 0 : _a.parentElement;
     if (!overlayEl) {
       return;
     }
     const currentIndex = core.getCurrentStyle(overlayEl).zIndex;
     const containerEl = overlayEl.parentElement;
     const cls = `.${wrapperClass}:not(.${closedClass})`;
-    const modals = containerEl ? containerEl.querySelectorAll(cls) : void 0;
+    const dialogs = containerEl ? containerEl.querySelectorAll(cls) : void 0;
     let maxIndex = 0;
-    (modals ? Array.from(modals) : []).forEach((modalEl2) => {
-      const zIndex = core.getCurrentStyle(modalEl2).zIndex;
+    (dialogs ? Array.from(dialogs) : []).forEach((dialogEl2) => {
+      const zIndex = core.getCurrentStyle(dialogEl2).zIndex;
       if (zIndex != null) {
         const index = Number(zIndex);
-        if (index >= maxIndex && (!overlayEl || modalEl2 !== overlayEl)) {
+        if (index >= maxIndex && (!overlayEl || dialogEl2 !== overlayEl)) {
           maxIndex = index + 1;
         }
       }
@@ -220,21 +212,21 @@ function useModalEvent(dialogRef, props, isFullscreen) {
   };
   const mousedownListener = (event) => {
     if (props.multiple) {
-      topModal(event.currentTarget);
+      topDialog(event.currentTarget);
     }
   };
   const bindAutoTopEvent = () => {
-    const modalEl = getModalEl(dialogRef);
-    if (modalEl) {
-      modalEl.addEventListener("mousedown", mousedownListener);
-      modalEl.addEventListener("touchstart", mousedownListener);
+    const dialogEl = getDialogEl(dialogRef);
+    if (dialogEl) {
+      dialogEl.addEventListener("mousedown", mousedownListener);
+      dialogEl.addEventListener("touchstart", mousedownListener);
     }
   };
   const unbindAutoTopEvent = () => {
-    const modalEl = getModalEl(dialogRef);
-    if (modalEl) {
-      modalEl.removeEventListener("mousedown", mousedownListener);
-      modalEl.removeEventListener("touchstart", mousedownListener);
+    const dialogEl = getDialogEl(dialogRef);
+    if (dialogEl) {
+      dialogEl.removeEventListener("mousedown", mousedownListener);
+      dialogEl.removeEventListener("touchstart", mousedownListener);
     }
   };
   const getPositionMargin = (position) => {
@@ -255,29 +247,29 @@ function useModalEvent(dialogRef, props, isFullscreen) {
   const setInitPosition = () => {
     if (isInitPosition) {
       isInitPosition = false;
-      const modalEl = getModalEl(dialogRef);
+      const dialogEl = getDialogEl(dialogRef);
       const margin = getPositionMargin(getPosition());
-      if (modalEl && margin != null) {
-        modalEl.style.margin = margin;
+      if (dialogEl && margin != null) {
+        dialogEl.style.margin = margin;
       }
     }
   };
-  const resetModalStyle = () => {
-    const modalEl = getModalEl(dialogRef);
-    if (modalEl) {
+  const resetDialogStyle = () => {
+    const dialogEl = getDialogEl(dialogRef);
+    if (dialogEl) {
       const w = props.width;
-      modalEl.style.margin = getPositionMargin(getPosition()) || "";
-      modalEl.style.position = "";
-      modalEl.style.top = "";
-      modalEl.style.left = "";
-      modalEl.style.right = "";
-      modalEl.style.bottom = "";
-      modalEl.style.height = "";
-      modalEl.style.maxHeight = "";
-      modalEl.style.minHeight = "";
-      modalEl.style.width = typeof w === "number" ? `${w}px` : w ?? "";
-      modalEl.style.maxWidth = "";
-      modalEl.style.minWidth = "";
+      dialogEl.style.margin = getPositionMargin(getPosition()) || "";
+      dialogEl.style.position = "";
+      dialogEl.style.top = "";
+      dialogEl.style.left = "";
+      dialogEl.style.right = "";
+      dialogEl.style.bottom = "";
+      dialogEl.style.height = "";
+      dialogEl.style.maxHeight = "";
+      dialogEl.style.minHeight = "";
+      dialogEl.style.width = typeof w === "number" ? `${w}px` : w ?? "";
+      dialogEl.style.maxWidth = "";
+      dialogEl.style.minWidth = "";
     }
   };
   return {
@@ -287,15 +279,15 @@ function useModalEvent(dialogRef, props, isFullscreen) {
     handleResizeTouchstart,
     bindAutoTopEvent,
     unbindAutoTopEvent,
-    topModal,
+    topDialog,
     setInitPosition,
-    resetModalStyle
+    resetDialogStyle
   };
 }
 exports.closedClass = closedClass;
 exports.containerClass = containerClass;
-exports.getModalContainer = getModalContainer;
-exports.useModalEvent = useModalEvent;
-exports.useModalMove = useModalMove;
-exports.useModalResize = useModalResize;
+exports.getDialogContainer = getDialogContainer;
+exports.useDialogEvent = useDialogEvent;
+exports.useDialogMove = useDialogMove;
+exports.useDialogResize = useDialogResize;
 exports.wrapperClass = wrapperClass;

package/lib/ele-dialog/util.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'vue';
 import { ElDialogInstance } from '../ele-app/el';
-import { ModalProps } from './props';
+import { DialogProps } from './props';
 
 export declare const containerClass = "ele-dialog-container";
 export declare const wrapperClass = "ele-dialog";
@@ -10,16 +10,16 @@ export declare const closedClass = "ele-dialog-closed";
  * @param inner 是否限制在主体内部
  * @param multiple 是否支持同时打开多个
  * @param appendTo 自定义插入的容器
- * @param modalsEl 限制在主体内部时的容器
+ * @param dialogsEl 限制在主体内部时的容器
  */
-export declare function getModalContainer(inner?: boolean, multiple?: boolean, appendTo?: string | HTMLElement, modalsEl?: HTMLElement | null): HTMLElement | string;
+export declare function getDialogContainer(inner?: boolean, multiple?: boolean, appendTo?: string | HTMLElement, dialogsEl?: HTMLElement | null): HTMLElement | string;
 /**
  * 弹窗支持移动
  * @param dialogRef 弹窗实例
  * @param props 属性
  * @param isFullscreen 全屏状态
  */
-export declare function useModalMove(dialogRef: Ref<ElDialogInstance>, props: ModalProps, isFullscreen: Ref<boolean>): {
+export declare function useDialogMove(dialogRef: Ref<ElDialogInstance>, props: DialogProps, isFullscreen: Ref<boolean>): {
     handleHeaderMousedown: (e: MouseEvent) => void;
     handleHeaderTouchstart: (e: TouchEvent) => void;
 };
@@ -29,7 +29,7 @@ export declare function useModalMove(dialogRef: Ref<ElDialogInstance>, props: Mo
  * @param props 属性
  * @param isFullscreen 全屏状态
  */
-export declare function useModalResize(dialogRef: Ref<ElDialogInstance>, props: ModalProps, isFullscreen: Ref<boolean>): {
+export declare function useDialogResize(dialogRef: Ref<ElDialogInstance>, props: DialogProps, isFullscreen: Ref<boolean>): {
     handleResizeMousedown: (e: MouseEvent) => void;
     handleResizeTouchstart: (e: TouchEvent) => void;
 };
@@ -39,14 +39,14 @@ export declare function useModalResize(dialogRef: Ref<ElDialogInstance>, props:
  * @param props 属性
  * @param isFullscreen 全屏状态
  */
-export declare function useModalEvent(dialogRef: Ref<ElDialogInstance>, props: ModalProps, isFullscreen: Ref<boolean>): {
+export declare function useDialogEvent(dialogRef: Ref<ElDialogInstance>, props: DialogProps, isFullscreen: Ref<boolean>): {
     handleHeaderMousedown: (e: MouseEvent) => void;
     handleHeaderTouchstart: (e: TouchEvent) => void;
     handleResizeMousedown: (e: MouseEvent) => void;
     handleResizeTouchstart: (e: TouchEvent) => void;
     bindAutoTopEvent: () => void;
     unbindAutoTopEvent: () => void;
-    topModal: (el?: HTMLElement) => void;
+    topDialog: (el?: HTMLElement) => void;
     setInitPosition: () => void;
-    resetModalStyle: () => void;
+    resetDialogStyle: () => void;
 };

package/lib/style/plus.scss

@@ -22,7 +22,9 @@
 @use '../ele-loading/style/index.scss' as loading;
 @use '../ele-map-picker/style/index.scss' as mapPicker;
 @use '../ele-menus/style/index.scss' as menus;
+// temp
 @use '../ele-dialog/style/index.scss' as modal;
+@use '../ele-dialog/style/index.scss' as dialog;
 @use '../ele-page/style/index.scss' as page;
 @use '../ele-pagination/style/index.scss' as pagination;
 @use '../ele-popconfirm/style/index.scss' as popconfirm;

package/lib/style/themes/default.scss

@@ -460,6 +460,7 @@ $ele: map.deep-merge(
       'bg-7': #7dd733,
       'bg-8': #faad14
     ),
+    // temp
     'modal': (
       // 弹窗
       'bg': elVar('bg-color', 'overlay'),
@@ -484,6 +485,31 @@ $ele: map.deep-merge(
       'fullscreen-border': 1px solid elVar('border-color', 'light'),
       'mobile-space': 16px
     ),
+
+    'dialog': (
+      // 弹窗
+      'bg': elVar('bg-color', 'overlay'),
+      'radius': elVar('border-radius', 'base'),
+      'header-color': elVar('text-color', 'primary'),
+      'header-font-size': elVar('font-size', 'medium'),
+      'header-font-weight': normal,
+      'header-line-height': 24px,
+      'header-padding': 14px 20px,
+      'header-border': 1px solid elVar('border-color', 'light'),
+      'icon-size': 22px,
+      'icon-font-size': 16px,
+      'icon-color': elVar('text-color', 'secondary'),
+      'icon-hover-color': elVar('text-color', 'primary'),
+      'icon-hover-bg': transparent,
+      'icon-radius': elVar('border-radius', 'small'),
+      'icon-space': 8px,
+      'body-padding': 24px 22px,
+      'form-body-padding': 24px 22px 12px 20px,
+      'footer-padding': 10px 20px,
+      'footer-border': 1px solid elVar('border-color', 'light'),
+      'fullscreen-border': 1px solid elVar('border-color', 'light'),
+      'mobile-space': 16px
+    ),
     'page': (
       // 页面容器
       'padding': 16px,