@stonecrop/atable 0.3.2 → 0.3.4

package/dist/assets/index.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap";.atable-cell{border-radius:0;box-sizing:border-box;margin:0;outline:none;box-shadow:none;color:var(--sc-cell-text-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);border-spacing:0px;border-collapse:collapse;overflow:hidden;text-overflow:ellipsis;order:1;white-space:nowrap;max-width:40ch}.atable-cell a{color:var(--sc-cell-text-color);text-decoration:none}.atable-cell:focus,.atable-cell:focus-within{background-color:var(--sc-focus-cell-background);outline-width:var(--sc-atable-cell-border-width);outline-style:solid;outline-offset:calc(var(--sc-atable-cell-border-width) * -1);outline-color:var(--sc-focus-cell-outline);box-shadow:none;overflow:hidden;text-wrap:nowrap;box-sizing:border-box}.row-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;display:flex;align-items:center;justify-content:center}.expandable-row{border-top:1px solid var(--sc-row-border-color);height:var(--sc-atable-row-height);display:flex}.expandable-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.expanded-row{display:flex;border-left:2px solid var(--sc-row-border-color)}.expandable-row:last-child{border-bottom:1px solid var(--sc-row-border-color)}.expanded-row-content{border-top:1px solid var(--sc-row-border-color);padding:1.5rem}.table-row{border-top:1px solid var(--sc-row-border-color);display:flex;background-color:#fff}.table-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.list-index{color:var(--sc-header-text-color);font-weight:700;padding-left:var(--sc-atable-row-padding);padding-right:.5em;text-align:left;-webkit-user-select:none;user-select:none;width:7ch;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.tree-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.atable-header-row{display:flex}.atable-header-row th{padding-left:.5ch!important;font-weight:700;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);box-sizing:border-box;color:var(--sc-header-text-color)}#header-index{padding-left:var(--sc-atable-row-padding);box-sizing:border-box}.tree-index{padding-right:0}th{order:1}.list-expansion-index{width:2ch;margin-left:5px}:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-20);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.amodal{position:fixed;background-color:var(--sc-row-color-zebra-dark);z-index:100}.sticky-index{position:sticky;left:0;z-index:1;order:0}.sticky-column,th.sticky-column,td.sticky-column,th.sticky-index,td.sticky-index{position:sticky;z-index:1;order:0;background:#fff}.sticky-column-edge,.atable th.sticky-column-edge{border-right:1px solid var(--sc-row-border-color);border-right-width:1px}[data-v-a7848db7]:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-20);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.atable[data-v-a7848db7]{font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);border-collapse:collapse;box-sizing:border-box;table-layout:auto;width:auto}.atable th[data-v-a7848db7]{border-width:0px;border-style:solid;border-radius:0;padding-left:.5ch;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);color:var(--sc-gray-60);height:var(--sc-atable-row-height);font-weight:300;letter-spacing:.05rem;order:1;box-sizing:border-box}.atable th[data-v-a7848db7]:focus{outline:none}
+@import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap";.atable-cell{border-radius:0;box-sizing:border-box;margin:0;outline:none;box-shadow:none;color:var(--sc-cell-text-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);border-spacing:0px;border-collapse:collapse;overflow:hidden;text-overflow:ellipsis;order:1;white-space:nowrap;max-width:40ch}.atable-cell a{color:var(--sc-cell-text-color);text-decoration:none}.atable-cell:focus,.atable-cell:focus-within{background-color:var(--sc-focus-cell-background);outline-width:var(--sc-atable-cell-border-width);outline-style:solid;outline-offset:calc(var(--sc-atable-cell-border-width) * -1);outline-color:var(--sc-focus-cell-outline);box-shadow:none;overflow:hidden;text-wrap:nowrap;box-sizing:border-box}.row-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;display:flex;align-items:center;justify-content:center}.expandable-row{border-top:1px solid var(--sc-row-border-color);height:var(--sc-atable-row-height);display:flex}.expandable-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.expanded-row{display:flex;border-left:2px solid var(--sc-row-border-color)}.expandable-row:last-child{border-bottom:1px solid var(--sc-row-border-color)}.expanded-row-content{border-top:1px solid var(--sc-row-border-color);padding:1.5rem}.table-row{border-top:1px solid var(--sc-row-border-color);display:flex;background-color:#fff}.table-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.list-index{color:var(--sc-header-text-color);font-weight:700;padding-left:var(--sc-atable-row-padding);padding-right:.5em;text-align:left;-webkit-user-select:none;user-select:none;width:7ch;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.tree-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.atable-header-row{display:flex}.atable-header-row th{padding-left:.5ch!important;font-weight:700;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);box-sizing:border-box;color:var(--sc-header-text-color)}#header-index{padding-left:var(--sc-atable-row-padding);box-sizing:border-box}.tree-index{padding-right:0}th{order:1}.list-expansion-index{width:2ch;margin-left:5px}:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-20);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.amodal{position:absolute;background-color:var(--sc-row-color-zebra-dark);z-index:100}.sticky-index{position:sticky;left:0;z-index:1;order:0}.sticky-column,th.sticky-column,td.sticky-column,th.sticky-index,td.sticky-index{position:sticky;z-index:1;order:0;background:#fff}.sticky-column-edge,.atable th.sticky-column-edge{border-right:1px solid var(--sc-row-border-color);border-right-width:1px}[data-v-7480394f]:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-20);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.atable[data-v-7480394f]{position:relative;font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);border-collapse:collapse;box-sizing:border-box;table-layout:auto;width:auto}.atable th[data-v-7480394f]{border-width:0px;border-style:solid;border-radius:0;padding-left:.5ch;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);color:var(--sc-gray-60);height:var(--sc-atable-row-height);font-weight:300;letter-spacing:.05rem;order:1;box-sizing:border-box}.atable th[data-v-7480394f]:focus{outline:none}

