antdv-next 0.0.111 → 1.0.0-alpha.1

package/dist/color-picker/style/color-block.js

@@ -0,0 +1,35 @@
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/color-picker/style/color-block.ts
+/**
+* @private Internal usage only
+* see: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient#checkerboard
+*/
+function getTransBg(size, colorFill) {
+	return {
+		backgroundImage: `conic-gradient(${colorFill} 25%, transparent 25% 50%, ${colorFill} 50% 75%, transparent 75% 100%)`,
+		backgroundSize: `${size} ${size}`
+	};
+}
+function genColorBlockStyle(token, size) {
+	const { componentCls, borderRadiusSM, colorPickerInsetShadow, lineWidth, colorFillSecondary } = token;
+	return { [`${componentCls}-color-block`]: {
+		position: "relative",
+		borderRadius: borderRadiusSM,
+		width: size,
+		height: size,
+		boxShadow: colorPickerInsetShadow,
+		flex: "none",
+		...getTransBg("50%", token.colorFillSecondary),
+		[`${componentCls}-color-block-inner`]: {
+			width: "100%",
+			height: "100%",
+			boxShadow: `inset 0 0 0 ${unit(lineWidth)} ${colorFillSecondary}`,
+			borderRadius: "inherit"
+		}
+	} };
+}
+var color_block_default = genColorBlockStyle;
+
+//#endregion
+export { color_block_default as default, getTransBg };

package/dist/color-picker/style/index.d.ts

@@ -0,0 +1,7 @@
+import "../../theme/internal.js";
+import "vue";
+
+//#region src/color-picker/style/index.d.ts
+interface ComponentToken {}
+//#endregion
+export { ComponentToken };

package/dist/color-picker/style/index.js

