@functionalcms/svelte-components 4.0.0-pre-2.4 → 4.0.1

package/dist/components/blog/blog.d.ts

@@ -0,0 +1,20 @@
+export interface BlogPost {
+    slug: string;
+    title: string;
+    author: string;
+    description: string;
+    date: string;
+    published: boolean;
+}
+export interface MdsvexFile {
+    default: any;
+    metadata: Record<string, string>;
+}
+export type MdsvexResolver = () => Promise<MdsvexFile>;
+export declare function listAllPosts(page?: number, postCount?: number): Promise<{
+    posts: BlogPost[];
+}>;
+export declare function importPost(loadEvent: any): Promise<{
+    component: any;
+    frontmatter: Record<string, string> | undefined;
+}>;

package/dist/components/blog/blog.js

@@ -0,0 +1,29 @@
+const MAX_POSTS = 25;
+const slugFromPath = (path) => path.match(/([\w-]+)\.(svelte\.md|md|svx)/i)?.[1] ?? null;
+export async function listAllPosts(page = 0, postCount = MAX_POSTS) {
+    const modules = import.meta.glob(`/src/posts/*.{md,svx,svelte.md}`);
+    const postPromises = Object.entries(modules).map(([path, resolver]) => resolver().then((post) => ({
+        slug: slugFromPath(path),
+        ...post.metadata
+    })));
+    const posts = await Promise.all(postPromises);
+    const publishedPosts = posts.filter((post) => post.published).slice(page, postCount);
+    publishedPosts.sort((a, b) => (new Date(a.date) > new Date(b.date) ? -1 : 1));
+    return { posts: publishedPosts };
+}
+export async function importPost(loadEvent) {
+    const modules = import.meta.glob(`/src/posts/*.{md,svx,svelte.md}`);
+    let match = {};
+    for (const [path, resolver] of Object.entries(modules)) {
+        if (slugFromPath(path) === loadEvent.params.slug) {
+            match = { path, resolver: resolver };
+            break;
+        }
+    }
+    const post = await match?.resolver?.();
+    return {
+        component: post?.default,
+        frontmatter: post?.metadata
+    };
+}
+;

package/dist/components/form/Button.svelte

