@antdv-next/mobile 0.0.0-stage → 0.1.1

package/dist/avatar/Avatar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,157 @@
+import { isRenderable } from "../_util/index.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import { mergeAttrsStyle } from "../_util/vnode.js";
+import { useConfig } from "../config-provider/context.js";
+import { avatarGroupContextKey } from "./context.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { computed, createBlock, createElementBlock, createVNode, defineComponent, inject, mergeProps, nextTick, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, ref, renderSlot, unref, useSlots, watch } from "vue";
+// src/avatar/Avatar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"src",
+	"srcset",
+	"alt",
+	"draggable",
+	"crossorigin"
+];
+var Avatar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmAvatar",
+	inheritAttrs: false,
+	__name: "Avatar",
+	props: {
+		src: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		srcSet: {},
+		alt: {},
+		icon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		shape: {},
+		size: {},
+		gap: { default: 4 },
+		draggable: {
+			type: [Boolean, String],
+			default: void 0
+		},
+		crossOrigin: {},
+		fit: {},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	emits: ["error"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const config = useConfig();
+		const group = inject(avatarGroupContextKey, void 0);
+		const size = computed(() => props.size ?? group?.size.value ?? config.componentSize.value);
+		const shape = computed(() => props.shape ?? group?.shape.value ?? "circle");
+		const imageFailed = ref(false);
+		watch(() => props.src, () => {
+			imageFailed.value = false;
+		});
+		const isImageUrl = computed(() => typeof props.src === "string" && props.src !== "");
+		const hasImage = computed(() => isImageUrl.value && !imageFailed.value || !!slots.src || isRenderable(props.src) && !isImageUrl.value);
+		const hasIcon = computed(() => !!slots.icon || isRenderable(props.icon));
+		function handleImageError(event) {
+			imageFailed.value = true;
+			emit("error", event);
+		}
+		const rootRef = ref();
+		const textRef = ref();
+		const scale = ref(1);
+		let observer;
+		function updateScale() {
+			const root = rootRef.value;
+			const text = textRef.value;
+			if (!root || !text) {
+				scale.value = 1;
+				return;
+			}
+			const textWidth = text.offsetWidth;
+			const rootWidth = root.offsetWidth;
+			if (!textWidth || !rootWidth) return;
+			const available = rootWidth - props.gap * 2;
+			scale.value = available > 0 && available < textWidth ? available / textWidth : 1;
+		}
+		onMounted(() => {
+			updateScale();
+			if (typeof ResizeObserver !== "undefined" && rootRef.value) {
+				observer = new ResizeObserver(updateScale);
+				observer.observe(rootRef.value);
+			}
+		});
+		onUpdated(updateScale);
+		watch(() => [props.gap, size.value], () => nextTick(updateScale));
+		onBeforeUnmount(() => observer?.disconnect());
+		const classNames = computed(() => [
+			"am-avatar",
+			`am-avatar-${shape.value}`,
+			{
+				"am-avatar-sm": size.value === "small",
+				"am-avatar-lg": size.value === "large",
+				"am-avatar-image": hasImage.value,
+				"am-avatar-icon": !hasImage.value && hasIcon.value
+			},
+			props.rootClass,
+			props.classes?.root
+		]);
+		const mergedStyle = computed(() => {
+			const style = {};
+			if (typeof size.value === "number") {
+				style["--am-avatar-size"] = `${size.value}px`;
+				style["--am-avatar-font-size"] = `${Math.round(size.value * .45)}px`;
+				style["--am-avatar-icon-size"] = `${Math.round(size.value / 2)}px`;
+			}
+			return {
+				...style,
+				...props.styles?.root
+			};
+		});
+		const textStyle = computed(() => scale.value !== 1 ? { transform: `scale(${scale.value})` } : void 0);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", mergeProps({
+				ref_key: "rootRef",
+				ref: rootRef
+			}, _ctx.$attrs, {
+				class: classNames.value,
+				style: unref(mergeAttrsStyle)(mergedStyle.value, _ctx.$attrs.style)
+			}), [hasImage.value ? renderSlot(_ctx.$slots, "src", {}, () => [isImageUrl.value ? (openBlock(), createElementBlock("img", {
+				key: 0,
+				class: "am-avatar-img",
+				src: __props.src,
+				srcset: __props.srcSet,
+				alt: __props.alt,
+				draggable: __props.draggable,
+				crossorigin: __props.crossOrigin,
+				style: normalizeStyle(__props.fit ? { objectFit: __props.fit } : void 0),
+				onError: handleImageError
+			}, null, 44, _hoisted_1)) : (openBlock(), createBlock(unref(RenderNode_default), {
+				key: 1,
+				node: __props.src
+			}, null, 8, ["node"]))], void 0, 0) : hasIcon.value ? renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(unref(RenderNode_default), { node: __props.icon }, null, 8, ["node"])], void 0, 1) : (openBlock(), createElementBlock("span", {
+				key: 2,
+				ref_key: "textRef",
+				ref: textRef,
+				class: "am-avatar-string",
+				style: normalizeStyle(textStyle.value)
+			}, [renderSlot(_ctx.$slots, "default")], 4))], 16);
+		};
+	}
+});
+export { Avatar_vue_vue_type_script_setup_true_lang_default as default };

