@melodicdev/components 1.6.8 → 1.6.10
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/assets/melodic-components.js +43 -14
- package/assets/melodic-components.js.map +1 -1
- package/assets/melodic-components.min.js +1213 -1186
- package/lib/components/data-display/data-grid/data-grid.component.d.ts +3 -0
- package/lib/components/data-display/data-grid/data-grid.component.d.ts.map +1 -1
- package/lib/components/data-display/data-grid/data-grid.component.js +27 -0
- package/lib/components/data-display/data-grid/data-grid.styles.js +8 -8
- package/lib/components/data-display/data-grid/data-grid.template.d.ts.map +1 -1
- package/lib/components/data-display/data-grid/data-grid.template.js +17 -5
- package/lib/components/overlays/dialog/dialog.styles.d.ts.map +1 -1
- package/lib/components/overlays/dialog/dialog.styles.js +2 -1
- package/package.json +1 -1
|
@@ -88,6 +88,9 @@ export declare class DataGridComponent implements IElementRef, OnCreate, OnDestr
|
|
|
88
88
|
get totalGridWidth(): number;
|
|
89
89
|
get gridTemplateColumns(): string;
|
|
90
90
|
getPinnedLeftOffset(key: string): number;
|
|
91
|
+
getPinnedRightOffset(key: string): number;
|
|
92
|
+
get lastLeftPinnedKey(): string | null;
|
|
93
|
+
get firstRightPinnedKey(): string | null;
|
|
91
94
|
get topSpacerHeight(): number;
|
|
92
95
|
get bottomSpacerHeight(): number;
|
|
93
96
|
get allSelected(): boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-grid.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACrG,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAK1E;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAiBa,iBAAkB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB;IAC9F,UAAU,EAAG,WAAW,CAAC;IAIhC,0CAA0C;IACnC,UAAU,UAAS;IAE1B,kCAAkC;IAC3B,OAAO,UAAS;IAEvB,8BAA8B;IACvB,SAAS,UAAQ;IAExB,wBAAwB;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEhC,2CAA2C;IACpC,SAAS,SAAM;IAEtB,iDAAiD;IAC1C,WAAW,SAAM;IAExB,kFAAkF;IAC3E,UAAU,UAAS;IAE1B,8BAA8B;IACvB,QAAQ,SAAM;IAErB,2DAA2D;IACpD,OAAO,UAAQ;IAEtB,yDAAyD;IAClD,aAAa,UAAS;IAI7B,yBAAyB;IAClB,OAAO,EAAE,cAAc,EAAE,CAAM;IAEtC,eAAe;IACR,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAM;IAIrC,OAAO,SAAM;IACb,aAAa,EAAE,aAAa,CAAS;IAIrC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAIrC,eAAe,EAAE,MAAM,EAAE,CAAM;IAI/B,WAAW,SAAK;IAIhB,UAAU,SAAK;IACf,QAAQ,SAAM;IAId,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IACvC,QAAQ,EAAE,MAAM,EAAE,CAAM;IAIxB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAIlC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAClC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAKzC,OAAO,CAAC,SAAS,CAAyB;IAC1C,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,iBAAiB,CAAK;IAI9B,IAAW,SAAS,IAAI,MAAM,CAE7B;IAIM,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI;IAMvE,QAAQ,IAAI,IAAI;IAKhB,QAAQ,IAAI,IAAI;IA6BhB,SAAS,IAAI,IAAI;IAOxB,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,gBAAgB;IAWxB,IAAW,YAAY,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CASnD;IAED,IAAW,UAAU,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAYjD;IAED,IAAW,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAIhD;IAED,IAAW,aAAa,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAEpD;IAED,IAAW,WAAW,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAGlD;IAED,IAAW,SAAS,IAAI,MAAM,CAE7B;IAED,IAAW,UAAU,IAAI,MAAM,CAE9B;IAID,IAAW,cAAc,IAAI,cAAc,EAAE,CAM5C;IAED,IAAW,YAAY,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAMhD;IAED,IAAW,cAAc,IAAI,MAAM,CAMlC;IAED,IAAW,mBAAmB,IAAI,MAAM,CAKvC;IAEM,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;
|
|
1
|
+
{"version":3,"file":"data-grid.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACrG,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAK1E;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAiBa,iBAAkB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB;IAC9F,UAAU,EAAG,WAAW,CAAC;IAIhC,0CAA0C;IACnC,UAAU,UAAS;IAE1B,kCAAkC;IAC3B,OAAO,UAAS;IAEvB,8BAA8B;IACvB,SAAS,UAAQ;IAExB,wBAAwB;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEhC,2CAA2C;IACpC,SAAS,SAAM;IAEtB,iDAAiD;IAC1C,WAAW,SAAM;IAExB,kFAAkF;IAC3E,UAAU,UAAS;IAE1B,8BAA8B;IACvB,QAAQ,SAAM;IAErB,2DAA2D;IACpD,OAAO,UAAQ;IAEtB,yDAAyD;IAClD,aAAa,UAAS;IAI7B,yBAAyB;IAClB,OAAO,EAAE,cAAc,EAAE,CAAM;IAEtC,eAAe;IACR,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAM;IAIrC,OAAO,SAAM;IACb,aAAa,EAAE,aAAa,CAAS;IAIrC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAIrC,eAAe,EAAE,MAAM,EAAE,CAAM;IAI/B,WAAW,SAAK;IAIhB,UAAU,SAAK;IACf,QAAQ,SAAM;IAId,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IACvC,QAAQ,EAAE,MAAM,EAAE,CAAM;IAIxB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAIlC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAClC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAKzC,OAAO,CAAC,SAAS,CAAyB;IAC1C,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,iBAAiB,CAAK;IAI9B,IAAW,SAAS,IAAI,MAAM,CAE7B;IAIM,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI;IAMvE,QAAQ,IAAI,IAAI;IAKhB,QAAQ,IAAI,IAAI;IA6BhB,SAAS,IAAI,IAAI;IAOxB,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,gBAAgB;IAWxB,IAAW,YAAY,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CASnD;IAED,IAAW,UAAU,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAYjD;IAED,IAAW,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAIhD;IAED,IAAW,aAAa,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAEpD;IAED,IAAW,WAAW,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAGlD;IAED,IAAW,SAAS,IAAI,MAAM,CAE7B;IAED,IAAW,UAAU,IAAI,MAAM,CAE9B;IAID,IAAW,cAAc,IAAI,cAAc,EAAE,CAM5C;IAED,IAAW,YAAY,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAMhD;IAED,IAAW,cAAc,IAAI,MAAM,CAMlC;IAED,IAAW,mBAAmB,IAAI,MAAM,CAKvC;IAEM,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAWxC,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAYhD,IAAW,iBAAiB,IAAI,MAAM,GAAG,IAAI,CAM5C;IAED,IAAW,mBAAmB,IAAI,MAAM,GAAG,IAAI,CAK9C;IAED,IAAW,eAAe,IAAI,MAAM,CAEnC;IAED,IAAW,kBAAkB,IAAI,MAAM,CAGtC;IAID,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED,IAAW,YAAY,IAAI,OAAO,CAEjC;IAEM,aAAa,GAAI,OAAO,MAAM,KAAG,OAAO,CAAyC;IAIjF,UAAU,GAAI,KAAK,cAAc,KAAG,IAAI,CAiB7C;IAEK,iBAAiB,GAAI,KAAK,MAAM,EAAE,GAAG,KAAK,KAAG,IAAI,CAYtD;IAEK,eAAe,QAAO,IAAI,CAG/B;IAEK,eAAe,GAAI,OAAO,MAAM,EAAE,GAAG,KAAK,KAAG,IAAI,CAMtD;IAEK,cAAc,GAAI,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,MAAM,KAAG,IAAI,CAQzE;IAEK,iBAAiB,GAAI,KAAK,MAAM,EAAE,GAAG,YAAY,KAAG,IAAI,CAO7D;IAEK,gBAAgB,GAAI,KAAK,MAAM,EAAE,GAAG,YAAY,KAAG,IAAI,CAS5D;IAEK,eAAe,QAAO,IAAI,CAU/B;IAEK,eAAe,GAAI,KAAK,MAAM,EAAE,GAAG,SAAS,KAAG,IAAI,CAGxD;IAEK,cAAc,GAAI,KAAK,MAAM,EAAE,GAAG,SAAS,KAAG,IAAI,CAGvD;IAEK,aAAa,QAAO,IAAI,CAG7B;IAEK,UAAU,GAAI,WAAW,MAAM,KAAG,IAAI,CAwB3C;IAEK,QAAQ,GAAI,MAAM,MAAM,KAAG,IAAI,CAYpC;IAEF,OAAO,CAAC,WAAW;CASnB"}
|
|
@@ -370,6 +370,33 @@ let DataGridComponent = class DataGridComponent {
|
|
|
370
370
|
}
|
|
371
371
|
return 0;
|
|
372
372
|
}
|
|
373
|
+
getPinnedRightOffset(key) {
|
|
374
|
+
let offset = 0;
|
|
375
|
+
for (let i = this.orderedColumns.length - 1; i >= 0; i--) {
|
|
376
|
+
const col = this.orderedColumns[i];
|
|
377
|
+
if (col.key === key)
|
|
378
|
+
return offset;
|
|
379
|
+
if (col.pinned === 'right') {
|
|
380
|
+
offset += this.columnWidths[col.key] ?? 150;
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
return 0;
|
|
384
|
+
}
|
|
385
|
+
get lastLeftPinnedKey() {
|
|
386
|
+
let key = null;
|
|
387
|
+
for (const col of this.orderedColumns) {
|
|
388
|
+
if (col.pinned === 'left')
|
|
389
|
+
key = col.key;
|
|
390
|
+
}
|
|
391
|
+
return key;
|
|
392
|
+
}
|
|
393
|
+
get firstRightPinnedKey() {
|
|
394
|
+
for (const col of this.orderedColumns) {
|
|
395
|
+
if (col.pinned === 'right')
|
|
396
|
+
return col.key;
|
|
397
|
+
}
|
|
398
|
+
return null;
|
|
399
|
+
}
|
|
373
400
|
get topSpacerHeight() {
|
|
374
401
|
return this.virtual ? this.startIndex * this.rowHeight : 0;
|
|
375
402
|
}
|
|
@@ -259,7 +259,8 @@ export const dataGridStyles = () => css `
|
|
|
259
259
|
position: relative;
|
|
260
260
|
}
|
|
261
261
|
|
|
262
|
-
.ml-data-grid__filter-cell--pinned-left
|
|
262
|
+
.ml-data-grid__filter-cell--pinned-left,
|
|
263
|
+
.ml-data-grid__filter-cell--pinned-right {
|
|
263
264
|
position: sticky;
|
|
264
265
|
z-index: 3;
|
|
265
266
|
background: var(--ml-data-grid-bg);
|
|
@@ -394,9 +395,9 @@ export const dataGridStyles = () => css `
|
|
|
394
395
|
background: var(--ml-data-grid-header-bg);
|
|
395
396
|
}
|
|
396
397
|
|
|
397
|
-
/* Pinned left shadow */
|
|
398
|
-
.ml-data-grid__th--pinned-left::after,
|
|
399
|
-
.ml-data-grid__td--pinned-left::after {
|
|
398
|
+
/* Pinned left shadow — renders only on the rightmost (boundary) left-pinned cell */
|
|
399
|
+
.ml-data-grid__th--pinned-left-edge::after,
|
|
400
|
+
.ml-data-grid__td--pinned-left-edge::after {
|
|
400
401
|
content: '';
|
|
401
402
|
position: absolute;
|
|
402
403
|
top: 0;
|
|
@@ -410,7 +411,6 @@ export const dataGridStyles = () => css `
|
|
|
410
411
|
.ml-data-grid__th--pinned-right,
|
|
411
412
|
.ml-data-grid__td--pinned-right {
|
|
412
413
|
position: sticky;
|
|
413
|
-
right: 0;
|
|
414
414
|
z-index: 1;
|
|
415
415
|
background: var(--ml-data-grid-bg);
|
|
416
416
|
}
|
|
@@ -420,9 +420,9 @@ export const dataGridStyles = () => css `
|
|
|
420
420
|
background: var(--ml-data-grid-header-bg);
|
|
421
421
|
}
|
|
422
422
|
|
|
423
|
-
/* Pinned right shadow */
|
|
424
|
-
.ml-data-grid__th--pinned-right::before,
|
|
425
|
-
.ml-data-grid__td--pinned-right::before {
|
|
423
|
+
/* Pinned right shadow — renders only on the leftmost (boundary) right-pinned cell */
|
|
424
|
+
.ml-data-grid__th--pinned-right-edge::before,
|
|
425
|
+
.ml-data-grid__td--pinned-right-edge::before {
|
|
426
426
|
content: '';
|
|
427
427
|
position: absolute;
|
|
428
428
|
top: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-grid.template.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"data-grid.template.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAelE,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,iBAAiB,6CA+NpD"}
|
|
@@ -5,6 +5,13 @@ function renderCell(col, row, index) {
|
|
|
5
5
|
const val = row[col.key];
|
|
6
6
|
return val == null ? '' : val;
|
|
7
7
|
}
|
|
8
|
+
function pinStyle(c, col) {
|
|
9
|
+
if (col.pinned === 'left')
|
|
10
|
+
return `left: ${c.getPinnedLeftOffset(col.key)}px`;
|
|
11
|
+
if (col.pinned === 'right')
|
|
12
|
+
return `right: ${c.getPinnedRightOffset(col.key)}px`;
|
|
13
|
+
return '';
|
|
14
|
+
}
|
|
8
15
|
export function dataGridTemplate(c) {
|
|
9
16
|
const gtc = c.gridTemplateColumns;
|
|
10
17
|
const totalW = c.totalGridWidth;
|
|
@@ -54,11 +61,13 @@ export function dataGridTemplate(c) {
|
|
|
54
61
|
'ml-data-grid__th--sorted': c.sortKey === col.key,
|
|
55
62
|
'ml-data-grid__th--pinned-left': col.pinned === 'left',
|
|
56
63
|
'ml-data-grid__th--pinned-right': col.pinned === 'right',
|
|
64
|
+
'ml-data-grid__th--pinned-left-edge': col.key === c.lastLeftPinnedKey,
|
|
65
|
+
'ml-data-grid__th--pinned-right-edge': col.key === c.firstRightPinnedKey,
|
|
57
66
|
'ml-data-grid__th--drag-over': c.dragOverKey === col.key,
|
|
58
67
|
'ml-data-grid__th--dragging': c.draggingKey === col.key,
|
|
59
68
|
'ml-data-grid__th--resizing': c.resizingKey === col.key
|
|
60
69
|
})}
|
|
61
|
-
style=${
|
|
70
|
+
style=${pinStyle(c, col)}
|
|
62
71
|
draggable=${col.reorderable !== false ? 'true' : 'false'}
|
|
63
72
|
@dragstart=${(e) => c.handleDragStart(col.key, e)}
|
|
64
73
|
@dragover=${(e) => c.handleDragOver(col.key, e)}
|
|
@@ -103,9 +112,10 @@ export function dataGridTemplate(c) {
|
|
|
103
112
|
<div
|
|
104
113
|
class=${classMap({
|
|
105
114
|
'ml-data-grid__filter-cell': true,
|
|
106
|
-
'ml-data-grid__filter-cell--pinned-left': col.pinned === 'left'
|
|
115
|
+
'ml-data-grid__filter-cell--pinned-left': col.pinned === 'left',
|
|
116
|
+
'ml-data-grid__filter-cell--pinned-right': col.pinned === 'right'
|
|
107
117
|
})}
|
|
108
|
-
style=${
|
|
118
|
+
style=${pinStyle(c, col)}
|
|
109
119
|
>
|
|
110
120
|
${when(!!col.filterable, () => html `
|
|
111
121
|
<input
|
|
@@ -155,9 +165,11 @@ export function dataGridTemplate(c) {
|
|
|
155
165
|
'ml-data-grid__td': true,
|
|
156
166
|
[`ml-data-grid__td--${col.align ?? 'left'}`]: true,
|
|
157
167
|
'ml-data-grid__td--pinned-left': col.pinned === 'left',
|
|
158
|
-
'ml-data-grid__td--pinned-right': col.pinned === 'right'
|
|
168
|
+
'ml-data-grid__td--pinned-right': col.pinned === 'right',
|
|
169
|
+
'ml-data-grid__td--pinned-left-edge': col.key === c.lastLeftPinnedKey,
|
|
170
|
+
'ml-data-grid__td--pinned-right-edge': col.key === c.firstRightPinnedKey
|
|
159
171
|
})}
|
|
160
|
-
style=${
|
|
172
|
+
style=${pinStyle(c, col)}
|
|
161
173
|
>
|
|
162
174
|
${renderCell(col, row, c.startIndex + i)}
|
|
163
175
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dialog/dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dialog/dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDA2NxB,CAAC"}
|
|
@@ -47,7 +47,7 @@ export const dialogStyles = () => css `
|
|
|
47
47
|
/* Dialog base */
|
|
48
48
|
dialog.ml-dialog {
|
|
49
49
|
position: fixed;
|
|
50
|
-
display:
|
|
50
|
+
display: none;
|
|
51
51
|
flex-direction: column;
|
|
52
52
|
width: 100%;
|
|
53
53
|
max-width: var(--ml-dialog-max-width);
|
|
@@ -70,6 +70,7 @@ export const dialogStyles = () => css `
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
dialog.ml-dialog[open] {
|
|
73
|
+
display: flex;
|
|
73
74
|
transform: scale(1) translateY(0);
|
|
74
75
|
opacity: 1;
|
|
75
76
|
}
|