sveltacular 0.0.77 → 1.0.1

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

@@ -1,169 +1,215 @@
-<script>import { uniqueId } from "../../index.js";
-import { createEventDispatcher } from "svelte";
-import FormField from "../form-field.svelte";
-import FormLabel from "../form-label.svelte";
-const id = uniqueId();
-const dipatch = createEventDispatcher();
-export let value;
-export let prefix = "$";
-export let suffix = "";
-export let currency = "USD";
-export let allowCents = true;
-export let placeholder = "";
-export let size = "full";
-export let units = "ones";
-export let min = 0;
-export let max = null;
-const getDollarsFromValue = () => {
-  if (!value) return "0";
-  if (isValueInCents) return String(Math.abs(Math.floor(value / 100)));
-  return String(Math.abs(Math.floor(value)));
-};
-const getCentsFromValue = () => {
-  if (!value) return "00";
-  if (isValueInCents) return String(Math.abs(Math.round(value % 100))).padStart(2, "0");
-  return String(Math.abs(Math.round(value % 1 * 100))).padStart(2, "0");
-};
-let isValueInCents = units === "cents";
-const fieldOrder = ["dollars", "cents"];
-let dollars = getDollarsFromValue();
-let cents = getCentsFromValue();
-let lastState = [
-  { value: String(dollars), selectionStart: 0, selectionEnd: 0 },
-  { value: String(cents), selectionStart: 0, selectionEnd: 0 }
-];
-$: if (value !== null && value >= 0) {
-  dollars = getDollarsFromValue();
-  cents = getCentsFromValue();
-}
-const getTargetProperties = (e) => {
-  const target = e.target;
-  const name = target.getAttribute("name");
-  const index = fieldOrder.indexOf(name ?? "") || 0;
-  const nextName = index < fieldOrder.length - 1 ? fieldOrder[index + 1] : null;
-  const prevName = index > 0 ? fieldOrder[index - 1] : null;
-  const selection = [target.selectionStart ?? 0, target.selectionEnd ?? 0];
-  const key = e instanceof KeyboardEvent ? e.key : "";
-  const isNumber = !isNaN(Number(key));
-  const isDecimal = key === ".";
-  const isBackspace = key === "Backspace";
-  const isAllowed = isNumber || isDecimal || ["Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(key);
-  return {
-    element: target,
-    name,
-    index,
-    selectionStart: selection[0],
-    selectionEnd: selection[1],
-    isHighligted: selection[0] !== selection[1],
-    key,
-    isNumber,
-    isDecimal,
-    isBackspace,
-    isAllowed,
-    lastState: lastState[index],
-    value: target.value,
-    next: nextName ? document.getElementById(`${id}-${nextName}`) : null,
-    previous: prevName ? document.getElementById(`${id}-${prevName}`) : null
-  };
-};
-const focusAndHighlightText = (target) => {
-  target.focus();
-  target.setSelectionRange(0, target.value.length);
-};
-const updateLastState = (e) => {
-  const target = getTargetProperties(e);
-  lastState[target.index] = {
-    value: target.value,
-    selectionStart: target.selectionStart,
-    selectionEnd: target.selectionEnd
-  };
-};
-const isNumericString = (value2) => {
-  return !isNaN(Number(value2));
-};
-const moveExtraCentsToDollars = (centsValue, append = true) => {
-  if (centsValue.length > 2 && isNumericString(centsValue) && Number(centsValue) > 0) {
-    const whole = centsValue.substring(0, centsValue.length - 2);
-    const decimal = centsValue.substring(centsValue.length - 2);
-    dollars = append ? `${dollars}${whole}` : whole;
-    cents = decimal;
-  }
-};
-const onKeyPress = (e) => {
-  const target = getTargetProperties(e);
-  if (!target.isAllowed) return e.preventDefault();
-  if (target.isDecimal) {
-    e.preventDefault();
-    if (target.next && allowCents) focusAndHighlightText(target.next);
-    return;
-  }
-  ;
-  if (target.name === "cents" && target.value.length >= 2 && !target.isHighligted) {
-    if (target.isNumber) moveExtraCentsToDollars(`${target.value}${e.key}`);
-    return e.preventDefault();
-  }
-  updateLastState(e);
-};
-const onKeyUp = (e) => {
-  const target = getTargetProperties(e);
-  if (target.key === "ArrowLeft" && !target.isHighligted && target.previous && target.lastState.selectionStart === 0) {
-    const preservedValue = String(target.previous.value);
-    focusAndHighlightText(target.previous);
-    target.previous.value = preservedValue;
-    return e.preventDefault();
-  }
-  if (target.key === "ArrowRight" && !target.isHighligted && target.next && target.lastState.selectionStart === target.value.length) {
-    focusAndHighlightText(target.next);
-    return e.preventDefault();
-  }
-  if (target.isBackspace) {
-    if (target.lastState.value.length === 0 && target.previous) {
-      target.previous.focus();
-      e.preventDefault();
-    }
-  }
-  updateLastState(e);
-};
-const onInput = (e) => {
-  const target = getTargetProperties(e);
-  if (!isNumericString(target.value)) {
-    target.element.value = target.lastState.value;
-    return e.preventDefault();
-  }
-  if (target.value.includes("-")) {
-    target.value = target.value.replace("-", "");
-  }
-  if (target.value.includes(".")) {
-    const parts = target.value.split(".");
-    dollars = parts[0];
-    cents = parts[1].padEnd(2, "0").substring(0, 2);
-    return e.preventDefault();
-  }
-  if (target.name === "cents" && target.value.length > 2) {
-    moveExtraCentsToDollars(target.value, false);
-    return e.preventDefault();
-  }
-};
-const onSaveStateEvent = (e) => {
-  if (dollars.length === 0) dollars = "0";
-  if (cents.length === 0) cents = "00";
-  updateLastState(e);
-};
-const onChange = () => {
-  let centValue = Math.abs(isNumericString(cents) ? Number(cents) : 0);
-  let dollarValue = Math.abs(isNumericString(dollars) ? Number(dollars) : 0);
-  if (isValueInCents) value = dollarValue * 100 + centValue;
-  else value = dollarValue + centValue / 100;
-  if (min && value < min) value = min;
-  if (max && value > max) value = max;
-  cents = String(centValue).padStart(2, "0");
-};
+<script lang="ts">
+	import { uniqueId, type FormFieldSizeOptions } from '../../index.js';
+	import FormField from '../form-field.svelte';
+	import { untrack } from 'svelte';
+	
+	const id = uniqueId();
+
+	let {
+		value = $bindable(null as number | null),
+		prefix = '$',
+		suffix = '',
+		currency = 'USD',
+		allowCents = true,
+		placeholder = '',
+		size = 'full' as FormFieldSizeOptions,
+		units = 'ones' as 'ones' | 'cents',
+		min = 0,
+		max = null as number | null,
+		onChange = undefined,
+		label = undefined
+	}: {
+		value?: number | null;
+		prefix?: string;
+		suffix?: string;
+		currency?: string;
+		allowCents?: boolean;
+		placeholder?: string;
+		size?: FormFieldSizeOptions;
+		units?: 'ones' | 'cents';
+		min?: number;
+		max?: number | null;
+		onChange?: ((value: number | null) => void) | undefined;
+		label?: string;
+	} = $props();
+
+	let isValueInCents = $derived(units === 'cents');
+	const fieldOrder = ['dollars', 'cents'];
+	
+	const getDollarsFromValue = () => {
+		if (!value) return '0';
+		if (isValueInCents) return String(Math.abs(Math.floor(value / 100)));
+		return String(Math.abs(Math.floor(value)));
+	}
+
+	const getCentsFromValue = () => {
+		if (!value) return '00';
+		if (isValueInCents) return String(Math.abs(Math.round(value % 100))).padStart(2, '0');
+		return String(Math.abs(Math.round((value % 1) * 100))).padStart(2, '0');
+	}
+
+	let dollars = $state(getDollarsFromValue());
+	let cents = $state(getCentsFromValue());
+	// Using untrack() to indicate we intentionally want non-reactive initial values
+	let lastState = $state([
+		{ value: untrack(() => String(dollars)), selectionStart: 0, selectionEnd: 0 },
+		{ value: untrack(() => String(cents)), selectionStart: 0, selectionEnd: 0 }
+	]);
+	$effect(() => {
+		if (value !== null && value >= 0) {
+			// Use untrack to prevent writes to dollars/cents from triggering this effect again
+			untrack(() => {
+				dollars = getDollarsFromValue();
+				cents = getCentsFromValue();
+			});
+		}
+	});
+
+	const getTargetProperties = (e: KeyboardEvent | Event) => {
+		const target = e.target as HTMLInputElement;
+		const name = target.getAttribute('name');
+		const index = fieldOrder.indexOf(name ?? '') || 0;
+		const nextName = index < fieldOrder.length - 1 ? fieldOrder[index + 1] : null;
+		const prevName = index > 0 ? fieldOrder[index - 1] : null;
+		const selection = [target.selectionStart ?? 0, target.selectionEnd ?? 0];
+		const key = e instanceof KeyboardEvent ? e.key : '';
+		const isNumber = !isNaN(Number(key));
+		const isDecimal =key === '.';
+		const isBackspace = key === 'Backspace';
+		const isAllowed = isNumber || isDecimal || ['Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(key);
+		return {
+			element: target,
+			name,
+			index,
+			selectionStart: selection[0],
+			selectionEnd: selection[1],
+			isHighligted: selection[0] !== selection[1],
+			key,
+			isNumber,
+			isDecimal,
+			isBackspace,
+			isAllowed,
+			lastState: lastState[index],
+			value: target.value,
+			next: nextName ? document.getElementById(`${id}-${nextName}`) as HTMLInputElement : null,
+			previous: prevName ? document.getElementById(`${id}-${prevName}`) as HTMLInputElement : null
+		};
+	};
+
+	const focusAndHighlightText = (target: HTMLInputElement) => {
+		target.focus();
+		target.setSelectionRange(0, target.value.length);
+	};
+
+	const updateLastState = (e: Event) => {
+		const target = getTargetProperties(e);
+		lastState[target.index] = {
+			value: target.value,
+			selectionStart: target.selectionStart,
+			selectionEnd: target.selectionEnd
+		};
+	};
+
+	const isNumericString = (value: string | number) => {
+		return !isNaN(Number(value));
+	};
+
+	const moveExtraCentsToDollars = (centsValue: string, append = true) => {
+		if (centsValue.length > 2 && isNumericString(centsValue) && Number(centsValue) > 0) {
+			const whole = centsValue.substring(0, centsValue.length -2);
+			const decimal = centsValue.substring(centsValue.length -2);
+			dollars = append ? `${dollars}${whole}` : whole;
+			cents = decimal;
+		}
+	};
+
+	const onKeyPress = (e: KeyboardEvent) => {
+		const target = getTargetProperties(e);
+		if (!target.isAllowed) return e.preventDefault();
+		if (target.isDecimal) {
+			e.preventDefault();
+			if (target.next && allowCents) focusAndHighlightText(target.next);
+			return;
+		};
+		if (target.name === 'cents' && target.value.length >= 2 && !target.isHighligted) {
+			if (target.isNumber) moveExtraCentsToDollars(`${target.value}${e.key}`);
+			return e.preventDefault();
+		}
+		updateLastState(e);
+	};
+
+	const onKeyUp = (e: KeyboardEvent) => {
+		const target = getTargetProperties(e);
+		// Back arrow
+		if (target.key === 'ArrowLeft' && !target.isHighligted && target.previous && target.lastState.selectionStart === 0) {
+			const preservedValue = String(target.previous.value);
+			focusAndHighlightText(target.previous);
+			target.previous.value = preservedValue;
+			return e.preventDefault();
+		}
+		// Right arrow
+		if (target.key === 'ArrowRight' && !target.isHighligted && target.next && target.lastState.selectionStart === target.value.length) {
+			focusAndHighlightText(target.next);
+			return e.preventDefault();
+		}
+		// Handle backspace
+		if (target.isBackspace) {
+			if (target.lastState.value.length === 0 && target.previous) {
+				target.previous.focus();
+				e.preventDefault();
+			}
+		}
+		updateLastState(e);
+	};
+
+	const onInput = (e: Event) => {
+		const target = getTargetProperties(e);
+		// If they pasted in something non-numeric, revert to last state
+		if (!isNumericString(target.value)) {
+			target.element.value = target.lastState.value;
+			return e.preventDefault();
+		}
+		// No negative numbers
+		if (target.value.includes('-')) {
+			target.value = target.value.replace('-', '');
+		}
+		// If the input contains a decimal, break it into two parts
+		if (target.value.includes('.')) {
+			const parts = target.value.split('.');
+			dollars = parts[0];
+			cents = parts[1].padEnd(2, '0').substring(0, 2);
+			return e.preventDefault();
+		}
+		// If input is in cents and it's more than 2 digits, move the first digits to dollars
+		if (target.name === 'cents' && target.value.length > 2) {
+			moveExtraCentsToDollars(target.value, false);
+			return e.preventDefault();
+		}
+	};
+
+	const onSaveStateEvent = (e: Event) => {
+		if (dollars.length === 0) dollars = '0';
+		if (cents.length === 0) cents = '00';
+		updateLastState(e);
+	};
+
+	const handleChange = () => {
+		let centValue = Math.abs(isNumericString(cents) ? Number(cents) : 0);
+		let dollarValue = Math.abs(isNumericString(dollars) ? Number(dollars) : 0);
+		// Update value
+		if (isValueInCents) value = (dollarValue * 100) + centValue;
+		else value = dollarValue + (centValue / 100);
+		// Enforce min and max
+		if (min && value < min) value = min;
+		if (max && value > max) value = max;
+		// Cents should be padded to 2 digits, so that "5" becomes "05"
+		cents = String(centValue).padStart(2, '0');
+		onChange?.(value);
+	};
+
 </script>
 
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id}><slot /></FormLabel>
-	{/if}
+<FormField {size} {label} {id}>
 	<div class="input {currency}" class:allowCents {id}>
 		{#if prefix}
 			<span class="prefix">{prefix}</span>
@@ -174,13 +220,13 @@ const onChange = () => {
 			{placeholder}
 			bind:value={dollars}
 			type="text"
-			on:keypress={onKeyPress}
-			on:keyup={onKeyUp}
-			on:input={onInput}
-			on:change={onChange}
-			on:mouseup={onSaveStateEvent}
-			on:focus={onSaveStateEvent}
-			on:blur={onSaveStateEvent}
+			onkeypress={onKeyPress}
+			onkeyup={onKeyUp}
+			oninput={onInput}
+			onchange={handleChange}
+			onmouseup={onSaveStateEvent}
+			onfocus={onSaveStateEvent}
+			onblur={onSaveStateEvent}
 			name="dollars"
 			id="{id}-dollars"
 			inputmode="numeric"
@@ -192,13 +238,13 @@ const onChange = () => {
 				bind:value={cents}
 				type="text"
 				class="cents"
-				on:keypress={onKeyPress}
-				on:keyup={onKeyUp}
-				on:input={onInput}
-				on:change={onChange}
-				on:mouseup={onSaveStateEvent}
-				on:focus={onSaveStateEvent}
-				on:blur={onSaveStateEvent}
+				onkeypress={onKeyPress}
+				onkeyup={onKeyUp}
+				oninput={onInput}
+				onchange={handleChange}
+				onmouseup={onSaveStateEvent}
+				onfocus={onSaveStateEvent}
+				onblur={onSaveStateEvent}
 				name="cents"
 				id="{id}-cents"
 				inputmode="numeric"

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

@@ -1,32 +1,18 @@
-import { SvelteComponent } from "svelte";
 import { type FormFieldSizeOptions } from '../../index.js';
-declare const __propDef: {
-    props: {
-        value: number | null;
-        prefix?: string;
-        suffix?: string;
-        currency?: string;
-        allowCents?: boolean;
-        placeholder?: string;
-        size?: FormFieldSizeOptions;
-        units?: "ones" | "cents";
-        min?: number;
-        max?: number | null;
-    };
-    events: {
-        change: CustomEvent<number | null>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+type $$ComponentProps = {
+    value?: number | null;
+    prefix?: string;
+    suffix?: string;
+    currency?: string;
+    allowCents?: boolean;
+    placeholder?: string;
+    size?: FormFieldSizeOptions;
+    units?: 'ones' | 'cents';
+    min?: number;
+    max?: number | null;
+    onChange?: ((value: number | null) => void) | undefined;
+    label?: string;
 };
-export type MoneyBoxProps = typeof __propDef.props;
-export type MoneyBoxEvents = typeof __propDef.events;
-export type MoneyBoxSlots = typeof __propDef.slots;
-export default class MoneyBox extends SvelteComponent<MoneyBoxProps, MoneyBoxEvents, MoneyBoxSlots> {
-}
-export {};
+declare const MoneyBox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type MoneyBox = ReturnType<typeof MoneyBox>;
+export default MoneyBox;