@operato/input 7.1.27 → 7.1.32
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 +18 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -7
- package/.editorconfig +0 -29
- package/.storybook/main.js +0 -3
- package/.storybook/preview.js +0 -52
- package/.storybook/server.mjs +0 -8
- 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/src/index.ts +0 -34
- package/src/locale/locale-codes.ts +0 -18
- package/src/locale/locale-picker.ts +0 -43
- package/src/locale/localization.ts +0 -15
- package/src/locales/en.ts +0 -30
- package/src/locales/ko.ts +0 -30
- package/src/locales/ms.ts +0 -30
- package/src/locales/zh.ts +0 -30
- package/src/ox-buttons-radio.ts +0 -140
- package/src/ox-checkbox.ts +0 -181
- package/src/ox-form-field.ts +0 -53
- package/src/ox-input-3axis.ts +0 -77
- package/src/ox-input-3dish.ts +0 -211
- package/src/ox-input-angle.ts +0 -73
- package/src/ox-input-barcode.ts +0 -318
- package/src/ox-input-code.ts +0 -139
- package/src/ox-input-color-gradient.ts +0 -349
- package/src/ox-input-color-stops.ts +0 -525
- package/src/ox-input-color.ts +0 -338
- package/src/ox-input-container.ts +0 -32
- package/src/ox-input-crontab.ts +0 -595
- package/src/ox-input-data.ts +0 -219
- package/src/ox-input-direction.ts +0 -65
- package/src/ox-input-duration.ts +0 -175
- package/src/ox-input-file.ts +0 -209
- package/src/ox-input-hashtags.ts +0 -185
- package/src/ox-input-i18n-label.ts +0 -140
- package/src/ox-input-image.ts +0 -168
- package/src/ox-input-key-values.ts +0 -301
- package/src/ox-input-layout/ox-input-card-layout.ts +0 -58
- package/src/ox-input-layout/ox-input-grid-layout.ts +0 -64
- package/src/ox-input-layout/ox-input-layout.ts +0 -77
- package/src/ox-input-mass-fraction.ts +0 -437
- package/src/ox-input-multiple-colors.ts +0 -135
- package/src/ox-input-options.ts +0 -216
- package/src/ox-input-partition-keys.ts +0 -303
- package/src/ox-input-privilege.ts +0 -163
- package/src/ox-input-quantifier.ts +0 -62
- package/src/ox-input-range.ts +0 -146
- package/src/ox-input-scene-component-id.ts +0 -73
- package/src/ox-input-search.ts +0 -126
- package/src/ox-input-select-buttons.ts +0 -75
- package/src/ox-input-signature.ts +0 -180
- package/src/ox-input-stack.ts +0 -136
- package/src/ox-input-table-column-config.ts +0 -211
- package/src/ox-input-table.ts +0 -404
- package/src/ox-input-textarea.ts +0 -86
- package/src/ox-input-unit-number.ts +0 -354
- package/src/ox-input-value-map.ts +0 -342
- package/src/ox-input-value-ranges.ts +0 -363
- package/src/ox-input-work-shift.ts +0 -290
- package/src/ox-select.ts +0 -219
- package/src/ox-zoomable-image.ts +0 -75
- package/stories/ox-buttons-radio.stories.ts +0 -89
- package/stories/ox-checkbox.stories.ts +0 -111
- package/stories/ox-input-3axis.stories.ts +0 -77
- package/stories/ox-input-3dish.stories.ts +0 -106
- package/stories/ox-input-angle.stories.ts +0 -84
- package/stories/ox-input-barcode.stories.ts +0 -117
- package/stories/ox-input-code.stories.ts +0 -99
- package/stories/ox-input-crontab.stories.ts +0 -82
- package/stories/ox-input-data.stories.ts +0 -82
- package/stories/ox-input-direction.stories.ts +0 -80
- package/stories/ox-input-duration.stories.ts +0 -84
- package/stories/ox-input-file.stories.ts +0 -111
- package/stories/ox-input-hashtags.stories.ts +0 -82
- package/stories/ox-input-i18n-label.stories.ts +0 -103
- package/stories/ox-input-key-values.stories.ts +0 -97
- package/stories/ox-input-mass-fraction.stories.ts +0 -102
- package/stories/ox-input-multiple-colors.stories.ts +0 -72
- package/stories/ox-input-options.stories.ts +0 -80
- package/stories/ox-input-partition-keys.stories.ts +0 -84
- package/stories/ox-input-privilege.stories.ts +0 -108
- package/stories/ox-input-quantifier.stories.ts +0 -80
- package/stories/ox-input-range.stories.ts +0 -89
- package/stories/ox-input-search.stories.ts +0 -91
- package/stories/ox-input-select-buttons.stories.ts +0 -118
- package/stories/ox-input-signature.stories.ts +0 -75
- package/stories/ox-input-table-column-config.stories.ts +0 -109
- package/stories/ox-input-unit.stories.ts +0 -151
- package/stories/ox-input-value-map.stories.ts +0 -92
- package/stories/ox-input-value-ranges.stories.ts +0 -92
- package/stories/ox-input-work-shift.stories.ts +0 -106
- package/stories/ox-select-set-options.stories.ts +0 -208
- package/stories/ox-select.stories.ts +0 -181
- package/tsconfig.json +0 -25
- package/web-dev-server.config.mjs +0 -27
- package/web-test-runner.config.mjs +0 -41
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>
|