niuma-ui 2.0.3 → 2.0.9

package/dist/components/date-picker/src/RsDatePicker.js

@@ -1,10 +1,8 @@
 import './RsDatePicker.css'
-import './RsDatePicker-1.css'
 import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
 import RsDatePicker_vue_vue_type_script_setup_true_lang_default from "./RsDatePicker.impl.js";
 
-
 //#region src/components/date-picker/src/RsDatePicker.vue
-var RsDatePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsDatePicker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-816760df"]]);
+var RsDatePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsDatePicker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e481c787"]]);
 //#endregion
 export { RsDatePicker_default as default };

package/dist/components/date-picker/src/RsDateTimePicker.d.ts

@@ -1,9 +1,15 @@
-import type { RsComponentSize } from '../../../theme/types';
-import type { RsDatePickerModelValue, RsDatePickerShortcut, RsDatePickerValueFormat, RsDateRangeValue } from './date-picker-utils';
+import { type RsDatePickerExpose, type RsDatePickerLabelPosition } from './RsDatePicker.js';
+import type { RsComponentSize, RsRadius } from '../../../theme/types';
+import type { RsDatePickerDisabledDate, RsDatePickerGetPopupContainer, RsDatePickerModelValue, RsDatePickerShortcut, RsDatePickerValueFormat, RsDateRangeValue, RsWeekStartsOn } from './date-picker-utils';
 export type RsDateTimeRangeValue = RsDateRangeValue;
-export type RsDateTimePickerLabelPosition = 'top' | 'left';
-export type { RsDatePickerModelValue, RsDatePickerShortcut, RsDatePickerValueFormat, };
+export type RsDateTimePickerLabelPosition = RsDatePickerLabelPosition;
+export type { RsDatePickerDisabledDate, RsDatePickerGetPopupContainer, RsDatePickerModelValue, RsDatePickerShortcut, RsDatePickerValueFormat, RsWeekStartsOn, };
+export type RsDateTimePickerExpose = RsDatePickerExpose;
+export type RsDateTimePickerInstance = RsDateTimePickerExpose & {
+    $el: HTMLElement;
+};
 type __VLS_Props = {
+    name?: string;
     label?: string;
     hint?: string;
     placeholder?: string;
@@ -14,33 +20,54 @@ type __VLS_Props = {
     minDate?: string;
     maxDate?: string;
     /**
-     * 绑定值格式（展示仍为墙钟）。
+     * 绑定值格式（展示仍为墙钟，除非另传 format）。
      * string：YYYY-MM-DD HH:mm:ss；timestamp：毫秒；iso：本地偏移 RFC3339；
      * 亦可传入 dayjs 模板。
      */
     valueFormat?: RsDatePickerValueFormat;
+    format?: string;
     labelPosition?: RsDateTimePickerLabelPosition;
     shortcuts?: RsDatePickerShortcut[];
     size?: RsComponentSize;
+    radius?: RsRadius;
     id?: string;
     invalid?: boolean;
     showValidateMessage?: boolean;
+    clearable?: boolean;
+    readonly?: boolean;
+    ariaLabel?: string;
+    weekStartsOn?: RsWeekStartsOn;
+    disabledDates?: string[];
+    disabledDate?: RsDatePickerDisabledDate;
+    getPopupContainer?: RsDatePickerGetPopupContainer;
 };
 type __VLS_ModelProps = {
     modelValue?: RsDatePickerModelValue;
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, RsDatePickerExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: RsDatePickerModelValue) => any;
+    blur: () => any;
+    focus: () => any;
+    clear: () => any;
     "update:modelValue": (value: RsDatePickerModelValue) => any;
+    openChange: (open: boolean) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: RsDatePickerModelValue) => any) | undefined;
+    onBlur?: (() => any) | undefined;
+    onFocus?: (() => any) | undefined;
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: RsDatePickerModelValue) => any) | undefined;
+    onOpenChange?: ((open: boolean) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     required: boolean;
     disabled: boolean;
     range: boolean;
+    readonly: boolean;
+    clearable: boolean;
     showValidateMessage: boolean;
     labelPosition: RsDateTimePickerLabelPosition;
     withSeconds: boolean;

package/dist/components/date-picker/src/RsDateTimePicker.impl.js

@@ -1,9 +1,11 @@
 import RsDatePicker_default from "./RsDatePicker.js";
-import { createBlock, defineComponent, mergeModels, mergeProps, openBlock, useModel } from "vue";
+import { createBlock, defineComponent, mergeModels, mergeProps, openBlock, useModel, useTemplateRef } from "vue";
 //#region src/components/date-picker/src/RsDateTimePicker.vue?vue&type=script&setup=true&lang.ts
 var RsDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsDateTimePicker",
 	__name: "RsDateTimePicker",
 	props: /*@__PURE__*/ mergeModels({
+		name: {},
 		label: {},
 		hint: {},
 		placeholder: {},
@@ -26,15 +28,30 @@ var RsDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		minDate: {},
 		maxDate: {},
 		valueFormat: { default: "string" },
+		format: {},
 		labelPosition: { default: "top" },
 		shortcuts: {},
 		size: {},
+		radius: {},
 		id: {},
 		invalid: { type: Boolean },
 		showValidateMessage: {
 			type: Boolean,
 			default: true
-		}
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: {},
+		weekStartsOn: {},
+		disabledDates: {},
+		disabledDate: {},
+		getPopupContainer: {}
 	}, {
 		"modelValue": { default: "" },
 		"modelModifiers": {},
@@ -44,19 +61,43 @@ var RsDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		},
 		"openModifiers": {}
 	}),
