diff --git a/packages/devui-vue/devui-cli/templates/vitepress-sidebar.js b/packages/devui-vue/devui-cli/templates/vitepress-sidebar.js
index 28ba17c133..be789daf6c 100644
--- a/packages/devui-vue/devui-cli/templates/vitepress-sidebar.js
+++ b/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,
diff --git a/packages/devui-vue/devui/button/src/use-button.ts b/packages/devui-vue/devui/button/src/use-button.ts
index e3d53c1dc7..b3066eb127 100644
--- a/packages/devui-vue/devui/button/src/use-button.ts
+++ b/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');
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
index 199efa45ba..340bd1487a 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
+++ b/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';
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader.ts
index c689daa6eb..4fcc4d8984 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader.ts
+++ b/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';
diff --git a/packages/devui-vue/devui/cascader/hooks/use-filter.ts b/packages/devui-vue/devui/cascader/hooks/use-filter.ts
index 8c789898f4..21eede8ff0 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-filter.ts
+++ b/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 {
diff --git a/packages/devui-vue/devui/cascader/src/cascader.tsx b/packages/devui-vue/devui/cascader/src/cascader.tsx
index 9992a17029..0004d007ff 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.tsx
+++ b/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';
diff --git a/packages/devui-vue/devui/category-search/src/composables/use-category-search.ts b/packages/devui-vue/devui/category-search/src/composables/use-category-search.ts
index 52431aca34..0577414f55 100644
--- a/packages/devui-vue/devui/category-search/src/composables/use-category-search.ts
+++ b/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';
diff --git a/packages/devui-vue/devui/code-editor/src/composables/use-code-editor.ts b/packages/devui-vue/devui/code-editor/src/composables/use-code-editor.ts
index 977cb57ae2..568a9682b4 100644
--- a/packages/devui-vue/devui/code-editor/src/composables/use-code-editor.ts
+++ b/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';
diff --git a/packages/devui-vue/devui/color-picker/src/color-picker.tsx b/packages/devui-vue/devui/color-picker/src/color-picker.tsx
index 4bf9de0d99..4bce7cfcb1 100644
--- a/packages/devui-vue/devui/color-picker/src/color-picker.tsx
+++ b/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';
diff --git a/packages/devui-vue/devui/color-picker/src/components/color-history/color-history.tsx b/packages/devui-vue/devui/color-picker/src/components/color-history/color-history.tsx
index c76eb810f8..ffe92c610d 100644
--- a/packages/devui-vue/devui/color-picker/src/components/color-history/color-history.tsx
+++ b/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;
diff --git a/packages/devui-vue/devui/data-grid/src/composables/use-data-grid-scroll.ts b/packages/devui-vue/devui/data-grid/src/composables/use-data-grid-scroll.ts
index 7d1c3588b8..c5f31e174d 100644
--- a/packages/devui-vue/devui/data-grid/src/composables/use-data-grid-scroll.ts
+++ b/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';
diff --git a/packages/devui-vue/devui/data-grid/src/composables/use-data-grid-tree.ts b/packages/devui-vue/devui/data-grid/src/composables/use-data-grid-tree.ts
index bdd124fa88..01b6efd348 100644
--- a/packages/devui-vue/devui/data-grid/src/composables/use-data-grid-tree.ts
+++ b/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';
diff --git a/packages/devui-vue/devui/data-grid/src/composables/use-overflow-tooltip.ts b/packages/devui-vue/devui/data-grid/src/composables/use-overflow-tooltip.ts
index b61198f057..8a08b3f96d 100644
--- a/packages/devui-vue/devui/data-grid/src/composables/use-overflow-tooltip.ts
+++ b/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';
diff --git a/packages/devui-vue/devui/data-grid/src/utils.ts b/packages/devui-vue/devui/data-grid/src/utils.ts
index e7947f7f77..ba94a13dc3 100644
--- a/packages/devui-vue/devui/data-grid/src/utils.ts
+++ b/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';
diff --git a/packages/devui-vue/devui/date-picker-pro/src/composables/use-calendar-panel.ts b/packages/devui-vue/devui/date-picker-pro/src/composables/use-calendar-panel.ts
index a68bd21e4e..72dac6bbd3 100644
--- a/packages/devui-vue/devui/date-picker-pro/src/composables/use-calendar-panel.ts
+++ b/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 {
diff --git a/packages/devui-vue/devui/date-picker-pro/src/composables/use-month-calendar-panel.ts b/packages/devui-vue/devui/date-picker-pro/src/composables/use-month-calendar-panel.ts
index dfe333200c..b8d08d5c27 100644
--- a/packages/devui-vue/devui/date-picker-pro/src/composables/use-month-calendar-panel.ts
+++ b/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';
diff --git a/packages/devui-vue/devui/date-picker-pro/src/composables/use-year-calendar-panel.ts b/packages/devui-vue/devui/date-picker-pro/src/composables/use-year-calendar-panel.ts
index e86a94ac0f..c5f226586d 100644
--- a/packages/devui-vue/devui/date-picker-pro/src/composables/use-year-calendar-panel.ts
+++ b/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';
diff --git a/packages/devui-vue/devui/echarts/src/echarts.tsx b/packages/devui-vue/devui/echarts/src/echarts.tsx
index 5b2465925d..324ef66f39 100644
--- a/packages/devui-vue/devui/echarts/src/echarts.tsx
+++ b/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 () => (
-
- );
- }
+ return () => ;
+ },
});
diff --git a/packages/devui-vue/devui/editable-select/src/components/dropdown/dropdown.tsx b/packages/devui-vue/devui/editable-select/src/components/dropdown/dropdown.tsx
index df31fca66e..2b1d757c87 100644
--- a/packages/devui-vue/devui/editable-select/src/components/dropdown/dropdown.tsx
+++ b/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',
diff --git a/packages/devui-vue/devui/editable-select/src/composables/use-input-event.ts b/packages/devui-vue/devui/editable-select/src/composables/use-input-event.ts
index 9e80e4f056..04d3442358 100644
--- a/packages/devui-vue/devui/editable-select/src/composables/use-input-event.ts
+++ b/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';
diff --git a/packages/devui-vue/devui/editable-select/src/composables/use-select.ts b/packages/devui-vue/devui/editable-select/src/composables/use-select.ts
index 6b7f9969da..c64b61e3f0 100644
--- a/packages/devui-vue/devui/editable-select/src/composables/use-select.ts
+++ b/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;
diff --git a/packages/devui-vue/devui/editor-md/src/composables/md-render-service.ts b/packages/devui-vue/devui/editor-md/src/composables/md-render-service.ts
index e3e3a688da..31e58de881 100644
--- a/packages/devui-vue/devui/editor-md/src/composables/md-render-service.ts
+++ b/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,7 +84,7 @@ export class MDRenderService {
}
}
- setCustomRendererRules(rules: ICustomRenderRule[]) {
+ setCustomRendererRules(rules: ICustomRenderRule[]): void {
if (rules) {
rules.forEach((rule) => {
this.mdt.renderer.rules[rule['key']] = rule['value'];
@@ -90,11 +92,11 @@ export class MDRenderService {
}
}
- setOptions(options = {}) {
+ setOptions(options = {}): void {
this.mdt.set(options);
}
- setPlugins(plugins: Array) {
+ setPlugins(plugins: Array): 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): void {
+ public setRules(mdRules: Record): void {
if (mdRules) {
Object.keys(mdRules).forEach((rule) => {
this.mdt[rule].set(mdRules[rule]);
diff --git a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts
index 65d0c0a00e..a7ecd87342 100644
--- a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts
+++ b/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 {
diff --git a/packages/devui-vue/devui/editor-md/src/plugins/checkbox.ts b/packages/devui-vue/devui/editor-md/src/plugins/checkbox.ts
index 83b62c9207..018c556845 100644
--- a/packages/devui-vue/devui/editor-md/src/plugins/checkbox.ts
+++ b/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;
diff --git a/packages/devui-vue/devui/editor-md/src/plugins/toc.ts b/packages/devui-vue/devui/editor-md/src/plugins/toc.ts
index 19a8cbdb3b..d9da947334 100644
--- a/packages/devui-vue/devui/editor-md/src/plugins/toc.ts
+++ b/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]';
diff --git a/packages/devui-vue/devui/form/src/components/form-item/use-form-item.ts b/packages/devui-vue/devui/form/src/components/form-item/use-form-item.ts
index 69403c4424..5bd51a2096 100644
--- a/packages/devui-vue/devui/form/src/components/form-item/use-form-item.ts
+++ b/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';
diff --git a/packages/devui-vue/devui/form/src/composables/use-form-validation.ts b/packages/devui-vue/devui/form/src/composables/use-form-validation.ts
index 3876f7e6a5..d3e4178b94 100644
--- a/packages/devui-vue/devui/form/src/composables/use-form-validation.ts
+++ b/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';
diff --git a/packages/devui-vue/devui/git-graph/src/git-graph-class.ts b/packages/devui-vue/devui/git-graph/src/git-graph-class.ts
index c620811109..1506b6209a 100644
--- a/packages/devui-vue/devui/git-graph/src/git-graph-class.ts
+++ b/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 {
diff --git a/packages/devui-vue/devui/mention/src/mention.tsx b/packages/devui-vue/devui/mention/src/mention.tsx
index 9b96511ca3..de5aa717a2 100644
--- a/packages/devui-vue/devui/mention/src/mention.tsx
+++ b/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',
diff --git a/packages/devui-vue/devui/popover/src/use-popover.ts b/packages/devui-vue/devui/popover/src/use-popover.ts
index 16face2c76..9a8d0f47c8 100644
--- a/packages/devui-vue/devui/popover/src/use-popover.ts
+++ b/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 = {
diff --git a/packages/devui-vue/devui/quadrant-diagram/src/components/axis/index.tsx b/packages/devui-vue/devui/quadrant-diagram/src/components/axis/index.tsx
index 7a686ba11c..d580518a2a 100644
--- a/packages/devui-vue/devui/quadrant-diagram/src/components/axis/index.tsx
+++ b/packages/devui-vue/devui/quadrant-diagram/src/components/axis/index.tsx
@@ -2,7 +2,7 @@ import { defineComponent, toRefs, onMounted, reactive, ref, watch } from 'vue';
import { IAxisConfigs, IViewConfigs } from '../../../type';
import { AXIS_TITLE_SPACE } from '../../../config';
import { quadrantDiagramAxisProps, QuadrantDiagramAxisProps } from './types';
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
import './index.scss';
diff --git a/packages/devui-vue/devui/search/src/composables/use-search-keydown.ts b/packages/devui-vue/devui/search/src/composables/use-search-keydown.ts
index 220f65693e..684350795d 100644
--- a/packages/devui-vue/devui/search/src/composables/use-search-keydown.ts
+++ b/packages/devui-vue/devui/search/src/composables/use-search-keydown.ts
@@ -3,7 +3,7 @@
*/
import { SetupContext, Ref } from 'vue';
import { KeydownReturnTypes, SearchProps } from '../search-types';
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
type EmitProps = 'update:modelValue' | 'search';
diff --git a/packages/devui-vue/devui/select/src/composables/use-select-content.ts b/packages/devui-vue/devui/select/src/composables/use-select-content.ts
index 7936c16c55..03df4044e5 100644
--- a/packages/devui-vue/devui/select/src/composables/use-select-content.ts
+++ b/packages/devui-vue/devui/select/src/composables/use-select-content.ts
@@ -4,7 +4,7 @@ import { FORM_ITEM_TOKEN } from '../../../form';
import { OptionObjectItem } from '../select-types';
import { useNamespace } from '../../../shared/hooks/use-namespace';
import { className } from '../utils';
-import { isFunction } from 'lodash';
+import { isFunction } from 'lodash-es';
import { createI18nTranslate } from '../../../locale/create';
export default function useSelectContent() {
diff --git a/packages/devui-vue/devui/select/src/use-select.ts b/packages/devui-vue/devui/select/src/use-select.ts
index b9c72aedb3..652abc6182 100644
--- a/packages/devui-vue/devui/select/src/use-select.ts
+++ b/packages/devui-vue/devui/select/src/use-select.ts
@@ -4,7 +4,7 @@ import { SelectProps, OptionObjectItem } from './select-types';
import { className, KeyType } from './utils';
import { useNamespace } from '../../shared/hooks/use-namespace';
import { onClickOutside } from '@vueuse/core';
-import { isFunction, debounce } from 'lodash';
+import { isFunction, debounce } from 'lodash-es';
import { FORM_ITEM_TOKEN, FORM_TOKEN } from '../../form';
export default function useSelect(
diff --git a/packages/devui-vue/devui/textarea/src/composables/use-textarea-autosize.ts b/packages/devui-vue/devui/textarea/src/composables/use-textarea-autosize.ts
index 583a31ec46..3c39ff1e29 100644
--- a/packages/devui-vue/devui/textarea/src/composables/use-textarea-autosize.ts
+++ b/packages/devui-vue/devui/textarea/src/composables/use-textarea-autosize.ts
@@ -1,7 +1,7 @@
import { computed, ShallowRef, shallowRef } from 'vue';
import { TextareaProps, UseTextareaAutosize } from '../textarea-types';
import type { StyleValue } from 'vue';
-import { isObject } from 'lodash';
+import { isObject } from 'lodash-es';
import { computeTextareaHeight } from '../utils';
export function useTextareaAutosize(props: TextareaProps, textarea: ShallowRef): UseTextareaAutosize {
diff --git a/packages/devui-vue/devui/textarea/src/utils.ts b/packages/devui-vue/devui/textarea/src/utils.ts
index 9f37e03a11..d684d39e59 100644
--- a/packages/devui-vue/devui/textarea/src/utils.ts
+++ b/packages/devui-vue/devui/textarea/src/utils.ts
@@ -1,4 +1,4 @@
-import { isNumber } from 'lodash';
+import { isNumber } from 'lodash-es';
let tempTextarea: HTMLTextAreaElement | undefined = undefined;
diff --git a/packages/devui-vue/devui/tooltip/src/use-tooltip.ts b/packages/devui-vue/devui/tooltip/src/use-tooltip.ts
index 1b97c5d66f..d62f3e670e 100644
--- a/packages/devui-vue/devui/tooltip/src/use-tooltip.ts
+++ b/packages/devui-vue/devui/tooltip/src/use-tooltip.ts
@@ -1,6 +1,6 @@
import { onMounted, ref, toRefs, computed, watch } from 'vue';
import type { Ref } from 'vue';
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
import { TooltipProps, BasePlacement, UseTooltipFn } from './tooltip-types';
export const transformOriginMap: Record = {
diff --git a/packages/devui-vue/devui/tree/src/composables/use-dragdrop.ts b/packages/devui-vue/devui/tree/src/composables/use-dragdrop.ts
index d4ff239063..22d28ef9d5 100644
--- a/packages/devui-vue/devui/tree/src/composables/use-dragdrop.ts
+++ b/packages/devui-vue/devui/tree/src/composables/use-dragdrop.ts
@@ -2,7 +2,7 @@ import { reactive, computed } from 'vue';
import type { Ref } from 'vue';
import type { TreeProps } from '../tree-types';
import type { DragState, IUseDraggable, IDropNode, IInnerTreeNode, ITreeNode, IDropType } from './use-tree-types';
-import cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep }from 'lodash-es';
import { useNamespace } from '../../../shared/hooks/use-namespace';
import { formatBasicTree } from '../utils';
const ns = useNamespace('tree');
diff --git a/packages/devui-vue/devui/tree/src/composables/use-search-filter.ts b/packages/devui-vue/devui/tree/src/composables/use-search-filter.ts
index b835830a89..d05d867a07 100644
--- a/packages/devui-vue/devui/tree/src/composables/use-search-filter.ts
+++ b/packages/devui-vue/devui/tree/src/composables/use-search-filter.ts
@@ -1,6 +1,6 @@
import { Ref, ref } from 'vue';
import { IInnerTreeNode, IUseCore, IUseSearchFilter, SearchFilterOption } from './use-tree-types';
-import { trim } from 'lodash';
+import { trim } from 'lodash-es';
export function useSearchFilter() {
return function useSearchFilterFn(data: Ref, core: IUseCore): IUseSearchFilter {
const { clearNodeMap, getExpendedTree } = core;
diff --git a/packages/devui-vue/docs/.vitepress/.gitignore b/packages/devui-vue/docs/.vitepress/.gitignore
new file mode 100644
index 0000000000..e3990ffb70
--- /dev/null
+++ b/packages/devui-vue/docs/.vitepress/.gitignore
@@ -0,0 +1,2 @@
+cache
+.temp
\ No newline at end of file
diff --git a/packages/devui-vue/docs/.vitepress/config.js b/packages/devui-vue/docs/.vitepress/config.js
deleted file mode 100644
index 1fe86bc36a..0000000000
--- a/packages/devui-vue/docs/.vitepress/config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-require('esbuild-register')
-
-const config = require('./config/index.ts')
-module.exports = config.default
\ No newline at end of file
diff --git a/packages/devui-vue/docs/.vitepress/config.mts b/packages/devui-vue/docs/.vitepress/config.mts
new file mode 100644
index 0000000000..89bddc7500
--- /dev/null
+++ b/packages/devui-vue/docs/.vitepress/config.mts
@@ -0,0 +1,57 @@
+import { defineConfig } from 'vitepress';
+import head from './config/head';
+import nav from './config/nav';
+import sidebar from './config/sidebar';
+import { demoblockPlugin, demoblockVitePlugin } from 'vitepress-theme-demoblock';
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+ title: 'Vue DevUI',
+ description: 'Vue DevUI 组件库',
+
+ head,
+ markdown: {
+ headers: true,
+ config: (md) => {
+ md.use(demoblockPlugin as any);
+ },
+ },
+ vite: {
+ plugins: [demoblockVitePlugin() as any],
+ },
+
+ locales: {
+ root: {
+ label: '简体中文',
+ lang: 'zh-CN',
+ },
+ en: {
+ label: 'English',
+ lang: 'en-US',
+ link: '/en-US/',
+ },
+ },
+
+ themeConfig: {
+ // https://vitepress.dev/reference/default-theme-config
+ nav,
+ sidebar,
+
+ logo: '../../assets/logo.svg',
+
+ algolia: {
+ appId: 'HOQD3NUZNM',
+ apiKey: '07456b4a262e8c84eb892088e5cc3791',
+ indexName: 'vue-devui',
+ },
+
+ socialLinks: [{ icon: 'github', link: 'https://github.com/DevCloudFE/vue-devui' }],
+
+ footer: {
+ message: 'MIT Licensed',
+ copyright: 'Copyright © 2021-present DevCloudFE',
+ },
+ },
+
+ ignoreDeadLinks: 'localhostLinks',
+});
diff --git a/packages/devui-vue/docs/.vitepress/config/index.ts b/packages/devui-vue/docs/.vitepress/config/index.ts
deleted file mode 100644
index 851b8b4c56..0000000000
--- a/packages/devui-vue/docs/.vitepress/config/index.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { defineConfig } from 'vitepress'
-import sidebar from './sidebar'
-import head from './head'
-import nav from './nav'
-import markdown from './markdown'
-import lang from './lang'
-
-const config = defineConfig({
- title: 'Vue DevUI',
- description: 'Vue DevUI 组件库',
- head,
- markdown,
- locales: {
- '/': {
- lang: 'zh-CN',
- label: '简体中文'
- },
- '/en-US': {
- lang: 'en-US',
- label: 'English'
- }
- },
- themeConfig: {
- sidebar,
- nav,
- demoblock: lang,
- logo: '../../assets/logo.svg',
- locales: {
- '/': {
- lang: 'zh-CN',
- label: '简体中文'
- },
- '/en-US': {
- lang: 'en-US',
- label: 'English'
- }
- },
- algolia: {
- appId: 'HOQD3NUZNM',
- apiKey: '07456b4a262e8c84eb892088e5cc3791',
- indexName: 'vue-devui'
- }
- }
-})
-
-export default config
diff --git a/packages/devui-vue/docs/.vitepress/config/lang.ts b/packages/devui-vue/docs/.vitepress/config/lang.ts
deleted file mode 100644
index 8280942417..0000000000
--- a/packages/devui-vue/docs/.vitepress/config/lang.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-const lang = {
- '/': {
- 'hide-text': '隐藏代码',
- 'show-text': '显示代码',
- 'copy-button-text': '复制代码片段',
- 'copy-success-text': '复制成功',
- },
- '/en-US': {
- 'hide-text': 'Hide',
- 'show-text': 'Expand',
- 'copy-button-text': 'Copy',
- 'copy-success-text': 'Copy Success',
- },
-};
-
-export default lang;
diff --git a/packages/devui-vue/docs/.vitepress/config/markdown.ts b/packages/devui-vue/docs/.vitepress/config/markdown.ts
deleted file mode 100644
index 476f03037c..0000000000
--- a/packages/devui-vue/docs/.vitepress/config/markdown.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-const options = { cssPreprocessor: 'scss' };
-import { blockPlugin } from '../plugins/block-plugin';
-import { renderPlugin, codePlugin } from 'vitepress-theme-demoblock';
-
-const markdown = {
- config: (md) => {
- md.use((curMd) => {
- curMd.use(blockPlugin, options);
- curMd.use(codePlugin, options);
- curMd.use(renderPlugin, options);
- });
- }
-}
-export default markdown;
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue b/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue
index 63d0d01869..42c0902a8d 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue
@@ -10,16 +10,15 @@ import HomeFooter from './components/HomeFooter.vue';
import DevuiFooter from './components/DevuiFooter.vue';
import { CONTRIBUTORS_MAP } from './components/PageContributorConfig';
import PageContributor from './components/PageContributor.vue';
+// @ts-ignore - @devui/button sometimes unable to resolve by editor
import { Button } from '@devui/button';
import { LANG_KEY, ZH_CN, EN_US } from './const';
const Home = defineAsyncComponent(() => import('./components/Home.vue'));
-const NoopComponent = () => null;
-
-const CarbonAds = __CARBON__ ? defineAsyncComponent(() => import('./components/CarbonAds.vue')) : NoopComponent;
-const BuySellAds = __BSA__ ? defineAsyncComponent(() => import('./components/BuySellAds.vue')) : NoopComponent;
-const AlgoliaSearchBox = __ALGOLIA__ ? defineAsyncComponent(() => import('./components/AlgoliaSearchBox.vue')) : NoopComponent;
+const CarbonAds = defineAsyncComponent(() => import('./components/CarbonAds.vue'));
+const BuySellAds = defineAsyncComponent(() => import('./components/BuySellAds.vue'));
+const AlgoliaSearchBox = defineAsyncComponent(() => import('./components/AlgoliaSearchBox.vue'));
// generic state
const route = useRoute();
@@ -29,9 +28,9 @@ const router = useRouter();
// custom layout
const isCustomLayout = computed(() => !!frontmatter.value.customLayout);
// home
-const enableHome = computed(() => !!frontmatter.value.home);
+const enableHome = computed(() => !!frontmatter.value.layout);
-// automatic multilang check for AlgoliaSearchBox
+// automatic multi-lang check for AlgoliaSearchBox
const isMultiLang = computed(() => Object.keys(theme.value.locales || {}).length > 0);
// navbar
@@ -47,7 +46,7 @@ const showNavbar = computed(() => {
const openSideBar = ref(false);
const showSidebar = computed(() => {
- if (frontmatter.value.home || frontmatter.value.sidebar === false) {
+ if (frontmatter.value.layout || frontmatter.value.sidebar === false) {
return false;
}
@@ -182,7 +181,8 @@ const contributors = computed(() => {
-
+
@@ -190,12 +190,8 @@ const contributors = computed(() => {
-
+
@@ -204,14 +200,15 @@ const contributors = computed(() => {
-
@@ -313,21 +310,21 @@ body[ui-theme='galaxy-theme'] {
}
.page-contributor {
- & > a > span {
+ &>a>span {
margin: 0 12px 8px 0 !important;
- & > img,
+ &>img,
& svg {
width: 40px !important;
height: 40px !important;
}
}
- & > a:nth-child(8n) > span {
+ &>a:nth-child(8n)>span {
margin: 0 12px 8px 0 !important;
}
- & > a:nth-child(7n) > span {
+ &>a:nth-child(7n)>span {
margin: 0 !important;
}
}
@@ -338,11 +335,11 @@ body[ui-theme='galaxy-theme'] {
@media (max-width: 385px) {
.container-contributors .contributors-inner {
.page-contributor {
- & > a:nth-child(7n) > span {
+ &>a:nth-child(7n)>span {
margin: 0 12px 8px 0 !important;
}
- & > a:nth-child(6n) > span {
+ &>a:nth-child(6n)>span {
margin: 0 !important;
}
}
@@ -353,11 +350,11 @@ body[ui-theme='galaxy-theme'] {
@media (max-width: 330px) {
.container-contributors .contributors-inner {
.page-contributor {
- & > a:nth-child(6n) > span {
+ &>a:nth-child(6n)>span {
margin: 0 12px 8px 0 !important;
}
- & > a:nth-child(5n) > span {
+ &>a:nth-child(5n)>span {
margin: 0 !important;
}
}
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue
index 8c200837bf..8f44932ef2 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue
@@ -22,7 +22,7 @@
- `
- : '';
+${code}
+`;
+ }
return {
- code: `${setup}\n${code}`,
+ code,
};
},
};
diff --git a/packages/devui-vue/docs/.vitepress/theme/index.ts b/packages/devui-vue/docs/.vitepress/theme/index.ts
index d77decc5af..26c872823b 100644
--- a/packages/devui-vue/docs/.vitepress/theme/index.ts
+++ b/packages/devui-vue/docs/.vitepress/theme/index.ts
@@ -1,13 +1,19 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue';
+import type { Theme } from 'vitepress';
+import DefaultTheme from 'vitepress/theme';
+import 'vitepress-theme-demoblock/dist/theme/styles/index.css';
+import { useComponents } from './useComponents';
+
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
import DevUI from '../../../devui/vue-devui';
import Locale from '../../../devui/locale';
-import Theme from '../devui-theme';
-import 'vitepress-theme-demoblock/theme/styles/index.css';
-import { registerComponents } from './register-components.js';
+import DevUITheme from '../devui-theme';
import { insertBaiduScript } from './insert-baidu-script';
if (typeof window !== 'undefined') {
@@ -31,10 +37,17 @@ if (typeof window !== 'undefined') {
}
export default {
- ...Theme,
- enhanceApp({ app }) {
- app.use(Locale).use(DevUI);
- registerComponents(app);
+ extends: DevUITheme,
+ Layout: () => {
+ return h(DevUITheme.Layout ?? DefaultTheme.Layout, null, {
+ // https://vitepress.dev/guide/extending-default-theme#layout-slots
+ });
+ },
+ enhanceApp(ctx) {
+ DefaultTheme.enhanceApp(ctx);
+ useComponents(ctx.app);
+ ctx.app.use(Locale);
+ ctx.app.use(DevUI);
insertBaiduScript();
},
-};
+} satisfies Theme;
diff --git a/packages/devui-vue/docs/.vitepress/theme/useComponents.js b/packages/devui-vue/docs/.vitepress/theme/useComponents.js
new file mode 100644
index 0000000000..b6ad35f8bf
--- /dev/null
+++ b/packages/devui-vue/docs/.vitepress/theme/useComponents.js
@@ -0,0 +1,8 @@
+// Don't remove this file, because it registers the demo components.
+import Demo from 'vitepress-theme-demoblock/dist/client/components/Demo.vue'
+import DemoBlock from 'vitepress-theme-demoblock/dist/client/components/DemoBlock.vue'
+
+export function useComponents(app) {
+ app.component('Demo', Demo)
+ app.component('DemoBlock', DemoBlock)
+}
diff --git a/packages/devui-vue/docs/components/accordion/index.md b/packages/devui-vue/docs/components/accordion/index.md
index 921c449344..400c88bb40 100644
--- a/packages/devui-vue/docs/components/accordion/index.md
+++ b/packages/devui-vue/docs/components/accordion/index.md
@@ -2,9 +2,9 @@
为页面提供导航的组件。
-#### 何时使用
-
+:::tip 何时使用
需要通过分组组织菜单的时候使用。
+:::
### 基本用法
diff --git a/packages/devui-vue/docs/components/badge/index.md b/packages/devui-vue/docs/components/badge/index.md
index 22eef59859..7232c8e2c8 100644
--- a/packages/devui-vue/docs/components/badge/index.md
+++ b/packages/devui-vue/docs/components/badge/index.md
@@ -2,13 +2,17 @@
图标右上角的圆形徽标数字。
-#### 何时使用
-
+:::tip 何时使用
出现在图标右上角或列表项右方,通过不同的状态色加数字提示用户有消息需要处理时。
+:::
+
+## 用法
### 基本徽章
-::: demo 基本徽章类型,当有包裹元素时在右上角显示徽章和数目。
+基本徽章类型,当有包裹元素时在右上角显示徽章和数目。
+
+::: demo
```vue
@@ -34,7 +38,9 @@
### 点状徽章
-:::demo 点状徽章类型,当有包裹元素且 `show-dot` 参数为 true 时为点状徽章,默认在右上角展示小点不显示数目。
+点状徽章类型,当有包裹元素且 `show-dot` 参数为 true 时为点状徽章,默认在右上角展示小点不显示数目。
+
+:::demo
```vue
@@ -63,7 +69,9 @@
### 计数徽章
-:::demo 当徽章独立使用且不包裹任何元素时,只展示徽章状态色和数目。
+当徽章独立使用且不包裹任何元素时,只展示徽章状态色和数目。
+
+:::demo
```vue
@@ -99,7 +107,9 @@
### 状态徽章
-:::demo 当徽章独立使用、不包裹任何元素且 `show-dot` 参数为 true 时为状态徽章,不同状态展示不同色点。
+当徽章独立使用、不包裹任何元素且 `show-dot` 参数为 true 时为状态徽章,不同状态展示不同色点。
+
+:::demo
```vue
@@ -125,7 +135,9 @@
### 徽章位置
-:::demo 通过 `position` 参数设置徽章位置。
+通过 `position` 参数设置徽章位置。
+
+:::demo
```vue
@@ -144,7 +156,9 @@
### 自定义
-:::demo 通过 `bg-color` 参数设置徽章展示状态色(此时 `status` 参数设置的徽章状态色失效),通过 `offset` 参数可设置相对于 position 的徽章偏移量。通过 ` text-color``、bgColor ` 自定义文字、背景颜色。
+通过 `bg-color` 参数设置徽章展示状态色(此时 `status` 参数设置的徽章状态色失效),通过 `offset` 参数可设置相对于 position 的徽章偏移量。通过 ` text-color``、bgColor ` 自定义文字、背景颜色。
+
+:::demo
```vue
@@ -164,7 +178,7 @@
### 隐藏徽章
-通过 `hidden` 属性设置徽章是否可见
+通过 `hidden` 属性设置徽章是否可见。
::: demo
diff --git a/packages/devui-vue/docs/components/button/buttonGroup.vue b/packages/devui-vue/docs/components/button/buttonGroup.vue
deleted file mode 100644
index 9a87aacb9d..0000000000
--- a/packages/devui-vue/docs/components/button/buttonGroup.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-
-
-
-
- 按钮名称
-
-
-
-
-
尺寸:sm
-
-
- 上海
-
- 北京
- 深圳
-
-
-
尺寸:默认
-
-
- 上海
-
- 北京
- 深圳
-
-
-
尺寸:lg
-
-
- 上海
-
- 北京
- 深圳
-
-
-
与dropdown下拉菜单一起使用
-
-
- Click Me 1
-
-
-
-
-
- 上海
-
-
- Click Me 2
-
-
-
-
-
- 北京
-
-
- Click Me 3
-
-
-
-
-
-
-
-
-
diff --git a/packages/devui-vue/docs/components/button/disable.vue b/packages/devui-vue/docs/components/button/disable.vue
deleted file mode 100644
index e2e4ceec35..0000000000
--- a/packages/devui-vue/docs/components/button/disable.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
-
- Solid Button
-
- Outline Button
-
- Text Button
-
-
-
-
-
- Solid Button
-
-
- Outline Button
-
-
- Text Button
-
-
-
-
diff --git a/packages/devui-vue/docs/components/button/icon.vue b/packages/devui-vue/docs/components/button/icon.vue
deleted file mode 100644
index ed6f044414..0000000000
--- a/packages/devui-vue/docs/components/button/icon.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-
-
-
- New
-
-
- Filter
-
-
- Link
-
-
-
- Add
-
-
-
-
-
-
diff --git a/packages/devui-vue/docs/components/button/index.md b/packages/devui-vue/docs/components/button/index.md
index 1b47383b51..e46b0417aa 100644
--- a/packages/devui-vue/docs/components/button/index.md
+++ b/packages/devui-vue/docs/components/button/index.md
@@ -2,47 +2,129 @@
按钮用于开始一个即时操作。
-#### 何时使用
-
+:::tip 何时使用
标记了一个(或封装一组)操作命令,响应用户点击行为,触发相应的业务逻辑。
+:::
+
+## 用法
### 形态
-:::demo 通过`variant`设置按钮形态,目前支持`solid`、`outline`、`text`三种形态,默认为`outline`。
+通过`variant`设置按钮形态,目前支持`solid`、`outline`、`text`三种形态,默认为`outline`。
+
+:::demo
-button/shape
+```vue
+
+
+ Solid Button
+ Outline Button
+ Text Button
+
+
+```
:::
### 主题色
-:::demo 通过`color`设置按钮的主题色,目前支持`primary`、`secondary`、`danger`三种主题色,默认为`secondary`。
注意:如果`variant`设置成`solid`,则默认使用`primary`主题色。
+通过`color`设置按钮的主题色,目前支持`primary`、`secondary`、`danger`三种主题色,默认为`secondary`。
注意:如果`variant`设置成`solid`,则默认使用`primary`主题色。
-button/theme
+:::demo
+
+```vue
+
+
+
+ Primary
+ Primary
+ Primary
+
+
+
+ Secondary
+ Secondary
+ Secondary
+
+
+
+ Danger
+ Danger
+ Danger
+
+
+
+```
:::
### 尺寸
-:::demo 通过`size`设置按钮尺寸,支持`sm`、`md`、`lg`三种类型的尺寸,默认为`md`。
+通过`size`设置按钮尺寸,支持`sm`、`md`、`lg`三种类型的尺寸,默认为`md`。
+
+:::demo
-button/size
+```vue
+
+
+ Small
+ Medium
+ Large
+
+
+```
:::
### 禁用状态
-:::demo 通过`disabled`参数设置按钮禁用状态。
+通过`disabled`参数设置按钮禁用状态。
-button/disable
+:::demo
+
+```vue
+
+
+
+ Solid Button
+ Outline Button
+ Text Button
+
+
+
+ Solid Button
+ Outline Button
+ Text Button
+
+
+
+```
:::
### 加载中状态
-:::demo 通过`loading`参数设置按钮加载中状态。
+通过`loading`参数设置按钮加载中状态。
-button/loading
+:::demo
+
+```vue
+
+ Click Me
+
+
+
+```
:::
@@ -50,7 +132,20 @@ button/loading
:::demo
-button/icon
+```vue
+
+
+ New
+ Filter
+ Link
+
+ Add
+
+
+
+
+
+```
:::
@@ -60,22 +155,97 @@ button/icon
:::demo
-button/buttonGroup
+```vue
+
+
+
+ 按钮名称
+
+
+
+
尺寸:sm
+
+ 上海
+ 北京
+ 深圳
+
+
+
尺寸:默认
+
+ 上海
+ 北京
+ 深圳
+
+
+
尺寸:lg
+
+ 上海
+ 北京
+ 深圳
+
+
+
与dropdown下拉菜单一起使用
+
+
+ Click Me 1
+
+
+
+
+ 上海
+
+ Click Me 2
+
+
+
+
+ 北京
+
+ Click Me 3
+
+
+
+
+
+
+
+
+
+```
:::
### Button 参数
-| 参数名 | 类型 | 默认 | 说明 | 跳转 Demo |
-| :------- | :-------------------------------- | :---------- | :------------------------ | :------------------------ |
-| variant | [IButtonVariant](#ibuttonvariant) | 'outline' | 可选,按钮形态 | [形态](#形态) |
-| color | [IButtonColor](#ibuttoncolor) | 'secondary' | 可选,按钮主题 | [主题色](#主题色) |
-| size | [IButtonSize](#ibuttonsize) | 'md' | 可选,按钮尺寸 | [尺寸](#尺寸) |
-| icon | `string` | -- | 可选,自定义按钮图标 | [图标按钮](#图标按钮) |
-| shape | [IButtonShape](#ibuttonshape) | -- | 可选,按钮形状(圆形/圆角) | [图标按钮](#图标按钮) |
-| disabled | `boolean` | false | 可选,是否禁用 button | [禁用状态](#禁用状态) |
-| loading | `boolean` | false | 可选,设置加载中状态 | [加载中状态](#加载中状态) |
-| native-type | [IButtonType](#ibuttontype) | 'button' | 可选,按钮原生type属性 | |
+| 参数名 | 类型 | 默认 | 说明 | 跳转 Demo |
+| :---------- | :-------------------------------- | :---------- | :------------------------ | :------------------------ |
+| variant | [IButtonVariant](#ibuttonvariant) | 'outline' | 可选,按钮形态 | [形态](#形态) |
+| color | [IButtonColor](#ibuttoncolor) | 'secondary' | 可选,按钮主题 | [主题色](#主题色) |
+| size | [IButtonSize](#ibuttonsize) | 'md' | 可选,按钮尺寸 | [尺寸](#尺寸) |
+| icon | `string` | -- | 可选,自定义按钮图标 | [图标按钮](#图标按钮) |
+| shape | [IButtonShape](#ibuttonshape) | -- | 可选,按钮形状(圆形/圆角) | [图标按钮](#图标按钮) |
+| disabled | `boolean` | false | 可选,是否禁用 button | [禁用状态](#禁用状态) |
+| loading | `boolean` | false | 可选,设置加载中状态 | [加载中状态](#加载中状态) |
+| native-type | [IButtonType](#ibuttontype) | 'button' | 可选,按钮原生 type 属性 | |
### Button 类型定义
diff --git a/packages/devui-vue/docs/components/button/loading.vue b/packages/devui-vue/docs/components/button/loading.vue
deleted file mode 100644
index e9c27cc3cd..0000000000
--- a/packages/devui-vue/docs/components/button/loading.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
- Click Me
-
-
-
-
diff --git a/packages/devui-vue/docs/components/button/shape.vue b/packages/devui-vue/docs/components/button/shape.vue
deleted file mode 100644
index af6e4c72a3..0000000000
--- a/packages/devui-vue/docs/components/button/shape.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
- Solid Button
-
- Outline Button
-
- Text Button
-
-
-
diff --git a/packages/devui-vue/docs/components/button/size.vue b/packages/devui-vue/docs/components/button/size.vue
deleted file mode 100644
index 6205115fa9..0000000000
--- a/packages/devui-vue/docs/components/button/size.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
- Small
-
- Medium
-
- Large
-
-
-
diff --git a/packages/devui-vue/docs/components/button/theme.vue b/packages/devui-vue/docs/components/button/theme.vue
deleted file mode 100644
index 8639f578e8..0000000000
--- a/packages/devui-vue/docs/components/button/theme.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-
-
-
-
- Primary
-
-
- Primary
-
-
- Primary
-
-
-
-
-
- Secondary
-
-
- Secondary
-
-
- Secondary
-
-
-
-
-
- Danger
-
-
- Danger
-
-
- Danger
-
-
-
-
diff --git a/packages/devui-vue/docs/components/card/index.md b/packages/devui-vue/docs/components/card/index.md
index 116801561e..65d09cf547 100644
--- a/packages/devui-vue/docs/components/card/index.md
+++ b/packages/devui-vue/docs/components/card/index.md
@@ -30,7 +30,6 @@
+
```
-:::
+:::
### 时间格式
+
时分秒毫秒:
-:::demo
+:::demo
```vue
-
+
-
+
```
-:::
-
+:::
年月日时分秒:
-:::demo
+:::demo
```vue
-
+
-
+
```
-:::
-
+:::
-注:当 format 某一项时间没有的情况下,会将没有的那一项值累积到下一项。
-例如:当没有 M(月)的时候,会将月的值 *30 累加到日,根据 format 格式化的值会从通过时间 onchange 的 legalTime 值返回,如下:
-:::demo
+注:当 format 某一项时间没有的情况下,会将没有的那一项值累积到下一项。
+例如:当没有 M(月)的时候,会将月的值 \*30 累加到日,根据 format 格式化的值会从通过时间 onchange 的 legalTime 值返回,如下:
+:::demo
```vue
-
+
-
+
```
-:::
-
+:::
### 前缀和后缀
-:::demo
+
+:::demo
```vue
-
+
-
+
```
-:::
+:::
+### 设置 style
-### 设置style
设置倒计时文字样式:
-:::demo
+:::demo
```vue
-
+
-
+
```
-:::
+:::
### 自定义内容
-:::demo
+
+:::demo
```vue
@@ -259,71 +242,69 @@ export default defineComponent({
```
+
:::
### Countdown 参数
-| 参数 | 类型 | 默认 | 说明 | 跳转demo |
-| :---- | :---- | :---- | :---- | :---- |
-| format | string | HH:mm:ss | 格式化倒计时展示,参考moment | [时间格式](#时间格式) |
-| value | number | - | 数值内容 | [基本用法](#基本用法) |
-| prefix | string | - | 设置数值的前缀 | [前缀和后缀](#前缀和后缀) |
-| suffix | string | - | 设置数值的后缀 | [前缀和后缀](#前缀和后缀) |
-| value-style | CSSProperties | - | 设置数值的样式 | [设置style](#设置style) |
-
+| 参数 | 类型 | 默认 | 说明 | 跳转 demo |
+| :---------- | :------------ | :------- | :---------------------------- | :------------------------ |
+| format | string | HH:mm:ss | 格式化倒计时展示,参考 moment | [时间格式](#时间格式) |
+| value | number | - | 数值内容 | [基本用法](#基本用法) |
+| prefix | string | - | 设置数值的前缀 | [前缀和后缀](#前缀和后缀) |
+| suffix | string | - | 设置数值的后缀 | [前缀和后缀](#前缀和后缀) |
+| value-style | CSSProperties | - | 设置数值的样式 | [设置 style](#设置style) |
### Countdown 事件
-| 事件 | 类型 | 说明 |
-| :---- | :---- | :---- |
-| on-change | ({leftTime,formatTime,legalTime}) => void | 倒计时时间变化时触发。
leftTime:倒计时剩余得时间戳;
formatTime:年月日时分秒毫秒格式倒计时;
legalTime:根据format格式化后的值。 |
-| on-finish | () => void | 倒计时完成时触发 |
+| 事件 | 类型 | 说明 |
+| :-------- | :---------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------- |
+| on-change | ({leftTime,formatTime,legalTime}) => void | 倒计时时间变化时触发。
leftTime:倒计时剩余得时间戳;
formatTime:年月日时分秒毫秒格式倒计时;
legalTime:根据 format 格式化后的值。 |
+| on-finish | () => void | 倒计时完成时触发 |
### Countdown 插槽
-| 插槽名 | 说明 |
-| :------- | :----------------- |
-| default | 自定义内容 |
+| 插槽名 | 说明 |
+| :------ | :--------- |
+| default | 自定义内容 |
diff --git a/packages/devui-vue/docs/components/data-grid/index.md b/packages/devui-vue/docs/components/data-grid/index.md
index 54d8ffa0fb..0dfaa8b3ca 100644
--- a/packages/devui-vue/docs/components/data-grid/index.md
+++ b/packages/devui-vue/docs/components/data-grid/index.md
@@ -2,9 +2,13 @@
展示行列数据。
+## 用法
+
### 基本用法
-:::demo `data`参数传入要展示的数据,`columns`参数传入列数据;列数据中的`field`参数为对应列内容的字段名,`header`参数为对应列的标题。
+`data`参数传入要展示的数据,`columns`参数传入列数据;列数据中的`field`参数为对应列内容的字段名,`header`参数为对应列的标题。
+
+:::demo
```vue
@@ -107,7 +111,9 @@ export default defineComponent({
### 表格样式
-:::demo `striped`参数设置是否显示斑马纹;`header-bg`参数设置是否显示表头背景色;`border-type`参数设置边框类型;`shadow-type`参数设置阴影类型;`show-header`参数设置是否显示表头;列配置中的`align`参数设置对齐方式。
+`striped`参数设置是否显示斑马纹;`header-bg`参数设置是否显示表头背景色;`border-type`参数设置边框类型;`shadow-type`参数设置阴影类型;`show-header`参数设置是否显示表头;列配置中的`align`参数设置对齐方式。
+
+:::demo
```vue
@@ -219,7 +225,9 @@ export default defineComponent({
### 动态数据
-:::demo loading 由业务自行添加。
+`loading` 由业务自行添加。
+
+:::demo
```vue
@@ -358,7 +366,9 @@ export default defineComponent({
### 懒加载
-:::demo `lazy`参数设置为`true`,即可启用懒加载,在`load-more`事件回调中可动态添加数据。
+`lazy`参数设置为`true`,即可启用懒加载,在`load-more`事件回调中可动态添加数据。
+
+:::demo
```vue
@@ -478,7 +488,9 @@ export default defineComponent({
### 自定义行样式
-:::demo 通过`row-class`参数自定义行样式,可传入字符串,来自定义每一行的样式;也可传入函数,来自定义某一行或某几行的样式,函数参数为行数据和行索引。
+通过`row-class`参数自定义行样式,可传入字符串,来自定义每一行的样式;也可传入函数,来自定义某一行或某几行的样式,函数参数为行数据和行索引。
+
+:::demo
```vue
@@ -542,7 +554,9 @@ export default defineComponent({
### 自定义单元格样式
-:::demo 通过`cell-class`参数自定义行样式,可传入字符串,来自定义每一行的样式;也可传入函数,来自定义某一行或某几行的样式,函数参数为行数据、行索引、列数据、列索引。
+通过`cell-class`参数自定义行样式,可传入字符串,来自定义每一行的样式;也可传入函数,来自定义某一行或某几行的样式,函数参数为行数据、行索引、列数据、列索引。
+
+:::demo
```vue
@@ -606,7 +620,13 @@ export default defineComponent({
### 自定义列宽
-:::demo 通过`width`参数配置列宽,参数类型为`string | number | undefined`,`number`类型为固定宽度;`string`类型可配置为像素或者百分比,当为百分比时,基于表格所在容器总宽计算该列实际宽度;当为`undefined`即不配置列宽参数时,会与其他不配置列宽的列平分剩余宽度(即容器总宽减去已知列宽)。
通过`minWidth`参数配置最小列宽,参数类型同`width`,当该列未配置`width`参数时,若给该列分配的宽度小于`minWidth`,则按照`minWidth`设置列宽,未配置`minWidth`参数时,为保证该列能够显示,会默认设置`80px`宽度。
通过`maxWidth`参数配置最大列宽,参数类型同`width`,当该列未配置`width`参数时,若给该列分配的宽度大于`maxWidth`,则按照`maxWidth`设置列宽。
+通过`width`参数配置列宽,参数类型为`string | number | undefined`,`number`类型为固定宽度;`string`类型可配置为像素或者百分比,当为百分比时,基于表格所在容器总宽计算该列实际宽度;当为`undefined`即不配置列宽参数时,会与其他不配置列宽的列平分剩余宽度(即容器总宽减去已知列宽)。
+
+通过`minWidth`参数配置最小列宽,参数类型同`width`,当该列未配置`width`参数时,若给该列分配的宽度小于`minWidth`,则按照`minWidth`设置列宽,未配置`minWidth`参数时,为保证该列能够显示,会默认设置`80px`宽度。
+
+通过`maxWidth`参数配置最大列宽,参数类型同`width`,当该列未配置`width`参数时,若给该列分配的宽度大于`maxWidth`,则按照`maxWidth`设置列宽。
+
+:::demo
```vue
@@ -661,7 +681,9 @@ export default defineComponent({
### 自定义单元格内容
-:::demo 通过在列数据的`cellRender`参数来自定义单元格内容,函数参数依次为行数据、行索引、列数据、列索引。`cellRender`函数可返回由[h 函数](https://cn.vuejs.org/api/render-function.html#h)创建的虚拟 DOM 节点。
+通过在列数据的`cellRender`参数来自定义单元格内容,函数参数依次为行数据、行索引、列数据、列索引。`cellRender`函数可返回由[h 函数](https://cn.vuejs.org/api/render-function.html#h)创建的虚拟 DOM 节点。
+
+:::demo
```vue
@@ -729,7 +751,9 @@ export default defineComponent({
### 自定义表头
-:::demo 通过在列数据的`headRender`参数来自定义表头,函数参数为当前列数据。`headRender`函数可返回由[h 函数](https://cn.vuejs.org/api/render-function.html#h)创建的虚拟 DOM 节点。
+通过在列数据的`headRender`参数来自定义表头,函数参数为当前列数据。`headRender`函数可返回由[h 函数](https://cn.vuejs.org/api/render-function.html#h)创建的虚拟 DOM 节点。
+
+:::demo
```vue
@@ -789,7 +813,11 @@ export default defineComponent({
### 自定义提示内容
-:::demo `showOverflowTooltip`参数可设置内容超出后,鼠标悬浮是否显示提示内容,可设置为`true`值来开启此功能,也可通过`TooltipConfig`类型的参数来对提示内容做一些配置。
`showHeadOverflowTooltip`用来设置表头,作用及参数值与`showOverflowTooltip`一致。
+`showOverflowTooltip`参数可设置内容超出后,鼠标悬浮是否显示提示内容,可设置为`true`值来开启此功能,也可通过`TooltipConfig`类型的参数来对提示内容做一些配置。
+
+`showHeadOverflowTooltip`用来设置表头,作用及参数值与`showOverflowTooltip`一致。
+
+:::demo
```vue
@@ -855,7 +883,9 @@ export default defineComponent({
### 空数据模板
-:::demo 通过`empty`插槽可自定义数据为空时显示的内容。
+通过`empty`插槽可自定义数据为空时显示的内容。
+
+:::demo
```vue
@@ -930,7 +960,9 @@ export default defineComponent({
### 固定表头
-:::demo `fix-header`参数设置为`true`即可固定表头。
+`fix-header`参数设置为`true`即可固定表头。
+
+:::demo
```vue
@@ -1009,7 +1041,9 @@ export default defineComponent({
### 固定列
-:::demo 通过列数据的`fixed`参数可将该列固定,参数值为`left`和`right`,可分别固定在左侧和右侧。
+通过列数据的`fixed`参数可将该列固定,参数值为`left`和`right`,可分别固定在左侧和右侧。
+
+:::demo
```vue
@@ -1092,7 +1126,9 @@ export default defineComponent({
### 排序
-:::demo 列数据中的`sortable`参数设置为`true`可启用排序功能,`sortMethod`参数自定义排序方法,排序后触发`sort-change`事件,事件抛出产生排序的列字段以及当前排序方式。
+列数据中的`sortable`参数设置为`true`可启用排序功能,`sortMethod`参数自定义排序方法,排序后触发`sort-change`事件,事件抛出产生排序的列字段以及当前排序方式。
+
+:::demo
```vue
@@ -1151,7 +1187,9 @@ export default defineComponent({
### 过滤
-:::demo 列数据中的`filterable`参数设置为`true`可启用过滤功能,内置过滤器默认为多选,通过`filterMultiple: false`可设置单选过滤器;`filterList`参数设置过滤器列表;`filterChange`参数为过滤条件变更后的回调;`filterMenu`参数可以自定义过滤器,函数可返回由[h 函数](https://cn.vuejs.org/api/render-function.html#h)创建的虚拟 DOM 节点。。
+列数据中的`filterable`参数设置为`true`可启用过滤功能,内置过滤器默认为多选,通过`filterMultiple: false`可设置单选过滤器;`filterList`参数设置过滤器列表;`filterChange`参数为过滤条件变更后的回调;`filterMenu`参数可以自定义过滤器,函数可返回由[h 函数](https://cn.vuejs.org/api/render-function.html#h)创建的虚拟 DOM 节点。
+
+:::demo
```vue
@@ -1376,7 +1414,9 @@ export default defineComponent({
### 列宽拖拽
-:::demo 列数据配置`resizable`为`true`,使该列可拖拽,拖拽后,会通过最后一列做宽度补偿。**虚拟滚动暂时不支持列宽拖拽**。
+列数据配置`resizable`为`true`,使该列可拖拽,拖拽后,会通过最后一列做宽度补偿。**虚拟滚动暂时不支持列宽拖拽**。
+
+:::demo
```vue
@@ -1431,7 +1471,9 @@ export default defineComponent({
### 可选择
-:::demo 列数据中`type`参数设置为`checkable`可启用勾选功能;行数据中`checked`参数可设置默认勾选状态,`disableCheck`参数可设置禁用勾选;行勾选状态变更时触发`check-change`事件,事件参数为当前行的勾选状态和行数据;表头勾选状态变更时触发`check-all-change`事件,事件参数为当前勾选状态。
+列数据中`type`参数设置为`checkable`可启用勾选功能;行数据中`checked`参数可设置默认勾选状态,`disableCheck`参数可设置禁用勾选;行勾选状态变更时触发`check-change`事件,事件参数为当前行的勾选状态和行数据;表头勾选状态变更时触发`check-all-change`事件,事件参数为当前勾选状态。
+
+:::demo
```vue
@@ -1504,7 +1546,9 @@ export default defineComponent({
### 父子联动
-:::demo 在搭配树形表格使用时,通过`checkable-relation`参数可以控制父子联动方式,默认为`both`,即勾选状态改变会同时影响父和子;其他可选参数为`downward`、`upward`、`none`,具体表现参考 demo 。
+在搭配树形表格使用时,通过`checkable-relation`参数可以控制父子联动方式,默认为`both`,即勾选状态改变会同时影响父和子;其他可选参数为`downward`、`upward`、`none`,具体表现参考 demo。
+
+:::demo
```vue
@@ -1621,7 +1665,9 @@ export default defineComponent({
### 操作方法
-:::demo `toggleRowChecked`方法切换行的勾选状态,第一个参数为行数据,第二个参数可选,可设置勾选状态;`toggleAllRowChecked`方法切换全选状态,参数可选,可设置勾选状态;`getCheckedRows`方法获取当前已勾选数据。
+`toggleRowChecked`方法切换行的勾选状态,第一个参数为行数据,第二个参数可选,可设置勾选状态;`toggleAllRowChecked`方法切换全选状态,参数可选,可设置勾选状态;`getCheckedRows`方法获取当前已勾选数据。
+
+:::demo
```vue
diff --git a/packages/devui-vue/docs/components/date-picker/index.md b/packages/devui-vue/docs/components/date-picker/index.md
index 4aeab2d145..e1fb79795e 100644
--- a/packages/devui-vue/docs/components/date-picker/index.md
+++ b/packages/devui-vue/docs/components/date-picker/index.md
@@ -2,36 +2,37 @@
输入或选择日期的组件。
-#### 何时使用
-
+:::tip 何时使用
当用户需要输入一个日期时;需要点击标准输入框,弹出日期面板进行选择时。
+:::
+
+## 用法
### 基本用法
:::demo
```vue
-
- 选中的日期: {{eventValue}}
+ 选中的日期: {{ eventValue }}
@@ -53,7 +54,6 @@ export default defineComponent({
:::demo
```vue
-
开启 auto-close
@@ -65,11 +65,10 @@ export default defineComponent({
@@ -87,7 +86,6 @@ export default defineComponent({
:::demo
```vue
-
开启 range
@@ -99,11 +97,10 @@ export default defineComponent({
@@ -121,18 +118,16 @@ export default defineComponent({
::: demo
```vue
-
@@ -150,23 +145,22 @@ export default defineComponent({
::: demo
```vue
-
@@ -185,21 +179,21 @@ export default defineComponent({
### DatePicker 参数
-| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
-| :---------- | :------------------ | :------ | :---------------------------------------------- | ----------------------------- |
-| auto-close | `boolean` | false | 可选,选择日期后,是否自动关闭日期面板 | [自动关闭日期面板](#自动关闭日期面板) |
-| range | `boolean` | false | 可选,是否开启日期区间选择 | [日期范围选择器](#日期范围选择器) |
-| format | `string` | y/MM/dd | 可选,[日期值格式](#日期格式化字符) | [日期格式化](#日期格式化) |
-| range-spliter | `string` | - | 可选,在区间选择模式下,分隔起止时间的字符。 | [日期起止时间分隔符](#日期起止时间分隔符) |
-| selected-date-change | `Function` | - | 可选,子项切换的时候会发出新激活的子项的数据 | [基本用法](#基本用法) |
+| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
+| :------------------- | :--------- | :------ | :------------------------------------------- | ----------------------------------------- |
+| auto-close | `boolean` | false | 可选,选择日期后,是否自动关闭日期面板 | [自动关闭日期面板](#自动关闭日期面板) |
+| range | `boolean` | false | 可选,是否开启日期区间选择 | [日期范围选择器](#日期范围选择器) |
+| format | `string` | y/MM/dd | 可选,[日期值格式](#日期格式化字符) | [日期格式化](#日期格式化) |
+| range-spliter | `string` | - | 可选,在区间选择模式下,分隔起止时间的字符。 | [日期起止时间分隔符](#日期起止时间分隔符) |
+| selected-date-change | `Function` | - | 可选,子项切换的时候会发出新激活的子项的数据 | [基本用法](#基本用法) |
### 日期格式化字符
-|字符|说明|规则|
-|----|----|----|
-|y, yy, yyyy|year|使用`yy`时,只显示后2位年份,其他情况显示4位年份。比如`yy/MM/dd -> 21/01/02`, `y/MM/dd -> 2021/01/02`|
-|M,MM|month|使用`MM`时,一位数数字左侧自动补`0`。比如`y/MM/dd -> 2021/01/02`,`y/M/d -> 2021/1/2`|
-|d,dd|date|规则同`M`|
-|h,hh|hour|规则同`M`;使用24小时表示。|
-|m,mm|minute|规则同`M`|
-|s,ss|second|规则同`M`|
+| 字符 | 说明 | 规则 |
+| ----------- | ------ | ---------------------------------------------------------------------------------------------------------- |
+| y, yy, yyyy | year | 使用`yy`时,只显示后 2 位年份,其他情况显示 4 位年份。比如`yy/MM/dd -> 21/01/02`, `y/MM/dd -> 2021/01/02` |
+| M,MM | month | 使用`MM`时,一位数数字左侧自动补`0`。比如`y/MM/dd -> 2021/01/02`,`y/M/d -> 2021/1/2` |
+| d,dd | date | 规则同`M` |
+| h,hh | hour | 规则同`M`;使用 24 小时表示。 |
+| m,mm | minute | 规则同`M` |
+| s,ss | second | 规则同`M` |
diff --git a/packages/devui-vue/docs/components/dragdrop-new/index.md b/packages/devui-vue/docs/components/dragdrop-new/index.md
index 51df5b34e4..839532b8b3 100644
--- a/packages/devui-vue/docs/components/dragdrop-new/index.md
+++ b/packages/devui-vue/docs/components/dragdrop-new/index.md
@@ -6,7 +6,9 @@
### 基本用法
-:::demo 从一个container拖动到另外一个container,并支持排序。
+从一个 container 拖动到另外一个 container,并支持排序。
+
+:::demo
```vue
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
- -
-
- {{ item.name }}
-
-
-
+
+
+
+
+
+ -
+
+ {{ item.name }}
+
+
+
+
+
-
-
-
```
@@ -235,7 +237,9 @@ export default defineComponent({
### 多层树状拖拽
-:::demo 排序允许拖拽到元素上,支持层级嵌套。
+排序允许拖拽到元素上,支持层级嵌套。
+
+:::demo
```vue
-
-
-
-
-
-
-
+
+
-
-
-
-
-
- -
-
- {{ item.name }}
-
-
-
-
+
+
+
+
+
+ -
+
+ {{ item.name }}
+
+
+
+
+
-
-
- -
@@ -371,7 +373,7 @@ export default defineComponent({
-
```
@@ -481,7 +482,9 @@ export default defineComponent({
### 拖拽实体元素跟随
-:::demo 允许拖拽时候非半透明元素跟随。也可以使用appendToBody:当拖拽离开后源位置的父对象会被销毁的话,需要把克隆体附着到body上防止被销毁。 默认会通过复制样式保证克隆到body的实体的样式是正确的,但部分深度依赖DOM节点位置的样式和属性可能会失败,需要手动调整部分样式。
+允许拖拽时候非半透明元素跟随。也可以使用 appendToBody:当拖拽离开后源位置的父对象会被销毁的话,需要把克隆体附着到 body 上防止被销毁。 默认会通过复制样式保证克隆到 body 的实体的样式是正确的,但部分深度依赖 DOM 节点位置的样式和属性可能会失败,需要手动调整部分样式。
+
+:::demo
```vue
-
-
-
-
-
-
-
+
+
-
-
-
-
-
```
@@ -694,7 +691,9 @@ export default defineComponent({
### 越边交换
-:::demo 设置switchWhileCrossEdge允许越过边缘的时候交换。注意:不可与dropOnItem一起用,dropOnItem为true的时候无效。
+设置 switchWhileCrossEdge 允许越过边缘的时候交换。注意:不可与 dropOnItem 一起用,dropOnItem 为 true 的时候无效。
+
+:::demo
```vue
-
-
-
-
-
-
-
-
```
@@ -843,7 +833,9 @@ export default defineComponent({
### 外部放置位置:就近,前面,后面
-:::demo 使用defaultDropPostion配置排序器之外的区域拖拽元素放下的时候默认加到列表的前面或者后面,默认为就近('closest')。
+使用 defaultDropPostion 配置排序器之外的区域拖拽元素放下的时候默认加到列表的前面或者后面,默认为就近('closest')。
+
+:::demo
```vue
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
```
@@ -1077,7 +1070,9 @@ export default defineComponent({
### 拖拽滚动容器增强
-:::demo 搭配使用dDropScrollEnhanced指令允许拖拽到边缘的时候加速滚动条向两边滚动。
+搭配使用 dDropScrollEnhanced 指令允许拖拽到边缘的时候加速滚动条向两边滚动。
+
+:::demo
```vue
-