@14ch/svelte-ui 0.0.13 → 0.0.15

package/dist/components/Input.svelte

@@ -15,7 +15,8 @@
 		TouchHandler,
 		PointerHandler,
 		BivariantValueHandler
-	} from '../types/eventHandlers';
+	} from '../types/callbackHandlers';
+	import type { FocusStyle } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -23,7 +24,7 @@
 	export type InputProps = {
 		// 基本プロパティ
 		name?: string;
-		value: string | number;
+		value: string | number | null | undefined;
 
 		// HTML属性系
 		id?: string | null;
@@ -41,7 +42,7 @@
 
 		// スタイル/レイアウト
 		inline?: boolean;
-		focusStyle?: 'background' | 'outline' | 'none';
+		focusStyle?: FocusStyle;
 		placeholder?: string;
 		fullWidth?: boolean;
 		width?: string | number | null;
@@ -49,6 +50,7 @@
 		maxWidth?: string | number | null;
 		rounded?: boolean;
 		customStyle?: string;
+		unit?: string;
 
 		// アイコン関連
 		rightIcon?: string;
@@ -136,12 +138,13 @@
 		// スタイル/レイアウト
 		inline = false,
 		focusStyle = 'outline',
-		customStyle = '',
 		fullWidth = false,
 		width = null,
 		minWidth = inline ? null : 120,
 		maxWidth = null,
 		rounded = false,
+		customStyle = '',
+		unit = '',
 
 		// アイコン関連
 		rightIcon = undefined,
@@ -380,16 +383,24 @@
 	// =========================================================================
 	// $derived
 	// =========================================================================
-	const getDisplayValue = (): string => {
+	const displayValue = $derived.by(() => {
+		if (!value) {
+			if (inline && !placeholder) {
+				return ' ';
+			}
+			return '';
+		}
 		if (type === 'number' && typeof value === 'number') {
 			return value.toLocaleString();
 		}
-		return String(value);
-	};
+		return convertToHtmlWithLink(value);
+	});
+
+	const isLinkifyActive = $derived(linkify && (type === 'text' || type === 'url'));
 
 	const linkHtmlValue = $derived.by(() => {
-		if (!linkify) return '';
-		const result = convertToHtmlWithLink(getDisplayValue());
+		if (!isLinkifyActive) return '';
+		const result = convertToHtmlWithLink(value);
 		return typeof result === 'string' ? result : String(result ?? '');
 	});
 
@@ -403,7 +414,7 @@
 	input--focus-{focusStyle}
 	input--type-{type}"
 	class:input--inline={inline}
-	class:input--linkify={linkify}
+	class:input--linkify={isLinkifyActive}
 	class:input--auto-resize={inline}
 	class:input--full-width={fullWidth}
 	class:input--clearable={clearable}
@@ -417,12 +428,17 @@
 	data-testid="input"
 	style="width: {widthStyle}; max-width: {maxWidthStyle}; min-width: {minWidthStyle}"
 >
-	<!-- inline時の表示用要素（text-overflow: ellipsisが効く） -->
-	{#if inline}
-		<div class="input__display-text" data-placeholder={placeholder} style={customStyle}>
-			{getDisplayValue()}
+	<!-- 表示用テキスト -->
+	<div class="input__display-text" data-placeholder={placeholder} style={customStyle}>
+		<div class="input__display-text-content">
+			{@html displayValue}
+			{#if type === 'number' && unit !== ''}
+				<span class="input__unit-text">
+					{unit}
+				</span>
+			{/if}
 		</div>
-	{/if}
+	</div>
 	<!-- 入力用要素 -->
 	<div class="input__wrapper">
 		<input
@@ -476,9 +492,11 @@
 			{...restProps}
 		/>
 	</div>
-	{#if linkify}
+	{#if isLinkifyActive}
 		<div class="input__link-text" style={customStyle}>
-			{@html linkHtmlValue}
+			<div class="input__link-text-content">
+				{@html linkHtmlValue}
+			</div>
 		</div>
 	{/if}
 	<!-- クリアボタン -->
@@ -486,7 +504,7 @@
 		<div class="input__clear-button">
 			<IconButton
 				ariaLabel={t('input.clear')}
-				color="var(--svelte-ui-input-text-color)"
+				color="var(--svelte-ui-text-color)"
 				onclick={(event) => {
 					event.stopPropagation();
 					clear();
@@ -566,12 +584,19 @@
 	.input {
 		display: inline-block;
 		position: relative;
+		vertical-align: top;
 		width: auto;
+		height: var(--svelte-ui-input-height);
 		max-width: 100%;
 		height: inherit;
 	}
 
 	.input__wrapper {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
 		padding: inherit;
 		border: none;
 		font-size: inherit;
@@ -579,7 +604,7 @@
 		color: inherit;
 		line-height: inherit;
 		text-align: inherit;
-		opacity: 0;
+		opacity: 1;
 	}
 
 	/* =============================================
@@ -608,63 +633,40 @@
 		}
 	}
 
-	.input__display-text {
-		display: inline-block;
-		vertical-align: top;
+	.input__display-text,
+	.input__link-text {
+		display: flex;
+		align-items: center;
 		width: 100%;
 		min-width: 1em;
 		padding: inherit;
-		background: inherit;
-		border: inherit;
 		font-size: inherit;
 		font-weight: inherit;
 		color: inherit;
 		line-height: inherit;
 		text-align: inherit;
 		white-space: nowrap;
-		vertical-align: top;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		opacity: 1;
 		transition: none;
-		cursor: text !important;
-
-		&::before {
-			content: '';
-		}
-
-		&:empty::before {
-			content: attr(data-placeholder);
-		}
 	}
 
-	/* リンク表示用オーバーレイ */
 	.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__unit-text {
+		font-size: var(--svelte-ui-input-unit-font-size);
 	}
 
 	.input__clear-button {
@@ -739,26 +741,45 @@
 	}
 
 	/* =============================================
- * デザインバリアント：default
+ * タイプ別スタイル
  * ============================================= */
-	.input:not(.input--inline) {
-		.input__wrapper {
-			position: static;
-			opacity: 1;
+	/* type-number */
+	.input--type-number {
+		.input__display-text,
+		.input__link-text {
+			justify-content: flex-end;
 		}
+	}
+
+	/* type-password */
+	.input--type-password {
+		&:not(.input--linkify) input {
+			color: inherit;
+			caret-color: inherit;
+			text-shadow: inherit;
+		}
+
+		.input__display-text {
+			opacity: 0;
+		}
+	}
 
+	/* =============================================
+ * デザインバリアント：default
+ * ============================================= */
+	.input:not(.input--inline) {
 		input {
 			min-height: var(--svelte-ui-input-height);
 			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;
 			border-radius: var(--svelte-ui-input-border-radius);
-			color: var(--svelte-ui-input-text-color);
 		}
 
 		input,
 		.input__display-text,
 		.input__link-text {
+			height: var(--svelte-ui-input-height);
 			padding: var(--svelte-ui-input-padding);
 		}
 
@@ -804,34 +825,10 @@
 		}
 	}
 
-	/* 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
  * ============================================= */
 	.input--inline {
-		&.input--type-number .input__display-text {
-			text-align: right;
-		}
-
-		.input__wrapper {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-		}
-
 		&.input--has-left-icon {
 			input,
 			.input__display-text,
@@ -863,25 +860,6 @@
 				padding-right: var(--svelte-ui-input-icon-space-double-inline);
 			}
 		}
-
-		&.input--focused {
-			.input__display-text {
-				opacity: 0;
-			}
-
-			.input__wrapper {
-				opacity: 1;
-			}
-		}
-	}
-
-	/* inline + linkify のときは、display-text を常に隠し、wrapper を常に表示 */
-	.input--inline.input--linkify .input__display-text {
-		opacity: 0;
-	}
-
-	.input--inline.input--linkify .input__wrapper {
-		opacity: 1;
 	}
 
 	/* =============================================
@@ -922,6 +900,39 @@
 		}
 	}
 
+	/* not-linkify + not-focused: inputを不可視化、display-textを表示 */
+	/* type=password のときは除外（常に input を表示） */
+	.input:not(.input--linkify):not(.input--focused):not(.input--type-password) input {
+		color: transparent;
+		caret-color: transparent;
+		text-shadow: none;
+	}
+
+	/* not-linkify + focused: display-textをopacity: 0 */
+	.input:not(.input--linkify).input--focused .input__display-text {
+		opacity: 0;
+	}
+
+	/* linkify + not-focused: inputを不可視化、display-textをopacity: 0、link-textを表示 */
+	.input--linkify:not(.input--focused) input {
+		color: transparent;
+		caret-color: transparent;
+		text-shadow: none;
+	}
+
+	.input--linkify:not(.input--focused) .input__display-text {
+		opacity: 0;
+	}
+
+	/* linkify + focused: display-textをopacity: 0、link-textをdisplay: none */
+	.input--linkify.input--focused .input__display-text {
+		opacity: 0;
+	}
+
+	.input--focused .input__link-text {
+		display: none;
+	}
+
 	/* =============================================
  * プレースホルダー・テキスト表示
  * ============================================= */

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

@@ -1,9 +1,10 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/eventHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
+import type { FocusStyle } from '../types/propOptions';
 export type InputProps = {
     name?: string;
-    value: string | number;
+    value: string | number | null | undefined;
     id?: string | null;
     type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'number';
     tabindex?: number | null;
@@ -17,7 +18,7 @@ export type InputProps = {
     spellcheck?: boolean | null;
     inputAttributes?: HTMLInputAttributes | undefined;
     inline?: boolean;
-    focusStyle?: 'background' | 'outline' | 'none';
+    focusStyle?: FocusStyle;
     placeholder?: string;
     fullWidth?: boolean;
     width?: string | number | null;
@@ -25,6 +26,7 @@ export type InputProps = {
     maxWidth?: string | number | null;
     rounded?: boolean;
     customStyle?: string;
+    unit?: string;
     rightIcon?: string;
     leftIcon?: string;
     leftIconAriaLabel?: string;

package/dist/components/Popup.svelte

@@ -18,6 +18,8 @@
 	import { onDestroy, tick, onMount } from 'svelte';
 	import { isMobileDevice, disableBodyScroll, getViewportSize } from '../utils/mobile';
 	import { announceOpenClose } from '../utils/accessibility';
+	import { popupManager } from '../utils/popupManager';
+	import type { PopupPosition } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -27,7 +29,7 @@
 		children: Snippet;
 
 		// DOM参照
-		anchorElement: HTMLElement;
+		anchorElement: HTMLElement | null | undefined;
 
 		// 基本プロパティ
 		role?: string;
@@ -36,24 +38,7 @@
 		id?: string;
 
 		// スタイル/レイアウト
-		position?:
-			| 'top'
-			| 'bottom'
-			| 'left'
-			| 'right'
-			| 'top-left'
-			| 'top-center'
-			| 'top-right'
-			| 'bottom-left'
-			| 'bottom-center'
-			| 'bottom-right'
-			| 'left-top'
-			| 'left-center'
-			| 'left-bottom'
-			| 'right-top'
-			| 'right-center'
-			| 'right-bottom'
-			| 'auto';
+		position?: PopupPosition;
 		margin?: number;
 
 		// 状態/動作
@@ -61,7 +46,6 @@
 		focusTrap?: boolean;
 		restoreFocus?: boolean;
 		mobileFullscreen?: boolean;
-		mobileBehavior?: 'auto' | 'fullscreen' | 'popup';
 		enableAutoReposition?: boolean;
 
 		// ARIA/アクセシビリティ
@@ -95,8 +79,7 @@
 		isOpen = $bindable(false),
 		focusTrap = false,
 		restoreFocus = false,
-		mobileFullscreen = false,
-		mobileBehavior = 'auto',
+		mobileFullscreen = true,
 		enableAutoReposition = true,
 
 		// ARIA/アクセシビリティ
@@ -110,7 +93,6 @@
 	}: PopupProps = $props();
 
 	let popupRef: HTMLDivElement | undefined = $state();
-	let popupId: string = $state(id || `popup-${Math.random().toString(36).substring(2, 15)}`);
 	let previousActiveElement: HTMLElement | null = null;
 	let isMobile: boolean = $state(false);
 	let shouldUseFullscreen: boolean = $state(false);
@@ -121,20 +103,15 @@
 	// =========================================================================
 	onMount(() => {
 		isMobile = isMobileDevice();
-
-		if (mobileBehavior === 'auto') {
-			shouldUseFullscreen = isMobile;
-		} else if (mobileBehavior === 'fullscreen') {
-			shouldUseFullscreen = true;
-		} else {
-			shouldUseFullscreen = mobileFullscreen;
-		}
+		// モバイルの場合のみ fullscreen にするかどうか
+		shouldUseFullscreen = isMobile && mobileFullscreen;
 	});
 
 	onDestroy(() => {
 		removeEventListenersToClose();
 		removeKeyboardListener();
 		cleanupMobileFeatures();
+		popupManager.unregister(close);
 	});
 
 	// =========================================================================
@@ -458,18 +435,44 @@
 	};
 
 	export const open = async () => {
+		// 他の開いているPopupをすべて閉じる
+		popupManager.closeOthers(close);
+
 		previousActiveElement = document.activeElement as HTMLElement;
 
 		setTimeout(async () => {
 			popupRef?.removeEventListener('animationend', closeEnd);
+
+			if (shouldUseFullscreen && popupRef) {
+				// ボトムシート: showPopover()の前に位置を画面下部に設定
+				popupRef.style.position = 'fixed';
+				popupRef.style.top = 'auto';
+				popupRef.style.bottom = '0';
+				popupRef.style.left = '0';
+				popupRef.style.right = '0';
+				popupRef.style.width = '100%';
+				popupRef.style.margin = '0';
+			}
+
 			popupRef?.showPopover();
 			isOpen = true;
 			addEventListenersToClose();
 			addKeyboardListener();
 
+			popupManager.register(close);
+
 			await tick();
 
-			if (!shouldUseFullscreen) {
+			if (shouldUseFullscreen && popupRef) {
+				// ボトムシート: 位置を再確認・再設定（ブラウザが上書きする可能性があるため）
+				popupRef.style.position = 'fixed';
+				popupRef.style.top = 'auto';
+				popupRef.style.bottom = '0';
+				popupRef.style.left = '0';
+				popupRef.style.right = '0';
+				popupRef.style.width = '100%';
+				popupRef.style.margin = '0';
+			} else {
 				setPosition();
 				await new Promise((resolve) => requestAnimationFrame(resolve));
 				setPosition();
@@ -491,6 +494,8 @@
 		removeEventListenersToClose();
 		removeKeyboardListener();
 		cleanupMobileFeatures();
+		popupManager.unregister(close);
+		// アニメーション完了後に閉じる（fullscreen/通常共通）
 		popupRef?.addEventListener('animationend', closeEnd, { once: true });
 		// onCloseはアニメーション完了後に呼ぶ（closeEndで実行）
 	};
@@ -506,6 +511,12 @@
 	export const getIsOpen = () => {
 		return isOpen;
 	};
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const generatedPopupId = $state(`popup-${Math.random().toString(36).substring(2, 15)}`);
+	const popupId = $derived(id || generatedPopupId);
 </script>
 
 <div
@@ -513,7 +524,6 @@
 	bind:this={popupRef}
 	class="popup"
 	class:popup--fade-out={!isOpen}
-	class:popup--mobile={isMobile}
 	class:popup--fullscreen={shouldUseFullscreen}
 	{role}
 	aria-label={ariaLabel}
@@ -525,15 +535,7 @@
 		close();
 	}}
 >
-	{#if shouldUseFullscreen}
-		<div class="popup__mobile">
-			<div class="popup__mobile-content">
-				{@render children()}
-			</div>
-		</div>
-	{:else}
-		{@render children()}
-	{/if}
+	{@render children()}
 </div>
 
 <style>@charset "UTF-8";
@@ -581,46 +583,39 @@
 }
 
 /* =============================================
- * Mobile-specific styles
+ * Fullscreen variant (Bottom Sheet)
  * ============================================= */
-:popover-open.popup--mobile {
-  position: fixed;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
+.popup--fullscreen {
+  position: fixed !important;
+  top: auto !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  width: 100% !important;
+  max-height: 90vh;
+  margin: 0 !important;
   border: none;
-  border-radius: 0;
-  box-shadow: none;
-  background: transparent;
+  border-top-left-radius: var(--svelte-ui-popup-mobile-border-radius);
+  border-top-right-radius: var(--svelte-ui-popup-mobile-border-radius);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
+  background: var(--svelte-ui-surface-color);
   z-index: var(--svelte-ui-z-modal);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 
-:popover-open.popup--mobile.popup--fullscreen {
-  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
-}
-
-.popup__mobile {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: var(--svelte-ui-surface-color);
-  border-top-left-radius: var(--svelte-ui-popup-mobile-border-radius);
-  border-top-right-radius: var(--svelte-ui-popup-mobile-border-radius);
-  max-height: 90vh;
-  overflow: hidden;
+:popover-open.popup--fullscreen {
+  transform: translateY(0);
   animation: slideUpMobile 300ms ease-out;
-  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
-.popup__mobile-content {
-  padding: var(--svelte-ui-popup-mobile-margin);
-  max-height: calc(90vh - 60px);
-  overflow-y: auto;
+:popover-open.popup--fullscreen.popup--fade-out {
+  animation: slideDownMobile 300ms ease-in;
 }
 
-/* Mobile animations */
 @keyframes slideUpMobile {
   from {
     transform: translateY(100%);
@@ -629,10 +624,6 @@
     transform: translateY(0);
   }
 }
-:popover-open.popup--mobile.popup--fullscreen.popup--fade-out .popup__mobile {
-  animation: slideDownMobile 300ms ease-in;
-}
-
 @keyframes slideDownMobile {
   from {
     transform: translateY(0);
@@ -641,14 +632,10 @@
     transform: translateY(100%);
   }
 }
-/* Responsive design adjustments */
 @media (max-width: 480px) {
-  .popup__mobile {
-    border-radius: 0;
+  :popover-open.popup--fullscreen {
     max-height: 100vh;
-  }
-  .popup__mobile-content {
-    max-height: calc(100vh - 60px);
+    border-radius: 0;
   }
 }
 /* Reduced motion support */