@byyuurin/ui 0.1.0 → 0.3.0

package/dist/runtime/components/Stepper.vue.d.ts

@@ -0,0 +1,83 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { StepperRootEmits, StepperRootProps } from 'reka-ui';
+import theme from '#build/ui/stepper';
+import type { ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { DynamicSlots, StaticSlot } from '../types/utils';
+export interface StepperItem extends ComponentBaseProps {
+    slot?: string;
+    value?: string | number;
+    title?: string;
+    description?: string;
+    icon?: IconProps['name'];
+    content?: string;
+    disabled?: boolean;
+    ui?: Pick<ComponentUIProps<typeof theme>, 'item' | 'container' | 'trigger' | 'indicator' | 'icon' | 'separator' | 'wrapper' | 'title' | 'description'>;
+    [key: string]: any;
+}
+type ThemeVariants = VariantProps<typeof theme>;
+export interface StepperProps<T extends StepperItem = StepperItem> extends ComponentBaseProps, Pick<StepperRootProps, 'linear'> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: StepperRootProps['as'];
+    items?: T[];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /** @default "horizontal" */
+    orientation?: ThemeVariants['orientation'];
+    defaultValue?: string | number;
+    modelValue?: string | number;
+    disabled?: boolean;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export type StepperEmits<T extends StepperItem = StepperItem> = Omit<StepperRootEmits, 'update:modelValue'> & {
+    next: [value: T];
+    prev: [value: T];
+};
+export type StepperSlots<T extends StepperItem = StepperItem> = {
+    indicator: StaticSlot<{
+        item: T;
+        ui: ComponentUIProps<typeof theme>;
+    }>;
+    title: StaticSlot<{
+        item: T;
+    }>;
+    description: StaticSlot<{
+        item: T;
+    }>;
+    content: StaticSlot<{
+        item: T;
+    }>;
+} & DynamicSlots<T>;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends StepperItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(StepperProps<T> & {
+        modelValue?: string | number;
+    }) & {
+        onPrev?: ((value: T) => any) | undefined;
+        onNext?: ((value: T) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        next(): void;
+        prev(): void;
+        hasNext: import("vue").ComputedRef<boolean>;
+        hasPrev: import("vue").ComputedRef<boolean>;
+    }>) => void;
+    attrs: any;
+    slots: StepperSlots<T>;
+    emit: (((evt: "prev", value: T) => void) & ((evt: "next", value: T) => void)) & ((evt: "update:modelValue", value: string | number | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Switch.vue

@@ -58,34 +58,34 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div :class="ui.container({ class: props.ui?.container })" data-part="container">
-      <SwitchRoot
-        v-bind="{ id, ...rootProps, ...ariaAttrs, name }"
-        v-model="modelValue"
-        :disabled="disabled || props.loading"
-        :class="ui.base({ class: props.ui?.base })"
-        data-part="base"
-        @update:model-value="onUpdate"
-      >
-        <SwitchThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb">
-          <Icon v-if="props.loading" :name="props.loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" data-part="icon" />
-          <template v-else>
-            <Icon v-if="props.checkedIcon" :name="props.checkedIcon" :class="ui.icon({ class: props.ui?.icon, checked: true })" data-part="icon" />
-            <Icon v-if="props.uncheckedIcon" :name="props.uncheckedIcon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" data-part="icon" />
-          </template>
-        </SwitchThumb>
-      </SwitchRoot>
-    </div>
-    <div v-if="props.label || !!slots.label || (props.description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <Label v-if="props.label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })" data-part="label">
-        <slot name="label" :label="props.label">{{ props.label }}</slot>
-      </Label>
-      <p v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
-        <slot name="description" :description="props.description">
-          {{ props.description }}
-        </slot>
-      </p>
-    </div>
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div :class="ui.container({ class: props.ui?.container })" data-part="container">
+      <SwitchRoot
+        v-bind="{ id, ...rootProps, ...ariaAttrs, name }"
+        v-model="modelValue"
+        :disabled="disabled || props.loading"
+        :class="ui.base({ class: props.ui?.base })"
+        data-part="base"
+        @update:model-value="onUpdate"
+      >
+        <SwitchThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb">
+          <Icon v-if="props.loading" :name="props.loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" data-part="icon" />
+          <template v-else>
+            <Icon v-if="props.checkedIcon" :name="props.checkedIcon" :class="ui.icon({ class: props.ui?.icon, checked: true })" data-part="icon" />
+            <Icon v-if="props.uncheckedIcon" :name="props.uncheckedIcon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" data-part="icon" />
+          </template>
+        </SwitchThumb>
+      </SwitchRoot>
+    </div>
+    <div v-if="props.label || !!slots.label || (props.description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <Label v-if="props.label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })" data-part="label">
+        <slot name="label" :label="props.label">{{ props.label }}</slot>
+      </Label>
+      <p v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
+        </slot>
+      </p>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Switch.vue.d.ts