@@ -0,0 +1,175 @@
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { genCompactItemStyle } from "../../style/compact-item.js";
+import color_block_default from "./color-block.js";
+import input_default from "./input.js";
+import picker_default from "./picker.js";
+import presets_default from "./presets.js";
+import slider_default from "./slider.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/color-picker/style/index.ts
+function genActiveStyle(token, borderColor, outlineColor) {
+	return {
+		borderInlineEndWidth: token.lineWidth,
+		borderColor,
+		boxShadow: `0 0 0 ${unit(token.controlOutlineWidth)} ${outlineColor}`,
+		outline: 0
+	};
+}
+function genRtlStyle(token) {
+	const { componentCls } = token;
+	return { "&-rtl": {
+		[`${componentCls}-presets-color`]: { "&::after": { direction: "ltr" } },
+		[`${componentCls}-clear`]: { "&::after": { direction: "ltr" } }
+	} };
+}
+function genClearStyle(token, size, extraStyle) {
+	const { componentCls, borderRadiusSM, lineWidth, colorSplit, colorBorder, red6 } = token;
+	return { [`${componentCls}-clear`]: {
+		"width": size,
+		"height": size,
+		"borderRadius": borderRadiusSM,
+		"border": `${unit(lineWidth)} solid ${colorSplit}`,
+		"position": "relative",
+		"overflow": "hidden",
+		"cursor": "inherit",
+		"transition": `all ${token.motionDurationFast}`,
+		...extraStyle,
+		"&::after": {
+			content: "\"\"",
+			position: "absolute",
+			insetInlineEnd: token.calc(lineWidth).mul(-1).equal(),
+			top: token.calc(lineWidth).mul(-1).equal(),
+			display: "block",
+			width: 40,
+			height: 2,
+			transformOrigin: `calc(100% - 1px) 1px`,
+			transform: "rotate(-45deg)",
+			backgroundColor: red6
+		},
+		"&:hover": { borderColor: colorBorder }
+	} };
+}
+function genStatusStyle(token) {
+	const { componentCls, colorError, colorWarning, colorErrorHover, colorWarningHover, colorErrorOutline, colorWarningOutline } = token;
+	return {
+		[`&${componentCls}-status-error`]: {
+			"borderColor": colorError,
+			"&:hover": { borderColor: colorErrorHover },
+			[`&${componentCls}-trigger-active`]: { ...genActiveStyle(token, colorError, colorErrorOutline) }
+		},
+		[`&${componentCls}-status-warning`]: {
+			"borderColor": colorWarning,
+			"&:hover": { borderColor: colorWarningHover },
+			[`&${componentCls}-trigger-active`]: { ...genActiveStyle(token, colorWarning, colorWarningOutline) }
+		}
+	};
+}
+function genSizeStyle(token) {
+	const { componentCls, controlHeightLG, controlHeightSM, controlHeight, controlHeightXS, borderRadius, borderRadiusSM, borderRadiusXS, borderRadiusLG, fontSizeLG } = token;
+	return {
+		[`&${componentCls}-lg`]: {
+			minWidth: controlHeightLG,
+			minHeight: controlHeightLG,
+			borderRadius: borderRadiusLG,
+			[`${componentCls}-color-block, ${componentCls}-clear`]: {
+				width: controlHeight,
+				height: controlHeight,
+				borderRadius
+			},
+			[`${componentCls}-trigger-text`]: { fontSize: fontSizeLG }
+		},
+		[`&${componentCls}-sm`]: {
+			minWidth: controlHeightSM,
+			minHeight: controlHeightSM,
+			borderRadius: borderRadiusSM,
+			[`${componentCls}-color-block, ${componentCls}-clear`]: {
+				width: controlHeightXS,
+				height: controlHeightXS,
+				borderRadius: borderRadiusXS
+			},
+			[`${componentCls}-trigger-text`]: { lineHeight: unit(controlHeightXS) }
+		}
+	};
+}
+const genColorPickerStyle = (token) => {
+	const { antCls, componentCls, colorPickerWidth, colorPrimary, motionDurationMid, colorBgElevated, colorTextDisabled, colorText, colorBgContainerDisabled, borderRadius, marginXS, marginSM, controlHeight, controlHeightSM, colorBgTextActive, colorPickerPresetColorSize, colorPickerPreviewSize, lineWidth, colorBorder, paddingXXS, fontSize, colorPrimaryHover, controlOutline } = token;
+	return [{ [componentCls]: {
+		[`${componentCls}-inner`]: {
+			"&-content": {
+				display: "flex",
+				flexDirection: "column",
+				width: colorPickerWidth,
+				[`& > ${antCls}-divider`]: { margin: `${unit(marginSM)} 0 ${unit(marginXS)}` }
+			},
+			[`${componentCls}-panel`]: { ...picker_default(token) },
+			...slider_default(token),
+			...color_block_default(token, colorPickerPreviewSize),
+			...input_default(token),
+			...presets_default(token),
+			...genClearStyle(token, colorPickerPresetColorSize, { marginInlineStart: "auto" }),
+			[`${componentCls}-operation`]: {
+				display: "flex",
+				justifyContent: "space-between",
+				marginBottom: marginXS
+			}
+		},
+		"&-trigger": {
+			"minWidth": controlHeight,
+			"minHeight": controlHeight,
+			borderRadius,
+			"border": `${unit(lineWidth)} solid ${colorBorder}`,
+			"cursor": "pointer",
+			"display": "inline-flex",
+			"alignItems": "flex-start",
+			"justifyContent": "center",
+			"transition": `all ${motionDurationMid}`,
+			"background": colorBgElevated,
+			"padding": token.calc(paddingXXS).sub(lineWidth).equal(),
+			[`${componentCls}-trigger-text`]: {
+				"marginInlineStart": marginXS,
+				"marginInlineEnd": token.calc(marginXS).sub(token.calc(paddingXXS).sub(lineWidth)).equal(),
+				fontSize,
+				"color": colorText,
+				"alignSelf": "center",
+				"&-cell": {
+					"&:not(:last-child):after": { content: "\", \"" },
+					"&-inactive": { color: colorTextDisabled }
+				}
+			},
+			"&:hover": { borderColor: colorPrimaryHover },
+			[`&${componentCls}-trigger-active`]: { ...genActiveStyle(token, colorPrimary, controlOutline) },
+			"&-disabled": {
+				"color": colorTextDisabled,
+				"background": colorBgContainerDisabled,
+				"cursor": "not-allowed",
+				"&:hover": { borderColor: colorBgTextActive },
+				[`${componentCls}-trigger-text`]: { color: colorTextDisabled }
+			},
+			...genClearStyle(token, controlHeightSM),
+			...color_block_default(token, controlHeightSM),
+			...genStatusStyle(token),
+			...genSizeStyle(token)
+		},
+		...genRtlStyle(token)
+	} }, genCompactItemStyle(token, { focusElCls: `${componentCls}-trigger-active` })];
+};
+var style_default = genStyleHooks("ColorPicker", (token) => {
+	const { colorTextQuaternary, marginSM } = token;
+	const colorPickerSliderHeight = 8;
+	return genColorPickerStyle(mergeToken(token, {
+		colorPickerWidth: 234,
+		colorPickerHandlerSize: 16,
+		colorPickerHandlerSizeSM: 12,
+		colorPickerAlphaInputWidth: 44,
+		colorPickerInputNumberHandleWidth: 16,
+		colorPickerPresetColorSize: 24,
+		colorPickerInsetShadow: `inset 0 0 1px 0 ${colorTextQuaternary}`,
+		colorPickerSliderHeight,
+		colorPickerPreviewSize: token.calc(colorPickerSliderHeight).mul(2).add(marginSM).equal()
+	}));
+});
+
+//#endregion
+export { style_default as default };

