Skip to content

Commit b687d6f

Browse files
ghiscodingghiscoding
committed
chore(deps): update Slickgrid-Universal to v10.6.0
1 parent 174bdac commit b687d6f

10 files changed

Lines changed: 658 additions & 125 deletions

File tree

‎package-lock.json‎

Lines changed: 92 additions & 96 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -31,22 +31,22 @@
3131
"@faker-js/faker": "^10.4.0",
3232
"@fnando/sparkline": "^0.3.10",
3333
"@formkit/tempo": "^1.0.0",
34-
"@slickgrid-universal/common": "^10.5.2",
35-
"@slickgrid-universal/composite-editor-component": "^10.5.2",
36-
"@slickgrid-universal/custom-tooltip-plugin": "^10.5.2",
37-
"@slickgrid-universal/excel-export": "^10.5.2",
38-
"@slickgrid-universal/graphql": "^10.5.2",
39-
"@slickgrid-universal/odata": "^10.5.2",
40-
"@slickgrid-universal/pdf-export": "^10.5.2",
41-
"@slickgrid-universal/row-detail-view-plugin": "^10.5.2",
42-
"@slickgrid-universal/rxjs-observable": "^10.5.2",
43-
"@slickgrid-universal/sql": "^10.5.2",
44-
"@slickgrid-universal/text-export": "^10.5.2",
45-
"@slickgrid-universal/vanilla-bundle": "^10.5.2",
46-
"@slickgrid-universal/vanilla-force-bundle": "^10.5.2",
34+
"@slickgrid-universal/common": "^10.6.0",
35+
"@slickgrid-universal/composite-editor-component": "^10.6.0",
36+
"@slickgrid-universal/custom-tooltip-plugin": "^10.6.0",
37+
"@slickgrid-universal/excel-export": "^10.6.0",
38+
"@slickgrid-universal/graphql": "^10.6.0",
39+
"@slickgrid-universal/odata": "^10.6.0",
40+
"@slickgrid-universal/pdf-export": "^10.6.0",
41+
"@slickgrid-universal/row-detail-view-plugin": "^10.6.0",
42+
"@slickgrid-universal/rxjs-observable": "^10.6.0",
43+
"@slickgrid-universal/sql": "^10.6.0",
44+
"@slickgrid-universal/text-export": "^10.6.0",
45+
"@slickgrid-universal/vanilla-bundle": "^10.6.0",
46+
"@slickgrid-universal/vanilla-force-bundle": "^10.6.0",
4747
"alien-signals": "^3.1.2",
4848
"bulma": "^1.0.4",
49-
"dompurify": "^3.4.1",
49+
"dompurify": "^3.4.2",
5050
"rxjs": "^7.8.2"
5151
},
5252
"devDependencies": {

‎src/.prettierrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"useTabs": false,
3+
"tabWidth": 2,
4+
"printWidth": 140,
5+
"singleQuote": true,
6+
"trailingComma": "es5",
7+
"importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"]
8+
}

‎src/app-routing.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,9 @@ export class AppRouting {
4545
{ route: 'example39', name: 'example39', title: 'Example39', moduleId: './examples/example39' },
4646
{ route: 'example40', name: 'example40', title: 'Example40', moduleId: './examples/example40' },
4747
{ route: 'example41', name: 'example41', title: 'Example41', moduleId: './examples/example41' },
48+
{ route: 'example42', name: 'example42', title: 'Example42', moduleId: './examples/example42' },
4849
{ route: '', redirect: 'example01' },
49-
{ route: '**', redirect: 'example01' }
50+
{ route: '**', redirect: 'example01' },
5051
];
5152
}
5253
}

‎src/app.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ <h4 class="is-size-4 has-text-white">Slickgrid-Universal</h4>
8080
<a class="navbar-item" onclick.trigger="loadRoute('example39')">Example39 - Master/Detail Grids</a>
8181
<a class="navbar-item" onclick.trigger="loadRoute('example40')">Example40 - Menus with Slots</a>
8282
<a class="navbar-item" onclick.trigger="loadRoute('example41')">Example41 - Grid with SQL Backend Service</a>
83+
<a class="navbar-item" onclick.trigger="loadRoute('example42')">Example42 - Custom Filter Bar</a>
8384
</div>
8485
</div>
8586
</div>

