@shwfed/nuxt 0.7.8 → 0.7.10

package/dist/runtime/components/table.vue

@@ -1,633 +1,68 @@
-<script>
-import { FlexRender, getCoreRowModel, getExpandedRowModel, getPaginationRowModel, useVueTable } from "@tanstack/vue-table";
-import { useVirtualizer } from "@tanstack/vue-virtual";
-import { Icon } from "@iconify/vue";
-import { getProperty } from "dot-prop";
-import { Pagination } from "reka-ui/namespaced";
-import { useI18n } from "vue-i18n";
-import { computed, ref } from "vue";
-import { useNuxtApp } from "#app";
-import { Button } from "./ui/button";
-import { NumberField, NumberFieldInput } from "./ui/number-field";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
-import { useTableRenderers } from "../composables/useTableRenderers";
-import { useCheating } from "#imports";
-import { defu } from "defu";
-</script>
-
 <script setup>
+import { ref } from "vue";
+import UiTable from "./ui/table/Table.vue";
+defineOptions({
+  inheritAttrs: false
+});
 const props = defineProps({
-  id: { type: String, required: true },
-  getRowId: { type: String, required: false, default: void 0 },
-  getSubRows: { type: String, required: false, default: void 0 },
-  enableRowSelection: { type: String, required: false, default: void 0 },
-  enableMultiRowSelection: { type: String, required: false, default: void 0 },
-  columns: { type: Array, required: true },
+  config: { type: null, required: true },
   data: { type: Array, required: true },
-  cellStyles: { type: String, required: false, default: void 0 },
-  props: { type: Object, required: false, default: void 0 },
-  paginationLeft: { type: String, required: false },
-  paginationRight: { type: String, required: false }
+  rowCount: { type: Number, required: false }
 });
-const { t } = useI18n({
-  messages: props.columns.reduce((acc, column) => {
-    function f(column2) {
-      return defu(
-        acc,
-        Object.fromEntries(
-          Object.entries(
-            column2.title ?? {}
-          ).map(([locale, message]) => [locale, { [genColumnId(column2)]: message }])
-        ),
-        column2.tooltip ? Object.fromEntries(Object.entries(column2.tooltip).map(([locale, message]) => [locale, { [`${genColumnId(column2)}-tooltip`]: message }])) : {},
-        ...column2.columns?.map((column3) => f(column3)) ?? []
-      );
-    }
-    return f(column);
-  }, {})
-});
-const slots = defineSlots();
-const { $dsl } = useNuxtApp();
-const isCheating = useCheating();
-const { resolveTableRenderer } = useTableRenderers();
-const containerRef = ref(null);
-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();
+const emit = defineEmits(["update:config"]);
+function handleConfigUpdate(config) {
+  emit("update:config", config);
 }
