vue-devui 1.5.2 → 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: {
@@ -22571,10 +23014,10 @@ class ImagePreviewService {
     this.$body.style.setProperty("overflow", "hidden", "important");
   }
   static close() {
-    var _a;
+    var _a, _b;
     (_a = this.$body) == null ? void 0 : _a.style.setProperty("overflow", this.$overflow);
     this.$overflow = null;
-    this.$div && this.$body.removeChild(this.$div);
+    this.$div && ((_b = this.$body) == null ? void 0 : _b.removeChild(this.$div));
     this.$body = null;
     this.$div = null;
   }
@@ -22594,7 +23037,11 @@ function unmountedPreviewImages() {
   ImagePreviewService.close();
 }
 function getImgByEl(el) {
-  const urlList = [...el.querySelectorAll("img")].map((item) => item.getAttribute("src"));
+  const imgs = [...el.querySelectorAll("img")];
+  const urlList = imgs.map((item) => {
+    var _a;
+    return (_a = item.getAttribute("preview-src") || item.getAttribute("src")) != null ? _a : "";
+  });
   return urlList;
 }
 function handleImg(e) {
@@ -22605,6 +23052,9 @@ function handleImg(e) {
   if (((_a = target == null ? void 0 : target.nodeName) == null ? void 0 : _a.toLowerCase()) === "img") {
     const urlList = getImgByEl(el);
     const url2 = target.getAttribute("src");
+    if (!url2) {
+      return console.error("attribute is not exist");
+    }
     mountedPreviewImages({
       url: url2,
       previewUrlList: urlList,
@@ -22621,7 +23071,7 @@ function removeHandle(el) {
 }
 var ImagePreviewDirective = {
   mounted(el, binding) {
-    if (!binding.value) {
+    if (!(binding == null ? void 0 : binding.value)) {
       return handleImgByEl(el);
     }
     const { custom, disableDefault } = binding.value;
@@ -22647,9 +23097,9 @@ var ImagePreviewDirective = {
   },
   updated(el, binding) {
     var _a, _b;
-    el.zIndex = (_a = binding.value) == null ? void 0 : _a.zIndex;
-    el.backDropZIndex = (_b = binding.value) == null ? void 0 : _b.backDropZIndex;
-    if (binding.value) {
+    el.zIndex = (_a = binding == null ? void 0 : binding.value) == null ? void 0 : _a.zIndex;
+    el.backDropZIndex = (_b = binding == null ? void 0 : binding.value) == null ? void 0 : _b.backDropZIndex;
+    if (binding == null ? void 0 : binding.value) {
       const {
         value: { disableDefault },
         oldValue: { disableDefault: oldDisableDefault }
@@ -23881,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", {
@@ -24377,7 +24827,8 @@ var Menu = defineComponent({
       openKeys,
       mode,
       collapsed,
-      defaultSelectKeys
+      defaultSelectKeys,
+      router
     } = toRefs(props);
     const menuId = randomId(16);
     const store = useStore(menuId);
@@ -24390,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);
@@ -25060,6 +25511,12 @@ var Modal = defineComponent({
     watch(modelValue, (val) => {
       if (val && !keepLast.value) {
         clearPosition();
+        nextTick(() => {
+          const autofocus = document == null ? void 0 : document.querySelector("[autofocus]");
+          if (autofocus) {
+            autofocus.focus();
+          }
+        });
       }
     });
     const renderType = () => {
@@ -25837,6 +26294,7 @@ function useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t) {
       handleClose();
       blur2();
     }
+    filterQuery.value = "";
   };
   const tagDelete = (data) => {
     let { modelValue } = props;
@@ -37193,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);
       }
@@ -38969,6 +39432,7 @@ const installs = [
   CarouselInstall,
   CascaderInstall,
   CheckboxInstall,
+  CodeEditorInstall,
   CollapseInstall,
   ColorPickerInstall,
   CommentInstall,
@@ -39036,9 +39500,9 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.5.2",
+  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 };