@14ch/svelte-ui 0.0.14 → 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;
@@ -26,6 +28,7 @@ export type InputProps = {
     maxWidth?: string | number | null;
     rounded?: boolean;
     customStyle?: string;
+    unit?: string;
     rightIcon?: string;
     leftIcon?: string;
     leftIconAriaLabel?: string;
@@ -40,6 +43,8 @@ export type InputProps = {
     required?: boolean;
     clearable?: boolean;
     linkify?: boolean;
+    enablePasswordVisibilityToggle?: boolean;
+    enableNumberStepper?: boolean;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;
@@ -67,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/Radio.svelte

@@ -365,10 +365,11 @@
    * ============================================= */
 
 	.radio {
-		display: flex;
+		display: inline-flex;
 		align-items: center;
 		width: fit-content;
 		min-height: var(--svelte-ui-radio-min-height);
+		vertical-align: top;
 		contain: layout;
 	}
 

package/dist/components/SegmentedControl.svelte

@@ -376,7 +376,7 @@
 	// =========================================================================
 	// $derived
 	// =========================================================================
-	const effectiveIconSize = $derived(
+	const resolvedIconSize = $derived(
 		iconOpticalSize || (size === 'small' ? 16 : size === 'large' ? 24 : 20)
 	);
 
@@ -458,7 +458,7 @@
 							filled={iconFilled || isSelected}
 							weight={iconWeight}
 							grade={iconGrade}
-							opticalSize={effectiveIconSize}
+							opticalSize={resolvedIconSize}
 							variant={iconVariant}
 						>
 							{item.icon}
@@ -474,7 +474,7 @@
 </div>
 
 <style>.segmented-control {
-  display: inline-flex;
+  display: flex;
   position: relative;
   padding: var(--svelte-ui-segmented-control-base-padding);
   background-color: var(--svelte-ui-segmented-control-base-bg);

package/dist/components/Select.svelte

@@ -355,6 +355,7 @@ select--focus-{focusStyle}"
 		position: relative;
 		width: auto;
 		max-width: 100%;
+		vertical-align: top;
 	}
 
 	/* =============================================
@@ -453,7 +454,6 @@ select--focus-{focusStyle}"
 			border: none;
 			border-radius: var(--svelte-ui-select-border-radius);
 			font-size: 1rem;
-			color: var(--svelte-ui-select-text-color);
 			line-height: var(--svelte-ui-select-height);
 		}
 	}

package/dist/components/Tab.svelte

@@ -171,6 +171,7 @@
 	{#each tabItems as tabItem, index}
 		<TabItem
 			{tabItem}
+			{pathPrefix}
 			isSelected={index === selectedTabIndex}
 			{textColor}
 			{selectedTextColor}

package/dist/components/TabItem.svelte

@@ -11,6 +11,7 @@
 	export type TabItemProps = {
 		// 基本プロパティ
 		tabItem: MenuItem;
+		pathPrefix?: string;
 
 		// スタイル/レイアウト
 		textColor: string;
@@ -31,6 +32,7 @@
 	let {
 		// 基本プロパティ
 		tabItem,
+		pathPrefix = '',
 
 		// スタイル/レイアウト
 		textColor,
@@ -47,10 +49,29 @@
 		// 状態/動作
 		isSelected = false
 	}: TabItemProps = $props();
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+
+	// pathPrefixを付与したhrefを計算
+	const hrefWithPrefix = $derived.by(() => {
+		if (!tabItem.href) return undefined;
+		if (!pathPrefix) return tabItem.href;
+
+		// 既にpathPrefixが含まれている場合はそのまま
+		// pathPrefixが完全一致、またはpathPrefix + '/'で始まる場合
+		if (tabItem.href === pathPrefix || tabItem.href.startsWith(`${pathPrefix}/`)) {
+			return tabItem.href;
+		}
+
+		// pathPrefixを付与
+		return `${pathPrefix}${tabItem.href.startsWith('/') ? '' : '/'}${tabItem.href}`;
+	});
 </script>
 
 <a
-	href={tabItem.href}
+	href={hrefWithPrefix}
 	class="tab-item"
 	class:tab-item--selected={isSelected}
 	style="--svelte-ui-tab-item-text-color: {textColor}; --svelte-ui-tab-item-selected-text-color: {selectedTextColor}; --svelte-ui-tab-item-selected-bar-color: {selectedBarColor}"

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

@@ -2,6 +2,7 @@ import type { MenuItem } from '../types/menuItem';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 export type TabItemProps = {
     tabItem: MenuItem;
+    pathPrefix?: string;
     textColor: string;
     selectedTextColor: string;
     selectedBarColor: string;