@operato/input 1.0.0-alpha.9 → 1.0.0-beta.10
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 +709 -0
- package/assets/images/icon-properties-line-type.png +0 -0
- package/assets/images/icon-properties-table.png +0 -0
- package/demo/index-crontab.html +37 -0
- package/demo/index-partition-keys.html +71 -0
- package/demo/index-select.html +22 -15
- package/demo/index-table.html +39 -0
- package/demo/index-value-map.html +80 -0
- package/demo/index-value-ranges.html +80 -0
- package/demo/index-work-shift.html +59 -0
- package/demo/index.html +10 -0
- package/dist/src/index.d.ts +9 -3
- package/dist/src/index.js +9 -3
- package/dist/src/index.js.map +1 -1
- package/dist/src/ox-checkbox.d.ts +1 -1
- package/dist/src/ox-checkbox.js +1 -1
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-form-field.d.ts +2 -2
- package/dist/src/ox-form-field.js.map +1 -1
- package/dist/src/ox-input-barcode.d.ts +1 -1
- package/dist/src/ox-input-barcode.js +1 -1
- package/dist/src/ox-input-barcode.js.map +1 -1
- package/dist/src/ox-input-code.d.ts +1 -1
- package/dist/src/ox-input-code.js +12 -7
- package/dist/src/ox-input-code.js.map +1 -1
- package/dist/src/ox-input-color-gradient.d.ts +4 -4
- package/dist/src/ox-input-color-gradient.js +3 -3
- package/dist/src/ox-input-color-gradient.js.map +1 -1
- package/dist/src/ox-input-color-stops.js +1 -1
- package/dist/src/ox-input-color-stops.js.map +1 -1
- package/dist/src/ox-input-crontab.d.ts +23 -0
- package/dist/src/ox-input-crontab.js +560 -0
- package/dist/src/ox-input-crontab.js.map +1 -0
- package/dist/src/ox-input-layout/ox-input-card-layout.d.ts +4 -0
- package/dist/src/ox-input-layout/ox-input-card-layout.js +57 -0
- package/dist/src/ox-input-layout/ox-input-card-layout.js.map +1 -0
- package/dist/src/ox-input-layout/ox-input-grid-layout.d.ts +4 -0
- package/dist/src/ox-input-layout/ox-input-grid-layout.js +63 -0
- package/dist/src/ox-input-layout/ox-input-grid-layout.js.map +1 -0
- package/dist/src/ox-input-layout/ox-input-layout.d.ts +5 -0
- package/dist/src/ox-input-layout/ox-input-layout.js +73 -0
- package/dist/src/ox-input-layout/ox-input-layout.js.map +1 -0
- package/dist/src/ox-input-multiple-colors.d.ts +2 -2
- package/dist/src/ox-input-multiple-colors.js +2 -2
- package/dist/src/ox-input-multiple-colors.js.map +1 -1
- package/dist/src/ox-input-options.js.map +1 -1
- package/dist/src/ox-input-partition-keys.d.ts +36 -0
- package/dist/src/ox-input-partition-keys.js +204 -0
- package/dist/src/ox-input-partition-keys.js.map +1 -0
- package/dist/src/ox-input-search.d.ts +1 -0
- package/dist/src/ox-input-search.js +7 -3
- package/dist/src/ox-input-search.js.map +1 -1
- package/dist/src/ox-input-table.d.ts +8 -0
- package/dist/src/ox-input-table.js +379 -0
- package/dist/src/ox-input-table.js.map +1 -0
- package/dist/src/ox-input-value-map.d.ts +41 -0
- package/dist/src/ox-input-value-map.js +279 -0
- package/dist/src/ox-input-value-map.js.map +1 -0
- package/dist/src/ox-input-value-ranges.d.ts +41 -0
- package/dist/src/ox-input-value-ranges.js +298 -0
- package/dist/src/ox-input-value-ranges.js.map +1 -0
- package/dist/src/ox-input-work-shift.d.ts +33 -0
- package/dist/src/ox-input-work-shift.js +229 -0
- package/dist/src/ox-input-work-shift.js.map +1 -0
- package/dist/src/ox-select.d.ts +3 -0
- package/dist/src/ox-select.js +28 -3
- package/dist/src/ox-select.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +18 -8
- package/src/index.ts +9 -3
- package/src/ox-checkbox.ts +2 -2
- package/src/ox-form-field.ts +2 -2
- package/src/ox-input-barcode.ts +2 -3
- package/src/ox-input-code.ts +14 -8
- package/src/{ox-input-color-gradient.ts.xxx → ox-input-color-gradient.ts} +4 -4
- package/src/ox-input-color-stops.ts +1 -1
- package/src/ox-input-crontab.ts +561 -0
- package/src/ox-input-layout/ox-input-card-layout.ts +58 -0
- package/src/ox-input-layout/ox-input-grid-layout.ts +64 -0
- package/src/ox-input-layout/ox-input-layout.ts +77 -0
- package/src/ox-input-multiple-colors.ts +2 -2
- package/src/ox-input-options.ts +1 -1
- package/src/ox-input-partition-keys.ts +243 -0
- package/src/ox-input-search.ts +9 -3
- package/src/ox-input-table.ts +404 -0
- package/src/{ox-input-keyvalues.ts.ing → ox-input-value-map.ts} +120 -89
- package/src/ox-input-value-ranges.ts +325 -0
- package/src/ox-input-work-shift.ts +251 -0
- package/src/ox-select.ts +31 -5
- package/dist/src/ox-input-background-pattern.d.ts +0 -31
- package/dist/src/ox-input-background-pattern.js +0 -147
- package/dist/src/ox-input-background-pattern.js.map +0 -1
- package/dist/src/ox-input-fill-style.d.ts +0 -42
- package/dist/src/ox-input-fill-style.js +0 -323
- package/dist/src/ox-input-fill-style.js.map +0 -1
- package/dist/src/ox-input-id.d.ts +0 -11
- package/dist/src/ox-input-id.js +0 -68
- package/dist/src/ox-input-id.js.map +0 -1
- package/src/ox-input-background-pattern.ts.xxx +0 -163
- package/src/ox-input-fill-style.ts.xxx +0 -361
- package/src/ox-input-ranges.ts.ing +0 -292
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,37 @@
|
|
|
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
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
|
|
11
|
+
<script src="https://unpkg.com/cronstrue@latest/dist/cronstrue.min.js" async></script>
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<form id="demo"></form>
|
|
15
|
+
|
|
16
|
+
<script type="module">
|
|
17
|
+
import { html, render } from 'lit'
|
|
18
|
+
import '../dist/src/ox-input-crontab.js'
|
|
19
|
+
|
|
20
|
+
const form = document.querySelector('#demo')
|
|
21
|
+
|
|
22
|
+
render(
|
|
23
|
+
html`
|
|
24
|
+
<ox-input-crontab
|
|
25
|
+
value="* * * * * *"
|
|
26
|
+
name="crontab"
|
|
27
|
+
@change=${e => {
|
|
28
|
+
console.log(e.target.value)
|
|
29
|
+
console.log('form value', new FormData(form).get('crontab'))
|
|
30
|
+
}}
|
|
31
|
+
></ox-input-crontab>
|
|
32
|
+
`,
|
|
33
|
+
form
|
|
34
|
+
)
|
|
35
|
+
</script>
|
|
36
|
+
</body>
|
|
37
|
+
</html>
|
|
@@ -0,0 +1,71 @@
|
|
|
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-partition-keys.js'
|
|
17
|
+
|
|
18
|
+
const form = document.querySelector('#demo')
|
|
19
|
+
|
|
20
|
+
const value1 = {
|
|
21
|
+
A: 'A',
|
|
22
|
+
B: 'B',
|
|
23
|
+
C: 'C'
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const value2 = {
|
|
27
|
+
A: true,
|
|
28
|
+
B: false,
|
|
29
|
+
C: true
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
const value3 = {
|
|
33
|
+
A: 'red',
|
|
34
|
+
B: 'yellow',
|
|
35
|
+
C: 'blue'
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
render(
|
|
39
|
+
html`
|
|
40
|
+
<ox-input-partition-keys
|
|
41
|
+
name="partition-keys1"
|
|
42
|
+
.value=${value1}
|
|
43
|
+
@change=${e => {
|
|
44
|
+
console.log(e.target.value)
|
|
45
|
+
console.log('form value', new FormData(form).get('partition-keys1'))
|
|
46
|
+
}}
|
|
47
|
+
></ox-input-partition-keys>
|
|
48
|
+
|
|
49
|
+
<ox-input-partition-keys
|
|
50
|
+
name="partition-keys2"
|
|
51
|
+
.value=${value2}
|
|
52
|
+
@change=${e => {
|
|
53
|
+
console.log(e.target.value)
|
|
54
|
+
console.log('form value', new FormData(form).get('partition-keys2'))
|
|
55
|
+
}}
|
|
56
|
+
></ox-input-partition-keys>
|
|
57
|
+
|
|
58
|
+
<ox-input-partition-keys
|
|
59
|
+
name="partition-keys3"
|
|
60
|
+
.value=${value3}
|
|
61
|
+
@change=${e => {
|
|
62
|
+
console.log(e.target.value)
|
|
63
|
+
console.log('form value', new FormData(form).get('partition-keys3'))
|
|
64
|
+
}}
|
|
65
|
+
></ox-input-partition-keys>
|
|
66
|
+
`,
|
|
67
|
+
form
|
|
68
|
+
)
|
|
69
|
+
</script>
|
|
70
|
+
</body>
|
|
71
|
+
</html>
|
package/demo/index-select.html
CHANGED
|
@@ -57,17 +57,20 @@
|
|
|
57
57
|
|
|
58
58
|
render(
|
|
59
59
|
html`
|
|
60
|
-
<ox-select name="single" @change=${onchanged} placeholder="single select">
|
|
60
|
+
<ox-select name="single" @change=${onchanged} placeholder="single select" .value=${'C'}>
|
|
61
61
|
<ox-popup-list align-left nowrap>
|
|
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>
|
|
62
|
+
<div option value="A">LABEL-A</div>
|
|
63
|
+
<div option value="B">LABEL-B</div>
|
|
64
|
+
<div option value="C">LABEL-C</div>
|
|
65
|
+
<div option value="TOO LONG VALUE">LABEL-TOO LONG VALUE</div>
|
|
66
66
|
</ox-popup-list>
|
|
67
67
|
</ox-select>
|
|
68
68
|
|
|
69
|
-
<ox-select name="multiple" @change=${onchanged} placeholder="multiple select"
|
|
70
|
-
|
|
69
|
+
<ox-select name="multiple" @change=${onchanged} placeholder="multiple select" .value=${[
|
|
70
|
+
'B',
|
|
71
|
+
'TOO LONG VALUE'
|
|
72
|
+
]}>
|
|
73
|
+
<ox-popup-list multiple with-search>
|
|
71
74
|
<div option value="A">A</div>
|
|
72
75
|
<div option value="B">B</div>
|
|
73
76
|
<div option value="C">C</div>
|
|
@@ -75,20 +78,24 @@
|
|
|
75
78
|
</ox-popup-list>
|
|
76
79
|
</ox-select>
|
|
77
80
|
|
|
78
|
-
<ox-select name="multiple with checkbox" @change=${onchanged} placeholder="multiple with checkbox"
|
|
81
|
+
<ox-select name="multiple with checkbox" @change=${onchanged} placeholder="multiple with checkbox" .value=${[
|
|
82
|
+
'B',
|
|
83
|
+
'C',
|
|
84
|
+
'F'
|
|
85
|
+
]}>
|
|
79
86
|
<ox-popup-list attr-selected="checked" multiple with-search>
|
|
80
87
|
<ox-checkbox option @change=${e => {
|
|
81
88
|
const options = e.target.parentElement.querySelectorAll('[option]')
|
|
82
89
|
console.log(options)
|
|
83
90
|
options.forEach(option => (option.checked = e.target.checked))
|
|
84
91
|
}}>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
|
|
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="A">LABEL-A</ox-checkbox>
|
|
93
|
+
<ox-checkbox option value="B">LABEL-B</ox-checkbox>
|
|
94
|
+
<ox-checkbox option value="C" checked>LABEL-C</ox-checkbox>
|
|
95
|
+
<ox-checkbox option value="D">LABEL-D</ox-checkbox>
|
|
96
|
+
<ox-checkbox option value="E">LABEL-E</ox-checkbox>
|
|
97
|
+
<ox-checkbox option value="F">LABEL-F</ox-checkbox>
|
|
98
|
+
<ox-checkbox option value="G">LABEL-G</ox-checkbox>
|
|
92
99
|
<ox-checkbox option value="TOO LONG VALUE">TOO LONG VALUE</ox-checkbox>
|
|
93
100
|
</ox-popup-list>
|
|
94
101
|
</ox-select>
|
|
@@ -0,0 +1,39 @@
|
|
|
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 href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<form id="demo"></form>
|
|
18
|
+
|
|
19
|
+
<script type="module">
|
|
20
|
+
import { html, render } from 'lit'
|
|
21
|
+
import '../dist/src/ox-input-table.js'
|
|
22
|
+
|
|
23
|
+
const form = document.querySelector('#demo')
|
|
24
|
+
|
|
25
|
+
render(
|
|
26
|
+
html`
|
|
27
|
+
<ox-input-table
|
|
28
|
+
name="table"
|
|
29
|
+
@change=${e => {
|
|
30
|
+
console.log(e.target.value)
|
|
31
|
+
console.log('form value', new FormData(form).get('table'))
|
|
32
|
+
}}
|
|
33
|
+
></ox-input-table>
|
|
34
|
+
`,
|
|
35
|
+
form
|
|
36
|
+
)
|
|
37
|
+
</script>
|
|
38
|
+
</body>
|
|
39
|
+
</html>
|
|
@@ -0,0 +1,80 @@
|
|
|
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>
|
|
@@ -0,0 +1,80 @@
|
|
|
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>
|
|
@@ -0,0 +1,59 @@
|
|
|
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
CHANGED
|
@@ -6,11 +6,16 @@
|
|
|
6
6
|
body {
|
|
7
7
|
background: #fafafa;
|
|
8
8
|
}
|
|
9
|
+
|
|
10
|
+
a {
|
|
11
|
+
display: block;
|
|
12
|
+
}
|
|
9
13
|
</style>
|
|
10
14
|
</head>
|
|
11
15
|
<body>
|
|
12
16
|
<a href="./index-3dish.html">3dish</a>
|
|
13
17
|
<a href="./index-options.html">options</a>
|
|
18
|
+
<a href="./index-table.html">table</a>
|
|
14
19
|
<a href="./index-angle.html">angle</a>
|
|
15
20
|
<a href="./index-color.html">color</a>
|
|
16
21
|
<a href="./index-multiple-colors.html">multiple-colors</a>
|
|
@@ -25,5 +30,10 @@
|
|
|
25
30
|
<a href="./index-range.html">range</a>
|
|
26
31
|
<a href="./index-select.html">select</a>
|
|
27
32
|
<a href="./index-stack.html">stack</a>
|
|
33
|
+
<a href="./index-value-map.html">value-map</a>
|
|
34
|
+
<a href="./index-value-ranges.html">value-ranges</a>
|
|
35
|
+
<a href="./index-crontab.html">crontab</a>
|
|
36
|
+
<a href="./index-partition-keys.html">partition-keys</a>
|
|
37
|
+
<a href="./index-work-shift.html">work-shift</a>
|
|
28
38
|
</body>
|
|
29
39
|
</html>
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,15 +1,21 @@
|
|
|
1
1
|
export * from './ox-form-field.js';
|
|
2
|
+
export * from './ox-buttons-radio.js';
|
|
3
|
+
export * from './ox-checkbox.js';
|
|
4
|
+
export * from './ox-select.js';
|
|
2
5
|
export * from './ox-input-angle.js';
|
|
3
6
|
export * from './ox-input-3dish.js';
|
|
4
7
|
export * from './ox-input-stack.js';
|
|
5
8
|
export * from './ox-input-barcode.js';
|
|
6
|
-
export * from './ox-buttons-radio.js';
|
|
7
|
-
export * from './ox-checkbox.js';
|
|
8
|
-
export * from './ox-select.js';
|
|
9
9
|
export * from './ox-input-code.js';
|
|
10
10
|
export * from './ox-input-color.js';
|
|
11
11
|
export * from './ox-input-multiple-colors.js';
|
|
12
12
|
export * from './ox-input-color-stops.js';
|
|
13
|
+
export * from './ox-input-color-gradient.js';
|
|
13
14
|
export * from './ox-input-file.js';
|
|
14
15
|
export * from './ox-input-image.js';
|
|
16
|
+
export * from './ox-input-value-ranges.js';
|
|
17
|
+
export * from './ox-input-value-map.js';
|
|
18
|
+
export * from './ox-input-table.js';
|
|
15
19
|
export * from './ox-input-scene-component-id.js';
|
|
20
|
+
export * from './ox-input-crontab';
|
|
21
|
+
export * from './ox-input-partition-keys';
|
package/dist/src/index.js
CHANGED
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
export * from './ox-form-field.js';
|
|
2
|
+
export * from './ox-buttons-radio.js';
|
|
3
|
+
export * from './ox-checkbox.js';
|
|
4
|
+
export * from './ox-select.js';
|
|
2
5
|
export * from './ox-input-angle.js';
|
|
3
6
|
export * from './ox-input-3dish.js';
|
|
4
7
|
export * from './ox-input-stack.js';
|
|
5
8
|
export * from './ox-input-barcode.js';
|
|
6
|
-
export * from './ox-buttons-radio.js';
|
|
7
|
-
export * from './ox-checkbox.js';
|
|
8
|
-
export * from './ox-select.js';
|
|
9
9
|
export * from './ox-input-code.js';
|
|
10
10
|
export * from './ox-input-color.js';
|
|
11
11
|
export * from './ox-input-multiple-colors.js';
|
|
12
12
|
export * from './ox-input-color-stops.js';
|
|
13
|
+
export * from './ox-input-color-gradient.js';
|
|
13
14
|
export * from './ox-input-file.js';
|
|
14
15
|
export * from './ox-input-image.js';
|
|
16
|
+
export * from './ox-input-value-ranges.js';
|
|
17
|
+
export * from './ox-input-value-map.js';
|
|
18
|
+
export * from './ox-input-table.js';
|
|
15
19
|
export * from './ox-input-scene-component-id.js';
|
|
20
|
+
export * from './ox-input-crontab';
|
|
21
|
+
export * from './ox-input-partition-keys';
|
|
16
22
|
//# sourceMappingURL=index.js.map
|
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA","sourcesContent":["export * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab'\nexport * from './ox-input-partition-keys'\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { OxFormField } from './ox-form-field';
|
|
2
2
|
export declare class OxCheckbox extends OxFormField {
|
|
3
3
|
static styles: import("lit").CSSResult[];
|
|
4
|
-
checked: boolean;
|
|
4
|
+
checked: boolean | undefined;
|
|
5
5
|
disabled: boolean;
|
|
6
6
|
indeterminatable: boolean;
|
|
7
7
|
indeterminate: boolean;
|
package/dist/src/ox-checkbox.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"AAAA;;EAEE;;AAEF,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,WAAW;IAA3C;;QA+DoE,YAAO,
|
|
1
|
+
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n }\n\n div {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n [disabled] {\n opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n cursor: auto;\n }\n\n [checkbox] {\n display: flex;\n border-radius: var(--ox-checkbox-border-radius, 4px);\n border: var(--ox-checkbox-border, 1px solid rgba(0, 0, 0, 0.3));\n background-color: var(--ox-checkbox-background-color, #fff);\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n align-items: center;\n justify-content: center;\n }\n\n a {\n background-color: var(--ox-checkbox-unchecked-background-color, #fff);\n border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));\n }\n\n :host([checked]) a {\n background-color: var(--ox-checkbox-checked-background-color, #fff);\n border: var(--ox-checkbox-checked-border, 1px solid #38a25b);\n }\n\n path {\n fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));\n }\n\n :host([checked]) path {\n fill: var(--ox-checkbox-checked-color, #38a25b);\n }\n\n svg {\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n }\n\n [label] {\n margin: var(--ox-checkbox-label-margin, 0 0 0 7px);\n color: var(--ox-checkbox-label-color, #3a5877);\n }\n\n :host([checked]) [label] {\n font-weight: var(--ox-checkbox-checked-font-weight, bold);\n }\n `\n ]\n\n @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false\n @property({ type: Boolean }) disabled: boolean = false\n @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n\n @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n render() {\n return html`\n <div @click=${this.onClick} ?disabled=${this.disabled}>\n <a href=\"#\" @click=${(e: Event) => e.preventDefault()} checkbox>\n ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n </a>\n ${this._hasInner\n ? html` <span label>\n <slot></slot>\n </span>`\n : ''}\n </div>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n this.addEventListener('keydown', this.onKeyDown.bind(this))\n }\n\n onClick() {\n if (this.disabled) {\n return\n }\n\n if (!this.indeterminatable) {\n this.indeterminate = false\n this.checked = !this.checked\n } else {\n if (this.indeterminate) {\n this.indeterminate = false\n this.checked = true\n } else if (this.checked) {\n this.indeterminate = false\n this.checked = false\n } else {\n this.indeterminate = true\n this.checked = undefined\n }\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.checked\n })\n )\n }\n\n get checkedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get uncheckedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get indeterminateIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke=\"rgba(0, 0, 0, 0.7)\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n `\n }\n\n onKeyDown(e: KeyboardEvent) {\n e.preventDefault()\n\n if (e.key === ' ' || e.key == 'Spacebar') {\n this.onClick()\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n }\n}\n"]}
|
|
@@ -2,8 +2,8 @@ import { LitElement } from 'lit';
|
|
|
2
2
|
export declare abstract class OxFormField extends LitElement {
|
|
3
3
|
name?: string;
|
|
4
4
|
value?: any;
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
protected _form: HTMLFormElement | null;
|
|
6
|
+
protected _formdataEventHandler: EventListener | null;
|
|
7
7
|
connectedCallback(): void;
|
|
8
8
|
disconnectedCallback(): void;
|
|
9
9
|
protected appendFormData({ formData }: FormDataEvent): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-form-field.js","sourceRoot":"","sources":["../../src/ox-form-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;
|
|
1
|
+
{"version":3,"file":"ox-form-field.js","sourceRoot":"","sources":["../../src/ox-form-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAIY,UAAK,GAA2B,IAAI,CAAA;QACpC,0BAAqB,GAAyB,IAAI,CAAA;IAuC9D,CAAC;IArCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;YACjC,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;gBAC5E,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAA;aACpE;SACF;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAsB,CAAC,CAAA;YACvE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YACjB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAA;SAClC;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAA;QACvB,IAAI,CAAC,CAAC,MAAM,YAAY,KAAK,CAAC,EAAE;YAC9B,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;SACtB;QAED,MAAM,CAAC,OAAO,CAAC,CAAC,KAAU,EAAE,EAAE;YAC5B,QAAQ,CAAC,MAAM,CACb,IAAI,CAAC,IAAK,EACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CACvG,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AA3C8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;yCAAc;AAC9C;IAAX,QAAQ,EAAE;0CAAY","sourcesContent":["import { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nexport abstract class OxFormField extends LitElement {\n @property({ type: String, attribute: true }) name?: string\n @property() value?: any\n\n protected _form: HTMLFormElement | null = null\n protected _formdataEventHandler: EventListener | null = null\n\n override connectedCallback(): void {\n super.connectedCallback()\n\n if (this.name) {\n this._form = this.closest('form')\n if (this._form) {\n this._formdataEventHandler = this.appendFormData.bind(this) as EventListener\n this._form.addEventListener('formdata', this._formdataEventHandler)\n }\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n\n if (this._form) {\n this._form.removeEventListener('formdata', this._formdataEventHandler!)\n this._form = null\n this._formdataEventHandler = null\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n if (!this.name) return\n\n var values = this.value\n if (!(values instanceof Array)) {\n values = [this.value]\n }\n\n values.forEach((value: any) => {\n formData.append(\n this.name!,\n typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n )\n })\n }\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '@operato/popup/ox-popup.js';
|
|
2
|
-
import { OxPopup } from '@operato/popup';
|
|
3
2
|
import { BrowserMultiFormatReader } from '@zxing/library';
|
|
4
3
|
import { OxFormField } from './ox-form-field.js';
|
|
4
|
+
import { OxPopup } from '@operato/popup';
|
|
5
5
|
export declare class OxInputBarcode extends OxFormField {
|
|
6
6
|
static styles: import("lit").CSSResult[];
|
|
7
7
|
scannable?: boolean;
|
|
@@ -144,7 +144,7 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
|
|
|
144
144
|
input.focus();
|
|
145
145
|
this.value = input.value = String(result);
|
|
146
146
|
if (!this.withoutEnter) {
|
|
147
|
-
input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d }));
|
|
147
|
+
input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d, key: 'Enter' }));
|
|
148
148
|
input.dispatchEvent(new CustomEvent('change', {
|
|
149
149
|
bubbles: true,
|
|
150
150
|
composed: true,
|