Explorar el Código

[stdf]修复 Input 组件

dufu1991 hace 10 meses
padre
commit
3fd5547163

+ 1 - 0
docs/mds/components/input/version.md

@@ -3,6 +3,7 @@
 - [!tag|A|0|]新增 `readonly` 属性,设置输入框为只读模式。
 - [!tag|A|0|]新增 `select` 属性,开启选择模式,显示下拉箭头。
 - [!tag|A|0|]新增 `required` 属性,标记输入框为必填项。
+- [!tag|B|3|]修复线性风格时的线条对齐问题。
 
 ## 1.0.6
 

+ 1 - 0
docs/mds/components/input/version_en.md

@@ -3,6 +3,7 @@
 - [!tag|A|0|] Added `readonly` property to set the input box to readonly mode.
 - [!tag|A|0|] Added `select` property to enable select mode and show dropdown arrow.
 - [!tag|A|0|] Added `required` property to mark the input box as required.
+- [!tag|B|3|] Fixed the line alignment issue in linear style.
 
 ## 1.0.6
 

+ 4 - 4
packages/stdf/src/lib/components/input/Input.svelte

@@ -115,7 +115,7 @@
 	// Input box style style
 	const inputStyleObj = {
 		block: 'px-2 ring-2 ring-transparent bg-black/5 dark:bg-white/5 ' + radiusObj[radius] || radiusObj.sm,
-		line: 'px-1 border-b bg-transparent border-gray-300 dark:border-gray-500'
+		line: 'px-1 border-b bg-transparent border-black/20 dark:border-white/20'
 	};
 
 	// 状态样式
@@ -132,7 +132,7 @@
 	// Determine the input box style according to whether to get focus
 	const inputStyleFocusObj = $derived({
 		block: 'px-2 ring-2 bg-transparent ' + stateObj[inputState] || stateObj.theme + radiusObj[radius] || radiusObj.sm,
-		line: 'px-1 border-b bg-transparent border-gray-300 dark:border-gray-500'
+		line: 'px-1 border-b bg-transparent border-black/20 dark:border-white/20'
 	});
 
 	// 线性动画样式
@@ -429,8 +429,8 @@
 						lineTransition !== null &&
 						`w-full ${lineTransitionStateObj[inputState] || lineTransitionStateObj.theme}`}"
 					style={lineTransition === 'center'
-						? 'left:50%;transform:translateX(calc( -50% - 0.25rem ));-webkit-transform:translateX(calc( -50% - 0.25rem ));'
-						: 'left:0;transform:translateX( -0.25rem );-webkit-transform:translateX( -0.25rem );'}
+						? 'left:50%;transform:translateX(calc( -50%  ));-webkit-transform:translateX(calc( -50%  ));'
+						: 'left:0;'}
 				></div>
 			{/if}
 		</div>