@shwfed/config 2.12.7 → 2.12.9

package/dist/runtime/components/table/index.vue

@@ -12,18 +12,20 @@ import {
 import { useVirtualizer } from "@tanstack/vue-virtual";
 import { Effect, Fiber, Option } from "effect";
 import { Fetch } from "fx-fetch";
-import { Pagination } from "reka-ui/namespaced";
+import { Pagination, ScrollArea } from "reka-ui/namespaced";
 import { computed, h, onMounted, ref, toRaw, watch } from "vue";
 import { fetchJsonOption } from "../../share/request";
 import { useI18n } from "vue-i18n";
 import { celBindings, provideCELContext, injectCELContext } from "../../utils/cel-context";
 import TableRowProvider from "./row-provider.vue";
+import * as addRowOp from "../operations/2026-07-06/com.shwfed.operation.table.add-row/schema";
 import { getLocalizedText } from "../../share/locale";
 import { Button } from "../ui/button";
 import { Markdown } from "../ui/markdown";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { NumberField, NumberFieldInput } from "../ui/number-field";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { ScrollBar } from "../ui/scroll-area";
 import ShwfedActions from "../actions/components/group.vue";
 import ShwfedForm from "../form/index.vue";
 import { evaluateInitial } from "../form/utils/initial";
@@ -105,7 +107,8 @@ const { t, locale } = useI18n({
   }
 });
 const inheritedContext = injectCELContext();
