@operato/input 0.2.47 → 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 +36 -108
- 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,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.
|
|
7
|
-
|
|
6
|
+
### [0.2.48](https://github.com/hatiolab/operato/compare/v0.2.47...v0.2.48) (2021-12-14)
|
|
8
7
|
|
|
9
|
-
### :bug: Bug Fix
|
|
10
8
|
|
|
11
|
-
|
|
9
|
+
### :rocket: New Features
|
|
12
10
|
|
|
11
|
+
* add ox-input-data, ox-input-code into @operato/input ([4951a6b](https://github.com/hatiolab/operato/commit/4951a6bf76456491018829be521637dcedb068fe))
|
|
13
12
|
|
|
14
13
|
|
|
15
|
-
###
|
|
14
|
+
### :bug: Bug Fix
|
|
16
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))
|
|
17
18
|
|
|
18
|
-
### :rocket: New Features
|
|
19
19
|
|
|
20
|
-
* add operato/board modeller ([2acd6b3](https://github.com/hatiolab/operato/commit/2acd6b31a4d91317fa84ecee67874d2242968ec6))
|
|
21
20
|
|
|
21
|
+
### [0.2.47](https://github.com/hatiolab/operato/compare/v0.2.46...v0.2.47) (2021-12-13)
|
|
22
22
|
|
|
23
23
|
### :bug: Bug Fix
|
|
24
24
|
|
|
25
|
-
|
|
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))
|
|
25
|
+
- operato/board/board-modeller and operato/input/buttons-radio ([d2a4344](https://github.com/hatiolab/operato/commit/d2a4344ae2ad10c9ebfca919a0c9ff7de29d7c6a))
|
|
28
26
|
|
|
27
|
+
### [0.2.46](https://github.com/hatiolab/operato/compare/v0.2.45...v0.2.46) (2021-12-12)
|
|
29
28
|
|
|
29
|
+
### :rocket: New Features
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
**Note:** Version bump only for package @operato/input
|
|
31
|
+
- add operato/board modeller ([2acd6b3](https://github.com/hatiolab/operato/commit/2acd6b31a4d91317fa84ecee67874d2242968ec6))
|
|
34
32
|
|
|
33
|
+
### :bug: Bug Fix
|
|
35
34
|
|
|
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))
|
|
36
38
|
|
|
39
|
+
### [0.2.45](https://github.com/hatiolab/operato/compare/v0.2.44...v0.2.45) (2021-12-11)
|
|
37
40
|
|
|
41
|
+
**Note:** Version bump only for package @operato/input
|
|
38
42
|
|
|
39
43
|
### [0.2.44](https://github.com/hatiolab/operato/compare/v0.2.43...v0.2.44) (2021-12-09)
|
|
40
44
|
|
|
41
45
|
**Note:** Version bump only for package @operato/input
|
|
42
46
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
47
|
### [0.2.43](https://github.com/hatiolab/operato/compare/v0.2.42...v0.2.43) (2021-12-08)
|
|
48
48
|
|
|
49
|
-
|
|
50
49
|
### :bug: Bug Fix
|
|
51
50
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
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))
|
|
57
54
|
|
|
58
55
|
### [0.2.42](https://github.com/hatiolab/operato/compare/v0.2.41...v0.2.42) (2021-12-07)
|
|
59
56
|
|
|
60
|
-
|
|
61
57
|
### :rocket: New Features
|
|
62
58
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
59
|
+
- add ox-input-barcode and export sorters property for grist ([0659d20](https://github.com/hatiolab/operato/commit/0659d20fcbfb48b0790ee57154c9108491566509))
|
|
66
60
|
|
|
67
61
|
### [0.2.41](https://github.com/hatiolab/operato/compare/v0.2.40...v0.2.41) (2021-12-07)
|
|
68
62
|
|
|
69
|
-
|
|
70
63
|
### :bug: Bug Fix
|
|
71
64
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
65
|
+
- popup and input style ([11c5b3e](https://github.com/hatiolab/operato/commit/11c5b3e4bf3f08d18673ada585e50a69b9c88b5b))
|
|
66
|
+
- popup style ([43ee008](https://github.com/hatiolab/operato/commit/43ee008afbbd817bb002d2e3c420044f939c9415))
|
|
76
67
|
|
|
77
68
|
### [0.2.38](https://github.com/hatiolab/operato/compare/v0.2.37...v0.2.38) (2021-12-07)
|
|
78
69
|
|
|
79
70
|
**Note:** Version bump only for package @operato/input
|
|
80
71
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
72
|
### [0.2.36](https://github.com/hatiolab/operato/compare/v0.2.35...v0.2.36) (2021-12-06)
|
|
86
73
|
|
|
87
|
-
|
|
88
74
|
### :mega: Other
|
|
89
75
|
|
|
90
|
-
|
|
91
|
-
|
|
76
|
+
- operato/input/ox-select ([dd2fcbc](https://github.com/hatiolab/operato/commit/dd2fcbcee22705c1d68d5743f04cb0d5c1739503))
|
|
92
77
|
|
|
93
78
|
### :rocket: New Features
|
|
94
79
|
|
|
95
|
-
|
|
96
|
-
|
|
80
|
+
- adding filter options for data-grist ([3620e8b](https://github.com/hatiolab/operato/commit/3620e8b5c39e7e66f8e7ab39b2ae7200f7f7afb5))
|
|
97
81
|
|
|
98
82
|
### :bug: Bug Fix
|
|
99
83
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
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))
|
|
109
91
|
|
|
110
92
|
### [0.2.35](https://github.com/hatiolab/operato/compare/v0.2.34...v0.2.35) (2021-12-03)
|
|
111
93
|
|
|
112
94
|
**Note:** Version bump only for package @operato/input
|
|
113
95
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
96
|
### [0.2.34](https://github.com/hatiolab/operato/compare/v0.2.33...v0.2.34) (2021-12-03)
|
|
119
97
|
|
|
120
98
|
**Note:** Version bump only for package @operato/input
|
|
121
99
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
100
|
### [0.2.33](https://github.com/hatiolab/operato/compare/v0.2.32...v0.2.33) (2021-12-03)
|
|
127
101
|
|
|
128
102
|
**Note:** Version bump only for package @operato/input
|
|
129
103
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
104
|
**Note:** Version bump only for package @operato/input
|
|
137
105
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
106
|
### [0.2.32](https://github.com/hatiolab/operato/compare/v0.2.31...v0.2.32) (2021-12-03)
|
|
143
107
|
|
|
144
108
|
**Note:** Version bump only for package @operato/input
|
|
145
109
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
110
|
### [0.2.31](https://github.com/hatiolab/operato/compare/v0.2.30...v0.2.31) (2021-12-03)
|
|
151
111
|
|
|
152
112
|
**Note:** Version bump only for package @operato/input
|
|
153
113
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
114
|
### [0.2.30](https://github.com/hatiolab/operato/compare/v0.2.29...v0.2.30) (2021-12-01)
|
|
159
115
|
|
|
160
116
|
**Note:** Version bump only for package @operato/input
|
|
161
117
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
118
|
### [0.2.27](https://github.com/hatiolab/operato/compare/v0.2.26...v0.2.27) (2021-11-29)
|
|
167
119
|
|
|
168
|
-
|
|
169
120
|
### :rocket: New Features
|
|
170
121
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
122
|
+
- move in lottie-player ([a542700](https://github.com/hatiolab/operato/commit/a542700bddb4960a65580e1ee14bbaae8493b6d3))
|
|
174
123
|
|
|
175
124
|
### [0.2.26](https://github.com/hatiolab/operato/compare/v0.2.25...v0.2.26) (2021-11-24)
|
|
176
125
|
|
|
177
126
|
**Note:** Version bump only for package @operato/input
|
|
178
127
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
128
|
### [0.2.25](https://github.com/hatiolab/operato/compare/v0.2.24...v0.2.25) (2021-11-24)
|
|
184
129
|
|
|
185
130
|
**Note:** Version bump only for package @operato/input
|
|
186
131
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
132
|
### [0.2.15](https://github.com/hatiolab/operato/compare/v0.2.14...v0.2.15) (2021-11-21)
|
|
192
133
|
|
|
193
134
|
**Note:** Version bump only for package @operato/input
|
|
194
135
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
136
|
### [0.2.10](https://github.com/hatiolab/operato/compare/v0.2.9...v0.2.10) (2021-11-15)
|
|
200
137
|
|
|
201
|
-
|
|
202
138
|
### :bug: Bug Fix
|
|
203
139
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
140
|
+
- update eslint-config for open-wc ([1130c63](https://github.com/hatiolab/operato/commit/1130c6300da89612f7e55a9b61a348266bea0b96))
|
|
207
141
|
|
|
208
142
|
### [0.2.9](https://github.com/hatiolab/operato/compare/v0.2.8...v0.2.9) (2021-11-06)
|
|
209
143
|
|
|
210
|
-
|
|
211
144
|
### :rocket: New Features
|
|
212
145
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
146
|
+
- added webcomponents for ocr, barcode ([45787ca](https://github.com/hatiolab/operato/commit/45787ca9b1db973307e19e14cdcac7369805be9a))
|
|
216
147
|
|
|
217
148
|
### [0.2.8](https://github.com/hatiolab/operato/compare/v0.2.7...v0.2.8) (2021-11-05)
|
|
218
149
|
|
|
219
|
-
|
|
220
150
|
### :bug: Bug Fix
|
|
221
151
|
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
152
|
+
- change package name 'property-editor' => 'input' ([3c9436a](https://github.com/hatiolab/operato/commit/3c9436aa6a10eff0196e0a0725b52bb2d0a9f7b8))
|
|
225
153
|
|
|
226
154
|
### [0.2.5](https://github.com/hatiolab/operato/compare/v0.2.4...v0.2.5) (2021-11-04)
|
|
227
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(
|
|
@@ -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
|
+
}
|