ele-admin-plus 1.2.2-beta.5 → 1.3.0-beta.3

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

@@ -0,0 +1,224 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-tree-table-var($ele);
+
+.ele-tree-table-wrapper {
+  border-top: 1px solid eleVar('table', 'border-color');
+  border-right: 1px solid eleVar('table', 'border-color');
+  border-radius: eleVar('table', 'radius');
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+
+  &::after,
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    box-sizing: border-box;
+    pointer-events: none;
+    z-index: 5;
+  }
+
+  &::after {
+    height: calc(1px + #{eleVar('table', 'radius')});
+    left: 0;
+    right: 0;
+    border-bottom: 1px solid eleVar('table', 'border-color');
+    border-bottom-right-radius: eleVar('table', 'radius');
+    border-bottom-left-radius: eleVar('table', 'radius');
+  }
+
+  &::before {
+    width: calc(1px + #{eleVar('table', 'radius')});
+    top: 0;
+    left: 0;
+    border-left: 1px solid eleVar('table', 'border-color');
+    border-bottom-left-radius: eleVar('table', 'radius');
+    border-top-left-radius: eleVar('table', 'radius');
+  }
+}
+
+/* 表格 */
+.ele-tree-table {
+  color: eleVar('table', 'color');
+  font-size: eleVar('table', 'font-size');
+  line-height: eleVar('table', 'line-height');
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.ele-tree-table-main {
+  min-width: max-content;
+  box-sizing: border-box;
+}
+
+.ele-tree-table-row,
+.ele-tree-table-cells {
+  display: flex;
+  box-sizing: border-box;
+}
+
+/* 单元格 */
+.ele-tree-table-cell {
+  padding: eleVar('table', 'padding');
+  background: eleVar('table', 'tr-bg');
+  border-left: 1px solid eleVar('table', 'border-color');
+  border-bottom: 1px solid eleVar('table', 'border-color');
+  transition: background-color $transition-base;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  &:not(.is-tree-index) {
+    flex: 1;
+    text-overflow: ellipsis;
+  }
+
+  &.is-tree-index {
+    flex-shrink: 0;
+    padding-left: 0;
+    padding-right: 0;
+    white-space: nowrap;
+    word-break: break-all;
+    text-align: center;
+
+    &.is-placeholder {
+      border-left: none;
+    }
+  }
+}
+
+/* 表头 */
+.ele-tree-table-header {
+  color: eleVar('table', 'th-color');
+  font-weight: eleVar('table', 'th-font-weight');
+  box-sizing: border-box;
+  position: sticky;
+  top: 0;
+  z-index: 4;
+
+  .ele-tree-table-cell {
+    background: eleVar('table', 'th-bg');
+  }
+}
+
+/* 主体 */
+.ele-tree-table-row-body {
+  flex: 1;
+  box-sizing: border-box;
+}
+
+/* 行鼠标移入状态 */
+.ele-tree-table-cells:hover .ele-tree-table-cell,
+.ele-tree-table-body .ele-tree-table-row > .ele-tree-table-cell:hover {
+  background: eleVar('table', 'tr-hover-bg');
+}
+
+.ele-tree-table-cell:hover + .ele-tree-table-row-body > .ele-tree-table-cells {
+  .ele-tree-table-cell {
+    background: eleVar('table', 'tr-hover-bg');
+  }
+}
+
+.ele-tree-table-cell {
+  &:has(+ .ele-tree-table-row-body > .ele-tree-table-cells:hover) {
+    background: eleVar('table', 'tr-hover-bg');
+  }
+}
+
+/* 空状态 */
+.ele-tree-table-empty {
+  padding: eleVar('table', 'padding');
+  box-sizing: border-box;
+  text-align: center;
+}
+
+/* 固定列 */
+.ele-tree-table-cell.is-fixed-left,
+.ele-tree-table-cell.is-fixed-right {
+  position: sticky;
+  z-index: 3;
+}
+
+.ele-tree-table-cell.is-fixed-left {
+  left: 0;
+}
+
+.ele-tree-table-cell.is-fixed-right {
+  right: 0;
+}
+
+.ele-tree-table-cell.is-fixed-left-last,
+.ele-tree-table-cell.is-fixed-right-first {
+  overflow: visible;
+
+  &::before {
+    content: '';
+    width: 10px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    transition: box-shadow $transition-base;
+    pointer-events: none;
+  }
+}
+
+.ele-tree-table-cell.is-fixed-left-last::before {
+  right: -10px;
+}
+
+.ele-tree-table-cell.is-fixed-right-first::before {
+  left: -10px;
+}
+
+.ele-tree-table-wrapper {
+  &.is-ping-left .ele-tree-table-cell.is-fixed-left-last {
+    border-right-color: transparent;
+
+    &::before {
+      box-shadow: eleVar('table', 'fixed-left-shadow');
+    }
+  }
+
+  &.is-ping-right .ele-tree-table-cell.is-fixed-right-first {
+    border-left-color: transparent;
+
+    &::before {
+      box-shadow: eleVar('table', 'fixed-right-shadow');
+    }
+  }
+}
+
+/* 展开图标 */
+.ele-tree-table-expand {
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+  vertical-align: -1px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: eleVar('table', 'icon-radius');
+  transition: (color $transition-base, background-color $transition-base);
+  cursor: pointer;
+
+  & > .el-icon {
+    transition: all $transition-base;
+  }
+
+  &.is-collapse > .el-icon {
+    transform: rotate(-90deg);
+  }
+
+  &:hover {
+    background: eleVar('table', 'icon-hover-bg');
+  }
+}
+
+.ele-tree-table-row.is-collapse {
+  & > .ele-tree-table-row-body > .ele-tree-table-children {
+    display: none;
+  }
+}

package/es/ele-tree-table/types.d.ts

@@ -0,0 +1,27 @@
+import type { StyleValue } from '../ele-app/types';
+
+/**
+ * 树表格数据
+ */
+export interface TreeTableDataItem extends Record<string, any> {
+  /** key */
+  key: any;
+  /** 子级 */
+  children?: TreeTableDataItem[];
+}
+
+/**
+ * 树表格列配置
+ */
+export interface TreeTableColumn extends Record<string, any> {
+  /** key */
+  key?: string;
+  /** 标题 */
+  label?: string;
+  /** 属性名 */
+  prop?: string;
+  /** 样式 */
+  style?: StyleValue;
+  /** 类名 */
+  class?: string;
+}

package/es/ele-virtual-table/index.d.ts

@@ -170,6 +170,8 @@ declare const _default: import('vue').DefineComponent<{
     handleExpandCellMouseenter: () => void;
     handleTableMouseleave: () => void;
     handleTableScroll: (option: ScrollPos) => void;
+    handleEndEeached: (params: any) => void;
+    handleRowsRendered: (params: any) => void;
     updateWrapSize: () => void;
     updateTableData: () => void;
     updateSelectedAndChecked: () => void;
@@ -194,6 +196,9 @@ declare const _default: import('vue').DefineComponent<{
     scrollToRow: (row: number, strategy: ScrollStrategy) => void;
     hideTooltip: () => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    endEeached: (_params: any) => boolean;
+    scroll: (_params: ScrollPos) => boolean;
+    rowsRendered: (_params: any) => boolean;
     select: (_selection: DataItem[], _row: DataItem) => boolean;
     selectAll: (_selection: DataItem[]) => boolean;
     selectionChange: (_selection: DataItem[]) => boolean;
@@ -336,6 +341,8 @@ declare const _default: import('vue').DefineComponent<{
 }>> & {
     onSelect?: ((_selection: DataItem[], _row: DataItem) => any) | undefined;
     onExpandChange?: ((_row: DataItem, _expanded: boolean) => any) | undefined;
+    onScroll?: ((_params: ScrollPos) => any) | undefined;
+    onRowsRendered?: ((_params: any) => any) | undefined;
     onSelectAll?: ((_selection: DataItem[]) => any) | undefined;
     onSelectionChange?: ((_selection: DataItem[]) => any) | undefined;
     onCellMouseEnter?: ((_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => any) | undefined;
@@ -354,6 +361,7 @@ declare const _default: import('vue').DefineComponent<{
     onHeaderDragend?: ((_width: number, _old: number, _column: Column, _e: MouseEvent) => any) | undefined;
     "onUpdate:currentRowKey"?: ((_currentRowKey?: DataKey | undefined) => any) | undefined;
     "onUpdate:selectedRowKeys"?: ((_selectedRowKeys?: DataKey[] | undefined) => any) | undefined;
+    onEndEeached?: ((_params: any) => any) | undefined;
 }, {
     fit: boolean;
     lazy: boolean;

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

@@ -385,6 +385,13 @@ const _sfc_main = defineComponent({
           el.scrollLeft = scrollLeft;
         }
       }
+      emit("scroll", option);
+    };
+    const handleEndEeached = (params) => {
+      emit("endEeached", params);
+    };
+    const handleRowsRendered = (params) => {
+      emit("rowsRendered", params);
     };
     const updateTableData = () => {
       tableData.value = transformTableData(
@@ -941,6 +948,8 @@ const _sfc_main = defineComponent({
       handleExpandCellMouseenter,
       handleTableMouseleave,
       handleTableScroll,
+      handleEndEeached,
+      handleRowsRendered,
       updateWrapSize,
       updateTableData,
       updateSelectedAndChecked,
@@ -1009,7 +1018,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _ctx.tableProps.width ? (openBlock(), createBlock(_component_ElTableV2, mergeProps({ key: 0 }, _ctx.tableProps, {
       key: _ctx.tableKey,
       ref: "tableRef",
-      onScroll: _ctx.handleTableScroll
+      onScroll: _ctx.handleTableScroll,
+      onEndEeached: _ctx.handleEndEeached,
+      onRowsRendered: _ctx.handleRowsRendered
     }), createSlots({
       header: withCtx((headerProps) => [
         headerProps && _ctx.headerRows[headerProps.headerIndex] ? (openBlock(), createBlock(_component_HeaderRow, {
@@ -1141,7 +1152,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         key: "0"
       } : void 0
-    ]), 1040, ["onScroll"])) : createCommentVNode("", true),
+    ]), 1040, ["onScroll", "onEndEeached", "onRowsRendered"])) : createCommentVNode("", true),
     createVNode(_component_EleTooltip, normalizeProps(guardReactiveProps(_ctx.tableTooltipProps)), null, 16)
   ], 34);
 }

package/es/ele-virtual-table/props.d.ts

@@ -1,4 +1,5 @@
 import { ExtractPropTypes } from 'vue';
+import { ScrollPos } from './types';
 
 /**
  * 属性
@@ -129,6 +130,9 @@ export type VirtualTableProps = ExtractPropTypes<typeof virtualTableProps>;
  * 事件
  */
 export declare const virtualTableEmits: {
+    endEeached: (_params: any) => boolean;
+    scroll: (_params: ScrollPos) => boolean;
+    rowsRendered: (_params: any) => boolean;
     select: (_selection: import('../ele-data-table/types').DataItem[], _row: import('../ele-data-table/types').DataItem) => boolean;
     selectAll: (_selection: import('../ele-data-table/types').DataItem[]) => boolean;
     selectionChange: (_selection: import('../ele-data-table/types').DataItem[]) => boolean;

package/es/ele-virtual-table/props.js

@@ -5,7 +5,10 @@ const virtualTableProps = {
   rowHeight: Number
 };
 const virtualTableEmits = {
-  ...dataTableEmits
+  ...dataTableEmits,
+  endEeached: (_params) => true,
+  scroll: (_params) => true,
+  rowsRendered: (_params) => true
 };
 export {
   virtualTableEmits,

package/es/ele-virtual-table/util.js

@@ -1,4 +1,4 @@
-import { ref, onMounted, onBeforeMount, onActivated, onDeactivated } from "vue";
+import { ref, onMounted, onBeforeUnmount, onActivated, onDeactivated } from "vue";
 import { TableV2SortOrder } from "element-plus";
 import { omit, getValue, mapTree, findTree, eachTree, contentIsEllipsis, debounce } from "../utils/core";
 import { getColFixedNumber } from "../ele-data-table/util";
@@ -541,7 +541,7 @@ function useAutoResize(getEl) {
     updateWrapSize();
     observe();
   });
-  onBeforeMount(() => {
+  onBeforeUnmount(() => {
     observer.disconnect();
   });
   onActivated(() => {

package/es/ele-watermark/util.js

@@ -1,4 +1,4 @@
-import { onBeforeMount } from "vue";
+import { onBeforeUnmount } from "vue";
 function getFont(font) {
   const style = {
     color: "rgba(122, 122, 122, .35)",
@@ -55,7 +55,7 @@ function useMutation(option) {
     falsifiedObserver.disconnect();
     deletedObserver.disconnect();
   };
-  onBeforeMount(() => {
+  onBeforeUnmount(() => {
     disconnect();
   });
   return { observe, disconnect };

package/es/style/plus.scss

@@ -27,19 +27,24 @@
 @use '../ele-pagination/style/index.scss' as pagination;
 @use '../ele-popconfirm/style/index.scss' as popconfirm;
 @use '../ele-printer/style/index.scss' as printer;
+@use '../ele-pro-form/style/index.scss' as proForm;
+@use '../ele-pro-form-builder/style/index.scss' as proFormBuilder;
 @use '../ele-pro-layout/style/index.scss' as proLayout;
 @use '../ele-pro-table/style/index.scss' as proTable;
 @use '../ele-segmented/style/index.scss' as segmented;
 @use '../ele-split-panel/style/index.scss' as splitPanel;
 @use '../ele-steps/style/index.scss' as steps;
+@use '../ele-tab-bar/style/index.scss' as tabBar;
 @use '../ele-tabs/style/index.scss' as tabs;
 @use '../ele-table/style/index.scss' as table;
 @use '../ele-table-select/style/index.scss' as tableSelect;
 @use '../ele-text/style/index.scss' as text;
+@use '../ele-timeline/style/index.scss' as timeline;
 @use '../ele-tool/style/index.scss' as tool;
 @use '../ele-toolbar/style/index.scss' as toolbar;
 @use '../ele-tooltip/style/index.scss' as tooltip;
 @use '../ele-tour/style/index.scss' as tour;
 @use '../ele-tree-select/style/index.scss' as treeSelect;
+@use '../ele-tree-table/style/index.scss' as treeTable;
 @use '../ele-upload-list/style/index.scss' as uploadList;
 @use '../ele-virtual-table/style/index.scss' as virtualTable;

package/es/style/themes/default.scss

@@ -526,6 +526,33 @@ $ele: map.deep-merge(
       'lg-gap': 8px 12px,
       'lg-font-size': 14px
     ),
+    'pro-form': (
+      // 高级表单
+      'descriptions-label-wdith': 110px,
+      'handle-color': #fff,
+      'handle-font-size': 12px,
+      'handle-height': 18px,
+      'handle-bg': elVar('color-primary'),
+      'handle-shadow': 2px 2px 4px 0 rgba(255, 255, 255, 0.6),
+      'handle-padding': 0 4px,
+      'handle-space': 4px,
+      'handle-index': 9999,
+      'item-wrapper-padding': 4px,
+      'item-wrapper-border': 1px dashed elVar('border-color'),
+      'item-wrapper-hover-border': 1px dashed elVar('color-primary'),
+      'item-wrapper-active-border': 2px solid elVar('color-primary'),
+      'item-wrapper-active-border-offset': -1px,
+      'item-wrapper-active-index': 8,
+      'container-wrapper-border-offset': -1px,
+      'container-wrapper-active-border-offset': -2px,
+      'container-wrapper-min-height': 48px,
+      'container-div-min-height': 24px,
+      'container-description-min-height': 32px
+    ),
+    'pro-form-builder': (
+      // 表单构建器
+      'descriptions-label-wdith': 110px
+    ),
     'segmented': (
       // 分段器
       'padding': 3px,
@@ -593,6 +620,24 @@ $ele: map.deep-merge(
       'finish-line-color': elVar('color-primary'),
       'vertical-margin': 16px
     ),
+    'tab-bar': (
+      // 标签栏
+      'padding': 0,
+      'line-color': elVar('border-color', 'light'),
+      'height': 40px,
+      'space': 16px,
+      'font-size': elVar('font-size', 'base'),
+      'color': elVar('text-color', 'regular'),
+      'hover-color': elVar('color-primary'),
+      'hover-bg': transparent,
+      'active-color': elVar('color-primary'),
+      'active-bg': transparent,
+      'active-font-weight': normal,
+      'active-line-size': 2px,
+      'active-line-color': elVar('color-primary'),
+      'item-padding': 0 2px,
+      'item-radius': 0
+    ),
     'tab': (
       // 标签页
       'bg': elVar('bg-color'),
@@ -669,6 +714,19 @@ $ele: map.deep-merge(
       'xxl': calc(#{elVar('font-size', 'extra-large')} + 6px),
       'xxxl': calc(#{elVar('font-size', 'extra-large')} + 34px)
     ),
+    'timeline': (
+      // 时间线
+      'body-padding': 8px 16px 48px 16px,
+      'title-font-size': 16px,
+      'title-margin': 0 0 4px 0,
+      'description-font-size': 13px,
+      'icon-margin': 0 8px,
+      'icon-font-size': 22px,
+      'icon-color': elVar('text-color', 'placeholder'),
+      'line-size': 2px,
+      'line-color': elVar('border-color'),
+      'turn-line-offset': 11px
+    ),
     'table': (
       // 表格
       'radius': 0,

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

@@ -19,17 +19,22 @@
 @use '../../ele-page/style/css-var.scss' as *;
 @use '../../ele-pagination/style/css-var.scss' as *;
 @use '../../ele-popconfirm/style/css-var.scss' as *;
+@use '../../ele-pro-form/style/css-var.scss' as *;
+@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-steps/style/css-var.scss' as *;
+@use '../../ele-tab-bar/style/css-var.scss' as *;
 @use '../../ele-table/style/css-var.scss' as *;
 @use '../../ele-table-select/style/css-var.scss' as *;
 @use '../../ele-tabs/style/css-var.scss' as *;
 @use '../../ele-text/style/css-var.scss' as *;
+@use '../../ele-timeline/style/css-var.scss' as *;
 @use '../../ele-tool/style/css-var.scss' as *;
 @use '../../ele-toolbar/style/css-var.scss' as *;
 @use '../../ele-tooltip/style/css-var.scss' as *;
 @use '../../ele-tree-select/style/css-var.scss' as *;
+@use '../../ele-tree-table/style/css-var.scss' as *;
 @use '../../ele-upload-list/style/css-var.scss' as *;
 @use '../../ele-virtual-table/style/css-var.scss' as *;
 
@@ -57,17 +62,22 @@
     @include set-page-var($var);
     @include set-pagination-var($var);
     @include set-popconfirm-var($var);
+    @include set-pro-form-var($var);
+    @include set-pro-form-builder-var($var);
     @include set-pro-table-var($var);
     @include set-segmented-var($var);
     @include set-step-var($var);
+    @include set-tab-bar-var($var);
     @include set-table-var($var);
     @include set-table-select-var($var);
     @include set-tab-var($var);
     @include set-text-var($var);
+    @include set-timeline-var($var);
     @include set-tool-var($var);
     @include set-toolbar-var($var);
     @include set-tooltip-var($var);
     @include set-tree-select-var($var);
+    @include set-tree-table-var($var);
     @include set-upload-list-var($var);
     @include set-virtual-table-var($var);
   }

package/es/style/util.scss

@@ -57,3 +57,14 @@
 @function elVarName($args...) {
   @return el.getCssVarName($args...);
 }
+
+/* 生成 not 选择器 */
+@function joinNotSelectors($list) {
+  $selector: '';
+  @each $item in $list {
+    @if $item != '' {
+      $selector: $selector + ':not(' + $item + ')';
+    }
+  }
+  @return $selector;
+}

package/es/utils/hook.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'vue';
+import { Ref, EmitsOptions, ObjectEmitsOptions } from 'vue';
 
 /**
  * 重置组件表单验证
@@ -28,6 +28,24 @@ export type UseMediaQueryResult = [MediaQueryList, () => void, () => void];
  * @param onChange 改变回调
  */
 export declare function useMediaQuery(query: string, onChange?: () => void): UseMediaQueryResult;
+/**
+ * useMobile 返回结果
+ */
+export type UseMobileResult = [Ref<boolean>, () => void, () => void];
+/**
+ * 获取是否是移动端小屏幕
+ * @param onChange 值改变回调
+ */
+export declare function useMobile(onChange?: (isMobile: boolean) => void): UseMobileResult;
+/**
+ * useMobileDevice 返回结果
+ */
+export type UseMobileDeviceResult = [Ref<boolean>, () => void, () => void];
+/**
+ * 获取是否是移动端触摸设备
+ * @param onChange 值改变回调
+ */
+export declare function useMobileDevice(onChange?: (isMobile: boolean) => void): UseMobileDeviceResult;
 /**
  * 窗口事件监听
  * @param event 事件
@@ -115,3 +133,24 @@ export declare function useMoveEvent(option?: UseTouchEventOption<MoveEvent>): {
     handleMousedown: (e: MouseEvent) => void;
     handleTouchstart: (e: TouchEvent) => void;
 };
+/**
+ * 组件事件对应的方法类型
+ */
+export type EmitMethods<T extends EmitsOptions> = T extends string[] ? {
+    [K in T[number]]: (...args: any[]) => void;
+} : T extends ObjectEmitsOptions ? {
+    [K in string & keyof T]: (...args: T[K] extends (...args: infer P) => any ? P : T[K] extends null ? any[] : never) => void;
+} : {};
+/**
+ * 二次封装组件事件处理 hook
+ */
+export declare function useComponentEvents<T extends EmitsOptions>(events: T, emit: any): {
+    emitMethods: EmitMethods<T>;
+};
+/**
+ * 高级选项数据 hook
+ */
+export declare function useProOptions<T>(props: Record<string, any>, name?: string): {
+    optionData: Ref<T[]>;
+    reloadOptions: () => void;
+};