@operato/input 0.4.2 → 1.0.0-alpha.10

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 (73) hide show
  1. package/CHANGELOG.md +93 -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/demo/index-color-gradient.html +35 -0
  6. package/demo/index-color-stops.html +62 -0
  7. package/demo/index-color.html +35 -0
  8. package/demo/index-file.html +41 -0
  9. package/demo/index-image.html +1 -1
  10. package/demo/index-multiple-colors.html +37 -0
  11. package/demo/index-options.html +43 -0
  12. package/demo/index-range.html +40 -0
  13. package/demo/index.html +16 -56
  14. package/dist/src/index.d.ts +15 -11
  15. package/dist/src/index.js +15 -11
  16. package/dist/src/index.js.map +1 -1
  17. package/dist/src/ox-checkbox.js +1 -1
  18. package/dist/src/ox-checkbox.js.map +1 -1
  19. package/dist/src/ox-input-code.d.ts +4 -4
  20. package/dist/src/ox-input-code.js +8 -8
  21. package/dist/src/ox-input-code.js.map +1 -1
  22. package/dist/src/ox-input-color-stops.d.ts +71 -0
  23. package/dist/src/ox-input-color-stops.js +445 -0
  24. package/dist/src/ox-input-color-stops.js.map +1 -0
  25. package/dist/src/ox-input-color.d.ts +176 -0
  26. package/dist/src/ox-input-color.js +298 -0
  27. package/dist/src/ox-input-color.js.map +1 -0
  28. package/dist/src/ox-input-data.d.ts +2 -2
  29. package/dist/src/ox-input-data.js +2 -2
  30. package/dist/src/ox-input-data.js.map +1 -1
  31. package/dist/src/ox-input-file.d.ts +2 -0
  32. package/dist/src/ox-input-file.js +6 -1
  33. package/dist/src/ox-input-file.js.map +1 -1
  34. package/dist/src/ox-input-multiple-colors.d.ts +28 -0
  35. package/dist/src/ox-input-multiple-colors.js +113 -0
  36. package/dist/src/ox-input-multiple-colors.js.map +1 -0
  37. package/dist/src/ox-input-options.d.ts +22 -0
  38. package/dist/src/ox-input-options.js +137 -0
  39. package/dist/src/ox-input-options.js.map +1 -0
  40. package/dist/src/ox-input-range.d.ts +4 -0
  41. package/dist/src/ox-input-range.js +161 -0
  42. package/dist/src/ox-input-range.js.map +1 -0
  43. package/dist/src/{ox-input-id.d.ts → ox-input-scene-component-id.d.ts} +0 -0
  44. package/dist/src/{ox-input-id.js → ox-input-scene-component-id.js} +2 -2
  45. package/dist/src/ox-input-scene-component-id.js.map +1 -0
  46. package/dist/src/ox-input-stack.d.ts +1 -1
  47. package/dist/src/ox-input-stack.js +1 -1
  48. package/dist/src/ox-input-stack.js.map +1 -1
  49. package/dist/tsconfig.tsbuildinfo +1 -1
  50. package/package.json +16 -7
  51. package/src/index.ts +15 -11
  52. package/src/ox-checkbox.ts +1 -1
  53. package/src/ox-input-background-pattern.ts.xxx +163 -0
  54. package/src/ox-input-code.ts +9 -10
  55. package/src/ox-input-color-gradient.ts.xxx +343 -0
  56. package/src/ox-input-color-stops.ts +499 -0
  57. package/src/ox-input-color.ts +323 -0
  58. package/src/ox-input-data.ts +5 -5
  59. package/src/ox-input-file.ts +8 -3
  60. package/src/ox-input-fill-style.ts.xxx +361 -0
  61. package/src/ox-input-keyvalues.ts.ing +10 -10
  62. package/src/ox-input-multiple-colors.ts +113 -0
  63. package/src/ox-input-options.ts +165 -0
  64. package/src/ox-input-range.ts +147 -0
  65. package/src/ox-input-ranges.ts.ing +12 -12
  66. package/src/{ox-input-id.ts → ox-input-scene-component-id.ts} +1 -1
  67. package/src/ox-input-stack.ts +1 -1
  68. package/test/property-angle.test.ts.backup +1 -1
  69. package/translations/en.json +1 -0
  70. package/translations/ko.json +1 -0
  71. package/translations/ms.json +1 -0
  72. package/translations/zh.json +1 -0
  73. package/dist/src/ox-input-id.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,99 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.0.0-alpha.10](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.9...v1.0.0-alpha.10) (2022-03-12)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * style ([89ba680](https://github.com/hatiolab/operato/commit/89ba68072c3141b6bbcad3378cc6980670ef4198))
12
+
13
+
14
+
15
+ ## [1.0.0-alpha.9](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.8...v1.0.0-alpha.9) (2022-03-12)
16
+
17
+
18
+ ### :rocket: New Features
19
+
20
+ * settled concept for input, property-editor, grist-editor, so on ([0c9e1d0](https://github.com/hatiolab/operato/commit/0c9e1d054c7aef5d965868242cf471667af7a3c3))
21
+
22
+
23
+
24
+ ## [1.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.7...v1.0.0-alpha.8) (2022-03-11)
25
+
26
+ **Note:** Version bump only for package @operato/input
27
+
28
+
29
+
30
+
31
+
32
+ ## [1.0.0-alpha.7](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.6...v1.0.0-alpha.7) (2022-03-11)
33
+
34
+ **Note:** Version bump only for package @operato/input
35
+
36
+
37
+
38
+
39
+
40
+ ## [1.0.0-alpha.6](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.5...v1.0.0-alpha.6) (2022-03-11)
41
+
42
+ **Note:** Version bump only for package @operato/input
43
+
44
+
45
+
46
+
47
+
48
+ ## [1.0.0-alpha.5](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2022-03-11)
49
+
50
+
51
+ ### :rocket: New Features
52
+
53
+ * migrate property-editor from things-factory ([272cdaa](https://github.com/hatiolab/operato/commit/272cdaafd74f3c3c597403f88655cb5cf4a81313))
54
+ * migrated property-editors from things-factory ([9d0b73a](https://github.com/hatiolab/operato/commit/9d0b73a8c05187e7ca8db874ddde8c977ec52a55))
55
+
56
+
57
+
58
+ ## [1.0.0-alpha.4](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.3...v1.0.0-alpha.4) (2022-03-11)
59
+
60
+ **Note:** Version bump only for package @operato/input
61
+
62
+
63
+
64
+
65
+
66
+ ## [1.0.0-alpha.3](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.2...v1.0.0-alpha.3) (2022-03-10)
67
+
68
+ **Note:** Version bump only for package @operato/input
69
+
70
+
71
+
72
+
73
+
74
+ ## [1.0.0-alpha.2](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2022-03-10)
75
+
76
+ **Note:** Version bump only for package @operato/input
77
+
78
+
79
+
80
+
81
+
82
+ ## [1.0.0-alpha.1](https://github.com/hatiolab/operato/compare/v0.4.3...v1.0.0-alpha.1) (2022-03-09)
83
+
84
+
85
+ ### :rocket: New Features
86
+
87
+ * 1.0-alpha ([42f87cf](https://github.com/hatiolab/operato/commit/42f87cf6a3cef0381db91ecb1179e63c64c01370))
88
+
89
+
90
+
91
+ ### [0.4.3](https://github.com/hatiolab/operato/compare/v0.4.2...v0.4.3) (2022-03-06)
92
+
93
+ **Note:** Version bump only for package @operato/input
94
+
95
+
96
+
97
+
98
+
6
99
  ### [0.4.2](https://github.com/hatiolab/operato/compare/v0.4.1...v0.4.2) (2022-03-06)
7
100
 
8
101
  **Note:** Version bump only for package @operato/input
package/README.md CHANGED
@@ -1,21 +1,25 @@
1
- # \<property-editor>
1
+ # @operato/input module
2
2
 
3
- This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
3
+ 이 모듈에는 디펜던시가 최소화된 입력용 컴포넌트들을 포함한다.
4
+
5
+ 각 컴포넌트는 OxFormField 를 상속함으로써 폼의 입력 엘리먼트로 동작할 수 있다.
4
6
 
5
7
  ## Installation
6
8
 
7
9
  ```bash
8
- npm i property-editor
10
+ npm i @operato/input
9
11
  ```
10
12
 
11
13
  ## Usage
12
14
 
13
15
  ```html
14
16
  <script type="module">
15
- import 'property-editor/property-editor.js';
17
+ import '@operato/input/ox-input-angle.js'
16
18
  </script>
17
19
 
18
- <property-editor></property-editor>
20
+ <form>
21
+ <ox-input-angle name="angle"></ox-input-angle>
22
+ </form>
19
23
  ```
20
24
 
21
25
  ## Linting and formatting
@@ -60,7 +64,6 @@ To build a production version of Storybook, run
60
64
  npm run storybook:build
61
65
  ```
62
66
 
63
-
64
67
  ## Tooling configs
65
68
 
66
69
  For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
package/demo/index-color-gradient.html ADDED
@@ -0,0 +1,35 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <style>
6
+ body {
7
+ background: #fafafa;
8
+ }
9
+ </style>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
11
+ </head>
12
+ <body>
13
+ <form id="demo"></form>
14
+
15
+ <script type="module">
16
+ import { html, render } from 'lit'
17
+ import '../dist/src/ox-input-color-gradient.js'
18
+
19
+ const form = document.querySelector('#demo')
20
+ render(
21
+ html`
22
+ <ox-input-color-gradient
23
+ name="color-gradient-solid"
24
+ type="solid"
25
+ @change=${e => {
26
+ console.log(e.target.value)
27
+ console.log('form value', new FormData(form).get('color-gradient-solid'))
28
+ }}
29
+ ></ox-input-color-gradient>
30
+ `,
31
+ form
32
+ )
33
+ </script>
34
+ </body>
35
+ </html>
package/demo/index-color-stops.html ADDED
@@ -0,0 +1,62 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <style>
6
+ body {
7
+ background: #fafafa;
8
+ }
9
+ </style>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
11
+ </head>
12
+ <body>
13
+ <form id="demo"></form>
14
+
15
+ <script type="module">
16
+ import { html, render } from 'lit'
17
+ import '../dist/src/ox-input-color-stops.js'
18
+
19
+ const value = [
20
+ {
21
+ position: 0,
22
+ color: 'white'
23
+ },
24
+ {
25
+ position: 0.5,
26
+ color: 'green'
27
+ },
28
+ {
29
+ position: 1,
30
+ color: 'white'
31
+ }
32
+ ]
33
+
34
+ const form = document.querySelector('#demo')
35
+ render(
36
+ html`
37
+ <ox-input-color-stops
38
+ name="color-stops-solid"
39
+ type="solid"
40
+ min="0"
41
+ max="100"
42
+ @change=${e => {
43
+ console.log(e.target.value)
44
+ console.log('form value', new FormData(form).get('color-stops-solid'))
45
+ }}
46
+ ></ox-input-color-stops>
47
+
48
+ <ox-input-color-stops
49
+ name="color-stops-gradient"
50
+ .value=${value}
51
+ type="gradient"
52
+ @change=${e => {
53
+ console.log(e.target.value)
54
+ console.log('form value', new FormData(form).get('color-stops-gradient'))
55
+ }}
56
+ ></ox-input-color-stops>
57
+ `,
58
+ form
59
+ )
60
+ </script>
61
+ </body>
62
+ </html>
package/demo/index-color.html ADDED
@@ -0,0 +1,35 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <style>
6
+ body {
7
+ background: #fafafa;
8
+ }
9
+ </style>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
11
+ </head>
12
+ <body>
13
+ <form id="demo"></form>
14
+
15
+ <script type="module">
16
+ import { html, render } from 'lit'
17
+ import '../dist/src/ox-input-color.js'
18
+
19
+ const form = document.querySelector('#demo')
20
+ render(
21
+ html`
22
+ <ox-input-color
23
+ value="navy"
24
+ name="color"
25
+ @change=${e => {
26
+ console.log(e.target.value)
27
+ console.log('form value', new FormData(form).get('color'))
28
+ }}
29
+ ></ox-input-color>
30
+ `,
31
+ form
32
+ )
33
+ </script>
34
+ </body>
35
+ </html>
package/demo/index-file.html ADDED
@@ -0,0 +1,41 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <style>
6
+ body {
7
+ background: #fafafa;
8
+ }
9
+
10
+ ox-input-file {
11
+ max-width: 500px;
12
+ max-height: 300px;
13
+ }
14
+ </style>
15
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" />
16
+ </head>
17
+ <body>
18
+ <form id="demo"></form>
19
+
20
+ <script type="module">
21
+ import { html, render } from 'lit'
22
+ import '../dist/src/ox-input-file.js'
23
+
24
+ const form = document.querySelector('#demo')
25
+ render(
26
+ html`
27
+ <ox-input-file
28
+ .value=${['https://www.hatiolab.com/assets/img/arch-thingsboard.png']}
29
+ name="file"
30
+ multiple
31
+ @change=${e => {
32
+ console.log(e.target.value)
33
+ console.log('form value', new FormData(form).get('file'))
34
+ }}
35
+ ></ox-input-file>
36
+ `,
37
+ form
38
+ )
39
+ </script>
40
+ </body>
41
+ </html>
package/demo/index-image.html CHANGED
@@ -29,7 +29,7 @@
29
29
  name="image"
30
30
  @change=${e => {
31
31
  console.log(e.target.value)
32
- console.log('form value', new FormData(form).get('angle'))
32
+ console.log('form value', new FormData(form).get('image'))
33
33
  }}
34
34
  ></ox-input-image>
35
35
  `,
package/demo/index-multiple-colors.html ADDED
@@ -0,0 +1,37 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <style>
6
+ body {
7
+ background: #fafafa;
8
+ }
9
+ </style>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
11
+ </head>
12
+ <body>
13
+ <form id="demo"></form>
14
+
15
+ <script type="module">
16
+ import { html, render } from 'lit'
17
+ import '../dist/src/ox-input-multiple-colors.js'
18
+
19
+ const form = document.querySelector('#demo')
20
+
21
+ const value = ['yello', 'white']
22
+ render(
23
+ html`
24
+ <ox-input-multiple-colors
25
+ name="multiple-colors"
26
+ .value=${value}
27
+ @change=${e => {
28
+ console.log(e.target.value)
29
+ console.log('form value', new FormData(form).get('multiple-colors'))
30
+ }}
31
+ ></ox-input-multiple-colors>
32
+ `,
33
+ form
34
+ )
35
+ </script>
36
+ </body>
37
+ </html>
package/demo/index-options.html ADDED
@@ -0,0 +1,43 @@
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()}></input>
38
+ `,
39
+ form
40
+ )
41
+ </script>
42
+ </body>
43
+ </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.html CHANGED
@@ -6,64 +6,24 @@
6
6
  body {
7
7
  background: #fafafa;
8
8
  }
9
-
10
- .customized {
11
- /* checkbox default */
12
- --ox-checkbox-fill-color: rgba(0, 0, 0, 0.1);
13
- --ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
14
- --ox-checkbox-border-radius: var(--border-radius, 4px);
15
- --ox-checkbox-size: 15px;
16
- --ox-checkbox-background-color: var(--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;
35
- }
36
9
  </style>
37
10
  </head>
38
11
  <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>
12
+ <a href="./index-3dish.html">3dish</a>
13
+ <a href="./index-options.html">options</a>
14
+ <a href="./index-angle.html">angle</a>
15
+ <a href="./index-color.html">color</a>
16
+ <a href="./index-multiple-colors.html">multiple-colors</a>
17
+ <a href="./index-color-stops.html">color-stops</a>
18
+ <a href="./index-color-gradient.html">color-gradient</a>
19
+ <a href="./index-barcode.html">barcode</a>
20
+ <a href="./index-button-radio.html">button-radio</a>
21
+ <a href="./index-checkbox.html">checkbox</a>
22
+ <a href="./index-code.html">code</a>
23
+ <a href="./index-image.html">image</a>
24
+ <a href="./index-file.html">file</a>
25
+ <a href="./index-range.html">range</a>
26
+ <a href="./index-select.html">select</a>
27
+ <a href="./index-stack.html">stack</a>
68
28
  </body>
69
29
  </html>
package/dist/src/index.d.ts CHANGED
@@ -1,11 +1,15 @@
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-input-angle.js';
3
+ export * from './ox-input-3dish.js';
4
+ export * from './ox-input-stack.js';
5
+ export * from './ox-input-barcode.js';
6
+ export * from './ox-buttons-radio.js';
7
+ export * from './ox-checkbox.js';
8
+ export * from './ox-select.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-file.js';
14
+ export * from './ox-input-image.js';
15
+ export * from './ox-input-scene-component-id.js';
package/dist/src/index.js CHANGED
@@ -1,12 +1,16 @@
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-input-angle.js';
3
+ export * from './ox-input-3dish.js';
4
+ export * from './ox-input-stack.js';
5
+ export * from './ox-input-barcode.js';
6
+ export * from './ox-buttons-radio.js';
7
+ export * from './ox-checkbox.js';
8
+ export * from './ox-select.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-file.js';
14
+ export * from './ox-input-image.js';
15
+ export * from './ox-input-scene-component-id.js';
12
16
  //# 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,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA","sourcesContent":["export * from './ox-form-field.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-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.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-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-scene-component-id.js'\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"]}