@14ch/svelte-ui 0.0.8 → 0.0.9

package/dist/components/DatepickerCalendar.svelte

@@ -366,12 +366,23 @@
 		}
 	};
 
+	const getNormalizedRange = () => {
+		if (mode !== 'range' || !value || !('start' in value && 'end' in value)) return null;
+
+		const startDate = dayjs(value.start).startOf('day');
+		const endDate = dayjs(value.end).startOf('day');
+
+		if (startDate.isSameOrBefore(endDate)) {
+			return { start: startDate, end: endDate };
+		}
+
+		return { start: endDate, end: startDate };
+	};
+
 	const isSelected = (date: dayjs.Dayjs) => {
-		if (mode === 'range' && value && 'start' in value && 'end' in value) {
-			return (
-				dayjs(date).isSameOrAfter(dayjs(value.start).startOf('day')) &&
-				dayjs(date).isSameOrBefore(dayjs(value.end).startOf('day'))
-			);
+		const range = getNormalizedRange();
+		if (range) {
+			return dayjs(date).isSameOrAfter(range.start) && dayjs(date).isSameOrBefore(range.end);
 		} else if (mode === 'single' && value && value instanceof Date) {
 			return dayjs(date).isSame(dayjs(value).startOf('day'));
 		}
@@ -379,25 +390,29 @@
 	};
 
 	const isRangeStart = (date: dayjs.Dayjs) => {
-		if (mode !== 'range' || !value || !('start' in value && 'end' in value)) return false;
+		const range = getNormalizedRange();
+		if (!range) return false;
 		if (isRangePreviewActive) return false;
-		return dayjs(date).isSame(dayjs(value.start).startOf('day'));
+		return dayjs(date).isSame(range.start);
 	};
 
 	const isRangeEnd = (date: dayjs.Dayjs) => {
-		if (mode !== 'range' || !value || !('start' in value && 'end' in value)) return false;
+		const range = getNormalizedRange();
+		if (!range) return false;
 		if (isRangePreviewActive) return false;
-		return dayjs(date).isSame(dayjs(value.end).startOf('day'));
+		return dayjs(date).isSame(range.end);
 	};
 
 	const isRangeMiddle = (date: dayjs.Dayjs) => {
-		if (mode !== 'range' || !value || !('start' in value && 'end' in value)) return false;
+		const range = getNormalizedRange();
+		if (!range) return false;
 		if (isRangePreviewActive) return false;
 		return isSelected(date) && !isRangeStart(date) && !isRangeEnd(date);
 	};
 
 	const isRangeSingle = (date: dayjs.Dayjs) => {
-		if (mode !== 'range' || !value || !('start' in value && 'end' in value)) return false;
+		const range = getNormalizedRange();
+		if (!range) return false;
 		if (isRangePreviewActive) return false;
 		return isRangeStart(date) && isRangeEnd(date);
 	};

package/dist/components/Input.svelte

@@ -7,6 +7,7 @@
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 	import { t } from '../i18n';
+	import { convertToHtmlWithLink } from '../utils/formatText';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -58,6 +59,7 @@
 		required = false,
 		clearable = false,
 		clearButtonAriaLabel = t('input.clear'),
+		linkify = false,
 
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
@@ -148,6 +150,7 @@
 		readonly?: boolean;
 		required?: boolean;
 		clearable?: boolean;
+		linkify?: boolean;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference
@@ -374,6 +377,12 @@
 		return String(value);
 	};
 
+	const linkHtmlValue = $derived.by(() => {
+		if (!linkify) return '';
+		const result = convertToHtmlWithLink(getDisplayValue());
+		return typeof result === 'string' ? result : String(result ?? '');
+	});
+
 	const widthStyle = $derived(getStyleFromNumber(width));
 	const maxWidthStyle = $derived(getStyleFromNumber(maxWidth));
 	const minWidthStyle = $derived(getStyleFromNumber(minWidth));
@@ -384,6 +393,7 @@
 	input--focus-{focusStyle}
 	input--type-{type}"
 	class:input--inline={inline}
+	class:input--linkify={linkify}
 	class:input--auto-resize={inline}
 	class:input--full-width={fullWidth}
 	class:input--clearable={clearable}
@@ -456,6 +466,11 @@
 			{...restProps}
 		/>
 	</div>
+	{#if linkify}
+		<div class="input__link-text" style={customStyle}>
+			{@html linkHtmlValue}
+		</div>
+	{/if}
 	<!-- クリアボタン -->
 	{#if clearable && !disabled && !readonly}
 		<div class="input__clear-button">
@@ -613,6 +628,35 @@
 		}
 	}
 
