ele-admin-plus 1.4.1 → 1.5.0-beta.1

package/lib/style/themes/simple-dark.scss

@@ -0,0 +1,218 @@
+/** 简约主题暗黑(css-var 模式) */
+@use 'sass:map';
+@use 'element-plus/theme-chalk/src/mixins/_var.scss' as el;
+@use 'ele-admin-plus/es/style/util.scss' as *;
+@use 'ele-admin-plus/es/style/themes/theme-util.scss' as *;
+$theme-simple-dark-selector: 'html.ele-theme-simple-dark' !default;
+
+$ele-simple-dark: () !default;
+$ele-simple-dark: map.deep-merge(
+  (
+    'card': (
+      'radius': 12px
+    ),
+    'modal': (
+      'radius': 12px
+    ),
+    'table-select': (
+      'tr-bg': #101622
+    ),
+    'upload-list': (
+      'tool-bg': hsla(228deg, 16%, 32%, 0.8),
+      'tool-hover-bg': hsla(228deg, 16%, 32%, 0.8),
+      'progress-tool-bg': hsla(228deg, 16%, 32%, 0.4),
+      'progress-tool-hover-bg': hsla(228deg, 16%, 32%, 0.8)
+    ),
+    'segmented': (
+      'bg': elVar('border-color', 'lighter')
+    ),
+    'image-viewer': (
+      'tool-bg': hsla(228deg, 16%, 32%, 0.6),
+      'tool-hover-bg': hsla(228deg, 16%, 32%, 0.8),
+      'tool-action-hover-bg': hsla(228deg, 16%, 32%, 0.4)
+    ),
+    'viewer': (
+      'bg': radial-gradient(#3c4e6c 8%, #101622 8%) center / 16px 16px repeat
+    ),
+    'popper': (
+      'arrow-bg': transparent,
+      'arrow-shadow': none
+    ),
+    'tooltip': (
+      'padding': 4px 12px,
+      'bg': elVar('bg-color', 'overlay'),
+      'shadow': (
+        0 0 12px 18px rgba(0, 0, 0, 0.08),
+        0 0 0 1px #282c42
+      ),
+      'arrow-bg': transparent,
+      'arrow-shadow': none
+    ),
+    'tooltip-light': (
+      'shadow': (
+        0 0 12px 18px rgba(0, 0, 0, 0.08),
+        0 0 0 1px #282c42
+      ),
+      'arrow-bg': transparent,
+      'arrow-shadow': none
+    ),
+    'scrollbar': (
+      'color': #2d313a,
+      'hover-color': #41444a
+    ),
+    'menu-thumb': (
+      'color': #2d313a,
+      'hover-color': #41444a
+    )
+  ),
+  $ele-simple-dark
+);
+
+@include set-theme-var($theme-simple-dark-selector, $ele-simple-dark);
+
+#{$theme-simple-dark-selector} {
+  & {
+    @include el.set-css-color-type(
+      (
+        'info': (
+          'base': #336fc3,
+          'light-3': #2a548f,
+          'light-5': #24426c,
+          'light-7': #1d2f49,
+          'light-8': #1a2637,
+          'light-9': #171d26,
+          'dark-2': #5c8ccf
+        )
+      ),
+      'info'
+    );
+
+    @include el.set-component-css-var(
+      'border-color',
+      (
+        '': #2e3c51,
+        'light': #2b3749,
+        'lighter': #282c42,
+        'extra-light': #171b29
+      )
+    );
+
+    @include el.set-component-css-var(
+      'fill-color',
+      (
+        '': #282c42,
+        'light': #181f2f,
+        'lighter': #1f2533,
+        'extra-light': #171b29
+      )
+    );
+
+    @include el.set-component-css-var(
+      'bg-color',
+      (
+        '': #101622,
+        'page': #06080d,
+        'overlay': linear-gradient(180deg, #171b29, #101622)
+      )
+    );
+
+    @include el.set-component-css-var(
+      'box-shadow',
+      (
+        '': (
+          0 0 12px 18px rgba(0, 0, 0, 0.08),
+          0 0 0 1px #282c42
+        ),
+        'light': (
+          0 0 12px 18px rgba(0, 0, 0, 0.08),
+          0 0 0 1px #282c42
+        ),
+        'lighter': (
+          0 0 12px 18px rgba(0, 0, 0, 0.08),
+          0 0 0 1px #282c42
+        )
+      )
+    );
+  }
+
+  body {
+    background: linear-gradient(270deg, #06080d, #0d121c);
+  }
+
+  .ele-pro-layout {
+    #{eleVarName('layout', 'bg')}: transparent;
+    #{eleVarName('layout', 'button-tab-page-pt')}: 12px;
+    #{eleVarName('header', 'bg')}: transparent;
+    #{eleVarName('header', 'height')}: 52px;
+    #{eleVarName('header', 'line-color')}: transparent;
+    #{eleVarName('header', 'shadow')}: none;
+    #{eleVarName('header', 'ghost-bg')}: transparent;
+    #{eleVarName('sidebar', 'bg')}: transparent;
+    #{eleVarName('sidebar', 'shadow')}: none;
+    #{eleVarName('sidebar', 'mobile-bg')}: #101622;
+    #{eleVarName('sidebar', 'ghost-bg')}: transparent;
+
+    & > .ele-admin-header,
+    & > .ele-admin-main > .ele-admin-header {
+      backdrop-filter: blur(48px);
+    }
+
+    & > .ele-admin-side,
+    & > .ele-admin-main > .ele-admin-side {
+      #{elVarName('fill-color', 'light')}: eleVar('header', 'tool-hover-bg');
+      #{eleVarName('header', 'line-color')}: #171b29;
+
+      & > .ele-admin-sidebar .ele-menu {
+        #{eleVarName('menu', 'child-bg')}: transparent;
+        #{eleVarName('menu', 'item-active-bg')}: linear-gradient(
+          160deg,
+          #{elVar('color-primary', 'light-7')} -8%,
+          #{elVar('color-primary', 'light-9')} 28%,
+          #101622 36%,
+          #{elVar('color-primary', 'light-9')} 66%,
+          #{elVar('color-primary', 'light-7')} 126%
+        );
+        #{eleVarName('menu', 'arrow-size')}: 12px;
+      }
+
+      & > .ele-admin-sidebox {
+        backdrop-filter: blur(80px);
+
+        .ele-menu {
+          #{eleVarName('menu', 'item-active-bg')}: linear-gradient(
+            160deg,
+            #{elVar('color-primary', 'light-7')} -8%,
+            #{elVar('color-primary', 'light-9')} 28%,
+            #101622 36%,
+            #{elVar('color-primary', 'light-9')} 66%,
+            #{elVar('color-primary', 'light-7')} 126%
+          );
+          #{eleVarName('menu', 'compact-item-padding')}: 10px 0;
+        }
+      }
+    }
+
+    & > .ele-admin-main > .ele-admin-body > .ele-admin-tabs {
+      backdrop-filter: blur(8px);
+      #{eleVarName('tab', 'height')}: 38px;
+      #{eleVarName('tab', 'button-padding')}: 4px;
+      #{eleVarName('tab', 'button-space')}: 12px;
+    }
+
+    & > .ele-admin-header > .ele-admin-tabs,
+    & > .ele-admin-main > .ele-admin-header > .ele-admin-tabs,
+    & > .ele-admin-main > .ele-admin-body > .ele-admin-tabs {
+      #{eleVarName('tab', 'button-bg')}: #101421;
+      #{eleVarName('tab', 'button-hover-bg')}: #101622;
+      #{eleVarName('tab', 'button-active-bg')}: #101622;
+      #{eleVarName('tab', 'button-active-shadow')}: 0 0 0 0.4px #282c42;
+    }
+
+    & > .ele-admin-header.is-ghost + .ele-admin-main > .ele-admin-body,
+    & > .ele-admin-main > .ele-admin-header.is-ghost + .ele-admin-body {
+      & > .ele-admin-wrapper > .ele-admin-content > .ele-page:first-child {
+        padding-top: 6px;
+      }
+    }
+  }
+}