package/dist/color-picker/style/input.js

@@ -0,0 +1,69 @@
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/color-picker/style/input.ts
+const genInputStyle = (token) => {
+	const { componentCls, antCls, fontSizeSM, lineHeightSM, colorPickerAlphaInputWidth, marginXXS, paddingXXS, controlHeightSM, marginXS, fontSizeIcon, paddingXS, colorTextPlaceholder, colorPickerInputNumberHandleWidth, lineWidth } = token;
+	return { [`${componentCls}-input-container`]: {
+		display: "flex",
+		[`${componentCls}-steppers${antCls}-input-number`]: {
+			fontSize: fontSizeSM,
+			lineHeight: lineHeightSM,
+			[`${antCls}-input-number-input`]: {
+				paddingInlineStart: paddingXXS,
+				paddingInlineEnd: 0
+			},
+			[`${antCls}-input-number-handler-wrap`]: { width: colorPickerInputNumberHandleWidth }
+		},
+		[`${componentCls}-steppers${componentCls}-alpha-input`]: {
+			flex: `0 0 ${unit(colorPickerAlphaInputWidth)}`,
+			marginInlineStart: marginXXS
+		},
+		[`${componentCls}-format-select${antCls}-select`]: {
+			"marginInlineEnd": marginXS,
+			"width": "auto",
+			"&-single": {
+				[`${antCls}-select-selector`]: {
+					padding: 0,
+					border: 0
+				},
+				[`${antCls}-select-arrow`]: { insetInlineEnd: 0 },
+				[`${antCls}-select-selection-item`]: {
+					paddingInlineEnd: token.calc(fontSizeIcon).add(marginXXS).equal(),
+					fontSize: fontSizeSM,
+					lineHeight: unit(controlHeightSM)
+				},
+				[`${antCls}-select-item-option-content`]: {
+					fontSize: fontSizeSM,
+					lineHeight: lineHeightSM
+				},
+				[`${antCls}-select-dropdown`]: { [`${antCls}-select-item`]: { minHeight: "auto" } }
+			}
+		},
+		[`${componentCls}-input`]: {
+			gap: marginXXS,
+			alignItems: "center",
+			flex: 1,
+			width: 0,
+			[`${componentCls}-hsb-input,${componentCls}-rgb-input`]: {
+				display: "flex",
+				gap: marginXXS,
+				alignItems: "center"
+			},
+			[`${componentCls}-steppers`]: { flex: 1 },
+			[`${componentCls}-hex-input${antCls}-input-affix-wrapper`]: {
+				flex: 1,
+				padding: `0 ${unit(paddingXS)}`,
+				[`${antCls}-input`]: {
+					fontSize: fontSizeSM,
+					textTransform: "uppercase",
+					lineHeight: unit(token.calc(controlHeightSM).sub(token.calc(lineWidth).mul(2)).equal())
+				},
+				[`${antCls}-input-prefix`]: { color: colorTextPlaceholder }
+			}
+		}
+	} };
+};
+var input_default = genInputStyle;
+
+//#endregion
+export { input_default as default };

