@byyuurin/ui 0.3.0 → 0.4.0

package/dist/runtime/components/Stepper.vue

@@ -7,6 +7,7 @@ import { reactivePick } from "@vueuse/core";
 import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperSeparator, StepperTitle, StepperTrigger, useForwardProps } from "reka-ui";
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Icon from "./Icon.vue";
 const props = defineProps({
@@ -28,7 +29,7 @@ const modelValue = defineModel({ type: [String, Number] });
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.stepper));
-  return styler(props);
+  return styler(pick(props, ["orientation", "size", "color"]));
 });
 const rootProps = useForwardProps(reactivePick(props, "as", "orientation", "linear"));
 const currentStepIndex = computed({
@@ -62,55 +63,55 @@ defineExpose({
 </script>
 
 <template>
-  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div :class="ui.header({ class: props.ui?.header })" data-part="header">
-      <StepperItem
-        v-for="(item, count) in props.items"
-        :key="item.value ?? count"
-        :step="count"
-        :disabled="item.disabled || props.disabled"
-        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
-        data-part="item"
-      >
-        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })" data-part="container">
-          <StepperTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })" data-part="trigger">
-            <StepperIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" data-part="indicator">
-              <slot name="indicator" :item="item" :ui="ui">
-                <Icon v-if="item.icon" :name="item.icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" data-part="icon" />
-                <template v-else>
-                  {{ count + 1 }}
-                </template>
-              </slot>
-            </StepperIndicator>
-          </StepperTrigger>
-
-          <StepperSeparator
-            v-if="count < props.items.length - 1"
-            :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
-            data-part="separator"
-          />
-        </div>
-
-        <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })" data-part="wrapper">
-          <StepperTitle as="div" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })" data-part="title">
-            <slot name="title" :item="item">
-              {{ item.title }}
-            </slot>
-          </StepperTitle>
-
-          <StepperDescription as="div" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })" data-part="description">
-            <slot name="description" :item="item">
-              {{ item.description }}
-            </slot>
-          </StepperDescription>
-        </div>
-      </StepperItem>
-    </div>
-
-    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot" :class="ui.content({ class: props.ui?.content })" data-part="content">
-      <slot :name="currentStep?.slot || 'content'" :item="currentStep">
-        {{ currentStep?.content }}
-      </slot>
-    </div>
-  </StepperRoot>
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div :class="ui.header({ class: props.ui?.header })" data-part="header">
+      <StepperItem
+        v-for="(item, count) in props.items"
+        :key="item.value ?? count"
+        :step="count"
+        :disabled="item.disabled || props.disabled"
+        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+        data-part="item"
+      >
+        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })" data-part="container">
+          <StepperTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })" data-part="trigger">
+            <StepperIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" data-part="indicator">
+              <slot name="indicator" :item="item" :ui="ui">
+                <Icon v-if="item.icon" :name="item.icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" data-part="icon" />
+                <template v-else>
+                  {{ count + 1 }}
+                </template>
+              </slot>
+            </StepperIndicator>
+          </StepperTrigger>
+
+          <StepperSeparator
+            v-if="count < props.items.length - 1"
+            :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
+            data-part="separator"
+          />
+        </div>
+
+        <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })" data-part="wrapper">
+          <StepperTitle as="div" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })" data-part="title">
+            <slot name="title" :item="item">
+              {{ item.title }}
+            </slot>
+          </StepperTitle>
+
+          <StepperDescription as="div" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })" data-part="description">
+            <slot name="description" :item="item">
+              {{ item.description }}
+            </slot>
+          </StepperDescription>
+        </div>
+      </StepperItem>
+    </div>
+
+    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot" :class="ui.content({ class: props.ui?.content })" data-part="content">
+      <slot :name="currentStep?.slot || 'content'" :item="currentStep">
+        {{ currentStep?.content }}
+      </slot>
+    </div>
+  </StepperRoot>
 </template>

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

@@ -1,7 +1,7 @@
 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 { ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps } from '../types';
 import type { DynamicSlots, StaticSlot } from '../types/utils';
 export interface StepperItem extends ComponentBaseProps {
     slot?: string;
@@ -40,7 +40,7 @@ export type StepperEmits<T extends StepperItem = StepperItem> = Omit<StepperRoot
 export type StepperSlots<T extends StepperItem = StepperItem> = {
     indicator: StaticSlot<{
         item: T;
-        ui: ComponentUIProps<typeof theme>;
+        ui: ComponentStyler<typeof theme>;
     }>;
     title: StaticSlot<{
         item: T;

package/dist/runtime/components/Switch.vue

@@ -8,6 +8,7 @@ import { Label, Primitive, SwitchRoot, SwitchThumb, useForwardProps } from "reka
 import { computed, useId } from "vue";
 import { useAppConfig } from "#imports";
 import { useFormField } from "../composables/useFormField";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -41,12 +42,10 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.switch));
   return styler({
-    ...props,
+    ...pick(props, ["required", "loading"]),
     size: size.value,
     color: color.value,
-    disabled: disabled.value || props.loading,
-    checked: false,
-    unchecked: false
+    disabled: disabled.value || props.loading
   });
 });
 function onUpdate(value) {
@@ -58,34 +57,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/Table.vue

@@ -12,6 +12,7 @@ import { upperFirst } from "scule";
 import { computed, ref, shallowRef, toRef, watch } from "vue";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -282,7 +283,7 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.table));
   return styler({
-    ...props,
+    ...pick(props, ["loading", "loadingColor", "loadingAnimation"]),
     sticky: props.virtualize ? false : props.sticky,
     virtualize: !!props.virtualize
   });
@@ -297,178 +298,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"
+})"
+        :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"
+]"
+      >
+        <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"
+})"
+            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]"
+]"
+          >
+            <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"
+})"
+            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>
+]"
+          >
+            <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>