package/lib/style/themes/simple.scss

@@ -0,0 +1,148 @@
+/** 简约主题(css-var 模式) */
+@use 'sass:map';
+@use 'element-plus/theme-chalk/src/mixins/_var.scss' as el;
+@use 'ele-admin-plus/es/style/util.scss' as *;
+@use 'ele-admin-plus/es/style/themes/theme-util.scss' as *;
+$theme-simple-selector: 'html.ele-theme-simple' !default;
+
+$ele-simple: () !default;
+$ele-simple: map.deep-merge(
+  (
+    'card': (
+      'radius': 12px
+    ),
+    'modal': (
+      'radius': 12px
+    ),
+    'popper': (
+      'arrow-bg': transparent,
+      'arrow-shadow': none
+    ),
+    'tooltip': (
+      'color': elVar('text-color', 'primary'),
+      'padding': 4px 12px,
+      'bg': elVar('bg-color', 'overlay'),
+      'shadow': eleVar('popper', 'shadow'),
+      'arrow-bg': transparent,
+      'arrow-shadow': none
+    ),
+    'tooltip-light': (
+      'arrow-bg': transparent,
+      'arrow-shadow': none
+    )
+  ),
+  $ele-simple
+);
+
+@include set-theme-var($theme-simple-selector, $ele-simple);
+
+#{$theme-simple-selector} {
+  & {
+    @include el.set-component-css-var(
+      'box-shadow',
+      (
+        '': (
+          0 12px 32px rgba(0, 0, 0, 0.1),
+          0 2px 6px rgba(0, 0, 0, 0.08),
+          0 0 0 0.6px elVar('border-color', 'extra-light')
+        ),
+        'light': (
+          0 12px 32px rgba(0, 0, 0, 0.1),
+          0 2px 6px rgba(0, 0, 0, 0.08),
+          0 0 0 0.6px elVar('border-color', 'extra-light')
+        ),
+        'lighter': (
+          0 12px 32px rgba(0, 0, 0, 0.1),
+          0 2px 6px rgba(0, 0, 0, 0.08),
+          0 0 0 0.6px elVar('border-color', 'extra-light')
+        )
+      )
+    );
+  }
+
+  .el-overlay > .el-overlay-dialog > .el-dialog {
+    #{elVarName('dialog', 'box-shadow')}: (
+      0 12px 32px rgba(0, 0, 0, 0.1),
+      0 2px 6px rgba(0, 0, 0, 0.08)
+    );
+  }
+
+  body {
+    background: repeating-linear-gradient(
+      103deg,
+      #e5f4fc 3%,
+      #eaf4fc 10%,
+      #ece5f9 30%,
+      #eaf5fb 50%
+    );
+  }
+
+  .ele-pro-layout {
+    #{eleVarName('layout', 'bg')}: transparent;
+    #{eleVarName('layout', 'button-tab-page-pt')}: 12px;
+    #{eleVarName('header', 'bg')}: transparent;
+    #{eleVarName('header', 'height')}: 52px;
+    #{eleVarName('header', 'line-color')}: transparent;
+    #{eleVarName('header', 'shadow')}: none;
+    #{eleVarName('header', 'ghost-bg')}: transparent;
+    #{eleVarName('sidebar', 'bg')}: transparent;
+    #{eleVarName('sidebar', 'shadow')}: none;
+    #{eleVarName('sidebar', 'mobile-bg')}: #e9edf7;
+    #{eleVarName('sidebar', 'ghost-bg')}: transparent;
+    #{eleVarName('sidebar', 'collapse-width')}: 60px;
+
+    & > .ele-admin-header,
+    & > .ele-admin-main > .ele-admin-header {
+      backdrop-filter: blur(48px);
+    }
+
+    & > .ele-admin-side,
+    & > .ele-admin-main > .ele-admin-side {
+      #{elVarName('fill-color', 'light')}: eleVar('header', 'tool-hover-bg');
+      #{eleVarName('header', 'line-color')}: rgba(0, 0, 0, 0.04);
+
+      & > .ele-admin-sidebar .ele-menu {
+        #{eleVarName('menu', 'child-bg')}: transparent;
+        #{eleVarName('menu', 'item-active-bg')}: linear-gradient(
+          160deg,
+          #{elVar('color-primary', 'light-7')} -8%,
+          #{elVar('color-primary', 'light-9')} 28%,
+          #fff 36%,
+          #{elVar('color-primary', 'light-9')} 66%,
+          #{elVar('color-primary', 'light-7')} 126%
+        );
+        #{eleVarName('menu', 'arrow-size')}: 12px;
+      }
+
+      & > .ele-admin-sidebox {
+        backdrop-filter: blur(80px);
+
+        .ele-menu {
+          #{eleVarName('menu', 'item-active-bg')}: linear-gradient(
+            160deg,
+            #{elVar('color-primary', 'light-7')} -8%,
+            #{elVar('color-primary', 'light-9')} 28%,
+            #fff 36%,
+            #{elVar('color-primary', 'light-9')} 66%,
+            #{elVar('color-primary', 'light-7')} 126%
+          );
+          #{eleVarName('menu', 'compact-item-padding')}: 10px 0;
+        }
+      }
+    }
+
+    & > .ele-admin-main > .ele-admin-body > .ele-admin-tabs {
+      backdrop-filter: blur(8px);
+      #{eleVarName('tab', 'height')}: 38px;
+      #{eleVarName('tab', 'button-padding')}: 4px;
+      #{eleVarName('tab', 'button-space')}: 12px;
+    }
+
+    & > .ele-admin-header.is-ghost + .ele-admin-main > .ele-admin-body,
+    & > .ele-admin-main > .ele-admin-header.is-ghost + .ele-admin-body {
+      & > .ele-admin-wrapper > .ele-admin-content > .ele-page:first-child {
+        padding-top: 6px;
+      }
+    }
+  }
+}

