refactor: bump vitepress docs to v1.2.3

packages/devui-vue/devui-cli/templates/vitepress-sidebar.js

@@ -14,8 +14,8 @@ const { isReadyToRelease } = require('../shared/utils');
 //   return { text, link: `/${SITES_COMPONENTS_DIR_NAME}/${kebabCase(name)}/`, status }
 // }
 
-function buildCategoryOptions(text, children = []) {
-  return { text, children };
+function buildCategoryOptions(text, items = []) {
+  return { text, items };
 }
 
 function generateZhMenus(componentsInfo) {
@@ -72,7 +72,7 @@ exports.createVitepressSidebarTemplates = (componentsInfo = []) => {
         },
         {
           "text": "Design Token",
-          "children": DESIGN_TOKENS_INFO
+          "items": DESIGN_TOKENS_INFO
         },
       ],
       handler: generateZhMenus,
@@ -94,7 +94,7 @@ exports.createVitepressSidebarTemplates = (componentsInfo = []) => {
         },
         {
           "text": "Design Token",
-          "children": DESIGN_TOKENS_INFO
+          "items": DESIGN_TOKENS_INFO
         },
       ],
       handler: generateEnMenus,

packages/devui-vue/devui/button/src/use-button.ts

@@ -2,7 +2,7 @@ import { computed, inject } from 'vue';
 import type { SetupContext } from 'vue';
 import { ButtonProps, UseButtonReturnType, buttonGroupInjectionKey } from './button-types';
 import { useNamespace } from '../../shared/hooks/use-namespace';
-import { isString } from 'lodash';
+import { isString } from 'lodash-es';
 
 export default function useButton(props: ButtonProps, ctx: SetupContext): UseButtonReturnType {
   const ns = useNamespace('button');

packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts

@@ -1,7 +1,7 @@
 /**
  * 处理cascader-item中需要的参数
  */
-import { cloneDeep } from 'lodash';
+import { cloneDeep } from 'lodash-es';
 import { ref, reactive, Ref } from 'vue';
 import { CascaderProps, UseCascaderItemCallback, CascaderItem } from '../src/cascader-types';
 

packages/devui-vue/devui/cascader/hooks/use-cascader.ts

@@ -1,5 +1,5 @@
 import { ref, SetupContext, toRef, reactive, Ref, watch, onMounted } from 'vue';
-import { cloneDeep } from 'lodash';
+import { cloneDeep } from 'lodash-es';
 import { initActiveIndexs, initSingleIptValue } from './use-cascader-single';
 import { initMultipleCascaderItem, initTagList, getMultiModelValues } from './use-cascader-multiple';
 import type { CascaderItem, CascaderValueType, CascaderProps, UseCascaderFn } from '../src/cascader-types';

packages/devui-vue/devui/cascader/hooks/use-filter.ts

@@ -1,4 +1,4 @@
-import { debounce, cloneDeep } from 'lodash';
+import { debounce, cloneDeep } from 'lodash-es';
 import { ref, SetupContext, UnwrapRef, Ref, watch } from 'vue';
 import { initActiveIndexs } from './use-cascader-single';
 import {

packages/devui-vue/devui/cascader/src/cascader.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, Transition, SetupContext, provide, Teleport, ref, computed } from 'vue';
-import { cloneDeep } from 'lodash';
+import { cloneDeep } from 'lodash-es';
 import { useNamespace } from '../../shared/hooks/use-namespace';
 import DCascaderList from '../components/cascader-list';
 import DMultipleBox from '../components/cascader-multiple/index';

packages/devui-vue/devui/category-search/src/composables/use-category-search.ts

@@ -1,6 +1,6 @@
 import { ref, computed, toRefs, provide, watch, onMounted, reactive } from 'vue';
 import type { Ref, SetupContext } from 'vue';
-import { mergeWith, cloneDeep, merge } from 'lodash';
+import { mergeWith, cloneDeep, merge } from 'lodash-es';
 import RadioMenu from '../components/radio-menu';
 import CheckboxMenu from '../components/checkbox-menu';
 import LabelMenu from '../components/label-menu';

packages/devui-vue/devui/code-editor/src/composables/use-code-editor.ts

@@ -1,5 +1,5 @@
 import { inBrowser } from '../../../shared/utils/common-var';
-import { throttle } from 'lodash';
+import { throttle } from 'lodash-es';
 import { onBeforeMount, onMounted, ref, SetupContext, toRefs, nextTick, watch } from 'vue';
 import { CodeEditorProps, Comment, Decoration, LayoutInfo, PositionInfo } from '../code-editor-types';
 

packages/devui-vue/devui/color-picker/src/color-picker.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, onMounted, watch, nextTick, provide, unref, readonly, Transition } from 'vue';
 import type { StyleValue, Ref } from 'vue';
 import { computePosition, flip } from '@floating-ui/dom';
