antdv-next 0.0.111 → 1.0.0-alpha.1

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

@@ -0,0 +1,28 @@
+import "../../theme/internal.js";
+import "vue";
+
+//#region src/spin/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 内容区域高度
+   * @descEN Height of content area
+   */
+  contentHeight: number | string;
+  /**
+   * @desc 加载图标尺寸
+   * @descEN Loading icon size
+   */
+  dotSize: number;
+  /**
+   * @desc 小号加载图标尺寸
+   * @descEN Small loading icon size
+   */
+  dotSizeSM: number;
+  /**
+   * @desc 大号加载图标尺寸
+   * @descEN Large loading icon size
+   */
+  dotSizeLG: number;
+}
+//#endregion
+export { ComponentToken };

package/dist/spin/style/index.js

@@ -0,0 +1,227 @@
+import { resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { Keyframes } from "@antdv-next/cssinjs";
+
+//#region src/spin/style/index.ts
+const antSpinMove = new Keyframes("antSpinMove", { to: { opacity: 1 } });
+const antRotate = new Keyframes("antRotate", { to: { transform: "rotate(405deg)" } });
+const genSpinStyle = (token) => {
+	const { componentCls, calc } = token;
+	return { [componentCls]: {
+		...resetComponent(token),
+		"position": "absolute",
+		"display": "none",
+		"color": token.colorPrimary,
+		"fontSize": 0,
+		"textAlign": "center",
+		"verticalAlign": "middle",
+		"opacity": 0,
+		"transition": `transform ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`,
+		"&-spinning": {
+			position: "relative",
+			display: "inline-block",
+			opacity: 1
+		},
+		[`${componentCls}-text`]: {
+			fontSize: token.fontSize,
+			paddingTop: calc(calc(token.dotSize).sub(token.fontSize)).div(2).add(2).equal()
+		},
+		"&-fullscreen": {
+			"position": "fixed",
+			"width": "100vw",
+			"height": "100vh",
+			"backgroundColor": token.colorBgMask,
+			"zIndex": token.zIndexPopupBase,
+			"inset": 0,
+			"display": "flex",
+			"alignItems": "center",
+			"flexDirection": "column",
+			"justifyContent": "center",
+			"opacity": 0,
+			"visibility": "hidden",
+			"transition": `all ${token.motionDurationMid}`,
+			"&-show": {
+				opacity: 1,
+				visibility: "visible"
+			},
+			[componentCls]: {
+				[`${componentCls}-dot-holder`]: { color: token.colorWhite },
+				[`${componentCls}-text`]: { color: token.colorTextLightSolid }
+			}
+		},
+		"&-nested-loading": {
+			position: "relative",
+			[`> div > ${componentCls}`]: {
+				"position": "absolute",
+				"top": 0,
+				"insetInlineStart": 0,
+				"zIndex": 4,
+				"display": "block",
+				"width": "100%",
+				"height": "100%",
+				"maxHeight": token.contentHeight,
+				[`${componentCls}-dot`]: {
+					position: "absolute",
+					top: "50%",
+					insetInlineStart: "50%",
+					margin: calc(token.dotSize).mul(-1).div(2).equal()
+				},
+				[`${componentCls}-text`]: {
+					position: "absolute",
+					top: "50%",
+					width: "100%",
+					textShadow: `0 1px 2px ${token.colorBgContainer}`
+				},
+				[`&${componentCls}-show-text ${componentCls}-dot`]: { marginTop: calc(token.dotSize).div(2).mul(-1).sub(10).equal() },
+				"&-sm": {
+					[`${componentCls}-dot`]: { margin: calc(token.dotSizeSM).mul(-1).div(2).equal() },
+					[`${componentCls}-text`]: { paddingTop: calc(calc(token.dotSizeSM).sub(token.fontSize)).div(2).add(2).equal() },
+					[`&${componentCls}-show-text ${componentCls}-dot`]: { marginTop: calc(token.dotSizeSM).div(2).mul(-1).sub(10).equal() }
+				},
+				"&-lg": {
+					[`${componentCls}-dot`]: { margin: calc(token.dotSizeLG).mul(-1).div(2).equal() },
+					[`${componentCls}-text`]: { paddingTop: calc(calc(token.dotSizeLG).sub(token.fontSize)).div(2).add(2).equal() },
+					[`&${componentCls}-show-text ${componentCls}-dot`]: { marginTop: calc(token.dotSizeLG).div(2).mul(-1).sub(10).equal() }
+				}
+			},
+			[`${componentCls}-container`]: {
+				"position": "relative",
+				"transition": `opacity ${token.motionDurationSlow}`,
+				"&::after": {
+					position: "absolute",
+					top: 0,
+					insetInlineEnd: 0,
+					bottom: 0,
+					insetInlineStart: 0,
+					zIndex: 10,
+					width: "100%",
+					height: "100%",
+					background: token.colorBgContainer,
+					opacity: 0,
+					transition: `all ${token.motionDurationSlow}`,
+					content: "\"\"",
+					pointerEvents: "none"
+				}
+			},
+			[`${componentCls}-blur`]: {
+				"clear": "both",
+				"opacity": .5,
+				"userSelect": "none",
+				"pointerEvents": "none",
+				"&::after": {
+					opacity: .4,
+					pointerEvents: "auto"
+				}
+			}
+		},
+		"&-tip": { color: token.spinDotDefault },
+		[`${componentCls}-dot-holder`]: {
+			"width": "1em",
+			"height": "1em",
+			"fontSize": token.dotSize,
+			"display": "inline-block",
+			"transition": `transform ${token.motionDurationSlow} ease, opacity ${token.motionDurationSlow} ease`,
+			"transformOrigin": "50% 50%",
+			"lineHeight": 1,
+			"color": token.colorPrimary,
+			"&-hidden": {
+				transform: "scale(0.3)",
+				opacity: 0
+			}
+		},
+		[`${componentCls}-dot-progress`]: {
+			position: "absolute",
+			inset: 0
+		},
+		[`${componentCls}-dot`]: {
+			"position": "relative",
+			"display": "inline-block",
+			"fontSize": token.dotSize,
+			"width": "1em",
+			"height": "1em",
+			"&-item": {
+				"position": "absolute",
+				"display": "block",
+				"width": calc(token.dotSize).sub(calc(token.marginXXS).div(2)).div(2).equal(),
+				"height": calc(token.dotSize).sub(calc(token.marginXXS).div(2)).div(2).equal(),
+				"background": "currentColor",
+				"borderRadius": "100%",
+				"transform": "scale(0.75)",
+				"transformOrigin": "50% 50%",
+				"opacity": .3,
+				"animationName": antSpinMove,
+				"animationDuration": "1s",
+				"animationIterationCount": "infinite",
+				"animationTimingFunction": "linear",
+				"animationDirection": "alternate",
+				"&:nth-child(1)": {
+					top: 0,
+					insetInlineStart: 0,
+					animationDelay: "0s"
+				},
+				"&:nth-child(2)": {
+					top: 0,
+					insetInlineEnd: 0,
+					animationDelay: "0.4s"
+				},
+				"&:nth-child(3)": {
+					insetInlineEnd: 0,
+					bottom: 0,
+					animationDelay: "0.8s"
+				},
+				"&:nth-child(4)": {
+					bottom: 0,
+					insetInlineStart: 0,
+					animationDelay: "1.2s"
+				}
+			},
+			"&-spin": {
+				transform: "rotate(45deg)",
+				animationName: antRotate,
+				animationDuration: "1.2s",
+				animationIterationCount: "infinite",
+				animationTimingFunction: "linear"
+			},
+			"&-circle": {
+				strokeLinecap: "round",
+				transition: [
+					"stroke-dashoffset",
+					"stroke-dasharray",
+					"stroke",
+					"stroke-width",
+					"opacity"
+				].map((item) => `${item} ${token.motionDurationSlow} ease`).join(","),
+				fillOpacity: 0,
+				stroke: "currentcolor"
+			},
+			"&-circle-bg": { stroke: token.colorFillSecondary }
+		},
+		[`&-sm ${componentCls}-dot`]: { "&, &-holder": { fontSize: token.dotSizeSM } },
+		[`&-sm ${componentCls}-dot-holder`]: { i: {
+			width: calc(calc(token.dotSizeSM).sub(calc(token.marginXXS).div(2))).div(2).equal(),
+			height: calc(calc(token.dotSizeSM).sub(calc(token.marginXXS).div(2))).div(2).equal()
+		} },
+		[`&-lg ${componentCls}-dot`]: { "&, &-holder": { fontSize: token.dotSizeLG } },
+		[`&-lg ${componentCls}-dot-holder`]: { i: {
+			width: calc(calc(token.dotSizeLG).sub(token.marginXXS)).div(2).equal(),
+			height: calc(calc(token.dotSizeLG).sub(token.marginXXS)).div(2).equal()
+		} },
+		[`&${componentCls}-show-text ${componentCls}-text`]: { display: "block" }
+	} };
+};
+const prepareComponentToken = (token) => {
+	const { controlHeightLG, controlHeight } = token;
+	return {
+		contentHeight: 400,
+		dotSize: controlHeightLG / 2,
+		dotSizeSM: controlHeightLG * .35,
+		dotSizeLG: controlHeight
+	};
+};
+var style_default = genStyleHooks("Spin", (token) => {
+	return genSpinStyle(mergeToken(token, { spinDotDefault: token.colorTextDescription }));
+}, prepareComponentToken);
+
+//#endregion
+export { style_default as default };

package/dist/spin/usePercent.js

@@ -0,0 +1,40 @@
+import { computed, shallowRef, watch } from "vue";
+
+//#region src/spin/usePercent.ts
+const AUTO_INTERVAL = 200;
+const STEP_BUCKETS = [
+	[30, .05],
+	[70, .03],
+	[96, .01]
+];
+function usePercent(spinning, percent) {
+	const mockPercent = shallowRef(0);
+	let mockIntervalRef = null;
+	const isAuto = computed(() => percent.value === "auto");
+	watch([isAuto, spinning], (_n, _o, onCleanup) => {
+		if (isAuto.value && spinning.value) {
+			mockPercent.value = 0;
+			mockIntervalRef = setInterval(() => {
+				const prev = mockPercent.value;
+				const restPTG = 100 - prev;
+				for (let i = 0; i < STEP_BUCKETS.length; i += 1) {
+					const [limit, stepPtg] = STEP_BUCKETS[i];
+					if (prev <= limit) {
+						mockPercent.value = prev + restPTG * stepPtg;
+						break;
+					}
+				}
+			}, AUTO_INTERVAL);
+		}
+		onCleanup(() => {
+			if (mockIntervalRef) {
+				clearInterval(mockIntervalRef);
+				mockIntervalRef = null;
+			}
+		});
+	}, { immediate: true });
+	return computed(() => isAuto.value ? mockPercent.value : percent.value);
+}
+
+//#endregion
+export { usePercent as default };

package/dist/splitter/Panel.js

@@ -0,0 +1,64 @@
+import { createVNode, defineComponent, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+
+//#region src/splitter/Panel.tsx
+const InternalPanel = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	return () => {
+		const { prefixCls, class: className, size, style = {} } = props;
+		const panelClassName = clsx(`${prefixCls}-panel`, { [`${prefixCls}-panel-hidden`]: size === 0 }, className);
+		const hasSize = size !== void 0;
+		return createVNode("div", mergeProps(attrs, {
+			"class": panelClassName,
+			"style": {
+				...style,
+				flexBasis: hasSize ? `${size}px` : "auto",
+				flexGrow: hasSize ? 0 : 1
+			}
+		}), [slots?.default?.()]);
+	};
+}, {
+	props: {
+		class: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		min: {
+			type: [Number, String],
+			required: false
+		},
+		max: {
+			type: [Number, String],
+			required: false
+		},
+		size: {
+			type: [Number, String],
+			required: false
+		},
+		collapsible: {
+			type: [Boolean, Object],
+			required: false
+		},
+		resizable: {
+			type: Boolean,
+			required: false
+		},
+		defaultSize: {
+			type: [Number, String],
+			required: false
+		}
+	},
+	name: "ASplitterPanel",
+	inheritAttrs: false
+});
+var Panel_default = InternalPanel;
+
+//#endregion
+export { Panel_default as default };

