svelte-legos - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

package.json

 {
 	"name": "svelte-legos",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"main": "./package/index.js",
@@ -19,9 +19,8 @@ "repository": {
 		"test:unit": "vitest",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write .",
+		"lint": "prettier --plugin-search-dir . --check ./src && eslint .",
+		"format": "prettier --plugin-search-dir . --write ./src",
 		"watch:docs": "node page-gen.js",
 		"start:dev": "concurrently --kill-others \"npm run watch:docs\" \"npm run dev\"",
 		"build:docs": "vite build",
-		"deploy:docs": "npm run build:docs && ./deploy.sh",
-		"publish": "cd package && npm publish"
+		"deploy:docs": "npm run build:docs && ./deploy.sh"
 	},
@@ -41,7 +40,7 @@ "devDependencies": {
 		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
+		"eslint-config-prettier": "^8.7.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.21",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.8.1",
+		"prettier": "^2.8.4",
+		"prettier-plugin-svelte": "^2.9.0",
 		"svelte": "^3.54.0",
@@ -48,0 +47,0 @@ "svelte-check": "^3.0.1",

package/actions/alertAction/meta.json

 {
-  "description": "An action to create alerting information, confirm operations and prompting messages."
-}
+	"description": "An action to create alerting information, confirm operations and prompting messages."
+}

package/actions/clickOutsideAction/meta.json

 {
-  "description": "On click outside action."   
-}
+	"description": "On click outside action."
+}

package/actions/clickToCopyAction/meta.json

 {
-  "description": "An action to quickly copy text to clipboard."
-}
+	"description": "An action to quickly copy text to clipboard."
+}

package/actions/confettiAction/index.d.ts

 interface ConfettiActionParams {
-    type: 'simple' | 'school-pride';
+    type: "simple" | "school-pride";
     particleCount: number;
@@ -4,0 +4,0 @@ spread: number;

package/actions/confettiAction/index.js

 import { eventListenerStore } from "../../stores/eventListenerStore";
-import confetti from 'canvas-confetti';
+import confetti from "canvas-confetti";
 const defaultConfettiParams = {
-    type: 'simple',
+    type: "simple",
     particleCount: 100,
     spread: 70,
-    origin: { y: 0.5, x: 0.5 }
+    origin: { y: 0.5, x: 0.5 },
 };
@@ -17,8 +17,8 @@ export function confettiAction(node, params = defaultConfettiParams) {
         async function handleClick() {
-            if (params.type === 'simple') {
+            if (params.type === "simple") {
                 confetti(params);
             }
             else {
-                const end = Date.now() + (1 * 1000);
-                const colors = ['#bb0000', '#ffffff'];
+                const end = Date.now() + 1 * 1000;
+                const colors = ["#bb0000", "#ffffff"];
                 (function frame() {
@@ -30,3 +30,3 @@ confetti({
                         origin: { x: 0 },
-                        colors: colors
+                        colors: colors,
                     });
@@ -38,3 +38,3 @@ confetti({
                         origin: { x: 1 },
-                        colors: colors
+                        colors: colors,
                     });
@@ -44,3 +44,3 @@ if (Date.now() < end) {
                     }
-                }());
+                })();
             }
@@ -47,0 +47,0 @@ }

package/actions/confettiAction/meta.json

 {
-  "description": "An action to show confetti just on the click on the element."
-}
+	"description": "An action to show confetti just on the click on the element."
+}

package/actions/debounceClickAction/meta.json

 {
-  "description": "An action to debounce the click event by the duration provided."   
-}
+	"description": "An action to debounce the click event by the duration provided."
+}

package/actions/documentTitleAction/meta.json

 {
-  "description": "An action for inputs and textarea values binded to document title."   
-}
+	"description": "An action for inputs and textarea values binded to document title."
+}

package/actions/draggableAction/index.js

@@ -7,3 +7,3 @@ import { eventListenerStore } from "../../stores/eventListenerStore";
             return;
-        node.style.setProperty('cursor', 'move');
+        node.style.setProperty("cursor", "move");
         node.setPointerCapture(e.pointerId);
@@ -16,3 +16,3 @@ isDragging = true;
             y += e.movementY;
-            node.style.setProperty('transform', `translate(${x}px, ${y}px)`);
+            node.style.setProperty("transform", `translate(${x}px, ${y}px)`);
         }
@@ -23,7 +23,7 @@ }
         isDragging = false;
-        node.removeEventListener('pointermove', handlePointerMove);
+        node.removeEventListener("pointermove", handlePointerMove);
     }
