@jielga/tmdatagrid 0.1.0 → 0.3.0

package/src/tmdatagrid/TMDataGrid.module.css

@@ -1,410 +0,0 @@
-/* Size scale. Row heights mirror SIZE_ROW_HEIGHT in sizes.ts — the virtualizer
-   needs the number in JS, so the two have to agree. */
-.root[data-size="xs"] {
-  --dg-row-height: 34px;
-  --dg-header-height: 32px;
-  --dg-font-size: var(--mantine-font-size-xs);
-  --dg-padding: 6px;
-}
-
-.root[data-size="sm"] {
-  --dg-row-height: 42px;
-  --dg-header-height: 38px;
-  --dg-font-size: var(--mantine-font-size-sm);
-  --dg-padding: 8px;
-}
-
-.root[data-size="md"] {
-  --dg-row-height: 52px;
-  --dg-header-height: 44px;
-  --dg-font-size: var(--mantine-font-size-sm);
-  --dg-padding: 10px;
-}
-
-.root[data-size="lg"] {
-  --dg-row-height: 62px;
-  --dg-header-height: 52px;
-  --dg-font-size: var(--mantine-font-size-md);
-  --dg-padding: 14px;
-}
-
-.root[data-size="xl"] {
-  --dg-row-height: 72px;
-  --dg-header-height: 60px;
-  --dg-font-size: var(--mantine-font-size-lg);
-  --dg-padding: 18px;
-}
-
-.root {
-  /* Fallbacks, so the parts still work if rendered outside a sized root. */
-  --dg-row-height: 52px;
-  --dg-header-height: 44px;
-  --dg-font-size: var(--mantine-font-size-sm);
-  --dg-padding: 10px;
-
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-  /* Header text is a stretched flex item, so an inherited `text-align: center`
-     from the host page would centre headers away from their cell content. */
-  text-align: left;
-  border: 1px solid var(--mantine-color-default-border);
-  border-radius: var(--mantine-radius-md);
-  background-color: var(--mantine-color-body);
-}
-
-.toolbar {
-  display: flex;
-  align-items: center;
-  gap: var(--mantine-spacing-xs);
-  padding: 6px var(--mantine-spacing-xs);
-  min-height: 42px;
-  flex-shrink: 0;
-}
-
-.toolbarSpacer {
-  flex: 1;
-}
-
-/* Anchors the filter panel, which floats over the first body rows. */
-.tableWrapper {
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.scrollContainer {
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-}
-
-/* Column tracks are set inline via gridTemplateColumns. */
-.grid {
-  display: grid;
-}
-
-/* Rows are real layout boxes (not display: contents) so position: sticky works,
-   and subgrid keeps their cells on the parent's column tracks. */
-.headerRow {
-  display: grid;
-  grid-column: 1 / -1;
-  grid-template-columns: subgrid;
-  position: sticky;
-  top: 0;
-  z-index: 3;
-}
-
-.headerCell {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 0 var(--dg-padding);
-  min-width: 0;
-  min-height: var(--dg-header-height);
-  font-weight: 600;
-  font-size: var(--dg-font-size);
-  background-color: var(--mantine-color-body);
-  border-bottom: 1px solid var(--mantine-color-default-border);
-  user-select: none;
-}
-
-.headerCell[data-align="right"] {
-  justify-content: flex-end;
-}
-
-.headerCell[data-align="center"] {
-  justify-content: center;
-}
-
-/* Sorted or filtered columns read as active, like the MUI data grid. */
-.headerCell[data-active="true"] .headerTitle {
-  color: var(--mantine-primary-color-filled);
-}
-
-.headerTitle {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Right-aligned headers stay text so the ellipsis still works; centered ones
-   hold a control (the select-all checkbox), so they become a flex box. */
-.headerCell[data-align="right"] .headerTitle {
-  text-align: right;
-}
-
-.headerCell[data-align="center"] .headerTitle {
-  display: flex;
-  justify-content: center;
-}
-
-.headerActions {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-/* Actions always reserve their width. On right-aligned columns they move to the
-   leading edge so the header text stays flush with the cell values below it. */
-.headerCell[data-align="right"] .headerActions {
-  order: -1;
-  margin-left: 0;
-  margin-right: auto;
-}
-
-/* Idle actions are removed from layout, not just faded — reserving their width
-   would truncate header text that otherwise fits. Indicators that must stay
-   visible (active sort, active filter, open menu) set data-pinned-visible. */
-.headerAction {
-  display: none;
-}
-
-.headerCell:hover .headerAction,
-.headerCell:focus-within .headerAction,
-.headerAction[data-pinned-visible="true"] {
-  display: flex;
-}
-
-.headerCellSortable {
-  cursor: pointer;
-}
-
-/* Column reordering. The dragged header stays in place and dims — the browser
-   already carries a snapshot of it under the pointer — while the header being
-   dragged over draws a bar on the edge the column will land against. */
-.headerCellDragging {
-  opacity: 0.4;
-}
-
-.headerCellDropBefore::before,
-.headerCellDropAfter::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background-color: var(--mantine-primary-color-filled);
-  z-index: 5;
-  pointer-events: none;
-}
-
-.headerCellDropBefore::before {
-  left: 0;
-}
-
-.headerCellDropAfter::before {
-  right: 0;
-}
-
-/* Doubles as the column divider seen between every header cell. */
-.columnSeparator {
-  position: absolute;
-  top: 25%;
-  right: 0;
-  height: 50%;
-  width: 10px;
-  transform: translateX(50%);
-  display: flex;
-  justify-content: center;
-  z-index: 1;
-}
-
-.columnSeparatorResizable {
-  cursor: col-resize;
-  touch-action: none;
-}
-
-/* The divider is a hover affordance, not permanent chrome — it only appears on
-   the header cell you are pointing at, or on the column being resized. */
-.columnSeparator::after {
-  content: "";
-  width: 1px;
-  height: 100%;
-  background-color: transparent;
-  transition:
-    background-color 120ms ease,
-    width 120ms ease;
-}
-
-.headerCell:hover .columnSeparator::after,
-.headerCell:focus-within .columnSeparator::after {
-  background-color: var(--mantine-color-default-border);
-}
-
-.columnSeparatorResizable:hover::after,
-.columnSeparatorActive::after {
-  width: 2px;
-  background-color: var(--mantine-primary-color-filled);
-}
-
-.bodyRow {
-  --row-bg: var(--mantine-color-body);
-  display: grid;
-  grid-column: 1 / -1;
-  grid-template-columns: subgrid;
-  align-items: stretch;
-}
-
-.bodyRow:hover {
-  --row-bg: var(--mantine-color-default-hover);
-}
-
-.bodyRow[data-selected="true"] {
-  --row-bg: var(--mantine-primary-color-light);
-}
-
-/* Clipping lives on .cellContent, not here — a pinned cell has to let its
-   boundary gradient escape past its own right/left edge. */
-.bodyCell {
-  display: flex;
-  align-items: center;
-  padding: 0 var(--dg-padding);
-  border-bottom: 1px solid var(--mantine-color-default-border);
-  /* Inherited from .bodyRow — sticky cells need an opaque background. */
-  background-color: var(--row-bg);
-  font-size: var(--dg-font-size);
-}
-
-.cellContent {
-  min-width: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.bodyCell[data-align="right"] {
-  justify-content: flex-end;
-}
-
-.bodyCell[data-align="center"] {
-  justify-content: center;
-}
-
-/* Only stretch to fill when left-aligned, so right/centre stay put. */
-.bodyCell[data-align="left"] .cellContent {
-  flex: 1 1 auto;
-}
-
-/* Boundary of a pinned column group.
-   A box-shadow is drawn per cell, and its blur fades in at each cell's own top
-   and bottom edge — stacked down a column that reads as banding at every row
-   seam. Instead: a crisp 1px border for the hard edge, plus a gradient pseudo
-   element pinned to `top: 0; bottom: 0` so consecutive cells butt together into
-   one unbroken band. Mantine sets `color-scheme` on the root, so light-dark()
-   resolves without a second selector. */
-.stickyLeft {
-  border-right: 1px solid var(--mantine-color-default-border);
-}
-
-.stickyRight {
-  border-left: 1px solid var(--mantine-color-default-border);
-}
-
-.stickyLeft::after,
-.stickyRight::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 4px;
-  pointer-events: none;
-}
-
-.stickyLeft::after {
-  left: 100%;
-  background: linear-gradient(
-    to right,
-    light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.28)),
-    transparent
-  );
-}
-
-.stickyRight::after {
-  right: 100%;
-  background: linear-gradient(
-    to left,
-    light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.28)),
-    transparent
-  );
-}
-
-.messageRow {
-  grid-column: 1 / -1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--mantine-spacing-xs);
-  padding: var(--mantine-spacing-xl);
-}
-
-.footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--mantine-spacing-lg);
-  padding: 4px var(--mantine-spacing-sm);
-  min-height: 48px;
-  flex-shrink: 0;
-  border-top: 1px solid var(--mantine-color-default-border);
-}
-
-.filterPanel {
-  position: absolute;
-  top: 46px;
-  left: var(--mantine-spacing-md);
-  z-index: 5;
-  padding: var(--mantine-spacing-sm);
-  border-radius: var(--mantine-radius-md);
-  border: 1px solid var(--mantine-color-default-border);
-  background-color: var(--mantine-color-body);
-  box-shadow: var(--mantine-shadow-md);
-}
-
-.filterRow {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--mantine-spacing-xs);
-}
-
-/* Marks the pin position a column is currently in. */
-.menuItemActive {
-  background-color: var(--mantine-color-default-hover);
-  font-weight: 600;
-}
-
-.columnsPanel {
-  width: 280px;
-  display: flex;
-  flex-direction: column;
-}
-
-.columnsPanelSearch {
-  padding: var(--mantine-spacing-sm);
-}
-
-.columnsPanelList {
-  display: flex;
-  flex-direction: column;
-  gap: var(--mantine-spacing-sm);
-  padding: 0 var(--mantine-spacing-sm) var(--mantine-spacing-sm);
-}
-
-.columnsPanelFooter {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--mantine-spacing-sm);
-  padding: var(--mantine-spacing-sm);
-  border-top: 1px solid var(--mantine-color-default-border);
-}

