@extable/core 0.2.0 → 0.3.1

package/dist/renderers.d.ts

@@ -20,6 +20,16 @@ export interface Renderer {
         element?: HTMLElement;
         rect: DOMRect;
     } | null;
+    hitTestAction?(event: MouseEvent): {
+        rowId: string;
+        colKey: string;
+        kind: "button" | "link";
+    } | {
+        rowId: string;
+        colKey: string;
+        kind: "tag-remove";
+        tagIndex: number;
+    } | null;
     setActiveCell(rowId: string | null, colKey: string | null): void;
     setSelection(ranges: SelectionRange[]): void;
 }
@@ -52,6 +62,16 @@ export declare class HTMLRenderer implements Renderer {
         element: HTMLElement;
         rect: DOMRect;
     } | null;
+    hitTestAction(event: MouseEvent): {
+        rowId: string;
+        colKey: string;
+        kind: "button" | "link";
+    } | {
+        rowId: string;
+        colKey: string;
+        kind: "tag-remove";
+        tagIndex: number;
+    } | null;
     private renderHeader;
     private renderRow;
     private updateActiveClasses;
@@ -87,6 +107,8 @@ export declare class CanvasRenderer implements Renderer {
     private pendingCursorPoint;
     private hoverHeaderColKey;
     private hoverHeaderIcon;
+    private hoverActionKey;
+    private activeActionKey;
     private rowHeightCacheKey;
     private rowHeightMeasuredVersion;
     private rowHeightMeasureRaf;
@@ -115,15 +137,25 @@ export declare class CanvasRenderer implements Renderer {
         colKey: null;
         rect: DOMRect;
     } | null;
+    hitTestAction(event: MouseEvent): {
+        rowId: string;
+        colKey: string;
+        kind: "button" | "link";
+    } | null;
     private isPointInSelection;
     private handlePointerMove;
     private handlePointerLeave;
+    private handlePointerDown;
+    private handlePointerUp;
     private positionTooltipAtRect;
     private refreshTooltipPosition;
     private getCellRect;
     private updateCanvasCursor;
     private measureRowHeight;
     private wrapLines;
+    private fitTextLine;
+    private getTextLinesForBounds;
+    private measureTextBounds;
     private drawCellText;
     private formatValue;
 }

package/dist/selectionManager.d.ts

@@ -1,4 +1,4 @@
-import type { Command, EditMode, SelectionRange } from "./types";
+import type { CellAction, Command, EditMode, SelectionRange } from "./types";
 import type { DataModel } from "./dataModel";
 type EditHandler = (cmd: Command, commit: boolean) => void;
 type RowSelectHandler = (rowId: string) => void;
@@ -9,10 +9,21 @@ type HitTest = (event: MouseEvent) => {
     element?: HTMLElement;
     rect: DOMRect;
 } | null;
+type ActionHitTest = (event: MouseEvent) => {
+    rowId: string;
+    colKey: string;
+    kind: "button" | "link";
+} | {
+    rowId: string;
+    colKey: string;
+    kind: "tag-remove";
+    tagIndex: number;
+} | null;
 type ActiveChange = (rowId: string | null, colKey: string | null) => void;
 type ContextMenuHandler = (rowId: string | null, colKey: string | null, clientX: number, clientY: number) => void;
 type SelectionChange = (ranges: SelectionRange[]) => void;
 type UndoRedoHandler = () => void;
