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

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

@@ -3,16 +3,6 @@
 
 @include set-common-var($ele);
 
-body {
-  margin: 0;
-  color: elVar('text-color', 'regular');
-  font-size: elVar('font-size', 'base');
-  font-family: elVar('font-family');
-  line-height: 1.58;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  overflow-x: hidden;
-}
-
 /* 表单组件宽度撑满 */
 .ele-fluid {
   width: 100%;
@@ -54,43 +44,90 @@ body {
 }
 
 /* 文字提示 */
-div.el-popper {
-  font-size: eleVar('tooltip', 'size');
+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');
-  padding: eleVar('tooltip', 'padding');
-  box-sizing: border-box;
 
-  &.is-dark {
-    color: eleVar('tooltip-dark', 'color');
-    background: eleVar('tooltip-dark', 'bg');
-    border: eleVar('tooltip-dark', 'border');
+  .el-popper__arrow,
+  .el-popper__arrow::before {
+    width: eleVar('tooltip', 'arrow-size');
+    height: eleVar('tooltip', 'arrow-size');
+  }
 
-    .el-popper__arrow::before {
-      background: eleVar('tooltip-dark', 'bg');
-      border: eleVar('tooltip-dark', 'border');
-    }
+  &[data-popper-placement^='top'] > .el-popper__arrow {
+    bottom: eleVar('tooltip', 'arrow-offset');
   }
 
-  &.is-danger,
-  &.is-warning,
-  &.is-success {
-    color: #fff;
+  &[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;
+    }
   }
 }
 
@@ -109,8 +146,65 @@ div.el-popper {
   }
 }
 
-/* echarts */
-.echarts > div {
-  max-width: 100%;
-  overflow: hidden;
+/* 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__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__inner {
+    width: 16px;
+    height: 16px;
+  }
+
+  &.el-checkbox--small .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;
+  }
+
+  .el-checkbox__original {
+    display: none;
+  }
 }

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

@@ -5,8 +5,8 @@
     @include set-ele-var('tooltip', $var);
   }
 
-  .el-popper.is-dark {
-    @include set-ele-var('tooltip-dark', $var);
+  .el-popper.is-light {
+    @include set-ele-var('tooltip-light', $var);
   }
 
   .el-image-viewer__wrapper {

package/es/ele-app/types/index.d.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties } from 'vue';
+import type { ElPopover, ElBreadcrumb, ElDrawer, ElInput, ElDropdown, ElMenu, ElDialog, ElTable, ElTabs, ElImage } from 'element-plus';
+/**
+ * 样式值
+ */
+export type StyleValue = string | CSSProperties;
+/**
+ * 类名单个值
+ */
+export type ClassSingleValue = string | Record<string, boolean | undefined>;
+/**
+ * 类名值
+ */
+export type ClassValue = ClassSingleValue | Array<ClassSingleValue> | null;
+/**
+ * 组件实例
+ */
+export type ElPopoverInstance = InstanceType<typeof ElPopover> | null;
+export type ElBreadcrumbInstance = InstanceType<typeof ElBreadcrumb> | null;
+export type ElDrawerInstance = InstanceType<typeof ElDrawer> | null;
+export type ElInputInstance = InstanceType<typeof ElInput> | null;
+export type ElDropdownInstance = InstanceType<typeof ElDropdown> | null;
+export type ElMenuInstance = InstanceType<typeof ElMenu> | null;
+export type ElDialogInstance = InstanceType<typeof ElDialog> | null;
+export type ElTableInstance = InstanceType<typeof ElTable> | null;
+export type ElTabsInstance = InstanceType<typeof ElTabs> | null;
+export type ElImageInstance = InstanceType<typeof ElImage> | null;

package/es/ele-avatar-group/index.d.ts

@@ -21,6 +21,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         default: boolean;
     };
     overflowPopoverProps: import("vue").PropType<Partial<import("element-plus").PopoverProps>>;
+    hoverOpen: BooleanConstructor;
 }, {
     tooltipContent: import("vue").Ref<string>;
     virtualRef: import("vue").Ref<any>;
@@ -59,6 +60,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         default: boolean;
     };
     overflowPopoverProps: import("vue").PropType<Partial<import("element-plus").PopoverProps>>;
+    hoverOpen: BooleanConstructor;
 }>> & {
     onItemClick?: ((_item: AvatarItem) => any) | undefined;
     onMoreClick?: (() => any) | undefined;
@@ -66,5 +68,6 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }, {
     tooltip: boolean;
     overflowPopover: boolean;
+    hoverOpen: boolean;
 }, {}>;
 export default _sfc_main;

