vueuc - npm Package Compare versions

Comparing version 0.4.19 to 0.4.20

es/binder/src/Binder.js

 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { defineComponent, provide, ref, inject, getCurrentInstance, onBeforeUnmount } from 'vue';
 import { beforeNextFrameOnce } from 'seemly';
+import { on, off } from 'evtd';
 import { getSlot } from '../../shared/v-node';
 import { getScrollParent } from './utils';
-import { on, off } from 'evtd';
 const Binder = defineComponent({
@@ -8,0 +8,0 @@ name: 'Binder',

es/binder/src/Follower.d.ts

 import { PropType } from 'vue';
-import { BinderInstance, Placement, FlipLevel } from './interface';
+import { BinderInstance, Placement } from './interface';
 export interface FollowerInst {
@@ -25,6 +25,3 @@ syncPosition: () => void;
     };
-    flipLevel: {
-        type: PropType<FlipLevel>;
-        default: number;
-    };
+    internalShift: BooleanConstructor;
     x: NumberConstructor;
@@ -56,3 +53,3 @@ y: NumberConstructor;
     flip?: unknown;
-    flipLevel?: unknown;
+    internalShift?: unknown;
     x?: unknown;
@@ -72,3 +69,3 @@ y?: unknown;
     flip: boolean;
-    flipLevel: FlipLevel;
+    internalShift: boolean;
     teleportDisabled: boolean;
@@ -92,3 +89,3 @@ zindexable: boolean;
     flip: boolean;
-    flipLevel: FlipLevel;
+    internalShift: boolean;
     teleportDisabled: boolean;
@@ -95,0 +92,0 @@ zindexable: boolean;

es/binder/src/Follower.js

@@ -51,6 +51,3 @@ /* eslint-disable @typescript-eslint/no-non-null-assertion */
         },
-        flipLevel: {
-            type: Number,
-            default: 1 // do not apply offset by default
-        },
+        internalShift: Boolean,
         x: Number,
@@ -127,3 +124,3 @@ y: Number,
                 : getRect(target);
-            const { width, minWidth, placement, flipLevel, flip } = props;
+            const { width, minWidth, placement, internalShift, flip } = props;
             follower.setAttribute('v-placement', placement);
@@ -157,3 +154,3 @@ if (overlap) {
             const offsetContainerRect = getRect(offsetContainerRef.value);
-            const { left: offsetLeftToStandardPlacement, top: offsetTopToStandardPlacement, placement: properPlacement } = getPlacementAndOffsetOfFollower(placement, targetRect, followerRect, flipLevel, flip, overlap);
+            const { left: offsetLeftToStandardPlacement, top: offsetTopToStandardPlacement, placement: properPlacement } = getPlacementAndOffsetOfFollower(placement, targetRect, followerRect, internalShift, flip, overlap);
             const properTransformOrigin = getProperTransformOrigin(properPlacement, overlap);
@@ -164,5 +161,4 @@ const { left, top, transform } = getOffset(properPlacement, offsetContainerRect, targetRect, offsetTopToStandardPlacement, offsetLeftToStandardPlacement, overlap);
             follower.setAttribute('v-placement', properPlacement);
-            // TODO: add it
-            // follower.style.setProperty('--v-offset-left', `${Math.round(offsetLeftToStandardPlacement)}px`)
-            // follower.style.setProperty('--v-offset-top', `${Math.round(offsetTopToStandardPlacement)}px`)
+            follower.style.setProperty('--v-offset-left', `${Math.round(offsetLeftToStandardPlacement)}px`);
+            follower.style.setProperty('--v-offset-top', `${Math.round(offsetTopToStandardPlacement)}px`);
             follower.style.transform = `translateX(${left}) translateY(${top}) ${transform}`;
@@ -185,3 +181,12 @@ follower.style.transformOrigin = properTransformOrigin;
         };
-        ['placement', 'x', 'y', 'flipLevel', 'flip', 'width', 'overlap', 'minWidth'].forEach((prop) => {
+        [
+            'placement',
+            'x',
+            'y',
+            'internalShift',
+            'flip',
+            'width',
+            'overlap',
+            'minWidth'
+        ].forEach((prop) => {
             watch(toRef(props, prop), syncPosition);
@@ -188,0 +193,0 @@ });

es/binder/src/get-placement-style.d.ts

@@ -1,2 +0,2 @@
-import { Placement, FlipLevel, Rect, TransformOrigin } from './interface';
+import { Placement, Rect, TransformOrigin } from './interface';
 interface PlacementAndOffset {
@@ -7,3 +7,3 @@ top: number;
 }
-export declare function getPlacementAndOffsetOfFollower(placement: Placement, targetRect: Rect, followerRect: Rect, flipLevel: FlipLevel, flip: boolean, overlap: boolean): PlacementAndOffset;
+export declare function getPlacementAndOffsetOfFollower(placement: Placement, targetRect: Rect, followerRect: Rect, shift: boolean, flip: boolean, overlap: boolean): PlacementAndOffset;
 export declare function getProperTransformOrigin(placement: Placement, overlap: boolean): TransformOrigin;
@@ -10,0 +10,0 @@ interface PlacementOffset {

es/binder/src/get-placement-style.js

@@ -56,8 +56,8 @@ const oppositionPositions = {
 };
-// const keepOffsetDirection: Record<Position, boolean> = {
-//   top: true, // top++
-//   bottom: false, // top--
-//   left: true, // left++
-//   right: false // left--
-// }
+const keepOffsetDirection = {
+    top: true,
+    bottom: false,
+    left: true,
+    right: false // left--
+};
 const cssPositionToOppositeAlign = {
@@ -69,3 +69,3 @@ top: 'end',
 };
-export function getPlacementAndOffsetOfFollower(placement, targetRect, followerRect, flipLevel, flip, overlap) {
+export function getPlacementAndOffsetOfFollower(placement, targetRect, followerRect, shift, flip, overlap) {
     if (!flip || overlap) {
@@ -76,22 +76,48 @@ return { placement: placement, top: 0, left: 0 };
     let properAlign = align !== null && align !== void 0 ? align : 'center';
-    let left = 0;
-    let top = 0;
-    // TODO: fix it
-    // calculate offset
-    // const deriveOffset = (
-    //   oppositeAlignCssSizeProp: 'width' | 'height',
-    //   currentAlignCssPositionProp: Position,
-    //   offsetVertically: boolean
-    // ): void => {
-    //   if (flipLevel < 2) return
-    //   const diff = followerRect[oppositeAlignCssSizeProp] - targetRect[currentAlignCssPositionProp] - targetRect[oppositeAlignCssSizeProp]
-    //   if (diff) {
-    //     if (offsetVertically) {
-    //       top = keepOffsetDirection[currentAlignCssPositionProp] ? diff : -diff
-    //     } else {
-    //       left = keepOffsetDirection[currentAlignCssPositionProp] ? diff : -diff
-    //     }
-    //   }
-    // }
-    // const offsetVertically = position === 'left' || position === 'right'
+    let properOffset = {
+        top: 0,
+        left: 0
+    };
+    const deriveOffset = (oppositeAlignCssSizeProp, alignCssPositionProp, offsetVertically) => {
+        let left = 0;
+        let top = 0;
+        const diff = followerRect[oppositeAlignCssSizeProp] -
+            targetRect[alignCssPositionProp] -
+            targetRect[oppositeAlignCssSizeProp];
+        if (diff > 0 && shift) {
+            if (offsetVertically) {
+                //       screen border
+                // |-----------------------------------------|
+                // |                    | f  |               |
+                // |                    | o  |               |
+                // |                    | l  |               |
+                // |                    | l  |----           |
+                // |                    | o  |tar |          |
+                // |                    | w  |get |          |
+                // |                    | e  |    |          |
+                // |                    | r  |----           |
+                // |                     ----                |
+                // |-----------------------------------------|
+                top = keepOffsetDirection[alignCssPositionProp] ? diff : -diff;
+            }
+            else {
+                //       screen border
+                // |----------------------------------------|
+                // |                                        |
+                // |          ----------                    |
+                // |          | target |                    |
+                // |       ----------------------------------
+                // |       |       follower                 |
+                // |       ----------------------------------
+                // |                                        |
+                // |----------------------------------------|
+                left = keepOffsetDirection[alignCssPositionProp] ? diff : -diff;
+            }
+        }
+        return {
+            left,
+            top
+        };
+    };
+    const offsetVertically = position === 'left' || position === 'right';
     // choose proper placement for non-center align
@@ -103,20 +129,36 @@ if (properAlign !== 'center') {
         // if follower rect is larger than target rect in align direction
-        //           [ target ]
-        //           [     follower     ]
-        // [     follower     ] <---->
-        if (followerRect[oppositeAlignCssSizeProp] > targetRect[oppositeAlignCssSizeProp]) {
+        // ----------[ target ]---------|
+        // ----------[     follower     ]
+        if (followerRect[oppositeAlignCssSizeProp] >
+            targetRect[oppositeAlignCssSizeProp]) {
             if (
             // current space is not enough
-            targetRect[oppositeAlignCssPositionProp] + targetRect[oppositeAlignCssSizeProp] < followerRect[oppositeAlignCssSizeProp]) {
-                const followerOverTargetSize = (followerRect[oppositeAlignCssSizeProp] - targetRect[oppositeAlignCssSizeProp]) / 2;
-                if ((targetRect[oppositeAlignCssPositionProp] < followerOverTargetSize) || (targetRect[currentAlignCssPositionProp] < followerOverTargetSize)) {
+            // ----------[ target ]---------|
+            // -------[     follower        ]
+            targetRect[oppositeAlignCssPositionProp] +
+                targetRect[oppositeAlignCssSizeProp] <
+                followerRect[oppositeAlignCssSizeProp]) {
+                const followerOverTargetSize = (followerRect[oppositeAlignCssSizeProp] -
+                    targetRect[oppositeAlignCssSizeProp]) /
+                    2;
+                if (targetRect[oppositeAlignCssPositionProp] < followerOverTargetSize ||
+                    targetRect[currentAlignCssPositionProp] < followerOverTargetSize) {
                     // opposite align has larger space
-                    if (targetRect[oppositeAlignCssPositionProp] < targetRect[currentAlignCssPositionProp]) {
+                    // -------[ target ]-----------|
+                    // -------[     follower     ]-|
+                    if (targetRect[oppositeAlignCssPositionProp] <
+                        targetRect[currentAlignCssPositionProp]) {
                         properAlign = oppositeAligns[align];
+                        properOffset = deriveOffset(oppositeAlignCssSizeProp, currentAlignCssPositionProp, offsetVertically);
                     }
-                    // TODO: fix it
-                    // deriveOffset(oppositeAlignCssSizeProp, oppositeAlignCssPositionProp, offsetVertically)
+                    else {
+                        // ----------------[ target ]----|
+                        // --------[   follower     ]----|
+                        properOffset = deriveOffset(oppositeAlignCssSizeProp, oppositeAlignCssPositionProp, offsetVertically);
+                    }
                 }
                 else {
                     // 'center' align is better
+                    // ------------[ target ]--------|
+                    // -------[       follower    ]--|
                     properAlign = 'center';
@@ -126,10 +168,11 @@ }
         }
-        // if follower rect is smaller than target rect in align direction
-        // [     target     ]
-        // [ follower ]         <---->
-        else if (followerRect[oppositeAlignCssSizeProp] < targetRect[oppositeAlignCssSizeProp]) {
+        else if (followerRect[oppositeAlignCssSizeProp] <
+            targetRect[oppositeAlignCssSizeProp]) {
             // TODO: maybe center is better
             if (targetRect[currentAlignCssPositionProp] < 0 &&
                 // opposite align has larger space
-                targetRect[oppositeAlignCssPositionProp] > targetRect[currentAlignCssPositionProp]) {
+                // ------------[   target   ]
+                // ----------------[follower]
+                targetRect[oppositeAlignCssPositionProp] >
+                    targetRect[currentAlignCssPositionProp]) {
                 properAlign = oppositeAligns[align];
@@ -140,20 +183,29 @@ }
     else {
-        const possibleAlternativeAlignCssPositionProp1 = (position === 'bottom' || position === 'top') ? 'left' : 'top';
+        const possibleAlternativeAlignCssPositionProp1 = position === 'bottom' || position === 'top' ? 'left' : 'top';
         const possibleAlternativeAlignCssPositionProp2 = oppositionPositions[possibleAlternativeAlignCssPositionProp1];
         const alternativeAlignCssSizeProp = propToCompare[possibleAlternativeAlignCssPositionProp1];
-        const followerOverTargetSize = (followerRect[alternativeAlignCssSizeProp] - targetRect[alternativeAlignCssSizeProp]) / 2;
+        const followerOverTargetSize = (followerRect[alternativeAlignCssSizeProp] -
+            targetRect[alternativeAlignCssSizeProp]) /
+            2;
         if (
         // center is not enough
-        (targetRect[possibleAlternativeAlignCssPositionProp1] < followerOverTargetSize) ||
-            (targetRect[possibleAlternativeAlignCssPositionProp2] < followerOverTargetSize)) {
+        // ----------- [ target ]--|
+        // -------[     follower     ]
+        targetRect[possibleAlternativeAlignCssPositionProp1] <
+            followerOverTargetSize ||
+            targetRect[possibleAlternativeAlignCssPositionProp2] <
+                followerOverTargetSize) {
             // alternative 2 position's space is larger
-            if (targetRect[possibleAlternativeAlignCssPositionProp1] > targetRect[possibleAlternativeAlignCssPositionProp2]) {
-                properAlign = cssPositionToOppositeAlign[possibleAlternativeAlignCssPositionProp1];
+            if (targetRect[possibleAlternativeAlignCssPositionProp1] >
+                targetRect[possibleAlternativeAlignCssPositionProp2]) {
+                properAlign =
+                    cssPositionToOppositeAlign[possibleAlternativeAlignCssPositionProp1];
+                properOffset = deriveOffset(alternativeAlignCssSizeProp, possibleAlternativeAlignCssPositionProp1, offsetVertically);
             }
             else {
                 // alternative 1 position's space is larger
-                properAlign = cssPositionToOppositeAlign[possibleAlternativeAlignCssPositionProp2];
+                properAlign =
+                    cssPositionToOppositeAlign[possibleAlternativeAlignCssPositionProp2];
+                properOffset = deriveOffset(alternativeAlignCssSizeProp, possibleAlternativeAlignCssPositionProp2, offsetVertically);
             }
-            // TODO: fix it
-            // deriveOffset(alternativeAlignCssSizeProp, possibleAlternativeAlignCssPositionProp1, offsetVertically)
         }
@@ -170,5 +222,7 @@ }
     return {
-        placement: properAlign !== 'center' ? `${properPosition}-${properAlign}` : properPosition,
-        left,
-        top
+        placement: properAlign !== 'center'
+            ? `${properPosition}-${properAlign}`
+            : properPosition,
+        left: properOffset.left,
+        top: properOffset.top
     };
@@ -269,3 +323,6 @@ }
             return {
-                top: `${Math.round(targetRect.top - offsetRect.top + targetRect.height + offsetTopToStandardPlacement)}px`,
+                top: `${Math.round(targetRect.top -
+                    offsetRect.top +
+                    targetRect.height +
+                    offsetTopToStandardPlacement)}px`,
                 left: `${Math.round(targetRect.left - offsetRect.left + offsetLeftToStandardPlacement)}px`,
@@ -276,4 +333,10 @@ transform: ''
             return {
-                top: `${Math.round(targetRect.top - offsetRect.top + targetRect.height + offsetTopToStandardPlacement)}px`,
-                left: `${Math.round(targetRect.left - offsetRect.left + targetRect.width + offsetLeftToStandardPlacement)}px`,
+                top: `${Math.round(targetRect.top -
+                    offsetRect.top +
+                    targetRect.height +
+                    offsetTopToStandardPlacement)}px`,
+                left: `${Math.round(targetRect.left -
+                    offsetRect.left +
+                    targetRect.width +
+                    offsetLeftToStandardPlacement)}px`,
                 transform: 'translateX(-100%)'
@@ -290,3 +353,6 @@ };
                 top: `${Math.round(targetRect.top - offsetRect.top + offsetTopToStandardPlacement)}px`,
-                left: `${Math.round(targetRect.left - offsetRect.left + targetRect.width + offsetLeftToStandardPlacement)}px`,
+                left: `${Math.round(targetRect.left -
+                    offsetRect.left +
+                    targetRect.width +
+                    offsetLeftToStandardPlacement)}px`,
                 transform: 'translateX(-100%) translateY(-100%)'
@@ -297,3 +363,6 @@ };
                 top: `${Math.round(targetRect.top - offsetRect.top + offsetTopToStandardPlacement)}px`,
-                left: `${Math.round(targetRect.left - offsetRect.left + targetRect.width + offsetLeftToStandardPlacement)}px`,
+                left: `${Math.round(targetRect.left -
+                    offsetRect.left +
+                    targetRect.width +
+                    offsetLeftToStandardPlacement)}px`,
                 transform: ''
@@ -303,4 +372,10 @@ };
             return {
-                top: `${Math.round(targetRect.top - offsetRect.top + targetRect.height + offsetTopToStandardPlacement)}px`,
-                left: `${Math.round(targetRect.left - offsetRect.left + targetRect.width + offsetLeftToStandardPlacement)}px`,
+                top: `${Math.round(targetRect.top -
+                    offsetRect.top +
+                    targetRect.height +
+                    offsetTopToStandardPlacement)}px`,
+                left: `${Math.round(targetRect.left -
+                    offsetRect.left +
+                    targetRect.width +
+                    offsetLeftToStandardPlacement)}px`,
                 transform: 'translateY(-100%)'
@@ -316,3 +391,6 @@ };
             return {
-                top: `${Math.round(targetRect.top - offsetRect.top + targetRect.height + offsetTopToStandardPlacement)}px`,
+                top: `${Math.round(targetRect.top -
+                    offsetRect.top +
+                    targetRect.height +
+                    offsetTopToStandardPlacement)}px`,
                 left: `${Math.round(targetRect.left - offsetRect.left + offsetLeftToStandardPlacement)}px`,
@@ -324,3 +402,6 @@ transform: 'translateX(-100%) translateY(-100%)'
                 top: `${Math.round(targetRect.top - offsetRect.top + offsetTopToStandardPlacement)}px`,
-                left: `${Math.round(targetRect.left - offsetRect.left + targetRect.width / 2 + offsetLeftToStandardPlacement)}px`,
+                left: `${Math.round(targetRect.left -
+                    offsetRect.left +
+                    targetRect.width / 2 +
+                    offsetLeftToStandardPlacement)}px`,
                 transform: 'translateY(-100%) translateX(-50%)'
@@ -330,4 +411,10 @@ };
             return {
-                top: `${Math.round(targetRect.top - offsetRect.top + targetRect.height / 2 + offsetTopToStandardPlacement)}px`,
-                left: `${Math.round(targetRect.left - offsetRect.left + targetRect.width + offsetLeftToStandardPlacement)}px`,
+                top: `${Math.round(targetRect.top -
+                    offsetRect.top +
+                    targetRect.height / 2 +
+                    offsetTopToStandardPlacement)}px`,
+                left: `${Math.round(targetRect.left -
+                    offsetRect.left +
+                    targetRect.width +
+                    offsetLeftToStandardPlacement)}px`,
                 transform: 'translateY(-50%)'
@@ -337,3 +424,6 @@ };
             return {
-                top: `${Math.round(targetRect.top - offsetRect.top + targetRect.height / 2 + offsetTopToStandardPlacement)}px`,
+                top: `${Math.round(targetRect.top -
+                    offsetRect.top +
+                    targetRect.height / 2 +
+                    offsetTopToStandardPlacement)}px`,
                 left: `${Math.round(targetRect.left - offsetRect.left + offsetLeftToStandardPlacement)}px`,
@@ -345,4 +435,10 @@ transform: 'translateY(-50%) translateX(-100%)'
             return {
-                top: `${Math.round(targetRect.top - offsetRect.top + targetRect.height + offsetTopToStandardPlacement)}px`,
-                left: `${Math.round(targetRect.left - offsetRect.left + targetRect.width / 2 + offsetLeftToStandardPlacement)}px`,
+                top: `${Math.round(targetRect.top -
+                    offsetRect.top +
+                    targetRect.height +
+                    offsetTopToStandardPlacement)}px`,
+                left: `${Math.round(targetRect.left -
+                    offsetRect.left +
+                    targetRect.width / 2 +
+                    offsetLeftToStandardPlacement)}px`,
                 transform: 'translateX(-50%)'
@@ -349,0 +445,0 @@ };

es/binder/src/index.d.ts

@@ -5,2 +5,2 @@ export { default as Binder, default as VBinder } from './Binder';
 export type { FollowerInst } from './Follower';
-export type { Placement as FollowerPlacement, FlipLevel, ExposedBinderInstance as BinderInst } from './interface';
+export type { Placement as FollowerPlacement, ExposedBinderInstance as BinderInst } from './interface';

es/resize-observer/src/VResizeObserver.js

@@ -23,7 +23,11 @@ import { defineComponent, renderSlot } from 'vue';
             warn('resize-observer', '$el does not exist.');
+            return;
         }
-        else if (el.nextElementSibling !== el.nextSibling) {
-            warn('resize-observer', '$el can not be observed (it may be a text node).');
+        if (el.nextElementSibling !== el.nextSibling) {
+            if (el.nodeType === 3 && el.nodeValue !== '') {
+                warn('resize-observer', '$el can not be observed (it may be a text node).');
+                return;
+            }
         }
-        else if (el.nextElementSibling !== null) {
+        if (el.nextElementSibling !== null) {
             delegate.registerHandler(el.nextElementSibling, this.handleResize);
@@ -30,0 +34,0 @@ this.registered = true;

lib/binder/src/Binder.js

@@ -6,5 +6,5 @@ "use strict";
 const seemly_1 = require("seemly");
+const evtd_1 = require("evtd");
 const v_node_1 = require("../../shared/v-node");
 const utils_1 = require("./utils");
-const evtd_1 = require("evtd");
 const Binder = (0, vue_1.defineComponent)({
@@ -11,0 +11,0 @@ name: 'Binder',

lib/binder/src/Follower.d.ts

 import { PropType } from 'vue';
-import { BinderInstance, Placement, FlipLevel } from './interface';
+import { BinderInstance, Placement } from './interface';
 export interface FollowerInst {
@@ -25,6 +25,3 @@ syncPosition: () => void;
     };
-    flipLevel: {
-        type: PropType<FlipLevel>;
-        default: number;
-    };
+    internalShift: BooleanConstructor;
     x: NumberConstructor;
@@ -56,3 +53,3 @@ y: NumberConstructor;
     flip?: unknown;
-    flipLevel?: unknown;
+    internalShift?: unknown;
     x?: unknown;
@@ -72,3 +69,3 @@ y?: unknown;
     flip: boolean;
-    flipLevel: FlipLevel;
+    internalShift: boolean;
     teleportDisabled: boolean;
@@ -92,3 +89,3 @@ zindexable: boolean;
     flip: boolean;
-    flipLevel: FlipLevel;
+    internalShift: boolean;
     teleportDisabled: boolean;
@@ -95,0 +92,0 @@ zindexable: boolean;

lib/binder/src/Follower.js

@@ -56,6 +56,3 @@ "use strict";
         },
-        flipLevel: {
-            type: Number,
-            default: 1 // do not apply offset by default
-        },
+        internalShift: Boolean,
         x: Number,
@@ -132,3 +129,3 @@ y: Number,
                 : (0, utils_1.getRect)(target);
-            const { width, minWidth, placement, flipLevel, flip } = props;
+            const { width, minWidth, placement, internalShift, flip } = props;
             follower.setAttribute('v-placement', placement);
@@ -162,3 +159,3 @@ if (overlap) {
             const offsetContainerRect = (0, utils_1.getRect)(offsetContainerRef.value);
-            const { left: offsetLeftToStandardPlacement, top: offsetTopToStandardPlacement, placement: properPlacement } = (0, get_placement_style_1.getPlacementAndOffsetOfFollower)(placement, targetRect, followerRect, flipLevel, flip, overlap);
+            const { left: offsetLeftToStandardPlacement, top: offsetTopToStandardPlacement, placement: properPlacement } = (0, get_placement_style_1.getPlacementAndOffsetOfFollower)(placement, targetRect, followerRect, internalShift, flip, overlap);
             const properTransformOrigin = (0, get_placement_style_1.getProperTransformOrigin)(properPlacement, overlap);
@@ -169,5 +166,4 @@ const { left, top, transform } = (0, get_placement_style_1.getOffset)(properPlacement, offsetContainerRect, targetRect, offsetTopToStandardPlacement, offsetLeftToStandardPlacement, overlap);
             follower.setAttribute('v-placement', properPlacement);
-            // TODO: add it
-            // follower.style.setProperty('--v-offset-left', `${Math.round(offsetLeftToStandardPlacement)}px`)
-            // follower.style.setProperty('--v-offset-top', `${Math.round(offsetTopToStandardPlacement)}px`)
+            follower.style.setProperty('--v-offset-left', `${Math.round(offsetLeftToStandardPlacement)}px`);
+            follower.style.setProperty('--v-offset-top', `${Math.round(offsetTopToStandardPlacement)}px`);
             follower.style.transform = `translateX(${left}) translateY(${top}) ${transform}`;
@@ -190,3 +186,12 @@ follower.style.transformOrigin = properTransformOrigin;
         };
-        ['placement', 'x', 'y', 'flipLevel', 'flip', 'width', 'overlap', 'minWidth'].forEach((prop) => {
+        [
+            'placement',
+            'x',
+            'y',
+            'internalShift',
+            'flip',
+            'width',
+            'overlap',
+            'minWidth'
+        ].forEach((prop) => {
             (0, vue_1.watch)((0, vue_1.toRef)(props, prop), syncPosition);
@@ -193,0 +198,0 @@ });

lib/binder/src/get-placement-style.d.ts

@@ -1,2 +0,2 @@
-import { Placement, FlipLevel, Rect, TransformOrigin } from './interface';
+import { Placement, Rect, TransformOrigin } from './interface';
 interface PlacementAndOffset {
@@ -7,3 +7,3 @@ top: number;
 }
-export declare function getPlacementAndOffsetOfFollower(placement: Placement, targetRect: Rect, followerRect: Rect, flipLevel: FlipLevel, flip: boolean, overlap: boolean): PlacementAndOffset;
+export declare function getPlacementAndOffsetOfFollower(placement: Placement, targetRect: Rect, followerRect: Rect, shift: boolean, flip: boolean, overlap: boolean): PlacementAndOffset;
 export declare function getProperTransformOrigin(placement: Placement, overlap: boolean): TransformOrigin;
@@ -10,0 +10,0 @@ interface PlacementOffset {

lib/binder/src/get-placement-style.js

@@ -59,8 +59,8 @@ "use strict";
 };
-// const keepOffsetDirection: Record<Position, boolean> = {
-//   top: true, // top++
-//   bottom: false, // top--
-//   left: true, // left++
-//   right: false // left--
-// }
+const keepOffsetDirection = {
+    top: true,
+    bottom: false,
+    left: true,
+    right: false // left--
+};
 const cssPositionToOppositeAlign = {
@@ -72,3 +72,3 @@ top: 'end',
 };
-function getPlacementAndOffsetOfFollower(placement, targetRect, followerRect, flipLevel, flip, overlap) {
+function getPlacementAndOffsetOfFollower(placement, targetRect, followerRect, shift, flip, overlap) {
     if (!flip || overlap) {
@@ -79,22 +79,48 @@ return { placement: placement, top: 0, left: 0 };
     let properAlign = align !== null && align !== void 0 ? align : 'center';
-    let left = 0;
-    let top = 0;
-    // TODO: fix it
-    // calculate offset
-    // const deriveOffset = (
-    //   oppositeAlignCssSizeProp: 'width' | 'height',
-    //   currentAlignCssPositionProp: Position,
-    //   offsetVertically: boolean
-    // ): void => {
-    //   if (flipLevel < 2) return
-    //   const diff = followerRect[oppositeAlignCssSizeProp] - targetRect[currentAlignCssPositionProp] - targetRect[oppositeAlignCssSizeProp]
-    //   if (diff) {
-    //     if (offsetVertically) {
-    //       top = keepOffsetDirection[currentAlignCssPositionProp] ? diff : -diff
-    //     } else {
-    //       left = keepOffsetDirection[currentAlignCssPositionProp] ? diff : -diff
-    //     }
-    //   }
-    // }
-    // const offsetVertically = position === 'left' || position === 'right'
+    let properOffset = {
+        top: 0,
+        left: 0
+    };
+    const deriveOffset = (oppositeAlignCssSizeProp, alignCssPositionProp, offsetVertically) => {
+        let left = 0;
+        let top = 0;
+        const diff = followerRect[oppositeAlignCssSizeProp] -
+            targetRect[alignCssPositionProp] -
+            targetRect[oppositeAlignCssSizeProp];
+        if (diff > 0 && shift) {
+            if (offsetVertically) {
+                //       screen border
+                // |-----------------------------------------|
+                // |                    | f  |               |
+                // |                    | o  |               |
+                // |                    | l  |               |
+                // |                    | l  |----           |
+                // |                    | o  |tar |          |
+                // |                    | w  |get |          |
+                // |                    | e  |    |          |
+                // |                    | r  |----           |
+                // |                     ----                |
+                // |-----------------------------------------|
+                top = keepOffsetDirection[alignCssPositionProp] ? diff : -diff;
+            }
+            else {
+                //       screen border
+                // |----------------------------------------|
+                // |                                        |
+                // |          ----------                    |
+                // |          | target |                    |
+                // |       ----------------------------------
+                // |       |       follower                 |
+                // |       ----------------------------------
+                // |                                        |
+                // |----------------------------------------|
+                left = keepOffsetDirection[alignCssPositionProp] ? diff : -diff;
+            }
+        }
+        return {
+            left,
+            top
+        };
+    };
+    const offsetVertically = position === 'left' || position === 'right';
     // choose proper placement for non-center align
@@ -106,20 +132,36 @@ if (properAlign !== 'center') {
         // if follower rect is larger than target rect in align direction
-        //           [ target ]
-        //           [     follower     ]
-        // [     follower     ] <---->
-        if (followerRect[oppositeAlignCssSizeProp] > targetRect[oppositeAlignCssSizeProp]) {
+        // ----------[ target ]---------|
+        // ----------[     follower     ]
+        if (followerRect[oppositeAlignCssSizeProp] >
+            targetRect[oppositeAlignCssSizeProp]) {
             if (
             // current space is not enough
-            targetRect[oppositeAlignCssPositionProp] + targetRect[oppositeAlignCssSizeProp] < followerRect[oppositeAlignCssSizeProp]) {
-                const followerOverTargetSize = (followerRect[oppositeAlignCssSizeProp] - targetRect[oppositeAlignCssSizeProp]) / 2;
-                if ((targetRect[oppositeAlignCssPositionProp] < followerOverTargetSize) || (targetRect[currentAlignCssPositionProp] < followerOverTargetSize)) {
+            // ----------[ target ]---------|
+            // -------[     follower        ]
+            targetRect[oppositeAlignCssPositionProp] +
+                targetRect[oppositeAlignCssSizeProp] <
+                followerRect[oppositeAlignCssSizeProp]) {
+                const followerOverTargetSize = (followerRect[oppositeAlignCssSizeProp] -
+                    targetRect[oppositeAlignCssSizeProp]) /
+                    2;
+                if (targetRect[oppositeAlignCssPositionProp] < followerOverTargetSize ||
+                    targetRect[currentAlignCssPositionProp] < followerOverTargetSize) {
                     // opposite align has larger space
-                    if (targetRect[oppositeAlignCssPositionProp] < targetRect[currentAlignCssPositionProp]) {
+                    // -------[ target ]-----------|
+                    // -------[     follower     ]-|
+                    if (targetRect[oppositeAlignCssPositionProp] <
+                        targetRect[currentAlignCssPositionProp]) {
                         properAlign = oppositeAligns[align];
+                        properOffset = deriveOffset(oppositeAlignCssSizeProp, currentAlignCssPositionProp, offsetVertically);
                     }
-                    // TODO: fix it
-                    // deriveOffset(oppositeAlignCssSizeProp, oppositeAlignCssPositionProp, offsetVertically)
+                    else {
+                        // ----------------[ target ]----|
+                        // --------[   follower     ]----|
+                        properOffset = deriveOffset(oppositeAlignCssSizeProp, oppositeAlignCssPositionProp, offsetVertically);
+                    }
                 }
                 else {
                     // 'center' align is better
+                    // ------------[ target ]--------|
+                    // -------[       follower    ]--|
                     properAlign = 'center';
@@ -129,10 +171,11 @@ }
         }
-        // if follower rect is smaller than target rect in align direction
-        // [     target     ]
-        // [ follower ]         <---->
-        else if (followerRect[oppositeAlignCssSizeProp] < targetRect[oppositeAlignCssSizeProp]) {
+        else if (followerRect[oppositeAlignCssSizeProp] <
+            targetRect[oppositeAlignCssSizeProp]) {
             // TODO: maybe center is better
             if (targetRect[currentAlignCssPositionProp] < 0 &&
                 // opposite align has larger space
-                targetRect[oppositeAlignCssPositionProp] > targetRect[currentAlignCssPositionProp]) {
+                // ------------[   target   ]
+                // ----------------[follower]
+                targetRect[oppositeAlignCssPositionProp] >
+                    targetRect[currentAlignCssPositionProp]) {
                 properAlign = oppositeAligns[align];
@@ -143,20 +186,29 @@ }
     else {
-        const possibleAlternativeAlignCssPositionProp1 = (position === 'bottom' || position === 'top') ? 'left' : 'top';
+        const possibleAlternativeAlignCssPositionProp1 = position === 'bottom' || position === 'top' ? 'left' : 'top';
         const possibleAlternativeAlignCssPositionProp2 = oppositionPositions[possibleAlternativeAlignCssPositionProp1];
         const alternativeAlignCssSizeProp = propToCompare[possibleAlternativeAlignCssPositionProp1];
-        const followerOverTargetSize = (followerRect[alternativeAlignCssSizeProp] - targetRect[alternativeAlignCssSizeProp]) / 2;
+        const followerOverTargetSize = (followerRect[alternativeAlignCssSizeProp] -
+            targetRect[alternativeAlignCssSizeProp]) /
+            2;
         if (
         // center is not enough
-        (targetRect[possibleAlternativeAlignCssPositionProp1] < followerOverTargetSize) ||
-            (targetRect[possibleAlternativeAlignCssPositionProp2] < followerOverTargetSize)) {
+        // ----------- [ target ]--|
+        // -------[     follower     ]
+        targetRect[possibleAlternativeAlignCssPositionProp1] <
+            followerOverTargetSize ||
+            targetRect[possibleAlternativeAlignCssPositionProp2] <
+                followerOverTargetSize) {
             // alternative 2 position's space is larger
-            if (targetRect[possibleAlternativeAlignCssPositionProp1] > targetRect[possibleAlternativeAlignCssPositionProp2]) {
-                properAlign = cssPositionToOppositeAlign[possibleAlternativeAlignCssPositionProp1];
+            if (targetRect[possibleAlternativeAlignCssPositionProp1] >
+                targetRect[possibleAlternativeAlignCssPositionProp2]) {
+                properAlign =
+                    cssPositionToOppositeAlign[possibleAlternativeAlignCssPositionProp1];
+                properOffset = deriveOffset(alternativeAlignCssSizeProp, possibleAlternativeAlignCssPositionProp1, offsetVertically);
             }
             else {
                 // alternative 1 position's space is larger
-                properAlign = cssPositionToOppositeAlign[possibleAlternativeAlignCssPositionProp2];
+                properAlign =
+                    cssPositionToOppositeAlign[possibleAlternativeAlignCssPositionProp2];
+                properOffset = deriveOffset(alternativeAlignCssSizeProp, possibleAlternativeAlignCssPositionProp2, offsetVertically);
             }
-            // TODO: fix it
-            // deriveOffset(alternativeAlignCssSizeProp, possibleAlternativeAlignCssPositionProp1, offsetVertically)
         }
@@ -173,5 +225,7 @@ }
     return {
-        placement: properAlign !== 'center' ? `${properPosition}-${properAlign}` : properPosition,
-        left,
-        top
+        placement: properAlign !== 'center'
+            ? `${properPosition}-${properAlign}`
+            : properPosition,
+        left: properOffset.left,
+        top: properOffset.top
     };
@@ -274,3 +328,6 @@ }
             return {
-                top: `${Math.round(targetRect.top - offsetRect.top + targetRect.height + offsetTopToStandardPlacement)}px`,
+                top: `${Math.round(targetRect.top -
+                    offsetRect.top +
+                    targetRect.height +
+                    offsetTopToStandardPlacement)}px`,
                 left: `${Math.round(targetRect.left - offsetRect.left + offsetLeftToStandardPlacement)}px`,
@@ -281,4 +338,10 @@ transform: ''
             return {
-                top: `${Math.round(targetRect.top - offsetRect.top + targetRect.height + offsetTopToStandardPlacement)}px`,
-                left: `${Math.round(targetRect.left - offsetRect.left + targetRect.width + offsetLeftToStandardPlacement)}px`,
+                top: `${Math.round(targetRect.top -
+                    offsetRect.top +
+                    targetRect.height +
+                    offsetTopToStandardPlacement)}px`,
+                left: `${Math.round(targetRect.left -
+                    offsetRect.left +
+                    targetRect.width +
+                    offsetLeftToStandardPlacement)}px`,
                 transform: 'translateX(-100%)'
@@ -295,3 +358,6 @@ };
                 top: `${Math.round(targetRect.top - offsetRect.top + offsetTopToStandardPlacement)}px`,
-                left: `${Math.round(targetRect.left - offsetRect.left + targetRect.width + offsetLeftToStandardPlacement)}px`,
+                left: `${Math.round(targetRect.left -
+                    offsetRect.left +
+                    targetRect.width +
+                    offsetLeftToStandardPlacement)}px`,
                 transform: 'translateX(-100%) translateY(-100%)'
@@ -302,3 +368,6 @@ };
                 top: `${Math.round(targetRect.top - offsetRect.top + offsetTopToStandardPlacement)}px`,
-                left: `${Math.round(targetRect.left - offsetRect.left + targetRect.width + offsetLeftToStandardPlacement)}px`,
+                left: `${Math.round(targetRect.left -
+                    offsetRect.left +
+                    targetRect.width +
+                    offsetLeftToStandardPlacement)}px`,
                 transform: ''
@@ -308,4 +377,10 @@ };
             return {
-                top: `${Math.round(targetRect.top - offsetRect.top + targetRect.height + offsetTopToStandardPlacement)}px`,
-                left: `${Math.round(targetRect.left - offsetRect.left + targetRect.width + offsetLeftToStandardPlacement)}px`,
+                top: `${Math.round(targetRect.top -
+                    offsetRect.top +
+                    targetRect.height +
+                    offsetTopToStandardPlacement)}px`,
+                left: `${Math.round(targetRect.left -
+                    offsetRect.left +
+                    targetRect.width +
+                    offsetLeftToStandardPlacement)}px`,
                 transform: 'translateY(-100%)'
@@ -321,3 +396,6 @@ };
             return {
-                top: `${Math.round(targetRect.top - offsetRect.top + targetRect.height + offsetTopToStandardPlacement)}px`,
+                top: `${Math.round(targetRect.top -
+                    offsetRect.top +
+                    targetRect.height +
+                    offsetTopToStandardPlacement)}px`,
                 left: `${Math.round(targetRect.left - offsetRect.left + offsetLeftToStandardPlacement)}px`,
@@ -329,3 +407,6 @@ transform: 'translateX(-100%) translateY(-100%)'
                 top: `${Math.round(targetRect.top - offsetRect.top + offsetTopToStandardPlacement)}px`,
-                left: `${Math.round(targetRect.left - offsetRect.left + targetRect.width / 2 + offsetLeftToStandardPlacement)}px`,
+                left: `${Math.round(targetRect.left -
+                    offsetRect.left +
+                    targetRect.width / 2 +
+                    offsetLeftToStandardPlacement)}px`,
                 transform: 'translateY(-100%) translateX(-50%)'
@@ -335,4 +416,10 @@ };
             return {
-                top: `${Math.round(targetRect.top - offsetRect.top + targetRect.height / 2 + offsetTopToStandardPlacement)}px`,
-                left: `${Math.round(targetRect.left - offsetRect.left + targetRect.width + offsetLeftToStandardPlacement)}px`,
+                top: `${Math.round(targetRect.top -
+                    offsetRect.top +
+                    targetRect.height / 2 +
+                    offsetTopToStandardPlacement)}px`,
+                left: `${Math.round(targetRect.left -
+                    offsetRect.left +
+                    targetRect.width +
+                    offsetLeftToStandardPlacement)}px`,
                 transform: 'translateY(-50%)'
@@ -342,3 +429,6 @@ };
             return {
-                top: `${Math.round(targetRect.top - offsetRect.top + targetRect.height / 2 + offsetTopToStandardPlacement)}px`,
+                top: `${Math.round(targetRect.top -
+                    offsetRect.top +
+                    targetRect.height / 2 +
+                    offsetTopToStandardPlacement)}px`,
                 left: `${Math.round(targetRect.left - offsetRect.left + offsetLeftToStandardPlacement)}px`,
@@ -350,4 +440,10 @@ transform: 'translateY(-50%) translateX(-100%)'
             return {
-                top: `${Math.round(targetRect.top - offsetRect.top + targetRect.height + offsetTopToStandardPlacement)}px`,
-                left: `${Math.round(targetRect.left - offsetRect.left + targetRect.width / 2 + offsetLeftToStandardPlacement)}px`,
+                top: `${Math.round(targetRect.top -
+                    offsetRect.top +
+                    targetRect.height +
+                    offsetTopToStandardPlacement)}px`,
+                left: `${Math.round(targetRect.left -
+                    offsetRect.left +
+                    targetRect.width / 2 +
+                    offsetLeftToStandardPlacement)}px`,
                 transform: 'translateX(-50%)'
@@ -354,0 +450,0 @@ };

lib/binder/src/index.d.ts

@@ -5,2 +5,2 @@ export { default as Binder, default as VBinder } from './Binder';
 export type { FollowerInst } from './Follower';
-export type { Placement as FollowerPlacement, FlipLevel, ExposedBinderInstance as BinderInst } from './interface';
+export type { Placement as FollowerPlacement, ExposedBinderInstance as BinderInst } from './interface';

lib/resize-observer/src/VResizeObserver.js

@@ -28,7 +28,11 @@ "use strict";
             (0, shared_1.warn)('resize-observer', '$el does not exist.');
+            return;
         }
-        else if (el.nextElementSibling !== el.nextSibling) {
-            (0, shared_1.warn)('resize-observer', '$el can not be observed (it may be a text node).');
+        if (el.nextElementSibling !== el.nextSibling) {
+            if (el.nodeType === 3 && el.nodeValue !== '') {
+                (0, shared_1.warn)('resize-observer', '$el can not be observed (it may be a text node).');
+                return;
+            }
         }
-        else if (el.nextElementSibling !== null) {
+        if (el.nextElementSibling !== null) {
             delegate_1.default.registerHandler(el.nextElementSibling, this.handleResize);
@@ -35,0 +39,0 @@ this.registered = true;

package.json

 {
   "name": "vueuc",
-  "version": "0.4.19",
+  "version": "0.4.20",
   "description": "Util Components for Vue",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

205130

increased by3.17%

Lines of code

5341

increased by3.97%

No dependency changes