@visactor/vtable 0.20.1 → 0.20.2-alpha.3

package/cjs/ts-types/theme.d.ts

@@ -108,5 +108,8 @@ export interface ITableThemeDefine {
         bottomAxisStyle?: Omit<ICellAxisOption, 'type' | 'domain' | 'range' | 'orient' | '__ticksForVTable'>;
     };
     textPopTipStyle?: PopTipAttributes;
+    cellInnerBorder?: boolean;
+    cellBorderClipDirection?: 'top-left' | 'bottom-right';
+    _contentOffset?: number;
 }
 export type RequiredTableThemeDefine = Required<ITableThemeDefine>;

package/cjs/ts-types/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ts-types/theme.ts"],"names":[],"mappings":"","file":"theme.js","sourcesContent":["/* eslint-disable sort-imports */\nimport type { ColorsDef, LineDashsDef, LineWidthsDef, LineWidthsPropertyDefine } from '.';\nimport type { ITextStyleOption } from './column/style';\nimport type { ColorPropertyDefine, ColorsPropertyDefine } from './style-define';\nimport type { ColumnIconOption } from './icon';\nimport type { ICellAxisOption } from './component/axis';\nimport type { PopTipAttributes } from '@visactor/vrender-components';\n// ****** Custom Theme *******\nexport type PartialTableThemeDefine = Partial<ITableThemeDefine>;\nexport type ThemeStyle = ITextStyleOption & {\n  hover?: Omit<InteractionStyle, 'cellBorderColor' | 'cellBorderLineWidth'>; //鼠标hover到某个单元格\n  // click?: Omit<InteractionStyle, 'inlineRowBgColor' | 'inlineColumnBgColor'>; //鼠标点击到某个单元格\n  frameStyle?: FrameStyle;\n};\nexport type InteractionStyle = {\n  cellBorderColor?: ColorsPropertyDefine; //交互所在单元格的边框颜色\n  cellBorderLineWidth?: LineWidthsPropertyDefine;\n  // cellBorderLineDash?:LineDashsPropertyDefine,//用到的场景应该不多\n  cellBgColor?: ColorPropertyDefine; //交互所在单元格的背景颜色\n  // inlineRowBorderColor?: ColorsPropertyDefine,//交互所在整行的边框颜色\n  inlineRowBgColor?: ColorPropertyDefine; //交互所在整行的背景颜色\n  // inlineColBorderColor?: ColorsPropertyDefine,//交互所在整列的边框颜色\n  inlineColumnBgColor?: ColorPropertyDefine; //交互所在整列的背景颜色\n  // headerHighlightBorderColor?:ColorPropertyDefine,//表头底部高亮线\n};\nexport type FrameStyle = {\n  borderColor?: ColorsDef;\n  borderLineWidth?: LineWidthsDef;\n  borderLineDash?: LineDashsDef;\n  innerBorder?: boolean;\n};\nexport type TableFrameStyle = FrameStyle & {\n  shadowBlur?: number; //阴影宽度\n  shadowOffsetX?: number; //x方向偏移\n  shadowOffsetY?: number; //Y方向偏移\n  shadowColor?: string; //阴影颜色\n  cornerRadius?: number; //边框圆角半径\n};\nexport type menuStyle = {\n  color?: string;\n  highlightColor?: string;\n  fontSize?: number;\n  fontFamily?: string;\n  highlightFontSize?: number;\n  highlightFontFamily?: string;\n  hoverBgColor?: string;\n};\nexport type ScrollStyle = {\n  /**滚动条滚动的颜色 */\n  scrollRailColor?: string;\n  /**滚动条滑块的颜色 */\n  scrollSliderColor?: string;\n  /**滚动条宽度大小 */\n  width?: number;\n  /**滚动条是否可见  'always' | 'scrolling' | 'none' | 'focus',常驻|滚动时|不显示|聚焦在画布上时 */\n  visible?: 'always' | 'scrolling' | 'none' | 'focus';\n  /*** 悬浮与容器上，还是独立于容器外 */\n  hoverOn?: boolean;\n};\n/**\n * 气泡框，按钮的的解释信息\n */\nexport type TooltipStyle = {\n  fontFamily?: string;\n  fontSize?: number;\n  color?: string;\n  padding?: number[];\n  bgColor?: string;\n  /** !目前未实现该逻辑。触发行为：hover or click */\n  // trigger?: string | string[];\n  /**气泡框位置，可选 top left right bottom */\n  // placement?: Placement;\n};\nexport interface ITableThemeDefine {\n  /** 表格绘制范围外的canvas上填充的颜色 */\n  underlayBackgroundColor?: string;\n  // selectionBgColor?: ColorPropertyDefine; //多选单元格背景色 手动设置的多选 非框选\n  defaultStyle?: ThemeStyle;\n  cornerHeaderStyle?: ThemeStyle; //角头样式\n  cornerRightTopCellStyle?: ThemeStyle; // 右上角占位单元格样式\n  cornerLeftBottomCellStyle?: ThemeStyle; // 左下角占位单元格样式\n  cornerRightBottomCellStyle?: ThemeStyle; // 右下角占位单元格样式\n  rightFrozenStyle?: ThemeStyle; // 右侧冻结单元格样式\n  bottomFrozenStyle?: ThemeStyle; // 下部冻结单元格样式\n  headerStyle?: ThemeStyle;\n  rowHeaderStyle?: ThemeStyle;\n  bodyStyle?: ThemeStyle;\n  frameStyle?: TableFrameStyle;\n  //列调整宽度的直线\n  columnResize?: {\n    lineColor: ColorPropertyDefine; //上面线的颜色\n    bgColor?: ColorPropertyDefine; //背景线的颜色\n    lineWidth: number; //上面线的宽度\n    width?: number; //背景线的宽度\n    labelColor?: string; //label的颜色\n    labelFontSize?: number; //label的字体大小\n    labelFontFamily?: string; //label的字体\n    labelBackgroundFill?: string; //label的背景填充\n    labelBackgroundCornerRadius?: number; //label的背景圆角\n  };\n  //拖拽表格换位分割线的样式\n  dragHeaderSplitLine?: {\n    lineColor: ColorPropertyDefine; //上面线的颜色\n    lineWidth: number; //上面线的宽度\n    shadowBlockColor?: string; //拖拽时阴影区域的颜色\n  };\n  //冻结列后面的效果\n  frozenColumnLine?: {\n    shadow?: {\n      //默认效果 会有阴影配置\n      width: number; //阴影整体宽度\n      startColor: string; //开始颜色\n      endColor: string; //结束颜色\n    };\n    /** TODO  暂未生效 */\n    border?: {\n      //有些需求要两种效果 这里配置滚动前的边框效果（实现方式是两条线叠加产生），滚动后按上面的阴影效果\n      lineColor: ColorPropertyDefine; //上面线的颜色\n      bgColor?: ColorPropertyDefine; //背景线的颜色\n      lineWidth: number; //上面线的宽度\n      width?: number; //背景线的宽度\n    };\n  };\n\n  // menuStyle?: menuStyle;\n  scrollStyle?: ScrollStyle;\n  tooltipStyle?: TooltipStyle;\n  // selectHeaderHighlight?: boolean;\n  /** 选择框样式 */\n  selectionStyle?: //Omit<InteractionStyle, 'inlineRowBgColor' | 'inlineColumnBgColor'>; //鼠标点击到某个单元格\n  {\n    cellBorderColor?: string; //边框颜色\n    cellBorderLineWidth?: number; //边框线宽度\n    cellBgColor?: string; //选择框背景颜色\n  };\n\n  // style for axis\n  axisStyle?: {\n    defaultAxisStyle?: Omit<ICellAxisOption, 'type' | 'domain' | 'range' | 'orient' | '__ticksForVTable'>;\n    leftAxisStyle?: Omit<ICellAxisOption, 'type' | 'domain' | 'range' | 'orient' | '__ticksForVTable'>;\n    rightAxisStyle?: Omit<ICellAxisOption, 'type' | 'domain' | 'range' | 'orient' | '__ticksForVTable'>;\n    topAxisStyle?: Omit<ICellAxisOption, 'type' | 'domain' | 'range' | 'orient' | '__ticksForVTable'>;\n    bottomAxisStyle?: Omit<ICellAxisOption, 'type' | 'domain' | 'range' | 'orient' | '__ticksForVTable'>;\n  };\n\n  // style for text pop tip\n  textPopTipStyle?: PopTipAttributes;\n}\n\nexport type RequiredTableThemeDefine = Required<ITableThemeDefine>;\n"]}
+{"version":3,"sources":["../src/ts-types/theme.ts"],"names":[],"mappings":"","file":"theme.js","sourcesContent":["/* eslint-disable sort-imports */\nimport type { ColorsDef, LineDashsDef, LineWidthsDef, LineWidthsPropertyDefine } from '.';\nimport type { ITextStyleOption } from './column/style';\nimport type { ColorPropertyDefine, ColorsPropertyDefine } from './style-define';\nimport type { ColumnIconOption } from './icon';\nimport type { ICellAxisOption } from './component/axis';\nimport type { PopTipAttributes } from '@visactor/vrender-components';\n// ****** Custom Theme *******\nexport type PartialTableThemeDefine = Partial<ITableThemeDefine>;\nexport type ThemeStyle = ITextStyleOption & {\n  hover?: Omit<InteractionStyle, 'cellBorderColor' | 'cellBorderLineWidth'>; //鼠标hover到某个单元格\n  // click?: Omit<InteractionStyle, 'inlineRowBgColor' | 'inlineColumnBgColor'>; //鼠标点击到某个单元格\n  frameStyle?: FrameStyle;\n};\nexport type InteractionStyle = {\n  cellBorderColor?: ColorsPropertyDefine; //交互所在单元格的边框颜色\n  cellBorderLineWidth?: LineWidthsPropertyDefine;\n  // cellBorderLineDash?:LineDashsPropertyDefine,//用到的场景应该不多\n  cellBgColor?: ColorPropertyDefine; //交互所在单元格的背景颜色\n  // inlineRowBorderColor?: ColorsPropertyDefine,//交互所在整行的边框颜色\n  inlineRowBgColor?: ColorPropertyDefine; //交互所在整行的背景颜色\n  // inlineColBorderColor?: ColorsPropertyDefine,//交互所在整列的边框颜色\n  inlineColumnBgColor?: ColorPropertyDefine; //交互所在整列的背景颜色\n  // headerHighlightBorderColor?:ColorPropertyDefine,//表头底部高亮线\n};\nexport type FrameStyle = {\n  borderColor?: ColorsDef;\n  borderLineWidth?: LineWidthsDef;\n  borderLineDash?: LineDashsDef;\n  innerBorder?: boolean;\n};\nexport type TableFrameStyle = FrameStyle & {\n  shadowBlur?: number; //阴影宽度\n  shadowOffsetX?: number; //x方向偏移\n  shadowOffsetY?: number; //Y方向偏移\n  shadowColor?: string; //阴影颜色\n  cornerRadius?: number; //边框圆角半径\n};\nexport type menuStyle = {\n  color?: string;\n  highlightColor?: string;\n  fontSize?: number;\n  fontFamily?: string;\n  highlightFontSize?: number;\n  highlightFontFamily?: string;\n  hoverBgColor?: string;\n};\nexport type ScrollStyle = {\n  /**滚动条滚动的颜色 */\n  scrollRailColor?: string;\n  /**滚动条滑块的颜色 */\n  scrollSliderColor?: string;\n  /**滚动条宽度大小 */\n  width?: number;\n  /**滚动条是否可见  'always' | 'scrolling' | 'none' | 'focus',常驻|滚动时|不显示|聚焦在画布上时 */\n  visible?: 'always' | 'scrolling' | 'none' | 'focus';\n  /*** 悬浮与容器上，还是独立于容器外 */\n  hoverOn?: boolean;\n};\n/**\n * 气泡框，按钮的的解释信息\n */\nexport type TooltipStyle = {\n  fontFamily?: string;\n  fontSize?: number;\n  color?: string;\n  padding?: number[];\n  bgColor?: string;\n  /** !目前未实现该逻辑。触发行为：hover or click */\n  // trigger?: string | string[];\n  /**气泡框位置，可选 top left right bottom */\n  // placement?: Placement;\n};\nexport interface ITableThemeDefine {\n  /** 表格绘制范围外的canvas上填充的颜色 */\n  underlayBackgroundColor?: string;\n  // selectionBgColor?: ColorPropertyDefine; //多选单元格背景色 手动设置的多选 非框选\n  defaultStyle?: ThemeStyle;\n  cornerHeaderStyle?: ThemeStyle; //角头样式\n  cornerRightTopCellStyle?: ThemeStyle; // 右上角占位单元格样式\n  cornerLeftBottomCellStyle?: ThemeStyle; // 左下角占位单元格样式\n  cornerRightBottomCellStyle?: ThemeStyle; // 右下角占位单元格样式\n  rightFrozenStyle?: ThemeStyle; // 右侧冻结单元格样式\n  bottomFrozenStyle?: ThemeStyle; // 下部冻结单元格样式\n  headerStyle?: ThemeStyle;\n  rowHeaderStyle?: ThemeStyle;\n  bodyStyle?: ThemeStyle;\n  frameStyle?: TableFrameStyle;\n  //列调整宽度的直线\n  columnResize?: {\n    lineColor: ColorPropertyDefine; //上面线的颜色\n    bgColor?: ColorPropertyDefine; //背景线的颜色\n    lineWidth: number; //上面线的宽度\n    width?: number; //背景线的宽度\n    labelColor?: string; //label的颜色\n    labelFontSize?: number; //label的字体大小\n    labelFontFamily?: string; //label的字体\n    labelBackgroundFill?: string; //label的背景填充\n    labelBackgroundCornerRadius?: number; //label的背景圆角\n  };\n  //拖拽表格换位分割线的样式\n  dragHeaderSplitLine?: {\n    lineColor: ColorPropertyDefine; //上面线的颜色\n    lineWidth: number; //上面线的宽度\n    shadowBlockColor?: string; //拖拽时阴影区域的颜色\n  };\n  //冻结列后面的效果\n  frozenColumnLine?: {\n    shadow?: {\n      //默认效果 会有阴影配置\n      width: number; //阴影整体宽度\n      startColor: string; //开始颜色\n      endColor: string; //结束颜色\n    };\n    /** TODO  暂未生效 */\n    border?: {\n      //有些需求要两种效果 这里配置滚动前的边框效果（实现方式是两条线叠加产生），滚动后按上面的阴影效果\n      lineColor: ColorPropertyDefine; //上面线的颜色\n      bgColor?: ColorPropertyDefine; //背景线的颜色\n      lineWidth: number; //上面线的宽度\n      width?: number; //背景线的宽度\n    };\n  };\n\n  // menuStyle?: menuStyle;\n  scrollStyle?: ScrollStyle;\n  tooltipStyle?: TooltipStyle;\n  // selectHeaderHighlight?: boolean;\n  /** 选择框样式 */\n  selectionStyle?: //Omit<InteractionStyle, 'inlineRowBgColor' | 'inlineColumnBgColor'>; //鼠标点击到某个单元格\n  {\n    cellBorderColor?: string; //边框颜色\n    cellBorderLineWidth?: number; //边框线宽度\n    cellBgColor?: string; //选择框背景颜色\n  };\n\n  // style for axis\n  axisStyle?: {\n    defaultAxisStyle?: Omit<ICellAxisOption, 'type' | 'domain' | 'range' | 'orient' | '__ticksForVTable'>;\n    leftAxisStyle?: Omit<ICellAxisOption, 'type' | 'domain' | 'range' | 'orient' | '__ticksForVTable'>;\n    rightAxisStyle?: Omit<ICellAxisOption, 'type' | 'domain' | 'range' | 'orient' | '__ticksForVTable'>;\n    topAxisStyle?: Omit<ICellAxisOption, 'type' | 'domain' | 'range' | 'orient' | '__ticksForVTable'>;\n    bottomAxisStyle?: Omit<ICellAxisOption, 'type' | 'domain' | 'range' | 'orient' | '__ticksForVTable'>;\n  };\n\n  // style for text pop tip\n  textPopTipStyle?: PopTipAttributes;\n\n  // senior config for fs\n  // 四边单元格，靠近边框的border是否显示；配置false的话，左侧单元格不显示左边框，同理\n  cellInnerBorder?: boolean;\n  // cell border clip direction\n  cellBorderClipDirection?: 'top-left' | 'bottom-right'; // default is 'top-left'\n  // text offset, hack for fs\n  _contentOffset?: number;\n}\n\nexport type RequiredTableThemeDefine = Required<ITableThemeDefine>;\n"]}

