sveltacular 0.0.18 → 0.0.20

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

@@ -64,6 +64,8 @@ $:
   searchText = searchable ? text : "";
 $:
   filteredItems = searchText ? items.map((item, index) => ({ ...item, index })).filter((item) => item.name.toLowerCase().includes(searchText.toLowerCase())) : items.map((item, index) => ({ ...item, index }));
+$:
+  items && (text = getText());
 </script>
 
 <FormField {size}>
@@ -80,6 +82,8 @@ $:
 			readonly={!searchable}
 			on:focus={() => (open = true)}
 			on:keyup={onInputKeyPress}
+			data-value={value}
+			data-text={text}
 		/>
 		<button type="button" class="icon" on:click={toggle} on:keydown={toggle}>
 			<AngleUpIcon />

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

@@ -0,0 +1,16 @@
+<script>import NumberBox from "../number-box/number-box.svelte";
+export let value;
+export let symbol = "$";
+export let allowCents = false;
+export let placeholder = "";
+export let size = "full";
+export let step = 1;
+export let min = 0;
+export let max = 1e6;
+$:
+  decimals = allowCents ? 2 : 0;
+</script>
+
+<NumberBox bind:value {symbol} {decimals} {placeholder} {size} {min} {max} {step}
+	><slot /></NumberBox
+>

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../../index.js';
+declare const __propDef: {
+    props: {
+        value: number;
+        symbol?: string | undefined;
+        allowCents?: boolean | undefined;
+        placeholder?: string | undefined;
+        size?: FormFieldSizeOptions | undefined;
+        step?: number | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type MoneyBoxProps = typeof __propDef.props;
+export type MoneyBoxEvents = typeof __propDef.events;
+export type MoneyBoxSlots = typeof __propDef.slots;
+export default class MoneyBox extends SvelteComponent<MoneyBoxProps, MoneyBoxEvents, MoneyBoxSlots> {
+}
+export {};

package/dist/helpers/random.d.ts

@@ -0,0 +1,24 @@
+export declare const randomInt: (min: number, max: number) => number;
+export declare const randomFloat: (min: number, max: number) => number;
+export declare const randomBool: () => boolean;
+export declare const randomString: (length: number) => string;
+export declare const randomDate: (start: Date, end: Date) => Date;
+export declare const randomColor: () => string;
+export declare const randomHex: (length: number) => string;
+export declare const randomRGB: () => string;
+export declare const randomRGBA: () => string;
+export declare const randomHSL: () => string;
+export declare const randomHSLA: () => string;
+export declare const randomEmail: () => string;
+export declare const randomPhone: () => string;
+export declare const randomAddress: () => string;
+export declare const randomCity: () => string;
+export declare const randomState: () => string;
+export declare const randomZip: () => string;
+export declare const randomCountry: () => string;
+export declare const randomName: () => string;
+export declare const randomFirstName: () => string;
+export declare const randomLastName: () => string;
+export declare const randomUsername: () => string;
+export declare const randomPassword: () => string;
+export declare const randomAvatar: () => string;

package/dist/helpers/random.js

@@ -0,0 +1,108 @@
+// Generate random integer between min and max
+export const randomInt = (min, max) => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+// Generate random float between min and max
+export const randomFloat = (min, max) => {
+    return Math.random() * (max - min) + min;
+};
+// Generate random boolean
+export const randomBool = () => {
+    return Math.random() >= 0.5;
+};
+// Generate random string
+export const randomString = (length) => {
+    let result = '';
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    const charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+};
+// Generate random date
+export const randomDate = (start, end) => {
+    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+};
+// Generate random color
+export const randomColor = () => {
+    return '#' + Math.floor(Math.random() * 16777215).toString(16);
+};
+// Generate random hex
+export const randomHex = (length) => {
+    let result = '';
+    const characters = 'abcdef0123456789';
+    const charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+};
+// Generate random rgb
+export const randomRGB = () => {
+    return `rgb(${randomInt(0, 255)}, ${randomInt(0, 255)}, ${randomInt(0, 255)})`;
+};
+// Generate random rgba
+export const randomRGBA = () => {
+    return `rgba(${randomInt(0, 255)}, ${randomInt(0, 255)}, ${randomInt(0, 255)}, ${randomFloat(0, 1)})`;
+};
+// Generate random hsl
+export const randomHSL = () => {
+    return `hsl(${randomInt(0, 360)}, ${randomInt(0, 100)}%, ${randomInt(0, 100)}%)`;
+};
+// Generate random hsla
+export const randomHSLA = () => {
+    return `hsla(${randomInt(0, 360)}, ${randomInt(0, 100)}%, ${randomInt(0, 100)}%, ${randomFloat(0, 1)})`;
+};
+// Generate random email
+export const randomEmail = () => {
+    return `${randomString(10)}@${randomString(5)}.com`;
+};
+// Generate random phone number
+export const randomPhone = () => {
+    return `${randomInt(100, 999)}-${randomInt(100, 999)}-${randomInt(1000, 9999)}`;
+};
+// Generate random address
+export const randomAddress = () => {
+    return `${randomInt(100, 999)} ${randomString(10)} ${randomString(5)}`;
+};
+// Generate random city
+export const randomCity = () => {
+    return `${randomString(10)}`;
+};
+// Generate random state
+export const randomState = () => {
+    return `${randomString(2)}`;
+};
+// Generate random zip
+export const randomZip = () => {
+    return `${randomInt(10000, 99999)}`;
+};
+// Generate random country
+export const randomCountry = () => {
+    return `${randomString(10)}`;
+};
+// Generate random name
+export const randomName = () => {
+    return `${randomString(10)} ${randomString(10)}`;
+};
+// Generate random first name
+export const randomFirstName = () => {
+    return `${randomString(10)}`;
+};
+// Generate random last name
+export const randomLastName = () => {
+    return `${randomString(10)}`;
+};
+// Generate random username
+export const randomUsername = () => {
+    return `${randomString(10)}`;
+};
+// Generate random password
+export const randomPassword = () => {
+    return `${randomString(10)}`;
+};
+// Generate random avatar
+export const randomAvatar = () => {
+    return `https://avatars.dicebear.com/api/avataaars/${randomString(10)}.svg`;
+};

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as BoolBox } from './forms/bool-box/bool-box.svelte';
 export { default as FileBox } from './forms/file-box/file-box.svelte';
 export { default as FileArea } from './forms/file-area/file-area.svelte';
 export { default as NumberBox } from './forms/number-box/number-box.svelte';
+export { default as MoneyBox } from './forms/money-box/money-box.svelte';
 export { default as RadioGroup } from './forms/radio-group/radio-group.svelte';
 export { default as TextArea } from './forms/text-area/text-area.svelte';
 export { default as TextBox } from './forms/text-box/text-box.svelte';
@@ -68,6 +69,8 @@ export { default as CodeBlock } from './typography/code-block.svelte';
 export { default as Paragraph } from './typography/paragraph.svelte';
 export { default as Timeline } from './timeline/timeline.svelte';
 export { default as TimelineItem } from './timeline/timeline-item.svelte';
+export { default as Loading } from './placeholders/loading.svelte';
+export { default as SkeletonText } from './placeholders/skeleton-text.svelte';
 export * from './types/data.js';
 export * from './types/date.js';
 export * from './types/form.js';

package/dist/index.js

@@ -8,6 +8,7 @@ export { default as BoolBox } from './forms/bool-box/bool-box.svelte';
 export { default as FileBox } from './forms/file-box/file-box.svelte';
 export { default as FileArea } from './forms/file-area/file-area.svelte';
 export { default as NumberBox } from './forms/number-box/number-box.svelte';
+export { default as MoneyBox } from './forms/money-box/money-box.svelte';
 export { default as RadioGroup } from './forms/radio-group/radio-group.svelte';
 export { default as TextArea } from './forms/text-area/text-area.svelte';
 export { default as TextBox } from './forms/text-box/text-box.svelte';
@@ -76,6 +77,9 @@ export { default as Paragraph } from './typography/paragraph.svelte';
 // Timeline
 export { default as Timeline } from './timeline/timeline.svelte';
 export { default as TimelineItem } from './timeline/timeline-item.svelte';
+// Placeholders
+export { default as Loading } from './placeholders/loading.svelte';
+export { default as SkeletonText } from './placeholders/skeleton-text.svelte';
 // Types
 export * from './types/data.js';
 export * from './types/date.js';

package/dist/navigation/app-bar/app-logo.svelte

@@ -1,18 +1,30 @@
 <script>import Image from "../../images/image.svelte";
-export let src;
+export let src = void 0;
 export let alt;
 export let href;
 </script>
 
 <div class="logo">
-	<Image {src} {alt} {href} align="left" />
+	{#if src}
+		<Image {src} {alt} {href} align="left" />
+	{:else}
+		<a {href} title={alt}><slot /></a>
+	{/if}
 </div>
 
-<style>
-	div {
-		display: block;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-	}
-</style>
+<style>div {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+div a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-decoration: none;
+  color: var(--nav-link-fg, #333);
+}
+div a:hover {
+  color: var(--nav-link-hover-fg, #333);
+}</style>

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

@@ -1,14 +1,16 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        src: string;
+        src?: string | undefined;
         alt: string;
         href: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type AppLogoProps = typeof __propDef.props;
 export type AppLogoEvents = typeof __propDef.events;

package/dist/placeholders/loading.svelte

@@ -0,0 +1,56 @@
+<script>export let type = "spinner";
+</script>
+
+<div class={type}>
+	<span>
+		<slot />
+	</span>
+</div>
+
+<style>div {
+  text-align: center;
+}
+div span {
+  display: block;
+  width: 100%;
+  padding: 1rem;
+}
+div.spinner {
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+}
+div.block {
+  width: 100%;
+  height: 100%;
+  background-color: #ccc;
+  color: #888;
+  font-size: 1.5rem;
+  font-family: var(--base-font-family, sans-serif);
+  animation: pulse 2s infinite;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.5;
+    transform: scale(0.95);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}</style>

package/dist/placeholders/loading.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        type?: "block" | "spinner" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type LoadingProps = typeof __propDef.props;
+export type LoadingEvents = typeof __propDef.events;
+export type LoadingSlots = typeof __propDef.slots;
+export default class Loading extends SvelteComponent<LoadingProps, LoadingEvents, LoadingSlots> {
+}
+export {};

package/dist/placeholders/skeleton-text.svelte

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

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        min?: number | undefined;
+        max?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SkeletonTextProps = typeof __propDef.props;
+export type SkeletonTextEvents = typeof __propDef.events;
+export type SkeletonTextSlots = typeof __propDef.slots;
+export default class SkeletonText extends SvelteComponent<SkeletonTextProps, SkeletonTextEvents, SkeletonTextSlots> {
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.18",
+	"version": "0.0.20",
 	"scripts": {
 		"watch": "npm run dev -- --open",
 		"dev": "vite dev",