package/dist/avatar/AvatarGroup.js

@@ -0,0 +1,4 @@
+import AvatarGroup_vue_vue_type_script_setup_true_lang_default from "./AvatarGroup.vue_vue_type_script_setup_true_lang.js";
+// src/avatar/AvatarGroup.vue
+var AvatarGroup_default = AvatarGroup_vue_vue_type_script_setup_true_lang_default;
+export { AvatarGroup_default as default };

package/dist/avatar/AvatarGroup.vue.d.ts

@@ -0,0 +1,13 @@
+import type { AvatarGroupProps, AvatarGroupSlots } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = AvatarGroupSlots;
+declare const __VLS_base: import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/avatar/AvatarGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,55 @@
+import RenderNode_default from "../_util/RenderNode.js";
+import { flattenChildren } from "../_util/vnode.js";
+import Avatar_default from "./Avatar.js";
+import { avatarGroupContextKey } from "./context.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, mergeProps, normalizeStyle, openBlock, provide, renderList, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
+// src/avatar/AvatarGroup.vue?vue&type=script&setup=true&lang.ts
+var AvatarGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmAvatarGroup",
+	inheritAttrs: false,
+	__name: "AvatarGroup",
+	props: {
+		max: {},
+		size: {},
+		shape: {},
+		rootClass: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		provide(avatarGroupContextKey, {
+			size: computed(() => props.size),
+			shape: computed(() => props.shape)
+		});
+		let rest = 0;
+		function collectChildren() {
+			const children = flattenChildren(slots.default?.());
+			const count = props.max?.count;
+			if (typeof count === "number" && count >= 0 && children.length > count) {
+				rest = children.length - count;
+				return children.slice(0, count);
+			}
+			rest = 0;
+			return children;
+		}
+		const getRest = () => rest;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, { class: ["am-avatar-group", __props.rootClass] }), [(openBlock(true), createElementBlock(Fragment, null, renderList(collectChildren(), (child, index) => {
+				return openBlock(), createBlock(unref(RenderNode_default), {
+					key: index,
+					node: child
+				}, null, 8, ["node"]);
+			}), 128)), getRest() > 0 ? (openBlock(), createBlock(Avatar_default, {
+				key: 0,
+				class: "am-avatar-group-overflow",
+				style: normalizeStyle(__props.max?.style)
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "overflow", { count: getRest() }, () => [createTextVNode(" +" + toDisplayString(getRest()), 1)])]),
+				_: 3
+			}, 8, ["style"])) : createCommentVNode("", true)], 16);
+		};
+	}
+});
+export { AvatarGroup_vue_vue_type_script_setup_true_lang_default as default };

package/dist/avatar/context.d.ts

@@ -0,0 +1,7 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+import type { AvatarShape, AvatarSize } from './interface';
+export interface AvatarGroupContext {
+    size: ComputedRef<AvatarSize | undefined>;
+    shape: ComputedRef<AvatarShape | undefined>;
+}
+export declare const avatarGroupContextKey: InjectionKey<AvatarGroupContext>;

package/dist/avatar/context.js