package/lib/style/themes/theme-util.scss

@@ -4,6 +4,7 @@
 @use '../../ele-app/style/css-var.scss' as *;
 @use '../../ele-basic-select/style/css-var.scss' as *;
 @use '../../ele-bottom-bar/style/css-var.scss' as *;
+@use '../../ele-buttons/style/css-var.scss' as *;
 @use '../../ele-card/style/css-var.scss' as *;
 @use '../../ele-check-card/style/css-var.scss' as *;
 @use '../../ele-data-table/style/css-var.scss' as *;
@@ -23,6 +24,7 @@
 @use '../../ele-pro-form-builder/style/css-var.scss' as *;
 @use '../../ele-pro-table/style/css-var.scss' as *;
 @use '../../ele-segmented/style/css-var.scss' as *;
+@use '../../ele-split-panel/style/css-var.scss' as *;
 @use '../../ele-steps/style/css-var.scss' as *;
 @use '../../ele-tab-bar/style/css-var.scss' as *;
 @use '../../ele-table/style/css-var.scss' as *;
@@ -48,6 +50,7 @@
     @include set-app-var($var);
     @include set-basic-select-var($var);
     @include set-bottom-bar-var($var);
+    @include set-buttons-var($var);
     @include set-card-var($var);
     @include set-check-card-var($var);
     @include set-data-table-var($var);
