@byyuurin/ui 0.0.11 → 0.1.0

package/dist/runtime/components/Table.vue

@@ -1,23 +1,47 @@
 <script>
-
+import theme from "#build/ui/table";
 </script>
 
 <script setup>
 import { FlexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, useVueTable } from "@tanstack/vue-table";
-import { reactiveOmit } from "@vueuse/core";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { createReusableTemplate, reactiveOmit } from "@vueuse/core";
+import { defu } from "defu";
 import { Primitive } from "reka-ui";
 import { upperFirst } from "scule";
-import { computed } from "vue";
+import { computed, ref, shallowRef, toRef, watch } from "vue";
+import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
-import { useTheme } from "../composables/useTheme";
+import { cv, merge } from "../utils/style";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
   data: { type: Array, required: false },
   columns: { type: Array, required: false },
   caption: { type: String, required: false },
+  meta: { type: Object, required: false },
+  virtualize: { type: [Boolean, Object], required: false, default: false },
   empty: { type: String, required: false },
-  sticky: { type: Boolean, required: false },
+  sticky: { type: [Boolean, String], required: false },
   loading: { type: Boolean, required: false },
+  loadingColor: { type: null, required: false },
+  loadingAnimation: { type: null, required: false },
+  globalFilter: { type: String, required: false },
+  columnFilters: { type: Array, required: false },
+  columnOrder: { type: Array, required: false },
+  columnVisibility: { type: Object, required: false },
+  columnPinning: { type: Object, required: false },
+  columnSizing: { type: Object, required: false },
+  columnSizingInfo: { type: Object, required: false },
+  rowSelection: { type: Object, required: false },
+  rowPinning: { type: Object, required: false },
+  sorting: { type: Array, required: false },
+  grouping: { type: Array, required: false },
+  expanded: { type: [Boolean, Object], required: false },
+  pagination: { type: Object, required: false },
+  watchOptions: { type: Object, required: false, default: () => ({
+    deep: true
+  }) },
   globalFilterOptions: { type: Object, required: false },
   columnFiltersOptions: { type: Object, required: false },
   columnPinningOptions: { type: Object, required: false },
@@ -30,8 +54,11 @@ const props = defineProps({
   rowPinningOptions: { type: Object, required: false },
   paginationOptions: { type: Object, required: false },
   facetedOptions: { type: Object, required: false },
-  class: { type: null, required: false },
+  onSelect: { type: Function, required: false },
+  onHover: { type: Function, required: false },
+  onContextmenu: { type: [Function, Array], required: false },
   ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
   state: { type: Object, required: false },
   onStateChange: { type: Function, required: false },
   renderFallbackValue: { type: null, required: false },
@@ -47,10 +74,22 @@ const props = defineProps({
   getRowId: { type: Function, required: false },
   getSubRows: { type: Function, required: false },
   initialState: { type: Object, required: false },
-  mergeOptions: { type: Function, required: false },
-  meta: { type: Object, required: false }
+  mergeOptions: { type: Function, required: false }
 });
 const slots = defineSlots();
+const [DefineTableTemplate, ReuseTableTemplate] = createReusableTemplate();
+const [DefineRowTemplate, ReuseRowTemplate] = createReusableTemplate({
+  props: {
+    row: {
+      type: Object,
+      required: true
+    },
+    style: {
+      type: Object,
+      required: false
+    }
+  }
+});
 const globalFilterState = defineModel("globalFilter", { type: String, ...{ default: void 0 } });
 const columnFiltersState = defineModel("columnFilters", { type: Array, ...{ default: [] } });
 const columnOrderState = defineModel("columnOrder", { type: Array, ...{ default: [] } });
@@ -64,16 +103,48 @@ const sortingState = defineModel("sorting", { type: Array, ...{ default: [] } })
 const groupingState = defineModel("grouping", { type: Array, ...{ default: [] } });
 const expandedState = defineModel("expanded", { type: [Boolean, Object], ...{ default: {} } });
 const paginationState = defineModel("pagination", { type: Object, ...{ default: {} } });
-const data = computed(() => props.data ?? []);
+const rootRef = shallowRef();
+const tableRef = shallowRef(null);
+const data = ref(props.data ?? []);
+const meta = computed(() => props.meta ?? {});
 const columns = computed(
-  () => props.columns ?? Object.keys(data.value[0] ?? {}).map(
-    (accessorKey) => ({ accessorKey, header: upperFirst(accessorKey) })
-  )
+  () => processColumns(props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey) => ({ accessorKey, header: upperFirst(accessorKey) })))
 );
