niuma-ui 1.3.0 → 1.3.2

package/dist/components/RsTextarea.css

@@ -0,0 +1,126 @@
+
+.rs-textarea[data-v-f75ef1a0] {
+  width: 100%;
+}
+.rs-textarea__shell[data-v-f75ef1a0] {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--rs-input-border, var(--rs-border));
+  border-radius: var(--rs-input-radius, var(--rs-radius-sm));
+  background: var(--rs-input-bg);
+  box-shadow: var(--rs-input-shadow, none);
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast);
+}
+.rs-textarea__shell[data-v-f75ef1a0]:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
+  border-color: var(--rs-input-border-hover, var(--rs-border));
+}
+.rs-textarea__shell[data-v-f75ef1a0]:focus-within {
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-textarea__shell.is-invalid[data-v-f75ef1a0] {
+  border-color: var(--rs-danger);
+}
+.rs-textarea__shell.is-invalid[data-v-f75ef1a0]:focus-within {
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) color-mix(in srgb, var(--rs-danger) 14%, transparent);
+}
+.rs-textarea__shell.is-disabled[data-v-f75ef1a0] {
+  opacity: 0.38;
+  cursor: not-allowed;
+  background: var(--rs-surface-hover);
+}
+.rs-textarea__shell.is-readonly[data-v-f75ef1a0] {
+  background: var(--rs-surface-hover);
+}
+.rs-textarea__control[data-v-f75ef1a0] {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 4.5rem;
+  padding: 0.55rem 0.75rem;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--rs-text);
+  font: inherit;
+  font-size: var(--rs-font-size-sm);
+  line-height: 1.5;
+}
+.rs-textarea__shell.is-autosize .rs-textarea__control[data-v-f75ef1a0] {
+  min-height: 0;
+}
+.rs-textarea__shell.has-count .rs-textarea__control[data-v-f75ef1a0] {
+  padding-bottom: 1.55rem;
+}
+.rs-textarea__shell.has-clear .rs-textarea__control[data-v-f75ef1a0] {
+  padding-right: 1.85rem;
+}
+.rs-input-field--sm .rs-textarea__control[data-v-f75ef1a0] {
+  min-height: 3.5rem;
+  padding: 0.4rem 0.6rem;
+  font-size: var(--rs-font-size-xs);
+}
+.rs-input-field--sm .rs-textarea__shell.has-count .rs-textarea__control[data-v-f75ef1a0] {
+  padding-bottom: 1.4rem;
+}
+.rs-input-field--lg .rs-textarea__control[data-v-f75ef1a0] {
+  min-height: 5.5rem;
+  padding: 0.7rem 0.9rem;
+}
+.rs-textarea__control[data-v-f75ef1a0]::placeholder {
+  color: var(--rs-placeholder);
+}
+.rs-textarea__control[data-v-f75ef1a0]:disabled {
+  cursor: not-allowed;
+}
+.rs-textarea__control[data-v-f75ef1a0]:read-only {
+  cursor: default;
+}
+.rs-textarea__clear[data-v-f75ef1a0] {
+  position: absolute;
+  top: 0.45rem;
+  right: 0.45rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--rs-radius-xs);
+  background: transparent;
+  color: var(--rs-muted);
+  cursor: pointer;
+  transition:
+    color var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+}
+.rs-textarea__clear[data-v-f75ef1a0]:hover {
+  color: var(--rs-text);
+  background: var(--rs-item-hover);
+}
+.rs-textarea__count[data-v-f75ef1a0] {
+  position: absolute;
+  right: 0.65rem;
+  bottom: 0.3rem;
+  margin: 0;
+  pointer-events: none;
+  font-size: var(--rs-font-size-xs);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  color: var(--rs-muted);
+}
+.rs-textarea__count.is-limit[data-v-f75ef1a0] {
+  color: var(--rs-danger);
+}
+.rs-field--label-left .rs-textarea[data-v-f75ef1a0] {
+  grid-column: 2;
+  min-width: 0;
+}

package/dist/components/RsTextarea.d.ts

