antdv-next 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/popover/index.mjs

@@ -0,0 +1,266 @@
+import { useComponentBaseConfig } from "../config-provider/context.mjs";
+import { useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.mjs";
+import "../_util/hooks/index.mjs";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.mjs";
+import useMergedArrow_default from "../tooltip/hooks/useMergedArrow.mjs";
+import tooltip_default from "../tooltip/index.mjs";
+import style_default from "./style/index.mjs";
+import PurePanel_default, { Overlay } from "./PurePanel.mjs";
+import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, shallowRef, watchEffect } from "vue";
+import { clsx } from "@v-c/util";
+import { filterEmpty, removeUndefined } from "@v-c/util/dist/props-util";
+import { getTransitionName } from "@v-c/util/dist/utils/transition";
+import KeyCode from "@v-c/util/dist/KeyCode";
+
+//#region src/popover/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const Popover = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose, emit }) => {
+	const { getPrefixCls, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, arrow: contextArrow, prefixCls } = useComponentBaseConfig("popover", props, ["arrow"]);
+	const { arrow: popoverArrow, classes, styles } = toPropsRefs(props, "arrow", "classes", "styles");
+	const rootCls = computed(() => getPrefixCls());
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const mergedArrow = useMergedArrow_default(popoverArrow, contextArrow);
+	const popoverRef = shallowRef();
+	const forceAlign = () => {
+		popoverRef.value?.forceAlign?.();
+	};
+	expose({
+		forceAlign,
+		nativeElement: computed(() => popoverRef.value?.nativeElement),
+		popupElement: computed(() => popoverRef.value?.popupElement)
+	});
+	const mergedProps = computed(() => ({ ...props }));
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
+	const open = shallowRef(props?.open ?? props?.defaultOpen ?? false);
+	watchEffect(() => {
+		if (props.open !== void 0) open.value = props.open;
+	});
+	const settingOpen = (value, e) => {
+		if (props.open === void 0) open.value = value;
+		emit("openChange", value, e);
+		emit("update:open", value);
+	};
+	const onKeyDown = (e) => {
+		if (e.keyCode === KeyCode.ESC) settingOpen(false, e);
+	};
+	const onInternalOpenChange = (value) => {
+		settingOpen(value);
+	};
+	return () => {
+		let _slot;
+		const children = filterEmpty(slots?.default?.() ?? [])?.[0];
+		const { placement, trigger, mouseLeaveDelay, mouseEnterDelay, motion, ...restProps } = props;
+		const titleNode = getSlotPropsFnRun(slots, props, "title");
+		const contentNode = getSlotPropsFnRun(slots, props, "content");
+		const rootClassNames = clsx(hashId.value, cssVarCls.value, contextClassName.value, mergedClassNames.value.root);
+		return createVNode(tooltip_default, mergeProps(attrs, {
+			"unique": false,
+			"arrow": mergedArrow.value,
+			"placement": placement,
+			"trigger": trigger,
+			"mouseLeaveDelay": mouseLeaveDelay,
+			"mouseEnterDelay": mouseEnterDelay
+		}, removeUndefined(restProps), {
+			"prefixCls": prefixCls.value,
+			"classes": {
+				root: rootClassNames,
+				container: mergedClassNames.value?.container,
+				arrow: mergedClassNames.value?.arrow
+			},
+			"styles": {
+				root: {
+					...mergedStyles.value?.root,
+					...contextStyle.value
+				},
+				container: mergedStyles.value?.container,
+				arrow: mergedStyles.value?.arrow
+			},
+			"open": open.value,
+			"onOpenChange": onInternalOpenChange,
+			"overlay": titleNode || contentNode ? createVNode(Overlay, {
+				"prefixCls": prefixCls.value,
+				"title": titleNode,
+				"content": contentNode,
+				"classes": mergedClassNames.value,
+				"styles": mergedStyles.value
+			}, null) : null,
+			"motion": { name: getTransitionName(rootCls.value, "zoom-big", typeof motion?.name === "string" ? motion?.name : void 0) },
+			"dataPopoverInject": true,
+			"ref": popoverRef
+		}), _isSlot(_slot = createVNode(children, { onKeydown: onKeyDown })) ? _slot : { default: () => [_slot] });
+	};
+}, {
+	emits: ["openChange", "update:open"],
+	props: /* @__PURE__ */ mergeDefaults({
+		title: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		content: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		classes: {
+			type: [Object, Function],
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			required: false,
+			default: void 0
+		},
+		afterOpenChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		builtinPlacements: {
+			required: false,
+			default: void 0
+		},
+		overlay: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		openClass: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		unique: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		align: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		arrow: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		autoAdjustOverflow: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		color: {
+			required: false,
+			default: void 0
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		destroyOnHidden: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		zIndex: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		placement: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		trigger: {
+			type: [String, Array],
+			required: false,
+			default: void 0
+		},
+		fresh: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		mouseEnterDelay: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		mouseLeaveDelay: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		getTooltipContainer: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		motion: {
+			required: false,
+			default: void 0
+		},
+		rootClass: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		}
+	}, {
+		placement: "top",
+		trigger: "hover",
+		mouseEnterDelay: .1,
+		mouseLeaveDelay: .1
+	}),
+	name: "APopover",
+	inheritAttrs: false
+});
+Popover.install = (app) => {
+	app.component(Popover.name, Popover);
+};
+Popover._InternalPanelDoNotUseOrYouWillBeFired = PurePanel_default;
+var popover_default = Popover;
+
+//#endregion
+export { popover_default as default };

