@operato/dataset 2.0.0-alpha.99 → 2.0.0-beta.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 (38) hide show
  1. package/CHANGELOG.md +406 -0
  2. package/dist/src/grist-editor/ox-popup-data-item-spec.js +2 -2
  3. package/dist/src/grist-editor/ox-popup-data-item-spec.js.map +1 -1
  4. package/dist/src/ox-data-entry-form.js +3 -3
  5. package/dist/src/ox-data-entry-form.js.map +1 -1
  6. package/dist/src/ox-data-entry-view.js +2 -2
  7. package/dist/src/ox-data-entry-view.js.map +1 -1
  8. package/dist/src/ox-data-item-spec.js +3 -3
  9. package/dist/src/ox-data-item-spec.js.map +1 -1
  10. package/dist/src/ox-data-ooc-badge.js +6 -3
  11. package/dist/src/ox-data-ooc-badge.js.map +1 -1
  12. package/dist/src/ox-data-ooc-correction-part.js +5 -5
  13. package/dist/src/ox-data-ooc-correction-part.js.map +1 -1
  14. package/dist/src/ox-data-ooc-history.js +5 -5
  15. package/dist/src/ox-data-ooc-history.js.map +1 -1
  16. package/dist/src/ox-data-sample-subgroup-view.js +1 -1
  17. package/dist/src/ox-data-sample-subgroup-view.js.map +1 -1
  18. package/dist/src/ox-data-sample-view.js +2 -2
  19. package/dist/src/ox-data-sample-view.js.map +1 -1
  20. package/dist/src/ox-data-summary-view.js +2 -2
  21. package/dist/src/ox-data-summary-view.js.map +1 -1
  22. package/dist/stories/ox-grist-editor-data-item-spec.stories.js +6 -6
  23. package/dist/stories/ox-grist-editor-data-item-spec.stories.js.map +1 -1
  24. package/dist/tsconfig.tsbuildinfo +1 -1
  25. package/package.json +12 -12
  26. package/src/grist-editor/ox-popup-data-item-spec.ts +2 -2
  27. package/src/ox-data-entry-form.ts +3 -3
  28. package/src/ox-data-entry-view.ts +2 -2
  29. package/src/ox-data-item-spec.ts +3 -3
  30. package/src/ox-data-ooc-badge.ts +6 -3
  31. package/src/ox-data-ooc-correction-part.ts +5 -5
  32. package/src/ox-data-ooc-history.ts +5 -5
  33. package/src/ox-data-sample-subgroup-view.ts +1 -1
  34. package/src/ox-data-sample-view.ts +2 -2
  35. package/src/ox-data-summary-view.ts +2 -2
  36. package/stories/ox-grist-editor-data-item-spec.stories.ts +6 -6
  37. package/themes/app-theme.css +1 -1
  38. package/themes/form-theme.css +15 -15
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@operato/dataset",
3
3
  "description": "WebApplication dataset supporting components following open-wc recommendations",
4
4
  "author": "heartyoh",
5
- "version": "2.0.0-alpha.99",
5
+ "version": "2.0.0-beta.0",
6
6
  "main": "dist/src/index.js",
7
7
  "module": "dist/src/index.js",
8
8
  "exports": {
@@ -106,16 +106,16 @@
106
106
  },
107
107
  "dependencies": {
108
108
  "@material/web": "^1.4.0",
109
- "@operato/data-grist": "^2.0.0-alpha.99",
110
- "@operato/graphql": "^2.0.0-alpha.57",
111
- "@operato/grist-editor": "^2.0.0-alpha.99",
112
- "@operato/i18n": "^2.0.0-alpha.59",
113
- "@operato/input": "^2.0.0-alpha.99",
114
- "@operato/popup": "^2.0.0-alpha.99",
115
- "@operato/property-editor": "^2.0.0-alpha.99",
116
- "@operato/shell": "^2.0.0-alpha.99",
117
- "@operato/styles": "^2.0.0-alpha.99",
118
- "@operato/utils": "^2.0.0-alpha.68",
109
+ "@operato/data-grist": "^2.0.0-beta.0",
110
+ "@operato/graphql": "^2.0.0-beta.0",
111
+ "@operato/grist-editor": "^2.0.0-beta.0",
112
+ "@operato/i18n": "^2.0.0-beta.0",
113
+ "@operato/input": "^2.0.0-beta.0",
114
+ "@operato/popup": "^2.0.0-beta.0",
115
+ "@operato/property-editor": "^2.0.0-beta.0",
116
+ "@operato/shell": "^2.0.0-beta.0",
117
+ "@operato/styles": "^2.0.0-beta.0",
118
+ "@operato/utils": "^2.0.0-beta.0",
119
119
  "lit": "^3.1.2"
120
120
  },