@@ -0,0 +1,114 @@
+import type { RsComponentSize, RsRadius } from '../theme/types';
+import { type RsFormLabelPosition } from './form-utils';
+import { type RsFormRuleTrigger } from './form-rules';
+import type { RsInputRule, RsInputValidateTrigger } from './input-rules';
+/** 原生 resize；autosize 开启时强制 none，与 Element Plus 一致。 */
+export type RsTextareaResize = 'none' | 'horizontal' | 'vertical' | 'both';
+/**
+ * 自适应高度。true 从 rows 起往下长；对象可锁 minRows / maxRows。
+ * 对齐 Ant Design autoSize、Element Plus autosize。
+ */
+export type RsTextareaAutosize = boolean | {
+    minRows?: number;
+    maxRows?: number;
+};
+/**
+ * RsTextarea 模板 ref 请用此类型。
+ * 不要写 InstanceType<typeof RsTextarea>：组件实例类型过深，vue-tsc 会报 Excessive stack depth。
+ */
+export interface RsTextareaExpose {
+    validate: (trigger?: RsFormRuleTrigger) => Promise<boolean>;
+    clearValidation: () => void;
+    setValue: (value: unknown) => void;
+    setError: (message: string) => void;
+    focus: () => void;
+    blur: () => void;
+}
+/** 模板 ref 实例：expose + 根节点 */
+export type RsTextareaInstance = RsTextareaExpose & {
+    $el: HTMLElement;
+};
+type __VLS_Props = {
+    id?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    invalid?: boolean;
+    errorMessage?: string;
+    size?: RsComponentSize;
+    radius?: RsRadius;
+    rows?: number;
+    resize?: RsTextareaResize;
+    /** true 或 { minRows, maxRows }；开启后不可拖拽改高 */
+    autosize?: RsTextareaAutosize;
+    rule?: RsInputRule;
+    validator?: (value: string) => boolean | string;
+    required?: boolean;
+    validateTrigger?: RsInputValidateTrigger;
+    name?: string;
+    minlength?: number;
+    maxlength?: number;
+    showCount?: boolean;
+    clearable?: boolean;
+    showValidateMessage?: boolean;
+    label?: string;
+    hint?: string;
+    labelPosition?: RsFormLabelPosition;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_6: {
+    value: string;
+    count: number;
+    maxlength: number | undefined;
+}, __VLS_8: {
+    message: string;
+};
+type __VLS_Slots = {} & {
+    count?: (props: typeof __VLS_6) => any;
+} & {
+    error?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsTextareaExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
+    clear: () => any;
+    "update:modelValue": (value: string) => any;
+    validate: (payload: {
+        valid: boolean;
+        message?: string;
+    }) => any;
+    pressEnter: (event: KeyboardEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onValidate?: ((payload: {
+        valid: boolean;
+        message?: string;
+    }) => any) | undefined;
+    onPressEnter?: ((event: KeyboardEvent) => any) | undefined;
+}>, {
+    invalid: boolean;
+    resize: RsTextareaResize;
+    required: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    validateTrigger: RsInputValidateTrigger;
+    clearable: boolean;
+    showCount: boolean;
+    showValidateMessage: boolean;
+    rows: number;
+    autosize: RsTextareaAutosize;
+}, {}, {}, {}, 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/RsTextarea.impl.js

@@ -0,0 +1,385 @@
+import { useRsI18n } from "../composables/useRsI18n.js";
+import RsIcon_default from "./RsIcon.js";
+import { buildLocalInputRules, runFormFieldRules } from "./form-rules.js";
+import { isRsFormItemBoundControl, useRsFormContext, useRsFormField, useRsFormItemContext } from "./form-utils.js";
+import { useResolvedRsComponentSize } from "./resolve-size.js";
+import { rsRadiusCss, useResolvedRsRadius } from "./resolve-radius.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, useAttrs, useId, useModel, watch, withModifiers } from "vue";
+//#region src/components/RsTextarea.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "rs-field__label"
+};
+var _hoisted_2 = ["for"];
+var _hoisted_3 = {
+	key: 0,
+	class: "rs-field__required",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = { class: "rs-textarea" };
+var _hoisted_5 = [
+	"id",
+	"value",
+	"rows",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"minlength",
+	"maxlength",
+	"aria-invalid",
+	"aria-describedby"
+];
+var _hoisted_6 = ["aria-label"];
+var _hoisted_7 = ["id"];
+var _hoisted_8 = {
+	key: 1,
+	class: "rs-field__hint"
+};
+var RsTextarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "RsTextarea",
+	props: /*@__PURE__*/ mergeModels({
+		id: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		errorMessage: {},
+		size: {},
+		radius: {},
+		rows: { default: 3 },
+		resize: { default: "vertical" },
+		autosize: {
+			type: [Boolean, Object],
+			default: false
+		},
+		rule: {},
+		validator: {},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		validateTrigger: { default: "blur" },
+		name: {},
+		minlength: {},
+		maxlength: {},
+		showCount: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		showValidateMessage: {
+			type: Boolean,
+			default: true
+		},
+		label: {},
+		hint: {},
+		labelPosition: {}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"validate",
+		"blur",
+		"focus",
+		"pressEnter",
+		"clear"
+	], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const { t } = useRsI18n();
+		const model = useModel(__props, "modelValue", {
+			get(value) {
+				return value == null ? "" : String(value);
+			},
+			set(value) {
+				return value == null ? "" : String(value);
+			}
+		});
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const formContext = useRsFormContext();
+		const formItem = useRsFormItemContext();
+		const boundToItem = computed(() => isRsFormItemBoundControl(formItem, {
+			id: props.id,
+			name: props.name
+		}));
+		const fieldId = useId();
+		const textareaRef = ref(null);
+		const touched = ref(false);
+		const autoInvalid = ref(false);
+		const autoMessage = ref("");
+		const composing = ref(false);
+		const resolvedId = computed(() => props.id ?? fieldId);
+		const resolvedLabelPosition = computed(() => props.labelPosition ?? formContext?.labelPosition.value ?? "top");
+		const resolvedLabelAlign = computed(() => formContext?.labelAlign.value ?? "start");
+		const errorId = computed(() => `${resolvedId.value}-error`);
+		const displayMessage = computed(() => {
+			if (boundToItem.value) return "";
+			if (props.errorMessage) return props.errorMessage;
+			if (props.showValidateMessage && autoInvalid.value) return autoMessage.value;
+			return "";
+		});
+		const isInvalid = computed(() => {
+			if (boundToItem.value) return Boolean(formItem?.invalid.value || props.invalid);
+			return props.invalid || autoInvalid.value;
+		});
+		const describedBy = computed(() => {
+			if (boundToItem.value) return formItem?.describedBy.value;
+			return displayMessage.value ? errorId.value : void 0;
+		});
+		const resolvedDisabled = computed(() => props.disabled || formContext?.disabled.value || false);
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const resolvedRadius = useResolvedRsRadius(() => props.radius, "sm");
+		const radiusStyle = computed(() => ({ "--rs-input-radius": rsRadiusCss(resolvedRadius.value) }));
+		const fieldStyle = computed(() => {
+			if (resolvedLabelPosition.value !== "left") return void 0;
+			const labelWidth = formContext?.labelWidth.value;
+			if (!labelWidth) return void 0;
+			return { "--rs-field-label-width": labelWidth };
+		});
+		const autosizeEnabled = computed(() => Boolean(props.autosize));
+		const autosizeSpec = computed(() => typeof props.autosize === "object" && props.autosize ? props.autosize : {});
+		const displayRows = computed(() => autosizeSpec.value.minRows ?? props.rows);
+		const resolvedResize = computed(() => autosizeEnabled.value ? "none" : props.resize);
+		const countText = computed(() => {
+			const n = model.value.length;
+			return props.maxlength != null ? `${n} / ${props.maxlength}` : String(n);
+		});
+		const countLimitReached = computed(() => props.maxlength != null && model.value.length >= props.maxlength);
+		const showClearButton = computed(() => props.clearable && !resolvedDisabled.value && !props.readonly && model.value.length > 0);
+		function parseLineHeight(el) {
+			const style = getComputedStyle(el);
+			const lh = Number.parseFloat(style.lineHeight);
+			if (Number.isFinite(lh) && lh > 0) return lh;
+			return (Number.parseFloat(style.fontSize) || 14) * 1.5;
+		}
+		function autosizePadding(el) {
+			const style = getComputedStyle(el);
+			const pad = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
+			if (style.boxSizing !== "border-box") return 0;
+			const border = Number.parseFloat(style.borderTopWidth) + Number.parseFloat(style.borderBottomWidth);
+			return (Number.isFinite(pad) ? pad : 0) + (Number.isFinite(border) ? border : 0);
+		}
+		function adjustHeight() {
+			const el = textareaRef.value;
+			if (!el) return;
+			if (!autosizeEnabled.value) {
+				el.style.height = "";
+				el.style.overflowY = "";
+				return;
+			}
+			el.style.height = "auto";
+			el.style.overflowY = "hidden";
+			const lineHeight = parseLineHeight(el);
+			const extra = autosizePadding(el);
+			const minRows = autosizeSpec.value.minRows ?? props.rows;
+			const maxRows = autosizeSpec.value.maxRows;
+			const min = lineHeight * minRows + extra;
+			const max = maxRows != null ? lineHeight * maxRows + extra : void 0;
+			let height = el.scrollHeight;
+			if (height < min) height = min;
+			if (max != null && height > max) {
+				height = max;
+				el.style.overflowY = "auto";
+			}
+			el.style.height = `${height}px`;
+		}
+		function scheduleAdjustHeight() {
+			nextTick(adjustHeight);
+		}
+		async function runValidate(trigger = "submit") {
+			const formRules = formContext?.getFieldRules(props.name) ?? [];
+			const localRules = buildLocalInputRules({
+				required: props.required,
+				rule: props.rule,
+				validator: props.validator
+			});
+			const rules = [...formRules, ...localRules];
+			if (!rules.length) {
+				autoInvalid.value = false;
+				autoMessage.value = "";
+				emit("validate", { valid: true });
+				return true;
+			}
+			const result = await runFormFieldRules(model.value, rules, {
+				trigger,
+				t
+			});
+			autoInvalid.value = !result.valid;
+			autoMessage.value = result.message ?? "";
+			emit("validate", result);
+			return result.valid;
+		}
+		function setError(message) {
+			autoInvalid.value = true;
+			autoMessage.value = message;
+		}
+		function setValue(value) {
+			model.value = String(value ?? "");
+			scheduleAdjustHeight();
+		}
+		function clearValidation() {
+			touched.value = false;
+			autoInvalid.value = false;
+			autoMessage.value = "";
+		}
+		function focus() {
+			textareaRef.value?.focus();
+		}
+		function blur() {
+			textareaRef.value?.blur();
+		}
+		function onNativeInput(event) {
+			const el = event.target;
+			model.value = el?.value ?? "";
+			scheduleAdjustHeight();
+			if (composing.value) return;
+			if (touched.value && (props.validateTrigger === "input" || props.validateTrigger === "both")) runValidate("change");
+		}
+		function onCompositionStart() {
+			composing.value = true;
+		}
+		function onCompositionEnd(event) {
+			composing.value = false;
+			onNativeInput(event);
+		}
+		function onBlur(event) {
+			touched.value = true;
+			if (props.validateTrigger === "blur" || props.validateTrigger === "both") runValidate("blur");
+			emit("blur", event);
+		}
+		function onKeydown(event) {
+			if (event.key !== "Enter" || composing.value) return;
+			emit("pressEnter", event);
+		}
+		function onClear() {
+			if (resolvedDisabled.value || props.readonly) return;
+			model.value = "";
+			emit("clear");
+			nextTick(() => {
+				textareaRef.value?.focus();
+				adjustHeight();
+				if (props.validateTrigger === "input" || props.validateTrigger === "both") runValidate("change");
+			});
+		}
+		watch([
+			model,
+			() => props.autosize,
+			() => props.rows,
+			() => props.size,
+			() => props.showCount
+		], scheduleAdjustHeight);
+		onMounted(adjustHeight);
+		useRsFormField(() => ({
+			get name() {
+				return props.name;
+			},
+			getValue: () => model.value,
+			setValue,
+			validate: async (trigger) => {
+				return {
+					valid: await runValidate(trigger ?? "submit"),
+					message: autoMessage.value || void 0,
+					name: props.name
+				};
+			},
+			clearValidation,
+			setError
+		}));
+		__expose({
+			validate: runValidate,
+			clearValidation,
+			setValue,
+			setError,
+			focus,
+			blur
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["rs-field", [
+					`rs-field--label-${resolvedLabelPosition.value}`,
+					resolvedLabelPosition.value === "left" && resolvedLabelAlign.value === "end" ? "rs-field--label-align-end" : void 0,
+					`rs-input-field--${unref(resolvedSize)}`
+				]]),
+				style: normalizeStyle([fieldStyle.value, radiusStyle.value])
+			}, [__props.label ? (openBlock(), createElementBlock("span", _hoisted_1, [createElementVNode("label", { for: resolvedId.value }, toDisplayString(__props.label), 9, _hoisted_2), __props.required ? (openBlock(), createElementBlock("span", _hoisted_3, "*")) : createCommentVNode("", true)])) : createCommentVNode("", true), createElementVNode("div", _hoisted_4, [
+				createElementVNode("div", { class: normalizeClass(["rs-textarea__shell", {
+					"is-invalid": isInvalid.value,
+					"is-disabled": resolvedDisabled.value,
+					"is-readonly": __props.readonly,
+					"is-autosize": autosizeEnabled.value,
+					"has-count": __props.showCount,
+					"has-clear": showClearButton.value
+				}]) }, [
+					createElementVNode("textarea", mergeProps({
+						ref_key: "textareaRef",
+						ref: textareaRef
+					}, unref(attrs), {
+						id: resolvedId.value,
+						value: model.value,
+						class: "rs-textarea__control",
+						rows: displayRows.value,
+						style: { resize: resolvedResize.value },
+						placeholder: __props.placeholder,
+						disabled: resolvedDisabled.value,
+						readonly: __props.readonly,
+						minlength: __props.minlength,
+						maxlength: __props.maxlength,
+						"aria-invalid": isInvalid.value || void 0,
+						"aria-describedby": describedBy.value,
+						onInput: onNativeInput,
+						onCompositionstart: onCompositionStart,
+						onCompositionend: onCompositionEnd,
+						onKeydown,
+						onBlur,
+						onFocus: _cache[0] || (_cache[0] = ($event) => emit("focus", $event))
+					}), null, 16, _hoisted_5),
+					showClearButton.value ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: "rs-textarea__clear",
+						tabindex: "-1",
+						"aria-label": unref(t)("input.clear"),
+						onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+						onClick: onClear
+					}, [createVNode(RsIcon_default, {
+						name: "x",
+						size: 14
+					})], 40, _hoisted_6)) : createCommentVNode("", true),
+					__props.showCount ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(["rs-textarea__count", { "is-limit": countLimitReached.value }]),
+						"aria-hidden": "true"
+					}, [renderSlot(_ctx.$slots, "count", {
+						value: model.value,
+						count: model.value.length,
+						maxlength: __props.maxlength
+					}, () => [createTextVNode(toDisplayString(countText.value), 1)], true)], 2)) : createCommentVNode("", true)
+				], 2),
+				displayMessage.value ? (openBlock(), createElementBlock("p", {
+					key: 0,
+					id: errorId.value,
+					class: "rs-field__error",
+					role: "alert"
+				}, [renderSlot(_ctx.$slots, "error", { message: displayMessage.value }, () => [createTextVNode(toDisplayString(displayMessage.value), 1)], true)], 8, _hoisted_7)) : createCommentVNode("", true),
+				__props.hint ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
+			])], 6);
+		};
+	}
+});
+//#endregion
+export { RsTextarea_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/RsTextarea.js

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

package/dist/components/RsTooltip.css

@@ -1,15 +1,16 @@
 
 .rs-tooltip__with-icon {
   display: inline-flex;
+  flex-wrap: nowrap;
   align-items: center;
   gap: 0.25rem;
+  width: max-content;
   max-width: 100%;
-  vertical-align: baseline;
+  vertical-align: middle;
 }
 .rs-tooltip__label {
-  display: inline-flex;
+  display: inline;
   min-width: 0;
-  max-width: 100%;
 }
 .rs-tooltip__icon-trigger {
   display: inline-flex;

package/dist/components/RsTooltip.d.ts

@@ -18,6 +18,8 @@ type __VLS_Props = {
     icon?: boolean;
     /** 后缀图标名，默认 info（问号/说明圆标；对齐表单帮助惯用） */
     iconName?: string;
+    /** 帮助图标的无障碍名称；缺省用 content，再回退 locale `tooltip.help` */
+    ariaLabel?: string;
 };
 declare var __VLS_8: {}, __VLS_27: {}, __VLS_41: {};
 type __VLS_Slots = {} & {

package/dist/components/RsTooltip.impl.js

@@ -1,3 +1,4 @@
+import { useRsI18n } from "../composables/useRsI18n.js";
 import RsIcon_default from "./RsIcon.js";
 import { TooltipContent, TooltipPortal, TooltipRoot, TooltipTrigger } from "./reka.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
@@ -34,13 +35,15 @@ var RsTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			type: Boolean,
 			default: false
 		},
-		iconName: { default: "info" }
+		iconName: { default: "info" },
+		ariaLabel: {}
 	},
 	setup(__props) {
 		const props = __props;
 		const slots = useSlots();
+		const { t } = useRsI18n();
 		const hasLabelSlot = computed(() => Boolean(slots.default));
-		const iconAriaLabel = computed(() => props.content?.trim() || "Help");
+		const iconAriaLabel = computed(() => props.ariaLabel?.trim() || props.content?.trim() || t("tooltip.help", "Help"));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(TooltipRoot), {
 				disabled: __props.disabled,