sveltacular 0.0.67 → 0.0.69

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

@@ -6,14 +6,28 @@ export let value = "";
 export let size = "md";
 const id = uniqueId();
 const dispatch = createEventDispatcher();
-let areaCode;
-let localExt;
-let lastFour;
+const fieldOrder = ["areaCode", "localExt", "lastFour"];
+let areaCode = "";
+let localExt = "";
+let lastFour = "";
+const getValueByField = (field) => {
+  if (field === "areaCode")
+    return areaCode;
+  if (field === "localExt")
+    return localExt;
+  if (field === "lastFour")
+    return lastFour;
+  return "";
+};
+const getValueByIndex = (index) => {
+  return getValueByField(fieldOrder[index]);
+};
 const getTargetProperties = (event) => {
   const target = event.target;
   const name = target.getAttribute("name");
-  const nextId = name == "areaCode" ? "localExt" : name == "localExt" ? "lastFour" : "areaCode";
-  const prevId = name == "areaCode" ? "lastFour" : name == "localExt" ? "areaCode" : "localExt";
+  const currentIndex = fieldOrder.indexOf(name ?? "areaCode");
+  const nextId = currentIndex == 2 ? null : fieldOrder[currentIndex + 1];
+  const prevId = currentIndex == 0 ? null : fieldOrder[currentIndex - 1];
   return {
     target,
     name,
@@ -26,9 +40,11 @@ const getTargetProperties = (event) => {
 const cleanValue = (value2) => {
   return value2.replace(/[^0-9]/g, "").slice(0, 10);
 };
+const getCombinedValue = () => {
+  return cleanValue(`${areaCode}${localExt}${lastFour}`);
+};
 const publishChange = () => {
-  value = cleanValue(`${areaCode}${localExt}${lastFour}`);
-  console.log("publishChange", value);
+  value = getCombinedValue();
   dispatch("change", value);
   return value;
 };
@@ -53,16 +69,18 @@ const valueChanged = (event) => {
     return setValue(`${areaCode}${newValue}`);
   }
   props.target.value = newValue.slice(0, props.maxLength);
-  if (newValue.length >= props.maxLength) {
-    setTimeout(() => props.nextInput && props.nextInput.focus(), 1);
+  if (newValue.length >= props.maxLength && props.nextInput) {
+    props.nextInput.focus();
   }
 };
-const keyDown = (event) => {
+const keyUp = (event) => {
   const props = getTargetProperties(event);
-  const isDelete = event.key === "Delete" || event.key === "Backspace";
+  const isBackspace = event.key === "Backspace";
+  const isDelete = event.key === "Delete";
+  const isBackspaceOrDelete = isBackspace || isDelete;
   const isNumeric = !isNaN(Number(event.key));
   const isCursorHighlighting = props.target.selectionStart !== props.target.selectionEnd;
-  const isAcceptable = isNumeric || isDelete;
+  const isAcceptable = isNumeric || isBackspaceOrDelete;
   const isRightArrow = event.key === "ArrowRight" || event.key === "Tab";
   const isLeftArrow = event.key === "ArrowLeft";
   if (isRightArrow || isLeftArrow)
@@ -73,17 +91,21 @@ const keyDown = (event) => {
     if (isCursorHighlighting) {
       const start = props.target.selectionStart || 0;
       const end = props.target.selectionEnd || 0;
-      return isDelete ? props.value.slice(0, start) + props.value.slice(end) : props.value.slice(0, start) + event.key + props.value.slice(end);
+      return isBackspaceOrDelete ? props.value.slice(0, start) + props.value.slice(end) : props.value.slice(0, start) + event.key + props.value.slice(end);
     }
-    return isDelete ? props.value.slice(0, -1) : props.value + event.key;
+    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();
   }
-  if (isDelete && newValue.length === 0 && props.prevId)
-    props.prevId.focus();
+  if (isBackspace) {
+    if (newValue.length === 0 && props.prevId) {
+      props.prevId.focus();
+    }
+  }
 };
 setValue(value ?? "");
 $:
@@ -101,8 +123,8 @@ $:
 				id="{id}-areaCode"
 				type="text"
 				on:input={valueChanged}
+				on:keyup={keyUp}
 				on:change={valueChanged}
-				on:keypress={keyDown}
 				bind:value={areaCode}
 				name="areaCode"
 				data-maxlength="3"
@@ -115,7 +137,7 @@ $:
 				type="text"
 				on:input={valueChanged}
 				on:change={valueChanged}
-				on:keypress={keyDown}
+				on:keyup={keyUp}
 				bind:value={localExt}
 				name="localExt"
 				data-maxlength="3"
@@ -128,7 +150,7 @@ $:
 				type="text"
 				on:input={valueChanged}
 				on:change={valueChanged}
-				on:keypress={keyDown}
+				on:keyup={keyUp}
 				bind:value={lastFour}
 				name="lastFour"
 				data-maxlength="4"

package/dist/generic/pill/pill.svelte

@@ -2,11 +2,12 @@
 export let style = "standard";
 export let shape = "rounded";
 export let fill = "solid";
+export let compact = false;
 </script>
 
-<span class="pill {size} {style} {shape} {fill}">
-	<slot />
-</span>
+<div class="pill {size} {style} {shape} {fill}" class:compact>
+	<span><slot /></span>
+</div>
 
 <style>.pill {
   display: inline-block;
@@ -18,6 +19,9 @@ export let fill = "solid";
   color: #4a5568;
   font-family: var(--base-font-family, sans-serif);
 }
+.pill.compact {
+  padding: 0.125rem;
+}
 .pill.sm {
   font-size: 0.625rem;
   padding: 0.125rem 0.25rem;
@@ -44,6 +48,31 @@ export let fill = "solid";
 .pill.circular {
   border-radius: 50%;
 }
+.pill.circle {
+  border-radius: 50%;
+  width: 1.75rem;
+  height: 1.75rem;
+  position: relative;
+}
+.pill.circle.sm {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.pill.circle.lg {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+.pill.circle.xl {
+  width: 3rem;
+  height: 3rem;
+}
+.pill.circle span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
 .pill.positive {
   background-color: #0a5200;
   color: #fff;

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

@@ -4,8 +4,9 @@ declare const __propDef: {
     props: {
         size?: FormFieldSizeOptions | undefined;
         style?: "positive" | "negative" | "standard" | undefined;
-        shape?: "circular" | "square" | "rounded" | "badge" | undefined;
+        shape?: "circle" | "circular" | "square" | "rounded" | "badge" | undefined;
         fill?: "outline" | "solid" | undefined;
+        compact?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/generic/section/section.svelte

@@ -4,12 +4,13 @@ export let title = void 0;
 export let level = 2;
 export let size = "full";
 export let hidden = false;
+export let align = "left";
 setContext("section", { level, title });
 </script>
 
-<section class="level-{level} {size}" class:hidden>
+<section class="level-{level} {size} {align}" class:hidden>
 	{#if title}
-		<Header />
+		<Header {level} />
 	{/if}
 	<slot />
 </section>
@@ -20,6 +21,12 @@ setContext("section", { level, title });
   margin-bottom: 1rem;
   font-family: var(--base-font-family, sans-serif);
 }
+section.center {
+  text-align: center;
+}
+section.right {
+  text-align: right;
+}
 section.hidden {
   display: none;
 }

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         level?: SectionLevel | undefined;
         size?: FormFieldSizeOptions | undefined;
         hidden?: boolean | undefined;
+        align?: "center" | "left" | "right" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/helpers/date.d.ts

@@ -15,3 +15,4 @@ export declare const dateTimeToInput: (dateTime?: Date) => 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;

package/dist/helpers/date.js

@@ -113,3 +113,9 @@ export const isDateOrDateTimeString = (dateOrDateTime) => {
         return false;
     return isDateString(dateOrDateTime) || isDateTimeString(dateOrDateTime);
 };
+export const formatDateTime = (dateTime) => {
+    const date = new Date(dateTime);
+    const offset = date.getTimezoneOffset();
+    date.setMinutes(date.getMinutes() - offset);
+    return date.toISOString().split('.')[0].slice(0, -3);
+};

package/dist/index.d.ts

@@ -48,14 +48,14 @@ export { default as ListItem } from './generic/list/list-item.svelte';
 export { default as FlexCol } from './layout/flex-col.svelte';
 export { default as FlexRow } from './layout/flex-row.svelte';
 export { default as FlexItem } from './layout/flex-item.svelte';
-export { default as AlertModal } from './modals/alert.svelte';
-export { default as ConfirmModal } from './modals/confirm.svelte';
-export { default as PromptModal } from './modals/prompt.svelte';
+export { default as Alert } from './modals/alert.svelte';
+export { default as Confirm } from './modals/confirm.svelte';
+export { default as Modal } from './modals/modal.svelte';
+export { default as Prompt } from './modals/prompt.svelte';
 export { default as DialogBody } from './modals/dialog-body.svelte';
 export { default as DialogFooter } from './modals/dialog-footer.svelte';
 export { default as DialogHeader } from './modals/dialog-header.svelte';
 export { default as DialogWindow } from './modals/dialog-window.svelte';
-export { default as Modal } from './modals/modal.svelte';
 export { default as Accordian } from './navigation/accordian/accordian.svelte';
 export { default as AppBar } from './navigation/app-bar/app-bar.svelte';
 export { default as Breadcrumbs } from './navigation/breadcrumbs/breadcrumbs.svelte';

package/dist/index.js

@@ -52,14 +52,14 @@ export { default as FlexCol } from './layout/flex-col.svelte';
 export { default as FlexRow } from './layout/flex-row.svelte';
 export { default as FlexItem } from './layout/flex-item.svelte';
 // Modals
-export { default as AlertModal } from './modals/alert.svelte';
-export { default as ConfirmModal } from './modals/confirm.svelte';
-export { default as PromptModal } from './modals/prompt.svelte';
+export { default as Alert } from './modals/alert.svelte';
+export { default as Confirm } from './modals/confirm.svelte';
+export { default as Modal } from './modals/modal.svelte';
+export { default as Prompt } from './modals/prompt.svelte';
 export { default as DialogBody } from './modals/dialog-body.svelte';
 export { default as DialogFooter } from './modals/dialog-footer.svelte';
 export { default as DialogHeader } from './modals/dialog-header.svelte';
 export { default as DialogWindow } from './modals/dialog-window.svelte';
-export { default as Modal } from './modals/modal.svelte';
 // Navigation
 export { default as Accordian } from './navigation/accordian/accordian.svelte';
 export { default as AppBar } from './navigation/app-bar/app-bar.svelte';

package/dist/modals/modal.svelte

@@ -7,16 +7,21 @@ const dispatch = createEventDispatcher();
 export let open = false;
 export let size = "md";
 export let showCloseButton = true;
+export let dismissable = true;
 const close = () => {
+  if (!dismissable)
+    return;
   dispatch("close");
   open = false;
 };
+$:
+  _showCloseButton = dismissable && showCloseButton;
 </script>
 
 {#if open}
 	<Overlay on:click={close}>
 		<Dialog {size}>
-			<DialogCloseButton show={showCloseButton} on:click={close} />
+			<DialogCloseButton show={_showCloseButton} on:click={close} />
 			<DialogBody>
 				<slot />
 			</DialogBody>

package/dist/modals/modal.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         open?: boolean | undefined;
         size?: FormFieldSizeOptions | undefined;
         showCloseButton?: boolean | undefined;
+        dismissable?: boolean | undefined;
     };
     events: {
         close: CustomEvent<void>;

package/dist/placeholders/skeleton-input.svelte

@@ -0,0 +1,45 @@
+<script>import FlexItem from "../layout/flex-item.svelte";
+export let animation = "none";
+</script>
+
+<FlexItem>
+    <div class="box {animation}">
+        <div class="label"></div>
+        <div class="input"></div>
+    </div>
+</FlexItem>
+
+<style>
+    div.pulse {
+        animation: pulse 2s infinite;
+    }
+
+	div.label {
+		height: 1rem;
+		background-color: var(--base-color-fg, #ccc);
+		opacity: 0.5;
+		border-radius: 1rem;
+		margin-bottom: 1rem;
+        width: 35%;
+	}
+    div.input {
+        height: 2rem;
+        width: 100%;
+        border: 1px solid var(--form-input-border, black);
+		background-color: var(--form-input-bg, white);
+        opacity: 0.7;
+        border-radius: 0.25rem;
+    }
+
+    @keyframes pulse {
+		0%,
+		100% {
+			opacity: 0.5;
+            scale: 0.99;
+		}
+		50% {
+			opacity: 1;
+            scale: 1;
+		}
+	}
+</style>

package/dist/placeholders/skeleton-input.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        animation?: "none" | "pulse" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SkeletonInputProps = typeof __propDef.props;
+export type SkeletonInputEvents = typeof __propDef.events;
+export type SkeletonInputSlots = typeof __propDef.slots;
+export default class SkeletonInput extends SvelteComponent<SkeletonInputProps, SkeletonInputEvents, SkeletonInputSlots> {
+}
+export {};

package/dist/placeholders/skeleton-text.svelte

@@ -1,18 +1,29 @@
 <script>import { randomInt } from "../helpers/random.js";
 export let min = 50;
 export let max = 100;
+export let animation = "none";
 $:
   width = randomInt(min, max);
 </script>
 
-<div style="width: {width}%" />
+<div class="{animation}" style="width: {width}%" />
 
-<style>
-	div {
-		height: 1rem;
-		background-color: var(--base-color-fg, #ccc);
-		opacity: 0.5;
-		border-radius: 1rem;
-		margin-bottom: 1rem;
-	}
-</style>
+<style>div {
+  height: 1rem;
+  background-color: var(--base-color-fg, #ccc);
+  opacity: 0.5;
+  border-radius: 1rem;
+  margin-bottom: 1rem;
+}
+div.pulse {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+}</style>

package/dist/placeholders/skeleton-text.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         min?: number | undefined;
         max?: number | undefined;
+        animation?: "none" | "pulse" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/tables/data-grid.svelte

@@ -12,6 +12,7 @@ import Button from "../forms/button/button.svelte";
 import Empty from "../generic/empty/empty.svelte";
 import Pill from "../generic/pill/pill.svelte";
 import FolderOpenIcon from "../icons/folder-open-icon.svelte";
+import { formatDateTime } from "../index.js";
 import Pagination from "../navigation/pagination/pagination.svelte";
 import Loading from "../placeholders/loading.svelte";
 import TableCaption from "./table-caption.svelte";
@@ -39,6 +40,10 @@ const format = (row, key) => {
     return col.emptyText;
   if (col.format)
     return col.format(row, key);
+  if (col.type === "date")
+    return formatDateTime(String(row[key])).substring(0, 10);
+  if (col.type === "date-time")
+    return formatDateTime(String(row[key]));
   return row[key];
 };
 const calculateTotalPages = () => {
@@ -113,11 +118,11 @@ $:
 							<TableCell type={col.type || typeof row[col.key]} width={col.width}>
 								{#if col.link}
 									<a href={col.link(row, col.key)}>{format(row, col.key)}</a>
-								{:else if col.type == 'email' && row[col.key]}
+									{:else if col.type == 'email' && row[col.key]}
 									<a href={`mailto:${row[col.key]}`}>{format(row, col.key)}</a>
 								{:else if col.type == 'check'}
 									{#if row[col.key]}
-										<Pill shape="circular" style="positive">✔</Pill>
+										<Pill shape="circle" style="positive" compact>✔</Pill>
 									{/if}
 								{:else}
 									{format(row, col.key)}

package/package.json

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