@operato/input 8.0.0-beta.1 → 8.0.0-beta.2
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 +9 -0
- package/package.json +7 -7
- package/demo/index-3dish.html +0 -38
- package/demo/index-angle.html +0 -36
- package/demo/index-barcode.html +0 -68
- package/demo/index-button-radio.html +0 -42
- package/demo/index-checkbox.html +0 -69
- package/demo/index-code.html +0 -61
- package/demo/index-color-gradient.html +0 -35
- package/demo/index-color-stops.html +0 -62
- package/demo/index-color.html +0 -35
- package/demo/index-crontab.html +0 -37
- package/demo/index-file.html +0 -41
- package/demo/index-image.html +0 -40
- package/demo/index-multiple-colors.html +0 -52
- package/demo/index-options.html +0 -43
- package/demo/index-partition-keys.html +0 -79
- package/demo/index-range.html +0 -40
- package/demo/index-select.html +0 -136
- package/demo/index-stack.html +0 -33
- package/demo/index-table.html +0 -50
- package/demo/index-value-map.html +0 -80
- package/demo/index-value-ranges.html +0 -80
- package/demo/index-work-shift.html +0 -59
- package/demo/index.html +0 -54
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
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
|
+
## [8.0.0-beta.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
|
|
7
16
|
|
|
8
17
|
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@operato/input",
|
|
3
3
|
"description": "Webcomponents for input following open-wc recommendations",
|
|
4
4
|
"author": "heartyoh@hatiolab.com",
|
|
5
|
-
"version": "8.0.0-beta.
|
|
5
|
+
"version": "8.0.0-beta.2",
|
|
6
6
|
"main": "dist/src/index.js",
|
|
7
7
|
"module": "dist/src/index.js",
|
|
8
8
|
"license": "MIT",
|
|
@@ -218,11 +218,11 @@
|
|
|
218
218
|
"@ctrl/tinycolor": "^4.1.0",
|
|
219
219
|
"@lit/localize": "^0.12.1",
|
|
220
220
|
"@material/web": "^2.0.0",
|
|
221
|
-
"@operato/color-picker": "^8.0.0-beta.
|
|
222
|
-
"@operato/i18n": "^8.0.0-beta.
|
|
223
|
-
"@operato/popup": "^8.0.0-beta.
|
|
224
|
-
"@operato/styles": "^8.0.0-beta.
|
|
225
|
-
"@operato/utils": "^8.0.0-beta.
|
|
221
|
+
"@operato/color-picker": "^8.0.0-beta.2",
|
|
222
|
+
"@operato/i18n": "^8.0.0-beta.2",
|
|
223
|
+
"@operato/popup": "^8.0.0-beta.2",
|
|
224
|
+
"@operato/styles": "^8.0.0-beta.2",
|
|
225
|
+
"@operato/utils": "^8.0.0-beta.2",
|
|
226
226
|
"@polymer/paper-dropdown-menu": "^3.2.0",
|
|
227
227
|
"@polymer/paper-item": "^3.0.1",
|
|
228
228
|
"@thebespokepixel/es-tinycolor": "^3.1.0",
|
|
@@ -266,5 +266,5 @@
|
|
|
266
266
|
"prettier --write"
|
|
267
267
|
]
|
|
268
268
|
},
|
|
269
|
-
"gitHead": "
|
|
269
|
+
"gitHead": "ee1b5124995accb99272d3b5854f3df1d8746dda"
|
|
270
270
|
}
|
package/demo/index-3dish.html
DELETED
|
@@ -1,38 +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-angle.js'
|
|
17
|
-
import '../dist/src/ox-input-3dish.js'
|
|
18
|
-
import '../dist/src/locale/locale-picker.js'
|
|
19
|
-
|
|
20
|
-
const form = document.querySelector('#demo')
|
|
21
|
-
|
|
22
|
-
render(
|
|
23
|
-
html`
|
|
24
|
-
<locale-picker></locale-picker>
|
|
25
|
-
<locale-picker></locale-picker>
|
|
26
|
-
<ox-input-3dish
|
|
27
|
-
name="threedish"
|
|
28
|
-
@change=${e => {
|
|
29
|
-
console.log(e.target.value)
|
|
30
|
-
console.log('form value', new FormData(form).get('threedish'))
|
|
31
|
-
}}
|
|
32
|
-
></ox-input-3dish>
|
|
33
|
-
`,
|
|
34
|
-
form
|
|
35
|
-
)
|
|
36
|
-
</script>
|
|
37
|
-
</body>
|
|
38
|
-
</html>
|
package/demo/index-angle.html
DELETED
|
@@ -1,36 +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-angle.js'
|
|
17
|
-
|
|
18
|
-
const form = document.querySelector('#demo')
|
|
19
|
-
const placeholder = 'enter a angle in degree'
|
|
20
|
-
render(
|
|
21
|
-
html`
|
|
22
|
-
<ox-input-angle
|
|
23
|
-
value="1"
|
|
24
|
-
name="angle"
|
|
25
|
-
placeholder=${placeholder}
|
|
26
|
-
@change=${e => {
|
|
27
|
-
console.log(e.target.value)
|
|
28
|
-
console.log('form value', new FormData(form).get('angle'))
|
|
29
|
-
}}
|
|
30
|
-
></ox-input-angle>
|
|
31
|
-
`,
|
|
32
|
-
form
|
|
33
|
-
)
|
|
34
|
-
</script>
|
|
35
|
-
</body>
|
|
36
|
-
</html>
|
package/demo/index-barcode.html
DELETED
|
@@ -1,68 +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
|
-
.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(--md-sys-color-surface, #fff);
|
|
17
|
-
--ox-checkbox-label-color: var(--md-sys-color-on-primary-container, #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(--md-sys-color-on-primary-container, #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.value)
|
|
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
|
-
}
|
|
57
|
-
|
|
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>
|
|
63
|
-
`,
|
|
64
|
-
form
|
|
65
|
-
)
|
|
66
|
-
</script>
|
|
67
|
-
</body>
|
|
68
|
-
</html>
|
|
@@ -1,42 +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-buttons-radio.js'
|
|
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
|
-
|
|
30
|
-
render(
|
|
31
|
-
html`
|
|
32
|
-
<ox-buttons-radio name="group" @change=${onchange}>
|
|
33
|
-
<div data-value="top">TOP</div>
|
|
34
|
-
<div data-value="middle">MID</div>
|
|
35
|
-
<div data-value="bottom">BOT</div>
|
|
36
|
-
</ox-buttons-radio>
|
|
37
|
-
`,
|
|
38
|
-
form
|
|
39
|
-
)
|
|
40
|
-
</script>
|
|
41
|
-
</body>
|
|
42
|
-
</html>
|
package/demo/index-checkbox.html
DELETED
|
@@ -1,69 +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
|
-
.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(--md-sys-color-surface, #fff);
|
|
17
|
-
--ox-checkbox-label-color: var(--md-sys-color-on-primary-container, #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(--md-sys-color-on-primary-container, #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-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
|
-
}
|
|
55
|
-
|
|
56
|
-
render(
|
|
57
|
-
html`
|
|
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" indeterminatable indeterminate
|
|
61
|
-
>hatiosea - indetarminatable</ox-checkbox
|
|
62
|
-
>
|
|
63
|
-
<ox-checkbox name="check-d" @change=${onchange} class="customized" disabled>ibex</ox-checkbox>
|
|
64
|
-
`,
|
|
65
|
-
form
|
|
66
|
-
)
|
|
67
|
-
</script>
|
|
68
|
-
</body>
|
|
69
|
-
</html>
|
package/demo/index-code.html
DELETED
|
@@ -1,61 +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
|
-
.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(--md-sys-color-surface, #fff);
|
|
17
|
-
--ox-checkbox-label-color: var(--md-sys-color-on-primary-container, #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(--md-sys-color-on-primary-container, #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-code.js'
|
|
44
|
-
const form = document.querySelector('#demo')
|
|
45
|
-
|
|
46
|
-
function onchange(e) {
|
|
47
|
-
const target = e.target
|
|
48
|
-
console.log(target.name, target.value)
|
|
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
|
-
}
|
|
57
|
-
|
|
58
|
-
render(html` <ox-input-code name="input-a" @change=${onchange}></ox-input-code> `, form)
|
|
59
|
-
</script>
|
|
60
|
-
</body>
|
|
61
|
-
</html>
|
|
@@ -1,35 +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
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<form id="demo"></form>
|
|
14
|
-
|
|
15
|
-
<script type="module">
|
|
16
|
-
import { html, render } from 'lit'
|
|
17
|
-
import '../dist/src/ox-input-color-gradient.js'
|
|
18
|
-
|
|
19
|
-
const form = document.querySelector('#demo')
|
|
20
|
-
render(
|
|
21
|
-
html`
|
|
22
|
-
<ox-input-color-gradient
|
|
23
|
-
name="color-gradient-solid"
|
|
24
|
-
type="solid"
|
|
25
|
-
@change=${e => {
|
|
26
|
-
console.log(e.target.value)
|
|
27
|
-
console.log('form value', new FormData(form).get('color-gradient-solid'))
|
|
28
|
-
}}
|
|
29
|
-
></ox-input-color-gradient>
|
|
30
|
-
`,
|
|
31
|
-
form
|
|
32
|
-
)
|
|
33
|
-
</script>
|
|
34
|
-
</body>
|
|
35
|
-
</html>
|
|
@@ -1,62 +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
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<form id="demo"></form>
|
|
14
|
-
|
|
15
|
-
<script type="module">
|
|
16
|
-
import { html, render } from 'lit'
|
|
17
|
-
import '../dist/src/ox-input-color-stops.js'
|
|
18
|
-
|
|
19
|
-
const value = [
|
|
20
|
-
{
|
|
21
|
-
position: 0,
|
|
22
|
-
color: 'white'
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
position: 0.5,
|
|
26
|
-
color: 'green'
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
position: 1,
|
|
30
|
-
color: 'white'
|
|
31
|
-
}
|
|
32
|
-
]
|
|
33
|
-
|
|
34
|
-
const form = document.querySelector('#demo')
|
|
35
|
-
render(
|
|
36
|
-
html`
|
|
37
|
-
<ox-input-color-stops
|
|
38
|
-
name="color-stops-solid"
|
|
39
|
-
type="solid"
|
|
40
|
-
min="0"
|
|
41
|
-
max="100"
|
|
42
|
-
@change=${e => {
|
|
43
|
-
console.log(e.target.value)
|
|
44
|
-
console.log('form value', new FormData(form).get('color-stops-solid'))
|
|
45
|
-
}}
|
|
46
|
-
></ox-input-color-stops>
|
|
47
|
-
|
|
48
|
-
<ox-input-color-stops
|
|
49
|
-
name="color-stops-gradient"
|
|
50
|
-
.value=${value}
|
|
51
|
-
type="gradient"
|
|
52
|
-
@change=${e => {
|
|
53
|
-
console.log(e.target.value)
|
|
54
|
-
console.log('form value', new FormData(form).get('color-stops-gradient'))
|
|
55
|
-
}}
|
|
56
|
-
></ox-input-color-stops>
|
|
57
|
-
`,
|
|
58
|
-
form
|
|
59
|
-
)
|
|
60
|
-
</script>
|
|
61
|
-
</body>
|
|
62
|
-
</html>
|
package/demo/index-color.html
DELETED
|
@@ -1,35 +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
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<form id="demo"></form>
|
|
14
|
-
|
|
15
|
-
<script type="module">
|
|
16
|
-
import { html, render } from 'lit'
|
|
17
|
-
import '../dist/src/ox-input-color.js'
|
|
18
|
-
|
|
19
|
-
const form = document.querySelector('#demo')
|
|
20
|
-
render(
|
|
21
|
-
html`
|
|
22
|
-
<ox-input-color
|
|
23
|
-
value="navy"
|
|
24
|
-
name="color"
|
|
25
|
-
@change=${e => {
|
|
26
|
-
console.log(e.target.value)
|
|
27
|
-
console.log('form value', new FormData(form).get('color'))
|
|
28
|
-
}}
|
|
29
|
-
></ox-input-color>
|
|
30
|
-
`,
|
|
31
|
-
form
|
|
32
|
-
)
|
|
33
|
-
</script>
|
|
34
|
-
</body>
|
|
35
|
-
</html>
|
package/demo/index-crontab.html
DELETED
|
@@ -1,37 +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
|
-
<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>
|
package/demo/index-file.html
DELETED
|
@@ -1,41 +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-input-file {
|
|
11
|
-
max-width: 500px;
|
|
12
|
-
max-height: 300px;
|
|
13
|
-
}
|
|
14
|
-
</style>
|
|
15
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" />
|
|
16
|
-
</head>
|
|
17
|
-
<body>
|
|
18
|
-
<form id="demo"></form>
|
|
19
|
-
|
|
20
|
-
<script type="module">
|
|
21
|
-
import { html, render } from 'lit'
|
|
22
|
-
import '../dist/src/ox-input-file.js'
|
|
23
|
-
|
|
24
|
-
const form = document.querySelector('#demo')
|
|
25
|
-
render(
|
|
26
|
-
html`
|
|
27
|
-
<ox-input-file
|
|
28
|
-
.value=${['https://www.hatiolab.com/assets/img/arch-thingsboard.png']}
|
|
29
|
-
name="file"
|
|
30
|
-
multiple
|
|
31
|
-
@change=${e => {
|
|
32
|
-
console.log(e.target.value)
|
|
33
|
-
console.log('form value', new FormData(form).get('file'))
|
|
34
|
-
}}
|
|
35
|
-
></ox-input-file>
|
|
36
|
-
`,
|
|
37
|
-
form
|
|
38
|
-
)
|
|
39
|
-
</script>
|
|
40
|
-
</body>
|
|
41
|
-
</html>
|
package/demo/index-image.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
|
-
|
|
10
|
-
ox-input-image {
|
|
11
|
-
max-width: 500px;
|
|
12
|
-
max-height: 300px;
|
|
13
|
-
}
|
|
14
|
-
</style>
|
|
15
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" />
|
|
16
|
-
</head>
|
|
17
|
-
<body>
|
|
18
|
-
<form id="demo"></form>
|
|
19
|
-
|
|
20
|
-
<script type="module">
|
|
21
|
-
import { html, render } from 'lit'
|
|
22
|
-
import '../dist/src/ox-input-image.js'
|
|
23
|
-
|
|
24
|
-
const form = document.querySelector('#demo')
|
|
25
|
-
render(
|
|
26
|
-
html`
|
|
27
|
-
<ox-input-image
|
|
28
|
-
value="https://www.hatiolab.com/assets/img/arch-thingsboard.png"
|
|
29
|
-
name="image"
|
|
30
|
-
@change=${e => {
|
|
31
|
-
console.log(e.target.value)
|
|
32
|
-
console.log('form value', new FormData(form).get('image'))
|
|
33
|
-
}}
|
|
34
|
-
></ox-input-image>
|
|
35
|
-
`,
|
|
36
|
-
form
|
|
37
|
-
)
|
|
38
|
-
</script>
|
|
39
|
-
</body>
|
|
40
|
-
</html>
|
|
@@ -1,52 +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
|
-
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
11
|
-
<link href="/themes/input-theme.css" rel="stylesheet" />
|
|
12
|
-
<link
|
|
13
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
14
|
-
rel="stylesheet"
|
|
15
|
-
/>
|
|
16
|
-
<link
|
|
17
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
|
18
|
-
rel="stylesheet"
|
|
19
|
-
/>
|
|
20
|
-
<link
|
|
21
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
|
22
|
-
rel="stylesheet"
|
|
23
|
-
/>
|
|
24
|
-
|
|
25
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
|
|
26
|
-
</head>
|
|
27
|
-
<body>
|
|
28
|
-
<form id="demo"></form>
|
|
29
|
-
|
|
30
|
-
<script type="module">
|
|
31
|
-
import { html, css, render } from 'lit'
|
|
32
|
-
import '../dist/src/ox-input-multiple-colors.js'
|
|
33
|
-
|
|
34
|
-
const form = document.querySelector('#demo')
|
|
35
|
-
|
|
36
|
-
const value = ['yello', 'white']
|
|
37
|
-
render(
|
|
38
|
-
html`
|
|
39
|
-
<ox-input-multiple-colors
|
|
40
|
-
name="multiple-colors"
|
|
41
|
-
.value=${value}
|
|
42
|
-
@change=${e => {
|
|
43
|
-
console.log(e.target.value)
|
|
44
|
-
console.log('form value', new FormData(form).get('multiple-colors'))
|
|
45
|
-
}}
|
|
46
|
-
></ox-input-multiple-colors>
|
|
47
|
-
`,
|
|
48
|
-
form
|
|
49
|
-
)
|
|
50
|
-
</script>
|
|
51
|
-
</body>
|
|
52
|
-
</html>
|
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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|