@functionalcms/svelte-components 4.16.1 → 4.19.0

package/dist/components/form/Button.svelte

@@ -1,131 +1,120 @@
-<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;
-		ariaLabel: string;
-		noStyle: boolean;
-		dataPreload: "hover" | "tap";
-		codePreload: "eager" | "viewport" | "hover" | "tap";
-		click?: (event: MouseEvent) => void;
-		keydown?: (event: 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,
-		noStyle = false,
-		ariaSelected = undefined,
-		ariaControls = undefined,
-		tabIndex = 0,
-		click = undefined,
-		keydown = undefined,
-		ariaLabel = '',
-		dataPreload = 'hover',
-		codePreload = 'hover',
-		...restProps
-	}: Partial<Props> = $props();
-
-	let klasses = $derived(
-		noStyle
-			? ''
-			: 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}
-		aria-label={ariaLabel}
-		tabindex={tabIndex}
-		onclick={click}
-		onkeydown={keydown}
-		{...restProps}
-		data-sveltekit-preload-data={dataPreload}
-		data-sveltekit-preload-code={codePreload}		
-	>
-		{@render children?.()}
-	</a>
-{:else}
-	<button
-		{type}
-		class={klasses}
-		{style}
-		{role}
-		aria-selected={ariaSelected}
-		aria-controls={ariaControls}
-		aria-label={ariaLabel}
-		tabindex={tabIndex}
-		disabled={isDisabled}
-		onclick={click}
-		onkeydown={keydown}
-		data-sveltekit-preload-data={dataPreload}
-		data-sveltekit-preload-code={codePreload}	
-		{...restProps}
-	>
-		{@render children?.()}
-	</button>
-{/if}
-
+<script lang="ts">
+	import { cn } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+	import type { EventHandler } from 'svelte/elements';
+
+	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;
+		ariaLabel: string;
+		click?: (event: MouseEvent) => void;
+		keydown?: (event: 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,
+		click = undefined,
+		keydown = undefined,
+		ariaLabel = '',
+		...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}
+		aria-label={ariaLabel}
+		tabindex={tabIndex}
+		onclick={click}
+		onkeydown={keydown}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		{type}
+		class={klasses}
+		{style}
+		{role}
+		aria-selected={ariaSelected}
+		aria-controls={ariaControls}
+		aria-label={ariaLabel}
+		tabindex={tabIndex}
+		disabled={isDisabled}
+		onclick={click}
+		onkeydown={keydown}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
+
 <style>.btn-base {
   display: inline-flex;
   align-items: center;
@@ -397,4 +386,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

@@ -23,9 +23,6 @@ declare const Button: import("svelte").Component<Partial<{
     ariaControls?: string;
     tabIndex?: number;
     ariaLabel: string;
-    noStyle: boolean;
-    dataPreload: "hover" | "tap";
-    codePreload: "eager" | "viewport" | "hover" | "tap";
     click?: (event: MouseEvent) => void;
     keydown?: (event: KeyboardEvent) => void;
 }>, {}, "">;

package/dist/components/form/ChoiceInput.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { cn } from '../../utils.js';
-	import { Orientation } from '../Styling.js';
 	import type { ChoiceInputOption, ChoiceInputSize, ChoiceInputType, HtmlParts } from './utils.js';
 
 	interface Props {
@@ -16,7 +15,6 @@
 		label: string;
 		size: ChoiceInputSize;
 		checked: string[];
-		orientation: Orientation;
 	}
 
 	let {
@@ -38,8 +36,7 @@
 		size = '',
 		// Provides bind:checked capabilities that consumer can use
 		checked = $bindable([]),
-		orientation = Orientation.DynamicRow,
-		...restProps
+        ...restProps
 	}: Partial<Props & HtmlParts> = $props();
 
 	let labelClasses = $derived(
@@ -99,41 +96,37 @@
 	};
 </script>
 
-<div class="w-100">
-	<fieldset class={fieldsetClasses}>
-		<legend class={legendClasses}>{label}</legend>
-		<div class="flex {orientation}">
-			{#each options as { value, label }, index}
-				<label
-					class={labelClasses}
-					class:disabled={isDisabled || disabledOptions.includes(value) || undefined}
-				>
-					<input
-						class={inputClasses}
-						id="{id}-{name}-{index}"
-						{type}
-						{name}
-						{value}
-						disabled={isDisabled || disabledOptions.includes(value)}
-						checked={checkedOptions.includes(value)}
-						onchange={onChange}
-						{...restProps}
-					/>
-					<span class={labelSpanClasses} aria-hidden="true"></span>
-					<span class={labelCopyClasses}>{label}</span>
-				</label>
-			{/each}
-		</div>
-	</fieldset>
-</div>
+<fieldset class={fieldsetClasses}>
+	<legend class={legendClasses}>{label}</legend>
+	{#each options as { value, label }, index}
+		<label
+			class={labelClasses}
+			class:disabled={isDisabled || disabledOptions.includes(value) || undefined}
+		>
+			<input
+				class={inputClasses}
+				id="{id}-{name}-{index}"
+				{type}
+				{name}
+				{value}
+				disabled={isDisabled || disabledOptions.includes(value)}
+				checked={checkedOptions.includes(value)}
+				onchange={onChange}
+				{...restProps}
+			/>
+			<span class={labelSpanClasses} aria-hidden="true"></span>
+			<span class={labelCopyClasses}>{label}</span>
+		</label>
+	{/each}
+</fieldset>
 
 <style>
 	/**
- * These radio and checkbox customizations are an amalgamation of various resources I've
- * found on the internets; from Heydon Pickering's radio article (and his Inclusive Components
- * book), to Sara Soueidan, Scott O'Hara, MDO, and Adrian Roselli's research on the matter
- * of inclusive hiding and custom radio/checkbox inputs.
- */
+     * These radio and checkbox customizations are an amalgamation of various resources I've
+     * found on the internets; from Heydon Pickering's radio article (and his Inclusive Components
+     * book), to Sara Soueidan, Scott O'Hara, MDO, and Adrian Roselli's research on the matter
+     * of inclusive hiding and custom radio/checkbox inputs.
+     */
 	.checkbox-group,
 	.radio-group {
 		--width-28: calc(7 * var(--fluid-4)); /* 1.75rem/28px */
@@ -157,13 +150,13 @@
 	}
 
 	/* Hiding technique from https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
- */
+     */
 	.checkbox,
 	.radio {
 		position: absolute;
 		width: var(--fluid-14);
 		height: var(--fluid-14);
-		/* opacity: 0%; */
+		opacity: 0%;
 	}
 
 	.checkbox-small,
@@ -243,7 +236,7 @@
 	}
 
 	/* Since we build up the radio size outwardly, it's naturally larger then the checkboxes
- so we add a multiplyer to even those out initially */
+     so we add a multiplyer to even those out initially */
 	.checkbox-label::before {
 		border: 2px solid var(--agnostic-checkbox-border-color, var(--agnostic-gray-light));
 		width: var(--fluid-16);
@@ -333,9 +326,9 @@
 	}
 
 	/**
-  * Consumer styles <legend> themselves, and can opt to use the .screenreader-only from
-  * utilities.css if they're design requires it.
-  */
+      * Consumer styles <legend> themselves, and can opt to use the .screenreader-only from
+      * utilities.css if they're design requires it.
+      */
 	.checkbox-group-hidden,
 	.radio-group-hidden {
 		border: 0;
@@ -350,8 +343,8 @@
 	}
 
 	/* Targets both the label container and the span label that is used
-to style the custom radio / checkbox. Note it does NOT target the input
-itself. */
+    to style the custom radio / checkbox. Note it does NOT target the input
+    itself. */
 	.checkbox[disabled] ~ .checkbox-label-copy,
 	.radio[disabled] ~ .radio-label-copy,
 	.checkbox-label-wrap[class='disabled'],
@@ -379,40 +372,4 @@ itself. */
 			outline-offset: -2px;
 		}
 	}