@@ -2,9 +2,10 @@ import type { VariantProps } from '@byyuurin/ui-kit';
 import type { SwitchRootProps } from 'reka-ui';
 import theme from '#build/ui/switch';
 import type { ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { ButtonHTMLAttributes } from '../types/html';
 import type { StaticSlot } from '../types/utils';
 type ThemeVariants = VariantProps<typeof theme>;
-export interface SwitchProps extends ComponentBaseProps, Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
+export interface SwitchProps extends ComponentBaseProps, Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'value' | 'name'> {
     /**
      * The element or component this component should render as.
      *  @default "div"
@@ -42,6 +43,8 @@ export interface SwitchSlots {
         description?: string;
     }>;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (event: Event) => any;
     "update:modelValue": (value: boolean) => any;
@@ -49,8 +52,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Switch
     onChange?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SwitchSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Table.vue

@@ -5,9 +5,9 @@ import theme from "#build/ui/table";
 <script setup>
 import { FlexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, useVueTable } from "@tanstack/vue-table";
 import { useVirtualizer } from "@tanstack/vue-virtual";
-import { createReusableTemplate, reactiveOmit } from "@vueuse/core";
+import { createReusableTemplate, reactivePick } from "@vueuse/core";
 import { defu } from "defu";
-import { Primitive } from "reka-ui";
+import { Primitive, useForwardProps } from "reka-ui";
 import { upperFirst } from "scule";
 import { computed, ref, shallowRef, toRef, watch } from "vue";
 import { useAppConfig } from "#imports";
@@ -90,19 +90,19 @@ const [DefineRowTemplate, ReuseRowTemplate] = createReusableTemplate({
     }
   }
 });
-const globalFilterState = defineModel("globalFilter", { type: String, ...{ default: void 0 } });
-const columnFiltersState = defineModel("columnFilters", { type: Array, ...{ default: [] } });
-const columnOrderState = defineModel("columnOrder", { type: Array, ...{ default: [] } });
-const columnVisibilityState = defineModel("columnVisibility", { type: Object, ...{ default: {} } });
-const columnPinningState = defineModel("columnPinning", { type: Object, ...{ default: {} } });
-const columnSizingState = defineModel("columnSizing", { type: Object, ...{ default: {} } });
-const columnSizingInfoState = defineModel("columnSizingInfo", { type: Object, ...{ default: {} } });
-const rowSelectionState = defineModel("rowSelection", { type: Object, ...{ default: {} } });
-const rowPinningState = defineModel("rowPinning", { type: Object, ...{ default: {} } });
-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 globalFilterState = defineModel("globalFilter", { type: String });
+const columnFiltersState = defineModel("columnFilters", { type: Array });
+const columnOrderState = defineModel("columnOrder", { type: Array });
+const columnVisibilityState = defineModel("columnVisibility", { type: Object });
+const columnPinningState = defineModel("columnPinning", { type: Object });
+const columnSizingState = defineModel("columnSizing", { type: Object });
+const columnSizingInfoState = defineModel("columnSizingInfo", { type: Object });
+const rowSelectionState = defineModel("rowSelection", { type: Object });
+const rowPinningState = defineModel("rowPinning", { type: Object });
+const sortingState = defineModel("sorting", { type: Array });
+const groupingState = defineModel("grouping", { type: Array });
+const expandedState = defineModel("expanded", { type: [Boolean, Object] });
+const paginationState = defineModel("pagination", { type: Object });
 const rootRef = shallowRef();
 const tableRef = shallowRef(null);
 const data = ref(props.data ?? []);
@@ -138,41 +138,44 @@ const hasFooter = computed(() => {
   }
   return hasFooterRecursive(columns.value);
 });
+const tableProps = useForwardProps(reactivePick(props, "_features", "autoResetAll", "debugAll", "debugCells", "debugColumns", "debugHeaders", "debugRows", "debugTable", "defaultColumn", "getRowId", "getSubRows", "initialState", "mergeOptions", "renderFallbackValue"));
 const tableApi = useVueTable({
-  ...reactiveOmit(props, "as", "data", "columns", "virtualize", "caption", "sticky", "loading", "loadingColor", "loadingAnimation", "class", "ui"),
-  data,
+  ...tableProps.value,
+  get data() {
+    return data.value;
+  },
   get columns() {
     return columns.value;
   },
   meta: meta.value,
   getCoreRowModel: getCoreRowModel(),
   ...props.globalFilterOptions,
-  onGlobalFilterChange: (updaterOrValue) => valueUpdater(updaterOrValue, globalFilterState),
+  ...globalFilterState.value !== void 0 && { onGlobalFilterChange: (updaterOrValue) => valueUpdater(updaterOrValue, globalFilterState) },
   ...props.columnFiltersOptions,
   getFilteredRowModel: getFilteredRowModel(),
-  onColumnFiltersChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnFiltersState),
-  onColumnOrderChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnOrderState),
+  ...columnFiltersState.value !== void 0 && { onColumnFiltersChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnFiltersState) },
+  ...columnOrderState.value !== void 0 && { onColumnOrderChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnOrderState) },
   ...props.visibilityOptions,
-  onColumnVisibilityChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnVisibilityState),
+  ...columnVisibilityState.value !== void 0 && { onColumnVisibilityChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnVisibilityState) },
   ...props.columnPinningOptions,
-  onColumnPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnPinningState),
+  ...columnPinningState.value !== void 0 && { onColumnPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnPinningState) },
   ...props.columnSizingOptions,
-  onColumnSizingChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingState),
-  onColumnSizingInfoChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingInfoState),
+  ...columnSizingState.value !== void 0 && { onColumnSizingChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingState) },
+  ...columnSizingInfoState.value !== void 0 && { onColumnSizingInfoChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingInfoState) },
   ...props.rowSelectionOptions,
-  onRowSelectionChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowSelectionState),
+  ...rowSelectionState.value !== void 0 && { onRowSelectionChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowSelectionState) },
   ...props.rowPinningOptions,
-  onRowPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowPinningState),
+  ...rowPinningState.value !== void 0 && { onRowPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowPinningState) },
   ...props.sortingOptions,
   getSortedRowModel: getSortedRowModel(),
-  onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sortingState),
+  ...sortingState.value !== void 0 && { onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sortingState) },
   ...props.groupingOptions,
-  onGroupingChange: (updaterOrValue) => valueUpdater(updaterOrValue, groupingState),
+  ...groupingState.value !== void 0 && { onGroupingChange: (updaterOrValue) => valueUpdater(updaterOrValue, groupingState) },
   ...props.expandedOptions,
   getExpandedRowModel: getExpandedRowModel(),
-  onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, expandedState),
+  ...expandedState.value !== void 0 && { onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, expandedState) },
   ...props.paginationOptions,
-  onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, paginationState),
+  ...paginationState.value !== void 0 && { onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, paginationState) },
   ...props.facetedOptions,
   state: {
     get globalFilter() {
@@ -262,6 +265,15 @@ function resolveValue(prop, arg) {
   }
   return prop;
 }
+function getColumnStyles(column) {
+  const styles = {};
+  const pinned = column.getIsPinned();
+  if (pinned === "left")
+    styles.left = `${column.getStart("left")}px`;
+  else if (pinned === "right")
+    styles.right = `${column.getAfter("right")}px`;
+  return styles;
+}
 watch(() => props.data, () => {
   data.value = props.data ? [...props.data] : [];
 }, props.watchOptions);
@@ -285,168 +297,178 @@ defineExpose({
 </script>
 
 <template>
-  <DefineRowTemplate v-slot="{ row, style }">
-    <tr
-      :role="props.onSelect ? 'button' : void 0"
-      :tabindex="props.onSelect ? 0 : void 0"
+  <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)"
+})"
+      :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">
-          {{ caption }}
-        </slot>
-      </caption>
-
-      <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()"
-            :scope="header.colSpan > 1 ? 'colgroup' : 'col'"
-            :colspan="header.colSpan > 1 ? header.colSpan : void 0"
-            :rowspan="header.rowSpan > 1 ? header.rowSpan : void 0"
+})"
+        :data-pinned="cell.column.getIsPinned()"
+        data-part="td"
+        :style="[
+  getColumnStyles(cell.column),
+  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">
+          {{ caption }}
+        </slot>
+      </caption>
+
+      <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()"
+            :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()" />
-            </slot>
-          </th>
-        </tr>
-
-        <tr :class="ui.separator({ class: [props.ui?.separator] })" data-part="separator"></tr>
-      </thead>
-
-      <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]"
+})"
+            data-part="th"
+            :style="[
+  getColumnStyles(header.column),
+  resolveValue(header.column.columnDef.meta?.style?.th, header)
+]"
+          >
+            <slot :name="`${header.id}-header`" v-bind="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="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="tableApi.getAllLeafColumns().length" :class="ui.loading({ class: props.ui?.loading })" data-part="loading">
-            <slot name="loading"></slot>
-          </td>
-        </tr>
-
-        <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"
+}"
+              />
+            </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="tableApi.getAllLeafColumns().length" :class="ui.loading({ class: props.ui?.loading })" data-part="loading">
+            <slot name="loading"></slot>
+          </td>
+        </tr>
+
+        <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"
+} : 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>
+})"
+            data-part="th"
+            :style="[
+  getColumnStyles(header.column),
+  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>