@@ -0,0 +1,3 @@
+// src/avatar/context.ts
+var avatarGroupContextKey = Symbol("AmAvatarGroupContext");
+export { avatarGroupContextKey };

package/dist/avatar/index.d.ts

@@ -0,0 +1,67 @@
+export type * from './interface';
+export declare const AvatarGroup: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./interface").AvatarGroupSlots;
+}), object>;
+declare const Avatar: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").AvatarProps> & Readonly<{
+        onError?: ((event: Event) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        error: (event: Event) => any;
+    }, import("vue").PublicProps, {
+        draggable: boolean | "false" | "true";
+        gap: number;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").AvatarProps> & Readonly<{
+        onError?: ((event: Event) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        draggable: boolean | "false" | "true";
+        gap: number;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").AvatarProps> & Readonly<{
+    onError?: ((event: Event) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (event: Event) => any;
+}, string, {
+    draggable: boolean | "false" | "true";
+    gap: number;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./interface").AvatarSlots;
+}), {
+    Group: import("../_util/withInstall").WithInstall<{
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("./interface").AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("./interface").AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: import("./interface").AvatarGroupSlots;
+    }), object>;
+}>;
+export default Avatar;

package/dist/avatar/index.js

@@ -0,0 +1,7 @@
+import { withInstall } from "../_util/withInstall.js";
+import Avatar_default from "./Avatar.js";
+import AvatarGroup_default from "./AvatarGroup.js";
+// src/avatar/index.ts
+var AvatarGroup = withInstall(AvatarGroup_default, "AmAvatarGroup");
+var Avatar = withInstall(Avatar_default, "AmAvatar", { Group: AvatarGroup });
+export { AvatarGroup, Avatar as default };

package/dist/avatar/interface.d.ts

@@ -0,0 +1,61 @@
+import type { CSSProperties } from 'vue';
+import type { SizeType, VueNode } from '../_util/type';
+export type AvatarSize = SizeType | number;
+export type AvatarShape = 'circle' | 'square';
+export interface AvatarSemanticClassNames {
+    root?: string;
+}
+export interface AvatarSemanticStyles {
+    root?: CSSProperties;
+}
+export interface AvatarProps {
+    /** Image url, or a custom image node */
+    src?: VueNode;
+    /** `srcset` of the image */
+    srcSet?: string;
+    alt?: string;
+    /** Icon avatar, the same-named slot wins */
+    icon?: VueNode;
+    shape?: AvatarShape;
+    /** `small` / `middle` / `large` or a number in px */
+    size?: AvatarSize;
+    /** Space (px) between the text and both edges, the text is scaled down to fit */
+    gap?: number;
+    draggable?: boolean | 'true' | 'false';
+    crossOrigin?: '' | 'anonymous' | 'use-credentials';
+    /** Mobile only: `object-fit` of the image */
+    fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    rootClass?: string;
+    classes?: AvatarSemanticClassNames;
+    styles?: AvatarSemanticStyles;
+}
+export interface AvatarEmits {
+    /** The image failed to load, the avatar falls back to `icon` / text */
+    error: [event: Event];
+}
+export interface AvatarSlots {
+    default?: () => any;
+    icon?: () => any;
+    src?: () => any;
+}
+export interface AvatarGroupMax {
+    /** Max avatars to show, the rest is folded into `+N` */
+    count?: number;
+    /** Style of the `+N` avatar */
+    style?: CSSProperties;
+}
+export interface AvatarGroupProps {
+    max?: AvatarGroupMax;
+    /** Size of every avatar in the group */
+    size?: AvatarSize;
+    /** Shape of every avatar in the group */
+    shape?: AvatarShape;
+    rootClass?: string;
+}
+export interface AvatarGroupSlots {
+    default?: () => any;
+    /** Custom content of the folded avatar */
+    overflow?: (ctx: {
+        count: number;
+    }) => any;
+}

package/dist/avatar/style/index.css

