vue-devui 1.5.7 → 1.5.8

package/code-review/index.es.js

@@ -6106,6 +6106,88 @@ function CopyIcon() {
     "fill-rule": "nonzero"
   }, null)])]);
 }
+function CommentIcon() {
+  return createVNode("svg", {
+    "width": "12px",
+    "height": "12px",
+    "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 C15.1045695,1 16,1.8954305 16,3 L16,11 C16,12.1045695 15.1045695,13 14,13 L11,13 L8,16 L5,13 L2,13 
+          C0.8954305,13 0,12.1045695 0,11 L0,3 C0,1.8954305 0.8954305,1 2,1 L14,1 Z M14,3 L2,3 L2,11 L5,11 C5.47149598,11 
+          5.92582641,11.1664898 6.28439337,11.4669131 L6.41421356,11.5857864 L8,13.171 L9.58578644,11.5857864 
+          C9.91918444,11.2523884 10.3581707,11.0488544 10.8241472,11.0077406 L11,11 L14,11 L14,3 Z M8,6 C8.55228475,6
+          9,6.44771525 9,7 C9,7.55228475 8.55228475,8 8,8 C7.44771525,8 7,7.55228475 7,7 C7,6.44771525 7.44771525,6
+          8,6 Z M11,6 C11.5522847,6 12,6.44771525 12,7 C12,7.55228475 11.5522847,8 11,8 C10.4477153,8 10,7.55228475
+          10,7 C10,6.44771525 10.4477153,6 11,6 Z M5,6 C5.55228475,6 6,6.44771525 6,7 C6,7.55228475 5.55228475,8
+          5,8 C4.44771525,8 4,7.55228475 4,7 C4,6.44771525 4.44771525,6 5,6 Z`,
+    "fill": "#5e7ce0",
+    "fill-rule": "nonzero"
+  }, null)])]);
+}
+function UpExpandIcon() {
+  return `<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-1365.000000,-11.000000)">
+          <g transform="translate(1365.000000,11.000000)">
+            <rect x="0" y="0" width="16" height="16"></rect>
+            <g
+              transform="translate(8.000000, 8.000000) scale(1, -1) translate(-8.000000, -8.000000) translate(1.000000, 4.000000)"
+              fill="#71757F">
+              <path
+                d='M0.5,0 L13.5,0 C13.7761424,0 14,0.223857625 14,0.5 C14,0.776142375 13.7761424,1 13.5,1 L0.5,1 C0.223857625,1 
+              0,0.776142375 0,0.5 C0,0.223857625 0.223857625,0 0.5,0 Z'></path>
+              <polygon
+                transform="translate(7.000000, 5.5000000) scale(1, -1) translate(-7.000000, -5.5000000)"
+                points="7 3 10 8 4 8"></polygon>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>`;
+}
+function DownExpandIcon() {
+  return `<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-1344.000000,-11.000000)">
+          <g transform="translate(1344.000000,11.000000)">
+            <rect x="0" y="0" width="16" height="16"></rect>
+            <g transform="translate(1.000000, 5.000000)" fill="#71757F">
+              <path
+                d="M0.5,0 L13.5,0 C13.7761424,0 14,0.223857625 14,0.5 C14,0.776142375 13.7761424,1 13.5,1 L0.5,1 C0.223857625,1
+              0,0.776142375 0,0.5 C0,0.223857625 0.223857625,0 0.5,0 Z"></path>
+              <polygon
+                transform="translate(7.000000,5.500000) scale(1, -1) translate(-7.000000, -5.500000)"
+                points="7 3 10 8 4 8"></polygon>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>`;
+}
+function AllExpandIcon() {
+  return `<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-1301.000000,-11.000000)">
+          <rect x="1301" y="11" width="16" height="16"></rect>
+          <path
+            d="M1302.5,18 L1315.5,18 C1315.77614,18 1316,18.2238576 1316,18.5 1316,18.7761424 1315.77614,19 1315.5,19 L1302.5,19
+          C1302.22386,19 1302,18.7761424 1302,18.5 C1302,18.2238576 1302.22386,18 1302.5,18 Z" fill="#71757F"></path>
+          <polygon fill="#71757F" points="1309 11 1312 16 1306 16"></polygon>
+          <polygon
+            fill="#71757F"
+            transform="translate(1309.000000, 23.500000) scale(1, -1) translate(-1309.000000, -23.500000)"
+            points="1309 21 1312 26 1306 26"></polygon>
+        </g>
+      </g>
+    </svg>`;
+}
 const codeReviewProps = {
   diff: {
     type: String,
@@ -6119,6 +6201,10 @@ const codeReviewProps = {
   outputFormat: {
     type: String,
     default: "line-by-line"
+  },
+  expandAllThreshold: {
+    type: Number,
+    default: 50
   }
 };
 const CodeReviewInjectionKey = Symbol("d-code-review");
@@ -6208,17 +6294,159 @@ var CodeReviewHeader = defineComponent({
     }, [rootCtx.slots.headOperate()])]);
   }
 });
+const ExpandLineReg = /^@@ -(\d+),(\d+) \+(\d+),(\d+) @@/;
+const FirstLineReg = /^@@ -[0,1](?!\d)/;
+function notEmptyNode(node) {
+  const classes = node.classList;
+  return !classes.contains("d2h-info") && !classes.contains("d2h-emptyplaceholder") && !classes.contains("comment-cell");
+}
+function insertNode(parent, child) {
+  if (parent.firstChild) {
+    parent.insertBefore(child, parent.firstChild);
+  } else {
+    parent.appendChild(child);
+  }
+}
+function addExpandButton(parentNode, className, icon) {
+  const expandButton = document.createElement("div");
+  expandButton.innerHTML = icon;
+  expandButton.classList.add("expand-icon");
+  expandButton.classList.add(className);
+  insertNode(parentNode, expandButton);
+}
+function attachExpandUpDownButton(parentNode, direction) {
+  var _a;
+  const expandDirectionMap = {
+    up: "up-expand",
+    down: "down-expand",
+    all: "all-expand"
+  };
+  const expandDirectionIconMap = {
+    up: UpExpandIcon,
+    down: DownExpandIcon,
+    all: AllExpandIcon
+  };
+  parentNode.classList.add("expand-icon-wrapper");
+  if (direction === "updown") {
+    addExpandButton(parentNode, "up-expand", UpExpandIcon());
+    addExpandButton(parentNode, "down-expand", DownExpandIcon());
+  } else {
+    addExpandButton(parentNode, expandDirectionMap[direction], (_a = expandDirectionIconMap[direction]) == null ? void 0 : _a.call(expandDirectionIconMap));
+  }
+}
+function addCommentToPage(lineHost, commentDom, lineSide) {
+  var _a, _b;
+  const newLine = document.createElement("tr");
+  const newCell = document.createElement("td");
+  newCell.classList.add("comment-cell");
+  newCell.style.width = "100%";
+  newCell.setAttribute("colspan", "2");
+  newCell.appendChild(commentDom);
+  newLine.classList.add("comment-block");
+  newLine.classList.add(lineSide);
+  newLine.appendChild(newCell);
+  if (lineHost.nextElementSibling) {
+    (_a = lineHost.parentElement) == null ? void 0 : _a.insertBefore(newLine, lineHost.nextElementSibling);
+  } else {
+    (_b = lineHost.parentElement) == null ? void 0 : _b.appendChild(newLine);
+  }
+}
+function useCodeReviewExpand(reviewContentRef, expandAllThreshold, outputFormat) {
+  const processSideBySide = () => {
+    const [leftTable, rightTable] = reviewContentRef.value.querySelectorAll("table");
+    const trNodes = Array.from(leftTable.querySelectorAll("tr"));
+    const totalLines = trNodes.length;
+    for (const index2 in trNodes) {
+      const lineIndex = parseInt(index2);
+      const lineChildren = Array.from(trNodes[lineIndex].children);
+      const lineNumberBox = lineChildren[0];
+      const lineContentBox = lineChildren[1];
+      const lineClassList = lineContentBox.classList.value;
+      const lineContent = lineContentBox.innerText.trim();
+      if (lineContent.match(ExpandLineReg) && !FirstLineReg.test(lineContent) && lineClassList && lineClassList.includes("d2h-info")) {
+        const nextLineIndex = lineIndex + 1;
+        const prevLineIndex = lineIndex - 1;
+        if (lineIndex === 0 && nextLineIndex in trNodes) {
+          attachExpandUpDownButton(lineNumberBox, "up");
+        } else if (lineIndex > 0 && lineIndex < totalLines - 1 && nextLineIndex in trNodes && prevLineIndex in trNodes) {
+          const preLineChildren = Array.from(trNodes[prevLineIndex].children);
+          const nextLineChildren = Array.from(trNodes[nextLineIndex].children);
+          const isExpandAll = parseInt(nextLineChildren[0].innerText) - parseInt(preLineChildren[0].innerText) - 1 < expandAllThreshold;
+          attachExpandUpDownButton(lineNumberBox, isExpandAll ? "all" : "updown");
+        }
+      }
+    }
+    const endLine = trNodes[0].cloneNode(true);
+    if (Object.prototype.hasOwnProperty.call(endLine.children[0].children, 0)) {
+      endLine.children[0].removeChild(endLine.children[0].children[0]);
+    }
+    endLine.children[1].innerText = "";
+    const leftEndLine = endLine.cloneNode(true);
+    const rightEndLint = endLine.cloneNode(true);
+    attachExpandUpDownButton(leftEndLine.children[0], "down");
+    leftTable.tBodies[0].appendChild(leftEndLine);
+    rightTable.tBodies[0].appendChild(rightEndLint);
+  };
+  const processLineByLine = () => {
+    var _a;
+    const trNodes = Array.from(reviewContentRef.value.querySelectorAll("tr"));
+    const totalLines = trNodes.length;
+    for (const index2 in trNodes) {
+      const lineIndex = parseInt(index2);
+      const tdNodes = Array.from(trNodes[lineIndex].children);
+      const lineNumberBox = tdNodes[0];
+      const lineContentBox = tdNodes[1];
+      if (!lineContentBox) {
+        continue;
+      }
+      const lineClassList = lineContentBox.classList.value;
+      const lineContent = lineContentBox.innerText.trim();
+      if (lineContent.match(ExpandLineReg) && !FirstLineReg.test(lineContent) && lineClassList && lineClassList.includes("d2h-info")) {
+        const nextLineIndex = lineIndex + 1;
+        const prevLineIndex = lineIndex - 1;
+        if (lineIndex === 0 && nextLineIndex in trNodes) {
+          attachExpandUpDownButton(lineNumberBox, "up");
+        } else if (lineIndex > 0 && lineIndex < totalLines - 1 && nextLineIndex in trNodes && prevLineIndex in trNodes) {
+          const prevTdNodes = Array.from(trNodes[prevLineIndex].children);
+          const prevLineNumber = parseInt(prevTdNodes[0].children[0].innerText);
+          const nextTdNodes = Array.from(trNodes[nextLineIndex].children);
+          const nextLineNumber = parseInt(nextTdNodes[0].children[0].innerText);
+          const isExpandAll = nextLineNumber - prevLineNumber - 1 < expandAllThreshold;
+          attachExpandUpDownButton(lineNumberBox, isExpandAll ? "all" : "updown");
+        }
+      }
+    }
+    const loadMoreLine = trNodes[0].cloneNode(true);
+    loadMoreLine.children[0].removeChild(loadMoreLine.children[0].children[0]);
+    loadMoreLine.children[1].innerText = "";
+    loadMoreLine.children[1].style.height = "20px";
+    const lastTrNode = trNodes[totalLines - 1].children;
+    const leftLineStart = parseInt(lastTrNode[0].children[0].innerText) + 1;
+    const rightLineStart = parseInt(lastTrNode[0].children[1].innerText) + 1;
+    if (leftLineStart && rightLineStart) {
+      attachExpandUpDownButton(loadMoreLine.children[0], "down");
+    }
+    (_a = trNodes[0].parentElement) == null ? void 0 : _a.appendChild(loadMoreLine);
+  };
+  const insertExpandButton = () => {
+    outputFormat === "side-by-side" ? processSideBySide() : processLineByLine();
+  };
+  return { insertExpandButton };
+}
 function useCodeReview(props, ctx) {
-  const { diff, fold, outputFormat } = toRefs(props);
+  const { diff, fold, outputFormat, expandAllThreshold } = toRefs(props);
   const renderHtml = ref("");
   const isFold = ref(fold.value);
+  const reviewContentRef = ref();
   const diffFile = Diff2Html.parse(diff.value);
+  const { insertExpandButton } = useCodeReviewExpand(reviewContentRef, expandAllThreshold.value, outputFormat.value);
   const initDiffContent = () => {
     renderHtml.value = Diff2Html.html(diffFile, {
       drawFileList: false,
       matching: "lines",
       outputFormat: outputFormat.value
     });
+    nextTick(insertExpandButton);
   };
   const toggleFold = (status) => {
     if (status !== void 0) {
@@ -6241,21 +6469,130 @@ function useCodeReview(props, ctx) {
       initDiffContent();
     }
   });
-  provide(CodeReviewInjectionKey, { diffInfo: diffFile[0], isFold, rootCtx: ctx });
-  ctx.expose({ toggleFold });
-  return { renderHtml, isFold };
+  provide(CodeReviewInjectionKey, { reviewContentRef, diffInfo: diffFile[0], isFold, rootCtx: ctx });
+  return { renderHtml, isFold, reviewContentRef, toggleFold };
+}
+function useCodeReviewComment(reviewContentRef, ctx) {
+  const ns2 = useNamespace("code-review");
+  const commentLeft = ref(-100);
+  const commentTop = ref(-100);
+  let currentLeftLineNumber = -1;
+  let currentRightLineNumber = -1;
+  const resetLeftTop = () => {
+    commentLeft.value = -100;
+    commentTop.value = -100;
+    currentLeftLineNumber = -1;
+    currentRightLineNumber = -1;
+  };
+  const onMouseEnter = (e) => {
+    e.currentTarget.getBoundingClientRect();
+  };
+  const onMouseMove = (e) => {
+    var _a, _b;
+    const composedPath = e.composedPath();
+    const trNode = composedPath.find((item) => item.tagName === "TR");
+    if (trNode) {
+      const lineNumberContainer = Array.from(trNode.children)[0];
+      if (notEmptyNode(lineNumberContainer)) {
+        const { top, left } = lineNumberContainer.getBoundingClientRect();
+        commentLeft.value = left;
+        commentTop.value = top;
+        currentLeftLineNumber = parseInt((_a = lineNumberContainer.children[0]) == null ? void 0 : _a.innerText) || -1;
+        currentRightLineNumber = parseInt((_b = lineNumberContainer.children[1]) == null ? void 0 : _b.innerText) || -1;
+      } else {
+        resetLeftTop();
+      }
+    }
+  };
+  const onMouseleave = (e) => {
+    var _a;
+    if (!((_a = e.relatedTarget) == null ? void 0 : _a.classList.contains("comment-icon"))) {
+      resetLeftTop();
+    }
+  };
+  const onCommentMouseLeave = (e) => {
+    var _a;
+    if (!((_a = e.relatedTarget) == null ? void 0 : _a.classList.contains(ns2.e("content")))) {
+      resetLeftTop();
+    }
+  };
+  const onCommentIconClick = () => {
+    ctx.emit("addComment", { left: currentLeftLineNumber, right: currentRightLineNumber });
+  };
+  const findReferenceDom = (lineNumber, lineSide) => {
+    var _a, _b, _c, _d;
+    const trNodes = Array.from(reviewContentRef.value.querySelectorAll("tr"));
+    for (const index2 in trNodes) {
+      const lineIndex = parseInt(index2);
+      const lineNumberBox = Array.from(trNodes[lineIndex].children)[0];
+      if (notEmptyNode(lineNumberBox)) {
+        const oldLineNumber = parseInt((_b = (_a = lineNumberBox.children[0]) == null ? void 0 : _a.innerText) != null ? _b : -1);
+        const newLineNumber = parseInt((_d = (_c = lineNumberBox.children[1]) == null ? void 0 : _c.innerText) != null ? _d : -1);
+        if (lineSide === "left" && oldLineNumber === lineNumber || lineSide === "right" && newLineNumber === lineNumber) {
+          return trNodes[lineIndex];
+        }
+      }
+    }
+  };
+  const insertComment = (lineNumber, lineSide, commentDom) => {
+    const lineHost = findReferenceDom(lineNumber, lineSide);
+    lineHost && addCommentToPage(lineHost, commentDom, lineSide);
+  };
+  const removeComment = (lineNumber, lineSide) => {
+    const lineHost = findReferenceDom(lineNumber, lineSide);
+    let nextLineHost = lineHost == null ? void 0 : lineHost.nextElementSibling;
+    while (nextLineHost) {
+      const classList = nextLineHost == null ? void 0 : nextLineHost.classList;
+      if ((classList == null ? void 0 : classList.contains("comment-block")) && classList.contains(lineSide)) {
+        nextLineHost.remove();
+        return;
+      }
+      nextLineHost = nextLineHost.nextElementSibling;
+    }
+  };
+  return {
+    commentLeft,
+    commentTop,
+    onMouseEnter,
+    onMouseMove,
+    onMouseleave,
+    onCommentMouseLeave,
+    onCommentIconClick,
+    insertComment,
+    removeComment
+  };
 }
 var codeReview = "";
 var CodeReview = defineComponent({
   name: "DCodeReview",
   props: codeReviewProps,
-  emits: ["foldChange"],
+  emits: ["foldChange", "addComment", "afterViewInit"],
   setup(props, ctx) {
     const ns2 = useNamespace("code-review");
     const {
       renderHtml,
-      isFold
+      isFold,
+      reviewContentRef,
+      toggleFold
     } = useCodeReview(props, ctx);
+    const {
+      commentLeft,
+      commentTop,
+      onMouseEnter,
+      onMouseMove,
+      onMouseleave,
+      onCommentMouseLeave,
+      onCommentIconClick,
+      insertComment,
+      removeComment
+    } = useCodeReviewComment(reviewContentRef, ctx);
+    onMounted(() => {
+      ctx.emit("afterViewInit", {
+        toggleFold,
+        insertComment,
+        removeComment
+      });
+    });
     return () => createVNode("div", {
       "class": ns2.b()
     }, [createVNode(CodeReviewHeader, {
@@ -6264,8 +6601,20 @@ var CodeReview = defineComponent({
       "class": [ns2.e("content"), {
         "hide-content": isFold.value
       }],
-      "innerHTML": renderHtml.value
-    }, null)]);
+      "innerHTML": renderHtml.value,
+      "ref": reviewContentRef,
+      "onMouseenter": onMouseEnter,
+      "onMousemove": onMouseMove,
+      "onMouseleave": onMouseleave
+    }, null), createVNode("div", {
+      "class": "comment-icon",
+      "style": {
+        left: commentLeft.value + "px",
+        top: commentTop.value + "px"
+      },
+      "onClick": onCommentIconClick,
+      "onMouseleave": onCommentMouseLeave
+    }, [createVNode(CommentIcon, null, null)])]);
   }
 });
 var index = {