@operato/input 0.2.35 → 0.2.36
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 +25 -0
- package/demo/index-3dish.html +15 -2
- package/demo/index-angle.html +9 -4
- package/demo/index-button-radio.html +18 -6
- package/demo/index-checkbox.html +16 -5
- package/demo/index-stack.html +15 -3
- package/demo/index.html +79 -69
- package/dist/src/ox-buttons-radio.d.ts +7 -5
- package/dist/src/ox-buttons-radio.js +13 -9
- package/dist/src/ox-buttons-radio.js.map +1 -1
- package/dist/src/ox-checkbox.d.ts +5 -6
- package/dist/src/ox-checkbox.js +28 -25
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-formfield.d.ts +10 -0
- package/dist/src/ox-formfield.js +38 -0
- package/dist/src/ox-formfield.js.map +1 -0
- package/dist/src/ox-input-3dish.d.ts +15 -14
- package/dist/src/ox-input-3dish.js +51 -23
- package/dist/src/ox-input-3dish.js.map +1 -1
- package/dist/src/ox-input-angle.d.ts +4 -5
- package/dist/src/ox-input-angle.js +10 -12
- package/dist/src/ox-input-angle.js.map +1 -1
- package/dist/src/ox-input-stack.d.ts +5 -3
- package/dist/src/ox-input-stack.js +40 -35
- package/dist/src/ox-input-stack.js.map +1 -1
- package/dist/src/ox-select.d.ts +5 -4
- package/dist/src/ox-select.js +34 -12
- package/dist/src/ox-select.js.map +1 -1
- package/dist/test/property-angle.test.js +3 -3
- package/dist/test/property-angle.test.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/ox-buttons-radio.ts +15 -9
- package/src/ox-checkbox.ts +32 -25
- package/src/ox-formfield.ts +36 -0
- package/src/ox-input-3dish.ts +65 -29
- package/src/ox-input-angle.ts +11 -12
- package/src/ox-input-stack.ts +43 -24
- package/src/ox-select.ts +44 -15
- package/test/property-angle.test.ts +3 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,31 @@
|
|
|
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.36](https://github.com/hatiolab/operato/compare/v0.2.35...v0.2.36) (2021-12-06)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :mega: Other
|
|
10
|
+
|
|
11
|
+
* operato/input/ox-select ([dd2fcbc](https://github.com/hatiolab/operato/commit/dd2fcbcee22705c1d68d5743f04cb0d5c1739503))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### :rocket: New Features
|
|
15
|
+
|
|
16
|
+
* adding filter options for data-grist ([3620e8b](https://github.com/hatiolab/operato/commit/3620e8b5c39e7e66f8e7ab39b2ae7200f7f7afb5))
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
### :bug: Bug Fix
|
|
20
|
+
|
|
21
|
+
* apply class name prefix Ox for operato/popup ([d528848](https://github.com/hatiolab/operato/commit/d5288486ea0e1bec84fff3c5b6bac696eb701e5d))
|
|
22
|
+
* apply things-scene version ([cbebd17](https://github.com/hatiolab/operato/commit/cbebd1729704e6e42e70d60a4e3b122d42271c2e))
|
|
23
|
+
* operato/input to support formfield ([21b4d46](https://github.com/hatiolab/operato/commit/21b4d46d750ba833c571b5caeed27eebd8aa03ca))
|
|
24
|
+
* operato/input to support formfield ([544bf92](https://github.com/hatiolab/operato/commit/544bf928946d878aa967f33b20efdf90eb8e82f5))
|
|
25
|
+
* operato/ox-popup-list rewritten ([f78b3e9](https://github.com/hatiolab/operato/commit/f78b3e9623faac5ea653442ced653173d630d9e6))
|
|
26
|
+
* operato/popup, input sample ([116b037](https://github.com/hatiolab/operato/commit/116b0371446cb24d8863c2bdea876b97f6e11dfd))
|
|
27
|
+
* operato/popup, input sample ([31fb99f](https://github.com/hatiolab/operato/commit/31fb99fc4e37a26c38826dd3554f92ded0632e82))
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
6
31
|
### [0.2.35](https://github.com/hatiolab/operato/compare/v0.2.34...v0.2.35) (2021-12-03)
|
|
7
32
|
|
|
8
33
|
**Note:** Version bump only for package @operato/input
|
package/demo/index-3dish.html
CHANGED
|
@@ -9,14 +9,27 @@
|
|
|
9
9
|
</style>
|
|
10
10
|
</head>
|
|
11
11
|
<body>
|
|
12
|
-
<
|
|
12
|
+
<form id="demo"></form>
|
|
13
13
|
|
|
14
14
|
<script type="module">
|
|
15
15
|
import { html, render } from 'lit'
|
|
16
16
|
import '../dist/src/ox-input-angle.js'
|
|
17
17
|
import '../dist/src/ox-input-3dish.js'
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
const form = document.querySelector('#demo')
|
|
20
|
+
|
|
21
|
+
render(
|
|
22
|
+
html`
|
|
23
|
+
<ox-input-3dish
|
|
24
|
+
name="threedish"
|
|
25
|
+
@change=${e => {
|
|
26
|
+
console.log(e.target.value)
|
|
27
|
+
console.log('form value', new FormData(form).get('threedish'))
|
|
28
|
+
}}
|
|
29
|
+
></ox-input-3dish>
|
|
30
|
+
`,
|
|
31
|
+
form
|
|
32
|
+
)
|
|
20
33
|
</script>
|
|
21
34
|
</body>
|
|
22
35
|
</html>
|
package/demo/index-angle.html
CHANGED
|
@@ -9,22 +9,27 @@
|
|
|
9
9
|
</style>
|
|
10
10
|
</head>
|
|
11
11
|
<body>
|
|
12
|
-
<
|
|
12
|
+
<form id="demo"></form>
|
|
13
13
|
|
|
14
14
|
<script type="module">
|
|
15
15
|
import { html, render } from 'lit'
|
|
16
16
|
import '../dist/src/ox-input-angle.js'
|
|
17
17
|
|
|
18
|
+
const form = document.querySelector('#demo')
|
|
18
19
|
const placeholder = 'enter a angle in degree'
|
|
19
20
|
render(
|
|
20
21
|
html`
|
|
21
22
|
<ox-input-angle
|
|
22
|
-
|
|
23
|
+
value="1"
|
|
24
|
+
name="angle"
|
|
23
25
|
placeholder=${placeholder}
|
|
24
|
-
@change=${e =>
|
|
26
|
+
@change=${e => {
|
|
27
|
+
console.log(e.target.value)
|
|
28
|
+
console.log('form value', new FormData(form).get('angle'))
|
|
29
|
+
}}
|
|
25
30
|
></ox-input-angle>
|
|
26
31
|
`,
|
|
27
|
-
|
|
32
|
+
form
|
|
28
33
|
)
|
|
29
34
|
</script>
|
|
30
35
|
</body>
|
|
@@ -9,21 +9,33 @@
|
|
|
9
9
|
</style>
|
|
10
10
|
</head>
|
|
11
11
|
<body>
|
|
12
|
-
<
|
|
12
|
+
<form id="demo"></form>
|
|
13
13
|
|
|
14
14
|
<script type="module">
|
|
15
15
|
import { html, render } from 'lit'
|
|
16
16
|
import '../dist/src/ox-buttons-radio.js'
|
|
17
17
|
|
|
18
|
+
const form = document.querySelector('#demo')
|
|
19
|
+
|
|
20
|
+
function onchange(e) {
|
|
21
|
+
const target = e.target
|
|
22
|
+
console.log(target.name, target.value)
|
|
23
|
+
|
|
24
|
+
const formData = new FormData(form)
|
|
25
|
+
for (var pair of formData.entries()) {
|
|
26
|
+
console.log(pair[0] + ', ' + pair[1])
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
18
30
|
render(
|
|
19
31
|
html`
|
|
20
|
-
<ox-buttons-radio @change=${
|
|
21
|
-
<div
|
|
22
|
-
<div
|
|
23
|
-
<div
|
|
32
|
+
<ox-buttons-radio name="group" @change=${onchange}>
|
|
33
|
+
<div value="top">TOP</div>
|
|
34
|
+
<div value="middle">MID</div>
|
|
35
|
+
<div value="bottom">BOT</div>
|
|
24
36
|
</ox-buttons-radio>
|
|
25
37
|
`,
|
|
26
|
-
|
|
38
|
+
form
|
|
27
39
|
)
|
|
28
40
|
</script>
|
|
29
41
|
</body>
|
package/demo/index-checkbox.html
CHANGED
|
@@ -39,19 +39,30 @@
|
|
|
39
39
|
</style>
|
|
40
40
|
</head>
|
|
41
41
|
<body>
|
|
42
|
-
<
|
|
42
|
+
<form id="demo"></form>
|
|
43
43
|
|
|
44
44
|
<script type="module">
|
|
45
45
|
import { html, render } from 'lit'
|
|
46
46
|
import '../dist/src/ox-checkbox.js'
|
|
47
|
+
const form = document.querySelector('#demo')
|
|
48
|
+
|
|
49
|
+
function onchange(e) {
|
|
50
|
+
const target = e.target
|
|
51
|
+
console.log(target.name, target.checked)
|
|
52
|
+
|
|
53
|
+
const formData = new FormData(form)
|
|
54
|
+
for (var pair of formData.entries()) {
|
|
55
|
+
console.log(pair[0] + ', ' + pair[1])
|
|
56
|
+
}
|
|
57
|
+
}
|
|
47
58
|
|
|
48
59
|
render(
|
|
49
60
|
html`
|
|
50
|
-
<ox-checkbox @change=${
|
|
51
|
-
<ox-checkbox @change=${
|
|
52
|
-
<ox-checkbox @change=${
|
|
61
|
+
<ox-checkbox name="check-a" @change=${onchange} class=""></ox-checkbox>
|
|
62
|
+
<ox-checkbox name="check-b" @change=${onchange} class="customized">hatiolab</ox-checkbox>
|
|
63
|
+
<ox-checkbox name="check-c" @change=${onchange} class="customized" disabled>ibex</ox-checkbox>
|
|
53
64
|
`,
|
|
54
|
-
|
|
65
|
+
form
|
|
55
66
|
)
|
|
56
67
|
</script>
|
|
57
68
|
</body>
|
package/demo/index-stack.html
CHANGED
|
@@ -9,13 +9,25 @@
|
|
|
9
9
|
</style>
|
|
10
10
|
</head>
|
|
11
11
|
<body>
|
|
12
|
-
<
|
|
12
|
+
<form id="demo"></form>
|
|
13
13
|
|
|
14
14
|
<script type="module">
|
|
15
15
|
import { html, render } from 'lit'
|
|
16
|
-
import '../dist/src/ox-stack.js'
|
|
16
|
+
import '../dist/src/ox-input-stack.js'
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
const form = document.querySelector('#demo')
|
|
19
|
+
|
|
20
|
+
function onchange(e) {
|
|
21
|
+
const target = e.target
|
|
22
|
+
console.log(target.name, target.checked)
|
|
23
|
+
|
|
24
|
+
const formData = new FormData(form)
|
|
25
|
+
for (var pair of formData.entries()) {
|
|
26
|
+
console.log(pair[0] + ', ' + pair[1])
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
render(html` <ox-input-stack name="stack" @change=${onchange}> </ox-input-stack> `, form)
|
|
19
31
|
</script>
|
|
20
32
|
</body>
|
|
21
33
|
</html>
|
package/demo/index.html
CHANGED
|
@@ -12,100 +12,110 @@
|
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
ox-select {
|
|
15
|
-
|
|
15
|
+
display: inline-block;
|
|
16
|
+
width: 100px;
|
|
16
17
|
}
|
|
17
18
|
|
|
18
19
|
ox-popup-list {
|
|
19
|
-
height: 200px;
|
|
20
|
+
max-height: 200px;
|
|
20
21
|
overflow: auto;
|
|
21
22
|
}
|
|
23
|
+
|
|
24
|
+
::-webkit-scrollbar {
|
|
25
|
+
width: 5px;
|
|
26
|
+
height: 5px;
|
|
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);
|
|
36
|
+
}
|
|
22
37
|
</style>
|
|
23
38
|
|
|
24
39
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
|
|
25
40
|
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
26
41
|
</head>
|
|
27
42
|
<body>
|
|
28
|
-
<
|
|
43
|
+
<form id="demo"></form>
|
|
29
44
|
|
|
30
45
|
<script type="module">
|
|
31
46
|
import { html, render } from 'lit'
|
|
32
47
|
import '../dist/src/ox-select.js'
|
|
33
48
|
import '../dist/src/ox-checkbox.js'
|
|
34
49
|
|
|
50
|
+
const form = document.querySelector('#demo')
|
|
51
|
+
|
|
52
|
+
function onchanged(e) {
|
|
53
|
+
const target = e.target
|
|
54
|
+
console.log(target, target.name, e.detail)
|
|
55
|
+
|
|
56
|
+
const formData = new FormData(form)
|
|
57
|
+
for (var pair of formData.entries()) {
|
|
58
|
+
console.log(pair[0] + ', ' + pair[1])
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
35
62
|
render(
|
|
36
63
|
html`
|
|
37
|
-
<ox-select @
|
|
64
|
+
<ox-select name="single" @change=${onchanged} placeholder="single select">
|
|
38
65
|
<ox-popup-list>
|
|
39
|
-
<div option
|
|
40
|
-
|
|
41
|
-
<div option
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<div option
|
|
50
|
-
|
|
51
|
-
</div>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
|
|
55
|
-
</div>
|
|
56
|
-
|
|
57
|
-
<div option alive-on-select>
|
|
58
|
-
<ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
|
|
59
|
-
</div>
|
|
60
|
-
|
|
61
|
-
<div option alive-on-select>
|
|
62
|
-
<ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
|
|
63
|
-
</div>
|
|
64
|
-
|
|
65
|
-
<div option alive-on-select>
|
|
66
|
-
<ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
|
|
67
|
-
</div>
|
|
68
|
-
|
|
69
|
-
<div option alive-on-select>
|
|
70
|
-
<ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
|
|
71
|
-
</div>
|
|
66
|
+
<div option value="A" />A</div>
|
|
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>
|
|
72
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>
|
|
73
99
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
<
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
<div option alive-on-select>
|
|
91
|
-
<ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
|
|
92
|
-
</div>
|
|
93
|
-
|
|
94
|
-
<div option alive-on-select>
|
|
95
|
-
<ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
|
|
96
|
-
</div>
|
|
97
|
-
|
|
98
|
-
<div option alive-on-select>
|
|
99
|
-
<ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
|
|
100
|
-
</div>
|
|
101
|
-
|
|
102
|
-
<div option alive-on-select>
|
|
103
|
-
<ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
|
|
104
|
-
</div>
|
|
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
|
|
105
115
|
</ox-popup-list>
|
|
106
116
|
</ox-select>
|
|
107
117
|
`,
|
|
108
|
-
|
|
118
|
+
form
|
|
109
119
|
)
|
|
110
120
|
</script>
|
|
111
121
|
</body>
|
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
|
-
import {
|
|
4
|
+
import { PropertyValues } from 'lit';
|
|
5
|
+
import { OxFormField } from './ox-formfield';
|
|
5
6
|
/**
|
|
6
7
|
여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
|
|
7
8
|
|
|
8
9
|
Example:
|
|
9
10
|
|
|
10
11
|
<ox-buttons-radio @change=${e => this._onChange(e)} value=${value}>
|
|
11
|
-
<div
|
|
12
|
-
<div
|
|
13
|
-
<div
|
|
12
|
+
<div value="top"></div>
|
|
13
|
+
<div value="middle"></div>
|
|
14
|
+
<div value="bottom"></div>
|
|
14
15
|
</ox-buttons-radio>
|
|
15
16
|
*/
|
|
16
|
-
export declare class PropertyButtonsRadio extends
|
|
17
|
+
export declare class PropertyButtonsRadio extends OxFormField {
|
|
17
18
|
static styles: import("lit").CSSResult[];
|
|
18
19
|
/**
|
|
19
20
|
* `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.
|
|
@@ -25,4 +26,5 @@ export declare class PropertyButtonsRadio extends LitElement {
|
|
|
25
26
|
get buttons(): Element[];
|
|
26
27
|
_onValueChanged(value: Object | null): void;
|
|
27
28
|
_onTapButton(e: Event): void;
|
|
29
|
+
protected appendFormData({ formData }: FormDataEvent): void;
|
|
28
30
|
}
|
|
@@ -2,20 +2,21 @@
|
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
|
-
import { css, html
|
|
5
|
+
import { css, html } from 'lit';
|
|
6
6
|
import { customElement, property } from 'lit/decorators.js';
|
|
7
|
+
import { OxFormField } from './ox-formfield';
|
|
7
8
|
/**
|
|
8
9
|
여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
|
|
9
10
|
|
|
10
11
|
Example:
|
|
11
12
|
|
|
12
13
|
<ox-buttons-radio @change=${e => this._onChange(e)} value=${value}>
|
|
13
|
-
<div
|
|
14
|
-
<div
|
|
15
|
-
<div
|
|
14
|
+
<div value="top"></div>
|
|
15
|
+
<div value="middle"></div>
|
|
16
|
+
<div value="bottom"></div>
|
|
16
17
|
</ox-buttons-radio>
|
|
17
18
|
*/
|
|
18
|
-
let PropertyButtonsRadio = class PropertyButtonsRadio extends
|
|
19
|
+
let PropertyButtonsRadio = class PropertyButtonsRadio extends OxFormField {
|
|
19
20
|
constructor() {
|
|
20
21
|
super(...arguments);
|
|
21
22
|
/**
|
|
@@ -34,7 +35,7 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends LitElement {
|
|
|
34
35
|
}
|
|
35
36
|
_onValueChanged(value) {
|
|
36
37
|
this.buttons.forEach(button => {
|
|
37
|
-
if (value === button.getAttribute('
|
|
38
|
+
if (value === button.getAttribute('value')) {
|
|
38
39
|
button.setAttribute('active', '');
|
|
39
40
|
}
|
|
40
41
|
else {
|
|
@@ -44,7 +45,7 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends LitElement {
|
|
|
44
45
|
}
|
|
45
46
|
_onTapButton(e) {
|
|
46
47
|
var target = e.target;
|
|
47
|
-
while (!target.hasAttribute('
|
|
48
|
+
while (!target.hasAttribute('value') && target !== this) {
|
|
48
49
|
target = target.parentElement;
|
|
49
50
|
}
|
|
50
51
|
if (target === this) {
|
|
@@ -53,7 +54,7 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends LitElement {
|
|
|
53
54
|
var old = this.value;
|
|
54
55
|
if (!this.mandatory) {
|
|
55
56
|
if (!target.getAttribute('active')) {
|
|
56
|
-
this.value = target.getAttribute('
|
|
57
|
+
this.value = target.getAttribute('value');
|
|
57
58
|
target.setAttribute('active', '');
|
|
58
59
|
}
|
|
59
60
|
else {
|
|
@@ -62,13 +63,16 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends LitElement {
|
|
|
62
63
|
}
|
|
63
64
|
}
|
|
64
65
|
else {
|
|
65
|
-
this.value = target.getAttribute('
|
|
66
|
+
this.value = target.getAttribute('value');
|
|
66
67
|
target.setAttribute('active', '');
|
|
67
68
|
}
|
|
68
69
|
if (old !== this.value) {
|
|
69
70
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
70
71
|
}
|
|
71
72
|
}
|
|
73
|
+
appendFormData({ formData }) {
|
|
74
|
+
this.name && formData.append(this.name, JSON.stringify(this.value));
|
|
75
|
+
}
|
|
72
76
|
};
|
|
73
77
|
PropertyButtonsRadio.styles = [
|
|
74
78
|
css `
|
|
@@ -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,EAA8B,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,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;IA2DzD,CAAC;IAxDC,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,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;SACjF;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;AAtEQ,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,CAuEhC;SAvEY,oBAAoB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, PropertyValues, css, html } 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(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && formData.append(this.name, JSON.stringify(this.value))\n }\n}\n"]}
|
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
*/
|
|
4
|
-
import { LitElement } from 'lit';
|
|
5
|
-
export declare class OxCheckbox extends LitElement {
|
|
1
|
+
import { OxFormField } from './ox-formfield';
|
|
2
|
+
export declare class OxCheckbox extends OxFormField {
|
|
6
3
|
static styles: import("lit").CSSResult[];
|
|
7
4
|
checked: boolean;
|
|
8
5
|
disabled: boolean;
|
|
9
|
-
name
|
|
6
|
+
name?: string;
|
|
10
7
|
_hasInner: boolean;
|
|
11
8
|
render(): import("lit-html").TemplateResult<1>;
|
|
9
|
+
connectedCallback(): void;
|
|
12
10
|
onClick(): void;
|
|
13
11
|
get checkedIcon(): import("lit-html").TemplateResult<1>;
|
|
14
12
|
get uncheckedIcon(): import("lit-html").TemplateResult<1>;
|
|
15
13
|
onKeyDown(e: KeyboardEvent): void;
|
|
14
|
+
protected appendFormData({ formData }: FormDataEvent): void;
|
|
16
15
|
}
|
package/dist/src/ox-checkbox.js
CHANGED
|
@@ -1,30 +1,21 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
-
*/
|
|
4
|
-
import { __decorate } from "tslib";
|
|
5
1
|
/*
|
|
6
2
|
This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.
|
|
7
3
|
*/
|
|
8
|
-
import {
|
|
4
|
+
import { __decorate } from "tslib";
|
|
5
|
+
import { css, html } from 'lit';
|
|
9
6
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
10
|
-
|
|
7
|
+
import { OxFormField } from './ox-formfield';
|
|
8
|
+
let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
11
9
|
constructor() {
|
|
12
10
|
super(...arguments);
|
|
13
11
|
this.checked = false;
|
|
14
12
|
this.disabled = false;
|
|
15
|
-
this.name = '';
|
|
16
13
|
this._hasInner = !!this.innerHTML.trim().length;
|
|
17
14
|
}
|
|
18
15
|
render() {
|
|
19
16
|
return html `
|
|
20
17
|
<div @click=${this.onClick} ?disabled=${this.disabled}>
|
|
21
|
-
<a
|
|
22
|
-
href="#"
|
|
23
|
-
@click=${(e) => e.preventDefault()}
|
|
24
|
-
@keydown=${this.onKeyDown}
|
|
25
|
-
?checked=${this.checked}
|
|
26
|
-
checkbox
|
|
27
|
-
>
|
|
18
|
+
<a href="#" @click=${(e) => e.preventDefault()} checkbox>
|
|
28
19
|
${this.checked ? this.checkedIcon : this.uncheckedIcon}
|
|
29
20
|
</a>
|
|
30
21
|
${this._hasInner
|
|
@@ -35,6 +26,11 @@ let OxCheckbox = class OxCheckbox extends LitElement {
|
|
|
35
26
|
</div>
|
|
36
27
|
`;
|
|
37
28
|
}
|
|
29
|
+
connectedCallback() {
|
|
30
|
+
super.connectedCallback();
|
|
31
|
+
this.setAttribute('tabindex', '0');
|
|
32
|
+
this.addEventListener('keydown', this.onKeyDown.bind(this));
|
|
33
|
+
}
|
|
38
34
|
onClick() {
|
|
39
35
|
if (this.disabled) {
|
|
40
36
|
return;
|
|
@@ -50,21 +46,28 @@ let OxCheckbox = class OxCheckbox extends LitElement {
|
|
|
50
46
|
}));
|
|
51
47
|
}
|
|
52
48
|
get checkedIcon() {
|
|
53
|
-
return html
|
|
54
|
-
<
|
|
55
|
-
|
|
49
|
+
return html `
|
|
50
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
51
|
+
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
|
|
52
|
+
</svg>
|
|
53
|
+
`;
|
|
56
54
|
}
|
|
57
55
|
get uncheckedIcon() {
|
|
58
|
-
return html
|
|
59
|
-
<
|
|
60
|
-
|
|
56
|
+
return html `
|
|
57
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
58
|
+
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
|
|
59
|
+
</svg>
|
|
60
|
+
`;
|
|
61
61
|
}
|
|
62
62
|
onKeyDown(e) {
|
|
63
63
|
e.preventDefault();
|
|
64
|
-
if (e.
|
|
64
|
+
if (e.key === ' ' || e.key == 'Spacebar') {
|
|
65
65
|
this.onClick();
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
|
+
appendFormData({ formData }) {
|
|
69
|
+
this.name && formData.append(this.name, this.checked ? 'true' : 'false');
|
|
70
|
+
}
|
|
68
71
|
};
|
|
69
72
|
OxCheckbox.styles = [
|
|
70
73
|
css `
|
|
@@ -99,7 +102,7 @@ OxCheckbox.styles = [
|
|
|
99
102
|
border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));
|
|
100
103
|
}
|
|
101
104
|
|
|
102
|
-
|
|
105
|
+
:host([checked]) a {
|
|
103
106
|
background-color: var(--ox-checkbox-checked-background-color, #fff);
|
|
104
107
|
border: var(--ox-checkbox-checked-border, 1px solid #38a25b);
|
|
105
108
|
}
|
|
@@ -108,7 +111,7 @@ OxCheckbox.styles = [
|
|
|
108
111
|
fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));
|
|
109
112
|
}
|
|
110
113
|
|
|
111
|
-
[checked] path {
|
|
114
|
+
:host([checked]) path {
|
|
112
115
|
fill: var(--ox-checkbox-checked-color, #38a25b);
|
|
113
116
|
}
|
|
114
117
|
|
|
@@ -122,13 +125,13 @@ OxCheckbox.styles = [
|
|
|
122
125
|
color: var(--ox-checkbox-label-color, #3a5877);
|
|
123
126
|
}
|
|
124
127
|
|
|
125
|
-
[checked]
|
|
128
|
+
:host([checked]) [label] {
|
|
126
129
|
font-weight: var(--ox-checkbox-checked-font-weight, bold);
|
|
127
130
|
}
|
|
128
131
|
`
|
|
129
132
|
];
|
|
130
133
|
__decorate([
|
|
131
|
-
property({ type: Boolean })
|
|
134
|
+
property({ type: Boolean, attribute: 'checked', reflect: true })
|
|
132
135
|
], OxCheckbox.prototype, "checked", void 0);
|
|
133
136
|
__decorate([
|
|
134
137
|
property({ type: Boolean })
|