vue-devui 1.5.8 → 1.5.9

package/vue-devui.es.js

@@ -39,6 +39,7 @@ 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";
+import { Diff2HtmlUI } from "diff2html/lib/ui/js/diff2html-ui";
 import * as echarts from "echarts";
 import * as hljs from "highlight.js";
 import MarkdownIt from "markdown-it";
@@ -2134,6 +2135,10 @@ const formProps = {
   },
   size: {
     type: String
+  },
+  hideRequiredMark: {
+    type: Boolean,
+    default: false
   }
 };
 const FORM_TOKEN = Symbol("dForm");
@@ -6927,7 +6932,7 @@ var lodash = { exports: {} };
       function iteratee(func) {
         return baseIteratee(typeof func == "function" ? func : baseClone2(func, CLONE_DEEP_FLAG2));
       }
-      function matches(source) {
+      function matches2(source) {
         return baseMatches(baseClone2(source, CLONE_DEEP_FLAG2));
       }
       function matchesProperty(path, srcValue) {
@@ -7139,7 +7144,7 @@ var lodash = { exports: {} };
       lodash2.map = map;
       lodash2.mapKeys = mapKeys;
       lodash2.mapValues = mapValues;
-      lodash2.matches = matches;
+      lodash2.matches = matches2;
       lodash2.matchesProperty = matchesProperty;
       lodash2.memoize = memoize;
       lodash2.merge = merge;
@@ -8419,6 +8424,7 @@ function PendingIcon() {
   }, null)])]);
 }
 function useFormLabel() {
+  const formContext = inject(FORM_TOKEN);
   const formItemContext = inject(FORM_ITEM_TOKEN);
   const labelData = inject(LABEL_DATA);
   const ns2 = useNamespace("form");
@@ -8430,7 +8436,8 @@ function useFormLabel() {
   }));
   const labelInnerClasses = computed(() => ({
     [`${ns2.e("label-span")}`]: true,
-    [`${ns2.em("label", "required")}`]: formItemContext.isRequired
+    [`${ns2.em("label", "required")}`]: formItemContext.isRequired,
+    [`${ns2.em("label", "required-hide")}`]: formItemContext.isRequired && formContext.hideRequiredMark
   }));
   return { labelClasses, labelInnerClasses };
 }
@@ -14255,6 +14262,9 @@ const codeReviewProps = {
   expandAllThreshold: {
     type: Number,
     default: 50
+  },
+  codeLoader: {
+    type: Function
   }
 };
 const CodeReviewInjectionKey = Symbol("d-code-review");
@@ -14330,6 +14340,154 @@ function notEmptyNode(node) {
   const classes = node.classList;
   return !classes.contains("d2h-info") && !classes.contains("d2h-emptyplaceholder") && !classes.contains("comment-cell");
 }
