antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/_util/hooks/useMergeSemantic.js

@@ -0,0 +1,116 @@
+import { computed, unref } from "vue";
+import { classNames } from "@v-c/util";
+import { omit } from "es-toolkit";
+
+//#region src/_util/hooks/useMergeSemantic.ts
+function mergeClassNames(schema, ...classNames$1) {
+	const mergedSchema = schema || {};
+	return classNames$1.filter(Boolean).reduce((acc, cur) => {
+		Object.keys(cur || {}).forEach((key) => {
+			const keySchema = mergedSchema[key];
+			const curVal = cur[key];
+			if (keySchema && typeof keySchema === "object") if (curVal && typeof curVal === "object") acc[key] = mergeClassNames(keySchema, acc[key], curVal);
+			else {
+				const { _default: defaultField } = keySchema;
+				if (defaultField) {
+					acc[key] = acc[key] || {};
+					acc[key][defaultField] = classNames(acc[key][defaultField], curVal);
+				}
+			}
+			else acc[key] = classNames(acc[key], curVal);
+		});
+		return acc;
+	}, {});
+}
+function useSemanticClassNames(schema, ...classNames$1) {
+	return mergeClassNames(schema, ...classNames$1);
+}
+function mergeStyles(...styles) {
+	return styles.filter(Boolean).reduce((acc, cur = {}) => {
+		Object.keys(cur).forEach((key) => {
+			acc[key] = {
+				...acc[key],
+				...cur[key]
+			};
+		});
+		return acc;
+	}, {});
+}
+function useSemanticStyles(...styles) {
+	return mergeStyles(...styles);
+}
+function fillObjectBySchema(obj, schema) {
+	const newObj = { ...obj };
+	Object.keys(schema).forEach((key) => {
+		if (key !== "_default") {
+			const nestSchema = schema[key];
+			const nextValue = newObj[key] || {};
+			newObj[key] = nestSchema ? fillObjectBySchema(nextValue, nestSchema) : nextValue;
+		}
+	});
+	return newObj;
+}
+function resolveStyleOrClass(value, info) {
+	return typeof value === "function" ? value(info) : value;
+}
+/**
+* @desc Merge classNames and styles from multiple sources. When `schema` is provided, it **must** provide the nest object structure.
+* @descZH 合并来自多个来源的 classNames 和 styles，当提供了 `schema` 时，必须提供嵌套的对象结构。
+*/
+/**
+* @desc Merge classNames and styles from multiple sources. When `schema` is provided, it **must** provide the nest object structure.
+* @descZH 合并来自多个来源的 classNames 和 styles，当提供了 `schema` 时，必须提供嵌套的对象结构。
+*/
+function useMergeSemantic(classNamesList, stylesList, info, schema) {
+	const resolvedClassNamesList = computed(() => {
+		return classNamesList.value.map((classNames$1) => classNames$1 ? resolveStyleOrClass(classNames$1, info.value) : void 0);
+	});
+	const resolvedStylesList = computed(() => {
+		return stylesList.value.map((styles) => styles ? resolveStyleOrClass(styles, info.value) : void 0);
+	});
+	const mergedClassNames = computed(() => useSemanticClassNames(schema?.value, ...resolvedClassNamesList.value));
+	const mergedStyles = computed(() => useSemanticStyles(...resolvedStylesList.value));
+	const _merged = computed(() => {
+		if (!schema?.value) return [mergedClassNames.value, mergedStyles.value];
+		return [fillObjectBySchema(mergedClassNames.value, schema.value), fillObjectBySchema(mergedStyles.value, schema.value)];
+	});
+	return [computed(() => _merged.value[0]), computed(() => _merged.value[1])];
+}
+function useMergeSemanticNoRef(classNamesList, stylesList, info, schema) {
+	const resolvedClassNamesList = classNamesList.map((classNames$1) => classNames$1 ? resolveStyleOrClass(classNames$1, info) : void 0);
+	const resolvedStylesList = stylesList.map((styles) => styles ? resolveStyleOrClass(styles, info) : void 0);
+	const mergedClassNames = useSemanticClassNames(schema, ...resolvedClassNamesList);
+	const mergedStyles = useSemanticStyles(...resolvedStylesList);
+	const fn = () => {
+		if (!schema) return [mergedClassNames, mergedStyles];
+		return [fillObjectBySchema(mergedClassNames, schema), fillObjectBySchema(mergedStyles, schema)];
+	};
+	return fn();
+}
+function useToArr(...args) {
+	return computed(() => args.map(unref));
+}
+function useToProps(props) {
+	return computed(() => ({ props: props.value }));
+}
+const defaultOptions = {
+	class: true,
+	style: true
+};
+function pureAttrs(attrs, options = defaultOptions) {
+	const newAttrs = { ...attrs };
+	if (options.class) delete newAttrs.class;
+	if (options.style) delete newAttrs.style;
+	if (options.omit) return omit(newAttrs, options.omit);
+	return newAttrs;
+}
+function getAttrStyleAndClass(attrs, options) {
+	return {
+		className: attrs.class,
+		style: attrs.style,
+		restAttrs: pureAttrs(attrs, options)
+	};
+}
+
+//#endregion
+export { getAttrStyleAndClass, mergeClassNames, mergeStyles, pureAttrs, resolveStyleOrClass, useMergeSemantic, useMergeSemanticNoRef, useToArr, useToProps };

