antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/slider/style/index.js

@@ -0,0 +1,262 @@
+import { resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { unit } from "@antdv-next/cssinjs";
+import { FastColor } from "@ant-design/fast-color";
+
+//#region src/slider/style/index.ts
+const genBaseStyle = (token) => {
+	const { componentCls, antCls, controlSize, dotSize, marginFull, marginPart, colorFillContentHover, handleColorDisabled, calc, handleSize, handleSizeHover, handleActiveColor, handleActiveOutlineColor, handleLineWidth, handleLineWidthHover, motionDurationMid } = token;
+	return { [componentCls]: {
+		...resetComponent(token),
+		"position": "relative",
+		"height": controlSize,
+		"margin": `${unit(marginPart)} ${unit(marginFull)}`,
+		"padding": 0,
+		"cursor": "pointer",
+		"touchAction": "none",
+		"&-vertical": { margin: `${unit(marginFull)} ${unit(marginPart)}` },
+		[`${componentCls}-rail`]: {
+			position: "absolute",
+			backgroundColor: token.railBg,
+			borderRadius: token.borderRadiusXS,
+			transition: `background-color ${motionDurationMid}`
+		},
+		[`${componentCls}-track,${componentCls}-tracks`]: {
+			position: "absolute",
+			transition: `background-color ${motionDurationMid}`
+		},
+		[`${componentCls}-track`]: {
+			backgroundColor: token.trackBg,
+			borderRadius: token.borderRadiusXS
+		},
+		[`${componentCls}-track-draggable`]: {
+			boxSizing: "content-box",
+			backgroundClip: "content-box",
+			border: "solid rgba(0,0,0,0)"
+		},
+		"&:hover": {
+			[`${componentCls}-rail`]: { backgroundColor: token.railHoverBg },
+			[`${componentCls}-track`]: { backgroundColor: token.trackHoverBg },
+			[`${componentCls}-dot`]: { borderColor: colorFillContentHover },
+			[`${componentCls}-handle::after`]: { boxShadow: `0 0 0 ${unit(handleLineWidth)} ${token.colorPrimaryBorderHover}` },
+			[`${componentCls}-dot-active`]: { borderColor: token.dotActiveBorderColor }
+		},
+		[`${componentCls}-handle`]: {
+			"position": "absolute",
+			"width": handleSize,
+			"height": handleSize,
+			"outline": "none",
+			"userSelect": "none",
+			"&-dragging-delete": { opacity: 0 },
+			"&::before": {
+				content: "\"\"",
+				position: "absolute",
+				insetInlineStart: calc(handleLineWidth).mul(-1).equal(),
+				insetBlockStart: calc(handleLineWidth).mul(-1).equal(),
+				width: calc(handleSize).add(calc(handleLineWidth).mul(2)).equal(),
+				height: calc(handleSize).add(calc(handleLineWidth).mul(2)).equal(),
+				backgroundColor: "transparent"
+			},
+			"&::after": {
+				content: "\"\"",
+				position: "absolute",
+				insetBlockStart: 0,
+				insetInlineStart: 0,
+				width: handleSize,
+				height: handleSize,
+				backgroundColor: token.colorBgElevated,
+				boxShadow: `0 0 0 ${unit(handleLineWidth)} ${token.handleColor}`,
+				outline: `0px solid transparent`,
+				borderRadius: "50%",
+				cursor: "pointer",
+				transition: `
+            inset-inline-start ${motionDurationMid},
+            inset-block-start ${motionDurationMid},
+            width ${motionDurationMid},
+            height ${motionDurationMid},
+            box-shadow ${motionDurationMid},
+            outline ${motionDurationMid}
+          `
+			},
+			"&:hover, &:active, &:focus": {
+				"&::before": {
+					insetInlineStart: calc(handleSizeHover).sub(handleSize).div(2).add(handleLineWidthHover).mul(-1).equal(),
+					insetBlockStart: calc(handleSizeHover).sub(handleSize).div(2).add(handleLineWidthHover).mul(-1).equal(),
+					width: calc(handleSizeHover).add(calc(handleLineWidthHover).mul(2)).equal(),
+					height: calc(handleSizeHover).add(calc(handleLineWidthHover).mul(2)).equal()
+				},
+				"&::after": {
+					boxShadow: `0 0 0 ${unit(handleLineWidthHover)} ${handleActiveColor}`,
+					outline: `6px solid ${handleActiveOutlineColor}`,
+					width: handleSizeHover,
+					height: handleSizeHover,
+					insetInlineStart: token.calc(handleSize).sub(handleSizeHover).div(2).equal(),
+					insetBlockStart: token.calc(handleSize).sub(handleSizeHover).div(2).equal()
+				}
+			}
+		},
+		[`&-lock ${componentCls}-handle`]: { "&::before, &::after": { transition: "none" } },
+		[`${componentCls}-mark`]: {
+			position: "absolute",
+			fontSize: token.fontSize
+		},
+		[`${componentCls}-mark-text`]: {
+			"position": "absolute",
+			"display": "inline-block",
+			"color": token.colorTextDescription,
+			"textAlign": "center",
+			"wordBreak": "keep-all",
+			"cursor": "pointer",
+			"userSelect": "none",
+			"&-active": { color: token.colorText }
+		},
+		[`${componentCls}-step`]: {
+			position: "absolute",
+			background: "transparent",
+			pointerEvents: "none"
+		},
+		[`${componentCls}-dot`]: {
+			"position": "absolute",
+			"width": dotSize,
+			"height": dotSize,
+			"backgroundColor": token.colorBgElevated,
+			"border": `${unit(handleLineWidth)} solid ${token.dotBorderColor}`,
+			"borderRadius": "50%",
+			"cursor": "pointer",
+			"transition": `border-color ${token.motionDurationSlow}`,
+			"pointerEvents": "auto",
+			"&-active": { borderColor: token.dotActiveBorderColor }
+		},
+		[`&${componentCls}-disabled`]: {
+			cursor: "not-allowed",
+			[`${componentCls}-rail`]: { backgroundColor: `${token.railBg} !important` },
+			[`${componentCls}-track`]: { backgroundColor: `${token.trackBgDisabled} !important` },
+			[`
+          ${componentCls}-dot
+        `]: {
+				backgroundColor: token.colorBgElevated,
+				borderColor: token.trackBgDisabled,
+				boxShadow: "none",
+				cursor: "not-allowed"
+			},
+			[`${componentCls}-handle::after`]: {
+				backgroundColor: token.colorBgElevated,
+				cursor: "not-allowed",
+				width: handleSize,
+				height: handleSize,
+				boxShadow: `0 0 0 ${unit(handleLineWidth)} ${handleColorDisabled}`,
+				insetInlineStart: 0,
+				insetBlockStart: 0
+			},
+			[`
+          ${componentCls}-mark-text,
+          ${componentCls}-dot
+        `]: { cursor: `not-allowed !important` }
+		},
+		[`&-tooltip ${antCls}-tooltip-container`]: { minWidth: "unset" }
+	} };
+};
+function genDirectionStyle(token, horizontal) {
+	const { componentCls, railSize, handleSize, dotSize, marginFull, calc } = token;
+	const railPadding = horizontal ? "paddingBlock" : "paddingInline";
+	const full = horizontal ? "width" : "height";
+	const part = horizontal ? "height" : "width";
+	const handlePos = horizontal ? "insetBlockStart" : "insetInlineStart";
+	const markInset = horizontal ? "top" : "insetInlineStart";
+	const handlePosSize = calc(railSize).mul(3).sub(handleSize).div(2).equal();
+	const draggableBorderSize = calc(handleSize).sub(railSize).div(2).equal();
+	const draggableBorder = horizontal ? {
+		borderWidth: `${unit(draggableBorderSize)} 0`,
+		transform: `translateY(${unit(calc(draggableBorderSize).mul(-1).equal())})`
+	} : {
+		borderWidth: `0 ${unit(draggableBorderSize)}`,
+		transform: `translateX(${unit(token.calc(draggableBorderSize).mul(-1).equal())})`
+	};
+	return {
+		[railPadding]: railSize,
+		[part]: calc(railSize).mul(3).equal(),
+		[`${componentCls}-rail`]: {
+			[full]: "100%",
+			[part]: railSize
+		},
+		[`${componentCls}-track,${componentCls}-tracks`]: { [part]: railSize },
+		[`${componentCls}-track-draggable`]: { ...draggableBorder },
+		[`${componentCls}-handle`]: { [handlePos]: handlePosSize },
+		[`${componentCls}-mark`]: {
+			insetInlineStart: 0,
+			top: 0,
+			[markInset]: calc(railSize).mul(3).add(horizontal ? 0 : marginFull).equal(),
+			[full]: "100%"
+		},
+		[`${componentCls}-step`]: {
+			insetInlineStart: 0,
+			top: 0,
+			[markInset]: railSize,
+			[full]: "100%",
+			[part]: railSize
+		},
+		[`${componentCls}-dot`]: {
+			position: "absolute",
+			[handlePos]: calc(railSize).sub(dotSize).div(2).equal()
+		}
+	};
+}
+const genHorizontalStyle = (token) => {
+	const { componentCls, marginPartWithMark } = token;
+	return { [`${componentCls}-horizontal`]: {
+		...genDirectionStyle(token, true),
+		[`&${componentCls}-with-marks`]: { marginBottom: marginPartWithMark }
+	} };
+};
+const genVerticalStyle = (token) => {
+	const { componentCls } = token;
+	return { [`${componentCls}-vertical`]: {
+		...genDirectionStyle(token, false),
+		height: "100%"
+	} };
+};
+const prepareComponentToken = (token) => {
+	const increaseHandleWidth = 1;
+	const controlSize = token.controlHeightLG / 4;
+	const controlSizeHover = token.controlHeightSM / 2;
+	const handleLineWidth = token.lineWidth + increaseHandleWidth;
+	const handleLineWidthHover = token.lineWidth + increaseHandleWidth * 1.5;
+	const handleActiveColor = token.colorPrimary;
+	const handleActiveOutlineColor = new FastColor(handleActiveColor).setA(.2).toRgbString();
+	return {
+		controlSize,
+		railSize: 4,
+		handleSize: controlSize,
+		handleSizeHover: controlSizeHover,
+		dotSize: 8,
+		handleLineWidth,
+		handleLineWidthHover,
+		railBg: token.colorFillTertiary,
+		railHoverBg: token.colorFillSecondary,
+		trackBg: token.colorPrimaryBorder,
+		trackHoverBg: token.colorPrimaryBorderHover,
+		handleColor: token.colorPrimaryBorder,
+		handleActiveColor,
+		handleActiveOutlineColor,
+		handleColorDisabled: new FastColor(token.colorTextDisabled).onBackground(token.colorBgContainer).toHexString(),
+		dotBorderColor: token.colorBorderSecondary,
+		dotActiveBorderColor: token.colorPrimaryBorder,
+		trackBgDisabled: token.colorBgContainerDisabled
+	};
+};
+var style_default = genStyleHooks("Slider", (token) => {
+	const sliderToken = mergeToken(token, {
+		marginPart: token.calc(token.controlHeight).sub(token.controlSize).div(2).equal(),
+		marginFull: token.calc(token.controlSize).div(2).equal(),
+		marginPartWithMark: token.calc(token.controlHeightLG).sub(token.controlSize).equal()
+	});
+	return [
+		genBaseStyle(sliderToken),
+		genHorizontalStyle(sliderToken),
+		genVerticalStyle(sliderToken)
+	];
+}, prepareComponentToken);
+
+//#endregion
+export { style_default as default };

package/dist/slider/useRafLock.js

@@ -0,0 +1,25 @@
+import { onBeforeUnmount, shallowRef } from "vue";
+import raf from "@v-c/util/dist/raf";
+
+//#region src/slider/useRafLock.ts
+function useRafLock() {
+	const state = shallowRef(false);
+	const rafRef = shallowRef(null);
+	const cleanup = () => {
+		raf.cancel(rafRef.value);
+	};
+	const setDelayState = (nextState) => {
+		cleanup();
+		if (nextState) state.value = nextState;
+		else rafRef.value = raf(() => {
+			state.value = nextState;
+		});
+	};
+	onBeforeUnmount(() => {
+		cleanup();
+	});
+	return [state, setDelayState];
+}
+
+//#endregion
+export { useRafLock as default };

package/dist/space/Addon.d.ts

@@ -0,0 +1,13 @@
+import { InputStatus } from "../_util/statusUtils.js";
+import { Variant } from "../config-provider/context.js";
+import "vue";
+
+//#region src/space/Addon.d.ts
+interface SpaceCompactCellProps {
+  prefixCls?: string;
+  variant?: Variant;
+  disabled?: boolean;
+  status?: InputStatus;
+}
+//#endregion
+export { SpaceCompactCellProps };

package/dist/space/Addon.js

@@ -0,0 +1,53 @@
+import { useBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { useCompactItemContext } from "./Compact.js";
+import { getStatusClassNames } from "../_util/statusUtils.js";
+import addon_default from "./style/addon.js";
+import { createVNode, defineComponent, mergeDefaults, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+
+//#region src/space/Addon.tsx
+const SpaceAddon = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const { prefixCls, direction: directionConfig } = useBaseConfig("space-addon", props);
+	const [hashId, cssVarCls] = addon_default(prefixCls);
+	const { compactItemClassnames, compactSize } = useCompactItemContext(prefixCls, directionConfig);
+	return () => {
+		const { status, variant, disabled } = props;
+		const statusCls = getStatusClassNames(prefixCls.value, status);
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const classes = clsx(prefixCls.value, hashId.value, compactItemClassnames.value, cssVarCls.value, `${prefixCls.value}-variant-${variant}`, statusCls, {
+			[`${prefixCls.value}-${compactSize.value}`]: compactSize.value,
+			[`${prefixCls.value}-disabled`]: disabled
+		}, className);
+		return createVNode("div", mergeProps({
+			"class": classes,
+			"style": style
+		}, restAttrs), [slots?.default?.()]);
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		}
+	}, { variant: "outlined" }),
+	name: "ASpaceAddon",
+	inheritAttrs: false
+});
+var Addon_default = SpaceAddon;
+
+//#endregion
+export { Addon_default as default };

