vue-devui 1.5.3 → 1.5.4-alpha.0

package/vue-devui.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { createVNode, getCurrentInstance, defineComponent, toRefs, inject, computed, Fragment, mergeProps, resolveComponent, isVNode, ref, reactive, createTextVNode, provide, onMounted, watch, Transition, withDirectives, vShow, nextTick, onUnmounted, unref, withModifiers, Comment as Comment$1, Text, h, cloneVNode, Teleport, onBeforeUnmount, render, resolveDirective, resolveDynamicComponent, toRef, shallowRef, onUpdated, onBeforeMount, readonly, toRaw, watchEffect, renderSlot, useSlots, createApp, shallowReactive, effect, TransitionGroup } from "vue";
+import { createVNode, getCurrentInstance, defineComponent, toRefs, inject, computed, Fragment, mergeProps, resolveComponent, isVNode, ref, reactive, createTextVNode, provide, onMounted, watch, Transition, withDirectives, vShow, nextTick, onUnmounted, unref, withModifiers, Comment as Comment$1, Text, h, cloneVNode, Teleport, onBeforeUnmount, render, resolveDirective, resolveDynamicComponent, toRef, shallowRef, onBeforeMount, onUpdated, readonly, toRaw, watchEffect, renderSlot, useSlots, createApp, shallowReactive, effect, TransitionGroup } from "vue";
 import { useRoute } from "vue-router";
 import { offset, autoPlacement, arrow, shift, computePosition, flip } from "@floating-ui/dom";
 import { onClickOutside, useResizeObserver } from "@vueuse/core";
