@shortfuse/materialdesignweb 0.4.0 → 0.5.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.
Files changed (184) hide show
  1. package/.browserslistrc +2 -1
  2. package/.eslintrc.json +59 -8
  3. package/.stylelintrc.json +94 -49
  4. package/CHANGELOG.md +12 -0
  5. package/README.md +1 -3
  6. package/adapters/datatable/column.js +27 -54
  7. package/adapters/datatable/index.js +69 -81
  8. package/adapters/dom/index.js +32 -47
  9. package/adapters/search/index.js +107 -133
  10. package/components/appbar/_spec.scss +77 -137
  11. package/components/banner/_spec.scss +28 -63
  12. package/components/bottomnav/_spec.scss +46 -54
  13. package/components/bottomnav/index.js +15 -20
  14. package/components/bottomnav/item.js +4 -5
  15. package/components/button/README.md +1 -1
  16. package/components/button/_spec.scss +43 -42
  17. package/components/button/_theme.scss +27 -50
  18. package/components/card/_spec.scss +61 -69
  19. package/components/chip/_spec.scss +21 -44
  20. package/components/chip/_theme.scss +79 -151
  21. package/components/chip/index.js +6 -4
  22. package/components/datatable/_spec.scss +36 -99
  23. package/components/datatable/_theme.scss +98 -124
  24. package/components/datatable/cell.js +1 -2
  25. package/components/datatable/columnheader.js +1 -2
  26. package/components/datatable/index.js +33 -47
  27. package/components/datatable/row.js +4 -5
  28. package/components/dialog/_spec.scss +53 -63
  29. package/components/dialog/_theme.scss +7 -0
  30. package/components/dialog/index.js +62 -88
  31. package/components/divider/_spec.scss +6 -8
  32. package/components/elevation/_spec.scss +1 -1
  33. package/components/fab/_spec.scss +30 -42
  34. package/components/fab/index.js +4 -8
  35. package/components/grid/_spec.scss +68 -211
  36. package/components/layout/_mixins.scss +0 -22
  37. package/components/layout/_spec.scss +267 -363
  38. package/components/layout/_theme.scss +10 -35
  39. package/components/layout/index.js +40 -50
  40. package/components/list/_spec.scss +57 -91
  41. package/components/list/_theme.scss +75 -84
  42. package/components/list/content.js +9 -13
  43. package/components/list/index.js +34 -38
  44. package/components/list/item.js +8 -11
  45. package/components/list/secondary.js +8 -9
  46. package/components/menu/_spec.scss +134 -167
  47. package/components/menu/index.js +45 -61
  48. package/components/menu/item.js +11 -19
  49. package/components/progress/_spec.scss +43 -34
  50. package/components/selection/_spec.scss +123 -133
  51. package/components/selection/_theme.scss +88 -120
  52. package/components/selection/index.js +9 -15
  53. package/components/selection/input.js +3 -5
  54. package/components/selection/radiogroup.js +8 -15
  55. package/components/slider/_spec.scss +23 -28
  56. package/components/snackbar/_spec.scss +17 -62
  57. package/components/snackbar/index.js +15 -21
  58. package/components/tab/_spec.scss +35 -50
  59. package/components/tab/content.js +33 -28
  60. package/components/tab/index.js +30 -33
  61. package/components/tab/item.js +4 -5
  62. package/components/tab/list.js +22 -36
  63. package/components/textfield/README.md +2 -2
  64. package/components/textfield/_spec.scss +241 -287
  65. package/components/textfield/_theme.scss +197 -232
  66. package/components/textfield/index.js +8 -16
  67. package/components/tooltip/_spec.scss +23 -26
  68. package/components/type/_spec.scss +19 -16
  69. package/core/_breakpoint.scss +33 -33
  70. package/core/_elevation.scss +40 -0
  71. package/core/_length.scss +0 -1
  72. package/core/_platform.scss +0 -22
  73. package/core/_type.scss +7 -6
  74. package/core/aria/button.js +4 -5
  75. package/core/aria/keyboard.js +1 -2
  76. package/core/aria/rovingtabindex.js +14 -17
  77. package/core/aria/tab.js +1 -2
  78. package/core/dom.js +18 -109
  79. package/core/overlay/_spec.scss +5 -8
  80. package/core/overlay/_theme.scss +126 -150
  81. package/core/overlay/index.js +19 -32
  82. package/core/ripple/_spec.scss +16 -17
  83. package/core/ripple/_theme.scss +13 -33
  84. package/core/ripple/index.js +36 -44
  85. package/core/theme/_aliases.scss +15 -0
  86. package/core/theme/_config.scss +8 -2
  87. package/core/theme/_functions.scss +22 -0
  88. package/core/theme/_palettes.scss +0 -1
  89. package/core/{color → theme}/_spec.scss +0 -0
  90. package/core/theme/_theme.scss +268 -0
  91. package/core/theme/index.scss +4 -0
  92. package/core/transition/index.js +73 -76
  93. package/docs/_flex.scss +7 -1
  94. package/docs/_menuoptions.js +2 -2
  95. package/docs/_partials/_appbar.eta +12 -14
  96. package/docs/_partials/_header.eta +41 -44
  97. package/docs/_sample-utils.js +15 -20
  98. package/docs/docs.scss +123 -87
  99. package/docs/framework.scss +26 -0
  100. package/docs/index.eta +2 -6
  101. package/docs/index.js +7 -0
  102. package/docs/pages/appbar.eta +22 -28
  103. package/docs/pages/bottomnav.js +17 -14
  104. package/docs/pages/button.js +10 -10
  105. package/docs/pages/card.js +20 -22
  106. package/docs/pages/chip.js +11 -13
  107. package/docs/pages/color.js +35 -36
  108. package/docs/pages/datatable.js +11 -15
  109. package/docs/pages/dialog.eta +9 -11
  110. package/docs/pages/dialog.js +6 -9
  111. package/docs/pages/dom.js +6 -9
  112. package/docs/pages/elevation.eta +10 -10
  113. package/docs/pages/fab.js +2 -3
  114. package/docs/pages/grid.js +5 -5
  115. package/docs/pages/list.js +1 -2
  116. package/docs/pages/menu.eta +17 -19
  117. package/docs/pages/menu.js +7 -11
  118. package/docs/pages/overlay.js +1 -2
  119. package/docs/pages/progress.eta +2 -2
  120. package/docs/pages/progress.js +1 -1
  121. package/docs/pages/ripple.js +1 -2
  122. package/docs/pages/search.eta +20 -24
  123. package/docs/pages/search.js +24 -41
  124. package/docs/pages/selection.eta +2 -6
  125. package/docs/pages/selection.js +3 -4
  126. package/docs/pages/snackbar.js +3 -4
  127. package/docs/pages/tab.eta +61 -75
  128. package/docs/pages/tab.js +16 -15
  129. package/docs/pages/textfield.eta +9 -8
  130. package/docs/pages/textfield.js +26 -23
  131. package/docs/pages/tooltip.eta +10 -12
  132. package/docs/pages/transition.js +5 -7
  133. package/docs/postrender.js +7 -5
  134. package/docs/pwa/pwa.eta +14 -16
  135. package/docs/pwa/pwa.js +19 -27
  136. package/docs/pwa/pwa.scss +12 -7
  137. package/docs/themes/theme-colored.scss +9 -11
  138. package/docs/themes/theme-default.scss +0 -14
  139. package/index.scss +27 -0
  140. package/jsconfig.json +7 -3
  141. package/package.json +26 -15
  142. package/tsconfig.json +16 -0
  143. package/{webpack.config.cjs → webpack.config.js} +105 -58
  144. package/components/template/_theme.scss +0 -27
  145. package/components/textfield/_mixins.scss +0 -52
  146. package/core/color/_theme.scss +0 -390
  147. package/core/color/index.scss +0 -2
  148. package/core/theme/_mixins.scss +0 -172
  149. package/core/theme/_variables.scss +0 -24
  150. package/docs/_mixins.pug +0 -155
  151. package/docs/pages/appbar.pug +0 -78
  152. package/docs/pages/bottomnav.pug +0 -137
  153. package/docs/pages/button.pug +0 -121
  154. package/docs/pages/card.pug +0 -74
  155. package/docs/pages/chip.pug +0 -91
  156. package/docs/pages/color.pug +0 -121
  157. package/docs/pages/datatable.pug +0 -283
  158. package/docs/pages/dialog.pug +0 -132
  159. package/docs/pages/dom.pug +0 -22
  160. package/docs/pages/elevation.pug +0 -25
  161. package/docs/pages/fab.pug +0 -66
  162. package/docs/pages/grid.pug +0 -95
  163. package/docs/pages/layout.pug +0 -7
  164. package/docs/pages/list.pug +0 -326
  165. package/docs/pages/menu.pug +0 -205
  166. package/docs/pages/overlay.pug +0 -55
  167. package/docs/pages/progress.pug +0 -16
  168. package/docs/pages/ripple.pug +0 -21
  169. package/docs/pages/search.pug +0 -165
  170. package/docs/pages/selection.pug +0 -74
  171. package/docs/pages/slider.pug +0 -17
  172. package/docs/pages/snackbar.pug +0 -60
  173. package/docs/pages/tab.pug +0 -304
  174. package/docs/pages/textfield.pug +0 -360
  175. package/docs/pages/tooltip.pug +0 -78
  176. package/docs/pages/transition.pug +0 -76
  177. package/docs/pages/type.pug +0 -29
  178. package/docs/pwa/_dialogs.pug +0 -96
  179. package/docs/pwa/_menus.pug +0 -11
  180. package/docs/pwa/pwa.pug +0 -325
  181. package/docs/spec.scss +0 -26
  182. package/docs/themes/_component-themes.scss +0 -26
  183. package/docs/themes/theme-colored-fallbacks.scss +0 -17
  184. package/docs/themes/theme-default-fallbacks.scss +0 -17
