@melodicdev/components 1.6.1 → 1.6.2

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.
Files changed (8) hide show
  1. package/assets/melodic-components.js +21 -6
  2. package/assets/melodic-components.js.map +1 -1
  3. package/assets/melodic-components.min.js +21 -6
  4. package/lib/components/data-display/table/table.styles.d.ts.map +1 -1
  5. package/lib/components/data-display/table/table.styles.js +14 -4
  6. package/lib/components/data-display/table/table.template.d.ts.map +1 -1
  7. package/lib/components/data-display/table/table.template.js +7 -2
  8. package/package.json +1 -1
package/assets/melodic-components.min.js CHANGED
@@ -12140,6 +12140,7 @@ function Uo(e) {
12140
12140
  `)}
12141
12141
  ${k(e.columns, (t) => t.key, (t) => i`
12142
12142
  <th
12143
+ part="header-cell"
12143
12144
  class=${g({
12144
12145
  "ml-table__th": !0,
12145
12146
  "ml-table__th--sortable": !!t.sortable,
@@ -12172,6 +12173,7 @@ function Uo(e) {
12172
12173
  const a = e.startIndex + r;
12173
12174
  return i`
12174
12175
  <tr
12176
+ part="row"
12175
12177
  class=${g({
12176
12178
  "ml-table__row": !0,
12177
12179
  "ml-table__row--selected": e.isRowSelected(a)
@@ -12191,10 +12193,13 @@ function Uo(e) {
12191
12193
  </td>
12192
12194
  `)}
12193
12195
  ${k(e.columns, (l) => l.key, (l) => i`
12194
- <td class=${g({
12196
+ <td
12197
+ part="cell"
12198
+ class=${g({
12195
12199
  "ml-table__td": !0,
12196
12200
  [`ml-table__td--${l.align ?? "left"}`]: !0
12197
- })}>
12201
+ })}
12202
+ >
12198
12203
  ${Ko(l, t, a)}
12199
12204
  </td>
12200
12205
  `)}
@@ -12267,6 +12272,16 @@ const Wo = () => _`
12267
12272
 
12268
12273
  /* ── Table: cells ── */
12269
12274
  --ml-table-cell-color: var(--ml-color-text);
12275
+ --ml-table-cell-padding-y: var(--ml-space-4);
12276
+ --ml-table-cell-padding-x: var(--ml-space-6);
12277
+ --ml-table-cell-padding-y-sm: var(--ml-space-2-5);
12278
+ --ml-table-cell-padding-x-sm: var(--ml-space-4);
12279
+
12280
+ /* ── Table: header cells ── */
12281
+ --ml-table-header-padding-y: var(--ml-space-3);
12282
+ --ml-table-header-padding-x: var(--ml-space-6);
12283
+ --ml-table-header-padding-y-sm: var(--ml-space-2);
12284
+ --ml-table-header-padding-x-sm: var(--ml-space-4);
12270
12285
 
12271
12286
  /* ── Table: checkbox ── */
12272
12287
  --ml-table-checkbox-accent: var(--ml-color-primary);
@@ -12338,7 +12353,7 @@ const Wo = () => _`
12338
12353
  }
12339
12354
 
12340
12355
  .ml-table__th {
12341
- padding: var(--ml-space-3) var(--ml-space-6);
12356
+ padding: var(--ml-table-header-padding-y) var(--ml-table-header-padding-x);
12342
12357
  font-size: var(--ml-text-xs);
12343
12358
  font-weight: var(--ml-font-medium);
12344
12359
  color: var(--ml-table-header-color);
@@ -12350,7 +12365,7 @@ const Wo = () => _`
12350
12365
  }
12351
12366
 
12352
12367
  .ml-table--sm .ml-table__th {
12353
- padding: var(--ml-space-2) var(--ml-space-4);
12368
+ padding: var(--ml-table-header-padding-y-sm) var(--ml-table-header-padding-x-sm);
12354
12369
  }
12355
12370
 
12356
12371
  .ml-table__th--center { text-align: center; }
@@ -12428,14 +12443,14 @@ const Wo = () => _`
12428
12443
 
12429
12444
  /* ── Body cells ── */
12430
12445
  .ml-table__td {
12431
- padding: var(--ml-space-4) var(--ml-space-6);
12446
+ padding: var(--ml-table-cell-padding-y) var(--ml-table-cell-padding-x);
12432
12447
  font-size: var(--ml-text-sm);
12433
12448
  color: var(--ml-table-cell-color);
12434
12449
  vertical-align: middle;
12435
12450
  }
12436
12451
 
12437
12452
  .ml-table--sm .ml-table__td {
12438
- padding: var(--ml-space-2-5) var(--ml-space-4);
12453
+ padding: var(--ml-table-cell-padding-y-sm) var(--ml-table-cell-padding-x-sm);
12439
12454
  font-size: var(--ml-text-xs);
12440
12455
  }
12441
12456
 
package/lib/components/data-display/table/table.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAuSvB,CAAC"}
1
+ {"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAiTvB,CAAC"}
package/lib/components/data-display/table/table.styles.js CHANGED
@@ -47,6 +47,16 @@ export const tableStyles = () => css `
47
47
 
48
48
  /* ── Table: cells ── */
49
49
  --ml-table-cell-color: var(--ml-color-text);
50
+ --ml-table-cell-padding-y: var(--ml-space-4);
51
+ --ml-table-cell-padding-x: var(--ml-space-6);
52
+ --ml-table-cell-padding-y-sm: var(--ml-space-2-5);
53
+ --ml-table-cell-padding-x-sm: var(--ml-space-4);
54
+
55
+ /* ── Table: header cells ── */
56
+ --ml-table-header-padding-y: var(--ml-space-3);
57
+ --ml-table-header-padding-x: var(--ml-space-6);
58
+ --ml-table-header-padding-y-sm: var(--ml-space-2);
59
+ --ml-table-header-padding-x-sm: var(--ml-space-4);
50
60
 
51
61
  /* ── Table: checkbox ── */
52
62
  --ml-table-checkbox-accent: var(--ml-color-primary);
@@ -118,7 +128,7 @@ export const tableStyles = () => css `
118
128
  }
119
129
 
120
130
  .ml-table__th {
121
- padding: var(--ml-space-3) var(--ml-space-6);
131
+ padding: var(--ml-table-header-padding-y) var(--ml-table-header-padding-x);
122
132
  font-size: var(--ml-text-xs);
123
133
  font-weight: var(--ml-font-medium);
124
134
  color: var(--ml-table-header-color);
@@ -130,7 +140,7 @@ export const tableStyles = () => css `
130
140
  }
131
141
 
132
142
  .ml-table--sm .ml-table__th {
133
- padding: var(--ml-space-2) var(--ml-space-4);
143
+ padding: var(--ml-table-header-padding-y-sm) var(--ml-table-header-padding-x-sm);
134
144
  }
135
145
 
136
146
  .ml-table__th--center { text-align: center; }
@@ -208,14 +218,14 @@ export const tableStyles = () => css `
208
218
 
209
219
  /* ── Body cells ── */
210
220
  .ml-table__td {
211
- padding: var(--ml-space-4) var(--ml-space-6);
221
+ padding: var(--ml-table-cell-padding-y) var(--ml-table-cell-padding-x);
212
222
  font-size: var(--ml-text-sm);
213
223
  color: var(--ml-table-cell-color);
214
224
  vertical-align: middle;
215
225
  }
216
226
 
217
227
  .ml-table--sm .ml-table__td {
218
- padding: var(--ml-space-2-5) var(--ml-space-4);
228
+ padding: var(--ml-table-cell-padding-y-sm) var(--ml-table-cell-padding-x-sm);
219
229
  font-size: var(--ml-text-xs);
220
230
  }
221
231
 
package/lib/components/data-display/table/table.template.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"table.template.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/table/table.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAU3D,wBAAgB,aAAa,CAAC,CAAC,EAAE,cAAc,6CA0H9C"}
1
+ {"version":3,"file":"table.template.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/table/table.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAU3D,wBAAgB,aAAa,CAAC,CAAC,EAAE,cAAc,6CA+H9C"}
package/lib/components/data-display/table/table.template.js CHANGED
@@ -44,6 +44,7 @@ export function tableTemplate(c) {
44
44
  `)}
45
45
  ${repeat(c.columns, (col) => col.key, (col) => html `
46
46
  <th
47
+ part="header-cell"
47
48
  class=${classMap({
48
49
  'ml-table__th': true,
49
50
  'ml-table__th--sortable': !!col.sortable,
@@ -80,6 +81,7 @@ export function tableTemplate(c) {
80
81
  const absoluteIndex = c.startIndex + i;
81
82
  return html `
82
83
  <tr
84
+ part="row"
83
85
  class=${classMap({
84
86
  'ml-table__row': true,
85
87
  'ml-table__row--selected': c.isRowSelected(absoluteIndex)
@@ -99,10 +101,13 @@ export function tableTemplate(c) {
99
101
  </td>
100
102
  `)}
101
103
  ${repeat(c.columns, (col) => col.key, (col) => html `
102
- <td class=${classMap({
104
+ <td
105
+ part="cell"
106
+ class=${classMap({
103
107
  'ml-table__td': true,
104
108
  [`ml-table__td--${col.align ?? 'left'}`]: true
105
- })}>
109
+ })}
110
+ >
106
111
  ${renderCell(col, row, absoluteIndex)}
107
112
  </td>
108
113
  `)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@melodicdev/components",
3
- "version": "1.6.1",
3
+ "version": "1.6.2",
4
4
  "description": "Themeable UI component library built on the Melodic Framework",
5
5
  "license": "MIT",
6
6
  "author": "Melodic Development",