vue-devui 1.5.6 → 1.5.7-hotfix.1

package/vue-devui.es.js

@@ -35,6 +35,7 @@ var __publicField = (obj, key, value) => {
 };
 import { createVNode, getCurrentInstance, defineComponent, toRefs, inject, computed, Fragment, mergeProps, resolveComponent, isVNode, ref, reactive, createTextVNode, provide, onMounted, watch, Transition, withDirectives, vShow, nextTick, onUnmounted, unref, withModifiers, Comment as Comment$1, Text, h, cloneVNode, Teleport, onBeforeUnmount, render as render$1, resolveDirective, resolveDynamicComponent, toRef, shallowRef, onBeforeMount, onUpdated, readonly, toRaw, watchEffect, renderSlot, useSlots, createApp, shallowReactive, effect, TransitionGroup } from "vue";
 import { useRoute } from "vue-router";
+import Clipboard from "clipboard";
 import { offset, autoPlacement, arrow, shift, computePosition, flip } from "@floating-ui/dom";
 import { onClickOutside, toRefs as toRefs$1, useResizeObserver } from "@vueuse/core";
 import * as Diff2Html from "diff2html";
@@ -1546,6 +1547,26 @@ function randomId(n = 8) {
   }
   return result2;
 }
+function toClipboard(text) {
+  return new Promise((resolve, reject) => {
+    const ele = document.createElement("button");
+    const clipboard = new Clipboard(ele, {
+      text: () => text,
+      action: () => "copy"
+    });
+    clipboard.on("success", (e) => {
+      clipboard.destroy();
+      resolve(e);
+    });
+    clipboard.on("error", (e) => {
+      clipboard.destroy();
+      reject(e);
+    });
+    document.body.appendChild(ele);
+    ele.click();
+    document.body.removeChild(ele);
+  });
+}
 function setStyle(element, style) {
   const oldStyle = {};
   const styleKeys = Object.keys(style);
@@ -13693,7 +13714,7 @@ function useCodeEditor(props, ctx2) {
     addCommentIcon,
     expandCommentIcon
   } = toRefs(props);
-  let monaco;
+  let monaco2;
   let editor;
   let diffEditor;
   let themeService;
@@ -13732,7 +13753,7 @@ function useCodeEditor(props, ctx2) {
   });
   onMounted(async () => {
     if (inBrowser) {
-      monaco = await import("monaco-editor");
+      monaco2 = await import("monaco-editor");
       setCurrentTheme();
       init();
       if (mode.value === "review") {
@@ -13751,15 +13772,15 @@ function useCodeEditor(props, ctx2) {
       initDiffEditor();
     }
     if (!options.value["theme"]) {
-      monaco.editor.setTheme(currentTheme);
+      monaco2.editor.setTheme(currentTheme);
     }
     handleAutoHeight();
     setValueEmitter();
   }
   function initNormalEditor() {
     if (!editor) {
-      editor = monaco.editor.create(editorEl.value, options.value);
-      editor.setModel(monaco.editor.createModel(modelValue.value, options.value["language"]));
+      editor = monaco2.editor.create(editorEl.value, options.value);
+      editor.setModel(monaco2.editor.createModel(modelValue.value, options.value["language"]));
       ctx2.emit("afterEditorInit", editor);
       if (mode.value === "review") {
         editor.onMouseMove(handleMouseMove);
@@ -13770,10 +13791,10 @@ function useCodeEditor(props, ctx2) {
   }
   function initDiffEditor() {
     if (!diffEditor) {
-      diffEditor = monaco.editor.createDiffEditor(editorEl.value, options.value);
+      diffEditor = monaco2.editor.createDiffEditor(editorEl.value, options.value);
       diffEditor.setModel({
-        original: monaco.editor.createModel(originalText.value, options.value["language"]),
-        modified: monaco.editor.createModel(modelValue.value, options.value["language"])
+        original: monaco2.editor.createModel(originalText.value, options.value["language"]),
+        modified: monaco2.editor.createModel(modelValue.value, options.value["language"])
       });
       ctx2.emit("afterEditorInit", diffEditor);
     }
@@ -13786,11 +13807,10 @@ function useCodeEditor(props, ctx2) {
     }
   }
   function setEditorValue() {
-    var _a;
     if (!editor || !editor.getModel()) {
       return;
     }
-    (_a = editor.getModel().modified) == null ? void 0 : _a.setValue(modelValue.value);
+    editor.getModel().setValue(modelValue.value);
   }
   function setDiffEditorValue() {
     var _a;
@@ -13809,7 +13829,7 @@ function useCodeEditor(props, ctx2) {
       currentTheme = themeService && themeService.currentTheme.isDark ? "vs" : "vs-dark";
     }
     if (editor) {
-      monaco.editor.setTheme(currentTheme);
+      monaco2.editor.setTheme(currentTheme);
     }
   }
   function handleAutoHeight() {
@@ -13843,8 +13863,8 @@ function useCodeEditor(props, ctx2) {
     if (editor) {
       if (mode.value === "normal" || mode.value === "review") {
         const model = diffEditor.getModel();
-        monaco.editor.setModelLanguage(model.modified, language);
-        monaco.editor.setModelLanguage(model.original, language);
+        monaco2.editor.setModelLanguage(model.modified, language);
+        monaco2.editor.setModelLanguage(model.original, language);
       }
     }
   }
@@ -13858,7 +13878,7 @@ function useCodeEditor(props, ctx2) {
   }
   function updateEditorHeightAuto() {
     var _a;
-    const lineHeight = editor.getOption(monaco.editor.EditorOption.lineHeight);
+    const lineHeight = editor.getOption(monaco2.editor.EditorOption.lineHeight);
     const lineCount = ((_a = editor.getModel()) == null ? void 0 : _a.getLineCount()) || 1;
     const height = editor.getTopForLineNumber(lineCount + 1) + lineHeight;
     if (editorEl.value) {
@@ -13872,7 +13892,7 @@ function useCodeEditor(props, ctx2) {
       if (!isDecorationExisted(currentLineNumber)) {
         const lineDecoration = [
           {
-            range: new monaco.Range(currentLineNumber, 0, currentLineNumber, 0),
+            range: new monaco2.Range(currentLineNumber, 0, currentLineNumber, 0),
             option: {
               isWholeLine: true,
               glyphMarginClassName: `icon-pointer ${addCommentIcon.value}`
@@ -13904,7 +13924,7 @@ function useCodeEditor(props, ctx2) {
   }
   function setDecorations(decoration) {
     return {
-      range: new monaco.Range(decoration.lineNumber, 1, decoration.lineNumber, 1),
+      range: new monaco2.Range(decoration.lineNumber, 1, decoration.lineNumber, 1),
       options: {
         isWholeLine: true,
         className: decoration.customClasses || "",
@@ -14058,51 +14078,204 @@ var CodeEditor = defineComponent({
     }, null);
   }
 });
+let monaco;
+const CodeHighlightDirective = {
+  async mounted(el) {
+    if (inBrowser) {
+      monaco = await import("monaco-editor");
+      monaco.editor.colorizeElement(el);
+    }
+  },
+  updated(el) {
+    if (inBrowser) {
+      monaco.editor.colorizeElement(el);
+    }
+  }
+};
 var CodeEditorInstall = {
   title: "Code Editor \u4EE3\u7801\u7F16\u8F91\u5668",
   category: "\u6F14\u8FDB\u4E2D",
   status: "100%",
   install(app) {
+    app.directive("d-code-highlight", CodeHighlightDirective);
     app.component(CodeEditor.name, CodeEditor);
   }
 };
+function FoldIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill-rule": "evenodd"
+  }, [createVNode("polygon", {
+    "points": "4.5 5 8 8.76923077 11.5 5 13 6.61538462 8 12 3 6.61538462"
+  }, null)])]);
+}
+function CopyIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("path", {
+    "d": `M14,1 C14.5522847,1 15,1.44771525 15,2 L15,10 C15,10.5522847 14.5522847,11 14,11 L11,11 L11,14 
+        C11,14.5522847 10.5522847,15 10,15 L2,15 C1.44771525,15 1,14.5522847 1,14 L1,6 C1,5.44771525 1.44771525,5 
+        2,5 L5,5 L5,2 C5,1.44771525 5.44771525,1 6,1 L14,1 Z M10,6 L2,6 L2,14 L10,14 L10,6 Z M9,11 L9,12 L3,12 
+        L3,11 L9,11 Z M14,2 L6,2 L6,5 L10,5 C10.5522847,5 11,5.44771525 11,6 L11,10 L14,10 L14,2 Z M9,8 L9,9 L3,9 L3,8 L9,8 Z`,
+    "fill": "#babbc0",
+    "fill-rule": "nonzero"
+  }, null)])]);
+}
 const codeReviewProps = {
   diff: {
     type: String,
     required: true,
     default: ""
   },
+  fold: {
+    type: Boolean,
+    default: false
+  },
   outputFormat: {
     type: String,
     default: "line-by-line"
   }
 };
-function useCodeReview(props) {
-  const { diff, outputFormat } = toRefs(props);
+const CodeReviewInjectionKey = Symbol("d-code-review");
+function useCodeReviewCopy(diffInfo) {
+  const copyTipsText = ref("\u590D\u5236\u6587\u4EF6\u8DEF\u5F84");
+  const tipsPopType = ref("default");
+  const onCopy = () => {
+    toClipboard(diffInfo.newName).then(() => {
+    });
+  };
+  return { copyTipsText, tipsPopType, onCopy };
+}
+var CodeReviewHeader = defineComponent({
+  name: "DCodeReviewHeader",
+  emits: ["click"],
+  setup(_, ctx2) {
+    const ns2 = useNamespace("code-review");
+    const {
+      diffInfo,
+      isFold,
+      rootCtx
+    } = inject(CodeReviewInjectionKey);
+    const {
+      copyTipsText,
+      tipsPopType,
+      onCopy
+    } = useCodeReviewCopy(diffInfo);
+    const onClick = (e) => {
+      const composedPath = e.composedPath();
+      const isPreventEvent = composedPath.some((item) => {
+        var _a, _b;
+        return ((_a = item.classList) == null ? void 0 : _a.contains("operate-area")) || ((_b = item.classList) == null ? void 0 : _b.contains("icon-copy"));
+      });
+      if (!isPreventEvent) {
+        ctx2.emit("click");
+      }
+    };
+    return () => createVNode("div", {
+      "class": [ns2.e("header"), {
+        [ns2.em("header", "unfold")]: !isFold.value
+      }],
+      "onClick": onClick
+    }, [createVNode("div", {
+      "class": "file-info"
+    }, [createVNode(FoldIcon, {
+      "class": {
+        invert: !isFold.value
+      }
+    }, null), createVNode("span", {
+      "class": "file-name"
+    }, [diffInfo.newName]), createVNode("span", {
+      "class": "diff-lines add-lines"
+    }, [createTextVNode("+"), diffInfo.addedLines]), createVNode("span", {
+      "class": "diff-lines delete-lines"
+    }, [createTextVNode("-"), diffInfo.deletedLines]), createVNode(Popover, {
+      "content": copyTipsText.value,
+      "pop-type": tipsPopType.value,
+      "trigger": "hover",
+      "position": ["right"]
+    }, {
+      default: () => [createVNode(CopyIcon, {
+        "class": "icon-copy",
+        "onClick": onCopy
+      }, null)]
+    })]), rootCtx.slots.headOperate && createVNode("div", {
+      "class": "operate-area"
+    }, [rootCtx.slots.headOperate()])]);
+  }
+});
+function useCodeReview(props, ctx2) {
+  const { diff, fold, outputFormat } = toRefs(props);
   const renderHtml = ref("");
-  onMounted(() => {
-    renderHtml.value = Diff2Html.html(diff.value, {
-      drawFileList: true,
+  const isFold = ref(fold.value);
+  const diffFile = Diff2Html.parse(diff.value);
+  const initDiffContent = () => {
+    renderHtml.value = Diff2Html.html(diffFile, {
+      drawFileList: false,
       matching: "lines",
       outputFormat: outputFormat.value
     });
+  };
+  const toggleFold = (status2) => {
+    if (status2 !== void 0) {
+      isFold.value = status2;
+    } else {
+      isFold.value = !isFold.value;
+    }
+  };
+  watch(fold, (val) => {
+    isFold.value = val;
   });
-  return { renderHtml };
+  watch(isFold, () => {
+    if (!isFold.value && renderHtml.value === "") {
+      initDiffContent();
+    }
+    ctx2.emit("foldChange", isFold.value);
+  });
+  onBeforeMount(() => {
+    if (!isFold.value) {
+      initDiffContent();
+    }
+  });
+  provide(CodeReviewInjectionKey, { diffInfo: diffFile[0], isFold, rootCtx: ctx2 });
+  ctx2.expose({ toggleFold });
+  return { renderHtml, isFold };
 }
-var diff2html_min = "";
 var codeReview = "";
 var CodeReview = defineComponent({
   name: "DCodeReview",
   props: codeReviewProps,
-  setup(props) {
+  emits: ["foldChange"],
+  setup(props, ctx2) {
     const ns2 = useNamespace("code-review");
     const {
-      renderHtml
-    } = useCodeReview(props);
+      renderHtml,
+      isFold
+    } = useCodeReview(props, ctx2);
     return () => createVNode("div", {
-      "class": ns2.b(),
+      "class": ns2.b()
+    }, [createVNode(CodeReviewHeader, {
+      "onClick": () => isFold.value = !isFold.value
+    }, null), createVNode("div", {
+      "class": [ns2.e("content"), {
+        "hide-content": isFold.value
+      }],
       "innerHTML": renderHtml.value
-    }, null);
+    }, null)]);
   }
 });
 var CodeReviewInstall = {
@@ -25208,7 +25381,7 @@ function useEditorMdRender(props, ctx2) {
       clearTimeout(timer);
     }
     timer = setTimeout(() => {
-      if (!content2.value) {
+      if (content2.value === void 0) {
         return;
       }
       let html = renderService.generateHTML(content2.value);
@@ -42029,7 +42202,7 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.5.6",
+  version: "1.5.7-hotfix.1",
   install(app) {
     installs.forEach((p) => app.use(p));
   }