@marianmeres/stuic 1.125.0 → 2.0.0-next.2

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

@@ -0,0 +1,41 @@
+import type { Snippet } from "svelte";
+import { type ValidateOptions } from "../../actions/validate.svelte.js";
+import type { THC } from "../Thc/Thc.svelte";
+type SnippetWithId = Snippet<[{
+    id: string;
+}]>;
+interface Props extends Record<string, any> {
+    input?: HTMLInputElement;
+    checked?: boolean;
+    label?: SnippetWithId | THC;
+    description?: SnippetWithId | THC;
+    class?: string;
+    id?: string;
+    tabindex?: number;
+    renderSize?: "sm" | "md" | "lg" | string;
+    useTrim?: boolean;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+    labelAfter?: SnippetWithId | THC;
+    inputBefore?: SnippetWithId | THC;
+    inputAfter?: SnippetWithId | THC;
+    inputBelow?: SnippetWithId | THC;
+    below?: SnippetWithId | THC;
+    labelLeft?: boolean;
+    labelLeftWidth?: "normal" | "wide";
+    labelLeftBreakpoint?: number;
+    classInput?: string;
+    classLabel?: string;
+    classLabelBox?: string;
+    classInputBox?: string;
+    classInputBoxWrap?: string;
+    classDescBox?: string;
+    classBelowBox?: string;
+    style?: string;
+    renderValue?: (rawValue: any) => string;
+}
+declare const FieldSwitch: import("svelte").Component<Props, {}, "input" | "checked">;
+type FieldSwitch = ReturnType<typeof FieldSwitch>;
+export default FieldSwitch;

package/dist/components/Input/FieldTextarea.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLInputAttributes, HTMLTextareaAttributes } from "svelte/elements";
+	import { trim } from "../../actions/trim.svelte.js";
+	import {
+		validate as validateAction,
+		type ValidateOptions,
+		type ValidationResult,
+	} from "../../actions/validate.svelte.js";
+	import { getId } from "../../utils/get-id.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import type { THC } from "../Thc/Thc.svelte";
+	import InputWrap from "./_internal/InputWrap.svelte";
+	import { autogrow } from "../../actions/autogrow.svelte.js";
+
+	type SnippetWithId = Snippet<[{ id: string }]>;
+
+	interface Props extends HTMLTextareaAttributes {
+		input?: HTMLTextAreaElement;
+		value?: string; // badInput
+		label?: SnippetWithId | THC;
+		description?: SnippetWithId | THC;
+		class?: string;
+		id?: string;
+		tabindex?: number; // tooShort
+		renderSize?: "sm" | "md" | "lg" | string;
+		useTrim?: boolean;
+		useAutogrow?: boolean | { enabled?: boolean; max?: number };
+		//
+		required?: boolean;
+		disabled?: boolean;
+		//
+		validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+		// wrap snippets
+		labelAfter?: SnippetWithId | THC;
+		inputBefore?: SnippetWithId | THC;
+		inputAfter?: SnippetWithId | THC;
+		inputBelow?: SnippetWithId | THC;
+		below?: SnippetWithId | THC;
+		//
+		labelLeft?: boolean;
+		labelLeftWidth?: "normal" | "wide";
+		labelLeftBreakpoint?: number;
+		//
+		classInput?: string;
+		classLabel?: string;
+		classLabelBox?: string;
+		classInputBox?: string;
+		classInputBoxWrap?: string;
+		classDescBox?: string;
+		classBelowBox?: string;
+		style?: string;
+	}
+
+	let {
+		input = $bindable(),
+		value = $bindable(),
+		label = "",
+		id = getId(),
+		tabindex = 0,
+		description,
+		class: classProp,
+		renderSize = "md",
+		useTrim = true,
+		useAutogrow = true,
+		//
+		required = false,
+		disabled = false,
+		//
+		validate,
+		//
+		labelAfter,
+		inputBefore,
+		inputAfter,
+		inputBelow,
+		below,
+		//
+		labelLeft = false,
+		labelLeftWidth = "normal",
+		labelLeftBreakpoint = 480,
+		//
+		classInput,
+		classLabel,
+		classLabelBox,
+		classInputBox,
+		classInputBoxWrap,
+		classDescBox,
+		classBelowBox,
+		style,
+		//
+		...rest
+	}: Props = $props();
+
+	//
+	let validation: ValidationResult | undefined = $state();
+	const setValidationResult = (res: ValidationResult) => (validation = res);
+</script>
+
+<InputWrap
+	{description}
+	class={classProp}
+	size={renderSize}
+	{id}
+	{label}
+	{labelAfter}
+	{inputBefore}
+	{inputAfter}
+	{below}
+	{required}
+	{disabled}
+	{labelLeft}
+	{labelLeftWidth}
+	{labelLeftBreakpoint}
+	{classLabel}
+	{classLabelBox}
+	{classInputBox}
+	{classInputBoxWrap}
+	{classDescBox}
+	{classBelowBox}
+	{validation}
+	{style}
+>
+	<textarea
+		bind:value
+		bind:this={input}
+		{id}
+		class={twMerge("form-input min-h-16", renderSize, classInput)}
+		use:trim={() => ({
+			enabled: useTrim,
+			setValue: (v: string) => (value = v),
+		})}
+		use:validateAction={() => ({
+			enabled: !!validate,
+			...(typeof validate === "boolean" ? {} : validate),
+			setValidationResult,
+		})}
+		use:autogrow={() => ({
+			enabled: !!useAutogrow,
+			...(typeof useAutogrow === "boolean" ? {} : useAutogrow),
+		})}
+		{tabindex}
+		{required}
+		{disabled}
+		{...rest}
+	></textarea>
+</InputWrap>

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