@@ -11302,7 +11302,7 @@ var Breadcrumb = defineComponent({
 var BreadcrumbInstall = {
   title: "Breadcrumb \u9762\u5305\u5C51",
   category: "\u5BFC\u822A",
-  status: "50%",
+  status: "100%",
   install(app) {
     app.component(Breadcrumb.name, Breadcrumb);
     app.component(BreadcrumbItem.name, BreadcrumbItem);
@@ -13339,6 +13339,449 @@ var CascaderInstall = {
     app.component(Cascader.name, Cascader);
   }
 };
+const codeEditorProps = {
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  mode: {
+    type: String,
+    default: "normal"
+  },
+  originalText: {
+    type: String,
+    default: ""
+  },
+  theme: {
+    type: String,
+    default: "light"
+  },
+  autoHeight: {
+    type: Boolean,
+    default: false
+  },
+  refreshAll: {
+    type: Boolean,
+    default: false
+  },
+  offsetLeft: {
+    type: Number
+  },
+  addCommentIcon: {
+    type: String,
+    default: ""
+  },
+  expandCommentIcon: {
+    type: String,
+    default: ""
+  },
+  options: {
+    type: Object,
+    default: () => ({})
+  },
+  mouseTargetTypes: {
+    type: Array,
+    default: () => [2, 4]
+  },
+  editorDecorations: {
+    type: Array,
+    default: () => []
+  },
+  comments: {
+    type: Array,
+    default: () => []
+  }
+};
+function useCodeEditor(props, ctx2) {
+  const editorEl = ref();
+  const {
+    modelValue,
+    originalText,
+    options,
+    mode,
+    theme,
+    autoHeight,
+    offsetLeft,
+    refreshAll,
+    mouseTargetTypes,
+    editorDecorations,
+    comments,
+    addCommentIcon,
+    expandCommentIcon
+  } = toRefs(props);
+  let monaco;
+  let editor;
+  let diffEditor;
+  let themeService;
+  let currentTheme;
+  let commentViewZones = [];
+  let heightMap = /* @__PURE__ */ new Map();
+  let commentWidgets = [];
+  let currentDecorations = [];
+  let currentLineDecoration = [];
+  let modifyValueFromInner = false;
+  watch(editorDecorations, refreshDecorations, { deep: true });
+  watch(comments, () => {
+    refreshViewZones();
+    refreshOverlayWidgets();
+  }, { deep: true });
+  watch(options, () => {
+    updateLanguage();
+    updateOptions();
+  }, { deep: true });
+  watch(originalText, setDiffEditorOriginValue);
+  watch(theme, setCurrentTheme);
+  watch(modelValue, () => {
+    if (!modifyValueFromInner) {
+      setValue();
+    } else {
+      modifyValueFromInner = false;
+    }
+  });
+  onBeforeMount(() => {
+    if (window["devuiThemeService"]) {
+      themeService = window["devuiThemeService"];
+      if (themeService.eventBus) {
+        themeService.eventBus.add("themeChanged", setCurrentTheme);
+      }
+    }
+  });
+  onMounted(async () => {
+    if (inBrowser) {
+      monaco = await import("monaco-editor");
+      setCurrentTheme();
+      init();
+      if (mode.value === "review") {
+        nextTick(() => {
+          refreshDecorations();
+          refreshOverlayWidgets();
+          refreshViewZones();
+        });
+      }
+    }
+  });
+  function init() {
+    if (mode.value === "normal" || mode.value === "review") {
+      initNormalEditor();
+    } else if (mode.value.includes("diff")) {
+      initDiffEditor();
+    }
+    if (!options.value["theme"]) {
+      monaco.editor.setTheme(currentTheme);
+    }
+    handleAutoHeight();
+    setValueEmitter();
+  }
+  function initNormalEditor() {
+    if (!editor) {
+      editor = monaco.editor.create(editorEl.value, options.value);
+      editor.setModel(monaco.editor.createModel(modelValue.value, options.value["language"]));
+      ctx2.emit("afterEditorInit", editor);
+      if (mode.value === "review") {
+        editor.onMouseMove(handleMouseMove);
+        editor.onMouseLeave(handleMouseLeave);
+        editor.onMouseDown(handleMouseDown);
+      }
+    }
+  }
+  function initDiffEditor() {
+    if (!diffEditor) {
+      diffEditor = monaco.editor.createDiffEditor(editorEl.value, options.value);
+      diffEditor.setModel({
+        original: monaco.editor.createModel(originalText.value, options.value["language"]),
+        modified: monaco.editor.createModel(modelValue.value, options.value["language"])
+      });
+      ctx2.emit("afterEditorInit", diffEditor);
+    }
+  }
+  function setValue() {
+    if (mode.value === "normal" || mode.value === "review") {
+      setEditorValue();
+    } else if (mode.value === "diff") {
+      setDiffEditorValue();
+    }
+  }
+  function setEditorValue() {
+    var _a;
+    if (!editor || !editor.getModel()) {
+      return;
+    }
+    (_a = editor.getModel().modified) == null ? void 0 : _a.setValue(modelValue.value);
+  }
+  function setDiffEditorValue() {
+    var _a;
+    if (!diffEditor || !diffEditor.getModel()) {
+      return;
+    }
+    (_a = diffEditor.getModel().modified) == null ? void 0 : _a.setValue(modelValue.value);
+  }
+  function setCurrentTheme() {
+    if (options.value["theme"]) {
+      return;
+    }
+    if (theme.value === "light") {
+      currentTheme = themeService && themeService.currentTheme.isDark ? "vs-dark" : "vs";
+    } else if (theme.value === "dark") {
+      currentTheme = themeService && themeService.currentTheme.isDark ? "vs" : "vs-dark";
+    }
+    if (editor) {
+      monaco.editor.setTheme(currentTheme);
+    }
+  }
+  function handleAutoHeight() {
+    if (autoHeight.value) {
+      editor.onDidChangeModelDecorations(() => {
+        setTimeout(updateEditorHeightAuto);
+      });
+    }
+  }
+  function setValueEmitter() {
+    let model;
+    if (editor) {
+      model = editor.getModel();
+    } else if (diffEditor) {
+      model = diffEditor.getModel().modified;
+    }
+    model.onDidChangeContent(lodash.exports.throttle(() => {
+      modifyValueFromInner = true;
+      ctx2.emit("update: modelValue", model.getValue());
+    }, 100));
+  }
+  function setDiffEditorOriginValue() {
+    var _a;
+    if (!diffEditor || !diffEditor.getModel()) {
+      return;
+    }
+    (_a = diffEditor.getModel().original) == null ? void 0 : _a.setValue(originalText.value);
+  }
+  function updateLanguage() {
+    const language = options.value.language;
+    if (editor) {
+      if (mode.value === "normal" || mode.value === "review") {
+        const model = diffEditor.getModel();
+        monaco.editor.setModelLanguage(model.modified, language);
+        monaco.editor.setModelLanguage(model.original, language);
+      }
+    }
+  }
+  function updateOptions() {
+    if (editor) {
+      editor.updateOptions(__spreadValues({}, options.value));
+    }
+    if (diffEditor) {
+      diffEditor.updateOptions(__spreadValues({}, options.value));
+    }
+  }
+  function updateEditorHeightAuto() {
+    var _a;
+    const lineHeight = editor.getOption(monaco.editor.EditorOption.lineHeight);
+    const lineCount = ((_a = editor.getModel()) == null ? void 0 : _a.getLineCount()) || 1;
+    const height = editor.getTopForLineNumber(lineCount + 1) + lineHeight;
+    if (editorEl.value) {
+      editorEl.value.style.height = `${height}px`;
+    }
+    editor.layout();
+  }
+  function handleMouseMove(event) {
+    if (event.target && event.target.position) {
+      const currentLineNumber = event.target.position.lineNumber;
+      if (!isDecorationExisted(currentLineNumber)) {
+        const lineDecoration = [
+          {
+            range: new monaco.Range(currentLineNumber, 0, currentLineNumber, 0),
+            option: {
+              isWholeLine: true,
+              glyphMarginClassName: `icon-pointer ${addCommentIcon.value}`
+            }
+          }
+        ];
+        currentLineDecoration = editor.deltaDecorations(currentLineDecoration, lineDecoration);
+      } else {
+        currentLineDecoration = editor.deltaDecorations(currentLineDecoration, []);
+      }
+    }
+  }
+  function handleMouseLeave() {
+    editor.deltaDecorations(currentLineDecoration, []);
+  }
+  function handleMouseDown(event) {
+    if (mouseTargetTypes.value.includes(event.target.type)) {
+      ctx2.emit("click", event);
+    }
+  }
+  function refreshDecorations() {
+    if (editorDecorations.value.length >= 0 && editor) {
+      const tempDecorations = editorDecorations.value.map(setDecorations);
+      setTimeout(() => {
+        currentDecorations = editor.deltaDecorations(currentDecorations, tempDecorations);
+      });
+      currentDecorations = editor.deltaDecorations(currentLineDecoration, []);
+    }
+  }
+  function setDecorations(decoration) {
+    return {
+      range: new monaco.Range(decoration.lineNumber, 1, decoration.lineNumber, 1),
+      options: {
+        isWholeLine: true,
+        className: decoration.customClasses || "",
+        glyphMarginClassName: `icon-pointer ${decoration.icon || expandCommentIcon.value} ${decoration.glyphClassName || ""}`
+      }
+    };
+  }
+  function isDecorationExisted(lineNumber) {
+    return editorDecorations.value.some((ed) => ed.lineNumber === lineNumber);
+  }
+  function refreshViewZones() {
+    if (editor) {
+      editor.changeViewZones((changeAccessor) => {
+        resetViewZones(changeAccessor);
+        renderViewZones(changeAccessor);
+        if (autoHeight.value) {
+          updateEditorHeightAuto();
+        }
+      });
+    }
+  }
+  function resetViewZones(changeAccessor) {
+    if (commentViewZones.length > 0) {
+      commentViewZones.forEach((commentId) => {
+        changeAccessor.removeZone(commentId.id);
+      });
+      commentViewZones = [];
+      heightMap = /* @__PURE__ */ new Map();
+    }
+  }
+  function renderViewZones(changeAccessor) {
+    if (comments.value && comments.value.length) {
+      const renderedComments = comments.value.filter((comment2) => comment2.isExpanded);
+      renderedComments.forEach((comment2) => {
+        const commentId = changeAccessor.addZone({
+          afterLineNumber: comment2.lineNumber,
+          heightInPx: comment2.heightInPx ? comment2.heightInPx : 0,
+          afterColumn: 1,
+          domNode: document.createElement("div"),
+          ondomNodeTop: (top) => {
+            layoutOverlayWidget(comment2.lineNumber, { top });
+          },
+          onComputedHeight: (height) => {
+            layoutOverlayWidget(comment2.lineNumber, { height });
+          }
+        });
+        commentViewZones.push({ lineNumber: comment2.lineNumber, id: commentId });
+      });
+    }
+  }
+  function layoutOverlayWidget(lineNumber, ...positionInfos) {
+    const index2 = comments.value.findIndex((comment2) => comment2.lineNumber === lineNumber);
+    const editorLayoutInfo = editor.getLayoutInfo();
+    const layoutInfo = calculateLayoutInfo(positionInfos, editorLayoutInfo, index2);
+    if (layoutInfo.height) {
+      heightMap.set(index2, layoutInfo.height);
+    }
+    comments.value[index2].domNode.style.width = `${editorLayoutInfo.width - layoutInfo.minimapWidth - layoutInfo.offsetLeft}px`;
+    handleDomNodePosition(layoutInfo.top, layoutInfo.height, index2);
+  }
+  function calculateLayoutInfo(positionInfos, editorLayoutInfo, index2) {
+    let _offsetLeft = 0;
+    const indexOffsetLeft = comments.value[index2].offserLeft;
+    if (indexOffsetLeft) {
+      _offsetLeft = indexOffsetLeft;
+    } else {
+      _offsetLeft = (offsetLeft == null ? void 0 : offsetLeft.value) ? offsetLeft == null ? void 0 : offsetLeft.value : 0;
+    }
+    return {
+      top: positionInfos[0].top,
+      height: positionInfos[0].height,
+      minimapWidth: editorLayoutInfo.minimap.minimapWidth,
+      offsetLeft: _offsetLeft
+    };
+  }
+  function handleDomNodePosition(top, hieght, index2) {
+    comments.value[index2].domNode.style.height = `${hieght}px`;
+    if (heightMap.get(index2) === 0) {
+      comments.value[index2].domNode.style.top = `-${1e4 + top}px`;
+    } else {
+      comments.value[index2].domNode.style.top = `${top}px`;
+    }
+  }
+  function refreshOverlayWidgets() {
+    if (editor) {
+      renderOverlayWidget();
+    }
+  }
+  function renderOverlayWidget() {
+    if (refreshAll.value) {
+      resetAllOverlayWidget();
+    } else {
+      resetOverlayWidget();
+    }
+    const renderedWidget = comments.value.filter((comment2) => comment2.isExpanded);
+    renderedWidget == null ? void 0 : renderedWidget.forEach((comment2) => {
+      const commentIndex = commentWidgets.findIndex((cw) => cw.lineNumber === comment2.lineNumber);
+      if (commentIndex === -1) {
+        const overlayWidget = buildOverlayWidget(comment2);
+        commentWidgets.push({ lineNumber: comment2.lineNumber, widget: overlayWidget });
+        editor.addOverlayWidget(overlayWidget);
+      }
+    });
+  }
+  function resetOverlayWidget() {
+    comments.value.forEach((comment2) => {
+      if (!comment2.isExpanded) {
+        const commentIndex = commentWidgets.findIndex((cw) => cw.lineNumber === comment2.lineNumber);
+        if (commentIndex !== -1) {
+          const commentRemoved = commentWidgets.splice(commentIndex, 1)[0];
+          editor.removeOverlayWidget(commentRemoved.widget);
+        }
+      }
+    });
+  }
+  function resetAllOverlayWidget() {
+    if (commentWidgets.length > 0) {
+      commentWidgets.forEach((widget) => {
+        editor.removeOverlayWidget(widget.widget);
+      });
+      commentWidgets = [];
+    }
+  }
+  function buildOverlayWidget(comment2) {
+    return {
+      getId: () => {
+        return `widget-lineNumber${comment2.lineNumber}`;
+      },
+      getDomNode: () => {
+        return comment2.domNode;
+      },
+      getPosition: () => {
+        return null;
+      }
+    };
+  }
+  return { editorEl };
+}
+var codeEditor = "";
+var CodeEditor = defineComponent({
+  name: "DCodeEditor",
+  props: codeEditorProps,
+  emits: ["update: modelValue", "afterEditorInit", "click"],
+  setup(props, ctx2) {
+    const {
+      editorEl
+    } = useCodeEditor(props, ctx2);
+    return () => createVNode("div", {
+      "ref": editorEl,
+      "class": "devui-code-editor"
+    }, null);
+  }
+});
+var CodeEditorInstall = {
+  title: "Code Editor \u4EE3\u7801\u7F16\u8F91\u5668",
+  category: "\u6570\u636E\u5F55\u5165",
+  status: "100%",
+  install(app) {
+    app.component(CodeEditor.name, CodeEditor);
+  }
+};
 const SELECT_TOKEN$1 = Symbol("dCollapse");
 const collapseProps = {
   modelValue: {
@@ -23888,7 +24331,7 @@ var MenuItem = defineComponent({
             useClick(e);
           }
           isSelect.value = true;
-          changeRouteResult = changeRoute(props, router, useRouter, key);
+          changeRouteResult = changeRoute(props, router, useRouter.value, key);
         } else {
           if (ele.classList.contains(menuItemSelect)) {
             rootMenuEmit("deselect", {
@@ -24384,7 +24827,8 @@ var Menu = defineComponent({
       openKeys,
       mode,
       collapsed,
-      defaultSelectKeys
+      defaultSelectKeys,
+      router
     } = toRefs(props);
     const menuId = randomId(16);
     const store = useStore(menuId);
@@ -24397,7 +24841,7 @@ var Menu = defineComponent({
     provide("mode", mode);
     provide("collapsedIndent", props["collapsedIndent"]);
     provide("rootMenuEmit", ctx2.emit);
-    provide("useRouter", props.router);
+    provide("useRouter", router);
     setDefaultIndent(props["indentSize"]);
     const menuRoot = ref(null);
     const overflowItemLength = ref(0);
@@ -25850,6 +26294,7 @@ function useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t) {
       handleClose();
       blur2();
     }
+    filterQuery.value = "";
   };
   const tagDelete = (data) => {
     let { modelValue } = props;
@@ -37206,6 +37651,11 @@ function useOperate() {
       }
       setNodeValue(parentNode, "expanded", true);
       setNodeValue(parentNode, "isLeaf", false);
+      let childrenLen = parentNode.childNodeCount;
+      if (!childrenLen) {
+        childrenLen = 0;
+        setNodeValue(parentNode, "childNodeCount", childrenLen + 1);
+      }
       if (lastChild) {
         setNodeValue(lastChild, "parentChildNodeCount", children.length + 1);
       }
@@ -38982,6 +39432,7 @@ const installs = [
   CarouselInstall,
   CascaderInstall,
   CheckboxInstall,
+  CodeEditorInstall,
   CollapseInstall,
   ColorPickerInstall,
   CommentInstall,
@@ -39049,9 +39500,9 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.5.3",
+  version: "1.5.4-alpha.0",
   install(app) {
     installs.forEach((p) => app.use(p));
   }
 };
-export { Accordion, Alert, Anchor, Aside, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, DButton as Button, ButtonGroup, Card, Carousel, CarouselItem, Cascader, Checkbox, CheckboxButton, DCheckboxGroup as CheckboxGroup, Col, Collapse, CollapseItem, ColorPicker, Column, Comment, Content, Countdown, DRangeDatePickerPro, DatePicker, DatePickerPro, DraggableDirective, Drawer, DrawerService, Dropdown$1 as Dropdown, DropdownMenu, DroppableDirective, EditableSelect, FixedOverlay, FlexibleOverlay, Footer$1 as Footer, Form, FormItem, FormOperation, Fullscreen, Gantt, Header$1 as Header, DIcon as Icon, IconGroup, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, List, ListItem, LoadingDirective, loading as LoadingService, Mention, Menu, MenuItem, Message, Modal, MultiAutoComplete, NavSprite, Notification, NotificationService, Option, OptionGroup, Pagination, Panel, PanelBody, PanelFooter, PanelHeader, Popover, Progress, QuadrantDiagram, Radio, RadioButton, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, SortableDirective, Splitter, Statistic, Status, Step, Steps, StepsGuide, StepsGuideDirective, StickSlider, Sticky, SubMenu, Switch, Tab, Table, Tabs, Tag, TagInput, Textarea, TimePicker, TimeSelect, Timeline, TimelineItem, Tooltip, Transfer, Tree, TreeSelect, Upload, VirtualList, vueDevui as default };
+export { Accordion, Alert, Anchor, Aside, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, BreadcrumbItem, DButton as Button, ButtonGroup, Card, Carousel, CarouselItem, Cascader, Checkbox, CheckboxButton, DCheckboxGroup as CheckboxGroup, CodeEditor, Col, Collapse, CollapseItem, ColorPicker, Column, Comment, Content, Countdown, DRangeDatePickerPro, DatePicker, DatePickerPro, DraggableDirective, Drawer, DrawerService, Dropdown$1 as Dropdown, DropdownMenu, DroppableDirective, EditableSelect, FixedOverlay, FlexibleOverlay, Footer$1 as Footer, Form, FormItem, FormOperation, Fullscreen, Gantt, Header$1 as Header, DIcon as Icon, IconGroup, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, List, ListItem, LoadingDirective, loading as LoadingService, Mention, Menu, MenuItem, Message, Modal, MultiAutoComplete, NavSprite, Notification, NotificationService, Option, OptionGroup, Pagination, Panel, PanelBody, PanelFooter, PanelHeader, Popover, Progress, QuadrantDiagram, Radio, RadioButton, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, SortableDirective, Splitter, Statistic, Status, Step, Steps, StepsGuide, StepsGuideDirective, StickSlider, Sticky, SubMenu, Switch, Tab, Table, Tabs, Tag, TagInput, Textarea, TimePicker, TimeSelect, Timeline, TimelineItem, Tooltip, Transfer, Tree, TreeSelect, Upload, VirtualList, vueDevui as default };