vue-devui 1.6.22 → 1.6.24

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, onBeforeUnmount, 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, vShow } from "vue";
 import { offset, flip, arrow, computePosition } from "@floating-ui/dom";
 import Clipboard from "clipboard";
 import * as Diff2Html from "diff2html";
@@ -6284,6 +6284,10 @@ const codeReviewProps = {
   },
   expandLoader: {
     type: Function
+  },
+  options: {
+    type: Object,
+    default: () => ({})
   }
 };
 const CodeReviewInjectionKey = Symbol("d-code-review");
@@ -6528,15 +6532,15 @@ function addClassToDiffCode(codeStrArr, theClassName) {
   });
   return newArray;
 }
-function parseDiffCode(container, code, outputFormat, isAddCode = false) {
+function parseDiffCode(container, code, outputFormat, options, isAddCode = false) {
   var _a;
   const diff2HtmlUi = new Diff2HtmlUI(container, code, {
     drawFileList: false,
     matching: "lines",
     outputFormat,
     highlight: true,
-    diffStyle: "char",
-    rawTemplates: TemplateMap[outputFormat]
+    rawTemplates: TemplateMap[outputFormat],
+    ...options
   });
   if (outputFormat === "side-by-side") {
     let diffHtmlStr = diff2HtmlUi.diffHtml;
@@ -6800,6 +6804,15 @@ function findReferenceDomForDoubleColumn(parentNode, lineNumber, lineSide) {
     }
   }
 }
+function findParentTrNode(node) {
+  if (!node) {
+    return null;
+  }
+  if (node.tagName === "TR") {
+    return node;
+  }
+  return findParentTrNode(node.parentElement);
+}
 function useCodeReviewExpand(reviewContentRef, props) {
   const { outputFormat, expandThreshold, expandLoader } = toRefs(props);
   const processSideBySide = () => {
@@ -6841,7 +6854,7 @@ function useCodeReviewExpand(reviewContentRef, props) {
     }
     attachExpandUpDownButton(loadMoreLine.children[0], "down");
   };
-  const insertIncrementCodeForDoubleColumn = (code, direction, referenceDom) => {
+  const insertIncrementCodeForDoubleColumn = (code, direction, referenceDom, options) => {
     if (!referenceDom) {
       return;
     }
@@ -6850,7 +6863,7 @@ function useCodeReviewExpand(reviewContentRef, props) {
     }
     const prefix = "--- updated_at	Jan 1, 2019, 0:0:0 AM\n+++ updated_at	Jan 1, 2019, 0:0:0 AM\n";
     const container = document.createElement("div");
-    parseDiffCode(container, prefix + code, outputFormat.value, true);
+    parseDiffCode(container, prefix + code, outputFormat.value, options, true);
     const trNodes = Array.from(container.querySelectorAll("tr"));
     const expandLine = trNodes.find((element) => {
       var _a;
@@ -6924,7 +6937,7 @@ function useCodeReviewExpand(reviewContentRef, props) {
     }
     attachExpandUpDownButton(loadMoreLine.children[0], "down");
   };
-  const insertIncrementCode = (code, direction, referenceDom) => {
+  const insertIncrementCode = (code, direction, referenceDom, options) => {
     if (!referenceDom) {
       return;
     }
@@ -6933,7 +6946,7 @@ function useCodeReviewExpand(reviewContentRef, props) {
     }
     const prefix = "--- updated_at	Jan 1, 2019, 0:0:0 AM\n+++ updated_at	Jan 1, 2019, 0:0:0 AM\n";
     const container = document.createElement("div");
-    parseDiffCode(container, prefix + code, outputFormat.value, true);
+    parseDiffCode(container, prefix + code, outputFormat.value, options, true);
     const trNodes = Array.from(container.querySelectorAll("tr"));
     const expandLine = trNodes.find((element) => {
       var _a;
@@ -6963,7 +6976,7 @@ function useCodeReviewExpand(reviewContentRef, props) {
       }
     }
   };
-  const onExpandButtonClick = (e) => {
+  const onExpandButtonClick = (e, options) => {
     var _a, _b;
     const composedPath = e.composedPath();
     const expandIconDom = composedPath.find((element) => {
@@ -6976,7 +6989,7 @@ function useCodeReviewExpand(reviewContentRef, props) {
       const [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd] = getLineNumberFromDataset(expandIconDom, expandThreshold.value);
       (_b = expandLoader == null ? void 0 : expandLoader.value) == null ? void 0 : _b.call(expandLoader, [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd], (code) => {
         var _a2, _b2;
-        outputFormat.value === "line-by-line" ? insertIncrementCode(code, direction, (_a2 = expandIconDom.parentElement) == null ? void 0 : _a2.parentElement) : insertIncrementCodeForDoubleColumn(code, direction, (_b2 = expandIconDom.parentElement) == null ? void 0 : _b2.parentElement);
+        outputFormat.value === "line-by-line" ? insertIncrementCode(code, direction, (_a2 = expandIconDom.parentElement) == null ? void 0 : _a2.parentElement, options) : insertIncrementCodeForDoubleColumn(code, direction, (_b2 = expandIconDom.parentElement) == null ? void 0 : _b2.parentElement, options);
       });
     }
   };
@@ -6995,14 +7008,14 @@ function useCodeReview(props, ctx) {
     diffFile.value = Diff2Html.parse(diff.value);
     nextTick(() => {
       if (inBrowser && !showBlob.value) {
-        parseDiffCode(reviewContentRef.value, diff.value, outputFormat.value);
+        parseDiffCode(reviewContentRef.value, diff.value, outputFormat.value, props.options);
         allowExpand.value && insertExpandButton();
         ctx.emit("contentRefresh", JSON.parse(JSON.stringify(diffFile.value)));
       }
     });
   };
   const onContentClick = (e) => {
-    onExpandButtonClick(e);
+    onExpandButtonClick(e, props.options);
   };
   watch(showBlob, initDiffContent);
   watch(outputFormat, initDiffContent);
@@ -7027,25 +7040,161 @@ function useCodeReviewFold(props, ctx) {
   });
   return { isFold, toggleFold };
 }
+function useCodeReviewLineSelection(reviewContentRef, props, mouseMoveCb, mouseupCb) {
+  const ns2 = useNamespace("code-review");
+  let dragging = false;
+  let startTrNode;
+  let trNodes;
+  let isClickedLeft;
+  let shouldClear;
+  let isMouseMoved;
+  const onMousedown = (e) => {
+    if (e.button === 0) {
+      const composedPath = e.composedPath();
+      const lineNumberBox = composedPath.find(
+        (item) => {
+          var _a, _b;
+          return ((_a = item.classList) == null ? void 0 : _a.contains("comment-icon-hover")) || ((_b = item.classList) == null ? void 0 : _b.contains("comment-icon"));
+        }
+      );
+      trNodes = Array.from(reviewContentRef.value.querySelectorAll("tr")).filter((item) => {
+        var _a;
+        return !((_a = item.classList) == null ? void 0 : _a.contains("expand-line"));
+      });
+      if (!lineNumberBox) {
+        return;
+      }
+      const parentTrNode = findParentTrNode(e.target);
+      if (parentTrNode && (parentTrNode == null ? void 0 : parentTrNode.classList.contains("expand-line"))) {
+        return;
+      }
+      startTrNode = parentTrNode;
+      if (props.outputFormat === "side-by-side") {
+        isClickedLeft = composedPath.some((item) => {
+          var _a;
+          return (_a = item.classList) == null ? void 0 : _a.contains("d-code-left");
+        });
+      } else {
+        isClickedLeft = void 0;
+      }
+      dragging = true;
+      shouldClear = true;
+      isMouseMoved = false;
+      e.preventDefault();
+      e.stopPropagation();
+      document.addEventListener("mousemove", onMousemove);
+      document.addEventListener("mouseup", onMouseup);
+    }
+  };
+  function onMousemove(e) {
+    if (!dragging) {
+      return;
+    }
+    isMouseMoved = true;
+    if (shouldClear) {
+      clearCommentChecked();
+      shouldClear = false;
+    }
+    const composedPath = e.composedPath();
+    const inReviewContent = composedPath.some((item) => {
+      var _a;
+      return (_a = item.classList) == null ? void 0 : _a.contains(ns2.e("content"));
+    });
+    if (!inReviewContent) {
+      return;
+    }
+    const endTrNode = findParentTrNode(e.target);
+    if (!endTrNode) {
+      return;
+    }
+    let startIndex = trNodes.indexOf(startTrNode);
+    let endIndex = trNodes.indexOf(endTrNode);
+    if (endIndex === -1) {
+      return;
+    }
+    mouseMoveCb();
+    if (startIndex > endIndex) {
+      [startIndex, endIndex] = [endIndex, startIndex];
+    }
+    let position;
+    if (isClickedLeft === void 0) {
+      position = "all";
+    } else if (isClickedLeft) {
+      position = "left";
+    } else {
+      position = "right";
+    }
+    for (let i = 0; i < trNodes.length; i++) {
+      if (i >= startIndex && i <= endIndex) {
+        toggleCommentCheckedClass(trNodes[i], true, position);
+      } else {
+        toggleCommentCheckedClass(trNodes[i], false, position);
+      }
+    }
+  }
+  function onMouseup() {
+    dragging = false;
+    if (isMouseMoved) {
+      mouseupCb();
+    }
+    document.removeEventListener("mouseup", onMouseup);
+    document.removeEventListener("mousemove", onMousemove);
+  }
+  function clearCommentChecked() {
+    for (let i = 0; i < trNodes.length; i++) {
+      toggleCommentCheckedClass(trNodes[i], false, "all");
+    }
+  }
+  function toggleCommentCheckedClass(trNode, isAddClass, position) {
+    var _a;
+    const tdNodes = Array.from(trNode.children);
+    let toDoNodes;
+    if (position === "all") {
+      toDoNodes = tdNodes;
+    } else if (position === "left") {
+      toDoNodes = tdNodes.slice(0, 2);
+    } else {
+      toDoNodes = tdNodes.slice(2);
+    }
+    if ((position === "left" || position === "right") && isNaN(parseInt((_a = toDoNodes[0]) == null ? void 0 : _a.innerHTML))) {
+      return;
+    }
+    toDoNodes.forEach((item) => {
+      if (item.tagName === "TD") {
+        if (isAddClass) {
+          item.classList.add("comment-checked");
+        } else {
+          item.classList.remove("comment-checked");
+        }
+      }
+    });
+  }
+  return { onMousedown };
+}
 function useCodeReviewComment(reviewContentRef, props, ctx) {
   const { outputFormat, allowComment, allowChecked } = toRefs(props);
   const ns2 = useNamespace("code-review");
+  const { onMousedown } = useCodeReviewLineSelection(reviewContentRef, props, updateLineNumbers, afterCheckLines);
   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 = [];
-  });
+  let allTrNodes = [];
+  let afterCheckLinesEmitData;
+  watch(
+    () => outputFormat.value,
+    () => {
+      checkedLineNumberContainer = [];
+      currentLeftLineNumbers = [];
+      currentRightLineNumbers = [];
+      checkedLineCodeString = [];
+    }
+  );
   const resetLeftTop = () => {
     commentLeft.value = -100;
     commentTop.value = -100;
@@ -7128,30 +7277,7 @@ 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) => {
+  const getLineNumbers = (currentNumber, currentNumbers) => {
     if (currentNumber === -1) {
       return currentNumbers;
     }
@@ -7160,26 +7286,27 @@ function useCodeReviewComment(reviewContentRef, props, ctx) {
     }
     const numbers = [...currentNumbers];
     let max = Math.max(...numbers);
-    const min = Math.min(...numbers);
+    let min = Math.min(...numbers);
+    if (currentNumber < min) {
+      min = currentNumber;
+    }
     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 getCommonClassAndJudge = () => {
     const checkedLine = [currentLeftLineNumbers, currentRightLineNumbers];
     return {
-      linenumberDom,
+      linenumberDom: allTrNodes,
       checkedLine
     };
   };
   const addCommentCheckedClass = (Dom) => {
     !Dom.classList.contains("comment-checked") && Dom.classList.add("comment-checked");
   };
-  const addCommentClassSingle = (side) => {
-    const { linenumberDom, checkedLine } = getCommonClassAndJudge(side);
+  function getSingleCheckedLineCode(shouldRenderClass) {
+    const { linenumberDom, checkedLine } = getCommonClassAndJudge();
     const checkedCodeContent = [];
     for (let i = 0; i < linenumberDom.length; i++) {
       const lineNumberDomLeft = linenumberDom[i].children[0];
@@ -7189,25 +7316,29 @@ function useCodeReviewComment(reviewContentRef, props, ctx) {
         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;
+          const codeNode = linenumberDom[i].nextElementSibling;
           checkedCodeContent.push(codeNode == null ? void 0 : codeNode.innerText);
-          addCommentCheckedClass(linenumberDom[i]);
-          addCommentCheckedClass(codeNode);
+          if (shouldRenderClass) {
+            addCommentCheckedClass(linenumberDom[i]);
+            addCommentCheckedClass(codeNode);
+          }
         }
       }
     }
     checkedLineCodeString = checkedCodeContent;
-  };
-  const addCommentClassDouble = (side) => {
+  }
+  function getDoubleCheckedLineCode(shouldRenderClass) {
     var _a;
-    const { linenumberDom, checkedLine } = getCommonClassAndJudge(side);
+    const { linenumberDom, checkedLine } = getCommonClassAndJudge();
     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);
+      const codeNode = Dom.nextElementSibling;
+      if (shouldRenderClass) {
+        addCommentCheckedClass(Dom);
+        addCommentCheckedClass(codeNode);
+      }
       return codeNode == null ? void 0 : codeNode.innerText;
     }
     for (let i = 0; i < linenumberDom.length; i++) {
@@ -7223,38 +7354,53 @@ function useCodeReviewComment(reviewContentRef, props, ctx) {
       }
     }
     checkedLineCodeString = { leftCode: checkedCodeContentLeft, rightCode: checkedCodeContentRight };
-  };
-  const updateCheckedLineClass = () => {
-    if (outputFormat.value === "line-by-line") {
-      addCommentClassSingle(outputFormat.value);
-      return;
+  }
+  function getCheckedLineCode(shouldRenderClass) {
+    if (props.outputFormat === "line-by-line") {
+      return getSingleCheckedLineCode(shouldRenderClass);
     }
-    addCommentClassDouble(outputFormat.value);
+    getDoubleCheckedLineCode(shouldRenderClass);
+  }
+  function updateLineNumbers() {
+    currentLeftLineNumbers = currentLeftLineNumber === -1 ? currentLeftLineNumbers : getLineNumbers(currentLeftLineNumber, currentLeftLineNumbers);
+    currentRightLineNumbers = currentRightLineNumber === -1 ? currentRightLineNumbers : getLineNumbers(currentRightLineNumber, currentRightLineNumbers);
+    getCheckedLineCode(false);
+    afterCheckLinesEmitData = {
+      left: currentLeftLineNumber,
+      right: currentRightLineNumber,
+      details: {
+        lefts: currentLeftLineNumbers,
+        rights: currentRightLineNumbers,
+        codes: checkedLineCodeString
+      }
+    };
+  }
+  const updateCheckedLineClass = () => {
+    getCheckedLineCode(true);
   };
   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;
+      const codeNode = checkedLineNumberContainer[i].nextElementSibling;
       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) => {
+  const commentClick = () => {
     let obj = { left: currentLeftLineNumber, right: currentRightLineNumber };
-    if (currentLeftLineNumbers.length >= 1 || currentRightLineNumbers.length >= 1 && allowChecked.value) {
+    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
-        } };
+        obj = {
+          left: currentLeftLineNumber,
+          right: currentRightLineNumber,
+          details: {
+            lefts: currentLeftLineNumbers,
+            rights: currentRightLineNumbers,
+            codes: checkedLineCodeString
+          }
+        };
       } else {
         currentLeftLineNumbers = [];
         currentRightLineNumbers = [];
@@ -7263,6 +7409,9 @@ function useCodeReviewComment(reviewContentRef, props, ctx) {
     }
     ctx.emit("addComment", obj);
   };
+  function afterCheckLines() {
+    ctx.emit("afterCheckLines", afterCheckLinesEmitData);
+  }
   const onCommentIconClick = (e) => {
     if (e) {
       const composedPath = e.composedPath();
@@ -7276,10 +7425,6 @@ function useCodeReviewComment(reviewContentRef, props, ctx) {
         return;
       }
     }
-    if (isShift && allowChecked.value) {
-      commentShiftClick();
-      return;
-    }
     commentClick();
   };
   const insertComment = (lineNumber, lineSide, commentDom) => {
@@ -7320,7 +7465,25 @@ function useCodeReviewComment(reviewContentRef, props, ctx) {
       }
     }
   };
-  const mouseEvent = allowComment.value ? { onMousemove: onMouseMove, onMouseleave } : {};
+  const clearCheckedLines = () => {
+    currentLeftLineNumbers = [];
+    currentRightLineNumbers = [];
+    checkedLineCodeString = [];
+    resetCommentClass();
+  };
+  const handleMouseDown = (e) => {
+    const lineClassName = props.outputFormat === "line-by-line" ? ".d2h-code-linenumber" : ".d2h-code-side-linenumber";
+    allTrNodes = reviewContentRef.value.querySelectorAll(lineClassName);
+    onMousedown(e);
+  };
+  const mouseEvent = {};
+  if (allowComment.value) {
+    mouseEvent.onMousemove = onMouseMove;
+    mouseEvent.onMouseleave = onMouseleave;
+  }
+  if (props.allowChecked) {
+    mouseEvent.onMousedown = handleMouseDown;
+  }
   window.addEventListener("scroll", resetLeftTop);
   onUnmounted(() => {
     window.removeEventListener("scroll", resetLeftTop);
@@ -7330,10 +7493,9 @@ function useCodeReviewComment(reviewContentRef, props, ctx) {
     commentTop,
     mouseEvent,
     updateCheckedLineClass,
+    clearCheckedLines,
     onCommentMouseLeave,
     onCommentIconClick,
-    onCommentKeyDown,
-    unCommentKeyDown,
     insertComment,
     removeComment
   };
@@ -7342,7 +7504,7 @@ var codeReview = "";
 var CodeReview = defineComponent({
   name: "DCodeReview",
   props: codeReviewProps,
-  emits: ["foldChange", "addComment", "afterViewInit", "contentRefresh"],
+  emits: ["foldChange", "addComment", "afterViewInit", "contentRefresh", "afterCheckLines"],
   setup(props, ctx) {
     const ns2 = useNamespace("code-review");
     const {
@@ -7364,23 +7526,19 @@ var CodeReview = defineComponent({
       mouseEvent,
       onCommentMouseLeave,
       onCommentIconClick,
-      onCommentKeyDown,
-      unCommentKeyDown,
       insertComment,
       removeComment,
-      updateCheckedLineClass
+      updateCheckedLineClass,
+      clearCheckedLines
     } = useCodeReviewComment(reviewContentRef, props, ctx);
     onMounted(() => {
       ctx.emit("afterViewInit", {
         toggleFold,
         insertComment,
         removeComment,
-        updateCheckedLineClass
+        updateCheckedLineClass,
+        clearCheckedLines
       });
-      onCommentKeyDown();
-    });
-    onBeforeUnmount(() => {
-      unCommentKeyDown();
     });
     provide(CodeReviewInjectionKey, {
       diffType,