@shwfed/nuxt 0.7.10 → 0.8.0

package/dist/runtime/components/ui/input-group/InputGroupTextarea.vue

@@ -10,7 +10,7 @@ const props = defineProps({
   <Textarea
     data-slot="input-group-control"
     :class="cn(
-  'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none dark:bg-transparent',
+  'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none',
   props.class
 )"
   />

package/dist/runtime/components/ui/native-select/NativeSelect.d.vue.ts

@@ -9,9 +9,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": () => any;
+    "update:modelValue": (args_0: AcceptableValue) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: AcceptableValue) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/native-select/NativeSelect.vue

@@ -27,7 +27,7 @@ const delegatedProps = reactiveOmit(props, "class");
       v-model="modelValue"
       data-slot="native-select"
       :class="cn(
-  'border-zinc-200 placeholder:text-zinc-400 selection:bg-primary selection:text-primary-foreground dark:bg-zinc-200/30 dark:hover:bg-zinc-200/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+  'border-zinc-200 placeholder:text-zinc-400 selection:bg-primary selection:text-primary-foreground h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
   'focus-visible:border-(--primary)',
   'aria-invalid:border-red-400',
   props.class

package/dist/runtime/components/ui/native-select/NativeSelect.vue.d.ts

@@ -9,9 +9,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": () => any;
+    "update:modelValue": (args_0: AcceptableValue) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: AcceptableValue) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/switch/Switch.vue

@@ -29,13 +29,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     data-slot="switch"
     v-bind="forwarded"
     :class="cn(
-  'peer data-[state=checked]:bg-(--primary) data-[state=unchecked]:bg-zinc-200 focus-visible:border-(--primary) dark:data-[state=unchecked]:bg-zinc-200/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  'peer data-[state=checked]:bg-(--primary) data-[state=unchecked]:bg-zinc-200 focus-visible:border-(--primary) inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50',
   props.class
 )"
   >
     <SwitchThumb
       data-slot="switch-thumb"
-      :class="cn('bg-zinc-50 dark:data-[state=unchecked]:bg-zinc-800 dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0')"
+      :class="cn('bg-zinc-50 pointer-events-none block size-4 rounded-full transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0')"
     >
       <slot
         name="thumb"

package/dist/runtime/components/ui/table/Table.d.vue.ts

@@ -1,4 +1,4 @@
-import { type CellContext, type TableOptions } from '@tanstack/vue-table';
+import { type CellContext } from '@tanstack/vue-table';
 import { Effect } from 'effect';
 import { type TableConfig } from './schema.js';
 export type { Accessor, Column, Expression, Markdown, Render, TableConfig } from './schema.js';
@@ -37,9 +37,42 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
             grow?: boolean;
         }>[];
         cellStyles?: import("./schema.js").Expression;
-        props?: Omit<TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+        props?: Readonly<{
+            [key: string]: unknown;
+            initialState?: Readonly<{
+                columnVisibility?: Record<string, boolean>;
+                columnOrder?: ReadonlyArray<string>;
+                columnPinning?: Readonly<{
+                    left?: ReadonlyArray<string>;
+                    right?: ReadonlyArray<string>;
+                }>;
+                rowPinning?: Readonly<{
+                    top?: ReadonlyArray<string>;
+                    bottom?: ReadonlyArray<string>;
+                }>;
+                columnFilters?: ReadonlyArray<Readonly<{
+                    id: string;
+                    value: unknown;
+                }>>;
+                globalFilter?: unknown;
+                sorting?: ReadonlyArray<Readonly<{
+                    id: string;
+                    desc: boolean;
+                }>>;
+                expanded?: boolean | Record<string, boolean>;
+                grouping?: ReadonlyArray<string>;
+                columnSizing?: Record<string, number>;
+                columnSizingInfo?: Record<string, unknown>;
+                pagination?: Readonly<{
+                    pageIndex?: number;
+                    pageSize?: number;
+                }>;
+                rowSelection?: Record<string, boolean>;
+            }>;
+        }>;
         paginationLeft?: import("./schema.js").Markdown;
         paginationRight?: import("./schema.js").Markdown;
+        paginationPageSizes?: ReadonlyArray<number>;
     }>) => any;
 }, string, import("vue").PublicProps, Readonly<{
     config: Effect.Effect<TableConfig>;
@@ -65,9 +98,42 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
             grow?: boolean;
         }>[];
         cellStyles?: import("./schema.js").Expression;