package/dist/_util/hooks/useMergedMask.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from "vue";
+
+//#region src/_util/hooks/useMergedMask.d.ts
+interface MaskConfig {
+  enabled?: boolean;
+  blur?: boolean;
+}
+type MaskType = MaskConfig | boolean;
+//#endregion
+export { MaskConfig, MaskType };

package/dist/_util/hooks/useMergedMask.js

@@ -0,0 +1,29 @@
+import { computed } from "vue";
+
+//#region src/_util/hooks/useMergedMask.ts
+function normalizeMaskConfig(mask) {
+	if (mask && typeof mask === "object") return mask;
+	if (typeof mask === "boolean") return {
+		enabled: mask,
+		blur: mask
+	};
+	return {};
+}
+function useMergedMask(mask, contextMask, prefixCls) {
+	const context = computed(() => {
+		const maskConfig = normalizeMaskConfig(mask.value);
+		const mergedConfig = {
+			...normalizeMaskConfig(contextMask.value),
+			...maskConfig
+		};
+		const className = mergedConfig.blur !== false ? `${prefixCls.value}-mask-blur` : void 0;
+		return {
+			enabled: mergedConfig.enabled !== false,
+			classNames: { mask: className }
+		};
+	});
+	return [computed(() => context.value.enabled), computed(() => context.value.classNames)];
+}
+
+//#endregion
+export { useMergedMask };

package/dist/_util/hooks/useMultipleSelect.js

@@ -0,0 +1,36 @@
+import { ref } from "vue";
+
+//#region src/_util/hooks/useMultipleSelect.ts
+/**
+* @title multipleSelect hooks
+* @description multipleSelect by hold down shift key
+*/
+function useMultipleSelect(getKey) {
+	const prevSelectedIndex = ref(null);
+	const multipleSelect = (currentSelectedIndex, data, selectedKeys) => {
+		const configPrevSelectedIndex = prevSelectedIndex.value ?? currentSelectedIndex;
+		const startIndex = Math.min(configPrevSelectedIndex || 0, currentSelectedIndex);
+		const endIndex = Math.max(configPrevSelectedIndex || 0, currentSelectedIndex);
+		const rangeKeys = data.slice(startIndex, endIndex + 1).map(getKey);
+		const shouldSelected = rangeKeys.some((rangeKey) => !selectedKeys.has(rangeKey));
+		const changedKeys = [];
+		rangeKeys.forEach((item) => {
+			if (shouldSelected) {
+				if (!selectedKeys.has(item)) changedKeys.push(item);
+				selectedKeys.add(item);
+			} else {
+				selectedKeys.delete(item);
+				changedKeys.push(item);
+			}
+		});
+		prevSelectedIndex.value = shouldSelected ? endIndex : null;
+		return changedKeys;
+	};
+	const setPrevSelectedIndex = (value) => {
+		prevSelectedIndex.value = value;
+	};
+	return [multipleSelect, setPrevSelectedIndex];
+}
+
+//#endregion
+export { useMultipleSelect };

