antdv-next 0.0.0 → 1.0.0-alpha.1

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

@@ -0,0 +1,68 @@
+import "../../theme/internal.js";
+import "vue";
+
+//#region src/avatar/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 头像尺寸
+   * @descEN Size of Avatar
+   */
+  containerSize: number;
+  /**
+   * @desc 大号头像尺寸
+   * @descEN Size of large Avatar
+   */
+  containerSizeLG: number;
+  /**
+   * @desc 小号头像尺寸
+   * @descEN Size of small Avatar
+   */
+  containerSizeSM: number;
+  /**
+   * @desc 头像文字大小
+   * @descEN Font size of Avatar
+   */
+  textFontSize: number;
+  /**
+   * @desc 大号头像文字大小
+   * @descEN Font size of large Avatar
+   */
+  textFontSizeLG: number;
+  /**
+   * @desc 小号头像文字大小
+   * @descEN Font size of small Avatar
+   */
+  textFontSizeSM: number;
+  /**
+   * @desc 头像图标大小
+   * @descEN Font size of Avatar icon
+   */
+  iconFontSize: number;
+  /**
+   * @desc 大号头像图标大小
+   * @descEN Font size of large Avatar icon
+   */
+  iconFontSizeLG: number;
+  /**
+   * @desc 小号头像图标大小
+   * @descEN Font size of small Avatar icon
+   */
+  iconFontSizeSM: number;
+  /**
+   * @desc 头像组间距
+   * @descEN Spacing between avatars in a group
+   */
+  groupSpace: number;
+  /**
+   * @desc 头像组重叠宽度
+   * @descEN Overlapping of avatars in a group
+   */
+  groupOverlapping: number;
+  /**
+   * @desc 头像组边框颜色
+   * @descEN Border color of avatars in a group
+   */
+  groupBorderColor: string;
+}
+//#endregion
+export { ComponentToken };

package/dist/avatar/style/index.js

@@ -0,0 +1,84 @@
+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";
+
+//#region src/avatar/style/index.ts
+const genBaseStyle = (token) => {
+	const { antCls, componentCls, iconCls, avatarBg, avatarColor, containerSize, containerSizeLG, containerSizeSM, textFontSize, textFontSizeLG, textFontSizeSM, iconFontSize, iconFontSizeLG, iconFontSizeSM, borderRadius, borderRadiusLG, borderRadiusSM, lineWidth, lineType } = token;
+	const avatarSizeStyle = (size, fontSize, iconFontSize$1, radius) => ({
+		width: size,
+		height: size,
+		borderRadius: "50%",
+		fontSize,
+		[`&${componentCls}-square`]: { borderRadius: radius },
+		[`&${componentCls}-icon`]: {
+			fontSize: iconFontSize$1,
+			[`> ${iconCls}`]: { margin: 0 }
+		}
+	});
+	return { [componentCls]: {
+		...resetComponent(token),
+		"position": "relative",
+		"display": "inline-flex",
+		"justifyContent": "center",
+		"alignItems": "center",
+		"overflow": "hidden",
+		"color": avatarColor,
+		"whiteSpace": "nowrap",
+		"textAlign": "center",
+		"verticalAlign": "middle",
+		"background": avatarBg,
+		"border": `${unit(lineWidth)} ${lineType} transparent`,
+		"&-image": { background: "transparent" },
+		[`${antCls}-image-img`]: { display: "block" },
+		...avatarSizeStyle(containerSize, textFontSize, iconFontSize, borderRadius),
+		"&-lg": { ...avatarSizeStyle(containerSizeLG, textFontSizeLG, iconFontSizeLG, borderRadiusLG) },
+		"&-sm": { ...avatarSizeStyle(containerSizeSM, textFontSizeSM, iconFontSizeSM, borderRadiusSM) },
+		"> img": {
+			display: "block",
+			width: "100%",
+			height: "100%",
+			objectFit: "cover"
+		}
+	} };
+};
+const genGroupStyle = (token) => {
+	const { componentCls, groupBorderColor, groupOverlapping, groupSpace } = token;
+	return {
+		[`${componentCls}-group`]: {
+			"display": "inline-flex",
+			[componentCls]: { borderColor: groupBorderColor },
+			"> *:not(:first-child)": { marginInlineStart: groupOverlapping }
+		},
+		[`${componentCls}-group-popover`]: { [`${componentCls} + ${componentCls}`]: { marginInlineStart: groupSpace } }
+	};
+};
+const prepareComponentToken = (token) => {
+	const { controlHeight, controlHeightLG, controlHeightSM, fontSize, fontSizeLG, fontSizeXL, fontSizeHeading3, marginXS, marginXXS, colorBorderBg } = token;
+	return {
+		containerSize: controlHeight,
+		containerSizeLG: controlHeightLG,
+		containerSizeSM: controlHeightSM,
+		textFontSize: fontSize,
+		textFontSizeLG: fontSize,
+		textFontSizeSM: fontSize,
+		iconFontSize: Math.round((fontSizeLG + fontSizeXL) / 2),
+		iconFontSizeLG: fontSizeHeading3,
+		iconFontSizeSM: fontSize,
+		groupSpace: marginXXS,
+		groupOverlapping: -marginXS,
+		groupBorderColor: colorBorderBg
+	};
+};
+var style_default = genStyleHooks("Avatar", (token) => {
+	const { colorTextLightSolid, colorTextPlaceholder } = token;
+	const avatarToken = mergeToken(token, {
+		avatarBg: colorTextPlaceholder,
+		avatarColor: colorTextLightSolid
+	});
+	return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)];
+}, prepareComponentToken);
+
+//#endregion
+export { style_default as default };

