@coyalabs/bts-style 1.3.22 → 1.3.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/Components/Popup/Popup.svelte +45 -20
  2. package/dist/Components/Popup/popupStore.d.ts +7 -0
  3. package/dist/Components/Popup/popupStore.js +50 -33
  4. package/dist/icons.js +1 -1
  5. package/package.json +2 -2
package/dist/Components/Popup/Popup.svelte CHANGED
@@ -10,8 +10,8 @@
10
10
  import { VARIANT_FILLED } from '../../Base/variantTypes.js';
11
11
 
12
12
  // Subscribe to the actual stack
13
- /** @type {Array<{id: string, title: string, subtitle?: string, component: any, props: any, widthRatio: number}>} */
14
- let popupStack = [];
13
+ /** @type {Array<{id: string, title: string, subtitle?: string, component: any, props: any, widthRatio: number, disableClose?: boolean}>} */
14
+ let popupStack = [];
15
15
  popupStore.stack.subscribe((s) => {
16
16
  popupStack = s;
17
17
  });
@@ -19,8 +19,16 @@
19
19
  /** @type {{submit?: () => void, confirm?: () => void, cancel?: () => void, focusInput?: () => void} | null} */
20
20
  let activePopupInstance = null;
21
21
 
22
- /** @type {HTMLDivElement | null} */
23
- let activeDialogRef = null;
22
+ /** @type {HTMLDivElement | null} */
23
+ let activeDialogRef = null;
24
+ let pointerStartedOnOverlay = false;
25
+
26
+ $: activePopup = popupStack[popupStack.length - 1] || null;
27
+
28
+ function closeTopPopup() {
29
+ if (activePopup?.disableClose) return;
30
+ popupStore.close();
31
+ }
24
32
 