+	/* リンク表示用オーバーレイ */
+	.input__link-text {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		padding: inherit;
+		background: transparent;
+		border-radius: inherit;
+		font-size: inherit;
+		font-weight: inherit;
+		color: inherit;
+		line-height: inherit;
+		text-align: inherit;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		pointer-events: none;
+		z-index: 1;
+	}
+
+	.input__link-text :global(a) {
+		pointer-events: auto;
+		text-decoration: underline;
+	}
+
 	.input__clear-button {
 		position: absolute;
 		top: 50%;
@@ -695,7 +739,6 @@
 
 		input {
 			min-height: var(--svelte-ui-input-height);
-			padding: var(--svelte-ui-input-padding);
 			background-color: var(--svelte-ui-input-bg);
 			box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-input-border-color);
 			border: none;
@@ -703,30 +746,40 @@
 			color: var(--svelte-ui-input-text-color);
 		}
 
+		input,
+		.input__display-text,
+		.input__link-text {
+			padding: var(--svelte-ui-input-padding);
+		}
+
 		&.input--has-left-icon {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-left: var(--svelte-ui-input-icon-space);
 			}
 		}
 
 		&.input--has-right-icon {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-right: var(--svelte-ui-input-icon-space);
 			}
 		}
 
 		&.input--clearable {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-right: var(--svelte-ui-input-icon-space);
 			}
 		}
 
 		&.input--clearable.input--has-right-icon {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-right: var(--svelte-ui-input-icon-space-double);
 			}
 		}
@@ -741,6 +794,18 @@
 		}
 	}
 
+	/* linkify=true かつフォーカスがないときは、input のテキストカラーだけ透明にして二重描画を防ぐ */
+	.input--linkify:not(.input--focused) input {
+		color: transparent;
+		caret-color: transparent;
+		text-shadow: none;
+	}
+
+	/* フォーカス時はリンク用オーバーレイも非表示にして（display:none）、リンクが反応しないようにする */
+	.input--focused .input__link-text {
+		display: none;
+	}
+
 	/* =============================================
  * デザインバリアント：inline
  * ============================================= */
@@ -759,28 +824,32 @@
 
 		&.input--has-left-icon {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-left: var(--svelte-ui-input-icon-space-inline);
 			}
 		}
 
 		&.input--has-right-icon {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-right: var(--svelte-ui-input-icon-space-inline);
 			}
 		}
 
 		&.input--clearable {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-right: var(--svelte-ui-input-icon-space-inline);
 			}
 		}
 
 		&.input--clearable.input--has-right-icon {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-right: var(--svelte-ui-input-icon-space-double-inline);
 			}
 		}
@@ -796,6 +865,15 @@
 		}
 	}
 
+	/* inline + linkify のときは、display-text を常に隠し、wrapper を常に表示 */
+	.input--inline.input--linkify .input__display-text {
+		opacity: 0;
+	}
+
+	.input--inline.input--linkify .input__wrapper {
+		opacity: 1;
+	}
+
 	/* =============================================
  * レイアウトバリエーション
  * ============================================= */