@@ -1,110 +1,115 @@
-<script lang="ts">
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		children: Snippet;
-		css: string;
-		style: string;
-		type?: 'submit' | 'reset' | 'button' | 'link';
-		mode?: string;
-		size?: string;
-		isBordered?: boolean;
-		isCapsule?: boolean;
-		isGrouped?: boolean;
-		isBlock?: boolean;
-		isLink?: boolean;
-		isBlank?: boolean;
-		isDisabled?: boolean;
-		role?: string;
-		isCircle?: boolean;
-		isRounded?: boolean;
-		isSkinned?: boolean;
-		ariaSelected?: boolean;
-		ariaControls?: string;
-		tabIndex?: number;
-		onclick?: () => void;
-		onkeydown?: (e: KeyboardEvent) => void;
-	}
-
-	let {
-		children,
-		css = '',
-		style = '',
-		mode = undefined,
-		size = undefined,
-		type = 'button',
-		isBordered = false,
-		isCapsule = false,
-		isGrouped = false,
-		isBlock = false,
-		isLink = false,
-		isBlank = false,
-		isDisabled = false,
-		role = undefined,
-		isCircle = false,
-		isRounded = false,
-		isSkinned = true,
-		ariaSelected = undefined,
-		ariaControls = undefined,
-		tabIndex = 0,
-		onclick = undefined,
-		onkeydown = undefined,
-		...restProps
-	}: Partial<Props> = $props();
-
-	let klasses = $derived(
-		cn(
-			isSkinned ? 'btn' : 'btn-base',
-			mode ? `btn-${mode}` : '',
-			size ? `btn-${size}` : '',
-			isBordered ? 'btn-bordered' : '',
-			isCapsule ? 'btn-capsule ' : '',
-			isGrouped ? 'btn-grouped' : '',
-			isBlock ? 'btn-block' : '',
-			isCircle ? 'btn-circle' : '',
-			isRounded ? 'btn-rounded' : '',
-			isDisabled ? 'disabled' : '',
-			isBlank ? 'btn-blank' : '',
-			isLink ? 'btn-link' : '',
-			css ? `${css}` : ''
-		)
-	);
-</script>
-
-{#if type == 'link'}
-	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-	<a
-		class={klasses}
-		{style}
-		{role}
-		aria-selected={ariaSelected}
-		aria-controls={ariaControls}
-		tabindex={tabIndex}
-		{onclick}
-		{onkeydown}
-		{...restProps}
-	>
-		{@render children?.()}
-	</a>
-{:else}
-	<button
-		{type}
-		class={klasses}
-		{style}
-		{role}
-		aria-selected={ariaSelected}
-		aria-controls={ariaControls}
-		tabindex={tabIndex}
-		disabled={isDisabled}
-		{onclick}
-		{onkeydown}
-		{...restProps}
-	>
-		{@render children?.()}
-	</button>
-{/if}
-
+<script lang="ts">
+	import { cn } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		css: string;
+		style: string;
+		type?: 'submit' | 'reset' | 'button' | 'link';
+		href: string;
+		mode?: string;
+		size?: string;
+		isPrimary: boolean;
+		isBordered?: boolean;
+		isCapsule?: boolean;
+		isGrouped?: boolean;
+		isBlock?: boolean;
+		isLink?: boolean;
+		isBlank?: boolean;
+		isDisabled?: boolean;
+		role?: string;
+		isCircle?: boolean;
+		isRounded?: boolean;
+		isSkinned?: boolean;
+		ariaSelected?: boolean;
+		ariaControls?: string;
+		tabIndex?: number;
+		onclick?: () => void;
+		onkeydown?: (e: KeyboardEvent) => void;
+	}
+
+	let {
+		children,
+		css = '',
+		style = '',
+		href = '',
+		mode = undefined,
+		size = undefined,
+		type = 'button',
+		isPrimary = false,
+		isBordered = false,
+		isCapsule = false,
+		isGrouped = false,
+		isBlock = false,
+		isLink = false,
+		isBlank = false,
+		isDisabled = false,
+		role = undefined,
+		isCircle = false,
+		isRounded = false,
+		isSkinned = true,
+		ariaSelected = undefined,
+		ariaControls = undefined,
+		tabIndex = 0,
+		onclick = undefined,
+		onkeydown = undefined,
+		...restProps
+	}: Partial<Props> = $props();
+
+	let klasses = $derived(
+		cn(
+			isSkinned ? 'btn' : 'btn-base',
+			mode ? `btn-${mode}` : '',
+			size ? `btn-${size}` : '',
+			isBordered ? 'btn-bordered' : '',
+			isCapsule ? 'btn-capsule ' : '',
+			isGrouped ? 'btn-grouped' : '',
+			isBlock ? 'btn-block' : '',
+			isCircle ? 'btn-circle' : '',
+			isRounded ? 'btn-rounded' : '',
+			isDisabled ? 'disabled' : '',
+			isBlank ? 'btn-blank' : '',
+			isLink ? 'btn-link' : '',
+			css ? `${css}` : ''
+		)
+	);
+</script>
+
+{#if type == 'link'}
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<a
+		class={klasses}
+		{href}
+		{style}
+		{role}
+		aria-selected={ariaSelected}
+		aria-controls={ariaControls}
+		tabindex={tabIndex}
+		{onclick}
+		{onkeydown}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		{type}
+		class={klasses}
+		{style}
+		{role}
+		aria-selected={ariaSelected}
+		aria-controls={ariaControls}
+		tabindex={tabIndex}
+		disabled={isDisabled}
+		{onclick}
+		{onkeydown}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
+
 <style>.btn-base {
   display: inline-flex;
   align-items: center;
@@ -376,4 +381,4 @@ on the side padding. As such, these have a good bit less then regular buttons. *
 
 .btn-link:hover {
   cursor: pointer;
-}</style>
+}</style>

package/dist/components/form/Button.svelte.d.ts

@@ -4,8 +4,10 @@ declare const Button: import("svelte").Component<Partial<{
     css: string;
     style: string;
     type?: "submit" | "reset" | "button" | "link";
+    href: string;
     mode?: string;
     size?: string;
+    isPrimary: boolean;
     isBordered?: boolean;
     isCapsule?: boolean;
     isGrouped?: boolean;

package/dist/components/form/Input.d.ts

@@ -1,21 +1,2 @@
-export declare enum Type {
-    Text = "text",
-    Textarea = "textarea",
-    Email = "email",
-    Search = "search",
-    Password = "password",
-    Tel = "tel",
-    Number = "number",
-    Url = "url",
-    Month = "month",
-    Time = "time",
-    Week = "week",
-    Date = "date",
-    DatetimeLocal = "datetime-local",
-    Color = "color"
-}
-export declare enum Size {
-    Small = "small",
-    Large = "large",
-    Normal = ""
-}
+export type Type = 'text' | 'textarea' | 'email' | 'search' | 'password' | 'tel' | 'number' | 'url' | 'month' | 'time' | 'week' | 'date' | 'datetime-local' | 'color';
+export type LabelSize = 'small' | 'large' | '';

package/dist/components/form/Input.js

@@ -1,23 +1 @@
-export var Type;
-(function (Type) {
-    Type["Text"] = "text";
-    Type["Textarea"] = "textarea";
-    Type["Email"] = "email";
-    Type["Search"] = "search";
-    Type["Password"] = "password";
-    Type["Tel"] = "tel";
-    Type["Number"] = "number";
-    Type["Url"] = "url";
-    Type["Month"] = "month";
-    Type["Time"] = "time";
-    Type["Week"] = "week";
-    Type["Date"] = "date";
-    Type["DatetimeLocal"] = "datetime-local";
-    Type["Color"] = "color";
-})(Type || (Type = {}));
-export var Size;
-(function (Size) {
-    Size["Small"] = "small";
-    Size["Large"] = "large";
-    Size["Normal"] = "";
-})(Size || (Size = {}));
+export {};