@stonecrop/atable 0.3.2 → 0.3.4

package/dist/src/index.d.ts

@@ -6,7 +6,7 @@ import ATable from './components/ATable.vue';
 import ATableHeader from './components/ATableHeader.vue';
 import ATableModal from './components/ATableModal.vue';
 export { createTableStore } from './stores/table';
-export type { CellContext, TableColumn, TableConfig, TableDisplay, TableRow, TableModal } from './types';
+export type { CellContext, TableColumn, TableConfig, TableDisplay, TableModal, TableModalProps, TableRow, } from './types';
 /**
  * Install all ATable components
  * @param app - Vue app instance

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,IAAI,MAAM,uBAAuB,CAAA;AACxC,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAExG;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAOxB;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,IAAI,MAAM,uBAAuB,CAAA;AACxC,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,YAAY,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,eAAe,EACf,QAAQ,GACR,MAAM,SAAS,CAAA;AAEhB;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAOxB;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,CAAA"}

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

@@ -46,15 +46,6 @@ export declare const createTableStore: (initData: {
         format?: string | ((value: any, context: CellContext) => string);
         mask?: (value: any) => any;
     }[]>;
-    rows: import("vue").Ref<{
-        [x: string]: any;
-        indent?: number;
-        parent?: number;
-    }[], TableRow[] | {
-        [x: string]: any;
-        indent?: number;
-        parent?: number;
-    }[]>;
     config: import("vue").Ref<{
         view?: "uncounted" | "list" | "list-expansion" | "tree";
         fullWidth?: boolean;
@@ -62,7 +53,6 @@ export declare const createTableStore: (initData: {
         view?: "uncounted" | "list" | "list-expansion" | "tree";
         fullWidth?: boolean;
     }>;
-    table: import("vue").Ref<{}, {}>;
     display: import("vue").Ref<{
         childrenOpen?: boolean;
         expanded?: boolean;
@@ -85,26 +75,39 @@ 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>;
     }>;
+    rows: import("vue").Ref<{
+        [x: string]: any;
+        indent?: number;
+        parent?: number;
+    }[], TableRow[] | {
+        [x: string]: any;
+        indent?: number;
+        parent?: number;
+    }[]>;
+    table: import("vue").Ref<{}, {}>;
+    updates: import("vue").Ref<Record<string, string>, Record<string, string>>;
     hasPinnedColumns: import("vue").ComputedRef<boolean>;
     numberedRowWidth: import("vue").ComputedRef<string>;
     zeroColumn: import("vue").ComputedRef<boolean>;
@@ -117,8 +120,9 @@ export declare const createTableStore: (initData: {
     getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+";
     isRowVisible: (rowIndex: number) => boolean;
     setCellData: (colIndex: number, rowIndex: number, value: any) => void;
+    setCellText: (colIndex: number, rowIndex: number, value: string) => void;
     toggleRowExpand: (rowIndex: number) => void;
-}, "columns" | "rows" | "config" | "table" | "display" | "modal">, Pick<{
+}, "columns" | "config" | "display" | "modal" | "rows" | "table" | "updates">, Pick<{
     columns: import("vue").Ref<{
         name: string;
         align?: CanvasTextAlign;
@@ -148,15 +152,6 @@ export declare const createTableStore: (initData: {
         format?: string | ((value: any, context: CellContext) => string);
         mask?: (value: any) => any;
     }[]>;
-    rows: import("vue").Ref<{
-        [x: string]: any;
-        indent?: number;
-        parent?: number;
-    }[], TableRow[] | {
-        [x: string]: any;
-        indent?: number;
-        parent?: number;
-    }[]>;
     config: import("vue").Ref<{
         view?: "uncounted" | "list" | "list-expansion" | "tree";
         fullWidth?: boolean;
@@ -164,7 +159,6 @@ export declare const createTableStore: (initData: {
         view?: "uncounted" | "list" | "list-expansion" | "tree";
         fullWidth?: boolean;
     }>;
-    table: import("vue").Ref<{}, {}>;
     display: import("vue").Ref<{
         childrenOpen?: boolean;
         expanded?: boolean;
@@ -187,26 +181,39 @@ 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>;
     }>;
+    rows: import("vue").Ref<{
+        [x: string]: any;
+        indent?: number;
+        parent?: number;
+    }[], TableRow[] | {
+        [x: string]: any;
+        indent?: number;
+        parent?: number;
+    }[]>;
+    table: import("vue").Ref<{}, {}>;
+    updates: import("vue").Ref<Record<string, string>, Record<string, string>>;
     hasPinnedColumns: import("vue").ComputedRef<boolean>;
     numberedRowWidth: import("vue").ComputedRef<string>;
     zeroColumn: import("vue").ComputedRef<boolean>;
@@ -219,6 +226,7 @@ export declare const createTableStore: (initData: {
     getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+";
     isRowVisible: (rowIndex: number) => boolean;
     setCellData: (colIndex: number, rowIndex: number, value: any) => void;
+    setCellText: (colIndex: number, rowIndex: number, value: string) => void;
     toggleRowExpand: (rowIndex: number) => void;
 }, "hasPinnedColumns" | "numberedRowWidth" | "zeroColumn">, Pick<{
     columns: import("vue").Ref<{
@@ -250,15 +258,6 @@ export declare const createTableStore: (initData: {
         format?: string | ((value: any, context: CellContext) => string);
         mask?: (value: any) => any;
     }[]>;
-    rows: import("vue").Ref<{
-        [x: string]: any;
-        indent?: number;
-        parent?: number;
-    }[], TableRow[] | {
-        [x: string]: any;
-        indent?: number;
-        parent?: number;
-    }[]>;
     config: import("vue").Ref<{
         view?: "uncounted" | "list" | "list-expansion" | "tree";
         fullWidth?: boolean;
@@ -266,7 +265,6 @@ export declare const createTableStore: (initData: {
         view?: "uncounted" | "list" | "list-expansion" | "tree";
         fullWidth?: boolean;
     }>;
-    table: import("vue").Ref<{}, {}>;
     display: import("vue").Ref<{
         childrenOpen?: boolean;
         expanded?: boolean;
@@ -289,26 +287,39 @@ 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>;
     }>;
+    rows: import("vue").Ref<{
+        [x: string]: any;
+        indent?: number;
+        parent?: number;
+    }[], TableRow[] | {
+        [x: string]: any;
+        indent?: number;
+        parent?: number;
+    }[]>;
+    table: import("vue").Ref<{}, {}>;
+    updates: import("vue").Ref<Record<string, string>, Record<string, string>>;
     hasPinnedColumns: import("vue").ComputedRef<boolean>;
     numberedRowWidth: import("vue").ComputedRef<string>;
     zeroColumn: import("vue").ComputedRef<boolean>;
@@ -321,6 +332,7 @@ export declare const createTableStore: (initData: {
     getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+";
     isRowVisible: (rowIndex: number) => boolean;
     setCellData: (colIndex: number, rowIndex: number, value: any) => void;
+    setCellText: (colIndex: number, rowIndex: number, value: string) => void;
     toggleRowExpand: (rowIndex: number) => void;
-}, "closeModal" | "getCellData" | "getCellDisplayValue" | "getFormattedValue" | "getHeaderCellStyle" | "getIndent" | "getRowExpandSymbol" | "isRowVisible" | "setCellData" | "toggleRowExpand">>;
+}, "closeModal" | "getCellData" | "getCellDisplayValue" | "getFormattedValue" | "getHeaderCellStyle" | "getIndent" | "getRowExpandSymbol" | "isRowVisible" | "setCellData" | "setCellText" | "toggleRowExpand">>;
 //# sourceMappingURL=table.d.ts.map

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6J4B,UAAU;kBAtFhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCA4D7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BA3BP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAYpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCA+BnC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0Cd,UAAU;kBAtFhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCA4D7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BA3BP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAYpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCA+BnC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0Cd,UAAU;kBAtFhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCA4D7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BA3BP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAYpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCA+BnC,MAAM;gNA2F1C,CAAA"}

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

@@ -1,3 +1,4 @@
+import { createTableStore } from '../stores/table';
 /**
  * Table column definition.
  * @public
@@ -87,13 +88,24 @@ 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>;
 };
+/**
+ * Table modal props definition.
+ * @public
+ */
+export type TableModalProps = {
+    [key: string]: any;
+    colIndex: number;
+    rowIndex: number;
+    store: ReturnType<typeof createTableStore>;
+};
 //# sourceMappingURL=index.d.ts.map

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;;;;;;;;;;;;;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,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,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAElD;;;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;AAED;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;CAC1C,CAAA"}

