@zboson/ui 0.0.0-stage → 0.0.1

package/dist/avatar/Avatar.js

@@ -0,0 +1,210 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import { normalizeStyle as normalizeStyle$1 } from "../_util/styleUtils.js";
+import { getAttrStyleAndClass } from "../_util/hooks/useMergeSemantic.js";
+import { getSlotPropsFnRun } from "../_util/tools.js";
+import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
+import { isRenderable } from "../_util/is.js";
+import { matchScreen, responsiveArray } from "../_util/responsiveObserver.js";
+import useBreakpoint from "../grid/hooks/useBreakpoint.js";
+import { useAvatarContext } from "./AvatarContext.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, nextTick, onMounted, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+import ResizeObserver from "@v-c/resize-observer";
+//#region src/avatar/Avatar.tsx
+const Avatar = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit, expose }) => {
+	const scale = shallowRef(1);
+	const mounted = shallowRef(false);
+	const isImgExist = shallowRef(true);
+	const avatarNodeRef = shallowRef();
+	const avatarChildrenRef = shallowRef();
+	expose({ nativeElement: avatarNodeRef });
+	const { class: contextClassName, style: contextStyle, prefixCls } = useComponentBaseConfig("avatar", props);
+	const avatarCtx = useAvatarContext();
+	const setScaleParam = () => {
+		if (!avatarChildrenRef.value || !avatarNodeRef.value) return;
+		const childrenWidth = avatarChildrenRef.value.offsetWidth;
+		const nodeWidth = avatarNodeRef.value.offsetWidth;
+		const gap = props.gap;
+		if (childrenWidth !== 0 && nodeWidth !== 0) {
+			if (gap * 2 < nodeWidth) scale.value = nodeWidth - gap * 2 < childrenWidth ? (nodeWidth - gap * 2) / childrenWidth : 1;
+		}
+	};
+	onMounted(() => {
+		mounted.value = true;
+	});
+	watch(() => [props.src, props.srcSet], () => {
+		isImgExist.value = true;
+		scale.value = 1;
+	}, { immediate: true });
+	watch(() => props.gap, async () => {
+		await nextTick();
+		setScaleParam();
+	}, { immediate: true });
+	const handleImgLoadError = () => {
+		if (props.onError?.() !== false) isImgExist.value = false;
+	};
+	const handleClick = (e) => {
+		emit("click", e);
+	};
+	const size = useSize((ctxSize) => props?.size ?? avatarCtx.value?.size ?? ctxSize ?? "medium");
+	const screens = useBreakpoint(computed(() => {
+		return Object.keys(typeof size.value === "object" ? size.value || {} : {}).some((key) => responsiveArray.includes(key));
+	}));
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	return () => {
+		const children = filterEmpty(slots?.default?.() ?? []);
+		const icon = getSlotPropsFnRun(slots, props, "icon");
+		const hasIcon = isRenderable(icon);
+		const { shape, rootClass, draggable, srcSet, crossOrigin, alt } = props;
+		const responsiveSizeStyleFn = () => {
+			if (typeof size.value !== "object") return {};
+			const currentSize = matchScreen(screens.value ?? {}, size.value);
+			return currentSize ? {
+				width: `${currentSize}px`,
+				height: `${currentSize}px`,
+				fontSize: hasIcon || children.length ? `${currentSize / 2}px` : "18px"
+			} : {};
+		};
+		const responsiveSizeStyle = responsiveSizeStyleFn();
+		const sizeCls = clsx({
+			[`${prefixCls.value}-lg`]: size.value === "large",
+			[`${prefixCls.value}-sm`]: size.value === "small"
+		});
+		const src = getSlotPropsFnRun(slots, props, "src");
+		const hasImageElement = isVNode(src);
+		const mergedShape = shape || avatarCtx?.value?.shape || "circle";
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const classString = clsx(prefixCls.value, sizeCls, contextClassName.value, `${prefixCls.value}-${mergedShape}`, {
+			[`${prefixCls.value}-image`]: hasImageElement || src && isImgExist.value,
+			[`${prefixCls.value}-icon`]: hasIcon
+		}, cssVarCls.value, rootCls.value, className, rootClass, hashId.value);
+		const sizeStyle = typeof size.value === "number" ? {
+			width: `${size.value}px`,
+			height: `${size.value}px`,
+			fontSize: hasIcon ? `${size.value / 2}px` : "18px"
+		} : {};
+		let childrenToRender;
+		if (typeof src === "string" && isImgExist.value) childrenToRender = createVNode("img", {
+			"src": src,
+			"draggable": draggable,
+			"srcset": srcSet,
+			"onError": handleImgLoadError,
+			"alt": alt,
+			"crossorigin": crossOrigin
+		}, null);
+		else if (hasImageElement) childrenToRender = src;
+		else if (hasIcon) childrenToRender = icon;
+		else if (mounted.value || scale.value !== 1) {
+			const transformString = `scale(${scale.value})`;
+			const childrenStyle = {
+				WebkitTransform: transformString,
+				transform: transformString
+			};
+			childrenToRender = createVNode(ResizeObserver, { "onResize": setScaleParam }, { default: () => [createVNode("span", {
+				"class": `${prefixCls.value}-string`,
+				"ref": avatarChildrenRef,
+				"style": childrenStyle
+			}, [children])] });
+		} else childrenToRender = createVNode("span", {
+			"class": `${prefixCls.value}-string`,
+			"style": { opacity: 0 },
+			"ref": avatarChildrenRef
+		}, [children]);
+		return createVNode("span", mergeProps(restAttrs, {
+			"style": {
+				...sizeStyle,
+				...responsiveSizeStyle,
+				...normalizeStyle$1(contextStyle.value) || {},
+				...normalizeStyle$1(style) || {}
+			},
+			"class": classString,
+			"onClick": handleClick,
+			"ref": avatarNodeRef
+		}), [childrenToRender]);
+	};
+}, {
+	props: /*@__PURE__*/ mergeDefaults({
+		shape: {
+			type: String,
+			required: false
+		},
+		size: {
+			type: [
+				String,
+				null,
+				Number,
+				Object
+			],
+			required: false
+		},
+		gap: {
+			type: Number,
+			required: false
+		},
+		src: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		srcSet: {
+			type: String,
+			required: false
+		},
+		draggable: {
+			type: [Boolean, String],
+			required: false,
+			default: void 0
+		},
+		icon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		alt: {
+			type: String,
+			required: false
+		},
+		crossOrigin: {
+			type: String,
+			required: false
+		},
+		onError: {
+			type: Function,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	}, { gap: 4 }),
+	emits: ["click"],
+	name: "AAvatar",
+	inheritAttrs: false
+});
+Avatar.install = (app) => {
+	app.component(Avatar.name, Avatar);
+};
+//#endregion
+export { Avatar as default };

