@hashrytech/quick-components-kit 0.16.2 → 0.16.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hashrytech/quick-components-kit
 
+## 0.16.4
+
+### Patch Changes
+
+- patch: update for drawer
+
+## 0.16.3
+
+### Patch Changes
+
+- rename: portal action to portalAction
+
 ## 0.16.2
 
 ### Patch Changes

package/dist/actions/portal.d.ts

@@ -2,6 +2,6 @@ export type PortalOptions = {
     target?: HTMLElement;
     prepend?: boolean;
 };
-export declare function portal(node: HTMLElement, { target, prepend }?: PortalOptions): {
+export declare function portalAction(node: HTMLElement, { target, prepend }?: PortalOptions): {
     destroy(): void;
 };

package/dist/actions/portal.js

@@ -24,7 +24,7 @@
  *   - `prepend`: Whether to insert at the beginning instead of appending (default: true)
  */
 import { browser } from '$app/environment';
-export function portal(node, { target = browser ? document.body : undefined, prepend = true } = {}) {
+export function portalAction(node, { target = browser ? document.body : undefined, prepend = true } = {}) {
     if (prepend) {
         target?.prepend(node);
     }

package/dist/actions/stop-interaction.d.ts

@@ -14,15 +14,7 @@
  * @example
  * ```svelte
  * <div use:stopInteraction />
- * ```
- *
- * @example
- * ```svelte
  * <div use:stopInteraction={{ prevent: true }} />
- * ```
- *
- * @example
- * ```svelte
  * <div use:stopInteraction={{ stop: true, prevent: true, events: ['click', 'touchstart'] }} />
  * ```
  */
@@ -32,5 +24,6 @@ export type StopInteractionOptions = {
     events?: string[];
 };
 export declare function stopInteraction(node: HTMLElement, options?: StopInteractionOptions): {
+    update(newOptions: StopInteractionOptions): void;
     destroy(): void;
 };

package/dist/actions/stop-interaction.js

@@ -14,31 +14,33 @@
  * @example
  * ```svelte
  * <div use:stopInteraction />
- * ```
- *
- * @example
- * ```svelte
  * <div use:stopInteraction={{ prevent: true }} />
- * ```
- *
- * @example
- * ```svelte
  * <div use:stopInteraction={{ stop: true, prevent: true, events: ['click', 'touchstart'] }} />
  * ```
  */
-export function stopInteraction(node, options = { stop: true, prevent: false }) {
-    const { stop = true, prevent = false, events = ['click'] } = options;
-    const cleanups = events.map((event) => {
-        const handler = (e) => {
-            if (stop)
-                e.stopPropagation();
-            if (prevent)
-                e.preventDefault();
-        };
-        node.addEventListener(event, handler, true); // capture
-        return () => node.removeEventListener(event, handler, true);
-    });
+export function stopInteraction(node, options = {}) {
+    let cleanups = [];
+    function apply(options) {
+        // Remove old listeners
+        cleanups.forEach((fn) => fn());
+        // Normalize options
+        const { stop = true, prevent = false, events = ['clicka', 'mousedown', 'mouseup', 'touchstart'] } = typeof options === 'object' && options !== null ? options : {};
+        cleanups = events.map((event) => {
+            const handler = (e) => {
+                if (stop)
+                    e.stopPropagation();
+                if (prevent)
+                    e.preventDefault();
+            };
+            node.addEventListener(event, handler, true); // capture phase
+            return () => node.removeEventListener(event, handler, true);
+        });
+    }
+    apply(options);
     return {
+        update(newOptions) {
+            apply(newOptions);
+        },
         destroy() {
             cleanups.forEach((fn) => fn());
         }

package/dist/components/drawer/Drawer.svelte

@@ -103,14 +103,16 @@ The `<Overlay>` component is used to darken the background and optionally block
 </script>
 
 {#if open}
-<Overlay {transitionDuration} {disableBodyScroll} class={overlayClasses} onclick={() => open = false} />
-
-<div role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex="{open ? 0 : -1}" aria-hidden="{!open}" use:stopInteraction={{ stop: true, prevent: true, events: [''] }}
-  class={twMerge("fixed flex flex-col items-center gap-2 bg-white outline-0 focus:outline-0 active:outline-focus-primary focus:outline-focus-primary overflow-y-auto z-50", postionClasses[position], props.class)}
-  in:fly={transitionProperties}
-  out:fly={transitionProperties}
-  use:onKeydown={{key: "Escape", callback: handleKeydown}}>
-  {@render children?.()}
+<div class="fixed inset-0 flex items-center justify-center" role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex="{open ? 0 : -1}" aria-hidden="{!open}">
+  
+  <Overlay {transitionDuration} {disableBodyScroll} class={overlayClasses} onclick={() => open = false} />
+
+  <div class={twMerge("fixed flex flex-col items-center gap-2 bg-white outline-0 focus:outline-0 active:outline-focus-primary focus:outline-focus-primary overflow-y-auto z-50", postionClasses[position], props.class)}
+    in:fly={transitionProperties}
+    out:fly={transitionProperties}
+    use:onKeydown={{key: "Escape", callback: handleKeydown}}>
+    {@render children?.()}
+  </div>
 </div>
 {/if}
 

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/hashrytech/quick-components-kit.git"
   },
-  "version": "0.16.2",
+  "version": "0.16.4",
   "license": "MIT",
   "author": "Hashry Tech",
   "files": [