-    const { stop: stopPointerDown } = eventListenerStore('pointerdown', handlePointerDown, node);
-    const { stop: stopPointerMove } = eventListenerStore('pointermove', handlePointerMove, node);
-    const { stop: stopPointerUp } = eventListenerStore('pointerup', handlePointerUp, node);
+    const { stop: stopPointerDown } = eventListenerStore("pointerdown", handlePointerDown, node);
+    const { stop: stopPointerMove } = eventListenerStore("pointermove", handlePointerMove, node);
+    const { stop: stopPointerUp } = eventListenerStore("pointerup", handlePointerUp, node);
     return {
@@ -30,0 +30,0 @@ destroy() {

package/actions/draggableAction/meta.json

 {
-  "description": "An action to make elements draggable."   
-}
+	"description": "An action to make elements draggable."
+}

package/actions/eyeDropperAction/index.d.ts

@@ -18,3 +18,3 @@ export interface EyeDropperOpenOptions {
 }
-export declare function eyeDropperAction<T extends HTMLElement>(node: T, { onDone, onError, }: EyeDropperActionParams): {
+export declare function eyeDropperAction<T extends HTMLElement>(node: T, { onDone, onError }: EyeDropperActionParams): {
     update: () => void;
@@ -21,0 +21,0 @@ destroy: () => void;

package/actions/eyeDropperAction/index.js

 import { eventListenerStore } from "../../stores/eventListenerStore";
-export function eyeDropperAction(node, { onDone, onError, }) {
+export function eyeDropperAction(node, { onDone, onError }) {
     let stop;
@@ -4,0 +4,0 @@ const destroy = () => {

package/actions/eyeDropperAction/meta.json

 {
-  "description": "An action to open EyeDropper on click of the element action is binded to. It's an experimental API."
-}
+	"description": "An action to open EyeDropper on click of the element action is binded to. It's an experimental API."
+}

package/actions/focusAction/meta.json

 {
-  "description": "An action to easily put focus on elements using a boolean value."
-}
+	"description": "An action to easily put focus on elements using a boolean value."
+}

package/actions/fullScreenAction/meta.json

 {
-  "description": "An action to make elements like video or window full screen on click of the element action binded to. It adds methods to present a specific Element (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed. This makes it possible to present desired content—such as an online game—using the user's entire screen, removing all browser user interface elements and other applications from the screen until full-screen mode is shut off."   
-}
+	"description": "An action to make elements like video or window full screen on click of the element action binded to. It adds methods to present a specific Element (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed. This makes it possible to present desired content—such as an online game—using the user's entire screen, removing all browser user interface elements and other applications from the screen until full-screen mode is shut off."
+}

package/actions/hotKeyAction/index.js

 import { isUndefined } from "../../shared/utils/utils";
 import { eventListenerStore } from "../../stores/eventListenerStore";
-const Keys = [
-    "alt",
-    "code",
-    "ctrl",
-    "meta",
-    "shift",
-];
+const Keys = ["alt", "code", "ctrl", "meta", "shift"];
 const KeysToEventMap = {
@@ -11,0 +5,0 @@ alt: "altKey",

package/actions/hotKeyAction/meta.json

 {
-  "description": "An action to add a keyboard shortcut to a div or a button."   
-}
+	"description": "An action to add a keyboard shortcut to a div or a button."
+}

package/actions/hoverAction/meta.json

 {
-  "description": "Simple way to handle hover action. Uses useHover internally."   
-}
+	"description": "Simple way to handle hover action. Uses useHover internally."
+}

package/actions/lazyLoadImageAction/index.js

@@ -16,3 +16,3 @@ import { elementVisibilityStore } from "../../stores/elementVisibilityStore";
             if (isVisible) {
-                const url = node.getAttribute('data-src');
+                const url = node.getAttribute("data-src");
                 if (url) {
@@ -19,0 +19,0 @@ node.src = url;

package/actions/lazyLoadImageAction/meta.json

 {
-  "description": "An action to easily make images lazy loadable."
-}
+	"description": "An action to easily make images lazy loadable."
+}

package/actions/loadingAction/index.js

@@ -15,19 +15,17 @@ import Loader from "./Loader";
             }
-            ;
             return;
         }
-        ;
-        const position = node.style.getPropertyValue('position');
-        const overflow = node.style.getPropertyValue('overflow');
-        const pointerEvents = node.style.getPropertyValue('pointer-events');
+        const position = node.style.getPropertyValue("position");
+        const overflow = node.style.getPropertyValue("overflow");
+        const pointerEvents = node.style.getPropertyValue("pointer-events");
         restoreNode = () => {
-            node.style.setProperty('position', position);
-            node.style.setProperty('overflow', overflow);
-            node.style.setProperty('pointer-events', pointerEvents);
+            node.style.setProperty("position", position);
+            node.style.setProperty("overflow", overflow);
+            node.style.setProperty("pointer-events", pointerEvents);
         };
         destroy();
         function prepareNode() {
-            node.style.setProperty('position', 'relative');
-            node.style.setProperty('overflow', 'hidden');
-            node.style.setProperty('pointer-events', 'none');
+            node.style.setProperty("position", "relative");
+            node.style.setProperty("overflow", "hidden");
+            node.style.setProperty("pointer-events", "none");
         }
@@ -34,0 +32,0 @@ prepareNode();

package/actions/loadingAction/meta.json

 {
-  "description": "An action to quickly create loaders on your elements"
-}
+	"description": "An action to quickly create loaders on your elements"
+}

package/actions/longPressAction/index.js

@@ -6,3 +6,5 @@ import { timeoutFnStore } from "../../stores/timeoutFnStore";
     }
-    const { start, stop, changeDuration } = timeoutFnStore(handleTimeout, duration, { immediate: false });
+    const { start, stop, changeDuration } = timeoutFnStore(handleTimeout, duration, {
+        immediate: false,
+    });
     const handleMousedown = () => {
@@ -9,0 +11,0 @@ start();

package/actions/longPressAction/meta.json

 {
-  "description": "On long press action."   
-}
+	"description": "On long press action."
+}

package/actions/messageAction/meta.json

 {
-  "description": "An action to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification."
-}
+	"description": "An action to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification."
+}

package/actions/notifyAction/demo.svelte.d.ts

@@ -1,18 +0,4 @@
-/** @typedef {typeof __propDef.props}  DemoProps */
-/** @typedef {typeof __propDef.events}  DemoEvents */
-/** @typedef {typeof __propDef.slots}  DemoSlots */
-export default class Demo extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type DemoProps = typeof __propDef.props;
-export type DemoEvents = typeof __propDef.events;
-export type DemoSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
+    props: Record<string, never>;
     events: {
@@ -23,2 +9,7 @@ [evt: string]: CustomEvent<any>;
 };
+export type DemoProps = typeof __propDef.props;
+export type DemoEvents = typeof __propDef.events;
+export type DemoSlots = typeof __propDef.slots;
+export default class Demo extends SvelteComponentTyped<DemoProps, DemoEvents, DemoSlots> {
+}
 export {};

package/actions/notifyAction/index.d.ts

@@ -0,4 +1,7 @@
+import type { NotificationType } from "./Notification";
 interface NotifyActionParams {
     title: string;
     description?: string;
+    type?: NotificationType | undefined;
+    duration?: number | undefined;
 }
@@ -5,0 +8,0 @@ export declare function notifyAction<T extends HTMLElement>(node: T, params: NotifyActionParams): {

package/actions/notifyAction/index.js

@@ -11,3 +11,3 @@ import { eventListenerStore } from "../../stores/eventListenerStore";
         function handleClick() {
-            NotificationManager.getInstance().createNotification(params.title, params.description);
+            NotificationManager.getInstance().createNotification(params.title, params.description, params.type, params.duration);
         }
@@ -14,0 +14,0 @@ ({ stop } = eventListenerStore("click", handleClick, node));

package/actions/notifyAction/meta.json

 {
-  "description": "An action to quickly create notification poppers."
-}
+	"description": "An action to quickly create notification poppers."
+}

package/actions/notifyAction/Notification.d.ts

@@ -0,8 +1,11 @@
+export type NotificationType = "success" | "error" | "info" | "warning";
 export default class Notification {
     title: string;
     description?: string;
+    type?: NotificationType | undefined;
+    duration?: number;
     onUnmount?: () => void;
     private __container;
     private __timer;
-    constructor(title: string, description?: string, onUnmount?: () => void);
+    constructor(title: string, description?: string, onUnmount?: () => void, type?: NotificationType | undefined, duration?: number | undefined);
     private init;
@@ -9,0 +12,0 @@ show(): void;

package/actions/notifyAction/Notification.js

@@ -0,11 +1,16 @@
+import { cross, error, info, success, warn } from "./icons/index";
 export default class Notification {
     title;
     description;
+    type;
+    duration;
     onUnmount;
     __container;
     __timer;
-    constructor(title, description, onUnmount) {
+    constructor(title, description, onUnmount, type, duration) {
         this.title = title;
         this.description = description;
         this.__container = document.createElement("div");
+        this.type = type;
+        this.duration = duration ?? 4000;
         this.onUnmount = onUnmount;
@@ -21,3 +26,3 @@ this.init();
             this.hide();
-        }, 4000);
+        }, this.duration);
     }
