@functionalcms/svelte-components 5.0.0-beta2 → 5.0.0-beta3

package/dist/components/Icon.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-    import * as FlowbiteIcons from "flowbite-svelte-icons"
-    import { IconSize } from "./icons.js";
-
-    interface Props {
-        icon?: string;
-        size?: IconSize;
-        class?: string;
-    }
-    let { icon, size = IconSize.Medium, class: className = '' } : Props = $props();
-</script>
-
-{#if icon != undefined}
-{@const Component = FlowbiteIcons[icon]}
-<Component class={`${className} ${size}`} />
-{/if}
+<script lang="ts">
+    import * as FlowbiteIcons from "flowbite-svelte-icons"
+    import { IconSize } from "./icons.js";
+
+    interface Props {
+        icon?: string;
+        size?: IconSize;
+        class?: string;
+    }
+    let { icon, size = IconSize.Medium, class: className = '' } : Props = $props();
+</script>
+
+{#if icon != undefined}
+{@const Component = FlowbiteIcons[icon]}
+<Component class={`${className} ${size}`} />
+{/if}

package/dist/components/content/Markdown.svelte

@@ -1,10 +1,10 @@
-<!-- <script lang="ts">
-	import { marked } from 'marked';
-
-	/** @type {{ data: import('./$types').PageData }} */
-	let { source = $bindable() } = $props();
-
-    const code = $derived(marked.parse(source));
-</script>
-
-{@html code} -->
+<!-- <script lang="ts">
+	import { marked } from 'marked';
+
+	/** @type {{ data: import('./$types').PageData }} */
+	let { source = $bindable() } = $props();
+
+    const code = $derived(marked.parse(source));
+</script>
+
+{@html code} -->

package/dist/components/form/AntiBot.svelte

@@ -1,12 +1,12 @@
-<div>
-	<label for="human-detection">Please do not check it</label>
-	<input id="human-detection" name="human-detection" />
-</div>
-
-<style>
-	div,
-	label,
-	input {
-		display: none !important;
-	}
-</style>
+<div>
+	<label for="human-detection">Please do not check it</label>
+	<input id="human-detection" name="human-detection" />
+</div>
+
+<style>
+	div,
+	label,
+	input {
+		display: none !important;
+	}
+</style>

package/dist/components/form/Dropzone.svelte

@@ -1,180 +1,180 @@
-<script lang="ts">
-	import { displaySize, type FileDropZoneProps, type FileRejectedReason } from './dropzone.js';
-
-	let {
-		id,
-		children,
-		maxFiles,
-		maxFileSize,
-		fileCount,
-		disabled = false,
-		onUpload,
-		onFileRejected,
-		accept,
-		class: css,
-		...rest
-	}: FileDropZoneProps = $props();
-	
-
-	if (maxFiles !== undefined && fileCount === undefined) {
-		console.warn(
-			'Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt'
-		);
-	}
-
-	let uploading = $state(false);
-
-	const drop = async (
-		e: DragEvent & {
-			currentTarget: EventTarget & HTMLLabelElement;
-		}
-	) => {
-		if (disabled || !canUploadFiles) return;
-
-		e.preventDefault();
-
-		const droppedFiles = Array.from(e.dataTransfer?.files ?? []);
-
-		await upload(droppedFiles);
-	};
-
-	const change = async (
-		e: Event & {
-			currentTarget: EventTarget & HTMLInputElement;
-		}
-	) => {
-		if (disabled) return;
-
-		const selectedFiles = e.currentTarget.files;
-
-		if (!selectedFiles) return;
-
-		await upload(Array.from(selectedFiles));
-
-		// this if a file fails and we upload the same file again we still get feedback
-		(e.target as HTMLInputElement).value = '';
-	};
-
-	const shouldAcceptFile = (file: File, fileNumber: number): FileRejectedReason | undefined => {
-		if (maxFileSize !== undefined && file.size > maxFileSize) return 'Maximum file size exceeded';
-
-		if (maxFiles !== undefined && fileNumber > maxFiles) return 'Maximum files uploaded';
-
-		if (!accept) return undefined;
-
-		const acceptedTypes = accept.split(',').map((a) => a.trim().toLowerCase());
-		const fileType = file.type.toLowerCase();
-		const fileName = file.name.toLowerCase();
-
-		const isAcceptable = acceptedTypes.some((pattern) => {
-			// check extension like .mp4
-			if (fileType.startsWith('.')) {
-				return fileName.endsWith(pattern);
-			}
-
-			// if pattern has wild card like video/*
-			if (pattern.endsWith('/*')) {
-				const baseType = pattern.slice(0, pattern.indexOf('/*'));
-				return fileType.startsWith(baseType + '/');
-			}
-
-			// otherwise it must be a specific type like video/mp4
-			return fileType === pattern;
-		});
-
-		if (!isAcceptable) return 'File type not allowed';
-
-		return undefined;
-	};
-
-	const upload = async (uploadFiles: File[]) => {
-		uploading = true;
-
-		const validFiles: File[] = [];
-
-		for (let i = 0; i < uploadFiles.length; i++) {
-			const file = uploadFiles[i];
-
-			const rejectedReason = shouldAcceptFile(file, (fileCount ?? 0) + i + 1);
-
-			if (rejectedReason) {
-				onFileRejected?.({ file, reason: rejectedReason });
-				continue;
-			}
-
-			validFiles.push(file);
-		}
-
-		await onUpload(validFiles);
-
-		uploading = false;
-	};
-
-	const canUploadFiles = $derived(
-		!disabled &&
-			!uploading &&
-			!(maxFiles !== undefined && fileCount !== undefined && fileCount >= maxFiles)
-	);
-</script>
-
-<label
-	ondragover={(e) => e.preventDefault()}
-	ondrop={drop}
-	for={id}
-	aria-disabled={!canUploadFiles}
-	class=''
->
-	{#if children}
-		{@render children()}
-	{:else}
-		<div class="flex flex-col place-items-center justify-center gap-2">
-			<div
-				class="flex size-14 place-items-center justify-center rounded-full border border-dashed border-border text-muted-foreground"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="24"
-					height="24"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					class="lucide lucide-upload-icon lucide-upload"
-					><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline
-						points="17 8 12 3 7 8"
-					/><line x1="12" x2="12" y1="3" y2="15" /></svg
-				>
-			</div>
-			<div class="flex flex-col gap-0.5 text-center">
-				<span class="font-medium text-muted-foreground">
-					Drag 'n' drop files here, or click to select files
-				</span>
-				{#if maxFiles || maxFileSize}
-					<span class="text-sm text-muted-foreground/75">
-						{#if maxFiles}
-							<span>You can upload {maxFiles} files</span>
-						{/if}
-						{#if maxFiles && maxFileSize}
-							<span>(up to {displaySize(maxFileSize)} each)</span>
-						{/if}
-						{#if maxFileSize && !maxFiles}
-							<span>Maximum size {displaySize(maxFileSize)}</span>
-						{/if}
-					</span>
-				{/if}
-			</div>
-		</div>
-	{/if}
-	<input
-		{...rest}
-		disabled={!canUploadFiles}
-		{id}
-		{accept}
-		multiple={maxFiles === undefined || maxFiles - (fileCount ?? 0) > 1}
-		type="file"
-		onchange={change}
-		class="hidden"
-	/>
-</label>
+<script lang="ts">
+	import { displaySize, type FileDropZoneProps, type FileRejectedReason } from './dropzone.js';
+
+	let {
+		id,
+		children,
+		maxFiles,
+		maxFileSize,
+		fileCount,
+		disabled = false,
+		onUpload,
+		onFileRejected,
+		accept,
+		class: css,
+		...rest
+	}: FileDropZoneProps = $props();
+	
+
+	if (maxFiles !== undefined && fileCount === undefined) {
+		console.warn(
+			'Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt'
+		);
+	}
+
+	let uploading = $state(false);
+
+	const drop = async (
+		e: DragEvent & {
+			currentTarget: EventTarget & HTMLLabelElement;
+		}
+	) => {
+		if (disabled || !canUploadFiles) return;
+
+		e.preventDefault();
+
+		const droppedFiles = Array.from(e.dataTransfer?.files ?? []);
+
+		await upload(droppedFiles);
+	};
+
+	const change = async (
+		e: Event & {
+			currentTarget: EventTarget & HTMLInputElement;
+		}
+	) => {
+		if (disabled) return;
+
+		const selectedFiles = e.currentTarget.files;
+
+		if (!selectedFiles) return;
+
+		await upload(Array.from(selectedFiles));
+
+		// this if a file fails and we upload the same file again we still get feedback
+		(e.target as HTMLInputElement).value = '';
+	};
+
+	const shouldAcceptFile = (file: File, fileNumber: number): FileRejectedReason | undefined => {
+		if (maxFileSize !== undefined && file.size > maxFileSize) return 'Maximum file size exceeded';
+
+		if (maxFiles !== undefined && fileNumber > maxFiles) return 'Maximum files uploaded';
+
+		if (!accept) return undefined;
+
+		const acceptedTypes = accept.split(',').map((a) => a.trim().toLowerCase());
+		const fileType = file.type.toLowerCase();
+		const fileName = file.name.toLowerCase();
+
+		const isAcceptable = acceptedTypes.some((pattern) => {
+			// check extension like .mp4
+			if (fileType.startsWith('.')) {
+				return fileName.endsWith(pattern);
+			}
+
+			// if pattern has wild card like video/*
+			if (pattern.endsWith('/*')) {
+				const baseType = pattern.slice(0, pattern.indexOf('/*'));
+				return fileType.startsWith(baseType + '/');
+			}
+
+			// otherwise it must be a specific type like video/mp4
+			return fileType === pattern;
+		});
+
+		if (!isAcceptable) return 'File type not allowed';
+
+		return undefined;
+	};
+
+	const upload = async (uploadFiles: File[]) => {
+		uploading = true;
+
+		const validFiles: File[] = [];
+
+		for (let i = 0; i < uploadFiles.length; i++) {
+			const file = uploadFiles[i];
+
+			const rejectedReason = shouldAcceptFile(file, (fileCount ?? 0) + i + 1);
+
+			if (rejectedReason) {
+				onFileRejected?.({ file, reason: rejectedReason });
+				continue;
+			}
+
+			validFiles.push(file);
+		}
+
+		await onUpload(validFiles);
+
+		uploading = false;
+	};
+
+	const canUploadFiles = $derived(
+		!disabled &&
+			!uploading &&
+			!(maxFiles !== undefined && fileCount !== undefined && fileCount >= maxFiles)
+	);
+</script>
+
+<label
+	ondragover={(e) => e.preventDefault()}
+	ondrop={drop}
+	for={id}
+	aria-disabled={!canUploadFiles}
+	class=''
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<div class="flex flex-col place-items-center justify-center gap-2">
+			<div
+				class="flex size-14 place-items-center justify-center rounded-full border border-dashed border-border text-muted-foreground"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					class="lucide lucide-upload-icon lucide-upload"
+					><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline
+						points="17 8 12 3 7 8"
+					/><line x1="12" x2="12" y1="3" y2="15" /></svg
+				>
+			</div>
+			<div class="flex flex-col gap-0.5 text-center">
+				<span class="font-medium text-muted-foreground">
+					Drag 'n' drop files here, or click to select files
+				</span>
+				{#if maxFiles || maxFileSize}
+					<span class="text-sm text-muted-foreground/75">
+						{#if maxFiles}
+							<span>You can upload {maxFiles} files</span>
+						{/if}
+						{#if maxFiles && maxFileSize}
+							<span>(up to {displaySize(maxFileSize)} each)</span>
+						{/if}
+						{#if maxFileSize && !maxFiles}
+							<span>Maximum size {displaySize(maxFileSize)}</span>
+						{/if}
+					</span>
+				{/if}
+			</div>
+		</div>
+	{/if}
+	<input
+		{...rest}
+		disabled={!canUploadFiles}
+		{id}
+		{accept}
+		multiple={maxFiles === undefined || maxFiles - (fileCount ?? 0) > 1}
+		type="file"
+		onchange={change}
+		class="hidden"
+	/>
+</label>