antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/color-picker/components/ColorAlphaInput.js

@@ -0,0 +1,49 @@
+import { generateColor, getColorAlpha } from "../util.js";
+import ColorSteppers_default from "./ColorSteppers.js";
+import { computed, createVNode, defineComponent, shallowRef, watch } from "vue";
+
+//#region src/color-picker/components/ColorAlphaInput.tsx
+var ColorAlphaInput_default = /* @__PURE__ */ defineComponent((props) => {
+	const internalValue = shallowRef(generateColor(props.value || "#000"));
+	watch(() => props.value, (val) => {
+		if (val) internalValue.value = val;
+	});
+	const alphaValue = computed(() => props.value ?? internalValue.value);
+	const handleAlphaChange = (step) => {
+		const hsba = alphaValue.value.toHsb();
+		hsba.a = (step || 0) / 100;
+		const genColor = generateColor(hsba);
+		internalValue.value = genColor;
+		props.onChange?.(genColor);
+	};
+	return () => {
+		const { prefixCls } = props;
+		return createVNode(ColorSteppers_default, {
+			"value": getColorAlpha(alphaValue.value),
+			"prefixCls": prefixCls,
+			"formatter": (step) => `${step}%`,
+			"className": `${prefixCls}-alpha-input`,
+			"onChange": handleAlphaChange
+		}, null);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		value: {
+			type: Object,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "ColorAlphaInput",
+	inheritAttrs: false
+});
+
+//#endregion
+export { ColorAlphaInput_default as default };

package/dist/color-picker/components/ColorClear.js

@@ -0,0 +1,42 @@
+import { generateColor } from "../util.js";
+import { createVNode, defineComponent } from "vue";
+
+//#region src/color-picker/components/ColorClear.tsx
+var ColorClear_default = /* @__PURE__ */ defineComponent((props) => {
+	const handleClick = () => {
+		if (props.disabled || !props.onChange || !props.value || props.value.cleared) return;
+		const hsba = props.value.toHsb();
+		hsba.a = 0;
+		const genColor = generateColor(hsba);
+		genColor.cleared = true;
+		props.onChange(genColor);
+	};
+	return () => createVNode("div", {
+		"class": `${props.prefixCls}-clear`,
+		"onClick": handleClick
+	}, null);
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		value: {
+			type: Object,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "ColorClear",
+	inheritAttrs: false
+});
+
+//#endregion
+export { ColorClear_default as default };

package/dist/color-picker/components/ColorHexInput.js

@@ -0,0 +1,46 @@
+import { toHexFormat } from "../color.js";
+import { generateColor } from "../util.js";
+import Input_default from "../../input/Input.js";
+import { createVNode, defineComponent, shallowRef, watch } from "vue";
+
+//#region src/color-picker/components/ColorHexInput.tsx
+const hexReg = /(^#[\da-f]{6}$)|(^#[\da-f]{8}$)/i;
+const isHexString = (hex) => hexReg.test(`#${hex}`);
+var ColorHexInput_default = /* @__PURE__ */ defineComponent((props) => {
+	const hexValue = shallowRef();
+	watch(() => props.value, (val) => {
+		if (val) hexValue.value = toHexFormat(val.toHexString());
+	}, { immediate: true });
+	const handleHexChange = (e) => {
+		const originValue = e.target.value;
+		hexValue.value = toHexFormat(originValue);
+		if (isHexString(toHexFormat(originValue, true))) props.onChange?.(generateColor(originValue));
+	};
+	return () => createVNode(Input_default, {
+		"class": `${props.prefixCls}-hex-input`,
+		"value": hexValue.value,
+		"prefix": "#",
+		"onChange": handleHexChange,
+		"size": "small"
+	}, null);
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		value: {
+			type: Object,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "ColorHexInput",
+	inheritAttrs: false
+});
+
+//#endregion
+export { ColorHexInput_default as default };

package/dist/color-picker/components/ColorHsbInput.js

@@ -0,0 +1,69 @@
+import { generateColor, getRoundNumber } from "../util.js";
+import ColorSteppers_default from "./ColorSteppers.js";
+import { createVNode, defineComponent, shallowRef } from "vue";
+
+//#region src/color-picker/components/ColorHsbInput.tsx
+var ColorHsbInput_default = /* @__PURE__ */ defineComponent((props) => {
+	const internalValue = shallowRef(generateColor(props.value || "#000"));
+	const hsbValue = () => props.value || internalValue.value;
+	const handleHsbChange = (step, type) => {
+		const hsb = hsbValue().toHsb();
+		hsb[type] = type === "h" ? step || 0 : (step || 0) / 100;
+		const genColor = generateColor(hsb);
+		internalValue.value = genColor;
+		props.onChange?.(genColor);
+	};
+	return () => {
+		const prefix = props.prefixCls;
+		const hsb = hsbValue().toHsb();
+		return createVNode("div", { "class": `${prefix}-hsb-input` }, [
+			createVNode(ColorSteppers_default, {
+				"max": 360,
+				"min": 0,
+				"value": Number(hsb.h),
+				"prefixCls": prefix,
+				"className": `${prefix}-hsb-input`,
+				"formatter": (step) => getRoundNumber(step || 0).toString(),
+				"onChange": (step) => handleHsbChange(Number(step), "h")
+			}, null),
+			createVNode(ColorSteppers_default, {
+				"max": 100,
+				"min": 0,
+				"value": Number(hsb.s) * 100,
+				"prefixCls": prefix,
+				"className": `${prefix}-hsb-input`,
+				"formatter": (step) => `${getRoundNumber(step || 0)}%`,
+				"onChange": (step) => handleHsbChange(Number(step), "s")
+			}, null),
+			createVNode(ColorSteppers_default, {
+				"max": 100,
+				"min": 0,
+				"value": Number(hsb.b) * 100,
+				"prefixCls": prefix,
+				"className": `${prefix}-hsb-input`,
+				"formatter": (step) => `${getRoundNumber(step || 0)}%`,
+				"onChange": (step) => handleHsbChange(Number(step), "b")
+			}, null)
+		]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		value: {
+			type: Object,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "ColorHsbInput",
+	inheritAttrs: false
+});
+
+//#endregion
+export { ColorHsbInput_default as default };

package/dist/color-picker/components/ColorInput.js

@@ -0,0 +1,94 @@
+import select_default from "../../select/index.js";
+import { FORMAT_HEX, FORMAT_HSB, FORMAT_RGB } from "../interface.js";
+import ColorAlphaInput_default from "./ColorAlphaInput.js";
+import ColorHexInput_default from "./ColorHexInput.js";
+import ColorHsbInput_default from "./ColorHsbInput.js";
+import ColorRgbInput_default from "./ColorRgbInput.js";
+import { computed, createVNode, defineComponent, shallowRef, watch } from "vue";
+
+//#region src/color-picker/components/ColorInput.tsx
+const selectOptions = [
+	FORMAT_HEX,
+	FORMAT_HSB,
+	FORMAT_RGB
+].map((format) => ({
+	value: format,
+	label: format.toUpperCase()
+}));
+var ColorInput_default = /* @__PURE__ */ defineComponent((props) => {
+	const colorFormat = shallowRef(props.format ?? FORMAT_HEX);
+	watch(() => props.format, (val) => {
+		if (val) colorFormat.value = val;
+	});
+	const triggerFormatChange = (fmt) => {
+		colorFormat.value = fmt;
+		props.onFormatChange?.(fmt);
+	};
+	const steppersNode = computed(() => {
+		const inputProps = {
+			value: props.value,
+			prefixCls: props.prefixCls,
+			onChange: props.onChange
+		};
+		switch (colorFormat.value) {
+			case FORMAT_HSB: return createVNode(ColorHsbInput_default, inputProps, null);
+			case FORMAT_RGB: return createVNode(ColorRgbInput_default, inputProps, null);
+			default: return createVNode(ColorHexInput_default, inputProps, null);
+		}
+	});
+	return () => {
+		const prefixCls = props.prefixCls;
+		return createVNode("div", { "class": `${prefixCls}-input-container` }, [
+			!props.disabledFormat && createVNode(select_default, {
+				"value": colorFormat.value,
+				"variant": "borderless",
+				"getPopupContainer": (current) => current,
+				"popupMatchSelectWidth": 68,
+				"placement": "bottomRight",
+				"onChange": triggerFormatChange,
+				"class": `${prefixCls}-format-select`,
+				"size": "small",
+				"options": selectOptions
+			}, null),
+			createVNode("div", { "class": `${prefixCls}-input` }, [steppersNode.value]),
+			!props.disabledAlpha && createVNode(ColorAlphaInput_default, {
+				"prefixCls": prefixCls,
+				"value": props.value,
+				"onChange": props.onChange
+			}, null)
+		]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		format: { required: false },
+		onFormatChange: {
+			type: Function,
+			required: false
+		},
+		disabledAlpha: {
+			type: Boolean,
+			required: false
+		},
+		value: {
+			type: Object,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		},
+		disabledFormat: {
+			type: Boolean,
+			required: false
+		}
+	},
+	name: "ColorInput",
+	inheritAttrs: false
+});
+
+//#endregion
+export { ColorInput_default as default };

package/dist/color-picker/components/ColorPresets.js

@@ -0,0 +1,84 @@
+import useToken from "../../theme/useToken.js";
+import "../../theme/internal.js";
+import { generateColor } from "../util.js";
+import useLocale_default from "../../locale/useLocale.js";
+import collapse_default from "../../collapse/index.js";
+import { computed, createVNode, defineComponent, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import { Color, ColorBlock } from "@v-c/color-picker";
+
+//#region src/color-picker/components/ColorPresets.tsx
+function isBright(value, bgColorToken) {
+	const { r, g, b, a } = value.toRgb();
+	const hsv = new Color(value.toRgbString()).onBackground(bgColorToken).toHsv();
+	if (a <= .5) return hsv.v > .5;
+	return r * .299 + g * .587 + b * .114 > 192;
+}
+function genPresetColor(list) {
+	return list.map((value) => {
+		value.colors = value.colors.map(generateColor);
+		return value;
+	});
+}
+function genCollapsePanelKey(preset, index) {
+	return `panel-${preset.key ?? index}`;
+}
+var ColorPresets_default = /* @__PURE__ */ defineComponent((props) => {
+	const [locale] = useLocale_default("ColorPicker");
+	const [, token] = useToken();
+	const colorPresetsPrefixCls = computed(() => `${props.prefixCls}-presets`);
+	const presetsValue = computed(() => genPresetColor(props.presets));
+	const activeKeys = computed(() => presetsValue.value.reduce((acc, preset, index) => {
+		const { defaultOpen = true } = preset;
+		if (defaultOpen) acc.push(genCollapsePanelKey(preset, index));
+		return acc;
+	}, []));
+	const handleClick = (colorValue) => {
+		props.onChange?.(colorValue);
+	};
+	const items = computed(() => presetsValue.value.map((preset, index) => ({
+		key: genCollapsePanelKey(preset, index),
+		label: createVNode("div", { "class": `${colorPresetsPrefixCls.value}-label` }, [preset?.label]),
+		content: createVNode("div", { "class": `${colorPresetsPrefixCls.value}-items` }, [Array.isArray(preset?.colors) && preset.colors?.length > 0 ? preset.colors.map((presetColor, idx) => {
+			const colorInst = generateColor(presetColor);
+			return createVNode(ColorBlock, mergeProps({
+				"key": `preset-${idx}-${presetColor.toHexString?.() ?? idx}`,
+				"color": colorInst.toCssString(),
+				"prefixCls": props.prefixCls,
+				"class": clsx(`${colorPresetsPrefixCls.value}-color`, {
+					[`${colorPresetsPrefixCls.value}-color-checked`]: presetColor.toCssString() === props.value?.toCssString(),
+					[`${colorPresetsPrefixCls.value}-color-bright`]: isBright(presetColor, token.value.colorBgElevated)
+				})
+			}, { onClick: () => handleClick(colorInst) }), null);
+		}) : createVNode("span", { "class": `${colorPresetsPrefixCls.value}-empty` }, [locale?.value?.presetEmpty])])
+	})));
+	return () => createVNode("div", { "class": colorPresetsPrefixCls.value }, [createVNode(collapse_default, {
+		"defaultActiveKey": activeKeys.value,
+		"ghost": true,
+		"items": items.value
+	}, null)]);
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		presets: {
+			type: Array,
+			required: true
+		},
+		value: {
+			type: Object,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "ColorPresets",
+	inheritAttrs: false
+});
+
+//#endregion
+export { ColorPresets_default as default, isBright };

package/dist/color-picker/components/ColorRgbInput.js

@@ -0,0 +1,66 @@
+import { generateColor } from "../util.js";
+import ColorSteppers_default from "./ColorSteppers.js";
+import { createVNode, defineComponent, shallowRef } from "vue";
+
+//#region src/color-picker/components/ColorRgbInput.tsx
+var ColorRgbInput_default = /* @__PURE__ */ defineComponent((props) => {
+	const internalValue = shallowRef(generateColor(props.value || "#000"));
+	const rgbValue = () => props.value || internalValue.value;
+	const handleRgbChange = (step, type) => {
+		const rgb = rgbValue().toRgb();
+		rgb[type] = step || 0;
+		const genColor = generateColor(rgb);
+		internalValue.value = genColor;
+		props.onChange?.(genColor);
+	};
+	return () => {
+		const prefix = props.prefixCls;
+		const rgb = rgbValue().toRgb();
+		return createVNode("div", { "class": `${prefix}-rgb-input` }, [
+			createVNode(ColorSteppers_default, {
+				"max": 255,
+				"min": 0,
+				"value": Number(rgb.r),
+				"prefixCls": prefix,
+				"className": `${prefix}-rgb-input`,
+				"onChange": (step) => handleRgbChange(Number(step), "r")
+			}, null),
+			createVNode(ColorSteppers_default, {
+				"max": 255,
+				"min": 0,
+				"value": Number(rgb.g),
+				"prefixCls": prefix,
+				"className": `${prefix}-rgb-input`,
+				"onChange": (step) => handleRgbChange(Number(step), "g")
+			}, null),
+			createVNode(ColorSteppers_default, {
+				"max": 255,
+				"min": 0,
+				"value": Number(rgb.b),
+				"prefixCls": prefix,
+				"className": `${prefix}-rgb-input`,
+				"onChange": (step) => handleRgbChange(Number(step), "b")
+			}, null)
+		]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		value: {
+			type: Object,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "ColorRgbInput",
+	inheritAttrs: false
+});
+
+//#endregion
+export { ColorRgbInput_default as default };

package/dist/color-picker/components/ColorSlider.js

@@ -0,0 +1,194 @@
+import { getGradientPercentColor } from "../util.js";
+import { useSliderInternalContextProvider } from "../../slider/Context.js";
+import slider_default from "../../slider/index.js";
+import { cloneVNode, computed, createVNode, defineComponent, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import { omit } from "es-toolkit";
+import { UnstableProvider } from "@v-c/slider";
+
+//#region src/color-picker/components/ColorSlider.tsx
+const GradientColorSlider = /* @__PURE__ */ defineComponent((props) => {
+	const linearCss = computed(() => {
+		return `linear-gradient(90deg, ${props.colors.map((c) => `${c.color} ${c.percent}%`).join(", ")})`;
+	});
+	const pointColor = computed(() => {
+		if (!props.color || !props.type) return null;
+		if (props.type === "alpha") return props.color.toRgbString();
+		if (props.type === "gradient") return null;
+		return `hsl(${props.color.toHsb().h}, 100%, 50%)`;
+	});
+	const handleRender = ({ node, index, value }) => {
+		const nodeProps = node?.props || {};
+		const mergedStyle = { ...nodeProps.style };
+		if (props.type === "gradient") mergedStyle.background = getGradientPercentColor(props.colors, value);
+		return cloneVNode(node, {
+			...nodeProps,
+			style: mergedStyle,
+			class: clsx(nodeProps.class, { [`${props.prefixCls}-slider-handle-active`]: props.activeIndex === index }),
+			onFocus: (e) => {
+				props.onActive?.(index);
+				nodeProps.onFocus?.(e);
+			},
+			onKeydown: (e) => {
+				if ((e.key === "Delete" || e.key === "Backspace") && props.onKeyDelete) props.onKeyDelete(index);
+				nodeProps.onKeydown?.(e);
+			}
+		});
+	};
+	useSliderInternalContextProvider({ handleRender });
+	return () => {
+		const { prefixCls, range = false, className, onDragStart, onDragChange, value, onChange, onChangeComplete,...restProps } = props;
+		const { activeIndex: _activeIndex, onActive: _onActive, onKeyDelete: _onKeyDelete, colors: _colors, color: _color, type: _type,...sliderRestProps } = restProps;
+		return createVNode(UnstableProvider, { "value": {
+			onDragStart,
+			onDragChange
+		} }, { default: () => [createVNode(slider_default, mergeProps(sliderRestProps, {
+			"class": clsx(className, `${prefixCls}-slider`),
+			"tooltip": { open: false },
+			"range": range ? {
+				editable: true,
+				minCount: 2
+			} : false,
+			"track": false,
+			"styles": {
+				rail: { background: linearCss.value },
+				handle: pointColor.value ? { background: pointColor.value } : {}
+			},
+			"classes": {
+				rail: `${prefixCls}-slider-rail`,
+				handle: `${prefixCls}-slider-handle`
+			},
+			"value": value,
+			"onChange": (v) => onChange?.(Array.isArray(v) ? v : [v]),
+			"onChangeComplete": (v) => onChangeComplete(Array.isArray(v) ? v : [v])
+		}), null)] });
+	};
+}, {
+	props: {
+		value: {
+			type: Array,
+			required: true
+		},
+		onChange: {
+			type: Function,
+			required: false
+		},
+		onChangeComplete: {
+			type: Function,
+			required: true
+		},
+		range: {
+			type: Boolean,
+			required: false
+		},
+		className: {
+			type: String,
+			required: false
+		},
+		activeIndex: {
+			type: Number,
+			required: false
+		},
+		onActive: {
+			type: Function,
+			required: false
+		},
+		type: { required: true },
+		onDragStart: {
+			type: Function,
+			required: false
+		},
+		onDragChange: {
+			type: Function,
+			required: false
+		},
+		onKeyDelete: {
+			type: Function,
+			required: false
+		},
+		color: { required: true },
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		colors: {
+			type: Array,
+			required: true
+		},
+		min: {
+			type: Number,
+			required: true
+		},
+		max: {
+			type: Number,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: true
+		}
+	},
+	name: "GradientColorSlider",
+	inheritAttrs: false
+});
+const SingleColorSlider = /* @__PURE__ */ defineComponent((props) => {
+	const onChange = (v) => props.onChange?.(v[0]);
+	const onChangeComplete = (v) => props.onChangeComplete?.(v[0]);
+	return () => {
+		const { value,...restProps } = props;
+		return createVNode(GradientColorSlider, mergeProps(omit(restProps, ["onChange", "onChangeComplete"]), {
+			"value": [value],
+			"onChange": onChange,
+			"onChangeComplete": onChangeComplete
+		}), null);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		colors: {
+			type: Array,
+			required: true
+		},
+		min: {
+			type: Number,
+			required: true
+		},
+		max: {
+			type: Number,
+			required: true
+		},
+		value: {
+			type: Number,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: true
+		},
+		onChange: {
+			type: Function,
+			required: true
+		},
+		onChangeComplete: {
+			type: Function,
+			required: true
+		},
+		type: {
+			type: String,
+			required: true
+		},
+		color: {
+			type: Object,
+			required: true
+		}
+	},
+	name: "ColorSlider",
+	inheritAttrs: false
+});
+var ColorSlider_default = SingleColorSlider;
+
+//#endregion
+export { GradientColorSlider, ColorSlider_default as default };