package/es/ele-avatar-group/index.js

@@ -1,6 +1,6 @@
-import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, normalizeStyle, withCtx, renderSlot, mergeProps, createVNode, createElementVNode, toDisplayString, createCommentVNode } from "vue";
+import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createBlock, normalizeStyle, withCtx, renderSlot, mergeProps, createVNode, createElementVNode, toDisplayString, createCommentVNode } from "vue";
 import { ElAvatar, ElTooltip, ElPopover } from "element-plus";
-import { useLicense } from "../utils/license-util";
+import { useLicense } from "../ele-config-provider/receiver";
 import { avatarGroupProps, avatarGroupEmits } from "./props";
 const _sfc_main = defineComponent({
   name: "EleAvatarGroup",
@@ -81,9 +81,8 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1 = { class: "ele-avatar-group" };
-const _hoisted_2 = { class: "ele-avatar-more-inner" };
-const _hoisted_3 = {
+const _hoisted_1 = { class: "ele-avatar-more-inner" };
+const _hoisted_2 = {
   key: 0,
   class: "ele-avatar-group"
 };
@@ -91,7 +90,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ElAvatar = resolveComponent("ElAvatar");
   const _component_ElPopover = resolveComponent("ElPopover");
   const _component_ElTooltip = resolveComponent("ElTooltip");
-  return openBlock(), createElementBlock("div", _hoisted_1, [
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["ele-avatar-group", { "is-hover-open": _ctx.hoverOpen }])
+  }, [
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.avatarData, (item, index2) => {
       return openBlock(), createBlock(_component_ElAvatar, {
         key: index2 + "-" + item.value,
@@ -128,7 +129,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: _ctx.onMoreClick
         }, {
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2, [
+            createElementVNode("span", _hoisted_1, [
               renderSlot(_ctx.$slots, "more", {
                 overflowCount: _ctx.overflowCount,
                 overflowData: _ctx.overflowData
@@ -142,7 +143,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       default: withCtx(() => [
         renderSlot(_ctx.$slots, "overflow", { overflowData: _ctx.overflowData }, () => [
-          _ctx.overflowPopover ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          _ctx.overflowPopover ? (openBlock(), createElementBlock("div", _hoisted_2, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.overflowData, (item, index2) => {
               return openBlock(), createBlock(_component_ElAvatar, {
                 key: index2 + "-" + item.value,
@@ -170,7 +171,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       virtualRef: _ctx.virtualRef,
       virtualTriggering: true
     }), null, 16, ["content", "virtualRef"])
-  ]);
+  ], 2);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/es/ele-avatar-group/props.d.ts

@@ -25,6 +25,7 @@ export declare const avatarGroupProps: {
         default: boolean;
     };
     overflowPopoverProps: PropType<Partial<PopoverProps>>;
+    hoverOpen: BooleanConstructor;
 };
 export type AvatarGroupProps = ExtractPropTypes<typeof avatarGroupProps>;
 /**

package/es/ele-avatar-group/props.js

@@ -29,7 +29,9 @@ const avatarGroupProps = {
     default: true
   },
   // 溢出气泡属性
-  overflowPopoverProps: Object
+  overflowPopoverProps: Object,
+  // 是否鼠标移入展开
+  hoverOpen: Boolean
 };
 const avatarGroupEmits = {
   // item 点击事件

package/es/ele-avatar-group/style/index.scss

@@ -3,17 +3,25 @@
 .ele-avatar-group {
   display: inline-block;
   vertical-align: top;
+  position: relative;
   font-size: 0;
 
   .el-avatar {
     vertical-align: top;
     border: 1px solid elVar('bg-color', 'overlay');
+    transition: all 0.3s ease;
     box-sizing: content-box;
+    position: relative;
     cursor: pointer;
+    z-index: 1;
 
     &:first-child {
       margin-left: 0 !important;
     }
+
+    &:hover {
+      z-index: 2;
+    }
   }
 
   .ele-avatar-more {
@@ -29,6 +37,30 @@
     justify-content: center;
     background: rgba(245, 106, 0, 0.2);
   }
+
+  &.is-hover-open {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      transition: all 0.3s ease;
+      pointer-events: all;
+      z-index: 9999;
+    }
+
+    &:hover {
+      &::before {
+        visibility: hidden;
+      }
+
+      .el-avatar {
+        margin-left: 0 !important;
+      }
+    }
+  }
 }
 
 .ele-avatar-popover.el-popper {