@operato/attribute 1.2.41

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 (68) hide show
  1. package/.editorconfig +29 -0
  2. package/.storybook/main.js +3 -0
  3. package/.storybook/server.mjs +8 -0
  4. package/CHANGELOG.md +11 -0
  5. package/README.md +75 -0
  6. package/dist/src/grist-editor/index.d.ts +1 -0
  7. package/dist/src/grist-editor/index.js +7 -0
  8. package/dist/src/grist-editor/index.js.map +1 -0
  9. package/dist/src/grist-editor/ox-grist-editor-attribute.d.ts +12 -0
  10. package/dist/src/grist-editor/ox-grist-editor-attribute.js +81 -0
  11. package/dist/src/grist-editor/ox-grist-editor-attribute.js.map +1 -0
  12. package/dist/src/grist-editor/ox-grist-editor-attributes.d.ts +12 -0
  13. package/dist/src/grist-editor/ox-grist-editor-attributes.js +81 -0
  14. package/dist/src/grist-editor/ox-grist-editor-attributes.js.map +1 -0
  15. package/dist/src/grist-editor/ox-popup-attribute.d.ts +13 -0
  16. package/dist/src/grist-editor/ox-popup-attribute.js +92 -0
  17. package/dist/src/grist-editor/ox-popup-attribute.js.map +1 -0
  18. package/dist/src/grist-editor/ox-popup-attributes.d.ts +13 -0
  19. package/dist/src/grist-editor/ox-popup-attributes.js +92 -0
  20. package/dist/src/grist-editor/ox-popup-attributes.js.map +1 -0
  21. package/dist/src/index.d.ts +1 -0
  22. package/dist/src/index.js +2 -0
  23. package/dist/src/index.js.map +1 -0
  24. package/dist/src/ox-attribute-form.d.ts +14 -0
  25. package/dist/src/ox-attribute-form.js +199 -0
  26. package/dist/src/ox-attribute-form.js.map +1 -0
  27. package/dist/src/ox-attribute-view.d.ts +12 -0
  28. package/dist/src/ox-attribute-view.js +176 -0
  29. package/dist/src/ox-attribute-view.js.map +1 -0
  30. package/dist/src/types.d.ts +23 -0
  31. package/dist/src/types.js +2 -0
  32. package/dist/src/types.js.map +1 -0
  33. package/dist/stories/ox-attribute-form.stories.d.ts +18 -0
  34. package/dist/stories/ox-attribute-form.stories.js +80 -0
  35. package/dist/stories/ox-attribute-form.stories.js.map +1 -0
  36. package/dist/stories/ox-attribute-view.stories.d.ts +18 -0
  37. package/dist/stories/ox-attribute-view.stories.js +73 -0
  38. package/dist/stories/ox-attribute-view.stories.js.map +1 -0
  39. package/dist/stories/ox-grist-editor-attribute.stories.d.ts +25 -0
  40. package/dist/stories/ox-grist-editor-attribute.stories.js +310 -0
  41. package/dist/stories/ox-grist-editor-attribute.stories.js.map +1 -0
  42. package/dist/stories/ox-grist-editor-attributes.stories.d.ts +25 -0
  43. package/dist/stories/ox-grist-editor-attributes.stories.js +310 -0
  44. package/dist/stories/ox-grist-editor-attributes.stories.js.map +1 -0
  45. package/dist/tsconfig.tsbuildinfo +1 -0
  46. package/package.json +106 -0
  47. package/src/grist-editor/index.ts +10 -0
  48. package/src/grist-editor/ox-grist-editor-attributes.ts +94 -0
  49. package/src/grist-editor/ox-popup-attributes.ts +93 -0
  50. package/src/index.ts +1 -0
  51. package/src/ox-attribute-form.ts +218 -0
  52. package/src/ox-attribute-view.ts +182 -0
  53. package/src/types.ts +23 -0
  54. package/stories/ox-attribute-form.stories.ts +94 -0
  55. package/stories/ox-attribute-view.stories.ts +87 -0
  56. package/stories/ox-grist-editor-attributes.stories.ts +328 -0
  57. package/themes/app-theme.css +142 -0
  58. package/themes/form-theme.css +75 -0
  59. package/themes/grist-theme.css +194 -0
  60. package/themes/oops-theme.css +26 -0
  61. package/themes/report-theme.css +47 -0
  62. package/translations/en.json +4 -0
  63. package/translations/ko.json +4 -0
  64. package/translations/ms.json +4 -0
  65. package/translations/zh.json +1 -0
  66. package/tsconfig.json +23 -0
  67. package/web-dev-server.config.mjs +27 -0
  68. package/web-test-runner.config.mjs +41 -0
