@operato/input 1.0.0-alpha.4 → 1.0.0-alpha.40

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.
Files changed (116) hide show
  1. package/CHANGELOG.md +310 -0
  2. package/README.md +9 -6
  3. package/assets/images/icon-editor-gradient-direction.png +0 -0
  4. package/assets/images/icon-properties-label.png +0 -0
  5. package/assets/images/icon-properties-line-type.png +0 -0
  6. package/assets/images/icon-properties-table.png +0 -0
  7. package/demo/index-color-gradient.html +35 -0
  8. package/demo/index-color-stops.html +62 -0
  9. package/demo/index-color.html +35 -0
  10. package/demo/index-crontab.html +36 -0
  11. package/demo/index-file.html +41 -0
  12. package/demo/index-image.html +1 -1
  13. package/demo/index-multiple-colors.html +37 -0
  14. package/demo/index-options.html +43 -0
  15. package/demo/index-partition-keys.html +71 -0
  16. package/demo/index-range.html +40 -0
  17. package/demo/index-select.html +21 -14
  18. package/demo/index-table.html +39 -0
  19. package/demo/index-value-map.html +80 -0
  20. package/demo/index-value-ranges.html +80 -0
  21. package/demo/index.html +23 -54
  22. package/dist/src/index.d.ts +21 -11
  23. package/dist/src/index.js +21 -11
  24. package/dist/src/index.js.map +1 -1
  25. package/dist/src/ox-checkbox.js +1 -1
  26. package/dist/src/ox-checkbox.js.map +1 -1
  27. package/dist/src/ox-input-code.d.ts +4 -4
  28. package/dist/src/ox-input-code.js +8 -8
  29. package/dist/src/ox-input-code.js.map +1 -1
  30. package/dist/src/ox-input-color-gradient.d.ts +26 -0
  31. package/dist/src/ox-input-color-gradient.js +318 -0
  32. package/dist/src/ox-input-color-gradient.js.map +1 -0
  33. package/dist/src/ox-input-color-stops.d.ts +71 -0
  34. package/dist/src/ox-input-color-stops.js +445 -0
  35. package/dist/src/ox-input-color-stops.js.map +1 -0
  36. package/dist/src/ox-input-color.d.ts +176 -0
  37. package/dist/src/ox-input-color.js +298 -0
  38. package/dist/src/ox-input-color.js.map +1 -0
  39. package/dist/src/ox-input-crontab.d.ts +23 -0
  40. package/dist/src/ox-input-crontab.js +560 -0
  41. package/dist/src/ox-input-crontab.js.map +1 -0
  42. package/dist/src/ox-input-data.d.ts +2 -2
  43. package/dist/src/ox-input-data.js +2 -2
  44. package/dist/src/ox-input-data.js.map +1 -1
  45. package/dist/src/ox-input-file.d.ts +2 -0
  46. package/dist/src/ox-input-file.js +6 -1
  47. package/dist/src/ox-input-file.js.map +1 -1
  48. package/dist/src/ox-input-layout/ox-input-card-layout.d.ts +4 -0
  49. package/dist/src/ox-input-layout/ox-input-card-layout.js +57 -0
  50. package/dist/src/ox-input-layout/ox-input-card-layout.js.map +1 -0
  51. package/dist/src/ox-input-layout/ox-input-grid-layout.d.ts +4 -0
  52. package/dist/src/ox-input-layout/ox-input-grid-layout.js +63 -0
  53. package/dist/src/ox-input-layout/ox-input-grid-layout.js.map +1 -0
  54. package/dist/src/ox-input-layout/ox-input-layout.d.ts +5 -0
  55. package/dist/src/ox-input-layout/ox-input-layout.js +73 -0
  56. package/dist/src/ox-input-layout/ox-input-layout.js.map +1 -0
  57. package/dist/src/ox-input-multiple-colors.d.ts +28 -0
  58. package/dist/src/ox-input-multiple-colors.js +113 -0
  59. package/dist/src/ox-input-multiple-colors.js.map +1 -0
  60. package/dist/src/ox-input-options.d.ts +22 -0
  61. package/dist/src/ox-input-options.js +137 -0
  62. package/dist/src/ox-input-options.js.map +1 -0
  63. package/dist/src/ox-input-partition-keys.d.ts +36 -0
  64. package/dist/src/ox-input-partition-keys.js +204 -0
  65. package/dist/src/ox-input-partition-keys.js.map +1 -0
  66. package/dist/src/ox-input-range.d.ts +4 -0
  67. package/dist/src/ox-input-range.js +161 -0
  68. package/dist/src/ox-input-range.js.map +1 -0
  69. package/dist/src/{ox-input-id.d.ts → ox-input-scene-component-id.d.ts} +0 -0
  70. package/dist/src/{ox-input-id.js → ox-input-scene-component-id.js} +2 -2
  71. package/dist/src/ox-input-scene-component-id.js.map +1 -0
  72. package/dist/src/ox-input-stack.d.ts +1 -1
  73. package/dist/src/ox-input-stack.js +1 -1
  74. package/dist/src/ox-input-stack.js.map +1 -1
  75. package/dist/src/ox-input-table.d.ts +8 -0
  76. package/dist/src/ox-input-table.js +379 -0
  77. package/dist/src/ox-input-table.js.map +1 -0
  78. package/dist/src/ox-input-value-map.d.ts +41 -0
  79. package/dist/src/ox-input-value-map.js +279 -0
  80. package/dist/src/ox-input-value-map.js.map +1 -0
  81. package/dist/src/ox-input-value-ranges.d.ts +41 -0
  82. package/dist/src/ox-input-value-ranges.js +298 -0
  83. package/dist/src/ox-input-value-ranges.js.map +1 -0
  84. package/dist/src/ox-select.d.ts +3 -0
  85. package/dist/src/ox-select.js +28 -3
  86. package/dist/src/ox-select.js.map +1 -1
  87. package/dist/tsconfig.tsbuildinfo +1 -1
  88. package/package.json +25 -7
  89. package/src/index.ts +21 -11
  90. package/src/ox-checkbox.ts +1 -1
  91. package/src/ox-input-code.ts +9 -10
  92. package/src/ox-input-color-gradient.ts +343 -0
  93. package/src/ox-input-color-stops.ts +499 -0
  94. package/src/ox-input-color.ts +323 -0
  95. package/src/ox-input-crontab.ts +560 -0
  96. package/src/ox-input-data.ts +5 -5
  97. package/src/ox-input-file.ts +8 -3
  98. package/src/ox-input-layout/ox-input-card-layout.ts +58 -0
  99. package/src/ox-input-layout/ox-input-grid-layout.ts +64 -0
  100. package/src/ox-input-layout/ox-input-layout.ts +77 -0
  101. package/src/ox-input-multiple-colors.ts +113 -0
  102. package/src/ox-input-options.ts +165 -0
  103. package/src/ox-input-partition-keys.ts +243 -0
  104. package/src/ox-input-range.ts +147 -0
  105. package/src/{ox-input-id.ts → ox-input-scene-component-id.ts} +1 -1
  106. package/src/ox-input-stack.ts +1 -1
  107. package/src/ox-input-table.ts +404 -0
  108. package/src/{ox-input-keyvalues.ts.ing → ox-input-value-map.ts} +125 -94
  109. package/src/ox-input-value-ranges.ts +325 -0
  110. package/src/ox-select.ts +31 -5
  111. package/translations/en.json +1 -0
  112. package/translations/ko.json +1 -0
  113. package/translations/ms.json +1 -0
  114. package/translations/zh.json +1 -0
  115. package/dist/src/ox-input-id.js.map +0 -1
  116. package/src/ox-input-ranges.ts.ing +0 -292
