@marianmeres/stuic 1.125.0 → 2.0.0-next.2

package/dist/components/Input/FieldCheckbox.svelte

@@ -1,156 +1,198 @@
-<script context="module">import { slide } from "svelte/transition";
-import { validate as validateAction } from "../../actions/validate.js";
-import { getId } from "../../utils/get-id.js";
-import { twMerge2 } from "../../utils/tw-merge2.js";
-import Thc from "../Thc/Thc.svelte";
-const _emptyClasses = () => ({
-  box: "",
-  label: "",
-  input: "",
-  invalid: "",
-  validationMessage: "",
-  description: ""
-});
-const _PRESET = {
-  box: "flex items-start mb-4",
-  label: "block w-full",
-  input: `
-			size-4 rounded
-			bg-neutral-100
-			border-neutral-300
-			shadow-sm
-			text-stuic-primary dark:text-stuic-primary-dark
-			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 = _emptyClasses();
-  static classBySize = {
-    sm: _emptyClasses(),
-    md: _emptyClasses(),
-    lg: _emptyClasses()
-  };
-}
-</script>
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { slide } from "svelte/transition";
+	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 { Thc } from "../Thc/index.js";
+	import { isTHCNotEmpty, type THC } from "../Thc/Thc.svelte";
+
+	type SnippetWithId = Snippet<[{ id: string }]>;
+
+	interface Props extends HTMLInputAttributes {
+		input?: HTMLInputElement;
+		id?: string;
+		checked?: boolean;
+		label?: SnippetWithId | THC;
+		required?: boolean;
+		disabled?: boolean;
+		renderSize?: "sm" | "md" | "lg" | string;
+		description?: SnippetWithId | THC;
+		//
+		validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+		//
+		class?: string;
+		classInputBox?: string;
+		classInput?: string;
+		classLabelBox?: string;
+		classLabel?: string;
+		classDescBox?: string;
+		classValidationBox?: string;
+		style?: string;
+	}
+
+	let {
+		input = $bindable(),
+		id = getId(),
+		checked = $bindable(),
+		label,
+		required,
+		disabled,
+		renderSize = "md",
+		description,
+		validate,
+		class: classProp,
+		classInputBox,
+		classInput,
+		classLabelBox,
+		classLabel,
+		classDescBox,
+		classValidationBox,
+		style,
+		...rest
+	}: Props = $props();
+
+	//
+	let validation: ValidationResult | undefined = $state();
+	const setValidationResult = (res: ValidationResult) => (validation = res);
+
+	//
+	let invalid = $derived(validation && !validation?.valid);
+	let idDesc = getId();
 
-<script>let _class = {};
-export { _class as class };
-export let classBySize = {};
-export let size = "md";
-export let id = getId();
-export let checked = false;
-export let label = "";
-export let name = "";
-export let description = "";
-export let tabindex = 0;
-export let disabled = void 0;
-export let readonly = void 0;
-export let required = void 0;
-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] || ""
-].join(" ");
-$:
-  _boxClass = twMerge2(_collectClasses("box"));
-$:
-  _inputClass = twMerge2(
-    _collectClasses(
-      "input",
-      validation && !validation.valid ? _collectClasses("invalid") : ""
-    )
-  );
-$:
-  _labelClass = twMerge2(_collectClasses("label"));
-$:
-  _validationMessageClass = twMerge2(_collectClasses("validationMessage"));
-$:
-  _descriptionClass = twMerge2(_collectClasses("description"));
+	// $inspect(33333, invalid, validation);
+
+	//
+	let _classCommon = $derived(
+		[invalid && "invalid", disabled && "disabled", required && "required", renderSize]
+			.filter(Boolean)
+			.join(" ")
+	);
+
+	const _preset = {
+		labelBox: {
+			label: {
+				size: {
+					sm: "text-sm mt-0.5",
+					lg: "font-bold",
+				} as any,
+			},
+		},
+	};
 </script>
 
-<div class={_boxClass}>
-	<div class="flex h-6 items-center ml-1">
+{#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(
+		`stuic-checkbox`,
+		_classCommon,
+		"flex items-start mb-4 text-base",
+		classProp
+	)}
+	{style}
+>
+	<div
+		class={twMerge(
+			"input-box",
+			_classCommon,
+			"flex h-6 items-center ml-1",
+			classInputBox
+		)}
+	>
 		<input
 			{id}
 			type="checkbox"
+			bind:this={input}
 			bind:checked
 			aria-checked={checked}
 			aria-describedby={description ? idDesc : undefined}
-			{name}
-			class={_inputClass}
-			{disabled}
-			{readonly}
+			use:validateAction={() => ({
+				enabled: !!validate,
+				...(typeof validate === "boolean" ? {} : validate),
+				setValidationResult,
+			})}
+			class={twMerge(
+				_classCommon,
+				`size-5 rounded
+				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`,
+				classInput
+			)}
 			{required}
-			{tabindex}
-			use:validateAction={validate
-				? { ...(validate === true ? {} : validate), setValidationResult }
-				: undefined}
-			on:blur
-			on:change
-			on:click
-			on:focus
-			on:input
-			on:keydown
-			on:keyup
-			on:touchstart|passive
-			on:touchend|passive
-			on:touchmove|passive
-			on:touchcancel
-			on:mouseenter
-			on:mouseleave
+			{disabled}
+			{...rest}
 		/>
 	</div>
-	<div class="ml-3 w-full">
+	<div class={twMerge("label-box", _classCommon, "ml-3 w-full", classLabelBox)}>
 		{#if label}
-			<label
-				for={id}
-				class={_labelClass}
-				class:cursor-pointer={!disabled}
-				class:cursor-not-allowed={disabled}
+			<div
+				class={twMerge(
+					"label",
+					_classCommon,
+					"block w-full cursor-pointer",
+					disabled && "cursor-not-allowed",
+					required && "after:content-['*'] after:opacity-40 after:pl-1",
+					_preset.labelBox.label.size[renderSize],
+					classLabel
+				)}
 			>
-				<Thc thc={label} forceAsHtml />
-			</label>
+				{#if isTHCNotEmpty(label)}
+					<Thc thc={label as THC} forceAsHtml />
+				{:else}
+					{@render (label as SnippetWithId)({ id })}
+				{/if}
+			</div>
 		{/if}
 		{#if validation && !validation?.valid}
-			<div transition:slide={{ duration: 150 }} class={_validationMessageClass}>
+			<div
+				transition:slide={{ duration: 150 }}
+				class={twMerge(
+					"validation-box",
+					_classCommon,
+					"text-xs text-input-accent dark:text-input-accent-dark tracking-tight",
+					classValidationBox
+				)}
+			>
 				{@html validation.message}
 			</div>
 		{/if}
-		{#if description || $$slots.description}
-			<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+		{#if description}
 			<div
-				class={_descriptionClass}
-				class:cursor-pointer={!disabled}
-				class:cursor-not-allowed={disabled}
-				on:click={() => !disabled && (checked = !checked)}
+				id={idDesc}
+				class={twMerge(
+					"desc-box",
+					_classCommon,
+					"text-sm opacity-50 cursor-pointer font-normal",
+					disabled && "cursor-not-allowed",
+					classDescBox
+				)}
 			>
-				{#if $$slots.description}
-					<slot name="description" />
-				{:else}
-					<Thc thc={description} forceAsHtml />
-				{/if}
+				{@render snippetOrThc({ id, value: description })}
 			</div>
 		{/if}
 	</div>
-</div>
+</label>

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

@@ -1,65 +1,29 @@
-import { SvelteComponent } from "svelte";
-import type { ValidateOptions } from '../../actions/validate.js';
-import type { THC } from '../Thc/Thc.svelte';
-export interface FieldCheckboxConfigClasses {
-    box?: string;
-    label?: string;
-    input?: string;
-    invalid?: string;
-    validationMessage?: string;
-    description?: string;
+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 {
+    input?: HTMLInputElement;
+    id?: string;
+    checked?: boolean;
+    label?: SnippetWithId | THC;
+    required?: boolean;
+    disabled?: boolean;
+    renderSize?: "sm" | "md" | "lg" | string;
+    description?: SnippetWithId | THC;
+    validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+    class?: string;
+    classInputBox?: string;
+    classInput?: string;
+    classLabelBox?: string;
+    classLabel?: string;
+    classDescBox?: string;
+    classValidationBox?: string;
+    style?: 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?: FieldCheckboxConfigClasses;
-        classBySize?: FieldCheckboxConfigClassesBySize;
-        size?: "sm" | "md" | "lg";
-        id?: string;
-        checked?: boolean;
-        label?: THC;
-        name?: string;
-        description?: THC;
-        tabindex?: number;
-        disabled?: boolean | undefined;
-        readonly?: boolean | undefined;
-        required?: boolean | undefined;
-        validate?: ValidateOptions | true | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        change: Event;
-        click: MouseEvent;
-        focus: FocusEvent;
-        input: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        touchstart: TouchEvent;
-        touchend: TouchEvent;
-        touchmove: TouchEvent;
-        touchcancel: TouchEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        description: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type FieldCheckboxProps = typeof __propDef.props;
-export type FieldCheckboxEvents = typeof __propDef.events;
-export type FieldCheckboxSlots = typeof __propDef.slots;
-export default class FieldCheckbox extends SvelteComponent<FieldCheckboxProps, FieldCheckboxEvents, FieldCheckboxSlots> {
-}
-export {};
+declare const FieldCheckbox: import("svelte").Component<Props, {}, "input" | "checked">;
+type FieldCheckbox = ReturnType<typeof FieldCheckbox>;
+export default FieldCheckbox;

package/dist/components/Input/FieldFile.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { highlightDragover } from "../../actions/highlight-dragover.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;
+		files?: FileList;
+		multiple?: boolean;
+		label?: SnippetWithId | THC;
+		description?: SnippetWithId | THC;
+		class?: string;
+		id?: string;
+		tabindex?: number; // tooShort
+		renderSize?: "sm" | "md" | "lg" | 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;
+		classFileList?: string;
+		//
+		style?: string;
+	}
+
+	let {
+		input = $bindable(),
+		files = $bindable(),
+		multiple,
+		label = "",
+		id = getId(),
+		type = "text",
+		tabindex = 0,
+		description,
+		class: classProp,
+		renderSize,
+		//
+		required = false,
+		disabled = false,
+		//
+		validate,
+		//
+		labelAfter,
+		inputBefore,
+		inputAfter,
+		inputBelow,
+		below,
+		//
+		labelLeft = false,
+		labelLeftWidth = "normal",
+		labelLeftBreakpoint = 480,
+		//
+		classInput,
+		classLabel,
+		classLabelBox,
+		classInputBox,
+		classInputBoxWrap,
+		classDescBox,
+		classBelowBox,
+		classFileList,
+		style,
+		//
+		...rest
+	}: Props = $props();
+
+	let validation: ValidationResult | undefined = $state();
+	const setValidationResult = (res: ValidationResult) => (validation = res);
+
+	// $inspect(files);
+</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}
+>
+	<div class="block w-full">
+		<input
+			type="file"
+			bind:files
+			bind:this={input}
+			{id}
+			class={twMerge(
+				"form-input",
+				"block border-0 w-full !text-sm",
+				"file:rounded file:border-0 file:mr-4 file:bg-neutral-200",
+				"file:px-2 file:py-0.5 file:cursor-pointer file:text-sm",
+				"focus-visible:ring-0 focus:ring-0 focus:leading-0",
+				renderSize,
+				classInput
+			)}
+			use:highlightDragover={() => ({ classes: ["outline-dashed"] })}
+			use:validateAction={() => ({
+				enabled: !!validate,
+				...(typeof validate === "boolean" ? {} : validate),
+				setValidationResult,
+			})}
+			{multiple}
+			{tabindex}
+			{required}
+			{disabled}
+			{...rest}
+		/>
+		{#if (files?.length || 0) > 1}
+			<ul
+				class={twMerge(
+					"px-2.5 pb-2.5 pt-1 text-sm opacity-80",
+					"space-y-1 list-decimal list-inside",
+					classFileList
+				)}
+			>
+				{#each files || [] as f}
+					<li>{f.name}</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+</InputWrap>

package/dist/components/Input/FieldFile.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;
+    files?: FileList;
+    multiple?: boolean;
+    label?: SnippetWithId | THC;
+    description?: SnippetWithId | THC;
+    class?: string;
+    id?: string;
+    tabindex?: number;
+    renderSize?: "sm" | "md" | "lg" | 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;
+    classFileList?: string;
+    style?: string;
+}
+declare const FieldFile: import("svelte").Component<Props, {}, "input" | "files">;
+type FieldFile = ReturnType<typeof FieldFile>;
+export default FieldFile;