@zephyr_zz/zephyr-ui 0.0.16 → 0.0.18

package/dist/index.css

@@ -1 +1 @@
-.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}
+.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-96a99f7a]{width:100%;height:100%}

package/dist/types/editor/Highlighter.d.ts

@@ -0,0 +1,11 @@
+import { BundledLanguage, BundledTheme, HighlighterGeneric } from 'shiki';
+export declare class Highlighter {
+    private highlighter;
+    constructor();
+    init(): Promise<void>;
+    getHighlighter(): HighlighterGeneric<BundledLanguage, BundledTheme> | null;
+    getLanguages(): string[];
+    getThemes(): string[];
+    registerLanguage(lang: BundledLanguage): Promise<unknown>;
+    registerTheme(theme: BundledTheme): Promise<unknown>;
+}

package/dist/types/editor/ZephyrEditor.vue.d.ts

@@ -0,0 +1,37 @@
+import { PropType } from 'vue';
+import { Highlighter } from './Highlighter';
+import * as monaco from 'monaco-editor-core';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: PropType<monaco.editor.IStandaloneEditorConstructionOptions>;
+        default: null;
+    };
+}>, {
+    getText: () => string;
+    getEditor: () => monaco.editor.IStandaloneCodeEditor | null;
+    registerCompletionItemProvider: (languageSelector: monaco.languages.LanguageSelector, provider: monaco.languages.CompletionItemProvider) => void;
+    getHighlighter: () => Highlighter | null;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: PropType<monaco.editor.IStandaloneEditorConstructionOptions>;
+        default: null;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: string;
+    options: monaco.editor.IStandaloneEditorConstructionOptions;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    monacoEditorRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

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

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

package/dist/types/index.d.ts

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

package/dist/zephyr-ui.es.js

@@ -1,9 +1,12 @@
 import './index.css';
-import { defineComponent as c, createElementBlock as r, openBlock as l, normalizeClass as p, renderSlot as u } from "vue";
-const _ = {
+import { defineComponent as d, createElementBlock as m, openBlock as p, normalizeClass as v, renderSlot as z, ref as E, onMounted as L, onUnmounted as T } from "vue";
+import * as l from "monaco-editor-core";
+import { shikiToMonaco as k } from "@shikijs/monaco";
+import { createHighlighter as w } from "shiki";
+const B = {
   name: "ZzButton"
-}, m = /* @__PURE__ */ c({
-  ..._,
+}, Z = /* @__PURE__ */ d({
+  ...B,
   props: {
     type: {
       type: String,
@@ -11,27 +14,138 @@ const _ = {
     }
   },
   setup(t) {
-    return (o, n) => (l(), r("button", {
-      class: p(["zz-button", `zz-button--${t.type}`])
+    return (e, r) => (p(), m("button", {
+      class: v(["zz-button", `zz-button--${t.type}`])
     }, [
-      u(o.$slots, "default", {}, void 0, !0)
+      z(e.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), d = (t, o) => {
-  const n = t.__vccOpts || t;
-  for (const [s, a] of o)
-    n[s] = a;
-  return n;
-}, e = /* @__PURE__ */ d(m, [["__scopeId", "data-v-7c55743a"]]);
-e.install = (t) => {
-  t.component("ZzButton", e);
+}), f = (t, e) => {
+  const r = t.__vccOpts || t;
+  for (const [o, n] of e)
+    r[o] = n;
+  return r;
+}, h = /* @__PURE__ */ f(Z, [["__scopeId", "data-v-7c55743a"]]);
+h.install = (t) => {
+  t.component("ZzButton", h);
 };
-const f = [e], z = {
+class x {
+  highlighter = null;
+  constructor() {
+  }
+  async init() {
+    try {
+      const e = await w({
+        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((r, o) => {
+      try {
+        this.highlighter && !this.getLanguages().includes(e) && this.highlighter.loadLanguage(e), r(!0);
+      } catch (n) {
+        o(n);
+      }
+    });
+  }
+  // 注册主题
+  registerTheme(e) {
+    return new Promise((r, o) => {
+      try {
+        this.highlighter && !this.getThemes().includes(e) && this.highlighter.loadTheme(e), r(!0);
+      } catch (n) {
+        o(n);
+      }
+    });
+  }
+}
+const C = {
+  name: "ZephyrEditor"
+}, V = /* @__PURE__ */ d({
+  ...C,
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    options: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { expose: e, emit: r }) {
+    const o = t, n = r;
+    let a = null;
+    const g = E(null);
+    let i = null;
+    const _ = () => i?.getValue() || "", y = (s, c) => {
+      i && l.languages.registerCompletionItemProvider(s, c);
+    };
+    return L(async () => {
+      if (g.value) {
+        a || (a = new x());
+        try {
+          await a.init();
+          const s = a.getHighlighter();
+          if (!s) return;
+          o.options?.language && (await a.registerLanguage(o.options?.language), l.languages.register({ id: o.options?.language })), o.options?.theme && await a.registerTheme(o.options?.theme), k(s, l), i = l.editor.create(g.value, {
+            value: o.modelValue,
+            ...o.options || {}
+          }), i.onDidChangeModelContent(() => {
+            n("update:modelValue", i?.getValue());
+          });
+        } catch (s) {
+          console.log("editor is init failed", s);
+        }
+      }
+    }), T(() => {
+      i && i.dispose();
+    }), e({
+      // 获取编辑器内容
+      getText: _,
+      // 获取当前实例
+      getEditor: () => i,
+      // 注册提示词
+      registerCompletionItemProvider: y,
+      // 获取高亮器
+      getHighlighter: () => a
+    }), (s, c) => (p(), m("div", {
+      class: "zephyr-editor_container",
+      ref_key: "monacoEditorRef",
+      ref: g
+    }, null, 512));
+  }
+}), u = /* @__PURE__ */ f(V, [["__scopeId", "data-v-96a99f7a"]]);
+u.install = (t) => {
+  t.component("ZzButton", u);
+};
+const b = [h, u], $ = {
   install(t) {
-    f.forEach((o) => t.component(o.name || "ZzButton", o));
+    b.forEach((e) => t.component(e.name || "ZzButton", e));
   }
 };
 export {
-  e as ZzButton,
-  z as default
+  u as ZephyrEditor,
+  h as ZzButton,
+  $ as default
 };

package/dist/zephyr-ui.umd.js

@@ -1,2 +1,2 @@
-(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.ZephyrUI={},e.Vue))})(this,(function(e,t){"use strict";var r=document.createElement("style");r.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}
-/*$vite$:1*/`,document.head.appendChild(r);const u={name:"ZzButton"},d=t.defineComponent({...u,props:{type:{type:String,default:"primary"}},setup(n){return(o,c)=>(t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(["zz-button",`zz-button--${n.type}`])},[t.renderSlot(o.$slots,"default",{},void 0,!0)],2))}}),a=((n,o)=>{const c=n.__vccOpts||n;for(const[i,p]of o)c[i]=p;return c})(d,[["__scopeId","data-v-7c55743a"]]);a.install=n=>{n.component("ZzButton",a)};const s=[a],f={install(n){s.forEach(o=>n.component(o.name||"ZzButton",o))}};e.ZzButton=a,e.default=f,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(i,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):(i=typeof globalThis<"u"?globalThis:i||self,n(i.ZephyrUI={},i.Vue,i.monaco,i.monaco$1,i.shiki))})(this,(function(i,n,_,y,z){"use strict";var f=document.createElement("style");f.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-96a99f7a]{width:100%;height:100%}
+/*$vite$:1*/`,document.head.appendChild(f);function b(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,o.get?o:{enumerable:!0,get:()=>t[r]})}}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,r)=>(n.openBlock(),n.createElementBlock("button",{class:n.normalizeClass(["zz-button",`zz-button--${t.type}`])},[n.renderSlot(e.$slots,"default",{},void 0,!0)],2))}}),p=(t,e)=>{const r=t.__vccOpts||t;for(const[o,s]of e)r[o]=s;return r},g=p(v,[["__scopeId","data-v-7c55743a"]]);g.install=t=>{t.component("ZzButton",g)};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((r,o)=>{try{this.highlighter&&!this.getLanguages().includes(e)&&this.highlighter.loadLanguage(e),r(!0)}catch(s){o(s)}})}registerTheme(e){return new Promise((r,o)=>{try{this.highlighter&&!this.getThemes().includes(e)&&this.highlighter.loadTheme(e),r(!0)}catch(s){o(s)}})}}const w={name:"ZephyrEditor"},E=n.defineComponent({...w,props:{modelValue:{type:String,default:""},options:{type:Object,default:null}},emits:["update:modelValue"],setup(t,{expose:e,emit:r}){const o=t,s=r;let c=null;const h=n.ref(null);let a=null;const j=()=>a?.getValue()||"",x=(l,m)=>{a&&u.languages.registerCompletionItemProvider(l,m)};return n.onMounted(async()=>{if(h.value){c||(c=new T);try{await c.init();const l=c.getHighlighter();if(!l)return;o.options?.language&&(await c.registerLanguage(o.options?.language),u.languages.register({id:o.options?.language})),o.options?.theme&&await c.registerTheme(o.options?.theme),y.shikiToMonaco(l,u),a=u.editor.create(h.value,{value:o.modelValue,...o.options||{}}),a.onDidChangeModelContent(()=>{s("update:modelValue",a?.getValue())})}catch(l){console.log("editor is init failed",l)}}}),n.onUnmounted(()=>{a&&a.dispose()}),e({getText:j,getEditor:()=>a,registerCompletionItemProvider:x,getHighlighter:()=>c}),(l,m)=>(n.openBlock(),n.createElementBlock("div",{class:"zephyr-editor_container",ref_key:"monacoEditorRef",ref:h},null,512))}}),d=p(E,[["__scopeId","data-v-96a99f7a"]]);d.install=t=>{t.component("ZzButton",d)};const B=[g,d],Z={install(t){B.forEach(e=>t.component(e.name||"ZzButton",e))}};i.ZephyrEditor=d,i.ZzButton=g,i.default=Z,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -11,7 +11,7 @@
       "types": "./dist/types/index.d.ts"
     }
   },
-  "version": "0.0.16",
+  "version": "0.0.18",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,18 +19,21 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "sass": "^1.93.2",
-    "vue": "^3.5.22"
+    "@shikijs/monaco": "1.29.2",
+    "monaco-editor-core": "0.52.2",
+    "shiki": "1.29.2"
   },
   "devDependencies": {
     "@types/node": "^24.6.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.8.1",
+    "sass": "^1.93.2",
     "sass-embedded": "^1.93.2",
     "typescript": "~5.9.3",
     "vite": "^7.1.7",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-libcss": "^1.1.2",
+    "vue": "^3.5.22",
     "vue-tsc": "^3.1.0"
   },
   "files": [