+function insertIncrementLineToPage(referenceDom, trNodes, direction) {
+  const trNodesToBeInserted = trNodes.filter((element) => element.children[0].children.length === 2);
+  if (direction === "up") {
+    const nextSibling = referenceDom.nextElementSibling;
+    trNodesToBeInserted.forEach((item) => {
+      var _a;
+      (_a = referenceDom.parentNode) == null ? void 0 : _a.insertBefore(item, nextSibling);
+    });
+  } else {
+    trNodesToBeInserted.forEach((item) => {
+      var _a;
+      (_a = referenceDom.parentNode) == null ? void 0 : _a.insertBefore(item, referenceDom);
+    });
+  }
+}
+function ifRemoveExpandLine(expandDom, newExpandDom, direction) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const matches2 = newExpandDom.children[1].innerText.trim().match(ExpandLineReg);
+  if (!matches2) {
+    return true;
+  }
+  const leftLineNumber = parseInt(matches2[1]);
+  const addedLine = parseInt(matches2[2]);
+  const rightLineNumber = parseInt(matches2[3]);
+  if (direction === "up") {
+    const prevSibling = expandDom.previousElementSibling;
+    if (!prevSibling) {
+      if (leftLineNumber === 1 && rightLineNumber === 1) {
+        expandDom == null ? void 0 : expandDom.remove();
+        return true;
+      }
+    } else {
+      const prevLeftLineNumber = parseInt((_c = (_b = (_a = prevSibling.children) == null ? void 0 : _a[0].children) == null ? void 0 : _b[0]) == null ? void 0 : _c.innerText);
+      const prevRightLineNumber = parseInt((_f = (_e = (_d = prevSibling.children) == null ? void 0 : _d[0].children) == null ? void 0 : _e[1]) == null ? void 0 : _f.innerText);
+      if (leftLineNumber === prevLeftLineNumber + 1 && rightLineNumber === prevRightLineNumber + 1) {
+        expandDom.remove();
+        return true;
+      }
+    }
+  } else {
+    const nextSibling = expandDom.nextElementSibling;
+    const nextLeftLineNumber = parseInt((_i = (_h = (_g = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _g[0].children) == null ? void 0 : _h[0]) == null ? void 0 : _i.innerText);
+    const nextRightLineNumber = parseInt((_l = (_k = (_j = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _j[0].children) == null ? void 0 : _k[1]) == null ? void 0 : _l.innerText);
+    if (leftLineNumber + addedLine === nextLeftLineNumber && rightLineNumber + addedLine === nextRightLineNumber) {
+      expandDom.remove();
+      return true;
+    }
+  }
+  return false;
+}
+function updateExpandLineCount(expandDom, newExpandDom) {
+  if (!expandDom.nextElementSibling) {
+    return;
+  }
+  const curMatches = expandDom.children[1].innerText.trim().match(ExpandLineReg);
+  const newMatches = newExpandDom.children[1].innerText.trim().match(ExpandLineReg);
+  const newChangedNumLeft = parseInt((curMatches == null ? void 0 : curMatches[2]) || "") + parseInt((newMatches == null ? void 0 : newMatches[2]) || "");
+  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 parseDiffCode(container, code, outputFormat) {
+  const diff2HtmlUi = new Diff2HtmlUI(container, code, {
+    drawFileList: false,
+    matching: "lines",
+    outputFormat,
+    highlight: true
+  });
+  diff2HtmlUi.draw();
+  diff2HtmlUi.highlightCode();
+}
+function setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR) {
+  if (trNode) {
+    trNode.classList.add("expand-line");
+    trNode.dataset.prevL = String(prevL);
+    trNode.dataset.prevR = String(prevR);
+    trNode.dataset.nextL = String(nextL);
+    trNode.dataset.nextR = String(nextR);
+  }
+}
+function updateExpandUpDownButton(trNode) {
+  trNode.children[0].children[0].remove();
+  trNode.children[0].children[0].classList.remove("up-expand");
+  trNode.children[0].children[0].classList.add("all-expand");
+  trNode.children[0].children[0].innerHTML = AllExpandIcon();
+}
+function updateLineNumberInDataset(trNode, expandAllThreshold, position, updateExpandButton = false) {
+  let nextL;
+  let prevL;
+  let nextR;
+  let prevR;
+  if (position === "top") {
+    const nextLineNode = trNode.nextElementSibling;
+    nextL = parseInt(nextLineNode.children[0].children[0].innerText) - 1;
+    prevL = Math.max(nextL - expandAllThreshold + 1, 1);
+    nextR = parseInt(nextLineNode.children[0].children[1].innerText) - 1;
+    prevR = Math.max(nextR - expandAllThreshold + 1, 1);
+  } else if (position === "bottom") {
+    const prevLineNode = trNode.previousElementSibling;
+    prevL = parseInt(prevLineNode.children[0].children[0].innerText) + 1;
+    nextL = prevL + expandAllThreshold - 1;
+    prevR = parseInt(prevLineNode.children[0].children[1].innerText) + 1;
+    nextR = prevR + expandAllThreshold - 1;
+  } else {
+    const prevLineNode = trNode.previousElementSibling;
+    const nextLineNode = trNode.nextElementSibling;
+    const prevLineNumber = parseInt(prevLineNode.children[0].children[0].innerText);
+    const nextLineNumber = parseInt(nextLineNode.children[0].children[0].innerText);
+    prevL = prevLineNumber + 1;
+    prevR = parseInt(prevLineNode.children[0].children[1].innerText) + 1;
+    nextL = nextLineNumber - 1;
+    nextR = parseInt(nextLineNode.children[0].children[1].innerText) - 1;
+    const isExpandAll = nextLineNumber - prevLineNumber <= expandAllThreshold;
+    if (isExpandAll && updateExpandButton) {
+      updateExpandUpDownButton(trNode);
+    }
+  }
+  setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR);
+}
+function getLineNumberFormDataset(expandDom, expandAllThreshold) {
+  var _a, _b, _c;
+  const attrsMap = (_b = (_a = expandDom.parentElement) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.dataset;
+  const prevL = Number(attrsMap == null ? void 0 : attrsMap.prevL);
+  const nextL = Number(attrsMap == null ? void 0 : attrsMap.nextL);
+  const prevR = Number(attrsMap == null ? void 0 : attrsMap.prevR);
+  const nextR = Number(attrsMap == null ? void 0 : attrsMap.nextR);
+  let leftLineStart, leftLineEnd, rightLineStart, rightLineEnd;
+  if (prevL && nextL && prevR && nextR) {
+    const buttonClasses = Array.from(expandDom.classList);
+    const direction = (_c = buttonClasses.find((item) => item.endsWith("expand"))) == null ? void 0 : _c.split("-")[0];
+    if (direction === "up") {
+      leftLineEnd = nextL;
+      leftLineStart = Math.max(leftLineEnd - expandAllThreshold + 1, prevL);
+      rightLineEnd = nextR;
+      rightLineStart = Math.max(rightLineEnd - expandAllThreshold + 1, prevR);
+    } else if (direction === "down") {
+      leftLineStart = prevL;
+      leftLineEnd = Math.min(leftLineStart + expandAllThreshold - 1, nextL);
+      rightLineStart = prevR;
+      rightLineEnd = Math.min(rightLineStart + expandAllThreshold - 1, nextR);
+    } else {
+      leftLineStart = prevL;
+      leftLineEnd = nextL;
+      rightLineStart = prevR;
+      rightLineEnd = nextR;
+    }
+  }
+  return [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd];
+}
 function insertNode(parent, child) {
   if (parent.firstChild) {
     parent.insertBefore(child, parent.firstChild);
@@ -14381,7 +14539,8 @@ function addCommentToPage(lineHost, commentDom, lineSide) {
     (_b = lineHost.parentElement) == null ? void 0 : _b.appendChild(newLine);
   }
 }
-function useCodeReviewExpand(reviewContentRef, expandAllThreshold, outputFormat) {
+function useCodeReviewExpand(reviewContentRef, props) {
+  const { outputFormat, expandAllThreshold, codeLoader } = toRefs(props);
   const processSideBySide = () => {
     const [leftTable, rightTable] = reviewContentRef.value.querySelectorAll("table");
     const trNodes = Array.from(leftTable.querySelectorAll("tr"));
@@ -14401,7 +14560,7 @@ function useCodeReviewExpand(reviewContentRef, expandAllThreshold, outputFormat)
         } 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;
+          const isExpandAll = parseInt(nextLineChildren[0].innerText) - parseInt(preLineChildren[0].innerText) - 1 < expandAllThreshold.value;
           attachExpandUpDownButton(lineNumberBox, isExpandAll ? "all" : "updown");
         }
       }
@@ -14435,13 +14594,15 @@ function useCodeReviewExpand(reviewContentRef, expandAllThreshold, outputFormat)
         const nextLineIndex = lineIndex + 1;
         const prevLineIndex = lineIndex - 1;
         if (lineIndex === 0 && nextLineIndex in trNodes) {
+          updateLineNumberInDataset(trNodes[lineIndex], expandAllThreshold.value, "top");
           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;
+          updateLineNumberInDataset(trNodes[lineIndex], expandAllThreshold.value, "middle");
+          const isExpandAll = nextLineNumber - prevLineNumber <= expandAllThreshold.value;
           attachExpandUpDownButton(lineNumberBox, isExpandAll ? "all" : "updown");
         }
       }
@@ -14449,35 +14610,93 @@ function useCodeReviewExpand(reviewContentRef, expandAllThreshold, outputFormat)
     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);