-const containerRef = ref(null);
+const viewportRef = ref(null);
+const containerRef = computed(() => viewportRef.value?.viewportElement ?? null);
 const appliedInitialStateKey = ref("");
 const frozenGrowColumns = ref(/* @__PURE__ */ new Set());
 function isEffectiveGrow(column) {
@@ -490,6 +493,32 @@ provideEventTarget(tableInstanceId, {
   // `table` form field) sees the live list. Intended for client-side data:
   // with server pagination (`dataSource.total`) `rowData` is only the
   // current page, so a fetch will overwrite these edits.
+  // `add-row` is a host-coupled operation: it is declared in the operations
+  // registry for its param editor, but ships no generic `runtime.ts` (the
+  // append touches THIS instance's private `rowData`), so the handler is
+  // hand-wired here. Its optional `newRow` param is a CEL expression evaluated
+  // at click time against the *emit-site* scope (the dispatching button's own
+  // `cel`, where a row action's `row` is live). An object result seeds the new
+  // row; absent / non-object / evaluation error → a bare `{}` (the param-less
+  // default). Falls back to the table's own evaluator when no emit-site `cel`.
+  [addRowOp.type]: (params, cel) => {
+    const expr = params?.newRow;
+    if (!expr) {
+      return Effect.sync(() => {
+        rowData.value = [...rowData.value, {}];
+      });
+    }
+    return (cel ? cel(expr) : $cel(expr, mergeCelContext({}))).pipe(
+      Effect.map((result) => result !== null && typeof result === "object" && !Array.isArray(result) ? { ...result } : {}),
+      Effect.catchAll(() => Effect.succeed({})),
+      Effect.map((seed) => {
+        rowData.value = [...rowData.value, seed];
+      })
+    );
+  },
+  // Back-compat: triggers authored before `add-row` moved into the operations
+  // registry carry the bare `operation: 'add-row'` (no params). Keep appending
+  // an empty row for them.
   "add-row": () => Effect.sync(() => {
     rowData.value = [...rowData.value, {}];
   }),
@@ -788,29 +817,35 @@ export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema"
         @reset="resetCustomization"
       />
       <ClientOnly>
-        <!-- Scrollable table container -->
-        <div
-          ref="containerRef"
-          class="overflow-scroll overscroll-none flex-1 border border-zinc-200 rounded relative"
+        <!-- Scrollable table container: reka-ui ScrollArea replaces the native
+             scrollbar. The Viewport is the real scroll element (both axes, since
+             both ScrollBars are mounted) and the sticky thead / pinned columns
+             resolve against it. -->
+        <ScrollArea.Root
+          class="flex-1 min-h-0 border border-zinc-200 rounded relative overflow-hidden"
         >
-          <div :style="{ height: `${rowTotalSize}px` }">
-            <table class="grid">
-              <!-- Header -->
-              <thead
-                v-if="columns.length > 0"
-                class="grid sticky top-0 z-10 select-none"
-              >
-                <tr
-                  v-for="group in tableApi.getHeaderGroups()"
-                  :key="group.id"
-                  class="flex w-full border-b border-zinc-200"
+          <ScrollArea.Viewport
+            ref="viewportRef"
+            class="size-full overscroll-none"
+          >
+            <div :style="{ height: `${rowTotalSize}px` }">
+              <table class="grid">
+                <!-- Header -->
+                <thead
+                  v-if="columns.length > 0"
+                  class="grid sticky top-0 z-10 select-none"
                 >
-                  <th
-                    v-for="header in group.headers"
-                    :key="header.id"
-                    :colspan="header.colSpan"
-                    :data-col-id="header.column.id"
-                    :class="[
+                  <tr
+                    v-for="group in tableApi.getHeaderGroups()"
+                    :key="group.id"
+                    class="flex w-full border-b border-zinc-200"
+                  >
+                    <th
+                      v-for="header in group.headers"
+                      :key="header.id"
+                      :colspan="header.colSpan"
+                      :data-col-id="header.column.id"
+                      :class="[
   'flex items-center gap-2 border-zinc-300 py-2 text-zinc-600',
   'text-xs flex items-center justify-center relative',
   'bg-[color-mix(in_srgb,var(--primary)_7%,white)] group',
@@ -818,7 +853,7 @@ export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema"
   shouldHaveRightBorder(header.column) && 'border-r',
   shouldHaveLeftBorder(header.column) && 'border-l'
 ]"
-                    :style="{
+                      :style="{
   // Grow until first resize (see freezeGrowColumns): fill the
   // remaining space, with `width` as the flex-basis so the
   // configured size acts as a floor. Group headers grow by
@@ -827,82 +862,82 @@ export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema"
   ...headerGrowStyle(header),
   ...pinnedStyle(header.column)
 }"
-                  >
-                    <!-- Column header with tooltip: dashed underline + Markdown tooltip -->
-                    <Tooltip
-                      v-if="!header.isPlaceholder && header.column.columnDef.meta?.tooltip"
-                      :delay-duration="180"
                     >
-                      <TooltipTrigger as-child>
-                        <span class="decoration-dashed underline decoration-(--primary) underline-offset-4 px-4 cursor-help">
-                          <FlexRender
-                            :render="header.column.columnDef.header"
-                            :props="header.getContext()"
-                          />
-                        </span>
-                      </TooltipTrigger>
-                      <TooltipContent
-                        align="center"
-                        side="top"
-                        class="max-w-xs text-xs"
+                      <!-- Column header with tooltip: dashed underline + Markdown tooltip -->
+                      <Tooltip
+                        v-if="!header.isPlaceholder && header.column.columnDef.meta?.tooltip"
+                        :delay-duration="180"
                       >
-                        <Markdown
-                          :source="header.column.columnDef.meta.tooltip"
-                          class="prose prose-xs prose-zinc"
-                        />
-                      </TooltipContent>
-                    </Tooltip>
+                        <TooltipTrigger as-child>
+                          <span class="decoration-dashed underline decoration-(--primary) underline-offset-4 px-4 cursor-help">
+                            <FlexRender
+                              :render="header.column.columnDef.header"
+                              :props="header.getContext()"
+                            />
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent
+                          align="center"
+                          side="top"
+                          class="max-w-xs text-xs"
+                        >
+                          <Markdown
+                            :source="header.column.columnDef.meta.tooltip"
+                            class="prose prose-xs prose-zinc"
+                          />
+                        </TooltipContent>
+                      </Tooltip>
 
-                    <!-- Column header without tooltip: plain render -->
-                    <FlexRender
-                      v-else-if="!header.isPlaceholder"
-                      :render="header.column.columnDef.header"
-                      :props="header.getContext()"
-                    />
+                      <!-- Column header without tooltip: plain render -->
+                      <FlexRender
+                        v-else-if="!header.isPlaceholder"
+                        :render="header.column.columnDef.header"
+                        :props="header.getContext()"
+                      />
 
-                    <!-- Edit affordance: marks an editable column, hidden when
+                      <!-- Edit affordance: marks an editable column, hidden when
                          the column reads as readonly (form-wide or its own
                          `readonly` condition). -->
-                    <Icon
-                      v-if="!header.isPlaceholder && header.column.columnDef.meta?.editable && !isHeaderReadonly(header.column.columnDef.meta?.readonlyExpr)"
-                      icon="fluent:edit-20-regular"
-                      class="size-3 shrink-0 text-zinc-400"
-                      aria-hidden="true"
-                    />
+                      <Icon
+                        v-if="!header.isPlaceholder && header.column.columnDef.meta?.editable && !isHeaderReadonly(header.column.columnDef.meta?.readonlyExpr)"
+                        icon="fluent:edit-20-regular"
+                        class="size-3 shrink-0 text-zinc-400"
+                        aria-hidden="true"
+                      />
 
-                    <!-- Sort toggle -->
-                    <Tooltip
-                      v-if="!header.isPlaceholder && header.column.getCanSort()"
-                      :delay-duration="800"
-                    >
-                      <TooltipTrigger as-child>
-                        <Button
-                          variant="ghost"
-                          size="xs"
-                          :class="[
+                      <!-- Sort toggle -->
+                      <Tooltip
+                        v-if="!header.isPlaceholder && header.column.getCanSort()"
+                        :delay-duration="800"
+                      >
+                        <TooltipTrigger as-child>
+                          <Button
+                            variant="ghost"
+                            size="xs"
+                            :class="[
   'absolute hover:bg-transparent right-1 top-1/2 -translate-y-1/2 transform-3d transition-opacity duration-180',
   !header.column.getIsSorted() ? 'opacity-30 hover:opacity-60' : 'text-(--primary)/80 hover:text-(--primary)'
 ]"
