@operato/input 8.0.0-beta.1 → 8.0.0-beta.5

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 (25) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/package.json +7 -7
  3. package/demo/index-3dish.html +0 -38
  4. package/demo/index-angle.html +0 -36
  5. package/demo/index-barcode.html +0 -68
  6. package/demo/index-button-radio.html +0 -42
  7. package/demo/index-checkbox.html +0 -69
  8. package/demo/index-code.html +0 -61
  9. package/demo/index-color-gradient.html +0 -35
  10. package/demo/index-color-stops.html +0 -62
  11. package/demo/index-color.html +0 -35
  12. package/demo/index-crontab.html +0 -37
  13. package/demo/index-file.html +0 -41
  14. package/demo/index-image.html +0 -40
  15. package/demo/index-multiple-colors.html +0 -52
  16. package/demo/index-options.html +0 -43
  17. package/demo/index-partition-keys.html +0 -79
  18. package/demo/index-range.html +0 -40
  19. package/demo/index-select.html +0 -136
  20. package/demo/index-stack.html +0 -33
  21. package/demo/index-table.html +0 -50
  22. package/demo/index-value-map.html +0 -80
  23. package/demo/index-value-ranges.html +0 -80
  24. package/demo/index-work-shift.html +0 -59
  25. package/demo/index.html +0 -54
