@operato/attribute 1.2.42 → 1.2.44
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.
- package/CHANGELOG.md +18 -0
- package/dist/src/grist-editor/index.js +2 -2
- package/dist/src/grist-editor/index.js.map +1 -1
- package/dist/src/grist-editor/ox-grist-editor-attributes.d.ts +1 -1
- package/dist/src/grist-editor/ox-grist-editor-attributes.js +5 -6
- package/dist/src/grist-editor/ox-grist-editor-attributes.js.map +1 -1
- package/dist/src/grist-editor/ox-popup-attributes.js +1 -1
- package/dist/src/grist-editor/ox-popup-attributes.js.map +1 -1
- package/dist/src/ox-attribute-form.js +3 -5
- package/dist/src/ox-attribute-form.js.map +1 -1
- package/dist/src/ox-attribute-view.d.ts +1 -1
- package/dist/src/ox-attribute-view.js +99 -92
- package/dist/src/ox-attribute-view.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -6
- package/src/grist-editor/index.ts +2 -2
- package/src/grist-editor/ox-grist-editor-attributes.ts +2 -4
- package/src/grist-editor/ox-popup-attributes.ts +1 -1
- package/src/ox-attribute-form.ts +3 -7
- package/src/ox-attribute-view.ts +108 -101
package/src/ox-attribute-form.ts
CHANGED
|
@@ -143,7 +143,7 @@ export class OxAttributeForm extends LitElement {
|
|
|
143
143
|
}
|
|
144
144
|
|
|
145
145
|
private buildInputs() {
|
|
146
|
-
const items = this.attributeSet?.items.filter(item => item.active)
|
|
146
|
+
const items = (this.attributeSet?.items || []).filter(item => item.active)
|
|
147
147
|
|
|
148
148
|
return (items || []).map(item => {
|
|
149
149
|
const { name, description, tag, type, options = {} } = item
|
|
@@ -204,13 +204,9 @@ export class OxAttributeForm extends LitElement {
|
|
|
204
204
|
return (items || []).reduce((sum, item) => {
|
|
205
205
|
const { tag, type } = item
|
|
206
206
|
|
|
207
|
-
const
|
|
208
|
-
this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>
|
|
209
|
-
) as HTMLInputElement[]
|
|
207
|
+
const editor = this.renderRoot.querySelector(`[name=${tag}]`) as HTMLInputElement
|
|
210
208
|
|
|
211
|
-
|
|
212
|
-
sum[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))
|
|
213
|
-
}
|
|
209
|
+
sum[tag] = type === 'boolean' ? editor.checked : editor.value
|
|
214
210
|
|
|
215
211
|
return sum
|
|
216
212
|
}, {} as { [tag: string]: any })
|
package/src/ox-attribute-view.ts
CHANGED
|
@@ -2,123 +2,130 @@ import '@operato/input/ox-input-file.js'
|
|
|
2
2
|
|
|
3
3
|
import { css, html, LitElement } from 'lit'
|
|
4
4
|
import { customElement, property } from 'lit/decorators.js'
|
|
5
|
+
import { ScrollbarStyles } from '@operato/styles'
|
|
5
6
|
|
|
6
7
|
import { AttributeSet } from './types.js'
|
|
7
8
|
|
|
8
9
|
@customElement('ox-attribute-view')
|
|
9
10
|
export class OxAttributeView extends LitElement {
|
|
10
|
-
static styles =
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
grid-template-areas: 'name description' 'empty inputs';
|
|
48
|
-
|
|
49
|
-
grid-gap: 9px;
|
|
50
|
-
align-items: center;
|
|
51
|
-
margin-bottom: var(--margin-default);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
label:nth-child(odd) {
|
|
55
|
-
background-color: var(--main-section-background-color);
|
|
56
|
-
padding: var(--padding-default) 0;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
div[name] {
|
|
60
|
-
grid-area: name;
|
|
61
|
-
font: var(--label-font);
|
|
62
|
-
color: var(--label-color);
|
|
63
|
-
text-align: right;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
div[description] {
|
|
67
|
-
grid-area: description;
|
|
68
|
-
opacity: 0.7;
|
|
69
|
-
font: var(--item-description-font);
|
|
70
|
-
color: var(--item-description-color);
|
|
71
|
-
text-align: left;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
div[description] * {
|
|
75
|
-
vertical-align: middle;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
div[description] mwc-icon {
|
|
79
|
-
margin-top: -3px;
|
|
80
|
-
font-size: 0.9rem;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
div[elements] {
|
|
84
|
-
grid-area: inputs;
|
|
85
|
-
display: flex;
|
|
86
|
-
flex-direction: row;
|
|
87
|
-
flex-wrap: wrap;
|
|
88
|
-
gap: 10px;
|
|
89
|
-
padding-right: var(--padding-default);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
div[elements] * {
|
|
93
|
-
flex: 1;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
div[elements] input,
|
|
97
|
-
div[elements] select {
|
|
98
|
-
border: var(--input-field-border);
|
|
99
|
-
border-radius: var(--input-field-border-radius);
|
|
100
|
-
padding: var(--input-field-padding);
|
|
101
|
-
font: var(--input-field-font);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
@media only screen and (max-width: 460px) {
|
|
11
|
+
static styles = [
|
|
12
|
+
ScrollbarStyles,
|
|
13
|
+
css`
|
|
14
|
+
:host {
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: row;
|
|
17
|
+
|
|
18
|
+
--item-description-font: normal 0.8rem/1rem var(--theme-font);
|
|
19
|
+
--item-description-color: var(--page-description-color);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
h2 {
|
|
23
|
+
margin: var(--title-margin);
|
|
24
|
+
font: var(--title-font);
|
|
25
|
+
color: var(--title-text-color);
|
|
26
|
+
text-transform: capitalize;
|
|
27
|
+
text-align: center;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
h3 {
|
|
31
|
+
margin: var(--page-description-margin);
|
|
32
|
+
font: var(--page-description-font);
|
|
33
|
+
color: var(--page-description-color);
|
|
34
|
+
text-transform: capitalize;
|
|
35
|
+
text-align: center;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
form {
|
|
39
|
+
flex: 1;
|
|
40
|
+
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
|
|
44
|
+
overflow-y: auto;
|
|
45
|
+
padding: var(--padding-default);
|
|
46
|
+
}
|
|
47
|
+
|
|
105
48
|
label {
|
|
106
49
|
display: grid;
|
|
107
50
|
|
|
108
|
-
grid-template-rows: auto
|
|
109
|
-
grid-template-columns: 1fr;
|
|
110
|
-
grid-template-areas: 'name
|
|
51
|
+
grid-template-rows: auto 1fr;
|
|
52
|
+
grid-template-columns: 1fr 5fr;
|
|
53
|
+
grid-template-areas: 'name description' 'empty inputs';
|
|
111
54
|
|
|
112
55
|
grid-gap: 9px;
|
|
113
56
|
align-items: center;
|
|
114
57
|
margin-bottom: var(--margin-default);
|
|
115
58
|
}
|
|
116
59
|
|
|
60
|
+
label:nth-child(odd) {
|
|
61
|
+
background-color: var(--main-section-background-color);
|
|
62
|
+
padding: var(--padding-default) 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
117
65
|
div[name] {
|
|
66
|
+
grid-area: name;
|
|
67
|
+
font: var(--label-font);
|
|
68
|
+
color: var(--label-color);
|
|
69
|
+
text-align: right;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
div[description] {
|
|
73
|
+
grid-area: description;
|
|
74
|
+
opacity: 0.7;
|
|
75
|
+
font: var(--item-description-font);
|
|
76
|
+
color: var(--item-description-color);
|
|
118
77
|
text-align: left;
|
|
119
78
|
}
|
|
120
|
-
|
|
121
|
-
|
|
79
|
+
|
|
80
|
+
div[description] * {
|
|
81
|
+
vertical-align: middle;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
div[description] mwc-icon {
|
|
85
|
+
margin-top: -3px;
|
|
86
|
+
font-size: 0.9rem;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
div[elements] {
|
|
90
|
+
grid-area: inputs;
|
|
91
|
+
display: flex;
|
|
92
|
+
flex-direction: row;
|
|
93
|
+
flex-wrap: wrap;
|
|
94
|
+
gap: 10px;
|
|
95
|
+
padding-right: var(--padding-default);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
div[elements] * {
|
|
99
|
+
flex: 1;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
div[elements] input,
|
|
103
|
+
div[elements] select {
|
|
104
|
+
border: var(--input-field-border);
|
|
105
|
+
border-radius: var(--input-field-border-radius);
|
|
106
|
+
padding: var(--input-field-padding);
|
|
107
|
+
font: var(--input-field-font);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
@media only screen and (max-width: 460px) {
|
|
111
|
+
label {
|
|
112
|
+
display: grid;
|
|
113
|
+
|
|
114
|
+
grid-template-rows: auto auto 1fr;
|
|
115
|
+
grid-template-columns: 1fr;
|
|
116
|
+
grid-template-areas: 'name' 'description' 'inputs';
|
|
117
|
+
|
|
118
|
+
grid-gap: 9px;
|
|
119
|
+
align-items: center;
|
|
120
|
+
margin-bottom: var(--margin-default);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
div[name] {
|
|
124
|
+
text-align: left;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
`
|
|
128
|
+
]
|
|
122
129
|
|
|
123
130
|
@property({ type: Object }) attributeSet?: AttributeSet
|
|
124
131
|
@property({ type: Object }) value?: { [tag: string]: any }
|
|
@@ -132,7 +139,7 @@ export class OxAttributeView extends LitElement {
|
|
|
132
139
|
}
|
|
133
140
|
|
|
134
141
|
private buildEntryViews() {
|
|
135
|
-
const items = this.attributeSet?.items.filter(item => item.active)
|
|
142
|
+
const items = (this.attributeSet?.items || []).filter(item => item.active)
|
|
136
143
|
|
|
137
144
|
return (items || []).map(item => {
|
|
138
145
|
const { name, description, tag, type, options = {} } = item
|