@operato/data-grist 1.12.8 → 1.13.0
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.
- package/CHANGELOG.md +9 -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/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/types.d.ts +5 -1
- 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/data-grid/data-grid-accum-field.ts +8 -1
- package/src/types.ts +8 -1
- 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
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.13.0](https://github.com/hatiolab/operato/compare/v1.12.9...v1.13.0) (2024-01-04)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :rocket: New Features
|
|
10
|
+
|
|
11
|
+
* accumulator의 태그 추가 ([5321c74](https://github.com/hatiolab/operato/commit/5321c74c413b3f82a6695cc2fafd037df10b0aec))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
### [1.12.8](https://github.com/hatiolab/operato/compare/v1.12.7...v1.12.8) (2024-01-03)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare function accumulate(data: GristData, column: ColumnConfig, accumulator:
|
|
1
|
+
import { AccumulatorObject, ColumnConfig, GristData } from '../types';
|
|
2
|
+
export declare function accumulate(data: GristData, column: ColumnConfig, accumulator: AccumulatorObject): string | number;
|
|
@@ -32,6 +32,7 @@ const Accumulators = {
|
|
|
32
32
|
max
|
|
33
33
|
};
|
|
34
34
|
export function accumulate(data, column, accumulator) {
|
|
35
|
+
accumulator = typeof accumulator === 'object' ? accumulator.type : accumulator;
|
|
35
36
|
var func = accumulator;
|
|
36
37
|
if (typeof accumulator == 'string') {
|
|
37
38
|
func = Accumulators[accumulator];
|
|
@@ -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,
|
|
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"]}
|
|
@@ -3,6 +3,7 @@ import { css, html, LitElement, nothing } from 'lit';
|
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
4
|
import { TooltipStyles } from '@operato/styles';
|
|
5
5
|
import { ZERO_COLUMN } from '../configure/zero-config';
|
|
6
|
+
import { i18next } from '@operato/i18n';
|
|
6
7
|
const DEFAULT_TEXT_ALIGN = 'left';
|
|
7
8
|
let DataGridAccumField = class DataGridAccumField extends LitElement {
|
|
8
9
|
constructor() {
|
|
@@ -22,6 +23,11 @@ let DataGridAccumField = class DataGridAccumField extends LitElement {
|
|
|
22
23
|
}
|
|
23
24
|
var { value, column, record, rowIndex } = this;
|
|
24
25
|
var { renderer } = column.record;
|
|
26
|
+
// tag가 true이면 value 앞에 (sum) 같은 태그 생성
|
|
27
|
+
var { accumulator } = column;
|
|
28
|
+
if (typeof accumulator === 'object' && typeof accumulator.type === 'string' && (accumulator === null || accumulator === void 0 ? void 0 : accumulator.tag)) {
|
|
29
|
+
value = `(${i18next.t(`label.accumulator_${accumulator.type}`)}) ${value}`;
|
|
30
|
+
}
|
|
25
31
|
return html `${renderer === null || renderer === void 0 ? void 0 : renderer.call(this, value, column, record, rowIndex, this)}`;
|
|
26
32
|
}
|
|
27
33
|
updated(changes) {
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"data-grid-accum-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-accum-field.ts"],"names":[],"mappings":"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","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/types.d.ts
CHANGED
|
@@ -78,6 +78,10 @@ export type FetchResult = {
|
|
|
78
78
|
export type FetchHandler = (param: FetchOption) => Promise<FetchResult>;
|
|
79
79
|
export type GristEventHandler = (columns: ColumnConfig[], data?: GristData, column?: ColumnConfig, record?: GristRecord, rowIndex?: number, target?: any) => void;
|
|
80
80
|
export type AccumulatorFunc = 'sum' | 'avg' | 'count' | 'min' | 'max' | ((data: GristData, column: ColumnConfig) => string | number);
|
|
81
|
+
export type AccumulatorObject = AccumulatorFunc | {
|
|
82
|
+
type: AccumulatorFunc;
|
|
83
|
+
tag?: boolean;
|
|
84
|
+
};
|
|
81
85
|
export type ColumnConfig = {
|
|
82
86
|
type: string;
|
|
83
87
|
name: string;
|
|
@@ -93,7 +97,7 @@ export type ColumnConfig = {
|
|
|
93
97
|
width?: number | string | ColumnWidthCallback;
|
|
94
98
|
forList?: boolean;
|
|
95
99
|
validation?: ValidationCallback;
|
|
96
|
-
accumulator?:
|
|
100
|
+
accumulator?: AccumulatorObject;
|
|
97
101
|
filter?: FilterConfig;
|
|
98
102
|
imex?: ImexConfig | boolean;
|
|
99
103
|
multiple?: boolean;
|
package/dist/src/types.js.map
CHANGED
|
@@ -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?:
|
|
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 = () => 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"]}
|
|
@@ -19,6 +19,7 @@ const fetchHandler = async ({ page, limit }) => {
|
|
|
19
19
|
name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
|
|
20
20
|
description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
|
|
21
21
|
accval: Math.random(),
|
|
22
|
+
accval2: Math.round(Math.random() * 15),
|
|
22
23
|
createdAt: Date.now(),
|
|
23
24
|
updatedAt: Date.now()
|
|
24
25
|
};
|
|
@@ -89,7 +90,23 @@ const config = {
|
|
|
89
90
|
editable: true,
|
|
90
91
|
align: 'right'
|
|
91
92
|
},
|
|
92
|
-
accumulator: '
|
|
93
|
+
accumulator: 'avg',
|
|
94
|
+
sortable: true,
|
|
95
|
+
width: 130
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
type: 'number',
|
|
99
|
+
name: 'accval2',
|
|
100
|
+
label: true,
|
|
101
|
+
header: 'accval2',
|
|
102
|
+
record: {
|
|
103
|
+
editable: true,
|
|
104
|
+
align: 'right'
|
|
105
|
+
},
|
|
106
|
+
accumulator: {
|
|
107
|
+
type: 'sum',
|
|
108
|
+
tag: true
|
|
109
|
+
},
|
|
93
110
|
sortable: true,
|
|
94
111
|
width: 130
|
|
95
112
|
},
|
|
@@ -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"]}
|