@operato/input 0.2.46 → 0.2.50
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/@types/global/index.d.ts +2 -0
- package/CHANGELOG.md +49 -96
- package/demo/index-barcode.html +3 -1
- package/demo/index-button-radio.html +3 -3
- package/demo/index-code.html +61 -0
- package/demo/index.html +2 -6
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/ox-buttons-radio.js +5 -5
- package/dist/src/ox-buttons-radio.js.map +1 -1
- package/dist/src/ox-input-code.d.ts +35 -0
- package/dist/src/ox-input-code.js +149 -0
- package/dist/src/ox-input-code.js.map +1 -0
- package/dist/src/ox-input-data.d.ts +28 -0
- package/dist/src/ox-input-data.js +139 -0
- package/dist/src/ox-input-data.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -3
- package/src/index.ts +1 -0
- package/src/ox-buttons-radio.ts +7 -7
- package/src/ox-input-code.ts +145 -0
- package/src/ox-input-data.ts +151 -0
- package/tsconfig.json +1 -1
package/CHANGELOG.md
CHANGED
@@ -3,216 +3,169 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
-
### [0.2.
|
6
|
+
### [0.2.50](https://github.com/hatiolab/operato/compare/v0.2.49...v0.2.50) (2021-12-16)
|
7
7
|
|
8
|
+
**Note:** Version bump only for package @operato/input
|
8
9
|
|
9
|
-
### :rocket: New Features
|
10
10
|
|
11
|
-
* add operato/board modeller ([2acd6b3](https://github.com/hatiolab/operato/commit/2acd6b31a4d91317fa84ecee67874d2242968ec6))
|
12
11
|
|
13
12
|
|
14
|
-
### :bug: Bug Fix
|
15
13
|
|
16
|
-
|
17
|
-
* remove duplicated files ([215e60b](https://github.com/hatiolab/operato/commit/215e60b693983aae387fd23ea2f510eb411c7dac))
|
18
|
-
* upgrade @hatiolab/things-scene@2.7.27 ([961c586](https://github.com/hatiolab/operato/commit/961c586b067bed39c486fc4231b2a8abd3e8b1f7))
|
14
|
+
### [0.2.49](https://github.com/hatiolab/operato/compare/v0.2.48...v0.2.49) (2021-12-14)
|
19
15
|
|
16
|
+
**Note:** Version bump only for package @operato/input
|
20
17
|
|
21
18
|
|
22
|
-
### [0.2.45](https://github.com/hatiolab/operato/compare/v0.2.44...v0.2.45) (2021-12-11)
|
23
19
|
|
24
|
-
**Note:** Version bump only for package @operato/input
|
25
20
|
|
26
21
|
|
22
|
+
### [0.2.48](https://github.com/hatiolab/operato/compare/v0.2.47...v0.2.48) (2021-12-14)
|
27
23
|
|
28
24
|
|
25
|
+
### :rocket: New Features
|
29
26
|
|
30
|
-
|
27
|
+
* add ox-input-data, ox-input-code into @operato/input ([4951a6b](https://github.com/hatiolab/operato/commit/4951a6bf76456491018829be521637dcedb068fe))
|
31
28
|
|
32
|
-
**Note:** Version bump only for package @operato/input
|
33
29
|
|
30
|
+
### :bug: Bug Fix
|
34
31
|
|
32
|
+
* remove three from tsconfig.json ([7147701](https://github.com/hatiolab/operato/commit/7147701b6361e390254800e00a2e917617194eb1))
|
33
|
+
* upgrade @hatiolab/things-scene ([1ca0161](https://github.com/hatiolab/operato/commit/1ca0161aa2e844c939613aa0109ad3e12606786d))
|
35
34
|
|
36
35
|
|
37
36
|
|
38
|
-
### [0.2.
|
39
|
-
|
37
|
+
### [0.2.47](https://github.com/hatiolab/operato/compare/v0.2.46...v0.2.47) (2021-12-13)
|
40
38
|
|
41
39
|
### :bug: Bug Fix
|
42
40
|
|
43
|
-
|
44
|
-
* enable ox-input-barcode to fire keyboard events ([8a81c93](https://github.com/hatiolab/operato/commit/8a81c936eef06fc9570034b42b1ce85be8a93ef6))
|
45
|
-
* ox-input-barcode event ([87038da](https://github.com/hatiolab/operato/commit/87038da5589bb728da2397384d55f8ec0cc9b5d4))
|
41
|
+
- operato/board/board-modeller and operato/input/buttons-radio ([d2a4344](https://github.com/hatiolab/operato/commit/d2a4344ae2ad10c9ebfca919a0c9ff7de29d7c6a))
|
46
42
|
|
43
|
+
### [0.2.46](https://github.com/hatiolab/operato/compare/v0.2.45...v0.2.46) (2021-12-12)
|
47
44
|
|
45
|
+
### :rocket: New Features
|
48
46
|
|
49
|
-
|
47
|
+
- add operato/board modeller ([2acd6b3](https://github.com/hatiolab/operato/commit/2acd6b31a4d91317fa84ecee67874d2242968ec6))
|
50
48
|
|
49
|
+
### :bug: Bug Fix
|
51
50
|
|
52
|
-
|
51
|
+
- ox-button-radio add mutation observer ([8e59f63](https://github.com/hatiolab/operato/commit/8e59f633b435113841850423d2bd72ff1389fa98))
|
52
|
+
- remove duplicated files ([215e60b](https://github.com/hatiolab/operato/commit/215e60b693983aae387fd23ea2f510eb411c7dac))
|
53
|
+
- upgrade @hatiolab/things-scene@2.7.28 ([961c586](https://github.com/hatiolab/operato/commit/961c586b067bed39c486fc4231b2a8abd3e8b1f7))
|
53
54
|
|
54
|
-
|
55
|
+
### [0.2.45](https://github.com/hatiolab/operato/compare/v0.2.44...v0.2.45) (2021-12-11)
|
55
56
|
|
57
|
+
**Note:** Version bump only for package @operato/input
|
56
58
|
|
59
|
+
### [0.2.44](https://github.com/hatiolab/operato/compare/v0.2.43...v0.2.44) (2021-12-09)
|
57
60
|
|
58
|
-
|
61
|
+
**Note:** Version bump only for package @operato/input
|
59
62
|
|
63
|
+
### [0.2.43](https://github.com/hatiolab/operato/compare/v0.2.42...v0.2.43) (2021-12-08)
|
60
64
|
|
61
65
|
### :bug: Bug Fix
|
62
66
|
|
63
|
-
|
64
|
-
|
67
|
+
- add missing export in operato/input ([67dad8a](https://github.com/hatiolab/operato/commit/67dad8ad28be8a40284a546077e268e6ac887047))
|
68
|
+
- enable ox-input-barcode to fire keyboard events ([8a81c93](https://github.com/hatiolab/operato/commit/8a81c936eef06fc9570034b42b1ce85be8a93ef6))
|
69
|
+
- ox-input-barcode event ([87038da](https://github.com/hatiolab/operato/commit/87038da5589bb728da2397384d55f8ec0cc9b5d4))
|
65
70
|
|
71
|
+
### [0.2.42](https://github.com/hatiolab/operato/compare/v0.2.41...v0.2.42) (2021-12-07)
|
66
72
|
|
73
|
+
### :rocket: New Features
|
67
74
|
|
68
|
-
|
75
|
+
- add ox-input-barcode and export sorters property for grist ([0659d20](https://github.com/hatiolab/operato/commit/0659d20fcbfb48b0790ee57154c9108491566509))
|
69
76
|
|
70
|
-
|
77
|
+
### [0.2.41](https://github.com/hatiolab/operato/compare/v0.2.40...v0.2.41) (2021-12-07)
|
71
78
|
|
79
|
+
### :bug: Bug Fix
|
72
80
|
|
81
|
+
- popup and input style ([11c5b3e](https://github.com/hatiolab/operato/commit/11c5b3e4bf3f08d18673ada585e50a69b9c88b5b))
|
82
|
+
- popup style ([43ee008](https://github.com/hatiolab/operato/commit/43ee008afbbd817bb002d2e3c420044f939c9415))
|
73
83
|
|
84
|
+
### [0.2.38](https://github.com/hatiolab/operato/compare/v0.2.37...v0.2.38) (2021-12-07)
|
74
85
|
|
86
|
+
**Note:** Version bump only for package @operato/input
|
75
87
|
|
76
88
|
### [0.2.36](https://github.com/hatiolab/operato/compare/v0.2.35...v0.2.36) (2021-12-06)
|
77
89
|
|
78
|
-
|
79
90
|
### :mega: Other
|
80
91
|
|
81
|
-
|
82
|
-
|
92
|
+
- operato/input/ox-select ([dd2fcbc](https://github.com/hatiolab/operato/commit/dd2fcbcee22705c1d68d5743f04cb0d5c1739503))
|
83
93
|
|
84
94
|
### :rocket: New Features
|
85
95
|
|
86
|
-
|
87
|
-
|
96
|
+
- adding filter options for data-grist ([3620e8b](https://github.com/hatiolab/operato/commit/3620e8b5c39e7e66f8e7ab39b2ae7200f7f7afb5))
|
88
97
|
|
89
98
|
### :bug: Bug Fix
|
90
99
|
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
+
- apply class name prefix Ox for operato/popup ([d528848](https://github.com/hatiolab/operato/commit/d5288486ea0e1bec84fff3c5b6bac696eb701e5d))
|
101
|
+
- apply things-scene version ([cbebd17](https://github.com/hatiolab/operato/commit/cbebd1729704e6e42e70d60a4e3b122d42271c2e))
|
102
|
+
- operato/input to support formfield ([21b4d46](https://github.com/hatiolab/operato/commit/21b4d46d750ba833c571b5caeed27eebd8aa03ca))
|
103
|
+
- operato/input to support formfield ([544bf92](https://github.com/hatiolab/operato/commit/544bf928946d878aa967f33b20efdf90eb8e82f5))
|
104
|
+
- operato/ox-popup-list rewritten ([f78b3e9](https://github.com/hatiolab/operato/commit/f78b3e9623faac5ea653442ced653173d630d9e6))
|
105
|
+
- operato/popup, input sample ([116b037](https://github.com/hatiolab/operato/commit/116b0371446cb24d8863c2bdea876b97f6e11dfd))
|
106
|
+
- operato/popup, input sample ([31fb99f](https://github.com/hatiolab/operato/commit/31fb99fc4e37a26c38826dd3554f92ded0632e82))
|
100
107
|
|
101
108
|
### [0.2.35](https://github.com/hatiolab/operato/compare/v0.2.34...v0.2.35) (2021-12-03)
|
102
109
|
|
103
110
|
**Note:** Version bump only for package @operato/input
|
104
111
|
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
112
|
### [0.2.34](https://github.com/hatiolab/operato/compare/v0.2.33...v0.2.34) (2021-12-03)
|
110
113
|
|
111
114
|
**Note:** Version bump only for package @operato/input
|
112
115
|
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
116
|
### [0.2.33](https://github.com/hatiolab/operato/compare/v0.2.32...v0.2.33) (2021-12-03)
|
118
117
|
|
119
118
|
**Note:** Version bump only for package @operato/input
|
120
119
|
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
120
|
**Note:** Version bump only for package @operato/input
|
128
121
|
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
122
|
### [0.2.32](https://github.com/hatiolab/operato/compare/v0.2.31...v0.2.32) (2021-12-03)
|
134
123
|
|
135
124
|
**Note:** Version bump only for package @operato/input
|
136
125
|
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
126
|
### [0.2.31](https://github.com/hatiolab/operato/compare/v0.2.30...v0.2.31) (2021-12-03)
|
142
127
|
|
143
128
|
**Note:** Version bump only for package @operato/input
|
144
129
|
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
130
|
### [0.2.30](https://github.com/hatiolab/operato/compare/v0.2.29...v0.2.30) (2021-12-01)
|
150
131
|
|
151
132
|
**Note:** Version bump only for package @operato/input
|
152
133
|
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
134
|
### [0.2.27](https://github.com/hatiolab/operato/compare/v0.2.26...v0.2.27) (2021-11-29)
|
158
135
|
|
159
|
-
|
160
136
|
### :rocket: New Features
|
161
137
|
|
162
|
-
|
163
|
-
|
164
|
-
|
138
|
+
- move in lottie-player ([a542700](https://github.com/hatiolab/operato/commit/a542700bddb4960a65580e1ee14bbaae8493b6d3))
|
165
139
|
|
166
140
|
### [0.2.26](https://github.com/hatiolab/operato/compare/v0.2.25...v0.2.26) (2021-11-24)
|
167
141
|
|
168
142
|
**Note:** Version bump only for package @operato/input
|
169
143
|
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
144
|
### [0.2.25](https://github.com/hatiolab/operato/compare/v0.2.24...v0.2.25) (2021-11-24)
|
175
145
|
|
176
146
|
**Note:** Version bump only for package @operato/input
|
177
147
|
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
148
|
### [0.2.15](https://github.com/hatiolab/operato/compare/v0.2.14...v0.2.15) (2021-11-21)
|
183
149
|
|
184
150
|
**Note:** Version bump only for package @operato/input
|
185
151
|
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
152
|
### [0.2.10](https://github.com/hatiolab/operato/compare/v0.2.9...v0.2.10) (2021-11-15)
|
191
153
|
|
192
|
-
|
193
154
|
### :bug: Bug Fix
|
194
155
|
|
195
|
-
|
196
|
-
|
197
|
-
|
156
|
+
- update eslint-config for open-wc ([1130c63](https://github.com/hatiolab/operato/commit/1130c6300da89612f7e55a9b61a348266bea0b96))
|
198
157
|
|
199
158
|
### [0.2.9](https://github.com/hatiolab/operato/compare/v0.2.8...v0.2.9) (2021-11-06)
|
200
159
|
|
201
|
-
|
202
160
|
### :rocket: New Features
|
203
161
|
|
204
|
-
|
205
|
-
|
206
|
-
|
162
|
+
- added webcomponents for ocr, barcode ([45787ca](https://github.com/hatiolab/operato/commit/45787ca9b1db973307e19e14cdcac7369805be9a))
|
207
163
|
|
208
164
|
### [0.2.8](https://github.com/hatiolab/operato/compare/v0.2.7...v0.2.8) (2021-11-05)
|
209
165
|
|
210
|
-
|
211
166
|
### :bug: Bug Fix
|
212
167
|
|
213
|
-
|
214
|
-
|
215
|
-
|
168
|
+
- change package name 'property-editor' => 'input' ([3c9436a](https://github.com/hatiolab/operato/commit/3c9436aa6a10eff0196e0a0725b52bb2d0a9f7b8))
|
216
169
|
|
217
170
|
### [0.2.5](https://github.com/hatiolab/operato/compare/v0.2.4...v0.2.5) (2021-11-04)
|
218
171
|
|
package/demo/index-barcode.html
CHANGED
@@ -45,12 +45,14 @@
|
|
45
45
|
|
46
46
|
function onchange(e) {
|
47
47
|
const target = e.target
|
48
|
-
console.log(target.name, target.
|
48
|
+
console.log(target.name, target.value)
|
49
49
|
|
50
50
|
const formData = new FormData(form)
|
51
|
+
console.log('<---- entries begins ----')
|
51
52
|
for (var pair of formData.entries()) {
|
52
53
|
console.log(pair[0] + ', ' + pair[1])
|
53
54
|
}
|
55
|
+
console.log('---- entries ends ------>')
|
54
56
|
}
|
55
57
|
|
56
58
|
render(
|
@@ -30,9 +30,9 @@
|
|
30
30
|
render(
|
31
31
|
html`
|
32
32
|
<ox-buttons-radio name="group" @change=${onchange}>
|
33
|
-
<div value="top">TOP</div>
|
34
|
-
<div value="middle">MID</div>
|
35
|
-
<div value="bottom">BOT</div>
|
33
|
+
<div data-value="top">TOP</div>
|
34
|
+
<div data-value="middle">MID</div>
|
35
|
+
<div data-value="bottom">BOT</div>
|
36
36
|
</ox-buttons-radio>
|
37
37
|
`,
|
38
38
|
form
|
@@ -0,0 +1,61 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="en-GB">
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8" />
|
5
|
+
<style>
|
6
|
+
body {
|
7
|
+
background: #fafafa;
|
8
|
+
}
|
9
|
+
|
10
|
+
.customized {
|
11
|
+
/* checkbox default */
|
12
|
+
--ox-checkbox-fill-color: rgba(0, 0, 0, 0.1);
|
13
|
+
--ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
|
14
|
+
--ox-checkbox-border-radius: var(--border-radius, 4px);
|
15
|
+
--ox-checkbox-size: 15px;
|
16
|
+
--ox-checkbox-background-color: var(--theme-white-color, #fff);
|
17
|
+
--ox-checkbox-label-color: var(--primary-text-color, #3a5877);
|
18
|
+
--ox-checkbox-label-margin: 0 0 0 7px;
|
19
|
+
|
20
|
+
/* checkbox checked */
|
21
|
+
--ox-checkbox-checked-background-color: var(--ox-checkbox-background-color);
|
22
|
+
--ox-checkbox-checked-color: var(--primary-color, #38a25b);
|
23
|
+
--ox-checkbox-checked-border: 1px solid var(--ox-checkbox-checked-color);
|
24
|
+
--ox-checkbox-checked-font-weight: bold;
|
25
|
+
|
26
|
+
/* checkbox unchecked */
|
27
|
+
--ox-checkbox-unchecked-background-color: var(--ox-checkbox-background-color);
|
28
|
+
--ox-checkbox-unchecked-border: var(--ox-checkbox-border);
|
29
|
+
--ox-checkbox-unchecked-color: var(--ox-checkbox-fill-color);
|
30
|
+
|
31
|
+
/* checkbox disabled */
|
32
|
+
--ox-checkbox-disabled-opacity: 0.5;
|
33
|
+
|
34
|
+
font-size: 1.1em;
|
35
|
+
}
|
36
|
+
</style>
|
37
|
+
</head>
|
38
|
+
<body>
|
39
|
+
<form id="demo"></form>
|
40
|
+
|
41
|
+
<script type="module">
|
42
|
+
import { html, render } from 'lit'
|
43
|
+
import '../dist/src/ox-input-code.js'
|
44
|
+
const form = document.querySelector('#demo')
|
45
|
+
|
46
|
+
function onchange(e) {
|
47
|
+
const target = e.target
|
48
|
+
console.log(target.name, target.value)
|
49
|
+
|
50
|
+
const formData = new FormData(form)
|
51
|
+
console.log('<---- entries begins ----')
|
52
|
+
for (var pair of formData.entries()) {
|
53
|
+
console.log(pair[0] + ', ' + pair[1])
|
54
|
+
}
|
55
|
+
console.log('---- entries ends ------>')
|
56
|
+
}
|
57
|
+
|
58
|
+
render(html` <ox-input-code name="input-a" @change=${onchange}></ox-input-code> `, form)
|
59
|
+
</script>
|
60
|
+
</body>
|
61
|
+
</html>
|
package/demo/index.html
CHANGED
@@ -40,7 +40,7 @@
|
|
40
40
|
|
41
41
|
<script type="module">
|
42
42
|
import { html, render } from 'lit'
|
43
|
-
import '../dist/src/ox-input-
|
43
|
+
import '../dist/src/ox-input-code.js'
|
44
44
|
const form = document.querySelector('#demo')
|
45
45
|
|
46
46
|
function onchange(e) {
|
@@ -56,11 +56,7 @@
|
|
56
56
|
}
|
57
57
|
|
58
58
|
render(
|
59
|
-
html`
|
60
|
-
<ox-input-barcode name="input-a" @change=${onchange}></ox-input-barcode>
|
61
|
-
<ox-input-barcode name="input-b" @change=${onchange}>hatiolab</ox-input-barcode>
|
62
|
-
<ox-input-barcode name="input-c" @change=${onchange}>ibex</ox-input-barcode>
|
63
|
-
`,
|
59
|
+
html` <ox-input-code name="input-code" @change=${onchange} tab-size="4" tab-as-space="true"></ox-input-code> `,
|
64
60
|
form
|
65
61
|
)
|
66
62
|
</script>
|
package/dist/src/index.d.ts
CHANGED
package/dist/src/index.js
CHANGED
package/dist/src/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA","sourcesContent":["export * from './ox-formfield'\nexport * from './ox-input-angle'\nexport * from './ox-input-3dish'\nexport * from './ox-input-stack'\nexport * from './ox-input-barcode'\nexport * from './ox-buttons-radio'\nexport * from './ox-checkbox'\nexport * from './ox-select'\n"]}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA","sourcesContent":["export * from './ox-formfield'\nexport * from './ox-input-angle'\nexport * from './ox-input-3dish'\nexport * from './ox-input-stack'\nexport * from './ox-input-barcode'\nexport * from './ox-buttons-radio'\nexport * from './ox-checkbox'\nexport * from './ox-select'\nexport * from './ox-input-code'\n"]}
|
@@ -48,7 +48,7 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends OxFormField {
|
|
48
48
|
}
|
49
49
|
_onChanged() {
|
50
50
|
this.buttons.forEach(button => {
|
51
|
-
if (this.value === button.getAttribute('value')) {
|
51
|
+
if (this.value === button.getAttribute('data-value')) {
|
52
52
|
button.setAttribute('active', '');
|
53
53
|
}
|
54
54
|
else {
|
@@ -58,14 +58,14 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends OxFormField {
|
|
58
58
|
}
|
59
59
|
_onTapButton(e) {
|
60
60
|
var target = e.target;
|
61
|
-
target = target.closest('[value]');
|
62
|
-
if (target === this) {
|
61
|
+
target = target.closest('[data-value]');
|
62
|
+
if (!target || target === this) {
|
63
63
|
return;
|
64
64
|
}
|
65
65
|
var old = this.value;
|
66
66
|
if (!this.mandatory) {
|
67
67
|
if (!target.getAttribute('active')) {
|
68
|
-
this.value = target.getAttribute('value');
|
68
|
+
this.value = target.getAttribute('data-value');
|
69
69
|
target.setAttribute('active', '');
|
70
70
|
}
|
71
71
|
else {
|
@@ -74,7 +74,7 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends OxFormField {
|
|
74
74
|
}
|
75
75
|
}
|
76
76
|
else {
|
77
|
-
this.value = target.getAttribute('value');
|
77
|
+
this.value = target.getAttribute('data-value');
|
78
78
|
target.setAttribute('active', '');
|
79
79
|
}
|
80
80
|
if (old !== this.value) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,
|
1
|
+
{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-formfield'\n\n/**\n여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.\n\nExample:\n\n <ox-buttons-radio @change=${e => this._onChange(e)} value=${value}>\n <div value=\"top\"></div>\n <div value=\"middle\"></div>\n <div value=\"bottom\"></div>\n </ox-buttons-radio>\n*/\n@customElement('ox-buttons-radio')\nexport class PropertyButtonsRadio extends OxFormField {\n static styles = [\n css`\n :host {\n display: inline-block;\n }\n `\n ]\n\n /**\n * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.\n */\n @property({ type: Object }) value: Object | null = null\n @property({ type: Boolean }) mandatory!: boolean\n\n @state() _slotObserver: MutationObserver = new MutationObserver(mutations => {\n this._onChanged()\n })\n\n render() {\n return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this._slotObserver?.observe(this, { childList: true })\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this._slotObserver?.disconnect()\n }\n\n updated(changes: PropertyValues<this>) {\n changes.has('value') && this._onChanged()\n }\n\n get buttons() {\n return Array.from(this.querySelectorAll('*'))\n }\n\n _onChanged() {\n this.buttons.forEach(button => {\n if (this.value === button.getAttribute('data-value')) {\n button.setAttribute('active', '')\n } else {\n button.removeAttribute('active')\n }\n })\n }\n\n _onTapButton(e: Event) {\n var target = e.target as HTMLElement\n target = target.closest('[data-value]') as HTMLElement\n\n if (!target || target === this) {\n return\n }\n\n var old = this.value\n\n if (!this.mandatory) {\n if (!target.getAttribute('active')) {\n this.value = target.getAttribute('data-value')\n target.setAttribute('active', '')\n } else {\n this.value = null\n target.removeAttribute('active')\n }\n } else {\n this.value = target.getAttribute('data-value')\n target.setAttribute('active', '')\n }\n\n if (old !== this.value) {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && formData.append(this.name, JSON.stringify(this.value))\n }\n}\n"]}
|
@@ -0,0 +1,35 @@
|
|
1
|
+
/**
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
3
|
+
*/
|
4
|
+
import 'codemirror/mode/javascript/javascript';
|
5
|
+
import 'codemirror/mode/python/python';
|
6
|
+
import 'codemirror/addon/display/fullscreen';
|
7
|
+
import 'codemirror/addon/display/autorefresh';
|
8
|
+
import { PropertyValues } from 'lit';
|
9
|
+
import CodeMirror from 'codemirror';
|
10
|
+
import { OxFormField } from './ox-formfield';
|
11
|
+
/**
|
12
|
+
WEB Component for code-mirror code editor.
|
13
|
+
|
14
|
+
Example:
|
15
|
+
|
16
|
+
<things-editor-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
|
17
|
+
</things-editor-code>
|
18
|
+
*/
|
19
|
+
export default class OxInputCode extends OxFormField {
|
20
|
+
static styles: import("lit").CSSResult[];
|
21
|
+
/**
|
22
|
+
* `value`는 에디터에서 작성중인 contents이다.
|
23
|
+
*/
|
24
|
+
value: string;
|
25
|
+
mode?: string;
|
26
|
+
tabSize: number;
|
27
|
+
tabAsSpace: boolean;
|
28
|
+
private _outside_changing;
|
29
|
+
private _self_changing;
|
30
|
+
private _editor;
|
31
|
+
private _changed;
|
32
|
+
updated(changes: PropertyValues<this>): void;
|
33
|
+
render(): import("lit-html").TemplateResult<1>;
|
34
|
+
get editor(): CodeMirror.EditorFromTextArea | null | undefined;
|
35
|
+
}
|
@@ -0,0 +1,149 @@
|
|
1
|
+
/**
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
3
|
+
*/
|
4
|
+
import { __decorate } from "tslib";
|
5
|
+
import 'codemirror/mode/javascript/javascript';
|
6
|
+
import 'codemirror/mode/python/python';
|
7
|
+
import 'codemirror/addon/display/fullscreen';
|
8
|
+
import 'codemirror/addon/display/autorefresh';
|
9
|
+
import { css, html, unsafeCSS } from 'lit';
|
10
|
+
import { customElement, property } from 'lit/decorators';
|
11
|
+
import CodeMirror from 'codemirror';
|
12
|
+
import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css';
|
13
|
+
import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css';
|
14
|
+
import NightThemeStyle from '!!text-loader!codemirror/theme/night.css';
|
15
|
+
import { OxFormField } from './ox-formfield';
|
16
|
+
import { ScrollbarStyles } from '@operato/styles';
|
17
|
+
/**
|
18
|
+
WEB Component for code-mirror code editor.
|
19
|
+
|
20
|
+
Example:
|
21
|
+
|
22
|
+
<things-editor-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
|
23
|
+
</things-editor-code>
|
24
|
+
*/
|
25
|
+
let OxInputCode = class OxInputCode extends OxFormField {
|
26
|
+
constructor() {
|
27
|
+
super(...arguments);
|
28
|
+
/**
|
29
|
+
* `value`는 에디터에서 작성중인 contents이다.
|
30
|
+
*/
|
31
|
+
this.value = '';
|
32
|
+
this.tabSize = 2;
|
33
|
+
this.tabAsSpace = true;
|
34
|
+
this._outside_changing = false;
|
35
|
+
this._self_changing = false;
|
36
|
+
this._editor = null;
|
37
|
+
this._changed = false;
|
38
|
+
}
|
39
|
+
// private lint: any
|
40
|
+
// private hintOptions: any
|
41
|
+
updated(changes) {
|
42
|
+
var _a, _b;
|
43
|
+
this._outside_changing = true;
|
44
|
+
if (changes.has('value') && this.editor && !this._self_changing) {
|
45
|
+
(_a = this.editor) === null || _a === void 0 ? void 0 : _a.setValue(this.value === undefined ? '' : String(this.value));
|
46
|
+
(_b = this.editor) === null || _b === void 0 ? void 0 : _b.refresh();
|
47
|
+
}
|
48
|
+
this._outside_changing = false;
|
49
|
+
}
|
50
|
+
render() {
|
51
|
+
return html ` <textarea></textarea> `;
|
52
|
+
}
|
53
|
+
get editor() {
|
54
|
+
if (!this._editor) {
|
55
|
+
let textarea = this.renderRoot.querySelector('textarea');
|
56
|
+
let mode = this.mode || 'javascript';
|
57
|
+
let tabSize = Number(this.tabSize) || 2;
|
58
|
+
let indentUnit = tabSize;
|
59
|
+
// let lint = this.lint
|
60
|
+
// let hintOptions = this.hintOptions
|
61
|
+
let tabAsSpace = this.tabAsSpace;
|
62
|
+
if (textarea) {
|
63
|
+
this._editor = CodeMirror.fromTextArea(textarea, {
|
64
|
+
value: this.value,
|
65
|
+
mode,
|
66
|
+
// lint,
|
67
|
+
// hintOptions,
|
68
|
+
tabSize,
|
69
|
+
indentUnit,
|
70
|
+
lineNumbers: false,
|
71
|
+
showCursorWhenSelecting: true,
|
72
|
+
theme: 'night',
|
73
|
+
extraKeys: {
|
74
|
+
F11: function (cm) {
|
75
|
+
cm.setOption('fullScreen', !cm.getOption('fullScreen'));
|
76
|
+
},
|
77
|
+
Esc: function (cm) {
|
78
|
+
cm.setOption('fullScreen', !cm.getOption('fullScreen'));
|
79
|
+
},
|
80
|
+
// https://github.com/codemirror/CodeMirror/issues/988#issuecomment-37095621
|
81
|
+
Tab: tabAsSpace
|
82
|
+
? function (cm) {
|
83
|
+
cm.replaceSelection(Array(cm.getOption('tabSize')).join(' '));
|
84
|
+
}
|
85
|
+
: false
|
86
|
+
},
|
87
|
+
autoRefresh: {
|
88
|
+
delay: 500
|
89
|
+
}
|
90
|
+
});
|
91
|
+
this._editor.on('blur', e => {
|
92
|
+
if (!this._changed)
|
93
|
+
return;
|
94
|
+
this.value = e.getValue();
|
95
|
+
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
96
|
+
});
|
97
|
+
this._editor.on('change', async (e) => {
|
98
|
+
this._self_changing = true;
|
99
|
+
this._changed = true;
|
100
|
+
await this.updateComplete;
|
101
|
+
this._self_changing = false;
|
102
|
+
});
|
103
|
+
}
|
104
|
+
}
|
105
|
+
return this._editor;
|
106
|
+
}
|
107
|
+
};
|
108
|
+
OxInputCode.styles = [
|
109
|
+
ScrollbarStyles,
|
110
|
+
css `
|
111
|
+
${unsafeCSS(CodeMirrorStyle)}
|
112
|
+
${unsafeCSS(FullScreenStyle)}
|
113
|
+
${unsafeCSS(NightThemeStyle)}
|
114
|
+
`,
|
115
|
+
css `
|
116
|
+
:host {
|
117
|
+
display: block;
|
118
|
+
position: relative;
|
119
|
+
}
|
120
|
+
|
121
|
+
textarea {
|
122
|
+
display: block;
|
123
|
+
height: 100%;
|
124
|
+
width: 100%;
|
125
|
+
resize: none;
|
126
|
+
font-size: 16px;
|
127
|
+
line-height: 20px;
|
128
|
+
border: 0px;
|
129
|
+
padding: 0px;
|
130
|
+
}
|
131
|
+
`
|
132
|
+
];
|
133
|
+
__decorate([
|
134
|
+
property({ type: String })
|
135
|
+
], OxInputCode.prototype, "value", void 0);
|
136
|
+
__decorate([
|
137
|
+
property({ type: String })
|
138
|
+
], OxInputCode.prototype, "mode", void 0);
|
139
|
+
__decorate([
|
140
|
+
property({ type: Number, attribute: 'tab-size' })
|
141
|
+
], OxInputCode.prototype, "tabSize", void 0);
|
142
|
+
__decorate([
|
143
|
+
property({ type: Boolean, attribute: 'tab-as-space' })
|
144
|
+
], OxInputCode.prototype, "tabAsSpace", void 0);
|
145
|
+
OxInputCode = __decorate([
|
146
|
+
customElement('ox-input-code')
|
147
|
+
], OxInputCode);
|
148
|
+
export default OxInputCode;
|
149
|
+
//# sourceMappingURL=ox-input-code.js.map
|