package/dist/splitter/SplitBar.d.ts

@@ -0,0 +1,7 @@
+import "./interface.js";
+import { CSSProperties } from "vue";
+
+//#region src/splitter/SplitBar.d.ts
+type ShowCollapsibleIconMode = boolean | 'auto';
+//#endregion
+export { ShowCollapsibleIconMode };

package/dist/splitter/SplitBar.js

@@ -0,0 +1,261 @@
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import { computed, createVNode, defineComponent, mergeProps, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from "@antdv-next/icons";
+
+//#region src/splitter/SplitBar.tsx
+function getValidNumber(num) {
+	return typeof num === "number" && !Number.isNaN(num) && Number.isFinite(num) ? Math.round(num) : 0;
+}
+const SplitBar = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const { vertical, resizable, index, containerSize, ariaNow, ariaMin, ariaMax, prefixCls, lazy } = toPropsRefs(props, "vertical", "resizable", "index", "containerSize", "ariaNow", "ariaMin", "ariaMax", "prefixCls", "lazy");
+	const splitBarPrefixCls = computed(() => `${prefixCls.value}-bar`);
+	const startPos = shallowRef();
+	const constrainedOffset = shallowRef(0);
+	const constrainedOffsetX = computed(() => vertical.value ? 0 : constrainedOffset.value);
+	const constrainedOffsetY = computed(() => vertical.value ? constrainedOffset.value : 0);
+	const onMouseDown = (event) => {
+		if (resizable.value && event.currentTarget) {
+			startPos.value = [event.pageX, event.pageY];
+			props?.onOffsetStart?.(index.value);
+		}
+	};
+	const onTouchStart = (e) => {
+		if (resizable.value && e.touches.length === 1) {
+			const touch = e.touches[0];
+			startPos.value = [touch.pageX, touch.pageY];
+			props?.onOffsetStart?.(index.value);
+		}
+	};
+	const getConstrainedOffset = (rawOffset) => {
+		const currentPos = containerSize.value * ariaNow.value / 100;
+		const newPos = currentPos + rawOffset;
+		const minAllowed = Math.max(0, containerSize.value * ariaMin.value / 100);
+		const maxAllowed = Math.min(containerSize.value, containerSize.value * ariaMax.value / 100);
+		return Math.max(minAllowed, Math.min(maxAllowed, newPos)) - currentPos;
+	};
+	const handleLazyMove = (offsetX, offsetY) => {
+		constrainedOffset.value = getConstrainedOffset(vertical.value ? offsetY : offsetX);
+	};
+	const handleLazyEnd = () => {
+		props?.onOffsetUpdate?.(index.value, constrainedOffsetX.value, constrainedOffsetY.value, true);
+		constrainedOffset.value = 0;
+		props?.onOffsetEnd?.(true);
+	};
+	const getVisibilityClass = (mode) => {
+		switch (mode) {
+			case true: return `${splitBarPrefixCls.value}-collapse-bar-always-visible`;
+			case false: return `${splitBarPrefixCls.value}-collapse-bar-always-hidden`;
+			case "auto": return `${splitBarPrefixCls.value}-collapse-bar-hover-only`;
+		}
+	};
+	watch([
+		startPos,
+		index,
+		lazy
+	], (_n, _o, onCleanup) => {
+		if (!startPos.value) return;
+		const onMouseMove = (e) => {
+			const { pageX, pageY } = e;
+			const offsetX = pageX - startPos.value[0];
+			const offsetY = pageY - startPos.value[1];
+			if (lazy.value) handleLazyMove(offsetX, offsetY);
+			else props?.onOffsetUpdate?.(index.value, offsetX, offsetY);
+		};
+		const onMouseUp = () => {
+			if (lazy.value) handleLazyEnd();
+			else props?.onOffsetEnd?.();
+			startPos.value = void 0;
+		};
+		const handleTouchMove = (e) => {
+			if (e.touches.length === 1) {
+				const touch = e.touches[0];
+				const offsetX = touch.pageX - startPos.value[0];
+				const offsetY = touch.pageY - startPos.value[1];
+				if (lazy.value) handleLazyMove(offsetX, offsetY);
+				else props?.onOffsetUpdate?.(index.value, offsetX, offsetY);
+			}
+		};
+		const handleTouchEnd = () => {
+			if (lazy.value) handleLazyEnd();
+			else props?.onOffsetEnd?.();
+			startPos.value = void 0;
+		};
+		const eventHandlerMap = {
+			mousemove: onMouseMove,
+			mouseup: onMouseUp,
+			touchmove: handleTouchMove,
+			touchend: handleTouchEnd
+		};
+		for (const [event, handler] of Object.entries(eventHandlerMap)) window.addEventListener(event, handler);
+		onCleanup(() => {
+			for (const [event, handler] of Object.entries(eventHandlerMap)) window.removeEventListener(event, handler);
+		});
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	return () => {
+		const { collapsibleIcon, draggerClassName, draggerStyle, active, startCollapsible, showStartCollapsibleIcon, onCollapse, endCollapsible, showEndCollapsibleIcon } = props;
+		const transformStyle = { [`--${splitBarPrefixCls.value}-preview-offset`]: `${constrainedOffset.value}px` };
+		const propCollapsibleIconStart = collapsibleIcon?.start;
+		const propCollapsibleIconEnd = collapsibleIcon?.end;
+		const collapsibleIconStart = getSlotPropsFnRun(slots, { collapsibleIconStart: propCollapsibleIconStart }, "collapsibleIconStart", false);
+		const collapsibleIconEnd = getSlotPropsFnRun(slots, { collapsibleIconEnd: propCollapsibleIconEnd }, "collapsibleIconEnd", false);
+		const draggerIcon = getSlotPropsFnRun(slots, props, "draggerIcon", false);
+		const renderIconsFn = () => {
+			let startIcon$1 = null;
+			let endIcon$1 = null;
+			const startCustomize$1 = collapsibleIconStart !== void 0;
+			const endCustomize$1 = collapsibleIconEnd !== void 0;
+			if (vertical.value) {
+				startIcon$1 = startCustomize$1 ? collapsibleIconStart : createVNode(UpOutlined, null, null);
+				endIcon$1 = endCustomize$1 ? collapsibleIconEnd : createVNode(DownOutlined, null, null);
+			} else {
+				startIcon$1 = startCustomize$1 ? collapsibleIconStart : createVNode(LeftOutlined, null, null);
+				endIcon$1 = endCustomize$1 ? collapsibleIconEnd : createVNode(RightOutlined, null, null);
+			}
+			return [
+				startIcon$1,
+				endIcon$1,
+				startCustomize$1,
+				endCustomize$1
+			];
+		};
+		const [startIcon, endIcon, startCustomize, endCustomize] = renderIconsFn();
+		return createVNode("div", mergeProps(attrs, {
+			"class": splitBarPrefixCls.value,
+			"role": "separator",
+			"aria-valuenow": getValidNumber(ariaNow.value),
+			"aria-valuemin": getValidNumber(ariaMin.value),
+			"aria-valuemax": getValidNumber(ariaMax.value)
+		}), [
+			lazy.value && createVNode("div", {
+				"class": clsx(`${splitBarPrefixCls.value}-preview`, { [`${splitBarPrefixCls.value}-preview-active`]: !!constrainedOffset.value }),
+				"style": transformStyle
+			}, null),
+			createVNode("div", {
+				"style": draggerStyle,
+				"class": clsx(`${splitBarPrefixCls.value}-dragger`, {
+					[`${splitBarPrefixCls.value}-dragger-disabled`]: !resizable.value,
+					[`${splitBarPrefixCls.value}-dragger-active`]: active,
+					[`${splitBarPrefixCls.value}-dragger-customize`]: draggerIcon !== void 0
+				}, draggerClassName?.default, active && draggerClassName?.active),
+				"onMousedown": onMouseDown,
+				"onTouchstart": onTouchStart
+			}, [draggerIcon !== void 0 ? createVNode("div", { "class": clsx(`${splitBarPrefixCls.value}-dragger-icon`) }, [draggerIcon]) : null]),
+			startCollapsible && createVNode("div", {
+				"class": clsx(`${splitBarPrefixCls.value}-collapse-bar`, `${splitBarPrefixCls.value}-collapse-bar-start`, { [`${splitBarPrefixCls.value}-collapse-bar-customize`]: startCustomize }, getVisibilityClass(showStartCollapsibleIcon)),
+				"onClick": () => onCollapse(index.value, "start")
+			}, [createVNode("span", { "class": clsx(`${splitBarPrefixCls.value}-collapse-icon`, `${splitBarPrefixCls.value}-collapse-start`) }, [startIcon])]),
+			endCollapsible && createVNode("div", {
+				"class": clsx(`${splitBarPrefixCls.value}-collapse-bar`, `${splitBarPrefixCls.value}-collapse-bar-end`, { [`${splitBarPrefixCls.value}-collapse-bar-customize`]: endCustomize }, getVisibilityClass(showEndCollapsibleIcon)),
+				"onClick": () => onCollapse(index.value, "end")
+			}, [createVNode("span", { "class": clsx(`${splitBarPrefixCls.value}-collapse-icon`, `${splitBarPrefixCls.value}-collapse-end`) }, [endIcon])])
+		]);
+	};
+}, {
+	props: {
+		index: {
+			type: Number,
+			required: true
+		},
+		active: {
+			type: Boolean,
+			required: true
+		},
+		draggerStyle: {
+			type: Object,
+			required: false
+		},
+		draggerClassName: {
+			type: Object,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		resizable: {
+			type: Boolean,
+			required: true
+		},
+		startCollapsible: {
+			type: Boolean,
+			required: true
+		},
+		endCollapsible: {
+			type: Boolean,
+			required: true
+		},
+		draggerIcon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		collapsibleIcon: {
+			type: Object,
+			required: false
+		},
+		showStartCollapsibleIcon: {
+			type: [Boolean, String],
+			required: true
+		},
+		showEndCollapsibleIcon: {
+			type: [Boolean, String],
+			required: true
+		},
+		onOffsetStart: {
+			type: Function,
+			required: true
+		},
+		onOffsetUpdate: {
+			type: Function,
+			required: true
+		},
+		onOffsetEnd: {
+			type: Function,
+			required: true
+		},
+		onCollapse: {
+			type: Function,
+			required: true
+		},
+		vertical: {
+			type: Boolean,
+			required: true
+		},
+		ariaNow: {
+			type: Number,
+			required: true
+		},
+		ariaMin: {
+			type: Number,
+			required: true
+		},
+		ariaMax: {
+			type: Number,
+			required: true
+		},
+		lazy: {
+			type: Boolean,
+			required: false
+		},
+		containerSize: {
+			type: Number,
+			required: true
+		}
+	},
+	name: "SplitBar",
+	inheritAttrs: false
+});
+var SplitBar_default = SplitBar;
+
+//#endregion
+export { SplitBar_default as default };

package/dist/splitter/Splitter.d.ts

@@ -0,0 +1,10 @@
+import { SplitterEmits, SplitterProps, SplitterSlots } from "./interface.js";
+import * as vue402 from "vue";
+import { SlotsType } from "vue";
+
+//#region src/splitter/Splitter.d.ts
+declare const Splitter: vue402.DefineSetupFnComponent<SplitterProps, SplitterEmits, SlotsType<SplitterSlots>, SplitterProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue402.PublicProps>;
+//#endregion
+export { Splitter };