@ai-table/grid 0.0.12 → 0.0.14

package/renderer/components/text.component.d.ts

@@ -0,0 +1,99 @@
+import * as i0 from "@angular/core";
+export declare class AITableText {
+    config: import("@angular/core").InputSignal<import("konva/lib/Shape").ShapeConfig>;
+    textConfig: import("@angular/core").Signal<{
+        fillPatternImage?: HTMLImageElement | undefined;
+        fillPatternX?: number | undefined;
+        fillPatternY?: number | undefined;
+        fillPatternOffset?: import("konva/lib/types").Vector2d | undefined;
+        fillPatternOffsetX?: number | undefined;
+        fillPatternOffsetY?: number | undefined;
+        fillPatternScale?: import("konva/lib/types").Vector2d | undefined;
+        fillPatternScaleX?: number | undefined;
+        fillPatternScaleY?: number | undefined;
+        fillPatternRotation?: number | undefined;
+        fillPatternRepeat?: string | undefined;
+        fillLinearGradientStartPoint?: import("konva/lib/types").Vector2d | undefined;
+        fillLinearGradientStartPointX?: number | undefined;
+        fillLinearGradientStartPointY?: number | undefined;
+        fillLinearGradientEndPoint?: import("konva/lib/types").Vector2d | undefined;
+        fillLinearGradientEndPointX?: number | undefined;
+        fillLinearGradientEndPointY?: number | undefined;
+        fillLinearGradientColorStops?: (string | number)[] | undefined;
+        fillRadialGradientStartPoint?: import("konva/lib/types").Vector2d | undefined;
+        fillRadialGradientStartPointX?: number | undefined;
+        fillRadialGradientStartPointY?: number | undefined;
+        fillRadialGradientEndPoint?: import("konva/lib/types").Vector2d | undefined;
+        fillRadialGradientEndPointX?: number | undefined;
+        fillRadialGradientEndPointY?: number | undefined;
+        fillRadialGradientStartRadius?: number | undefined;
+        fillRadialGradientEndRadius?: number | undefined;
+        fillRadialGradientColorStops?: (string | number)[] | undefined;
+        fillEnabled?: boolean | undefined;
+        fillPriority?: string | undefined;
+        fillRule?: CanvasFillRule | undefined;
+        stroke?: string | CanvasGradient | undefined;
+        strokeWidth?: number | undefined;
+        fillAfterStrokeEnabled?: boolean | undefined;
+        hitStrokeWidth?: string | number | undefined;
+        strokeScaleEnabled?: boolean | undefined;
+        strokeHitEnabled?: boolean | undefined;
+        strokeEnabled?: boolean | undefined;
+        lineJoin?: import("konva/lib/Shape").LineJoin | undefined;
+        lineCap?: import("konva/lib/Shape").LineCap | undefined;
+        sceneFunc?: ((con: import("konva/lib/Context").Context, shape: import("konva/lib/Shape").Shape<import("konva/lib/Shape").ShapeConfig>) => void) | undefined;
+        hitFunc?: ((con: import("konva/lib/Context").Context, shape: import("konva/lib/Shape").Shape<import("konva/lib/Shape").ShapeConfig>) => void) | undefined;
+        shadowColor?: string | undefined;
+        shadowBlur?: number | undefined;
+        shadowOffset?: import("konva/lib/types").Vector2d | undefined;
+        shadowOffsetX?: number | undefined;
+        shadowOffsetY?: number | undefined;
+        shadowOpacity?: number | undefined;
+        shadowEnabled?: boolean | undefined;
+        shadowForStrokeEnabled?: boolean | undefined;
+        dash?: number[] | undefined;
+        dashOffset?: number | undefined;
+        dashEnabled?: boolean | undefined;
+        perfectDrawEnabled?: boolean | undefined;
+        visible?: boolean | undefined;
+        id?: string | undefined;
+        name?: string | undefined;
+        opacity?: number | undefined;
+        scale?: import("konva/lib/types").Vector2d | undefined;
+        scaleX?: number | undefined;
+        skewX?: number | undefined;
+        skewY?: number | undefined;
+        scaleY?: number | undefined;
+        rotation?: number | undefined;
+        rotationDeg?: number | undefined;
+        offset?: import("konva/lib/types").Vector2d | undefined;
+        offsetX?: number | undefined;
+        offsetY?: number | undefined;
+        draggable?: boolean | undefined;
+        dragDistance?: number | undefined;
+        dragBoundFunc?: ((this: import("konva/lib/Node").Node<import("konva/lib/Node").NodeConfig>, pos: import("konva/lib/types").Vector2d) => import("konva/lib/types").Vector2d) | undefined;
+        preventDefault?: boolean | undefined;
+        globalCompositeOperation?: ("" | "lighter" | "source-over" | "source-in" | "source-out" | "source-atop" | "destination-over" | "destination-in" | "destination-out" | "destination-atop" | "copy" | "xor" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity") | undefined;
+        filters?: import("konva/lib/Node").Filter[] | undefined;
+        x: number | undefined;
+        y: number | undefined;
+        width: number | undefined;
+        height: number | undefined;
+        text: any;
+        padding: any;
+        align: any;
+        verticalAlign: any;
+        fill: string | CanvasGradient;
+        textDecoration: any;
+        fontSize: any;
+        fontStyle: any;
+        ellipsis: any;
+        wrap: any;
+        transformsEnabled: any;
+        listening: boolean;
+        fontFamily: any;
+    }>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AITableText, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AITableText, "ai-table-text", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=text.component.d.ts.map

package/renderer/components/text.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.component.d.ts","sourceRoot":"","sources":["../../../../packages/grid/src/renderer/components/text.component.ts"],"names":[],"mappings":";AAgBA,qBAOa,WAAW;IACpB,MAAM,6EAAuC;IAE7C,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAyCP;yCA5CM,WAAW;2CAAX,WAAW;CA6CvB"}

package/renderer/creations/create-active-cell-border.d.ts

@@ -0,0 +1,7 @@
+import { RectConfig } from 'konva/lib/shapes/Rect';
+import { AITableCellsConfig } from '../../types';
+export declare const createActiveCellBorder: (config: AITableCellsConfig) => {
+    activeCellBorder: RectConfig | null;
+    frozenActiveCellBorder: RectConfig | null;
+};
+//# sourceMappingURL=create-active-cell-border.d.ts.map

package/renderer/creations/create-active-cell-border.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-active-cell-border.d.ts","sourceRoot":"","sources":["../../../../packages/grid/src/renderer/creations/create-active-cell-border.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGnD,OAAO,EAAE,kBAAkB,EAAkB,MAAM,aAAa,CAAC;AAGjE,eAAO,MAAM,sBAAsB,WAAY,kBAAkB;;;CAuEhE,CAAC"}

package/renderer/creations/create-cells.d.ts

@@ -0,0 +1,8 @@
+import { AITableCellsDrawerConfig } from '../../types';
+/**
+ * 绘制单元格内容的函数
+ * 利用 Canvas API 绘制每个单元格的背景颜色、文本以及其他可能的样式。这个函数通常用于自定义表格渲染，尤其是在处理大量数据时，通过直接操作 Canvas 来提高渲染性能
+ * @param config
+ */
+export declare const createCells: (config: AITableCellsDrawerConfig) => void;
+//# sourceMappingURL=create-cells.d.ts.map

package/renderer/creations/create-cells.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-cells.d.ts","sourceRoot":"","sources":["../../../../packages/grid/src/renderer/creations/create-cells.ts"],"names":[],"mappings":"AAQA,OAAO,EAAmB,wBAAwB,EAAiC,MAAM,aAAa,CAAC;AAMvG;;;;GAIG;AACH,eAAO,MAAM,WAAW,WAAY,wBAAwB,SA4H3D,CAAC"}

package/renderer/creations/create-heads.d.ts

@@ -0,0 +1,3 @@
+import { AITableCreateHeadsConfig, AITableFieldHeadConfig } from '../../types';
+export declare const createColumnHeads: (config: AITableCreateHeadsConfig) => AITableFieldHeadConfig[];
+//# sourceMappingURL=create-heads.d.ts.map

package/renderer/creations/create-heads.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-heads.d.ts","sourceRoot":"","sources":["../../../../packages/grid/src/renderer/creations/create-heads.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAE/E,eAAO,MAAM,iBAAiB,WAAY,wBAAwB,6BA2CjE,CAAC"}

package/renderer/drawers/add-row-layout-drawer.d.ts

@@ -0,0 +1,12 @@
+import { AITableCell } from '../../types';
+import { Layout } from './layout-drawer';
+export declare class AddRowLayout extends Layout {
+    renderAddFieldBlank(): void;
+    private renderCell;
+    private renderFirstCell;
+    private renderLastCell;
+    private renderCommonCell;
+    render({ isHoverRow }: Pick<AITableCell, 'isHoverRow'>): void;
+}
+export declare const addRowLayout: AddRowLayout;
+//# sourceMappingURL=add-row-layout-drawer.d.ts.map

package/renderer/drawers/add-row-layout-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-row-layout-drawer.d.ts","sourceRoot":"","sources":["../../../../packages/grid/src/renderer/drawers/add-row-layout-drawer.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,qBAAa,YAAa,SAAQ,MAAM;IAC3B,mBAAmB;IAe5B,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,eAAe;IA+BvB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,gBAAgB;IAQxB,MAAM,CAAC,EAAE,UAAU,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,YAAY,CAAC;CAWzD;AAED,eAAO,MAAM,YAAY,cAAqB,CAAC"}

package/renderer/drawers/cell-drawer.d.ts

@@ -0,0 +1,22 @@
+import { AITableField } from '../../core';
+import { AITableRender } from '../../types';
+import { Drawer } from './drawer';
+/**
+ * 处理和渲染表格单元格的内容
+ */
+export declare class CellDrawer extends Drawer {
+    initStyle(field: AITableField, styleProps: {
+        fontWeight: any;
+    }): void | null;
+    renderCell(render: AITableRender, ctx?: CanvasRenderingContext2D | undefined): void | void[] | null;
+    private renderCellText;
+    private renderCellSelect;
+    private renderCellMultiSelect;
+    private renderSingleSelectCell;
+    private renderCellDate;
+    private renderCellRate;
+    private renderCellProgress;
+    private renderCellMember;
+}
+export declare const cellDrawer: CellDrawer;
+//# sourceMappingURL=cell-drawer.d.ts.map

package/renderer/drawers/cell-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell-drawer.d.ts","sourceRoot":"","sources":["../../../../packages/grid/src/renderer/drawers/cell-drawer.ts"],"names":[],"mappings":"AAgDA,OAAO,EAAW,YAAY,EAA8E,MAAM,YAAY,CAAC;AAC/H,OAAO,EAA2D,aAAa,EAAsB,MAAM,aAAa,CAAC;AAEzH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;GAEG;AACH,qBAAa,UAAW,SAAQ,MAAM;IAE3B,SAAS,CAAC,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE;QAAE,UAAU,EAAE,GAAG,CAAA;KAAE,GAAG,IAAI,GAAG,IAAI;IAqB5E,UAAU,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,CAAC,EAAE,wBAAwB,GAAG,SAAS;IA4BnF,OAAO,CAAC,cAAc;IA8DtB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,qBAAqB;IA0M7B,OAAO,CAAC,sBAAsB;IA2F9B,OAAO,CAAC,cAAc;IAwBtB,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,kBAAkB;IA6C1B,OAAO,CAAC,gBAAgB;CAqG3B;AAED,eAAO,MAAM,UAAU,YAAmB,CAAC"}

package/renderer/drawers/drawer.d.ts

@@ -0,0 +1,136 @@
+import GraphemeSplitter from 'grapheme-splitter';
+import { AITableArc, AITableAvatarSize, AITableAvatarType, AITableCtxStyle, AITableImage, AITableLabel, AITableLine, AITableRect, AITableText, AITableTextEllipsis, AITableWrapText } from '../../types';
+export declare const graphemeSplitter: GraphemeSplitter;
+/**
+ * 用于在 Canvas 上进行的各种绘图操作，包含了文本绘制、矩形绘制、路径绘制以及一些几何计算等功能
+ */
+export declare class Drawer {
+    ctx: CanvasRenderingContext2D;
+    needDraw: boolean;
+    colors: {
+        primary: string;
+        gray100: string;
+        gray200: string;
+        gray300: string;
+        gray800: string;
+        gray600: string;
+        gray700: string;
+        white: string;
+        black: string;
+        transparent: string;
+        gray80: string;
+        headSelectedBgColor: string;
+        itemActiveBgColor: string;
+        waring: string;
+        success: string;
+    };
+    initCtx(ctx: CanvasRenderingContext2D): void;
+    setStyle(options: AITableCtxStyle): void;
+    textEllipsis(options: AITableTextEllipsis): {
+        text: string;
+        textWidth: number;
+        isEllipsis: boolean;
+    };
+    line(options: AITableLine): void;
+    arc(options: AITableArc): void;
+    rect(options: AITableRect): void;
+    customRect(options: AITableRect): void;
+    wrapText(options: AITableWrapText): import("../../types").AITableWrapTextResult;
+    text(options: AITableText): void;
+    tag(options: AITableLabel): {
+        width: number;
+        height: number;
+    };
+    image(options: AITableImage, crossOrigin?: boolean, allowDefault?: boolean): void;
+    avatar(options: {
+        x: number;
+        y: number;
+        url: string;
+        id: string;
+        title: string;
+        type?: AITableAvatarType;
+        size?: AITableAvatarSize;
+        opacity?: number;
+        bgColor?: string;
+    }): void | null;
+    /**
+     * 方法将椭圆弧的端点参数化形式转换为中心参数化形式
+     * 接受弧线的端点参数，并计算出弧线的中心点坐标、起始角度、终止角度等参数
+     * 返回值：一个包含中心点坐标、半径、旋转角度、起始角度以及角度差的对象，这些参数可以直接用于绘制椭圆弧
+     * @returns [cx, cy, rx, ry, theta, dTheta, psi, fs]
+     */
+    private convertEndpointToCenterParameterization;
+    /**
+     * 计算两个点 (x1, y1) 和 (x2, y2) 之间的直线距离
+     * @returns 两个点 (x1, y1) 和 (x2, y2) 之间的直线距离，单位与输入的坐标值相同
+     */
+    private getLineLength;
+    /**
+     * 计算三次贝塞尔曲线上给定参数 t 对应的点的坐标.
+     * 可以在指定的 t 参数下计算出曲线上精确的一个点，这个点可以用于绘制平滑曲线的一部分
+     * @param pct - 0 到 1 之间的参数，用于指定曲线上的点的位置
+     * @param P1x - 曲线的起点 x 坐标
+     * @param P1y - 曲线的起点 y 坐标
+     * @param P2x - 曲线的第一个控制点 x 坐标
+     * @param P2y - 曲线的第一个控制点 y 坐标
+     * @param P3x - 曲线的第二个控制点 x 坐标
+     * @param P3y - 曲线的第二个控制点 y 坐标
+     * @param P4x - 曲线的终点 x 坐标
+     * @param P4y - 曲线的终点 y 坐标
+     * @returns
+     */
+    private getPointOnCubicBezier;
+    /**
+     * 计算二次贝塞尔曲线上给定参数 t 对应的点的坐标
+     * @param pct - 0 到 1 之间的参数，用于指定曲线上的点的位置
+     * @param P1x - 曲线的起点 x 坐标
+     * @param P1y - 曲线的起点 y 坐标
+     * @param P2x - 曲线的控制点 x 坐标
+     * @param P2y - 曲线的控制点 y 坐标
+     * @param P3x - 曲线的终点 x 坐标
+     * @param P3y - 曲线的终点 y 坐标
+     * @returns
+     */
+    private getPointOnQuadraticBezier;
+    /**
+     * 计算椭圆弧上给定角度 θ 对应的点的坐标
+     * @param cx - 椭圆的中心点 x 坐标
+     * @param cy - 椭圆的中心点 y 坐标
+     * @param rx - 椭圆的 x 轴半径
+     * @param ry - 椭圆的 y 轴半径
+     * @param theta - 椭圆弧的起始角度
+     * @param psi - 椭圆弧的旋转角度
+     * @returns
+     */
+    private getPointOnEllipticalArc;
+    /**
+     * 计算基于不同路径命令的长度
+     * @param x - 起点 x 坐标
+     * @param y - 起点 y 坐标
+     * @param cmd - 路径命令
+     * @param points - 与路径命令相关的点的坐标或控制参数
+     * @returns
+     */
+    private calcLength;
+    /**
+     * 解析 SVG 路径数据字符串，将其转换为一个包含路径命令和坐标点的数组对象
+     * @param data - SVG 路径数据字符串
+     * @returns
+     */
+    private parsePathData;
+    /**
+     * 根据传入的路径数据 data 在画布上绘制路径
+     * @param options
+     */
+    path(options: {
+        x: number;
+        y: number;
+        data: string;
+        size?: number;
+        scaleX?: number;
+        scaleY?: number;
+        fill: string;
+    }): void;
+}
+export declare const drawer: Drawer;
+//# sourceMappingURL=drawer.d.ts.map

package/renderer/drawers/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../packages/grid/src/renderer/drawers/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AAkBjD,OAAO,EACH,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,eAAe,EAElB,MAAM,aAAa,CAAC;AAIrB,eAAO,MAAM,gBAAgB,kBAAyB,CAAC;AAEvD;;GAEG;AACH,qBAAa,MAAM;IACf,GAAG,EAAE,wBAAwB,CAA0B;IACvD,QAAQ,UAAS;IACjB,MAAM;;;;;;;;;;;;;;;;MAAuB;IAEtB,OAAO,CAAC,GAAG,EAAE,wBAAwB;IAUrC,QAAQ,CAAC,OAAO,EAAE,eAAe;IAejC,YAAY,CAAC,OAAO,EAAE,mBAAmB;;;;;IAsDzC,IAAI,CAAC,OAAO,EAAE,WAAW;IAuBzB,GAAG,CAAC,OAAO,EAAE,UAAU;IAevB,IAAI,CAAC,OAAO,EAAE,WAAW;IA6CzB,UAAU,CAAC,OAAO,EAAE,WAAW;IAkC/B,QAAQ,CAAC,OAAO,EAAE,eAAe;IA0HjC,IAAI,CAAC,OAAO,EAAE,WAAW;IAiCzB,GAAG,CAAC,OAAO,EAAE,YAAY,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;IAyC7D,KAAK,CAAC,OAAO,EAAE,YAAY,EAAE,WAAW,CAAC,EAAE,OAAO,EAAE,YAAY,CAAC,EAAE,OAAO;IAiD1E,MAAM,CAAC,OAAO,EAAE;QACnB,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,GAAG,EAAE,MAAM,CAAC;QACZ,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,iBAAiB,CAAC;QACzB,IAAI,CAAC,EAAE,iBAAiB,CAAC;QACzB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;KACpB;IAwDD;;;;;OAKG;IACH,OAAO,CAAC,uCAAuC;IAkE/C;;;OAGG;IACH,OAAO,CAAC,aAAa;IAIrB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,qBAAqB;IAoC7B;;;;;;;;;;OAUG;IACH,OAAO,CAAC,yBAAyB;IAsBjC;;;;;;;;;OASG;IACH,OAAO,CAAC,uBAAuB;IAa/B;;;;;;;OAOG;IACH,OAAO,CAAC,UAAU;IAsDlB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAuPrB;;;OAGG;IACI,IAAI,CAAC,OAAO,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE;CA8D7H;AAED,eAAO,MAAM,MAAM,QAAe,CAAC"}

package/renderer/drawers/layout-drawer.d.ts

@@ -0,0 +1,22 @@
+import { AITableLayout } from '../../types';
+import { Drawer } from './drawer';
+/**
+ * 用于处理表格行或单元格的布局和绘制。
+ * 它提供了基本的布局信息（如位置、大小等），并定义了常用的绘图方法（如渲染缩进区域、添加新字段的空白区域等）。
+ * 该类继承自 Drawer，并被其他更具体的布局类（如 RecordRowLayout）扩展和使用
+ */
+export declare class Layout extends Drawer {
+    protected x: number;
+    protected y: number;
+    protected rowHeight: number;
+    protected columnWidth: number;
+    protected rowIndex: number;
+    protected columnIndex: number;
+    protected columnCount: number;
+    protected containerWidth: number;
+    init({ x, y, rowIndex, columnIndex, rowHeight, columnWidth, columnCount, containerWidth }: AITableLayout): void;
+    protected get isFirst(): boolean;
+    protected get isLast(): boolean;
+    protected renderAddFieldBlank(): void;
+}
+//# sourceMappingURL=layout-drawer.d.ts.map

package/renderer/drawers/layout-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-drawer.d.ts","sourceRoot":"","sources":["../../../../packages/grid/src/renderer/drawers/layout-drawer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;;;GAIG;AACH,qBAAa,MAAO,SAAQ,MAAM;IAE9B,SAAS,CAAC,CAAC,SAAK;IAChB,SAAS,CAAC,CAAC,SAAK;IAEhB,SAAS,CAAC,SAAS,SAAK;IAExB,SAAS,CAAC,WAAW,SAAK;IAE1B,SAAS,CAAC,QAAQ,SAAK;IAEvB,SAAS,CAAC,WAAW,SAAK;IAE1B,SAAS,CAAC,WAAW,SAAK;IAE1B,SAAS,CAAC,cAAc,SAAK;IAG7B,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,EAAE,aAAa;IAYxG,SAAS,KAAK,OAAO,YAEpB;IAGD,SAAS,KAAK,MAAM,YAEnB;IAED,SAAS,CAAC,mBAAmB;CAYhC"}

package/renderer/drawers/record-row-layout-drawer.d.ts

@@ -0,0 +1,14 @@
+import { AITableCell } from '../../types';
+import { Layout } from './layout-drawer';
+/**
+ * 绘制行的布局，通过直接操作 Canvas 提供高效的渲染方法。
+ * 它继承自 Layout 类，包含了用于绘制行中单元格（尤其是首列和尾列）的几个方法
+ */
+export declare class RecordRowLayout extends Layout {
+    private renderFirstCell;
+    private renderLastCell;
+    private renderCommonCell;
+    render(config: AITableCell): void;
+}
+export declare const recordRowLayout: RecordRowLayout;
+//# sourceMappingURL=record-row-layout-drawer.d.ts.map

package/renderer/drawers/record-row-layout-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-row-layout-drawer.d.ts","sourceRoot":"","sources":["../../../../packages/grid/src/renderer/drawers/record-row-layout-drawer.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC;;;GAGG;AACH,qBAAa,eAAgB,SAAQ,MAAM;IAEvC,OAAO,CAAC,eAAe;IAkDvB,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,gBAAgB;IAiBxB,MAAM,CAAC,MAAM,EAAE,WAAW;CAM7B;AAED,eAAO,MAAM,eAAe,iBAAwB,CAAC"}

package/renderer/index.d.ts

@@ -0,0 +1,4 @@
+export * from './creations/create-active-cell-border';
+export * from './creations/create-cells';
+export * from './renderer.component';
+//# sourceMappingURL=index.d.ts.map

package/renderer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/grid/src/renderer/index.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC;AACtD,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC"}

package/renderer/renderer.component.d.ts

@@ -0,0 +1,64 @@
+import { StageConfig } from 'konva/lib/Stage';
+import { KoEventObject } from '../angular-konva';
+import { AITable } from '../core';
+import { AITableRendererConfig } from '../types';
+import * as i0 from "@angular/core";
+export declare class AITableRenderer {
+    config: import("@angular/core").InputSignal<AITableRendererConfig>;
+    koMousemove: import("@angular/core").OutputEmitterRef<KoEventObject<MouseEvent>>;
+    koMousedown: import("@angular/core").OutputEmitterRef<KoEventObject<MouseEvent>>;
+    koWheel: import("@angular/core").OutputEmitterRef<KoEventObject<WheelEvent>>;
+    koClick: import("@angular/core").OutputEmitterRef<KoEventObject<MouseEvent>>;
+    koDblclick: import("@angular/core").OutputEmitterRef<KoEventObject<MouseEvent>>;
+    fields: import("@angular/core").Signal<import("../core").AITableField[]>;
+    coordinate: import("@angular/core").Signal<import("../core").Coordinate>;
+    containerWidth: import("@angular/core").Signal<number>;
+    containerHeight: import("@angular/core").Signal<number>;
+    scrollState: import("@angular/core").Signal<import("../types").AITableScrollState>;
+    visibleRangeInfo: import("@angular/core").Signal<{
+        rowStartIndex: number;
+        rowStopIndex: number;
+        columnStartIndex: number;
+        columnStopIndex: number;
+    }>;
+    frozenAreaWidth: import("@angular/core").Signal<number>;
+    lastColumnWidth: import("@angular/core").Signal<number>;
+    lastColumnOffset: import("@angular/core").Signal<number>;
+    cellGroupClipWidth: import("@angular/core").Signal<number>;
+    stageConfig: import("@angular/core").Signal<Partial<StageConfig>>;
+    gridGroupConfig: import("@angular/core").Signal<Partial<StageConfig>>;
+    commonGroupConfig: import("@angular/core").Signal<Partial<StageConfig>>;
+    attachGroupConfig: import("@angular/core").Signal<Partial<StageConfig>>;
+    frozenAttachGroupConfig: import("@angular/core").Signal<Partial<StageConfig>>;
+    offsetYConfig: import("@angular/core").Signal<Partial<StageConfig>>;
+    offsetXConfig: import("@angular/core").Signal<Partial<StageConfig>>;
+    offsetConfig: import("@angular/core").Signal<Partial<StageConfig>>;
+    columnHeadConfig: import("@angular/core").Signal<{
+        aiTable: AITable;
+        coordinate: import("../core").Coordinate;
+        fields: import("../core").AITableField[];
+        columnStartIndex: number;
+        columnStopIndex: number;
+        pointPosition: import("../types").AITablePointPosition;
+    }>;
+    cellsConfig: import("@angular/core").Signal<{
+        aiTable: AITable;
+        coordinate: import("../core").Coordinate;
+        references: import("../types").AITableReferences;
+        rowStartIndex: number;
+        rowStopIndex: number;
+        columnStartIndex: number;
+        columnStopIndex: number;
+    }>;
+    activeCellBorderConfig: import("@angular/core").Signal<{
+        activeCellBorder: import("konva/lib/shapes/Rect").RectConfig | null;
+        frozenActiveCellBorder: import("konva/lib/shapes/Rect").RectConfig | null;
+    }>;
+    stageMousemove(e: KoEventObject<MouseEvent>): void;
+    stageMousedown(e: KoEventObject<MouseEvent>): void;
+    stageClick(e: KoEventObject<MouseEvent>): void;
+    stageDblclick(e: KoEventObject<MouseEvent>): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AITableRenderer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AITableRenderer, "ai-table-renderer", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; }, { "koMousemove": "koMousemove"; "koMousedown": "koMousedown"; "koWheel": "koWheel"; "koClick": "koClick"; "koDblclick": "koDblclick"; }, never, ["*"], true, never>;
+}
+//# sourceMappingURL=renderer.component.d.ts.map

package/renderer/renderer.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.component.d.ts","sourceRoot":"","sources":["../../../packages/grid/src/renderer/renderer.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAe,aAAa,EAAoB,MAAM,kBAAkB,CAAC;AAEhF,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;;AAmBjD,qBAsBa,eAAe;IACxB,MAAM,6DAA2C;IAEjD,WAAW,sEAAuC;IAElD,WAAW,sEAAuC;IAElD,OAAO,sEAAuC;IAE9C,OAAO,sEAAuC;IAE9C,UAAU,sEAAuC;IAEjD,MAAM,mEAEH;IAEH,UAAU,+DAEP;IAEH,cAAc,yCAEX;IAEH,eAAe,yCAEZ;IAEH,WAAW,wEAER;IAEH,gBAAgB;;;;;OAEb;IAEH,eAAe,yCAEZ;IAEH,eAAe,yCAEZ;IAEH,gBAAgB,yCAEb;IAEH,kBAAkB,yCAMf;IAEH,WAAW,uDAOR;IAEH,eAAe,uDAOZ;IAEH,iBAAiB,uDAOd;IAEH,iBAAiB,uDAOd;IAEH,uBAAuB,uDAOpB;IAEH,aAAa,uDAKV;IAEH,aAAa,uDAKV;IAEH,YAAY,uDAMT;IAEH,gBAAgB;;;;;;;OAab;IAEH,WAAW;;;;;;;;OAYR;IAEH,sBAAsB;;;OAEnB;IAEH,cAAc,CAAC,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC;IAI3C,cAAc,CAAC,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC;IAI3C,UAAU,CAAC,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC;IAIvC,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC;yCAzKjC,eAAe;2CAAf,eAAe;CA4K3B"}

package/services/event.service.d.ts

@@ -1,6 +1,8 @@
+import { ThyPopoverRef } from 'ngx-tethys/popover';
 import { Subject } from 'rxjs';
+import { AbstractEditCellEditor } from '../components';
 import { AITable, AITableFieldType } from '../core';
-import { AITableGridCellRenderSchema } from '../types';
+import { AITableGridCellRenderSchema, AITableOpenEditOptions } from '../types';
 import * as i0 from "@angular/core";
 export declare class AITableGridEventService {
     aiTable: AITable;
@@ -10,13 +12,25 @@ export declare class AITableGridEventService {
     mouseoverEvent$: Subject<MouseEvent>;
     globalMouseoverEvent$: Subject<MouseEvent>;
     globalMousedownEvent$: Subject<MouseEvent>;
+    private cellEditorPopoverRef;
     private destroyRef;
-    private overlay;
     private thyPopover;
     initialize(aiTable: AITable, aiFieldRenderers?: Partial<Record<AITableFieldType, AITableGridCellRenderSchema>>): void;
     registerEvents(element: HTMLElement): void;
     private getEditorComponent;
-    openEdit(cellDom: HTMLElement): import("ngx-tethys/popover").ThyPopoverRef<unknown, unknown, unknown>;
+    openEdit(cellDom: HTMLElement): ThyPopoverRef<unknown, unknown, unknown>;
+    getOriginPosition(aiTable: AITable, options: AITableOpenEditOptions): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    openCellEditor(aiTable: AITable, options: AITableOpenEditOptions): ThyPopoverRef<AbstractEditCellEditor<any, import("../core").AITableField>, unknown, unknown>;
+    closeCellEditor(): void;
+    getCurrentEditCell(): {
+        recordId: string;
+        fieldId: string;
+    } | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<AITableGridEventService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AITableGridEventService>;
 }

package/services/event.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"event.service.d.ts","sourceRoot":"","sources":["../../../packages/grid/src/services/event.service.ts"],"names":[],"mappings":"AAGA,OAAO,EAA2B,OAAO,EAAE,MAAM,MAAM,CAAC;AAExD,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;;AAGvD,qBACa,uBAAuB;IAChC,OAAO,EAAG,OAAO,CAAC;IAElB,gBAAgB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,2BAA2B,CAAC,CAAC,CAAC;IAElF,cAAc,sBAA6B;IAE3C,eAAe,sBAA6B;IAE5C,eAAe,sBAA6B;IAE5C,qBAAqB,sBAA6B;IAElD,qBAAqB,sBAA6B;IAElD,OAAO,CAAC,UAAU,CAAsB;IAExC,OAAO,CAAC,OAAO,CAAmB;IAElC,OAAO,CAAC,UAAU,CAAsB;IAExC,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,gBAAgB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,2BAA2B,CAAC,CAAC;IAK9G,cAAc,CAAC,OAAO,EAAE,WAAW;IAgCnC,OAAO,CAAC,kBAAkB;IAO1B,QAAQ,CAAC,OAAO,EAAE,WAAW;yCAjEpB,uBAAuB;6CAAvB,uBAAuB;CAkGnC"}
+{"version":3,"file":"event.service.d.ts","sourceRoot":"","sources":["../../../packages/grid/src/services/event.service.ts"],"names":[],"mappings":"AAIA,OAAO,EAAc,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAA2B,OAAO,EAAE,MAAM,MAAM,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,2BAA2B,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;;AAG/E,qBACa,uBAAuB;IAChC,OAAO,EAAG,OAAO,CAAC;IAElB,gBAAgB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,2BAA2B,CAAC,CAAC,CAAC;IAElF,cAAc,sBAA6B;IAE3C,eAAe,sBAA6B;IAE5C,eAAe,sBAA6B;IAE5C,qBAAqB,sBAA6B;IAElD,qBAAqB,sBAA6B;IAElD,OAAO,CAAC,oBAAoB,CAAqD;IAEjF,OAAO,CAAC,UAAU,CAAsB;IAExC,OAAO,CAAC,UAAU,CAAsB;IAExC,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,gBAAgB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,2BAA2B,CAAC,CAAC;IAK9G,cAAc,CAAC,OAAO,EAAE,WAAW;IAgCnC,OAAO,CAAC,kBAAkB;IAO1B,QAAQ,CAAC,OAAO,EAAE,WAAW;IAiC7B,iBAAiB,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,sBAAsB;;;;;;IAwCnE,cAAc,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,sBAAsB;IAwDhE,eAAe;IAOf,kBAAkB;;;;yCAzMT,uBAAuB;6CAAvB,uBAAuB;CAwNnC"}

package/services/field.service.d.ts

@@ -1,7 +1,7 @@
-import { ElementRef } from '@angular/core';
 import { ThyPopover } from 'ngx-tethys/popover';
-import { AITable, AITableField } from '../core';
-import { AIFieldConfig } from '../types';
+import { FieldMenu } from '../components/field-menu/field-menu.component';
+import { AITable } from '../core';
+import { AIFieldConfig, AITableEditFieldOptions, AITableFieldMenuOptions } from '../types';
 import * as i0 from "@angular/core";
 export declare const AI_TABLE_GRID_FIELD_SERVICE_MAP: WeakMap<AITable, AITableGridFieldService>;
 export declare class AITableGridFieldService {
@@ -9,7 +9,8 @@ export declare class AITableGridFieldService {
     aiFieldConfig: AIFieldConfig | undefined;
     constructor(thyPopover: ThyPopover);
     initAIFieldConfig(aiFieldConfig: AIFieldConfig | undefined): void;
-    editFieldProperty(origin: HTMLElement | ElementRef<any>, aiTable: AITable, aiEditField: AITableField, isUpdate: boolean): void;
+    editFieldProperty(aiTable: AITable, options: AITableEditFieldOptions): import("ngx-tethys/popover").ThyPopoverRef<unknown, unknown, unknown>;
+    openFieldMenu(aiTable: AITable, options: AITableFieldMenuOptions): import("ngx-tethys/popover").ThyPopoverRef<FieldMenu, unknown, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AITableGridFieldService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AITableGridFieldService>;
 }

package/services/field.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field.service.d.ts","sourceRoot":"","sources":["../../../packages/grid/src/services/field.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAc,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;;AAEzC,eAAO,MAAM,+BAA+B,2CAAkD,CAAC;AAE/F,qBACa,uBAAuB;IAGpB,OAAO,CAAC,UAAU;IAF9B,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;gBAErB,UAAU,EAAE,UAAU;IAE1C,iBAAiB,CAAC,aAAa,EAAE,aAAa,GAAG,SAAS;IAI1D,iBAAiB,CAAC,MAAM,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO;yCAT9G,uBAAuB;6CAAvB,uBAAuB;CAsBnC"}
+{"version":3,"file":"field.service.d.ts","sourceRoot":"","sources":["../../../packages/grid/src/services/field.service.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,+CAA+C,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;;AAE3F,eAAO,MAAM,+BAA+B,2CAAkD,CAAC;AAE/F,qBACa,uBAAuB;IAGpB,OAAO,CAAC,UAAU;IAF9B,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;gBAErB,UAAU,EAAE,UAAU;IAE1C,iBAAiB,CAAC,aAAa,EAAE,aAAa,GAAG,SAAS;IAI1D,iBAAiB,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,uBAAuB;IAgBpE,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,uBAAuB;yCAzBvD,uBAAuB;6CAAvB,uBAAuB;CA6CnC"}

package/services/index.d.ts

@@ -0,0 +1,4 @@
+export * from './event.service';
+export * from './field.service';
+export * from './selection.service';
+//# sourceMappingURL=index.d.ts.map

package/services/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/grid/src/services/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}

package/services/selection.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection.service.d.ts","sourceRoot":"","sources":["../../../packages/grid/src/services/selection.service.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;;AAElC,qBACa,2BAA2B;IACpC,OAAO,EAAG,OAAO,CAAC;;IAIlB,UAAU,CAAC,OAAO,EAAE,OAAO;IAI3B,cAAc;IAQd,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;IAK5C,WAAW,CAAC,OAAO,EAAE,MAAM;IAK3B,YAAY,CAAC,QAAQ,EAAE,MAAM;IAa7B,eAAe,CAAC,OAAO,EAAE,OAAO;IAShC,YAAY,CAAC,KAAK,EAAE,UAAU;yCAjDrB,2BAA2B;6CAA3B,2BAA2B;CAuEvC"}
+{"version":3,"file":"selection.service.d.ts","sourceRoot":"","sources":["../../../packages/grid/src/services/selection.service.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;;AAElC,qBACa,2BAA2B;IACpC,OAAO,EAAG,OAAO,CAAC;;IAIlB,UAAU,CAAC,OAAO,EAAE,OAAO;IAI3B,cAAc;IAQd,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;IAS5C,WAAW,CAAC,OAAO,EAAE,MAAM;IAQ3B,YAAY,CAAC,QAAQ,EAAE,MAAM;IAa7B,eAAe,CAAC,OAAO,EAAE,OAAO;IAShC,YAAY,CAAC,KAAK,EAAE,UAAU;yCAxDrB,2BAA2B;6CAA3B,2BAA2B;CA8EvC"}

package/styles/styles.scss

@@ -2,8 +2,8 @@
 @use 'ngx-tethys/styles/index.scss';
 @use 'ngx-tethys/styles/variables.scss';
 @use '../components/cell-editors/cell-editor.scss';
-
-.ai-table-grid {
+@use '../components/cell-views/select/option.scss';
+.ai-table-dom-grid {
     display: table;
     width: 100%;
 
@@ -145,15 +145,75 @@
     }
 }
 
-.grid-cell-editor {
-    .thy-popover-container {
-        box-shadow: none;
-        border-radius: inherit;
-    }
-    .form-control,
-    .thy-select-custom,
-    .select-control-rendered {
+.ai-table-grid {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .ai-table-grid-view {
+        display: block;
+        width: 100%;
         height: 100%;
-        border-radius: 0;
+    }
+    .ai-table-horizontal-scroll-bar-wrapper,
+    .ai-table-vertical-scroll-bar-wrapper {
+        position: absolute;
+        will-change: transform;
+        cursor: pointer;
+
+        .ai-table-scroll-bar-inner {
+            position: absolute;
+        }
+
+        &::scrollbar {
+            width: 18px;
+            height: 18px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+        }
+        &::scrollbar-button {
+            display: none;
+            height: 0;
+            width: 0;
+        }
+        &::scrollbar-thumb {
+            background-color: variables.$gray-500;
+            background-clip: padding-box;
+            border: calc(18px / 4) solid variables.$black;
+            border-radius: calc(18px / 2);
+            min-height: 36px;
+        }
+        &:hover {
+            &::scrollbar-thumb {
+                background-color: variables.$gray-500;
+            }
+        }
+    }
+
+    .ai-table-vertical-scroll-bar-wrapper {
+        overflow-x: hidden;
+        overflow-y: scroll;
+        width: 18px;
+        right: 0;
+
+        .ai-table-scroll-bar-inner {
+            width: 1px;
+        }
+    }
+
+    .ai-table-horizontal-scroll-bar-wrapper {
+        overflow-x: scroll;
+        overflow-y: hidden;
+        height: 18px;
+        bottom: 0;
+        left: 0;
+
+        .ai-table-scroll-bar-inner {
+            height: 1px;
+        }
     }
 }