package/dist/avatar/AvatarContext.d.ts

@@ -0,0 +1,38 @@
+import { SizeType } from "../config-provider/SizeContext.js";
+import { ScreenSizeMap } from "../_util/responsiveObserver.js";
+import { Ref } from "vue";
+//#region src/avatar/AvatarContext.d.ts
+/**
+ * 'default' is deprecated and will be removed in v7, please use `medium` instead.
+ */
+type AvatarSize = SizeType | 'default' | number | ScreenSizeMap;
+interface AvatarContextType {
+  size?: AvatarSize;
+  shape?: 'circle' | 'square';
+}
+declare function useAvatarContext(): Ref<{
+  size?: number | "default" | SizeType | {
+    xxxl?: number | undefined;
+    xxl?: number | undefined;
+    xl?: number | undefined;
+    lg?: number | undefined;
+    md?: number | undefined;
+    sm?: number | undefined;
+    xs?: number | undefined;
+  };
+  shape?: "circle" | "square" | undefined;
+}, AvatarContextType | {
+  size?: number | "default" | SizeType | {
+    xxxl?: number | undefined;
+    xxl?: number | undefined;
+    xl?: number | undefined;
+    lg?: number | undefined;
+    md?: number | undefined;
+    sm?: number | undefined;
+    xs?: number | undefined;
+  };
+  shape?: "circle" | "square" | undefined;
+}>;
+declare function useAvatarProvider(value: Ref<AvatarContextType>): void;
+//#endregion
+export { AvatarContextType, AvatarSize, useAvatarContext, useAvatarProvider };

