@marianmeres/stuic 1.23.0 → 1.25.0

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte

@@ -2,6 +2,7 @@
 import {
   AlertConfirmPromptType,
   Button,
+  FieldSelect,
   createAlertConfirmPromptStore,
   focusTrap
 } from "../../index.js";
@@ -27,14 +28,14 @@ export class AlertConfirmPromptConfig {
 			`.trim(),
     icon: `
 				size-12 sm:size-10
-				mt-1 mb-4 sm:my-0
+				mt-1 mb-4 sm:my-0 sm:mr-5
 				mx-auto 
 				flex flex-shrink-0 items-center justify-center 
 				rounded-full 
 				bg-neutral-100 text-black/50
 			`.trim(),
     contentBlock: `
-				mt-3 sm:ml-4 sm:mt-0 sm:flex-1
+				mt-3 sm:mt-0 sm:flex-1
 			`.trim(),
     title: `
 				text-center sm:text-left
@@ -275,8 +276,6 @@ $:
   } else {
     iconFn = false;
   }
-$:
-  clog(dialog);
 </script>
 
 <dialog
@@ -336,15 +335,29 @@ $:
 							data-acp-variant={dialog?.variant}
 							data-acp-is-pending={isPending}
 						>
-							<Field
-								class={_inputFieldClass}
-								bind:value
-								data-acp-type={dialog?.type}
-								data-acp-variant={dialog?.variant}
-								data-acp-is-pending={isPending}
-								on:input_mounted={({ detail }) => detail.focus()}
-								size="sm"
-							/>
+							{#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}
+									on:input_mounted={({ detail }) => detail.focus()}
+									size="sm"
+									{...dialog.promptFieldProps}
+								/>
+							{:else}
+								<Field
+									class={_inputFieldClass}
+									bind:value
+									data-acp-type={dialog?.type}
+									data-acp-variant={dialog?.variant}
+									data-acp-is-pending={isPending}
+									on:input_mounted={({ detail }) => detail.focus()}
+									size="sm"
+									{...dialog?.promptFieldProps || {}}
+								/>
+							{/if}
 						</div>
 					{/if}
 				</div>
@@ -461,5 +474,5 @@ $:
   }
 }
 .rotating-cw {
-  animation: rotating-cw 0.6s linear infinite;
+  animation: rotating-cw 0.5s linear infinite;
 }</style>

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