+function processColumns(columns2) {
+  return columns2.map((column) => {
+    const col = { ...column };
+    if ("columns" in col && col.columns)
+      col.columns = processColumns(col.columns);
+    if (!col.cell) {
+      col.cell = ({ getValue }) => {
+        const value = getValue();
+        if (value === "" || value === null || value === void 0)
+          return "\xA0";
+        return String(value);
+      };
+    }
+    return col;
+  });
+}
+const hasFooter = computed(() => {
+  function hasFooterRecursive(columns2) {
+    for (const column of columns2) {
+      if ("footer" in column)
+        return true;
+      if ("columns" in column && hasFooterRecursive(column.columns))
+        return true;
+    }
+    return false;
+  }
+  return hasFooterRecursive(columns.value);
+});
 const tableApi = useVueTable({
-  ...reactiveOmit(props, "data", "columns", "caption", "sticky", "loading", "class", "ui"),
+  ...reactiveOmit(props, "as", "data", "columns", "virtualize", "caption", "sticky", "loading", "loadingColor", "loadingAnimation", "class", "ui"),
   data,
-  columns: columns.value,
+  get columns() {
+    return columns.value;
+  },
+  meta: meta.value,
   getCoreRowModel: getCoreRowModel(),
   ...props.globalFilterOptions,
   onGlobalFilterChange: (updaterOrValue) => valueUpdater(updaterOrValue, globalFilterState),
@@ -145,80 +216,237 @@ const tableApi = useVueTable({
     }
   }
 });
-function valueUpdater(updaterOrValue, ref) {
-  ref.value = typeof updaterOrValue === "function" ? updaterOrValue(ref.value) : updaterOrValue;
+const rows = computed(() => tableApi.getRowModel().rows);
+const virtualizerProps = toRef(() => defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+  estimateSize: 65,
+  overscan: 12
+}));
+const virtualizer = !!props.virtualize && useVirtualizer({
+  ...virtualizerProps.value,
+  get count() {
+    return rows.value.length;
+  },
+  getScrollElement: () => rootRef.value?.$el,
+  estimateSize: () => virtualizerProps.value.estimateSize
+});
+function valueUpdater(updaterOrValue, ref2) {
+  ref2.value = typeof updaterOrValue === "function" ? updaterOrValue(ref2.value) : updaterOrValue;
+}
+function onRowSelect(e, row) {
+  if (!props.onSelect)
+    return;
+  const target = e.target;
+  const isInteractive = target.closest("button") || target.closest("a");
+  if (isInteractive)
+    return;
+  e.preventDefault();
+  e.stopPropagation();
+  props.onSelect(e, row);
+}
+function onRowHover(e, row) {
+  if (!props.onHover)
+    return;
+  props.onHover(e, row);
+}
+function onRowContextmenu(e, row) {
+  if (!props.onContextmenu)
+    return;
+  if (Array.isArray(props.onContextmenu))
+    props.onContextmenu.forEach((fn) => fn(e, row));
+  else
+    props.onContextmenu(e, row);
 }
+function resolveValue(prop, arg) {
+  if (typeof prop === "function") {
+    return prop(arg);
+  }
+  return prop;
+}
+watch(() => props.data, () => {
+  data.value = props.data ? [...props.data] : [];
+}, props.watchOptions);
 const { t } = useLocale();
