@shwfed/nuxt 0.7.8 → 0.7.10

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

@@ -0,0 +1,792 @@
+<script setup>
+import { useNuxtApp } from "#app";
+import { useCheating } from "#imports";
+import { Icon } from "@iconify/vue";
+import {
+  FlexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getPaginationRowModel,
+  useVueTable
+} from "@tanstack/vue-table";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+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 { useI18n } from "vue-i18n";
+import { useTableRenderers } from "../../../composables/useTableRenderers";
+import { getLocalizedText, TableConfigC } from "./schema";
+import { Button } from "../button";
+import { NumberField, NumberFieldInput } from "../number-field";
+import { Skeleton } from "../skeleton";
+import TableConfiguratorDialog from "../table-configurator/TableConfiguratorDialog.vue";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
+const props = defineProps({
+  config: { type: null, required: true },
+  data: { type: Array, required: true },
+  rowCount: { type: Number, required: false }
+});
+const emit = defineEmits(["update:config"]);
+const resolvedConfig = computedAsync(async () => TableConfigC.parse(await props.config.pipe(Effect.runPromise)));
+const { t, locale } = useI18n();
+const slots = defineSlots();
+const { $dsl } = useNuxtApp();
+const isCheating = useCheating();
+const { resolveTableRenderer } = useTableRenderers();
+const containerRef = ref(null);
+const appliedInitialStateConfig = ref();
+function genColumnId(column) {
+  if (typeof column.accessor === "string") {
+    return column.accessor;
+  } else if (column.accessor) {
+    return column.accessor.read;
+  } else if (column.id) {
+    return column.id;
+  }
+  return crypto.randomUUID();
+}
+function getColumnTitle(column) {
+  return getLocalizedText(column.title, locale.value) ?? genColumnId(column);
+}
+function getColumnTooltip(column) {
+  return getLocalizedText(column.tooltip, locale.value);
+}
+function translate(column) {
+  if (Array.isArray(column.columns) && column.columns.length > 0) {
+    return {
+      id: column.id ?? genColumnId(column),
+      header: getColumnTitle(column),
+      columns: column.columns?.map((column2) => translate(column2)) ?? [],
+      enableSorting: column.enableSorting ?? false,
+      enableMultiSort: column.enableMultiSorting,
+      enablePinning: column.enablePinning,
+      size: column.size,
+      meta: {
+        tooltip: getColumnTooltip(column),
+        grow: column.grow ?? false,
+        accessor: column.accessor
+      }
+    };
+  }
+  const renderer = resolveTableRenderer(typeof column.renderer === "string" ? column.renderer : column.renderer?.id ? column.renderer.id : "table.renderer.text");
+  const options = renderer.parseOptions(column.renderer && typeof column.renderer === "object" && "props" in column.renderer ? column.renderer.props : null);
+  return {
+    id: column.id ?? genColumnId(column),
+    header: (ctx) => renderer.header?.({ ctx, options }) ?? getColumnTitle(column),
+    cell: (ctx) => {
+      const slot = slots[ctx.column.id];
+      if (slot) {
+        return slot({ cell: ctx });
+      }
+      return renderer.cell({ ctx, options });
+    },
+    accessorFn: (row, index) => {
+      const key = column.accessor;
+      if (typeof key === "string") {
+        return getProperty(row, key);
+      } else if (key !== void 0) {
+        try {
+          return $dsl.evaluate`${key.read}`({
+            row,
+            index: BigInt(index)
+          });
+        } catch (e) {
+          console.error(e);
+          return void 0;
+        }
+      }
+      return void 0;
+    },
+    enableSorting: column.enableSorting ?? false,
+    enableMultiSort: column.enableMultiSorting,
+    enablePinning: column.enablePinning,
+    size: column.size,
+    columns: column.columns?.map((column2) => translate(column2)) ?? [],
+    meta: {
+      tooltip: getColumnTooltip(column),
+      grow: column.grow ?? false,
+      accessor: column.accessor
+    },
+    ...renderer.columnDefOverrides
+  };
+}
+const columns = computed(() => resolvedConfig.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 isConfiguratorOpen = ref(false);
+function handleConfiguratorConfirm(nextConfig) {
+  emit("update:config", nextConfig);
+}
+function getRowId(originalRow, index, parent) {
+  const expression = resolvedConfig.value?.getRowId;
+  if (!expression) {
+    return parent ? `${parent.index}.${index}` : `${index}`;
+  }
+  try {
+    const key = $dsl.evaluate`${expression}`(
+      {
+        row: originalRow,
+        index,
+        parent: parent ? {
+          id: parent.id,
+          index: BigInt(parent.index),
+          original: parent.original
+        } : null
+      }
+    );
+    if (typeof key === "string") {
+      return key;
+    }
+  } catch (e) {
+    console.error(e);
+  }
+  return parent ? `${parent.index}.${index}` : `${index}`;
+}
+function getSubRows(row, index) {
+  const expression = resolvedConfig.value?.getSubRows;
+  if (!expression) {
+    return void 0;
+  }
+  try {
+    const value = $dsl.evaluate`${expression}`({
+      row,
+      index
+    });
+    return Array.isArray(value) ? value : void 0;
+  } catch (e) {
+    console.error(e);
+    return void 0;
+  }
+}
+function enableRowSelection(row) {
+  const expression = resolvedConfig.value?.enableRowSelection;
+  if (!expression) {
+    return true;
+  }
+  try {
+    return Boolean($dsl.evaluate`${expression}`({
+      row: row.original,
+      index: BigInt(row.index),
+      id: row.id
+    }));
+  } catch (e) {
+    console.error(e);
+    return true;
+  }
+}
+function enableMultiRowSelection(row) {
+  const expression = resolvedConfig.value?.enableMultiRowSelection;
+  if (!expression) {
+    return true;
+  }
+  try {
+    return Boolean($dsl.evaluate`${expression}`({
+      row: row.original,
+      index: BigInt(row.index),
+      id: row.id
+    }));
+  } catch (e) {
+    console.error(e);
+    return true;
+  }
+}
+const columnResizeMode = "onChange";
+const baseTableOptions = {
+  get columns() {
+    return columns.value;
+  },
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  getExpandedRowModel: getExpandedRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  get manualPagination() {
+    return isManualPagination.value;
+  },
+  get rowCount() {
+    return props.rowCount;
+  },
+  get getRowId() {
+    return resolvedConfig.value?.getRowId ? getRowId : void 0;
+  },
+  getSubRows,
+  enableRowSelection,
+  get enableMultiRowSelection() {
+    return resolvedConfig.value?.enableMultiRowSelection ? enableMultiRowSelection : void 0;
+  },
+  columnResizeMode
+};
+function getConfigOption(property) {
+  const configOptions = resolvedConfig.value?.props;
+  if (!configOptions) {
+    return void 0;
+  }
+  return Reflect.get(configOptions, property);
+}
+const tableOptions = new Proxy(baseTableOptions, {
+  get(target, property, receiver) {
+    const baseValue = Reflect.get(target, property, receiver);
+    if (baseValue !== void 0) {
+      return baseValue;
+    }
+    return getConfigOption(property);
+  },
+  has(target, property) {
+    const configOptions = resolvedConfig.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;
+    if (configOptions) {
+      keys.push(...Reflect.ownKeys(configOptions));
+    }
+    return Array.from(new Set(keys));
+  },
+  getOwnPropertyDescriptor(target, property) {
+    const configOptions = resolvedConfig.value?.props;
+    if (!Reflect.has(target, property) && !(configOptions && Reflect.has(configOptions, property))) {
+      return void 0;
+    }
+    return {
+      configurable: true,
+      enumerable: true,
+      get() {
+        const baseValue = Reflect.get(target, property);
+        if (baseValue !== void 0) {
+          return baseValue;
+        }
+        return getConfigOption(property);
+      }
+    };
+  }
+});
+const tableApi = useVueTable(tableOptions);
+watchEffect(() => {
+  const config = resolvedConfig.value;
+  if (!config || appliedInitialStateConfig.value === config) {
+    return;
+  }
+  const initialState = config.props?.initialState;
+  if (initialState) {
+    tableApi.initialState = mergeInitialState(tableApi.initialState, initialState);
+    tableApi.reset();
+  }
+  appliedInitialStateConfig.value = config;
+});
+defineExpose(tableApi);
+const rowVirtualizer = useVirtualizer(
+  computed(() => ({
+    count: tableApi.getRowModel().rows.length,
+    estimateSize: () => 35,
+    getScrollElement: () => containerRef.value,
+    overscan: 30
+  }))
+);
+const rowTotalSize = computed(() => rowVirtualizer.value.getTotalSize());
+const rowWindow = computed(() => rowVirtualizer.value.getVirtualItems());
+function measureRow(el) {
+  if (!el || !(el instanceof Element))
+    return;
+  rowVirtualizer.value.measureElement(el);
+}
+const rows = computed(() => tableApi.getRowModel().rows);
+const maxPage = computed(() => Math.max(tableApi.getPageCount(), 1));
+function isStyleRecord(x) {
+  return typeof x === "object" && x !== null && !Array.isArray(x);
+}
+function getCellStyles(ctx) {
+  const expression = resolvedConfig.value?.cellStyles;
+  if (!expression)
+    return {};
+  try {
+    const result = $dsl.evaluate`${expression}`({
+      row: ctx.row.original,
+      index: BigInt(ctx.row.index),
+      id: ctx.column.id,
+      selected: ctx.row.getIsSelected(),
+      pinned: ctx.column.getIsPinned()
+    });
+    return isStyleRecord(result) ? result : {};
+  } catch (e) {
+    console.error(e);
+    return {};
+  }
+}
+function shouldHaveRightBorder(column) {
+  switch (column.getIsPinned()) {
+    case "left":
+      return true;
+    case "right":
+      return false;
+    case false:
+      return !column.getIsLastColumn("center");
+  }
+}
+function shouldHaveLeftBorder(column) {
+  switch (column.getIsPinned()) {
+    case "left":
+      return false;
+    case "right":
+      return true;
+    case false:
+      return false;
+  }
+}
+function pinnedStyle(column) {
+  const pinned = column.getIsPinned();
+  if (!pinned)
+    return {};
+  const style = {
+    [pinned]: pinned === "left" ? `${column.getStart("left")}px` : `${column.getAfter("right")}px`
+  };
+  if (column.getIsLastColumn("left"))
+    style.boxShadow = "5px 5px 5px #00000005";
+  if (column.getIsFirstColumn("right"))
+    style.boxShadow = "-5px 5px 5px #00000005";
+  return style;
+}
+const SORT_ICONS = {
+  unsorted: "fluent:arrow-sort-16-regular",
+  asc: "fluent:arrow-sort-up-16-regular",
+  desc: "fluent:arrow-sort-down-16-regular"
+};
+function getSortIcon(column) {
+  const sortDir = column.getIsSorted();
+  const iconKey = sortDir === false ? "unsorted" : sortDir;
+  return SORT_ICONS[iconKey];
+}
+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,
+    globalFilter: initialState.globalFilter ?? current.globalFilter,
+    sorting: initialState.sorting ?? current.sorting,
+    expanded: initialState.expanded ?? current.expanded,
+    grouping: initialState.grouping ?? current.grouping,
+    columnSizing: initialState.columnSizing ?? current.columnSizing,
+    columnSizingInfo: initialState.columnSizingInfo ?? current.columnSizingInfo,
+    pagination: initialState.pagination ? { ...current.pagination, ...initialState.pagination } : current.pagination,
+    rowSelection: initialState.rowSelection ?? current.rowSelection
+  };
+}
+function getSortLabel(column) {
+  const direction = column.getIsSorted();
+  if (direction === "asc") {
+    return t("table-sort-asc");
+  }
+  if (direction === "desc") {
+    return t("table-sort-desc");
+  }
+  return t("table-sort-unsorted");
+}
+</script>
+
+<script>
+export { AccessorC, ColumnC, RenderC, TableConfigC } from "./schema";
+</script>
+
+<template>
+  <div
+    class="relative flex h-full flex-col"
+  >
+    <Button
+      v-if="isCheating"
+      data-slot="table-configurator-trigger"
+      variant="ghost"
+      size="sm"
+      type="button"
+      class="absolute right-3 top-3 z-20 bg-white/90 shadow-xs backdrop-blur-sm hover:bg-white"
+      @click="isConfiguratorOpen = true"
+    >
+      <Icon icon="fluent:settings-20-regular" />
+    </Button>
+
+    <TableConfiguratorDialog
+      v-if="resolvedConfig"
+      v-model:open="isConfiguratorOpen"
+      :config="resolvedConfig"
+      @confirm="handleConfiguratorConfirm"
+    />
+
+    <div
+      class="relative flex min-h-0 flex-1 flex-col"
+    >
+      <Skeleton
+        v-if="resolvedConfig === 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'
+]"
+      >
+        <div
+          ref="containerRef"
+          class="overflow-scroll overscroll-none flex-1 border border-zinc-200 rounded relative"
+        >
+          <div :style="{ height: `${rowTotalSize}px` }">
+            <table class="grid">
+              <thead 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"
+                >
+                  <th
+                    v-for="header in group.headers"
+                    :key="header.id"
+                    :colspan="header.colSpan"
+                    :class="[
+  header.column.columnDef.meta?.grow && 'flex-1',
+  '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)_10%,white)] group',
+  header.column.getIsPinned() && 'sticky z-15',
+  shouldHaveRightBorder(header.column) && 'border-r',
+  shouldHaveLeftBorder(header.column) && 'border-l'
+]"
+                    :style="{
+  width: `${header.getSize()}px`,
+  ...pinnedStyle(header.column)
+}"
+                  >
+                    <FlexRender
+                      v-if="!header.isPlaceholder"
+                      :render="header.column.columnDef.header"
+                      :props="header.getContext()"
+                    />
+
+                    <Tooltip
+                      v-if="!header.isPlaceholder && header.column.columnDef.meta?.tooltip"
+                      :delay-duration="180"
+                    >
+                      <TooltipTrigger as-child>
+                        <Icon icon="fluent:info-20-regular" />
+                      </TooltipTrigger>
+                      <TooltipContent
+                        align="center"
+                        side="top"
+                      >
+                        <span v-html="$md.inline`${header.column.columnDef.meta?.tooltip}`()" />
+                      </TooltipContent>
+                    </Tooltip>
+
+                    <Tooltip
+                      v-if="!header.isPlaceholder && isCheating && header.column.columnDef.meta?.accessor"
+                      :delay-duration="180"
+                    >
+                      <TooltipTrigger as-child>
+                        <Icon icon="fluent:code-20-regular" />
+                      </TooltipTrigger>
+                      <TooltipContent
+                        align="center"
+                        side="top"
+                      >
+                        <template v-if="typeof header.column.columnDef.meta?.accessor === 'string'">
+                          <span class="font-mono">{{ header.column.columnDef.meta?.accessor }}</span>
+                        </template>
+                        <template v-else>
+                          <span class="font-mono">{{ JSON.stringify(header.column.columnDef.meta?.accessor) }}</span>
+                        </template>
+                      </TooltipContent>
+                    </Tooltip>
+
+                    <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"
+                            @click="header.column.getToggleSortingHandler()?.($event)"
+                          >
+                            <Icon :icon="getSortIcon(header.column)" />
+                          </button>
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {{ getSortLabel(header.column) }}
+                      </TooltipContent>
+                    </Tooltip>
+
+                    <div
+                      v-if="!header.isPlaceholder && header.column.getCanResize() && (!header.column.getIsLastColumn('right') || !tableApi.getIsSomeColumnsPinned('right') && !header.column.getIsLastColumn('center'))"
+                      :class="[
+  'group',
+  'absolute',
+  'top-0',
+  'bottom-0',
+  'right-0',
+  'px-2',
+  'translate-x-2',
+  'z-5',
+  'opacity-0',
+  'duration-150',
+  'transition-opacity',
+  'ease-out',
+  'hover:opacity-100',
+  'cursor-col-resize'
+]"
+                      @mousedown="header.getResizeHandler()($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>
+
+              <tbody
+                class="grid relative"
+                :style="{ height: `${rowTotalSize}px` }"
+              >
+                <tr
+                  v-for="r in rowWindow"
+                  :key="rows[r.index]?.id ?? r.index"
+                  :ref="measureRow"
+                  class="flex absolute w-full not-last:border-b border-zinc-300"
+                  :data-index="rows[r.index]?.index"
+                  :style="{ transform: `translate3d(0, ${r.start}px, 0)` }"
+                >
+                  <td
+                    v-for="cell in rows[r.index]?.getVisibleCells() ?? []"
+                    :key="cell.id"
+                    :class="[
+  'border-zinc-300',
+  cell.column.columnDef.meta?.grow && 'flex-1',
+  cell.column.getIsPinned() && 'sticky z-15',
+  shouldHaveRightBorder(cell.column) && 'border-r',
+  shouldHaveLeftBorder(cell.column) && 'border-l'
+]"
+                    :style="{
+  width: `${cell.column.getSize()}px`,
+  ...pinnedStyle(cell.column),
+  ...getCellStyles(cell.getContext())
+}"
+                  >
+                    <FlexRender
+                      :render="cell.column.columnDef.cell"
+                      :props="cell.getContext()"
+                    />
+                  </td>
+                </tr>
+              </tbody>
+
+              <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="[
+  header.column.columnDef.meta?.grow && 'flex-1',
+  '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)_10%,white)] group',
+  header.column.getIsPinned() && 'sticky z-15',
+  shouldHaveRightBorder(header.column) && 'border-r',
+  shouldHaveLeftBorder(header.column) && 'border-l'
+]"
+                    :style="{
+  width: `${header.getSize()}px`,
+  ...pinnedStyle(header.column)
+}"
+                  >
+                    <FlexRender
+                      v-if="!header.isPlaceholder"
+                      :render="header.column.columnDef.footer"
+                      :props="header.getContext()"
+                    />
+                  </th>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between w-full py-2 gap-2 text-sm text-zinc-600">
+          <div
+            :class="[
+  'relative p-1 flex-1 prose prose-zinc text-xs'
+]"
+          >
+            <span
+              v-html="$md.inline`${paginationLeft}`({
+  selected: tableApi.getSelectedRowModel().rows.map((row) => row.original)
+})"
+            />
+            &nbsp;
+          </div>
+          <div class="flex items-center gap-4">
+            <i18n-t
+              keypath="total"
+              tag="span"
+              class="text-xs"
+            >
+              <template #count>
+                <strong>{{ totalItems }}</strong>
+              </template>
+            </i18n-t>
+            <Pagination.Root
+              show-edges
+              :total="totalItems"
+              :items-per-page="tableApi.getState().pagination.pageSize"
+              :page="tableApi.getState().pagination.pageIndex + 1"
+              @update:page="(page2) => tableApi.setPageIndex(page2 - 1)"
+            >
+              <Pagination.List
+                v-slot="{ items }"
+                class="flex items-center gap-1"
+              >
+                <Pagination.First
+                  :class="[
+  'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
+  'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
+]"
+                >
+                  <Icon
+                    icon="radix-icons:double-arrow-left"
+                    class="w-4 h-4"
+                  />
+                </Pagination.First>
+                <Pagination.Prev
+                  :class="[
+  'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
+  'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
+]"
+                >
+                  <Icon
+                    icon="radix-icons:chevron-left"
+                    class="w-4 h-4"
+                  />
+                </Pagination.Prev>
+
+                <template
+                  v-for="(page, index) in items"
+                  :key="page.type === 'page' ? `${page.type}-${page.value}` : `${page.type}-${index}`"
+                >
+                  <Pagination.ListItem
+                    v-if="page.type === 'page'"
+                    :class="[
+  'w-7 h-7 flex items-center justify-center rounded text-xs bg-transparent',
+  'data-selected:text-(--primary) hover:bg-zinc-100 transition cursor-pointer'
+]"
+                    :value="page.value"
+                  >
+                    {{ page.value }}
+                  </Pagination.ListItem>
+                  <Pagination.Ellipsis
+                    v-else
+                    class="w-7 h-7 flex items-center justify-center text-zinc-400"
+                  >
+                    &#8230;
+                  </Pagination.Ellipsis>
+                </template>
+
+                <Pagination.Next
+                  :class="[
+  'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
+  'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
+]"
+                >
+                  <Icon
+                    icon="radix-icons:chevron-right"
+                    class="w-4 h-4"
+                  />
+                </Pagination.Next>
+                <Pagination.Last
+                  :class="[
+  'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
+  'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
+]"
+                >
+                  <Icon
+                    icon="radix-icons:double-arrow-right"
+                    class="w-4 h-4"
+                  />
+                </Pagination.Last>
+              </Pagination.List>
+            </Pagination.Root>
+            <i18n-t
+              keypath="goto"
+              tag="div"
+              class="text-xs flex items-center gap-2"
+            >
+              <template #page>
+                <NumberField
+                  :model-value="tableApi.getState().pagination.pageIndex + 1"
+                  :min="1"
+                  :max="maxPage"
+                  @update:model-value="(value) => tableApi.setPageIndex(value - 1)"
+                >
+                  <NumberFieldInput class="h-6 w-16 text-xs" />
+                </NumberField>
+              </template>
+            </i18n-t>
+          </div>
+          <div
+            :class="[
+  'relative p-1 flex-1 prose prose-zinc text-xs'
+]"
+          >
+            <span
+              v-html="$md.inline`${paginationRight}`({
+  selected: tableApi.getSelectedRowModel().rows.map((row) => row.original)
+})"
+            />
+            &nbsp;
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "total": "共 {count} 条",
+    "goto": "前往 {page} 页",
+    "table-sort-asc": "升序",
+    "table-sort-desc": "降序",
+    "table-sort-unsorted": "未排序"
+  },
+  "ja": {
+    "total": "合計 {count} 件",
+    "goto": "ページ {page} に移動",
+    "table-sort-asc": "昇順",
+    "table-sort-desc": "降順",
+    "table-sort-unsorted": "未排序"
+  },
+  "en": {
+    "total": "Total {count} items",
+    "goto": "Go to page {page}",
+    "table-sort-asc": "Ascending",
+    "table-sort-desc": "Descending",
+    "table-sort-unsorted": "Unsorted"
+  }
+}
+</i18n>