sveltacular 0.0.51 → 0.0.53

package/dist/forms/combo/new-or-existing-combo.svelte.d.ts

@@ -4,8 +4,8 @@ import type { SearchFunction } from '../list-box/list-box.js';
 declare const __propDef: {
     props: {
         mode?: "new" | "existing" | undefined;
-        newValue?: string | undefined;
-        existingValue?: string | undefined;
+        newValue?: string | null | undefined;
+        existingValue?: string | null | undefined;
         items?: DropdownOption[] | undefined;
         size?: FormFieldSizeOptions | undefined;
         disabled?: boolean | undefined;

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

@@ -1,17 +1,26 @@
-<script>import { currentDateTime } from "../../helpers/date.js";
+<script>import { currentDateTime, isDate, isDateOrDateTime, isDateTime } from "../../helpers/date.js";
 import { uniqueId } from "../../helpers/unique-id.js";
 import FormField from "../form-field.svelte";
 import FormLabel from "../form-label.svelte";
 const id = uniqueId();
 export let value = void 0;
+export let defaultValue = void 0;
 export let size = "full";
 export let placeholder = "";
 export let nullable = false;
 export let enabled = true;
 export let type = "date";
 export let required = false;
-const defaultValue = value || currentDateTime();
-const getDefaultValue = () => type == "date" ? defaultValue.substring(0, 10) : defaultValue;
+const _defaultValue = defaultValue !== void 0 ? defaultValue : value || currentDateTime();
+const getDefaultValue = () => {
+  if (nullable && !isDateOrDateTime(String(_defaultValue))) {
+    return null;
+  }
+  if (type === "date") {
+    return isDate(String(_defaultValue)) ? _defaultValue : currentDateTime().substring(0, 10);
+  }
+  return isDateTime(String(_defaultValue)) ? _defaultValue : currentDateTime();
+};
 const checkChanged = () => {
   if (nullable) {
     value = enabled ? getDefaultValue() : "";

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

@@ -2,7 +2,8 @@ import { SvelteComponent } from "svelte";
 import type { FormFieldSizeOptions } from '../../index.js';
 declare const __propDef: {
     props: {
-        value?: string | undefined;
+        value?: string | undefined | null;
+        defaultValue?: string | undefined | null;
         size?: FormFieldSizeOptions | undefined;
         placeholder?: string | undefined;
         nullable?: boolean | undefined;

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

@@ -1,5 +1,4 @@
 <script>import LinkIcon from "../../icons/link-icon.svelte";
-import Icon from "../../images/icon.svelte";
 import FormField from "../form-field.svelte";
 import FormLabel from "../form-label.svelte";
 export let size = "md";

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

@@ -3,7 +3,7 @@ import type { FormFieldSizeOptions } from '../../index.js';
 declare const __propDef: {
     props: {
         size?: FormFieldSizeOptions | undefined;
-        value: string;
+        value: string | null;
         href?: string | undefined;
     };
     events: {

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { FormFieldSizeOptions } from '../../index.js';
 declare const __propDef: {
     props: {
-        value: number;
+        value: number | null;
         symbol?: string | undefined;
         allowCents?: boolean | undefined;
         placeholder?: string | undefined;

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

@@ -14,6 +14,12 @@ export let prefix = null;
 export let suffix = null;
 export let step = 1;
 const valueChanged = () => {
+  if (value === null || value === void 0)
+    return;
+  if (value < min)
+    value = min;
+  if (value > max)
+    value = max;
   value = roundToDecimals(value, decimals);
 };
 </script>

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { FormFieldSizeOptions } from '../../types/form.js';
 declare const __propDef: {
     props: {
-        value?: number | undefined;
+        value?: number | null | undefined;
         placeholder?: string | undefined;
         size?: FormFieldSizeOptions | undefined;
         type?: ("number" | "currency") | undefined;

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

@@ -86,7 +86,7 @@ const keyDown = (event) => {
   if (isDelete && newValue.length === 0 && props.prevId)
     props.prevId.focus();
 };
-setValue(value);
+setValue(value ?? "");
 $:
   areaCode || localExt || lastFour ? publishChange() : null;
 </script>

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import { type FormFieldSizeOptions } from '../../index.js';
 declare const __propDef: {
     props: {
-        value?: string | undefined;
+        value?: string | null | undefined;
         size?: FormFieldSizeOptions | undefined;
     };
     events: {

package/dist/forms/radio-group/radio-box.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        value?: string | number | boolean | undefined;
+        value?: string | number | boolean | null | undefined;
         group?: string | undefined;
         disabled?: boolean | undefined;
     };

package/dist/forms/radio-group/radio-group.svelte

@@ -3,7 +3,7 @@ import FormLabel from "../form-label.svelte";
 import { uniqueId } from "../../helpers/unique-id.js";
 import RadioBox from "./radio-box.svelte";
 const id = uniqueId();
-export let value = "";
+export let group = "";
 export let items = [];
 export let size = "full";
 export let disabled = false;
@@ -16,7 +16,7 @@ export let required = false;
 	{/if}
 	<div>
 		{#each items as item}
-			<RadioBox bind:group={value} {disabled} value={item.value}>{item.name}</RadioBox>
+			<RadioBox bind:group={group} {disabled} value={item.value}>{item.name}</RadioBox>
 		{/each}
 	</div>
 </FormField>

package/dist/forms/radio-group/radio-group.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
 declare const __propDef: {
     props: {
-        value?: string | undefined;
+        group?: string | undefined;
         items?: DropdownOption[] | undefined;
         size?: FormFieldSizeOptions | undefined;
         disabled?: boolean | undefined;

package/dist/forms/text-area/text-area.svelte.d.ts

@@ -3,7 +3,7 @@ import type { FormFieldSizeOptions } from '../../types/form.js';
 declare const __propDef: {
     props: {
         size?: FormFieldSizeOptions | undefined;
-        value?: string | undefined;
+        value?: string | null | undefined;
         placeholder?: string | undefined;
         rows?: number | undefined;
         disabled?: boolean | undefined;

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

@@ -33,21 +33,22 @@ const onKeyPress = (e) => {
   }
 };
 const onInput = (e) => {
+  const cleanValue = String(value);
   if (textCase === "lower") {
-    value = value.toLowerCase();
+    value = cleanValue.toLowerCase();
   } else if (textCase === "upper") {
-    value = value.toUpperCase();
+    value = cleanValue.toUpperCase();
   }
   if (type === "email") {
-    value = value.replace(/\s/g, "");
+    value = cleanValue.replace(/\s/g, "");
   }
   if (type === "tel") {
-    value = value.replace(/[^0-9]/g, "");
+    value = cleanValue.replace(/[^0-9]/g, "");
   }
   if (type === "url") {
-    value = value.replace(/\s/g, "");
+    value = cleanValue.replace(/\s/g, "");
   }
-  dipatch("input", value);
+  dipatch("input", cleanValue);
 };
 </script>
 

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { AllowedTextInputTypes, FormFieldSizeOptions } from '../../types/form.js';
 declare const __propDef: {
     props: {
-        value?: string | undefined;
+        value?: string | null | undefined;
         placeholder?: string | undefined;
         helperText?: string | undefined;
         size?: FormFieldSizeOptions | undefined;

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

@@ -4,7 +4,8 @@ export let value = "";
 export let size = "lg";
 export let placeholder = "example.com";
 const onInput = () => {
-  const urlParts = value.split("://");
+  const cleanValue = value ?? "";
+  const urlParts = cleanValue.split("://");
   if (["http", "https"].includes(urlParts[0])) {
     protocol = urlParts[0];
     value = urlParts[1];

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

@@ -4,7 +4,7 @@ import type { HttpProtocol } from '../../types/generic.js';
 declare const __propDef: {
     props: {
         protocol?: HttpProtocol | undefined;
-        value?: string | undefined;
+        value?: string | null | undefined;
         size?: FormFieldSizeOptions | undefined;
         placeholder?: string | undefined;
     };

package/dist/helpers/date.d.ts

@@ -12,3 +12,6 @@ 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 isDate: (date: string) => boolean;
+export declare const isDateTime: (dateTime: string) => boolean;
+export declare const isDateOrDateTime: (dateOrDateTime: string) => boolean;

package/dist/helpers/date.js

@@ -66,3 +66,14 @@ export const dateTimeToInput = (dateTime) => {
     dateTime.setMinutes(dateTime.getMinutes() - offset);
     return dateTime.toISOString().split('.')[0].slice(0, -3);
 };
+// Is this date formatted in YYYY-MM-DD format?
+export const isDate = (date) => {
+    return /^\d{4}-\d{2}-\d{2}$/.test(date);
+};
+// Is this datetime formatted in YYYY-MM-DD HH:MM format?
+export const isDateTime = (dateTime) => {
+    return /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2})?$/.test(dateTime);
+};
+export const isDateOrDateTime = (dateOrDateTime) => {
+    return isDate(dateOrDateTime) || isDateTime(dateOrDateTime);
+};

package/package.json

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