-const { generateStyle } = useTheme();
-const style = computed(() => generateStyle("table", props));
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.table));
+  return styler({
+    ...props,
+    sticky: props.virtualize ? false : props.sticky,
+    virtualize: !!props.virtualize
+  });
+});
 defineExpose({
+  get $el() {
+    return rootRef.value?.$el;
+  },
+  tableRef,
   tableApi
 });
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })" data-part="root">
-    <table :class="style.base({ class: props.ui?.base })" data-part="base">
-      <caption v-if="props.caption || slots.caption" :class="style.caption({ class: props.caption })" data-part="caption">
+  <DefineRowTemplate v-slot="{ row, style }">
+    <tr
+      :role="props.onSelect ? 'button' : void 0"
+      :tabindex="props.onSelect ? 0 : void 0"
+      :class="ui.tr({
+  class: [
+    props.ui?.tr,
+    resolveValue(tableApi.options.meta?.class?.tr, row)
+  ]
+})"
+      :data-selected="row.getIsSelected()"
+      :data-selectable="!!props.onSelect || !!props.onHover || !!props.onContextmenu"
+      :data-expanded="row.getIsExpanded()"
+      data-part="tr"
+      :style="[resolveValue(tableApi.options.meta?.style?.tr, row), style]"
+      @click="onRowSelect($event, row)"
+      @pointerenter="onRowHover($event, row)"
+      @pointerleave="onRowHover($event, null)"
+      @contextmenu="onRowContextmenu($event, row)"
+    >
+      <td
+        v-for="cell in row.getVisibleCells()"
+        :key="cell.id"
+        :colspan="resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)"
+        :rowspan="resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)"
+        :class="ui.td({
+  class: [
+    props.ui?.td,
+    resolveValue(cell.column.columnDef.meta?.class?.td, cell)
+  ],
+  pinned: !!cell.column.getIsPinned()
+})"
+        :data-pinned="cell.column.getIsPinned()"
+        data-part="td"
+        :style="resolveValue(cell.column.columnDef.meta?.style?.td, cell)"
+      >
+        <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
+          <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+        </slot>
+      </td>
+    </tr>
+
+    <tr v-if="row.getIsExpanded()" :class="ui.tr({ class: props.ui?.tr })" data-part="tr">
+      <td :colspan="row.getAllCells().length" :class="ui.td({ class: props.ui?.td })" data-part="td">
+        <slot name="expanded" :row="row"></slot>
+      </td>
+    </tr>
+  </DefineRowTemplate>
+
+  <DefineTableTemplate>
+    <table ref="tableRef" :class="ui.base({ class: props.ui?.base })" data-part="base">
+      <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })" data-part="caption">
         <slot name="caption">
-          {{ props.caption }}
+          {{ caption }}
         </slot>
       </caption>
 
-      <thead :class="style.thead({ class: props.ui?.thead })" data-part="thead">
-        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="style.tr({ class: props.ui?.tr })" data-part="tr">
+      <thead :class="ui.thead({ class: [props.ui?.thead] })" data-part="thead">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })" data-part="tr">
           <th
             v-for="header in headerGroup.headers"
             :key="header.id"
             :data-pinned="header.column.getIsPinned()"
-            :class="style.th({ class: props.ui?.th, pinned: !!header.column.getIsPinned() })"
+            :scope="header.colSpan > 1 ? 'colgroup' : 'col'"
+            :colspan="header.colSpan > 1 ? header.colSpan : void 0"
+            :rowspan="header.rowSpan > 1 ? header.rowSpan : void 0"
+            :class="ui.th({
+  class: [
+    props.ui?.th,
+    resolveValue(header.column.columnDef.meta?.class?.th, header)
+  ],
+  pinned: !!header.column.getIsPinned()
+})"
             data-part="th"
           >
             <slot :name="`${header.id}-header`" v-bind="header.getContext()">
-              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext" />
+              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
             </slot>
           </th>
         </tr>
+
+        <tr :class="ui.separator({ class: [props.ui?.separator] })" data-part="separator"></tr>
       </thead>
 