-import { throttle } from 'lodash';
+import { throttle } from 'lodash-es';
 import { useReactive, colorPickerResize, isExhibitionColorPicker, changeColorValue } from './utils/composable';
 import { colorPickerProps, ColorPickerProps } from './color-picker-types';
 import colorPanel from './components/color-picker-panel/color-picker-panel';

packages/devui-vue/devui/color-picker/src/components/color-history/color-history.tsx

@@ -4,7 +4,7 @@ import { Icon } from '../../../../icon';
 import './color-history.scss';
 import { fromHexa } from '../../utils/color-utils';
 import { ProvideColorOptions, ColorPickerColor } from '../../utils/color-utils-types';
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
 
 const STORAGE_KEY = 'STORAGE_COLOR_PICKER_HISTORY_KEY';
 const MAX_HISTORY_COUNT = 8;

packages/devui-vue/devui/data-grid/src/composables/use-data-grid-scroll.ts

@@ -1,6 +1,6 @@
 import { ref, onMounted, inject } from 'vue';
 import type { Ref } from 'vue';
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
 import { DataGridInjectionKey } from '../data-grid-types';
 import type { InnerColumnConfig, InnerRowData, DataGridContext, ScrollYParams, ScrollXParams } from '../data-grid-types';
 import { getXStartOrEndIndex, getYStartIndex } from '../utils';

packages/devui-vue/devui/data-grid/src/composables/use-data-grid-tree.ts

@@ -1,6 +1,6 @@
 import { ref, toRefs } from 'vue';
 import type { SetupContext } from 'vue';
-import { isFunction } from 'lodash';
+import { isFunction } from 'lodash-es';
 import type { DataGridProps, InnerRowData, RowData, IExpandLoadMoreResult } from '../data-grid-types';
 import { generateInnerData } from '../utils';
 

packages/devui-vue/devui/data-grid/src/composables/use-overflow-tooltip.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue';
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
 import type { Placement } from '../../../overlay';
 import type { InnerColumnConfig } from '../data-grid-types';
 

packages/devui-vue/devui/data-grid/src/utils.ts

@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
 import type { Ref } from 'vue';
-import { isFunction } from 'lodash';
+import { isFunction } from 'lodash-es';
 import type { RowData, InnerRowData, RowKey, InnerColumnConfig, ColumnConfig } from './data-grid-types';
 import { ColumnMinWidth } from './const';
 

packages/devui-vue/devui/date-picker-pro/src/composables/use-calendar-panel.ts

@@ -4,7 +4,7 @@ import { DAY_DURATION, calendarItemHeight } from '../const';
 import { CalendarDateItem, YearAndMonthItem, UseCalendarPanelReturnType, DatePickerProPanelProps } from '../date-picker-pro-types';
 import dayjs from 'dayjs';
 import type { Dayjs } from 'dayjs';
