vxe-pc-ui 3.17.6 → 3.17.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (97) hide show
  1. package/es/button/src/button.js +2 -2
  2. package/es/button-group/style.css +1 -1
  3. package/es/button-group/style.min.css +1 -1
  4. package/es/color-picker/src/color-picker.js +14 -8
  5. package/es/date-picker/src/date-picker.js +2 -2
  6. package/es/date-range-picker/src/date-range-picker.js +2 -2
  7. package/es/drawer/src/drawer.js +2 -2
  8. package/es/icon/style.css +1 -1
  9. package/es/icon-picker/src/icon-picker.js +2 -2
  10. package/es/menu/src/menu.js +2 -2
  11. package/es/modal/src/modal.js +2 -2
  12. package/es/select/src/select.js +2 -2
  13. package/es/style.css +1 -1
  14. package/es/style.min.css +1 -1
  15. package/es/table-select/src/table-select.js +2 -2
  16. package/es/tooltip/src/tooltip.js +72 -127
  17. package/es/tree/src/tree.js +2 -2
  18. package/es/tree-select/src/tree-select.js +2 -2
  19. package/es/ui/index.js +4 -4
  20. package/es/ui/src/dom.js +114 -81
  21. package/es/ui/src/log.js +1 -1
  22. package/es/vxe-button-group/style.css +1 -1
  23. package/es/vxe-button-group/style.min.css +1 -1
  24. package/lib/button/src/button.js +1 -1
  25. package/lib/button/src/button.min.js +1 -1
  26. package/lib/button-group/style/style.css +1 -1
  27. package/lib/button-group/style/style.min.css +1 -1
  28. package/lib/color-picker/src/color-picker.js +16 -7
  29. package/lib/color-picker/src/color-picker.min.js +1 -1
  30. package/lib/date-picker/src/date-picker.js +1 -1
  31. package/lib/date-picker/src/date-picker.min.js +1 -1
  32. package/lib/date-range-picker/src/date-range-picker.js +1 -1
  33. package/lib/date-range-picker/src/date-range-picker.min.js +1 -1
  34. package/lib/drawer/src/drawer.js +1 -1
  35. package/lib/drawer/src/drawer.min.js +1 -1
  36. package/lib/icon/style/style.css +1 -1
  37. package/lib/icon/style/style.min.css +1 -1
  38. package/lib/icon-picker/src/icon-picker.js +1 -1
  39. package/lib/icon-picker/src/icon-picker.min.js +1 -1
  40. package/lib/index.umd.js +219 -228
  41. package/lib/index.umd.min.js +1 -1
  42. package/lib/menu/src/menu.js +1 -1
  43. package/lib/menu/src/menu.min.js +1 -1
  44. package/lib/modal/src/modal.js +1 -1
  45. package/lib/modal/src/modal.min.js +1 -1
  46. package/lib/select/src/select.js +1 -1
  47. package/lib/select/src/select.min.js +1 -1
  48. package/lib/style.css +1 -1
  49. package/lib/style.min.css +1 -1
  50. package/lib/table-select/src/table-select.js +1 -1
  51. package/lib/table-select/src/table-select.min.js +1 -1
  52. package/lib/tooltip/src/tooltip.js +78 -126
  53. package/lib/tooltip/src/tooltip.min.js +1 -1
  54. package/lib/tree/src/tree.js +3 -2
  55. package/lib/tree/src/tree.min.js +1 -1
  56. package/lib/tree-select/src/tree-select.js +1 -1
  57. package/lib/tree-select/src/tree-select.min.js +1 -1
  58. package/lib/ui/index.js +4 -4
  59. package/lib/ui/index.min.js +1 -1
  60. package/lib/ui/src/dom.js +109 -79
  61. package/lib/ui/src/dom.min.js +1 -1
  62. package/lib/ui/src/log.js +1 -1
  63. package/lib/ui/src/log.min.js +1 -1
  64. package/lib/vxe-button-group/style/style.css +1 -1
  65. package/lib/vxe-button-group/style/style.min.css +1 -1
  66. package/package.json +1 -1
  67. package/packages/button/src/button.ts +2 -2
  68. package/packages/color-picker/src/color-picker.ts +14 -8
  69. package/packages/date-picker/src/date-picker.ts +2 -2
  70. package/packages/date-range-picker/src/date-range-picker.ts +2 -2
  71. package/packages/drawer/src/drawer.ts +2 -2
  72. package/packages/icon-picker/src/icon-picker.ts +2 -2
  73. package/packages/menu/src/menu.ts +2 -2
  74. package/packages/modal/src/modal.ts +2 -2
  75. package/packages/select/src/select.ts +2 -2
  76. package/packages/table-select/src/table-select.ts +2 -2
  77. package/packages/tooltip/src/tooltip.ts +74 -126
  78. package/packages/tree/src/tree.ts +2 -2
  79. package/packages/tree-select/src/tree-select.ts +2 -2
  80. package/packages/ui/index.ts +3 -3
  81. package/packages/ui/src/dom.ts +125 -84
  82. package/styles/components/button-group.scss +4 -2
  83. package/types/components/color-picker.d.ts +2 -0
  84. package/types/components/table.d.ts +6 -0
  85. package/types/components/tooltip.d.ts +4 -0
  86. /package/es/icon/{iconfont.1787137242564.ttf → iconfont.1787216119203.ttf} +0 -0
  87. /package/es/icon/{iconfont.1787137242564.woff → iconfont.1787216119203.woff} +0 -0
  88. /package/es/icon/{iconfont.1787137242564.woff2 → iconfont.1787216119203.woff2} +0 -0
  89. /package/es/{iconfont.1787137242564.ttf → iconfont.1787216119203.ttf} +0 -0
  90. /package/es/{iconfont.1787137242564.woff → iconfont.1787216119203.woff} +0 -0
  91. /package/es/{iconfont.1787137242564.woff2 → iconfont.1787216119203.woff2} +0 -0
  92. /package/lib/icon/style/{iconfont.1787137242564.ttf → iconfont.1787216119203.ttf} +0 -0
  93. /package/lib/icon/style/{iconfont.1787137242564.woff → iconfont.1787216119203.woff} +0 -0
  94. /package/lib/icon/style/{iconfont.1787137242564.woff2 → iconfont.1787216119203.woff2} +0 -0
  95. /package/lib/{iconfont.1787137242564.ttf → iconfont.1787216119203.ttf} +0 -0
  96. /package/lib/{iconfont.1787137242564.woff → iconfont.1787216119203.woff} +0 -0
  97. /package/lib/{iconfont.1787137242564.woff2 → iconfont.1787216119203.woff2} +0 -0