+type ActionHandler = (action: CellAction) => void;
 export declare class SelectionManager {
     private dataModel;
     private onActiveChange;
@@ -25,6 +36,7 @@ export declare class SelectionManager {
     private onRowSelect;
     private onMove;
     private hitTest;
+    private hitAction;
     private onContextMenu;
     private handleDocumentContextMenu;
     private selectionRanges;
@@ -54,11 +66,14 @@ export declare class SelectionManager {
     private activeHostOriginalText;
     private composing;
     private lastCompositionEnd;
+    private readonly handleInputCompositionStart;
+    private readonly handleInputCompositionEnd;
     private readonly handleSelectionBlur;
     private readonly handleRootKeydown;
     private isCellReadonly;
     private sequenceLangs?;
-    constructor(root: HTMLElement, editMode: EditMode, onEdit: EditHandler, onRowSelect: RowSelectHandler, onMove: MoveHandler, hitTest: HitTest, dataModel: DataModel, sequenceLangs: readonly string[] | undefined, isCellReadonly: (rowId: string, colKey: string) => boolean, onActiveChange: ActiveChange, onContextMenu: ContextMenuHandler, onSelectionChange: SelectionChange, onUndo: UndoRedoHandler, onRedo: UndoRedoHandler);
+    private onCellAction;
+    constructor(root: HTMLElement, editMode: EditMode, onEdit: EditHandler, onRowSelect: RowSelectHandler, onMove: MoveHandler, hitTest: HitTest, hitAction: ActionHitTest | null, dataModel: DataModel, sequenceLangs: readonly string[] | undefined, isCellReadonly: (rowId: string, colKey: string) => boolean, onCellAction: ActionHandler, onActiveChange: ActiveChange, onContextMenu: ContextMenuHandler, onSelectionChange: SelectionChange, onUndo: UndoRedoHandler, onRedo: UndoRedoHandler);
     setEditMode(mode: EditMode): void;
     syncAfterRowsChanged(): void;
     navigateToCell(rowId: string, colKey: string): void;
@@ -122,6 +137,10 @@ export declare class SelectionManager {
     private autosize;
     private positionFloatingContentBox;
     private handleClick;
+    private triggerCellAction;
+    private removeTagValue;
+    private normalizeTagValues;
+    private openLink;
     private toggleBoolean;
     private handleContextMenu;
     private applySelectionFromHit;

package/dist/types.d.ts

@@ -1,12 +1,39 @@
 export type CellPrimitive = string | number | boolean | null;
+export type ButtonValue = string | {
+    label: string;
+    command: string;
+    commandfor: string;
+};
+export type LinkValue = string | {
+    label: string;
+    href: string;
+    target?: string;
+};
 export type CellValue = CellPrimitive | Date | {
     kind: "enum";
     value: string;
 } | {
     kind: "tags";
     values: string[];
+} | ButtonValue | LinkValue;
+export type ColumnType = "string" | "number" | "boolean" | "datetime" | "date" | "time" | "enum" | "tags" | "button" | "link";
+export type StringFormat = {
+    maxLength?: number;
+    regex?: string;
+};
+export type NumberFormat = {
+    precision?: number;
+    scale?: number;
+    signed?: boolean;
+    thousandSeparator?: boolean;
+    negativeRed?: boolean;
+    format?: string;
 };
-export type ColumnType = "string" | "number" | "boolean" | "datetime" | "date" | "time" | "enum" | "tags";
+export type BooleanFormat = "checkbox" | string | [string, string];
+export type DateFormat = string;
+export type TimeFormat = string;
+export type DateTimeFormat = string;
+export type ColumnFormat<TType extends ColumnType> = TType extends "string" ? StringFormat : TType extends "number" ? NumberFormat : TType extends "boolean" ? BooleanFormat : TType extends "date" ? DateFormat : TType extends "time" ? TimeFormat : TType extends "datetime" ? DateTimeFormat : never;
 export type ResolvedCellStyle = {
     backgroundColor?: string;
     textColor?: string;
@@ -14,6 +41,8 @@ export type ResolvedCellStyle = {
     italic?: boolean;
     underline?: boolean;
     strike?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
 };
 export type StyleDelta = Partial<ResolvedCellStyle>;
 export type DiagnosticLevel = "warning" | "error";
@@ -55,18 +84,7 @@ export interface ColumnSchema<TData extends object = object, RData extends objec
      */
     unique?: boolean;
     nullable?: boolean;
-    string?: {
-        maxLength?: number;
-        regex?: string;
-    };
-    number?: {
-        precision?: number;
-        scale?: number;
-        signed?: boolean;
-        thousandSeparator?: boolean;
-        negativeRed?: boolean;
-        format?: string;
-    };
+    format?: ColumnFormat<TType>;
     enum?: {
         options: string[];
         allowCustom?: boolean;
@@ -75,10 +93,6 @@ export interface ColumnSchema<TData extends object = object, RData extends objec
         options: string[];
         allowCustom?: boolean;
     };
-    booleanDisplay?: "checkbox" | string | [string, string];
-    dateFormat?: string;
-    timeFormat?: string;
-    dateTimeFormat?: string;
     width?: number;
     wrapText?: boolean;
     style?: {
@@ -91,6 +105,8 @@ export interface ColumnSchema<TData extends object = object, RData extends objec
             bold?: boolean;
             italic?: boolean;
         };
+        readonly?: boolean;
+        disabled?: boolean;
     };
     formula?: (data: TData) => unknown;
     conditionalStyle?: ConditionalStyleFn<RData>;
@@ -163,6 +179,11 @@ export interface Command {
     next?: unknown;
     payload?: unknown;
 }
+export type CommitChanges = {
+    commands: Command[];
+    user?: UserInfo;
+};
+export type CommitHandler = (changes: CommitChanges) => Promise<void>;
 export interface UserInfo {
     id: string;
     name: string;
@@ -190,32 +211,10 @@ export interface CoreOptions {
     lockMode?: LockMode;
     /** Preferred languages for auto-fill sequence matching (e.g. ["ja", "en"]). */
     langs?: string[];
-    /** Loading UI configuration used when `defaultData` is `null`. */
-    loading?: {
-        /** Enable built-in loading overlay/spinner. Default: true */
-        enabled?: boolean;
-    };
     defaultClass?: string | string[];
     defaultStyle?: Partial<CSSStyleDeclaration>;
     server?: ServerAdapter;
     user?: UserInfo;
-    findReplace?: {
-        /** Enable Find/Replace feature (engine + integrations). Default: true */
-        enabled?: boolean;
-        /**
-         * Enable the default built-in UI and its shortcut bindings. Default: true
-         * Note: legacy name is `dialog`; `sidebar` is the preferred name.
-         */
-        sidebar?: boolean;
-        /** @deprecated Use `sidebar` instead. */
-        dialog?: boolean;
-        /**
-         * When true, always intercept `Ctrl/Cmd+F` and show extable's search sidebar.
-         * Use this when the table is the primary focus of the page and browser Find/Reload should be overridden.
-         * Default: true (always intercept).
-         */
-        enableSearch?: boolean;
-    };
 }
 export interface TableConfig<T extends object = Record<string, unknown>> {
     data: T[] | null;
@@ -258,6 +257,21 @@ export type TableError = {
         colKey?: string;
     };
 };
+export type ButtonActionValue = {
+    label: string;
+    command?: undefined;
+    commandfor?: undefined;
+} | {
+    label: string;
+    command: string;
+    commandfor: string;
+};
+export type CellAction = {
+    kind: "button";
+    rowId: string;
+    colKey: string;
+    value: ButtonActionValue;
+};
 export type TableState = {
     canCommit: boolean;
     pendingCommandCount: number;
@@ -267,9 +281,6 @@ export type TableState = {
         canRedo: boolean;
     };
     renderMode: "html" | "canvas";
-    ui: {
-        searchPanelOpen: boolean;
-    };
     activeErrors: TableError[];
 };
 export type TableStateListener = (next: TableState, prev: TableState | null) => void;
@@ -292,11 +303,12 @@ export type SelectionSnapshot = {
     activeValueDisplay: string;
     activeValueType: ColumnType | null;
     diagnostic: CellDiagnostic | null;
+    action?: CellAction | null;
     styles: {
         columnStyle: Partial<ResolvedCellStyle>;
         cellStyle: Partial<ResolvedCellStyle>;
         resolved: Partial<ResolvedCellStyle>;
     };
 };
-export type SelectionChangeReason = "selection" | "edit" | "style" | "schema" | "view" | "data" | "unknown";
+export type SelectionChangeReason = "selection" | "edit" | "action" | "style" | "schema" | "view" | "data" | "unknown";
 export type SelectionListener = (next: SelectionSnapshot, prev: SelectionSnapshot | null, reason: SelectionChangeReason) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extable/core",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -31,7 +31,7 @@
     "format": "biome format --write ."
   },
   "dependencies": {
-    "@extable/sequence": "0.1.0"
+    "@extable/sequence": "0.3.1"
   },
   "devDependencies": {
     "typescript": "^5.6.3"