@coyalabs/bts-style 1.3.22 → 1.3.23

package/dist/Components/Popup/Popup.svelte

@@ -10,8 +10,8 @@
   import { VARIANT_FILLED } from '../../Base/variantTypes.js';
   
   // Subscribe to the actual stack
-  /** @type {Array<{id: string, title: string, subtitle?: string, component: any, props: any, widthRatio: number}>} */
-  let popupStack = [];
+  /** @type {Array<{id: string, title: string, subtitle?: string, component: any, props: any, widthRatio: number, disableClose?: boolean}>} */
+  let popupStack = [];
   popupStore.stack.subscribe((s) => {
     popupStack = s;
   });
@@ -19,8 +19,16 @@
   /** @type {{submit?: () => void, confirm?: () => void, cancel?: () => void, focusInput?: () => void} | null} */
   let activePopupInstance = null;
 
-  /** @type {HTMLDivElement | null} */
-  let activeDialogRef = null;
+  /** @type {HTMLDivElement | null} */
+  let activeDialogRef = null;
+  let pointerStartedOnOverlay = false;
+
+  $: activePopup = popupStack[popupStack.length - 1] || null;
+
+  function closeTopPopup() {
+    if (activePopup?.disableClose) return;
+    popupStore.close();
+  }
 
   function focusActivePopup() {
     void tick().then(() => {
@@ -50,11 +58,12 @@
       }
     }
 
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      if (activePopupInstance?.cancel) {
-        activePopupInstance.cancel();
-      } else {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      if (activePopup?.disableClose) return;
+      if (activePopupInstance?.cancel) {
+        activePopupInstance.cancel();
+      } else {
         popupStore.close();
       }
       return;
@@ -82,17 +91,31 @@
       activePopupInstance.submit();
       return;
     }
-
-    activePopupInstance?.confirm?.();
-  }
+
+    activePopupInstance?.confirm?.();
+  }
+
+  function handleOverlayPointerdown(event) {
+    pointerStartedOnOverlay = event.target === event.currentTarget;
+  }
+
+  function handleOverlayClick(event) {
+    if (!pointerStartedOnOverlay || event.target !== event.currentTarget) {
+      pointerStartedOnOverlay = false;
+      return;
+    }
+
+    pointerStartedOnOverlay = false;
+    closeTopPopup();
+  }
 
   $: if (popupStack.length > 0) {
     focusActivePopup();
   }
 </script>
 
