ele-admin-plus 1.0.2 → 1.1.0

package/es/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/es/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/es/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/es/ele-modal/util.js

@@ -1,4 +1,5 @@
-const titleClass = "el-dialog__title";
+import { getCurrentStyle } from "../utils/core";
+const titleClass = "ele-modal-title";
 const headerClass = "ele-modal-header";
 const wrapperClass = "ele-modal";
 const containerId = "ele-modal-container";
@@ -59,9 +60,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);
@@ -172,7 +170,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";
@@ -253,8 +251,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`;
@@ -284,12 +284,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`;
     }
@@ -309,7 +317,6 @@ export {
   containerId,
   expandedClass,
   fullscreenClass,
-  getCurrentStyle,
   getModalContainer,
   handleMovable,
   handleResizable,

package/es/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/es/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/es/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/es/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/es/ele-pagination/index.js

@@ -1,5 +1,6 @@
 import { defineComponent, resolveComponent, openBlock, createBlock, normalizeClass, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
 import { ElPagination } from "element-plus";
+import { useLicense } from "../ele-config-provider/receiver";
 import { paginationProps, paginationEmits } from "./props";
 const _sfc_main = defineComponent({
   name: "ElePagination",
@@ -7,11 +8,16 @@ const _sfc_main = defineComponent({
   props: paginationProps,
   emits: paginationEmits,
   setup(_props, { emit }) {
+    const { authenticated } = 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 };
   }
@@ -27,7 +33,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ElPagination = resolveComponent("ElPagination");
   return openBlock(), 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/es/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);
+  }
+}

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

@@ -1,50 +1,187 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-pagination-var($ele);
 
 .ele-pagination {
   flex-wrap: wrap;
   justify-content: center;
 
-  & > * {
-    margin-top: 10px !important;
-  }
-
-  // 圆形样式
   &.is-circle {
+    // 间距
+    & > * {
+      margin: eleVar('pagination', 'gap') !important;
+      margin-left: 0 !important;
+      margin-bottom: 0 !important;
+    }
+
+    & > .is-last {
+      margin-right: 0 !important;
+    }
+
+    // 操作按钮
     .btn-prev,
-    .btn-next {
-      border-radius: elVar('pagination', 'button-height');
+    .btn-next,
+    .el-pager li {
+      height: eleVar('pagination', 'height');
+      line-height: eleVar('pagination', 'height');
+      min-width: eleVar('pagination', 'height');
+      padding: eleVar('pagination', 'padding');
+      border-radius: eleVar('pagination', 'radius');
+      color: eleVar('pagination', 'color');
+      font-size: eleVar('pagination', 'font-size');
+      background: eleVar('pagination', 'bg');
+      border: eleVar('pagination', 'border');
+      transition: color $ele-transition, background-color $ele-transition;
 
-      &:disabled,
-      &:not(:hover) {
-        background: none !important;
+      &:hover {
+        color: eleVar('pagination', 'hover-color');
+        background: eleVar('pagination', 'hover-bg');
+        border: eleVar('pagination', 'hover-border');
       }
     }
 
-    .el-pager li {
-      margin-left: 0;
-      margin-right: 0;
-      font-weight: normal;
-      border-radius: elVar('pagination', 'button-height');
+    .btn-prev:disabled,
+    .btn-next:disabled,
+    .el-pager li.is-disabled {
+      color: eleVar('pagination', 'disabled-color');
+      background: eleVar('pagination', 'disabled-bg');
+      border: eleVar('pagination', 'disabled-border');
+    }
+
+    .el-pager {
+      margin-left: eleVar('pagination', 'space') !important;
+      margin-right: eleVar('pagination', 'space') !important;
+
+      li {
+        margin: 0;
+
+        & + li {
+          margin-left: eleVar('pagination', 'space');
+        }
+
+        &.is-active {
+          color: eleVar('pagination', 'active-color');
+          background: eleVar('pagination', 'active-bg');
+          border: eleVar('pagination', 'active-border');
+          font-weight: eleVar('pagination', 'active-font-weight');
+
+          &.is-disabled {
+            color: eleVar('pagination', 'disabled-active-color');
+            background: eleVar('pagination', 'disabled-active-bg');
+            border: eleVar('pagination', 'disabled-active-border');
+          }
+        }
+      }
+    }
+
+    .btn-prev {
+      margin-right: 0 !important;
+    }
+
+    // 图标
+    .btn-prev .el-icon,
+    .btn-next .el-icon {
+      font-size: initial;
+      transform: scale(1.02);
+    }
+
+    // 输入框
+    .el-pagination__editor.el-input {
+      width: 50px;
+    }
+
+    .el-pagination__sizes .el-input {
+      width: 96px;
 
-      &.is-disabled,
-      &:not(.is-active):not(:hover) {
-        background: none !important;
+      .el-input__wrapper {
+        padding-left: 1px;
+        padding-right: 7px;
       }
 
-      & + li {
-        margin-left: 4px;
+      .el-select__caret {
+        margin-left: 0;
       }
     }
 
+    .el-input__inner {
+      font-size: eleVar('pagination', 'sm-font-size');
+    }
+
+    // 文本
+    .el-pagination__total,
+    .el-pagination__goto,
+    .el-pagination__classifier {
+      line-height: eleVar('pagination', 'height');
+    }
+
+    // 小尺寸
     &.el-pagination--small {
+      & > * {
+        margin: eleVar('pagination', 'sm-gap') !important;
+        margin-left: 0 !important;
+        margin-bottom: 0 !important;
+      }
+
+      & > .is-last {
+        margin-right: 0 !important;
+      }
+
       .btn-prev,
       .btn-next,
       .el-pager li {
-        border-radius: elVar('pagination', 'button-height-small');
+        height: eleVar('pagination', 'sm-height');
+        line-height: eleVar('pagination', 'sm-height');
+        min-width: eleVar('pagination', 'sm-height');
+        padding: eleVar('pagination', 'sm-padding');
+        border-radius: eleVar('pagination', 'sm-radius');
+        font-size: eleVar('pagination', 'sm-font-size');
+      }
+
+      .el-pager {
+        margin-left: eleVar('pagination', 'sm-space') !important;
+        margin-right: eleVar('pagination', 'sm-space') !important;
+
+        li + li {
+          margin-left: eleVar('pagination', 'sm-space');
+        }
+      }
+
+      .btn-prev {
+        margin-right: 0 !important;
+      }
+
+      .btn-prev .el-icon,
+      .btn-next .el-icon {
+        transform: scale(0.88);
+      }
+
+      .el-pagination__editor.el-input {
+        width: 44px;
+      }
+
+      .el-pagination__sizes .el-input {
+        width: 88px;
+
+        .el-input__wrapper {
+          padding-right: 6px;
+        }
+
+        .el-select__caret {
+          font-size: 12px;
+        }
+      }
+
+      .el-input__inner {
+        font-size: eleVar('pagination', 'sm-font-size');
       }
 
-      .el-pager li + li {
-        margin-left: 2px;
+      .el-pagination__total,
+      .el-pagination__goto,
+      .el-pagination__classifier {
+        line-height: eleVar('pagination', 'sm-height');
+        font-size: eleVar('pagination', 'sm-font-size');
       }
     }
   }