@operato/input 1.0.0-alpha.5 → 1.0.0-alpha.9

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 (61) hide show
  1. package/CHANGELOG.md +33 -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-multiple-colors.html +37 -0
  9. package/demo/index.html +4 -0
  10. package/dist/src/index.d.ts +15 -11
  11. package/dist/src/index.js +15 -11
  12. package/dist/src/index.js.map +1 -1
  13. package/dist/src/ox-input-background-pattern.d.ts +31 -0
  14. package/dist/src/ox-input-background-pattern.js +147 -0
  15. package/dist/src/ox-input-background-pattern.js.map +1 -0
  16. package/dist/src/ox-input-code.d.ts +4 -4
  17. package/dist/src/ox-input-code.js +8 -8
  18. package/dist/src/ox-input-code.js.map +1 -1
  19. package/dist/src/ox-input-color-gradient.d.ts +26 -0
  20. package/dist/src/ox-input-color-gradient.js +318 -0
  21. package/dist/src/ox-input-color-gradient.js.map +1 -0
  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 +1 -1
  29. package/dist/src/ox-input-data.js +1 -1
  30. package/dist/src/ox-input-data.js.map +1 -1
  31. package/dist/src/ox-input-fill-style.d.ts +42 -0
  32. package/dist/src/ox-input-fill-style.js +323 -0
  33. package/dist/src/ox-input-fill-style.js.map +1 -0
  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-scene-component-id.d.ts +11 -0
  38. package/dist/src/ox-input-scene-component-id.js +68 -0
  39. package/dist/src/ox-input-scene-component-id.js.map +1 -0
  40. package/dist/src/ox-input-stack.d.ts +1 -1
  41. package/dist/src/ox-input-stack.js +1 -1
  42. package/dist/src/ox-input-stack.js.map +1 -1
  43. package/dist/tsconfig.tsbuildinfo +1 -1
  44. package/package.json +14 -7
  45. package/src/index.ts +15 -11
  46. package/src/ox-input-background-pattern.ts.xxx +163 -0
  47. package/src/ox-input-code.ts +9 -10
  48. package/src/ox-input-color-gradient.ts.xxx +343 -0
  49. package/src/ox-input-color-stops.ts +499 -0
  50. package/src/ox-input-color.ts +323 -0
  51. package/src/ox-input-data.ts +2 -2
  52. package/src/ox-input-fill-style.ts.xxx +361 -0
  53. package/src/ox-input-keyvalues.ts.ing +10 -10
  54. package/src/ox-input-multiple-colors.ts +113 -0
  55. package/src/ox-input-ranges.ts.ing +12 -12
  56. package/src/{ox-input-id.ts → ox-input-scene-component-id.ts} +1 -1
  57. package/src/ox-input-stack.ts +1 -1
  58. package/translations/en.json +1 -0
  59. package/translations/ko.json +1 -0
  60. package/translations/ms.json +1 -0
  61. package/translations/zh.json +1 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,39 @@
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.9](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.8...v1.0.0-alpha.9) (2022-03-12)
7
+
8
+
9
+ ### :rocket: New Features
10
+
11
+ * settled concept for input, property-editor, grist-editor, so on ([0c9e1d0](https://github.com/hatiolab/operato/commit/0c9e1d054c7aef5d965868242cf471667af7a3c3))
12
+
13
+
14
+
15
+ ## [1.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.7...v1.0.0-alpha.8) (2022-03-11)
16
+
17
+ **Note:** Version bump only for package @operato/input
18
+
19
+
20
+
21
+
22
+
23
+ ## [1.0.0-alpha.7](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.6...v1.0.0-alpha.7) (2022-03-11)
24
+
25
+ **Note:** Version bump only for package @operato/input
26
+
27
+
28
+
29
+
30
+
31
+ ## [1.0.0-alpha.6](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.5...v1.0.0-alpha.6) (2022-03-11)
32
+
33
+ **Note:** Version bump only for package @operato/input
34
+
35
+
36
+
37
+
38
+
6
39
  ## [1.0.0-alpha.5](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2022-03-11)
7
40
 
8
41
 
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-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.html CHANGED
@@ -12,6 +12,10 @@
12
12
  <a href="./index-3dish.html">3dish</a>
13
13
  <a href="./index-options.html">options</a>
14
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>
15
19
  <a href="./index-barcode.html">barcode</a>
16
20
  <a href="./index-button-radio.html">button-radio</a>
17
21
  <a href="./index-checkbox.html">checkbox</a>
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-input-background-pattern.d.ts ADDED
@@ -0,0 +1,31 @@
1
+ /**
2
+ * @license Copyright © HatioLab Inc. All rights reserved.
3
+ */
4
+ import '@operato/i18n/ox-i18n.js';
5
+ import './things-editor-attachment-selector';
6
+ import { OxFormField } from './ox-form-field';
7
+ export declare type BackgroundPatternOption = {
8
+ image?: HTMLImageElement | string;
9
+ align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom';
10
+ offsetX?: number;
11
+ offsetY?: number;
12
+ width?: number;
13
+ height?: number;
14
+ fitPattern?: boolean;
15
+ };
16
+ /**
17
+ * 컴포넌트의 fill pattern을 편집하는 element
18
+ *
19
+ * Example:
20
+ * <ox-input-background-pattern
21
+ * @change="${e => { this.pattern = e.target.value }}"
22
+ * .value=${this.pattern}"
23
+ * ></ox-input-background-pattern>
24
+ */
25
+ export declare class OxInputBackgroundPattern extends OxFormField {
26
+ static styles: import("lit").CSSResult;
27
+ value?: BackgroundPatternOption;
28
+ render(): import("lit-html").TemplateResult<1>;
29
+ firstUpdated(): void;
30
+ _onChange(e: Event): void;
31
+ }
package/dist/src/ox-input-background-pattern.js ADDED
@@ -0,0 +1,147 @@
1
+ /**
2
+ * @license Copyright © HatioLab Inc. All rights reserved.
3
+ */
4
+ import { __decorate } from "tslib";
5
+ import '@operato/i18n/ox-i18n.js';
6
+ import './things-editor-attachment-selector';
7
+ import { css, html } from 'lit';
8
+ import { customElement, property } from 'lit/decorators.js';
9
+ import { OxFormField } from './ox-form-field';
10
+ /**
11
+ * 컴포넌트의 fill pattern을 편집하는 element
12
+ *
13
+ * Example:
14
+ * <ox-input-background-pattern
15
+ * @change="${e => { this.pattern = e.target.value }}"
16
+ * .value=${this.pattern}"
17
+ * ></ox-input-background-pattern>
18
+ */
19
+ let OxInputBackgroundPattern = class OxInputBackgroundPattern extends OxFormField {
20
+ static { this.styles = css `
21
+ :host,
22
+ .grid-10 {
23
+ display: grid;
24
+ grid-template-columns: repeat(10, 1fr);
25
+ grid-gap: 5px;
26
+ grid-auto-rows: minmax(24px, auto);
27
+
28
+ align-items: center;
29
+ }
30
+
31
+ * {
32
+ align-self: stretch;
33
+ }
34
+
35
+ label {
36
+ grid-column: span 2;
37
+ text-align: right;
38
+ text-transform: capitalize;
39
+
40
+ align-self: center;
41
+ }
42
+
43
+ .grid-10 {
44
+ grid-column: span 10;
45
+ }
46
+
47
+ select,
48
+ input,
49
+ [custom-editor] {
50
+ grid-column: span 8;
51
+ }
52
+
53
+ select {
54
+ height: 100%;
55
+ border: 1px solid rgba(0, 0, 0, 0.2);
56
+ }
57
+
58
+ input[type='checkbox'] {
59
+ grid-column: 3 / 4;
60
+ align-self: center;
61
+ }
62
+
63
+ input[type='checkbox'] ~ label {
64
+ grid-column: span 7;
65
+ text-align: left;
66
+ }
67
+
68
+ .grid-10 > input[type='number'] {
69
+ grid-column: span 3;
70
+ border: 1px solid rgba(0, 0, 0, 0.2);
71
+ }
72
+
73
+ .grid-10 > label {
74
+ grid-column: span 2;
75
+ text-align: right;
76
+ }
77
+ `; }
78
+ render() {
79
+ const value = this.value || {};
80
+ return html `
81
+ <label> <ox-i18n msgid="label.image" auto="">image</ox-i18n> </label>
82
+
83
+ <things-editor-attachment-selector
84
+ value-key="image"
85
+ .value=${value.image || ''}
86
+ custom-editor
87
+ ></things-editor-attachment-selector>
88
+
89
+ <label> <ox-i18n msgid="label.align" auto="">align</ox-i18n> </label>
90
+
91
+ <select value-key="align" class="select-content" .value=${value.align}>
92
+ <option value="left-top">Left Top</option>
93
+ <option value="top">Top</option>
94
+ <option value="right-top">Right Top</option>
95
+ <option value="left">Left</option>
96
+ <option value="center">Center</option>
97
+ <option value="right">Right</option>
98
+ <option value="left-bottom">Left Bottom</option>
99
+ <option value="bottom">Bottom</option>
100
+ <option value="right-bottom">Right Bottom</option>
101
+ </select>
102
+
103
+ <div class="grid-10">
104
+ <label> <ox-i18n msgid="label.offset-x" auto="">offsetX</ox-i18n> </label>
105
+ <input type="number" value-key="offsetX" .value=${value.offsetX} />
106
+
107
+ <label> <ox-i18n msgid="label.offset-y" auto="">offsetY</ox-i18n> </label>
108
+ <input type="number" value-key="offsetY" .value=${value.offsetY} />
109
+
110
+ <label> <ox-i18n msgid="label.width" auto="">width</ox-i18n> </label>
111
+ <input type="number" value-key="width" .value=${value.width} />
112
+
113
+ <label> <ox-i18n msgid="label.height" auto="">height</ox-i18n> </label>
114
+ <input type="number" value-key="height" .value=${value.height} />
115
+ </div>
116
+
117
+ <div class="grid-10">
118
+ <input value-key="fitPattern" type="checkbox" .checked=${value.fitPattern} required />
119
+ <label> <ox-i18n msgid="label.fit" auto="">Fit</ox-i18n> </label>
120
+ </div>
121
+ `;
122
+ }
123
+ firstUpdated() {
124
+ this.renderRoot.addEventListener('change', this._onChange.bind(this));
125
+ }
126
+ _onChange(e) {
127
+ var element = e.target;
128
+ var key = element.getAttribute('value-key');
129
+ var value = element.value;
130
+ if (key == 'fitPattern') {
131
+ value = element.checked;
132
+ }
133
+ this.value = {
134
+ ...this.value,
135
+ [key]: value
136
+ };
137
+ this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
138
+ }
139
+ };
140
+ __decorate([
141
+ property({ type: Object })
142
+ ], OxInputBackgroundPattern.prototype, "value", void 0);
143
+ OxInputBackgroundPattern = __decorate([
144
+ customElement('ox-input-background-pattern')
145
+ ], OxInputBackgroundPattern);
146
+ export { OxInputBackgroundPattern };
147
+ //# sourceMappingURL=ox-input-background-pattern.js.map
package/dist/src/ox-input-background-pattern.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-input-background-pattern.js","sourceRoot":"","sources":["../../src/ox-input-background-pattern.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAY7C;;;;;;;;GAQG;AAGH,IAAa,wBAAwB,GAArC,MAAa,wBAAyB,SAAQ,WAAW;aAChD,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDlB,CAAA;IAID,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAK,EAA8B,CAAA;QAE3D,OAAO,IAAI,CAAA;;;;;iBAKE,KAAK,CAAC,KAAK,IAAI,EAAE;;;;;;gEAM8B,KAAK,CAAC,KAAK;;;;;;;;;;;;;;0DAcjB,KAAK,CAAC,OAAO;;;0DAGb,KAAK,CAAC,OAAO;;;wDAGf,KAAK,CAAC,KAAK;;;yDAGV,KAAK,CAAC,MAAM;;;;iEAIJ,KAAK,CAAC,UAAU;;;KAG5E,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAC3C,IAAI,KAAK,GAAQ,OAAO,CAAC,KAAK,CAAA;QAE9B,IAAI,GAAG,IAAI,YAAY,EAAE;YACvB,KAAK,GAAG,OAAO,CAAC,OAAO,CAAA;SACxB;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAI,CAAC,EAAE,KAAK;SACd,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;CACF,CAAA;AArE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAgC;AA5DhD,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAiIpC;SAjIY,wBAAwB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport './things-editor-attachment-selector'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\nexport type BackgroundPatternOption = {\n image?: HTMLImageElement | string\n align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'\n offsetX?: number\n offsetY?: number\n width?: number\n height?: number\n fitPattern?: boolean\n}\n\n/**\n * 컴포넌트의 fill pattern을 편집하는 element\n *\n * Example:\n * <ox-input-background-pattern\n * @change=\"${e => { this.pattern = e.target.value }}\"\n * .value=${this.pattern}\"\n * ></ox-input-background-pattern>\n */\n\n@customElement('ox-input-background-pattern')\nexport class OxInputBackgroundPattern extends OxFormField {\n static styles = css`\n :host,\n .grid-10 {\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n\n align-items: center;\n }\n\n * {\n align-self: stretch;\n }\n\n label {\n grid-column: span 2;\n text-align: right;\n text-transform: capitalize;\n\n align-self: center;\n }\n\n .grid-10 {\n grid-column: span 10;\n }\n\n select,\n input,\n [custom-editor] {\n grid-column: span 8;\n }\n\n select {\n height: 100%;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n\n input[type='checkbox'] {\n grid-column: 3 / 4;\n align-self: center;\n }\n\n input[type='checkbox'] ~ label {\n grid-column: span 7;\n text-align: left;\n }\n\n .grid-10 > input[type='number'] {\n grid-column: span 3;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n\n .grid-10 > label {\n grid-column: span 2;\n text-align: right;\n }\n `\n\n @property({ type: Object }) value?: BackgroundPatternOption\n\n render() {\n const value = this.value || ({} as BackgroundPatternOption)\n\n return html`\n <label> <ox-i18n msgid=\"label.image\" auto=\"\">image</ox-i18n> </label>\n\n <things-editor-attachment-selector\n value-key=\"image\"\n .value=${value.image || ''}\n custom-editor\n ></things-editor-attachment-selector>\n\n <label> <ox-i18n msgid=\"label.align\" auto=\"\">align</ox-i18n> </label>\n\n <select value-key=\"align\" class=\"select-content\" .value=${value.align}>\n <option value=\"left-top\">Left Top</option>\n <option value=\"top\">Top</option>\n <option value=\"right-top\">Right Top</option>\n <option value=\"left\">Left</option>\n <option value=\"center\">Center</option>\n <option value=\"right\">Right</option>\n <option value=\"left-bottom\">Left Bottom</option>\n <option value=\"bottom\">Bottom</option>\n <option value=\"right-bottom\">Right Bottom</option>\n </select>\n\n <div class=\"grid-10\">\n <label> <ox-i18n msgid=\"label.offset-x\" auto=\"\">offsetX</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetX\" .value=${value.offsetX} />\n\n <label> <ox-i18n msgid=\"label.offset-y\" auto=\"\">offsetY</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetY\" .value=${value.offsetY} />\n\n <label> <ox-i18n msgid=\"label.width\" auto=\"\">width</ox-i18n> </label>\n <input type=\"number\" value-key=\"width\" .value=${value.width} />\n\n <label> <ox-i18n msgid=\"label.height\" auto=\"\">height</ox-i18n> </label>\n <input type=\"number\" value-key=\"height\" .value=${value.height} />\n </div>\n\n <div class=\"grid-10\">\n <input value-key=\"fitPattern\" type=\"checkbox\" .checked=${value.fitPattern} required />\n <label> <ox-i18n msgid=\"label.fit\" auto=\"\">Fit</ox-i18n> </label>\n </div>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n _onChange(e: Event) {\n var element = e.target as HTMLInputElement\n var key = element.getAttribute('value-key')\n var value: any = element.value\n\n if (key == 'fitPattern') {\n value = element.checked\n }\n\n this.value = {\n ...this.value,\n [key!]: value\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\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
package/dist/src/ox-input-code.js.map CHANGED
@@ -1 +1 @@
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 FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'\nimport CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'\nimport NightThemeStyle from '!!text-loader!codemirror/theme/night.css'\nimport CodeMirror from 'codemirror'\nimport { css, html, PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n\n <things-editor-code .value=${text} mode=${mode} tab-size=\"4\" tab-as-space=\"true\">\n </things-editor-code>\n*/\n@customElement('ox-input-code')\nexport default 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"]}
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"]}