121
121
  "devDependencies": {
@@ -150,5 +150,5 @@
150
150
  "prettier --write"
151
151
  ]
152
152
  },
153
- "gitHead": "8641cdd871ffdbef9e5b2a79bbf3862fb0422e3e"
153
+ "gitHead": "1c7306d2c3170b773e16d5d4ef79b490584d5441"
154
154
  }
package/src/grist-editor/ox-popup-data-item-spec.ts CHANGED
@@ -20,7 +20,7 @@ export class OxPopupDataItemSpec extends LitElement {
20
20
  display: flex;
21
21
  flex-direction: column;
22
22
 
23
- background-color: #fff;
23
+ background-color: var(--md-sys-color-surface);
24
24
 
25
25
  width: var(--overlay-center-normal-width, 50%);
26
26
  height: var(--overlay-center-normal-height, 50%);
@@ -39,7 +39,7 @@ export class OxPopupDataItemSpec extends LitElement {
39
39
  align-items: center;
40
40
  justify-content: center;
41
41
 
42
- color: var(--primary-color);
42
+ color: var(--md-sys-color-on-primary-container);
43
43
  }
44
44
  `
45
45
  ]
package/src/ox-data-entry-form.ts CHANGED
@@ -46,10 +46,10 @@ export class OxDataEntryForm extends LitElement {
46
46
 
47
47
  grid-gap: 9px;
48
48
  align-items: center;
49
- margin-bottom: var(--margin-default);
49
+ margin-bottom: var(--spacing-medium);
50
50
 
51
51
  &:nth-child(odd) {
52
- background-color: var(--main-section-background-color);
52
+ background-color: var(--md-sys-color-background);
53
53
  padding: var(--padding-default) 0;
54
54
  }
55
55
  }
@@ -113,7 +113,7 @@ export class OxDataEntryForm extends LitElement {
113
113
 
114
114
  grid-gap: 9px;
115
115
  align-items: center;
116
- margin-bottom: var(--margin-default);
116
+ margin-bottom: var(--spacing-medium);
117
117
  }
118
118
 
119
119
  div[name] {
package/src/ox-data-entry-view.ts CHANGED
@@ -33,7 +33,7 @@ export class OxDataEntryView extends LitElement {
33
33
  margin: var(--page-description-margin);
34
34
  opacity: 0.7;
35
35
  font: var(--page-description-font);
36
- color: var(--secondary-color);
36
+ color: var(--md-sys-color-on-secondary-container);
37
37
  text-transform: capitalize;
38
38
  }
39
39
  [page-description] * {
@@ -47,7 +47,7 @@ export class OxDataEntryView extends LitElement {
47
47
 
48
48
  table {
49
49
  border-collapse: collapse;
50
- margin-bottom: var(--margin-default);
50
+ margin-bottom: var(--spacing-medium);
51
51
  }
52
52
  th {
53
53
  padding: var(--th-padding);
package/src/ox-data-item-spec.ts CHANGED
@@ -30,10 +30,10 @@ export class OxDataItemSpec extends LitElement {
30
30
 
31
31
  grid-gap: 9px;
32
32
  align-items: center;
33
- margin-bottom: var(--margin-default);
33
+ margin-bottom: var(--spacing-medium);
34
34
  }
35
35
  label:nth-child(odd) {
36
- background-color: var(--main-section-background-color);
36
+ background-color: var(--md-sys-color-background);
37
37
  padding: var(--padding-default) 0;
38
38
  }
39
39
  div[name] {
@@ -75,7 +75,7 @@ export class OxDataItemSpec extends LitElement {
75
75
 
76
76
  grid-gap: 9px;
77
77
  align-items: center;
78
- margin-bottom: var(--margin-default);
78
+ margin-bottom: var(--spacing-medium);
79
79
  }
80
80
 
81
81
  div[name] {
package/src/ox-data-ooc-badge.ts CHANGED
@@ -19,6 +19,9 @@ export class OxDataOocBadge extends LitElement {
19
19
  --md-icon-size: 80px;
20
20
  opacity: 0.4;
21
21
  color: var(--primary-background-color);
22
+ }
23
+
24
+ md-icon[filled] {
22
25
  font-variation-settings: 'FILL' 1;
23
26
  }
24
27
 
@@ -28,13 +31,13 @@ export class OxDataOocBadge extends LitElement {
28
31
  left: 0;
29
32
  right: 0;
30
33
  font-size: 10px;
31
- color: var(--theme-white-color);
34
+ color: var(--md-sys-color-surface);
32
35
  }
33
36
 
34
37
  [field-state] {
35
38
  display: block;
36
39
  border-radius: 4px;
37
- background-color: var(--primary-color);
40
+ background-color: var(--md-sys-color-on-primary-container);
38
41
  box-shadow: var(--box-shadow);
39
42
  margin-top: var(--margin-narrow);
40
43
  padding: 1px 3px;
@@ -57,7 +60,7 @@ export class OxDataOocBadge extends LitElement {
57
60
 
58
61
  return html`
59
62
  <h3 ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>
60
- <md-icon>shield</md-icon>
63
+ <md-icon filled>shield</md-icon>
61
64
  <div>DATA OOC <span field-state>${state || ''}</span></div>
62
65
  </h3>
63
66
  `
package/src/ox-data-ooc-correction-part.ts CHANGED
@@ -32,21 +32,21 @@ export class OxDataOocCorrectionPart extends LitElement {
32
32
 
33
33
  [field-state] {
34
34
  border-radius: 2px;
35
- background-color: var(--primary-color);
36
- margin-left: var(--margin-default);
35
+ background-color: var(--md-sys-color-on-primary-container);
36
+ margin-left: var(--spacing-medium);
37
37
  padding: 1px 2px;
38
38
  font-size: 0.7rem;
39
- color: var(--theme-white-color);
39
+ color: var(--md-sys-color-surface);
40
40
  }
41
41
 
42
42
  p {
43
- background-color: var(--theme-white-color);
43
+ background-color: var(--md-sys-color-surface);
44
44
  box-shadow: var(--box-shadow);
45
45
  border-radius: var(--border-radius);
46
46
  margin: var(--page-description-margin);
47
47
  padding: var(--padding-default);
48
48
  font: var(--page-description-font);
49
- color: var(--secondary-color);
49
+ color: var(--md-sys-color-on-secondary-container);
50
50
  }
51
51
 
52
52
  md-icon {
package/src/ox-data-ooc-history.ts CHANGED
@@ -16,21 +16,21 @@ export class OxDataOocHistory extends LitElement {
16
16
 
17
17
  [field-state] {
18
18
  border-radius: 2px;
19
- background-color: var(--primary-color);
20
- margin-left: var(--margin-default);
19
+ background-color: var(--md-sys-color-on-primary-container);
20
+ margin-left: var(--spacing-medium);
21
21
  padding: 1px 2px;
22
22
  font-size: 0.7rem;
23
- color: var(--theme-white-color);
23
+ color: var(--md-sys-color-surface);
24
24
  }
25
25
 
26
26
  p {
27
- background-color: var(--theme-white-color);
27
+ background-color: var(--md-sys-color-surface);
28
28
  box-shadow: var(--box-shadow);
29
29
  border-radius: var(--border-radius);
30
30
  margin: var(--page-description-margin);
31
31
  padding: var(--padding-default);
32
32
  font: var(--page-description-font);
33
- color: var(--secondary-color);
33
+ color: var(--md-sys-color-on-secondary-container);
34
34
  }
35
35
 
36
36
  md-icon {
package/src/ox-data-sample-subgroup-view.ts CHANGED
@@ -26,7 +26,7 @@ export class OxDataSampleSubgroupView extends LitElement {
26
26
 
27
27
  table {
28
28
  border-collapse: collapse;
29
- margin-bottom: var(--margin-default);
29
+ margin-bottom: var(--spacing-medium);
30
30
  }
31
31
 
32
32
  th {
package/src/ox-data-sample-view.ts CHANGED
@@ -34,7 +34,7 @@ export class OxDataSampleView extends LitElement {
34
34
  margin: var(--page-description-margin);
35
35
  opacity: 0.7;
36
36
  font: var(--page-description-font);
37
- color: var(--secondary-color);
37
+ color: var(--md-sys-color-on-secondary-container);
38
38
  text-transform: capitalize;
39
39
  }
40
40
  [page-description] * {
@@ -48,7 +48,7 @@ export class OxDataSampleView extends LitElement {
48
48
 
49
49
  table {
50
50
  border-collapse: collapse;
51
- margin-bottom: var(--margin-default);
51
+ margin-bottom: var(--spacing-medium);
52
52
  }
53
53
  th {
54
54
  padding: var(--th-padding);
package/src/ox-data-summary-view.ts CHANGED
@@ -33,7 +33,7 @@ export class OxDataSummaryView extends LitElement {
33
33
  margin: var(--page-description-margin);
34
34
  opacity: 0.7;
35
35
  font: var(--page-description-font);
36
- color: var(--secondary-color);
36
+ color: var(--md-sys-color-on-secondary-container);
37
37
  text-transform: capitalize;
38
38
  }
39
39
  [page-description] * {
@@ -47,7 +47,7 @@ export class OxDataSummaryView extends LitElement {
47
47
 
48
48
  table {
49
49
  border-collapse: collapse;
50
- margin-bottom: var(--margin-default);
50
+ margin-bottom: var(--spacing-medium);
51
51
  }
52
52
  th {
53
53
  padding: var(--th-padding);
package/stories/ox-grist-editor-data-item-spec.stories.ts CHANGED
@@ -90,7 +90,7 @@ class GristDemo extends LitElement {
90
90
  #tailer {
91
91
  display: flex;
92
92
  flex-direction: row;
93
- margin: 0 var(--margin-default);
93
+ margin: 0 var(--spacing-medium);
94
94
  }
95
95
 
96
96
  #tailer a {
@@ -98,7 +98,7 @@ class GristDemo extends LitElement {
98
98
  margin: 0 var(--margin-narrow);
99
99
  border-right: 1px solid rgba(0, 0, 0, 0.1);
100
100
  font-size: var(--fontsize-default);
101
- color: var(--primary-color);
101
+ color: var(--md-sys-color-on-primary-container);
102
102
  }
103
103
  `
104
104
  ]
