sveltacular 0.0.70 → 0.0.72

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

@@ -1,16 +1,280 @@
-<script>import NumberBox from "../number-box/number-box.svelte";
+<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 symbol = "$";
-export let allowCents = false;
+export let prefix = "$";
+export let suffix = "";
+export let currency = "USD";
+export let allowCents = true;
 export let placeholder = "";
 export let size = "full";
-export let step = 1;
+export let units = "ones";
 export let min = 0;
-export let max = 1e6;
+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 }
+];
 $:
-  decimals = allowCents ? 2 : 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>
 
-<NumberBox bind:value prefix={symbol} {decimals} {placeholder} {size} {min} {max} {step}
-	><slot /></NumberBox
->
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id}><slot /></FormLabel>
+	{/if}
+	<div class="input {currency}" class:allowCents {id}>
+		{#if prefix}
+			<span class="prefix">{prefix}</span>
+		{/if}
+
+		<input
+			class="dollars"
+			{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}
+			name="dollars"
+			id="{id}-dollars"
+			inputmode="numeric"
+		/>
+		{#if allowCents}
+			<span class="separator">.</span>
+			<input
+				{placeholder}
+				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}
+				name="cents"
+				id="{id}-cents"
+				inputmode="numeric"
+			/>
+		{/if}
+
+		{#if suffix}
+			<span class="suffix">{suffix}</span>
+		{/if}
+	</div>
+</FormField>
+
+<style>.input {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.25rem;
+  border: 1px solid var(--form-input-border, black);
+  background-color: var(--form-input-bg, white);
+  color: var(--form-input-fg, black);
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 2rem;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+}
+.input input {
+  background-color: transparent;
+  border: none;
+  line-height: 2rem;
+  font-size: 1rem;
+  padding-left: 1rem;
+}
+.input input:focus {
+  outline: none;
+}
+.input .dollars {
+  flex-grow: 1;
+}
+.input .separator {
+  width: 1rem;
+  text-align: center;
+}
+.input .cents {
+  width: 4rem;
+}
+.input .prefix,
+.input .suffix {
+  font-size: 1rem;
+  line-height: 2rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  background-color: var(--form-input-accent-bg, #ccc);
+  color: var(--form-input-accent-fg, black);
+}
+.input .prefix {
+  border-right: 1px solid var(--form-input-border, black);
+}
+.input .suffix {
+  border-left: 1px solid var(--form-input-border, black);
+}</style>

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

@@ -1,17 +1,21 @@
 import { SvelteComponent } from "svelte";
-import type { FormFieldSizeOptions } from '../../index.js';
+import { type FormFieldSizeOptions } from '../../index.js';
 declare const __propDef: {
     props: {
         value: number | null;
-        symbol?: string | undefined;
+        prefix?: string | undefined;
+        suffix?: string | undefined;
+        currency?: string | undefined;
         allowCents?: boolean | undefined;
         placeholder?: string | undefined;
         size?: FormFieldSizeOptions | undefined;
-        step?: number | undefined;
+        units?: "ones" | "cents" | undefined;
         min?: number | undefined;
-        max?: number | undefined;
+        max?: number | null | undefined;
     };
     events: {
+        change: CustomEvent<number | null>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

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

@@ -1,8 +1,10 @@
-<script>import { formatNumber, roundToDecimals } from "../../helpers/round-to-decimals.js";
+<script>import { roundToDecimals } from "../../helpers/round-to-decimals.js";
 import { uniqueId } from "../../helpers/unique-id.js";
 import FormField from "../form-field.svelte";
 import FormLabel from "../form-label.svelte";
+import { createEventDispatcher } from "svelte";
 const id = uniqueId();
+const dipatch = createEventDispatcher();
 export let value = 0;
 export let placeholder = "";
 export let size = "full";
@@ -21,6 +23,27 @@ const valueChanged = () => {
   if (value > max)
     value = max;
   value = roundToDecimals(value, decimals);
+  dipatch("change", value);
+};
+const onInput = (e) => {
+  const input = e.target;
+  const newValue = parseFloat(input.value);
+  if (isNaN(newValue))
+    return;
+  value = newValue;
+};
+const onKeyPress = (e) => {
+  const isNumber = !isNaN(Number(e.key));
+  const isDecimal = e.key === ".";
+  const isAllowed = isNumber || isDecimal || ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(e.key);
+  if (!isAllowed)
+    return e.preventDefault();
+  if (isDecimal && decimals === 0)
+    return e.preventDefault();
+  const newValue = `${value}${e.key}`;
+  const decimalPart = newValue.split(".")[1];
+  if (decimalPart && decimalPart.length > decimals)
+    return e.preventDefault();
 };
 </script>
 
@@ -42,6 +65,8 @@ const valueChanged = () => {
 			{min}
 			{max}
 			on:change={valueChanged}
+			on:input={onInput}
+			on:keypress={onKeyPress}
 		/>
 
 		{#if suffix}

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

@@ -14,6 +14,8 @@ declare const __propDef: {
         step?: number | undefined;
     };
     events: {
+        change: CustomEvent<number | null>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

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

@@ -96,7 +96,6 @@ const keyUp = (event) => {
     return props.value;
   })();
   if (newValue.length >= props.maxLength) {
-    console.log(event.key);
     props.target.value = newValue.slice(0, props.maxLength);
     if (props.nextInput)
       props.nextInput.focus();

package/dist/generic/phone/phone.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         value: string;
-        type?: "sms" | "mobile" | "home" | "work" | "fax" | "other" | undefined;
+        type?: "home" | "mobile" | "work" | "sms" | "fax" | "other" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.70",
+	"version": "0.0.72",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",