compote-ui 0.63.2 → 0.64.0

package/dist/components/image-upload/image-upload.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { cn } from 'tailwind-variants';
+	import * as Menu from '../menu';
+	import ImageCropDialog from '../image-crop-dialog/image-crop-dialog.svelte';
+	import { fileToDataUrl } from '../../utils/image-processing';
+	import { PhUploadSimple, PhImage, PhX } from '../../icons';
+	import type { ImageUploadProps } from './types';
+
+	let {
+		value = $bindable(),
+		alt = 'Image',
+		shape = 'circle',
+		class: className,
+		disabled = false,
+		aspectRatio,
+		processOptions,
+		uploadLabel = 'Upload image',
+		replaceLabel = 'Replace',
+		deleteLabel = 'Delete',
+		onChange,
+		onDelete
+	}: ImageUploadProps = $props();
+
+	let inputEl = $state<HTMLInputElement>();
+	let cropOpen = $state(false);
+	let cropSrc = $state('');
+
+	function openPicker() {
+		inputEl?.click();
+	}
+
+	async function handleInputChange(e: Event) {
+		const input = e.currentTarget as HTMLInputElement;
+		const file = input.files?.[0];
+		input.value = '';
+		if (!file) return;
+		cropSrc = await fileToDataUrl(file);
+		cropOpen = true;
+	}
+
+	function handleCropConfirm(blob: Blob) {
+		cropOpen = false;
+		if (value?.startsWith('blob:')) URL.revokeObjectURL(value);
+		value = URL.createObjectURL(blob);
+		onChange?.(blob);
+	}
+
+	function handleDelete() {
+		if (value?.startsWith('blob:')) URL.revokeObjectURL(value);
+		value = undefined;
+		onDelete?.();
+	}
+</script>
+
+<div
+	class={cn(
+		'relative inline-flex size-24 shrink-0 items-center justify-center overflow-hidden bg-surface-2 text-ink-dim',
+		shape === 'circle' ? 'rounded-full' : 'rounded-lg',
+		className
+	)}
+>
+	{#if value}
+		<img src={value} {alt} class="h-full w-full object-cover" />
+	{:else}
+		<PhImage class="size-1/3" />
+	{/if}
+
+	<Menu.Root positioning={{ placement: 'bottom-end' }}>
+		<Menu.Trigger
+			variant="outline"
+			size="icon-sm"
+			class={cn(
+				'absolute right-1 bottom-1 rounded-full bg-surface-1 shadow-sm',
+				disabled && 'pointer-events-none opacity-50'
+			)}
+		>
+			<span class="sr-only">{value ? 'Edit image' : uploadLabel}</span>
+			<PhUploadSimple class="size-4" />
+		</Menu.Trigger>
+		<Menu.Content>
+			<Menu.Item value="upload" {disabled} onSelect={openPicker}>
+				<PhUploadSimple class="size-4" />
+				{value ? replaceLabel : uploadLabel}
+			</Menu.Item>
+			{#if value}
+				<Menu.Item value="delete" {disabled} onSelect={handleDelete}>
+					<PhX class="size-4" />
+					{deleteLabel}
+				</Menu.Item>
+			{/if}
+		</Menu.Content>
+	</Menu.Root>
+</div>
+
+<input
+	bind:this={inputEl}
+	type="file"
+	accept="image/*"
+	{disabled}
+	class="hidden"
+	onchange={handleInputChange}
+/>
+
+<ImageCropDialog
+	bind:open={cropOpen}
+	imageSrc={cropSrc}
+	{aspectRatio}
+	{processOptions}
+	onConfirm={handleCropConfirm}
+	onCancel={() => (cropOpen = false)}
+/>

package/dist/components/image-upload/image-upload.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ImageUploadProps } from './types';
+declare const ImageUpload: import("svelte").Component<ImageUploadProps, {}, "value">;
+type ImageUpload = ReturnType<typeof ImageUpload>;
+export default ImageUpload;

package/dist/components/image-upload/types.d.ts

@@ -0,0 +1,23 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { ProcessImageOptions } from '../../utils/image-processing';
+export type ImageUploadShape = 'circle' | 'square';
+export interface ImageUploadProps {
+    /** Current image src (data URL, blob URL, or remote URL). Bindable. */
+    value?: string;
+    alt?: string;
+    shape?: ImageUploadShape;
+    /** Sizing classes for the preview box, e.g. 'size-24' or 'w-full aspect-video' */
+    class?: ClassValue;
+    disabled?: boolean;
+    /** Aspect ratio locked in the crop dialog (undefined = free) */
+    aspectRatio?: number;
+    /** Resize/convert options applied when cropping or skipping crop */
+    processOptions?: ProcessImageOptions;
+    uploadLabel?: string;
+    replaceLabel?: string;
+    deleteLabel?: string;
+    /** Called with the processed Blob after the user crops/confirms a new image */
+    onChange?: (blob: Blob) => void;
+    /** Called when the user deletes the current image */
+    onDelete?: () => void;
+}

package/dist/components/image-upload/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -34,6 +34,8 @@ export { default as ImageCropper } from './components/image-cropper/image-croppe
 export type { ImageCropperProps, ImageCropperCropData } from './components/image-cropper/types';
 export { default as ImageCropDialog } from './components/image-crop-dialog/image-crop-dialog.svelte';
 export type { ImageCropDialogProps } from './components/image-crop-dialog/types';
+export { default as ImageUpload } from './components/image-upload/image-upload.svelte';
+export type { ImageUploadProps, ImageUploadShape } from './components/image-upload/types';
 export { default as JsonTreeView } from './components/json-tree-view/json-tree-view.svelte';
 export * as Listbox from './components/listbox';
 export { default as NumberInput } from './components/number-input/number-input.svelte';

package/dist/index.js

@@ -25,6 +25,7 @@ export { default as FileUploadDropzone } from './components/file-upload/file-upl
 export { default as FileUpload } from './components/file-upload/file-upload.svelte';
 export { default as ImageCropper } from './components/image-cropper/image-cropper.svelte';
 export { default as ImageCropDialog } from './components/image-crop-dialog/image-crop-dialog.svelte';
+export { default as ImageUpload } from './components/image-upload/image-upload.svelte';
 export { default as JsonTreeView } from './components/json-tree-view/json-tree-view.svelte';
 export * as Listbox from './components/listbox';
 export { default as NumberInput } from './components/number-input/number-input.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.63.2",
+	"version": "0.64.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -65,8 +65,8 @@
 		"@sveltejs/vite-plugin-svelte": "7.1.2",
 		"@tailwindcss/vite": "^4.3.2",
 		"@tanstack/intent": "^0.3.2",
-		"@tanstack/svelte-table": "^9.0.0-beta.17",
-		"@tanstack/svelte-virtual": "^3.13.30",
+		"@tanstack/svelte-table": "^9.0.0-beta.26",
+		"@tanstack/svelte-virtual": "^3.13.31",
 		"@types/node": "^22.20.0",
 		"eslint": "^10.5.0",
 		"eslint-config-prettier": "^10.1.8",
@@ -83,7 +83,7 @@
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.61.1",
 		"unplugin-icons": "^23.0.1",
-		"vite": "^8.0.16"
+		"vite": "^8.1.2"
 	},
 	"keywords": [
 		"svelte",