-	emits: ["update:modelValue", "update:open"],
-	setup(__props) {
+	emits: /*@__PURE__*/ mergeModels([
+		"change",
+		"openChange",
+		"clear",
+		"focus",
+		"blur"
+	], ["update:modelValue", "update:open"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const model = useModel(__props, "modelValue");
 		const open = useModel(__props, "open");
+		const pickerRef = useTemplateRef("pickerRef");
+		const emit = __emit;
+		__expose({
+			setValue: (value) => pickerRef.value?.setValue(value),
+			clearValidation: () => pickerRef.value?.clearValidation(),
+			setError: (message) => pickerRef.value?.setError(message),
+			validate: (trigger) => pickerRef.value?.validate(trigger) ?? Promise.resolve({ valid: true }),
+			focus: () => pickerRef.value?.focus(),
+			blur: () => pickerRef.value?.blur()
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(RsDatePicker_default, mergeProps(_ctx.$props, {
+			return openBlock(), createBlock(RsDatePicker_default, mergeProps({
+				ref_key: "pickerRef",
+				ref: pickerRef
+			}, _ctx.$props, {
 				modelValue: model.value,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
 				open: open.value,
 				"onUpdate:open": _cache[1] || (_cache[1] = ($event) => open.value = $event),
 				"with-time": "",
 				"with-seconds": __props.withSeconds,
-				"value-format": __props.valueFormat
+				"value-format": __props.valueFormat,
+				onChange: _cache[2] || (_cache[2] = ($event) => emit("change", $event)),
+				onOpenChange: _cache[3] || (_cache[3] = ($event) => emit("openChange", $event)),
+				onClear: _cache[4] || (_cache[4] = ($event) => emit("clear")),
+				onFocus: _cache[5] || (_cache[5] = ($event) => emit("focus")),
+				onBlur: _cache[6] || (_cache[6] = ($event) => emit("blur"))
 			}), null, 16, [
 				"modelValue",
 				"open",

package/dist/components/date-picker/src/date-picker-utils.d.ts

@@ -112,4 +112,23 @@ export declare function isDateWithinBounds(year: number, month: number, day: num
     maxDate?: string;
 }): boolean;
 export declare function isDateRangeEmpty(value: RsDateRangeValue): boolean;
+/** 一周从哪一天起：0 = 周日 … 6 = 周六，对齐 JS `Date.getDay()`。 */
+export type RsWeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/** 禁用某一天。入参是墙钟年月日，不是 Date 对象。 */
+export type RsDatePickerDisabledDate = (date: RsParsedDate) => boolean;
+/** 把面板挂到何处。未传则 `body`。 */
+export type RsDatePickerGetPopupContainer = (trigger?: HTMLElement) => HTMLElement | string | undefined;
+/**
+ * 解析一周起始日。显式 `weekStartsOn` 优先；否则读 `Intl.Locale` weekInfo；
+ * 再按语言回退（en-US / en-CA / ja 周日，其它周一）。SSR 无 Intl.Locale 时回退周一。
+ */
+export declare function resolveWeekStartsOn(locale: string, override?: number | null): RsWeekStartsOn;
+/**
+ * 触发器展示文案。`format` 是 dayjs 模板；未传则墙钟 `YYYY-MM-DD` / `YYYY-MM-DD HH:mm:ss`。
+ */
+export declare function formatPickerDisplay(value: string | undefined, options?: {
+    format?: string;
+    withTime?: boolean;
+}): string;
+export declare function resolveDatePickerPortalTarget(getPopupContainer: RsDatePickerGetPopupContainer | undefined, trigger?: HTMLElement | null): string | HTMLElement;
 export declare function buildCalendarGrid(year: number, month: number, weekStartsOn?: number): RsCalendarCell[];

package/dist/components/date-picker/src/date-picker-utils.js

@@ -160,15 +160,6 @@ function formatDateDisplay(value) {
 function formatDateTimeDisplay(value) {
 	return formatDateTimeValue(value);
 }
-function formatDateRangeLabel(range, separator = " ~ ") {
-	return formatDateRangeDisplay(range, { separator });
-}
-function formatDateTimeRangeLabel(range, separator = " ~ ") {
-	return formatDateRangeDisplay(range, {
-		separator,
-		datetime: true
-	});
-}
 function getTodayDate() {
 	const today = dayjs();
 	return {
@@ -233,6 +224,38 @@ function isDateWithinBounds(year, month, day, options = {}) {
 function isDateRangeEmpty(value) {
 	return !value.start && !value.end;
 }
+/**
+* 解析一周起始日。显式 `weekStartsOn` 优先；否则读 `Intl.Locale` weekInfo；
+* 再按语言回退（en-US / en-CA / ja 周日，其它周一）。SSR 无 Intl.Locale 时回退周一。
+*/
+function resolveWeekStartsOn(locale, override) {
+	if (override != null && override >= 0 && override <= 6) return override;
+	try {
+		const withWeek = new Intl.Locale(locale);
+		const info = withWeek.weekInfo ?? withWeek.getWeekInfo?.();
+		if (info?.firstDay != null) {
+			const day = info.firstDay === 7 ? 0 : info.firstDay;
+			if (day >= 0 && day <= 6) return day;
+		}
+	} catch {}
+	const tag = locale.toLowerCase();
+	if (tag.startsWith("en-us") || tag.startsWith("en-ca") || tag.startsWith("ja")) return 0;
+	return 1;
+}
+/**
+* 触发器展示文案。`format` 是 dayjs 模板；未传则墙钟 `YYYY-MM-DD` / `YYYY-MM-DD HH:mm:ss`。
+*/
+function formatPickerDisplay(value, options) {
+	if (!value) return "";
+	if (!options?.format) return options?.withTime ? formatDateTimeDisplay(value) : formatDateDisplay(value);
+	const parsed = parseRsDateTimeDayjs(value) ?? parseRsDayjs(value);
+	return parsed ? parsed.format(options.format) : value;
+}
+function resolveDatePickerPortalTarget(getPopupContainer, trigger) {
+	if (typeof document === "undefined") return "body";
+	if (!getPopupContainer) return "body";
+	return getPopupContainer(trigger ?? void 0) ?? "body";
+}
 function buildCalendarGrid(year, month, weekStartsOn = 1) {
 	const daysInMonth = getDaysInMonth(year, month);
 	const leading = (dayjs().year(year).month(month - 1).date(1).day() - weekStartsOn + 7) % 7;
@@ -267,4 +290,4 @@ function buildCalendarGrid(year, month, weekStartsOn = 1) {
 	return cells;
 }
 //#endregion
-export { EMPTY_DATE_RANGE, RS_DATE_PICKER_VALUE_FORMAT_PRESETS, buildCalendarGrid, compareDates, dateToNumber, extractTimeFromDateTime, formatDateDisplay, formatDateParts, formatDateRangeDisplay, formatDateRangeLabel, formatDateTimeDisplay, formatDateTimeParts, formatDateTimeRangeLabel, formatDateTimeValue, formatDateValue, formatTimestampValue, fromInternalPickerValue, getDaysInMonth, getNextMonth, getNowDateTime, getTodayDate, isDateBetweenParsed, isDateRangeEmpty, isDateRangeOrdered, isDateTimeRangeOrdered, isDateWithinBounds, isSameDate, isTimestampRange, normalizeShortcutValue, parseDateTimeValue, parseDateToNumber, parseDateValue, parseTimestampValue, toInternalPickerValue, toRangeEndpointString };
+export { EMPTY_DATE_RANGE, RS_DATE_PICKER_VALUE_FORMAT_PRESETS, buildCalendarGrid, compareDates, dateToNumber, extractTimeFromDateTime, formatDateDisplay, formatDateParts, formatDateRangeDisplay, formatDateTimeDisplay, formatDateTimeParts, formatDateTimeValue, formatDateValue, formatPickerDisplay, formatTimestampValue, fromInternalPickerValue, getDaysInMonth, getNextMonth, getNowDateTime, getTodayDate, isDateBetweenParsed, isDateRangeEmpty, isDateRangeOrdered, isDateTimeRangeOrdered, isDateWithinBounds, isSameDate, isTimestampRange, normalizeShortcutValue, parseDateTimeValue, parseDateToNumber, parseDateValue, parseTimestampValue, resolveDatePickerPortalTarget, resolveWeekStartsOn, toInternalPickerValue, toRangeEndpointString };

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

@@ -1,3 +1,3 @@
 export { default as RsDescriptions } from './src/RsDescriptions.js';
 export { default as RsDescriptionsItem } from './src/RsDescriptionsItem.js';
-export type { RsDescriptionsItem as RsDescriptionsItemData, RsDescriptionsLabelPlacement, RsDescriptionsSize, } from './src/descriptions-utils';
+export type { RsDescriptionsItem as RsDescriptionsItemData, RsDescriptionsLabelAlign, RsDescriptionsLabelPlacement, RsDescriptionsSize, } from './src/descriptions-utils';

package/dist/components/descriptions/src/RsDescriptions.css

@@ -2,18 +2,34 @@
 .rs-descriptions {
   display: flex;
   flex-direction: column;
-  gap: var(--rs-space-sm);
-  color: var(--rs-text);
+  gap: var(--rs-descriptions-gap, var(--rs-space-sm));
+  color: var(--rs-descriptions-value-fg, var(--rs-text-primary));
 }
 .rs-descriptions__header {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-md);
+}
+.rs-descriptions__title {
+  flex: 1;
+  min-width: 0;
+  color: var(--rs-descriptions-title, var(--rs-text-primary));
   font-size: var(--rs-font-size-base);
   font-weight: var(--rs-font-weight-semibold);
   line-height: var(--rs-line-height-tight);
 }
+.rs-descriptions__extra {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--rs-space-sm);
+  margin-inline-start: auto;
+}
 .rs-descriptions__body {
   display: grid;
   grid-template-columns: repeat(var(--rs-descriptions-columns, 3), minmax(0, 1fr));
   gap: 0;
+  margin: 0;
 }
 .rs-descriptions--ssm .rs-descriptions__label,
 .rs-descriptions--ssm .rs-descriptions__value {
@@ -39,27 +55,40 @@
   display: grid;
   min-width: 0;
 }
-
-/* 固定标签列宽，多列时左右项标签竖向对齐（百分比会随列宽漂移） */
 .rs-descriptions--left .rs-descriptions__item {
   grid-template-columns: var(--rs-descriptions-label-width, 7.5rem) minmax(0, 1fr);
 }
 .rs-descriptions--top .rs-descriptions__item {
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
+}
+.rs-descriptions__label,
+.rs-descriptions__value {
+  margin: 0;
+  min-width: 0;
 }
 .rs-descriptions__label {
-  color: var(--rs-descriptions-label-fg, var(--rs-muted));
+  color: var(--rs-descriptions-label-fg, var(--rs-text-secondary));
   font-weight: var(--rs-font-weight-medium);
+  text-align: start;
   word-break: break-word;
 }
+.rs-descriptions--align-center .rs-descriptions__label {
+  text-align: center;
+}
+.rs-descriptions--align-end .rs-descriptions__label {
+  text-align: end;
+}
+.rs-descriptions__colon {
+  padding-inline-start: 0.12em;
+}
 .rs-descriptions__value {
-  color: var(--rs-descriptions-value-fg, var(--rs-text));
+  color: var(--rs-descriptions-value-fg, var(--rs-text-primary));
   word-break: break-word;
 }
 
 /*
- * 表格外框：四边完整描边 + 圆角；单元格右边/下边内部分隔。
- * 用 -1px 外边距压到外框下，避免双边框加粗，并保证圆角弧不被裁断。
+ * 表格外框：四边完整描边 + 圆角；单元格行末 / 块末内部分隔。
+ * -1px 外边距压到外框下，避免双边框加粗。overflow 只裁圆角，单元格有内边距。
  */
 .rs-descriptions--bordered .rs-descriptions__body {
   border: 1px solid var(--rs-descriptions-border, var(--rs-border));
@@ -79,8 +108,6 @@
 .rs-descriptions--bordered .rs-descriptions__label {
   background: var(--rs-descriptions-label-bg);
 }
-
-/* 左标签：标签/值之间竖线，形成表格单元格感 */
 .rs-descriptions--bordered.rs-descriptions--left .rs-descriptions__label {
   border-inline-end: 1px solid var(--rs-descriptions-border, var(--rs-border));
 }

package/dist/components/descriptions/src/RsDescriptions.d.ts

@@ -1,5 +1,5 @@
 import type { RsRadius } from '../../../theme/types';
-import { type RsDescriptionsItem, type RsDescriptionsLabelPlacement, type RsDescriptionsSize } from './descriptions-utils';
+import { type RsDescriptionsItem, type RsDescriptionsLabelAlign, type RsDescriptionsLabelPlacement, type RsDescriptionsSize } from './descriptions-utils';
 type __VLS_Props = {
     title?: string;
     items?: RsDescriptionsItem[];
@@ -9,20 +9,36 @@ type __VLS_Props = {
     /** 未传时优先 Form / RsConfigProvider.controlSize，再回退 md */
     size?: RsDescriptionsSize;
     radius?: RsRadius;
+    /** 标签后追加本地化冒号。默认关闭，避免改变旧版式。 */
+    colon?: boolean;
+    /** 左标签列宽。数字按 px，字符串按 CSS 长度。 */
+    labelWidth?: number | string;
+    /** 标签在单元格内的对齐。start / end 跟书写方向。 */
+    labelAlign?: RsDescriptionsLabelAlign;
+    /** 覆盖 null / undefined 的占位。未传走 descriptions.empty（默认 —）。空字符串隐藏占位。 */
+    emptyText?: string;
+    id?: string;
+    /** 覆盖描述列表的可访问名称。未传且有标题时用标题。 */
+    ariaLabel?: string;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_6: `item-${string}` | `item-${number}`, __VLS_7: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_8: string, __VLS_9: {}, __VLS_12: string, __VLS_13: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_6>]?: (props: typeof __VLS_7) => any;
+    [K in NonNullable<typeof __VLS_8>]?: (props: typeof __VLS_9) => any;
+} & {
+    [K in NonNullable<typeof __VLS_12>]?: (props: typeof __VLS_13) => any;
 } & {
     title?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    extra?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     columns: number;
     items: RsDescriptionsItem[];
     bordered: boolean;
     labelPlacement: RsDescriptionsLabelPlacement;
+    colon: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/descriptions/src/RsDescriptions.impl.js

@@ -1,15 +1,29 @@
+import { useRsI18n } from "../../../composables/useRsI18n.js";
 import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
 import { rsRadiusCss, useResolvedRsRadius } from "../../_shared/src/resolve-radius.js";
-import { RS_DESCRIPTIONS_KEY } from "./descriptions-utils.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, provide, renderList, renderSlot, toDisplayString } from "vue";
+import { RS_DESCRIPTIONS_KEY, clampRsDescriptionsSpan, resolveRsDescriptionsColumns, resolveRsDescriptionsLabelAlign, resolveRsDescriptionsLabelWidth, resolveRsDescriptionsValue } from "./descriptions-utils.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, provide, renderList, renderSlot, toDisplayString, unref, useId, useSlots } from "vue";
 //#region src/components/descriptions/src/RsDescriptions.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
+var _hoisted_1 = ["id"];
+var _hoisted_2 = {
 	key: 0,
 	class: "rs-descriptions__header"
 };
-var _hoisted_2 = { class: "rs-descriptions__label" };
-var _hoisted_3 = { class: "rs-descriptions__value" };
+var _hoisted_3 = ["id"];
+var _hoisted_4 = {
+	key: 1,
+	class: "rs-descriptions__extra"
+};
+var _hoisted_5 = ["aria-label", "aria-labelledby"];
+var _hoisted_6 = { class: "rs-descriptions__label" };
+var _hoisted_7 = {
+	key: 0,
+	class: "rs-descriptions__colon",
+	"aria-hidden": "true"
+};
+var _hoisted_8 = { class: "rs-descriptions__value" };
 var RsDescriptions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsDescriptions",
 	__name: "RsDescriptions",
 	props: {
 		title: {},
@@ -21,12 +35,30 @@ var RsDescriptions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			default: true
 		},
 		size: {},
-		radius: {}
+		radius: {},
+		colon: {
+			type: Boolean,
+			default: false
+		},
+		labelWidth: {},
+		labelAlign: {},
+		emptyText: {},
+		id: {},
+		ariaLabel: {}
 	},
 	setup(__props) {
 		const props = __props;
+		const slots = useSlots();
+		const { t } = useRsI18n();
+		const titleId = useId();
 		const resolvedSize = useResolvedRsComponentSize(() => props.size);
 		const resolvedRadius = useResolvedRsRadius(() => props.radius, "md");
+		const resolvedColumns = computed(() => resolveRsDescriptionsColumns(props.columns));
+		const resolvedAlign = computed(() => resolveRsDescriptionsLabelAlign(props.labelAlign));
+		const resolvedLabelWidth = computed(() => resolveRsDescriptionsLabelWidth(props.labelWidth));
+		const resolvedEmpty = computed(() => props.emptyText ?? t("descriptions.empty"));
+		const colonMark = computed(() => t("label.colon"));
+		const showTitle = computed(() => Boolean(props.title) || Boolean(slots.title));
 		provide(RS_DESCRIPTIONS_KEY, {
 			get labelPlacement() {
 				return props.labelPlacement;
@@ -38,30 +70,68 @@ var RsDescriptions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				return resolvedSize.value;
 			},
 			get columns() {
-				return props.columns;
+				return resolvedColumns.value;
+			},
+			get colon() {
+				return props.colon;
+			},
+			get colonMark() {
+				return colonMark.value;
 			}
 		});
 		const rootClass = computed(() => [
 			"rs-descriptions",
 			`rs-descriptions--${resolvedSize.value}`,
 			`rs-descriptions--${props.labelPlacement}`,
-			{ "rs-descriptions--bordered": props.bordered }
+			`rs-descriptions--align-${resolvedAlign.value}`,
+			{
+				"rs-descriptions--bordered": props.bordered,
+				"rs-descriptions--colon": props.colon
+			}
 		]);
-		const gridStyle = computed(() => ({
-			"--rs-descriptions-columns": String(props.columns),
-			"--rs-descriptions-radius-local": rsRadiusCss(resolvedRadius.value)
-		}));
+		const gridStyle = computed(() => {
+			const style = {
+				"--rs-descriptions-columns": String(resolvedColumns.value),
+				"--rs-descriptions-radius-local": rsRadiusCss(resolvedRadius.value)
+			};
+			if (resolvedLabelWidth.value) style["--rs-descriptions-label-width"] = resolvedLabelWidth.value;
+			return style;
+		});
+		const rows = computed(() => {
+			const columns = resolvedColumns.value;
+			const empty = resolvedEmpty.value;
+			return props.items.map((item, index) => {
+				const key = item.key ?? index;
+				return {
+					key,
+					label: item.label,
+					text: resolveRsDescriptionsValue(item.value, empty),
+					spanStyle: { gridColumn: `span ${clampRsDescriptionsSpan(item.span, columns)}` },
+					valueSlot: `item-${key}`,
+					labelSlot: `label-${key}`
+				};
+			});
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(rootClass.value) }, [__props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])])) : createCommentVNode("", true), createElementVNode("div", {
+			return openBlock(), createElementBlock("div", {
+				id: __props.id,
+				class: normalizeClass(rootClass.value)
+			}, [showTitle.value || _ctx.$slots.extra ? (openBlock(), createElementBlock("div", _hoisted_2, [showTitle.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				id: unref(titleId),
+				class: "rs-descriptions__title"
+			}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 8, _hoisted_3)) : createCommentVNode("", true), _ctx.$slots.extra ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "extra")])) : createCommentVNode("", true)])) : createCommentVNode("", true), createElementVNode("dl", {
 				class: "rs-descriptions__body",
-				style: normalizeStyle(gridStyle.value)
-			}, [renderSlot(_ctx.$slots, "default", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+				style: normalizeStyle(gridStyle.value),
+				"aria-label": __props.ariaLabel || void 0,
+				"aria-labelledby": __props.ariaLabel || !showTitle.value ? void 0 : unref(titleId)
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row) => {
 				return openBlock(), createElementBlock("div", {
-					key: item.key ?? index,
+					key: row.key,
 					class: "rs-descriptions__item",
-					style: normalizeStyle({ gridColumn: `span ${Math.min(item.span ?? 1, __props.columns)}` })
-				}, [createElementVNode("div", _hoisted_2, toDisplayString(item.label), 1), createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, `item-${item.key ?? index}`, {}, () => [createTextVNode(toDisplayString(item.value ?? "—"), 1)])])], 4);
-			}), 128))])], 4)], 2);
+					style: normalizeStyle(row.spanStyle)
+				}, [createElementVNode("dt", _hoisted_6, [renderSlot(_ctx.$slots, row.labelSlot, {}, () => [createTextVNode(toDisplayString(row.label), 1)]), __props.colon ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(colonMark.value), 1)) : createCommentVNode("", true)]), createElementVNode("dd", _hoisted_8, [renderSlot(_ctx.$slots, row.valueSlot, {}, () => [createTextVNode(toDisplayString(row.text), 1)])])], 4);
+			}), 128))])], 12, _hoisted_5)], 10, _hoisted_1);
 		};
 	}
 });

