@operato/data-grist 7.0.25 → 7.0.27
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 +19 -0
- package/dist/src/data-card/data-card.js +13 -15
- package/dist/src/data-card/data-card.js.map +1 -1
- package/dist/src/data-card/record-card.d.ts +1 -0
- package/dist/src/data-card/record-card.js +33 -2
- package/dist/src/data-card/record-card.js.map +1 -1
- package/dist/src/data-grid/data-grid-body.js +3 -3
- package/dist/src/data-grid/data-grid-body.js.map +1 -1
- package/dist/src/data-grid/data-grid-header.js +1 -1
- package/dist/src/data-grid/data-grid-header.js.map +1 -1
- package/dist/src/data-grid/data-grid.js +1 -1
- package/dist/src/data-grid/data-grid.js.map +1 -1
- package/dist/src/data-grist.js +1 -1
- package/dist/src/data-grist.js.map +1 -1
- package/dist/src/data-list/data-list-field.js +2 -2
- package/dist/src/data-list/data-list-field.js.map +1 -1
- package/dist/src/data-list/data-list.js +13 -2
- package/dist/src/data-list/data-list.js.map +1 -1
- package/dist/src/data-list/record-partial.d.ts +1 -0
- package/dist/src/data-list/record-partial.js +21 -0
- package/dist/src/data-list/record-partial.js.map +1 -1
- package/dist/src/record-view/record-view-body.js +4 -0
- package/dist/src/record-view/record-view-body.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/data-card/data-card.ts +13 -16
- package/src/data-card/record-card.ts +32 -2
- package/src/data-grid/data-grid-body.ts +3 -3
- package/src/data-grid/data-grid-header.ts +1 -1
- package/src/data-grid/data-grid.ts +1 -1
- package/src/data-grist.ts +1 -1
- package/src/data-list/data-list-field.ts +2 -2
- package/src/data-list/data-list.ts +14 -3
- package/src/data-list/record-partial.ts +20 -0
- package/src/record-view/record-view-body.ts +4 -0
|
@@ -43,21 +43,26 @@ let DataList = class DataList extends DataManipulator {
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
|
+
var { classifier } = this.config.rows;
|
|
46
47
|
var records = this._records || [];
|
|
47
48
|
if (this.config && this.config.rows.appendable) {
|
|
48
49
|
records = [...records, { __dirty__: '+' }];
|
|
49
50
|
}
|
|
50
51
|
return html `
|
|
51
|
-
${records.map((record, rowIndex) =>
|
|
52
|
+
${records.map((record, rowIndex) => {
|
|
53
|
+
var { emphasized } = classifier.call(null, record, rowIndex) || {};
|
|
54
|
+
return html `
|
|
52
55
|
<ox-record-partial
|
|
53
56
|
.config=${this.config}
|
|
54
57
|
.data=${this.data}
|
|
55
58
|
.record=${record}
|
|
56
59
|
.rowIndex=${rowIndex}
|
|
60
|
+
.emphasized=${emphasized}
|
|
57
61
|
?selected-row=${record['__selected__']}
|
|
58
62
|
?dirty=${record['__dirty__']}
|
|
59
63
|
></ox-record-partial>
|
|
60
|
-
|
|
64
|
+
`;
|
|
65
|
+
})}
|
|
61
66
|
${this.empty ? html ` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html ``}
|
|
62
67
|
${this.isTop
|
|
63
68
|
? html ``
|
|
@@ -110,6 +115,12 @@ DataList.styles = [
|
|
|
110
115
|
top: 50%;
|
|
111
116
|
transform: translate(-50%, -50%);
|
|
112
117
|
}
|
|
118
|
+
|
|
119
|
+
ox-record-partial[emphasized-row],
|
|
120
|
+
ox-record-partial[emphasized-row][focused] {
|
|
121
|
+
background-color: var(--grid-record-emphasized-background-color);
|
|
122
|
+
color: var(--grid-record-emphasized-color);
|
|
123
|
+
}
|
|
113
124
|
`
|
|
114
125
|
];
|
|
115
126
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-list.js","sourceRoot":"","sources":["../../../src/data-list/data-list.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAI9C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,eAAe;IAAtC;;
|
|
1
|
+
{"version":3,"file":"data-list.js","sourceRoot":"","sources":["../../../src/data-list/data-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './record-partial'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-list')\nexport class DataList extends DataManipulator {\n static styles = [\n css`\n :host {\n background-color: var(--data-list-background-color);\n overflow-y: auto;\n }\n\n ox-record-partial:nth-child(even) {\n background-color: var(--grid-record-odd-background-color);\n }\n\n [selected-row] {\n background-color: var(--data-list-selected-background-color);\n }\n\n #upward {\n --md-icon-size: var(--icon-size-large);\n position: absolute;\n top: var(--data-list-fab-position-vertical);\n right: var(--data-list-fab-position-horizontal);\n background-color: rgba(255, 255, 255, 0.7);\n border-radius: var(--md-sys-shape-corner-large);\n color: var(--data-list-fab-color);\n box-shadow: var(--data-list-fab-shadow);\n padding: var(--spacing-small);\n }\n\n slot {\n width: 100%;\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 ox-record-partial[emphasized-row],\n ox-record-partial[emphasized-row][focused] {\n background-color: var(--grid-record-emphasized-background-color);\n color: var(--grid-record-emphasized-color);\n }\n `\n ]\n\n @property({ type: Boolean }) empty?: boolean\n\n @state() private _records: GristRecord[] = []\n @state() private isTop: boolean = false\n\n private _total: number = 0\n private _limit: number = 20\n private _page: number = 1\n\n firstUpdated(changes: PropertyValues<this>) {\n this.isTop = true\n\n /* infinite scrolling */\n this.addEventListener('scroll', e => {\n const totalScrollHeight = this.scrollHeight\n const screenHeight = this.offsetHeight\n const currentScrollTop = this.scrollTop\n\n if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n var lastPage = Math.ceil(this._total / this._limit)\n\n if (this._page < lastPage) {\n this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n }\n }\n\n this.isTop = this.scrollTop == 0\n })\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('config')) {\n this._records = []\n this._page = 1\n }\n\n if (changes.has('data')) {\n this._records = this.data.records\n this._total = this.data.total || 0\n this._limit = this.data.limit || 20\n this._page = this.data.page || 0\n }\n }\n\n render() {\n var { classifier } = this.config.rows\n\n var records = this._records || []\n\n if (this.config && this.config.rows.appendable) {\n records = [...records, { __dirty__: '+' }]\n }\n\n return html`\n ${records.map((record, rowIndex) => {\n var { emphasized } = classifier.call(null, record, rowIndex) || {}\n\n return html`\n <ox-record-partial\n .config=${this.config}\n .data=${this.data}\n .record=${record}\n .rowIndex=${rowIndex}\n .emphasized=${emphasized}\n ?selected-row=${record['__selected__']}\n ?dirty=${record['__dirty__']}\n ></ox-record-partial>\n `\n })}\n ${this.empty ? html` <ox-empty-note title=\"NO RECORDS\"></ox-empty-note> ` : html``}\n ${this.isTop\n ? html``\n : html` <md-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}\n `\n }\n\n gotoTop(e: Event) {\n this.scrollTop = 0\n\n e.stopPropagation()\n }\n\n get pullToRefreshTarget() {\n return this\n }\n}\n"]}
|
|
@@ -11,6 +11,7 @@ export declare class RecordPartial extends LitElement {
|
|
|
11
11
|
record: GristRecord;
|
|
12
12
|
rowIndex: number;
|
|
13
13
|
selectedRow: boolean;
|
|
14
|
+
emphasized: any;
|
|
14
15
|
private _recordView;
|
|
15
16
|
attributeChangedCallback(name: string, oldval: any, newval: any): void;
|
|
16
17
|
firstUpdated(): void;
|
|
@@ -34,6 +34,7 @@ let RecordPartial = class RecordPartial extends LitElement {
|
|
|
34
34
|
* (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)
|
|
35
35
|
*/
|
|
36
36
|
this.selectedRow = false;
|
|
37
|
+
this.emphasized = false;
|
|
37
38
|
}
|
|
38
39
|
attributeChangedCallback(name, oldval, newval) {
|
|
39
40
|
super.attributeChangedCallback(name, oldval, newval);
|
|
@@ -53,6 +54,18 @@ let RecordPartial = class RecordPartial extends LitElement {
|
|
|
53
54
|
if (changes.has('record') && this._recordView) {
|
|
54
55
|
this._recordView.record = this.record;
|
|
55
56
|
}
|
|
57
|
+
const emphasized = this.emphasized;
|
|
58
|
+
if (!!emphasized) {
|
|
59
|
+
this.setAttribute('emphasized-row', '');
|
|
60
|
+
if (Symbol.iterator in Object(emphasized)) {
|
|
61
|
+
const [backgroundColor, foregroundColor] = emphasized;
|
|
62
|
+
backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor);
|
|
63
|
+
foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
else {
|
|
67
|
+
this.removeAttribute('emphasized-row');
|
|
68
|
+
}
|
|
56
69
|
}
|
|
57
70
|
render() {
|
|
58
71
|
var record = this.record;
|
|
@@ -152,6 +165,11 @@ RecordPartial.styles = [
|
|
|
152
165
|
border-right: var(--grid-record-dirty-border-left);
|
|
153
166
|
}
|
|
154
167
|
|
|
168
|
+
:host[emphasized-row] {
|
|
169
|
+
background-color: var(--grid-record-emphasized-background-color);
|
|
170
|
+
color: var(--grid-record-emphasized-color);
|
|
171
|
+
}
|
|
172
|
+
|
|
155
173
|
:host [dirty] {
|
|
156
174
|
position: absolute;
|
|
157
175
|
margin: var(--spacing-none);
|
|
@@ -215,6 +233,9 @@ __decorate([
|
|
|
215
233
|
__decorate([
|
|
216
234
|
property({ type: Boolean, attribute: 'selected-row' })
|
|
217
235
|
], RecordPartial.prototype, "selectedRow", void 0);
|
|
236
|
+
__decorate([
|
|
237
|
+
property({ attribute: false })
|
|
238
|
+
], RecordPartial.prototype, "emphasized", void 0);
|
|
218
239
|
RecordPartial = __decorate([
|
|
219
240
|
customElement('ox-record-partial')
|
|
220
241
|
], RecordPartial);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"record-partial.js","sourceRoot":"","sources":["../../../src/data-list/record-partial.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './data-list-gutter'\nimport './data-list-field'\nimport '../record-view'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'\nimport { RecordViewHandler } from '../record-view/record-view-handler'\nimport { GristConfig, GristData, GristRecord } from '../types'\nimport { recordPartialClickHandler } from './event-handlers/record-partial-click-handler'\nimport { recordPartialDblClickHandler } from './event-handlers/record-partial-dblclick-handler'\n\n// import { recordPartialLongPressHandler } from './event-handlers/record-partial-long-press-handler'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric',\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n hour12: false\n // timeZone: 'America/Los_Angeles'\n}\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, OPTIONS)\n\n@customElement('ox-record-partial')\nexport class RecordPartial extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: row;\n align-items: center;\n border-bottom: var(--data-list-item-border-bottom);\n position: relative;\n min-height: 42px;\n padding-left: var(--spacing-medium);\n }\n\n :host([dirty])::before {\n content: '';\n position: absolute;\n left: var(--spacing-none);\n top: var(--spacing-none);\n\n width: var(--spacing-none);\n height: var(--spacing-none);\n border-top: var(--grid-record-dirty-border-top);\n border-right: var(--grid-record-dirty-border-left);\n }\n\n :host [dirty] {\n position: absolute;\n margin: var(--spacing-none);\n height: 20px;\n font: var(--grid-record-dirty-icon-font);\n text-indent: 1px;\n left: var(--spacing-none);\n top: var(--spacing-none);\n color: var(--grid-record-dirty-color, var(--md-sys-color-error));\n }\n\n [content] {\n flex: auto;\n display: block;\n zoom: 1;\n }\n\n div[tail] {\n margin: var(--spacing-none);\n width: 100px;\n aspect-ratio: 1 / 1;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n div[tail] > ox-list-field {\n flex: 1;\n }\n\n ox-list-field {\n font: var(--data-list-item-etc-font);\n color: var(--data-list-item-etc-color, var(--md-sys-color-on-surface));\n }\n\n ox-list-field[name] {\n font: var(--data-list-item-name-font);\n color: var(--data-list-item-name-color, var(--md-sys-color-secondary));\n }\n\n ox-list-field[desc] {\n font: var(--data-list-item-disc-font);\n color: var(--data-list-item-disc-color, var(--md-sys-color-on-tertiary-container));\n }\n `\n ]\n\n @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n @property({ type: Object }) data: GristData = ZERO_DATA\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Number }) rowIndex: number = -1\n /*\n * row-selector를 사용자가 변경할 때, record-partial의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n */\n @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n\n private _recordView: any\n\n attributeChangedCallback(name: string, oldval: any, newval: any) {\n super.attributeChangedCallback(name, oldval, newval)\n }\n\n firstUpdated() {\n /*\n long-press\n TODO. performance를 확인한 후에 활성화하자.\n */\n // longpressable(this.renderRoot.querySelector('[content]'))\n\n // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n this.renderRoot.addEventListener('click', recordPartialClickHandler.bind(this) as EventListener)\n this.renderRoot.addEventListener('dblclick', recordPartialDblClickHandler.bind(this) as EventListener)\n\n this.addEventListener('show-record-view', () => this.popupRecordView())\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('record') && this._recordView) {\n this._recordView.record = this.record\n }\n }\n\n render() {\n var record = this.record\n var rowIndex = this.rowIndex\n var { columns, list } = this.config\n var { thumbnail, fields, details } = list || {}\n\n var displayColumns =\n [...fields, ...details].map(field => columns.find(column => column.name == field)).filter(column => column) || []\n var gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n\n const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n\n if (this.hasAttribute('dirty')) {\n var dirtyIcon\n\n switch (this.record['__dirty__']) {\n case 'M':\n dirtyIcon = 'done'\n break\n case '+':\n dirtyIcon = 'add'\n break\n case '-':\n dirtyIcon = 'remove'\n break\n }\n }\n\n return html`\n ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}\n ${gutters.map(\n gutter => html`\n <ox-list-gutter\n class=${gutter.name === 'detail' ? 'expand' : ''}\n .rowIndex=${rowIndex}\n .column=${gutter}\n .record=${record}\n .value=${record[gutter.name]}\n ></ox-list-gutter>\n `\n )}\n\n <div content>\n ${displayColumns.map(\n (column, idx) => html`\n <ox-list-field\n .rowIndex=${rowIndex}\n .column=${column}\n .record=${record}\n .value=${record[column?.name || '']}\n ?name=${idx == 0}\n ?desc=${idx == 1}\n ></ox-list-field>\n `\n )}\n </div>\n ${thumbnail\n ? html`<div tail>\n <ox-list-field\n thumbnail\n .rowIndex=${rowIndex}\n .column=${thumbnailColumn}\n .record=${record}\n .value=${record[thumbnailColumn?.name || '']}\n ></ox-list-field>\n </div>`\n : html``}\n `\n }\n\n popupRecordView() {\n var titleField = this.config.list.fields[0] || 'name'\n var title = this.record[titleField]\n\n /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n if (typeof title == 'object') {\n var column = this.config.columns.find(column => column.name == titleField)\n title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n }\n\n this._recordView = RecordViewHandler(\n this.config.columns,\n this.record,\n this.rowIndex,\n this,\n {\n title\n },\n () => {\n delete this._recordView\n }\n )\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"record-partial.js","sourceRoot":"","sources":["../../../src/data-list/record-partial.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './data-list-gutter'\nimport './data-list-field'\nimport '../record-view'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'\nimport { RecordViewHandler } from '../record-view/record-view-handler'\nimport { GristConfig, GristData, GristRecord } from '../types'\nimport { recordPartialClickHandler } from './event-handlers/record-partial-click-handler'\nimport { recordPartialDblClickHandler } from './event-handlers/record-partial-dblclick-handler'\n\n// import { recordPartialLongPressHandler } from './event-handlers/record-partial-long-press-handler'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric',\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n hour12: false\n // timeZone: 'America/Los_Angeles'\n}\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, OPTIONS)\n\n@customElement('ox-record-partial')\nexport class RecordPartial extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: row;\n align-items: center;\n border-bottom: var(--data-list-item-border-bottom);\n position: relative;\n min-height: 42px;\n padding-left: var(--spacing-medium);\n }\n\n :host([dirty])::before {\n content: '';\n position: absolute;\n left: var(--spacing-none);\n top: var(--spacing-none);\n\n width: var(--spacing-none);\n height: var(--spacing-none);\n border-top: var(--grid-record-dirty-border-top);\n border-right: var(--grid-record-dirty-border-left);\n }\n\n :host[emphasized-row] {\n background-color: var(--grid-record-emphasized-background-color);\n color: var(--grid-record-emphasized-color);\n }\n\n :host [dirty] {\n position: absolute;\n margin: var(--spacing-none);\n height: 20px;\n font: var(--grid-record-dirty-icon-font);\n text-indent: 1px;\n left: var(--spacing-none);\n top: var(--spacing-none);\n color: var(--grid-record-dirty-color, var(--md-sys-color-error));\n }\n\n [content] {\n flex: auto;\n display: block;\n zoom: 1;\n }\n\n div[tail] {\n margin: var(--spacing-none);\n width: 100px;\n aspect-ratio: 1 / 1;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n div[tail] > ox-list-field {\n flex: 1;\n }\n\n ox-list-field {\n font: var(--data-list-item-etc-font);\n color: var(--data-list-item-etc-color, var(--md-sys-color-on-surface));\n }\n\n ox-list-field[name] {\n font: var(--data-list-item-name-font);\n color: var(--data-list-item-name-color, var(--md-sys-color-secondary));\n }\n\n ox-list-field[desc] {\n font: var(--data-list-item-disc-font);\n color: var(--data-list-item-disc-color, var(--md-sys-color-on-tertiary-container));\n }\n `\n ]\n\n @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n @property({ type: Object }) data: GristData = ZERO_DATA\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Number }) rowIndex: number = -1\n /*\n * row-selector를 사용자가 변경할 때, record-partial의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n */\n @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n @property({ attribute: false }) emphasized: any = false\n\n private _recordView: any\n\n attributeChangedCallback(name: string, oldval: any, newval: any) {\n super.attributeChangedCallback(name, oldval, newval)\n }\n\n firstUpdated() {\n /*\n long-press\n TODO. performance를 확인한 후에 활성화하자.\n */\n // longpressable(this.renderRoot.querySelector('[content]'))\n\n // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n this.renderRoot.addEventListener('click', recordPartialClickHandler.bind(this) as EventListener)\n this.renderRoot.addEventListener('dblclick', recordPartialDblClickHandler.bind(this) as EventListener)\n\n this.addEventListener('show-record-view', () => this.popupRecordView())\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('record') && this._recordView) {\n this._recordView.record = this.record\n }\n\n const emphasized = this.emphasized\n\n if (!!emphasized) {\n this.setAttribute('emphasized-row', '')\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 render() {\n var record = this.record\n var rowIndex = this.rowIndex\n var { columns, list } = this.config\n var { thumbnail, fields, details } = list || {}\n\n var displayColumns =\n [...fields, ...details].map(field => columns.find(column => column.name == field)).filter(column => column) || []\n var gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n\n const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n\n if (this.hasAttribute('dirty')) {\n var dirtyIcon\n\n switch (this.record['__dirty__']) {\n case 'M':\n dirtyIcon = 'done'\n break\n case '+':\n dirtyIcon = 'add'\n break\n case '-':\n dirtyIcon = 'remove'\n break\n }\n }\n\n return html`\n ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}\n ${gutters.map(\n gutter => html`\n <ox-list-gutter\n class=${gutter.name === 'detail' ? 'expand' : ''}\n .rowIndex=${rowIndex}\n .column=${gutter}\n .record=${record}\n .value=${record[gutter.name]}\n ></ox-list-gutter>\n `\n )}\n\n <div content>\n ${displayColumns.map(\n (column, idx) => html`\n <ox-list-field\n .rowIndex=${rowIndex}\n .column=${column}\n .record=${record}\n .value=${record[column?.name || '']}\n ?name=${idx == 0}\n ?desc=${idx == 1}\n ></ox-list-field>\n `\n )}\n </div>\n ${thumbnail\n ? html`<div tail>\n <ox-list-field\n thumbnail\n .rowIndex=${rowIndex}\n .column=${thumbnailColumn}\n .record=${record}\n .value=${record[thumbnailColumn?.name || '']}\n ></ox-list-field>\n </div>`\n : html``}\n `\n }\n\n popupRecordView() {\n var titleField = this.config.list.fields[0] || 'name'\n var title = this.record[titleField]\n\n /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n if (typeof title == 'object') {\n var column = this.config.columns.find(column => column.name == titleField)\n title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n }\n\n this._recordView = RecordViewHandler(\n this.config.columns,\n this.record,\n this.rowIndex,\n this,\n {\n title\n },\n () => {\n delete this._recordView\n }\n )\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"record-view-body.js","sourceRoot":"","sources":["../../../src/record-view/record-view-body.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,iDAAiD,CAAA;AAGrF,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;
|
|
1
|
+
{"version":3,"file":"record-view-body.js","sourceRoot":"","sources":["../../../src/record-view/record-view-body.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../data-grid/data-grid-field'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\nimport { recordViewBodyClickHandler } from './event-handlers/record-view-body-click-handler'\n\n@customElement('ox-record-view-body')\nexport class RecordViewBody extends LitElement {\n static styles = [\n css`\n :host {\n display: block;\n font-size: 16px; /* for ios safari */\n place-content: center;\n }\n\n div[content] {\n display: grid;\n grid-template-columns: 1fr 2fr;\n grid-auto-rows: min-content;\n grid-gap: var(--record-view-gap, 16px);\n padding: var(--record-view-padding, 16px);\n box-sizing: border-box;\n }\n\n @media screen and (min-width: 601px) {\n ox-grid-field {\n max-width: 300px;\n }\n\n div[content] {\n grid-template-columns: 1fr 1fr;\n }\n }\n\n label {\n display: flex;\n align-items: center;\n position: relative;\n text-transform: capitalize;\n padding: var(--record-view-item-padding);\n font: var(--record-view-label-font);\n color: var(--record-view-label-color);\n text-align: right;\n padding-right: var(--spacing-large);\n }\n\n label md-icon {\n display: none;\n }\n\n label > span {\n margin-left: auto;\n }\n\n label[editable] md-icon {\n display: inline-block;\n font-size: var(--record-view-label-icon-size);\n opacity: 0.5;\n }\n\n ox-grid-field {\n background-color: var(--record-view-grid-field-background-color, var(--md-sys-color-surface-container-lowest));\n border: var(--record-view-grid-field-border);\n border-radius: var(--md-sys-shape-corner-small);\n padding: var(--spacing-tiny) var(--spacing-small);\n\n font: var(--record-view-font);\n color: var(--record-view-color);\n }\n\n ox-grid-field[editing='true'] {\n border: var(--record-view-edit-border);\n }\n\n :first-child + ox-grid-field {\n color: var(--record-view-focus-color);\n font-weight: bold;\n }\n `\n ]\n\n @property({ type: Array }) columns: ColumnConfig[] = []\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Number }) rowIndex: number = -1\n\n public currentTarget: any\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n\n this.addEventListener('keydown', this._onKeyDown)\n this.renderRoot.addEventListener('click', recordViewBodyClickHandler.bind(this))\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.removeEventListener('keydown', this._onKeyDown)\n }\n\n _onKeyDown(event: KeyboardEvent) {\n if (event.key === 'Tab') {\n const fields = Array.from(this.renderRoot.querySelectorAll('ox-grid-field[tabstop]'))\n const focused = this.renderRoot.querySelector('ox-grid-field[editing]')\n const focusedIndex = fields.findIndex(field => field === focused)\n\n let nextIndex = focusedIndex + (event.shiftKey ? -1 : 1)\n\n if (nextIndex >= fields.length || nextIndex < 0) {\n return // Let the default behavior happen if it's the last or first element\n }\n\n event.preventDefault()\n fields[nextIndex]?.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }))\n }\n }\n\n render() {\n var columns = this.columns.filter(column => !column.hidden && column.type !== 'gutter')\n var record = this.record\n var rowIndex = this.rowIndex\n\n return html`\n <div content>\n ${columns.map((column, index) => {\n let { editable, mandatory } = column.record\n if (typeof editable === 'function') {\n editable = editable.call(this, record[column.name], column, record, rowIndex, this)\n }\n\n let dirtyFields = record['__dirtyfields__'] || {}\n\n return html`\n <label ?editable=${editable}\n ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <md-icon>edit</md-icon></label\n >\n <ox-grid-field\n .rowIndex=${rowIndex}\n .column=${column}\n .record=${record}\n .value=${record[column.name]}\n ?dirty=${!!dirtyFields[column.name]}\n ?tabstop=${!!editable}\n ></ox-grid-field>\n `\n })}\n </div>\n `\n }\n\n _renderLabel(column: ColumnConfig) {\n var { renderer } = column.header\n var title = renderer.call(this, column)\n\n return html` ${title} `\n }\n}\n"]}
|