@@ -21,6 +21,7 @@ interface Dialog extends Record<string, any> {
     onEscape: FnOnEscape;
     labelCustom?: THC;
     onCustom?: FnOnCustom;
+    promptFieldProps?: any;
     variant: AlertConfirmPromptVariant;
     iconFn: (() => string) | boolean;
     class?: Partial<{

package/dist/components/Button/Button.svelte

@@ -5,7 +5,7 @@ export class ButtonConfig {
   static defaultRounded = true;
   static defaultVariant = void 0;
   static presetBase = `
-			text-center whitespace-nowrap
+			text-center 
 			inline-flex items-center gap-x-2
 			hover:brightness-[1.05]
 			active:brightness-[0.95]
@@ -49,13 +49,9 @@ export class ButtonConfig {
   static class = "";
   // to be defined at consumer level...
   static variant = {
-    // primary: `
-    // 	bg-[rgb(var(--primary))] text-[rgb(var(--on-primary))]
-    // 	dark:bg-[rgb(var(--primary-dark))] dark:text-[rgb(var(--on-primary-dark))]
-    // `.trim(),
     primary: `
-				bg-primary text-on-primary
-				dark:bg-primary-dark dark:text-on-primary-dark
+				bg-stuic-primary text-stuic-on-primary
+				dark:bg-stuic-primary-dark dark:text-stuic-on-primary-dark
 			`.trim()
   };
 }

package/dist/components/Input/Field.svelte

@@ -1,4 +1,5 @@
-<script>import { slide } from "svelte/transition";
+<script>import { createEventDispatcher } from "svelte";
+import { slide } from "svelte/transition";
 import { twMerge } from "tailwind-merge";
 import {
   autogrow,
@@ -6,7 +7,6 @@ import {
   trim,
   validate as validateAction
 } from "../../index.js";
-import { createEventDispatcher } from "svelte";
 const dispatch = createEventDispatcher();
 const setType = (el, t) => el.type = t;
 const inputSizePreset = {
@@ -23,8 +23,8 @@ let _class = "";
 export { _class as class };
 export let labelClass = "";
 export let wrapClass = "";
-export let textareaClass = "";
-export let invalidClass = "border-primary";
+export let inputClass = "";
+export let invalidClass = "border-stuic-primary";
 export let size = "md";
 export let id = getId();
 export let value;
@@ -56,7 +56,7 @@ $:
   if (_inputEl)
     dispatch("input_mounted", _inputEl);
 $:
-  inputClass = twMerge(`
+  _inputClass = twMerge(`
 		form-input
 		rounded-md border-0 w-full flex-1
 		bg-transparent
@@ -93,9 +93,9 @@ $:
 		class={twMerge(`
             rounded-md border border-gray-300
             bg-gray-100
-            focus-within:border-primary
+            focus-within:border-stuic-primary
             focus-within:ring-4
-            focus-within:ring-primary
+            focus-within:ring-stuic-primary
             focus-within:ring-opacity-20
 			${wrapClass}
 			${validation && !validation.valid ? invalidClass : ''}
@@ -110,7 +110,7 @@ $:
 					bind:value
 					bind:this={_inputEl}
 					{id}
-					class={twMerge(`${inputClass} min-h-16 ${textareaClass}`)}
+					class={twMerge(`${_inputClass} min-h-16 ${inputClass}`)}
 					class:cursor-not-allowed={disabled}
 					{name}
 					{disabled}
@@ -130,7 +130,7 @@ $:
 					bind:this={_inputEl}
 					use:setType={type}
 					{id}
-					class={inputClass}
+					class={twMerge(`${_inputClass} ${inputClass}`)}
 					class:cursor-not-allowed={disabled}
 					{name}
 					{placeholder}
@@ -160,7 +160,7 @@ $:
 		<div
 			transition:slide={{ duration: 150 }}
 			class={twMerge(
-				`mt-1 text-xs text-primary px-2 tracking-tight ${validationMessageClass}`
+				`mt-1 text-xs text-stuic-primary px-2 tracking-tight ${validationMessageClass}`
 			)}
 		>
 			{@html validation.message}

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

@@ -6,7 +6,7 @@ declare const __propDef: {
         class?: string | undefined;
         labelClass?: string | undefined;
         wrapClass?: string | undefined;
-        textareaClass?: string | undefined;
+        inputClass?: string | undefined;
         invalidClass?: string | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         id?: string | undefined;

package/dist/components/Input/FieldCheckbox.svelte

@@ -6,7 +6,7 @@ import { slide } from "svelte/transition";
 import { getId } from "../../index.js";
 let _class = "";
 export { _class as class };
-export let invalidClass = "border-primary";
+export let invalidClass = "border-stuic-primary";
 export let labelClass = "";
 export let descriptionClass = "";
 export let size = "md";
@@ -45,12 +45,12 @@ let idDesc = getId();
 				bg-gray-100
 				border-gray-300
 				shadow-sm
-				text-primary
+				text-stuic-primary
 				cursor-pointer
-				focus:border-primary
+				focus:border-stuic-primary
 				focus:ring-4
 				focus:ring-offset-0
-				focus:ring-primary
+				focus:ring-stuic-primary
 				focus:ring-opacity-20
 				disabled:cursor-not-allowed
 				${validation && !validation.valid ? invalidClass : ''}
@@ -78,7 +78,9 @@ let idDesc = getId();
 		{#if validation && !validation?.valid}
 			<div
 				transition:slide={{ duration: 150 }}
-				class={twMerge(`text-xs text-primary tracking-tight ${validationMessageClass}`)}
+				class={twMerge(
+					`text-xs text-stuic-primary tracking-tight ${validationMessageClass}`
+				)}
 			>
 				{@html validation.message}
 			</div>

package/dist/components/Input/FieldSelect.svelte

@@ -1,9 +1,11 @@
-<script>import { slide } from "svelte/transition";
+<script>import { createEventDispatcher } from "svelte";
+import { slide } from "svelte/transition";
 import { twMerge } from "tailwind-merge";
 import {
   getId,
   validate as validateAction
 } from "../../index.js";
+const dispatch = createEventDispatcher();
 const inputSizePreset = {
   sm: "text-sm placeholder:text-sm",
   md: "text-base placeholder:text-base",
@@ -18,7 +20,7 @@ export let options = [];
 let _class = "";
 export { _class as class };
 export let wrapClass = "";
-export let invalidClass = "border-primary";
+export let invalidClass = "border-stuic-primary";
 export let size = "md";
 export let id = getId();
 export let value;
@@ -44,6 +46,10 @@ $:
     }
     return v;
   });
+let _inputEl;
+$:
+  if (_inputEl)
+    dispatch("input_mounted", _inputEl);
 $:
   inputClass = twMerge(`
 		rounded-md border-0 block w-full flex-1
@@ -73,9 +79,9 @@ $:
             flex items-center
             rounded-md border border-gray-300
             bg-gray-100
-            focus-within:border-primary
+            focus-within:border-stuic-primary
             focus-within:ring-4
-            focus-within:ring-primary
+            focus-within:ring-stuic-primary
             focus-within:ring-opacity-20
 			${wrapClass}
 			${validation && !validation.valid ? invalidClass : ''}
@@ -87,6 +93,7 @@ $:
 		<select
 			class={inputClass}
 			bind:value
+			bind:this={_inputEl}
 			{disabled}
 			{required}
 			{tabindex}
@@ -106,7 +113,7 @@ $:
 		<div
 			transition:slide={{ duration: 150 }}
 			class={twMerge(
-				`mt-1 text-xs text-primary px-2 tracking-tight ${validationMessageClass}`
+				`mt-1 text-xs text-stuic-primary px-2 tracking-tight ${validationMessageClass}`
 			)}
 		>
 			{@html validation.message}

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

@@ -23,6 +23,8 @@ declare const __propDef: {
         validate?: ValidateOptions | true | undefined;
     };
     events: {
+        input_mounted: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/Input/XFieldRadioInternal.svelte

@@ -8,7 +8,7 @@ import { createEventDispatcher, onMount } from "svelte";
 const dispatch = createEventDispatcher();
 let _class = "";
 export { _class as class };
-export let invalidClass = "border-primary";
+export let invalidClass = "border-stuic-primary";
 export let labelClass = "";
 export let descriptionClass = "";
 export let size = "md";
@@ -50,12 +50,12 @@ let idDesc = getId();
 				bg-gray-100
 				border-gray-300
 				shadow-sm
-				text-primary
+				text-stuic-primary
 				cursor-pointer
-				focus:border-primary
+				focus:border-stuic-primary
 				focus:ring-4
 				focus:ring-offset-0
-				focus:ring-primary
+				focus:ring-stuic-primary
 				focus:ring-opacity-20
 				disabled:cursor-not-allowed
 				${validation && !validation.valid ? invalidClass : ''}
@@ -82,7 +82,9 @@ let idDesc = getId();
 		{#if validation && !validation?.valid}
 			<div
 				transition:slide={{ duration: 150 }}
-				class={twMerge(`text-xs text-primary tracking-tight ${validationMessageClass}`)}
+				class={twMerge(
+					`text-xs text-stuic-primary tracking-tight ${validationMessageClass}`
+				)}
 			>
 				{@html validation.message}
 			</div>

package/dist/components/Thc/Thc.svelte

@@ -12,4 +12,7 @@ export let thc;
 	{@html thc.html}
 {:else if thc?.component}
 	<svelte:component this={thc.component} {...thc?.props || {}} />
+{:else}
+	<!-- cast to string as the last resort -->
+	{thc}
 {/if}

package/package.json

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