-function translate(column) {
-  if (Array.isArray(column.columns) && column.columns.length > 0) {
-    return {
-      id: column.id ?? genColumnId(column),
-      header: t(genColumnId(column)),
-      columns: column.columns?.map((column2) => translate(column2)) ?? [],
-      enableSorting: column.enableSorting ?? false,
-      enableMultiSort: column.enableMultiSorting,
-      enablePinning: column.enablePinning,
-      size: column.size,
-      meta: {
-        tooltip: column.tooltip ? `${genColumnId(column)}-tooltip` : void 0,
-        grow: column.grow ?? false
-      }
-    };
-  }
-  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 }) ?? t(genColumnId(column)),
-    cell: (ctx) => {
-      if (ctx.column.id in slots) {
-        return slots[ctx.column.id]?.({ cell: ctx });
-      }
-      return renderer.cell({ ctx, options });
-    },
-    accessorFn: (row, index) => {
-      const key = column.accessorKey ? column.accessorKey : 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: column.tooltip ? `${genColumnId(column)}-tooltip` : void 0,
-      grow: column.grow ?? false
-    },
-    ...renderer.columnDefOverrides
-  };
-}
-const columns = computed(() => {
-  return props.columns.map((column) => translate(column));
-});
-const table = useVueTable({
-  get columns() {
-    return columns.value;
-  },
-  get data() {
-    return props.data;
+const tableRef = ref(null);
+defineExpose(new Proxy({}, {
+  get(_target, property) {
+    return tableRef.value ? Reflect.get(tableRef.value, property) : void 0;
   },
-  getCoreRowModel: getCoreRowModel(),
-  getExpandedRowModel: getExpandedRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
-  getRowId: props.getRowId ? (originalRow, index, parent) => {
-    try {
-      const key = $dsl.evaluate`${props.getRowId}`(
-        {
-          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}`;
-  } : void 0,
-  getSubRows: (row, index) => {
-    if (!props.getSubRows)
-      return void 0;
-    try {
-      const value = $dsl.evaluate`${props.getSubRows}`({
-        row,
-        index
-      });
-      return Array.isArray(value) ? value : void 0;
-    } catch (e) {
-      console.error(e);
-      return void 0;
-    }
+  has(_target, property) {
+    return tableRef.value ? Reflect.has(tableRef.value, property) : false;
   },
-  enableRowSelection: (row) => {
-    if (!props.enableRowSelection)
-      return true;
-    try {
-      return Boolean($dsl.evaluate`${props.enableRowSelection}`({
-        row: row.original,
-        index: BigInt(row.index),
-        id: row.id
-      }));
-    } catch (e) {
-      console.error(e);
-      return true;
-    }
+  ownKeys() {
+    return tableRef.value ? Reflect.ownKeys(tableRef.value) : [];
   },
-  enableMultiRowSelection: props.enableMultiRowSelection ? (row) => {
-    try {
-      return Boolean($dsl.evaluate`${props.enableMultiRowSelection}`({
-        row: row.original,
-        index: BigInt(row.index),
-        id: row.id
-      }));
-    } catch (e) {
-      console.error(e);
-      return true;
+  getOwnPropertyDescriptor(_target, property) {
+    if (!tableRef.value || !Reflect.has(tableRef.value, property)) {
+      return void 0;
     }
-  } : void 0,
-  columnResizeMode: "onChange",
-  ...props.props
-});
-defineExpose(table);
-const rowVirtualizer = useVirtualizer(
-  computed(() => ({
-    count: table.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(() => table.getRowModel().rows);
-function isStyleRecord(x) {
-  return typeof x === "object" && x !== null && !Array.isArray(x);
-}
-function getCellStyles(ctx) {
-  if (!props.cellStyles)
-    return {};
-  try {
-    const result = $dsl.evaluate`${props.cellStyles}`({
-      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 !column.getIsLastColumn("right");
-    case false:
-      return !column.getIsLastColumn("center");
-  }
-}
-function shouldHaveLeftBorder(column) {
-  switch (column.getIsPinned()) {
-    case "left":
-      return false;
-    case "right":
-      return true;
-    case false:
-      return false;
+    return {
+      configurable: true,
+      enumerable: true,
+      get() {
+        if (!tableRef.value) {
+          return void 0;
+        }
+        return Reflect.get(tableRef.value, property);
+      }
+    };
   }
-}
-function pinnedStyle(column) {
-  const pinned = column.getIsPinned();
-  if (!pinned)
-    return {};
-  const style = {
-    [pinned]: `${column.getStart(pinned)}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];
-}
+}));
+</script>
+
+<script>
+export { AccessorC, ColumnC, RenderC, TableConfigC } from "./ui/table/schema";
 </script>
 
 <template>
-  <div
-    class="flex flex-col h-full"
+  <UiTable
+    ref="tableRef"
+    v-bind="$attrs"
+    :config="props.config"
+    :data="props.data"
+    :row-count="props.rowCount"
+    @update:config="handleConfigUpdate"
   >
-    <div
-      ref="containerRef"
-      class="overflow-scroll overscroll-none flex-1 border border-zinc-200 rounded relative"
+    <template
+      v-for="(_, slotName) in $slots"
+      #[slotName]="slotProps"
     >
-      <div :style="{ height: `${rowTotalSize}px` }">
-        <table class="grid">
-          <thead class="grid sticky top-0 z-10 select-none">
-            <tr
-              v-for="group in table.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`${t(`${header.column.id}-tooltip`)}`()" />
-                  </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>
-                    {{
-                      header.column.getIsSorted() ? t(`table-sort-${header.column.getIsSorted()}`) : t("table-sort-unsorted")
-                    }}
-                  </TooltipContent>
-                </Tooltip>
-
-                <div
-                  v-if="!header.isPlaceholder && header.column.getCanResize() && (!header.column.getIsLastColumn('right') || !table.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 table.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 border border-dashed',
-  isCheating ? 'border-(--primary)/20 rounded hover:border-(--primary)/40 transition-colors duration-150 group cursor-pointer' : 'border-transparent'
-]"
-      >
-        <span
-          v-html="$md.inline`${props.paginationLeft}`({
-  selected: table.getSelectedRowModel().rows.map((row) => row.original)
-})"
-        />
-        <Icon
-          v-if="isCheating"
-          icon="fluent:edit-20-regular"
-          class="w-4 h-4 text-(--primary) absolute right-1 top-1/2 -translate-y-1/2 transform-3d group-hover:opacity-100 opacity-50 transition-opacity duration-150"
-        />
-            &nbsp;
-      </div>
-      <div class="flex items-center gap-4">
-        <i18n-t
-          keypath="total"
-          tag="span"
-          class="text-xs"
-        >
-          <template #count>
-            <strong>{{ props.data.length }}</strong>
-          </template>
-        </i18n-t>
-        <Pagination.Root
-          show-edges
-          :total="props.data.length"
-          :items-per-page="table.getState().pagination.pageSize"
-          :page="table.getState().pagination.pageIndex + 1"
-          @update:page="(page2) => table.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="table.getState().pagination.pageIndex + 1"
-              :min="1"
-              :max="Math.ceil(props.data.length / table.getState().pagination.pageSize)"
-              @update:model-value="(value) => table.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 border border-dashed',
-  isCheating ? 'border-(--primary)/20 rounded hover:border-(--primary)/40 transition-colors duration-150 group cursor-pointer' : 'border-transparent'
-]"
-      >
-        <span
-          v-html="$md.inline`${props.paginationRight}`({
-  selected: table.getSelectedRowModel().rows.map((row) => row.original)
-})"
-        />
-        <Icon
-          v-if="isCheating"
-          icon="fluent:edit-20-regular"
-          class="w-4 h-4 text-(--primary) absolute right-1 top-1/2 -translate-y-1/2 transform-3d group-hover:opacity-100 opacity-50 transition-opacity duration-150"
-        />
-            &nbsp;
-      </div>
-    </div>
-  </div>
+      <slot
+        :name="slotName"
+        v-bind="slotProps ?? {}"
+      />
+    </template>
+  </UiTable>
 </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>