package/src/tmdatagrid/TMDataGridFooter.tsx

@@ -1,74 +0,0 @@
-import { ActionIcon, Group, Select, Text } from "@mantine/core";
-import { useSelector } from "@tanstack/react-store";
-import classes from "./TMDataGrid.module.css";
-import { useTMDataGridContext } from "./TMDataGridContext";
-import { ChevronLeftIcon, ChevronRightIcon } from "./icons";
-
-export type TMDataGridFooterProps = {
-  pageSizeOptions?: ReadonlyArray<number>;
-};
-
-/**
- * MUI-style pager: "Rows per page · from–to of total · ‹ ›".
- *
- * Row totals come from `table.getRowCount()`, which prefers `options.rowCount`
- * — so a server-paged grid shows the server's total without changes here.
- */
-export function TMDataGridFooter({
-  pageSizeOptions = [10, 25, 50, 100],
-}: TMDataGridFooterProps) {
-  const { table, controlSize } = useTMDataGridContext();
-  useSelector(table.store);
-
-  const { pageIndex, pageSize } = table.store.state.pagination;
-  const total = table.getRowCount();
-  const from = total === 0 ? 0 : pageIndex * pageSize + 1;
-  const to = Math.min(total, (pageIndex + 1) * pageSize);
-
-  return (
-    <div className={classes.footer}>
-      <Group gap="xs" wrap="nowrap">
-        <Text size={controlSize} c="dimmed">
-          Rows per page:
-        </Text>
-        <Select
-          size={controlSize}
-          w={78}
-          allowDeselect={false}
-          variant="unstyled"
-          data={pageSizeOptions.map(String)}
-          value={String(pageSize)}
-          onChange={(value) => {
-            table.setPageSize(Number(value) || pageSizeOptions[0]);
-            table.setPageIndex(0);
-          }}
-        />
-      </Group>
-
-      <Text size={controlSize} c="dimmed">
-        {from}–{to} of {total}
-      </Text>
-
-      <Group gap={4} wrap="nowrap">
-        <ActionIcon
-          variant="subtle"
-          color="gray"
-          aria-label="Previous page"
-          disabled={!table.getCanPreviousPage()}
-          onClick={() => table.previousPage()}
-        >
-          <ChevronLeftIcon size={18} stroke={1.6} />
-        </ActionIcon>
-        <ActionIcon
-          variant="subtle"
-          color="gray"
-          aria-label="Next page"
-          disabled={!table.getCanNextPage()}
-          onClick={() => table.nextPage()}
-        >
-          <ChevronRightIcon size={18} stroke={1.6} />
-        </ActionIcon>
-      </Group>
-    </div>
-  );
-}