fix: fix hex format color compute error

ikun-svelte · Mar 15, 2024 · 942b04c · 942b04c
1 parent cfeebd0
commit 942b04c
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 22 deletions.
diff --git a/components/ColorPicker/src/format.svelte b/components/ColorPicker/src/format.svelte
@@ -91,12 +91,12 @@
 		const alpha = alphaValue / 100;
 		if (formatValue === 'rgb') {
 			dispatch('change', {
-				value: {
+				value: tinycolor({
 					r: hRValue,
 					g: sGValue,
 					b: vBValue,
 					a: alpha
-				},
+				}).toHsv(),
 				format: formatValue
 			});
 		}
@@ -114,10 +114,10 @@
 		}
 
 		if (formatValue === 'hex') {
-			const hsv = tinycolor(`#${valueHex}`).toRgb();
+			const hsv = tinycolor(`#${valueHex}`).toHsv();
 			hsv.a = alpha;
 			dispatch('change', {
-				value: tinycolor(hsv).toHex(),
+				value: hsv,
 				format: formatValue
 			});
 		}

diff --git a/components/ColorPicker/src/index.svelte b/components/ColorPicker/src/index.svelte
@@ -31,7 +31,7 @@
 		if (format === 'hsv') {
 			return tinycolor(value).toHsvString();
 		}
-		return tinycolor(value).toHexString();
+		return tinycolor(value).toHex8String();
 	}
 
 	const dispatch = createEventDispatcher();
@@ -99,15 +99,13 @@
 	$: formatValue = format;
 	function handleFormatInput(e: CustomEvent) {
 		const hsv = tinycolor(e.detail.value).toHsv() as HsvaColor;
-		hsv.s = hsv.s * 100;
-		hsv.v = hsv.v * 100;
 		formatValue = e.detail.format;
 
 		blockColor = hsv;
 		paletteColor = hsv;
 		aColor = hsv;
 		hColor = hsv;
-		defaultPaletteColor = { ...hColor, s: 100, v: 100, a: 100 };
+		defaultPaletteColor = { ...hColor, s: 1, v: 1, a: 1 };
 		formatterColor = hsv;
 		if (paletteRef) {
 			paletteRef.setPickerPos(paletteColor);
@@ -120,20 +118,16 @@
 		dispatch('formatChange', formatValue);
 	}
 
-	let hsvValue: HsvaColor = { h: 0, s: 0, v: 0, a: 100 };
+	let hsvValue: HsvaColor = { h: 0, s: 0, v: 0, a: 1 };
 	$: {
 		if (!isDragging) {
 			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 };
+	let hsvDefaultValue: HsvaColor = { h: 0, s: 0, v: 0, a: 1 };
 	$: {
 		hsvDefaultValue = tinycolor(defaultValue).toHsv();
-		hsvDefaultValue.s = hsvDefaultValue.s * 100;
-		hsvDefaultValue.v = hsvDefaultValue.v * 100;
 	}
 	$: paletteColor = hsvValue;
 	$: defaultPaletteColor = hsvDefaultValue;

diff --git a/components/ColorPicker/src/palette.svelte b/components/ColorPicker/src/palette.svelte
@@ -7,11 +7,11 @@
 	import { extend } from 'baiwusanyu-utils';
 	export let cls: KColorPickerPaletteProps['cls'] = '';
 	export let attrs: KColorPickerPaletteProps['attrs'] = {};
-	export let value: KColorPickerPaletteProps['value'] = { h: 0, s: 100, v: 100, a: 1 };
+	export let value: KColorPickerPaletteProps['value'] = { h: 0, s: 1, v: 1, a: 1 };
 	export let defaultValue: KColorPickerPaletteProps['defaultValue'] = {
 		h: 0,
-		s: 100,
-		v: 100,
+		s: 1,
+		v: 1,
 		a: 1
 	};
 	$: hsvColor = value as HsvaColor;

diff --git a/components/ColorPicker/src/slider.svelte b/components/ColorPicker/src/slider.svelte
@@ -16,12 +16,12 @@
 	let slider: HTMLDivElement | undefined = undefined;
 	$: valueHsv = value as HsvaColor;
 	$: valueHsvH = valueHsv.h;
-	$: valueHsvA = !isAlpha ? 100 : valueHsv.a;
+	$: valueHsvA = !isAlpha ? 1 : valueHsv.a;
 	let valueHex = '';
 	$: {
 		const v = {
-			s: !isAlpha ? 100 : valueHsv.s,
-			v: !isAlpha ? 100 : valueHsv.v,
+			s: !isAlpha ? 1 : valueHsv.s,
+			v: !isAlpha ? 1 : valueHsv.v,
 			h: valueHsvH,
 			a: valueHsvA
 		};

diff --git a/components/ColorPicker/src/types.d.ts b/components/ColorPicker/src/types.d.ts
@@ -199,8 +199,6 @@ export type KColorPickerFormatProps = {
 // TODO: dark mode
 // TODO: Kdropdownitem
 // TODO: input show format
-// TODO: ❗ platte mouseup alpha
-// TODO: ❗ h slider alpha
 export interface RgbaColor {
 	r: number;
 	g: number;