ensis-ui 0.0.0-stage → 3.0.0

package/dist/components/auto-complete/src/RsAutoComplete.impl.js

@@ -0,0 +1,414 @@
+import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import RsIcon_default from "../../icon/src/RsIcon.js";
+import { useRsFormContext, useRsFormField } from "../../form/src/form-utils.js";
+import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import { placeAnchoredPopup, stepEnabledIndex } from "../../_shared/src/overlay-utils.js";
+import { filterRsAutoCompleteOptions, normalizeRsAutoCompleteOptions } from "./auto-complete-utils.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useId, useModel, vModelDynamic, watch, withDirectives, withModifiers } from "vue";
+//#region src/components/auto-complete/src/RsAutoComplete.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"name",
+	"placeholder",
+	"disabled",
+	"aria-label",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant"
+];
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = [
+	"id",
+	"size",
+	"aria-label",
+	"aria-busy",
+	"data-rs-theme",
+	"data-placement",
+	"value"
+];
+var _hoisted_4 = {
+	key: 0,
+	disabled: "",
+	value: ""
+};
+var _hoisted_5 = [
+	"id",
+	"value",
+	"disabled",
+	"title"
+];
+var RsAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsAutoComplete",
+	inheritAttrs: false,
+	__name: "RsAutoComplete",
+	props: /*@__PURE__*/ mergeModels({
+		options: { default: () => [] },
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: {},
+		allowClear: {
+			type: Boolean,
+			default: false
+		},
+		filterOption: {
+			type: [Function, Boolean],
+			default: true
+		},
+		debounce: { default: 0 },
+		emptyText: { default: "" },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		loadingText: {},
+		id: {},
+		name: {},
+		ariaLabel: {}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {},
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"search",
+		"select",
+		"clear",
+		"focus",
+		"blur"
+	], ["update:modelValue", "update:open"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const model = useModel(__props, "modelValue");
+		const openModel = useModel(__props, "open");
+		const props = __props;
+		const emit = __emit;
+		const { t } = useRsI18n();
+		const attrs = useAttrs();
+		const formContext = useRsFormContext();
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const listId = useId();
+		const autoId = useId();
+		const inputId = computed(() => props.id || autoId);
+		const inputRef = ref(null);
+		const listRef = ref(null);
+		const highlight = ref(0);
+		const dismissed = ref(false);
+		const searchTimer = ref();
+		const popup = ref({
+			top: 0,
+			left: 0,
+			width: 0,
+			placement: "bottom"
+		});
+		/** 面板挂到 body 后仍跟输入框最近的 data-rs-theme（深色岛 / 混主题页）。 */
+		const panelTheme = ref();
+		function syncPanelTheme() {
+			const el = inputRef.value;
+			if (!el) {
+				panelTheme.value = void 0;
+				return;
+			}
+			const themed = el.closest("[data-rs-theme]");
+			panelTheme.value = themed instanceof HTMLElement ? themed.dataset.rsTheme : void 0;
+		}
+		const resolvedDisabled = computed(() => props.disabled || Boolean(formContext?.disabled.value));
+		const iconPx = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value]);
+		const normalized = computed(() => normalizeRsAutoCompleteOptions(props.options));
+		const suggestions = computed(() => filterRsAutoCompleteOptions(normalized.value, model.value, props.filterOption));
+		const suggestionViews = computed(() => suggestions.value.map((option, index) => ({
+			option,
+			index,
+			optionId: `${listId}-${String(option.value)}`
+		})));
+		const listSize = computed(() => {
+			const count = suggestions.value.length;
+			if (count === 0) return 2;
+			return Math.min(8, Math.max(2, count));
+		});
+		const open = computed(() => Boolean(openModel.value && !resolvedDisabled.value && !dismissed.value));
+		const activeOption = computed(() => suggestions.value[highlight.value]);
+		const selectedValue = computed(() => activeOption.value ? String(activeOption.value.value) : "");
+		const activeOptionId = computed(() => {
+			if (!open.value || !activeOption.value) return void 0;
+			return `${listId}-${String(activeOption.value.value)}`;
+		});
+		const showClear = computed(() => Boolean(props.allowClear && model.value && !resolvedDisabled.value));
+		const listStatusText = computed(() => {
+			if (props.loading && !suggestions.value.length) return props.loadingText || t("select.loading");
+			return props.emptyText || t("select.empty");
+		});
+		watch(model, (query) => {
+			if (searchTimer.value) clearTimeout(searchTimer.value);
+			const wait = props.debounce ?? 0;
+			if (wait <= 0) {
+				emit("search", query);
+				return;
+			}
+			searchTimer.value = setTimeout(() => emit("search", query), wait);
+		});
+		function placePopup() {
+			const input = inputRef.value;
+			if (!input || !open.value) return;
+			const anchor = input.getBoundingClientRect();
+			const list = listRef.value?.getBoundingClientRect();
+			popup.value = placeAnchoredPopup({
+				top: anchor.top,
+				left: anchor.left,
+				height: anchor.height,
+				width: anchor.width
+			}, {
+				width: anchor.width,
+				height: list?.height || Math.min(256, Math.max(1, suggestions.value.length) * 36)
+			}, {
+				width: window.innerWidth,
+				height: window.innerHeight
+			});
+		}
+		let frame = 0;
+		let overlayBound = false;
+		function requestPlace() {
+			if (typeof window === "undefined" || frame) return;
+			frame = window.requestAnimationFrame(() => {
+				frame = 0;
+				placePopup();
+			});
+		}
+		function onWindowChange() {
+			if (open.value) requestPlace();
+		}
+		function attachOverlay() {
+			if (overlayBound || typeof window === "undefined") return;
+			overlayBound = true;
+			window.addEventListener("resize", onWindowChange);
+			window.addEventListener("scroll", onWindowChange, true);
+		}
+		function detachOverlay() {
+			if (frame && typeof window !== "undefined") {
+				window.cancelAnimationFrame(frame);
+				frame = 0;
+			}
+			if (!overlayBound || typeof window === "undefined") return;
+			overlayBound = false;
+			window.removeEventListener("resize", onWindowChange);
+			window.removeEventListener("scroll", onWindowChange, true);
+		}
+		function showList() {
+			if (resolvedDisabled.value) return;
+			dismissed.value = false;
+			openModel.value = true;
+			requestPlace();
+		}
+		function hideList() {
+			openModel.value = false;
+		}
+		function onPick(option) {
+			if (option.disabled) return;
+			model.value = String(option.value);
+			emit("select", String(option.value));
+			dismissed.value = true;
+			hideList();
+			nextTick(() => inputRef.value?.focus());
+		}
+		function onNativeSelect(event) {
+			const value = event.target.value;
+			const option = suggestions.value.find((item) => String(item.value) === value);
+			if (option) onPick(option);
+		}
+		function onClear() {
+			model.value = "";
+			emit("clear");
+			showList();
+		}
+		function onKeydown(event) {
+			if (event.key === "Escape") {
+				if (!open.value) return;
+				event.preventDefault();
+				dismissed.value = true;
+				hideList();
+				return;
+			}
+			if (!open.value) {
+				if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+					event.preventDefault();
+					showList();
+				}
+				return;
+			}
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(suggestions.value, highlight.value, 1);
+				return;
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(suggestions.value, highlight.value, -1);
+				return;
+			}
+			if (event.key === "Home") {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(suggestions.value, -1, 1);
+				return;
+			}
+			if (event.key === "End") {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(suggestions.value, suggestions.value.length, -1);
+				return;
+			}
+			if (event.key === "Enter" && activeOption.value) {
+				event.preventDefault();
+				onPick(activeOption.value);
+				return;
+			}
+			if (event.key === "Tab" && activeOption.value) onPick(activeOption.value);
+		}
+		function onInput() {
+			showList();
+		}
+		function onFocus(event) {
+			emit("focus", event);
+			showList();
+		}
+		let blurTimer = 0;
+		function onBlur(event) {
+			emit("blur", event);
+			if (blurTimer) window.clearTimeout(blurTimer);
+			blurTimer = window.setTimeout(() => {
+				blurTimer = 0;
+				if (document.activeElement === inputRef.value) return;
+				hideList();
+			}, 0);
+		}
+		function scrollActiveIntoView() {
+			if (!open.value || !activeOptionId.value) return;
+			document.getElementById(activeOptionId.value)?.scrollIntoView({ block: "nearest" });
+		}
+		watch(suggestions, (list) => {
+			highlight.value = list.findIndex((item) => !item.disabled);
+			if (highlight.value < 0) highlight.value = 0;
+			if (open.value) requestPlace();
+		});
+		watch(highlight, () => {
+			nextTick(scrollActiveIntoView);
+		});
+		watch(open, (isOpen) => {
+			if (isOpen) {
+				attachOverlay();
+				nextTick(() => {
+					syncPanelTheme();
+					requestPlace();
+				});
+				return;
+			}
+			detachOverlay();
+		});
+		function setFieldValue(value) {
+			model.value = value == null ? "" : String(value);
+		}
+		useRsFormField(() => ({
+			get name() {
+				return props.name;
+			},
+			getValue: () => model.value,
+			setValue: setFieldValue
+		}));
+		function focus() {
+			inputRef.value?.focus();
+		}
+		function blur() {
+			inputRef.value?.blur();
+		}
+		__expose({
+			focus,
+			blur
+		});
+		onUnmounted(() => {
+			detachOverlay();
+			if (searchTimer.value) clearTimeout(searchTimer.value);
+			if (blurTimer) window.clearTimeout(blurTimer);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["rs-auto-complete", [`rs-auto-complete--${unref(resolvedSize)}`, {
+				"rs-auto-complete--clearable": showClear.value,
+				"rs-auto-complete--disabled": resolvedDisabled.value
+			}]]) }, [
+				withDirectives(createElementVNode("input", mergeProps({
+					id: inputId.value,
+					ref_key: "inputRef",
+					ref: inputRef
+				}, unref(attrs), {
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					class: "rs-auto-complete__input",
+					name: __props.name,
+					placeholder: __props.placeholder ?? unref(t)("autocomplete.placeholder"),
+					disabled: resolvedDisabled.value,
+					"aria-label": __props.ariaLabel,
+					autocomplete: "off",
+					role: "combobox",
+					"aria-autocomplete": "list",
+					"aria-haspopup": "listbox",
+					"aria-expanded": open.value ? "true" : "false",
+					"aria-controls": open.value ? unref(listId) : void 0,
+					"aria-activedescendant": activeOptionId.value,
+					onKeydown,
+					onInput,
+					onFocus,
+					onBlur
+				}), null, 16, _hoisted_1), [[vModelDynamic, model.value]]),
+				showClear.value ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: "rs-auto-complete__clear",
+					"aria-label": unref(t)("select.clear"),
+					onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+					onClick: onClear
+				}, [createVNode(RsIcon_default, {
+					name: "x",
+					size: iconPx.value
+				}, null, 8, ["size"])], 40, _hoisted_2)) : createCommentVNode("", true),
+				(openBlock(), createBlock(Teleport, { to: "body" }, [open.value ? (openBlock(), createElementBlock("select", {
+					key: 0,
+					id: unref(listId),
+					ref_key: "listRef",
+					ref: listRef,
+					class: "rs-auto-complete__list",
+					size: listSize.value,
+					tabindex: "-1",
+					"aria-label": unref(t)("autocomplete.suggestions"),
+					"aria-busy": __props.loading ? "true" : void 0,
+					"data-rs-theme": panelTheme.value,
+					"data-placement": popup.value.placement,
+					value: selectedValue.value,
+					style: normalizeStyle({
+						position: "fixed",
+						top: `${popup.value.top}px`,
+						left: `${popup.value.left}px`,
+						width: `${popup.value.width}px`
+					}),
+					onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+					onChange: onNativeSelect
+				}, [!suggestions.value.length ? (openBlock(), createElementBlock("option", _hoisted_4, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(listStatusText.value), 1)], true)])) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(suggestionViews.value, (row) => {
+					return openBlock(), createElementBlock("option", {
+						id: row.optionId,
+						key: String(row.option.value),
+						class: normalizeClass(["rs-auto-complete__item", { "rs-auto-complete__item--active": row.index === highlight.value }]),
+						value: String(row.option.value),
+						disabled: row.option.disabled,
+						title: row.option.title
+					}, [renderSlot(_ctx.$slots, "option", {
+						option: row.option,
+						active: row.index === highlight.value
+					}, () => [createTextVNode(toDisplayString(row.option.label), 1)], true)], 10, _hoisted_5);
+				}), 128))], 44, _hoisted_3)) : createCommentVNode("", true)]))
+			], 2);
+		};
+	}
+});
+//#endregion
+export { RsAutoComplete_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/auto-complete/src/RsAutoComplete.js

@@ -0,0 +1,8 @@
+import './RsAutoComplete.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import RsAutoComplete_vue_vue_type_script_setup_true_lang_default from "./RsAutoComplete.impl.js";
+
+//#region src/components/auto-complete/src/RsAutoComplete.vue
+var RsAutoComplete_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsAutoComplete_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a95db999"]]);
+//#endregion
+export { RsAutoComplete_default as default };

package/dist/components/auto-complete/src/auto-complete-utils.d.ts

@@ -0,0 +1,7 @@
+import { type RsSelectFilterOption, type RsSelectOption } from '../../select/src/select-utils';
+export type RsAutoCompleteOption = RsSelectOption;
+export type RsAutoCompleteFilterOption = RsSelectFilterOption;
+export type RsAutoCompleteOptionInput = string | RsSelectOption;
+export declare function normalizeRsAutoCompleteOptions(options: ReadonlyArray<RsAutoCompleteOptionInput> | undefined): RsAutoCompleteOption[];
+/** filterOption === false 时不过滤，交给远程 @search。 */
+export declare function filterRsAutoCompleteOptions(options: RsAutoCompleteOption[], query: string, filterOption?: RsAutoCompleteFilterOption | boolean): RsAutoCompleteOption[];

package/dist/components/auto-complete/src/auto-complete-utils.js

@@ -0,0 +1,17 @@
+import { filterSelectOptions } from "../../select/src/select-utils.js";
+//#region src/components/auto-complete/src/auto-complete-utils.ts
+function normalizeRsAutoCompleteOptions(options) {
+	if (!options?.length) return [];
+	return options.map((item) => typeof item === "string" ? {
+		label: item,
+		value: item
+	} : item);
+}
+var containsIgnoreCase = (text, query) => text.toLowerCase().includes(query.toLowerCase());
+/** filterOption === false 时不过滤，交给远程 @search。 */
+function filterRsAutoCompleteOptions(options, query, filterOption) {
+	if (filterOption === false) return options;
+	return filterSelectOptions(options, query, containsIgnoreCase, filterOption);
+}
+//#endregion
+export { filterRsAutoCompleteOptions, normalizeRsAutoCompleteOptions };

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

@@ -0,0 +1,2 @@
+export { default as RsAvatar } from './src/RsAvatar.js';
+export type { RsAvatarShape, RsAvatarSize, RsAvatarTone } from './src/avatar-utils';

package/dist/components/avatar/src/RsAvatar.css

@@ -0,0 +1,77 @@
+
+.rs-avatar[data-v-5eb19cf0] {
+  --rs-avatar-size-sm: 1.75rem;
+  --rs-avatar-size-md: 2.25rem;
+  --rs-avatar-size-lg: 3rem;
+  --rs-avatar-size: var(--rs-avatar-size-md);
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  flex-shrink: 0;
+  width: var(--rs-avatar-size);
+  height: var(--rs-avatar-size);
+  border: 1px solid var(--rs-border);
+  background: var(--rs-surface);
+  vertical-align: middle;
+}
+.rs-avatar--circle[data-v-5eb19cf0] {
+  border-radius: var(--rs-radius-full);
+}
+.rs-avatar--square[data-v-5eb19cf0] {
+  border-radius: var(--rs-radius-sm);
+}
+.rs-avatar--sm[data-v-5eb19cf0] {
+  --rs-avatar-size: var(--rs-avatar-size-sm);
+}
+.rs-avatar--md[data-v-5eb19cf0] {
+  --rs-avatar-size: var(--rs-avatar-size-md);
+}
+.rs-avatar--lg[data-v-5eb19cf0] {
+  --rs-avatar-size: var(--rs-avatar-size-lg);
+}
+.rs-avatar__image[data-v-5eb19cf0] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+}
+.rs-avatar__image--ready[data-v-5eb19cf0] {
+  opacity: 1;
+}
+.rs-avatar__fallback[data-v-5eb19cf0] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-semibold);
+}
+.rs-avatar__fallback--default[data-v-5eb19cf0] {
+  background: var(--rs-surface-hover);
+  color: var(--rs-muted);
+}
+.rs-avatar__fallback--primary[data-v-5eb19cf0] {
+  background: var(--rs-primary-container);
+  color: var(--rs-on-primary-container);
+}
+.rs-avatar__fallback--success[data-v-5eb19cf0] {
+  background: var(--rs-success-container);
+  color: var(--rs-on-success-container);
+}
+.rs-avatar__fallback--warning[data-v-5eb19cf0] {
+  background: var(--rs-warning-container);
+  color: var(--rs-on-warning-container);
+}
+.rs-avatar__fallback--danger[data-v-5eb19cf0] {
+  background: var(--rs-danger-container);
+  color: var(--rs-on-danger-container);
+}
+@media (forced-colors: active) {
+.rs-avatar[data-v-5eb19cf0] {
+    border: 1px solid CanvasText;
+    forced-color-adjust: none;
+}
+}