‎src/examples/example02.ts‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -208,16 +208,26 @@ export default class Example02 {
208208
},
209209
excelExportOptions: {
210210
style: {
211-
font: { outline: true, italic: true },
211+
font: { outline: false, italic: true },
212212
format: '€0.00##;[Red](€0.00##)',
213213
},
214214
width: 18,
215215
},
216216
groupTotalsExcelExportOptions: {
217217
style: {
218218
alignment: { horizontal: 'center' },
219-
font: { bold: true, color: 'FF005289', underline: 'single', fontName: 'Consolas', size: 10 },
220-
fill: { type: 'pattern', patternType: 'solid', fgColor: 'FFE6F2F6' },
219+
font: {
220+
bold: true,
221+
color: 'FF005289',
222+
underline: 'single',
223+
fontName: 'Consolas',
224+
size: 10,
225+
},
226+
fill: {
227+
type: 'pattern',
228+
patternType: 'solid',
229+
fgColor: 'FFE6F2F6',
230+
},
221231
border: {
222232
top: { color: 'FFa500ff', style: 'thick' },
223233
left: { color: 'FFa500ff', style: 'medium' },
@@ -288,9 +298,18 @@ export default class Example02 {
288298
customExcelHeader: (workbook, sheet) => {
289299
const excelFormat = workbook.getStyleSheet().createFormat({
290300
// every color is prefixed with FF, then regular HTML color
291-
font: { size: 18, fontName: 'Calibri', bold: true, color: 'FFFFFFFF' },
301+
font: {
302+
size: 18,
303+
fontName: 'Calibri',
304+
bold: true,
305+
color: 'FFFFFFFF',
306+
},
292307
alignment: { wrapText: true, horizontal: 'center' },
293-
fill: { type: 'pattern', patternType: 'solid', fgColor: 'FF203764' },
308+
fill: {
309+
type: 'pattern',
310+
patternType: 'solid',
311+
fgColor: 'FF203764',
312+
},
294313
});
295314
sheet.setRowInstructions(0, { height: 50 }); // change height of row 0
296315

@@ -369,7 +388,10 @@ export default class Example02 {
369388
}
370389

371390
exportToExcel() {
372-
this.excelExportService.exportToExcel({ filename: 'export', format: 'xlsx' });
391+
this.excelExportService.exportToExcel({
392+
filename: 'export',
393+
format: 'xlsx',
394+
});
373395
}
374396

375397
exportToPdf() {

‎src/examples/example23.ts‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ export default class Example23 {
216216
},
217217
excelExportOptions: {
218218
style: {
219-
font: { outline: true, italic: true, color: 'FF215073' },
219+
font: { outline: false, italic: true, color: 'FF215073' },
220220
format: '$0.00', // currency format
221221
},
222222
width: 12,
@@ -271,7 +271,7 @@ export default class Example23 {
271271
},
272272
excelExportOptions: {
273273
style: {
274-
font: { outline: true, italic: true, color: 'FFC65911' },
274+
font: { outline: false, italic: true, color: 'FFC65911' },
275275
format: '$0.00', // currency format
276276
},
277277
width: 12,
@@ -311,7 +311,7 @@ export default class Example23 {
311311
},
312312
excelExportOptions: {
313313
style: {
314-
font: { outline: true, bold: true, color: 'FF005A9E' },
314+
font: { outline: false, bold: true, color: 'FF005A9E' },
315315
format: '$0.00', // currency format
316316
},
317317
width: 12,
@@ -359,9 +359,18 @@ export default class Example23 {
359359
customExcelHeader: (workbook, sheet) => {
360360
const excelFormat = workbook.getStyleSheet().createFormat({
361361
// every color is prefixed with FF, then regular HTML color
362-
font: { size: 18, fontName: 'Calibri', bold: true, color: 'FFFFFFFF' },
362+
font: {
363+
size: 18,
364+
fontName: 'Calibri',
365+
bold: true,
366+
color: 'FFFFFFFF',
367+
},
363368
alignment: { wrapText: true, horizontal: 'center' },
364-
fill: { type: 'pattern', patternType: 'solid', fgColor: 'FF203764' },
369+
fill: {
370+
type: 'pattern',
371+
patternType: 'solid',
372+
fgColor: 'FF203764',
373+
},
365374
});
366375
sheet.setRowInstructions(0, { height: 40 }); // change height of row 0
367376

@@ -465,17 +474,32 @@ export default class Example23 {
465474
excelVal = `(${excelPriceCol}*${excelQtyCol})+${excelTaxesCol}`;
466475
break;
467476
}
468-
return { value: excelVal, metadata: { type: 'formula', style: excelFormatId } };
477+
return {
478+
value: excelVal,
479+
metadata: { type: 'formula', style: excelFormatId },
480+
};
469481
}
470482

471483
getData() {
472484
let i = 1;
473485
const datasetTmp = [
474486
{ id: i++, name: 'Oranges', qty: 4, taxable: false, price: 2.22 },
475487
{ id: i++, name: 'Apples', qty: 3, taxable: false, price: 1.55 },
476-
{ id: i++, name: 'Honeycomb Cereals', qty: 2, taxable: true, price: 4.55 },
488+
{
489+
id: i++,
490+
name: 'Honeycomb Cereals',
491+
qty: 2,
492+
taxable: true,
493+
price: 4.55,
494+
},
477495
{ id: i++, name: 'Raisins', qty: 77, taxable: false, price: 0.23 },
478-
{ id: i++, name: 'Corn Flake Cereals', qty: 1, taxable: true, price: 6.62 },
496+
{
497+
id: i++,
498+
name: 'Corn Flake Cereals',
499+
qty: 1,
500+
taxable: true,
501+
price: 6.62,
502+
},
479503
{ id: i++, name: 'Tomatoes', qty: 3, taxable: false, price: 1.88 },
480504
{ id: i++, name: 'Butter', qty: 1, taxable: false, price: 3.33 },
481505
{ id: i++, name: 'BBQ Chicken', qty: 1, taxable: false, price: 12.33 },

‎src/examples/example42.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<h3 class="title is-3">
2+
Example 42 - Custom Filter Bar
3+
<div class="subtitle code-link">
4+
<span class="is-size-6">see</span>
5+
<a
6+
class="is-size-5"
7+
target="_blank"
8+
href="https://github.com/ghiscoding/slickgrid-universal/blob/master/demos/vanilla/src/examples/example42.ts"
9+
>
10+
<span class="mdi mdi-link-variant"></span> code
11+
</a>
12+
</div>
13+
</h3>
14+
15+
<h5 class="mb-3 italic example-details">
16+
Display Custom Filters in the top header bar, which is similar to how the MSSQL Extension does it. Please note that the html code used is
17+
not important, what is important though is that we can use <code>filterService.updateFilters()</code>,
18+
<code>filterService.getColumnFilters()</code>, <code>filterService.clearFilterByColumnId()</code>. Also note that the demo creates custom
19+
filters, but you could also optionally use <code>filterService.drawFilterTemplate()</code> to render the built-in filters in a modal
20+
window (see <a href="https://ghiscoding.github.io/slickgrid-universal/#/example07">Example 7</a> which does exactly that).
21+
</h5>
22+
23+
<div class="grid42"></div>

‎src/examples/example42.scss‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
/* 1st grid */
2+
.grid42 {
3+
--slick-header-button-float: left;
4+
--slick-header-button-margin: 0px 0 100px 8px;
5+
}
6+
7+
.top-filters {
8+
display: flex;
9+
align-items: center;
10+
padding: 5px 10px;
11+
height: 50px;
12+
border: 1px solid #e0e0e0;
13+
width: 100%;
14+
border-radius: 4px;
15+
background-color: #fff;
16+
17+
.top-filters-title {
18+
font-weight: bold;
19+
margin-right: 12px;
20+
}
21+
.top-dropped-filter {
22+
display: flex;
23+
align-items: center;
24+
background-color: rgba(0, 0, 0, 0.03);
25+
border: 1px solid #013861;
26+
border-radius: 8px;
27+
padding: 0 10px;
28+
margin-right: 8px;
29+
z-index: 1;
30+
height: 35px;
31+
32+
.filter-value {
33+
font-weight: bold;
34+
color: #0b99af;
35+
margin-left: 4px;
36+
}
37+
38+
.filter-remove {
39+
cursor: pointer;
40+
display: inline-flex;
41+
margin-left: 2px;
42+
color: #09798a;
43+
font-size: 16px;
44+
margin-left: 10px;
45+
padding-left: 5px;
46+
padding-right: 0px;
47+
vertical-align: baseline;
48+
&:hover {
49+
color: #1690a3;
50+
}
51+
}
52+
}
53+
}
54+
55+
.filter-modal {
56+
position: absolute;
57+
z-index: 999;
58+
border: 2px solid #9b9b9b;
59+
border-radius: 8px;
60+
padding: 8px 14px;
61+
gap: 4px;
62+
background-color: #fafafa;
63+
.filter-modal-title {
64+
font-weight: bold;
65+
margin-bottom: 8px;
66+
}
67+
68+
.filter-modal-footer {
69+
display: flex;
70+
justify-content: flex-end;
71+
gap: 4px;
72+
margin-top: 10px;
73+
74+
button {
75+
padding: 4px 8px;
76+
border: 1px solid #d3d3d3;
77+
border-radius: 4px;
78+
background-color: #fff;
79+
cursor: pointer;
80+
&:hover {
81+
background-color: #e0e0e0;
82+
}
83+
}
84+
}
85+
}
86+
87+
.slick-header-button .mdi-filter {
88+
color: #0b99af;
89+
}
90+
91+
.item-type {
92+
padding: 2px 6px;
93+
border-radius: 4px;
94+
font-size: 11px;
95+
font-weight: 600;
96+
letter-spacing: 0.5px;
97+
width: fit-content;
98+
height: 25px;
99+
padding: 2px 10px;
100+
display: inline-flex;
101+
align-items: center;
102+
103+
&-Food {
104+
border: 2px solid #2fa32f;
105+
background: rgba(47, 162, 47, 0.1);
106+
color: #2fa32f;
107+
}
108+
&-Toy {
109+
border: 2px solid #9931ad;
110+
background: rgba(154, 49, 175, 0.1);
111+
color: #9931ad;
112+
}
113+
&-Electronics {
114+
border: 2px solid #2980b9;
115+
background: rgba(41, 128, 185, 0.1);
116+
color: #2980b9;
117+
}
118+
&-Tool {
119+
border: 2px solid #c6ab4a;
120+
background: rgba(198, 171, 74, 0.1);
121+
color: #c6ab4a;
122+
}
123+
&-Other {
124+
border: 2px solid #7f8c8d;
125+
background: rgba(127, 140, 141, 0.1);
126+
color: #7f8c8d;
127+
}
128+
}

0 commit comments

Comments
 (0)