niuma-ui 1.2.5 → 1.2.8

package/dist/components/use-rs-select.js

@@ -1,6 +1,6 @@
 import { useFilter } from "./reka.js";
-import { buildOptionDisabledMap, buildOptionLabelMap, comboboxBindingToTokens, filterSelectOptions, findSelectOption, flattenSelectOptions, flattenSelectValues, fromComboboxValue, isSelectLabeledValue, normalizeSelectOptions, optionDisplayLabel, packSelectModel, restoreSelectValue, restoreSelectValues, selectModelEntries, sortSelectOptions, splitByTokenSeparators, toComboboxValue, toSelectedTokens } from "./select-utils.js";
-import { computed, nextTick, watch } from "vue";
+import { buildOptionDisabledMap, buildOptionLabelMap, comboboxBindingToTokens, filterSelectOptions, findSelectOption, flattenSelectOptions, flattenSelectValues, fromComboboxValue, isSelectLabeledValue, isSelectMultiple, normalizeSelectOptions, optionDisplayLabel, packSelectModel, restoreSelectValue, restoreSelectValues, selectModelEntries, sortSelectOptions, splitByTokenSeparators, toComboboxValue, toSelectedTokens } from "./select-utils.js";
+import { computed, nextTick, onUnmounted, watch } from "vue";
 //#region src/components/use-rs-select.ts
 /**
 * Select 过滤、选中、多选 tag、creatable / 分隔符提交。
@@ -8,6 +8,7 @@ import { computed, nextTick, watch } from "vue";
 */
 function useRsSelect(props, model, open, searchQuery, emit, t) {
 	const { contains } = useFilter({ sensitivity: "base" });
+	const isMultiple = computed(() => isSelectMultiple(props.multiple));
 	const normalizedOptions = computed(() => normalizeSelectOptions(props.options, props.fieldNames));
 	const resolvedPlaceholder = computed(() => props.placeholder ?? t("select.placeholder"));
 	const resolvedSearchPlaceholder = computed(() => props.searchPlaceholder ?? t("select.searchPlaceholder"));
@@ -46,11 +47,12 @@ function useRsSelect(props, model, open, searchQuery, emit, t) {
 		if (!canCreate.value) return values;
 		return [createValue.value, ...values.filter((item) => String(item) !== createValue.value)];
 	});
-	const selectedValues = computed(() => toSelectedTokens(model.value, Boolean(props.multiple)));
+	const selectedValues = computed(() => toSelectedTokens(model.value, isMultiple.value));
 	const hasValue = computed(() => selectedValues.value.length > 0);
 	const visibleTagTokens = computed(() => {
 		const all = selectedValues.value;
-		if (!props.multiple || props.maxTagCount == null || all.length <= props.maxTagCount) return all;
+		if (!isMultiple.value || props.maxTagCount == null || props.maxTagCount === "responsive") return all;
+		if (all.length <= props.maxTagCount) return all;
 		return all.slice(0, Math.max(0, props.maxTagCount));
 	});
 	const omittedTagCount = computed(() => Math.max(0, selectedValues.value.length - visibleTagTokens.value.length));
@@ -82,7 +84,7 @@ function useRsSelect(props, model, open, searchQuery, emit, t) {
 		if (!max || max < 1 || label.length <= max) return label;
 		return `${label.slice(0, max)}…`;
 	}
