@stonecrop/atable 0.3.1 → 0.3.3

package/dist/src/stores/table.d.ts

@@ -27,9 +27,9 @@ export declare const createTableStore: (initData: {
         pinned?: boolean;
         cellComponent?: string;
         cellComponentProps?: Record<string, any>;
-        modalComponent?: string | ((context?: CellContext) => string);
+        modalComponent?: string | ((context: CellContext) => string);
         modalComponentExtraProps?: Record<string, any>;
-        format?: string | ((value: any, context?: CellContext) => string);
+        format?: string | ((value: any, context: CellContext) => string);
         mask?: (value: any) => any;
     }[], TableColumn[] | {
         name: string;
@@ -41,9 +41,9 @@ export declare const createTableStore: (initData: {
         pinned?: boolean;
         cellComponent?: string;
         cellComponentProps?: Record<string, any>;
-        modalComponent?: string | ((context?: CellContext) => string);
+        modalComponent?: string | ((context: CellContext) => string);
         modalComponentExtraProps?: Record<string, any>;
-        format?: string | ((value: any, context?: CellContext) => string);
+        format?: string | ((value: any, context: CellContext) => string);
         mask?: (value: any) => any;
     }[]>;
     rows: import("vue").Ref<{
@@ -85,23 +85,25 @@ export declare const createTableStore: (initData: {
     modal: import("vue").Ref<{
         colIndex?: number;
         event?: string;
+        height?: number;
         left?: number;
         parent?: HTMLElement;
         rowIndex?: number;
         top?: number;
         visible?: boolean;
-        width?: string;
+        width?: number;
         component?: string;
         componentProps?: Record<string, any>;
     }, TableModal | {
         colIndex?: number;
         event?: string;
+        height?: number;
         left?: number;
         parent?: HTMLElement;
         rowIndex?: number;
         top?: number;
         visible?: boolean;
-        width?: string;
+        width?: number;
         component?: string;
         componentProps?: Record<string, any>;
     }>;
@@ -129,9 +131,9 @@ export declare const createTableStore: (initData: {
         pinned?: boolean;
         cellComponent?: string;
         cellComponentProps?: Record<string, any>;
-        modalComponent?: string | ((context?: CellContext) => string);
+        modalComponent?: string | ((context: CellContext) => string);
         modalComponentExtraProps?: Record<string, any>;
-        format?: string | ((value: any, context?: CellContext) => string);
+        format?: string | ((value: any, context: CellContext) => string);
         mask?: (value: any) => any;
     }[], TableColumn[] | {
         name: string;
@@ -143,9 +145,9 @@ export declare const createTableStore: (initData: {
         pinned?: boolean;
         cellComponent?: string;
         cellComponentProps?: Record<string, any>;
-        modalComponent?: string | ((context?: CellContext) => string);
+        modalComponent?: string | ((context: CellContext) => string);
         modalComponentExtraProps?: Record<string, any>;
-        format?: string | ((value: any, context?: CellContext) => string);
+        format?: string | ((value: any, context: CellContext) => string);
         mask?: (value: any) => any;
     }[]>;
     rows: import("vue").Ref<{
@@ -187,23 +189,25 @@ export declare const createTableStore: (initData: {
     modal: import("vue").Ref<{
         colIndex?: number;
         event?: string;
+        height?: number;
         left?: number;
         parent?: HTMLElement;
         rowIndex?: number;
         top?: number;
         visible?: boolean;
-        width?: string;
+        width?: number;
         component?: string;
         componentProps?: Record<string, any>;
     }, TableModal | {
         colIndex?: number;
         event?: string;
+        height?: number;
         left?: number;
         parent?: HTMLElement;
         rowIndex?: number;
         top?: number;
         visible?: boolean;
-        width?: string;
+        width?: number;
         component?: string;
         componentProps?: Record<string, any>;
     }>;
@@ -231,9 +235,9 @@ export declare const createTableStore: (initData: {
         pinned?: boolean;
         cellComponent?: string;
         cellComponentProps?: Record<string, any>;
-        modalComponent?: string | ((context?: CellContext) => string);
+        modalComponent?: string | ((context: CellContext) => string);
         modalComponentExtraProps?: Record<string, any>;
-        format?: string | ((value: any, context?: CellContext) => string);
+        format?: string | ((value: any, context: CellContext) => string);
         mask?: (value: any) => any;
     }[], TableColumn[] | {
         name: string;
@@ -245,9 +249,9 @@ export declare const createTableStore: (initData: {
         pinned?: boolean;
         cellComponent?: string;
         cellComponentProps?: Record<string, any>;
-        modalComponent?: string | ((context?: CellContext) => string);
+        modalComponent?: string | ((context: CellContext) => string);
         modalComponentExtraProps?: Record<string, any>;
-        format?: string | ((value: any, context?: CellContext) => string);
+        format?: string | ((value: any, context: CellContext) => string);
         mask?: (value: any) => any;
     }[]>;
     rows: import("vue").Ref<{
@@ -289,23 +293,25 @@ export declare const createTableStore: (initData: {
     modal: import("vue").Ref<{
         colIndex?: number;
         event?: string;
+        height?: number;
         left?: number;
         parent?: HTMLElement;
         rowIndex?: number;
         top?: number;
         visible?: boolean;
-        width?: string;
+        width?: number;
         component?: string;
         componentProps?: Record<string, any>;
     }, TableModal | {
         colIndex?: number;
         event?: string;
+        height?: number;
         left?: number;
         parent?: HTMLElement;
         rowIndex?: number;
         top?: number;
         visible?: boolean;
-        width?: string;
+        width?: number;
         component?: string;
         componentProps?: Record<string, any>;
     }>;

package/dist/src/stores/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/stores/table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,KAAK,CAAA;AAEvD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAEzG;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,aAAc;IAC1C,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IAC9B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,KAAK,CAAC,EAAE,UAAU,CAAA;CAClB;;;;;;;;;;;2CAXiB,CAAA;;+CAKF,CAAC;;;;;;;;;;;;2CALC,CAAA;;+CAKF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyJY,UAAU;kBA7EhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCAmD7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BAlBP,MAAM,YAAY,MAAM,SAAS,GAAG;gCAkChC,MAAM;;;;;;;;;;;;2CApHzB,CAAA;;+CAKF,CAAC;;;;;;;;;;;;2CALC,CAAA;;+CAKF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyJY,UAAU;kBA7EhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCAmD7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BAlBP,MAAM,YAAY,MAAM,SAAS,GAAG;gCAkChC,MAAM;;;;;;;;;;;;2CApHzB,CAAA;;+CAKF,CAAC;;;;;;;;;;;;2CALC,CAAA;;+CAKF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyJY,UAAU;kBA7EhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCAmD7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BAlBP,MAAM,YAAY,MAAM,SAAS,GAAG;gCAkChC,MAAM;gMAyF1C,CAAA"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/stores/table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,KAAK,CAAA;AAEvD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAEzG;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,aAAc;IAC1C,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IAC9B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,KAAK,CAAC,EAAE,UAAU,CAAA;CAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAmJ4B,UAAU;kBA7EhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCAmD7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BAlBP,MAAM,YAAY,MAAM,SAAS,GAAG;gCAkChC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0Cd,UAAU;kBA7EhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCAmD7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BAlBP,MAAM,YAAY,MAAM,SAAS,GAAG;gCAkChC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0Cd,UAAU;kBA7EhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCAmD7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BAlBP,MAAM,YAAY,MAAM,SAAS,GAAG;gCAkChC,MAAM;gMAyF1C,CAAA"}

package/dist/src/types/index.d.ts

@@ -12,9 +12,23 @@ export type TableColumn = {
     pinned?: boolean;
     cellComponent?: string;
     cellComponentProps?: Record<string, any>;
-    modalComponent?: string | ((context?: CellContext) => string);
+    /**
+     * The component to use for the modal. If a function is provided, it will be called with the cell context.
+     * The following properties are available on the cell context:
+     * - `row` - the row object
+     * - `column` - the column object
+     * - `table` - the table object
+     *
+     * The function should return the name of the component to use for the modal.
+     *
+     * Additionally, the following properties will be automatically passed to the modal component:
+     * - `colIndex` - the column index of the current cell
+     * - `rowIndex` - the row index of the current cell
+     * - `store` - the table data store
+     */
+    modalComponent?: string | ((context: CellContext) => string);
     modalComponentExtraProps?: Record<string, any>;
-    format?: string | ((value: any, context?: CellContext) => string);
+    format?: string | ((value: any, context: CellContext) => string);
     mask?: (value: any) => any;
 };
 /**
@@ -73,12 +87,13 @@ export type TableRow = {
 export type TableModal = {
     colIndex?: number;
     event?: string;
+    height?: number;
     left?: number;
     parent?: HTMLElement;
     rowIndex?: number;
     top?: number;
     visible?: boolean;
-    width?: string;
+    width?: number;
     component?: string;
     componentProps?: Record<string, any>;
 };

package/dist/src/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IAEZ,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,WAAW,KAAK,MAAM,CAAC,CAAA;IAC7D,wBAAwB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAE9C,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,WAAW,KAAK,MAAM,CAAC,CAAA;IACjE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAA;CAC1B,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB,GAAG,EAAE,QAAQ,CAAA;IACb,MAAM,EAAE,WAAW,CAAA;IACnB,KAAK,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CAC7B,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,gBAAgB,GAAG,MAAM,CAAA;IACvD,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IAEZ,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACxC;;;;;;;;;;;;;OAaG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,CAAC,CAAA;IAC5D,wBAAwB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAE9C,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,KAAK,MAAM,CAAC,CAAA;IAChE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAA;CAC1B,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB,GAAG,EAAE,QAAQ,CAAA;IACb,MAAM,EAAE,WAAW,CAAA;IACnB,KAAK,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CAC7B,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,gBAAgB,GAAG,MAAM,CAAA;IACvD,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACpC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -38,8 +38,8 @@
     "@vueuse/core": "^12.0.0",
     "pinia": "^2.3.0",
     "vue": "^3.5.11",
-    "@stonecrop/themes": "0.3.1",
-    "@stonecrop/utilities": "0.3.1"
+    "@stonecrop/themes": "0.3.3",
+    "@stonecrop/utilities": "0.3.3"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.26.2",

package/src/components/ACell.vue

@@ -28,7 +28,7 @@
 <script setup lang="ts">
 import { KeypressHandlers, defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
 import { useElementBounding } from '@vueuse/core'
-import { computed, CSSProperties, ref, useTemplateRef } from 'vue'
+import { computed, CSSProperties, ref, useTemplateRef, watch } from 'vue'
 
 import { createTableStore } from '../stores/table'
 import { isHtmlString } from '../utils'
@@ -49,11 +49,11 @@ const {
 }>()
 
 const cellRef = useTemplateRef<HTMLTableCellElement>('cell')
-const { bottom, left } = useElementBounding(cellRef)
+const { width, height } = useElementBounding(cellRef)
 
 // keep a shallow copy of the original cell value for comparison
 const originalData = store.getCellData(colIndex, rowIndex)
-const displayValue = store.getCellDisplayValue(colIndex, rowIndex)
+const displayValue = ref(store.getCellDisplayValue(colIndex, rowIndex))
 const currentData = ref('')
 const cellModified = ref(false)
 
@@ -63,9 +63,16 @@ const row = store.rows[rowIndex]
 const textAlign = column.align || 'center'
 const cellWidth = column.width || '40ch'
 
+watch(
+	() => store.getCellData(colIndex, rowIndex),
+	cellData => {
+		displayValue.value = store.getFormattedValue(colIndex, rowIndex, cellData)
+	}
+)
+
 const isHtmlValue = computed(() => {
 	// TODO: check if display value is a native DOM element
-	return typeof displayValue === 'string' ? isHtmlString(displayValue) : false
+	return typeof displayValue.value === 'string' ? isHtmlString(displayValue.value) : false
 })
 
 const cellStyle = computed((): CSSProperties => {
@@ -90,9 +97,10 @@ const showModal = () => {
 			state.modal.colIndex = colIndex
 			state.modal.rowIndex = rowIndex
 			state.modal.parent = cellRef.value
-			state.modal.top = bottom.value
-			state.modal.left = left.value
-			state.modal.width = cellWidth
+			state.modal.top = cellRef.value.offsetTop + cellRef.value.offsetHeight
+			state.modal.left = cellRef.value.offsetLeft
+			state.modal.width = width.value
+			state.modal.height = height.value
 
 			if (typeof column.modalComponent === 'function') {
 				state.modal.component = column.modalComponent({ table: state.table, row, column })

package/src/components/ATable.vue

@@ -37,11 +37,7 @@
 				:colIndex="store.modal.colIndex"
 				:rowIndex="store.modal.rowIndex"
 				:store="store"
-				:style="{
-					left: store.modal.left + 'px',
-					top: store.modal.top + 'px',
-					maxWidth: store.modal.width + 'px',
-				}">
+				:container="tableRef">
 				<template #default>
 					<component
 						:key="`${store.modal.rowIndex}:${store.modal.colIndex}`"
@@ -249,6 +245,7 @@ td.sticky-index {
 <style scoped>
 @import url('@stonecrop/themes/default.css');
 .atable {
+	position: relative;
 	font-family: var(--sc-atable-font-family);
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;

package/src/components/ATableModal.vue

@@ -1,26 +1,49 @@
 <template>
-	<div class="amodal" tabindex="-1" @click="handleInput" @input="handleInput">
+	<div class="amodal" ref="amodal" tabindex="-1" @click="handleInput" @input="handleInput" :style="amodalStyles">
 		<slot />
 	</div>
 </template>
 
 <script setup lang="ts">
+import { useElementBounding } from '@vueuse/core'
+import { useTemplateRef, computed } from 'vue'
+
 import { createTableStore } from '../stores/table'
 
-/* const { colIndex, rowIndex, store } = */ defineProps<{
+const { store, container } = defineProps<{
 	colIndex?: number
 	rowIndex?: number
 	store?: ReturnType<typeof createTableStore>
+	container?: HTMLElement
 }>()
 
-// const cellBackgroundColor = computed(() => {
-// 	if (store.modal.parent) {
-// 		let computedstyle = window.getComputedStyle(store.modal.parent)
-// 		return 'blue'
-// 	} else {
-// 		return 'inherit'
-// 	}
-// })
+const amodalRef = useTemplateRef('amodal')
+const { width, height } = useElementBounding(amodalRef)
+
+const amodalStyles = computed(() => {
+	// the modal usually will appear left align with and below the element it is associated with,
+	// but needs to detect and adjust its position if it would overflow the rightr or bottom edges
+
+	// get the dimensions of whatever container is holding this modal, e.g. Table, Window, div so the modal can detect edges
+	const containerWidth = container?.offsetWidth || 0
+	const containerHeight = container?.offsetHeight || 0
+
+	// if this modal would go outside the edge of its container, instead place it above the element (Y) or along the right side (X)
+	const modalLeft =
+		store.modal.left + width.value > containerWidth
+			? store.modal.left - (width.value - store.modal.width)
+			: store.modal.left
+
+	const modalTop =
+		store.modal.top + height.value > containerHeight
+			? store.modal.top - height.value - store.modal.height
+			: store.modal.top
+
+	return {
+		left: `${modalLeft}px`,
+		top: `${modalTop}px`,
+	}
+})
 
 const handleInput = (event: Event) => {
 	event.stopPropagation()
@@ -31,7 +54,7 @@ const handleInput = (event: Event) => {
 @import url('@stonecrop/themes/default.css');
 
 .amodal {
-	position: fixed;
+	position: absolute;
 	background-color: var(--sc-row-color-zebra-dark);
 	z-index: 100;
 }

package/src/types/index.ts

@@ -14,10 +14,24 @@ export type TableColumn = {
 
 	cellComponent?: string
 	cellComponentProps?: Record<string, any>
-	modalComponent?: string | ((context?: CellContext) => string)
+	/**
+	 * The component to use for the modal. If a function is provided, it will be called with the cell context.
+	 * The following properties are available on the cell context:
+	 * - `row` - the row object
+	 * - `column` - the column object
+	 * - `table` - the table object
+	 *
+	 * The function should return the name of the component to use for the modal.
+	 *
+	 * Additionally, the following properties will be automatically passed to the modal component:
+	 * - `colIndex` - the column index of the current cell
+	 * - `rowIndex` - the row index of the current cell
+	 * - `store` - the table data store
+	 */
+	modalComponent?: string | ((context: CellContext) => string)
 	modalComponentExtraProps?: Record<string, any>
 
-	format?: string | ((value: any, context?: CellContext) => string)
+	format?: string | ((value: any, context: CellContext) => string)
 	mask?: (value: any) => any
 }
 
@@ -79,12 +93,13 @@ export type TableRow = {
 export type TableModal = {
 	colIndex?: number
 	event?: string
+	height?: number
 	left?: number
 	parent?: HTMLElement
 	rowIndex?: number
 	top?: number
 	visible?: boolean
-	width?: string
+	width?: number
 
 	component?: string
 	componentProps?: Record<string, any>