@marianmeres/stuic 1.126.0 → 2.0.0-next.3

package/dist/components/Input/FieldSelect.svelte

@@ -1,245 +1,166 @@
-<script context="module">import { createClog } from "@marianmeres/clog";
-import { createEventDispatcher } from "svelte";
-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: "",
-  wrap: "",
-  label: "",
-  input: "",
-  invalid: "",
-  validationMessage: "",
-  description: "",
-  below: "",
-  asterix: ""
-});
-const _PRESET = {
-  box: "mb-4 grid",
-  // gap-4
-  wrap: `
-            rounded-md border border-neutral-300 dark:border-neutral-600
-            bg-neutral-100 dark:bg-neutral-700
-            focus-within:border-stuic-primary
-            focus-within:ring-4
-            focus-within:ring-stuic-primary
-            focus-within:ring-opacity-20
-		`,
-  label: `block flex-1 px-2 mb-1`,
-  input: `
-			rounded-md border-0 block w-full flex-1
-			bg-neutral-100 dark:bg-neutral-700
-			tracking-tight
-			focus:outline-0 focus-visible:ring-0
-			placeholder:text-neutral-950/35 dark:placeholder:text-neutral-50/35
-			placeholder:tracking-tight
-		`,
-  invalid: `border-stuic-primary`,
-  validationMessage: `my-1 text-xs text-stuic-primary px-2 tracking-tight`,
-  description: `mx-2 mt-1 text-sm opacity-50`,
-  below: `mx-2 my-1`,
-  asterix: `after:content-['*'] after:opacity-30 after:pl-1`
-};
-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"
-  }
-};
-export class FieldSelectConfig {
-  //
-  static class = _emptyClasses();
-  static classBySize = {
-    sm: _emptyClasses(),
-    md: _emptyClasses(),
-    lg: _emptyClasses()
-  };
-  static labelLeft = false;
-  static labelLeftWidth = "normal";
-  //
-  static _preset = _PRESET;
-  static _presetBySize = _PRESET_BY_SIZE;
-}
-</script>
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLSelectAttributes } from "svelte/elements";
+	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 type { FieldSelectOption } from "./types.js";
+
+	type SnippetWithId = Snippet<[{ id: string }]>;
+
+	interface Props extends HTMLSelectAttributes {
+		input?: HTMLSelectElement;
+		value?: string | number; // badInput
+		label?: SnippetWithId | THC;
+		description?: SnippetWithId | THC;
+		class?: string;
+		id?: string;
+		tabindex?: number; // tooShort
+		renderSize?: "sm" | "md" | "lg" | string;
+		//
+		options: (string | FieldSelectOption)[];
+		//
+		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",
+		//
+		options = [],
+		//
+		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();
 
-<script>const clog = createClog("FieldSelect");
-const dispatch = createEventDispatcher();
-export let options = [];
-let _class = {};
-export { _class as class };
-export let classBySize = {};
-export let size = "md";
-export let id = getId();
-export let value;
-export let label = "";
-export let name = "";
-export let tabindex = 0;
-export let description = "";
-export let disabled = false;
-export let required = false;
-export let autofocus = void 0;
-export let validate = void 0;
-export let showAsterixOnRequired = true;
-export let labelLeft = FieldSelectConfig.labelLeft;
-export let labelLeftWidth = FieldSelectConfig.labelLeftWidth;
-let validation;
-const setValidationResult = (res) => validation = res;
-const _normalizeAndGroupOptions = (opts) => {
-  const groupped = /* @__PURE__ */ new Map();
-  opts.forEach((v) => {
-    if (typeof v === "string")
-      v = { label: v };
-    if (v.value === void 0)
-      v.value = v.label;
-    const optgLabel = v.optgroup || "";
-    if (!groupped.has(optgLabel))
-      groupped.set(optgLabel, []);
-    const optgroup = groupped.get(optgLabel);
-    optgroup.push(v);
-  });
-  return groupped;
-};
-let _options;
-$:
-  _options = _normalizeAndGroupOptions(options);
-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] || ""
-].join(" ");
-$:
-  _boxClass = twMerge2(_collectClasses("box"));
-$:
-  _labelClass = twMerge2(
-    _collectClasses(
-      "label",
-      showAsterixOnRequired && required ? _collectClasses("asterix") : ""
-    )
-  );
-$:
-  _wrapClass = twMerge2(
-    _collectClasses(
-      "wrap",
-      validation && !validation.valid ? _collectClasses("invalid") : ""
-    )
-  );
-$:
-  _inputClass = twMerge2("form-input", _collectClasses("input"));
-$:
-  _validationMessageClass = twMerge2(_collectClasses("validationMessage"));
-$:
-  _descriptionClass = twMerge2(_collectClasses("description"));
-$:
-  _belowClass = twMerge2(_collectClasses("below"));
+	//
+	let validation: ValidationResult | undefined = $state();
+	const setValidationResult = (res: ValidationResult) => (validation = res);
+
+	const _normalizeAndGroupOptions = (opts: (string | FieldSelectOption)[]) => {
+		const groupped = new Map<string, FieldSelectOption[]>();
+		opts.forEach((v) => {
+			if (typeof v === "string") v = { label: v };
+			if (v.value === undefined) v.value = v.label;
+			const optgLabel = v.optgroup || "";
+			if (!groupped.has(optgLabel)) groupped.set(optgLabel, []);
+			const optgroup = groupped.get(optgLabel);
+			optgroup!.push(v);
+		});
+		return groupped;
+	};
+
+	let _options = $derived(_normalizeAndGroupOptions(options));
 </script>
 
