@operato/dataset 1.0.0-alpha.20 → 1.0.0-alpha.23

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 (42) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/demo/data-item-grist.html +343 -0
  3. package/demo/index.html +6 -90
  4. package/demo/ox-data-entry-form.html +110 -0
  5. package/demo/ox-data-item-spec.html +148 -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-data-item-spec-editor-popup.d.ts +13 -0
  10. package/dist/src/grist-editor/ox-data-item-spec-editor-popup.js +90 -0
  11. package/dist/src/grist-editor/ox-data-item-spec-editor-popup.js.map +1 -0
  12. package/dist/src/grist-editor/ox-data-item-spec-editor.d.ts +18 -0
  13. package/dist/src/grist-editor/ox-data-item-spec-editor.js +98 -0
  14. package/dist/src/grist-editor/ox-data-item-spec-editor.js.map +1 -0
  15. package/dist/src/index.d.ts +3 -1
  16. package/dist/src/index.js +3 -1
  17. package/dist/src/index.js.map +1 -1
  18. package/dist/src/ox-data-entry-form.d.ts +1 -24
  19. package/dist/src/ox-data-entry-form.js +7 -5
  20. package/dist/src/ox-data-entry-form.js.map +1 -1
  21. package/dist/src/ox-data-item-spec.d.ts +22 -0
  22. package/dist/src/ox-data-item-spec.js +67 -0
  23. package/dist/src/ox-data-item-spec.js.map +1 -0
  24. package/dist/src/types.d.ts +38 -0
  25. package/dist/src/types.js +2 -0
  26. package/dist/src/types.js.map +1 -0
  27. package/dist/tsconfig.tsbuildinfo +1 -1
  28. package/package.json +16 -11
  29. package/src/grist-editor/index.ts +10 -0
  30. package/src/grist-editor/ox-data-item-spec-editor-popup.ts +90 -0
  31. package/src/grist-editor/ox-data-item-spec-editor.ts +105 -0
  32. package/src/index.ts +3 -1
  33. package/src/ox-data-entry-form.ts +8 -27
  34. package/src/ox-data-item-spec.ts +64 -0
  35. package/src/types.ts +38 -0
  36. package/themes/grist-theme.css +194 -0
  37. package/themes/oops-theme.css +26 -0
  38. package/themes/report-theme.css +47 -0
  39. package/translations/en.json +1 -0
  40. package/translations/ko.json +1 -0
  41. package/translations/ms.json +1 -0
  42. package/translations/zh.json +1 -0
package/src/types.ts ADDED
@@ -0,0 +1,38 @@
1
+ export type SelectOption = { text: string; value: string }
2
+ export type SelectOptions = SelectOption[]
3
+ export type TypeOptions = {
4
+ options?: SelectOptions
5
+ [prop: string]: any
6
+ }
7
+
8
+ export type DataItem = {
9
+ name: string
10
+ description: string
11
+ sequence: number
12
+ tag: string
13
+ type: string
14
+ options: TypeOptions
15
+ unit: string
16
+ quota: number
17
+ }
18
+
19
+ export type DataSet = {
20
+ name: string
21
+ description: string
22
+ dataItems: DataItem[]
23
+ }
24
+
25
+ export type DataItemSpec = {
26
+ type: string
27
+ label: string
28
+ name: string
29
+ property: { [option: string]: any }
30
+ }
31
+
32
+ export type DataItemSpecSet = {
33
+ name: string
34
+ description: string
35
+ specs: DataItemSpec[]
36
+ }
37
+
38
+ export type DataItemSpecSetProvider = (dataItem: DataItem) => DataItemSpecSet
@@ -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(3, minmax(auto, 100%));
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(1, minmax(auto, 100%));
161
+ --ox-grist-padding: 0;
162
+ }
163
+ }
164
+ @media (min-width: 461px) and (max-width: 700px) {
165
+ body {
166
+ --data-card-template: repeat(2, minmax(auto, 100%));
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(4, minmax(auto, 100%));
178
+ }
179
+ }
180
+ @media (min-width: 1401px) and (max-width: 1800px) {
181
+ body {
182
+ --data-card-template: repeat(5, minmax(auto, 100%));
183
+ }
184
+ }
185
+ @media (min-width: 1801px) and (max-width: 2200px) {
186
+ body {
187
+ --data-card-template: repeat(6, minmax(auto, 100%));
188
+ }
189
+ }
190
+ @media only screen and (min-width: 2201px) {
191
+ body {
192
+ --data-card-template: repeat(7, minmax(auto, 100%));
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 @@
1
+ {}
@@ -0,0 +1 @@
1
+ {}
@@ -0,0 +1 @@
1
+ {}
@@ -0,0 +1 @@
1
+ {}