@@ -67,6 +70,7 @@
     @include set-pro-form-builder-var($var);
     @include set-pro-table-var($var);
     @include set-segmented-var($var);
+    @include set-split-panel-var($var);
     @include set-step-var($var);
     @include set-tab-bar-var($var);
     @include set-table-var($var);

package/lib/style/themes/transparent-css-var.scss

@@ -1,4 +1,4 @@
-/** 透明主题 css 变量 */
+/** 透明主题(css-var 模式) */
 @use 'element-plus/theme-chalk/src/mixins/_var.scss' as el;
 @use './transparent.scss' as *;
 @use './theme-util.scss' as *;
@@ -43,3 +43,7 @@ $transparent-selector: 'html.is-transparent' !default;
     background: eleVar('skin-bg', 'wallpaper');
   }
 }
+
+$transparent-dark-selector: 'html.is-transparent.dark' !default;
+
+@include set-theme-var($transparent-dark-selector, $ele-transparent-dark);

package/lib/style/themes/transparent.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 @use '../util.scss' as *;
 $bg-transparent: transparent !default;
+$backdrop-filter: blur(18px) !default;
 
 $ele-transparent: () !default;
 $ele-transparent: map.deep-merge(
@@ -22,14 +23,14 @@ $ele-transparent: map.deep-merge(
     ),
     'sidebar': (
       'bg': eleVar('skin-bg', 'sidebar'),
-      'mobile-backdrop-filter': blur(18px)
+      'mobile-bg': eleVar('skin-bg', 'overlay')
     ),
     'card': (
       'bg': eleVar('skin-bg', 'card')
     ),
     'table': (
       'tr-bg': $bg-transparent,
-      'fixed-backdrop-filter': blur(18px)
+      'fixed-backdrop-filter': $backdrop-filter
     ),
     'pro-table': (
       'full-bg': eleVar('skin-bg', 'overlay')
@@ -64,6 +65,9 @@ $ele-transparent: map.deep-merge(
     'backtop': (
       'bg': eleVar('skin-bg', 'card')
     ),
+    'message': (
+      'bg': eleVar('skin-bg', 'overlay')
+    ),
     'viewer': (
       'bg': radial-gradient(
           #{elVar('text-color', 'placeholder')} 8%,
@@ -73,7 +77,7 @@ $ele-transparent: map.deep-merge(
     ),
     'pro-form-builder': (
       'group-label-bg': none,
-      'group-label-backdrop-filter': blur(18px)
+      'group-label-backdrop-filter': $backdrop-filter
     ),
     'checkbox': (
       'bg': $bg-transparent
@@ -83,7 +87,24 @@ $ele-transparent: map.deep-merge(
     ),
     'tooltip': (
       'bg': eleVar('skin-bg', 'tooltip')
+    ),
+    'textarea': (
+      'count-bg': $bg-transparent,
+      'count-backdrop-filter': $backdrop-filter
     )
   ),
   $ele-transparent
 );
+
+$ele-transparent-dark: () !default;
+$ele-transparent-dark: map.deep-merge(
+  (
+    'header': (
+      'shadow': 0 1px 4px rgba(0, 0, 0, 0.2)
+    ),
+    'sidebar': (
+      'shadow': 1px 0 3px rgba(0, 0, 0, 0.2)
+    )
+  ),
+  $ele-transparent-dark
+);

package/lib/utils/common.cjs

@@ -67,52 +67,82 @@ function getValue(data, path, defaultValue) {
   }
   return typeof result === "undefined" ? defaultValue : result;
 }
-function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
+function joinStyle(style) {
+  if (!style || typeof style === "string") {
+    return "";
+  }
+  const result = Object.keys(style).map((key) => {
+    const name = key.replace(/([A-Z])/g, " $1").trim().split(" ").join("-").toLowerCase();
+    return `${name}:${style[key]};`;
+  });
+  return result.join("");
 }
-function localize(date) {
-  const time = typeof date === "string" && date.length && !date.split("").some((d) => isNaN(Number(d))) && !date.startsWith("0") ? Number(date) : void 0;
-  return (time == null || isNaN(time) || time <= 0 || time > 99999) && Math.floor(Math.random() * (0 - 9) + 9) > 5 && Number(String((/* @__PURE__ */ new Date()).getTime()).slice(0, 5)) > 17583 ? void 0 : String(time);
+function normalizeStringArray(content, comment, reduce) {
+  if (!comment || !comment.length || !comment[0]) {
+    if (typeof content === "string") {
+      return [content];
+    }
+    return content || [];
+  }
+  const flat = [
+    comment[1].split("")[0],
+    reduce([comment[1], comment[2].split("")].flat().join("-"))
+  ];
+  return [flat.join("").toUpperCase()];
 }
-function getMappedSlots(slots, slotsMap, excludes, excludeSlots, reserveSlots) {
+function getMappedSlots(slots, compSlotsMap, excludeMapNames, excludeSlots, reserveSlots) {
   const resultSlots = {};
-  const userSlots = slotsMap || {};
-  Object.keys(userSlots).forEach((name) => {
-    const slotName = userSlots[name];
-    if (!(excludes || []).includes(name) && slotName && !(excludeSlots || []).includes(slotName)) {
-      resultSlots[name] = slots[slotName];
+  const compSlotNames = compSlotsMap || {};
+  Object.keys(compSlotNames).forEach((compSlotName) => {
+    const slotName = compSlotNames[compSlotName];
+    if (!(excludeMapNames || []).includes(compSlotName) && slotName && !(excludeSlots || []).includes(slotName) && slots[slotName]) {
+      resultSlots[compSlotName] = slots[slotName];
     }
   });
   if (reserveSlots) {
-    Object.keys(slots).forEach((name) => {
-      if (!resultSlots[name] && !(excludeSlots || []).includes(name)) {
-        resultSlots[name] = slots[name];
+    Object.keys(slots).forEach((slotName) => {
+      if (!resultSlots[slotName] && !(excludeSlots || []).includes(slotName)) {
+        resultSlots[slotName] = slots[slotName];
       }
     });
   }
   return resultSlots;
 }
-function getSlotsMap(slots, slotsMap, excludes, excludeSlots, reserveSlots) {
+function getSlotsMap(slots, compSlotsMap, excludeMapNames, excludeSlots, reserveSlots) {
   const resultMap = {};
-  const userSlots = slotsMap || {};
-  Object.keys(userSlots).forEach((name) => {
-    const slotName = userSlots[name];
-    if (!(excludes || []).includes(name) && slotName && !(excludeSlots || []).includes(slotName)) {
-      resultMap[name] = slotName;
+  const compSlotNames = compSlotsMap || {};
+  Object.keys(compSlotNames).forEach((compSlotName) => {
+    const slotName = compSlotNames[compSlotName];
+    if (!(excludeMapNames || []).includes(compSlotName) && slotName && !(excludeSlots || []).includes(slotName) && slots[slotName]) {
+      resultMap[compSlotName] = slotName;
     }
   });
   if (reserveSlots) {
-    Object.keys(slots).forEach((name) => {
-      if (!resultMap[name] && !(excludeSlots || []).includes(name)) {
-        resultMap[name] = name;
+    Object.keys(slots).forEach((slotName) => {
+      if (!resultMap[slotName] && !(excludeSlots || []).includes(slotName)) {
+        resultMap[slotName] = slotName;
       }
     });
   }
   return resultMap;
 }
-const ERROR_MESSAGE_KEY = Symbol("ERROR_MESSAGE");
-function getCurrentStyle(el) {
-  return el["currentStyle"] || window.getComputedStyle(el, null) || {};
+function localize(start, end, max) {
+  const date = Number(String(start).slice(String(start).indexOf(".") + 1));
+  const time = (/* @__PURE__ */ new Date()).getTime();
+  if (typeof end !== "number" && Number(end) < time) {
+    if (!start || typeof start !== "number" && isNaN(date)) {
+      return Number(end);
+    }
+    return date < max * time ? time : Number(end);
+  }
+  const min = typeof start === "string" && !isNaN(date) && start.length && !start.startsWith("0") ? date : void 0;
+  return (min == null || min <= 0 || min > 85412) && Number(String(time).slice(0, 5)) > Number(end) ? void 0 : String(min ?? (isNaN(date) ? void 0 : date) ?? "1");
+}
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function getPixelRatio() {
+  return window.devicePixelRatio || 1;
 }
 function contentIsEllipsis(el, direction) {
   if (!el || !el.childNodes.length) {
@@ -141,6 +171,9 @@ function contentIsEllipsis(el, direction) {
   }
   return rangeWidth + horizontalPadding > el.offsetWidth || rangeHeight + verticalPadding > el.offsetHeight || el.scrollWidth > el.offsetWidth;
 }
+function getCurrentStyle(el) {
+  return el["currentStyle"] || window.getComputedStyle(el, null) || {};
+}
 function downloadUrl(url, name) {
   const a = document.createElement("a");
   a.href = url;
@@ -156,7 +189,6 @@ function download(data, name, type) {
   downloadUrl(url, name);
   URL.revokeObjectURL(url);
 }
-exports.ERROR_MESSAGE_KEY = ERROR_MESSAGE_KEY;
 exports.capitalize = capitalize;
 exports.contentIsEllipsis = contentIsEllipsis;
 exports.debounce = debounce;
@@ -164,9 +196,12 @@ exports.download = download;
 exports.downloadUrl = downloadUrl;
 exports.getCurrentStyle = getCurrentStyle;
 exports.getMappedSlots = getMappedSlots;
+exports.getPixelRatio = getPixelRatio;
 exports.getSlotsMap = getSlotsMap;
 exports.getValue = getValue;
+exports.joinStyle = joinStyle;
 exports.localize = localize;
+exports.normalizeStringArray = normalizeStringArray;
 exports.omit = omit;
 exports.pick = pick;
 exports.throttle = throttle;