ele-admin-plus 1.0.0-beta.2 → 1.0.0-beta.4

package/es/ele-segmented/props.js

@@ -0,0 +1,25 @@
+const segmentedProps = {
+  // 选中的值
+  modelValue: [String, Number],
+  // 将宽度调整为父元素宽度
+  block: Boolean,
+  // 是否禁用
+  disabled: Boolean,
+  // 数据
+  items: {
+    type: Array,
+    required: true
+  },
+  // 尺寸
+  size: String
+};
+const segmentedEmits = {
+  // 更新绑定值
+  "update:modelValue": (_value) => true,
+  // 选中改变的事件
+  change: (_active) => true
+};
+export {
+  segmentedEmits,
+  segmentedProps
+};

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

@@ -0,0 +1,15 @@
+@use '../../style/themes/default.scss' as *;
+
+@mixin set-segmented-var($var) {
+  .ele-segmented {
+    @include set-ele-var('segmented', $var);
+  }
+
+  .ele-segmented.is-large {
+    @include set-ele-var('segmented-large', $var);
+  }
+
+  .ele-segmented.is-small {
+    @include set-ele-var('segmented-small', $var);
+  }
+}

package/es/ele-segmented/style/index.js

@@ -0,0 +1,4 @@
+import 'element-plus/es/components/tabs/style/index';
+import 'element-plus/es/components/tab-pane/style/index';
+import 'element-plus/es/components/icon/style/index';
+import './index.scss';

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