-                          as-child
-                        >
-                          <button
-                            type="button"
-                            :aria-label="getSortLabel(header.column)"
-                            @click="header.column.getToggleSortingHandler()?.($event)"
+                            as-child
                           >
-                            <Icon :icon="getSortIcon(header.column)" />
-                          </button>
-                        </Button>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        {{ getSortLabel(header.column) }}
-                      </TooltipContent>
-                    </Tooltip>
+                            <button
+                              type="button"
+                              :aria-label="getSortLabel(header.column)"
+                              @click="header.column.getToggleSortingHandler()?.($event)"
+                            >
+                              <Icon :icon="getSortIcon(header.column)" />
+                            </button>
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          {{ getSortLabel(header.column) }}
+                        </TooltipContent>
+                      </Tooltip>
 
-                    <!-- Resize handle -->
-                    <div
-                      v-if="!header.isPlaceholder && header.column.getCanResize() && shouldShowResizeHandle(header.column)"
-                      :class="[
+                      <!-- Resize handle -->
+                      <div
+                        v-if="!header.isPlaceholder && header.column.getCanResize() && shouldShowResizeHandle(header.column)"
+                        :class="[
   'group',
   'absolute',
   'top-0',
@@ -918,40 +953,40 @@ export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema"
   'hover:opacity-100',
   'cursor-col-resize'
 ]"
-                      @mousedown="onResizeMouseDown(header, $event)"
-                    >
-                      <div class="w-2pt h-full translate-x-1pt transform-3d bg-[color-mix(in_srgb,var(--primary)_80%,white)]" />
-                    </div>
-                  </th>
-                </tr>
-              </thead>
+                        @mousedown="onResizeMouseDown(header, $event)"
+                      >
+                        <div class="w-2pt h-full translate-x-1pt transform-3d bg-[color-mix(in_srgb,var(--primary)_80%,white)]" />
+                      </div>
+                    </th>
+                  </tr>
+                </thead>
 
-              <!-- Body -->
-              <tbody
-                v-if="columns.length > 0"
-                class="grid relative"
-                :style="{ height: `${rowTotalSize}px` }"
-              >
-                <template
-                  v-for="r in rowWindow"
-                  :key="rows[r.index]?.id ?? r.index"
+                <!-- Body -->
+                <tbody
+                  v-if="columns.length > 0"
+                  class="grid relative"
+                  :style="{ height: `${rowTotalSize}px` }"
                 >
