svelte-floating-ui - npm Package Compare versions

Comparing version 0.1.7 to 0.2.1

index.d.ts

 import type { ComputePositionConfig, ComputePositionReturn, Middleware, Padding } from "@floating-ui/core";
+import type { Options } from "@floating-ui/dom/src/autoUpdate";
 import type { Writable } from "svelte/store";
 export declare type ComputeConfig = Omit<ComputePositionConfig, "platform"> & {
     onComputed?: (computed: ComputePositionReturn) => void;
+    /**
+    * false: Don't initialize autoUpdate;
+    * object: Initialization with its own parameters;
+    * undefined: Standard autoUpdate values from the documentation;
+    * @default undefined
+    */
+    autoUpdate?: false | Partial<Options>;
 };
-export declare type UpdatePosition = (contentOptions?: ComputeConfig) => void;
+export declare type UpdatePosition = (contentOptions?: Omit<ComputeConfig, 'autoUpdate'>) => void;
 export declare type ReferenceAction = (node: HTMLElement) => void;
@@ -8,0 +16,0 @@ export declare type ContentAction = (node: HTMLElement, contentOptions?: ComputeConfig) => void;

index.js

 import { arrow as arrowCore } from "@floating-ui/core";
-import { computePosition } from "@floating-ui/dom";
+import { autoUpdate as _autoUpdate, computePosition } from "@floating-ui/dom";
 import { get } from "svelte/store";
 export function createFloatingActions(initOptions) {
     let referenceElement;
-    let contentElement;
+    let floatingElement;
     let options = initOptions;
-    const events = {
-        handler() {
-            updatePosition();
-        },
-        init() {
-            window.addEventListener('scroll', this.handler);
-            window.addEventListener('resize', this.handler);
-        },
-        destroy() {
-            window.removeEventListener('scroll', this.handler);
-            window.removeEventListener('resize', this.handler);
-        }
-    };
     const updatePosition = (updateOptions) => {
-        if (referenceElement && contentElement) {
+        if (referenceElement && floatingElement) {
             options = { ...initOptions, ...updateOptions };
-            computePosition(referenceElement, contentElement, options)
+            computePosition(referenceElement, floatingElement, options)
                 .then(v => {
-                Object.assign(contentElement.style, {
+                Object.assign(floatingElement.style, {
                     position: v.strategy,
@@ -38,17 +25,15 @@ left: `${v.x}px`,
         updatePosition();
-        return {
-            destroy() {
-                events.destroy();
-            }
-        };
     };
     const contentAction = (node, contentOptions) => {
-        contentElement = node;
+        let autoUpdateDestroy;
+        floatingElement = node;
         options = { ...initOptions, ...contentOptions };
         updatePosition();
-        events.init();
+        if (options.autoUpdate !== false) {
+            autoUpdateDestroy = _autoUpdate(referenceElement, floatingElement, () => updatePosition(), options.autoUpdate);
+        }
         return {
             update: updatePosition,
             destroy() {
-                events.destroy();
+                autoUpdateDestroy && autoUpdateDestroy();
             }
@@ -55,0 +40,0 @@ };

package.json

 {
   "name": "svelte-floating-ui",
   "description": "Svelte floating ui",
-  "version": "0.1.7",
+  "version": "0.2.1",
   "license": "MIT",
@@ -6,0 +6,0 @@ "main": "./index.js",

README.md

@@ -83,2 +83,40 @@ # svelte-floating-ui
 
+### [Floating UI autoUpdate](https://floating-ui.com/docs/autoUpdate)
+
+You can use [autoUpdate options](https://floating-ui.com/docs/autoUpdate#options) directly in initOptions for [createFloatingActions or floatingContent](https://github.com/fedorovvvv/svelte-floating-ui#example), but not in [update](https://github.com/fedorovvvv/svelte-floating-ui#updating-the-floating-ui-position)
+
+```svelte
+<script>
+  import { offset, flip, shift } from "@floating-ui/dom";
+  import { createFloatingActions } from "svelte-floating-ui";
+
+  const [ floatingRef, floatingContent ] = createFloatingActions({
+    strategy: "absolute",
+    placement: "top",
+    middleware: [
+      offset(6),
+      flip(),
+      shift(),
+    ],
+    autoUpdate: { // or false
+      ancestorScroll: true
+    }
+  });
+</script>
+```
+
+What values can autoUpdate have?
+
+Partial<[Options](https://floating-ui.com/docs/autoUpdate#options)>
+```ts
+/**
+* false: Don't initialize autoUpdate;
+* object: Initialization with its own parameters;
+* undefined: Standard autoUpdate values from the documentation;
+* @default undefined
+*/
+autoUpdate?: false | Partial<Options>
+```
+
+
 ### Applying custom styles on compute
@@ -106,3 +144,3 @@
     middleware: [
-      arrow({ element: $arrowRef })
+      arrow({ element: arrowRef })
     ],
@@ -109,0 +147,0 @@ onComputed({ placement, middlewareData }) {

No alert changes

Improved metrics

Total package byte prevSize

11127

12.14%

Number of lines in readme file

176

27.54%

Worsened metrics

Lines of code

84

-7.69%

No dependency changes