package/dist/color-picker/style/picker.js

@@ -0,0 +1,36 @@
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/color-picker/style/picker.ts
+const genPickerStyle = (token) => {
+	const { componentCls, controlHeightLG, borderRadiusSM, colorPickerInsetShadow, marginSM, colorBgElevated, colorFillSecondary, lineWidthBold, colorPickerHandlerSize } = token;
+	return {
+		userSelect: "none",
+		[`${componentCls}-select`]: {
+			[`${componentCls}-palette`]: {
+				minHeight: token.calc(controlHeightLG).mul(4).equal(),
+				overflow: "hidden",
+				borderRadius: borderRadiusSM
+			},
+			[`${componentCls}-saturation`]: {
+				position: "absolute",
+				borderRadius: "inherit",
+				boxShadow: colorPickerInsetShadow,
+				inset: 0
+			},
+			marginBottom: marginSM
+		},
+		[`${componentCls}-handler`]: {
+			width: colorPickerHandlerSize,
+			height: colorPickerHandlerSize,
+			border: `${unit(lineWidthBold)} solid ${colorBgElevated}`,
+			position: "relative",
+			borderRadius: "50%",
+			cursor: "pointer",
+			boxShadow: `${colorPickerInsetShadow}, 0 0 0 1px ${colorFillSecondary}`
+		}
+	};
+};
+var picker_default = genPickerStyle;
+
+//#endregion
+export { picker_default as default };

package/dist/color-picker/style/presets.js