package/dist/popover/style/index.d.mts

@@ -0,0 +1,42 @@
+import { ArrowToken } from "../../style/roundedArrow.mjs";
+import { ArrowOffsetToken } from "../../style/placementArrow.mjs";
+import "../../theme/internal.mjs";
+import "vue";
+
+//#region src/popover/style/index.d.ts
+interface ComponentToken extends ArrowToken, ArrowOffsetToken {
+  /**
+   * @deprecated Please use `titleMinWidth` instead
+   * @desc 气泡卡片宽度
+   * @descEN Width of Popover
+   */
+  width?: number | string;
+  /**
+   * @deprecated Please use `titleMinWidth` instead
+   * @desc 气泡卡片最小宽度
+   * @descEN Min width of Popover
+   */
+  minWidth?: number | string;
+  /**
+   * @desc 气泡卡片标题最小宽度
+   * @descEN Min width of Popover title
+   */
+  titleMinWidth: number | string;
+  /**
+   * @desc 气泡卡片 z-index
+   * @descEN z-index of Popover
+   */
+  zIndexPopup: number;
+  /** @internal */
+  innerPadding: number;
+  /** @internal */
+  titlePadding: number | string;
+  /** @internal */
+  titleMarginBottom: number;
+  /** @internal */
+  titleBorderBottom: string;
+  /** @internal */
+  innerContentPadding: number | string;
+}
+//#endregion
+export { ComponentToken };

package/dist/popover/style/index.mjs

@@ -0,0 +1,117 @@
+import { PresetColors } from "../../theme/interface/presetColors.mjs";
+import { resetComponent } from "../../style/index.mjs";
+import { genCssVar, genStyleHooks } from "../../theme/util/genStyleUtils.mjs";
+import { mergeToken } from "../../theme/internal.mjs";
+import { getArrowToken } from "../../style/roundedArrow.mjs";
+import getArrowStyle, { getArrowOffsetToken } from "../../style/placementArrow.mjs";
+import { initZoomMotion } from "../../style/motion/zoom.mjs";
+import "../../style/motion/index.mjs";
+
+//#region src/popover/style/index.ts
+const FALL_BACK_ORIGIN = "50%";
+const genBaseStyle = (token) => {
+	const { componentCls, popoverColor, titleMinWidth, fontWeightStrong, innerPadding, boxShadowSecondary, colorTextHeading, borderRadiusLG, zIndexPopup, titleMarginBottom, colorBgElevated, popoverBg, titleBorderBottom, innerContentPadding, titlePadding, antCls } = token;
+	const [varName, varRef] = genCssVar(antCls, "tooltip");
+	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",
+			[varName("valid-offset-x")]: varRef("arrow-offset-horizontal", "var(--arrow-x)"),
+			"transformOrigin": [varRef("valid-offset-x", FALL_BACK_ORIGIN), `var(--arrow-y, ${FALL_BACK_ORIGIN})`].join(" "),
+			[varName("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, varRef("arrow-background-color")),
+		{ [`${componentCls}-pure`]: {
+			position: "relative",
+			maxWidth: "none",
+			margin: token.sizePopupArrow,
+			display: "inline-block"
+		} }
+	];
+};
+const genColorStyle = (token) => {
+	const { componentCls, antCls } = token;
+	const [varName] = genCssVar(antCls, "tooltip");
+	return { [componentCls]: PresetColors.map((colorKey) => {
+		const lightColor = token[`${colorKey}6`];
+		return { [`&${componentCls}-${colorKey}`]: {
+			[varName("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.mjs

@@ -0,0 +1,230 @@
+import { useComponentBaseConfig } from "../config-provider/context.mjs";
+import tooltip_default from "../tooltip/index.mjs";
+import { getPercentage, getSize, getStrokeColor } from "./utils.mjs";
+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,
+			default: void 0
+		},
+		progressStatus: {
+			type: String,
+			required: true,
+			default: void 0
+		},
+		strokeColor: {
+			type: [String, Object],
+			required: false,
+			default: void 0
+		},
+		classes: {
+			type: Object,
+			required: true,
+			default: void 0
+		},
+		styles: {
+			type: Object,
+			required: true,
+			default: void 0
+		},
+		type: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		percent: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		format: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		status: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		showInfo: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		strokeWidth: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		strokeLinecap: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		trailColor: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		railColor: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		width: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		success: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		gapDegree: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		gapPlacement: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		gapPosition: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		size: {
+			type: [
+				Number,
+				Array,
+				String,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		steps: {
+			type: [Number, Object],
+			required: false,
+			default: void 0
+		},
+		percentPosition: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		rounding: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		rootClass: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		"aria-label": {
+			type: [String, null],
+			required: false,
+			default: void 0
+		},
+		"aria-labelledby": {
+			type: [String, null],
+			required: false,
+			default: void 0
+		}
+	}, defaults),
+	name: "ProgressCircle",
+	inheritAttrs: false
+});
+var Circle_default = Circle$1;
+
+//#endregion
+export { Circle_default as default };