feat(comp:tooltip,comp:tree,comp:tree-select): add offset prop (#1221)

IDuxFE · Oct 31, 2022 · f99028f · f99028f
1 parent 2d47151
commit f99028f
Show file tree

Hide file tree

Showing 21 changed files with 27 additions and 154 deletions.
diff --git a/packages/components/cascader/src/Cascader.tsx b/packages/components/cascader/src/Cascader.tsx
@@ -25,7 +25,7 @@ import OverlayContent from './contents/OverlayContent'
 import { cascaderToken } from './token'
 import { cascaderProps } from './types'
 
-const defaultOffset: [number, number] = [0, 8]
+const defaultOffset: [number, number] = [0, 4]
 
 export default defineComponent({
   name: 'IxCascader',

diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
@@ -106,7 +106,7 @@ export const defaultConfig: GlobalConfig = {
   dropdown: {
     autoAdjust: true,
     destroyOnHide: false,
-    offset: [0, 8],
+    offset: [0, 4],
     placement: 'bottomStart',
     showArrow: false,
     trigger: 'hover',
@@ -166,7 +166,7 @@ export const defaultConfig: GlobalConfig = {
   menu: {
     getKey: 'key',
     indent: 24,
-    offset: [0, 8],
+    offset: [0, 4],
     suffix: 'right',
     theme: 'light',
   },
@@ -214,6 +214,7 @@ export const defaultConfig: GlobalConfig = {
     destroyOnHide: false,
     placement: 'top',
     trigger: 'click',
+    offset: [0, 8],
   },
   popover: {
     autoAdjust: true,
@@ -223,6 +224,7 @@ export const defaultConfig: GlobalConfig = {
     showArrow: true,
     trigger: 'hover',
     closeIcon: 'close',
+    offset: [0, 8],
   },
   progress: {
     strokeLinecap: 'round',
@@ -251,6 +253,7 @@ export const defaultConfig: GlobalConfig = {
     getKey: 'key',
     clearIcon: 'close-circle',
     labelKey: 'label',
+    offset: [0, 4],
     overlayMatchWidth: true,
     size: 'md',
     suffix: 'down',
@@ -337,6 +340,7 @@ export const defaultConfig: GlobalConfig = {
     autoAdjust: true,
     delay: 100,
     destroyOnHide: false,
+    offset: [0, 8],
     placement: 'top',
     trigger: 'hover',
   },
@@ -356,6 +360,7 @@ export const defaultConfig: GlobalConfig = {
     clearIcon: 'close-circle',
     labelKey: 'label',
     getKey: 'key',
+    offset: [0, 4],
     overlayMatchWidth: true,
     size: 'md',
     suffix: 'down',

diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
@@ -333,6 +333,7 @@ export interface PopconfirmConfig {
   overlayContainer?: PortalTargetType
   placement: PopperPlacement
   trigger: PopperTrigger
+  offset: [number, number]
 }
 
 export interface PopoverConfig {
@@ -344,6 +345,7 @@ export interface PopoverConfig {
   showArrow: boolean
   trigger: PopperTrigger
   closeIcon: string
+  offset: [number, number]
 }
 
 export interface ProgressConfig {
@@ -382,6 +384,7 @@ export interface SelectConfig {
   clearIcon: string
   getKey: string | ((data: SelectData<any>) => any)
   labelKey: string
+  offset: [number, number]
   overlayContainer?: PortalTargetType
   overlayMatchWidth: boolean
   size: FormSize
@@ -501,6 +504,7 @@ export interface TooltipConfig {
   destroyOnHide: boolean
   overlayContainer?: PortalTargetType
   placement: PopperPlacement
+  offset: [number, number]
   trigger: PopperTrigger
 }
 
@@ -521,6 +525,7 @@ export interface TreeSelectConfig {
   clearIcon: string
   getKey: string | ((data: TreeNode<any>) => any)
   labelKey: string
+  offset: [number, number]
   overlayContainer?: PortalTargetType
   overlayMatchWidth: boolean
   size: FormSize

diff --git a/packages/components/date-picker/src/composables/useOverlayProps.ts b/packages/components/date-picker/src/composables/useOverlayProps.ts
@@ -12,7 +12,7 @@ import { useOverlayContainer } from '@idux/components/utils'
 
 import { type DatePickerContext, type DateRangePickerContext } from '../token'
 
-const defaultOffset: [number, number] = [0, 8]
+const defaultOffset: [number, number] = [0, 4]
 export function useOverlayProps(context: DatePickerContext | DateRangePickerContext): ComputedRef<ɵOverlayProps> {
   const { props, common, config, accessor, mergedPrefixCls, overlayOpened, setOverlayOpened, onAfterLeave } = context
   const mergedOverlayContainer = useOverlayContainer(props, config, common, mergedPrefixCls)

diff --git a/packages/components/menu/docs/Api.zh.md b/packages/components/menu/docs/Api.zh.md
@@ -67,7 +67,7 @@ export type MenuCustomAdditional = (options: { data: MenuData; index: number })
 | `disabled` | 是否禁用 | `boolean` | - | - | - |
 | `icon` | 菜单图标| `string \| VNode` | - | - |
 | `label` | 菜单文本 | `string`  | - | - |
-| `offset` | 浮层偏移量 | `[number, number]` | `[0, 8]` | ✅ | `inline` 模式时无效 |
+| `offset` | 浮层偏移量 | `[number, number]` | `[0, 4]` | ✅ | `inline` 模式时无效 |
 | `suffix` | 后缀图标 | `string` | `right` | ✅ | - |
 | `customIcon` | 自定义图标 | `string \| ((data: MenuSubProps & { expanded: boolean; selected: boolean }) => VNodeChild)` | `'subIcon'` | - | 类型为 `string` 时，对应插槽名 |
 | `customLabel` | 自定义文本 | `string \| ((data: MenuSubProps & { expanded: boolean; selected: boolean }) => VNodeChild)` | `'subLabel'` | - | 类型为 `string` 时，对应插槽名 |

diff --git a/packages/components/select/docs/Api.zh.md b/packages/components/select/docs/Api.zh.md
@@ -25,6 +25,7 @@
 | `maxLabel` | 最多显示多少个标签，响应式模式会对性能产生损耗 | `number \| 'responsive'` | - | - | - |
 | `multiple` | 多选模式 | `boolean` | `false` | - | - |
 | `multipleLimit` | 最多选中多少项 | `number` | - | - | - |
+| `offset` | 浮层相对目标元素的偏移量 | `[number, number]` | `[0, 4]` | ✅ | 第一个元素是水平偏移量，第二个元素是垂直偏移量 |
 | `overlayClassName` | 下拉菜单的 `class`  | `string` | - | - | - |
 | `overlayContainer` | 自定义下拉框容器节点  | `string \| HTMLElement \| () => string \| HTMLElement` | - | ✅ | - |
 | `overlayMatchWidth` | 下拉菜单和选择器同宽  | `boolean` | `true` | ✅ | - |

diff --git a/packages/components/select/src/Select.tsx b/packages/components/select/src/Select.tsx
@@ -30,8 +30,6 @@ import Panel from './panel/Panel'
 import { SELECT_PANEL_DATA_TOKEN } from './token'
 import { type SelectData, type SelectPanelInstance, type SelectProps, selectProps } from './types'
 
-const defaultOffset: [number, number] = [0, 8]
-
 export default defineComponent({
   name: 'IxSelect',
   inheritAttrs: false,
@@ -200,7 +198,7 @@ export default defineComponent({
         clickOutside: true,
         container: mergedOverlayContainer.value,
         disabled: accessor.disabled || props.readonly,
-        offset: defaultOffset,
+        offset: props.offset ?? config.offset,
         placement: 'bottomStart',
         trigger: 'manual',
         triggerId: attrs.id,

diff --git a/packages/components/select/src/types.ts b/packages/components/select/src/types.ts
@@ -64,6 +64,7 @@ export const selectProps = {
   maxLabel: { type: [Number, String] as PropType<number | 'responsive'>, default: Number.MAX_SAFE_INTEGER },
   multiple: { type: Boolean, default: false },
   multipleLimit: { type: Number, default: Number.MAX_SAFE_INTEGER },
+  offset: Array as unknown as PropType<[number, number]>,
   overlayClassName: { type: String, default: undefined },
   overlayContainer: {
     type: [String, HTMLElement, Function] as PropType<PortalTargetType>,

diff --git a/packages/components/time-picker/src/composables/useOverlayProps.ts b/packages/components/time-picker/src/composables/useOverlayProps.ts
@@ -13,7 +13,7 @@ import { useOverlayContainer } from '@idux/components/utils'
 
 import { TimePickerContext, TimeRangePickerContext } from '../tokens'
 
-const defaultOffset: [number, number] = [0, 8]
+const defaultOffset: [number, number] = [0, 4]
 export function useOverlayProps(context: TimePickerContext | TimeRangePickerContext): ComputedRef<ɵOverlayProps> {
   const { props, common, config, accessor, mergedPrefixCls, overlayOpened, setOverlayOpened } = context
   const mergedOverlayContainer = useOverlayContainer(props, config, common, mergedPrefixCls)

diff --git a/packages/components/tooltip/docs/Api.zh.md b/packages/components/tooltip/docs/Api.zh.md
@@ -11,6 +11,7 @@
 | `closeOnDeactivated` | 是否在 [onDeactivated](https://cn.vuejs.org/api/composition-api-lifecycle.html#ondeactivated) 时关闭 | `boolean` | `true` | - | - |
 | `destroyOnHide` | 隐藏时是否销毁浮层 | `boolean` | `false` | ✅ | - |
 | `delay` | 浮层显示隐藏延时 | `number \| [number, number]` | `100` | ✅ | - |
+| `offset` | 浮层相对目标元素的偏移量 | `[number, number]` | `[0, 12]` | ✅ | 第一个元素是水平偏移量，第二个元素是垂直偏移量 |
 | `overlayContainer` | 自定义容器节点 | `string \| HTMLElement \| () => string \| HTMLElement` | - | ✅ | - |
 | `placement` | 浮层的对齐方式 | `OverlayPlacement` | `top` | ✅ | - |
 | `title` | 浮层的标题 | `string \| #title` | - | - | - |

diff --git a/packages/components/tooltip/src/useTooltipOverlay.ts b/packages/components/tooltip/src/useTooltipOverlay.ts
@@ -14,8 +14,6 @@ import { useOverlayContainer, useZIndex } from '@idux/components/utils'
 
 import { type TooltipProps } from './types'
 
-const defaultOffset: [number, number] = [0, 12]
-
 export interface TooltipOverlayContext {
   overlayRef: Ref<ɵOverlayInstance | undefined>
   updatePopper: () => void | undefined
@@ -54,7 +52,7 @@ export function useTooltipOverlay(
       container: mergedOverlayContainer.value,
       delay: props.delay ?? config.delay,
       destroyOnHide: props.destroyOnHide ?? config.destroyOnHide,
-      offset: props.offset ?? defaultOffset,
+      offset: props.offset ?? config.offset,
       showArrow: true,
       placement: props.placement ?? config.placement,
       trigger: trigger,

diff --git a/packages/components/tree-select/demo/Cascade.md b/packages/components/tree-select/demo/Cascade.md
diff --git a/packages/components/tree-select/demo/Cascade.vue b/packages/components/tree-select/demo/Cascade.vue
diff --git a/packages/components/tree-select/demo/CascaderStrategy.vue b/packages/components/tree-select/demo/CascaderStrategy.vue
@@ -9,6 +9,7 @@
     <IxTreeSelect
       v-model:value="value"
       v-model:expandedKeys="expandedKeys"
+      checkable
       multiple
       :cascaderStrategy="cascaderStrategy"
       :dataSource="treeData"

diff --git a/packages/components/tree-select/demo/Multiple.vue b/packages/components/tree-select/demo/Multiple.vue
@@ -6,6 +6,7 @@
       v-model:expandedKeys="expandedKeys"
       placeholder="多选"
       multiple
+      cascaderStrategy="all"
       :dataSource="treeData"
       :checkable="checkable"
     />

diff --git a/packages/components/tree-select/docs/Api.zh.md b/packages/components/tree-select/docs/Api.zh.md
@@ -32,6 +32,7 @@
 | `loadChildren` | 加载子节点数据 | `(node: TreeSelectNode) => Promise<TreeSelectNode[]>` | - | - | - |
 | `maxLabel` | 最多显示多少个标签，响应式模式会对性能产生损耗 | `number \| 'responsive'` | - | - | - |
 | `multiple` | 多选模式 | `boolean` | `false` | - | - |
+| `offset` | 浮层相对目标元素的偏移量 | `[number, number]` | `[0, 4]` | ✅ | 第一个元素是水平偏移量，第二个元素是垂直偏移量 |
 | `overlayClassName` | 下拉菜单的 `class`  | `string` | - | - | - |
 | `overlayContainer` | 自定义浮层容器节点  | `string \| HTMLElement \| () => string \| HTMLElement` | - | ✅ | - |
 | `overlayMatchWidth` | 下拉菜单和选择器同宽  | `boolean` | `true` | ✅ | - |

diff --git a/packages/components/tree-select/src/TreeSelect.tsx b/packages/components/tree-select/src/TreeSelect.tsx
@@ -24,8 +24,6 @@ import Content from './content/Content'
 import { treeSelectToken } from './token'
 import { treeSelectProps } from './types'
 
-const defaultOffset: [number, number] = [0, 8]
-
 export default defineComponent({
   name: 'IxTreeSelect',
   inheritAttrs: false,
@@ -184,7 +182,7 @@ export default defineComponent({
         clickOutside: true,
         container: mergedOverlayContainer.value,
         disabled: accessor.disabled || props.readonly,
-        offset: defaultOffset,
+        offset: props.offset ?? config.offset,
         placement: 'bottomStart',
         trigger: 'manual',
         triggerId: attrs.id,

diff --git a/packages/components/tree-select/src/types.ts b/packages/components/tree-select/src/types.ts
@@ -49,6 +49,7 @@ export const treeSelectProps = {
   },
   maxLabel: { type: [Number, String] as PropType<number | 'responsive'>, default: Number.MAX_SAFE_INTEGER },
   multiple: { type: Boolean, default: false },
+  offset: Array as unknown as PropType<[number, number]>,
   overlayClassName: { type: String, default: undefined },
   overlayContainer: {
     type: [String, HTMLElement, Function] as PropType<PortalTargetType>,

diff --git a/packages/components/tree/demo/Cascade.md b/packages/components/tree/demo/Cascade.md
diff --git a/packages/components/tree/demo/Cascade.vue b/packages/components/tree/demo/Cascade.vue
diff --git a/packages/pro/search/src/composables/useCommonOverlayProps.ts b/packages/pro/search/src/composables/useCommonOverlayProps.ts
@@ -19,6 +19,6 @@ export function useCommonOverlayProps(
   return computed(() => ({
     container: props.overlayContainer || config.overlayContainer || `.${mergedPrefixCls.value}-overlay-container`,
     placement: 'bottomStart',
-    offset: [0, 8],
+    offset: [0, 4],
   }))
 }