-        props?: Omit<TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+        props?: Readonly<{
+            [key: string]: unknown;
+            initialState?: Readonly<{
+                columnVisibility?: Record<string, boolean>;
+                columnOrder?: ReadonlyArray<string>;
+                columnPinning?: Readonly<{
+                    left?: ReadonlyArray<string>;
+                    right?: ReadonlyArray<string>;
+                }>;
+                rowPinning?: Readonly<{
+                    top?: ReadonlyArray<string>;
+                    bottom?: ReadonlyArray<string>;
+                }>;
+                columnFilters?: ReadonlyArray<Readonly<{
+                    id: string;
+                    value: unknown;
+                }>>;
+                globalFilter?: unknown;
+                sorting?: ReadonlyArray<Readonly<{
+                    id: string;
+                    desc: boolean;
+                }>>;
+                expanded?: boolean | Record<string, boolean>;
+                grouping?: ReadonlyArray<string>;
+                columnSizing?: Record<string, number>;
+                columnSizingInfo?: Record<string, unknown>;
+                pagination?: Readonly<{
+                    pageIndex?: number;
+                    pageSize?: number;
+                }>;
+                rowSelection?: Record<string, boolean>;
+            }>;
+        }>;
         paginationLeft?: import("./schema.js").Markdown;
         paginationRight?: import("./schema.js").Markdown;
