@iyulab/flex-table 0.10.2 → 0.12.0

package/dist/flex-table.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import type { ExportFormat } from './export/export.js';
-import type { CellPosition } from './core/selection.js';
+import type { CellPosition, CellRange } from './core/selection.js';
 import type { SortCriteria } from './core/sorting.js';
 import type { FilterPredicate } from './core/filtering.js';
 import type { ColumnDefinition, DataRow, SelectionMode, DataMode } from './models/types.js';
@@ -45,8 +45,16 @@ export declare class FlexTable extends LitElement {
     private _openFilterKey;
     private _rowSelectionVersion;
     private _viewDirty;
+    private _isDragging;
+    private _wasDrag;
     private _resizing;
     private _resizeCleanup;
+    private _colDrag;
+    private _colDragIndicatorLeft;
+    private _fillDrag;
+    private _rowDrag;
+    private _rowDragIndicatorY;
+    private _findState;
     private _columnWidths;
     private _hostResizeObserver;
     get visibleColumns(): ColumnDefinition[];
@@ -168,6 +176,8 @@ export declare class FlexTable extends LitElement {
     private _onDocumentClick;
     private _onContextMenu;
     private _onCellClickEvent;
+    private _onCellMouseDown;
+    private _onCellMouseEnter;
     private _onRowNumberClick;
     private _onCellDblClick;
     /** Check if a column is editable based on global + per-column settings */
@@ -187,7 +197,10 @@ export declare class FlexTable extends LitElement {
     private _readClipboardText;
     private _expandRowsForPaste;
     private _applyPasteData;
+    private _handleFillDown;
+    private _handleFillRight;
     private _handleDelete;
+    private _clearRanges;
     private _clearRange;
     private _scrollToActiveCell;
     private _dispatchSelectionEvent;
@@ -219,6 +232,30 @@ export declare class FlexTable extends LitElement {
     private _clearColumnFilter;
     private _onResizeAutoFit;
     private _onResizeStart;
+    private _onHeaderMouseDown;
+    private _startColumnGhost;
+    private _updateColumnDrag;
+    private _finishColumnDrag;
+    private _onFillHandleMouseDown;
+    private _updateFillDrag;
+    _applyFillHandle(sourceRange: CellRange, targetRange: CellRange): void;
+    private _detectNumericSeries;
+    private _renderFillHandle;
+    private _renderFillPreview;
+    private _onRowNumMouseDown;
+    private _startRowGhost;
+    private _updateRowDrag;
+    private _finishRowDrag;
+    private _toggleFindPanel;
+    _openFindPanel(mode: 'find' | 'replace'): void;
+    private _closeFindPanel;
+    _findSearch(): void;
+    private _findGoTo;
+    private _findNext;
+    private _findPrev;
+    _replaceAll(): void;
+    private _replaceOne;
+    private _renderFindPanel;
     render(): TemplateResult<1>;
     private _onSelectAllChange;
     private _onRowCheckboxChange;

package/dist/flex-table.js

@@ -1,8 +1,2 @@
-import { F as t, R as o, U as r, e as l, r as s } from "./flex-table-DNBCgorV.js";
-export {
-  t as FlexTable,
-  o as RowSelectionState,
-  r as UndoStack,
-  l as exportData,
-  s as renderCell
-};
+import { a as e, i as t, n, r, t as i } from "./flex-table-DJvbRtBl.js";
+export { i as FlexTable, t as RowSelectionState, r as UndoStack, n as exportData, e as renderCell };

package/dist/models/types.d.ts

@@ -3,7 +3,12 @@ import type { TemplateResult } from 'lit';
  * Built-in column data types for rendering and editing.
  * Any string is accepted as a type — unknown types fall back to 'text' behavior.
  */
-export type ColumnType = 'text' | 'number' | 'boolean' | 'date' | 'datetime' | (string & {});
+export type ColumnType = 'text' | 'number' | 'boolean' | 'date' | 'datetime' | 'select' | (string & {});
+/** Option item for select columns */
+export interface SelectOption {
+    label: string;
+    value: unknown;
+}
 /**
  * Custom cell renderer function.
  * Receives the cell value, the full row data, and the column definition.
@@ -58,6 +63,8 @@ export interface ColumnDefinition {
     pinned?: 'left' | 'right';
     /** Cell validator — called before committing edits */
     validator?: CellValidator;
+    /** Allowed values for select columns (strings or label/value pairs) */
+    options?: string[] | SelectOption[];
 }
 /**
  * A single data row — schema-agnostic key-value map.

package/dist/odata/index.js

@@ -1,71 +1,74 @@
-import { useState as r, useRef as z, useCallback as m, useEffect as K } from "react";
-import Q from "odata-query";
-function I(c, d = {}) {
-  const { pageSize: a = 20, defaultOrderBy: n, fixedFilter: l } = d, x = l ? JSON.stringify(l) : "", [O, S] = r([]), [B, b] = r(0), [E, C] = r(!1), [R, g] = r(null), [h, p] = r(0), [u, T] = r(() => n ? U(n) : []), [f, q] = r(""), [A, D] = r(0), k = z(null), F = m(() => {
-    D((e) => e + 1);
-  }, []), J = m((e) => {
-    q(e), p(0);
-  }, []), L = m((e) => {
-    var o;
-    const i = (o = e.detail) == null ? void 0 : o.criteria;
-    i && (T(i), p(0));
-  }, []);
-  return K(() => {
-    var w;
-    (w = k.current) == null || w.abort();
-    const e = new AbortController();
-    k.current = e, C(!0), g(null);
-    const i = u.length > 0 ? u.map((t) => `${t.key} ${t.direction}`).join(", ") : n, o = {
-      top: a,
-      skip: h * a,
-      count: !0
-    };
-    i && (o.orderBy = i), l && (o.filter = l), f && (o.search = f);
-    const N = Q(o), P = `${window.location.origin}${c}${N}`;
-    return fetch(P, { signal: e.signal }).then(async (t) => {
-      var $;
-      if (!t.ok) {
-        const v = await t.text().catch(() => "");
-        let y = `요청 실패 (${t.status})`;
-        try {
-          const s = JSON.parse(v);
-          y = (($ = s == null ? void 0 : s.error) == null ? void 0 : $.message) ?? (s == null ? void 0 : s.message) ?? y;
-        } catch {
-        }
-        throw new Error(y);
-      }
-      return t.json();
-    }).then((t) => {
-      e.signal.aborted || (S(t.value ?? t), b(t["@odata.count"] ?? 0), g(null));
-    }).catch((t) => {
-      e.signal.aborted || t.name !== "AbortError" && (g(t.message), S([]), b(0));
-    }).finally(() => {
-      e.signal.aborted || C(!1);
-    }), () => e.abort();
-  }, [c, h, a, u, f, x, n, A]), {
-    data: O,
-    totalCount: B,
-    loading: E,
-    error: R,
-    page: h,
-    setPage: p,
-    sortCriteria: u,
-    onSortChange: L,
-    search: f,
-    setSearch: J,
-    refresh: F
-  };
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+import i from "odata-query";
+//#region src/odata/use-odata-source.ts
+function a(a, s = {}) {
+	let { pageSize: c = 20, defaultOrderBy: l, fixedFilter: u } = s, d = u ? JSON.stringify(u) : "", [f, p] = r([]), [m, h] = r(0), [g, _] = r(!1), [v, y] = r(null), [b, x] = r(0), [S, C] = r(() => l ? o(l) : []), [w, T] = r(""), [E, D] = r(0), O = n(null), k = e(() => {
+		D((e) => e + 1);
+	}, []), A = e((e) => {
+		T(e), x(0);
+	}, []), j = e((e) => {
+		let t = e.detail?.criteria;
+		t && (C(t), x(0));
+	}, []);
+	return t(() => {
+		O.current?.abort();
+		let e = new AbortController();
+		O.current = e, _(!0), y(null);
+		let t = S.length > 0 ? S.map((e) => `${e.key} ${e.direction}`).join(", ") : l, n = {
+			top: c,
+			skip: b * c,
+			count: !0
+		};
+		t && (n.orderBy = t), u && (n.filter = u), w && (n.search = w);
+		let r = i(n), o = `${window.location.origin}${a}${r}`;
+		return fetch(o, { signal: e.signal }).then(async (e) => {
+			if (!e.ok) {
+				let t = await e.text().catch(() => ""), n = `요청 실패 (${e.status})`;
+				try {
+					let e = JSON.parse(t);
+					n = e?.error?.message ?? e?.message ?? n;
+				} catch {}
+				throw Error(n);
+			}
+			return e.json();
+		}).then((t) => {
+			e.signal.aborted || (p(t.value ?? t), h(t["@odata.count"] ?? 0), y(null));
+		}).catch((t) => {
+			e.signal.aborted || t.name !== "AbortError" && (y(t.message), p([]), h(0));
+		}).finally(() => {
+			e.signal.aborted || _(!1);
+		}), () => e.abort();
+	}, [
+		a,
+		b,
+		c,
+		S,
+		w,
+		d,
+		l,
+		E
+	]), {
+		data: f,
+		totalCount: m,
+		loading: g,
+		error: v,
+		page: b,
+		setPage: x,
+		sortCriteria: S,
+		onSortChange: j,
+		search: w,
+		setSearch: A,
+		refresh: k
+	};
 }
-function U(c) {
-  return c.split(",").map((d) => {
-    var n;
-    const a = d.trim().split(/\s+/);
-    return {
-      key: a[0],
-      direction: ((n = a[1]) == null ? void 0 : n.toLowerCase()) === "desc" ? "desc" : "asc"
-    };
-  });
+function o(e) {
+	return e.split(",").map((e) => {
+		let t = e.trim().split(/\s+/);
+		return {
+			key: t[0],
+			direction: t[1]?.toLowerCase() === "desc" ? "desc" : "asc"
+		};
+	});
 }
-export {
-  I as useODataSource
-};
+//#endregion
+export { a as useODataSource };

package/dist/react.js

@@ -1,36 +1,36 @@
-import e from "react";
-import { createComponent as o } from "@lit/react";
-import { F as l } from "./flex-table-DNBCgorV.js";
-const a = o({
-  tagName: "flex-table",
-  elementClass: l,
-  react: e,
-  events: {
-    onCellSelect: "cell-select",
-    onCellEditCommit: "cell-edit-commit",
-    onCellEditCancel: "cell-edit-cancel",
-    onCellEditStart: "cell-edit-start",
-    onSortChange: "sort-change",
-    onFilterChange: "filter-change",
-    onRowAdd: "row-add",
-    onRowDelete: "row-delete",
-    onColumnResize: "column-resize",
-    onColumnSelect: "column-select",
-    onColumnAdd: "column-add",
-    onColumnDelete: "column-delete",
-    onColumnReorder: "column-reorder",
-    onSelectionChange: "selection-change",
-    onClipboardCopy: "clipboard-copy",
-    onClipboardCut: "clipboard-cut",
-    onClipboardPaste: "clipboard-paste",
-    onClipboardError: "clipboard-error",
-    onUndoStateChange: "undo-state-change",
-    onValidationError: "validation-error",
-    onBatchUpdate: "batch-update",
-    onContextMenu: "context-menu",
-    onFilterError: "filter-error"
-  }
+import { t as e } from "./flex-table-DJvbRtBl.js";
+import t from "react";
+import { createComponent as n } from "@lit/react";
+//#region src/react.ts
+var r = n({
+	tagName: "flex-table",
+	elementClass: e,
+	react: t,
+	events: {
+		onCellSelect: "cell-select",
+		onCellEditCommit: "cell-edit-commit",
+		onCellEditCancel: "cell-edit-cancel",
+		onCellEditStart: "cell-edit-start",
+		onSortChange: "sort-change",
+		onFilterChange: "filter-change",
+		onRowAdd: "row-add",
+		onRowDelete: "row-delete",
+		onColumnResize: "column-resize",
+		onColumnSelect: "column-select",
+		onColumnAdd: "column-add",
+		onColumnDelete: "column-delete",
+		onColumnReorder: "column-reorder",
+		onSelectionChange: "selection-change",
+		onClipboardCopy: "clipboard-copy",
+		onClipboardCut: "clipboard-cut",
+		onClipboardPaste: "clipboard-paste",
+		onClipboardError: "clipboard-error",
+		onUndoStateChange: "undo-state-change",
+		onValidationError: "validation-error",
+		onBatchUpdate: "batch-update",
+		onContextMenu: "context-menu",
+		onFilterError: "filter-error"
+	}
 });
-export {
-  a as FlexTableReact
-};
+//#endregion
+export { r as FlexTableReact };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.10.2",
+  "version": "0.12.0",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",
@@ -52,7 +52,7 @@
     "url": "https://github.com/iyulab/flex-table/issues"
   },
   "dependencies": {
-    "lit": "^3.2.0",
+    "lit": "^3.3.3",
     "odata-query": "^8.0.7"
   },
   "peerDependencies": {
@@ -70,16 +70,16 @@
   "devDependencies": {
     "@lit/react": "^1.0.8",
     "@types/react": "^19.2.14",
-    "@typescript-eslint/eslint-plugin": "^8.58.0",
-    "@typescript-eslint/parser": "^8.58.0",
+    "@typescript-eslint/eslint-plugin": "^8.59.3",
+    "@typescript-eslint/parser": "^8.59.3",
     "eslint": "^10.1.0",
-    "eslint-plugin-lit": "^2.2.1",
-    "jsdom": "^28.1.0",
+    "eslint-plugin-lit": "^2.3.1",
+    "jsdom": "^29.1.1",
     "loupe": "^3.2.1",
-    "react": "^19.2.4",
+    "react": "^19.2.6",
     "strip-literal": "^3.1.0",
     "typescript": "~5.7.0",
-    "vite": "^6.0.0",
-    "vitest": "^3.0.0"
+    "vite": "^8.0.13",
+    "vitest": "^4.1.6"
   }
 }