-                  <TableRowProvider
-                    v-if="rows[r.index]"
-                    :source-index="rows[r.index].index"
-                    :display-index="getDisplayIndex(rows[r.index])"
-                    :derived-columns="derivedEditableColumns"
-                    :get-row="getRowAt"
-                    :set-row="setRowAt"
-                    :scope-id="config?.id"
+                  <template
+                    v-for="r in rowWindow"
+                    :key="rows[r.index]?.id ?? r.index"
                   >
-                    <tr
-                      :ref="getRowRefFn(rows[r.index].id)"
-                      class="flex absolute w-full border-b border-zinc-300"
-                      :data-index="rows[r.index].index"
-                      :style="{ transform: `translate3d(0, ${r.start}px, 0)` }"
+                    <TableRowProvider
+                      v-if="rows[r.index]"
+                      :source-index="rows[r.index].index"
+                      :display-index="getDisplayIndex(rows[r.index])"
+                      :derived-columns="derivedEditableColumns"
+                      :get-row="getRowAt"
+                      :set-row="setRowAt"
+                      :scope-id="config?.id"
                     >
-                      <!--
+                      <tr
+                        :ref="getRowRefFn(rows[r.index].id)"
+                        class="flex absolute w-full border-b border-zinc-300"
+                        :data-index="rows[r.index].index"
+                        :style="{ transform: `translate3d(0, ${r.start}px, 0)` }"
+                      >
+                        <!--
                         Drop indicator. Absolutely positioned so it overlays
                         the row without affecting flex layout, and sits at
                         z-30 above sticky pinned cells (which use z-15) so
@@ -962,54 +997,54 @@ export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema"
                         to the same pixel band, so the indicator doesn't
                         jitter as the hitbox flips between them.
                       -->
-                      <span
-                        v-if="rowReorder.instructionFor(rows[r.index].id) === 'reorder-above'"
-                        aria-hidden="true"
-                        class="absolute left-0 right-0 -top-px h-0.5 z-30 pointer-events-none bg-(--primary)"
-                      />
-                      <span
-                        v-else-if="rowReorder.instructionFor(rows[r.index].id) === 'reorder-below'"
-                        aria-hidden="true"
-                        class="absolute left-0 right-0 -bottom-px h-0.5 z-30 pointer-events-none bg-(--primary)"
-                      />
-                      <td
-                        v-for="cell in rows[r.index].getVisibleCells()"
-                        :key="cell.id"
-                        :class="[
+                        <span
+                          v-if="rowReorder.instructionFor(rows[r.index].id) === 'reorder-above'"
+                          aria-hidden="true"
+                          class="absolute left-0 right-0 -top-px h-0.5 z-30 pointer-events-none bg-(--primary)"
+                        />
+                        <span
+                          v-else-if="rowReorder.instructionFor(rows[r.index].id) === 'reorder-below'"
+                          aria-hidden="true"
+                          class="absolute left-0 right-0 -bottom-px h-0.5 z-30 pointer-events-none bg-(--primary)"
+                        />
+                        <td
+                          v-for="cell in rows[r.index].getVisibleCells()"
+                          :key="cell.id"
+                          :class="[
   'border-zinc-300',
   isEffectiveGrow(cell.column) && 'flex-[1_1_auto]',
   cell.column.getIsPinned() && 'sticky z-15',
   shouldHaveRightBorder(cell.column) && 'border-r',
   shouldHaveLeftBorder(cell.column) && 'border-l'
 ]"
-                        :style="{
+                          :style="{
   width: `${cell.column.getSize()}px`,
   ...pinnedStyle(cell.column),
   ...getCellStyles(cell.getContext())
 }"
-                      >
-                        <FlexRender
-                          :render="cell.column.columnDef.cell"
-                          :props="cell.getContext()"
-                        />
-                      </td>
-                    </tr>
-                  </TableRowProvider>
-                </template>
-              </tbody>
+                        >
+                          <FlexRender
+                            :render="cell.column.columnDef.cell"
+                            :props="cell.getContext()"
+                          />
+                        </td>
+                      </tr>
+                    </TableRowProvider>
+                  </template>
+                </tbody>
 
