npm - @operato/data-grist - Versions diffs - 1.12.8 → 1.13.2 - Mend

@operato/data-grist 1.12.8 → 1.13.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/CHANGELOG.md +18 -0
package/dist/src/accumulator/accumulator.d.ts +2 -2
package/dist/src/accumulator/accumulator.js +1 -0
package/dist/src/accumulator/accumulator.js.map +1 -1
package/dist/src/configure/column-builder.js +2 -3
package/dist/src/configure/column-builder.js.map +1 -1
package/dist/src/data-card/data-card-field.js +1 -1
package/dist/src/data-card/data-card-field.js.map +1 -1
package/dist/src/data-grid/data-grid-accum-field.js +6 -0
package/dist/src/data-grid/data-grid-accum-field.js.map +1 -1
package/dist/src/data-list/data-list-field.js +1 -1
package/dist/src/data-list/data-list-field.js.map +1 -1
package/dist/src/filters/filters-form.js +1 -1
package/dist/src/filters/filters-form.js.map +1 -1
package/dist/src/types.d.ts +6 -2
package/dist/src/types.js.map +1 -1
package/dist/stories/accumulator.stories.js +18 -1
package/dist/stories/accumulator.stories.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +2 -2
package/src/accumulator/accumulator.ts +3 -2
package/src/configure/column-builder.ts +1 -2
package/src/data-card/data-card-field.ts +1 -1
package/src/data-grid/data-grid-accum-field.ts +8 -1
package/src/data-list/data-list-field.ts +1 -1
package/src/filters/filters-form.ts +1 -1
package/src/types.ts +9 -2
package/stories/accumulator.stories.ts +18 -1
package/translations/en.json +7 -0
package/translations/ja.json +7 -0
package/translations/ko.json +7 -0
package/translations/ms.json +7 -0
package/translations/zh.json +7 -0
package/dist/stories/tree-column.stories copy.d.ts +0 -26
package/dist/stories/tree-column.stories copy.js +0 -326
package/dist/stories/tree-column.stories copy.js.map +0 -1

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [1.13.2](https://github.com/hatiolab/operato/compare/v1.13.1...v1.13.2) (2024-01-09)
+### :bug: Bug Fix
+* apply HeaderRenderer for LabelRenderer in ox-filters-form ([8dbd037](https://github.com/hatiolab/operato/commit/8dbd0377741a686f3ce6ee0a210d67b52328351e))
+## [1.13.0](https://github.com/hatiolab/operato/compare/v1.12.9...v1.13.0) (2024-01-04)
+### :rocket: New Features
+* accumulator의 태그 추가 ([5321c74](https://github.com/hatiolab/operato/commit/5321c74c413b3f82a6695cc2fafd037df10b0aec))
 ### [1.12.8](https://github.com/hatiolab/operato/compare/v1.12.7...v1.12.8) (2024-01-03)

package/dist/src/accumulator/accumulator.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { AccumulatorFunc, ColumnConfig, GristData } from '../types';
-export declare function accumulate(data: GristData, column: ColumnConfig, accumulator: AccumulatorFunc): string | number;
+import { AccumulatorObject, ColumnConfig, GristData } from '../types';
+export declare function accumulate(data: GristData, column: ColumnConfig, accumulator: AccumulatorObject): string | number;

package/dist/src/accumulator/accumulator.js CHANGED Viewed

@@ -32,6 +32,7 @@ const Accumulators = {
     max
 };
 export function accumulate(data, column, accumulator) {
+    accumulator = typeof accumulator === 'object' ? accumulator.type : accumulator;
     var func = accumulator;
     if (typeof accumulator == 'string') {
         func = Accumulators[accumulator];

package/dist/src/accumulator/accumulator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"accumulator.js","sourceRoot":"","sources":["../../../src/accumulator/accumulator.ts"],"names":[],"mappings":"AAEA,SAAS,GAAG,CAAC,IAAe,EAAE,MAAoB;IAChD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;IAExB,OAAO,IAAI,CAAC,OAAO;SAChB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;SAC7C,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;QACtB,OAAO,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,CAAC,CAAA;AACT,CAAC;AAED,SAAS,GAAG,CAAC,IAAe,EAAE,MAAoB;IAChD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;IACxB,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IAEnF,OAAO,CACL,gBAAgB,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;QACtC,OAAO,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAChC,CAAA;AACH,CAAC;AAED,SAAS,KAAK,CAAC,IAAe,EAAE,MAAoB;IAClD,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAA;AAC5B,CAAC;AAED,SAAS,GAAG,CAAC,IAAe,EAAE,MAAoB;IAChD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;IAExB,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CACnB,IAAI,EACJ,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/F,CAAA;AACH,CAAC;AAED,SAAS,GAAG,CAAC,IAAe,EAAE,MAAoB;IAChD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;IAExB,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CACnB,IAAI,EACJ,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/F,CAAA;AACH,CAAC;AAED,MAAM,YAAY,GAAmF;IACnG,GAAG;IACH,GAAG;IACH,KAAK;IACL,GAAG;IACH,GAAG;CACJ,CAAA;AAED,MAAM,UAAU,UAAU,CAAC,IAAe,EAAE,MAAoB,EAAE,~~WAA4B~~;~~IAC5F~~,IAAI,IAAI,GAAG,WAAyE,CAAA;IAEpF,IAAI,OAAO,WAAW,IAAI,QAAQ,EAAE,CAAC;QACnC,IAAI,GAAG,YAAY,CAAC,WAAW,CAAC,CAAA;IAClC,CAAC;IAED,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAA;AACtC,CAAC","sourcesContent":["import { ~~AccumulatorFunc~~, ColumnConfig, GristData } from '../types'\n\nfunction sum(data: GristData, column: ColumnConfig): number {\n const name = column.name\n\n return data.records\n .filter(record => !Number.isNaN(record[name]))\n .reduce((sum, record) => {\n return sum + Number(record[name])\n }, 0)\n}\n\nfunction avg(data: GristData, column: ColumnConfig): number {\n const name = column.name\n const effectiveRecords = data.records.filter(record => !Number.isNaN(record[name]))\n\n return (\n effectiveRecords.reduce((sum, record) => {\n return sum + Number(record[name])\n }, 0) / effectiveRecords.length\n )\n}\n\nfunction count(data: GristData, column: ColumnConfig): number {\n return data.records.length\n}\n\nfunction min(data: GristData, column: ColumnConfig): number {\n const name = column.name\n\n return Math.min.apply(\n null,\n data.records.filter(record => !Number.isNaN(record[name])).map(record => Number(record[name]))\n )\n}\n\nfunction max(data: GristData, column: ColumnConfig): number {\n const name = column.name\n\n return Math.max.apply(\n null,\n data.records.filter(record => !Number.isNaN(record[name])).map(record => Number(record[name]))\n )\n}\n\nconst Accumulators: { [name: string]: (data: GristData, column: ColumnConfig) => string \| number } = {\n sum,\n avg,\n count,\n min,\n max\n}\n\nexport function accumulate(data: GristData, column: ColumnConfig, accumulator: ~~AccumulatorFunc~~) {\n var func = accumulator as (data: GristData, column: ColumnConfig) => string \| number\n\n if (typeof accumulator == 'string') {\n func = Accumulators[accumulator]\n }\n\n return func.call(null, data, column)\n}\n"]}
1	+ {"version":3,"file":"accumulator.js","sourceRoot":"","sources":["../../../src/accumulator/accumulator.ts"],"names":[],"mappings":"AAEA,SAAS,GAAG,CAAC,IAAe,EAAE,MAAoB;IAChD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;IAExB,OAAO,IAAI,CAAC,OAAO;SAChB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;SAC7C,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;QACtB,OAAO,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,CAAC,CAAA;AACT,CAAC;AAED,SAAS,GAAG,CAAC,IAAe,EAAE,MAAoB;IAChD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;IACxB,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IAEnF,OAAO,CACL,gBAAgB,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;QACtC,OAAO,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAChC,CAAA;AACH,CAAC;AAED,SAAS,KAAK,CAAC,IAAe,EAAE,MAAoB;IAClD,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAA;AAC5B,CAAC;AAED,SAAS,GAAG,CAAC,IAAe,EAAE,MAAoB;IAChD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;IAExB,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CACnB,IAAI,EACJ,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/F,CAAA;AACH,CAAC;AAED,SAAS,GAAG,CAAC,IAAe,EAAE,MAAoB;IAChD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;IAExB,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CACnB,IAAI,EACJ,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/F,CAAA;AACH,CAAC;AAED,MAAM,YAAY,GAAmF;IACnG,GAAG;IACH,GAAG;IACH,KAAK;IACL,GAAG;IACH,GAAG;CACJ,CAAA;AAED,MAAM,UAAU,UAAU,CAAC,IAAe,EAAE,MAAoB,EAAE,WAA8B;IAC9F,WAAW,GAAG,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAA;IAC9E,IAAI,IAAI,GAAG,WAAyE,CAAA;IAEpF,IAAI,OAAO,WAAW,IAAI,QAAQ,EAAE,CAAC;QACnC,IAAI,GAAG,YAAY,CAAC,WAAW,CAAC,CAAA;IAClC,CAAC;IAED,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAA;AACtC,CAAC","sourcesContent":["import { AccumulatorObject, ColumnConfig, GristData } from '../types'\n\nfunction sum(data: GristData, column: ColumnConfig): number {\n const name = column.name\n\n return data.records\n .filter(record => !Number.isNaN(record[name]))\n .reduce((sum, record) => {\n return sum + Number(record[name])\n }, 0)\n}\n\nfunction avg(data: GristData, column: ColumnConfig): number {\n const name = column.name\n const effectiveRecords = data.records.filter(record => !Number.isNaN(record[name]))\n\n return (\n effectiveRecords.reduce((sum, record) => {\n return sum + Number(record[name])\n }, 0) / effectiveRecords.length\n )\n}\n\nfunction count(data: GristData, column: ColumnConfig): number {\n return data.records.length\n}\n\nfunction min(data: GristData, column: ColumnConfig): number {\n const name = column.name\n\n return Math.min.apply(\n null,\n data.records.filter(record => !Number.isNaN(record[name])).map(record => Number(record[name]))\n )\n}\n\nfunction max(data: GristData, column: ColumnConfig): number {\n const name = column.name\n\n return Math.max.apply(\n null,\n data.records.filter(record => !Number.isNaN(record[name])).map(record => Number(record[name]))\n )\n}\n\nconst Accumulators: { [name: string]: (data: GristData, column: ColumnConfig) => string \| number } = {\n sum,\n avg,\n count,\n min,\n max\n}\n\nexport function accumulate(data: GristData, column: ColumnConfig, accumulator: AccumulatorObject) {\n accumulator = typeof accumulator === 'object' ? accumulator.type : accumulator\n var func = accumulator as (data: GristData, column: ColumnConfig) => string \| number\n\n if (typeof accumulator == 'string') {\n func = Accumulators[accumulator]\n }\n\n return func.call(null, data, column)\n}\n"]}

package/dist/src/configure/column-builder.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { generateGutterColumn } from '../gutters';
 import { getGristEventHandler } from '../handlers';
 import { getRenderer } from '../renderers';
 export const buildColumn = (column) => {
-    var _a;
+    var _a, _b;
     var compiled = { ...column };
     if (column.type == 'gutter') {
         compiled = generateGutterColumn(column);
@@ -28,9 +28,8 @@ export const buildColumn = (column) => {
         let type = typeof label;
         switch (type) {
             case 'boolean':
-                let title = typeof header == 'string' ? header : name;
                 compiled.label = {
-                    renderer: () => title
+                    renderer: ((_b = compiled.header) === null || _b === void 0 ? void 0 : _b.renderer) || (() => name)
                 };
                 break;
             case 'string':

package/dist/src/configure/column-builder.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"column-builder.js","sourceRoot":"","sources":["../../../src/configure/column-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AACtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAG1C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAW,EAAgB,EAAE;;IACvD,IAAI,QAAQ,GAAiB,EAAE,GAAG,MAAM,EAAE,CAAA;IAE1C,IAAI,MAAM,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC;QAC5B,QAAQ,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAA;IACzC,CAAC;IAED,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAA;IAEhE,YAAY;IAEZ,IAAI,OAAO,MAAM,IAAI,QAAQ,EAAE,CAAC;QAC9B,QAAQ,CAAC,MAAM,GAAG;YAChB,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM;SACvB,CAAA;IACH,CAAC;IAED,IAAI,OAAO,CAAA,MAAA,QAAQ,CAAC,MAAM,0CAAE,QAAQ,CAAA,IAAI,QAAQ,EAAE,CAAC;QACjD,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAA;QACrC,QAAQ,CAAC,MAAM,GAAG;YAChB,GAAG,QAAQ,CAAC,MAAM;YAClB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;SACrB,CAAA;IACH,CAAC;IAED,WAAW;IACX,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,IAAI,GAAG,OAAO,KAAK,CAAA;QACvB,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,SAAS;gBACZ,~~IAAI~~,KAAK,GAAG,~~OAAO~~,~~MAAM~~,~~IAAI~~,QAAQ,CAAC,~~CAAC,CAAC,~~MAAM,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~IAAI,CAAA;gBACrD,QAAQ,~~CAAC,~~KAAK,~~GAAG~~;oBACf~~,~~QAAQ,~~EAAE,~~GAAG~~,~~EAAE~~,CAAC~~,KAAK~~;~~iBACtB~~,CAAA;gBACD,MAAK;YACP,KAAK,QAAQ;gBACX,QAAQ,CAAC,KAAK,GAAG;oBACf,QAAQ,EAAE,GAAG,EAAE,CAAC,KAAK;iBACtB,CAAA;gBACD,MAAK;YACP;gBACE,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAA;QAC1B,CAAC;IACH,CAAC;SAAM,CAAC;QACN,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAA;IACxB,CAAC;IAED;;OAEG;IACH,IAAI,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,MAAM,IAAI,EAAE,CAAA;IAE7E,cAAc,GAAG,WAAW,CAAC,cAAc,IAAI,MAAM,CAAC,IAAI,CAAC,CAAA;IAC3D,IAAI,QAAQ,KAAK,KAAK,IAAI,OAAO,MAAM,KAAK,UAAU,EAAE,CAAC;QACvD,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IACjC,CAAC;IAED,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE,CAAC;QACrC,UAAU,GAAG,IAAI,CAAA;IACnB,CAAC;IAED,QAAQ,CAAC,MAAM,GAAG;QAChB,GAAG,MAAM;QACT,UAAU;QACV,QAAQ,EAAE,cAAc;QACxB,MAAM;KACP,CAAA;IAED,YAAY;IACZ,IAAI,MAAM,EAAE,CAAC;QACX,IAAI,IAAI,GAAG,OAAO,MAAM,CAAA;QACxB,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,SAAS;gBACZ,QAAQ,CAAC,MAAM,GAAG;oBAChB,IAAI,EAAE,MAAM,CAAC,IAAI;oBACjB,QAAQ,EAAE,IAAI;iBACf,CAAA;gBACD,MAAK;YACP,KAAK,QAAQ;gBACX,QAAQ,CAAC,MAAM,GAAG;oBAChB,IAAI,EAAE,MAAM,CAAC,IAAI;oBACjB,QAAQ,EAAE,MAAwB;iBACnC,CAAA;gBACD,MAAK;YACP;gBACE,QAAQ,CAAC,MAAM,GAAG;oBAChB,YAAY;oBACZ,IAAI,EAAE,MAAM,CAAC,IAAI;oBACjB,QAAQ,EAAE,IAAI;oBACd,GAAI,MAA6B;iBAClC,CAAA;QACL,CAAC;IACH,CAAC;IAED,aAAa;IACb,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;IAE/C,QAAQ,CAAC,QAAQ,GAAG;QAClB,KAAK,EAAE,KAAK,IAAI,oBAAoB,CAAC,KAAK,CAAC;QAC3C,QAAQ,EAAE,QAAQ,IAAI,oBAAoB,CAAC,QAAQ,CAAC;QACpD,KAAK,EAAE,KAAK,IAAI,oBAAoB,CAAC,KAAK,CAAC;KAC5C,CAAA;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA","sourcesContent":["import { FilterConfigObject, FilterOperator } from '..'\nimport { NOOP } from '../const'\nimport { getEditor } from '../editors'\nimport { generateGutterColumn } from '../gutters'\nimport { getGristEventHandler } from '../handlers'\nimport { getRenderer } from '../renderers'\nimport { ColumnConfig } from '../types'\n\nexport const buildColumn = (column: any): ColumnConfig => {\n var compiled: ColumnConfig = { ...column }\n\n if (column.type == 'gutter') {\n compiled = generateGutterColumn(column)\n }\n\n var { name, header, record, handlers, label, filter } = compiled\n\n /* header /\n\n if (typeof header == 'string') {\n compiled.header = {\n renderer: () => header\n }\n }\n\n if (typeof compiled.header?.renderer == 'string') {\n const text = compiled.header.renderer\n compiled.header = {\n ...compiled.header,\n renderer: () => text\n }\n }\n\n / label /\n if (label) {\n let type = typeof label\n switch (type) {\n case 'boolean':\n ~~let title = typeof header == 'string' ? header : name\n~~ compiled.label = {\n renderer: () => ~~title~~\n }\n break\n case 'string':\n compiled.label = {\n renderer: () => label\n }\n break\n default:\n compiled.label = label\n }\n } else {\n compiled.label = false\n }\n\n /\n * record\n /\n var { renderer: recordRenderer, editor, editable, classifier } = record \|\| {}\n\n recordRenderer = getRenderer(recordRenderer \|\| column.type)\n if (editable !== false && typeof editor !== 'function') {\n editor = getEditor(column.type)\n }\n\n if (typeof classifier !== 'function') {\n classifier = NOOP\n }\n\n compiled.record = {\n ...record,\n classifier,\n renderer: recordRenderer,\n editor\n }\n\n / filter /\n if (filter) {\n let type = typeof filter\n switch (type) {\n case 'boolean':\n compiled.filter = {\n type: column.type,\n operator: 'eq'\n }\n break\n case 'string':\n compiled.filter = {\n type: column.type,\n operator: filter as FilterOperator\n }\n break\n default:\n compiled.filter = {\n //@ts-ignore\n type: column.type,\n operator: 'eq',\n ...(filter as FilterConfigObject)\n }\n }\n }\n\n / handler */\n var { click, dblclick, focus } = handlers \|\| {}\n\n compiled.handlers = {\n click: click && getGristEventHandler(click),\n dblclick: dblclick && getGristEventHandler(dblclick),\n focus: focus && getGristEventHandler(focus)\n }\n\n return compiled\n}\n"]}
1	+ {"version":3,"file":"column-builder.js","sourceRoot":"","sources":["../../../src/configure/column-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { FilterConfigObject, FilterOperator } from '..'\nimport { NOOP } from '../const'\nimport { getEditor } from '../editors'\nimport { generateGutterColumn } from '../gutters'\nimport { getGristEventHandler } from '../handlers'\nimport { getRenderer } from '../renderers'\nimport { ColumnConfig } from '../types'\n\nexport const buildColumn = (column: any): ColumnConfig => {\n var compiled: ColumnConfig = { ...column }\n\n if (column.type == 'gutter') {\n compiled = generateGutterColumn(column)\n }\n\n var { name, header, record, handlers, label, filter } = compiled\n\n /* header /\n\n if (typeof header == 'string') {\n compiled.header = {\n renderer: () => header\n }\n }\n\n if (typeof compiled.header?.renderer == 'string') {\n const text = compiled.header.renderer\n compiled.header = {\n ...compiled.header,\n renderer: () => text\n }\n }\n\n / label /\n if (label) {\n let type = typeof label\n switch (type) {\n case 'boolean':\n compiled.label = {\n renderer: compiled.header?.renderer \|\| (() => name)\n }\n break\n case 'string':\n compiled.label = {\n renderer: () => label\n }\n break\n default:\n compiled.label = label\n }\n } else {\n compiled.label = false\n }\n\n /\n * record\n /\n var { renderer: recordRenderer, editor, editable, classifier } = record \|\| {}\n\n recordRenderer = getRenderer(recordRenderer \|\| column.type)\n if (editable !== false && typeof editor !== 'function') {\n editor = getEditor(column.type)\n }\n\n if (typeof classifier !== 'function') {\n classifier = NOOP\n }\n\n compiled.record = {\n ...record,\n classifier,\n renderer: recordRenderer,\n editor\n }\n\n / filter /\n if (filter) {\n let type = typeof filter\n switch (type) {\n case 'boolean':\n compiled.filter = {\n type: column.type,\n operator: 'eq'\n }\n break\n case 'string':\n compiled.filter = {\n type: column.type,\n operator: filter as FilterOperator\n }\n break\n default:\n compiled.filter = {\n //@ts-ignore\n type: column.type,\n operator: 'eq',\n ...(filter as FilterConfigObject)\n }\n }\n }\n\n / handler */\n var { click, dblclick, focus } = handlers \|\| {}\n\n compiled.handlers = {\n click: click && getGristEventHandler(click),\n dblclick: dblclick && getGristEventHandler(dblclick),\n focus: focus && getGristEventHandler(focus)\n }\n\n return compiled\n}\n"]}

package/dist/src/data-card/data-card-field.js CHANGED Viewed

@@ -15,7 +15,7 @@ let DataCardField = class DataCardField extends LitElement {
         var { label, record: { renderer: recordRenderer } } = column;
         if (typeof label == 'object') {
             let { renderer: labelRenderer } = label;
-            return html `<label>${labelRenderer()}</label>${recordRenderer(value, column, record, rowIndex, this)}`;
+            return html `<label>${labelRenderer(column)}</label>${recordRenderer(value, column, record, rowIndex, this)}`;
         }
         else {
             return html `${recordRenderer(value, column, record, rowIndex, this)}`;

package/dist/src/data-card/data-card-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-card-field.js","sourceRoot":"","sources":["../../../src/data-card/data-card-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAI5D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAmEuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAkBnD,CAAC;IAfC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAE9C,IAAI,EACF,KAAK,EACL,MAAM,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,EACrC,GAAG,MAAM,CAAA;QAEV,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YACvC,OAAO,IAAI,CAAA,UAAU,aAAa,~~EAAE~~,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;~~QACxG~~,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QACvE,CAAC;IACH,CAAC;;AArFM,oBAAM,GAAG;IACd,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DF;CACF,AA/DY,CA+DZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AAtE/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CAuFzB","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipStyles } from '@operato/styles'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\n@customElement('ox-card-field')\nexport class DataCardField extends LitElement {\n static styles = [\n TooltipStyles,\n css`\n :host {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n\n white-space: nowrap;\n\n font: inherit;\n }\n\n :host([thumbnail]) {\n flex-direction: column;\n justify-content: center;\n }\n\n :host([thumbnail]) > * {\n object-fit: contain;\n max-width: 100%;\n max-height: 100%;\n }\n\n :host > * {\n margin: 0;\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n text-align: left;\n }\n\n :host > [center] {\n flex: none;\n margin: 0 auto;\n }\n\n :host([name]) label {\n display: none;\n }\n\n label {\n flex: none;\n width: 33%;\n padding-bottom: 2px;\n font: var(--data-card-item-etc-label-font);\n text-transform: capitalize;\n }\n\n :host([name]) > span,\n label + a {\n display: block;\n min-width: 100%;\n }\n\n @media only screen and (max-width: 460px) {\n [center] {\n margin: initial;\n }\n }\n `\n ]\n\n @property({ attribute: true }) align?: string\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Number }) rowIndex: number = -1\n @property({ type: Object }) value?: object\n\n render(): TemplateResult {\n var { value, column, record, rowIndex } = this\n\n var {\n label,\n record: { renderer: recordRenderer }\n } = column\n\n if (typeof label == 'object') {\n let { renderer: labelRenderer } = label\n return html`<label>${labelRenderer()}</label>${recordRenderer(value, column, record, rowIndex, this)}`\n } else {\n return html`${recordRenderer(value, column, record, rowIndex, this)}`\n }\n }\n}\n"]}
1	+ {"version":3,"file":"data-card-field.js","sourceRoot":"","sources":["../../../src/data-card/data-card-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAI5D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAmEuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAkBnD,CAAC;IAfC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAE9C,IAAI,EACF,KAAK,EACL,MAAM,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,EACrC,GAAG,MAAM,CAAA;QAEV,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YACvC,OAAO,IAAI,CAAA,UAAU,aAAa,CAAC,MAAM,CAAC,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QAC9G,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QACvE,CAAC;IACH,CAAC;;AArFM,oBAAM,GAAG;IACd,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DF;CACF,AA/DY,CA+DZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AAtE/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CAuFzB","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipStyles } from '@operato/styles'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\n@customElement('ox-card-field')\nexport class DataCardField extends LitElement {\n static styles = [\n TooltipStyles,\n css`\n :host {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n\n white-space: nowrap;\n\n font: inherit;\n }\n\n :host([thumbnail]) {\n flex-direction: column;\n justify-content: center;\n }\n\n :host([thumbnail]) > * {\n object-fit: contain;\n max-width: 100%;\n max-height: 100%;\n }\n\n :host > * {\n margin: 0;\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n text-align: left;\n }\n\n :host > [center] {\n flex: none;\n margin: 0 auto;\n }\n\n :host([name]) label {\n display: none;\n }\n\n label {\n flex: none;\n width: 33%;\n padding-bottom: 2px;\n font: var(--data-card-item-etc-label-font);\n text-transform: capitalize;\n }\n\n :host([name]) > span,\n label + a {\n display: block;\n min-width: 100%;\n }\n\n @media only screen and (max-width: 460px) {\n [center] {\n margin: initial;\n }\n }\n `\n ]\n\n @property({ attribute: true }) align?: string\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Number }) rowIndex: number = -1\n @property({ type: Object }) value?: object\n\n render(): TemplateResult {\n var { value, column, record, rowIndex } = this\n\n var {\n label,\n record: { renderer: recordRenderer }\n } = column\n\n if (typeof label == 'object') {\n let { renderer: labelRenderer } = label\n return html`<label>${labelRenderer(column)}</label>${recordRenderer(value, column, record, rowIndex, this)}`\n } else {\n return html`${recordRenderer(value, column, record, rowIndex, this)}`\n }\n }\n}\n"]}

package/dist/src/data-grid/data-grid-accum-field.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { TooltipStyles } from '@operato/styles';
 import { ZERO_COLUMN } from '../configure/zero-config';
+import { i18next } from '@operato/i18n';
 const DEFAULT_TEXT_ALIGN = 'left';
 let DataGridAccumField = class DataGridAccumField extends LitElement {
     constructor() {
@@ -22,6 +23,11 @@ let DataGridAccumField = class DataGridAccumField extends LitElement {
         }
         var { value, column, record, rowIndex } = this;
         var { renderer } = column.record;
+        // tag가 true이면 value 앞에 (sum) 같은 태그 생성
+        var { accumulator } = column;
+        if (typeof accumulator === 'object' && typeof accumulator.type === 'string' && (accumulator === null || accumulator === void 0 ? void 0 : accumulator.tag)) {
+            value = `(${i18next.t(`label.accumulator_${accumulator.type}`)}) ${value}`;
+        }
         return html `${renderer === null || renderer === void 0 ? void 0 : renderer.call(this, value, column, record, rowIndex, this)}`;
     }
     updated(changes) {

package/dist/src/data-grid/data-grid-accum-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-grid-accum-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-accum-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkC,OAAO,EAAE,MAAM,KAAK,CAAA;AACpF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;~~AAGtD~~,MAAM,kBAAkB,GAAG,MAAM,CAAA;AAG1B,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAwCwC,UAAK,GAAG,kBAAkB,CAAA;QAC3C,WAAM,GAAgB,EAAE,CAAA;QACxB,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAG,CAAC,CAAC,CAAA;QACb,gBAAW,GAAG,CAAC,CAAA;QACd,YAAO,GAAG,KAAK,CAAA;QAChB,UAAK,GAAG,EAAE,CAAA;QACN,eAAU,GAAQ,KAAK,CAAA;~~IA4BzD~~,CAAC;~~IA1BC~~,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,gCAAgC,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,OAAO,EAAE,CAAA;QACxF,CAAC;QAED,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC9C,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;QAEhC,OAAO,IAAI,CAAA,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;IAC7E,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,kBAAkB,CAAA;YAC1D,IAAI,KAAK,IAAI,kBAAkB,EAAE,CAAC;gBAChC,IAAI,OAAO,GAAG,QAAQ,CAAA;gBACtB,QAAQ,KAAK,EAAE,CAAC;oBACd,KAAK,OAAO;wBACV,OAAO,GAAG,UAAU,CAAA;wBACpB,MAAK;gBACT,CAAC;gBACD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mCAAmC,EAAE,OAAO,CAAC,CAAA;gBACpE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAA;YAC/D,CAAC;QACH,CAAC;IACH,CAAC;;~~AAzEM~~,yBAAM,GAAG;IACd,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCF;CACF,AArCY,CAqCZ;AAE4C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;iDAA2B;AAC3C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAgB;AACd;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAgB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAW;AACN;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;sDAAwB;AA/C5C,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,~~CA2E9B~~","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipStyles } from '@operato/styles'\n\nimport { ZERO_COLUMN } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-accum-field')\nexport class DataGridAccumField extends LitElement {\n static styles = [\n TooltipStyles,\n css`\n :host {\n display: flex;\n\n align-items: center;\n justify-content: var(--data-grid-field-justify-content, flex-start);\n position: relative;\n\n white-space: nowrap;\n background-color: var(--grid-accum-record-background-color, #ccc);\n border: 1px solid transparent;\n border-width: 1px 0;\n border-bottom: var(--grid-record-border-bottom);\n\n font-size: var(--grid-record-wide-fontsize);\n min-height: 19px;\n }\n\n span,\n pre {\n display: block;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n * {\n margin: 0;\n text-align: var(--data-grid-field-text-align);\n }\n\n *[center] {\n flex: none;\n margin: 0 auto;\n }\n `\n ]\n\n @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n @property({ type: Object }) record: GristRecord = {}\n @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Number }) rowIndex = -1\n @property({ type: Number }) columnIndex = 0\n @property({ type: Boolean }) editing = false\n @property({ type: Object }) value = {}\n @property({ attribute: false }) emphasized: any = false\n\n render(): TemplateResult {\n if (!this.column \|\| !this.column.accumulator) {\n return this.columnIndex == 0 ? html`<mwc-icon>functions</mwc-icon>` : html`${nothing}`\n }\n\n var { value, column, record, rowIndex } = this\n var { renderer } = column.record\n\n return html`${renderer?.call(this, value, column, record, rowIndex, this)}`\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('column')) {\n var align = this.column.record.align \|\| DEFAULT_TEXT_ALIGN\n if (align != DEFAULT_TEXT_ALIGN) {\n let justify = 'center'\n switch (align) {\n case 'right':\n justify = 'flex-end'\n break\n }\n this.style.setProperty('--data-grid-field-justify-content', justify)\n this.style.setProperty('--data-grid-field-text-align', align)\n }\n }\n }\n}\n"]}
1	+ {"version":3,"file":"data-grid-accum-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-accum-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkC,OAAO,EAAE,MAAM,KAAK,CAAA;AACpF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,MAAM,kBAAkB,GAAG,MAAM,CAAA;AAG1B,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAwCwC,UAAK,GAAG,kBAAkB,CAAA;QAC3C,WAAM,GAAgB,EAAE,CAAA;QACxB,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAG,CAAC,CAAC,CAAA;QACb,gBAAW,GAAG,CAAC,CAAA;QACd,YAAO,GAAG,KAAK,CAAA;QAChB,UAAK,GAAG,EAAE,CAAA;QACN,eAAU,GAAQ,KAAK,CAAA;IAkCzD,CAAC;IAhCC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,gCAAgC,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,OAAO,EAAE,CAAA;QACxF,CAAC;QAED,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC9C,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;QAEhC,sCAAsC;QACtC,IAAI,EAAE,WAAW,EAAE,GAAG,MAAM,CAAA;QAC5B,IAAI,OAAO,WAAW,KAAK,QAAQ,IAAI,OAAO,WAAW,CAAC,IAAI,KAAK,QAAQ,KAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,GAAG,CAAA,EAAE,CAAC;YAChG,KAAK,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,qBAAqB,WAAW,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,EAAE,CAAA;QAC5E,CAAC;QAED,OAAO,IAAI,CAAA,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;IAC7E,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,kBAAkB,CAAA;YAC1D,IAAI,KAAK,IAAI,kBAAkB,EAAE,CAAC;gBAChC,IAAI,OAAO,GAAG,QAAQ,CAAA;gBACtB,QAAQ,KAAK,EAAE,CAAC;oBACd,KAAK,OAAO;wBACV,OAAO,GAAG,UAAU,CAAA;wBACpB,MAAK;gBACT,CAAC;gBACD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mCAAmC,EAAE,OAAO,CAAC,CAAA;gBACpE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAA;YAC/D,CAAC;QACH,CAAC;IACH,CAAC;;AA/EM,yBAAM,GAAG;IACd,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCF;CACF,AArCY,CAqCZ;AAE4C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;iDAA2B;AAC3C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAgB;AACd;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAgB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAW;AACN;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;sDAAwB;AA/C5C,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CAiF9B","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipStyles } from '@operato/styles'\n\nimport { ZERO_COLUMN } from '../configure/zero-config'\nimport { AccumulatorObject, ColumnConfig, GristRecord } from '../types'\nimport { i18next } from '@operato/i18n'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-accum-field')\nexport class DataGridAccumField extends LitElement {\n static styles = [\n TooltipStyles,\n css`\n :host {\n display: flex;\n\n align-items: center;\n justify-content: var(--data-grid-field-justify-content, flex-start);\n position: relative;\n\n white-space: nowrap;\n background-color: var(--grid-accum-record-background-color, #ccc);\n border: 1px solid transparent;\n border-width: 1px 0;\n border-bottom: var(--grid-record-border-bottom);\n\n font-size: var(--grid-record-wide-fontsize);\n min-height: 19px;\n }\n\n span,\n pre {\n display: block;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n * {\n margin: 0;\n text-align: var(--data-grid-field-text-align);\n }\n\n *[center] {\n flex: none;\n margin: 0 auto;\n }\n `\n ]\n\n @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n @property({ type: Object }) record: GristRecord = {}\n @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Number }) rowIndex = -1\n @property({ type: Number }) columnIndex = 0\n @property({ type: Boolean }) editing = false\n @property({ type: Object }) value = {}\n @property({ attribute: false }) emphasized: any = false\n\n render(): TemplateResult {\n if (!this.column \|\| !this.column.accumulator) {\n return this.columnIndex == 0 ? html`<mwc-icon>functions</mwc-icon>` : html`${nothing}`\n }\n\n var { value, column, record, rowIndex } = this\n var { renderer } = column.record\n\n // tag가 true이면 value 앞에 (sum) 같은 태그 생성\n var { accumulator } = column\n if (typeof accumulator === 'object' && typeof accumulator.type === 'string' && accumulator?.tag) {\n value = `(${i18next.t(`label.accumulator_${accumulator.type}`)}) ${value}`\n }\n\n return html`${renderer?.call(this, value, column, record, rowIndex, this)}`\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('column')) {\n var align = this.column.record.align \|\| DEFAULT_TEXT_ALIGN\n if (align != DEFAULT_TEXT_ALIGN) {\n let justify = 'center'\n switch (align) {\n case 'right':\n justify = 'flex-end'\n break\n }\n this.style.setProperty('--data-grid-field-justify-content', justify)\n this.style.setProperty('--data-grid-field-text-align', align)\n }\n }\n }\n}\n"]}

package/dist/src/data-list/data-list-field.js CHANGED Viewed

@@ -15,7 +15,7 @@ let DataListField = class DataListField extends LitElement {
         var { label, record: { renderer: fieldRenderer } } = column;
         if (typeof label == 'object') {
             let { renderer: labelRenderer } = label;
-            return html `<label>${labelRenderer()}</label>${fieldRenderer(value, column, record, rowIndex, this)}`;
+            return html `<label>${labelRenderer(column)}</label>${fieldRenderer(value, column, record, rowIndex, this)}`;
         }
         else {
             return html `${fieldRenderer(value, column, record, rowIndex, this)}`;

package/dist/src/data-list/data-list-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-list-field.js","sourceRoot":"","sources":["../../../src/data-list/data-list-field.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGxC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAwDuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAkBnD,CAAC;IAfC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAE9C,IAAI,EACF,KAAK,EACL,MAAM,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,EACpC,GAAG,MAAM,CAAA;QAEV,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YACvC,OAAO,IAAI,CAAA,UAAU,aAAa,~~EAAE~~,WAAW,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;~~QACvG~~,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA,GAAG,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QACtE,CAAC;IACH,CAAC;;AA1EM,oBAAM,GAAG;IACd,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiDF;CACF,AApDY,CAoDZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AA3D/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CA4EzB","sourcesContent":["import { ColumnConfig, GristRecord } from '../types'\nimport { LitElement, TemplateResult, css, html } from 'lit'\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipStyles } from '@operato/styles'\n\n@customElement('ox-list-field')\nexport class DataListField extends LitElement {\n static styles = [\n TooltipStyles,\n css`\n :host {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n\n white-space: normal;\n padding: 1px 7px 1px 0;\n\n font: inherit;\n }\n\n :host > * {\n flex: 1;\n margin: 0;\n text-align: left;\n }\n\n :host > [center] {\n flex: none;\n margin: 0 auto;\n }\n\n :host([thumbnail]) {\n flex-direction: column;\n justify-content: center;\n }\n\n :host([thumbnail]) > {\n flex: unset;\n object-fit: contain;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n }\n\n label {\n flex: none;\n width: 33%;\n font: var(--data-list-item-etc-label-font);\n }\n\n @media only screen and (max-width: 460px) {\n *[center] {\n margin: initial;\n }\n }\n `\n ]\n\n @property({ attribute: true }) align?: string\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Number }) rowIndex: number = -1\n @property({ type: Object }) value?: object\n\n render(): TemplateResult {\n var { value, column, record, rowIndex } = this\n\n var {\n label,\n record: { renderer: fieldRenderer }\n } = column\n\n if (typeof label == 'object') {\n let { renderer: labelRenderer } = label\n return html`<label>${labelRenderer()}</label>${fieldRenderer(value, column, record, rowIndex, this)}`\n } else {\n return html`${fieldRenderer(value, column, record, rowIndex, this)}`\n }\n }\n}\n"]}
1	+ {"version":3,"file":"data-list-field.js","sourceRoot":"","sources":["../../../src/data-list/data-list-field.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGxC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAwDuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAkBnD,CAAC;IAfC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAE9C,IAAI,EACF,KAAK,EACL,MAAM,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,EACpC,GAAG,MAAM,CAAA;QAEV,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YACvC,OAAO,IAAI,CAAA,UAAU,aAAa,CAAC,MAAM,CAAC,WAAW,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QAC7G,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA,GAAG,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QACtE,CAAC;IACH,CAAC;;AA1EM,oBAAM,GAAG;IACd,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiDF;CACF,AApDY,CAoDZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AA3D/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CA4EzB","sourcesContent":["import { ColumnConfig, GristRecord } from '../types'\nimport { LitElement, TemplateResult, css, html } from 'lit'\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipStyles } from '@operato/styles'\n\n@customElement('ox-list-field')\nexport class DataListField extends LitElement {\n static styles = [\n TooltipStyles,\n css`\n :host {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n\n white-space: normal;\n padding: 1px 7px 1px 0;\n\n font: inherit;\n }\n\n :host > * {\n flex: 1;\n margin: 0;\n text-align: left;\n }\n\n :host > [center] {\n flex: none;\n margin: 0 auto;\n }\n\n :host([thumbnail]) {\n flex-direction: column;\n justify-content: center;\n }\n\n :host([thumbnail]) > {\n flex: unset;\n object-fit: contain;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n }\n\n label {\n flex: none;\n width: 33%;\n font: var(--data-list-item-etc-label-font);\n }\n\n @media only screen and (max-width: 460px) {\n *[center] {\n margin: initial;\n }\n }\n `\n ]\n\n @property({ attribute: true }) align?: string\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Number }) rowIndex: number = -1\n @property({ type: Object }) value?: object\n\n render(): TemplateResult {\n var { value, column, record, rowIndex } = this\n\n var {\n label,\n record: { renderer: fieldRenderer }\n } = column\n\n if (typeof label == 'object') {\n let { renderer: labelRenderer } = label\n return html`<label>${labelRenderer(column)}</label>${fieldRenderer(value, column, record, rowIndex, this)}`\n } else {\n return html`${fieldRenderer(value, column, record, rowIndex, this)}`\n }\n }\n}\n"]}

package/dist/src/filters/filters-form.js CHANGED Viewed

@@ -87,7 +87,7 @@ let FiltersForm = class FiltersForm extends LitElement {
                 const labelText = filterLabel !== undefined
                     ? filterLabel
                     : typeof label === 'object' && label.renderer
-                        ? label.renderer()
+                        ? label.renderer(column)
                         : header.renderer(column) || name;
                 const idx = operator === 'between' ? 1 : 0;
                 const renderer = getFilterRenderer(operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'

package/dist/src/filters/filters-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filters-form.js","sourceRoot":"","sources":["../../../src/filters/filters-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'\nimport { customElement, property, queryAsync, state } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '..'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, FilterValue, GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n name: string\n operator: FilterOperator\n value: any\n}\n\n@customElement('ox-filters-form')\nexport class FiltersForm extends LitElement {\n static styles = [\n FilterStyles,\n css`\n :host {\n display: flex;\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-flow: row wrap;\n gap: var(--ox-filters-form-gap);\n }\n\n form > * {\n display: flex;\n align-items: center;\n }\n\n label span {\n display: block;\n }\n\n @media only screen and (max-width: 460px) {\n label[between] {\n display: block;\n }\n }\n `\n ]\n\n @property({ type: Array }) value: FilterValue[] = []\n @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n @property({ type: Boolean, attribute: 'empty', reflect: true }) empty: boolean = true\n\n @state() config!: GristConfig\n @state() filterColumns: ColumnConfig[] = []\n @state() searchColumns: ColumnConfig[] = []\n\n @queryAsync('form') form!: HTMLFormElement\n\n connectedCallback(): void {\n super.connectedCallback()\n\n const grist = this.closest('ox-grist') as DataGrist\n\n if (grist) {\n this.config = grist.compiledConfig\n this.value = grist.filters \|\| []\n\n grist.addEventListener('config-change', (e: Event) => {\n this.config = (e as CustomEvent).detail\n })\n\n grist.addEventListener('fetch-params-change', (e: Event) => {\n const { filters, from } = (e as CustomEvent).detail \|\| {}\n if (from === 'filters-form') {\n return\n }\n\n this.value = filters\n })\n\n this.renderRoot.addEventListener('change', async (e: Event) => {\n this.dispatchEvent(\n new CustomEvent('fetch-params-change', {\n bubbles: true,\n composed: true,\n detail: {\n filters: await this.getQueryFilters(),\n from: 'filters-form'\n }\n })\n )\n })\n }\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('config')) {\n const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)\n this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {\n const filter = columnConfig.filter as FilterConfigObject\n return filter!.operator !== 'search'\n })\n this.searchColumns = filters.filter(columnConfig => {\n const filter = columnConfig.filter as FilterConfigObject\n return filter!.operator === 'search'\n })\n\n this.empty = (this.searchColumns.length === 0 \|\| this.withoutSearch) && this.filterColumns.length === 0\n }\n }\n\n render(): TemplateResult {\n const searchValue =\n (this.value?.find(filter => filter.operator === 'search')?.value as string)?.match(/^\\%(.)\\%$/)?.[1] \|\| ''\n\n return this.empty\n ? html``\n : html`\n <form\n @submit=${(e: Event) => {\n e.stopPropagation()\n e.preventDefault()\n\n const grist = this.closest('ox-grist') as DataGrist\n\n grist && grist.fetch()\n }}\n >\n ${this.searchColumns.length === 0 \|\| this.withoutSearch\n ? html``\n : html`\n <ox-input-search name=\"search\" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>\n `}\n ${this.filterColumns.map((column: ColumnConfig) => {\n const { name, header, label, filter } = column\n\n const type = (filter as FilterConfigObject).type\n const operator = (filter as FilterConfigObject).operator\n const filterLabel = (filter as FilterConfigObject).label\n\n const labelText =\n filterLabel !== undefined\n ? filterLabel\n : typeof label === 'object' && label.renderer\n ? label.renderer()\n : header.renderer(column) \|\| name\n\n const idx = operator === 'between' ? 1 : 0\n const renderer = getFilterRenderer(\n operator === 'like' \|\| operator === 'i_like' \|\| operator === 'i_nlike' \|\| operator === 'nlike'\n ? 'text'\n : type\n )[idx]\n const value = this.value?.find(filter => filter.name == name)?.value\n\n if (!renderer) {\n return html``\n }\n\n return type !== 'select' && labelText\n ? html`<label filter-title ?between=${operator === 'between'}\n ><span>${labelText}</span> ${renderer(column, value, this)}\n </label> `\n : type !== 'select' && !labelText\n ? renderer(column, value, this)\n : operator === 'in'\n ? html`\n <ox-select\n name=${name}\n placeholder=${labelText}\n .value=${value}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list multiple attr-selected=\"checked\" with-search>\n ${renderer(column, value, this)}\n </ox-popup-list>\n </ox-select>\n `\n : html`\n <ox-select\n name=${name}\n placeholder=${labelText}\n .value=${value}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>\n </ox-select>\n `\n })}\n </form>\n `\n }\n\n async getQueryFilters(): Promise<QueryFilter[]> {\n const form = await this.form\n if (!form) return []\n\n const formData = new FormData(form)\n const search: string \| undefined = formData.get('search')?.toString()\n\n var filters = this.filterColumns\n .map((column: ColumnConfig) => {\n const { name, type, filter } = column\n const operator = (filter as FilterConfigObject).operator\n\n var value = formData.getAll(name)\n if (value.length == 0) {\n return\n }\n\n if (-1 === value.findIndex(v => v !== '')) {\n return\n }\n\n const filterValue = value.map(v => {\n const value = v.toString()\n\n / TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n switch (type) {\n case 'integer':\n case 'float':\n case 'number':\n case 'progress':\n case 'checkbox':\n case 'boolean':\n return !value ? undefined : JSON.parse(value)\n default:\n return value\n }\n })\n\n return {\n name,\n operator,\n value: filterValue.length === 1 ? filterValue[0] : filterValue\n }\n })\n .filter(result => result !== undefined) as QueryFilter[]\n\n if (search) {\n filters = filters.concat(\n this.searchColumns.map((column: ColumnConfig) => {\n const { name } = column\n\n return {\n name,\n operator: 'search',\n value: `%${search}%`\n }\n })\n )\n }\n\n return filters\n }\n\n public setInputValue(name: string, value: any) {\n const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n if (input) {\n input.value = value\n input.dispatchEvent(new Event('change', { bubbles: true }))\n }\n }\n\n public getInputValue(name: string): any {\n const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n return input?.value\n }\n}\n"]}
1	+ {"version":3,"file":"filters-form.js","sourceRoot":"","sources":["../../../src/filters/filters-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'\nimport { customElement, property, queryAsync, state } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '..'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, FilterValue, GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n name: string\n operator: FilterOperator\n value: any\n}\n\n@customElement('ox-filters-form')\nexport class FiltersForm extends LitElement {\n static styles = [\n FilterStyles,\n css`\n :host {\n display: flex;\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-flow: row wrap;\n gap: var(--ox-filters-form-gap);\n }\n\n form > * {\n display: flex;\n align-items: center;\n }\n\n label span {\n display: block;\n }\n\n @media only screen and (max-width: 460px) {\n label[between] {\n display: block;\n }\n }\n `\n ]\n\n @property({ type: Array }) value: FilterValue[] = []\n @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n @property({ type: Boolean, attribute: 'empty', reflect: true }) empty: boolean = true\n\n @state() config!: GristConfig\n @state() filterColumns: ColumnConfig[] = []\n @state() searchColumns: ColumnConfig[] = []\n\n @queryAsync('form') form!: HTMLFormElement\n\n connectedCallback(): void {\n super.connectedCallback()\n\n const grist = this.closest('ox-grist') as DataGrist\n\n if (grist) {\n this.config = grist.compiledConfig\n this.value = grist.filters \|\| []\n\n grist.addEventListener('config-change', (e: Event) => {\n this.config = (e as CustomEvent).detail\n })\n\n grist.addEventListener('fetch-params-change', (e: Event) => {\n const { filters, from } = (e as CustomEvent).detail \|\| {}\n if (from === 'filters-form') {\n return\n }\n\n this.value = filters\n })\n\n this.renderRoot.addEventListener('change', async (e: Event) => {\n this.dispatchEvent(\n new CustomEvent('fetch-params-change', {\n bubbles: true,\n composed: true,\n detail: {\n filters: await this.getQueryFilters(),\n from: 'filters-form'\n }\n })\n )\n })\n }\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('config')) {\n const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)\n this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {\n const filter = columnConfig.filter as FilterConfigObject\n return filter!.operator !== 'search'\n })\n this.searchColumns = filters.filter(columnConfig => {\n const filter = columnConfig.filter as FilterConfigObject\n return filter!.operator === 'search'\n })\n\n this.empty = (this.searchColumns.length === 0 \|\| this.withoutSearch) && this.filterColumns.length === 0\n }\n }\n\n render(): TemplateResult {\n const searchValue =\n (this.value?.find(filter => filter.operator === 'search')?.value as string)?.match(/^\\%(.)\\%$/)?.[1] \|\| ''\n\n return this.empty\n ? html``\n : html`\n <form\n @submit=${(e: Event) => {\n e.stopPropagation()\n e.preventDefault()\n\n const grist = this.closest('ox-grist') as DataGrist\n\n grist && grist.fetch()\n }}\n >\n ${this.searchColumns.length === 0 \|\| this.withoutSearch\n ? html``\n : html`\n <ox-input-search name=\"search\" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>\n `}\n ${this.filterColumns.map((column: ColumnConfig) => {\n const { name, header, label, filter } = column\n\n const type = (filter as FilterConfigObject).type\n const operator = (filter as FilterConfigObject).operator\n const filterLabel = (filter as FilterConfigObject).label\n\n const labelText =\n filterLabel !== undefined\n ? filterLabel\n : typeof label === 'object' && label.renderer\n ? label.renderer(column)\n : header.renderer(column) \|\| name\n\n const idx = operator === 'between' ? 1 : 0\n const renderer = getFilterRenderer(\n operator === 'like' \|\| operator === 'i_like' \|\| operator === 'i_nlike' \|\| operator === 'nlike'\n ? 'text'\n : type\n )[idx]\n const value = this.value?.find(filter => filter.name == name)?.value\n\n if (!renderer) {\n return html``\n }\n\n return type !== 'select' && labelText\n ? html`<label filter-title ?between=${operator === 'between'}\n ><span>${labelText}</span> ${renderer(column, value, this)}\n </label> `\n : type !== 'select' && !labelText\n ? renderer(column, value, this)\n : operator === 'in'\n ? html`\n <ox-select\n name=${name}\n placeholder=${labelText}\n .value=${value}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list multiple attr-selected=\"checked\" with-search>\n ${renderer(column, value, this)}\n </ox-popup-list>\n </ox-select>\n `\n : html`\n <ox-select\n name=${name}\n placeholder=${labelText}\n .value=${value}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>\n </ox-select>\n `\n })}\n </form>\n `\n }\n\n async getQueryFilters(): Promise<QueryFilter[]> {\n const form = await this.form\n if (!form) return []\n\n const formData = new FormData(form)\n const search: string \| undefined = formData.get('search')?.toString()\n\n var filters = this.filterColumns\n .map((column: ColumnConfig) => {\n const { name, type, filter } = column\n const operator = (filter as FilterConfigObject).operator\n\n var value = formData.getAll(name)\n if (value.length == 0) {\n return\n }\n\n if (-1 === value.findIndex(v => v !== '')) {\n return\n }\n\n const filterValue = value.map(v => {\n const value = v.toString()\n\n / TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n switch (type) {\n case 'integer':\n case 'float':\n case 'number':\n case 'progress':\n case 'checkbox':\n case 'boolean':\n return !value ? undefined : JSON.parse(value)\n default:\n return value\n }\n })\n\n return {\n name,\n operator,\n value: filterValue.length === 1 ? filterValue[0] : filterValue\n }\n })\n .filter(result => result !== undefined) as QueryFilter[]\n\n if (search) {\n filters = filters.concat(\n this.searchColumns.map((column: ColumnConfig) => {\n const { name } = column\n\n return {\n name,\n operator: 'search',\n value: `%${search}%`\n }\n })\n )\n }\n\n return filters\n }\n\n public setInputValue(name: string, value: any) {\n const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n if (input) {\n input.value = value\n input.dispatchEvent(new Event('change', { bubbles: true }))\n }\n }\n\n public getInputValue(name: string): any {\n const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n return input?.value\n }\n}\n"]}

package/dist/src/types.d.ts CHANGED Viewed

@@ -78,6 +78,10 @@ export type FetchResult = {
 export type FetchHandler = (param: FetchOption) => Promise<FetchResult>;
 export type GristEventHandler = (columns: ColumnConfig[], data?: GristData, column?: ColumnConfig, record?: GristRecord, rowIndex?: number, target?: any) => void;
 export type AccumulatorFunc = 'sum' | 'avg' | 'count' | 'min' | 'max' | ((data: GristData, column: ColumnConfig) => string | number);
+export type AccumulatorObject = AccumulatorFunc | {
+    type: AccumulatorFunc;
+    tag?: boolean;
+};
 export type ColumnConfig = {
     type: string;
     name: string;
@@ -93,7 +97,7 @@ export type ColumnConfig = {
     width?: number | string | ColumnWidthCallback;
     forList?: boolean;
     validation?: ValidationCallback;
-    accumulator?: AccumulatorFunc;
+    accumulator?: AccumulatorObject;
     filter?: FilterConfig;
     imex?: ImexConfig | boolean;
     multiple?: boolean;
@@ -103,7 +107,7 @@ export type ValidationCallback = (after: any, before: any, record: GristRecord,
 export type LabelConfig = string | boolean | {
     renderer: LabelRenderer;
 };
-export type LabelRenderer = () => void;
+export type LabelRenderer = (column: ColumnConfig) => void;
 export type ColumnWidthCallback = (column: ColumnConfig) => string;
 export type HeaderConfig = {
     renderer: HeaderRenderer;

package/dist/src/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAoFA,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,yCAAmB,CAAA;IACnB,mCAAa,CAAA;AACf,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B","sourcesContent":["import { TemplateResult } from 'lit-html'\n\nimport { DataCardField } from './data-card/data-card-field'\nimport { DataCardGutter } from './data-card/data-card-gutter'\nimport { RecordCard } from './data-card/record-card'\nimport { DataGridField } from './data-grid/data-grid-field'\nimport { DataListField } from './data-list/data-list-field'\nimport { DataListGutter } from './data-list/data-list-gutter'\nimport { RecordPartial } from './data-list/record-partial'\nimport { DataReportField } from './data-report/data-report-field'\nimport { OxGristEditor } from './editors'\nimport { QueryFilter } from './filters'\nimport { OxGristRenderer } from './renderers/ox-grist-renderer'\n\nexport type GristConfig = {\n columns: ColumnConfig[]\n rows: RowsConfig\n list: ListConfig\n tree: TreeConfig\n pagination?: PaginationConfig\n sorters?: SortersConfig\n filters?: FiltersConfig\n}\n\nexport type SorterConfig = { name: string; desc?: boolean }\nexport type SortersConfig = SorterConfig[]\nexport type FilterOperator =\n \| 'search'\n \| 'eq'\n \| 'between'\n \| 'gte'\n \| 'lte'\n \| 'is_not_true'\n \| 'in'\n \| 'like'\n \| 'i_like'\n \| 'noteq'\n \| 'is_empty_num_id'\n \| 'is_blank'\n \| 'is_present'\n \| 'is_not_false'\n \| 'is_true'\n \| 'is_false'\n \| 'is_not_null'\n \| 'is_null'\n \| 'notin_with_null'\n \| 'notin'\n \| 'gt'\n \| 'lt'\n \| 'i_nlike'\n \| 'nlike'\n\nexport type FilterConfigObject = {\n type: string\n operator?: FilterOperator\n options?: { [key: string]: any }\n value?: string \| number \| boolean \| string[] \| number[] \| undefined\n label?: string\n}\nexport type FilterConfig = FilterConfigObject \| FilterOperator \| boolean\n\nexport type FilterValue = {\n name: string\n operator: FilterOperator\n value: string \| number \| boolean \| string[] \| number[] \| undefined\n}\n\n/*\n Configuration options for filters.\n /\nexport type FiltersConfig = {\n /\n Specifies whether to provide filtering functionality in the header.\n /\n header?: boolean\n}\n\nexport type PaginationConfig = {\n page?: number\n limit?: number\n pages?: number[]\n infinite?: boolean\n}\n\nexport enum InheritedValueType {\n None = 'None',\n Include = 'Include',\n Only = 'Only'\n}\n\nexport type FetchOption = {\n page?: number\n limit?: number\n sorters?: SortersConfig\n sortings?: SortersConfig\n filters?: QueryFilter[]\n inherited?: InheritedValueType\n options?: object\n}\nexport type FetchResult = {\n page?: number\n limit?: number\n total: number\n records: GristRecord[]\n} \| void\nexport type FetchHandler = (param: FetchOption) => Promise<FetchResult>\n\nexport type GristEventHandler = (\n columns: ColumnConfig[],\n data?: GristData,\n column?: ColumnConfig,\n record?: GristRecord,\n rowIndex?: number,\n target?: any\n) => void\n\nexport type AccumulatorFunc =\n \| 'sum'\n \| 'avg'\n \| 'count'\n \| 'min'\n \| 'max'\n \| ((data: GristData, column: ColumnConfig) => string \| number)\n\nexport type ColumnConfig = {\n type: string\n name: string\n gutterName?: string\n fixed?: boolean\n header: HeaderConfig\n record: RecordConfig\n handlers: GristEventHandlerSet\n label: LabelConfig\n hidden?: boolean\n sortable?: boolean\n resizable?: boolean\n width?: number \| string \| ColumnWidthCallback\n forList?: boolean\n validation?: ValidationCallback\n accumulator?: ~~AccumulatorFunc~~\n filter?: FilterConfig\n imex?: ImexConfig \| boolean\n multiple?: boolean\n rowCount?: boolean\n}\n\nexport type ValidationCallback = (after: any, before: any, record: GristRecord, column: ColumnConfig) => boolean\n\nexport type LabelConfig =\n \| string\n \| boolean\n \| {\n renderer: LabelRenderer\n }\n\nexport type LabelRenderer = () => void\n\nexport type ColumnWidthCallback = (column: ColumnConfig) => string\n\nexport type HeaderConfig = {\n renderer: HeaderRenderer\n style?: string\n group?: string\n groupStyle?: string\n}\nexport type HeaderRenderer = (column: ColumnConfig) => any\n\nexport type ValueGeneratorFn = (...args: any[]) => any\nexport type DefaultValueFnConfig =\n \| {\n /\n The name of the default value function to be used for the column.\n /\n name: string\n\n /\n The parameters to be passed to the default value function.\n */\n params?: any[]\n }\n \| Function\n\nexport type RecordConfig = {\n renderer: FieldRenderer\n editor?: FieldEditor\n editable?: boolean \| Function\n mandatory?: boolean\n classifier: GristClassifier\n align?: 'left' \| 'right' \| 'center'\n options: any\n rowOptionField?: string\n defaultValue?: DefaultValueFnConfig\n [extended: string]: any\n}\n\nexport type FieldRenderer = (\n value: any,\n column: ColumnConfig,\n record: GristRecord,\n rowIndex: number,\n owner:\n \| DataGridField\n \| RecordCard\n \| DataCardGutter\n \| DataCardField\n \| DataListGutter\n \| DataListField\n \| RecordPartial\n \| DataReportField\n \| Element\n) => OxGristRenderer \| TemplateResult \| string \| void\nexport type FieldEditor = (\n value: any,\n column: ColumnConfig,\n record: GristRecord,\n rowIndex: number,\n field: DataGridField\n) => OxGristEditor\n\nexport type FilterSelectRenderer = (\n column: ColumnConfig,\n value: string \| number \| boolean \| string[] \| number[] \| any \| undefined,\n owner: Element\n) => TemplateResult \| string \| void\n\nexport type GristEventHandlerSet = {\n click?: GristEventHandler\n dblclick?: GristEventHandler\n focus?: GristEventHandler\n}\n\nexport type ListConfig = {\n thumbnail?: string\n fields: string[]\n details: string[]\n}\n\nexport type TreeConfig = {\n childrenProperty?: string\n expanded?: boolean \| ((x: GristRecord) => boolean)\n}\n\nexport type ImexConfig = {\n header: string\n key: string\n width: number\n type: string\n}\n\nexport type RowsConfig = {\n accumulator?: boolean\n appendable: boolean\n insertable: boolean\n selectable?: RowSelectableConfig\n groups: GroupConfig[]\n totals: string[]\n classifier: GristClassifier\n handlers: GristEventHandlerSet\n}\n\nexport type GristClassifier = (\n record: GristRecord,\n rowIndex: number\n) => { emphasized?: boolean \| string \| string[]; [key: string]: any } \| void\n\nexport type GroupConfig = {\n align: string\n titleColumn?: ColumnConfig\n title: string\n value?: string\n groupName?: string\n row?: number\n column: string \| number\n rowspan: number\n colspan?: number\n}\n\nexport type RowSelectableConfig = {\n multiple?: boolean\n}\n\nexport type GristRecord = {\n id?: string\n name?: string\n children?: GristRecord[]\n __seq__?: number\n __dirty__?: string\n __selected__?: boolean\n __changes__?: object[]\n __dirtyfields__?: { [key: string]: any }\n __origin__?: any\n __collapsed__?: boolean\n __depth__?: number\n __check_in_tree__?: 'checked' \| 'half-checked' \| 'unchecked'\n __children__?: GristRecord[]\n [key: string]: any\n}\n\nexport type GristData = {\n page?: number\n total?: number\n limit?: number\n records: GristRecord[]\n}\n\nexport type GristSelectFunction = (record: GristRecord) => boolean\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAoFA,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,yCAAmB,CAAA;IACnB,mCAAa,CAAA;AACf,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B","sourcesContent":["import { TemplateResult } from 'lit-html'\n\nimport { DataCardField } from './data-card/data-card-field'\nimport { DataCardGutter } from './data-card/data-card-gutter'\nimport { RecordCard } from './data-card/record-card'\nimport { DataGridField } from './data-grid/data-grid-field'\nimport { DataListField } from './data-list/data-list-field'\nimport { DataListGutter } from './data-list/data-list-gutter'\nimport { RecordPartial } from './data-list/record-partial'\nimport { DataReportField } from './data-report/data-report-field'\nimport { OxGristEditor } from './editors'\nimport { QueryFilter } from './filters'\nimport { OxGristRenderer } from './renderers/ox-grist-renderer'\n\nexport type GristConfig = {\n columns: ColumnConfig[]\n rows: RowsConfig\n list: ListConfig\n tree: TreeConfig\n pagination?: PaginationConfig\n sorters?: SortersConfig\n filters?: FiltersConfig\n}\n\nexport type SorterConfig = { name: string; desc?: boolean }\nexport type SortersConfig = SorterConfig[]\nexport type FilterOperator =\n \| 'search'\n \| 'eq'\n \| 'between'\n \| 'gte'\n \| 'lte'\n \| 'is_not_true'\n \| 'in'\n \| 'like'\n \| 'i_like'\n \| 'noteq'\n \| 'is_empty_num_id'\n \| 'is_blank'\n \| 'is_present'\n \| 'is_not_false'\n \| 'is_true'\n \| 'is_false'\n \| 'is_not_null'\n \| 'is_null'\n \| 'notin_with_null'\n \| 'notin'\n \| 'gt'\n \| 'lt'\n \| 'i_nlike'\n \| 'nlike'\n\nexport type FilterConfigObject = {\n type: string\n operator?: FilterOperator\n options?: { [key: string]: any }\n value?: string \| number \| boolean \| string[] \| number[] \| undefined\n label?: string\n}\nexport type FilterConfig = FilterConfigObject \| FilterOperator \| boolean\n\nexport type FilterValue = {\n name: string\n operator: FilterOperator\n value: string \| number \| boolean \| string[] \| number[] \| undefined\n}\n\n/*\n Configuration options for filters.\n /\nexport type FiltersConfig = {\n /\n Specifies whether to provide filtering functionality in the header.\n /\n header?: boolean\n}\n\nexport type PaginationConfig = {\n page?: number\n limit?: number\n pages?: number[]\n infinite?: boolean\n}\n\nexport enum InheritedValueType {\n None = 'None',\n Include = 'Include',\n Only = 'Only'\n}\n\nexport type FetchOption = {\n page?: number\n limit?: number\n sorters?: SortersConfig\n sortings?: SortersConfig\n filters?: QueryFilter[]\n inherited?: InheritedValueType\n options?: object\n}\nexport type FetchResult = {\n page?: number\n limit?: number\n total: number\n records: GristRecord[]\n} \| void\nexport type FetchHandler = (param: FetchOption) => Promise<FetchResult>\n\nexport type GristEventHandler = (\n columns: ColumnConfig[],\n data?: GristData,\n column?: ColumnConfig,\n record?: GristRecord,\n rowIndex?: number,\n target?: any\n) => void\n\nexport type AccumulatorFunc =\n \| 'sum'\n \| 'avg'\n \| 'count'\n \| 'min'\n \| 'max'\n \| ((data: GristData, column: ColumnConfig) => string \| number)\n\nexport type AccumulatorObject =\n \| AccumulatorFunc\n \| {\n type: AccumulatorFunc\n tag?: boolean\n }\n\nexport type ColumnConfig = {\n type: string\n name: string\n gutterName?: string\n fixed?: boolean\n header: HeaderConfig\n record: RecordConfig\n handlers: GristEventHandlerSet\n label: LabelConfig\n hidden?: boolean\n sortable?: boolean\n resizable?: boolean\n width?: number \| string \| ColumnWidthCallback\n forList?: boolean\n validation?: ValidationCallback\n accumulator?: AccumulatorObject\n filter?: FilterConfig\n imex?: ImexConfig \| boolean\n multiple?: boolean\n rowCount?: boolean\n}\n\nexport type ValidationCallback = (after: any, before: any, record: GristRecord, column: ColumnConfig) => boolean\n\nexport type LabelConfig =\n \| string\n \| boolean\n \| {\n renderer: LabelRenderer\n }\n\nexport type LabelRenderer = (column: ColumnConfig) => void\n\nexport type ColumnWidthCallback = (column: ColumnConfig) => string\n\nexport type HeaderConfig = {\n renderer: HeaderRenderer\n style?: string\n group?: string\n groupStyle?: string\n}\nexport type HeaderRenderer = (column: ColumnConfig) => any\n\nexport type ValueGeneratorFn = (...args: any[]) => any\nexport type DefaultValueFnConfig =\n \| {\n /\n The name of the default value function to be used for the column.\n /\n name: string\n\n /\n The parameters to be passed to the default value function.\n */\n params?: any[]\n }\n \| Function\n\nexport type RecordConfig = {\n renderer: FieldRenderer\n editor?: FieldEditor\n editable?: boolean \| Function\n mandatory?: boolean\n classifier: GristClassifier\n align?: 'left' \| 'right' \| 'center'\n options: any\n rowOptionField?: string\n defaultValue?: DefaultValueFnConfig\n [extended: string]: any\n}\n\nexport type FieldRenderer = (\n value: any,\n column: ColumnConfig,\n record: GristRecord,\n rowIndex: number,\n owner:\n \| DataGridField\n \| RecordCard\n \| DataCardGutter\n \| DataCardField\n \| DataListGutter\n \| DataListField\n \| RecordPartial\n \| DataReportField\n \| Element\n) => OxGristRenderer \| TemplateResult \| string \| void\nexport type FieldEditor = (\n value: any,\n column: ColumnConfig,\n record: GristRecord,\n rowIndex: number,\n field: DataGridField\n) => OxGristEditor\n\nexport type FilterSelectRenderer = (\n column: ColumnConfig,\n value: string \| number \| boolean \| string[] \| number[] \| any \| undefined,\n owner: Element\n) => TemplateResult \| string \| void\n\nexport type GristEventHandlerSet = {\n click?: GristEventHandler\n dblclick?: GristEventHandler\n focus?: GristEventHandler\n}\n\nexport type ListConfig = {\n thumbnail?: string\n fields: string[]\n details: string[]\n}\n\nexport type TreeConfig = {\n childrenProperty?: string\n expanded?: boolean \| ((x: GristRecord) => boolean)\n}\n\nexport type ImexConfig = {\n header: string\n key: string\n width: number\n type: string\n}\n\nexport type RowsConfig = {\n accumulator?: boolean\n appendable: boolean\n insertable: boolean\n selectable?: RowSelectableConfig\n groups: GroupConfig[]\n totals: string[]\n classifier: GristClassifier\n handlers: GristEventHandlerSet\n}\n\nexport type GristClassifier = (\n record: GristRecord,\n rowIndex: number\n) => { emphasized?: boolean \| string \| string[]; [key: string]: any } \| void\n\nexport type GroupConfig = {\n align: string\n titleColumn?: ColumnConfig\n title: string\n value?: string\n groupName?: string\n row?: number\n column: string \| number\n rowspan: number\n colspan?: number\n}\n\nexport type RowSelectableConfig = {\n multiple?: boolean\n}\n\nexport type GristRecord = {\n id?: string\n name?: string\n children?: GristRecord[]\n __seq__?: number\n __dirty__?: string\n __selected__?: boolean\n __changes__?: object[]\n __dirtyfields__?: { [key: string]: any }\n __origin__?: any\n __collapsed__?: boolean\n __depth__?: number\n __check_in_tree__?: 'checked' \| 'half-checked' \| 'unchecked'\n __children__?: GristRecord[]\n [key: string]: any\n}\n\nexport type GristData = {\n page?: number\n total?: number\n limit?: number\n records: GristRecord[]\n}\n\nexport type GristSelectFunction = (record: GristRecord) => boolean\n"]}

package/dist/stories/accumulator.stories.js CHANGED Viewed

@@ -19,6 +19,7 @@ const fetchHandler = async ({ 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}`,
                 accval: Math.random(),
+                accval2: Math.round(Math.random() * 15),
                 createdAt: Date.now(),
                 updatedAt: Date.now()
             };
@@ -89,7 +90,23 @@ const config = {
                 editable: true,
                 align: 'right'
             },
-            accumulator: 'sum',
+            accumulator: 'avg',
+            sortable: true,
+            width: 130
+        },
+        {
+            type: 'number',
+            name: 'accval2',
+            label: true,
+            header: 'accval2',
+            record: {
+                editable: true,
+                align: 'right'
+            },
+            accumulator: {
+                type: 'sum',
+                tag: true
+            },
             sortable: true,
             width: 130
         },

package/dist/stories/accumulator.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"accumulator.stories.js","sourceRoot":"","sources":["../../stories/accumulator.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/mwc-icon'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n ColumnConfig,\n FetchHandler,\n GristClassifier,\n GristEventHandlerSet,\n GristRecord,\n ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n var total = 25\n var start = (page! - 1) * limit!\n\n await new Promise(resolve => setTimeout(resolve, 500))\n\n return {\n total,\n records: Array(limit! * page! > total ? total % limit! : limit)\n .fill('')\n .map((item, idx) => {\n return {\n id: String(idx),\n name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n accval: Math.random(),\n createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nconst config = {\n columns: [\n {\n type: 'gutter',\n gutterName: 'dirty'\n },\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'gutter',\n gutterName: 'row-selector',\n multiple: true\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'add',\n title: 'add',\n handlers: {\n click: 'record-copy'\n }\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'string',\n name: 'name',\n label: true,\n header: 'name',\n record: {\n editable: true\n },\n filter: 'search',\n sortable: true,\n width: 120\n },\n {\n type: 'string',\n name: 'description',\n header: {\n renderer: () => 'description',\n style: 'text-transform: none;'\n },\n filter: 'search',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200\n },\n {\n type: 'number',\n name: 'accval',\n label: true,\n header: 'accval',\n record: {\n editable: true,\n align: 'right'\n },\n accumulator: 'sum',\n sortable: true,\n width: 130\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n record: {\n editable: true,\n defaultValue: {\n name: 'now'\n }\n },\n filter: 'between',\n sortable: true,\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n record: {\n editable: false\n },\n sortable: true,\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: false\n },\n handlers: {\n focus: 'select-row'\n },\n accumulator: true\n },\n sorters: [\n {\n name: 'name',\n desc: true\n },\n {\n name: 'email'\n }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200]\n }\n}\n\nexport default {\n title: 'accumulator in ox-grist',\n component: 'ox-grist',\n argTypes: {\n config: { control: 'object' },\n mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },\n urlParamsSensitive: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n config: object\n mode: string\n urlParamsSensitive: boolean\n fetchHandler: object\n}\n\nconst Template: Story<ArgTypes> = ({\n config,\n mode = 'GRID',\n urlParamsSensitive = false,\n fetchHandler\n}: ArgTypes) => html` <link\n href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\"\n rel=\"stylesheet\"\n />\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <style>\n ox-grist {\n height: 600px;\n }\n\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n\n --mdc-icon-size: 24px;\n }\n #sorters mwc-icon,\n #modes mwc-icon {\n --mdc-icon-size: 18px;\n }\n #sorters {\n margin-left: auto;\n margin-right: var(--margin-default);\n padding-left: var(--padding-narrow);\n border-bottom: var(--border-dark-color);\n position: relative;\n color: var(--secondary-color);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--padding-narrow);\n vertical-align: middle;\n }\n\n #modes > * {\n padding: var(--padding-narrow);\n opacity: 0.5;\n color: var(--primary-text-color);\n cursor: pointer;\n }\n\n #modes > mwc-icon[active] {\n border-radius: 9px;\n background-color: rgba(var(--primary-color-rgb), 0.05);\n opacity: 1;\n color: var(--secondary-text-color);\n cursor: default;\n }\n\n #modes > mwc-icon:hover {\n opacity: 1;\n color: var(--secondary-text-color);\n }\n\n #add {\n width: 50px;\n text-align: right;\n }\n\n #add button {\n background-color: var(--primary-color);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 36px;\n height: 36px;\n cursor: pointer;\n }\n\n #add button:hover {\n background-color: var(--focus-background-color);\n box-shadow: var(--box-shadow);\n }\n\n #add button mwc-icon {\n font-size: 2em;\n color: var(--theme-white-color);\n }\n\n #filters {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #filters * {\n margin-right: var(--margin-default);\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n\n #modes {\n display: none;\n }\n }\n </style>\n\n <ox-grist\n mode=\"GRID\"\n .config=${config}\n .fetchHandler=${fetchHandler}\n ?url-params-sensitive=${urlParamsSensitive}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\">\n <div id=\"filters\">\n <ox-filters-form autofocus></ox-filters-form>\n </div>\n\n <ox-record-creator id=\"add\" light-popup>\n <button><mwc-icon>add</mwc-icon></button>\n </ox-record-creator>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n config,\n fetchHandler,\n mode: 'GRID'\n}\n"]}
1	+ {"version":3,"file":"accumulator.stories.js","sourceRoot":"","sources":["../../stories/accumulator.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/mwc-icon'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n ColumnConfig,\n FetchHandler,\n GristClassifier,\n GristEventHandlerSet,\n GristRecord,\n ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n var total = 25\n var start = (page! - 1) * limit!\n\n await new Promise(resolve => setTimeout(resolve, 500))\n\n return {\n total,\n records: Array(limit! * page! > total ? total % limit! : limit)\n .fill('')\n .map((item, idx) => {\n return {\n id: String(idx),\n name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n accval: Math.random(),\n accval2: Math.round(Math.random() * 15),\n createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nconst config = {\n columns: [\n {\n type: 'gutter',\n gutterName: 'dirty'\n },\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'gutter',\n gutterName: 'row-selector',\n multiple: true\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'add',\n title: 'add',\n handlers: {\n click: 'record-copy'\n }\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'string',\n name: 'name',\n label: true,\n header: 'name',\n record: {\n editable: true\n },\n filter: 'search',\n sortable: true,\n width: 120\n },\n {\n type: 'string',\n name: 'description',\n header: {\n renderer: () => 'description',\n style: 'text-transform: none;'\n },\n filter: 'search',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200\n },\n {\n type: 'number',\n name: 'accval',\n label: true,\n header: 'accval',\n record: {\n editable: true,\n align: 'right'\n },\n accumulator: 'avg',\n sortable: true,\n width: 130\n },\n {\n type: 'number',\n name: 'accval2',\n label: true,\n header: 'accval2',\n record: {\n editable: true,\n align: 'right'\n },\n accumulator: {\n type: 'sum',\n tag: true\n },\n sortable: true,\n width: 130\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n record: {\n editable: true,\n defaultValue: {\n name: 'now'\n }\n },\n filter: 'between',\n sortable: true,\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n record: {\n editable: false\n },\n sortable: true,\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: false\n },\n handlers: {\n focus: 'select-row'\n },\n accumulator: true\n },\n sorters: [\n {\n name: 'name',\n desc: true\n },\n {\n name: 'email'\n }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200]\n }\n}\n\nexport default {\n title: 'accumulator in ox-grist',\n component: 'ox-grist',\n argTypes: {\n config: { control: 'object' },\n mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },\n urlParamsSensitive: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n config: object\n mode: string\n urlParamsSensitive: boolean\n fetchHandler: object\n}\n\nconst Template: Story<ArgTypes> = ({\n config,\n mode = 'GRID',\n urlParamsSensitive = false,\n fetchHandler\n}: ArgTypes) => html` <link\n href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\"\n rel=\"stylesheet\"\n />\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <style>\n ox-grist {\n height: 600px;\n }\n\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n\n --mdc-icon-size: 24px;\n }\n #sorters mwc-icon,\n #modes mwc-icon {\n --mdc-icon-size: 18px;\n }\n #sorters {\n margin-left: auto;\n margin-right: var(--margin-default);\n padding-left: var(--padding-narrow);\n border-bottom: var(--border-dark-color);\n position: relative;\n color: var(--secondary-color);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--padding-narrow);\n vertical-align: middle;\n }\n\n #modes > * {\n padding: var(--padding-narrow);\n opacity: 0.5;\n color: var(--primary-text-color);\n cursor: pointer;\n }\n\n #modes > mwc-icon[active] {\n border-radius: 9px;\n background-color: rgba(var(--primary-color-rgb), 0.05);\n opacity: 1;\n color: var(--secondary-text-color);\n cursor: default;\n }\n\n #modes > mwc-icon:hover {\n opacity: 1;\n color: var(--secondary-text-color);\n }\n\n #add {\n width: 50px;\n text-align: right;\n }\n\n #add button {\n background-color: var(--primary-color);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 36px;\n height: 36px;\n cursor: pointer;\n }\n\n #add button:hover {\n background-color: var(--focus-background-color);\n box-shadow: var(--box-shadow);\n }\n\n #add button mwc-icon {\n font-size: 2em;\n color: var(--theme-white-color);\n }\n\n #filters {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #filters * {\n margin-right: var(--margin-default);\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n\n #modes {\n display: none;\n }\n }\n </style>\n\n <ox-grist\n mode=\"GRID\"\n .config=${config}\n .fetchHandler=${fetchHandler}\n ?url-params-sensitive=${urlParamsSensitive}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\">\n <div id=\"filters\">\n <ox-filters-form autofocus></ox-filters-form>\n </div>\n\n <ox-record-creator id=\"add\" light-popup>\n <button><mwc-icon>add</mwc-icon></button>\n </ox-record-creator>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n config,\n fetchHandler,\n mode: 'GRID'\n}\n"]}