package/dist/avatar/AvatarContext.js

@@ -0,0 +1,11 @@
+import { inject, provide, ref } from "vue";
+//#region src/avatar/AvatarContext.ts
+const AvatarContextKey = Symbol("AvatarContext");
+function useAvatarContext() {
+	return inject(AvatarContextKey, ref({}));
+}
+function useAvatarProvider(value) {
+	provide(AvatarContextKey, value);
+}
+//#endregion
+export { useAvatarContext, useAvatarProvider };

package/dist/avatar/AvatarGroup.d.ts

@@ -0,0 +1,25 @@
+import { PopoverProps } from "../popover/index.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import { AvatarSize } from "./AvatarContext.js";
+import { CSSProperties } from "vue";
+//#region src/avatar/AvatarGroup.d.ts
+interface AvatarGroupProps extends ComponentBaseProps {
+  prefixCls?: string;
+  max?: {
+    count?: number;
+    style?: CSSProperties;
+    popover?: PopoverProps;
+  };
+  /**
+   * Size of avatar, options: `large`, `medium`, `small`
+   * or a custom number size
+   */
+  size?: AvatarSize;
+  shape?: 'circle' | 'square';
+}
+interface AvatarGroupRef {
+  nativeElement: HTMLDivElement;
+}
+declare const AvatarGroup: import("vue").DefineSetupFnComponent<AvatarGroupProps, {}, {}, AvatarGroupProps & {}, import("vue").PublicProps>;
+//#endregion
+export { AvatarGroupProps, AvatarGroupRef, AvatarGroup as default };

package/dist/avatar/AvatarGroup.js

@@ -0,0 +1,96 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass } from "../_util/hooks/useMergeSemantic.js";
+import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
+import { useAvatarProvider } from "./AvatarContext.js";
+import style_default from "./style/index.js";
+import Avatar from "./Avatar.js";
+import Popover from "../popover/index.js";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, shallowRef } from "vue";
+import { clsx } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+//#region src/avatar/AvatarGroup.tsx
+const AvatarGroup = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) => {
+	const { prefixCls, direction } = useComponentBaseConfig("avatar", props);
+	const groupPrefixCls = computed(() => `${prefixCls.value}-group`);
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	useAvatarProvider(computed(() => {
+		return {
+			size: props.size,
+			shape: props.shape
+		};
+	}));
+	const nativeElementRef = shallowRef();
+	expose({ nativeElement: nativeElementRef });
+	return () => {
+		const { rootClass, max } = props;
+		const children = filterEmpty(slots?.default?.() ?? []);
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const cls = clsx(groupPrefixCls.value, { [`${groupPrefixCls.value}-rtl`]: direction.value === "rtl" }, cssVarCls.value, rootCls.value, className, rootClass, hashId.value);
+		const childrenWithProps = children.map((child, index) => {
+			if (isVNode(child)) return createVNode(child, { key: `avatar-key-${index}` });
+			return child;
+		});
+		const mergeCount = max?.count;
+		const numOfChildren = childrenWithProps.length;
+		let childrenToRender = childrenWithProps;
+		if (mergeCount && mergeCount < numOfChildren) {
+			const childrenShow = childrenWithProps.slice(0, mergeCount);
+			const childrenHidden = childrenWithProps.slice(mergeCount, numOfChildren);
+			const mergeStyle = max?.style;
+			const mergePopoverTrigger = max?.popover?.trigger || "hover";
+			const mergePopoverPlacement = max?.popover?.placement || "top";
+			const popoverProps = {
+				content: () => childrenHidden,
+				...max?.popover,
+				placement: mergePopoverPlacement,
+				trigger: mergePopoverTrigger,
+				rootClass: clsx(`${groupPrefixCls.value}-popover`, max?.popover?.rootClass)
+			};
+			childrenShow.push(createVNode(Popover, mergeProps({
+				"key": "avatar-popover-key",
+				"destroyOnHidden": true
+			}, popoverProps), { default: () => [createVNode(Avatar, { "style": mergeStyle }, { default: () => [`+${numOfChildren - mergeCount}`] })] }));
+			childrenToRender = childrenShow;
+		}
+		return createVNode("div", mergeProps({ "ref": nativeElementRef }, restAttrs, {
+			"class": cls,
+			"style": style
+		}), [childrenToRender]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		max: {
+			type: Object,
+			required: false
+		},
+		size: {
+			type: [
+				String,
+				null,
+				Number,
+				Object
+			],
+			required: false
+		},
+		shape: {
+			type: String,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		}
+	},
+	name: "AAvatarGroup",
+	inheritAttrs: false
+});
+AvatarGroup.install = (app) => {
+	app.component(AvatarGroup.name, AvatarGroup);
+};
+//#endregion
+export { AvatarGroup as default };