@@ -50,2 +55,29 @@ show() {
         header.setAttribute("style", headerStyles);
+        const iconTextContainer = document.createElement("div");
+        const iconTextContainerStyles = `
+        display: flex;
+        align-items: center;
+      `;
+        iconTextContainer.setAttribute("style", iconTextContainerStyles);
+        const icon = document.createElement("img");
+        const iconStyles = `
+        width: 20px;
+        height: 20px;
+        margin-right: 8px;
+      `;
+        switch (this.type) {
+            case "success":
+                icon.setAttribute("src", success);
+                break;
+            case "error":
+                icon.setAttribute("src", error);
+                break;
+            case "info":
+                icon.setAttribute("src", info);
+                break;
+            case "warning":
+                icon.setAttribute("src", warn);
+                break;
+        }
+        icon.setAttribute("style", iconStyles);
         const title = document.createElement("h2");
@@ -61,10 +93,13 @@ const titleStyles = `
         title.setAttribute("style", titleStyles);
-        header.appendChild(title);
-        const closeBtn = document.createElement("div");
+        if (this.type)
+            iconTextContainer.appendChild(icon);
+        iconTextContainer.appendChild(title);
+        header.appendChild(iconTextContainer);
+        const closeBtn = document.createElement("img");
         const closeBtnStyles = `
         cursor: pointer;
-        font-size: 12px;
+        width: 16px;
       `;
-        closeBtn.textContent = "╳";
         closeBtn.setAttribute("style", closeBtnStyles);
+        closeBtn.setAttribute("src", cross);
         closeBtn.addEventListener("click", () => {
@@ -83,3 +118,3 @@ clearTimeout(this.__timer);
       `;
-        description.textContent = this.description;
+        description.textContent = this.description ?? "";
         description.setAttribute("style", descriptionStyles);
@@ -86,0 +121,0 @@ this.__container.appendChild(description);

package/actions/notifyAction/NotificationManager.d.ts

@@ -0,1 +1,2 @@
+import { type NotificationType } from "./Notification";
 export default class NotificationManager {
@@ -6,5 +7,5 @@ private static __instance;
     createContainer(): void;
-    createNotification(title: string, description?: string): void;
+    createNotification(title: string, description?: string, type?: NotificationType, duration?: number | undefined): void;
     private checkAndUnmount;
     static getInstance(): NotificationManager;
 }

package/actions/notifyAction/NotificationManager.js

@@ -1,2 +0,2 @@
-import Notification from "./Notification";
+import Notification, {} from "./Notification";
 export default class NotificationManager {
@@ -24,7 +24,7 @@ static __instance;
     }
-    createNotification(title, description) {
+    createNotification(title, description, type, duration) {
         this.createContainer();
         const notification = new Notification(title, description, () => {
             this.checkAndUnmount();
-        });
+        }, type, duration);
         notification.mount(this.__container);
@@ -31,0 +31,0 @@ requestAnimationFrame(() => {

package/actions/notifyAction/usage.txt

@@ -9,2 +9,4 @@ <script>
     description: "You can put your little description here.",
+    type: "success",
+    duration: 4000,
   }}
@@ -11,0 +13,0 @@ >

package/actions/resizableAction/index.js

@@ -15,5 +15,5 @@ class Corner {
     init() {
-        const horizontal = (this.type === "top-left" || this.type === "bottom-left") ? "left: -5px;" : "right: -5px;";
-        const vertical = (this.type === "top-right" || this.type === "top-left") ? "top: -5px;" : "bottom: -5px;";
-        const cursor = (this.type === "top-left" || this.type === "bottom-right") ? "nwse-resize" : "nesw-resize";
+        const horizontal = this.type === "top-left" || this.type === "bottom-left" ? "left: -5px;" : "right: -5px;";
+        const vertical = this.type === "top-right" || this.type === "top-left" ? "top: -5px;" : "bottom: -5px;";
+        const cursor = this.type === "top-left" || this.type === "bottom-right" ? "nwse-resize" : "nesw-resize";
         const cornerStyles = `
@@ -29,4 +29,4 @@ width: 10px;
     `;
-        const corner = document.createElement('div');
-        corner.setAttribute('style', cornerStyles);
+        const corner = document.createElement("div");
+        corner.setAttribute("style", cornerStyles);
         this.__anchor.appendChild(corner);
@@ -49,5 +49,5 @@ let isDragging = false;
         }
-        corner.addEventListener('pointerdown', handlePointerDown);
-        corner.addEventListener('pointermove', handlePointerMove.bind(this));
-        corner.addEventListener('pointerup', handlePointerUp);
+        corner.addEventListener("pointerdown", handlePointerDown);
+        corner.addEventListener("pointermove", handlePointerMove.bind(this));
+        corner.addEventListener("pointerup", handlePointerUp);
         this.__corner = corner;
@@ -57,5 +57,5 @@ }
 export function resizableAction(node) {
-    node.style.setProperty('position', 'absolute');
-    node.style.setProperty('z-index', '1000000');
-    node.style.setProperty('border', '1px dashed black');
+    node.style.setProperty("position", "absolute");
+    node.style.setProperty("z-index", "1000000");
+    node.style.setProperty("border", "1px dashed black");
     const bounds = node.getBoundingClientRect();
@@ -104,11 +104,10 @@ const rect = { top: bounds.top, left: bounds.left, width: bounds.width, height: bounds.height };
     function updateRect() {
-        node.style.setProperty('top', rect.top + 'px');
-        node.style.setProperty('left', rect.left + 'px');
-        node.style.setProperty('width', rect.width + 'px');
-        node.style.setProperty('height', rect.height + 'px');
+        node.style.setProperty("top", rect.top + "px");
+        node.style.setProperty("left", rect.left + "px");
+        node.style.setProperty("width", rect.width + "px");
+        node.style.setProperty("height", rect.height + "px");
     }
     return {
-        destroy() {
-        },
+        destroy() { },
     };
 }

package/actions/resizableAction/meta.json

 {
-  "active": false,
-  "description": "An action to make elements resizable."   
-}
+	"active": false,
+	"description": "An action to make elements resizable."
+}

package/actions/scrollToBottomAction/index.js

@@ -22,3 +22,2 @@ export function scrollToBottomAction(node, immediate = true) {
         }
-        ;
         const mutationObserver = new MutationObserver(mutationCallback);
@@ -25,0 +24,0 @@ mutationObserver.observe(node, { childList: true, subtree: true });