-              <!-- Footer -->
-              <tfoot class="hidden has-data-footer:grid sticky bottom-0 z-10 select-none border-t border-zinc-200">
-                <tr
-                  v-for="group in tableApi.getFooterGroups()"
-                  :key="group.id"
-                  class="flex w-full border-zinc-200"
-                >
-                  <th
-                    v-for="header in group.headers"
-                    :key="header.id"
-                    :colspan="header.colSpan"
-                    :class="[
+                <!-- Footer -->
+                <tfoot class="hidden has-data-footer:grid sticky bottom-0 z-10 select-none border-t border-zinc-200">
+                  <tr
+                    v-for="group in tableApi.getFooterGroups()"
+                    :key="group.id"
+                    class="flex w-full border-zinc-200"
+                  >
+                    <th
+                      v-for="header in group.headers"
+                      :key="header.id"
+                      :colspan="header.colSpan"
+                      :class="[
   'flex items-center gap-2 border-zinc-300 text-zinc-600 p-0',
   'text-xs flex items-center justify-center relative',
   'bg-[color-mix(in_srgb,var(--primary)_7%,white)] group',
@@ -1017,23 +1052,27 @@ export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema"
   shouldHaveRightBorder(header.column) && 'border-r',
   shouldHaveLeftBorder(header.column) && 'border-l'
 ]"
-                    :style="{
+                      :style="{
   width: `${header.getSize()}px`,
   ...headerGrowStyle(header),
   ...pinnedStyle(header.column)
 }"
-                  >
-                    <FlexRender
-                      v-if="!header.isPlaceholder"
-                      :render="header.column.columnDef.footer"
-                      :props="header.getContext()"
-                    />
-                  </th>
-                </tr>
-              </tfoot>
-            </table>
-          </div>
-        </div>
+                    >
+                      <FlexRender
+                        v-if="!header.isPlaceholder"
+                        :render="header.column.columnDef.footer"
+                        :props="header.getContext()"
+                      />
+                    </th>
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
+          </ScrollArea.Viewport>
+          <ScrollBar orientation="vertical" />
+          <ScrollBar orientation="horizontal" />
+          <ScrollArea.Corner />
+        </ScrollArea.Root>
       </ClientOnly>
 
       <!-- Pagination -->

package/dist/runtime/components/table/schema.d.ts

@@ -24,7 +24,8 @@ export declare const metadata: {
         readonly name: "清空所有选中行";
         readonly icon: "fluent:select-all-off-20-regular";
     }, {
-        readonly id: "add-row";
+        readonly id: "com.shwfed.operation.table.add-row";
+        readonly compatibilityDate: "2026-07-06";
         readonly name: "新增一行";
         readonly icon: "fluent:add-20-regular";
     }, {
@@ -157,40 +158,6 @@ export declare function TableConfig(configure: (env: Environment) => void): Sche
             readonly message: string;
         }[]] | undefined;
     }[];
-    readonly query?: {
-        readonly style?: string | undefined;
-        readonly id?: string | undefined;
-        readonly initial?: {
-            readonly data: string;
-            readonly request?: string | undefined;
-        } | undefined;
-        readonly displayName?: string | undefined;
-        readonly kind: "shwfed.component.form";
-        readonly fields: readonly any[];
-        readonly layouts: readonly {
-            readonly name: string;
-            readonly layout: {
-                readonly style?: string | undefined;
-                readonly columns: number;
-                readonly gap?: number | undefined;
-                readonly rows?: number | undefined;
-                readonly placements: {
-                    readonly [x: string]: {
-                        readonly area: readonly [readonly [number, number], readonly [number, number]];
-                        readonly v?: "stretch" | "center" | "end" | "start" | undefined;
-                        readonly h?: "stretch" | "center" | "end" | "start" | undefined;
-                    };
-                };
-            };
-            readonly media?: string | undefined;
-        }[];
-        readonly readonly?: string | undefined;
-    } | undefined;
-    readonly dataSource?: {
-        readonly data: string;
-        readonly total?: string | undefined;
-        readonly request?: string | undefined;
-    } | undefined;
     readonly actions?: {
         readonly size: "default" | "sm" | "xs";
         readonly style?: string | undefined;
@@ -258,6 +225,40 @@ export declare function TableConfig(configure: (env: Environment) => void): Sche
             readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
         }[];
     } | undefined;
