sveltacular 0.0.50 → 0.0.52

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.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 | undefined | null;
         size?: FormFieldSizeOptions | undefined;
         placeholder?: string | undefined;
         nullable?: boolean | undefined;

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/tables/data-grid.svelte

@@ -39,6 +39,10 @@ const format = (row, key) => {
   const col = cols.find((col2) => col2.key === key);
   if (!col)
     return row[key];
+  if ((row[key] === null || row[key] === void 0) && col.nullText)
+    return col.nullText;
+  if (String(row[key]).trim() === "" && col.emptyText)
+    return col.emptyText;
   if (col.format)
     return col.format(row, key);
   return row[key];

package/dist/types/data.d.ts

@@ -3,6 +3,8 @@ export type DataCol<T extends DataRow = DataRow> = {
     key: string;
     label: string;
     type?: string;
+    nullText?: string;
+    emptyText?: string;
     format?: (row: T, key: keyof T) => string;
     link?: (row: T, key: keyof T) => string;
     hide?: boolean;

package/package.json

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