@marianmeres/stuic 1.52.0 → 1.53.0

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

@@ -1,22 +1,36 @@
 import { SvelteComponent } from "svelte";
-import { type ValidateOptions } from '../../index.js';
+import { type THC, type ValidateOptions } from '../../index.js';
+export interface FieldCheckboxConfigClasses {
+    box?: string;
+    label?: string;
+    input?: string;
+    invalid?: string;
+    validationMessage?: string;
+    description?: string;
+}
+export interface FieldCheckboxConfigClassesBySize {
+    sm?: FieldCheckboxConfigClasses;
+    md?: FieldCheckboxConfigClasses;
+    lg?: FieldCheckboxConfigClasses;
+}
+export declare class FieldCheckboxConfig {
+    static class: FieldCheckboxConfigClasses;
+    static classBySize: FieldCheckboxConfigClassesBySize;
+}
 declare const __propDef: {
     props: {
-        class?: string | undefined;
-        invalidClass?: string | undefined;
-        labelClass?: string | undefined;
-        descriptionClass?: string | undefined;
+        class?: FieldCheckboxConfigClasses | undefined;
+        classBySize?: FieldCheckboxConfigClassesBySize | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         id?: string | undefined;
         checked?: boolean | undefined;
-        label?: string | undefined;
+        label?: THC | undefined;
         name?: string | undefined;
-        description?: string | undefined;
+        description?: THC | undefined;
         tabindex?: number | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
         required?: boolean | undefined;
-        validationMessageClass?: string | undefined;
         validate?: ValidateOptions | true | undefined;
     };
     events: {

package/dist/components/Input/FieldRadios.svelte

@@ -1,15 +1,18 @@
-<script>import { twMerge } from "tailwind-merge";
-import XFieldRadioInternal from "./XFieldRadioInternal.svelte";
-import { createClog } from "@marianmeres/clog";
+<script context="module">import { createClog } from "@marianmeres/clog";
+import { twMerge } from "tailwind-merge";
 import { getId } from "../../index.js";
-const clog = createClog("FieldRadio");
+import XFieldRadioInternal from "./XFieldRadioInternal.svelte";
+export class FieldRadiosConfig {
+  static class;
+  static classBySize;
+}
+</script>
+
+<script>const clog = createClog("FieldRadio");
 export let options = [];
-let _class = "";
+let _class = {};
 export { _class as class };
-export let optionClass = "";
-export let labelClass = "";
-export let descriptionClass = "";
-export let invalidClass = "";
+export let classBySize = {};
 export let size = "md";
 export let name = "";
 export let value;
@@ -37,13 +40,11 @@ $:
 				label={o.label}
 				value={o.value || o.label}
 				description={o.description}
-				class={optionClass}
-				{labelClass}
-				{descriptionClass}
+				class={_class}
+				{classBySize}
 				{disabled}
 				{tabindex}
 				{required}
-				{invalidClass}
 				{size}
 			/>
 		{/each}

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

@@ -1,4 +1,21 @@
 import { SvelteComponent } from "svelte";
+export interface FieldRadiosConfigClasses {
+    box?: string;
+    label?: string;
+    input?: string;
+    invalid?: string;
+    validationMessage?: string;
+    description?: string;
+}
+export interface FieldRadiosConfigClassesBySize {
+    sm?: FieldRadiosConfigClasses;
+    md?: FieldRadiosConfigClasses;
+    lg?: FieldRadiosConfigClasses;
+}
+export declare class FieldRadiosConfig {
+    static class: FieldRadiosConfigClasses;
+    static classBySize: FieldRadiosConfigClassesBySize;
+}
 declare const __propDef: {
     props: {
         options?: (string | {
@@ -6,11 +23,8 @@ declare const __propDef: {
             value?: string | undefined;
             description?: string | undefined;
         })[] | undefined;
-        class?: string | undefined;
-        optionClass?: string | undefined;
-        labelClass?: string | undefined;
-        descriptionClass?: string | undefined;
-        invalidClass?: string | undefined;
+        class?: FieldRadiosConfigClasses | undefined;
+        classBySize?: FieldRadiosConfigClassesBySize | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         name?: string | undefined;
         value: any;

package/dist/components/Input/FieldSelect.svelte

@@ -1,11 +1,43 @@
-<script>import { createEventDispatcher } from "svelte";
+<script context="module">import { createEventDispatcher } from "svelte";
 import { slide } from "svelte/transition";
 import { twMerge } from "tailwind-merge";
 import {
   getId,
+  Thc,
   validate as validateAction
 } from "../../index.js";
-const dispatch = createEventDispatcher();
+const _PRESET = {
+  box: "mb-4",
+  wrap: `
+			flex items-center
+            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
+		`,
+  input: `
+			rounded-md border-0 block 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 _PRESET_BY_SIZE = {};
+export class FieldSelectConfig {
+  static class = {};
+  static classBySize = {};
+}
+</script>
+
+<script>const dispatch = createEventDispatcher();
 const inputSizePreset = {
   sm: "text-sm placeholder:text-sm",
   md: "text-base placeholder:text-base",
@@ -17,10 +49,9 @@ const labelSizePreset = {
   lg: "text-base font-bold"
 };
 export let options = [];
-let _class = "";
+let _class = {};
 export { _class as class };
-export let wrapClass = "";
-export let invalidClass = "border-stuic-primary";
+export let classBySize;
 export let size = "md";
 export let id = getId();
 export let value;
@@ -28,12 +59,11 @@ export let label = "";
 export let name = "";
 export let tabindex = 0;
 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;
+export let showAsterixOnRequired = true;
 let validation;
 const setValidationResult = (res) => validation = res;
 let _options = [];
@@ -51,55 +81,58 @@ let _inputEl;
 $:
   if (_inputEl)
     dispatch("input_mounted", _inputEl);
+const _collectClasses = (k, extra = "") => [
+  _PRESET?.[k] || "",
+  _PRESET_BY_SIZE?.[size]?.[k] || "",
+  FieldSelectConfig?.class?.[k] || "",
+  FieldSelectConfig?.classBySize?.[size]?.[k] || "",
+  extra || "",
+  _class?.[k] || "",
+  classBySize?.[size]?.[k] || ""
+];
+$:
+  _boxClass = twMerge(_collectClasses("box"));
+$:
+  _labelClass = twMerge(
+    _collectClasses(
+      "label",
+      showAsterixOnRequired && required ? _collectClasses("asterix").join(" ") : ""
+    )
+  );
+$:
+  _wrapClass = twMerge(
+    _collectClasses(
+      "wrap",
+      validation && !validation.valid ? _collectClasses("invalid").join(" ") : ""
+    )
+  );
 $:
-  inputClass = twMerge(`
-		rounded-md border-0 block w-full flex-1
-		bg-transparent
-		tracking-tight
-		focus:outline-0 focus-visible:ring-0
-		placeholder:text-black/35 placeholder:tracking-tight
-		${inputSizePreset[size]}
-	`);
+  _inputClass = twMerge("form-input", _collectClasses("input"));
+$:
+  _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]
-				)}
-			>
+			<label for={id} class={_labelClass}>
 				{#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(`
-            flex items-center
-            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}>
 		<slot name="input_before" {id} />
 		<select
-			class={inputClass}
+			class={_inputClass}
 			bind:value
 			bind:this={_inputEl}
 			{disabled}
@@ -119,23 +152,16 @@ $:
 		<slot name="input_after" {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/FieldSelect.svelte.d.ts

@@ -1,31 +1,47 @@
 import { SvelteComponent } from "svelte";
-import { type ValidateOptions } from '../../index.js';
+import { type THC, type ValidateOptions } from '../../index.js';
+export interface FieldSelectConfigClasses {
+    box?: string;
+    wrap?: string;
+    label?: string;
+    input?: string;
+    invalid?: string;
+    validationMessage?: string;
+    description?: string;
+    below?: string;
+    asterix?: string;
+}
+export interface FieldSelectConfigClassesBySize {
+    sm?: FieldSelectConfigClasses;
+    md?: FieldSelectConfigClasses;
+    lg?: FieldSelectConfigClasses;
+}
+export declare class FieldSelectConfig {
+    static class: FieldSelectConfigClasses;
+    static classBySize: FieldSelectConfigClassesBySize;
+}
 declare const __propDef: {
     props: {
         options?: (string | {
             label: string;
             value?: string | undefined;
         })[] | undefined;
-        class?: string | undefined;
-        wrapClass?: string | undefined;
-        invalidClass?: string | undefined;
+        class?: FieldSelectConfigClasses | undefined;
+        classBySize: FieldSelectConfigClassesBySize;
         size?: "sm" | "md" | "lg" | undefined;
         id?: string | undefined;
         value: any;
-        label?: string | undefined;
+        label?: THC | undefined;
         name?: string | undefined;
         tabindex?: number | undefined;
-        description?: string | undefined;
-        descriptionClass?: string | undefined;
+        description?: THC | undefined;
         disabled?: boolean | undefined;
         required?: boolean | undefined;
         autofocus?: true | 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/Fieldset.svelte

@@ -1,26 +1,28 @@
-<script>import { twMerge } from "tailwind-merge";
-let _class = "";
+<script context="module">import { twMerge } from "tailwind-merge";
+import Thc from "../Thc/Thc.svelte";
+const _PRESET = {
+  box: `border border-gray-200 p-4 pt-3 rounded-md`,
+  legend: `px-2`
+};
+export class FieldsetConfig {
+  static class = {};
+}
+</script>
+
+<script>let _class = {};
 export { _class as class };
 export let legend = "";
-export let legendClass = "";
+const _collectClasses = (k, extra = "") => [
+  _PRESET?.[k] || "",
+  FieldsetConfig?.class?.[k] || "",
+  _class?.[k] || ""
+];
 </script>
 
-<fieldset
-	class={twMerge(`
-        border border-gray-200 
-        p-4 pt-3
-        rounded-md
-        ${_class}
-    `)}
->
+<fieldset class={twMerge(_collectClasses('box'))}>
 	{#if legend}
-		<legend
-			class={twMerge(`
-                px-2
-                ${legendClass}
-            `)}
-		>
-			{@html legend}
+		<legend class={twMerge(_collectClasses('legend'))}>
+			<Thc thc={legend} forceAsHtml />
 		</legend>
 	{/if}
 	<slot />

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

@@ -1,9 +1,15 @@
 import { SvelteComponent } from "svelte";
+export interface FieldsetConfigClasses {
+    box?: string;
+    legend?: string;
+}
+export declare class FieldsetConfig {
+    static class: FieldsetConfigClasses;
+}
 declare const __propDef: {
     props: {
-        class?: string | undefined;
+        class?: FieldsetConfigClasses | undefined;
         legend?: string | undefined;
-        legendClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Input/XFieldRadioInternal.svelte

@@ -1,16 +1,43 @@
-<script>import { twMerge } from "tailwind-merge";
+<script context="module">import { twMerge } from "tailwind-merge";
 import {
   getId,
-  validate as validateAction
+  validate as validateAction,
+  FieldRadiosConfig,
+  Thc
 } from "../../index.js";
 import { slide } from "svelte/transition";
 import { createEventDispatcher, onMount } from "svelte";
-const dispatch = createEventDispatcher();
-let _class = "";
+const _PRESET = {
+  box: "flex items-start mb-4",
+  label: "block w-full",
+  input: `
+			size-4 rounded-full
+			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" }
+};
+</script>
+
+<script>const dispatch = createEventDispatcher();
+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 value;
 export let group;
@@ -20,12 +47,6 @@ export let description = "";
 export let tabindex = 0;
 export let disabled = false;
 export let required = false;
-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) => {
@@ -34,9 +55,33 @@ const setValidationResult = (res) => {
 };
 let id = getId();
 let idDesc = getId();
+const _collectClasses = (k, extra = "") => [
+  _PRESET?.[k] || "",
+  _PRESET_BY_SIZE?.[size]?.[k] || "",
+  FieldRadiosConfig?.class?.[k] || "",
+  FieldRadiosConfig?.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 ${_class}`)}>
+<div class={_boxClass}>
 	<div class="flex h-6 items-center ml-1">
 		<input
 			{id}
@@ -45,21 +90,7 @@ let idDesc = getId();
 			bind:group
 			aria-describedby={description ? idDesc : undefined}
 			{name}
-			class={twMerge(`
-				size-4 rounded-full
-				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}
 			{required}
 			{tabindex}
@@ -72,32 +103,27 @@ 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}
 			<!-- 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 && (group = value)}
 			>
-				{@html description}
+				<Thc thc={description} forceAsHtml />
 			</div>
 		{/if}
 	</div>

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

@@ -1,11 +1,9 @@
 import { SvelteComponent } from "svelte";
-import { type ValidateOptions } from '../../index.js';
+import { type FieldRadiosConfigClassesBySize, type ValidateOptions, type FieldRadiosConfigClasses } from '../../index.js';
 declare const __propDef: {
     props: {
-        class?: string | undefined;
-        invalidClass?: string | undefined;
-        labelClass?: string | undefined;
-        descriptionClass?: string | undefined;
+        class?: FieldRadiosConfigClasses | undefined;
+        classBySize?: FieldRadiosConfigClassesBySize | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         value: any;
         group: any;
@@ -15,12 +13,9 @@ declare const __propDef: {
         tabindex?: number | undefined;
         disabled?: boolean | undefined;
         required?: boolean | undefined;
-        validationMessageClass?: string | undefined;
         validate?: ValidateOptions | true | undefined;
     };
     events: {
-        validation: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/Notifications/Notifications.svelte

@@ -57,6 +57,7 @@ export class NotificationsConfig {
                     leading-none
                     px-3
                     hover:bg-black/20
+                    focus-visible:bg-black/20 focus-visible:outline-none focus-visible:ring-0
                     group
                     rounded-tr-md rounded-br-md
                 `,

package/dist/index.d.ts

@@ -9,11 +9,11 @@ export { ColorScheme } from './components/ColorScheme/color-scheme.js';
 export { default as DismissibleMessage, DismissibleMessageConfig, } from './components/DismissibleMessage/DismissibleMessage.svelte';
 export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
 export { default as HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';
-export { default as Field } from './components/Input/Field.svelte';
-export { default as FieldCheckbox } from './components/Input/FieldCheckbox.svelte';
-export { default as FieldRadios } from './components/Input/FieldRadios.svelte';
-export { default as FieldSelect } from './components/Input/FieldSelect.svelte';
-export { default as Fieldset } from './components/Input/Fieldset.svelte';
+export { default as Field, FieldConfig, type FieldConfigClasses, } from './components/Input/Field.svelte';
+export { default as FieldCheckbox, FieldCheckboxConfig, type FieldCheckboxConfigClasses, type FieldCheckboxConfigClassesBySize, } from './components/Input/FieldCheckbox.svelte';
+export { default as FieldRadios, FieldRadiosConfig, type FieldRadiosConfigClasses, type FieldRadiosConfigClassesBySize, } from './components/Input/FieldRadios.svelte';
+export { default as FieldSelect, FieldSelectConfig, type FieldSelectConfigClasses, type FieldSelectConfigClassesBySize, } from './components/Input/FieldSelect.svelte';
+export { default as Fieldset, FieldsetConfig, type FieldsetConfigClasses, } from './components/Input/Fieldset.svelte';
 export { createNotificationsStore, NOTIFICATION_EVENT, type NotiticationsCreateStoreOptions, type NotificationCreateParam, type Notification, type NotificationInput, type NotificationType, type NotificationOnEventHandler, type NotificationsSortOrder, type NotificationKnownClasses, } from './components/Notifications/notifications.js';
 export { default as Notifications, NotificationsConfig, } from './components/Notifications/Notifications.svelte';
 export { default as Popover } from './components/Popover/Popover.svelte';

package/dist/index.js

@@ -19,11 +19,11 @@ export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer
 //
 export { default as HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';
 //
-export { default as Field } from './components/Input/Field.svelte';
-export { default as FieldCheckbox } from './components/Input/FieldCheckbox.svelte';
-export { default as FieldRadios } from './components/Input/FieldRadios.svelte';
-export { default as FieldSelect } from './components/Input/FieldSelect.svelte';
-export { default as Fieldset } from './components/Input/Fieldset.svelte';
+export { default as Field, FieldConfig, } from './components/Input/Field.svelte';
+export { default as FieldCheckbox, FieldCheckboxConfig, } from './components/Input/FieldCheckbox.svelte';
+export { default as FieldRadios, FieldRadiosConfig, } from './components/Input/FieldRadios.svelte';
+export { default as FieldSelect, FieldSelectConfig, } from './components/Input/FieldSelect.svelte';
+export { default as Fieldset, FieldsetConfig, } from './components/Input/Fieldset.svelte';
 //
 export { createNotificationsStore, NOTIFICATION_EVENT, } from './components/Notifications/notifications.js';
 export { default as Notifications, NotificationsConfig, } from './components/Notifications/Notifications.svelte';