@operato/app 1.0.0-beta.11 → 1.0.0-beta.14
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 +29 -0
- package/dist/src/filters-form/filter-resource-select.d.ts +4 -0
- package/dist/src/filters-form/filter-resource-select.js +78 -0
- package/dist/src/filters-form/filter-resource-select.js.map +1 -0
- package/dist/src/filters-form/index.d.ts +1 -0
- package/dist/src/filters-form/index.js +5 -0
- package/dist/src/filters-form/index.js.map +1 -0
- package/dist/src/grist-editor/ox-grist-renderer-resource-id.js +5 -2
- package/dist/src/grist-editor/ox-grist-renderer-resource-id.js.map +1 -1
- package/dist/src/grist-editor/ox-popup-partition-keys-input.js +3 -2
- package/dist/src/grist-editor/ox-popup-partition-keys-input.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +16 -16
- package/src/filters-form/filter-resource-select.ts +94 -0
- package/src/filters-form/index.ts +6 -0
- package/src/grist-editor/ox-grist-renderer-resource-id.ts +6 -2
- package/src/grist-editor/ox-popup-partition-keys-input.ts +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,35 @@
|
|
|
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-beta.14](https://github.com/hatiolab/operato/compare/v1.0.0-beta.13...v1.0.0-beta.14) (2022-05-19)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* ox-data-ooc-view ([a0a404c](https://github.com/hatiolab/operato/commit/a0a404c916e0a418e4e41fe9e1fe06fb9f7f84d9))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [1.0.0-beta.13](https://github.com/hatiolab/operato/compare/v1.0.0-beta.12...v1.0.0-beta.13) (2022-05-19)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* incorrect package.json scripts for storybooks ([8c8c405](https://github.com/hatiolab/operato/commit/8c8c405443247108b9c411b8161c008d9b6a2261))
|
|
21
|
+
* record-view ([ffcb397](https://github.com/hatiolab/operato/commit/ffcb397748efb64ce4e515f733b50f088ea1a093))
|
|
22
|
+
* storybook for inputs ([72f7992](https://github.com/hatiolab/operato/commit/72f7992d902528e3a5ca0f3f0f3897902b6b13bd))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
## [1.0.0-beta.12](https://github.com/hatiolab/operato/compare/v1.0.0-beta.11...v1.0.0-beta.12) (2022-05-13)
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
### :rocket: New Features
|
|
30
|
+
|
|
31
|
+
* storybook started ([90c08c9](https://github.com/hatiolab/operato/commit/90c08c9a15e5fe554baaa1becca07793e8434799))
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
6
35
|
## [1.0.0-beta.11](https://github.com/hatiolab/operato/compare/v1.0.0-beta.10...v1.0.0-beta.11) (2022-05-01)
|
|
7
36
|
|
|
8
37
|
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import '@operato/input/ox-checkbox.js';
|
|
2
|
+
import '../grist-editor/ox-selector-resource-id';
|
|
3
|
+
import { html } from 'lit-html';
|
|
4
|
+
import { i18next } from '@operato/i18n';
|
|
5
|
+
import { openPopup } from '@operato/layout';
|
|
6
|
+
function openResourceSelector(filter, value, confirmCallback) {
|
|
7
|
+
const { queryName, select, list, basicArgs, valueField = 'id' } = filter.options || {};
|
|
8
|
+
var actualValue;
|
|
9
|
+
if (typeof valueField === 'function') {
|
|
10
|
+
actualValue = valueField(value);
|
|
11
|
+
}
|
|
12
|
+
else {
|
|
13
|
+
actualValue = value === null || value === void 0 ? void 0 : value[valueField];
|
|
14
|
+
}
|
|
15
|
+
var template = html `
|
|
16
|
+
<ox-selector-resource-id
|
|
17
|
+
.value=${actualValue}
|
|
18
|
+
.confirmCallback=${confirmCallback}
|
|
19
|
+
.queryName=${queryName}
|
|
20
|
+
.select=${select}
|
|
21
|
+
.list=${list}
|
|
22
|
+
.basicArgs=${basicArgs}
|
|
23
|
+
.valueField=${valueField}
|
|
24
|
+
></ox-selector-resource-id>
|
|
25
|
+
`;
|
|
26
|
+
const popup = openPopup(template, {
|
|
27
|
+
backdrop: true,
|
|
28
|
+
size: 'large',
|
|
29
|
+
title: i18next.t('title.select_item')
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
export const FilterResourceSelect = (filter, value, owner) => {
|
|
33
|
+
const { name, operator = 'like' } = filter;
|
|
34
|
+
return operator === 'like'
|
|
35
|
+
? html ` <input
|
|
36
|
+
type="text"
|
|
37
|
+
name=${name}
|
|
38
|
+
.value=${value}
|
|
39
|
+
@change=${(e) => {
|
|
40
|
+
const input = e.target;
|
|
41
|
+
input.dispatchEvent(new CustomEvent('filter-change', {
|
|
42
|
+
bubbles: true,
|
|
43
|
+
composed: true,
|
|
44
|
+
detail: {
|
|
45
|
+
name,
|
|
46
|
+
operator,
|
|
47
|
+
value: input.value
|
|
48
|
+
}
|
|
49
|
+
}));
|
|
50
|
+
}}
|
|
51
|
+
/>`
|
|
52
|
+
: operator == 'in'
|
|
53
|
+
? html ``
|
|
54
|
+
: operator === 'eq'
|
|
55
|
+
? html `
|
|
56
|
+
<input
|
|
57
|
+
style="min-width: 100px; min-height: 24px"
|
|
58
|
+
type="text"
|
|
59
|
+
name=${name}
|
|
60
|
+
.value=${value}
|
|
61
|
+
readonly
|
|
62
|
+
@click=${(e) => {
|
|
63
|
+
e.stopPropagation();
|
|
64
|
+
const confirmCallback = (selected) => {
|
|
65
|
+
var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || {};
|
|
66
|
+
owner.dispatchEvent(new CustomEvent('filter-change', {
|
|
67
|
+
bubbles: true,
|
|
68
|
+
composed: true,
|
|
69
|
+
detail: selected ? selected[idField] : ''
|
|
70
|
+
}));
|
|
71
|
+
};
|
|
72
|
+
openResourceSelector(filter, value, confirmCallback);
|
|
73
|
+
}}
|
|
74
|
+
/>
|
|
75
|
+
`
|
|
76
|
+
: html ``;
|
|
77
|
+
};
|
|
78
|
+
//# sourceMappingURL=filter-resource-select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filter-resource-select.js","sourceRoot":"","sources":["../../../src/filters-form/filter-resource-select.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AACtC,OAAO,yCAAyC,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAG/B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAI3C,SAAS,oBAAoB,CAAC,MAAoB,EAAE,KAAU,EAAE,eAAiC;IAC/F,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,GAAG,IAAI,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAEtF,IAAI,WAAW,CAAA;IACf,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE;QACpC,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,CAAA;KAChC;SAAM;QACL,WAAW,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAG,UAAU,CAAC,CAAA;KAClC;IAED,IAAI,QAAQ,GAAG,IAAI,CAAA;;eAEN,WAAW;yBACD,eAAe;mBACrB,SAAS;gBACZ,MAAM;cACR,IAAI;mBACC,SAAS;oBACR,UAAU;;GAE3B,CAAA;IAED,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;QAChC,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;KACtC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACjF,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,MAAM,EAAE,GAAG,MAAM,CAAA;IAE1C,OAAO,QAAQ,KAAK,MAAM;QACxB,CAAC,CAAC,IAAI,CAAA;;eAEK,IAAI;iBACF,KAAK;kBACJ,CAAC,CAAc,EAAE,EAAE;YAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;YAC1C,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,eAAe,EAAE;gBAC/B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,IAAI;oBACJ,QAAQ;oBACR,KAAK,EAAE,KAAK,CAAC,KAAK;iBACnB;aACF,CAAC,CACH,CAAA;QACH,CAAC;SACA;QACL,CAAC,CAAC,QAAQ,IAAI,IAAI;YAClB,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,QAAQ,KAAK,IAAI;gBACnB,CAAC,CAAC,IAAI,CAAA;;;;iBAIO,IAAI;mBACF,KAAK;;mBAEL,CAAC,CAAQ,EAAE,EAAE;oBACpB,CAAC,CAAC,eAAe,EAAE,CAAA;oBAEnB,MAAM,eAAe,GAAG,CAAC,QAAmC,EAAE,EAAE;wBAC9D,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,SAAS,GAAG,MAAM,EAAE,gBAAgB,GAAG,aAAa,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;wBAEnG,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,eAAe,EAAE;4BAC/B,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;4BACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;yBAC1C,CAAC,CACH,CAAA;oBACH,CAAC,CAAA;oBAED,oBAAoB,CAAC,MAAM,EAAE,KAAK,EAAE,eAAe,CAAC,CAAA;gBACtD,CAAC;;OAEJ;gBACH,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;AACZ,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '../grist-editor/ox-selector-resource-id'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfig, FilterSelectRenderer } from '@operato/form'\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\ntype SelectedCallback = (value: { id: string; name: string; description: string }) => void\n\nfunction openResourceSelector(filter: FilterConfig, value: any, confirmCallback: SelectedCallback) {\n const { queryName, select, list, basicArgs, valueField = 'id' } = filter.options || {}\n\n var actualValue\n if (typeof valueField === 'function') {\n actualValue = valueField(value)\n } else {\n actualValue = value?.[valueField]\n }\n\n var template = html`\n <ox-selector-resource-id\n .value=${actualValue}\n .confirmCallback=${confirmCallback}\n .queryName=${queryName}\n .select=${select}\n .list=${list}\n .basicArgs=${basicArgs}\n .valueField=${valueField}\n ></ox-selector-resource-id>\n `\n\n const popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n title: i18next.t('title.select_item')\n })\n}\n\nexport const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner) => {\n const { name, operator = 'like' } = filter\n\n return operator === 'like'\n ? html` <input\n type=\"text\"\n name=${name}\n .value=${value}\n @change=${(e: CustomEvent) => {\n const input = e.target as HTMLInputElement\n input.dispatchEvent(\n new CustomEvent('filter-change', {\n bubbles: true,\n composed: true,\n detail: {\n name,\n operator,\n value: input.value\n }\n })\n )\n }}\n />`\n : operator == 'in'\n ? html``\n : operator === 'eq'\n ? html`\n <input\n style=\"min-width: 100px; min-height: 24px\"\n type=\"text\"\n name=${name}\n .value=${value}\n readonly\n @click=${(e: Event) => {\n e.stopPropagation()\n\n const confirmCallback = (selected?: { [field: string]: any }) => {\n var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || {}\n\n owner.dispatchEvent(\n new CustomEvent('filter-change', {\n bubbles: true,\n composed: true,\n detail: selected ? selected[idField] : ''\n })\n )\n }\n\n openResourceSelector(filter, value, confirmCallback)\n }}\n />\n `\n : html``\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { registerFilterRenderer } from '@operato/form';
|
|
2
|
+
import { FilterResourceSelect } from './filter-resource-select.js';
|
|
3
|
+
registerFilterRenderer('resource-object', [FilterResourceSelect]);
|
|
4
|
+
registerFilterRenderer('resource-id', [FilterResourceSelect]);
|
|
5
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/filters-form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAEtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAElE,sBAAsB,CAAC,iBAAiB,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAA;AACjE,sBAAsB,CAAC,aAAa,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAA","sourcesContent":["import { registerFilterRenderer } from '@operato/form'\n\nimport { FilterResourceSelect } from './filter-resource-select.js'\n\nregisterFilterRenderer('resource-object', [FilterResourceSelect])\nregisterFilterRenderer('resource-id', [FilterResourceSelect])\n"]}
|
|
@@ -3,7 +3,10 @@ export const OxGristRendererResourceId = (value, column, record, rowIndex, field
|
|
|
3
3
|
if (!value) {
|
|
4
4
|
return '';
|
|
5
5
|
}
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
const { nameField = 'name', descriptionField = 'description' } = column.record.options || {};
|
|
7
|
+
const name = value[nameField] || '';
|
|
8
|
+
const description = value[descriptionField] || '';
|
|
9
|
+
const suffix = description ? `(${description})` : '';
|
|
10
|
+
return html `<span>${name}${suffix}</span> `;
|
|
8
11
|
};
|
|
9
12
|
//# sourceMappingURL=ox-grist-renderer-resource-id.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-grist-renderer-resource-id.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-grist-renderer-resource-id.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,CAAC,MAAM,yBAAyB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACjG,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAA;KACV;IAED,
|
|
1
|
+
{"version":3,"file":"ox-grist-renderer-resource-id.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-grist-renderer-resource-id.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,CAAC,MAAM,yBAAyB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACjG,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAA;KACV;IAED,MAAM,EAAE,SAAS,GAAG,MAAM,EAAE,gBAAgB,GAAG,aAAa,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAE5F,MAAM,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;IACnC,MAAM,WAAW,GAAG,KAAK,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAA;IACjD,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAEpD,OAAO,IAAI,CAAA,SAAS,IAAI,GAAG,MAAM,UAAU,CAAA;AAC7C,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { FieldRenderer } from '@operato/data-grist'\n\nexport const OxGristRendererResourceId: FieldRenderer = (value, column, record, rowIndex, field) => {\n if (!value) {\n return ''\n }\n\n const { nameField = 'name', descriptionField = 'description' } = column.record.options || {}\n\n const name = value[nameField] || ''\n const description = value[descriptionField] || ''\n const suffix = description ? `(${description})` : ''\n\n return html`<span>${name}${suffix}</span> `\n}\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import '@operato/input/ox-input-partition-keys.js';
|
|
3
|
-
import {
|
|
3
|
+
import { css, html, LitElement } from 'lit';
|
|
4
4
|
import { customElement, property } from 'lit/decorators.js';
|
|
5
|
-
import { ScrollbarStyles } from '@operato/styles';
|
|
6
5
|
import { i18next } from '@operato/i18n';
|
|
6
|
+
import { ScrollbarStyles } from '@operato/styles';
|
|
7
7
|
let OxPopupPartitionKeysInput = class OxPopupPartitionKeysInput extends LitElement {
|
|
8
8
|
constructor() {
|
|
9
9
|
super(...arguments);
|
|
@@ -64,6 +64,7 @@ OxPopupPartitionKeysInput.styles = [
|
|
|
64
64
|
ox-input-partition-keys {
|
|
65
65
|
flex: 1;
|
|
66
66
|
overflow-y: auto;
|
|
67
|
+
padding: 10px;
|
|
67
68
|
}
|
|
68
69
|
|
|
69
70
|
span {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-popup-partition-keys-input.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-popup-partition-keys-input.ts"],"names":[],"mappings":";AAAA,OAAO,2CAA2C,CAAA;AAElD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ox-popup-partition-keys-input.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-popup-partition-keys-input.ts"],"names":[],"mappings":";AAAA,OAAO,2CAA2C,CAAA;AAElD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAa,yBAAyB,GAAtC,MAAa,yBAA0B,SAAQ,UAAU;IAAzD;;QAsC8B,cAAS,GAAW,QAAQ,CAAA;IAgD1D,CAAC;IA7CC,MAAM;QACJ,OAAO,IAAI,CAAA;wCACyB,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;6BAGzD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;6BACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEhF,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB;;;;;;;;;;UAUE;QAEF,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YACjD,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;SAChB;QAED,KAAK,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE;YAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;SACvB;QAED,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;CACF,CAAA;AArFQ,gCAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAA6B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAAwC;AAvCxD,yBAAyB;IADrC,aAAa,CAAC,+BAA+B,CAAC;GAClC,yBAAyB,CAsFrC;SAtFY,yBAAyB","sourcesContent":["import '@operato/input/ox-input-partition-keys.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-popup-partition-keys-input')\nexport class OxPopupPartitionKeysInput extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: #fff;\n\n width: var(--overlay-center-normal-width, 50%);\n height: var(--overlay-center-normal-height, 50%);\n }\n\n ox-input-partition-keys {\n flex: 1;\n overflow-y: auto;\n padding: 10px;\n }\n\n span {\n flex: 1;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: var(--primary-color);\n }\n\n .button-container {\n display: flex;\n margin-left: auto;\n }\n `\n ]\n\n @property({ type: Object }) value: any\n @property({ type: String }) valuetype: string = 'string'\n @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n render() {\n return html`\n <ox-input-partition-keys .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-partition-keys>\n\n <div class=\"button-container\">\n <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>\n <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>\n </div>\n `\n }\n\n private onChange(e: CustomEvent) {\n e.stopPropagation()\n\n /* \n 주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n layout의 구성에 변화가 발생하면, 다시 render된다.\n 이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n 이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n 만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n 따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)\n => \n 이런 이유로, Object.assign(...)을 사용하였다.\n */\n\n if (!this.value || typeof this.value !== 'object') {\n this.value = {}\n }\n\n for (let key in this.value) {\n delete this.value[key]\n }\n\n Object.assign(this.value, e.detail)\n }\n\n private onCancel(e: Event) {\n history.back()\n }\n\n private onConfirm(e: Event) {\n this.confirmCallback && this.confirmCallback(this.value)\n history.back()\n }\n}\n"]}
|