sveltacular 0.0.71 → 0.0.73

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

@@ -1,23 +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 isCents = false;
-let innerValue = isCents && value ? Math.round(value / 100) : value;
+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;
-const onChange = (e) => {
-  const dollars = e.detail;
-  if (dollars !== null)
-    value = isCents ? Math.round(dollars * 100) : dollars;
+  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={innerValue} prefix={symbol} {decimals} {placeholder} {size} {min} {max} {step} on:change={onChange}>
-	<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,18 +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;
-        isCents?: boolean | undefined;
+        max?: number | null | 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/dist/helpers/date.d.ts

@@ -8,11 +8,16 @@ export declare const addMinutes: (minutes: number, fromDateTime?: string | Date)
 export declare const addHours: (hours: number, fromDateTime?: string | Date) => Date;
 export declare const addSeconds: (seconds: number, fromDateTime?: string | Date) => Date;
 export declare const addUnits: (value: number, units: DateUnit, fromDateTime?: string | Date) => Date;
-export declare const dateTimeFromSupabase: (dateTime: string | null) => string;
-export declare const dateTimeToSupabase: (dateTime: string) => string | null;
-export declare const dateTimeToHuman: (dateTime: string) => string;
-export declare const dateTimeToInput: (dateTime?: Date) => string;
+export declare const dateTimeFromTz: (dateTime: string | null) => string;
+export declare const dateTimeToTz: (dateTime: string) => string | null;
+export declare const dateTimeToHuman: (dateTime: string, locale?: string) => string;
+export declare const toDateTime: (date?: string | Date) => Date;
+export declare const toDate: (date?: Date | string) => string;
+export declare const dateTimeToInput: (dateTime?: Date | string) => string;
 export declare const isDateString: (date: string) => date is string;
 export declare const isDateTimeString: (dateTime: string) => dateTime is string;
 export declare const isDateOrDateTimeString: (dateOrDateTime: unknown) => dateOrDateTime is string;
 export declare const formatDateTime: (dateTime: string | Date) => string;
+export declare const toHumanReadableDuration: (duration: number, singularUnits: string) => string;
+export declare const diffDates: (start: string | Date, end: string | Date) => number;
+export declare const isBetween: (date: string | Date, start: string | Date, end: string | Date) => boolean;

package/dist/helpers/date.js

@@ -59,7 +59,7 @@ export const addUnits = (value, units, fromDateTime) => {
     return date;
 };
 // Convert datetime from YYYY-MM-DDTHH:MM+TZ format to YYYY-MM-DD HH:MM format
-export const dateTimeFromSupabase = (dateTime) => {
+export const dateTimeFromTz = (dateTime) => {
     if (!dateTime)
         return '';
     const date = new Date(dateTime);
@@ -68,7 +68,7 @@ export const dateTimeFromSupabase = (dateTime) => {
     return date.toISOString().split('.')[0].slice(0, -3);
 };
 // Convert datetime from YYYY-MM-DD HH:MM format to YYYY-MM-DDTHH:MM+TZ format
-export const dateTimeToSupabase = (dateTime) => {
+export const dateTimeToTz = (dateTime) => {
     if (!dateTime)
         return null;
     const date = new Date(dateTime);
@@ -79,23 +79,29 @@ export const dateTimeToSupabase = (dateTime) => {
 /*
  * Convert datetime to human-readable format with AM/PM, no seconds
  */
-export const dateTimeToHuman = (dateTime) => {
+export const dateTimeToHuman = (dateTime, locale = 'en-US') => {
     const date = new Date(dateTime);
-    const datePart = date.toLocaleString('en-US', {
+    const datePart = date.toLocaleString(locale, {
         month: 'long',
         day: 'numeric',
         year: 'numeric'
     });
-    const timePart = date.toLocaleString('en-US', {
+    const timePart = date.toLocaleString(locale, {
         hour: 'numeric',
         minute: 'numeric',
         timeZoneName: 'short'
     });
     return `${datePart} @ ${timePart}`;
 };
+export const toDateTime = (date) => {
+    return date ? new Date(date) : new Date();
+};
+export const toDate = (date) => {
+    return toDateTime(date).toISOString().split('T')[0];
+};
 // From JavaScript date to YYYY-MM-DD HH:MM format
 export const dateTimeToInput = (dateTime) => {
-    dateTime = dateTime || new Date();
+    dateTime = toDateTime(dateTime);
     const offset = dateTime.getTimezoneOffset();
     dateTime.setMinutes(dateTime.getMinutes() - offset);
     return dateTime.toISOString().split('.')[0].slice(0, -3);
@@ -119,3 +125,20 @@ export const formatDateTime = (dateTime) => {
     date.setMinutes(date.getMinutes() - offset);
     return date.toISOString().split('.')[0].slice(0, -3);
 };
+export const toHumanReadableDuration = (duration, singularUnits) => {
+    return duration > 0 && duration <= 1
+        ? `${duration} ${singularUnits}`
+        : `${duration} ${singularUnits}s`;
+};
+export const diffDates = (start, end) => {
+    const startDate = new Date(start);
+    const endDate = new Date(end);
+    const duration = endDate.getTime() - startDate.getTime();
+    return duration;
+};
+export const isBetween = (date, start, end) => {
+    const dateToCheck = new Date(date);
+    const startDate = new Date(start);
+    const endDate = new Date(end);
+    return dateToCheck >= startDate && dateToCheck <= endDate;
+};

package/dist/helpers/remove-properties.d.ts

@@ -0,0 +1 @@
+export declare const removeProperties: (obj: unknown, props: string[]) => Record<string, unknown>;

package/dist/helpers/remove-properties.js

@@ -0,0 +1,10 @@
+// Remove properties from an object from an array of strings representing the property names
+export const removeProperties = (obj, props) => {
+    if (!obj)
+        return {};
+    const newObj = { ...obj };
+    props.forEach((prop) => {
+        delete newObj[prop];
+    });
+    return newObj;
+};

package/dist/helpers/transform.d.ts

@@ -0,0 +1,4 @@
+export type StripNulls<T> = {
+    [P in keyof T]: NonNullable<T[P]>;
+};
+export declare const stripNulls: <T extends object>(obj: T) => StripNulls<T>;

package/dist/helpers/transform.js

@@ -0,0 +1,5 @@
+export const stripNulls = (obj) => {
+    if (!obj)
+        return {};
+    return obj;
+};

package/dist/index.d.ts

@@ -100,9 +100,11 @@ export * from './helpers/debounce.js';
 export * from './helpers/navigate-to.js';
 export * from './helpers/nobr.js';
 export * from './helpers/random.js';
+export * from './helpers/remove-properties.js';
 export * from './helpers/round-to-decimals.js';
 export * from './helpers/split-new-lines.js';
 export * from './helpers/subscribable.js';
+export * from './helpers/transform.js';
 export * from './helpers/ucfirst.js';
 export * from './helpers/unique-id.js';
 export * from './data/index.js';

package/dist/index.js

@@ -111,9 +111,11 @@ export * from './helpers/debounce.js';
 export * from './helpers/navigate-to.js';
 export * from './helpers/nobr.js';
 export * from './helpers/random.js';
+export * from './helpers/remove-properties.js';
 export * from './helpers/round-to-decimals.js';
 export * from './helpers/split-new-lines.js';
 export * from './helpers/subscribable.js';
+export * from './helpers/transform.js';
 export * from './helpers/ucfirst.js';
 export * from './helpers/unique-id.js';
 // Data

package/package.json

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