package/docs/pwa/pwa.eta CHANGED
@@ -1,6 +1,6 @@
1
1
  <% var T = '../../templates/index.eta' %>
2
2
  <!DOCTYPE html>
3
- <html class="mdw-layout mdw-theme" lang="en">
3
+ <html class="mdw-layout mdw-theme" lang="en" mdw-light>
4
4
 
5
5
  <head>
6
6
  <title>MDW PWA</title>
@@ -11,7 +11,7 @@
11
11
  <meta name="theme-color" content="#fff">
12
12
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
13
13
  <meta name="apple-mobile-web-app-capable" content="yes">
14
- <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
14
+ <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
15
15
  <link rel="stylesheet" href="pwa.min.css">
16
16
  <script src="pwa-prerender.min.js"></script>
17
17
  </head>
@@ -100,7 +100,7 @@
100
100
  <div>
101
101
  <span>
102
102
  <span class="mdw-type" mdw-style="h2">Info</span>
103
- <%~ includeFile(T, { button: { icon:true, class:'material-icons', text:'close' }}) %>
103
+ <%~ includeFile(T, { button: { icon:true, class:'material-icons mdw-layout__sidesheet-hide mdw-layout__sidesheet-hide', text:'close' }}) %>
104
104
  </span>
105
105
  </div>
