ele-admin-plus 1.1.4-beta.1 → 1.1.4-beta.3

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

@@ -53,6 +53,11 @@
     @include set-ele-var('message-box', $var);
   }
 
+  // Notification
+  .el-notification {
+    @include set-ele-var('notification', $var);
+  }
+
   // Radio
   .el-radio {
     @include set-ele-var('radio', $var);
@@ -85,3 +90,50 @@
     @include set-ele-var('timepicker', $var);
   }
 }
+
+// 美化滚动条样式
+@mixin scrollbar-style() {
+  ::-webkit-scrollbar {
+    width: eleVar('scrollbar', 'size');
+    height: eleVar('scrollbar', 'size');
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: eleVar('scrollbar', 'padding') solid transparent;
+    border-radius: eleVar('scrollbar', 'radius');
+    background-color: eleVar('scrollbar', 'color');
+    background-clip: padding-box;
+
+    &:hover {
+      background-color: eleVar('scrollbar', 'hover-color');
+    }
+  }
+
+  ::-webkit-scrollbar-track {
+    background: eleVar('scrollbar', 'bg');
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  // 火狐浏览器
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: eleVar('scrollbar', 'color') eleVar('scrollbar', 'bg');
+  }
+}
+
+@mixin set-scrollbar-style($selector) {
+  @if $selector == '' {
+    @include scrollbar-style();
+  } @else if $selector == 'pc' {
+    @media (hover: hover) and (pointer: fine) {
+      @include scrollbar-style();
+    }
+  } @else if $selector != 'never' {
+    #{$selector} {
+      @include scrollbar-style();
+    }
+  }
+}

package/lib/ele-app/style/overwrite.scss

@@ -385,6 +385,71 @@
 
 body .el-overlay.is-message-box > .el-overlay-message-box {
   overflow-x: hidden;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Notification */
+body .el-notification {
+  width: eleVar('notification', 'width');
+  max-width: calc(100vw - 48px);
+  padding: eleVar('notification', 'padding');
+  border: eleVar('notification', 'border');
+  border-radius: eleVar('notification', 'radius');
+  box-shadow: eleVar('notification', 'shadow');
+
+  .el-notification__icon {
+    width: eleVar('notification', 'icon-size');
+    height: eleVar('notification', 'icon-size');
+    font-size: eleVar('notification', 'icon-size');
+    margin: eleVar('notification', 'icon-margin');
+  }
+}
+
+.el-notification .el-notification__icon.el-notification--info {
+  color: elVar('color-primary');
+}
+
+.el-notification .el-notification__group {
+  margin: 0;
+
+  .el-notification__closeBtn {
+    top: 0;
+    right: 0;
+    width: eleVar('notification', 'close-size');
+    height: eleVar('notification', 'close-size');
+    line-height: eleVar('notification', 'close-size');
+    color: eleVar('notification', 'close-color');
+    font-size: eleVar('notification', 'close-font-size');
+    margin: eleVar('notification', 'close-margin');
+    border-radius: eleVar('notification', 'close-radius');
+    transition: (color $ele-transition, background-color $ele-transition);
+
+    &:hover {
+      color: eleVar('notification', 'close-hover-color');
+      background: eleVar('notification', 'close-hover-bg');
+    }
+  }
+
+  .el-notification__title {
+    color: eleVar('notification', 'title-color');
+    font-size: eleVar('notification', 'title-size');
+    font-weight: eleVar('notification', 'title-font-weight');
+    line-height: eleVar('notification', 'title-line-height');
+    padding: eleVar('notification', 'title-padding');
+    box-sizing: border-box;
+  }
+
+  .el-notification__content {
+    color: eleVar('notification', 'color');
+    font-size: eleVar('notification', 'size');
+    margin-top: eleVar('notification', 'body-margin');
+    line-height: inherit;
+    text-align: left;
+  }
 }
 
 /* Radio */

package/lib/ele-app/style/scrollbar.scss

@@ -6,32 +6,4 @@
   @include set-scrollbar-var($ele);
 }
 
