@operato/input 0.2.45 → 0.2.49
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 +48 -87
- 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.d.ts +4 -1
- package/dist/src/ox-buttons-radio.js +24 -10
- 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 +24 -11
- 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,7 +3,7 @@
|
|
|
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.49](https://github.com/hatiolab/operato/compare/v0.2.48...v0.2.49) (2021-12-14)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @operato/input
|
|
9
9
|
|
|
@@ -11,192 +11,153 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
### [0.2.
|
|
14
|
+
### [0.2.48](https://github.com/hatiolab/operato/compare/v0.2.47...v0.2.48) (2021-12-14)
|
|
15
15
|
|
|
16
|
-
**Note:** Version bump only for package @operato/input
|
|
17
16
|
|
|
17
|
+
### :rocket: New Features
|
|
18
18
|
|
|
19
|
+
* add ox-input-data, ox-input-code into @operato/input ([4951a6b](https://github.com/hatiolab/operato/commit/4951a6bf76456491018829be521637dcedb068fe))
|
|
19
20
|
|
|
20
21
|
|
|
22
|
+
### :bug: Bug Fix
|
|
21
23
|
|
|
22
|
-
|
|
24
|
+
* remove three from tsconfig.json ([7147701](https://github.com/hatiolab/operato/commit/7147701b6361e390254800e00a2e917617194eb1))
|
|
25
|
+
* upgrade @hatiolab/things-scene ([1ca0161](https://github.com/hatiolab/operato/commit/1ca0161aa2e844c939613aa0109ad3e12606786d))
|
|
23
26
|
|
|
24
27
|
|
|
28
|
+
|
|
29
|
+
### [0.2.47](https://github.com/hatiolab/operato/compare/v0.2.46...v0.2.47) (2021-12-13)
|
|
30
|
+
|
|
25
31
|
### :bug: Bug Fix
|
|
26
32
|
|
|
27
|
-
|
|
28
|
-
* enable ox-input-barcode to fire keyboard events ([8a81c93](https://github.com/hatiolab/operato/commit/8a81c936eef06fc9570034b42b1ce85be8a93ef6))
|
|
29
|
-
* ox-input-barcode event ([87038da](https://github.com/hatiolab/operato/commit/87038da5589bb728da2397384d55f8ec0cc9b5d4))
|
|
33
|
+
- operato/board/board-modeller and operato/input/buttons-radio ([d2a4344](https://github.com/hatiolab/operato/commit/d2a4344ae2ad10c9ebfca919a0c9ff7de29d7c6a))
|
|
30
34
|
|
|
35
|
+
### [0.2.46](https://github.com/hatiolab/operato/compare/v0.2.45...v0.2.46) (2021-12-12)
|
|
31
36
|
|
|
37
|
+
### :rocket: New Features
|
|
32
38
|
|
|
33
|
-
|
|
39
|
+
- add operato/board modeller ([2acd6b3](https://github.com/hatiolab/operato/commit/2acd6b31a4d91317fa84ecee67874d2242968ec6))
|
|
34
40
|
|
|
41
|
+
### :bug: Bug Fix
|
|
35
42
|
|
|
36
|
-
|
|
43
|
+
- ox-button-radio add mutation observer ([8e59f63](https://github.com/hatiolab/operato/commit/8e59f633b435113841850423d2bd72ff1389fa98))
|
|
44
|
+
- remove duplicated files ([215e60b](https://github.com/hatiolab/operato/commit/215e60b693983aae387fd23ea2f510eb411c7dac))
|
|
45
|
+
- upgrade @hatiolab/things-scene@2.7.28 ([961c586](https://github.com/hatiolab/operato/commit/961c586b067bed39c486fc4231b2a8abd3e8b1f7))
|
|
37
46
|
|
|
38
|
-
|
|
47
|
+
### [0.2.45](https://github.com/hatiolab/operato/compare/v0.2.44...v0.2.45) (2021-12-11)
|
|
39
48
|
|
|
49
|
+
**Note:** Version bump only for package @operato/input
|
|
40
50
|
|
|
51
|
+
### [0.2.44](https://github.com/hatiolab/operato/compare/v0.2.43...v0.2.44) (2021-12-09)
|
|
41
52
|
|
|
42
|
-
|
|
53
|
+
**Note:** Version bump only for package @operato/input
|
|
43
54
|
|
|
55
|
+
### [0.2.43](https://github.com/hatiolab/operato/compare/v0.2.42...v0.2.43) (2021-12-08)
|
|
44
56
|
|
|
45
57
|
### :bug: Bug Fix
|
|
46
58
|
|
|
47
|
-
|
|
48
|
-
|
|
59
|
+
- add missing export in operato/input ([67dad8a](https://github.com/hatiolab/operato/commit/67dad8ad28be8a40284a546077e268e6ac887047))
|
|
60
|
+
- enable ox-input-barcode to fire keyboard events ([8a81c93](https://github.com/hatiolab/operato/commit/8a81c936eef06fc9570034b42b1ce85be8a93ef6))
|
|
61
|
+
- ox-input-barcode event ([87038da](https://github.com/hatiolab/operato/commit/87038da5589bb728da2397384d55f8ec0cc9b5d4))
|
|
49
62
|
|
|
63
|
+
### [0.2.42](https://github.com/hatiolab/operato/compare/v0.2.41...v0.2.42) (2021-12-07)
|
|
50
64
|
|
|
65
|
+
### :rocket: New Features
|
|
51
66
|
|
|
52
|
-
|
|
67
|
+
- add ox-input-barcode and export sorters property for grist ([0659d20](https://github.com/hatiolab/operato/commit/0659d20fcbfb48b0790ee57154c9108491566509))
|
|
53
68
|
|
|
54
|
-
|
|
69
|
+
### [0.2.41](https://github.com/hatiolab/operato/compare/v0.2.40...v0.2.41) (2021-12-07)
|
|
55
70
|
|
|
71
|
+
### :bug: Bug Fix
|
|
56
72
|
|
|
73
|
+
- popup and input style ([11c5b3e](https://github.com/hatiolab/operato/commit/11c5b3e4bf3f08d18673ada585e50a69b9c88b5b))
|
|
74
|
+
- popup style ([43ee008](https://github.com/hatiolab/operato/commit/43ee008afbbd817bb002d2e3c420044f939c9415))
|
|
57
75
|
|
|
76
|
+
### [0.2.38](https://github.com/hatiolab/operato/compare/v0.2.37...v0.2.38) (2021-12-07)
|
|
58
77
|
|
|
78
|
+
**Note:** Version bump only for package @operato/input
|
|
59
79
|
|
|
60
80
|
### [0.2.36](https://github.com/hatiolab/operato/compare/v0.2.35...v0.2.36) (2021-12-06)
|
|
61
81
|
|
|
62
|
-
|
|
63
82
|
### :mega: Other
|
|
64
83
|
|
|
65
|
-
|
|
66
|
-
|
|
84
|
+
- operato/input/ox-select ([dd2fcbc](https://github.com/hatiolab/operato/commit/dd2fcbcee22705c1d68d5743f04cb0d5c1739503))
|
|
67
85
|
|
|
68
86
|
### :rocket: New Features
|
|
69
87
|
|
|
70
|
-
|
|
71
|
-
|
|
88
|
+
- adding filter options for data-grist ([3620e8b](https://github.com/hatiolab/operato/commit/3620e8b5c39e7e66f8e7ab39b2ae7200f7f7afb5))
|
|
72
89
|
|
|
73
90
|
### :bug: Bug Fix
|
|
74
91
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
92
|
+
- apply class name prefix Ox for operato/popup ([d528848](https://github.com/hatiolab/operato/commit/d5288486ea0e1bec84fff3c5b6bac696eb701e5d))
|
|
93
|
+
- apply things-scene version ([cbebd17](https://github.com/hatiolab/operato/commit/cbebd1729704e6e42e70d60a4e3b122d42271c2e))
|
|
94
|
+
- operato/input to support formfield ([21b4d46](https://github.com/hatiolab/operato/commit/21b4d46d750ba833c571b5caeed27eebd8aa03ca))
|
|
95
|
+
- operato/input to support formfield ([544bf92](https://github.com/hatiolab/operato/commit/544bf928946d878aa967f33b20efdf90eb8e82f5))
|
|
96
|
+
- operato/ox-popup-list rewritten ([f78b3e9](https://github.com/hatiolab/operato/commit/f78b3e9623faac5ea653442ced653173d630d9e6))
|
|
97
|
+
- operato/popup, input sample ([116b037](https://github.com/hatiolab/operato/commit/116b0371446cb24d8863c2bdea876b97f6e11dfd))
|
|
98
|
+
- operato/popup, input sample ([31fb99f](https://github.com/hatiolab/operato/commit/31fb99fc4e37a26c38826dd3554f92ded0632e82))
|
|
84
99
|
|
|
85
100
|
### [0.2.35](https://github.com/hatiolab/operato/compare/v0.2.34...v0.2.35) (2021-12-03)
|
|
86
101
|
|
|
87
102
|
**Note:** Version bump only for package @operato/input
|
|
88
103
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
104
|
### [0.2.34](https://github.com/hatiolab/operato/compare/v0.2.33...v0.2.34) (2021-12-03)
|
|
94
105
|
|
|
95
106
|
**Note:** Version bump only for package @operato/input
|
|
96
107
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
108
|
### [0.2.33](https://github.com/hatiolab/operato/compare/v0.2.32...v0.2.33) (2021-12-03)
|
|
102
109
|
|
|
103
110
|
**Note:** Version bump only for package @operato/input
|
|
104
111
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
112
|
**Note:** Version bump only for package @operato/input
|
|
112
113
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
114
|
### [0.2.32](https://github.com/hatiolab/operato/compare/v0.2.31...v0.2.32) (2021-12-03)
|
|
118
115
|
|
|
119
116
|
**Note:** Version bump only for package @operato/input
|
|
120
117
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
118
|
### [0.2.31](https://github.com/hatiolab/operato/compare/v0.2.30...v0.2.31) (2021-12-03)
|
|
126
119
|
|
|
127
120
|
**Note:** Version bump only for package @operato/input
|
|
128
121
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
122
|
### [0.2.30](https://github.com/hatiolab/operato/compare/v0.2.29...v0.2.30) (2021-12-01)
|
|
134
123
|
|
|
135
124
|
**Note:** Version bump only for package @operato/input
|
|
136
125
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
126
|
### [0.2.27](https://github.com/hatiolab/operato/compare/v0.2.26...v0.2.27) (2021-11-29)
|
|
142
127
|
|
|
143
|
-
|
|
144
128
|
### :rocket: New Features
|
|
145
129
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
130
|
+
- move in lottie-player ([a542700](https://github.com/hatiolab/operato/commit/a542700bddb4960a65580e1ee14bbaae8493b6d3))
|
|
149
131
|
|
|
150
132
|
### [0.2.26](https://github.com/hatiolab/operato/compare/v0.2.25...v0.2.26) (2021-11-24)
|
|
151
133
|
|
|
152
134
|
**Note:** Version bump only for package @operato/input
|
|
153
135
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
136
|
### [0.2.25](https://github.com/hatiolab/operato/compare/v0.2.24...v0.2.25) (2021-11-24)
|
|
159
137
|
|
|
160
138
|
**Note:** Version bump only for package @operato/input
|
|
161
139
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
140
|
### [0.2.15](https://github.com/hatiolab/operato/compare/v0.2.14...v0.2.15) (2021-11-21)
|
|
167
141
|
|
|
168
142
|
**Note:** Version bump only for package @operato/input
|
|
169
143
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
144
|
### [0.2.10](https://github.com/hatiolab/operato/compare/v0.2.9...v0.2.10) (2021-11-15)
|
|
175
145
|
|
|
176
|
-
|
|
177
146
|
### :bug: Bug Fix
|
|
178
147
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
148
|
+
- update eslint-config for open-wc ([1130c63](https://github.com/hatiolab/operato/commit/1130c6300da89612f7e55a9b61a348266bea0b96))
|
|
182
149
|
|
|
183
150
|
### [0.2.9](https://github.com/hatiolab/operato/compare/v0.2.8...v0.2.9) (2021-11-06)
|
|
184
151
|
|
|
185
|
-
|
|
186
152
|
### :rocket: New Features
|
|
187
153
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
154
|
+
- added webcomponents for ocr, barcode ([45787ca](https://github.com/hatiolab/operato/commit/45787ca9b1db973307e19e14cdcac7369805be9a))
|
|
191
155
|
|
|
192
156
|
### [0.2.8](https://github.com/hatiolab/operato/compare/v0.2.7...v0.2.8) (2021-11-05)
|
|
193
157
|
|
|
194
|
-
|
|
195
158
|
### :bug: Bug Fix
|
|
196
159
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
160
|
+
- change package name 'property-editor' => 'input' ([3c9436a](https://github.com/hatiolab/operato/commit/3c9436aa6a10eff0196e0a0725b52bb2d0a9f7b8))
|
|
200
161
|
|
|
201
162
|
### [0.2.5](https://github.com/hatiolab/operato/compare/v0.2.4...v0.2.5) (2021-11-04)
|
|
202
163
|
|
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"]}
|
|
@@ -21,10 +21,13 @@ export declare class PropertyButtonsRadio extends OxFormField {
|
|
|
21
21
|
*/
|
|
22
22
|
value: Object | null;
|
|
23
23
|
mandatory: boolean;
|
|
24
|
+
_slotObserver: MutationObserver;
|
|
24
25
|
render(): import("lit-html").TemplateResult<1>;
|
|
26
|
+
connectedCallback(): void;
|
|
27
|
+
disconnectedCallback(): void;
|
|
25
28
|
updated(changes: PropertyValues<this>): void;
|
|
26
29
|
get buttons(): Element[];
|
|
27
|
-
|
|
30
|
+
_onChanged(): void;
|
|
28
31
|
_onTapButton(e: Event): void;
|
|
29
32
|
protected appendFormData({ formData }: FormDataEvent): void;
|
|
30
33
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
5
|
import { css, html } from 'lit';
|
|
6
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
6
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
7
7
|
import { OxFormField } from './ox-formfield';
|
|
8
8
|
/**
|
|
9
9
|
여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
|
|
@@ -23,19 +23,32 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends OxFormField {
|
|
|
23
23
|
* `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.
|
|
24
24
|
*/
|
|
25
25
|
this.value = null;
|
|
26
|
+
this._slotObserver = new MutationObserver(mutations => {
|
|
27
|
+
this._onChanged();
|
|
28
|
+
});
|
|
26
29
|
}
|
|
27
30
|
render() {
|
|
28
31
|
return html ` <slot @click=${(e) => this._onTapButton(e)}></slot> `;
|
|
29
32
|
}
|
|
33
|
+
connectedCallback() {
|
|
34
|
+
var _a;
|
|
35
|
+
super.connectedCallback();
|
|
36
|
+
(_a = this._slotObserver) === null || _a === void 0 ? void 0 : _a.observe(this, { childList: true });
|
|
37
|
+
}
|
|
38
|
+
disconnectedCallback() {
|
|
39
|
+
var _a;
|
|
40
|
+
super.disconnectedCallback();
|
|
41
|
+
(_a = this._slotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
42
|
+
}
|
|
30
43
|
updated(changes) {
|
|
31
|
-
changes.has('value') && this.
|
|
44
|
+
changes.has('value') && this._onChanged();
|
|
32
45
|
}
|
|
33
46
|
get buttons() {
|
|
34
47
|
return Array.from(this.querySelectorAll('*'));
|
|
35
48
|
}
|
|
36
|
-
|
|
49
|
+
_onChanged() {
|
|
37
50
|
this.buttons.forEach(button => {
|
|
38
|
-
if (value === button.getAttribute('value')) {
|
|
51
|
+
if (this.value === button.getAttribute('data-value')) {
|
|
39
52
|
button.setAttribute('active', '');
|
|
40
53
|
}
|
|
41
54
|
else {
|
|
@@ -45,16 +58,14 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends OxFormField {
|
|
|
45
58
|
}
|
|
46
59
|
_onTapButton(e) {
|
|
47
60
|
var target = e.target;
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
if (target === this) {
|
|
61
|
+
target = target.closest('[data-value]');
|
|
62
|
+
if (!target || target === this) {
|
|
52
63
|
return;
|
|
53
64
|
}
|
|
54
65
|
var old = this.value;
|
|
55
66
|
if (!this.mandatory) {
|
|
56
67
|
if (!target.getAttribute('active')) {
|
|
57
|
-
this.value = target.getAttribute('value');
|
|
68
|
+
this.value = target.getAttribute('data-value');
|
|
58
69
|
target.setAttribute('active', '');
|
|
59
70
|
}
|
|
60
71
|
else {
|
|
@@ -63,7 +74,7 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends OxFormField {
|
|
|
63
74
|
}
|
|
64
75
|
}
|
|
65
76
|
else {
|
|
66
|
-
this.value = target.getAttribute('value');
|
|
77
|
+
this.value = target.getAttribute('data-value');
|
|
67
78
|
target.setAttribute('active', '');
|
|
68
79
|
}
|
|
69
80
|
if (old !== this.value) {
|
|
@@ -91,6 +102,9 @@ __decorate([
|
|
|
91
102
|
__decorate([
|
|
92
103
|
property({ type: Boolean })
|
|
93
104
|
], PropertyButtonsRadio.prototype, "mandatory", void 0);
|
|
105
|
+
__decorate([
|
|
106
|
+
state()
|
|
107
|
+
], PropertyButtonsRadio.prototype, "_slotObserver", void 0);
|
|
94
108
|
PropertyButtonsRadio = __decorate([
|
|
95
109
|
customElement('ox-buttons-radio')
|
|
96
110
|
], PropertyButtonsRadio);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;
|
|
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
|
+
}
|