vue-devui 1.5.6 → 1.5.7-hotfix.2

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";
@@ -1136,7 +1137,13 @@ const AlertCloseIcon = () => createVNode("svg", {
   "transform": "translate(-3.000000, -3.000000)",
   "fill-rule": "nonzero"
 }, [createVNode("path", {
-  "d": "M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z"
+  "d": `M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 
+          13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 
+          13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 
+          11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 
+          L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 
+          L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 
+          C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z`
 }, null)])])]);
 const ns$k = useNamespace("alert");
 const AlertTypeIcon = (props) => createVNode("svg", {
@@ -1170,12 +1177,16 @@ const AlertTypeIcon = (props) => createVNode("svg", {
         "fill-rule": "evenodd"
       }, [createVNode("path", {
         "class": "warning-outer",
-        "d": "M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"
+        "d": `M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 
+              C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 
+              C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 
+              7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z`
       }, null), createVNode("path", {
         "class": "warning-inner",
         "stroke-width": "0.3",
         "fill-rule": "nonzero",
-        "d": "M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"
+        "d": `M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 
+              L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z`
       }, null)]);
     case "info":
       return createVNode("g", {
@@ -1546,6 +1557,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 +13724,7 @@ function useCodeEditor(props, ctx2) {
     addCommentIcon,
     expandCommentIcon
   } = toRefs(props);
-  let monaco;
+  let monaco2;
   let editor;
   let diffEditor;
   let themeService;
@@ -13732,14 +13763,14 @@ function useCodeEditor(props, ctx2) {
   });
   onMounted(async () => {
     if (inBrowser) {
-      monaco = await import("monaco-editor");
+      monaco2 = await import("monaco-editor");
       setCurrentTheme();
       init();
       if (mode.value === "review") {
         nextTick(() => {
           refreshDecorations();
-          refreshOverlayWidgets();
           refreshViewZones();
+          refreshOverlayWidgets();
         });
       }
     }
@@ -13751,15 +13782,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 +13801,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 +13817,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 +13839,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() {
@@ -13842,9 +13872,11 @@ function useCodeEditor(props, ctx2) {
     const language = options.value.language;
     if (editor) {
       if (mode.value === "normal" || mode.value === "review") {
+        monaco2.editor.setModelLanguage(editor.getModel(), language);
+      } else if (mode.value === "diff") {
         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 +13890,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,8 +13904,8 @@ function useCodeEditor(props, ctx2) {
       if (!isDecorationExisted(currentLineNumber)) {
         const lineDecoration = [
           {
-            range: new monaco.Range(currentLineNumber, 0, currentLineNumber, 0),
-            option: {
+            range: new monaco2.Range(currentLineNumber, 0, currentLineNumber, 0),
+            options: {
               isWholeLine: true,
               glyphMarginClassName: `icon-pointer ${addCommentIcon.value}`
             }
@@ -13899,12 +13931,12 @@ function useCodeEditor(props, ctx2) {
       setTimeout(() => {
         currentDecorations = editor.deltaDecorations(currentDecorations, tempDecorations);
       });
-      currentDecorations = editor.deltaDecorations(currentLineDecoration, []);
+      currentLineDecoration = editor.deltaDecorations(currentLineDecoration, []);
     }
   }
   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 || "",
@@ -13944,7 +13976,7 @@ function useCodeEditor(props, ctx2) {
           heightInPx: comment2.heightInPx ? comment2.heightInPx : 0,
           afterColumn: 1,
           domNode: document.createElement("div"),
-          ondomNodeTop: (top) => {
+          onDomNodeTop: (top) => {
             layoutOverlayWidget(comment2.lineNumber, { top });
           },
           onComputedHeight: (height) => {
@@ -13967,7 +13999,7 @@ function useCodeEditor(props, ctx2) {
   }
   function calculateLayoutInfo(positionInfos, editorLayoutInfo, index2) {
     let _offsetLeft = 0;
-    const indexOffsetLeft = comments.value[index2].offserLeft;
+    const indexOffsetLeft = comments.value[index2].offsetLeft;
     if (indexOffsetLeft) {
       _offsetLeft = indexOffsetLeft;
     } else {
@@ -13980,8 +14012,8 @@ function useCodeEditor(props, ctx2) {
       offsetLeft: _offsetLeft
     };
   }
-  function handleDomNodePosition(top, hieght, index2) {
-    comments.value[index2].domNode.style.height = `${hieght}px`;
+  function handleDomNodePosition(top, height, index2) {
+    comments.value[index2].domNode.style.height = `${height}px`;
     if (heightMap.get(index2) === 0) {
       comments.value[index2].domNode.style.top = `-${1e4 + top}px`;
     } else {
@@ -14058,51 +14090,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 +25393,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 +42214,7 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.5.6",
+  version: "1.5.7-hotfix.2",
   install(app) {
     installs.forEach((p) => app.use(p));
   }