ele-admin-plus 1.0.2 → 1.1.0

package/lib/ele-alert/props.d.ts

@@ -1,11 +1,11 @@
-import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
-import type { IconProps } from 'element-plus';
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { StyleValue, ElIconProps } from '../ele-app/types';
 /**
  * 属性
  */
 export declare const alertProps: {
     title: StringConstructor;
-    type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "success" | "warning" | "error" | "info", unknown>>;
+    type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "error", unknown> | undefined>;
     description: StringConstructor;
     closable: {
         type: BooleanConstructor;
@@ -14,14 +14,14 @@ export declare const alertProps: {
     center: BooleanConstructor;
     closeText: StringConstructor;
     showIcon: BooleanConstructor;
-    effect: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "light" | "dark", unknown>>;
-    iconStyle: PropType<CSSProperties>;
-    iconProps: PropType<Partial<IconProps>>;
-    closeIconStyle: PropType<CSSProperties>;
-    closeIconProps: PropType<Partial<IconProps>>;
-    bodyStyle: PropType<CSSProperties>;
-    titleStyle: PropType<CSSProperties>;
-    descriptionStyle: PropType<CSSProperties>;
+    effect: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "light" | "dark", unknown> | undefined>;
+    iconStyle: PropType<StyleValue>;
+    iconProps: PropType<ElIconProps>;
+    closeIconStyle: PropType<StyleValue>;
+    closeIconProps: PropType<ElIconProps>;
+    bodyStyle: PropType<StyleValue>;
+    titleStyle: PropType<StyleValue>;
+    descriptionStyle: PropType<StyleValue>;
     transitionName: {
         type: StringConstructor;
         default: string;

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

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

package/lib/ele-alert/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-alert-var($ele);
@@ -18,7 +19,7 @@
     flex-shrink: 0;
     color: elVar('color-primary');
     font-size: eleVar('alert', 'icon-size');
-    margin-right: 8px;
+    margin: eleVar('alert', 'icon-margin');
     display: flex;
   }
 
@@ -44,15 +45,22 @@
 
   .ele-alert-close {
     flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: eleVar('alert', 'close-size');
+    height: eleVar('alert', 'close-size');
+    line-height: eleVar('alert', 'close-size');
+    border-radius: eleVar('alert', 'close-radius');
     color: eleVar('alert', 'close-color');
-    font-size: eleVar('alert', 'close-size');
-    transition: color 0.2s;
-    margin-left: 8px;
+    font-size: eleVar('alert', 'close-font-size');
+    transition: color $ele-transition, background-color $ele-transition;
+    margin: eleVar('alert', 'close-margin');
     cursor: pointer;
-    display: flex;
 
     &:hover {
       color: eleVar('alert', 'close-hover-color');
+      background: eleVar('alert', 'close-hover-bg');
     }
   }
 
@@ -61,11 +69,11 @@
     align-items: flex-start;
     padding: eleVar('alert', 'rich-padding');
 
-    .ele-alert-icon {
+    & > .ele-alert-icon {
       font-size: eleVar('alert', 'rich-icon-size');
     }
 
-    .ele-alert-title {
+    & > .ele-alert-body > .ele-alert-title {
       color: eleVar('alert', 'title-color');
     }
   }
@@ -75,7 +83,7 @@
     background: elVar('color-success', 'light-9');
     border-color: elVar('color-success', 'light-7');
 
-    .ele-alert-icon {
+    & > .ele-alert-icon {
       color: elVar('color-success');
     }
   }
@@ -84,7 +92,7 @@
     background: elVar('color-warning', 'light-9');
     border-color: elVar('color-warning', 'light-7');
 
-    .ele-alert-icon {
+    & > .ele-alert-icon {
       color: elVar('color-warning');
     }
   }
@@ -93,7 +101,7 @@
     background: elVar('color-error', 'light-9');
     border-color: elVar('color-error', 'light-7');
 
-    .ele-alert-icon {
+    & > .ele-alert-icon {
       color: elVar('color-error');
     }
   }
@@ -102,11 +110,11 @@
   &.is-center {
     justify-content: center;
 
-    .ele-alert-body {
+    & > .ele-alert-body {
       flex: initial;
     }
 
-    .ele-alert-close {
+    & > .ele-alert-close {
       position: absolute;
       right: 12px;
       top: 50%;
@@ -116,15 +124,28 @@
 
   // 主题
   &.is-dark {
-    $hover-color: eleVar('alert-dark', 'close-hover-color');
-    #{eleVarName('alert', 'color')}: eleVar('alert-dark', 'color');
-    #{eleVarName('alert', 'title-color')}: eleVar('alert-dark', 'title-color');
-    #{eleVarName('alert', 'close-color')}: eleVar('alert-dark', 'close-color');
-    #{eleVarName('alert', 'close-hover-color')}: #{$hover-color};
     background: elVar('color-primary');
     border: none;
 
-    .ele-alert-icon {
+    & > .ele-alert-icon {
+      color: eleVar('alert-dark', 'title-color');
+    }
+
+    & > .ele-alert-body > .ele-alert-title,
+    & > .ele-alert-body > .ele-alert-text {
+      color: eleVar('alert-dark', 'color');
+    }
+
+    & > .ele-alert-close {
+      color: eleVar('alert-dark', 'close-color');
+
+      &:hover {
+        color: eleVar('alert-dark', 'close-hover-color');
+        background: eleVar('alert-dark', 'close-hover-bg');
+      }
+    }
+
+    &.is-rich > .ele-alert-body > .ele-alert-title {
       color: eleVar('alert-dark', 'title-color');
     }
 

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

@@ -1,4 +1,4 @@
-export type { ClassValue } from './types';
+export type { ComponentProps } from './types';
 declare const _default: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;

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

@@ -1,8 +1,3 @@
-@use '../../style/themes/default.scss' as *;
-@use './css-var.scss' as *;
-
-@include set-common-var($ele);
-
 /* 表单组件宽度撑满 */
 .ele-fluid {
   width: 100%;
@@ -45,174 +40,12 @@
   }
 }
 
-/* 下拉菜单 */
-.el-dropdown-menu__item:not(.is-disabled).is-active {
-  color: elVar('dropdown', 'menuItem-hover-color');
-  background-color: elVar('dropdown', 'menuItem-hover-fill');
-}
-
-/* 文字提示 */
-body .el-popper,
-body .el-popper.is-dark {
-  color: eleVar('tooltip', 'color');
-  border: eleVar('tooltip', 'border');
-  background: eleVar('tooltip', 'bg');
-
-  .el-popper__arrow::before {
-    background: eleVar('tooltip', 'arrow-bg');
-    border: eleVar('tooltip', 'border');
-  }
-}
-
-body .el-popper {
-  font-size: eleVar('tooltip', 'font-size');
-  line-height: eleVar('tooltip', 'line-height');
-  border-radius: eleVar('tooltip', 'radius');
-
-  .el-popper__arrow,
-  .el-popper__arrow::before {
-    width: eleVar('tooltip', 'arrow-size');
-    height: eleVar('tooltip', 'arrow-size');
-  }
-
-  &[data-popper-placement^='top'] > .el-popper__arrow {
-    bottom: eleVar('tooltip', 'arrow-offset');
-  }
-
-  &[data-popper-placement^='bottom'] > .el-popper__arrow {
-    top: eleVar('tooltip', 'arrow-offset');
-  }
-
-  &[data-popper-placement^='left'] > .el-popper__arrow {
-    right: eleVar('tooltip', 'arrow-offset');
-  }
-
-  &[data-popper-placement^='right'] > .el-popper__arrow {
-    left: eleVar('tooltip', 'arrow-offset');
-  }
-
-  &.is-light {
-    color: eleVar('tooltip-light', 'color');
-    background: eleVar('tooltip-light', 'bg');
-    border: eleVar('tooltip-light', 'border');
-
-    & > span:not(.el-popper__arrow) {
-      background: eleVar('tooltip-light', 'bg');
-    }
-
-    .el-popper__arrow::before {
-      background: eleVar('tooltip-light', 'arrow-bg');
-      border: eleVar('tooltip-light', 'border');
-    }
-  }
-
-  &.is-danger,
-  &.is-danger .el-popper__arrow::before {
-    background: elVar('color-danger');
-    border-color: elVar('color-danger');
-  }
-
-  &.is-warning,
-  &.is-warning .el-popper__arrow::before {
-    background: elVar('color-warning');
-    border-color: elVar('color-warning');
-  }
-
-  &.is-success,
-  &.is-success .el-popper__arrow::before {
-    background: elVar('color-success');
-    border-color: elVar('color-success');
-  }
-
-  &.is-custom {
-    padding: 0;
-
-    & > span:not(.el-popper__arrow) {
-      display: block;
-      padding: eleVar('tooltip', 'padding');
-      border-radius: eleVar('tooltip', 'radius');
-      background: eleVar('tooltip', 'bg');
-      box-sizing: border-box;
-      position: relative;
-      z-index: 2;
-    }
-  }
-}
-
-/* 图片预览 */
-.el-image-viewer__wrapper {
-  #{elVarName('text-color', 'regular')}: eleVar('image-viewer', 'tool-bg');
-}
-
-/* 下拉选择 */
-.el-select .el-select__tags .el-tag {
-  #{elVarName('tag', 'text-color')}: elVar('text-color', 'regular');
-  border-color: elVar('border-color', 'light');
-
-  .el-tag__close {
-    #{elVarName('tag', 'text-color')}: elVar('text-color', 'secondary');
-  }
-}
-
-/* radio */
-.el-radio .el-radio__inner::after {
-  width: elVar('radio', 'input-width');
-  height: elVar('radio', 'input-height');
-  margin-top: calc(0px - (elVar('radio', 'input-width') / 2));
-  margin-left: calc(0px - (elVar('radio', 'input-width') / 2));
-  transform: scale(0);
-}
-
-.el-radio .el-radio__input.is-checked .el-radio__inner::after {
-  transform: scale(0.375);
-}
-
-/* checkbox */
-.el-checkbox {
-  .el-checkbox__label {
-    line-height: 1.03;
-  }
-
-  .el-checkbox__input .el-checkbox__inner::after {
-    top: 50%;
-    left: 23.5%;
-    border-width: 2px;
-    transform: rotate(45deg) scale(0) translate(-50%, -50%);
-    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
-    margin-top: -0.5px;
-  }
-
-  .el-checkbox__input.is-checked .el-checkbox__inner::after {
-    transform: rotate(45deg) scale(1) translate(-50%, -50%);
-    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
-  }
-
-  &.el-checkbox--large .el-checkbox__input .el-checkbox__inner {
-    width: 16px;
-    height: 16px;
-  }
-
-  &.el-checkbox--small .el-checkbox__input .el-checkbox__inner {
-    width: 13px;
-    height: 13px;
-  }
-
-  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
-    width: 60%;
-    height: 2px;
-    right: auto;
-    top: 50% !important;
-    left: 50% !important;
-    transform: translateX(-50%);
-    margin-top: -1px;
-  }
-
-  .el-checkbox__input,
-  .el-checkbox__inner {
-    display: block;
-  }
+/* 隐藏滚动条 */
+.ele-scrollbar-hide,
+.ele-scrollbar-hover:not(:hover) {
+  scrollbar-width: none;
 
-  .el-checkbox__original {
+  &::-webkit-scrollbar {
     display: none;
   }
 }

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

@@ -1,29 +1,87 @@
-@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
-@mixin set-common-var($var) {
+/* 滚动条 */
+@mixin set-scrollbar-var($var) {
+  @include set-ele-var('scrollbar', $var);
+}
+
+/* 消息提示 */
+@mixin set-message-var($var) {
+  .ele-message {
+    @include set-ele-var('message', $var);
+  }
+
+  .ele-message-mask {
+    @include set-ele-var('message-mask', $var);
+  }
+}
+
+/* 样式重写 */
+@mixin set-overwrite-var($var) {
+  // Popper
   .el-popper {
+    @include set-ele-var('popper', $var);
+  }
+
+  // Tooltip
+  .el-popper.is-dark {
     @include set-ele-var('tooltip', $var);
   }
 
-  .el-popper.is-light {
-    @include set-ele-var('tooltip-light', $var);
+  // Select
+  .el-select__popper {
+    @include set-ele-var('select', $var);
+  }
+
+  // Autocomplete
+  .el-autocomplete__popper {
+    @include set-ele-var('autocomplete', $var);
+  }
+
+  // Cascader
+  .el-cascader__dropdown {
+    @include set-ele-var('cascader', $var);
+  }
+
+  // TableFilter
+  .el-table-filter {
+    @include set-ele-var('table-filter', $var);
+  }
+
+  // MessageBox
+  .el-message-box {
+    @include set-ele-var('message-box', $var);
+  }
+
+  // Radio
+  .el-radio {
+    @include set-ele-var('radio', $var);
+  }
+
+  // Checkbox
+  .el-checkbox {
+    @include set-ele-var('checkbox', $var);
   }
 
+  // ImageViewer
   .el-image-viewer__wrapper {
     @include set-ele-var('image-viewer', $var);
   }
-}
 
-@mixin set-message-var($var) {
-  .ele-message {
-    @include set-ele-var('message-plain', $var);
+  // Descriptions
+  .el-descriptions {
+    @include set-ele-var('descriptions', $var);
   }
 
-  .ele-message-mask {
-    @include set-ele-var('message-mask', $var);
+  // Datepicker
+  .el-date-picker,
+  .el-date-range-picker {
+    @include set-ele-var('datepicker', $var);
   }
-}
 
-@mixin set-scrollbar-var($var) {
-  @include set-ele-var('scrollbar', $var);
+  // Timepicker
+  .el-time-panel,
+  .el-time-range-picker {
+    @include set-ele-var('timepicker', $var);
+  }
 }

package/lib/ele-app/style/index.js

@@ -1,6 +1,7 @@
 "use strict";
 require("element-plus/es/components/message-box/style/index");
 require("element-plus/es/components/notification/style/index");
+require("./overwrite");
 require("./scrollbar");
 require("./common");
 require("./message");

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

@@ -1,3 +1,4 @@
+@use './overwrite.scss';
 @use './scrollbar.scss';
 @use './common.scss';
 @use './message.scss';

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

@@ -1,27 +1,49 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 @use './css-var.scss' as *;
 
 @include set-message-var($ele);
 
 /* 消息提示 */
 .ele-message.el-message {
-  box-shadow: eleVar('message-plain', 'shadow');
+  padding: eleVar('message', 'padding');
+  border-radius: eleVar('message', 'radius');
+  box-shadow: eleVar('message', 'shadow');
   border: none;
 
   .el-message__content {
-    color: eleVar('message-plain', 'color');
+    color: eleVar('message', 'color');
+    font-size: eleVar('message', 'size');
+    box-sizing: border-box;
   }
 
   .el-message__icon {
-    font-size: elVar('font-size', 'large');
+    font-size: eleVar('message', 'icon-size');
+    margin: eleVar('message', 'icon-margin');
   }
 
   .el-message__closeBtn {
-    right: 14px;
+    width: eleVar('message', 'close-size');
+    height: eleVar('message', 'close-size');
+    line-height: eleVar('message', 'close-size');
+    color: eleVar('message', 'close-color');
+    font-size: eleVar('message', 'close-font-size');
+    margin: eleVar('message', 'close-margin');
+    border-radius: eleVar('message', 'close-radius');
+    transition: color $ele-transition, background-color $ele-transition;
+    position: static;
+    top: auto;
+    right: auto;
+    transform: none;
+
+    &:hover {
+      color: eleVar('message', 'close-hover-color');
+      background: eleVar('message', 'close-hover-bg');
+    }
   }
 
   &.is-closable .el-message__content {
-    padding-right: 24px;
+    padding-right: 0;
   }
 
   &.el-message--info {
@@ -32,7 +54,7 @@
 
   // 简约风格
   &.is-plain {
-    #{elVarName('message', 'bg-color')}: eleVar('message-plain', 'bg');
+    #{elVarName('message', 'bg-color')}: eleVar('message', 'plain-bg');
   }
 
   // 加载框
@@ -43,7 +65,7 @@
 
     // 简约风格
     &.is-plain {
-      #{elVarName('message', 'bg-color')}: eleVar('message-plain', 'bg');
+      #{elVarName('message', 'bg-color')}: eleVar('message', 'plain-bg');
     }
   }
 }
@@ -87,7 +109,7 @@
 
   // 遮罩
   &.ele-message-mask {
-    box-shadow: eleVar('message-plain', 'shadow'),
+    box-shadow: eleVar('message', 'shadow'),
       0 0 0 eleVar('message-mask', 'size') eleVar('message-mask', 'color');
   }
 

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

@@ -0,0 +1,2 @@
+"use strict";
+require("./overwrite.scss");