-::-webkit-scrollbar {
-  width: eleVar('scrollbar', 'size');
-  height: eleVar('scrollbar', 'size');
-}
-
-::-webkit-scrollbar-thumb {
-  border: eleVar('scrollbar', 'padding') solid transparent;
-  border-radius: eleVar('scrollbar', 'radius');
-  background-color: eleVar('scrollbar', 'color');
-  background-clip: padding-box;
-
-  &:hover {
-    background-color: eleVar('scrollbar', 'hover-color');
-  }
-}
-
-::-webkit-scrollbar-track {
-  background: eleVar('scrollbar', 'bg');
-}
-
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-// 火狐浏览器
-* {
-  scrollbar-width: thin;
-  scrollbar-color: eleVar('scrollbar', 'color') eleVar('scrollbar', 'bg');
-}
+@include set-scrollbar-style($scrollbar-selector);

package/lib/ele-count-up/index.d.ts

@@ -17,7 +17,7 @@ declare const _default: import("vue").DefineComponent<{
     reset: () => void;
     update: (newEndVal?: string | number) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    ready: (_instance?: CountUp | undefined) => boolean;
+    ready: (_instance?: CountUp | null | undefined) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     delay: {
         type: NumberConstructor;
@@ -29,7 +29,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     options: import("vue").PropType<import("countup.js").CountUpOptions>;
 }>> & {
-    onReady?: ((_instance?: CountUp | undefined) => any) | undefined;
+    onReady?: ((_instance?: CountUp | null | undefined) => any) | undefined;
 }, {
     delay: number;
 }, {}>;

package/lib/ele-count-up/index.js

@@ -48,7 +48,8 @@ const _sfc_main = vue.defineComponent({
       }
     };
     const destroy = () => {
-      instance = void 0;
+      reset();
+      instance = null;
     };
     vue.watch(
       () => props2.endVal,

package/lib/ele-count-up/props.d.ts

@@ -19,5 +19,5 @@ export type CountUpProps = ExtractPropTypes<typeof countUpProps>;
  * 事件
  */
 export declare const countUpEmits: {
-    ready: (_instance?: CountUp) => boolean;
+    ready: (_instance?: CountUp | null) => boolean;
 };

package/lib/ele-modal/types/index.d.ts

@@ -25,3 +25,12 @@ export type PositionValue = 'top' | 'bottom' | 'left' | 'right' | 'leftTop' | 'l
  * 初始位置类型
  */
 export type Position = PositionValue | PositionObject;
+/**
+ * 弹窗坐标
+ */
+export interface Location {
+    top?: number;
+    left?: number;
+    topValue?: string;
+    leftValue?: string;
+}

package/lib/ele-modal/util.js

@@ -22,6 +22,8 @@ const singleSidebarClass = "ele-state-single-sidebar";
 const topLayoutClass = "ele-state-top-layout";
 const expandedClass = "ele-state-expanded";
 const mobileClass = "ele-state-mobile";
+const fixTop = 0.65;
+const fixLeft = 0.65;
 function initModalStyle(modalEl, resizable) {
   modalEl.style.top = modalEl.offsetTop + "px";
   modalEl.style.left = modalEl.offsetLeft + "px";
@@ -104,8 +106,8 @@ function handleMovable(event, props) {
       left: e.clientX - downX + downOL,
       top: e.clientY - downY + downOT
     };
-    const limitL = wrapEl.clientWidth - modalEl.clientWidth - 0.65;
-    const limitT = wrapEl.clientHeight - modalEl.clientHeight - 0.45;
+    const limitL = wrapEl.clientWidth - modalEl.clientWidth - fixLeft;
+    const limitT = wrapEl.clientHeight - modalEl.clientHeight - fixTop;
     if (!props.moveOut) {
       if (position.left < 0) {
         position.left = 0;
@@ -140,8 +142,8 @@ function handleMovable(event, props) {
         position.top = minLimitT;
       }
     }
-    modalEl.style.left = `${position.left}px`;
-    modalEl.style.top = `${position.top}px`;
+    modalEl.style.left = `${Math.floor(position.left)}px`;
+    modalEl.style.top = `${Math.floor(position.top)}px`;
   };
   const mouseupFn = function() {
     modalEl.style.userSelect = "";
@@ -184,7 +186,7 @@ function handleResizable(event, props) {
   const mousemoveFn = function(e) {
     if (props.resizable !== "vertical") {
       const w = e.clientX - downX + downW;
-      const maxW = wrapEl.clientWidth - modalEl.offsetLeft - 1;
+      const maxW = wrapEl.clientWidth - modalEl.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;
@@ -192,7 +194,7 @@ function handleResizable(event, props) {
     }
     if (props.resizable !== "horizontal") {
       const h = e.clientY - downY + downH;
-      const maxH = wrapEl.clientHeight - modalEl.offsetTop - 1;
+      const maxH = wrapEl.clientHeight - modalEl.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;
@@ -250,60 +252,71 @@ function setModalPosition(modalEl, resizable, position, moveOut) {
   if (!wrapEl) {
     return;
   }
+  const location = {};
   initModalStyle(modalEl, resizable);
   const canOutB = canMoveOut(moveOut, "bottom");
   const canOutR = canMoveOut(moveOut, "right");
-  const t = wrapEl.clientHeight - modalEl.clientHeight - (canOutB ? 0 : 2);
+  const t = wrapEl.clientHeight - modalEl.clientHeight - (canOutB ? 0 : fixTop);
   const maxTop = t < 0 ? 0 : t;
-  const l = wrapEl.clientWidth - modalEl.clientWidth - (canOutR ? 0 : 1);
+  const l = wrapEl.clientWidth - modalEl.clientWidth - (canOutR ? 0 : fixLeft);
   const maxLeft = l < 0 ? 0 : l;
   if (position === "top") {
-    modalEl.style.top = "0px";
-    modalEl.style.left = `${maxLeft / 2}px`;
+    location.top = 0;
+    location.left = maxLeft / 2;
   } else if (position === "bottom") {
-    modalEl.style.top = `${maxTop}px`;
-    modalEl.style.left = `${maxLeft / 2}px`;
+    location.top = maxTop;
+    location.left = maxLeft / 2;
   } else if (position === "left") {
-    modalEl.style.top = `${maxTop / 2}px`;
-    modalEl.style.left = "0px";
+    location.top = maxTop / 2;
+    location.left = 0;
   } else if (position === "right") {
-    modalEl.style.top = `${maxTop / 2}px`;
-    modalEl.style.left = `${maxLeft}px`;
+    location.top = maxTop / 2;
+    location.left = maxLeft;
   } else if (position === "leftTop") {
-    modalEl.style.top = "0px";
-    modalEl.style.left = "0px";
+    location.top = 0;
+    location.left = 0;
   } else if (position === "leftBottom") {
-    modalEl.style.top = `${maxTop}px`;
-    modalEl.style.left = "0px";
+    location.top = maxTop;
+    location.left = 0;
   } else if (position === "rightTop") {
-    modalEl.style.top = "0px";
-    modalEl.style.left = `${maxLeft}px`;
+    location.top = 0;
+    location.left = maxLeft;
   } else if (position === "rightBottom") {
-    modalEl.style.top = `${maxTop}px`;
-    modalEl.style.left = `${maxLeft}px`;
+    location.top = maxTop;
+    location.left = maxLeft;
   } else if (position === "center") {
-    modalEl.style.top = `${maxTop / 2}px`;
-    modalEl.style.left = `${maxLeft / 2}px`;
+    location.top = maxTop / 2;
+    location.left = maxLeft / 2;
   } else if (typeof position === "object") {
     if (position.top != null) {
       if (typeof position.top === "number") {
-        modalEl.style.top = `${position.top}px`;
+        location.top = position.top;
       } else {
-        modalEl.style.top = position.top;
+        location.topValue = position.top;
       }
     } else if (position.left != null) {
-      modalEl.style.top = `${maxTop / 2}px`;
+      location.top = maxTop / 2;
     }
     if (position.left != null) {
       if (typeof position.left === "number") {
-        modalEl.style.left = `${position.left}px`;
+        location.left = position.left;
       } else {
-        modalEl.style.left = position.left;
+        location.leftValue = position.left;
       }
     } else if (position.top != null) {
-      modalEl.style.left = `${maxLeft / 2}px`;
+      location.left = maxLeft / 2;
     }
   }
+  if (location.top != null) {
+    modalEl.style.top = `${Math.floor(location.top)}px`;
+  } else if (location.topValue != null) {
+    modalEl.style.top = location.topValue;
+  }
+  if (location.left != null) {
+    modalEl.style.left = `${Math.floor(location.left)}px`;
+  } else if (location.leftValue != null) {
+    modalEl.style.left = location.leftValue;
+  }
 }
 function setInitPosition(modalEl, resizable, position, moveOut, force) {
   const attr = "ele-position";

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

@@ -12,6 +12,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     container: import("vue").ShallowRef<Element>;
     visible: import("vue").Ref<boolean>;
+    isStatic: import("vue").ComputedRef<boolean>;
     print: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:modelValue': (_value: boolean) => boolean;

package/lib/ele-printer/index.js

@@ -15,6 +15,9 @@ const _sfc_main = vue.defineComponent({
     });
     const container = vue.shallowRef(util.getPrintContainer());
     const visible = vue.ref(false);
+    const isStatic = vue.computed(() => {
+      return props2.static;
+    });
     const print = () => {
       if (!authenticated.value) {
         updateModelValue(false);
@@ -55,7 +58,7 @@ const _sfc_main = vue.defineComponent({
       },
       { immediate: true }
     );
-    return { container, visible, print };
+    return { container, visible, isStatic, print };
   }
 });
 const _export_sfc = (sfc, props2) => {
@@ -70,10 +73,14 @@ const _hoisted_2 = { key: 1 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock(vue.Teleport, {
     to: _ctx.container,
-    disabled: _ctx.static && !_ctx.visible
+    disabled: _ctx.isStatic && !_ctx.visible
   }, [
     vue.createElementVNode("table", {
-      class: vue.normalizeClass(["ele-printer", { "is-open": _ctx.visible }, { "is-static": _ctx.static }])
+      class: vue.normalizeClass([
+        "ele-printer",
+        { "is-open": _ctx.visible },
+        { "is-static": _ctx.isStatic }
+      ])
     }, [
       _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("thead", _hoisted_1, [
         vue.createElementVNode("tr", null, [

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

@@ -40,19 +40,22 @@
 }
 
 /* 打印状态 */
+html.ele-printing,
 html.ele-printing > body {
-  color: #000;
-  background: #fff;
+  color: #000 !important;
+  background: #fff !important;
+  height: auto !important;
+  overflow: visible !important;
+}
 
-  & > * {
-    display: none !important;
-  }
+html.ele-printing > body > * {
+  display: none !important;
+}
 
-  #ele-printer-container {
-    display: block !important;
+html.ele-printing #ele-printer-container {
+  display: block !important;
 
-    * {
-      pointer-events: none !important;
-    }
+  * {
+    pointer-events: none !important;
   }
 }

package/lib/ele-pro-layout/index.js

@@ -108,7 +108,7 @@ const _sfc_main = vue.defineComponent({
       if (props2.fixedBody) {
         return ".ele-admin-layout.ele-admin-fixed-body>.ele-admin-main>.ele-admin-body>.ele-admin-content";
       }
-      return void 0;
+      return "body";
     });
     const sidebarCollapse = vue.computed(() => {
       return mobile.value || mixSidebar.value ? false : props2.collapse;
@@ -637,11 +637,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       })
     ]), 1032, ["menus", "headerStyle", "active", "ellipsis", "ellipsisProps", "menuTrigger", "itemTrigger", "collapse", "sidebar", "titleSlot", "iconSlot", "levels", "breadcrumb", "breadcrumbSeparator", "homePath", "isHome", "onLogoClick", "onOpen", "onClsoe", "onItemClick"]),
     vue.createVNode(_component_EleWatermark, {
-      fixed: true,
+      class: "ele-admin-main",
       height: 68,
-      content: _ctx.watermark,
       disabled: _ctx.authenticated,
-      class: "ele-admin-main"
+      fixed: true,
+      content: _ctx.watermark
     }, {
       default: vue.withCtx(() => [
         _ctx.sidebox ? (vue.openBlock(), vue.createBlock(_component_ProSidebox, {
@@ -734,7 +734,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ])
       ]),
       _: 3
-    }, 8, ["content", "disabled"]),
+    }, 8, ["disabled", "content"]),
     vue.createElementVNode("div", {
       class: "ele-admin-mask",
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.updateCollapse && _ctx.updateCollapse(...args))

package/lib/ele-pro-layout/style/layout-mobile.scss

@@ -13,6 +13,7 @@
 
   .ele-admin-sidebar {
     top: eleVar('header', 'height') !important;
+    height: calc(100vh - #{eleVar('header', 'height')}) !important;
   }
 
   .ele-admin-logo > img + h1 {

package/lib/ele-tabs/index.js

@@ -106,6 +106,7 @@ const _sfc_main = vue.defineComponent({
     };
     const unbindDragSort = () => {
       current.sortIns && current.sortIns.destroy();
+      current.sortIns = null;
     };
     const onContextmenu = (e) => {
       const el = e.target;

package/lib/ele-xg-player/index.js

@@ -28,6 +28,7 @@ const _sfc_main = vue.defineComponent({
     const destroy = () => {
       if (player && typeof player.destroy === "function") {
         player.destroy();
+        player = null;
       }
     };
     vue.onMounted(() => {

package/lib/style/themes/default.scss

@@ -5,6 +5,9 @@
 // 过渡动画
 $ele-transition: 0.2s !default;
 
+// 美化滚动条样式选择器
+$scrollbar-selector: '' !default;
+
 // 样式变量
 $ele: () !default;
 $ele: map.deep-merge(
@@ -838,6 +841,31 @@ $ele: map.deep-merge(
       'footer-border': none,
       'mobile-space': 16px
     ),
+    'notification': (
+      // 通知
+      'width': 360px,
+      'border': none,
+      'padding': 20px,
+      'radius': elVar('border-radius', 'base'),
+      'shadow': elVar('box-shadow', 'light'),
+      'color': elVar('text-color', 'regular'),
+      'size': elVar('font-size', 'base'),
+      'icon-size': 26px,
+      'icon-margin': -2px 12px 0 0,
+      'title-color': elVar('text-color', 'primary'),
+      'title-size': elVar('font-size', 'medium'),
+      'title-font-weight': normal,
+      'title-line-height': 22px,
+      'title-padding': 0 22px 0 0,
+      'body-margin': 8px,
+      'close-size': 22px,
+      'close-margin': 20px 24px 0 0,
+      'close-radius': elVar('border-radius', 'small'),
+      'close-font-size': 18px,
+      'close-color': elVar('text-color', 'secondary'),
+      'close-hover-color': elVar('text-color', 'primary'),
+      'close-hover-bg': transparent
+    ),
     'radio': (
       // 单选框
       'color': elVar('text-color', 'regular'),

package/lib/style/themes/rounded.scss

@@ -216,6 +216,10 @@ $ele-rounded: map.deep-merge(
       'header-font-weight': bold,
       'icon-hover-bg': elVar('fill-color', 'light')
     ),
+    'notification': (
+      'radius': $radius-large,
+      'close-hover-bg': elVar('fill-color', 'light')
+    ),
     'descriptions': (
       'radius': $radius-large
     ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ele-admin-plus",
-  "version": "1.1.4-beta.1",
+  "version": "1.1.4-beta.3",
   "description": "EleAdminPlus Library",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -14,11 +14,10 @@
     "dev": "vite --host --config vite.global.ts",
     "dev:needed": "vite --host",
     "build": "esno scripts/build.ts",
+    "ts2js": "esno scripts/ts2js.ts",
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,components}/**/*.{vue,ts}\" --fix",
     "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite/",
-    "clean:lib": "rimraf node_modules",
-    "publish:beta": "npm publish --tag beta",
-    "publish": "npm publish"
+    "clean:lib": "rimraf node_modules"
   },
   "keywords": [],
   "author": "eclouds@foxmail.com",
@@ -32,6 +31,7 @@
   "devDependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@ant-design/colors": "^7.0.0",
+    "@babel/types": "^7.22.11",
     "@bytemd/plugin-gfm": "^1.21.0",
     "@bytemd/plugin-highlight": "^1.21.0",
     "@element-plus/icons-vue": "^2.1.0",
@@ -42,6 +42,7 @@
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",
     "@vitejs/plugin-vue": "^4.3.4",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue/compiler-sfc": "^3.3.4",
     "axios": "^1.5.0",
     "bytemd": "^1.21.0",