+        paginationPageSizes?: ReadonlyArray<number>;
     }>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     [key: string]: (props: Readonly<{

package/dist/runtime/components/ui/table/Table.vue

@@ -7,6 +7,7 @@ import {
   getCoreRowModel,
   getExpandedRowModel,
   getPaginationRowModel,
+  getSortedRowModel,
   useVueTable
 } from "@tanstack/vue-table";
 import { useVirtualizer } from "@tanstack/vue-virtual";
@@ -14,11 +15,17 @@ import { computedAsync } from "@vueuse/core";
 import { getProperty } from "dot-prop";
 import { Effect } from "effect";
 import { Pagination } from "reka-ui/namespaced";
-import { computed, ref, watchEffect } from "vue";
+import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTableRenderers } from "../../../composables/useTableRenderers";
-import { getLocalizedText, TableConfigC } from "./schema";
+import { getLocalizedText } from "../../../utils/coders";
+import {
+  normalizePaginationPageSizes,
+  resolvePaginationPageSize,
+  TableConfigC
+} from "./schema";
 import { Button } from "../button";
+import { NativeSelect, NativeSelectOption } from "../native-select";
 import { NumberField, NumberFieldInput } from "../number-field";
 import { Skeleton } from "../skeleton";
 import TableConfiguratorDialog from "../table-configurator/TableConfiguratorDialog.vue";
@@ -30,13 +37,19 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:config"]);
 const resolvedConfig = computedAsync(async () => TableConfigC.parse(await props.config.pipe(Effect.runPromise)));
+const currentConfig = ref();
 const { t, locale } = useI18n();
 const slots = defineSlots();
 const { $dsl } = useNuxtApp();
 const isCheating = useCheating();
 const { resolveTableRenderer } = useTableRenderers();
 const containerRef = ref(null);
-const appliedInitialStateConfig = ref();
+const appliedInitialStateKey = ref("");
+watch(resolvedConfig, (config) => {
+  if (config !== void 0) {
+    currentConfig.value = config;
+  }
+}, { immediate: true });
 function genColumnId(column) {
   if (typeof column.accessor === "string") {
     return column.accessor;
@@ -112,18 +125,37 @@ function translate(column) {
     ...renderer.columnDefOverrides
   };
 }
-const columns = computed(() => resolvedConfig.value?.columns.map((column) => translate(column)) ?? []);
+const columns = computed(() => currentConfig.value?.columns.map((column) => translate(column)) ?? []);
 const data = computed(() => props.data);
 const isManualPagination = computed(() => props.rowCount !== void 0);
 const totalItems = computed(() => props.rowCount ?? data.value.length);
-const paginationLeft = computed(() => resolvedConfig.value?.paginationLeft ?? "");
-const paginationRight = computed(() => resolvedConfig.value?.paginationRight ?? "");
+const paginationLeft = computed(() => currentConfig.value?.paginationLeft ?? "");
+const paginationRight = computed(() => currentConfig.value?.paginationRight ?? "");
+const resolvedPaginationPageSizes = computed(() => normalizePaginationPageSizes(currentConfig.value?.paginationPageSizes));
 const isConfiguratorOpen = ref(false);
 function handleConfiguratorConfirm(nextConfig) {
+  currentConfig.value = nextConfig;
   emit("update:config", nextConfig);
 }
+function handlePaginationPageSizeChange(value) {
+  const nextPageSize = Number(value);
+  if (!Number.isInteger(nextPageSize) || nextPageSize <= 0) {
+    return;
+  }
+  tableApi.setPageSize(nextPageSize);
+}
+function syncPaginationPageSize() {
+  const nextPageSize = resolvePaginationPageSize(
+    tableApi.getState().pagination.pageSize,
+    resolvedPaginationPageSizes.value
+  );
+  if (nextPageSize === void 0 || nextPageSize === tableApi.getState().pagination.pageSize) {
+    return;
+  }
+  tableApi.setPageSize(nextPageSize);
+}
 function getRowId(originalRow, index, parent) {
-  const expression = resolvedConfig.value?.getRowId;
+  const expression = currentConfig.value?.getRowId;
   if (!expression) {
     return parent ? `${parent.index}.${index}` : `${index}`;
   }
@@ -148,7 +180,7 @@ function getRowId(originalRow, index, parent) {
   return parent ? `${parent.index}.${index}` : `${index}`;
 }
 function getSubRows(row, index) {
-  const expression = resolvedConfig.value?.getSubRows;
+  const expression = currentConfig.value?.getSubRows;
   if (!expression) {
     return void 0;
   }
@@ -164,7 +196,7 @@ function getSubRows(row, index) {
   }
 }
 function enableRowSelection(row) {
-  const expression = resolvedConfig.value?.enableRowSelection;
+  const expression = currentConfig.value?.enableRowSelection;
   if (!expression) {
     return true;
   }
@@ -180,7 +212,7 @@ function enableRowSelection(row) {
   }
 }
 function enableMultiRowSelection(row) {
-  const expression = resolvedConfig.value?.enableMultiRowSelection;
+  const expression = currentConfig.value?.enableMultiRowSelection;
   if (!expression) {
     return true;
   }
@@ -204,6 +236,7 @@ const baseTableOptions = {
   getCoreRowModel: getCoreRowModel(),
   getExpandedRowModel: getExpandedRowModel(),
   getPaginationRowModel: getPaginationRowModel(),
+  getSortedRowModel: getSortedRowModel(),
   get manualPagination() {
     return isManualPagination.value;
   },
@@ -211,17 +244,17 @@ const baseTableOptions = {
     return props.rowCount;
   },
   get getRowId() {
-    return resolvedConfig.value?.getRowId ? getRowId : void 0;
+    return currentConfig.value?.getRowId ? getRowId : void 0;
   },
   getSubRows,
   enableRowSelection,
   get enableMultiRowSelection() {
-    return resolvedConfig.value?.enableMultiRowSelection ? enableMultiRowSelection : void 0;
+    return currentConfig.value?.enableMultiRowSelection ? enableMultiRowSelection : void 0;
   },
   columnResizeMode
 };
 function getConfigOption(property) {
-  const configOptions = resolvedConfig.value?.props;
+  const configOptions = currentConfig.value?.props;
   if (!configOptions) {
     return void 0;
   }
@@ -236,19 +269,19 @@ const tableOptions = new Proxy(baseTableOptions, {
     return getConfigOption(property);
   },
   has(target, property) {
-    const configOptions = resolvedConfig.value?.props;
+    const configOptions = currentConfig.value?.props;
     return Reflect.has(target, property) || (configOptions ? Reflect.has(configOptions, property) : false);
   },
   ownKeys(target) {
     const keys = [...Reflect.ownKeys(target)];
-    const configOptions = resolvedConfig.value?.props;
+    const configOptions = currentConfig.value?.props;
     if (configOptions) {
       keys.push(...Reflect.ownKeys(configOptions));
     }
     return Array.from(new Set(keys));
   },
   getOwnPropertyDescriptor(target, property) {
-    const configOptions = resolvedConfig.value?.props;
+    const configOptions = currentConfig.value?.props;
     if (!Reflect.has(target, property) && !(configOptions && Reflect.has(configOptions, property))) {
       return void 0;
     }
@@ -266,18 +299,22 @@ const tableOptions = new Proxy(baseTableOptions, {
   }
 });
 const tableApi = useVueTable(tableOptions);
-watchEffect(() => {
-  const config = resolvedConfig.value;
-  if (!config || appliedInitialStateConfig.value === config) {
+watch(currentConfig, (config) => {
+  if (!config) {
     return;
   }
   const initialState = config.props?.initialState;
-  if (initialState) {
-    tableApi.initialState = mergeInitialState(tableApi.initialState, initialState);
-    tableApi.reset();
+  const nextInitialStateKey = initialState ? JSON.stringify(initialState) : "";
+  if (appliedInitialStateKey.value === nextInitialStateKey || !initialState) {
+    appliedInitialStateKey.value = nextInitialStateKey;
+    syncPaginationPageSize();
+    return;
   }
-  appliedInitialStateConfig.value = config;
-});
+  tableApi.initialState = mergeInitialState(tableApi.initialState, initialState);
+  tableApi.reset();
+  appliedInitialStateKey.value = nextInitialStateKey;
+  syncPaginationPageSize();
+}, { immediate: true });
 defineExpose(tableApi);
 const rowVirtualizer = useVirtualizer(
   computed(() => ({
@@ -300,7 +337,7 @@ function isStyleRecord(x) {
   return typeof x === "object" && x !== null && !Array.isArray(x);
 }
 function getCellStyles(ctx) {
-  const expression = resolvedConfig.value?.cellStyles;
+  const expression = currentConfig.value?.cellStyles;
   if (!expression)
     return {};
   try {
@@ -350,6 +387,14 @@ function pinnedStyle(column) {
     style.boxShadow = "-5px 5px 5px #00000005";
   return style;
 }
+function shouldShowResizeHandle(column) {
+  const lastVisibleLeafColumn = tableApi.getVisibleLeafColumns().at(-1);
+  if (!lastVisibleLeafColumn) {
+    return false;
+  }
+  const lastLeafColumn = column.getLeafColumns().at(-1);
+  return lastLeafColumn?.id !== lastVisibleLeafColumn.id;
+}
 const SORT_ICONS = {
   unsorted: "fluent:arrow-sort-16-regular",
   asc: "fluent:arrow-sort-up-16-regular",
@@ -360,20 +405,75 @@ function getSortIcon(column) {
   const iconKey = sortDir === false ? "unsorted" : sortDir;
   return SORT_ICONS[iconKey];
 }
+function cloneItems(items) {
+  return items ? [...items] : void 0;
+}
+function isNullableNumber(value) {
+  return typeof value === "number" || value === null;
+}
+function normalizeExpandedState(expanded, current) {
+  if (expanded === void 0) {
+    return current;
+  }
+  if (expanded === true) {
+    return true;
+  }
+  if (expanded === false) {
+    return {};
+  }
+  return expanded;
+}
+function mergeColumnSizingInfo(current, next) {
+  if (!next) {
+    return current;
+  }
+  const merged = {
+    ...current
+  };
+  if (Array.isArray(next.columnSizingStart)) {
+    merged.columnSizingStart = next.columnSizingStart;
+  }
+  if (isNullableNumber(next.deltaOffset)) {
+    merged.deltaOffset = next.deltaOffset;
+  }
+  if (isNullableNumber(next.deltaPercentage)) {
+    merged.deltaPercentage = next.deltaPercentage;
+  }
+  if (next.isResizingColumn === false || typeof next.isResizingColumn === "string") {
+    merged.isResizingColumn = next.isResizingColumn;
+  }
+  if (isNullableNumber(next.startOffset)) {
+    merged.startOffset = next.startOffset;
+  }
+  if (isNullableNumber(next.startSize)) {
+    merged.startSize = next.startSize;
+  }
+  return merged;
+}
 function mergeInitialState(current, initialState) {
   return {
     ...current,
     columnVisibility: initialState.columnVisibility ?? current.columnVisibility,
-    columnOrder: initialState.columnOrder ?? current.columnOrder,
-    columnPinning: initialState.columnPinning ? { ...current.columnPinning, ...initialState.columnPinning } : current.columnPinning,
-    rowPinning: initialState.rowPinning ? { ...current.rowPinning, ...initialState.rowPinning } : current.rowPinning,
-    columnFilters: initialState.columnFilters ?? current.columnFilters,
+    columnOrder: cloneItems(initialState.columnOrder) ?? current.columnOrder,
+    columnPinning: initialState.columnPinning ? {
+      ...current.columnPinning,
+      ...initialState.columnPinning,
+      left: cloneItems(initialState.columnPinning.left) ?? current.columnPinning.left,
+      right: cloneItems(initialState.columnPinning.right) ?? current.columnPinning.right
+    } : current.columnPinning,
+    rowPinning: initialState.rowPinning ? {
+      ...current.rowPinning,
+      ...initialState.rowPinning,
+      top: cloneItems(initialState.rowPinning.top) ?? current.rowPinning.top,
+      bottom: cloneItems(initialState.rowPinning.bottom) ?? current.rowPinning.bottom
+    } : current.rowPinning,
+    columnFilters: cloneItems(initialState.columnFilters) ?? current.columnFilters,
     globalFilter: initialState.globalFilter ?? current.globalFilter,
-    sorting: initialState.sorting ?? current.sorting,
-    expanded: initialState.expanded ?? current.expanded,
-    grouping: initialState.grouping ?? current.grouping,
+    sorting: cloneItems(initialState.sorting) ?? current.sorting,
+    expanded: normalizeExpandedState(initialState.expanded, current.expanded),
+    grouping: cloneItems(initialState.grouping) ?? current.grouping,
     columnSizing: initialState.columnSizing ?? current.columnSizing,
-    columnSizingInfo: initialState.columnSizingInfo ?? current.columnSizingInfo,
+    columnSizingInfo: mergeColumnSizingInfo(current.columnSizingInfo, initialState.columnSizingInfo),
     pagination: initialState.pagination ? { ...current.pagination, ...initialState.pagination } : current.pagination,
     rowSelection: initialState.rowSelection ?? current.rowSelection
   };
@@ -388,6 +488,12 @@ function getSortLabel(column) {
   }
   return t("table-sort-unsorted");
 }
+function getColumnTooltipLabel(column) {
+  return t("table-column-tooltip", { column: column.id });
+}
+function getAccessorTooltipLabel(column) {
+  return t("table-column-accessor", { column: column.id });
+}
 </script>
 
 <script>
@@ -403,6 +509,8 @@ export { AccessorC, ColumnC, RenderC, TableConfigC } from "./schema";
       data-slot="table-configurator-trigger"
       variant="ghost"
       size="sm"
+      :aria-label="t('table-open-configurator')"
+      :title="t('table-open-configurator')"
       type="button"
       class="absolute right-3 top-3 z-20 bg-white/90 shadow-xs backdrop-blur-sm hover:bg-white"
       @click="isConfiguratorOpen = true"
@@ -411,9 +519,9 @@ export { AccessorC, ColumnC, RenderC, TableConfigC } from "./schema";
     </Button>
 
     <TableConfiguratorDialog
-      v-if="resolvedConfig"
+      v-if="currentConfig"
       v-model:open="isConfiguratorOpen"
-      :config="resolvedConfig"
+      :config="currentConfig"
       @confirm="handleConfiguratorConfirm"
     />
 
@@ -421,14 +529,14 @@ export { AccessorC, ColumnC, RenderC, TableConfigC } from "./schema";
       class="relative flex min-h-0 flex-1 flex-col"
     >
       <Skeleton
-        v-if="resolvedConfig === void 0"
+        v-if="currentConfig === void 0"
         class="absolute inset-0 z-10 w-full h-full"
       />
 
       <div
         :class="[
   'flex min-h-0 flex-1 flex-col',
-  resolvedConfig === void 0 && 'opacity-0'
+  currentConfig === void 0 && 'opacity-0'
 ]"
       >
         <div
@@ -472,7 +580,16 @@ export { AccessorC, ColumnC, RenderC, TableConfigC } from "./schema";
                       :delay-duration="180"
                     >
                       <TooltipTrigger as-child>
-                        <Icon icon="fluent:info-20-regular" />
+                        <button
+                          type="button"
+                          data-slot="table-column-tooltip-trigger"
+                          :aria-label="getColumnTooltipLabel(header.column)"
+                          class="inline-flex items-center justify-center text-zinc-500"
+                        >
+                          <Icon
+                            icon="fluent:info-20-regular"
+                          />
+                        </button>
                       </TooltipTrigger>
                       <TooltipContent
                         align="center"
@@ -487,7 +604,16 @@ export { AccessorC, ColumnC, RenderC, TableConfigC } from "./schema";
                       :delay-duration="180"
                     >
                       <TooltipTrigger as-child>
-                        <Icon icon="fluent:code-20-regular" />
+                        <button
+                          type="button"
+                          data-slot="table-column-accessor-trigger"
+                          :aria-label="getAccessorTooltipLabel(header.column)"
+                          class="inline-flex items-center justify-center text-zinc-500"
+                        >
+                          <Icon
+                            icon="fluent:code-20-regular"
+                          />
+                        </button>
                       </TooltipTrigger>
                       <TooltipContent
                         align="center"
@@ -518,6 +644,7 @@ export { AccessorC, ColumnC, RenderC, TableConfigC } from "./schema";
                         >
                           <button
                             type="button"
+                            :aria-label="getSortLabel(header.column)"
                             @click="header.column.getToggleSortingHandler()?.($event)"
                           >
                             <Icon :icon="getSortIcon(header.column)" />
@@ -530,7 +657,7 @@ export { AccessorC, ColumnC, RenderC, TableConfigC } from "./schema";
                     </Tooltip>
 
                     <div
-                      v-if="!header.isPlaceholder && header.column.getCanResize() && (!header.column.getIsLastColumn('right') || !tableApi.getIsSomeColumnsPinned('right') && !header.column.getIsLastColumn('center'))"
+                      v-if="!header.isPlaceholder && header.column.getCanResize() && shouldShowResizeHandle(header.column)"
                       :class="[
   'group',
   'absolute',
@@ -650,6 +777,27 @@ export { AccessorC, ColumnC, RenderC, TableConfigC } from "./schema";
                 <strong>{{ totalItems }}</strong>
               </template>
             </i18n-t>
+            <label
+              v-if="resolvedPaginationPageSizes"
+              data-slot="table-pagination-page-size"
+              class="flex items-center gap-2 text-xs text-zinc-500"
+            >
+              <NativeSelect
+                data-slot="table-pagination-page-size-select"
+                :model-value="tableApi.getState().pagination.pageSize"
+                :aria-label="t('pagination-page-size')"
+                class="h-7 min-w-20 rounded-sm px-2 py-1 pr-7 text-xs text-zinc-600"
+                @update:model-value="handlePaginationPageSizeChange"
+              >
+                <NativeSelectOption
+                  v-for="pageSize in resolvedPaginationPageSizes"
+                  :key="pageSize"
+                  :value="pageSize"
+                >
+                  {{ pageSize }}
+                </NativeSelectOption>
+              </NativeSelect>
+            </label>
             <Pagination.Root
               show-edges
               :total="totalItems"
@@ -749,7 +897,7 @@ export { AccessorC, ColumnC, RenderC, TableConfigC } from "./schema";
           </div>
           <div
             :class="[
-  'relative p-1 flex-1 prose prose-zinc text-xs'
+  'relative p-1 flex-1 prose prose-zinc text-xs text-right'
 ]"
           >
             <span
@@ -769,21 +917,33 @@ export { AccessorC, ColumnC, RenderC, TableConfigC } from "./schema";
 {
   "zh": {
     "total": "共 {count} 条",
+    "pagination-page-size": "每页条数",
     "goto": "前往 {page} 页",
+    "table-open-configurator": "打开表格配置",
+    "table-column-tooltip": "查看列提示：{column}",
+    "table-column-accessor": "查看列取值器：{column}",
     "table-sort-asc": "升序",
     "table-sort-desc": "降序",
     "table-sort-unsorted": "未排序"
   },
   "ja": {
     "total": "合計 {count} 件",
+    "pagination-page-size": "1ページあたりの件数",
     "goto": "ページ {page} に移動",
+    "table-open-configurator": "テーブル設定を開く",
+    "table-column-tooltip": "列ツールチップを表示: {column}",
+    "table-column-accessor": "列アクセサを表示: {column}",
     "table-sort-asc": "昇順",
     "table-sort-desc": "降順",
     "table-sort-unsorted": "未排序"
   },
   "en": {
     "total": "Total {count} items",
+    "pagination-page-size": "Page size",
     "goto": "Go to page {page}",
+    "table-open-configurator": "Open table configurator",
+    "table-column-tooltip": "Show column tooltip: {column}",
+    "table-column-accessor": "Show column accessor: {column}",
     "table-sort-asc": "Ascending",
     "table-sort-desc": "Descending",
     "table-sort-unsorted": "Unsorted"