package/dist/_util/hooks/useOrientation.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from "vue";
+
+//#region src/_util/hooks/useOrientation.d.ts
+type Orientation = 'horizontal' | 'vertical';
+//#endregion
+export { Orientation };

package/dist/_util/hooks/useOrientation.js

@@ -0,0 +1,20 @@
+import { computed } from "vue";
+
+//#region src/_util/hooks/useOrientation.ts
+function isValidOrientation(orientation) {
+	return orientation === "horizontal" || orientation === "vertical";
+}
+function useOrientation(orientation, vertical, legacyDirection) {
+	const _orientation = computed(() => {
+		const validOrientation = isValidOrientation(orientation?.value);
+		let mergedOrientation;
+		if (validOrientation) mergedOrientation = orientation.value;
+		else if (typeof vertical?.value === "boolean") mergedOrientation = vertical?.value ? "vertical" : "horizontal";
+		else mergedOrientation = isValidOrientation(legacyDirection?.value) ? legacyDirection.value : "horizontal";
+		return [mergedOrientation, mergedOrientation === "vertical"];
+	});
+	return [computed(() => _orientation.value[0]), computed(() => _orientation.value[1])];
+}
+
+//#endregion
+export { useOrientation };

package/dist/_util/hooks/usePatchElement.js

@@ -0,0 +1,16 @@
+import { shallowRef } from "vue";
+
+//#region src/_util/hooks/usePatchElement.ts
+function usePatchElement() {
+	const elements = shallowRef([]);
+	const patchElement = (element) => {
+		elements.value = [...elements.value, element];
+		return () => {
+			elements.value = [...elements.value].filter((ele) => ele !== element);
+		};
+	};
+	return [elements, patchElement];
+}
+
+//#endregion
+export { usePatchElement };

package/dist/_util/hooks/useResponsive.d.ts

@@ -0,0 +1,7 @@
+import { Breakpoint } from "../responsiveObserver.js";
+import { Ref } from "vue";
+
+//#region src/_util/hooks/useResponsive.d.ts
+declare function useResponsive(): Record<Breakpoint | "mobile" | "tablet" | "laptop" | "desktop", Ref<boolean, boolean>>;
+//#endregion
+export { useResponsive };

package/dist/_util/hooks/useResponsive.js

@@ -0,0 +1,33 @@
+import { responsiveArray } from "../responsiveObserver.js";
+import { useBreakpoint } from "../../grid/index.js";
+import { computed } from "vue";
+
+//#region src/_util/hooks/useResponsive.ts
+function convertBreakpointToResponsive(breakpoints) {
+	return {
+		...breakpoints,
+		mobile: breakpoints.xs,
+		tablet: breakpoints.md,
+		laptop: breakpoints.lg,
+		desktop: breakpoints.xxl
+	};
+}
+function useResponsive() {
+	const breakpoints = useBreakpoint();
+	const keys = [
+		...responsiveArray,
+		"mobile",
+		"tablet",
+		"laptop",
+		"desktop"
+	];
+	const refs = {};
+	const responsive = computed(() => {
+		return convertBreakpointToResponsive(breakpoints.value);
+	});
+	for (const key of keys) refs[key] = computed(() => responsive.value[key] || false);
+	return refs;
+}
+
+//#endregion
+export { useResponsive };

package/dist/_util/hooks/useZIndex.d.ts

@@ -0,0 +1 @@
+import { Ref } from "vue";

package/dist/_util/hooks/useZIndex.js