@@ -0,0 +1,84 @@
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/color-picker/style/presets.ts
+const genPresetsStyle = (token) => {
+	const { componentCls, antCls, colorTextQuaternary, paddingXXS, colorPickerPresetColorSize, fontSizeSM, colorText, lineHeightSM, lineWidth, borderRadius, colorFill, colorWhite, marginXXS, paddingXS, fontHeightSM } = token;
+	return { [`${componentCls}-presets`]: {
+		[`${antCls}-collapse-item > ${antCls}-collapse-header`]: {
+			padding: 0,
+			[`${antCls}-collapse-expand-icon`]: {
+				height: fontHeightSM,
+				color: colorTextQuaternary,
+				paddingInlineEnd: paddingXXS
+			}
+		},
+		[`${antCls}-collapse`]: {
+			display: "flex",
+			flexDirection: "column",
+			gap: marginXXS
+		},
+		[`${antCls}-collapse-item > ${antCls}-collapse-panel > ${antCls}-collapse-body`]: { padding: `${unit(paddingXS)} 0` },
+		"&-label": {
+			fontSize: fontSizeSM,
+			color: colorText,
+			lineHeight: lineHeightSM
+		},
+		"&-items": {
+			display: "flex",
+			flexWrap: "wrap",
+			gap: token.calc(marginXXS).mul(1.5).equal(),
+			[`${componentCls}-presets-color`]: {
+				"position": "relative",
+				"cursor": "pointer",
+				"width": colorPickerPresetColorSize,
+				"height": colorPickerPresetColorSize,
+				"&::before": {
+					content: "\"\"",
+					pointerEvents: "none",
+					width: token.calc(colorPickerPresetColorSize).add(token.calc(lineWidth).mul(4)).equal(),
+					height: token.calc(colorPickerPresetColorSize).add(token.calc(lineWidth).mul(4)).equal(),
+					position: "absolute",
+					top: token.calc(lineWidth).mul(-2).equal(),
+					insetInlineStart: token.calc(lineWidth).mul(-2).equal(),
+					borderRadius,
+					border: `${unit(lineWidth)} solid transparent`,
+					transition: `border-color ${token.motionDurationMid} ${token.motionEaseInBack}`
+				},
+				"&:hover::before": { borderColor: colorFill },
+				"&::after": {
+					boxSizing: "border-box",
+					position: "absolute",
+					top: "50%",
+					insetInlineStart: "21.5%",
+					display: "table",
+					width: token.calc(colorPickerPresetColorSize).div(13).mul(5).equal(),
+					height: token.calc(colorPickerPresetColorSize).div(13).mul(8).equal(),
+					border: `${unit(token.lineWidthBold)} solid ${token.colorWhite}`,
+					borderTop: 0,
+					borderInlineStart: 0,
+					transform: "rotate(45deg) scale(0) translate(-50%,-50%)",
+					opacity: 0,
+					content: "\"\"",
+					transition: `all ${token.motionDurationFast} ${token.motionEaseInBack}, opacity ${token.motionDurationFast}`
+				},
+				[`&${componentCls}-presets-color-checked`]: {
+					"&::after": {
+						opacity: 1,
+						borderColor: colorWhite,
+						transform: "rotate(45deg) scale(1) translate(-50%,-50%)",
+						transition: `transform ${token.motionDurationMid} ${token.motionEaseOutBack} ${token.motionDurationFast}`
+					},
+					[`&${componentCls}-presets-color-bright`]: { "&::after": { borderColor: "rgba(0, 0, 0, 0.45)" } }
+				}
+			}
+		},
+		"&-empty": {
+			fontSize: fontSizeSM,
+			color: colorTextQuaternary
+		}
+	} };
+};
+var presets_default = genPresetsStyle;
+
+//#endregion
+export { presets_default as default };

package/dist/color-picker/style/slider.js

