jky-component-lib 0.0.49 → 0.0.54

package/dist/es/code-mirror-editor/CodeMirrorEditor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/es/code-mirror-editor/CodeMirrorEditor.vue.d.ts

@@ -0,0 +1,25 @@
+import { CodeMirrorEditorProps } from './types';
+import { EditorView } from '@codemirror/view';
+declare const _default: import('vue').DefineComponent<CodeMirrorEditorProps, {
+    getEditor: () => EditorView | null;
+    getContent: () => string;
+    setContent: (content: string) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<CodeMirrorEditorProps> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    modelValue: string;
+    height: string;
+    readonly: boolean;
+    language: "javascript" | "typescript" | "json" | "css";
+    theme: "oneDark" | "default";
+    lineNumbers: boolean;
+    lineWrapping: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    editorRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/es/code-mirror-editor/CodeMirrorEditor.vue.js

@@ -0,0 +1,178 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, normalizeStyle, createElementVNode } from "vue";
+import { css } from "@codemirror/lang-css";
+import { javascript } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import { EditorState } from "@codemirror/state";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { EditorView, lineNumbers } from "@codemirror/view";
+import { basicSetup } from "codemirror";
+const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
+  name: "JkyCodeMirrorEditor"
+}), {
+  __name: "CodeMirrorEditor",
+  props: {
+    modelValue: { default: "" },
+    height: { default: "400px" },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    language: { default: "javascript" },
+    theme: { default: "oneDark" },
+    lineNumbers: { type: Boolean, default: true },
+    lineWrapping: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    var _a;
+    const props = __props;
+    const emit = __emit;
+    const editorRef = ref();
+    let editorView = null;
+    let innerValue = (_a = props.modelValue) != null ? _a : "";
+    function getLanguageExtension(language) {
+      switch (language) {
+        case "typescript":
+        case "javascript":
+          return javascript({
+            jsx: true,
+            typescript: language === "typescript"
+          });
+        case "json":
+          return json();
+        case "css":
+          return css();
+        default:
+          return javascript();
+      }
+    }
+    function initializeEditor() {
+      if (!editorRef.value)
+        return;
+      const extensions = [
+        basicSetup,
+        getLanguageExtension(props.language),
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            const newValue = update.state.doc.toString();
+            innerValue = newValue;
+            emit("change", newValue);
+            emit("update:modelValue", newValue);
+          }
+        }),
+        EditorView.editable.of(!props.disabled && !props.readonly),
+        EditorState.readOnly.of(props.readonly)
+      ];
+      if (props.theme === "oneDark") {
+        extensions.push(oneDark);
+      }
+      if (!props.lineNumbers) {
+        extensions.push(lineNumbers());
+      }
+      if (props.lineWrapping) {
+        extensions.push(EditorView.lineWrapping);
+      }
+      try {
+        editorView = new EditorView({
+          state: EditorState.create({
+            doc: innerValue,
+            extensions
+          }),
+          parent: editorRef.value
+        });
+      } catch (error) {
+        console.error("Failed to initialize CodeMirror Editor:", error);
+      }
+    }
+    watch(() => props.modelValue, (newValue) => {
+      if (newValue !== innerValue && editorView) {
+        const currentContent = editorView.state.doc.toString();
+        if (currentContent !== newValue) {
+          editorView.dispatch({
+            changes: {
+              from: 0,
+              to: currentContent.length,
+              insert: newValue
+            }
+          });
+          innerValue = newValue;
+        }
+      }
+    });
+    watch(() => props.language, () => {
+      if (editorView) {
+        const currentValue = editorView.state.doc.toString();
+        editorView.destroy();
+        innerValue = currentValue;
+        initializeEditor();
+      }
+    });
+    watch([() => props.disabled, () => props.readonly], () => {
+      if (editorView) {
+        const currentValue = editorView.state.doc.toString();
+        editorView.destroy();
+        innerValue = currentValue;
+        initializeEditor();
+      }
+    });
+    onMounted(() => {
+      initializeEditor();
+    });
+    onUnmounted(() => {
+      if (editorView) {
+        editorView.destroy();
+        editorView = null;
+      }
+    });
+    __expose({
+      getEditor: () => editorView,
+      getContent: () => {
+        var _a2;
+        return (_a2 = editorView == null ? void 0 : editorView.state.doc.toString()) != null ? _a2 : "";
+      },
+      setContent: (content) => {
+        if (editorView) {
+          editorView.dispatch({
+            changes: {
+              from: 0,
+              to: editorView.state.doc.length,
+              insert: content
+            }
+          });
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "j-code-mirror-editor",
+        style: normalizeStyle({ height: __props.height })
+      }, [
+        createElementVNode("div", {
+          ref_key: "editorRef",
+          ref: editorRef,
+          class: "code-mirror-container"
+        }, null, 512)
+      ], 4);
+    };
+  }
+}));
+export {
+  _sfc_main as default
+};

