@operato/grist-editor 2.0.0-alpha.98 → 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 (32) hide show
  1. package/CHANGELOG.md +413 -0
  2. package/dist/src/ox-popup-crontab-input.js +2 -2
  3. package/dist/src/ox-popup-crontab-input.js.map +1 -1
  4. package/dist/src/ox-popup-duration-input.js +1 -1
  5. package/dist/src/ox-popup-duration-input.js.map +1 -1
  6. package/dist/src/ox-popup-hashtags-input.js +1 -1
  7. package/dist/src/ox-popup-hashtags-input.js.map +1 -1
  8. package/dist/src/ox-popup-i18n-label-input.js +2 -2
  9. package/dist/src/ox-popup-i18n-label-input.js.map +1 -1
  10. package/dist/src/ox-popup-parameters-builder.js +2 -2
  11. package/dist/src/ox-popup-parameters-builder.js.map +1 -1
  12. package/dist/src/ox-popup-partition-keys-input.js +2 -2
  13. package/dist/src/ox-popup-partition-keys-input.js.map +1 -1
  14. package/dist/src/ox-popup-value-map-input.js +2 -2
  15. package/dist/src/ox-popup-value-map-input.js.map +1 -1
  16. package/dist/src/ox-popup-value-ranges-input.js +2 -2
  17. package/dist/src/ox-popup-value-ranges-input.js.map +1 -1
  18. package/dist/stories/ox-grist-editor-crontab.stories.js +6 -6
  19. package/dist/stories/ox-grist-editor-crontab.stories.js.map +1 -1
  20. package/dist/tsconfig.tsbuildinfo +1 -1
  21. package/package.json +9 -9
  22. package/src/ox-popup-crontab-input.ts +2 -2
  23. package/src/ox-popup-duration-input.ts +1 -1
  24. package/src/ox-popup-hashtags-input.ts +1 -1
  25. package/src/ox-popup-i18n-label-input.ts +2 -2
  26. package/src/ox-popup-parameters-builder.ts +2 -2
  27. package/src/ox-popup-partition-keys-input.ts +2 -2
  28. package/src/ox-popup-value-map-input.ts +2 -2
  29. package/src/ox-popup-value-ranges-input.ts +2 -2
  30. package/stories/ox-grist-editor-crontab.stories.ts +6 -6
  31. package/themes/app-theme.css +1 -1
  32. package/themes/form-theme.css +15 -15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@operato/grist-editor",
3
- "version": "2.0.0-alpha.98",
3
+ "version": "2.0.0-beta.0",
4
4
  "description": "Webcomponent for grist-editor following open-wc recommendations",
5
5
  "author": "heartyoh",
6
6
  "main": "dist/src/index.js",
@@ -96,13 +96,13 @@
96
96
  },
97
97
  "dependencies": {
98
98
  "@material/web": "^1.4.0",
99
- "@operato/data-grist": "^2.0.0-alpha.98",
100
- "@operato/help": "^2.0.0-alpha.98",
101
- "@operato/i18n": "^2.0.0-alpha.59",
102
- "@operato/input": "^2.0.0-alpha.98",
103
- "@operato/popup": "^2.0.0-alpha.98",
104
- "@operato/property-editor": "^2.0.0-alpha.98",
105
- "@operato/styles": "^2.0.0-alpha.98",
99
+ "@operato/data-grist": "^2.0.0-beta.0",
100
+ "@operato/help": "^2.0.0-beta.0",
101
+ "@operato/i18n": "^2.0.0-beta.0",
102
+ "@operato/input": "^2.0.0-beta.0",
103
+ "@operato/popup": "^2.0.0-beta.0",
104
+ "@operato/property-editor": "^2.0.0-beta.0",
105
+ "@operato/styles": "^2.0.0-beta.0",
106
106
  "cronstrue": "^2.2.0",
107
107
  "cross-fetch": "^3.1.5",
108
108
  "lit": "^3.1.2",
@@ -142,5 +142,5 @@
142
142
  "prettier --write"
143
143
  ]
