vue-devui 1.5.9 → 1.5.10

package/vue-devui.es.js

@@ -127,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}`;
@@ -137,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,
@@ -182,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;
@@ -296,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;
@@ -375,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(() => {
@@ -466,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");
@@ -751,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");
@@ -853,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) => {
@@ -1146,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",
@@ -1295,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;
     };
@@ -1469,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";
@@ -7621,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,
@@ -7754,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);
@@ -7920,7 +7949,7 @@ const FlexibleOverlay = defineComponent({
     emit,
     expose
   }) {
-    const ns2 = useNamespace("flexible-overlay");
+    const ns2 = useNamespace$1("flexible-overlay");
     const {
       clickEventBubble
     } = toRefs(props);
@@ -7968,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);
 }
@@ -8155,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")],
@@ -8257,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)]);
@@ -8294,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) {
@@ -8427,7 +8456,7 @@ 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",
@@ -8446,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
@@ -8489,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,
@@ -8519,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
@@ -9573,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",
@@ -9815,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(() => ({
@@ -9927,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", {
@@ -10095,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]) {
@@ -10267,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;
@@ -10287,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,
@@ -10302,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;
   });
@@ -10360,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,
@@ -10386,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", {
@@ -10434,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 {
@@ -10834,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}`);
     });
@@ -10845,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;
       }
@@ -10915,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`,
@@ -11039,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) => {
@@ -11422,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,
@@ -11498,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);
@@ -11583,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}`,
@@ -11674,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",
@@ -11763,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")
     });
@@ -11808,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,
@@ -12098,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,
@@ -12648,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,
@@ -12749,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);
@@ -12795,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,
@@ -13371,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;
@@ -13458,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,
@@ -13561,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,
@@ -14255,15 +14278,27 @@ 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
   },
-  codeLoader: {
+  expandLoader: {
     type: Function
   }
 };