106
106
  </div>
@@ -119,14 +119,12 @@
119
119
  </svg>
120
120
  </div>
121
121
  </div>
122
- <div class="mdw-appbar__action">
123
- <div class="mdw-appbar__start">
124
- <%~ includeFile(T, { button: { icon:true, class:'.mdw-layout__navdrawer-toggle', text:'menu' }}) %>
125
- </div>
126
- <div class="mdw-appbar__title">MDW PWA</div>
127
- <div class="mdw-appbar__end">
128
- <%~ includeFile(T, { button: { icon:true, class:'.mdw-layout__sidesheet-toggle', text:'info' }}) %>
129
- </div>
122
+ <div class="mdw-appbar__start">
123
+ <%~ includeFile(T, { button: { icon:true, class:'mdw-layout__navdrawer-toggle material-icons', text:'menu' }}) %>
124
+ </div>
125
+ <div class="mdw-appbar__title">MDW PWA</div>
126
+ <div class="mdw-appbar__end">
127
+ <%~ includeFile(T, { button: { icon:true, class:'mdw-layout__sidesheet-toggle material-icons', text:'info' }}) %>
130
128
  </div>
131
129
  </div>
132
130
  <div class="mdw-layout__banner">
@@ -200,7 +198,7 @@
200
198
  <div class="mdw-list__text-line">Auto Hide</div>
201
199
  <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">Mobile and Tablet</div>
202
200
  </div>
203
- <div class="mdw-divider__vertical mdw-theme" mdw-ink="divider"></div>
201
+ <div class="mdw-divider mdw-theme" mdw-vertical mdw-ink="divider"></div>
204
202
  <div class="mdw-list__secondary" mdw-action>
205
203
  <div class="mdw-selection__icon mdw-theme" mdw-ink="secondary" mdw-switch></div>
206
204
  </div>
