@14ch/svelte-ui 0.0.11 → 0.0.13

package/dist/components/Textarea.svelte

@@ -7,10 +7,97 @@
 	import { convertToHtml, convertToHtmlWithLink } from '../utils/formatText';
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import type { IconVariant } from '../types/icon';
+	import type {
+		FocusHandler,
+		KeyboardHandler,
+		MouseHandler,
+		TouchHandler,
+		PointerHandler,
+		BivariantValueHandler
+	} from '../types/eventHandlers';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type TextareaProps = {
+		// 基本プロパティ
+		name?: string;
+		value: string;
+		placeholder?: string;
+
+		// HTML属性系
+		id?: string | null;
+		tabindex?: number | null;
+		maxlength?: number | null;
+		autocomplete?: HTMLTextareaAttributes['autocomplete'];
+		wrap?: 'soft' | 'hard' | null;
+		spellcheck?: boolean | null;
+		autocapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' | null;
+		textareaAttributes?: HTMLTextareaAttributes | undefined;
+
+		// スタイル/レイアウト
+		rows?: number;
+		minHeight?: string | number | null;
+		maxHeight?: string | number | null;
+		inline?: boolean;
+		focusStyle?: 'background' | 'outline' | 'none';
+		fullWidth?: boolean;
+		fullHeight?: boolean;
+		width?: string | number | null;
+		rounded?: boolean;
+		customStyle?: string;
+
+		// 状態/動作
+		disabled?: boolean;
+		autoResize?: boolean;
+		resizable?: boolean;
+		clearable?: boolean;
+		clearButtonAriaLabel?: string;
+		readonly?: boolean;
+		required?: boolean;
+		iconVariant?: IconVariant;
+		linkify?: boolean;
+
+		// フォーカスイベント
+		onfocus?: FocusHandler;
+		onblur?: FocusHandler;
+
+		// キーボードイベント
+		onkeydown?: KeyboardHandler;
+		onkeyup?: KeyboardHandler;
+
+		// マウスイベント
+		onclick?: MouseHandler;
+		onmousedown?: MouseHandler;
+		onmouseup?: MouseHandler;
+		onmouseenter?: MouseHandler;
+		onmouseleave?: MouseHandler;
+		onmouseover?: MouseHandler;
+		onmouseout?: MouseHandler;
+		oncontextmenu?: MouseHandler;
+		onauxclick?: MouseHandler;
+
+		// タッチイベント
+		ontouchstart?: TouchHandler;
+		ontouchend?: TouchHandler;
+		ontouchmove?: TouchHandler;
+		ontouchcancel?: TouchHandler;
+
+		// ポインターイベント
+		onpointerdown?: PointerHandler;
+		onpointerup?: PointerHandler;
+		onpointerenter?: PointerHandler;
+		onpointerleave?: PointerHandler;
+		onpointermove?: PointerHandler;
+		onpointercancel?: PointerHandler;
+
+		// 入力イベント
+		onchange?: (value: string) => void;
+		oninput?: (value: string) => void;
+
+		// その他
+		[key: string]: any;
+	};
 
 	let {
 		// 基本プロパティ
@@ -90,94 +177,14 @@
 
 		// その他
 		...restProps
-	}: {
-		// 基本プロパティ
-		name?: string;
-		value: string;
-		placeholder?: string;
-
-		// HTML属性系
-		id?: string | null;
-		tabindex?: number | null;
-		maxlength?: number | null;
-		autocomplete?: HTMLTextareaAttributes['autocomplete'];
-		wrap?: 'soft' | 'hard' | null;
-		spellcheck?: boolean | null;
-		autocapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' | null;
-		textareaAttributes?: HTMLTextareaAttributes | undefined;
-
-		// スタイル/レイアウト
-		rows?: number;
-		minHeight?: number | null;
-		maxHeight?: string | number | null;
-		inline?: boolean;
-		focusStyle?: 'background' | 'outline' | 'none';
-		fullWidth?: boolean;
-		fullHeight?: boolean;
-		width?: string | number | null;
-		rounded?: boolean;
-		customStyle?: string;
-
-		// 状態/動作
-		disabled?: boolean;
-		autoResize?: boolean;
-		resizable?: boolean;
-		clearable?: boolean;
-		clearButtonAriaLabel?: string;
-		readonly?: boolean;
-		required?: boolean;
-		iconVariant?: IconVariant;
-		linkify?: boolean;
-
-		// フォーカスイベント
-		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
-
-		// マウスイベント
-		onclick?: Function; // No params for type inference
-		onmousedown?: Function; // No params for type inference
-		onmouseup?: Function; // No params for type inference
-		onmouseenter?: Function; // No params for type inference
-		onmouseleave?: Function; // No params for type inference
-		onmouseover?: Function; // No params for type inference
-		onmouseout?: Function; // No params for type inference
-		oncontextmenu?: Function; // No params for type inference
-		onauxclick?: Function; // No params for type inference
-
-		// タッチイベント
-		ontouchstart?: Function; // No params for type inference
-		ontouchend?: Function; // No params for type inference
-		ontouchmove?: Function; // No params for type inference
-		ontouchcancel?: Function; // No params for type inference
-
-		// ポインターイベント
-		onpointerdown?: Function; // No params for type inference
-		onpointerup?: Function; // No params for type inference
-		onpointerenter?: Function; // No params for type inference
-		onpointerleave?: Function; // No params for type inference
-		onpointermove?: Function; // No params for type inference
-		onpointercancel?: Function; // No params for type inference
-
-		// 入力イベント
-		onchange?: (value: string) => void;
-		oninput?: (value: string) => void;
-
-		// その他
-		[key: string]: any;
-	} = $props();
+	}: TextareaProps = $props();
 
 	let ref: HTMLTextAreaElement | null = null;
 	let isFocused: boolean = $state(false);
 
 	// =========================================================================
