@operato/data-grist 0.2.35 → 0.2.36
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 +25 -0
- package/custom-elements.json +1697 -5
- package/demo/data-grist-test.html +1 -1
- package/demo/index.html +18 -1
- package/dist/src/data-card/data-card-gutter-menu.js +2 -2
- package/dist/src/data-card/data-card-gutter-menu.js.map +1 -1
- package/dist/src/data-card/data-card-gutter.d.ts +13 -1
- package/dist/src/data-card/data-card-gutter.js +1 -0
- package/dist/src/data-card/data-card-gutter.js.map +1 -1
- package/dist/src/data-grid/data-grid-field.d.ts +2 -2
- package/dist/src/data-grid/data-grid-field.js.map +1 -1
- package/dist/src/data-grid/data-grid-header.d.ts +3 -0
- package/dist/src/data-grid/data-grid-header.js +38 -10
- package/dist/src/data-grid/data-grid-header.js.map +1 -1
- package/dist/src/data-grist.d.ts +9 -7
- package/dist/src/data-grist.js +26 -18
- package/dist/src/data-grist.js.map +1 -1
- package/dist/src/data-list/data-list-field.js +3 -3
- package/dist/src/data-list/data-list-field.js.map +1 -1
- package/dist/src/data-list/data-list-gutter.d.ts +13 -1
- package/dist/src/data-list/data-list-gutter.js +1 -0
- package/dist/src/data-list/data-list-gutter.js.map +1 -1
- package/dist/src/data-report/data-report-field.d.ts +2 -2
- package/dist/src/data-report/data-report-field.js.map +1 -1
- package/dist/src/filters/index.d.ts +2 -0
- package/dist/src/filters/index.js +3 -0
- package/dist/src/filters/index.js.map +1 -0
- package/dist/src/filters/list-select.d.ts +3 -0
- package/dist/src/filters/list-select.js +12 -0
- package/dist/src/filters/list-select.js.map +1 -0
- package/dist/src/filters/registry.d.ts +7 -0
- package/dist/src/filters/registry.js +40 -0
- package/dist/src/filters/registry.js.map +1 -0
- package/dist/src/index.d.ts +2 -0
- package/dist/src/index.js +2 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/interfaces/index.d.ts +2 -0
- package/dist/src/interfaces/index.js +3 -0
- package/dist/src/interfaces/index.js.map +1 -0
- package/dist/src/interfaces/ox-grist-search-form.d.ts +6 -0
- package/dist/src/interfaces/ox-grist-search-form.js +2 -0
- package/dist/src/interfaces/ox-grist-search-form.js.map +1 -0
- package/dist/src/interfaces/ox-search-field.d.ts +39 -0
- package/dist/src/interfaces/ox-search-field.js +2 -0
- package/dist/src/interfaces/ox-search-field.js.map +1 -0
- package/dist/src/search-form/index.d.ts +7 -0
- package/dist/src/search-form/index.js +8 -0
- package/dist/src/search-form/index.js.map +1 -0
- package/dist/src/search-form/ox-basic-field.d.ts +18 -0
- package/dist/src/search-form/ox-basic-field.js +75 -0
- package/dist/src/search-form/ox-basic-field.js.map +1 -0
- package/dist/src/search-form/ox-checkbox-field.d.ts +11 -0
- package/dist/src/search-form/ox-checkbox-field.js +60 -0
- package/dist/src/search-form/ox-checkbox-field.js.map +1 -0
- package/dist/src/search-form/ox-grist-search-form.d.ts +11 -0
- package/dist/src/search-form/ox-grist-search-form.js +177 -0
- package/dist/src/search-form/ox-grist-search-form.js.map +1 -0
- package/dist/src/search-form/ox-number-field.d.ts +14 -0
- package/dist/src/search-form/ox-number-field.js +112 -0
- package/dist/src/search-form/ox-number-field.js.map +1 -0
- package/dist/src/search-form/ox-search-form.d.ts +15 -0
- package/dist/src/search-form/ox-search-form.js +53 -0
- package/dist/src/search-form/ox-search-form.js.map +1 -0
- package/dist/src/search-form/ox-select-field.d.ts +21 -0
- package/dist/src/search-form/ox-select-field.js +181 -0
- package/dist/src/search-form/ox-select-field.js.map +1 -0
- package/dist/src/search-form/ox-text-field.d.ts +11 -0
- package/dist/src/search-form/ox-text-field.js +60 -0
- package/dist/src/search-form/ox-text-field.js.map +1 -0
- package/dist/src/types.d.ts +20 -3
- package/dist/src/types.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -6
- package/src/data-card/data-card-gutter-menu.ts +2 -2
- package/src/data-card/data-card-gutter.ts +3 -3
- package/src/data-grid/data-grid-field.ts +2 -2
- package/src/data-grid/data-grid-header.ts +42 -11
- package/src/data-grist.ts +30 -20
- package/src/data-list/data-list-field.ts +3 -3
- package/src/data-list/data-list-gutter.ts +3 -3
- package/src/data-report/data-report-field.ts +2 -2
- package/src/filters/index.ts +3 -0
- package/src/filters/list-select.ts +14 -0
- package/src/filters/registry.ts +48 -0
- package/src/index.ts +3 -0
- package/src/interfaces/index.ts +2 -0
- package/src/interfaces/ox-grist-search-form.ts +7 -0
- package/src/interfaces/ox-search-field.ts +52 -0
- package/src/search-form/index.ts +7 -0
- package/src/search-form/ox-basic-field.ts +86 -0
- package/src/search-form/ox-checkbox-field.ts +57 -0
- package/src/search-form/ox-grist-search-form.ts +200 -0
- package/src/search-form/ox-number-field.ts +113 -0
- package/src/search-form/ox-search-form.ts +71 -0
- package/src/search-form/ox-select-field.ts +188 -0
- package/src/search-form/ox-text-field.ts +55 -0
- package/src/types.ts +28 -3
- package/yarn-error.log +2427 -3205
package/demo/index.html
CHANGED
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
<link href="/themes/oops-theme.css" rel="stylesheet" />
|
|
45
45
|
<link href="/themes/grist-theme.css" rel="stylesheet" />
|
|
46
46
|
</head>
|
|
47
|
+
|
|
47
48
|
<body>
|
|
48
49
|
<script type="module">
|
|
49
50
|
import { LitElement, html, css, render } from 'lit'
|
|
@@ -225,6 +226,10 @@
|
|
|
225
226
|
options: ['admin', 'worker', 'tester'],
|
|
226
227
|
editable: true
|
|
227
228
|
},
|
|
229
|
+
filter: {
|
|
230
|
+
type: 'code',
|
|
231
|
+
options: ['admin', 'worker', 'tester']
|
|
232
|
+
},
|
|
228
233
|
sortable: true,
|
|
229
234
|
width: 120
|
|
230
235
|
},
|
|
@@ -311,6 +316,7 @@
|
|
|
311
316
|
css`
|
|
312
317
|
:host {
|
|
313
318
|
display: flex;
|
|
319
|
+
flex-direction: column;
|
|
314
320
|
}
|
|
315
321
|
|
|
316
322
|
ox-grist {
|
|
@@ -359,10 +365,21 @@
|
|
|
359
365
|
}
|
|
360
366
|
}
|
|
361
367
|
|
|
368
|
+
get searchForm() {
|
|
369
|
+
return this.shadowRoot.querySelector('ox-grist-search-form')
|
|
370
|
+
}
|
|
371
|
+
|
|
362
372
|
render() {
|
|
363
373
|
const mode = this.mode || 'CARD'
|
|
364
374
|
|
|
365
375
|
return html`
|
|
376
|
+
<ox-grist-search-form
|
|
377
|
+
.config=${config}
|
|
378
|
+
@submit=${event => {
|
|
379
|
+
event.preventDefault()
|
|
380
|
+
console.log(this.searchForm.queryFilters)
|
|
381
|
+
}}
|
|
382
|
+
></ox-grist-search-form>
|
|
366
383
|
<ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
|
|
367
384
|
<div slot="headroom" id="headroom">
|
|
368
385
|
<h1>HEAD ROOM AREA</h1>
|
|
@@ -421,7 +438,7 @@
|
|
|
421
438
|
>sort</mwc-icon
|
|
422
439
|
>
|
|
423
440
|
|
|
424
|
-
<ox-popup-list
|
|
441
|
+
<ox-popup-list multiple>
|
|
425
442
|
<div
|
|
426
443
|
option
|
|
427
444
|
@click=${function (e) {
|
|
@@ -3,7 +3,7 @@ import '@material/mwc-icon';
|
|
|
3
3
|
import './data-card-gutter';
|
|
4
4
|
import { LitElement, css, html } from 'lit';
|
|
5
5
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
6
|
-
import {
|
|
6
|
+
import { OxPopupMenu } from '@operato/popup';
|
|
7
7
|
let DataCardGutterMenu = class DataCardGutterMenu extends LitElement {
|
|
8
8
|
render() {
|
|
9
9
|
return html `
|
|
@@ -29,7 +29,7 @@ let DataCardGutterMenu = class DataCardGutterMenu extends LitElement {
|
|
|
29
29
|
const top = 0;
|
|
30
30
|
const left = this.icon.offsetWidth;
|
|
31
31
|
const parent = this;
|
|
32
|
-
|
|
32
|
+
OxPopupMenu.open({
|
|
33
33
|
template: this.menuRender(),
|
|
34
34
|
top,
|
|
35
35
|
left,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-card-gutter-menu.js","sourceRoot":"","sources":["../../../src/data-card/data-card-gutter-menu.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,oBAAoB,CAAA;AAG3B,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"data-card-gutter-menu.js","sourceRoot":"","sources":["../../../src/data-card/data-card-gutter-menu.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,oBAAoB,CAAA;AAG3B,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAiBzC,MAAM;QACJ,OAAO,IAAI,CAAA;yBACU,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;;KAE7C,CAAA;IACH,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;wBAEE,IAAI,CAAC,QAAQ;sBACf,MAAM;sBACN,IAAI,CAAC,MAAM;qBACZ,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC;;;;SAIpC,CACF;KACF,CAAA;IACH,CAAC;IAED,IAAI;QACF,MAAM,GAAG,GAAG,CAAC,CAAA;QACb,MAAM,IAAI,GAAI,IAAI,CAAC,IAAoB,CAAC,WAAW,CAAA;QACnD,MAAM,MAAM,GAAG,IAAI,CAAA;QAEnB,WAAW,CAAC,IAAI,CAAC;YACf,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE;YAC3B,GAAG;YACH,IAAI;YACJ,MAAM;SACP,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AApDQ,yBAAM,GAAG,GAAG,CAAA;;;;;;;;GAQlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAqB;AAE7B;IAAlB,KAAK,CAAC,UAAU,CAAC;gDAAe;AAf7B,kBAAkB;IADvB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,kBAAkB,CAqDvB","sourcesContent":["import '@material/mwc-icon'\nimport './data-card-gutter'\n\nimport { ColumnConfig, GristRecord } from '../types'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxPopupMenu } from '@operato/popup'\n\n@customElement('ox-card-gutter-menu')\nclass DataCardGutterMenu extends LitElement {\n static styles = css`\n :host {\n position: relative;\n }\n\n mwc-icon {\n cursor: pointer;\n }\n `\n\n @property({ type: Object }) gutters!: ColumnConfig[]\n @property({ type: Number }) rowIndex!: number\n @property({ type: Object }) record!: GristRecord\n\n @query('mwc-icon') icon!: Element\n\n render() {\n return html`\n <mwc-icon @click=${(e: Event) => this.open()}>more_horiz</mwc-icon>\n <slot></slot>\n `\n }\n\n menuRender() {\n return html`\n ${this.gutters.map(\n gutter => html`\n <ox-card-gutter\n .rowIndex=${this.rowIndex}\n .column=${gutter}\n .record=${this.record}\n .value=${this.record[gutter.name]}\n menu\n alive-on-select\n ></ox-card-gutter>\n `\n )}\n `\n }\n\n open() {\n const top = 0\n const left = (this.icon as HTMLElement).offsetWidth\n const parent = this\n\n OxPopupMenu.open({\n template: this.menuRender(),\n top,\n left,\n parent\n })\n }\n}\n"]}
|
|
@@ -1 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
import { ColumnConfig, GristRecord } from '../types';
|
|
2
|
+
import { LitElement, PropertyValues, TemplateResult } from 'lit';
|
|
3
|
+
export declare class DataCardGutter extends LitElement {
|
|
4
|
+
static styles: import("lit").CSSResult[];
|
|
5
|
+
align?: string;
|
|
6
|
+
record: GristRecord;
|
|
7
|
+
column: ColumnConfig;
|
|
8
|
+
rowIndex: number;
|
|
9
|
+
value?: object;
|
|
10
|
+
get isEditing(): boolean;
|
|
11
|
+
render(): TemplateResult;
|
|
12
|
+
updated(changes: PropertyValues<this>): void;
|
|
13
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-card-gutter.js","sourceRoot":"","sources":["../../../src/data-card/data-card-gutter.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"data-card-gutter.js","sourceRoot":"","sources":["../../../src/data-card/data-card-gutter.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAkC,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3E,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,MAAM,kBAAkB,GAAG,MAAM,CAAA;AAGjC,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAgC8B,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAiCnD,CAAC;IA9BC,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;IACrC,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,OAAO,IAAI,CAAA,EAAE,CAAA;SACd;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,oEAAoE;QACpE,OAAO,IAAI,CAAA,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAA;IACnE,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,kBAAkB,CAAA;YAC1D,IAAI,KAAK,IAAI,kBAAkB,EAAE;gBAC/B,IAAI,OAAO,GAAG,QAAQ,CAAA;gBACtB,QAAQ,KAAK,EAAE;oBACb,KAAK,OAAO;wBACV,OAAO,GAAG,UAAU,CAAA;wBACpB,MAAK;iBACR;gBACD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,oCAAoC,EAAE,OAAO,CAAC,CAAA;aACtE;SACF;IACH,CAAC;CACF,CAAA;AAlEQ,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BF;CACF,CAAA;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAnC/B,cAAc;IAD1B,aAAa,CAAC,gBAAgB,CAAC;GACnB,cAAc,CAmE1B;SAnEY,cAAc","sourcesContent":["import { ColumnConfig, GristRecord } from '../types'\nimport { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-card-gutter')\nexport class DataCardGutter extends LitElement {\n static styles = [\n css`\n :host {\n background-color: transparent;\n\n font-size: var(--grid-record-wide-fontsize);\n text-overflow: ellipsis;\n color: var(--grid-record-color);\n }\n\n * {\n flex: 1;\n margin: 0;\n margin-bottom: 1px;\n border: var(--data-card-item-btn-border);\n border-radius: var(--data-card-item-btn-border-radius);\n padding: var(--data-card-item-btn-padding);\n }\n *:hover {\n color: var(--grid-record-color-hover);\n cursor: pointer;\n }\n\n *[center] {\n flex: none;\n margin: 0 auto;\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 get isEditing() {\n return this.hasAttribute('editing')\n }\n\n render(): TemplateResult {\n if (!this.column) {\n return html``\n }\n\n var { value, column, record, rowIndex } = this\n var { renderer } = column.record\n\n /* renderer가 html template이 아니고 단순한 값인 경우가 있으므로, html 템플릿으로 감싸준다. */\n return html` ${renderer(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-card-gutter-justify-content', justify)\n }\n }\n }\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ColumnConfig, GristRecord } from '../types';
|
|
2
|
-
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
+
import { LitElement, PropertyValues, TemplateResult } from 'lit';
|
|
3
3
|
export declare class DataGridField extends LitElement {
|
|
4
4
|
static styles: import("lit").CSSResult[];
|
|
5
5
|
align: string;
|
|
@@ -14,6 +14,6 @@ export declare class DataGridField extends LitElement {
|
|
|
14
14
|
private _onFieldChange;
|
|
15
15
|
private _onKeydownInEditingMode;
|
|
16
16
|
private get isEditing();
|
|
17
|
-
render():
|
|
17
|
+
render(): TemplateResult;
|
|
18
18
|
updated(changes: PropertyValues<this>): void;
|
|
19
19
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { ColumnConfig, GristRecord } from '../types'\nimport { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN } from '../configure/zero-config'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-field')\nexport class DataGridField extends LitElement {\n static styles = [\n css`\n :host {\n align-items: center;\n justify-content: var(--data-grid-field-justify-content, flex-start);\n position: relative;\n\n overflow: hidden;\n white-space: nowrap;\n background-color: var(--grid-record-background-color);\n padding: var(--grid-record-padding);\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 :host([gutter]) {\n padding: var(--padding-default) 0;\n text-align: center;\n }\n :host([gutter]) * {\n cursor: default;\n }\n\n :host([editing]) {\n padding: 0;\n border-top: var(--grid-record-editing-border);\n border-bottom: var(--grid-record-editing-border);\n }\n\n :host([focused]) {\n --grid-record-border-bottom: var(--grid-record-focused-cell-border);\n }\n\n :host([dirty])::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n\n width: 0px;\n height: 0px;\n border-top: 9px solid red;\n border-left: 9px solid transparent;\n }\n\n span {\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 input[type='checkbox'],\n input[type='radio'] {\n margin-top: 3px;\n zoom: var(--grist-input-zoom);\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 = 0\n @property({ type: Number }) columnIndex = 0\n @property({ type: Boolean, attribute: 'editing' }) editing = false\n @property({ type: Object }) value = {}\n @property({ type: Boolean }) emphasized = false\n\n private _editCancelled?: boolean\n private _onFieldChange: (e: Event) => void = e => {}\n private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}\n\n private get isEditing() {\n return this.hasAttribute('editing')\n }\n\n render(): TemplateResult {\n if (!this.column) {\n return html``\n }\n\n var { value, column, record, rowIndex } = this\n var { renderer, editor } = column.record\n\n return html`\n ${this.isEditing\n ? editor?.call(this, value, column, record, rowIndex, this)\n : renderer?.call(this, value, column, record, rowIndex, this)}\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('editing')) {\n if (this.isEditing) {\n this._onKeydownInEditingMode = ((e: KeyboardEvent) => {\n if (e.keyCode == 27 /* KEY_ESC */) {\n /* 편집 취소 */\n this._editCancelled = true\n }\n }).bind(this)\n\n this._onFieldChange = ((e: Event) => {\n this._editCancelled && e.stopPropagation()\n }).bind(this)\n\n delete this._editCancelled\n this.addEventListener('field-change', this._onFieldChange)\n this.addEventListener('keydown', this._onKeydownInEditingMode)\n } else {\n this.removeEventListener('field-change', this._onFieldChange)\n this.removeEventListener('keydown', this._onKeydownInEditingMode)\n }\n }\n\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 const emphasized =\n this.column.record.classifier.call(this, this.record, this.rowIndex)?.emphasized || this.emphasized\n\n if (!!emphasized) {\n this.setAttribute('emphasized-row', 'true')\n\n if (Symbol.iterator in Object(emphasized)) {\n const [backgroundColor, foregroundColor] = emphasized as string[]\n backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n }\n } else {\n this.removeAttribute('emphasized-row')\n }\n }\n}\n"]}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import '@operato/popup';
|
|
2
|
+
import '@operato/input';
|
|
1
3
|
import '@material/mwc-icon';
|
|
2
4
|
import { ColumnConfig, GristConfig, GristData } from '../types';
|
|
3
5
|
import { LitElement, PropertyValues } from 'lit';
|
|
@@ -12,6 +14,7 @@ export declare class DataGridHeader extends LitElement {
|
|
|
12
14
|
render(): import("lit-html").TemplateResult<1>;
|
|
13
15
|
_renderHeader(column: ColumnConfig): import("lit-html").TemplateResult<1>;
|
|
14
16
|
_renderSortHeader(column: ColumnConfig): import("lit-html").TemplateResult<1>;
|
|
17
|
+
_renderFilterHeader(column: ColumnConfig): import("lit-html").TemplateResult<1>;
|
|
15
18
|
updated(changes: PropertyValues<this>): void;
|
|
16
19
|
_changeSort(column: ColumnConfig): void;
|
|
17
20
|
_accumalate(x: number): number;
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
+
import '@operato/popup';
|
|
3
|
+
import '@operato/input';
|
|
2
4
|
import '@material/mwc-icon';
|
|
3
5
|
import { LitElement, css, html } from 'lit';
|
|
4
6
|
import { ZERO_COLUMNS, ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config';
|
|
5
7
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
8
|
+
import { getRenderer } from '../filters/registry';
|
|
6
9
|
import throttle from 'lodash-es/throttle';
|
|
7
10
|
let DataGridHeader = class DataGridHeader extends LitElement {
|
|
8
11
|
constructor() {
|
|
@@ -17,7 +20,7 @@ let DataGridHeader = class DataGridHeader extends LitElement {
|
|
|
17
20
|
return html `
|
|
18
21
|
${columns.map((column, idx) => !column.hidden
|
|
19
22
|
? html `
|
|
20
|
-
<div ?gutter=${column.type == 'gutter'}>
|
|
23
|
+
<div ?gutter=${column.type == 'gutter'} column>
|
|
21
24
|
<span for-title @click=${(e) => this._changeSort(column)}
|
|
22
25
|
>${this._renderHeader(column)}
|
|
23
26
|
</span>
|
|
@@ -28,19 +31,20 @@ let DataGridHeader = class DataGridHeader extends LitElement {
|
|
|
28
31
|
${this._renderSortHeader(column)}
|
|
29
32
|
</span>
|
|
30
33
|
`
|
|
31
|
-
:
|
|
34
|
+
: undefined}
|
|
35
|
+
${column.filter ? html ` <span filter> ${this._renderFilterHeader(column)} </span> ` : undefined}
|
|
32
36
|
${column.resizable !== false
|
|
33
37
|
? html `
|
|
34
38
|
<span splitter draggable="false" @mousedown=${(e) => this._mousedown(e, idx)}
|
|
35
39
|
> </span
|
|
36
40
|
>
|
|
37
41
|
`
|
|
38
|
-
:
|
|
42
|
+
: undefined}
|
|
39
43
|
</div>
|
|
40
44
|
`
|
|
41
|
-
:
|
|
45
|
+
: undefined)}
|
|
42
46
|
|
|
43
|
-
<div></div>
|
|
47
|
+
<div column></div>
|
|
44
48
|
`;
|
|
45
49
|
}
|
|
46
50
|
_renderHeader(column) {
|
|
@@ -49,9 +53,6 @@ let DataGridHeader = class DataGridHeader extends LitElement {
|
|
|
49
53
|
return html ` ${title} `;
|
|
50
54
|
}
|
|
51
55
|
_renderSortHeader(column) {
|
|
52
|
-
if (column.hidden) {
|
|
53
|
-
return html ``;
|
|
54
|
-
}
|
|
55
56
|
var sorters = this._sorters;
|
|
56
57
|
var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name);
|
|
57
58
|
if (!sorter) {
|
|
@@ -69,6 +70,31 @@ let DataGridHeader = class DataGridHeader extends LitElement {
|
|
|
69
70
|
: html ` <mwc-icon>keyboard_arrow_down</mwc-icon> `;
|
|
70
71
|
}
|
|
71
72
|
}
|
|
73
|
+
_renderFilterHeader(column) {
|
|
74
|
+
var _a;
|
|
75
|
+
var filter = column.filter;
|
|
76
|
+
return html `
|
|
77
|
+
<mwc-icon
|
|
78
|
+
@click=${(e) => {
|
|
79
|
+
const parent = e.target.closest('[column]');
|
|
80
|
+
const popup = parent.querySelector('[popup]');
|
|
81
|
+
// const popup = (e.target as HTMLElement).nextSibling as OxPopupList | null
|
|
82
|
+
// absolute position인 popup의 위치 부모는 grist 이므로,
|
|
83
|
+
// data-grid-header 의 포지션 부모(grist)의 위치로부터 계산해야함.
|
|
84
|
+
// this의 position을 relative로 하지 못하는 이유 : ox-popup-list가 grid body에 덮히기 때문.
|
|
85
|
+
const top = parent.offsetTop + parent.offsetHeight;
|
|
86
|
+
const right = this.clientWidth - (parent.offsetLeft + parent.offsetWidth - this.scrollLeft);
|
|
87
|
+
popup === null || popup === void 0 ? void 0 : popup.open({
|
|
88
|
+
right,
|
|
89
|
+
top
|
|
90
|
+
});
|
|
91
|
+
}}
|
|
92
|
+
>filter_alt</mwc-icon
|
|
93
|
+
>
|
|
94
|
+
|
|
95
|
+
${getRenderer(((_a = column.filter) === null || _a === void 0 ? void 0 : _a.type) || column.type)(column, this)}
|
|
96
|
+
`;
|
|
97
|
+
}
|
|
72
98
|
updated(changes) {
|
|
73
99
|
if (changes.has('config')) {
|
|
74
100
|
this._sorters = this.config.sorters || [];
|
|
@@ -191,11 +217,13 @@ DataGridHeader.styles = [
|
|
|
191
217
|
font-size: var(--grid-record-fontsize);
|
|
192
218
|
}
|
|
193
219
|
|
|
194
|
-
span[sorter]
|
|
220
|
+
span[sorter],
|
|
221
|
+
span[filter] {
|
|
195
222
|
padding: 0;
|
|
196
223
|
border: 0;
|
|
197
224
|
}
|
|
198
|
-
span[sorter] mwc-icon
|
|
225
|
+
span[sorter] mwc-icon,
|
|
226
|
+
span[filter] mwc-icon {
|
|
199
227
|
font-size: var(--grid-header-sorter-size);
|
|
200
228
|
}
|
|
201
229
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-grid-header.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-header.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { ColumnConfig, GristConfig, GristData, SortersConfig } from '../types'\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { ZERO_COLUMNS, ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport throttle from 'lodash-es/throttle'\n\n@customElement('ox-grid-header')\nexport class DataGridHeader extends LitElement {\n static styles = [\n css`\n :host {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n\n overflow: hidden;\n }\n\n div {\n display: flex;\n\n white-space: nowrap;\n overflow: hidden;\n background-color: var(--grid-header-background-color);\n border-top: var(--grid-header-top-border);\n border-bottom: var(--grid-header-bottom-border);\n padding: var(--grid-header-padding);\n\n text-overflow: ellipsis;\n font: var(--grid-header-font);\n color: var(--grid-header-color);\n }\n\n div[gutter] {\n padding: var(--padding-default) 0 var(--padding-narrow) 0;\n text-align: center;\n }\n\n span {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n }\n\n span[for-title] {\n flex: 1;\n text-overflow: ellipsis;\n line-height: 1.6;\n text-transform: capitalize;\n }\n span[for-title] mwc-icon {\n font-size: var(--grid-record-fontsize);\n }\n\n span[sorter] {\n padding: 0;\n border: 0;\n }\n span[sorter] mwc-icon {\n font-size: var(--grid-header-sorter-size);\n }\n\n span[splitter] {\n cursor: col-resize;\n border-right: var(--grid-header-splitter-border);\n }\n span[splitter]:hover {\n border-right: var(--grid-header-splitter-border-hover);\n }\n input[type='checkbox'],\n input[type='radio'] {\n margin: 3px 0 0 0;\n zoom: var(--grist-input-zoom);\n }\n\n @media print {\n :host {\n grid-template-columns: var(--grid-template-print-columns);\n }\n }\n `\n ]\n\n @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n @property({ type: Array }) columns: ColumnConfig[] = ZERO_COLUMNS\n @property({ type: Object }) data: GristData = ZERO_DATA\n\n @state() private _sorters: SortersConfig = []\n private _lastAccVal?: number\n private _throttledNotifier?: any\n\n render() {\n var columns = this.columns || []\n\n return html`\n ${columns.map((column, idx) =>\n !column.hidden\n ? html`\n <div ?gutter=${column.type == 'gutter'}>\n <span for-title @click=${(e: MouseEvent) => this._changeSort(column)}\n >${this._renderHeader(column)}\n </span>\n\n ${column.sortable\n ? html`\n <span sorter @click=${(e: MouseEvent) => this._changeSort(column)}>\n ${this._renderSortHeader(column)}\n </span>\n `\n : html``}\n ${column.resizable !== false\n ? html`\n <span splitter draggable=\"false\" @mousedown=${(e: MouseEvent) => this._mousedown(e, idx)}\n > </span\n >\n `\n : html``}\n </div>\n `\n : html``\n )}\n\n <div></div>\n `\n }\n\n _renderHeader(column: ColumnConfig) {\n var { renderer } = column.header || {}\n var title = renderer.call(this, column)\n\n return html` ${title} `\n }\n\n _renderSortHeader(column: ColumnConfig) {\n if (column.hidden) {\n return html``\n }\n\n var sorters = this._sorters\n\n var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name)\n if (!sorter) {\n return html``\n }\n\n if (sorters.length > 1) {\n var rank = sorters.indexOf(sorter) + 1\n return sorter.desc\n ? html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `\n : html` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `\n } else {\n return sorter.desc\n ? html` <mwc-icon>keyboard_arrow_up</mwc-icon> `\n : html` <mwc-icon>keyboard_arrow_down</mwc-icon> `\n }\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('config')) {\n this._sorters = this.config.sorters || []\n }\n }\n\n _changeSort(column: ColumnConfig) {\n if (!column.sortable) {\n return\n }\n\n var sorters = [...this._sorters]\n\n var idx = sorters.findIndex(sorter => sorter.name == column.name)\n if (idx !== -1) {\n let sorter = sorters[idx]\n if (sorter.desc) {\n sorters.splice(idx, 1)\n } else {\n sorter.desc = true\n }\n } else {\n var sorter = {\n name: column.name\n }\n\n sorters.push(sorter)\n }\n\n this._sorters = sorters\n\n this.dispatchEvent(\n new CustomEvent('sorters-change', {\n bubbles: true,\n composed: true,\n detail: this._sorters\n })\n )\n }\n\n _accumalate(x: number) {\n this._lastAccVal = (this._lastAccVal ?? 0) + x\n return this._lastAccVal\n }\n\n _notifyWidthChange(idx: number, width: number) {\n if (!this._throttledNotifier) {\n this._throttledNotifier = throttle((idx: number, width: number) => {\n this.dispatchEvent(\n new CustomEvent('column-width-change', {\n bubbles: true,\n composed: true,\n detail: {\n idx,\n width\n }\n })\n )\n\n this._lastAccVal = 0\n }, 100)\n }\n\n this._throttledNotifier(idx, width)\n }\n\n _mousedown(e: MouseEvent, idx: number) {\n e.stopPropagation()\n e.preventDefault()\n\n var mousemoveHandler = ((e: MouseEvent) => {\n e.stopPropagation()\n e.preventDefault()\n let column = this.columns[idx]\n\n let width = Math.max(0, Number(column.width) + this._accumalate(e.movementX))\n if (width == 0) {\n /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */\n return\n }\n\n this._notifyWidthChange(idx, width)\n }).bind(this)\n\n var mouseupHandler = ((e: MouseEvent) => {\n document.removeEventListener('mousemove', mousemoveHandler)\n document.removeEventListener('mouseup', mouseupHandler)\n\n mousemoveHandler(e)\n }).bind(this)\n\n document.addEventListener('mousemove', mousemoveHandler)\n document.addEventListener('mouseup', mouseupHandler)\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"data-grid-header.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-header.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup'\nimport '@operato/input'\nimport '@material/mwc-icon'\n\nimport { ColumnConfig, GristConfig, GristData, SortersConfig } from '../types'\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { OxPopup, OxPopupList } from '@operato/popup'\nimport { ZERO_COLUMNS, ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { getRenderer } from '../filters/registry'\nimport throttle from 'lodash-es/throttle'\n\n@customElement('ox-grid-header')\nexport class DataGridHeader extends LitElement {\n static styles = [\n css`\n :host {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n\n overflow: hidden;\n }\n\n div {\n display: flex;\n\n white-space: nowrap;\n overflow: hidden;\n background-color: var(--grid-header-background-color);\n border-top: var(--grid-header-top-border);\n border-bottom: var(--grid-header-bottom-border);\n padding: var(--grid-header-padding);\n\n text-overflow: ellipsis;\n font: var(--grid-header-font);\n color: var(--grid-header-color);\n }\n\n div[gutter] {\n padding: var(--padding-default) 0 var(--padding-narrow) 0;\n text-align: center;\n }\n\n span {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n }\n\n span[for-title] {\n flex: 1;\n text-overflow: ellipsis;\n line-height: 1.6;\n text-transform: capitalize;\n }\n span[for-title] mwc-icon {\n font-size: var(--grid-record-fontsize);\n }\n\n span[sorter],\n span[filter] {\n padding: 0;\n border: 0;\n }\n span[sorter] mwc-icon,\n span[filter] mwc-icon {\n font-size: var(--grid-header-sorter-size);\n }\n\n span[splitter] {\n cursor: col-resize;\n border-right: var(--grid-header-splitter-border);\n }\n span[splitter]:hover {\n border-right: var(--grid-header-splitter-border-hover);\n }\n input[type='checkbox'],\n input[type='radio'] {\n margin: 3px 0 0 0;\n zoom: var(--grist-input-zoom);\n }\n\n @media print {\n :host {\n grid-template-columns: var(--grid-template-print-columns);\n }\n }\n `\n ]\n\n @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n @property({ type: Array }) columns: ColumnConfig[] = ZERO_COLUMNS\n @property({ type: Object }) data: GristData = ZERO_DATA\n\n @state() private _sorters: SortersConfig = []\n private _lastAccVal?: number\n private _throttledNotifier?: any\n\n render() {\n var columns = this.columns || []\n\n return html`\n ${columns.map((column, idx) =>\n !column.hidden\n ? html`\n <div ?gutter=${column.type == 'gutter'} column>\n <span for-title @click=${(e: MouseEvent) => this._changeSort(column)}\n >${this._renderHeader(column)}\n </span>\n\n ${column.sortable\n ? html`\n <span sorter @click=${(e: MouseEvent) => this._changeSort(column)}>\n ${this._renderSortHeader(column)}\n </span>\n `\n : undefined}\n ${column.filter ? html` <span filter> ${this._renderFilterHeader(column)} </span> ` : undefined}\n ${column.resizable !== false\n ? html`\n <span splitter draggable=\"false\" @mousedown=${(e: MouseEvent) => this._mousedown(e, idx)}\n > </span\n >\n `\n : undefined}\n </div>\n `\n : undefined\n )}\n\n <div column></div>\n `\n }\n\n _renderHeader(column: ColumnConfig) {\n var { renderer } = column.header || {}\n var title = renderer.call(this, column)\n\n return html` ${title} `\n }\n\n _renderSortHeader(column: ColumnConfig) {\n var sorters = this._sorters\n\n var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name)\n if (!sorter) {\n return html``\n }\n\n if (sorters.length > 1) {\n var rank = sorters.indexOf(sorter) + 1\n return sorter.desc\n ? html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `\n : html` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `\n } else {\n return sorter.desc\n ? html` <mwc-icon>keyboard_arrow_up</mwc-icon> `\n : html` <mwc-icon>keyboard_arrow_down</mwc-icon> `\n }\n }\n\n _renderFilterHeader(column: ColumnConfig) {\n var filter = column.filter\n\n return html`\n <mwc-icon\n @click=${(e: Event) => {\n const parent = (e.target as HTMLElement).closest('[column]') as HTMLElement\n const popup = parent.querySelector('[popup]') as OxPopup | null\n // const popup = (e.target as HTMLElement).nextSibling as OxPopupList | null\n\n // absolute position인 popup의 위치 부모는 grist 이므로,\n // data-grid-header 의 포지션 부모(grist)의 위치로부터 계산해야함.\n // this의 position을 relative로 하지 못하는 이유 : ox-popup-list가 grid body에 덮히기 때문.\n const top = parent.offsetTop + parent.offsetHeight\n const right = this.clientWidth - (parent.offsetLeft + parent.offsetWidth - this.scrollLeft)\n\n popup?.open({\n right,\n top\n })\n }}\n >filter_alt</mwc-icon\n >\n\n ${getRenderer(column.filter?.type || column.type)(column, this)}\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('config')) {\n this._sorters = this.config.sorters || []\n }\n }\n\n _changeSort(column: ColumnConfig) {\n if (!column.sortable) {\n return\n }\n\n var sorters = [...this._sorters]\n\n var idx = sorters.findIndex(sorter => sorter.name == column.name)\n if (idx !== -1) {\n let sorter = sorters[idx]\n if (sorter.desc) {\n sorters.splice(idx, 1)\n } else {\n sorter.desc = true\n }\n } else {\n var sorter = {\n name: column.name\n }\n\n sorters.push(sorter)\n }\n\n this._sorters = sorters\n\n this.dispatchEvent(\n new CustomEvent('sorters-change', {\n bubbles: true,\n composed: true,\n detail: this._sorters\n })\n )\n }\n\n _accumalate(x: number) {\n this._lastAccVal = (this._lastAccVal ?? 0) + x\n return this._lastAccVal\n }\n\n _notifyWidthChange(idx: number, width: number) {\n if (!this._throttledNotifier) {\n this._throttledNotifier = throttle((idx: number, width: number) => {\n this.dispatchEvent(\n new CustomEvent('column-width-change', {\n bubbles: true,\n composed: true,\n detail: {\n idx,\n width\n }\n })\n )\n\n this._lastAccVal = 0\n }, 100)\n }\n\n this._throttledNotifier(idx, width)\n }\n\n _mousedown(e: MouseEvent, idx: number) {\n e.stopPropagation()\n e.preventDefault()\n\n var mousemoveHandler = ((e: MouseEvent) => {\n e.stopPropagation()\n e.preventDefault()\n let column = this.columns[idx]\n\n let width = Math.max(0, Number(column.width) + this._accumalate(e.movementX))\n if (width == 0) {\n /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */\n return\n }\n\n this._notifyWidthChange(idx, width)\n }).bind(this)\n\n var mouseupHandler = ((e: MouseEvent) => {\n document.removeEventListener('mousemove', mousemoveHandler)\n document.removeEventListener('mouseup', mouseupHandler)\n\n mousemoveHandler(e)\n }).bind(this)\n\n document.addEventListener('mousemove', mousemoveHandler)\n document.addEventListener('mouseup', mouseupHandler)\n }\n}\n"]}
|
package/dist/src/data-grist.d.ts
CHANGED
|
@@ -21,16 +21,18 @@ export declare class DataGrist extends LitElement implements DataConsumer {
|
|
|
21
21
|
_config: GristConfig;
|
|
22
22
|
private _showSpinner;
|
|
23
23
|
private dataProvider?;
|
|
24
|
-
private
|
|
25
|
-
private
|
|
24
|
+
private _pulltorefreshHandle?;
|
|
25
|
+
private _headroom?;
|
|
26
|
+
private _resizeObserver;
|
|
26
27
|
head: HTMLElement;
|
|
27
28
|
grist: DataGrid | DataList | DataCard;
|
|
28
29
|
private wrap;
|
|
29
|
-
connectedCallback(): void
|
|
30
|
+
connectedCallback(): Promise<void>;
|
|
30
31
|
disconnectedCallback(): void;
|
|
31
|
-
private
|
|
32
|
-
private
|
|
33
|
-
|
|
32
|
+
private _resetPullToRefresh;
|
|
33
|
+
private _setPullToRefresh;
|
|
34
|
+
private _adjustPaddingTop;
|
|
35
|
+
private _setHeadroom;
|
|
34
36
|
render(): import("lit-html").TemplateResult<1>;
|
|
35
37
|
fetch(reset?: boolean): Promise<void>;
|
|
36
38
|
updated(changes: PropertyValues<this>): Promise<void>;
|
|
@@ -57,7 +59,7 @@ export declare class DataGrist extends LitElement implements DataConsumer {
|
|
|
57
59
|
/**
|
|
58
60
|
* Forced internal data to be reflected on the screen
|
|
59
61
|
* Data changing through a normal method is automatically reflected on the screen, so it is a method that does not need to be used in general.
|
|
60
|
-
|
|
62
|
+
* Therefore, it will be deprecated.
|
|
61
63
|
* @deprecated
|
|
62
64
|
* @method
|
|
63
65
|
*/
|
package/dist/src/data-grist.js
CHANGED
|
@@ -22,27 +22,33 @@ let DataGrist = class DataGrist extends LitElement {
|
|
|
22
22
|
this._data = ZERO_DATA;
|
|
23
23
|
this._config = ZERO_CONFIG;
|
|
24
24
|
this._showSpinner = false;
|
|
25
|
+
this._resizeObserver = new ResizeObserver(entries => {
|
|
26
|
+
this._adjustPaddingTop();
|
|
27
|
+
});
|
|
25
28
|
}
|
|
26
|
-
connectedCallback() {
|
|
29
|
+
async connectedCallback() {
|
|
27
30
|
super.connectedCallback();
|
|
28
31
|
this.dataProvider = new DataProvider(this);
|
|
32
|
+
await this.updateComplete;
|
|
33
|
+
this._resizeObserver.observe(this.head);
|
|
29
34
|
}
|
|
30
35
|
disconnectedCallback() {
|
|
31
36
|
var _a;
|
|
32
37
|
super.disconnectedCallback();
|
|
33
38
|
(_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
34
|
-
this.
|
|
39
|
+
this._resetPullToRefresh();
|
|
40
|
+
this._resizeObserver.unobserve(this.head);
|
|
35
41
|
}
|
|
36
|
-
|
|
37
|
-
if (this.
|
|
38
|
-
this.
|
|
39
|
-
delete this.
|
|
42
|
+
_resetPullToRefresh() {
|
|
43
|
+
if (this._pulltorefreshHandle) {
|
|
44
|
+
this._pulltorefreshHandle();
|
|
45
|
+
delete this._pulltorefreshHandle;
|
|
40
46
|
}
|
|
41
47
|
}
|
|
42
|
-
async
|
|
43
|
-
this.
|
|
48
|
+
async _setPullToRefresh() {
|
|
49
|
+
this._resetPullToRefresh();
|
|
44
50
|
if (this.fetchHandler) {
|
|
45
|
-
this.
|
|
51
|
+
this._pulltorefreshHandle = pulltorefresh({
|
|
46
52
|
container: await this.wrap,
|
|
47
53
|
scrollable: this.grist.pullToRefreshTarget,
|
|
48
54
|
refresh: () => {
|
|
@@ -51,16 +57,18 @@ let DataGrist = class DataGrist extends LitElement {
|
|
|
51
57
|
});
|
|
52
58
|
}
|
|
53
59
|
}
|
|
54
|
-
|
|
60
|
+
_adjustPaddingTop() {
|
|
61
|
+
this.grist.style.paddingTop = this.head.clientHeight + 'px';
|
|
62
|
+
}
|
|
63
|
+
_setHeadroom() {
|
|
55
64
|
var _a;
|
|
56
|
-
(_a = this.
|
|
65
|
+
(_a = this._headroom) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
57
66
|
if (this.grist && this.head) {
|
|
58
|
-
|
|
59
|
-
this.
|
|
60
|
-
this.headroom = new Headroom(this.head, {
|
|
67
|
+
this._adjustPaddingTop();
|
|
68
|
+
this._headroom = new Headroom(this.head, {
|
|
61
69
|
scroller: this.grist
|
|
62
70
|
});
|
|
63
|
-
this.
|
|
71
|
+
this._headroom.init();
|
|
64
72
|
}
|
|
65
73
|
}
|
|
66
74
|
render() {
|
|
@@ -138,7 +146,7 @@ let DataGrist = class DataGrist extends LitElement {
|
|
|
138
146
|
}
|
|
139
147
|
if (changes.has('mode')) {
|
|
140
148
|
needToSetPullToRefresh = true;
|
|
141
|
-
this.
|
|
149
|
+
this._setHeadroom();
|
|
142
150
|
}
|
|
143
151
|
if (changes.has('selectedRecords')) {
|
|
144
152
|
var { records } = this.data || [];
|
|
@@ -156,7 +164,7 @@ let DataGrist = class DataGrist extends LitElement {
|
|
|
156
164
|
this.refresh();
|
|
157
165
|
}
|
|
158
166
|
if (needToSetPullToRefresh) {
|
|
159
|
-
await this.
|
|
167
|
+
await this._setPullToRefresh();
|
|
160
168
|
}
|
|
161
169
|
}
|
|
162
170
|
get dirtyData() {
|
|
@@ -241,7 +249,7 @@ let DataGrist = class DataGrist extends LitElement {
|
|
|
241
249
|
/**
|
|
242
250
|
* Forced internal data to be reflected on the screen
|
|
243
251
|
* Data changing through a normal method is automatically reflected on the screen, so it is a method that does not need to be used in general.
|
|
244
|
-
|
|
252
|
+
* Therefore, it will be deprecated.
|
|
245
253
|
* @deprecated
|
|
246
254
|
* @method
|
|
247
255
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-grist.js","sourceRoot":"","sources":["../../src/data-grist.ts"],"names":[],"mappings":"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","sourcesContent":["import './data-grid/data-grid'\nimport './data-list/data-list'\nimport './data-card/data-card'\nimport './empty-note'\n\nimport { DataConsumer, FetchHandler } from './data-consumer'\nimport { GristConfig, GristData, GristRecord } from './types'\nimport { HeadroomStyles, ScrollbarStyles, SpinnerStyles } from '@operato/styles'\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_PAGINATION } from './configure/zero-config'\nimport { customElement, property, query, queryAsync, state } from 'lit/decorators.js'\n\nimport { DataCard } from './data-card/data-card'\nimport { DataGrid } from './data-grid/data-grid'\nimport { DataList } from './data-list/data-list'\nimport { DataProvider } from './data-provider'\nimport Headroom from '@operato/headroom'\nimport { buildConfig } from './configure/config-builder'\nimport isEmpty from 'lodash-es/isEmpty'\nimport isEqual from 'lodash-es/isEqual'\nimport { pulltorefresh } from '@operato/pull-to-refresh'\n\n@customElement('ox-grist')\nexport class DataGrist extends LitElement implements DataConsumer {\n static styles = [\n ScrollbarStyles,\n HeadroomStyles,\n SpinnerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n background-color: var(--grist-background-color);\n min-height: 120px;\n\n overflow: hidden;\n\n /* for pulltorefresh controller */\n position: relative;\n\n --mdc-icon-size: var(--grid-record-wide-fontsize);\n }\n\n #wrap {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: auto;\n }\n\n ox-grid,\n ox-list {\n flex: 1;\n }\n\n ox-empty-note {\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n slot[name='headroom'] {\n display: block;\n\n position: absolute;\n top: 0;\n left: 0;\n\n width: 100%;\n box-sizing: border-box;\n }\n `\n ]\n\n @property() mode: string = 'GRID'\n @property() config: any\n @property() data: GristData = ZERO_DATA\n @property() selectedRecords?: GristRecord[]\n @property({ type: Boolean, attribute: 'auto-fetch' }) autoFetch: boolean = false\n @property() fetchHandler?: FetchHandler\n @property() fetchOptions: any\n\n @state() _data: GristData = ZERO_DATA\n @state() _config: GristConfig = ZERO_CONFIG\n @state() private _showSpinner: boolean = false\n\n private dataProvider?: DataProvider\n private pulltorefreshHandle?: any\n private headroom?: Headroom\n\n @query('slot[name=headroom]') head!: HTMLElement\n @query('#grist') grist!: DataGrid | DataList | DataCard\n @queryAsync('#wrap') private wrap!: Promise<HTMLElement>\n\n connectedCallback() {\n super.connectedCallback()\n\n this.dataProvider = new DataProvider(this)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this.dataProvider?.dispose()\n this.resetPullToRefresh()\n }\n\n private resetPullToRefresh() {\n if (this.pulltorefreshHandle) {\n this.pulltorefreshHandle()\n delete this.pulltorefreshHandle\n }\n }\n\n private async setPullToRefresh() {\n this.resetPullToRefresh()\n if (this.fetchHandler) {\n this.pulltorefreshHandle = pulltorefresh({\n container: await this.wrap,\n scrollable: this.grist.pullToRefreshTarget,\n refresh: () => {\n return this.fetch(true)\n }\n })\n }\n }\n\n setHeadroom() {\n this.headroom?.destroy()\n\n if (this.grist && this.head) {\n var originPaddingTop = parseFloat(getComputedStyle(this.grist, null).getPropertyValue('padding-top'))\n this.grist.style.paddingTop = this.head.clientHeight + originPaddingTop + 'px'\n\n this.headroom = new Headroom(this.head, {\n scroller: this.grist\n })\n this.headroom.init()\n }\n }\n\n render() {\n var oops = !this._showSpinner && this._data.records.length == 0\n\n return html`\n ${oops\n ? html`\n <ox-empty-note\n icon=\"list\"\n title=\"EMPTY LIST\"\n description=\"There are no records to be shown\"\n ></ox-empty-note>\n `\n : html``}\n <div id=\"wrap\">\n ${this.mode == 'GRID'\n ? html` <ox-grid id=\"grist\" .config=${this._config} .data=${this._data}> </ox-grid> `\n : this.mode == 'CARD'\n ? html` <ox-card id=\"grist\" .config=${this._config} .data=${this._data}> </ox-card> `\n : html` <ox-list id=\"grist\" .config=${this._config} .data=${this._data}> </ox-list> `}\n </div>\n\n <div id=\"spinner\" ?show=${this._showSpinner}></div>\n\n <slot name=\"headroom\"> </slot>\n `\n }\n\n async fetch(reset = true) {\n if (!this._config) {\n /* avoid to be here */\n console.warn('grist is not configured yet.')\n return\n }\n\n if (reset && this.grist) {\n /*\n * scroll 의 현재위치에 의해서 scroll 이벤트가 발생할 수 있으므로, 이를 방지하기 위해서 스크롤의 위치를 TOP으로 옮긴다.\n * (scroll 이 첫페이지 크기 이상으로 내려가 있는 경우, 첫페이지부터 다시 표시하는 경우에, scroll 이벤트가 발생한다.)\n */\n this.grist.scrollTop = 0\n }\n\n if (this.dataProvider) {\n let { limit: initLimit, page: initPage, infinite } = this._config.pagination || {}\n let { limit = initLimit || ZERO_PAGINATION.limit, page = initPage || ZERO_PAGINATION.page } = this.dataProvider\n let { sorters } = this._config\n\n if (infinite || this.mode !== 'GRID') {\n await this.dataProvider.attach(reset)\n } else {\n await this.dataProvider.fetch({\n limit,\n page,\n sorters\n })\n }\n }\n }\n\n async updated(changes: PropertyValues<this>) {\n var needToSetPullToRefresh = false\n\n if (changes.has('config')) {\n this._config = buildConfig({\n ...this.config\n })\n\n this.dataProvider && (this.dataProvider.sorters = this._config.sorters)\n this.fetch()\n }\n\n if (changes.has('fetchHandler')) {\n this.dataProvider && (this.dataProvider.fetchHandler = this.fetchHandler)\n needToSetPullToRefresh = true\n }\n\n if (changes.has('fetchOptions')) {\n this.dataProvider && (this.dataProvider.fetchOptions = this.fetchOptions)\n }\n\n if (changes.has('data')) {\n this.reset()\n }\n\n if (changes.has('mode')) {\n needToSetPullToRefresh = true\n this.setHeadroom()\n }\n\n if (changes.has('selectedRecords')) {\n var { records } = this.data || []\n var selectedRecords = this.selectedRecords || []\n\n var _records = this._data.records\n\n /* 원본데이타에서 index를 찾아서, 복사본 데이타의 selected를 설정한다. */\n selectedRecords.forEach(selected => {\n var index = records.indexOf(selected)\n var record = _records[index]\n if (record) {\n record['__selected__'] = true\n }\n })\n\n /* update _data property intentionally */\n this.refresh()\n }\n\n if (needToSetPullToRefresh) {\n await this.setPullToRefresh()\n }\n }\n\n get dirtyData(): GristData {\n return (this.grist as any)?.data || {}\n }\n\n get dirtyRecords() {\n var { records = [] } = this.dirtyData\n return records.filter(record => record['__dirty__'])\n }\n\n exportPatchList({ flagName = 'patchFlag', addedFlag = '+', deletedFlag = '-', modifiedFlag = 'M', idField = 'id' }) {\n let dirtyRecords = this.dirtyRecords\n if (!dirtyRecords || dirtyRecords.length == 0) {\n return []\n }\n\n return dirtyRecords.map(record => {\n let flag = record.__dirty__\n\n let patch = {\n [flagName]: flag == 'M' ? modifiedFlag : flag == '+' ? addedFlag : deletedFlag\n }\n\n if (idField in record && record[idField]) {\n patch[idField] = record[idField]\n }\n\n for (let key in record.__dirtyfields__) {\n patch[key] = record[key]\n }\n return patch\n })\n }\n\n exportRecords({ ifSelectedOnly = true, includeHiddenField = true } = {}) {\n let records = ifSelectedOnly ? this.selected : this.data.records\n\n if (ifSelectedOnly && (!records || records.length == 0)) {\n records = this.data.records\n }\n\n let columns = this._config.columns.filter(column => column.type !== 'gutter')\n if (!includeHiddenField) {\n columns = columns.filter(column => !column.hidden)\n }\n let columnNames = columns.map(column => column.name)\n\n return records.map(item => {\n return columnNames.reduce((record, name) => {\n record[name] = item[name]\n return record\n }, {} as any)\n })\n }\n\n get selected() {\n var { records = [] } = this.grist?.data\n return records.filter(record => record['__selected__'])\n }\n\n showSpinner() {\n this._showSpinner = true\n }\n\n hideSpinner() {\n this._showSpinner = false\n }\n\n focus() {\n super.focus()\n\n this.grist.focus()\n }\n\n commit() {\n var { page, total, limit, records } = this.grist.data\n\n this.data = {\n page,\n total,\n limit,\n records: records.map(record => {\n var copied = {\n ...record\n }\n\n delete copied.__seq__\n delete copied.__dirty__\n delete copied.__selected__\n delete copied.__changes__\n delete copied.__dirtyfields__\n delete copied.__origin__\n\n return copied\n })\n }\n }\n\n /**\n * Forced internal data to be reflected on the screen\n * Data changing through a normal method is automatically reflected on the screen, so it is a method that does not need to be used in general.\nTherefore, it will be deprecated.\n * @deprecated\n * @method\n */\n refresh() {\n this._data = { ...this._data }\n }\n\n /**\n * This method cancels all changes in the dirty state before being reflected in the data.\n *\n * @method\n */\n reset() {\n var {\n limit = ZERO_PAGINATION.limit,\n page = ZERO_PAGINATION.page,\n total = ZERO_PAGINATION.total,\n records = []\n } = this.data\n\n /* 원본 데이타를 남기고, 복사본(_data)을 사용한다. */\n records = records.map((record, idx) => {\n return {\n ...record,\n __seq__: this.mode == 'GRID' ? (page - 1) * limit + idx + 1 : idx + 1,\n __origin__: record\n }\n })\n\n this._data = {\n limit,\n page,\n total,\n records\n }\n }\n\n checkDirties() {\n const records = this.dirtyRecords\n const { columns = [] } = this._config || {}\n\n for (var record of records || []) {\n var origin = record['__origin__'] || {}\n\n var dirtyFields = (record['__dirtyfields__'] = columns\n .filter(column => column.type !== 'gutter' && !isEqual(origin[column.name], record[column.name]))\n .reduce((sum, column) => {\n var name = column.name\n\n sum[name] = {\n before: origin[name],\n after: record[name]\n }\n\n return sum\n }, {} as any))\n\n if (record['__dirty__'] == 'M' && isEmpty(dirtyFields)) {\n delete record['__dirty__']\n }\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"data-grist.js","sourceRoot":"","sources":["../../src/data-grist.ts"],"names":[],"mappings":"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","sourcesContent":["import './data-grid/data-grid'\nimport './data-list/data-list'\nimport './data-card/data-card'\nimport './empty-note'\n\nimport { DataConsumer, FetchHandler } from './data-consumer'\nimport { GristConfig, GristData, GristRecord } from './types'\nimport { HeadroomStyles, ScrollbarStyles, SpinnerStyles } from '@operato/styles'\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_PAGINATION } from './configure/zero-config'\nimport { customElement, property, query, queryAsync, state } from 'lit/decorators.js'\n\nimport { DataCard } from './data-card/data-card'\nimport { DataGrid } from './data-grid/data-grid'\nimport { DataList } from './data-list/data-list'\nimport { DataProvider } from './data-provider'\nimport Headroom from '@operato/headroom'\nimport { buildConfig } from './configure/config-builder'\nimport isEmpty from 'lodash-es/isEmpty'\nimport isEqual from 'lodash-es/isEqual'\nimport { pulltorefresh } from '@operato/pull-to-refresh'\n\n@customElement('ox-grist')\nexport class DataGrist extends LitElement implements DataConsumer {\n static styles = [\n ScrollbarStyles,\n HeadroomStyles,\n SpinnerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n background-color: var(--grist-background-color);\n min-height: 120px;\n\n overflow: hidden;\n\n /* for pulltorefresh controller */\n position: relative;\n\n --mdc-icon-size: var(--grid-record-wide-fontsize);\n }\n\n #wrap {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: auto;\n }\n\n ox-grid,\n ox-list {\n flex: 1;\n }\n\n ox-empty-note {\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n slot[name='headroom'] {\n display: block;\n\n position: absolute;\n top: 0;\n left: 0;\n\n width: 100%;\n box-sizing: border-box;\n }\n `\n ]\n\n @property() mode: string = 'GRID'\n @property() config: any\n @property() data: GristData = ZERO_DATA\n @property() selectedRecords?: GristRecord[]\n @property({ type: Boolean, attribute: 'auto-fetch' }) autoFetch: boolean = false\n @property() fetchHandler?: FetchHandler\n @property() fetchOptions: any\n\n @state() _data: GristData = ZERO_DATA\n @state() _config: GristConfig = ZERO_CONFIG\n @state() private _showSpinner: boolean = false\n\n private dataProvider?: DataProvider\n private _pulltorefreshHandle?: any\n private _headroom?: Headroom\n private _resizeObserver = new ResizeObserver(entries => {\n this._adjustPaddingTop()\n })\n\n @query('slot[name=headroom]') head!: HTMLElement\n @query('#grist') grist!: DataGrid | DataList | DataCard\n @queryAsync('#wrap') private wrap!: Promise<HTMLElement>\n\n async connectedCallback() {\n super.connectedCallback()\n\n this.dataProvider = new DataProvider(this)\n\n await this.updateComplete\n this._resizeObserver.observe(this.head)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this.dataProvider?.dispose()\n this._resetPullToRefresh()\n this._resizeObserver.unobserve(this.head)\n }\n\n private _resetPullToRefresh() {\n if (this._pulltorefreshHandle) {\n this._pulltorefreshHandle()\n delete this._pulltorefreshHandle\n }\n }\n\n private async _setPullToRefresh() {\n this._resetPullToRefresh()\n if (this.fetchHandler) {\n this._pulltorefreshHandle = pulltorefresh({\n container: await this.wrap,\n scrollable: this.grist.pullToRefreshTarget,\n refresh: () => {\n return this.fetch(true)\n }\n })\n }\n }\n\n private _adjustPaddingTop() {\n this.grist.style.paddingTop = this.head.clientHeight + 'px'\n }\n\n private _setHeadroom() {\n this._headroom?.destroy()\n\n if (this.grist && this.head) {\n this._adjustPaddingTop()\n\n this._headroom = new Headroom(this.head, {\n scroller: this.grist\n })\n this._headroom.init()\n }\n }\n\n render() {\n var oops = !this._showSpinner && this._data.records.length == 0\n\n return html`\n ${oops\n ? html`\n <ox-empty-note\n icon=\"list\"\n title=\"EMPTY LIST\"\n description=\"There are no records to be shown\"\n ></ox-empty-note>\n `\n : html``}\n <div id=\"wrap\">\n ${this.mode == 'GRID'\n ? html` <ox-grid id=\"grist\" .config=${this._config} .data=${this._data}> </ox-grid> `\n : this.mode == 'CARD'\n ? html` <ox-card id=\"grist\" .config=${this._config} .data=${this._data}> </ox-card> `\n : html` <ox-list id=\"grist\" .config=${this._config} .data=${this._data}> </ox-list> `}\n </div>\n\n <div id=\"spinner\" ?show=${this._showSpinner}></div>\n\n <slot name=\"headroom\"> </slot>\n `\n }\n\n async fetch(reset = true) {\n if (!this._config) {\n /* avoid to be here */\n console.warn('grist is not configured yet.')\n return\n }\n\n if (reset && this.grist) {\n /*\n * scroll 의 현재위치에 의해서 scroll 이벤트가 발생할 수 있으므로, 이를 방지하기 위해서 스크롤의 위치를 TOP으로 옮긴다.\n * (scroll 이 첫페이지 크기 이상으로 내려가 있는 경우, 첫페이지부터 다시 표시하는 경우에, scroll 이벤트가 발생한다.)\n */\n this.grist.scrollTop = 0\n }\n\n if (this.dataProvider) {\n let { limit: initLimit, page: initPage, infinite } = this._config.pagination || {}\n let { limit = initLimit || ZERO_PAGINATION.limit, page = initPage || ZERO_PAGINATION.page } = this.dataProvider\n let { sorters } = this._config\n\n if (infinite || this.mode !== 'GRID') {\n await this.dataProvider.attach(reset)\n } else {\n await this.dataProvider.fetch({\n limit,\n page,\n sorters\n })\n }\n }\n }\n\n async updated(changes: PropertyValues<this>) {\n var needToSetPullToRefresh = false\n\n if (changes.has('config')) {\n this._config = buildConfig({\n ...this.config\n })\n\n this.dataProvider && (this.dataProvider.sorters = this._config.sorters)\n this.fetch()\n }\n\n if (changes.has('fetchHandler')) {\n this.dataProvider && (this.dataProvider.fetchHandler = this.fetchHandler)\n needToSetPullToRefresh = true\n }\n\n if (changes.has('fetchOptions')) {\n this.dataProvider && (this.dataProvider.fetchOptions = this.fetchOptions)\n }\n\n if (changes.has('data')) {\n this.reset()\n }\n\n if (changes.has('mode')) {\n needToSetPullToRefresh = true\n this._setHeadroom()\n }\n\n if (changes.has('selectedRecords')) {\n var { records } = this.data || []\n var selectedRecords = this.selectedRecords || []\n\n var _records = this._data.records\n\n /* 원본데이타에서 index를 찾아서, 복사본 데이타의 selected를 설정한다. */\n selectedRecords.forEach(selected => {\n var index = records.indexOf(selected)\n var record = _records[index]\n if (record) {\n record['__selected__'] = true\n }\n })\n\n /* update _data property intentionally */\n this.refresh()\n }\n\n if (needToSetPullToRefresh) {\n await this._setPullToRefresh()\n }\n }\n\n get dirtyData(): GristData {\n return (this.grist as any)?.data || {}\n }\n\n get dirtyRecords() {\n var { records = [] } = this.dirtyData\n return records.filter(record => record['__dirty__'])\n }\n\n exportPatchList({ flagName = 'patchFlag', addedFlag = '+', deletedFlag = '-', modifiedFlag = 'M', idField = 'id' }) {\n let dirtyRecords = this.dirtyRecords\n if (!dirtyRecords || dirtyRecords.length == 0) {\n return []\n }\n\n return dirtyRecords.map(record => {\n let flag = record.__dirty__\n\n let patch = {\n [flagName]: flag == 'M' ? modifiedFlag : flag == '+' ? addedFlag : deletedFlag\n }\n\n if (idField in record && record[idField]) {\n patch[idField] = record[idField]\n }\n\n for (let key in record.__dirtyfields__) {\n patch[key] = record[key]\n }\n return patch\n })\n }\n\n exportRecords({ ifSelectedOnly = true, includeHiddenField = true } = {}) {\n let records = ifSelectedOnly ? this.selected : this.data.records\n\n if (ifSelectedOnly && (!records || records.length == 0)) {\n records = this.data.records\n }\n\n let columns = this._config.columns.filter(column => column.type !== 'gutter')\n if (!includeHiddenField) {\n columns = columns.filter(column => !column.hidden)\n }\n let columnNames = columns.map(column => column.name)\n\n return records.map(item => {\n return columnNames.reduce((record, name) => {\n record[name] = item[name]\n return record\n }, {} as any)\n })\n }\n\n get selected() {\n var { records = [] } = this.grist?.data\n return records.filter(record => record['__selected__'])\n }\n\n showSpinner() {\n this._showSpinner = true\n }\n\n hideSpinner() {\n this._showSpinner = false\n }\n\n focus() {\n super.focus()\n\n this.grist.focus()\n }\n\n commit() {\n var { page, total, limit, records } = this.grist.data\n\n this.data = {\n page,\n total,\n limit,\n records: records.map(record => {\n var copied = {\n ...record\n }\n\n delete copied.__seq__\n delete copied.__dirty__\n delete copied.__selected__\n delete copied.__changes__\n delete copied.__dirtyfields__\n delete copied.__origin__\n\n return copied\n })\n }\n }\n\n /**\n * Forced internal data to be reflected on the screen\n * Data changing through a normal method is automatically reflected on the screen, so it is a method that does not need to be used in general.\n * Therefore, it will be deprecated.\n * @deprecated\n * @method\n */\n refresh() {\n this._data = { ...this._data }\n }\n\n /**\n * This method cancels all changes in the dirty state before being reflected in the data.\n *\n * @method\n */\n reset() {\n var {\n limit = ZERO_PAGINATION.limit,\n page = ZERO_PAGINATION.page,\n total = ZERO_PAGINATION.total,\n records = []\n } = this.data\n\n /* 원본 데이타를 남기고, 복사본(_data)을 사용한다. */\n records = records.map((record, idx) => {\n return {\n ...record,\n __seq__: this.mode == 'GRID' ? (page - 1) * limit + idx + 1 : idx + 1,\n __origin__: record\n }\n })\n\n this._data = {\n limit,\n page,\n total,\n records\n }\n }\n\n checkDirties() {\n const records = this.dirtyRecords\n const { columns = [] } = this._config || {}\n\n for (var record of records || []) {\n var origin = record['__origin__'] || {}\n\n var dirtyFields = (record['__dirtyfields__'] = columns\n .filter(column => column.type !== 'gutter' && !isEqual(origin[column.name], record[column.name]))\n .reduce((sum, column) => {\n var name = column.name\n\n sum[name] = {\n before: origin[name],\n after: record[name]\n }\n\n return sum\n }, {} as any))\n\n if (record['__dirty__'] == 'M' && isEmpty(dirtyFields)) {\n delete record['__dirty__']\n }\n }\n }\n}\n"]}
|