npm - @fmsim/layout-view - Versions diffs - 2.0.0-beta.110 → 2.0.0-beta.111 - Mend

@fmsim/layout-view 2.0.0-beta.110 → 2.0.0-beta.111

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 (7) hide show

package/dist-client/data-grist/animation-map-editor.js CHANGED Viewed

@@ -3,6 +3,7 @@ import './ox-input-animation-map.js';
 import JSON5 from 'json5';
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 import { cloneDeep } from 'lodash-es';
 import { OxGristEditor } from '@operato/data-grist';
 import { i18next } from '@operato/i18n';
@@ -53,10 +54,23 @@ let AnimationMapEditor = class AnimationMapEditor extends OxGristEditor {
             value = {};
         }
         let latestValue = value;
+        const editorRef = createRef();
         const onConfirm = () => {
-            var _a;
+            var _a, _b, _c;
+            // key 없이 정의된 애니메이션이 있으면 확인(저장) 불가 — key 는 맵의 식별자.
+            if ((_b = (_a = editorRef.value) === null || _a === void 0 ? void 0 : _a.hasEmptyKey) === null || _b === void 0 ? void 0 : _b.call(_a)) {
+                document.dispatchEvent(new CustomEvent('notify', {
+                    detail: {
+                        level: 'warn',
+                        message: i18next.t('text.animation_key_required', {
+                            defaultValue: 'Enter a key for each animation definition.'
+                        })
+                    }
+                }));
+                return;
+            }
             confirmCallback(latestValue);
-            (_a = this.popup) === null || _a === void 0 ? void 0 : _a.close();
+            (_c = this.popup) === null || _c === void 0 ? void 0 : _c.close();
         };
         const template = html `
       <style>
@@ -68,6 +82,7 @@ let AnimationMapEditor = class AnimationMapEditor extends OxGristEditor {
       <div class="animation-map-popup" style="display:flex;flex-direction:row;height:100%;box-sizing:border-box;gap:0;">
         <div style="display:flex;flex-direction:column;flex:2;overflow:hidden;">
           <ox-input-animation-map
+            ${ref(editorRef)}
             .value=${value}
             @change=${(e) => { latestValue = e.detail; }}
             style="flex:1;overflow:auto;padding:12px 12px 0;"

package/dist-client/data-grist/animation-map-editor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"animation-map-editor.js","sourceRoot":"","sources":["../../client/data-grist/animation-map-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-input-animation-map.js'\n\nimport JSON5 from 'json5'\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { cloneDeep } from 'lodash-es'\n\nimport { OxGristEditor } from '@operato/data-grist'\nimport { i18next } from '@operato/i18n'\nimport { openPopup, PopupHandle } from '@operato/popup'\n\n@customElement('animation-map-editor')\nexport class AnimationMapEditor extends OxGristEditor {\n private popup?: PopupHandle\n\n get options() {\n const overidable = this.column.record?.options \|\| {}\n\n return {\n name: `Animation : ${this.record.name}`,\n objectified: false,\n ...overidable\n }\n }\n\n get editorTemplate() {\n const value = typeof this.value === 'object' ? JSON5.stringify(this.value) : this.value\n return html`<div tabindex=\"0\">${value \|\| ''}</div>`\n }\n\n _onclick(e: Event): void {\n e.stopPropagation()\n this.openSelector()\n }\n\n _onkeydown(e: KeyboardEvent): void {\n if (e.key === 'Enter') {\n e.stopPropagation()\n this.openSelector()\n }\n }\n\n async openSelector() {\n if (this.popup) {\n delete this.popup\n }\n\n const { name, objectified = false } = this.options \|\| {}\n\n const confirmCallback = (newval: any) => {\n this.dispatchEvent(\n new CustomEvent('field-change', {\n bubbles: true,\n composed: true,\n detail: {\n before: this.value,\n after: !objectified ? JSON5.stringify(newval, null, 2) : newval,\n record: this.record,\n column: this.column,\n row: this.row\n }\n })\n )\n }\n\n let value: any\n try {\n value = !objectified && typeof this.value === 'string' ? JSON5.parse(this.value) : cloneDeep(this.value \|\| {})\n } catch (e) {\n value = {}\n }\n\n let latestValue = value\n\n const onConfirm = () => {\n confirmCallback(latestValue)\n this.popup?.close()\n }\n\n const template = html`\n <style>\n .animation-map-popup ::-webkit-scrollbar { width: 5px; height: 5px; }\n .animation-map-popup ::-webkit-scrollbar-track { background-color: transparent; }\n .animation-map-popup ::-webkit-scrollbar-thumb { background-color: var(--md-sys-color-outline, #888); border-radius: 0; }\n .animation-map-popup ::-webkit-scrollbar-thumb:hover { background-color: var(--md-sys-color-outline-variant, #aaa); }\n </style>\n <div class=\"animation-map-popup\" style=\"display:flex;flex-direction:row;height:100%;box-sizing:border-box;gap:0;\">\n <div style=\"display:flex;flex-direction:column;flex:2;overflow:hidden;\">\n <ox-input-animation-map\n .value=${value}\n @change=${(e: CustomEvent) => { latestValue = e.detail }}\n style=\"flex:1;overflow:auto;padding:12px 12px 0;\"\n ></ox-input-animation-map>\n <div style=\"display:flex;justify-content:flex-end;gap:8px;padding:12px;\">\n <button @click=${onConfirm}\n style=\"padding:6px 16px;background:var(--md-sys-color-primary,#1976d2);color:#fff;border:none;border-radius:4px;cursor:pointer;\">\n ${i18next.t('button.confirm') \|\| 'Confirm'}\n </button>\n <button @click=${() => this.popup?.close()}\n style=\"padding:6px 16px;background:var(--md-sys-color-surface-variant,#e0e0e0);color:#333;border:none;border-radius:4px;cursor:pointer;\">\n ${i18next.t('button.cancel') \|\| 'Cancel'}\n </button>\n </div>\n </div>\n\n <div style=\"flex:1;padding:12px 16px;overflow:auto;border-left:1px solid var(--md-sys-color-outline-variant,#ddd);\n font-size:12px;line-height:1.6;color:var(--md-sys-color-on-surface-variant,#555);background:var(--md-sys-color-surface-container-low,#f4f4f4);\">\n <h3 style=\"margin:0 0 10px;font-size:15px;font-weight:700;color:var(--md-sys-color-primary,#1976d2);\">Animation Types</h3>\n <dl style=\"margin:0;padding:0;\">\n <dt style=\"font-weight:600;margin-top:6px;\">Rotation</dt>\n <dd style=\"margin:0 0 4px 8px;\">Theta(°) 각도만큼 회전. 360°이면 1회전.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Vibration</dt>\n <dd style=\"margin:0 0 4px 8px;\">Theta(°) 범위 내에서 좌우 진동.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Heartbeat</dt>\n <dd style=\"margin:0 0 4px 8px;\">Scale 비율로 확대/축소 반복. 1.2 = 20% 확대.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Moving</dt>\n <dd style=\"margin:0 0 4px 8px;\">X, Y 픽셀만큼 이동 후 복귀.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Fade</dt>\n <dd style=\"margin:0 0 4px 8px;\">Start/End Alpha(0~1) 사이에서 투명도 변화.</dd>\n </dl>\n\n <h3 style=\"margin:18px 0 10px;font-size:15px;font-weight:700;color:var(--md-sys-color-primary,#1976d2);\">Common Properties</h3>\n <dl style=\"margin:0;padding:0;\">\n <dt style=\"font-weight:600;margin-top:6px;\">Delay</dt>\n <dd style=\"margin:0 0 4px 8px;\">애니메이션 시작 전 대기 시간 (ms).</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Duration</dt>\n <dd style=\"margin:0 0 4px 8px;\">한 사이클 소요 시간 (ms). 1000 = 1초.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Interval</dt>\n <dd style=\"margin:0 0 4px 8px;\">반복 사이 대기 시간 (ms).</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Delta</dt>\n <dd style=\"margin:0 0 4px 8px;\">보간 함수. linear(균일), quad(가속), circ(원형), back(오버슈트), bounce(바운스), elastic(탄성).</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Ease</dt>\n <dd style=\"margin:0 0 4px 8px;\">이징 방향. in(시작 느림), out(끝 느림), inout(양쪽 느림).</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Repeat</dt>\n <dd style=\"margin:0 0 4px 8px;\">체크 시 무한 반복.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Autoplay</dt>\n <dd style=\"margin:0 0 4px 8px;\">체크 시 로드 즉시 자동 재생.</dd>\n </dl>\n\n </div>\n </div>\n `\n\n this.popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n title: `${name?.toUpperCase() \|\| 'ANIMATION MAP'}`\n })\n }\n}\n"]}
1	+ {"version":3,"file":"animation-map-editor.js","sourceRoot":"","sources":["../../client/data-grist/animation-map-editor.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAA;AAEpC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAErC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAe,MAAM,gBAAgB,CAAA;AAGhD,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,aAAa;IAGnD,IAAI,OAAO;;QACT,MAAM,UAAU,GAAG,CAAA,MAAA,IAAI,CAAC,MAAM,CAAC,MAAM,0CAAE,OAAO,KAAI,EAAE,CAAA;QAEpD,uBACE,IAAI,EAAE,eAAe,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EACvC,WAAW,EAAE,KAAK,IACf,UAAU,EACd;IACH,CAAC;IAED,IAAI,cAAc;QAChB,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAA;QACvF,OAAO,IAAI,CAAA,qBAAqB,KAAK,IAAI,EAAE,QAAQ,CAAA;IACrD,CAAC;IAED,QAAQ,CAAC,CAAQ;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,YAAY,EAAE,CAAA;IACrB,CAAC;IAED,UAAU,CAAC,CAAgB;QACzB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,YAAY,EAAE,CAAA;QACrB,CAAC;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,IAAI,CAAC,KAAK,CAAA;QACnB,CAAC;QAED,MAAM,EAAE,IAAI,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAExD,MAAM,eAAe,GAAG,CAAC,MAAW,EAAE,EAAE;YACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,MAAM,EAAE,IAAI,CAAC,KAAK;oBAClB,KAAK,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;oBAC/D,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,GAAG,EAAE,IAAI,CAAC,GAAG;iBACd;aACF,CAAC,CACH,CAAA;QACH,CAAC,CAAA;QAED,IAAI,KAAU,CAAA;QACd,IAAI,CAAC;YACH,KAAK,GAAG,CAAC,WAAW,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA;QAChH,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,KAAK,GAAG,EAAE,CAAA;QACZ,CAAC;QAED,IAAI,WAAW,GAAG,KAAK,CAAA;QAEvB,MAAM,SAAS,GAAG,SAAS,EAAO,CAAA;QAElC,MAAM,SAAS,GAAG,GAAG,EAAE;;YACrB,kDAAkD;YAClD,IAAI,MAAA,MAAA,SAAS,CAAC,KAAK,0CAAE,WAAW,kDAAI,EAAE,CAAC;gBACrC,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACxB,MAAM,EAAE;wBACN,KAAK,EAAE,MAAM;wBACb,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,6BAA6B,EAAE;4BAChD,YAAY,EAAE,4CAA4C;yBAC3D,CAAC;qBACH;iBACF,CAAC,CACH,CAAA;gBACD,OAAM;YACR,CAAC;YACD,eAAe,CAAC,WAAW,CAAC,CAAA;YAC5B,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,EAAE,CAAA;QACrB,CAAC,CAAA;QAED,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;;;;;;;cAUX,GAAG,CAAC,SAAS,CAAC;qBACP,KAAK;sBACJ,CAAC,CAAc,EAAE,EAAE,GAAG,WAAW,GAAG,CAAC,CAAC,MAAM,CAAA,CAAC,CAAC;;;;6BAIvC,SAAS;;gBAEtB,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,SAAS;;6BAE3B,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,EAAE,CAAA,EAAA;;gBAEtC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCjD,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,EAAE,KAAI,eAAe,EAAE;SACnD,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AA1JY,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CA0J9B","sourcesContent":["import './ox-input-animation-map.js'\n\nimport JSON5 from 'json5'\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\n\nimport { cloneDeep } from 'lodash-es'\n\nimport { OxGristEditor } from '@operato/data-grist'\nimport { i18next } from '@operato/i18n'\nimport { openPopup, PopupHandle } from '@operato/popup'\n\n@customElement('animation-map-editor')\nexport class AnimationMapEditor extends OxGristEditor {\n private popup?: PopupHandle\n\n get options() {\n const overidable = this.column.record?.options \|\| {}\n\n return {\n name: `Animation : ${this.record.name}`,\n objectified: false,\n ...overidable\n }\n }\n\n get editorTemplate() {\n const value = typeof this.value === 'object' ? JSON5.stringify(this.value) : this.value\n return html`<div tabindex=\"0\">${value \|\| ''}</div>`\n }\n\n _onclick(e: Event): void {\n e.stopPropagation()\n this.openSelector()\n }\n\n _onkeydown(e: KeyboardEvent): void {\n if (e.key === 'Enter') {\n e.stopPropagation()\n this.openSelector()\n }\n }\n\n async openSelector() {\n if (this.popup) {\n delete this.popup\n }\n\n const { name, objectified = false } = this.options \|\| {}\n\n const confirmCallback = (newval: any) => {\n this.dispatchEvent(\n new CustomEvent('field-change', {\n bubbles: true,\n composed: true,\n detail: {\n before: this.value,\n after: !objectified ? JSON5.stringify(newval, null, 2) : newval,\n record: this.record,\n column: this.column,\n row: this.row\n }\n })\n )\n }\n\n let value: any\n try {\n value = !objectified && typeof this.value === 'string' ? JSON5.parse(this.value) : cloneDeep(this.value \|\| {})\n } catch (e) {\n value = {}\n }\n\n let latestValue = value\n\n const editorRef = createRef<any>()\n\n const onConfirm = () => {\n // key 없이 정의된 애니메이션이 있으면 확인(저장) 불가 — key 는 맵의 식별자.\n if (editorRef.value?.hasEmptyKey?.()) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'warn',\n message: i18next.t('text.animation_key_required', {\n defaultValue: 'Enter a key for each animation definition.'\n })\n }\n })\n )\n return\n }\n confirmCallback(latestValue)\n this.popup?.close()\n }\n\n const template = html`\n <style>\n .animation-map-popup ::-webkit-scrollbar { width: 5px; height: 5px; }\n .animation-map-popup ::-webkit-scrollbar-track { background-color: transparent; }\n .animation-map-popup ::-webkit-scrollbar-thumb { background-color: var(--md-sys-color-outline, #888); border-radius: 0; }\n .animation-map-popup ::-webkit-scrollbar-thumb:hover { background-color: var(--md-sys-color-outline-variant, #aaa); }\n </style>\n <div class=\"animation-map-popup\" style=\"display:flex;flex-direction:row;height:100%;box-sizing:border-box;gap:0;\">\n <div style=\"display:flex;flex-direction:column;flex:2;overflow:hidden;\">\n <ox-input-animation-map\n ${ref(editorRef)}\n .value=${value}\n @change=${(e: CustomEvent) => { latestValue = e.detail }}\n style=\"flex:1;overflow:auto;padding:12px 12px 0;\"\n ></ox-input-animation-map>\n <div style=\"display:flex;justify-content:flex-end;gap:8px;padding:12px;\">\n <button @click=${onConfirm}\n style=\"padding:6px 16px;background:var(--md-sys-color-primary,#1976d2);color:#fff;border:none;border-radius:4px;cursor:pointer;\">\n ${i18next.t('button.confirm') \|\| 'Confirm'}\n </button>\n <button @click=${() => this.popup?.close()}\n style=\"padding:6px 16px;background:var(--md-sys-color-surface-variant,#e0e0e0);color:#333;border:none;border-radius:4px;cursor:pointer;\">\n ${i18next.t('button.cancel') \|\| 'Cancel'}\n </button>\n </div>\n </div>\n\n <div style=\"flex:1;padding:12px 16px;overflow:auto;border-left:1px solid var(--md-sys-color-outline-variant,#ddd);\n font-size:12px;line-height:1.6;color:var(--md-sys-color-on-surface-variant,#555);background:var(--md-sys-color-surface-container-low,#f4f4f4);\">\n <h3 style=\"margin:0 0 10px;font-size:15px;font-weight:700;color:var(--md-sys-color-primary,#1976d2);\">Animation Types</h3>\n <dl style=\"margin:0;padding:0;\">\n <dt style=\"font-weight:600;margin-top:6px;\">Rotation</dt>\n <dd style=\"margin:0 0 4px 8px;\">Theta(°) 각도만큼 회전. 360°이면 1회전.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Vibration</dt>\n <dd style=\"margin:0 0 4px 8px;\">Theta(°) 범위 내에서 좌우 진동.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Heartbeat</dt>\n <dd style=\"margin:0 0 4px 8px;\">Scale 비율로 확대/축소 반복. 1.2 = 20% 확대.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Moving</dt>\n <dd style=\"margin:0 0 4px 8px;\">X, Y 픽셀만큼 이동 후 복귀.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Fade</dt>\n <dd style=\"margin:0 0 4px 8px;\">Start/End Alpha(0~1) 사이에서 투명도 변화.</dd>\n </dl>\n\n <h3 style=\"margin:18px 0 10px;font-size:15px;font-weight:700;color:var(--md-sys-color-primary,#1976d2);\">Common Properties</h3>\n <dl style=\"margin:0;padding:0;\">\n <dt style=\"font-weight:600;margin-top:6px;\">Delay</dt>\n <dd style=\"margin:0 0 4px 8px;\">애니메이션 시작 전 대기 시간 (ms).</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Duration</dt>\n <dd style=\"margin:0 0 4px 8px;\">한 사이클 소요 시간 (ms). 1000 = 1초.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Interval</dt>\n <dd style=\"margin:0 0 4px 8px;\">반복 사이 대기 시간 (ms).</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Delta</dt>\n <dd style=\"margin:0 0 4px 8px;\">보간 함수. linear(균일), quad(가속), circ(원형), back(오버슈트), bounce(바운스), elastic(탄성).</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Ease</dt>\n <dd style=\"margin:0 0 4px 8px;\">이징 방향. in(시작 느림), out(끝 느림), inout(양쪽 느림).</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Repeat</dt>\n <dd style=\"margin:0 0 4px 8px;\">체크 시 무한 반복.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Autoplay</dt>\n <dd style=\"margin:0 0 4px 8px;\">체크 시 로드 즉시 자동 재생.</dd>\n </dl>\n\n </div>\n </div>\n `\n\n this.popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n title: `${name?.toUpperCase() \|\| 'ANIMATION MAP'}`\n })\n }\n}\n"]}

package/dist-client/data-grist/ox-input-animation-map.d.ts CHANGED Viewed

@@ -43,6 +43,13 @@ export declare class OxInputAnimationMap extends LitElement {
     get value(): AnimationMap;
     private _value;
     private _parsed;
+    /**
+     * 확인(저장) 가능 여부 검증 — key 없이 정의된 애니메이션이 하나라도 있으면 true.
+     *  1) 기존 entry 행에 key(공백 포함)가 비어 있는 경우
+     *  2) 새 항목 행에서 애니메이션 설정은 채웠는데 key 를 입력하지 않은 경우
+     * key 는 애니메이션 맵의 식별자라, 비면 저장 시 항목이 유실/중복되므로 확인을 막는다.
+     */
+    hasEmptyKey(): boolean;
     render(): import("lit-html").TemplateResult<1>;
     private _onConfigChange;
     private _onNewKeyChange;

package/dist-client/data-grist/ox-input-animation-map.js CHANGED Viewed

@@ -41,6 +41,30 @@ let OxInputAnimationMap = class OxInputAnimationMap extends LitElement {
         this.requestUpdate('value', old);
     }
     get value() { return this._value; }
+    /**
+     * 확인(저장) 가능 여부 검증 — key 없이 정의된 애니메이션이 하나라도 있으면 true.
+     *  1) 기존 entry 행에 key(공백 포함)가 비어 있는 경우
+     *  2) 새 항목 행에서 애니메이션 설정은 채웠는데 key 를 입력하지 않은 경우
+     * key 는 애니메이션 맵의 식별자라, 비면 저장 시 항목이 유실/중복되므로 확인을 막는다.
+     */
+    hasEmptyKey() {
+        var _a, _b, _c, _d, _e;
+        const rows = this.renderRoot.querySelectorAll('[data-record]');
+        for (const row of rows) {
+            const key = (_b = (_a = row.querySelector('[data-key]')) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim();
+            if (!key)
+                return true;
+        }
+        const newRow = this.renderRoot.querySelector('[data-record-new]');
+        if (newRow) {
+            const key = (_d = (_c = newRow.querySelector('[data-key]')) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.trim();
+            const cfg = (_e = newRow.querySelector('ox-input-animation-config')) === null || _e === void 0 ? void 0 : _e.value;
+            const hasCfg = cfg && typeof cfg === 'object' && Object.keys(cfg).length > 0;
+            if (!key && hasCfg)
+                return true;
+        }
+        return false;
+    }
     render() {
         this._parsed = this._parseEntries(this.value);
         return html `

package/dist-client/data-grist/ox-input-animation-map.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-input-animation-map.js","sourceRoot":"","sources":["../../client/data-grist/ox-input-animation-map.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Animation Map 에디터\n \n key-value 맵에서 value가 애니메이션 설정 객체인 경우를 위한 편집기.\n * 각 행은 key 입력 + ox-input-animation-config 폼으로 구성된다.\n \n value 구조 (실제 데이터):\n * {\n * \"CRITICAL\": \"{ animation: { type: 'vibration', duration: 1000, ... }, icon: { ... } }\",\n * \"WARN\": \"{ animation: { type: 'vibration', ... } }\",\n * \"default\": \"\"\n * }\n \n 각 entry value는 JSON5 string이며, 내부에 animation 키가 있으면 그 속성만 폼에 표시.\n * 저장 시 animation 외 다른 키(icon 등)는 보존됨.\n */\n\nimport '@material/web/icon/icon.js'\nimport './ox-input-animation-config.js'\n\nimport JSON5 from 'json5'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\ntype AnimationConfig = {\n type?: string\n delay?: number\n duration?: number\n interval?: number\n theta?: number\n scale?: number\n x?: number\n y?: number\n startAlpha?: number\n endAlpha?: number\n repeat?: boolean\n autoplay?: boolean\n delta?: string\n ease?: string\n}\n\ntype AnimationMap = { default?: any; [key: string]: AnimationConfig \| any }\n\n// 파싱된 entry: 원본 전체 객체와 animation config를 분리 보관\ntype ParsedEntry = {\n key: string\n animation: AnimationConfig\n full: any // 원본 파싱 결과 전체 (icon 등 보존용)\n isNested: boolean // animation 키가 있는 중첩 구조 여부\n}\n\n@customElement('ox-input-animation-map')\nexport class OxInputAnimationMap extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-size: var(--fontsize-default, 12px);\n\n --md-icon-size: 16px;\n }\n\n .entry {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: 6px;\n padding: 6px 8px;\n border: 1px solid var(--md-sys-color-outline-variant, #ddd);\n border-radius: 4px;\n background: var(--md-sys-color-surface-container, #f8f8f8);\n }\n\n .entry-key {\n flex: 0 0 80px;\n padding-top: 3px;\n }\n\n .entry-key input {\n width: 100%;\n box-sizing: border-box;\n border: 0;\n border-bottom: 1px solid transparent;\n padding: 3px 4px;\n font: var(--input-font, 12px sans-serif);\n font-weight: 600;\n color: var(--md-sys-color-on-primary-container, #333);\n background: transparent;\n }\n\n .entry-key input:focus {\n outline: none;\n border-bottom-color: var(--md-sys-color-primary, #1976d2);\n }\n\n .entry-value {\n flex: 1;\n min-width: 0;\n }\n\n .entry-action {\n flex: 0 0 auto;\n padding-top: 2px;\n }\n\n button {\n border: none;\n background: transparent;\n cursor: pointer;\n padding: 2px;\n color: var(--md-sys-color-on-surface-variant, #666);\n line-height: 0;\n }\n\n button:hover {\n color: var(--md-sys-color-primary, #1976d2);\n }\n\n .add-entry {\n opacity: 0.6;\n }\n\n .add-entry:focus-within {\n opacity: 1;\n }\n `\n\n @property({ type: Object })\n set value(v: AnimationMap) {\n const old = this._value\n this._value = this._normalize(v)\n this.requestUpdate('value', old)\n }\n get value(): AnimationMap { return this._value }\n private _value: AnimationMap = {}\n\n // 파싱된 entry 캐시 (원본 구조 보존용)\n private _parsed: ParsedEntry[] = []\n\n render() {\n this._parsed = this._parseEntries(this.value)\n\n return html`\n ${this._parsed.map(\n (item, idx) => html`\n <div class=\"entry\" data-record data-index=${idx}>\n <div class=\"entry-key\">\n <input type=\"text\" data-key .value=${item.key} placeholder=\"key\" />\n </div>\n <div class=\"entry-value\">\n <ox-input-animation-config\n .value=${item.animation}\n @change=${(e: CustomEvent) => this._onConfigChange(e, idx)}\n ></ox-input-animation-config>\n </div>\n <div class=\"entry-action\">\n <button @click=${() => this._delete(idx)} tabindex=\"-1\">\n <md-icon>remove</md-icon>\n </button>\n </div>\n </div>\n `\n )}\n ${keyed(\n Date.now(),\n html`\n <div class=\"entry add-entry\" data-record-new>\n <div class=\"entry-key\">\n <input type=\"text\" data-key value=\"\" placeholder=\"new key\" @change=${this._onNewKeyChange} />\n </div>\n <div class=\"entry-value\">\n <ox-input-animation-config .value=${{}}></ox-input-animation-config>\n </div>\n <div class=\"entry-action\">\n <button @click=${() => this._add()} tabindex=\"-1\">\n <md-icon>add</md-icon>\n </button>\n </div>\n </div>\n `\n )}\n `\n }\n\n private _onConfigChange(e: CustomEvent, idx: number) {\n e.stopPropagation()\n\n const entry = this._parsed[idx]\n if (!entry) return\n\n // 항상 { animation: config } 구조로 저장 (원본에 다른 키가 있으면 보존)\n const newEntryValue = entry.isNested\n ? { ...entry.full, animation: e.detail }\n : { animation: e.detail }\n\n this.value = { ...this.value, [entry.key]: newEntryValue }\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n private _onNewKeyChange = (e: Event) => {\n e.stopPropagation()\n const input = e.target as HTMLInputElement\n if (input.value) {\n this._add()\n }\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', (e: Event) => {\n const target = e.target as HTMLElement\n const entry = target.closest('[data-record]')\n if (!entry) return\n\n // key 변경 시 rebuild\n if (target.hasAttribute('data-key')) {\n e.stopPropagation()\n this._build()\n }\n })\n }\n\n private _build() {\n const records = this.renderRoot.querySelectorAll('[data-record]')\n const newMap: AnimationMap = {}\n\n records.forEach((record, idx) => {\n const key = (record.querySelector('[data-key]') as HTMLInputElement)?.value\n if (!key) return\n\n const configEl = record.querySelector('ox-input-animation-config') as any\n const animConfig = configEl?.value \|\| {}\n const entry = this._parsed[idx]\n\n newMap[key] = entry?.isNested\n ? { ...entry.full, animation: animConfig }\n : { animation: animConfig }\n })\n\n if (this.value?.default !== undefined) {\n newMap.default = this.value.default\n }\n\n this.value = newMap\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n private _add() {\n const newEntry = this.renderRoot.querySelector('[data-record-new]')\n if (!newEntry) return\n\n const key = (newEntry.querySelector('[data-key]') as HTMLInputElement)?.value\n if (!key) return\n\n const configEl = newEntry.querySelector('ox-input-animation-config') as any\n const config = configEl?.value \|\| {}\n\n this.value = { ...this.value, [key]: { animation: config } }\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n private _delete(idx: number) {\n const entry = this._parsed[idx]\n if (!entry) return\n\n const newMap = { ...this.value }\n delete newMap[entry.key]\n this.value = newMap\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n private _parseEntries(map: AnimationMap): ParsedEntry[] {\n const arr: ParsedEntry[] = []\n for (const key in map) {\n if (key === 'default') continue\n let val = map[key]\n\n // JSON5 string → object 파싱\n if (typeof val === 'string') {\n try { val = JSON5.parse(val) } catch (e) { val = {} }\n }\n\n if (typeof val !== 'object' \|\| val === null) {\n val = {}\n }\n\n // 중첩 구조 { animation: {...}, icon: {...} } 처리\n const isNested = 'animation' in val\n const animation = isNested ? (val.animation \|\| {}) : val\n\n arr.push({ key, animation, full: val, isNested })\n }\n return arr\n }\n\n // 입력 value의 모든 string entry를 object로 정규화 (JSON/JSON5 호환)\n private _normalize(map: AnimationMap): AnimationMap {\n if (!map \|\| typeof map !== 'object') return {}\n const result: AnimationMap = {}\n for (const key in map) {\n const val = map[key]\n if (typeof val === 'string' && val.trim()) {\n try { result[key] = JSON5.parse(val) } catch { result[key] = val }\n } else {\n result[key] = val\n }\n }\n return result\n }\n}\n"]}
1	+ {"version":3,"file":"ox-input-animation-map.js","sourceRoot":"","sources":["../../client/data-grist/ox-input-animation-map.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Animation Map 에디터\n \n key-value 맵에서 value가 애니메이션 설정 객체인 경우를 위한 편집기.\n * 각 행은 key 입력 + ox-input-animation-config 폼으로 구성된다.\n \n value 구조 (실제 데이터):\n * {\n * \"CRITICAL\": \"{ animation: { type: 'vibration', duration: 1000, ... }, icon: { ... } }\",\n * \"WARN\": \"{ animation: { type: 'vibration', ... } }\",\n * \"default\": \"\"\n * }\n \n 각 entry value는 JSON5 string이며, 내부에 animation 키가 있으면 그 속성만 폼에 표시.\n * 저장 시 animation 외 다른 키(icon 등)는 보존됨.\n /\n\nimport '@material/web/icon/icon.js'\nimport './ox-input-animation-config.js'\n\nimport JSON5 from 'json5'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\ntype AnimationConfig = {\n type?: string\n delay?: number\n duration?: number\n interval?: number\n theta?: number\n scale?: number\n x?: number\n y?: number\n startAlpha?: number\n endAlpha?: number\n repeat?: boolean\n autoplay?: boolean\n delta?: string\n ease?: string\n}\n\ntype AnimationMap = { default?: any; [key: string]: AnimationConfig \| any }\n\n// 파싱된 entry: 원본 전체 객체와 animation config를 분리 보관\ntype ParsedEntry = {\n key: string\n animation: AnimationConfig\n full: any // 원본 파싱 결과 전체 (icon 등 보존용)\n isNested: boolean // animation 키가 있는 중첩 구조 여부\n}\n\n@customElement('ox-input-animation-map')\nexport class OxInputAnimationMap extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-size: var(--fontsize-default, 12px);\n\n --md-icon-size: 16px;\n }\n\n .entry {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: 6px;\n padding: 6px 8px;\n border: 1px solid var(--md-sys-color-outline-variant, #ddd);\n border-radius: 4px;\n background: var(--md-sys-color-surface-container, #f8f8f8);\n }\n\n .entry-key {\n flex: 0 0 80px;\n padding-top: 3px;\n }\n\n .entry-key input {\n width: 100%;\n box-sizing: border-box;\n border: 0;\n border-bottom: 1px solid transparent;\n padding: 3px 4px;\n font: var(--input-font, 12px sans-serif);\n font-weight: 600;\n color: var(--md-sys-color-on-primary-container, #333);\n background: transparent;\n }\n\n .entry-key input:focus {\n outline: none;\n border-bottom-color: var(--md-sys-color-primary, #1976d2);\n }\n\n .entry-value {\n flex: 1;\n min-width: 0;\n }\n\n .entry-action {\n flex: 0 0 auto;\n padding-top: 2px;\n }\n\n button {\n border: none;\n background: transparent;\n cursor: pointer;\n padding: 2px;\n color: var(--md-sys-color-on-surface-variant, #666);\n line-height: 0;\n }\n\n button:hover {\n color: var(--md-sys-color-primary, #1976d2);\n }\n\n .add-entry {\n opacity: 0.6;\n }\n\n .add-entry:focus-within {\n opacity: 1;\n }\n `\n\n @property({ type: Object })\n set value(v: AnimationMap) {\n const old = this._value\n this._value = this._normalize(v)\n this.requestUpdate('value', old)\n }\n get value(): AnimationMap { return this._value }\n private _value: AnimationMap = {}\n\n // 파싱된 entry 캐시 (원본 구조 보존용)\n private _parsed: ParsedEntry[] = []\n\n /\n 확인(저장) 가능 여부 검증 — key 없이 정의된 애니메이션이 하나라도 있으면 true.\n * 1) 기존 entry 행에 key(공백 포함)가 비어 있는 경우\n * 2) 새 항목 행에서 애니메이션 설정은 채웠는데 key 를 입력하지 않은 경우\n * key 는 애니메이션 맵의 식별자라, 비면 저장 시 항목이 유실/중복되므로 확인을 막는다.\n */\n hasEmptyKey(): boolean {\n const rows = this.renderRoot.querySelectorAll('[data-record]')\n for (const row of rows) {\n const key = (row.querySelector('[data-key]') as HTMLInputElement)?.value?.trim()\n if (!key) return true\n }\n\n const newRow = this.renderRoot.querySelector('[data-record-new]')\n if (newRow) {\n const key = (newRow.querySelector('[data-key]') as HTMLInputElement)?.value?.trim()\n const cfg = (newRow.querySelector('ox-input-animation-config') as any)?.value\n const hasCfg = cfg && typeof cfg === 'object' && Object.keys(cfg).length > 0\n if (!key && hasCfg) return true\n }\n return false\n }\n\n render() {\n this._parsed = this._parseEntries(this.value)\n\n return html`\n ${this._parsed.map(\n (item, idx) => html`\n <div class=\"entry\" data-record data-index=${idx}>\n <div class=\"entry-key\">\n <input type=\"text\" data-key .value=${item.key} placeholder=\"key\" />\n </div>\n <div class=\"entry-value\">\n <ox-input-animation-config\n .value=${item.animation}\n @change=${(e: CustomEvent) => this._onConfigChange(e, idx)}\n ></ox-input-animation-config>\n </div>\n <div class=\"entry-action\">\n <button @click=${() => this._delete(idx)} tabindex=\"-1\">\n <md-icon>remove</md-icon>\n </button>\n </div>\n </div>\n `\n )}\n ${keyed(\n Date.now(),\n html`\n <div class=\"entry add-entry\" data-record-new>\n <div class=\"entry-key\">\n <input type=\"text\" data-key value=\"\" placeholder=\"new key\" @change=${this._onNewKeyChange} />\n </div>\n <div class=\"entry-value\">\n <ox-input-animation-config .value=${{}}></ox-input-animation-config>\n </div>\n <div class=\"entry-action\">\n <button @click=${() => this._add()} tabindex=\"-1\">\n <md-icon>add</md-icon>\n </button>\n </div>\n </div>\n `\n )}\n `\n }\n\n private _onConfigChange(e: CustomEvent, idx: number) {\n e.stopPropagation()\n\n const entry = this._parsed[idx]\n if (!entry) return\n\n // 항상 { animation: config } 구조로 저장 (원본에 다른 키가 있으면 보존)\n const newEntryValue = entry.isNested\n ? { ...entry.full, animation: e.detail }\n : { animation: e.detail }\n\n this.value = { ...this.value, [entry.key]: newEntryValue }\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n private _onNewKeyChange = (e: Event) => {\n e.stopPropagation()\n const input = e.target as HTMLInputElement\n if (input.value) {\n this._add()\n }\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', (e: Event) => {\n const target = e.target as HTMLElement\n const entry = target.closest('[data-record]')\n if (!entry) return\n\n // key 변경 시 rebuild\n if (target.hasAttribute('data-key')) {\n e.stopPropagation()\n this._build()\n }\n })\n }\n\n private _build() {\n const records = this.renderRoot.querySelectorAll('[data-record]')\n const newMap: AnimationMap = {}\n\n records.forEach((record, idx) => {\n const key = (record.querySelector('[data-key]') as HTMLInputElement)?.value\n if (!key) return\n\n const configEl = record.querySelector('ox-input-animation-config') as any\n const animConfig = configEl?.value \|\| {}\n const entry = this._parsed[idx]\n\n newMap[key] = entry?.isNested\n ? { ...entry.full, animation: animConfig }\n : { animation: animConfig }\n })\n\n if (this.value?.default !== undefined) {\n newMap.default = this.value.default\n }\n\n this.value = newMap\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n private _add() {\n const newEntry = this.renderRoot.querySelector('[data-record-new]')\n if (!newEntry) return\n\n const key = (newEntry.querySelector('[data-key]') as HTMLInputElement)?.value\n if (!key) return\n\n const configEl = newEntry.querySelector('ox-input-animation-config') as any\n const config = configEl?.value \|\| {}\n\n this.value = { ...this.value, [key]: { animation: config } }\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n private _delete(idx: number) {\n const entry = this._parsed[idx]\n if (!entry) return\n\n const newMap = { ...this.value }\n delete newMap[entry.key]\n this.value = newMap\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n private _parseEntries(map: AnimationMap): ParsedEntry[] {\n const arr: ParsedEntry[] = []\n for (const key in map) {\n if (key === 'default') continue\n let val = map[key]\n\n // JSON5 string → object 파싱\n if (typeof val === 'string') {\n try { val = JSON5.parse(val) } catch (e) { val = {} }\n }\n\n if (typeof val !== 'object' \|\| val === null) {\n val = {}\n }\n\n // 중첩 구조 { animation: {...}, icon: {...} } 처리\n const isNested = 'animation' in val\n const animation = isNested ? (val.animation \|\| {}) : val\n\n arr.push({ key, animation, full: val, isNested })\n }\n return arr\n }\n\n // 입력 value의 모든 string entry를 object로 정규화 (JSON/JSON5 호환)\n private _normalize(map: AnimationMap): AnimationMap {\n if (!map \|\| typeof map !== 'object') return {}\n const result: AnimationMap = {}\n for (const key in map) {\n const val = map[key]\n if (typeof val === 'string' && val.trim()) {\n try { result[key] = JSON5.parse(val) } catch { result[key] = val }\n } else {\n result[key] = val\n }\n }\n return result\n }\n}\n"]}