@will-ui/vue 1.0.0

package/dist/components/colorPicker/ColorPicker.js

@@ -0,0 +1,404 @@
+import useComponentConfig from "../../use/useComponentConfig.js";
+import { detectColorFormat, formatColor, hsvaToRgba, isDarkColor, isSameRgba, parseColor, rgbaToHex, rgbaToHsva, rgbaToRgbaString } from "../../util/colors.js";
+import { effectiveBgVar, effectiveTextVar, mergeStyle, propColorToCssVars, propSizeToCssVars, toCssVarsStyle } from "../../util/cssVars.js";
+import useFormItem from "../../use/useFormItem.js";
+import Layer_default from "../layer/Layer.js";
+import { useUII18n } from "../../use/useUII18n.js";
+import { COLOR_PICKER_FALLBACK } from "./config.js";
+import { computed, createTextVNode, createVNode, defineComponent, onBeforeUnmount, ref, watch } from "vue";
+//#region components/colorPicker/ColorPicker.tsx
+var ColorPicker_default = /* @__PURE__ */ defineComponent({
+	name: "ColorPicker",
+	props: {
+		modelValue: {
+			type: String,
+			default: "#000000"
+		},
+		/** 输出格式；auto 按最近一次成功解析的输入格式回写 */
+		format: {
+			type: String,
+			default: void 0
+		},
+		showInput: {
+			type: Boolean,
+			default: void 0
+		},
+		/** 是否显示透明度滑条（不绑定输出格式） */
+		showAlpha: {
+			type: Boolean,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		block: {
+			type: Boolean,
+			default: void 0
+		},
+		placeholder: {
+			type: String,
+			default: void 0
+		},
+		/** 实例尺度（px），写入 `--w-prop-color-picker-size` */
+		size: {
+			type: Number,
+			default: void 0
+		},
+		/** 实例主色，写入 `--w-prop-color-picker-color`（聚焦描边等） */
+		color: {
+			type: String,
+			default: void 0
+		},
+		cssVars: {
+			type: Object,
+			default: void 0
+		},
+		nearby: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* 拖拽饱和度/色相/透明度时仅更新面板，松手再触发 update:modelValue / change。
+		* 适合父级写 :root 等重副作用的场景。
+		*/
+		commitOnEnd: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { emit, attrs }) {
+		const { t } = useUII18n();
+		const cfg = useComponentConfig("ColorPicker", props, COLOR_PICKER_FALLBACK);
+		const { formItem, useDisabled } = useFormItem();
+		const disabled = useDisabled(computed(() => cfg.value.disabled));
+		const visible = ref(false);
+		const isDragging = ref(null);
+		const saturationRef = ref();
+		const hueRef = ref();
+		const alphaRef = ref();
+		let dragRaf = 0;
+		let pendingPointer = null;
+		let activePointerId = null;
+		let dragTarget = null;
+		let prevUserSelect = "";
+		let prevBodyCursor = "";
+		const colorPlaceholder = computed(() => cfg.value.placeholder || t("color.placeholder"));
+		const rgba = ref(parseColor(props.modelValue));
+		const hsva = ref(rgbaToHsva(rgba.value));
+		/** format=auto 时记录检测到的格式 */
+		const detectedFormat = ref(detectColorFormat(props.modelValue));
+		function toOutputString(color = rgba.value) {
+			return formatColor(color, cfg.value.format, {
+				source: props.modelValue,
+				detected: detectedFormat.value
+			});
+		}
+		/** 从 RGB 同步 HSVA 时保留无彩色的色相，避免面板跳回红 */
+		function syncHsvaFromRgba(color) {
+			hsva.value = rgbaToHsva(color, hsva.value.h);
+		}
+		const previewCss = computed(() => rgbaToRgbaString(rgba.value, true));
+		const displayValue = computed(() => toOutputString());
+		watch(() => props.modelValue, (newVal) => {
+			if (isDragging.value) return;
+			const next = parseColor(newVal);
+			if (isSameRgba(next, rgba.value)) return;
+			rgba.value = next;
+			syncHsvaFromRgba(next);
+			if (cfg.value.format === "auto") detectedFormat.value = detectColorFormat(newVal);
+		});
+		watch(() => cfg.value.format, (fmt) => {
+			if (fmt === "auto") detectedFormat.value = detectColorFormat(props.modelValue);
+		});
+		const saturationBg = computed(() => {
+			const tempRgba = hsvaToRgba({
+				...hsva.value,
+				s: 100,
+				v: 100,
+				a: 1
+			});
+			return `rgb(${tempRgba.r}, ${tempRgba.g}, ${tempRgba.b})`;
+		});
+		const saturationPosition = computed(() => ({
+			x: `${hsva.value.s}%`,
+			y: `${100 - hsva.value.v}%`
+		}));
+		const huePosition = computed(() => `${hsva.value.h / 360 * 100}%`);
+		const alphaGradient = computed(() => {
+			return `linear-gradient(to right, transparent, ${rgbaToHex({
+				...rgba.value,
+				a: 1
+			}, false)})`;
+		});
+		const alphaPosition = computed(() => `${rgba.value.a * 100}%`);
+		const handleColor = computed(() => {
+			return isDarkColor(rgba.value) ? "#ffffff" : "#000000";
+		});
+		function emitColorChange() {
+			const colorString = toOutputString();
+			if (colorString === props.modelValue) return;
+			emit("update:modelValue", colorString);
+			emit("change", colorString);
+			formItem?.validate("change");
+		}
+		function applySaturation(e) {
+			if (!saturationRef.value) return;
+			const rect = saturationRef.value.getBoundingClientRect();
+			const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+			const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+			const next = {
+				...hsva.value,
+				s: Math.round(x * 100),
+				v: Math.round((1 - y) * 100)
+			};
+			hsva.value = next;
+			rgba.value = hsvaToRgba(next);
+			if (!props.commitOnEnd) emitColorChange();
+		}
+		function applyHue(e) {
+			if (!hueRef.value) return;
+			const rect = hueRef.value.getBoundingClientRect();
+			const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+			const next = {
+				...hsva.value,
+				h: Math.round(x * 360)
+			};
+			hsva.value = next;
+			rgba.value = hsvaToRgba(next);
+			if (!props.commitOnEnd) emitColorChange();
+		}
+		function applyAlpha(e) {
+			if (!alphaRef.value) return;
+			const rect = alphaRef.value.getBoundingClientRect();
+			const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+			const a = Math.round(x * 100) / 100;
+			rgba.value = {
+				...rgba.value,
+				a
+			};
+			hsva.value = {
+				...hsva.value,
+				a
+			};
+			if (!props.commitOnEnd) emitColorChange();
+		}
+		function flushPendingPointer() {
+			dragRaf = 0;
+			const e = pendingPointer;
+			pendingPointer = null;
+			if (!e || !isDragging.value) return;
+			if (isDragging.value === "saturation") applySaturation(e);
+			else if (isDragging.value === "hue") applyHue(e);
+			else if (isDragging.value === "alpha") applyAlpha(e);
+		}
+		function schedulePointer(e) {
+			pendingPointer = e;
+			if (dragRaf) return;
+			dragRaf = requestAnimationFrame(flushPendingPointer);
+		}
+		function onPointerMove(e) {
+			if (!isDragging.value) return;
+			if (activePointerId != null && e.pointerId !== activePointerId) return;
+			e.preventDefault();
+			schedulePointer(e);
+		}
+		function endDrag() {
+			const wasDragging = isDragging.value;
+			if (dragRaf) {
+				cancelAnimationFrame(dragRaf);
+				dragRaf = 0;
+			}
+			if (pendingPointer && isDragging.value) flushPendingPointer();
+			if (dragTarget && activePointerId != null) try {
+				dragTarget.releasePointerCapture(activePointerId);
+			} catch {}
+			dragTarget = null;
+			activePointerId = null;
+			isDragging.value = null;
+			document.body.style.userSelect = prevUserSelect;
+			document.body.style.cursor = prevBodyCursor;
+			document.removeEventListener("pointermove", onPointerMove);
+			document.removeEventListener("pointerup", endDrag);
+			document.removeEventListener("pointercancel", endDrag);
+			if (wasDragging && props.commitOnEnd) emitColorChange();
+		}
+		function startDrag(type, e, apply) {
+			if (disabled.value) return;
+			e.preventDefault();
+			e.stopPropagation();
+			window.getSelection()?.removeAllRanges();
+			isDragging.value = type;
+			activePointerId = e.pointerId;
+			dragTarget = e.currentTarget;
+			try {
+				dragTarget.setPointerCapture(e.pointerId);
+			} catch {}
+			prevUserSelect = document.body.style.userSelect;
+			prevBodyCursor = document.body.style.cursor;
+			document.body.style.userSelect = "none";
+			document.body.style.cursor = type === "saturation" ? "crosshair" : "pointer";
+			apply(e);
+			document.addEventListener("pointermove", onPointerMove, { passive: false });
+			document.addEventListener("pointerup", endDrag);
+			document.addEventListener("pointercancel", endDrag);
+		}
+		function handleSaturationPointerDown(e) {
+			startDrag("saturation", e, applySaturation);
+		}
+		function handleHuePointerDown(e) {
+			startDrag("hue", e, applyHue);
+		}
+		function handleAlphaPointerDown(e) {
+			startDrag("alpha", e, applyAlpha);
+		}
+		onBeforeUnmount(() => {
+			endDrag();
+		});
+		function handleInputChange(e) {
+			const raw = e.target.value.trim();
+			if (!raw) return;
+			const newRgba = parseColor(raw);
+			rgba.value = newRgba;
+			syncHsvaFromRgba(newRgba);
+			if (cfg.value.format === "auto") detectedFormat.value = detectColorFormat(raw);
+			emitColorChange();
+		}
+		function handleRgbaChange(channel, value) {
+			const numValue = parseInt(value, 10);
+			if (isNaN(numValue)) return;
+			rgba.value[channel] = channel === "a" ? Math.max(0, Math.min(1, numValue / 100)) : Math.max(0, Math.min(255, numValue));
+			syncHsvaFromRgba(rgba.value);
+			emitColorChange();
+		}
+		return () => {
+			const sizeVars = toCssVarsStyle({
+				...propSizeToCssVars("color-picker", props.size),
+				...propColorToCssVars("color-picker", props.color),
+				"--w-prop-layer-bg-color": effectiveBgVar("color-picker"),
+				"--w-prop-layer-text-color": effectiveTextVar("color-picker"),
+				...props.cssVars
+			});
+			const rootStyle = mergeStyle(sizeVars, attrs.style);
+			const layerGap = props.size != null ? Math.max(4, Math.round(props.size * .25)) : void 0;
+			return createVNode(Layer_default, {
+				"show": visible.value,
+				"nearby": props.nearby,
+				"disabled": disabled.value,
+				"placement": "bottom-start",
+				"gap": layerGap,
+				"hasArrow": false,
+				"transitionName": "w-slide-y",
+				"immediate": true,
+				"layerClass": "w-color-picker-layer",
+				"layerStyle": sizeVars,
+				"onUpdate:show": (b) => {
+					visible.value = b;
+				}
+			}, {
+				trigger: () => createVNode("div", {
+					"class": ["w-color-picker", { "w-color-picker-block": cfg.value.block }],
+					"style": rootStyle
+				}, [createVNode("div", { "class": "w-color-picker-trigger" }, [createVNode("div", { "class": "w-color-picker-preview" }, [createVNode("div", { "class": "w-color-picker-preview-bg" }, null), createVNode("div", {
+					"class": "w-color-picker-preview-color",
+					"style": { backgroundColor: previewCss.value }
+				}, null)])]), cfg.value.showInput && createVNode("div", { "class": "w-color-picker-input-wrapper" }, [createVNode("input", {
+					"type": "text",
+					"class": "w-color-picker-input",
+					"value": displayValue.value,
+					"placeholder": colorPlaceholder.value,
+					"disabled": disabled.value,
+					"onChange": handleInputChange
+				}, null)])]),
+				default: () => createVNode("div", { "class": "w-color-picker-panel" }, [
+					createVNode("div", {
+						"ref": saturationRef,
+						"class": "w-color-picker-saturation",
+						"style": { backgroundColor: saturationBg.value },
+						"onPointerdown": handleSaturationPointerDown
+					}, [
+						createVNode("div", { "class": "w-color-picker-saturation-white" }, null),
+						createVNode("div", { "class": "w-color-picker-saturation-black" }, null),
+						createVNode("div", {
+							"class": "w-color-picker-saturation-handle",
+							"style": {
+								left: saturationPosition.value.x,
+								top: saturationPosition.value.y,
+								backgroundColor: handleColor.value
+							}
+						}, null)
+					]),
+					createVNode("div", {
+						"ref": hueRef,
+						"class": "w-color-picker-hue",
+						"onPointerdown": handleHuePointerDown
+					}, [createVNode("div", { "class": "w-color-picker-hue-gradient" }, null), createVNode("div", {
+						"class": "w-color-picker-hue-handle",
+						"style": { left: huePosition.value }
+					}, null)]),
+					cfg.value.showAlpha && createVNode("div", {
+						"ref": alphaRef,
+						"class": "w-color-picker-alpha",
+						"onPointerdown": handleAlphaPointerDown
+					}, [
+						createVNode("div", { "class": "w-color-picker-alpha-bg" }, null),
+						createVNode("div", {
+							"class": "w-color-picker-alpha-gradient",
+							"style": { background: alphaGradient.value }
+						}, null),
+						createVNode("div", {
+							"class": "w-color-picker-alpha-handle",
+							"style": { left: alphaPosition.value }
+						}, null)
+					]),
+					createVNode("div", { "class": "w-color-picker-preview-row" }, [createVNode("div", { "class": "w-color-picker-preview-square" }, [createVNode("div", { "class": "w-color-picker-preview-square-bg" }, null), createVNode("div", {
+						"class": "w-color-picker-preview-square-color",
+						"style": { backgroundColor: previewCss.value }
+					}, null)]), createVNode("div", { "class": "w-color-picker-values" }, [
+						createVNode("div", { "class": "w-color-picker-value" }, [createVNode("span", { "class": "w-color-picker-value-label" }, [createTextVNode("R")]), createVNode("input", {
+							"type": "number",
+							"class": "w-color-picker-value-input",
+							"value": rgba.value.r,
+							"min": 0,
+							"max": 255,
+							"disabled": disabled.value,
+							"onInput": (e) => handleRgbaChange("r", e.target.value)
+						}, null)]),
+						createVNode("div", { "class": "w-color-picker-value" }, [createVNode("span", { "class": "w-color-picker-value-label" }, [createTextVNode("G")]), createVNode("input", {
+							"type": "number",
+							"class": "w-color-picker-value-input",
+							"value": rgba.value.g,
+							"min": 0,
+							"max": 255,
+							"disabled": disabled.value,
+							"onInput": (e) => handleRgbaChange("g", e.target.value)
+						}, null)]),
+						createVNode("div", { "class": "w-color-picker-value" }, [createVNode("span", { "class": "w-color-picker-value-label" }, [createTextVNode("B")]), createVNode("input", {
+							"type": "number",
+							"class": "w-color-picker-value-input",
+							"value": rgba.value.b,
+							"min": 0,
+							"max": 255,
+							"disabled": disabled.value,
+							"onInput": (e) => handleRgbaChange("b", e.target.value)
+						}, null)]),
+						cfg.value.showAlpha && createVNode("div", { "class": "w-color-picker-value" }, [createVNode("span", { "class": "w-color-picker-value-label" }, [createTextVNode("A")]), createVNode("input", {
+							"type": "number",
+							"class": "w-color-picker-value-input",
+							"value": Math.round(rgba.value.a * 100),
+							"min": 0,
+							"max": 100,
+							"disabled": disabled.value,
+							"onInput": (e) => handleRgbaChange("a", e.target.value)
+						}, null)])
+					])])
+				])
+			});
+		};
+	}
+});
+//#endregion
+export { ColorPicker_default as default };
+
+//# sourceMappingURL=ColorPicker.js.map

package/dist/components/colorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","names":["defineComponent","computed","ref","watch","onBeforeUnmount","createVNode","_createVNode","createTextVNode","_createTextVNode","useUII18n","useComponentConfig","useFormItem","mergeStyle","propSizeToCssVars","propColorToCssVars","effectiveBgVar","effectiveTextVar","toCssVarsStyle","Layer","parseColor","formatColor","detectColorFormat","isSameRgba","rgbaToHex","rgbaToRgbaString","rgbaToHsva","hsvaToRgba","isDarkColor","COLOR_PICKER_FALLBACK","name","props","modelValue","type","String","default","format","undefined","showInput","Boolean","showAlpha","disabled","block","placeholder","size","Number","color","cssVars","Object","nearby","commitOnEnd","emits","setup","emit","attrs","t","cfg","formItem","useDisabled","value","visible","isDragging","saturationRef","hueRef","alphaRef","dragRaf","pendingPointer","activePointerId","dragTarget","prevUserSelect","prevBodyCursor","colorPlaceholder","rgba","hsva","detectedFormat","toOutputString","source","detected","syncHsvaFromRgba","h","previewCss","displayValue","newVal","next","fmt","saturationBg","tempRgba","s","v","a","r","g","b","saturationPosition","x","y","huePosition","alphaGradient","hex","alphaPosition","handleColor","emitColorChange","colorString","validate","applySaturation","e","rect","getBoundingClientRect","Math","max","min","clientX","left","width","clientY","top","height","round","applyHue","applyAlpha","flushPendingPointer","schedulePointer","requestAnimationFrame","onPointerMove","pointerId","preventDefault","endDrag","wasDragging","cancelAnimationFrame","releasePointerCapture","document","body","style","userSelect","cursor","removeEventListener","startDrag","apply","stopPropagation","window","getSelection","removeAllRanges","currentTarget","setPointerCapture","addEventListener","passive","handleSaturationPointerDown","handleHuePointerDown","handleAlphaPointerDown","handleInputChange","input","target","raw","trim","newRgba","handleRgbaChange","channel","numValue","parseInt","isNaN","sizeVars","rootStyle","layerGap","trigger","backgroundColor","background"],"sources":["../../../components/colorPicker/ColorPicker.tsx"],"sourcesContent":["import { defineComponent, computed, ref, watch, onBeforeUnmount } from 'vue'\r\nimport type { PropType, CSSProperties } from 'vue'\r\nimport { useUII18n } from '../../use/useUII18n'\r\nimport useComponentConfig from '../../use/useComponentConfig'\r\nimport useFormItem from '../../use/useFormItem'\r\nimport {\r\n  mergeStyle,\r\n  propSizeToCssVars,\r\n  propColorToCssVars,\r\n  effectiveSizeVar,\r\n  effectiveBgVar,\r\n  effectiveTextVar,\r\n  toCssVarsStyle,\r\n  type CssVars,\r\n} from '../../util/cssVars'\r\nimport Layer from '../layer/index'\r\nimport {\r\n  parseColor,\r\n  formatColor,\r\n  detectColorFormat,\r\n  isSameRgba,\r\n  rgbaToHex,\r\n  rgbaToRgbaString,\r\n  rgbaToHsva,\r\n  hsvaToRgba,\r\n  isDarkColor,\r\n  type RgbaColor,\r\n  type HsvaColor,\r\n  type ColorFormat,\r\n  type ResolvedColorFormat,\r\n} from '../../util/colors'\r\nimport { COLOR_PICKER_FALLBACK } from './config'\r\n\r\nexport type { ColorFormat, ResolvedColorFormat }\r\nexport type { ColorPickerGlobalConfig } from './config'\r\nexport { COLOR_PICKER_FALLBACK } from './config'\r\n\r\nexport default defineComponent({\r\n  name: 'ColorPicker',\r\n  props: {\r\n    modelValue: { type: String, default: '#000000' },\r\n    /** 输出格式；auto 按最近一次成功解析的输入格式回写 */\r\n    format: {\r\n      type: String as PropType<ColorFormat>,\r\n      default: undefined,\r\n    },\r\n    // Boolean 须 default: undefined，否则未传会变成 false，全局配置无效\r\n    showInput: { type: Boolean, default: undefined },\r\n    /** 是否显示透明度滑条（不绑定输出格式） */\r\n    showAlpha: { type: Boolean, default: undefined },\r\n    disabled: { type: Boolean, default: undefined },\r\n    block: { type: Boolean, default: undefined },\r\n    placeholder: { type: String, default: undefined },\r\n    /** 实例尺度（px），写入 `--w-prop-color-picker-size` */\r\n    size: { type: Number, default: undefined },\r\n    /** 实例主色，写入 `--w-prop-color-picker-color`（聚焦描边等） */\r\n    color: { type: String, default: undefined },\r\n    cssVars: {\r\n      type: Object as PropType<CssVars>,\r\n      default: undefined,\r\n    },\r\n    nearby: { type: Boolean, default: false },\r\n    /**\r\n     * 拖拽饱和度/色相/透明度时仅更新面板，松手再触发 update:modelValue / change。\r\n     * 适合父级写 :root 等重副作用的场景。\r\n     */\r\n    commitOnEnd: { type: Boolean, default: undefined },\r\n  },\r\n  emits: ['update:modelValue', 'change'],\r\n  setup(props, { emit, attrs }) {\r\n    const { t } = useUII18n()\r\n    const cfg = useComponentConfig('ColorPicker', props, COLOR_PICKER_FALLBACK)\r\n    const { formItem, useDisabled } = useFormItem()\r\n    const disabled = useDisabled(computed(() => cfg.value.disabled))\r\n    const visible = ref(false)\r\n    const isDragging = ref<'saturation' | 'hue' | 'alpha' | null>(null)\r\n    const saturationRef = ref<HTMLDivElement>()\r\n    const hueRef = ref<HTMLDivElement>()\r\n    const alphaRef = ref<HTMLDivElement>()\r\n    let dragRaf = 0\r\n    let pendingPointer: PointerEvent | null = null\r\n    let activePointerId: number | null = null\r\n    let dragTarget: HTMLElement | null = null\r\n    let prevUserSelect = ''\r\n    let prevBodyCursor = ''\r\n\r\n    const colorPlaceholder = computed(\r\n      () => cfg.value.placeholder || t('color.placeholder'),\r\n    )\r\n\r\n    const rgba = ref<RgbaColor>(parseColor(props.modelValue))\r\n    const hsva = ref<HsvaColor>(rgbaToHsva(rgba.value))\r\n    /** format=auto 时记录检测到的格式 */\r\n    const detectedFormat = ref<ResolvedColorFormat>(\r\n      detectColorFormat(props.modelValue),\r\n    )\r\n\r\n    function toOutputString(color: RgbaColor = rgba.value): string {\r\n      return formatColor(color, cfg.value.format, {\r\n        source: props.modelValue,\r\n        detected: detectedFormat.value,\r\n      })\r\n    }\r\n\r\n    /** 从 RGB 同步 HSVA 时保留无彩色的色相，避免面板跳回红 */\r\n    function syncHsvaFromRgba(color: RgbaColor) {\r\n      hsva.value = rgbaToHsva(color, hsva.value.h)\r\n    }\r\n\r\n    // 预览用 CSS 颜色（始终 rgba/hex 可渲染）\r\n    const previewCss = computed(() => rgbaToRgbaString(rgba.value, true))\r\n\r\n    const displayValue = computed(() => toOutputString())\r\n\r\n    watch(\r\n      () => props.modelValue,\r\n      (newVal) => {\r\n        // 拖拽中由指针直接写 hsva，忽略外部回写，防止灰/黑把 h 打成 0\r\n        if (isDragging.value) return\r\n        const next = parseColor(newVal)\r\n        if (isSameRgba(next, rgba.value)) return\r\n        rgba.value = next\r\n        syncHsvaFromRgba(next)\r\n        if (cfg.value.format === 'auto') {\r\n          detectedFormat.value = detectColorFormat(newVal)\r\n        }\r\n      },\r\n    )\r\n\r\n    watch(\r\n      () => cfg.value.format,\r\n      (fmt) => {\r\n        if (fmt === 'auto') {\r\n          detectedFormat.value = detectColorFormat(props.modelValue)\r\n        }\r\n      },\r\n    )\r\n\r\n    const saturationBg = computed(() => {\r\n      const tempRgba = hsvaToRgba({ ...hsva.value, s: 100, v: 100, a: 1 })\r\n      return `rgb(${tempRgba.r}, ${tempRgba.g}, ${tempRgba.b})`\r\n    })\r\n\r\n    const saturationPosition = computed(() => ({\r\n      x: `${hsva.value.s}%`,\r\n      y: `${100 - hsva.value.v}%`,\r\n    }))\r\n\r\n    const huePosition = computed(() => `${(hsva.value.h / 360) * 100}%`)\r\n\r\n    const alphaGradient = computed(() => {\r\n      const hex = rgbaToHex({ ...rgba.value, a: 1 }, false)\r\n      return `linear-gradient(to right, transparent, ${hex})`\r\n    })\r\n\r\n    const alphaPosition = computed(() => `${rgba.value.a * 100}%`)\r\n\r\n    const handleColor = computed(() => {\r\n      return isDarkColor(rgba.value) ? '#ffffff' : '#000000'\r\n    })\r\n\r\n    function emitColorChange() {\r\n      const colorString = toOutputString()\r\n      if (colorString === props.modelValue) return\r\n      emit('update:modelValue', colorString)\r\n      emit('change', colorString)\r\n      formItem?.validate('change')\r\n    }\r\n\r\n    function applySaturation(e: PointerEvent | MouseEvent) {\r\n      if (!saturationRef.value) return\r\n      const rect = saturationRef.value.getBoundingClientRect()\r\n      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))\r\n      const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height))\r\n      // 面板为 HSV：x→S，y→V（自上而下变暗）\r\n      const next = {\r\n        ...hsva.value,\r\n        s: Math.round(x * 100),\r\n        v: Math.round((1 - y) * 100),\r\n      }\r\n      hsva.value = next\r\n      rgba.value = hsvaToRgba(next)\r\n      if (!props.commitOnEnd) emitColorChange()\r\n    }\r\n\r\n    function applyHue(e: PointerEvent | MouseEvent) {\r\n      if (!hueRef.value) return\r\n      const rect = hueRef.value.getBoundingClientRect()\r\n      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))\r\n      const next = { ...hsva.value, h: Math.round(x * 360) }\r\n      hsva.value = next\r\n      rgba.value = hsvaToRgba(next)\r\n      if (!props.commitOnEnd) emitColorChange()\r\n    }\r\n\r\n    function applyAlpha(e: PointerEvent | MouseEvent) {\r\n      if (!alphaRef.value) return\r\n      const rect = alphaRef.value.getBoundingClientRect()\r\n      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))\r\n      const a = Math.round(x * 100) / 100\r\n      rgba.value = { ...rgba.value, a }\r\n      hsva.value = { ...hsva.value, a }\r\n      if (!props.commitOnEnd) emitColorChange()\r\n    }\r\n\r\n    function flushPendingPointer() {\r\n      dragRaf = 0\r\n      const e = pendingPointer\r\n      pendingPointer = null\r\n      if (!e || !isDragging.value) return\r\n      if (isDragging.value === 'saturation') applySaturation(e)\r\n      else if (isDragging.value === 'hue') applyHue(e)\r\n      else if (isDragging.value === 'alpha') applyAlpha(e)\r\n    }\r\n\r\n    function schedulePointer(e: PointerEvent) {\r\n      pendingPointer = e\r\n      if (dragRaf) return\r\n      dragRaf = requestAnimationFrame(flushPendingPointer)\r\n    }\r\n\r\n    function onPointerMove(e: PointerEvent) {\r\n      if (!isDragging.value) return\r\n      if (activePointerId != null && e.pointerId !== activePointerId) return\r\n      e.preventDefault()\r\n      schedulePointer(e)\r\n    }\r\n\r\n    function endDrag() {\r\n      const wasDragging = isDragging.value\r\n      if (dragRaf) {\r\n        cancelAnimationFrame(dragRaf)\r\n        dragRaf = 0\r\n      }\r\n      if (pendingPointer && isDragging.value) {\r\n        flushPendingPointer()\r\n      }\r\n      if (dragTarget && activePointerId != null) {\r\n        try {\r\n          dragTarget.releasePointerCapture(activePointerId)\r\n        } catch {\r\n          /* already released */\r\n        }\r\n      }\r\n      dragTarget = null\r\n      activePointerId = null\r\n      isDragging.value = null\r\n      document.body.style.userSelect = prevUserSelect\r\n      document.body.style.cursor = prevBodyCursor\r\n      document.removeEventListener('pointermove', onPointerMove)\r\n      document.removeEventListener('pointerup', endDrag)\r\n      document.removeEventListener('pointercancel', endDrag)\r\n      // 松手后再抛，避免拖动中父级写 :root 等重副作用\r\n      if (wasDragging && props.commitOnEnd) emitColorChange()\r\n    }\r\n\r\n    function startDrag(\r\n      type: 'saturation' | 'hue' | 'alpha',\r\n      e: PointerEvent,\r\n      apply: (ev: PointerEvent | MouseEvent) => void,\r\n    ) {\r\n      if (disabled.value) return\r\n      e.preventDefault()\r\n      e.stopPropagation()\r\n      // 清掉拖拽过程中可能产生的文字选区\r\n      window.getSelection()?.removeAllRanges()\r\n      isDragging.value = type\r\n      activePointerId = e.pointerId\r\n      dragTarget = e.currentTarget as HTMLElement\r\n      try {\r\n        dragTarget.setPointerCapture(e.pointerId)\r\n      } catch {\r\n        /* ignore */\r\n      }\r\n      prevUserSelect = document.body.style.userSelect\r\n      prevBodyCursor = document.body.style.cursor\r\n      document.body.style.userSelect = 'none'\r\n      document.body.style.cursor =\r\n        type === 'saturation' ? 'crosshair' : 'pointer'\r\n      apply(e)\r\n      document.addEventListener('pointermove', onPointerMove, {\r\n        passive: false,\r\n      })\r\n      document.addEventListener('pointerup', endDrag)\r\n      document.addEventListener('pointercancel', endDrag)\r\n    }\r\n\r\n    function handleSaturationPointerDown(e: PointerEvent) {\r\n      startDrag('saturation', e, applySaturation)\r\n    }\r\n    function handleHuePointerDown(e: PointerEvent) {\r\n      startDrag('hue', e, applyHue)\r\n    }\r\n    function handleAlphaPointerDown(e: PointerEvent) {\r\n      startDrag('alpha', e, applyAlpha)\r\n    }\r\n\r\n    onBeforeUnmount(() => {\r\n      endDrag()\r\n    })\r\n\r\n    function handleInputChange(e: Event) {\r\n      const input = e.target as HTMLInputElement\r\n      const raw = input.value.trim()\r\n      if (!raw) return\r\n      const newRgba = parseColor(raw)\r\n      rgba.value = newRgba\r\n      syncHsvaFromRgba(newRgba)\r\n      if (cfg.value.format === 'auto') {\r\n        detectedFormat.value = detectColorFormat(raw)\r\n      }\r\n      emitColorChange()\r\n    }\r\n\r\n    function handleRgbaChange(channel: keyof RgbaColor, value: string) {\r\n      const numValue = parseInt(value, 10)\r\n      if (isNaN(numValue)) return\r\n      rgba.value[channel] =\r\n        channel === 'a'\r\n          ? Math.max(0, Math.min(1, numValue / 100))\r\n          : Math.max(0, Math.min(255, numValue))\r\n      syncHsvaFromRgba(rgba.value)\r\n      emitColorChange()\r\n    }\r\n\r\n    return () => {\r\n      const sizeVars = toCssVarsStyle({\r\n        ...propSizeToCssVars('color-picker', props.size),\r\n        ...propColorToCssVars('color-picker', props.color),\r\n        // Teleport 面板：桥到 Layer 三级，避免被 .w-layer-content 的 --__* 盖掉\r\n        '--w-prop-layer-bg-color': effectiveBgVar('color-picker'),\r\n        '--w-prop-layer-text-color': effectiveTextVar('color-picker'),\r\n        ...props.cssVars,\r\n      })\r\n      const rootStyle = mergeStyle(\r\n        sizeVars,\r\n        attrs.style as CSSProperties | undefined,\r\n      )\r\n      const layerGap =\r\n        props.size != null\r\n          ? Math.max(4, Math.round(props.size * 0.25))\r\n          : undefined\r\n\r\n      return (\r\n        <Layer\r\n          show={visible.value}\r\n          nearby={props.nearby}\r\n          disabled={disabled.value}\r\n          placement=\"bottom-start\"\r\n          gap={layerGap}\r\n          hasArrow={false}\r\n          transitionName=\"w-slide-y\"\r\n          immediate={true}\r\n          layerClass=\"w-color-picker-layer\"\r\n          layerStyle={sizeVars}\r\n          onUpdate:show={(b: boolean) => {\r\n            visible.value = b\r\n          }}>\r\n          {{\r\n            trigger: () => (\r\n              <div\r\n                class={[\r\n                  'w-color-picker',\r\n                  { 'w-color-picker-block': cfg.value.block },\r\n                ]}\r\n                style={rootStyle}>\r\n                <div class=\"w-color-picker-trigger\">\r\n                  <div class=\"w-color-picker-preview\">\r\n                    <div class=\"w-color-picker-preview-bg\" />\r\n                    <div\r\n                      class=\"w-color-picker-preview-color\"\r\n                      style={{ backgroundColor: previewCss.value }}\r\n                    />\r\n                  </div>\r\n                </div>\r\n                {cfg.value.showInput && (\r\n                  <div class=\"w-color-picker-input-wrapper\">\r\n                    <input\r\n                      type=\"text\"\r\n                      class=\"w-color-picker-input\"\r\n                      value={displayValue.value}\r\n                      placeholder={colorPlaceholder.value}\r\n                      disabled={disabled.value}\r\n                      onChange={handleInputChange}\r\n                    />\r\n                  </div>\r\n                )}\r\n              </div>\r\n            ),\r\n            default: () => (\r\n              <div class=\"w-color-picker-panel\">\r\n                <div\r\n                  ref={saturationRef}\r\n                  class=\"w-color-picker-saturation\"\r\n                  style={{ backgroundColor: saturationBg.value }}\r\n                  onPointerdown={handleSaturationPointerDown}>\r\n                  <div class=\"w-color-picker-saturation-white\" />\r\n                  <div class=\"w-color-picker-saturation-black\" />\r\n                  <div\r\n                    class=\"w-color-picker-saturation-handle\"\r\n                    style={{\r\n                      left: saturationPosition.value.x,\r\n                      top: saturationPosition.value.y,\r\n                      backgroundColor: handleColor.value,\r\n                    }}\r\n                  />\r\n                </div>\r\n\r\n                <div\r\n                  ref={hueRef}\r\n                  class=\"w-color-picker-hue\"\r\n                  onPointerdown={handleHuePointerDown}>\r\n                  <div class=\"w-color-picker-hue-gradient\" />\r\n                  <div\r\n                    class=\"w-color-picker-hue-handle\"\r\n                    style={{ left: huePosition.value }}\r\n                  />\r\n                </div>\r\n\r\n                {cfg.value.showAlpha && (\r\n                  <div\r\n                    ref={alphaRef}\r\n                    class=\"w-color-picker-alpha\"\r\n                    onPointerdown={handleAlphaPointerDown}>\r\n                    <div class=\"w-color-picker-alpha-bg\" />\r\n                    <div\r\n                      class=\"w-color-picker-alpha-gradient\"\r\n                      style={{ background: alphaGradient.value }}\r\n                    />\r\n                    <div\r\n                      class=\"w-color-picker-alpha-handle\"\r\n                      style={{ left: alphaPosition.value }}\r\n                    />\r\n                  </div>\r\n                )}\r\n\r\n                <div class=\"w-color-picker-preview-row\">\r\n                  <div class=\"w-color-picker-preview-square\">\r\n                    <div class=\"w-color-picker-preview-square-bg\" />\r\n                    <div\r\n                      class=\"w-color-picker-preview-square-color\"\r\n                      style={{ backgroundColor: previewCss.value }}\r\n                    />\r\n                  </div>\r\n                  <div class=\"w-color-picker-values\">\r\n                    <div class=\"w-color-picker-value\">\r\n                      <span class=\"w-color-picker-value-label\">R</span>\r\n                      <input\r\n                        type=\"number\"\r\n                        class=\"w-color-picker-value-input\"\r\n                        value={rgba.value.r}\r\n                        min={0}\r\n                        max={255}\r\n                        disabled={disabled.value}\r\n                        onInput={(e: Event) =>\r\n                          handleRgbaChange(\r\n                            'r',\r\n                            (e.target as HTMLInputElement).value,\r\n                          )\r\n                        }\r\n                      />\r\n                    </div>\r\n                    <div class=\"w-color-picker-value\">\r\n                      <span class=\"w-color-picker-value-label\">G</span>\r\n                      <input\r\n                        type=\"number\"\r\n                        class=\"w-color-picker-value-input\"\r\n                        value={rgba.value.g}\r\n                        min={0}\r\n                        max={255}\r\n                        disabled={disabled.value}\r\n                        onInput={(e: Event) =>\r\n                          handleRgbaChange(\r\n                            'g',\r\n                            (e.target as HTMLInputElement).value,\r\n                          )\r\n                        }\r\n                      />\r\n                    </div>\r\n                    <div class=\"w-color-picker-value\">\r\n                      <span class=\"w-color-picker-value-label\">B</span>\r\n                      <input\r\n                        type=\"number\"\r\n                        class=\"w-color-picker-value-input\"\r\n                        value={rgba.value.b}\r\n                        min={0}\r\n                        max={255}\r\n                        disabled={disabled.value}\r\n                        onInput={(e: Event) =>\r\n                          handleRgbaChange(\r\n                            'b',\r\n                            (e.target as HTMLInputElement).value,\r\n                          )\r\n                        }\r\n                      />\r\n                    </div>\r\n                    {cfg.value.showAlpha && (\r\n                      <div class=\"w-color-picker-value\">\r\n                        <span class=\"w-color-picker-value-label\">A</span>\r\n                        <input\r\n                          type=\"number\"\r\n                          class=\"w-color-picker-value-input\"\r\n                          value={Math.round(rgba.value.a * 100)}\r\n                          min={0}\r\n                          max={100}\r\n                          disabled={disabled.value}\r\n                          onInput={(e: Event) =>\r\n                            handleRgbaChange(\r\n                              'a',\r\n                              (e.target as HTMLInputElement).value,\r\n                            )\r\n                          }\r\n                        />\r\n                      </div>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            ),\r\n          }}\r\n        </Layer>\r\n      )\r\n    }\r\n  },\r\n})\r\n"],"mappings":"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"}

package/dist/components/colorPicker/config.d.ts

@@ -0,0 +1,24 @@
+import { ColorFormat } from '../../util/colors';
+/**
+ * 可通过 `app.use(UI, { components: { ColorPicker: {...} } })` 配置的项。
+ * Boolean / 可全局覆盖的字段请在 props 设 `default: undefined`。
+ *
+ * 不宜全局配置：modelValue（实例数据 / 受控）。
+ */
+export type ColorPickerGlobalConfig = Partial<{
+    format: ColorFormat;
+    showInput: boolean;
+    showAlpha: boolean;
+    disabled: boolean;
+    block: boolean;
+    placeholder: string;
+}>;
+/** 未传 props、也未配全局时的默认值 */
+export declare const COLOR_PICKER_FALLBACK: {
+    format: ColorFormat;
+    showInput: boolean;
+    showAlpha: boolean;
+    disabled: boolean;
+    block: boolean;
+    placeholder: string | undefined;
+};

package/dist/components/colorPicker/config.js

@@ -0,0 +1,14 @@
+//#region components/colorPicker/config.ts
+/** 未传 props、也未配全局时的默认值 */
+var COLOR_PICKER_FALLBACK = {
+	format: "hex",
+	showInput: true,
+	showAlpha: true,
+	disabled: false,
+	block: false,
+	placeholder: void 0
+};
+//#endregion
+export { COLOR_PICKER_FALLBACK };
+
+//# sourceMappingURL=config.js.map

package/dist/components/colorPicker/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","names":[],"sources":["../../../components/colorPicker/config.ts"],"sourcesContent":["import type { ColorFormat } from '../../util/colors'\r\n\r\n/**\r\n * 可通过 `app.use(UI, { components: { ColorPicker: {...} } })` 配置的项。\r\n * Boolean / 可全局覆盖的字段请在 props 设 `default: undefined`。\r\n *\r\n * 不宜全局配置：modelValue（实例数据 / 受控）。\r\n */\r\nexport type ColorPickerGlobalConfig = Partial<{\r\n  format: ColorFormat\r\n  showInput: boolean\r\n  showAlpha: boolean\r\n  disabled: boolean\r\n  block: boolean\r\n  placeholder: string\r\n}>\r\n\r\n/** 未传 props、也未配全局时的默认值 */\r\nexport const COLOR_PICKER_FALLBACK = {\r\n  format: 'hex' as ColorFormat,\r\n  showInput: true,\r\n  showAlpha: true,\r\n  disabled: false,\r\n  block: false,\r\n  placeholder: undefined as string | undefined,\r\n}\r\n"],"mappings":";;AAkBA,IAAa,wBAAwB;CACnC,QAAQ;CACR,WAAW;CACX,WAAW;CACX,UAAU;CACV,OAAO;CACP,aAAa,KAAA;AACf"}

package/dist/components/colorPicker/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './ColorPicker';
+export type { ColorFormat, ResolvedColorFormat } from './ColorPicker';
+export type { ColorPickerGlobalConfig } from './config';
+export { COLOR_PICKER_FALLBACK } from './config';

package/dist/components/colorPicker/style/index.css

@@ -0,0 +1 @@
+@import '../../../theme/tokens/components/colorPicker.css';

package/dist/components/confirm/index.d.ts

@@ -0,0 +1,73 @@
+import { App, VNodeChild } from 'vue';
+import { CssVars } from '../../util';
+type ConfirmClose = () => void;
+type ConfirmContent = VNodeChild | ((close: ConfirmClose) => VNodeChild);
+export type ConfirmActions = {
+    close: ConfirmClose;
+    confirm: ConfirmClose;
+};
+type ConfirmRegion = VNodeChild | ((actions: ConfirmActions) => VNodeChild);
+/** false / null 表示不渲染该区域 */
+type ConfirmSlot = ConfirmRegion | false | null;
+export interface ConfirmOptions {
+    /** 内容区（与 body 同义；函数可拿到 close） */
+    content?: ConfirmContent;
+    /** 内容区，优先于 content */
+    body?: ConfirmContent;
+    /** 自定义头部；false 则不渲染 header */
+    header?: ConfirmSlot;
+    /** 自定义底部；false 则不渲染默认按钮 */
+    footer?: ConfirmSlot;
+    ok?: () => void;
+    title?: string | VNodeChild;
+    okText?: string;
+    cancelText?: string;
+    cancel?: () => void;
+    danger?: boolean;
+    /** 是否显示面板角上的关闭按钮（不在 header 内） */
+    closable?: boolean;
+    /** 点击遮罩是否关闭 */
+    canCloseByClickMask?: boolean;
+    /** 实例主色 → `--w-prop-confirm-color` */
+    color?: string;
+    /** 实例 CSS 变量 */
+    cssVars?: CssVars;
+}
+/**
+ * 全局默认配置
+ * 可通过 config() 或 app.use(UI, { components: { Confirm: {...} } }) 设置
+ */
+export type ConfirmGlobalConfig = Partial<Omit<ConfirmOptions, 'content' | 'body' | 'header' | 'footer' | 'ok' | 'cancel'>>;
+/**
+ * 运行时设置 Confirm 全局默认值
+ */
+declare function config(options?: ConfirmGlobalConfig): void;
+/**
+ * 打开确认对话框
+ * @returns Promise，resolve 表示确认，reject 表示取消（含点遮罩 / 关闭按钮）
+ */
+declare function open(options?: ConfirmOptions): Promise<boolean>;
+/**
+ * 销毁确认对话框
+ * @param rejectPending 是否将未结束的 Promise 按取消处理，默认 true
+ */
+declare function destroy(rejectPending?: boolean): void;
+export type ConfirmApi = {
+    (options?: ConfirmOptions): Promise<boolean>;
+    open: typeof open;
+    destroy: typeof destroy;
+    config: typeof config;
+};
+/**
+ * Vue 插件安装：挂载 $confirm，并读取 UI 全局 components.Confirm 配置
+ */
+declare function install(app: App): void;
+declare const _default: {
+    install: typeof install;
+    open: typeof open;
+    destroy: typeof destroy;
+    config: typeof config;
+};
+export default _default;
+export { open, destroy, config };
+export type { ConfirmClose, ConfirmContent, ConfirmSlot, ConfirmActions };