package/dist/badge/Ribbon.d.ts

@@ -0,0 +1,23 @@
+import { EmptyEmit, VueNode } from "../_util/type.js";
+import { PresetColorType } from "../_util/colors.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import * as vue65 from "vue";
+import { CSSProperties, SlotsType } from "vue";
+import { LiteralUnion } from "@v-c/util/dist/type";
+
+//#region src/badge/Ribbon.d.ts
+interface RibbonProps extends ComponentBaseProps {
+  style?: CSSProperties;
+  text?: VueNode;
+  color?: LiteralUnion<PresetColorType>;
+  placement?: 'start' | 'end';
+}
+interface RibbonSlots {
+  default?: () => any;
+  text?: () => any;
+}
+declare const _default: vue65.DefineSetupFnComponent<RibbonProps, EmptyEmit, SlotsType<RibbonSlots>, RibbonProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue65.PublicProps>;
+//#endregion
+export { RibbonProps, _default };

package/dist/badge/Ribbon.js

@@ -0,0 +1,77 @@
+import { useConfig } from "../config-provider/context.js";
+import { getSlotPropsFnRun } from "../_util/tools.js";
+import { isPresetColor } from "../_util/colors.js";
+import ribbon_default from "./style/ribbon.js";
+import { computed, createVNode, defineComponent, mergeProps } from "vue";
+import { classNames } from "@v-c/util";
+
+//#region src/badge/Ribbon.tsx
+var Ribbon_default = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const configContext = useConfig();
+	const prefixCls = computed(() => configContext.value.getPrefixCls("ribbon", props.prefixCls));
+	const wrapperCls = computed(() => `${prefixCls.value}-wrapper`);
+	const [hashId, cssVarCls] = ribbon_default(prefixCls, wrapperCls);
+	return () => {
+		const placement = props.placement ?? "end";
+		const { class: attrClass, style: attrStyle,...restAttrs } = attrs;
+		const colorInPreset = isPresetColor(props.color, false);
+		const colorStyle = {};
+		const cornerColorStyle = {};
+		if (props.color && !colorInPreset) {
+			colorStyle.background = props.color;
+			cornerColorStyle.color = props.color;
+		}
+		const textNodes = getSlotPropsFnRun(slots, props, "text");
+		const children = slots.default?.();
+		return createVNode("div", { "class": classNames(wrapperCls.value, props.rootClass, hashId.value, cssVarCls.value) }, [children, createVNode("div", mergeProps(restAttrs, {
+			"class": classNames(prefixCls.value, `${prefixCls.value}-placement-${placement}`, {
+				[`${prefixCls.value}-rtl`]: configContext.value.direction === "rtl",
+				[`${prefixCls.value}-color-${props.color}`]: colorInPreset
+			}, attrClass, hashId.value),
+			"style": [
+				colorStyle,
+				props.style,
+				attrStyle
+			]
+		}), [createVNode("span", { "class": `${prefixCls.value}-text` }, [Array.isArray(textNodes) ? textNodes : textNodes ?? props.text]), createVNode("div", {
+			"class": `${prefixCls.value}-corner`,
+			"style": cornerColorStyle
+		}, null)])]);
+	};
+}, {
+	props: {
+		style: {
+			type: Object,
+			required: false
+		},
+		text: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		color: { required: false },
+		placement: {
+			type: String,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	},
+	name: "ABadgeRibbon",
+	inheritAttrs: false
+});
+
+//#endregion
+export { Ribbon_default as default };