package/dist/stores/table.js

@@ -58,6 +58,7 @@ export const createTableStore = (initData) => {
         const table = ref(initData.table || createTableObject());
         const display = ref(createDisplayObject(initData.display));
         const modal = ref(initData.modal || { visible: false });
+        const updates = ref({});
         // getters
         const hasPinnedColumns = computed(() => columns.value.some(col => col.pinned));
         const numberedRowWidth = computed(() => {
@@ -76,6 +77,13 @@ export const createTableStore = (initData) => {
             table.value[index] = value;
             rows.value[rowIndex][col.name] = value;
         };
+        const setCellText = (colIndex, rowIndex, value) => {
+            const index = `${colIndex}:${rowIndex}`;
+            if (table.value[index] !== value) {
+                display.value[rowIndex].rowModified = true;
+                updates.value[index] = value;
+            }
+        };
         const getHeaderCellStyle = (column) => ({
             minWidth: column.width || '40ch',
             textAlign: column.align || 'center',
@@ -154,11 +162,12 @@ export const createTableStore = (initData) => {
         return {
             // state
             columns,
-            rows,
             config,
-            table,
             display,
             modal,
+            rows,
+            table,
+            updates,
             // getters
             hasPinnedColumns,
             numberedRowWidth,
@@ -173,6 +182,7 @@ export const createTableStore = (initData) => {
             getRowExpandSymbol,
             isRowVisible,
             setCellData,
+            setCellText,
             toggleRowExpand,
         };
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "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.2",
-    "@stonecrop/utilities": "0.3.2"
+    "@stonecrop/themes": "0.3.4",
+    "@stonecrop/utilities": "0.3.4"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.26.2",

package/src/components/ACell.vue

@@ -10,7 +10,6 @@
 		:style="cellStyle"
 		@focus="onFocus"
 		@paste="updateCellData"
-		@blur="updateCellData"
 		@input="updateCellData"
 		@click="showModal"
 		class="atable-cell"
@@ -28,7 +27,7 @@
 <script setup lang="ts">
 import { KeypressHandlers, defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
 import { useElementBounding } from '@vueuse/core'
-import { computed, CSSProperties, ref, useTemplateRef, watch } from 'vue'
+import { computed, type CSSProperties, ref, useTemplateRef } from 'vue'
 
 import { createTableStore } from '../stores/table'
 import { isHtmlString } from '../utils'
@@ -48,12 +47,13 @@ const {
 	pinned?: boolean
 }>()
 
+const emit = defineEmits<{ cellInput: [colIndex: number, rowIndex: number, newValue: string, oldValue: string] }>()
+
 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 = ref(store.getCellDisplayValue(colIndex, rowIndex))
 const currentData = ref('')
 const cellModified = ref(false)
 
@@ -63,13 +63,7 @@ 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 displayValue = computed(() => store.getCellDisplayValue(colIndex, rowIndex))
 const isHtmlValue = computed(() => {
 	// TODO: check if display value is a native DOM element
 	return typeof displayValue.value === 'string' ? isHtmlString(displayValue.value) : false
@@ -97,9 +91,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 })
@@ -155,23 +150,23 @@ const onFocus = () => {
 	}
 }
 
-const updateCellData = () => {
-	if (cellRef.value) {
-		// only apply changes if the cell value has changed after being mounted
-		if (column.format) {
-			cellModified.value = cellRef.value.textContent !== store.getFormattedValue(colIndex, rowIndex, originalData)
-		} else {
-			cellModified.value = cellRef.value.textContent !== originalData
-		}
+const updateCellData = (payload: Event) => {
+	const target = payload.target as HTMLTableCellElement
+	if (target.textContent === currentData.value) {
+		return
+	}
 
-		if (cellRef.value.textContent !== currentData.value) {
-			currentData.value = cellRef.value.textContent
-			cellRef.value.dispatchEvent(new Event('change'))
-			if (!column.format) {
-				// TODO: need to setup reverse format function
-				store.setCellData(colIndex, rowIndex, currentData.value)
-			}
-		}
+	emit('cellInput', colIndex, rowIndex, target.textContent, currentData.value)
+	currentData.value = target.textContent
+
+	// only apply changes if the cell value has changed after being mounted
+	if (column.format) {
+		cellModified.value = target.textContent !== store.getFormattedValue(colIndex, rowIndex, originalData)
+		// TODO: need to setup reverse format function?
+		store.setCellText(colIndex, rowIndex, target.textContent)
+	} else {
+		cellModified.value = target.textContent !== originalData
+		store.setCellData(colIndex, rowIndex, target.textContent)
 	}
 }
 </script>

package/src/components/ATable.vue

@@ -25,7 +25,8 @@
 							textAlign: col?.align || 'center',
 							minWidth: col?.width || '40ch',
 							width: store.config.fullWidth ? 'auto' : null,
-						}" />
+						}"
+						@cellInput="emitInput" />
 				</ARow>
 			</slot>
 		</tbody>
@@ -37,11 +38,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}`"
@@ -91,11 +88,14 @@ const tableRef = useTemplateRef<HTMLTableElement>('table')
 const rowsValue = modelValue ? modelValue : rows
 const store = createTableStore({ columns, rows: rowsValue, id, config })
 
-store.$onAction(({ name, store, args }) => {
+store.$onAction(({ name, store, args, after }) => {
 	if (name === 'setCellData') {
 		const [colIndex, rowIndex, newCellValue] = args
 		const prevCellValue = store.getCellData(colIndex, rowIndex)
-		emit('cellUpdate', [colIndex, rowIndex, newCellValue, prevCellValue])
+
+		after(() => {
+			emit('cellUpdate', colIndex, rowIndex, newCellValue, prevCellValue)
+		})
 	}
 })
 
@@ -118,6 +118,10 @@ onMounted(() => {
 	}
 })
 
+const emitInput = (colIndex: number, rowIndex: number, newCellValue: any, prevCellValue: any) => {
+	emit('cellUpdate', colIndex, rowIndex, newCellValue, prevCellValue)
+}
+
 const assignStickyCellWidths = () => {
 	const table = tableRef.value
 
@@ -152,54 +156,6 @@ const assignStickyCellWidths = () => {
 	}
 }
 
-// const formatCell = (event?: KeyboardEvent, column?: TableColumn, cellData?: any) => {
-// 	let colIndex: number
-// 	const target = event?.target as HTMLTableCellElement
-// 	if (event) {
-// 		colIndex = target.cellIndex
-// 	} else if (column && cellData) {
-// 		colIndex = store.columns.indexOf(column)
-// 	}
-
-// 	if (!column && 'format' in store.columns[colIndex]) {
-// 		// TODO: (utils) create helper to extract format from string
-// 		const format = store.columns[colIndex].format
-// 		if (typeof format === 'function') {
-// 			return format(target.innerHTML)
-// 		} else if (typeof format === 'string') {
-// 			// parse format function from string
-// 			// eslint-disable-next-line @typescript-eslint/no-implied-eval
-// 			const formatFn: (args: any) => any = Function(`"use strict";return (${format})`)()
-// 			return formatFn(target.innerHTML)
-// 		} else {
-// 			return target.innerHTML
-// 		}
-// 	} else if (cellData && 'format' in column) {
-// 		const format = column.format
-// 		if (typeof format === 'function') {
-// 			return format(cellData)
-// 		} else if (typeof format === 'string') {
-// 			// parse format function from string
-// 			// eslint-disable-next-line @typescript-eslint/no-implied-eval
-// 			const formatFn: (args: any) => any = Function(`"use strict";return (${format})`)()
-// 			return formatFn(cellData)
-// 		} else {
-// 			return cellData
-// 		}
-// 	} else if (cellData && column.type.toLowerCase() in ['int', 'decimal', 'float', 'number', 'percent']) {
-// 		return cellData
-// 		// TODO: number formatting
-// 	} else {
-// 		return cellData
-// 	}
-// }
-
-// const moveCursorToEnd = (target: HTMLElement) => {
-// 	target.focus()
-// 	document.execCommand('selectAll', false, null)
-// 	document.getSelection().collapseToEnd()
-// }
-
 window.addEventListener('keydown', (event: KeyboardEvent) => {
 	if (event.key === 'Escape') {
 		if (store.modal.visible) {
@@ -249,6 +205,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/index.ts

@@ -7,7 +7,15 @@ import ATable from './components/ATable.vue'
 import ATableHeader from './components/ATableHeader.vue'
 import ATableModal from './components/ATableModal.vue'
 export { createTableStore } from './stores/table'
-export type { CellContext, TableColumn, TableConfig, TableDisplay, TableRow, TableModal } from './types'
+export type {
+	CellContext,
+	TableColumn,
+	TableConfig,
+	TableDisplay,
+	TableModal,
+	TableModalProps,
+	TableRow,
+} from './types'
 
 /**
  * Install all ATable components