144
144
  },
145
- "gitHead": "cc3f1dee34e1bf60629920629e566bf28171c8fe"
145
+ "gitHead": "1c7306d2c3170b773e16d5d4ef79b490584d5441"
146
146
  }
package/src/ox-popup-crontab-input.ts CHANGED
@@ -18,7 +18,7 @@ export class OxPopupCrontabInput extends LitElement {
18
18
  display: flex;
19
19
  flex-direction: column;
20
20
 
21
- background-color: #fff;
21
+ background-color: var(--md-sys-color-surface);
22
22
 
23
23
  width: var(--overlay-center-normal-width, 50%);
24
24
  height: var(--overlay-center-normal-height, 50%);
@@ -36,7 +36,7 @@ export class OxPopupCrontabInput extends LitElement {
36
36
  align-items: center;
37
37
  justify-content: center;
38
38
 
39
- color: var(--primary-color);
39
+ color: var(--md-sys-color-on-primary-container);
40
40
  }
41
41
  `
42
42
  ]
package/src/ox-popup-duration-input.ts CHANGED
@@ -18,7 +18,7 @@ export class OxPopupDurationInput extends LitElement {
18
18
  display: flex;
19
19
  flex-direction: column;
20
20
 
21
- background-color: #fff;
21
+ background-color: var(--md-sys-color-surface);
22
22
 
23
23
  width: var(--overlay-center-normal-width, 50%);
24
24
  height: var(--overlay-center-normal-height, 50%);
package/src/ox-popup-hashtags-input.ts CHANGED
@@ -18,7 +18,7 @@ export class OxPopupHashtagsInput extends LitElement {
18
18
  display: flex;
19
19
  flex-direction: column;
20
20
 
21
- background-color: #fff;
21
+ background-color: var(--md-sys-color-surface);
22
22
 
23
23
  width: var(--overlay-center-normal-width, 50%);
24
24
  height: var(--overlay-center-normal-height, 50%);
package/src/ox-popup-i18n-label-input.ts CHANGED
@@ -18,7 +18,7 @@ export class OxPopupValueMapInput extends LitElement {
18
18
  display: flex;
19
19
  flex-direction: column;
20
20
 
21
- background-color: #fff;
21
+ background-color: var(--md-sys-color-surface);
22
22
 
23
23
  width: var(--overlay-center-normal-width, 50%);
24
24
  height: var(--overlay-center-normal-height, 50%);
@@ -37,7 +37,7 @@ export class OxPopupValueMapInput extends LitElement {
37
37
  align-items: center;
38
38
  justify-content: center;
39
39
 
40
- color: var(--primary-color);
40
+ color: var(--md-sys-color-on-primary-container);
41
41
  }
42
42
  `
43
43
  ]
