@destyler/color-picker 0.1.0 → 0.2.0

package/dist/{index.d.ts → index.d.mts}

@@ -332,4 +332,4 @@ declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Mac
 //#region src/parse.d.ts
 declare function parse(colorString: string): Color$1;
 //#endregion
-export { type MachineApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type Color, type ColorAxes, type ColorChannel, type ColorFormat, type ColorType, type UserDefinedContext as Context, type ElementIds, type FocusOutsideEvent, type FormatChangeDetails, type InteractOutsideEvent, type OpenChangeDetails, type PointerDownOutsideEvent, type PositioningOptions, type Service, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, connect, machine, parse };
+export { type MachineApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type Color, type ColorAxes, type ColorChannel, type ColorFormat, type ColorType, type UserDefinedContext as Context, type ElementIds, type FocusOutsideEvent, type FormatChangeDetails, type InteractOutsideEvent, type MachineState, type OpenChangeDetails, type PointerDownOutsideEvent, type PositioningOptions, type Service, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, connect, machine, parse };

package/dist/{index.js → index.mjs}

@@ -130,7 +130,7 @@ function getChannelRange(color, channel) {
 				pageSize: 10,
 				step: 1
 			};
-		case "css": return void 0;
+		case "css": return;
 		case "hue":
 		case "saturation":
 		case "lightness": return color.toFormat("hsla").getChannelRange(channel);
