@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.
- package/CHANGELOG.md +17 -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,23 @@
|
|
|
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.5](https://github.com/hatiolab/operato/compare/v8.0.0-beta.4...v8.0.0-beta.5) (2025-01-10)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/input
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [8.0.0-beta.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### :bug: Bug Fix
|
|
18
|
+
|
|
19
|
+
* typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
6
23
|
## [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
24
|
|
|
8
25
|
|
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.5",
|
|
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.5",
|
|
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": "7c70814f95cd4f22508b513575984ceca6eb1bff"
|
|
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>
|