package/actions/scrollToBottomAction/meta.json

 {
-  "description": "Also known as chat-scroll, an action to scroll to bottom of an element when it's scrollHeight or content changes."
-}
+	"description": "Also known as chat-scroll, an action to scroll to bottom of an element when it's scrollHeight or content changes."
+}

package/actions/sortableTableAction/index.js

@@ -37,3 +37,3 @@ export function sortableTableAction(node, { headerSelector: headerSelector = `thead th` } = {}) {
                 const val_2 = row2.cells[sortColIdx].textContent ?? ``;
-                return (sortDir * val_1.localeCompare(val_2, undefined, { numeric: true }));
+                return sortDir * val_1.localeCompare(val_2, undefined, { numeric: true });
             });
@@ -40,0 +40,0 @@ for (const row of rows)

package/actions/sortableTableAction/meta.json

 {
-  "description": "Sort tables by clicking on the column headers"
+	"description": "Sort tables by clicking on the column headers"
 }

package/actions/textareaAutosizeAction/core.js

@@ -78,3 +78,3 @@ const PROXY_TEXTAREA_ELEMENT_HIDDEN_STYLE = `
         if (this._probablyResizeHappen) {
-            const newHeight = parseNumber(this._element.style.getPropertyValue('height'));
+            const newHeight = parseNumber(this._element.style.getPropertyValue("height"));
             if (!Number.isNaN(newHeight) && newHeight !== this._lastCalculatedHeight) {
@@ -90,5 +90,5 @@ this._minHeightFromResizeObserver = newHeight;
         this._minRows = parseNumber(minRows);
-        this._element.addEventListener('pointerdown', this.__onpointerdown);
-        this._element.addEventListener('pointermove', this.__onpointermove);
-        this._element.addEventListener('pointerup', this.__onpointerup);
+        this._element.addEventListener("pointerdown", this.__onpointerdown);
+        this._element.addEventListener("pointermove", this.__onpointermove);
+        this._element.addEventListener("pointerup", this.__onpointerup);
         // setup proxy textarea element
@@ -157,5 +157,5 @@ // if not present
     cleanUp() {
-        this._element?.removeEventListener('pointerdown', this.__onpointerdown);
-        this._element?.removeEventListener('pointermove', this.__onpointermove);
-        this._element?.removeEventListener('pointerup', this.__onpointerup);
+        this._element?.removeEventListener("pointerdown", this.__onpointerdown);
+        this._element?.removeEventListener("pointermove", this.__onpointermove);
+        this._element?.removeEventListener("pointerup", this.__onpointerup);
         ProxyTextareaElement._proxyTextareaElement?.remove();
@@ -165,3 +165,2 @@ ProxyTextareaElement._proxyTextareaElement = undefined;
 }
-;
 export default ProxyTextareaElement;

package/actions/textareaAutosizeAction/index.js

@@ -13,3 +13,3 @@ import { eventListenerStore } from "../../stores/eventListenerStore";
         }
-        const { stop } = eventListenerStore('input', handleChange, node);
+        const { stop } = eventListenerStore("input", handleChange, node);
         function cleanUp() {
@@ -16,0 +16,0 @@ proxy.cleanUp();

package/actions/textareaAutosizeAction/meta.json

 {
-  "description": "An action that converts a textarea into an auto resizeable textarea."   
-}
+	"description": "An action that converts a textarea into an auto resizeable textarea."
+}

package/actions/tooltipAction/index.js

@@ -74,3 +74,7 @@ import { hoverStore } from "../../stores/hoverStore";
     addPointer() {
-        const pointerX = this.__placement === "center" ? 'left: 50%;' : (this.__placement === "left" ? "left: 20%;" : "right: 20%;");
+        const pointerX = this.__placement === "center"
+            ? "left: 50%;"
+            : this.__placement === "left"
+                ? "left: 20%;"
+                : "right: 20%;";
         const styles = `
@@ -77,0 +81,0 @@ width: 0;

package/actions/tooltipAction/meta.json

 {
-  "description": "An action to display simple tooltips."   
-}
+	"description": "An action to display simple tooltips."
+}

package/index.js

@@ -28,23 +28,23 @@ export { counterStore } from "./stores/counterStore";
 
-export { clickOutsideAction } from './actions/clickOutsideAction';
-export { longPressAction } from './actions/longPressAction';
-export { hoverAction } from './actions/hoverAction';
-export { textareaAutosizeAction } from './actions/textareaAutosizeAction';
-export { tooltipAction } from './actions/tooltipAction';
-export { sortableTableAction } from './actions/sortableTableAction';
-export { draggableAction } from './actions/draggableAction';
-export { resizableAction } from './actions/resizableAction';
-export { hotKeyAction } from './actions/hotKeyAction';
-export { notifyAction } from './actions/notifyAction';
-export { loadingAction } from './actions/loadingAction';
-export { messageAction } from './actions/messageAction';
-export { alertAction } from './actions/alertAction';
-export { clickToCopyAction } from './actions/clickToCopyAction';
-export { lazyLoadImageAction } from './actions/lazyLoadImageAction';
-export { documentTitleAction } from './actions/documentTitleAction';
-export { fullScreenAction } from './actions/fullScreenAction';
-export { eyeDropperAction } from './actions/eyeDropperAction';
-export { debounceClickAction } from './actions/debounceClickAction';
-export { confettiAction } from './actions/confettiAction';
-export { focusAction } from './actions/focusAction';
-export { scrollToBottomAction } from './actions/scrollToBottomAction';
+export { clickOutsideAction } from "./actions/clickOutsideAction";
+export { longPressAction } from "./actions/longPressAction";
+export { hoverAction } from "./actions/hoverAction";
+export { textareaAutosizeAction } from "./actions/textareaAutosizeAction";
+export { tooltipAction } from "./actions/tooltipAction";
+export { sortableTableAction } from "./actions/sortableTableAction";
+export { draggableAction } from "./actions/draggableAction";
+export { resizableAction } from "./actions/resizableAction";
+export { hotKeyAction } from "./actions/hotKeyAction";
+export { notifyAction } from "./actions/notifyAction";
+export { loadingAction } from "./actions/loadingAction";
+export { messageAction } from "./actions/messageAction";
+export { alertAction } from "./actions/alertAction";
+export { clickToCopyAction } from "./actions/clickToCopyAction";
+export { lazyLoadImageAction } from "./actions/lazyLoadImageAction";
+export { documentTitleAction } from "./actions/documentTitleAction";
+export { fullScreenAction } from "./actions/fullScreenAction";
+export { eyeDropperAction } from "./actions/eyeDropperAction";
+export { debounceClickAction } from "./actions/debounceClickAction";
+export { confettiAction } from "./actions/confettiAction";
+export { focusAction } from "./actions/focusAction";
+export { scrollToBottomAction } from "./actions/scrollToBottomAction";

