@marianmeres/stuic 1.126.0 → 2.0.0-next.2

package/dist/components/Input/FieldRadios.svelte

@@ -1,82 +1,131 @@
-<script context="module">import { createClog } from "@marianmeres/clog";
-import { getId } from "../../utils/get-id.js";
-import { twMerge2 } from "../../utils/tw-merge2.js";
-import XFieldRadioInternal from "./XFieldRadioInternal.svelte";
-const _emptyClasses = () => ({
-  group: "",
-  box: "",
-  label: "",
-  input: "",
-  invalid: "",
-  validationMessage: "",
-  description: ""
-});
-export class FieldRadiosConfig {
-  static class = _emptyClasses();
-  static classBySize = {
-    sm: _emptyClasses(),
-    md: _emptyClasses(),
-    lg: _emptyClasses()
-  };
-}
-</script>
+<script lang="ts">
+	import { slide } from "svelte/transition";
+	import type {
+		ValidateOptions,
+		ValidationResult,
+	} from "../../actions/validate.svelte.js";
+	import { getId } from "../../utils/get-id.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import FieldRadioInternal from "./_internal/FieldRadioInternal.svelte";
+	import type { FieldRadiosOption } from "./types.js";
+
+	interface Props {
+		name?: string;
+		value?: string;
+		tabindex?: number; // tooShort
+		renderSize?: "sm" | "md" | "lg" | string;
+		//
+		options: (string | FieldRadiosOption)[];
+		//
+		required?: boolean;
+		disabled?: boolean;
+		//
+		validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+		//
+		class?: string;
+		classRadioBox?: string;
+		classInputBox?: string;
+		classInput?: string;
+		classLabelBox?: string;
+		classLabel?: string;
+		classDescBox?: string;
+		classValidationBox?: string;
+		//
+		style?: string;
+	}
+
+	let {
+		options,
+		name = getId("name-"),
+		value = $bindable(),
+		tabindex = 0,
+		required,
+		disabled,
+		renderSize = "md",
+		validate,
+		//
+		class: classProp,
+		classRadioBox,
+		classInputBox,
+		classInput,
+		classLabelBox,
+		classLabel,
+		classDescBox,
+		classValidationBox,
+		style,
+	}: Props = $props();
+
+	let _options: FieldRadiosOption[] = $derived(
+		options.map((v) => {
+			if (typeof v === "string") v = { label: v };
+			return v;
+		})
+	);
+	// $inspect(_options);
+
+	//
+	let validation = $state<ValidationResult | undefined>();
+	let invalid = $derived(validation && !validation?.valid);
 
-<script>const clog = createClog("FieldRadio");
-export let options = [];
-let _class = {};
-export { _class as class };
-export let classBySize = {};
-$:
-  if (typeof _class === "string") {
-    _class = { group: _class };
-  }
-export let size = "md";
-export let name = "";
-export let value;
-export let disabled = false;
-export let required = false;
-export let tabindex = 0;
-let _options = [];
-$:
-  _options = options.map((v) => {
-    if (typeof v === "string") {
-      v = { label: v };
-    }
-    return v;
-  });
-$:
-  name ||= getId();
+	//
+	let _classCommon = $derived(
+		[invalid && "invalid", disabled && "disabled", required && "required", renderSize]
+			.filter(Boolean)
+			.join(" ")
+	);
+	// $inspect(value);
 </script>
 
-{#if options.length}
-	<div class={twMerge2(`gap-y-2 grid ${_class.group || ''}`)}>
-		{#each _options as o, i}
-			<XFieldRadioInternal
-				bind:group={value}
-				{name}
-				label={o.label}
-				value={o.value || o.label}
-				description={o.description}
-				class={_class}
-				{classBySize}
-				{disabled}
-				{tabindex}
-				{required}
-				{size}
-				on:blur
-				on:change
-				on:click
-				on:focus
-				on:input
-				on:keydown
-				on:keyup
-				on:touchstart
-				on:touchend
-				on:touchmove
-				on:touchcancel
-				on:mouseenter
-				on:mouseleave
-			/>
-		{/each}
+{#if _options.length}
+	<div class={twMerge("stuic-radios", _classCommon)} {style}>
+		<div
+			class={twMerge(
+				"radios-box",
+				_classCommon,
+				"gap-y-2 grid rounded-md p-2 mb-8",
+				"border border-neutral-300 dark:border-neutral-600",
+				"bg-neutral-100 dark:bg-neutral-700",
+				invalid && "border-input-accent dark:border-input-accent-dark",
+				classProp
+			)}
+		>
+			{#each _options as o, i}
+				<!-- value={o.value || o.label} -->
+				<FieldRadioInternal
+					{name}
+					bind:group={value}
+					label={o.label}
+					value={o.value ?? o.label}
+					description={o.description}
+					{renderSize}
+					{disabled}
+					{tabindex}
+					{required}
+					{validate}
+					{classRadioBox}
+					{classInputBox}
+					{classInput}
+					{classLabelBox}
+					{classLabel}
+					{classDescBox}
+					{classValidationBox}
+					bind:validation
+				/>
+			{/each}
+		</div>
+		{#if validation && !validation?.valid}
+			<div
+				transition:slide={{ duration: 150 }}
+				class={twMerge(
+					"validation-box",
+					_classCommon,
+					`mt-1 px-2 text-xs text-input-accent dark:text-input-accent-dark 
+					tracking-tight`,
+					classValidationBox
+				)}
+			>
+				{@html validation.message}
+			</div>
+		{/if}
 	</div>
 {/if}

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

@@ -1,62 +1,24 @@
-import { SvelteComponent } from "svelte";
-export interface FieldRadiosConfigClasses {
-    group?: string;
-    box?: string;
-    label?: string;
-    input?: string;
-    invalid?: string;
-    validationMessage?: string;
-    description?: string;
+import type { ValidateOptions } from "../../actions/validate.svelte.js";
+import type { FieldRadiosOption } from "./types.js";
+interface Props {
+    name?: string;
+    value?: string;
+    tabindex?: number;
+    renderSize?: "sm" | "md" | "lg" | string;
+    options: (string | FieldRadiosOption)[];
+    required?: boolean;
+    disabled?: boolean;
+    validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+    class?: string;
+    classRadioBox?: string;
+    classInputBox?: string;
+    classInput?: string;
+    classLabelBox?: string;
+    classLabel?: string;
+    classDescBox?: string;
+    classValidationBox?: string;
+    style?: 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 | {
-            label: string;
-            value?: string;
-            description?: string;
-        })[];
-        class?: FieldRadiosConfigClasses;
-        classBySize?: FieldRadiosConfigClassesBySize;
-        size?: "sm" | "md" | "lg";
-        name?: string;
-        value: any;
-        disabled?: boolean;
-        required?: boolean;
-        tabindex?: number;
-    };
-    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: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type FieldRadiosProps = typeof __propDef.props;
-export type FieldRadiosEvents = typeof __propDef.events;
-export type FieldRadiosSlots = typeof __propDef.slots;
-export default class FieldRadios extends SvelteComponent<FieldRadiosProps, FieldRadiosEvents, FieldRadiosSlots> {
-}
-export {};
+declare const FieldRadios: import("svelte").Component<Props, {}, "value">;
+type FieldRadios = ReturnType<typeof FieldRadios>;
+export default FieldRadios;