-import { throttle } from 'lodash';
+import { throttle } from 'lodash-es';
 import useCalendarSelected from './use-calendar-selected';
 
 export default function useCalendarPanel(props: DatePickerProPanelProps, ctx: SetupContext): UseCalendarPanelReturnType {

packages/devui-vue/devui/date-picker-pro/src/composables/use-month-calendar-panel.ts

@@ -3,7 +3,7 @@ import type { SetupContext } from 'vue';
 import { useNamespace } from '../../../shared/hooks/use-namespace';
 import { monthCalendarItemHeight } from '../const';
 import { DatePickerProPanelProps, YearAndMonthItem, UseMonthCalendarPanelReturnType } from '../date-picker-pro-types';
-import { throttle } from 'lodash';
+import { throttle } from 'lodash-es';
 import dayjs from 'dayjs';
 import type { Dayjs } from 'dayjs';
 import useCalendarSelected from './use-calendar-selected';

packages/devui-vue/devui/date-picker-pro/src/composables/use-year-calendar-panel.ts

@@ -1,6 +1,6 @@
 import { ref, onBeforeMount, nextTick, watch } from 'vue';
 import type { SetupContext } from 'vue';
-import { chunk } from 'lodash';
+import { chunk } from 'lodash-es';
 import { useNamespace } from '../../../shared/hooks/use-namespace';
 import { DatePickerProPanelProps, UseYearCalendarPanelReturnType } from '../date-picker-pro-types';
 import dayjs from 'dayjs';

packages/devui-vue/devui/echarts/src/echarts.tsx

@@ -1,9 +1,7 @@
-import { defineComponent, onMounted, onUnmounted, ref } from "vue";
-import { DevuiChartProps, devuiChartProps } from "./echarts-types";
-import * as echarts from 'echarts';
-import { DEVUI_ECHART_THEME } from "./echarts-theme";
-import { toRefs } from "@vueuse/core";
-
+import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+import { DevuiChartProps, devuiChartProps } from './echarts-types';
+import { DEVUI_ECHART_THEME } from './echarts-theme';
+import { toRefs } from '@vueuse/core';
 
 export default defineComponent({
   name: 'DChart',
@@ -19,6 +17,12 @@ export default defineComponent({
 
     const chartRef = ref();
 
+    // dynamic import echarts
+    let echarts: unknown;
+    if (typeof window !== 'undefined') {
+      echarts = import('echarts');
+    }
+
     const themeChange = () => {
       isDark = !!themeService?.currentTheme?.isDark;
       theme = isDark ? DEVUI_ECHART_THEME.defaultDarkTheme : DEVUI_ECHART_THEME.defaultLightTheme;
@@ -44,7 +48,7 @@ export default defineComponent({
       theme = isDark ? DEVUI_ECHART_THEME.defaultDarkTheme : DEVUI_ECHART_THEME.defaultLightTheme;
       echartInstacne = echarts.init(chartRef.value, theme);
 
-      if(themeService) {
+      if (themeService) {
         themeService.eventBus.add('themeChanged', themeChange);
       }
 
@@ -56,14 +60,12 @@ export default defineComponent({
 
     onUnmounted(() => {
       echartInstacne?.dispatchAction({
-        type: 'hideTip'
+        type: 'hideTip',
       });
 
       themeService.eventBus.remove('themeChanged', themeChange);
     });
 
-    return () => (
-      <div ref={chartRef} class="devui-charts"></div>
-    );
-  }
+    return () => <div ref={chartRef} class="devui-charts"></div>;
+  },
 });

packages/devui-vue/devui/editable-select/src/components/dropdown/dropdown.tsx

@@ -4,7 +4,7 @@ import { EditableSelectContext, Option as O, SELECT_KEY } from '../../editable-s
 import Option from '../option/option';
 import Loading from '../../../../loading/src/loading-directive';
 import { useNamespace } from '../../../../shared/hooks/use-namespace';
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
 
 export default defineComponent({
   name: 'DEditableSelectDropdown',

packages/devui-vue/devui/editable-select/src/composables/use-input-event.ts

@@ -1,5 +1,5 @@
 import { computed, Ref, SetupContext } from 'vue';
-import { debounce, isFunction } from 'lodash';
+import { debounce, isFunction } from 'lodash-es';
 import { EditableSelectProps } from '../editable-select-types';
 import { States } from './use-select';
 

packages/devui-vue/devui/editable-select/src/composables/use-select.ts

@@ -1,7 +1,7 @@
 import { computed, ComputedRef, getCurrentInstance, nextTick, onMounted, reactive, ref, Ref, SetupContext, watch } from 'vue';
 import { EditableSelectProps, Option, Options } from '../editable-select-types';
 import { createI18nTranslate } from '../../../locale/create';
-import { isFunction, isNil } from 'lodash';
+import { isFunction, isNil } from 'lodash-es';
 
 export interface UseSelectStatesReturnType {
   hoveringIndex: number;

packages/devui-vue/devui/editor-md/src/composables/md-render-service.ts

@@ -1,10 +1,12 @@
 import hljs from 'highlight.js';
 import MarkdownIt from 'markdown-it';
-import { filterXSS, getDefaultCSSWhiteList, getDefaultWhiteList, IWhiteList } from 'xss';
+import pkg from 'xss';
 import { mermaidRender, refreshMermaid } from '../plugins/mermaid';
 import tocAndAnchor from '../plugins/toc';
 import type { MdPlugin, ICustomXssRule, ICustomRenderRule } from '../editor-md-types';
 
+const { filterXSS, getDefaultWhiteList, getDefaultCSSWhiteList, IWhiteList } = pkg;
+
 export class MDRenderService {
   private xssWhiteList = getDefaultWhiteList();
   private cssWhiteList = getDefaultCSSWhiteList();
@@ -19,7 +21,7 @@ export class MDRenderService {
       }
       return '';
     },
-  }) as any;
+  });
   private baseUrl = '';
   private breaks = true;
   private renderParse: Function | undefined;
@@ -50,27 +52,27 @@ export class MDRenderService {
     this.xssWhiteList['td'] = ['style'];
   }
 
-  setBaseUrl(url: string) {
+  setBaseUrl(url: string): void {
     this.baseUrl = url;
   }
 
-  setBreaks(breaks: boolean) {
+  setBreaks(breaks: boolean): void {
     this.breaks = breaks;
   }
 
-  setRenderParse(func: Function) {
+  setRenderParse(func: Function): void {
     this.renderParse = func;
   }
 
-  getXssWhiteList() {
+  getXssWhiteList(): IWhiteList {
     return this.xssWhiteList;
   }
 
-  setXssWhiteList(list: IWhiteList) {
+  setXssWhiteList(list: IWhiteList): void {
     this.xssWhiteList = list;
   }
 
-  setCustomXssRules(rules: ICustomXssRule[]) {
+  setCustomXssRules(rules: ICustomXssRule[]): void {
     if (rules) {
       rules.forEach((rule) => {
         if (rule['value'] === null) {
@@ -82,19 +84,19 @@ export class MDRenderService {
     }
   }
 
-  setCustomRendererRules(rules: ICustomRenderRule[]) {
+  setCustomRendererRules(rules: ICustomRenderRule[]): void {
     if (rules) {
       rules.forEach((rule) => {
         this.mdt.renderer.rules[rule['key']] = rule['value'];
       });
     }
   }
 
-  setOptions(options = {}) {
+  setOptions(options = {}): void {
     this.mdt.set(options);
   }
 
-  setPlugins(plugins: Array<MdPlugin>) {
+  setPlugins(plugins: Array<MdPlugin>): void {
     plugins.forEach((item) => {
       const { plugin, opts } = item;
       this.mdt.use(plugin, opts);
@@ -125,7 +127,7 @@ export class MDRenderService {
     });
   }
 
-  generateHTML(text: string) {
+  generateHTML(text: string): string {
     this.mdt.set({
       breaks: this.breaks,
     });
@@ -156,7 +158,7 @@ export class MDRenderService {
     return this.replaceInternalUrl(html);
   }
 
-  public setRules(mdRules: Record<string, any>): void {
+  public setRules(mdRules: Record<string, unknown>): void {
     if (mdRules) {
       Object.keys(mdRules).forEach((rule) => {
         this.mdt[rule].set(mdRules[rule]);

packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts

@@ -1,11 +1,10 @@
-import cloneDeep from 'lodash/cloneDeep';
+import { throttle, cloneDeep }from 'lodash-es';
 import { computed, nextTick, onMounted, reactive, Ref, ref, SetupContext, toRefs, watch, onBeforeUnmount } from 'vue';
 import { debounce } from '../../../shared/utils';
 import { EditorMdProps, Mode } from '../editor-md-types';
 import { DEFAULT_TOOLBARS } from '../toolbar-config';
 import { parseHTMLStringToDomList } from '../utils';
 import { refreshEditorCursor, _enforceMaxLength } from './helper';
-import { throttle } from 'lodash';
 
 export function useEditorMd(props: EditorMdProps, ctx: SetupContext) {
   const {

packages/devui-vue/devui/editor-md/src/plugins/checkbox.ts

@@ -1,4 +1,4 @@
-import { extend } from 'lodash';
+import { extend } from 'lodash-es';
 
 const checkboxReplace = function (md: any, options: any) {
   let lastId: number;

packages/devui-vue/devui/editor-md/src/plugins/toc.ts

@@ -1,4 +1,4 @@
-import cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep }from 'lodash-es';
 import Token from 'markdown-it/lib/token';
 
 const TOC = '[toc]';

packages/devui-vue/devui/form/src/components/form-item/use-form-item.ts

@@ -1,5 +1,5 @@
 import { computed, inject, nextTick, onMounted, ref } from 'vue';
-import { castArray, get, isFunction, clone, isEqual, set } from 'lodash';
+import { castArray, get, isFunction, clone, isEqual, set } from 'lodash-es';
 import Schema from 'async-validator';
 import type { ComputedRef, Ref } from 'vue';
 import type { RuleItem } from 'async-validator';

packages/devui-vue/devui/form/src/composables/use-form-validation.ts

@@ -1,4 +1,4 @@
-import { castArray } from 'lodash';
+import { castArray } from 'lodash-es';
 import type { ValidateFieldsError } from 'async-validator';
 import { UseFormValidation } from '../form-types';
 import { FormItemContext, FormValidateCallback, FormValidateResult } from '../components/form-item/form-item-types';

packages/devui-vue/devui/git-graph/src/git-graph-class.ts

@@ -1,4 +1,4 @@
-import { cloneDeep } from "lodash";
+import { cloneDeep } from "lodash-es";
 import { CommitInfo, GitGraphData } from "./git-graph-types";
 
 export class GitGraph {

packages/devui-vue/devui/mention/src/mention.tsx

@@ -4,7 +4,7 @@ import DTextarea from '../../textarea/src/textarea';
 import DIcon from '../../icon/src/icon';
 import './mention.scss';
 import { useNamespace } from '../../shared/hooks/use-namespace';
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
 
 export default defineComponent({
   name: 'DMention',

packages/devui-vue/devui/popover/src/use-popover.ts

@@ -1,6 +1,6 @@
 import { toRefs, ref, computed, watch, onUnmounted, onMounted } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
 import { PopoverProps, UsePopoverEvent } from './popover-types';
 
 const TransformOriginMap: Record<string, string> = {