From 087dfa2f1b25f05503a0e484e684b657819a1ef2 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Mon, 20 Feb 2023 11:04:25 +0800 Subject: [PATCH] feat: tree-select add context size --- .../config-provider/hooks/useConfigInject.ts | 5 +- components/select/index.en-US.md | 2 +- components/select/index.tsx | 5 +- components/select/index.zh-CN.md | 2 +- components/space/index.tsx | 2 +- components/tree-select/index.en-US.md | 2 +- components/tree-select/index.tsx | 49 ++++++++++++------- components/tree-select/index.zh-CN.md | 2 +- components/vc-tree-select/TreeSelect.tsx | 1 + 9 files changed, 44 insertions(+), 26 deletions(-) diff --git a/components/config-provider/hooks/useConfigInject.ts b/components/config-provider/hooks/useConfigInject.ts index 7698782ea..0009bf044 100644 --- a/components/config-provider/hooks/useConfigInject.ts +++ b/components/config-provider/hooks/useConfigInject.ts @@ -1,9 +1,10 @@ -import { computed, inject } from 'vue'; +import { computed, h, inject } from 'vue'; import { defaultConfigProvider, configProviderKey } from '../context'; +import { DefaultRenderEmpty } from '../renderEmpty'; export default (name: string, props: Record) => { const configProvider = inject(configProviderKey, { ...defaultConfigProvider, - renderEmpty: () => null, + renderEmpty: (name?: string) => h(DefaultRenderEmpty, { componentName: name }), }); const prefixCls = computed(() => configProvider.getPrefixCls(name, props.prefixCls)); const direction = computed(() => props.direction ?? configProvider.direction?.value); diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index 707db3e9f..47b560915 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -32,7 +32,7 @@ Select component to select value from options. | defaultActiveFirstOption | Whether active first option by default | boolean | true | | | defaultOpen | Initial open state of dropdown | boolean | - | | | disabled | Whether disabled select | boolean | false | | -| dropdownClassName | className of dropdown menu | string | - | | +| popupClassName | className of dropdown menu | string | - | 4.0 | | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true | | | dropdownMenuStyle | additional style applied to dropdown menu | object | - | | | dropdownRender | Customize dropdown content | ({menuNode: VNode, props}) => VNode \| v-slot | - | | diff --git a/components/select/index.tsx b/components/select/index.tsx index 8bc44e0c0..d4cbf7be9 100644 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -142,10 +142,11 @@ const Select = defineComponent({ } = useConfigInject('select', props); const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction); const mergedSize = computed(() => compactSize.value || contextSize.value); - // style - const [wrapSSR, hashId] = useStyle(prefixCls); const contextDisabled = useInjectDisabled(); const mergedDisabled = computed(() => disabled.value ?? contextDisabled.value); + // style + const [wrapSSR, hashId] = useStyle(prefixCls); + const rootPrefixCls = computed(() => getPrefixCls()); // ===================== Placement ===================== const placement = computed(() => { diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 8b0e5dbb1..e37aae2dc 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -33,7 +33,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*zo76T7KQx2UAAAAAAA | defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | | | defaultOpen | 是否默认展开下拉菜单 | boolean | - | | | disabled | 是否禁用 | boolean | false | | -| dropdownClassName | 下拉菜单的 className 属性 | string | - | | +| popupClassName | 下拉菜单的 className 属性 | string | - | 4.0 | | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true | | | dropdownMenuStyle | dropdown 菜单自定义样式 | object | - | | | dropdownRender | 自定义下拉框内容 | ({menuNode: VNode, props}) => VNode \| v-slot | - | | diff --git a/components/space/index.tsx b/components/space/index.tsx index b480a333e..6dcb2b79e 100644 --- a/components/space/index.tsx +++ b/components/space/index.tsx @@ -97,7 +97,7 @@ const Space = defineComponent({ const horizontalSizeVal = horizontalSize.value; const latestIndex = len - 1; return ( -
+
{items.map((child, index) => { let itemStyle: CSSProperties = {}; if (!supportFlexGap.value) { diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md index 4cb1769de..527ec435b 100644 --- a/components/tree-select/index.en-US.md +++ b/components/tree-select/index.en-US.md @@ -20,7 +20,7 @@ Tree selection control. | allowClear | Whether allow clear | boolean | false | | | | defaultValue | To set the initial selected treeNode(s). | string\|string\[] | - | | | | disabled | Disabled or not | boolean | false | | | -| dropdownClassName | className of dropdown menu | string | - | | | +| popupClassName | className of dropdown menu | string | - | | 4.0 | | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true | | | | dropdownStyle | To set the style of the dropdown menu | object | - | | | | fieldNames | Replace the label,value, key and children fields in treeNode with the corresponding fields in treeData | object | {children:'children', label:'title', key:'key', value: 'value' } | | 3.0.0 | diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index 1aa425302..0760d5b68 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -1,5 +1,5 @@ import type { App, ExtractPropTypes } from 'vue'; -import { computed, ref, watchEffect, defineComponent } from 'vue'; +import { computed, ref, defineComponent } from 'vue'; import VcTreeSelect, { TreeNode, SHOW_ALL, @@ -33,6 +33,8 @@ import { booleanType, stringType, objectType, someType, functionType } from '../ // CSSINJS import useSelectStyle from '../select/style'; import useStyle from './style'; +import { useCompactItemContext } from '../space/Compact'; +import { useInjectDisabled } from '../config-provider/DisabledContext'; const getTransitionName = (rootPrefixCls: string, motion: string, transitionName?: string) => { if (transitionName !== undefined) { @@ -73,6 +75,9 @@ export function treeSelectProps< replaceFields: objectType(), placement: stringType(), status: stringType(), + popupClassName: String, + /** @deprecated Please use `popupClassName` instead */ + dropdownClassName: String, 'onUpdate:value': functionType<(value: any) => void>(), 'onUpdate:treeExpandedKeys': functionType<(keys: Key[]) => void>(), 'onUpdate:searchValue': functionType<(value: string) => void>(), @@ -105,18 +110,21 @@ const TreeSelect = defineComponent({ !(props.treeData === undefined && slots.default), '`children` of TreeSelect is deprecated. Please use `treeData` instead.', ); - watchEffect(() => { - devWarning( - props.multiple !== false || !props.treeCheckable, - 'TreeSelect', - '`multiple` will always be `true` when `treeCheckable` is true', - ); - devWarning( - props.replaceFields === undefined, - 'TreeSelect', - '`replaceFields` is deprecated, please use fieldNames instead', - ); - }); + devWarning( + props.multiple !== false || !props.treeCheckable, + 'TreeSelect', + '`multiple` will always be `true` when `treeCheckable` is true', + ); + devWarning( + props.replaceFields === undefined, + 'TreeSelect', + '`replaceFields` is deprecated, please use fieldNames instead', + ); + devWarning( + !props.dropdownClassName, + 'TreeSelect', + '`dropdownClassName` is deprecated. Please use `popupClassName` instead.', + ); const formItemContext = useInjectFormItemContext(); const formItemInputContext = FormItemInputContext.useInject(); @@ -127,10 +135,15 @@ const TreeSelect = defineComponent({ direction, virtual, dropdownMatchSelectWidth, - size, + size: contextSize, getPopupContainer, getPrefixCls, + disabled, } = useConfigInject('select', props); + const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction); + const mergedSize = computed(() => compactSize.value || contextSize.value); + const contextDisabled = useInjectDisabled(); + const mergedDisabled = computed(() => disabled.value ?? contextDisabled.value); const rootPrefixCls = computed(() => getPrefixCls()); // ===================== Placement ===================== const placement = computed(() => { @@ -160,7 +173,7 @@ const TreeSelect = defineComponent({ const mergedDropdownClassName = computed(() => classNames( - props.dropdownClassName, + props.popupClassName || props.dropdownClassName, `${treeSelectPrefixCls.value}-dropdown`, { [`${treeSelectPrefixCls.value}-dropdown-rtl`]: direction.value === 'rtl', @@ -255,13 +268,14 @@ const TreeSelect = defineComponent({ const mergedClassName = classNames( !customizePrefixCls && treeSelectPrefixCls.value, { - [`${prefixCls.value}-lg`]: size.value === 'large', - [`${prefixCls.value}-sm`]: size.value === 'small', + [`${prefixCls.value}-lg`]: mergedSize.value === 'large', + [`${prefixCls.value}-sm`]: mergedSize.value === 'small', [`${prefixCls.value}-rtl`]: direction.value === 'rtl', [`${prefixCls.value}-borderless`]: !bordered, [`${prefixCls.value}-in-form-item`]: isFormItemInput, }, getStatusClassNames(prefixCls.value, mergedStatus.value, hasFeedback), + compactItemClassnames.value, attrs.class, hashId.value, ); @@ -274,6 +288,7 @@ const TreeSelect = defineComponent({