@kong-ui-public/monaco-editor 0.8.1 → 0.8.2

package/README.md

@@ -97,27 +97,65 @@ The theme of the Monaco Editor instance.
 
 The programming language for syntax highlighting. Supports all languages available in [Shiki](https://shiki.matsu.io/languages).
 
+#### `options`
+
+- type: `Partial<editor.IStandaloneEditorConstructionOptions>`
+- required: `false`
+- default: `undefined`
+
+Additional Monaco Editor options to customize the editor further. See [Monaco Editor API](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html) for available options.
+
 #### `loading`
 
 - type: `boolean`
 - required: `false`
 - default: `false`
 
-Whether the editor is in a loading state. When true, displays a loading overlay.
+Indicates that the editor is waiting for external data in addition to its own internal initialization.
 
-#### `options`
+> [!WARNING]
+> This prop does not control the Monaco Editor's initialization lifecycle.
 
-- type: `Partial<editor.IStandaloneEditorConstructionOptions>`
+The editor manages its own internal loading state while Monaco and syntax highlighting are being initialized.
+The loading prop is additive, it allows consumers to keep the loading overlay visible if additional async work (such as fetching content) is still in progress after the editor itself is ready.
+
+The loading overlay is shown when either:
+- The editor is still initializing internally, or
+- The loading prop is set to true
+
+#### `showLoadingState`
+
+- type: `boolean`
 - required: `false`
-- default: `undefined`
+- default: `true`
 
-Additional Monaco Editor options to customize the editor further. See [Monaco Editor API](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html) for available options.
+Controls whether the loading state overlay is rendered.
+
+> [!NOTE]
+> This does not affect editor initialization. When set to false, the editor will still initialize and emit ready, but no loading UI will be displayed.
+
+Useful for constrained layouts where the loading overlay would be visually disruptive.
+
+#### `showEmptyState`
+
+- type: `boolean`
+- required: `false`
+- default: `true`
+
+Controls whether the empty state overlay is rendered when the editor has no content.
+
+> [!NOTE]
+> This does not affect editor initialization. When set to false, the editor will still initialize and emit ready, but no empty state UI will be displayed even if the content is empty.
+
+Useful for embedded or compact layouts where the empty state overlay is unnecessary.
 
 ### Events
 
 #### `ready`
 
-Emitted when the Monaco editor instance is initialized and ready for use.
+Emitted when the Monaco editor instance has finished initializing and is ready for interaction.
+
+This event reflects only the editor's internal readiness, not any external loading state controlled by the loading prop.
 
 **Payload:**
 

package/dist/runtime/monaco-editor.es.js

@@ -1,10 +1,10 @@
-import { toValue as C, ref as Q, shallowRef as X, reactive as Y, watch as x, onMounted as Z, onActivated as ee, onBeforeUnmount as te, onWatcherCleanup as oe, defineComponent as z, resolveComponent as ae, createBlock as O, openBlock as E, createSlots as ne, withCtx as D, resolveDynamicComponent as re, mergeModels as R, useModel as se, useTemplateRef as ie, computed as T, createElementBlock as le, normalizeClass as ce, createElementVNode as de, renderSlot as W, createVNode as N, Transition as U, createCommentVNode as B, unref as v } from "vue";
+import { toValue as C, ref as Q, shallowRef as X, reactive as Y, watch as D, onMounted as Z, onActivated as ee, onBeforeUnmount as te, onWatcherCleanup as oe, defineComponent as z, resolveComponent as ae, createBlock as T, openBlock as E, createSlots as ne, withCtx as L, resolveDynamicComponent as re, mergeModels as W, useModel as se, useTemplateRef as ie, computed as I, createElementBlock as le, normalizeClass as ce, createElementVNode as de, renderSlot as B, createCommentVNode as O, createVNode as N, Transition as U, unref as y } from "vue";
 import { ProgressIcon as ue, CodeblockIcon as ge } from "@kong/icons";
 import * as m from "monaco-editor";
 import { shikiToMonaco as me } from "@shikijs/monaco";
 import { getSingletonHighlighter as fe, bundledLanguages as pe, bundledThemes as he } from "shiki";
-import { createI18n as ve, i18nTComponent as ye } from "@kong-ui-public/i18n";
-const Se = "'JetBrains Mono', Consolas, monospace", be = "12px", Ce = "500", Ee = "20px", Me = Object.freeze({
+import { createI18n as ye, i18nTComponent as ve } from "@kong-ui-public/i18n";
+const Se = "'JetBrains Mono', Consolas, monospace", be = "12px", Ce = "500", Ee = "20px", we = Object.freeze({
   autoClosingQuotes: "always",
   automaticLayout: !0,
   // Auto resize layout
@@ -61,7 +61,7 @@ const Se = "'JetBrains Mono', Consolas, monospace", be = "12px", Ce = "500", Ee
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
 const P = () => {
 };
-function we(o, t) {
+function Me(o, t) {
   function e(...a) {
     return new Promise((i, r) => {
       Promise.resolve(o(() => t.apply(this, a), {
@@ -73,7 +73,7 @@ function we(o, t) {
   }
   return e;
 }
-function _e(o, t = {}) {
+function ke(o, t = {}) {
   let e, a, i = P;
   const r = (s) => {
     clearTimeout(s), i(), i = P;
@@ -92,11 +92,11 @@ function _e(o, t = {}) {
 }
 // @__NO_SIDE_EFFECTS__
 function Oe(o, t = 200, e = {}) {
-  return we(_e(t, e), o);
+  return Me(ke(t, e), o);
 }
-const F = "[monaco-editor] [lifecycle]", y = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new Map(), I = /* @__PURE__ */ new WeakMap();
-function ke(o) {
-  let t = y.get(o.source);
+const F = "[monaco-editor] [lifecycle]", v = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new WeakMap();
+function Te(o) {
+  let t = v.get(o.source);
   if (!t) {
     let e;
     switch (o.type) {
@@ -112,22 +112,22 @@ function ke(o) {
     t = {
       disposables: /* @__PURE__ */ new Set(),
       scopeListener: e
-    }, y.set(o.source, t);
+    }, v.set(o.source, t);
   }
   return t;
 }
 function H(o) {
-  const t = y.get(o);
-  t && (t.scopeListener.dispose(), y.delete(o));
+  const t = v.get(o);
+  t && (t.scopeListener.dispose(), v.delete(o));
 }
-function A(o, t) {
-  ke(t).disposables.add(o);
+function V(o, t) {
+  Te(t).disposables.add(o);
 }
-function j(o, t) {
-  const e = y.get(t.source);
+function A(o, t) {
+  const e = v.get(t.source);
   e && (e.disposables.delete(o), e.disposables.size === 0 && H(t.source));
 }
-function Te(o) {
+function _e(o) {
   const t = [];
   if (o.forEach((e) => {
     try {
@@ -145,29 +145,29 @@ function Ie(o, t) {
   var l, f;
   let e = o, a = S.get(e);
   if (!a) {
-    const s = I.get(o);
+    const s = x.get(o);
     s && (e = s, a = S.get(s));
   }
   if (a)
-    return ((l = a.scope) == null ? void 0 : l.type) === (t == null ? void 0 : t.type) && ((f = a.scope) == null ? void 0 : f.source) === (t == null ? void 0 : t.source) || (a.scope && j(a.decorated, a.scope), t ? (A(a.decorated, t), a.scope = t) : a.scope = void 0), a.decorated;
+    return ((l = a.scope) == null ? void 0 : l.type) === (t == null ? void 0 : t.type) && ((f = a.scope) == null ? void 0 : f.source) === (t == null ? void 0 : t.source) || (a.scope && A(a.decorated, a.scope), t ? (V(a.decorated, t), a.scope = t) : a.scope = void 0), a.decorated;
   const i = e.dispose, r = {
     dispose: () => {
       const s = S.get(e);
       if (s)
-        return s.scope && j(r, s.scope), S.delete(e), I.delete(r), i.call(e);
+        return s.scope && A(r, s.scope), S.delete(e), x.delete(r), i.call(e);
     }
   };
-  return S.set(e, { decorated: r, scope: t }), I.set(r, e), t && A(r, t), r;
+  return S.set(e, { decorated: r, scope: t }), x.set(r, e), t && V(r, t), r;
 }
-function V(o, t) {
+function j(o, t) {
   return Ie(t, { type: "editor", source: o });
 }
 function $(o) {
-  const t = y.get(o);
+  const t = v.get(o);
   if (!t) return;
   const e = Array.from(t.disposables);
   try {
-    Te(e);
+    _e(e);
   } catch (a) {
     console.warn(`${F} Encountered errors while disposing scoped disposables:`, a, ", Source:", o);
   }
@@ -212,8 +212,8 @@ function De(o, t) {
     var n;
     return (n = e.value) == null ? void 0 : n.focus();
   }, g = (n) => {
-    var w;
-    const d = (w = e.value) == null ? void 0 : w.getModel();
+    var M;
+    const d = (M = e.value) == null ? void 0 : M.getModel();
     d && m.editor.setModelLanguage(d, n);
   }, c = (n) => {
     try {
@@ -232,42 +232,42 @@ function De(o, t) {
     } catch (d) {
       console.error("useMonacoEditor: Failed to close findController.", d);
     }
-  }, M = /* @__PURE__ */ Oe(() => m.editor.remeasureFonts(), 200);
+  }, w = /* @__PURE__ */ Oe(() => m.editor.remeasureFonts(), 200);
   return (() => {
-    xe(), x([G, () => C(o)], ([n, d], [, w]) => {
-      var L;
-      const k = C(d), J = C(w);
-      if (!(k instanceof HTMLElement) || !n) {
+    xe(), D([G, () => C(o)], ([n, d], [, M]) => {
+      var R;
+      const _ = C(d), J = C(M);
+      if (!(_ instanceof HTMLElement) || !n) {
         i = !1;
         return;
       }
-      if (!(i && J === k)) {
+      if (!(i && J === _)) {
         if (!a) {
           const u = m.Uri.parse(`inmemory://model/${t.language}-${crypto.randomUUID()}`);
           a = m.editor.createModel(t.code.value, t.language, u);
         }
-        e.value = m.editor.create(k, {
-          ...Me,
+        e.value = m.editor.create(_, {
+          ...we,
           readOnly: t.readOnly || !1,
           language: t.language,
           theme: l.theme === "light" ? "catppuccin-latte" : "catppuccin-mocha",
           model: a,
           editContext: !1,
           ...t.monacoOptions
-        }), i = !0, l.editorStatus = "ready", l.hasContent = !!t.code.value, V(
+        }), i = !0, l.editorStatus = "ready", l.hasContent = !!t.code.value, j(
           e.value,
           e.value.onDidChangeModelContent(() => {
             if (r) return;
             const u = e.value.getValue();
             l.hasContent = !!u.length, t.code.value = u;
           })
-        ), (L = t.onReady) == null || L.call(t, e.value), M();
+        ), (R = t.onReady) == null || R.call(t, e.value), w();
         try {
-          const u = e.value.getContribution("editor.contrib.findController"), _ = u == null ? void 0 : u.getState();
-          V(
+          const u = e.value.getContribution("editor.contrib.findController"), k = u == null ? void 0 : u.getState();
+          j(
             e.value,
-            _ == null ? void 0 : _.onFindReplaceStateChange(() => {
-              l.searchBoxIsRevealed = _.isRevealed;
+            k == null ? void 0 : k.onFindReplaceStateChange(() => {
+              l.searchBoxIsRevealed = k.isRevealed;
             })
             // This returns a disposable
           );
@@ -283,7 +283,7 @@ function De(o, t) {
       immediate: !0,
       flush: "post"
     });
-  })(), x(t.code, (n) => {
+  })(), D(t.code, (n) => {
     if (!e.value || !a || !i) return;
     const d = a.getValue();
     n !== d && (r = !0, e.value.executeEdits("external", [
@@ -292,7 +292,7 @@ function De(o, t) {
         text: n
       }
     ]), e.value.pushUndoStop(), l.hasContent = !!n.length, r = !1);
-  }), Z(M), ee(M), te(() => {
+  }), Z(w), ee(w), te(() => {
     if (!e.value) return;
     const n = e.value.getModel();
     e.value.dispose(), n && n.dispose();
@@ -303,26 +303,26 @@ function De(o, t) {
     setReadOnly: s,
     focus: p,
     setLanguage: g,
-    remeasureFonts: M,
+    remeasureFonts: w,
     toggleSearchWidget: h,
     triggerKeyboardCommand: c
   };
 }
-const Fe = {
+const Le = {
   messages: {
     empty_message: "The editor is currently empty. Start typing to add content.",
     empty_title: "No content available",
     loading_message: "Please wait while the {type} content is loaded.",
     loading_title: "{type} editor"
   }
-}, Le = {
-  editor: Fe
+}, Fe = {
+  editor: Le
 };
 function Re() {
-  const o = ve("en-us", Le);
+  const o = ye("en-us", Fe);
   return {
     i18n: o,
-    i18nT: ye(o)
+    i18nT: ve(o)
     // Translation component <i18n-t>
   };
 }
@@ -336,15 +336,15 @@ const We = /* @__PURE__ */ z({
   setup(o) {
     return (t, e) => {
       const a = ae("KEmptyState");
-      return E(), O(a, {
+      return E(), T(a, {
         class: "monaco-editor-status-overlay",
         message: o.message,
         title: o.title
       }, ne({ _: 2 }, [
         o.icon ? {
           name: "icon",
-          fn: D(() => [
-            (E(), O(re(o.icon), { decorative: "" }))
+          fn: L(() => [
+            (E(), T(re(o.icon), { decorative: "" }))
           ]),
           key: "0"
         } : void 0
@@ -356,14 +356,16 @@ const We = /* @__PURE__ */ z({
   for (const [a, i] of t)
     e[a] = i;
   return e;
-}, K = /* @__PURE__ */ q(We, [["__scopeId", "data-v-062eadb5"]]), Ne = /* @__PURE__ */ z({
+}, K = /* @__PURE__ */ q(We, [["__scopeId", "data-v-062eadb5"]]), Be = /* @__PURE__ */ z({
   __name: "MonacoEditor",
-  props: /* @__PURE__ */ R({
+  props: /* @__PURE__ */ W({
     theme: { default: "light" },
     language: { default: "markdown" },
     loading: { type: Boolean, default: !1 },
     options: { default: () => {
-    } }
+    } },
+    showLoadingState: { type: Boolean, default: !0 },
+    showEmptyState: { type: Boolean, default: !0 }
   }, {
     modelValue: {
       type: String,
@@ -371,9 +373,9 @@ const We = /* @__PURE__ */ z({
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ R(["ready"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ W(["ready"], ["update:modelValue"]),
   setup(o, { expose: t, emit: e }) {
-    const a = e, i = se(o, "modelValue"), { i18n: r } = Re(), l = ie("editorRef"), f = T(() => o.theme === "dark" ? "dark" : "light"), s = T(() => g.editorStates.editorStatus === "loading" || o.loading), p = T(() => g.editorStates.editorStatus === "ready" && !g.editorStates.hasContent), g = De(l, {
+    const a = e, i = se(o, "modelValue"), { i18n: r } = Re(), l = ie("editorRef"), f = I(() => o.theme === "dark" ? "dark" : "light"), s = I(() => o.loading || g.editorStates.editorStatus === "loading"), p = I(() => !s.value && g.editorStates.editorStatus === "ready" && !g.editorStates.hasContent), g = De(l, {
       language: o.language,
       code: i,
       theme: f.value,
@@ -384,7 +386,7 @@ const We = /* @__PURE__ */ z({
     });
     return t({
       monacoEditor: g
-    }), x(() => o.language, (c, h) => {
+    }), D(() => o.language, (c, h) => {
       c !== h && g.setLanguage(c);
     }), (c, h) => (E(), le("div", {
       class: ce(["monaco-editor-container", [
@@ -399,37 +401,43 @@ const We = /* @__PURE__ */ z({
         class: "monaco-editor-target",
         "data-testid": "monaco-editor-target"
       }, null, 512),
-      W(c.$slots, "state-loading", { isLoading: s.value }, () => [
+      o.showLoadingState ? B(c.$slots, "state-loading", {
+        key: 0,
+        isLoading: s.value
+      }, () => [
         N(U, { name: "fade" }, {
-          default: D(() => [
-            s.value ? (E(), O(K, {
+          default: L(() => [
+            s.value ? (E(), T(K, {
               key: 0,
               "data-testid": "monaco-editor-status-overlay-loading",
-              icon: v(ue),
-              message: v(r).t("editor.messages.loading_message", { type: o.language }),
-              title: v(r).t("editor.messages.loading_title", { type: o.language })
-            }, null, 8, ["icon", "message", "title"])) : B("", !0)
+              icon: y(ue),
+              message: y(r).t("editor.messages.loading_message", { type: o.language }),
+              title: y(r).t("editor.messages.loading_title", { type: o.language })
+            }, null, 8, ["icon", "message", "title"])) : O("", !0)
           ]),
           _: 1
         })
-      ], !0),
-      W(c.$slots, "state-empty", { isEmpty: p.value }, () => [
+      ], !0) : O("", !0),
+      o.showEmptyState ? B(c.$slots, "state-empty", {
+        key: 1,
+        isEmpty: p.value
+      }, () => [
         N(U, { name: "fade" }, {
-          default: D(() => [
-            p.value && !s.value ? (E(), O(K, {
+          default: L(() => [
+            p.value ? (E(), T(K, {
               key: 0,
               "data-testid": "monaco-editor-status-overlay-empty",
-              icon: v(ge),
-              message: v(r).t("editor.messages.empty_message"),
-              title: v(r).t("editor.messages.empty_title")
-            }, null, 8, ["icon", "message", "title"])) : B("", !0)
+              icon: y(ge),
+              message: y(r).t("editor.messages.empty_message"),
+              title: y(r).t("editor.messages.empty_title")
+            }, null, 8, ["icon", "message", "title"])) : O("", !0)
           ]),
           _: 1
         })
-      ], !0)
+      ], !0) : O("", !0)
     ], 2));
   }
-}), $e = /* @__PURE__ */ q(Ne, [["__scopeId", "data-v-e2083635"]]);
+}), $e = /* @__PURE__ */ q(Be, [["__scopeId", "data-v-89d4c84e"]]);
 export {
   $e as MonacoEditor,
   De as useMonacoEditor

package/dist/runtime/monaco-editor.umd.js

@@ -1 +1 @@
-(function(u,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("@kong/icons"),require("monaco-editor"),require("@shikijs/monaco"),require("shiki"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","@kong/icons","monaco-editor","@shikijs/monaco","shiki","@kong-ui-public/i18n"],n):(u=typeof globalThis<"u"?globalThis:u||self,n(u["kong-ui-public-monaco-editor"]={},u.Vue,u.KongIcons,u.monaco,u.monaco$1,u.shiki,u["kong-ui-public-i18n"]))})(this,function(u,n,D,K,A,O,x){"use strict";function $(o){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const e in o)if(e!=="default"){const a=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(t,e,a.get?a:{enumerable:!0,get:()=>o[e]})}}return t.default=o,Object.freeze(t)}const p=$(K),H=Object.freeze({autoClosingQuotes:"always",automaticLayout:!0,bracketPairColorization:{enabled:!0},hideCursorInOverviewRuler:!0,fontFamily:"'JetBrains Mono', Consolas, monospace",fontSize:Number("12px".replace("px","")),fontWeight:"500",lineHeight:Number("20px".replace("px","")),formatOnPaste:!0,formatOnType:!0,lineNumbersMinChars:3,minimap:{enabled:!1},stickyScroll:{enabled:!0},suggest:{showWords:!1},quickSuggestions:!0,suggestOnTriggerCharacters:!0,wordBasedSuggestions:"off",overviewRulerLanes:0,renderWhitespace:"boundary",scrollBeyondLastLine:!1,roundedSelection:!1,wordWrapColumn:120,colorDecorators:!0,folding:!0,fixedOverflowWidgets:!0,tabSize:2,detectIndentation:!1,insertSpaces:!0,trimAutoWhitespace:!0,wordWrap:"bounded",find:{addExtraSpaceOnTop:!1}});typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const F=()=>{};function q(o,t){function e(...a){return new Promise((l,i)=>{Promise.resolve(o(()=>t.apply(this,a),{fn:t,thisArg:this,args:a})).then(l).catch(i)})}return e}function z(o,t={}){let e,a,l=F;const i=s=>{clearTimeout(s),l(),l=F};let c;return s=>{const y=n.toValue(o),m=n.toValue(t.maxWait);return e&&i(e),y<=0||m!==void 0&&m<=0?(a&&(i(a),a=void 0),Promise.resolve(s())):new Promise((d,S)=>{l=t.rejectOnCancel?S:d,c=s,m&&!a&&(a=setTimeout(()=>{e&&i(e),a=void 0,d(c())},m)),e=setTimeout(()=>{a&&i(a),a=void 0,d(s())},y)})}}function G(o,t=200,e={}){return q(z(t,e),o)}const I="[monaco-editor] [lifecycle]",b=new WeakMap,_=new Map,T=new WeakMap;function Y(o){let t=b.get(o.source);if(!t){let e;switch(o.type){case"editor":e=o.source.onDidDispose(()=>B(o.source));break;case"model":e=o.source.onWillDispose(()=>B(o.source));break;default:throw new Error(`${I} Unknown scope: ${o}`)}t={disposables:new Set,scopeListener:e},b.set(o.source,t)}return t}function v(o){const t=b.get(o);t&&(t.scopeListener.dispose(),b.delete(o))}function L(o,t){Y(t).disposables.add(o)}function N(o,t){const e=b.get(t.source);e&&(e.disposables.delete(o),e.disposables.size===0&&v(t.source))}function Z(o){const t=[];if(o.forEach(e=>{try{e.dispose()}catch(a){t.push(a)}}),t.length)throw new AggregateError(t,`${I} One or more disposables threw while being disposed.`)}function J(o,t){var c,h;let e=o,a=_.get(e);if(!a){const s=T.get(o);s&&(e=s,a=_.get(s))}if(a)return((c=a.scope)==null?void 0:c.type)===(t==null?void 0:t.type)&&((h=a.scope)==null?void 0:h.source)===(t==null?void 0:t.source)||(a.scope&&N(a.decorated,a.scope),t?(L(a.decorated,t),a.scope=t):a.scope=void 0),a.decorated;const l=e.dispose,i={dispose:()=>{const s=_.get(e);if(s)return s.scope&&N(i,s.scope),_.delete(e),T.delete(i),l.call(e)}};return _.set(e,{decorated:i,scope:t}),T.set(i,e),t&&L(i,t),i}function W(o,t){return J(t,{type:"editor",source:o})}function B(o){const t=b.get(o);if(!t)return;const e=Array.from(t.disposables);try{Z(e)}catch(a){console.warn(`${I} Encountered errors while disposing scoped disposables:`,a,", Source:",o)}v(o)}const R=n.ref(!1);let k=null;async function Q(){return k||(k=(async()=>{var o,t;try{const e=((o=p.json)==null?void 0:o.jsonDefaults)||((t=p.languages.json)==null?void 0:t.jsonDefaults);e==null||e.setModeConfiguration({tokens:!1});const a=await O.getSingletonHighlighter({themes:Object.values(O.bundledThemes),langs:Object.values(O.bundledLanguages)});a.getLoadedLanguages().forEach(l=>{p.languages.register({id:l})}),A.shikiToMonaco(a,p),R.value=!0}catch(e){throw k=null,e}})(),k)}function U(o,t){const e=n.shallowRef();let a,l=!1,i=!1;const c=n.reactive({editorStatus:"loading",searchBoxIsRevealed:!1,hasContent:!1,theme:t.theme||"light"}),h=r=>{!l||!e.value||e.value.setValue(r)},s=r=>{var g;return(g=e.value)==null?void 0:g.updateOptions({readOnly:r})},y=()=>{var r;return(r=e.value)==null?void 0:r.focus()},m=r=>{var M;const g=(M=e.value)==null?void 0:M.getModel();g&&p.editor.setModelLanguage(g,r)},d=r=>{try{if(!e.value||!r)return;e.value.focus(),e.value.trigger("keyboard",r,null)}catch(g){console.error(`useMonacoEditor: Failed to trigger command: ${r}`,g)}},S=()=>{var r;try{if(!e.value)return;if(c.searchBoxIsRevealed)return(r=e.value.getContribution("editor.contrib.findController"))==null?void 0:r.closeFindWidget();d("actions.find")}catch(g){console.error("useMonacoEditor: Failed to close findController.",g)}},E=G(()=>p.editor.remeasureFonts(),200);return(()=>{Q(),n.watch([R,()=>n.toValue(o)],([r,g],[,M])=>{var P;const w=n.toValue(g),ne=n.toValue(M);if(!(w instanceof HTMLElement)||!r){l=!1;return}if(!(l&&ne===w)){if(!a){const f=p.Uri.parse(`inmemory://model/${t.language}-${crypto.randomUUID()}`);a=p.editor.createModel(t.code.value,t.language,f)}e.value=p.editor.create(w,{...H,readOnly:t.readOnly||!1,language:t.language,theme:c.theme==="light"?"catppuccin-latte":"catppuccin-mocha",model:a,editContext:!1,...t.monacoOptions}),l=!0,c.editorStatus="ready",c.hasContent=!!t.code.value,W(e.value,e.value.onDidChangeModelContent(()=>{if(i)return;const f=e.value.getValue();c.hasContent=!!f.length,t.code.value=f})),(P=t.onReady)==null||P.call(t,e.value),E();try{const f=e.value.getContribution("editor.contrib.findController"),C=f==null?void 0:f.getState();W(e.value,C==null?void 0:C.onFindReplaceStateChange(()=>{c.searchBoxIsRevealed=C.isRevealed}))}catch(f){console.error("useMonacoEditor: Failed to get the state of findController",f)}n.onWatcherCleanup(()=>{var f;(f=e.value)==null||f.dispose()})}},{immediate:!0,flush:"post"})})(),n.watch(t.code,r=>{if(!e.value||!a||!l)return;const g=a.getValue();r!==g&&(i=!0,e.value.executeEdits("external",[{range:a.getFullModelRange(),text:r}]),e.value.pushUndoStop(),c.hasContent=!!r.length,i=!1)}),n.onMounted(E),n.onActivated(E),n.onBeforeUnmount(()=>{if(!e.value)return;const r=e.value.getModel();e.value.dispose(),r&&r.dispose()}),{editor:e,editorStates:c,setContent:h,setReadOnly:s,focus:y,setLanguage:m,remeasureFonts:E,toggleSearchWidget:S,triggerKeyboardCommand:d}}const X={editor:{messages:{empty_message:"The editor is currently empty. Start typing to add content.",empty_title:"No content available",loading_message:"Please wait while the {type} content is loaded.",loading_title:"{type} editor"}}};function ee(){const o=x.createI18n("en-us",X);return{i18n:o,i18nT:x.i18nTComponent(o)}}const te=n.defineComponent({__name:"MonacoEditorStatusOverlay",props:{title:{},message:{},icon:{}},setup(o){return(t,e)=>{const a=n.resolveComponent("KEmptyState");return n.openBlock(),n.createBlock(a,{class:"monaco-editor-status-overlay",message:o.message,title:o.title},n.createSlots({_:2},[o.icon?{name:"icon",fn:n.withCtx(()=>[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.icon),{decorative:""}))]),key:"0"}:void 0]),1032,["message","title"])}}}),j=(o,t)=>{const e=o.__vccOpts||o;for(const[a,l]of t)e[a]=l;return e},V=j(te,[["__scopeId","data-v-062eadb5"]]),oe=j(n.defineComponent({__name:"MonacoEditor",props:n.mergeModels({theme:{default:"light"},language:{default:"markdown"},loading:{type:Boolean,default:!1},options:{default:()=>{}}},{modelValue:{type:String,required:!0},modelModifiers:{}}),emits:n.mergeModels(["ready"],["update:modelValue"]),setup(o,{expose:t,emit:e}){const a=e,l=n.useModel(o,"modelValue"),{i18n:i}=ee(),c=n.useTemplateRef("editorRef"),h=n.computed(()=>o.theme==="dark"?"dark":"light"),s=n.computed(()=>m.editorStates.editorStatus==="loading"||o.loading),y=n.computed(()=>m.editorStates.editorStatus==="ready"&&!m.editorStates.hasContent),m=U(c,{language:o.language,code:l,theme:h.value,monacoOptions:o.options,onReady:d=>{a("ready",d)}});return t({monacoEditor:m}),n.watch(()=>o.language,(d,S)=>{d!==S&&m.setLanguage(d)}),(d,S)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["monaco-editor-container",[h.value,{loading:s.value}]]),"data-testid":"monaco-editor-container"},[n.createElementVNode("div",{ref_key:"editorRef",ref:c,class:"monaco-editor-target","data-testid":"monaco-editor-target"},null,512),n.renderSlot(d.$slots,"state-loading",{isLoading:s.value},()=>[n.createVNode(n.Transition,{name:"fade"},{default:n.withCtx(()=>[s.value?(n.openBlock(),n.createBlock(V,{key:0,"data-testid":"monaco-editor-status-overlay-loading",icon:n.unref(D.ProgressIcon),message:n.unref(i).t("editor.messages.loading_message",{type:o.language}),title:n.unref(i).t("editor.messages.loading_title",{type:o.language})},null,8,["icon","message","title"])):n.createCommentVNode("",!0)]),_:1})],!0),n.renderSlot(d.$slots,"state-empty",{isEmpty:y.value},()=>[n.createVNode(n.Transition,{name:"fade"},{default:n.withCtx(()=>[y.value&&!s.value?(n.openBlock(),n.createBlock(V,{key:0,"data-testid":"monaco-editor-status-overlay-empty",icon:n.unref(D.CodeblockIcon),message:n.unref(i).t("editor.messages.empty_message"),title:n.unref(i).t("editor.messages.empty_title")},null,8,["icon","message","title"])):n.createCommentVNode("",!0)]),_:1})],!0)],2))}}),[["__scopeId","data-v-e2083635"]]);u.MonacoEditor=oe,u.useMonacoEditor=U,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
+(function(u,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("@kong/icons"),require("monaco-editor"),require("@shikijs/monaco"),require("shiki"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","@kong/icons","monaco-editor","@shikijs/monaco","shiki","@kong-ui-public/i18n"],n):(u=typeof globalThis<"u"?globalThis:u||self,n(u["kong-ui-public-monaco-editor"]={},u.Vue,u.KongIcons,u.monaco,u.monaco$1,u.shiki,u["kong-ui-public-i18n"]))})(this,function(u,n,D,K,A,w,x){"use strict";function $(o){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const e in o)if(e!=="default"){const a=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(t,e,a.get?a:{enumerable:!0,get:()=>o[e]})}}return t.default=o,Object.freeze(t)}const p=$(K),H=Object.freeze({autoClosingQuotes:"always",automaticLayout:!0,bracketPairColorization:{enabled:!0},hideCursorInOverviewRuler:!0,fontFamily:"'JetBrains Mono', Consolas, monospace",fontSize:Number("12px".replace("px","")),fontWeight:"500",lineHeight:Number("20px".replace("px","")),formatOnPaste:!0,formatOnType:!0,lineNumbersMinChars:3,minimap:{enabled:!1},stickyScroll:{enabled:!0},suggest:{showWords:!1},quickSuggestions:!0,suggestOnTriggerCharacters:!0,wordBasedSuggestions:"off",overviewRulerLanes:0,renderWhitespace:"boundary",scrollBeyondLastLine:!1,roundedSelection:!1,wordWrapColumn:120,colorDecorators:!0,folding:!0,fixedOverflowWidgets:!0,tabSize:2,detectIndentation:!1,insertSpaces:!0,trimAutoWhitespace:!0,wordWrap:"bounded",find:{addExtraSpaceOnTop:!1}});typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const F=()=>{};function q(o,t){function e(...a){return new Promise((l,i)=>{Promise.resolve(o(()=>t.apply(this,a),{fn:t,thisArg:this,args:a})).then(l).catch(i)})}return e}function z(o,t={}){let e,a,l=F;const i=s=>{clearTimeout(s),l(),l=F};let c;return s=>{const y=n.toValue(o),m=n.toValue(t.maxWait);return e&&i(e),y<=0||m!==void 0&&m<=0?(a&&(i(a),a=void 0),Promise.resolve(s())):new Promise((d,b)=>{l=t.rejectOnCancel?b:d,c=s,m&&!a&&(a=setTimeout(()=>{e&&i(e),a=void 0,d(c())},m)),e=setTimeout(()=>{a&&i(a),a=void 0,d(s())},y)})}}function G(o,t=200,e={}){return q(z(t,e),o)}const O="[monaco-editor] [lifecycle]",S=new WeakMap,k=new Map,I=new WeakMap;function Y(o){let t=S.get(o.source);if(!t){let e;switch(o.type){case"editor":e=o.source.onDidDispose(()=>V(o.source));break;case"model":e=o.source.onWillDispose(()=>V(o.source));break;default:throw new Error(`${O} Unknown scope: ${o}`)}t={disposables:new Set,scopeListener:e},S.set(o.source,t)}return t}function L(o){const t=S.get(o);t&&(t.scopeListener.dispose(),S.delete(o))}function N(o,t){Y(t).disposables.add(o)}function B(o,t){const e=S.get(t.source);e&&(e.disposables.delete(o),e.disposables.size===0&&L(t.source))}function Z(o){const t=[];if(o.forEach(e=>{try{e.dispose()}catch(a){t.push(a)}}),t.length)throw new AggregateError(t,`${O} One or more disposables threw while being disposed.`)}function J(o,t){var c,h;let e=o,a=k.get(e);if(!a){const s=I.get(o);s&&(e=s,a=k.get(s))}if(a)return((c=a.scope)==null?void 0:c.type)===(t==null?void 0:t.type)&&((h=a.scope)==null?void 0:h.source)===(t==null?void 0:t.source)||(a.scope&&B(a.decorated,a.scope),t?(N(a.decorated,t),a.scope=t):a.scope=void 0),a.decorated;const l=e.dispose,i={dispose:()=>{const s=k.get(e);if(s)return s.scope&&B(i,s.scope),k.delete(e),I.delete(i),l.call(e)}};return k.set(e,{decorated:i,scope:t}),I.set(i,e),t&&N(i,t),i}function v(o,t){return J(t,{type:"editor",source:o})}function V(o){const t=S.get(o);if(!t)return;const e=Array.from(t.disposables);try{Z(e)}catch(a){console.warn(`${O} Encountered errors while disposing scoped disposables:`,a,", Source:",o)}L(o)}const W=n.ref(!1);let E=null;async function Q(){return E||(E=(async()=>{var o,t;try{const e=((o=p.json)==null?void 0:o.jsonDefaults)||((t=p.languages.json)==null?void 0:t.jsonDefaults);e==null||e.setModeConfiguration({tokens:!1});const a=await w.getSingletonHighlighter({themes:Object.values(w.bundledThemes),langs:Object.values(w.bundledLanguages)});a.getLoadedLanguages().forEach(l=>{p.languages.register({id:l})}),A.shikiToMonaco(a,p),W.value=!0}catch(e){throw E=null,e}})(),E)}function R(o,t){const e=n.shallowRef();let a,l=!1,i=!1;const c=n.reactive({editorStatus:"loading",searchBoxIsRevealed:!1,hasContent:!1,theme:t.theme||"light"}),h=r=>{!l||!e.value||e.value.setValue(r)},s=r=>{var g;return(g=e.value)==null?void 0:g.updateOptions({readOnly:r})},y=()=>{var r;return(r=e.value)==null?void 0:r.focus()},m=r=>{var _;const g=(_=e.value)==null?void 0:_.getModel();g&&p.editor.setModelLanguage(g,r)},d=r=>{try{if(!e.value||!r)return;e.value.focus(),e.value.trigger("keyboard",r,null)}catch(g){console.error(`useMonacoEditor: Failed to trigger command: ${r}`,g)}},b=()=>{var r;try{if(!e.value)return;if(c.searchBoxIsRevealed)return(r=e.value.getContribution("editor.contrib.findController"))==null?void 0:r.closeFindWidget();d("actions.find")}catch(g){console.error("useMonacoEditor: Failed to close findController.",g)}},C=G(()=>p.editor.remeasureFonts(),200);return(()=>{Q(),n.watch([W,()=>n.toValue(o)],([r,g],[,_])=>{var P;const T=n.toValue(g),ne=n.toValue(_);if(!(T instanceof HTMLElement)||!r){l=!1;return}if(!(l&&ne===T)){if(!a){const f=p.Uri.parse(`inmemory://model/${t.language}-${crypto.randomUUID()}`);a=p.editor.createModel(t.code.value,t.language,f)}e.value=p.editor.create(T,{...H,readOnly:t.readOnly||!1,language:t.language,theme:c.theme==="light"?"catppuccin-latte":"catppuccin-mocha",model:a,editContext:!1,...t.monacoOptions}),l=!0,c.editorStatus="ready",c.hasContent=!!t.code.value,v(e.value,e.value.onDidChangeModelContent(()=>{if(i)return;const f=e.value.getValue();c.hasContent=!!f.length,t.code.value=f})),(P=t.onReady)==null||P.call(t,e.value),C();try{const f=e.value.getContribution("editor.contrib.findController"),M=f==null?void 0:f.getState();v(e.value,M==null?void 0:M.onFindReplaceStateChange(()=>{c.searchBoxIsRevealed=M.isRevealed}))}catch(f){console.error("useMonacoEditor: Failed to get the state of findController",f)}n.onWatcherCleanup(()=>{var f;(f=e.value)==null||f.dispose()})}},{immediate:!0,flush:"post"})})(),n.watch(t.code,r=>{if(!e.value||!a||!l)return;const g=a.getValue();r!==g&&(i=!0,e.value.executeEdits("external",[{range:a.getFullModelRange(),text:r}]),e.value.pushUndoStop(),c.hasContent=!!r.length,i=!1)}),n.onMounted(C),n.onActivated(C),n.onBeforeUnmount(()=>{if(!e.value)return;const r=e.value.getModel();e.value.dispose(),r&&r.dispose()}),{editor:e,editorStates:c,setContent:h,setReadOnly:s,focus:y,setLanguage:m,remeasureFonts:C,toggleSearchWidget:b,triggerKeyboardCommand:d}}const X={editor:{messages:{empty_message:"The editor is currently empty. Start typing to add content.",empty_title:"No content available",loading_message:"Please wait while the {type} content is loaded.",loading_title:"{type} editor"}}};function ee(){const o=x.createI18n("en-us",X);return{i18n:o,i18nT:x.i18nTComponent(o)}}const te=n.defineComponent({__name:"MonacoEditorStatusOverlay",props:{title:{},message:{},icon:{}},setup(o){return(t,e)=>{const a=n.resolveComponent("KEmptyState");return n.openBlock(),n.createBlock(a,{class:"monaco-editor-status-overlay",message:o.message,title:o.title},n.createSlots({_:2},[o.icon?{name:"icon",fn:n.withCtx(()=>[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.icon),{decorative:""}))]),key:"0"}:void 0]),1032,["message","title"])}}}),U=(o,t)=>{const e=o.__vccOpts||o;for(const[a,l]of t)e[a]=l;return e},j=U(te,[["__scopeId","data-v-062eadb5"]]),oe=U(n.defineComponent({__name:"MonacoEditor",props:n.mergeModels({theme:{default:"light"},language:{default:"markdown"},loading:{type:Boolean,default:!1},options:{default:()=>{}},showLoadingState:{type:Boolean,default:!0},showEmptyState:{type:Boolean,default:!0}},{modelValue:{type:String,required:!0},modelModifiers:{}}),emits:n.mergeModels(["ready"],["update:modelValue"]),setup(o,{expose:t,emit:e}){const a=e,l=n.useModel(o,"modelValue"),{i18n:i}=ee(),c=n.useTemplateRef("editorRef"),h=n.computed(()=>o.theme==="dark"?"dark":"light"),s=n.computed(()=>o.loading||m.editorStates.editorStatus==="loading"),y=n.computed(()=>!s.value&&m.editorStates.editorStatus==="ready"&&!m.editorStates.hasContent),m=R(c,{language:o.language,code:l,theme:h.value,monacoOptions:o.options,onReady:d=>{a("ready",d)}});return t({monacoEditor:m}),n.watch(()=>o.language,(d,b)=>{d!==b&&m.setLanguage(d)}),(d,b)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["monaco-editor-container",[h.value,{loading:s.value}]]),"data-testid":"monaco-editor-container"},[n.createElementVNode("div",{ref_key:"editorRef",ref:c,class:"monaco-editor-target","data-testid":"monaco-editor-target"},null,512),o.showLoadingState?n.renderSlot(d.$slots,"state-loading",{key:0,isLoading:s.value},()=>[n.createVNode(n.Transition,{name:"fade"},{default:n.withCtx(()=>[s.value?(n.openBlock(),n.createBlock(j,{key:0,"data-testid":"monaco-editor-status-overlay-loading",icon:n.unref(D.ProgressIcon),message:n.unref(i).t("editor.messages.loading_message",{type:o.language}),title:n.unref(i).t("editor.messages.loading_title",{type:o.language})},null,8,["icon","message","title"])):n.createCommentVNode("",!0)]),_:1})],!0):n.createCommentVNode("",!0),o.showEmptyState?n.renderSlot(d.$slots,"state-empty",{key:1,isEmpty:y.value},()=>[n.createVNode(n.Transition,{name:"fade"},{default:n.withCtx(()=>[y.value?(n.openBlock(),n.createBlock(j,{key:0,"data-testid":"monaco-editor-status-overlay-empty",icon:n.unref(D.CodeblockIcon),message:n.unref(i).t("editor.messages.empty_message"),title:n.unref(i).t("editor.messages.empty_title")},null,8,["icon","message","title"])):n.createCommentVNode("",!0)]),_:1})],!0):n.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-89d4c84e"]]);u.MonacoEditor=oe,u.useMonacoEditor=R,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});

package/dist/runtime/style.css

@@ -1 +1 @@
-.monaco-editor-status-overlay[data-v-062eadb5]{background:transparent;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.monaco-editor-status-overlay[data-v-062eadb5] .empty-state-content{align-items:center;display:flex;flex-direction:column}.monaco-editor-status-overlay[data-v-062eadb5] .empty-state-content .empty-state-icon,.monaco-editor-status-overlay[data-v-062eadb5] .empty-state-content .empty-state-title,.monaco-editor-status-overlay[data-v-062eadb5] .empty-state-content .empty-state-message{color:#afb7c5;color:var(--kui-color-text-neutral-weak, #afb7c5)}.monaco-editor-status-overlay[data-v-062eadb5] .empty-state-content .empty-state-title{text-transform:capitalize}.monaco-editor-container[data-v-e2083635]{background:#fff;background:var(--kui-color-background, #ffffff);display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative;width:100%}.monaco-editor-container.loading[data-v-e2083635]{pointer-events:none;-webkit-user-select:none;user-select:none}.monaco-editor-container.loading .monaco-editor-target[data-v-e2083635]{filter:blur(2px);opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.monaco-editor-target[data-v-e2083635]{height:100%;overflow:hidden;position:relative;transition:all .2s ease-in-out;transition:all var(--kui-animation-duration-20, .2s) ease-in-out;width:100%}.monaco-editor-target[data-v-e2083635] .monaco-editor{position:absolute;--vscode-editor-background: var(--kui-color-background, #ffffff);--vscode-editorGutter-background: var(--kui-color-background, #ffffff);--vscode-editorLineNumber-activeForeground: var(--kui-color-text-primary, #0044f4);--vscode-editorSuggestWidget-background: var(--kui-color-background, #ffffff);--vscode-editorSuggestWidget-border: var(--kui-color-border, #e0e4ea);--vscode-editorSuggestWidget-highlightForeground: var(--kui-color-text-decorative-purple, #6f28ff);--vscode-editorSuggestWidget-focusHighlightForeground: var(--kui-color-text-decorative-purple, #6f28ff);--vscode-menu-background: var(--kui-color-background, #ffffff);--vscode-menu-border: var(--kui-color-border, #e0e4ea);--vscode-menu-separatorBackground: var(--kui-color-border, #e0e4ea);--vscode-focusBorder: var(--kui-color-text-neutral, #6c7489);--vscode-input-background: var(--kui-color-background, #ffffff);--vscode-sash-hoverBorder: var(--kui-color-border-primary, #0044f4)}.monaco-editor-target[data-v-e2083635] .monaco-editor .sticky-widget{z-index:2}.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-details-container{border-radius:10px!important;border-radius:var(--kui-border-radius-50, 10px)!important}.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-details-container .suggest-details{border-radius:10px!important;border-radius:var(--kui-border-radius-50, 10px)!important;overflow-x:hidden;overflow-y:auto}.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-details-container .suggest-details .type{overflow-wrap:break-word!important}.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget{border-radius:10px!important;border-radius:var(--kui-border-radius-50, 10px)!important;min-height:30px!important}.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget.shows-details{border-radius:10px!important;border-radius:var(--kui-border-radius-50, 10px)!important;min-height:30px!important;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget .tree,.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget .monaco-scrollable-element,.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget .monaco-list,.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget .monaco-list-rows{border-radius:8px!important;border-radius:var(--kui-border-radius-40, 8px)!important}.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget .monaco-list-rows{overflow-x:hidden;overflow-y:auto}.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget .monaco-list-row{padding:0 6px;padding:var(--kui-space-0, 0px) var(--kui-space-30, 6px)}.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget .monaco-list-row.focused{background:#e0e4ea;background:var(--kui-color-background-neutral-weaker, #e0e4ea)}.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget .monaco-list-row.focused .monaco-icon-label,.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget .monaco-list-row.focused .suggest-icon{color:#232633!important;color:var(--kui-color-text-neutral-strongest, #232633)!important}.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget .monaco-list-row.focused .details-label{color:#232633;color:var(--kui-color-text-neutral-strongest, #232633)}.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget .monaco-list-row .highlight{font-weight:600;font-weight:var(--kui-font-weight-semibold, 600)}.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget .monaco-list-row:first-child.focused{border-top-left-radius:6px;border-top-left-radius:var(--kui-border-radius-30, 6px)}.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget .monaco-list-row .suggest-icon:not(.codicon-symbol-property){color:#0044f4;color:var(--kui-color-text-primary, #0044f4)}.monaco-editor-target[data-v-e2083635] .monaco-editor .suggest-widget .monaco-list-row .monaco-icon-label{color:#6c7489!important;color:var(--kui-color-text-neutral, #6c7489)!important}.monaco-editor-target[data-v-e2083635] .monaco-editor .codicon-suggest-more-info{transform:translateY(2px)!important}.monaco-editor-target[data-v-e2083635] .monaco-editor .find-widget{background:#fff;background:var(--kui-color-background, #ffffff);border-bottom:1px solid #e0e4ea;border-bottom:var(--kui-border-width-10, 1px) solid var(--kui-color-border-neutral-weaker, #e0e4ea);border-radius:0;border-radius:var(--kui-border-radius-0, 0px);right:0!important}.monaco-editor-target[data-v-e2083635] .monaco-editor .find-widget .monaco-sash{background-color:#e0e4ea;background-color:var(--kui-color-background-neutral-weaker, #e0e4ea);width:1px!important}.monaco-editor-target[data-v-e2083635] .monaco-editor .find-widget .monaco-inputbox{background-color:#fff!important;background-color:var(--kui-color-background, #ffffff)!important;border:1px solid #e0e4ea!important;border:var(--kui-border-width-10, 1px) solid var(--kui-color-border-neutral-weaker, #e0e4ea)!important;border-radius:6px;border-radius:var(--kui-border-radius-30, 6px);padding:0 2px;padding:var(--kui-space-0, 0px) var(--kui-space-10, 2px)}.fade-enter-active[data-v-e2083635],.fade-leave-active[data-v-e2083635]{transition:opacity .2s ease;transition:opacity var(--kui-animation-duration-20, .2s) ease}.fade-enter-from[data-v-e2083635],.fade-leave-to[data-v-e2083635]{opacity:0}.fade-enter-to[data-v-e2083635],.fade-leave-from[data-v-e2083635]{opacity:1}
+.monaco-editor-status-overlay[data-v-062eadb5]{background:transparent;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.monaco-editor-status-overlay[data-v-062eadb5] .empty-state-content{align-items:center;display:flex;flex-direction:column}.monaco-editor-status-overlay[data-v-062eadb5] .empty-state-content .empty-state-icon,.monaco-editor-status-overlay[data-v-062eadb5] .empty-state-content .empty-state-title,.monaco-editor-status-overlay[data-v-062eadb5] .empty-state-content .empty-state-message{color:#afb7c5;color:var(--kui-color-text-neutral-weak, #afb7c5)}.monaco-editor-status-overlay[data-v-062eadb5] .empty-state-content .empty-state-title{text-transform:capitalize}.monaco-editor-container[data-v-89d4c84e]{background:#fff;background:var(--kui-color-background, #ffffff);display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative;width:100%}.monaco-editor-container.loading[data-v-89d4c84e]{pointer-events:none;-webkit-user-select:none;user-select:none}.monaco-editor-container.loading .monaco-editor-target[data-v-89d4c84e]{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.monaco-editor-target[data-v-89d4c84e]{height:100%;overflow:hidden;position:relative;transition:all .2s ease-in-out;transition:all var(--kui-animation-duration-20, .2s) ease-in-out;width:100%}.monaco-editor-target[data-v-89d4c84e] .monaco-editor{position:absolute;--vscode-editor-background: var(--kui-color-background, #ffffff);--vscode-editorGutter-background: var(--kui-color-background, #ffffff);--vscode-editorLineNumber-activeForeground: var(--kui-color-text-primary, #0044f4);--vscode-editorSuggestWidget-background: var(--kui-color-background, #ffffff);--vscode-editorSuggestWidget-border: var(--kui-color-border, #e0e4ea);--vscode-editorSuggestWidget-highlightForeground: var(--kui-color-text-decorative-purple, #6f28ff);--vscode-editorSuggestWidget-focusHighlightForeground: var(--kui-color-text-decorative-purple, #6f28ff);--vscode-menu-background: var(--kui-color-background, #ffffff);--vscode-menu-border: var(--kui-color-border, #e0e4ea);--vscode-menu-separatorBackground: var(--kui-color-border, #e0e4ea);--vscode-focusBorder: var(--kui-color-text-neutral, #6c7489);--vscode-input-background: var(--kui-color-background, #ffffff);--vscode-sash-hoverBorder: var(--kui-color-border-primary, #0044f4)}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .sticky-widget{z-index:2}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-details-container{border-radius:10px!important;border-radius:var(--kui-border-radius-50, 10px)!important}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-details-container .suggest-details{border-radius:10px!important;border-radius:var(--kui-border-radius-50, 10px)!important;overflow-x:hidden;overflow-y:auto}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-details-container .suggest-details .type{overflow-wrap:break-word!important}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget{border-radius:10px!important;border-radius:var(--kui-border-radius-50, 10px)!important;min-height:30px!important}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget.shows-details{border-radius:10px!important;border-radius:var(--kui-border-radius-50, 10px)!important;min-height:30px!important;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget .tree,.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget .monaco-scrollable-element,.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget .monaco-list,.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget .monaco-list-rows{border-radius:8px!important;border-radius:var(--kui-border-radius-40, 8px)!important}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget .monaco-list-rows{overflow-x:hidden;overflow-y:auto}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget .monaco-list-row{padding:0 6px;padding:var(--kui-space-0, 0px) var(--kui-space-30, 6px)}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget .monaco-list-row.focused{background:#e0e4ea;background:var(--kui-color-background-neutral-weaker, #e0e4ea)}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget .monaco-list-row.focused .monaco-icon-label,.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget .monaco-list-row.focused .suggest-icon{color:#232633!important;color:var(--kui-color-text-neutral-strongest, #232633)!important}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget .monaco-list-row.focused .details-label{color:#232633;color:var(--kui-color-text-neutral-strongest, #232633)}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget .monaco-list-row .highlight{font-weight:600;font-weight:var(--kui-font-weight-semibold, 600)}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget .monaco-list-row:first-child.focused{border-top-left-radius:6px;border-top-left-radius:var(--kui-border-radius-30, 6px)}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget .monaco-list-row .suggest-icon:not(.codicon-symbol-property){color:#0044f4;color:var(--kui-color-text-primary, #0044f4)}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .suggest-widget .monaco-list-row .monaco-icon-label{color:#6c7489!important;color:var(--kui-color-text-neutral, #6c7489)!important}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .codicon-suggest-more-info{transform:translateY(2px)!important}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .find-widget{background:#fff;background:var(--kui-color-background, #ffffff);border-bottom:1px solid #e0e4ea;border-bottom:var(--kui-border-width-10, 1px) solid var(--kui-color-border-neutral-weaker, #e0e4ea);border-radius:0;border-radius:var(--kui-border-radius-0, 0px);right:0!important}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .find-widget .monaco-sash{background-color:#e0e4ea;background-color:var(--kui-color-background-neutral-weaker, #e0e4ea);width:1px!important}.monaco-editor-target[data-v-89d4c84e] .monaco-editor .find-widget .monaco-inputbox{background-color:#fff!important;background-color:var(--kui-color-background, #ffffff)!important;border:1px solid #e0e4ea!important;border:var(--kui-border-width-10, 1px) solid var(--kui-color-border-neutral-weaker, #e0e4ea)!important;border-radius:6px;border-radius:var(--kui-border-radius-30, 6px);padding:0 2px;padding:var(--kui-space-0, 0px) var(--kui-space-10, 2px)}.fade-enter-active[data-v-89d4c84e],.fade-leave-active[data-v-89d4c84e]{transition:opacity .2s ease;transition:opacity var(--kui-animation-duration-20, .2s) ease}.fade-enter-from[data-v-89d4c84e],.fade-leave-to[data-v-89d4c84e]{opacity:0}.fade-enter-to[data-v-89d4c84e],.fade-leave-from[data-v-89d4c84e]{opacity:1}

package/dist/types/src/components/MonacoEditor.vue.d.ts

@@ -21,6 +21,16 @@ type __VLS_Props = {
      * @default undefined
     */
     options?: Partial<editor.IStandaloneEditorConstructionOptions> | undefined;
+    /**
+     * Whether to show the loading state overlay.
+     * @default true
+     */
+    showLoadingState?: boolean;
+    /**
+     * Whether to show the empty state overlay.
+     * @default true
+     */
+    showEmptyState?: boolean;
 };
 /**
  * The model content for the Monaco Editor.

package/dist/types/src/components/MonacoEditor.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MonacoEditor.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/MonacoEditor.vue"],"names":[],"mappings":"AA6UA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;MAGE;IACF,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,oCAAoC,CAAC,GAAG,SAAS,CAAA;CAC3E,CAAC;AAkBF;;GAEG;AACH,QAAA,MAAM,KAAK,wDAGT,CAAA;AAsCF,KAAK,gBAAgB,GAAG;IACxB;;OAEG;IACH,UAAU,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AA+IxD,QAAA,IAAI,OAAO;;CAAU,EAAE,QAAQ;;CAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACpD;IAAE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAOtD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;kFAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"MonacoEditor.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/MonacoEditor.vue"],"names":[],"mappings":"AA8VA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;MAGE;IACF,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,oCAAoC,CAAC,GAAG,SAAS,CAAA;IAC1E;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAC;AAoBF;;GAEG;AACH,QAAA,MAAM,KAAK,wDAGT,CAAA;AA0CF,KAAK,gBAAgB,GAAG;IACxB;;OAEG;IACH,UAAU,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAmJxD,QAAA,IAAI,OAAO;;CAAU,EAAE,QAAQ;;CAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACpD;IAAE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAOtD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;kFAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/monaco-editor",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "type": "module",
   "description": "A kong UI Monaco Editor wrapper for Vue 3 with syntax highlighting powered by Shiki.",
   "main": "./dist/runtime/monaco-editor.umd.js",