@operato/input 0.2.44 → 0.2.48
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 +47 -86
- 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,192 +3,153 @@
|
|
|
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.48](https://github.com/hatiolab/operato/compare/v0.2.47...v0.2.48) (2021-12-14)
|
|
7
7
|
|
|
8
|
-
**Note:** Version bump only for package @operato/input
|
|
9
8
|
|
|
9
|
+
### :rocket: New Features
|
|
10
|
+
|
|
11
|
+
* add ox-input-data, ox-input-code into @operato/input ([4951a6b](https://github.com/hatiolab/operato/commit/4951a6bf76456491018829be521637dcedb068fe))
|
|
10
12
|
|
|
11
13
|
|
|
14
|
+
### :bug: Bug Fix
|
|
12
15
|
|
|
16
|
+
* remove three from tsconfig.json ([7147701](https://github.com/hatiolab/operato/commit/7147701b6361e390254800e00a2e917617194eb1))
|
|
17
|
+
* upgrade @hatiolab/things-scene ([1ca0161](https://github.com/hatiolab/operato/commit/1ca0161aa2e844c939613aa0109ad3e12606786d))
|
|
13
18
|
|
|
14
|
-
### [0.2.43](https://github.com/hatiolab/operato/compare/v0.2.42...v0.2.43) (2021-12-08)
|
|
15
19
|
|
|
16
20
|
|
|
21
|
+
### [0.2.47](https://github.com/hatiolab/operato/compare/v0.2.46...v0.2.47) (2021-12-13)
|
|
22
|
+
|
|
17
23
|
### :bug: Bug Fix
|
|
18
24
|
|
|
19
|
-
|
|
20
|
-
* enable ox-input-barcode to fire keyboard events ([8a81c93](https://github.com/hatiolab/operato/commit/8a81c936eef06fc9570034b42b1ce85be8a93ef6))
|
|
21
|
-
* ox-input-barcode event ([87038da](https://github.com/hatiolab/operato/commit/87038da5589bb728da2397384d55f8ec0cc9b5d4))
|
|
25
|
+
- operato/board/board-modeller and operato/input/buttons-radio ([d2a4344](https://github.com/hatiolab/operato/commit/d2a4344ae2ad10c9ebfca919a0c9ff7de29d7c6a))
|
|
22
26
|
|
|
27
|
+
### [0.2.46](https://github.com/hatiolab/operato/compare/v0.2.45...v0.2.46) (2021-12-12)
|
|
23
28
|
|
|
29
|
+
### :rocket: New Features
|
|
24
30
|
|
|
25
|
-
|
|
31
|
+
- add operato/board modeller ([2acd6b3](https://github.com/hatiolab/operato/commit/2acd6b31a4d91317fa84ecee67874d2242968ec6))
|
|
26
32
|
|
|
33
|
+
### :bug: Bug Fix
|
|
27
34
|
|
|
28
|
-
|
|
35
|
+
- ox-button-radio add mutation observer ([8e59f63](https://github.com/hatiolab/operato/commit/8e59f633b435113841850423d2bd72ff1389fa98))
|
|
36
|
+
- remove duplicated files ([215e60b](https://github.com/hatiolab/operato/commit/215e60b693983aae387fd23ea2f510eb411c7dac))
|
|
37
|
+
- upgrade @hatiolab/things-scene@2.7.28 ([961c586](https://github.com/hatiolab/operato/commit/961c586b067bed39c486fc4231b2a8abd3e8b1f7))
|
|
29
38
|
|
|
30
|
-
|
|
39
|
+
### [0.2.45](https://github.com/hatiolab/operato/compare/v0.2.44...v0.2.45) (2021-12-11)
|
|
31
40
|
|
|
41
|
+
**Note:** Version bump only for package @operato/input
|
|
32
42
|
|
|
43
|
+
### [0.2.44](https://github.com/hatiolab/operato/compare/v0.2.43...v0.2.44) (2021-12-09)
|
|
33
44
|
|
|
34
|
-
|
|
45
|
+
**Note:** Version bump only for package @operato/input
|
|
35
46
|
|
|
47
|
+
### [0.2.43](https://github.com/hatiolab/operato/compare/v0.2.42...v0.2.43) (2021-12-08)
|
|
36
48
|
|
|
37
49
|
### :bug: Bug Fix
|
|
38
50
|
|
|
39
|
-
|
|
40
|
-
|
|
51
|
+
- add missing export in operato/input ([67dad8a](https://github.com/hatiolab/operato/commit/67dad8ad28be8a40284a546077e268e6ac887047))
|
|
52
|
+
- enable ox-input-barcode to fire keyboard events ([8a81c93](https://github.com/hatiolab/operato/commit/8a81c936eef06fc9570034b42b1ce85be8a93ef6))
|
|
53
|
+
- ox-input-barcode event ([87038da](https://github.com/hatiolab/operato/commit/87038da5589bb728da2397384d55f8ec0cc9b5d4))
|
|
41
54
|
|
|
55
|
+
### [0.2.42](https://github.com/hatiolab/operato/compare/v0.2.41...v0.2.42) (2021-12-07)
|
|
42
56
|
|
|
57
|
+
### :rocket: New Features
|
|
43
58
|
|
|
44
|
-
|
|
59
|
+
- add ox-input-barcode and export sorters property for grist ([0659d20](https://github.com/hatiolab/operato/commit/0659d20fcbfb48b0790ee57154c9108491566509))
|
|
45
60
|
|
|
46
|
-
|
|
61
|
+
### [0.2.41](https://github.com/hatiolab/operato/compare/v0.2.40...v0.2.41) (2021-12-07)
|
|
47
62
|
|
|
63
|
+
### :bug: Bug Fix
|
|
48
64
|
|
|
65
|
+
- popup and input style ([11c5b3e](https://github.com/hatiolab/operato/commit/11c5b3e4bf3f08d18673ada585e50a69b9c88b5b))
|
|
66
|
+
- popup style ([43ee008](https://github.com/hatiolab/operato/commit/43ee008afbbd817bb002d2e3c420044f939c9415))
|
|
49
67
|
|
|
68
|
+
### [0.2.38](https://github.com/hatiolab/operato/compare/v0.2.37...v0.2.38) (2021-12-07)
|
|
50
69
|
|
|
70
|
+
**Note:** Version bump only for package @operato/input
|
|
51
71
|
|
|
52
72
|
### [0.2.36](https://github.com/hatiolab/operato/compare/v0.2.35...v0.2.36) (2021-12-06)
|
|
53
73
|
|
|
54
|
-
|
|
55
74
|
### :mega: Other
|
|
56
75
|
|
|
57
|
-
|
|
58
|
-
|
|
76
|
+
- operato/input/ox-select ([dd2fcbc](https://github.com/hatiolab/operato/commit/dd2fcbcee22705c1d68d5743f04cb0d5c1739503))
|
|
59
77
|
|
|
60
78
|
### :rocket: New Features
|
|
61
79
|
|
|
62
|
-
|
|
63
|
-
|
|
80
|
+
- adding filter options for data-grist ([3620e8b](https://github.com/hatiolab/operato/commit/3620e8b5c39e7e66f8e7ab39b2ae7200f7f7afb5))
|
|
64
81
|
|
|
65
82
|
### :bug: Bug Fix
|
|
66
83
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
84
|
+
- apply class name prefix Ox for operato/popup ([d528848](https://github.com/hatiolab/operato/commit/d5288486ea0e1bec84fff3c5b6bac696eb701e5d))
|
|
85
|
+
- apply things-scene version ([cbebd17](https://github.com/hatiolab/operato/commit/cbebd1729704e6e42e70d60a4e3b122d42271c2e))
|
|
86
|
+
- operato/input to support formfield ([21b4d46](https://github.com/hatiolab/operato/commit/21b4d46d750ba833c571b5caeed27eebd8aa03ca))
|
|
87
|
+
- operato/input to support formfield ([544bf92](https://github.com/hatiolab/operato/commit/544bf928946d878aa967f33b20efdf90eb8e82f5))
|
|
88
|
+
- operato/ox-popup-list rewritten ([f78b3e9](https://github.com/hatiolab/operato/commit/f78b3e9623faac5ea653442ced653173d630d9e6))
|
|
89
|
+
- operato/popup, input sample ([116b037](https://github.com/hatiolab/operato/commit/116b0371446cb24d8863c2bdea876b97f6e11dfd))
|
|
90
|
+
- operato/popup, input sample ([31fb99f](https://github.com/hatiolab/operato/commit/31fb99fc4e37a26c38826dd3554f92ded0632e82))
|
|
76
91
|
|
|
77
92
|
### [0.2.35](https://github.com/hatiolab/operato/compare/v0.2.34...v0.2.35) (2021-12-03)
|
|
78
93
|
|
|
79
94
|
**Note:** Version bump only for package @operato/input
|
|
80
95
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
96
|
### [0.2.34](https://github.com/hatiolab/operato/compare/v0.2.33...v0.2.34) (2021-12-03)
|
|
86
97
|
|
|
87
98
|
**Note:** Version bump only for package @operato/input
|
|
88
99
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
100
|
### [0.2.33](https://github.com/hatiolab/operato/compare/v0.2.32...v0.2.33) (2021-12-03)
|
|
94
101
|
|
|
95
102
|
**Note:** Version bump only for package @operato/input
|
|
96
103
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
104
|
**Note:** Version bump only for package @operato/input
|
|
104
105
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
106
|
### [0.2.32](https://github.com/hatiolab/operato/compare/v0.2.31...v0.2.32) (2021-12-03)
|
|
110
107
|
|
|
111
108
|
**Note:** Version bump only for package @operato/input
|
|
112
109
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
110
|
### [0.2.31](https://github.com/hatiolab/operato/compare/v0.2.30...v0.2.31) (2021-12-03)
|
|
118
111
|
|
|
119
112
|
**Note:** Version bump only for package @operato/input
|
|
120
113
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
114
|
### [0.2.30](https://github.com/hatiolab/operato/compare/v0.2.29...v0.2.30) (2021-12-01)
|
|
126
115
|
|
|
127
116
|
**Note:** Version bump only for package @operato/input
|
|
128
117
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
118
|
### [0.2.27](https://github.com/hatiolab/operato/compare/v0.2.26...v0.2.27) (2021-11-29)
|
|
134
119
|
|
|
135
|
-
|
|
136
120
|
### :rocket: New Features
|
|
137
121
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
122
|
+
- move in lottie-player ([a542700](https://github.com/hatiolab/operato/commit/a542700bddb4960a65580e1ee14bbaae8493b6d3))
|
|
141
123
|
|
|
142
124
|
### [0.2.26](https://github.com/hatiolab/operato/compare/v0.2.25...v0.2.26) (2021-11-24)
|
|
143
125
|
|
|
144
126
|
**Note:** Version bump only for package @operato/input
|
|
145
127
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
128
|
### [0.2.25](https://github.com/hatiolab/operato/compare/v0.2.24...v0.2.25) (2021-11-24)
|
|
151
129
|
|
|
152
130
|
**Note:** Version bump only for package @operato/input
|
|
153
131
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
132
|
### [0.2.15](https://github.com/hatiolab/operato/compare/v0.2.14...v0.2.15) (2021-11-21)
|
|
159
133
|
|
|
160
134
|
**Note:** Version bump only for package @operato/input
|
|
161
135
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
136
|
### [0.2.10](https://github.com/hatiolab/operato/compare/v0.2.9...v0.2.10) (2021-11-15)
|
|
167
137
|
|
|
168
|
-
|
|
169
138
|
### :bug: Bug Fix
|
|
170
139
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
140
|
+
- update eslint-config for open-wc ([1130c63](https://github.com/hatiolab/operato/commit/1130c6300da89612f7e55a9b61a348266bea0b96))
|
|
174
141
|
|
|
175
142
|
### [0.2.9](https://github.com/hatiolab/operato/compare/v0.2.8...v0.2.9) (2021-11-06)
|
|
176
143
|
|
|
177
|
-
|
|
178
144
|
### :rocket: New Features
|
|
179
145
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
146
|
+
- added webcomponents for ocr, barcode ([45787ca](https://github.com/hatiolab/operato/commit/45787ca9b1db973307e19e14cdcac7369805be9a))
|
|
183
147
|
|
|
184
148
|
### [0.2.8](https://github.com/hatiolab/operato/compare/v0.2.7...v0.2.8) (2021-11-05)
|
|
185
149
|
|
|
186
|
-
|
|
187
150
|
### :bug: Bug Fix
|
|
188
151
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
152
|
+
- change package name 'property-editor' => 'input' ([3c9436a](https://github.com/hatiolab/operato/commit/3c9436aa6a10eff0196e0a0725b52bb2d0a9f7b8))
|
|
192
153
|
|
|
193
154
|
### [0.2.5](https://github.com/hatiolab/operato/compare/v0.2.4...v0.2.5) (2021-11-04)
|
|
194
155
|
|
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
|
+
}
|