-<div
-	class={_boxClass}
-	class:grid-cols-4={labelLeft && labelLeftWidth === 'normal'}
-	class:grid-cols-3={labelLeft && labelLeftWidth === 'wide'}
+<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="flex"
-		class:items-end={!labelLeft}
-		class:items-start={labelLeft}
-		class:mt-1={labelLeft}
+	<select
+		bind:value
+		bind:this={input}
+		{id}
+		class={twMerge("form-input", renderSize, classInput)}
+		use:validateAction={() => ({
+			enabled: !!validate,
+			...(typeof validate === "boolean" ? {} : validate),
+			setValidationResult,
+		})}
+		{tabindex}
+		{required}
+		{disabled}
+		{...rest}
 	>
-		{#if label || $$slots.label}
-			<label for={id} class={_labelClass}>
-				{#if $$slots.label}
-					<slot name="label" />
-				{:else}
-					<Thc thc={label} forceAsHtml />
-				{/if}
-			</label>
-		{/if}
-		<slot name="right_of_label" />
-	</div>
-	<div
-		class:col-span-3={labelLeft && labelLeftWidth === 'normal'}
-		class:col-span-2={labelLeft && labelLeftWidth === 'wide'}
-	>
-		<div
-			class={_wrapClass}
-			class:cursor-not-allowed={disabled}
-			class:opacity-50={disabled}
-		>
-			<div class="flex">
-				<slot name="input_before" {id} />
-				<select
-					class={_inputClass}
-					bind:value
-					bind:this={_inputEl}
-					{id}
-					{disabled}
-					{required}
-					{tabindex}
-					{autofocus}
-					{name}
-					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:touchcancel
-					on:mouseenter
-					on:mouseleave
-				>
-					{#each _options as [_optgroup, _opts]}
-						{#if _optgroup}
-							<optgroup label={_optgroup}>
-								{#each _opts as o}
-									<option value={o.value}>{o.label}</option>
-								{/each}
-							</optgroup>
-						{:else}
-							{#each _opts as o}
-								<option value={o.value}>{o.label}</option>
-							{/each}
-						{/if}
+		{#each _options as [_optgroup, _opts]}
+			{#if _optgroup}
+				<optgroup label={_optgroup}>
+					{#each _opts as o}
+						<option value={o.value}>{o.label}</option>
 					{/each}
-				</select>
-
-				<slot name="input_after" {id} />
-			</div>
-		</div>
-		{#if validation && !validation?.valid}
-			<div transition:slide={{ duration: 150 }} class={_validationMessageClass}>
-				{@html validation.message}
-			</div>
-		{/if}
-		{#if description}
-			<div class={_descriptionClass}>
-				<Thc thc={description} forceAsHtml />
-			</div>
-		{/if}
-		{#if $$slots.below}
-			<div class={_belowClass}><slot name="below" {id} /></div>
-		{/if}
-	</div>
-</div>
+				</optgroup>
+			{:else}
+				{#each _opts as o}
+					<option value={o.value}>{o.label}</option>
+				{/each}
+			{/if}
+		{/each}
+	</select>
+</InputWrap>

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

@@ -1,89 +1,41 @@
-import { SvelteComponent } from "svelte";
-import type { ValidateOptions } from '../../actions/validate.js';
-import type { THC } from '../Thc/Thc.svelte';
-export interface FieldSelectConfigClasses {
-    box?: string;
-    wrap?: string;
-    label?: string;
-    input?: string;
-    invalid?: string;
-    validationMessage?: string;
-    description?: string;
-    below?: string;
-    asterix?: string;
+import type { Snippet } from "svelte";
+import type { HTMLSelectAttributes } from "svelte/elements";
+import { type ValidateOptions } from "../../actions/validate.svelte.js";
+import type { THC } from "../Thc/Thc.svelte";
+import type { FieldSelectOption } from "./types.js";
+type SnippetWithId = Snippet<[{
+    id: string;
+}]>;
+interface Props extends HTMLSelectAttributes {
+    input?: HTMLSelectElement;
+    value?: string | number;
+    label?: SnippetWithId | THC;
+    description?: SnippetWithId | THC;
+    class?: string;
+    id?: string;
+    tabindex?: number;
+    renderSize?: "sm" | "md" | "lg" | string;
+    options: (string | FieldSelectOption)[];
+    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;
 }
-export interface FieldSelectConfigClassesBySize {
-    sm?: FieldSelectConfigClasses;
-    md?: FieldSelectConfigClasses;
-    lg?: FieldSelectConfigClasses;
-}
-export declare class FieldSelectConfig {
-    static class: FieldSelectConfigClasses;
-    static classBySize: FieldSelectConfigClassesBySize;
-    static labelLeft: boolean;
-    static labelLeftWidth: 'normal' | 'wide';
-    static readonly _preset: FieldSelectConfigClasses;
-    static readonly _presetBySize: FieldSelectConfigClassesBySize;
-}
-declare const __propDef: {
-    props: {
-        options?: (string | {
-            label: string;
-            value?: string;
-            optgroup?: string;
-        })[];
-        class?: FieldSelectConfigClasses;
-        classBySize?: FieldSelectConfigClassesBySize;
-        size?: "sm" | "md" | "lg";
-        id?: string;
-        value: any;
-        label?: THC;
-        name?: string;
-        tabindex?: number;
-        description?: THC;
-        disabled?: boolean;
-        required?: boolean;
-        autofocus?: true | undefined;
-        validate?: ValidateOptions | true | undefined;
-        showAsterixOnRequired?: boolean;
-        labelLeft?: boolean;
-        labelLeftWidth?: "normal" | "wide";
-    };
-    events: {
-        blur: FocusEvent;
-        change: Event;
-        click: MouseEvent;
-        focus: FocusEvent;
-        input: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        touchstart: TouchEvent;
-        touchend: TouchEvent;
-        touchcancel: TouchEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        label: {};
-        right_of_label: {};
-        input_before: {
-            id: string;
-        };
-        input_after: {
-            id: string;
-        };
-        below: {
-            id: string;
-        };
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type FieldSelectProps = typeof __propDef.props;
-export type FieldSelectEvents = typeof __propDef.events;
-export type FieldSelectSlots = typeof __propDef.slots;
-export default class FieldSelect extends SvelteComponent<FieldSelectProps, FieldSelectEvents, FieldSelectSlots> {
-}
-export {};
+declare const FieldSelect: import("svelte").Component<Props, {}, "value" | "input">;
+type FieldSelect = ReturnType<typeof FieldSelect>;
+export default FieldSelect;

package/dist/components/Input/FieldSwitch.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import {
+		type ValidateOptions,
+		type ValidationResult,
+	} from "../../actions/validate.svelte.js";
+	import { getId } from "../../utils/get-id.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Switch from "../Switch/Switch.svelte";
+	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;
+		checked?: boolean;
+		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(),
+		checked = $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 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={twMerge(
+		"border-0 focus-within:border-0 focus-within:dark:border-0 focus-within:ring-0",
+		"bg-transparent dark:bg-transparent",
+		classInputBoxWrap
+	)}
+	{classDescBox}
+	{classBelowBox}
+	{validation}
+	{style}
+>
+	<Switch bind:checked {name} {required} {disabled} {validate} {setValidationResult} />
+</InputWrap>