sveltacular 1.0.18 → 1.0.21

package/dist/forms/money-box/money-box.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { uniqueId, type FormFieldSizeOptions } from '../../index.js';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
+	import FormInputWrapper from '../form-input-wrapper';
 	import { untrack } from 'svelte';
 
 	const id = uniqueId();
@@ -17,11 +18,17 @@
 		min = 0,
 		max = null as number | null,
 		required = false,
+		nullable = false,
 		helperText = undefined as string | undefined,
 		feedback = undefined as FormFieldFeedback | undefined,
 		disabled = false,
 		onChange = undefined,
-		label = undefined
+		onCheckChanged = undefined,
+		onInput = undefined,
+		onFocus = undefined,
+		onBlur = undefined,
+		label = undefined,
+		nullText = ''
 	}: {
 		value?: number | null;
 		prefix?: string;
@@ -34,11 +41,17 @@
 		min?: number;
 		max?: number | null;
 		required?: boolean;
+		nullable?: boolean;
 		helperText?: string;
 		feedback?: FormFieldFeedback;
 		disabled?: boolean;
 		onChange?: ((value: number | null) => void) | undefined;
+		onCheckChanged?: ((isChecked: boolean) => void) | undefined;
+		onInput?: ((value: number | null) => void) | undefined;
+		onFocus?: ((e: FocusEvent) => void) | undefined;
+		onBlur?: ((e: FocusEvent) => void) | undefined;
 		label?: string;
+		nullText?: string;
 	} = $props();
 
 	let isValueInCents = $derived(units === 'cents');
@@ -181,7 +194,7 @@
 		updateLastState(e);
 	};
 
