@operato/data-grist 1.11.3 → 1.11.6
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 +18 -0
- package/dist/src/data-grid/data-grid-field-header.d.ts +24 -0
- package/dist/src/data-grid/data-grid-field-header.js +381 -0
- package/dist/src/data-grid/data-grid-field-header.js.map +1 -0
- package/dist/src/data-grid/data-grid-field.js +4 -7
- package/dist/src/data-grid/data-grid-field.js.map +1 -1
- package/dist/src/editors/ox-grist-editor-multiple-select.d.ts +1 -0
- package/dist/src/editors/ox-grist-editor-multiple-select.js +9 -1
- package/dist/src/editors/ox-grist-editor-multiple-select.js.map +1 -1
- package/dist/src/editors/ox-grist-editor.d.ts +1 -1
- package/dist/src/editors/ox-grist-editor.js +2 -2
- package/dist/src/editors/ox-grist-editor.js.map +1 -1
- package/dist/stories/fixed-column.stories.js +1 -1
- package/dist/stories/fixed-column.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/data-grid/data-grid-field.ts +5 -9
- package/src/editors/ox-grist-editor-multiple-select.ts +10 -1
- package/src/editors/ox-grist-editor.ts +2 -2
- package/stories/fixed-column.stories.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
### [1.11.6](https://github.com/hatiolab/operato/compare/v1.11.5...v1.11.6) (2023-12-14)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* hide overflow as a default style for ox-grist-editor ([f25b4c5](https://github.com/hatiolab/operato/commit/f25b4c56b5d3e2a581f2ff4fa4a7339363fedb02))
|
|
12
|
+
* hide overflow as a default style for ox-grist-editor ([1e73a42](https://github.com/hatiolab/operato/commit/1e73a42dab3fd08277362fb0ce1f81cdec5f3b2a))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
### [1.11.5](https://github.com/hatiolab/operato/compare/v1.11.4...v1.11.5) (2023-12-14)
|
|
17
|
+
|
|
18
|
+
**Note:** Version bump only for package @operato/data-grist
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
### [1.11.3](https://github.com/hatiolab/operato/compare/v1.11.2...v1.11.3) (2023-12-14)
|
|
7
25
|
|
|
8
26
|
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import '@operato/popup/ox-popup.js';
|
|
2
|
+
import '@material/mwc-icon';
|
|
3
|
+
import { LitElement, PropertyValues, TemplateResult } from 'lit';
|
|
4
|
+
import { ColumnConfig, FilterValue, SortersConfig } from '../types';
|
|
5
|
+
export declare class DataGridFieldHeader extends LitElement {
|
|
6
|
+
static styles: import("lit").CSSResult[];
|
|
7
|
+
column: ColumnConfig;
|
|
8
|
+
fixed: boolean;
|
|
9
|
+
filteringFeature: boolean;
|
|
10
|
+
sorters: SortersConfig;
|
|
11
|
+
filters: FilterValue[];
|
|
12
|
+
index: number;
|
|
13
|
+
private _lastAccVal?;
|
|
14
|
+
private _throttledNotifier?;
|
|
15
|
+
render(): TemplateResult;
|
|
16
|
+
updated(changes: PropertyValues<this>): void;
|
|
17
|
+
_renderHeader(column: ColumnConfig): TemplateResult<1>;
|
|
18
|
+
_renderSortHeader(column: ColumnConfig): TemplateResult<1>;
|
|
19
|
+
_renderFilterHeader(column: ColumnConfig): TemplateResult<1>;
|
|
20
|
+
_changeSort(column: ColumnConfig): void;
|
|
21
|
+
_accumalate(x: number): number;
|
|
22
|
+
_notifyWidthChange(idx: number, width: number): void;
|
|
23
|
+
_mousedown(e: MouseEvent): void;
|
|
24
|
+
}
|
|
@@ -0,0 +1,381 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import '@operato/popup/ox-popup.js';
|
|
3
|
+
import '@material/mwc-icon';
|
|
4
|
+
import { css, html, LitElement } from 'lit';
|
|
5
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
6
|
+
import throttle from 'lodash-es/throttle';
|
|
7
|
+
import { TooltipStyles } from '@operato/styles';
|
|
8
|
+
import { detectOverflow } from '@operato/utils';
|
|
9
|
+
import { ZERO_COLUMN } from '../configure/zero-config';
|
|
10
|
+
import { FilterStyles } from '../filters/filter-styles';
|
|
11
|
+
import { getFilterRenderer } from '../filters/registry';
|
|
12
|
+
let DataGridFieldHeader = class DataGridFieldHeader extends LitElement {
|
|
13
|
+
constructor() {
|
|
14
|
+
super(...arguments);
|
|
15
|
+
this.column = ZERO_COLUMN;
|
|
16
|
+
this.fixed = false;
|
|
17
|
+
this.filteringFeature = false;
|
|
18
|
+
this.sorters = [];
|
|
19
|
+
this.filters = [];
|
|
20
|
+
}
|
|
21
|
+
render() {
|
|
22
|
+
var _a;
|
|
23
|
+
const column = this.column;
|
|
24
|
+
return html `
|
|
25
|
+
<div ?gutter=${column.type == 'gutter'} ?fixed=${column.fixed} column>
|
|
26
|
+
<span
|
|
27
|
+
for-title
|
|
28
|
+
style="text-align:${column.record.align || 'left'};${((_a = column.header) === null || _a === void 0 ? void 0 : _a.style) || ''}"
|
|
29
|
+
@click=${(e) => this._changeSort(column)}
|
|
30
|
+
@mouseover=${(e) => {
|
|
31
|
+
const element = e.target;
|
|
32
|
+
if (detectOverflow(element)) {
|
|
33
|
+
element.setAttribute('data-tooltip', element.textContent.trim());
|
|
34
|
+
}
|
|
35
|
+
}}
|
|
36
|
+
@mouseout=${(e) => {
|
|
37
|
+
const element = e.target;
|
|
38
|
+
element.removeAttribute('data-tooltip');
|
|
39
|
+
}}
|
|
40
|
+
>${this._renderHeader(column)}
|
|
41
|
+
</span>
|
|
42
|
+
|
|
43
|
+
${column.sortable
|
|
44
|
+
? html `
|
|
45
|
+
<span sorter @click=${(e) => this._changeSort(column)}>
|
|
46
|
+
${this._renderSortHeader(column)}
|
|
47
|
+
</span>
|
|
48
|
+
`
|
|
49
|
+
: undefined}
|
|
50
|
+
${this.filteringFeature && column.filter && column.filter.operator !== 'search'
|
|
51
|
+
? html ` <span filter> ${this._renderFilterHeader(column)} </span> `
|
|
52
|
+
: undefined}
|
|
53
|
+
${column.resizable !== false
|
|
54
|
+
? html ` <span splitter draggable="false" @mousedown=${(e) => this._mousedown(e)}> </span> `
|
|
55
|
+
: undefined}
|
|
56
|
+
</div>
|
|
57
|
+
`;
|
|
58
|
+
}
|
|
59
|
+
updated(changes) {
|
|
60
|
+
if (changes.has('fixed')) {
|
|
61
|
+
if (this.fixed) {
|
|
62
|
+
this.style.left = this.offsetLeft + 'px';
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
_renderHeader(column) {
|
|
67
|
+
var { renderer } = column.header || {};
|
|
68
|
+
var title = renderer.call(this, column);
|
|
69
|
+
return html ` ${title} `;
|
|
70
|
+
}
|
|
71
|
+
_renderSortHeader(column) {
|
|
72
|
+
var sorters = this.sorters || [];
|
|
73
|
+
var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name);
|
|
74
|
+
if (!sorter) {
|
|
75
|
+
return html ``;
|
|
76
|
+
}
|
|
77
|
+
if (sorters.length > 1) {
|
|
78
|
+
var rank = sorters.indexOf(sorter) + 1;
|
|
79
|
+
return sorter.desc
|
|
80
|
+
? html ` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `
|
|
81
|
+
: html ` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `;
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
return sorter.desc
|
|
85
|
+
? html ` <mwc-icon>keyboard_arrow_down</mwc-icon> `
|
|
86
|
+
: html ` <mwc-icon>keyboard_arrow_up</mwc-icon> `;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
_renderFilterHeader(column) {
|
|
90
|
+
var _a;
|
|
91
|
+
const name = column.name;
|
|
92
|
+
const filter = column.filter;
|
|
93
|
+
const type = filter.type;
|
|
94
|
+
const value = (_a = this.filters.find(filter => filter.name === name)) === null || _a === void 0 ? void 0 : _a.value;
|
|
95
|
+
const idx = filter.operator === 'between' ? 1 : 0;
|
|
96
|
+
const renderer = getFilterRenderer(type)[idx];
|
|
97
|
+
return html `
|
|
98
|
+
<mwc-icon
|
|
99
|
+
@click=${(e) => {
|
|
100
|
+
const parent = e.target.closest('[column]');
|
|
101
|
+
const popup = parent.querySelector('ox-popup, ox-popup-list');
|
|
102
|
+
// const popup = (e.target as HTMLElement).nextSibling as OxPopupList | null
|
|
103
|
+
// absolute position인 popup의 위치 부모는 grist 이므로,
|
|
104
|
+
// data-grid-header 의 포지션 부모(grist)의 위치로부터 계산해야함.
|
|
105
|
+
// this의 position을 relative로 하지 못하는 이유 : ox-popup-list가 grid body에 덮히기 때문.
|
|
106
|
+
const top = parent.offsetTop + parent.offsetHeight;
|
|
107
|
+
const right = this.clientWidth - (parent.offsetLeft + parent.offsetWidth - this.scrollLeft);
|
|
108
|
+
popup === null || popup === void 0 ? void 0 : popup.open({
|
|
109
|
+
right,
|
|
110
|
+
top
|
|
111
|
+
});
|
|
112
|
+
}}
|
|
113
|
+
>filter_alt</mwc-icon
|
|
114
|
+
>
|
|
115
|
+
|
|
116
|
+
${!renderer
|
|
117
|
+
? html ``
|
|
118
|
+
: type !== 'select'
|
|
119
|
+
? html ` <ox-popup
|
|
120
|
+
><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>
|
|
121
|
+
${renderer(column, value, this)}</ox-popup
|
|
122
|
+
>`
|
|
123
|
+
: filter.operator === 'in'
|
|
124
|
+
? html `<ox-popup-list
|
|
125
|
+
multiple
|
|
126
|
+
attr-selected="checked"
|
|
127
|
+
.value=${value}
|
|
128
|
+
with-search
|
|
129
|
+
@select=${(e) => {
|
|
130
|
+
var _a;
|
|
131
|
+
return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
|
|
132
|
+
bubbles: true,
|
|
133
|
+
composed: true,
|
|
134
|
+
detail: {
|
|
135
|
+
name,
|
|
136
|
+
operator: filter.operator,
|
|
137
|
+
value: !e.detail
|
|
138
|
+
? undefined
|
|
139
|
+
: e.detail instanceof Array && e.detail.length === 0
|
|
140
|
+
? undefined
|
|
141
|
+
: e.detail
|
|
142
|
+
}
|
|
143
|
+
}));
|
|
144
|
+
}}
|
|
145
|
+
><div filter-title slot="header">
|
|
146
|
+
<mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>
|
|
147
|
+
</div>
|
|
148
|
+
${renderer(column, value, this)}</ox-popup-list
|
|
149
|
+
>`
|
|
150
|
+
: html `<ox-popup-list
|
|
151
|
+
.value=${value}
|
|
152
|
+
with-search
|
|
153
|
+
@select=${(e) => {
|
|
154
|
+
var _a;
|
|
155
|
+
return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
|
|
156
|
+
bubbles: true,
|
|
157
|
+
composed: true,
|
|
158
|
+
detail: {
|
|
159
|
+
name,
|
|
160
|
+
operator: filter.operator,
|
|
161
|
+
value: e.detail ? e.detail : undefined
|
|
162
|
+
}
|
|
163
|
+
}));
|
|
164
|
+
}}
|
|
165
|
+
><div filter-title slot="header">
|
|
166
|
+
<mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>
|
|
167
|
+
</div>
|
|
168
|
+
${renderer(column, value, this)}</ox-popup-list
|
|
169
|
+
>`}
|
|
170
|
+
`;
|
|
171
|
+
}
|
|
172
|
+
_changeSort(column) {
|
|
173
|
+
if (!column.sortable) {
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
176
|
+
var sorters = [...this.sorters];
|
|
177
|
+
var idx = sorters.findIndex(sorter => sorter.name == column.name);
|
|
178
|
+
if (idx !== -1) {
|
|
179
|
+
let sorter = sorters[idx];
|
|
180
|
+
if (sorter.desc) {
|
|
181
|
+
sorters.splice(idx, 1);
|
|
182
|
+
}
|
|
183
|
+
else {
|
|
184
|
+
sorter.desc = true;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
else {
|
|
188
|
+
var sorter = {
|
|
189
|
+
name: column.name
|
|
190
|
+
};
|
|
191
|
+
sorters.push(sorter);
|
|
192
|
+
}
|
|
193
|
+
this.sorters = sorters;
|
|
194
|
+
this.dispatchEvent(new CustomEvent('fetch-params-change', {
|
|
195
|
+
bubbles: true,
|
|
196
|
+
composed: true,
|
|
197
|
+
detail: {
|
|
198
|
+
sorters: this.sorters,
|
|
199
|
+
from: 'data-grid-header'
|
|
200
|
+
}
|
|
201
|
+
}));
|
|
202
|
+
}
|
|
203
|
+
_accumalate(x) {
|
|
204
|
+
var _a;
|
|
205
|
+
this._lastAccVal = ((_a = this._lastAccVal) !== null && _a !== void 0 ? _a : 0) + x;
|
|
206
|
+
return this._lastAccVal;
|
|
207
|
+
}
|
|
208
|
+
_notifyWidthChange(idx, width) {
|
|
209
|
+
if (!this._throttledNotifier) {
|
|
210
|
+
this._throttledNotifier = throttle((idx, width) => {
|
|
211
|
+
this.dispatchEvent(new CustomEvent('column-width-change', {
|
|
212
|
+
bubbles: true,
|
|
213
|
+
composed: true,
|
|
214
|
+
detail: {
|
|
215
|
+
idx,
|
|
216
|
+
width
|
|
217
|
+
}
|
|
218
|
+
}));
|
|
219
|
+
this._lastAccVal = 0;
|
|
220
|
+
}, 100);
|
|
221
|
+
}
|
|
222
|
+
this._throttledNotifier(idx, width);
|
|
223
|
+
}
|
|
224
|
+
_mousedown(e) {
|
|
225
|
+
e.stopPropagation();
|
|
226
|
+
e.preventDefault();
|
|
227
|
+
var mousemoveHandler = ((e) => {
|
|
228
|
+
e.stopPropagation();
|
|
229
|
+
e.preventDefault();
|
|
230
|
+
let column = this.column;
|
|
231
|
+
let width = Math.max(0, Number(column.width) + this._accumalate(e.movementX));
|
|
232
|
+
if (width == 0) {
|
|
233
|
+
/* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */
|
|
234
|
+
return;
|
|
235
|
+
}
|
|
236
|
+
this._notifyWidthChange(this.index, width);
|
|
237
|
+
}).bind(this);
|
|
238
|
+
var mouseupHandler = ((e) => {
|
|
239
|
+
document.removeEventListener('mousemove', mousemoveHandler);
|
|
240
|
+
document.removeEventListener('mouseup', mouseupHandler);
|
|
241
|
+
mousemoveHandler(e);
|
|
242
|
+
}).bind(this);
|
|
243
|
+
document.addEventListener('mousemove', mousemoveHandler);
|
|
244
|
+
document.addEventListener('mouseup', mouseupHandler);
|
|
245
|
+
}
|
|
246
|
+
};
|
|
247
|
+
DataGridFieldHeader.styles = [
|
|
248
|
+
FilterStyles,
|
|
249
|
+
TooltipStyles,
|
|
250
|
+
css `
|
|
251
|
+
:host {
|
|
252
|
+
display: grid;
|
|
253
|
+
grid-template-columns: var(--grid-template-columns);
|
|
254
|
+
|
|
255
|
+
overflow: hidden;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
div[column] {
|
|
259
|
+
display: flex;
|
|
260
|
+
|
|
261
|
+
white-space: nowrap;
|
|
262
|
+
overflow: hidden;
|
|
263
|
+
background-color: var(--grid-header-background-color);
|
|
264
|
+
border-top: var(--grid-header-top-border);
|
|
265
|
+
border-bottom: var(--grid-header-bottom-border);
|
|
266
|
+
padding: var(--grid-header-padding);
|
|
267
|
+
|
|
268
|
+
text-overflow: ellipsis;
|
|
269
|
+
font: var(--grid-header-font);
|
|
270
|
+
color: var(--grid-header-color);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
div[gutter] {
|
|
274
|
+
padding: var(--padding-default) 0 var(--padding-narrow) 0;
|
|
275
|
+
text-align: center;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
span {
|
|
279
|
+
display: block;
|
|
280
|
+
white-space: nowrap;
|
|
281
|
+
overflow: hidden;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
span[for-title] {
|
|
285
|
+
flex: 1;
|
|
286
|
+
text-overflow: ellipsis;
|
|
287
|
+
line-height: 1.6;
|
|
288
|
+
text-transform: capitalize;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
span[for-title] mwc-icon {
|
|
292
|
+
font-size: var(--grid-record-fontsize);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
span[sorter],
|
|
296
|
+
span[filter] {
|
|
297
|
+
padding: 0;
|
|
298
|
+
border: 0;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
span[sorter] mwc-icon {
|
|
302
|
+
font-size: var(--grid-header-sorter-size);
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
span[filter] > mwc-icon {
|
|
306
|
+
font-size: var(--fontsize-default);
|
|
307
|
+
line-height: 20px;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
span[splitter] {
|
|
311
|
+
cursor: col-resize;
|
|
312
|
+
border-right: var(--grid-header-splitter-border);
|
|
313
|
+
margin-right: 0;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
span[splitter]:hover {
|
|
317
|
+
border-right: var(--grid-header-splitter-border-hover);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
input[type='checkbox'],
|
|
321
|
+
input[type='radio'] {
|
|
322
|
+
margin: 3px 0 0 0;
|
|
323
|
+
zoom: var(--grist-input-zoom);
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
[filter-title] {
|
|
327
|
+
color: var(--grid-header-filter-title-color);
|
|
328
|
+
font: var(--grid-header-filter-title-font);
|
|
329
|
+
text-transform: capitalize;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
[filter-title] * {
|
|
333
|
+
vertical-align: middle;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
[filter-title] mwc-icon {
|
|
337
|
+
opacity: 0.7;
|
|
338
|
+
color: var(--grid-header-filter-title-icon-color);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
[filter] input[type='checkbox'] {
|
|
342
|
+
margin-left: 10px;
|
|
343
|
+
margin-bottom: 5px;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
[fixed] {
|
|
347
|
+
position: sticky;
|
|
348
|
+
background-color: inherit; /* 고정된 열의 배경색 (선택사항) */
|
|
349
|
+
z-index: 1;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
@media print {
|
|
353
|
+
:host {
|
|
354
|
+
grid-template-columns: var(--grid-template-print-columns);
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
`
|
|
358
|
+
];
|
|
359
|
+
__decorate([
|
|
360
|
+
property({ type: Object })
|
|
361
|
+
], DataGridFieldHeader.prototype, "column", void 0);
|
|
362
|
+
__decorate([
|
|
363
|
+
property({ type: Boolean })
|
|
364
|
+
], DataGridFieldHeader.prototype, "fixed", void 0);
|
|
365
|
+
__decorate([
|
|
366
|
+
property({ type: Boolean, attribute: 'filtering-feature' })
|
|
367
|
+
], DataGridFieldHeader.prototype, "filteringFeature", void 0);
|
|
368
|
+
__decorate([
|
|
369
|
+
property({ type: Array })
|
|
370
|
+
], DataGridFieldHeader.prototype, "sorters", void 0);
|
|
371
|
+
__decorate([
|
|
372
|
+
property({ type: Array })
|
|
373
|
+
], DataGridFieldHeader.prototype, "filters", void 0);
|
|
374
|
+
__decorate([
|
|
375
|
+
property({ type: Number })
|
|
376
|
+
], DataGridFieldHeader.prototype, "index", void 0);
|
|
377
|
+
DataGridFieldHeader = __decorate([
|
|
378
|
+
customElement('ox-grid-field-header')
|
|
379
|
+
], DataGridFieldHeader);
|
|
380
|
+
export { DataGridFieldHeader };
|
|
381
|
+
//# sourceMappingURL=data-grid-field-header.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-grid-field-header.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field-header.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup.js'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\n\nimport { OxPopup } from '@operato/popup'\nimport { TooltipStyles } from '@operato/styles'\nimport { closestElement, detectOverflow } from '@operato/utils'\n\nimport { ZERO_COLUMN } from '../configure/zero-config'\nimport { FilterStyles } from '../filters/filter-styles'\nimport { getFilterRenderer } from '../filters/registry'\nimport { ColumnConfig, FilterConfigObject, FilterValue, GristData, SortersConfig } from '../types'\n\n@customElement('ox-grid-field-header')\nexport class DataGridFieldHeader extends LitElement {\n static styles = [\n FilterStyles,\n TooltipStyles,\n css`\n :host {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n\n overflow: hidden;\n }\n\n div[column] {\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\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\n span[sorter] mwc-icon {\n font-size: var(--grid-header-sorter-size);\n }\n\n span[filter] > mwc-icon {\n font-size: var(--fontsize-default);\n line-height: 20px;\n }\n\n span[splitter] {\n cursor: col-resize;\n border-right: var(--grid-header-splitter-border);\n margin-right: 0;\n }\n\n span[splitter]:hover {\n border-right: var(--grid-header-splitter-border-hover);\n }\n\n input[type='checkbox'],\n input[type='radio'] {\n margin: 3px 0 0 0;\n zoom: var(--grist-input-zoom);\n }\n\n [filter-title] {\n color: var(--grid-header-filter-title-color);\n font: var(--grid-header-filter-title-font);\n text-transform: capitalize;\n }\n\n [filter-title] * {\n vertical-align: middle;\n }\n\n [filter-title] mwc-icon {\n opacity: 0.7;\n color: var(--grid-header-filter-title-icon-color);\n }\n\n [filter] input[type='checkbox'] {\n margin-left: 10px;\n margin-bottom: 5px;\n }\n\n [fixed] {\n position: sticky;\n background-color: inherit; /* 고정된 열의 배경색 (선택사항) */\n z-index: 1;\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 }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Boolean }) fixed: boolean = false\n @property({ type: Boolean, attribute: 'filtering-feature' }) filteringFeature: boolean = false\n @property({ type: Array }) sorters: SortersConfig = []\n @property({ type: Array }) filters: FilterValue[] = []\n @property({ type: Number }) index!: number\n\n private _lastAccVal?: number\n private _throttledNotifier?: any\n\n render(): TemplateResult {\n const column = this.column\n\n return html`\n <div ?gutter=${column.type == 'gutter'} ?fixed=${column.fixed} column>\n <span\n for-title\n style=\"text-align:${column.record.align || 'left'};${column.header?.style || ''}\"\n @click=${(e: MouseEvent) => this._changeSort(column)}\n @mouseover=${(e: MouseEvent) => {\n const element = e.target as HTMLSpanElement\n\n if (detectOverflow(element)) {\n element.setAttribute('data-tooltip', element.textContent!.trim())\n }\n }}\n @mouseout=${(e: MouseEvent) => {\n const element = e.target as HTMLSpanElement\n element.removeAttribute('data-tooltip')\n }}\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 ${this.filteringFeature && column.filter && (column.filter as FilterConfigObject).operator !== 'search'\n ? html` <span filter> ${this._renderFilterHeader(column)} </span> `\n : undefined}\n ${column.resizable !== false\n ? html` <span splitter draggable=\"false\" @mousedown=${(e: MouseEvent) => this._mousedown(e)}> </span> `\n : undefined}\n </div>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('fixed')) {\n if (this.fixed) {\n this.style.left = this.offsetLeft + 'px'\n }\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_down</mwc-icon><sub>${rank}</sub> `\n : html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `\n } else {\n return sorter.desc\n ? html` <mwc-icon>keyboard_arrow_down</mwc-icon> `\n : html` <mwc-icon>keyboard_arrow_up</mwc-icon> `\n }\n }\n\n _renderFilterHeader(column: ColumnConfig) {\n const name = column.name\n const filter = column.filter as FilterConfigObject\n const type = filter.type\n const value = this.filters.find(filter => filter.name === name)?.value\n const idx = filter!.operator === 'between' ? 1 : 0\n const renderer = getFilterRenderer(type)[idx]\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('ox-popup, ox-popup-list') 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 ${!renderer\n ? html``\n : type !== 'select'\n ? html` <ox-popup\n ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>\n ${renderer(column, value, this)}</ox-popup\n >`\n : filter!.operator === 'in'\n ? html`<ox-popup-list\n multiple\n attr-selected=\"checked\"\n .value=${value}\n with-search\n @select=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n bubbles: true,\n composed: true,\n detail: {\n name,\n operator: filter!.operator,\n value: !e.detail\n ? undefined\n : e.detail instanceof Array && e.detail.length === 0\n ? undefined\n : e.detail\n }\n })\n )}\n ><div filter-title slot=\"header\">\n <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>\n </div>\n ${renderer(column, value, this)}</ox-popup-list\n >`\n : html`<ox-popup-list\n .value=${value}\n with-search\n @select=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n bubbles: true,\n composed: true,\n detail: {\n name,\n operator: filter!.operator,\n value: e.detail ? e.detail : undefined\n }\n })\n )}\n ><div filter-title slot=\"header\">\n <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>\n </div>\n ${renderer(column, value, this)}</ox-popup-list\n >`}\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('fetch-params-change', {\n bubbles: true,\n composed: true,\n detail: {\n sorters: this.sorters,\n from: 'data-grid-header'\n }\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) {\n e.stopPropagation()\n e.preventDefault()\n\n var mousemoveHandler = ((e: MouseEvent) => {\n e.stopPropagation()\n e.preventDefault()\n let column = this.column\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(this.index, 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"]}
|
|
@@ -4,7 +4,6 @@ import { css, html, LitElement } from 'lit';
|
|
|
4
4
|
import { customElement, property } from 'lit/decorators.js';
|
|
5
5
|
import { TooltipStyles } from '@operato/styles';
|
|
6
6
|
import { ZERO_COLUMN } from '../configure/zero-config';
|
|
7
|
-
import { getRenderer } from '../renderers';
|
|
8
7
|
const DEFAULT_TEXT_ALIGN = 'left';
|
|
9
8
|
let DataGridField = class DataGridField extends LitElement {
|
|
10
9
|
constructor() {
|
|
@@ -27,13 +26,11 @@ let DataGridField = class DataGridField extends LitElement {
|
|
|
27
26
|
}
|
|
28
27
|
var { value, column, record, rowIndex } = this;
|
|
29
28
|
var { renderer, editor } = column.record;
|
|
30
|
-
|
|
29
|
+
return html `
|
|
30
|
+
${this.editing
|
|
31
31
|
? editor === null || editor === void 0 ? void 0 : editor.call(this, value, column, record, rowIndex, this)
|
|
32
|
-
: renderer === null || renderer === void 0 ? void 0 : renderer.call(this, value, column, record, rowIndex, this)
|
|
33
|
-
|
|
34
|
-
rendered = getRenderer('string')(rendered, column, record, rowIndex, this);
|
|
35
|
-
}
|
|
36
|
-
return rendered;
|
|
32
|
+
: renderer === null || renderer === void 0 ? void 0 : renderer.call(this, value, column, record, rowIndex, this)}
|
|
33
|
+
`;
|
|
37
34
|
}
|
|
38
35
|
updated(changes) {
|
|
39
36
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkC,MAAM,KAAK,CAAA;AAC3E,kDAAkD;AAClD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\n// import { guard } from 'lit/directives/guard.js'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipStyles } from '@operato/styles'\n\nimport { ZERO_COLUMN } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\nimport { getRenderer } from '../renderers'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-field')\nexport class DataGridField extends LitElement {\n static styles = [\n TooltipStyles,\n css`\n :host {\n display: flex;\n\n align-items: center;\n justify-content: var(--data-grid-field-justify-content, flex-start);\n position: relative;\n\n white-space: nowrap;\n background-color: var(--grid-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(--grid-gutter-padding);\n text-align: center;\n }\n :host([gutter]) * {\n cursor: default;\n }\n\n :host([editing]) {\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 pre {\n display: block;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n * {\n margin: 0;\n text-align: var(--data-grid-field-text-align);\n }\n\n *[center] {\n flex: none;\n margin: 0 auto;\n }\n\n 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 }) editing = false\n @property({ type: Object }) value = {}\n @property({ type: String }) valueWithEdit: string | null = null\n @property({ attribute: false }) emphasized: any = false\n @property({ type: String }) fixed?: string\n\n private _editCancelled?: boolean\n private _onFieldChange: (e: Event) => void = e => {}\n private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}\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.editing\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.editing) {\n this._onKeydownInEditingMode = ((e: KeyboardEvent) => {\n if (e.key === 'Esc' || e.key === 'Escape') {\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 if (changes.has('fixed')) {\n if (this.fixed) {\n this.style.left = this.fixed + 'px'\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', '')\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"]}
|
|
@@ -3,5 +3,6 @@ import '@operato/input/ox-checkbox.js';
|
|
|
3
3
|
import '@operato/popup/ox-popup-list.js';
|
|
4
4
|
import { OxGristEditor } from './ox-grist-editor.js';
|
|
5
5
|
export declare class OxGristEditorMultipleSelect extends OxGristEditor {
|
|
6
|
+
static styles: import("lit").CSSResult[];
|
|
6
7
|
get editorTemplate(): import("lit").TemplateResult<1>;
|
|
7
8
|
}
|
|
@@ -2,8 +2,8 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import '@operato/input/ox-select.js';
|
|
3
3
|
import '@operato/input/ox-checkbox.js';
|
|
4
4
|
import '@operato/popup/ox-popup-list.js';
|
|
5
|
+
import { html, css } from 'lit';
|
|
5
6
|
import { customElement } from 'lit/decorators.js';
|
|
6
|
-
import { html } from 'lit';
|
|
7
7
|
import { OxGristEditor } from './ox-grist-editor.js';
|
|
8
8
|
let OxGristEditorMultipleSelect = class OxGristEditorMultipleSelect extends OxGristEditor {
|
|
9
9
|
get editorTemplate() {
|
|
@@ -37,6 +37,14 @@ let OxGristEditorMultipleSelect = class OxGristEditorMultipleSelect extends OxGr
|
|
|
37
37
|
`;
|
|
38
38
|
}
|
|
39
39
|
};
|
|
40
|
+
OxGristEditorMultipleSelect.styles = [
|
|
41
|
+
...OxGristEditor.styles,
|
|
42
|
+
css `
|
|
43
|
+
:host {
|
|
44
|
+
overflow: visible;
|
|
45
|
+
}
|
|
46
|
+
`
|
|
47
|
+
];
|
|
40
48
|
OxGristEditorMultipleSelect = __decorate([
|
|
41
49
|
customElement('ox-grist-editor-multiple-select')
|
|
42
50
|
], OxGristEditorMultipleSelect);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-grist-editor-multiple-select.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-multiple-select.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAA;AACpC,OAAO,+BAA+B,CAAA;AACtC,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ox-grist-editor-multiple-select.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-multiple-select.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAA;AACpC,OAAO,+BAA+B,CAAA;AACtC,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAG7C,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,aAAa;IAU5D,IAAI,cAAc;QAChB,IAAI,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,cAAc,IAAI,EAAE,CAAC,CAAA;QACzE,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAA;QAE3E,IAAI,OAAO,OAAO,IAAI,UAAU,EAAE,CAAC;YACjC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAA;QACrG,CAAC;QAED,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE;YACpC,QAAQ,OAAO,MAAM,EAAE,CAAC;gBACtB,KAAK,QAAQ;oBACX,OAAO;wBACL,OAAO,EAAE,MAAM;wBACf,KAAK,EAAE,MAAM;qBACd,CAAA;gBACH,KAAK,QAAQ;oBACX,OAAO;wBACL,OAAO,EAAE,MAAM,CAAC,OAAO;wBACvB,KAAK,EAAE,MAAM,CAAC,KAAK;qBACpB,CAAA;gBACH;oBACE,OAAO,MAAM,CAAA;YACjB,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,KAAK;;YAExB,OAAO,CAAC,GAAG,CACX,CAAC,MAA0C,EAAE,EAAE,CAC7C,IAAI,CAAA,8BAA8B,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,iBAAiB,CACpF;;;KAGN,CAAA;IACH,CAAC;;AA5CM,kCAAM,GAAG;IACd,GAAG,aAAa,CAAC,MAAM;IACvB,GAAG,CAAA;;;;KAIF;CACF,AAPY,CAOZ;AARU,2BAA2B;IADvC,aAAa,CAAC,iCAAiC,CAAC;GACpC,2BAA2B,CA8CvC","sourcesContent":["import '@operato/input/ox-select.js'\nimport '@operato/input/ox-checkbox.js'\nimport '@operato/popup/ox-popup-list.js'\n\nimport { html, css } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxGristEditor } from './ox-grist-editor.js'\n\n@customElement('ox-grist-editor-multiple-select')\nexport class OxGristEditorMultipleSelect extends OxGristEditor {\n static styles = [\n ...OxGristEditor.styles,\n css`\n :host {\n overflow: visible;\n }\n `\n ]\n\n get editorTemplate() {\n var rowOptionField = this.record[this.column.record.rowOptionField || '']\n var { options = [] } = rowOptionField ? rowOptionField : this.column.record\n\n if (typeof options == 'function') {\n options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field) || []\n }\n\n options = options.map((option: any) => {\n switch (typeof option) {\n case 'string':\n return {\n display: option,\n value: option\n }\n case 'object':\n return {\n display: option.display,\n value: option.value\n }\n default:\n return option\n }\n })\n\n return html`\n <ox-select .value=${this.value} style=\"width: 100%;\">\n <ox-popup-list multiple attr-selected=\"checked\">\n ${options.map(\n (option: { display: string; value: string }) =>\n html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `\n )}\n </ox-popup-list>\n </ox-select>\n `\n }\n}\n"]}
|
|
@@ -2,7 +2,7 @@ import { LitElement } from 'lit';
|
|
|
2
2
|
import { DataGridField } from '../data-grid/data-grid-field';
|
|
3
3
|
import { ColumnConfig, GristRecord } from '../types';
|
|
4
4
|
export declare class OxGristEditor extends LitElement {
|
|
5
|
-
static styles: import("lit").CSSResult;
|
|
5
|
+
static styles: import("lit").CSSResult[];
|
|
6
6
|
value?: any;
|
|
7
7
|
column: ColumnConfig;
|
|
8
8
|
record: GristRecord;
|
|
@@ -15,7 +15,7 @@ const STYLE = css `
|
|
|
15
15
|
border: 0;
|
|
16
16
|
background-color: transparent;
|
|
17
17
|
|
|
18
|
-
overflow:
|
|
18
|
+
overflow: hidden;
|
|
19
19
|
justify-content: var(--data-grid-field-justify-content, flex-start);
|
|
20
20
|
}
|
|
21
21
|
|
|
@@ -162,7 +162,7 @@ let OxGristEditor = class OxGristEditor extends LitElement {
|
|
|
162
162
|
return html ``;
|
|
163
163
|
}
|
|
164
164
|
};
|
|
165
|
-
OxGristEditor.styles = STYLE;
|
|
165
|
+
OxGristEditor.styles = [STYLE];
|
|
166
166
|
__decorate([
|
|
167
167
|
property({ type: Object })
|
|
168
168
|
], OxGristEditor.prototype, "value", void 0);
|