@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.
@@ -0,0 +1,2 @@
1
+ declare module '*.png'
2
+ declare module '*.css'
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.47](https://github.com/hatiolab/operato/compare/v0.2.46...v0.2.47) (2021-12-13)
7
-
6
+ ### [0.2.51](https://github.com/hatiolab/operato/compare/v0.2.50...v0.2.51) (2021-12-16)
8
7
 
9
- ### :bug: Bug Fix
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
- ### :rocket: New Features
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
- ### [0.2.44](https://github.com/hatiolab/operato/compare/v0.2.43...v0.2.44) (2021-12-09)
33
+ ### :rocket: New Features
40
34
 
41
- **Note:** Version bump only for package @operato/input
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
- * add missing export in operato/input ([67dad8a](https://github.com/hatiolab/operato/commit/67dad8ad28be8a40284a546077e268e6ac887047))
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
- ### [0.2.42](https://github.com/hatiolab/operato/compare/v0.2.41...v0.2.42) (2021-12-07)
55
+ - add operato/board modeller ([2acd6b3](https://github.com/hatiolab/operato/commit/2acd6b31a4d91317fa84ecee67874d2242968ec6))
59
56
 
57
+ ### :bug: Bug Fix
60
58
 
61
- ### :rocket: New Features
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
- * add ox-input-barcode and export sorters property for grist ([0659d20](https://github.com/hatiolab/operato/commit/0659d20fcbfb48b0790ee57154c9108491566509))
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
- ### [0.2.41](https://github.com/hatiolab/operato/compare/v0.2.40...v0.2.41) (2021-12-07)
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
- * popup and input style ([11c5b3e](https://github.com/hatiolab/operato/commit/11c5b3e4bf3f08d18673ada585e50a69b9c88b5b))
73
- * popup style ([43ee008](https://github.com/hatiolab/operato/commit/43ee008afbbd817bb002d2e3c420044f939c9415))
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
- ### [0.2.38](https://github.com/hatiolab/operato/compare/v0.2.37...v0.2.38) (2021-12-07)
83
+ - add ox-input-barcode and export sorters property for grist ([0659d20](https://github.com/hatiolab/operato/commit/0659d20fcbfb48b0790ee57154c9108491566509))
78
84
 
79
- **Note:** Version bump only for package @operato/input
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
- * operato/input/ox-select ([dd2fcbc](https://github.com/hatiolab/operato/commit/dd2fcbcee22705c1d68d5743f04cb0d5c1739503))
91
-
100
+ - operato/input/ox-select ([dd2fcbc](https://github.com/hatiolab/operato/commit/dd2fcbcee22705c1d68d5743f04cb0d5c1739503))
92
101
 
93
102
  ### :rocket: New Features
94
103
 
95
- * adding filter options for data-grist ([3620e8b](https://github.com/hatiolab/operato/commit/3620e8b5c39e7e66f8e7ab39b2ae7200f7f7afb5))
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
- * apply class name prefix Ox for operato/popup ([d528848](https://github.com/hatiolab/operato/commit/d5288486ea0e1bec84fff3c5b6bac696eb701e5d))
101
- * apply things-scene version ([cbebd17](https://github.com/hatiolab/operato/commit/cbebd1729704e6e42e70d60a4e3b122d42271c2e))
102
- * operato/input to support formfield ([21b4d46](https://github.com/hatiolab/operato/commit/21b4d46d750ba833c571b5caeed27eebd8aa03ca))
103
- * operato/input to support formfield ([544bf92](https://github.com/hatiolab/operato/commit/544bf928946d878aa967f33b20efdf90eb8e82f5))
104
- * operato/ox-popup-list rewritten ([f78b3e9](https://github.com/hatiolab/operato/commit/f78b3e9623faac5ea653442ced653173d630d9e6))
105
- * operato/popup, input sample ([116b037](https://github.com/hatiolab/operato/commit/116b0371446cb24d8863c2bdea876b97f6e11dfd))
106
- * operato/popup, input sample ([31fb99f](https://github.com/hatiolab/operato/commit/31fb99fc4e37a26c38826dd3554f92ded0632e82))
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
- * move in lottie-player ([a542700](https://github.com/hatiolab/operato/commit/a542700bddb4960a65580e1ee14bbaae8493b6d3))
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
- * update eslint-config for open-wc ([1130c63](https://github.com/hatiolab/operato/commit/1130c6300da89612f7e55a9b61a348266bea0b96))
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
- * added webcomponents for ocr, barcode ([45787ca](https://github.com/hatiolab/operato/commit/45787ca9b1db973307e19e14cdcac7369805be9a))
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
- * change package name 'property-editor' => 'input' ([3c9436a](https://github.com/hatiolab/operato/commit/3c9436aa6a10eff0196e0a0725b52bb2d0a9f7b8))
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
 
@@ -45,12 +45,14 @@
45
45
 
46
46
  function onchange(e) {
47
47
  const target = e.target
48
- console.log(target.name, target.checked)
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-barcode.js'
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>
@@ -6,3 +6,4 @@ export * from './ox-input-barcode';
6
6
  export * from './ox-buttons-radio';
7
7
  export * from './ox-checkbox';
8
8
  export * from './ox-select';
9
+ export * from './ox-input-code';
package/dist/src/index.js CHANGED
@@ -6,4 +6,5 @@ export * from './ox-input-barcode';
6
6
  export * from './ox-buttons-radio';
7
7
  export * from './ox-checkbox';
8
8
  export * from './ox-select';
9
+ export * from './ox-input-code';
9
10
  //# sourceMappingURL=index.js.map
@@ -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
+ }