@@ -356,7 +356,7 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
356
356
  flex-direction: row;
357
357
  align-items: center;
358
358
  padding: var(--padding-default) var(--padding-wide);
359
- background-color: var(--theme-white-color);
359
+ background-color: var(--md-sys-color-surface);
360
360
  box-shadow: var(--box-shadow);
361
361
 
362
362
  --md-icon-size: 24px;
@@ -367,11 +367,11 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
367
367
  }
368
368
  #sorters {
369
369
  margin-left: auto;
370
- margin-right: var(--margin-default);
370
+ margin-right: var(--spacing-medium);
371
371
  padding-left: var(--padding-narrow);
372
372
  border-bottom: var(--border-dark-color);
373
373
  position: relative;
374
- color: var(--secondary-color);
374
+ color: var(--md-sys-color-on-secondary-container);
375
375
  font-size: var(--fontsize-default);
376
376
  user-select: none;
377
377
  }
@@ -388,7 +388,7 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
388
388
  }
389
389
 
390
390
  #filters * {
391
- margin-right: var(--margin-default);
391
+ margin-right: var(--spacing-medium);
392
392
  }
393
393
 
394
394
  @media only screen and (max-width: 460px) {
package/themes/app-theme.css CHANGED
@@ -121,7 +121,7 @@ body {
121
121
 
122
122
  /* form style */
123
123
  --label-font: normal var(--fontsize-default) var(--theme-font);
124
- --label-color: var(--secondary-color);
124
+ --label-color: var(--md-sys-color-on-surface);
125
125
  --label-text-transform: capitalize;
126
126
  --input-margin: var(--margin-narrow) 0;
127
127
  --input-padding: var(--padding-default);
package/themes/form-theme.css CHANGED
@@ -1,20 +1,20 @@
1
1
  body {
2
2
  --form-border: none;
3
- --form-margin: var(--margin-wide);
3
+ --form-margin: var(--spacing-medium);
4
4
  --form-max-width: 700px;
5
5
  --form-multi-column-max-width: 100%;
6
6
  --form-sublabel-font: normal 13px var(--theme-font);
7
- --form-sublabel-color: var(--secondary-color);
7
+ --form-sublabel-color: var(--md-sys-color-secondary);
8
8
  --form-grid-gap: 12px 5px;
9
9
 
10
- --legend-padding: var(--padding-default) 0;
10
+ --legend-padding: var(--spacing-medium) 0;
11
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);
12
+ --legend-text-color: var(--md-sys-color-on-secondary);
13
+ --legend-border-bottom: 1px solid var(--md-sys-color-primary);
14
14
 
15
15
  --label-padding: 3px 0;
16
16
  --label-font: normal 14px var(--theme-font);
17
- --label-color: var(--secondary-color);
17
+ --label-color: var(--md-sys-color-secondary);
18
18
 
19
19
  --input-field-border: 1px solid rgba(0, 0, 0, 0.2);
20
20
  --input-field-border-radius: var(--border-radius);
@@ -23,29 +23,29 @@ body {
23
23
 
24
24
  --search-panel-background-color: rgba(0, 0, 0, 0.1);
25
25
  --search-panel-search-iconbutton-size: var(--icon-default-size);
26
- --search-form-icon-color: var(--primary-color);
26
+ --search-form-icon-color: var(--md-sys-color-primary);
27
27
  --search-form-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.15);
28
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;
29
+ --search-form-background-color: var(--md-sys-color-surface);
30
+ --search-form-narrow-background-color: var(--md-sys-color-surface);
31
+ --search-form-narrow-text-color: var(--md-sys-color-on-surface);
32
32
 
33
33
  --file-uploader-border: 1px solid rgba(0, 0, 0, 0.1);
34
- --file-uploader-background-color: var(--main-section-background-color);
34
+ --file-uploader-background-color: var(--md-sys-color-background);
35
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);
36
+ --file-uploader-color: var(--md-sys-color-secondary);
37
+ --file-uploader-icon-color: var(--md-sys-color-primary);
38
38
  --file-uploader-candrop-background-color: #fffde9;
39
39
  --file-uploader-label-padding: 3px 20px;
40
40
  --file-uploader-label-border-radius: var(--border-radius);
41
- --file-uploader-label-background-color: var(--secondary-color);
41
+ --file-uploader-label-background-color: var(--md-sys-color-secondary);
42
42
  --file-uploader-label-font: normal 12px var(--theme-font);
43
43
  --file-uploader-label-color: #fff;
44
44
  --file-uploader-li-padding: 2px 5px 0px 5px;
45
45
  --file-uploader-li-border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
46
46
  --file-uploader-li-icon-margin: 2px 0 2px 5px;
47
47
  --file-uploader-li-icon-font: normal 15px var(--mdc-icon-font, 'Material Icons');
48
- --file-uploader-li-icon-focus-color: var(--primary-color);
48
+ --file-uploader-li-icon-focus-color: var(--md-sys-color-primary);
49
49
  }
50
50
 
51
51
  @media screen and (max-width: 480px) {