@operato/input 0.2.47 → 0.2.51
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 +51 -99
- package/demo/index-barcode.html +3 -1
- 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-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-input-code.ts +145 -0
- package/src/ox-input-data.ts +151 -0
- package/tsconfig.json +1 -1
package/CHANGELOG.md
CHANGED
@@ -3,225 +3,177 @@
|
|
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.
|
7
|
-
|
6
|
+
### [0.2.51](https://github.com/hatiolab/operato/compare/v0.2.50...v0.2.51) (2021-12-16)
|
8
7
|
|
9
|
-
|
8
|
+
**Note:** Version bump only for package @operato/input
|
10
9
|
|
11
|
-
* operato/board/board-modeller and operato/input/buttons-radio ([d2a4344](https://github.com/hatiolab/operato/commit/d2a4344ae2ad10c9ebfca919a0c9ff7de29d7c6a))
|
12
10
|
|
13
11
|
|
14
12
|
|
15
|
-
### [0.2.46](https://github.com/hatiolab/operato/compare/v0.2.45...v0.2.46) (2021-12-12)
|
16
13
|
|
14
|
+
### [0.2.50](https://github.com/hatiolab/operato/compare/v0.2.49...v0.2.50) (2021-12-16)
|
17
15
|
|
18
|
-
|
16
|
+
**Note:** Version bump only for package @operato/input
|
19
17
|
|
20
|
-
* add operato/board modeller ([2acd6b3](https://github.com/hatiolab/operato/commit/2acd6b31a4d91317fa84ecee67874d2242968ec6))
|
21
18
|
|
22
19
|
|
23
|
-
### :bug: Bug Fix
|
24
20
|
|
25
|
-
* ox-button-radio add mutation observer ([8e59f63](https://github.com/hatiolab/operato/commit/8e59f633b435113841850423d2bd72ff1389fa98))
|
26
|
-
* remove duplicated files ([215e60b](https://github.com/hatiolab/operato/commit/215e60b693983aae387fd23ea2f510eb411c7dac))
|
27
|
-
* upgrade @hatiolab/things-scene@2.7.27 ([961c586](https://github.com/hatiolab/operato/commit/961c586b067bed39c486fc4231b2a8abd3e8b1f7))
|
28
21
|
|
22
|
+
### [0.2.49](https://github.com/hatiolab/operato/compare/v0.2.48...v0.2.49) (2021-12-14)
|
29
23
|
|
24
|
+
**Note:** Version bump only for package @operato/input
|
30
25
|
|
31
|
-
### [0.2.45](https://github.com/hatiolab/operato/compare/v0.2.44...v0.2.45) (2021-12-11)
|
32
26
|
|
33
|
-
**Note:** Version bump only for package @operato/input
|
34
27
|
|
35
28
|
|
36
29
|
|
30
|
+
### [0.2.48](https://github.com/hatiolab/operato/compare/v0.2.47...v0.2.48) (2021-12-14)
|
37
31
|
|
38
32
|
|
39
|
-
###
|
33
|
+
### :rocket: New Features
|
40
34
|
|
41
|
-
|
35
|
+
* add ox-input-data, ox-input-code into @operato/input ([4951a6b](https://github.com/hatiolab/operato/commit/4951a6bf76456491018829be521637dcedb068fe))
|
42
36
|
|
43
37
|
|
38
|
+
### :bug: Bug Fix
|
44
39
|
|
40
|
+
* remove three from tsconfig.json ([7147701](https://github.com/hatiolab/operato/commit/7147701b6361e390254800e00a2e917617194eb1))
|
41
|
+
* upgrade @hatiolab/things-scene ([1ca0161](https://github.com/hatiolab/operato/commit/1ca0161aa2e844c939613aa0109ad3e12606786d))
|
45
42
|
|
46
43
|
|
47
|
-
### [0.2.43](https://github.com/hatiolab/operato/compare/v0.2.42...v0.2.43) (2021-12-08)
|
48
44
|
|
45
|
+
### [0.2.47](https://github.com/hatiolab/operato/compare/v0.2.46...v0.2.47) (2021-12-13)
|
49
46
|
|
50
47
|
### :bug: Bug Fix
|
51
48
|
|
52
|
-
|
53
|
-
* enable ox-input-barcode to fire keyboard events ([8a81c93](https://github.com/hatiolab/operato/commit/8a81c936eef06fc9570034b42b1ce85be8a93ef6))
|
54
|
-
* ox-input-barcode event ([87038da](https://github.com/hatiolab/operato/commit/87038da5589bb728da2397384d55f8ec0cc9b5d4))
|
49
|
+
- operato/board/board-modeller and operato/input/buttons-radio ([d2a4344](https://github.com/hatiolab/operato/commit/d2a4344ae2ad10c9ebfca919a0c9ff7de29d7c6a))
|
55
50
|
|
51
|
+
### [0.2.46](https://github.com/hatiolab/operato/compare/v0.2.45...v0.2.46) (2021-12-12)
|
56
52
|
|
53
|
+
### :rocket: New Features
|
57
54
|
|
58
|
-
|
55
|
+
- add operato/board modeller ([2acd6b3](https://github.com/hatiolab/operato/commit/2acd6b31a4d91317fa84ecee67874d2242968ec6))
|
59
56
|
|
57
|
+
### :bug: Bug Fix
|
60
58
|
|
61
|
-
|
59
|
+
- ox-button-radio add mutation observer ([8e59f63](https://github.com/hatiolab/operato/commit/8e59f633b435113841850423d2bd72ff1389fa98))
|
60
|
+
- remove duplicated files ([215e60b](https://github.com/hatiolab/operato/commit/215e60b693983aae387fd23ea2f510eb411c7dac))
|
61
|
+
- upgrade @hatiolab/things-scene@2.7.28 ([961c586](https://github.com/hatiolab/operato/commit/961c586b067bed39c486fc4231b2a8abd3e8b1f7))
|
62
62
|
|
63
|
-
|
63
|
+
### [0.2.45](https://github.com/hatiolab/operato/compare/v0.2.44...v0.2.45) (2021-12-11)
|
64
64
|
|
65
|
+
**Note:** Version bump only for package @operato/input
|
65
66
|
|
67
|
+
### [0.2.44](https://github.com/hatiolab/operato/compare/v0.2.43...v0.2.44) (2021-12-09)
|
66
68
|
|
67
|
-
|
69
|
+
**Note:** Version bump only for package @operato/input
|
68
70
|
|
71
|
+
### [0.2.43](https://github.com/hatiolab/operato/compare/v0.2.42...v0.2.43) (2021-12-08)
|
69
72
|
|
70
73
|
### :bug: Bug Fix
|
71
74
|
|
72
|
-
|
73
|
-
|
75
|
+
- add missing export in operato/input ([67dad8a](https://github.com/hatiolab/operato/commit/67dad8ad28be8a40284a546077e268e6ac887047))
|
76
|
+
- enable ox-input-barcode to fire keyboard events ([8a81c93](https://github.com/hatiolab/operato/commit/8a81c936eef06fc9570034b42b1ce85be8a93ef6))
|
77
|
+
- ox-input-barcode event ([87038da](https://github.com/hatiolab/operato/commit/87038da5589bb728da2397384d55f8ec0cc9b5d4))
|
74
78
|
|
79
|
+
### [0.2.42](https://github.com/hatiolab/operato/compare/v0.2.41...v0.2.42) (2021-12-07)
|
75
80
|
|
81
|
+
### :rocket: New Features
|
76
82
|
|
77
|
-
|
83
|
+
- add ox-input-barcode and export sorters property for grist ([0659d20](https://github.com/hatiolab/operato/commit/0659d20fcbfb48b0790ee57154c9108491566509))
|
78
84
|
|
79
|
-
|
85
|
+
### [0.2.41](https://github.com/hatiolab/operato/compare/v0.2.40...v0.2.41) (2021-12-07)
|
80
86
|
|
87
|
+
### :bug: Bug Fix
|
81
88
|
|
89
|
+
- popup and input style ([11c5b3e](https://github.com/hatiolab/operato/commit/11c5b3e4bf3f08d18673ada585e50a69b9c88b5b))
|
90
|
+
- popup style ([43ee008](https://github.com/hatiolab/operato/commit/43ee008afbbd817bb002d2e3c420044f939c9415))
|
82
91
|
|
92
|
+
### [0.2.38](https://github.com/hatiolab/operato/compare/v0.2.37...v0.2.38) (2021-12-07)
|
83
93
|
|
94
|
+
**Note:** Version bump only for package @operato/input
|
84
95
|
|
85
96
|
### [0.2.36](https://github.com/hatiolab/operato/compare/v0.2.35...v0.2.36) (2021-12-06)
|
86
97
|
|
87
|
-
|
88
98
|
### :mega: Other
|
89
99
|
|
90
|
-
|
91
|
-
|
100
|
+
- operato/input/ox-select ([dd2fcbc](https://github.com/hatiolab/operato/commit/dd2fcbcee22705c1d68d5743f04cb0d5c1739503))
|
92
101
|
|
93
102
|
### :rocket: New Features
|
94
103
|
|
95
|
-
|
96
|
-
|
104
|
+
- adding filter options for data-grist ([3620e8b](https://github.com/hatiolab/operato/commit/3620e8b5c39e7e66f8e7ab39b2ae7200f7f7afb5))
|
97
105
|
|
98
106
|
### :bug: Bug Fix
|
99
107
|
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
108
|
+
- apply class name prefix Ox for operato/popup ([d528848](https://github.com/hatiolab/operato/commit/d5288486ea0e1bec84fff3c5b6bac696eb701e5d))
|
109
|
+
- apply things-scene version ([cbebd17](https://github.com/hatiolab/operato/commit/cbebd1729704e6e42e70d60a4e3b122d42271c2e))
|
110
|
+
- operato/input to support formfield ([21b4d46](https://github.com/hatiolab/operato/commit/21b4d46d750ba833c571b5caeed27eebd8aa03ca))
|
111
|
+
- operato/input to support formfield ([544bf92](https://github.com/hatiolab/operato/commit/544bf928946d878aa967f33b20efdf90eb8e82f5))
|
112
|
+
- operato/ox-popup-list rewritten ([f78b3e9](https://github.com/hatiolab/operato/commit/f78b3e9623faac5ea653442ced653173d630d9e6))
|
113
|
+
- operato/popup, input sample ([116b037](https://github.com/hatiolab/operato/commit/116b0371446cb24d8863c2bdea876b97f6e11dfd))
|
114
|
+
- operato/popup, input sample ([31fb99f](https://github.com/hatiolab/operato/commit/31fb99fc4e37a26c38826dd3554f92ded0632e82))
|
109
115
|
|
110
116
|
### [0.2.35](https://github.com/hatiolab/operato/compare/v0.2.34...v0.2.35) (2021-12-03)
|
111
117
|
|
112
118
|
**Note:** Version bump only for package @operato/input
|
113
119
|
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
120
|
### [0.2.34](https://github.com/hatiolab/operato/compare/v0.2.33...v0.2.34) (2021-12-03)
|
119
121
|
|
120
122
|
**Note:** Version bump only for package @operato/input
|
121
123
|
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
124
|
### [0.2.33](https://github.com/hatiolab/operato/compare/v0.2.32...v0.2.33) (2021-12-03)
|
127
125
|
|
128
126
|
**Note:** Version bump only for package @operato/input
|
129
127
|
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
128
|
**Note:** Version bump only for package @operato/input
|
137
129
|
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
130
|
### [0.2.32](https://github.com/hatiolab/operato/compare/v0.2.31...v0.2.32) (2021-12-03)
|
143
131
|
|
144
132
|
**Note:** Version bump only for package @operato/input
|
145
133
|
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
134
|
### [0.2.31](https://github.com/hatiolab/operato/compare/v0.2.30...v0.2.31) (2021-12-03)
|
151
135
|
|
152
136
|
**Note:** Version bump only for package @operato/input
|
153
137
|
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
138
|
### [0.2.30](https://github.com/hatiolab/operato/compare/v0.2.29...v0.2.30) (2021-12-01)
|
159
139
|
|
160
140
|
**Note:** Version bump only for package @operato/input
|
161
141
|
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
142
|
### [0.2.27](https://github.com/hatiolab/operato/compare/v0.2.26...v0.2.27) (2021-11-29)
|
167
143
|
|
168
|
-
|
169
144
|
### :rocket: New Features
|
170
145
|
|
171
|
-
|
172
|
-
|
173
|
-
|
146
|
+
- move in lottie-player ([a542700](https://github.com/hatiolab/operato/commit/a542700bddb4960a65580e1ee14bbaae8493b6d3))
|
174
147
|
|
175
148
|
### [0.2.26](https://github.com/hatiolab/operato/compare/v0.2.25...v0.2.26) (2021-11-24)
|
176
149
|
|
177
150
|
**Note:** Version bump only for package @operato/input
|
178
151
|
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
152
|
### [0.2.25](https://github.com/hatiolab/operato/compare/v0.2.24...v0.2.25) (2021-11-24)
|
184
153
|
|
185
154
|
**Note:** Version bump only for package @operato/input
|
186
155
|
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
156
|
### [0.2.15](https://github.com/hatiolab/operato/compare/v0.2.14...v0.2.15) (2021-11-21)
|
192
157
|
|
193
158
|
**Note:** Version bump only for package @operato/input
|
194
159
|
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
160
|
### [0.2.10](https://github.com/hatiolab/operato/compare/v0.2.9...v0.2.10) (2021-11-15)
|
200
161
|
|
201
|
-
|
202
162
|
### :bug: Bug Fix
|
203
163
|
|
204
|
-
|
205
|
-
|
206
|
-
|
164
|
+
- update eslint-config for open-wc ([1130c63](https://github.com/hatiolab/operato/commit/1130c6300da89612f7e55a9b61a348266bea0b96))
|
207
165
|
|
208
166
|
### [0.2.9](https://github.com/hatiolab/operato/compare/v0.2.8...v0.2.9) (2021-11-06)
|
209
167
|
|
210
|
-
|
211
168
|
### :rocket: New Features
|
212
169
|
|
213
|
-
|
214
|
-
|
215
|
-
|
170
|
+
- added webcomponents for ocr, barcode ([45787ca](https://github.com/hatiolab/operato/commit/45787ca9b1db973307e19e14cdcac7369805be9a))
|
216
171
|
|
217
172
|
### [0.2.8](https://github.com/hatiolab/operato/compare/v0.2.7...v0.2.8) (2021-11-05)
|
218
173
|
|
219
|
-
|
220
174
|
### :bug: Bug Fix
|
221
175
|
|
222
|
-
|
223
|
-
|
224
|
-
|
176
|
+
- change package name 'property-editor' => 'input' ([3c9436a](https://github.com/hatiolab/operato/commit/3c9436aa6a10eff0196e0a0725b52bb2d0a9f7b8))
|
225
177
|
|
226
178
|
### [0.2.5](https://github.com/hatiolab/operato/compare/v0.2.4...v0.2.5) (2021-11-04)
|
227
179
|
|
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(
|
@@ -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"]}
|
@@ -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
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport 'codemirror/mode/javascript/javascript'\nimport 'codemirror/mode/python/python'\nimport 'codemirror/addon/display/fullscreen'\nimport 'codemirror/addon/display/autorefresh'\n\nimport { PropertyValues, css, html, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators'\n\nimport CodeMirror from 'codemirror'\nimport CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'\nimport FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'\nimport NightThemeStyle from '!!text-loader!codemirror/theme/night.css'\nimport { OxFormField } from './ox-formfield'\nimport { ScrollbarStyles } from '@operato/styles'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n\n <things-editor-code .value=${text} mode=${mode} tab-size=\"4\" tab-as-space=\"true\">\n </things-editor-code>\n*/\n@customElement('ox-input-code')\nexport default class OxInputCode extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n ${unsafeCSS(CodeMirrorStyle)}\n ${unsafeCSS(FullScreenStyle)}\n ${unsafeCSS(NightThemeStyle)}\n `,\n css`\n :host {\n display: block;\n position: relative;\n }\n\n textarea {\n display: block;\n height: 100%;\n width: 100%;\n resize: none;\n font-size: 16px;\n line-height: 20px;\n border: 0px;\n padding: 0px;\n }\n `\n ]\n\n /**\n * `value`는 에디터에서 작성중인 contents이다.\n */\n @property({ type: String }) value: string = ''\n @property({ type: String }) mode?: string\n @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2\n @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true\n\n private _outside_changing: boolean = false\n private _self_changing: boolean = false\n private _editor: CodeMirror.EditorFromTextArea | null | undefined = null\n private _changed: boolean = false\n\n // private lint: any\n // private hintOptions: any\n\n updated(changes: PropertyValues<this>) {\n this._outside_changing = true\n if (changes.has('value') && this.editor && !this._self_changing) {\n this.editor?.setValue(this.value === undefined ? '' : String(this.value))\n this.editor?.refresh()\n }\n this._outside_changing = false\n }\n\n render() {\n return html` <textarea></textarea> `\n }\n\n get editor() {\n if (!this._editor) {\n let textarea = this.renderRoot.querySelector('textarea')\n let mode = this.mode || 'javascript'\n let tabSize = Number(this.tabSize) || 2\n let indentUnit = tabSize\n // let lint = this.lint\n // let hintOptions = this.hintOptions\n let tabAsSpace = this.tabAsSpace\n\n if (textarea) {\n this._editor = CodeMirror.fromTextArea(textarea, {\n value: this.value,\n mode,\n // lint,\n // hintOptions,\n tabSize,\n indentUnit,\n lineNumbers: false,\n showCursorWhenSelecting: true,\n theme: 'night',\n extraKeys: {\n F11: function (cm) {\n cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n },\n Esc: function (cm) {\n cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n },\n // https://github.com/codemirror/CodeMirror/issues/988#issuecomment-37095621\n Tab: tabAsSpace\n ? function (cm: CodeMirror.Editor) {\n cm.replaceSelection(Array(cm.getOption('tabSize')).join(' '))\n }\n : false\n },\n autoRefresh: {\n delay: 500\n }\n })\n\n this._editor.on('blur', e => {\n if (!this._changed) return\n\n this.value = e.getValue()\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n })\n\n this._editor.on('change', async e => {\n this._self_changing = true\n\n this._changed = true\n\n await this.updateComplete\n this._self_changing = false\n })\n }\n }\n\n return this._editor\n }\n}\n"]}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
/**
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
3
|
+
*/
|
4
|
+
import './ox-input-code';
|
5
|
+
import { PropertyValues } from 'lit';
|
6
|
+
import { OxFormField } from './ox-formfield';
|
7
|
+
/**
|
8
|
+
WEB Component for code-mirror based data editor.
|
9
|
+
|
10
|
+
Example:
|
11
|
+
|
12
|
+
<ox-input-data value=${text}>
|
13
|
+
</ox-input-data>
|
14
|
+
*/
|
15
|
+
export default class OxInputData extends OxFormField {
|
16
|
+
static styles: import("lit").CSSResult[];
|
17
|
+
/**
|
18
|
+
* `value`는 에디터에서 작성중인 contents이다.
|
19
|
+
*/
|
20
|
+
value: any;
|
21
|
+
render(): import("lit-html").TemplateResult<1>;
|
22
|
+
firstUpdated(): void;
|
23
|
+
udpated(changes: PropertyValues<this>): void;
|
24
|
+
_setDataType(type: string | undefined | null): void;
|
25
|
+
_clearData(): void;
|
26
|
+
_getData(data: any): any;
|
27
|
+
_onAfterValueChange(): void;
|
28
|
+
}
|