@schukai/monster 3.62.0 → 3.63.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (65) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/package.json +1 -1
  3. package/source/components/datatable/datatable.mjs +41 -6
  4. package/source/components/datatable/events.mjs +24 -0
  5. package/source/components/datatable/pagination.mjs +0 -2
  6. package/source/components/datatable/status.mjs +2 -2
  7. package/source/components/datatable/style/column-bar.pcss +5 -3
  8. package/source/components/datatable/style/dataset.pcss +1 -0
  9. package/source/components/datatable/style/datatable.pcss +8 -18
  10. package/source/components/datatable/style/embedded-pagination.pcss +2 -2
  11. package/source/components/datatable/style/filter.pcss +1 -1
  12. package/source/components/datatable/style/pagination.pcss +3 -3
  13. package/source/components/datatable/stylesheet/change-button.mjs +1 -1
  14. package/source/components/datatable/stylesheet/column-bar.mjs +1 -1
  15. package/source/components/datatable/stylesheet/dataset.mjs +1 -1
  16. package/source/components/datatable/stylesheet/datatable.mjs +1 -1
  17. package/source/components/datatable/stylesheet/embedded-pagination.mjs +1 -1
  18. package/source/components/datatable/stylesheet/filter.mjs +1 -1
  19. package/source/components/datatable/stylesheet/pagination.mjs +1 -1
  20. package/source/components/datatable/stylesheet/save-button.mjs +1 -1
  21. package/source/components/datatable/stylesheet/select-filter.mjs +1 -1
  22. package/source/components/datatable/stylesheet/status.mjs +1 -1
  23. package/source/components/form/context-error.mjs +7 -8
  24. package/source/components/form/context-help.mjs +7 -2
  25. package/source/components/form/select.mjs +22 -5
  26. package/source/components/form/style/context-error.pcss +1 -1
  27. package/source/components/form/style/context-help.pcss +5 -1
  28. package/source/components/form/style/select.pcss +81 -56
  29. package/source/components/form/style/toggle-switch.pcss +2 -2
  30. package/source/components/form/stylesheet/action-button.mjs +1 -1
  31. package/source/components/form/stylesheet/context-error.mjs +1 -1
  32. package/source/components/form/stylesheet/context-help.mjs +1 -1
  33. package/source/components/form/stylesheet/select.mjs +1 -1
  34. package/source/components/form/stylesheet/state-button.mjs +1 -1
  35. package/source/components/form/stylesheet/toggle-switch.mjs +1 -1
  36. package/source/components/host/collapse.mjs +0 -5
  37. package/source/components/host/style/collapse.pcss +3 -2
  38. package/source/components/host/stylesheet/call-button.mjs +1 -1
  39. package/source/components/host/stylesheet/collapse.mjs +1 -1
  40. package/source/components/host/stylesheet/details.mjs +1 -1
  41. package/source/components/host/stylesheet/host.mjs +1 -1
  42. package/source/components/host/stylesheet/overlay.mjs +1 -1
  43. package/source/components/host/stylesheet/toggle-button.mjs +1 -1
  44. package/source/components/host/stylesheet/viewer.mjs +1 -1
  45. package/source/components/layout/style/tabs.pcss +0 -1
  46. package/source/components/layout/stylesheet/tabs.mjs +1 -1
  47. package/source/components/layout/tabs.mjs +17 -1
  48. package/source/components/notify/stylesheet/message.mjs +1 -1
  49. package/source/components/style/color.pcss +11 -0
  50. package/source/components/style/icons.pcss +73 -69
  51. package/source/components/style/mixin/icon.pcss +32 -37
  52. package/source/components/style/mixin/property.pcss +20 -2
  53. package/source/components/style/property.pcss +1 -0
  54. package/source/components/style/table.pcss +6 -4
  55. package/source/components/style/theme.pcss +24 -5
  56. package/source/components/stylesheet/color.mjs +1 -1
  57. package/source/components/stylesheet/icons.mjs +1 -1
  58. package/source/components/stylesheet/property.mjs +1 -1
  59. package/source/components/stylesheet/table.mjs +1 -1
  60. package/source/components/stylesheet/theme.mjs +1 -1
  61. package/source/monster.mjs +2 -0
  62. package/source/types/version.mjs +1 -1
  63. package/test/cases/monster.mjs +1 -1
  64. package/test/web/test.html +2 -2
  65. package/test/web/tests.js +54 -26
package/source/components/style/mixin/property.pcss CHANGED
@@ -267,8 +267,8 @@
267
267
 
268
268
 