@@ -0,0 +1,61 @@
+import useToken from "../../theme/useToken.js";
+import "../../theme/internal.js";
+import { devUseWarning, isDev } from "../warning.js";
+import { useZIndexContext } from "../zindexContext.js";
+import { computed } from "vue";
+
+//#region src/_util/hooks/useZIndex.ts
+const CONTAINER_OFFSET = 100;
+const CONTAINER_OFFSET_MAX_COUNT = 10;
+const CONTAINER_MAX_OFFSET = CONTAINER_OFFSET * CONTAINER_OFFSET_MAX_COUNT;
+/**
+* Static function will default be the `CONTAINER_MAX_OFFSET`.
+* But it still may have children component like Select, Dropdown.
+* So the warning zIndex should exceed the `CONTAINER_MAX_OFFSET`.
+*/
+const CONTAINER_MAX_OFFSET_WITH_CHILDREN = CONTAINER_MAX_OFFSET + CONTAINER_OFFSET;
+const containerBaseZIndexOffset = {
+	Modal: CONTAINER_OFFSET,
+	Drawer: CONTAINER_OFFSET,
+	Popover: CONTAINER_OFFSET,
+	Popconfirm: CONTAINER_OFFSET,
+	Tooltip: CONTAINER_OFFSET,
+	Tour: CONTAINER_OFFSET,
+	FloatButton: CONTAINER_OFFSET
+};
+const consumerBaseZIndexOffset = {
+	SelectLike: 50,
+	Dropdown: 50,
+	DatePicker: 50,
+	Menu: 50,
+	ImagePreview: 1
+};
+function isContainerType(type) {
+	return type in containerBaseZIndexOffset;
+}
+function useZIndex(componentType, customZIndex) {
+	const [, token] = useToken();
+	const parentZIndex = useZIndexContext();
+	const isContainer = isContainerType(componentType);
+	let result;
+	if (customZIndex?.value !== void 0) result = [customZIndex, customZIndex];
+	else {
+		const resIndex = computed(() => {
+			let zIndex = parentZIndex.value ?? 0;
+			if (isContainer) zIndex += (parentZIndex.value ? 0 : token.value.zIndexPopupBase) + containerBaseZIndexOffset[componentType];
+			else zIndex += consumerBaseZIndexOffset[componentType];
+			return [parentZIndex.value === void 0 ? customZIndex?.value : zIndex, zIndex];
+		});
+		result = [computed(() => resIndex.value[0]), computed(() => resIndex.value[1])];
+	}
+	if (isDev) {
+		const warning = devUseWarning(componentType);
+		const maxZIndex = token.value.zIndexPopupBase + CONTAINER_MAX_OFFSET_WITH_CHILDREN;
+		const currentZIndex = computed(() => result[0]?.value ?? 0);
+		warning(customZIndex?.value !== void 0 || currentZIndex.value <= maxZIndex, "usage", "`zIndex` is over design token `zIndexPopupBase` too much. It may cause unexpected override.");
+	}
+	return result;
+}
+
+//#endregion
+export { CONTAINER_MAX_OFFSET, consumerBaseZIndexOffset, containerBaseZIndexOffset, useZIndex };

package/dist/_util/isNonNullable.js

@@ -0,0 +1,8 @@
+//#region src/_util/isNonNullable.ts
+function isNonNullable(val) {
+	return val !== void 0 && val !== null;
+}
+var isNonNullable_default = isNonNullable;
+
+//#endregion
+export { isNonNullable_default as default };

package/dist/_util/mediaQueryUtil.js

@@ -0,0 +1,12 @@
+//#region src/_util/mediaQueryUtil.ts
+const addMediaQueryListener = (mql, handler) => {
+	if (typeof mql?.addEventListener !== "undefined") mql.addEventListener("change", handler);
+	else if (typeof mql?.addListener !== "undefined") mql.addListener(handler);
+};
+const removeMediaQueryListener = (mql, handler) => {
+	if (typeof mql?.removeEventListener !== "undefined") mql.removeEventListener("change", handler);
+	else if (typeof mql?.removeListener !== "undefined") mql.removeListener(handler);
+};
+
+//#endregion
+export { addMediaQueryListener, removeMediaQueryListener };

package/dist/_util/motion.d.ts

@@ -0,0 +1,7 @@
+import "vue";
+
+//#region src/_util/motion.d.ts
+declare const _SelectPlacements: readonly ["bottomLeft", "bottomRight", "topLeft", "topRight"];
+type SelectCommonPlacement = (typeof _SelectPlacements)[number];
+//#endregion
+export { SelectCommonPlacement };

