@floating-ui/vue - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/floating-ui.vue.esm.js

@@ -1,8 +0,7 @@
-import { computePosition, arrow as arrow$1 } from '@floating-ui/dom';
+import { arrow as arrow$1, computePosition } from '@floating-ui/dom';
 export * from '@floating-ui/dom';
-import { computed, unref, ref, shallowRef, watch, getCurrentScope, onScopeDispose, shallowReadonly } from 'vue-demi';
+import { unref, computed, ref, shallowRef, watch, getCurrentScope, onScopeDispose, shallowReadonly } from 'vue-demi';
 
 function unwrapElement(element) {
   var _$el;
-
   return (_$el = element == null ? void 0 : element.$el) != null ? _$el : element;
@@ -12,2 +11,24 @@ }
 /**
+ * Positions an inner element of the floating element such that it is centered to the reference element.
+ * @param options The arrow options.
+ * @see https://floating-ui.com/docs/arrow
+ */
+function arrow(options) {
+  return {
+    name: 'arrow',
+    options,
+    fn(args) {
+      const element = unwrapElement(unref(options.element));
+      if (element == null) {
+        return {};
+      }
+      return arrow$1({
+        element,
+        padding: options.padding
+      }).fn(args);
+    }
+  };
+}
+
+/**
  * 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.
@@ -19,3 +40,2 @@ * @param reference The reference template ref.
  */
