@massimo-cassandro/minimo 0.10.10 → 0.11.0
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/design-tokens/components/snackbar.minimo.tokens.jsonc +106 -12
- package/design-tokens/shadows.minimo.tokens.jsonc +19 -0
- package/design-tokens/z-index.minimo.tokens.jsonc +4 -0
- package/design-tokens-src/_readme.md +1 -1
- package/design-tokens-src/badge.minimo.tokens.mjs +36 -0
- package/design-tokens-src/btn-close.minimo.tokens.mjs +101 -0
- package/design-tokens-src/components/snackbar.minimo.tokens.mjs +113 -21
- package/design-tokens-src/flex-grid.minimo.tokens.mjs +18 -0
- package/design-tokens-src/shadows.minimo.tokens.mjs +16 -0
- package/design-tokens-src/z-index.minimo.tokens.mjs +14 -0
- package/design-tokens-utilities/build-tokens-src/transforms.mjs +2 -1
- package/package.json +3 -3
- package/src/components/snackbar/snackbar.js +57 -63
- package/src/components/snackbar/snackbar.module.css +80 -45
- package/src/css/buttons/btn-close.css +3 -2
- package/src/css/forms/forms.css +1 -0
- package/src/custom-properties.css +22 -4
- package/src/minimo.css +3 -3
- package/src/web-components/s-datatable-component/docs.md +187 -0
- package/src/web-components/s-datatable-component/s-datatable-component.js +517 -0
- package/src/web-components/{simple-datatable/simple-datatable.module.css → s-datatable-component/s-datatable-component.module.css} +1 -1
- package/src/web-components/{simple-datatable → s-datatable-component}/src/parse-cols.js +1 -1
- package/design-tokens-src/badge.minimo.tokens.jsonc +0 -36
- package/design-tokens-src/btn-close.minimo.tokens.jsonc +0 -101
- package/design-tokens-src/flex-grid.minimo.tokens.jsonc +0 -18
- package/design-tokens-src/gradients-shadowes.minimo.tokens.jsonc +0 -4
- package/design-tokens-src/z-index.minimo.tokens.jsonc +0 -8
- package/src/web-components/simple-datatable/simple-datatable.js +0 -218
|
@@ -1,218 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import { DataTable } from 'simple-datatables';
|
|
3
|
-
|
|
4
|
-
import { parseCols } from './src/parse-cols.js';
|
|
5
|
-
|
|
6
|
-
import * as styles from './simple-datatable.module.css';
|
|
7
|
-
|
|
8
|
-
import caretLeftIcon from '../../icons/caret-left.svg?inline';
|
|
9
|
-
import caretRightIcon from '../../icons/caret-right.svg?inline';
|
|
10
|
-
|
|
11
|
-
// TODO possibilità di definizione cols anche da js. In questo caso, in presenza ANCHE dell'attributo, deve prevalere quest'ultimo
|
|
12
|
-
|
|
13
|
-
// https://fiduswriter.github.io/simple-datatables/documentation/
|
|
14
|
-
|
|
15
|
-
class SimpleDatatable extends HTMLElement {
|
|
16
|
-
constructor() {
|
|
17
|
-
super();
|
|
18
|
-
// this.attachShadow({ mode: 'open' }); // commentare per light dom
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
// implementare se necessario modificare gli attributi nel runtime
|
|
23
|
-
/*
|
|
24
|
-
static get observedAttributes() {
|
|
25
|
-
return ['icon', 'variant', 'size', 'url'];
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
attributeChangedCallback() {}
|
|
29
|
-
*/
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
async connectedCallback() {
|
|
33
|
-
this.innerHTML = '<div class="spinner"><span class="visually-hidden">Caricamento dati...</span></div>';
|
|
34
|
-
|
|
35
|
-
const jsonUrl = this.getAttribute('json') || null,
|
|
36
|
-
cols = JSON.parse(this.getAttribute('cols')?? {});
|
|
37
|
-
|
|
38
|
-
try {
|
|
39
|
-
const response = await fetch(jsonUrl),
|
|
40
|
-
json_data = await response.json();
|
|
41
|
-
|
|
42
|
-
this.headings = cols.map(item => item._title? `<abbr title="${item._title}">${item._heading}</abbr>` : item._heading);
|
|
43
|
-
|
|
44
|
-
this.data = json_data.data.map((row, idx) => {
|
|
45
|
-
|
|
46
|
-
// riga datatable
|
|
47
|
-
return {
|
|
48
|
-
attributes: {'data-jidx': idx}, // indice della riga dati nel json originale
|
|
49
|
-
|
|
50
|
-
cells: cols.map((col_item, col_idx) => {
|
|
51
|
-
|
|
52
|
-
let value = row[col_item._field];
|
|
53
|
-
// let order = null;
|
|
54
|
-
|
|
55
|
-
// ------------------
|
|
56
|
-
// elaborazione _renderTpl -> aggiunta id e/o altri riferimenti a campi della riga.
|
|
57
|
-
// necessario farlo così, perché simple-datatable non permette l'accesso ai dati di riga
|
|
58
|
-
// durante il render delle celle, i riferimenti vanno quindi risolti al momento di elaborare i dati
|
|
59
|
-
if(col_item._renderTpl) {
|
|
60
|
-
const this_value = decodeURIComponent(col_item._renderTpl).replace(/\[\[(.*?)\]\]/g, (match, key) => {
|
|
61
|
-
|
|
62
|
-
if(row[key] == null) {
|
|
63
|
-
// eslint-disable-next-line no-console
|
|
64
|
-
console.error(`[s-datatable] Chiave “${key}” non trovata (colonna ${col_idx})`);
|
|
65
|
-
}
|
|
66
|
-
return row[key]?? '{{' + key + '}}';
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
value = this_value;
|
|
70
|
-
// order = row[col_item._field];
|
|
71
|
-
}
|
|
72
|
-
// ------------------
|
|
73
|
-
|
|
74
|
-
// conversione date symfony in ISO8601
|
|
75
|
-
else if(col_item._renderMode === 'sf_datetime' && value != null) {
|
|
76
|
-
value = value.date.replace(' ', 'T') +
|
|
77
|
-
(value.timezone === 'UTC'? 'Z' : '');
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
return value; //{text: value, ...(order? {order: order} : {})};
|
|
81
|
-
})
|
|
82
|
-
};
|
|
83
|
-
});
|
|
84
|
-
|
|
85
|
-
this.columns = cols.map((col_settings, idx ) => {
|
|
86
|
-
|
|
87
|
-
// pre-elaborazione tipi predefiniti
|
|
88
|
-
col_settings = parseCols(col_settings);
|
|
89
|
-
|
|
90
|
-
const col_obj = {
|
|
91
|
-
...(Object.fromEntries(
|
|
92
|
-
Object.entries(col_settings).filter(([key]) => !key.startsWith('_'))
|
|
93
|
-
)),
|
|
94
|
-
select: idx,
|
|
95
|
-
type: col_settings.type?? 'string',
|
|
96
|
-
searchable: col_settings.searchable?? true,
|
|
97
|
-
sortable: col_settings.sortable?? true,
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
return col_obj;
|
|
101
|
-
});
|
|
102
|
-
|
|
103
|
-
// console.log('json_data', json_data);
|
|
104
|
-
// console.log('cols', cols);
|
|
105
|
-
// console.log('columns', this.columns);
|
|
106
|
-
// console.log('data', this.data);
|
|
107
|
-
|
|
108
|
-
} catch(err) {
|
|
109
|
-
/* eslint-disable no-console */
|
|
110
|
-
console.error(jsonUrl);
|
|
111
|
-
console.error(err);
|
|
112
|
-
/* eslint-enable no-console */
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
this.render();
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
// approccio per eventuale modifica degli attributi nel runtime
|
|
119
|
-
// set variant(val) {this.setAttribute('variant', val);} get variant(val) {return this.getAttribute('variant')}
|
|
120
|
-
|
|
121
|
-
render() {
|
|
122
|
-
this.innerHTML = '';
|
|
123
|
-
const table = document.createElement('table');
|
|
124
|
-
this.appendChild(table);
|
|
125
|
-
|
|
126
|
-
// https://fiduswriter.github.io/simple-datatables/documentation/Options
|
|
127
|
-
const dt = new DataTable(table, {
|
|
128
|
-
locale: 'it',
|
|
129
|
-
searchable: true,
|
|
130
|
-
sortable: true,
|
|
131
|
-
fixedHeight: false,
|
|
132
|
-
fixedColumns: false,
|
|
133
|
-
paging: true,
|
|
134
|
-
perPage: +this.getAttribute('perPage') || 25,
|
|
135
|
-
pagerDelta: 2,
|
|
136
|
-
perPageSelect: false,
|
|
137
|
-
|
|
138
|
-
labels: {
|
|
139
|
-
placeholder: 'Cerca...',
|
|
140
|
-
searchTitle: 'Cerca nella tabella',
|
|
141
|
-
pageTitle: 'Pagina {page}',
|
|
142
|
-
perPage: 'Righe per pagina',
|
|
143
|
-
noRows: 'Nessun record trovato',
|
|
144
|
-
info: 'Stai visualizzando le righe da {start} a {end}, su un totale di {rows}',
|
|
145
|
-
noResults: 'Nessun risultato per la ricerca',
|
|
146
|
-
},
|
|
147
|
-
classes: {
|
|
148
|
-
wrapper : styles.datatableWrapper,
|
|
149
|
-
container : 'table-responsive',
|
|
150
|
-
loading : 'datatable-loading', // ??
|
|
151
|
-
|
|
152
|
-
// barra superiore
|
|
153
|
-
top : styles.topArea,
|
|
154
|
-
search : styles.searchWrapper,
|
|
155
|
-
input : 'form-control form-control-sm',
|
|
156
|
-
// dropdown : 'datatable-dropdown', // selettore righe per pagina, disattivato
|
|
157
|
-
|
|
158
|
-
empty : styles.empty,
|
|
159
|
-
|
|
160
|
-
// table
|
|
161
|
-
table : `table table-bordered ${styles.table}`,
|
|
162
|
-
// buttons in thead per il sort
|
|
163
|
-
sorter : `btn-reset ${styles.sortBtn}`,
|
|
164
|
-
ascending : styles.sortAscending,
|
|
165
|
-
descending : styles.sortDescending,
|
|
166
|
-
|
|
167
|
-
// area inferiore
|
|
168
|
-
bottom : styles.bottomArea,
|
|
169
|
-
// info text
|
|
170
|
-
info : styles.info,
|
|
171
|
-
|
|
172
|
-
// pagination
|
|
173
|
-
// pagination : styles.paginationNav,
|
|
174
|
-
paginationList : styles.paginationList,
|
|
175
|
-
paginationListItem : styles.paginationListItem,
|
|
176
|
-
paginationListItemLink : styles.paginationListItemBtn,
|
|
177
|
-
// hidden : 'datatable-hidden',
|
|
178
|
-
disabled : styles.paginationDisabled,
|
|
179
|
-
active : styles.paginationActive,
|
|
180
|
-
|
|
181
|
-
// cursor: 'datatable-cursor',
|
|
182
|
-
// dropdown: 'datatable-dropdown',
|
|
183
|
-
// ellipsis: 'datatable-ellipsis',
|
|
184
|
-
// filter: 'datatable-filter',
|
|
185
|
-
// filterActive: 'datatable-filter-active',
|
|
186
|
-
// headercontainer: 'datatable-headercontainer',
|
|
187
|
-
// selector: 'datatable-selector',
|
|
188
|
-
},
|
|
189
|
-
|
|
190
|
-
columns: this.columns,
|
|
191
|
-
data: {
|
|
192
|
-
headings: this.headings,
|
|
193
|
-
data: this.data
|
|
194
|
-
}
|
|
195
|
-
});
|
|
196
|
-
|
|
197
|
-
dt.on('datatable.init', () => {
|
|
198
|
-
const pagination = this.querySelector(`.${styles.paginationList}`);
|
|
199
|
-
|
|
200
|
-
if(pagination.querySelectorAll(`.${styles.paginationListItem}`).length) {
|
|
201
|
-
|
|
202
|
-
pagination.querySelector(`.${styles.paginationListItem}:first-child .${styles.paginationListItemBtn}`)
|
|
203
|
-
.innerHTML = caretLeftIcon;
|
|
204
|
-
|
|
205
|
-
pagination.querySelector(`.${styles.paginationListItem}:last-child .${styles.paginationListItemBtn}`)
|
|
206
|
-
.innerHTML = caretRightIcon;
|
|
207
|
-
|
|
208
|
-
pagination.querySelectorAll(`.${styles.paginationListItemBtn}:has(svg)`)
|
|
209
|
-
.forEach(btn => btn.classList.add(styles.hasSvg));
|
|
210
|
-
}
|
|
211
|
-
});
|
|
212
|
-
|
|
213
|
-
} // end render
|
|
214
|
-
} // end component
|
|
215
|
-
|
|
216
|
-
if (!customElements.get('s-datatable')) {
|
|
217
|
-
customElements.define('s-datatable', SimpleDatatable);
|
|
218
|
-
}
|