@operato/app 1.0.0-alpha.18 → 1.0.0-alpha.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/src/input/ox-input-background-pattern.d.ts +1 -1
- package/dist/src/input/ox-input-background-pattern.js +6 -3
- package/dist/src/input/ox-input-background-pattern.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +14 -14
- package/src/input/ox-input-background-pattern.ts +6 -3
- package/yarn-error.log +0 -17112
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,23 @@
|
|
|
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.20](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.19...v1.0.0-alpha.20) (2022-03-15)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/app
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [1.0.0-alpha.19](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.18...v1.0.0-alpha.19) (2022-03-14)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### :bug: Bug Fix
|
|
18
|
+
|
|
19
|
+
* image-selector in ox-input-background-pattern ([b88c6e1](https://github.com/hatiolab/operato/commit/b88c6e141d5d636bff4b29fbae3c790d80b641bc))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
6
23
|
## [1.0.0-alpha.18](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.17...v1.0.0-alpha.18) (2022-03-14)
|
|
7
24
|
|
|
8
25
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
4
|
import '@operato/i18n/ox-i18n.js';
|
|
5
|
-
import '@operato/attachment/ox-attachment-
|
|
5
|
+
import '@operato/attachment/ox-attachment-selector.js';
|
|
6
6
|
import { OxFormField } from '@operato/input';
|
|
7
7
|
export declare type BackgroundPatternOption = {
|
|
8
8
|
image?: HTMLImageElement | string;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
5
|
import '@operato/i18n/ox-i18n.js';
|
|
6
|
-
import '@operato/attachment/ox-attachment-
|
|
6
|
+
import '@operato/attachment/ox-attachment-selector.js';
|
|
7
7
|
import { css, html } from 'lit';
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
9
|
import { OxFormField } from '@operato/input';
|
|
@@ -22,11 +22,14 @@ let OxInputBackgroundPattern = class OxInputBackgroundPattern extends OxFormFiel
|
|
|
22
22
|
return html `
|
|
23
23
|
<label> <ox-i18n msgid="label.image" auto="">image</ox-i18n> </label>
|
|
24
24
|
|
|
25
|
-
<ox-
|
|
25
|
+
<ox-attachment-selector
|
|
26
26
|
value-key="image"
|
|
27
27
|
.value=${value.image || ''}
|
|
28
|
+
.properties=${{
|
|
29
|
+
category: 'image'
|
|
30
|
+
}}
|
|
28
31
|
custom-editor
|
|
29
|
-
></ox-
|
|
32
|
+
></ox-attachment-selector>
|
|
30
33
|
|
|
31
34
|
<label> <ox-i18n msgid="label.align" auto="">align</ox-i18n> </label>
|
|
32
35
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-background-pattern.js","sourceRoot":"","sources":["../../../src/input/ox-input-background-pattern.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,
|
|
1
|
+
{"version":3,"file":"ox-input-background-pattern.js","sourceRoot":"","sources":["../../../src/input/ox-input-background-pattern.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,+CAA+C,CAAA;AAEtD,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,gBAAgB,CAAA;AAY5C;;;;;;;;GAQG;AAGH,IAAa,wBAAwB,GAArC,MAAa,wBAAyB,SAAQ,WAAW;IA8DvD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAK,EAA8B,CAAA;QAE3D,OAAO,IAAI,CAAA;;;;;iBAKE,KAAK,CAAC,KAAK,IAAI,EAAE;sBACZ;YACZ,QAAQ,EAAE,OAAO;SAClB;;;;;;gEAMuD,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;AAnIQ,+BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAgC;AA5DhD,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAoIpC;SApIY,wBAAwB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/attachment/ox-attachment-selector.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from '@operato/input'\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 <ox-attachment-selector\n value-key=\"image\"\n .value=${value.image || ''}\n .properties=${{\n category: 'image'\n }}\n custom-editor\n ></ox-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"]}
|