ele-admin-plus 1.1.4-beta.3 → 1.1.5-beta.1

package/lib/ele-pro-table/index.js

@@ -1,62 +1,67 @@
 "use strict";
 const vue = require("vue");
-const elementPlus = require("element-plus");
 const core = require("../utils/core");
 const receiver = require("../ele-config-provider/receiver");
-const ElePagination = require("../ele-pagination/index");
 const EleLoading = require("../ele-loading/index");
+const ElePagination = require("../ele-pagination/index");
+const props$1 = require("../ele-data-table/props");
+const util = require("../ele-data-table/util");
+const EleDataTable = require("../ele-data-table/index");
+const EleVirtualTable = require("../ele-virtual-table/index");
 const EleToolbar = require("../ele-toolbar/index");
 const TableTools = require("./components/table-tools");
-const TableView = require("./components/table-view");
-const util = require("./util");
+const util$1 = require("./util");
 const props = require("./props");
 const _sfc_main = vue.defineComponent({
   name: "EleProTable",
   components: {
-    ElEmpty: elementPlus.ElEmpty,
-    ElePagination,
     EleLoading,
+    ElePagination,
+    EleDataTable,
+    EleVirtualTable,
     EleToolbar,
-    TableTools,
-    TableView
+    TableTools
   },
   props: props.proTableProps,
   emits: props.proTableEmits,
-  setup(props$1, { emit }) {
+  setup(props2, { emit, slots }) {
     const { authenticated } = receiver.useLicense();
     const globalProps = receiver.useGlobalProps("table");
-    const tableIns = util.useTableMethods(() => getTableRef());
-    const tableEvents = util.useTableEvents(emit);
+    const methods = util.useMethods(() => getTableRef());
+    const events = util.useEmits(emit);
     const current = {
-      sorter: props$1.defaultSort ?? {},
-      filter: util.getDefaultFilter(props$1.columns),
-      where: props$1.where ?? {}
+      sorter: props2.defaultSort ?? {},
+      filter: util$1.getDefaultFilter(props2.columns),
+      where: props2.where ?? {}
     };
     const tableViewRef = vue.ref(null);
     const tableData = vue.ref([]);
     const tablePage = vue.ref(
-      util.getTablePage(props$1.pagination, globalProps.value.pagination)
+      util$1.getTablePage(props2.pagination, globalProps.value.pagination)
     );
     const tableLimit = vue.ref(
-      util.getTableLimit(props$1.pagination, globalProps.value.pagination)
+      util$1.getTableLimit(props2.pagination, globalProps.value.pagination)
     );
     const tableTotal = vue.ref(0);
-    const tableLoading = vue.ref(props$1.loading);
+    const tableLoading = vue.ref(props2.loading);
     const tableCols = vue.ref([]);
     const tableSize = vue.ref(
-      util.getTableSize(props$1.cacheKey, props$1.size, globalProps.value.size)
+      util$1.getTableSize(props2.cacheKey, props2.size, globalProps.value.size)
     );
     const tableMaximized = vue.ref(false);
     const errorText = vue.ref("");
-    const destroyed = vue.ref(false);
-    const selectionUpdate = vue.ref(true);
+    const slotKeys = vue.computed(() => {
+      return Object.keys(slots).filter(
+        (k) => !["default", "toolbar", "tools", "footer"].includes(k)
+      );
+    });
     const tableIndex = vue.computed(() => {
       return ((tablePage.value ?? 1) - 1) * (tableLimit.value ?? 0) + 1;
     });
     const paginationProps = vue.computed(() => {
-      return util.getPaginationProps(
+      return util$1.getPaginationProps(
         tableSize.value,
-        props$1.pagination,
+        props2.pagination,
         globalProps.value.pagination,
         {
           total: tableTotal.value,
@@ -65,53 +70,50 @@ const _sfc_main = vue.defineComponent({
         }
       );
     });
+    const tableEmptyProps = vue.computed(() => {
+      return util$1.mergeProps(
+        props2.emptyProps,
+        globalProps.value.emptyProps
+      );
+    });
     const tableProps = vue.computed(() => {
-      const isMaximized = tableMaximized.value && props$1.maximizedHeight;
-      const opt = {
-        data: tableData.value,
-        height: isMaximized ? props$1.maximizedHeight : props$1.height,
-        stripe: props$1.stripe ?? globalProps.value.stripe ?? false,
-        border: props$1.border ?? globalProps.value.border ?? false,
-        size: tableSize.value,
+      const isMaximized = tableMaximized.value && props2.maximizedHeight;
+      return {
+        ...core.pick(props2, props$1.dataTablePropKeys),
+        height: isMaximized ? props2.maximizedHeight : props2.height,
+        border: props2.border ?? globalProps.value.border ?? false,
+        stripe: props2.stripe ?? globalProps.value.stripe ?? false,
         load: tableLoad,
-        emptyText: errorText.value || props$1.emptyText,
+        size: tableSize.value,
+        data: tableData.value,
         columns: tableCols.value,
+        errorText: errorText.value,
         pageIndex: tableIndex.value,
-        headerEllipsis: props$1.headerEllipsis,
-        slotNormalize: props$1.slotNormalize
+        emptyProps: tableEmptyProps.value,
+        rowHeight: props2.virtual ? props2.rowHeight : void 0,
+        style: props2.tableStyle,
+        class: "ele-pro-table-view",
+        ...events,
+        onSelectionChange,
+        onSortChange,
+        onFilterChange,
+        onCurrentChange
       };
-      return Object.assign(core.pick(props$1, props.tablePropKeys), opt);
-    });
-    const tableZIndex = vue.computed(() => {
-      if (!tableMaximized.value) {
-        return;
-      }
-      return props$1.maximizedIndex ?? globalProps.value.maximizedIndex;
     });
     const tableTools = vue.computed(() => {
-      const tools = props$1.tools ?? globalProps.value.tools ?? true;
+      const tools = props2.tools ?? globalProps.value.tools ?? true;
       if (tools === true) {
         return ["reload", "size", "columns", "maximized"];
       }
       return tools || [];
     });
-    const tableEmptyProps = vue.computed(() => {
-      return util.mergeProps(
-        props$1.emptyProps,
-        globalProps.value.emptyProps
-      );
-    });
     const rootProps = vue.computed(() => {
+      const zIndex = props2.maximizedIndex ?? globalProps.value.maximizedIndex;
       const opt = {
-        ...props$1.loadingProps || {},
+        ...props2.loadingProps || {},
         loading: tableLoading.value,
-        class: [
-          "ele-pro-table",
-          { "is-sticky": props$1.sticky },
-          { "is-maximized": tableMaximized.value },
-          { "hide-bottom-line": !props$1.bottomLine }
-        ],
-        style: { zIndex: tableZIndex.value }
+        class: ["ele-pro-table", { "is-maximized": tableMaximized.value }],
+        style: tableMaximized.value ? { zIndex } : void 0
       };
       return opt;
     });
@@ -138,34 +140,34 @@ const _sfc_main = vue.defineComponent({
       }
       errorText.value = "";
       const sorter = current.sorter;
-      if (typeof props$1.datasource === "function") {
+      if (typeof props2.datasource === "function") {
         if (!parent) {
           tableLoading.value = true;
         }
         const filter = current.filter;
-        const orders = util.getRequestOrders(
+        const orders = util$1.getRequestOrders(
           sorter,
-          props$1.request,
+          props2.request,
           globalProps.value.request
         );
-        props$1.datasource({
+        props2.datasource({
           page: tablePage.value,
           limit: tableLimit.value,
           where: Object.assign({}, current.where),
           orders,
-          filters: util.getRequestFilters(filter),
+          filters: util$1.getRequestFilters(filter),
           sorter,
           filter,
           parent
         }).then((response) => {
-          const parseData = props$1.parseData ?? globalProps.value.parseData;
+          const parseData = props2.parseData ?? globalProps.value.parseData;
           const result = parseData ? parseData(response) : response;
-          const { data, total } = util.getResponseResult(
+          const { data, total } = util$1.getResponseResult(
             result,
-            props$1.response,
+            props2.response,
             globalProps.value.response,
-            props$1.lazy,
-            props$1.treeProps
+            props2.lazy,
+            props2.treeProps
           );
           requestCallback(data, total, parent, result, resolve);
         }).catch((e) => {
@@ -174,9 +176,9 @@ const _sfc_main = vue.defineComponent({
         });
         return;
       }
-      if (Array.isArray(props$1.datasource)) {
-        const { data, page, total } = util.reloadData(
-          props$1.datasource,
+      if (Array.isArray(props2.datasource)) {
+        const { data, page, total } = util$1.reloadData(
+          props2.datasource,
           sorter,
           paginationProps.value ? tablePage.value : void 0,
           tableLimit.value
@@ -184,7 +186,7 @@ const _sfc_main = vue.defineComponent({
         tableData.value = data;
         tablePage.value = page;
         tableTotal.value = total;
-        onDone({ data, page, total, response: props$1.datasource });
+        onDone({ data, page, total, response: props2.datasource });
       }
     };
     const requestCallback = (data, total, parent, response, resolve) => {
@@ -200,14 +202,14 @@ const _sfc_main = vue.defineComponent({
           "返回的数据格式与配置的不一致, 返回的数据:",
           response,
           "需要的格式:",
-          util.getResponseName(globalProps.value.response, props$1.response)
+          util$1.getResponseName(globalProps.value.response, props2.response)
         );
         return;
       }
       if (resolve) {
         resolve(data);
       } else {
-        if (util.isAutoAmend(props$1.pagination, globalProps.value.pagination) && !data.length && total && tablePage.value && tableLimit.value) {
+        if (util$1.isAutoAmend(props2.pagination, globalProps.value.pagination) && !data.length && total && tablePage.value && tableLimit.value) {
           const maxPage = Math.ceil(total / tableLimit.value);
           if (maxPage && tablePage.value > maxPage) {
             tablePage.value = maxPage;
@@ -227,18 +229,18 @@ const _sfc_main = vue.defineComponent({
       };
       onDone(result, parent);
     };
-    const onDone = (result, parent) => {
-      emit("done", result, parent);
-    };
     const tableLoad = (row, treeNode, resolve) => {
-      if (props$1.load) {
-        props$1.load(row, treeNode, resolve);
+      if (props2.load) {
+        props2.load(row, treeNode, resolve);
         return;
       }
       reload(void 0, row, resolve);
     };
+    const onDone = (result, parent) => {
+      emit("done", result, parent);
+    };
     const onRefresh = () => {
-      if (Array.isArray(props$1.datasource)) {
+      if (Array.isArray(props2.datasource)) {
         emit("refresh");
         return;
       }
@@ -249,14 +251,7 @@ const _sfc_main = vue.defineComponent({
       emit("sizeChange", size);
     };
     const onColumnsChange = (columns) => {
-      const { cols, sorter } = util.getTableState(columns, current);
-      tableCols.value = cols;
-      vue.nextTick(() => {
-        tableIns.doLayout();
-        if (sorter) {
-          tableIns.sort(sorter.prop, sorter.order || "ascending");
-        }
-      });
+      tableCols.value = columns;
       emit("columnsChange", columns);
     };
     const onMaximizedChange = (maximized) => {
@@ -271,47 +266,31 @@ const _sfc_main = vue.defineComponent({
       tablePage.value = page;
       reload();
     };
-    const onRowClick = (row, column, event) => {
-      const index2 = tableData.value.indexOf(row);
-      if (props$1.rowClickChecked && props$1.selections && !util.isDisableRow(row, index2, props$1.columns)) {
-        if (props$1.rowClickChecked === "smart" && (props$1.selections.length === 0 || props$1.selections.length === 1)) {
-          setSelectedRows([row]);
-        } else {
-          tableIns.toggleRowSelection(row);
-        }
-      }
-      emit("rowClick", row, column, event);
-    };
     const onSelectionChange = (selection) => {
-      if (selectionUpdate.value) {
+      if (util$1.selectionIsChange(selection, props2.selections)) {
         updateSelections(selection);
       }
-      emit("selectionChange", selection);
+      events.onSelectionChange(selection);
     };
     const onSortChange = (sorter) => {
-      const temp = current.sorter;
-      if (temp && sorter.prop === temp.prop && sorter.order === temp.order) {
-        return;
-      }
-      if (props$1.loadOnChanged) {
+      if (props2.loadOnChanged) {
         current.sorter = sorter;
         reload();
       }
-      emit("sortChange", sorter);
+      events.onSortChange(sorter);
     };
     const onFilterChange = (filter) => {
-      if (props$1.loadOnChanged) {
-        const temp = util.getTableFilter(getTableRef()) ?? filter;
-        current.filter = temp;
+      if (props2.loadOnChanged) {
+        current.filter = filter;
         reload();
       }
-      emit("filterChange", filter);
+      events.onFilterChange(filter);
     };
     const onCurrentChange = (currentRow, oldCurrentRow) => {
-      if (props$1.current !== currentRow) {
+      if (props2.current !== currentRow) {
         updateCurrent(currentRow);
       }
-      emit("currentChange", currentRow, oldCurrentRow);
+      events.onCurrentChange(currentRow, oldCurrentRow);
     };
     const updateCurrent = (currentRow) => {
       emit("update:current", currentRow);
@@ -320,17 +299,10 @@ const _sfc_main = vue.defineComponent({
       emit("update:selections", selection);
     };
     const reloadTable = () => {
-      destroyed.value = true;
-      vue.nextTick(() => {
-        destroyed.value = false;
-        vue.nextTick(() => {
-          setSelectedRows(props$1.selections);
-        });
-      });
+      methods.doLayout();
     };
     const getTableRef = () => {
-      var _a;
-      return (_a = tableViewRef.value) == null ? void 0 : _a.tableRef;
+      return tableViewRef.value;
     };
     const getData = () => {
       return tableData.value;
@@ -338,45 +310,12 @@ const _sfc_main = vue.defineComponent({
     const setData = (data) => {
       tableData.value = data;
     };
-    const setSelectedRows = (rows) => {
-      if (rows == null) {
-        return;
-      }
-      selectionUpdate.value = false;
-      tableIns.clearSelection();
-      rows.forEach((d) => {
-        tableIns.toggleRowSelection(d, true);
-      });
-      selectionUpdate.value = true;
-      if (util.selectionIsChange(rows, props$1.selections)) {
-        updateSelections(rows);
-      }
-    };
-    const setSelectedRowKeys = (keys) => {
-      if (!keys || !props$1.rowKey) {
-        return;
-      }
-      const rows = tableData.value.filter(
-        (d) => keys.some((v) => v === util.getValue(d, props$1.rowKey))
-      );
-      setSelectedRows(rows);
-    };
-    const toggleRowExpansionAll = (expanded) => {
-      var _a;
-      core.eachTree(
-        tableData.value,
-        (d) => {
-          tableIns.toggleRowExpansion(d, expanded);
-        },
-        (_a = props$1.treeProps) == null ? void 0 : _a.children
-      );
-    };
     const goPageByRowKey = (key) => {
-      if (!props$1.rowKey || !paginationProps.value || tableLimit.value == null || !Array.isArray(props$1.datasource)) {
+      if (!props2.rowKey || !paginationProps.value || tableLimit.value == null || !Array.isArray(props2.datasource)) {
         return;
       }
-      const data = util.sortData(props$1.datasource, current.sorter);
-      const index2 = data.findIndex((d) => util.getValue(d, props$1.rowKey) === key);
+      const data = util$1.sortData(props2.datasource, current.sorter);
+      const index2 = data.findIndex((d) => util.getValue(d, props2.rowKey) === key);
       const page = Math.floor(index2 / tableLimit.value) + 1;
       if (tablePage.value !== page) {
         reload({ page });
@@ -384,9 +323,9 @@ const _sfc_main = vue.defineComponent({
     };
     const fetch = (callback) => {
       const { sorter, filter } = current;
-      const orders = util.getRequestOrders(
+      const orders = util$1.getRequestOrders(
         sorter,
-        props$1.request,
+        props2.request,
         globalProps.value.request
       );
       callback({
@@ -394,61 +333,61 @@ const _sfc_main = vue.defineComponent({
         limit: tableLimit.value,
         where: Object.assign({}, current.where),
         orders,
-        filters: util.getRequestFilters(filter),
+        filters: util$1.getRequestFilters(filter),
         sorter,
         filter
       });
     };
     vue.watch(
-      () => props$1.datasource,
+      () => props2.columns,
+      (columns) => {
+        if (columns) {
+          tableCols.value = util$1.getInitCacheColumns(
+            columns,
+            props2.cacheKey,
+            props2.columnSortable
+          );
+        } else if (tableCols.value.length) {
+          tableCols.value = [];
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    vue.watch(
+      () => props2.datasource,
       () => {
         reload();
       },
       { deep: true }
     );
     vue.watch(
-      () => props$1.loading,
+      () => props2.loading,
       (loading) => {
         tableLoading.value = loading;
       }
     );
     vue.watch(
-      () => props$1.size,
+      () => props2.size,
       (size) => {
-        tableSize.value = util.getTableSize(void 0, size, globalProps.value.size);
-      }
-    );
-    vue.watch(
-      () => props$1.columns,
-      (columns) => {
-        if (columns) {
-          tableCols.value = util.getInitCacheColumns(
-            columns,
-            props$1.cacheKey,
-            props$1.columnSortable
-          );
-        } else if (tableCols.value.length) {
-          tableCols.value = [];
-        }
-      },
-      {
-        immediate: true,
-        deep: true
+        tableSize.value = util$1.getTableSize(void 0, size, globalProps.value.size);
       }
     );
     vue.watch(
       globalProps,
       (config) => {
-        tableSize.value = util.getTableSize(
-          props$1.cacheKey,
-          props$1.size,
+        tableSize.value = util$1.getTableSize(
+          props2.cacheKey,
+          props2.size,
           config.size
         );
       },
       { deep: true }
     );
     vue.onMounted(() => {
-      if (props$1.loadOnCreated) {
+      if (props2.loadOnCreated) {
         reload();
       }
     });
@@ -457,43 +396,27 @@ const _sfc_main = vue.defineComponent({
       updateCurrent(null);
     });
     return {
-      ...tableIns,
-      tableEvents,
+      ...methods,
       tableViewRef,
-      tableData,
-      tableLoading,
-      tableCols,
       tableSize,
       tableMaximized,
-      errorText,
-      destroyed,
+      slotKeys,
       tableIndex,
       paginationProps,
       tableProps,
-      tableZIndex,
       tableTools,
-      tableEmptyProps,
       rootProps,
-      tableLoad,
       onRefresh,
       onSizeChange,
       onColumnsChange,
       onMaximizedChange,
       onPageSizeChange,
       onPageCurrentChange,
-      onRowClick,
-      onSelectionChange,
-      onSortChange,
-      onFilterChange,
-      onCurrentChange,
       reload,
       reloadTable,
       getTableRef,
       getData,
       setData,
-      setSelectedRows,
-      setSelectedRowKeys,
-      toggleRowExpansionAll,
       goPageByRowKey,
       fetch
     };
@@ -509,8 +432,8 @@ const _export_sfc = (sfc, props2) => {
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_TableTools = vue.resolveComponent("TableTools");
   const _component_EleToolbar = vue.resolveComponent("EleToolbar");
-  const _component_ElEmpty = vue.resolveComponent("ElEmpty");
-  const _component_TableView = vue.resolveComponent("TableView");
+  const _component_EleVirtualTable = vue.resolveComponent("EleVirtualTable");
+  const _component_EleDataTable = vue.resolveComponent("EleDataTable");
   const _component_ElePagination = vue.resolveComponent("ElePagination");
   const _component_EleLoading = vue.resolveComponent("EleLoading");
   return vue.openBlock(), vue.createBlock(_component_EleLoading, vue.normalizeProps(vue.guardReactiveProps(_ctx.rootProps)), {
@@ -540,59 +463,27 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 3
       }, 16)) : vue.createCommentVNode("", true),
       vue.renderSlot(_ctx.$slots, "default"),
-      !_ctx.destroyed ? (vue.openBlock(), vue.createBlock(_component_TableView, vue.mergeProps({ key: 1 }, _ctx.tableProps, {
-        ref: "tableViewRef",
-        style: _ctx.tableStyle,
-        onSelect: _ctx.tableEvents.onSelect,
-        onSelectAll: _ctx.tableEvents.onSelectAll,
-        onCellMouseEnter: _ctx.tableEvents.onCellMouseEnter,
-        onCellMouseLeave: _ctx.tableEvents.onCellMouseLeave,
-        onCellClick: _ctx.tableEvents.onCellClick,
-        onCellDblclick: _ctx.tableEvents.onCellDblclick,
-        onCellContextmenu: _ctx.tableEvents.onCellContextmenu,
-        onRowContextmenu: _ctx.tableEvents.onRowContextmenu,
-        onRowDblclick: _ctx.tableEvents.onRowDblclick,
-        onHeaderClick: _ctx.tableEvents.onHeaderClick,
-        onHeaderContextmenu: _ctx.tableEvents.onHeaderContextmenu,
-        onHeaderDragend: _ctx.tableEvents.onHeaderDragend,
-        onExpandChange: _ctx.tableEvents.onExpandChange,
-        onRowClick: _ctx.onRowClick,
-        onSelectionChange: _ctx.onSelectionChange,
-        onSortChange: _ctx.onSortChange,
-        onFilterChange: _ctx.onFilterChange,
-        onCurrentChange: _ctx.onCurrentChange
-      }), vue.createSlots({ _: 2 }, [
-        vue.renderList(Object.keys(_ctx.$slots).filter(
-          (k) => "default" !== k && "empty" !== k
-        ), (name) => {
+      _ctx.virtual ? (vue.openBlock(), vue.createBlock(_component_EleVirtualTable, vue.mergeProps({ key: 1 }, _ctx.tableProps, { ref: "tableViewRef" }), vue.createSlots({ _: 2 }, [
+        vue.renderList(_ctx.slotKeys, (name) => {
           return {
             name,
             fn: vue.withCtx((slotProps) => [
               vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
             ])
           };
-        }),
-        _ctx.tableEmptyProps || _ctx.$slots.empty ? {
-          name: "empty",
-          fn: vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "empty", {
-              text: _ctx.emptyText,
-              error: _ctx.errorText
-            }, () => [
-              _ctx.tableEmptyProps ? (vue.openBlock(), vue.createBlock(_component_ElEmpty, vue.mergeProps({
-                key: 0,
-                imageSize: 68
-              }, _ctx.tableEmptyProps === true ? {} : _ctx.emptyProps, {
-                class: "ele-table-empty",
-                description: _ctx.errorText || _ctx.emptyText
-              }), null, 16, ["description"])) : vue.createCommentVNode("", true)
+        })
+      ]), 1040)) : (vue.openBlock(), vue.createBlock(_component_EleDataTable, vue.mergeProps({ key: 2 }, _ctx.tableProps, { ref: "tableViewRef" }), vue.createSlots({ _: 2 }, [
+        vue.renderList(_ctx.slotKeys, (name) => {
+          return {
+            name,
+            fn: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
             ])
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1040, ["style", "onSelect", "onSelectAll", "onCellMouseEnter", "onCellMouseLeave", "onCellClick", "onCellDblclick", "onCellContextmenu", "onRowContextmenu", "onRowDblclick", "onHeaderClick", "onHeaderContextmenu", "onHeaderDragend", "onExpandChange", "onRowClick", "onSelectionChange", "onSortChange", "onFilterChange", "onCurrentChange"])) : vue.createCommentVNode("", true),
+          };
+        })
+      ]), 1040)),
       _ctx.paginationProps || _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
-        key: 2,
+        key: 3,
         class: "ele-pro-table-footer",
         style: vue.normalizeStyle(_ctx.footerStyle)
       }, [
@@ -601,7 +492,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "onUpdate:currentPage": _ctx.onPageCurrentChange,
           "onUpdate:pageSize": _ctx.onPageSizeChange
         }), vue.createSlots({ _: 2 }, [
-          vue.renderList(Object.keys(_ctx.$slots).filter((k) => "default" !== k), (name) => {
+          vue.renderList(_ctx.slotKeys, (name) => {
             return {
               name,
               fn: vue.withCtx((slotProps) => [