+    updateLineNumberInDataset(loadMoreLine, expandAllThreshold.value, "bottom");
+    attachExpandUpDownButton(loadMoreLine.children[0], "down");
+  };
+  const insertIncrementCode = (code, direction, referenceDom) => {
+    if (!referenceDom) {
+      return;
+    }
+    if (!code) {
+      return referenceDom == null ? void 0 : referenceDom.remove();
+    }
+    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);
+    const trNodes = Array.from(container.querySelectorAll("tr"));
+    const expandLine = trNodes.find((element) => {
+      var _a;
+      return (_a = element.children[1]) == null ? void 0 : _a.innerText.trim().match(ExpandLineReg);
+    });
+    if (!expandLine) {
+      return;
+    }
+    insertIncrementLineToPage(referenceDom, trNodes, direction);
+    const removedExpandLine = ifRemoveExpandLine(referenceDom, expandLine, direction);
+    if (removedExpandLine) {
+      return;
+    }
+    updateExpandLineCount(referenceDom, expandLine);
+    if (direction === "up") {
+      if (!referenceDom.previousElementSibling) {
+        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "top");
+      } else {
+        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "middle", true);
+      }
+    } else {
+      if (referenceDom.nextElementSibling) {
+        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "middle", true);
+      } else {
+        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "bottom");
+      }
+    }
+  };
+  const onExpandButtonClick = (e) => {
+    var _a, _b;
+    const composedPath = e.composedPath();
+    const expandIconDom = composedPath.find((element) => {
+      var _a2;
+      return (_a2 = element.classList) == null ? void 0 : _a2.contains("expand-icon");
+    });
+    if (expandIconDom) {
+      const expandDirection = (_a = Array.from(expandIconDom.classList).find((item) => item.endsWith("expand"))) == null ? void 0 : _a.split("-")[0];
+      const direction = expandDirection === "up" || expandDirection === "all" ? "up" : "down";
+      const [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd] = getLineNumberFormDataset(expandIconDom, expandAllThreshold.value);
+      (_b = codeLoader == null ? void 0 : codeLoader.value) == null ? void 0 : _b.call(codeLoader, [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd], (code) => {
+        var _a2;
+        insertIncrementCode(code, direction, (_a2 = expandIconDom.parentElement) == null ? void 0 : _a2.parentElement);
+      });
+    }
   };
   const insertExpandButton = () => {
-    outputFormat === "side-by-side" ? processSideBySide() : processLineByLine();
+    outputFormat.value === "side-by-side" ? processSideBySide() : processLineByLine();
   };