package/demo/index-partition-keys.html ADDED
@@ -0,0 +1,71 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <style>
6
+ body {
7
+ background: #fafafa;
8
+ }
9
+ </style>
10
+ </head>
11
+ <body>
12
+ <form id="demo"></form>
13
+
14
+ <script type="module">
15
+ import { html, render } from 'lit'
16
+ import '../dist/src/ox-input-partition-keys.js'
17
+
18
+ const form = document.querySelector('#demo')
19
+
20
+ const value1 = {
21
+ A: 'A',
22
+ B: 'B',
23
+ C: 'C'
24
+ }
25
+
26
+ const value2 = {
27
+ A: true,
28
+ B: false,
29
+ C: true
30
+ }
31
+
32
+ const value3 = {
33
+ A: 'red',
34
+ B: 'yellow',
35
+ C: 'blue'
36
+ }
37
+
38
+ render(
39
+ html`
40
+ <ox-input-partition-keys
41
+ name="partition-keys1"
42
+ .value=${value1}
43
+ @change=${e => {
44
+ console.log(e.target.value)
45
+ console.log('form value', new FormData(form).get('partition-keys1'))
46
+ }}
47
+ ></ox-input-partition-keys>
48
+
49
+ <ox-input-partition-keys
50
+ name="partition-keys2"
51
+ .value=${value2}
52
+ @change=${e => {
53
+ console.log(e.target.value)
54
+ console.log('form value', new FormData(form).get('partition-keys2'))
55
+ }}
56
+ ></ox-input-partition-keys>
57
+
58
+ <ox-input-partition-keys
59
+ name="partition-keys3"
60
+ .value=${value3}
61
+ @change=${e => {
62
+ console.log(e.target.value)
63
+ console.log('form value', new FormData(form).get('partition-keys3'))
64
+ }}
65
+ ></ox-input-partition-keys>
66
+ `,
67
+ form
68
+ )
69
+ </script>
70
+ </body>
71
+ </html>
package/demo/index-range.html ADDED
@@ -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>
package/demo/index-select.html CHANGED
@@ -57,16 +57,19 @@
57
57
 
