@zephyr_zz/zephyr-ui 0.0.19 → 0.0.20

package/dist/types/index.d.ts

@@ -1,7 +1,8 @@
 import { App } from 'vue';
 import { default as ZzButton } from './button';
 import { default as ZephyrEditor } from './editor';
-export { ZzButton, ZephyrEditor };
+import { default as ZephyrWrapper } from './wrapper';
+export { ZzButton, ZephyrEditor, ZephyrWrapper };
 declare const _default: {
     install(app: App): void;
 };

package/dist/types/wrapper/helper.d.ts

@@ -0,0 +1,37 @@
+import { VNode } from 'vue';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    is: {
+        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+        default: null;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> | VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    is: {
+        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+        default: null;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    is: string | Function | Record<string, any>;
+    show: boolean;
+    isProps: Record<string, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/types/wrapper/index.d.ts

@@ -0,0 +1,2 @@
+import { default as ZephyrWrapper } from './index.vue';
+export default ZephyrWrapper;

package/dist/types/wrapper/index.vue.d.ts

@@ -0,0 +1,41 @@
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    is: {
+        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+        default: null;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    is: {
+        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+        default: null;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    is: string | Function | Record<string, any>;
+    show: boolean;
+    isProps: Record<string, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    wrapperRef: HTMLDivElement;
+}, HTMLDivElement>, Partial<Record<string, (_: {}) => any>> & {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/zephyr-ui.es.js

@@ -1,41 +1,41 @@
 import './index.css';
-import { defineComponent as d, createElementBlock as m, openBlock as p, normalizeClass as z, renderSlot as T, ref as L, onMounted as k, onUnmounted as w } from "vue";
-import * as l from "monaco-editor-core";
-import { shikiToMonaco as B } from "@shikijs/monaco";
-import { createHighlighter as E } from "shiki";
-const Z = {
+import { defineComponent as v, createElementBlock as B, openBlock as C, normalizeClass as W, renderSlot as _, ref as $, onMounted as S, onUnmounted as Z, isVNode as O, h as j, nextTick as H, getCurrentScope as I, onScopeDispose as M, getCurrentInstance as R, computed as k, shallowRef as w, watch as L, toValue as V, createElementVNode as A, createCommentVNode as N, createVNode as D, unref as T, normalizeProps as G, guardReactiveProps as F, createSlots as U, renderList as q, withCtx as J } from "vue";
+import * as p from "monaco-editor-core";
+import { shikiToMonaco as Q } from "@shikijs/monaco";
+import { createHighlighter as X } from "shiki";
+const Y = {
   name: "ZzButton"
-}, C = /* @__PURE__ */ d({
-  ...Z,
+}, K = /* @__PURE__ */ v({
+  ...Y,
   props: {
     type: {
       type: String,
       default: "primary"
     }
   },
-  setup(o) {
-    return (e, i) => (p(), m("button", {
-      class: z(["zz-button", `zz-button--${o.type}`])
+  setup(t) {
+    return (e, n) => (C(), B("button", {
+      class: W(["zz-button", `zz-button--${t.type}`])
     }, [
-      T(e.$slots, "default", {}, void 0, !0)
+      _(e.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), f = (o, e) => {
-  const i = o.__vccOpts || o;
-  for (const [r, s] of e)
-    i[r] = s;
-  return i;
-}, c = /* @__PURE__ */ f(C, [["__scopeId", "data-v-7c55743a"]]);
-c.install = (o) => {
-  o.component("ZzButton", c);
+}), E = (t, e) => {
+  const n = t.__vccOpts || t;
+  for (const [i, a] of e)
+    n[i] = a;
+  return n;
+}, b = /* @__PURE__ */ E(K, [["__scopeId", "data-v-7c55743a"]]);
+b.install = (t) => {
+  t.component("ZzButton", b);
 };
-class b {
+class ee {
   highlighter = null;
   constructor() {
   }
   async init() {
     try {
-      const e = await E({
+      const e = await X({
         themes: ["github-dark", "vitesse-dark"],
         // 示例
         langs: ["ts", "vue"]
@@ -59,29 +59,29 @@ class b {
   }
   // 注册语言
   registerLanguage(e) {
-    return new Promise((i, r) => {
+    return new Promise((n, i) => {
       try {
-        this.highlighter && !this.getLanguages().includes(e) && this.highlighter.loadLanguage(e), i(!0);
-      } catch (s) {
-        r(s);
+        this.highlighter && !this.getLanguages().includes(e) && this.highlighter.loadLanguage(e), n(!0);
+      } catch (a) {
+        i(a);
       }
     });
   }
   // 注册主题
   registerTheme(e) {
-    return new Promise((i, r) => {
+    return new Promise((n, i) => {
       try {
-        this.highlighter && !this.getThemes().includes(e) && this.highlighter.loadTheme(e), i(!0);
-      } catch (s) {
-        r(s);
+        this.highlighter && !this.getThemes().includes(e) && this.highlighter.loadTheme(e), n(!0);
+      } catch (a) {
+        i(a);
       }
     });
   }
 }
-const x = {
+const te = {
   name: "ZephyrEditor"
-}, I = /* @__PURE__ */ d({
-  ...x,
+}, oe = /* @__PURE__ */ v({
+  ...te,
   props: {
     modelValue: {
       type: String,
@@ -93,69 +93,246 @@ const x = {
     }
   },
   emits: ["update:modelValue", "load"],
-  setup(o, { expose: e, emit: i }) {
-    const r = o, s = i;
-    let n = null;
-    const h = L(null);
-    let a = null;
-    const _ = (t, g) => {
-      a && l.languages.registerCompletionItemProvider(t, g);
-    }, y = (t) => {
-      if (n)
-        return n.registerTheme(t).then(() => {
-          l.editor.setTheme(t);
-        }).catch((g) => {
-          console.error(g);
+  setup(t, { expose: e, emit: n }) {
+    const i = t, a = n;
+    let r = null;
+    const u = $(null);
+    let s = null;
+    const c = (o, h) => {
+      s && p.languages.registerCompletionItemProvider(o, h);
+    }, l = (o) => {
+      if (r)
+        return r.registerTheme(o).then(() => {
+          p.editor.setTheme(o);
+        }).catch((h) => {
+          console.error(h);
         });
-    }, v = (t) => {
-      if (n)
-        return n.registerLanguage(t).then(() => {
-          l.languages.register(t);
+    }, d = (o) => {
+      if (r)
+        return r.registerLanguage(o).then(() => {
+          p.languages.register(o);
         });
     };
-    return k(async () => {
-      if (h.value) {
-        n = new b();
+    return S(async () => {
+      if (u.value) {
+        r = new ee();
         try {
-          await n.init();
-          const t = n.getHighlighter();
-          if (!t) return;
-          r.options?.language && (await n.registerLanguage(r.options?.language), l.languages.register({ id: r.options?.language })), r.options?.theme && (await n.registerTheme(r.options?.theme), l.editor.setTheme(r.options?.theme)), B(t, l), a = l.editor.create(h.value, {
-            value: r.modelValue,
-            ...r.options || {}
-          }), a.onDidChangeModelContent(() => {
-            s("update:modelValue", a?.getValue());
-          }), s("load", { state: "success", editor: a, highlighter: n, highlighterInstance: t });
-        } catch (t) {
-          console.log("editor is init failed", t), s("load", { state: "error", error: t });
+          await r.init();
+          const o = r.getHighlighter();
+          if (!o) return;
+          i.options?.language && (await r.registerLanguage(i.options?.language), p.languages.register({ id: i.options?.language })), i.options?.theme && (await r.registerTheme(i.options?.theme), p.editor.setTheme(i.options?.theme)), Q(o, p), s = p.editor.create(u.value, {
+            value: i.modelValue,
+            ...i.options || {}
+          }), s.onDidChangeModelContent(() => {
+            a("update:modelValue", s?.getValue());
+          }), a("load", { state: "success", editor: s, highlighter: r, highlighterInstance: o });
+        } catch (o) {
+          console.log("editor is init failed", o), a("load", { state: "error", error: o });
         }
       }
-    }), w(() => {
-      a && a.dispose();
+    }), Z(() => {
+      s && s.dispose();
     }), e({
       // 注册提示词
-      registerCompletionItemProvider: _,
+      registerCompletionItemProvider: c,
       // 注册/切换主题
-      changeTheme: y,
+      changeTheme: l,
       // 注册语言
-      registerLanguage: v
-    }), (t, g) => (p(), m("div", {
+      registerLanguage: d
+    }), (o, h) => (C(), B("div", {
       class: "zephyr-editor_container",
       ref_key: "monacoEditorRef",
-      ref: h
+      ref: u
     }, null, 512));
   }
-}), u = /* @__PURE__ */ f(I, [["__scopeId", "data-v-3ceef597"]]);
-u.install = (o) => {
-  o.component("ZzButton", u);
+}), z = /* @__PURE__ */ E(oe, [["__scopeId", "data-v-3ceef597"]]);
+z.install = (t) => {
+  t.component("ZzButton", z);
 };
-const V = [c, u], M = {
-  install(o) {
-    V.forEach((e) => o.component(e.name || "ZzButton", e));
+const ne = /* @__PURE__ */ v({
+  name: "wrapperHelper",
+  props: {
+    is: {
+      type: [String, Object, Function],
+      default: null
+    },
+    show: {
+      type: Boolean,
+      default: !0
+    },
+    isProps: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(t, {
+    slots: e
+  }) {
+    return () => {
+      const {
+        is: n,
+        show: i,
+        isProps: a
+      } = t;
+      if (!i) return null;
+      if (!n) return e.default?.();
+      let r = null, u = {
+        ...a
+      }, s = {};
+      if (O(n))
+        r = n.type, u = {
+          ...n.props,
+          ...a
+        }, s = n.children || {};
+      else if (typeof n == "function") {
+        const l = n();
+        O(l) ? (r = l.type, u = {
+          ...l.props,
+          ...a
+        }, s = l.children || {}) : r = l;
+      } else (typeof n == "object" || typeof n == "string") && (r = n);
+      const c = {};
+      e.default && (c.default = () => e.default());
+      for (const l in e)
+        l !== "default" && (c[l] = () => e[l]());
+      return typeof s == "object" && Object.assign(c, s), j(r, u, c);
+    };
+  }
+});
+function re(t, e) {
+  return I() ? (M(t, e), !0) : !1;
+}
+const ie = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+function se(t) {
+  return Array.isArray(t) ? t : [t];
+}
+function ae(t) {
+  return R();
+}
+function ue(t, e = !0, n) {
+  ae() ? S(t, n) : e ? t() : H(t);
+}
+const P = ie ? window : void 0;
+function g(t) {
+  var e;
+  const n = V(t);
+  return (e = n?.$el) !== null && e !== void 0 ? e : n;
+}
+// @__NO_SIDE_EFFECTS__
+function le() {
+  const t = w(!1), e = R();
+  return e && S(() => {
+    t.value = !0;
+  }, e), t;
+}
+// @__NO_SIDE_EFFECTS__
+function ce(t) {
+  const e = /* @__PURE__ */ le();
+  return k(() => (e.value, !!t()));
+}
+function de(t, e, n = {}) {
+  const { window: i = P, ...a } = n;
+  let r;
+  const u = /* @__PURE__ */ ce(() => i && "ResizeObserver" in i), s = () => {
+    r && (r.disconnect(), r = void 0);
+  }, c = L(k(() => {
+    const d = V(t);
+    return Array.isArray(d) ? d.map((o) => g(o)) : [g(d)];
+  }), (d) => {
+    if (s(), u.value && i) {
+      r = new ResizeObserver(e);
+      for (const o of d) o && r.observe(o, a);
+    }
+  }, {
+    immediate: !0,
+    flush: "post"
+  }), l = () => {
+    s(), c();
+  };
+  return re(l), {
+    isSupported: u,
+    stop: l
+  };
+}
+function he(t, e = {
+  width: 0,
+  height: 0
+}, n = {}) {
+  const { window: i = P, box: a = "content-box" } = n, r = k(() => {
+    var o;
+    return (o = g(t)) === null || o === void 0 || (o = o.namespaceURI) === null || o === void 0 ? void 0 : o.includes("svg");
+  }), u = w(e.width), s = w(e.height), { stop: c } = de(t, ([o]) => {
+    const h = a === "border-box" ? o.borderBoxSize : a === "content-box" ? o.contentBoxSize : o.devicePixelContentBoxSize;
+    if (i && r.value) {
+      const m = g(t);
+      if (m) {
+        const f = m.getBoundingClientRect();
+        u.value = f.width, s.value = f.height;
+      }
+    } else if (h) {
+      const m = se(h);
+      u.value = m.reduce((f, { inlineSize: y }) => f + y, 0), s.value = m.reduce((f, { blockSize: y }) => f + y, 0);
+    } else
+      u.value = o.contentRect.width, s.value = o.contentRect.height;
+  }, n);
+  ue(() => {
+    const o = g(t);
+    o && (u.value = "offsetWidth" in o ? o.offsetWidth : e.width, s.value = "offsetHeight" in o ? o.offsetHeight : e.height);
+  });
+  const l = L(() => g(t), (o) => {
+    u.value = o ? e.width : 0, s.value = o ? e.height : 0;
+  });
+  function d() {
+    c(), l();
+  }
+  return {
+    width: u,
+    height: s,
+    stop: d
+  };
+}
+const pe = { class: "zephyr-ui_wrapper" }, fe = {
+  name: "ZephyrWrapper"
+}, x = /* @__PURE__ */ v({
+  ...fe,
+  props: {
+    is: { type: [String, Object, Function], default: null },
+    show: { type: Boolean, default: !0 },
+    isProps: { type: Object, default: () => ({}) }
+  },
+  setup(t) {
+    const e = t, n = $(), { height: i } = he(n);
+    return (a, r) => (C(), B("div", pe, [
+      A("div", {
+        class: "zephyr-wrapper_container",
+        ref_key: "wrapperRef",
+        ref: n
+      }, [
+        D(T(ne), G(F(e)), U({ _: 2 }, [
+          q(Object.keys(a.$slots), (u, s) => ({
+            name: u,
+            fn: J(() => [
+              _(a.$slots, u)
+            ])
+          }))
+        ]), 1040)
+      ], 512),
+      T(i) ? N("", !0) : _(a.$slots, "default", { key: 0 })
+    ]));
+  }
+});
+x.install = (t) => {
+  t.component("ZephyrWrapper", x);
+};
+const ge = [b, z, x], _e = {
+  install(t) {
+    ge.forEach((e) => t.component(e.name || "ZzButton", e));
   }
 };
 export {
-  u as ZephyrEditor,
-  c as ZzButton,
-  M as default
+  z as ZephyrEditor,
+  x as ZephyrWrapper,
+  b as ZzButton,
+  _e as default
 };

package/dist/zephyr-ui.umd.js

@@ -1,2 +1,2 @@
-(function(a,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("monaco-editor-core"),require("@shikijs/monaco"),require("shiki")):typeof define=="function"&&define.amd?define(["exports","vue","monaco-editor-core","@shikijs/monaco","shiki"],n):(a=typeof globalThis<"u"?globalThis:a||self,n(a.ZephyrUI={},a.Vue,a.monaco,a.monaco$1,a.shiki))})(this,(function(a,n,_,y,z){"use strict";var p=document.createElement("style");p.textContent=`.zz-button[data-v-7c55743a]{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:.2s}.zz-button--primary[data-v-7c55743a]{background:#409eff;color:#fff}.zz-button--success[data-v-7c55743a]{background:#67c23a;color:#fff}.zz-button--warning[data-v-7c55743a]{background:#e6a23c;color:#fff}.zz-button--danger[data-v-7c55743a]{background:#f56c6c;color:#fff}.zephyr-editor_container[data-v-3ceef597]{width:100%;height:100%}
-/*$vite$:1*/`,document.head.appendChild(p);function b(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const o=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,o.get?o:{enumerable:!0,get:()=>t[i]})}}return e.default=t,Object.freeze(e)}const u=b(_),k={name:"ZzButton"},v=n.defineComponent({...k,props:{type:{type:String,default:"primary"}},setup(t){return(e,i)=>(n.openBlock(),n.createElementBlock("button",{class:n.normalizeClass(["zz-button",`zz-button--${t.type}`])},[n.renderSlot(e.$slots,"default",{},void 0,!0)],2))}}),m=(t,e)=>{const i=t.__vccOpts||t;for(const[o,c]of e)i[o]=c;return i},h=m(v,[["__scopeId","data-v-7c55743a"]]);h.install=t=>{t.component("ZzButton",h)};class T{highlighter=null;constructor(){}async init(){try{const e=await z.createHighlighter({themes:["github-dark","vitesse-dark"],langs:["ts","vue"]});this.highlighter=e}catch(e){console.log("高亮器初始化失败",e)}}getHighlighter(){return this.highlighter}getLanguages(){return this.highlighter?.getLoadedLanguages()||[]}getThemes(){return this.highlighter?.getLoadedThemes()||[]}registerLanguage(e){return new Promise((i,o)=>{try{this.highlighter&&!this.getLanguages().includes(e)&&this.highlighter.loadLanguage(e),i(!0)}catch(c){o(c)}})}registerTheme(e){return new Promise((i,o)=>{try{this.highlighter&&!this.getThemes().includes(e)&&this.highlighter.loadTheme(e),i(!0)}catch(c){o(c)}})}}const w={name:"ZephyrEditor"},B=n.defineComponent({...w,props:{modelValue:{type:String,default:""},options:{type:Object,default:null}},emits:["update:modelValue","load"],setup(t,{expose:e,emit:i}){const o=t,c=i;let s=null;const f=n.ref(null);let l=null;const Z=(r,g)=>{l&&u.languages.registerCompletionItemProvider(r,g)},j=r=>{if(s)return s.registerTheme(r).then(()=>{u.editor.setTheme(r)}).catch(g=>{console.error(g)})},C=r=>{if(s)return s.registerLanguage(r).then(()=>{u.languages.register(r)})};return n.onMounted(async()=>{if(f.value){s=new T;try{await s.init();const r=s.getHighlighter();if(!r)return;o.options?.language&&(await s.registerLanguage(o.options?.language),u.languages.register({id:o.options?.language})),o.options?.theme&&(await s.registerTheme(o.options?.theme),u.editor.setTheme(o.options?.theme)),y.shikiToMonaco(r,u),l=u.editor.create(f.value,{value:o.modelValue,...o.options||{}}),l.onDidChangeModelContent(()=>{c("update:modelValue",l?.getValue())}),c("load",{state:"success",editor:l,highlighter:s,highlighterInstance:r})}catch(r){console.log("editor is init failed",r),c("load",{state:"error",error:r})}}}),n.onUnmounted(()=>{l&&l.dispose()}),e({registerCompletionItemProvider:Z,changeTheme:j,registerLanguage:C}),(r,g)=>(n.openBlock(),n.createElementBlock("div",{class:"zephyr-editor_container",ref_key:"monacoEditorRef",ref:f},null,512))}}),d=m(B,[["__scopeId","data-v-3ceef597"]]);d.install=t=>{t.component("ZzButton",d)};const E=[h,d],L={install(t){E.forEach(e=>t.component(e.name||"ZzButton",e))}};a.ZephyrEditor=d,a.ZzButton=h,a.default=L,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("monaco-editor-core"),require("@shikijs/monaco"),require("shiki")):typeof define=="function"&&define.amd?define(["exports","vue","monaco-editor-core","@shikijs/monaco","shiki"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.ZephyrUI={},u.Vue,u.monaco,u.monaco$1,u.shiki))})(this,(function(u,e,O,T,j){"use strict";var C=document.createElement("style");C.textContent=`.zz-button[data-v-7c55743a]{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:.2s}.zz-button--primary[data-v-7c55743a]{background:#409eff;color:#fff}.zz-button--success[data-v-7c55743a]{background:#67c23a;color:#fff}.zz-button--warning[data-v-7c55743a]{background:#e6a23c;color:#fff}.zz-button--danger[data-v-7c55743a]{background:#f56c6c;color:#fff}.zephyr-editor_container[data-v-3ceef597]{width:100%;height:100%}
+/*$vite$:1*/`,document.head.appendChild(C);function x(o){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const r in o)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:()=>o[r]})}}return t.default=o,Object.freeze(t)}const p=x(O),$={name:"ZzButton"},E=e.defineComponent({...$,props:{type:{type:String,default:"primary"}},setup(o){return(t,r)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["zz-button",`zz-button--${o.type}`])},[e.renderSlot(t.$slots,"default",{},void 0,!0)],2))}}),S=(o,t)=>{const r=o.__vccOpts||o;for(const[i,c]of t)r[i]=c;return r},w=S(E,[["__scopeId","data-v-7c55743a"]]);w.install=o=>{o.component("ZzButton",w)};class R{highlighter=null;constructor(){}async init(){try{const t=await j.createHighlighter({themes:["github-dark","vitesse-dark"],langs:["ts","vue"]});this.highlighter=t}catch(t){console.log("高亮器初始化失败",t)}}getHighlighter(){return this.highlighter}getLanguages(){return this.highlighter?.getLoadedLanguages()||[]}getThemes(){return this.highlighter?.getLoadedThemes()||[]}registerLanguage(t){return new Promise((r,i)=>{try{this.highlighter&&!this.getLanguages().includes(t)&&this.highlighter.loadLanguage(t),r(!0)}catch(c){i(c)}})}registerTheme(t){return new Promise((r,i)=>{try{this.highlighter&&!this.getThemes().includes(t)&&this.highlighter.loadTheme(t),r(!0)}catch(c){i(c)}})}}const V={name:"ZephyrEditor"},v=e.defineComponent({...V,props:{modelValue:{type:String,default:""},options:{type:Object,default:null}},emits:["update:modelValue","load"],setup(o,{expose:t,emit:r}){const i=o,c=r;let s=null;const l=e.ref(null);let a=null;const f=(n,g)=>{a&&p.languages.registerCompletionItemProvider(n,g)},d=n=>{if(s)return s.registerTheme(n).then(()=>{p.editor.setTheme(n)}).catch(g=>{console.error(g)})},h=n=>{if(s)return s.registerLanguage(n).then(()=>{p.languages.register(n)})};return e.onMounted(async()=>{if(l.value){s=new R;try{await s.init();const n=s.getHighlighter();if(!n)return;i.options?.language&&(await s.registerLanguage(i.options?.language),p.languages.register({id:i.options?.language})),i.options?.theme&&(await s.registerTheme(i.options?.theme),p.editor.setTheme(i.options?.theme)),T.shikiToMonaco(n,p),a=p.editor.create(l.value,{value:i.modelValue,...i.options||{}}),a.onDidChangeModelContent(()=>{c("update:modelValue",a?.getValue())}),c("load",{state:"success",editor:a,highlighter:s,highlighterInstance:n})}catch(n){console.log("editor is init failed",n),c("load",{state:"error",error:n})}}}),e.onUnmounted(()=>{a&&a.dispose()}),t({registerCompletionItemProvider:f,changeTheme:d,registerLanguage:h}),(n,g)=>(e.openBlock(),e.createElementBlock("div",{class:"zephyr-editor_container",ref_key:"monacoEditorRef",ref:l},null,512))}}),b=S(v,[["__scopeId","data-v-3ceef597"]]);b.install=o=>{o.component("ZzButton",b)};const P=e.defineComponent({name:"wrapperHelper",props:{is:{type:[String,Object,Function],default:null},show:{type:Boolean,default:!0},isProps:{type:Object,default:()=>({})}},setup(o,{slots:t}){return()=>{const{is:r,show:i,isProps:c}=o;if(!i)return null;if(!r)return t.default?.();let s=null,l={...c},a={};if(e.isVNode(r))s=r.type,l={...r.props,...c},a=r.children||{};else if(typeof r=="function"){const d=r();e.isVNode(d)?(s=d.type,l={...d.props,...c},a=d.children||{}):s=d}else(typeof r=="object"||typeof r=="string")&&(s=r);const f={};t.default&&(f.default=()=>t.default());for(const d in t)d!=="default"&&(f[d]=()=>t[d]());return typeof a=="object"&&Object.assign(f,a),e.h(s,l,f)}}});function Z(o,t){return e.getCurrentScope()?(e.onScopeDispose(o,t),!0):!1}const L=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;function M(o){return Array.isArray(o)?o:[o]}function W(o){return e.getCurrentInstance()}function I(o,t=!0,r){W()?e.onMounted(o,r):t?o():e.nextTick(o)}const B=L?window:void 0;function m(o){var t;const r=e.toValue(o);return(t=r?.$el)!==null&&t!==void 0?t:r}function H(){const o=e.shallowRef(!1),t=e.getCurrentInstance();return t&&e.onMounted(()=>{o.value=!0},t),o}function N(o){const t=H();return e.computed(()=>(t.value,!!o()))}function A(o,t,r={}){const{window:i=B,...c}=r;let s;const l=N(()=>i&&"ResizeObserver"in i),a=()=>{s&&(s.disconnect(),s=void 0)},f=e.watch(e.computed(()=>{const h=e.toValue(o);return Array.isArray(h)?h.map(n=>m(n)):[m(h)]}),h=>{if(a(),l.value&&i){s=new ResizeObserver(t);for(const n of h)n&&s.observe(n,c)}},{immediate:!0,flush:"post"}),d=()=>{a(),f()};return Z(d),{isSupported:l,stop:d}}function D(o,t={width:0,height:0},r={}){const{window:i=B,box:c="content-box"}=r,s=e.computed(()=>{var n;return(n=m(o))===null||n===void 0||(n=n.namespaceURI)===null||n===void 0?void 0:n.includes("svg")}),l=e.shallowRef(t.width),a=e.shallowRef(t.height),{stop:f}=A(o,([n])=>{const g=c==="border-box"?n.borderBoxSize:c==="content-box"?n.contentBoxSize:n.devicePixelContentBoxSize;if(i&&s.value){const _=m(o);if(_){const y=_.getBoundingClientRect();l.value=y.width,a.value=y.height}}else if(g){const _=M(g);l.value=_.reduce((y,{inlineSize:k})=>y+k,0),a.value=_.reduce((y,{blockSize:k})=>y+k,0)}else l.value=n.contentRect.width,a.value=n.contentRect.height},r);I(()=>{const n=m(o);n&&(l.value="offsetWidth"in n?n.offsetWidth:t.width,a.value="offsetHeight"in n?n.offsetHeight:t.height)});const d=e.watch(()=>m(o),n=>{l.value=n?t.width:0,a.value=n?t.height:0});function h(){f(),d()}return{width:l,height:a,stop:h}}const q={class:"zephyr-ui_wrapper"},G={name:"ZephyrWrapper"},z=e.defineComponent({...G,props:{is:{type:[String,Object,Function],default:null},show:{type:Boolean,default:!0},isProps:{type:Object,default:()=>({})}},setup(o){const t=o,r=e.ref(),{height:i}=D(r);return(c,s)=>(e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("div",{class:"zephyr-wrapper_container",ref_key:"wrapperRef",ref:r},[e.createVNode(e.unref(P),e.normalizeProps(e.guardReactiveProps(t)),e.createSlots({_:2},[e.renderList(Object.keys(c.$slots),(l,a)=>({name:l,fn:e.withCtx(()=>[e.renderSlot(c.$slots,l)])}))]),1040)],512),e.unref(i)?e.createCommentVNode("",!0):e.renderSlot(c.$slots,"default",{key:0})]))}});z.install=o=>{o.component("ZephyrWrapper",z)};const U=[w,b,z],F={install(o){U.forEach(t=>o.component(t.name||"ZzButton",t))}};u.ZephyrEditor=b,u.ZephyrWrapper=z,u.ZzButton=w,u.default=F,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -11,7 +11,7 @@
       "types": "./dist/types/index.d.ts"
     }
   },
-  "version": "0.0.19",
+  "version": "0.0.20",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -20,13 +20,16 @@
   },
   "dependencies": {
     "@shikijs/monaco": "1.29.2",
+    "@vueuse/core": "^14.0.0",
     "monaco-editor-core": "0.52.2",
     "shiki": "1.29.2"
   },
   "devDependencies": {
     "@types/node": "^24.6.0",
     "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue-jsx": "^5.1.1",
     "@vue/tsconfig": "^0.8.1",
+    "element-plus": "^2.11.5",
     "sass": "^1.93.2",
     "sass-embedded": "^1.93.2",
     "typescript": "~5.9.3",