niuma-ui 2.0.3 → 2.0.4

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;
     "update:open": (value: boolean) => any;
+    openChange: (open: 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;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onOpenChange?: ((open: 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/dynamic-tags/index.d.ts

@@ -1,2 +1,2 @@
 export { default as RsDynamicTags } from './src/RsDynamicTags.js';
-export type { RsDynamicTagsInputMode, RsDynamicTagsRejectReason, } from './src/RsDynamicTags.js';
+export type { RsDynamicTagsExpose, RsDynamicTagsInputMode, RsDynamicTagsInstance, RsDynamicTagsParse, RsDynamicTagsRejectReason, } from './src/RsDynamicTags.js';

package/dist/components/dynamic-tags/src/RsDynamicTags.css

@@ -1,29 +1,45 @@
 
-.rs-dynamic-tags-field[data-v-a441b090] {
+.rs-dynamic-tags-field[data-v-2213feb0] {
   display: flex;
   flex-direction: column;
   width: 100%;
   min-width: 0;
 }
-.rs-dynamic-tags-field__error[data-v-a441b090] {
+.rs-dynamic-tags-field__error[data-v-2213feb0] {
   margin: 0.25rem 0 0;
   font-size: var(--rs-font-size-xs);
   line-height: var(--rs-line-height-tight);
   color: var(--rs-danger);
 }
-.rs-dynamic-tags[data-v-a441b090] {
-  --rs-dynamic-tags-chip-height: 1.5rem;
+.rs-dynamic-tags-field__sr-only[data-v-2213feb0] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.rs-dynamic-tags[data-v-2213feb0] {
+  --rs-dynamic-tags-box-height: var(--rs-control-height-md);
+  --rs-dynamic-tags-border-width: 1px;
+  --rs-dynamic-tags-chip-height: calc(
+    var(--rs-dynamic-tags-box-height) - 2 * var(--rs-dynamic-tags-padding, var(--rs-space-xs)) - 2 *
+      var(--rs-dynamic-tags-border-width)
+  );
+  position: relative;
+  margin: 0;
+  min-inline-size: 0;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--rs-dynamic-tags-gap, var(--rs-space-xs));
-  /* padding + chip + 1px*2 边框，避免 trigger/input 切换或输入时高度跳动 */
-  min-height: calc(
-    var(--rs-dynamic-tags-chip-height) + 2 * var(--rs-dynamic-tags-padding, var(--rs-space-xs)) +
-      2px
-  );
+  min-height: var(--rs-dynamic-tags-box-height);
   padding: var(--rs-dynamic-tags-padding, var(--rs-space-xs));
-  border: 1px solid var(--rs-dynamic-tags-border, var(--rs-input-border, var(--rs-border)));
+  border: var(--rs-dynamic-tags-border-width) solid
+    var(--rs-dynamic-tags-border, var(--rs-input-border, var(--rs-border)));
   border-radius: var(
     --rs-dynamic-tags-radius-local,
     var(--rs-dynamic-tags-radius, var(--rs-radius))
@@ -37,43 +53,53 @@
     box-shadow var(--rs-transition-fast),
     background-color var(--rs-transition-fast);
 }
-.rs-dynamic-tags[data-v-a441b090]:hover:not(.rs-dynamic-tags--disabled) {
+.rs-dynamic-tags[data-v-2213feb0]:hover:not(.rs-dynamic-tags--disabled):not(.rs-dynamic-tags--readonly) {
   border-color: var(
     --rs-dynamic-tags-border-hover,
     var(--rs-input-border-hover, var(--rs-border))
   );
 }
-.rs-dynamic-tags--ssm[data-v-a441b090] {
-  --rs-dynamic-tags-chip-height: 1.125rem;
+.rs-dynamic-tags--ssm[data-v-2213feb0] {
+  --rs-dynamic-tags-box-height: var(--rs-control-height-ssm);
+  --rs-dynamic-tags-padding: 1px;
 }
-.rs-dynamic-tags--sm[data-v-a441b090] {
-  --rs-dynamic-tags-chip-height: 1.25rem;
+.rs-dynamic-tags--sm[data-v-2213feb0] {
+  --rs-dynamic-tags-box-height: var(--rs-control-height-sm);
 }
-.rs-dynamic-tags--md[data-v-a441b090] {
-  --rs-dynamic-tags-chip-height: 1.5rem;
+.rs-dynamic-tags--md[data-v-2213feb0] {
+  --rs-dynamic-tags-box-height: var(--rs-control-height-md);
 }
-.rs-dynamic-tags--lg[data-v-a441b090] {
-  --rs-dynamic-tags-chip-height: 1.75rem;
+.rs-dynamic-tags--lg[data-v-2213feb0] {
+  --rs-dynamic-tags-box-height: var(--rs-control-height-lg);
 }
-.rs-dynamic-tags--editing[data-v-a441b090]:not(.rs-dynamic-tags--disabled),
-.rs-dynamic-tags[data-v-a441b090]:focus-within:not(.rs-dynamic-tags--disabled) {
+.rs-dynamic-tags--editing[data-v-2213feb0]:not(.rs-dynamic-tags--disabled):not(.rs-dynamic-tags--readonly),
+.rs-dynamic-tags[data-v-2213feb0]:focus-within:not(.rs-dynamic-tags--disabled):not(.rs-dynamic-tags--readonly) {
   border-color: var(--rs-focus-border, var(--rs-primary));
   box-shadow:
     var(--rs-dynamic-tags-shadow, var(--rs-input-shadow, none)),
     0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
-.rs-dynamic-tags--feedback[data-v-a441b090],
-.rs-dynamic-tags--invalid[data-v-a441b090] {
+.rs-dynamic-tags--feedback[data-v-2213feb0],
+.rs-dynamic-tags--invalid[data-v-2213feb0] {
+  border-color: var(--rs-danger);
+}
+.rs-dynamic-tags--invalid[data-v-2213feb0]:focus-within:not(.rs-dynamic-tags--disabled) {
   border-color: var(--rs-danger);
+  box-shadow:
+    var(--rs-dynamic-tags-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-dynamic-tags--feedback[data-v-a441b090] {
-  animation: rs-dynamic-tags-shake-a441b090 0.45s ease;
+.rs-dynamic-tags--feedback[data-v-2213feb0] {
+  animation: rs-dynamic-tags-shake-2213feb0 0.45s ease;
 }
-.rs-dynamic-tags--disabled[data-v-a441b090] {
-  opacity: 0.55;
+.rs-dynamic-tags--disabled[data-v-2213feb0] {
+  opacity: var(--rs-dynamic-tags-disabled-opacity, 0.38);
   cursor: not-allowed;
 }
-.rs-dynamic-tags__input[data-v-a441b090] {
+.rs-dynamic-tags--readonly[data-v-2213feb0] {
+  cursor: default;
+}
+.rs-dynamic-tags__input[data-v-2213feb0] {
   flex: 1 1 6rem;
   min-width: 4rem;
   width: 0;
@@ -83,7 +109,7 @@
   border: 0;
   outline: none;
   background: transparent;
-  color: var(--rs-text);
+  color: var(--rs-text-primary, var(--rs-text));
   font: inherit;
   font-size: var(--rs-font-size-sm);
   line-height: var(--rs-dynamic-tags-chip-height);
@@ -91,15 +117,15 @@
   box-shadow: none;
   appearance: none;
 }
-.rs-dynamic-tags--ssm .rs-dynamic-tags__input[data-v-a441b090],
-.rs-dynamic-tags--sm .rs-dynamic-tags__input[data-v-a441b090] {
+.rs-dynamic-tags--ssm .rs-dynamic-tags__input[data-v-2213feb0],
+.rs-dynamic-tags--sm .rs-dynamic-tags__input[data-v-2213feb0] {
   font-size: var(--rs-font-size-xs);
 }
-.rs-dynamic-tags__input[data-v-a441b090]::placeholder {
-  color: var(--rs-placeholder);
+.rs-dynamic-tags__input[data-v-2213feb0]::placeholder {
+  color: var(--rs-text-tertiary, var(--rs-placeholder));
   line-height: var(--rs-dynamic-tags-chip-height);
 }
-.rs-dynamic-tags__trigger[data-v-a441b090] {
+.rs-dynamic-tags__trigger[data-v-2213feb0] {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
@@ -111,7 +137,7 @@
   border: 1px dashed var(--rs-dynamic-tags-trigger-border, var(--rs-border));
   border-radius: var(--rs-radius-sm);
   background: transparent;
-  color: var(--rs-muted);
+  color: var(--rs-text-secondary, var(--rs-muted));
   cursor: pointer;
   outline: none;
   box-sizing: border-box;
@@ -120,15 +146,41 @@
     border-color var(--rs-transition-fast),
     background-color var(--rs-transition-fast);
 }
-.rs-dynamic-tags__trigger[data-v-a441b090]:hover {
+.rs-dynamic-tags__trigger[data-v-2213feb0]:hover {
   color: var(--rs-primary);
   border-color: var(--rs-primary);
   background: color-mix(in srgb, var(--rs-primary) 8%, transparent);
 }
-.rs-dynamic-tags__trigger[data-v-a441b090]:focus-visible {
+.rs-dynamic-tags__trigger[data-v-2213feb0]:focus-visible {
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-dynamic-tags__clear[data-v-2213feb0] {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--rs-dynamic-tags-chip-height);
+  height: var(--rs-dynamic-tags-chip-height);
+  padding: 0;
+  border: 0;
+  border-radius: var(--rs-radius-xs);
+  background: transparent;
+  color: var(--rs-text-secondary, var(--rs-muted));
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+  transition:
+    color var(--rs-transition-fast),
+    background-color var(--rs-transition-fast);
+}
+.rs-dynamic-tags__clear[data-v-2213feb0]:hover {
+  color: var(--rs-text-primary, var(--rs-text));
+  background: var(--rs-item-hover);
+}
+.rs-dynamic-tags__clear[data-v-2213feb0]:focus-visible {
   box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
-@keyframes rs-dynamic-tags-shake-a441b090 {
+@keyframes rs-dynamic-tags-shake-2213feb0 {
 0%,
   100% {
     transform: translateX(0);
@@ -146,3 +198,28 @@
     transform: translateX(2px);
 }
 }
+@media (prefers-reduced-motion: reduce) {
+.rs-dynamic-tags[data-v-2213feb0] {
+    transition: none;
+}
+.rs-dynamic-tags--feedback[data-v-2213feb0] {
+    animation: none;
+}
+.rs-dynamic-tags__trigger[data-v-2213feb0],
+  .rs-dynamic-tags__clear[data-v-2213feb0] {
+    transition: none;
+}
+}
+@media (forced-colors: active) {
+.rs-dynamic-tags[data-v-2213feb0] {
+    border: 1px solid ButtonText;
+    background: Field;
+    forced-color-adjust: none;
+}
+.rs-dynamic-tags[data-v-2213feb0]:focus-within {
+    border-color: Highlight;
+}
+.rs-dynamic-tags__input[data-v-2213feb0] {
+    color: FieldText;
+}
+}

package/dist/components/dynamic-tags/src/RsDynamicTags.d.ts

@@ -1,8 +1,29 @@
 import type { RsComponentSize, RsRadius } from '../../../theme/types';
 import { type RsFormRuleTrigger } from '../../form/src/form-rules';
 import type { RsTagVariant } from '../../tag';
+import { type RsDynamicTagsParse, type RsDynamicTagsRejectReason } from './dynamic-tags-utils';
+/**
+ * RsDynamicTags 模板 ref 请用此类型。
+ * 不要写 `InstanceType<typeof RsDynamicTags>`：组件实例类型过深，vue-tsc 会报 Excessive stack depth。
+ */
+export interface RsDynamicTagsExpose {
+    validate: (trigger?: RsFormRuleTrigger) => Promise<{
+        valid: boolean;
+        message?: string;
+        name?: string;
+    }>;
+    clearValidation: () => void;
+    setValue: (value: unknown) => void;
+    setError: (message: string) => void;
+    focus: () => void;
+    blur: () => void;
+}
+/** 模板 ref 实例：expose + 根节点 */
+export type RsDynamicTagsInstance = RsDynamicTagsExpose & {
+    $el: HTMLElement;
+};
 export type RsDynamicTagsInputMode = 'trigger' | 'always';
-export type RsDynamicTagsRejectReason = 'duplicate' | 'max';
+export type { RsDynamicTagsParse, RsDynamicTagsRejectReason };
 type __VLS_Props = {
     /** 字段名：匹配 RsForm.rules[name] */
     name?: string;
@@ -10,6 +31,7 @@ type __VLS_Props = {
     invalid?: boolean;
     placeholder?: string;
     disabled?: boolean;
+    readonly?: boolean;
     required?: boolean;
     max?: number;
     /** 输入内容最大长度 */
@@ -23,37 +45,48 @@ type __VLS_Props = {
     inputMode?: RsDynamicTagsInputMode;
     /** 失焦时是否提交当前输入 */
     commitOnBlur?: boolean;
+    /**
+     * 分隔符。输入或粘贴遇到即切开成多个标签。
+     * 例：',' 或 [',', ';']。空格作分隔时每敲一个空格就会提交。
+     */
+    separators?: string | string[];
+    /** 提交前变换或拒绝。false 发 reject('invalid')。 */
+    parse?: RsDynamicTagsParse;
+    /** 有标签且非禁用 / 只读时显示清空 */
+    allowClear?: boolean;
     size?: RsComponentSize;
     radius?: RsRadius;
     /** 标签视觉变体 */
     tagVariant?: RsTagVariant;
     round?: boolean;
+    /** 无障碍名称。旁边已有可见 label 时可省略。 */
+    ariaLabel?: string;
 };
-declare function runValidate(trigger?: RsFormRuleTrigger): Promise<{
-    valid: true;
-    name: string | undefined;
-    message?: undefined;
-} | {
-    valid: boolean;
-    message: string | undefined;
-    name: string | undefined;
-}>;
-declare function setValue(value: unknown): void;
-declare function clearValidation(): void;
 type __VLS_ModelProps = {
     modelValue?: string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
-    validate: typeof runValidate;
-    clearValidation: typeof clearValidation;
-    setValue: typeof setValue;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_9: {
+    tag: string;
+    index: number;
+}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    tag?: (props: typeof __VLS_9) => any;
+} & {
+    trigger?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsDynamicTagsExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
+    clear: () => any;
     "update:modelValue": (value: string[]) => any;
     create: (value: string) => any;
     remove: (value: string, index: number) => any;
     reject: (reason: RsDynamicTagsRejectReason, value: string) => 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;
     onCreate?: ((value: string) => any) | undefined;
     onRemove?: ((value: string, index: number) => any) | undefined;
@@ -62,10 +95,18 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     disabled: boolean;
     round: boolean;
+    readonly: boolean;
     allowDuplicate: boolean;
     inputMode: RsDynamicTagsInputMode;
     commitOnBlur: boolean;
+    allowClear: boolean;
     tagVariant: RsTagVariant;
 }, {}, {}, {}, 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;
+    };
+};