@marianmeres/stuic 1.85.0 → 1.87.0

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte

@@ -84,7 +84,6 @@ export let classesByVariant = {};
 $:
   dialog = $acp[0];
 let _dialogEl;
-let _formEl;
 let value = null;
 let isPending = false;
 $:
@@ -105,6 +104,7 @@ const onKeyDown = (e) => {
     return;
   if (e.key === "Escape") {
     e.stopPropagation();
+    e.stopImmediatePropagation();
     if (!isPending)
       return acp.escape();
   }
@@ -158,185 +158,186 @@ $:
 	tabindex="-1"
 >
 	{#if dialog}
-		<!-- svelte-ignore a11y-autofocus -->
-		<form
-			method="dialog"
-			use:focusTrap={{ autoFocusFirst: false }}
-			tabindex="-1"
-			autofocus={dialog.type !== PROMPT}
-			data-acp-type={dialog?.type}
-			data-acp-variant={dialog?.variant}
-			data-acp-is-pending={isPending}
-			class={_dialogClass}
-			bind:this={_formEl}
-			on:submit|preventDefault={async () => {
-				// clog('on:submit', value);
-				isPending = true;
-				await Promise.resolve(dialog.onOk(dialog.type === PROMPT ? value : true));
-				isPending = false;
-				value = null;
-			}}
-			on:reset|preventDefault={async () => {
-				// clog('on:reset', value);
-				isPending = true;
-				await Promise.resolve(dialog.onCancel(false));
-				isPending = false;
-				value = null;
-			}}
-		>
-			<!-- this sm:flex is not configurable -->
-			<div class="sm:flex sm:items-start">
-				{#if _isFn(iconFn)}
-					<div
-						class={_iconClass}
-						data-acp-type={dialog?.type}
-						data-acp-variant={dialog?.variant}
-						data-acp-is-pending={isPending}
-					>
-						{@html iconFn()}
-					</div>
-				{/if}
-				<div class={_contentBlockClass}>
-					<h1
-						class={_titleClass}
-						data-acp-type={dialog?.type}
-						data-acp-variant={dialog?.variant}
-						data-acp-is-pending={isPending}
-					>
-						<Thc thc={dialog.title} {forceAsHtml} />
-					</h1>
-					{#if dialog.content}
+		{#key dialog.id}
+			<!-- svelte-ignore a11y-autofocus -->
+			<form
+				method="dialog"
+				use:focusTrap={{ autoFocusFirst: false }}
+				tabindex="-1"
+				autofocus={dialog.type !== PROMPT}
+				data-acp-type={dialog?.type}
+				data-acp-variant={dialog?.variant}
+				data-acp-is-pending={isPending}
+				class={_dialogClass}
+				on:submit|preventDefault={async () => {
+					// clog('on:submit', value);
+					isPending = true;
+					await Promise.resolve(dialog.onOk(dialog.type === PROMPT ? value : true));
+					isPending = false;
+					value = null;
+				}}
+				on:reset|preventDefault={async () => {
+					// clog('on:reset', value);
+					isPending = true;
+					await Promise.resolve(dialog.onCancel(false));
+					isPending = false;
+					value = null;
+				}}
+			>
+				<!-- this sm:flex is not configurable -->
+				<div class="sm:flex sm:items-start">
+					{#if _isFn(iconFn)}
 						<div
-							class={_contentClass}
+							class={_iconClass}
 							data-acp-type={dialog?.type}
 							data-acp-variant={dialog?.variant}
 							data-acp-is-pending={isPending}
 						>
-							<Thc thc={dialog.content} {forceAsHtml} />
+							{@html iconFn()}
 						</div>
 					{/if}
-					{#if dialog.type === PROMPT}
-						<div
-							class={_inputBoxClass}
+					<div class={_contentBlockClass}>
+						<h1
+							class={_titleClass}
 							data-acp-type={dialog?.type}
 							data-acp-variant={dialog?.variant}
 							data-acp-is-pending={isPending}
 						>
-							{#if dialog?.promptFieldProps?.options?.length}
-								<FieldSelect
-									class={_inputFieldClass}
-									bind:value
-									data-acp-type={dialog?.type}
-									data-acp-variant={dialog?.variant}
-									data-acp-is-pending={isPending}
-									autofocus
-									size="sm"
-									validate
-									{...dialog.promptFieldProps}
-								/>
-							{:else}
-								<Field
-									class={_inputFieldClass}
-									bind:value
-									data-acp-type={dialog?.type}
-									data-acp-variant={dialog?.variant}
-									data-acp-is-pending={isPending}
-									autofocus
-									size="sm"
-									validate
-									{...dialog?.promptFieldProps || {}}
-								/>
-							{/if}
-						</div>
-					{/if}
+							<Thc thc={dialog.title} {forceAsHtml} />
+						</h1>
+						{#if dialog.content}
+							<div
+								class={_contentClass}
+								data-acp-type={dialog?.type}
+								data-acp-variant={dialog?.variant}
+								data-acp-is-pending={isPending}
+							>
+								<Thc thc={dialog.content} {forceAsHtml} />
+							</div>
+						{/if}
+						{#if dialog.type === PROMPT}
+							<div
+								class={_inputBoxClass}
+								data-acp-type={dialog?.type}
+								data-acp-variant={dialog?.variant}
+								data-acp-is-pending={isPending}
+							>
+								{#if dialog?.promptFieldProps?.options?.length}
+									<FieldSelect
+										class={_inputFieldClass}
+										bind:value
+										data-acp-type={dialog?.type}
+										data-acp-variant={dialog?.variant}
+										data-acp-is-pending={isPending}
+										autofocus
+										size="sm"
+										validate
+										{...dialog.promptFieldProps}
+									/>
+								{:else}
+									<Field
+										class={_inputFieldClass}
+										bind:value
+										data-acp-type={dialog?.type}
+										data-acp-variant={dialog?.variant}
+										data-acp-is-pending={isPending}
+										autofocus
+										size="sm"
+										validate
+										{...dialog?.promptFieldProps || {}}
+									/>
+								{/if}
+							</div>
+						{/if}
+					</div>
 				</div>
-			</div>
-			<menu
-				class={_menuClass}
-				data-acp-type={dialog?.type}
-				data-acp-variant={dialog?.variant}
-				data-acp-is-pending={isPending}
-			>
-				{#if dialog.type !== ALERT}
-					<li
-						class={_menuLiClass}
-						data-acp-dialog-type={dialog?.type}
-						data-acp-variant={dialog?.variant}
-						data-acp-is-pending={isPending}
-					>
-						<Button
-							class={_buttonClass}
-							type="reset"
-							data-acp-button-type="cancel"
+				<menu
+					class={_menuClass}
+					data-acp-type={dialog?.type}
+					data-acp-variant={dialog?.variant}
+					data-acp-is-pending={isPending}
+				>
+					{#if dialog.type !== ALERT}
+						<li
+							class={_menuLiClass}
 							data-acp-dialog-type={dialog?.type}
 							data-acp-variant={dialog?.variant}
 							data-acp-is-pending={isPending}
-							disabled={isPending}
 						>
-							<Thc thc={dialog.labelCancel} {forceAsHtml} />
-						</Button>
-					</li>
-				{/if}
-				{#if dialog.labelCustom && _isFn(dialog.onCustom)}
+							<Button
+								class={_buttonClass}
+								type="reset"
+								data-acp-button-type="cancel"
+								data-acp-dialog-type={dialog?.type}
+								data-acp-variant={dialog?.variant}
+								data-acp-is-pending={isPending}
+								disabled={isPending}
+							>
+								<Thc thc={dialog.labelCancel} {forceAsHtml} />
+							</Button>
+						</li>
+					{/if}
+					{#if dialog.labelCustom && _isFn(dialog.onCustom)}
+						<li
+							class={_menuLiClass}
+							data-acp-dialog-type={dialog?.type}
+							data-acp-variant={dialog?.variant}
+							data-acp-is-pending={isPending}
+						>
+							<Button
+								class={_buttonClass}
+								on:click={async (e) => {
+									e.preventDefault();
+									isPending = true;
+									await Promise.resolve(dialog.onCustom(value));
+									isPending = false;
+									value = null;
+								}}
+								type="button"
+								data-acp-button-type="custom"
+								data-acp-dialog-type={dialog?.type}
+								data-acp-variant={dialog?.variant}
+								data-acp-is-pending={isPending}
+								disabled={isPending}
+							>
+								<Thc thc={dialog.labelCustom} {forceAsHtml} />
+							</Button>
+						</li>
+					{/if}
 					<li
 						class={_menuLiClass}
-						data-acp-dialog-type={dialog?.type}
+						data-acp-type={dialog?.type}
 						data-acp-variant={dialog?.variant}
 						data-acp-is-pending={isPending}
 					>
 						<Button
 							class={_buttonClass}
-							on:click={async (e) => {
-								e.preventDefault();
-								isPending = true;
-								await Promise.resolve(dialog.onCustom(value));
-								isPending = false;
-								value = null;
-							}}
-							type="button"
-							data-acp-button-type="custom"
+							type="submit"
+							value="OK"
+							data-acp-button-type="ok"
 							data-acp-dialog-type={dialog?.type}
 							data-acp-variant={dialog?.variant}
 							data-acp-is-pending={isPending}
 							disabled={isPending}
+							variant="primary"
 						>
-							<Thc thc={dialog.labelCustom} {forceAsHtml} />
+							<Thc thc={dialog.labelOk} {forceAsHtml} />
 						</Button>
 					</li>
-				{/if}
-				<li
-					class={_menuLiClass}
-					data-acp-type={dialog?.type}
-					data-acp-variant={dialog?.variant}
-					data-acp-is-pending={isPending}
-				>
-					<Button
-						class={_buttonClass}
-						type="submit"
-						value="OK"
-						data-acp-button-type="ok"
-						data-acp-dialog-type={dialog?.type}
+				</menu>
+				{#if isPending}
+					<div
+						class={_spinnerBoxClass}
+						data-acp-type={dialog?.type}
 						data-acp-variant={dialog?.variant}
-						data-acp-is-pending={isPending}
-						disabled={isPending}
-						variant="primary"
 					>
-						<Thc thc={dialog.labelOk} {forceAsHtml} />
-					</Button>
-				</li>
-			</menu>
-			{#if isPending}
-				<div
-					class={_spinnerBoxClass}
-					data-acp-type={dialog?.type}
-					data-acp-variant={dialog?.variant}
-				>
-					<div class="rotating-cw">
-						{@html acpDefaultIcons.spinner()}
+						<div class="rotating-cw">
+							{@html acpDefaultIcons.spinner()}
+						</div>
 					</div>
-				</div>
-			{/if}
-		</form>
+				{/if}
+			</form>
+		{/key}
 	{/if}
 
 	{#if notifications}

package/dist/components/AlertConfirmPrompt/alert-confirm-prompt.d.ts

@@ -47,6 +47,7 @@ export declare const createAlertConfirmPromptStore: (defaults?: Partial<AlertCon
     reset: (stack?: AlertConfirmPromptOptions[]) => void;
     escape: () => void;
     close: () => void;
+    setHeadValue: (value: string) => void;
     alert: (o?: Partial<AlertConfirmPromptOptions> | string) => void;
     confirm: (onOk: FnOnOK, o?: Partial<AlertConfirmPromptOptions>) => void;
     prompt: (onOk: FnOnOK, o?: Partial<AlertConfirmPromptOptions>) => void;

package/dist/components/AlertConfirmPrompt/alert-confirm-prompt.js

@@ -39,6 +39,7 @@ export const createAlertConfirmPromptStore = (defaults) => {
         if (!['info', 'success', 'warn', 'error'].includes(o?.variant)) {
             o.variant = 'info';
         }
+        o._id = Math.random().toString(36).slice(2);
         //
         _stack.update((old) => [...old, o]);
     };
@@ -52,6 +53,15 @@ export const createAlertConfirmPromptStore = (defaults) => {
             _stack.get()[0].onEscape();
         shift();
     };
+    // will update value of the current (at index 0) element. Relevant for prompts, when validation
+    // is needed
+    const setHeadValue = (value) => {
+        const head = _stack.get()[0];
+        if (head) {
+            head.value = value;
+            _stack.update((old) => [head, ...old.slice(1)]);
+        }
+    };
     return {
         subscribe: _stack.subscribe,
         get: _stack.get,
@@ -61,6 +71,8 @@ export const createAlertConfirmPromptStore = (defaults) => {
         escape,
         // human alias
         close: shift,
+        //
+        setHeadValue,
         // sugar below
         //
         alert: (o) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.85.0",
+	"version": "1.87.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",