-
-	
-	.field-help,
-	.field-help-large,
-	.field-help-small,
-	.field-error,
-	.field-error-large,
-	.field-error-small,
-	.label-skin,
-	.label,
-	.input-addon-container,
-	.input-small,
-	.input-large,
-	.input-skin,
-	.input-underlined,
-	.input-underlined-bg,
-	.input {
-		color: var(--font-color, var(--dark));
-		font-family: var(--font-family-body);
-		font-weight: var(--font-weight, 300);
-		font-size: var(--font-size, 1rem);
-		line-height: var(--line-height, var(--fluid-20, 1.25rem));
-		width: 100%;
-		max-width: 100%;
-	}
-	.label {
-		display: inline-block;
-
-		/* Provided --input-vertical-pad isn't overriden we'll get 20px
-      label w/a 6px margin then a 38px input = 64 which is on the 8pt grid */
-		margin-block-start: 0;
-		margin-inline-start: 0;
-		margin-inline-end: 0;
-		margin-block-end: var(--input-label-pad, 0.375rem);
-		vertical-align: initial;
-	}
 </style>

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

@@ -1,19 +1,3 @@
-import { Orientation } from '../Styling.js';
-import type { ChoiceInputOption, ChoiceInputSize, ChoiceInputType, HtmlParts } from './utils.js';
-declare const ChoiceInput: import("svelte").Component<Partial<{
-    isSkinned: boolean;
-    isFieldset: boolean;
-    isInline: boolean;
-    isDisabled: boolean;
-    isInvalid: boolean;
-    options: ChoiceInputOption[];
-    disabledOptions: string[];
-    checkedOptions: string[];
-    type: ChoiceInputType;
-    label: string;
-    size: ChoiceInputSize;
-    checked: string[];
-    orientation: Orientation;
-} & HtmlParts>, {}, "checked">;
+declare const ChoiceInput: import("svelte").Component<any, {}, "checked">;
 type ChoiceInput = ReturnType<typeof ChoiceInput>;
 export default ChoiceInput;

package/dist/components/form/Dropzone.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	import { displaySize, type FileDropZoneProps, type FileRejectedReason } from './dropzone.js';
+	import { cn } from '../../utils.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={cn(
+		'flex h-48 w-full place-items-center justify-center rounded-lg border-2 border-dashed border-border p-6 transition-all hover:cursor-pointer hover:bg-accent/25 aria-disabled:opacity-50 aria-disabled:hover:cursor-not-allowed',
+		className
+	)}
+>
+	{#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>

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

@@ -0,0 +1,4 @@
+import { type FileDropZoneProps } from './dropzone.js';
+declare const Dropzone: import("svelte").Component<FileDropZoneProps, {}, "">;
+type Dropzone = ReturnType<typeof Dropzone>;
+export default Dropzone;