25
33
  function focusActivePopup() {
26
34
  void tick().then(() => {
@@ -50,11 +58,12 @@
50
58
  }
51
59
  }
52
60
 
53
- if (event.key === 'Escape') {
54
- event.preventDefault();
55
- if (activePopupInstance?.cancel) {
56
- activePopupInstance.cancel();
57
- } else {
61
+ if (event.key === 'Escape') {
62
+ event.preventDefault();
63
+ if (activePopup?.disableClose) return;
64
+ if (activePopupInstance?.cancel) {
65
+ activePopupInstance.cancel();
66
+ } else {
58
67
  popupStore.close();
59
68
  }
60
69
  return;
@@ -82,17 +91,31 @@
82
91
  activePopupInstance.submit();
83
92
  return;
84
93
  }
85
-
86
- activePopupInstance?.confirm?.();
87
- }
94
+
95
+ activePopupInstance?.confirm?.();
96
+ }
97
+
98
+ function handleOverlayPointerdown(event) {
99
+ pointerStartedOnOverlay = event.target === event.currentTarget;
100
+ }
101
+
102
+ function handleOverlayClick(event) {
103
+ if (!pointerStartedOnOverlay || event.target !== event.currentTarget) {
104
+ pointerStartedOnOverlay = false;
105
+ return;
106
+ }
107
+
108
+ pointerStartedOnOverlay = false;
109
+ closeTopPopup();
110
+ }
88
111
 
89
112
  $: if (popupStack.length > 0) {
90
113
  focusActivePopup();
91
114
  }
92
115
  </script>
93
116
 
94
- {#if popupStack.length > 0}
95
- <div class="overlay" transition:fade={{ duration: 200 }} on:click={popupStore.close} role="presentation">
117
+ {#if popupStack.length > 0}
118
+ <div class="overlay" transition:fade={{ duration: 200 }} on:pointerdown={handleOverlayPointerdown} on:click={handleOverlayClick} role="presentation">
96
119
  {#each popupStack as popup, index (popup.id)}
97
120
  {@const isTop = index === popupStack.length - 1}
98
121
  {@const depth = popupStack.length - 1 - index}
@@ -116,12 +139,14 @@
116
139
  tabindex="-1"
117
140
  >
118
141
  <BaseContainer padding="1.5rem" borderRadiusTopLeft="35px" borderRadiusTopRight="35px" borderRadiusBottomLeft="35px" borderRadiusBottomRight="35px" theme={VARIANT_FILLED}>
119
- <header>
120
- <TextHeader title={popup.title} subtitle={popup.subtitle || ''} />
121
- <div class="close-btn">
122
- <IconButton svg={icons.cross} size="20px" variant="toned" on:click={popupStore.close} />
123
- </div>
124
- </header>
142
+ <header>
143
+ <TextHeader title={popup.title} subtitle={popup.subtitle || ''} />
144
+ {#if !popup.disableClose}
145
+ <div class="close-btn">
146
+ <IconButton svg={icons.cross} size="20px" variant="toned" on:click={popupStore.close} />
147
+ </div>
148
+ {/if}
149
+ </header>
125
150
  <main>
126
151
  <svelte:component bind:this={activePopupInstance} this={popup.component} {...popup.props} />
127
152
  </main>
package/dist/Components/Popup/popupStore.d.ts CHANGED
@@ -6,6 +6,7 @@ export namespace popupStore {
6
6
  component: any;
7
7
  props: {};
8
8
  widthRatio?: undefined;
9
+ disableClose?: undefined;
9
10
  } | {
10
11
  isOpen: boolean;
11
12
  title: string;
@@ -13,6 +14,7 @@ export namespace popupStore {
13
14
  component: any;
14
15
  props: any;
15
16
  widthRatio: number;
17
+ disableClose: boolean;
16
18
  }>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
17
19
  namespace stack {
18
20
  let subscribe_1: (this: void, run: import("svelte/store").Subscriber<PopupState[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
@@ -21,17 +23,20 @@ export namespace popupStore {
21
23
  function open(title: string, component: any, props?: {}, subtitle?: string): void;
22
24
  function close(): void;
23
25
  function closeAll(): void;
26
+ function setCloseDisabled(disabled: boolean): void;
24
27
  function confirm(title: string, message: string, options?: {
25
28
  onConfirm?: (() => void) | undefined;
26
29
  onCancel?: (() => void) | undefined;
27
30
  confirmText?: string | undefined;
28
31
  cancelText?: string | undefined;
29
32
  popupWidthRatio?: number | undefined;
33
+ disableClose?: boolean | undefined;
30
34
  }): void;
31
35
  function alert(title: string, message: string, options?: {
32
36
  onOk?: (() => void) | undefined;
33
37
  okText?: string | undefined;
34
38
  popupWidthRatio?: number | undefined;
39
+ disableClose?: boolean | undefined;
35
40
  }): void;
36
41
  function prompt(title: string, message: string, options?: {
37
42
  onSubmit?: ((value: string) => void) | undefined;
@@ -41,6 +46,7 @@ export namespace popupStore {
41
46
  cancelText?: string | undefined;
42
47
  label?: string | undefined;
43
48
  popupWidthRatio?: number | undefined;
49
+ disableClose?: boolean | undefined;
44
50
  }): void;
45
51
  }
46
52
  export type PopupState = {
@@ -50,4 +56,5 @@ export type PopupState = {
50
56
  props: any;
51
57
  id: string;
52
58
  widthRatio: number;
59
+ disableClose: boolean;
53
60
  };
package/dist/Components/Popup/popupStore.js CHANGED
@@ -8,9 +8,10 @@ import PromptPopup from './PromptPopup.svelte';
8
8
  * @property {string} title
9
9
  * @property {string} [subtitle]
10
10
  * @property {any} component
11
- * @property {any} props
12
- * @property {string} id
13
- * @property {number} widthRatio
11
+ * @property {any} props
12
+ * @property {string} id
13
+ * @property {number} widthRatio
14
+ * @property {boolean} disableClose
14
15
  */
15
16
 
16
17
  /**
@@ -32,13 +33,14 @@ function splitPopupProps(rawProps = {}) {
32
33
  };
33
34
  }
34
35
 
35
- const { popupWidthRatio, ...props } = rawProps;
36
-
37
- return {
38
- props,
39
- widthRatio: normalizePopupWidthRatio(popupWidthRatio)
40
- };
41
- }
36
+ const { popupWidthRatio, disableClose = false, ...props } = rawProps;
37
+
38
+ return {
39
+ props,
40
+ widthRatio: normalizePopupWidthRatio(popupWidthRatio),
41
+ disableClose: disableClose === true
42
+ };
43
+ }
42
44
 
43
45
  /**
44
46
  * @param {string} title
@@ -48,17 +50,18 @@ function splitPopupProps(rawProps = {}) {
48
50
  * @returns {PopupState}
49
51
  */
50
52
  function createPopupEntry(title, subtitle, component, rawProps = {}) {
51
- const { props, widthRatio } = splitPopupProps(rawProps);
53
+ const { props, widthRatio, disableClose } = splitPopupProps(rawProps);
52
54
 
53
55
  return {
54
56
  id: crypto.randomUUID(),
55
57
  title,
56
- subtitle,
57
- component,
58
- props,
59
- widthRatio
60
- };
61
- }
58
+ subtitle,
59
+ component,
60
+ props,
61
+ widthRatio,
62
+ disableClose
63
+ };
64
+ }
62
65
 
63
66
  function createPopupStore() {
64
67
  /** @type {import('svelte/store').Writable<PopupState[]>} */
@@ -79,12 +82,13 @@ function createPopupStore() {
79
82
  return {
80
83
  isOpen: true,
81
84
  title: top.title,
82
- subtitle: top.subtitle || '',
83
- component: top.component,
84
- props: top.props,
85
- widthRatio: top.widthRatio
86
- };
87
- });
85
+ subtitle: top.subtitle || '',
86
+ component: top.component,
87
+ props: top.props,
88
+ widthRatio: top.widthRatio,
89
+ disableClose: top.disableClose
90
+ };
91
+ });
88
92
 
89
93
  return {
90
94
  subscribe: currentPopup.subscribe,
@@ -100,9 +104,19 @@ function createPopupStore() {
100
104
  stack.update(s => s.slice(0, -1));
101
105
  },
102
106
 
103
- closeAll: () => {
104
- stack.set([]);
105
- },
107
+ closeAll: () => {
108
+ stack.set([]);
109
+ },
110
+
111
+ setCloseDisabled: (/** @type {boolean} */ disabled) => {
112
+ stack.update(s => {
113
+ if (s.length === 0) return s;
114
+ const next = [...s];
115
+ const top = next[next.length - 1];
116
+ next[next.length - 1] = { ...top, disableClose: disabled === true };
117
+ return next;
118
+ });
119
+ },
106
120
 
107
121
  /**
108
122
  * Show a confirmation popup with two buttons
@@ -112,8 +126,9 @@ function createPopupStore() {
112
126
  * @param {() => void} [options.onConfirm]
113
127
  * @param {() => void} [options.onCancel]
114
128
  * @param {string} [options.confirmText]
115
- * @param {string} [options.cancelText]
116
- * @param {number} [options.popupWidthRatio]
129
+ * @param {string} [options.cancelText]
130
+ * @param {number} [options.popupWidthRatio]
131
+ * @param {boolean} [options.disableClose]
117
132
  */
118
133
  confirm: (title, message, options = {}) => {
119
134
  stack.update(s => [...s, createPopupEntry(title, message, ConfirmPopup, options)]);
@@ -125,8 +140,9 @@ function createPopupStore() {
125
140
  * @param {string} message
126
141
  * @param {Object} options
127
142
  * @param {() => void} [options.onOk]
128
- * @param {string} [options.okText]
129
- * @param {number} [options.popupWidthRatio]
143
+ * @param {string} [options.okText]
144
+ * @param {number} [options.popupWidthRatio]
145
+ * @param {boolean} [options.disableClose]
130
146
  */
131
147
  alert: (title, message, options = {}) => {
132
148
  stack.update(s => [...s, createPopupEntry(title, message, AlertPopup, options)]);
@@ -141,9 +157,10 @@ function createPopupStore() {
141
157
  * @param {() => void} [options.onCancel]
142
158
  * @param {string} [options.placeholder]
143
159
  * @param {string} [options.submitText]
144
- * @param {string} [options.cancelText]
145
- * @param {string} [options.label]
146
- * @param {number} [options.popupWidthRatio]
160
+ * @param {string} [options.cancelText]
161
+ * @param {string} [options.label]
162
+ * @param {number} [options.popupWidthRatio]
163
+ * @param {boolean} [options.disableClose]
147
164
  */
148
165
  prompt: (title, message, options = {}) => {
149
166
  stack.update(s => [...s, createPopupEntry(title, message, PromptPopup, options)]);
package/dist/icons.js CHANGED
@@ -11,7 +11,7 @@ export const icons = {
11
11
  active: '<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 4.00724C1 1.59184 3.70874 0.166494 5.69922 1.53459L10.6387 4.93107C12.3726 6.12312 12.3726 8.68239 10.6387 9.87443L5.69922 13.2709C3.70874 14.639 1 13.2137 1 10.7983V4.00724Z" stroke-width="1.7"/></svg>',
12
12
  pause: '<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.8125 3.26984C5.8125 2.01624 4.73519 1 3.40625 1C2.07731 1 1 2.01624 1 3.26984V10.0794C1 11.333 2.07731 12.3492 3.40625 12.3492C4.73519 12.3492 5.8125 11.333 5.8125 10.0794V3.26984Z" stroke-width="1.5"/><path d="M13.25 3.26984C13.25 2.01624 12.1727 1 10.8438 1C9.51481 1 8.4375 2.01624 8.4375 3.26984V10.0794C8.4375 11.333 9.51481 12.3492 10.8438 12.3492C12.1727 12.3492 13.25 11.333 13.25 10.0794V3.26984Z" stroke-width="1.5"/></svg>',
13
13
  total: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.0909 7.54545C14.0909 3.9305 11.1604 1 7.54545 1C3.9305 1 1 3.9305 1 7.54545C1 11.1604 3.9305 14.0909 7.54545 14.0909C11.1604 14.0909 14.0909 11.1604 14.0909 7.54545Z" stroke-width="2"/></svg>',
14
- shield: '<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.17969 1.17587C6.70138 0.941268 7.29862 0.941268 7.82031 1.17587L11.8203 2.97568C12.538 3.29863 13 4.01292 13 4.7999V7.06552C13 9.30605 11.97 11.426 10.207 12.7481L8.2002 14.253C7.48908 14.7864 6.51092 14.7864 5.7998 14.253L3.79297 12.7481C2.03009 11.426 1 9.30606 1 7.06552V4.7999C1.00004 4.01292 1.46202 3.29863 2.17969 2.97568L6.17969 1.17587Z" stroke-width="1.5" stroke-linejoin="round"/></svg>',
14
+ shield: '<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.17969 1.17587C6.70138 0.941268 7.29862 0.941268 7.82031 1.17587L11.8203 2.97568C12.538 3.29863 13 4.01292 13 4.7999V7.06552C13 9.30605 11.97 11.426 10.207 12.7481L8.2002 14.253C7.48908 14.7864 6.51092 14.7864 5.7998 14.253L3.79297 12.7481C2.03009 11.426 1 9.30606 1 7.06552V4.7999C1.00004 4.01292 1.46202 3.29863 2.17969 2.97568L6.17969 1.17587Z" stroke-width="1.75" stroke-linejoin="round"/></svg>',
15
15
  statistics: '<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.16125 8.83871C6.16125 7.27093 5.04197 6 3.66125 6C2.28054 6 1.16125 7.27093 1.16125 8.83871V11.1613C1.16125 12.7291 2.28054 14 3.66125 14C5.04197 14 6.16125 12.7291 6.16125 11.1613V8.83871Z" stroke-width="1.5"/><path d="M14.1613 3.86C14.1613 2.28047 13.042 1 11.6613 1C10.2805 1 9.16125 2.28047 9.16125 3.86V11.14C9.16125 12.7195 10.2805 14 11.6613 14C13.042 14 14.1613 12.7195 14.1613 11.14V3.86Z" stroke-width="1.5"/></svg>',
16
16
  restart: '<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.042 1.87012L15.9668 1.90332L18.4326 1.9248L16.6484 3.62695L16.2246 4.03125C17.2954 5.19269 17.953 6.7371 17.9531 8.43652C17.9531 12.0772 14.9522 15 11.29 15C11.1834 15 11.0803 14.9958 10.9951 14.9922L10.0381 14.9512V10.7988L11.1084 10.874C11.1793 10.879 11.2374 10.8808 11.29 10.8809C12.6912 10.8809 13.7969 9.77025 13.7969 8.43652C13.7968 7.85203 13.5852 7.31302 13.2285 6.88965L12.6416 7.4502L10.9004 9.1084L10.9512 6.70508L11.0332 2.84863L11.0547 1.8623L12.042 1.87012ZM10.8682 5.20117L9.79785 5.12598C9.72692 5.12102 9.66883 5.11915 9.61621 5.11914C8.21502 5.11914 7.10938 6.22975 7.10938 7.56348C7.10945 8.14749 7.32058 8.68616 7.67676 9.10938L8.26465 8.5498L10.0059 6.8916L9.95508 9.29492L9.87305 13.1514L9.85156 14.1377L8.86426 14.1299L4.93945 14.0967L2.47363 14.0752L4.25781 12.373L4.68066 11.9678C3.61042 10.8064 2.9532 9.26241 2.95312 7.56348C2.95312 3.9228 5.95402 1 9.61621 1C9.72288 1.00001 9.82593 1.00416 9.91113 1.00781L10.8682 1.04883V5.20117Z" stroke-width="2"/></svg>',
17
17
  lines: '<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 1H3.4C2.07452 1 1 2.10612 1 3.47059C1 4.83506 2.07452 5.94118 3.4 5.94118H13C14.3255 5.94118 15.4 4.83506 15.4 3.47059C15.4 2.10612 14.3255 1 13 1Z" stroke-width="1.5"/><path d="M7.4 8.41174H3.4C2.07452 8.41174 1 9.51786 1 10.8823C1 12.2468 2.07452 13.3529 3.4 13.3529H7.4C8.72548 13.3529 9.8 12.2468 9.8 10.8823C9.8 9.51786 8.72548 8.41174 7.4 8.41174Z" stroke-width="1.5"/></svg>',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coyalabs/bts-style",
3
- "version": "1.3.22",
3
+ "version": "1.3.24",
4
4
  "description": "BTS Theme Svelte component templates",
5
5
  "type": "module",
6
6
  "exports": {
@@ -21,7 +21,7 @@
21
21
  ],
22
22
  "scripts": {
23
23
  "build": "svelte-kit sync && svelte-package -o dist",
24
- "package": "npm run build && echo Copying package to node_modules... && xcopy /E /I /Y dist C:\\Users\\Alan\\Documents\\GitHub\\coya-server-bck\\work-services\\bark-backend\\frontend\\node_modules\\@coyalabs\\bts-style\\dist && xcopy /E /I /Y public C:\\Users\\Alan\\Documents\\GitHub\\coya-server-bck\\work-services\\bark-backend\\frontend\\node_modules\\@coyalabs\\bts-style\\public && copy /Y package.json C:\\Users\\Alan\\Documents\\GitHub\\coya-server-bck\\work-services\\bark-backend\\frontend\\node_modules\\@coyalabs\\bts-style\\ && echo Copy complete!",
24
+ "package": "npm run build && echo Copying package to node_modules... && xcopy /E /I /Y distC:\\Users\\Alan\\Documents\\GitHub\\coya-server-bck\\src\\subservice\\subservice_api\\cpaas_frontend\\node_modules\\@coyalabs\\bts-style\\dist && xcopy /E /I /Y publicC:\\Users\\Alan\\Documents\\GitHub\\coya-server-bck\\src\\subservice\\subservice_api\\cpaas_frontend\\node_modules\\@coyalabs\\bts-style\\public && copy /Y package.jsonC:\\Users\\Alan\\Documents\\GitHub\\coya-server-bck\\src\\subservice\\subservice_api\\cpaas_frontend\\node_modules\\@coyalabs\\bts-style\\ && echo Copy complete!",
25
25
  "prepublishOnly": "npm run build",
26
26
  "release": "npm version patch && npm publish --access public"
27
27
  },