antdv-next 0.0.111 → 1.0.0-alpha.2

package/dist/tour/interface.d.ts

@@ -0,0 +1,90 @@
+import { VueNode } from "../_util/type.js";
+import { SemanticClassNames, SemanticClassNamesType, SemanticStyles, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import { CSSProperties } from "vue";
+import { TourProps, TourStepProps } from "@v-c/tour";
+
+//#region src/tour/interface.d.ts
+type TourSemanticName = 'root' | 'cover' | 'mask' | 'section' | 'footer' | 'actions' | 'indicator' | 'indicators' | 'header' | 'title' | 'description';
+type TourClassNamesType = SemanticClassNamesType<TourProps$1, TourSemanticName>;
+type TourStylesType = SemanticStylesType<TourProps$1, TourSemanticName>;
+interface TourProps$1 extends ComponentBaseProps, Omit<TourProps, 'classNames' | 'styles' | 'renderPanel' | 'rootClassName' | 'onClose' | 'onFinish' | 'onChange' | 'onPopupAlign' | 'className'> {
+  steps?: TourStepProps$1[];
+  prefixCls?: string;
+  current?: number;
+  indicatorsRender?: (current: number, total: number) => any;
+  actionsRender?: TourStepProps$1['actionsRender'];
+  type?: 'default' | 'primary';
+  classes?: TourClassNamesType;
+  styles?: TourStylesType;
+}
+interface TourEmits {
+  'change': (current: number) => void;
+  'close': (current: number) => void;
+  'finish': () => void;
+  'update:open': (open: boolean) => void;
+  'update:current': (current: number) => void;
+  'popupAlign': TourProps['onPopupAlign'];
+  [key: string]: (...args: any[]) => void;
+}
+interface TourSlots {
+  actionsRender: (originNode: any, info: {
+    current: number;
+    total: number;
+  }) => any;
+  indicatorsRender: (current: number, total: number) => any;
+  nextButton: (params: {
+    current: number;
+    isFirst: boolean;
+    isLast: boolean;
+  }) => any;
+  prevButton: (params: {
+    current: number;
+    isFirst: boolean;
+    isLast: boolean;
+  }) => any;
+  coverRender: (params: {
+    step: TourStepProps$1;
+    index: number;
+  }) => any;
+  titleRender: (params: {
+    step: TourStepProps$1;
+    index: number;
+  }) => any;
+  descriptionRender: (params: {
+    step: TourStepProps$1;
+    index: number;
+  }) => any;
+}
+interface TourStepProps$1 extends Omit<TourStepProps, 'className'> {
+  cover?: VueNode;
+  nextButtonProps?: {
+    children?: VueNode;
+    onClick?: () => void;
+    class?: string;
+    style?: CSSProperties;
+  };
+  prevButtonProps?: {
+    children?: VueNode;
+    onClick?: () => void;
+    class?: string;
+    style?: CSSProperties;
+  };
+  indicatorsRender?: (current: number, total: number) => any;
+  actionsRender?: (originNode: any, info: {
+    current: number;
+    total: number;
+  }) => any;
+  type?: 'default' | 'primary';
+  classes?: SemanticClassNames<TourSemanticName>;
+  styles?: SemanticStyles<TourSemanticName>;
+  class?: string;
+}
+interface TourLocale {
+  Next: string;
+  Previous: string;
+  Finish: string;
+}
+//#endregion
+export { TourEmits, TourLocale, TourProps$1 as TourProps, TourSemanticName, TourSlots, TourStepProps$1 as TourStepProps, TourStylesType };

package/dist/tour/panelRender.js

@@ -0,0 +1,163 @@
+import { getSlotPropsFnRun } from "../_util/tools.js";
+import en_US_default from "../locale/en_US.js";
+import useLocale_default from "../locale/useLocale.js";
+import button_default from "../button/index.js";
+import isNonNullable_default from "../_util/isNonNullable.js";
+import { Fragment, createVNode, defineComponent, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+import { CloseOutlined } from "@antdv-next/icons";
+import pickAttrs from "@v-c/util/dist/pickAttrs";
+
+//#region src/tour/panelRender.tsx
+const TourPanel = /* @__PURE__ */ defineComponent((props) => {
+	const [contextLocaleGlobal] = useLocale_default("global", en_US_default.global);
+	const [contextLocaleTour] = useLocale_default("Tour", en_US_default.Tour);
+	return () => {
+		const { stepProps, current, type, indicatorsRender, actionsRender } = props;
+		const { prefixCls, total = 1, title, onClose, onPrev, onNext, onFinish, cover, description, nextButtonProps, prevButtonProps, type: stepType, closable, classes = {}, styles = {} } = stepProps;
+		const ariaProps = pickAttrs(closable ?? {}, true);
+		const mergedType = stepType ?? type;
+		const mergedCloseIcon = createVNode("button", mergeProps({
+			"type": "button",
+			"onClick": onClose,
+			"class": `${prefixCls}-close`,
+			"aria-label": contextLocaleGlobal?.value.close
+		}, ariaProps), [closable?.closeIcon || createVNode(CloseOutlined, { "class": `${prefixCls}-close-icon` }, null)]);
+		const isLastStep = current === total - 1;
+		const prevBtnClick = () => {
+			onPrev?.();
+			prevButtonProps?.onClick?.();
+		};
+		const nextBtnClick = () => {
+			if (isLastStep) onFinish?.();
+			else onNext?.();
+			nextButtonProps?.onClick?.();
+		};
+		const _title = getSlotPropsFnRun({}, { title }, "title");
+		const headerNode = isNonNullable_default(_title) ? createVNode("div", {
+			"class": clsx(`${prefixCls}-header`, classes.header),
+			"style": styles.header
+		}, [createVNode("div", {
+			"class": clsx(`${prefixCls}-title`, classes.title),
+			"style": styles.title
+		}, [_title])]) : null;
+		const _description = getSlotPropsFnRun({}, { description }, "description");
+		const descriptionNode = isNonNullable_default(_description) ? createVNode("div", {
+			"class": clsx(`${prefixCls}-description`, classes.description),
+			"style": styles.description
+		}, [_description]) : null;
+		const _cover = getSlotPropsFnRun({}, { cover }, "cover");
+		const coverNode = isNonNullable_default(_cover) ? createVNode("div", {
+			"class": clsx(`${prefixCls}-cover`, classes.cover),
+			"style": styles.cover
+		}, [_cover]) : null;
+		let mergedIndicatorNode;
+		if (indicatorsRender) mergedIndicatorNode = indicatorsRender(current, total);
+		else mergedIndicatorNode = [...Array.from({ length: total }).keys()].map((stepItem, index) => createVNode("span", {
+			"key": stepItem,
+			"class": clsx(index === current && `${prefixCls}-indicator-active`, `${prefixCls}-indicator`, classes.indicator),
+			"style": styles.indicator
+		}, null));
+		const mainBtnType = mergedType === "primary" ? "default" : "primary";
+		const secondaryBtnProps = {
+			type: "default",
+			ghost: mergedType === "primary"
+		};
+		const prevButtonPropsChild = getSlotPropsFnRun({}, prevButtonProps ?? {}, "children");
+		let _prevBtn = props?.prevButtonProps?.({
+			current,
+			isFirst: current === 0,
+			isLast: isLastStep
+		});
+		_prevBtn = Array.isArray(_prevBtn) ? _prevBtn : [_prevBtn];
+		_prevBtn = filterEmpty(_prevBtn).filter(Boolean);
+		if (!_prevBtn.length) _prevBtn = prevButtonPropsChild;
+		const nextButtonPropsChild = getSlotPropsFnRun({}, nextButtonProps ?? {}, "children");
+		let _nextBtn = props?.nextButtonProps?.({
+			current,
+			isFirst: current === 0,
+			isLast: isLastStep
+		});
+		_nextBtn = Array.isArray(_nextBtn) ? _nextBtn : [_nextBtn];
+		_nextBtn = filterEmpty(_nextBtn).filter(Boolean);
+		if (!_nextBtn.length) _nextBtn = nextButtonPropsChild;
+		const defaultActionsNode = createVNode(Fragment, null, [current !== 0 ? createVNode(button_default, mergeProps({ "size": "small" }, secondaryBtnProps, prevButtonProps, {
+			"onClick": prevBtnClick,
+			"class": clsx(`${prefixCls}-prev-btn`, prevButtonProps?.class)
+		}), { default: () => [_prevBtn ?? contextLocaleTour?.value?.Previous] }) : null, createVNode(button_default, mergeProps({
+			"size": "small",
+			"type": mainBtnType
+		}, nextButtonProps, {
+			"onClick": nextBtnClick,
+			"class": clsx(`${prefixCls}-next-btn`, nextButtonProps?.class)
+		}), { default: () => [_nextBtn ?? (isLastStep ? contextLocaleTour?.value?.Finish : contextLocaleTour?.value?.Next)] })]);
+		return createVNode("div", { "class": `${prefixCls}-panel` }, [createVNode("div", {
+			"class": clsx(`${prefixCls}-section`, classes.section),
+			"style": styles.section
+		}, [
+			closable && mergedCloseIcon,
+			coverNode,
+			headerNode,
+			descriptionNode,
+			createVNode("div", {
+				"class": clsx(`${prefixCls}-footer`, classes.footer),
+				"style": styles.footer
+			}, [total > 1 && createVNode("div", {
+				"class": clsx(`${prefixCls}-indicators`, classes.indicators),
+				"style": styles.indicators
+			}, [mergedIndicatorNode]), createVNode("div", {
+				"class": clsx(`${prefixCls}-actions`, classes.actions),
+				"style": styles.actions
+			}, [actionsRender ? actionsRender(defaultActionsNode, {
+				current,
+				total
+			}) : defaultActionsNode])])
+		])]);
+	};
+}, {
+	props: {
+		stepProps: {
+			type: Object,
+			required: true
+		},
+		current: {
+			type: Number,
+			required: true
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		indicatorsRender: {
+			type: Function,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		actionsRender: {
+			type: Function,
+			required: false
+		},
+		prevButtonProps: {
+			type: Function,
+			required: false
+		},
+		nextButtonProps: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "TourPanel",
+	inheritAttrs: false
+});
+var panelRender_default = TourPanel;
+
+//#endregion
+export { panelRender_default as default };

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

@@ -0,0 +1,30 @@
+import { ArrowToken } from "../../style/roundedArrow.js";
+import { ArrowOffsetToken } from "../../style/placementArrow.js";
+import "../../theme/internal.js";
+import "vue";
+
+//#region src/tour/style/index.d.ts
+interface ComponentToken extends ArrowOffsetToken, ArrowToken {
+  /**
+   * @desc 弹层 z-index
+   * @descEN Tour popup z-index
+   */
+  zIndexPopup: number;
+  /**
+   * @desc 关闭按钮尺寸
+   * @descEN Close button size
+   */
+  closeBtnSize: number;
+  /**
+   * @desc Primary 模式上一步按钮背景色
+   * @descEN Background color of previous button in primary type
+   */
+  primaryPrevBtnBg: string;
+  /**
+   * @desc Primary 模式下一步按钮悬浮背景色
+   * @descEN Hover background color of next button in primary type
+   */
+  primaryNextBtnHoverBg: string;
+}
+//#endregion
+export { ComponentToken };

package/dist/tour/style/index.js

@@ -0,0 +1,160 @@
+import { genFocusStyle, 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, { MAX_VERTICAL_CONTENT_RADIUS, getArrowOffsetToken } from "../../style/placementArrow.js";
+import { unit } from "@antdv-next/cssinjs";
+import { FastColor } from "@ant-design/fast-color";
+
+//#region src/tour/style/index.ts
+const genBaseStyle = (token) => {
+	const { componentCls, padding, paddingXS, borderRadius, borderRadiusXS, colorPrimary, colorFill, indicatorHeight, indicatorWidth, boxShadowTertiary, zIndexPopup, colorBgElevated, fontWeightStrong, marginXS, colorTextLightSolid, tourBorderRadius, colorWhite, primaryNextBtnHoverBg, closeBtnSize, motionDurationSlow, antCls, primaryPrevBtnBg } = token;
+	return [{
+		[componentCls]: {
+			...resetComponent(token),
+			"position": "absolute",
+			"zIndex": zIndexPopup,
+			"maxWidth": "fit-content",
+			"visibility": "visible",
+			"width": 520,
+			"--antd-arrow-background-color": colorBgElevated,
+			"&-pure": {
+				maxWidth: "100%",
+				position: "relative"
+			},
+			[`&${componentCls}-hidden`]: { display: "none" },
+			[`${componentCls}-panel`]: { position: "relative" },
+			[`${componentCls}-section`]: {
+				textAlign: "start",
+				textDecoration: "none",
+				borderRadius: tourBorderRadius,
+				boxShadow: boxShadowTertiary,
+				position: "relative",
+				backgroundColor: colorBgElevated,
+				border: "none",
+				backgroundClip: "padding-box",
+				[`${componentCls}-close`]: {
+					"position": "absolute",
+					"top": padding,
+					"insetInlineEnd": padding,
+					"color": token.colorIcon,
+					"background": "none",
+					"border": "none",
+					"width": closeBtnSize,
+					"height": closeBtnSize,
+					"borderRadius": token.borderRadiusSM,
+					"transition": `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`,
+					"display": "flex",
+					"alignItems": "center",
+					"justifyContent": "center",
+					"cursor": "pointer",
+					"&:hover": {
+						color: token.colorIconHover,
+						backgroundColor: token.colorBgTextHover
+					},
+					"&:active": { backgroundColor: token.colorBgTextActive },
+					...genFocusStyle(token)
+				},
+				[`${componentCls}-cover`]: {
+					textAlign: "center",
+					padding: `${unit(token.calc(padding).add(closeBtnSize).add(paddingXS).equal())} ${unit(padding)} 0`,
+					img: { width: "100%" }
+				},
+				[`${componentCls}-header`]: {
+					padding: `${unit(padding)} ${unit(padding)} ${unit(paddingXS)}`,
+					width: `calc(100% - ${unit(closeBtnSize)})`,
+					wordBreak: "break-word",
+					[`${componentCls}-title`]: { fontWeight: fontWeightStrong }
+				},
+				[`${componentCls}-description`]: {
+					padding: `0 ${unit(padding)}`,
+					wordWrap: "break-word"
+				},
+				[`${componentCls}-footer`]: {
+					padding: `${unit(paddingXS)} ${unit(padding)} ${unit(padding)}`,
+					textAlign: "end",
+					borderRadius: `0 0 ${unit(borderRadiusXS)} ${unit(borderRadiusXS)}`,
+					display: "flex",
+					[`${componentCls}-indicators`]: {
+						display: "inline-block",
+						[`${componentCls}-indicator`]: {
+							"width": indicatorWidth,
+							"height": indicatorHeight,
+							"display": "inline-block",
+							"borderRadius": "50%",
+							"background": colorFill,
+							"&:not(:last-child)": { marginInlineEnd: indicatorHeight },
+							"&-active": { background: colorPrimary }
+						}
+					},
+					[`${componentCls}-actions`]: {
+						marginInlineStart: "auto",
+						[`${antCls}-btn`]: { marginInlineStart: marginXS }
+					}
+				}
+			},
+			[`${componentCls}-primary, &${componentCls}-primary`]: {
+				"--antd-arrow-background-color": colorPrimary,
+				[`${componentCls}-section`]: {
+					color: colorTextLightSolid,
+					textAlign: "start",
+					textDecoration: "none",
+					backgroundColor: colorPrimary,
+					borderRadius,
+					boxShadow: boxShadowTertiary,
+					[`${componentCls}-close`]: { color: colorTextLightSolid },
+					[`${componentCls}-indicators`]: { [`${componentCls}-indicator`]: {
+						"background": primaryPrevBtnBg,
+						"&-active": { background: colorTextLightSolid }
+					} },
+					[`${componentCls}-prev-btn`]: {
+						"color": colorTextLightSolid,
+						"borderColor": primaryPrevBtnBg,
+						"backgroundColor": colorPrimary,
+						"&:hover": {
+							backgroundColor: primaryPrevBtnBg,
+							borderColor: "transparent"
+						}
+					},
+					[`${componentCls}-next-btn`]: {
+						"color": colorPrimary,
+						"borderColor": "transparent",
+						"background": colorWhite,
+						"&:hover": { background: primaryNextBtnHoverBg }
+					}
+				}
+			}
+		},
+		[`${componentCls}-mask`]: { [`${componentCls}-placeholder-animated`]: { transition: `all ${motionDurationSlow}` } },
+		[[
+			"&-placement-left",
+			"&-placement-leftTop",
+			"&-placement-leftBottom",
+			"&-placement-right",
+			"&-placement-rightTop",
+			"&-placement-rightBottom"
+		].join(",")]: { [`${componentCls}-section`]: { borderRadius: token.min(tourBorderRadius, MAX_VERTICAL_CONTENT_RADIUS) } }
+	}, getArrowStyle(token, "var(--antd-arrow-background-color)")];
+};
+const prepareComponentToken = (token) => ({
+	zIndexPopup: token.zIndexPopupBase + 70,
+	closeBtnSize: token.fontSize * token.lineHeight,
+	primaryPrevBtnBg: new FastColor(token.colorTextLightSolid).setA(.15).toRgbString(),
+	primaryNextBtnHoverBg: new FastColor(token.colorBgTextHover).onBackground(token.colorWhite).toRgbString(),
+	...getArrowOffsetToken({
+		contentRadius: token.borderRadiusLG,
+		limitVerticalRadius: true
+	}),
+	...getArrowToken(token)
+});
+var style_default = genStyleHooks("Tour", (token) => {
+	const { borderRadiusLG } = token;
+	return genBaseStyle(mergeToken(token, {
+		indicatorWidth: 6,
+		indicatorHeight: 6,
+		tourBorderRadius: borderRadiusLG
+	}));
+}, prepareComponentToken);
+
+//#endregion
+export { style_default as default };

package/dist/transfer/Actions.d.ts

@@ -0,0 +1,21 @@
+import { VueNode } from "../_util/type.js";
+import { DirectionType } from "../config-provider/context.js";
+import * as vue211 from "vue";
+import { CSSProperties } from "vue";
+
+//#region src/transfer/Actions.d.ts
+interface TransferOperationProps {
+  class?: string;
+  actions: VueNode[];
+  moveToLeft?: (event: MouseEvent) => void;
+  moveToRight?: (event: MouseEvent) => void;
+  leftActive?: boolean;
+  rightActive?: boolean;
+  style?: CSSProperties;
+  disabled?: boolean;
+  direction?: DirectionType;
+  oneWay?: boolean;
+}
+declare const Actions: vue211.DefineSetupFnComponent<TransferOperationProps, {}, {}, TransferOperationProps & {}, vue211.PublicProps>;
+//#endregion
+export { Actions, TransferOperationProps };

package/dist/transfer/Actions.js

@@ -0,0 +1,144 @@
+import button_default from "../button/index.js";
+import { cloneVNode, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { LeftOutlined, RightOutlined } from "@antdv-next/icons";
+
+//#region src/transfer/Actions.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function getArrowIcon(type, direction) {
+	const isRight = type === "right";
+	if (direction !== "rtl") return isRight ? createVNode(RightOutlined, null, null) : createVNode(LeftOutlined, null, null);
+	return isRight ? createVNode(LeftOutlined, null, null) : createVNode(RightOutlined, null, null);
+}
+const Action = /* @__PURE__ */ defineComponent((props) => {
+	return () => {
+		const isRight = props.type === "right";
+		const button = isRight ? props.actions[0] : props.actions[1];
+		const moveHandler = isRight ? props.moveToRight : props.moveToLeft;
+		const active = isRight ? props.rightActive : props.leftActive;
+		const icon = getArrowIcon(props.type, props.direction);
+		if (isVNode(button)) {
+			const onClick = (event) => {
+				(button.props || {})?.onClick?.(event);
+				moveHandler?.(event);
+			};
+			return cloneVNode(button, {
+				disabled: props.disabled || !active,
+				onClick
+			});
+		}
+		return createVNode(button_default, {
+			"type": "primary",
+			"size": "small",
+			"disabled": props.disabled || !active,
+			"onClick": (event) => moveHandler?.(event),
+			"icon": icon
+		}, _isSlot(button) ? button : { default: () => [button] });
+	};
+}, {
+	props: {
+		type: {
+			type: String,
+			required: true
+		},
+		actions: {
+			type: Array,
+			required: true
+		},
+		moveToLeft: {
+			type: Function,
+			required: false
+		},
+		moveToRight: {
+			type: Function,
+			required: false
+		},
+		leftActive: {
+			type: Boolean,
+			required: false
+		},
+		rightActive: {
+			type: Boolean,
+			required: false
+		},
+		direction: {
+			type: [String, null],
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		}
+	},
+	name: "ATransferAction",
+	inheritAttrs: false
+});
+const Actions = /* @__PURE__ */ defineComponent((props) => {
+	return () => {
+		const { class: className, style, oneWay, actions,...restProps } = props;
+		return createVNode("div", {
+			"class": className,
+			"style": style
+		}, [
+			createVNode(Action, mergeProps({
+				"type": "right",
+				"actions": actions
+			}, restProps), null),
+			!oneWay && createVNode(Action, mergeProps({
+				"type": "left",
+				"actions": actions
+			}, restProps), null),
+			actions.slice(oneWay ? 1 : 2).map((node) => node)
+		]);
+	};
+}, {
+	props: {
+		class: {
+			type: String,
+			required: false
+		},
+		actions: {
+			type: Array,
+			required: true
+		},
+		moveToLeft: {
+			type: Function,
+			required: false
+		},
+		moveToRight: {
+			type: Function,
+			required: false
+		},
+		leftActive: {
+			type: Boolean,
+			required: false
+		},
+		rightActive: {
+			type: Boolean,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		direction: {
+			type: [String, null],
+			required: false
+		},
+		oneWay: {
+			type: Boolean,
+			required: false
+		}
+	},
+	name: "ATransferOperation",
+	inheritAttrs: false
+});
+var Actions_default = Actions;
+
+//#endregion
+export { Actions_default as default };