-	const atMultipleLimit = computed(() => Boolean(props.multiple) && props.multipleLimit != null && props.multipleLimit > 0 && selectedValues.value.length >= props.multipleLimit);
+	const atMultipleLimit = computed(() => isMultiple.value && props.multipleLimit != null && props.multipleLimit > 0 && selectedValues.value.length >= props.multipleLimit);
 	function isOptionLimited(option) {
 		if (!atMultipleLimit.value) return false;
 		return !selectedValues.value.includes(toComboboxValue(option.value));
@@ -93,11 +95,11 @@ function useRsSelect(props, model, open, searchQuery, emit, t) {
 		return option ? isOptionLimited(option) : false;
 	}
 	const singleDisplayLabel = computed(() => {
-		if (props.multiple || !hasValue.value) return "";
+		if (isMultiple.value || !hasValue.value) return "";
 		return tokenLabel(selectedValues.value[0]);
 	});
 	function writeTokens(tokens) {
-		model.value = packSelectModel(restoreSelectValues(tokens, normalizedOptions.value), normalizedOptions.value, Boolean(props.multiple), Boolean(props.labelInValue));
+		model.value = packSelectModel(restoreSelectValues(tokens, normalizedOptions.value), normalizedOptions.value, isMultiple.value, Boolean(props.labelInValue));
 	}
 	function emitSelectionDiff(prev, next) {
 		const prevSet = new Set(prev);
@@ -113,12 +115,12 @@ function useRsSelect(props, model, open, searchQuery, emit, t) {
 	}
 	const comboboxModel = computed({
 		get() {
-			if (props.multiple) return selectedValues.value.map((token) => token);
+			if (isMultiple.value) return selectedValues.value;
 			return hasValue.value ? selectedValues.value[0] : void 0;
 		},
 		set(value) {
 			const prev = selectedValues.value;
-			const tokens = comboboxBindingToTokens(value, Boolean(props.multiple));
+			const tokens = comboboxBindingToTokens(value, isMultiple.value);
 			emitSelectionDiff(prev, tokens);
 			writeTokens(tokens);
 			if (props.autoClearSearchValue) searchQuery.value = "";
@@ -132,7 +134,7 @@ function useRsSelect(props, model, open, searchQuery, emit, t) {
 		if (!next) return;
 		const values = currentValues();
 		if (values.some((item) => String(item) === next)) return;
-		if (props.multiple) {
+		if (isMultiple.value) {
 			if (atMultipleLimit.value) return;
 			const prev = selectedValues.value;
 			const packed = packSelectModel([...values, next], normalizedOptions.value, true, Boolean(props.labelInValue));
@@ -147,7 +149,7 @@ function useRsSelect(props, model, open, searchQuery, emit, t) {
 		if (props.autoClearSearchValue) searchQuery.value = "";
 	}
 	function consumeTokenSeparators(raw) {
-		if (!props.multiple && !props.creatable) return;
+		if (!isMultiple.value && !props.creatable) return;
 		const parts = splitByTokenSeparators(raw, props.tokenSeparators ?? []);
 		if (!parts) return;
 		const rest = parts.pop() ?? "";
@@ -159,26 +161,35 @@ function useRsSelect(props, model, open, searchQuery, emit, t) {
 				const prev = selectedValues.value;
 				const key = toComboboxValue(matched.value);
 				if (prev.includes(key)) continue;
-				if (props.multiple && atMultipleLimit.value) continue;
-				const nextTokens = props.multiple ? [...prev, key] : [key];
+				if (isMultiple.value && atMultipleLimit.value) continue;
+				const nextTokens = isMultiple.value ? [...prev, key] : [key];
 				emitSelectionDiff(prev, nextTokens);
 				writeTokens(nextTokens);
-				if (!props.multiple) open.value = false;
+				if (!isMultiple.value) open.value = false;
 			} else if (props.creatable) commitCreatedValue(token);
 		}
 		if (rest !== raw) searchQuery.value = rest;
 	}
+	let searchTimer;
 	watch(searchQuery, (query) => {
-		if (props.remote) emit("search", query);
+		if (props.remote) {
+			const wait = props.debounce ?? 0;
+			if (searchTimer) clearTimeout(searchTimer);
+			if (wait <= 0) emit("search", query);
+			else searchTimer = setTimeout(() => emit("search", query), wait);
+		}
 		if (props.tokenSeparators?.length) consumeTokenSeparators(query);
 	});
+	onUnmounted(() => {
+		if (searchTimer) clearTimeout(searchTimer);
+	});
 	watch(open, async (isOpen) => {
 		if (isOpen) {
 			const pending = searchQuery.value;
 			await nextTick();
 			await nextTick();
 			if (pending) searchQuery.value = pending;
-			else if (props.fillSearchWithValue && !props.multiple && hasValue.value) searchQuery.value = singleDisplayLabel.value;
+			else if (props.fillSearchWithValue && !isMultiple.value && hasValue.value) searchQuery.value = singleDisplayLabel.value;
 			else searchQuery.value = "";
 			return;
 		}
@@ -196,19 +207,19 @@ function useRsSelect(props, model, open, searchQuery, emit, t) {
 		event.stopPropagation();
 		emitSelectionDiff(selectedValues.value, []);
 		emit("clear");
-		model.value = props.multiple ? [] : "";
+		model.value = isMultiple.value ? [] : "";
 	}
 	function removeTag(value, event) {
 		event.preventDefault();
 		event.stopPropagation();
-		if (!props.multiple) return;
+		if (!isMultiple.value) return;
 		const prev = selectedValues.value;
 		const tokens = prev.filter((item) => item !== value);
 		emitSelectionDiff(prev, tokens);
 		writeTokens(tokens);
 	}
 	function setValue(value) {
-		if (props.multiple) {
+		if (isMultiple.value) {
 			writeTokens(toSelectedTokens(Array.isArray(value) ? value : value !== "" && value != null ? [value] : [], true));
 			return;
 		}
@@ -229,6 +240,7 @@ function useRsSelect(props, model, open, searchQuery, emit, t) {
 		resolvedSearchPlaceholder,
 		resolvedEmptyText,
 		resolvedLoadingText,
+		isMultiple,
 		isSearchable,
 		labelMap,
 		useVirtual,

package/dist/composables/useRsTableShell.js

@@ -1,10 +1,10 @@
+import { resolveVirtualListHeight } from "../components/virtual-list-utils.js";
 import { resolveScrollWidth, selectRowKeys } from "../components/table-utils.js";
 import { RS_TABLE_PREFIX_COL_WIDTH, measureRsTablePrefixWidth, useRsTableColumnVirtual } from "./useRsTableColumnVirtual.js";
 import { useRsTableColumnLayout } from "./useRsTableColumnLayout.js";
 import { useRsTableColumnResize } from "./useRsTableColumnResize.js";
 import { useRsTableContextMenu } from "./useRsTableContextMenu.js";
 import { useRsTableInteraction } from "./useRsTableInteraction.js";
-import { resolveVirtualListHeight } from "../components/virtual-list-utils.js";
 import { computed } from "vue";
 //#region src/composables/useRsTableShell.ts
 /**

package/dist/index.d.ts

@@ -35,6 +35,10 @@ export { default as RsLabel } from './components/RsLabel.js';
 export { default as RsLink } from './components/RsLink.js';
 export { default as RsMenu } from './components/RsMenu.js';
 export { default as RsSelect } from './components/RsSelect.js';
+export { default as RsAutoComplete } from './components/RsAutoComplete.js';
+export { default as RsCascader } from './components/RsCascader.js';
+export { default as RsTreeSelect } from './components/RsTreeSelect.js';
+export { default as RsMentions } from './components/RsMentions.js';
 export { default as RsScrollbar } from './components/RsScrollbar.js';
 export { default as RsAvatar } from './components/RsAvatar.js';
 export { default as RsCard } from './components/RsCard.js';
@@ -100,10 +104,12 @@ export type { RsContextMenuItem } from './components/context-menu-utils';
 export type { RsDropdownItem, RsDropdownItemGroup, RsDropdownItems } from './components/dropdown-utils';
 export type { RsMenuItem, RsMenuItemGroup, RsMenuItems } from './components/menu-utils';
 export type { RsScrollbarOrientation, RsScrollbarType } from './components/scrollbar-utils';
-export type { RsSelectFieldNames, RsSelectFilterOption, RsSelectFilterSort, RsSelectGetPopupContainer, RsSelectLabeledValue, RsSelectModelValue, RsSelectResolvedModel, RsSelectOption, RsSelectOptionFilterProp, RsSelectOptionGroup, RsSelectOptionInput, RsSelectOptions, RsSelectOptionsInput, RsSelectPlacement, RsSelectStatus, RsSelectValue, } from './components/select-utils';
+export type { RsSelectFieldNames, RsSelectFilterOption, RsSelectFilterSort, RsSelectGetPopupContainer, RsSelectLabeledValue, RsSelectModelValue, RsSelectResolvedModel, RsSelectOption, RsSelectOptionFilterProp, RsSelectOptionGroup, RsSelectOptionInput, RsSelectOptions, RsSelectOptionsInput, RsSelectPlacement, RsSelectStatus, RsSelectMaxTagCount, RsSelectVariant, RsSelectValue, } from './components/select-utils';
+export type { RsCascaderExpandTrigger, RsCascaderOption, RsCascaderPath, } from './components/cascader-utils';
+export type { RsMentionActive, RsMentionCaretBox, RsMentionOption, RsMentionPopupBox, } from './components/mentions-utils';
 export { RS_SELECT_EMPTY_VALUE, fromComboboxValue, isSelectLabeledValue, normalizeSelectOptions, optionDisplayLabel, packSelectModel, restoreSelectValue, toComboboxValue, unwrapSelectEntry, } from './components/select-utils';
-export type { RsFeedbackTone, RsToastPosition, RsToastType } from './components/overlay-utils';
-export { RS_TOAST_DEFAULT_GAP, RS_TOAST_DEFAULT_POSITION, rsToastPositions, rsFeedbackIconClass } from './components/overlay-utils';
+export type { RsFeedbackTone, RsToastPosition, RsToastType, RsOverlayAnchorBox, RsOverlayBox } from './components/overlay-utils';
+export { RS_TOAST_DEFAULT_GAP, RS_TOAST_DEFAULT_POSITION, rsToastPositions, rsFeedbackIconClass, placeAnchoredPopup, stepEnabledIndex } from './components/overlay-utils';
 export type { RsFormContext, RsFormErrorRender, RsFormErrorRenderContext, RsFormFieldExpose, RsFormItemContext, RsFormListContext, RsFormListField, RsFormListOperations, RsFormFieldValidationResult, RsFormGap, RsFormLabelAlign, RsFormLabelPosition, RsFormMaxWidth, RsFormSize, RsFormValidateStatus, RsFormValidationResult, } from './components/form-utils';
 export { cloneFormFieldValue, isRsFormItemBoundControl, provideRsFormItemContext, provideRsFormListContext, RS_FORM_INJECTION_KEY, RS_FORM_ITEM_INJECTION_KEY, RS_FORM_LIST_INJECTION_KEY, resolveFieldRules, useRsFormContext, useRsFormField, useRsFormItemContext, useRsFormListContext, } from './components/form-utils';
 export type { RsFormNamePath } from './components/form-path';

package/dist/index.js

@@ -47,12 +47,14 @@ export { RS_TIME_SECONDS_FORMAT } from './lib/rs-dayjs.js'
 export { RS_TOAST_DEFAULT_GAP } from './components/overlay-utils.js'
 export { RS_TOAST_DEFAULT_POSITION } from './components/overlay-utils.js'
 export { default as RsAlert } from './components/RsAlert.js'
+export { default as RsAutoComplete } from './components/RsAutoComplete.js'
 export { default as RsAvatar } from './components/RsAvatar.js'
 export { default as RsBadge } from './components/RsBadge.js'
 export { default as RsBreadcrumb } from './components/RsBreadcrumb.js'
 export { default as RsButton } from './components/RsButton.js'
 export { default as RsCalendarGrid } from './components/RsCalendarGrid.js'
 export { default as RsCard } from './components/RsCard.js'
+export { default as RsCascader } from './components/RsCascader.js'
 export { default as RsCheckbox } from './components/RsCheckbox.js'
 export { default as RsCodeBlock } from './components/RsCodeBlock.js'
 export { default as RsCodeEditor } from './components/RsCodeEditor.js'
@@ -81,6 +83,7 @@ export { default as RsLink } from './components/RsLink.js'
 export { default as RsLoading } from './components/RsLoading.js'
 export { default as RsLoadingBar } from './components/RsLoadingBar.js'
 export { default as RsMarkdown } from './components/RsMarkdown.js'
+export { default as RsMentions } from './components/RsMentions.js'
 export { default as RsMenu } from './components/RsMenu.js'
 export { default as RsMonacoEditor } from './components/RsMonacoEditor.js'
 export { default as RsPagination } from './components/RsPagination.js'
@@ -114,6 +117,7 @@ export { default as RsToolbar } from './components/RsToolbar.js'
 export { default as RsTooltip } from './components/RsTooltip.js'
 export { default as RsTooltipProvider } from './components/RsTooltipProvider.js'
 export { default as RsTree } from './components/RsTree.js'
+export { default as RsTreeSelect } from './components/RsTreeSelect.js'
 export { default as RsUpload } from './components/RsUpload.js'
 export { default as RsVirtualList } from './components/RsVirtualList.js'
 export { TIME_HOUR_OPTIONS } from './components/time-picker-utils.js'
@@ -280,6 +284,7 @@ export { parseDateValue } from './components/date-picker-utils.js'
 export { parseLocalDateTimeToUtcIso } from './lib/iso-local-datetime.js'
 export { parseNumberInput } from './components/input-number-utils.js'
 export { parseTimeValue } from './components/time-picker-utils.js'
+export { placeAnchoredPopup } from './components/overlay-utils.js'
 export { prefetchClipboardText } from './utils/rs-clipboard.js'
 export { prewarmCodeMirrorEditor } from './components/code-mirror-lang.js'
 export { provideRsFormItemContext } from './components/form-utils.js'
@@ -378,6 +383,7 @@ export { sortTableRowsMulti } from './components/table-utils.js'
 export { sortTableTreeRows } from './components/table-utils.js'
 export { splitSizesEqual } from './components/split-pane-utils.js'
 export { splitTreeLabelHighlight } from './components/tree-utils.js'
+export { stepEnabledIndex } from './components/overlay-utils.js'
 export { stepNumberValue } from './components/input-number-utils.js'
 export { supportsRsButtonTone } from './components/button-utils.js'
 export { terminalShortcutLabel } from './components/terminal-utils.js'

package/dist/locale/messages.js

@@ -7,6 +7,9 @@ var zhCN = {
 	"select.clear": "清空",
 	"select.createOption": "使用 “{query}”",
 	"select.maxTagPlaceholder": "+{count}",
+	"mentions.placeholder": "输入 @ 提及",
+	"mentions.suggestions": "提及建议",
+	"autocomplete.suggestions": "自动完成建议",
 	"dropdown.placeholder": "请选择",
 	"breadcrumb.label": "面包屑",
 	"breadcrumb.separator": "分隔符",
@@ -207,6 +210,9 @@ var enUS = {
 	"select.clear": "Clear",
 	"select.createOption": "Use “{query}”",
 	"select.maxTagPlaceholder": "+{count}",
+	"mentions.placeholder": "Type @ to mention",
+	"mentions.suggestions": "Mention suggestions",
+	"autocomplete.suggestions": "Autocomplete suggestions",
 	"dropdown.placeholder": "Select",
 	"breadcrumb.label": "Breadcrumb",
 	"breadcrumb.separator": "Separator",

package/dist/styles.css

@@ -1664,6 +1664,166 @@ code {
   cursor: not-allowed;
 }
 
+.rs-auto-complete {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+
+.rs-auto-complete__input {
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--rs-control-height-md);
+  padding: 0 var(--rs-space-md);
+  border: 1px solid var(--rs-input-border, var(--rs-border));
+  border-radius: var(--rs-select-radius, var(--rs-radius-sm));
+  background: var(--rs-input-bg);
+  color: var(--rs-text);
+  font-family: inherit;
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
+  outline: none;
+  box-shadow: var(--rs-input-shadow, none);
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+}
+
+.rs-auto-complete--sm .rs-auto-complete__input {
+  height: var(--rs-control-height-sm);
+  padding: 0 var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
+}
+
+.rs-auto-complete--lg .rs-auto-complete__input {
+  height: var(--rs-control-height-lg);
+  padding: 0 var(--rs-space-lg);
+  font-size: var(--rs-font-size-base);
+}
+
+.rs-auto-complete--clearable .rs-auto-complete__input {
+  padding-right: calc(var(--rs-space-md) + 1.25rem);
+}
+
+.rs-auto-complete__input::placeholder {
+  color: var(--rs-placeholder);
+}
+
+.rs-auto-complete__input:hover:not(:disabled) {
+  border-color: var(--rs-input-border-hover, var(--rs-border));
+}
+
+.rs-auto-complete__input:focus {
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  background: var(--rs-input-bg);
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+.rs-auto-complete__input:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+  background: var(--rs-surface-hover);
+}
+
+.rs-auto-complete__clear {
+  position: absolute;
+  top: 50%;
+  right: var(--rs-space-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--rs-radius-xs);
+  background: transparent;
+  color: var(--rs-muted);
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.rs-auto-complete__clear:hover {
+  color: var(--rs-text);
+  background: var(--rs-item-hover);
+}
+
+.rs-auto-complete__list {
+  z-index: calc(var(--rs-z-modal) + 2);
+  box-sizing: border-box;
+  min-width: 8rem;
+  max-width: min(24rem, calc(100vw - 1rem));
+  max-height: 16rem;
+  margin: 0;
+  padding: var(--rs-space-xs);
+  overflow: auto;
+  border: 1px solid var(--rs-dialog-border, var(--rs-border));
+  border-radius: var(--rs-radius);
+  background: var(--rs-surface-elevated);
+  box-shadow: var(--rs-shadow-lg);
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
+  list-style: none;
+}
+
+.rs-auto-complete__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rs-auto-complete__item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--rs-space-sm) var(--rs-space-md);
+  border-radius: var(--rs-radius-sm);
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background var(--rs-transition-fast),
+    color var(--rs-transition-fast);
+}
+
+.rs-auto-complete__item--active,
+.rs-auto-complete__item:hover:not(.rs-auto-complete__item--disabled) {
+  background: var(--rs-item-hover);
+}
+
+.rs-auto-complete__item--disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+
+.rs-auto-complete__empty {
+  padding: var(--rs-space-md);
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-sm);
+  text-align: center;
+}
+
+.rs-auto-complete__mark {
+  padding: 0;
+  background: color-mix(in srgb, var(--rs-primary) 22%, transparent);
+  color: inherit;
+  font-weight: var(--rs-font-weight-medium);
+  border-radius: 0.125rem;
+}
+
 .rs-field {
   display: flex;
   flex-direction: column;

package/dist/vite-plugins/niuma-ui-host.js

@@ -49,6 +49,8 @@ function niumaUiHostAlias(ctx) {
                 : [];
             return {
                 resolve: alias.length > 0 ? { alias } : {},
+                // 不要把 reka-ui / @lucide/vue / vue-sonner 写进 include：
+                // 它们装在 niuma-ui 下，pnpm 宿主（cloud / site）resolve 不到，Vite 会报 Failed to resolve dependency。
                 optimizeDeps: {
                     exclude: ['@niuma/ui', 'niuma-ui'],
                 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "niuma-ui",
-  "version": "1.2.5",
+  "version": "1.2.8",
   "license": "Apache-2.0",
   "type": "module",
   "description": "Vue 3 工作台设计系统（Rs* 组件、--rs-* token；含可选编辑器 / 终端）",