package/dist/atable.d.ts

@@ -80,15 +80,6 @@ modalComponentExtraProps?: Record<string, any>;
 format?: string | ((value: any, context: CellContext) => string);
 mask?: (value: any) => any;
 }[]>;
-rows: Ref<    {
-[x: string]: any;
-indent?: number;
-parent?: number;
-}[], TableRow[] | {
-[x: string]: any;
-indent?: number;
-parent?: number;
-}[]>;
 config: Ref<    {
 view?: "uncounted" | "list" | "list-expansion" | "tree";
 fullWidth?: boolean;
@@ -96,7 +87,6 @@ fullWidth?: boolean;
 view?: "uncounted" | "list" | "list-expansion" | "tree";
 fullWidth?: boolean;
 }>;
-table: Ref<    {}, {}>;
 display: Ref<    {
 childrenOpen?: boolean;
 expanded?: boolean;
@@ -119,26 +109,39 @@ rowModified?: boolean;
 modal: 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: Ref<    {
+[x: string]: any;
+indent?: number;
+parent?: number;
+}[], TableRow[] | {
+[x: string]: any;
+indent?: number;
+parent?: number;
+}[]>;
+table: Ref<    {}, {}>;
+updates: Ref<Record<string, string>, Record<string, string>>;
 hasPinnedColumns: ComputedRef<boolean>;
 numberedRowWidth: ComputedRef<string>;
 zeroColumn: ComputedRef<boolean>;
@@ -151,8 +154,9 @@ getIndent: (colIndex: number, indentLevel?: number) => string;
 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: Ref<    {
 name: string;
 align?: CanvasTextAlign;
@@ -182,15 +186,6 @@ modalComponentExtraProps?: Record<string, any>;
 format?: string | ((value: any, context: CellContext) => string);
 mask?: (value: any) => any;
 }[]>;
-rows: Ref<    {
-[x: string]: any;
-indent?: number;
-parent?: number;
-}[], TableRow[] | {
-[x: string]: any;
-indent?: number;
-parent?: number;
-}[]>;
 config: Ref<    {
 view?: "uncounted" | "list" | "list-expansion" | "tree";
 fullWidth?: boolean;
@@ -198,7 +193,6 @@ fullWidth?: boolean;
 view?: "uncounted" | "list" | "list-expansion" | "tree";
 fullWidth?: boolean;
 }>;
-table: Ref<    {}, {}>;
 display: Ref<    {
 childrenOpen?: boolean;
 expanded?: boolean;
@@ -221,26 +215,39 @@ rowModified?: boolean;
 modal: 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: Ref<    {
+[x: string]: any;
+indent?: number;
+parent?: number;
+}[], TableRow[] | {
+[x: string]: any;
+indent?: number;
+parent?: number;
+}[]>;
+table: Ref<    {}, {}>;
+updates: Ref<Record<string, string>, Record<string, string>>;
 hasPinnedColumns: ComputedRef<boolean>;
 numberedRowWidth: ComputedRef<string>;
 zeroColumn: ComputedRef<boolean>;
@@ -253,6 +260,7 @@ getIndent: (colIndex: number, indentLevel?: number) => string;
 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: Ref<    {
@@ -284,15 +292,6 @@ modalComponentExtraProps?: Record<string, any>;
 format?: string | ((value: any, context: CellContext) => string);
 mask?: (value: any) => any;
 }[]>;
-rows: Ref<    {
-[x: string]: any;
-indent?: number;
-parent?: number;
-}[], TableRow[] | {
-[x: string]: any;
-indent?: number;
-parent?: number;
-}[]>;
 config: Ref<    {
 view?: "uncounted" | "list" | "list-expansion" | "tree";
 fullWidth?: boolean;
@@ -300,7 +299,6 @@ fullWidth?: boolean;
 view?: "uncounted" | "list" | "list-expansion" | "tree";
 fullWidth?: boolean;
 }>;
-table: Ref<    {}, {}>;
 display: Ref<    {
 childrenOpen?: boolean;
 expanded?: boolean;
@@ -323,26 +321,39 @@ rowModified?: boolean;
 modal: 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: Ref<    {
+[x: string]: any;
+indent?: number;
+parent?: number;
+}[], TableRow[] | {
+[x: string]: any;
+indent?: number;
+parent?: number;
+}[]>;
+table: Ref<    {}, {}>;
+updates: Ref<Record<string, string>, Record<string, string>>;
 hasPinnedColumns: ComputedRef<boolean>;
 numberedRowWidth: ComputedRef<string>;
 zeroColumn: ComputedRef<boolean>;
@@ -355,8 +366,9 @@ getIndent: (colIndex: number, indentLevel?: number) => string;
 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">>;
 
 /**
  * Install all ATable components
@@ -437,16 +449,28 @@ export declare type TableDisplay = {
 export declare 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 declare type TableModalProps = {
+    [key: string]: any;
+    colIndex: number;
+    rowIndex: number;
+    store: ReturnType<typeof createTableStore>;
+};
+
 /**
  * Table row definition.
  * @public