package/dist/space/Compact.d.ts

@@ -0,0 +1,12 @@
+import { SizeType } from "../config-provider/SizeContext.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import { Ref } from "vue";
+
+//#region src/space/Compact.d.ts
+interface SpaceCompactProps extends ComponentBaseProps {
+  size?: SizeType;
+  direction?: 'horizontal' | 'vertical';
+  block?: boolean;
+}
+//#endregion
+export { SpaceCompactProps };

package/dist/space/Compact.js

@@ -0,0 +1,123 @@
+import { useConfig } from "../config-provider/context.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, inject, isVNode, mergeProps, provide, ref } from "vue";
+import { classNames } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+
+//#region src/space/Compact.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const SpaceCompactItemContext = Symbol("SpaceCompactItemContext");
+function useSpaceCompactItemContext() {
+	return inject(SpaceCompactItemContext, ref(null));
+}
+function useCompactItemContext(prefixCls, direction) {
+	const compactItemContext = useSpaceCompactItemContext();
+	const compactItemClassnames = computed(() => {
+		if (!compactItemContext.value) return "";
+		const { compactDirection, isFirstItem, isLastItem } = compactItemContext.value;
+		const separator = compactDirection === "vertical" ? "-vertical-" : "-";
+		return classNames(`${prefixCls.value}-compact${separator}item`, {
+			[`${prefixCls.value}-compact${separator}first-item`]: isFirstItem,
+			[`${prefixCls.value}-compact${separator}last-item`]: isLastItem,
+			[`${prefixCls.value}-compact${separator}item-rtl`]: direction.value === "rtl"
+		});
+	});
+	return {
+		compactSize: computed(() => compactItemContext.value?.compactSize),
+		compactDirection: computed(() => compactItemContext.value?.compactDirection),
+		compactItemClassnames
+	};
+}
+const NoCompactStyle = /* @__PURE__ */ defineComponent((_, { slots }) => {
+	provide(SpaceCompactItemContext, ref(null));
+	return () => {
+		return slots?.default?.();
+	};
+}, {
+	name: "ASpaceNoCompactStyle",
+	inheritAttrs: false
+});
+const CompactItem = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	provide(SpaceCompactItemContext, computed(() => props));
+	return () => {
+		return slots?.default?.();
+	};
+}, { props: {
+	compactSize: {
+		type: [String, null],
+		required: false
+	},
+	compactDirection: {
+		type: String,
+		required: false
+	},
+	isFirstItem: {
+		type: Boolean,
+		required: false
+	},
+	isLastItem: {
+		type: Boolean,
+		required: false
+	}
+} });
+const Compact = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const mergedSize = useSize((ctx) => props?.size ?? ctx);
+	const configContext = useConfig();
+	const prefixCls = computed(() => configContext.value?.getPrefixCls?.("space-compact", props.prefixCls));
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const compactItemContext = useSpaceCompactItemContext();
+	return () => {
+		const { rootClass, direction, block } = props;
+		const directionConfig = configContext.value?.direction;
+		const clx = classNames(prefixCls.value, hashId.value, cssVarCls.value, {
+			[`${prefixCls.value}-rtl`]: directionConfig === "rtl",
+			[`${prefixCls.value}-block`]: block,
+			[`${prefixCls.value}-vertical`]: direction === "vertical"
+		}, rootClass);
+		const childNodes = filterEmpty(slots?.default?.());
+		const nodes = childNodes.map((child, i) => {
+			const key = child?.key || `${prefixCls.value}-item-${i}`;
+			return createVNode(CompactItem, {
+				"compactSize": mergedSize.value,
+				"compactDirection": direction,
+				"isFirstItem": i === 0 && (!compactItemContext.value || compactItemContext.value?.isFirstItem),
+				"key": key,
+				"isLastItem": i === childNodes.length - 1 && (!compactItemContext.value || compactItemContext.value?.isLastItem)
+			}, _isSlot(child) ? child : { default: () => [child] });
+		});
+		if (childNodes.length === 0) return null;
+		return createVNode("div", mergeProps({ "class": clx }, attrs), [nodes]);
+	};
+}, {
+	props: {
+		size: {
+			type: [String, null],
+			required: false
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		block: {
+			type: Boolean,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	},
+	name: "ASpaceCompact",
+	inheritAttrs: false
+});
+var Compact_default = Compact;
+
+//#endregion
+export { NoCompactStyle, Compact_default as default, useCompactItemContext };

package/dist/space/Item.js

@@ -0,0 +1,40 @@
+import { useSpaceContext } from "./context.js";
+import { Fragment, createVNode, defineComponent, mergeProps } from "vue";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+
+//#region src/space/Item.tsx
+const Item = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const spaceContext = useSpaceContext();
+	return () => {
+		const { index, className, classes, styles } = props;
+		const { latestIndex } = spaceContext.value;
+		const children = filterEmpty(slots?.default?.());
+		const separator = filterEmpty(slots?.separator?.());
+		if (children.length === 0) return null;
+		return createVNode(Fragment, null, [createVNode("div", mergeProps({ "class": className }, attrs), [children]), index < latestIndex && !!separator.length && createVNode("span", {
+			"class": [`${className}-item-separator`, classes.separator],
+			"style": styles.separator
+		}, [separator])]);
+	};
+}, { props: {
+	index: {
+		type: Number,
+		required: true
+	},
+	className: {
+		type: String,
+		required: true
+	},
+	classes: {
+		type: Object,
+		required: true
+	},
+	styles: {
+		type: Object,
+		required: true
+	}
+} });
+var Item_default = Item;
+
+//#endregion
+export { Item_default as default };