@@ -0,0 +1,44 @@
+import type { Snippet } from "svelte";
+import type { HTMLTextareaAttributes } from "svelte/elements";
+import { type ValidateOptions } from "../../actions/validate.svelte.js";
+import type { THC } from "../Thc/Thc.svelte";
+type SnippetWithId = Snippet<[{
+    id: string;
+}]>;
+interface Props extends HTMLTextareaAttributes {
+    input?: HTMLTextAreaElement;
+    value?: string;
+    label?: SnippetWithId | THC;
+    description?: SnippetWithId | THC;
+    class?: string;
+    id?: string;
+    tabindex?: number;
+    renderSize?: "sm" | "md" | "lg" | string;
+    useTrim?: boolean;
+    useAutogrow?: boolean | {
+        enabled?: boolean;
+        max?: number;
+    };
+    required?: boolean;
+    disabled?: boolean;
+    validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+    labelAfter?: SnippetWithId | THC;
+    inputBefore?: SnippetWithId | THC;
+    inputAfter?: SnippetWithId | THC;
+    inputBelow?: SnippetWithId | THC;
+    below?: SnippetWithId | THC;
+    labelLeft?: boolean;
+    labelLeftWidth?: "normal" | "wide";
+    labelLeftBreakpoint?: number;
+    classInput?: string;
+    classLabel?: string;
+    classLabelBox?: string;
+    classInputBox?: string;
+    classInputBoxWrap?: string;
+    classDescBox?: string;
+    classBelowBox?: string;
+    style?: string;
+}
+declare const FieldTextarea: import("svelte").Component<Props, {}, "value" | "input">;
+type FieldTextarea = ReturnType<typeof FieldTextarea>;
+export default FieldTextarea;

package/dist/components/Input/Fieldset.svelte

@@ -1,25 +1,29 @@
-<script context="module">import { twMerge2 } from "../../utils/tw-merge2.js";
-import Thc from "../Thc/Thc.svelte";
-const _PRESET = {
-  box: `border border-neutral-200 p-4 pt-3 rounded-md`,
-  legend: `px-2`
-};
-export class FieldsetConfig {
-  static class = {};
-}
-</script>
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { THC } from "../Thc/Thc.svelte";
+	import Thc from "../Thc/Thc.svelte";
+	import { twMerge } from "../../utils/tw-merge.js";
 
