@operato/input 0.2.35 → 0.2.42

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.
Files changed (46) hide show
  1. package/CHANGELOG.md +52 -0
  2. package/demo/index-3dish.html +15 -2
  3. package/demo/index-angle.html +9 -4
  4. package/demo/index-barcode.html +66 -0
  5. package/demo/index-button-radio.html +18 -6
  6. package/demo/index-checkbox.html +17 -9
  7. package/demo/index-select.html +118 -0
  8. package/demo/index-stack.html +15 -3
  9. package/demo/index.html +42 -86
  10. package/dist/src/ox-buttons-radio.d.ts +7 -5
  11. package/dist/src/ox-buttons-radio.js +18 -10
  12. package/dist/src/ox-buttons-radio.js.map +1 -1
  13. package/dist/src/ox-checkbox.d.ts +5 -6
  14. package/dist/src/ox-checkbox.js +33 -33
  15. package/dist/src/ox-checkbox.js.map +1 -1
  16. package/dist/src/ox-formfield.d.ts +10 -0
  17. package/dist/src/ox-formfield.js +38 -0
  18. package/dist/src/ox-formfield.js.map +1 -0
  19. package/dist/src/ox-input-3dish.d.ts +15 -14
  20. package/dist/src/ox-input-3dish.js +49 -23
  21. package/dist/src/ox-input-3dish.js.map +1 -1
  22. package/dist/src/ox-input-angle.d.ts +4 -5
  23. package/dist/src/ox-input-angle.js +15 -13
  24. package/dist/src/ox-input-angle.js.map +1 -1
  25. package/dist/src/ox-input-barcode.d.ts +22 -0
  26. package/dist/src/ox-input-barcode.js +205 -0
  27. package/dist/src/ox-input-barcode.js.map +1 -0
  28. package/dist/src/ox-input-stack.d.ts +5 -3
  29. package/dist/src/ox-input-stack.js +44 -35
  30. package/dist/src/ox-input-stack.js.map +1 -1
  31. package/dist/src/ox-select.d.ts +5 -4
  32. package/dist/src/ox-select.js +34 -12
  33. package/dist/src/ox-select.js.map +1 -1
  34. package/dist/test/property-angle.test.js +3 -3
  35. package/dist/test/property-angle.test.js.map +1 -1
  36. package/dist/tsconfig.tsbuildinfo +1 -1
  37. package/package.json +4 -3
  38. package/src/ox-buttons-radio.ts +22 -10
  39. package/src/ox-checkbox.ts +37 -33
  40. package/src/ox-formfield.ts +36 -0
  41. package/src/ox-input-3dish.ts +63 -29
  42. package/src/ox-input-angle.ts +19 -14
  43. package/src/ox-input-barcode.ts +203 -0
  44. package/src/ox-input-stack.ts +49 -24
  45. package/src/ox-select.ts +46 -16
  46. package/test/property-angle.test.ts +3 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,58 @@
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.42](https://github.com/hatiolab/operato/compare/v0.2.41...v0.2.42) (2021-12-07)
7
+
8
+
9
+ ### :rocket: New Features
10
+
11
+ * add ox-input-barcode and export sorters property for grist ([0659d20](https://github.com/hatiolab/operato/commit/0659d20fcbfb48b0790ee57154c9108491566509))
12
+
13
+
14
+
15
+ ### [0.2.41](https://github.com/hatiolab/operato/compare/v0.2.40...v0.2.41) (2021-12-07)
16
+
17
+
18
+ ### :bug: Bug Fix
19
+
20
+ * popup and input style ([11c5b3e](https://github.com/hatiolab/operato/commit/11c5b3e4bf3f08d18673ada585e50a69b9c88b5b))
21
+ * popup style ([43ee008](https://github.com/hatiolab/operato/commit/43ee008afbbd817bb002d2e3c420044f939c9415))
22
+
23
+
24
+
25
+ ### [0.2.38](https://github.com/hatiolab/operato/compare/v0.2.37...v0.2.38) (2021-12-07)
26
+
27
+ **Note:** Version bump only for package @operato/input
28
+
29
+
30
+
31
+
32
+
33
+ ### [0.2.36](https://github.com/hatiolab/operato/compare/v0.2.35...v0.2.36) (2021-12-06)
34
+
35
+
36
+ ### :mega: Other
37
+
38
+ * operato/input/ox-select ([dd2fcbc](https://github.com/hatiolab/operato/commit/dd2fcbcee22705c1d68d5743f04cb0d5c1739503))
39
+
40
+
41
+ ### :rocket: New Features
42
+
43
+ * adding filter options for data-grist ([3620e8b](https://github.com/hatiolab/operato/commit/3620e8b5c39e7e66f8e7ab39b2ae7200f7f7afb5))
44
+
45
+
46
+ ### :bug: Bug Fix
47
+
48
+ * apply class name prefix Ox for operato/popup ([d528848](https://github.com/hatiolab/operato/commit/d5288486ea0e1bec84fff3c5b6bac696eb701e5d))
49
+ * apply things-scene version ([cbebd17](https://github.com/hatiolab/operato/commit/cbebd1729704e6e42e70d60a4e3b122d42271c2e))
50
+ * operato/input to support formfield ([21b4d46](https://github.com/hatiolab/operato/commit/21b4d46d750ba833c571b5caeed27eebd8aa03ca))
51
+ * operato/input to support formfield ([544bf92](https://github.com/hatiolab/operato/commit/544bf928946d878aa967f33b20efdf90eb8e82f5))
52
+ * operato/ox-popup-list rewritten ([f78b3e9](https://github.com/hatiolab/operato/commit/f78b3e9623faac5ea653442ced653173d630d9e6))
53
+ * operato/popup, input sample ([116b037](https://github.com/hatiolab/operato/commit/116b0371446cb24d8863c2bdea876b97f6e11dfd))
54
+ * operato/popup, input sample ([31fb99f](https://github.com/hatiolab/operato/commit/31fb99fc4e37a26c38826dd3554f92ded0632e82))
55
+
56
+
57
+
6
58
  ### [0.2.35](https://github.com/hatiolab/operato/compare/v0.2.34...v0.2.35) (2021-12-03)
7
59
 
8
60
  **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
- <div id="demo"></div>
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
- render(html` <ox-input-3dish></ox-input-3dish> `, document.querySelector('#demo'))
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
- <div id="demo"></div>
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
- radian="1"
23
+ value="1"
24
+ name="angle"
23
25
  placeholder=${placeholder}
24
- @change=${e => console.log(e.target.radian)}
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
- document.querySelector('#demo')
32
+ form
28
33
  )
29
34
  </script>
30
35
  </body>
package/demo/index-barcode.html ADDED
@@ -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-button-radio.html CHANGED
@@ -9,21 +9,33 @@
9
9
  </style>
10
10
  </head>
11
11
  <body>
12
- <div id="demo"></div>
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=${e => console.log(e.target.value)}>
21
- <div data-value="top">TOP</div>
22
- <div data-value="middle">MID</div>
23
- <div data-value="bottom">BOT</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
- document.querySelector('#demo')
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: 18px;
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
- <div id="demo"></div>
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=${e => console.log(e.target.checked)} class=""></ox-checkbox>
51
- <ox-checkbox @change=${e => console.log(e.target.checked)} class="customized">hatiolab</ox-checkbox>
52
- <ox-checkbox @change=${e => console.log(e.target.checked)} class="customized" disabled>ibex</ox-checkbox>
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
- document.querySelector('#demo')
62
+ form
55
63
  )
56
64
  </script>
57
65
  </body>
package/demo/index-select.html ADDED
@@ -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-stack.html CHANGED
@@ -9,13 +9,25 @@
9
9
  </style>
10
10
  </head>
11
11
  <body>
12
- <div id="demo"></div>
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
- render(html` <ox-stack> </ox-stack> `, document.querySelector('#demo'))
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,61 @@
7
7
  background: #fafafa;
8
8
  }
9
9
 
10
- * {
11
- margin-bottom: 5px;
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
- ox-select {
15
- width: 200px;
16
- }
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);
17
30
 
18
- ox-popup-list {
19
- height: 200px;
20
- overflow: auto;
31
+ /* checkbox disabled */
32
+ --ox-checkbox-disabled-opacity: 0.5;
33
+
34
+ font-size: 1.1em;
21
35
  }
22
36
  </style>
23
-
24
- <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
25
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
26
37
  </head>
27
38
  <body>
28
- <div id="demo"></div>
39
+ <form id="demo"></form>
29
40
 
30
41
  <script type="module">
31
42
  import { html, render } from 'lit'
32
- import '../dist/src/ox-select.js'
33
- import '../dist/src/ox-checkbox.js'
43
+ import '../dist/src/ox-input-barcode.js'
44
+ const form = document.querySelector('#demo')
34
45
 
35
- render(
36
- html`
37
- <ox-select @selected=${e => console.log(e.target)} label="Click to expand this">
38
- <ox-popup-list>
39
- <div option @selected=${e => console.log(e.target)}>Click this to close</div>
40
-
41
- <div option alive-on-select @selected=${e => console.log(e.target)}>
42
- <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
43
- </div>
44
-
45
- <div option alive-on-select>
46
- <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
47
- </div>
48
-
49
- <div option alive-on-select>
50
- <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
51
- </div>
52
-
53
- <div option alive-on-select>
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>
46
+ function onchange(e) {
47
+ const target = e.target
48
+ console.log(target.name, target.value)
72
49
 
50
+ const formData = new FormData(form)
51
+ console.log('<---- entries begins ----')
52
+ for (var pair of formData.entries()) {
53
+ console.log(pair[0] + ', ' + pair[1])
54
+ }
55
+ console.log('---- entries ends ------>')
56
+ }
73
57
 
74
- <div option alive-on-select @selected=${e => console.log(e.target)}>
75
- <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
76
- </div>
77
-
78
- <div option alive-on-select>
79
- <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
80
- </div>
81
-
82
- <div option alive-on-select>
83
- <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
84
- </div>
85
-
86
- <div option alive-on-select>
87
- <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
88
- </div>
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>
105
- </ox-popup-list>
106
- </ox-select>
58
+ render(
59
+ html`
60
+ <ox-input-barcode name="input-a" @change=${onchange}></ox-input-barcode>
61
+ <ox-input-barcode name="input-b" @change=${onchange}>hatiolab</ox-input-barcode>
62
+ <ox-input-barcode name="input-c" @change=${onchange}>ibex</ox-input-barcode>
107
63
  `,
108
- document.querySelector('#demo')
64
+ form
109
65
  )
110
66
  </script>
111
67
  </body>
package/dist/src/ox-buttons-radio.d.ts CHANGED
@@ -1,19 +1,20 @@
1
1
  /**
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
- import { LitElement, PropertyValues } from 'lit';
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 data-value="top"></div>
12
- <div data-value="middle"></div>
13
- <div data-value="bottom"></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 LitElement {
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
  }