package/dist/space/context.js

@@ -0,0 +1,13 @@
+import { inject, provide, ref } from "vue";
+
+//#region src/space/context.ts
+const SpaceContextKey = Symbol("SpaceContextKey");
+function useSpaceContextProvider(props) {
+	provide(SpaceContextKey, props);
+}
+function useSpaceContext() {
+	return inject(SpaceContextKey, ref({ latestIndex: 0 }));
+}
+
+//#endregion
+export { useSpaceContext, useSpaceContextProvider };

package/dist/space/index.d.ts

@@ -0,0 +1,39 @@
+import { EmptyEmit, VueNode } from "../_util/type.js";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import { Orientation } from "../_util/hooks/useOrientation.js";
+import "../_util/hooks/index.js";
+import { SizeType } from "../config-provider/SizeContext.js";
+import { SpaceCompactProps } from "./Compact.js";
+import { SpaceCompactCellProps } from "./Addon.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import * as vue150 from "vue";
+import { SlotsType } from "vue";
+
+//#region src/space/index.d.ts
+type SpaceSize = SizeType | number;
+type SemanticName = 'root' | 'item' | 'separator';
+type SpaceClassNamesType = SemanticClassNamesType<SpaceProps, SemanticName>;
+type SpaceStylesType = SemanticStylesType<SpaceProps, SemanticName>;
+interface SpaceProps extends ComponentBaseProps {
+  size?: SpaceSize | [SpaceSize, SpaceSize];
+  /** @deprecated please use `orientation` instead */
+  direction?: Orientation;
+  orientation?: Orientation;
+  vertical?: boolean;
+  align?: 'start' | 'end' | 'center' | 'baseline';
+  separator?: VueNode;
+  wrap?: boolean;
+  classes?: SpaceClassNamesType;
+  styles?: SpaceStylesType;
+}
+interface SpaceSlots {
+  default?: () => any;
+  separator?: () => any;
+}
+declare const Space: vue150.DefineSetupFnComponent<SpaceProps, EmptyEmit, SlotsType<SpaceSlots>, SpaceProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue150.PublicProps>;
+declare const SpaceCompact: vue150.DefineSetupFnComponent<SpaceCompactProps, {}, {}, SpaceCompactProps & {}, vue150.PublicProps>;
+declare const SpaceAddon: vue150.DefineSetupFnComponent<SpaceCompactCellProps, {}, {}, SpaceCompactCellProps & {}, vue150.PublicProps>;
+//#endregion
+export { Space, SpaceAddon, SpaceCompact, SpaceProps, SpaceSize, SpaceSlots };