@@ -155,22 +155,13 @@ function getSliderBackground(props) {
 	const { minValue, maxValue } = value.getChannelRange(channel);
 	switch (channel) {
 		case "hue": return `linear-gradient(to ${bgDirection}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
-		case "lightness": {
-			const start = value.withChannelValue(channel, minValue).toString("css");
-			const middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString("css");
-			const end = value.withChannelValue(channel, maxValue).toString("css");
-			return `linear-gradient(to ${bgDirection}, ${start}, ${middle}, ${end})`;
-		}
+		case "lightness": return `linear-gradient(to ${bgDirection}, ${value.withChannelValue(channel, minValue).toString("css")}, ${value.withChannelValue(channel, (maxValue - minValue) / 2).toString("css")}, ${value.withChannelValue(channel, maxValue).toString("css")})`;
 		case "saturation":
 		case "brightness":
 		case "red":
 		case "green":
 		case "blue":
-		case "alpha": {
-			const start = value.withChannelValue(channel, minValue).toString("css");
-			const end = value.withChannelValue(channel, maxValue).toString("css");
-			return `linear-gradient(to ${bgDirection}, ${start}, ${end})`;
-		}
+		case "alpha": return `linear-gradient(to ${bgDirection}, ${value.withChannelValue(channel, minValue).toString("css")}, ${value.withChannelValue(channel, maxValue).toString("css")})`;
 		default: throw new Error(`Unknown color channel: ${channel}`);
 	}
 }
@@ -230,28 +221,25 @@ function connect(state, send, normalize) {
 			return value.formatChannelValue(channel, locale);
 		},
 		setChannelValue(channel, channelValue) {
-			const color = value.withChannelValue(channel, channelValue);
 			send({
 				type: "VALUE.SET",
-				value: color,
+				value: value.withChannelValue(channel, channelValue),
 				src: "set-channel"
 			});
 		},
 		format: state.context.format,
 		setFormat(format) {
-			const formatValue = value.toFormat(format);
 			send({
 				type: "VALUE.SET",
-				value: formatValue,
+				value: value.toFormat(format),
 				src: "set-format"
 			});
 		},
 		alpha: value.getChannelValue("alpha"),
 		setAlpha(alphaValue) {
-			const color = value.withChannelValue("alpha", alphaValue);
 			send({
 				type: "VALUE.SET",
-				value: color,
+				value: value.withChannelValue("alpha", alphaValue),
 				src: "set-alpha"
 			});
 		},
@@ -278,8 +266,7 @@ function connect(state, send, normalize) {
 				"data-focus": dataAttr(focused),
 				onClick(event) {
 					event.preventDefault();
-					const inputEl = query(dom.getControlEl(state.context), "[data-channel=hex]");
-					inputEl?.focus({ preventScroll: true });
+					query(dom.getControlEl(state.context), "[data-channel=hex]")?.focus({ preventScroll: true });
 				}
 			});
 		},
@@ -367,15 +354,13 @@ function connect(state, send, normalize) {
 					if (!interactive) return;
 					if (!isLeftClick(event)) return;
 					if (isModifierKey(event)) return;
-					const point = getEventPoint(event);
-					const channel = {
-						xChannel,
-						yChannel
-					};
 					send({
 						type: "AREA.POINTER_DOWN",
-						point,
-						channel,
+						point: getEventPoint(event),
+						channel: {
+							xChannel,
+							yChannel
+						},
 						id: "area"
 					});
 					event.preventDefault();
@@ -457,7 +442,7 @@ function connect(state, send, normalize) {
 					if (event.defaultPrevented) return;
 					if (!interactive) return;
 					const step = getEventStep(event);
-					const keyMap = {
+					const exec = {
 						ArrowUp() {
 							send({
 								type: "AREA.ARROW_UP",
@@ -503,8 +488,7 @@ function connect(state, send, normalize) {
 						Escape(event$1) {
 							event$1.stopPropagation();
 						}
-					};
-					const exec = keyMap[getEventKey(event, state.context)];
+					}[getEventKey(event, state.context)];
 					if (exec) {
 						exec(event);
 						event.preventDefault();
@@ -541,12 +525,11 @@ function connect(state, send, normalize) {
 					if (!interactive) return;
 					if (!isLeftClick(event)) return;
 					if (isModifierKey(event)) return;
-					const point = getEventPoint(event);
 					send({
 						type: "CHANNEL_SLIDER.POINTER_DOWN",
 						channel,
 						format,
-						point,
+						point: getEventPoint(event),
 						id: channel,
 						orientation
 					});
@@ -647,7 +630,7 @@ function connect(state, send, normalize) {
 					if (event.defaultPrevented) return;
 					if (!interactive) return;
 					const step = getEventStep(event) * channelRange.step;
-					const keyMap = {
+					const exec = {
 						ArrowUp() {
 							send({
 								type: "CHANNEL_SLIDER.ARROW_UP",
@@ -703,8 +686,7 @@ function connect(state, send, normalize) {
 						Escape(event$1) {
 							event$1.stopPropagation();
 						}
-					};
-					const exec = keyMap[getEventKey(event, state.context)];
+					}[getEventKey(event, state.context)];
 					if (exec) {
 						exec(event);
 						event.preventDefault();
@@ -728,15 +710,14 @@ function connect(state, send, normalize) {
 				"data-disabled": dataAttr(disabled),
 				"data-invalid": dataAttr(state.context.invalid),
 				"data-readonly": dataAttr(state.context.readOnly),
-				"readOnly": state.context.readOnly,
+				...state.context.readOnly ? { readOnly: true } : {},
 				"defaultValue": getChannelValue(value, channel),
 				"min": channelRange?.minValue,
 				"max": channelRange?.maxValue,
 				"step": channelRange?.step,
 				onBeforeInput(event) {
 					if (isTextField || !interactive) return;
-					const value$1 = event.currentTarget.value;
-					if (value$1.match(/[^0-9.]/g)) event.preventDefault();
+					if (event.currentTarget.value.match(/[^0-9.]/g)) event.preventDefault();
 				},
 				onFocus(event) {
 					if (!interactive) return;
@@ -748,11 +729,10 @@ function connect(state, send, normalize) {
 				},
 				onBlur(event) {
 					if (!interactive) return;
-					const value$1 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
 					send({
 						type: "CHANNEL_INPUT.BLUR",
 						channel,
-						value: value$1,
+						value: isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber,
 						isTextField
 					});
 				},
@@ -760,11 +740,10 @@ function connect(state, send, normalize) {
 					if (event.defaultPrevented) return;
 					if (!interactive) return;
 					if (event.key === "Enter") {
-						const value$1 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
 						send({
 							type: "CHANNEL_INPUT.CHANGE",
 							channel,
-							value: value$1,
+							value: isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber,
 							isTextField
 						});
 						event.preventDefault();
@@ -783,7 +762,7 @@ function connect(state, send, normalize) {
 				disabled,
 				name: state.context.name,
 				tabIndex: -1,
-				readOnly: state.context.readOnly,
+				...state.context.readOnly ? { readOnly: true } : {},
 				required: state.context.required,
 				id: dom.getHiddenInputId(state.context),
 				style: visuallyHiddenStyle,
@@ -869,10 +848,9 @@ function connect(state, send, normalize) {
 				"aria-label": `change color format to ${getNextFormat(state.context.format)}`,
 				onClick(event) {
 					if (event.currentTarget.disabled) return;
-					const nextFormat = getNextFormat(state.context.format);
 					send({
 						type: "FORMAT.SET",
-						format: nextFormat,
+						format: getNextFormat(state.context.format),
 						src: "format-trigger"
 					});
 				}
@@ -886,10 +864,9 @@ function connect(state, send, normalize) {
 				"defaultValue": state.context.format,
 				"disabled": disabled,
 				onChange(event) {
-					const format = assertFormat(event.currentTarget.value);
 					send({
 						type: "FORMAT.SET",
-						format,
+						format: assertFormat(event.currentTarget.value),
 						src: "format-select"
 					});
 				}
@@ -904,8 +881,7 @@ const formats = [
 ];
 const formatRegex = /* @__PURE__ */ new RegExp(`^(${formats.join("|")})$`);
 function getNextFormat(format) {
-	const index = formats.indexOf(format);
-	return formats[index + 1] ?? formats[0];
+	return formats[formats.indexOf(format) + 1] ?? formats[0];
 }
 function assertFormat(format) {
 	if (formatRegex.test(format)) return format;
@@ -1249,8 +1225,7 @@ function machine(userContext) {
 				});
 			},
 			trackFormControl(ctx$1, _evt, { send, initialContext }) {
-				const inputEl = dom.getHiddenInputEl(ctx$1);
-				return trackFormControl(inputEl, {
+				return trackFormControl(dom.getHiddenInputEl(ctx$1), {
 					onFieldsetDisabledChange(disabled) {
 						ctx$1.fieldsetDisabled = disabled;
 					},
@@ -1266,16 +1241,14 @@ function machine(userContext) {
 			trackPointerMove(ctx$1, evt, { send }) {
 				return trackPointerMove(dom.getDoc(ctx$1), {
 					onPointerMove({ point }) {
-						const type = ctx$1.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE";
 						send({
-							type,
+							type: ctx$1.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE",
 							point,
 							format: evt.format
 						});
 					},
 					onPointerUp() {
-						const type = ctx$1.activeId === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP";
-						send({ type });
+						send({ type: ctx$1.activeId === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP" });
 					}
 				});
 			},
@@ -1288,11 +1261,8 @@ function machine(userContext) {
 		},
 		actions: {
 			openEyeDropper(ctx$1) {
-				const isSupported = "EyeDropper" in dom.getWin(ctx$1);
-				if (!isSupported) return;
-				const win = dom.getWin(ctx$1);
-				const picker = new win.EyeDropper();
-				picker.open().then(({ sRGBHex }) => {
+				if (!("EyeDropper" in dom.getWin(ctx$1))) return;
+				new (dom.getWin(ctx$1)).EyeDropper().open().then(({ sRGBHex }) => {
 					const format = ctx$1.value.getFormat();
 					const color = parseColor(sRGBHex).toFormat(format);
 					set.value(ctx$1, color);
@@ -1327,8 +1297,7 @@ function machine(userContext) {
 				const normalizedValue = evt.format ? ctx$1.value.toFormat(evt.format) : ctx$1.areaValue;
 				const percent = dom.getChannelSliderValueFromPoint(ctx$1, evt.point, channel);
 				if (!percent) return;
-				const orientation = ctx$1.activeOrientation || "horizontal";
-				const channelPercent = orientation === "horizontal" ? percent.x : percent.y;
+				const channelPercent = (ctx$1.activeOrientation || "horizontal") === "horizontal" ? percent.x : percent.y;
 				const value = normalizedValue.getChannelPercentValue(channel, channelPercent);
 				const color = normalizedValue.withChannelValue(channel, value);
 				set.value(ctx$1, color);
@@ -1413,11 +1382,10 @@ function machine(userContext) {
 			setInitialFocus(ctx$1) {
 				if (!ctx$1.openAutoFocus) return;
 				raf(() => {
-					const element = getInitialFocus({
+					getInitialFocus({
 						root: dom.getContentEl(ctx$1),
 						getInitialEl: ctx$1.initialFocusEl
-					});
-					element?.focus({ preventScroll: true });
+					})?.focus({ preventScroll: true });
 				});
 			},
 			setReturnFocus(ctx$1) {

package/package.json

@@ -1,29 +1,38 @@
 {
   "name": "@destyler/color-picker",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "a component that allows users to select a color from a color picker.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
+  "homepage": "https://github.com/destyler/destyler",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/destyler/destyler.git",
+    "directory": "packages/components/color-picker"
+  },
   "exports": {
-    ".": "./dist/index.js"
+    ".": "./dist/index.mjs"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.mts",
   "files": [
     "*.d.ts",
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.1.0",
-    "@destyler/dismissable": "0.1.0",
-    "@destyler/dom": "0.1.0",
-    "@destyler/popper": "0.1.0",
-    "@destyler/xstate": "0.1.0",
-    "@destyler/utils": "0.1.0",
-    "@destyler/color": "0.1.0",
-    "@destyler/types": "0.1.0"
+    "@destyler/anatomy": "0.2.0",
+    "@destyler/color": "0.2.0",
+    "@destyler/dismissable": "0.2.0",
+    "@destyler/popper": "0.2.0",
+    "@destyler/dom": "0.2.0",
+    "@destyler/types": "0.2.0",
+    "@destyler/xstate": "0.2.0",
+    "@destyler/utils": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
   },
   "scripts": {
     "clear": "rimraf ./dist",