package/dist/_util/motion.js

@@ -0,0 +1,61 @@
+import { defaultPrefixCls } from "../config-provider/context.js";
+import { addClass, removeClass } from "@v-c/util/dist/Dom/class";
+
+//#region src/_util/motion.ts
+function getTransitionProps(name, options) {
+	return {
+		name,
+		appear: true,
+		...options
+	};
+}
+function getCollapsedHeight(_el, name) {
+	const el = _el;
+	if (el) {
+		el.style.height = "0px";
+		el.style.opacity = "0";
+		if (name) addClass(el, name);
+	}
+}
+function getRealHeight(_el) {
+	const el = _el;
+	if (el) {
+		const scrollHeight = el.scrollHeight;
+		el.style.height = `${scrollHeight}px`;
+		el.style.opacity = "1";
+	}
+}
+function getCurrentHeight(_el, name) {
+	const el = _el;
+	if (el) {
+		if (name) addClass(el, name);
+		const offsetHeight = el.offsetHeight;
+		el.style.height = `${offsetHeight}px`;
+	}
+}
+function skipOpacityTransition(_el, name) {
+	const el = _el;
+	if (el) {
+		if (name) removeClass(el, name);
+		el.style.opacity = null;
+		el.style.height = null;
+	}
+}
+function initCollapseMotion(rootCls = defaultPrefixCls, appear = true) {
+	const name = `${rootCls}-motion-collapse`;
+	return {
+		name,
+		appear,
+		css: true,
+		onBeforeEnter: (el) => getCollapsedHeight(el, name),
+		onEnter: getRealHeight,
+		onBeforeLeave: (el) => getCurrentHeight(el, name),
+		onLeave: (el) => getCollapsedHeight(el, name),
+		onAfterEnter: (el) => skipOpacityTransition(el, name),
+		onAfterLeave: (el) => skipOpacityTransition(el, name)
+	};
+}
+var motion_default = initCollapseMotion;
+
+//#endregion
+export { motion_default as default, getTransitionProps };

package/dist/_util/placements.d.ts

@@ -0,0 +1,10 @@
+import "../style/placementArrow.js";
+import "@v-c/trigger";
+
+//#region src/_util/placements.d.ts
+interface AdjustOverflow {
+  adjustX?: 0 | 1;
+  adjustY?: 0 | 1;
+}
+//#endregion
+export { AdjustOverflow };

package/dist/_util/placements.js

