sveltacular 0.0.65 → 0.0.67

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

@@ -28,6 +28,7 @@ const cleanValue = (value2) => {
 };
 const publishChange = () => {
   value = cleanValue(`${areaCode}${localExt}${lastFour}`);
+  console.log("publishChange", value);
   dispatch("change", value);
   return value;
 };
@@ -53,8 +54,7 @@ const valueChanged = (event) => {
   }
   props.target.value = newValue.slice(0, props.maxLength);
   if (newValue.length >= props.maxLength) {
-    if (props.nextInput)
-      props.nextInput.focus();
+    setTimeout(() => props.nextInput && props.nextInput.focus(), 1);
   }
 };
 const keyDown = (event) => {
@@ -78,7 +78,6 @@ const keyDown = (event) => {
     return isDelete ? props.value.slice(0, -1) : props.value + event.key;
   })();
   if (newValue.length >= props.maxLength) {
-    event.preventDefault();
     props.target.value = newValue.slice(0, props.maxLength);
     if (props.nextInput)
       props.nextInput.focus();

package/dist/generic/card/card-container.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        align?: "center" | "end" | "start" | "left" | "right" | undefined;
-        spacing?: "none" | "tight" | "compact" | "loose" | "space-evenly" | "space-around" | "space-between" | undefined;
+        align?: "start" | "center" | "end" | "left" | "right" | undefined;
+        spacing?: "none" | "space-between" | "space-around" | "space-evenly" | "tight" | "compact" | "loose" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -5,7 +5,7 @@ declare const __propDef: {
         size?: "sm" | "md" | "lg" | "xl" | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
         reverse?: boolean | undefined;
-        align?: "center" | "end" | "start" | undefined;
+        align?: "start" | "center" | "end" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/generic/phone/phone.svelte

@@ -1,23 +1,23 @@
 <script>import { capitalize } from "../../helpers/capitalize.js";
 import MobilePhoneIcon from "../../icons/mobile-phone-icon.svelte";
 import PhoneIcon from "../../icons/phone-icon.svelte";
-export let phoneNumber;
+export let value;
 export let type = "mobile";
-const getDigits = (phoneNumber2) => {
-  return phoneNumber2.replace(/[^0-9]/g, "");
+const getDigits = (phoneNumber) => {
+  return phoneNumber.replace(/[^0-9]/g, "");
 };
-const formatPhoneNumber = (phoneNumber2) => {
-  const cleaned = getDigits(phoneNumber2);
+const formatPhoneNumber = (phoneNumber) => {
+  const cleaned = getDigits(phoneNumber);
   const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
   if (match) {
     return "(" + match[1] + ") " + match[2] + "-" + match[3];
   }
-  return phoneNumber2;
+  return phoneNumber;
 };
 $:
-  formattedPhoneNumber = formatPhoneNumber(phoneNumber);
+  formattedPhoneNumber = formatPhoneNumber(value);
 $:
-  phoneNumberDigits = getDigits(phoneNumber);
+  phoneNumberDigits = getDigits(value);
 $:
   protocol = type === "sms" ? "sms:" : "tel:";
 $:

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        phoneNumber: string;
+        value: string;
         type?: "sms" | "mobile" | "home" | "work" | "fax" | "other" | undefined;
     };
     events: {

package/dist/layout/flex-col.svelte

@@ -1,9 +1,27 @@
 <script>export let marginBottom = 0;
 export let marginTop = 0;
 export let gap = "1rem";
+export let justifyContent = "start";
+export let alignItems = "stretch";
+export let alignContent = "stretch";
+$:
+  _marginTop = typeof marginTop === "number" ? `${marginTop}px` : marginTop;
+$:
+  _marginBottom = typeof marginBottom === "number" ? `${marginBottom}px` : marginBottom;
+$:
+  _justifyContent = ["start", "end"].includes(justifyContent) ? `flex-${justifyContent}` : ["between", "around", "evenly"].includes(justifyContent) ? `space-${justifyContent}` : justifyContent;
+$:
+  _alignContent = ["start", "end"].includes(alignContent) ? `flex-${alignContent}` : ["between", "around"].includes(alignContent) ? `space-${alignContent}` : alignContent;
+$:
+  _alignItems = ["start", "end"].includes(alignItems) ? `flex-${alignItems}` : alignItems;
+$:
+  _gap = typeof gap === "number" ? `${gap}px` : gap;
 </script>
 
-<div style={`margin-top: ${marginTop}; margin-bottom: ${marginBottom}; gap: ${gap}`}>
+<div style={`
+	margin-top: ${_marginTop}; margin-bottom: ${_marginBottom}; 
+	gap: ${_gap}; jusify-content: ${_justifyContent}; align-items: ${_alignItems}; align-content: ${_alignContent}
+`}>
 	<slot />
 </div>
 

package/dist/layout/flex-col.svelte.d.ts

@@ -4,6 +4,9 @@ declare const __propDef: {
         marginBottom?: string | number | undefined;
         marginTop?: string | number | undefined;
         gap?: string | number | undefined;
+        justifyContent?: "start" | "center" | "end" | "stretch" | "baseline" | "between" | "around" | "evenly" | undefined;
+        alignItems?: "auto" | "start" | "center" | "end" | "stretch" | undefined;
+        alignContent?: "start" | "center" | "end" | "stretch" | "between" | "around" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/layout/flex-item.svelte

@@ -1,7 +1,7 @@
-<script>
-	export let grow = false;
+<script>export let grow = false;
+export let align = "auto";
 </script>
 
-<div style={`flex: ${grow ? 1 : 0}`}>
+<div style={`flex: ${grow ? 1 : 0}; align-self: ${align}`}>
 	<slot />
 </div>

package/dist/layout/flex-item.svelte.d.ts

@@ -1,21 +1,8 @@
-/** @typedef {typeof __propDef.props}  FlexItemProps */
-/** @typedef {typeof __propDef.events}  FlexItemEvents */
-/** @typedef {typeof __propDef.slots}  FlexItemSlots */
-export default class FlexItem extends SvelteComponent<{
-    grow?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type FlexItemProps = typeof __propDef.props;
-export type FlexItemEvents = typeof __propDef.events;
-export type FlexItemSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         grow?: boolean | undefined;
+        align?: "auto" | "start" | "center" | "end" | "stretch" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type FlexItemProps = typeof __propDef.props;
+export type FlexItemEvents = typeof __propDef.events;
+export type FlexItemSlots = typeof __propDef.slots;
+export default class FlexItem extends SvelteComponent<FlexItemProps, FlexItemEvents, FlexItemSlots> {
+}
 export {};

package/dist/layout/flex-row.svelte

@@ -1,14 +1,31 @@
 <script>export let marginBottom = 0;
 export let marginTop = 0;
 export let gap = "1rem";
-export let layout = "stretch";
 export let size = "full";
 export let wrap = false;
+export let justifyContent = "space-between";
+export let alignItems = "stretch";
+export let alignContent = "stretch";
+$:
+  _marginTop = typeof marginTop === "number" ? `${marginTop}px` : marginTop;
+$:
+  _marginBottom = typeof marginBottom === "number" ? `${marginBottom}px` : marginBottom;
+$:
+  _justifyContent = ["start", "end"].includes(justifyContent) ? `flex-${justifyContent}` : ["between", "around", "evenly"].includes(justifyContent) ? `space-${justifyContent}` : justifyContent;
+$:
+  _alignContent = ["start", "end"].includes(alignContent) ? `flex-${alignContent}` : ["between", "around"].includes(alignContent) ? `space-${alignContent}` : alignContent;
+$:
+  _alignItems = ["start", "end"].includes(alignItems) ? `flex-${alignItems}` : alignItems;
+$:
+  _gap = typeof gap === "number" ? `${gap}px` : gap;
 </script>
 
 <div
-	style={`margin-top: ${marginTop}; margin-bottom: ${marginBottom}; gap: ${gap}`}
-	class="{layout} {size} {wrap ? 'wrap' : 'nowrap'}"
+	style={`
+		margin-top: ${_marginTop}; margin-bottom: ${_marginBottom}; gap: ${_gap}; 
+		justify-content: ${_justifyContent}; align-items: ${_alignItems}; align-content: ${_alignContent};
+	`}
+	class="size-{size} {wrap ? 'wrap' : 'nowrap'}"
 >
 	<slot />
 </div>
@@ -16,26 +33,12 @@ export let wrap = false;
 <style>div {
   display: flex;
   width: 100%;
-  justify-content: center;
-  align-items: center;
   flex-wrap: nowrap;
   column-gap: 1rem;
 }
-div.auto {
+div.size-auto {
   width: auto;
 }
 div.wrap {
   flex-wrap: wrap;
-}
-div.stretch {
-  justify-content: space-between;
-  align-items: stretch;
-}
-div.end {
-  justify-content: flex-end;
-  align-items: flex-end;
-}
-div.start {
-  justify-content: flex-start;
-  align-items: flex-start;
 }</style>

package/dist/layout/flex-row.svelte.d.ts

@@ -4,9 +4,11 @@ declare const __propDef: {
         marginBottom?: string | number | undefined;
         marginTop?: string | number | undefined;
         gap?: string | number | undefined;
-        layout?: "stretch" | "center" | "end" | "start" | undefined;
         size?: "full" | "auto" | undefined;
         wrap?: boolean | undefined;
+        justifyContent?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly" | "baseline" | undefined;
+        alignItems?: "auto" | "start" | "center" | "end" | "stretch" | undefined;
+        alignContent?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/navigation/app-bar/app-nav.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        align?: "center" | "end" | "start" | "left" | "right" | undefined;
-        spacing?: "none" | "tight" | "loose" | "space-evenly" | "space-around" | "space-between" | "medium" | undefined;
+        align?: "start" | "center" | "end" | "left" | "right" | undefined;
+        spacing?: "none" | "space-between" | "space-around" | "space-evenly" | "tight" | "loose" | "medium" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/navigation/pagination/pagination.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         currentPage?: number | undefined;
         totalPages?: number | undefined;
-        align?: "center" | "end" | "start" | undefined;
+        align?: "start" | "center" | "end" | undefined;
         style?: "default" | "flat" | undefined;
         size?: "sm" | "md" | "lg" | "xl" | undefined;
     };

package/package.json

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