@@ -3,7 +3,7 @@ import { defineVxeComponent } from '../../ui/src/comp'
3
3
  import XEUtils from 'xe-utils'
4
4
  import { getConfig, createEvent, globalMixins } from '../../ui'
5
5
  import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
6
- import { toCssUnit } from '../../ui/src/dom'
6
+ import { getPopupAppendElement, toCssUnit, updatePanelPlacement } from '../../ui/src/dom'
7
7
  import { getSlotVNs } from '../../ui/src/vn'
8
8
 
9
9
  import type { VxeTooltipPropTypes, VxeTooltipEmits, TooltipReactData, TooltipInternalData, VxeComponentSizeType, ValueOf, VxeComponentStyleType } from '../../../types'
@@ -114,6 +114,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
114
114
  leaveDelay: {
115
115
  type: Number as PropType<VxeTooltipPropTypes.LeaveDelay>,
116
116
  default: () => getConfig().tooltip.leaveDelay
117
+ },
118
+ appendTo: {
119
+ type: [String, Function] as PropType<VxeTooltipPropTypes.AppendTo>,
120
+ default: () => getConfig().tooltip.appendTo
117
121
  }
118
122
  },
119
123
  data () {
@@ -224,25 +228,59 @@ export default /* define-vxe-component start */ defineVxeComponent({
224
228
 
225
229
  return $xeTooltip.handleVisible(target, content)
226
230
  },
227
- updatePlacement () {
231
+ updateTipStyle () {
228
232
  const $xeTooltip = this
233
+ const props = $xeTooltip
229
234
  const reactData = $xeTooltip.reactData
230
235
 
231
- const { visible, tipTarget } = reactData
232
- let el = $xeTooltip.$refs.refElem as HTMLElement
233
- if (visible && tipTarget && el) {
234
- $xeTooltip.updateTipStyle()
236
+ const { placement, defaultPlacement, isArrow } = props
237
+ const { tipTarget: targetElem, tipStore, tipPos, tipZindex } = reactData
238
+ const panelElem = $xeTooltip.$refs.refElem as HTMLElement
239
+ if (!targetElem || !panelElem) {
240
+ return
235
241
  }
236
- return $xeTooltip.$nextTick().then(() => {
237
- const { tipTarget } = reactData
238
- el = $xeTooltip.$refs.refElem as HTMLElement
239
- if (tipTarget && el) {
240
- $xeTooltip.updateTipStyle()
241
- return $xeTooltip.$nextTick().then(() => {
242
- $xeTooltip.updateTipStyle()
243
- })
242
+ const targetRect = targetElem.getBoundingClientRect()
243
+
244
+ const targetWidth = targetElem.offsetWidth
245
+ const targetHeight = targetElem.offsetHeight
246
+ const panelWidth = panelElem.offsetWidth
247
+
248
+ const targetLeft = targetRect.left
249
+ const targetTop = targetRect.top
250
+
251
+ // 支持特殊定位逻辑
252
+ let left = targetLeft
253
+ let top = targetTop + targetHeight
254
+ if (tipPos && (tipPos.oLeft || tipPos.oTop)) {
255
+ if (isArrow) {
256
+ left = left + Math.max(8, Math.min(targetWidth - 8, tipPos.oLeft)) - panelWidth / 2
257
+ } else {
258
+ left = tipPos.x + 1
259
+ top = tipPos.y + 1
244
260
  }
261
+ } else {
262
+ left = targetLeft + (targetWidth - panelWidth) / 2
263
+ }
264
+
265
+ const ppObj = updatePanelPlacement(targetElem, panelElem, {
266
+ defaultTop: top,
267
+ defaultLeft: left,
268
+ placement: placement,
269
+ defaultPlacement: defaultPlacement,
270
+ teleportTo: true
271
+ })
272
+ const panelStyle = Object.assign(ppObj.style, {
273
+ zIndex: tipZindex
245
274
  })
275
+ tipStore.placement = ppObj.placement
276
+ tipStore.style = panelStyle
277
+ tipStore.arrowStyle.left = `${ppObj.arrowLeft}px`
278
+ },
279
+ updatePlacement () {
280
+ const $xeTooltip = this
281
+
282
+ $xeTooltip.updateTipStyle()
283
+ return $xeTooltip.$nextTick().then(() => $xeTooltip.updateTipStyle())
246
284
  },
247
285
  isActived () {
248
286
  const $xeTooltip = this
@@ -256,101 +294,6 @@ export default /* define-vxe-component start */ defineVxeComponent({
256
294
 
257
295
  reactData.tipActive = !!active
258
296
  },
259
- updateTipStyle () {
260
- const $xeTooltip = this
261
- const props = $xeTooltip
262
- const reactData = $xeTooltip.reactData
263
-
264
- const { isArrow, placement, defaultPlacement } = props
265
- const { tipTarget: targetElem, tipStore, tipPos } = reactData
266
- let top: number | '' = ''
267
- let left: number | '' = ''
268
- let panelPlacement: 'top' | 'bottom' = 'bottom'
269
- let arrowLeft: number | '' = ''
270
- const panelElem = $xeTooltip.$refs.refElem as HTMLElement
271
- if (panelElem && targetElem) {
272
- const documentElement = document.documentElement
273
- const bodyElem = document.body
274
- const targetWidth = targetElem.offsetWidth
275
- const targetHeight = targetElem.offsetHeight
276
- const panelHeight = panelElem.offsetHeight
277
- const panelWidth = panelElem.offsetWidth
278
-
279
- const targetRect = targetElem.getBoundingClientRect()
280
- const visibleHeight = documentElement.clientHeight || bodyElem.clientHeight
281
- const visibleWidth = documentElement.clientWidth || bodyElem.clientWidth
282
-
283
- const marginSize = 6
284
- left = targetRect.left
285
- top = targetRect.top + targetHeight
286
- if (tipPos && (tipPos.oLeft || tipPos.oTop)) {
287
- if (isArrow) {
288
- left = left + Math.max(8, Math.min(targetWidth - 8, tipPos.oLeft)) - panelWidth / 2
289
- } else {
290
- left = tipPos.x + 1
291
- top = tipPos.y + 1
292
- }
293
- } else {
294
- left = targetRect.left + (targetWidth - panelWidth) / 2
295
- }
296
- if (placement === 'top') {
297
- panelPlacement = 'top'
298
- top = targetRect.top - panelHeight
299
- } else if (!placement) {
300
- if (defaultPlacement === 'top') {
301
- panelPlacement = 'top'
302
- top = targetRect.top - panelHeight
303
- // 如果上面不够放,则向下
304
- if (top < marginSize) {
305
- panelPlacement = 'bottom'
306
- top = targetRect.top + targetHeight
307
- }
308
- // 如果下面不够放,则向上(优先)
309
- if (top + panelHeight + marginSize > visibleHeight) {
310
- panelPlacement = 'top'
311
- top = targetRect.top - panelHeight
312
- }
313
- } else {
314
- // 如果下面不够放,则向上
315
- if (top + panelHeight + marginSize > visibleHeight) {
316
- panelPlacement = 'top'
317
- top = targetRect.top - panelHeight
318
- }
319
- // 如果上面不够放,则向下(优先)
320
- if (top < marginSize) {
321
- panelPlacement = 'bottom'
322
- top = targetRect.top + targetHeight
323
- }
324
- }
325
- }
326
- // 如果溢出右边
327
- if (left + panelWidth + marginSize > visibleWidth) {
328
- left -= left + panelWidth + marginSize - visibleWidth
329
- }
330
- // 如果溢出左边
331
- if (left < marginSize) {
332
- left = marginSize
333
- }
334
-
335
- // 箭头
336
- if (left === targetRect.left) {
337
- if (targetWidth <= panelWidth) {
338
- arrowLeft = targetWidth / 2
339
- }
340
- } else if (left < targetRect.left) {
341
- if (left + panelWidth > targetRect.left + targetWidth) {
342
- arrowLeft = (targetRect.left - left) + targetWidth / 2
343
- } else {
344
- arrowLeft = (targetRect.left - left) + (panelWidth - (targetRect.left - left)) / 2
345
- }
346
- }
347
-
348
- tipStore.placement = panelPlacement
349
- tipStore.style.top = `${top}px`
350
- tipStore.style.left = `${left}px`
351
- tipStore.arrowStyle.left = `${arrowLeft}px`
352
- }
353
- },
354
297
  updateValue (value: VxeTooltipPropTypes.ModelValue) {
355
298
  const $xeTooltip = this
356
299
  const reactData = $xeTooltip.reactData
@@ -361,11 +304,15 @@ export default /* define-vxe-component start */ defineVxeComponent({
361
304
  $xeTooltip.emitModel(value)
362
305
  }
363
306
  },
364
- updateZindex () {
307
+ updateZIndex () {
365
308
  const $xeTooltip = this
309
+ const props = $xeTooltip
366
310
  const reactData = $xeTooltip.reactData
367
311
 
368
- if (reactData.tipZindex < getLastZIndex()) {
312
+ const { zIndex } = props
313
+ if (zIndex) {
314
+ reactData.tipZindex = XEUtils.toNumber(zIndex)
315
+ } else if (reactData.tipZindex < getLastZIndex()) {
369
316
  reactData.tipZindex = nextZIndex()
370
317
  }
371
318
  },
@@ -430,16 +377,17 @@ export default /* define-vxe-component start */ defineVxeComponent({
430
377
  const props = $xeTooltip
431
378
  const reactData = $xeTooltip.reactData
432
379
 
380
+ const { appendTo } = props
433
381
  const { tipStore } = reactData
434
- const el = $xeTooltip.$refs.refElem as HTMLElement
435
- if (el) {
436
- const parentNode = el.parentNode
382
+ const panelElem = $xeTooltip.$refs.refElem as HTMLElement
383
+ if (panelElem) {
384
+ const parentNode = panelElem.parentNode
437
385
  if (!parentNode) {
438
- document.body.appendChild(el)
386
+ getPopupAppendElement(appendTo).appendChild(panelElem)
439
387
  }
440
388
  }
441
389
  $xeTooltip.updateValue(true)
442
- $xeTooltip.updateZindex()
390
+ $xeTooltip.updateZIndex()
443
391
  tipStore.placement = 'top'
444
392
  tipStore.style = { width: 'auto', left: 0, top: 0, zIndex: props.zIndex || reactData.tipZindex }
445
393
  tipStore.arrowStyle = { left: '50%' }
@@ -631,21 +579,21 @@ export default /* define-vxe-component start */ defineVxeComponent({
631
579
  }
632
580
  $xeTooltip.$nextTick(() => {
633
581
  const { trigger, content } = props
634
- const wrapperElem = $xeTooltip.$refs.refElem as HTMLElement
635
- if (wrapperElem) {
636
- const parentNode = wrapperElem.parentNode
582
+ const panelElem = $xeTooltip.$refs.refElem as HTMLElement
583
+ if (panelElem) {
584
+ const parentNode = panelElem.parentNode
637
585
  if (parentNode) {
638
586
  reactData.tipContent = content
639
587
  reactData.tipZindex = nextZIndex()
640
- XEUtils.arrayEach(wrapperElem.children, (elem, index) => {
588
+ XEUtils.arrayEach(panelElem.children, (elem, index) => {
641
589
  if (index) {
642
- parentNode.insertBefore(elem, wrapperElem)
590
+ parentNode.insertBefore(elem, panelElem)
643
591
  if (!reactData.target) {
644
592
  reactData.target = elem as HTMLElement
645
593
  }
646
594
  }
647
595
  })
648
- parentNode.removeChild(wrapperElem)
596
+ parentNode.removeChild(panelElem)
649
597
  const { target } = reactData
650
598
  if (target) {
651
599
  if (trigger === 'hover') {
@@ -667,7 +615,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
667
615
  const reactData = $xeTooltip.reactData
668
616
 
669
617
  const { target } = reactData
670
- const wrapperElem = $xeTooltip.$refs.refElem as HTMLElement
618
+ const panelElem = $xeTooltip.$refs.refElem as HTMLElement
671
619
  if (target) {
672
620
  target.onmouseenter = null
673
621
  target.onmouseleave = null
@@ -677,10 +625,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
677
625
  if (contentWrapperfEl) {
678
626
  contentWrapperfEl.removeEventListener('wheel', $xeTooltip.wheelEvent)
679
627
  }
680
- if (wrapperElem) {
681
- const parentNode = wrapperElem.parentNode
628
+ if (panelElem) {
629
+ const parentNode = panelElem.parentNode
682
630
  if (parentNode) {
683
- parentNode.removeChild(wrapperElem)
631
+ parentNode.removeChild(panelElem)
684
632
  }
685
633
  }
686
634
  },
@@ -3596,11 +3596,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
3596
3596
  const slots = $xeTree.$scopedSlots
3597
3597
  const internalData = $xeTree.internalData
3598
3598
 
3599
- const { transform, emptyText } = props
3599
+ const { loading, transform, emptyText } = props
3600
3600
  const { treeExpandedMaps } = internalData
3601
3601
  const childrenField = $xeTree.computeChildrenField
3602
3602
  const emptySlot = slots.empty
3603
- if (!treeList.length) {
3603
+ if (!loading && !treeList.length) {
3604
3604
  return [
3605
3605
  h('div', {
3606
3606
  class: 'vxe-tree--empty-placeholder'
@@ -2,7 +2,7 @@ import { PropType, CreateElement, VNode } from 'vue'
2
2
  import { defineVxeComponent } from '../../ui/src/comp'
3
3
  import XEUtils from 'xe-utils'
4
4
  import { getConfig, getI18n, getIcon, globalEvents, createEvent, globalMixins, renderEmptyElement } from '../../ui'
5
- import { getEventTargetNode, updatePanelPlacement, toCssUnit, getPopupContainer } from '../../ui/src/dom'
5
+ import { getEventTargetNode, updatePanelPlacement, toCssUnit, getPopupAppendElement } from '../../ui/src/dom'
6
6
  import { getLastZIndex, nextZIndex, deModelValue } from '../../ui/src/utils'
7
7
  import { createComponentLog } from '../../ui/src/log'
8
8
  import { getSlotVNs } from '../../ui/src/vn'
@@ -601,7 +601,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
601
601
  if (btnTransfer) {
602
602
  if (panelElem) {
603
603
  const { appendTo } = popupOpts
604
- getPopupContainer(appendTo).appendChild(panelElem)
604
+ getPopupAppendElement(appendTo).appendChild(panelElem)
605
605
  }
606
606
  }
607
607
  }
@@ -428,7 +428,8 @@ setConfig({
428
428
  theme: 'dark',
429
429
  enterDelay: 500,
430
430
  leaveDelay: 300,
431
- isArrow: true
431
+ isArrow: true,
432
+ defaultPlacement: 'top'
432
433
  },
433
434
  transfer: {},
434
435
  tree: {
@@ -442,8 +443,7 @@ setConfig({
442
443
  tooltipConfig: {
443
444
  mode: 'tooltip',
444
445
  enterable: true,
445
- leaveDelay: 300,
446
- defaultPlacement: 'top'
446
+ leaveDelay: 300
447
447
  },
448
448
  dragConfig: {
449
449
  showIcon: true,
@@ -170,116 +170,152 @@ export function isNodeElement (elem: any): elem is HTMLElement {
170
170
  return elem && elem.nodeType === 1
171
171
  }
172
172
 
173
- export function updatePanelPlacement (targetElem: HTMLElement | null | undefined, panelElem: HTMLElement | null | undefined, options: {
173
+ interface PanelPlacementOptions {
174
+ defaultTop?: number
175
+ defaultLeft?: number
174
176
  placement?: '' | 'top' | 'bottom' | null
175
177
  defaultPlacement?: '' | 'top' | 'bottom' | null
176
178
  teleportTo?: boolean
177
179
  marginSize?: number
178
180
  isMinWidth?: boolean
179
- }) {
180
- const { placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({ teleportTo: false, marginSize: 18, isMinWidth: true }, options)
181
+ }
182
+
183
+ /**
184
+ * 通用定位计算
185
+ */
186
+ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined, panelElem: HTMLElement | null | undefined, options: PanelPlacementOptions) {
187
+ const { defaultTop, defaultLeft, placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({
188
+ teleportTo: false,
189
+ marginSize: 18,
190
+ isMinWidth: true
191
+ }, options)
181
192
  let panelPlacement: 'top' | 'bottom' = 'bottom'
182
193
  let top: number | '' = ''
183
194
  let bottom: number | '' = ''
184
- let left: number | '' = ''
185
- const right: number | '' = ''
195
+ let left: number = 0
186
196
  let minWidth: number | '' = ''
197
+ let arrowLeft: number | '' = ''
187
198
  const stys: Record<string, string> = {}
188
199
  if (panelElem && targetElem) {
189
- const documentElement = document.documentElement
190
- const bodyElem = document.body
191
- const targetHeight = targetElem.offsetHeight
192
- const panelHeight = panelElem.offsetHeight
193
- const panelWidth = panelElem.offsetWidth
194
-
195
- const panelRect = panelElem.getBoundingClientRect()
196
- const targetRect = targetElem.getBoundingClientRect()
197
- const visibleHeight = documentElement.clientHeight || bodyElem.clientHeight
198
- const visibleWidth = documentElement.clientWidth || bodyElem.clientWidth
199
- minWidth = targetElem.offsetWidth
200
- if (teleportTo) {
201
- left = targetRect.left
202
- top = targetRect.top + targetHeight
203
- if (placement === 'top') {
204
- panelPlacement = 'top'
205
- top = targetRect.top - panelHeight
206
- } else if (!placement) {
207
- if (defaultPlacement === 'top') {
200
+ const parentEl = panelElem.parentElement
201
+ const parentWrapperEl = parentEl === document.body ? document.documentElement : parentEl
202
+ if (parentWrapperEl) {
203
+ const targetWidth = targetElem.offsetWidth
204
+ const targetHeight = targetElem.offsetHeight
205
+ const panelHeight = panelElem.offsetHeight
206
+ const panelWidth = panelElem.offsetWidth
207
+
208
+ const parentWrapperRect = parentWrapperEl.getBoundingClientRect()
209
+ const panelRect = panelElem.getBoundingClientRect()
210
+ const targetRect = targetElem.getBoundingClientRect()
211
+ const visibleHeight = parentWrapperEl.clientHeight
212
+ const visibleWidth = parentWrapperEl.clientWidth
213
+
214
+ const offsetLeft = parentWrapperRect.left
215
+ const offsetTop = parentWrapperRect.top
216
+ const targetLeft = targetRect.left
217
+ const targetTop = targetRect.top
218
+
219
+ minWidth = targetElem.offsetWidth
220
+
221
+ if (teleportTo) {
222
+ left = defaultLeft || (targetLeft)
223
+ top = defaultTop || (targetTop + targetHeight)
224
+ if (placement === 'top') {
208
225
  panelPlacement = 'top'
209
- top = targetRect.top - panelHeight
210
- // 如果上面不够放,则向下
211
- if (top < marginSize) {
212
- panelPlacement = 'bottom'
213
- top = targetRect.top + targetHeight
214
- }
215
- // 如果下面不够放,则向上(优先)
216
- if (top + panelHeight + marginSize > visibleHeight) {
226
+ top = targetTop - panelHeight
227
+ } else if (!placement) {
228
+ if (defaultPlacement === 'top') {
217
229
  panelPlacement = 'top'
218
- top = targetRect.top - panelHeight
230
+ top = targetTop - panelHeight
231
+ // 如果上面不够放,则向下
232
+ if (top < marginSize) {
233
+ panelPlacement = 'bottom'
234
+ top = targetTop + targetHeight
235
+ }
236
+ // 如果下面不够放,则向上(优先)
237
+ if (top + panelHeight + marginSize > visibleHeight) {
238
+ panelPlacement = 'top'
239
+ top = targetTop - panelHeight
240
+ }
241
+ } else {
242
+ // 如果下面不够放,则向上
243
+ if (top + panelHeight + marginSize > visibleHeight) {
244
+ panelPlacement = 'top'
245
+ top = targetTop - panelHeight
246
+ }
247
+ // 如果上面不够放,则向下(优先)
248
+ if (top < marginSize) {
249
+ panelPlacement = 'bottom'
250
+ top = targetTop + targetHeight
251
+ }
219
252
  }
220
- } else {
253
+ }
254
+ // 如果溢出右边
255
+ if (left + panelWidth + marginSize > visibleWidth) {
256
+ left -= left + panelWidth + marginSize - visibleWidth
257
+ }
258
+ // 如果溢出左边
259
+ if (left < marginSize) {
260
+ left = marginSize
261
+ }
262
+
263
+ // 偏移
264
+ top -= offsetTop
265
+ left -= offsetLeft
266
+ } else {
267
+ if (placement === 'top') {
268
+ panelPlacement = 'top'
269
+ bottom = targetHeight
270
+ } else if (!placement) {
221
271
  // 如果下面不够放,则向上
222
- if (top + panelHeight + marginSize > visibleHeight) {
223
- panelPlacement = 'top'
224
- top = targetRect.top - panelHeight
225
- }
226
- // 如果上面不够放,则向下(优先)
227
- if (top < marginSize) {
228
- panelPlacement = 'bottom'
229
- top = targetRect.top + targetHeight
272
+ top = targetHeight
273
+ if (targetTop + targetHeight + panelHeight + marginSize > visibleHeight) {
274
+ // 如果上面不够放,则向下(优先)
275
+ if (targetTop - targetHeight - panelHeight > marginSize) {
276
+ panelPlacement = 'top'
277
+ top = ''
278
+ bottom = targetHeight
279
+ }
230
280
  }
231
281
  }
282
+ // 是否超出右侧
283
+ if (panelRect.left + panelRect.width + marginSize > visibleWidth) {
284
+ left = -(panelRect.left + panelRect.width + marginSize - visibleWidth)
285
+ }
232
286
  }
233
- // 如果溢出右边
234
- if (left + panelWidth + marginSize > visibleWidth) {
235
- left -= left + panelWidth + marginSize - visibleWidth
287
+ if (XEUtils.isNumber(top)) {
288
+ stys.top = toCssUnit(top)
236
289
  }
237
- // 如果溢出左边
238
- if (left < marginSize) {
239
- left = marginSize
290
+ if (XEUtils.isNumber(bottom)) {
291
+ stys.bottom = toCssUnit(bottom)
240
292
  }
241
- } else {
242
- if (placement === 'top') {
243
- panelPlacement = 'top'
244
- bottom = targetHeight
245
- } else if (!placement) {
246
- // 如果下面不够放,则向上
247
- top = targetHeight
248
- if (targetRect.top + targetHeight + panelHeight + marginSize > visibleHeight) {
249
- // 如果上面不够放,则向下(优先)
250
- if (targetRect.top - targetHeight - panelHeight > marginSize) {
251
- panelPlacement = 'top'
252
- top = ''
253
- bottom = targetHeight
254
- }
255
- }
293
+ if (XEUtils.isNumber(left)) {
294
+ stys.left = toCssUnit(left)
256
295
  }
257
- // 是否超出右侧
258
- if (panelRect.left + panelRect.width + marginSize > visibleWidth) {
259
- left = -(panelRect.left + panelRect.width + marginSize - visibleWidth)
296
+ if (isMinWidth && XEUtils.isNumber(minWidth)) {
297
+ stys.minWidth = toCssUnit(minWidth)
298
+ }
299
+
300
+ // 箭头
301
+ if (left === targetLeft) {
302
+ if (targetWidth <= panelWidth) {
303
+ arrowLeft = targetWidth / 2
304
+ }
305
+ } else if (left < targetLeft) {
306
+ if (left + panelWidth > targetLeft + targetWidth) {
307
+ arrowLeft = (targetLeft - left) + targetWidth / 2
308
+ } else {
309
+ arrowLeft = (targetLeft - left) + (panelWidth - (targetLeft - left)) / 2
310
+ }
260
311
  }
261
- }
262
- if (XEUtils.isNumber(top)) {
263
- stys.top = toCssUnit(top)
264
- }
265
- if (XEUtils.isNumber(bottom)) {
266
- stys.bottom = toCssUnit(bottom)
267
- }
268
- if (XEUtils.isNumber(left)) {
269
- stys.left = toCssUnit(left)
270
- }
271
- if (XEUtils.isNumber(right)) {
272
- stys.right = toCssUnit(right)
273
- }
274
- if (isMinWidth && XEUtils.isNumber(minWidth)) {
275
- stys.minWidth = toCssUnit(minWidth)
276
312
  }
277
313
  }
278
314
  return {
279
315
  top: top || 0,
280
316
  bottom: bottom || 0,
281
317
  left: left || 0,
282
- right: right || 0,
318
+ arrowLeft: arrowLeft || 0,
283
319
  style: stys,
284
320
  placement: panelPlacement
285
321
  }
@@ -287,8 +323,13 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
287
323
 
288
324
  export function getPopupContainer (appendTo: string | HTMLElement | ((params: any) => string | HTMLElement) | undefined) {
289
325
  const selectElem = appendTo && XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo
326
+ return selectElem || 'body'
327
+ }
328
+
329
+ export function getPopupAppendElement (appendTo: string | HTMLElement | ((params: any) => string | HTMLElement) | undefined) {
330
+ const selectElem = getPopupContainer(appendTo)
290
331
  if (XEUtils.isString(selectElem)) {
291
- return document.querySelector(selectElem) || document.body
332
+ return document.querySelector<HTMLElement>(selectElem) || document.body
292
333
  }
293
- return selectElem || document.body
334
+ return selectElem
294
335
  }
@@ -22,8 +22,10 @@
22
22
  & > .vxe-button--dropdown {
23
23
  margin-right: 0;
24
24
  }
25
- & > .vxe-button+.vxe-button--dropdown,
26
- & > .vxe-button--dropdown+.vxe-button {
25
+ & > .vxe-button.type--button+.vxe-button.type--button,
26
+ & > .vxe-button.type--button+.vxe-button--dropdown,
27
+ & > .vxe-button--dropdown+.vxe-button.type--button,
28
+ & > .vxe-button--dropdown+.vxe-button--dropdown {
27
29
  margin-left: 0;
28
30
  }
29
31
  }
@@ -34,6 +34,7 @@ export namespace VxeColorPickerPropTypes {
34
34
  export type Placeholder = string
35
35
  export type ClickToCopy = boolean
36
36
  export type Clearable = boolean
37
+ export type DefaultColor = string
37
38
  /**
38
39
  * 已废弃,请使用 PopupConfig.placement
39
40
  * @deprecated
@@ -92,6 +93,7 @@ export interface VxeColorPickerProps {
92
93
  placeholder?: VxeColorPickerPropTypes.Placeholder
93
94
  clickToCopy?: VxeColorPickerPropTypes.ClickToCopy
94
95
  clearable?: VxeColorPickerPropTypes.Clearable
96
+ defaultColor?: VxeColorPickerPropTypes.DefaultColor
95
97
  /**
96
98
  * 已废弃,请使用 popupConfig.placement
97
99
  * @deprecated
@@ -3031,6 +3031,9 @@ export namespace VxeTablePropTypes {
3031
3031
  height?: number
3032
3032
  minWidth?: number
3033
3033
  minHeight?: number
3034
+ mask?: boolean
3035
+ lockView?: boolean
3036
+ fullscreen?: boolean
3034
3037
  showMaximize?: boolean
3035
3038
  showMinimize?: boolean
3036
3039
  resize?: boolean
@@ -3199,6 +3202,9 @@ export namespace VxeTablePropTypes {
3199
3202
  height?: number
3200
3203
  minWidth?: number
3201
3204
  minHeight?: number
3205
+ mask?: boolean
3206
+ lockView?: boolean
3207
+ fullscreen?: boolean
3202
3208
  showMaximize?: boolean
3203
3209
  showMinimize?: boolean
3204
3210
  resize?: boolean
@@ -39,6 +39,8 @@ export namespace VxeTooltipPropTypes {
39
39
  export type EnterDelay = number
40
40
  export type LeaveDelay = number
41
41
  export type LeaveMethod = (params: { $event: MouseEvent }) => boolean
42
+ export type AppendTo = string | HTMLElement | ((params: {}) => string | HTMLElement)
43
+ export type Transfer = boolean
42
44
 
43
45
  /**
44
46
  * 已废弃,请使用 UseHtml
@@ -75,6 +77,8 @@ export interface VxeTooltipProps {
75
77
  enterDelay?: VxeTooltipPropTypes.EnterDelay
76
78
  leaveDelay?: VxeTooltipPropTypes.LeaveDelay
77
79
  leaveMethod?: VxeTooltipPropTypes.LeaveMethod
80
+ transfer?: VxeTooltipPropTypes.Transfer
81
+ appendTo?: VxeTooltipPropTypes.AppendTo
78
82
  }
79
83
 
80
84
  export interface TooltipPrivateComputed {