@operato/input 1.0.0-beta.24 → 1.0.0-beta.27
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 +27 -0
- package/dist/src/ox-input-value-map.js +50 -14
- package/dist/src/ox-input-value-map.js.map +1 -1
- package/dist/src/ox-input-value-ranges.js +50 -23
- package/dist/src/ox-input-value-ranges.js.map +1 -1
- package/dist/src/ox-select.js +2 -5
- package/dist/src/ox-select.js.map +1 -1
- package/dist/stories/ox-input-value-map.stories copy.d.ts +35 -0
- package/dist/stories/ox-input-value-map.stories copy.js +37 -0
- package/dist/stories/ox-input-value-map.stories copy.js.map +1 -0
- package/dist/stories/ox-input-value-range.stories.d.ts +35 -0
- package/dist/stories/ox-input-value-range.stories.js +37 -0
- package/dist/stories/ox-input-value-range.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -7
- package/src/ox-input-value-map.ts +50 -14
- package/src/ox-input-value-ranges.ts +50 -23
- package/src/ox-select.ts +2 -5
- package/themes/input-theme.css +1 -1
|
@@ -29,23 +29,18 @@ export class OxInputValueMap extends OxFormField {
|
|
|
29
29
|
:host {
|
|
30
30
|
display: flex;
|
|
31
31
|
flex-direction: column;
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
width: 100%;
|
|
35
|
-
overflow: hidden;
|
|
36
|
-
border: 1px solid #ccc;
|
|
32
|
+
border: var(--border-dark-color);
|
|
33
|
+
padding: var(--padding-narrow) var(--padding-narrow) 0 var(--padding-narrow);
|
|
37
34
|
}
|
|
38
35
|
|
|
39
36
|
div {
|
|
40
37
|
display: flex;
|
|
41
38
|
flex-flow: row nowrap;
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
border-bottom: 1px solid #c0c0c0;
|
|
39
|
+
gap: var(--padding-default);
|
|
45
40
|
}
|
|
46
41
|
|
|
47
42
|
div:last-child {
|
|
48
|
-
|
|
43
|
+
margin-bottom: var(--margin-narrow);
|
|
49
44
|
}
|
|
50
45
|
|
|
51
46
|
div > * {
|
|
@@ -55,14 +50,47 @@ export class OxInputValueMap extends OxFormField {
|
|
|
55
50
|
}
|
|
56
51
|
|
|
57
52
|
button {
|
|
58
|
-
|
|
59
|
-
|
|
53
|
+
border: var(--button-border);
|
|
54
|
+
border-radius: var(--border-radius);
|
|
55
|
+
background-color: var(--button-background-color);
|
|
56
|
+
padding: var(--padding-narrow) var(--padding-default);
|
|
57
|
+
line-height: 0.8;
|
|
58
|
+
color: var(--button-color);
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
}
|
|
61
|
+
button + button {
|
|
62
|
+
margin-left: -5px;
|
|
63
|
+
}
|
|
64
|
+
button mwc-icon {
|
|
65
|
+
font-size: var(--fontsize-default);
|
|
66
|
+
}
|
|
67
|
+
button:focus,
|
|
68
|
+
button:hover,
|
|
69
|
+
button:active {
|
|
70
|
+
border: var(--button-activ-border);
|
|
71
|
+
background-color: var(--button-background-focus-color);
|
|
72
|
+
color: var(--theme-white-color);
|
|
60
73
|
}
|
|
61
74
|
|
|
62
75
|
input,
|
|
63
76
|
ox-input-color {
|
|
64
77
|
flex: 1;
|
|
65
78
|
}
|
|
79
|
+
input {
|
|
80
|
+
border: 0;
|
|
81
|
+
border-bottom: var(--border-dark-color);
|
|
82
|
+
padding: var(--input-padding);
|
|
83
|
+
font: var(--input-font);
|
|
84
|
+
color: var(--primary-text-color);
|
|
85
|
+
}
|
|
86
|
+
input:focus {
|
|
87
|
+
outline: none;
|
|
88
|
+
border-bottom: 1px solid var(--primary-color);
|
|
89
|
+
}
|
|
90
|
+
button.hidden {
|
|
91
|
+
opacity: 0;
|
|
92
|
+
cursor: default;
|
|
93
|
+
}
|
|
66
94
|
|
|
67
95
|
ox-input-color {
|
|
68
96
|
--ox-input-color-input-color: {
|
|
@@ -107,7 +135,10 @@ export class OxInputValueMap extends OxFormField {
|
|
|
107
135
|
.value=${item.value}
|
|
108
136
|
data-value-type=${this.valuetype}
|
|
109
137
|
/>
|
|
110
|
-
`}
|
|
138
|
+
`}
|
|
139
|
+
<button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
|
|
140
|
+
<mwc-icon>remove</mwc-icon>
|
|
141
|
+
</button>
|
|
111
142
|
</div>
|
|
112
143
|
`
|
|
113
144
|
)}
|
|
@@ -118,7 +149,9 @@ export class OxInputValueMap extends OxFormField {
|
|
|
118
149
|
: this.valuetype == 'color'
|
|
119
150
|
? html` <ox-input-color data-value value="" tabindex="-1" placeholder="value"> </ox-input-color> `
|
|
120
151
|
: html` <input type="text" data-value placeholder="value" value="" data-value-type=${this.valuetype} /> `}
|
|
121
|
-
<button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1"
|
|
152
|
+
<button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
|
|
153
|
+
<mwc-icon>add</mwc-icon>
|
|
154
|
+
</button>
|
|
122
155
|
</div>
|
|
123
156
|
|
|
124
157
|
<div data-record>
|
|
@@ -149,7 +182,10 @@ export class OxInputValueMap extends OxFormField {
|
|
|
149
182
|
.value=${(this.value && this.value.default) || ''}
|
|
150
183
|
data-value-type=${this.valuetype}
|
|
151
184
|
/>
|
|
152
|
-
`}
|
|
185
|
+
`}
|
|
186
|
+
<button class="record-action" @click=${() => this._sort()} tabindex="-1">
|
|
187
|
+
<mwc-icon>chevron_right</mwc-icon>
|
|
188
|
+
</button>
|
|
153
189
|
</div>
|
|
154
190
|
`
|
|
155
191
|
}
|
|
@@ -29,23 +29,18 @@ export class OxInputValueRange extends OxFormField {
|
|
|
29
29
|
:host {
|
|
30
30
|
display: flex;
|
|
31
31
|
flex-direction: column;
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
width: 100%;
|
|
35
|
-
overflow: hidden;
|
|
36
|
-
border: 1px solid #ccc;
|
|
32
|
+
border: var(--border-dark-color);
|
|
33
|
+
padding: var(--padding-narrow) var(--padding-narrow) 0 var(--padding-narrow);
|
|
37
34
|
}
|
|
38
35
|
|
|
39
36
|
div {
|
|
40
37
|
display: flex;
|
|
41
38
|
flex-flow: row nowrap;
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
border-bottom: 1px solid #c0c0c0;
|
|
39
|
+
gap: var(--padding-default);
|
|
45
40
|
}
|
|
46
41
|
|
|
47
42
|
div:last-child {
|
|
48
|
-
|
|
43
|
+
margin-bottom: var(--margin-narrow);
|
|
49
44
|
}
|
|
50
45
|
|
|
51
46
|
div > * {
|
|
@@ -55,14 +50,47 @@ export class OxInputValueRange extends OxFormField {
|
|
|
55
50
|
}
|
|
56
51
|
|
|
57
52
|
button {
|
|
58
|
-
|
|
59
|
-
|
|
53
|
+
border: var(--button-border);
|
|
54
|
+
border-radius: var(--border-radius);
|
|
55
|
+
background-color: var(--button-background-color);
|
|
56
|
+
padding: var(--padding-narrow) var(--padding-default);
|
|
57
|
+
line-height: 0.8;
|
|
58
|
+
color: var(--button-color);
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
}
|
|
61
|
+
button + button {
|
|
62
|
+
margin-left: -5px;
|
|
63
|
+
}
|
|
64
|
+
button mwc-icon {
|
|
65
|
+
font-size: var(--fontsize-default);
|
|
66
|
+
}
|
|
67
|
+
button:focus,
|
|
68
|
+
button:hover,
|
|
69
|
+
button:active {
|
|
70
|
+
border: var(--button-activ-border);
|
|
71
|
+
background-color: var(--button-background-focus-color);
|
|
72
|
+
color: var(--theme-white-color);
|
|
60
73
|
}
|
|
61
74
|
|
|
62
75
|
input,
|
|
63
76
|
ox-input-color {
|
|
64
77
|
flex: 1;
|
|
65
78
|
}
|
|
79
|
+
input {
|
|
80
|
+
border: 0;
|
|
81
|
+
border-bottom: var(--border-dark-color);
|
|
82
|
+
padding: var(--input-padding);
|
|
83
|
+
font: var(--input-font);
|
|
84
|
+
color: var(--primary-text-color);
|
|
85
|
+
}
|
|
86
|
+
input:focus {
|
|
87
|
+
outline: none;
|
|
88
|
+
border-bottom: 1px solid var(--primary-color);
|
|
89
|
+
}
|
|
90
|
+
button.hidden {
|
|
91
|
+
opacity: 0;
|
|
92
|
+
cursor: default;
|
|
93
|
+
}
|
|
66
94
|
|
|
67
95
|
ox-input-color {
|
|
68
96
|
--things-editor-color-input-color: {
|
|
@@ -74,18 +102,11 @@ export class OxInputValueRange extends OxFormField {
|
|
|
74
102
|
}
|
|
75
103
|
}
|
|
76
104
|
|
|
77
|
-
[placeholder='value']
|
|
105
|
+
[placeholder='value'],
|
|
106
|
+
[value='default'] {
|
|
78
107
|
flex: 2;
|
|
79
108
|
}
|
|
80
109
|
|
|
81
|
-
div {
|
|
82
|
-
border-bottom: 1px solid #c0c0c0;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
div:last-child {
|
|
86
|
-
border-bottom: none;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
110
|
input[type='checkbox'] {
|
|
90
111
|
width: initial;
|
|
91
112
|
}
|
|
@@ -121,7 +142,10 @@ export class OxInputValueRange extends OxFormField {
|
|
|
121
142
|
.value=${item.value}
|
|
122
143
|
data-value-type=${this.valuetype}
|
|
123
144
|
/>
|
|
124
|
-
`}
|
|
145
|
+
`}
|
|
146
|
+
<button class="record-action" @click=${(e: Event) => this._delete(e)} tabindex="-1">
|
|
147
|
+
<mwc-icon>remove</mwc-icon>
|
|
148
|
+
</button>
|
|
125
149
|
</div>
|
|
126
150
|
`
|
|
127
151
|
)}
|
|
@@ -135,7 +159,9 @@ export class OxInputValueRange extends OxFormField {
|
|
|
135
159
|
: this.valuetype == 'color'
|
|
136
160
|
? html` <ox-input-color data-value value="" placeholder="value"> </ox-input-color> `
|
|
137
161
|
: html` <input type="text" data-value placeholder="value" value="" data-value-type=${this.valuetype} /> `}
|
|
138
|
-
<button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1"
|
|
162
|
+
<button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
|
|
163
|
+
<mwc-icon>add</mwc-icon>
|
|
164
|
+
</button>
|
|
139
165
|
</div>
|
|
140
166
|
|
|
141
167
|
<div data-record>
|
|
@@ -165,7 +191,8 @@ export class OxInputValueRange extends OxFormField {
|
|
|
165
191
|
class="default-value"
|
|
166
192
|
data-value-type=${this.valuetype}
|
|
167
193
|
/>
|
|
168
|
-
`}
|
|
194
|
+
`}
|
|
195
|
+
<button class="record-action" @click=${(e: Event) => this._sort()}><mwc-icon>chevron_right</mwc-icon></button>
|
|
169
196
|
</div>
|
|
170
197
|
`
|
|
171
198
|
}
|
package/src/ox-select.ts
CHANGED
|
@@ -34,6 +34,7 @@ export class Select extends OxFormField {
|
|
|
34
34
|
:host {
|
|
35
35
|
display: block;
|
|
36
36
|
position: relative;
|
|
37
|
+
border-bottom: var(--border-dark-color);
|
|
37
38
|
}
|
|
38
39
|
|
|
39
40
|
div {
|
|
@@ -42,11 +43,10 @@ export class Select extends OxFormField {
|
|
|
42
43
|
align-items: center;
|
|
43
44
|
justify-content: center;
|
|
44
45
|
cursor: pointer;
|
|
45
|
-
|
|
46
|
-
border-bottom: var(--border-dark-color);
|
|
47
46
|
padding: var(--input-padding);
|
|
48
47
|
font: var(--input-font);
|
|
49
48
|
color: var(--primary-text-color);
|
|
49
|
+
max-height: 17px;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
span {
|
|
@@ -55,9 +55,6 @@ export class Select extends OxFormField {
|
|
|
55
55
|
text-overflow: ellipsis;
|
|
56
56
|
white-space: nowrap;
|
|
57
57
|
}
|
|
58
|
-
div:hover {
|
|
59
|
-
border-bottom: 1px solid var(--primary-color);
|
|
60
|
-
}
|
|
61
58
|
|
|
62
59
|
mwc-icon {
|
|
63
60
|
display: block;
|
package/themes/input-theme.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
body {
|
|
2
2
|
--ox-input-border: 1px solid rgba(0, 0, 0, 0.1);
|
|
3
3
|
--ox-input-border-radius: var(--border-radius);
|
|
4
|
-
--ox-input-padding:
|
|
4
|
+
--ox-input-padding: var(--input-padding);
|
|
5
5
|
--ox-input-font: normal 15px var(--theme-font);
|
|
6
6
|
--ox-input-color: var(--secondary-color);
|
|
7
7
|
}
|