-{#if popupStack.length > 0}
-  <div class="overlay" transition:fade={{ duration: 200 }} on:click={popupStore.close} role="presentation">
+{#if popupStack.length > 0}
+  <div class="overlay" transition:fade={{ duration: 200 }} on:pointerdown={handleOverlayPointerdown} on:click={handleOverlayClick} role="presentation">
     {#each popupStack as popup, index (popup.id)}
       {@const isTop = index === popupStack.length - 1}
       {@const depth = popupStack.length - 1 - index}
@@ -116,12 +139,14 @@
         tabindex="-1"
       >
         <BaseContainer padding="1.5rem" borderRadiusTopLeft="35px" borderRadiusTopRight="35px" borderRadiusBottomLeft="35px" borderRadiusBottomRight="35px" theme={VARIANT_FILLED}>
-          <header>
-            <TextHeader title={popup.title} subtitle={popup.subtitle || ''} />
-            <div class="close-btn">
-              <IconButton svg={icons.cross} size="20px" variant="toned" on:click={popupStore.close} />
-            </div>
-          </header>
+          <header>
+            <TextHeader title={popup.title} subtitle={popup.subtitle || ''} />
+            {#if !popup.disableClose}
+              <div class="close-btn">
+                <IconButton svg={icons.cross} size="20px" variant="toned" on:click={popupStore.close} />
+              </div>
+            {/if}
+          </header>
           <main>
             <svelte:component bind:this={activePopupInstance} this={popup.component} {...popup.props} />
           </main>

package/dist/Components/Popup/popupStore.d.ts

@@ -6,6 +6,7 @@ export namespace popupStore {
         component: any;
         props: {};
         widthRatio?: undefined;
+        disableClose?: undefined;
     } | {
         isOpen: boolean;
         title: string;
@@ -13,6 +14,7 @@ export namespace popupStore {
         component: any;
         props: any;
         widthRatio: number;
+        disableClose: boolean;
     }>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
     namespace stack {
         let subscribe_1: (this: void, run: import("svelte/store").Subscriber<PopupState[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
@@ -21,17 +23,20 @@ export namespace popupStore {
     function open(title: string, component: any, props?: {}, subtitle?: string): void;
     function close(): void;
     function closeAll(): void;
+    function setCloseDisabled(disabled: boolean): void;
     function confirm(title: string, message: string, options?: {
         onConfirm?: (() => void) | undefined;
         onCancel?: (() => void) | undefined;
         confirmText?: string | undefined;
         cancelText?: string | undefined;
         popupWidthRatio?: number | undefined;
+        disableClose?: boolean | undefined;
     }): void;
     function alert(title: string, message: string, options?: {
         onOk?: (() => void) | undefined;
         okText?: string | undefined;
         popupWidthRatio?: number | undefined;
+        disableClose?: boolean | undefined;
     }): void;
     function prompt(title: string, message: string, options?: {
         onSubmit?: ((value: string) => void) | undefined;
@@ -41,6 +46,7 @@ export namespace popupStore {
         cancelText?: string | undefined;
         label?: string | undefined;
         popupWidthRatio?: number | undefined;
+        disableClose?: boolean | undefined;
     }): void;
 }
 export type PopupState = {
@@ -50,4 +56,5 @@ export type PopupState = {
     props: any;
     id: string;
     widthRatio: number;
+    disableClose: boolean;
 };

package/dist/Components/Popup/popupStore.js

@@ -8,9 +8,10 @@ import PromptPopup from './PromptPopup.svelte';
  * @property {string} title
  * @property {string} [subtitle]
  * @property {any} component
- * @property {any} props
- * @property {string} id
- * @property {number} widthRatio
+ * @property {any} props
+ * @property {string} id
+ * @property {number} widthRatio
+ * @property {boolean} disableClose
  */
 
 /**
@@ -32,13 +33,14 @@ function splitPopupProps(rawProps = {}) {
     };
   }
 
-  const { popupWidthRatio, ...props } = rawProps;
-
-  return {
-    props,
-    widthRatio: normalizePopupWidthRatio(popupWidthRatio)
-  };
-}
+  const { popupWidthRatio, disableClose = false, ...props } = rawProps;
+
+  return {
+    props,
+    widthRatio: normalizePopupWidthRatio(popupWidthRatio),
+    disableClose: disableClose === true
+  };
+}
 
 /**
  * @param {string} title
@@ -48,17 +50,18 @@ function splitPopupProps(rawProps = {}) {
  * @returns {PopupState}
  */
 function createPopupEntry(title, subtitle, component, rawProps = {}) {
-  const { props, widthRatio } = splitPopupProps(rawProps);
+  const { props, widthRatio, disableClose } = splitPopupProps(rawProps);
 
   return {
     id: crypto.randomUUID(),
     title,
-    subtitle,
-    component,
-    props,
-    widthRatio
-  };
-}
+    subtitle,
+    component,
+    props,
+    widthRatio,
+    disableClose
+  };
+}
 
 function createPopupStore() {
   /** @type {import('svelte/store').Writable<PopupState[]>} */
@@ -79,12 +82,13 @@ function createPopupStore() {
     return {
       isOpen: true,
       title: top.title,
-      subtitle: top.subtitle || '',
-      component: top.component,
-      props: top.props,
-      widthRatio: top.widthRatio
-    };
-  });
+      subtitle: top.subtitle || '',
+      component: top.component,
+      props: top.props,
+      widthRatio: top.widthRatio,
+      disableClose: top.disableClose
+    };
+  });
 
   return {
     subscribe: currentPopup.subscribe,
@@ -100,9 +104,19 @@ function createPopupStore() {
       stack.update(s => s.slice(0, -1));
     },
 
-    closeAll: () => {
-      stack.set([]);
-    },
+    closeAll: () => {
+      stack.set([]);
+    },
+
+    setCloseDisabled: (/** @type {boolean} */ disabled) => {
+      stack.update(s => {
+        if (s.length === 0) return s;
+        const next = [...s];
+        const top = next[next.length - 1];
+        next[next.length - 1] = { ...top, disableClose: disabled === true };
+        return next;
+      });
+    },
 
     /**
      * Show a confirmation popup with two buttons
@@ -112,8 +126,9 @@ function createPopupStore() {
      * @param {() => void} [options.onConfirm]
      * @param {() => void} [options.onCancel]
      * @param {string} [options.confirmText]
-     * @param {string} [options.cancelText]
-     * @param {number} [options.popupWidthRatio]
+     * @param {string} [options.cancelText]
+     * @param {number} [options.popupWidthRatio]
+     * @param {boolean} [options.disableClose]
      */
     confirm: (title, message, options = {}) => {
       stack.update(s => [...s, createPopupEntry(title, message, ConfirmPopup, options)]);
@@ -125,8 +140,9 @@ function createPopupStore() {
      * @param {string} message
      * @param {Object} options
      * @param {() => void} [options.onOk]
-     * @param {string} [options.okText]
-     * @param {number} [options.popupWidthRatio]
+     * @param {string} [options.okText]
+     * @param {number} [options.popupWidthRatio]
+     * @param {boolean} [options.disableClose]
      */
     alert: (title, message, options = {}) => {
       stack.update(s => [...s, createPopupEntry(title, message, AlertPopup, options)]);
@@ -141,9 +157,10 @@ function createPopupStore() {
      * @param {() => void} [options.onCancel]
      * @param {string} [options.placeholder]
      * @param {string} [options.submitText]
-     * @param {string} [options.cancelText]
-     * @param {string} [options.label]
-     * @param {number} [options.popupWidthRatio]
+     * @param {string} [options.cancelText]
+     * @param {string} [options.label]
+     * @param {number} [options.popupWidthRatio]
+     * @param {boolean} [options.disableClose]
      */
     prompt: (title, message, options = {}) => {
       stack.update(s => [...s, createPopupEntry(title, message, PromptPopup, options)]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coyalabs/bts-style",
-  "version": "1.3.22",
+  "version": "1.3.23",
   "description": "BTS Theme Svelte component templates",
   "type": "module",
   "exports": {