@14ch/svelte-ui 0.0.15 → 0.0.16

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

@@ -14,6 +14,8 @@ export type InputProps = {
     max?: number | null;
     step?: number | null;
     size?: number | null;
+    decimalPlaces?: number | null;
+    enableThousandsSeparator?: boolean;
     autocomplete?: HTMLInputElement['autocomplete'] | null;
     spellcheck?: boolean | null;
     inputAttributes?: HTMLInputAttributes | undefined;
@@ -41,6 +43,8 @@ export type InputProps = {
     required?: boolean;
     clearable?: boolean;
     linkify?: boolean;
+    enablePasswordVisibilityToggle?: boolean;
+    enableNumberStepper?: boolean;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;
@@ -68,6 +72,18 @@ export type InputProps = {
     oninput?: BivariantValueHandler<string | number>;
     onRightIconClick?: MouseHandler;
     onLeftIconClick?: MouseHandler;
+    onRightIconMouseDown?: MouseHandler;
+    onLeftIconMouseDown?: MouseHandler;
+    onRightIconMouseUp?: MouseHandler;
+    onLeftIconMouseUp?: MouseHandler;
+    onRightIconMouseLeave?: MouseHandler;
+    onLeftIconMouseLeave?: MouseHandler;
+    onRightIconTouchStart?: TouchHandler;
+    onLeftIconTouchStart?: TouchHandler;
+    onRightIconTouchEnd?: TouchHandler;
+    onLeftIconTouchEnd?: TouchHandler;
+    onRightIconTouchCancel?: TouchHandler;
+    onLeftIconTouchCancel?: TouchHandler;
     [key: string]: any;
 };
 declare const Input: import("svelte").Component<InputProps, {

package/dist/components/Textarea.svelte

@@ -6,7 +6,7 @@
 	import { t } from '../i18n';
 	import { convertToHtml, convertToHtmlWithLink } from '../utils/formatText';
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
-	import type { IconVariant } from '../types/icon';
+	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 	import type {
 		FocusHandler,
 		KeyboardHandler,
@@ -47,15 +47,21 @@
 		rounded?: boolean;
 		customStyle?: string;
 
+		// アイコン関連
+		clearButtonAriaLabel?: string;
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+
 		// 状態/動作
 		disabled?: boolean;
 		autoResize?: boolean;
 		resizable?: boolean;
 		clearable?: boolean;
-		clearButtonAriaLabel?: string;
 		readonly?: boolean;
 		required?: boolean;
-		iconVariant?: IconVariant;
 		linkify?: boolean;
 
 		// フォーカスイベント
@@ -127,15 +133,21 @@
 		rounded = false,
 		customStyle = '',
 
+		// アイコン関連
+		clearButtonAriaLabel = t('input.clear'),
+		iconFilled = false,
+		iconWeight = 300,
+		iconGrade = 0,
+		iconOpticalSize = 24,
+		iconVariant = 'outlined',
+
 		// 状態/動作
 		disabled = false,
 		autoResize = true,
 		resizable = false,
 		clearable = false,
-		clearButtonAriaLabel = t('input.clear'),
 		readonly = false,
 		required = false,
-		iconVariant = 'outlined',
 		linkify = false,
 
 		// フォーカスイベント
@@ -179,10 +191,38 @@
 		...restProps
 	}: TextareaProps = $props();
 
-	let ref: HTMLTextAreaElement | null = null;
+	let textareaRef: HTMLTextAreaElement | null = null;
+	let containerRef: HTMLDivElement | null = null;
 	let displayTextRef: HTMLDivElement | null = $state(null);
 	let linkTextRef: HTMLDivElement | null = $state(null);
 	let isFocused: boolean = $state(false);
+	let resizeObserver: ResizeObserver | null = null;
+
+	// =========================================================================
+	// $effect
+	// =========================================================================
+	// autoResize=false のとき、コンポーネント全体のサイズに display-text / link-text を合わせる
+	$effect(() => {
+		if (!containerRef || !displayTextRef || !textareaRef) {
+			cleanupSizeSync();
+			return;
+		}
+
+		// autoResize=true のときは、サイズ同期を行わず従来の挙動を維持
+		if (autoResize) {
+			cleanupSizeSync();
+			return;
+		}
+
+		// 初期同期
+		syncSizeFromTextarea();
+		// resizable=true のときにのみ ResizeObserver をセットアップ
+		setupResizeObserver();
+
+		return () => {
+			cleanupSizeSync();
+		};
+	});
 
 	// =========================================================================
 	// Methods
@@ -190,16 +230,16 @@
 	const clear = (): void => {
 		if (disabled || readonly) return;
 		value = '';
-		ref?.focus();
+		textareaRef?.focus();
 		onchange?.('');
 	};
 
 	// 外部からフォーカスを当てる（キャレットを先頭に移動）
 	export const focus = () => {
-		if (ref) {
-			ref.focus();
-			ref.setSelectionRange(0, 0);
-			ref.scrollTop = 0;
+		if (textareaRef) {
+			textareaRef.focus();
+			textareaRef.setSelectionRange(0, 0);
+			textareaRef.scrollTop = 0;
 		}
 	};
 
@@ -334,8 +374,8 @@
 
 	// スクロール同期
 	const handleScroll = () => {
-		if (!ref) return;
-		const scrollTop = ref.scrollTop;
+		if (!textareaRef) return;
+		const scrollTop = textareaRef.scrollTop;
 		if (displayTextRef) {
 			displayTextRef.scrollTop = scrollTop;
 		}
@@ -344,15 +384,89 @@
 		}
 	};
 
+	// resizable=true のときに textarea のサイズ変更を監視
+	const setupResizeObserver = () => {
+		if (!textareaRef) return;
+
+		// resizable でなければ監視は不要
+		if (!resizable) {
+			if (resizeObserver) {
+				resizeObserver.disconnect();
+				resizeObserver = null;
+			}
+			return;
+		}
+
+		// 既存のオブザーバがあれば一旦解除
+		if (resizeObserver) {
+			resizeObserver.disconnect();
+			resizeObserver = null;
+		}
+
+		resizeObserver = new ResizeObserver(() => {
+			// ユーザーのリサイズ後は textarea の幅でコンテナ幅を上書きする
+			syncSizeFromTextarea({ forceWidth: true });
+		});
+		resizeObserver.observe(textareaRef);
+	};
+
+	// --------------------------------
+	// display-text / link-text と textarea のサイズ同期
+	// --------------------------------
+	// サイズ同期
+	const syncSizeFromTextarea = ({ forceWidth = false }: { forceWidth?: boolean } = {}) => {
+		if (!containerRef || !displayTextRef || !textareaRef) return;
+		const rect = textareaRef.getBoundingClientRect();
+		const height = rect.height;
+		const width = rect.width;
+		if (!height || !width) return;
+
+		// コンポーネント全体の高さは textarea に合わせる
+		containerRef.style.height = `${height}px`;
+
+		// 幅は、初期状態では width プロップを優先し、
+		// ユーザーがリサイズ（ResizeObserver 経由）したあとは textarea の幅で上書きする
+		if (forceWidth || !widthStyle) {
+			containerRef.style.width = `${width}px`;
+		}
+
+		// display-text / link-text はコンテナにフィットさせる
+		displayTextRef.style.height = '100%';
+		displayTextRef.style.width = '100%';
+		if (linkTextRef) {
+			linkTextRef.style.height = '100%';
+			linkTextRef.style.width = '100%';
+		}
+	};
+
+	// サイズ同期を解除
+	const cleanupSizeSync = () => {
+		if (resizeObserver) {
+			resizeObserver.disconnect();
+			resizeObserver = null;
+		}
+		if (containerRef) {
+			containerRef.style.removeProperty('height');
+			// width は width プロップで制御されるため、ここでは削除しない
+		}
+		if (displayTextRef) {
+			displayTextRef.style.removeProperty('height');
+			displayTextRef.style.removeProperty('width');
+		}
+		if (linkTextRef) {
+			linkTextRef.style.removeProperty('height');
+			linkTextRef.style.removeProperty('width');
+		}
+	};
+
 	// =========================================================================
 	// $derived
 	// =========================================================================
-	const minHeightStyle = $derived(getStyleFromNumber(minHeight));
-	const maxHeightStyle = $derived(getStyleFromNumber(maxHeight));
-	const widthStyle = $derived(getStyleFromNumber(width));
-
+	// --------------------------------
+	// display & link value
+	// --------------------------------
 	// HTML表示用の値（autoResize時の高さ調整用）
-	const htmlValue = $derived.by(() => {
+	const displayValue = $derived.by(() => {
 		const normalizedValue = value ?? '';
 		if (normalizedValue !== '') {
 			const converted = convertToHtml(normalizedValue);
@@ -364,9 +478,9 @@
 			}
 			return html;
 		} else {
-			// inline かつ value が空のとき、placeholder がなければ
+			// inline かつ value が空のとき
 			// 1行分の高さを確保するためにダミーの   を入れる
-			if (inline && !placeholder) {
+			if (inline) {
 				return ' ';
 			}
 			return '';
@@ -382,9 +496,17 @@
 		const result = convertToHtmlWithLink(normalizedValue);
 		return String(result ?? '');
 	});
+
+	// --------------------------------
+	// style from number
+	// --------------------------------
+	const minHeightStyle = $derived(getStyleFromNumber(minHeight));
+	const maxHeightStyle = $derived(getStyleFromNumber(maxHeight));
+	const widthStyle = $derived(getStyleFromNumber(width));
 </script>
 
 <div
+	bind:this={containerRef}
 	class="textarea
 	textarea--focus-{focusStyle}"
 	class:textarea--inline={inline}
@@ -398,23 +520,21 @@
 	class:textarea--readonly={readonly}
 	class:textarea--focused={isFocused}
 	data-testid="textarea"
-	style={!inline ? `max-height: ${maxHeightStyle};` : ''}
+	style="width: {widthStyle}; {!inline ? `max-height: ${maxHeightStyle};` : ''}"
 >
-	<!-- autoResize時の表示用要素（HTMLレンダリングで高さ調整） -->
 	<div
 		bind:this={displayTextRef}
 		class="textarea__display-text"
-		data-placeholder={placeholder}
 		style="min-height: {minHeightStyle}; max-height: {maxHeightStyle}; {customStyle}"
 	>
-		{@html htmlValue}
+		{@html displayValue}
 	</div>
 	<div class="textarea__wrapper">
 		<textarea
 			{id}
 			{name}
 			bind:value
-			bind:this={ref}
+			bind:this={textareaRef}
 			{rows}
 			{placeholder}
 			{disabled}
@@ -427,7 +547,7 @@
 			{spellcheck}
 			{autocapitalize}
 			class:resizable
-			style="min-height: {minHeightStyle}; width: {widthStyle}; {customStyle}"
+			style="min-height: {minHeightStyle}; {customStyle}"
 			onchange={handleChange}
 			oninput={handleInput}
 			onfocus={handleFocus}
@@ -472,13 +592,13 @@
 		<div class="textarea__clear-button">
 			<IconButton
 				ariaLabel={clearButtonAriaLabel}
-				color="var(--svelte-ui-text-color)"
+				color="var(--svelte-ui-textarea-icon-color)"
 				onclick={(event) => {
 					event.stopPropagation();
 					clear();
 				}}
 				tabindex={-1}
-				iconFilled={true}
+				{iconFilled}
 				{iconVariant}
 				fontSize={18}>cancel</IconButton
 			>
@@ -519,10 +639,35 @@
 	/* =============================================
 	 * 基本コンポーネント
 	 * ============================================= */
+	textarea {
+		width: 100%;
+		height: auto;
+		min-height: var(--svelte-ui-textarea-min-height);
+		padding: var(--svelte-ui-textarea-padding);
+		background-color: var(--svelte-ui-textarea-bg);
+		box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-textarea-border-color);
+		border: none;
+		border-radius: var(--svelte-ui-textarea-border-radius);
+		font-size: inherit;
+		font-weight: inherit;
+		color: inherit;
+		line-height: inherit;
+		text-align: inherit;
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+
+		&:not(.resizable) {
+			resize: none;
+		}
+	}
+
 	.textarea__display-text,
 	.textarea__link-text {
 		display: block;
 		width: 100%;
+		min-height: var(--svelte-ui-textarea-min-height);
+		padding: var(--svelte-ui-textarea-padding);
 		background: inherit;
 		border: inherit;
 		font-size: inherit;
@@ -559,40 +704,10 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
-		padding: inherit;
 		pointer-events: none;
 		z-index: 1;
 	}
 
-	.textarea__link-text :global(a) {
-		pointer-events: auto;
-		text-decoration: underline;
-	}
-
-	textarea {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		padding: inherit;
-		background: transparent;
-		border: none;
-		font-size: inherit;
-		font-weight: inherit;
-		color: inherit;
-		line-height: inherit;
-		text-align: inherit;
-		opacity: 0;
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		appearance: none;
-
-		&:not(.resizable) {
-			resize: none;
-		}
-	}
-
 	.textarea--clearable .textarea__clear-button {
 		position: absolute;
 		top: var(--svelte-ui-textarea-icon-top);
@@ -610,44 +725,11 @@
 
 	.textarea--auto-resize {
 		textarea {
+			height: 100%;
 			overflow-y: auto;
 		}
 	}
 
-	.textarea:not(.textarea--auto-resize) {
-		.textarea__display-text {
-			display: none;
-		}
-
-		textarea {
-			position: static;
-			height: auto;
-		}
-	}
-
-	/* =============================================
- * 機能バリエーション
- * ============================================= */
-	.textarea--clearable {
-		textarea,
-		.textarea__display-text,
-		.textarea__link-text {
-			padding-right: var(--svelte-ui-textarea-icon-space);
-		}
-	}
-
-	@media (hover: hover) {
-		.textarea--clearable:hover .textarea__clear-button {
-			opacity: 1;
-		}
-	}
-
-	@media (hover: none) {
-		.textarea--clearable .textarea__clear-button {
-			opacity: 1;
-		}
-	}
-
 	/* =============================================
  * プレースホルダー・テキスト表示
  * ============================================= */
@@ -699,112 +781,103 @@
 	}
 
 	/* =============================================
-	 * 表示切り替え（フォーカス時・非inline）
+	 * 表示切り替え
 	 * ============================================= */
-	.textarea--focused,
-	.textarea:not(.textarea--inline) {
+	.textarea:not(.textarea--focused) textarea {
+		color: transparent;
+		caret-color: transparent;
+		text-shadow: none;
+	}
+
+	.textarea--focused {
 		.textarea__display-text {
 			opacity: 0;
 		}
-
-		textarea {
-			opacity: 1;
-		}
 	}
 
-	/* linkify=true かつ非 inline のときは、display-text は常に非表示（レイアウトだけ保持） */
-	.textarea--linkify:not(.textarea--inline) .textarea__display-text {
-		opacity: 0;
+	/* =============================================
+	 * 機能バリエーション
+	 * ============================================= */
+	/* clearable */
+	.textarea--clearable {
+		textarea,
+		.textarea__display-text,
+		.textarea__link-text {
+			padding-right: var(--svelte-ui-textarea-icon-space);
+		}
 	}
 
-	/* フォーカス時はリンク用オーバーレイも非表示（opacity: 0）にして、リンクが反応しないようにする */
-	.textarea--focused .textarea__link-text {
-		opacity: 0;
+	@media (hover: hover) {
+		.textarea--clearable:hover .textarea__clear-button {
+			opacity: 1;
+		}
 	}
 
-	.textarea--focused .textarea__link-text :global(a) {
-		pointer-events: none;
+	@media (hover: none) {
+		.textarea--clearable .textarea__clear-button {
+			opacity: 1;
+		}
 	}
 
-	/* =============================================
- * デザインバリアント：default
- * ============================================= */
-	.textarea:not(.textarea--inline) {
-		.textarea__display-text,
-		.textarea__link-text,
-		textarea {
-			min-height: var(--svelte-ui-textarea-min-height);
-			padding: var(--svelte-ui-textarea-padding);
+	/* linkify */
+	.textarea--linkify {
+		.textarea__display-text {
+			opacity: 0;
 		}
 
-		textarea {
-			position: static;
-			background-color: var(--svelte-ui-textarea-bg);
-			box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-textarea-border-color);
-			border: none;
-			border-radius: var(--svelte-ui-textarea-border-radius);
+		.textarea__link-text :global(a) {
+			pointer-events: auto;
 		}
 
-		&.textarea--clearable {
-			textarea,
-			.textarea__display-text,
+		&.textarea--focused {
 			.textarea__link-text {
-				padding-right: var(--svelte-ui-textarea-icon-space);
+				opacity: 0;
 			}
-		}
-	}
 
-	/* linkify=true かつフォーカスがないときは、textarea のテキストカラーだけ透明にして二重描画を防ぐ
-	 * placeholder の色は textarea::placeholder 側で指定しているため、この指定の影響を受けない
-	 */
-	.textarea--linkify:not(.textarea--focused) textarea {
-		color: transparent;
-		caret-color: transparent;
-		text-shadow: none;
+			:global(a) {
+				pointer-events: none;
+			}
+		}
 	}
 
 	/* =============================================
- * デザインバリアント：rounded
+ * デザインバリエーション
  * ============================================= */
+	/* rounded */
 	.textarea--rounded:not(.textarea--inline) {
 		textarea {
 			border-radius: var(--svelte-ui-textarea-border-radius-rounded);
 		}
 	}
 
-	/* =============================================
- * デザインバリアント：inline
- * ============================================= */
+	/* inline */
 	.textarea--inline {
-		.textarea__display-text {
-			opacity: 1;
-		}
-
+		.textarea__display-text,
+		.textarea__link-text,
 		textarea {
-			opacity: 0;
+			min-height: auto;
+			padding-top: inherit;
+			padding-bottom: inherit;
+			padding-left: inherit;
 		}
 
-		&.textarea--focused {
-			.textarea__display-text {
-				opacity: 0;
-			}
-
-			textarea {
-				opacity: 1;
-			}
+		textarea {
+			padding: inherit;
+			background: transparent;
+			box-shadow: none;
+			border-radius: 0;
+			font-size: inherit;
+			font-weight: inherit;
+			color: inherit;
+			line-height: inherit;
+			text-align: inherit;
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			appearance: none;
 		}
 
 		&.textarea--clearable .textarea__clear-button {
 			top: var(--svelte-ui-textarea-icon-top-inline);
 		}
 	}
-
-	/* inline + linkify のときは、display-text を常に隠し、textarea を常に表示 */
-	.textarea--inline.textarea--linkify .textarea__display-text {
-		opacity: 0;
-	}
-
-	.textarea--inline.textarea--linkify textarea {
-		opacity: 1;
-	}
 </style>

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

@@ -1,5 +1,5 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
-import type { IconVariant } from '../types/icon';
+import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 import type { FocusStyle } from '../types/propOptions';
 export type TextareaProps = {
@@ -24,14 +24,18 @@ export type TextareaProps = {
     width?: string | number | null;
     rounded?: boolean;
     customStyle?: string;
+    clearButtonAriaLabel?: string;
+    iconFilled?: boolean;
+    iconWeight?: IconWeight;
+    iconGrade?: IconGrade;
+    iconOpticalSize?: IconOpticalSize;
+    iconVariant?: IconVariant;
     disabled?: boolean;
     autoResize?: boolean;
     resizable?: boolean;
     clearable?: boolean;
-    clearButtonAriaLabel?: string;
     readonly?: boolean;
     required?: boolean;
-    iconVariant?: IconVariant;
     linkify?: boolean;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;