package/dist/es/code-mirror-editor/CodeMirrorEditor.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./CodeMirrorEditor.vue.js";
+/* empty css                      */
+export {
+  _sfc_main as default
+};

package/dist/es/code-mirror-editor/index.d.ts

@@ -0,0 +1,4 @@
+import { InstallWithSFC } from '../utils';
+import { default as CodeMirrorEditor } from './CodeMirrorEditor.vue';
+export declare const JkyCodeMirrorEditor: InstallWithSFC<typeof CodeMirrorEditor>;
+export default JkyCodeMirrorEditor;

package/dist/es/code-mirror-editor/index.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./CodeMirrorEditor.vue.js";
+/* empty css                      */
+import { installWithSFC } from "../utils/with-install.js";
+const JkyCodeMirrorEditor = installWithSFC(_sfc_main);
+export {
+  JkyCodeMirrorEditor,
+  JkyCodeMirrorEditor as default
+};

package/dist/es/code-mirror-editor/style.css

@@ -0,0 +1,44 @@
+:root {
+  /* CodeMirror 编辑器基础样式变量 */
+  --j-code-mirror-border-color: #dcdfe6;
+  --j-code-mirror-border-radius: 4px;
+  --j-code-mirror-height: 400px;
+}
+.j-code-mirror-editor {
+  width: 100%;
+  height: var(--j-code-mirror-height);
+  border: 1px solid var(--j-code-mirror-border-color);
+  border-radius: var(--j-code-mirror-border-radius);
+  overflow: hidden;
+}
+.code-mirror-container {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+/* CodeMirror 基础样式覆盖 */
+.code-mirror-container .cm-editor {
+  height: 100%;
+}
+.code-mirror-container .cm-scroller {
+  overflow: auto;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.code-mirror-container .cm-gutters {
+  background-color: #f5f7fa;
+  border-right: 1px solid #e4e7ed;
+  color: #909399;
+}
+
+/* 暗黑模式支持 */
+html.dark .j-code-mirror-editor {
+  border-color: #4c4d4f;
+}
+html.dark .code-mirror-container .cm-gutters {
+  background-color: #2c2d2d;
+  border-color: #4c4d4f;
+  color: #909399;
+}

package/dist/es/components.d.ts

@@ -1,6 +1,7 @@
 import { Plugin } from 'vue';
 export * from './button';
 export * from './button-nav';
+export * from './code-mirror-editor';
 export * from './form';
 export * from './menu';
 export * from './page-header';

package/dist/es/components.js

@@ -1,5 +1,6 @@
 import { JkyButton } from "./button/index.js";
 import { JkyButtonNav } from "./button-nav/index.js";
+import { JkyCodeMirrorEditor } from "./code-mirror-editor/index.js";
 import { JkyForm } from "./form/index.js";
 import { JkyMenu } from "./menu/index.js";
 import { JkyPageHeader } from "./page-header/index.js";
@@ -10,11 +11,13 @@ const components = [
   JkyButtonNav,
   JkyPageHeader,
   JkyMenu,
-  JkyForm
+  JkyForm,
+  JkyCodeMirrorEditor
 ];
 export {
   JkyButton,
   JkyButtonNav,
+  JkyCodeMirrorEditor,
   JkyForm,
   JkyMenu,
   JkyPageHeader,