@14ch/svelte-ui 0.0.5 → 0.0.6

package/dist/components/ColorPicker.svelte

@@ -72,7 +72,7 @@
 		...restProps
 	}: {
 		// 基本プロパティ
-		value?: string;
+		value: string;
 
 		// HTML属性系
 		id?: string;

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

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
 type $$ComponentProps = {
-    value?: string;
+    value: string;
     id?: string;
     inputAttributes?: HTMLInputAttributes | undefined;
     customStyle?: string;

package/dist/components/FileUploader.svelte

@@ -61,7 +61,7 @@
 		onpointerleave = () => {} // No params for type inference
 	}: {
 		// 基本プロパティ
-		value: FileList | undefined;
+		value: FileList | null | undefined;
 		multiple?: boolean;
 		maxFileSize?: number;
 		placeholder?: string;
@@ -86,7 +86,7 @@
 		removeFileAriaLabel?: string;
 
 		// 入力イベント
-		onchange?: (value: FileList | null) => void;
+		onchange?: (value: FileList | null | undefined) => void;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference
@@ -187,7 +187,7 @@
 				dt.items.add(value[i]);
 			}
 		}
-		value = dt.files.length > 0 ? dt.files : undefined;
+		value = dt.files.length > 0 ? dt.files : null;
 	};
 
 	const validateFile = (file: File): boolean => {
@@ -240,7 +240,7 @@
 	export const reset = () => {
 		if (fileInputRef) {
 			fileInputRef.value = '';
-			value = undefined;
+			value = null;
 			errorMessage = '';
 		}
 	};

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

@@ -1,6 +1,6 @@
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 type $$ComponentProps = {
-    value: FileList | undefined;
+    value: FileList | null | undefined;
     multiple?: boolean;
     maxFileSize?: number;
     placeholder?: string;
@@ -17,7 +17,7 @@ type $$ComponentProps = {
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
     removeFileAriaLabel?: string;
-    onchange?: (value: FileList | null) => void;
+    onchange?: (value: FileList | null | undefined) => void;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;

package/dist/components/ImageUploader.svelte

@@ -66,7 +66,7 @@
 		onpointerleave = () => {} // No params for type inference
 	}: {
 		// 基本プロパティ
-		value: FileList | undefined;
+		value: FileList | null | undefined;
 		multiple?: boolean;
 		maxFileSize?: number;
 		placeholder?: string;
@@ -93,7 +93,7 @@
 		removeFileAriaLabel?: string;
 
 		// 入力イベント
-		onchange?: (value: FileList | null) => void;
+		onchange?: (value: FileList | null | undefined) => void;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference
@@ -295,7 +295,7 @@
 	export const reset = () => {
 		if (fileInputRef) {
 			fileInputRef.value = '';
-			value = undefined;
+			value = null;
 			errorMessage = '';
 			cleanupObjectUrls();
 		}

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

@@ -1,6 +1,6 @@
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 type $$ComponentProps = {
-    value: FileList | undefined;
+    value: FileList | null | undefined;
     multiple?: boolean;
     maxFileSize?: number;
     placeholder?: string;
@@ -19,7 +19,7 @@ type $$ComponentProps = {
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
     removeFileAriaLabel?: string;
-    onchange?: (value: FileList | null) => void;
+    onchange?: (value: FileList | null | undefined) => void;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;

package/dist/components/Input.svelte

@@ -28,6 +28,7 @@
 		step = null,
 		size = null,
 		autocomplete = null,
+		spellcheck = null,
 		inputAttributes,
 
 		// スタイル/レイアウト
@@ -109,7 +110,7 @@
 	}: {
 		// 基本プロパティ
 		name?: string;
-		value: string | number | undefined;
+		value: string | number;
 
 		// HTML属性系
 		id?: string | null;
@@ -122,6 +123,7 @@
 		step?: number | null;
 		size?: number | null;
 		autocomplete?: HTMLInputElement['autocomplete'] | null;
+		spellcheck?: boolean | null;
 		inputAttributes?: HTMLInputAttributes | undefined;
 
 		// スタイル/レイアウト
@@ -212,8 +214,8 @@
 	const clear = (): void => {
 		if (disabled || readonly) return;
 		ref?.focus();
-		onchange?.(undefined);
-		value = undefined;
+		value = '';
+		onchange?.('');
 	};
 
 	export const focus = () => {
@@ -368,7 +370,6 @@
 	// $derived
 	// =========================================================================
 	const getDisplayValue = (): string => {
-		if (value === undefined) return '';
 		if (type === 'number' && typeof value === 'number') {
 			return value.toLocaleString();
 		}
@@ -425,6 +426,7 @@
 			{required}
 			{tabindex}
 			{size}
+			{spellcheck}
 			onchange={handleChange}
 			oninput={handleInput}
 			onfocus={handleFocus}

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

@@ -2,7 +2,7 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 type $$ComponentProps = {
     name?: string;
-    value: string | number | undefined;
+    value: string | number;
     id?: string | null;
     type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'number';
     tabindex?: number | null;
@@ -13,6 +13,7 @@ type $$ComponentProps = {
     step?: number | null;
     size?: number | null;
     autocomplete?: HTMLInputElement['autocomplete'] | null;
+    spellcheck?: boolean | null;
     inputAttributes?: HTMLInputAttributes | undefined;
     inline?: boolean;
     focusStyle?: 'background' | 'outline' | 'none';

package/dist/components/Slider.svelte

@@ -71,7 +71,7 @@
 		...restProps
 	}: {
 		// 基本プロパティ
-		value?: number;
+		value: number;
 		name?: string;
 		id?: string;
 

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

@@ -1,6 +1,6 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 type $$ComponentProps = {
-    value?: number;
+    value: number;
     name?: string;
     id?: string;
     min?: number;

package/dist/components/Switch.svelte

@@ -71,7 +71,7 @@
 		children?: Snippet;
 
 		// 基本プロパティ
-		value?: boolean;
+		value: boolean;
 
 		// HTML属性系
 		id?: string;

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

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 type $$ComponentProps = {
     children?: Snippet;
-    value?: boolean;
+    value: boolean;
     id?: string;
     inputAttributes?: HTMLInputAttributes | undefined;
     size?: 'small' | 'medium' | 'large';

package/dist/components/Textarea.svelte

@@ -91,7 +91,7 @@
 	}: {
 		// 基本プロパティ
 		name?: string;
-		value: string | undefined;
+		value: string;
 		placeholder?: string;
 
 		// HTML属性系
@@ -177,9 +177,9 @@
 
 	const clear = (): void => {
 		if (disabled || readonly) return;
-		value = undefined;
+		value = '';
 		ref?.focus();
-		onchange?.(value);
+		onchange?.('');
 	};
 
 	// 外部からフォーカスを当てる（キャレットを先頭に移動）
@@ -334,7 +334,7 @@
 
 	// HTML表示用の値（autoResize時の高さ調整用）
 	const htmlValue = $derived.by(() => {
-		if (typeof value === 'string' && value !== '') {
+		if (value !== '') {
 			let html = value
 				.replace(/ +/g, (match) => ' '.repeat(match.length))
 				.replace(/\n/g, '<br />');
@@ -345,7 +345,7 @@
 			}
 			return html;
 		} else {
-			return value ?? '';
+			return '';
 		}
 	});
 </script>

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

@@ -2,7 +2,7 @@ import type { HTMLTextareaAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
 type $$ComponentProps = {
     name?: string;
-    value: string | undefined;
+    value: string;
     placeholder?: string;
     id?: string | null;
     tabindex?: number | null;

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@14ch/svelte-ui",
 	"description": "Modern Svelte UI components library with TypeScript support",
 	"private": false,
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"type": "module",
 	"keywords": [
 		"svelte",