@cling-se/widget 0.17.0 → 1.0.0-beta.2

package/dist/{Index-BHJGfHm9.js → Index-DfLLA0ij.js}

@@ -1,25 +1,25 @@
-import { m as g } from "./mapFormMixin-CQgSN7dv.js";
-import { J as o, ax as u, b as h, n as l, ay as b, az as a, aA as n } from "./main-BgzLHIoo.js";
-import { s as v, p as y } from "./splitpanes-BHUVsCZF.js";
-import { t as w } from "./throttle-DT2UVOqm.js";
-import { W as m } from "./DocumentLayout-Dvr4zgyF.js";
-import { e as p } from "./dom-CWsqMElk.js";
-import { d as _ } from "./debounce-D0hKNU85.js";
-const x = `
+import { m as $ } from "./mapFormMixin-D3BihYWW.js";
+import { ac as v, d9 as C, aa as k, e as n, _, b as r, o as c, d as u, s as f, F as S, k as U, n as V, v as b, l as L, c as T, w as p, ao as B, da as N, db as y, dc as w, f as x, B as P } from "./main-Cb-nyil1.js";
+import { M as A, g as I } from "./splitpanes-D-ThFkeR.js";
+import { t as R } from "./throttle-D-bUGaVh.js";
+import { a as z } from "./DocumentLayout-CKSi42ev.js";
+import { e as j } from "./dom-CkTGWrfu.js";
+import { d as J } from "./debounce-DNl99Gyo.js";
+const F = `
 /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}html{box-sizing:border-box;font-family:sans-serif}*,::after,::before{box-sizing:inherit}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,p,pre{margin:0}button{background:0 0;padding:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset{margin:0;padding:0}ol,ul{margin:0}*,::after,::before{border-width:0;border-style:solid;border-color:#dae1e7}img{border-style:solid}[type=button],[type=reset],[type=submit],button{border-radius:0}textarea{resize:vertical}img{max-width:100%;height:auto}button,input,optgroup,select,textarea{font-family:inherit}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:inherit;opacity:.5}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:inherit;opacity:.5}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:inherit;opacity:.5}input::placeholder,textarea::placeholder{color:inherit;opacity:.5}[role=button],button{cursor:pointer}table{border-collapse:collapse}
-`, M = (e, { _document: t, id: s, firstRender: i }) => `
+`, W = (t, { _document: e, id: o, firstRender: l }) => `
     <!DOCTYPE html>
     <html>
         <head>
-            <style>${x}</style>
-            <style>${e.css}</style>
+            <style>${F}</style>
+            <style>${t.css}</style>
         </head>
         <body>
-            ${e.html}
+            ${t.html}
         </body>
         <script>
-          var doc = ${t};
-          var firstRender = ${i};
+          var doc = ${e};
+          var firstRender = ${l};
           function getOuterHeight(el) {
             var height = el.clientHeight;
             var computedStyle = window.getComputedStyle(el);
@@ -32,7 +32,7 @@ const x = `
 
           function sendHeightMessage() {
             var message = JSON.stringify({
-              id: '${s}',
+              id: '${o}',
               channel: 'customBlock',
               data: {
                 height: getOuterHeight(document.body),
@@ -58,9 +58,9 @@ const x = `
           });
         <\/script>
         <script type="module">
-          ${e.javascript}
+          ${t.javascript}
         <\/script>
-    </html>`, f = {
+    </html>`, E = {
   name: "CustomView",
   props: {
     html: {
@@ -100,46 +100,47 @@ const x = `
   },
   methods: {
     updateView({
-      firstRender: e = !1
+      firstRender: t = !1
     } = {}) {
-      if (!this.$refs.iframe)
-        return;
-      const t = this._document.getRawData();
-      this.setUsedPathValues(), this.$refs.iframe.srcdoc = M({
-        html: o(this.html, t),
-        css: o(this.css, t),
-        javascript: o(this.javascript, t)
+      if (!this.$refs.iframe) return;
+      const e = this._document.getRawData();
+      this.setUsedPathValues(), this.$refs.iframe.srcdoc = W({
+        html: v(this.html, e),
+        css: v(this.css, e),
+        javascript: v(this.javascript, e)
       }, {
-        _document: JSON.stringify(t),
-        id: this._uid,
-        firstRender: e
+        _document: JSON.stringify(e),
+        id: this.$.uid,
+        firstRender: t
       });
     },
     registerStoreListener() {
-      this.sendDocumentUpdate = w(this.sendDocMessage, 1e3), this.storeListenerUnsubscribe = this.$store.subscribe((e) => {
+      this.sendDocumentUpdate = R(this.sendDocMessage, 1e3), this.storeListenerUnsubscribe = this.$store.subscribe((t) => {
         const {
-          type: t
-        } = e;
-        (t === "forms/SET_FORM_VALUE" || t === "publicDocuments/SET_CURRENT_DOCUMENT_VALUE") && (this.sendDocumentUpdate(), ["html", "css", "javascript"].some((i) => {
-          const c = u(this[i]);
-          return Object.keys(c).some((d) => this.usedPathValues[d] !== h(this._document.getRawData(), d));
+          type: e
+        } = t;
+        (e === "forms/SET_FORM_VALUE" || e === "publicDocuments/SET_CURRENT_DOCUMENT_VALUE") && (this.sendDocumentUpdate(), ["html", "css", "javascript"].some((l) => {
+          const i = C(this[l]);
+          return Object.keys(i).some((s) => this.usedPathValues[s] !== k(this._document.getRawData(), s));
         }) && this.updateView());
       });
     },
     unregisterStoreListener() {
-      var e;
-      (e = this.storeListenerUnsubscribe) == null || e.call(this);
+      var t;
+      (t = this.storeListenerUnsubscribe) == null || t.call(this);
     },
     setUsedPathValues() {
-      ["html", "css", "javascript"].forEach((e) => {
-        const t = u(this[e]);
-        Object.keys(t).forEach((s) => {
-          this.usedPathValues[s] = h(this._document.getRawData(), s);
+      ["html", "css", "javascript"].forEach((t) => {
+        const e = C(this[t]);
+        Object.keys(e).forEach((o) => {
+          this.usedPathValues[o] = k(this._document.getRawData(), o);
         });
       });
     },
     // Update doc variable in iFrame
     sendDocMessage() {
+      const t = this.$refs.iframe;
+      if (!t || !t.contentWindow) return;
       const e = JSON.stringify({
         channel: "document",
         data: {
@@ -152,32 +153,31 @@ const x = `
   mounted() {
     this.updateView({
       firstRender: !0
-    }), this.sendDocMessage(), window.addEventListener("message", (e) => {
-      let t = null;
+    }), this.sendDocMessage(), window.addEventListener("message", (t) => {
+      let e = null;
       try {
-        t = JSON.parse(e.data);
+        e = JSON.parse(t.data);
       } catch {
       }
-      t && t.channel === "customBlock" && (t == null ? void 0 : t.id) === `${this._uid}` && this.$refs.iframe && (this.$refs.iframe.style.height = t.data.height + "px");
+      e && e.channel === "customBlock" && (e == null ? void 0 : e.id) === `${this.$.uid}` && this.$refs.iframe && (this.$refs.iframe.style.height = e.data.height + "px");
     }), this.registerStoreListener();
   },
-  beforeDestroy() {
-    var e, t;
-    this.unregisterStoreListener(), (t = (e = this.sendDocumentUpdate) == null ? void 0 : e.cancel) == null || t.call(e);
+  beforeUnmount() {
+    var t, e;
+    this.unregisterStoreListener(), (e = (t = this.sendDocumentUpdate) == null ? void 0 : t.cancel) == null || e.call(t);
   },
-  render(e) {
-    return e("iframe", {
-      attrs: {
-        id: this._uid,
-        sandbox: "allow-scripts",
-        frameBorder: "0"
-      },
+  render() {
+    return n("iframe", {
+      id: this.$.uid,
       ref: "iframe",
+      sandbox: "allow-scripts",
+      frameBorder: "0",
       class: "h-0 w-full"
-    });
+    }, null);
   }
-}, S = {
+}, q = {
   name: "MonacoEditor",
+  emits: ["change", "input"],
   props: {
     value: String,
     srcdoc: String,
@@ -219,14 +219,14 @@ const x = `
     }
   },
   components: {
-    WithDimensions: m
+    WithDimensions: z
   },
   watch: {
     options: {
       deep: !0,
-      handler(e) {
-        var t;
-        (t = this.editor) == null || t.updateOptions(e);
+      handler(t) {
+        var e;
+        (e = this.editor) == null || e.updateOptions(t);
       }
     },
     value() {
@@ -238,98 +238,101 @@ const x = `
     theme() {
       this.editor && window.monaco.editor.setTheme(this.theme);
     },
-    disabled(e) {
-      var t;
-      (t = this.editor) == null || t.updateOptions({
-        readOnly: e
+    disabled(t) {
+      var e;
+      (e = this.editor) == null || e.updateOptions({
+        readOnly: t
       });
     }
   },
   mounted() {
     this.loadMonaco().then(() => {
-      var e;
-      this.initMonaco(), (e = this.editor) == null || e.focus();
+      var t;
+      this.initMonaco(), (t = this.editor) == null || t.focus();
     });
   },
-  beforeDestroy() {
-    var e, t, s;
-    (e = this.editor) == null || e.dispose(), (s = (t = this.codeChangeEmitter) == null ? void 0 : t.cancel) == null || s.call(t);
+  beforeUnmount() {
+    var t, e, o;
+    (t = this.editor) == null || t.dispose(), (o = (e = this.codeChangeEmitter) == null ? void 0 : e.cancel) == null || o.call(e);
   },
-  render(e) {
-    return e(m, {
-      on: {
-        width: () => {
-          var t;
-          return (t = this.editor) == null ? void 0 : t.layout();
-        },
-        height: () => {
-          var t;
-          return (t = this.editor) == null ? void 0 : t.layout();
-        }
+  render() {
+    return n(z, {
+      onWidth: () => {
+        var t;
+        return (t = this.editor) == null ? void 0 : t.layout();
+      },
+      onHeight: () => {
+        var t;
+        return (t = this.editor) == null ? void 0 : t.layout();
       }
-    }, [e("div")]);
+    }, {
+      default: () => [n("div", {
+        ref: "editorContainer",
+        style: "width: 100%; height: 100%"
+      }, null)]
+    });
   },
   methods: {
     async loadMonaco() {
-      await p("https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/loader.js");
-      const e = {
+      await j("https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/loader.js");
+      const t = {
         paths: {
           vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs"
         }
       };
-      await new Promise((t, s) => {
-        window.require.config(e), window.require(["vs/editor/editor.main"], t, s);
-      }), await p("https://cdn.jsdelivr.net/npm/emmet-monaco-es@5.1.0/dist/emmet-monaco.js");
+      await new Promise((e, o) => {
+        window.require.config(t), window.require(["vs/editor/editor.main"], e, o);
+      }), await j("https://cdn.jsdelivr.net/npm/emmet-monaco-es@5.1.0/dist/emmet-monaco.js");
     },
     initMonaco() {
       window.emmetMonaco.emmetHTML(window.monaco), window.emmetMonaco.emmetCSS(window.monaco);
       const {
-        value: e,
-        language: t,
-        theme: s,
-        options: i
+        value: t,
+        language: e,
+        theme: o,
+        options: l
       } = this;
-      Object.assign(i, this._editorBeforeMount()), this.editor = window.monaco.editor.create(this.$el, {
-        value: e,
-        language: t,
-        theme: s,
+      Object.assign(l, this._editorBeforeMount()), this.editor = window.monaco.editor.create(this.$refs.editorContainer, {
+        value: t,
+        language: e,
+        theme: o,
         readOnly: this.disabled,
-        ...i
+        ...l
       }), this._editorMounted(this.editor);
     },
     getEditor() {
       return this.editor ? this.editor : null;
     },
-    setValue(e) {
-      const t = this.getEditor();
-      t == null || t.setValue(e);
+    setValue(t) {
+      const e = this.getEditor();
+      e == null || e.setValue(t);
     },
     getValue() {
-      const e = this.getEditor();
-      return e ? e.getValue() : "";
+      const t = this.getEditor();
+      return t ? t.getValue() : "";
     },
     _editorBeforeMount() {
       return this.editorBeforeMount(window.monaco) || {};
     },
-    _editorMounted(e) {
-      this.editorMounted(e, window.monaco), this.codeChangeEmitter = _((t, s) => this.emitChange(t, s), this.debounceTime), e.onDidChangeModelContent((t) => {
-        const s = this.getValue();
-        this.codeChangeEmitter(s, t);
+    _editorMounted(t) {
+      this.editorMounted(t, window.monaco), this.codeChangeEmitter = J((e, o) => this.emitChange(e, o), this.debounceTime), t.onDidChangeModelContent((e) => {
+        const o = this.getValue();
+        this.codeChangeEmitter(o, e);
       });
     },
-    emitChange(e, t) {
-      this.$emit("change", e, t), this.$emit("input", e);
+    emitChange(t, e) {
+      this.$emit("change", t, e), this.$emit("input", t);
     }
   }
-}, z = {
+}, Y = {
   html: '<path fill="#e44f26" d="M5.902 27.201L3.655 2h24.69l-2.25 25.197L15.985 30L5.902 27.201z"></path><path fill="#f1662a" d="m16 27.858l8.17-2.265l1.922-21.532H16v23.797z"></path><path fill="#ebebeb" d="M16 13.407h-4.09l-.282-3.165H16V7.151H8.25l.074.83l.759 8.517H16v-3.091zm0 8.027l-.014.004l-3.442-.929l-.22-2.465H9.221l.433 4.852l6.332 1.758l.014-.004v-3.216z"></path><path fill="#fff" d="M15.989 13.407v3.091h3.806l-.358 4.009l-3.448.93v3.216l6.337-1.757l.046-.522l.726-8.137l.076-.83h-7.185zm0-6.256v3.091h7.466l.062-.694l.141-1.567l.074-.83h-7.743z"></path>',
   css: '<path fill="#1572b6" d="M5.902 27.201L3.656 2h24.688l-2.249 25.197L15.985 30L5.902 27.201z"></path><path fill="#33a9dc" d="m16 27.858l8.17-2.265l1.922-21.532H16v23.797z"></path><path fill="#fff" d="M16 13.191h4.09l.282-3.165H16V6.935h7.75l-.074.829l-.759 8.518H16v-3.091z"></path><path fill="#ebebeb" d="m16.019 21.218l-.014.004l-3.442-.93l-.22-2.465H9.24l.433 4.853l6.331 1.758l.015-.004v-3.216z"></path><path fill="#fff" d="m19.827 16.151l-.372 4.139l-3.447.93v3.216l6.336-1.756l.047-.522l.537-6.007h-3.101z"></path><path fill="#ebebeb" d="M16.011 6.935v3.091H8.545l-.062-.695l-.141-1.567l-.074-.829h7.743zM16 13.191v3.091h-3.399l-.062-.695l-.14-1.567l-.074-.829H16z"></path>',
   javascript: '<path fill="#f5de19" d="M2 2h28v28H2z"></path><path d="M20.809 23.875a2.866 2.866 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.889 3.889 0 0 1 3.742 2.107L25 18.128A1.789 1.789 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.055 5.055 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z"></path>',
   json: '<path fill="currentColor" d="M31 11v10h-2l-2-6v6h-2V11h2l2 6v-6h2zm-9.666 10h-2.667A1.668 1.668 0 0 1 17 19.334v-6.667A1.668 1.668 0 0 1 18.666 11h2.667A1.668 1.668 0 0 1 23 12.666v6.667A1.668 1.668 0 0 1 21.334 21zM19 19h2v-6h-2zm-5.666 2H9v-2h4v-2h-2a2.002 2.002 0 0 1-2-2v-2.334A1.668 1.668 0 0 1 10.666 11H15v2h-4v2h2a2.002 2.002 0 0 1 2 2v2.333A1.668 1.668 0 0 1 13.334 21zm-8 0H2.667A1.668 1.668 0 0 1 1 19.334V17h2v2h2v-8h2v8.334A1.668 1.668 0 0 1 5.333 21z"></path>'
-}, k = {
+}, Z = {
   name: "Tabs",
   props: {
-    value: {
+    modelValue: {
       type: String,
       default: ""
     },
@@ -342,44 +345,73 @@ const x = `
       default: !1
     }
   },
+  emits: ["update:modelValue", "update:hLayout", "close"],
   data() {
     return {
-      icons: z
+      icons: Y
     };
   }
-};
-var C = function() {
-  var t = this, s = t._self._c;
-  return s("div", { staticClass: "tabs-root" }, [s("div", { staticClass: "simple-btn", on: { click: function(i) {
-    return t.$emit("close");
-  } } }, [s("CIcon", { attrs: { type: "x", size: "18" } })], 1), t._l(t.items, function(i) {
-    return s("div", { key: i.value, staticClass: "tab-item", class: {
-      "tab-item-active": t.value === i.value
-    }, on: { click: function(c) {
-      return t.$emit("input", i.value);
-    } } }, [s("svg", { staticStyle: { "margin-right": "0.5em" }, attrs: { xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink", "aria-hidden": "true", role: "img", width: "18", height: "18", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 32 32" }, domProps: { innerHTML: t._s(t.icons[i.value]) } }), s("span", { domProps: { textContent: t._s(i.text) } })]);
-  }), s("div", { staticClass: "simple-btn", staticStyle: { "margin-left": "auto" }, on: { click: function(i) {
-    return t.$emit("update:hLayout", !t.hLayout);
-  } } }, [s("CIcon", { staticStyle: { transition: "transform 150ms" }, style: {
-    transform: t.hLayout ? "rotate(0deg)" : "rotate(90deg)"
-  }, attrs: { type: "layout", size: "18" } })], 1)], 2);
-}, j = [], $ = /* @__PURE__ */ l(
-  k,
-  C,
-  j,
-  !1,
-  null,
-  "2b587c3e"
-);
-const L = $.exports, V = {
+}, K = { class: "tabs-root" }, G = ["onClick"], Q = ["innerHTML"], X = ["textContent"];
+function tt(t, e, o, l, i, s) {
+  const m = r("CIcon");
+  return c(), u("div", K, [
+    f("div", {
+      class: "simple-btn",
+      onClick: e[0] || (e[0] = (a) => t.$emit("close"))
+    }, [
+      n(m, {
+        type: "x",
+        size: "18"
+      })
+    ]),
+    (c(!0), u(S, null, U(o.items, (a) => (c(), u("div", {
+      key: a.value,
+      class: V([{
+        "tab-item-active": o.modelValue === a.value
+      }, "tab-item"]),
+      onClick: (g) => t.$emit("update:modelValue", a.value)
+    }, [
+      (c(), u("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        "xmlns:xlink": "http://www.w3.org/1999/xlink",
+        "aria-hidden": "true",
+        role: "img",
+        width: "18",
+        height: "18",
+        preserveAspectRatio: "xMidYMid meet",
+        viewBox: "0 0 32 32",
+        style: { "margin-right": "0.5em" },
+        innerHTML: i.icons[a.value]
+      }, null, 8, Q)),
+      f("span", {
+        textContent: b(a.text)
+      }, null, 8, X)
+    ], 10, G))), 128)),
+    f("div", {
+      style: { "margin-left": "auto" },
+      class: "simple-btn",
+      onClick: e[1] || (e[1] = (a) => t.$emit("update:hLayout", !o.hLayout))
+    }, [
+      n(m, {
+        style: L([{
+          transform: o.hLayout ? "rotate(0deg)" : "rotate(90deg)"
+        }, { transition: "transform 150ms" }]),
+        type: "layout",
+        size: "18"
+      }, null, 8, ["style"])
+    ])
+  ]);
+}
+const et = /* @__PURE__ */ _(Z, [["render", tt], ["__scopeId", "data-v-477b66fe"]]), ot = {
   name: "CustomModal",
   components: {
-    Tabs: L,
-    MonacoEditor: S,
-    Splitpanes: v,
-    Pane: y,
-    CustomView: f
+    Tabs: et,
+    MonacoEditor: q,
+    Splitpanes: A,
+    Pane: I,
+    CustomView: E
   },
+  emits: ["update:html", "update:css", "update:javascript", "update:json"],
   props: {
     _document: {
       type: Object,
@@ -408,7 +440,7 @@ const L = $.exports, V = {
         { text: "JS", value: "javascript" },
         { text: "Data", value: "json", disabled: !0 }
       ],
-      modalName: `customModal${this._uid}`
+      modalName: `customModal${this.$.uid}`
     };
   },
   computed: {
@@ -416,7 +448,7 @@ const L = $.exports, V = {
       return this[this.currentTab];
     },
     currentItem() {
-      return this.items.find(({ value: e }) => e === this.currentTab) || {};
+      return this.items.find(({ value: t }) => t === this.currentTab) || {};
     },
     json() {
       return JSON.stringify(this._document.getRawData(), null, 2);
@@ -427,34 +459,73 @@ const L = $.exports, V = {
       this.$modal.show(this.modalName);
     }
   }
-};
-var T = function() {
-  var t = this, s = t._self._c;
-  return s("portal", { attrs: { to: "modal" } }, [s("modal", { attrs: { name: t.modalName, adaptive: !0, width: "100%", height: "100%", classes: "overflow-visible primary" } }, [s("Splitpanes", { staticClass: "root font-inter", attrs: { horizontal: t.hLayout } }, [s("Pane", [s("Tabs", { attrs: { items: t.items, "h-layout": t.hLayout }, on: { "update:hLayout": function(i) {
-    t.hLayout = i;
-  }, "update:h-layout": function(i) {
-    t.hLayout = i;
-  }, close: function(i) {
-    return t.$modal.hide(t.modalName);
-  } }, model: { value: t.currentTab, callback: function(i) {
-    t.currentTab = i;
-  }, expression: "currentTab" } }), s("MonacoEditor", { staticStyle: { width: "100%", height: "100%" }, attrs: { language: t.currentTab, value: t.currentValue, disabled: t.currentItem.disabled }, on: { change: function(i) {
-    return t.$emit(`update:${t.currentTab}`, i);
-  } }, nativeOn: { keyup: function(i) {
-    i.stopPropagation();
-  } } })], 1), s("Pane", [s("div", { staticStyle: { height: "100%", width: "100%", overflow: "auto" } }, [s("CustomView", { attrs: { html: t.html, css: t.css, javascript: t.javascript, _document: t._document } })], 1)])], 1)], 1)], 1);
-}, E = [], H = /* @__PURE__ */ l(
-  V,
-  T,
-  E,
-  !1,
-  null,
-  "34c1270f"
-);
-const O = H.exports, r = b(), D = {
+}, st = { style: { height: "100%", width: "100%", overflow: "auto" } };
+function it(t, e, o, l, i, s) {
+  const m = r("Tabs"), a = r("MonacoEditor"), g = r("Pane"), d = r("CustomView"), H = r("Splitpanes"), O = r("modal"), D = r("portal");
+  return c(), T(D, { to: "modal" }, {
+    default: p(() => [
+      n(O, {
+        name: i.modalName,
+        adaptive: !0,
+        width: "100%",
+        height: "100%",
+        classes: "overflow-visible primary"
+      }, {
+        default: p(() => [
+          n(H, {
+            class: "root font-inter",
+            horizontal: i.hLayout
+          }, {
+            default: p(() => [
+              n(g, null, {
+                default: p(() => [
+                  n(m, {
+                    modelValue: i.currentTab,
+                    "onUpdate:modelValue": e[0] || (e[0] = (h) => i.currentTab = h),
+                    "h-layout": i.hLayout,
+                    "onUpdate:hLayout": e[1] || (e[1] = (h) => i.hLayout = h),
+                    items: i.items,
+                    onClose: e[2] || (e[2] = (h) => t.$modal.hide(i.modalName))
+                  }, null, 8, ["modelValue", "h-layout", "items"]),
+                  n(a, {
+                    style: { width: "100%", height: "100%" },
+                    language: i.currentTab,
+                    value: s.currentValue,
+                    disabled: s.currentItem.disabled,
+                    onChange: e[3] || (e[3] = (h) => t.$emit(`update:${i.currentTab}`, h)),
+                    onKeyup: e[4] || (e[4] = B(() => {
+                    }, ["stop"]))
+                  }, null, 8, ["language", "value", "disabled"])
+                ]),
+                _: 1
+              }),
+              n(g, null, {
+                default: p(() => [
+                  f("div", st, [
+                    n(d, {
+                      html: o.html,
+                      css: o.css,
+                      javascript: o.javascript,
+                      _document: o._document
+                    }, null, 8, ["html", "css", "javascript", "_document"])
+                  ])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["horizontal"])
+        ]),
+        _: 1
+      }, 8, ["name"])
+    ]),
+    _: 1
+  });
+}
+const nt = /* @__PURE__ */ _(ot, [["render", it], ["__scopeId", "data-v-6e225c74"]]), M = N(), at = {
   components: {
-    CustomView: f,
-    CustomModal: O
+    CustomView: E,
+    CustomModal: nt
   },
   i18nOptions: {
     namespaces: "Custom",
@@ -471,7 +542,7 @@ const O = H.exports, r = b(), D = {
       }
     }
   },
-  mixins: [g(["custom"])],
+  mixins: [$(["custom"])],
   inject: {
     setOpenDrawer: {
       type: Function,
@@ -485,38 +556,38 @@ const O = H.exports, r = b(), D = {
   },
   computed: {
     isEdited() {
-      return this.custom ? this.custom.html !== r.html || this.custom.css !== r.css || this.custom.javascript !== r.javascript : !1;
+      return this.custom ? this.custom.html !== M.html || this.custom.css !== M.css || this.custom.javascript !== M.javascript : !1;
     },
     html: {
       get() {
-        return this.custom.html ? a(this.custom.html) : "";
+        return this.custom.html ? y(this.custom.html) : "";
       },
-      set(e) {
+      set(t) {
         this.custom = {
           ...this.custom,
-          html: n(e)
+          html: w(t)
         };
       }
     },
     css: {
       get() {
-        return this.custom.css ? a(this.custom.css) : "";
+        return this.custom.css ? y(this.custom.css) : "";
       },
-      set(e) {
+      set(t) {
         this.custom = {
           ...this.custom,
-          css: n(e)
+          css: w(t)
         };
       }
     },
     javascript: {
       get() {
-        return this.custom.javascript ? a(this.custom.javascript) : "";
+        return this.custom.javascript ? y(this.custom.javascript) : "";
       },
-      set(e) {
+      set(t) {
         this.custom = {
           ...this.custom,
-          javascript: n(e)
+          javascript: w(t)
         };
       }
     }
@@ -529,31 +600,67 @@ const O = H.exports, r = b(), D = {
       this.$refs.customModal.show();
     }
   }
-};
-var P = function() {
-  var t = this, s = t._self._c;
-  return s("div", { staticClass: "custom-root", class: {
-    "is-empty": !t.isEdited
-  }, style: t.canEdit && { minHeight: "100px" }, on: { "&mouseover": function(i) {
-    t.showControls = !0;
-  }, "&mouseleave": function(i) {
-    t.showControls = !1;
-  } } }, [t.isEdited ? s("CustomView", { staticStyle: { width: "100%", "min-height": "0" }, attrs: { html: t.html, css: t.css, javascript: t.javascript, _document: t._document } }) : t._e(), t.isForm ? [t.canEdit && !t.isEdited ? s("div", { staticClass: "flex flex-col items-center justify-center text-center", staticStyle: { padding: "calc(3 * var(--rem)) calc(1 * var(--rem))", "line-height": "1.5", color: "white" } }, [s("div", { staticStyle: { "font-weight": "500", "margin-bottom": "0.25em", opacity: "0.98" }, domProps: { textContent: t._s(t.$t("title")) } }), s("div", { staticStyle: { "font-size": "14px", "margin-bottom": "calc(2 * var(--rem))", color: "hsl(218deg 24% 60%)", "max-width": "40ch" }, domProps: { textContent: t._s(t.$t("text")) } }), s("CButton", { staticStyle: { "font-size": "14px", "border-radius": "8px", padding: "12px 12px", height: "initial", "box-shadow": "rgb(0, 0, 0, 50%) 0px 10px 40px" }, attrs: { size: "normal", "icon-left": "code", type: "secondary" }, on: { click: t.openModal } }, [t._v(" " + t._s(t.$t("action")) + " ")])], 1) : t._e()] : t._e(), s("CustomModal", { ref: "customModal", attrs: { html: t.html, css: t.css, javascript: t.javascript, _document: t._document }, on: { "update:html": function(i) {
-    t.html = i;
-  }, "update:css": function(i) {
-    t.css = i;
-  }, "update:javascript": function(i) {
-    t.javascript = i;
-  } } })], 2);
-}, R = [], U = /* @__PURE__ */ l(
-  D,
-  P,
-  R,
-  !1,
-  null,
-  null
-);
-const q = U.exports;
+}, rt = {
+  key: 0,
+  class: "flex flex-col items-center justify-center text-center",
+  style: { padding: `calc(3 * var(--rem)) calc(1 * var(--rem))
+            calc(4 * var(--rem)) calc(1 * var(--rem))`, "line-height": "1.5", color: "white" }
+}, lt = ["textContent"], dt = ["textContent"];
+function ct(t, e, o, l, i, s) {
+  const m = r("CustomView"), a = r("CButton"), g = r("CustomModal");
+  return c(), u("div", {
+    class: V(["custom-root", {
+      "is-empty": !s.isEdited
+    }]),
+    style: L(t.canEdit && { minHeight: "100px" }),
+    onMouseoverPassive: e[3] || (e[3] = (d) => i.showControls = !0),
+    onMouseleavePassive: e[4] || (e[4] = (d) => i.showControls = !1)
+  }, [
+    s.isEdited ? (c(), T(m, {
+      key: 0,
+      html: s.html,
+      css: s.css,
+      javascript: s.javascript,
+      _document: t._document,
+      style: { width: "100%", "min-height": "0" }
+    }, null, 8, ["html", "css", "javascript", "_document"])) : x("", !0),
+    t.isForm ? (c(), u(S, { key: 1 }, [
+      t.canEdit && !s.isEdited ? (c(), u("div", rt, [
+        f("div", {
+          style: { "font-weight": "500", "margin-bottom": "0.25em", opacity: "0.98" },
+          textContent: b(t.$t("title"))
+        }, null, 8, lt),
+        f("div", {
+          style: { "font-size": "14px", "margin-bottom": "calc(2 * var(--rem))", color: "hsl(218deg 24% 60%)", "max-width": "40ch" },
+          textContent: b(t.$t("text"))
+        }, null, 8, dt),
+        n(a, {
+          size: "normal",
+          style: { "font-size": "14px", "border-radius": "8px", padding: "12px 12px", height: "initial", "box-shadow": "rgb(0, 0, 0, 50%) 0px 10px 40px" },
+          "icon-left": "code",
+          type: "secondary",
+          onClick: s.openModal
+        }, {
+          default: p(() => [
+            P(b(t.$t("action")), 1)
+          ]),
+          _: 1
+        }, 8, ["onClick"])
+      ])) : x("", !0)
+    ], 64)) : x("", !0),
+    n(g, {
+      ref: "customModal",
+      html: s.html,
+      "onUpdate:html": e[0] || (e[0] = (d) => s.html = d),
+      css: s.css,
+      "onUpdate:css": e[1] || (e[1] = (d) => s.css = d),
+      javascript: s.javascript,
+      "onUpdate:javascript": e[2] || (e[2] = (d) => s.javascript = d),
+      _document: t._document
+    }, null, 8, ["html", "css", "javascript", "_document"])
+  ], 38);
+}
+const vt = /* @__PURE__ */ _(at, [["render", ct]]);
 export {
-  q as default
+  vt as default
 };