@marianmeres/stuic 1.22.0 → 1.24.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
@@ -145,10 +146,10 @@ export class AlertConfirmPromptConfig {
   };
 }
 const _isFn = (v) => typeof v === "function";
-const { ALERT, CONFIRM, PROMPT } = AlertConfirmPromptType;
 </script>
 
-<script>const clog = createClog("AlertConfirmPrompt");
+<script>const { ALERT, CONFIRM, PROMPT } = AlertConfirmPromptType;
+const clog = createClog("AlertConfirmPrompt");
 export let acp;
 $:
   dialog = $acp[0];
@@ -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/AlertConfirmPrompt/alert-confirm-prompt.js

@@ -1,6 +1,11 @@
 import { createStore } from '@marianmeres/store';
 import { createClog } from '@marianmeres/clog';
 const clog = createClog('alert-confirm-prompt');
+// export class AlertConfirmPromptType {
+// 	static readonly ALERT: 'alert';
+// 	static readonly CONFIRM: 'confirm';
+// 	static readonly PROMPT: 'prompt';
+// }
 export var AlertConfirmPromptType;
 (function (AlertConfirmPromptType) {
     AlertConfirmPromptType["ALERT"] = "alert";

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]

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,7 +23,7 @@ let _class = "";
 export { _class as class };
 export let labelClass = "";
 export let wrapClass = "";
-export let textareaClass = "";
+export let inputClass = "";
 export let invalidClass = "border-primary";
 export let size = "md";
 export let id = getId();
@@ -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
@@ -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}

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/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",
@@ -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
@@ -87,6 +93,7 @@ $:
 		<select
 			class={inputClass}
 			bind:value
+			bind:this={_inputEl}
 			{disabled}
 			{required}
 			{tabindex}

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/package.json

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