fix: fix rgb format input value error

ikun-svelte · Mar 15, 2024 · df7706b · df7706b
1 parent ed8a5db
commit df7706b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/components/ColorPicker/src/format.svelte b/components/ColorPicker/src/format.svelte
@@ -75,6 +75,7 @@
 
 	const dispatch = createEventDispatcher();
 	function handleInput(e: CustomEvent, type: 'hr' | 'sg' | 'vb' | 'a' | 'hex') {
+		if (e.detail === null) return;
 		if (type === 'hr') {
 			hRValue = e.detail;
 		}
@@ -145,7 +146,7 @@
 	{#if formatValue !== 'hex'}
 		<KInputNumber
 			value={hRValue}
-			min={1}
+			min={0}
 			step={1}
 			stepStrictly
 			max={hRMaxValue}
@@ -155,7 +156,7 @@
 		></KInputNumber>
 		<KInputNumber
 			value={sGValue}
-			min={1}
+			min={0}
 			step={1}
 			max={sGMaxValue}
 			stepStrictly
@@ -166,7 +167,7 @@
 
 		<KInputNumber
 			value={vBValue}
-			min={1}
+			min={0}
 			step={1}
 			max={vBMaxValue}
 			stepStrictly

diff --git a/components/ColorPicker/src/index.svelte b/components/ColorPicker/src/index.svelte
@@ -115,12 +115,14 @@
 	}
 
 	let hsvValue: HsvaColor = { h: 0, s: 0, v: 0, a: 100 };
-	let hsvDefaultValue: HsvaColor = { h: 0, s: 0, v: 0, a: 100 };
 	$: {
 		hsvValue = tinycolor(value).toHsv() as HsvaColor;
 		hsvValue.s = hsvValue.s * 100;
 		hsvValue.v = hsvValue.v * 100;
+	}
 
+	let hsvDefaultValue: HsvaColor = { h: 0, s: 0, v: 0, a: 100 };
+	$: {
 		hsvDefaultValue = tinycolor(defaultValue).toHsv();
 		hsvDefaultValue.s = hsvDefaultValue.s * 100;
 		hsvDefaultValue.v = hsvDefaultValue.v * 100;
@@ -158,7 +160,6 @@
 				<div slot="text" class={txtCls} style:display={showText ? 'initial' : 'none'}>
 					{#if showText}
 						<slot name="text">
-							{formatValue}
 							{formatColor(formatValue, blockColor)}
 						</slot>
 					{/if}

diff --git a/components/ColorPicker/src/types.d.ts b/components/ColorPicker/src/types.d.ts
@@ -202,7 +202,6 @@ export type KColorPickerFormatProps = {
 // TODO 📌0000时拽不动
 // TODO 📌360 时变成了0
 // TODO: 📌拖拽优化
-
 export interface RgbaColor {
 	r: number;
 	g: number;