@marianmeres/stuic 1.52.0 → 1.53.0

package/dist/actions/validate.js

@@ -22,7 +22,7 @@ export const validate = (el, options) => {
         if (typeof customValidator === 'function') {
             el.setCustomValidity(customValidator(el.value, context, el) || '');
         }
-        // toto trigerne bubble
+        // this triggers the bubble
         // el.reportValidity();
         const validityState = el.validity;
         // prettier-ignore

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte

@@ -25,7 +25,7 @@ export class AlertConfirmPromptConfig {
 				transition-all
 				shadow-xl
 				focus-within:outline-0 focus-within:ring-0
-			`.trim(),
+			`,
     icon: `
 				size-12 sm:size-10
 				mt-1 mb-4 sm:my-0 sm:mr-5
@@ -33,41 +33,31 @@ export class AlertConfirmPromptConfig {
 				flex flex-shrink-0 items-center justify-center 
 				rounded-full 
 				bg-neutral-100 text-black/50
-			`.trim(),
-    contentBlock: `
-				mt-3 sm:mt-0 sm:flex-1
-			`.trim(),
+			`,
+    contentBlock: `mt-3 sm:mt-0 sm:flex-1`,
     title: `
 				text-center sm:text-left
 				text-base font-semibold leading-6 text-black/90
-			`.trim(),
+			`,
     content: `
 				mt-2 mx-3 sm:mx-0
 				text-center sm:text-left
 				text-sm text-black/75
-			`.trim(),
-    inputBox: `
-				mt-3
-			`.trim(),
-    inputField: `
-				m-0
-			`.trim(),
+			`,
+    inputBox: `mt-3`,
+    inputField: `m-0`,
     menu: `
 				mt-6
 				sm:flex sm:space-x-4 justify-end
 				space-y-3 sm:space-y-0
-			`.trim(),
-    menuLi: `
-				flex-1 sm:flex-none w-full sm:w-auto sm:inline-block
-			`.trim(),
-    button: `
-				w-full min-w-24 text-center inline-block
-			`.trim(),
+			`,
+    menuLi: `flex-1 sm:flex-none w-full sm:w-auto sm:inline-block`,
+    button: `w-full min-w-24 text-center inline-block`,
     spinnerBox: `
 				absolute inset-0 flex justify-center items-center
 				rounded-lg
 				bg-white/75
-			`.trim()
+			`
   };
   // prettier-ignore
   static presetByVariant = {

package/dist/components/DismissibleMessage/DismissibleMessage.svelte

@@ -1,7 +1,6 @@
 <script context="module">import { slide } from "svelte/transition";
 import { twMerge } from "tailwind-merge";
 import { Thc, X, isTHCNotEmpty } from "../../index.js";
-import { tick } from "svelte";
 const themes = {
   primary: "bg-stuic-primary/10   text-stuic-primary   dark:bg-stuic-primary   dark:text-white/90",
   secondary: "bg-stuic-secondary/10 text-stuic-secondary dark:bg-stuic-secondary dark:text-white/90",
@@ -28,30 +27,31 @@ const themes = {
   pink: "bg-pink-100           text-pink-800        dark:bg-pink-800        dark:text-pink-100",
   rose: "bg-rose-100           text-rose-800        dark:bg-rose-800        dark:text-rose-100"
 };
+const _PRESET = {
+  box: `mb-4 rounded flex text-sm`,
+  content: `flex-1 px-4 py-3`,
+  dismiss: `
+			hover:bg-black/5 dark:hover:bg-black/20
+			focus-visible:bg-black/5 focus-visible:hover:bg-black/20 focus-visible:ring-0
+			rounded rounded-l-none
+			px-3
+			flex items-center justify-center
+			group
+		`,
+  x: `opacity-75 group-hover:opacity-100`
+};
 export class DismissibleMessageConfig {
-  static preset = {
-    box: `mb-4 rounded flex text-sm`,
-    content: `flex-1 px-4 py-3`,
-    dismiss: `
-                hover:bg-black/5 dark:hover:bg-black/20
-                rounded rounded-l-none
-                px-3
-                flex items-center justify-center
-                group
-            `
-  };
   static class = {
     box: ``,
     content: ``,
-    dismiss: ``
+    dismiss: ``,
+    x: ``
   };
 }
 </script>
 
-<script>let _class = "";
+<script>let _class = {};
 export { _class as class };
-export let classContent = "";
-export let classDismiss = "";
 export let duration = 150;
 export let message;
 export let onDismiss = () => message = "";
@@ -64,39 +64,27 @@ $:
   } else {
     show = false;
   }
+const _collectClasses = (k, extra = "") => [
+  _PRESET?.[k],
+  DismissibleMessageConfig?.class?.[k],
+  extra,
+  _class?.[k]
+];
 </script>
 
 <!-- {#if isNotEmpty(message)} -->
 {#if show}
 	<div
-		class={twMerge(
-			DismissibleMessageConfig.preset.box,
-			DismissibleMessageConfig.class.box,
-			themes[theme] ?? themes.primary,
-			_class
-		)}
+		class={twMerge(_collectClasses('box', themes[theme] ?? themes.primary))}
 		transition:slide={{ duration }}
 	>
-		<div
-			class={twMerge(
-				DismissibleMessageConfig.preset.content,
-				DismissibleMessageConfig.class.content,
-				classContent
-			)}
-		>
+		<div class={twMerge(_collectClasses('content'))}>
 			<Thc thc={message} {forceAsHtml} />
 		</div>
 
 		{#if typeof onDismiss === 'function'}
-			<button
-				class={twMerge(
-					DismissibleMessageConfig.preset.dismiss,
-					DismissibleMessageConfig.class.dismiss,
-					classDismiss
-				)}
-				on:click={() => onDismiss()}
-			>
-				<X class="opacity-75 group-hover:opacity-100" strokeWidth={1.5} />
+			<button class={twMerge(_collectClasses('dismiss'))} on:click={() => onDismiss()}>
+				<X class={twMerge(_collectClasses('x'))} strokeWidth={1.5} />
 			</button>
 		{/if}
 	</div>

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

@@ -1,22 +1,21 @@
 import { SvelteComponent } from "svelte";
 import { type THC, type TW_COLORS } from '../../index.js';
 export declare class DismissibleMessageConfig {
-    static preset: {
-        box: string;
-        content: string;
-        dismiss: string;
-    };
     static class: {
         box: string;
         content: string;
         dismiss: string;
+        x: string;
     };
 }
 declare const __propDef: {
     props: {
-        class?: string | undefined;
-        classContent?: string | undefined;
-        classDismiss?: string | undefined;
+        class?: {
+            box?: "" | undefined;
+            content?: "" | undefined;
+            dismiss?: "" | undefined;
+            x?: "" | undefined;
+        } | undefined;
         duration?: number | undefined;
         message: THC;
         onDismiss?: false | (() => void) | null | undefined;

package/dist/components/Input/Field.svelte

@@ -1,30 +1,64 @@
-<script>import { createEventDispatcher } from "svelte";
+<script context="module">import { createClog } from "@marianmeres/clog";
+import { createEventDispatcher } from "svelte";
 import { slide } from "svelte/transition";
 import { twMerge } from "tailwind-merge";
 import {
   autogrow,
   getId,
   trim,
-  validate as validateAction
+  validate as validateAction,
+  Thc
 } from "../../index.js";
-const dispatch = createEventDispatcher();
-const setType = (el, t) => el.type = t;
-const inputSizePreset = {
-  sm: "text-sm placeholder:text-sm",
-  md: "text-base placeholder:text-base",
-  lg: "text-lg  placeholder:text-lg"
+const _PRESET = {
+  box: "mb-4",
+  wrap: `
+			rounded-md border border-gray-300
+			bg-gray-100
+			focus-within:border-stuic-primary
+			focus-within:ring-4
+			focus-within:ring-stuic-primary
+			focus-within:ring-opacity-20
+		`,
+  label: `block flex-1`,
+  input: `
+			rounded-md border-0 w-full flex-1
+			bg-transparent
+			tracking-tight
+			focus:outline-0 focus-visible:ring-0
+			placeholder:text-black/35 placeholder:tracking-tight
+		`,
+  invalid: `border-stuic-primary`,
+  validationMessage: `mt-1 text-xs text-stuic-primary px-2 tracking-tight`,
+  description: `mx-2 mt-1 text-sm opacity-50`,
+  below: `mx-2 mt-1`,
+  asterix: `after:content-['*'] after:opacity-30 after:pl-1`
 };
-const labelSizePreset = {
-  sm: "text-sm",
-  md: "text-base",
-  lg: "text-base font-bold"
+const _PRESET_BY_SIZE = {
+  sm: {
+    label: "text-sm",
+    input: "text-sm placeholder:text-sm"
+  },
+  md: {
+    label: "text-base",
+    input: "text-base placeholder:text-base"
+  },
+  lg: {
+    label: "text-base font-bold",
+    input: "text-lg placeholder:text-lg"
+  }
 };
-let _class = "";
+export class FieldConfig {
+  static class = {};
+  static classBySize = {};
+}
+</script>
+
+<script>const clog = createClog("Field");
+const dispatch = createEventDispatcher();
+const setType = (el, t) => el.type = t;
+let _class = {};
 export { _class as class };
-export let labelClass = "";
-export let wrapClass = "";
-export let inputClass = "";
-export let invalidClass = "border-stuic-primary";
+export let classBySize = {};
 export let size = "md";
 export let id = getId();
 export let value;
@@ -33,7 +67,6 @@ export let type = "text";
 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;
@@ -48,62 +81,66 @@ export let pattern = void 0;
 export let step = void 0;
 export let useTrim = true;
 export let textareaAutoEnlarge = true;
-export let validationMessageClass = "";
 export let validate = void 0;
+export let showAsterixOnRequired = true;
 let validation;
 const setValidationResult = (res) => validation = res;
 let _inputEl;
 $:
   if (_inputEl)
     dispatch("input_mounted", _inputEl);
+const _collectClasses = (k, extra = "") => [
+  _PRESET?.[k] || "",
+  _PRESET_BY_SIZE?.[size]?.[k] || "",
+  FieldConfig?.class?.[k] || "",
+  FieldConfig?.classBySize?.[size]?.[k] || "",
+  extra || "",
+  _class?.[k] || "",
+  classBySize?.[size]?.[k] || ""
+];
+$:
+  _boxClass = twMerge(_collectClasses("box"));
 $:
-  _inputClass = twMerge(`
-		form-input
-		rounded-md border-0 w-full flex-1
-		bg-transparent
-		tracking-tight
-		focus:outline-0 focus-visible:ring-0
-		placeholder:text-black/35 placeholder:tracking-tight
-		${inputSizePreset[size]}
-	`);
+  _labelClass = twMerge(
+    _collectClasses(
+      "label",
+      showAsterixOnRequired && required ? _collectClasses("asterix").join(" ") : ""
+    )
+  );
+$:
+  _wrapClass = twMerge(
+    _collectClasses(
+      "wrap",
+      validation && !validation.valid ? _collectClasses("invalid").join(" ") : ""
+    )
+  );
+$:
+  _inputClass = twMerge(
+    "form-input",
+    _collectClasses("input", type === "textarea" ? "min-h-16" : "")
+  );
+$:
+  _validationMessageClass = twMerge(_collectClasses("validationMessage"));
+$:
+  _descriptionClass = twMerge(_collectClasses("description"));
+$:
+  _belowClass = twMerge(_collectClasses("below"));
 </script>
 
-<div class={twMerge(`mb-4 ${_class}`)}>
+<div class={_boxClass}>
 	<div class="flex items-end px-2 mb-1">
 		{#if label || $$slots.label}
-			<label
-				for={id}
-				class={twMerge(
-					'block flex-1',
-					required ? "after:content-['*'] after:opacity-30 after:pl-1" : '',
-					labelSizePreset[size],
-					labelClass
-				)}
-				class:required
-			>
+			<label for={id} class={_labelClass} class:required>
 				{#if $$slots.label}
 					<slot name="label" />
 				{:else}
-					{@html label}
+					<Thc thc={label} forceAsHtml />
 				{/if}
 			</label>
 		{/if}
 		<slot name="right_of_label" />
 	</div>
-	<div
-		class={twMerge(
-			`rounded-md border border-gray-300
-            bg-gray-100
-            focus-within:border-stuic-primary
-            focus-within:ring-4
-            focus-within:ring-stuic-primary
-            focus-within:ring-opacity-20`,
-			wrapClass,
-			validation && !validation.valid ? invalidClass : ''
-		)}
-		class:cursor-not-allowed={disabled}
-		class:opacity-50={disabled}
-	>
+	<div class={_wrapClass} class:cursor-not-allowed={disabled} class:opacity-50={disabled}>
 		<div class="flex items-center">
 			<slot name="input_before" {id} />
 			{#if type === 'textarea'}
@@ -111,7 +148,7 @@ $:
 					bind:value
 					bind:this={_inputEl}
 					{id}
-					class={twMerge(`${_inputClass} min-h-16 ${inputClass}`)}
+					class={_inputClass}
 					class:cursor-not-allowed={disabled}
 					{name}
 					{disabled}
@@ -125,14 +162,14 @@ $:
 						: undefined}
 					use:autogrow={{ allowed: textareaAutoEnlarge }}
 					{...$$restProps}
-				></textarea>
+				/>
 			{:else}
 				<input
 					bind:value
 					bind:this={_inputEl}
 					use:setType={type}
 					{id}
-					class={twMerge(`${_inputClass} ${inputClass}`)}
+					class={_inputClass}
 					class:cursor-not-allowed={disabled}
 					{name}
 					{placeholder}
@@ -160,23 +197,16 @@ $:
 		<slot name="input_below" {id} />
 	</div>
 	{#if validation && !validation?.valid}
-		<div
-			transition:slide={{ duration: 150 }}
-			class={twMerge(
-				`mt-1 text-xs text-stuic-primary px-2 tracking-tight ${validationMessageClass}`
-			)}
-		>
+		<div transition:slide={{ duration: 150 }} class={_validationMessageClass}>
 			{@html validation.message}
 		</div>
 	{/if}
 	{#if description}
-		<div class={twMerge(`mx-2 mt-1 text-sm opacity-50 ${descriptionClass}`)}>
-			{@html description}
+		<div class={_descriptionClass}>
+			<Thc thc={description} forceAsHtml />
 		</div>
 	{/if}
 	{#if $$slots.below}
-		<div class="mx-2 mt-1">
-			<slot name="below" {id} />
-		</div>
+		<div class={_belowClass}><slot name="below" {id} /></div>
 	{/if}
 </div>

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

@@ -1,22 +1,38 @@
 import { SvelteComponent } from "svelte";
-import { type ValidateOptions } from '../../index.js';
+import { type ValidateOptions, type THC } from '../../index.js';
+export interface FieldConfigClasses {
+    box?: string;
+    wrap?: string;
+    label?: string;
+    input?: string;
+    invalid?: string;
+    validationMessage?: string;
+    description?: string;
+    below?: string;
+    asterix?: string;
+}
+export interface FieldConfigClassesBySize {
+    sm?: FieldConfigClasses;
+    md?: FieldConfigClasses;
+    lg?: FieldConfigClasses;
+}
+export declare class FieldConfig {
+    static class: FieldConfigClasses;
+    static classBySize: FieldConfigClassesBySize;
+}
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string | undefined;
-        labelClass?: string | undefined;
-        wrapClass?: string | undefined;
-        inputClass?: string | undefined;
-        invalidClass?: string | undefined;
+        class?: FieldConfigClasses | undefined;
+        classBySize?: FieldConfigClassesBySize | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         id?: string | undefined;
         value: string;
-        label?: string | undefined;
+        label?: THC | undefined;
         type?: string | undefined;
         name?: string | undefined;
         tabindex?: number | undefined;
-        description?: string | undefined;
-        descriptionClass?: string | undefined;
+        description?: THC | undefined;
         autofocus?: true | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
@@ -31,12 +47,10 @@ declare const __propDef: {
         step?: number | undefined;
         useTrim?: boolean | undefined;
         textareaAutoEnlarge?: boolean | undefined;
-        validationMessageClass?: string | undefined;
         validate?: ValidateOptions | true | undefined;
+        showAsterixOnRequired?: boolean | undefined;
     };
     events: {
-        input_mounted: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/Input/FieldCheckbox.svelte

@@ -1,14 +1,44 @@
-<script>import { twMerge } from "tailwind-merge";
+<script context="module">import { slide } from "svelte/transition";
+import { twMerge } from "tailwind-merge";
 import {
+  getId,
+  Thc,
   validate as validateAction
 } from "../../index.js";
-import { slide } from "svelte/transition";
-import { getId } from "../../index.js";
-let _class = "";
+const _PRESET = {
+  box: "flex items-start mb-4",
+  label: "block w-full",
+  input: `
+			size-4 rounded
+			bg-gray-100
+			border-gray-300
+			shadow-sm
+			text-stuic-primary
+			cursor-pointer
+			focus:border-stuic-primary
+			focus:ring-4
+			focus:ring-offset-0
+			focus:ring-stuic-primary
+			focus:ring-opacity-20
+			disabled:cursor-not-allowed
+		`,
+  validationMessage: "text-xs text-stuic-primary tracking-tight",
+  description: "text-sm opacity-50"
+};
+const _PRESET_BY_SIZE = {
+  sm: { label: "text-sm" },
+  md: { label: "text-base" },
+  lg: { label: "text-base font-bold" }
+};
+export class FieldCheckboxConfig {
+  static class;
+  static classBySize;
+}
+</script>
+
+<script>let _class = {};
 export { _class as class };
-export let invalidClass = "border-stuic-primary";
-export let labelClass = "";
-export let descriptionClass = "";
+export let classBySize = {};
 export let size = "md";
 export let id = getId();
 export let checked = false;
@@ -19,19 +49,37 @@ export let tabindex = 0;
 export let disabled = void 0;
 export let readonly = void 0;
 export let required = void 0;
-const labelSizePreset = {
-  sm: "text-sm",
-  md: "text-base",
-  lg: "text-base font-bold"
-};
-export let validationMessageClass = "";
 export let validate = void 0;
 let validation;
 const setValidationResult = (res) => validation = res;
 let idDesc = getId();
+const _collectClasses = (k, extra = "") => [
+  _PRESET?.[k] || "",
+  _PRESET_BY_SIZE?.[size]?.[k] || "",
+  FieldCheckboxConfig?.class?.[k] || "",
+  FieldCheckboxConfig?.classBySize?.[size]?.[k] || "",
+  extra || "",
+  _class?.[k] || "",
+  classBySize?.[size]?.[k] || ""
+];
+$:
+  _boxClass = twMerge(_collectClasses("box"));
+$:
+  _inputClass = twMerge(
+    _collectClasses(
+      "input",
+      validation && !validation.valid ? _collectClasses("invalid").join(" ") : ""
+    )
+  );
+$:
+  _labelClass = twMerge(_collectClasses("label"));
+$:
+  _validationMessageClass = twMerge(_collectClasses("validationMessage"));
+$:
+  _descriptionClass = twMerge(_collectClasses("description"));
 </script>
 
-<div class={twMerge(`flex items-start mb-4 ${_class}`)}>
+<div class={_boxClass}>
 	<div class="flex h-6 items-center ml-1">
 		<input
 			{id}
@@ -40,21 +88,7 @@ let idDesc = getId();
 			aria-checked={checked}
 			aria-describedby={description ? idDesc : undefined}
 			{name}
-			class={twMerge(`
-				size-4 rounded
-				bg-gray-100
-				border-gray-300
-				shadow-sm
-				text-stuic-primary
-				cursor-pointer
-				focus:border-stuic-primary
-				focus:ring-4
-				focus:ring-offset-0
-				focus:ring-stuic-primary
-				focus:ring-opacity-20
-				disabled:cursor-not-allowed
-				${validation && !validation.valid ? invalidClass : ''}
-			`)}
+			class={_inputClass}
 			{disabled}
 			{readonly}
 			{required}
@@ -68,27 +102,22 @@ let idDesc = getId();
 		{#if label}
 			<label
 				for={id}
-				class={twMerge(`block w-full ${labelSizePreset[size]} ${labelClass}`)}
+				class={_labelClass}
 				class:cursor-pointer={!disabled}
 				class:cursor-not-allowed={disabled}
 			>
-				{@html label}
+				<Thc thc={label} forceAsHtml />
 			</label>
 		{/if}
 		{#if validation && !validation?.valid}
-			<div
-				transition:slide={{ duration: 150 }}
-				class={twMerge(
-					`text-xs text-stuic-primary tracking-tight ${validationMessageClass}`
-				)}
-			>
+			<div transition:slide={{ duration: 150 }} class={_validationMessageClass}>
 				{@html validation.message}
 			</div>
 		{/if}
 		{#if description || $$slots.description}
 			<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
 			<div
-				class={twMerge(`text-sm opacity-50 ${descriptionClass}`)}
+				class={_descriptionClass}
 				class:cursor-pointer={!disabled}
 				class:cursor-not-allowed={disabled}
 				on:click={() => !disabled && (checked = !checked)}
@@ -96,7 +125,7 @@ let idDesc = getId();
 				{#if $$slots.description}
 					<slot name="description" />
 				{:else}
-					{@html description}
+					<Thc thc={description} forceAsHtml />
 				{/if}
 			</div>
 		{/if}