@14ch/svelte-ui 0.0.1

package/dist/components/FileUploader.svelte

@@ -0,0 +1,456 @@
+<!-- FileUploader.svelte -->
+
+<script lang="ts">
+	import Icon from './Icon.svelte';
+	import IconButton from './IconButton.svelte';
+	import { announceToScreenReader } from '../utils/accessibility';
+	import { getStyleFromNumber } from '../utils/style';
+	import { t } from '../i18n';
+	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	let {
+		// 基本プロパティ
+		value = $bindable(),
+		multiple = false,
+		maxFileSize = 5 * 1024 * 1024,
+		placeholder = t('fileUploader.placeholder'),
+
+		// HTML属性系
+		id = `file-uploader-${Math.random().toString(36).substring(2, 15)}`,
+		accept = '',
+
+		// スタイル/レイアウト
+		width = undefined,
+		height = undefined,
+		rounded = false,
+
+		// アイコン系
+		icon = 'upload',
+		iconSize = 32,
+		iconFilled = false,
+		iconWeight = 300,
+		iconGrade = 0,
+		iconOpticalSize = iconSize,
+		iconVariant = 'outlined',
+		removeFileAriaLabel = t('fileUploader.removeFile'),
+
+		// 入力イベント
+		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;
+
+		// アイコン系
+		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('');
+
+	// =========================================================================
+	// Effects
+	// =========================================================================
+	$effect(() => {
+		if (value && value.length > 0) {
+			const fileCount = value.length;
+			const fileNames = Array.from(value)
+				.map((file) => file.name)
+				.join(', ');
+			announceToScreenReader(`${fileCount} file${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 removeFile = (index: number) => {
+		if (!value) return;
+
+		const dt = new DataTransfer();
+		for (let i = 0; i < value.length; i++) {
+			if (i !== index) {
+				dt.items.add(value[i]);
+			}
+		}
+		value = dt.files.length > 0 ? dt.files : undefined;
+	};
+
+	const validateFile = (file: File): boolean => {
+		if (file.size > maxFileSize) {
+			errorMessage = t('fileUploader.maxFileSizeError', {
+				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);
+		}
+	};
+
+	export const reset = () => {
+		if (fileInputRef) {
+			fileInputRef.value = '';
+			value = undefined;
+			errorMessage = '';
+		}
+	};
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const widthStyle = $derived(getStyleFromNumber(width) || '100%');
+</script>
+
+<button
+	bind:this={dropAreaRef}
+	class="file-uploader"
+	class:file-uploader--hover={isHover}
+	class:rounded
+	style="
+		--file-uploader-width: {widthStyle};
+		--file-uploader-height: {height}px
+	"
+	data-testid="file-uploader"
+	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('fileUploader.uploadFile')}
+	aria-describedby={`${id}-help`}
+>
+	{#if value && value.length > 0}
+		<div class="file-uploader__description file-uploader__description--with-file">
+			<Icon
+				size={iconSize}
+				filled={iconFilled}
+				weight={iconWeight}
+				grade={iconGrade}
+				opticalSize={iconOpticalSize}
+				variant={iconVariant}>{icon}</Icon
+			>
+		</div>
+		<ul class="file-uploader__file-list">
+			{#each value as file, index}
+				<li class="file-uploader__file-list-item">
+					{file.name}
+					<IconButton
+						size={24}
+						iconFilled={true}
+						iconWeight={300}
+						color="var(--svelte-ui-text-color)"
+						onclick={(e) => {
+							e.stopPropagation();
+							removeFile(index);
+						}}
+						ariaLabel={removeFileAriaLabel}
+						tabindex={-1}
+					>
+						cancel
+					</IconButton>
+				</li>
+			{/each}
+		</ul>
+	{:else}
+		<div class="file-uploader__description">
+			<Icon
+				size={iconSize}
+				filled={iconFilled}
+				weight={iconWeight}
+				grade={iconGrade}
+				opticalSize={iconOpticalSize}
+				variant={iconVariant}>{icon}</Icon
+			>
+			{@html placeholder}
+		</div>
+	{/if}
+
+	{#if errorMessage}
+		<div class="file-uploader__error-message" role="alert" aria-live="polite">
+			{errorMessage}
+		</div>
+	{/if}
+
+	<input
+		bind:this={fileInputRef}
+		{accept}
+		{multiple}
+		class="file-uploader__input"
+		{id}
+		type="file"
+		onchange={(event) => {
+			const target = event.target as HTMLInputElement;
+			if (target.files && target.files.length > 0) {
+				handleFileChange(target.files);
+			}
+		}}
+	/>
+</button>
+
+<style>
+	.file-uploader {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: 16px;
+		position: relative;
+		width: var(--file-uploader-width, 100%);
+		height: var(--file-uploader-height);
+		min-height: 100px;
+		padding: 16px;
+		background-color: var(--svelte-ui-file-uploader-bg);
+		border-radius: var(--svelte-ui-border-radius);
+	}
+
+	.file-uploader::before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: transparent;
+		border: var(--svelte-ui-file-uploader-border-style) var(--svelte-ui-file-uploader-border-width)
+			var(--svelte-ui-file-uploader-border-color);
+		border-radius: var(--svelte-ui-border-radius);
+		transition-property: background-color border-color;
+		transition-duration: var(--svelte-ui-transition-duration);
+	}
+
+	.file-uploader.rounded {
+		border-radius: var(--svelte-ui-border-radius-rounded);
+	}
+
+	@media (hover: hover) {
+		.file-uploader:hover::before,
+		.file-uploader--hover::before {
+			background-color: var(--svelte-ui-file-uploader-hover-bg);
+			border-color: var(--svelte-ui-file-uploader-hover-border-color);
+		}
+	}
+
+	.file-uploader:focus-visible {
+		outline: var(--svelte-ui-focus-outline-inner);
+		outline-offset: var(--svelte-ui-focus-outline-offset-inner);
+	}
+
+	.file-uploader__description {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 16px;
+		color: var(--svelte-ui-text-subtle-color);
+	}
+
+	.file-uploader__input {
+		display: none;
+	}
+
+	@media (hover: hover) {
+		.file-uploader:hover .file-uploader__description,
+		.file-uploader--hover .file-uploader__description {
+			color: var(--svelte-ui-file-uploader-hover-color);
+		}
+	}
+
+	.file-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);
+	}
+
+	.file-uploader__file-list {
+		display: flex;
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: 8px;
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		width: 100%;
+	}
+
+	.file-uploader__file-list-item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 4px 4px 4px 12px;
+		background-color: var(--svelte-ui-file-uploader-item-bg);
+		border-radius: var(--svelte-ui-border-radius-rounded);
+	}
+</style>

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

@@ -0,0 +1,36 @@
+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;
+    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 FileUploader: import("svelte").Component<$$ComponentProps, {
+    reset: () => void;
+}, "value">;
+type FileUploader = ReturnType<typeof FileUploader>;
+export default FileUploader;

package/dist/components/Icon.svelte

@@ -0,0 +1,167 @@
+<!-- Icon.svelte -->
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+	import { getStyleFromNumber } from '../utils/style';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	let {
+		// Snippet
+		children,
+
+		// 基本プロパティ
+		title,
+		fallbackText,
+
+		// スタイル/レイアウト
+		size = 24,
+		color = '',
+		customStyle = '',
+
+		// アイコン関連
+		filled = false,
+		weight = 300,
+		grade = 0,
+		opticalSize = size,
+		variant = 'outlined',
+
+		// ARIA/アクセシビリティ
+		ariaLabel,
+		decorative = true,
+
+		// その他
+		...restProps
+	}: {
+		// Snippet
+		children: Snippet;
+
+		// 基本プロパティ
+		title?: string;
+		fallbackText?: string;
+
+		// スタイル/レイアウト
+		size?: number;
+		color?: string;
+		customStyle?: string;
+
+		// アイコン関連
+		filled?: boolean;
+		weight?: IconWeight;
+		grade?: IconGrade;
+		opticalSize?: IconOpticalSize;
+		variant?: IconVariant;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		decorative?: boolean;
+
+		// その他
+		[key: string]: any;
+	} = $props();
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const iconClasses = $derived(`material-symbols-${variant}`);
+
+	const fontVariationSettings = $derived(
+		`'FILL' ${filled ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' ${opticalSize}`
+	);
+
+	const ariaAttributes = $derived({
+		'aria-hidden': decorative && !ariaLabel ? true : undefined,
+		'aria-label': ariaLabel || undefined,
+		role: !decorative && ariaLabel ? 'img' : undefined
+	});
+
+	const iconStyle = $derived(
+		`width: ${size}px; height: ${size}px; font-size: ${size}px; 
+		color: ${color}; line-height: 1; 
+		font-variation-settings: ${fontVariationSettings}; 
+		${customStyle}`
+	);
+</script>
+
+<i
+	class={iconClasses}
+	style={iconStyle}
+	{title}
+	{...ariaAttributes}
+	{...restProps}
+	data-testid="icon"
+>
+	{@render children()}
+</i>
+
+{#if fallbackText}
+	<!-- Unicode文字での代替表示 -->
+	<span
+		class="icon-fallback-text"
+		style="width: {size}px; height: {size}px; font-size: {size}px; {customStyle}"
+		{...ariaAttributes}
+		{...restProps}
+		data-testid="icon-fallback"
+	>
+		{fallbackText}
+	</span>
+{/if}
+
+<style>
+	.material-symbols-outlined,
+	.material-symbols-filled,
+	.material-symbols-rounded,
+	.material-symbols-sharp {
+		display: block;
+		font-family: 'Material Symbols Outlined';
+		font-size: inherit;
+		color: inherit;
+		line-height: inherit;
+		text-transform: none;
+		letter-spacing: normal;
+		word-wrap: normal;
+		white-space: nowrap;
+		direction: ltr;
+		transition-property: color, transform;
+		transition-duration: var(--svelte-ui-transition-duration);
+		transition-timing-function: ease;
+	}
+
+	/* font-variation-settings are controlled via inline styles for dynamic props */
+
+	.icon-fallback-text {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		line-height: 1;
+		color: inherit;
+		transition-property: color, transform;
+		transition-duration: var(--svelte-ui-transition-duration);
+		transition-timing-function: ease;
+	}
+
+	/* Prefers reduced motion */
+	@media (prefers-reduced-motion: reduce) {
+		.material-symbols-outlined,
+		.material-symbols-filled,
+		.material-symbols-rounded,
+		.material-symbols-sharp,
+		.icon-fallback-text {
+			transition: none;
+		}
+	}
+
+	/* Print styles */
+	@media print {
+		.material-symbols-outlined,
+		.material-symbols-filled,
+		.material-symbols-rounded,
+		.material-symbols-sharp,
+		.icon-fallback-text {
+			color: black !important;
+		}
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+type $$ComponentProps = {
+    children: Snippet;
+    title?: string;
+    fallbackText?: string;
+    size?: number;
+    color?: string;
+    customStyle?: string;
+    filled?: boolean;
+    weight?: IconWeight;
+    grade?: IconGrade;
+    opticalSize?: IconOpticalSize;
+    variant?: IconVariant;
+    ariaLabel?: string;
+    decorative?: boolean;
+    [key: string]: any;
+};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;