@@ -272,7 +270,7 @@
272
270
  <div class="mdw-list__text-line">Mobile</div>
273
271
  <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">Center</div>
274
272
  </div>
275
- <div class="mdw-divider__vertical mdw-theme" mdw-ink="divider"></div>
273
+ <div class="mdw-divider mdw-theme" mdw-vertical mdw-ink="divider"></div>
276
274
  <div class="mdw-list__secondary" mdw-action>
277
275
  <div class="mdw-selection__icon mdw-theme" mdw-ink="secondary" mdw-switch></div>
278
276
  </div>
@@ -284,7 +282,7 @@
284
282
  <div class="mdw-list__text-line">Desktop</div>
285
283
  <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">End</div>
286
284
  </div>
287
- <div class="mdw-divider__vertical mdw-theme" mdw-ink="divider "></div>
285
+ <div class="mdw-divider mdw-theme" mdw-vertical mdw-ink="divider "></div>
288
286
  <div class="mdw-list__secondary" mdw-action>
289
287
  <div class="mdw-selection__icon mdw-theme" mdw-ink="secondary" mdw-switch></div>
290
288
  </div>
@@ -430,8 +428,8 @@
430
428
  <div class="mdw-card__subheader">Supplementary content</div>
431
429
  <div class="mdw-divider mdw-theme" mdw-ink="divider"></div>
432
430
  <div class="mdw-card__actions">
433
- <%~ includeFile(T, { button: { id:'dialog-alert-button', text:' Alert' }}) %>
434
- <%~ includeFile(T, { button: { id:'dialog-confirm-button', text:'Confirm' }}) %>
431
+ <%~ includeFile(T, { button: { id:'dialog-alert-button', text: 'Alert' }}) %>
432
+ <%~ includeFile(T, { button: { id:'dialog-confirm-button', text: 'Confirm' }}) %>
435
433
  </div>
436
434
  </div>
437
435
  </div>
package/docs/pwa/pwa.js CHANGED
@@ -9,9 +9,6 @@ import * as Selection from '../../components/selection/index.js';
9
9
  import * as SelectionRadioGroup from '../../components/selection/radiogroup.js';
10
10
  import * as Snackbar from '../../components/snackbar/index.js';
11
11
  import * as Attributes from '../../core/aria/attributes.js';
12
- import {
13
- iterateArrayLike,
14
- } from '../../core/dom.js';
15
12
  import * as Overlay from '../../core/overlay/index.js';
16
13
  import * as Ripple from '../../core/ripple/index.js';
17
14
 
@@ -26,14 +23,14 @@ Layout.attach();
26
23
 
27
24
  /** @return {void} */
28
25
  function initializeSampleComponents() {
29
- iterateArrayLike(document.getElementsByClassName('mdw-overlay'), Overlay.attach);
30
- iterateArrayLike(document.getElementsByClassName('mdw-ripple'), Ripple.attach);
31
- iterateArrayLike(document.getElementsByClassName('mdw-button'), Button.attach);
32
- iterateArrayLike(document.getElementsByClassName('mdw-selection__radio-group'), SelectionRadioGroup.attach);
33
- iterateArrayLike(document.getElementsByClassName('mdw-selection'), Selection.attach);
34
- iterateArrayLike(document.getElementsByClassName('mdw-list'), List.attach);
35
- iterateArrayLike(document.getElementsByClassName('mdw-dialog'), Dialog.attach);
36
- iterateArrayLike(document.getElementsByClassName('mdw-menu'), Menu.attach);
26
+ for (const element of document.getElementsByClassName('mdw-overlay')) { Overlay.attach(element); }
27
+ for (const element of document.getElementsByClassName('mdw-ripple')) { Ripple.attach(element); }
28
+ for (const element of document.getElementsByClassName('mdw-button')) { Button.attach(element); }
29
+ for (const element of document.getElementsByClassName('mdw-selection__radio-group')) { SelectionRadioGroup.attach(element); }
30
+ for (const element of document.getElementsByClassName('mdw-selection')) { Selection.attach(element); }
31
+ for (const element of document.getElementsByClassName('mdw-list')) { List.attach(element); }
32
+ for (const element of document.getElementsByClassName('mdw-dialog')) { Dialog.attach(element); }
33
+ for (const element of document.getElementsByClassName('mdw-menu')) { Menu.attach(element); }
37
34
  }
38
35
 
