@floating-ui/vue - npm Package Compare versions

Comparing version 0.2.1 to 1.0.0

dist/floating-ui.vue.esm.js

@@ -32,2 +32,15 @@ import { arrow as arrow$1, computePosition } from '@floating-ui/dom';
 
+function getDPR(element) {
+  if (typeof window === 'undefined') {
+    return 1;
+  }
+  const win = element.ownerDocument.defaultView || window;
+  return win.devicePixelRatio || 1;
+}
+
+function roundByDPR(element, value) {
+  const dpr = getDPR(element);
+  return Math.round(value * dpr) / dpr;
+}
+
 /**
@@ -58,6 +71,10 @@ * Computes the `x` and `y` coordinates that will place the floating element next to a reference element when it is given a certain CSS positioning strategy.
   });
+  const transformOption = computed(() => {
+    var _unref4;
+    return (_unref4 = unref(options.transform)) != null ? _unref4 : true;
+  });
   const referenceElement = computed(() => unwrapElement(reference.value));
   const floatingElement = computed(() => unwrapElement(floating.value));
-  const x = ref(null);
-  const y = ref(null);
+  const x = ref(0);
+  const y = ref(0);
   const strategy = ref(strategyOption.value);
@@ -67,2 +84,28 @@ const placement = ref(placementOption.value);
   const isPositioned = ref(false);
+  const floatingStyles = computed(() => {
+    const initialStyles = {
+      position: strategy.value,
+      left: '0',
+      top: '0'
+    };
+    if (!floatingElement.value) {
+      return initialStyles;
+    }
+    const xVal = roundByDPR(floatingElement.value, x.value);
+    const yVal = roundByDPR(floatingElement.value, y.value);
+    if (transformOption.value) {
+      return {
+        ...initialStyles,
+        transform: "translate(" + xVal + "px, " + yVal + "px)",
+        ...(getDPR(floatingElement.value) >= 1.5 && {
+          willChange: 'transform'
+        })
+      };
+    }
+    return {
+      position: strategy.value,
+      left: xVal + "px",
+      top: yVal + "px"
+    };
+  });
   let whileElementsMountedCleanup;
@@ -127,2 +170,3 @@ function update() {
     isPositioned: shallowReadonly(isPositioned),
+    floatingStyles,
     update
@@ -129,0 +173,0 @@ };

dist/floating-ui.vue.esm.min.js

@@ -1,1 +0,1 @@
-import{arrow as e,computePosition as l}from"@floating-ui/dom";export*from"@floating-ui/dom";import{unref as n,computed as u,ref as a,shallowRef as t,watch as o,getCurrentScope as r,onScopeDispose as v,shallowReadonly as i}from"vue-demi";function d(e){var l;return null!=(l=null==e?void 0:e.$el)?l:e}function m(l){return{name:"arrow",options:l,fn(u){const a=d(n(l.element));return null==a?{}:e({element:a,padding:l.padding}).fn(u)}}}function f(e,m,f){void 0===f&&(f={});const s=f.whileElementsMounted,c=u((()=>{var e;return null==(e=n(f.open))||e})),p=u((()=>n(f.middleware))),y=u((()=>{var e;return null!=(e=n(f.placement))?e:"bottom"})),g=u((()=>{var e;return null!=(e=n(f.strategy))?e:"absolute"})),w=u((()=>d(e.value))),h=u((()=>d(m.value))),x=a(null),b=a(null),D=a(g.value),E=a(y.value),M=t({}),P=a(!1);let $;function j(){null!=w.value&&null!=h.value&&l(w.value,h.value,{middleware:p.value,placement:y.value,strategy:g.value}).then((e=>{x.value=e.x,b.value=e.y,D.value=e.strategy,E.value=e.placement,M.value=e.middlewareData,P.value=!0}))}function k(){"function"==typeof $&&($(),$=void 0)}return o([p,y,g],j,{flush:"sync"}),o([w,h],(function(){k(),void 0!==s?null==w.value||null==h.value||($=s(w.value,h.value,j)):j()}),{flush:"sync"}),o(c,(function(){c.value||(P.value=!1)}),{flush:"sync"}),r()&&v(k),{x:i(x),y:i(b),strategy:i(D),placement:i(E),middlewareData:i(M),isPositioned:i(P),update:j}}export{m as arrow,f as useFloating};
+import{arrow as e,computePosition as n}from"@floating-ui/dom";export*from"@floating-ui/dom";import{unref as l,computed as t,ref as u,shallowRef as a,watch as o,getCurrentScope as r,onScopeDispose as i,shallowReadonly as v}from"vue-demi";function f(e){var n;return null!=(n=null==e?void 0:e.$el)?n:e}function d(n){return{name:"arrow",options:n,fn(t){const u=f(l(n.element));return null==u?{}:e({element:u,padding:n.padding}).fn(t)}}}function s(e){if("undefined"==typeof window)return 1;return(e.ownerDocument.defaultView||window).devicePixelRatio||1}function m(e,n){const l=s(e);return Math.round(n*l)/l}function c(e,d,c){void 0===c&&(c={});const p=c.whileElementsMounted,w=t((()=>{var e;return null==(e=l(c.open))||e})),y=t((()=>l(c.middleware))),g=t((()=>{var e;return null!=(e=l(c.placement))?e:"bottom"})),x=t((()=>{var e;return null!=(e=l(c.strategy))?e:"absolute"})),h=t((()=>{var e;return null==(e=l(c.transform))||e})),D=t((()=>f(e.value))),b=t((()=>f(d.value))),M=u(0),P=u(0),C=u(x.value),E=u(g.value),R=a({}),S=u(!1),V=t((()=>{const e={position:C.value,left:"0",top:"0"};if(!b.value)return e;const n=m(b.value,M.value),l=m(b.value,P.value);return h.value?{...e,transform:"translate("+n+"px, "+l+"px)",...s(b.value)>=1.5&&{willChange:"transform"}}:{position:C.value,left:n+"px",top:l+"px"}}));let $;function j(){null!=D.value&&null!=b.value&&n(D.value,b.value,{middleware:y.value,placement:g.value,strategy:x.value}).then((e=>{M.value=e.x,P.value=e.y,C.value=e.strategy,E.value=e.placement,R.value=e.middlewareData,S.value=!0}))}function k(){"function"==typeof $&&($(),$=void 0)}return o([y,g,x],j,{flush:"sync"}),o([D,b],(function(){k(),void 0!==p?null==D.value||null==b.value||($=p(D.value,b.value,j)):j()}),{flush:"sync"}),o(w,(function(){w.value||(S.value=!1)}),{flush:"sync"}),r()&&i(k),{x:v(M),y:v(P),strategy:v(C),placement:v(E),middlewareData:v(R),isPositioned:v(S),floatingStyles:V,update:j}}export{d as arrow,c as useFloating};

dist/floating-ui.vue.umd.js

@@ -34,2 +34,15 @@ (function (global, factory) {
 
+  function getDPR(element) {
+    if (typeof window === 'undefined') {
+      return 1;
+    }
+    const win = element.ownerDocument.defaultView || window;
+    return win.devicePixelRatio || 1;
+  }
+
+  function roundByDPR(element, value) {
+    const dpr = getDPR(element);
+    return Math.round(value * dpr) / dpr;
+  }
+
   /**
@@ -60,6 +73,10 @@ * Computes the `x` and `y` coordinates that will place the floating element next to a reference element when it is given a certain CSS positioning strategy.
     });
+    const transformOption = vueDemi.computed(() => {
+      var _unref4;
+      return (_unref4 = vueDemi.unref(options.transform)) != null ? _unref4 : true;
+    });
     const referenceElement = vueDemi.computed(() => unwrapElement(reference.value));
     const floatingElement = vueDemi.computed(() => unwrapElement(floating.value));
-    const x = vueDemi.ref(null);
-    const y = vueDemi.ref(null);
+    const x = vueDemi.ref(0);
+    const y = vueDemi.ref(0);
     const strategy = vueDemi.ref(strategyOption.value);
@@ -69,2 +86,28 @@ const placement = vueDemi.ref(placementOption.value);
     const isPositioned = vueDemi.ref(false);
+    const floatingStyles = vueDemi.computed(() => {
+      const initialStyles = {
+        position: strategy.value,
+        left: '0',
+        top: '0'
+      };
+      if (!floatingElement.value) {
+        return initialStyles;
+      }
+      const xVal = roundByDPR(floatingElement.value, x.value);
+      const yVal = roundByDPR(floatingElement.value, y.value);
+      if (transformOption.value) {
+        return {
+          ...initialStyles,
+          transform: "translate(" + xVal + "px, " + yVal + "px)",
+          ...(getDPR(floatingElement.value) >= 1.5 && {
+            willChange: 'transform'
+          })
+        };
+      }
+      return {
+        position: strategy.value,
+        left: xVal + "px",
+        top: yVal + "px"
+      };
+    });
     let whileElementsMountedCleanup;
@@ -129,2 +172,3 @@ function update() {
       isPositioned: vueDemi.shallowReadonly(isPositioned),
+      floatingStyles,
       update
@@ -131,0 +175,0 @@ };

dist/floating-ui.vue.umd.min.js

@@ -1,1 +0,1 @@
-!function(e,l){"object"==typeof exports&&"undefined"!=typeof module?l(exports,require("@floating-ui/dom"),require("vue-demi")):"function"==typeof define&&define.amd?define(["exports","@floating-ui/dom","vue-demi"],l):l((e="undefined"!=typeof globalThis?globalThis:e||self).FloatingUIVue={},e.FloatingUIDOM,e.VueDemi)}(this,(function(e,l,n){"use strict";function u(e){var l;return null!=(l=null==e?void 0:e.$el)?l:e}e.arrow=function(e){return{name:"arrow",options:e,fn(t){const o=u(n.unref(e.element));return null==o?{}:l.arrow({element:o,padding:e.padding}).fn(t)}}},e.useFloating=function(e,t,o){void 0===o&&(o={});const a=o.whileElementsMounted,r=n.computed((()=>{var e;return null==(e=n.unref(o.open))||e})),i=n.computed((()=>n.unref(o.middleware))),d=n.computed((()=>{var e;return null!=(e=n.unref(o.placement))?e:"bottom"})),f=n.computed((()=>{var e;return null!=(e=n.unref(o.strategy))?e:"absolute"})),c=n.computed((()=>u(e.value))),s=n.computed((()=>u(t.value))),v=n.ref(null),p=n.ref(null),m=n.ref(f.value),y=n.ref(d.value),h=n.shallowRef({}),w=n.ref(!1);let g;function b(){null!=c.value&&null!=s.value&&l.computePosition(c.value,s.value,{middleware:i.value,placement:d.value,strategy:f.value}).then((e=>{v.value=e.x,p.value=e.y,m.value=e.strategy,y.value=e.placement,h.value=e.middlewareData,w.value=!0}))}function R(){"function"==typeof g&&(g(),g=void 0)}return n.watch([i,d,f],b,{flush:"sync"}),n.watch([c,s],(function(){R(),void 0!==a?null==c.value||null==s.value||(g=a(c.value,s.value,b)):b()}),{flush:"sync"}),n.watch(r,(function(){r.value||(w.value=!1)}),{flush:"sync"}),n.getCurrentScope()&&n.onScopeDispose(R),{x:n.shallowReadonly(v),y:n.shallowReadonly(p),strategy:n.shallowReadonly(m),placement:n.shallowReadonly(y),middlewareData:n.shallowReadonly(h),isPositioned:n.shallowReadonly(w),update:b}},Object.keys(l).forEach((function(n){"default"===n||e.hasOwnProperty(n)||Object.defineProperty(e,n,{enumerable:!0,get:function(){return l[n]}})})),Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@floating-ui/dom"),require("vue-demi")):"function"==typeof define&&define.amd?define(["exports","@floating-ui/dom","vue-demi"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).FloatingUIVue={},e.FloatingUIDOM,e.VueDemi)}(this,(function(e,n,t){"use strict";function l(e){var n;return null!=(n=null==e?void 0:e.$el)?n:e}function u(e){if("undefined"==typeof window)return 1;return(e.ownerDocument.defaultView||window).devicePixelRatio||1}function o(e,n){const t=u(e);return Math.round(n*t)/t}e.arrow=function(e){return{name:"arrow",options:e,fn(u){const o=l(t.unref(e.element));return null==o?{}:n.arrow({element:o,padding:e.padding}).fn(u)}}},e.useFloating=function(e,a,r){void 0===r&&(r={});const i=r.whileElementsMounted,f=t.computed((()=>{var e;return null==(e=t.unref(r.open))||e})),d=t.computed((()=>t.unref(r.middleware))),s=t.computed((()=>{var e;return null!=(e=t.unref(r.placement))?e:"bottom"})),c=t.computed((()=>{var e;return null!=(e=t.unref(r.strategy))?e:"absolute"})),v=t.computed((()=>{var e;return null==(e=t.unref(r.transform))||e})),p=t.computed((()=>l(e.value))),m=t.computed((()=>l(a.value))),w=t.ref(0),y=t.ref(0),h=t.ref(c.value),g=t.ref(s.value),x=t.shallowRef({}),b=t.ref(!1),R=t.computed((()=>{const e={position:h.value,left:"0",top:"0"};if(!m.value)return e;const n=o(m.value,w.value),t=o(m.value,y.value);return v.value?{...e,transform:"translate("+n+"px, "+t+"px)",...u(m.value)>=1.5&&{willChange:"transform"}}:{position:h.value,left:n+"px",top:t+"px"}}));let D;function P(){null!=p.value&&null!=m.value&&n.computePosition(p.value,m.value,{middleware:d.value,placement:s.value,strategy:c.value}).then((e=>{w.value=e.x,y.value=e.y,h.value=e.strategy,g.value=e.placement,x.value=e.middlewareData,b.value=!0}))}function O(){"function"==typeof D&&(D(),D=void 0)}return t.watch([d,s,c],P,{flush:"sync"}),t.watch([p,m],(function(){O(),void 0!==i?null==p.value||null==m.value||(D=i(p.value,m.value,P)):P()}),{flush:"sync"}),t.watch(f,(function(){f.value||(b.value=!1)}),{flush:"sync"}),t.getCurrentScope()&&t.onScopeDispose(O),{x:t.shallowReadonly(w),y:t.shallowReadonly(y),strategy:t.shallowReadonly(h),placement:t.shallowReadonly(g),middlewareData:t.shallowReadonly(x),isPositioned:t.shallowReadonly(b),floatingStyles:R,update:P}},Object.keys(n).forEach((function(t){"default"===t||e.hasOwnProperty(t)||Object.defineProperty(e,t,{enumerable:!0,get:function(){return n[t]}})})),Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "@floating-ui/vue",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "@rollingversions": {
@@ -67,3 +67,3 @@ "baseVersion": [
   "dependencies": {
-    "@floating-ui/dom": "^1.2.1",
+    "@floating-ui/dom": "^1.2.7",
     "vue-demi": "^0.13.11"
@@ -70,0 +70,0 @@ },

src/types.d.ts

@@ -31,6 +31,12 @@ import type { FloatingElement, Middleware, MiddlewareData, Padding, Placement, ReferenceElement, Strategy } from '@floating-ui/dom';
     /**
+     * Whether to use `transform` instead of `top` and `left` styles to
+     * position the floating element (`floatingStyles`).
+     * @default true
+     */
+    transform?: MaybeReadonlyRef<boolean | undefined>;
+    /**
      * Callback to handle mounting/unmounting of the elements.
      * @default undefined
      */
-    whileElementsMounted?: (reference: T, floating: FloatingElement, update: () => void) => void | (() => void);
+    whileElementsMounted?: (reference: T, floating: FloatingElement, update: () => void) => () => void;
 };
@@ -41,7 +47,7 @@ export type UseFloatingReturn = {
      */
-    x: Readonly<Ref<number | null>>;
+    x: Readonly<Ref<number>>;
     /**
      * The y-coord of the floating element.
      */
-    y: Readonly<Ref<number | null>>;
+    y: Readonly<Ref<number>>;
     /**
@@ -64,2 +70,12 @@ * The stateful placement, which can be different from the initial `placement` passed as options.
     /**
+     * CSS styles to apply to the floating element to position it.
+     */
+    floatingStyles: Readonly<Ref<{
+        position: Strategy;
+        top: string;
+        left: string;
+        transform?: string;
+        willChange?: string;
+    }>>;
+    /**
      * The function to update floating position manually.
@@ -66,0 +82,0 @@ */

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29641

increased by21.04%

Number of package files

16

increased by14.29%

Lines of code

650

increased by29.48%

Number of low quality alerts

1

decreased by-50%

Dependency changes

• Updated@floating-ui/dom@^1.2.7