vue-devui 1.6.20 → 1.6.22

package/code-review/index.es.js

@@ -1,4 +1,4 @@
-import { watch, onUnmounted, defineComponent, toRefs, createVNode, Transition, mergeProps, ref, computed, nextTick, unref, withModifiers, Comment, Text, Fragment, h, inject, withDirectives, cloneVNode, onMounted, provide, Teleport, createTextVNode, vShow } from "vue";
+import { watch, onUnmounted, defineComponent, toRefs, createVNode, Transition, mergeProps, ref, computed, nextTick, unref, withModifiers, Comment, Text, Fragment, h, inject, withDirectives, cloneVNode, onMounted, provide, Teleport, createTextVNode, onBeforeUnmount, vShow } from "vue";
 import { offset, flip, arrow, computePosition } from "@floating-ui/dom";
 import Clipboard from "clipboard";
 import * as Diff2Html from "diff2html";
@@ -6258,6 +6258,10 @@ const codeReviewProps = {
     type: Boolean,
     default: true
   },
+  allowChecked: {
+    type: Boolean,
+    default: false
+  },
   allowExpand: {
     type: Boolean,
     default: true
@@ -6513,6 +6517,17 @@ function updateExpandLineCount(expandDom, newExpandDom) {
   const newChangedNumRight = parseInt((curMatches == null ? void 0 : curMatches[4]) || "") + parseInt((newMatches == null ? void 0 : newMatches[4]) || "");
   expandDom.children[1].children[0].innerText = `@@ -${(newMatches == null ? void 0 : newMatches[1]) || 0},${newChangedNumLeft} +${(newMatches == null ? void 0 : newMatches[3]) || 0},${newChangedNumRight} @@`;
 }
+function addClassToDiffCode(codeStrArr, theClassName) {
+  if (!codeStrArr || codeStrArr.length === 0) {
+    return null;
+  }
+  const newArray = codeStrArr.map((item) => {
+    const classNames = item == null ? void 0 : item.match(/class="([^"]+)"/)[1].split(" ");
+    classNames.push(theClassName);
+    return item.replace(/class="([^"]+)"/, `class="${classNames.join(" ")}"`);
+  });
+  return newArray;
+}
 function parseDiffCode(container, code, outputFormat, isAddCode = false) {
   var _a;
   const diff2HtmlUi = new Diff2HtmlUI(container, code, {
@@ -6520,6 +6535,7 @@ function parseDiffCode(container, code, outputFormat, isAddCode = false) {
     matching: "lines",
     outputFormat,
     highlight: true,
+    diffStyle: "char",
     rawTemplates: TemplateMap[outputFormat]
   });
   if (outputFormat === "side-by-side") {
@@ -6532,8 +6548,10 @@ function parseDiffCode(container, code, outputFormat, isAddCode = false) {
     let newTrStr = "";
     const offset2 = trListLength / 2;
     for (let i = 0; i < trListLength / 2; i++) {
-      const leftTdList = trList[i].match(TableTdReg);
-      const rightTdList = trList[i + offset2].match(TableTdReg);
+      let leftTdList = trList[i].match(TableTdReg);
+      let rightTdList = trList[i + offset2].match(TableTdReg);
+      leftTdList = addClassToDiffCode(leftTdList, "d-code-left");
+      rightTdList = addClassToDiffCode(rightTdList, "d-code-right");
       newTrStr += `<tr>${leftTdList == null ? void 0 : leftTdList.join("")}${rightTdList == null ? void 0 : rightTdList.join("")}</tr>`;
     }
     const tbodyAttr = ((_a = diffHtmlStr.match(TableTbodyAttrReg)) == null ? void 0 : _a[1]) || "";
@@ -7010,13 +7028,24 @@ function useCodeReviewFold(props, ctx) {
   return { isFold, toggleFold };
 }
 function useCodeReviewComment(reviewContentRef, props, ctx) {
-  const { outputFormat, allowComment } = toRefs(props);
+  const { outputFormat, allowComment, allowChecked } = toRefs(props);
   const ns2 = useNamespace("code-review");
   const commentLeft = ref(-100);
   const commentTop = ref(-100);
   let currentLeftLineNumber = -1;
   let currentRightLineNumber = -1;
   let lastLineNumberContainer;
+  let checkedLineNumberContainer = [];
+  let isShift = false;
+  let currentLeftLineNumbers = [];
+  let currentRightLineNumbers = [];
+  let checkedLineCodeString = {};
+  watch(() => outputFormat.value, () => {
+    checkedLineNumberContainer = [];
+    currentLeftLineNumbers = [];
+    currentRightLineNumbers = [];
+    checkedLineCodeString = [];
+  });
   const resetLeftTop = () => {
     commentLeft.value = -100;
     commentTop.value = -100;
@@ -7099,6 +7128,141 @@ function useCodeReviewComment(reviewContentRef, props, ctx) {
       resetLeftTop();
     }
   };
+  function commentKeyDown(e) {
+    switch (e.key) {
+      case "Shift":
+        isShift = true;
+        break;
+    }
+  }
+  function commentKeyUp(e) {
+    e.preventDefault();
+    switch (e.key) {
+      case "Shift":
+        isShift = false;
+        break;
+    }
+  }
+  const unCommentKeyDown = () => {
+    document.removeEventListener("keydown", commentKeyDown);
+    document.removeEventListener("keyup", commentKeyUp);
+  };
+  const onCommentKeyDown = () => {
+    document.addEventListener("keydown", commentKeyDown);
+    document.addEventListener("keyup", commentKeyUp);
+  };
+  const getLineNumbers = (currentNumber, currentNumbers, e) => {
+    if (currentNumber === -1) {
+      return currentNumbers;
+    }
+    if (currentNumbers.length === 0) {
+      return [currentNumber];
+    }
+    const numbers = [...currentNumbers];
+    let max = Math.max(...numbers);
+    const min = Math.min(...numbers);
+    if (currentNumber > max) {
+      max = currentNumber;
+    }
+    return Array.from({ length: max - min + 1 }, (_, i) => i + min);
+  };
+  const getCommonClassAndJudge = (side) => {
+    const lineClassName = side === "line-by-line" ? ".d2h-code-linenumber" : ".d2h-code-side-linenumber";
+    const linenumberDom = reviewContentRef.value.querySelectorAll(lineClassName);
+    const checkedLine = [currentLeftLineNumbers, currentRightLineNumbers];
+    return {
+      linenumberDom,
+      checkedLine
+    };
+  };
+  const addCommentCheckedClass = (Dom) => {
+    !Dom.classList.contains("comment-checked") && Dom.classList.add("comment-checked");
+  };
+  const addCommentClassSingle = (side) => {
+    const { linenumberDom, checkedLine } = getCommonClassAndJudge(side);
+    const checkedCodeContent = [];
+    for (let i = 0; i < linenumberDom.length; i++) {
+      const lineNumberDomLeft = linenumberDom[i].children[0];
+      const lineNumberDomRight = linenumberDom[i].children[1];
+      if (lineNumberDomLeft || lineNumberDomRight) {
+        const codeLineNumberLeft = parseInt(lineNumberDomLeft == null ? void 0 : lineNumberDomLeft.innerText);
+        const codeLineNumberRight = parseInt(lineNumberDomRight == null ? void 0 : lineNumberDomRight.innerText);
+        if (checkedLine[0].includes(codeLineNumberLeft) || checkedLine[1].includes(codeLineNumberRight)) {
+          checkedLineNumberContainer.push(linenumberDom[i]);
+          const codeNode = linenumberDom[i].nextSibling.nodeName === "#text" ? linenumberDom[i].nextSibling.nextSibling : linenumberDom[i].nextSibling;
+          checkedCodeContent.push(codeNode == null ? void 0 : codeNode.innerText);
+          addCommentCheckedClass(linenumberDom[i]);
+          addCommentCheckedClass(codeNode);
+        }
+      }
+    }
+    checkedLineCodeString = checkedCodeContent;
+  };
+  const addCommentClassDouble = (side) => {
+    var _a;
+    const { linenumberDom, checkedLine } = getCommonClassAndJudge(side);
+    const checkedCodeContentLeft = [];
+    const checkedCodeContentRight = [];
+    function checkedFunc(Dom) {
+      checkedLineNumberContainer.push(Dom);
+      const codeNode = Dom.nextSibling.nodeName === "#text" ? Dom.nextSibling.nextSibling : Dom.nextSibling;
+      addCommentCheckedClass(Dom);
+      addCommentCheckedClass(codeNode);
+      return codeNode == null ? void 0 : codeNode.innerText;
+    }
+    for (let i = 0; i < linenumberDom.length; i++) {
+      const codeLineNumber = parseInt((_a = linenumberDom[i]) == null ? void 0 : _a.innerHTML);
+      if (linenumberDom[i].classList.contains("d-code-left") && checkedLine[0].includes(codeLineNumber)) {
+        const lineNumText = checkedFunc(linenumberDom[i]);
+        checkedCodeContentLeft.push(lineNumText);
+        continue;
+      }
+      if (linenumberDom[i].classList.contains("d-code-right") && checkedLine[1].includes(codeLineNumber)) {
+        const lineNumText = checkedFunc(linenumberDom[i]);
+        checkedCodeContentRight.push(lineNumText);
+      }
+    }
+    checkedLineCodeString = { leftCode: checkedCodeContentLeft, rightCode: checkedCodeContentRight };
+  };
+  const updateCheckedLineClass = () => {
+    if (outputFormat.value === "line-by-line") {
+      addCommentClassSingle(outputFormat.value);
+      return;
+    }
+    addCommentClassDouble(outputFormat.value);
+  };
+  const resetCommentClass = () => {
+    for (let i = 0; i < checkedLineNumberContainer.length; i++) {
+      checkedLineNumberContainer[i].classList.remove("comment-checked");
+      const codeNode = checkedLineNumberContainer[i].nextSibling.nodeName === "#text" ? checkedLineNumberContainer[i].nextSibling.nextSibling : checkedLineNumberContainer[i].nextSibling;
+      codeNode == null ? void 0 : codeNode.classList.remove("comment-checked");
+    }
+    checkedLineNumberContainer = [];
+  };
+  const commentShiftClick = (e) => {
+    currentLeftLineNumbers = currentLeftLineNumber === -1 ? currentLeftLineNumbers : getLineNumbers(currentLeftLineNumber, currentLeftLineNumbers);
+    currentRightLineNumbers = currentRightLineNumber === -1 ? currentRightLineNumbers : getLineNumbers(currentRightLineNumber, currentRightLineNumbers);
+    updateCheckedLineClass();
+  };
+  const commentClick = (e) => {
+    let obj = { left: currentLeftLineNumber, right: currentRightLineNumber };
+    if (currentLeftLineNumbers.length >= 1 || currentRightLineNumbers.length >= 1 && allowChecked.value) {
+      const maxCurrentLeftLineNumber = currentLeftLineNumbers[currentLeftLineNumbers.length - 1];
+      const maxCurrentRightLineNumber = currentRightLineNumbers[currentRightLineNumbers.length - 1];
+      if (maxCurrentLeftLineNumber === currentLeftLineNumber || maxCurrentRightLineNumber === currentRightLineNumber) {
+        obj = { left: currentLeftLineNumber, right: currentRightLineNumber, details: {
+          lefts: currentLeftLineNumbers,
+          rights: currentRightLineNumbers,
+          codes: checkedLineCodeString
+        } };
+      } else {
+        currentLeftLineNumbers = [];
+        currentRightLineNumbers = [];
+        resetCommentClass();
+      }
+    }
+    ctx.emit("addComment", obj);
+  };
   const onCommentIconClick = (e) => {
     if (e) {
       const composedPath = e.composedPath();
@@ -7112,9 +7276,11 @@ function useCodeReviewComment(reviewContentRef, props, ctx) {
         return;
       }
     }
-    if (outputFormat.value === "line-by-line")
-      ;
-    ctx.emit("addComment", { left: currentLeftLineNumber, right: currentRightLineNumber });
+    if (isShift && allowChecked.value) {
+      commentShiftClick();
+      return;
+    }
+    commentClick();
   };
   const insertComment = (lineNumber, lineSide, commentDom) => {
     if (outputFormat.value === "line-by-line") {
@@ -7163,8 +7329,11 @@ function useCodeReviewComment(reviewContentRef, props, ctx) {
     commentLeft,
     commentTop,
     mouseEvent,
+    updateCheckedLineClass,
     onCommentMouseLeave,
     onCommentIconClick,
+    onCommentKeyDown,
+    unCommentKeyDown,
     insertComment,
     removeComment
   };
@@ -7195,15 +7364,23 @@ var CodeReview = defineComponent({
       mouseEvent,
       onCommentMouseLeave,
       onCommentIconClick,
+      onCommentKeyDown,
+      unCommentKeyDown,
       insertComment,
-      removeComment
+      removeComment,
+      updateCheckedLineClass
     } = useCodeReviewComment(reviewContentRef, props, ctx);
     onMounted(() => {
       ctx.emit("afterViewInit", {
         toggleFold,
         insertComment,
-        removeComment
+        removeComment,
+        updateCheckedLineClass
       });
+      onCommentKeyDown();
+    });
+    onBeforeUnmount(() => {
+      unCommentKeyDown();
     });
     provide(CodeReviewInjectionKey, {
       diffType,