@soft-stech/bootsman-ui-shadcn 2.0.20 → 2.0.21

package/src/components/scroll-area/BuiScrollArea.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed, ref } from 'vue'
 import {
   ScrollAreaCorner,
   ScrollAreaRoot,
@@ -16,10 +16,17 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
+
+const tableWrapperRef = ref<InstanceType<typeof ScrollAreaRoot> | null>(null)
+defineExpose({ tableWrapperRef })
 </script>
 
 <template>
-  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+  <ScrollAreaRoot
+    ref="tableWrapperRef"
+    v-bind="delegatedProps"
+    :class="cn('relative overflow-hidden', props.class)"
+  >
     <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
       <slot />
     </ScrollAreaViewport>

package/src/components/table/BuiDataTable.vue

@@ -54,11 +54,13 @@ import { isEqual } from 'lodash-es'
 import { cn, valueUpdater } from '@/lib/utils'
 import { useResizeColumns } from '@/lib/useResizeColumns'
 import { useSessionStorage } from '@vueuse/core'
+import { useGlobalCursor } from '@/lib/useGlobalCursor'
 
 const NO_GROUP_KEY = '#UNDEFINED#'
 const defaultColumnContextMenuTranslations = {
   hideColumn: 'Hide column',
-  resetSize: 'Reset size',
+  resetThisSize: 'Reset size for this column',
+  resetSize: 'Reset size for all columns',
   sortAsc: 'Sort ascending',
   sortDesc: 'Sort descending'
 }
@@ -90,6 +92,7 @@ const props = withDefaults(
     }
     headerContextMenuTranslations?: {
       hideColumn?: string
+      resetThisSize?: string
       resetSize?: string
       sortAsc?: string
       sortDesc?: string
@@ -152,7 +155,6 @@ const table = useVueTable({
     await nextTick()
 
     resetCells()
-    setInitialColumnWidths()
   },
   onColumnOrderChange: (updaterOrValue) => {
     valueUpdater(updaterOrValue, columnOrder)
@@ -257,18 +259,20 @@ watch(columnsListIds, () => {
 })
 
 const tableHeaderRef = ref<InstanceType<typeof BuiTableHeader> | null>(null)
+const tableElementRef = ref<InstanceType<typeof BuiTable> | null>(null)
 const { height } = useElementSize(tableHeaderRef)
 
 const {
   tableHeaderElement,
+  tableElement,
   calculatedColumnSizing,
   isResizing,
   resizingCellId,
+  resetCell,
   resetCells,
   handleResizeControlMouseDown,
   handleResizeControlMouseUp,
   setInitialColumnWidths,
-  setProvidedCellWidths,
   isMouseDownOnHandler,
   isMouseUpOnHandler
 } = useResizeColumns()
@@ -278,10 +282,10 @@ onBeforeMount(() => {
 })
 
 onMounted(() => {
-  if (tableHeaderRef.value) {
+  if (tableElementRef.value && tableHeaderRef.value) {
+    tableElement.value = tableElementRef.value
     tableHeaderElement.value = tableHeaderRef.value
 
-    setProvidedCellWidths(columnSizing.value)
     setInitialColumnWidths()
   }
 
@@ -304,7 +308,7 @@ const getHeaderCellSortingButton = (header: Header<TData, unknown>) => {
   return currentHeaderCell?.querySelector('button[sorting-enabled]')
 }
 
-type HeaderCellAction = 'hideColumn' | 'resetSize' | 'sortAsc' | 'sortDesc'
+type HeaderCellAction = 'hideColumn' | 'resetThisSize' | 'resetSize' | 'sortAsc' | 'sortDesc'
 const availableHeaderCellActions = (header: Header<TData, unknown>) => {
   const out: HeaderCellAction[] = []
 
@@ -319,6 +323,7 @@ const availableHeaderCellActions = (header: Header<TData, unknown>) => {
   }
 
   if (props.enableColumnResizing) {
+    out.push('resetThisSize')
     out.push('resetSize')
   }
 
@@ -329,6 +334,9 @@ const onHeaderCellAction = (header: Header<TData, unknown>, action: HeaderCellAc
     case 'hideColumn':
       header.column.toggleVisibility()
       break
+    case 'resetThisSize':
+      resetCell(header.id)
+      break
     case 'resetSize':
       resetCells()
       break
@@ -399,13 +407,23 @@ const handleHeaderCellMouseDown = (e: Event) => {
   isMouseDownOnHandler.value =
     targetHTMLElement.className.includes && targetHTMLElement.className.includes('resize-handler')
 }
+
+const { setCursor, resetCursor } = useGlobalCursor()
+
+watch(isResizing, () => {
+  if (isResizing.value) {
+    setCursor('col-resize')
+  } else {
+    resetCursor()
+  }
+})
 </script>
 
 <template>
   <div v-if="$slots.caption" class="w-full py-3">
     <slot name="caption" :table="table" />
   </div>
-  <BuiTable>
+  <BuiTable ref="tableElementRef">
     <template v-if="enableColumnListControl" #columnVisibility>
       <BuiPopover v-model:open="open">
         <BuiPopoverTrigger as-child>
@@ -449,6 +467,17 @@ const handleHeaderCellMouseDown = (e: Event) => {
                 >
                   {{ columnResetVisibility }}
                 </BuiCommandItem>
+                <BuiCommandItem
+                  value="reset_columns_size"
+                  key="reset_columns_size"
+                  class="text-muted-foreground px-2 py-1.5 font-medium"
+                  @select="resetCells"
+                >
+                  {{
+                    headerContextMenuTranslations?.['resetSize'] ??
+                    defaultColumnContextMenuTranslations['resetSize']
+                  }}
+                </BuiCommandItem>
               </BuiScrollArea>
             </BuiCommandList>
           </BuiCommand>
@@ -499,9 +528,8 @@ const handleHeaderCellMouseDown = (e: Event) => {
                 :key="idx"
               >
                 {{
-                  headerContextMenuTranslations && headerContextMenuTranslations[action]
-                    ? headerContextMenuTranslations[action]
-                    : defaultColumnContextMenuTranslations[action]
+                  headerContextMenuTranslations?.[action] ??
+                  defaultColumnContextMenuTranslations[action]
                 }}
               </BuiContextMenuItem>
             </BuiContextMenuContent>
@@ -518,7 +546,7 @@ const handleHeaderCellMouseDown = (e: Event) => {
             v-for="(value, key) in groupedRows"
             :key="key"
             v-model:open="groupsOpenStateRef[key]"
-            @update:open="(value) => handleGroupToggle(value, key)"
+            @update:open="(value: boolean) => handleGroupToggle(value, key)"
           >
             <BuiTableRow class="bg-foreground/4 border-b-0">
               <BuiTableCell :colspan="columns.length" class="pb-0!">

package/src/components/table/BuiTable.vue

@@ -1,15 +1,23 @@
 <script setup lang="ts">
 import { BuiScrollArea, BuiScrollBar } from '@/components/scroll-area'
 import { cn } from '@/lib/utils'
+import { ref } from 'vue'
 
 const props = defineProps<{ class?: string }>()
+const tableRef = ref<HTMLTableElement | undefined>(undefined)
+const scrollAreaElementRef = ref<InstanceType<typeof BuiScrollArea> | null>(null)
+
+defineExpose({ tableRef, scrollAreaElementRef })
 </script>
 
 <template>
-  <BuiScrollArea class="border-border/16 w-full grow overflow-auto rounded-sm border">
+  <BuiScrollArea
+    ref="scrollAreaElementRef"
+    class="border-border/16 w-full grow overflow-auto rounded-sm border"
+  >
     <slot name="columnVisibility" />
-    <div class="flex min-h-[90px] grow flex-col">
-      <table :class="cn('h-full w-full caption-top text-sm', props.class)">
+    <div class="flex min-h-[90px] w-full grow flex-col">
+      <table ref="tableRef" :class="cn('h-full caption-top text-sm', props.class)">
         <slot />
       </table>
     </div>

package/src/lib/useGlobalCursor.ts

@@ -0,0 +1,17 @@
+import { onUnmounted } from 'vue'
+
+export function useGlobalCursor() {
+  function setCursor(cursor: string) {
+    document.body.style.cursor = cursor
+  }
+
+  function resetCursor() {
+    document.body.style.cursor = ''
+  }
+
+  onUnmounted(() => {
+    resetCursor()
+  })
+
+  return { setCursor, resetCursor }
+}

package/src/lib/useResizeColumns.ts

@@ -1,20 +1,31 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import BuiTableHeader from '@/components/table/BuiTableHeader.vue'
+import BuiTable from '@/components/table/BuiTable.vue'
 import { useEventListener } from '@vueuse/core'
 
+const MIN_CELL_WIDTH = 90
+const LAST_CELL_EXTRA_SPACE = 56
+const ACTIONS_CELL_MIN_WIDTH = 10
+
 export function useResizeColumns() {
   type CELL = {
-    [key: string]: { cell: HTMLTableCellElement; initialWidth: number; minWidth: number }
+    [key: string]: {
+      cell: HTMLTableCellElement
+      initialWidth: number
+      minWidth: number
+      baseWidth: number
+      isLast: boolean
+    }
   }
   const isResizing = ref<boolean>(false)
   const resizingCellId = ref<string>('')
   const neighborCellId = ref<string>('')
   const cells = ref<CELL | undefined>(undefined)
-  const MIN_CELL_WIDTH = 90
-  const LAST_CELL_EXTRA_SPACE = 56
-  const ACTIONS_CELL_MIN_WIDTH = 10
   const calculatedColumnSizing = ref<Record<string, number> | undefined>(undefined)
   const tableHeaderElement = ref<InstanceType<typeof BuiTableHeader> | null>(null)
+  const tableElement = ref<InstanceType<typeof BuiTable> | null>(null)
+  const initialTableWidth = ref<number>(0)
+  const minTableWidth = ref<number>(0)
   const unregisterMouseMove = ref<(() => void) | undefined>(undefined)
 
   const setProvidedCellWidths = (columnSizing: Record<string, number> | undefined) => {
@@ -25,31 +36,57 @@ export function useResizeColumns() {
       headerCells.forEach((cell) => {
         const cellId = getCellId(cell)
 
-        if (columnSizing && columnSizing[cellId]) {
-          cell.style.width = columnSizing[cellId] + 'px'
-        }
+        cell.style.width = columnSizing && columnSizing[cellId] ? columnSizing[cellId] + 'px' : ''
       })
     }
   }
 
   const getCells = () => {
-    if (tableHeaderElement.value && tableHeaderElement.value.headRef) {
+    if (
+      tableHeaderElement.value &&
+      tableHeaderElement.value.headRef &&
+      tableElement.value &&
+      tableElement.value?.tableRef
+    ) {
       const headerCells = [...tableHeaderElement.value.headRef.querySelectorAll('th')]
-      const headerCellsWidths: CELL = headerCells.reduce((acc, cell) => {
+      const tableInitialWidth = getTableWidth()
+
+      tableElement.value.tableRef.style.width = 'min-content'
+
+      const headerCellsWidths: CELL = headerCells.reduce((acc, cell, index, array) => {
         const cellId = getCellId(cell)
+
         return {
           ...acc,
           [cellId]: {
             cell: cell,
-            initialWidth: cell.offsetWidth,
+            isLast: index === array.length - 1,
+            initialWidth: Math.floor(cell.offsetWidth),
+            baseWidth: Math.floor(cell.offsetWidth),
             minWidth:
               cellId === 'actions'
                 ? ACTIONS_CELL_MIN_WIDTH
-                : Math.min(cell.offsetWidth, MIN_CELL_WIDTH)
+                : cell.offsetWidth < MIN_CELL_WIDTH
+                  ? MIN_CELL_WIDTH
+                  : cell.offsetWidth
           }
         }
       }, {})
 
+      tableElement.value.tableRef.style.width = ''
+
+      Object.values(headerCellsWidths).forEach((cellElement) => {
+        cellElement.baseWidth = Math.floor(cellElement.cell.offsetWidth)
+      })
+
+      setProvidedCellWidths(calculatedColumnSizing.value)
+      tableElement.value.tableRef.style.width =
+        (calculatedColumnSizing.value?.['table'] || tableInitialWidth) + 'px'
+
+      Object.values(headerCellsWidths).forEach((cellElement) => {
+        cellElement.initialWidth = Math.floor(cellElement.cell.offsetWidth)
+      })
+
       return headerCellsWidths
     }
 
@@ -109,6 +146,10 @@ export function useResizeColumns() {
         updatedColumnSizingValue[cell] = newWidth
       }
 
+      if (tableElement.value && tableElement.value?.tableRef) {
+        updatedColumnSizingValue['table'] = tableElement.value.tableRef.offsetWidth
+      }
+
       calculatedColumnSizing.value = updatedColumnSizingValue
     }
   }
@@ -121,16 +162,20 @@ export function useResizeColumns() {
     return 0
   }
 
+  const lastCell = computed(() => {
+    if (cells.value) {
+      return Object.values(cells.value).find((cell) => cell.isLast)
+    }
+
+    return undefined
+  })
+
   const getCellId = (cell: HTMLTableCellElement) => {
     return cell.id.split('_')[0]
   }
 
-  const resizeCells = (
-    cell: HTMLTableCellElement | null,
-    neighborCell: HTMLTableCellElement | null,
-    e: MouseEvent
-  ) => {
-    if (!cell || !neighborCell) {
+  const resizeCells = (cell: HTMLTableCellElement | null, e: MouseEvent) => {
+    if (!cell || !tableElement.value?.tableRef || !lastCell.value) {
       resizingCellId.value = ''
       neighborCellId.value = ''
 
@@ -140,7 +185,9 @@ export function useResizeColumns() {
     const movementX = e.movementX
     const direction: 'left' | 'right' = movementX < 0 ? 'left' : 'right'
     const newCellWidth = Math.floor(parseInt(cell.style.width)) + movementX
-    const newNeighborCellWidth = Math.floor(parseInt(neighborCell.style.width)) - movementX
+    const newTableWidth =
+      Math.floor(parseInt(tableElement.value?.tableRef?.style.width)) + movementX
+    const newLastCellWidth = Math.floor(parseInt(lastCell.value.cell.style.width)) - movementX
 
     if (direction === 'left') {
       const min =
@@ -148,29 +195,35 @@ export function useResizeColumns() {
           ? cells.value[getCellId(cell)].minWidth
           : MIN_CELL_WIDTH
 
-      if (newCellWidth <= min || !cell.hasAttribute('can-resize')) {
-        const nextCell = cell.previousElementSibling as HTMLTableCellElement | null
+      if (newCellWidth >= min) {
+        cell.style.width = newCellWidth + 'px'
 
-        resizeCells(nextCell, neighborCell, e)
+        if (newTableWidth >= minTableWidth.value) {
+          tableElement.value.tableRef.style.width = newTableWidth + 'px'
+        } else {
+          tableElement.value.tableRef.style.width = minTableWidth.value + 'px'
+          lastCell.value.cell.style.width = newLastCellWidth + 'px'
+        }
       } else {
-        cell.style.width = newCellWidth + 'px'
-        neighborCell.style.width = newNeighborCellWidth + 'px'
+        return
       }
     } else {
       const min =
-        cells.value && cells.value[getCellId(neighborCell)]
-          ? cells.value[getCellId(neighborCell)].minWidth +
-            getLastCellOnTheRightExtraSpace(neighborCell)
+        cells.value && cells.value[getCellId(lastCell.value.cell)]
+          ? cells.value[getCellId(lastCell.value.cell)].minWidth +
+            getLastCellOnTheRightExtraSpace(lastCell.value.cell)
           : MIN_CELL_WIDTH
 
-      if (newNeighborCellWidth <= min || !neighborCell.hasAttribute('can-resize')) {
-        const nextNeighborCell = neighborCell.nextElementSibling as HTMLTableCellElement | null
-
-        resizeCells(cell, nextNeighborCell, e)
+      if (
+        newLastCellWidth >= min &&
+        tableElement.value.tableRef.offsetWidth <= minTableWidth.value
+      ) {
+        lastCell.value.cell.style.width = newLastCellWidth + 'px'
       } else {
-        cell.style.width = newCellWidth + 'px'
-        neighborCell.style.width = newNeighborCellWidth + 'px'
+        tableElement.value.tableRef.style.width = newTableWidth + 'px'
       }
+
+      cell.style.width = newCellWidth + 'px'
     }
   }
 
@@ -179,27 +232,66 @@ export function useResizeColumns() {
 
     if (cells.value) {
       const resizingCell = cells.value[resizingCellId.value]?.cell
-      const neighborCell = cells.value[neighborCellId.value]?.cell
 
-      resizeCells(resizingCell, neighborCell, e)
+      resizeCells(resizingCell, e)
     }
   }
 
   const resetCells = () => {
-    if (cells.value) {
-      const updatedColumnSizingValue: Record<string, number> = {}
+    if (cells.value && tableElement.value && tableElement.value?.tableRef) {
+      tableElement.value.tableRef.style.width = ''
 
-      for (const cell in cells.value) {
-        const inititalWidth = cells.value[cell].initialWidth
+      calculatedColumnSizing.value = {}
+      setInitialColumnWidths()
+    }
+  }
 
-        cells.value[cell].cell.style.width = inititalWidth + 'px'
-        updatedColumnSizingValue[cell] = inititalWidth
+  const resetCell = (cellId: string) => {
+    if (
+      cells.value &&
+      calculatedColumnSizing.value &&
+      lastCell.value &&
+      tableElement.value &&
+      tableElement.value?.tableRef
+    ) {
+      const thisCellBaseWidth = cells.value[cellId].baseWidth
+      const thisCellCurrentWidth = calculatedColumnSizing.value[cellId]
+      const diff = thisCellBaseWidth - thisCellCurrentWidth
+
+      let newTableWidth = calculatedColumnSizing.value['table'] + diff
+
+      if (newTableWidth < minTableWidth.value) {
+        const tableWidthDiff = minTableWidth.value - newTableWidth
+        const newLastCellWidth =
+          calculatedColumnSizing.value[getCellId(lastCell.value.cell)] + tableWidthDiff
+
+        lastCell.value.cell.style.width = newLastCellWidth + 'px'
+        newTableWidth = minTableWidth.value
       }
 
-      calculatedColumnSizing.value = updatedColumnSizingValue
+      cells.value[cellId].cell.style.width = thisCellBaseWidth + 'px'
+      tableElement.value.tableRef.style.width = newTableWidth + 'px'
+      calculatedColumnSizing.value[cellId] = thisCellBaseWidth
+      calculatedColumnSizing.value['table'] = newTableWidth
     }
   }
 
+  const getTableWrapperWidth = () => {
+    if (tableElement.value && tableElement.value.scrollAreaElementRef?.tableWrapperRef) {
+      return tableElement.value.scrollAreaElementRef?.tableWrapperRef.$el.offsetWidth - 3
+    }
+
+    return 0
+  }
+
+  const getTableWidth = () => {
+    if (tableElement.value && tableElement.value?.tableRef) {
+      return tableElement.value.tableRef.offsetWidth
+    }
+
+    return 0
+  }
+
   const setInitialColumnWidths = () => {
     cells.value = getCells()
 
@@ -211,21 +303,38 @@ export function useResizeColumns() {
           cells.value[cell].cell.style.width = cells.value[cell].initialWidth + 'px'
         }
 
+        cells.value[cell].cell.style.minWidth = cells.value[cell].minWidth + 'px'
+
         updatedColumnSizingValue[cell] = cells.value[cell].cell.offsetWidth
       }
 
+      if (tableElement.value && tableElement.value?.tableRef) {
+        const tableOffsetWidth = getTableWidth()
+
+        if (calculatedColumnSizing.value?.['table'] && !tableElement.value.tableRef.style.width) {
+          tableElement.value.tableRef.style.width = calculatedColumnSizing.value['table'] + 'px'
+        } else {
+          initialTableWidth.value = tableOffsetWidth
+          tableElement.value.tableRef.style.width = tableOffsetWidth + 'px'
+          updatedColumnSizingValue['table'] = tableOffsetWidth
+        }
+      }
+
+      minTableWidth.value = getTableWrapperWidth()
       calculatedColumnSizing.value = updatedColumnSizingValue
     }
   }
 
   return {
     cells,
+    tableElement,
     tableHeaderElement,
     calculatedColumnSizing,
     isResizing,
     resizingCellId,
     handleResizeControlMouseDown,
     handleResizeControlMouseUp,
+    resetCell,
     resetCells,
     setInitialColumnWidths,
     setProvidedCellWidths,

package/src/stories/components/BuiDataTableStory.vue

@@ -115,7 +115,7 @@ function updateSelection(val?: RowSelectionState) {
 }
 
 const columnVisibility = ref<VisibilityState>({ hiddenColumn: false })
-const columnSizing = ref<Record<string, number>>({ title: 450 })
+const columnSizing = ref<Record<string, number>>({})
 const columnOrder = ref<ColumnOrderState>()
 
 type GroupBy = 'none' | 'status' | 'priority'

package/dist/BuiScrollArea.vue_vue_type_script_setup_true_lang-XkIzRs-G.js

@@ -1,141 +0,0 @@
-import { defineComponent as p, ref as m, computed as d, watch as S, createBlock as C, createCommentVNode as k, openBlock as f, unref as r, mergeProps as v, withCtx as u, renderSlot as _, toRefs as $, onMounted as x, createElementBlock as V, Fragment as B, createElementVNode as X, createVNode as i, normalizeStyle as H, createTextVNode as N } from "vue";
-import { i as w, S as R, _ as Y } from "./BuiScrollBar.vue_vue_type_script_setup_true_lang-cV0od8j0.js";
-import { u as E } from "./useForwardExpose-DmyWSR4F.js";
-import { P as b } from "./Primitive-EBuBc72_.js";
-import { useResizeObserver as A } from "@vueuse/core";
-import { u as q } from "./useNonce-DM9DidHz.js";
-import { g as W } from "./utils-DhVytAXN.js";
-var P = /* @__PURE__ */ p({
-  __name: "ScrollAreaCornerImpl",
-  setup(c) {
-    const e = w(), l = m(0), o = m(0), s = d(() => !!l.value && !!o.value);
-    function a() {
-      const t = e.scrollbarX.value?.offsetHeight || 0;
-      e.onCornerHeightChange(t), o.value = t;
-    }
-    function n() {
-      const t = e.scrollbarY.value?.offsetWidth || 0;
-      e.onCornerWidthChange(t), l.value = t;
-    }
-    return A(e.scrollbarX.value, a), A(e.scrollbarY.value, n), S(() => e.scrollbarX.value, a), S(() => e.scrollbarY.value, n), (t, y) => s.value ? (f(), C(r(b), v({
-      key: 0,
-      style: {
-        width: `${l.value}px`,
-        height: `${o.value}px`,
-        position: "absolute",
-        right: r(e).dir.value === "ltr" ? 0 : void 0,
-        left: r(e).dir.value === "rtl" ? 0 : void 0,
-        bottom: 0
-      }
-    }, t.$parent?.$props), {
-      default: u(() => [_(t.$slots, "default")]),
-      _: 3
-    }, 16, ["style"])) : k("v-if", !0);
-  }
-}), z = P, I = /* @__PURE__ */ p({
-  __name: "ScrollAreaCorner",
-  props: {
-    asChild: {
-      type: Boolean,
-      required: !1
-    },
-    as: {
-      type: null,
-      required: !1
-    }
-  },
-  setup(c) {
-    const e = c, { forwardRef: l } = E(), o = w(), s = d(() => !!o.scrollbarX.value && !!o.scrollbarY.value), a = d(() => o.type.value !== "scroll" && s.value);
-    return (n, t) => a.value ? (f(), C(z, v({ key: 0 }, e, { ref: r(l) }), {
-      default: u(() => [_(n.$slots, "default")]),
-      _: 3
-    }, 16)) : k("v-if", !0);
-  }
-}), F = I, j = /* @__PURE__ */ p({
-  inheritAttrs: !1,
-  __name: "ScrollAreaViewport",
-  props: {
-    nonce: {
-      type: String,
-      required: !1
-    },
-    asChild: {
-      type: Boolean,
-      required: !1
-    },
-    as: {
-      type: null,
-      required: !1
-    }
-  },
-  setup(c, { expose: e }) {
-    const l = c, { nonce: o } = $(l), s = q(o), a = w(), n = m();
-    x(() => {
-      a.onViewportChange(n.value), a.onContentChange(y.value);
-    }), e({ viewportElement: n });
-    const { forwardRef: t, currentElement: y } = E();
-    return (h, g) => (f(), V(B, null, [X("div", v({
-      ref_key: "viewportElement",
-      ref: n,
-      "data-reka-scroll-area-viewport": "",
-      style: {
-        overflowX: r(a).scrollbarXEnabled.value ? "scroll" : "hidden",
-        overflowY: r(a).scrollbarYEnabled.value ? "scroll" : "hidden"
-      }
-    }, h.$attrs, { tabindex: 0 }), [i(r(b), {
-      ref: r(t),
-      style: H({ minWidth: r(a).scrollbarXEnabled.value ? "fit-content" : void 0 }),
-      "as-child": l.asChild,
-      as: h.as
-    }, {
-      default: u(() => [_(h.$slots, "default")]),
-      _: 3
-    }, 8, [
-      "style",
-      "as-child",
-      "as"
-    ])], 16), i(r(b), {
-      as: "style",
-      nonce: r(s)
-    }, {
-      default: u(() => g[0] || (g[0] = [N(" /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */ [data-reka-scroll-area-viewport] { scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; } [data-reka-scroll-area-viewport]::-webkit-scrollbar { display:none; } ")])),
-      _: 1,
-      __: [0]
-    }, 8, ["nonce"])], 64));
-  }
-}), D = j;
-const Q = /* @__PURE__ */ p({
-  __name: "BuiScrollArea",
-  props: {
-    type: {},
-    dir: {},
-    scrollHideDelay: {},
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  setup(c) {
-    const e = c, l = d(() => {
-      const { class: o, ...s } = e;
-      return s;
-    });
-    return (o, s) => (f(), C(r(R), v(l.value, {
-      class: r(W)("relative overflow-hidden", e.class)
-    }), {
-      default: u(() => [
-        i(r(D), { class: "h-full w-full rounded-[inherit]" }, {
-          default: u(() => [
-            _(o.$slots, "default")
-          ]),
-          _: 3
-        }),
-        i(Y),
-        i(r(F))
-      ]),
-      _: 3
-    }, 16, ["class"]));
-  }
-});
-export {
-  Q as _
-};