package/src/ox-popup-parameters-builder.ts CHANGED
@@ -18,7 +18,7 @@ export class OxPopupParametersBuilder extends LitElement {
18
18
  display: flex;
19
19
  flex-direction: column;
20
20
 
21
- background-color: #fff;
21
+ background-color: var(--md-sys-color-surface);
22
22
 
23
23
  width: var(--overlay-center-normal-width, 50%);
24
24
  height: var(--overlay-center-normal-height, 50%);
@@ -39,7 +39,7 @@ export class OxPopupParametersBuilder 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-popup-partition-keys-input.ts CHANGED
@@ -18,7 +18,7 @@ export class OxPopupPartitionKeysInput extends LitElement {
18
18
  display: flex;
19
19
  flex-direction: column;
20
20
 
21
- background-color: #fff;
21
+ background-color: var(--md-sys-color-surface);
22
22
 
23
23
  width: var(--overlay-center-normal-width, 50%);
24
24
  height: var(--overlay-center-normal-height, 50%);
@@ -37,7 +37,7 @@ export class OxPopupPartitionKeysInput extends LitElement {
37
37
  align-items: center;
38
38
  justify-content: center;
39
39
 
40
- color: var(--primary-color);
40
+ color: var(--md-sys-color-on-primary-container);
41
41
  }
42
42
  `
43
43
  ]
package/src/ox-popup-value-map-input.ts CHANGED
@@ -19,7 +19,7 @@ export class OxPopupValueMapInput extends LitElement {
19
19
  display: flex;
20
20
  flex-direction: column;
21
21
 
22
- background-color: #fff;
22
+ background-color: var(--md-sys-color-surface);
23
23
 
24
24
  width: var(--overlay-center-normal-width, 50%);
25
25
  height: var(--overlay-center-normal-height, 50%);
@@ -37,7 +37,7 @@ export class OxPopupValueMapInput extends LitElement {
37
37
  align-items: center;
38
38
  justify-content: center;
39
39
 
40
- color: var(--primary-color);
40
+ color: var(--md-sys-color-on-primary-container);
41
41
  }
42
42
  `
43
43
  ]
package/src/ox-popup-value-ranges-input.ts CHANGED
@@ -18,7 +18,7 @@ export class OxPopupValueRangesInput extends LitElement {
18
18
  display: flex;
19
19
  flex-direction: column;
20
20
 
21
- background-color: #fff;
21
+ background-color: var(--md-sys-color-surface);
22
22
 
23
23
  width: var(--overlay-center-normal-width, 50%);
24
24
  height: var(--overlay-center-normal-height, 50%);
@@ -36,7 +36,7 @@ export class OxPopupValueRangesInput extends LitElement {
36
36
  align-items: center;
37
37
  justify-content: center;
38
38
 
39
- color: var(--primary-color);
39
+ color: var(--md-sys-color-on-primary-container);
40
40
  }
41
41
  `
42
42
  ]
package/stories/ox-grist-editor-crontab.stories.ts CHANGED
@@ -123,7 +123,7 @@ class GristDemo extends LitElement {
123
123
  #tailer {
124
124
  display: flex;
125
125
  flex-direction: row;
126
- margin: 0 var(--margin-default);
126
+ margin: 0 var(--spacing-medium);
127
127
  }
128
128
 
129
129
  #tailer a {
@@ -131,7 +131,7 @@ class GristDemo extends LitElement {
131
131
  margin: 0 var(--margin-narrow);
132
132
  border-right: 1px solid rgba(0, 0, 0, 0.1);
133
133
  font-size: var(--fontsize-default);
134
- color: var(--primary-color);
134
+ color: var(--md-sys-color-on-primary-container);
135
135
  }
136
136
  `
137
137
  ]
@@ -398,7 +398,7 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
398
398
  flex-direction: row;
399
399
  align-items: center;
400
400
  padding: var(--padding-default) var(--padding-wide);
401
- background-color: var(--theme-white-color);
401
+ background-color: var(--md-sys-color-surface);
402
402
  box-shadow: var(--box-shadow);
403
403
 
404
404
  --md-icon-size: 24px;
@@ -409,11 +409,11 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
409
409
  }
410
410
  #sorters {
411
411
  margin-left: auto;
412
- margin-right: var(--margin-default);
412
+ margin-right: var(--spacing-medium);
413
413
  padding-left: var(--padding-narrow);
414
414
  border-bottom: var(--border-dark-color);
415
415
  position: relative;
416
- color: var(--secondary-color);
416
+ color: var(--md-sys-color-on-secondary-container);
417
417
  font-size: var(--fontsize-default);
418
418
  user-select: none;
419
419
  }
@@ -430,7 +430,7 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
430
430
  }
431
431
 
432
432
  #filters * {
433
- margin-right: var(--margin-default);
433
+ margin-right: var(--spacing-medium);
434
434
  }
435
435
 
436
436
  @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) {