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.
- package/es/button/src/button.js +2 -2
- package/es/button-group/style.css +1 -1
- package/es/button-group/style.min.css +1 -1
- package/es/color-picker/src/color-picker.js +14 -8
- package/es/date-picker/src/date-picker.js +2 -2
- package/es/date-range-picker/src/date-range-picker.js +2 -2
- package/es/drawer/src/drawer.js +2 -2
- package/es/icon/style.css +1 -1
- package/es/icon-picker/src/icon-picker.js +2 -2
- package/es/menu/src/menu.js +2 -2
- package/es/modal/src/modal.js +2 -2
- package/es/select/src/select.js +2 -2
- package/es/style.css +1 -1
- package/es/style.min.css +1 -1
- package/es/table-select/src/table-select.js +2 -2
- package/es/tooltip/src/tooltip.js +72 -127
- package/es/tree/src/tree.js +2 -2
- package/es/tree-select/src/tree-select.js +2 -2
- package/es/ui/index.js +4 -4
- package/es/ui/src/dom.js +114 -81
- package/es/ui/src/log.js +1 -1
- package/es/vxe-button-group/style.css +1 -1
- package/es/vxe-button-group/style.min.css +1 -1
- package/lib/button/src/button.js +1 -1
- package/lib/button/src/button.min.js +1 -1
- package/lib/button-group/style/style.css +1 -1
- package/lib/button-group/style/style.min.css +1 -1
- package/lib/color-picker/src/color-picker.js +16 -7
- package/lib/color-picker/src/color-picker.min.js +1 -1
- package/lib/date-picker/src/date-picker.js +1 -1
- package/lib/date-picker/src/date-picker.min.js +1 -1
- package/lib/date-range-picker/src/date-range-picker.js +1 -1
- package/lib/date-range-picker/src/date-range-picker.min.js +1 -1
- package/lib/drawer/src/drawer.js +1 -1
- package/lib/drawer/src/drawer.min.js +1 -1
- package/lib/icon/style/style.css +1 -1
- package/lib/icon/style/style.min.css +1 -1
- package/lib/icon-picker/src/icon-picker.js +1 -1
- package/lib/icon-picker/src/icon-picker.min.js +1 -1
- package/lib/index.umd.js +219 -228
- package/lib/index.umd.min.js +1 -1
- package/lib/menu/src/menu.js +1 -1
- package/lib/menu/src/menu.min.js +1 -1
- package/lib/modal/src/modal.js +1 -1
- package/lib/modal/src/modal.min.js +1 -1
- package/lib/select/src/select.js +1 -1
- package/lib/select/src/select.min.js +1 -1
- package/lib/style.css +1 -1
- package/lib/style.min.css +1 -1
- package/lib/table-select/src/table-select.js +1 -1
- package/lib/table-select/src/table-select.min.js +1 -1
- package/lib/tooltip/src/tooltip.js +78 -126
- package/lib/tooltip/src/tooltip.min.js +1 -1
- package/lib/tree/src/tree.js +3 -2
- package/lib/tree/src/tree.min.js +1 -1
- package/lib/tree-select/src/tree-select.js +1 -1
- package/lib/tree-select/src/tree-select.min.js +1 -1
- package/lib/ui/index.js +4 -4
- package/lib/ui/index.min.js +1 -1
- package/lib/ui/src/dom.js +109 -79
- package/lib/ui/src/dom.min.js +1 -1
- package/lib/ui/src/log.js +1 -1
- package/lib/ui/src/log.min.js +1 -1
- package/lib/vxe-button-group/style/style.css +1 -1
- package/lib/vxe-button-group/style/style.min.css +1 -1
- package/package.json +1 -1
- package/packages/button/src/button.ts +2 -2
- package/packages/color-picker/src/color-picker.ts +14 -8
- package/packages/date-picker/src/date-picker.ts +2 -2
- package/packages/date-range-picker/src/date-range-picker.ts +2 -2
- package/packages/drawer/src/drawer.ts +2 -2
- package/packages/icon-picker/src/icon-picker.ts +2 -2
- package/packages/menu/src/menu.ts +2 -2
- package/packages/modal/src/modal.ts +2 -2
- package/packages/select/src/select.ts +2 -2
- package/packages/table-select/src/table-select.ts +2 -2
- package/packages/tooltip/src/tooltip.ts +74 -126
- package/packages/tree/src/tree.ts +2 -2
- package/packages/tree-select/src/tree-select.ts +2 -2
- package/packages/ui/index.ts +3 -3
- package/packages/ui/src/dom.ts +125 -84
- package/styles/components/button-group.scss +4 -2
- package/types/components/color-picker.d.ts +2 -0
- package/types/components/table.d.ts +6 -0
- package/types/components/tooltip.d.ts +4 -0
- /package/es/icon/{iconfont.1787137242564.ttf → iconfont.1787216119203.ttf} +0 -0
- /package/es/icon/{iconfont.1787137242564.woff → iconfont.1787216119203.woff} +0 -0
- /package/es/icon/{iconfont.1787137242564.woff2 → iconfont.1787216119203.woff2} +0 -0
- /package/es/{iconfont.1787137242564.ttf → iconfont.1787216119203.ttf} +0 -0
- /package/es/{iconfont.1787137242564.woff → iconfont.1787216119203.woff} +0 -0
- /package/es/{iconfont.1787137242564.woff2 → iconfont.1787216119203.woff2} +0 -0
- /package/lib/icon/style/{iconfont.1787137242564.ttf → iconfont.1787216119203.ttf} +0 -0
- /package/lib/icon/style/{iconfont.1787137242564.woff → iconfont.1787216119203.woff} +0 -0
- /package/lib/icon/style/{iconfont.1787137242564.woff2 → iconfont.1787216119203.woff2} +0 -0
- /package/lib/{iconfont.1787137242564.ttf → iconfont.1787216119203.ttf} +0 -0
- /package/lib/{iconfont.1787137242564.woff → iconfont.1787216119203.woff} +0 -0
- /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
|
-
|
|
231
|
+
updateTipStyle () {
|
|
228
232
|
const $xeTooltip = this
|
|
233
|
+
const props = $xeTooltip
|
|
229
234
|
const reactData = $xeTooltip.reactData
|
|
230
235
|
|
|
231
|
-
const {
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
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
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
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
|
-
|
|
307
|
+
updateZIndex () {
|
|
365
308
|
const $xeTooltip = this
|
|
309
|
+
const props = $xeTooltip
|
|
366
310
|
const reactData = $xeTooltip.reactData
|
|
367
311
|
|
|
368
|
-
|
|
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
|
|
435
|
-
if (
|
|
436
|
-
const parentNode =
|
|
382
|
+
const panelElem = $xeTooltip.$refs.refElem as HTMLElement
|
|
383
|
+
if (panelElem) {
|
|
384
|
+
const parentNode = panelElem.parentNode
|
|
437
385
|
if (!parentNode) {
|
|
438
|
-
|
|
386
|
+
getPopupAppendElement(appendTo).appendChild(panelElem)
|
|
439
387
|
}
|
|
440
388
|
}
|
|
441
389
|
$xeTooltip.updateValue(true)
|
|
442
|
-
$xeTooltip.
|
|
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
|
|
635
|
-
if (
|
|
636
|
-
const 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(
|
|
588
|
+
XEUtils.arrayEach(panelElem.children, (elem, index) => {
|
|
641
589
|
if (index) {
|
|
642
|
-
parentNode.insertBefore(elem,
|
|
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(
|
|
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
|
|
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 (
|
|
681
|
-
const parentNode =
|
|
628
|
+
if (panelElem) {
|
|
629
|
+
const parentNode = panelElem.parentNode
|
|
682
630
|
if (parentNode) {
|
|
683
|
-
parentNode.removeChild(
|
|
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,
|
|
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
|
-
|
|
604
|
+
getPopupAppendElement(appendTo).appendChild(panelElem)
|
|
605
605
|
}
|
|
606
606
|
}
|
|
607
607
|
}
|
package/packages/ui/index.ts
CHANGED
|
@@ -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,
|
package/packages/ui/src/dom.ts
CHANGED
|
@@ -170,116 +170,152 @@ export function isNodeElement (elem: any): elem is HTMLElement {
|
|
|
170
170
|
return elem && elem.nodeType === 1
|
|
171
171
|
}
|
|
172
172
|
|
|
173
|
-
|
|
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
|
-
|
|
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
|
|
190
|
-
const
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
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 =
|
|
210
|
-
|
|
211
|
-
if (
|
|
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 =
|
|
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
|
-
}
|
|
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
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
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
|
-
|
|
235
|
-
left -= left + panelWidth + marginSize - visibleWidth
|
|
287
|
+
if (XEUtils.isNumber(top)) {
|
|
288
|
+
stys.top = toCssUnit(top)
|
|
236
289
|
}
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
left = marginSize
|
|
290
|
+
if (XEUtils.isNumber(bottom)) {
|
|
291
|
+
stys.bottom = toCssUnit(bottom)
|
|
240
292
|
}
|
|
241
|
-
|
|
242
|
-
|
|
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
|
-
|
|
259
|
-
|
|
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
|
-
|
|
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
|
|
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--
|
|
26
|
-
& > .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 {
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|