ele-admin-plus 1.0.2 → 1.1.0

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

@@ -1,135 +1,203 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-step-var($ele);
 
 .ele-steps .el-step {
+  .el-step__head {
+    width: auto;
+    position: static;
+    display: flex;
+  }
+
+  .el-step__main {
+    padding: eleVar('step', 'margin') 0 0 0;
+    box-sizing: border-box;
+  }
+
+  // 线条
   .el-step__line {
     background: none;
-    border-width: 1px;
     border-style: solid;
-    border-color: elVar('border-color', 'lighter');
+    border-width: eleVar('step', 'line-size');
+    border-color: eleVar('step', 'line-color');
+    transition: border-color $ele-transition;
   }
 
   .el-step__line-inner {
     display: none;
   }
 
-  .el-step__icon.is-text {
-    width: 32px;
-    height: 32px;
-    font-size: 16px;
-    border-width: 1px;
-    border-color: elVar('border-color');
-    background: elVar('bg-color', 'overlay');
-  }
+  // 图标
+  .el-step__icon {
+    width: auto;
+    height: auto;
+    display: flex;
+    color: eleVar('step', 'color');
+    font-size: eleVar('step', 'icon-size');
+    transition: color $ele-transition, border-color $ele-transition,
+      background-color $ele-transition;
+
+    &.is-text {
+      width: eleVar('step', 'icon-size');
+      height: eleVar('step', 'icon-size');
+      line-height: eleVar('step', 'icon-size');
+      font-size: eleVar('step', 'icon-font-size');
+      font-weight: eleVar('step', 'icon-font-weight');
+      background: eleVar('step', 'icon-bg');
+      border: eleVar('step', 'icon-border');
+    }
 
-  .el-step__icon-inner,
-  .el-step__title.is-process {
-    font-weight: 500;
+    .el-step__icon-inner {
+      font-size: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      transform: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
+  // 标题
   .el-step__title {
-    line-height: 32px;
+    color: eleVar('step', 'color');
+    font-size: eleVar('step', 'font-size');
+    font-weight: eleVar('step', 'font-weight');
+    line-height: eleVar('step', 'line-height');
+    padding: 0;
   }
 
+  // 描述
   .el-step__description {
-    font-size: 14px;
-    line-height: 22px;
-    margin: 0;
+    color: eleVar('step', 'text-color');
+    font-size: eleVar('step', 'text-font-size');
+    line-height: eleVar('step', 'text-line-height');
+    margin: eleVar('step', 'text-margin') 0 0 0;
+    padding: 0;
   }
 
-  .el-step__title.is-finish,
-  .el-step__description.is-finish,
-  .el-step__title.is-success,
-  .el-step__description.is-success {
-    color: elVar('text-color', 'primary');
+  // 当前步骤
+  .el-step__head.is-process {
+    .el-step__icon {
+      color: eleVar('step', 'active-icon-bg');
+
+      &.is-text {
+        color: eleVar('step', 'active-icon-color');
+        background: eleVar('step', 'active-icon-bg');
+        border: eleVar('step', 'active-icon-border');
+      }
+    }
   }
 
-  .el-step__head {
-    &.is-process .el-step__icon.is-text {
-      color: #fff;
-      background: elVar('color-primary');
-      border-color: elVar('color-primary');
+  .el-step__title.is-process {
+    color: eleVar('step', 'active-color');
+  }
+
+  .el-step__description.is-process {
+    color: eleVar('step', 'active-text-color');
+  }
+
+  // 完成步骤
+  .el-step__head.is-finish,
+  .el-step__head.is-success {
+    .el-step__line {
+      border-color: eleVar('step', 'finish-line-color');
     }
 
-    &.is-finish,
-    &.is-success {
-      .el-step__icon.is-text {
-        color: elVar('color-primary');
-        border-color: elVar('color-primary');
-      }
+    .el-step__icon {
+      color: eleVar('step', 'finish-icon-color');
 
-      .el-step__line {
-        border-color: elVar('color-primary');
+      &.is-text {
+        background: eleVar('step', 'finish-icon-bg');
+        border: eleVar('step', 'finish-icon-border');
       }
-    }
 
-    &.is-error .el-step__icon.is-text {
-      border-color: elVar('color-danger');
+      .el-step__icon-inner.is-status {
+        font-size: eleVar('step', 'finish-icon-font-size');
+      }
     }
   }
 
-  // 垂直
-  &.is-vertical {
-    .el-step__line {
-      width: 0;
-      top: 40px;
-      left: 16px;
-      bottom: 8px;
-      border-top: none;
-      border-bottom: none;
-      border-right: none;
-    }
+  .el-step__title.is-finish,
+  .el-step__title.is-success {
+    color: eleVar('step', 'finish-color');
+  }
 
-    .el-step__head {
-      width: 32px;
-    }
+  .el-step__description.is-finish,
+  .el-step__description.is-success {
+    color: eleVar('step', 'finish-text-color');
   }
 
   // 水平
   &.is-horizontal {
+    $space: eleVar('step', 'line-space');
+    $icon-size: eleVar('step', 'icon-size');
+
     .el-step__line {
-      height: 0;
-      top: 16px;
+      top: calc((#{$icon-size} - #{eleVar('step', 'line-size')}) / 2);
+      left: calc(#{$icon-size} + #{$space});
+      right: $space;
       border-top: none;
       border-left: none;
       border-right: none;
+      height: 0;
+    }
+
+    &.is-center {
+      .el-step__line {
+        left: calc(50% + #{$space} + (#{$icon-size} / 2));
+        right: calc(-50% + #{$space} + (#{$icon-size} / 2));
+      }
+
+      .el-step__head {
+        justify-content: center;
+      }
     }
+  }
 
-    &:not(.is-center) .el-step__line {
-      left: 40px;
-      right: 8px;
+  // 垂直
+  &.is-vertical {
+    $space: eleVar('step', 'line-space');
+    $icon-size: eleVar('step', 'icon-size');
+
+    .el-step__line {
+      left: calc((#{$icon-size} - #{eleVar('step', 'line-size')}) / 2);
+      top: calc(#{$icon-size} + #{$space});
+      bottom: $space;
+      border-right: none;
+      border-top: none;
+      border-bottom: none;
+      width: 0;
     }
 
-    // 居中
-    &.is-center .el-step__line {
-      left: calc(50% + 24px);
-      right: calc(-50% + 24px);
+    .el-step__main {
+      padding: 0 0 0 eleVar('step', 'vertical-margin');
     }
   }
 }
 
 /* 紧凑风格 */
-.ele-steps.is-inline .el-step.is-horizontal {
+.ele-steps.is-inline .el-step {
   display: flex;
-
-  .el-step__head {
-    width: auto;
-    position: static;
-  }
+  align-items: flex-start;
 
   .el-step__main {
     flex-grow: 1;
-    position: relative;
+    padding: 0;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 
     .el-step__title {
-      padding: 0 16px 0 8px;
-      background: elVar('bg-color', 'overlay');
+      padding: 0 eleVar('step', 'line-space') 0 eleVar('step', 'margin');
+      background: eleVar('step', 'bg');
+      position: relative;
     }
 
     .el-step__description {
-      padding: 0 16px 0 8px;
+      padding: 0 eleVar('step', 'margin');
     }
   }
 }

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

@@ -1,8 +1,9 @@
-import type { StepProps } from 'element-plus';
+import type { ElStepProps } from '../../ele-app/types';
 /**
  * 步骤条数据
  */
-export interface StepItem extends Partial<StepProps> {
+export interface StepItem extends ElStepProps {
+    /** 循环的 key */
     key?: string | number | symbol;
 }
 /**

package/lib/ele-tab-tool/index.d.ts

@@ -1,4 +1,4 @@
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     tab: BooleanConstructor;
     active: BooleanConstructor;
 }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -8,4 +8,4 @@ declare const _sfc_main: import("vue").DefineComponent<{
     tab: boolean;
     active: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/lib/ele-tab-wrap/index.d.ts

@@ -1,8 +1,8 @@
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     size: import("vue").PropType<import("../ele-tabs/types").TabSize>;
     type: import("vue").PropType<import("../ele-tabs/types").TabType>;
 }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: import("vue").PropType<import("../ele-tabs/types").TabSize>;
     type: import("vue").PropType<import("../ele-tabs/types").TabType>;
 }>>, {}, {}>;
-export default _sfc_main;
+export default _default;

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

@@ -1,4 +1,4 @@
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     stripe: BooleanConstructor;
     border: BooleanConstructor;
     size: import("vue").PropType<"" | "default" | "small" | "large" | undefined>;
@@ -10,4 +10,4 @@ declare const _sfc_main: import("vue").DefineComponent<{
     stripe: boolean;
     border: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

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

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

package/lib/ele-table/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-table-var($ele);
@@ -7,77 +8,149 @@
 .ele-table {
   width: 100%;
   border-spacing: 0;
-  border-collapse: collapse;
+  border-collapse: separate;
   background: eleVar('table', 'bg');
+  border-top-left-radius: eleVar('table', 'radius');
+  border-top-right-radius: eleVar('table', 'radius');
 
-  tr {
-    background: eleVar('table', 'tr-bg');
-    transition: background-color 0.25s ease;
+  & > tr,
+  & > thead > tr,
+  & > tbody > tr {
+    & > th,
+    & > td {
+      color: eleVar('table', 'color');
+      font-size: eleVar('table', 'font-szie');
+      font-weight: normal;
+      line-height: eleVar('table', 'line-height');
+      padding: eleVar('table', 'padding');
+      transition: background-color $ele-transition;
+      border-width: 0;
+      border-style: solid;
+      border-color: eleVar('table', 'border-color');
+      border-bottom-width: 1px;
+      vertical-align: middle;
+      text-align: left;
+    }
 
-    &:hover {
-      background: eleVar('table', 'tr-hover-bg');
+    & > td {
+      background: eleVar('table', 'tr-bg');
     }
-  }
 
-  th,
-  td {
-    color: eleVar('table', 'color');
-    font-size: eleVar('table', 'font-szie');
-    font-weight: normal;
-    line-height: eleVar('table', 'line-height');
-    padding: eleVar('table', 'padding');
-    border-width: 0;
-    border-style: solid;
-    border-color: eleVar('table', 'border-color');
-    border-bottom-width: 1px;
-    vertical-align: middle;
-    text-align: left;
+    &:hover > td {
+      background: eleVar('table', 'tr-hover-bg');
+    }
   }
 
-  th,
-  thead td {
+  & > tr > th,
+  & > thead > tr > th,
+  & > tbody > tr > th,
+  & > thead > tr > td {
     color: eleVar('table', 'th-color');
     font-weight: eleVar('table', 'th-font-weight');
     background: eleVar('table', 'th-bg');
   }
 
+  & > thead > tr:first-child > th:first-child,
+  & > thead > tr:first-child > td:first-child {
+    border-top-left-radius: eleVar('table', 'radius');
+  }
+
+  & > thead > tr:first-child > th:last-child,
+  & > thead > tr:first-child > td:last-child {
+    border-top-right-radius: eleVar('table', 'radius');
+  }
+
   // 斑马纹
   &.is-stripe {
     & > tr:nth-child(even),
     & > tbody > tr:nth-child(even) {
-      background: eleVar('table', 'tr-hover-bg');
+      & > td {
+        background: eleVar('table', 'even-bg');
+      }
+
+      &:hover > td {
+        background: eleVar('table', 'tr-hover-bg');
+      }
     }
   }
 
   // 行选中
-  tr.is-active,
+  & > tr.is-active,
+  & > tbody > tr.is-active,
   &.is-stripe > tr.is-active,
   &.is-stripe > tbody > tr.is-active {
-    background: eleVar('table', 'tr-active-bg');
-  }
+    & > td {
+      background: eleVar('table', 'tr-active-bg');
+    }
 
-  // 全边框
-  &.is-border {
-    th,
-    td {
-      border-width: 1px;
+    &:hover > td {
+      background: eleVar('table', 'tr-active-hover-bg');
     }
   }
 
   // 尺寸控制
   &.is-large {
-    th,
-    td {
-      font-size: eleVar('table', 'lg-size');
-      padding: eleVar('table', 'lg-padding');
+    border-top-left-radius: eleVar('table', 'lg-radius');
+    border-top-right-radius: eleVar('table', 'lg-radius');
+
+    & > tr,
+    & > thead > tr,
+    & > tbody > tr {
+      & > th,
+      & > td {
+        font-size: eleVar('table', 'lg-size');
+        padding: eleVar('table', 'lg-padding');
+      }
+    }
+
+    & > thead > tr:first-child > th:first-child,
+    & > thead > tr:first-child > td:first-child {
+      border-top-left-radius: eleVar('table', 'lg-radius');
+    }
+
+    & > thead > tr:first-child > th:last-child,
+    & > thead > tr:first-child > td:last-child {
+      border-top-right-radius: eleVar('table', 'lg-radius');
     }
   }
 
   &.is-small {
-    th,
-    td {
-      font-size: eleVar('table', 'sm-size');
-      padding: eleVar('table', 'sm-padding');
+    border-top-left-radius: eleVar('table', 'sm-radius');
+    border-top-right-radius: eleVar('table', 'sm-radius');
+
+    & > tr,
+    & > thead > tr,
+    & > tbody > tr {
+      & > th,
+      & > td {
+        font-size: eleVar('table', 'sm-size');
+        padding: eleVar('table', 'sm-padding');
+      }
+    }
+
+    & > thead > tr:first-child > th:first-child,
+    & > thead > tr:first-child > td:first-child {
+      border-top-left-radius: eleVar('table', 'sm-radius');
+    }
+
+    & > thead > tr:first-child > th:last-child,
+    & > thead > tr:first-child > td:last-child {
+      border-top-right-radius: eleVar('table', 'sm-radius');
+    }
+  }
+
+  // 全边框
+  &.is-border {
+    border-top: 1px solid eleVar('table', 'border-color');
+    border-left: 1px solid eleVar('table', 'border-color');
+
+    & > tr,
+    & > thead > tr,
+    & > tbody > tr {
+      & > th,
+      & > td {
+        border-right-width: 1px;
+      }
     }
   }
 

package/lib/ele-table-select/index.d.ts

@@ -1,7 +1,7 @@
 import type { SingleValue, SelectValue, SelectedItem } from '../ele-basic-select/types';
 import type { DataItem } from '../ele-pro-table/types';
 import type { InitValue } from './types';
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     modelValue: import("vue").PropType<SelectValue>;
     multiple: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -38,15 +38,15 @@ declare const _sfc_main: import("vue").DefineComponent<{
     };
     automaticDropdown: BooleanConstructor;
     tagType: {
-        type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown>>;
+        type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown> | undefined>;
         default: string;
     };
     placement: {
-        type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], unknown, unknown>>;
+        type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], unknown, unknown> | undefined>;
         default: string;
     };
     popperWidth: (StringConstructor | NumberConstructor)[];
-    popperOptions: import("vue").PropType<Partial<import("element-plus").Options>>;
+    popperOptions: import("vue").PropType<Partial<import("element-plus").Options> | undefined>;
     popperClass: StringConstructor;
     responsive: {
         type: BooleanConstructor;
@@ -119,15 +119,15 @@ declare const _sfc_main: import("vue").DefineComponent<{
     };
     automaticDropdown: BooleanConstructor;
     tagType: {
-        type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown>>;
+        type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown> | undefined>;
         default: string;
     };
     placement: {
-        type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], unknown, unknown>>;
+        type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], unknown, unknown> | undefined>;
         default: string;
     };
     popperWidth: (StringConstructor | NumberConstructor)[];
-    popperOptions: import("vue").PropType<Partial<import("element-plus").Options>>;
+    popperOptions: import("vue").PropType<Partial<import("element-plus").Options> | undefined>;
     popperClass: StringConstructor;
     responsive: {
         type: BooleanConstructor;
@@ -136,24 +136,24 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }>> & {
     onFocus?: ((_e: FocusEvent) => any) | undefined;
     onBlur?: ((_e: FocusEvent) => any) | undefined;
+    onVisibleChange?: ((_visible: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((_value: SelectValue) => any) | undefined;
     onChange?: ((_value: SelectValue) => any) | undefined;
-    onVisibleChange?: ((_visible: boolean) => any) | undefined;
+    onSelect?: ((_item: DataItem | DataItem[]) => any) | undefined;
     onRemoveTag?: ((_value: SingleValue) => any) | undefined;
     onClear?: (() => any) | undefined;
-    onSelect?: ((_item: DataItem | DataItem[]) => any) | undefined;
 }, {
+    placement: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], unknown, unknown> | undefined;
     disabled: boolean;
+    teleported: boolean;
     autocomplete: string;
     clearable: boolean;
     persistent: boolean;
-    teleported: boolean;
-    placement: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], unknown, unknown>;
+    responsive: boolean;
     multiple: boolean;
+    automaticDropdown: boolean;
+    tagType: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown> | undefined;
     valueKey: string;
     labelKey: string;
-    automaticDropdown: boolean;
-    tagType: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown>;
-    responsive: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/lib/ele-table-select/props.d.ts

@@ -43,15 +43,15 @@ export declare const tableSelectProps: {
     };
     automaticDropdown: BooleanConstructor;
     tagType: {
-        type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown>>;
+        type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown> | undefined>;
         default: string;
     };
     placement: {
-        type: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], unknown, unknown>>;
+        type: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], unknown, unknown> | undefined>;
         default: string;
     };
     popperWidth: (StringConstructor | NumberConstructor)[];
-    popperOptions: PropType<Partial<import("element-plus").Options>>;
+    popperOptions: PropType<Partial<import("element-plus").Options> | undefined>;
     popperClass: StringConstructor;
     responsive: {
         type: BooleanConstructor;

package/lib/ele-table-select/style/css-var.scss

@@ -0,0 +1,7 @@
+@use '../../style/util.scss' as *;
+
+@mixin set-table-select-var($var) {
+  .ele-table-select-popper {
+    @include set-ele-var('table-select', $var);
+  }
+}