package/dist/badge/ScrollNumber.js

@@ -0,0 +1,80 @@
+import { useConfig } from "../config-provider/context.js";
+import SingleNumber_default from "./SingleNumber.js";
+import { cloneVNode, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { classNames } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+
+//#region src/badge/ScrollNumber.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var ScrollNumber_default = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const configContext = useConfig();
+	const prefixCls = computed(() => configContext.value.getPrefixCls("scroll-number", props.prefixCls));
+	return () => {
+		const { component = "sup", count, show, title } = props;
+		const { class: attrClass, style: attrStyle,...restAttrs } = attrs;
+		const children = filterEmpty(slots.default?.() ?? []);
+		const mergedStyleList = [attrStyle?.borderColor ? {
+			...attrStyle,
+			boxShadow: `0 0 0 1px ${attrStyle.borderColor} inset`
+		} : attrStyle, attrStyle].filter(Boolean);
+		if (children.length) {
+			const child = children[0];
+			return cloneVNode(child, { class: classNames(`${prefixCls.value}-custom-component`, child.props?.class, attrClass) });
+		}
+		let numberNodes = count;
+		const numericValue = Number(count);
+		if (count !== null && count !== void 0 && !Number.isNaN(numericValue) && numericValue % 1 === 0) {
+			const numberList = String(count).split("");
+			numberNodes = createVNode("bdi", null, [numberList.map((num, index) => createVNode(SingleNumber_default, {
+				"key": numberList.length - index,
+				"prefixCls": prefixCls.value,
+				"value": num,
+				"count": numericValue
+			}, null))]);
+		}
+		return createVNode(component, mergeProps(restAttrs, {
+			"data-show": show,
+			"class": classNames(prefixCls.value, attrClass),
+			"style": mergedStyleList.length ? mergedStyleList : void 0,
+			"title": title
+		}), _isSlot(numberNodes) ? numberNodes : { default: () => [numberNodes] });
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		count: {
+			type: [
+				String,
+				Number,
+				null
+			],
+			required: false
+		},
+		component: {
+			type: [String, Object],
+			required: false
+		},
+		title: {
+			type: [
+				String,
+				Number,
+				null
+			],
+			required: false
+		},
+		show: {
+			type: Boolean,
+			required: true
+		}
+	},
+	name: "AScrollNumber",
+	inheritAttrs: false
+});
+
+//#endregion
+export { ScrollNumber_default as default };

package/dist/badge/SingleNumber.js