-	const onInput = (e: Event) => {
+	const handleInputEvent = (e: Event) => {
 		const target = getTargetProperties(e);
 		// If they pasted in something non-numeric, revert to last state
 		if (!isNumericString(target.value)) {
@@ -224,17 +237,65 @@
 		// Cents should be padded to 2 digits, so that "5" becomes "05"
 		cents = String(centValue).padStart(2, '0');
 		onChange?.(value);
+		onInput?.(value);
 	};
 
 	let hasError = $derived(!!feedback?.isError);
+
+	// Track whether the nullable checkbox is checked (i.e., whether field has a value)
+	let isChecked = $state(untrack(() => value !== null && value !== undefined));
+
+	// Remember the last non-null value so we can restore it when re-checking
+	let lastValue = $state<number | undefined>(undefined);
+
+	// Derive the actual disabled state: disabled prop OR (nullable and unchecked)
+	let inputDisabled = $derived(disabled || (nullable && !isChecked));
+
+	let showInput = $derived(!nullable || isChecked);
+
+	let effectiveNullText = $derived(nullText || placeholder || '--');
+
+	const checkChanged = () => {
+		if (nullable) {
+			if (isChecked) {
+				// Restore last value if available, otherwise use 0
+				value = lastValue !== undefined ? lastValue : 0;
+			} else {
+				// Store current value before clearing
+				if (value !== null && value !== undefined) {
+					lastValue = value;
+				}
+				value = null;
+			}
+		}
+		onCheckChanged?.(isChecked);
+	};
+
+	$effect(() => {
+		if (value === null || value === undefined) {
+			// Use untrack to prevent writes to isChecked/value from triggering this effect again
+			untrack(() => {
+				if (nullable) isChecked = false;
+			});
+		} else {
+			// Initialize lastValue if we have an initial value
+			if (lastValue === undefined) {
+				lastValue = value;
+			}
+		}
+	});
 </script>
 
 <FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
-	<div class="input {currency}" class:allowCents class:disabled class:error={hasError} {id}>
-		{#if prefix}
-			<span class="prefix">{prefix}</span>
-		{/if}
-
+	<FormInputWrapper
+		{disabled}
+		error={hasError}
+		{prefix}
+		{suffix}
+		{nullable}
+		nullText={effectiveNullText}
+		onCheckChanged={checkChanged}
+	>
 		<input
 			class="dollars"
 			{placeholder}
@@ -242,16 +303,22 @@
 			type="text"
 			onkeypress={onKeyPress}
 			onkeyup={onKeyUp}
-			oninput={onInput}
+			oninput={handleInputEvent}
 			onchange={handleChange}
 			onmouseup={onSaveStateEvent}
-			onfocus={onSaveStateEvent}
-			onblur={onSaveStateEvent}
+			onfocus={(e) => {
+				onSaveStateEvent(e);
+				onFocus?.(e);
+			}}
+			onblur={(e) => {
+				onSaveStateEvent(e);
+				onBlur?.(e);
+			}}
 			name="dollars"
 			id="{id}-dollars"
 			inputmode="numeric"
 			{required}
-			{disabled}
+			disabled={inputDisabled}
 		/>
 		{#if allowCents}
 			<span class="separator">.</span>
@@ -262,51 +329,28 @@
 				class="cents"
 				onkeypress={onKeyPress}
 				onkeyup={onKeyUp}
-				oninput={onInput}
+				oninput={handleInputEvent}
 				onchange={handleChange}
 				onmouseup={onSaveStateEvent}
-				onfocus={onSaveStateEvent}
-				onblur={onSaveStateEvent}
+				onfocus={(e) => {
+					onSaveStateEvent(e);
+					onFocus?.(e);
+				}}
+				onblur={(e) => {
+					onSaveStateEvent(e);
+					onBlur?.(e);
+				}}
 				name="cents"
 				id="{id}-cents"
 				inputmode="numeric"
 				{required}
-				{disabled}
+				disabled={inputDisabled}
 			/>
 		{/if}
-
-		{#if suffix}
-			<span class="suffix">{suffix}</span>
-		{/if}
-	</div>
+	</FormInputWrapper>
 </FormField>
 
-<style>.input {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  border-radius: var(--radius-md);
-  border: var(--border-thin) solid var(--form-input-border);
-  background-color: var(--form-input-bg);
-  color: var(--form-input-fg);
-  font-size: var(--font-md);
-  font-weight: 500;
-  line-height: 2rem;
-  transition: background-color var(--transition-base) var(--ease-in-out), border-color var(--transition-base) var(--ease-in-out), color var(--transition-base) var(--ease-in-out), fill var(--transition-base) var(--ease-in-out), stroke var(--transition-base) var(--ease-in-out);
-  user-select: none;
-  white-space: nowrap;
-}
-.input.disabled {
-  opacity: 0.5;
-}
-.input.error {
-  border-color: var(--color-error, #dc3545);
-}
-.input input {
+<style>input {
   background-color: transparent;
   border: none;
   box-sizing: border-box;
@@ -316,31 +360,26 @@
   padding-left: var(--spacing-base);
   margin: 0;
 }
-.input input:focus {
+input:focus {
   outline: none;
 }
-.input .dollars {
+input:focus-visible {
+  outline: 2px solid var(--focus-ring, #007bff);
+  outline-offset: 2px;
+}
+input:disabled {
+  cursor: not-allowed;
+}
+
+.dollars {
   flex-grow: 1;
 }
-.input .separator {
+
+.separator {
   width: var(--spacing-base);
   text-align: center;
 }
-.input .cents {
+
+.cents {
   width: 4rem;
-}
-.input .prefix,
-.input .suffix {
-  font-size: var(--font-md);
-  line-height: 2rem;
-  padding-left: var(--spacing-base);
-  padding-right: var(--spacing-base);
-  background-color: var(--form-input-accent-bg);
-  color: var(--form-input-accent-fg);
-}
-.input .prefix {
-  border-right: var(--border-thin) solid var(--form-input-border);
-}
-.input .suffix {
-  border-left: var(--border-thin) solid var(--form-input-border);
 }</style>

package/dist/forms/money-box/money-box.svelte.d.ts

@@ -12,11 +12,17 @@ type $$ComponentProps = {
     min?: number;
     max?: number | null;
     required?: boolean;
+    nullable?: boolean;
     helperText?: string;
     feedback?: FormFieldFeedback;
     disabled?: boolean;
     onChange?: ((value: number | null) => void) | undefined;
+    onCheckChanged?: ((isChecked: boolean) => void) | undefined;
+    onInput?: ((value: number | null) => void) | undefined;
+    onFocus?: ((e: FocusEvent) => void) | undefined;
+    onBlur?: ((e: FocusEvent) => void) | undefined;
     label?: string;
+    nullText?: string;
 };
 declare const MoneyBox: import("svelte").Component<$$ComponentProps, {}, "value">;
 type MoneyBox = ReturnType<typeof MoneyBox>;

package/dist/forms/number-box/number-box.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { roundToDecimals } from '../../helpers/round-to-decimals.js';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
+	import FormInputWrapper from '../form-input-wrapper';
 	import type { FormFieldSizeOptions } from '../../types/form.js';
 	const id = uniqueId();
 
@@ -18,13 +20,19 @@
 		prefix = null as string | null,
 		suffix = null as string | null,
 		step = 1,
+		nullable = false,
 		onChange = undefined,
+		onCheckChanged = undefined,
+		onInput = undefined,
+		onFocus = undefined,
+		onBlur = undefined,
 		label = undefined,
 		helperText = undefined,
 		feedback = undefined,
 		disabled = false,
 		required = false,
-		readonly = false
+		readonly = false,
+		nullText = ''
 	}: {
 		value?: number | null;
 		placeholder?: string;
@@ -36,30 +44,91 @@
 		prefix?: string | null;
 		suffix?: string | null;
 		step?: number;
+		nullable?: boolean;
 		onChange?: ((value: number | null) => void) | undefined;
+		onCheckChanged?: ((isChecked: boolean) => void) | undefined;
+		onInput?: ((value: number | null) => void) | undefined;
+		onFocus?: ((e: FocusEvent) => void) | undefined;
+		onBlur?: ((e: FocusEvent) => void) | undefined;
 		label?: string;
 		helperText?: string;
 		feedback?: FormFieldFeedback;
 		disabled?: boolean;
 		required?: boolean;
 		readonly?: boolean;
+		nullText?: string;
 	} = $props();
 
+	// Track whether the nullable checkbox is checked (i.e., whether field has a value)
+	let isChecked = $state(untrack(() => value !== null && value !== undefined));
+
+	// Remember the last non-null value so we can restore it when re-checking
+	let lastValue = $state<number | undefined>(undefined);
+
+	// Derive the actual disabled state: disabled prop OR (nullable and unchecked)
+	let inputDisabled = $derived(disabled || (nullable && !isChecked));
+
+	let showInput = $derived(!nullable || isChecked);
+
+	const checkChanged = () => {
+		if (nullable) {
+			if (isChecked) {
+				// Restore last value if available, otherwise use 0
+				value = lastValue !== undefined ? lastValue : 0;
+			} else {
+				// Store current value before clearing
+				if (value !== null && value !== undefined) {
+					lastValue = value;
+				}
+				value = null;
+			}
+		}
+		onCheckChanged?.(isChecked);
+		handleInputChange();
+	};
+
+	const handleInputChange = () => {
+		const currentValue = !nullable || isChecked ? value : null;
+		// Remember the value if it's not null
+		if (isChecked && value !== null && value !== undefined) {
+			lastValue = value;
+		}
+		onChange?.(currentValue);
+		onInput?.(currentValue);
+	};
+
 	const valueChanged = () => {
 		if (value === null || value === undefined) return;
 		if (value < min) value = min;
 		if (value > max) value = max;
 		value = roundToDecimals(value, decimals);
-		onChange?.(value);
+		handleInputChange();
 	};
 
-	const onInput = (e: Event) => {
+	const handleInput = (e: Event) => {
 		const input = e.target as HTMLInputElement;
 		const newValue = parseFloat(input.value);
 		if (isNaN(newValue)) return;
 		value = newValue;
+		handleInputChange();
 	};
 
+	$effect(() => {
+		if (value === null || value === undefined) {
+			// Use untrack to prevent writes to isChecked/value from triggering this effect again
+			untrack(() => {
+				if (nullable) isChecked = false;
+			});
+		} else {
+			// Initialize lastValue if we have an initial value
+			if (lastValue === undefined) {
+				lastValue = value;
+			}
+		}
+	});
+
+	let effectiveNullText = $derived(nullText || placeholder || '--');
+
 	// Don't allow certain characters to be typed into the input
 	const onKeyPress = (e: KeyboardEvent) => {
 		const isNumber = !isNaN(Number(e.key));
@@ -77,11 +146,14 @@
 </script>
 
 <FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
-	<div class="input {type}">
-		{#if prefix}
-			<span class="prefix">{prefix}</span>
-		{/if}
-
+	<FormInputWrapper
+		{disabled}
+		prefix={prefix || undefined}
+		suffix={suffix || undefined}
+		{nullable}
+		nullText={effectiveNullText}
+		onCheckChanged={checkChanged}
+	>
 		<input
 			{id}
 			{placeholder}
@@ -90,62 +162,34 @@
 			{step}
 			{min}
 			{max}
-			{disabled}
+			disabled={inputDisabled}
 			{readonly}
 			{required}
 			onchange={valueChanged}
-			oninput={onInput}
+			oninput={handleInput}
 			onkeypress={onKeyPress}
+			onfocus={onFocus}
+			onblur={onBlur}
 		/>
-
-		{#if suffix}
-			<span class="suffix">{suffix}</span>
-		{/if}
-	</div>
+	</FormInputWrapper>
 </FormField>
 
-<style>.input {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  border-radius: var(--radius-md);
-  border: var(--border-thin) solid var(--form-input-border);
-  background-color: var(--form-input-bg);
-  color: var(--form-input-fg);
-  font-size: var(--font-md);
-  font-weight: 500;
-  line-height: 2rem;
-  transition: background-color var(--transition-base) var(--ease-in-out), border-color var(--transition-base) var(--ease-in-out), color var(--transition-base) var(--ease-in-out), fill var(--transition-base) var(--ease-in-out), stroke var(--transition-base) var(--ease-in-out);
-  user-select: none;
-  white-space: nowrap;
-}
-.input input {
+<style>input {
   background-color: transparent;
   border: none;
   line-height: 2rem;
   font-size: var(--font-md);
   width: 100%;
   flex-grow: 1;
-  padding-left: var(--spacing-base);
+  padding: 0 0 0 var(--spacing-base);
 }
-.input input:focus {
+input:focus {
   outline: none;
 }
-.input .prefix,
-.input .suffix {
-  font-size: var(--font-md);
-  line-height: 2rem;
-  padding-left: var(--spacing-base);
-  padding-right: var(--spacing-base);
-  background-color: var(--form-input-accent-bg);
-  color: var(--form-input-accent-fg);
-}
-.input .prefix {
-  border-right: var(--border-thin) solid var(--form-input-border);
+input:focus-visible {
+  outline: 2px solid var(--focus-ring, #007bff);
+  outline-offset: 2px;
 }
-.input .suffix {
-  border-left: var(--border-thin) solid var(--form-input-border);
+input:disabled {
+  cursor: not-allowed;
 }</style>

package/dist/forms/number-box/number-box.svelte.d.ts

@@ -12,13 +12,19 @@ type $$ComponentProps = {
     prefix?: string | null;
     suffix?: string | null;
     step?: number;
+    nullable?: boolean;
     onChange?: ((value: number | null) => void) | undefined;
+    onCheckChanged?: ((isChecked: boolean) => void) | undefined;
+    onInput?: ((value: number | null) => void) | undefined;
+    onFocus?: ((e: FocusEvent) => void) | undefined;
+    onBlur?: ((e: FocusEvent) => void) | undefined;
     label?: string;
     helperText?: string;
     feedback?: FormFieldFeedback;
     disabled?: boolean;
     required?: boolean;
     readonly?: boolean;
+    nullText?: string;
 };
 declare const NumberBox: import("svelte").Component<$$ComponentProps, {}, "value">;
 type NumberBox = ReturnType<typeof NumberBox>;

package/dist/forms/number-range-box/number-range-box.svelte

@@ -2,6 +2,7 @@
 	import { roundToDecimals } from '../../helpers/round-to-decimals.js';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
+	import FormInputWrapper from '../form-input-wrapper';
 	import type { FormFieldSizeOptions } from '../../types/form.js';
 
 	const minId = uniqueId();
@@ -117,10 +118,12 @@
 <FormField {size} {label} id={minId} {required} {disabled} {helperText} {feedback}>
 	<div class="number-range-inputs">
 		<div class="input-group">
-			<div class="input {disabled ? 'disabled' : ''}" class:error={hasError}>
-				{#if prefix}
-					<span class="prefix">{prefix}</span>
-				{/if}
+			<FormInputWrapper
+				{disabled}
+				error={hasError}
+				prefix={prefix || undefined}
+				suffix={suffix || undefined}
+			>
 				<input
 					id={minId}
 					type="number"
@@ -135,16 +138,15 @@
 					{required}
 					{disabled}
 				/>
-				{#if suffix}
-					<span class="suffix">{suffix}</span>
-				{/if}
-			</div>
+			</FormInputWrapper>
 		</div>
 		<div class="input-group">
-			<div class="input {disabled ? 'disabled' : ''}" class:error={hasError}>
-				{#if prefix}
-					<span class="prefix">{prefix}</span>
-				{/if}
+			<FormInputWrapper
+				{disabled}
+				error={hasError}
+				prefix={prefix || undefined}
+				suffix={suffix || undefined}
+			>
 				<input
 					id={maxId}
 					type="number"
@@ -159,10 +161,7 @@
 					{required}
 					{disabled}
 				/>
-				{#if suffix}
-					<span class="suffix">{suffix}</span>
-				{/if}
-			</div>
+			</FormInputWrapper>
 		</div>
 	</div>
 </FormField>
@@ -177,31 +176,7 @@
   flex: 1;
 }
 
-.input {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  border-radius: var(--radius-md);
-  border: var(--border-thin) solid var(--form-input-border);
-  background-color: var(--form-input-bg);
-  color: var(--form-input-fg);
-  font-size: var(--font-md);
-  font-weight: 500;
-  line-height: 2rem;
-  transition: background-color var(--transition-base) var(--ease-in-out), border-color var(--transition-base) var(--ease-in-out), color var(--transition-base) var(--ease-in-out), fill var(--transition-base) var(--ease-in-out), stroke var(--transition-base) var(--ease-in-out);
-  user-select: none;
-  white-space: nowrap;
-}
-.input.disabled {
-  opacity: 0.5;
-}
-.input.error {
-  border-color: var(--color-error, #dc3545);
-}
-.input input {
+input {
   background-color: transparent;
   border: none;
   line-height: 2rem;
@@ -210,24 +185,13 @@
   flex-grow: 1;
   padding-left: var(--spacing-base);
 }
-.input input:focus {
+input:focus {
   outline: none;
 }
-.input input::placeholder {
-  color: var(--form-input-placeholder);
-}
-.input .prefix,
-.input .suffix {
-  font-size: var(--font-md);
-  line-height: 2rem;
-  padding-left: var(--spacing-base);
-  padding-right: var(--spacing-base);
-  background-color: var(--form-input-accent-bg);
-  color: var(--form-input-accent-fg);
-}
-.input .prefix {
-  border-right: var(--border-thin) solid var(--form-input-border);
+input:focus-visible {
+  outline: 2px solid var(--focus-ring, #007bff);
+  outline-offset: 2px;
 }
-.input .suffix {
-  border-left: var(--border-thin) solid var(--form-input-border);
+input:disabled {
+  cursor: not-allowed;
 }</style>