@marianmeres/stuic 1.30.0 → 1.32.0

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte

@@ -4,11 +4,11 @@ import {
   Button,
   FieldSelect,
   createAlertConfirmPromptStore,
-  focusTrap
+  focusTrap,
+  Field,
+  Thc
 } from "../../index.js";
-import Thc from "../Thc/Thc.svelte";
 import { twMerge } from "tailwind-merge";
-import { Field } from "../../index.js";
 import { acpDefaultIcons } from "./acp-icons.js";
 import { createClog } from "@marianmeres/clog";
 export class AlertConfirmPromptConfig {
@@ -78,7 +78,7 @@ export class AlertConfirmPromptConfig {
   static classInputBox = "";
   static classInputField = "";
   static classMenu = "";
-  static classMenuLi = "";
+  // static classMenuLi = '';
   static classButton = "";
   static classSpinnerBox = "";
   // 'info' | 'success' | 'warn' | 'error'
@@ -93,7 +93,7 @@ export class AlertConfirmPromptConfig {
       inputBox: "",
       inputField: "",
       menu: "",
-      menuLi: "",
+      // menuLi: '',
       button: "",
       spinnerBox: ""
     },
@@ -106,7 +106,7 @@ export class AlertConfirmPromptConfig {
       inputBox: "",
       inputField: "",
       menu: "",
-      menuLi: "",
+      // menuLi: '',
       button: "",
       spinnerBox: ""
     },
@@ -119,7 +119,7 @@ export class AlertConfirmPromptConfig {
       inputBox: "",
       inputField: "",
       menu: "",
-      menuLi: "",
+      // menuLi: '',
       button: "",
       spinnerBox: ""
     },
@@ -132,7 +132,7 @@ export class AlertConfirmPromptConfig {
       inputBox: "",
       inputField: "",
       menu: "",
-      menuLi: "",
+      // menuLi: '',
       button: "",
       spinnerBox: ""
     }
@@ -144,6 +144,8 @@ export class AlertConfirmPromptConfig {
     error: void 0,
     spinner: void 0
   };
+  // conveniently hoisted THC option, since all content is rendered via THC
+  static forceAsHtml = void 0;
 }
 const _isFn = (v) => typeof v === "function";
 </script>
@@ -153,7 +155,15 @@ const clog = createClog("AlertConfirmPrompt");
 export let acp;
 $:
   dialog = $acp[0];
+let forceAsHtml = void 0;
+$:
+  if (dialog) {
+    forceAsHtml = dialog.forceAsHtml ?? AlertConfirmPromptConfig.forceAsHtml;
+  } else {
+    forceAsHtml = void 0;
+  }
 let _dialogEl;
+let _formEl;
 let value = null;
 let isPending = false;
 $:
@@ -179,12 +189,11 @@ const onKeyDown = (e) => {
   }
 };
 onMount(() => {
-  _dialogEl.addEventListener("close", async () => {
-    if (_dialogEl.returnValue === "") {
-      acp.escape();
-    }
+  _dialogEl.addEventListener("close", async (e) => {
+  });
+  _dialogEl.addEventListener("cancel", (e) => {
+    e.preventDefault();
   });
-  _dialogEl.addEventListener("cancel", (event) => event.preventDefault());
   document.addEventListener("keydown", onKeyDown, true);
   return () => document.removeEventListener("keydown", onKeyDown, true);
 });
@@ -247,9 +256,6 @@ $:
 $:
   _menuLiClass = twMerge(`
 		${AlertConfirmPromptConfig.preset.menuLi}
-		${AlertConfirmPromptConfig.classMenuLi}
-		${dialog?.class?.menuLi || ""}
-		${AlertConfirmPromptConfig.variant?.[dialog?.variant]?.menuLi || ""}
 	`);
 $:
   _buttonClass = twMerge(`
@@ -287,15 +293,31 @@ $:
 	tabindex="-1"
 >
 	{#if dialog}
-		<!--since we're not using the native form submit, the <form> is not necessary-->
+		<!-- 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">
@@ -316,7 +338,7 @@ $:
 						data-acp-variant={dialog?.variant}
 						data-acp-is-pending={isPending}
 					>
-						<Thc thc={dialog.title} />
+						<Thc thc={dialog.title} {forceAsHtml} />
 					</h1>
 					{#if dialog.content}
 						<div
@@ -325,7 +347,7 @@ $:
 							data-acp-variant={dialog?.variant}
 							data-acp-is-pending={isPending}
 						>
-							<Thc thc={dialog.content} />
+							<Thc thc={dialog.content} {forceAsHtml} />
 						</div>
 					{/if}
 					{#if dialog.type === PROMPT}
@@ -342,8 +364,9 @@ $:
 									data-acp-type={dialog?.type}
 									data-acp-variant={dialog?.variant}
 									data-acp-is-pending={isPending}
-									on:input_mounted={({ detail }) => detail.focus()}
+									autofocus
 									size="sm"
+									validate
 									{...dialog.promptFieldProps}
 								/>
 							{:else}
@@ -353,8 +376,9 @@ $:
 									data-acp-type={dialog?.type}
 									data-acp-variant={dialog?.variant}
 									data-acp-is-pending={isPending}
-									on:input_mounted={({ detail }) => detail.focus()}
+									autofocus
 									size="sm"
+									validate
 									{...dialog?.promptFieldProps || {}}
 								/>
 							{/if}
@@ -377,13 +401,6 @@ $:
 					>
 						<Button
 							class={_buttonClass}
-							on:click={async (e) => {
-								e.preventDefault();
-								isPending = true;
-								await Promise.resolve(dialog.onCancel(false));
-								isPending = false;
-								value = null;
-							}}
 							type="reset"
 							data-acp-button-type="cancel"
 							data-acp-dialog-type={dialog?.type}
@@ -391,7 +408,7 @@ $:
 							data-acp-is-pending={isPending}
 							disabled={isPending}
 						>
-							<Thc thc={dialog.labelCancel} />
+							<Thc thc={dialog.labelCancel} {forceAsHtml} />
 						</Button>
 					</li>
 				{/if}
@@ -418,7 +435,7 @@ $:
 							data-acp-is-pending={isPending}
 							disabled={isPending}
 						>
-							<Thc thc={dialog.labelCustom} />
+							<Thc thc={dialog.labelCustom} {forceAsHtml} />
 						</Button>
 					</li>
 				{/if}
@@ -436,17 +453,10 @@ $:
 						data-acp-dialog-type={dialog?.type}
 						data-acp-variant={dialog?.variant}
 						data-acp-is-pending={isPending}
-						on:click={async (e) => {
-							e.preventDefault();
-							isPending = true;
-							await Promise.resolve(dialog.onOk(dialog.type === PROMPT ? value : true));
-							isPending = false;
-							value = null;
-						}}
 						disabled={isPending}
 						variant="primary"
 					>
-						<Thc thc={dialog.labelOk} />
+						<Thc thc={dialog.labelOk} {forceAsHtml} />
 					</Button>
 				</li>
 			</menu>

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte.d.ts

@@ -22,7 +22,6 @@ export declare class AlertConfirmPromptConfig {
     static classInputBox: string;
     static classInputField: string;
     static classMenu: string;
-    static classMenuLi: string;
     static classButton: string;
     static classSpinnerBox: string;
     static variant: {
@@ -35,7 +34,6 @@ export declare class AlertConfirmPromptConfig {
             inputBox: string;
             inputField: string;
             menu: string;
-            menuLi: string;
             button: string;
             spinnerBox: string;
         };
@@ -48,7 +46,6 @@ export declare class AlertConfirmPromptConfig {
             inputBox: string;
             inputField: string;
             menu: string;
-            menuLi: string;
             button: string;
             spinnerBox: string;
         };
@@ -61,7 +58,6 @@ export declare class AlertConfirmPromptConfig {
             inputBox: string;
             inputField: string;
             menu: string;
-            menuLi: string;
             button: string;
             spinnerBox: string;
         };
@@ -74,7 +70,6 @@ export declare class AlertConfirmPromptConfig {
             inputBox: string;
             inputField: string;
             menu: string;
-            menuLi: string;
             button: string;
             spinnerBox: string;
         };
@@ -86,6 +81,7 @@ export declare class AlertConfirmPromptConfig {
         error: undefined;
         spinner: undefined;
     };
+    static forceAsHtml: undefined;
 }
 declare const __propDef: {
     props: {

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

@@ -37,6 +37,7 @@ export interface AlertConfirmPromptOptions extends Record<string, any> {
         button: string;
         spinnerBox: string;
     }>;
+    forceAsHtml?: boolean;
 }
 export declare const createAlertConfirmPromptStore: () => {
     subscribe: (cb: import("@marianmeres/store").Subscribe<AlertConfirmPromptOptions[]>) => import("@marianmeres/store").Unsubscribe;

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

@@ -28,7 +28,7 @@ export const createAlertConfirmPromptStore = () => {
         if (!isFn(o.onCancel))
             o.onCancel = shift;
         if (!isFn(o.onEscape))
-            o.onEscape = () => undefined;
+            o.onEscape = shift;
         if (o.labelOk === undefined)
             o.labelOk = labelOk;
         if (o.labelCancel === undefined)

package/dist/components/Input/Field.svelte

@@ -34,6 +34,7 @@ export let name = "";
 export let tabindex = 0;
 export let description = "";
 export let descriptionClass = "";
+export let autofocus = void 0;
 export let disabled = false;
 export let readonly = false;
 export let required = false;
@@ -116,6 +117,7 @@ $:
 					{disabled}
 					{readonly}
 					{required}
+					{autofocus}
 					{tabindex}
 					use:trim={useTrim}
 					use:validateAction={validate
@@ -137,6 +139,7 @@ $:
 					{disabled}
 					{readonly}
 					{required}
+					{autofocus}
 					{autocomplete}
 					{tabindex}
 					{minlength}

package/dist/components/Input/Field.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
         tabindex?: number | undefined;
         description?: string | undefined;
         descriptionClass?: string | undefined;
+        autofocus?: true | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
         required?: boolean | undefined;

package/dist/components/Input/FieldSelect.svelte

@@ -31,6 +31,7 @@ export let description = "";
 export let descriptionClass = "";
 export let disabled = false;
 export let required = false;
+export let autofocus = void 0;
 export let validationMessageClass = "";
 export let validate = void 0;
 let validation;
@@ -97,6 +98,7 @@ $:
 			{disabled}
 			{required}
 			{tabindex}
+			{autofocus}
 			{name}
 			use:validateAction={validate
 				? { ...(validate === true ? {} : validate), setValidationResult }

package/dist/components/Input/FieldSelect.svelte.d.ts

@@ -19,6 +19,7 @@ declare const __propDef: {
         descriptionClass?: string | undefined;
         disabled?: boolean | undefined;
         required?: boolean | undefined;
+        autofocus?: true | undefined;
         validationMessageClass?: string | undefined;
         validate?: ValidateOptions | true | undefined;
     };

package/package.json

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