diff --git a/devui/checkbox/src/checkbox.tsx b/devui/checkbox/src/checkbox.tsx index 0f9a0ab932430bc83b5a9d24817abd46fd5c53b1..b91f7df99824ade91ccc86b69d16e7c317fb39c3 100644 --- a/devui/checkbox/src/checkbox.tsx +++ b/devui/checkbox/src/checkbox.tsx @@ -5,13 +5,15 @@ import { checkboxProps, CheckboxProps, } from './use-checkbox'; +import { withGlobalConfig } from '../../global-config' export default defineComponent({ name: 'DCheckbox', props: checkboxProps, emits: ['change', 'update:checked', 'update:modelValue'], setup(props: CheckboxProps, ctx) { - const checkboxGroupConf = inject(checkboxGroupInjectionKey, null); + const checkboxGroupConf = inject(checkboxGroupInjectionKey, null); + const isChecked = computed(() => props.checked || props.modelValue); const mergedDisabled = computed(() => { return checkboxGroupConf?.disabled.value || props.disabled; @@ -23,8 +25,9 @@ export default defineComponent({ return checkboxGroupConf?.isShowTitle ?? props.isShowTitle; }); const mergedShowAnimation = computed(() => { - return checkboxGroupConf?.showAnimation ?? props.showAnimation; - }); + return withGlobalConfig(props.showAnimation, 'showAnimation') + }); + const mergedColor = computed(() => { return checkboxGroupConf?.color ?? props.color; }); diff --git a/devui/checkbox/src/use-checkbox.ts b/devui/checkbox/src/use-checkbox.ts index bef45c5a02722cd6b4dbf76774482d6728fd45b0..90d837f7b267363a7634e94f9e0303add3e9780a 100644 --- a/devui/checkbox/src/use-checkbox.ts +++ b/devui/checkbox/src/use-checkbox.ts @@ -1,5 +1,4 @@ import { PropType, InjectionKey, Ref, ExtractPropTypes } from 'vue'; - type Direction = 'row' | 'column'; const commonProps = { @@ -16,8 +15,8 @@ const commonProps = { default: undefined }, showAnimation: { - type: Boolean, - default: true + type: Boolean, + default: undefined }, disabled: { type: Boolean, diff --git a/devui/global-config/config.ts b/devui/global-config/config.ts new file mode 100644 index 0000000000000000000000000000000000000000..aa97b7fc3b6226327a9f303ca99977a9d90e17f2 --- /dev/null +++ b/devui/global-config/config.ts @@ -0,0 +1,128 @@ +import type { InjectionKey } from 'vue'; + +export const defaultGlobalConfig: DevUIGlobalConfig = { + tooltip: { + showAnimation: true, + }, + dropdown: { + showAnimation: true, + }, + accordion: { + showAnimation: true, + }, + popover: { + showAnimation: true, + }, + select: { + showAnimation: true, + }, + modal: { + showAnimation: true, + }, + treeselect: { + showAnimation: true, + }, + popper: { + showAnimation: true, + }, + tree: { + showAnimation: true, + }, + editableselect: { + showAnimation: true, + }, + autocomplete: { + showAnimation: true, + }, + multiautocomplete: { + showAnimation: true, + }, + datepicker: { + showAnimation: true, + }, + daterangepicker: { + showAnimation: true, + }, + datepickerappendtobody: { + showAnimation: true, + }, + twodatepicker: { + showAnimation: true, + }, + cascader: { + showAnimation: true, + }, + tagsinput: { + showAnimation: true, + }, + timepicker: { + showAnimation: true, + }, + checkbox: { + showAnimation: true, + }, + checkboxgroup: { + showAnimation: undefined, + }, + panel: { + showAnimation: true, + }, +} + +export interface DevUIGlobalConfig { + tooltip?: TooltipConfig + dropdown?: DropdownConfig + accordion?: AccordionConfig + popover?: PopoverConfig + select?: SelectConfig + modal?: ModalConfig + treeselect?: TreeselectConfig + popper?: PopperConfig + tree?: TreeConfig + editableselect?: EditableselectConfig + autocomplete?: AutocompleteConfig + multiautocomplete?: MultiautocompleteConfig + datepicker?: DatepickerConfig + daterangepicker?: DatepickerConfig + datepickerappendtobody?: DatepickerConfig + twodatepicker?: DatepickerConfig + cascader?: CascaderConfig + tagsinput?: TagsinputConfig + timepicker?: TimepickerConfig + checkbox?: CheckboxConfig + checkboxgroup?: CheckboxConfig + panel?: PanelConfig + global?: GlobalConfig +} +export interface IShowAnimationConfig { + showAnimation?: boolean +} +export type GlobalConfig = IShowAnimationConfig + +export interface TooltipConfig extends IShowAnimationConfig { + mouseEnterDelay?: number + mouseLeaveDelay?: number +} +export type PanelConfig = IShowAnimationConfig +export type ModalConfig = IShowAnimationConfig +export type DropdownConfig = IShowAnimationConfig +export type AccordionConfig = IShowAnimationConfig +export type TwodatepickerConfig = IShowAnimationConfig +export type PopoverConfig = IShowAnimationConfig +export type SelectConfig = IShowAnimationConfig +export type TreeselectConfig = IShowAnimationConfig +export type PopperConfig = IShowAnimationConfig +export type TreeConfig = IShowAnimationConfig +export type EditableselectConfig = IShowAnimationConfig +export type AutocompleteConfig = IShowAnimationConfig +export type MultiautocompleteConfig = IShowAnimationConfig +export type DatepickerConfig = IShowAnimationConfig +export type CascaderConfig = IShowAnimationConfig +export type TagsinputConfig = IShowAnimationConfig +export type TimepickerConfig = IShowAnimationConfig +export type CheckboxConfig = IShowAnimationConfig + +export type DevUIGlobalConfigKey = keyof DevUIGlobalConfig; +export type DevUIGlobalInsideConfigKey = keyof DevUIGlobalConfig['global']; + +export const DevUIGlobalConfigToken: InjectionKey = Symbol('DevUI_global_config'); diff --git a/devui/global-config/index.ts b/devui/global-config/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..71c91770879c6578f65a00bfb19a8d0498483dbe --- /dev/null +++ b/devui/global-config/index.ts @@ -0,0 +1,34 @@ +import { reactive } from 'vue' +import type { App } from 'vue' +import type { DevUIGlobalConfig } from './config' +import { DevUIGlobalConfigToken } from './config' +import { withGlobalConfig } from './service' + +export { + withGlobalConfig, + DevUIGlobalConfigToken +} + +export default { + title: 'GlobalConfig 全局配置', + category: '通用', + status: '开发中', + install(app: App, config: DevUIGlobalConfig): void { + app.config.globalProperties.devUIGlobalConfig = reactive(config || {}) + app.config.globalProperties.devConfigService = { + set(compName, values) { + const globalConfig = app.config.globalProperties.devUIGlobalConfig + if (!globalConfig) { + app.config.globalProperties.devUIGlobalConfig = reactive({ [compName]: values }) + } else { + const org = app.config.globalProperties.devUIGlobalConfig[compName] + if (!org) { + app.config.globalProperties.devUIGlobalConfig[compName] = values + } else { + Object.assign(app.config.globalProperties.devUIGlobalConfig[compName], values) + } + } + } + } + }, +} \ No newline at end of file diff --git a/devui/global-config/service.ts b/devui/global-config/service.ts new file mode 100644 index 0000000000000000000000000000000000000000..cc33b090c39825b667601057220cd0e9a0340c04 --- /dev/null +++ b/devui/global-config/service.ts @@ -0,0 +1,65 @@ +import { getCurrentInstance } from 'vue' +import { DevUIGlobalConfig, DevUIGlobalConfigKey, DevUIGlobalInsideConfigKey, defaultGlobalConfig } from './config'; + +const isDefined = function (value?: any): boolean { + return value !== undefined; +} + +export class DevConfigService { + public config: DevUIGlobalConfig; + constructor(defaultConfig?: DevUIGlobalConfig) { + this.config = defaultConfig || {}; + } + + getConfigForComponent(componentName: T): DevUIGlobalConfig[T] { + return this.config[componentName]; + } + + getConfigForApi(api: T): DevUIGlobalConfig['global'][T] { + const globalConfig = this.config['global'] || {}; + const apiConfig = globalConfig[api]; + return apiConfig; + } + + set(componentName: T, value: DevUIGlobalConfig[T]): void { + this.config[componentName] = { ...this.config[componentName], ...value }; + } +} + + +/** + * 设置组件prop defaultValue + * @param propertyKey propKey + */ +export function withConfig( + componentProps: T, + componentName: DevUIGlobalConfigKey, + propertyKey: string, + propertyValue?: unknown +): unknown { + const globalConfig = getCurrentInstance().appContext.config.globalProperties.devUIGlobalConfig + if (isDefined(componentProps[propertyKey])) { + return componentProps[propertyKey] + } + + if (globalConfig[componentName] && isDefined(globalConfig[componentName][propertyKey])) { + return globalConfig[componentName][propertyKey] + } + + if (globalConfig['global'] && isDefined(globalConfig['global'][propertyKey])) { + return globalConfig['global'][propertyKey] + } + + return propertyValue +} + +function getGlobalConfig(propertyKey): T { + const {appContext, type: { name }} = getCurrentInstance() + const config = appContext.config.globalProperties.devUIGlobalConfig || {} + const componentName = name.substring(1).toLocaleLowerCase() + return config[componentName]?.[propertyKey] ?? config.global?.[propertyKey] ?? defaultGlobalConfig[componentName][propertyKey] +} + +export function withGlobalConfig(propertyValue: T, propertyKey: string):T { + return propertyValue ?? getGlobalConfig(propertyKey) +} diff --git a/docs/.vitepress/config/sidebar.ts b/docs/.vitepress/config/sidebar.ts index d9d3e0cd6d0677ed85d836ce2bdac68d06e0b426..c94ba63ab363addcb918282bccb7b2cf34c2f468 100644 --- a/docs/.vitepress/config/sidebar.ts +++ b/docs/.vitepress/config/sidebar.ts @@ -1,100 +1,103 @@ const sidebar = { - '/': [ - { text: '快速开始', link: '/' }, - { - text: '通用', - children: [ - { text: 'Button 按钮', link: '/components/button/', status: '已完成' }, - { text: 'Icon 图标', link: '/components/icon/', status: '已完成' }, - { text: 'DragDrop 拖拽', link: '/components/dragdrop/' }, - { text: 'Fullscreen 全屏', link: '/components/fullscreen/' }, - { text: 'Panel 面板', link: '/components/panel/', status: '已完成' }, - { text: 'Search 搜索框', link: '/components/search/', status: '已完成' }, - { text: 'Status 状态', link: '/components/status/', status: '已完成' }, - { text: 'Sticky 便贴', link: '/components/sticky/' }, - { text: 'Overlay 遮罩层', link: '/components/overlay/' } - ] - }, - { - text: '导航', - children: [ - { text: 'Accordion 手风琴', link: '/components/accordion/' }, - { text: 'Anchor 锚点', link: '/components/anchor/' }, - { text: 'BackTop 回到顶部', link: '/components/back-top/' }, - { text: 'Breadcrumb 面包屑', link: '/components/breadcrumb/' }, - { text: 'Dropdown 下拉菜单', link: '/components/dropdown/' }, - { text: 'NavSprite 导航精灵', link: '/components/nav-sprite/' }, - { text: 'Pagination 分页', link: '/components/pagination/', status: '开发中' }, - { text: 'StepsGuide 操作指引', link: '/components/steps-guide/' }, - { text: 'Tabs 选项卡', link: '/components/tabs/', status: '已完成' }, - { text: 'Anchor 锚点', link: '/components/Anchor/' }, - ] - }, - { - text: '反馈', - children: [ - { text: 'Alert 警告', link: '/components/alert/', status: '已完成' }, - { text: 'Drawer 抽屉板', link: '/components/drawer/' }, - { text: 'Loading 加载提示', link: '/components/loading/', status: '已完成' }, - { text: 'Mention 提及', link: '/components/mention/' }, - { text: 'Modal 模态弹窗', link: '/components/modal/' }, - { text: 'Popover 悬浮提示', link: '/components/popover/', status: "开发中" }, - { text: 'ReadTip 阅读提示', link: '/components/read-tip/' }, - { text: 'Toast 全局通知', link: '/components/toast/', status: '已完成' }, - { text: 'Tooltip 提示', link: '/components/tooltip/' }, - ] - }, - { - text: '数据录入', - children: [ - { text: 'AutoComplete 自动补全', link: '/components/auto-complete/' }, - { text: 'Cascader 级联菜单', link: '/components/cascader/' }, - { text: 'CategorySearch 分类搜索', link: '/components/category-search/' }, - { text: 'Checkbox 复选框', link: '/components/checkbox/', status: '已完成' }, - { text: 'DatePicker 日期选择器', link: '/components/date-picker/', status: '开发中' }, - { text: 'DatePickerPro 日期选择器', link: '/components/date-picker-pro/' }, - { text: 'EditableSelect 可编辑下拉框', link: '/components/editable-select/', status: '开发中' }, - { text: 'Form 表单', link: '/components/form/' }, - { text: 'Input 文本框', link: '/components/input/', status: '已完成' }, - { text: 'InputNumber 数字输入框', link: '/components/input-number/' }, - { text: 'MultiAutoComplete 多项自动补全', link: '/components/multi-auto-complete/' }, - { text: 'Radio 单选框', link: '/components/radio/', status: '已完成' }, - { text: 'Select 下拉选择框', link: '/components/select/', status: '开发中' }, - { text: 'Slider 滑块', link: '/components/slider/' }, - { text: 'Switch 开关', link: '/components/switch/', status: '已完成' }, - { text: 'TagInput 标签输入', link: '/components/tag-input/', status: '已完成' }, - { text: 'Textarea 多行文本框', link: '/components/textarea/' }, - { text: 'TimePicker 时间选择器', link: '/components/time-picker/' }, - { text: 'Transfer 穿梭框', link: '/components/transfer/' }, - { text: 'TreeSelect 树形选择框', link: '/components/tree-select/' }, - { text: 'Upload 上传', link: '/components/upload/', status: '开发中' }, - ] - }, - { - text: '数据展示', - children: [ - { text: 'Avatar 头像', link: '/components/avatar/', status: '已完成' }, - { text: 'Badge 徽标', link: '/components/badge/', status: '已完成' }, - { text: 'Card 卡片', link: '/components/card/', status: '已完成' }, - { text: 'Carousel 走马灯', link: '/components/carousel/', status: '已完成' }, - { text: 'DataTable 表格', link: '/components/data-table/' }, - { text: 'Gantt 甘特图', link: '/components/gantt/' }, - { text: 'ImagePreview 图片预览', link: '/components/image-preview/' }, - { text: 'Progress 进度条', link: '/components/progress/', status: '已完成' }, - { text: 'QuadrantDiagram 象限图', link: '/components/quadrant-diagram/' }, - { text: 'Rate 等级评估', link: '/components/rate/', status: '已完成' }, - { text: 'Tag 标签', link: '/components/tag/' }, - { text: 'Tree 树', link: '/components/tree/' }, - ] - }, - { - text: '布局', - children: [ - { text: 'Layout 布局', link: '/components/layout/' }, - { text: 'Splitter 分割器', link: '/components/splitter/', status: '开发中' } - ] - }, - ] + '/': [ + { text: '快速开始', link: '/' }, + { + text: '全局配置', link: '/components/global-config/', status: '开发中' + }, + { + text: '通用', + children: [ + { text: 'Button 按钮', link: '/components/button/', status: '已完成' }, + { text: 'Icon 图标', link: '/components/icon/', status: '已完成' }, + { text: 'DragDrop 拖拽', link: '/components/dragdrop/' }, + { text: 'Fullscreen 全屏', link: '/components/fullscreen/' }, + { text: 'Panel 面板', link: '/components/panel/', status: '已完成' }, + { text: 'Search 搜索框', link: '/components/search/', status: '已完成' }, + { text: 'Status 状态', link: '/components/status/', status: '已完成' }, + { text: 'Sticky 便贴', link: '/components/sticky/' }, + { text: 'Overlay 遮罩层', link: '/components/overlay/' } + ] + }, + { + text: '导航', + children: [ + { text: 'Accordion 手风琴', link: '/components/accordion/' }, + { text: 'Anchor 锚点', link: '/components/anchor/' }, + { text: 'BackTop 回到顶部', link: '/components/back-top/' }, + { text: 'Breadcrumb 面包屑', link: '/components/breadcrumb/' }, + { text: 'Dropdown 下拉菜单', link: '/components/dropdown/' }, + { text: 'NavSprite 导航精灵', link: '/components/nav-sprite/' }, + { text: 'Pagination 分页', link: '/components/pagination/', status: '开发中' }, + { text: 'StepsGuide 操作指引', link: '/components/steps-guide/' }, + { text: 'Tabs 选项卡', link: '/components/tabs/', status: '已完成' }, + { text: 'Anchor 锚点', link: '/components/Anchor/' }, + ] + }, + { + text: '反馈', + children: [ + { text: 'Alert 警告', link: '/components/alert/', status: '已完成' }, + { text: 'Drawer 抽屉板', link: '/components/drawer/' }, + { text: 'Loading 加载提示', link: '/components/loading/', status: '已完成' }, + { text: 'Mention 提及', link: '/components/mention/' }, + { text: 'Modal 模态弹窗', link: '/components/modal/' }, + { text: 'Popover 悬浮提示', link: '/components/popover/', status: "开发中" }, + { text: 'ReadTip 阅读提示', link: '/components/read-tip/' }, + { text: 'Toast 全局通知', link: '/components/toast/', status: '已完成' }, + { text: 'Tooltip 提示', link: '/components/tooltip/' }, + ] + }, + { + text: '数据录入', + children: [ + { text: 'AutoComplete 自动补全', link: '/components/auto-complete/' }, + { text: 'Cascader 级联菜单', link: '/components/cascader/' }, + { text: 'CategorySearch 分类搜索', link: '/components/category-search/' }, + { text: 'Checkbox 复选框', link: '/components/checkbox/', status: '已完成' }, + { text: 'DatePicker 日期选择器', link: '/components/date-picker/', status: '开发中' }, + { text: 'DatePickerPro 日期选择器', link: '/components/date-picker-pro/' }, + { text: 'EditableSelect 可编辑下拉框', link: '/components/editable-select/', status: '开发中' }, + { text: 'Form 表单', link: '/components/form/' }, + { text: 'Input 文本框', link: '/components/input/', status: '已完成' }, + { text: 'InputNumber 数字输入框', link: '/components/input-number/' }, + { text: 'MultiAutoComplete 多项自动补全', link: '/components/multi-auto-complete/' }, + { text: 'Radio 单选框', link: '/components/radio/', status: '已完成' }, + { text: 'Select 下拉选择框', link: '/components/select/', status: '开发中' }, + { text: 'Slider 滑块', link: '/components/slider/' }, + { text: 'Switch 开关', link: '/components/switch/', status: '已完成' }, + { text: 'TagInput 标签输入', link: '/components/tag-input/', status: '已完成' }, + { text: 'Textarea 多行文本框', link: '/components/textarea/' }, + { text: 'TimePicker 时间选择器', link: '/components/time-picker/' }, + { text: 'Transfer 穿梭框', link: '/components/transfer/' }, + { text: 'TreeSelect 树形选择框', link: '/components/tree-select/' }, + { text: 'Upload 上传', link: '/components/upload/', status: '开发中' }, + ] + }, + { + text: '数据展示', + children: [ + { text: 'Avatar 头像', link: '/components/avatar/', status: '已完成' }, + { text: 'Badge 徽标', link: '/components/badge/', status: '已完成' }, + { text: 'Card 卡片', link: '/components/card/', status: '已完成' }, + { text: 'Carousel 走马灯', link: '/components/carousel/', status: '已完成' }, + { text: 'DataTable 表格', link: '/components/data-table/' }, + { text: 'Gantt 甘特图', link: '/components/gantt/' }, + { text: 'ImagePreview 图片预览', link: '/components/image-preview/' }, + { text: 'Progress 进度条', link: '/components/progress/', status: '已完成' }, + { text: 'QuadrantDiagram 象限图', link: '/components/quadrant-diagram/' }, + { text: 'Rate 等级评估', link: '/components/rate/', status: '已完成' }, + { text: 'Tag 标签', link: '/components/tag/' }, + { text: 'Tree 树', link: '/components/tree/' }, + ] + }, + { + text: '布局', + children: [ + { text: 'Layout 布局', link: '/components/layout/' }, + { text: 'Splitter 分割器', link: '/components/splitter/', status: '开发中' } + ] + }, + ] } export default sidebar diff --git a/docs/components/global-config/index.md b/docs/components/global-config/index.md new file mode 100644 index 0000000000000000000000000000000000000000..a700112dc4a53516000ec652f57480b92eaf642b --- /dev/null +++ b/docs/components/global-config/index.md @@ -0,0 +1,39 @@ +# GlobalConfig 全局配置 + +### 基本用法 + + + + +去除动画展示 + + +```html + + +``` + + \ No newline at end of file