@14ch/svelte-ui 0.0.1

package/dist/components/ImageUploader.svelte

@@ -0,0 +1,516 @@
+<!-- ImageUploader.svelte -->
+
+<script lang="ts">
+	import Icon from './Icon.svelte';
+	import { t } from '../i18n';
+	import { announceToScreenReader } from '../utils/accessibility';
+	import { getStyleFromNumber } from '../utils/style';
+	import { onDestroy } from 'svelte';
+	import ImageUploaderPreview from './ImageUploaderPreview.svelte';
+	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	let {
+		// 基本プロパティ
+		value = $bindable(),
+		multiple = false,
+		maxFileSize = 5 * 1024 * 1024,
+		placeholder = '',
+
+		// HTML属性系
+		id = `image-uploader-${Math.random().toString(36).substring(2, 15)}`,
+		accept = '.jpg,.jpeg,.png,.gif,.webp,.svg',
+
+		// スタイル/レイアウト
+		width = '120px',
+		height = '120px',
+		rounded = false,
+
+		// アイコン系
+		icon = 'add_photo_alternate',
+		iconSize = 32,
+		iconFilled = false,
+		iconWeight = 300,
+		iconGrade = 0,
+		iconOpticalSize = iconSize,
+		iconVariant = 'outlined',
+		removeFileAriaLabel = t('imageUploader.removeFile'),
+
+		// 状態/動作
+		adaptiveSize = false,
+
+		// 入力イベント
+		onchange = () => {}, // No params for type inference
+
+		// フォーカスイベント
+		onfocus = () => {}, // No params for type inference
+		onblur = () => {}, // No params for type inference
+
+		// キーボードイベント
+		onkeydown = () => {}, // No params for type inference
+		onkeyup = () => {}, // No params for type inference
+
+		// マウスイベント
+		onmouseenter = () => {}, // No params for type inference
+		onmouseleave = () => {}, // No params for type inference
+
+		// タッチイベント
+		ontouchstart = () => {}, // No params for type inference
+		ontouchend = () => {}, // No params for type inference
+
+		// ポインターイベント
+		onpointerenter = () => {}, // No params for type inference
+		onpointerleave = () => {} // No params for type inference
+	}: {
+		// 基本プロパティ
+		value: FileList | undefined;
+		multiple?: boolean;
+		maxFileSize?: number;
+		placeholder?: string;
+
+		// HTML属性系
+		id?: string;
+		accept?: string;
+
+		// スタイル/レイアウト
+
+		width?: string | number;
+		height?: string | number;
+		rounded?: boolean;
+		adaptiveSize?: boolean;
+
+		// アイコン系
+		icon?: string;
+		iconSize?: number;
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+		removeFileAriaLabel?: string;
+
+		// 入力イベント
+		onchange?: (value: FileList | null) => void;
+
+		// フォーカスイベント
+		onfocus?: Function; // No params for type inference
+		onblur?: Function; // No params for type inference
+
+		// キーボードイベント
+		onkeydown?: Function; // No params for type inference
+		onkeyup?: Function; // No params for type inference
+
+		// マウスイベント
+		onmouseenter?: Function; // No params for type inference
+		onmouseleave?: Function; // No params for type inference
+
+		// タッチイベント
+		ontouchstart?: Function; // No params for type inference
+		ontouchend?: Function; // No params for type inference
+
+		// ポインターイベント
+		onpointerenter?: Function; // No params for type inference
+		onpointerleave?: Function; // No params for type inference
+	} = $props();
+
+	let dropAreaRef: HTMLButtonElement;
+	let fileInputRef: HTMLInputElement;
+	let isHover: boolean = $state(false);
+	let errorMessage: string = $state('');
+	let urlCache = new Map<File, string>();
+
+	// =========================================================================
+	// Lifecycle
+	// =========================================================================
+
+	onDestroy(() => {
+		cleanupObjectUrls();
+	});
+
+	// =========================================================================
+	// Effects
+	// =========================================================================
+	$effect(() => {
+		if (value && value.length > 0) {
+			const fileCount = value.length;
+			const fileNames = Array.from(value)
+				.map((file) => file.name)
+				.join(', ');
+			announceToScreenReader(
+				`${fileCount} image${fileCount > 1 ? 's' : ''} selected: ${fileNames}`
+			);
+		}
+	});
+
+	// =========================================================================
+	// Methods
+	// =========================================================================
+	const handleClick = () => {
+		fileInputRef?.click();
+	};
+
+	const handleFocus = (event: FocusEvent) => {
+		onfocus?.(event);
+	};
+
+	const handleBlur = (event: FocusEvent) => {
+		onblur?.(event);
+	};
+
+	const handleKeyDown = (event: KeyboardEvent) => {
+		onkeydown?.(event);
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			handleClick();
+		}
+	};
+
+	const handleKeyUp = (event: KeyboardEvent) => {
+		onkeyup?.(event);
+	};
+
+	const handleMouseEnter = (event: MouseEvent) => {
+		onmouseenter?.(event);
+	};
+
+	const handleMouseLeave = (event: MouseEvent) => {
+		onmouseleave?.(event);
+	};
+
+	const handleTouchStart = (event: TouchEvent) => {
+		ontouchstart?.(event);
+	};
+
+	const handleTouchEnd = (event: TouchEvent) => {
+		ontouchend?.(event);
+	};
+
+	const handlePointerEnter = (event: PointerEvent) => {
+		onpointerenter?.(event);
+	};
+
+	const handlePointerLeave = (event: PointerEvent) => {
+		onpointerleave?.(event);
+	};
+
+	const validateFile = (file: File): boolean => {
+		// サポートされる画像タイプ
+		const supportedTypes = [
+			'image/jpeg',
+			'image/jpg',
+			'image/png',
+			'image/gif',
+			'image/webp',
+			'image/svg+xml'
+		];
+
+		if (!supportedTypes.includes(file.type)) {
+			errorMessage = t('imageUploader.unsupportedFileFormat');
+			return false;
+		}
+
+		if (file.size > maxFileSize) {
+			errorMessage = t('imageUploader.fileSizeExceeded', {
+				maxSize: (maxFileSize / 1024 / 1024).toFixed(1)
+			});
+			return false;
+		}
+
+		errorMessage = '';
+		return true;
+	};
+
+	const handleFileChange = (fileList: FileList | null) => {
+		if (!fileList) return;
+
+		const validFiles: File[] = [];
+		for (let i = 0; i < fileList.length; i++) {
+			const file = fileList[i];
+			if (validateFile(file)) {
+				validFiles.push(file);
+			}
+			// 無効なファイルは単純にスキップ
+		}
+
+		// 有効なファイルがある場合のみ更新
+		if (validFiles.length > 0) {
+			const dataTransfer = new DataTransfer();
+
+			// multipleの場合は既存のファイルを保持して追加
+			if (multiple && value) {
+				for (let i = 0; i < value.length; i++) {
+					dataTransfer.items.add(value[i]);
+				}
+			}
+
+			// 新しく選択されたファイルのみを追加
+			validFiles.forEach((file) => dataTransfer.items.add(file));
+			value = dataTransfer.files;
+			onchange(value);
+		}
+	};
+
+	const removeFile = (index: number) => {
+		if (!value) return;
+
+		// 削除されるファイルのURLをクリーンアップ
+		const fileToRemove = value[index];
+		if (fileToRemove && urlCache.has(fileToRemove)) {
+			const url = urlCache.get(fileToRemove)!;
+			URL.revokeObjectURL(url);
+			urlCache.delete(fileToRemove);
+		}
+
+		const dt = new DataTransfer();
+		for (let i = 0; i < value.length; i++) {
+			if (i !== index) {
+				dt.items.add(value[i]);
+			}
+		}
+		if (dt.files.length > 0) {
+			value = dt.files;
+		} else {
+			// 空の場合は空のFileListを作成
+			const emptyDt = new DataTransfer();
+			value = emptyDt.files;
+		}
+	};
+
+	const cleanupObjectUrls = () => {
+		// キャッシュされたすべてのURLを解放
+		for (const url of urlCache.values()) {
+			URL.revokeObjectURL(url);
+		}
+		urlCache.clear();
+	};
+
+	export const reset = () => {
+		if (fileInputRef) {
+			fileInputRef.value = '';
+			value = undefined;
+			errorMessage = '';
+			cleanupObjectUrls();
+		}
+	};
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const previewWidthStyle = $derived(getStyleFromNumber(width));
+	const previewHeightStyle = $derived(getStyleFromNumber(height));
+</script>
+
+{#snippet preview(file: File, index: number)}
+	<ImageUploaderPreview
+		{file}
+		{width}
+		{height}
+		{adaptiveSize}
+		{rounded}
+		id={id ? `${id}-preview-${index}` : undefined}
+		{removeFileAriaLabel}
+		onRemove={() => removeFile(index)}
+	/>
+{/snippet}
+
+<div
+	class="image-uploader"
+	class:image-uploader--multiple={multiple}
+	class:image-uploader--rounded={rounded}
+	class:image-uploader--adaptive={adaptiveSize}
+	style="
+			--image-uploader-button-width: {previewWidthStyle};
+			--image-uploader-button-height: {previewHeightStyle};
+		"
+	data-testid="image-uploader"
+>
+	{#if multiple}
+		{#each value as file, index}
+			{@render preview(file, index)}
+		{/each}
+	{/if}
+	<button
+		bind:this={dropAreaRef}
+		class="image-uploader__button"
+		class:image-uploader__button--hover={isHover}
+		class:image-uploader__button--has-images={!multiple && value && value.length > 0}
+		class:image-uploader__button--rounded={rounded}
+		onclick={handleClick}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		onkeydown={handleKeyDown}
+		onkeyup={handleKeyUp}
+		onmouseenter={handleMouseEnter}
+		onmouseleave={handleMouseLeave}
+		ontouchstart={handleTouchStart}
+		ontouchend={handleTouchEnd}
+		onpointerenter={handlePointerEnter}
+		onpointerleave={handlePointerLeave}
+		ondragover={(event) => {
+			event.stopPropagation();
+			event.preventDefault();
+			isHover = true;
+		}}
+		ondragleave={(event) => {
+			event.stopPropagation();
+			event.preventDefault();
+			isHover = false;
+		}}
+		ondrop={(event) => {
+			event.stopPropagation();
+			event.preventDefault();
+			isHover = false;
+			const fileList = event.dataTransfer?.files;
+			if (fileList) {
+				handleFileChange(fileList);
+			}
+		}}
+		aria-label={t('imageUploader.uploadImage')}
+	>
+		{#if !multiple && value && value.length > 0}
+			{@render preview(value[0], 0)}
+		{:else}
+			<div class="image-uploader__description">
+				<Icon
+					size={iconSize}
+					filled={iconFilled}
+					weight={iconWeight}
+					grade={iconGrade}
+					opticalSize={iconOpticalSize}
+					variant={iconVariant}>{icon}</Icon
+				>
+				{@html placeholder}
+			</div>
+		{/if}
+	</button>
+
+	{#if errorMessage}
+		<div class="image-uploader__error-message" role="alert" aria-live="polite">
+			{errorMessage}
+		</div>
+	{/if}
+
+	<input
+		bind:this={fileInputRef}
+		{accept}
+		{multiple}
+		class="image-uploader__input"
+		{id}
+		type="file"
+		onchange={(event) => {
+			const target = event.target as HTMLInputElement;
+			if (target.files && target.files.length > 0) {
+				handleFileChange(target.files);
+			}
+		}}
+	/>
+</div>
+
+<style>
+	.image-uploader {
+		position: relative;
+		width: 100%;
+	}
+
+	.image-uploader--multiple {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--svelte-ui-image-uploader-preview-gap);
+	}
+
+	.image-uploader__button {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+		max-width: 100%;
+		min-width: var(--image-uploader-button-width);
+		min-height: var(--image-uploader-button-height);
+		padding: 16px;
+		background-color: var(--svelte-ui-form-bg);
+		border-radius: var(--svelte-ui-border-radius);
+		cursor: pointer;
+		transition: background-color var(--svelte-ui-transition-duration);
+	}
+
+	.image-uploader__button::before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: transparent;
+		border: var(--svelte-ui-image-uploader-border-style)
+			var(--svelte-ui-image-uploader-border-width) var(--svelte-ui-image-uploader-border-color);
+		border-radius: var(--svelte-ui-border-radius);
+		transition-property: background-color border-color;
+		transition-duration: var(--svelte-ui-transition-duration);
+	}
+
+	.image-uploader__button--rounded,
+	.image-uploader__button--rounded::before {
+		border-radius: var(--svelte-ui-border-radius-rounded);
+	}
+
+	@media (hover: hover) {
+		.image-uploader__button:hover::before,
+		.image-uploader__button--hover::before {
+			background-color: var(--svelte-ui-image-uploader-hover-bg);
+			border-color: var(--svelte-ui-image-uploader-hover-border-color);
+		}
+	}
+
+	.image-uploader:focus-visible {
+		outline: var(--svelte-ui-focus-outline-inner);
+		outline-offset: var(--svelte-ui-focus-outline-offset-inner);
+	}
+
+	.image-uploader__button--hover {
+		background-color: var(--svelte-ui-image-uploader-hover-bg);
+		border-color: var(--svelte-ui-primary-color);
+	}
+
+	.image-uploader__button--has-images {
+		padding: 0;
+		background: transparent;
+
+		&::before {
+			background: transparent;
+			border: none;
+		}
+	}
+
+	.image-uploader__description {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 16px;
+		color: var(--svelte-ui-text-subtle-color);
+		text-align: center;
+	}
+
+	@media (hover: hover) {
+		.image-uploader__button:hover .image-uploader__description,
+		.image-uploader__button--hover .image-uploader__description {
+			color: var(--svelte-ui-image-uploader-hover-color);
+		}
+	}
+
+	.image-uploader__error-message {
+		margin-top: 8px;
+		padding: 8px 12px;
+		background-color: var(--svelte-ui-error-container-color);
+		color: var(--svelte-ui-error-color);
+		border-radius: var(--svelte-ui-border-radius);
+		font-size: var(--svelte-ui-font-size-sm);
+	}
+
+	.image-uploader__input {
+		display: none;
+	}
+</style>

package/dist/components/ImageUploader.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+type $$ComponentProps = {
+    value: FileList | undefined;
+    multiple?: boolean;
+    maxFileSize?: number;
+    placeholder?: string;
+    id?: string;
+    accept?: string;
+    width?: string | number;
+    height?: string | number;
+    rounded?: boolean;
+    adaptiveSize?: boolean;
+    icon?: string;
+    iconSize?: number;
+    iconFilled?: boolean;
+    iconWeight?: IconWeight;
+    iconGrade?: IconGrade;
+    iconOpticalSize?: IconOpticalSize;
+    iconVariant?: IconVariant;
+    removeFileAriaLabel?: string;
+    onchange?: (value: FileList | null) => void;
+    onfocus?: Function;
+    onblur?: Function;
+    onkeydown?: Function;
+    onkeyup?: Function;
+    onmouseenter?: Function;
+    onmouseleave?: Function;
+    ontouchstart?: Function;
+    ontouchend?: Function;
+    onpointerenter?: Function;
+    onpointerleave?: Function;
+};
+declare const ImageUploader: import("svelte").Component<$$ComponentProps, {
+    reset: () => void;
+}, "value">;
+type ImageUploader = ReturnType<typeof ImageUploader>;
+export default ImageUploader;

package/dist/components/ImageUploaderPreview.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import IconButton from './IconButton.svelte';
+	import { getStyleFromNumber } from '../utils/style';
+
+	type ImagePreviewProps = {
+		file: File;
+		width?: string | number;
+		height?: string | number;
+		adaptiveSize?: boolean;
+		rounded?: boolean;
+		removeFileAriaLabel?: string;
+		onRemove: () => void;
+		id?: string;
+	};
+
+	let {
+		file,
+		width = '120px',
+		height = '120px',
+		adaptiveSize = false,
+		rounded = false,
+		removeFileAriaLabel,
+		onRemove,
+		id
+	}: ImagePreviewProps = $props();
+
+	let imageSizes = $state<Record<string, { width: number; height: number }>>({});
+
+	const getImageUrl = (file: File): string => {
+		return URL.createObjectURL(file);
+	};
+
+	// 画像サイズを取得してキャッシュに保存
+	const loadImageSize = (file: File) => {
+		const fileKey = file.name + file.size;
+
+		if (imageSizes[fileKey]) {
+			return; // 既にキャッシュされている
+		}
+
+		const img = new Image();
+		img.onload = () => {
+			imageSizes[fileKey] = { width: img.naturalWidth, height: img.naturalHeight };
+		};
+		img.onerror = () => {
+			imageSizes[fileKey] = { width: 120, height: 120 };
+		};
+		img.src = getImageUrl(file);
+	};
+
+	// adaptiveSizeによる分岐を最初に行う
+	const imageSizeStyle = $derived.by(() => {
+		if (adaptiveSize) {
+			return `
+			  width: 100%;
+        height: auto;
+				max-width:  '100%';
+			`;
+		} else {
+			return `
+				width: ${getStyleFromNumber(width)};
+				height: ${getStyleFromNumber(height)};
+			`;
+		}
+	});
+
+	onDestroy(() => {
+		if (file) {
+			URL.revokeObjectURL(getImageUrl(file));
+		}
+	});
+</script>
+
+<div
+	class="image-uploader-preview"
+	class:image-uploader-preview--rounded={rounded}
+	class:image-uploader-preview--adaptive={adaptiveSize}
+	style={imageSizeStyle}
+>
+	<img
+		src={getImageUrl(file)}
+		alt={file.name}
+		class="image-uploader-preview__image"
+		class:image-uploader-preview__image--rounded={rounded}
+		onload={() => {
+			loadImageSize(file);
+		}}
+	/>
+	<div class="image-uploader-preview__delete">
+		<IconButton
+			iconFilled={true}
+			size={24}
+			color="var(--svelte-ui-text-color)"
+			onclick={(e) => {
+				e.stopPropagation();
+				onRemove();
+			}}
+			ariaLabel={removeFileAriaLabel}
+			tabindex={-1}
+		>
+			cancel
+		</IconButton>
+	</div>
+</div>
+
+<style>
+	.image-uploader-preview {
+		position: relative;
+	}
+
+	.image-uploader-preview__image {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		object-position: center;
+		border-radius: var(--svelte-ui-image-uploader-preview-border-radius);
+	}
+
+	.image-uploader-preview--adaptive .image-uploader-preview__image {
+		object-fit: contain;
+	}
+
+	.image-uploader-preview::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border-radius: var(--svelte-ui-image-uploader-preview-border-radius);
+		box-shadow: inset 0 0 0 var(--svelte-ui-border-width) var(--svelte-ui-border-weak-color);
+	}
+
+	.image-uploader-preview--rounded::after,
+	.image-uploader-preview__image--rounded {
+		border-radius: var(--svelte-ui-image-uploader-preview-border-radius-rounded);
+	}
+
+	.image-uploader-preview__delete {
+		position: absolute;
+		top: 4px;
+		right: 4px;
+		background-color: var(--svelte-ui-surface-color);
+		border-radius: var(--svelte-ui-border-radius-rounded);
+		opacity: 0;
+		transition: opacity var(--svelte-ui-transition-duration);
+		z-index: 10;
+	}
+
+	@media (hover: hover) {
+		.image-uploader-preview:hover .image-uploader-preview__delete {
+			opacity: 1;
+		}
+	}
+</style>

package/dist/components/ImageUploaderPreview.svelte.d.ts

@@ -0,0 +1,13 @@
+type ImagePreviewProps = {
+    file: File;
+    width?: string | number;
+    height?: string | number;
+    adaptiveSize?: boolean;
+    rounded?: boolean;
+    removeFileAriaLabel?: string;
+    onRemove: () => void;
+    id?: string;
+};
+declare const ImageUploaderPreview: import("svelte").Component<ImagePreviewProps, {}, "">;
+type ImageUploaderPreview = ReturnType<typeof ImageUploaderPreview>;
+export default ImageUploaderPreview;