-
 function useFloating(reference, floating, options) {
@@ -25,14 +45,15 @@ if (options === void 0) {
   }
-
   const whileElementsMountedOption = options.whileElementsMounted;
+  const openOption = computed(() => {
+    var _unref;
+    return (_unref = unref(options.open)) != null ? _unref : true;
+  });
   const middlewareOption = computed(() => unref(options.middleware));
   const placementOption = computed(() => {
-    var _unref;
-
-    return (_unref = unref(options.placement)) != null ? _unref : 'bottom';
+    var _unref2;
+    return (_unref2 = unref(options.placement)) != null ? _unref2 : 'bottom';
   });
   const strategyOption = computed(() => {
-    var _unref2;
-
-    return (_unref2 = unref(options.strategy)) != null ? _unref2 : 'absolute';
+    var _unref3;
+    return (_unref3 = unref(options.strategy)) != null ? _unref3 : 'absolute';
   });
@@ -46,4 +67,4 @@ const referenceElement = computed(() => unwrapElement(reference.value));
   const middlewareData = shallowRef({});
+  const isPositioned = ref(false);
   let whileElementsMountedCleanup;
-
   function update() {
@@ -53,3 +74,2 @@ if (referenceElement.value == null || floatingElement.value == null) {
     }
-
     computePosition(referenceElement.value, floatingElement.value, {
@@ -65,5 +85,5 @@ middleware: middlewareOption.value,
       middlewareData.value = position.middlewareData;
+      isPositioned.value = true;
     });
   }
-
   function cleanup() {
@@ -75,6 +95,4 @@ if (typeof whileElementsMountedCleanup === 'function') {
   }
-
   function attach() {
     cleanup();
-
     if (whileElementsMountedOption === undefined) {
@@ -84,3 +102,2 @@ update();
     }
-
     if (referenceElement.value != null && floatingElement.value != null) {
@@ -91,3 +108,7 @@ whileElementsMountedCleanup = whileElementsMountedOption(referenceElement.value, floatingElement.value, update);
   }
-
+  function reset() {
+    if (!openOption.value) {
+      isPositioned.value = false;
+    }
+  }
   watch([middlewareOption, placementOption, strategyOption], update, {
@@ -99,7 +120,8 @@ flush: 'sync'
   });
-
+  watch(openOption, reset, {
+    flush: 'sync'
+  });
   if (getCurrentScope()) {
     onScopeDispose(cleanup);
   }
-
   return {
@@ -111,2 +133,3 @@ x: shallowReadonly(x),
     middlewareData: shallowReadonly(middlewareData),
+    isPositioned: shallowReadonly(isPositioned),
     update
@@ -116,29 +139,2 @@ };
 
-/**
- * Positions an inner element of the floating element such that it is centered to the reference element.
- * @param options The arrow options.
- * @see https://floating-ui.com/docs/arrow
- */
-
-function arrow(options) {
-  return {
-    name: 'arrow',
-    options,
-
-    fn(args) {
-      const element = unwrapElement(unref(options.element));
-
-      if (element == null) {
-        return {};
-      }
-
-      return arrow$1({
-        element,
-        padding: options.padding
-      }).fn(args);
-    }
-
-  };
-}
-
 export { arrow, useFloating };

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

@@ -1,1 +0,1 @@
-import{computePosition as e,arrow as l}from"@floating-ui/dom";export*from"@floating-ui/dom";import{computed as n,unref as u,ref as a,shallowRef as t,watch as r,getCurrentScope as o,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,m,f){void 0===f&&(f={});const c=f.whileElementsMounted,s=n((()=>u(f.middleware))),p=n((()=>{var e;return null!=(e=u(f.placement))?e:"bottom"})),y=n((()=>{var e;return null!=(e=u(f.strategy))?e:"absolute"})),g=n((()=>d(l.value))),w=n((()=>d(m.value))),h=a(null),x=a(null),b=a(y.value),D=a(p.value),E=t({});let M;function $(){null!=g.value&&null!=w.value&&e(g.value,w.value,{middleware:s.value,placement:p.value,strategy:y.value}).then((e=>{h.value=e.x,x.value=e.y,b.value=e.strategy,D.value=e.placement,E.value=e.middlewareData}))}function j(){"function"==typeof M&&(M(),M=void 0)}return r([s,p,y],$,{flush:"sync"}),r([g,w],(function(){j(),void 0!==c?null==g.value||null==w.value||(M=c(g.value,w.value,$)):$()}),{flush:"sync"}),o()&&v(j),{x:i(h),y:i(x),strategy:i(b),placement:i(D),middlewareData:i(E),update:$}}function f(e){return{name:"arrow",options:e,fn(n){const a=d(u(e.element));return null==a?{}:l({element:a,padding:e.padding}).fn(n)}}}export{f as arrow,m as useFloating};
+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};

dist/floating-ui.vue.umd.js

@@ -9,3 +9,2 @@ (function (global, factory) {
     var _$el;
-
     return (_$el = element == null ? void 0 : element.$el) != null ? _$el : element;
@@ -15,2 +14,24 @@ }
   /**
+   * Positions an inner element of the floating element such that it is centered to the reference element.
+   * @param options The arrow options.
+   * @see https://floating-ui.com/docs/arrow
+   */
+  function arrow(options) {
+    return {
+      name: 'arrow',
+      options,
+      fn(args) {
+        const element = unwrapElement(vueDemi.unref(options.element));
+        if (element == null) {
+          return {};
+        }
+        return dom.arrow({
+          element,
+          padding: options.padding
+        }).fn(args);
+      }
+    };
+  }
+
+  /**
    * 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.
@@ -22,3 +43,2 @@ * @param reference The reference template ref.
    */
-
   function useFloating(reference, floating, options) {
@@ -28,14 +48,15 @@ if (options === void 0) {
     }
-
     const whileElementsMountedOption = options.whileElementsMounted;
+    const openOption = vueDemi.computed(() => {
+      var _unref;
+      return (_unref = vueDemi.unref(options.open)) != null ? _unref : true;
+    });
     const middlewareOption = vueDemi.computed(() => vueDemi.unref(options.middleware));
     const placementOption = vueDemi.computed(() => {
-      var _unref;
-
-      return (_unref = vueDemi.unref(options.placement)) != null ? _unref : 'bottom';
+      var _unref2;
+      return (_unref2 = vueDemi.unref(options.placement)) != null ? _unref2 : 'bottom';
     });
     const strategyOption = vueDemi.computed(() => {
-      var _unref2;
-
-      return (_unref2 = vueDemi.unref(options.strategy)) != null ? _unref2 : 'absolute';
+      var _unref3;
+      return (_unref3 = vueDemi.unref(options.strategy)) != null ? _unref3 : 'absolute';
     });
@@ -49,4 +70,4 @@ const referenceElement = vueDemi.computed(() => unwrapElement(reference.value));
     const middlewareData = vueDemi.shallowRef({});
+    const isPositioned = vueDemi.ref(false);
     let whileElementsMountedCleanup;
-
     function update() {
@@ -56,3 +77,2 @@ if (referenceElement.value == null || floatingElement.value == null) {
       }
-
       dom.computePosition(referenceElement.value, floatingElement.value, {
@@ -68,5 +88,5 @@ middleware: middlewareOption.value,
         middlewareData.value = position.middlewareData;
+        isPositioned.value = true;
       });
     }
-
     function cleanup() {
@@ -78,6 +98,4 @@ if (typeof whileElementsMountedCleanup === 'function') {
     }
-
     function attach() {
       cleanup();
-
       if (whileElementsMountedOption === undefined) {
@@ -87,3 +105,2 @@ update();
       }
-
       if (referenceElement.value != null && floatingElement.value != null) {
@@ -94,3 +111,7 @@ whileElementsMountedCleanup = whileElementsMountedOption(referenceElement.value, floatingElement.value, update);
     }
-
+    function reset() {
+      if (!openOption.value) {
+        isPositioned.value = false;
+      }
+    }
     vueDemi.watch([middlewareOption, placementOption, strategyOption], update, {
@@ -102,7 +123,8 @@ flush: 'sync'
     });
-
+    vueDemi.watch(openOption, reset, {
+      flush: 'sync'
+    });
     if (vueDemi.getCurrentScope()) {
       vueDemi.onScopeDispose(cleanup);
     }
-
     return {
@@ -114,2 +136,3 @@ x: vueDemi.shallowReadonly(x),
       middlewareData: vueDemi.shallowReadonly(middlewareData),
+      isPositioned: vueDemi.shallowReadonly(isPositioned),
       update
@@ -119,29 +142,2 @@ };
 
-  /**
-   * Positions an inner element of the floating element such that it is centered to the reference element.
-   * @param options The arrow options.
-   * @see https://floating-ui.com/docs/arrow
-   */
-
-  function arrow(options) {
-    return {
-      name: 'arrow',
-      options,
-
-      fn(args) {
-        const element = unwrapElement(vueDemi.unref(options.element));
-
-        if (element == null) {
-          return {};
-        }
-
-        return dom.arrow({
-          element,
-          padding: options.padding
-        }).fn(args);
-      }
-
-    };
-  }
-
   exports.arrow = arrow;
@@ -148,0 +144,0 @@ exports.useFloating = useFloating;

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((()=>n.unref(o.middleware))),i=n.computed((()=>{var e;return null!=(e=n.unref(o.placement))?e:"bottom"})),d=n.computed((()=>{var e;return null!=(e=n.unref(o.strategy))?e:"absolute"})),f=n.computed((()=>u(e.value))),c=n.computed((()=>u(t.value))),s=n.ref(null),v=n.ref(null),p=n.ref(d.value),m=n.ref(i.value),y=n.shallowRef({});let h;function w(){null!=f.value&&null!=c.value&&l.computePosition(f.value,c.value,{middleware:r.value,placement:i.value,strategy:d.value}).then((e=>{s.value=e.x,v.value=e.y,p.value=e.strategy,m.value=e.placement,y.value=e.middlewareData}))}function g(){"function"==typeof h&&(h(),h=void 0)}return n.watch([r,i,d],w,{flush:"sync"}),n.watch([f,c],(function(){g(),void 0!==a?null==f.value||null==c.value||(h=a(f.value,c.value,w)):w()}),{flush:"sync"}),n.getCurrentScope()&&n.onScopeDispose(g),{x:n.shallowReadonly(s),y:n.shallowReadonly(v),strategy:n.shallowReadonly(p),placement:n.shallowReadonly(m),middlewareData:n.shallowReadonly(y),update:w}},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,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})}));