+    readonly query?: {
+        readonly style?: string | undefined;
+        readonly id?: string | undefined;
+        readonly initial?: {
+            readonly data: string;
+            readonly request?: string | undefined;
+        } | undefined;
+        readonly displayName?: string | undefined;
+        readonly kind: "shwfed.component.form";
+        readonly fields: readonly any[];
+        readonly layouts: readonly {
+            readonly name: string;
+            readonly layout: {
+                readonly style?: string | undefined;
+                readonly columns: number;
+                readonly gap?: number | undefined;
+                readonly rows?: number | undefined;
+                readonly placements: {
+                    readonly [x: string]: {
+                        readonly area: readonly [readonly [number, number], readonly [number, number]];
+                        readonly v?: "stretch" | "center" | "end" | "start" | undefined;
+                        readonly h?: "stretch" | "center" | "end" | "start" | undefined;
+                    };
+                };
+            };
+            readonly media?: string | undefined;
+        }[];
+        readonly readonly?: string | undefined;
+    } | undefined;
+    readonly dataSource?: {
+        readonly data: string;
+        readonly total?: string | undefined;
+        readonly request?: string | undefined;
+    } | undefined;
     readonly bottomActions?: {
         readonly size: "default" | "sm" | "xs";
         readonly style?: string | undefined;
@@ -826,40 +827,6 @@ export declare function createTableConfig(body: Omit<Schema.Schema.Type<ReturnTy
             readonly message: string;
         }[]] | undefined;
     }[];
-    query?: {
-        readonly style?: string | undefined;
-        readonly id?: string | undefined;
-        readonly initial?: {
-            readonly data: string;
-            readonly request?: string | undefined;
-        } | undefined;
-        readonly displayName?: string | undefined;
-        readonly kind: "shwfed.component.form";
-        readonly fields: readonly any[];
-        readonly layouts: readonly {
-            readonly name: string;
-            readonly layout: {
-                readonly style?: string | undefined;
-                readonly columns: number;
-                readonly gap?: number | undefined;
-                readonly rows?: number | undefined;
-                readonly placements: {
-                    readonly [x: string]: {
-                        readonly area: readonly [readonly [number, number], readonly [number, number]];
-                        readonly v?: "stretch" | "center" | "end" | "start" | undefined;
-                        readonly h?: "stretch" | "center" | "end" | "start" | undefined;
-                    };
-                };
-            };
-            readonly media?: string | undefined;
-        }[];
-        readonly readonly?: string | undefined;
-    } | undefined;
-    dataSource?: {
-        readonly data: string;
-        readonly total?: string | undefined;
-        readonly request?: string | undefined;
-    } | undefined;
     actions?: {
         readonly size: "default" | "sm" | "xs";
         readonly style?: string | undefined;
@@ -927,6 +894,40 @@ export declare function createTableConfig(body: Omit<Schema.Schema.Type<ReturnTy
             readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
         }[];
     } | undefined;
+    query?: {
+        readonly style?: string | undefined;
+        readonly id?: string | undefined;
+        readonly initial?: {
+            readonly data: string;
+            readonly request?: string | undefined;
+        } | undefined;
+        readonly displayName?: string | undefined;
+        readonly kind: "shwfed.component.form";
+        readonly fields: readonly any[];
+        readonly layouts: readonly {
+            readonly name: string;
+            readonly layout: {
+                readonly style?: string | undefined;
+                readonly columns: number;
+                readonly gap?: number | undefined;
+                readonly rows?: number | undefined;
+                readonly placements: {
+                    readonly [x: string]: {
+                        readonly area: readonly [readonly [number, number], readonly [number, number]];
+                        readonly v?: "stretch" | "center" | "end" | "start" | undefined;
+                        readonly h?: "stretch" | "center" | "end" | "start" | undefined;
+                    };
+                };
+            };
+            readonly media?: string | undefined;
+        }[];
+        readonly readonly?: string | undefined;
+    } | undefined;
+    dataSource?: {
+        readonly data: string;
+        readonly total?: string | undefined;
+        readonly request?: string | undefined;
+    } | undefined;
     bottomActions?: {
         readonly size: "default" | "sm" | "xs";
         readonly style?: string | undefined;