-<script>let _class = {};
-export { _class as class };
-export let legend = "";
-const _collectClasses = (k, extra = "") => [_PRESET?.[k] || "", FieldsetConfig?.class?.[k] || "", _class?.[k] || ""].join(" ");
+	interface Props {
+		legend?: THC;
+		class?: string;
+		classLegend?: string;
+		children?: Snippet;
+	}
+	let { legend, class: classProp, children, classLegend }: Props = $props();
 </script>
 
-<fieldset class={twMerge2(_collectClasses('box'))}>
+<fieldset
+	class={twMerge(
+		"stuic-fieldset",
+		"border border-neutral-300 p-4 pt-3 rounded-md my-8",
+		classProp
+	)}
+>
 	{#if legend}
-		<legend class={twMerge2(_collectClasses('legend'))}>
+		<legend class={twMerge("px-2", classLegend)}>
 			<Thc thc={legend} forceAsHtml />
 		</legend>
 	{/if}
-	<slot />
+	{@render children?.()}
 </fieldset>

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

@@ -1,28 +1,11 @@
-import { SvelteComponent } from "svelte";
-export interface FieldsetConfigClasses {
-    box?: string;
-    legend?: string;
+import type { Snippet } from "svelte";
+import type { THC } from "../Thc/Thc.svelte";
+interface Props {
+    legend?: THC;
+    class?: string;
+    classLegend?: string;
+    children?: Snippet;
 }
-export declare class FieldsetConfig {
-    static class: FieldsetConfigClasses;
-}
-declare const __propDef: {
-    props: {
-        class?: FieldsetConfigClasses;
-        legend?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type FieldsetProps = typeof __propDef.props;
-export type FieldsetEvents = typeof __propDef.events;
-export type FieldsetSlots = typeof __propDef.slots;
-export default class Fieldset extends SvelteComponent<FieldsetProps, FieldsetEvents, FieldsetSlots> {
-}
-export {};
+declare const Fieldset: import("svelte").Component<Props, {}, "">;
+type Fieldset = ReturnType<typeof Fieldset>;
+export default Fieldset;

package/dist/components/Input/_internal/FieldRadioInternal.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { THC } from "../../Thc/Thc.svelte";
+	import {
+		validate as validateAction,
+		type ValidateOptions,
+		type ValidationResult,
+	} from "../../../actions/validate.svelte.js";
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { getId } from "../../../utils/get-id.js";
+	import { twMerge } from "../../../utils/tw-merge.js";
+	import Thc, { isTHCNotEmpty } from "../../Thc/Thc.svelte";
+
+	type SnippetWithId = Snippet<[{ id: string }]>;
+
+	interface Props extends HTMLInputAttributes {
+		input?: HTMLInputElement;
+		group?: string;
+		label?: SnippetWithId | THC;
+		name?: string;
+		value?: string;
+		required?: boolean;
+		disabled?: boolean;
+		renderSize?: "sm" | "md" | "lg" | string;
+		description?: SnippetWithId | THC;
+		//
+		validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+		//
+		classRadioBox?: string;
+		classInputBox?: string;
+		classInput?: string;
+		classLabelBox?: string;
+		classLabel?: string;
+		classDescBox?: string;
+		classValidationBox?: string;
+		//
+		validation: ValidationResult | undefined;
+	}
+
+	let {
+		input = $bindable(),
+		group = $bindable(),
+		value,
+		label,
+		name,
+		required,
+		disabled,
+		description,
+		renderSize,
+		tabindex,
+		validate,
+		classRadioBox,
+		classInputBox,
+		classInput,
+		classLabelBox,
+		classLabel,
+		classDescBox,
+		classValidationBox,
+		validation = $bindable(),
+		...rest
+	}: Props = $props();
+
+	//
+	// let validation: ValidationResult | undefined = $state();
+	const setValidationResult = (res: ValidationResult) => (validation = res);
+
+	//
+	let invalid = $derived(validation && !validation?.valid);
+	let id = getId();
+	let idDesc = getId();
+
+	//
+	let _classCommon = $derived(
+		[invalid && "invalid", disabled && "disabled", renderSize].filter(Boolean).join(" ")
+	);
+
+	const _preset = {
+		labelBox: {
+			label: {
+				size: {
+					sm: "text-sm mt-0.5",
+					lg: "font-semibold",
+				} as any,
+			},
+		},
+	};
+</script>
+
+{#snippet snippetOrThc({ id, value }: { id: string; value?: SnippetWithId | THC })}
+	{#if typeof value === "function"}
+		{@render value({ id })}
+	{:else if value}
+		<Thc thc={value} forceAsHtml />
+	{/if}
+{/snippet}
+
+<label
+	class={twMerge(
+		"radio-box",
+		_classCommon,
+		"flex items-start cursor-pointer pr-1",
+		disabled && "cursor-not-allowed",
+		classRadioBox
+	)}
+>
+	<div
+		class={twMerge(
+			"input-box",
+			_classCommon,
+			"flex h-6 items-center ml-1",
+			classInputBox
+		)}
+	>
+		<input
+			type="radio"
+			{id}
+			bind:this={input}
+			bind:group
+			{value}
+			{name}
+			class={twMerge(
+				_classCommon,
+				`size-4 rounded-full
+				bg-neutral-100
+				border-neutral-300
+				text-input-accent dark:text-input-accent-dark
+				cursor-pointer
+
+				checked:border-input-accent checked:bg-input-accent 
+				checked:dark:border-input-accent-dark checked:dark:bg-input-accent-dark
+
+				focus:border-input-accent
+				focus:ring-4
+				focus:ring-offset-0
+				focus:ring-input-accent/20 focus:dark:ring-input-accent-dark/20
+
+				disabled:cursor-not-allowed`,
+				disabled && "cursor-not-allowed",
+				classInput
+			)}
+			aria-describedby={description ? idDesc : undefined}
+			use:validateAction={() => ({
+				enabled: !!validate,
+				...(typeof validate === "boolean" ? {} : validate),
+				setValidationResult,
+			})}
+			{required}
+			{disabled}
+			{...rest}
+		/>
+	</div>
+	<div class={twMerge("label-box", _classCommon, "ml-3 w-full", classLabelBox)}>
+		{#if label}
+			<div
+				class={twMerge(
+					"label",
+					_classCommon,
+					"block w-full cursor-pointer",
+					renderSize && _preset.labelBox.label.size[renderSize],
+					required && "after:content-['*'] after:opacity-40 after:pl-1",
+					classLabel
+				)}
+			>
+				{#if isTHCNotEmpty(label)}
+					<Thc thc={label as THC} forceAsHtml />
+				{:else}
+					{@render (label as SnippetWithId)({ id })}
+				{/if}
+			</div>
+		{/if}
+		{#if description}
+			<div
+				id={idDesc}
+				class={twMerge(
+					"desc-box",
+					_classCommon,
+					"text-sm opacity-50 cursor-pointer font-normal",
+					disabled && "cursor-not-allowed",
+					classDescBox
+				)}
+			>
+				{@render snippetOrThc({ id, value: description })}
+			</div>
+		{/if}
+	</div>
+</label>

package/dist/components/Input/_internal/FieldRadioInternal.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from "svelte";
+import type { THC } from "../../Thc/Thc.svelte";
+import { type ValidateOptions, type ValidationResult } from "../../../actions/validate.svelte.js";
+import type { HTMLInputAttributes } from "svelte/elements";
+type SnippetWithId = Snippet<[{
+    id: string;
+}]>;
+interface Props extends HTMLInputAttributes {
+    input?: HTMLInputElement;
+    group?: string;
+    label?: SnippetWithId | THC;
+    name?: string;
+    value?: string;
+    required?: boolean;
+    disabled?: boolean;
+    renderSize?: "sm" | "md" | "lg" | string;
+    description?: SnippetWithId | THC;
+    validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+    classRadioBox?: string;
+    classInputBox?: string;
+    classInput?: string;
+    classLabelBox?: string;
+    classLabel?: string;
+    classDescBox?: string;
+    classValidationBox?: string;
+    validation: ValidationResult | undefined;
+}
+declare const FieldRadioInternal: import("svelte").Component<Props, {}, "input" | "group" | "validation">;
+type FieldRadioInternal = ReturnType<typeof FieldRadioInternal>;
+export default FieldRadioInternal;