@marianmeres/stuic 1.125.0 → 2.0.0-next.2

package/dist/components/Input/FieldInput.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLInputAttributes } 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";
+
+	type SnippetWithId = Snippet<[{ id: string }]>;
+
+	interface Props extends HTMLInputAttributes, Record<string, any> {
+		input?: HTMLInputElement;
+		value?: string | number; // badInput
+		label?: SnippetWithId | THC;
+		type?: string;
+		description?: SnippetWithId | THC;
+		class?: string;
+		id?: string;
+		tabindex?: number; // tooShort
+		renderSize?: "sm" | "md" | "lg" | string;
+		useTrim?: boolean;
+		//
+		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(),
+		type = "text",
+		tabindex = 0,
+		description,
+		class: classProp,
+		renderSize = "md",
+		useTrim = 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}
+>
+	<input
+		bind:value
+		bind:this={input}
+		{type}
+		{id}
+		class={twMerge("form-input", renderSize, classInput)}
+		use:trim={() => ({
+			enabled: useTrim,
+			setValue: (v: string) => useTrim && (value = v),
+		})}
+		use:validateAction={() => ({
+			enabled: !!validate,
+			...(typeof validate === "boolean" ? {} : validate),
+			setValidationResult,
+		})}
+		{tabindex}
+		{required}
+		{disabled}
+		{...rest}
+	/>
+</InputWrap>

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

@@ -0,0 +1,41 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } 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 HTMLInputAttributes, Record<string, any> {
+    input?: HTMLInputElement;
+    value?: string | number;
+    label?: SnippetWithId | THC;
+    type?: string;
+    description?: SnippetWithId | THC;
+    class?: string;
+    id?: string;
+    tabindex?: number;
+    renderSize?: "sm" | "md" | "lg" | string;
+    useTrim?: boolean;
+    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 FieldInput: import("svelte").Component<Props, {}, "value" | "input">;
+type FieldInput = ReturnType<typeof FieldInput>;
+export default FieldInput;

package/dist/components/Input/FieldLikeButton.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	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";
+
+	type SnippetWithId = Snippet<[{ id: string }]>;
+
+	interface Props extends Record<string, any> {
+		input?: HTMLInputElement;
+		value: string;
+		label?: SnippetWithId | THC;
+		// type?: "submit" | "reset" | "button";
+		description?: SnippetWithId | THC;
+		class?: string;
+		id?: string;
+		tabindex?: number; // tooShort
+		renderSize?: "sm" | "md" | "lg" | string;
+		useTrim?: boolean;
+		name?: string;
+		//
+		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;
+		//
+		renderValue?: (rawValue: any) => string;
+	}
+
+	let {
+		input = $bindable(),
+		value = $bindable(),
+		label = "",
+		id = getId(),
+		// type = "button",
+		tabindex = 0,
+		description,
+		class: classProp,
+		renderSize = "md",
+		useTrim = true,
+		name,
+		//
+		required = false,
+		disabled = false,
+		//
+		validate,
+		//
+		labelAfter,
+		inputBefore,
+		inputAfter,
+		inputBelow,
+		below,
+		//
+		labelLeft = false,
+		labelLeftWidth = "normal",
+		labelLeftBreakpoint = 480,
+		//
+		classInput,
+		classLabel,
+		classLabelBox,
+		classInputBox,
+		classInputBoxWrap,
+		classDescBox,
+		classBelowBox,
+		style = "",
+		//
+		renderValue,
+		//
+		...rest
+	}: Props = $props();
+
+	let _value_renderer: any = $derived(
+		typeof renderValue === "function"
+			? renderValue
+			: (v: any) => {
+					// by default, we're expecting JSON value
+					try {
+						return JSON.stringify(JSON.parse(v));
+					} catch (e) {
+						return `${e}`;
+					}
+				}
+	);
+
+	// let rendered = $derived(renderValue?.(value) ?? value);
+	let rendered: string | Snippet<[value: string]> = $derived(_value_renderer(value));
+
+	// once button rendered, trigger change on the input, so that the validation re/triggers
+	$effect(() => {
+		rendered;
+		input?.dispatchEvent(new Event("change", { bubbles: true }));
+	});
+
+	//
+	let validation: ValidationResult | undefined = $state();
+	const setValidationResult = (res: ValidationResult) => (validation = res);
+
+	// $inspect("validation", validation);
+</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}
+>
+	<button
+		type="button"
+		class={twMerge(
+			"no-focus-visible",
+			"w-full text-left py-2 px-3 border-0 bg-transparent",
+			"focus:outline-0 focus-visible:outline-0",
+			renderSize,
+			classInput
+		)}
+		{disabled}
+		{...rest as any}
+		{tabindex}
+	>
+		{#if typeof rendered === "function"}
+			{@render rendered(value)}
+		{:else if rendered}
+			{@html rendered}
+		{:else}
+			&nbsp;
+		{/if}
+	</button>
+
+	<input
+		bind:value
+		bind:this={input}
+		type="hidden"
+		{id}
+		{name}
+		use:validateAction={() => ({
+			enabled: !!validate,
+			...(typeof validate === "boolean"
+				? {
+						// PROBLEM with hidden inputs is that they:
+						// 1. do not report required (AFAICT)
+						// 2. do not report el.validationMessage even if invalid via custom validation
+						customValidator(val, ctx, el) {
+							// so, here, we're fixing (1.) and will handle the (2.) elsewhere
+							// (the message will be ignored anyway, we just need to send non-empty string)
+							if (required && !val) return "valueMissing";
+
+							// also, by default, JSON validation is built in
+							try {
+								JSON.parse(val);
+								return "";
+							} catch (e) {
+								return "typeMismatch";
+							}
+						},
+					}
+				: validate),
+			setValidationResult,
+		})}
+		{required}
+		{disabled}
+	/>
+</InputWrap>

package/dist/components/Input/FieldLikeButton.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;
+    value: string;
+    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 FieldLikeButton: import("svelte").Component<Props, {}, "value" | "input">;
+type FieldLikeButton = ReturnType<typeof FieldLikeButton>;
+export default FieldLikeButton;