package/cjs/vrender.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/vrender.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAA8F;AAC9F,yDAAqE;AACrE,yDAmBgC;AAIhC,IAAI,QAAQ,GAAG,KAAK,CAAC;AACrB,SAAgB,kBAAkB;IAChC,IAAI,QAAQ,EAAE;QACZ,OAAO;KACR;IACD,QAAQ,GAAG,IAAI,CAAC;IAEhB,IAAA,+BAAgB,GAAE,CAAC;IAEnB,IAAI,IAAA,2BAAY,GAAE,EAAE;QAClB,IAAA,6BAAc,EAAC,wBAAS,CAAC,CAAC;KAC3B;SAAM,IAAI,IAAA,wBAAS,GAAE,EAAE;QACtB,IAAA,0BAAW,EAAC,wBAAS,CAAC,CAAC;KACxB;IACD,IAAA,0BAAW,GAAE,CAAC;IACd,IAAA,4BAAa,GAAE,CAAC;IAChB,IAAA,2BAAY,GAAE,CAAC;IACf,IAAA,6BAAc,GAAE,CAAC;IACjB,IAAA,4BAAa,GAAE,CAAC;IAChB,IAAA,4BAAa,GAAE,CAAC;IAChB,IAAA,4BAAa,GAAE,CAAC;IAChB,IAAA,2BAAY,GAAE,CAAC;IACf,IAAA,2BAAY,GAAE,CAAC;IACf,IAAA,8BAAe,GAAE,CAAC;IAClB,IAAA,gCAAiB,GAAE,CAAC;IACpB,IAAA,2BAAY,GAAE,CAAC;IACf,IAAA,6BAAc,GAAE,CAAC;IACjB,IAAA,+BAAgB,GAAE,CAAC;IACnB,IAAA,iCAAkB,GAAE,CAAC;IACrB,IAAA,6BAAc,GAAE,CAAC;IACjB,IAAA,2BAAY,GAAE,CAAC;IACf,IAAA,+BAAgB,GAAE,CAAC;AACrB,CAAC;AA/BD,gDA+BC;AAED,yDAAuC;AACvC,yDAAuC","file":"vrender.js","sourcesContent":["import '@visactor/vrender-core';\nimport { container, isBrowserEnv, isNodeEnv, preLoadAllModule } from '@visactor/vrender-core';\nimport { loadBrowserEnv, loadNodeEnv } from '@visactor/vrender-kits';\nimport {\n  registerArc,\n  registerArc3d,\n  registerArea,\n  registerCircle,\n  registerGlyph,\n  registerGroup,\n  registerImage,\n  registerLine,\n  registerPath,\n  registerPolygon,\n  registerPyramid3d,\n  registerRect,\n  registerRect3d,\n  registerRichtext,\n  registerShadowRoot,\n  registerSymbol,\n  registerText,\n  registerWrapText\n} from '@visactor/vrender-kits';\n// 导出版本号\n// export const version = \"0.20.1\";\n\nlet registed = false;\nexport function registerForVrender() {\n  if (registed) {\n    return;\n  }\n  registed = true;\n  // 注册内置组件\n  preLoadAllModule();\n\n  if (isBrowserEnv()) {\n    loadBrowserEnv(container);\n  } else if (isNodeEnv()) {\n    loadNodeEnv(container);\n  }\n  registerArc();\n  registerArc3d();\n  registerArea();\n  registerCircle();\n  registerGlyph();\n  registerGroup();\n  registerImage();\n  registerLine();\n  registerPath();\n  registerPolygon();\n  registerPyramid3d();\n  registerRect();\n  registerRect3d();\n  registerRichtext();\n  registerShadowRoot();\n  registerSymbol();\n  registerText();\n  registerWrapText();\n}\n\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\n"]}
+{"version":3,"sources":["../src/vrender.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAA8F;AAC9F,yDAAqE;AACrE,yDAmBgC;AAIhC,IAAI,QAAQ,GAAG,KAAK,CAAC;AACrB,SAAgB,kBAAkB;IAChC,IAAI,QAAQ,EAAE;QACZ,OAAO;KACR;IACD,QAAQ,GAAG,IAAI,CAAC;IAEhB,IAAA,+BAAgB,GAAE,CAAC;IAEnB,IAAI,IAAA,2BAAY,GAAE,EAAE;QAClB,IAAA,6BAAc,EAAC,wBAAS,CAAC,CAAC;KAC3B;SAAM,IAAI,IAAA,wBAAS,GAAE,EAAE;QACtB,IAAA,0BAAW,EAAC,wBAAS,CAAC,CAAC;KACxB;IACD,IAAA,0BAAW,GAAE,CAAC;IACd,IAAA,4BAAa,GAAE,CAAC;IAChB,IAAA,2BAAY,GAAE,CAAC;IACf,IAAA,6BAAc,GAAE,CAAC;IACjB,IAAA,4BAAa,GAAE,CAAC;IAChB,IAAA,4BAAa,GAAE,CAAC;IAChB,IAAA,4BAAa,GAAE,CAAC;IAChB,IAAA,2BAAY,GAAE,CAAC;IACf,IAAA,2BAAY,GAAE,CAAC;IACf,IAAA,8BAAe,GAAE,CAAC;IAClB,IAAA,gCAAiB,GAAE,CAAC;IACpB,IAAA,2BAAY,GAAE,CAAC;IACf,IAAA,6BAAc,GAAE,CAAC;IACjB,IAAA,+BAAgB,GAAE,CAAC;IACnB,IAAA,iCAAkB,GAAE,CAAC;IACrB,IAAA,6BAAc,GAAE,CAAC;IACjB,IAAA,2BAAY,GAAE,CAAC;IACf,IAAA,+BAAgB,GAAE,CAAC;AACrB,CAAC;AA/BD,gDA+BC;AAED,yDAAuC;AACvC,yDAAuC","file":"vrender.js","sourcesContent":["import '@visactor/vrender-core';\nimport { container, isBrowserEnv, isNodeEnv, preLoadAllModule } from '@visactor/vrender-core';\nimport { loadBrowserEnv, loadNodeEnv } from '@visactor/vrender-kits';\nimport {\n  registerArc,\n  registerArc3d,\n  registerArea,\n  registerCircle,\n  registerGlyph,\n  registerGroup,\n  registerImage,\n  registerLine,\n  registerPath,\n  registerPolygon,\n  registerPyramid3d,\n  registerRect,\n  registerRect3d,\n  registerRichtext,\n  registerShadowRoot,\n  registerSymbol,\n  registerText,\n  registerWrapText\n} from '@visactor/vrender-kits';\n// 导出版本号\n// export const version = \"0.20.2-alpha.3\";\n\nlet registed = false;\nexport function registerForVrender() {\n  if (registed) {\n    return;\n  }\n  registed = true;\n  // 注册内置组件\n  preLoadAllModule();\n\n  if (isBrowserEnv()) {\n    loadBrowserEnv(container);\n  } else if (isNodeEnv()) {\n    loadNodeEnv(container);\n  }\n  registerArc();\n  registerArc3d();\n  registerArea();\n  registerCircle();\n  registerGlyph();\n  registerGroup();\n  registerImage();\n  registerLine();\n  registerPath();\n  registerPolygon();\n  registerPyramid3d();\n  registerRect();\n  registerRect3d();\n  registerRichtext();\n  registerShadowRoot();\n  registerSymbol();\n  registerText();\n  registerWrapText();\n}\n\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\n"]}

package/dist/vtable.js

@@ -23773,6 +23773,18 @@
             const { obj, superTheme } = this.internalTheme;
             return getProp$1(obj, superTheme, ['underlayBackgroundColor']);
         }
