antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/anchor/Anchor.js

@@ -0,0 +1,273 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { Affix } from "../affix/index.js";
+import { useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { clsx as clsx$1, toPropsRefs } from "../_util/tools.js";
+import getScroll_default from "../_util/getScroll.js";
+import scrollTo from "../_util/scrollTo.js";
+import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.js";
+import { useAnchorProvider } from "./context.js";
+import AnchorLink_default from "./AnchorLink.js";
+import style_default from "./style/index.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, nextTick, ref, shallowRef, watch, watchEffect } from "vue";
+import { classNames } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+import scrollIntoView from "scroll-into-view-if-needed";
+
+//#region src/anchor/Anchor.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const sharpMatcherRegex = /#([\S ]+)$/;
+const defaultProps = {
+	affix: true,
+	direction: "vertical"
+};
+function getDefaultContainer() {
+	return window;
+}
+function getOffsetTop(element, container) {
+	if (!element.getClientRects().length) return 0;
+	const rect = element.getBoundingClientRect();
+	if (rect.width || rect.height) {
+		if (container === window) return rect.top - element.ownerDocument.documentElement.clientTop;
+		return rect.top - container.getBoundingClientRect().top;
+	}
+	return rect.top;
+}
+const Anchor = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs }) => {
+	const links = ref([]);
+	const activeLink = shallowRef();
+	const _activeLink = shallowRef(activeLink.value);
+	const activeLinkRef = computed({
+		get: () => _activeLink.value,
+		set: (val) => {
+			_activeLink.value = val;
+		}
+	});
+	const wrapperRef = shallowRef();
+	const spanLinkNode = shallowRef();
+	const animating = shallowRef(false);
+	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, getTargetContainer } = useComponentBaseConfig("anchor", props);
+	const { direction: anchorDirection, classes, styles } = toPropsRefs(props, "direction", "classes", "styles");
+	const rootCls = useCSSVarCls_default(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const getCurrentContainer = () => props?.getContainer?.() ?? getTargetContainer?.() ?? getDefaultContainer?.();
+	const dependencyListItem = computed(() => JSON.stringify(links.value));
+	const registerLink = (link) => {
+		if (!links.value.includes(link)) links.value.push(link);
+	};
+	const unregisterLink = (link) => {
+		links.value = links.value.filter((item) => item !== link);
+	};
+	const updateInk = () => {
+		const linkNode = wrapperRef.value?.querySelector(`.${prefixCls.value}-link-title-active`);
+		if (linkNode && spanLinkNode.value) {
+			const { style: inkStyle } = spanLinkNode.value;
+			const horizontalAnchor = props.direction === "horizontal";
+			inkStyle.top = horizontalAnchor ? "" : `${linkNode.offsetTop + linkNode.clientHeight / 2}px`;
+			inkStyle.height = horizontalAnchor ? "" : `${linkNode.clientHeight}px`;
+			inkStyle.left = horizontalAnchor ? `${linkNode.offsetLeft}px` : "";
+			inkStyle.width = horizontalAnchor ? `${linkNode.clientWidth}px` : "";
+			if (horizontalAnchor) scrollIntoView(linkNode, {
+				scrollMode: "if-needed",
+				block: "nearest"
+			});
+		}
+	};
+	const getInternalCurrentAnchor = (_links, _offsetTop = 0, _bounds = 5) => {
+		const linkSections = [];
+		const container = getCurrentContainer();
+		_links.forEach((link) => {
+			const sharpLinkMatch = sharpMatcherRegex.exec(link?.toString());
+			if (!sharpLinkMatch) return;
+			const target = document.getElementById(sharpLinkMatch[1]);
+			if (target) {
+				const top = getOffsetTop(target, container);
+				if (top <= _offsetTop + _bounds) linkSections.push({
+					link,
+					top
+				});
+			}
+		});
+		if (linkSections.length) return linkSections.reduce((prev, curr) => curr.top > prev.top ? curr : prev).link;
+		return "";
+	};
+	const setCurrentActiveLink = (link) => {
+		if (activeLinkRef.value === link) return;
+		const getCurrentAnchor = props.getCurrentAnchor;
+		const newLink = typeof getCurrentAnchor === "function" ? getCurrentAnchor(link) : link;
+		activeLink.value = newLink;
+		activeLinkRef.value = newLink;
+		emit("change", link);
+	};
+	const handleScroll = () => {
+		if (animating.value) return;
+		setCurrentActiveLink(getInternalCurrentAnchor(links.value, props.targetOffset !== void 0 ? props.targetOffset : props.offsetTop || 0, props.bounds));
+	};
+	const handleScrollTo = (link) => {
+		const { offsetTop, targetOffset } = props;
+		setCurrentActiveLink(link);
+		const sharpLinkMatch = sharpMatcherRegex.exec(link);
+		if (!sharpLinkMatch) return;
+		const targetElement = document.getElementById(sharpLinkMatch[1]);
+		if (!targetElement) return;
+		const container = getCurrentContainer();
+		let y = getScroll_default(container) + getOffsetTop(targetElement, container);
+		y -= targetOffset !== void 0 ? targetOffset : offsetTop || 0;
+		animating.value = true;
+		scrollTo(y, {
+			getContainer: getCurrentContainer,
+			callback() {
+				animating.value = false;
+			}
+		});
+	};
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			direction: anchorDirection.value
+		};
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
+	useAnchorProvider({
+		unregisterLink,
+		registerLink,
+		scrollTo: handleScrollTo,
+		onClick: (e, link) => {
+			emit("click", e, link);
+		},
+		activeLink,
+		classes: mergedClassNames,
+		styles: mergedStyles,
+		direction: anchorDirection
+	});
+	watch(dependencyListItem, async (_n, _o, onCleanup) => {
+		await nextTick();
+		const scrollContainer = getCurrentContainer();
+		handleScroll();
+		scrollContainer?.addEventListener("scroll", handleScroll);
+		onCleanup(() => {
+			scrollContainer?.removeEventListener("scroll", handleScroll);
+		});
+	}, { immediate: true });
+	watchEffect(() => {
+		if (typeof props.getCurrentAnchor === "function") setCurrentActiveLink(props?.getCurrentAnchor(activeLinkRef.value || ""));
+	});
+	watch([
+		() => props.direction,
+		() => props.getCurrentAnchor,
+		dependencyListItem,
+		activeLink
+	], async () => {
+		await nextTick();
+		updateInk();
+	}, { immediate: true });
+	return () => {
+		const { rootClass, affix, showInkInFixed, offsetTop } = props;
+		const wrapperClass = clsx$1(hashId.value, cssVarCls.value, rootCls.value, rootClass, `${prefixCls.value}-wrapper`, {
+			[`${prefixCls.value}-wrapper-horizontal`]: anchorDirection.value === "horizontal",
+			[`${prefixCls.value}-rtl`]: direction.value === "rtl"
+		}, attrs.class, contextClassName.value, mergedClassNames.value?.root);
+		const anchorClass = classNames(prefixCls.value, { [`${prefixCls.value}-fixed`]: !affix && !showInkInFixed });
+		const inkClass = classNames(`${prefixCls.value}-ink`, mergedClassNames.value?.indicator, { [`${prefixCls.value}-ink-visible`]: activeLink.value });
+		const wrapperStyle = [
+			{ maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : "100vh" },
+			mergedStyles.value.root,
+			contextStyle.value,
+			attrs.style
+		];
+		const createNestedLink = (options) => {
+			return Array.isArray(options) ? options.map((item) => {
+				const _item = filterEmpty(slots?.item?.(item)) || [];
+				return createVNode(AnchorLink_default, mergeProps({ "replace": props.replace }, item, {
+					"title": _item.length ? _item : item.title,
+					"key": item.key
+				}), { default: () => [anchorDirection.value === "vertical" && createNestedLink(item.children)] });
+			}) : null;
+		};
+		const anchorContent = createVNode("div", {
+			"ref": wrapperRef,
+			"class": wrapperClass,
+			"style": wrapperStyle
+		}, [createVNode("div", { "class": anchorClass }, [createVNode("span", {
+			"class": inkClass,
+			"ref": spanLinkNode,
+			"style": mergedStyles.value.indicator
+		}, null), createNestedLink(props.items)])]);
+		const affixProps = affix && typeof affix === "object" ? affix : void 0;
+		return createVNode(Fragment, null, [affix ? createVNode(Affix, mergeProps({
+			"offsetTop": props.offsetTop,
+			"target": getCurrentContainer
+		}, affixProps), _isSlot(anchorContent) ? anchorContent : { default: () => [anchorContent] }) : anchorContent]);
+	};
+}, {
+	emits: ["click", "change"],
+	props: /* @__PURE__ */ mergeDefaults({
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		offsetTop: {
+			type: Number,
+			required: false
+		},
+		bounds: {
+			type: Number,
+			required: false
+		},
+		affix: {
+			type: [Boolean, Object],
+			required: false
+		},
+		showInkInFixed: {
+			type: Boolean,
+			required: false
+		},
+		getContainer: {
+			type: Function,
+			required: false
+		},
+		getCurrentAnchor: {
+			type: Function,
+			required: false
+		},
+		targetOffset: {
+			type: Number,
+			required: false
+		},
+		items: {
+			type: Array,
+			required: false
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		replace: {
+			type: Boolean,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	}, defaultProps),
+	name: "AAnchor",
+	inheritAttrs: false
+});
+Anchor.install = (app) => {
+	app.component(Anchor.name, Anchor);
+};
+var Anchor_default = Anchor;
+
+//#endregion
+export { Anchor_default as default };

package/dist/anchor/AnchorLink.d.ts

@@ -0,0 +1,14 @@
+import { VueNode } from "../_util/type.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import "vue";
+
+//#region src/anchor/AnchorLink.d.ts
+interface AnchorLinkBaseProps extends ComponentBaseProps {
+  href: string;
+  target?: string;
+  title: VueNode;
+  replace?: boolean;
+}
+type AnchorLinkProps = AnchorLinkBaseProps;
+//#endregion
+export { AnchorLinkBaseProps, AnchorLinkProps };

package/dist/anchor/AnchorLink.js

@@ -0,0 +1,95 @@
+import { useBaseConfig } from "../config-provider/context.js";
+import { getSlotPropsFnRun } from "../_util/tools.js";
+import { useAnchorContext } from "./context.js";
+import { computed, createVNode, defineComponent, nextTick, watch } from "vue";
+import { classNames } from "@v-c/util";
+
+//#region src/anchor/AnchorLink.tsx
+const AnchorLink = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const { registerLink, direction, unregisterLink, activeLink, scrollTo, onClick, classes: mergedClassNames, styles: mergedStyles } = useAnchorContext() ?? {};
+	const { prefixCls } = useBaseConfig("anchor", props);
+	watch(() => props.href, async (href, _, onCleanup) => {
+		await nextTick();
+		registerLink?.(href);
+		onCleanup(() => {
+			unregisterLink?.(href);
+		});
+	}, { immediate: true });
+	const handleClick = (e) => {
+		const { href, replace } = props;
+		const title = getSlotPropsFnRun(slots, props, "title");
+		onClick?.(e, {
+			title,
+			href
+		});
+		scrollTo?.(href);
+		if (e.defaultPrevented) return;
+		if (href.startsWith("http://") || href.startsWith("https://")) {
+			if (replace) {
+				e.preventDefault();
+				window.location.replace(href);
+			}
+		}
+		e.preventDefault();
+		const historyMethod = replace ? "replaceState" : "pushState";
+		window.history[historyMethod](null, "", href);
+	};
+	const active = computed(() => activeLink?.value === props.href);
+	return () => {
+		const { href, target } = props;
+		const wrapperClassName = classNames(`${prefixCls.value}-link`, attrs.class, mergedClassNames?.value?.item, { [`${prefixCls.value}-link-active`]: active.value });
+		const titleClassName = classNames(`${prefixCls.value}-link-title`, mergedClassNames?.value?.title, { [`${prefixCls.value}-link-title-active`]: active.value });
+		const title = getSlotPropsFnRun(slots, props, "title");
+		return createVNode("div", {
+			"class": [wrapperClassName],
+			"style": mergedStyles?.value?.item
+		}, [createVNode("a", {
+			"class": titleClassName,
+			"style": mergedStyles?.value?.title,
+			"href": href,
+			"title": typeof title === "string" ? title : "",
+			"target": target,
+			"onClick": handleClick
+		}, [title]), direction?.value !== "horizontal" ? slots?.default?.() : null]);
+	};
+}, {
+	emits: ["click"],
+	props: {
+		href: {
+			type: String,
+			required: true
+		},
+		target: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: true
+		},
+		replace: {
+			type: Boolean,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	},
+	inheritAttrs: false
+});
+var AnchorLink_default = AnchorLink;
+
+//#endregion
+export { AnchorLink_default as default };