package/dist/components/descriptions/src/RsDescriptionsItem.impl.js

@@ -1,9 +1,15 @@
-import { RS_DESCRIPTIONS_KEY } from "./descriptions-utils.js";
-import { computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, normalizeStyle, openBlock, renderSlot, toDisplayString } from "vue";
+import { RS_DESCRIPTIONS_KEY, clampRsDescriptionsSpan } from "./descriptions-utils.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, normalizeStyle, openBlock, renderSlot, toDisplayString } from "vue";
 //#region src/components/descriptions/src/RsDescriptionsItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "rs-descriptions__label" };
-var _hoisted_2 = { class: "rs-descriptions__value" };
+var _hoisted_2 = {
+	key: 0,
+	class: "rs-descriptions__colon",
+	"aria-hidden": "true"
+};
+var _hoisted_3 = { class: "rs-descriptions__value" };
 var RsDescriptionsItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsDescriptionsItem",
 	__name: "RsDescriptionsItem",
 	props: {
 		label: {},
@@ -12,13 +18,14 @@ var RsDescriptionsItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 	setup(__props) {
 		const props = __props;
 		const ctx = inject(RS_DESCRIPTIONS_KEY, null);
-		const columns = computed(() => ctx?.columns ?? 3);
-		const spanStyle = computed(() => ({ gridColumn: `span ${Math.min(props.span, columns.value)}` }));
+		const spanStyle = computed(() => ({ gridColumn: `span ${clampRsDescriptionsSpan(props.span, ctx?.columns ?? 3)}` }));
+		const showColon = computed(() => Boolean(ctx?.colon));
+		const colonMark = computed(() => ctx?.colonMark ?? "");
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				class: "rs-descriptions__item",
 				style: normalizeStyle(spanStyle.value)
-			}, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])]), createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 4);
+			}, [createElementVNode("dt", _hoisted_1, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)]), showColon.value ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(colonMark.value), 1)) : createCommentVNode("", true)]), createElementVNode("dd", _hoisted_3, [renderSlot(_ctx.$slots, "default")])], 4);
 		};
 	}
 });

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