269
269
  /** PRIMARY / DISABLED */
270
- --monster-color-primary-disabled-1: var(--monster-color-gray-3);
271
- --monster-color-primary-disabled-2: var(--monster-color-gray-1);
270
+ --monster-color-primary-disabled-1: var(--monster-color-gray-4);
271
+ --monster-color-primary-disabled-2: var(--monster-color-gray-4);
272
272
  --monster-color-primary-disabled-3: var(--monster-color-gray-4);
273
273
  --monster-color-primary-disabled-4: var(--monster-color-gray-4);
274
274
 
@@ -293,4 +293,22 @@
293
293
  --monster-color-gradient-2: #fd1d1d;
294
294
  --monster-color-gradient-3: #fcb045;
295
295
 
296
+ }
297
+
298
+ @define-mixin defaultTableProperty {
299
+
300
+ --monster-table-bg-color: var(--monster-gradient-tangerine-1);
301
+ --monster-table-color: var(--monster-gradient-tangerine-6);
302
+ --monster-table-border-color: var(--monster-gradient-tangerine-2);
303
+ --monster-table-hover-color: var(--monster-gradient-tangerine-6);
304
+ --monster-table-hover-bg-color: var(--monster-gradient-tangerine-2);
305
+
306
+ @media (prefers-color-scheme: dark) {
307
+ --monster-table-bg-color: var(--monster-color-gray-5);
308
+ --monster-table-color: var(--monster-color-gray-1);
309
+ --monster-table-border-color: var(--monster-color-gray-3);
310
+ --monster-table-hover-color: var(--monster-color-gray-1);
311
+ --monster-table-hover-bg-color: var(--monster-color-gray-6);
312
+ }
313
+
296
314
  }
package/source/components/style/property.pcss CHANGED
@@ -7,6 +7,7 @@
7
7
  @mixin defaultColorProperty;
8
8
  @mixin defaultShadowProperty;
9
9
  @mixin defaultTextProperty;
10
+ @mixin defaultTableProperty;
10
11
  @mixin defaultBorderProperty;
11
12
  @mixin defaultPoperProperty;
12
13
  @mixin defaultZIndexProperty;
package/source/components/style/table.pcss CHANGED
@@ -30,16 +30,18 @@ th {
30
30
  display: block;
31
31
  width: 100%;
32
32
  overflow-x: auto;
33
- background-color: var(--monster-bg-color-primary-2);
34
- color: var(--monster-color-primary-2);
33
+ background-color: var(--monster-table-bg-color);
34
+ color: var(--monster-table-color);
35
35
  padding: 8px;
36
36
  margin: 0;
37
37
  box-sizing: border-box;
38
38
  }
39
39
 
40
40
  .monster-table tbody tr th, .monster-table tbody tr td {
41
- background-color: var(--monster-bg-color-primary-1);
42
- border: none;
41
+ background-color: var(--monster-table-bg-color);
42
+ color: var(--monster-table-color);
43
+ border-bottom: 1px solid var(--monster-table-border-color);
44
+
43
45
  }
44
46
 
45
47
 
package/source/components/style/theme.pcss CHANGED
@@ -109,11 +109,30 @@
109
109
  color: var(--monster-color-selection-$i);
110
110
  }
111
111
 
112
+ }
112
113
 
113
-
114
-
115
-
116
-
117
-
114
+ .monster-theme-table-container-1 {
115
+ background-color: var(--monster-table-bg-color);
116
+ color: var(--monster-table-color);
117
+ border: 1px solid var(--monster-table-border-color);
118
+ }
119
+
120
+ .monster-theme-table-row-1 {
121
+ background-color: var(--monster-table-bg-color);
122
+ color: var(--monster-table-color);
123
+ border: 1px solid var(--monster-table-border-color);
124
+ }
125
+
126
+ .monster-theme-table-elements {
127
+ background-color: var(--monster-table-bg-color);
128
+ color: var(--monster-table-color);
129
+ }
130
+
131
+ .monster-theme-table-background {
132
+ background-color: var(--monster-table-bg-color);
133
+ }
134
+
135
+ .monster-theme-background-inherit {
136
+ background-color: inherit !important;
118
137
  }
119
138
 
package/source/components/stylesheet/color.mjs CHANGED
@@ -20,7 +20,7 @@ const ColorStyleSheet = new CSSStyleSheet();
20
20
  try {
21
21
  ColorStyleSheet.insertRule(`
22
22
  @layer color {
23
- :after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030}
23
+ :after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505}
24
24
  }`, 0);
25
25
  } catch (e) {
26
26
  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");