package/package.json

 {
   "name": "svelte-legos",
-  "version": "0.1.1",
+  "version": "0.0.7",
   "main": "./package/index.js",
@@ -26,7 +26,7 @@ "repository": {
     "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.8.1",
+    "prettier": "^2.8.4",
+    "prettier-plugin-svelte": "^2.9.0",
     "svelte": "^3.54.0",
@@ -125,2 +125,8 @@ "svelte-check": "^3.0.1",
     "./actions/notifyAction/demo.svelte": "./actions/notifyAction/demo.svelte",
+    "./actions/notifyAction/icons/cross.svg": "./actions/notifyAction/icons/cross.svg",
+    "./actions/notifyAction/icons/error.svg": "./actions/notifyAction/icons/error.svg",
+    "./actions/notifyAction/icons": "./actions/notifyAction/icons/index.js",
+    "./actions/notifyAction/icons/info.svg": "./actions/notifyAction/icons/info.svg",
+    "./actions/notifyAction/icons/success.svg": "./actions/notifyAction/icons/success.svg",
+    "./actions/notifyAction/icons/warn.svg": "./actions/notifyAction/icons/warn.svg",
     "./actions/notifyAction": "./actions/notifyAction/index.js",
@@ -127,0 +133,0 @@ "./actions/notifyAction/meta.json": "./actions/notifyAction/meta.json",

package/shared/index.d.ts

@@ -1,2 +0,2 @@
-import { type Readable, type Writable } from 'svelte/store';
+import { type Readable, type Writable } from "svelte/store";
 export declare function tryOnDestroy(fn: () => void): void;
@@ -3,0 +3,0 @@ export declare function noop(): void;

package/shared/index.js

@@ -1,3 +0,3 @@
-import { get_current_component, onDestroy } from 'svelte/internal';
-import { get } from 'svelte/store';
+import { get_current_component, onDestroy } from "svelte/internal";
+import { get } from "svelte/store";
 export function tryOnDestroy(fn) {
@@ -21,4 +21,4 @@ try {
         return false;
-    if (typeof ref === 'object') {
-        return 'subscribe' in ref;
+    if (typeof ref === "object") {
+        return "subscribe" in ref;
     }
@@ -35,7 +35,7 @@ return false;
     if (!Number.isSafeInteger(int)) {
-        throw new Error('Interval is not a safe integer');
+        throw new Error("Interval is not a safe integer");
     }
 }
-export const isClient = typeof window !== 'undefined';
+export const isClient = typeof window !== "undefined";
 export const defaultWindow = isClient ? window : undefined;
 export const defaultDocument = isClient ? window.document : undefined;

package/stores/activeElementStore/meta.json

 {
-  "description": "Reactive document.activeElement"
-}
+	"description": "Reactive document.activeElement"
+}

package/stores/counterStore/index.js

@@ -1,2 +0,2 @@
-import { writable } from 'svelte/store';
+import { writable } from "svelte/store";
 export function counterStore(initialValue = 0, options = {}) {
@@ -22,4 +22,4 @@ const store = writable(initialValue);
         set,
-        reset
+        reset,
     };
 }

package/stores/counterStore/meta.json

 {
-  "description": "Reactive counter"
-}
+	"description": "Reactive counter"
+}

package/stores/cssVarStore/index.js

 import { defaultDocument } from "../../shared";
 import { writable } from "svelte/store";
 export function cssVarStore(name, { el, initialValue } = {}) {
-    const target = el || (defaultDocument?.documentElement);
+    const target = el || defaultDocument?.documentElement;
     const store = writable(initialValue);
@@ -6,0 +6,0 @@ function updateCSSVar(value) {

package/stores/cssVarStore/meta.json

 {
-  "description": "A writable store to manipulate CSS variables."
-}
+	"description": "A writable store to manipulate CSS variables."
+}

package/stores/documentVisibilityStore/index.d.ts

@@ -1,3 +0,3 @@
-import type { ConfigurableDocument } from '../../shared/utils/types';
-import { type Readable } from 'svelte/store';
-export declare function documentVisibilityStore({ document }?: ConfigurableDocument): Readable<DocumentVisibilityState>;
+import type { ConfigurableDocument } from "../../shared/utils/types";
+import { type Readable } from "svelte/store";
+export declare function documentVisibilityStore({ document, }?: ConfigurableDocument): Readable<DocumentVisibilityState>;

package/stores/documentVisibilityStore/index.js

@@ -1,9 +0,9 @@
-import { defaultDocument } from '../../shared';
-import { readable } from 'svelte/store';
+import { defaultDocument } from "../../shared";
+import { readable } from "svelte/store";
 function getCurrentDocumentVisibility(document = defaultDocument) {
     if (!document)
-        return 'visible';
+        return "visible";
     return document.visibilityState;
 }
-export function documentVisibilityStore({ document = defaultDocument } = {}) {
+export function documentVisibilityStore({ document = defaultDocument, } = {}) {
     const visibility = readable(getCurrentDocumentVisibility(document), (set) => {
@@ -14,5 +14,5 @@ function handler() {
         if (document) {
-            document.addEventListener('visibilitychange', handler);
+            document.addEventListener("visibilitychange", handler);
             return () => {
-                document.removeEventListener('visibilitychange', handler);
+                document.removeEventListener("visibilitychange", handler);
             };
@@ -19,0 +19,0 @@ }

package/stores/documentVisibilityStore/meta.json

 {
-  "description": "Reactive document visibility"
-}
+	"description": "Reactive document visibility"
+}

package/stores/elementBoundingStore/meta.json

 {
-  "description": "Reactive element bounding"
-}
+	"description": "Reactive element bounding"
+}

package/stores/elementSizeStore/meta.json

 {
-  "description": "Reactive element size"
-}
+	"description": "Reactive element size"
+}

package/stores/elementVisibilityStore/index.js

@@ -6,3 +6,3 @@ import { defaultWindow, tryOnDestroy, writableToReadable } from "../../shared";
     function stop() {
-        window?.removeEventListener('scroll', check);
+        window?.removeEventListener("scroll", check);
     }
@@ -16,8 +16,6 @@ function check() {
         const rect = target.getBoundingClientRect();
-        const test = (rect.top <=
-            (window.innerHeight || document.documentElement.clientHeight) &&
-            rect.left <=
-                (window.innerWidth || document.documentElement.clientWidth) &&
+        const test = rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.left <= (window.innerWidth || document.documentElement.clientWidth) &&
             rect.bottom >= 0 &&
-            rect.right >= 0);
+            rect.right >= 0;
         store.set(test);
@@ -27,3 +25,3 @@ }
         stop();
-        window?.addEventListener('scroll', check, { capture: false, passive: true });
+        window?.addEventListener("scroll", check, { capture: false, passive: true });
         check();
@@ -30,0 +28,0 @@ }

package/stores/elementVisibilityStore/meta.json

 {
-  "description": "Tracks the visibility of an element within the viewport."
-}
+	"description": "Tracks the visibility of an element within the viewport."
+}

package/stores/eventListenerStore/index.js

 import { tryOnDestroy } from "../../shared";
 export function eventListenerStore(eventName, handler, element, options) {
     // Create event listener that calls handler function stored in ref
-    const listener = event => handler(event);
+    const listener = (event) => handler(event);
     function start() {
@@ -6,0 +6,0 @@ const targetElement = element ?? window;

package/stores/eventListenerStore/meta.json

 {
-  "description": "Use EventListener with simplicity. Supports Window, Element and Document and custom events with almost the same parameters as the native addEventListener options. See examples below."
-}
+	"description": "Use EventListener with simplicity. Supports Window, Element and Document and custom events with almost the same parameters as the native addEventListener options. See examples below."
+}

package/stores/eyeDropperStore/index.js

@@ -17,3 +17,3 @@ import { writableToReadable } from "../../shared";
         })
-            .catch(e => {
+            .catch((e) => {
             console.warn(e);
@@ -20,0 +20,0 @@ });

package/stores/eyeDropperStore/meta.json

 {
-  "description": "A store with open action and a color readable whose value will be set to eye dropper selection."
-}
+	"description": "A store with open action and a color readable whose value will be set to eye dropper selection."
+}

package/stores/hoverStore/meta.json

 {
-  "description": "React UI sensor hook that uses Javascript/Typescript instead of CSS to figure out if the mouse element is in the hover element. So, you can separate the logic from the user interface (UI)."
-}
+	"description": "React UI sensor hook that uses Javascript/Typescript instead of CSS to figure out if the mouse element is in the hover element. So, you can separate the logic from the user interface (UI)."
+}

package/stores/intervalFnStore/index.d.ts

@@ -1,3 +0,3 @@
-import type { Fn, Pausable } from '../../shared/utils/types';
-import { type Readable } from 'svelte/store';
+import type { Fn, Pausable } from "../../shared/utils/types";
+import { type Readable } from "svelte/store";
 /**
@@ -4,0 +4,0 @@ * Wrapper for `setInterval` with controls.

package/stores/intervalFnStore/index.js

@@ -1,3 +0,3 @@
-import { isReadable, isSafeIntegerThrowable, tryOnDestroy, unwrapReadable, writableToReadable } from '../../shared';
-import { writable } from 'svelte/store';
+import { isReadable, isSafeIntegerThrowable, tryOnDestroy, unwrapReadable, writableToReadable, } from "../../shared";
+import { writable } from "svelte/store";
 /**
@@ -52,4 +52,4 @@ * Wrapper for `setInterval` with controls.
         pause,
-        changeIntervalTime
+        changeIntervalTime,
     };
 }

package/stores/intervalFnStore/meta.json

 {
-  "description": "Wrapper for setInterval with controls"
-}
+	"description": "Wrapper for setInterval with controls"
+}

package/stores/intervalStore/index.d.ts

@@ -1,2 +0,2 @@
-import { type Readable } from 'svelte/store';
+import { type Readable } from "svelte/store";
 /**
@@ -3,0 +3,0 @@ * Wrapper for `setInterval` with controls.

package/stores/intervalStore/index.js

@@ -1,3 +0,3 @@
-import { readable } from 'svelte/store';
-import { intervalFnStore } from '../intervalFnStore';
+import { readable } from "svelte/store";
+import { intervalFnStore } from "../intervalFnStore";
 /**
@@ -15,3 +15,3 @@ * Wrapper for `setInterval` with controls.
     let value = 0;
-    const counter = readable(value, set => {
+    const counter = readable(value, (set) => {
         function handler() {
@@ -18,0 +18,0 @@ value++;

package/stores/intervalStore/meta.json

 {
-  "description": "Reactive counter increases on every interval"
-}
+	"description": "Reactive counter increases on every interval"
+}

package/stores/memoryStore/index.d.ts

@@ -19,3 +19,3 @@ /**
     readonly usedJSHeapSize: number;
-    [Symbol.toStringTag]: 'MemoryInfo';
+    [Symbol.toStringTag]: "MemoryInfo";
 }
@@ -22,0 +22,0 @@ export declare function memoryStore(): import("svelte/store").Readable<{

package/stores/memoryStore/index.js

@@ -5,7 +5,7 @@ import { readable } from "svelte/store";
     let memory = undefined;
-    const isSupported = typeof performance !== 'undefined' && 'memory' in performance;
+    const isSupported = typeof performance !== "undefined" && "memory" in performance;
     if (isSupported) {
         memory = performance.memory;
     }
-    return readable({ isSupported, memory }, set => {
+    return readable({ isSupported, memory }, (set) => {
         let stop = () => { };
@@ -12,0 +12,0 @@ if (isSupported) {

package/stores/memoryStore/meta.json

 {
-  "description": "A readable store to easily access the current memory usage of your browser."
-}
+	"description": "A readable store to easily access the current memory usage of your browser."
+}

package/stores/messagesStore/meta.json

 {
-  "description": "Different from messageAction, messagesStore allow you to show message anytime you want."
-}
+	"description": "Different from messageAction, messagesStore allow you to show message anytime you want."
+}

package/stores/mouseStore/index.d.ts

@@ -1,3 +0,3 @@
-import type { ConfigurableWindow, Position } from '../../shared/utils/types';
-import { type Readable } from 'svelte/store';
+import type { ConfigurableWindow, Position } from "../../shared/utils/types";
+import { type Readable } from "svelte/store";
 export interface UseMouseOptions extends ConfigurableWindow {
@@ -4,0 +4,0 @@ /**

package/stores/mouseStore/index.js

@@ -1,6 +0,6 @@
-import { defaultWindow } from '../../shared';
-import { readable } from 'svelte/store';
+import { defaultWindow } from "../../shared";
+import { readable } from "svelte/store";
 const initialValue = {
     x: 0,
-    y: 0
+    y: 0,
 };
@@ -12,3 +12,3 @@ function getCurrentMousePosition(e) {
         x: e.pageX,
-        y: e.pageY
+        y: e.pageY,
     };
@@ -23,5 +23,5 @@ }
         if (window) {
-            window.addEventListener('mousemove', handler);
+            window.addEventListener("mousemove", handler);
             return () => {
-                window.removeEventListener('mousemove', handler);
+                window.removeEventListener("mousemove", handler);
             };
@@ -28,0 +28,0 @@ }

package/stores/mouseStore/meta.json

 {
-  "description": "Reactive mouse position"
-}
+	"description": "Reactive mouse position"
+}

package/stores/networkStore/index.d.ts

 import type { ConfigurableWindow } from "../../shared/utils/types";
 import { type Readable } from "svelte/store";
-export type NetworkType = 'bluetooth' | 'cellular' | 'ethernet' | 'none' | 'wifi' | 'wimax' | 'other' | 'unknown';
-export type NetworkEffectiveType = 'slow-2g' | '2g' | '3g' | '4g' | undefined;
+export type NetworkType = "bluetooth" | "cellular" | "ethernet" | "none" | "wifi" | "wimax" | "other" | "unknown";
+export type NetworkEffectiveType = "slow-2g" | "2g" | "3g" | "4g" | undefined;
 export interface NetworkState {
@@ -6,0 +6,0 @@ isSupported: boolean;

package/stores/networkStore/index.js

@@ -7,3 +7,3 @@ import { defaultWindow, tryOnDestroy, writableToReadable } from "../../shared";
     const navigator = window?.navigator;
-    const isSupported = !!(navigator && 'connection' in navigator);
+    const isSupported = !!(navigator && "connection" in navigator);
     const store = writable({
@@ -19,3 +19,3 @@ isSupported,
         effectiveType: undefined,
-        type: 'unknown'
+        type: "unknown",
     });
@@ -27,28 +27,28 @@ const connection = isSupported && navigator.connection;
         const state = {};
-        state['isOnline'] = navigator.onLine;
-        state['offlineAt'] = state.isOnline ? undefined : Date.now();
-        state['onlineAt'] = state.isOnline ? Date.now() : undefined;
+        state["isOnline"] = navigator.onLine;
+        state["offlineAt"] = state.isOnline ? undefined : Date.now();
+        state["onlineAt"] = state.isOnline ? Date.now() : undefined;
         if (connection) {
-            state['downlink'] = connection.downlink;
-            state['downlinkMax'] = connection.downlinkMax;
-            state['effectiveType'] = connection.effectiveType;
-            state['rtt'] = connection.rtt;
-            state['saveData'] = connection.saveData;
-            state['type'] = connection.type;
+            state["downlink"] = connection.downlink;
+            state["downlinkMax"] = connection.downlinkMax;
+            state["effectiveType"] = connection.effectiveType;
+            state["rtt"] = connection.rtt;
+            state["saveData"] = connection.saveData;
+            state["type"] = connection.type;
         }
-        store.update(oldState => ({ ...oldState, ...state }));
+        store.update((oldState) => ({ ...oldState, ...state }));
     }
     if (window) {
-        eventListenerStore('offline', () => {
-            store.update(state => ({
+        eventListenerStore("offline", () => {
+            store.update((state) => ({
                 ...state,
                 isOnline: false,
-                offlineAt: Date.now()
+                offlineAt: Date.now(),
             }));
         });
-        eventListenerStore('online', () => {
-            store.update(state => ({
+        eventListenerStore("online", () => {
+            store.update((state) => ({
                 ...state,
                 isOnline: true,
-                onlineAt: Date.now()
+                onlineAt: Date.now(),
             }));
@@ -58,5 +58,5 @@ });
     if (connection) {
-        connection.addEventListener('change', updateNetworkInformation, false);
+        connection.addEventListener("change", updateNetworkInformation, false);
         tryOnDestroy(() => {
-            connection.removeEventListener('change', updateNetworkInformation);
+            connection.removeEventListener("change", updateNetworkInformation);
         });
@@ -63,0 +63,0 @@ }

package/stores/networkStore/meta.json

 {
-  "description": "A readable store to easily access the current state of the network. The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.). This can be used to select high definition content or low definition content based on the user's connection. The entire API consists of the addition of the NetworkInformation interface and a single property to the Navigator interface: Navigator.connection."
-}
+	"description": "A readable store to easily access the current state of the network. The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.). This can be used to select high definition content or low definition content based on the user's connection. The entire API consists of the addition of the NetworkInformation interface and a single property to the Navigator interface: Navigator.connection."
+}

package/stores/onlineStore/index.js

 import { readable } from "svelte/store";
 import { networkStore } from "../networkStore";
 export function onlineStore() {
-    return readable(true, set => {
+    return readable(true, (set) => {
         const { subscribe } = networkStore();
-        const unsub = subscribe(networkState => {
+        const unsub = subscribe((networkState) => {
             set(networkState.isOnline);
@@ -8,0 +8,0 @@ });

package/stores/onlineStore/meta.json

 {
-  "description": "A readable boolean store to easily access the current state of the network, whether it is online or offline. \nUses networkStore internally."
-}
+	"description": "A readable boolean store to easily access the current state of the network, whether it is online or offline. \nUses networkStore internally."
+}

package/stores/rafFnStore/index.js

@@ -1,2 +0,2 @@
-import { defaultWindow, tryOnDestroy, } from "../../shared";
+import { defaultWindow, tryOnDestroy } from "../../shared";
 /**
@@ -3,0 +3,0 @@ * Wrapper for `requestAnimationFrame` with controls.

package/stores/rafFnStore/meta.json

 {
-  "description": "Call function on every requestAnimationFrame. With controls of pausing and resuming."
-}
+	"description": "Call function on every requestAnimationFrame. With controls of pausing and resuming."
+}

package/stores/readableStore/meta.json

 {
-  "description": "React UI sensor hook that uses Javascript/Typescript instead of CSS to figure out if the mouse element is in the hover element. So, you can separate the logic from the user interface (UI)."
-}
+	"description": "React UI sensor hook that uses Javascript/Typescript instead of CSS to figure out if the mouse element is in the hover element. So, you can separate the logic from the user interface (UI)."
+}

package/stores/resizeObserverStore/index.js

@@ -1,2 +0,2 @@
-import { tryOnDestroy } from '../../shared';
+import { tryOnDestroy } from "../../shared";
 export function resizeObserverStore(target, callback) {
@@ -21,4 +21,4 @@ let observer = null;
     return {
-        stop
+        stop,
     };
 }

package/stores/resizeObserverStore/meta.json

 {
-  "description": "Easy way to create ResizeObservers."
-}
+	"description": "Easy way to create ResizeObservers."
+}

package/stores/timeoutFnStore/meta.json

 {
-  "description": "Wrapper for setTimeout with controls."
-}
+	"description": "Wrapper for setTimeout with controls."
+}

package/stores/timeoutStore/index.d.ts

@@ -1,4 +0,4 @@
-import type { Fn, Stoppable } from '../../shared/utils/types';
-import { type Readable } from 'svelte/store';
-import { type UseTimeoutFnOptions } from '../timeoutFnStore';
+import type { Fn, Stoppable } from "../../shared/utils/types";
+import { type Readable } from "svelte/store";
+import { type UseTimeoutFnOptions } from "../timeoutFnStore";
 export interface UseTimeoutOptions<Controls extends boolean> extends UseTimeoutFnOptions {
@@ -5,0 +5,0 @@ /**

package/stores/timeoutStore/index.js

@@ -1,4 +0,4 @@
-import { noop } from 'svelte/internal';
-import { derived } from 'svelte/store';
-import { timeoutFnStore } from '../timeoutFnStore';
+import { noop } from "svelte/internal";
+import { derived } from "svelte/store";
+import { timeoutFnStore } from "../timeoutFnStore";
 export function timeoutStore(internal = 1000, options = {}) {
@@ -11,3 +11,3 @@ const { controls: exposeControls = false, callback = noop } = options;
             ready,
-            ...controls
+            ...controls,
         };
@@ -14,0 +14,0 @@ }

package/stores/timeoutStore/meta.json

 {
-  "description": "Update value after a given time with controls."
-}
+	"description": "Update value after a given time with controls."
+}

package/stores/toggleStore/index.js

@@ -1,3 +0,3 @@
-import { writableToReadable } from '../../shared';
-import { writable } from 'svelte/store';
+import { writableToReadable } from "../../shared";
+import { writable } from "svelte/store";
 export function toggleStore(initialValue = false) {
@@ -21,4 +21,4 @@ const store = writable(initialValue);
         on,
-        off
+        off,
     };
 }

package/stores/toggleStore/meta.json

 {
-  "description": "Reactive boolean value with helper actions."
-}
+	"description": "Reactive boolean value with helper actions."
+}

package/stores/windowFocusStore/index.d.ts

@@ -1,3 +0,3 @@
-import type { ConfigurableWindow } from '../../shared/utils/types';
-import { type Readable } from 'svelte/store';
-export declare function windowFocusStore({ window }?: ConfigurableWindow): Readable<boolean>;
+import type { ConfigurableWindow } from "../../shared/utils/types";
+import { type Readable } from "svelte/store";
+export declare function windowFocusStore({ window, }?: ConfigurableWindow): Readable<boolean>;

package/stores/windowFocusStore/index.js

@@ -1,3 +0,3 @@
-import { defaultWindow } from '../../shared';
-import { readable } from 'svelte/store';
+import { defaultWindow } from "../../shared";
+import { readable } from "svelte/store";
 function isCurrentWindowFocused(window = defaultWindow) {
@@ -8,7 +8,7 @@ if (!window)
         return false;
-    if (typeof window.document.hasFocus !== 'function')
+    if (typeof window.document.hasFocus !== "function")
         return false;
     return window.document.hasFocus();
 }
-export function windowFocusStore({ window = defaultWindow } = {}) {
+export function windowFocusStore({ window = defaultWindow, } = {}) {
     const visibility = readable(isCurrentWindowFocused(), (set) => {
@@ -19,7 +19,7 @@ function handler() {
         if (window) {
-            window.addEventListener('focus', handler);
-            window.addEventListener('blur', handler);
+            window.addEventListener("focus", handler);
+            window.addEventListener("blur", handler);
             return () => {
-                window.removeEventListener('focus', handler);
-                window.removeEventListener('blur', handler);
+                window.removeEventListener("focus", handler);
+                window.removeEventListener("blur", handler);
             };
@@ -26,0 +26,0 @@ }

package/stores/windowFocusStore/meta.json

 {
-  "description": "Reactively track window focus with window.onfocus and window.onblur events."
-}
+	"description": "Reactively track window focus with window.onfocus and window.onblur events."
+}

package/stores/windowScrollStore/index.d.ts

@@ -1,3 +0,3 @@
-import type { ConfigurableWindow, Position } from '../../shared/utils/types';
-import { type Readable } from 'svelte/store';
-export declare function windowScrollStore({ window }?: ConfigurableWindow): Readable<Position>;
+import type { ConfigurableWindow, Position } from "../../shared/utils/types";
+import { type Readable } from "svelte/store";
+export declare function windowScrollStore({ window, }?: ConfigurableWindow): Readable<Position>;

package/stores/windowScrollStore/index.js

@@ -1,6 +0,6 @@
-import { defaultWindow } from '../../shared';
-import { readable } from 'svelte/store';
+import { defaultWindow } from "../../shared";
+import { readable } from "svelte/store";
 const initialValue = {
     x: 0,
-    y: 0
+    y: 0,
 };
@@ -12,6 +12,6 @@ function getCurrentScroll(window = defaultWindow) {
         x: window.scrollX,
-        y: window.scrollY
+        y: window.scrollY,
     };
 }
-export function windowScrollStore({ window = defaultWindow } = {}) {
+export function windowScrollStore({ window = defaultWindow, } = {}) {
     const position = readable(getCurrentScroll(), (set) => {
@@ -22,5 +22,5 @@ function handler() {
         if (window) {
-            window.addEventListener('scroll', handler);
+            window.addEventListener("scroll", handler);
             return () => {
-                window.removeEventListener('scroll', handler);
+                window.removeEventListener("scroll", handler);
             };
@@ -27,0 +27,0 @@ }

package/stores/windowScrollStore/meta.json

 {
-  "description": "Reactive window scroll"
-}
+	"description": "Reactive window scroll"
+}

package/stores/windowSizeStore/index.d.ts

@@ -1,2 +0,2 @@
-import type { ConfigurableWindow } from '../../shared/utils/types';
+import type { ConfigurableWindow } from "../../shared/utils/types";
 export declare function windowSizeStore({ window }?: ConfigurableWindow): import("svelte/store").Readable<{
@@ -3,0 +3,0 @@ width: number;

package/stores/windowSizeStore/index.js

@@ -1,3 +0,3 @@
-import { defaultWindow } from '../../shared';
-import { readable } from 'svelte/store';
+import { defaultWindow } from "../../shared";
+import { readable } from "svelte/store";
 function getCurrentWindowDimenstions() {
@@ -7,3 +7,3 @@ if (typeof window === "object" && "innerWidth" in window && "innerHeight" in window) {
             width: window.innerWidth,
-            height: window.innerHeight
+            height: window.innerHeight,
         };
@@ -13,3 +13,3 @@ }
         width: 0,
-        height: 0
+        height: 0,
     };
@@ -22,5 +22,5 @@ }
         }
-        window?.addEventListener('resize', handler);
+        window?.addEventListener("resize", handler);
         return () => {
-            window?.removeEventListener('resize', handler);
+            window?.removeEventListener("resize", handler);
         };
@@ -27,0 +27,0 @@ });

package/stores/windowSizeStore/meta.json

 {
-  "description": "Reactive window size"
-}
+	"description": "Reactive window size"
+}

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

216314

increased by3.06%

Number of package files

331

increased by2.16%

Lines of code

4227

increased by2.08%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes