yuang-framework-ui-pc 1.1.14 → 1.1.16

package/es/core-components.d.ts

@@ -23,7 +23,7 @@ export { default as EleIconSelect } from './ele-icon-select/index';
 export { default as EleImageViewer } from './ele-image-viewer/index';
 export { default as EleLoading } from './ele-loading/index';
 export { default as EleMenus } from './ele-menus/index';
-export { default as EleModal } from './ele-modal/index';
+export { default as EleModal } from './ele-dialog/index';
 export { default as EleDialog } from './ele-dialog/index';
 export { default as ElePage } from './ele-page/index';
 export { default as ElePagination } from './ele-pagination/index';

package/es/core-components.js

@@ -23,8 +23,7 @@ import { default as default23 } from "./ele-icon-select/index";
 import { default as default24 } from "./ele-image-viewer/index";
 import { default as default25 } from "./ele-loading/index";
 import { default as default26 } from "./ele-menus/index";
-import { default as default27 } from "./ele-modal/index";
-import { default as default28 } from "./ele-dialog/index";
+import { default as default27, default as default28 } from "./ele-dialog/index";
 import { default as default29 } from "./ele-page/index";
 import { default as default30 } from "./ele-pagination/index";
 import { default as default31 } from "./ele-popconfirm/index";
@@ -66,7 +65,7 @@ export {
   default13 as EleCopyable,
   default14 as EleDashboard,
   default15 as EleDataTable,
-  default28 as EleDialog,
+  default27 as EleDialog,
   default16 as EleDot,
   default17 as EleDrawer,
   default18 as EleDropdown,
@@ -78,7 +77,7 @@ export {
   default24 as EleImageViewer,
   default25 as EleLoading,
   default26 as EleMenus,
-  default27 as EleModal,
+  default28 as EleModal,
   default29 as ElePage,
   default30 as ElePagination,
   default31 as ElePopconfirm,

package/es/ele-app/plus.d.ts

@@ -14,7 +14,7 @@ import type { LoadingProps } from '../ele-loading/props';
 import type EleMenus from '../ele-menus/index';
 import type { MenusProps } from '../ele-menus/props';
 import type { MenuItem } from '../ele-menus/types';
-import type { ModalProps } from '../ele-modal/props';
+import type { ModalProps } from '../ele-dialog/props';
 import type { PaginationProps } from '../ele-pagination/props';
 import type ElePopover from '../ele-popover/index';
 import type { PopoverProps } from '../ele-popover/props';

package/es/ele-cropper-modal/index.js

@@ -1,6 +1,6 @@
 import { defineComponent, resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, createVNode, renderSlot, normalizeProps, guardReactiveProps } from "vue";
 import { useLocale } from "../ele-config-provider/receiver";
-import EleModal from "../ele-modal/index";
+import EleModal from "../ele-dialog/index";
 import EleCropper from "../ele-cropper/index";
 import { cropperModalProps, cropperModalEmits } from "./props";
 const _sfc_main = defineComponent({

package/es/ele-cropper-modal/style/index.js

@@ -1,2 +1,2 @@
-import "../../ele-modal/style/index";
+import "../../ele-dialog/style/index";
 import "../../ele-cropper/style/index";

package/es/ele-dialog/index.d.ts

@@ -91,7 +91,7 @@ declare const _default: import('vue').DefineComponent<{
 }, {
     dialogRef: import('vue').Ref<ElDialogInstance>;
     isFullscreen: import('vue').Ref<boolean>;
-    dialogClass: import('vue').ComputedRef<string>;
+    modalClass: import('vue').ComputedRef<string>;
     teleportTo: import('vue').ComputedRef<string | Element>;
     teleportDisabled: import('vue').ComputedRef<boolean>;
     handleHeaderMousedown: (e: MouseEvent) => void;
@@ -238,8 +238,8 @@ declare const _default: import('vue').DefineComponent<{
     minHeight: number;
     multiple: boolean;
     responsive: boolean;
+    inner: boolean;
     resetOnClose: boolean;
     maxable: boolean;
-    inner: boolean;
 }, {}>;
 export default _default;

package/es/ele-dialog/index.js

@@ -3,8 +3,8 @@ import { ElDialog, ElIcon } from "element-plus";
 import { CloseOutlined, CompressOutlined, ExpandOutlined, ResizeOutlined } from "../icons";
 import ReceiverView from "../ele-config-provider/components/receiver-view";
 import { useLayoutState, useResponsive } from "../ele-pro-layout/util";
-import { getModalContainer, useModalEvent, wrapperClass, closedClass } from "./util";
-import { modalProps, modalEmits } from "./props";
+import { getDialogContainer, useDialogEvent, wrapperClass, closedClass } from "./util";
+import { eleDialogProps, eleDialogEmits } from "./props";
 const _sfc_main = defineComponent({
   name: "EleDialog",
   components: {
@@ -17,58 +17,58 @@ const _sfc_main = defineComponent({
     ReceiverView
   },
   inheritAttrs: false,
-  props: modalProps,
-  emits: modalEmits,
+  props: eleDialogProps,
+  emits: eleDialogEmits,
   setup(props, { emit }) {
     const layoutState = useLayoutState();
     const isResponsive = useResponsive(props);
     const dialogRef = ref(null);
     const isFullscreen = ref(props.fullscreen ?? false);
     const isActivated = ref(true);
-    const dialogClass = computed(() => {
+    const modalClass = computed(() => {
       const classes = [wrapperClass];
       if (props.responsive ?? isResponsive.value ?? true) {
-        classes.push("ele-modal-responsive");
+        classes.push("ele-dialog-responsive");
       }
       if (props.alignCenter || props.position === "center") {
-        classes.push("ele-modal-center");
+        classes.push("ele-dialog-center");
       } else if (props.position === "top") {
-        classes.push("ele-modal-top");
+        classes.push("ele-dialog-top");
       } else if (props.position === "bottom") {
-        classes.push("ele-modal-bottom");
+        classes.push("ele-dialog-bottom");
       } else if (props.position === "left") {
-        classes.push("ele-modal-left");
+        classes.push("ele-dialog-left");
       } else if (props.position === "right") {
-        classes.push("ele-modal-right");
+        classes.push("ele-dialog-right");
       } else if (props.position === "leftTop") {
-        classes.push("ele-modal-left-top");
+        classes.push("ele-dialog-left-top");
       } else if (props.position === "leftBottom") {
-        classes.push("ele-modal-left-bottom");
+        classes.push("ele-dialog-left-bottom");
       } else if (props.position === "rightTop") {
-        classes.push("ele-modal-right-top");
+        classes.push("ele-dialog-right-top");
       } else if (props.position === "rightBottom") {
-        classes.push("ele-modal-right-bottom");
+        classes.push("ele-dialog-right-bottom");
       }
       if (props.draggable) {
-        classes.push("ele-modal-movable");
+        classes.push("ele-dialog-movable");
       }
       if (props.resizable) {
-        classes.push("ele-modal-resizable");
+        classes.push("ele-dialog-resizable");
       }
       if (props.multiple) {
-        classes.push("ele-modal-multiple");
+        classes.push("ele-dialog-multiple");
       }
       if (isFullscreen.value) {
-        classes.push("ele-modal-fullscreen");
+        classes.push("ele-dialog-fullscreen");
       }
       if (!props.modelValue) {
         classes.push(closedClass);
       }
       if (!isActivated.value && props.modelValue) {
-        classes.push("ele-modal-hide");
+        classes.push("ele-dialog-hide");
       }
       if (props.inner) {
-        classes.push("ele-modal-inner");
+        classes.push("ele-dialog-inner");
       }
       if (props.modalClass) {
         classes.push(props.modalClass);
@@ -76,11 +76,11 @@ const _sfc_main = defineComponent({
       return classes.join(" ");
     });
     const teleportTo = computed(() => {
-      return getModalContainer(
+      return getDialogContainer(
         props.inner,
         props.multiple,
         props.appendTo,
-        layoutState.modalsEl
+        layoutState.dialogsEl
       );
     });
     const teleportDisabled = computed(() => {
@@ -95,17 +95,17 @@ const _sfc_main = defineComponent({
       handleResizeTouchstart,
       bindAutoTopEvent,
       unbindAutoTopEvent,
-      topModal,
+      topDialog,
       setInitPosition,
-      resetModalStyle
-    } = useModalEvent(dialogRef, props, isFullscreen);
+      resetDialogStyle
+    } = useDialogEvent(dialogRef, props, isFullscreen);
     const updateModelValue = (modelValue) => {
       emit("update:modelValue", modelValue);
     };
     const toggleFullscreen = (fullscreen) => {
       isFullscreen.value = fullscreen ?? !isFullscreen.value;
       nextTick(() => {
-        topModal();
+        topDialog();
       });
       emit("update:fullscreen", isFullscreen.value);
     };
@@ -115,11 +115,11 @@ const _sfc_main = defineComponent({
       }
       nextTick(() => {
         if (props.resetOnClose) {
-          resetModalStyle();
+          resetDialogStyle();
         } else {
           setInitPosition();
         }
-        topModal();
+        topDialog();
       });
       emit("open");
     };
@@ -160,7 +160,7 @@ const _sfc_main = defineComponent({
     return {
       dialogRef,
       isFullscreen,
-      dialogClass,
+      modalClass,
       teleportTo,
       teleportDisabled,
       handleHeaderMousedown,
@@ -204,7 +204,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       width: _ctx.width,
       fullscreen: false,
       modal: _ctx.multiple ? false : _ctx.modal,
-      modalClass: _ctx.dialogClass,
+      modalClass: _ctx.modalClass,
       appendToBody: false,
       lockScroll: _ctx.inner || _ctx.multiple ? false : _ctx.lockScroll,
       openDelay: _ctx.openDelay,
@@ -231,12 +231,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       header: withCtx(({ close, titleId, titleClass }) => [
         createElementVNode("div", {
           style: normalizeStyle(_ctx.headerStyle),
-          class: "ele-modal-header",
+          class: "ele-dialog-header",
           onMousedown: _cache[6] || (_cache[6] = (...args) => _ctx.handleHeaderMousedown && _ctx.handleHeaderMousedown(...args)),
           onTouchstart: _cache[7] || (_cache[7] = (...args) => _ctx.handleHeaderTouchstart && _ctx.handleHeaderTouchstart(...args))
         }, [
           createElementVNode("div", {
-            class: "ele-modal-title",
+            class: "ele-dialog-title",
             style: normalizeStyle(_ctx.titleStyle)
           }, [
             renderSlot(_ctx.$slots, "header", {
@@ -249,7 +249,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ], 4),
           _ctx.maxable ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: "ele-modal-tool ele-modal-tool-max",
+            class: "ele-dialog-tool ele-dialog-tool-max",
             style: normalizeStyle(_ctx.fullscreenBtnStyle),
             onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleFullscreen()),
             onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
@@ -268,7 +268,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ], 36)) : createCommentVNode("", true),
           _ctx.showClose ? (openBlock(), createElementBlock("div", {
             key: 1,
-            class: "ele-modal-tool",
+            class: "ele-dialog-tool",
             style: normalizeStyle(_ctx.closeBtnStyle),
             onClick: _cache[3] || (_cache[3] = ($event) => _ctx.updateModelValue(false)),
             onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {
@@ -289,7 +289,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _ctx.resizable ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass([
-            "ele-modal-resize-icon",
+            "ele-dialog-resize-icon",
             { "is-horizontal": _ctx.resizable === "horizontal" },
             { "is-vertical": _ctx.resizable === "vertical" }
           ]),
@@ -310,7 +310,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       default: withCtx(() => [
         createVNode(_component_ReceiverView, {
           wrapPosition: false,
-          class: normalizeClass(["ele-modal-body", { "is-form": _ctx.form }]),
+          class: normalizeClass(["ele-dialog-body", { "is-form": _ctx.form }]),
           style: normalizeStyle(_ctx.bodyStyle)
         }, {
           default: withCtx(() => [
@@ -325,7 +325,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         name: "footer",
         fn: withCtx(() => [
           createElementVNode("div", {
-            class: "ele-modal-footer",
+            class: "ele-dialog-footer",
             style: normalizeStyle(_ctx.footerStyle)
           }, [
             renderSlot(_ctx.$slots, "footer")

package/es/ele-dialog/props.d.ts

@@ -6,7 +6,7 @@ import { Resizable, MoveOut, Position } from './types';
 /**
  * 属性
  */
-export declare const modalProps: {
+export declare const eleDialogProps: {
     appendToBody: {
         type: BooleanConstructor;
         default: boolean;
@@ -113,11 +113,11 @@ export declare const modalProps: {
     title: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     ariaLevel: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
 };
-export type ModalProps = ExtractPropTypes<typeof modalProps>;
+export type DialogProps = ExtractPropTypes<typeof dialogProps>;
 /**
  * 事件
  */
-export declare const modalEmits: {
+export declare const eleDialogEmits: {
     /** 更新全屏状态 */
     'update:fullscreen': (_fullscreen: boolean) => boolean;
     open: () => boolean;

package/es/ele-dialog/props.js

@@ -1,5 +1,5 @@
 import { dialogProps, dialogEmits } from "element-plus";
-const modalProps = {
+const eleDialogProps = {
   ...dialogProps,
   appendToBody: {
     type: Boolean,
@@ -7,7 +7,7 @@ const modalProps = {
   },
   draggable: {
     type: Boolean,
-    default: true
+    default: false
   },
   /** 是否可以拖出边界 */
   moveOut: [Boolean, Array],
@@ -58,7 +58,7 @@ const modalProps = {
   /** 是否是表单弹窗 */
   form: Boolean
 };
-const modalEmits = {
+const eleDialogEmits = {
   ...dialogEmits,
   /** 更新全屏状态 */
   "update:fullscreen": (_fullscreen) => true
@@ -66,6 +66,6 @@ const modalEmits = {
 const dialogPropKeys = Object.keys(dialogProps);
 export {
   dialogPropKeys,
-  modalEmits,
-  modalProps
+  eleDialogEmits,
+  eleDialogProps
 };

package/es/ele-dialog/style/css-var.scss

@@ -1,8 +1,8 @@
 @use '../../style/util.scss' as *;
 
 /* 弹窗主题变量 */
-@mixin set-modal-var($var) {
-  .ele-modal {
-    @include set-ele-var('modal', $var);
+@mixin set-dialog-var($var) {
+  .ele-dialog {
+    @include set-ele-var('dialog', $var);
   }
 }

package/es/ele-dialog/style/index.scss

@@ -2,9 +2,9 @@
 @use '../../style/util.scss' as *;
 @use './css-var.scss' as *;
 
-@include set-modal-var($ele);
+@include set-dialog-var($ele);
 
-.ele-modal {
+.ele-dialog {
   &.el-overlay {
     height: auto;
   }
@@ -20,9 +20,9 @@
       padding: 0;
       flex-shrink: 0;
       position: relative;
-      background: eleVar('modal', 'bg');
-      border-radius: eleVar('modal', 'radius');
-      margin-bottom: eleVar('modal', 'mobile-space');
+      background: eleVar('dialog', 'bg');
+      border-radius: eleVar('dialog', 'radius');
+      margin-bottom: eleVar('dialog', 'mobile-space');
 
       // 让 model 外层不出现滚动条
       position: absolute!important;
@@ -55,118 +55,118 @@
 }
 
 /* header */
-.ele-modal-header {
+.ele-dialog-header {
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  padding: eleVar('modal', 'header-padding');
-  border-bottom: eleVar('modal', 'header-border');
+  padding: eleVar('dialog', 'header-padding');
+  border-bottom: eleVar('dialog', 'header-border');
 }
 
-.ele-modal-title {
+.ele-dialog-title {
   flex: 1;
-  color: eleVar('modal', 'header-color');
-  font-size: eleVar('modal', 'header-font-size');
-  line-height: eleVar('modal', 'header-line-height');
-  font-weight: eleVar('modal', 'header-font-weight');
+  color: eleVar('dialog', 'header-color');
+  font-size: eleVar('dialog', 'header-font-size');
+  line-height: eleVar('dialog', 'header-line-height');
+  font-weight: eleVar('dialog', 'header-font-weight');
   box-sizing: border-box;
 }
 
 /* 图标按钮 */
-.ele-modal-tool {
+.ele-dialog-tool {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: eleVar('modal', 'icon-size');
-  height: eleVar('modal', 'icon-size');
-  line-height: eleVar('modal', 'icon-size');
-  color: eleVar('modal', 'icon-color');
-  font-size: eleVar('modal', 'icon-font-size');
-  border-radius: eleVar('modal', 'icon-radius');
+  width: eleVar('dialog', 'icon-size');
+  height: eleVar('dialog', 'icon-size');
+  line-height: eleVar('dialog', 'icon-size');
+  color: eleVar('dialog', 'icon-color');
+  font-size: eleVar('dialog', 'icon-font-size');
+  border-radius: eleVar('dialog', 'icon-radius');
   transition: (color $transition-base, background-color $transition-base);
   box-sizing: border-box;
   cursor: pointer;
 
   &:hover {
-    color: eleVar('modal', 'icon-hover-color');
-    background: eleVar('modal', 'icon-hover-bg');
+    color: eleVar('dialog', 'icon-hover-color');
+    background: eleVar('dialog', 'icon-hover-bg');
   }
 
-  & + .ele-modal-tool {
-    margin-left: eleVar('modal', 'icon-space');
+  & + .ele-dialog-tool {
+    margin-left: eleVar('dialog', 'icon-space');
   }
 }
 
 /* body */
-.ele-modal-body {
-  padding: eleVar('modal', 'body-padding');
+.ele-dialog-body {
+  padding: eleVar('dialog', 'body-padding');
   box-sizing: border-box;
 
   &.is-form {
-    padding: eleVar('modal', 'form-body-padding');
+    padding: eleVar('dialog', 'form-body-padding');
   }
 }
 
 /* footer */
-.ele-modal-footer {
-  padding: eleVar('modal', 'footer-padding');
-  border-top: eleVar('modal', 'footer-border');
+.ele-dialog-footer {
+  padding: eleVar('dialog', 'footer-padding');
+  border-top: eleVar('dialog', 'footer-border');
   box-sizing: border-box;
 }
 
 /* 默认位置 */
-.ele-modal-top > .el-overlay-dialog > .el-dialog {
+.ele-dialog-top > .el-overlay-dialog > .el-dialog {
   margin: 0;
 }
 
-.ele-modal-center > .el-overlay-dialog > .el-dialog {
+.ele-dialog-center > .el-overlay-dialog > .el-dialog {
   margin: auto;
 }
 
-.ele-modal-bottom > .el-overlay-dialog > .el-dialog {
+.ele-dialog-bottom > .el-overlay-dialog > .el-dialog {
   margin: auto auto 0 auto;
 }
 
-.ele-modal-left > .el-overlay-dialog > .el-dialog {
+.ele-dialog-left > .el-overlay-dialog > .el-dialog {
   margin: auto auto auto 0;
 }
 
-.ele-modal-right > .el-overlay-dialog > .el-dialog {
+.ele-dialog-right > .el-overlay-dialog > .el-dialog {
   margin: auto 0 auto auto;
 }
 
-.ele-modal-left-top > .el-overlay-dialog > .el-dialog {
+.ele-dialog-left-top > .el-overlay-dialog > .el-dialog {
   margin: 0 auto 0 0;
 }
 
-.ele-modal-left-bottom > .el-overlay-dialog > .el-dialog {
+.ele-dialog-left-bottom > .el-overlay-dialog > .el-dialog {
   margin: auto auto 0 0;
 }
 
-.ele-modal-right-top > .el-overlay-dialog > .el-dialog {
+.ele-dialog-right-top > .el-overlay-dialog > .el-dialog {
   margin: 0 0 0 auto;
 }
 
-.ele-modal-right-bottom > .el-overlay-dialog > .el-dialog {
+.ele-dialog-right-bottom > .el-overlay-dialog > .el-dialog {
   margin: auto 0 0 auto;
 }
 
 /* 支持拖拽 */
-.ele-modal-movable > .el-overlay-dialog > .el-dialog > .el-dialog__header {
+.ele-dialog-movable > .el-overlay-dialog > .el-dialog > .el-dialog__header {
   cursor: move;
   user-select: none;
 }
 
 /* 支持拉伸 */
-.ele-modal-resize-icon {
+.ele-dialog-resize-icon {
   position: absolute;
   right: 2px;
   bottom: 2px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: eleVar('modal', 'icon-color');
+  color: eleVar('dialog', 'icon-color');
   font-size: 12px;
   cursor: se-resize;
 
@@ -179,8 +179,8 @@
   }
 }
 
-.ele-modal-resizable > .el-overlay-dialog > .el-dialog,
-.ele-modal-fullscreen > .el-overlay-dialog > .el-dialog {
+.ele-dialog-resizable > .el-overlay-dialog > .el-dialog,
+.ele-dialog-fullscreen > .el-overlay-dialog > .el-dialog {
   display: flex;
   flex-direction: column;
 
@@ -191,7 +191,7 @@
 }
 
 /* 全屏 */
-.ele-modal-fullscreen > .el-overlay-dialog > .el-dialog {
+.ele-dialog-fullscreen > .el-overlay-dialog > .el-dialog {
   top: 0 !important;
   left: 0 !important;
   margin: 0 !important;
@@ -207,14 +207,14 @@
   & > .el-dialog__header {
     cursor: default;
 
-    & > .ele-modal-resize-icon {
+    & > .ele-dialog-resize-icon {
       display: none;
     }
   }
 }
 
 /* 同时打开多个 */
-.ele-modal-container {
+.ele-dialog-container {
   position: absolute;
   top: 0;
   left: 0;
@@ -228,7 +228,7 @@
   overflow: hidden;
 }
 
-.ele-modal-multiple {
+.ele-dialog-multiple {
   pointer-events: none !important;
   position: absolute !important;
 
@@ -243,17 +243,17 @@
 }
 
 /* 失活状态 */
-.ele-modal-hide {
+.ele-dialog-hide {
   display: none !important;
 }
 
 /* 最大宽度适应屏幕 */
-.ele-modal-responsive > .el-overlay-dialog > .el-dialog {
-  max-width: calc(100% - #{eleVar('modal', 'mobile-space')} * 2);
+.ele-dialog-responsive > .el-overlay-dialog > .el-dialog {
+  max-width: calc(100% - #{eleVar('dialog', 'mobile-space')} * 2);
 }
 
 /* 限制在主体区域 */
-.ele-admin-modals > .ele-modal {
+.ele-admin-dialogs > .ele-dialog {
   pointer-events: auto;
   position: absolute !important;
 }