vue-devui 1.5.8 → 1.5.10

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";
@@ -126,7 +127,7 @@ const getRootSlots = () => {
   const rootComponent = getRootComponent(getCurrentInstance());
   return rootComponent == null ? void 0 : rootComponent.slots;
 };
-function createBem(namespace, element, modifier) {
+function createBem$1(namespace, element, modifier) {
   let cls = namespace;
   if (element) {
     cls += `__${element}`;
@@ -136,12 +137,12 @@ function createBem(namespace, element, modifier) {
   }
   return cls;
 }
-function useNamespace(block, needDot = false) {
+function useNamespace$1(block, needDot = false) {
   const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
-  const b = () => createBem(namespace);
-  const e = (element) => element ? createBem(namespace, element) : "";
-  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
-  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  const b = () => createBem$1(namespace);
+  const e = (element) => element ? createBem$1(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem$1(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem$1(namespace, element, modifier) : "";
   return {
     b,
     e,
@@ -181,7 +182,7 @@ var DAccordionMenu = defineComponent({
       titleKey,
       menuItemTemplate
     } = toRefs(props);
-    const ns2 = useNamespace("accordion");
+    const ns2 = useNamespace$1("accordion");
     const rootSlots = getRootSlots();
     const accordionCtx = inject("accordionContext");
     const parentValue = parent.value;
@@ -295,7 +296,7 @@ var DAccordionItem = defineComponent({
       disabledKey,
       itemTemplate
     } = toRefs(props);
-    const ns2 = useNamespace("accordion");
+    const ns2 = useNamespace$1("accordion");
     const rootSlots = getRootSlots();
     const accordionCtx = inject("accordionContext");
     const parentValue = parent.value;
@@ -374,7 +375,7 @@ var DAccordionItemHreflink = defineComponent({
       disabledKey,
       itemTemplate
     } = toRefs(props);
-    const ns2 = useNamespace("accordion");
+    const ns2 = useNamespace$1("accordion");
     const rootSlots = getRootSlots();
     const accordionCtx = inject("accordionContext");
     const title = computed(() => {
@@ -465,7 +466,7 @@ var DAccordionItemRouterlink = defineComponent({
       disabledKey,
       itemTemplate
     } = toRefs(props);
-    const ns2 = useNamespace("accordion");
+    const ns2 = useNamespace$1("accordion");
     const route = useRoute();
     const rootSlots = getRootSlots();
     const accordionCtx = inject("accordionContext");
@@ -750,7 +751,7 @@ var AccordionList = defineComponent({
       noContentTemplate,
       innerListTemplate
     } = toRefs(props);
-    const ns2 = useNamespace("accordion");
+    const ns2 = useNamespace$1("accordion");
     const deepValue = deepth.value;
     const rootSlots = getRootSlots();
     const accordionCtx = inject("accordionContext");
@@ -852,8 +853,8 @@ var Accordion = defineComponent({
       autoOpenActiveMenu,
       restrictOneOpen
     } = toRefs(props);
-    const ns2 = useNamespace("accordion");
-    const scrollbarNs = useNamespace("scrollbar");
+    const ns2 = useNamespace$1("accordion");
+    const scrollbarNs = useNamespace$1("scrollbar");
     let clickActiveItem = void 0;
     const flatten = (arr, curChildrenKey = "children", includeParent = false, includeLeaf = true) => {
       return arr.reduce((acc, cur) => {
@@ -1145,6 +1146,175 @@ const AlertCloseIcon = () => createVNode("svg", {
           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)])])]);
+function hasClass(el, className2) {
+  if (el.classList) {
+    return el.classList.contains(className2);
+  }
+  const originClass = el.className;
+  return ` ${originClass} `.indexOf(` ${className2} `) > -1;
+}
+function addClass(el, className2) {
+  if (el.classList) {
+    el.classList.add(className2);
+  } else {
+    if (!hasClass(el, className2)) {
+      el.className = `${el.className} ${className2}`;
+    }
+  }
+}
+function removeClass(el, className2) {
+  if (el.classList) {
+    el.classList.remove(className2);
+  } else {
+    if (hasClass(el, className2)) {
+      const originClass = el.className;
+      el.className = ` ${originClass} `.replace(` ${className2} `, " ");
+    }
+  }
+}
+const inBrowser = typeof window !== "undefined";
+function debounce(func, wait, immediate) {
+  let timer, result2;
+  return function(...args) {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    if (immediate) {
+      const localImmediate = !timer;
+      timer = window.setTimeout(() => {
+        timer = null;
+      }, wait);
+      if (localImmediate) {
+        result2 = func.apply(this, args);
+      }
+    } else {
+      timer = window.setTimeout(() => {
+        func.apply(this, args);
+      }, wait);
+    }
+    return result2;
+  };
+}
+function getElement(element) {
+  if (element instanceof Element) {
+    return element;
+  }
+  if (element && typeof element === "object" && element.$el instanceof Element) {
+    return element.$el;
+  }
+  return null;
+}
+function lockScroll() {
+  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
+    const scrollTop = document.documentElement.scrollTop;
+    const style = document.documentElement.getAttribute("style");
+    document.documentElement.style.position = "fixed";
+    document.documentElement.style.top = `-${scrollTop}px`;
+    document.documentElement.style.width = document.documentElement.style.width || "100%";
+    document.documentElement.style.overflowY = "scroll";
+    return () => {
+      if (style) {
+        document.documentElement.setAttribute("style", style);
+      } else {
+        document.documentElement.removeAttribute("style");
+      }
+      document.documentElement.scrollTop = scrollTop;
+    };
+  }
+  return;
+}
+function getPropsSlot(slots, props, prop = "default") {
+  var _a, _b;
+  return (_b = props[prop]) != null ? _b : (_a = slots[prop]) == null ? void 0 : _a.call(slots);
+}
+function randomId(n = 8) {
+  const str = "abcdefghijklmnopqrstuvwxyz0123456789";
+  let result2 = "";
+  for (let i = 0; i < n; i++) {
+    result2 += str[parseInt((Math.random() * str.length).toString())];
+  }
+  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);
+  styleKeys.forEach((key) => {
+    oldStyle[key] = element.style[key];
+  });
+  styleKeys.forEach((key) => {
+    element.style[key] = style[key];
+  });
+  return oldStyle;
+}
+function middleNum(num, min = 0, max = 100) {
+  let middle = 0;
+  middle = Math.min(num, max);
+  middle = Math.max(middle, min);
+  return middle;
+}
+const isNumber = (value) => typeof value === "number";
+const isBoolean = (value) => typeof value === "boolean";
+const isString$2 = (value) => typeof value === "string";
+const isFunction$3 = (value) => Object.prototype.toString.call(value) === "[object Function]";
+const isUndefined = (value) => value === void 0;
+const isHTMLElement = (value) => inBrowser && "HTMLElement" in window && value instanceof HTMLElement;
+function omit(obj, fields) {
+  const shallowCopy = Object.assign({}, obj);
+  for (let i = 0; i < fields.length; i += 1) {
+    const key = fields[i];
+    delete shallowCopy[key];
+  }
+  return shallowCopy;
+}
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+function isBase64(value) {
+  return /^data:image\/.*;base64,/.test(value);
+}
 const ns$k = useNamespace("alert");
 const AlertTypeIcon = (props) => createVNode("svg", {
   "width": "16px",
@@ -1294,10 +1464,10 @@ var Alert = defineComponent({
             "type": props.type
           }, null)]) : null, createVNode("div", {
             "class": ns2.e("content")
-          }, [createVNode("span", null, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]), props.closeable ? createVNode("div", {
+          }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a), createTextVNode(" ")]), props.closeable ? createVNode("div", {
             "class": ns2.e("close-icon"),
             "onClick": close2
-          }, [createVNode(AlertCloseIcon, null, null)]) : null])]), [[vShow, !closing.value]])];
+          }, [createVNode(AlertCloseIcon, null, null)]) : null]), [[vShow, !closing.value]])];
         }
       }) : null;
     };
@@ -1468,146 +1638,6 @@ const setActiveLink = (timeId) => {
   }
 };
 const onScroll = throttleAndDebounce(setActiveLink, 300);
-function hasClass(el, className2) {
-  if (el.classList) {
-    return el.classList.contains(className2);
-  }
-  const originClass = el.className;
-  return ` ${originClass} `.indexOf(` ${className2} `) > -1;
-}
-function addClass(el, className2) {
-  if (el.classList) {
-    el.classList.add(className2);
-  } else {
-    if (!hasClass(el, className2)) {
-      el.className = `${el.className} ${className2}`;
-    }
-  }
-}
-function removeClass(el, className2) {
-  if (el.classList) {
-    el.classList.remove(className2);
-  } else {
-    if (hasClass(el, className2)) {
-      const originClass = el.className;
-      el.className = ` ${originClass} `.replace(` ${className2} `, " ");
-    }
-  }
-}
-const inBrowser = typeof window !== "undefined";
-function debounce(func, wait, immediate) {
-  let timer, result2;
-  return function(...args) {
-    if (timer) {
-      clearTimeout(timer);
-    }
-    if (immediate) {
-      const localImmediate = !timer;
-      timer = window.setTimeout(() => {
-        timer = null;
-      }, wait);
-      if (localImmediate) {
-        result2 = func.apply(this, args);
-      }
-    } else {
-      timer = window.setTimeout(() => {
-        func.apply(this, args);
-      }, wait);
-    }
-    return result2;
-  };
-}
-function getElement(element) {
-  if (element instanceof Element) {
-    return element;
-  }
-  if (element && typeof element === "object" && element.$el instanceof Element) {
-    return element.$el;
-  }
-  return null;
-}
-function lockScroll() {
-  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
-    const scrollTop = document.documentElement.scrollTop;
-    const style = document.documentElement.getAttribute("style");
-    document.documentElement.style.position = "fixed";
-    document.documentElement.style.top = `-${scrollTop}px`;
-    document.documentElement.style.width = document.documentElement.style.width || "100%";
-    document.documentElement.style.overflowY = "scroll";
-    return () => {
-      if (style) {
-        document.documentElement.setAttribute("style", style);
-      } else {
-        document.documentElement.removeAttribute("style");
-      }
-      document.documentElement.scrollTop = scrollTop;
-    };
-  }
-  return;
-}
-function getPropsSlot(slots, props, prop = "default") {
-  var _a, _b;
-  return (_b = props[prop]) != null ? _b : (_a = slots[prop]) == null ? void 0 : _a.call(slots);
-}
-function randomId(n = 8) {
-  const str = "abcdefghijklmnopqrstuvwxyz0123456789";
-  let result2 = "";
-  for (let i = 0; i < n; i++) {
-    result2 += str[parseInt((Math.random() * str.length).toString())];
-  }
-  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);
-  styleKeys.forEach((key) => {
-    oldStyle[key] = element.style[key];
-  });
-  styleKeys.forEach((key) => {
-    element.style[key] = style[key];
-  });
-  return oldStyle;
-}
-function middleNum(num, min = 0, max = 100) {
-  let middle = 0;
-  middle = Math.min(num, max);
-  middle = Math.max(middle, min);
-  return middle;
-}
-const isNumber = (value) => typeof value === "number";
-const isBoolean = (value) => typeof value === "boolean";
-const isString$2 = (value) => typeof value === "string";
-const isFunction$3 = (value) => Object.prototype.toString.call(value) === "[object Function]";
-const isUndefined = (value) => value === void 0;
-const isHTMLElement = (value) => inBrowser && "HTMLElement" in window && value instanceof HTMLElement;
-function omit(obj, fields) {
-  const shallowCopy = Object.assign({}, obj);
-  for (let i = 0; i < fields.length; i += 1) {
-    const key = fields[i];
-    delete shallowCopy[key];
-  }
-  return shallowCopy;
-}
 const cssChange = (mysidebar, postion, top, left) => {
   mysidebar.style.position = postion;
   mysidebar.style.top = top + "px";
@@ -2134,6 +2164,10 @@ const formProps = {
   },
   size: {
     type: String
+  },
+  hideRequiredMark: {
+    type: Boolean,
+    default: false
   }
 };
 const FORM_TOKEN = Symbol("dForm");
