@soft-stech/bootsman-ui-shadcn 1.3.10 → 1.3.11

package/src/components/stories/BuiDataTable.story.vue

@@ -28,6 +28,7 @@ const taskSchema = z.object({
 type Task = z.infer<typeof taskSchema>
 const columns: ColumnDef<Task>[] = [
   {
+    id: 'id',
     accessorKey: 'id',
     header: ({ table, column }) => {
       return h('div', { class: 'flex items-center gap-2' }, [
@@ -175,14 +176,12 @@ function groupName(group: string | number) {
             <BuiButton variant="outline" @click="deleteRow"> Update rows </BuiButton>
 
             <BuiTabs v-model="groupBy">
-              <BuiTabsList class="grid w-full grid-cols-3" :variant="'default'">
-                <BuiTabsTrigger value="none" :variant="'default'"
-                  ><AlignJustifyIcon
-                /></BuiTabsTrigger>
-                <BuiTabsTrigger value="status" :variant="'default'">
+              <BuiTabsList class="grid w-full grid-cols-3" variant="default">
+                <BuiTabsTrigger value="none" variant="default"><AlignJustifyIcon /></BuiTabsTrigger>
+                <BuiTabsTrigger value="status" variant="default">
                   <FolderIcon />
                 </BuiTabsTrigger>
-                <BuiTabsTrigger value="priority" :variant="'default'">
+                <BuiTabsTrigger value="priority" variant="default">
                   <ArrowUpNarrowWideIcon />
                 </BuiTabsTrigger>
               </BuiTabsList>

package/src/components/stories/BuiInput.story.vue

@@ -64,6 +64,15 @@ import { BuiBadgedInput } from '@/components/ui/input'
       </div>
     </Variant>
 
+    <Variant title="Password with default value">
+      <div class="flex items-center space-x-2 p-1">
+        <div class="grid w-full max-w-sm items-center gap-1.5">
+          <BuiLabel for="email">Password</BuiLabel>
+          <BuiPasswordInput default-value="text" placeholder="Password" />
+        </div>
+      </div>
+    </Variant>
+
     <Variant title="With units">
       <div class="flex items-center space-x-2 p-1">
         <div class="grid w-full max-w-sm items-center gap-1.5">

package/src/components/ui/button/BuiButton.vue

@@ -2,15 +2,18 @@
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { buttonVariants } from '.'
 import { cn } from '@/lib/utils'
+import { type HTMLAttributes } from 'vue'
 
 interface Props extends PrimitiveProps {
+  class?: HTMLAttributes['class']
   variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
   size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
   as?: string
   type?: string
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
+  class: '',
   as: 'button',
   type: 'button'
 })
@@ -20,7 +23,7 @@ withDefaults(defineProps<Props>(), {
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
     :type="type"
   >
     <slot />

package/src/components/ui/input/BuiPasswordInput.vue

@@ -4,11 +4,15 @@ import { cn } from '@/lib/utils'
 import { EyeIcon, EyeOffIcon } from 'lucide-vue-next'
 import { ref } from 'vue'
 
+const props = defineProps<{
+  defaultValue?: 'password' | 'text'
+}>()
+
 defineOptions({
   inheritAttrs: false
 })
 
-const type = ref('password')
+const type = ref(props.defaultValue ?? 'password')
 function togglePasswordShow() {
   if (type.value === 'password') {
     type.value = 'text'
@@ -25,8 +29,11 @@ function togglePasswordShow() {
       @click="togglePasswordShow"
       class="absolute right-3 top-0 flex h-full items-center justify-center"
     >
-      <EyeIcon v-if="type === 'password'" class="h-4 w-4 cursor-pointer" />
-      <EyeOffIcon v-else class="h-4 w-4 cursor-pointer" />
+      <EyeIcon
+        v-if="type === 'password'"
+        class="h-4 w-4 cursor-pointer opacity-[0.56] hover:opacity-100"
+      />
+      <EyeOffIcon v-else class="h-4 w-4 cursor-pointer opacity-[0.56] hover:opacity-100" />
     </span>
   </div>
 </template>

package/src/components/ui/pagination/BuiPaginationCommon.vue

@@ -39,38 +39,32 @@ const pageSizeString = computed({
 </script>
 
 <template>
-  <div class="m-2">
-    <BuiPagination
-      v-slot="{ page }"
-      :total="props.total"
-      :itemsPerPage="pageSize"
-      v-model:page="pageIndex"
-    >
-      <BuiPaginationList class="relative flex items-center justify-center gap-2">
-        <p class="text-sm text-muted-foreground">Items per page</p>
-        <BuiSelect v-model.number="pageSizeString">
-          <BuiSelectTrigger class="mr-2 w-[70px]">
-            <BuiSelectValue :placeholder="pageSize.toString()" />
-          </BuiSelectTrigger>
-          <BuiSelectContent side="top">
-            <BuiSelectItem
-              v-for="pageSize in pageSizes"
-              :key="pageSize"
-              :value="pageSize.toString()"
-            >
-              {{ pageSize }}
-            </BuiSelectItem>
-          </BuiSelectContent>
-        </BuiSelect>
-        <template v-if="totalPages > 1">
-          <p class="text-sm text-muted-foreground">Page {{ page }} of {{ totalPages }}</p>
-          <BuiPaginationFirst />
-          <BuiPaginationPrev />
-          <BuiInput v-model="pageIndex" class="w-28" placeholder="Page number" />
-          <BuiPaginationNext />
-          <BuiPaginationLast />
-        </template>
-      </BuiPaginationList>
-    </BuiPagination>
-  </div>
+  <BuiPagination
+    v-slot="{ page }"
+    :total="props.total"
+    :itemsPerPage="pageSize"
+    v-model:page="pageIndex"
+  >
+    <BuiPaginationList class="relative flex items-center justify-center gap-2">
+      <p class="text-sm text-muted-foreground">Items per page</p>
+      <BuiSelect v-model.number="pageSizeString">
+        <BuiSelectTrigger class="mr-2 w-[70px]">
+          <BuiSelectValue :placeholder="pageSize.toString()" />
+        </BuiSelectTrigger>
+        <BuiSelectContent side="top">
+          <BuiSelectItem v-for="pageSize in pageSizes" :key="pageSize" :value="pageSize.toString()">
+            {{ pageSize }}
+          </BuiSelectItem>
+        </BuiSelectContent>
+      </BuiSelect>
+      <template v-if="totalPages > 1">
+        <p class="text-sm text-muted-foreground">Page {{ page }} of {{ totalPages }}</p>
+        <BuiPaginationFirst />
+        <BuiPaginationPrev />
+        <BuiInput v-model="pageIndex" class="w-28" placeholder="Page number" />
+        <BuiPaginationNext />
+        <BuiPaginationLast />
+      </template>
+    </BuiPaginationList>
+  </BuiPagination>
 </template>

package/src/components/ui/progress/BuiProgress.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ProgressIndicator, ProgressRoot, type ProgressRootProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
-import type { HTMLAttributes } from 'vue'
+import { type HTMLAttributes, computed } from 'vue'
 
 import { progressVariants, capVariants, indicatorVariants } from '.'
 
@@ -20,6 +20,9 @@ const props = withDefaults(
     variant: 'default'
   }
 )
+const indicatorClass = computed(() =>
+  !props.modelValue || props.modelValue < 100 ? 'rounded-r-none border-r-2' : ''
+)
 </script>
 
 <template>
@@ -34,7 +37,7 @@ const props = withDefaults(
     v-bind="props"
   >
     <ProgressIndicator
-      :class="cn(indicatorVariants({ color, variant }), props.class)"
+      :class="cn(indicatorVariants({ color, variant }), indicatorClass, props.class)"
       :style="`width: calc(calc(100% - ${capVariants[variant ?? 'default']}) * ${
         (props.modelValue ?? 0) * 0.01
       })`"

package/src/components/ui/progress/index.ts

@@ -25,9 +25,10 @@ export const indicatorVariants = cva(
         lg: 'rounded-[16px]'
       },
       color: {
-        primary: 'from-[rgba(115,113,249,0.80)] to-[rgba(115,113,249,0.24)]',
-        red: 'from-[rgba(224,95,163,0.8)] to-[rgba(224,95,163,0.24)]',
-        orange: 'from-[rgba(255,167,139,0.8)] to-[rgba(255,167,139,0.24)]'
+        primary:
+          'from-[rgba(115,113,249,0.80)] to-[rgba(115,113,249,0.24)] border-[rgb(115,113,249)]',
+        red: 'from-[rgba(224,95,163,0.8)] to-[rgba(224,95,163,0.24)] border-[rgb(224,95,163)]',
+        orange: 'from-[rgba(255,167,139,0.8)] to-[rgba(255,167,139,0.24)] border-[rgb(255,167,139)]'
       }
     },
     defaultVariants: {

package/src/components/ui/table/BuiDataTable.vue

@@ -28,10 +28,10 @@ import {
   BuiTableBody,
   BuiTableCell,
   BuiTableEmpty,
-  BuiTableFooter,
   BuiTableHead,
   BuiTableHeader,
-  BuiTableRow
+  BuiTableRow,
+  getPinningStyle
 } from './'
 
 const NO_GROUP_KEY = '#UNDEFINED#'
@@ -61,7 +61,11 @@ const computedItems = computed(() =>
   props.manualPagination ? props.totalItems : props.data.length
 )
 const table = useVueTable({
-  initialState: { pagination: { pageSize: props.pageSize } },
+  initialState: {
+    // TODO: column freeze
+    //columnPinning: { left: ['id'] },
+    pagination: { pageSize: props.pageSize }
+  },
   get data() {
     return props.data
   },
@@ -154,7 +158,11 @@ function getGroupLabel(index: number) {
   <BuiTable>
     <BuiTableHeader>
       <BuiTableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-        <BuiTableHead v-for="header in headerGroup.headers" :key="header.id">
+        <BuiTableHead
+          v-for="header in headerGroup.headers"
+          :key="header.id"
+          :style="{ ...getPinningStyle(header.column) }"
+        >
           <FlexRender
             v-if="!header.isPlaceholder"
             :render="header.column.columnDef.header"
@@ -171,7 +179,22 @@ function getGroupLabel(index: number) {
               <BuiTableRow class="bg-foreground/[0.04]">
                 <BuiTableCell :colspan="columns.length" class="!pb-0">
                   <div class="flex w-full items-center justify-between">
-                    <div class="inline-block rounded-t bg-background px-4 py-3">
+                    <div
+                      class="shadow-top-shadow relative -mb-[1px] inline-block rounded-t-lg bg-background px-4 py-3 text-base font-semibold"
+                    >
+                      <div class="absolute -left-2 bottom-0 h-2 w-2 bg-background"></div>
+                      <div class="absolute -left-4 bottom-0 h-4 w-4 rounded-lg bg-background"></div>
+                      <div
+                        class="absolute -left-4 bottom-0 h-4 w-4 rounded-lg bg-foreground/[0.04]"
+                      ></div>
+                      <div class="absolute -right-2 bottom-0 h-2 w-2 bg-background"></div>
+                      <div
+                        class="absolute -right-4 bottom-0 h-4 w-4 rounded-lg bg-background"
+                      ></div>
+                      <div
+                        class="absolute -right-4 bottom-0 h-4 w-4 rounded-lg bg-foreground/[0.04]"
+                      ></div>
+                      <div></div>
                       <template v-if="key === NO_GROUP_KEY">
                         {{ getGroupLabel(1) }}
                       </template>
@@ -216,18 +239,16 @@ function getGroupLabel(index: number) {
         </BuiTableEmpty>
       </template>
     </BuiTableBody>
-    <BuiTableFooter v-if="showPagination && computedItems > 0">
-      <BuiTableRow>
-        <BuiTableCell :colspan="columns.length">
-          <BuiPaginationCommon
-            class="float-right"
-            :total="computedItems"
-            v-model:pageIndex="pageIndex"
-            v-model:pageSize="tablePageSize"
-          >
-          </BuiPaginationCommon>
-        </BuiTableCell>
-      </BuiTableRow>
-    </BuiTableFooter>
   </BuiTable>
+  <div
+    v-if="showPagination && computedItems > 0"
+    class="flex w-full justify-end border-x border-b border-border/[0.16] bg-primary/[0.04] p-4 text-base text-muted-foreground"
+  >
+    <BuiPaginationCommon
+      :total="computedItems"
+      v-model:pageIndex="pageIndex"
+      v-model:pageSize="tablePageSize"
+    >
+    </BuiPaginationCommon>
+  </div>
 </template>

package/src/components/ui/table/BuiTableRow.vue

@@ -8,7 +8,7 @@ const props = defineProps<{ class?: string }>()
   <tr
     :class="
       cn(
-        'border-b border-border/[0.08] transition-colors data-[state=selected]:bg-muted' /* hover:bg-muted/50 */,
+        'border-b border-border/[0.08] transition-colors data-[state=selected]:bg-accent/[0.04]',
         props.class
       )
     "

package/src/components/ui/table/BuiTableRowSubrow.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="TData, TValue">
 import { BuiTableCell, BuiTableRow } from '@/components/ui/table'
 import { FlexRender, type ColumnDef, type Row } from '@tanstack/vue-table'
+import { getPinningStyle } from './'
 
 const props = defineProps<{
   row: Row<TData>
@@ -14,7 +15,11 @@ const props = defineProps<{
     :data-state="row.getIsSelected() ? 'selected' : undefined"
     :class="props.renderSubComponent?.(row) ? 'border-b-0' : ''"
   >
-    <BuiTableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+    <BuiTableCell
+      v-for="cell in row.getVisibleCells()"
+      :key="cell.id"
+      :style="{ ...getPinningStyle(cell.column) }"
+    >
       <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
     </BuiTableCell>
   </BuiTableRow>

package/src/components/ui/table/index.ts

@@ -1,3 +1,6 @@
+import type { Column } from '@tanstack/vue-table'
+import type { CSSProperties } from 'vue'
+
 export { default as BuiTable } from './BuiTable.vue'
 export { default as BuiTableBody } from './BuiTableBody.vue'
 export { default as BuiTableCell } from './BuiTableCell.vue'
@@ -9,3 +12,12 @@ export { default as BuiTableCaption } from './BuiTableCaption.vue'
 export { default as BuiTableEmpty } from './BuiTableEmpty.vue'
 export { default as BuiTableFooter } from './BuiTableFooter.vue'
 export { default as BuiDataTable } from './BuiDataTable.vue'
+
+export function getPinningStyle<TData>(column: Column<TData, unknown>): CSSProperties {
+  const isPinned = column.getIsPinned()
+  return {
+    left: isPinned === 'left' ? '0' : undefined,
+    position: isPinned ? 'sticky' : 'relative',
+    zIndex: isPinned ? '1' : '0'
+  }
+}

package/src/components/ui/tabs/BuiTabsTrigger.vue

@@ -13,6 +13,8 @@ const props = defineProps<Props>()
 
 <template>
   <TabsTrigger v-bind="props" :class="cn(tabsTriggerVariants({ variant }), props.class ?? '')">
-    <slot />
+    <div class="flex items-center">
+      <slot />
+    </div>
   </TabsTrigger>
 </template>

package/src/components/ui/tabs/index.ts

@@ -19,14 +19,14 @@ export const tabsListVariants = cva('inline-flex items-center justify-center rou
 })
 
 export const tabsTriggerVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-md font-semibold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground',
+  'inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-lg font-semibold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground',
   {
     variants: {
       variant: {
         default:
-          'rounded-sm data-[state=active]:bg-background data-[state=active]:border border-primary/[0.16] text-primary data-[state=active]:text-foreground data-[state=active]:shadow-tab-shadow',
+          'rounded-sm data-[state=active]:bg-background data-[state=active]:border border-primary/[0.16] text-foreground opacity-[0.56] hover:opacity-100 data-[state=active]:opacity-100 data-[state=active]:shadow-tab-shadow',
         ghost:
-          'border-transparent text-muted-foreground border-b-2 data-[state=active]:border-primary',
+          'border-transparent text-muted-foreground pb-0 [&_div]:pb-1.5 [&_div]:border-b-2 [&_div]:data-[state=active]:border-primary',
         vertical:
           'border-transparent text-primary data-[state=active]:border-primary data-[state=active]:bg-background border-l-2 border-b-0 w-full justify-start pl-6'
       }

package/src/tailwind-preset.ts

@@ -79,7 +79,8 @@ export default {
       boxShadow: {
         'card-shadow': '0px 4px 8px 0px hsl(var(--card-shadow))',
         'tab-shadow':
-          '0px 2px 4px 0px hsl(var(--tab-shadow)), 0px 4px 4px 0px hsl(var(--tab-shadow))'
+          '0px 2px 4px 0px hsl(var(--tab-shadow)), 0px 4px 4px 0px hsl(var(--tab-shadow))',
+        'top-shadow': '0px -2px 4px 0px hsl(var(--tab-shadow))'
       },
       keyframes: {
         'accordion-down': {

package/dist/BuiDataTable.vue_vue_type_script_setup_true_lang-Bzw8CawP.js

@@ -1,255 +0,0 @@
-import { defineComponent as L, mergeModels as U, useModel as y, computed as b, watchEffect as F, openBlock as n, createElementBlock as i, Fragment as g, renderSlot as S, unref as o, createCommentVNode as w, createVNode as d, withCtx as l, renderList as f, createBlock as m, createElementVNode as N, createTextVNode as v, toDisplayString as C } from "vue";
-import { _ as O } from "./BuiCollapsible.vue_vue_type_script_setup_true_lang-BfgRYJts.js";
-import { _ as T } from "./BuiCollapsibleTrigger.vue_vue_type_script_setup_true_lang-DJ8YMCCp.js";
-import { _ as j } from "./BuiCollapsibleContent.vue_vue_type_script_setup_true_lang-eieHE5yV.js";
-import { _ as G } from "./BuiPaginationCommon.vue_vue_type_script_setup_true_lang-DjLAqoa-.js";
-import { v as $ } from "./utils-DPuEjrVV.js";
-import { _ as z } from "./BuiTableRowSubrow.vue_vue_type_script_setup_true_lang-Ch5gemw2.js";
-import { useVueTable as H, getCoreRowModel as K, getPaginationRowModel as Y, getSortedRowModel as q, FlexRender as A } from "@tanstack/vue-table";
-import { _ as J } from "./BuiTable.vue_vue_type_script_setup_true_lang-CUPSwE5z.js";
-import { _ as Q } from "./BuiTableBody.vue_vue_type_script_setup_true_lang-CWT4u-Ma.js";
-import { _ as E } from "./BuiTableCell.vue_vue_type_script_setup_true_lang-BrTQJCiZ.js";
-import { _ as W } from "./BuiTableHead.vue_vue_type_script_setup_true_lang-CCXONmtG.js";
-import { _ as X } from "./BuiTableHeader.vue_vue_type_script_setup_true_lang-DZOqi3dp.js";
-import { _ as R } from "./BuiTableRow.vue_vue_type_script_setup_true_lang-CpEilJsW.js";
-import { _ as Z } from "./BuiTableEmpty.vue_vue_type_script_setup_true_lang-BJDYHpRG.js";
-import { _ as ee } from "./BuiTableFooter.vue_vue_type_script_setup_true_lang-Cfxlxsbh.js";
-const te = {
-  key: 0,
-  class: "w-full py-4"
-}, oe = { class: "flex w-full items-center justify-between" }, ne = { class: "inline-block rounded-t bg-background px-4 py-3" }, x = "#UNDEFINED#", we = /* @__PURE__ */ L({
-  __name: "BuiDataTable",
-  props: /* @__PURE__ */ U({
-    columns: {},
-    data: {},
-    pageSize: { default: 10 },
-    showPagination: { type: Boolean, default: !0 },
-    totalItems: { default: 0 },
-    manualPagination: { type: Boolean, default: !0 },
-    manualSorting: { type: Boolean, default: !0 },
-    groupBy: {},
-    groupLabels: {},
-    getRowId: {},
-    renderSubComponent: {}
-  }, {
-    sorting: {},
-    sortingModifiers: {},
-    pagination: {},
-    paginationModifiers: {},
-    selection: {},
-    selectionModifiers: {},
-    columnVisibility: {},
-    columnVisibilityModifiers: {}
-  }),
-  emits: ["update:sorting", "update:pagination", "update:selection", "update:columnVisibility"],
-  setup(c) {
-    const t = c, P = y(c, "sorting"), p = y(c, "pagination"), k = y(c, "selection"), D = y(c, "columnVisibility"), I = b(
-      () => t.manualPagination ? t.totalItems : t.data.length
-    ), u = H({
-      initialState: { pagination: { pageSize: t.pageSize } },
-      get data() {
-        return t.data;
-      },
-      get columns() {
-        return t.columns;
-      },
-      getCoreRowModel: K(),
-      getPaginationRowModel: Y(),
-      getSortedRowModel: q(),
-      onSortingChange: (e) => {
-        $(e, P);
-      },
-      onPaginationChange: (e) => {
-        $(e, p);
-      },
-      onRowSelectionChange: (e) => {
-        $(e, k);
-      },
-      autoResetPageIndex: !1,
-      manualPagination: t.manualPagination,
-      // set to false to enable client-side pagination
-      manualSorting: t.manualSorting,
-      state: {
-        get sorting() {
-          return P.value;
-        },
-        get pagination() {
-          return p.value;
-        },
-        get rowSelection() {
-          return k.value;
-        },
-        get columnVisibility() {
-          return D.value;
-        }
-      },
-      getRowId: t.getRowId
-    }), B = b({
-      get() {
-        return u.getState().pagination.pageSize;
-      },
-      set(e) {
-        p.value && (p.value.pageSize = e, u.setPageSize(e), u.setPageIndex(0));
-      }
-    }), _ = b({
-      get() {
-        return u.getState().pagination.pageIndex + 1;
-      },
-      set(e) {
-        p.value && (p.value.pageIndex = e - 1, u.setPageIndex(e - 1));
-      }
-    });
-    F(() => {
-      const e = u.getPageCount();
-      e && e < _.value && (_.value = e);
-    });
-    const M = b(() => t.groupBy ? u.getRowModel().rows.reduce((e, s) => {
-      const a = s.getValue(t.groupBy) ?? x;
-      return e[a] = e[a] || [], e[a].push(s), e;
-    }, /* @__PURE__ */ Object.create(null)) : null);
-    function h(e) {
-      return (t.groupBy && t.groupLabels ? t.groupLabels[t.groupBy] || [] : [])[e];
-    }
-    return (e, s) => (n(), i(g, null, [
-      e.$slots.caption ? (n(), i("div", te, [
-        S(e.$slots, "caption", { table: o(u) })
-      ])) : w("", !0),
-      d(o(J), null, {
-        default: l(() => [
-          d(o(X), null, {
-            default: l(() => [
-              (n(!0), i(g, null, f(o(u).getHeaderGroups(), (r) => (n(), m(o(R), {
-                key: r.id
-              }, {
-                default: l(() => [
-                  (n(!0), i(g, null, f(r.headers, (a) => (n(), m(o(W), {
-                    key: a.id
-                  }, {
-                    default: l(() => [
-                      a.isPlaceholder ? w("", !0) : (n(), m(o(A), {
-                        key: 0,
-                        render: a.column.columnDef.header,
-                        props: a.getContext()
-                      }, null, 8, ["render", "props"]))
-                    ]),
-                    _: 2
-                  }, 1024))), 128))
-                ]),
-                _: 2
-              }, 1024))), 128))
-            ]),
-            _: 1
-          }),
-          d(o(Q), null, {
-            default: l(() => [
-              o(u).getRowModel().rows?.length ? (n(), i(g, { key: 0 }, [
-                t.groupBy && M.value ? (n(!0), i(g, { key: 0 }, f(M.value, (r, a) => (n(), m(o(O), {
-                  asChild: "",
-                  key: a,
-                  open: !0
-                }, {
-                  default: l(() => [
-                    d(o(T), { asChild: "" }, {
-                      default: l(() => [
-                        d(o(R), { class: "bg-foreground/[0.04]" }, {
-                          default: l(() => [
-                            d(o(E), {
-                              colspan: e.columns.length,
-                              class: "!pb-0"
-                            }, {
-                              default: l(() => [
-                                N("div", oe, [
-                                  N("div", ne, [
-                                    a === x ? (n(), i(g, { key: 0 }, [
-                                      v(C(h(1)), 1)
-                                    ], 64)) : (n(), i(g, { key: 1 }, [
-                                      v(C(h(0)) + ": ", 1),
-                                      e.$slots.groupName ? S(e.$slots, "groupName", {
-                                        key: 0,
-                                        group: a
-                                      }) : (n(), i(g, { key: 1 }, [
-                                        v(C(a), 1)
-                                      ], 64))
-                                    ], 64))
-                                  ]),
-                                  e.$slots.groupByRow ? S(e.$slots, "groupByRow", {
-                                    key: 0,
-                                    group: a
-                                  }) : w("", !0)
-                                ])
-                              ]),
-                              _: 2
-                            }, 1032, ["colspan"])
-                          ]),
-                          _: 2
-                        }, 1024)
-                      ]),
-                      _: 2
-                    }, 1024),
-                    d(o(j), { asChild: "" }, {
-                      default: l(() => [
-                        (n(!0), i(g, null, f(r, (V) => (n(), m(z, {
-                          key: V.id,
-                          columns: t.columns,
-                          row: V,
-                          renderSubComponent: t.renderSubComponent
-                        }, null, 8, ["columns", "row", "renderSubComponent"]))), 128))
-                      ]),
-                      _: 2
-                    }, 1024)
-                  ]),
-                  _: 2
-                }, 1024))), 128)) : (n(!0), i(g, { key: 1 }, f(o(u).getRowModel().rows, (r) => (n(), m(z, {
-                  key: r.id,
-                  columns: t.columns,
-                  row: r,
-                  renderSubComponent: t.renderSubComponent
-                }, null, 8, ["columns", "row", "renderSubComponent"]))), 128))
-              ], 64)) : (n(), m(o(Z), {
-                key: 1,
-                colspan: e.columns.length
-              }, {
-                default: l(() => [
-                  S(e.$slots, "nodata", {}, () => [
-                    s[2] || (s[2] = v("No data"))
-                  ])
-                ]),
-                _: 3
-              }, 8, ["colspan"]))
-            ]),
-            _: 3
-          }),
-          e.showPagination && I.value > 0 ? (n(), m(o(ee), { key: 0 }, {
-            default: l(() => [
-              d(o(R), null, {
-                default: l(() => [
-                  d(o(E), {
-                    colspan: e.columns.length
-                  }, {
-                    default: l(() => [
-                      d(o(G), {
-                        class: "float-right",
-                        total: I.value,
-                        pageIndex: _.value,
-                        "onUpdate:pageIndex": s[0] || (s[0] = (r) => _.value = r),
-                        pageSize: B.value,
-                        "onUpdate:pageSize": s[1] || (s[1] = (r) => B.value = r)
-                      }, null, 8, ["total", "pageIndex", "pageSize"])
-                    ]),
-                    _: 1
-                  }, 8, ["colspan"])
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })) : w("", !0)
-        ]),
-        _: 3
-      })
-    ], 64));
-  }
-});
-export {
-  we as _
-};