@shwfed/config 2.12.7 → 2.12.8

package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-single/config.d.vue.ts

@@ -85,8 +85,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
                 readonly target: string;
                 readonly operation: string;
             }[] | undefined;
-            readonly successMessage?: string | undefined;
             readonly accessor: string;
+            readonly successMessage?: string | undefined;
         };
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
@@ -172,8 +172,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
                 readonly target: string;
                 readonly operation: string;
             }[] | undefined;
-            readonly successMessage?: string | undefined;
             readonly accessor: string;
+            readonly successMessage?: string | undefined;
         };
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-single/config.vue.d.ts

@@ -85,8 +85,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
                 readonly target: string;
                 readonly operation: string;
             }[] | undefined;
-            readonly successMessage?: string | undefined;
             readonly accessor: string;
+            readonly successMessage?: string | undefined;
         };
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
@@ -172,8 +172,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
                 readonly target: string;
                 readonly operation: string;
             }[] | undefined;
-            readonly successMessage?: string | undefined;
             readonly accessor: string;
+            readonly successMessage?: string | undefined;
         };
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.tree-combobox-multi/config.d.vue.ts

@@ -45,10 +45,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly data: string;
             readonly request?: string | undefined;
         };
+        readonly enableSorting?: boolean | undefined;
         readonly nodeKey: string;
         readonly nodeChildren: string;
         readonly nodeLabel: string;
-        readonly enableSorting?: boolean | undefined;
         readonly cascade: "independent" | "cascade-down" | "cascade-both";
         readonly nodeTooltip?: readonly [{
             readonly locale: "zh";
@@ -104,10 +104,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly data: string;
             readonly request?: string | undefined;
         };
+        readonly enableSorting?: boolean | undefined;
         readonly nodeKey: string;
         readonly nodeChildren: string;
         readonly nodeLabel: string;
-        readonly enableSorting?: boolean | undefined;
         readonly cascade: "independent" | "cascade-down" | "cascade-both";
         readonly nodeTooltip?: readonly [{
             readonly locale: "zh";

package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.tree-combobox-multi/config.vue.d.ts

@@ -45,10 +45,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly data: string;
             readonly request?: string | undefined;
         };
+        readonly enableSorting?: boolean | undefined;
         readonly nodeKey: string;
         readonly nodeChildren: string;
         readonly nodeLabel: string;
-        readonly enableSorting?: boolean | undefined;
         readonly cascade: "independent" | "cascade-down" | "cascade-both";
         readonly nodeTooltip?: readonly [{
             readonly locale: "zh";
@@ -104,10 +104,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly data: string;
             readonly request?: string | undefined;
         };
+        readonly enableSorting?: boolean | undefined;
         readonly nodeKey: string;
         readonly nodeChildren: string;
         readonly nodeLabel: string;
-        readonly enableSorting?: boolean | undefined;
         readonly cascade: "independent" | "cascade-down" | "cascade-both";
         readonly nodeTooltip?: readonly [{
             readonly locale: "zh";

package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.tree-combobox-single/config.d.vue.ts

@@ -45,10 +45,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly data: string;
             readonly request?: string | undefined;
         };
+        readonly enableSorting?: boolean | undefined;
         readonly nodeKey: string;
         readonly nodeChildren: string;
         readonly nodeLabel: string;
-        readonly enableSorting?: boolean | undefined;
         readonly nodeTooltip?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -103,10 +103,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly data: string;
             readonly request?: string | undefined;
         };
+        readonly enableSorting?: boolean | undefined;
         readonly nodeKey: string;
         readonly nodeChildren: string;
         readonly nodeLabel: string;
-        readonly enableSorting?: boolean | undefined;
         readonly nodeTooltip?: readonly [{
             readonly locale: "zh";
             readonly message: string;

package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.tree-combobox-single/config.vue.d.ts

@@ -45,10 +45,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly data: string;
             readonly request?: string | undefined;
         };
+        readonly enableSorting?: boolean | undefined;
         readonly nodeKey: string;
         readonly nodeChildren: string;
         readonly nodeLabel: string;
-        readonly enableSorting?: boolean | undefined;
         readonly nodeTooltip?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -103,10 +103,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly data: string;
             readonly request?: string | undefined;
         };
+        readonly enableSorting?: boolean | undefined;
         readonly nodeKey: string;
         readonly nodeChildren: string;
         readonly nodeLabel: string;
-        readonly enableSorting?: boolean | undefined;
         readonly nodeTooltip?: readonly [{
             readonly locale: "zh";
             readonly message: string;

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

@@ -12,7 +12,7 @@ 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";
@@ -24,6 +24,7 @@ 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 +106,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) {
@@ -788,29 +790,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 +826,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 +835,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 +926,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 +970,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 +1025,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 -->