feat: added picker color component

feat: added picker color component

components/Checkbox/src/index.svelte

@@ -18,6 +18,10 @@
 	export let indeterminate: KCheckboxProps['indeterminate'] = false;
 	export let cls: KCheckboxProps['cls'] = undefined;
 	export let attrs: KCheckboxProps['attrs'] = {};
+	/**
+	 * @internal
+	 */
+	export let canCancel: KCheckboxProps['canCancel'] = false;
 	// updateValue
 	const dispatch = createEventDispatcher();
 
@@ -43,6 +47,9 @@
 	 */
 	const handleUpdateValue = () => {
 		if (isDisabled) return;
+		if (canCancel && valueInner) {
+			return;
+		}
 		doUpdatedValue(!valueInner, true);
 		isIndeterminate = false;
 		// Being in a checkbox group does not trigger it

components/Checkbox/src/types.d.ts

@@ -8,6 +8,7 @@ export type KCheckboxProps = {
 	bgUnCheckColor: string;
 	label: string;
 	value: boolean;
+	canCancel: boolean;
 	uid: string | number;
 	size: IKunSize;
 	disabled: boolean;

components/CheckboxGroup/src/index.svelte

@@ -35,7 +35,7 @@
 	}
 	onMount(() => {
 		// Register event, KForm can set KInput value
-		if (formContext && formInstance) {
+		if (formContext && formInstance && field) {
 			formUpdateField(true);
 			formPropsChangeCb(formInstance.__dynamicProps);
 			formInstance.__itemCompMap[field] = {

components/ColorPicker/__test__/color-picker.spec.ts

@@ -0,0 +1,32 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import KColorPicker from '../src';
+
+let host;
+
+const initHost = () => {
+	host = globalThis.document.createElement('div');
+	host.setAttribute('id', 'host');
+	globalThis.document.body.appendChild(host);
+};
+beforeEach(() => {
+	initHost();
+	vi.useFakeTimers();
+});
+afterEach(() => {
+	host.remove();
+	vi.useRealTimers();
+});
+
+describe('Test: KColorPicker', () => {
+	test('props: cls', async () => {
+		const instance = new KColorPicker({
+			target: host,
+			props: {
+				cls: 'k-color-picker--test'
+			}
+		});
+		expect(instance).toBeTruthy();
+		expect(host!.innerHTML.includes('k-color-picker--test')).toBeTruthy();
+		expect(host.innerHTML).matchSnapshot();
+	});
+});

components/ColorPicker/package.json

@@ -0,0 +1,56 @@
+{
+	"name": "@ikun-ui/color-picker",
+	"version": "0.2.1",
+	"type": "module",
+	"main": "src/index.ts",
+	"types": "src/index.d.ts",
+	"svelte": "src/index.ts",
+	"keywords": [
+		"svelte",
+		"svelte3",
+		"web component",
+		"component",
+		"react",
+		"vue",
+		"svelte-kit",
+		"dx"
+	],
+	"files": [
+		"dist",
+		"package.json"
+	],
+	"scripts": {
+		"build": "svelte-package -i src",
+		"publish:pre": "node ../../scripts/pre-publish.js",
+		"publish:npm": "pnpm run publish:pre && pnpm publish --no-git-checks --access public"
+	},
+	"publishConfig": {
+		"access": "public",
+		"main": "dist/index.js",
+		"module": "dist/index.js",
+		"svelte": "dist/index.js",
+		"types": "dist/index.d.ts"
+	},
+	"dependencies": {
+		"@ikun-ui/icon": "workspace:*",
+		"@ikun-ui/popover": "workspace:*",
+		"@ikun-ui/input": "workspace:*",
+		"@ikun-ui/input-number": "workspace:*",
+		"@ikun-ui/dropdown": "workspace:*",
+		"@ikun-ui/checkbox": "workspace:*",
+		"@ikun-ui/checkbox-group": "workspace:*",
+		"@ikun-ui/utils": "workspace:*",
+		"esm-env": "^1.0.0",
+		"tinycolor2": "^1.6.0",
+		"baiwusanyu-utils": "^1.0.18",
+		"clsx": "^2.0.0",
+		"svelte": "^4.2.7"
+	},
+	"devDependencies": {
+		"@sveltejs/package": "^2.2.5",
+		"@tsconfig/svelte": "^5.0.2",
+		"@types/tinycolor2": "^1.4.6",
+		"tslib": "^2.6.2",
+		"typescript": "^5.3.3"
+	}
+}

components/ColorPicker/src/block.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { KColorPickerBlockProps } from './types';
+	import { getPrefixCls } from '@ikun-ui/utils';
+	import { clsx } from 'clsx';
+	import tinycolor from 'tinycolor2';
+	export let focus: KColorPickerBlockProps['focus'] = false;
+	export let trigger: KColorPickerBlockProps['trigger'] = false;
+	export let disabled: KColorPickerBlockProps['disabled'] = false;
+	export let isClear: KColorPickerBlockProps['isClear'] = false;
+	export let size: KColorPickerBlockProps['size'] = 'md';
+	export let value: KColorPickerBlockProps['value'] = '';
+	export let cls: KColorPickerBlockProps['cls'] = '';
+	export let attrs: KColorPickerBlockProps['attrs'] = {};
+
+	const prefixCls = getPrefixCls('color-picker-block');
+	const contentCls = `${prefixCls}-content`;
+
+	$: cnames = clsx(prefixCls, cls);
+	$: blockBg = tinycolor(value).toRgbString();
+
+	$: contentSizeCls = clsx({
+		[`${prefixCls}-content--${size}`]: trigger,
+		[`${prefixCls}-content--clear`]: isClear
+	});
+	$: wrapperCls = clsx(`${prefixCls}-w`, {
+		[`${prefixCls}-w--disabled`]: disabled,
+		[`${prefixCls}-w--${size}`]: trigger,
+		[`${prefixCls}-w--focus`]: focus
+	});
+	$: cnamesSize = clsx(
+		{
+			[`${prefixCls}`]: !isClear,
+			[`${prefixCls}-clear`]: isClear,
+			[`${prefixCls}--${size}`]: trigger
+		},
+		{
+			[`${prefixCls}--${size}`]: trigger
+		},
+		cls
+	);
+</script>
+
+{#if trigger}
+	<div class={wrapperCls}>
+		<div class={cnamesSize} {...$$restProps} {...attrs}>
+			<div class={contentSizeCls} style:background-color={blockBg}></div>
+		</div>
+		<slot name="text" />
+	</div>
+{:else}
+	<div class={cnames} {...$$restProps} {...attrs}>
+		<div class={contentCls} style:background-color={blockBg}></div>
+	</div>
+{/if}

components/ColorPicker/src/format.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	import type { KColorPickerFormatProps } from './types';
+	import { getPrefixCls } from '@ikun-ui/utils';
+	import { KDropdown, KDropdownItem } from '@ikun-ui/dropdown';
+	import { KIcon } from '@ikun-ui/icon';
+	import { clsx } from 'clsx';
+	import tinycolor from 'tinycolor2';
+	import { createEventDispatcher } from 'svelte';
+	import { KInput } from '@ikun-ui/input';
+	import { KInputNumber } from '@ikun-ui/input-number';
+	import { isString } from 'baiwusanyu-utils';
+	export let format: KColorPickerFormatProps['format'] = 'rgb';
+	export let disabledAlpha: KColorPickerFormatProps['disabledAlpha'] = false;
+	export let value: KColorPickerFormatProps['value'] = '';
+	export let cls: KColorPickerFormatProps['cls'] = '';
+	export let attrs: KColorPickerFormatProps['attrs'] = {};
+
+	let hRValue = 0;
+	let sGValue = 0;
+	let vBValue = 0;
+	let hRMaxValue = 255;
+	let sGMaxValue = 255;
+	let vBMaxValue = 255;
+	let alphaValue = 0;
+	let valueHex = '';
+	function init(
+		formatValue: KColorPickerFormatProps['format'],
+		value: KColorPickerFormatProps['value']
+	) {
+		if (formatValue === 'rgb') {
+			const rgbValue = tinycolor(value).toRgb();
+			hRMaxValue = 255;
+			sGMaxValue = 255;
+			vBMaxValue = 255;
+			hRValue = rgbValue.r;
+			sGValue = rgbValue.g;
+			vBValue = rgbValue.b;
+			alphaValue = rgbValue.a * 100;
+		}
+
+		if (formatValue === 'hsv') {
+			const rgbValue = tinycolor(value).toHsv();
+			hRMaxValue = 360;
+			sGMaxValue = 100;
+			vBMaxValue = 100;
+			hRValue = rgbValue.h;
+			sGValue = rgbValue.s * 100;
+			vBValue = rgbValue.v * 100;
+			alphaValue = rgbValue.a * 100;
+		}
+
+		if (formatValue === 'hex') {
+			const rgbValue = tinycolor(value).toRgb();
+			if (!isString(value) || (isString(value) && rgbValue.a !== 1)) {
+				alphaValue = rgbValue.a * 100;
+				valueHex = tinycolor({ ...rgbValue, a: 1 })
+					.toHex()
+					.replace('#', '')
+					.toLocaleUpperCase();
+			} else {
+				valueHex = (value as string).replace('#', '').toLocaleUpperCase();
+			}
+		}
+	}
+	$: {
+		init(formatValue, value);
+	}
+
+	$: formatValue = format;
+	$: curFormat = formatValue!.toLocaleUpperCase();
+	function onSelectFormat(e: CustomEvent) {
+		formatValue = e.detail;
+		dispatch('formatChange', formatValue);
+	}
+
+	const dispatch = createEventDispatcher();
+	function handleInput(e: CustomEvent, type: 'hr' | 'sg' | 'vb' | 'a' | 'hex') {
+		if (e.detail === null) return;
+		if (type === 'hr') {
+			hRValue = e.detail;
+		}
+		if (type === 'sg') {
+			sGValue = e.detail;
+		}
+		if (type === 'vb') {
+			vBValue = e.detail;
+		}
+		if (type === 'a') {
+			alphaValue = e.detail;
+		}
+		const alpha = alphaValue / 100;
+		if (formatValue === 'rgb') {
+			dispatch('change', {
+				value: tinycolor({
+					r: hRValue,
+					g: sGValue,
+					b: vBValue,
+					a: alpha
+				}).toHsv(),
+				format: formatValue
+			});
+		}
+
+		if (formatValue === 'hsv') {
+			dispatch('change', {
+				value: {
+					h: hRValue,
+					s: sGValue,
+					v: vBValue,
+					a: alpha
+				},
+				format: formatValue
+			});
+		}
+
+		if (formatValue === 'hex') {
+			const hsv = tinycolor(`#${valueHex}`).toHsv();
+			hsv.a = alpha;
+			dispatch('change', {
+				value: hsv,
+				format: formatValue
+			});
+		}
+	}
+
+	const prefixCls = getPrefixCls('color-picker-format');
+	const valueCls = `${prefixCls}--val`;
+	const inputNumCls = `${prefixCls}--input-num`;
+	const inputCls = `${prefixCls}--input`;
+	$: cnames = clsx(prefixCls, cls);
+</script>
+
+<div class={cnames} {...$$restProps} {...attrs}>
+	<KDropdown on:command={onSelectFormat} trigger="click">
+		<div class={valueCls}>
+			{curFormat}
+			<KIcon icon="i-carbon-chevron-down" width="auto" height="auto" cls="op50"></KIcon>
+		</div>
+		<div slot="dropdown">
+			<KDropdownItem command="rgb">RGB</KDropdownItem>
+			<KDropdownItem command="hex">HEX</KDropdownItem>
+			<KDropdownItem command="hsv">HSV</KDropdownItem>
+		</div>
+	</KDropdown>
+	{#if formatValue !== 'hex'}
+		<KInputNumber
+			value={hRValue}
+			min={0}
+			step={1}
+			stepStrictly
+			max={hRMaxValue}
+			on:input={(e) => handleInput(e, 'hr')}
+			cls={inputNumCls}
+			size="sm"
+		></KInputNumber>
+		<KInputNumber
+			value={sGValue}
+			min={0}
+			step={1}
+			max={sGMaxValue}
+			stepStrictly
+			on:input={(e) => handleInput(e, 'sg')}
+			cls={inputNumCls}
+			size="sm"
+		></KInputNumber>
+
+		<KInputNumber
+			value={vBValue}
+			min={0}
+			step={1}
+			max={vBMaxValue}
+			stepStrictly
+			on:input={(e) => handleInput(e, 'vb')}
+			cls={inputNumCls}
+			size="sm"
+		></KInputNumber>
+	{/if}
+	{#if formatValue === 'hex'}
+		<KInput value={valueHex} cls={inputCls} on:input={(e) => handleInput(e, 'hex')} size="sm">
+			<span slot="prefix">#</span>
+		</KInput>
+	{/if}
+	{#if !disabledAlpha}
+		<KInputNumber
+			value={alphaValue}
+			min={1}
+			max={100}
+			step={1}
+			stepStrictly
+			on:input={(e) => handleInput(e, 'a')}
+			cls={inputNumCls}
+			size="sm"
+		></KInputNumber>
+	{/if}
+</div>