@@ -0,0 +1,81 @@
+import { getTransBg } from "./color-block.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/color-picker/style/slider.ts
+const genSliderStyle = (token) => {
+	const { componentCls, colorPickerInsetShadow, colorBgElevated, colorFillSecondary, lineWidthBold, colorPickerHandlerSizeSM, colorPickerSliderHeight, marginSM, marginXS } = token;
+	const handleInnerSize = token.calc(colorPickerHandlerSizeSM).sub(token.calc(lineWidthBold).mul(2).equal()).equal();
+	const handleHoverSize = token.calc(colorPickerHandlerSizeSM).add(token.calc(lineWidthBold).mul(2).equal()).equal();
+	const activeHandleStyle = { "&:after": {
+		transform: "scale(1)",
+		boxShadow: `${colorPickerInsetShadow}, 0 0 0 1px ${token.colorPrimaryActive}`
+	} };
+	return {
+		[`${componentCls}-slider`]: [getTransBg(unit(colorPickerSliderHeight), token.colorFillSecondary), {
+			"margin": 0,
+			"padding": 0,
+			"height": colorPickerSliderHeight,
+			"borderRadius": token.calc(colorPickerSliderHeight).div(2).equal(),
+			"&-rail": {
+				height: colorPickerSliderHeight,
+				borderRadius: token.calc(colorPickerSliderHeight).div(2).equal(),
+				boxShadow: colorPickerInsetShadow
+			},
+			[`& ${componentCls}-slider-handle`]: {
+				"width": handleInnerSize,
+				"height": handleInnerSize,
+				"top": 0,
+				"borderRadius": "100%",
+				"&:before": {
+					display: "block",
+					position: "absolute",
+					background: "transparent",
+					left: {
+						_skip_check_: true,
+						value: "50%"
+					},
+					top: "50%",
+					transform: "translate(-50%, -50%)",
+					width: handleHoverSize,
+					height: handleHoverSize,
+					borderRadius: "100%"
+				},
+				"&:after": {
+					width: colorPickerHandlerSizeSM,
+					height: colorPickerHandlerSizeSM,
+					border: `${unit(lineWidthBold)} solid ${colorBgElevated}`,
+					boxShadow: `${colorPickerInsetShadow}, 0 0 0 1px ${colorFillSecondary}`,
+					outline: "none",
+					insetInlineStart: token.calc(lineWidthBold).mul(-1).equal(),
+					top: token.calc(lineWidthBold).mul(-1).equal(),
+					background: "transparent",
+					transition: "none"
+				},
+				"&:focus": activeHandleStyle
+			}
+		}],
+		[`${componentCls}-slider-container`]: {
+			display: "flex",
+			gap: marginSM,
+			marginBottom: marginSM,
+			[`${componentCls}-slider-group`]: {
+				"flex": 1,
+				"flexDirection": "column",
+				"justifyContent": "space-between",
+				"display": "flex",
+				"&-disabled-alpha": { justifyContent: "center" }
+			}
+		},
+		[`${componentCls}-gradient-slider`]: {
+			marginBottom: marginXS,
+			[`& ${componentCls}-slider-handle`]: {
+				"&:after": { transform: "scale(0.8)" },
+				"&-active, &:focus": activeHandleStyle
+			}
+		}
+	};
+};
+var slider_default = genSliderStyle;
+
+//#endregion
+export { slider_default as default };

package/dist/color-picker/util.js

@@ -0,0 +1,56 @@
+import { AggregationColor } from "./color.js";
+import { Color } from "@v-c/color-picker";
+
+//#region src/color-picker/util.ts
+function generateColor(color) {
+	if (color instanceof AggregationColor) return color;
+	return new AggregationColor(color);
+}
+const getRoundNumber = (value) => Math.round(Number(value || 0));
+const getColorAlpha = (color) => getRoundNumber(color.toHsb().a * 100);
+/** Return the color whose `alpha` is 1 */
+function genAlphaColor(color, alpha) {
+	const rgba = color.toRgb();
+	if (!rgba.r && !rgba.g && !rgba.b) {
+		const hsba = color.toHsb();
+		hsba.a = alpha || 1;
+		return generateColor(hsba);
+	}
+	rgba.a = alpha || 1;
+	return generateColor(rgba);
+}
+/**
+* Get percent position color. e.g. [10%-#fff, 20%-#000], 15% => #888
+*/
+function getGradientPercentColor(colors, percent) {
+	const filledColors = [
+		{
+			percent: 0,
+			color: colors[0].color
+		},
+		...colors,
+		{
+			percent: 100,
+			color: colors[colors.length - 1].color
+		}
+	];
+	for (let i = 0; i < filledColors.length - 1; i += 1) {
+		const startPtg = filledColors[i].percent;
+		const endPtg = filledColors[i + 1].percent;
+		const startColor = filledColors[i].color;
+		const endColor = filledColors[i + 1].color;
+		if (startPtg <= percent && percent <= endPtg) {
+			const dist = endPtg - startPtg;
+			if (dist === 0) return startColor;
+			const ratio = (percent - startPtg) / dist * 100;
+			const startRcColor = new Color(startColor);
+			const endRcColor = new Color(endColor);
+			return startRcColor.mix(endRcColor, ratio).toRgbString();
+		}
+	}
+	/* istanbul ignore next */
+	return "";
+}
+
+//#endregion
+export { genAlphaColor, generateColor, getColorAlpha, getGradientPercentColor, getRoundNumber };