antdv-next 0.0.111 → 1.0.0-alpha.1

package/dist/popover/style/index.js

@@ -0,0 +1,114 @@
+import { PresetColors } from "../../theme/interface/presetColors.js";
+import { resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { getArrowToken } from "../../style/roundedArrow.js";
+import getArrowStyle, { getArrowOffsetToken } from "../../style/placementArrow.js";
+import { initZoomMotion } from "../../style/motion/zoom.js";
+import "../../style/motion/index.js";
+
+//#region src/popover/style/index.ts
+const genBaseStyle = (token) => {
+	const { componentCls, popoverColor, titleMinWidth, fontWeightStrong, innerPadding, boxShadowSecondary, colorTextHeading, borderRadiusLG, zIndexPopup, titleMarginBottom, colorBgElevated, popoverBg, titleBorderBottom, innerContentPadding, titlePadding } = token;
+	return [
+		{ [componentCls]: {
+			...resetComponent(token),
+			"position": "absolute",
+			"top": 0,
+			"left": {
+				_skip_check_: true,
+				value: 0
+			},
+			"zIndex": zIndexPopup,
+			"fontWeight": "normal",
+			"whiteSpace": "normal",
+			"textAlign": "start",
+			"cursor": "auto",
+			"userSelect": "text",
+			"--valid-offset-x": "var(--arrow-offset-horizontal, var(--arrow-x))",
+			"transformOrigin": [`var(--valid-offset-x, 50%)`, `var(--arrow-y, 50%)`].join(" "),
+			"--antd-arrow-background-color": colorBgElevated,
+			"width": "max-content",
+			"maxWidth": "100vw",
+			"&-rtl": { direction: "rtl" },
+			"&-hidden": { display: "none" },
+			[`${componentCls}-content`]: { position: "relative" },
+			[`${componentCls}-container`]: {
+				backgroundColor: popoverBg,
+				backgroundClip: "padding-box",
+				borderRadius: borderRadiusLG,
+				boxShadow: boxShadowSecondary,
+				padding: innerPadding
+			},
+			[`${componentCls}-title`]: {
+				minWidth: titleMinWidth,
+				marginBottom: titleMarginBottom,
+				color: colorTextHeading,
+				fontWeight: fontWeightStrong,
+				borderBottom: titleBorderBottom,
+				padding: titlePadding
+			},
+			[`${componentCls}-content`]: {
+				color: popoverColor,
+				padding: innerContentPadding
+			}
+		} },
+		getArrowStyle(token, "var(--antd-arrow-background-color)"),
+		{ [`${componentCls}-pure`]: {
+			position: "relative",
+			maxWidth: "none",
+			margin: token.sizePopupArrow,
+			display: "inline-block"
+		} }
+	];
+};
+const genColorStyle = (token) => {
+	const { componentCls } = token;
+	return { [componentCls]: PresetColors.map((colorKey) => {
+		const lightColor = token[`${colorKey}6`];
+		return { [`&${componentCls}-${colorKey}`]: {
+			"--antd-arrow-background-color": lightColor,
+			[`${componentCls}-inner`]: { backgroundColor: lightColor },
+			[`${componentCls}-arrow`]: { background: "transparent" }
+		} };
+	}) };
+};
+const prepareComponentToken = (token) => {
+	const { lineWidth, controlHeight, fontHeight, padding, wireframe, zIndexPopupBase, borderRadiusLG, marginXS, lineType, colorSplit, paddingSM } = token;
+	const titlePaddingBlockDist = controlHeight - fontHeight;
+	const popoverTitlePaddingBlockTop = titlePaddingBlockDist / 2;
+	const popoverTitlePaddingBlockBottom = titlePaddingBlockDist / 2 - lineWidth;
+	const popoverPaddingHorizontal = padding;
+	return {
+		titleMinWidth: 177,
+		zIndexPopup: zIndexPopupBase + 30,
+		...getArrowToken(token),
+		...getArrowOffsetToken({
+			contentRadius: borderRadiusLG,
+			limitVerticalRadius: true
+		}),
+		innerPadding: wireframe ? 0 : 12,
+		titleMarginBottom: wireframe ? 0 : marginXS,
+		titlePadding: wireframe ? `${popoverTitlePaddingBlockTop}px ${popoverPaddingHorizontal}px ${popoverTitlePaddingBlockBottom}px` : 0,
+		titleBorderBottom: wireframe ? `${lineWidth}px ${lineType} ${colorSplit}` : "none",
+		innerContentPadding: wireframe ? `${paddingSM}px ${popoverPaddingHorizontal}px` : 0
+	};
+};
+var style_default = genStyleHooks("Popover", (token) => {
+	const { colorBgElevated, colorText } = token;
+	const popoverToken = mergeToken(token, {
+		popoverBg: colorBgElevated,
+		popoverColor: colorText
+	});
+	return [
+		genBaseStyle(popoverToken),
+		genColorStyle(popoverToken),
+		initZoomMotion(popoverToken, "zoom-big")
+	];
+}, prepareComponentToken, {
+	resetStyle: false,
+	deprecatedTokens: [["width", "titleMinWidth"], ["minWidth", "titleMinWidth"]]
+});
+
+//#endregion
+export { style_default as default };

package/dist/progress/Circle.js

@@ -0,0 +1,204 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import tooltip_default from "../tooltip/index.js";
+import { getPercentage, getSize, getStrokeColor } from "./utils.js";
+import { computed, createVNode, defineComponent, isVNode, mergeDefaults } from "vue";
+import { clsx } from "@v-c/util";
+import { omit } from "es-toolkit";
+import { Circle } from "@v-c/progress";
+
+//#region src/progress/Circle.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const CIRCLE_MIN_STROKE_WIDTH = 3;
+const getMinPercent = (width) => CIRCLE_MIN_STROKE_WIDTH / width * 100;
+const OMIT_SEMANTIC_NAMES = [
+	"root",
+	"body",
+	"indicator"
+];
+const defaults = {
+	strokeLinecap: "round",
+	width: 120
+};
+const Circle$1 = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const size = computed(() => props.size ?? props.width ?? 120);
+	const { direction } = useComponentBaseConfig("progress", props);
+	const realGapDegree = computed(() => {
+		const { gapDegree, type } = props;
+		if (gapDegree || gapDegree === 0) return gapDegree;
+		if (type === "dashboard") return 75;
+	});
+	const gapPos = computed(() => {
+		const { gapPosition, gapPlacement, type } = props;
+		const mergedPlacement = (gapPlacement ?? gapPosition) || type === "dashboard" && "bottom" || void 0;
+		const isRTL = direction.value === "rtl";
+		switch (mergedPlacement) {
+			case "start": return isRTL ? "right" : "left";
+			case "end": return isRTL ? "left" : "right";
+			default: return mergedPlacement;
+		}
+	});
+	return () => {
+		const { trailColor, railColor, strokeColor: customStrokeColor, success, prefixCls, classes, styles, strokeLinecap, steps } = props;
+		const mergedRailColor = railColor ?? trailColor;
+		const [width, height] = getSize(size.value, "circle");
+		let strokeWidth = props?.strokeWidth;
+		if (strokeWidth === void 0) strokeWidth = Math.max(getMinPercent(width), 6);
+		const circleStyle = {
+			width: `${width}px`,
+			height: `${height}px`,
+			fontSize: `${width * .15 + 6}px`
+		};
+		const isGradient = Object.prototype.toString.call(customStrokeColor) === "[object Object]";
+		const strokeColor = getStrokeColor({
+			success,
+			strokeColor: props.strokeColor
+		});
+		const percentArray = getPercentage(props);
+		const wrapperClassName = clsx(`${prefixCls}-body`, { [`${prefixCls}-circle-gradient`]: isGradient }, classes.body);
+		const circleContent = createVNode(Circle, {
+			"steps": steps,
+			"percent": steps ? percentArray[1] : percentArray,
+			"strokeWidth": strokeWidth,
+			"railWidth": strokeWidth,
+			"strokeColor": steps ? strokeColor[1] : strokeColor,
+			"strokeLinecap": strokeLinecap,
+			"railColor": mergedRailColor,
+			"prefixCls": prefixCls,
+			"gapDegree": realGapDegree.value,
+			"gapPosition": gapPos.value,
+			"classNames": omit(classes, OMIT_SEMANTIC_NAMES),
+			"styles": omit(styles, OMIT_SEMANTIC_NAMES)
+		}, null);
+		const smallCircle = width <= 20;
+		const children = slots?.default ? slots.default() : null;
+		const node = createVNode("div", {
+			"class": wrapperClassName,
+			"style": {
+				...circleStyle,
+				...styles.body
+			}
+		}, [circleContent, !smallCircle && children]);
+		if (smallCircle) return createVNode(tooltip_default, { "title": children }, _isSlot(node) ? node : { default: () => [node] });
+		return node;
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		progressStatus: {
+			type: String,
+			required: true
+		},
+		strokeColor: {
+			type: [String, Object],
+			required: false
+		},
+		classes: {
+			type: Object,
+			required: true
+		},
+		styles: {
+			type: Object,
+			required: true
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		percent: {
+			type: Number,
+			required: false
+		},
+		format: {
+			type: Function,
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		},
+		showInfo: {
+			type: Boolean,
+			required: false
+		},
+		strokeWidth: {
+			type: Number,
+			required: false
+		},
+		strokeLinecap: {
+			type: String,
+			required: false
+		},
+		trailColor: {
+			type: String,
+			required: false
+		},
+		railColor: {
+			type: String,
+			required: false
+		},
+		width: {
+			type: Number,
+			required: false
+		},
+		success: {
+			type: Object,
+			required: false
+		},
+		gapDegree: {
+			type: Number,
+			required: false
+		},
+		gapPlacement: {
+			type: String,
+			required: false
+		},
+		gapPosition: {
+			type: String,
+			required: false
+		},
+		size: {
+			type: [
+				Number,
+				Array,
+				String,
+				Object
+			],
+			required: false
+		},
+		steps: {
+			type: [Number, Object],
+			required: false
+		},
+		percentPosition: {
+			type: Object,
+			required: false
+		},
+		rounding: {
+			type: Function,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		"aria-label": {
+			type: [String, null],
+			required: false
+		},
+		"aria-labelledby": {
+			type: [String, null],
+			required: false
+		}
+	}, defaults),
+	name: "ProgressCircle",
+	inheritAttrs: false
+});
+var Circle_default = Circle$1;
+
+//#endregion
+export { Circle_default as default };

