@@ -8,13 +8,35 @@ import type {
8
8
AlignPointLeftRight ,
9
9
AlignPointTopBottom ,
10
10
AlignType ,
11
+ OffsetType ,
11
12
} from '../interface' ;
12
13
import { collectScroller , getVisibleArea , getWin , toNum } from '../util' ;
13
14
14
15
type Rect = Record < 'x' | 'y' | 'width' | 'height' , number > ;
15
16
16
17
type Points = [ topBottom : AlignPointTopBottom , leftRight : AlignPointLeftRight ] ;
17
18
19
+ function getUnitOffset ( size : number , offset : OffsetType = 0 ) {
20
+ const offsetStr = `${ offset } ` ;
21
+ const cells = offsetStr . match ( / ^ ( .* ) \% $ / ) ;
22
+ if ( cells ) {
23
+ return size * ( parseFloat ( cells [ 1 ] ) / 100 ) ;
24
+ }
25
+ return parseFloat ( offsetStr ) ;
26
+ }
27
+
28
+ function getNumberOffset (
29
+ rect : { width : number ; height : number } ,
30
+ offset ?: OffsetType [ ] ,
31
+ ) {
32
+ const [ offsetX , offsetY ] = offset || [ ] ;
33
+
34
+ return [
35
+ getUnitOffset ( rect . width , offsetX ) ,
36
+ getUnitOffset ( rect . height , offsetY ) ,
37
+ ] ;
38
+ }
39
+
18
40
function splitPoints ( points : string = '' ) : Points {
19
41
return [ points [ 0 ] as any , points [ 1 ] as any ] ;
20
42
}
@@ -229,11 +251,14 @@ export default function useAlign(
229
251
230
252
// Offset
231
253
const { offset, targetOffset } = placementInfo ;
232
- const [ popupOffsetX = 0 , popupOffsetY = 0 ] = offset || [ ] ;
233
- const [ targetOffsetX = 0 , targetOffsetY = 0 ] = targetOffset || [ ] ;
254
+ const [ popupOffsetX , popupOffsetY ] = getNumberOffset ( popupRect , offset ) ;
255
+ const [ targetOffsetX , targetOffsetY ] = getNumberOffset (
256
+ targetRect ,
257
+ targetOffset ,
258
+ ) ;
234
259
235
- targetRect . x + = targetOffsetX ;
236
- targetRect . y + = targetOffsetY ;
260
+ targetRect . x - = targetOffsetX ;
261
+ targetRect . y - = targetOffsetY ;
237
262
238
263
// Points
239
264
const [ popupPoint , targetPoint ] = placementInfo . points || [ ] ;
0 commit comments