@@ -0,0 +1,102 @@
+@use '../../style/themes/default.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-segmented-var($ele);
+
+.ele-segmented.el-tabs {
+  .el-tabs__nav-wrap,
+  .el-tabs__nav-scroll {
+    margin: 0;
+    overflow: visible;
+  }
+
+  .el-tabs__nav {
+    float: none;
+  }
+
+  .el-tabs__nav-wrap::after,
+  .el-tabs__content {
+    display: none;
+  }
+
+  // 背景
+  .el-tabs__header {
+    margin: 0;
+    box-sizing: border-box;
+    background: eleVar('segmented', 'bg');
+    border-radius: eleVar('segmented', 'radius');
+    padding: eleVar('segmented', 'padding');
+  }
+
+  // item
+  .el-tabs__item {
+    color: eleVar('segmented', 'color');
+    height: eleVar('segmented', 'height');
+    line-height: eleVar('segmented', 'height');
+    font-size: eleVar('segmented', 'font-size');
+    border-radius: eleVar('segmented', 'radius');
+    padding: 0 eleVar('segmented', 'item-padding') !important;
+    transition: color 0.2s, background-color 0.2s;
+    background: none;
+    z-index: 2;
+
+    &:not(.is-disabled):hover {
+      color: eleVar('segmented', 'active-color');
+      background: eleVar('segmented', 'hover-bg');
+    }
+
+    &:not(.is-disabled).is-active {
+      color: eleVar('segmented', 'active-color');
+      background: none;
+    }
+
+    &.is-disabled {
+      color: eleVar('segmented', 'disabled-color');
+    }
+
+    .ele-segmented-item-icon + .ele-segmented-item-label {
+      margin-left: 6px;
+    }
+  }
+
+  // 选中背景
+  .el-tabs__active-bar {
+    $item-padding: eleVar('segmented', 'item-padding');
+    padding: 0 $item-padding;
+    margin-left: calc(0px - #{$item-padding});
+    background: eleVar('segmented', 'active-bg');
+    border-radius: eleVar('segmented', 'radius');
+    box-shadow: eleVar('segmented', 'active-shadow');
+    transform: translateX(#{$item-padding});
+    box-sizing: content-box;
+    height: auto;
+    bottom: 0;
+    top: 0;
+  }
+
+  // 宽度撑满
+  &:not(.is-block) .el-tabs__header {
+    display: inline-block;
+  }
+
+  // 尺寸控制
+  &.is-large {
+    $font-size: eleVar('segmented-large', 'font-size');
+    $item-padding: eleVar('segmented-large', 'item-padding');
+    #{eleVarName('segmented', 'padding')}: eleVar('segmented-large', 'padding');
+    #{eleVarName('segmented', 'radius')}: eleVar('segmented-large', 'radius');
+    #{eleVarName('segmented', 'height')}: eleVar('segmented-large', 'height');
+    #{eleVarName('segmented', 'font-size')}: #{$font-size};
+    #{eleVarName('segmented', 'item-padding')}: #{$item-padding};
+  }
+
+  &.is-small {
+    $font-size: eleVar('segmented-small', 'font-size');
+    $item-padding: eleVar('segmented-small', 'item-padding');
+    #{eleVarName('segmented', 'padding')}: eleVar('segmented-small', 'padding');
+    #{eleVarName('segmented', 'radius')}: eleVar('segmented-small', 'radius');
+    #{eleVarName('segmented', 'height')}: eleVar('segmented-small', 'height');
+    #{eleVarName('segmented', 'font-size')}: #{$font-size};
+    #{eleVarName('segmented', 'item-padding')}: #{$item-padding};
+  }
+}

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

@@ -0,0 +1,25 @@
+import type { Component, CSSProperties } from 'vue';
+import type { IconProps } from 'element-plus';
+/**
+ * 尺寸
+ */
+export type SegmentedSize = 'large' | 'default' | 'small';
+/**
+ * 数据
+ */
+export interface SegmentedItem {
+    /** 标题 */
+    label: string;
+    /** 值 */
+    value: string | number;
+    /** 图标 */
+    icon?: string | Component;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 自定义图标属性 */
+    iconProps?: Partial<IconProps>;
+    /** 自定义图标样式 */
+    iconStyle?: CSSProperties;
+}

package/es/ele-split-panel/index.d.ts

@@ -1,13 +1,12 @@
-import type { CSSProperties } from 'vue';
 declare const _sfc_main: import("vue").DefineComponent<{
     size: StringConstructor;
     minSize: NumberConstructor;
     maxSize: NumberConstructor;
     space: StringConstructor;
-    customStyle: import("vue").PropType<CSSProperties>;
-    bodyStyle: import("vue").PropType<CSSProperties>;
+    customStyle: import("vue").PropType<import("vue").CSSProperties>;
+    bodyStyle: import("vue").PropType<import("vue").CSSProperties>;
     allowCollapse: BooleanConstructor;
-    collapseStyle: import("vue").PropType<CSSProperties>;
+    collapseStyle: import("vue").PropType<import("vue").CSSProperties>;
     collapse: BooleanConstructor;
     vertical: BooleanConstructor;
     reverse: BooleanConstructor;
@@ -23,8 +22,8 @@ declare const _sfc_main: import("vue").DefineComponent<{
     sideRef: import("vue").Ref<HTMLElement | null>;
     isResponsive: import("vue").ComputedRef<boolean>;
     isCollapse: import("vue").Ref<boolean>;
+    resizedSize: import("vue").Ref<string | null>;
     resizing: import("vue").Ref<boolean>;
-    rootStyle: import("vue").ComputedRef<CSSProperties>;
     toggleCollapse: (collapse?: boolean) => void;
     onResize: (event: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -34,10 +33,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
     minSize: NumberConstructor;
     maxSize: NumberConstructor;
     space: StringConstructor;
-    customStyle: import("vue").PropType<CSSProperties>;
-    bodyStyle: import("vue").PropType<CSSProperties>;
+    customStyle: import("vue").PropType<import("vue").CSSProperties>;
+    bodyStyle: import("vue").PropType<import("vue").CSSProperties>;
     allowCollapse: BooleanConstructor;
-    collapseStyle: import("vue").PropType<CSSProperties>;
+    collapseStyle: import("vue").PropType<import("vue").CSSProperties>;
     collapse: BooleanConstructor;
     vertical: BooleanConstructor;
     reverse: BooleanConstructor;

package/es/ele-split-panel/index.js

@@ -1,8 +1,7 @@
-import { defineComponent, ref, computed, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createCommentVNode, createVNode, withCtx, createBlock } from "vue";
+import { defineComponent, ref, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createCommentVNode, createVNode, withCtx, createBlock } from "vue";
 import { ElIcon } from "element-plus";
-import { ArrowLeft, ArrowUp } from "@element-plus/icons-vue";
-import { useLicense, UNAUTHORIZED_TIP } from "../utils/license-util";
-import { useResponsive } from "../ele-config-provider/use-receiver";
+import { useLicense, useResponsive } from "../ele-config-provider/receiver";
+import { ArrowLeft, ArrowUp } from "../icons";
 import { splitPanelProps, splitPanelEmits } from "./props";
 const _sfc_main = defineComponent({
   name: "EleSplitPanel",
@@ -18,15 +17,8 @@ const _sfc_main = defineComponent({
     const isCollapse = ref(false);
     const resizedSize = ref(null);
     const resizing = ref(false);
-    const rootStyle = computed(() => {
-      return {
-        "--ele-split-size": resizedSize.value ?? props.size,
-        "--ele-split-space": props.space
-      };
-    });
     const toggleCollapse = (collapse) => {
       if (!authenticated.value) {
-        console.warn(UNAUTHORIZED_TIP);
         return;
       }
       isCollapse.value = typeof collapse === "boolean" ? collapse : !isCollapse.value;
@@ -86,8 +78,8 @@ const _sfc_main = defineComponent({
       sideRef,
       isResponsive,
       isCollapse,
+      resizedSize,
       resizing,
-      rootStyle,
       toggleCollapse,
       onResize
     };
@@ -120,7 +112,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       { "is-responsive": _ctx.isResponsive },
       { "is-flex-table": _ctx.flexTable }
     ]),
-    style: normalizeStyle(_ctx.rootStyle)
+    style: normalizeStyle({
+      "--ele-split-size": _ctx.resizedSize ?? _ctx.size,
+      "--ele-split-space": _ctx.space
+    })
   }, [
     createElementVNode("div", _hoisted_1, [
       createElementVNode("div", {

package/es/ele-split-panel/style/index.scss

@@ -39,7 +39,7 @@
         position: absolute;
         left: -6px;
         z-index: 4;
-        cursor: col-resize;
+        cursor: e-resize;
 
         &::after {
           content: '';
@@ -66,30 +66,33 @@
 
   // 折叠按钮
   & > .ele-split-collapse-button {
-    width: 14px;
-    height: 48px;
-    line-height: 48px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
     text-align: center;
     position: absolute;
     left: var(--ele-split-size);
     top: 50%;
-    margin-top: -24px;
-    border-radius: 0 4px 4px 0;
-    background: elVar('border-color', 'extra-light');
+    margin: -12px 0 0 -12px;
+    background: elVar('bg-color', 'overlay');
+    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.04);
+    border: 1px solid elVar('border-color', 'extra-light');
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: 50%;
     cursor: pointer;
-    z-index: 3;
-
-    &:hover {
-      background: elVar('border-color', 'light');
-    }
+    z-index: 5;
 
     .ele-split-collapse-icon {
-      font-size: 14px;
+      font-size: 18px;
+      vertical-align: -4px;
       color: elVar('text-color', 'secondary');
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       transform: scaleX(1);
     }
+
+    &:hover .ele-split-collapse-icon {
+      color: elVar('text-color', 'primary');
+    }
   }
 
   // 折叠状态
@@ -132,7 +135,7 @@
           height: 12px;
           left: auto;
           top: -6px;
-          cursor: row-resize;
+          cursor: n-resize;
 
           &::after {
             width: 100%;
@@ -144,14 +147,8 @@
     }
 
     & > .ele-split-collapse-button {
-      width: 48px;
-      height: 14px;
-      line-height: 14px;
       top: var(--ele-split-size);
       left: 50%;
-      margin-left: -24px;
-      margin-top: 0;
-      border-radius: 0 0 4px 4px;
 
       .ele-split-collapse-icon {
         transform: scaleY(1);
@@ -190,7 +187,7 @@
     & > .ele-split-collapse-button {
       left: auto;
       right: var(--ele-split-size);
-      border-radius: 4px 0 0 4px;
+      margin: -12px -12px 0 0;
 
       .ele-split-collapse-icon {
         transform: scaleX(-1);
@@ -222,7 +219,7 @@
         left: 50%;
         top: auto;
         bottom: var(--ele-split-size);
-        border-radius: 4px 4px 0 0;
+        margin: 0 0 -12px -12px;
 
         .ele-split-collapse-icon {
           transform: scaleY(-1);
@@ -257,7 +254,8 @@
     right: 0;
     bottom: 0;
     opacity: 0;
-    background: elVar('overlay-color', 'lighter');
+    backdrop-filter: blur(6px);
+    background: rgba(158, 158, 158, 0.2);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     pointer-events: none;
     display: none;
@@ -292,7 +290,9 @@
 /* 小屏幕样式 */
 @media screen and (max-width: 768px) {
   .ele-split-panel.is-responsive:not(.is-vertical) {
-    overflow: hidden;
+    &:not(.is-collapse) {
+      overflow: hidden !important;
+    }
 
     & > .ele-split-panel-wrap {
       position: absolute;
@@ -301,7 +301,8 @@
       bottom: 0;
 
       & > .ele-split-panel-side {
-        background: elVar('bg-color');
+        background: elVar('bg-color', 'overlay');
+        border: none;
         z-index: 3;
       }
     }

package/es/ele-steps/index.d.ts

@@ -21,7 +21,19 @@ declare const _sfc_main: import("vue").DefineComponent<{
     };
     finishStatus: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "success" | "error" | "wait" | "finish" | "process", unknown, "finish", boolean>;
     processStatus: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "success" | "error" | "wait" | "finish" | "process", unknown, "process", boolean>;
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    rootProps: import("vue").ComputedRef<Omit<import("@vue/shared").LooseRequired<{
+        readonly space: import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>;
+        readonly active: number;
+        readonly direction: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "horizontal" | "vertical", unknown>;
+        readonly finishStatus: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "success" | "error" | "wait" | "finish" | "process", unknown>;
+        readonly processStatus: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "success" | "error" | "wait" | "finish" | "process", unknown>;
+        readonly type?: import("./types").StepType | undefined;
+        readonly items?: import("./types").StepItem[] | undefined;
+        readonly alignCenter?: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown> | undefined;
+        readonly simple?: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown> | undefined;
+    } & {}>, "type" | "items">>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: import("vue").PropType<import("./types").StepItem[]>;
         required: boolean;

package/es/ele-steps/index.js

@@ -1,10 +1,17 @@
-import { defineComponent, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createElementBlock, Fragment, renderList, mergeProps, renderSlot } from "vue";
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementBlock, Fragment, renderList, renderSlot } from "vue";
 import { ElSteps, ElStep } from "element-plus";
+import { omit } from "../utils/core";
 import { stepsProps } from "./props";
 const _sfc_main = defineComponent({
   name: "EleSteps",
   components: { ElSteps, ElStep },
-  props: stepsProps
+  props: stepsProps,
+  setup(props) {
+    const rootProps = computed(() => {
+      return omit(props, ["items", "type"]);
+    });
+    return { rootProps };
+  }
 });
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -16,21 +23,14 @@ const _export_sfc = (sfc, props) => {
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ElStep = resolveComponent("ElStep");
   const _component_ElSteps = resolveComponent("ElSteps");
-  return openBlock(), createBlock(_component_ElSteps, {
-    space: _ctx.space,
-    direction: _ctx.direction,
-    active: _ctx.active,
-    processStatus: _ctx.processStatus,
-    finishStatus: _ctx.finishStatus,
-    "align-center": _ctx.alignCenter,
-    simple: _ctx.simple,
-    class: normalizeClass(["ele-steps", { "is-inline": _ctx.type === "inline" }])
-  }, {
+  return openBlock(), createBlock(_component_ElSteps, mergeProps(_ctx.rootProps, {
+    class: ["ele-steps", { "is-inline": _ctx.type === "inline" }]
+  }), {
     default: withCtx(() => [
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index2) => {
         return openBlock(), createBlock(_component_ElStep, mergeProps({ key: index2 }, item), {
           default: withCtx(() => [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(Object.keys(_ctx.$slots), (name) => {
+            (openBlock(true), createElementBlock(Fragment, null, renderList(Object.keys(_ctx.$slots).filter((k) => "default" !== k), (name) => {
               return renderSlot(_ctx.$slots, name, {
                 index: index2,
                 item
@@ -42,7 +42,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }), 128))
     ]),
     _: 3
-  }, 8, ["space", "direction", "active", "processStatus", "finishStatus", "align-center", "simple", "class"]);
+  }, 16, ["class"]);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

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

@@ -18,6 +18,7 @@
     font-size: 16px;
     border-width: 1px;
     border-color: elVar('border-color');
+    background: elVar('bg-color', 'overlay');
   }
 
   .el-step__icon-inner,
@@ -66,12 +67,13 @@
     }
   }
 
+  // 垂直
   &.is-vertical {
     .el-step__line {
       width: 0;
       top: 40px;
-      bottom: 8px;
       left: 16px;
+      bottom: 8px;
       border-top: none;
       border-bottom: none;
       border-right: none;
@@ -82,17 +84,30 @@
     }
   }
 
-  &.is-horizontal .el-step__line {
-    height: 0;
-    top: 16px;
-    left: 40px;
-    right: 8px;
-    border-top: none;
-    border-left: none;
-    border-right: none;
+  // 水平
+  &.is-horizontal {
+    .el-step__line {
+      height: 0;
+      top: 16px;
+      border-top: none;
+      border-left: none;
+      border-right: none;
+    }
+
+    &:not(.is-center) .el-step__line {
+      left: 40px;
+      right: 8px;
+    }
+
+    // 居中
+    &.is-center .el-step__line {
+      left: calc(50% + 24px);
+      right: calc(-50% + 24px);
+    }
   }
 }
 
+/* 紧凑风格 */
 .ele-steps.is-inline .el-step.is-horizontal {
   display: flex;
 

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

@@ -21,6 +21,7 @@
 
   th,
   td {
+    color: eleVar('table', 'color');
     font-size: eleVar('table', 'font-szie');
     font-weight: normal;
     line-height: eleVar('table', 'line-height');

package/es/ele-table-select/index.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, onMounted, watch, nextTick, resolveComponent, openBlock, createBlock, createSlots, withCtx, createVNode, mergeProps, renderList, renderSlot, normalizeProps, guardReactiveProps } from "vue";
-import { useResponsive } from "../ele-config-provider/use-receiver";
+import { useResponsive } from "../ele-config-provider/receiver";
 import EleBasicSelect from "../ele-basic-select/index";
 import EleProTable from "../ele-pro-table/index";
 import { tableSelectProps, tableSelectEmits } from "./props";

package/es/ele-table-select/types/index.d.ts

@@ -1,3 +1,5 @@
+import type EleProTable from "../ele-pro-table/index";
+import type EleBasicSelect from "../ele-basic-select/index";
 /**
  * 单选 initValue
  */
@@ -10,3 +12,8 @@ export type MultipleInitValue = Array<SingleInitValue>;
  * initValue
  */
 export type InitValue = SingleInitValue | MultipleInitValue | undefined | null;
+/**
+ * 组件实例
+ */
+export type EleProTableInstance = InstanceType<typeof EleProTable> | null;
+export type EleBasicSelectInstance = InstanceType<typeof EleBasicSelect> | null;

package/es/ele-tabs/components/tab-title.d.ts

@@ -1,5 +1,6 @@
 import type { PropType } from 'vue';
-import type { TabPaneItem, TabEventOption, DropdownInstance } from '../types';
+import type { ElDropdownInstance } from '../../ele-app/types';
+import type { TabPaneItem, TabEventOption } from '../types';
 declare const _sfc_main: import("vue").DefineComponent<{
     active: (StringConstructor | NumberConstructor)[];
     tabName: (StringConstructor | NumberConstructor)[];
@@ -8,14 +9,14 @@ declare const _sfc_main: import("vue").DefineComponent<{
     contextMenu: BooleanConstructor;
     handleClick: BooleanConstructor;
 }, {
-    dropdownRef: import("vue").Ref<DropdownInstance>;
+    dropdownRef: import("vue").Ref<ElDropdownInstance>;
     onContextMenu: (command: string) => void;
     onContextVisible: (visible: boolean) => void;
     onClick: (e: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     itemClick: (_opt: TabEventOption) => true;
     contextMenu: (_option: TabEventOption) => true;
-    contextOpen: (_ref: DropdownInstance) => true;
+    contextOpen: (_ref: ElDropdownInstance) => true;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     active: (StringConstructor | NumberConstructor)[];
     tabName: (StringConstructor | NumberConstructor)[];
@@ -26,7 +27,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }>> & {
     onItemClick?: ((_opt: TabEventOption) => any) | undefined;
     onContextMenu?: ((_option: TabEventOption) => any) | undefined;
-    onContextOpen?: ((_ref: DropdownInstance) => any) | undefined;
+    onContextOpen?: ((_ref: ElDropdownInstance) => any) | undefined;
 }, {
     contextMenu: boolean;
     handleClick: boolean;