@cerberus-design/data-grid 0.25.3 → 1.0.0-rc.5

package/dist/index.js

@@ -1,4 +1,5 @@
-export { DataGrid } from './components/data-grid.client.js';
-export { CerberusDataGrid } from './components/cerby-data-grid.client.js';
-export { useDataGridContext } from './context.client.js';
-export { createColumnHelper } from './column-helpers.js';
+import { useDataGridContext } from "./context.client.js";
+import { DataGrid } from "./components/data-grid.client.js";
+import { CerberusDataGrid } from "./components/cerby-data-grid.client.js";
+import { createColumnHelper } from "./column-helpers.js";
+export { CerberusDataGrid, DataGrid, createColumnHelper, useDataGridContext };

package/dist/store.cjs

@@ -1,287 +1,244 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const signals = require('@cerberus-design/signals');
-const utils = require('./utils.cjs');
-const _const = require('./const.cjs');
-
+"use client";
+const require_utils = require("./utils.cjs");
+let _cerberus_design_signals = require("@cerberus-design/signals");
+//#region src/store.ts
+/**
+* Internal signal-based Store engine driving the state. We expose this in
+* the public Context API.
+*/
 function createGridStore(options) {
-  const [containerWidth, setContainerWidth] = signals.createSignal(0);
-  const [rows, setRows] = signals.createSignal(options.data);
-  const [rowSize] = signals.createSignal(utils.determineRowHeight(options.rowSize));
-  const [globalFilter, setGlobalFilter] = signals.createSignal("");
-  const [sorting, setSorting] = signals.createSignal([]);
-  const [pageIndex, setPageIndex] = signals.createSignal(
-    utils.determinePageIndex(options.initialState?.pagination)
-  );
-  const [pageSize, setPageSize] = signals.createSignal(
-    utils.determinePageSize(options.initialState?.pagination)
-  );
-  const [pageRange] = signals.createSignal(
-    utils.determinePageRange(options.initialState?.pagination)
-  );
-  const [isServerPaginated] = signals.createSignal(
-    Boolean(utils.determineInitialCount(options.initialState?.pagination))
-  );
-  const initialCols = options.columns.map((col) => {
-    const pinnable = Boolean(col.features?.pinning);
-    const filterable = Boolean(col.features?.filter);
-    const sortable = Boolean(col.features?.sort);
-    const hasFeatures = pinnable || filterable || sortable;
-    const minWForFeatures = 100;
-    let finalWidth = col.width ?? 150;
-    if (hasFeatures && col.width && col.width < minWForFeatures) {
-      finalWidth = minWForFeatures;
-    }
-    const [isVisible] = signals.createSignal(true);
-    const [isFlex, setFlex] = signals.createSignal(col.width === void 0);
-    const [pinned, setPinned] = signals.createSignal(
-      col.features?.pinning?.defaultPosition ?? false
-    );
-    const [width, setColWidth] = signals.createSignal(finalWidth);
-    return {
-      id: col.id,
-      isFlex,
-      isVisible,
-      original: col,
-      pinned,
-      width,
-      getValue: col.accessor,
-      // feature flags
-      pinnable,
-      filterable,
-      sortable,
-      // setters
-      setFlex,
-      setPinned,
-      setColWidth
-    };
-  });
-  const [columns] = signals.createSignal(initialCols);
-  const currentPageRange = signals.createComputed(
-    () => {
-      const dataIdx = pageIndex() - 1;
-      const isFirstPage = dataIdx === 0;
-      const start = isFirstPage ? 0 : dataIdx * pageSize() - 1;
-      return {
-        start,
-        end: pageIndex() * pageSize()
-      };
-    }
-  );
-  const processedRows = signals.createComputed(() => {
-    let result = [...rows()];
-    const filter = globalFilter().toLowerCase();
-    const sortState = sorting();
-    if (filter) {
-      result = result.filter((row) => {
-        return columns().some((col) => {
-          if (!col.filterable) return false;
-          const val = String(col.getValue(row)).toLowerCase();
-          return val.includes(filter);
-        });
-      });
-    }
-    if (sortState.length > 0) {
-      result.sort((a, b) => {
-        for (const sort of sortState) {
-          const col = columns().find((c) => c.id === sort.id);
-          if (!col) continue;
-          const valA = col.getValue(a);
-          const valB = col.getValue(b);
-          if (valA === valB) continue;
-          let comparison = 0;
-          const customComparator = typeof col.original.features?.sort === "object" ? col.original.features.sort.comparator : void 0;
-          if (customComparator) {
-            comparison = customComparator(valA, valB);
-          } else {
-            comparison = valA > valB ? 1 : -1;
-          }
-          return sort.desc ? -comparison : comparison;
-        }
-        return 0;
-      });
-    }
-    return result;
-  });
-  const rowCount = signals.createComputed(
-    () => utils.determineInitialCount(options?.initialState?.pagination) ?? processedRows().length
-  );
-  const pageCount = signals.createComputed(() => Math.ceil(rowCount() / pageSize()));
-  const orderedColumns = signals.createComputed(() => {
-    const left = [];
-    const center = [];
-    const right = [];
-    columns().forEach((col) => {
-      const pin = col.pinned();
-      if (pin === "left") left.push(col);
-      else if (pin === "right") right.push(col);
-      else center.push(col);
-    });
-    return [...left, ...center, ...right];
-  });
-  const visibleRows = signals.createComputed(() => {
-    if (pageSize() && pageCount() > 1) {
-      const currentRange = currentPageRange();
-      return processedRows().slice(currentRange.start, currentRange.end);
-    }
-    return processedRows();
-  });
-  const rootCssVars = signals.createComputed(() => {
-    const vars = {};
-    const visibleCols = [];
-    const cols = columns();
-    const cWidth = containerWidth();
-    let fixedSpace = 0;
-    let flexCount = 0;
-    for (let i = 0; i < cols.length; i++) {
-      const col = cols[i];
-      if (!col.isVisible()) continue;
-      visibleCols.push(col);
-      if (col.isFlex()) {
-        flexCount++;
-      } else {
-        fixedSpace += col.width();
-      }
-      const order = orderedColumns().findIndex(
-        (orderedCol) => orderedCol.id === col.id
-      );
-      vars[`--col-${col.id}-order`] = `${order}`;
-    }
-    const remainingSpace = Math.max(0, cWidth - fixedSpace);
-    const flexWidth = flexCount > 0 ? remainingSpace / flexCount : 0;
-    let leftOffset = 0;
-    let totalW = 0;
-    const computedWidths = new Float64Array(visibleCols.length);
-    for (let i = 0; i < visibleCols.length; i++) {
-      const col = visibleCols[i];
-      let finalWidth = col.width();
-      if (col.isFlex()) {
-        finalWidth = Math.max(col.original.minWidth ?? 150, flexWidth);
-      }
-      computedWidths[i] = finalWidth;
-      totalW += finalWidth;
-      vars[`--col-${col.id}-width`] = `${finalWidth}px`;
-      if (col.pinned() === "left") {
-        vars[`--col-${col.id}-left`] = `${leftOffset}px`;
-        leftOffset += finalWidth;
-      }
-    }
-    let rightOffset = 0;
-    for (let i = visibleCols.length - 1; i >= 0; i--) {
-      const col = visibleCols[i];
-      if (col.pinned() === "right") {
-        vars[`--col-${col.id}-right`] = `${rightOffset}px`;
-        rightOffset += computedWidths[i];
-      }
-    }
-    vars["--total-grid-width"] = `${totalW}px`;
-    vars["--row-height"] = `${rowSize()}px`;
-    return vars;
-  });
-  const totalWidth = signals.createComputed(
-    () => columns().reduce((acc, c) => acc + c.width(), 0)
-  );
-  return {
-    columns,
-    rows,
-    globalFilter,
-    sorting,
-    pageCount,
-    pageIndex,
-    pageSize,
-    pageRange,
-    currentPageRange,
-    isServerPaginated,
-    rootCssVars,
-    rowCount,
-    rowSize,
-    totalWidth,
-    visibleRows,
-    // Actions
-    updateData: (newData) => {
-      setRows(newData);
-    },
-    setSort: (colId, direction, multi = false) => {
-      if (direction === null) {
-        setSorting(sorting().filter((s) => s.id !== colId));
-        return;
-      }
-      const current = sorting();
-      const newSort = { id: colId, desc: direction === "desc" };
-      if (multi) {
-        const existingIndex = current.findIndex((s) => s.id === colId);
-        if (existingIndex >= 0) {
-          const next = [...current];
-          next[existingIndex] = newSort;
-          setSorting(next);
-        } else {
-          setSorting([...current, newSort]);
-        }
-      } else {
-        setSorting([newSort]);
-      }
-    },
-    togglePinned: (colId, state) => {
-      const col = columns().find((c) => c.id === colId);
-      if (col) col.setPinned(state ?? false);
-    },
-    toggleSort: (colId, multi) => {
-      const current = sorting();
-      const exists = current.findIndex((s) => s.id === colId) !== -1;
-      const updatedSort = current.map((s) => {
-        if (s.id === colId) {
-          return { ...s, desc: !s.desc };
-        }
-        return s;
-      });
-      if (exists) {
-        setSorting(multi ? [...current, ...updatedSort] : [...updatedSort]);
-      } else {
-        const newSort = { id: colId, desc: true };
-        setSorting(multi ? [...current, newSort] : [newSort]);
-      }
-    },
-    setPage: (details) => {
-      setPageIndex(details.page);
-      options.onPageChange?.(details);
-    },
-    setPageSize: (size) => {
-      if (isServerPaginated()) {
-        setPageIndex(_const.DEFAULT_PAGE_IDX);
-      }
-      setPageSize(size);
-    },
-    setGlobalFilter: (val) => {
-      signals.batch(() => {
-        setGlobalFilter(val);
-        setPageIndex(_const.DEFAULT_PAGE_IDX);
-      });
-    },
-    setContainerWidth: (w) => {
-      setContainerWidth(w);
-    },
-    resizeColumn: (colId, delta) => {
-      const col = columns().find((c) => c.id === colId);
-      if (col) {
-        if (col.isFlex()) {
-          const fixedSpace = columns().filter((c) => !c.isFlex()).reduce((a, b) => a + b.width(), 0);
-          const flexCount = columns().filter((c) => c.isFlex()).length;
-          const currentFlexWidth = Math.max(
-            col.original.minWidth ?? 150,
-            (containerWidth() - fixedSpace) / flexCount
-          );
-          col.setColWidth(currentFlexWidth);
-          col.setFlex(false);
-        }
-        col.setColWidth(
-          Math.max(col.original.minWidth ?? 50, col.width() + delta)
-        );
-      }
-    }
-  };
+	const [containerWidth, setContainerWidth] = (0, _cerberus_design_signals.createSignal)(0);
+	const [rows, setRows] = (0, _cerberus_design_signals.createSignal)(options.data);
+	const [rowSize] = (0, _cerberus_design_signals.createSignal)(require_utils.determineRowHeight(options.rowSize));
+	const [globalFilter, setGlobalFilter] = (0, _cerberus_design_signals.createSignal)("");
+	const [sorting, setSorting] = (0, _cerberus_design_signals.createSignal)([]);
+	const [pageIndex, setPageIndex] = (0, _cerberus_design_signals.createSignal)(require_utils.determinePageIndex(options.initialState?.pagination));
+	const [pageSize, setPageSize] = (0, _cerberus_design_signals.createSignal)(require_utils.determinePageSize(options.initialState?.pagination));
+	const [pageRange] = (0, _cerberus_design_signals.createSignal)(require_utils.determinePageRange(options.initialState?.pagination));
+	const [isServerPaginated] = (0, _cerberus_design_signals.createSignal)(Boolean(require_utils.determineInitialCount(options.initialState?.pagination)));
+	const [columns] = (0, _cerberus_design_signals.createSignal)(options.columns.map((col) => {
+		const pinnable = Boolean(col.features?.pinning);
+		const filterable = Boolean(col.features?.filter);
+		const sortable = Boolean(col.features?.sort);
+		const hasFeatures = pinnable || filterable || sortable;
+		const minWForFeatures = 100;
+		let finalWidth = col.width ?? 150;
+		if (hasFeatures && col.width && col.width < minWForFeatures) finalWidth = minWForFeatures;
+		const [isVisible] = (0, _cerberus_design_signals.createSignal)(true);
+		const [isFlex, setFlex] = (0, _cerberus_design_signals.createSignal)(col.width === void 0);
+		const [pinned, setPinned] = (0, _cerberus_design_signals.createSignal)(col.features?.pinning?.defaultPosition ?? false);
+		const [width, setColWidth] = (0, _cerberus_design_signals.createSignal)(finalWidth);
+		return {
+			id: col.id,
+			isFlex,
+			isVisible,
+			original: col,
+			pinned,
+			width,
+			getValue: col.accessor,
+			pinnable,
+			filterable,
+			sortable,
+			setFlex,
+			setPinned,
+			setColWidth
+		};
+	}));
+	const currentPageRange = (0, _cerberus_design_signals.createComputed)(() => {
+		const dataIdx = pageIndex() - 1;
+		return {
+			start: dataIdx === 0 ? 0 : dataIdx * pageSize() - 1,
+			end: pageIndex() * pageSize()
+		};
+	});
+	const processedRows = (0, _cerberus_design_signals.createComputed)(() => {
+		let result = [...rows()];
+		const filter = globalFilter().toLowerCase();
+		const sortState = sorting();
+		if (filter) result = result.filter((row) => {
+			return columns().some((col) => {
+				if (!col.filterable) return false;
+				return String(col.getValue(row)).toLowerCase().includes(filter);
+			});
+		});
+		if (sortState.length > 0) result.sort((a, b) => {
+			for (const sort of sortState) {
+				const col = columns().find((c) => c.id === sort.id);
+				if (!col) continue;
+				const valA = col.getValue(a);
+				const valB = col.getValue(b);
+				if (valA === valB) continue;
+				let comparison = 0;
+				const customComparator = typeof col.original.features?.sort === "object" ? col.original.features.sort.comparator : void 0;
+				if (customComparator) comparison = customComparator(valA, valB);
+				else comparison = valA > valB ? 1 : -1;
+				return sort.desc ? -comparison : comparison;
+			}
+			return 0;
+		});
+		return result;
+	});
+	const rowCount = (0, _cerberus_design_signals.createComputed)(() => require_utils.determineInitialCount(options?.initialState?.pagination) ?? processedRows().length);
+	const pageCount = (0, _cerberus_design_signals.createComputed)(() => Math.ceil(rowCount() / pageSize()));
+	const orderedColumns = (0, _cerberus_design_signals.createComputed)(() => {
+		const left = [];
+		const center = [];
+		const right = [];
+		columns().forEach((col) => {
+			const pin = col.pinned();
+			if (pin === "left") left.push(col);
+			else if (pin === "right") right.push(col);
+			else center.push(col);
+		});
+		return [
+			...left,
+			...center,
+			...right
+		];
+	});
+	const visibleRows = (0, _cerberus_design_signals.createComputed)(() => {
+		if (pageSize() && pageCount() > 1) {
+			const currentRange = currentPageRange();
+			return processedRows().slice(currentRange.start, currentRange.end);
+		}
+		return processedRows();
+	});
+	return {
+		columns,
+		rows,
+		globalFilter,
+		sorting,
+		pageCount,
+		pageIndex,
+		pageSize,
+		pageRange,
+		currentPageRange,
+		isServerPaginated,
+		rootCssVars: (0, _cerberus_design_signals.createComputed)(() => {
+			const vars = {};
+			const visibleCols = [];
+			const cols = columns();
+			const cWidth = containerWidth();
+			let fixedSpace = 0;
+			let flexCount = 0;
+			for (let i = 0; i < cols.length; i++) {
+				const col = cols[i];
+				if (!col.isVisible()) continue;
+				visibleCols.push(col);
+				if (col.isFlex()) flexCount++;
+				else fixedSpace += col.width();
+				const order = orderedColumns().findIndex((orderedCol) => orderedCol.id === col.id);
+				vars[`--col-${col.id}-order`] = `${order}`;
+			}
+			const remainingSpace = Math.max(0, cWidth - fixedSpace);
+			const flexWidth = flexCount > 0 ? remainingSpace / flexCount : 0;
+			let leftOffset = 0;
+			let totalW = 0;
+			const computedWidths = new Float64Array(visibleCols.length);
+			for (let i = 0; i < visibleCols.length; i++) {
+				const col = visibleCols[i];
+				let finalWidth = col.width();
+				if (col.isFlex()) finalWidth = Math.max(col.original.minWidth ?? 150, flexWidth);
+				computedWidths[i] = finalWidth;
+				totalW += finalWidth;
+				vars[`--col-${col.id}-width`] = `${finalWidth}px`;
+				if (col.pinned() === "left") {
+					vars[`--col-${col.id}-left`] = `${leftOffset}px`;
+					leftOffset += finalWidth;
+				}
+			}
+			let rightOffset = 0;
+			for (let i = visibleCols.length - 1; i >= 0; i--) {
+				const col = visibleCols[i];
+				if (col.pinned() === "right") {
+					vars[`--col-${col.id}-right`] = `${rightOffset}px`;
+					rightOffset += computedWidths[i];
+				}
+			}
+			vars["--total-grid-width"] = `${totalW}px`;
+			vars["--row-height"] = `${rowSize()}px`;
+			return vars;
+		}),
+		rowCount,
+		rowSize,
+		totalWidth: (0, _cerberus_design_signals.createComputed)(() => columns().reduce((acc, c) => acc + c.width(), 0)),
+		visibleRows,
+		updateData: (newData) => {
+			setRows(newData);
+		},
+		setSort: (colId, direction, multi = false) => {
+			if (direction === null) {
+				setSorting(sorting().filter((s) => s.id !== colId));
+				return;
+			}
+			const current = sorting();
+			const newSort = {
+				id: colId,
+				desc: direction === "desc"
+			};
+			if (multi) {
+				const existingIndex = current.findIndex((s) => s.id === colId);
+				if (existingIndex >= 0) {
+					const next = [...current];
+					next[existingIndex] = newSort;
+					setSorting(next);
+				} else setSorting([...current, newSort]);
+			} else setSorting([newSort]);
+		},
+		togglePinned: (colId, state) => {
+			const col = columns().find((c) => c.id === colId);
+			if (col) col.setPinned(state ?? false);
+		},
+		toggleSort: (colId, multi) => {
+			const current = sorting();
+			const exists = current.findIndex((s) => s.id === colId) !== -1;
+			const updatedSort = current.map((s) => {
+				if (s.id === colId) return {
+					...s,
+					desc: !s.desc
+				};
+				return s;
+			});
+			if (exists) setSorting(multi ? [...current, ...updatedSort] : [...updatedSort]);
+			else {
+				const newSort = {
+					id: colId,
+					desc: true
+				};
+				setSorting(multi ? [...current, newSort] : [newSort]);
+			}
+		},
+		setPage: (details) => {
+			setPageIndex(details.page);
+			options.onPageChange?.(details);
+		},
+		setPageSize: (size) => {
+			if (isServerPaginated()) setPageIndex(1);
+			setPageSize(size);
+		},
+		setGlobalFilter: (val) => {
+			(0, _cerberus_design_signals.batch)(() => {
+				setGlobalFilter(val);
+				setPageIndex(1);
+			});
+		},
+		setContainerWidth: (w) => {
+			setContainerWidth(w);
+		},
+		resizeColumn: (colId, delta) => {
+			const col = columns().find((c) => c.id === colId);
+			if (col) {
+				if (col.isFlex()) {
+					const fixedSpace = columns().filter((c) => !c.isFlex()).reduce((a, b) => a + b.width(), 0);
+					const flexCount = columns().filter((c) => c.isFlex()).length;
+					const currentFlexWidth = Math.max(col.original.minWidth ?? 150, (containerWidth() - fixedSpace) / flexCount);
+					col.setColWidth(currentFlexWidth);
+					col.setFlex(false);
+				}
+				col.setColWidth(Math.max(col.original.minWidth ?? 50, col.width() + delta));
+			}
+		}
+	};
 }
-
+//#endregion
 exports.createGridStore = createGridStore;