@operato/data-grist 2.0.0-alpha.2 → 2.0.0-alpha.20

package/stories/accumulator.stories.ts

@@ -79,7 +79,8 @@ const config = {
       },
       filter: 'search',
       sortable: true,
-      width: 120
+      width: 120,
+      fixed: true
     },
     {
       type: 'string',
@@ -105,6 +106,10 @@ const config = {
         align: 'right'
       },
       accumulator: 'avg',
+      // accumulator: {
+      //   type: 'avg',
+      //   tag: true
+      // },
       sortable: true,
       width: 130
     },
@@ -115,7 +120,10 @@ const config = {
       header: 'accval2',
       record: {
         editable: true,
-        align: 'right'
+        align: 'right',
+        renderer: (value: any, column: any, record: any) => {
+          return value && Intl.NumberFormat('en-US').format(value)
+        }
       },
       accumulator: {
         type: 'sum',
@@ -162,9 +170,6 @@ const config = {
     {
       name: 'name',
       desc: true
-    },
-    {
-      name: 'email'
     }
   ],
   pagination: {

package/stories/dynamic-editable.stories.ts

@@ -24,6 +24,7 @@ const fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }
           name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
           description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
           number: idx,
+          float: 1.3,
           date: '2023-09-20',
           routing: {
             id: '006dc64d-4fb9-4afc-a9ea-962bd1b9e110',
@@ -117,6 +118,15 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
         },
         width: 80
       },
+      {
+        type: 'float',
+        name: 'float',
+        header: 'float',
+        record: {
+          editable: true
+        },
+        width: 80
+      },
       {
         type: 'date',
         name: 'date',

package/stories/fixed-column.stories.ts

@@ -144,8 +144,7 @@ const config = {
       },
       filter: 'search',
       sortable: true,
-      width: 120,
-      fixed: true
+      width: 120
     },
     {
       type: 'string',
@@ -161,7 +160,8 @@ const config = {
         click: (columns, data, column, record, rowIndex, target) => {
           alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)
         }
-      } as GristEventHandlerSet
+      } as GristEventHandlerSet,
+      fixed: true
     },
     {
       type: 'email',

package/themes/grist-theme.css

@@ -41,7 +41,7 @@ body {
 
   --grid-record-background-color: var(--theme-white-color);
   --grid-record-odd-background-color: #f9f7f5;
-  --grid-record-padding: 0 0 0 var(--padding-default);
+  --grid-record-padding: 0 5px 0 5px;
   --grid-record-color: var(--secondary-color);
   --grid-record-color-hover: var(--primary-color);
   --grid-record-wide-fontsize: var(--fontsize-small);

package/dist/src/data-grid/event-handlers/data-grid-body-focus-change-handler copy.d.ts

@@ -1,7 +0,0 @@
-import { DataGridBody } from '../data-grid-body';
-/**
- * ox-grid-body 의 focus-change handler
- *
- * - handler의 this 는 ox-grid-body임.
- */
-export declare function dataGridBodyFocusChangeHandler(this: DataGridBody, e: Event): Promise<void>;

package/dist/src/data-grid/event-handlers/data-grid-body-focus-change-handler copy.js

@@ -1,19 +0,0 @@
-/**
- * ox-grid-body 의 focus-change handler
- *
- * - handler의 this 는 ox-grid-body임.
- */
-export async function dataGridBodyFocusChangeHandler(e) {
-    const { row: rowIndex, column: columnIndex } = e.detail;
-    const target = this.getFieldByIndex(rowIndex, columnIndex);
-    var { column, record } = target || {};
-    /* do column focus handler */
-    if (column) {
-        var { focus } = column.handlers;
-        focus && focus(this.columns, this.data, column, record, rowIndex, target);
-    }
-    /* do rows focus handler */
-    var { focus: rowsFocus } = this.config.rows.handlers;
-    rowsFocus && rowsFocus(this.columns, this.data, column, record, rowIndex, target);
-}
-//# sourceMappingURL=data-grid-body-focus-change-handler%20copy.js.map

package/dist/src/data-grid/event-handlers/data-grid-body-focus-change-handler copy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-grid-body-focus-change-handler copy.js","sourceRoot":"","sources":["../../../../src/data-grid/event-handlers/data-grid-body-focus-change-handler copy.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,8BAA8B,CAAqB,CAAQ;IAC/E,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,GAAI,CAAiB,CAAC,MAAM,CAAA;IAExE,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAA;IAE1D,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,IAAI,EAAE,CAAA;IAErC,6BAA6B;IAC7B,IAAI,MAAM,EAAE,CAAC;QACX,IAAI,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAA;QAC/B,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC3E,CAAC;IAED,2BAA2B;IAC3B,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAA;IACpD,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;AACnF,CAAC","sourcesContent":["import { DataGridBody } from '../data-grid-body'\n\n/**\n * ox-grid-body 의 focus-change handler\n *\n * - handler의 this 는 ox-grid-body임.\n */\nexport async function dataGridBodyFocusChangeHandler(this: DataGridBody, e: Event): Promise<void> {\n  const { row: rowIndex, column: columnIndex } = (e as CustomEvent).detail\n\n  const target = this.getFieldByIndex(rowIndex, columnIndex)\n\n  var { column, record } = target || {}\n\n  /* do column focus handler */\n  if (column) {\n    var { focus } = column.handlers\n    focus && focus(this.columns, this.data, column, record, rowIndex, target)\n  }\n\n  /* do rows focus handler */\n  var { focus: rowsFocus } = this.config.rows.handlers\n  rowsFocus && rowsFocus(this.columns, this.data, column, record, rowIndex, target)\n}\n"]}

package/dist/src/handlers/contextmenu-tree.d.ts

@@ -1,3 +0,0 @@
-import { DataGridField } from '../data-grid/data-grid-field';
-import { ColumnConfig, GristData, GristRecord } from '../types';
-export declare const ContextMenuTree: (columns: ColumnConfig[], data: GristData, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField) => void;

package/dist/src/handlers/contextmenu-tree.js

@@ -1,30 +0,0 @@
-/*
- * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
- * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
- */
-export const ContextMenuTree = function (columns, data, column, record, rowIndex, field) {
-    // var moveTo = rowIndex - 1
-    // var length = data.records.length
-    // if (rowIndex >= length || moveTo < 0 || moveTo >= length) {
-    //   return
-    // }
-    // data.records.splice(rowIndex, 1)
-    // data.records.splice(moveTo, 0, record)
-    // field.dispatchEvent(
-    //   new CustomEvent('record-change', {
-    //     bubbles: true,
-    //     composed: true
-    //   })
-    // )
-    // field.dispatchEvent(
-    //   new CustomEvent('focus-change', {
-    //     bubbles: true,
-    //     composed: true,
-    //     detail: {
-    //       row: moveTo,
-    //       column: column
-    //     }
-    //   })
-    // )
-};
-//# sourceMappingURL=contextmenu-tree.js.map

package/dist/src/handlers/contextmenu-tree.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"contextmenu-tree.js","sourceRoot":"","sources":["../../../src/handlers/contextmenu-tree.ts"],"names":[],"mappings":"AAGA;;;GAGG;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,UAC7B,OAAuB,EACvB,IAAe,EACf,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB;IAEpB,4BAA4B;IAC5B,mCAAmC;IACnC,8DAA8D;IAC9D,WAAW;IACX,IAAI;IACJ,mCAAmC;IACnC,yCAAyC;IACzC,uBAAuB;IACvB,uCAAuC;IACvC,qBAAqB;IACrB,qBAAqB;IACrB,OAAO;IACP,IAAI;IACJ,uBAAuB;IACvB,sCAAsC;IACtC,qBAAqB;IACrB,sBAAsB;IACtB,gBAAgB;IAChB,qBAAqB;IACrB,uBAAuB;IACvB,QAAQ;IACR,OAAO;IACP,IAAI;AACN,CAAC,CAAA","sourcesContent":["import { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristData, GristRecord } from '../types'\n\n/*\n * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,\n * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.\n */\n\nexport const ContextMenuTree = function (\n  columns: ColumnConfig[],\n  data: GristData,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n): void {\n  // var moveTo = rowIndex - 1\n  // var length = data.records.length\n  // if (rowIndex >= length || moveTo < 0 || moveTo >= length) {\n  //   return\n  // }\n  // data.records.splice(rowIndex, 1)\n  // data.records.splice(moveTo, 0, record)\n  // field.dispatchEvent(\n  //   new CustomEvent('record-change', {\n  //     bubbles: true,\n  //     composed: true\n  //   })\n  // )\n  // field.dispatchEvent(\n  //   new CustomEvent('focus-change', {\n  //     bubbles: true,\n  //     composed: true,\n  //     detail: {\n  //       row: moveTo,\n  //       column: column\n  //     }\n  //   })\n  // )\n}\n"]}

package/dist/src/handlers/move-up copy.d.ts

@@ -1,3 +0,0 @@
-import { DataGridField } from '../data-grid/data-grid-field';
-import { ColumnConfig, GristData, GristRecord } from '../types';
-export declare const MoveUp: (columns: ColumnConfig[], data: GristData, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField) => void;

package/dist/src/handlers/move-up copy.js

@@ -1,26 +0,0 @@
-/*
- * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
- * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
- */
-export const MoveUp = function (columns, data, column, record, rowIndex, field) {
-    var moveTo = rowIndex - 1;
-    var length = data.records.length;
-    if (rowIndex >= length || moveTo < 0 || moveTo >= length) {
-        return;
-    }
-    data.records.splice(rowIndex, 1);
-    data.records.splice(moveTo, 0, record);
-    field.dispatchEvent(new CustomEvent('record-change', {
-        bubbles: true,
-        composed: true
-    }));
-    field.dispatchEvent(new CustomEvent('focus-change', {
-        bubbles: true,
-        composed: true,
-        detail: {
-            row: moveTo,
-            column: column
-        }
-    }));
-};
-//# sourceMappingURL=move-up%20copy.js.map

package/dist/src/handlers/move-up copy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"move-up copy.js","sourceRoot":"","sources":["../../../src/handlers/move-up copy.ts"],"names":[],"mappings":"AAGA;;;GAGG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,UACpB,OAAuB,EACvB,IAAe,EACf,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB;IAEpB,IAAI,MAAM,GAAG,QAAQ,GAAG,CAAC,CAAA;IACzB,IAAI,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAA;IAEhC,IAAI,QAAQ,IAAI,MAAM,IAAI,MAAM,GAAG,CAAC,IAAI,MAAM,IAAI,MAAM,EAAE,CAAC;QACzD,OAAM;IACR,CAAC;IAED,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;IAChC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAAA;IAEtC,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,eAAe,EAAE;QAC/B,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;KACf,CAAC,CACH,CAAA;IAED,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;QAC9B,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE;YACN,GAAG,EAAE,MAAM;YACX,MAAM,EAAE,MAAM;SACf;KACF,CAAC,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristData, GristRecord } from '../types'\n\n/*\n * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,\n * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.\n */\n\nexport const MoveUp = function (\n  columns: ColumnConfig[],\n  data: GristData,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n): void {\n  var moveTo = rowIndex - 1\n  var length = data.records.length\n\n  if (rowIndex >= length || moveTo < 0 || moveTo >= length) {\n    return\n  }\n\n  data.records.splice(rowIndex, 1)\n  data.records.splice(moveTo, 0, record)\n\n  field.dispatchEvent(\n    new CustomEvent('record-change', {\n      bubbles: true,\n      composed: true\n    })\n  )\n\n  field.dispatchEvent(\n    new CustomEvent('focus-change', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        row: moveTo,\n        column: column\n      }\n    })\n  )\n}\n"]}