sveltacular 0.0.69 → 0.0.71

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

@@ -7,10 +7,17 @@ export let size = "full";
 export let step = 1;
 export let min = 0;
 export let max = 1e6;
+export let isCents = false;
+let innerValue = isCents && value ? Math.round(value / 100) : value;
 $:
   decimals = allowCents ? 2 : 0;
+const onChange = (e) => {
+  const dollars = e.detail;
+  if (dollars !== null)
+    value = isCents ? Math.round(dollars * 100) : dollars;
+};
 </script>
 
-<NumberBox bind:value prefix={symbol} {decimals} {placeholder} {size} {min} {max} {step}
-	><slot /></NumberBox
->
+<NumberBox bind:value={innerValue} prefix={symbol} {decimals} {placeholder} {size} {min} {max} {step} on:change={onChange}>
+	<slot />
+</NumberBox>

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         step?: number | undefined;
         min?: number | undefined;
         max?: number | undefined;
+        isCents?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -28,12 +28,16 @@ const getColType = (col) => {
     return col.type;
   if (!rows?.length)
     return "string";
-  return typeof rows[0][col.key];
+  const firstRow = rows[0];
+  if (!firstRow)
+    return "undefined";
+  if (col.key in firstRow)
+    return typeof firstRow[col.key];
 };
 const format = (row, key) => {
   const col = cols.find((col2) => col2.key === key);
   if (!col)
-    return row[key];
+    return key in row ? String(row[key]) : "";
   if ((row[key] === null || row[key] === void 0) && col.nullText)
     return col.nullText;
   if (String(row[key]).trim() === "" && col.emptyText)
@@ -44,7 +48,7 @@ const format = (row, key) => {
     return formatDateTime(String(row[key])).substring(0, 10);
   if (col.type === "date-time")
     return formatDateTime(String(row[key]));
-  return row[key];
+  return String(row[key]);
 };
 const calculateTotalPages = () => {
   if (!pagination || !rows)

package/dist/tables/data-grid.svelte.d.ts

@@ -1,19 +1,19 @@
 import { SvelteComponent } from "svelte";
-import type { DataCol, DataRow, PaginationProperties } from '../types/data.js';
+import type { DataCol, JsonObject, PaginationProperties } from '../types/data.js';
 declare const __propDef: {
     props: {
         captionSide?: "top" | "bottom" | undefined;
         captionAlign?: "center" | "left" | "right" | undefined;
-        rows?: DataRow[] | undefined;
+        rows?: JsonObject[] | undefined;
         cols: DataCol[];
         pagination?: PaginationProperties | undefined;
         actions?: {
             text: string;
-            onClick: (row: DataRow) => unknown;
+            onClick: (row: JsonObject) => unknown;
         }[] | undefined;
         /**
              * Handle page change, which should return the new filtered/fetched rows.
-             */ onPageChange?: ((pagination: PaginationProperties) => Promise<DataRow[]>) | null | undefined;
+             */ onPageChange?: ((pagination: PaginationProperties) => Promise<JsonObject[]>) | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/types/data.d.ts

@@ -1,12 +1,17 @@
-export type DataRow = Record<string, unknown>;
-export type DataCol<T extends DataRow = DataRow> = {
+export type JsonValue = string | number | boolean | null | {
+    [key: string]: JsonValue;
+} | JsonValue[];
+export type JsonObject = {
+    [key: string]: JsonValue;
+};
+export type DataCol = {
     key: string;
     label: string;
     type?: string;
     nullText?: string;
     emptyText?: string;
-    format?: (row: T, key: keyof T) => string;
-    link?: (row: T, key: keyof T) => string;
+    format?: (row: JsonObject, key: string) => string;
+    link?: (row: JsonObject, key: string) => string;
     hide?: boolean;
     width?: number | string;
 };

package/package.json

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