@nu-grid/nuxt 0.1.1

package/dist/runtime/components/NuGrid.vue

@@ -0,0 +1,651 @@
+<script setup>
+import { computed, nextTick, onMounted, provide, ref, shallowRef, watch } from "vue";
+import {
+  useNuGridAddRow,
+  useNuGridAnimation,
+  useNuGridApi,
+  useNuGridAutosize,
+  useNuGridCellEditing,
+  useNuGridColumnDragDrop,
+  useNuGridColumnResize,
+  useNuGridColumns,
+  useNuGridDataWatch,
+  useNuGridFocus,
+  useNuGridFocusInit,
+  useNuGridFooter,
+  useNuGridGrouping,
+  useNuGridInteractionRouter,
+  useNuGridPaging,
+  useNuGridRowDragDrop,
+  useNuGridRowInteractions,
+  useNuGridScrollbars,
+  useNuGridScrollState,
+  useNuGridStatePersistence,
+  useNuGridTooltipHandler,
+  useNuGridUI,
+  useNuGridVirtualization,
+  useNuGridWheelSmoothing
+} from "../composables/_internal";
+import {
+  createPagingKeyboardHandler,
+  useKeyboardSetup
+} from "../composables/_internal/keyboard-handlers";
+import { resolvePagingOptions } from "../composables/_internal/useNuGridPaging";
+import { nuGridDefaults, usePropWithDefault } from "../config/_internal";
+import { NUGRID_EVENTS_KEY } from "../types/events";
+import NuGridBase from "./_internal/NuGridBase.vue";
+import NuGridGroup from "./_internal/NuGridGroup.vue";
+import NuGridPaging from "./_internal/NuGridPaging.vue";
+import NuGridSplitGroup from "./_internal/NuGridSplitGroup.vue";
+import NuGridTooltip from "./_internal/NuGridTooltip.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  ui: { type: null, required: false },
+  preset: { type: String, required: false },
+  focus: { type: Object, required: false },
+  editing: { type: Object, required: false },
+  validation: { type: [Boolean, Object], required: false },
+  selection: { type: [Boolean, String, Object], required: false },
+  actions: { type: [Boolean, Object], required: false },
+  columnDefaults: { type: Object, required: false },
+  layout: { type: Object, required: false },
+  tooltip: { type: [Boolean, Object], required: false },
+  multiRow: { type: [Boolean, Object], required: false },
+  animation: { type: [Boolean, Object], required: false },
+  paging: { type: [Boolean, Object], required: false },
+  state: { type: [Boolean, Object], required: false },
+  theme: { type: [String, Object], required: false },
+  virtualization: { type: [Boolean, Object], required: false },
+  cellTypes: { type: Array, required: false },
+  skipAutoSizeColumns: { type: Array, required: false },
+  rowDragOptions: { type: Object, required: false },
+  rowId: { type: [String, Function], required: false },
+  addNewRow: { type: [Boolean, Object], required: false },
+  as: { type: null, required: false },
+  data: { type: Array, required: false },
+  columns: { type: Array, required: false },
+  caption: { type: String, required: false },
+  meta: { type: Object, required: false },
+  empty: { type: String, required: false },
+  sticky: { type: [Boolean, String], required: false },
+  loading: { type: Boolean, required: false },
+  loadingColor: { type: null, required: false },
+  loadingAnimation: { type: null, required: false },
+  watchOptions: { type: Object, required: false, default: () => ({
+    deep: true
+  }) },
+  globalFilterOptions: { type: Object, required: false },
+  columnFiltersOptions: { type: Object, required: false },
+  columnPinningOptions: { type: Object, required: false },
+  columnSizingOptions: { type: Object, required: false },
+  visibilityOptions: { type: Object, required: false },
+  sortingOptions: { type: Object, required: false },
+  groupingOptions: { type: Object, required: false },
+  expandedOptions: { type: Object, required: false },
+  rowSelectionOptions: { type: Object, required: false },
+  rowPinningOptions: { type: Object, required: false },
+  paginationOptions: { type: Object, required: false },
+  facetedOptions: { type: Object, required: false },
+  onSelect: { type: Function, required: false },
+  onHover: { type: Function, required: false },
+  onContextmenu: { type: [Function, Array], required: false },
+  class: { type: null, required: false },
+  onStateChange: { type: Function, required: false },
+  renderFallbackValue: { type: null, required: false },
+  _features: { type: Array, required: false },
+  autoResetAll: { type: Boolean, required: false },
+  debugAll: { type: Boolean, required: false },
+  debugCells: { type: Boolean, required: false },
+  debugColumns: { type: Boolean, required: false },
+  debugHeaders: { type: Boolean, required: false },
+  debugRows: { type: Boolean, required: false },
+  debugTable: { type: Boolean, required: false },
+  defaultColumn: { type: Object, required: false },
+  getRowId: { type: Function, required: false },
+  getSubRows: { type: Function, required: false },
+  initialState: { type: Object, required: false },
+  mergeOptions: { type: Function, required: false }
+});
+const emit = defineEmits(["rowDragged", "cellValueChanged", "rowSelectionChanged", "stateChanged", "ready", "rowAddRequested", "addRowStateChanged", "cellClicked", "cellDoubleClicked", "rowClicked", "rowDoubleClicked", "focusedCellChanged", "focusedRowChanged", "cellEditingStarted", "cellEditingCancelled", "sortChanged", "filterChanged"]);
+const slots = defineSlots();
+const eventEmitter = {
+  // Click events
+  cellClicked: (e) => emit("cellClicked", e),
+  cellDoubleClicked: (e) => emit("cellDoubleClicked", e),
+  rowClicked: (e) => emit("rowClicked", e),
+  rowDoubleClicked: (e) => emit("rowDoubleClicked", e),
+  // Focus events
+  focusedCellChanged: (e) => emit("focusedCellChanged", e),
+  focusedRowChanged: (e) => emit("focusedRowChanged", e),
+  // Editing lifecycle events
+  cellEditingStarted: (e) => emit("cellEditingStarted", e),
+  cellEditingCancelled: (e) => emit("cellEditingCancelled", e),
+  cellValueChanged: (e) => emit("cellValueChanged", e),
+  // State change events
+  sortChanged: (e) => emit("sortChanged", e),
+  filterChanged: (e) => emit("filterChanged", e),
+  // Migrated existing events
+  rowDragged: (e) => emit("rowDragged", e),
+  stateChanged: (e) => emit("stateChanged", e)
+};
+const hasRowSlot = computed(() => !!slots.row);
+const data = ref(props.data ?? []);
+const propsColumns = computed(() => props.columns);
+useNuGridDataWatch(props, data);
+const rootRef = ref();
+const tableRef = ref(null);
+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 focusedRowIdState = defineModel("focusedRowId", { type: [String, null], ...{ default: null } });
+const initPaginationState = () => {
+  const pagingOptions = resolvePagingOptions(props.paging);
+  if (pagingOptions.enabled && (!paginationState.value.pageSize || paginationState.value.pageSize === 0)) {
+    paginationState.value = {
+      pageIndex: paginationState.value.pageIndex ?? 0,
+      pageSize: pagingOptions.pageSize ?? nuGridDefaults.paging.pageSize
+    };
+  }
+};
+initPaginationState();
+const rowSelectionModeRef = computed(() => hasRowSlot.value ? false : props.selection ?? false);
+const actionMenuRef = computed(() => props.actions ?? false);
+const { columns } = useNuGridColumns(
+  propsColumns,
+  data,
+  rowSelectionModeRef,
+  actionMenuRef,
+  columnVisibilityState
+);
+const { ui, checkboxTheme } = useNuGridUI(props);
+const { hasFooter } = useNuGridFooter(columns);
+watch(
+  rowSelectionState,
+  (val) => {
+    emit("rowSelectionChanged", val);
+  },
+  { deep: true }
+);
+const states = {
+  globalFilterState,
+  columnFiltersState,
+  columnOrderState,
+  columnVisibilityState,
+  columnPinningState,
+  columnSizingState,
+  columnSizingInfoState,
+  rowSelectionState,
+  rowPinningState,
+  sortingState,
+  groupingState,
+  expandedState,
+  paginationState
+};
+const editingCellRef = ref(null);
+const focusFnsRef = shallowRef(null);
+const groupingFnsRef = shallowRef(null);
+const interactionRouter = useNuGridInteractionRouter({ eventEmitter });
+let groupingFns = null;
+const statePersistence = useNuGridStatePersistence(
+  states,
+  !!(typeof props.state === "object" && props.state),
+  typeof props.state === "object" && props.state ? props.state.key : void 0,
+  (state) => emit("stateChanged", state),
+  eventEmitter
+);
+const tableApi = useNuGridApi(props, data, columns, states, rowSelectionModeRef, eventEmitter);
+const tableRows = computed(() => tableApi.getRowModel().rows);
+const rowInteractions = useNuGridRowInteractions(props);
+const cellEditingFnsRef = shallowRef(null);
+const {
+  showAddNewRow,
+  addRowPosition,
+  addNewText,
+  refreshAddRows,
+  isAddRowRow,
+  orderedRows,
+  getGroupAddRow,
+  finalizeAddRow,
+  resetAddRow,
+  addRowState,
+  isFinalizing: addRowIsFinalizing,
+  finalizingRowId: addRowFinalizingRowId
+} = useNuGridAddRow({
+  props,
+  data,
+  table: tableApi,
+  rows: tableRows,
+  columns,
+  groupingState,
+  editingCell: editingCellRef,
+  focusFns: focusFnsRef,
+  cellEditingFns: cellEditingFnsRef,
+  groupingFns: groupingFnsRef,
+  interactionRouter,
+  onAddRowStateChange: (state) => emit("addRowStateChanged", state),
+  onAddRowRequested: (row) => {
+    const nextRow = { ...row };
+    emit("rowAddRequested", nextRow);
+    return { success: true, row: nextRow };
+  }
+});
+watch(
+  [() => props.addNewRow, groupingState, () => props.data],
+  () => {
+    refreshAddRows();
+  },
+  { deep: true, immediate: true }
+);
+const rows = orderedRows;
+const stickyEnabled = computed(() => props.layout?.stickyHeaders ?? false);
+const {
+  virtualizer,
+  virtualizationEnabled,
+  virtualRowItems,
+  activeStickyHeight: baseStickyHeight,
+  measuredVirtualSizes,
+  getVirtualItemHeight,
+  stickyOffsets
+} = useNuGridVirtualization({
+  props: () => props,
+  rows,
+  tableApi,
+  rootRef,
+  stickyEnabled,
+  hasFooter
+});
+const { handleResizeStart, handleGroupResizeStart, resizingGroupId, resizingColumnId } = useNuGridColumnResize(props, tableApi);
+const dragFns = useNuGridColumnDragDrop(tableApi, states.columnOrderState, tableRef);
+const rowDragOptions = computed(() => props.rowDragOptions || { enabled: false });
+const rowDragFns = useNuGridRowDragDrop(
+  tableApi,
+  data,
+  rowDragOptions,
+  tableRef,
+  (event, payload) => {
+    if (event === "rowDragged") {
+      emit("rowDragged", payload);
+    }
+  },
+  eventEmitter
+);
+const gridMode = props.layout?.mode ?? "div";
+groupingFns = gridMode === "group" || gridMode === "splitgroup" ? useNuGridGrouping(props, tableApi, rootRef, stickyEnabled, gridMode, {
+  addRowPosition,
+  isAddRowRow,
+  getAddRowForGroup: getGroupAddRow
+}) : null;
+groupingFnsRef.value = groupingFns;
+const focusFns = useNuGridFocus(
+  props,
+  tableApi,
+  rows,
+  groupingFns?.navigableRows,
+  tableRef,
+  rootRef,
+  groupingFns?.activeStickyHeight ?? baseStickyHeight,
+  groupingFns?.virtualizer ?? virtualizer ?? false,
+  editingCellRef,
+  interactionRouter,
+  eventEmitter,
+  focusedRowIdState
+);
+focusFnsRef.value = focusFns;
+const cellEditingFns = useNuGridCellEditing(
+  props,
+  tableApi,
+  data,
+  rows,
+  tableRef,
+  rootRef,
+  focusFns,
+  interactionRouter,
+  (payload) => emit("cellValueChanged", payload),
+  groupingFns?.navigableRows,
+  editingCellRef,
+  {
+    showAddNewRow,
+    addRowPosition,
+    addRowState,
+    addNewText,
+    isAddRowRow,
+    finalizeAddRow,
+    resetAddRow
+  }
+);
+cellEditingFnsRef.value = cellEditingFns;
+const effectiveFocusMode = computed(() => {
+  const mode = usePropWithDefault(props, "focus", "mode").value;
+  if (hasRowSlot.value && mode === "cell") return "row";
+  return mode;
+});
+const effectiveEditingEnabled = computed(() => {
+  if (hasRowSlot.value) return false;
+  return usePropWithDefault(props, "editing", "enabled").value;
+});
+useKeyboardSetup({
+  interactionRouter,
+  focusFns,
+  cellEditingFns,
+  tableApi,
+  resolvedRows: computed(() => groupingFns?.navigableRows?.value ?? rows.value),
+  rootRef,
+  focusModeRef: effectiveFocusMode,
+  retainFocusRef: usePropWithDefault(props, "focus", "retain"),
+  editingEnabledRef: effectiveEditingEnabled,
+  startKeysRef: usePropWithDefault(props, "editing", "startKeys"),
+  cellTypes: props.cellTypes ? computed(() => props.cellTypes) : void 0,
+  data,
+  emitCellValueChanged: (payload) => emit("cellValueChanged", payload)
+});
+const autosizeFns = useNuGridAutosize(props, tableApi, tableRef);
+const headerGroups = computed(() => tableApi.getHeaderGroups());
+const headerGroupsLength = computed(() => headerGroups.value.length);
+const footerGroups = computed(() => tableApi.getFooterGroups());
+const allLeafColumns = computed(() => tableApi.getAllLeafColumns());
+const visibleCellsCache = computed(() => {
+  const cache = /* @__PURE__ */ new Map();
+  rows.value.forEach((row) => {
+    cache.set(row.id, row.getVisibleCells());
+  });
+  return cache;
+});
+function getVisibleCells(row) {
+  return visibleCellsCache.value.get(row.id) ?? row.getVisibleCells();
+}
+function shouldHaveBorder(row, cellIndex, side) {
+  const cells = getVisibleCells(row);
+  const cell = cells[cellIndex];
+  const pinPosition = side;
+  const isFirst = side === "left";
+  if (cell?.column.getIsPinned() === pinPosition) {
+    if (isFirst) {
+      return cells.findIndex((c) => c.column.getIsPinned() === pinPosition) === cellIndex;
+    } else {
+      for (let i = cells.length - 1; i >= 0; i--) {
+        if (cells[i]?.column.getIsPinned() === pinPosition) {
+          return i === cellIndex;
+        }
+      }
+    }
+  }
+  const hasPinned = cells.some((c) => c.column.getIsPinned() === pinPosition);
+  return !hasPinned && (isFirst ? cellIndex === 0 : cellIndex === cells.length - 1);
+}
+const rootElement = computed(() => rootRef.value?.$el);
+const scrollbarTheme = computed(() => props.ui?.scrollbar ?? ui.value.scrollbar?.());
+const { scrollbarClass, scrollbarThemeClass, scrollbarAttr } = useNuGridScrollbars({
+  props,
+  containerRef: rootElement,
+  themeClass: scrollbarTheme
+});
+const scrollState = useNuGridScrollState({
+  containerRef: rootElement,
+  settleDelay: 150
+});
+useNuGridWheelSmoothing(rootElement, {
+  threshold: 2,
+  maxVelocityPxPerSec: 6e3,
+  // Mouse wheel cap
+  maxVelocityPxPerSecTouchpad: 9e3,
+  // Touchpad cap (higher for smoother feel)
+  touchpadDeltaThreshold: 20,
+  // Deltas < 20px = touchpad, >= 20px = mouse wheel
+  smoothingFactor: 0.35
+});
+watch(
+  rootElement,
+  (el) => {
+    interactionRouter.setGridRoot(el);
+  },
+  { immediate: true }
+);
+useNuGridTooltipHandler(props, interactionRouter, {
+  tableApi: computed(() => tableApi),
+  columns: propsColumns
+});
+provide("nugrid-core", {
+  tableRef,
+  rootRef,
+  tableApi,
+  ui,
+  propsUi: computed(() => props.ui),
+  hasFooter,
+  rows,
+  rowSlot: slots.row
+});
+provide("nugrid-drag", {
+  dragFns,
+  rowDragFns,
+  rowDragOptions
+});
+provide("nugrid-focus", {
+  focusFns,
+  cellEditingFns
+});
+provide("nugrid-resize", {
+  handleResizeStart,
+  handleGroupResizeStart,
+  resizingGroupId,
+  resizingColumnId
+});
+provide("nugrid-virtualization", {
+  virtualizer,
+  virtualizationEnabled,
+  virtualRowItems,
+  measuredVirtualSizes,
+  getVirtualItemHeight,
+  stickyOffsets,
+  stickyEnabled
+});
+provide("nugrid-grouping", {
+  groupingFns
+});
+provide("nugrid-performance", {
+  headerGroups,
+  headerGroupsLength,
+  footerGroups,
+  allLeafColumns,
+  getVisibleCells,
+  shouldHaveBorder
+});
+provide("nugrid-ui-config", {
+  sortIcons: computed(() => props.columnDefaults?.sortIcons),
+  scrollbarClass,
+  scrollbarThemeClass,
+  scrollbarAttr,
+  getColumnMenuItems: computed(() => props.columnDefaults?.menu?.items),
+  showColumnVisibility: computed(() => props.columnDefaults?.menu?.visibilityToggle ?? true),
+  columnMenuButton: computed(() => props.columnDefaults?.menu?.button),
+  wrapText: computed(() => props.columnDefaults?.wrapText ?? false),
+  checkboxTheme
+});
+provide("nugrid-validation", {
+  // Expose validation error display settings so editors can inject without prop wiring
+  showErrors: computed(() => cellEditingFns.showValidationErrors.value),
+  icon: computed(() => cellEditingFns.validationIcon.value)
+});
+provide("nugrid-row-interactions", {
+  rowInteractions,
+  rowSelectionMode: rowSelectionModeRef
+});
+provide("nugrid-interaction-router", {
+  interactionRouter
+});
+provide(NUGRID_EVENTS_KEY, eventEmitter);
+provide("nugrid-multi-row", {
+  enabled: computed(() => {
+    if (props.multiRow === false) return false;
+    return props.multiRow?.enabled ?? false;
+  }),
+  rowCount: computed(() => {
+    if (props.multiRow === false) return 1;
+    return props.multiRow?.rowCount ?? 1;
+  }),
+  alignColumns: computed(() => {
+    if (props.multiRow === false) return false;
+    return props.multiRow?.alignColumns ?? false;
+  }),
+  row0Columns: computed(() => {
+    const allColumns = tableApi.getAllLeafColumns().filter((col) => col.getIsVisible());
+    return allColumns.filter((col) => (col.columnDef.row ?? 0) === 0).map((col) => ({
+      id: col.id,
+      width: col.getSize(),
+      minWidth: col.columnDef.minSize ?? 50,
+      pinned: col.getIsPinned() || false,
+      column: col
+    }));
+  })
+});
+const addRowContext = {
+  showAddNewRow,
+  addRowPosition,
+  addRowState,
+  addNewText,
+  indicatorSlot: slots["add-row-indicator"],
+  isAddRowRow,
+  finalizeAddRow,
+  resetAddRow,
+  isFinalizing: addRowIsFinalizing,
+  finalizingRowId: addRowFinalizingRowId
+};
+provide("nugrid-add-row", addRowContext);
+const animationContext = useNuGridAnimation(props, {
+  rootRef: rootElement,
+  rows,
+  animationClass: computed(() => ui.value.rowAnimation())
+});
+provide("nugrid-animation", animationContext);
+const pagingContext = useNuGridPaging({
+  props,
+  tableApi,
+  rootRef: rootElement
+});
+provide("nugrid-paging", pagingContext);
+const pagingKeyboardHandler = createPagingKeyboardHandler(pagingContext);
+interactionRouter.registerKeyboardHandler(pagingKeyboardHandler);
+provide("nugrid-scroll-state", {
+  ...scrollState,
+  containerRef: rootElement
+});
+useNuGridFocusInit(props, focusFns, groupingFns?.navigableRows ?? rows);
+onMounted(() => {
+  nextTick(() => {
+    emit("ready");
+  });
+});
+const excelExport = async (filenameOrOptions, sheetName) => {
+  const options = typeof filenameOrOptions === "string" ? { filename: filenameOrOptions, ...sheetName ? { sheetName } : {} } : filenameOrOptions ?? {};
+  const isGrouped = tableApi.getState().grouping?.length > 0;
+  const columnsToExport = props.columns ?? [];
+  const { exportGroupedToExcel, exportToExcel } = await import("../utils/excelExport");
+  if (isGrouped) {
+    await exportGroupedToExcel(tableApi, columnsToExport, options);
+  } else {
+    await exportToExcel(tableApi, columnsToExport, options);
+  }
+};
+function getSelectedRows() {
+  if (!tableApi) return [];
+  return tableApi.getSelectedRowModel().rows.map((row) => row.original);
+}
+const pinColumn = (columnId, side) => {
+  const currentPinning = tableApi.getState().columnPinning;
+  const newPinning = { ...currentPinning };
+  const oppositeSide = side === "left" ? "right" : "left";
+  if (newPinning[oppositeSide]) {
+    newPinning[oppositeSide] = newPinning[oppositeSide].filter((id) => id !== columnId);
+  }
+  if (!newPinning[side]) {
+    newPinning[side] = [];
+  }
+  if (!newPinning[side].includes(columnId)) {
+    newPinning[side] = [...newPinning[side], columnId];
+  }
+  tableApi.setColumnPinning(newPinning);
+};
+const unpinColumn = (columnId) => {
+  const currentPinning = tableApi.getState().columnPinning;
+  const newPinning = {
+    left: currentPinning.left?.filter((id) => id !== columnId) || [],
+    right: currentPinning.right?.filter((id) => id !== columnId) || []
+  };
+  tableApi.setColumnPinning(newPinning);
+};
+const isPinned = (columnId) => {
+  const pinning = tableApi.getState().columnPinning;
+  if (pinning.left?.includes(columnId)) return "left";
+  if (pinning.right?.includes(columnId)) return "right";
+  return false;
+};
+const getPinnedColumns = () => {
+  const pinning = tableApi.getState().columnPinning;
+  return {
+    left: pinning.left || [],
+    right: pinning.right || []
+  };
+};
+defineExpose({
+  get $el() {
+    return rootRef.value?.$el;
+  },
+  tableRef,
+  tableApi,
+  autoSizeColumns: autosizeFns.autoSizeColumns,
+  autoSizeColumn: autosizeFns.autoSizeColumn,
+  getState: statePersistence.getState,
+  setState: statePersistence.setState,
+  addRowState,
+  excelExport,
+  getSelectedRows,
+  // Paging methods
+  pagingGoToPage: (page) => pagingContext.setPageIndex(page),
+  pagingGetCurrentPage: () => pagingContext.pageIndex.value,
+  pagingGetPageSize: () => pagingContext.pageSize.value,
+  pagingGetTotalPages: () => pagingContext.totalPages.value,
+  // Column pinning methods
+  pinColumn,
+  unpinColumn,
+  isPinned,
+  getPinnedColumns,
+  // Focus methods
+  focusRowById: focusFns.focusRowById
+});
+const childGrid = computed(() => {
+  if (gridMode === "splitgroup") return NuGridSplitGroup;
+  if (gridMode === "group") return NuGridGroup;
+  return NuGridBase;
+});
+</script>
+
+<template>
+  <div class="nugrid-wrapper flex flex-col h-full w-full">
+    <div class="nugrid-grid-container grow shrink min-h-0">
+      <component :is="childGrid">
+        <template v-for="(_, name) in $slots" #[name]="slotProps" :key="name">
+          <slot :name="name" v-bind="slotProps" />
+        </template>
+      </component>
+    </div>
+    <!-- Paging panel (outside scrolling area) -->
+    <NuGridPaging v-if="pagingContext.showPanel.value" class="shrink-0" />
+  </div>
+  <!-- Single shared tooltip instance for all cells -->
+  <NuGridTooltip />
+</template>
+
+<style>
+body.is-resizing-column,body.is-resizing-column *{cursor:col-resize!important;-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}body.is-resizing-column{cursor:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M11 2v20h2V2zM9 6H5v12h4zm10 0h-4v12h4z'/%3E%3C/svg%3E") 12 12,col-resize!important}@media (prefers-color-scheme:dark){body.is-resizing-column{cursor:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 2v20h2V2zM9 6H5v12h4zm10 0h-4v12h4z'/%3E%3C/svg%3E") 12 12,col-resize!important}}body.is-dragging-column{cursor:move!important}body.is-dragging-column,body.is-dragging-column-outside,body.is-dragging-row-outside{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}body.is-dragging-column-outside,body.is-dragging-row-outside{cursor:no-drop!important}body.is-dragging-row{cursor:grabbing!important;-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}body.is-dragging-column-outside div[data-dragging=true],body.is-dragging-row-outside [data-tbody]>div[data-dragging=true]{background-color:rgba(239,68,68,.2);cursor:no-drop!important;opacity:.3;outline:2px dashed rgba(239,68,68,.6);outline-offset:-2px}
+</style>