package/dist/components/avatar/src/RsAvatar.d.ts

@@ -0,0 +1,36 @@
+import { type RsAvatarShape, type RsAvatarSize, type RsAvatarTone } from './avatar-utils';
+export type { RsAvatarShape, RsAvatarSize, RsAvatarTone };
+type __VLS_Props = {
+    src?: string;
+    alt?: string;
+    name?: string;
+    fallback?: string;
+    icon?: string;
+    size?: RsAvatarSize;
+    shape?: RsAvatarShape;
+    tone?: RsAvatarTone;
+    label?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    fallback?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    name: string;
+    label: string;
+    size: RsAvatarSize;
+    icon: string;
+    tone: RsAvatarTone;
+    src: string;
+    alt: string;
+    fallback: string;
+    shape: RsAvatarShape;
+}, {}, {}, {}, 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/components/avatar/src/RsAvatar.impl.js

@@ -0,0 +1,83 @@
+import RsIcon_default from "../../icon/src/RsIcon.js";
+import { RS_AVATAR_ICON_PX, getAvatarInitials, resolveRsAvatarShape, resolveRsAvatarSize, resolveRsAvatarTone } from "./avatar-utils.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, ref, renderSlot, toDisplayString, watch } from "vue";
+//#region src/components/avatar/src/RsAvatar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role", "aria-label"];
+var _hoisted_2 = ["src", "alt"];
+var _hoisted_3 = { key: 1 };
+var RsAvatar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsAvatar",
+	__name: "RsAvatar",
+	props: {
+		src: { default: void 0 },
+		alt: { default: void 0 },
+		name: { default: void 0 },
+		fallback: { default: void 0 },
+		icon: { default: "user" },
+		size: { default: "md" },
+		shape: { default: "circle" },
+		tone: { default: "primary" },
+		label: { default: void 0 }
+	},
+	setup(__props) {
+		const props = __props;
+		const imageLoaded = ref(false);
+		const imageFailed = ref(false);
+		watch(() => props.src, () => {
+			imageLoaded.value = false;
+			imageFailed.value = false;
+		});
+		const resolvedSize = computed(() => resolveRsAvatarSize(props.size));
+		const resolvedShape = computed(() => resolveRsAvatarShape(props.shape));
+		const resolvedTone = computed(() => resolveRsAvatarTone(props.tone));
+		const iconPx = computed(() => RS_AVATAR_ICON_PX[resolvedSize.value]);
+		const fallbackText = computed(() => {
+			if (props.fallback?.trim()) return props.fallback.trim();
+			if (props.name?.trim()) return getAvatarInitials(props.name);
+			return "";
+		});
+		const showIconFallback = computed(() => !fallbackText.value);
+		const showImage = computed(() => Boolean(props.src) && !imageFailed.value);
+		const showFallback = computed(() => !showImage.value || !imageLoaded.value);
+		const pictureReady = computed(() => showImage.value && imageLoaded.value);
+		const imageAlt = computed(() => props.alt ?? props.name ?? "");
+		const ariaLabel = computed(() => props.label ?? props.alt ?? props.name ?? void 0);
+		const rootRole = computed(() => {
+			if (pictureReady.value || !ariaLabel.value) return void 0;
+			return "img";
+		});
+		const rootLabel = computed(() => pictureReady.value ? void 0 : ariaLabel.value);
+		function onLoad() {
+			imageLoaded.value = true;
+			imageFailed.value = false;
+		}
+		function onError() {
+			imageLoaded.value = false;
+			imageFailed.value = true;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				class: normalizeClass(["rs-avatar", [`rs-avatar--${resolvedSize.value}`, `rs-avatar--${resolvedShape.value}`]]),
+				role: rootRole.value,
+				"aria-label": rootLabel.value
+			}, [showImage.value ? (openBlock(), createElementBlock("img", {
+				key: 0,
+				class: normalizeClass(["rs-avatar__image", { "rs-avatar__image--ready": imageLoaded.value }]),
+				src: __props.src,
+				alt: imageAlt.value,
+				onLoad,
+				onError
+			}, null, 42, _hoisted_2)) : createCommentVNode("", true), showFallback.value ? (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: normalizeClass(["rs-avatar__fallback", `rs-avatar__fallback--${resolvedTone.value}`]),
+				"aria-hidden": "true"
+			}, [renderSlot(_ctx.$slots, "fallback", {}, () => [showIconFallback.value ? (openBlock(), createBlock(RsIcon_default, {
+				key: 0,
+				name: __props.icon,
+				size: iconPx.value
+			}, null, 8, ["name", "size"])) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(fallbackText.value), 1))], true)], 2)) : createCommentVNode("", true)], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RsAvatar_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/avatar/src/RsAvatar.js