package/dist/progress/Line.js

@@ -0,0 +1,235 @@
+import { devUseWarning, isDev } from "../_util/warning.js";
+import { getSize, getSuccessPercent, validProgress } from "./utils.js";
+import { LineStrokeColorVar } from "./style/index.js";
+import { computed, createVNode, defineComponent } from "vue";
+import { clsx } from "@v-c/util";
+import { presetPrimaryColors } from "@ant-design/colors";
+
+//#region src/progress/Line.tsx
+/**
+* @example
+*   {
+*     "0%": "#afc163",
+*     "75%": "#009900",
+*     "50%": "green", // ====> '#afc163 0%, #66FF00 25%, #00CC00 50%, #009900 75%, #ffffff 100%'
+*     "25%": "#66FF00",
+*     "100%": "#ffffff"
+*   }
+*/
+function sortGradient(gradients) {
+	let tempArr = [];
+	Object.keys(gradients).forEach((key) => {
+		const formattedKey = Number.parseFloat(key.replace(/%/g, ""));
+		if (!Number.isNaN(formattedKey)) tempArr.push({
+			key: formattedKey,
+			value: gradients[key]
+		});
+	});
+	tempArr = tempArr.sort((a, b) => a.key - b.key);
+	return tempArr.map(({ key, value }) => `${value} ${key}%`).join(", ");
+}
+/**
+* Then this man came to realize the truth: Besides six pence, there is the moon. Besides bread and
+* butter, there is the bug. And... Besides women, there is the code.
+*
+* @example
+*   {
+*     "0%": "#afc163",
+*     "25%": "#66FF00",
+*     "50%": "#00CC00", // ====>  linear-gradient(to right, #afc163 0%, #66FF00 25%,
+*     "75%": "#009900", //        #00CC00 50%, #009900 75%, #ffffff 100%)
+*     "100%": "#ffffff"
+*   }
+*/
+function handleGradient(strokeColor, directionConfig) {
+	const { from = presetPrimaryColors.blue, to = presetPrimaryColors.blue, direction = directionConfig === "rtl" ? "to left" : "to right",...rest } = strokeColor;
+	if (Object.keys(rest).length !== 0) {
+		const background$1 = `linear-gradient(${direction}, ${sortGradient(rest)})`;
+		return {
+			background: background$1,
+			[LineStrokeColorVar]: background$1
+		};
+	}
+	const background = `linear-gradient(${direction}, ${from}, ${to})`;
+	return {
+		background,
+		[LineStrokeColorVar]: background
+	};
+}
+const Line = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	if (isDev) devUseWarning("Progress").deprecated(!(props.strokeWidth !== void 0), "strokeWidth", "size");
+	const mergedSize = computed(() => props.size ?? [-1, props.strokeWidth || (props.size === "small" ? 6 : 8)]);
+	return () => {
+		const { prefixCls, classes, styles, direction: directionConfig, percent, strokeWidth, strokeColor, strokeLinecap = "round", railColor, trailColor, percentPosition, success } = props;
+		const { align: infoAlign, type: infoPosition } = percentPosition;
+		const mergedRailColor = railColor ?? trailColor;
+		const borderRadius = strokeLinecap === "square" || strokeLinecap === "butt" ? 0 : void 0;
+		const [width, height] = getSize(mergedSize.value, "line", { strokeWidth });
+		const railStyle = {
+			backgroundColor: mergedRailColor || void 0,
+			borderRadius: `${borderRadius}px`,
+			height: `${height}px`
+		};
+		const trackCls = `${prefixCls}-track`;
+		const backgroundProps = strokeColor && typeof strokeColor !== "string" ? handleGradient(strokeColor, directionConfig) : {
+			[LineStrokeColorVar]: strokeColor,
+			background: strokeColor
+		};
+		const percentTrackStyle = {
+			width: `${validProgress(percent)}%`,
+			height,
+			borderRadius,
+			...backgroundProps
+		};
+		const successPercent = getSuccessPercent(props);
+		const successTrackStyle = {
+			width: `${validProgress(successPercent)}%`,
+			height,
+			borderRadius,
+			backgroundColor: success?.strokeColor
+		};
+		return createVNode("div", {
+			"class": clsx(`${prefixCls}-body`, classes.body, { [`${prefixCls}-body-layout-bottom`]: infoAlign === "center" && infoPosition === "outer" }),
+			"style": {
+				width: width > 0 ? width : "100%",
+				...styles.body
+			}
+		}, [createVNode("div", {
+			"class": clsx(`${prefixCls}-rail`, classes.rail),
+			"style": {
+				...railStyle,
+				...styles.rail
+			}
+		}, [createVNode("div", {
+			"class": clsx(trackCls, classes.track),
+			"style": {
+				...percentTrackStyle,
+				...styles.track
+			}
+		}, [infoPosition === "inner" && slots.default?.()]), successPercent !== void 0 && createVNode("div", {
+			"class": clsx(trackCls, `${trackCls}-success`, classes.track),
+			"style": {
+				...successTrackStyle,
+				...styles.track
+			}
+		}, null)]), infoPosition === "outer" && slots.default?.()]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		direction: {
+			type: [String, null],
+			required: false
+		},
+		strokeColor: {
+			type: [String, Object],
+			required: false
+		},
+		percentPosition: {
+			type: Object,
+			required: true
+		},
+		classes: {
+			type: Object,
+			required: true
+		},
+		styles: {
+			type: Object,
+			required: true
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		percent: {
+			type: Number,
+			required: false
+		},
+		format: {
+			type: Function,
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		},
+		showInfo: {
+			type: Boolean,
+			required: false
+		},
+		strokeWidth: {
+			type: Number,
+			required: false
+		},
+		strokeLinecap: {
+			type: String,
+			required: false
+		},
+		trailColor: {
+			type: String,
+			required: false
+		},
+		railColor: {
+			type: String,
+			required: false
+		},
+		width: {
+			type: Number,
+			required: false
+		},
+		success: {
+			type: Object,
+			required: false
+		},
+		gapDegree: {
+			type: Number,
+			required: false
+		},
+		gapPlacement: {
+			type: String,
+			required: false
+		},
+		gapPosition: {
+			type: String,
+			required: false
+		},
+		size: {
+			type: [
+				Number,
+				Array,
+				String,
+				Object
+			],
+			required: false
+		},
+		steps: {
+			type: [Number, Object],
+			required: false
+		},
+		rounding: {
+			type: Function,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		"aria-label": {
+			type: [String, null],
+			required: false
+		},
+		"aria-labelledby": {
+			type: [String, null],
+			required: false
+		}
+	},
+	name: "ProgressLine",
+	inheritAttrs: false
+});
+var Line_default = Line;
+
+//#endregion
+export { Line_default as default };

package/dist/progress/Steps.js

@@ -0,0 +1,148 @@
+import { getSize } from "./utils.js";
+import { createVNode, defineComponent } from "vue";
+import { clsx } from "@v-c/util";
+
+//#region src/progress/Steps.tsx
+const Steps = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	return () => {
+		const { classes, styles, size, steps, rounding = Math.round, percent = 0, strokeWidth = 8, strokeColor, railColor, trailColor, prefixCls } = props;
+		const current = rounding(steps * (percent / 100));
+		const [width, height] = getSize(size ?? [size === "small" ? 2 : 14, strokeWidth], "step", {
+			steps,
+			strokeWidth
+		});
+		const unitWidth = width / steps;
+		const mergedRailColor = railColor ?? trailColor;
+		const styledSteps = Array.from({ length: steps }).map((_, index) => {
+			const color = Array.isArray(strokeColor) ? strokeColor[index] : strokeColor;
+			return createVNode("div", {
+				"key": index,
+				"class": clsx(`${prefixCls}-steps-item`, { [`${prefixCls}-steps-item-active`]: index <= current - 1 }, classes.track),
+				"style": {
+					backgroundColor: index <= current - 1 ? color : mergedRailColor,
+					width: `${unitWidth}px`,
+					height: `${height}px`,
+					...styles.track
+				}
+			}, null);
+		});
+		return createVNode("div", {
+			"class": clsx(`${prefixCls}-steps-body`, classes.body),
+			"style": styles.body
+		}, [styledSteps, slots.default?.()]);
+	};
+}, {
+	props: {
+		steps: {
+			type: Number,
+			required: true
+		},
+		strokeColor: {
+			type: [String, Array],
+			required: false
+		},
+		railColor: {
+			type: String,
+			required: false
+		},
+		trailColor: {
+			type: String,
+			required: false
+		},
+		classes: {
+			type: Object,
+			required: true
+		},
+		styles: {
+			type: Object,
+			required: true
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		percent: {
+			type: Number,
+			required: false
+		},
+		format: {
+			type: Function,
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		},
+		showInfo: {
+			type: Boolean,
+			required: false
+		},
+		strokeWidth: {
+			type: Number,
+			required: false
+		},
+		strokeLinecap: {
+			type: String,
+			required: false
+		},
+		width: {
+			type: Number,
+			required: false
+		},
+		success: {
+			type: Object,
+			required: false
+		},
+		gapDegree: {
+			type: Number,
+			required: false
+		},
+		gapPlacement: {
+			type: String,
+			required: false
+		},
+		gapPosition: {
+			type: String,
+			required: false
+		},
+		size: {
+			type: [
+				Number,
+				Array,
+				String,
+				Object
+			],
+			required: false
+		},
+		percentPosition: {
+			type: Object,
+			required: false
+		},
+		rounding: {
+			type: Function,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		"aria-label": {
+			type: [String, null],
+			required: false
+		},
+		"aria-labelledby": {
+			type: [String, null],
+			required: false
+		}
+	},
+	name: "ProgressSteps",
+	inheritAttrs: false
+});
+var Steps_default = Steps;
+
+//#endregion
+export { Steps_default as default };

package/dist/progress/index.d.ts

@@ -0,0 +1 @@
+import { Progress, ProgressAriaProps, ProgressProps } from "./progress.js";

package/dist/progress/index.js

@@ -0,0 +1,7 @@
+import progress_default from "./progress.js";
+
+//#region src/progress/index.tsx
+var progress_default$1 = progress_default;
+
+//#endregion
+export { progress_default$1 as default };