@@ -14281,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,
@@ -14336,25 +14371,98 @@ 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) {
-  const trNodesToBeInserted = trNodes.filter((element) => element.children[0].children.length === 2);
   if (direction === "up") {
     const nextSibling = referenceDom.nextElementSibling;
-    trNodesToBeInserted.forEach((item) => {
+    trNodes.forEach((item) => {
       var _a;
       (_a = referenceDom.parentNode) == null ? void 0 : _a.insertBefore(item, nextSibling);
     });
   } else {
-    trNodesToBeInserted.forEach((item) => {
+    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);
@@ -14381,11 +14489,13 @@ function ifRemoveExpandLine(expandDom, newExpandDom, direction) {
     }
   } else {
     const nextSibling = expandDom.nextElementSibling;
-    const nextLeftLineNumber = parseInt((_i = (_h = (_g = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _g[0].children) == null ? void 0 : _h[0]) == null ? void 0 : _i.innerText);
-    const nextRightLineNumber = parseInt((_l = (_k = (_j = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _j[0].children) == null ? void 0 : _k[1]) == null ? void 0 : _l.innerText);
-    if (leftLineNumber + addedLine === nextLeftLineNumber && rightLineNumber + addedLine === nextRightLineNumber) {
-      expandDom.remove();
-      return true;
+    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;
@@ -14401,14 +14511,33 @@ function updateExpandLineCount(expandDom, newExpandDom) {
   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
+    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();
-  diff2HtmlUi.highlightCode();
 }
 function setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR) {
   if (trNode) {
@@ -14425,7 +14554,40 @@ function updateExpandUpDownButton(trNode) {
   trNode.children[0].children[0].classList.add("all-expand");
   trNode.children[0].children[0].innerHTML = AllExpandIcon();
 }
-function updateLineNumberInDataset(trNode, expandAllThreshold, position, updateExpandButton = false) {
+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;
@@ -14433,15 +14595,15 @@ function updateLineNumberInDataset(trNode, expandAllThreshold, position, updateE
   if (position === "top") {
     const nextLineNode = trNode.nextElementSibling;
     nextL = parseInt(nextLineNode.children[0].children[0].innerText) - 1;
-    prevL = Math.max(nextL - expandAllThreshold + 1, 1);
+    prevL = Math.max(nextL - expandThreshold + 1, 1);
     nextR = parseInt(nextLineNode.children[0].children[1].innerText) - 1;
-    prevR = Math.max(nextR - expandAllThreshold + 1, 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 + expandAllThreshold - 1;
+    nextL = prevL + expandThreshold - 1;
     prevR = parseInt(prevLineNode.children[0].children[1].innerText) + 1;
-    nextR = prevR + expandAllThreshold - 1;
+    nextR = prevR + expandThreshold - 1;
   } else {
     const prevLineNode = trNode.previousElementSibling;
     const nextLineNode = trNode.nextElementSibling;
@@ -14451,14 +14613,14 @@ function updateLineNumberInDataset(trNode, expandAllThreshold, position, updateE
     prevR = parseInt(prevLineNode.children[0].children[1].innerText) + 1;
     nextL = nextLineNumber - 1;
     nextR = parseInt(nextLineNode.children[0].children[1].innerText) - 1;
-    const isExpandAll = nextLineNumber - prevLineNumber <= expandAllThreshold;
+    const isExpandAll = nextLineNumber - prevLineNumber <= expandThreshold;
     if (isExpandAll && updateExpandButton) {
       updateExpandUpDownButton(trNode);
     }
   }
   setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR);
 }
-function getLineNumberFormDataset(expandDom, expandAllThreshold) {
+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);
@@ -14471,14 +14633,14 @@ function getLineNumberFormDataset(expandDom, expandAllThreshold) {
     const direction = (_c = buttonClasses.find((item) => item.endsWith("expand"))) == null ? void 0 : _c.split("-")[0];
     if (direction === "up") {
       leftLineEnd = nextL;
-      leftLineStart = Math.max(leftLineEnd - expandAllThreshold + 1, prevL);
+      leftLineStart = Math.max(leftLineEnd - expandThreshold + 1, prevL);
       rightLineEnd = nextR;
-      rightLineStart = Math.max(rightLineEnd - expandAllThreshold + 1, prevR);
+      rightLineStart = Math.max(rightLineEnd - expandThreshold + 1, prevR);
     } else if (direction === "down") {
       leftLineStart = prevL;
-      leftLineEnd = Math.min(leftLineStart + expandAllThreshold - 1, nextL);
+      leftLineEnd = Math.min(leftLineStart + expandThreshold - 1, nextL);
       rightLineStart = prevR;
-      rightLineEnd = Math.min(rightLineStart + expandAllThreshold - 1, nextR);
+      rightLineEnd = Math.min(rightLineStart + expandThreshold - 1, nextR);
     } else {
       leftLineStart = prevL;
       leftLineEnd = nextL;
@@ -14522,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");
@@ -14539,42 +14701,145 @@ function addCommentToPage(lineHost, commentDom, lineSide) {
     (_b = lineHost.parentElement) == null ? void 0 : _b.appendChild(newLine);
   }
 }
+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, expandAllThreshold, codeLoader } = toRefs(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.value;
+          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;
@@ -14594,15 +14859,15 @@ function useCodeReviewExpand(reviewContentRef, props) {
         const nextLineIndex = lineIndex + 1;
         const prevLineIndex = lineIndex - 1;
         if (lineIndex === 0 && nextLineIndex in trNodes) {
-          updateLineNumberInDataset(trNodes[lineIndex], expandAllThreshold.value, "top");
+          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);
-          updateLineNumberInDataset(trNodes[lineIndex], expandAllThreshold.value, "middle");
-          const isExpandAll = nextLineNumber - prevLineNumber <= expandAllThreshold.value;
+          updateLineNumberInDataset(trNodes[lineIndex], expandThreshold.value, "middle");
+          const isExpandAll = nextLineNumber - prevLineNumber <= expandThreshold.value;
           attachExpandUpDownButton(lineNumberBox, isExpandAll ? "all" : "updown");
         }
       }
@@ -14611,7 +14876,7 @@ function useCodeReviewExpand(reviewContentRef, props) {
     loadMoreLine.children[0].removeChild(loadMoreLine.children[0].children[0]);
     loadMoreLine.children[1].innerText = "";
     (_a = trNodes[0].parentElement) == null ? void 0 : _a.appendChild(loadMoreLine);
-    updateLineNumberInDataset(loadMoreLine, expandAllThreshold.value, "bottom");
+    updateLineNumberInDataset(loadMoreLine, expandThreshold.value, "bottom");
     attachExpandUpDownButton(loadMoreLine.children[0], "down");
   };
   const insertIncrementCode = (code, direction, referenceDom) => {
@@ -14632,7 +14897,8 @@ function useCodeReviewExpand(reviewContentRef, props) {
     if (!expandLine) {
       return;
     }
-    insertIncrementLineToPage(referenceDom, trNodes, direction);
+    const trNodesToBeInserted = trNodes.filter((element) => element.children[0].children.length === 2);
+    insertIncrementLineToPage(referenceDom, trNodesToBeInserted, direction);
     const removedExpandLine = ifRemoveExpandLine(referenceDom, expandLine, direction);
     if (removedExpandLine) {
       return;
@@ -14640,15 +14906,15 @@ function useCodeReviewExpand(reviewContentRef, props) {
     updateExpandLineCount(referenceDom, expandLine);
     if (direction === "up") {
       if (!referenceDom.previousElementSibling) {
-        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "top");
+        updateLineNumberInDataset(referenceDom, expandThreshold.value, "top");
       } else {
-        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "middle", true);
+        updateLineNumberInDataset(referenceDom, expandThreshold.value, "middle", true);
       }
     } else {
       if (referenceDom.nextElementSibling) {
-        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "middle", true);
+        updateLineNumberInDataset(referenceDom, expandThreshold.value, "middle", true);
       } else {
-        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "bottom");
+        updateLineNumberInDataset(referenceDom, expandThreshold.value, "bottom");
       }
     }
   };
@@ -14662,10 +14928,10 @@ function useCodeReviewExpand(reviewContentRef, props) {
     if (expandIconDom) {
       const expandDirection = (_a = Array.from(expandIconDom.classList).find((item) => item.endsWith("expand"))) == null ? void 0 : _a.split("-")[0];
       const direction = expandDirection === "up" || expandDirection === "all" ? "up" : "down";
-      const [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd] = getLineNumberFormDataset(expandIconDom, expandAllThreshold.value);
-      (_b = codeLoader == null ? void 0 : codeLoader.value) == null ? void 0 : _b.call(codeLoader, [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd], (code) => {
-        var _a2;
-        insertIncrementCode(code, direction, (_a2 = expandIconDom.parentElement) == null ? void 0 : _a2.parentElement);
+      const [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);
       });
     }
   };
@@ -14675,7 +14941,7 @@ function useCodeReviewExpand(reviewContentRef, props) {
   return { insertExpandButton, onExpandButtonClick };
 }
 function useCodeReview(props, ctx2) {
-  const { diff, outputFormat } = toRefs(props);
+  const { diff, outputFormat, allowExpand, showBlob } = toRefs(props);
   const renderHtml = ref("");
   const reviewContentRef = ref();
   const diffFile = ref([]);
@@ -14683,14 +14949,18 @@ function useCodeReview(props, ctx2) {
   const initDiffContent = () => {
     diffFile.value = Diff2Html.parse(diff.value);
     nextTick(() => {
-      parseDiffCode(reviewContentRef.value, diff.value, outputFormat.value);
-      insertExpandButton();
-      ctx2.emit("contentRefresh", JSON.parse(JSON.stringify(diffFile.value)));
+      if (inBrowser && !showBlob.value) {
+        parseDiffCode(reviewContentRef.value, diff.value, outputFormat.value);
+        allowExpand.value && insertExpandButton();
+        ctx2.emit("contentRefresh", JSON.parse(JSON.stringify(diffFile.value)));
+      }
     });
   };
   const onContentClick = (e) => {
     onExpandButtonClick(e);
   };
+  watch(showBlob, initDiffContent);
+  watch(outputFormat, initDiffContent);
   watch(diff, initDiffContent, { immediate: true });
   return { renderHtml, reviewContentRef, diffFile, onContentClick };
 }
@@ -14712,35 +14982,81 @@ function useCodeReviewFold(props, ctx2) {
   });
   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();
+          }
+        }
       }
     }
   };
@@ -14756,40 +15072,60 @@ 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);
@@ -14797,9 +15133,7 @@ function useCodeReviewComment(reviewContentRef, ctx2) {
   return {
     commentLeft,
     commentTop,
-    onMouseEnter,
-    onMouseMove,
-    onMouseleave,
+    mouseEvent,
     onCommentMouseLeave,
     onCommentIconClick,
     insertComment,
@@ -14812,7 +15146,7 @@ var CodeReview = defineComponent({
   props: codeReviewProps,
   emits: ["foldChange", "addComment", "afterViewInit", "contentRefresh"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("code-review");
+    const ns2 = useNamespace$1("code-review");
     const {
       renderHtml,
       reviewContentRef,
@@ -14826,14 +15160,12 @@ var CodeReview = defineComponent({
     const {
       commentLeft,
       commentTop,
-      onMouseEnter,
-      onMouseMove,
-      onMouseleave,
+      mouseEvent,
       onCommentMouseLeave,
       onCommentIconClick,
       insertComment,
       removeComment
-    } = useCodeReviewComment(reviewContentRef, ctx2);
+    } = useCodeReviewComment(reviewContentRef, props, ctx2);
     onMounted(() => {
       ctx2.emit("afterViewInit", {
         toggleFold,
@@ -14847,29 +15179,30 @@ var CodeReview = defineComponent({
       isFold,
       rootCtx: ctx2
     });
-    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,
-      "onClick": onContentClick,
-      "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)])]);
+    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 = {
@@ -14972,7 +15305,6 @@ var CollapseItem = defineComponent({
     });
     const handlerTitleClick = (e) => {
       e.preventDefault();
-      e.stopPropagation();
       if (!props.disabled) {
         collapse2 == null ? void 0 : collapse2.collapseItemClick(props.name);
       }
@@ -15142,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(() => ({
@@ -15270,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,
@@ -15392,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);
@@ -15499,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,
@@ -19956,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,
@@ -20405,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,
@@ -20469,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,
@@ -20612,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,
@@ -20641,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);
@@ -20768,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,
@@ -20804,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([]);
@@ -20993,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,
@@ -21207,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,
@@ -21317,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,
@@ -21543,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,
@@ -21861,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);
     };
@@ -21876,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(() => ({
@@ -22085,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))) {
@@ -22599,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(() => {
@@ -22646,7 +22978,7 @@ var Dropdown = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("editable-select");
+    const ns2 = useNamespace$1("editable-select");
     const {
       width,
       maxHeight
@@ -22898,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",
@@ -23025,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();
@@ -23197,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) {
@@ -24411,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(" ");
     });
@@ -27412,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,
@@ -27490,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,
@@ -27534,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`;
@@ -27713,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]);
@@ -28197,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"),
@@ -28240,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"]);
@@ -28461,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);
@@ -28479,7 +28811,7 @@ var Content = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("layout");
+    const ns2 = useNamespace$1("layout");
     return () => {
       var _a;
       return createVNode("div", {
@@ -28494,7 +28826,7 @@ var Header = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("layout");
+    const ns2 = useNamespace$1("layout");
     return () => {
       var _a;
       return createVNode("div", {
@@ -28509,7 +28841,7 @@ var Footer = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("layout");
+    const ns2 = useNamespace$1("layout");
     return () => {
       var _a;
       return createVNode("div", {
@@ -28523,7 +28855,7 @@ var Aside = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("layout");
+    const ns2 = useNamespace$1("layout");
     return () => {
       var _a;
       return createVNode("div", {
@@ -28550,7 +28882,7 @@ var List = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("list");
+    const ns2 = useNamespace$1("list");
     return () => {
       var _a;
       return createVNode("div", {
@@ -28565,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", {
@@ -28692,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);
@@ -28839,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,
@@ -28902,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);
@@ -29047,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`;
@@ -29206,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) {
@@ -29245,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++) {
@@ -29261,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({
@@ -29532,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) {
@@ -29577,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",
@@ -29799,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,
@@ -29945,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)
@@ -29992,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",
@@ -30050,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 = () => {
@@ -30431,7 +30763,7 @@ var ModalHeader = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("modal");
+    const ns2 = useNamespace$1("modal");
     return () => {
       var _a;
       return createVNode("div", {
@@ -30445,7 +30777,7 @@ var ModalBody = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("modal");
+    const ns2 = useNamespace$1("modal");
     return () => {
       var _a;
       return createVNode("div", {
@@ -30465,7 +30797,7 @@ var Modal = defineComponent({
     attrs,
     emit
   }) {
-    const ns2 = useNamespace("modal");
+    const ns2 = useNamespace$1("modal");
     const {
       modelValue,
       title,
@@ -30595,7 +30927,7 @@ var ModalFooter = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns2 = useNamespace("modal");
+    const ns2 = useNamespace$1("modal");
     return () => {
       var _a;
       return createVNode("div", {
@@ -30794,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)
@@ -30804,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"
 };
@@ -30918,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
@@ -30993,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
@@ -31101,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");
@@ -31118,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,
@@ -31526,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(() => {
@@ -31648,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)}`;
@@ -31690,7 +32022,7 @@ var Tag = defineComponent({
     slots,
     emit
   }) {
-    const ns2 = useNamespace("tag");
+    const ns2 = useNamespace$1("tag");
     const {
       type: type4,
       color: color2,
@@ -31753,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();
@@ -31850,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)
@@ -32009,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,
@@ -32128,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;
@@ -32313,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"
@@ -32403,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,
@@ -32525,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", {
@@ -32611,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 {
@@ -32689,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({
@@ -33126,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 = () => {
@@ -33668,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,
@@ -33741,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 = () => {
@@ -33776,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,
@@ -33960,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,
@@ -34560,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,
@@ -34648,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,
@@ -34744,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);
@@ -34818,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,
@@ -34973,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,
@@ -35108,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)} `
@@ -35463,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
@@ -35558,7 +35890,7 @@ var SplitterPane = defineComponent({
     const domRef = ref();
     const orderRef = ref();
     const currentVnode = (_a = getCurrentInstance()) == null ? void 0 : _a.vnode;
-    const ns2 = useNamespace("splitter");
+    const ns2 = useNamespace$1("splitter");
     watch([orderRef, domRef], ([order, ele]) => {
       if (!ele) {
         return;
@@ -35862,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({
@@ -35936,7 +36268,7 @@ var Status = defineComponent({
     }
   },
   setup(props, ctx2) {
-    const ns2 = useNamespace("status");
+    const ns2 = useNamespace$1("status");
     const typeClass = computed(() => {
       const {
         type: type4
@@ -36005,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);
@@ -36055,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);
@@ -36175,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: "",
@@ -36287,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) => {
@@ -36650,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,
@@ -36788,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,
@@ -36806,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),
@@ -36899,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}`);
@@ -37389,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")
@@ -37939,7 +38271,7 @@ var body = "";
 var TableHeader = defineComponent({
   name: "DTableHeader",
   setup() {
-    const ns2 = useNamespace("table");
+    const ns2 = useNamespace$1("table");
     const {
       headerRows
     } = useHeader();
@@ -38082,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;
@@ -38189,7 +38521,7 @@ var TableBody = defineComponent({
       flatColumns,
       flatRows
     } = table2.store.states;
-    const ns2 = useNamespace("table");
+    const ns2 = useNamespace$1("table");
     const {
       tableSpans,
       removeCells
@@ -38263,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 {
@@ -38341,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;
@@ -38514,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) {
@@ -38932,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;
@@ -39346,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");
@@ -39419,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");
@@ -40149,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);
@@ -40365,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,
@@ -40509,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,
@@ -40600,7 +40932,7 @@ var transferOperate = defineComponent({
   },
   props: transferOperateProps,
   setup(props, ctx2) {
-    const ns2 = useNamespace("transfer");
+    const ns2 = useNamespace$1("transfer");
     const {
       toTargetHandle,
       toSourceHandle
@@ -40875,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,
@@ -41286,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"),
@@ -41822,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;
@@ -41897,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", {
@@ -41923,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()
@@ -41987,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,
@@ -42119,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()];
@@ -43000,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,
@@ -43389,7 +43721,7 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.5.9",
+  version: "1.5.10",
   install(app) {
     installs.forEach((p) => app.use(p));
   }