cisse-vue-ui 0.8.4 → 0.9.0

package/dist/useVirtualScroll-BivP86fA.cjs

@@ -0,0 +1,869 @@
+"use strict";
+const vue = require("vue");
+var IDX = 256, HEX = [], SIZE = 256, BUFFER;
+while (IDX--) HEX[IDX] = (IDX + 256).toString(16).substring(1);
+function uid(len) {
+  var i = 0, tmp = 11;
+  if (!BUFFER || IDX + tmp > SIZE * 2) {
+    for (BUFFER = "", IDX = 0; i < SIZE; i++) {
+      BUFFER += HEX[Math.random() * 256 | 0];
+    }
+  }
+  return BUFFER.substring(IDX, IDX++ + tmp);
+}
+const notifications = vue.ref([]);
+function useNotifications() {
+  const notify = (type, message, options = {}) => {
+    const id = uid();
+    const notification = {
+      id,
+      type,
+      message,
+      title: options.title ?? null,
+      duration: options.duration ?? 5e3
+    };
+    notifications.value.push(notification);
+    if (notification.duration && notification.duration > 0) {
+      setTimeout(() => remove(id), notification.duration);
+    }
+    return id;
+  };
+  const success = (message, options) => notify("success", message, options);
+  const warning = (message, options) => notify("warning", message, options);
+  const error = (message, options) => notify("error", message, options);
+  const info = (message, options) => notify("info", message, options);
+  const remove = (id) => {
+    notifications.value = notifications.value.filter((n) => n.id !== id);
+  };
+  const clear = () => {
+    notifications.value = [];
+  };
+  return {
+    notifications: vue.readonly(notifications),
+    notify,
+    success,
+    warning,
+    error,
+    info,
+    remove,
+    clear
+  };
+}
+function useExportCSV() {
+  const escapeCSV = (value) => {
+    if (value === null || value === void 0) return "";
+    const str = String(value);
+    if (str.includes(",") || str.includes('"') || str.includes("\n")) {
+      return `"${str.replace(/"/g, '""')}"`;
+    }
+    return str;
+  };
+  const exportToCSV = (data, columns, filename = "export.csv") => {
+    if (!data || data.length === 0) {
+      console.warn("No data to export");
+      return;
+    }
+    const headers = columns.map((col) => escapeCSV(col.label)).join(",");
+    const rows = data.map(
+      (item) => columns.map((col) => escapeCSV(item[col.key])).join(",")
+    );
+    const csv = [headers, ...rows].join("\n");
+    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.setAttribute("href", url);
+    link.setAttribute("download", filename);
+    link.style.visibility = "hidden";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+  return {
+    exportToCSV,
+    escapeCSV
+  };
+}
+function useModal(options) {
+  const {
+    initialOpen = false,
+    initialData = null,
+    onOpen,
+    onClose
+  } = options ?? {};
+  const isOpen = vue.ref(initialOpen);
+  const data = vue.ref(initialData);
+  const open = (newData) => {
+    data.value = newData ?? null;
+    isOpen.value = true;
+    onOpen == null ? void 0 : onOpen(data.value);
+  };
+  const close = () => {
+    isOpen.value = false;
+    data.value = null;
+    onClose == null ? void 0 : onClose();
+  };
+  const toggle = () => {
+    if (isOpen.value) {
+      close();
+    } else {
+      open();
+    }
+  };
+  return {
+    isOpen,
+    data,
+    open,
+    close,
+    toggle
+  };
+}
+function useModals(modals) {
+  return modals;
+}
+const toasts = vue.ref([]);
+let toastId = 0;
+function useToast() {
+  const add = (options) => {
+    const id = `toast-${++toastId}`;
+    const toast = {
+      id,
+      message: options.message,
+      type: options.type || "info",
+      title: options.title,
+      duration: options.duration ?? 5e3
+    };
+    toasts.value.push(toast);
+    return id;
+  };
+  const remove = (id) => {
+    const index = toasts.value.findIndex((t) => t.id === id);
+    if (index > -1) {
+      toasts.value.splice(index, 1);
+    }
+  };
+  const clear = () => {
+    toasts.value = [];
+  };
+  const success = (message, title) => {
+    return add({ message, title, type: "success" });
+  };
+  const error = (message, title) => {
+    return add({ message, title, type: "error" });
+  };
+  const warning = (message, title) => {
+    return add({ message, title, type: "warning" });
+  };
+  const info = (message, title) => {
+    return add({ message, title, type: "info" });
+  };
+  return {
+    toasts,
+    add,
+    remove,
+    clear,
+    success,
+    error,
+    warning,
+    info
+  };
+}
+function useTableKeyboardNavigation(options) {
+  const {
+    tableRef,
+    rowCount,
+    colCount,
+    cellNavigation = false,
+    onRowActivate,
+    onCellActivate,
+    onFocusChange,
+    skipHeader = true,
+    wrap = true
+  } = options;
+  const focusedRow = vue.ref(skipHeader ? 1 : 0);
+  const focusedCol = vue.ref(0);
+  const isActive = vue.ref(false);
+  const totalRows = vue.computed(() => typeof rowCount === "number" ? rowCount : rowCount.value);
+  const totalCols = vue.computed(() => typeof colCount === "number" ? colCount : colCount.value);
+  const startRow = vue.computed(() => skipHeader ? 1 : 0);
+  const clampRow = (row) => {
+    if (wrap) {
+      if (row < startRow.value) return totalRows.value - 1;
+      if (row >= totalRows.value) return startRow.value;
+      return row;
+    }
+    return Math.max(startRow.value, Math.min(totalRows.value - 1, row));
+  };
+  const clampCol = (col) => {
+    if (wrap) {
+      if (col < 0) return totalCols.value - 1;
+      if (col >= totalCols.value) return 0;
+      return col;
+    }
+    return Math.max(0, Math.min(totalCols.value - 1, col));
+  };
+  const setFocusedRow = (index) => {
+    focusedRow.value = clampRow(index);
+    onFocusChange == null ? void 0 : onFocusChange(focusedRow.value, focusedCol.value);
+  };
+  const setFocusedCell = (row, col) => {
+    focusedRow.value = clampRow(row);
+    focusedCol.value = clampCol(col);
+    onFocusChange == null ? void 0 : onFocusChange(focusedRow.value, focusedCol.value);
+  };
+  const activate = () => {
+    isActive.value = true;
+    focusCurrentElement();
+  };
+  const deactivate = () => {
+    isActive.value = false;
+  };
+  const focusCurrentElement = () => {
+    if (!tableRef.value) return;
+    const selector = cellNavigation ? `tr:nth-child(${focusedRow.value + 1}) td:nth-child(${focusedCol.value + 1}), tr:nth-child(${focusedRow.value + 1}) th:nth-child(${focusedCol.value + 1})` : `tr:nth-child(${focusedRow.value + 1})`;
+    const element = tableRef.value.querySelector(selector);
+    element == null ? void 0 : element.focus();
+  };
+  const handleKeyDown = (event) => {
+    if (!isActive.value) return;
+    const { key, shiftKey, ctrlKey, metaKey } = event;
+    if (ctrlKey || metaKey) return;
+    let handled = false;
+    switch (key) {
+      case "ArrowDown":
+        setFocusedRow(focusedRow.value + 1);
+        handled = true;
+        break;
+      case "ArrowUp":
+        setFocusedRow(focusedRow.value - 1);
+        handled = true;
+        break;
+      case "ArrowRight":
+        if (cellNavigation) {
+          setFocusedCell(focusedRow.value, focusedCol.value + 1);
+          handled = true;
+        }
+        break;
+      case "ArrowLeft":
+        if (cellNavigation) {
+          setFocusedCell(focusedRow.value, focusedCol.value - 1);
+          handled = true;
+        }
+        break;
+      case "Home":
+        if (cellNavigation) {
+          setFocusedCell(shiftKey ? startRow.value : focusedRow.value, 0);
+        } else {
+          setFocusedRow(startRow.value);
+        }
+        handled = true;
+        break;
+      case "End":
+        if (cellNavigation) {
+          setFocusedCell(
+            shiftKey ? totalRows.value - 1 : focusedRow.value,
+            totalCols.value - 1
+          );
+        } else {
+          setFocusedRow(totalRows.value - 1);
+        }
+        handled = true;
+        break;
+      case "PageDown":
+        setFocusedRow(focusedRow.value + 10);
+        handled = true;
+        break;
+      case "PageUp":
+        setFocusedRow(focusedRow.value - 10);
+        handled = true;
+        break;
+      case "Enter":
+      case " ":
+        if (cellNavigation) {
+          onCellActivate == null ? void 0 : onCellActivate(focusedRow.value, focusedCol.value);
+        } else {
+          onRowActivate == null ? void 0 : onRowActivate(focusedRow.value);
+        }
+        handled = true;
+        break;
+      case "Escape":
+        deactivate();
+        handled = true;
+        break;
+      case "Tab":
+        deactivate();
+        return;
+    }
+    if (handled) {
+      event.preventDefault();
+      event.stopPropagation();
+      focusCurrentElement();
+    }
+  };
+  const getRowProps = (rowIndex) => ({
+    tabIndex: focusedRow.value === rowIndex && isActive.value ? 0 : -1,
+    "aria-selected": focusedRow.value === rowIndex ? true : void 0,
+    onFocus: () => {
+      if (!isActive.value) {
+        isActive.value = true;
+      }
+      focusedRow.value = rowIndex;
+    }
+  });
+  const getCellProps = (rowIndex, colIndex) => ({
+    tabIndex: focusedRow.value === rowIndex && focusedCol.value === colIndex && isActive.value ? 0 : -1,
+    "aria-selected": focusedRow.value === rowIndex && focusedCol.value === colIndex ? true : void 0,
+    onFocus: () => {
+      if (!isActive.value) {
+        isActive.value = true;
+      }
+      focusedRow.value = rowIndex;
+      focusedCol.value = colIndex;
+    }
+  });
+  const handleTableFocus = () => {
+    if (!isActive.value) {
+      activate();
+    }
+  };
+  vue.onMounted(() => {
+    var _a;
+    (_a = tableRef.value) == null ? void 0 : _a.addEventListener("focus", handleTableFocus, true);
+  });
+  vue.onUnmounted(() => {
+    var _a;
+    (_a = tableRef.value) == null ? void 0 : _a.removeEventListener("focus", handleTableFocus, true);
+  });
+  return {
+    focusedRow,
+    focusedCol,
+    isActive,
+    setFocusedRow,
+    setFocusedCell,
+    activate,
+    deactivate,
+    getRowProps,
+    getCellProps,
+    handleKeyDown
+  };
+}
+function useColumnVisibility(options) {
+  const {
+    columns: columnsOption,
+    initialHidden = [],
+    persist = false,
+    storageKey = "table-column-visibility",
+    minVisible = 1
+  } = options;
+  const loadInitialState = () => {
+    if (persist && typeof window !== "undefined") {
+      try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored) {
+          return new Set(JSON.parse(stored));
+        }
+      } catch {
+      }
+    }
+    return new Set(initialHidden);
+  };
+  const hiddenColumns = vue.ref(loadInitialState());
+  const saveState = () => {
+    if (persist && typeof window !== "undefined") {
+      try {
+        localStorage.setItem(storageKey, JSON.stringify([...hiddenColumns.value]));
+      } catch {
+      }
+    }
+  };
+  const rawColumns = vue.computed(() => {
+    const cols = "value" in columnsOption ? columnsOption.value : columnsOption;
+    return cols;
+  });
+  const columns = vue.computed(() => {
+    return rawColumns.value.map((col) => ({
+      ...col,
+      hidden: hiddenColumns.value.has(col.name)
+    }));
+  });
+  const visibleColumns = vue.computed(() => {
+    return columns.value.filter((col) => !col.hidden);
+  });
+  const isVisible = (columnName) => {
+    return !hiddenColumns.value.has(columnName);
+  };
+  const show = (columnName) => {
+    hiddenColumns.value.delete(columnName);
+    hiddenColumns.value = new Set(hiddenColumns.value);
+    saveState();
+  };
+  const hide = (columnName) => {
+    if (visibleColumns.value.length <= minVisible) {
+      return;
+    }
+    hiddenColumns.value.add(columnName);
+    hiddenColumns.value = new Set(hiddenColumns.value);
+    saveState();
+  };
+  const toggle = (columnName) => {
+    if (isVisible(columnName)) {
+      hide(columnName);
+    } else {
+      show(columnName);
+    }
+  };
+  const showAll = () => {
+    hiddenColumns.value = /* @__PURE__ */ new Set();
+    saveState();
+  };
+  const hideAll = () => {
+    const columnsToKeep = rawColumns.value.slice(0, minVisible).map((c) => c.name);
+    const newHidden = new Set(
+      rawColumns.value.filter((c) => !columnsToKeep.includes(c.name)).map((c) => c.name)
+    );
+    hiddenColumns.value = newHidden;
+    saveState();
+  };
+  const reset = () => {
+    hiddenColumns.value = new Set(initialHidden);
+    saveState();
+  };
+  const setVisibility = (visibility) => {
+    const newHidden = /* @__PURE__ */ new Set();
+    let visibleCount = 0;
+    for (const col of rawColumns.value) {
+      const shouldBeVisible = visibility[col.name] ?? true;
+      if (shouldBeVisible) {
+        visibleCount++;
+      } else {
+        newHidden.add(col.name);
+      }
+    }
+    if (visibleCount < minVisible) {
+      let added = 0;
+      for (const col of rawColumns.value) {
+        if (newHidden.has(col.name)) {
+          newHidden.delete(col.name);
+          added++;
+          if (visibleCount + added >= minVisible) break;
+        }
+      }
+    }
+    hiddenColumns.value = newHidden;
+    saveState();
+  };
+  return {
+    columns,
+    visibleColumns,
+    hiddenColumns,
+    isVisible,
+    show,
+    hide,
+    toggle,
+    showAll,
+    hideAll,
+    reset,
+    setVisibility
+  };
+}
+function useColumnResize(options) {
+  const {
+    columns: columnsOption,
+    defaultMinWidth = 50,
+    defaultMaxWidth = 1e3,
+    storageKey,
+    persist = false
+  } = options;
+  const allColumns = vue.computed(() => {
+    return "value" in columnsOption ? columnsOption.value : columnsOption;
+  });
+  const getInitialWidths = () => {
+    const map = /* @__PURE__ */ new Map();
+    allColumns.value.forEach((col) => {
+      map.set(col.name, col.width);
+    });
+    return map;
+  };
+  const loadFromStorage = () => {
+    if (!persist || !storageKey) return null;
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        return new Map(Object.entries(parsed));
+      }
+    } catch {
+    }
+    return null;
+  };
+  const saveToStorage = () => {
+    if (!persist || !storageKey) return;
+    try {
+      const obj = Object.fromEntries(widths.value);
+      localStorage.setItem(storageKey, JSON.stringify(obj));
+    } catch {
+    }
+  };
+  const widths = vue.ref(loadFromStorage() ?? getInitialWidths());
+  vue.watch(
+    allColumns,
+    (newColumns) => {
+      const stored = loadFromStorage();
+      newColumns.forEach((col) => {
+        if (!widths.value.has(col.name)) {
+          widths.value.set(col.name, (stored == null ? void 0 : stored.get(col.name)) ?? col.width);
+        }
+      });
+    },
+    { deep: true }
+  );
+  const resizingColumn = vue.ref(null);
+  const startX = vue.ref(0);
+  const startWidth = vue.ref(0);
+  const isResizing = vue.computed(() => resizingColumn.value !== null);
+  const columnWidths = vue.computed(() => {
+    const result = {};
+    widths.value.forEach((width, name) => {
+      result[name] = width;
+    });
+    return result;
+  });
+  const getWidth = (name) => {
+    var _a;
+    return widths.value.get(name) ?? ((_a = allColumns.value.find((c) => c.name === name)) == null ? void 0 : _a.width) ?? 100;
+  };
+  const getColumnConfig = (name) => {
+    return allColumns.value.find((c) => c.name === name);
+  };
+  const setWidth = (name, width) => {
+    const config = getColumnConfig(name);
+    const minWidth = (config == null ? void 0 : config.minWidth) ?? defaultMinWidth;
+    const maxWidth = (config == null ? void 0 : config.maxWidth) ?? defaultMaxWidth;
+    const clampedWidth = Math.max(minWidth, Math.min(maxWidth, width));
+    const newWidths = new Map(widths.value);
+    newWidths.set(name, clampedWidth);
+    widths.value = newWidths;
+    saveToStorage();
+  };
+  const handleMouseMove = (event) => {
+    if (!resizingColumn.value) return;
+    const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
+    const deltaX = clientX - startX.value;
+    const newWidth = startWidth.value + deltaX;
+    setWidth(resizingColumn.value, newWidth);
+  };
+  const handleMouseUp = () => {
+    resizingColumn.value = null;
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+    document.removeEventListener("touchmove", handleMouseMove);
+    document.removeEventListener("touchend", handleMouseUp);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  };
+  const startResize = (name, event) => {
+    event.preventDefault();
+    resizingColumn.value = name;
+    startX.value = "touches" in event ? event.touches[0].clientX : event.clientX;
+    startWidth.value = getWidth(name);
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("touchmove", handleMouseMove);
+    document.addEventListener("touchend", handleMouseUp);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  };
+  const reset = () => {
+    widths.value = getInitialWidths();
+    saveToStorage();
+  };
+  const resetColumn = (name) => {
+    const config = getColumnConfig(name);
+    if (config) {
+      setWidth(name, config.width);
+    }
+  };
+  return {
+    columnWidths,
+    getWidth,
+    setWidth,
+    startResize,
+    isResizing,
+    resizingColumn,
+    reset,
+    resetColumn
+  };
+}
+function usePinnedRows(options = {}) {
+  const {
+    keyField = "id",
+    initialPinned = [],
+    maxPinnedTop = Infinity,
+    maxPinnedBottom = Infinity
+  } = options;
+  const getItemKey = (item) => {
+    const key = item[keyField];
+    return String(key ?? Math.random());
+  };
+  const pinnedMap = vue.shallowRef(
+    new Map(initialPinned.map((p) => [getItemKey(p.item), p]))
+  );
+  const pinnedTop = vue.computed(() => {
+    const items = [];
+    pinnedMap.value.forEach(({ item, position }) => {
+      if (position === "top") {
+        items.push(item);
+      }
+    });
+    return items;
+  });
+  const pinnedBottom = vue.computed(() => {
+    const items = [];
+    pinnedMap.value.forEach(({ item, position }) => {
+      if (position === "bottom") {
+        items.push(item);
+      }
+    });
+    return items;
+  });
+  const pinnedKeys = vue.computed(() => {
+    return new Set(pinnedMap.value.keys());
+  });
+  const isPinned = (item) => {
+    return pinnedMap.value.has(getItemKey(item));
+  };
+  const getPinPosition = (item) => {
+    const pinned = pinnedMap.value.get(getItemKey(item));
+    return (pinned == null ? void 0 : pinned.position) ?? null;
+  };
+  const pin = (item, position) => {
+    const currentCount = position === "top" ? pinnedTop.value.length : pinnedBottom.value.length;
+    const maxCount = position === "top" ? maxPinnedTop : maxPinnedBottom;
+    if (currentCount >= maxCount && getPinPosition(item) !== position) {
+      return;
+    }
+    const key = getItemKey(item);
+    const newMap = new Map(pinnedMap.value);
+    newMap.set(key, { item, position });
+    pinnedMap.value = newMap;
+  };
+  const unpin = (item) => {
+    const key = getItemKey(item);
+    if (pinnedMap.value.has(key)) {
+      const newMap = new Map(pinnedMap.value);
+      newMap.delete(key);
+      pinnedMap.value = newMap;
+    }
+  };
+  const togglePin = (item, position = "top") => {
+    if (isPinned(item)) {
+      unpin(item);
+    } else {
+      pin(item, position);
+    }
+  };
+  const movePin = (item, newPosition) => {
+    if (isPinned(item)) {
+      pin(item, newPosition);
+    }
+  };
+  const clearAll = () => {
+    pinnedMap.value = /* @__PURE__ */ new Map();
+  };
+  const clear = (position) => {
+    const newMap = /* @__PURE__ */ new Map();
+    pinnedMap.value.forEach((pinned, key) => {
+      if (pinned.position !== position) {
+        newMap.set(key, pinned);
+      }
+    });
+    pinnedMap.value = newMap;
+  };
+  return {
+    pinnedTop,
+    pinnedBottom,
+    pinnedKeys,
+    isPinned,
+    getPinPosition,
+    pin,
+    unpin,
+    togglePin,
+    movePin,
+    clearAll,
+    clear
+  };
+}
+function useEditableCell(options = {}) {
+  const {
+    keyField = "id",
+    onSave,
+    onCancel,
+    validate
+  } = options;
+  const editingCell = vue.ref(null);
+  const editValue = vue.ref(null);
+  const error = vue.ref(null);
+  const saving = vue.ref(false);
+  const currentItem = vue.ref(null);
+  const originalValue = vue.ref(null);
+  const getItemKey = (item) => {
+    const key = item[keyField];
+    return String(key ?? Math.random());
+  };
+  const isEditing = (rowKey, field) => {
+    var _a, _b;
+    return ((_a = editingCell.value) == null ? void 0 : _a.rowKey) === rowKey && ((_b = editingCell.value) == null ? void 0 : _b.field) === field;
+  };
+  const startEdit = (item, field, currentValue) => {
+    if (editingCell.value) {
+      cancelEdit();
+    }
+    currentItem.value = item;
+    originalValue.value = currentValue;
+    editValue.value = currentValue;
+    error.value = null;
+    editingCell.value = {
+      rowKey: getItemKey(item),
+      field
+    };
+  };
+  const confirmEdit = async () => {
+    if (!editingCell.value || !currentItem.value) return;
+    const event = {
+      item: currentItem.value,
+      field: editingCell.value.field,
+      originalValue: originalValue.value,
+      newValue: editValue.value
+    };
+    if (validate) {
+      const validationError = validate(event);
+      if (validationError) {
+        error.value = validationError;
+        return;
+      }
+    }
+    saving.value = true;
+    error.value = null;
+    try {
+      if (onSave) {
+        await onSave(event);
+      }
+      editingCell.value = null;
+      editValue.value = null;
+      currentItem.value = null;
+      originalValue.value = null;
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : "Failed to save";
+    } finally {
+      saving.value = false;
+    }
+  };
+  const cancelEdit = () => {
+    if (editingCell.value && currentItem.value && onCancel) {
+      onCancel({
+        item: currentItem.value,
+        field: editingCell.value.field,
+        originalValue: originalValue.value
+      });
+    }
+    editingCell.value = null;
+    editValue.value = null;
+    error.value = null;
+    currentItem.value = null;
+    originalValue.value = null;
+  };
+  const updateValue = (value) => {
+    editValue.value = value;
+    error.value = null;
+  };
+  const editingItem = vue.computed(() => currentItem.value);
+  return {
+    editingCell,
+    editValue,
+    error,
+    saving,
+    isEditing,
+    startEdit,
+    confirmEdit,
+    cancelEdit,
+    updateValue,
+    editingItem
+  };
+}
+function useVirtualScroll(options) {
+  const {
+    items: itemsOption,
+    rowHeight,
+    containerHeight,
+    overscan = 3
+  } = options;
+  const scrollTop = vue.ref(0);
+  const containerRef = vue.ref(null);
+  const allItems = vue.computed(() => {
+    return "value" in itemsOption ? itemsOption.value : itemsOption;
+  });
+  const totalHeight = vue.computed(() => {
+    return allItems.value.length * rowHeight;
+  });
+  const visibleCount = vue.computed(() => {
+    return Math.ceil(containerHeight / rowHeight);
+  });
+  const startIndex = vue.computed(() => {
+    const rawStart = Math.floor(scrollTop.value / rowHeight);
+    return Math.max(0, rawStart - overscan);
+  });
+  const endIndex = vue.computed(() => {
+    const rawEnd = startIndex.value + visibleCount.value + overscan * 2;
+    return Math.min(allItems.value.length, rawEnd);
+  });
+  const visibleItems = vue.computed(() => {
+    return allItems.value.slice(startIndex.value, endIndex.value);
+  });
+  const offsetY = vue.computed(() => {
+    return startIndex.value * rowHeight;
+  });
+  const onScroll = (event) => {
+    const target = event.target;
+    scrollTop.value = target.scrollTop;
+  };
+  const scrollToIndex = (index) => {
+    const targetScroll = index * rowHeight;
+    if (containerRef.value) {
+      containerRef.value.scrollTop = targetScroll;
+    }
+    scrollTop.value = targetScroll;
+  };
+  vue.onMounted(() => {
+    if (containerRef.value) {
+      containerRef.value.addEventListener("scroll", onScroll, { passive: true });
+    }
+  });
+  vue.onUnmounted(() => {
+    if (containerRef.value) {
+      containerRef.value.removeEventListener("scroll", onScroll);
+    }
+  });
+  return {
+    visibleItems,
+    totalHeight,
+    offsetY,
+    startIndex,
+    endIndex,
+    scrollTop,
+    onScroll,
+    scrollToIndex,
+    containerRef
+  };
+}
+exports.useColumnResize = useColumnResize;
+exports.useColumnVisibility = useColumnVisibility;
+exports.useEditableCell = useEditableCell;
+exports.useExportCSV = useExportCSV;
+exports.useModal = useModal;
+exports.useModals = useModals;
+exports.useNotifications = useNotifications;
+exports.usePinnedRows = usePinnedRows;
+exports.useTableKeyboardNavigation = useTableKeyboardNavigation;
+exports.useToast = useToast;
+exports.useVirtualScroll = useVirtualScroll;
+//# sourceMappingURL=useVirtualScroll-BivP86fA.cjs.map