package/dist/avatar/index.d.ts

@@ -0,0 +1,9 @@
+import Avatar$1, { AvatarEmits, AvatarProps, AvatarRef, AvatarSlots } from "./Avatar.js";
+import AvatarGroup, { AvatarGroupProps, AvatarGroupRef } from "./AvatarGroup.js";
+//#region src/avatar/index.d.ts
+type CompoundedComponent = typeof Avatar$1 & {
+  Group: typeof AvatarGroup;
+};
+declare const Avatar: CompoundedComponent;
+//#endregion
+export { type AvatarEmits, AvatarGroup, type AvatarGroupProps, type AvatarGroupRef, type AvatarProps, type AvatarRef, type AvatarSlots, Avatar as default };

package/dist/avatar/index.js

@@ -0,0 +1,7 @@
+import Avatar$1 from "./Avatar.js";
+import AvatarGroup from "./AvatarGroup.js";
+//#region src/avatar/index.tsx
+const Avatar = Avatar$1;
+Avatar.Group = AvatarGroup;
+//#endregion
+export { AvatarGroup, Avatar as default };

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

@@ -0,0 +1,73 @@
+import { SeedToken } from "../../theme/interface/seeds.js";
+import { AliasToken } from "../../theme/interface/alias.js";
+import { ComponentTokenMap } from "../../theme/interface/components.js";
+import { GetDefaultToken } from "../../theme/interface/cssinjs-utils.js";
+import "../../theme/interface/index.js";
+import "../../theme/internal.js";
+//#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 | string;
+  /**
+   * @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;
+}
+declare const prepareComponentToken: GetDefaultToken<'Avatar'>;
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>, tokenResult?: import("@antdv-next/cssinjs").UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken> | undefined) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, _default as default, prepareComponentToken };

package/dist/avatar/style/index.js

@@ -0,0 +1,82 @@
+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, radius) => ({
+		width: size,
+		height: size,
+		borderRadius: "50%",
+		fontSize,
+		[`&${componentCls}-square`]: { borderRadius: radius },
+		[`&${componentCls}-icon`]: {
+			fontSize: iconFontSize,
+			[`> ${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, prepareComponentToken };

package/dist/badge/Ribbon.d.ts

@@ -0,0 +1,39 @@
+import { EmptyEmit, VueNode } from "../_util/type.js";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { PresetColorType } from "../_util/colors.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import { CSSProperties, SlotsType } from "vue";
+import { LiteralUnion } from "@v-c/util/dist/type";
+//#region src/badge/Ribbon.d.ts
+type RibbonPlacement = 'start' | 'end';
+type RibbonSemanticName = keyof RibbonSemanticClassNames & keyof RibbonSemanticStyles;
+interface RibbonSemanticClassNames {
+  root?: string;
+  content?: string;
+  indicator?: string;
+}
+interface RibbonSemanticStyles {
+  root?: CSSProperties;
+  content?: CSSProperties;
+  indicator?: CSSProperties;
+}
+type RibbonClassNamesType = SemanticClassNamesType<RibbonProps, RibbonSemanticClassNames>;
+type RibbonStylesType = SemanticStylesType<RibbonProps, RibbonSemanticStyles>;
+interface RibbonProps extends ComponentBaseProps {
+  text?: VueNode;
+  color?: LiteralUnion<PresetColorType>;
+  placement?: RibbonPlacement;
+  classes?: RibbonClassNamesType;
+  styles?: RibbonStylesType;
+}
+interface RibbonRef {
+  nativeElement: HTMLDivElement;
+}
+interface RibbonSlots {
+  default?: () => any;
+  text?: () => any;
+}
+declare const _default: import("vue").DefineSetupFnComponent<RibbonProps, EmptyEmit, SlotsType<RibbonSlots>, RibbonProps, import("vue").PublicProps>;
+//#endregion
+export { RibbonClassNamesType, RibbonProps, RibbonRef, RibbonSemanticClassNames, RibbonSemanticName, RibbonSemanticStyles, RibbonSlots, RibbonStylesType, _default as default };

package/dist/badge/Ribbon.js

@@ -0,0 +1,92 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import { isPresetColor } from "../_util/colors.js";
+import ribbon_default from "./style/ribbon.js";
+import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef } from "vue";
+import { clsx } from "@v-c/util";
+var Ribbon_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) => {
+	const { styles, classes: ribbonClassNames } = toPropsRefs(props, "classes", "styles");
+	const { prefixCls, class: contextClassName, style: contextStyle, direction, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("ribbon", props);
+	const wrapperCls = computed(() => `${prefixCls.value}-wrapper`);
+	const [hashId, cssVarCls] = ribbon_default(prefixCls, wrapperCls);
+	const mergedProps = computed(() => {
+		return props;
+	});
+	const contextIndicatorStyle = useSemanticRootStyle(contextStyle, "indicator");
+	const indicatorStyle = useSemanticRootStyle(computed(() => attrs.style), "indicator");
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, ribbonClassNames), useToArr(contextStyles, contextIndicatorStyle, styles, indicatorStyle), useToProps(mergedProps));
+	const nativeElementRef = shallowRef();
+	expose({ nativeElement: nativeElementRef });
+	return () => {
+		const { placement = "end", color } = props;
+		const { className, restAttrs } = getAttrStyleAndClass(attrs);
+		const colorInPreset = isPresetColor(props.color, false);
+		const ribbonCls = clsx(prefixCls.value, `${prefixCls.value}-placement-${placement}`, {
+			[`${prefixCls.value}-rtl`]: direction.value === "rtl",
+			[`${prefixCls.value}-color-${color}`]: colorInPreset
+		}, className, contextClassName.value, mergedClassNames.value.indicator);
+		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", {
+			"ref": nativeElementRef,
+			"class": clsx(wrapperCls.value, props.rootClass, hashId.value, cssVarCls.value, mergedClassNames.value?.root),
+			"style": mergedStyles.value?.root
+		}, [children, createVNode("div", mergeProps(restAttrs, {
+			"class": clsx(ribbonCls, hashId.value),
+			"style": [colorStyle, mergedStyles.value?.indicator]
+		}), [createVNode("span", {
+			"class": clsx(`${prefixCls.value}-content`, mergedClassNames.value.content),
+			"style": mergedStyles.value?.content
+		}, [Array.isArray(textNodes) ? textNodes : textNodes ?? props.text]), createVNode("div", {
+			"class": `${prefixCls.value}-corner`,
+			"style": cornerColorStyle
+		}, null)])]);
+	};
+}, {
+	props: /*@__PURE__*/ mergeDefaults({
+		text: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		color: { required: false },
+		placement: {
+			type: String,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	}, { placement: "end" }),
+	name: "ABadgeRibbon",
+	inheritAttrs: false
+});
+//#endregion
+export { Ribbon_default as default };