@hashrytech/quick-components-kit 0.16.1 → 0.16.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hashrytech/quick-components-kit
 
+## 0.16.2
+
+### Patch Changes
+
+- addition: portal action
+
 ## 0.16.1
 
 ### Patch Changes

package/dist/actions/portal.d.ts

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

package/dist/actions/portal.js

@@ -0,0 +1,41 @@
+/**
+ * Svelte action to "portal" an element into a different part of the DOM.
+ *
+ * Useful for rendering components (e.g. modals, tooltips, dropdowns) outside of their natural DOM position,
+ * such as appending them to `document.body` or a dedicated overlay container.
+ *
+ * Supports optional `prepend` behavior to insert at the top of the target.
+ *
+ * @example
+ * ```svelte
+ * <div use:portal>Portaled content</div>
+ * ```
+ *
+ * @example With options:
+ * ```svelte
+ * <div use:portal={{ target: document.getElementById('modal-root'), prepend: true }}>
+ *   Portaled to #modal-root at the top
+ * </div>
+ * ```
+ *
+ * @param node - The HTML element to be portaled.
+ * @param options - Optional config:
+ *   - `target`: The DOM node to portal into (defaults to `document.body`)
+ *   - `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 } = {}) {
+    if (prepend) {
+        target?.prepend(node);
+    }
+    else {
+        target?.appendChild(node);
+    }
+    return {
+        destroy() {
+            if (target?.contains(node)) {
+                target?.removeChild(node);
+            }
+        }
+    };
+}

package/dist/components/drawer/Drawer.svelte

@@ -106,7 +106,7 @@ The `<Overlay>` component is used to darken the background and optionally block
 <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", postionClasses[position], props.class)}
+  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}}>

package/dist/components/modal/Modal.svelte

@@ -34,12 +34,15 @@
 </script>
 
 {#if open}
-<Overlay transitionDuration={overlayTransitionDuration} {disableBodyScroll} class={overlayClasses} onclick={() => open = false} />
+<Overlay transitionDuration={overlayTransitionDuration} {disableBodyScroll} class={overlayClasses} onclick={() => open = false}>
 
 <div role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex="{open ? 0 : -1}" aria-hidden="{!open}" 
-  class={twMerge("fixed bg-white rounded top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 outline-0 focus:outline-0 active:outline-focus-primary focus:outline-focus-primary overflow-y-auto w-full max-w-md h-96", props.class)}
+  class={twMerge("fixed bg-white rounded top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 outline-0 focus:outline-0 active:outline-focus-primary focus:outline-focus-primary overflow-y-auto w-full max-w-md h-96 z-50", props.class)}
   use:onKeydown={{key: "Escape", callback: handleKeydown}}>
   {@render children?.()}
 </div>
+
+</Overlay>
 {/if}
 
+

package/dist/components/overlay/Overlay.svelte

@@ -3,7 +3,7 @@
     import type { ClassNameValue } from 'tailwind-merge';
     import { fade } from 'svelte/transition';
     import {twMerge} from 'tailwind-merge';
-    import { disableScroll } from '../../actions/disable-scroll.js';
+    import { disableScroll } from '../../actions/disable-scroll.js';    
     
     export type OverlayProps = {
       disableBodyScroll?: boolean;
@@ -20,7 +20,7 @@
   let { disableBodyScroll=true, transitionDuration=100, ariaLabel="Overlay", onclick, children, ...props }: OverlayProps = $props();
 </script>
 
-<div transition:fade={{duration: transitionDuration}} class={twMerge("fixed top-0 left-0 right-0 bottom-0 bg-overlay-primary", props.class)} role="presentation" {onclick} use:disableScroll={disableBodyScroll}>
+<div transition:fade={{duration: transitionDuration}} class={twMerge("fixed top-0 left-0 right-0 bottom-0 bg-overlay-primary z-40", props.class)} role="presentation" {onclick} use:disableScroll={disableBodyScroll}>
   {@render children?.()}
 </div>
 

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export * from './actions/on-keydown.js';
 export * from './actions/lock-scroll.js';
 export * from './actions/scroll-to.js';
 export * from './actions/stop-interaction.js';
+export * from './actions/portal.js';
 export * from './modules/fetch-client.js';
 export * from './modules/api-proxy.js';
 export * from './modules/crypto.js';

package/dist/index.js

@@ -16,6 +16,7 @@ export * from './actions/on-keydown.js';
 export * from './actions/lock-scroll.js';
 export * from './actions/scroll-to.js';
 export * from './actions/stop-interaction.js';
+export * from './actions/portal.js';
 export * from './modules/fetch-client.js';
 export * from './modules/api-proxy.js';
 export * from './modules/crypto.js';

package/package.json

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