@@ -0,0 +1,130 @@
+import { getArrowOffsetToken } from "../style/placementArrow.js";
+
+//#region src/_util/placements.ts
+function getOverflowOptions(placement, arrowOffset, arrowWidth, autoAdjustOverflow) {
+	if (autoAdjustOverflow === false) return {
+		adjustX: false,
+		adjustY: false
+	};
+	const overflow = autoAdjustOverflow && typeof autoAdjustOverflow === "object" ? autoAdjustOverflow : {};
+	const baseOverflow = {};
+	switch (placement) {
+		case "top":
+		case "bottom":
+			baseOverflow.shiftX = arrowOffset.arrowOffsetHorizontal * 2 + arrowWidth;
+			baseOverflow.shiftY = true;
+			baseOverflow.adjustY = true;
+			break;
+		case "left":
+		case "right":
+			baseOverflow.shiftY = arrowOffset.arrowOffsetVertical * 2 + arrowWidth;
+			baseOverflow.shiftX = true;
+			baseOverflow.adjustX = true;
+			break;
+	}
+	const mergedOverflow = {
+		...baseOverflow,
+		...overflow
+	};
+	if (!mergedOverflow.shiftX) mergedOverflow.adjustX = true;
+	if (!mergedOverflow.shiftY) mergedOverflow.adjustY = true;
+	return mergedOverflow;
+}
+const PlacementAlignMap = {
+	left: { points: ["cr", "cl"] },
+	right: { points: ["cl", "cr"] },
+	top: { points: ["bc", "tc"] },
+	bottom: { points: ["tc", "bc"] },
+	topLeft: { points: ["bl", "tl"] },
+	leftTop: { points: ["tr", "tl"] },
+	topRight: { points: ["br", "tr"] },
+	rightTop: { points: ["tl", "tr"] },
+	bottomRight: { points: ["tr", "br"] },
+	rightBottom: { points: ["bl", "br"] },
+	bottomLeft: { points: ["tl", "bl"] },
+	leftBottom: { points: ["br", "bl"] }
+};
+const ArrowCenterPlacementAlignMap = {
+	topLeft: { points: ["bl", "tc"] },
+	leftTop: { points: ["tr", "cl"] },
+	topRight: { points: ["br", "tc"] },
+	rightTop: { points: ["tl", "cr"] },
+	bottomRight: { points: ["tr", "bc"] },
+	rightBottom: { points: ["bl", "cr"] },
+	bottomLeft: { points: ["tl", "bc"] },
+	leftBottom: { points: ["br", "cl"] }
+};
+const DisableAutoArrowList = new Set([
+	"topLeft",
+	"topRight",
+	"bottomLeft",
+	"bottomRight",
+	"leftTop",
+	"leftBottom",
+	"rightTop",
+	"rightBottom"
+]);
+function getPlacements(config) {
+	const { arrowWidth, autoAdjustOverflow, arrowPointAtCenter, offset, borderRadius, visibleFirst } = config;
+	const halfArrowWidth = arrowWidth / 2;
+	const placementMap = {};
+	const arrowOffset = getArrowOffsetToken({
+		contentRadius: borderRadius,
+		limitVerticalRadius: true
+	});
+	Object.keys(PlacementAlignMap).forEach((key) => {
+		const placementInfo = {
+			...arrowPointAtCenter && ArrowCenterPlacementAlignMap[key] || PlacementAlignMap[key],
+			offset: [0, 0],
+			dynamicInset: true
+		};
+		placementMap[key] = placementInfo;
+		if (DisableAutoArrowList.has(key)) placementInfo.autoArrow = false;
+		switch (key) {
+			case "top":
+			case "topLeft":
+			case "topRight":
+				placementInfo.offset[1] = -halfArrowWidth - offset;
+				break;
+			case "bottom":
+			case "bottomLeft":
+			case "bottomRight":
+				placementInfo.offset[1] = halfArrowWidth + offset;
+				break;
+			case "left":
+			case "leftTop":
+			case "leftBottom":
+				placementInfo.offset[0] = -halfArrowWidth - offset;
+				break;
+			case "right":
+			case "rightTop":
+			case "rightBottom":
+				placementInfo.offset[0] = halfArrowWidth + offset;
+				break;
+		}
+		if (arrowPointAtCenter) switch (key) {
+			case "topLeft":
+			case "bottomLeft":
+				placementInfo.offset[0] = -arrowOffset.arrowOffsetHorizontal - halfArrowWidth;
+				break;
+			case "topRight":
+			case "bottomRight":
+				placementInfo.offset[0] = arrowOffset.arrowOffsetHorizontal + halfArrowWidth;
+				break;
+			case "leftTop":
+			case "rightTop":
+				placementInfo.offset[1] = -arrowOffset.arrowOffsetHorizontal * 2 + halfArrowWidth;
+				break;
+			case "leftBottom":
+			case "rightBottom":
+				placementInfo.offset[1] = arrowOffset.arrowOffsetHorizontal * 2 - halfArrowWidth;
+				break;
+		}
+		placementInfo.overflow = getOverflowOptions(key, arrowOffset, arrowWidth, autoAdjustOverflow);
+		if (visibleFirst) placementInfo.htmlRegion = "visibleFirst";
+	});
+	return placementMap;
+}
+
+//#endregion
+export { getPlacements as default };

package/dist/_util/responsiveObserver.d.ts

@@ -0,0 +1,7 @@
+import "vue";
+
+//#region src/_util/responsiveObserver.d.ts
+type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+type ScreenSizeMap = Partial<Record<Breakpoint, number>>;
+//#endregion
+export { Breakpoint, ScreenSizeMap };