@@ -0,0 +1,8 @@
+import './RsAvatar.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import RsAvatar_vue_vue_type_script_setup_true_lang_default from "./RsAvatar.impl.js";
+
+//#region src/components/avatar/src/RsAvatar.vue
+var RsAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsAvatar_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5eb19cf0"]]);
+//#endregion
+export { RsAvatar_default as default };

package/dist/components/avatar/src/avatar-utils.d.ts

@@ -0,0 +1,20 @@
+/** 头像边长。不是控件四档，没有 ssm。 */
+export declare const RS_AVATAR_SIZES: readonly ["sm", "md", "lg"];
+export type RsAvatarSize = (typeof RS_AVATAR_SIZES)[number];
+export declare const RS_AVATAR_SHAPES: readonly ["circle", "square"];
+export type RsAvatarShape = (typeof RS_AVATAR_SHAPES)[number];
+export declare const RS_AVATAR_TONES: readonly ["default", "primary", "success", "warning", "danger"];
+export type RsAvatarTone = (typeof RS_AVATAR_TONES)[number];
+/** 回退图标边长，跟原来 sm 14 / md 16 / lg 20 一致。 */
+export declare const RS_AVATAR_ICON_PX: Record<RsAvatarSize, number>;
+export declare function isRsAvatarSize(value: unknown): value is RsAvatarSize;
+export declare function isRsAvatarShape(value: unknown): value is RsAvatarShape;
+export declare function isRsAvatarTone(value: unknown): value is RsAvatarTone;
+export declare function resolveRsAvatarSize(size?: RsAvatarSize | null): RsAvatarSize;
+export declare function resolveRsAvatarShape(shape?: RsAvatarShape | null): RsAvatarShape;
+export declare function resolveRsAvatarTone(tone?: RsAvatarTone | null): RsAvatarTone;
+/**
+ * 从姓名提取缩写（最多 2 个字符）。
+ * 单段取前两字；多段取前两段首字。空串返回空，由组件改走图标。
+ */
+export declare function getAvatarInitials(name: string): string;