sveltacular 0.0.19 → 0.0.21

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

@@ -11,6 +11,7 @@ export let size = "full";
 export let disabled = false;
 export let required = false;
 export let searchable = false;
+export let search = void 0;
 const getText = () => items.find((item) => item.value == value)?.name || "";
 const onSelect = (e) => {
   value = e.detail.value;
@@ -52,10 +53,19 @@ const onInputKeyPress = (e) => {
     triggerSearch();
   }
 };
-const triggerSearch = debounce(() => {
+const triggerSearch = debounce(async () => {
   dispatch("search", searchText);
+  if (search) {
+    items = await search(searchText);
+    text = getText();
+  }
 }, 300);
 const dispatch = createEventDispatcher();
+const updateText = async () => {
+  const textBox = document.getElementById(id);
+  if (document.activeElement != textBox)
+    text = getText();
+};
 const id = uniqueId();
 let text = getText();
 let open = false;
@@ -64,6 +74,9 @@ $:
   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 && updateText();
+triggerSearch();
 </script>
 
 <FormField {size}>
@@ -80,6 +93,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/list-box/list-box.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         required?: boolean | undefined;
         searchable?: boolean | undefined;
+        search?: ((text: string) => Promise<DropdownOption[]>) | undefined;
     };
     events: {
         change: CustomEvent<string>;

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

@@ -69,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

@@ -77,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/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.19",
+	"version": "0.0.21",
 	"scripts": {
 		"watch": "npm run dev -- --open",
 		"dev": "vite dev",