-
 	// Methods
 	// =========================================================================
-
 	const clear = (): void => {
 		if (disabled || readonly) return;
 		value = '';
@@ -326,21 +333,15 @@
 	// =========================================================================
 	// $derived
 	// =========================================================================
-
-	// min-height用CSS変数の上書きスタイル
-	// デフォルト値は variables.scss の --svelte-ui-textarea-min-height に委譲し、
-	// props で minHeight が指定されたときだけ上書きする
-	const minHeightVarStyle = $derived(
-		!inline && minHeight != null ? `--svelte-ui-textarea-min-height: ${minHeight}px;` : ''
-	);
-
+	const minHeightStyle = $derived(getStyleFromNumber(minHeight));
 	const maxHeightStyle = $derived(getStyleFromNumber(maxHeight));
 	const widthStyle = $derived(getStyleFromNumber(width));
 
 	// HTML表示用の値（autoResize時の高さ調整用）
 	const htmlValue = $derived.by(() => {
 		if (value !== '') {
-			let html = convertToHtml(value) as string;
+			const converted = convertToHtml(value);
+			let html = typeof converted === 'string' ? converted : String(converted ?? '');
 			// 最後の行が空だったら空白を追加（高さ調整のため）
 			const lines = html.split('<br />');
 			if (lines.length > 0 && lines[lines.length - 1] === '') {
@@ -350,7 +351,6 @@
 		} else {
 			// inline かつ value が空のとき、placeholder がなければ
 			// 1行分の高さを確保するためにダミーの &nbsp; を入れる
-			// （placeholder がある場合は :empty::before でプレースホルダを表示したいので空にしておく）
 			if (inline && !placeholder) {
 				return '&nbsp;';
 			}
@@ -388,7 +388,7 @@
 	<div
 		class="textarea__display-text"
 		data-placeholder={placeholder}
-		style="{minHeightVarStyle} {customStyle}"
+		style="min-height: {minHeightStyle}; {customStyle}"
 	>
 		{@html htmlValue}
 	</div>
@@ -410,7 +410,7 @@
 			{spellcheck}
 			{autocapitalize}
 			class:resizable
-			style="width: {widthStyle}; {minHeightVarStyle} {customStyle}"
+			style="min-height: {minHeightStyle}; width: {widthStyle}; {customStyle}"
 			onchange={handleChange}
 			oninput={handleInput}
 			onfocus={handleFocus}
@@ -458,7 +458,7 @@
 		{/if}
 	</div>
 	{#if linkify}
-		<div class="textarea__link-text" style="{minHeightVarStyle} {customStyle}">
+		<div class="textarea__link-text" style="min-height: {minHeightStyle}; {customStyle}">
 			{@html linkHtmlValue}
 		</div>
 	{/if}
@@ -662,7 +662,8 @@
 	}
 
 	textarea[readonly] {
-		background-color: var(--svelte-ui-input-readonly-bg);
+		/* Match Input behavior: readonly fields keep the same background,
+		 * but use a default cursor to indicate non-editable. */
 		cursor: default;
 	}
 

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

@@ -1,6 +1,7 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
-type $$ComponentProps = {
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
+export type TextareaProps = {
     name?: string;
     value: string;
     placeholder?: string;
@@ -13,7 +14,7 @@ type $$ComponentProps = {
     autocapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' | null;
     textareaAttributes?: HTMLTextareaAttributes | undefined;
     rows?: number;
-    minHeight?: number | null;
+    minHeight?: string | number | null;
     maxHeight?: string | number | null;
     inline?: boolean;
     focusStyle?: 'background' | 'outline' | 'none';
@@ -31,34 +32,34 @@ type $$ComponentProps = {
     required?: boolean;
     iconVariant?: IconVariant;
     linkify?: boolean;
-    onfocus?: Function;
-    onblur?: Function;
-    onkeydown?: Function;
-    onkeyup?: Function;
-    onclick?: Function;
-    onmousedown?: Function;
-    onmouseup?: Function;
-    onmouseenter?: Function;
-    onmouseleave?: Function;
-    onmouseover?: Function;
-    onmouseout?: Function;
-    oncontextmenu?: Function;
-    onauxclick?: Function;
-    ontouchstart?: Function;
-    ontouchend?: Function;
-    ontouchmove?: Function;
-    ontouchcancel?: Function;
-    onpointerdown?: Function;
-    onpointerup?: Function;
-    onpointerenter?: Function;
-    onpointerleave?: Function;
-    onpointermove?: Function;
-    onpointercancel?: Function;
+    onfocus?: FocusHandler;
+    onblur?: FocusHandler;
+    onkeydown?: KeyboardHandler;
+    onkeyup?: KeyboardHandler;
+    onclick?: MouseHandler;
+    onmousedown?: MouseHandler;
+    onmouseup?: MouseHandler;
+    onmouseenter?: MouseHandler;
+    onmouseleave?: MouseHandler;
+    onmouseover?: MouseHandler;
+    onmouseout?: MouseHandler;
+    oncontextmenu?: MouseHandler;
+    onauxclick?: MouseHandler;
+    ontouchstart?: TouchHandler;
+    ontouchend?: TouchHandler;
+    ontouchmove?: TouchHandler;
+    ontouchcancel?: TouchHandler;
+    onpointerdown?: PointerHandler;
+    onpointerup?: PointerHandler;
+    onpointerenter?: PointerHandler;
+    onpointerleave?: PointerHandler;
+    onpointermove?: PointerHandler;
+    onpointercancel?: PointerHandler;
     onchange?: (value: string) => void;
     oninput?: (value: string) => void;
     [key: string]: any;
 };
-declare const Textarea: import("svelte").Component<$$ComponentProps, {
+declare const Textarea: import("svelte").Component<TextareaProps, {
     focus: () => void;
 }, "value">;
 type Textarea = ReturnType<typeof Textarea>;

package/dist/components/skeleton/Skeleton.svelte

@@ -13,8 +13,17 @@
 	import { DEFAULT_PATTERN_CONFIG, PRESET_PATTERNS } from '../../constants/skeleton';
 
 	// =========================================================================
-	// Props
+	// Props, States & Constants
 	// =========================================================================
+	export type SkeletonProps = {
+		patterns?: SkeletonPatternConfig[];
+		repeat?: number;
+		repeatGap?: string | number;
+		patternGap?: string | number;
+		className?: string;
+		customStyle?: string;
+		animated?: boolean;
+	};
 
 	let {
 		// 基本プロパティ
@@ -25,22 +34,11 @@
 		className = '',
 		customStyle = '',
 		animated = true
-	}: {
-		patterns?: SkeletonPatternConfig[];
-		repeat?: number;
-		repeatGap?: string | number;
-		patternGap?: string | number;
-		className?: string;
-		customStyle?: string;
-		animated?: boolean;
-	} = $props();
+	}: SkeletonProps = $props();
 
 	// =========================================================================
-	// $derived
+	// Methods
 	// =========================================================================
-
-	const containerClasses = $derived(['skeleton', className].filter(Boolean).join(' '));
-
 	// パターン設定をマージ
 	const mergedPatterns = $derived.by(() => {
 		return patterns
@@ -97,6 +95,10 @@
 			.flat();
 	});
 
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const containerClasses = $derived(['skeleton', className].filter(Boolean).join(' '));
 	const repeatGapStyle = $derived(getStyleFromNumber(repeatGap));
 	const patternGapStyle = $derived(getStyleFromNumber(patternGap));
 </script>

package/dist/components/skeleton/Skeleton.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { SkeletonPatternConfig } from '../../types/skeleton';
-type $$ComponentProps = {
+export type SkeletonProps = {
     patterns?: SkeletonPatternConfig[];
     repeat?: number;
     repeatGap?: string | number;
@@ -8,6 +8,6 @@ type $$ComponentProps = {
     customStyle?: string;
     animated?: boolean;
 };
-declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;

package/dist/components/skeleton/SkeletonAvatar.svelte

@@ -12,18 +12,22 @@
 	} from '../../constants/skeleton';
 
 	// =========================================================================
-	// Props
+	// Props, States & Constants
 	// =========================================================================
+	export type SkeletonAvatarProps = {
+		avatarConfig?: Partial<SkeletonAvatarConfig>;
+		animated?: boolean;
+	};
 
 	let {
 		// 基本プロパティ
 		avatarConfig = {},
 		animated = true
-	}: {
-		avatarConfig?: Partial<SkeletonAvatarConfig>;
-		animated?: boolean;
-	} = $props();
+	}: SkeletonAvatarProps = $props();
 
+	// =========================================================================
+	// $derived
+	// =========================================================================
 	// マージされた設定
 	const mergedAvatarImageConfig = $derived({
 		...DEFAULT_AVATAR_IMAGE_CONFIG,

package/dist/components/skeleton/SkeletonAvatar.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { SkeletonAvatarConfig } from '../../types/skeleton';
-type $$ComponentProps = {
+export type SkeletonAvatarProps = {
     avatarConfig?: Partial<SkeletonAvatarConfig>;
     animated?: boolean;
 };
-declare const SkeletonAvatar: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const SkeletonAvatar: import("svelte").Component<SkeletonAvatarProps, {}, "">;
 type SkeletonAvatar = ReturnType<typeof SkeletonAvatar>;
 export default SkeletonAvatar;

package/dist/components/skeleton/SkeletonBox.svelte

@@ -5,8 +5,17 @@
 	import { DEFAULT_BOX_CONFIG } from '../../constants/skeleton';
 
 	// =========================================================================
-	// Props
+	// Props, States & Constants
 	// =========================================================================
+	export type SkeletonBoxProps = {
+		width?: string | number;
+		height?: string | number;
+		aspectRatio?: string | number;
+		radius?: string | number;
+		animated?: boolean;
+		className?: string;
+		customStyle?: string;
+	};
 
 	let {
 		// 基本プロパティ
@@ -17,20 +26,11 @@
 		animated = true,
 		className = '',
 		customStyle = ''
-	}: {
-		width?: string | number;
-		height?: string | number;
-		aspectRatio?: string | number;
-		radius?: string | number;
-		animated?: boolean;
-		className?: string;
-		customStyle?: string;
-	} = $props();
+	}: SkeletonBoxProps = $props();
 
 	// =========================================================================
 	// $derived
 	// =========================================================================
-
 	const containerClasses = $derived(
 		['skeleton-box', animated && 'skeleton-box--animated', className].filter(Boolean).join(' ')
 	);

package/dist/components/skeleton/SkeletonBox.svelte.d.ts

@@ -1,4 +1,4 @@
-type $$ComponentProps = {
+export type SkeletonBoxProps = {
     width?: string | number;
     height?: string | number;
     aspectRatio?: string | number;
@@ -7,6 +7,6 @@ type $$ComponentProps = {
     className?: string;
     customStyle?: string;
 };
-declare const SkeletonBox: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const SkeletonBox: import("svelte").Component<SkeletonBoxProps, {}, "">;
 type SkeletonBox = ReturnType<typeof SkeletonBox>;
 export default SkeletonBox;

package/dist/components/skeleton/SkeletonButton.svelte

@@ -6,14 +6,19 @@
 	import type { SkeletonButtonConfig } from '../../types/skeleton';
 	import { DEFAULT_BUTTON_CONFIG } from '../../constants/skeleton';
 
-	let {
-		buttonConfig = {},
-		animated = true
-	}: {
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	export type SkeletonButtonProps = {
 		buttonConfig?: Partial<SkeletonButtonConfig>;
 		animated?: boolean;
-	} = $props();
+	};
 
+	let { buttonConfig = {}, animated = true }: SkeletonButtonProps = $props();
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
 	// マージされた設定
 	const mergedButtonConfig = $derived({
 		...DEFAULT_BUTTON_CONFIG,

package/dist/components/skeleton/SkeletonButton.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { SkeletonButtonConfig } from '../../types/skeleton';
-type $$ComponentProps = {
+export type SkeletonButtonProps = {
     buttonConfig?: Partial<SkeletonButtonConfig>;
     animated?: boolean;
 };
-declare const SkeletonButton: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const SkeletonButton: import("svelte").Component<SkeletonButtonProps, {}, "">;
 type SkeletonButton = ReturnType<typeof SkeletonButton>;
 export default SkeletonButton;

package/dist/components/skeleton/SkeletonHeading.svelte

@@ -7,27 +7,24 @@
 	import { DEFAULT_HEADING_CONFIG } from '../../constants/skeleton';
 
 	// =========================================================================
-	// Props
+	// Props, States & Constants
 	// =========================================================================
-
-	let {
-		headingConfig = {},
-		animated = true
-	}: {
+	export type SkeletonHeadingProps = {
 		headingConfig?: Partial<SkeletonHeadingConfig>;
 		animated?: boolean;
-	} = $props();
+	};
+
+	let { headingConfig = {}, animated = true }: SkeletonHeadingProps = $props();
 
+	// =========================================================================
+	// $derived
+	// =========================================================================
 	// マージされた設定
 	const mergedHeadingConfig = $derived({
 		...DEFAULT_HEADING_CONFIG,
 		...headingConfig
 	});
 
-	// =========================================================================
-	// $derived
-	// =========================================================================
-
 	const widthStyle = $derived(getStyleFromNumber(mergedHeadingConfig.width));
 	const fontSizeStyle = $derived(
 		mergedHeadingConfig.fontSize

package/dist/components/skeleton/SkeletonHeading.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { SkeletonHeadingConfig } from '../../types/skeleton';
-type $$ComponentProps = {
+export type SkeletonHeadingProps = {
     headingConfig?: Partial<SkeletonHeadingConfig>;
     animated?: boolean;
 };
-declare const SkeletonHeading: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const SkeletonHeading: import("svelte").Component<SkeletonHeadingProps, {}, "">;
 type SkeletonHeading = ReturnType<typeof SkeletonHeading>;
 export default SkeletonHeading;

package/dist/components/skeleton/SkeletonMedia.svelte

@@ -11,16 +11,20 @@
 		DEFAULT_TEXT_CONFIG_MEDIA
 	} from '../../constants/skeleton';
 
-	let {
-		width = '100%',
-		mediaConfig = {},
-		animated = true
-	}: {
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	export type SkeletonMediaProps = {
 		width?: string | number;
 		mediaConfig?: Partial<SkeletonMediaConfig>;
 		animated?: boolean;
-	} = $props();
+	};
 
+	let { width = '100%', mediaConfig = {}, animated = true }: SkeletonMediaProps = $props();
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
 	// マージされた設定
 	const mergedMediaConfig = $derived({
 		...DEFAULT_MEDIA_CONFIG,

package/dist/components/skeleton/SkeletonMedia.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { SkeletonMediaConfig } from '../../types/skeleton';
-type $$ComponentProps = {
+export type SkeletonMediaProps = {
     width?: string | number;
     mediaConfig?: Partial<SkeletonMediaConfig>;
     animated?: boolean;
 };
-declare const SkeletonMedia: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const SkeletonMedia: import("svelte").Component<SkeletonMediaProps, {}, "">;
 type SkeletonMedia = ReturnType<typeof SkeletonMedia>;
 export default SkeletonMedia;

package/dist/components/skeleton/SkeletonText.svelte

@@ -7,34 +7,30 @@
 	import { DEFAULT_TEXT_CONFIG } from '../../constants/skeleton';
 
 	// =========================================================================
-	// Props
+	// Props, States & Constants
 	// =========================================================================
+	export type SkeletonTextProps = {
+		textConfig?: Partial<SkeletonTextConfig>;
+		animated?: boolean;
+	};
 
 	let {
 		// 基本プロパティ
 		textConfig = {},
 		animated = true
-	}: {
-		textConfig?: Partial<SkeletonTextConfig>;
-		animated?: boolean;
-	} = $props();
+	}: SkeletonTextProps = $props();
 
+	// =========================================================================
+	// $derived
+	// =========================================================================
 	// マージされた設定
 	const mergedTextConfig = $derived({
 		...DEFAULT_TEXT_CONFIG,
 		...textConfig
 	});
 
-	// =========================================================================
-	// State
-	// =========================================================================
-
 	let containerRef: HTMLDivElement;
 
-	// =========================================================================
-	// $derived
-	// =========================================================================
-
 	const widthStyle = $derived(getStyleFromNumber(mergedTextConfig.width));
 	const fontSizeStyle = $derived(getStyleFromNumber(mergedTextConfig.fontSize));
 </script>