39
36
  /**
@@ -150,8 +147,7 @@ function updateFabDesktopOption() {
150
147
  * @return {void}
151
148
  */
152
149
  function onCheckChange(event) {
153
- /** @type {HTMLElement} */
154
- const listContentElement = (event.target);
150
+ const listContentElement = /** @type {HTMLElement} */ (event.target);
155
151
  const checked = event.detail.value === 'true';
156
152
  const { name, value } = listContentElement.dataset;
157
153
  switch (name) {
@@ -220,8 +216,7 @@ function onCheckChange(event) {
220
216
  /** @return {void} */
221
217
  function setupComponentOptions() {
222
218
  document.addEventListener(ListSecondary.SECONDARY_ACTION_EVENT, (event) => {
223
- /** @type {HTMLElement} */
224
- const secondaryElement = (event.target);
219
+ const secondaryElement = /** @type {HTMLElement} */ (event.target);
225
220
  const selectionElement = secondaryElement.parentElement;
226
221
  // inverse check
227
222
  const newValue = !Attributes.isChecked(selectionElement);
@@ -243,8 +238,7 @@ initializeSampleComponents();
243
238
  setupComponentOptions();
244
239
 
245
240
  document.addEventListener(Dialog.CONFIRM_EVENT, (event) => {
246
- /** @type {HTMLElement} */
247
- const dialog = (event.target);
241
+ const dialog = /** @type {HTMLElement} */ (event.target);
248
242
  switch (dialog.id) {
249
243
  case 'dialog-autohide-options':
250
244
  updateAutoHideOption();
@@ -260,32 +254,30 @@ document.addEventListener(Dialog.CONFIRM_EVENT, (event) => {
260
254
  });
261
255
  // Dialog was cancelled
262
256
  document.addEventListener(Dialog.CANCEL_EVENT, (event) => {
263
- /** @type {HTMLElement} */
264
- const dialog = (event.target);
257
+ const dialog = /** @type {HTMLElement} */ (event.target);
265
258
  // Revert selection
266
259
  switch (dialog.id) {
267
260
  case 'dialog-autohide-options':
268
- iterateArrayLike(document.querySelectorAll('[data-name="appbar-autohide"]'), (item) => {
261
+ for (const item of document.querySelectorAll('[data-name="appbar-autohide"]')) {
269
262
  item.setAttribute('aria-checked', (item === checkedAutoHideItem) ? 'true' : 'false');
270
- });
263
+ }
271
264
  break;
272
265
  case 'dialog-fabmobile-options':
273
- iterateArrayLike(document.querySelectorAll('[data-name="fab-mobile"]'), (item) => {
266
+ for (const item of document.querySelectorAll('[data-name="fab-mobile"]')) {
274
267
  item.setAttribute('aria-checked', (item === checkedFabMobileItem) ? 'true' : 'false');
275
- });
268
+ }
276
269
  break;
277
270
  case 'dialog-fabdesktop-options':
278
- iterateArrayLike(document.querySelectorAll('[data-name="fab-desktop"]'), (item) => {
271
+ for (const item of document.querySelectorAll('[data-name="fab-desktop"]')) {
279
272
  item.setAttribute('aria-checked', (item === checkedFabDesktopItem) ? 'true' : 'false');
280
- });
273
+ }
281
274
  break;
282
275
  default:
283
276
  }
284
277
  });
285
278
 
286
279
  document.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
287
- /** @type {HTMLElement} */
288
- const listContentElement = (event.target);
280
+ const listContentElement = /** @type {HTMLElement} */ (event.target);
289
281
 
290
282
  // Before opening dialog, remember which item was checked
291
283
  switch (listContentElement.dataset.name) {
package/docs/pwa/pwa.scss CHANGED
@@ -1,12 +1,12 @@
1
- @use "../../core/theme/_config.scss" with (
2
- $primary: 'deeppurple',
3
- $secondary: 'deeporange',
4
- $warn: 'red',
5
- $background: 'bluegray',
6
- $foreground: (#006064, #E0F7FA),
1
+ @use "../../core/theme" with (
2
+ $alias: (
3
+ 'primary': 'deeppurple',
4
+ 'secondary': 'deeporange',
5
+ 'warn': 'red',
6
+ 'background': 'bluegray',
7
+ )
7
8
  );
8
9
 
9
- @use "../../core/color";
10
10
  @use "../../core/overlay";
11
11
  @use "../../core/ripple";
12
12
 
@@ -24,3 +24,8 @@
24
24
  @use "../../components/selection";
25
25
  @use "../../components/snackbar";
26
26
  @use "../../components/type";
27
+
28
+ :root {
29
+ --mdw-ink-default-light: 0,96,100;
30
+ --mdw-ink-default-dark: 224,247,250;
31
+ }
package/docs/themes/theme-colored.scss CHANGED
@@ -1,17 +1,15 @@
1
1
  @use "../../core/theme/_config.scss" with (
2
- $primary: 'deeppurple',
3
- $secondary: 'deeporange',
4
- $warn: 'red',
5
- $background: 'bluegray',
6
- $foreground: (#006064, #E0F7FA),
7
- $inks: ('primary', 'secondary', 'warn', 'amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal'),
8
- $surfaces: ('primary', 'secondary', 'warn', 'background', 'amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal'),
9
- $fallbacks: false,
2
+ $alias: (
3
+ 'primary': 'deeppurple',
4
+ 'secondary': 'deeporange',
5
+ 'warn': 'red',
6
+ 'background': 'bluegray'
7
+ )
10
8
  );
11
-
12
- @use "./_component-themes.scss";
9
+ @use "../../core/theme/_aliases.scss";
13
10
 
14
11
  :root {
12
+ --mdw-ink-default-light: 0,96,100;
13
+ --mdw-ink-default-dark: 224,247,250;
15
14
  font-family: Merriweather, sans-serif;
16
15
  }
17
-
package/docs/themes/theme-default.scss CHANGED
@@ -1,17 +1,3 @@
1
- @use "../../core/theme/_config.scss" with (
2
- $primary: 'blue',
3
- $secondary: 'pink',
4
- $warn: 'red',
5
- $background: 'gray',
6
- $foreground: (#000, #fff),
7
- $inks: ('primary', 'secondary', 'warn', 'amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal'),
8
- $surfaces: ('primary', 'secondary', 'warn', 'background', 'amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal'),
9
- $fallbacks: false,
10
- );
11
-
12
- @use "./_component-themes.scss";
13
-
14
1
  :root {
15
2
  font-family: Roboto, sans-serif;
16
3
  }
17
-
package/index.scss ADDED
@@ -0,0 +1,27 @@
1
+ @use './core/theme';
2
+ @use './core/overlay';
3
+ @use './core/ripple';
4
+
5
+ @use './components/appbar';
6
+ @use './components/banner';
7
+ @use './components/bottomnav';
8
+ @use './components/button';
9
+ @use './components/card';
10
+ @use './components/chip';
11
+ @use './components/datatable';
12
+ @use './components/dialog';
13
+ @use './components/divider';
14
+ @use './components/elevation';
15
+ @use './components/fab';
16
+ @use './components/grid';
17
+ @use './components/layout';
18
+ @use './components/list';
19
+ @use './components/menu';
20
+ @use './components/progress';
21
+ @use './components/selection';
22
+ @use './components/slider';
23
+ @use './components/snackbar';
24
+ @use './components/tab';
25
+ @use './components/textfield';
26
+ @use './components/tooltip';
27
+ @use './components/type';
package/jsconfig.json CHANGED
@@ -1,12 +1,16 @@
1
1
  {
2
2
  "compilerOptions": {
3
3
  "checkJs": true,
4
+ "module": "esnext",
5
+ "moduleResolution": "node",
4
6
  "noImplicitAny": true,
5
- "target": "ES2020",
6
- "module": "ES2020",
7
- "moduleResolution": "Node",
7
+ "resolveJsonModule": true,
8
+ "strict": false,
9
+ "target": "esnext",
10
+ "allowSyntheticDefaultImports": true
8
11
  },
9
12
  "exclude": [
10
13
  "**/node_modules/*",
14
+ ".history/*"
11
15
  ]
12
16
  }
package/package.json CHANGED
@@ -1,17 +1,16 @@
1
1
  {
2
2
  "name": "@shortfuse/materialdesignweb",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "description": "Material Design for Web",
5
- "main": "index.js",
6
5
  "type": "module",
7
6
  "scripts": {
8
7
  "analyze:docs": "webpack-bundle-analyzer stats.json",
9
- "build:docs": "webpack --config webpack.config.cjs --env target=docs",
8
+ "build:docs": "webpack --config webpack.config.js --env target=docs",
10
9
  "deploy:docs": "scripts/deploy-docs.sh",
11
10
  "dist": "webpack",
12
11
  "pretest": "eslint --ignore-path .gitignore .",
13
- "start:docs": "webpack serve --config webpack.config.cjs --env target=docs --host 0.0.0.0",
14
- "stats:docs": "webpack --config webpack.config.cjs --env target=docs --profile --json > stats.json",
12
+ "start:docs": "webpack serve --config webpack.config.js --env target=docs --host 0.0.0.0",
13
+ "stats:docs": "webpack --config webpack.config.js --env target=docs --profile --json > stats.json",
15
14
  "test": "echo \"Error: no test specified\" && exit 1"
16
15
  },
17
16
  "repository": {
@@ -34,31 +33,43 @@
34
33
  },
35
34
  "homepage": "https://github.com/clshortfuse/materialdesignweb#readme",
36
35
  "devDependencies": {
36
+ "@babel/plugin-proposal-class-properties": "^7.16.7",
37
+ "@babel/plugin-proposal-optional-chaining": "^7.16.7",
38
+ "@babel/plugin-proposal-private-methods": "^7.16.11",
39
+ "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
37
40
  "@babel/preset-env": "^7.12.1",
38
- "@typescript-eslint/eslint-plugin": "5.7.0",
39
- "@typescript-eslint/parser": "5.7.0",
41
+ "@typescript-eslint/eslint-plugin": "5.23",
42
+ "@typescript-eslint/parser": "5.23",
40
43
  "babel-loader": "^8.2.3",
41
44
  "clean-css": "^5.2.2",
42
45
  "css-loader": "^6.5.1",
43
46
  "cssnano": "^5.0.14",
44
- "eslint-config-airbnb-base": "^14.2.0",
47
+ "eslint": "^8.8.0",
48
+ "eslint-config-airbnb-base": "^15.0.0",
49
+ "eslint-plugin-compat": "^4.0.2",
45
50
  "eslint-plugin-eta": "github:clshortfuse/eslint-plugin-eta",
51
+ "eslint-plugin-github": "^4.3.5",
46
52
  "eslint-plugin-import": "^2.22.1",
47
- "eslint-plugin-jsdoc": "^37.2.0",
53
+ "eslint-plugin-jsdoc": "^39.2.9",
54
+ "eslint-plugin-node": "^11.1.0",
55
+ "eslint-plugin-unicorn": "^42.0.0",
48
56
  "eta": "^1.12.0",
49
57
  "extract-loader": "^5.1.0",
50
58
  "fibers": "^5.0.0",
51
59
  "file-loader": "^6.2.0",
52
- "html-loader": "^1.3.2",
60
+ "html-loader": "3.1",
53
61
  "postcss-loader": "^6.2.1",
54
62
  "sass": "^1.27.0",
55
63
  "sass-loader": "^12.4.0",
56
- "stylelint": "^13.7.2",
57
- "stylelint-config-recommended-scss": "^4.2.0",
58
- "stylelint-config-sass-guidelines": "^7.1.0",
59
- "stylelint-scss": "^3.18.0",
64
+ "stylelint": "^14.8.2",
65
+ "stylelint-config-recommended-scss": "^6.0.0",
66
+ "stylelint-config-sass-guidelines": "^9.0.1",
67
+ "stylelint-no-unsupported-browser-features": "github:clshortfuse/stylelint-no-unsupported-browser-features",
68
+ "stylelint-scss": "^4.2.0",
69
+ "stylelint-use-logical-spec": "^3.2.2",
70
+ "terser-webpack-plugin": "^5.3.1",
60
71
  "typescript": "^4.5.4",
61
- "webpack": "^5.4.0",
72
+ "webpack": "^5.72.1",
62
73
  "webpack-bundle-analyzer": "^4.1.0",
63
74
  "webpack-cli": "^4.2.0",
64
75
  "webpack-dev-server": "^4.7.0"
package/tsconfig.json ADDED
@@ -0,0 +1,16 @@
1
+ {
2
+ "compilerOptions": {
3
+ "checkJs": true,
4
+ "module": "esnext",
5
+ "moduleResolution": "node",
6
+ "noImplicitAny": true,
7
+ "resolveJsonModule": true,
8
+ "strict": false,
9
+ "target": "esnext",
10
+ "allowSyntheticDefaultImports": true
11
+ },
12
+ "exclude": [
13
+ "**/node_modules/*",
14
+ ".history/*"
15
+ ]
16
+ }