@fmsim/layout-view 2.0.0-beta.18 → 2.0.0-beta.19
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/dist-client/data-grist/ox-input-animation-config.js +12 -12
- package/dist-client/data-grist/ox-input-animation-config.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/dist-client/pages/theme/theme-editors.d.ts +0 -5
- package/dist-client/pages/theme/theme-editors.js +0 -61
- package/dist-client/pages/theme/theme-editors.js.map +0 -1
|
@@ -82,17 +82,17 @@ let OxInputAnimationConfig = class OxInputAnimationConfig extends LitElement {
|
|
|
82
82
|
<option value="out" ?selected=${v.ease === 'out'}>out</option>
|
|
83
83
|
<option value="inout" ?selected=${v.ease === 'inout'}>inout</option>
|
|
84
84
|
</select>
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
</
|
|
85
|
+
<label></label>
|
|
86
|
+
<div class="checkbox-row">
|
|
87
|
+
<label>
|
|
88
|
+
<input type="checkbox" value-key="repeat" .checked=${!!v.repeat} />
|
|
89
|
+
Repeat
|
|
90
|
+
</label>
|
|
91
|
+
<label>
|
|
92
|
+
<input type="checkbox" value-key="autoplay" .checked=${(_j = v.autoplay) !== null && _j !== void 0 ? _j : true} />
|
|
93
|
+
Autoplay
|
|
94
|
+
</label>
|
|
95
|
+
</div>
|
|
96
96
|
</div>
|
|
97
97
|
`;
|
|
98
98
|
}
|
|
@@ -169,7 +169,7 @@ OxInputAnimationConfig.styles = css `
|
|
|
169
169
|
.checkbox-row {
|
|
170
170
|
display: flex;
|
|
171
171
|
align-items: center;
|
|
172
|
-
gap:
|
|
172
|
+
gap: 24px;
|
|
173
173
|
}
|
|
174
174
|
|
|
175
175
|
.checkbox-row label {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-animation-config.js","sourceRoot":"","sources":["../../client/data-grist/ox-input-animation-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAoBpD,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IAA/C;;QA6DuB,UAAK,GAAoB,EAAE,CAAA;IAgHzD,CAAC;IA9GC,MAAM;;QACJ,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE1B,OAAO,IAAI,CAAA;;;;uCAIwB,CAAC,CAAC,CAAC,IAAI;+CACC,CAAC,CAAC,IAAI,KAAK,UAAU;gDACpB,CAAC,CAAC,IAAI,KAAK,WAAW;gDACtB,CAAC,CAAC,IAAI,KAAK,WAAW;6CACzB,CAAC,CAAC,IAAI,KAAK,QAAQ;2CACrB,CAAC,CAAC,IAAI,KAAK,MAAM;;;;wDAIJ,MAAM,CAAC,MAAA,CAAC,CAAC,KAAK,mCAAI,EAAE,CAAC;;;2DAGlB,MAAM,CAAC,MAAA,CAAC,CAAC,QAAQ,mCAAI,EAAE,CAAC;;;2DAGxB,MAAM,CAAC,MAAA,CAAC,CAAC,QAAQ,mCAAI,EAAE,CAAC;;UAEzE,CAAC,CAAC,IAAI,KAAK,UAAU,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW;YAC/C,CAAC,CAAC,IAAI,CAAA;;yDAEyC,CAAC,CAAC,KAAK;aACnD;YACH,CAAC,CAAC,EAAE;UACJ,CAAC,CAAC,IAAI,KAAK,WAAW;YACtB,CAAC,CAAC,IAAI,CAAA;;8DAE8C,MAAM,CAAC,MAAA,CAAC,CAAC,KAAK,mCAAI,EAAE,CAAC;aACtE;YACH,CAAC,CAAC,EAAE;UACJ,CAAC,CAAC,IAAI,KAAK,QAAQ;YACnB,CAAC,CAAC,IAAI,CAAA;;0DAE0C,MAAM,CAAC,MAAA,CAAC,CAAC,CAAC,mCAAI,EAAE,CAAC;;0DAEjB,MAAM,CAAC,MAAA,CAAC,CAAC,CAAC,mCAAI,EAAE,CAAC;aAC9D;YACH,CAAC,CAAC,EAAE;UACJ,CAAC,CAAC,IAAI,KAAK,MAAM;YACjB,CAAC,CAAC,IAAI,CAAA;;mEAEmD,MAAM,CAAC,MAAA,CAAC,CAAC,UAAU,mCAAI,EAAE,CAAC;;iEAE5B,MAAM,CAAC,MAAA,CAAC,CAAC,QAAQ,mCAAI,EAAE,CAAC;aAC5E;YACH,CAAC,CAAC,EAAE;;;;6CAI+B,CAAC,CAAC,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,QAAQ;2CACpC,CAAC,CAAC,KAAK,KAAK,MAAM;2CAClB,CAAC,CAAC,KAAK,KAAK,MAAM;2CAClB,CAAC,CAAC,KAAK,KAAK,MAAM;6CAChB,CAAC,CAAC,KAAK,KAAK,QAAQ;8CACnB,CAAC,CAAC,KAAK,KAAK,SAAS;;;;;yCAK1B,CAAC,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI;0CACxB,CAAC,CAAC,IAAI,KAAK,KAAK;4CACd,CAAC,CAAC,IAAI,KAAK,OAAO
|
|
1
|
+
{"version":3,"file":"ox-input-animation-config.js","sourceRoot":"","sources":["../../client/data-grist/ox-input-animation-config.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * 단일 애니메이션 설정 폼 컴포넌트\n *\n * AnimationConfig 객체 하나를 폼으로 편집한다.\n * type 선택에 따라 관련 필드만 표시된다.\n */\n\nimport '@operato/input/ox-input-angle.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.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\n@customElement('ox-input-animation-config')\nexport class OxInputAnimationConfig extends LitElement {\n static styles = css`\n :host {\n display: block;\n font-size: var(--fontsize-default, 12px);\n }\n\n .form {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 2px 6px;\n align-items: center;\n }\n\n label {\n font-size: 11px;\n color: var(--md-sys-color-on-surface-variant, #555);\n text-align: right;\n white-space: nowrap;\n }\n\n input,\n select {\n border: 0;\n border-bottom: 1px solid transparent;\n padding: 3px 4px;\n font: var(--input-font, 12px sans-serif);\n color: var(--md-sys-color-on-primary-container, #333);\n background: transparent;\n box-sizing: border-box;\n }\n\n input:focus,\n select:focus {\n outline: none;\n border-bottom-color: var(--md-sys-color-primary, #1976d2);\n }\n\n input[type='number'] {\n width: 80px;\n }\n\n .checkbox-row {\n display: flex;\n align-items: center;\n gap: 24px;\n }\n\n .checkbox-row label {\n display: flex;\n align-items: center;\n gap: 3px;\n cursor: pointer;\n }\n\n input[type='checkbox'] {\n width: auto;\n margin: 0;\n }\n `\n\n @property({ type: Object }) value: AnimationConfig = {}\n\n render() {\n const v = this.value || {}\n\n return html`\n <div class=\"form\">\n <label>Type</label>\n <select value-key=\"type\">\n <option value=\"\" ?selected=${!v.type}>None</option>\n <option value=\"rotation\" ?selected=${v.type === 'rotation'}>Rotation</option>\n <option value=\"vibration\" ?selected=${v.type === 'vibration'}>Vibration</option>\n <option value=\"heartbeat\" ?selected=${v.type === 'heartbeat'}>Heartbeat</option>\n <option value=\"moving\" ?selected=${v.type === 'moving'}>Moving</option>\n <option value=\"fade\" ?selected=${v.type === 'fade'}>Fade</option>\n </select>\n\n <label>Delay</label>\n <input type=\"number\" value-key=\"delay\" .value=${String(v.delay ?? '')} placeholder=\"ms\" />\n\n <label>Duration</label>\n <input type=\"number\" value-key=\"duration\" .value=${String(v.duration ?? '')} placeholder=\"ms\" />\n\n <label>Interval</label>\n <input type=\"number\" value-key=\"interval\" .value=${String(v.interval ?? '')} placeholder=\"ms\" />\n\n ${v.type === 'rotation' || v.type === 'vibration'\n ? html`\n <label>Theta</label>\n <ox-input-angle value-key=\"theta\" .value=${v.theta}></ox-input-angle>\n `\n : ''}\n ${v.type === 'heartbeat'\n ? html`\n <label>Scale</label>\n <input type=\"number\" value-key=\"scale\" .value=${String(v.scale ?? '')} />\n `\n : ''}\n ${v.type === 'moving'\n ? html`\n <label>X</label>\n <input type=\"number\" value-key=\"x\" .value=${String(v.x ?? '')} />\n <label>Y</label>\n <input type=\"number\" value-key=\"y\" .value=${String(v.y ?? '')} />\n `\n : ''}\n ${v.type === 'fade'\n ? html`\n <label>Start α</label>\n <input type=\"number\" value-key=\"startAlpha\" .value=${String(v.startAlpha ?? '')} />\n <label>End α</label>\n <input type=\"number\" value-key=\"endAlpha\" .value=${String(v.endAlpha ?? '')} />\n `\n : ''}\n\n <label>Delta</label>\n <select value-key=\"delta\">\n <option value=\"linear\" ?selected=${(v.delta || 'linear') === 'linear'}>linear</option>\n <option value=\"quad\" ?selected=${v.delta === 'quad'}>quad</option>\n <option value=\"circ\" ?selected=${v.delta === 'circ'}>circ</option>\n <option value=\"back\" ?selected=${v.delta === 'back'}>back</option>\n <option value=\"bounce\" ?selected=${v.delta === 'bounce'}>bounce</option>\n <option value=\"elastic\" ?selected=${v.delta === 'elastic'}>elastic</option>\n </select>\n\n <label>Ease</label>\n <select value-key=\"ease\">\n <option value=\"in\" ?selected=${(v.ease || 'in') === 'in'}>in</option>\n <option value=\"out\" ?selected=${v.ease === 'out'}>out</option>\n <option value=\"inout\" ?selected=${v.ease === 'inout'}>inout</option>\n </select>\n <label></label>\n <div class=\"checkbox-row\">\n <label>\n <input type=\"checkbox\" value-key=\"repeat\" .checked=${!!v.repeat} />\n Repeat\n </label>\n <label>\n <input type=\"checkbox\" value-key=\"autoplay\" .checked=${v.autoplay ?? true} />\n Autoplay\n </label>\n </div>\n </div>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n private _onChange(e: Event) {\n e.stopPropagation()\n\n const el = e.target as HTMLElement\n const key = el.getAttribute('value-key')\n if (!key) return\n\n let val: any\n if (el instanceof HTMLInputElement) {\n if (el.type === 'checkbox') val = el.checked\n else if (el.type === 'number') val = el.value ? Number(el.value) : undefined\n else val = el.value\n } else if (el instanceof HTMLSelectElement) {\n val = el.value\n } else {\n // custom element (ox-input-angle 등): value 프로퍼티 사용\n val = (el as any).value\n }\n\n this.value = { ...this.value, [key]: val }\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
|