@@ -3,6 +3,8 @@ import type { RsComponentSize } from '../../../theme/types';
 /** Descriptions 尺寸与全局控件尺寸对齐：ssm / sm / md / lg */
 export type RsDescriptionsSize = RsComponentSize;
 export type RsDescriptionsLabelPlacement = 'left' | 'top';
+/** 标签对齐走书写方向，RTL 下 start / end 自动对调。 */
+export type RsDescriptionsLabelAlign = 'start' | 'center' | 'end';
 export type RsDescriptionsItem = {
     label: string;
     value?: string | number | null;
@@ -14,5 +16,22 @@ export type RsDescriptionsContext = {
     bordered: boolean;
     size: RsDescriptionsSize;
     columns: number;
+    colon: boolean;
+    colonMark: string;
 };
 export declare const RS_DESCRIPTIONS_KEY: InjectionKey<RsDescriptionsContext>;
+/** 列数至少为 1。非数字回退 3，小数向下取整。 */
+export declare function resolveRsDescriptionsColumns(columns: number | undefined): number;
+/** span 夹在 1 与列数之间。缺省、0、负数都当成 1。 */
+export declare function clampRsDescriptionsSpan(span: number | undefined, columns: number): number;
+export declare function resolveRsDescriptionsLabelAlign(align: RsDescriptionsLabelAlign | undefined): RsDescriptionsLabelAlign;
+/**
+ * 标签列宽。数字按 px。空串、负数、含 `;` `{` `}` 或 `url(` 的字符串忽略，
+ * 避免写进 CSS 变量时打断声明。
+ */
+export declare function resolveRsDescriptionsLabelWidth(width: number | string | null | undefined): string | undefined;
+/**
+ * 空值只替换 null / undefined，与原先 `value ?? '—'` 一致。
+ * 空字符串和 0 原样显示。
+ */
+export declare function resolveRsDescriptionsValue(value: string | number | null | undefined, emptyText: string): string;