@operato/input 0.2.34 → 0.2.41
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 +51 -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 +17 -9
- package/demo/index-stack.html +15 -3
- package/demo/index.html +79 -73
- 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 +32 -29
- 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 +36 -29
- 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,57 @@
|
|
|
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.41](https://github.com/hatiolab/operato/compare/v0.2.40...v0.2.41) (2021-12-07)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* popup and input style ([11c5b3e](https://github.com/hatiolab/operato/commit/11c5b3e4bf3f08d18673ada585e50a69b9c88b5b))
|
|
12
|
+
* popup style ([43ee008](https://github.com/hatiolab/operato/commit/43ee008afbbd817bb002d2e3c420044f939c9415))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
### [0.2.38](https://github.com/hatiolab/operato/compare/v0.2.37...v0.2.38) (2021-12-07)
|
|
17
|
+
|
|
18
|
+
**Note:** Version bump only for package @operato/input
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
### [0.2.36](https://github.com/hatiolab/operato/compare/v0.2.35...v0.2.36) (2021-12-06)
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
### :mega: Other
|
|
28
|
+
|
|
29
|
+
* operato/input/ox-select ([dd2fcbc](https://github.com/hatiolab/operato/commit/dd2fcbcee22705c1d68d5743f04cb0d5c1739503))
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
### :rocket: New Features
|
|
33
|
+
|
|
34
|
+
* adding filter options for data-grist ([3620e8b](https://github.com/hatiolab/operato/commit/3620e8b5c39e7e66f8e7ab39b2ae7200f7f7afb5))
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
### :bug: Bug Fix
|
|
38
|
+
|
|
39
|
+
* apply class name prefix Ox for operato/popup ([d528848](https://github.com/hatiolab/operato/commit/d5288486ea0e1bec84fff3c5b6bac696eb701e5d))
|
|
40
|
+
* apply things-scene version ([cbebd17](https://github.com/hatiolab/operato/commit/cbebd1729704e6e42e70d60a4e3b122d42271c2e))
|
|
41
|
+
* operato/input to support formfield ([21b4d46](https://github.com/hatiolab/operato/commit/21b4d46d750ba833c571b5caeed27eebd8aa03ca))
|
|
42
|
+
* operato/input to support formfield ([544bf92](https://github.com/hatiolab/operato/commit/544bf928946d878aa967f33b20efdf90eb8e82f5))
|
|
43
|
+
* operato/ox-popup-list rewritten ([f78b3e9](https://github.com/hatiolab/operato/commit/f78b3e9623faac5ea653442ced653173d630d9e6))
|
|
44
|
+
* operato/popup, input sample ([116b037](https://github.com/hatiolab/operato/commit/116b0371446cb24d8863c2bdea876b97f6e11dfd))
|
|
45
|
+
* operato/popup, input sample ([31fb99f](https://github.com/hatiolab/operato/commit/31fb99fc4e37a26c38826dd3554f92ded0632e82))
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
### [0.2.35](https://github.com/hatiolab/operato/compare/v0.2.34...v0.2.35) (2021-12-03)
|
|
50
|
+
|
|
51
|
+
**Note:** Version bump only for package @operato/input
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
6
57
|
### [0.2.34](https://github.com/hatiolab/operato/compare/v0.2.33...v0.2.34) (2021-12-03)
|
|
7
58
|
|
|
8
59
|
**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
|
@@ -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;
|
|
@@ -39,19 +36,30 @@
|
|
|
39
36
|
</style>
|
|
40
37
|
</head>
|
|
41
38
|
<body>
|
|
42
|
-
<
|
|
39
|
+
<form id="demo"></form>
|
|
43
40
|
|
|
44
41
|
<script type="module">
|
|
45
42
|
import { html, render } from 'lit'
|
|
46
43
|
import '../dist/src/ox-checkbox.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
|
+
}
|
|
47
55
|
|
|
48
56
|
render(
|
|
49
57
|
html`
|
|
50
|
-
<ox-checkbox @change=${
|
|
51
|
-
<ox-checkbox @change=${
|
|
52
|
-
<ox-checkbox @change=${
|
|
58
|
+
<ox-checkbox name="check-a" @change=${onchange} class=""></ox-checkbox>
|
|
59
|
+
<ox-checkbox name="check-b" @change=${onchange} class="customized">hatiolab</ox-checkbox>
|
|
60
|
+
<ox-checkbox name="check-c" @change=${onchange} class="customized" disabled>ibex</ox-checkbox>
|
|
53
61
|
`,
|
|
54
|
-
|
|
62
|
+
form
|
|
55
63
|
)
|
|
56
64
|
</script>
|
|
57
65
|
</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
|
@@ -7,105 +7,111 @@
|
|
|
7
7
|
background: #fafafa;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
* {
|
|
11
|
-
margin-bottom: 5px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
10
|
ox-select {
|
|
15
|
-
|
|
11
|
+
display: inline-block;
|
|
12
|
+
width: 100px;
|
|
16
13
|
}
|
|
17
14
|
|
|
18
15
|
ox-popup-list {
|
|
19
|
-
height: 200px;
|
|
16
|
+
max-height: 200px;
|
|
20
17
|
overflow: auto;
|
|
21
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
|
+
}
|
|
22
33
|
</style>
|
|
23
34
|
|
|
24
35
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
|
|
25
36
|
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
26
37
|
</head>
|
|
27
38
|
<body>
|
|
28
|
-
<
|
|
39
|
+
<form id="demo"></form>
|
|
29
40
|
|
|
30
41
|
<script type="module">
|
|
31
42
|
import { html, render } from 'lit'
|
|
32
43
|
import '../dist/src/ox-select.js'
|
|
33
44
|
import '../dist/src/ox-checkbox.js'
|
|
34
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
|
+
|
|
35
58
|
render(
|
|
36
59
|
html`
|
|
37
|
-
<ox-select @
|
|
60
|
+
<ox-select name="single" @change=${onchanged} placeholder="single select">
|
|
38
61
|
<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>
|
|
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>
|
|
72
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>
|
|
73
95
|
|
|
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>
|
|
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
|
|
105
111
|
</ox-popup-list>
|
|
106
112
|
</ox-select>
|
|
107
113
|
`,
|
|
108
|
-
|
|
114
|
+
form
|
|
109
115
|
)
|
|
110
116
|
</script>
|
|
111
117
|
</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":"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","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
|
}
|