package/dist/anchor/context.js

@@ -0,0 +1,13 @@
+import { inject, provide } from "vue";
+
+//#region src/anchor/context.ts
+const AnchorContextKey = Symbol("AnchorContext");
+function useAnchorProvider(ctx) {
+	provide(AnchorContextKey, ctx);
+}
+function useAnchorContext() {
+	return inject(AnchorContextKey, void 0);
+}
+
+//#endregion
+export { useAnchorContext, useAnchorProvider };

package/dist/anchor/index.d.ts

@@ -0,0 +1,2 @@
+import { AnchorLinkProps } from "./AnchorLink.js";
+import { Anchor, AnchorProps } from "./Anchor.js";

package/dist/anchor/index.js

@@ -0,0 +1,7 @@
+import Anchor_default from "./Anchor.js";
+
+//#region src/anchor/index.tsx
+var anchor_default = Anchor_default;
+
+//#endregion
+export { anchor_default as default };

package/dist/anchor/style/index.d.ts

@@ -0,0 +1,18 @@
+import "../../theme/internal.js";
+import "vue";
+
+//#region src/anchor/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 链接纵向内间距
+   * @descEN Vertical padding of link
+   */
+  linkPaddingBlock: number;
+  /**
+   * @desc 链接横向内间距
+   * @descEN Horizontal padding of link
+   */
+  linkPaddingInlineStart: number;
+}
+//#endregion
+export { ComponentToken };