@@ -0,0 +1,96 @@
+import { computed, createVNode, defineComponent, onBeforeUnmount, shallowRef, watch } from "vue";
+import { classNames } from "@v-c/util";
+
+//#region src/badge/SingleNumber.tsx
+function getOffset(start, end, unit) {
+	let index = start;
+	let offset = 0;
+	while ((index + 10) % 10 !== end) {
+		index += unit;
+		offset += unit;
+	}
+	return offset;
+}
+var SingleNumber_default = /* @__PURE__ */ defineComponent((props) => {
+	const valueNumber = computed(() => Number(props.value));
+	const countNumber = computed(() => Math.abs(props.count));
+	const prevValue = shallowRef(valueNumber.value);
+	const prevCount = shallowRef(countNumber.value);
+	const fallbackTimer = shallowRef(null);
+	const onTransitionEnd = () => {
+		prevValue.value = valueNumber.value;
+		prevCount.value = countNumber.value;
+	};
+	watch([valueNumber, countNumber], () => {
+		if (fallbackTimer.value) {
+			clearTimeout(fallbackTimer.value);
+			fallbackTimer.value = null;
+		}
+		fallbackTimer.value = setTimeout(onTransitionEnd, 1e3);
+	}, { immediate: true });
+	onBeforeUnmount(() => {
+		if (fallbackTimer.value) {
+			clearTimeout(fallbackTimer.value);
+			fallbackTimer.value = null;
+		}
+	});
+	return () => {
+		const prefixCls = props.prefixCls;
+		const value = valueNumber.value;
+		const count = countNumber.value;
+		const previousValue = prevValue.value;
+		const previousCount = prevCount.value;
+		const renderUnit = (unitValue, offset = 0, current = false, key) => {
+			const style = offset ? {
+				position: "absolute",
+				top: `${offset}00%`,
+				left: 0
+			} : void 0;
+			return createVNode("span", {
+				"key": key ?? unitValue,
+				"class": classNames(`${prefixCls}-only-unit`, { current }),
+				"style": style
+			}, [unitValue]);
+		};
+		let unitNodes;
+		let offsetStyle;
+		if (previousValue === value || Number.isNaN(value) || Number.isNaN(previousValue)) {
+			unitNodes = [renderUnit(value, 0, true, value)];
+			offsetStyle = { transition: "none" };
+		} else {
+			const unitNumberList = [];
+			for (let index = value; index <= value + 10; index += 1) unitNumberList.push(index);
+			const unit = previousCount < count ? 1 : -1;
+			const prevIndex = unitNumberList.findIndex((n) => n % 10 === previousValue);
+			unitNodes = (unit < 0 ? unitNumberList.slice(0, prevIndex + 1) : unitNumberList.slice(prevIndex)).map((n, index) => {
+				return renderUnit(n % 10, unit < 0 ? index - prevIndex : index, index === prevIndex, n);
+			});
+			offsetStyle = { transform: `translateY(${-getOffset(previousValue, value, unit)}00%)` };
+		}
+		return createVNode("span", {
+			"class": `${prefixCls}-only`,
+			"style": offsetStyle,
+			"onTransitionend": onTransitionEnd
+		}, [unitNodes]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		value: {
+			type: String,
+			required: true
+		},
+		count: {
+			type: Number,
+			required: true
+		}
+	},
+	name: "ASingleNumber",
+	inheritAttrs: false
+});
+
+//#endregion
+export { SingleNumber_default as default };

package/dist/badge/index.d.ts

@@ -0,0 +1,47 @@
+import { EmptyEmit, VueNode } from "../_util/type.js";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { PresetColorKey } from "../theme/interface/presetColors.js";
+import "../theme/interface/index.js";
+import { PresetStatusColorType } from "../_util/colors.js";
+import { _default } from "./Ribbon.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import * as vue63 from "vue";
+import { SlotsType } from "vue";
+import { LiteralUnion } from "@v-c/util/dist/type";
+
+//#region src/badge/index.d.ts
+type SemanticName = 'root' | 'indicator';
+type BadgeClassNamesType = SemanticClassNamesType<BadgeProps, SemanticName>;
+type BadgeStylesType = SemanticStylesType<BadgeProps, SemanticName>;
+interface BadgeProps extends ComponentBaseProps {
+  /** Number to show in badge */
+  count?: VueNode;
+  showZero?: boolean;
+  /** Max count to show */
+  overflowCount?: number;
+  /** Whether to show red dot without number */
+  dot?: boolean;
+  scrollNumberPrefixCls?: string;
+  status?: PresetStatusColorType;
+  color?: LiteralUnion<PresetColorKey>;
+  text?: VueNode;
+  size?: 'default' | 'small';
+  offset?: [number | string, number | string];
+  title?: string;
+  classes?: BadgeClassNamesType;
+  styles?: BadgeStylesType;
+}
+interface BadgeSlots {
+  default?: () => any;
+  count?: () => any;
+  text?: () => any;
+}
+declare const InternalBadge: vue63.DefineSetupFnComponent<BadgeProps, EmptyEmit, SlotsType<BadgeSlots>, BadgeProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue63.PublicProps>;
+declare const Badge: typeof InternalBadge & {
+  Ribbon: typeof _default;
+};
+//#endregion
+export { Badge, BadgeProps, BadgeSlots };