@@ -6927,7 +6961,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 +7173,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;
@@ -7616,7 +7650,7 @@ var Form = defineComponent({
   props: formProps,
   emits: ["validate"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("form");
+    const ns2 = useNamespace$1("form");
     const {
       itemContexts,
       addItemContext,
@@ -7749,7 +7783,7 @@ const FixedOverlay = defineComponent({
     const {
       modelValue
     } = toRefs(props);
-    const ns2 = useNamespace("fixed-overlay");
+    const ns2 = useNamespace$1("fixed-overlay");
     const {
       onClick
     } = useFixedOverlay(props, ctx2);
@@ -7915,7 +7949,7 @@ const FlexibleOverlay = defineComponent({
     emit,
     expose
   }) {
-    const ns2 = useNamespace("flexible-overlay");
+    const ns2 = useNamespace$1("flexible-overlay");
     const {
       clickEventBubble
     } = toRefs(props);
@@ -7963,7 +7997,7 @@ var OverlayInstall = {
 const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
 const isString$1 = (val) => typeof val === "string";
 const isObject$7 = (val) => val !== null && typeof val === "object";
-const ns$j = useNamespace("popper-trigger");
+const ns$j = useNamespace$1("popper-trigger");
 function wrapContent(content2) {
   return h("span", { class: ns$j.b() }, content2);
 }
@@ -8150,7 +8184,7 @@ function usePopoverEvent(props, visible, origin) {
   });
   return { placement, handlePositionChange, onMouseenter, onMouseleave };
 }
-const ns$i = useNamespace("popover");
+const ns$i = useNamespace$1("popover");
 function SuccessIcon$3() {
   return createVNode("svg", {
     "class": [ns$i.e("icon"), ns$i.em("icon", "success")],
@@ -8252,7 +8286,7 @@ var PopoverIcon = defineComponent({
     }
   },
   setup(props) {
-    const ns2 = useNamespace("popover");
+    const ns2 = useNamespace$1("popover");
     return () => props.type && props.type !== "default" && createVNode("span", {
       "class": ns2.e("icon-wrap")
     }, [props.type === "success" && createVNode(SuccessIcon$3, null, null), props.type === "warning" && createVNode(WarningIcon$2, null, null), props.type === "info" && createVNode(InfoIcon$2, null, null), props.type === "error" && createVNode(ErrorIcon$3, null, null)]);
@@ -8289,7 +8323,7 @@ var Popover = defineComponent({
     const {
       overlayStyles
     } = usePopover(props, visible, placement, origin, popoverRef);
-    const ns2 = useNamespace("popover");
+    const ns2 = useNamespace$1("popover");
     provide(POPPER_TRIGGER_TOKEN, origin);
     watch(visible, (newVal) => {
       if (newVal) {
@@ -8419,9 +8453,10 @@ 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");
+  const ns2 = useNamespace$1("form");
   const labelClasses = computed(() => ({
     [`${ns2.e("label")}`]: true,
     [`${ns2.em("label", "vertical")}`]: labelData.value.layout === "vertical",
@@ -8430,7 +8465,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 };
 }
@@ -8439,7 +8475,7 @@ var FormLabel = defineComponent({
   name: "DFormLabel",
   props: formLabelProps,
   setup(props, ctx2) {
-    const ns2 = useNamespace("form");
+    const ns2 = useNamespace$1("form");
     const {
       labelClasses,
       labelInnerClasses
@@ -8482,7 +8518,7 @@ var PopoverInstall = {
 };
 function useFormControl(props) {
   const labelData = inject(LABEL_DATA);
-  const ns2 = useNamespace("form");
+  const ns2 = useNamespace$1("form");
   const { feedbackStatus } = toRefs(props);
   const controlClasses = computed(() => ({
     [ns2.e("control")]: true,
@@ -8512,7 +8548,7 @@ var FormControl = defineComponent({
   props: formControlProps,
   setup(props, ctx2) {
     const formControl2 = ref();
-    const ns2 = useNamespace("form");
+    const ns2 = useNamespace$1("form");
     const {
       controlClasses,
       controlContainerClasses
@@ -9566,7 +9602,7 @@ function getFieldValue(obj, path) {
 }
 function useFormItem(messageType, _rules, validateState) {
   const formContext = inject(FORM_TOKEN);
-  const ns2 = useNamespace("form");
+  const ns2 = useNamespace$1("form");
   const itemClasses = computed(() => ({
     [`${ns2.em("item", "horizontal")}`]: formContext.layout === "horizontal",
     [`${ns2.em("item", "vertical")}`]: formContext.layout === "vertical",
@@ -9808,15 +9844,15 @@ var FormInstall = {
 };
 function useAutoCompleteRender(props, ctx2, visible, isFocus, isDisabled, autoCompleteSize) {
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
-  const ns2 = useNamespace("auto-complete");
-  const inputNs = useNamespace("auto-complete-input");
-  const slotNs = useNamespace("auto-complete-slot");
-  const formNs = useNamespace("form-group");
-  const feedbackNs = useNamespace("has-feedback");
-  const selectNs = useNamespace("select-open");
-  const formControlNs = useNamespace("form-control");
-  const dropdownNs = useNamespace("dropdown-origin");
-  const dropdownOpenNs = useNamespace("dropdown-origin-open");
+  const ns2 = useNamespace$1("auto-complete");
+  const inputNs = useNamespace$1("auto-complete-input");
+  const slotNs = useNamespace$1("auto-complete-slot");
+  const formNs = useNamespace$1("form-group");
+  const feedbackNs = useNamespace$1("has-feedback");
+  const selectNs = useNamespace$1("select-open");
+  const formControlNs = useNamespace$1("form-control");
+  const dropdownNs = useNamespace$1("dropdown-origin");
+  const dropdownOpenNs = useNamespace$1("dropdown-origin-open");
   const slots = ctx2.slots;
   const isValidatorError = computed(() => (formItemContext == null ? void 0 : formItemContext.validateState) === "error");
   const autoCompleteTopClasses = computed(() => ({
@@ -9920,7 +9956,7 @@ var Loading = defineComponent({
       message: message2,
       $slots
     } = this;
-    const ns2 = useNamespace("loading");
+    const ns2 = useNamespace$1("loading");
     return isShow && createVNode("div", {
       "class": [ns2.b(), isFull ? ns2.m("full") : ""]
     }, [((_a = $slots.default) == null ? void 0 : _a.call($slots)) || createVNode("div", {
@@ -10088,10 +10124,10 @@ var DAutoCompleteDropdown = defineComponent({
       disabledKey,
       isSearching
     } = propsData.props;
-    const ns2 = useNamespace("auto-complete");
-    const noDataNs = useNamespace("no-data-tip");
-    const dropdownMenuNs = useNamespace("dropdown-menu");
-    const dropdownItemNs = useNamespace("dropdown-item");
+    const ns2 = useNamespace$1("auto-complete");
+    const noDataNs = useNamespace$1("no-data-tip");
+    const dropdownMenuNs = useNamespace$1("dropdown-menu");
+    const dropdownItemNs = useNamespace$1("dropdown-item");
     const onSelect = (item) => {
       item = valueParser.value(item);
       if (typeof item === "object" && item[disabledKey]) {
@@ -10260,7 +10296,7 @@ var svgIcon = defineComponent({
       color: color2,
       size
     } = toRefs(props);
-    const ns2 = useNamespace("svg-icon");
+    const ns2 = useNamespace$1("svg-icon");
     const iconName = computed(() => `#icon-${name.value}`);
     const iconSize = computed(() => {
       return typeof size.value === "number" ? `${size.value}px` : size.value;
@@ -10280,12 +10316,6 @@ var svgIcon = defineComponent({
     };
   }
 });
-function isUrl(value) {
-  return /^((http|https):)?\/\//.test(value);
-}
-function isBase64(value) {
-  return /^data:image\/.*;base64,/.test(value);
-}
 function useIconDom(props, ctx2) {
   const {
     component,
@@ -10295,7 +10325,7 @@ function useIconDom(props, ctx2) {
     classPrefix,
     rotate
   } = toRefs(props);
-  const ns2 = useNamespace("icon");
+  const ns2 = useNamespace$1("icon");
   const iconSize = computed(() => {
     return typeof size.value === "number" ? `${size.value}px` : size.value;
   });
@@ -10353,7 +10383,7 @@ var DIcon = defineComponent({
     const {
       iconDom
     } = useIconDom(props, ctx2);
-    const ns2 = useNamespace("icon");
+    const ns2 = useNamespace$1("icon");
     const wrapClassed = computed(() => ({
       [ns2.e("container")]: true,
       [ns2.m("disabled")]: disabled.value,
@@ -10379,7 +10409,7 @@ var iconGroup = "";
 var IconGroup = defineComponent({
   name: "DIconGroup",
   setup(_, ctx2) {
-    const ns2 = useNamespace("icon-group");
+    const ns2 = useNamespace$1("icon-group");
     return () => {
       var _a, _b;
       return createVNode("div", {
@@ -10427,8 +10457,8 @@ var AutoComplete = defineComponent({
       valueParser,
       placeholder
     } = toRefs(props);
-    const ns2 = useNamespace("auto-complete");
-    const inputNs = useNamespace("auto-complete-input");
+    const ns2 = useNamespace$1("auto-complete");
+    const inputNs = useNamespace$1("auto-complete-input");
     const isDisabled = computed(() => (formContext == null ? void 0 : formContext.disabled) || disabled.value);
     const autoCompleteSize = computed(() => (formContext == null ? void 0 : formContext.size) || props.size);
     const {
@@ -10827,7 +10857,7 @@ var Avatar = defineComponent({
     const code = ref(1);
     const nameDisplay = ref();
     const ns2 = useNamespace("avatar");
-    const styleNS = ns2.e("style");
+    const styleNS = ns2.m("style");
     const bgNS = computed(() => {
       return ns2.m(`${"background-" + code.value}`);
     });
@@ -10838,7 +10868,7 @@ var Avatar = defineComponent({
         } else if (gender.value.toLowerCase() === "female") {
           code.value = 0;
         } else {
-          console.warn('gender must be "Male" or "Female"');
+          throw new Error('gender must be "Male" or "Female"');
         }
         return;
       }
@@ -10908,7 +10938,7 @@ var Avatar = defineComponent({
       }, null);
       const hasImgSrc = imgSrc.value && !isErrorImg.value ? imgElement : null;
       const nameElement = createVNode("span", {
-        "class": [styleNS, bgNS.value],
+        "class": `${styleNS} ${bgNS.value}`,
         "style": {
           height: `${height.value}px`,
           width: `${width.value}px`,
@@ -11032,7 +11062,7 @@ var BackTop = defineComponent({
   setup(props, ctx2) {
     const slots = ctx2.slots;
     const backTopRef = ref(null);
-    const ns2 = useNamespace("back-top");
+    const ns2 = useNamespace$1("back-top");
     const position = usePosition(props);
     const isVisible = useVisibility(props, backTopRef);
     const scrollToTop = (e) => {
@@ -11415,7 +11445,7 @@ var Dropdown$1 = defineComponent({
     const id = `dropdown_${dropdownId++}`;
     const isOpen = ref(false);
     const currentPosition = ref("bottom");
-    const ns2 = useNamespace("dropdown");
+    const ns2 = useNamespace$1("dropdown");
     provide(POPPER_TRIGGER_TOKEN, origin);
     useDropdownEvent({
       id,
@@ -11491,7 +11521,7 @@ var BreadcrumbItem = defineComponent({
   }) {
     var _a;
     const separatorIcon = inject("separatorIcon");
-    const ns2 = useNamespace("breadcrumb");
+    const ns2 = useNamespace$1("breadcrumb");
     const linkClass = props.to ? "is-link" : "";
     const dropdownTitleClass = props.showMenu && ((_a = props.menuList) == null ? void 0 : _a.length) ? ns2.e("dropdown-title") : "";
     const link = ref(null);
@@ -11576,7 +11606,7 @@ var Breadcrumb = defineComponent({
     var _a;
     const separatorIcon = (_a = getPropsSlot(slots, props, "separatorIcon")) != null ? _a : "/";
     provide("separatorIcon", separatorIcon);
-    const ns2 = useNamespace("breadcrumb");
+    const ns2 = useNamespace$1("breadcrumb");
     const renderBreadcrumbItemRouted = (item) => {
       return createVNode(resolveComponent("d-breadcrumb-item"), {
         "to": `path: ${item.link}`,
@@ -11667,7 +11697,7 @@ const buttonGroupProps = {
 };
 const buttonGroupInjectionKey = Symbol("d-button-group");
 function useButton(props, ctx2) {
-  const ns2 = useNamespace("button");
+  const ns2 = useNamespace$1("button");
   const hasContent = computed(() => ctx2.slots.default);
   const colorMap = {
     solid: "primary",
@@ -11756,7 +11786,7 @@ var ButtonGroup = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("button-group");
+    const ns2 = useNamespace$1("button-group");
     provide(buttonGroupInjectionKey, {
       size: toRef(props, "size")
     });
@@ -11801,7 +11831,7 @@ var Card = defineComponent({
       align,
       src
     } = toRefs(props);
-    const ns2 = useNamespace("card");
+    const ns2 = useNamespace$1("card");
     const alignClass = computed(() => {
       return {
         [ns2.e("actions")]: true,
@@ -12091,7 +12121,7 @@ var CarouselInstall = {
     app.component(CarouselItem.name, CarouselItem);
   }
 };
-const ns$h = useNamespace("cascader");
+const ns$h = useNamespace$1("cascader");
 const useRootClassName = (props, menuShow) => {
   return computed(() => ({
     [`${ns$h.b()} ${ns$h.e("dropdown")} ${ns$h.em("dropdown", "animation")}`]: true,
@@ -12641,7 +12671,7 @@ var Checkbox = defineComponent({
   props: checkboxProps,
   emits: ["change", "update:checked", "update:modelValue"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("checkbox");
+    const ns2 = useNamespace$1("checkbox");
     const {
       mergedChecked,
       mergedDisabled,
@@ -12742,7 +12772,7 @@ var DCheckboxGroup = defineComponent({
   props: checkboxGroupProps,
   emits: ["change", "update:modelValue"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("checkbox");
+    const ns2 = useNamespace$1("checkbox");
     const {
       defaultOpt
     } = useCheckboxGroup(props, ctx2);
@@ -12788,7 +12818,7 @@ var CheckboxButton = defineComponent({
   props: checkboxProps,
   emits: ["change", "update:checked", "update:modelValue"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("checkbox-button");
+    const ns2 = useNamespace$1("checkbox-button");
     const {
       mergedChecked,
       mergedDisabled,
@@ -13364,8 +13394,8 @@ function useInputRender$1(props, ctx2) {
   const formContext = inject(FORM_TOKEN, void 0);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
   const isValidateError = computed(() => (formItemContext == null ? void 0 : formItemContext.validateState) === "error");
-  const ns2 = useNamespace("input");
-  const slotNs = useNamespace("input-slot");
+  const ns2 = useNamespace$1("input");
+  const slotNs = useNamespace$1("input-slot");
   const isFocus = ref(false);
   const { error: error2, size, disabled } = toRefs(props);
   const slots = ctx2.slots;
@@ -13451,8 +13481,8 @@ var DInput = defineComponent({
     const {
       modelValue
     } = toRefs(props);
-    const ns2 = useNamespace("input");
-    const slotNs = useNamespace("input-slot");
+    const ns2 = useNamespace$1("input");
+    const slotNs = useNamespace$1("input-slot");
     const {
       inputDisabled,
       inputSize,
@@ -13554,7 +13584,7 @@ var Cascader = defineComponent({
   props: cascaderProps,
   emits: ["update:modelValue", "change", "focus", "blur"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("cascader");
+    const ns2 = useNamespace$1("cascader");
     const {
       origin,
       overlayRef,
@@ -14248,13 +14278,28 @@ const codeReviewProps = {
     type: Boolean,
     default: false
   },
+  allowComment: {
+    type: Boolean,
+    default: true
+  },
+  allowExpand: {
+    type: Boolean,
+    default: true
+  },
+  showBlob: {
+    type: Boolean,
+    default: false
+  },
   outputFormat: {
     type: String,
     default: "line-by-line"
   },
-  expandAllThreshold: {
+  expandThreshold: {
     type: Number,
     default: 50
+  },
+  expandLoader: {
+    type: Function
   }
 };
 const CodeReviewInjectionKey = Symbol("d-code-review");
@@ -14271,7 +14316,7 @@ var CodeReviewHeader = defineComponent({
   name: "DCodeReviewHeader",
   emits: ["click"],
   setup(_, ctx2) {
-    const ns2 = useNamespace("code-review");
+    const ns2 = useNamespace$1("code-review");
     const {
       diffInfo,
       isFold,
@@ -14326,10 +14371,285 @@ var CodeReviewHeader = defineComponent({
 });
 const ExpandLineReg = /^@@ -(\d+),(\d+) \+(\d+),(\d+) @@/;
 const FirstLineReg = /^@@ -[0,1](?!\d)/;
+const TableTrReg = /<tr[^>]*>[\s\S]*?<\/tr>/gi;
+const TableTdReg = /<td[^>]*>[\s\S]*?<\/td>/gi;
+const TableTbodyReg = /<tbody[^>]*>[\s\S]*?<\/tbody>/gi;
+const TableTbodyAttrReg = /<tbody([^>]*)>/i;
+const EmptyDataLangReg = /<div[^>]* data-lang="">[\s\S]*?<\/div>/gi;
+const LineByLineTemplate = `<div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}">
+<div class="d2h-file-diff">
+    <div class="d2h-code-wrapper">
+        <table class="d2h-diff-table">
+            <tbody class="d2h-diff-tbody">
+            {{{diffs}}}
+            </tbody>
+        </table>
+    </div>
+</div>
+</div>`;
+const SideBySideTemplate = `<div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}">
+<div class="d2h-files-diff">
+    <div class="d2h-file-side-diff">
+        <div class="d2h-code-wrapper">
+            <table class="d2h-diff-table">
+                <tbody class="d2h-diff-tbody">
+                {{{diffs.left}}}
+                {{{diffs.right}}}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+</div>`;
+const EmptyTemplate = {
+  "generic-empty-diff": ""
+};
+const TemplateMap = {
+  "line-by-line": __spreadValues({ "line-by-line-file-diff": LineByLineTemplate }, EmptyTemplate),
+  "side-by-side": __spreadValues({ "side-by-side-file-diff": SideBySideTemplate }, EmptyTemplate)
+};
 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) {
+  if (direction === "up") {
+    const nextSibling = referenceDom.nextElementSibling;
+    trNodes.forEach((item) => {
+      var _a;
+      (_a = referenceDom.parentNode) == null ? void 0 : _a.insertBefore(item, nextSibling);
+    });
+  } else {
+    trNodes.forEach((item) => {
+      var _a;
+      (_a = referenceDom.parentNode) == null ? void 0 : _a.insertBefore(item, referenceDom);
+    });
+  }
+}
+function ifRemoveExpandLineForDoubleColumn(expandDom, newExpandDom, direction) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  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((_b = (_a = prevSibling.children) == null ? void 0 : _a[0]) == null ? void 0 : _b.innerText);
+      const prevRightLineNumber = parseInt((_d = (_c = prevSibling.children) == null ? void 0 : _c[2]) == null ? void 0 : _d.innerText);
+      if (leftLineNumber === prevLeftLineNumber + 1 && rightLineNumber === prevRightLineNumber + 1) {
+        expandDom.remove();
+        return true;
+      }
+    }
+  } else {
+    const nextSibling = expandDom.nextElementSibling;
+    if (nextSibling) {
+      const nextLeftLineNumber = parseInt((_f = (_e = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _e[0]) == null ? void 0 : _f.innerText);
+      const nextRightLineNumber = parseInt((_h = (_g = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _g[2]) == null ? void 0 : _h.innerText);
+      if (leftLineNumber + addedLine === nextLeftLineNumber && rightLineNumber + addedLine === nextRightLineNumber) {
+        expandDom.remove();
+        return true;
+      }
+    }
+  }
+  return false;
+}
+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;
+    if (nextSibling) {
+      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) {
+  var _a;
+  const diff2HtmlUi = new Diff2HtmlUI(container, code, {
+    drawFileList: false,
+    matching: "lines",
+    outputFormat,
+    highlight: true,
+    rawTemplates: TemplateMap[outputFormat]
+  });
+  if (outputFormat === "side-by-side") {
+    let diffHtmlStr = diff2HtmlUi.diffHtml;
+    if (diffHtmlStr.match(EmptyDataLangReg)) {
+      diffHtmlStr = diffHtmlStr.replace(EmptyDataLangReg, "");
+    }
+    const trList = diffHtmlStr.match(TableTrReg);
+    const trListLength = trList.length;
+    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);
+      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]) || "";
+    const newDiffHtmlStr = diffHtmlStr.replace(TableTbodyReg, `<tbody ${tbodyAttr}>${newTrStr}</tbody>`);
+    diff2HtmlUi.diffHtml = newDiffHtmlStr;
+  }
+  diff2HtmlUi.draw();
+}
+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 updateLineNumberInDatasetForDoubleColumn(trNode, expandThreshold, position, updateExpandButton = false) {
+  let nextL;
+  let prevL;
+  let nextR;
+  let prevR;
+  if (position === "top") {
+    const nextLineNode = trNode.nextElementSibling;
+    nextL = parseInt(nextLineNode.children[0].innerText) - 1;
+    prevL = Math.max(nextL - expandThreshold + 1, 1);
+    nextR = parseInt(nextLineNode.children[2].innerText) - 1;
+    prevR = Math.max(nextR - expandThreshold + 1, 1);
+  } else if (position === "bottom") {
+    const prevLineNode = trNode.previousElementSibling;
+    prevL = parseInt(prevLineNode.children[0].innerText) + 1;
+    nextL = prevL + expandThreshold - 1;
+    prevR = parseInt(prevLineNode.children[2].innerText) + 1;
+    nextR = prevR + expandThreshold - 1;
+  } else {
+    const prevLineNode = trNode.previousElementSibling;
+    const nextLineNode = trNode.nextElementSibling;
+    const prevLineNumber = parseInt(prevLineNode.children[0].innerText);
+    const nextLineNumber = parseInt(nextLineNode.children[0].innerText);
+    prevL = prevLineNumber + 1;
+    prevR = parseInt(prevLineNode.children[2].innerText) + 1;
+    nextL = nextLineNumber - 1;
+    nextR = parseInt(nextLineNode.children[2].innerText) - 1;
+    const isExpandAll = nextLineNumber - prevLineNumber <= expandThreshold;
+    if (isExpandAll && updateExpandButton) {
+      updateExpandUpDownButton(trNode);
+    }
+  }
+  setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR);
+}
+function updateLineNumberInDataset(trNode, expandThreshold, 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 - expandThreshold + 1, 1);
+    nextR = parseInt(nextLineNode.children[0].children[1].innerText) - 1;
+    prevR = Math.max(nextR - expandThreshold + 1, 1);
+  } else if (position === "bottom") {
+    const prevLineNode = trNode.previousElementSibling;
+    prevL = parseInt(prevLineNode.children[0].children[0].innerText) + 1;
+    nextL = prevL + expandThreshold - 1;
+    prevR = parseInt(prevLineNode.children[0].children[1].innerText) + 1;
+    nextR = prevR + expandThreshold - 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 <= expandThreshold;
+    if (isExpandAll && updateExpandButton) {
+      updateExpandUpDownButton(trNode);
+    }
+  }
+  setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR);
+}
+function getLineNumberFromDataset(expandDom, expandThreshold) {
+  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 - expandThreshold + 1, prevL);
+      rightLineEnd = nextR;
+      rightLineStart = Math.max(rightLineEnd - expandThreshold + 1, prevR);
+    } else if (direction === "down") {
+      leftLineStart = prevL;
+      leftLineEnd = Math.min(leftLineStart + expandThreshold - 1, nextL);
+      rightLineStart = prevR;
+      rightLineEnd = Math.min(rightLineStart + expandThreshold - 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);
@@ -14364,7 +14684,7 @@ function attachExpandUpDownButton(parentNode, direction) {
     addExpandButton(parentNode, expandDirectionMap[direction], (_a = expandDirectionIconMap[direction]) == null ? void 0 : _a.call(expandDirectionIconMap));
   }
 }
-function addCommentToPage(lineHost, commentDom, lineSide) {
+function addCommentToPageForSingleColumn(lineHost, commentDom, lineSide) {
   var _a, _b;
   const newLine = document.createElement("tr");
   const newCell = document.createElement("td");
@@ -14381,41 +14701,145 @@ function addCommentToPage(lineHost, commentDom, lineSide) {
     (_b = lineHost.parentElement) == null ? void 0 : _b.appendChild(newLine);
   }
 }
-function useCodeReviewExpand(reviewContentRef, expandAllThreshold, outputFormat) {
+function addCommentToPageForDoubleColumn(lineHost, commentDom, lineSide) {
+  var _a, _b, _c;
+  const nextSibling = lineHost.nextElementSibling;
+  if (nextSibling && ((_a = nextSibling.classList) == null ? void 0 : _a.contains("comment-block"))) {
+    const insertTdDom = lineSide === "left" ? nextSibling.children[0] : nextSibling.children[1];
+    insertTdDom.classList.add("comment-cell");
+    insertTdDom.appendChild(commentDom);
+  } else {
+    const newLine = document.createElement("tr");
+    const newLeftCell = document.createElement("td");
+    const newRightCell = document.createElement("td");
+    newLeftCell.style.width = "50%";
+    newLeftCell.setAttribute("colspan", "2");
+    newRightCell.style.width = "50%";
+    newRightCell.setAttribute("colspan", "2");
+    if (lineSide === "left") {
+      newLeftCell.classList.add("comment-cell");
+      newLeftCell.appendChild(commentDom);
+    } else {
+      newRightCell.classList.add("comment-cell");
+      newRightCell.appendChild(commentDom);
+    }
+    newLine.classList.add("comment-block");
+    newLine.classList.add(lineSide);
+    newLine.appendChild(newLeftCell);
+    newLine.appendChild(newRightCell);
+    if (lineHost.nextElementSibling) {
+      (_b = lineHost.parentElement) == null ? void 0 : _b.insertBefore(newLine, lineHost.nextElementSibling);
+    } else {
+      (_c = lineHost.parentElement) == null ? void 0 : _c.appendChild(newLine);
+    }
+  }
+}
+function findReferenceDomForSingleColumn(parentNode, lineNumber, lineSide) {
+  var _a, _b, _c, _d;
+  const trNodes = Array.from(parentNode.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];
+      }
+    }
+  }
+}
+function findReferenceDomForDoubleColumn(parentNode, lineNumber, lineSide) {
+  const trNodes = Array.from(parentNode.querySelectorAll("tr"));
+  for (const index2 in trNodes) {
+    const lineIndex = parseInt(index2);
+    let lineNumberBox;
+    if (lineSide === "left") {
+      lineNumberBox = trNodes[lineIndex].children[0];
+    } else {
+      lineNumberBox = trNodes[lineIndex].children[2];
+    }
+    if (lineNumberBox && notEmptyNode(lineNumberBox)) {
+      const currentLineNumber = parseInt(lineNumberBox.innerText);
+      if (currentLineNumber === lineNumber) {
+        return trNodes[lineIndex];
+      }
+    }
+  }
+}
+function useCodeReviewExpand(reviewContentRef, props) {
+  const { outputFormat, expandThreshold, expandLoader } = toRefs(props);
   const processSideBySide = () => {
-    const [leftTable, rightTable] = reviewContentRef.value.querySelectorAll("table");
-    const trNodes = Array.from(leftTable.querySelectorAll("tr"));
+    var _a;
+    const trNodes = Array.from(reviewContentRef.value.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 lineContent = lineContentBox.innerText;
+      const lineClassList = lineContentBox.classList;
+      if (lineContent.match(ExpandLineReg) && !FirstLineReg.test(lineContent) && lineClassList && lineClassList.contains("d2h-info")) {
         const nextLineIndex = lineIndex + 1;
         const prevLineIndex = lineIndex - 1;
         if (lineIndex === 0 && nextLineIndex in trNodes) {
+          updateLineNumberInDatasetForDoubleColumn(trNodes[lineIndex], expandThreshold.value, "top");
           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;
+          const preLineNumber = parseInt(trNodes[prevLineIndex].children[0].innerText);
+          const nextLineNumber = parseInt(trNodes[nextLineIndex].children[0].innerText);
+          const isExpandAll = nextLineNumber - preLineNumber - 1 < expandThreshold.value;
+          updateLineNumberInDatasetForDoubleColumn(trNodes[lineIndex], expandThreshold.value, "middle");
           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]);
+    const loadMoreLine = trNodes[0].cloneNode(true);
+    loadMoreLine.children[0].removeChild(loadMoreLine.children[0].children[0]);
+    loadMoreLine.children[1].innerText = "";
+    (_a = trNodes[0].parentElement) == null ? void 0 : _a.appendChild(loadMoreLine);
+    updateLineNumberInDatasetForDoubleColumn(loadMoreLine, expandThreshold.value, "bottom");
+    attachExpandUpDownButton(loadMoreLine.children[0], "down");
+  };
+  const insertIncrementCodeForDoubleColumn = (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;
+    }
+    const trNodesToBeInserted = trNodes.filter((element) => element !== expandLine);
+    insertIncrementLineToPage(referenceDom, trNodesToBeInserted, direction);
+    const removedExpandLine = ifRemoveExpandLineForDoubleColumn(referenceDom, expandLine, direction);
+    if (removedExpandLine) {
+      return;
+    }
+    updateExpandLineCount(referenceDom, expandLine);
+    if (direction === "up") {
+      if (!referenceDom.previousElementSibling) {
+        updateLineNumberInDatasetForDoubleColumn(referenceDom, expandThreshold.value, "top");
+      } else {
+        updateLineNumberInDatasetForDoubleColumn(referenceDom, expandThreshold.value, "middle", true);
+      }
+    } else {
+      if (referenceDom.nextElementSibling) {
+        updateLineNumberInDatasetForDoubleColumn(referenceDom, expandThreshold.value, "middle", true);
+      } else {
+        updateLineNumberInDatasetForDoubleColumn(referenceDom, expandThreshold.value, "bottom");
+      }
     }
-    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;
@@ -14435,13 +14859,15 @@ function useCodeReviewExpand(reviewContentRef, expandAllThreshold, outputFormat)
         const nextLineIndex = lineIndex + 1;
         const prevLineIndex = lineIndex - 1;
         if (lineIndex === 0 && nextLineIndex in trNodes) {
+          updateLineNumberInDataset(trNodes[lineIndex], expandThreshold.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], expandThreshold.value, "middle");
+          const isExpandAll = nextLineNumber - prevLineNumber <= expandThreshold.value;
           attachExpandUpDownButton(lineNumberBox, isExpandAll ? "all" : "updown");
         }
       }
@@ -14449,35 +14875,98 @@ 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, expandThreshold.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;
+    }
+    const trNodesToBeInserted = trNodes.filter((element) => element.children[0].children.length === 2);
+    insertIncrementLineToPage(referenceDom, trNodesToBeInserted, direction);
+    const removedExpandLine = ifRemoveExpandLine(referenceDom, expandLine, direction);
+    if (removedExpandLine) {
+      return;
+    }
+    updateExpandLineCount(referenceDom, expandLine);
+    if (direction === "up") {
+      if (!referenceDom.previousElementSibling) {
+        updateLineNumberInDataset(referenceDom, expandThreshold.value, "top");
+      } else {
+        updateLineNumberInDataset(referenceDom, expandThreshold.value, "middle", true);
+      }
+    } else {
+      if (referenceDom.nextElementSibling) {
+        updateLineNumberInDataset(referenceDom, expandThreshold.value, "middle", true);
+      } else {
+        updateLineNumberInDataset(referenceDom, expandThreshold.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] = 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);
+      });
+    }
   };
   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, allowExpand, showBlob } = 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(() => {
+      if (inBrowser && !showBlob.value) {
+        parseDiffCode(reviewContentRef.value, diff.value, outputFormat.value);
+        allowExpand.value && insertExpandButton();
+        ctx2.emit("contentRefresh", JSON.parse(JSON.stringify(diffFile.value)));
+      }
     });
-    nextTick(insertExpandButton);
   };
+  const onContentClick = (e) => {
+    onExpandButtonClick(e);
+  };
+  watch(showBlob, initDiffContent);
+  watch(outputFormat, initDiffContent);
+  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,48 +14978,85 @@ 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");
+function useCodeReviewComment(reviewContentRef, props, ctx2) {
+  const { outputFormat, allowComment } = toRefs(props);
+  const ns2 = useNamespace$1("code-review");
   const commentLeft = ref(-100);
   const commentTop = ref(-100);
   let currentLeftLineNumber = -1;
   let currentRightLineNumber = -1;
+  let lastLineNumberContainer;
   const resetLeftTop = () => {
     commentLeft.value = -100;
     commentTop.value = -100;
     currentLeftLineNumber = -1;
     currentRightLineNumber = -1;
-  };
-  const onMouseEnter = (e) => {
-    e.currentTarget.getBoundingClientRect();
+    lastLineNumberContainer == null ? void 0 : lastLineNumberContainer.classList.remove("comment-icon-hover");
+    lastLineNumberContainer = null;
   };
   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;
+      if (outputFormat.value === "line-by-line") {
+        const lineNumberContainer = Array.from(trNode.children)[0];
+        if (lastLineNumberContainer !== lineNumberContainer) {
+          lastLineNumberContainer == null ? void 0 : lastLineNumberContainer.classList.remove("comment-icon-hover");
+        }
+        if (notEmptyNode(lineNumberContainer)) {
+          lastLineNumberContainer = lineNumberContainer;
+          lineNumberContainer.classList.add("comment-icon-hover");
+          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();
+        }
       } else {
-        resetLeftTop();
+        if (trNode.classList.contains("comment-block")) {
+          return resetLeftTop();
+        }
+        const tdNode = composedPath.find((item) => item.tagName === "TD");
+        const tdIndex = Array.from(trNode.children).findIndex((item) => item === tdNode);
+        const tdNodes = Array.from(trNode.children);
+        const leftLineNumberContainer = tdNodes[0];
+        const rightLineNumberContainer = tdNodes[2];
+        if (tdIndex < 2) {
+          if (lastLineNumberContainer !== leftLineNumberContainer) {
+            lastLineNumberContainer == null ? void 0 : lastLineNumberContainer.classList.remove("comment-icon-hover");
+          }
+          if (notEmptyNode(leftLineNumberContainer)) {
+            lastLineNumberContainer = leftLineNumberContainer;
+            leftLineNumberContainer.classList.add("comment-icon-hover");
+            const { top, left } = leftLineNumberContainer.getBoundingClientRect();
+            commentLeft.value = left;
+            commentTop.value = top;
+            currentLeftLineNumber = parseInt(leftLineNumberContainer.innerText);
+          } else {
+            resetLeftTop();
+          }
+        } else {
+          if (lastLineNumberContainer !== rightLineNumberContainer) {
+            lastLineNumberContainer == null ? void 0 : lastLineNumberContainer.classList.remove("comment-icon-hover");
+          }
+          if (rightLineNumberContainer && notEmptyNode(rightLineNumberContainer)) {
+            lastLineNumberContainer = rightLineNumberContainer;
+            rightLineNumberContainer.classList.add("comment-icon-hover");
+            const { top, left } = rightLineNumberContainer.getBoundingClientRect();
+            commentLeft.value = left;
+            commentTop.value = top;
+            currentRightLineNumber = parseInt(rightLineNumberContainer.innerText);
+          } else {
+            resetLeftTop();
+          }
+        }
       }
     }
   };
@@ -14546,46 +15072,68 @@ function useCodeReviewComment(reviewContentRef, ctx2) {
       resetLeftTop();
     }
   };
-  const onCommentIconClick = () => {
-    ctx2.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 onCommentIconClick = (e) => {
+    if (e) {
+      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"));
+      });
+      if (!lineNumberBox) {
+        return;
       }
     }
+    if (outputFormat.value === "line-by-line")
+      ;
+    ctx2.emit("addComment", { left: currentLeftLineNumber, right: currentRightLineNumber });
   };
   const insertComment = (lineNumber, lineSide, commentDom) => {
-    const lineHost = findReferenceDom(lineNumber, lineSide);
-    lineHost && addCommentToPage(lineHost, commentDom, lineSide);
+    if (outputFormat.value === "line-by-line") {
+      const lineHost = findReferenceDomForSingleColumn(reviewContentRef.value, lineNumber, lineSide);
+      lineHost && addCommentToPageForSingleColumn(lineHost, commentDom, lineSide);
+    } else {
+      const lineHost = findReferenceDomForDoubleColumn(reviewContentRef.value, lineNumber, lineSide);
+      lineHost && addCommentToPageForDoubleColumn(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;
+    if (outputFormat.value === "line-by-line") {
+      const lineHost = findReferenceDomForSingleColumn(reviewContentRef.value, 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;
+      }
+    } else {
+      const lineHost = findReferenceDomForDoubleColumn(reviewContentRef.value, lineNumber, lineSide);
+      const nextLineHost = lineHost == null ? void 0 : lineHost.nextElementSibling;
+      if (nextLineHost && nextLineHost.classList.contains("comment-block")) {
+        const leftChildren = nextLineHost.children[0];
+        const rightChildren = nextLineHost.children[1];
+        if (lineSide === "left") {
+          leftChildren.children[0].remove();
+        } else {
+          rightChildren.children[0].remove();
+        }
+        if (!leftChildren.children.length && !rightChildren.children.length) {
+          nextLineHost.remove();
+        }
       }
-      nextLineHost = nextLineHost.nextElementSibling;
     }
   };
+  const mouseEvent = allowComment.value ? { onMousemove: onMouseMove, onMouseleave } : {};
+  window.addEventListener("scroll", resetLeftTop);
+  onUnmounted(() => {
+    window.removeEventListener("scroll", resetLeftTop);
+  });
   return {
     commentLeft,
     commentTop,
-    onMouseEnter,
-    onMouseMove,
-    onMouseleave,
+    mouseEvent,
     onCommentMouseLeave,
     onCommentIconClick,
     insertComment,
@@ -14596,26 +15144,28 @@ 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 ns2 = useNamespace$1("code-review");
     const {
       renderHtml,
-      isFold,
       reviewContentRef,
-      toggleFold
+      diffFile,
+      onContentClick
     } = useCodeReview(props, ctx2);
+    const {
+      isFold,
+      toggleFold
+    } = useCodeReviewFold(props, ctx2);
     const {
       commentLeft,
       commentTop,
-      onMouseEnter,
-      onMouseMove,
-      onMouseleave,
+      mouseEvent,
       onCommentMouseLeave,
       onCommentIconClick,
       insertComment,
       removeComment
-    } = useCodeReviewComment(reviewContentRef, ctx2);
+    } = useCodeReviewComment(reviewContentRef, props, ctx2);
     onMounted(() => {
       ctx2.emit("afterViewInit", {
         toggleFold,
@@ -14623,28 +15173,36 @@ var CodeReview = defineComponent({
         removeComment
       });
     });
-    return () => createVNode("div", {
-      "class": ns2.b()
-    }, [createVNode(CodeReviewHeader, {
-      "onClick": () => isFold.value = !isFold.value
-    }, null), createVNode("div", {
-      "class": [ns2.e("content"), {
-        "hide-content": isFold.value
-      }],
-      "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)])]);
+    provide(CodeReviewInjectionKey, {
+      reviewContentRef,
+      diffInfo: diffFile.value[0],
+      isFold,
+      rootCtx: ctx2
+    });
+    return () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": ns2.b()
+      }, [createVNode(CodeReviewHeader, {
+        "onClick": () => isFold.value = !isFold.value
+      }, null), withDirectives(createVNode("div", null, [props.showBlob ? (_b = (_a = ctx2.slots).blob) == null ? void 0 : _b.call(_a) : createVNode("div", mergeProps({
+        "class": [ns2.e("content"), props.outputFormat],
+        "innerHTML": renderHtml.value,
+        "ref": reviewContentRef,
+        "onClick": (e) => {
+          onContentClick(e);
+          onCommentIconClick(e);
+        }
+      }, mouseEvent), null)]), [[vShow, !isFold.value]]), props.allowComment && createVNode("div", {
+        "class": "comment-icon",
+        "style": {
+          left: commentLeft.value + "px",
+          top: commentTop.value + "px"
+        },
+        "onClick": onCommentIconClick,
+        "onMouseleave": onCommentMouseLeave
+      }, [createVNode(CommentIcon, null, null)])]);
+    };
   }
 });
 var CodeReviewInstall = {
@@ -14747,7 +15305,6 @@ var CollapseItem = defineComponent({
     });
     const handlerTitleClick = (e) => {
       e.preventDefault();
-      e.stopPropagation();
       if (!props.disabled) {
         collapse2 == null ? void 0 : collapse2.collapseItemClick(props.name);
       }
@@ -14917,7 +15474,7 @@ const tabsProps = {
     default: "top"
   }
 };
-const ns$g = useNamespace("tabs");
+const ns$g = useNamespace$1("tabs");
 function useTabNavRender(props, data) {
   const { cssClass, tabPosition, customWidth } = toRefs(props);
   const ulClasses = computed(() => ({
@@ -15045,7 +15602,7 @@ var TabNav = defineComponent({
   props: tabsProps,
   emits: ["active-tab-change", "tab-remove", "tab-add", "tab-change"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("tabs");
+    const ns2 = useNamespace$1("tabs");
     const tabsEle = shallowRef();
     const data = reactive({
       offsetLeft: 0,
@@ -15167,7 +15724,7 @@ var TabNav = defineComponent({
     };
   }
 });
-const ns$f = useNamespace("tabs");
+const ns$f = useNamespace$1("tabs");
 function useTabsEvent(ctx2) {
   const onUpdateModelValue = (value) => {
     ctx2.emit("update:modelValue", value);
@@ -15274,7 +15831,7 @@ var Tab = defineComponent({
     slots
   }) {
     const tabs = inject("tabs");
-    const ns2 = useNamespace("tab");
+    const ns2 = useNamespace$1("tab");
     const instance = getCurrentInstance();
     const tabContext = reactive({
       uid: instance == null ? void 0 : instance.uid,
@@ -19731,7 +20288,7 @@ var CalendarPanel = defineComponent({
   setup(props, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DDatePickerPro", app);
-    const ns2 = useNamespace("date-picker-pro");
+    const ns2 = useNamespace$1("date-picker-pro");
     const {
       yearScrollRef,
       monthScrollRef,
@@ -20180,7 +20737,7 @@ var TimeScroll = defineComponent({
   name: "DTimeScroll",
   props: timePickerProps,
   setup(props, ctx2) {
-    const ns2 = useNamespace("scroll-box");
+    const ns2 = useNamespace$1("scroll-box");
     const {
       scrollBoxDom,
       scrollThumbDom,
@@ -20244,7 +20801,7 @@ var PopupLine = defineComponent({
   props: popupLineProps,
   emits: ["change"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("time-list");
+    const ns2 = useNamespace$1("time-list");
     const timeListDom = ref();
     const {
       getNewTime,
@@ -20387,7 +20944,7 @@ var TimerPickerPanel = defineComponent({
   setup(props, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DDatePickerPro", app);
-    const ns2 = useNamespace("date-picker-pro");
+    const ns2 = useNamespace$1("date-picker-pro");
     const {
       timeListDom,
       hourList,
@@ -20416,7 +20973,7 @@ var TimerPickerPanel = defineComponent({
   }
 });
 function useYearCalendarPanel(props, ctx2) {
-  const ns2 = useNamespace("date-picker-pro");
+  const ns2 = useNamespace$1("date-picker-pro");
   const yarListScrollRef = ref();
   const yearList = ref([]);
   const { today, calendarRange, selectDate, rangeSelectDate, minDate, maxDate, fixRangeDate, getToDate, emitSelectedDate } = useCalendarSelected(props, ctx2);
@@ -20543,7 +21100,7 @@ var YearCalendarPanel = defineComponent({
   props: datePickerProPanelProps,
   emits: ["selectedDate", "changeRangeFocusType"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("date-picker-pro");
+    const ns2 = useNamespace$1("date-picker-pro");
     const {
       yarListScrollRef,
       yearList,
@@ -20579,7 +21136,7 @@ var YearCalendarPanel = defineComponent({
   }
 });
 function useMonthCalendarPanel(props, ctx2) {
-  const ns2 = useNamespace("date-picker-pro");
+  const ns2 = useNamespace$1("date-picker-pro");
   const yearScrollRef = ref();
   const monthScrollRef = ref();
   const yearList = ref([]);
@@ -20768,7 +21325,7 @@ var MonthCalendarPanel = defineComponent({
   setup(props, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DDatePickerPro", app);
-    const ns2 = useNamespace("date-picker-pro");
+    const ns2 = useNamespace$1("date-picker-pro");
     const {
       yearScrollRef,
       monthScrollRef,
@@ -20982,7 +21539,7 @@ var DatePickerProPanel = defineComponent({
   setup(props, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DDatePickerPro", app);
-    const ns2 = useNamespace("date-picker-pro");
+    const ns2 = useNamespace$1("date-picker-pro");
     const {
       calendarPanelRef,
       timeData,
@@ -21092,7 +21649,7 @@ var DatePickerPro = defineComponent({
   setup(props, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DDatePickerPro", app);
-    const ns2 = useNamespace("date-picker-pro");
+    const ns2 = useNamespace$1("date-picker-pro");
     const {
       originRef,
       inputRef,
@@ -21318,7 +21875,7 @@ var DRangeDatePickerPro = defineComponent({
   setup(props, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DDatePickerPro", app);
-    const ns2 = useNamespace("range-date-picker-pro");
+    const ns2 = useNamespace$1("range-date-picker-pro");
     const {
       originRef,
       startInputRef,
@@ -21431,207 +21988,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);
-    }
-  } 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;
+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) {
     }
-  }
+    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);
   }
 };
@@ -21683,7 +22193,7 @@ var DrawerOverlay = defineComponent({
   props: drawerOverlayProps,
   emits: ["click"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("drawer");
+    const ns2 = useNamespace$1("drawer");
     const handleClick = (e) => {
       ctx2.emit("click", e);
     };
@@ -21698,8 +22208,8 @@ var DrawerOverlay = defineComponent({
   }
 });
 function useDrawer(props, emit) {
-  const ns2 = useNamespace("drawer");
-  const modalNs = useNamespace("modal", true);
+  const ns2 = useNamespace$1("drawer");
+  const modalNs = useNamespace$1("modal", true);
   const drawerRef = ref();
   const overlayRef = ref();
   const drawerClasses = computed(() => ({
@@ -21907,7 +22417,7 @@ var DropdownMenu = defineComponent({
       overlayClass
     } = toRefs(props);
     const dropdownMenuRef = ref(null);
-    const ns2 = useNamespace("dropdown");
+    const ns2 = useNamespace$1("dropdown");
     onClickOutside(dropdownMenuRef, (value) => {
       var _a, _b;
       if (((_a = clickOutside.value) == null ? void 0 : _a.call(clickOutside)) && !((_b = origin == null ? void 0 : origin.value) == null ? void 0 : _b.contains(value.target))) {
@@ -22421,7 +22931,7 @@ const editableSelectOptionProps = {
   }
 };
 function useOption$1(props) {
-  const ns2 = useNamespace("editable-select");
+  const ns2 = useNamespace$1("editable-select");
   const select2 = inject(SELECT_KEY);
   const { disabled, hovering } = toRefs(props);
   const isSelected = computed(() => {
@@ -22468,7 +22978,7 @@ var Dropdown = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("editable-select");
+    const ns2 = useNamespace$1("editable-select");
     const {
       width,
       maxHeight
@@ -22720,7 +23230,7 @@ function useKeyboardSelect(props, states, filteredOptions, scrollToItem, handleO
   };
 }
 function useInputRender(props, states) {
-  const ns2 = useNamespace("editable-select-input");
+  const ns2 = useNamespace$1("editable-select-input");
   const inputClasses = computed(() => ({
     [ns2.b()]: true,
     [ns2.m("sm")]: props.size === "sm",
@@ -22847,7 +23357,7 @@ var EditableSelect = defineComponent({
   props: editableSelectProps,
   emits: ["update:modelValue", "focus", "blur", "clear", "change", "visibleChange", "loadMore"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("editable-select");
+    const ns2 = useNamespace$1("editable-select");
     const inputRef = ref();
     const originRef = ref();
     const dropdownRef = ref();
@@ -23019,7 +23529,7 @@ function useKeydown(props, ctx2) {
     document.removeEventListener("keydown", handleKeydown);
   });
 }
-const ns$e = useNamespace("fullscreen");
+const ns$e = useNamespace$1("fullscreen");
 const launchNormalFullscreen = (targetElement, props) => {
   targetElement.classList.add(ns$e.b());
   if (props.zIndex) {
@@ -24233,7 +24743,7 @@ var Tooltip = defineComponent({
       onMouseleave,
       onMouseenterOverlay
     } = useTooltip(origin, props);
-    const ns2 = useNamespace("tooltip");
+    const ns2 = useNamespace$1("tooltip");
     const className2 = computed(() => {
       return [ns2.b(), ns2.m(placement.value)].join(" ");
     });
@@ -27234,7 +27744,7 @@ var Row = defineComponent({
     slots
   }) {
     const gutterScreenSize = ref({});
-    const ns2 = useNamespace("row");
+    const ns2 = useNamespace$1("row");
     const rowClass = computed(() => ({
       [ns2.em("align", props.align)]: true,
       [ns2.em("justify", props.justify)]: true,
@@ -27312,7 +27822,7 @@ var Row = defineComponent({
     };
   }
 });
-const colNs = useNamespace("col");
+const colNs = useNamespace$1("col");
 function useColClassNames(props) {
   return computed(() => ({
     [colNs.em("span", props.span ? String(props.span) : "")]: true,
@@ -27356,7 +27866,7 @@ var Col = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("col");
+    const ns2 = useNamespace$1("col");
     const formatFlex = (flex) => {
       if (typeof flex === "number") {
         return `${flex} ${flex} auto`;
@@ -27535,7 +28045,7 @@ var imagePreview = defineComponent({
   props: imagePreviewProps,
   emits: [],
   setup(props) {
-    const ns2 = useNamespace("image-preview");
+    const ns2 = useNamespace$1("image-preview");
     let transform = null;
     const index2 = ref(0);
     const url2 = computed(() => props.previewUrlList[index2.value]);
@@ -28019,7 +28529,7 @@ const inputNumberProps = {
     default: ""
   }
 };
-const ns$d = useNamespace("input-number");
+const ns$d = useNamespace$1("input-number");
 function IncIcon() {
   return createVNode("svg", {
     "class": ns$d.e("icon-arrow"),
@@ -28062,7 +28572,7 @@ function DecIcon() {
     "fill-rule": "nonzero"
   }, null)])]);
 }
-const ns$c = useNamespace("input-number");
+const ns$c = useNamespace$1("input-number");
 function useRender$1(props, ctx2) {
   const formContext = inject(FORM_TOKEN, void 0);
   const _a = ctx2.attrs, { style, class: customClass } = _a, otherAttrs = __objRest(_a, ["style", "class"]);
@@ -28283,7 +28793,7 @@ var Layout = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("layout");
+    const ns2 = useNamespace$1("layout");
     return () => {
       var _a;
       const slotDefault = (_a = slots.default) == null ? void 0 : _a.call(slots);
@@ -28301,7 +28811,7 @@ var Content = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("layout");
+    const ns2 = useNamespace$1("layout");
     return () => {
       var _a;
       return createVNode("div", {
@@ -28316,7 +28826,7 @@ var Header = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("layout");
+    const ns2 = useNamespace$1("layout");
     return () => {
       var _a;
       return createVNode("div", {
@@ -28331,7 +28841,7 @@ var Footer = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("layout");
+    const ns2 = useNamespace$1("layout");
     return () => {
       var _a;
       return createVNode("div", {
@@ -28345,7 +28855,7 @@ var Aside = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("layout");
+    const ns2 = useNamespace$1("layout");
     return () => {
       var _a;
       return createVNode("div", {
@@ -28372,7 +28882,7 @@ var List = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("list");
+    const ns2 = useNamespace$1("list");
     return () => {
       var _a;
       return createVNode("div", {
@@ -28387,7 +28897,7 @@ var ListItem = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("list-item");
+    const ns2 = useNamespace$1("list-item");
     return () => {
       var _a;
       return createVNode("div", {
@@ -28514,7 +29024,7 @@ const textareaProps = {
 function useTextareaRender(props) {
   const formContext = inject(FORM_TOKEN, void 0);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
-  const ns2 = useNamespace("textarea");
+  const ns2 = useNamespace$1("textarea");
   const isValidateError = computed(() => (formItemContext == null ? void 0 : formItemContext.validateState) === "error");
   const isFocus = ref(false);
   const { error: error2, disabled } = toRefs(props);
@@ -28661,7 +29171,7 @@ var Textarea = defineComponent({
     } = toRefs(props);
     const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
     const textarea2 = shallowRef();
-    const ns2 = useNamespace("textarea");
+    const ns2 = useNamespace$1("textarea");
     const {
       isFocus,
       textareaDisabled,
@@ -28724,7 +29234,7 @@ var Mention = defineComponent({
     slots,
     emit
   }) {
-    const ns2 = useNamespace("mention");
+    const ns2 = useNamespace$1("mention");
     const textContext = ref("");
     const showSuggestions = ref(false);
     const currentIndex = ref(0);
@@ -28869,8 +29379,8 @@ var MentionInstall = {
 const elements = [];
 let parents = [];
 const defaultIndent = ref(24);
-const ns$b = useNamespace("menu");
-const subNs$2 = useNamespace("submenu");
+const ns$b = useNamespace$1("menu");
+const subNs$2 = useNamespace$1("submenu");
 const menuClass = ns$b.b();
 const menuItemHorizontalWrapper = `${ns$b.b()}-item-horizontal-wrapper`;
 const menuItemSelect$1 = `${ns$b.b()}-item-select`;
@@ -29028,7 +29538,7 @@ const menuItemProps = {
     type: [String, Object]
   }
 };
-const ns$a = useNamespace("menu");
+const ns$a = useNamespace$1("menu");
 function initSelect(defaultSelectKeys, keys2, isMultiple, disabled) {
   const isSelect = ref(false);
   if (!isMultiple) {
@@ -29067,7 +29577,7 @@ function changeRoute(props, router, useRouter, key) {
   }
   return void 0;
 }
-const ns$9 = useNamespace("menu");
+const ns$9 = useNamespace$1("menu");
 function useClick(e) {
   const paths = e.composedPath();
   for (let i = 0; i < paths.length; i++) {
@@ -29083,7 +29593,7 @@ function useClick(e) {
     }
   }
 }
-const ns$8 = useNamespace("menu");
+const ns$8 = useNamespace$1("menu");
 const menuItemSelect = `${ns$8.b()}-item-select`;
 const menuItemDisabled = `${ns$8.b()}-item-disabled`;
 var MenuItem = defineComponent({
@@ -29354,8 +29864,8 @@ const subMenuProps = {
     default: false
   }
 };
-const ns$7 = useNamespace("menu");
-const subNs$1 = useNamespace("submenu");
+const ns$7 = useNamespace$1("menu");
+const subNs$1 = useNamespace$1("submenu");
 const menuItemHorizontalWrapperHidden = `${ns$7.b()}-item-horizontal-wrapper-hidden`;
 const menuItemHorizontalWrapperShow = `${ns$7.b()}-item-horizontal-wrapper-show`;
 function useShowSubMenu(eventName, e, wrapper) {
@@ -29399,8 +29909,8 @@ function useShowSubMenu(eventName, e, wrapper) {
     wrapper.classList.add(menuItemHorizontalWrapperHidden);
   }
 }
-const ns$6 = useNamespace("menu");
-const subNs = useNamespace("submenu");
+const ns$6 = useNamespace$1("menu");
+const subNs = useNamespace$1("submenu");
 const subMenuClass = subNs.b();
 var SubMenu = defineComponent({
   name: "DSubMenu",
@@ -29621,7 +30131,7 @@ var Menu = defineComponent({
   props: menuProps,
   emits: ["select", "deselect", "submenu-change"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("menu");
+    const ns2 = useNamespace$1("menu");
     const {
       openKeys,
       mode,
@@ -29767,7 +30277,7 @@ var Close$1 = defineComponent({
   setup(props, {
     emit
   }) {
-    const ns2 = useNamespace("message");
+    const ns2 = useNamespace$1("message");
     return () => createVNode("div", {
       "class": ns2.e("icon-close"),
       "onClick": (e) => emit("click", e)
@@ -29814,7 +30324,7 @@ const messageProps = {
     type: Function
   }
 };
-const ns$5 = useNamespace("message");
+const ns$5 = useNamespace$1("message");
 function SuccessIcon$1() {
   return createVNode("svg", {
     "viewBox": "0 0 1024 1024",
@@ -29872,7 +30382,7 @@ var Message$1 = defineComponent({
       shadow,
       showClose
     } = toRefs(props);
-    const ns2 = useNamespace("message");
+    const ns2 = useNamespace$1("message");
     let timer = null;
     let timestamp;
     const handleDestroy = () => {
@@ -30127,6 +30637,7 @@ const modalProps = {
 function useModal(props, emit) {
   function close2() {
     emit("update:modelValue", false);
+    emit("close");
   }
   function execClose() {
     props.beforeClose ? props.beforeClose(close2) : close2();
@@ -30252,7 +30763,7 @@ var ModalHeader = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("modal");
+    const ns2 = useNamespace$1("modal");
     return () => {
       var _a;
       return createVNode("div", {
@@ -30266,7 +30777,7 @@ var ModalBody = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("modal");
+    const ns2 = useNamespace$1("modal");
     return () => {
       var _a;
       return createVNode("div", {
@@ -30280,13 +30791,13 @@ var Modal = defineComponent({
   name: "DModal",
   inheritAttrs: false,
   props: modalProps,
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "close"],
   setup(props, {
     slots,
     attrs,
     emit
   }) {
-    const ns2 = useNamespace("modal");
+    const ns2 = useNamespace$1("modal");
     const {
       modelValue,
       title,
@@ -30416,7 +30927,7 @@ var ModalFooter = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("modal");
+    const ns2 = useNamespace$1("modal");
     return () => {
       var _a;
       return createVNode("div", {
@@ -30615,7 +31126,7 @@ var Close = defineComponent({
   setup(props, {
     emit
   }) {
-    const ns2 = useNamespace("notification");
+    const ns2 = useNamespace$1("notification");
     return () => createVNode("div", {
       "class": ns2.e("icon-close"),
       "onClick": (e) => emit("click", e)
@@ -30625,7 +31136,7 @@ var Close = defineComponent({
     }, null)]);
   }
 });
-const ns$4 = useNamespace("notification");
+const ns$4 = useNamespace$1("notification");
 const XLINK = {
   "xmlns:xlink": "http://www.w3.org/1999/xlink"
 };
@@ -30739,7 +31250,7 @@ var TypeIcon = defineComponent({
     const {
       type: type4
     } = toRefs(props);
-    const ns2 = useNamespace("notification");
+    const ns2 = useNamespace$1("notification");
     const classes = computed(() => ({
       [ns2.e("image")]: true,
       [ns2.em("image", type4.value)]: true
@@ -30814,7 +31325,7 @@ var Notification = defineComponent({
       close: close2,
       handleDestroy
     } = useEvent(props, emit);
-    const ns2 = useNamespace("notification");
+    const ns2 = useNamespace$1("notification");
     return () => createVNode(Transition, {
       "name": "notification-fade",
       "onAfterLeave": handleDestroy
@@ -30922,7 +31433,7 @@ function className$1(classStr, classOpt) {
 function useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t) {
   const formContext = inject(FORM_TOKEN, void 0);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
-  const ns2 = useNamespace("select");
+  const ns2 = useNamespace$1("select");
   const dropdownRef = ref();
   const selectDisabled = computed(() => (formContext == null ? void 0 : formContext.disabled) || props.disabled);
   const selectSize = computed(() => props.size || (formContext == null ? void 0 : formContext.size) || "md");
@@ -30939,7 +31450,7 @@ function useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t) {
   onClickOutside(dropdownRef, () => {
     toggleChange(false);
   }, { ignore: [selectRef] });
-  const dropdownMenuMultipleNs = useNamespace("dropdown-menu-multiple");
+  const dropdownMenuMultipleNs = useNamespace$1("dropdown-menu-multiple");
   const selectCls = computed(() => {
     return className$1(ns2.b(), {
       [ns2.m("open")]: isOpen.value,
@@ -31347,7 +31858,7 @@ const optionGroupProps = {
 const SELECT_TOKEN = Symbol("dSelect");
 const OPTION_GROUP_TOKEN = Symbol("dOptionGroup");
 function useOption(props) {
-  const ns2 = useNamespace("select");
+  const ns2 = useNamespace$1("select");
   const select2 = inject(SELECT_TOKEN, null);
   const optionGroup = inject(OPTION_GROUP_TOKEN, null);
   const currentName = computed(() => {
@@ -31469,7 +31980,7 @@ const tagProps = {
   }
 };
 function useClass(props) {
-  const ns2 = useNamespace("tag");
+  const ns2 = useNamespace$1("tag");
   return computed(() => {
     const { type: type4, color: color2, deletable } = props;
     return `${ns2.e("item")} ${ns2.m(type4 || (color2 ? "colorful" : "") || "default")} ${deletable ? ns2.m("deletable") : ""} ${ns2.m(props.size)}`;
@@ -31511,7 +32022,7 @@ var Tag = defineComponent({
     slots,
     emit
   }) {
-    const ns2 = useNamespace("tag");
+    const ns2 = useNamespace$1("tag");
     const {
       type: type4,
       color: color2,
@@ -31574,7 +32085,7 @@ var TagInstall = {
   }
 };
 function useSelectContent() {
-  const ns2 = useNamespace("select");
+  const ns2 = useNamespace$1("select");
   const select2 = inject(SELECT_TOKEN);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
   const app = getCurrentInstance();
@@ -31671,7 +32182,7 @@ var SelectContent = defineComponent({
   name: "SelectContent",
   setup() {
     const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
-    const ns2 = useNamespace("select");
+    const ns2 = useNamespace$1("select");
     const clearCls = computed(() => ({
       [ns2.e("clear")]: true,
       [ns2.em("clear", "feedback")]: Boolean(formItemContext == null ? void 0 : formItemContext.validateState) && (formItemContext == null ? void 0 : formItemContext.showFeedback)
@@ -31830,8 +32341,8 @@ var Select = defineComponent({
       toggleChange,
       isShowCreateOption
     } = useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t);
-    const scrollbarNs = useNamespace("scrollbar");
-    const ns2 = useNamespace("select");
+    const scrollbarNs = useNamespace$1("scrollbar");
+    const ns2 = useNamespace$1("select");
     const dropdownCls = ns2.e("dropdown");
     const listCls = {
       [ns2.e("dropdown-list")]: true,
@@ -31949,7 +32460,7 @@ var OptionGroup = defineComponent({
   name: "DOptionGroup",
   props: optionGroupProps,
   setup(props, ctx2) {
-    const ns2 = useNamespace("select");
+    const ns2 = useNamespace$1("select");
     provide(OPTION_GROUP_TOKEN, reactive(__spreadValues({}, toRefs(props))));
     return () => {
       var _a;
@@ -32134,7 +32645,7 @@ var ConfigMenu = defineComponent({
       isShowConfig,
       $slots
     } = this;
-    const ns2 = useNamespace("pagination");
+    const ns2 = useNamespace$1("pagination");
     return withDirectives(createVNode("div", {
       "class": ns2.e("config"),
       "ref": "paginationConfig"
@@ -32224,7 +32735,7 @@ var JumpPage = defineComponent({
       jump,
       showJumpButton
     } = this;
-    const ns2 = useNamespace("pagination");
+    const ns2 = useNamespace$1("pagination");
     const inputProps2 = {
       class: [ns2.e("input"), size ? ns2.em("input", size) : ""],
       size,
@@ -32346,7 +32857,7 @@ var PageNumBtn = defineComponent({
       nextChange,
       showTruePageIndex
     } = this;
-    const ns2 = useNamespace("pagination");
+    const ns2 = useNamespace$1("pagination");
     return createVNode("ul", {
       "class": [ns2.e("list"), size ? ns2.m(size) : ""]
     }, [createVNode("li", {
@@ -32432,7 +32943,7 @@ var PageNumBtn = defineComponent({
 });
 var PageSize = defineComponent({
   setup() {
-    const ns2 = useNamespace("pagination");
+    const ns2 = useNamespace$1("pagination");
     const paginationContext = inject(paginationInjectionKey);
     const iconRotate = ref(0);
     const {
@@ -32510,7 +33021,7 @@ var Pagination = defineComponent({
       showJumpButton,
       haveConfigMenu
     } = toRefs(props);
-    const ns2 = useNamespace("pagination");
+    const ns2 = useNamespace$1("pagination");
     const totalPages = computed(() => Math.ceil(props.total / props.pageSize));
     const litePageOptions = computed(() => liteSelectOptions(totalPages.value));
     const cursor = computed({
@@ -32947,7 +33458,7 @@ var Progress = defineComponent({
       data,
       $slots
     } = this;
-    const ns2 = useNamespace("progress");
+    const ns2 = useNamespace$1("progress");
     const isOutside = percentageTextPlacement === "outside";
     const isInsideBg = percentageTextPlacement === "insideBg";
     const createPercentageText = () => {
@@ -33489,7 +34000,7 @@ var Radio = defineComponent({
   props: radioProps,
   emits: ["change", "update:modelValue"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("radio");
+    const ns2 = useNamespace$1("radio");
     const {
       isChecked,
       radioName,
@@ -33562,7 +34073,7 @@ var RadioGroup = defineComponent({
   props: radioGroupProps,
   emits: ["change", "update:modelValue"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("radio-group");
+    const ns2 = useNamespace$1("radio-group");
     useRadioGroup(props, ctx2);
     return () => {
       const getContent = () => {
@@ -33597,7 +34108,7 @@ var RadioButton = defineComponent({
   props: radioProps,
   emits: ["change", "update:modelValue"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("radio-button");
+    const ns2 = useNamespace$1("radio-button");
     const {
       isChecked,
       radioName,
@@ -33781,7 +34292,7 @@ var Rate = defineComponent({
       selectValue,
       onMouseleave
     } = this;
-    const ns2 = useNamespace("rate");
+    const ns2 = useNamespace$1("rate");
     return createVNode("div", {
       "class": ns2.b(),
       "onMouseleave": onMouseleave,
@@ -34381,7 +34892,7 @@ const useSearchClass = (props, isFocus) => {
     right: "right",
     left: "left"
   };
-  const ns2 = useNamespace("search");
+  const ns2 = useNamespace$1("search");
   const searchSize = computed(() => props.size || (formContext == null ? void 0 : formContext.size) || "md");
   const rootClass = computed(() => ({
     [ns2.b()]: true,
@@ -34469,7 +34980,7 @@ var DSearch = defineComponent({
   setup(props, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DSearch", app);
-    const ns2 = useNamespace("search");
+    const ns2 = useNamespace$1("search");
     const isFocus = ref(false);
     const {
       rootClass,
@@ -34565,7 +35076,7 @@ const skeletonProps = {
 const roundInjectionKey = Symbol("round");
 const animationInjectionKey = Symbol("showAnimation");
 function useSkeletonItem(props) {
-  const ns2 = useNamespace("skeleton-item");
+  const ns2 = useNamespace$1("skeleton-item");
   const { variant, size } = toRefs(props);
   const round = inject(roundInjectionKey, void 0);
   const showAnimation = inject(animationInjectionKey, void 0);
@@ -34639,7 +35150,7 @@ var Skeleton = defineComponent({
   name: "DSkeleton",
   props: skeletonProps,
   setup(props, ctx2) {
-    const ns2 = useNamespace("skeleton");
+    const ns2 = useNamespace$1("skeleton");
     const {
       loading: loading2,
       rows,
@@ -34794,7 +35305,7 @@ var Slider = defineComponent({
   props: sliderProps,
   emits: ["update:modelValue"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("slider");
+    const ns2 = useNamespace$1("slider");
     const {
       sliderRunway,
       popoverShow,
@@ -34929,7 +35440,7 @@ var DSplitterBar = defineComponent({
   setup(props) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DSplitterBar", app);
-    const ns2 = useNamespace("splitter");
+    const ns2 = useNamespace$1("splitter");
     const store = inject("splitterStore");
     const state = reactive({
       wrapperClass: `${ns2.e("bar")} ${ns2.em("bar", props.orientation)} `
@@ -35284,7 +35795,7 @@ var Splitter = defineComponent({
     const state = reactive({
       panes: []
     });
-    const ns2 = useNamespace("splitter");
+    const ns2 = useNamespace$1("splitter");
     state.panes = ((_b = (_a = ctx2.slots).DSplitterPane) == null ? void 0 : _b.call(_a)) || [];
     store.setPanes({
       panes: state.panes
@@ -35374,10 +35885,12 @@ var SplitterPane = defineComponent({
     slots,
     expose
   }) {
+    var _a;
     const store = inject("splitterStore");
     const domRef = ref();
     const orderRef = ref();
-    const ns2 = useNamespace("splitter");
+    const currentVnode = (_a = getCurrentInstance()) == null ? void 0 : _a.vnode;
+    const ns2 = useNamespace$1("splitter");
     watch([orderRef, domRef], ([order, ele]) => {
       if (!ele) {
         return;
@@ -35470,17 +35983,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)]);
     };
   }
 });
@@ -35672,7 +36194,7 @@ var Statistic = defineComponent({
     var _a;
     const innerValue = ref((_a = props.valueFrom) != null ? _a : props.value);
     const tween = ref(null);
-    const ns2 = useNamespace("statistic");
+    const ns2 = useNamespace$1("statistic");
     const animation = (from = ((_b) => (_b = props.valueFrom) != null ? _b : 0)(), to = typeof props.value === "number" ? props.value : Number(props.value)) => {
       if (from !== to) {
         tween.value = new Tween({
@@ -35746,7 +36268,7 @@ var Status = defineComponent({
     }
   },
   setup(props, ctx2) {
-    const ns2 = useNamespace("status");
+    const ns2 = useNamespace$1("status");
     const typeClass = computed(() => {
       const {
         type: type4
@@ -35815,7 +36337,7 @@ var Steps = defineComponent({
       direction,
       simple
     } = toRefs(props);
-    const ns2 = useNamespace("steps");
+    const ns2 = useNamespace$1("steps");
     const activeStep = ref(modelValue.value);
     provide(ACTIVE_STEP, activeStep);
     provide(STEPS_PROPS, props);
@@ -35865,7 +36387,7 @@ var Step = defineComponent({
       icon: icon2,
       status: status2
     } = toRefs(props);
-    const ns2 = useNamespace("step");
+    const ns2 = useNamespace$1("step");
     const instance = getCurrentInstance();
     const activeStep = inject(ACTIVE_STEP);
     const steps2 = inject(STEPS);
@@ -35985,7 +36507,7 @@ const stepsGuideProps = {
   }
 };
 function useStepsGuidePosition(props, currentStep) {
-  const guideClassList = reactive([useNamespace("steps-guide").b()]);
+  const guideClassList = reactive([useNamespace$1("steps-guide").b()]);
   const stepsRef = ref(null);
   const guidePosition = reactive({
     left: "",
@@ -36097,7 +36619,7 @@ var StepsGuide = defineComponent({
     var _a;
     const app = getCurrentInstance();
     const t = createI18nTranslate("DStepsGuide", app);
-    const ns2 = useNamespace("steps-guide");
+    const ns2 = useNamespace$1("steps-guide");
     const stepIndexData = ref((_a = props.stepIndex) != null ? _a : 0);
     const stepIndex = computed({
       set: (val) => {
@@ -36460,7 +36982,7 @@ var Switch = defineComponent({
   props: switchProps,
   emits: ["change", "update:modelValue"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("switch");
+    const ns2 = useNamespace$1("switch");
     const {
       toggle,
       checked,
@@ -36598,7 +37120,7 @@ const tableProps = {
 };
 const TABLE_TOKEN = Symbol();
 function useTable(props, tableWidth) {
-  const ns2 = useNamespace("table");
+  const ns2 = useNamespace$1("table");
   const classes = computed(() => ({
     [ns2.e("view")]: true,
     [ns2.m("striped")]: props.striped,
@@ -36616,7 +37138,7 @@ function useTable(props, tableWidth) {
   return { classes, styles };
 }
 const useFixedColumn = (column2) => {
-  const ns2 = useNamespace("table");
+  const ns2 = useNamespace$1("table");
   const stickyClass = computed(() => ({
     [ns2.e("checkable-cell")]: column2.value.type === "checkable",
     [ns2.m("sticky-cell")]: Boolean(column2.value.fixedLeft) || Boolean(column2.value.fixedRight),
@@ -36709,7 +37231,7 @@ function useTableWatcher(props, store) {
   }, { deep: true });
 }
 function useHorizontalScroll(table2) {
-  const ns2 = useNamespace("table");
+  const ns2 = useNamespace$1("table");
   const setScrollViewClass = (position) => {
     const element = table2.vnode.el;
     const className2 = ns2.m(`scroll-${position}`);
@@ -37199,7 +37721,7 @@ var Sort = defineComponent({
     const changeDirection = () => {
       ctx2.emit("sort", directionMap[props.sortDirection || "default"]);
     };
-    const ns2 = useNamespace("table");
+    const ns2 = useNamespace$1("table");
     return () => createVNode("span", {
       "onClick": changeDirection,
       "class": ns2.e("sort-clickable")
@@ -37749,7 +38271,7 @@ var body = "";
 var TableHeader = defineComponent({
   name: "DTableHeader",
   setup() {
-    const ns2 = useNamespace("table");
+    const ns2 = useNamespace$1("table");
     const {
       headerRows
     } = useHeader();
@@ -37892,7 +38414,7 @@ var TD = defineComponent({
     };
   }
 });
-const ns$3 = useNamespace("table");
+const ns$3 = useNamespace$1("table");
 function useMergeCell() {
   const table2 = inject(TABLE_TOKEN);
   const { _data: data, _columns: columns } = table2.store.states;
@@ -37999,7 +38521,7 @@ var TableBody = defineComponent({
       flatColumns,
       flatRows
     } = table2.store.states;
-    const ns2 = useNamespace("table");
+    const ns2 = useNamespace$1("table");
     const {
       tableSpans,
       removeCells
@@ -38073,7 +38595,7 @@ var FixHeader = defineComponent({
     }
   },
   setup(props) {
-    const ns2 = useNamespace("table");
+    const ns2 = useNamespace$1("table");
     const table2 = inject(TABLE_TOKEN, void 0);
     const showHeader = computed(() => Boolean(table2 == null ? void 0 : table2.props.showHeader));
     const {
@@ -38151,7 +38673,7 @@ var Table = defineComponent({
     } = useHorizontalScroll(table2);
     useTableWatcher(props, store);
     const isEmpty2 = computed(() => props.data.length === 0);
-    const ns2 = useNamespace("table");
+    const ns2 = useNamespace$1("table");
     const hiddenColumns = ref(null);
     table2.hiddenColumns = hiddenColumns;
     table2.tableRef = tableRef;
@@ -38324,7 +38846,7 @@ const IconClose$1 = () => createVNode("svg", {
   "fill": "#252b3a",
   "d": "M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"
 }, null)])]);
-const ns$2 = useNamespace("table");
+const ns$2 = useNamespace$1("table");
 const cellMap = {
   checkable: {
     renderHeader(column2, store) {
@@ -38742,7 +39264,7 @@ var TagInput = defineComponent({
   setup(props, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DTagInput", app);
-    const ns2 = useNamespace("tag-input");
+    const ns2 = useNamespace$1("tag-input");
     const selectedTags = ref([]);
     watch(() => props.modelValue, () => {
       selectedTags.value = props.modelValue;
@@ -39156,7 +39678,7 @@ var TimePopup = defineComponent({
   setup(props, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DTimePopup", app);
-    const ns2 = useNamespace("time-popup");
+    const ns2 = useNamespace$1("time-popup");
     const popupDome = ref();
     const timeListDom = ref();
     const hourList = initializeTimeData("hour");
@@ -39229,7 +39751,7 @@ var TimePicker = defineComponent({
   props: timePickerProps,
   emits: ["change", "update:modelValue"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("time-picker");
+    const ns2 = useNamespace$1("time-picker");
     const activeHour = ref("00");
     const activeMinute = ref("00");
     const activeSecond = ref("00");
@@ -39959,7 +40481,7 @@ var transferHeader = defineComponent({
   setup(props, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DTransfer", app);
-    const ns2 = useNamespace("transfer");
+    const ns2 = useNamespace$1("transfer");
     const {
       allCheckedChangeHandle
     } = transferHeaderState$1(props, ctx2);
@@ -40175,7 +40697,7 @@ var transferBody = defineComponent({
   setup(props, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DTransferBody", app);
-    const ns2 = useNamespace("transfer");
+    const ns2 = useNamespace$1("transfer");
     const {
       bodyHeight,
       query,
@@ -40319,7 +40841,7 @@ var transferPanel = defineComponent({
   setup(props, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DTransfer", app);
-    const ns2 = useNamespace("transfer");
+    const ns2 = useNamespace$1("transfer");
     const {
       allChecked,
       allHalfchecked,
@@ -40410,7 +40932,7 @@ var transferOperate = defineComponent({
   },
   props: transferOperateProps,
   setup(props, ctx2) {
-    const ns2 = useNamespace("transfer");
+    const ns2 = useNamespace$1("transfer");
     const {
       toTargetHandle,
       toSourceHandle
@@ -40685,7 +41207,7 @@ var Transfer = defineComponent({
   setup(props, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DTransfer", app);
-    const ns2 = useNamespace("transfer");
+    const ns2 = useNamespace$1("transfer");
     const {
       sourceTitle,
       targetTitle,
@@ -41096,7 +41618,7 @@ const formatBasicTree = (trees, keyName = "id", childrenName = "children", paren
     return curItem;
   });
 };
-const ns$1 = useNamespace("tree");
+const ns$1 = useNamespace$1("tree");
 const dropTypeMap = {
   dropPrev: ns$1.em("node", "drop-prev"),
   dropNext: ns$1.em("node", "drop-next"),
@@ -41632,7 +42154,7 @@ function useTree(tree2, plugins = [], context) {
     treeData
   }, pluginMethods), core);
 }
-const ns = useNamespace("tree");
+const ns = useNamespace$1("tree");
 function useTreeNode(data) {
   const nodeClass = computed(() => {
     var _a;
@@ -41707,7 +42229,7 @@ var DTreeNodeToggle = defineComponent({
     const {
       toggleNode
     } = inject(USE_TREE_TOKEN);
-    const ns2 = useNamespace("tree");
+    const ns2 = useNamespace$1("tree");
     return () => {
       var _a;
       return createVNode("span", {
@@ -41733,7 +42255,7 @@ var DTreeNodeLoading = defineComponent({
   setup() {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DTree", app);
-    const ns2 = useNamespace("loading-children ");
+    const ns2 = useNamespace$1("loading-children ");
     return () => {
       return createVNode("span", {
         "class": ns2.b()
@@ -41797,7 +42319,7 @@ var DTreeNode = defineComponent({
       onDragend
     } = inject(USE_TREE_TOKEN);
     const treeInstance = inject(TREE_INSTANCE);
-    const ns2 = useNamespace("tree");
+    const ns2 = useNamespace$1("tree");
     const {
       nodeClass,
       nodeStyle,
@@ -41929,7 +42451,7 @@ var Tree = defineComponent({
       dragdrop,
       operate
     } = toRefs(props);
-    const ns2 = useNamespace("tree");
+    const ns2 = useNamespace$1("tree");
     const normalRef = ref();
     const data = ref(formatBasicTree(props.data));
     const userPlugins = [useSelect$1(), useOperate(), useMergeNodes(), useSearchFilter()];
@@ -42810,10 +43332,10 @@ var Upload = defineComponent({
       limit,
       httpRequest
     } = toRefs(props);
-    const ns2 = useNamespace("upload");
-    const inputGroupNs = useNamespace("input-group");
-    const formControlNs = useNamespace("form-control");
-    const inputGroupAddOnNs = useNamespace("input-group-addon");
+    const ns2 = useNamespace$1("upload");
+    const inputGroupNs = useNamespace$1("input-group");
+    const formControlNs = useNamespace$1("form-control");
+    const inputGroupAddOnNs = useNamespace$1("input-group-addon");
     const {
       triggerSelectFiles,
       _validateFiles,
@@ -43199,9 +43721,9 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.5.8",
+  version: "1.5.10",
   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 };