package/dist/anchor/style/index.js

@@ -0,0 +1,106 @@
+import { resetComponent, textEllipsis } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/anchor/style/index.ts
+const genSharedAnchorStyle = (token) => {
+	const { componentCls, holderOffsetBlock, motionDurationSlow, lineWidthBold, colorPrimary, lineType, colorSplit, calc } = token;
+	return { [`${componentCls}-wrapper`]: {
+		marginBlockStart: calc(holderOffsetBlock).mul(-1).equal(),
+		paddingBlockStart: holderOffsetBlock,
+		[componentCls]: {
+			...resetComponent(token),
+			position: "relative",
+			paddingInlineStart: lineWidthBold,
+			[`${componentCls}-link`]: {
+				"paddingBlock": token.linkPaddingBlock,
+				"paddingInline": `${unit(token.linkPaddingInlineStart)} 0`,
+				"&-title": {
+					...textEllipsis,
+					"position": "relative",
+					"display": "block",
+					"marginBlockEnd": token.anchorTitleBlock,
+					"color": token.colorText,
+					"transition": `all ${token.motionDurationSlow}`,
+					"&:only-child": { marginBlockEnd: 0 }
+				},
+				[`&-active > ${componentCls}-link-title`]: { color: token.colorPrimary },
+				[`${componentCls}-link`]: { paddingBlock: token.anchorPaddingBlockSecondary }
+			}
+		},
+		[`&:not(${componentCls}-wrapper-horizontal)`]: { [componentCls]: {
+			"&::before": {
+				position: "absolute",
+				insetInlineStart: 0,
+				top: 0,
+				height: "100%",
+				borderInlineStart: `${unit(lineWidthBold)} ${lineType} ${colorSplit}`,
+				content: "\" \""
+			},
+			[`${componentCls}-ink`]: {
+				position: "absolute",
+				insetInlineStart: 0,
+				display: "none",
+				transform: "translateY(-50%)",
+				transition: `top ${motionDurationSlow} ease-in-out`,
+				width: lineWidthBold,
+				backgroundColor: colorPrimary,
+				[`&${componentCls}-ink-visible`]: { display: "inline-block" }
+			}
+		} },
+		[`${componentCls}-fixed ${componentCls}-ink ${componentCls}-ink`]: { display: "none" }
+	} };
+};
+const genSharedAnchorHorizontalStyle = (token) => {
+	const { componentCls, motionDurationSlow, lineWidthBold, colorPrimary } = token;
+	return { [`${componentCls}-wrapper-horizontal`]: {
+		"position": "relative",
+		"&::before": {
+			position: "absolute",
+			left: {
+				_skip_check_: true,
+				value: 0
+			},
+			right: {
+				_skip_check_: true,
+				value: 0
+			},
+			bottom: 0,
+			borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
+			content: "\" \""
+		},
+		[componentCls]: {
+			"overflowX": "scroll",
+			"position": "relative",
+			"display": "flex",
+			"scrollbarWidth": "none",
+			"&::-webkit-scrollbar": { display: "none" },
+			[`${componentCls}-link:first-of-type`]: { paddingInline: 0 },
+			[`${componentCls}-ink`]: {
+				position: "absolute",
+				bottom: 0,
+				transition: `left ${motionDurationSlow} ease-in-out, width ${motionDurationSlow} ease-in-out`,
+				height: lineWidthBold,
+				backgroundColor: colorPrimary
+			}
+		}
+	} };
+};
+const prepareComponentToken = (token) => ({
+	linkPaddingBlock: token.paddingXXS,
+	linkPaddingInlineStart: token.padding
+});
+var style_default = genStyleHooks("Anchor", (token) => {
+	const { fontSize, fontSizeLG, paddingXXS, calc } = token;
+	const anchorToken = mergeToken(token, {
+		holderOffsetBlock: paddingXXS,
+		anchorPaddingBlockSecondary: calc(paddingXXS).div(2).equal(),
+		anchorTitleBlock: calc(fontSize).div(14).mul(3).equal(),
+		anchorBallSize: calc(fontSizeLG).div(2).equal()
+	});
+	return [genSharedAnchorStyle(anchorToken), genSharedAnchorHorizontalStyle(anchorToken)];
+}, prepareComponentToken);
+
+//#endregion
+export { style_default as default };