package/demo/index-options.html DELETED
@@ -1,43 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- </head>
11
- <body>
12
- <form id="demo"></form>
13
-
14
- <script type="module">
15
- import { html, render } from 'lit'
16
- import '../dist/src/ox-input-options.js'
17
-
18
- const form = document.querySelector('#demo')
19
-
20
- const value = [{ text: 'SHOOSE', value: 'Shoose' }]
21
-
22
- const sort = () => {
23
- const input = document.querySelector('ox-input-options')
24
- input.sort()
25
- }
26
-
27
- render(
28
- html`
29
- <ox-input-options
30
- name="options"
31
- .value=${value}
32
- @change=${e => {
33
- console.log(e.target.value)
34
- console.log('form value', new FormData(form).get('options'))
35
- }}
36
- ></ox-input-options>
37
- <input type="button" value="Sort" @click=${e => sort()} />
38
- `,
39
- form
40
- )
41
- </script>
42
- </body>
43
- </html>
package/demo/index-partition-keys.html DELETED
@@ -1,79 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <link href="/themes/app-theme.css" rel="stylesheet" />
6
- <link
7
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
8
- rel="stylesheet"
9
- />
10
- <link
11
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
12
- rel="stylesheet"
13
- />
14
- <link
15
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
16
- rel="stylesheet"
17
- />
18
- </head>
19
- <body>
20
- <form id="demo"></form>
21
-
22
- <script type="module">
23
- import { html, render } from 'lit'
24
- import '../dist/src/ox-input-partition-keys.js'
25
-
26
- const form = document.querySelector('#demo')
27
-
28
- const value1 = {
29
- A: 'A',
30
- B: 'B',
31
- C: 'C'
32
- }
33
-
34
- const value2 = {
35
- A: true,
36
- B: false,
37
- C: true
38
- }
39
-
40
- const value3 = {
41
- A: 'red',
42
- B: 'yellow',
43
- C: 'blue'
44
- }
45
-
46
- render(
47
- html`
48
- <ox-input-partition-keys
49
- name="partition-keys1"
50
- .value=${value1}
51
- @change=${e => {
52
- console.log(e.target.value)
53
- console.log('form value', new FormData(form).get('partition-keys1'))
54
- }}
55
- ></ox-input-partition-keys>
56
-
57
- <ox-input-partition-keys
58
- name="partition-keys2"
59
- .value=${value2}
60
- @change=${e => {
61
- console.log(e.target.value)
62
- console.log('form value', new FormData(form).get('partition-keys2'))
63
- }}
64
- ></ox-input-partition-keys>
65
-
66
- <ox-input-partition-keys
67
- name="partition-keys3"
68
- .value=${value3}
69
- @change=${e => {
70
- console.log(e.target.value)
71
- console.log('form value', new FormData(form).get('partition-keys3'))
72
- }}
73
- ></ox-input-partition-keys>
74
- `,
75
- form
76
- )
77
- </script>
78
- </body>
79
- </html>
package/demo/index-range.html DELETED
@@ -1,40 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- </head>
11
- <body>
12
- <form id="demo"></form>
13
-
14
- <script type="module">
15
- import { html, render } from 'lit'
16
- import '../dist/src/ox-input-range.js'
17
-
18
- const form = document.querySelector('#demo')
19
- const placeholder = 'enter a range in degree'
20
-
21
- render(
22
- html`
23
- <ox-input-range
24
- value="1"
25
- name="range"
26
- step="10"
27
- min="-300"
28
- max="300"
29
- placeholder=${placeholder}
30
- @change=${e => {
31
- console.log(e.target.value)
32
- console.log('form value', new FormData(form).get('range'))
33
- }}
34
- ></ox-input-range>
35
- `,
36
- form
37
- )
38
- </script>
39
- </body>
40
- </html>
package/demo/index-select.html DELETED
@@ -1,136 +0,0 @@
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
37
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
38
- rel="stylesheet"
39
- />
40
- <link
41
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
42
- rel="stylesheet"
43
- />
44
- <link
45
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
46
- rel="stylesheet"
47
- />
48
- </head>
49
- <body>
50
- <form id="demo"></form>
51
-
52
- <script type="module">
53
- import { html, render } from 'lit'
54
- import '../dist/src/ox-select.js'
55
- import '../dist/src/ox-checkbox.js'
56
-
57
- const form = document.querySelector('#demo')
58
-
59
- function onchanged(e) {
60
- const target = e.target
61
- console.log(target, target.name, e.detail)
62
-
63
- const formData = new FormData(form)
64
- for (var pair of formData.entries()) {
65
- console.log(pair[0] + ', ' + pair[1])
66
- }
67
- }
68
-
69
- render(
70
- html`
71
- <ox-select name="single" @change=${onchanged} placeholder="single select" .value=${'C'}>
72
- <ox-popup-list align-left nowrap>
73
- <div option value="A">LABEL-A</div>
74
- <div option value="B">LABEL-B</div>
75
- <div option value="C">LABEL-C</div>
76
- <div option value="TOO LONG VALUE">LABEL-TOO LONG VALUE</div>
77
- </ox-popup-list>
78
- </ox-select>
79
-
80
- <ox-select name="multiple" @change=${onchanged} placeholder="multiple select" .value=${[
81
- 'B',
82
- 'TOO LONG VALUE'
83
- ]}>
84
- <ox-popup-list multiple with-search>
85
- <div option value="A">A</div>
86
- <div option value="B">B</div>
87
- <div option value="C">C</div>
88
- <div option value="TOO LONG VALUE" />TOO LONG VALUE</div>
89
- </ox-popup-list>
90
- </ox-select>
91
-
92
- <ox-select name="multiple with checkbox" @change=${onchanged} placeholder="multiple with checkbox" .value=${[
93
- 'B',
94
- 'C',
95
- 'F'
96
- ]}>
97
- <ox-popup-list attr-selected="checked" multiple with-search>
98
- <ox-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</ox-checkbox>
103
- <ox-checkbox option value="A">LABEL-A</ox-checkbox>
104
- <ox-checkbox option value="B">LABEL-B</ox-checkbox>
105
- <ox-checkbox option value="C" checked>LABEL-C</ox-checkbox>
106
- <ox-checkbox option value="D">LABEL-D</ox-checkbox>
107
- <ox-checkbox option value="E">LABEL-E</ox-checkbox>
108
- <ox-checkbox option value="F">LABEL-F</ox-checkbox>
109
- <ox-checkbox option value="G">LABEL-G</ox-checkbox>
110
- <ox-checkbox option value="TOO LONG VALUE">TOO LONG VALUE</ox-checkbox>
111
- </ox-popup-list>
112
- </ox-select>
113
-
114
- <ox-select name="multiple with input" @change=${onchanged} placeholder="multiple with checkbox">
115
- <ox-popup-list attr-selected="checked" multiple>
116
- <input type="checkbox" option @change=${e => {
117
- const options = e.target.parentElement.querySelectorAll('[option]')
118
- console.log(options)
119
- options.forEach(option => (option.checked = e.target.checked))
120
- }}>set all
121
- <input type="checkbox" option value="A" />A
122
- <input type="checkbox" option value="B" />B
123
- <input type="checkbox" option value="C" />C
124
- <input type="checkbox" option value="D" />D
125
- <input type="checkbox" option value="E" />E
126
- <input type="checkbox" option value="F" />F
127
- <input type="checkbox" option value="G" />G
128
- <input type="checkbox" option value="TOO LONG VALUE" />TOO LONG VALUE
129
- </ox-popup-list>
130
- </ox-select>
131
- `,
132
- form
133
- )
134
- </script>
135
- </body>
136
- </html>
package/demo/index-stack.html DELETED
@@ -1,33 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- </head>
11
- <body>
12
- <form id="demo"></form>
13
-
14
- <script type="module">
15
- import { html, render } from 'lit'
16
- import '../dist/src/ox-input-stack.js'
17
-
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)
31
- </script>
32
- </body>
33
- </html>
package/demo/index-table.html DELETED
@@ -1,50 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
-
11
- <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
12
-
13
- <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
14
- <link
15
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
16
- rel="stylesheet"
17
- />
18
- <link
19
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
20
- rel="stylesheet"
21
- />
22
- <link
23
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
24
- rel="stylesheet"
25
- />
26
- </head>
27
- <body>
28
- <form id="demo"></form>
29
-
30
- <script type="module">
31
- import { html, render } from 'lit'
32
- import '../dist/src/ox-input-table.js'
33
-
34
- const form = document.querySelector('#demo')
35
-
36
- render(
37
- html`
38
- <ox-input-table
39
- name="table"
40
- @change=${e => {
41
- console.log(e.target.value)
42
- console.log('form value', new FormData(form).get('table'))
43
- }}
44
- ></ox-input-table>
45
- `,
46
- form
47
- )
48
- </script>
49
- </body>
50
- </html>
package/demo/index-value-map.html DELETED
@@ -1,80 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- </head>
11
- <body>
12
- <form id="demo"></form>
13
-
14
- <script type="module">
15
- import { html, render } from 'lit'
16
- import '../dist/src/ox-input-value-map.js'
17
-
18
- const form = document.querySelector('#demo')
19
-
20
- const value1 = {
21
- A: 'A',
22
- B: 'B',
23
- C: 'C',
24
- default: 'B'
25
- }
26
-
27
- const value2 = {
28
- A: true,
29
- B: false,
30
- C: true,
31
- default: true
32
- }
33
-
34
- const value3 = {
35
- A: 'red',
36
- B: 'yellow',
37
- C: 'blue',
38
- default: 'yellow'
39
- }
40
-
41
- render(
42
- html`
43
- <ox-input-value-map
44
- name="value-map1"
45
- valuetype="string"
46
- keytype="string"
47
- .value=${value1}
48
- @change=${e => {
49
- console.log(e.target.value)
50
- console.log('form value', new FormData(form).get('value-map1'))
51
- }}
52
- ></ox-input-value-map>
53
-
54
- <ox-input-value-map
55
- name="value-map2"
56
- valuetype="boolean"
57
- keytype="string"
58
- .value=${value2}
59
- @change=${e => {
60
- console.log(e.target.value)
61
- console.log('form value', new FormData(form).get('value-map2'))
62
- }}
63
- ></ox-input-value-map>
64
-
65
- <ox-input-value-map
66
- name="value-map3"
67
- valuetype="color"
68
- keytype="string"
69
- .value=${value3}
70
- @change=${e => {
71
- console.log(e.target.value)
72
- console.log('form value', new FormData(form).get('value-map3'))
73
- }}
74
- ></ox-input-value-map>
75
- `,
76
- form
77
- )
78
- </script>
79
- </body>
80
- </html>
package/demo/index-value-ranges.html DELETED
@@ -1,80 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- </head>
11
- <body>
12
- <form id="demo"></form>
13
-
14
- <script type="module">
15
- import { html, render } from 'lit'
16
- import '../dist/src/ox-input-value-ranges.js'
17
-
18
- const form = document.querySelector('#demo')
19
-
20
- const value1 = {
21
- '0~20': 'A',
22
- '20~50': 'B',
23
- '50~100': 'C',
24
- default: 'B'
25
- }
26
-
27
- const value2 = {
28
- '0~20': true,
29
- '20~50': false,
30
- '50~100': true,
31
- default: true
32
- }
33
-
34
- const value3 = {
35
- '0~20': 'red',
36
- '20~50': 'yellow',
37
- '50~100': 'blue',
38
- default: 'yellow'
39
- }
40
-
41
- render(
42
- html`
43
- <ox-input-value-ranges
44
- name="value-ranges1"
45
- valuetype="string"
46
- rangetype="number"
47
- .value=${value1}
48
- @change=${e => {
49
- console.log(e.target.value)
50
- console.log('form value', new FormData(form).get('value-ranges1'))
51
- }}
52
- ></ox-input-value-ranges>
53
-
54
- <ox-input-value-ranges
55
- name="value-ranges2"
56
- valuetype="boolean"
57
- rangetype="number"
58
- .value=${value2}
59
- @change=${e => {
60
- console.log(e.target.value)
61
- console.log('form value', new FormData(form).get('value-ranges2'))
62
- }}
63
- ></ox-input-value-ranges>
64
-
65
- <ox-input-value-ranges
66
- name="value-ranges3"
67
- valuetype="color"
68
- rangetype="number"
69
- .value=${value3}
70
- @change=${e => {
71
- console.log(e.target.value)
72
- console.log('form value', new FormData(form).get('value-ranges3'))
73
- }}
74
- ></ox-input-value-ranges>
75
- `,
76
- form
77
- )
78
- </script>
79
- </body>
80
- </html>
package/demo/index-work-shift.html DELETED
@@ -1,59 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- </head>
11
- <body>
12
- <form id="demo"></form>
13
-
14
- <script type="module">
15
- import { html, render } from 'lit'
16
- import '../dist/src/ox-input-work-shift.js'
17
-
18
- const form = document.querySelector('#demo')
19
-
20
- const value = [
21
- {
22
- name: 'DAY',
23
- fromDate: -1,
24
- fromTime: '22:00',
25
- toDate: 0,
26
- toTime: '06:00'
27
- },
28
- {
29
- name: 'SWING',
30
- fromDate: 0,
31
- fromTime: '06:00',
32
- toDate: 0,
33
- toTime: '14:00'
34
- },
35
- {
36
- name: 'NIGHT',
37
- fromDate: 0,
38
- fromTime: '14:00',
39
- toDate: 0,
40
- toTime: '22:00'
41
- }
42
- ]
43
-
44
- render(
45
- html`
46
- <ox-input-work-shift
47
- name="work-shift"
48
- rangetype="number"
49
- .value=${value}
50
- @change=${e => {
51
- console.log(e.target.value)
52
- }}
53
- ></ox-input-work-shift>
54
- `,
55
- form
56
- )
57
- </script>
58
- </body>
59
- </html>
package/demo/index.html DELETED
@@ -1,54 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
6
- <style>
7
- body {
8
- background: #fafafa;
9
- }
10
-
11
- a {
12
- display: block;
13
- }
14
- </style>
15
- <link href="/themes/app-theme.css" rel="stylesheet" />
16
- <link href="/themes/input-theme.css" rel="stylesheet" />
17
- <link
18
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
19
- rel="stylesheet"
20
- />
21
- <link
22
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
23
- rel="stylesheet"
24
- />
25
- <link
26
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
27
- rel="stylesheet"
28
- />
29
- </head>
30
- <body>
31
- <a href="./index-3dish.html">3dish</a>
32
- <a href="./index-options.html">options</a>
33
- <a href="./index-table.html">table</a>
34
- <a href="./index-angle.html">angle</a>
35
- <a href="./index-color.html">color</a>
36
- <a href="./index-multiple-colors.html">multiple-colors</a>
37
- <a href="./index-color-stops.html">color-stops</a>
38
- <a href="./index-color-gradient.html">color-gradient</a>
39
- <a href="./index-barcode.html">barcode</a>
40
- <a href="./index-button-radio.html">button-radio</a>
41
- <a href="./index-checkbox.html">checkbox</a>
42
- <a href="./index-code.html">code</a>
43
- <a href="./index-image.html">image</a>
44
- <a href="./index-file.html">file</a>
45
- <a href="./index-range.html">range</a>
46
- <a href="./index-select.html">select</a>
47
- <a href="./index-stack.html">stack</a>
48
- <a href="./index-value-map.html">value-map</a>
49
- <a href="./index-value-ranges.html">value-ranges</a>
50
- <a href="./index-crontab.html">crontab</a>
51
- <a href="./index-partition-keys.html">partition-keys</a>
52
- <a href="./index-work-shift.html">work-shift</a>
53
- </body>
54
- </html>