@@ -812,21 +890,24 @@
  * ============================================= */
 	.input--clearable {
 		input,
-		.input__display-text {
+		.input__display-text,
+		.input__link-text {
 			padding-right: var(--svelte-ui-input-icon-space);
 		}
 	}
 
 	.input.input--has-right-icon {
 		input,
-		.input__display-text {
+		.input__display-text,
+		.input__link-text {
 			padding-right: var(--svelte-ui-input-icon-space);
 		}
 	}
 
 	.input.input--has-left-icon {
 		input,
-		.input__display-text {
+		.input__display-text,
+		.input__link-text {
 			padding-left: var(--svelte-ui-input-icon-space);
 		}
 	}

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

@@ -37,6 +37,7 @@ type $$ComponentProps = {
     readonly?: boolean;
     required?: boolean;
     clearable?: boolean;
+    linkify?: boolean;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;

package/dist/components/Textarea.svelte

@@ -4,6 +4,7 @@
 	import IconButton from './IconButton.svelte';
 	import { getStyleFromNumber } from '../utils/style';
 	import { t } from '../i18n';
+	import { convertToHtml, convertToHtmlWithLink } from '../utils/formatText';
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import type { IconVariant } from '../types/icon';
 
@@ -48,6 +49,7 @@
 		readonly = false,
 		required = false,
 		iconVariant = 'outlined',
+		linkify = false,
 
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
@@ -125,6 +127,7 @@
 		readonly?: boolean;
 		required?: boolean;
 		iconVariant?: IconVariant;
+		linkify?: boolean;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference
@@ -335,9 +338,7 @@
 	// HTML表示用の値（autoResize時の高さ調整用）
 	const htmlValue = $derived.by(() => {
 		if (value !== '') {
-			let html = value
-				.replace(/ +/g, (match) => ' '.repeat(match.length))
-				.replace(/\n/g, '<br />');
+			let html = convertToHtml(value) as string;
 			// 最後の行が空だったら空白を追加（高さ調整のため）
 			const lines = html.split('<br />');
 			if (lines.length > 0 && lines[lines.length - 1] === '') {
@@ -348,12 +349,22 @@
 			return '';
 		}
 	});
+
+	// URLをリンク化した表示用HTML（クリック検出用オーバーレイで使用）
+	const linkHtmlValue = $derived.by(() => {
+		if (!linkify || value === '') {
+			return '';
+		}
+		const result = convertToHtmlWithLink(value);
+		return typeof result === 'string' ? result : String(result ?? '');
+	});
 </script>
 
 <div
 	class="textarea
 	textarea--focus-{focusStyle}"
 	class:textarea--inline={inline}
+	class:textarea--linkify={linkify}
 	class:textarea--full-width={fullWidth}
 	class:textarea--full-height={fullHeight}
 	class:textarea--auto-resize={autoResize}
@@ -438,6 +449,11 @@
 			</div>
 		{/if}
 	</div>
+	{#if linkify}
+		<div class="textarea__link-text" style="{minHeightStyle} {customStyle}">
+			{@html linkHtmlValue}
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -471,11 +487,11 @@
 	}
 
 	/* =============================================
- * 基本コンポーネント
- * ============================================= */
-	.textarea__display-text {
-		display: flex;
-		align-items: start; /* テーブルの他の列に合わせて高さが高くなっているときに、上寄せになるようにするための措置 */
+	 * 基本コンポーネント
+	 * ============================================= */
+	.textarea__display-text,
+	.textarea__link-text {
+		display: block;
 		width: 100%;
 		background: inherit;
 		border: inherit;
@@ -498,6 +514,23 @@
 		}
 	}
 
+	/* クリック可能なリンク用オーバーレイ */
+	.textarea__link-text {
+		position: absolute;
+		top: 0;
+		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;
@@ -626,8 +659,8 @@
 	}
 
 	/* =============================================
- * 表示切り替え（フォーカス時・非autoResize時）
- * ============================================= */
+	 * 表示切り替え（フォーカス時・非inline）
+	 * ============================================= */
 	.textarea--focused,
 	.textarea:not(.textarea--inline) {
 		.textarea__display-text {
@@ -639,11 +672,22 @@
 		}
 	}
 
+	/* linkify=true かつ非 inline のときは、display-text は常に非表示（レイアウトだけ保持） */
+	.textarea--linkify:not(.textarea--inline) .textarea__display-text {
+		opacity: 0;
+	}
+
+	/* フォーカス時はリンク用オーバーレイも非表示にして（display:none）、リンクが反応しないようにする */
+	.textarea--focused .textarea__link-text {
+		display: none;
+	}
+
 	/* =============================================
  * デザインバリアント：default
  * ============================================= */
 	.textarea:not(.textarea--inline) {
-		.textarea__display-text {
+		.textarea__display-text,
+		.textarea__link-text {
 			padding: var(--svelte-ui-textarea-padding);
 		}
 
@@ -664,6 +708,15 @@
 		}
 	}
 
+	/* linkify=true かつフォーカスがないときは、textarea のテキストカラーだけ透明にして二重描画を防ぐ
+	 * placeholder の色は textarea::placeholder 側で指定しているため、この指定の影響を受けない
+	 */
+	.textarea--linkify:not(.textarea--focused) textarea {
+		color: transparent;
+		caret-color: transparent;
+		text-shadow: none;
+	}
+
 	/* =============================================
  * デザインバリアント：rounded
  * ============================================= */
@@ -699,4 +752,13 @@
 			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

@@ -30,6 +30,7 @@ type $$ComponentProps = {
     readonly?: boolean;
     required?: boolean;
     iconVariant?: IconVariant;
+    linkify?: boolean;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;

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.8",
+	"version": "0.0.9",
 	"type": "module",
 	"keywords": [
 		"svelte",