58
58
  render(
59
59
  html`
60
- <ox-select name="single" @change=${onchanged} placeholder="single select">
60
+ <ox-select name="single" @change=${onchanged} placeholder="single select" .value=${'C'}>
61
61
  <ox-popup-list align-left nowrap>
62
- <div option value="A">A</div>
63
- <div option value="B">B</div>
64
- <div option value="C">C</div>
65
- <div option value="TOO LONG VALUE">TOO LONG VALUE</div>
62
+ <div option value="A">LABEL-A</div>
63
+ <div option value="B">LABEL-B</div>
64
+ <div option value="C">LABEL-C</div>
65
+ <div option value="TOO LONG VALUE">LABEL-TOO LONG VALUE</div>
66
66
  </ox-popup-list>
67
67
  </ox-select>
68
68
 
69
- <ox-select name="multiple" @change=${onchanged} placeholder="multiple select">
69
+ <ox-select name="multiple" @change=${onchanged} placeholder="multiple select" .value=${[
70
+ 'B',
71
+ 'TOO LONG VALUE'
72
+ ]}>
70
73
  <ox-popup-list multiple>
71
74
  <div option value="A">A</div>
72
75
  <div option value="B">B</div>
@@ -75,20 +78,24 @@
75
78
  </ox-popup-list>
76
79
  </ox-select>
77
80
 
78
- <ox-select name="multiple with checkbox" @change=${onchanged} placeholder="multiple with checkbox">
81
+ <ox-select name="multiple with checkbox" @change=${onchanged} placeholder="multiple with checkbox" .value=${[
82
+ 'B',
83
+ 'C',
84
+ 'F'
85
+ ]}>
79
86
  <ox-popup-list attr-selected="checked" multiple with-search>
80
87
  <ox-checkbox option @change=${e => {
81
88
  const options = e.target.parentElement.querySelectorAll('[option]')
82
89
  console.log(options)
83
90
  options.forEach(option => (option.checked = e.target.checked))
84
91
  }}>set all</ox-checkbox>
85
- <ox-checkbox option value="A">A</ox-checkbox>
86
- <ox-checkbox option value="B">B</ox-checkbox>
87
- <ox-checkbox option value="C"checked >C</ox-checkbox>
88
- <ox-checkbox option value="D">D</ox-checkbox>
89
- <ox-checkbox option value="E">E</ox-checkbox>
90
- <ox-checkbox option value="F">F</ox-checkbox>
91
- <ox-checkbox option value="G">G</ox-checkbox>
92
+ <ox-checkbox option value="A">LABEL-A</ox-checkbox>
93
+ <ox-checkbox option value="B">LABEL-B</ox-checkbox>
94
+ <ox-checkbox option value="C" checked>LABEL-C</ox-checkbox>
95
+ <ox-checkbox option value="D">LABEL-D</ox-checkbox>
96
+ <ox-checkbox option value="E">LABEL-E</ox-checkbox>
97
+ <ox-checkbox option value="F">LABEL-F</ox-checkbox>
98
+ <ox-checkbox option value="G">LABEL-G</ox-checkbox>
92
99
  <ox-checkbox option value="TOO LONG VALUE">TOO LONG VALUE</ox-checkbox>
93
100
  </ox-popup-list>
94
101
  </ox-select>
package/demo/index-table.html ADDED
@@ -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>
package/demo/index-value-map.html ADDED
@@ -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>
package/demo/index-value-ranges.html ADDED
@@ -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
- .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(--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
- <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>
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-input-angle';
3
- export * from './ox-input-3dish';
4
- export * from './ox-input-stack';
5
- export * from './ox-input-barcode';
6
- export * from './ox-buttons-radio';
7
- export * from './ox-checkbox';
8
- export * from './ox-select';
9
- export * from './ox-input-code';
10
- export * from './ox-input-file';
11
- export * from './ox-input-image';
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-input-angle';
3
- export * from './ox-input-3dish';
4
- export * from './ox-input-stack';
5
- export * from './ox-input-barcode';
6
- export * from './ox-buttons-radio';
7
- export * from './ox-checkbox';
8
- export * from './ox-select';
9
- export * from './ox-input-code';
10
- export * from './ox-input-file';
11
- export * from './ox-input-image';
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,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA","sourcesContent":["export * from './ox-form-field'\nexport * from './ox-input-angle'\nexport * from './ox-input-3dish'\nexport * from './ox-input-stack'\nexport * from './ox-input-barcode'\nexport * from './ox-buttons-radio'\nexport * from './ox-checkbox'\nexport * from './ox-select'\nexport * from './ox-input-code'\nexport * from './ox-input-file'\nexport * from './ox-input-image'\n"]}
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
@@ -17,7 +17,7 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
17
17
  static { this.styles = [
18
18
  css `
19
19
  :host {
20
- display: block;
20
+ display: flex;
21
21
  }
22
22
 
23
23
  div {
package/dist/src/ox-checkbox.js.map 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: block;\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"]}
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"]}
package/dist/src/ox-input-code.d.ts CHANGED
@@ -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
- <things-editor-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
17
- </things-editor-code>
16
+ <ox-input-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
17
+ </ox-input-code>
18
18
  */
19
- export default class OxInputCode extends OxFormField {
19
+ export declare class OxInputCode extends OxFormField {
20
20
  static styles: import("lit").CSSResult[];
21
21
  /**
22
22
  * `value`는 에디터에서 작성중인 contents이다.
package/dist/src/ox-input-code.js CHANGED
@@ -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 { ScrollbarStyles } from '@operato/styles';
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
- <things-editor-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
23
- </things-editor-code>
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 default OxInputCode;
147
+ export { OxInputCode };
148
148
  //# sourceMappingURL=ox-input-code.js.map