ele-admin-plus 1.0.2 → 1.1.0

package/lib/ele-modal/style/css-var.scss

@@ -1,4 +1,4 @@
-@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 @mixin set-modal-var($var) {
   .ele-modal {

package/lib/ele-modal/style/index.scss

@@ -1,4 +1,5 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 @use './css-var.scss' as *;
 
 @include set-modal-var($ele);
@@ -10,83 +11,103 @@
 
   & > .el-overlay-dialog {
     position: absolute;
-  }
 
-  div.el-dialog {
-    #{elVarName('dialog', 'title-font-size')}: elVar('font-size', 'medium');
-  }
+    & > .el-dialog {
+      background: eleVar('modal', 'bg');
+      border-radius: eleVar('modal', 'radius');
 
-  .el-dialog {
-    & > .el-dialog__footer {
-      border-top: eleVar('modal', 'footer-border');
-      padding: 0;
-    }
+      & > .el-dialog__footer {
+        border: none;
+        padding: 0;
+      }
 
-    .ele-modal-footer {
-      padding: eleVar('modal', 'footer-padding');
-      box-sizing: border-box;
-    }
+      & > .el-dialog__body {
+        padding: 0;
+        color: inherit;
+        font-size: inherit;
+      }
 
-    & > .el-dialog__body {
-      padding: 0;
+      & > .el-dialog__header {
+        margin: 0;
+        padding: 0;
+        border: none;
+      }
     }
+  }
 
-    .ele-modal-body {
-      padding: eleVar('modal', 'body-padding');
-      box-sizing: border-box;
-    }
+  // header
+  .ele-modal-header {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: eleVar('modal', 'header-padding');
+    border-bottom: eleVar('modal', 'header-border');
+  }
 
-    & > .el-dialog__header {
-      margin: 0;
-      padding: 0;
-      border-bottom: eleVar('modal', 'header-border');
+  .ele-modal-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');
+    box-sizing: border-box;
+  }
+
+  // 图标按钮
+  .ele-modal-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');
+    transition: color $ele-transition, background-color $ele-transition;
+    box-sizing: border-box;
+    cursor: pointer;
+
+    &:hover {
+      color: eleVar('modal', 'icon-hover-color');
+      background: eleVar('modal', 'icon-hover-bg');
     }
 
-    .ele-modal-header {
-      display: flex;
-      align-items: center;
-      padding: eleVar('modal', 'header-padding');
-      box-sizing: border-box;
+    & + .ele-modal-tool {
+      margin-left: eleVar('modal', 'icon-space');
+    }
+  }
 
-      .el-dialog__title {
-        flex: 1;
-      }
+  // body
+  .ele-modal-body {
+    padding: eleVar('modal', 'body-padding');
+    box-sizing: border-box;
+  }
 
-      // 图标按钮
-      .ele-modal-tool {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: eleVar('modal', 'icon-color');
-        font-size: eleVar('modal', 'icon-font-size');
-        transition: color 0.2s, background-color 0.2s;
-        cursor: pointer;
-
-        &:hover {
-          color: eleVar('modal', 'icon-hover-color');
-        }
-
-        & + .ele-modal-tool {
-          margin-left: eleVar('modal', 'icon-space');
-        }
-      }
-    }
+  // footer
+  .ele-modal-footer {
+    padding: eleVar('modal', 'footer-padding');
+    border-top: eleVar('modal', 'footer-border');
+    box-sizing: border-box;
   }
 
   // 表单弹窗
-  &.ele-modal-form .el-dialog > .el-dialog__body > .ele-modal-body {
-    padding: eleVar('modal', 'form-body-padding');
+  &.ele-modal-form > .el-overlay-dialog > .el-dialog > .el-dialog__body {
+    & > .ele-modal-body {
+      padding: eleVar('modal', 'form-body-padding');
+    }
   }
 }
 
 /* 支持拖拽 */
-.ele-modal-movable .el-dialog > .el-dialog__header {
+.ele-modal-movable > .el-overlay-dialog > .el-dialog > .el-dialog__header {
   cursor: move;
   user-select: none;
 }
 
 /* 支持拉伸 */
-.ele-modal-resizable .el-dialog::after {
+.ele-modal-resizable > .el-overlay-dialog > .el-dialog::after {
   content: '';
   position: absolute;
   right: 0;
@@ -100,16 +121,16 @@
   background-repeat: no-repeat;
 }
 
-.ele-modal-resizable-horizontal .el-dialog::after {
+.ele-modal-resizable-horizontal > .el-overlay-dialog > .el-dialog::after {
   cursor: e-resize;
 }
 
-.ele-modal-resizable-vertical .el-dialog::after {
+.ele-modal-resizable-vertical > .el-overlay-dialog > .el-dialog::after {
   cursor: s-resize;
 }
 
-.ele-modal-resizable .el-dialog,
-.ele-modal-fullscreen .el-dialog {
+.ele-modal-resizable > .el-overlay-dialog > .el-dialog,
+.ele-modal-fullscreen > .el-overlay-dialog > .el-dialog {
   display: flex;
   flex-direction: column;
 
@@ -124,7 +145,7 @@
 }
 
 /* 全屏 */
-.ele-modal-fullscreen .el-dialog {
+.ele-modal-fullscreen > .el-overlay-dialog > .el-dialog {
   top: 0 !important;
   left: 0 !important;
   margin: 0 !important;
@@ -167,7 +188,7 @@
     position: absolute;
     overflow: hidden;
 
-    .el-dialog {
+    & > .el-dialog {
       pointer-events: auto;
     }
   }
@@ -179,8 +200,8 @@
 }
 
 /* 移动端 */
-.ele-modal-responsive .el-dialog {
-  max-width: calc(100vw - eleVar('modal', 'mobile-space') * 2);
+.ele-modal-responsive > .el-overlay-dialog > .el-dialog {
+  max-width: calc(100vw - #{eleVar('modal', 'mobile-space')} * 2);
 }
 
 /* 限制在内部并适配布局状态 */
@@ -198,30 +219,28 @@
   }
 
   &.ele-state-mix-sidebar {
-    left: calc(
-      #{eleVar('sidebox', 'width')} + #{eleVar('sidebar', 'mix-width')}
-    );
+    $box-width: eleVar('sidebox', 'width');
+    left: calc(#{$box-width} + #{eleVar('sidebar', 'mix-width')});
 
     &.ele-state-collapse {
-      left: eleVar('sidebox', 'width');
+      left: $box-width;
     }
 
     &.ele-state-single-sidebar {
-      left: eleVar('sidebox', 'width');
+      left: $box-width;
     }
   }
 
   &.ele-state-compact {
-    left: calc(
-      #{eleVar('sidebar', 'collapse-width')} + #{eleVar('sidebar', 'mix-width')}
-    );
+    $collapse-width: eleVar('sidebar', 'collapse-width');
+    left: calc(#{$collapse-width} + #{eleVar('sidebar', 'mix-width')});
 
     &.ele-state-single-sidebar {
-      left: eleVar('sidebar', 'collapse-width');
+      left: $collapse-width;
     }
 
     &.ele-state-collapse {
-      left: eleVar('sidebar', 'collapse-width');
+      left: $collapse-width;
     }
   }
 

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

@@ -23,11 +23,6 @@ export declare const mobileClass = "ele-state-mobile";
  * 创建并获取弹窗容器
  */
 export declare function getModalContainer(): Element;
-/**
- * 获取节点样式
- * @param el 节点
- */
-export declare function getCurrentStyle(el: Element): CSSStyleDeclaration;
 /**
  * 弹窗移动事件处理
  * @param event 事件

package/lib/ele-modal/util.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const titleClass = "el-dialog__title";
+const core = require("../utils/core");
+const titleClass = "ele-modal-title";
 const headerClass = "ele-modal-header";
 const wrapperClass = "ele-modal";
 const containerId = "ele-modal-container";
@@ -51,7 +52,7 @@ function getModalMaxIndex(el) {
   const modals = getVisibleModals();
   let maxIndex = 0;
   modals.forEach((modalEl) => {
-    const zIndex = getCurrentStyle(modalEl).zIndex;
+    const zIndex = core.getCurrentStyle(modalEl).zIndex;
     if (zIndex != null) {
       const index = Number(zIndex);
       if (index >= maxIndex && (!el || modalEl !== el)) {
@@ -61,9 +62,6 @@ function getModalMaxIndex(el) {
   });
   return maxIndex;
 }
-function getCurrentStyle(el) {
-  return el["currentStyle"] || window.getComputedStyle(el, null) || {};
-}
 function canMoveOut(moveOut, direction) {
   if (direction && moveOut != null && typeof moveOut === "object" && typeof moveOut.includes === "function") {
     return moveOut.includes(direction);
@@ -174,7 +172,7 @@ function handleResizable(event, props) {
   }
   const limitX = modalEl.clientWidth + modalEl.offsetLeft - wrapEl.scrollLeft + overlayEl.offsetLeft;
   const limitY = modalEl.clientHeight + modalEl.offsetTop - wrapEl.scrollTop + overlayEl.offsetTop;
-  if (event.clientX > limitX || limitX - event.clientX > 10 || event.clientY > limitY || limitY - event.clientY > 10) {
+  if (event.clientX > limitX || limitX - event.clientX > 12 || event.clientY > limitY || limitY - event.clientY > 12) {
     return;
   }
   modalEl.style.userSelect = "none";
@@ -218,7 +216,7 @@ function setModalTop(modalEl, zIndex) {
   if (!overlayEl || !overlayEl.classList || !overlayEl.classList.contains(multipleClass)) {
     return;
   }
-  const currentIndex = getCurrentStyle(overlayEl).zIndex;
+  const currentIndex = core.getCurrentStyle(overlayEl).zIndex;
   const maxIndex = getModalMaxIndex(overlayEl);
   if (maxIndex > Number(currentIndex || zIndex || 0)) {
     overlayEl.style.zIndex = String(maxIndex);
@@ -255,8 +253,10 @@ function setModalPosition(modalEl, resizable, position, moveOut) {
   initModalStyle(modalEl, resizable);
   const canOutB = canMoveOut(moveOut, "bottom");
   const canOutR = canMoveOut(moveOut, "right");
-  const maxTop = wrapEl.clientHeight - modalEl.clientHeight - (canOutB ? 0 : 2);
-  const maxLeft = wrapEl.clientWidth - modalEl.clientWidth - (canOutR ? 0 : 1);
+  const t = wrapEl.clientHeight - modalEl.clientHeight - (canOutB ? 0 : 2);
+  const maxTop = t < 0 ? 0 : t;
+  const l = wrapEl.clientWidth - modalEl.clientWidth - (canOutR ? 0 : 1);
+  const maxLeft = l < 0 ? 0 : l;
   if (position === "top") {
     modalEl.style.top = "0px";
     modalEl.style.left = `${maxLeft / 2}px`;
@@ -286,12 +286,20 @@ function setModalPosition(modalEl, resizable, position, moveOut) {
     modalEl.style.left = `${maxLeft / 2}px`;
   } else if (typeof position === "object") {
     if (position.top != null) {
-      modalEl.style.top = typeof position.top === "number" ? `${position.top}px` : position.top;
+      if (typeof position.top === "number") {
+        modalEl.style.top = `${position.top}px`;
+      } else {
+        modalEl.style.top = position.top;
+      }
     } else if (position.left != null) {
       modalEl.style.top = `${maxTop / 2}px`;
     }
     if (position.left != null) {
-      modalEl.style.left = typeof position.left === "number" ? `${position.left}px` : position.left;
+      if (typeof position.left === "number") {
+        modalEl.style.left = `${position.left}px`;
+      } else {
+        modalEl.style.left = position.left;
+      }
     } else if (position.top != null) {
       modalEl.style.left = `${maxLeft / 2}px`;
     }
@@ -310,7 +318,6 @@ exports.compactClass = compactClass;
 exports.containerId = containerId;
 exports.expandedClass = expandedClass;
 exports.fullscreenClass = fullscreenClass;
-exports.getCurrentStyle = getCurrentStyle;
 exports.getModalContainer = getModalContainer;
 exports.handleMovable = handleMovable;
 exports.handleResizable = handleResizable;

package/lib/ele-page/index.d.ts

@@ -1,4 +1,4 @@
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     plain: BooleanConstructor;
     multiCard: {
         type: BooleanConstructor;
@@ -20,4 +20,4 @@ declare const _sfc_main: import("vue").DefineComponent<{
     flexTable: boolean;
     hideFooter: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/lib/ele-page/style/css-var.scss

@@ -1,4 +1,4 @@
-@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 @mixin set-page-var($var) {
   .ele-page,

package/lib/ele-page/style/index.scss

@@ -1,4 +1,5 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 @use './css-var.scss' as *;
 
 @include set-page-var($ele);
@@ -58,6 +59,9 @@
 }
 
 /* 按钮风格页签 */
-.ele-admin-tab-card .ele-admin-content > .ele-page:first-child {
-  padding-top: 0;
+.ele-admin-tab-card.ele-admin-open-tab .ele-admin-content {
+  & > .ele-page:first-child,
+  & > .ele-admin-iframe-wrap + .ele-page {
+    padding-top: 0;
+  }
 }

package/lib/ele-pagination/index.d.ts

@@ -1,4 +1,4 @@
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     type: {
         type: import("vue").PropType<import("./types").PaginationType>;
         default: string;
@@ -55,17 +55,17 @@ declare const _sfc_main: import("vue").DefineComponent<{
     "onUpdate:pageSize"?: ((_pageSize: number) => any) | undefined;
 }, {
     type: import("./types").PaginationType;
+    popperClass: string;
+    disabled: boolean;
+    small: boolean;
     pagerCount: number;
     layout: string;
     pageSizes: number[];
-    popperClass: string;
     prevText: string;
     prevIcon: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) | ((new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>))[], unknown, unknown>;
     nextText: string;
     nextIcon: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) | ((new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>))[], unknown, unknown>;
-    small: boolean;
     background: boolean;
-    disabled: boolean;
     hideOnSinglePage: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/lib/ele-pagination/index.js

@@ -1,6 +1,7 @@
 "use strict";
 const vue = require("vue");
 const elementPlus = require("element-plus");
+const receiver = require("../ele-config-provider/receiver");
 const props = require("./props");
 const _sfc_main = vue.defineComponent({
   name: "ElePagination",
@@ -8,11 +9,16 @@ const _sfc_main = vue.defineComponent({
   props: props.paginationProps,
   emits: props.paginationEmits,
   setup(_props, { emit }) {
+    const { authenticated } = receiver.useLicense();
     const onUpdateCurrentPage = (currentPage) => {
-      emit("update:currentPage", currentPage);
+      if (authenticated.value) {
+        emit("update:currentPage", currentPage);
+      }
     };
     const onUpdatePageSize = (pageSize) => {
-      emit("update:pageSize", pageSize);
+      if (authenticated.value) {
+        emit("update:pageSize", pageSize);
+      }
     };
     return { onUpdateCurrentPage, onUpdatePageSize };
   }
@@ -28,7 +34,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ElPagination = vue.resolveComponent("ElPagination");
   return vue.openBlock(), vue.createBlock(_component_ElPagination, {
     small: _ctx.small,
-    background: _ctx.type === "circle" ? true : _ctx.background,
+    background: _ctx.type === "circle" ? false : _ctx.background,
     pageSize: _ctx.pageSize,
     defaultPageSize: _ctx.defaultPageSize,
     total: _ctx.total,

package/lib/ele-pagination/style/css-var.scss

@@ -0,0 +1,7 @@
+@use '../../style/util.scss' as *;
+
+@mixin set-pagination-var($var) {
+  .ele-pagination {
+    @include set-ele-var('pagination', $var);
+  }
+}