@@ -0,0 +1,75 @@
1
+ body {
2
+ --form-border: none;
3
+ --form-margin: var(--margin-wide);
4
+ --form-max-width: 700px;
5
+ --form-multi-column-max-width: 100%;
6
+ --form-sublabel-font: normal 13px var(--theme-font);
7
+ --form-sublabel-color: var(--secondary-color);
8
+ --form-grid-gap: 12px 5px;
9
+
10
+ --legend-padding: var(--padding-default) 0;
11
+ --legend-font: bold 16px var(--theme-font);
12
+ --legend-text-color: var(--secondary-text-color);
13
+ --legend-border-bottom: 1px solid var(--primary-color);
14
+
15
+ --label-padding: 3px 0;
16
+ --label-font: normal 14px var(--theme-font);
17
+ --label-color: var(--secondary-color);
18
+
19
+ --input-field-border: 1px solid rgba(0, 0, 0, 0.2);
20
+ --input-field-border-radius: var(--border-radius);
21
+ --input-field-padding: 2px 9px;
22
+ --input-field-font: normal 14px var(--theme-font);
23
+
24
+ --search-panel-background-color: rgba(0, 0, 0, 0.1);
25
+ --search-panel-search-iconbutton-size: var(--icon-default-size);
26
+ --search-form-icon-color: var(--primary-color);
27
+ --search-form-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.15);
28
+ --search-form-box-padding: 15px 30px 15px 15px;
29
+ --search-form-background-color: #fff;
30
+ --search-form-narrow-background-color: var(--primary-color);
31
+ --search-form-narrow-text-color: #fff;
32
+
33
+ --file-uploader-border: 1px solid rgba(0, 0, 0, 0.1);
34
+ --file-uploader-background-color: var(--main-section-background-color);
35
+ --file-uploader-font: normal 12px/20px var(--theme-font);
36
+ --file-uploader-color: var(--secondary-color);
37
+ --file-uploader-icon-color: var(--primary-color);
38
+ --file-uploader-candrop-background-color: #fffde9;
39
+ --file-uploader-label-padding: 3px 20px;
40
+ --file-uploader-label-border-radius: var(--border-radius);
41
+ --file-uploader-label-background-color: var(--secondary-color);
42
+ --file-uploader-label-font: normal 12px var(--theme-font);
43
+ --file-uploader-label-color: #fff;
44
+ --file-uploader-li-padding: 2px 5px 0px 5px;
45
+ --file-uploader-li-border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
46
+ --file-uploader-li-icon-margin: 2px 0 2px 5px;
47
+ --file-uploader-li-icon-font: normal 15px var(--mdc-icon-font, 'Material Icons');
48
+ --file-uploader-li-icon-focus-color: var(--primary-color);
49
+ }
50
+
51
+ @media screen and (max-width: 480px) {
52
+ body {
53
+ --label-font: normal 15px var(--theme-font);
54
+ }
55
+ }
56
+
57
+ @media (min-width: 481px) and (max-width: 1024px) {
58
+ body {
59
+ --form-margin: 15px 0;
60
+ --form-multi-column-max-width: 100%;
61
+ --form-container-padding: 0 9px 12px 9px;
62
+ --label-font: normal 14px var(--theme-font);
63
+ --input-field-font: normal 15px var(--theme-font);
64
+ --input-field-padding: 3px 5px;
65
+ }
66
+ }
67
+
68
+ @media only screen and (max-width: 925px) {
69
+ body {
70
+ --form-margin: 14px 0;
71
+ --form-multi-column-max-width: 100%;
72
+ --form-container-padding: 0 9px 12px 9px;
73
+ --input-field-padding: 3px 5px;
74
+ }
75
+ }
@@ -0,0 +1,194 @@
1
+ body {
2
+ --grid-container-border-color: 1px solid rgba(0, 0, 0, 0.09);
3
+ --grid-container-border-width: 1px 0;
4
+
5
+ --grist-background-color: var(--main-section-background-color);
6
+ --grist-title-margin: 0 0 0 10px;
7
+ --grist-title-border: none;
8
+ --grist-title-font: bold 16px var(--theme-font);
9
+ --grist-title-color: var(--secondary-color);
10
+ --grist-title-font: bold 16px var(--theme-font);
11
+ --grist-title-icon-color: var(--primary-color);
12
+ --grist-title-icon-margin: 0 3px 2px 0;
13
+ --grist-title-icon-size: var(--fontsize-default);
14
+ --grist-title-with-grid-padding: 0;
15
+
16
+ --grist-object-editor-font: normal 1em var(--theme-font);
17
+ --grist-object-editor-color: var(--secondary-color);
18
+
19
+ --grist-input-zoom: 1;
20
+ --grist-input-progress-border: 1px solid rgba(255, 255, 255, 0.5);
21
+ --grist-input-progress-background: rgba(121, 110, 110, 0.1);
22
+ --grist-input-progress-bar-background: #4ac5fd;
23
+ --grist-input-progress-bar-color: var(--theme-white-color);
24
+
25
+ --grid-header-background-color: transparent;
26
+ --grid-header-top-border: 2px solid rgba(var(--secondary-color-rgb), 0.7);
27
+ --grid-header-bottom-border: var(--grid-container-border-color);
28
+ --grid-header-border-color: rgba(var(--primary-color-rgb), 0.3);
29
+ --grid-header-padding: var(--padding-default) 0 var(--padding-narrow) var(--padding-default);
30
+ --grid-header-sorter-size: 18px;
31
+ --grid-header-splitter-border: var(--grid-container-border-color);
32
+ --grid-header-splitter-border-hover: 1px solid var(--primary-color);
33
+ --grid-header-color: rgba(var(--secondary-color-rgb), 0.8);
34
+ --grid-header-font: bold var(--fontsize-small) var(--theme-font);
35
+ --grid-header-filter-title-color: var(--primary-text-color);
36
+ --grid-header-filter-title-font: normal 12px var(--theme-font);
37
+ --grid-header-filter-title-icon-color: var(--primary-color);
38
+
39
+ --grid-record-background-color: var(--theme-white-color);
40
+ --grid-record-odd-background-color: rgba(255, 255, 255, 0.4);
41
+ --grid-record-padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
42
+ --grid-record-color: var(--secondary-color);
43
+ --grid-record-color-hover: var(--primary-color);
44
+ --grid-record-wide-fontsize: var(--fontsize-small);
45
+ --grid-record-selected-background-color: #f1f8e9;
46
+ --grid-record-selected-color: var(--grid-record-color);
47
+ --grid-record-focused-background-color: rgba(var(--primary-color-rgb), 0.2);
48
+ --grid-record-focused-border: 1px solid var(--primary-color);
49
+ --grid-record-focused-cell-background-color: rgba(var(--primary-color-rgb), 0.25);
50
+ --grid-record-focused-cell-border: 1px dashed var(--primary-color);
51
+ --grid-record-focused-color: var(--grid-record-color);
52
+ --grid-record-focused-box-shadow: 0px 2px 0px 0px rgb(0 0 0 / 10%);
53
+ --grid-record-emphasized-background-color: var(--primary-color);
54
+ --grid-record-emphasized-color: var(--theme-white-color);
55
+ --grid-record-editing-background-color: var(--theme-white-color);
56
+ --grid-record-editing-border: 1px dashed rgba(var(--primary-color-rgb), 0.4);
57
+ --grid-record-fontsize: var(--fontsize-large);
58
+ --grid-record-border-bottom: var(--grid-container-border-color);
59
+
60
+ --grid-record-dirty-border-top: 24px solid rgba(var(--primary-color-rgb), 0.6);
61
+ --grid-record-dirty-border-left: 24px solid transparent;
62
+ --grid-record-dirty-icon-font: bold 10px/12px var(--mdc-icon-font, 'Material Icons');
63
+ --grid-record-dirty-icon-size: var(--fontsize-large);
64
+ --grid-record-dirty-color: var(--theme-white-color);
65
+
66
+ --grid-footer-background-color: transparent;
67
+ --grid-footer-font-size: var(--fontsize-default);
68
+ --grid-footer-color: var(--secondary-color);
69
+ --grid-footer-limit-color: rgba(var(--secondary-color-rgb), 0.6);
70
+ --grid-footer-inactive-color: var(--grid-footer-limit-color);
71
+ --grid-footer-padding: var(--padding-default) var(--padding-narrow);
72
+
73
+ --data-list-background-color: var(--main-section-background-color);
74
+ --data-list-item-margin: var(--margin-default) 0 var(--margin-default) var(--margin-wide);
75
+ --data-list-item-padding: var(--padding-default) var(--padding-wide);
76
+ --data-list-item-border-bottom: var(--grid-container-border-color);
77
+ --data-list-item-name-font: bold 1em/1em var(--theme-font);
78
+ --data-list-item-name-color: var(--secondary-color);
79
+ --data-list-item-disc-font: normal 0.9em/1em var(--theme-font);
80
+ --data-list-item-disc-color: var(--secondary-text-color);
81
+ --data-list-item-etc-label-font: bold 1em/1em var(--theme-font);
82
+ --data-list-item-etc-font: normal 0.8em/1em var(--theme-font);
83
+ --data-list-item-etc-color: #585858;
84
+ --data-list-item-icon-font: normal 1em/1em;
85
+ --data-list-item-icon-color: var(--secondary-text-color);
86
+ --data-list-selected-background-color: var(--grid-record-selected-background-color);
87
+ --data-list-fab-position-horizontal: 15px;
88
+ --data-list-fab-position-vertical: 15px;
89
+ --data-list-fab-color: var(--primary-color);
90
+ --data-list-fab-shadow: var(--box-shadow);
91
+
92
+ --data-card-background-color: var(--main-section-background-color);
93
+ --data-card-record-card-background-color: var(--theme-white-color);
94
+ --data-card-record-card-border: var(--border-dark-color);
95
+ --data-card-record-card-border-hover: 1px solid var(--primary-color);
96
+ --data-card-record-card-boxshadow-hover: 1px 1px 2px 1px rgba(0, 0, 0, 0.15);
97
+ --data-card-record-card-selected-border: 1px solid var(--primary-color);
98
+ --data-card-record-card-border-radius: var(--border-radius);
99
+ --data-card-item-margin: var(--margin-default) 0 var(--margin-default) var(--margin-wide);
100
+ --data-card-item-padding: var(--padding-default) var(--padding-wide);
101
+ --data-card-item-border-bottom: var(--grid-container-border-color);
102
+ --data-card-item-name-font: bold 1.2em/1em var(--theme-font);
103
+ --data-card-item-name-color: var(--secondary-text-color);
104
+ --data-card-item-name-label-font: normal 0.65em/0.8em var(--theme-font);
105
+ --data-card-item-name-label-color: rgba(var(--secondary-color-rgb), 0.8);
106
+ --data-card-item-disc-font: normal 0.9em/1em var(--theme-font);
107
+ --data-card-item-disc-color: var(--primary-color);
108
+ --data-card-item-etc-label-font: normal 1em/1em var(--theme-font);
109
+ --data-card-item-etc-font: bold 0.8em/1em var(--theme-font);
110
+ --data-card-item-etc-color: var(--secondary-color);
111
+ --data-card-item-icon-font: normal 1em/1em;
112
+ --data-card-item-icon-color: var(--secondary-text-color);
113
+ --data-card-item-btn-border: var(--border-dark-color);
114
+ --data-card-item-btn-border-radius: var(--border-radius);
115
+ --data-card-item-btn-padding: var(--padding-narrow);
116
+ --data-card-selected-background-color: var(--grid-record-selected-background-color);
117
+ --data-card-fab-position-horizontal: 15px;
118
+ --data-card-fab-position-vertical: 15px;
119
+ --data-card-fab-color: var(--primary-color);
120
+ --data-card-fab-shadow: var(--box-shadow);
121
+ --data-card-template: repeat(auto-fit, minmax(32%, auto));
122
+ --data-card-thumbnail-height: 140px;
123
+ --data-card-thumbnail-border-bottom: var(--border-dark-color);
124
+ --data-card-attachimg-height: 70px;
125
+
126
+ --record-view-background-color: var(--main-section-background-color);
127
+ --record-view-gap: var(--margin-narrow) 0;
128
+ --record-view-padding: var(--padding-default);
129
+ --record-view-label-font: bold 15px var(--theme-font);
130
+ --record-view-label-color: var(--secondary-color);
131
+ --record-view-label-icon-size: var(--fontsize-small);
132
+ --record-view-font: normal 15px var(--theme-font);
133
+ --record-view-color: var(--secondary-color);
134
+ --record-view-focus-color: var(--primary-color);
135
+ --record-view-border-bottom: 1px solid rgba(0, 0, 0, 0.1);
136
+ --record-view-edit-border-bottom: 2px solid var(--primary-color);
137
+ --record-view-item-padding: var(--padding-default);
138
+
139
+ --record-view-footer-background: #586272;
140
+ --record-view-footer-button-border: 1px solid rgba(0, 0, 0, 0.3);
141
+ --record-view-footer-button-border-width: 0 0 0 1px;
142
+ --record-view-footer-button-font: 17px;
143
+ --record-view-footer-button-color: var(--theme-white-color);
144
+ --record-view-footer-iconbutton-size: 35px;
145
+ --record-view-footer-focus-background: var(--primary-color);
146
+
147
+ --ox-grist-padding: var(--padding-default) var(--padding-default) 0 var(--padding-default);
148
+ }
149
+
150
+ @media print {
151
+ body {
152
+ --grist-input-zoom: 0.7;
153
+ }
154
+ }
155
+
156
+ @media only screen and (max-width: 460px) {
157
+ body {
158
+ --record-view-label-font: bold 15px/32px var(--theme-font);
159
+ --record-view-font: normal 15px/32px var(--theme-font);
160
+ --data-card-template: repeat(auto-fit, minmax(90%, auto));
161
+ --ox-grist-padding: 0;
162
+ }
163
+ }
164
+ @media (min-width: 461px) and (max-width: 700px) {
165
+ body {
166
+ --data-card-template: repeat(auto-fit, minmax(45%, auto));
167
+ --ox-grist-padding: 0;
168
+ }
169
+ }
170
+ @media (min-width: 461px) and (max-width: 1024px) {
171
+ body {
172
+ --data-card-create-form-padding: 7px;
173
+ }
174
+ }
175
+ @media (min-width: 1025px) and (max-width: 1400px) {
176
+ body {
177
+ --data-card-template: repeat(auto-fit, minmax(23%, auto));
178
+ }
179
+ }
180
+ @media (min-width: 1401px) and (max-width: 1800px) {
181
+ body {
182
+ --data-card-template: repeat(auto-fit, minmax(18%, auto));
183
+ }
184
+ }
185
+ @media (min-width: 1801px) and (max-width: 2200px) {
186
+ body {
187
+ --data-card-template: repeat(auto-fit, minmax(15%, auto));
188
+ }
189
+ }
190
+ @media only screen and (min-width: 2201px) {
191
+ body {
192
+ --data-card-template: repeat(auto-fit, minmax(13%, auto));
193
+ }
194
+ }
@@ -0,0 +1,26 @@
1
+ body {
2
+ /* oops spinner style */
3
+
4
+ --oops-spinner-image: url(/assets/images/spinner.png);
5
+
6
+ /* oops note style */
7
+ --oops-note-icon-font: normal 24px var(--mdc-icon-font, 'Material Icons');
8
+ --oops-note-icon-color: rgba(var(--secondary-color-rgb), 0.3);
9
+ --oops-note-icon-border: 2px solid rgba(var(--secondary-color-rgb), 0.3);
10
+ --oops-note-icon-border-radius: 50px;
11
+ --oops-note-icon-padding: var(--padding-default);
12
+ --oops-note-title-margin: 7px 0 2px 0;
13
+ --oops-note-title-font: bold 14px var(--theme-font);
14
+ --oops-note-title-color: var(--secondary-color);
15
+ --oops-note-description-font: normal 12px var(--theme-font);
16
+ --oops-note-description-color: var(--primary-color);
17
+ }
18
+ @media only screen and (max-width: 460px) {
19
+ body {
20
+ --oops-note-icon-padding: var(--padding-narrow);
21
+ --oops-note-icon-font: normal 18px var(--mdc-icon-font, 'Material Icons');
22
+ --oops-note-title-font: bold 13px var(--theme-font);
23
+ --oops-note-title-margin: var(--margin-narrow) 0 2px 0;
24
+ --oops-note-description-font: normal 0px var(--theme-font);
25
+ }
26
+ }
@@ -0,0 +1,47 @@
1
+ body {
2
+ --report-background-color: var(--main-section-background-color);
3
+ --report-padding: 15px;
4
+ --report-title-margin: 0 0 0 10px;
5
+ --report-title-border: none;
6
+ --report-title-color: var(--secondary-color);
7
+ --report-title-icon-color: var(--primary-color);
8
+ --report-title-icon-margin: 0 3px 2px 0;
9
+ --report-title-icon-size: 14px;
10
+ --report-title-with-grid-padding: 0;
11
+ --report-component-border-radius: var(--border-radius);
12
+
13
+ --report-header-background-color: rgba(var(--primary-color-rgb), 0.05);
14
+ --report-header-border: 1px solid var(--report-header-border-color);
15
+ --report-header-border-color: rgba(var(--primary-color-rgb), 0.3);
16
+ --report-header-padding: 5px 0 5px 5px;
17
+ --report-header-color: var(--secondary-text-color);
18
+ --report-header-font: normal 1em/1.5 var(--theme-font);
19
+ --report-header-fontsize: 13px;
20
+
21
+ --report-record-background-color: #fff;
22
+ --report-record-odd-background-color: #f6f6f6;
23
+ --report-record-field-padding: 7px 10px;
24
+ --report-record-field-border-bottom: 1px solid rgba(0, 0, 0, 0.1);
25
+ --report-record-wide-fontsize: 13px;
26
+ --report-record-focused-background-color: #ffde3b47;
27
+ --report-record-focused-border: 1px dashed rgba(0, 0, 0, 0.5);
28
+
29
+ --report-totalized-background-color: #efefef;
30
+ --report-totalized-border: 1px solid rgba(0, 0, 0, 0.1);
31
+ --report-totalized-color: var(--secondary-text-color);
32
+
33
+ --report-grouped-background-color: #607d8bbf;
34
+ --report-grouped-border: 1px solid rgba(0, 0, 0, 0.2);
35
+ --report-grouped-color: #fff;
36
+ }
37
+
38
+ @media print {
39
+ body {
40
+ --report-header-padding: 5px;
41
+ --report-record-field-padding: 5px;
42
+ --report-record-wide-fontsize: 10px;
43
+ --report-grouped-background-color: #d7d7d7;
44
+ --report-grouped-color: #000;
45
+ --report-totalized-color: #000;
46
+ }
47
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "field.entity": "entity",
3
+ "field.attributes": "attributes"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "field.entity": "엔티티",
3
+ "field.attributes": "속성"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "field.entity": "entity",
3
+ "field.attributes": "attributes"
4
+ }
@@ -0,0 +1 @@
1
+ {}
package/tsconfig.json ADDED
@@ -0,0 +1,23 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "es2018",
4
+ "module": "esnext",
5
+ "moduleResolution": "node",
6
+ "noEmitOnError": true,
7
+ "lib": ["es2017", "dom"],
8
+ "strict": true,
9
+ "esModuleInterop": false,
10
+ "allowSyntheticDefaultImports": true,
11
+ "experimentalDecorators": true,
12
+ "useDefineForClassFields": false,
13
+ "importHelpers": true,
14
+ "outDir": "dist",
15
+ "sourceMap": true,
16
+ "inlineSources": true,
17
+ "rootDir": "./",
18
+ "declaration": true,
19
+ "incremental": true,
20
+ "types": ["node", "mocha"]
21
+ },
22
+ "include": ["**/*.ts"]
23
+ }
@@ -0,0 +1,27 @@
1
+ // import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
2
+
3
+ /** Use Hot Module replacement by adding --hmr to the start command */
4
+ const hmr = process.argv.includes('--hmr');
5
+
6
+ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
7
+ open: '/demo/',
8
+ /** Use regular watch mode if HMR is not enabled. */
9
+ watch: !hmr,
10
+ /** Resolve bare module imports */
11
+ nodeResolve: {
12
+ exportConditions: ['browser', 'development'],
13
+ },
14
+
15
+ /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
16
+ // esbuildTarget: 'auto'
17
+
18
+ /** Set appIndex to enable SPA routing */
19
+ // appIndex: 'demo/index.html',
20
+
21
+ plugins: [
22
+ /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
23
+ // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
24
+ ],
25
+
26
+ // See documentation for all available options
27
+ });
@@ -0,0 +1,41 @@
1
+ // import { playwrightLauncher } from '@web/test-runner-playwright';
2
+
3
+ const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
4
+
5
+ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
6
+ /** Test files to run */
7
+ files: 'dist/test/**/*.test.js',
8
+
9
+ /** Resolve bare module imports */
10
+ nodeResolve: {
11
+ exportConditions: ['browser', 'development'],
12
+ },
13
+
14
+ /** Filter out lit dev mode logs */
15
+ filterBrowserLogs(log) {
16
+ for (const arg of log.args) {
17
+ if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
18
+ return false;
19
+ }
20
+ }
21
+ return true;
22
+ },
23
+
24
+ /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
25
+ // esbuildTarget: 'auto',
26
+
27
+ /** Amount of browsers to run concurrently */
28
+ // concurrentBrowsers: 2,
29
+
30
+ /** Amount of test files per browser to test concurrently */
31
+ // concurrency: 1,
32
+
33
+ /** Browsers to run tests on */
34
+ // browsers: [
35
+ // playwrightLauncher({ product: 'chromium' }),
36
+ // playwrightLauncher({ product: 'firefox' }),
37
+ // playwrightLauncher({ product: 'webkit' }),
38
+ // ],
39
+
40
+ // See documentation for all available options
41
+ });