@operato/input 0.2.38 → 0.2.44
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/CHANGELOG.md +38 -0
- package/demo/index-barcode.html +66 -0
- package/demo/index-checkbox.html +1 -4
- package/demo/index-select.html +118 -0
- package/demo/index.html +30 -84
- package/dist/src/index.d.ts +4 -1
- package/dist/src/index.js +4 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/ox-buttons-radio.js +5 -1
- package/dist/src/ox-buttons-radio.js.map +1 -1
- package/dist/src/ox-checkbox.js +5 -8
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-input-3dish.js +1 -3
- package/dist/src/ox-input-3dish.js.map +1 -1
- package/dist/src/ox-input-angle.js +5 -1
- package/dist/src/ox-input-angle.js.map +1 -1
- package/dist/src/ox-input-barcode.d.ts +22 -0
- package/dist/src/ox-input-barcode.js +212 -0
- package/dist/src/ox-input-barcode.js.map +1 -0
- package/dist/src/ox-input-stack.js +5 -1
- package/dist/src/ox-input-stack.js.map +1 -1
- package/dist/src/ox-select.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -3
- package/src/index.ts +4 -1
- package/src/ox-buttons-radio.ts +8 -2
- package/src/ox-checkbox.ts +5 -8
- package/src/ox-input-3dish.ts +2 -4
- package/src/ox-input-angle.ts +7 -1
- package/src/ox-input-barcode.ts +209 -0
- package/src/ox-input-stack.ts +7 -1
- package/src/ox-select.ts +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,44 @@
|
|
|
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.44](https://github.com/hatiolab/operato/compare/v0.2.43...v0.2.44) (2021-12-09)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/input
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### [0.2.43](https://github.com/hatiolab/operato/compare/v0.2.42...v0.2.43) (2021-12-08)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### :bug: Bug Fix
|
|
18
|
+
|
|
19
|
+
* add missing export in operato/input ([67dad8a](https://github.com/hatiolab/operato/commit/67dad8ad28be8a40284a546077e268e6ac887047))
|
|
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))
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### [0.2.42](https://github.com/hatiolab/operato/compare/v0.2.41...v0.2.42) (2021-12-07)
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### :rocket: New Features
|
|
29
|
+
|
|
30
|
+
* add ox-input-barcode and export sorters property for grist ([0659d20](https://github.com/hatiolab/operato/commit/0659d20fcbfb48b0790ee57154c9108491566509))
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
### [0.2.41](https://github.com/hatiolab/operato/compare/v0.2.40...v0.2.41) (2021-12-07)
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
### :bug: Bug Fix
|
|
38
|
+
|
|
39
|
+
* popup and input style ([11c5b3e](https://github.com/hatiolab/operato/commit/11c5b3e4bf3f08d18673ada585e50a69b9c88b5b))
|
|
40
|
+
* popup style ([43ee008](https://github.com/hatiolab/operato/commit/43ee008afbbd817bb002d2e3c420044f939c9415))
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
6
44
|
### [0.2.38](https://github.com/hatiolab/operato/compare/v0.2.37...v0.2.38) (2021-12-07)
|
|
7
45
|
|
|
8
46
|
**Note:** Version bump only for package @operato/input
|
|
@@ -0,0 +1,66 @@
|
|
|
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-barcode.js'
|
|
44
|
+
const form = document.querySelector('#demo')
|
|
45
|
+
|
|
46
|
+
function onchange(e) {
|
|
47
|
+
const target = e.target
|
|
48
|
+
console.log(target.name, target.checked)
|
|
49
|
+
|
|
50
|
+
const formData = new FormData(form)
|
|
51
|
+
for (var pair of formData.entries()) {
|
|
52
|
+
console.log(pair[0] + ', ' + pair[1])
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
render(
|
|
57
|
+
html`
|
|
58
|
+
<ox-input-barcode name="input-a" @change=${onchange}></ox-input-barcode>
|
|
59
|
+
<ox-input-barcode name="input-b" @change=${onchange}>hatiolab</ox-input-barcode>
|
|
60
|
+
<ox-input-barcode name="input-c" @change=${onchange}>ibex</ox-input-barcode>
|
|
61
|
+
`,
|
|
62
|
+
form
|
|
63
|
+
)
|
|
64
|
+
</script>
|
|
65
|
+
</body>
|
|
66
|
+
</html>
|
package/demo/index-checkbox.html
CHANGED
|
@@ -6,16 +6,13 @@
|
|
|
6
6
|
body {
|
|
7
7
|
background: #fafafa;
|
|
8
8
|
}
|
|
9
|
-
* {
|
|
10
|
-
margin-bottom: 5px;
|
|
11
|
-
}
|
|
12
9
|
|
|
13
10
|
.customized {
|
|
14
11
|
/* checkbox default */
|
|
15
12
|
--ox-checkbox-fill-color: rgba(0, 0, 0, 0.1);
|
|
16
13
|
--ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
|
|
17
14
|
--ox-checkbox-border-radius: var(--border-radius, 4px);
|
|
18
|
-
--ox-checkbox-size:
|
|
15
|
+
--ox-checkbox-size: 15px;
|
|
19
16
|
--ox-checkbox-background-color: var(--theme-white-color, #fff);
|
|
20
17
|
--ox-checkbox-label-color: var(--primary-text-color, #3a5877);
|
|
21
18
|
--ox-checkbox-label-margin: 0 0 0 7px;
|
|
@@ -0,0 +1,118 @@
|
|
|
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
|
+
ox-select {
|
|
11
|
+
display: inline-block;
|
|
12
|
+
width: 100px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
ox-popup-list {
|
|
16
|
+
max-height: 200px;
|
|
17
|
+
overflow: auto;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
::-webkit-scrollbar {
|
|
21
|
+
width: 5px;
|
|
22
|
+
height: 5px;
|
|
23
|
+
}
|
|
24
|
+
::-webkit-scrollbar-track {
|
|
25
|
+
background-color: transparent;
|
|
26
|
+
}
|
|
27
|
+
::-webkit-scrollbar-thumb {
|
|
28
|
+
background-color: var(--scrollbar-thumb-color, rgba(0, 0, 0, 0.2));
|
|
29
|
+
}
|
|
30
|
+
::-webkit-scrollbar-thumb:hover {
|
|
31
|
+
background-color: var(--scrollbar-thumb-hover-color, #aa866a);
|
|
32
|
+
}
|
|
33
|
+
</style>
|
|
34
|
+
|
|
35
|
+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
|
|
36
|
+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
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-select.js'
|
|
44
|
+
import '../dist/src/ox-checkbox.js'
|
|
45
|
+
|
|
46
|
+
const form = document.querySelector('#demo')
|
|
47
|
+
|
|
48
|
+
function onchanged(e) {
|
|
49
|
+
const target = e.target
|
|
50
|
+
console.log(target, target.name, e.detail)
|
|
51
|
+
|
|
52
|
+
const formData = new FormData(form)
|
|
53
|
+
for (var pair of formData.entries()) {
|
|
54
|
+
console.log(pair[0] + ', ' + pair[1])
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
render(
|
|
59
|
+
html`
|
|
60
|
+
<ox-select name="single" @change=${onchanged} placeholder="single select">
|
|
61
|
+
<ox-popup-list>
|
|
62
|
+
<div option value="A" />A</div>
|
|
63
|
+
<div option value="B" />B</div>
|
|
64
|
+
<div option value="C" />C</div>
|
|
65
|
+
<div option value="TOO LONG VALUE" />TOO LONG VALUE</div>
|
|
66
|
+
</ox-popup-list>
|
|
67
|
+
</ox-select>
|
|
68
|
+
|
|
69
|
+
<ox-select name="multiple" @change=${onchanged} placeholder="multiple select">
|
|
70
|
+
<ox-popup-list multiple>
|
|
71
|
+
<div option value="A" />A</div>
|
|
72
|
+
<div option value="B" />B</div>
|
|
73
|
+
<div option value="C" />C</div>
|
|
74
|
+
<div option value="TOO LONG VALUE" />TOO LONG VALUE</div>
|
|
75
|
+
</ox-popup-list>
|
|
76
|
+
</ox-select>
|
|
77
|
+
|
|
78
|
+
<ox-select name="multiple with checkbox" @change=${onchanged} placeholder="multiple with checkbox">
|
|
79
|
+
<ox-popup-list attr-selected="checked" multiple>
|
|
80
|
+
<ox-checkbox option @change=${e => {
|
|
81
|
+
const options = e.target.parentElement.querySelectorAll('[option]')
|
|
82
|
+
console.log(options)
|
|
83
|
+
options.forEach(option => (option.checked = e.target.checked))
|
|
84
|
+
}}>set all</ox-checkbox>
|
|
85
|
+
<ox-checkbox option value="A" />A</ox-checkbox>
|
|
86
|
+
<ox-checkbox option value="B" />B</ox-checkbox>
|
|
87
|
+
<ox-checkbox option value="C" checked />C</ox-checkbox>
|
|
88
|
+
<ox-checkbox option value="D" />D</ox-checkbox>
|
|
89
|
+
<ox-checkbox option value="E" />E</ox-checkbox>
|
|
90
|
+
<ox-checkbox option value="F" />F</ox-checkbox>
|
|
91
|
+
<ox-checkbox option value="G" />G</ox-checkbox>
|
|
92
|
+
<ox-checkbox option value="TOO LONG VALUE" />TOO LONG VALUE</ox-checkbox>
|
|
93
|
+
</ox-popup-list>
|
|
94
|
+
</ox-select>
|
|
95
|
+
|
|
96
|
+
<ox-select name="multiple with input" @change=${onchanged} placeholder="multiple with checkbox">
|
|
97
|
+
<ox-popup-list attr-selected="checked" multiple>
|
|
98
|
+
<input type="checkbox" option @change=${e => {
|
|
99
|
+
const options = e.target.parentElement.querySelectorAll('[option]')
|
|
100
|
+
console.log(options)
|
|
101
|
+
options.forEach(option => (option.checked = e.target.checked))
|
|
102
|
+
}}>set all
|
|
103
|
+
<input type="checkbox" option value="A" />A
|
|
104
|
+
<input type="checkbox" option value="B" />B
|
|
105
|
+
<input type="checkbox" option value="C" />C
|
|
106
|
+
<input type="checkbox" option value="D" />D
|
|
107
|
+
<input type="checkbox" option value="E" />E
|
|
108
|
+
<input type="checkbox" option value="F" />F
|
|
109
|
+
<input type="checkbox" option value="G" />G
|
|
110
|
+
<input type="checkbox" option value="TOO LONG VALUE" />TOO LONG VALUE
|
|
111
|
+
</ox-popup-list>
|
|
112
|
+
</ox-select>
|
|
113
|
+
`,
|
|
114
|
+
form
|
|
115
|
+
)
|
|
116
|
+
</script>
|
|
117
|
+
</body>
|
|
118
|
+
</html>
|
package/demo/index.html
CHANGED
|
@@ -7,113 +7,59 @@
|
|
|
7
7
|
background: #fafafa;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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;
|
|
13
19
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
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;
|
|
18
25
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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);
|
|
23
30
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
::-webkit-scrollbar-track {
|
|
29
|
-
background-color: transparent;
|
|
30
|
-
}
|
|
31
|
-
::-webkit-scrollbar-thumb {
|
|
32
|
-
background-color: var(--scrollbar-thumb-color, rgba(0, 0, 0, 0.2));
|
|
33
|
-
}
|
|
34
|
-
::-webkit-scrollbar-thumb:hover {
|
|
35
|
-
background-color: var(--scrollbar-thumb-hover-color, #aa866a);
|
|
31
|
+
/* checkbox disabled */
|
|
32
|
+
--ox-checkbox-disabled-opacity: 0.5;
|
|
33
|
+
|
|
34
|
+
font-size: 1.1em;
|
|
36
35
|
}
|
|
37
36
|
</style>
|
|
38
|
-
|
|
39
|
-
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
|
|
40
|
-
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
41
37
|
</head>
|
|
42
38
|
<body>
|
|
43
39
|
<form id="demo"></form>
|
|
44
40
|
|
|
45
41
|
<script type="module">
|
|
46
42
|
import { html, render } from 'lit'
|
|
47
|
-
import '../dist/src/ox-
|
|
48
|
-
import '../dist/src/ox-checkbox.js'
|
|
49
|
-
|
|
43
|
+
import '../dist/src/ox-input-barcode.js'
|
|
50
44
|
const form = document.querySelector('#demo')
|
|
51
45
|
|
|
52
|
-
function
|
|
46
|
+
function onchange(e) {
|
|
53
47
|
const target = e.target
|
|
54
|
-
console.log(target
|
|
48
|
+
console.log(target.name, target.value)
|
|
55
49
|
|
|
56
50
|
const formData = new FormData(form)
|
|
51
|
+
console.log('<---- entries begins ----')
|
|
57
52
|
for (var pair of formData.entries()) {
|
|
58
53
|
console.log(pair[0] + ', ' + pair[1])
|
|
59
54
|
}
|
|
55
|
+
console.log('---- entries ends ------>')
|
|
60
56
|
}
|
|
61
57
|
|
|
62
58
|
render(
|
|
63
59
|
html`
|
|
64
|
-
<ox-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
<div option value="B" />B</div>
|
|
68
|
-
<div option value="C" />C</div>
|
|
69
|
-
<div option value="TOO LONG VALUE" />TOO LONG VALUE</div>
|
|
70
|
-
</ox-popup-list>
|
|
71
|
-
</ox-select>
|
|
72
|
-
|
|
73
|
-
<ox-select name="multiple" @change=${onchanged} placeholder="multiple select">
|
|
74
|
-
<ox-popup-list multiple>
|
|
75
|
-
<div option value="A" />A</div>
|
|
76
|
-
<div option value="B" />B</div>
|
|
77
|
-
<div option value="C" />C</div>
|
|
78
|
-
<div option value="TOO LONG VALUE" />TOO LONG VALUE</div>
|
|
79
|
-
</ox-popup-list>
|
|
80
|
-
</ox-select>
|
|
81
|
-
|
|
82
|
-
<ox-select name="multiple with checkbox" @change=${onchanged} placeholder="multiple with checkbox">
|
|
83
|
-
<ox-popup-list attr-selected="checked" multiple>
|
|
84
|
-
<ox-checkbox option @change=${e => {
|
|
85
|
-
const options = e.target.parentElement.querySelectorAll('[option]')
|
|
86
|
-
console.log(options)
|
|
87
|
-
options.forEach(option => (option.checked = e.target.checked))
|
|
88
|
-
}}>set all</ox-checkbox>
|
|
89
|
-
<ox-checkbox option value="A" />A</ox-checkbox>
|
|
90
|
-
<ox-checkbox option value="B" />B</ox-checkbox>
|
|
91
|
-
<ox-checkbox option value="C" checked />C</ox-checkbox>
|
|
92
|
-
<ox-checkbox option value="D" />D</ox-checkbox>
|
|
93
|
-
<ox-checkbox option value="E" />E</ox-checkbox>
|
|
94
|
-
<ox-checkbox option value="F" />F</ox-checkbox>
|
|
95
|
-
<ox-checkbox option value="G" />G</ox-checkbox>
|
|
96
|
-
<ox-checkbox option value="TOO LONG VALUE" />TOO LONG VALUE</ox-checkbox>
|
|
97
|
-
</ox-popup-list>
|
|
98
|
-
</ox-select>
|
|
99
|
-
|
|
100
|
-
<ox-select name="multiple with input" @change=${onchanged} placeholder="multiple with checkbox">
|
|
101
|
-
<ox-popup-list attr-selected="checked" multiple>
|
|
102
|
-
<input type="checkbox" option @change=${e => {
|
|
103
|
-
const options = e.target.parentElement.querySelectorAll('[option]')
|
|
104
|
-
console.log(options)
|
|
105
|
-
options.forEach(option => (option.checked = e.target.checked))
|
|
106
|
-
}}>set all
|
|
107
|
-
<input type="checkbox" option value="A" />A
|
|
108
|
-
<input type="checkbox" option value="B" />B
|
|
109
|
-
<input type="checkbox" option value="C" />C
|
|
110
|
-
<input type="checkbox" option value="D" />D
|
|
111
|
-
<input type="checkbox" option value="E" />E
|
|
112
|
-
<input type="checkbox" option value="F" />F
|
|
113
|
-
<input type="checkbox" option value="G" />G
|
|
114
|
-
<input type="checkbox" option value="TOO LONG VALUE" />TOO LONG VALUE
|
|
115
|
-
</ox-popup-list>
|
|
116
|
-
</ox-select>
|
|
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>
|
|
117
63
|
`,
|
|
118
64
|
form
|
|
119
65
|
)
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
export * from './ox-formfield';
|
|
1
2
|
export * from './ox-input-angle';
|
|
2
3
|
export * from './ox-input-3dish';
|
|
3
|
-
export * from './ox-buttons-radio';
|
|
4
4
|
export * from './ox-input-stack';
|
|
5
|
+
export * from './ox-input-barcode';
|
|
6
|
+
export * from './ox-buttons-radio';
|
|
5
7
|
export * from './ox-checkbox';
|
|
8
|
+
export * from './ox-select';
|
package/dist/src/index.js
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
export * from './ox-formfield';
|
|
1
2
|
export * from './ox-input-angle';
|
|
2
3
|
export * from './ox-input-3dish';
|
|
3
|
-
export * from './ox-buttons-radio';
|
|
4
4
|
export * from './ox-input-stack';
|
|
5
|
+
export * from './ox-input-barcode';
|
|
6
|
+
export * from './ox-buttons-radio';
|
|
5
7
|
export * from './ox-checkbox';
|
|
8
|
+
export * from './ox-select';
|
|
6
9
|
//# sourceMappingURL=index.js.map
|
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,
|
|
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"]}
|
|
@@ -67,7 +67,11 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends OxFormField {
|
|
|
67
67
|
target.setAttribute('active', '');
|
|
68
68
|
}
|
|
69
69
|
if (old !== this.value) {
|
|
70
|
-
this.dispatchEvent(new CustomEvent('change', {
|
|
70
|
+
this.dispatchEvent(new CustomEvent('change', {
|
|
71
|
+
bubbles: true,
|
|
72
|
+
composed: true,
|
|
73
|
+
detail: this.value
|
|
74
|
+
}));
|
|
71
75
|
}
|
|
72
76
|
}
|
|
73
77
|
appendFormData({ formData }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,
|
|
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;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C;;;;;;;;;;EAUE;AAEF,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,WAAW;IAArD;;QASE;;WAEG;QACyB,UAAK,GAAkB,IAAI,CAAA;IAiEzD,CAAC;IA9DC,MAAM;QACJ,OAAO,IAAI,CAAA,iBAAiB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAA;IAC3E,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC1D,CAAC;IAED,IAAI,OAAO;QACT,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAA;IAC/C,CAAC;IAED,eAAe,CAAC,KAAoB;QAClC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YAC5B,IAAI,KAAK,KAAK,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE;gBAC1C,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;aAClC;iBAAM;gBACL,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;aACjC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;QAEpC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,MAAM,KAAK,IAAI,EAAE;YACvD,MAAM,GAAG,MAAM,CAAC,aAAc,CAAA;SAC/B;QAED,IAAI,MAAM,KAAK,IAAI,EAAE;YACnB,OAAM;SACP;QAED,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,CAAA;QAEpB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE;gBAClC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;gBACzC,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;aAClC;iBAAM;gBACL,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;gBACjB,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;aACjC;SACF;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;YACzC,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;SAClC;QAED,IAAI,GAAG,KAAK,IAAI,CAAC,KAAK,EAAE;YACtB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,IAAI,CAAC,KAAK;aACnB,CAAC,CACH,CAAA;SACF;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;IACrE,CAAC;CACF,CAAA;AA5EQ,2BAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,CAAA;AAK2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA4B;AAC1B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDAAoB;AAbrC,oBAAoB;IADhC,aAAa,CAAC,kBAAkB,CAAC;GACrB,oBAAoB,CA6EhC;SA7EY,oBAAoB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property } 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 render() {\n return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `\n }\n\n updated(changes: PropertyValues<this>) {\n changes.has('value') && this._onValueChanged(this.value)\n }\n\n get buttons() {\n return Array.from(this.querySelectorAll('*'))\n }\n\n _onValueChanged(value: Object | null) {\n this.buttons.forEach(button => {\n if (value === button.getAttribute('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\n while (!target.hasAttribute('value') && target !== this) {\n target = target.parentElement!\n }\n\n if (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('value')\n target.setAttribute('active', '')\n } else {\n this.value = null\n target.removeAttribute('active')\n }\n } else {\n this.value = target.getAttribute('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"]}
|
package/dist/src/ox-checkbox.js
CHANGED
|
@@ -39,10 +39,7 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
|
39
39
|
this.dispatchEvent(new CustomEvent('change', {
|
|
40
40
|
bubbles: true,
|
|
41
41
|
composed: true,
|
|
42
|
-
detail:
|
|
43
|
-
checked: this.checked,
|
|
44
|
-
name: this.name
|
|
45
|
-
}
|
|
42
|
+
detail: this.checked
|
|
46
43
|
}));
|
|
47
44
|
}
|
|
48
45
|
get checkedIcon() {
|
|
@@ -91,8 +88,8 @@ OxCheckbox.styles = [
|
|
|
91
88
|
border-radius: var(--ox-checkbox-border-radius, 4px);
|
|
92
89
|
border: var(--ox-checkbox-border, 1px solid rgba(0, 0, 0, 0.3));
|
|
93
90
|
background-color: var(--ox-checkbox-background-color, #fff);
|
|
94
|
-
width: var(--ox-checkbox-size,
|
|
95
|
-
height: var(--ox-checkbox-size,
|
|
91
|
+
width: var(--ox-checkbox-size, 15px);
|
|
92
|
+
height: var(--ox-checkbox-size, 15px);
|
|
96
93
|
align-items: center;
|
|
97
94
|
justify-content: center;
|
|
98
95
|
}
|
|
@@ -116,8 +113,8 @@ OxCheckbox.styles = [
|
|
|
116
113
|
}
|
|
117
114
|
|
|
118
115
|
svg {
|
|
119
|
-
width: var(--ox-checkbox-size,
|
|
120
|
-
height: var(--ox-checkbox-size,
|
|
116
|
+
width: var(--ox-checkbox-size, 15px);
|
|
117
|
+
height: var(--ox-checkbox-size, 15px);
|
|
121
118
|
}
|
|
122
119
|
|
|
123
120
|
[label] {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"AAAA;;EAEE;;AAEF,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,WAAW;IAA3C;;QA+DoE,YAAO,GAAY,KAAK,CAAA;QAC7D,aAAQ,GAAY,KAAK,CAAA;QAG7C,cAAS,GAAY,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"AAAA;;EAEE;;AAEF,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,WAAW;IAA3C;;QA+DoE,YAAO,GAAY,KAAK,CAAA;QAC7D,aAAQ,GAAY,KAAK,CAAA;QAG7C,cAAS,GAAY,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,MAAM,CAAA;IAmE9D,CAAC;IAjEC,MAAM;QACJ,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,QAAQ;6BAC9B,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;YACjD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa;;UAEtD,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;oBAEI;YACV,CAAC,CAAC,EAAE;;KAET,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QAClC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC7D,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAM;SACP;QAED,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAA;QAE5B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,OAAO;SACrB,CAAC,CACH,CAAA;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAA;IACH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAA;;;;KAIV,CAAA;IACH,CAAC;IAED,SAAS,CAAC,CAAgB;QACxB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,UAAU,EAAE;YACxC,IAAI,CAAC,OAAO,EAAE,CAAA;SACf;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAC1E,CAAC;CACF,CAAA;AArIQ,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0DF;CACF,CAAA;AAEiE;IAAjE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAyB;AAC7D;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAA0B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAc;AAEhC;IAAR,KAAK,EAAE;6CAAoD;AAnEjD,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAsItB;SAtIY,UAAU","sourcesContent":["/*\n This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-formfield'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n static styles = [\n css`\n :host {\n display: block;\n }\n\n div {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n [disabled] {\n opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n cursor: auto;\n }\n\n [checkbox] {\n display: flex;\n border-radius: var(--ox-checkbox-border-radius, 4px);\n border: var(--ox-checkbox-border, 1px solid rgba(0, 0, 0, 0.3));\n background-color: var(--ox-checkbox-background-color, #fff);\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n align-items: center;\n justify-content: center;\n }\n\n a {\n background-color: var(--ox-checkbox-unchecked-background-color, #fff);\n border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));\n }\n\n :host([checked]) a {\n background-color: var(--ox-checkbox-checked-background-color, #fff);\n border: var(--ox-checkbox-checked-border, 1px solid #38a25b);\n }\n\n path {\n fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));\n }\n\n :host([checked]) path {\n fill: var(--ox-checkbox-checked-color, #38a25b);\n }\n\n svg {\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n }\n\n [label] {\n margin: var(--ox-checkbox-label-margin, 0 0 0 7px);\n color: var(--ox-checkbox-label-color, #3a5877);\n }\n\n :host([checked]) [label] {\n font-weight: var(--ox-checkbox-checked-font-weight, bold);\n }\n `\n ]\n\n @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean = false\n @property({ type: Boolean }) disabled: boolean = false\n @property({ type: String }) name?: string\n\n @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n render() {\n return html`\n <div @click=${this.onClick} ?disabled=${this.disabled}>\n <a href=\"#\" @click=${(e: Event) => e.preventDefault()} checkbox>\n ${this.checked ? this.checkedIcon : this.uncheckedIcon}\n </a>\n ${this._hasInner\n ? html` <span label>\n <slot></slot>\n </span>`\n : ''}\n </div>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n this.addEventListener('keydown', this.onKeyDown.bind(this))\n }\n\n onClick() {\n if (this.disabled) {\n return\n }\n\n this.checked = !this.checked\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.checked\n })\n )\n }\n\n get checkedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get uncheckedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n onKeyDown(e: KeyboardEvent) {\n e.preventDefault()\n\n if (e.key === ' ' || e.key == 'Spacebar') {\n this.onClick()\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && formData.append(this.name, this.checked ? 'true' : 'false')\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-3dish.js","sourceRoot":"","sources":["../../src/ox-input-3dish.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"ox-input-3dish.js","sourceRoot":"","sources":["../../src/ox-input-3dish.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-formfield'\nimport { OxInputAngle } from './ox-input-angle'\n\n@customElement('ox-input-3dish')\nexport class OxInput3Dish extends OxFormField {\n static styles = [\n css`\n :host {\n display: grid;\n grid-template-columns: repeat(4, minmax(50px, 1fr));\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n }\n\n :host > * {\n grid-column: span 1;\n }\n\n label {\n text-align: right;\n }\n\n span {\n text-align: center;\n }\n `\n ]\n\n @property({ type: Object }) dimension?: { width?: number; height?: number; depth?: number }\n // translate는 고유한 html element의 attribute이므로, property는 translatex로 한다.\n @property({ type: Object }) translatex?: { x?: number; y?: number; z?: number }\n @property({ type: Object }) rotate?: { x?: number; y?: number; z?: number }\n @property({ type: Object }) scale?: { x?: number; y?: number; z?: number }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n _onChange(e: Event) {\n e.stopPropagation()\n e.preventDefault()\n\n var element = e.target as HTMLElement\n var id = element.id\n var prop = id.substr(1)\n var value = Number((element as HTMLInputElement).value)\n\n switch (element.tagName) {\n case 'PROPERTY-ANGLE':\n value = Number((element as OxInputAngle).value || 0)\n break\n }\n\n switch (id) {\n case 'tx':\n case 'ty':\n case 'tz':\n this.translatex = {\n ...this.translatex,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('translate-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.translatex\n }\n })\n )\n break\n\n case 'rx':\n case 'ry':\n case 'rz':\n this.rotate = {\n ...this.rotate,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('rotate-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.rotate\n }\n })\n )\n break\n\n case 'sx':\n case 'sy':\n case 'sz':\n this.scale = {\n ...this.scale,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('scale-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.scale\n }\n })\n )\n break\n\n default:\n // dimension\n this.dimension = {\n ...this.dimension,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('dimension-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.dimension\n }\n })\n )\n }\n\n this.value = {\n translate: this.translatex,\n rotate: this.rotate,\n scale: this.scale,\n dimension: this.dimension\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n render() {\n return html`\n <span></span> <span><i18n-msg msgid=\"label.x-axes\">x-axes</i18n-msg></span>\n <span><i18n-msg msgid=\"label.y-axes\">y-axes</i18n-msg></span>\n <span><i18n-msg msgid=\"label.z-axes\">z-axes</i18n-msg></span>\n\n <label><i18n-msg msgid=\"label.dimension\">dimension</i18n-msg></label>\n <input type=\"number\" id=\"dwidth\" .value=${this.dimension?.width} />\n <input type=\"number\" id=\"dheight\" .value=${this.dimension?.height} />\n <input type=\"number\" id=\"ddepth\" .value=${this.dimension?.depth} />\n\n <label><i18n-msg msgid=\"label.translate\">translate</i18n-msg></label>\n <input type=\"number\" id=\"tx\" .value=${this.translatex?.x} />\n <input type=\"number\" id=\"ty\" .value=${this.translatex?.y} />\n <input type=\"number\" id=\"tz\" .value=${this.translatex?.z} />\n\n <label><i18n-msg msgid=\"label.scale\">scale</i18n-msg></label>\n <input type=\"number\" id=\"sx\" .value=${this.scale?.x} />\n <input type=\"number\" id=\"sy\" .value=${this.scale?.y} />\n <input type=\"number\" id=\"sz\" .value=${this.scale?.z} />\n\n <label><i18n-msg msgid=\"label.rotate\">rotate</i18n-msg></label>\n <ox-input-angle id=\"rx\" .value=${this.rotate?.x}></ox-input-angle>\n <ox-input-angle id=\"ry\" .value=${this.rotate?.y}></ox-input-angle>\n <ox-input-angle id=\"rz\" .value=${this.rotate?.z}></ox-input-angle>\n `\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && formData.append(this.name, JSON.stringify(this.value))\n }\n}\n"]}
|
|
@@ -18,7 +18,11 @@ let OxInputAngle = class OxInputAngle extends OxFormField {
|
|
|
18
18
|
}
|
|
19
19
|
_onChangeValue(e) {
|
|
20
20
|
this.value = this._toRadian(this.input.value);
|
|
21
|
-
this.dispatchEvent(new CustomEvent('change', {
|
|
21
|
+
this.dispatchEvent(new CustomEvent('change', {
|
|
22
|
+
bubbles: true,
|
|
23
|
+
composed: true,
|
|
24
|
+
detail: this.value
|
|
25
|
+
}));
|
|
22
26
|
}
|
|
23
27
|
_toDegree(value) {
|
|
24
28
|
return Math.round(((Number(value) || 0) * 180) / Math.PI);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-angle.js","sourceRoot":"","sources":["../../src/ox-input-angle.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,WAAW;IAoB3C,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;uBACpB,IAAI,CAAC,WAAW,IAAI,IAAI;kBAC7B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;KAEjD,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAE7C,IAAI,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"ox-input-angle.js","sourceRoot":"","sources":["../../src/ox-input-angle.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,WAAW;IAoB3C,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;uBACpB,IAAI,CAAC,WAAW,IAAI,IAAI;kBAC7B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;KAEjD,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAE7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAED,SAAS,CAAC,KAAkC;QAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAED,SAAS,CAAC,MAAmC;QAC3C,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,CAAA;IAC7E,CAAC;CACF,CAAA;AAjDQ,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAqB;AAEhC;IAAf,KAAK,CAAC,OAAO,CAAC;2CAAyB;AAlB7B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAkDxB;SAlDY,YAAY","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-formfield'\n\n@customElement('ox-input-angle')\nexport class OxInputAngle extends OxFormField {\n static styles = [\n css`\n :host {\n display: inline-block;\n }\n\n input {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n `\n ]\n\n @property({ type: String }) placeholder?: string\n\n @query('input') input!: HTMLInputElement\n\n render() {\n return html`\n <input\n type=\"number\"\n .value=${this._toDegree(this.value)}\n .placeholder=${this.placeholder || '0°'}\n @change=${(e: Event) => this._onChangeValue(e)}\n />\n `\n }\n\n _onChangeValue(e: Event) {\n this.value = this._toRadian(this.input.value)\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n _toDegree(value: string | number | undefined) {\n return Math.round(((Number(value) || 0) * 180) / Math.PI)\n }\n\n _toRadian(degree: string | number | undefined) {\n return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180)\n }\n}\n"]}
|