+        get cellInnerBorder() {
+            const { obj, superTheme } = this.internalTheme;
+            return !!getProp$1(obj, superTheme, ['cellInnerBorder']);
+        }
+        get cellBorderClipDirection() {
+            const { obj, superTheme } = this.internalTheme;
+            return getProp$1(obj, superTheme, ['cellBorderClipDirection']) ?? 'top-left';
+        }
+        get _contentOffset() {
+            const { obj, superTheme } = this.internalTheme;
+            return getProp$1(obj, superTheme, ['_contentOffset']) ?? 0;
+        }
         get defaultStyle() {
             if (!this._defaultStyle) {
                 const { obj, superTheme } = this.internalTheme;
@@ -33920,6 +33932,50 @@
         return undefined;
     }
 
+    function getCellBorderStrokeWidth(col, row, cellTheme, table) {
+        let strokeArrayWidth = cellTheme?.group?.strokeArrayWidth ?? undefined;
+        if (!table.theme.cellInnerBorder) {
+            return strokeArrayWidth;
+        }
+        if (col === 0) {
+            strokeArrayWidth = strokeArrayWidth ?? [
+                cellTheme?.group?.lineWidth,
+                cellTheme?.group?.lineWidth,
+                cellTheme?.group?.lineWidth,
+                cellTheme?.group?.lineWidth
+            ];
+            strokeArrayWidth[3] = 0;
+        }
+        if (col === table.colCount - 1) {
+            strokeArrayWidth = strokeArrayWidth ?? [
+                cellTheme?.group?.lineWidth,
+                cellTheme?.group?.lineWidth,
+                cellTheme?.group?.lineWidth,
+                cellTheme?.group?.lineWidth
+            ];
+            strokeArrayWidth[1] = 0;
+        }
+        if (row === 0) {
+            strokeArrayWidth = strokeArrayWidth ?? [
+                cellTheme?.group?.lineWidth,
+                cellTheme?.group?.lineWidth,
+                cellTheme?.group?.lineWidth,
+                cellTheme?.group?.lineWidth
+            ];
+            strokeArrayWidth[0] = 0;
+        }
+        if (row === table.rowCount - 1) {
+            strokeArrayWidth = strokeArrayWidth ?? [
+                cellTheme?.group?.lineWidth,
+                cellTheme?.group?.lineWidth,
+                cellTheme?.group?.lineWidth,
+                cellTheme?.group?.lineWidth
+            ];
+            strokeArrayWidth[2] = 0;
+        }
+        return strokeArrayWidth;
+    }
+
     function createImageCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, table, cellTheme) {
         const headerStyle = table._getCellStyle(col, row);
         const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
@@ -33932,6 +33988,7 @@
         if (cellTheme?.text?.textBaseline) {
             textBaseline = cellTheme?.text?.textBaseline;
         }
+        const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
         const cellGroup = new Group$1({
             x: xOrigin,
             y: yOrigin,
@@ -33940,7 +33997,7 @@
             lineWidth: cellTheme?.group?.lineWidth ?? undefined,
             fill: cellTheme?.group?.fill ?? undefined,
             stroke: cellTheme?.group?.stroke ?? undefined,
-            strokeArrayWidth: cellTheme?.group?.strokeArrayWidth ?? undefined,
+            strokeArrayWidth: strokeArrayWidth ?? undefined,
             strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
             cursor: cellTheme?.group?.cursor ?? undefined,
             lineDash: cellTheme?.group?.lineDash ?? undefined,
@@ -34585,6 +34642,7 @@
     const yScale = new LinearScale();
     function createSparkLineCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, width, height, padding, table, cellTheme) {
         if (!cellGroup) {
+            const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
             cellGroup = new Group$1({
                 x: xOrigin,
                 y: yOrigin,
@@ -34593,7 +34651,7 @@
                 lineWidth: cellTheme?.group?.lineWidth ?? undefined,
                 fill: cellTheme?.group?.fill ?? undefined,
                 stroke: cellTheme?.group?.stroke ?? undefined,
-                strokeArrayWidth: cellTheme?.group?.strokeArrayWidth ?? undefined,
+                strokeArrayWidth: strokeArrayWidth,
                 strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
                 cursor: cellTheme?.group?.cursor ?? undefined,
                 lineDash: cellTheme?.group?.lineDash ?? undefined,
@@ -34968,6 +35026,7 @@
             padding = functionalPadding;
         }
         if (!cellGroup) {
+            const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
             cellGroup = new Group$1({
                 x: xOrigin,
                 y: yOrigin,
@@ -34976,7 +35035,7 @@
                 lineWidth: cellTheme?.group?.lineWidth ?? undefined,
                 fill: cellTheme?.group?.fill ?? undefined,
                 stroke: cellTheme?.group?.stroke ?? undefined,
-                strokeArrayWidth: cellTheme?.group?.strokeArrayWidth ?? undefined,
+                strokeArrayWidth: strokeArrayWidth,
                 strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
                 cursor: cellTheme?.group?.cursor ?? undefined,
                 lineDash: cellTheme?.group?.lineDash ?? undefined,
@@ -35228,6 +35287,15 @@
                 const hierarchyOffset = range
                     ? getHierarchyOffset(range.start.col, range.start.row, table)
                     : getHierarchyOffset(cellGroup.col, cellGroup.row, table);
+                let _contentOffset = 0;
+                if (isNumber$2(table.theme._contentOffset)) {
+                    if (textAlign === 'left') {
+                        _contentOffset = table.theme._contentOffset;
+                    }
+                    else if (textAlign === 'right') {
+                        _contentOffset = -table.theme._contentOffset;
+                    }
+                }
                 const attribute = {
                     text: text.length === 1 ? text[0] : text,
                     maxLineWidth: autoColWidth ? Infinity : cellWidth - (padding[1] + padding[3] + hierarchyOffset),
@@ -35237,7 +35305,7 @@
                     wordBreak: 'break-word',
                     heightLimit: autoRowHeight ? -1 : cellHeight - (padding[0] + padding[2]),
                     pickable: false,
-                    dx: hierarchyOffset,
+                    dx: hierarchyOffset + _contentOffset,
                     whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
                 };
                 const wrapText = new Text$1(cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute);
@@ -35313,6 +35381,15 @@
             });
             let textMark;
             if (inlineFrontIcons.length === 0 && inlineEndIcons.length === 0) {
+                let _contentOffset = 0;
+                if (isNumber$2(table.theme._contentOffset)) {
+                    if (textAlign === 'left') {
+                        _contentOffset = table.theme._contentOffset;
+                    }
+                    else if (textAlign === 'right') {
+                        _contentOffset = -table.theme._contentOffset;
+                    }
+                }
                 const text = convertInternal(textStr).replace(/\r?\n/g, '\n').replace(/\r/g, '\n').split('\n');
                 const attribute = {
                     text: text.length === 1 ? text[0] : text,
@@ -35323,7 +35400,8 @@
                     autoWrapText,
                     lineClamp,
                     wordBreak: 'break-word',
-                    whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
+                    whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal',
+                    dx: _contentOffset
                 };
                 const wrapText = new Text$1(cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute);
                 wrapText.name = 'text';
@@ -35699,6 +35777,7 @@
         const autoColWidth = colWidth === 'auto';
         const autoWrapText = headerStyle.autoWrapText ?? table.internalProps.autoWrapText;
         const lineClamp = headerStyle.lineClamp;
+        const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
         const cellGroup = new Group$1({
             x: xOrigin,
             y: yOrigin,
@@ -35707,7 +35786,7 @@
             lineWidth: cellTheme?.group?.lineWidth ?? undefined,
             fill: cellTheme?.group?.fill ?? undefined,
             stroke: cellTheme?.group?.stroke ?? undefined,
-            strokeArrayWidth: cellTheme?.group?.strokeArrayWidth ?? undefined,
+            strokeArrayWidth: strokeArrayWidth ?? undefined,
             strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
             cursor: cellTheme?.group?.cursor ?? undefined,
             lineDash: cellTheme?.group?.lineDash ?? undefined,
@@ -35771,6 +35850,7 @@
         if (cellTheme?.text?.textBaseline) {
             textBaseline = cellTheme?.text?.textBaseline;
         }
+        const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
         const cellGroup = new Group$1({
             x: xOrigin,
             y: yOrigin,
@@ -35779,7 +35859,7 @@
             lineWidth: cellTheme?.group?.lineWidth ?? undefined,
             fill: cellTheme?.group?.fill ?? undefined,
             stroke: cellTheme?.group?.stroke ?? undefined,
-            strokeArrayWidth: cellTheme?.group?.strokeArrayWidth ?? undefined,
+            strokeArrayWidth: strokeArrayWidth,
             strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
             cursor: cellTheme?.group?.cursor ?? undefined,
             lineDash: cellTheme?.group?.lineDash ?? undefined,
@@ -35864,6 +35944,7 @@
 
     function createCheckboxCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, colWidth, width, height, padding, textAlign, textBaseline, table, cellTheme, define) {
         if (!cellGroup) {
+            const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
             cellGroup = new Group$1({
                 x: xOrigin,
                 y: yOrigin,
@@ -35872,7 +35953,7 @@
                 lineWidth: cellTheme?.group?.lineWidth ?? undefined,
                 fill: cellTheme?.group?.fill ?? undefined,
                 stroke: cellTheme?.group?.stroke ?? undefined,
-                strokeArrayWidth: cellTheme?.group?.strokeArrayWidth ?? undefined,
+                strokeArrayWidth: strokeArrayWidth,
                 strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
                 cursor: cellTheme?.group?.cursor ?? undefined,
                 lineDash: cellTheme?.group?.lineDash ?? undefined,
@@ -40036,9 +40117,29 @@
             if (Array.isArray(strokeArrayColor) || Array.isArray(strokeArrayWidth)) {
                 if ((typeof lineWidth === 'number' && lineWidth & 1) ||
                     (Array.isArray(strokeArrayWidth) && strokeArrayWidth.some(width => width & 1))) {
-                    x = Math.floor(x) + 0.5;
-                    y = Math.floor(y) + 0.5;
-                    const { width: widthFroDraw, height: heightFroDraw } = getCellSizeForDraw(group, Math.ceil(width), Math.ceil(height));
+                    const table = group.stage.table;
+                    const bottomRight = table.theme.cellBorderClipDirection === 'bottom-right';
+                    let deltaWidth = 0;
+                    let deltaHeight = 0;
+                    if (bottomRight) {
+                        x = Math.floor(x) - 0.5;
+                        y = Math.floor(y) - 0.5;
+                        if (group.role === 'cell') {
+                            const col = group.col;
+                            const row = group.row;
+                            if (table && col === table.colCount - 1) {
+                                deltaWidth = 1;
+                            }
+                            if (table && row === table.rowCount - 1) {
+                                deltaHeight = 1;
+                            }
+                        }
+                    }
+                    else {
+                        x = Math.floor(x) + 0.5;
+                        y = Math.floor(y) + 0.5;
+                    }
+                    const { width: widthFroDraw, height: heightFroDraw } = getCellSizeForDraw(group, Math.ceil(width + deltaWidth), Math.ceil(height + deltaHeight));
                     widthForStroke = widthFroDraw;
                     heightForStroke = heightFroDraw;
                 }
@@ -40252,9 +40353,29 @@
             let widthForStroke;
             let heightForStroke;
             if (lineWidth & 1) {
-                x = Math.floor(x) + 0.5;
-                y = Math.floor(y) + 0.5;
-                const { width: widthFroDraw, height: heightFroDraw } = getCellSizeForDraw(group, Math.ceil(width), Math.ceil(height));
+                const table = group.stage.table;
+                const bottomRight = table.theme.cellBorderClipDirection === 'bottom-right';
+                let deltaWidth = 0;
+                let deltaHeight = 0;
+                if (bottomRight) {
+                    x = Math.floor(x) - 0.5;
+                    y = Math.floor(y) - 0.5;
+                    if (group.role === 'cell') {
+                        const col = group.col;
+                        const row = group.row;
+                        if (table && col === table.colCount - 1) {
+                            deltaWidth = 1;
+                        }
+                        if (table && row === table.rowCount - 1) {
+                            deltaHeight = 1;
+                        }
+                    }
+                }
+                else {
+                    x = Math.floor(x) + 0.5;
+                    y = Math.floor(y) + 0.5;
+                }
+                const { width: widthFroDraw, height: heightFroDraw } = getCellSizeForDraw(group, Math.ceil(width + deltaWidth), Math.ceil(height + deltaHeight));
                 widthForStroke = widthFroDraw;
                 heightForStroke = heightFroDraw;
             }
@@ -40324,10 +40445,30 @@
                 lineWidth & 1) {
                 const { width: widthFroDraw, height: heightFroDraw } = getCellSizeForDraw(group, Math.ceil(width), Math.ceil(height));
                 context.beginPath();
-                x = Math.floor(x) + 0.5;
-                y = Math.floor(y) + 0.5;
+                const table = group.stage.table;
+                const bottomRight = table.theme.cellBorderClipDirection === 'bottom-right';
+                let deltaWidth = 0;
+                let deltaHeight = 0;
+                if (bottomRight) {
+                    x = Math.floor(x) - 0.5;
+                    y = Math.floor(y) - 0.5;
+                    if (group.role === 'cell') {
+                        const col = group.col;
+                        const row = group.row;
+                        if (table && col === table.colCount - 1) {
+                            deltaWidth = 1;
+                        }
+                        if (table && row === table.rowCount - 1) {
+                            deltaHeight = 1;
+                        }
+                    }
+                }
+                else {
+                    x = Math.floor(x) + 0.5;
+                    y = Math.floor(y) + 0.5;
+                }
                 if (cornerRadius) {
-                    createRectPath(context, x, y, widthFroDraw, heightFroDraw, cornerRadius);
+                    createRectPath(context, x, y, widthFroDraw + deltaWidth, heightFroDraw + deltaHeight, cornerRadius);
                 }
                 else {
                     context.rect(x, y, widthFroDraw, heightFroDraw);
@@ -40532,14 +40673,24 @@
                 return;
             }
             if (Array.isArray(stroke) || Array.isArray(strokeArrayColor) || Array.isArray(strokeArrayWidth)) {
-                if (rect.name !== 'border-rect' &&
-                    rect.name !== 'table-border-rect' &&
-                    ((typeof lineWidth === 'number' && lineWidth & 1) ||
-                        (Array.isArray(strokeArrayWidth) && strokeArrayWidth.some(width => width & 1)))) {
-                    x = Math.floor(x) + 0.5;
-                    y = Math.floor(y) + 0.5;
+                let deltaWidth = 0;
+                let deltaHeight = 0;
+                if ((typeof lineWidth === 'number' && lineWidth & 1) ||
+                    (Array.isArray(strokeArrayWidth) && strokeArrayWidth.some(width => width & 1))) {
+                    const table = rect.stage.table;
+                    const bottomRight = table.theme.cellBorderClipDirection === 'bottom-right';
+                    if (bottomRight) {
+                        x = Math.floor(x) - 0.5;
+                        y = Math.floor(y) - 0.5;
+                        deltaWidth = 0.5;
+                        deltaHeight = 0.5;
+                    }
+                    else {
+                        x = Math.floor(x) + 0.5;
+                        y = Math.floor(y) + 0.5;
+                    }
                 }
-                renderStroke(rect, context, x, y, rectAttribute, stroke, strokeArrayWidth || lineWidth, strokeArrayColor || strokeColor, Math.ceil(width), Math.ceil(height));
+                renderStroke(rect, context, x, y, rectAttribute, stroke, strokeArrayWidth || lineWidth, strokeArrayColor || strokeColor, Math.ceil(width + deltaWidth), Math.ceil(height + deltaHeight));
             }
         }
     };
@@ -52458,7 +52609,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.20.1";
+        version = "0.20.2-alpha.3";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -63959,7 +64110,7 @@
     }
 
     registerForVrender();
-    const version = "0.20.1";
+    const version = "0.20.2-alpha.3";
     function getIcons() {
         return get$2();
     }