@operato/input 1.0.0-alpha.3 → 1.0.0-alpha.30
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 +235 -0
- package/README.md +9 -6
- package/assets/images/icon-editor-gradient-direction.png +0 -0
- package/assets/images/icon-properties-label.png +0 -0
- package/assets/images/icon-properties-line-type.png +0 -0
- package/assets/images/icon-properties-table.png +0 -0
- package/demo/index-color-gradient.html +35 -0
- package/demo/index-color-stops.html +62 -0
- package/demo/index-color.html +35 -0
- package/demo/index-crontab.html +36 -0
- package/demo/index-file.html +41 -0
- package/demo/index-image.html +1 -1
- package/demo/index-multiple-colors.html +37 -0
- package/demo/index-options.html +43 -0
- package/demo/index-partition-keys.html +71 -0
- package/demo/index-range.html +40 -0
- package/demo/index-table.html +39 -0
- package/demo/index-value-map.html +80 -0
- package/demo/index-value-ranges.html +80 -0
- package/demo/index.html +23 -54
- package/dist/src/index.d.ts +21 -11
- package/dist/src/index.js +21 -11
- package/dist/src/index.js.map +1 -1
- package/dist/src/ox-checkbox.js +1 -1
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-input-code.d.ts +4 -4
- package/dist/src/ox-input-code.js +8 -8
- package/dist/src/ox-input-code.js.map +1 -1
- package/dist/src/ox-input-color-gradient.d.ts +26 -0
- package/dist/src/ox-input-color-gradient.js +318 -0
- package/dist/src/ox-input-color-gradient.js.map +1 -0
- package/dist/src/ox-input-color-stops.d.ts +71 -0
- package/dist/src/ox-input-color-stops.js +445 -0
- package/dist/src/ox-input-color-stops.js.map +1 -0
- package/dist/src/ox-input-color.d.ts +176 -0
- package/dist/src/ox-input-color.js +298 -0
- package/dist/src/ox-input-color.js.map +1 -0
- package/dist/src/ox-input-crontab.d.ts +23 -0
- package/dist/src/ox-input-crontab.js +560 -0
- package/dist/src/ox-input-crontab.js.map +1 -0
- package/dist/src/ox-input-data.d.ts +2 -2
- package/dist/src/ox-input-data.js +2 -2
- package/dist/src/ox-input-data.js.map +1 -1
- package/dist/src/ox-input-file.d.ts +2 -0
- package/dist/src/ox-input-file.js +6 -1
- package/dist/src/ox-input-file.js.map +1 -1
- package/dist/src/ox-input-layout/ox-input-card-layout.d.ts +4 -0
- package/dist/src/ox-input-layout/ox-input-card-layout.js +57 -0
- package/dist/src/ox-input-layout/ox-input-card-layout.js.map +1 -0
- package/dist/src/ox-input-layout/ox-input-grid-layout.d.ts +4 -0
- package/dist/src/ox-input-layout/ox-input-grid-layout.js +63 -0
- package/dist/src/ox-input-layout/ox-input-grid-layout.js.map +1 -0
- package/dist/src/ox-input-layout/ox-input-layout.d.ts +5 -0
- package/dist/src/ox-input-layout/ox-input-layout.js +73 -0
- package/dist/src/ox-input-layout/ox-input-layout.js.map +1 -0
- package/dist/src/ox-input-multiple-colors.d.ts +28 -0
- package/dist/src/ox-input-multiple-colors.js +113 -0
- package/dist/src/ox-input-multiple-colors.js.map +1 -0
- package/dist/src/ox-input-options.d.ts +22 -0
- package/dist/src/ox-input-options.js +137 -0
- package/dist/src/ox-input-options.js.map +1 -0
- package/dist/src/ox-input-partition-keys.d.ts +36 -0
- package/dist/src/ox-input-partition-keys.js +202 -0
- package/dist/src/ox-input-partition-keys.js.map +1 -0
- package/dist/src/ox-input-range.d.ts +4 -0
- package/dist/src/ox-input-range.js +161 -0
- package/dist/src/ox-input-range.js.map +1 -0
- package/dist/src/{ox-input-id.d.ts → ox-input-scene-component-id.d.ts} +0 -0
- package/dist/src/{ox-input-id.js → ox-input-scene-component-id.js} +2 -2
- package/dist/src/ox-input-scene-component-id.js.map +1 -0
- package/dist/src/ox-input-stack.d.ts +1 -1
- package/dist/src/ox-input-stack.js +1 -1
- package/dist/src/ox-input-stack.js.map +1 -1
- package/dist/src/ox-input-table.d.ts +8 -0
- package/dist/src/ox-input-table.js +379 -0
- package/dist/src/ox-input-table.js.map +1 -0
- package/dist/src/ox-input-value-map.d.ts +41 -0
- package/dist/src/ox-input-value-map.js +279 -0
- package/dist/src/ox-input-value-map.js.map +1 -0
- package/dist/src/ox-input-value-ranges.d.ts +41 -0
- package/dist/src/ox-input-value-ranges.js +298 -0
- package/dist/src/ox-input-value-ranges.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +25 -7
- package/src/index.ts +21 -11
- package/src/ox-checkbox.ts +1 -1
- package/src/ox-input-code.ts +9 -10
- package/src/ox-input-color-gradient.ts +343 -0
- package/src/ox-input-color-stops.ts +499 -0
- package/src/ox-input-color.ts +323 -0
- package/src/ox-input-crontab.ts +560 -0
- package/src/ox-input-data.ts +5 -5
- package/src/ox-input-file.ts +8 -3
- package/src/ox-input-layout/ox-input-card-layout.ts +58 -0
- package/src/ox-input-layout/ox-input-grid-layout.ts +64 -0
- package/src/ox-input-layout/ox-input-layout.ts +77 -0
- package/src/ox-input-multiple-colors.ts +113 -0
- package/src/ox-input-options.ts +165 -0
- package/src/ox-input-partition-keys.ts +240 -0
- package/src/ox-input-range.ts +147 -0
- package/src/{ox-input-id.ts → ox-input-scene-component-id.ts} +1 -1
- package/src/ox-input-stack.ts +1 -1
- package/src/ox-input-table.ts +404 -0
- package/src/{ox-input-keyvalues.ts.ing → ox-input-value-map.ts} +125 -94
- package/src/ox-input-value-ranges.ts +325 -0
- package/translations/en.json +1 -0
- package/translations/ko.json +1 -0
- package/translations/ms.json +1 -0
- package/translations/zh.json +1 -0
- package/dist/src/ox-input-id.js.map +0 -1
- package/src/ox-input-ranges.ts.ing +0 -292
|
@@ -0,0 +1,40 @@
|
|
|
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>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<style>
|
|
6
|
+
body {
|
|
7
|
+
background: #fafafa;
|
|
8
|
+
}
|
|
9
|
+
</style>
|
|
10
|
+
|
|
11
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
|
|
12
|
+
|
|
13
|
+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
|
|
14
|
+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<form id="demo"></form>
|
|
18
|
+
|
|
19
|
+
<script type="module">
|
|
20
|
+
import { html, render } from 'lit'
|
|
21
|
+
import '../dist/src/ox-input-table.js'
|
|
22
|
+
|
|
23
|
+
const form = document.querySelector('#demo')
|
|
24
|
+
|
|
25
|
+
render(
|
|
26
|
+
html`
|
|
27
|
+
<ox-input-table
|
|
28
|
+
name="table"
|
|
29
|
+
@change=${e => {
|
|
30
|
+
console.log(e.target.value)
|
|
31
|
+
console.log('form value', new FormData(form).get('table'))
|
|
32
|
+
}}
|
|
33
|
+
></ox-input-table>
|
|
34
|
+
`,
|
|
35
|
+
form
|
|
36
|
+
)
|
|
37
|
+
</script>
|
|
38
|
+
</body>
|
|
39
|
+
</html>
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<style>
|
|
6
|
+
body {
|
|
7
|
+
background: #fafafa;
|
|
8
|
+
}
|
|
9
|
+
</style>
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<form id="demo"></form>
|
|
13
|
+
|
|
14
|
+
<script type="module">
|
|
15
|
+
import { html, render } from 'lit'
|
|
16
|
+
import '../dist/src/ox-input-value-map.js'
|
|
17
|
+
|
|
18
|
+
const form = document.querySelector('#demo')
|
|
19
|
+
|
|
20
|
+
const value1 = {
|
|
21
|
+
A: 'A',
|
|
22
|
+
B: 'B',
|
|
23
|
+
C: 'C',
|
|
24
|
+
default: 'B'
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const value2 = {
|
|
28
|
+
A: true,
|
|
29
|
+
B: false,
|
|
30
|
+
C: true,
|
|
31
|
+
default: true
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const value3 = {
|
|
35
|
+
A: 'red',
|
|
36
|
+
B: 'yellow',
|
|
37
|
+
C: 'blue',
|
|
38
|
+
default: 'yellow'
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
render(
|
|
42
|
+
html`
|
|
43
|
+
<ox-input-value-map
|
|
44
|
+
name="value-map1"
|
|
45
|
+
valuetype="string"
|
|
46
|
+
keytype="string"
|
|
47
|
+
.value=${value1}
|
|
48
|
+
@change=${e => {
|
|
49
|
+
console.log(e.target.value)
|
|
50
|
+
console.log('form value', new FormData(form).get('value-map1'))
|
|
51
|
+
}}
|
|
52
|
+
></ox-input-value-map>
|
|
53
|
+
|
|
54
|
+
<ox-input-value-map
|
|
55
|
+
name="value-map2"
|
|
56
|
+
valuetype="boolean"
|
|
57
|
+
keytype="string"
|
|
58
|
+
.value=${value2}
|
|
59
|
+
@change=${e => {
|
|
60
|
+
console.log(e.target.value)
|
|
61
|
+
console.log('form value', new FormData(form).get('value-map2'))
|
|
62
|
+
}}
|
|
63
|
+
></ox-input-value-map>
|
|
64
|
+
|
|
65
|
+
<ox-input-value-map
|
|
66
|
+
name="value-map3"
|
|
67
|
+
valuetype="color"
|
|
68
|
+
keytype="string"
|
|
69
|
+
.value=${value3}
|
|
70
|
+
@change=${e => {
|
|
71
|
+
console.log(e.target.value)
|
|
72
|
+
console.log('form value', new FormData(form).get('value-map3'))
|
|
73
|
+
}}
|
|
74
|
+
></ox-input-value-map>
|
|
75
|
+
`,
|
|
76
|
+
form
|
|
77
|
+
)
|
|
78
|
+
</script>
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<style>
|
|
6
|
+
body {
|
|
7
|
+
background: #fafafa;
|
|
8
|
+
}
|
|
9
|
+
</style>
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<form id="demo"></form>
|
|
13
|
+
|
|
14
|
+
<script type="module">
|
|
15
|
+
import { html, render } from 'lit'
|
|
16
|
+
import '../dist/src/ox-input-value-ranges.js'
|
|
17
|
+
|
|
18
|
+
const form = document.querySelector('#demo')
|
|
19
|
+
|
|
20
|
+
const value1 = {
|
|
21
|
+
'0~20': 'A',
|
|
22
|
+
'20~50': 'B',
|
|
23
|
+
'50~100': 'C',
|
|
24
|
+
default: 'B'
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const value2 = {
|
|
28
|
+
'0~20': true,
|
|
29
|
+
'20~50': false,
|
|
30
|
+
'50~100': true,
|
|
31
|
+
default: true
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const value3 = {
|
|
35
|
+
'0~20': 'red',
|
|
36
|
+
'20~50': 'yellow',
|
|
37
|
+
'50~100': 'blue',
|
|
38
|
+
default: 'yellow'
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
render(
|
|
42
|
+
html`
|
|
43
|
+
<ox-input-value-ranges
|
|
44
|
+
name="value-ranges1"
|
|
45
|
+
valuetype="string"
|
|
46
|
+
rangetype="number"
|
|
47
|
+
.value=${value1}
|
|
48
|
+
@change=${e => {
|
|
49
|
+
console.log(e.target.value)
|
|
50
|
+
console.log('form value', new FormData(form).get('value-ranges1'))
|
|
51
|
+
}}
|
|
52
|
+
></ox-input-value-ranges>
|
|
53
|
+
|
|
54
|
+
<ox-input-value-ranges
|
|
55
|
+
name="value-ranges2"
|
|
56
|
+
valuetype="boolean"
|
|
57
|
+
rangetype="number"
|
|
58
|
+
.value=${value2}
|
|
59
|
+
@change=${e => {
|
|
60
|
+
console.log(e.target.value)
|
|
61
|
+
console.log('form value', new FormData(form).get('value-ranges2'))
|
|
62
|
+
}}
|
|
63
|
+
></ox-input-value-ranges>
|
|
64
|
+
|
|
65
|
+
<ox-input-value-ranges
|
|
66
|
+
name="value-ranges3"
|
|
67
|
+
valuetype="color"
|
|
68
|
+
rangetype="number"
|
|
69
|
+
.value=${value3}
|
|
70
|
+
@change=${e => {
|
|
71
|
+
console.log(e.target.value)
|
|
72
|
+
console.log('form value', new FormData(form).get('value-ranges3'))
|
|
73
|
+
}}
|
|
74
|
+
></ox-input-value-ranges>
|
|
75
|
+
`,
|
|
76
|
+
form
|
|
77
|
+
)
|
|
78
|
+
</script>
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|
package/demo/index.html
CHANGED
|
@@ -7,63 +7,32 @@
|
|
|
7
7
|
background: #fafafa;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
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(--theme-white-color, #fff);
|
|
17
|
-
--ox-checkbox-label-color: var(--primary-text-color, #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(--primary-color, #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;
|
|
10
|
+
a {
|
|
11
|
+
display: block;
|
|
35
12
|
}
|
|
36
13
|
</style>
|
|
37
14
|
</head>
|
|
38
15
|
<body>
|
|
39
|
-
<
|
|
40
|
-
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
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>
|
|
16
|
+
<a href="./index-3dish.html">3dish</a>
|
|
17
|
+
<a href="./index-options.html">options</a>
|
|
18
|
+
<a href="./index-table.html">table</a>
|
|
19
|
+
<a href="./index-angle.html">angle</a>
|
|
20
|
+
<a href="./index-color.html">color</a>
|
|
21
|
+
<a href="./index-multiple-colors.html">multiple-colors</a>
|
|
22
|
+
<a href="./index-color-stops.html">color-stops</a>
|
|
23
|
+
<a href="./index-color-gradient.html">color-gradient</a>
|
|
24
|
+
<a href="./index-barcode.html">barcode</a>
|
|
25
|
+
<a href="./index-button-radio.html">button-radio</a>
|
|
26
|
+
<a href="./index-checkbox.html">checkbox</a>
|
|
27
|
+
<a href="./index-code.html">code</a>
|
|
28
|
+
<a href="./index-image.html">image</a>
|
|
29
|
+
<a href="./index-file.html">file</a>
|
|
30
|
+
<a href="./index-range.html">range</a>
|
|
31
|
+
<a href="./index-select.html">select</a>
|
|
32
|
+
<a href="./index-stack.html">stack</a>
|
|
33
|
+
<a href="./index-value-map.html">value-map</a>
|
|
34
|
+
<a href="./index-value-ranges.html">value-ranges</a>
|
|
35
|
+
<a href="./index-crontab.html">crontab</a>
|
|
36
|
+
<a href="./index-partition-keys.html">partition-keys</a>
|
|
68
37
|
</body>
|
|
69
38
|
</html>
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,11 +1,21 @@
|
|
|
1
|
-
export * from './ox-form-field';
|
|
2
|
-
export * from './ox-
|
|
3
|
-
export * from './ox-
|
|
4
|
-
export * from './ox-
|
|
5
|
-
export * from './ox-input-
|
|
6
|
-
export * from './ox-
|
|
7
|
-
export * from './ox-
|
|
8
|
-
export * from './ox-
|
|
9
|
-
export * from './ox-input-code';
|
|
10
|
-
export * from './ox-input-
|
|
11
|
-
export * from './ox-input-
|
|
1
|
+
export * from './ox-form-field.js';
|
|
2
|
+
export * from './ox-buttons-radio.js';
|
|
3
|
+
export * from './ox-checkbox.js';
|
|
4
|
+
export * from './ox-select.js';
|
|
5
|
+
export * from './ox-input-angle.js';
|
|
6
|
+
export * from './ox-input-3dish.js';
|
|
7
|
+
export * from './ox-input-stack.js';
|
|
8
|
+
export * from './ox-input-barcode.js';
|
|
9
|
+
export * from './ox-input-code.js';
|
|
10
|
+
export * from './ox-input-color.js';
|
|
11
|
+
export * from './ox-input-multiple-colors.js';
|
|
12
|
+
export * from './ox-input-color-stops.js';
|
|
13
|
+
export * from './ox-input-color-gradient.js';
|
|
14
|
+
export * from './ox-input-file.js';
|
|
15
|
+
export * from './ox-input-image.js';
|
|
16
|
+
export * from './ox-input-value-ranges.js';
|
|
17
|
+
export * from './ox-input-value-map.js';
|
|
18
|
+
export * from './ox-input-table.js';
|
|
19
|
+
export * from './ox-input-scene-component-id.js';
|
|
20
|
+
export * from './ox-input-crontab';
|
|
21
|
+
export * from './ox-input-partition-keys';
|
package/dist/src/index.js
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
|
-
export * from './ox-form-field';
|
|
2
|
-
export * from './ox-
|
|
3
|
-
export * from './ox-
|
|
4
|
-
export * from './ox-
|
|
5
|
-
export * from './ox-input-
|
|
6
|
-
export * from './ox-
|
|
7
|
-
export * from './ox-
|
|
8
|
-
export * from './ox-
|
|
9
|
-
export * from './ox-input-code';
|
|
10
|
-
export * from './ox-input-
|
|
11
|
-
export * from './ox-input-
|
|
1
|
+
export * from './ox-form-field.js';
|
|
2
|
+
export * from './ox-buttons-radio.js';
|
|
3
|
+
export * from './ox-checkbox.js';
|
|
4
|
+
export * from './ox-select.js';
|
|
5
|
+
export * from './ox-input-angle.js';
|
|
6
|
+
export * from './ox-input-3dish.js';
|
|
7
|
+
export * from './ox-input-stack.js';
|
|
8
|
+
export * from './ox-input-barcode.js';
|
|
9
|
+
export * from './ox-input-code.js';
|
|
10
|
+
export * from './ox-input-color.js';
|
|
11
|
+
export * from './ox-input-multiple-colors.js';
|
|
12
|
+
export * from './ox-input-color-stops.js';
|
|
13
|
+
export * from './ox-input-color-gradient.js';
|
|
14
|
+
export * from './ox-input-file.js';
|
|
15
|
+
export * from './ox-input-image.js';
|
|
16
|
+
export * from './ox-input-value-ranges.js';
|
|
17
|
+
export * from './ox-input-value-map.js';
|
|
18
|
+
export * from './ox-input-table.js';
|
|
19
|
+
export * from './ox-input-scene-component-id.js';
|
|
20
|
+
export * from './ox-input-crontab';
|
|
21
|
+
export * from './ox-input-partition-keys';
|
|
12
22
|
//# sourceMappingURL=index.js.map
|
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA","sourcesContent":["export * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab'\nexport * from './ox-input-partition-keys'\n"]}
|
package/dist/src/ox-checkbox.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n static styles = [\n css`\n :host {\n display:
|
|
1
|
+
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n }\n\n div {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n [disabled] {\n opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n cursor: auto;\n }\n\n [checkbox] {\n display: flex;\n border-radius: var(--ox-checkbox-border-radius, 4px);\n border: var(--ox-checkbox-border, 1px solid rgba(0, 0, 0, 0.3));\n background-color: var(--ox-checkbox-background-color, #fff);\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n align-items: center;\n justify-content: center;\n }\n\n a {\n background-color: var(--ox-checkbox-unchecked-background-color, #fff);\n border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));\n }\n\n :host([checked]) a {\n background-color: var(--ox-checkbox-checked-background-color, #fff);\n border: var(--ox-checkbox-checked-border, 1px solid #38a25b);\n }\n\n path {\n fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));\n }\n\n :host([checked]) path {\n fill: var(--ox-checkbox-checked-color, #38a25b);\n }\n\n svg {\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n }\n\n [label] {\n margin: var(--ox-checkbox-label-margin, 0 0 0 7px);\n color: var(--ox-checkbox-label-color, #3a5877);\n }\n\n :host([checked]) [label] {\n font-weight: var(--ox-checkbox-checked-font-weight, bold);\n }\n `\n ]\n\n @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean = false\n @property({ type: Boolean }) disabled: boolean = false\n @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n\n @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n render() {\n return html`\n <div @click=${this.onClick} ?disabled=${this.disabled}>\n <a href=\"#\" @click=${(e: Event) => e.preventDefault()} checkbox>\n ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n </a>\n ${this._hasInner\n ? html` <span label>\n <slot></slot>\n </span>`\n : ''}\n </div>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n this.addEventListener('keydown', this.onKeyDown.bind(this))\n }\n\n onClick() {\n if (this.disabled) {\n return\n }\n\n if (!this.indeterminatable) {\n this.indeterminate = false\n this.checked = !this.checked\n } else {\n if (this.indeterminate) {\n this.indeterminate = false\n this.checked = true\n } else if (this.checked) {\n this.indeterminate = false\n this.checked = false\n } else {\n this.indeterminate = true\n this.checked = false\n }\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.checked\n })\n )\n }\n\n get checkedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get uncheckedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get indeterminateIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke=\"rgba(0, 0, 0, 0.7)\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n `\n }\n\n onKeyDown(e: KeyboardEvent) {\n e.preventDefault()\n\n if (e.key === ' ' || e.key == 'Spacebar') {\n this.onClick()\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n }\n}\n"]}
|
|
@@ -5,18 +5,18 @@ import 'codemirror/mode/javascript/javascript';
|
|
|
5
5
|
import 'codemirror/mode/python/python';
|
|
6
6
|
import 'codemirror/addon/display/fullscreen';
|
|
7
7
|
import 'codemirror/addon/display/autorefresh';
|
|
8
|
-
import CodeMirror from 'codemirror';
|
|
9
8
|
import { PropertyValues } from 'lit';
|
|
9
|
+
import CodeMirror from 'codemirror';
|
|
10
10
|
import { OxFormField } from './ox-form-field';
|
|
11
11
|
/**
|
|
12
12
|
WEB Component for code-mirror code editor.
|
|
13
13
|
|
|
14
14
|
Example:
|
|
15
15
|
|
|
16
|
-
<
|
|
17
|
-
</
|
|
16
|
+
<ox-input-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
|
|
17
|
+
</ox-input-code>
|
|
18
18
|
*/
|
|
19
|
-
export
|
|
19
|
+
export declare class OxInputCode extends OxFormField {
|
|
20
20
|
static styles: import("lit").CSSResult[];
|
|
21
21
|
/**
|
|
22
22
|
* `value`는 에디터에서 작성중인 contents이다.
|
|
@@ -6,21 +6,21 @@ import 'codemirror/mode/javascript/javascript';
|
|
|
6
6
|
import 'codemirror/mode/python/python';
|
|
7
7
|
import 'codemirror/addon/display/fullscreen';
|
|
8
8
|
import 'codemirror/addon/display/autorefresh';
|
|
9
|
-
import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css';
|
|
10
|
-
import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css';
|
|
11
|
-
import NightThemeStyle from '!!text-loader!codemirror/theme/night.css';
|
|
12
|
-
import CodeMirror from 'codemirror';
|
|
13
9
|
import { css, html, unsafeCSS } from 'lit';
|
|
14
10
|
import { customElement, property } from 'lit/decorators.js';
|
|
15
|
-
import
|
|
11
|
+
import CodeMirror from 'codemirror';
|
|
12
|
+
import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css';
|
|
13
|
+
import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css';
|
|
14
|
+
import NightThemeStyle from '!!text-loader!codemirror/theme/night.css';
|
|
16
15
|
import { OxFormField } from './ox-form-field';
|
|
16
|
+
import { ScrollbarStyles } from '@operato/styles';
|
|
17
17
|
/**
|
|
18
18
|
WEB Component for code-mirror code editor.
|
|
19
19
|
|
|
20
20
|
Example:
|
|
21
21
|
|
|
22
|
-
<
|
|
23
|
-
</
|
|
22
|
+
<ox-input-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
|
|
23
|
+
</ox-input-code>
|
|
24
24
|
*/
|
|
25
25
|
let OxInputCode = class OxInputCode extends OxFormField {
|
|
26
26
|
constructor() {
|
|
@@ -144,5 +144,5 @@ __decorate([
|
|
|
144
144
|
OxInputCode = __decorate([
|
|
145
145
|
customElement('ox-input-code')
|
|
146
146
|
], OxInputCode);
|
|
147
|
-
export
|
|
147
|
+
export { OxInputCode };
|
|
148
148
|
//# sourceMappingURL=ox-input-code.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,uCAAuC,CAAA;AAC9C,OAAO,+BAA+B,CAAA;AACtC,OAAO,qCAAqC,CAAA;AAC5C,OAAO,sCAAsC,CAAA;AAE7C,OAAO,
|
|
1
|
+
{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport 'codemirror/mode/javascript/javascript'\nimport 'codemirror/mode/python/python'\nimport 'codemirror/addon/display/fullscreen'\nimport 'codemirror/addon/display/autorefresh'\n\nimport { PropertyValues, css, html, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport CodeMirror from 'codemirror'\nimport CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'\nimport FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'\nimport NightThemeStyle from '!!text-loader!codemirror/theme/night.css'\nimport { OxFormField } from './ox-form-field'\nimport { ScrollbarStyles } from '@operato/styles'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n\n <ox-input-code .value=${text} mode=${mode} tab-size=\"4\" tab-as-space=\"true\">\n </ox-input-code>\n*/\n@customElement('ox-input-code')\nexport class OxInputCode extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n ${unsafeCSS(CodeMirrorStyle)}\n ${unsafeCSS(FullScreenStyle)}\n ${unsafeCSS(NightThemeStyle)}\n `,\n css`\n :host {\n display: block;\n position: relative;\n }\n\n textarea {\n display: block;\n height: 100%;\n width: 100%;\n resize: none;\n font-size: 16px;\n line-height: 20px;\n border: 0px;\n padding: 0px;\n }\n `\n ]\n\n /**\n * `value`는 에디터에서 작성중인 contents이다.\n */\n @property({ type: String }) value: string = ''\n @property({ type: String }) mode?: string\n @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2\n @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true\n\n private _outside_changing: boolean = false\n private _self_changing: boolean = false\n private _editor: CodeMirror.EditorFromTextArea | null | undefined = null\n private _changed: boolean = false\n\n // private lint: any\n // private hintOptions: any\n\n updated(changes: PropertyValues<this>) {\n this._outside_changing = true\n if (changes.has('value') && this.editor && !this._self_changing) {\n this.editor?.setValue(this.value === undefined ? '' : String(this.value))\n this.editor?.refresh()\n }\n this._outside_changing = false\n }\n\n render() {\n return html` <textarea></textarea> `\n }\n\n get editor() {\n if (!this._editor) {\n let textarea = this.renderRoot.querySelector('textarea')\n let mode = this.mode || 'javascript'\n let tabSize = Number(this.tabSize) || 2\n let indentUnit = tabSize\n // let lint = this.lint\n // let hintOptions = this.hintOptions\n let tabAsSpace = this.tabAsSpace\n\n if (textarea) {\n this._editor = CodeMirror.fromTextArea(textarea, {\n value: this.value,\n mode,\n // lint,\n // hintOptions,\n tabSize,\n indentUnit,\n lineNumbers: false,\n showCursorWhenSelecting: true,\n theme: 'night',\n extraKeys: {\n F11: function (cm) {\n cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n },\n Esc: function (cm) {\n cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n },\n // https://github.com/codemirror/CodeMirror/issues/988#issuecomment-37095621\n Tab: tabAsSpace\n ? function (cm: CodeMirror.Editor) {\n cm.replaceSelection(Array(cm.getOption('tabSize')).join(' '))\n }\n : false\n },\n autoRefresh: {\n delay: 500\n }\n })\n\n this._editor.on('blur', e => {\n if (!this._changed) return\n\n this.value = e.getValue()\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n })\n\n this._editor.on('change', async e => {\n this._self_changing = true\n\n this._changed = true\n\n await this.updateComplete\n this._self_changing = false\n })\n }\n }\n\n return this._editor\n }\n}\n"]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import '@operato/i18n/ox-i18n.js';
|
|
5
|
+
import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
|
|
6
|
+
import '@polymer/paper-listbox/paper-listbox';
|
|
7
|
+
import '@polymer/paper-item/paper-item';
|
|
8
|
+
import '@operato/input/ox-input-angle.js';
|
|
9
|
+
import '@operato/input/ox-input-color-stops.js';
|
|
10
|
+
import { ColorStop } from './ox-input-color-stops.js';
|
|
11
|
+
import { OxFormField } from './ox-form-field.js';
|
|
12
|
+
export declare type GradientOption = {
|
|
13
|
+
type: 'linear' | 'radial';
|
|
14
|
+
rotation: number;
|
|
15
|
+
direction?: 'left-to-right' | 'lefttop-to-rightbottom' | 'top-to-bottom' | 'righttop-to-leftbottom' | 'right-to-left' | 'rightbottom-to-lefttop' | 'bottom-to-top' | 'leftbottom-to-righttop' | 'left-to-right' | 'center-to-corner';
|
|
16
|
+
center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom';
|
|
17
|
+
colorStops?: ColorStop[];
|
|
18
|
+
};
|
|
19
|
+
export declare class OxInputColorGradient extends OxFormField {
|
|
20
|
+
static styles: import("lit").CSSResult;
|
|
21
|
+
value: GradientOption;
|
|
22
|
+
firstUpdated(): void;
|
|
23
|
+
_onChange(e: Event): void;
|
|
24
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
25
|
+
_convertDirectionToRotation(direction: string): number;
|
|
26
|
+
}
|