package.json

 {
   "name": "@floating-ui/vue",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "@rollingversions": {
@@ -34,3 +34,2 @@ "baseVersion": [
   ],
-  "browserslist": "> 0.5%, not dead, not IE 11",
   "scripts": {
@@ -69,22 +68,11 @@ "test": "jest test",
   "dependencies": {
-    "@floating-ui/dom": "^1.0.10",
+    "@floating-ui/dom": "^1.1.0",
     "vue-demi": "^0.13.11"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.16.4",
-    "@babel/preset-typescript": "^7.16.0",
     "@parcel/transformer-vue": "^2.6.0",
-    "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/plugin-replace": "^3.0.0",
     "@testing-library/vue": "^6.6.1",
-    "@types/jest": "^27.0.3",
-    "babel-plugin-annotate-pure-calls": "^0.4.0",
-    "jest": "^27.3.1",
-    "rollup": "^2.60.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "ts-jest": "^27.0.7",
     "vue": "^3.2.45"
   }
 }

src/index.d.ts

@@ -0,3 +1,3 @@
+export { arrow } from './arrow';
+export { useFloating } from './useFloating';
 export * from '@floating-ui/dom';
-export { useFloating } from './useFloating';
-export { arrow } from './arrow';

src/types.d.ts

@@ -0,8 +1,13 @@
+import type { FloatingElement, Middleware, MiddlewareData, Padding, Placement, ReferenceElement, Strategy } from '@floating-ui/dom';
 import type { ComponentPublicInstance, Ref } from 'vue-demi';
-import type { ReferenceElement, FloatingElement, Placement, Strategy, Middleware, MiddlewareData, Padding } from '@floating-ui/dom';
 export * from '.';
-export declare type MaybeReadonlyRef<T> = T | Readonly<Ref<T>>;
-export declare type MaybeElement<T> = T | ComponentPublicInstance | null | undefined;
-export declare type UseFloatingOptions<T extends ReferenceElement = ReferenceElement> = {
+export type MaybeReadonlyRef<T> = T | Readonly<Ref<T>>;
+export type MaybeElement<T> = T | ComponentPublicInstance | null | undefined;
+export type UseFloatingOptions<T extends ReferenceElement = ReferenceElement> = {
     /**
+     * Represents the open/close state of the floating element.
+     * @default true
+     */
+    open?: MaybeReadonlyRef<boolean | undefined>;
+    /**
      * Where to place the floating element relative to its reference element.
@@ -28,3 +33,3 @@ * @default 'bottom'
 };
-export declare type UseFloatingReturn = {
+export type UseFloatingReturn = {
     /**
@@ -51,2 +56,6 @@ * The x-coord of the floating element.
     /**
+     * The boolean that let you know if the floating element has been positioned.
+     */
+    isPositioned: Readonly<Ref<boolean>>;
+    /**
      * The function to update floating position manually.
@@ -56,3 +65,3 @@ */
 };
-export declare type ArrowOptions = {
+export type ArrowOptions = {
     /**
@@ -59,0 +68,0 @@ * The arrow element or template ref to be positioned.

src/useFloating.d.ts

@@ -0,3 +1,3 @@
+import type { FloatingElement, ReferenceElement } from '@floating-ui/dom';
 import type { Ref } from 'vue-demi';
-import type { FloatingElement, ReferenceElement } from '@floating-ui/dom';
 import type { MaybeElement, UseFloatingOptions, UseFloatingReturn } from './types';
@@ -4,0 +4,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

Improved metrics

Total package byte prevSize

23658

increased by5.94%

Dev dependency count

4

decreased by-73.33%

Lines of code

497

increased by12.44%

Dependency changes

• Updated@floating-ui/dom@^1.1.0