-  return { insertExpandButton };
+  return { insertExpandButton, onExpandButtonClick };
 }
 function useCodeReview(props, ctx2) {
-  const { diff, fold, outputFormat, expandAllThreshold } = toRefs(props);
+  const { diff, outputFormat } = 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 diffFile = ref([]);
+  const { insertExpandButton, onExpandButtonClick } = useCodeReviewExpand(reviewContentRef, props);
   const initDiffContent = () => {
-    renderHtml.value = Diff2Html.html(diffFile, {
-      drawFileList: false,
-      matching: "lines",
-      outputFormat: outputFormat.value
+    diffFile.value = Diff2Html.parse(diff.value);
+    nextTick(() => {
+      parseDiffCode(reviewContentRef.value, diff.value, outputFormat.value);
+      insertExpandButton();
+      ctx2.emit("contentRefresh", JSON.parse(JSON.stringify(diffFile.value)));
     });
-    nextTick(insertExpandButton);
   };
+  const onContentClick = (e) => {
+    onExpandButtonClick(e);
+  };
+  watch(diff, initDiffContent, { immediate: true });
+  return { renderHtml, reviewContentRef, diffFile, onContentClick };
+}
+function useCodeReviewFold(props, ctx2) {
+  const { fold } = toRefs(props);
+  const isFold = ref(fold.value);
   const toggleFold = (status2) => {
     if (status2 !== void 0) {
       isFold.value = status2;
@@ -14489,18 +14708,9 @@ function useCodeReview(props, ctx2) {
     isFold.value = val;
   });
   watch(isFold, () => {
-    if (!isFold.value && renderHtml.value === "") {
-      initDiffContent();
-    }
     ctx2.emit("foldChange", isFold.value);
   });
-  onBeforeMount(() => {
-    if (!isFold.value) {
-      initDiffContent();
-    }
-  });
-  provide(CodeReviewInjectionKey, { reviewContentRef, diffInfo: diffFile[0], isFold, rootCtx: ctx2 });
-  return { renderHtml, isFold, reviewContentRef, toggleFold };
+  return { isFold, toggleFold };
 }
 function useCodeReviewComment(reviewContentRef, ctx2) {
   const ns2 = useNamespace("code-review");
@@ -14580,6 +14790,10 @@ function useCodeReviewComment(reviewContentRef, ctx2) {
       nextLineHost = nextLineHost.nextElementSibling;
     }
   };
+  window.addEventListener("scroll", resetLeftTop);
+  onUnmounted(() => {
+    window.removeEventListener("scroll", resetLeftTop);
+  });
   return {
     commentLeft,
     commentTop,
@@ -14596,15 +14810,19 @@ var codeReview = "";
 var CodeReview = defineComponent({
   name: "DCodeReview",
   props: codeReviewProps,
-  emits: ["foldChange", "addComment", "afterViewInit"],
+  emits: ["foldChange", "addComment", "afterViewInit", "contentRefresh"],
   setup(props, ctx2) {
     const ns2 = useNamespace("code-review");
     const {
       renderHtml,
-      isFold,
       reviewContentRef,
-      toggleFold
+      diffFile,
+      onContentClick
     } = useCodeReview(props, ctx2);
+    const {
+      isFold,
+      toggleFold
+    } = useCodeReviewFold(props, ctx2);
     const {
       commentLeft,
       commentTop,
@@ -14623,6 +14841,12 @@ var CodeReview = defineComponent({
         removeComment
       });
     });
+    provide(CodeReviewInjectionKey, {
+      reviewContentRef,
+      diffInfo: diffFile.value[0],
+      isFold,
+      rootCtx: ctx2
+    });
     return () => createVNode("div", {
       "class": ns2.b()
     }, [createVNode(CodeReviewHeader, {
@@ -14633,6 +14857,7 @@ var CodeReview = defineComponent({
       }],
       "innerHTML": renderHtml.value,
       "ref": reviewContentRef,
+      "onClick": onContentClick,
       "onMouseenter": onMouseEnter,
       "onMousemove": onMouseMove,
       "onMouseleave": onMouseleave
@@ -21431,207 +21656,160 @@ var DatePickerProInstall = {
     app.component(DRangeDatePickerPro.name, DRangeDatePickerPro);
   }
 };
-const SHADOW_ID = "devui-dragdrop-placeholder-shadow";
-function getElementStyle(id, styleName) {
-  return document.getElementById(id).currentStyle ? document.getElementById(id).currentStyle[styleName] : window.getComputedStyle(document.getElementById(id), styleName);
-}
-function createShadow(originId) {
-  const shadow = document.createElement("div");
-  shadow.id = SHADOW_ID;
-  shadow.style.background = "rgb(206, 215, 255)";
-  shadow.style.width = getElementStyle(originId, "width");
-  shadow.style.height = "20px";
-  return shadow;
-}
-function changeDragState(el, originId, dragStart, drag, dragover, drop, shouldCreateShadow, dragFlag) {
-  el.dataset.originId = originId;
-  el.dataset.dragStart = dragStart;
-  el.dataset.dragover = dragover;
-  el.dataset.drop = drop;
-  el.dataset.shouldCreateShadow = shouldCreateShadow;
-  el.dataset.dragFlag = dragFlag;
-}
-function computeCompareElementHeight(compareElement) {
-  return compareElement.getBoundingClientRect().top + Math.floor(compareElement.offsetHeight / 2);
-}
-function createInsertSortableShadow(sortDropArea, mouseObject, originId) {
-  const sortDropAreaArr = [...sortDropArea.children];
-  if (sortDropAreaArr.length === 0) {
-    if (!document.getElementById(SHADOW_ID)) {
-      const shadowElement = createShadow(originId);
-      sortDropArea.appendChild(shadowElement);
+var draggableDirective = {};
+var droppableDirective = {};
+function matches(element, selector) {
+  const proto = Element.prototype;
+  const func = proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector || proto.webkitMatchesSelector || function(s) {
+    const ctx2 = this;
+    const matchesElements = (ctx2.document || ctx2.ownerDocument).querySelectorAll(s);
+    let i = matchesElements.length;
+    while (--i >= 0 && matchesElements.item(i) !== ctx2) {
     }
-  } else {
-    for (let index2 = 0; index2 < sortDropAreaArr.length; index2++) {
-      const compareHeight = computeCompareElementHeight(sortDropAreaArr[index2]);
-      document.getElementById(SHADOW_ID) ? sortDropArea.removeChild(document.getElementById(SHADOW_ID)) : null;
-      if (Math.floor(mouseObject.clientY) <= Math.floor(compareHeight / 2) + sortDropAreaArr[index2].getBoundingClientRect().top) {
-        sortDropArea.insertBefore(createShadow(originId), sortDropAreaArr[index2]);
-        break;
-      } else {
-        index2 === sortDropAreaArr.length - 1 && sortDropArea.appendChild(createShadow(originId));
-      }
-    }
-  }
-}
-function deleteInsertedSortableShadow(dropSortArea) {
-  if (dropSortArea) {
-    if (document.getElementById(SHADOW_ID)) {
-      if (dropSortArea.contains(document.getElementById(SHADOW_ID))) {
-        dropSortArea.removeChild(document.getElementById(SHADOW_ID));
-      }
-    }
-  }
-}
-function judgeMouseIsInSortableArea(mouse, sortableArea) {
-  const { clientX, clientY } = mouse;
-  const eleLeft = sortableArea.getBoundingClientRect().left;
-  const eleRight = sortableArea.getBoundingClientRect().right;
-  const eleTop = sortableArea.getBoundingClientRect().top;
-  const eleBottom = sortableArea.getBoundingClientRect().bottom;
-  if (clientX > eleLeft && clientX < eleRight && clientY > eleTop && clientY < eleBottom) {
-    return true;
-  } else {
-    return false;
-  }
-}
-function sameOriginExchangeElementPosition(mouse, comparedArr, dragId, dropArea) {
-  if (comparedArr.length <= 1) {
-    return;
-  }
-  for (let index2 = 0; index2 < comparedArr.length; index2++) {
-    if (mouse.clientY < comparedArr[index2].getBoundingClientRect().top) {
-      dropArea.insertBefore(document.getElementById(dragId), comparedArr[index2]);
-      break;
-    }
-    if (index2 === comparedArr.length - 1 && mouse.clientY > comparedArr[index2].getBoundingClientRect().bottom) {
-      dropArea.appendChild(document.getElementById(dragId));
-      break;
-    }
-  }
+    return i > -1;
+  };
+  return func.call(element, selector);
 }
-function exchangeShadowPosition(mouse, dropAreaElements, dragId, dropArea) {
-  var _a, _b, _c;
-  for (let index2 = 0; index2 < dropAreaElements.length; index2++) {
-    if (((_a = dropAreaElements[index2]) == null ? void 0 : _a.id) !== SHADOW_ID) {
-      if (Math.floor(mouse.clientY) <= dropAreaElements[index2].getBoundingClientRect().top) {
-        if (((_b = dropAreaElements[index2 - 1]) == null ? void 0 : _b.id) !== SHADOW_ID) {
-          if (document.getElementById(SHADOW_ID)) {
-            dropArea.removeChild(document.getElementById(SHADOW_ID));
+var SortableDirective = {
+  mounted(el, binding) {
+    let sourceElement;
+    let sourceIndex;
+    let targetIndex;
+    let mouseoverElement;
+    let isDrop;
+    const canDrag = () => {
+      var _a, _b;
+      if ((_a = binding == null ? void 0 : binding.value) == null ? void 0 : _a.handle) {
+        const handleSelector = (_b = binding == null ? void 0 : binding.value) == null ? void 0 : _b.handle;
+        let element = mouseoverElement;
+        while (element !== el) {
+          if (matches(element, handleSelector)) {
+            return true;
           }
-          dropArea.insertBefore(createShadow(dragId), dropAreaElements[index2]);
-          break;
+          element = element.parentNode;
         }
+        return false;
       }
-      if (Math.floor(mouse.clientY) > dropAreaElements[dropAreaElements.length - 1].getBoundingClientRect().top) {
-        if (index2 === dropAreaElements.length - 1 && ((_c = dropAreaElements[index2]) == null ? void 0 : _c.id) !== SHADOW_ID) {
-          if (document.getElementById(SHADOW_ID)) {
-            dropArea.removeChild(document.getElementById(SHADOW_ID));
-          }
-          dropArea.appendChild(createShadow(dragId));
+      return true;
+    };
+    const getCurrentTarget = (event) => {
+      let index2 = -1;
+      let element = event.target;
+      while (element !== el) {
+        if (element.parentNode === el) {
+          index2 = Array.from(el.children).indexOf(element);
         }
-        break;
+        element = element.parentNode;
       }
-    }
-  }
-}
-var DraggableDirective = {
-  mounted(el, binding) {
-    el.setAttribute("draggable", "true");
-    el.style.cursor = "grab";
-    el.addEventListener("drag", () => {
-      changeDragState(el, el.id, "true", "true", "false", "false", "false", "true");
-      if (binding.instance.$root.dropElement && document.getElementById(SHADOW_ID)) {
-        deleteInsertedSortableShadow(binding.instance.$root.dropElement);
-        binding.instance.$root.dropElement = null;
-      }
-    }, false);
-    el.addEventListener("dragstart", () => {
-      changeDragState(el, el.id, "true", "true", "false", "false", "false", "false");
-      binding.instance.$root.identity = el.id;
-      el.dataset.dragArea = el.parentNode.className;
-    }, false);
-  }
-};
-var DroppableDirective = {
-  mounted(el, binding) {
-    el.addEventListener("dragover", (event) => {
-      event.preventDefault();
-      const dragId = binding.instance.$root.identity;
-      changeDragState(document.getElementById(dragId), dragId, "true", "false", "true", "false", "false", "false");
-      document.getElementById(dragId).dataset.dropArea = [...el.childNodes][1].className;
-    }, false);
-    el.addEventListener("drop", (event) => {
-      event.preventDefault();
-      const dragId = binding.instance.$root.identity;
-      document.getElementById(dragId).dataset.parent = "not-sortable-drop-area";
-      if (document.getElementById(dragId).dataset.dropArea === document.getElementById(dragId).dataset.dragArea) {
-        return;
+      return index2;
+    };
+    const getDragClass = () => {
+      var _a;
+      return ((_a = binding == null ? void 0 : binding.value) == null ? void 0 : _a.dragClass) || "devui-drag-item";
+    };
+    const emitEvent = (funcName, event) => {
+      if (binding == null ? void 0 : binding.value[funcName]) {
+        binding == null ? void 0 : binding.value[funcName](event);
       }
-      const childrenArr = [...Array.from(el.children)[1].children];
-      if (childrenArr.length > 0) {
-        for (let index2 = 0; index2 < childrenArr.length; index2++) {
-          const childrenYRange = childrenArr[index2].getBoundingClientRect().top + childrenArr[index2].offsetHeight / 2;
-          if (parseFloat(event.clientY) < parseFloat(childrenYRange)) {
-            el.children[1].insertBefore(document.getElementById(dragId), childrenArr[index2]);
-            break;
-          }
-          if (index2 === childrenArr.length - 1) {
-            el.children[1].appendChild(document.getElementById(dragId));
-          }
+    };
+    el.addEventListener("mouseover", (event) => {
+      mouseoverElement = event.target;
+    });
+    Array.from(el.children).forEach((element) => {
+      element.setAttribute("draggable", "true");
+      element.addEventListener("dragstart", (event) => {
+        if (canDrag()) {
+          isDrop = false;
+          sourceElement = element;
+          sourceIndex = Array.from(el.children).indexOf(sourceElement);
+          setTimeout(() => {
+            sourceElement.classList.add(getDragClass());
+          });
+        } else {
+          event.preventDefault();
+          event.stopPropagation();
         }
-      } else {
-        el.childNodes[1].appendChild(document.getElementById(dragId));
-      }
+        emitEvent("dragStart", event);
+      });
+    });
+    el.addEventListener("dragenter", function(event) {
+      emitEvent("dragEnter", event);
     });
-  }
-};
-var SortableDirective = {
-  mounted(el, binding) {
-    const self2 = el;
     el.addEventListener("dragover", function(event) {
-      var _a;
-      event.preventDefault();
-      const dragId = binding.instance.$root.identity;
-      if (((_a = document.getElementById(dragId)) == null ? void 0 : _a.dataset.parent) === "sortable-drop-area") {
-        return;
-      }
-      if (!document.getElementById(SHADOW_ID) && [...self2.childNodes[1].children].length === 0) {
-        createInsertSortableShadow([...self2.childNodes][1], event, dragId);
-      } else if ([...self2.childNodes[1].children].length >= 1) {
-        exchangeShadowPosition(event, [...self2.childNodes[1].children], dragId, self2.childNodes[1]);
+      var _a, _b;
+      const currentIndex = Array.from(el.children).indexOf(sourceElement);
+      const toIndex = getCurrentTarget(event);
+      if (currentIndex !== -1 && toIndex !== -1) {
+        if (currentIndex > toIndex) {
+          el.removeChild(sourceElement);
+          el.insertBefore(sourceElement, el.children[toIndex]);
+          targetIndex = toIndex;
+        } else if (currentIndex < toIndex) {
+          el.removeChild(sourceElement);
+          if (el.children[toIndex]) {
+            el.insertBefore(sourceElement, el.children[toIndex]);
+            targetIndex = toIndex;
+          } else {
+            el.appendChild(sourceElement);
+            targetIndex = el.children.length - 1;
+          }
+        }
+        ((_a = binding == null ? void 0 : binding.value) == null ? void 0 : _a.dragover) && ((_b = binding == null ? void 0 : binding.value) == null ? void 0 : _b.dragover(event));
       }
+      event.preventDefault();
+      emitEvent("dragOver", event);
+    });
+    el.addEventListener("dragleave", function(event) {
+      emitEvent("dragLeave", event);
     });
     el.addEventListener("drop", function(event) {
-      var _a;
-      const dropArea = [...el.childNodes][1];
-      const dragId = binding.instance.$root.identity;
-      if (((_a = document.getElementById(dragId)) == null ? void 0 : _a.dataset.parent) === "sortable-drop-area") {
-        sameOriginExchangeElementPosition(event, [...dropArea.children], dragId, dropArea);
-        return;
-      }
-      if (document.getElementById(SHADOW_ID)) {
-        dropArea.replaceChild(document.getElementById(dragId), document.getElementById(SHADOW_ID));
-        if (document.getElementById(dragId)) {
-          document.getElementById(dragId).dataset.parent = "sortable-drop-area";
+      var _a, _b, _c;
+      isDrop = true;
+      if ((_a = binding == null ? void 0 : binding.value) == null ? void 0 : _a.list) {
+        const list2 = (_b = binding == null ? void 0 : binding.value) == null ? void 0 : _b.list;
+        const item = list2[sourceIndex];
+        list2.splice(sourceIndex, 1);
+        list2.splice(targetIndex, 0, item);
+        if ((_c = binding == null ? void 0 : binding.value) == null ? void 0 : _c.drop) {
+          emitEvent("drop", {
+            event,
+            list: list2,
+            fromIndex: sourceIndex,
+            targetIndex
+          });
         }
       }
     });
-    el.addEventListener("dragleave", function(event) {
-      const dropArea = [...el.childNodes][1];
-      if (document.getElementById(SHADOW_ID) && !judgeMouseIsInSortableArea(event, el)) {
-        dropArea.removeChild(document.getElementById(SHADOW_ID));
+    el.addEventListener("dragend", function(event) {
+      if (!isDrop) {
+        if (sourceIndex !== -1 && targetIndex !== -1) {
+          if (targetIndex > sourceIndex) {
+            el.removeChild(sourceElement);
+            el.insertBefore(sourceElement, el.children[sourceIndex]);
+          } else if (sourceIndex > targetIndex) {
+            el.removeChild(sourceElement);
+            if (el.children[sourceIndex]) {
+              el.insertBefore(sourceElement, el.children[sourceIndex]);
+            } else {
+              el.appendChild(sourceElement);
+            }
+          }
+        }
       }
+      sourceIndex = -1;
+      targetIndex = -1;
+      setTimeout(() => {
+        sourceElement.classList.remove(getDragClass());
+      });
+      emitEvent("dragEnd", event);
     });
   }
 };
 var DragdropInstall = {
   title: "Dragdrop \u62D6\u62FD",
-  category: "\u901A\u7528",
-  status: "10%",
+  category: "\u6F14\u8FDB\u4E2D",
+  status: "100%",
   install(app) {
-    app.directive("DDraggable", DraggableDirective);
-    app.directive("DDroppable", DroppableDirective);
     app.directive("DSortable", SortableDirective);
   }
 };
@@ -30127,6 +30305,7 @@ const modalProps = {
 function useModal(props, emit) {
   function close2() {
     emit("update:modelValue", false);
+    emit("close");
   }
   function execClose() {
     props.beforeClose ? props.beforeClose(close2) : close2();
@@ -30280,7 +30459,7 @@ var Modal = defineComponent({
   name: "DModal",
   inheritAttrs: false,
   props: modalProps,
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "close"],
   setup(props, {
     slots,
     attrs,
@@ -35374,9 +35553,11 @@ var SplitterPane = defineComponent({
     slots,
     expose
   }) {
+    var _a;
     const store = inject("splitterStore");
     const domRef = ref();
     const orderRef = ref();
+    const currentVnode = (_a = getCurrentInstance()) == null ? void 0 : _a.vnode;
     const ns2 = useNamespace("splitter");
     watch([orderRef, domRef], ([order, ele]) => {
       if (!ele) {
@@ -35470,17 +35651,26 @@ var SplitterPane = defineComponent({
         addClass(ele, flexGrowClass);
       }
     };
+    const updateCollapsed = (collapsed) => {
+      var _a2;
+      if (typeof collapsed === "boolean") {
+        currentVnode.component.props.collapsed = collapsed;
+        return;
+      }
+      currentVnode.component.props.collapsed = !((_a2 = currentVnode == null ? void 0 : currentVnode.component) == null ? void 0 : _a2.props.collapsed);
+    };
     expose({
       order: orderRef,
       getPaneSize,
-      toggleNearPaneFlexGrow
+      toggleNearPaneFlexGrow,
+      updateCollapsed
     });
     return () => {
-      var _a;
+      var _a2;
       return createVNode("div", {
         "class": ns2.e("pane"),
         "ref": domRef
-      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+      }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)]);
     };
   }
 });
@@ -43199,9 +43389,9 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.5.8",
+  version: "1.5.9",
   install(app) {
     installs.forEach((p) => app.use(p));
   }
 };
-export { Accordion, ActionTimeline, Alert, Anchor, Aside, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, BreadcrumbItem, DButton as Button, ButtonGroup, Card, Carousel, CarouselItem, Cascader, Checkbox, CheckboxButton, DCheckboxGroup as CheckboxGroup, CodeEditor, CodeReview, Col, Collapse, CollapseItem, ColorPicker, Column, Comment, Content, Countdown, DChart, DRangeDatePickerPro, DatePicker, DatePickerPro, DraggableDirective, Drawer, DrawerService, Dropdown$1 as Dropdown, DropdownMenu, DroppableDirective, EditableSelect, EditorMd, FixedOverlay, FlexibleOverlay, Footer, Form, FormItem, FormOperation, Fullscreen, Gantt, GitGraph, Header, DIcon as Icon, IconGroup, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, List, ListItem, LoadingDirective, loading as LoadingService, MdRender, Mention, Menu, MenuItem, Message, Modal, ModalBody, ModalFooter, ModalHeader, MultiAutoComplete, NavSprite, Notification, NotificationService, Option, OptionGroup, Pagination, Panel, PanelBody, PanelFooter, PanelHeader, Popover, Progress, QuadrantDiagram, Radio, RadioButton, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, SortableDirective, Splitter, SplitterPane, Statistic, Status, Step, Steps, StepsGuide, StepsGuideDirective, StickSlider, Sticky, SubMenu, Switch, Tab, Table, Tabs, Tag, TagInput, Textarea, TimePicker, TimeSelect, Timeline, TimelineItem, Tooltip, Transfer, Tree, TreeSelect, Upload, VirtualList, vueDevui as default, fileDropDirective };
+export { Accordion, ActionTimeline, Alert, Anchor, Aside, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, BreadcrumbItem, DButton as Button, ButtonGroup, Card, Carousel, CarouselItem, Cascader, Checkbox, CheckboxButton, DCheckboxGroup as CheckboxGroup, CodeEditor, CodeReview, Col, Collapse, CollapseItem, ColorPicker, Column, Comment, Content, Countdown, DChart, DRangeDatePickerPro, DatePicker, DatePickerPro, draggableDirective as DraggableDirective, Drawer, DrawerService, Dropdown$1 as Dropdown, DropdownMenu, droppableDirective as DroppableDirective, EditableSelect, EditorMd, FixedOverlay, FlexibleOverlay, Footer, Form, FormItem, FormOperation, Fullscreen, Gantt, GitGraph, Header, DIcon as Icon, IconGroup, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, List, ListItem, LoadingDirective, loading as LoadingService, MdRender, Mention, Menu, MenuItem, Message, Modal, ModalBody, ModalFooter, ModalHeader, MultiAutoComplete, NavSprite, Notification, NotificationService, Option, OptionGroup, Pagination, Panel, PanelBody, PanelFooter, PanelHeader, Popover, Progress, QuadrantDiagram, Radio, RadioButton, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, SortableDirective, Splitter, SplitterPane, Statistic, Status, Step, Steps, StepsGuide, StepsGuideDirective, StickSlider, Sticky, SubMenu, Switch, Tab, Table, Tabs, Tag, TagInput, Textarea, TimePicker, TimeSelect, Timeline, TimelineItem, Tooltip, Transfer, Tree, TreeSelect, Upload, VirtualList, vueDevui as default, fileDropDirective };