-      <tbody :class="style.tbody({ class: props.ui?.tbody })" data-part="tbody">
-        <template v-if="tableApi.getRowModel().rows.length > 0">
-          <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
-            <tr :data-selected="row.getIsSelected()" :data-expanded="row.getIsExpanded()" :class="style.tr({ class: props.ui?.tr })">
-              <td
-                v-for="cell in row.getVisibleCells()"
-                :key="cell.id"
-                :class="style.td({ class: props.ui?.td, pinned: !!cell.column.getIsPinned() })"
-                data-part="td"
-                :data-pinned="cell.column.getIsPinned()"
-              >
-                <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
-                  <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
-                </slot>
-              </td>
-            </tr>
-            <tr v-if="row.getIsExpanded()" :class="style.tr({ class: props.ui?.tr, expanded: true })" data-part="tr">
-              <td :colspan="row.getAllCells().length" :class="style.td({ class: props.ui?.td })" data-part="td">
-                <slot name="expanded" :row="row"></slot>
-              </td>
-            </tr>
+      <tbody :class="ui.tbody({ class: [props.ui?.tbody] })" data-part="tbody">
+        <slot name="body-top"></slot>
+
+        <template v-if="rows.length">
+          <template v-if="virtualizer">
+            <template v-for="(virtualRow, index) in virtualizer.getVirtualItems()" :key="rows[virtualRow.index]?.id">
+              <ReuseRowTemplate
+                :row="rows[virtualRow.index]"
+                :style="{
+  height: `${virtualRow.size}px`,
+  transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`
+}"
+              />
+            </template>
+          </template>
+
+          <template v-else>
+            <ReuseRowTemplate v-for="row in rows" :key="row.id" :row="row" />
           </template>
         </template>
 
-        <tr v-else-if="props.loading && slots.loading">
-          <td :colspan="columns.length" :class="style.loading({ class: props.ui?.loading })" data-part="loading">
+        <tr v-else-if="props.loading && !!slots.loading">
+          <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.loading({ class: props.ui?.loading })" data-part="loading">
             <slot name="loading"></slot>
           </td>
         </tr>
 
-        <tr v-else :class="style.tr({ class: props.ui?.tr })" data-part="tr">
-          <td :colspan="columns.length" :class="style.empty({ class: props.ui?.empty })" data-part="empty">
+        <tr v-else>
+          <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.empty({ class: props.ui?.empty })" data-part="empty">
             <slot name="empty">
               {{ props.empty || t("table.noData") }}
             </slot>
           </td>
         </tr>
+
+        <slot name="body-bottom"></slot>
       </tbody>
+
+      <tfoot
+        v-if="hasFooter"
+        :class="ui.tfoot({ class: props.ui?.tfoot })"
+        data-part="tfoot"
+        :style="virtualizer ? {
+  transform: `translateY(${virtualizer.getTotalSize() - virtualizer.getVirtualItems().length * virtualizerProps.estimateSize}px)`
+} : void 0"
+      >
+        <tr :class="ui.separator({ class: props.ui?.separator })" data-part="separator"></tr>
+
+        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" :class="ui.tr({ class: props.ui?.tr })" data-part="tr">
+          <th
+            v-for="header in footerGroup.headers"
+            :key="header.id"
+            :data-pinned="header.column.getIsPinned()"
+            :colspan="header.colSpan > 1 ? header.colSpan : void 0"
+            :rowspan="header.rowSpan > 1 ? header.rowSpan : void 0"
+            :class="ui.th({
+  class: [
+    props.ui?.th,
+    resolveValue(header.column.columnDef.meta?.class?.th, header)
+  ],
+  pinned: !!header.column.getIsPinned()
+})"
+            data-part="th"
+            :style="resolveValue(header.column.columnDef.meta?.style?.th, header)"
+          >
+            <slot :name="`${header.id}-footer`" v-bind="header.getContext()">
+              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.footer" :props="header.getContext()" />
+            </slot>
+          </th>
+        </tr>
+      </tfoot>
     </table>
+  </DefineTableTemplate>
+
+  <Primitive ref="rootRef" :as="props.as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div v-if="virtualizer" :style="{ height: `${virtualizer.getTotalSize()}px` }">
+      <ReuseTableTemplate />
+    </div>
+    <ReuseTableTemplate v-else />
   </Primitive>
 </template>