@@ -0,0 +1,94 @@
+.am-avatar {
+  /* component tokens */
+  --am-avatar-size: 40px;
+  --am-avatar-font-size: 18px;
+  --am-avatar-icon-size: 20px;
+  --am-avatar-border-radius: var(--am-border-radius);
+  --am-avatar-bg: var(--am-color-text-placeholder);
+  --am-avatar-color: var(--am-color-text-light-solid);
+  --am-avatar-group-overlap: -8px;
+  --am-avatar-group-border-color: var(--am-color-bg-container);
+
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--am-avatar-size);
+  height: var(--am-avatar-size);
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  color: var(--am-avatar-color);
+  font-size: var(--am-avatar-font-size);
+  font-family: var(--am-font-family);
+  line-height: 1;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+  background: var(--am-avatar-bg);
+  border-radius: 50%;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.am-avatar-square {
+  border-radius: var(--am-avatar-border-radius);
+}
+
+.am-avatar-sm {
+  --am-avatar-size: 28px;
+  --am-avatar-font-size: 14px;
+  --am-avatar-icon-size: 14px;
+  --am-avatar-border-radius: var(--am-border-radius-sm);
+}
+
+.am-avatar-lg {
+  --am-avatar-size: 56px;
+  --am-avatar-font-size: 24px;
+  --am-avatar-icon-size: 28px;
+  --am-avatar-border-radius: var(--am-border-radius-lg);
+}
+
+.am-avatar-image {
+  background: transparent;
+}
+
+.am-avatar-icon {
+  font-size: var(--am-avatar-icon-size);
+}
+
+.am-avatar-img,
+.am-avatar > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.am-avatar-string {
+  display: inline-block;
+  flex: none;
+  transform-origin: center;
+}
+
+/* ---------- group ---------- */
+.am-avatar-group {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.am-avatar-group > .am-avatar,
+.am-avatar-group > * > .am-avatar {
+  box-shadow: 0 0 0 2px var(--am-avatar-group-border-color);
+}
+
+.am-avatar-group > *:not(:first-child) {
+  margin-inline-start: var(--am-avatar-group-overlap);
+}
+
+.am-avatar-group-overflow {
+  --am-avatar-bg: color-mix(in srgb, var(--am-color-text-base) 15%, var(--am-color-bg-container));
+  --am-avatar-color: var(--am-color-text-secondary);
+}

package/dist/badge/Badge.js

@@ -0,0 +1,4 @@
+import Badge_vue_vue_type_script_setup_true_lang_default from "./Badge.vue_vue_type_script_setup_true_lang.js";
+// src/badge/Badge.vue
+var Badge_default = Badge_vue_vue_type_script_setup_true_lang_default;
+export { Badge_default as default };

package/dist/badge/Badge.vue.d.ts

@@ -0,0 +1,21 @@
+import type { BadgeProps, BadgeSlots } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = BadgeSlots;
+declare const __VLS_base: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+    title: string | false | null;
+    dot: boolean;
+    count: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    overflowCount: number;
+    showZero: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/badge/Badge.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,160 @@
+import BaseBadge_default from "../_base/BaseBadge.js";
+import { addUnit, isNumeric, isRenderable } from "../_util/index.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import { isPresetColor } from "./util.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, unref, useSlots, withCtx } from "vue";
+// src/badge/Badge.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "am-badge-status-text"
+};
+var Badge_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmBadge",
+	inheritAttrs: false,
+	__name: "Badge",
+	props: {
+		count: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		dot: {
+			type: Boolean,
+			default: false
+		},
+		overflowCount: { default: 99 },
+		showZero: {
+			type: Boolean,
+			default: false
+		},
+		offset: {},
+		color: {},
+		status: {},
+		text: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		size: {},
+		title: {
+			type: [
+				String,
+				null,
+				Boolean
+			],
+			default: void 0
+		},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const isEmpty = (val) => !isRenderable(val);
+		const isPrimitive = (val) => typeof val === "string" || typeof val === "number";
+		const hasStatus = computed(() => !isEmpty(props.status) || !isEmpty(props.color));
+		const isCustomCount = computed(() => !!slots.count || !isEmpty(props.count) && !isPrimitive(props.count));
+		const hasText = computed(() => !!slots.text || !isEmpty(props.text));
+		/** No wrapped content + status / color and nothing to count: a status dot with text. */
+		const isStatusMode = computed(() => !slots.default && hasStatus.value && !isCustomCount.value && (isEmpty(props.count) || hasText.value));
+		const isDot = computed(() => props.dot || hasStatus.value && isEmpty(props.count));
+		/** antd compat class: the rendered text (`String(count)` or `${overflowCount}+`) has more than one character. */
+		const isMultipleWords = computed(() => isPrimitive(props.count) && (String(props.count).length > 1 || Number(props.count) > props.overflowCount));
+		const mergedTitle = computed(() => {
+			if (props.title === null || props.title === false) return void 0;
+			return props.title ?? (isPrimitive(props.count) && !isDot.value ? String(props.count) : void 0);
+		});
+		const colorStyle = computed(() => {
+			if (isEmpty(props.color) || isPresetColor(props.color)) return void 0;
+			return { "--am-badge-color": props.color };
+		});
+		function toNegative(value) {
+			return isNumeric(value) ? `${-Number(value)}px` : `calc(${value} * -1)`;
+		}
+		const offsetStyle = computed(() => {
+			if (!props.offset || !slots.default) return void 0;
+			const [x, y] = props.offset;
+			return {
+				insetInlineEnd: toNegative(x),
+				marginTop: addUnit(y)
+			};
+		});
+		const colorClass = computed(() => ({
+			[`am-badge-status-${props.status}`]: !isEmpty(props.status),
+			[`am-badge-color-${props.color}`]: isPresetColor(props.color)
+		}));
+		const classNames = computed(() => [
+			"am-badge",
+			{
+				"am-badge-status": isStatusMode.value,
+				"am-badge-not-a-wrapper": !slots.default
+			},
+			props.rootClass,
+			props.classes?.root
+		]);
+		const indicatorClass = computed(() => [
+			"am-badge-indicator",
+			isDot.value ? "am-badge-dot" : "am-badge-count",
+			{
+				"am-badge-count-sm": !isDot.value && props.size === "small",
+				"am-badge-multiple-words": !isDot.value && isMultipleWords.value
+			},
+			colorClass.value,
+			props.classes?.indicator
+		]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+				class: classNames.value,
+				style: __props.styles?.root
+			}), [renderSlot(_ctx.$slots, "default"), isStatusMode.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", {
+				class: normalizeClass(["am-badge-indicator am-badge-status-dot", [colorClass.value, __props.classes?.indicator]]),
+				style: normalizeStyle([colorStyle.value, __props.styles?.indicator])
+			}, null, 6), hasText.value ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "text", {}, () => [createVNode(unref(RenderNode_default), { node: __props.text }, null, 8, ["node"])])])) : createCommentVNode("", true)], 64)) : isCustomCount.value ? (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: normalizeClass(["am-badge-indicator am-badge-custom-count", __props.classes?.indicator]),
+				style: normalizeStyle([offsetStyle.value, __props.styles?.indicator])
+			}, [renderSlot(_ctx.$slots, "count", {}, () => [createVNode(unref(RenderNode_default), { node: __props.count }, null, 8, ["node"])])], 6)) : (openBlock(), createBlock(Transition, {
+				key: 2,
+				name: "am-badge-zoom"
+			}, {
+				default: withCtx(() => [createVNode(unref(BaseBadge_default), {
+					count: __props.count,
+					dot: isDot.value,
+					"overflow-count": __props.overflowCount,
+					"show-zero": __props.showZero,
+					class: normalizeClass(indicatorClass.value),
+					style: normalizeStyle([
+						colorStyle.value,
+						offsetStyle.value,
+						__props.styles?.indicator
+					]),
+					title: mergedTitle.value
+				}, null, 8, [
+					"count",
+					"dot",
+					"overflow-count",
+					"show-zero",
+					"class",
+					"style",
+					"title"
+				])]),
+				_: 1
+			}))], 16);
+		};
+	}
+});
+export { Badge_vue_vue_type_script_setup_true_lang_default as default };

package/dist/badge/Ribbon.js

@@ -0,0 +1,4 @@
+import Ribbon_vue_vue_type_script_setup_true_lang_default from "./Ribbon.vue_vue_type_script_setup_true_lang.js";
+// src/badge/Ribbon.vue
+var Ribbon_default = Ribbon_vue_vue_type_script_setup_true_lang_default;
+export { Ribbon_default as default };