niuma-ui 1.3.5 → 1.3.7

package/CHANGELOG.md

@@ -6,6 +6,19 @@
 
 ## [Unreleased]
 
+## [1.3.7] - 2026-09-15
+
+### 新增
+
+- `RsDropdown`：`size`、`contentWidth="fit"`、菜单项 `hint`。工具条动作菜单走公开档位，不要 `:deep` 改菜单内边距。
+
+## [1.3.6] - 2026-09-14
+
+### 新增
+
+- `RsSplitPane`：`fill`（默认关）铺满父级并拉高插槽根节点，业务不要 `:deep` 改 `.rs-split__pane`。
+- `RsSplitPane`：`collapsible` 只表示可吸附折叠（拖过阈值 / Enter / `collapse()`）。分隔条不画折叠钮，与 Allotment、react-resizable-panels 一致。
+
 ## [1.3.5] - 2026-09-12
 
 ### 修复

package/dist/components/RsDropdown.css

@@ -155,3 +155,38 @@
   opacity: 0.38;
   cursor: not-allowed;
 }
+.rs-dropdown__item-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.rs-dropdown__item-hint {
+  font-size: var(--rs-font-size-xs);
+  color: var(--rs-muted);
+  line-height: var(--rs-line-height-tight);
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.rs-dropdown__content--fit {
+  min-width: 10.5rem;
+  width: max-content;
+}
+.rs-dropdown__content--ssm .rs-dropdown__item {
+  min-height: 26px;
+  padding: 5px 8px;
+  gap: var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
+  align-items: flex-start;
+}
+.rs-dropdown__content--ssm .rs-dropdown__item-icon {
+  margin-top: 2px;
+}
+.rs-dropdown__content--sm .rs-dropdown__item {
+  min-height: 28px;
+  padding: 6px 10px;
+  font-size: var(--rs-font-size-sm);
+}

package/dist/components/RsDropdown.d.ts

@@ -1,10 +1,15 @@
-import { type RsDropdownItems as RsDropdownData } from './dropdown-utils';
+import { type RsDropdownContentWidth, type RsDropdownItems as RsDropdownData } from './dropdown-utils';
+import type { RsComponentSize } from '../theme/types';
 type __VLS_Props = {
     items: RsDropdownData;
     placeholder?: string;
     disabled?: boolean;
     /** 选中后是否在触发器回显选项 label；false 时固定显示 placeholder（操作菜单） */
     showSelected?: boolean;
+    /** 菜单项密度，与控件 size 对齐 */
+    size?: RsComponentSize;
+    /** 菜单宽度；工具条图标按钮用 fit，避免被触发器宽度压扁 */
+    contentWidth?: RsDropdownContentWidth;
 };
 type __VLS_ModelProps = {
     modelValue?: string;
@@ -21,8 +26,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onSelect?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
+    size: RsComponentSize;
     disabled: boolean;
     showSelected: boolean;
+    contentWidth: RsDropdownContentWidth;
 }, {}, {}, {}, 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/RsDropdown.impl.js

@@ -18,7 +18,9 @@ var RsDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		showSelected: {
 			type: Boolean,
 			default: true
-		}
+		},
+		size: { default: "md" },
+		contentWidth: { default: "trigger" }
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -69,7 +71,7 @@ var RsDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					_: 1
 				}, 8, ["disabled"])), createVNode(unref(DropdownMenuPortal), null, {
 					default: withCtx(() => [createVNode(unref(DropdownMenuContent), {
-						class: "rs-dropdown__content",
+						class: normalizeClass(["rs-dropdown__content", [`rs-dropdown__content--${__props.size}`, `rs-dropdown__content--${__props.contentWidth}`]]),
 						"side-offset": 4
 					}, {
 						default: withCtx(() => [__props.showSelected ? (openBlock(), createBlock(unref(DropdownMenuRadioGroup), {
@@ -79,16 +81,18 @@ var RsDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 						}, {
 							default: withCtx(() => [createVNode(RsDropdownItems_default, {
 								items: __props.items,
+								size: __props.size,
 								selectable: ""
-							}, null, 8, ["items"])]),
+							}, null, 8, ["items", "size"])]),
 							_: 1
 						}, 8, ["modelValue"])) : (openBlock(), createBlock(RsDropdownItems_default, {
 							key: 1,
 							items: __props.items,
+							size: __props.size,
 							onSelect
-						}, null, 8, ["items"]))]),
+						}, null, 8, ["items", "size"]))]),
 						_: 1
-					})]),
+					}, 8, ["class"])]),
 					_: 1
 				})]),
 				_: 3

package/dist/components/RsDropdownItemView.d.ts

@@ -0,0 +1,11 @@
+import type { RsDropdownItem } from './dropdown-utils';
+import { type RsComponentSize } from '../theme/types';
+type __VLS_Props = {
+    item: RsDropdownItem;
+    size?: RsComponentSize;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: RsComponentSize;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/RsDropdownItemView.impl.js

@@ -0,0 +1,32 @@
+import RsIcon_default from "./RsIcon.js";
+import { RS_COMPONENT_SIZE_ICON_PX } from "../theme/types.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, toDisplayString } from "vue";
+//#region src/components/RsDropdownItemView.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "rs-dropdown__item-copy" };
+var _hoisted_2 = { class: "rs-dropdown__item-label" };
+var _hoisted_3 = {
+	key: 0,
+	class: "rs-dropdown__item-hint"
+};
+var RsDropdownItemView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsDropdownItemView",
+	props: {
+		item: {},
+		size: { default: "md" }
+	},
+	setup(__props) {
+		/** 下拉项内容：图标 + 标题 + 可选说明，密度由 size 控制。 */
+		const props = __props;
+		const iconSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[props.size]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [__props.item.icon ? (openBlock(), createBlock(RsIcon_default, {
+				key: 0,
+				name: __props.item.icon,
+				size: iconSize.value,
+				class: "rs-dropdown__item-icon"
+			}, null, 8, ["name", "size"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_1, [createElementVNode("span", _hoisted_2, toDisplayString(__props.item.label), 1), __props.item.hint ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.item.hint), 1)) : createCommentVNode("", true)])], 64);
+		};
+	}
+});
+//#endregion
+export { RsDropdownItemView_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/RsDropdownItemView.js

@@ -0,0 +1,5 @@
+import RsDropdownItemView_vue_vue_type_script_setup_true_lang_default from "./RsDropdownItemView.impl.js";
+//#region src/components/RsDropdownItemView.vue
+var RsDropdownItemView_default = RsDropdownItemView_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RsDropdownItemView_default as default };

package/dist/components/RsDropdownItems.d.ts

@@ -1,14 +1,17 @@
 import { type RsDropdownItems } from './dropdown-utils';
+import type { RsComponentSize } from '../theme/types';
 type __VLS_Props = {
     items: RsDropdownItems;
     /** true：单选互斥；false：操作项 */
     selectable?: boolean;
+    size?: RsComponentSize;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((value: string) => any) | undefined;
 }>, {
+    size: RsComponentSize;
     selectable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/RsDropdownItems.impl.js

@@ -1,12 +1,8 @@
-import RsIcon_default from "./RsIcon.js";
 import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioItem } from "./reka.js";
 import { isDropdownItemGroup } from "./dropdown-utils.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import RsDropdownItemView_default from "./RsDropdownItemView.js";
+import { Fragment, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
 //#region src/components/RsDropdownItems.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "rs-dropdown__item-label" };
-var _hoisted_2 = { class: "rs-dropdown__item-label" };
-var _hoisted_3 = { class: "rs-dropdown__item-label" };
-var _hoisted_4 = { class: "rs-dropdown__item-label" };
 var RsDropdownItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "RsDropdownItems",
 	props: {
@@ -14,7 +10,8 @@ var RsDropdownItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		selectable: {
 			type: Boolean,
 			default: false
-		}
+		},
+		size: { default: "md" }
 	},
 	emits: ["select"],
 	setup(__props, { emit: __emit }) {
@@ -26,7 +23,7 @@ var RsDropdownItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		return (_ctx, _cache) => {
 			return openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (entry, index) => {
 				return openBlock(), createElementBlock(Fragment, { key: index }, [unref(isDropdownItemGroup)(entry) ? (openBlock(), createBlock(unref(DropdownMenuGroup), {
-					key: 0,
+					key: `group-${index}`,
 					class: "rs-dropdown__group"
 				}, {
 					default: withCtx(() => [createVNode(unref(DropdownMenuLabel), { class: "rs-dropdown__group-label" }, {
@@ -39,12 +36,10 @@ var RsDropdownItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 							disabled: item.disabled,
 							class: "rs-dropdown__item"
 						}, {
-							default: withCtx(() => [item.icon ? (openBlock(), createBlock(RsIcon_default, {
-								key: 0,
-								name: item.icon,
-								size: 16,
-								class: "rs-dropdown__item-icon"
-							}, null, 8, ["name"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_1, toDisplayString(item.label), 1)]),
+							default: withCtx(() => [createVNode(RsDropdownItemView_default, {
+								item,
+								size: __props.size
+							}, null, 8, ["item", "size"])]),
 							_: 2
 						}, 1032, ["value", "disabled"]);
 					}), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(entry.options, (item) => {
@@ -54,41 +49,35 @@ var RsDropdownItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 							class: "rs-dropdown__item",
 							onSelect: ($event) => onActionSelect(item)
 						}, {
-							default: withCtx(() => [item.icon ? (openBlock(), createBlock(RsIcon_default, {
-								key: 0,
-								name: item.icon,
-								size: 16,
-								class: "rs-dropdown__item-icon"
-							}, null, 8, ["name"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_2, toDisplayString(item.label), 1)]),
+							default: withCtx(() => [createVNode(RsDropdownItemView_default, {
+								item,
+								size: __props.size
+							}, null, 8, ["item", "size"])]),
 							_: 2
 						}, 1032, ["disabled", "onSelect"]);
 					}), 128))]),
 					_: 2
 				}, 1024)) : __props.selectable ? (openBlock(), createBlock(unref(DropdownMenuRadioItem), {
-					key: entry.value,
+					key: `radio-${entry.value}`,
 					value: entry.value,
 					disabled: entry.disabled,
 					class: "rs-dropdown__item"
 				}, {
-					default: withCtx(() => [entry.icon ? (openBlock(), createBlock(RsIcon_default, {
-						key: 0,
-						name: entry.icon,
-						size: 16,
-						class: "rs-dropdown__item-icon"
-					}, null, 8, ["name"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_3, toDisplayString(entry.label), 1)]),
+					default: withCtx(() => [createVNode(RsDropdownItemView_default, {
+						item: entry,
+						size: __props.size
+					}, null, 8, ["item", "size"])]),
 					_: 2
 				}, 1032, ["value", "disabled"])) : (openBlock(), createBlock(unref(DropdownMenuItem), {
-					key: entry.value,
+					key: `action-${entry.value}`,
 					disabled: entry.disabled,
 					class: "rs-dropdown__item",
 					onSelect: ($event) => onActionSelect(entry)
 				}, {
-					default: withCtx(() => [entry.icon ? (openBlock(), createBlock(RsIcon_default, {
-						key: 0,
-						name: entry.icon,
-						size: 16,
-						class: "rs-dropdown__item-icon"
-					}, null, 8, ["name"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_4, toDisplayString(entry.label), 1)]),
+					default: withCtx(() => [createVNode(RsDropdownItemView_default, {
+						item: entry,
+						size: __props.size
+					}, null, 8, ["item", "size"])]),
 					_: 2
 				}, 1032, ["disabled", "onSelect"]))], 64);
 			}), 128);

package/dist/components/RsSplitPane.css

@@ -22,6 +22,18 @@
   min-height: 0;
   overflow: hidden;
 }
+
+/* fill：面板当弹性列，插槽根节点吃满。业务改自己的内容，不要 :deep 本组件。 */
+.rs-split--fill > .rs-split__pane:not(.rs-split__pane--auto) {
+  display: flex;
+  flex-direction: column;
+}
+.rs-split--fill > .rs-split__pane:not(.rs-split__pane--auto) > * {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+}
 .rs-split__pane--auto {
   /* 内容撑开；超出 max 时在面板内滚动 */
   overflow: auto;

package/dist/components/RsSplitPane.d.ts

@@ -10,6 +10,11 @@ type __VLS_Props = {
     keyboardStep?: number;
     /** 在分隔条中央展示抓手（grip）指示 */
     withHandle?: boolean;
+    /**
+     * 面板铺满父级，并把插槽根节点拉高。
+     * 默认关，不改变原有内容尺寸；工作台 / 设置页显式打开，避免 :deep。
+     */
+    fill?: boolean;
 };
 type __VLS_ModelProps = {
     /** 各面板尺寸（百分比，总和 100） */
@@ -36,6 +41,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsSpl
     onCollapse?: ((key: string) => any) | undefined;
     "onUpdate:sizes"?: ((value: number[]) => any) | undefined;
 }>, {
+    fill: boolean;
     disabled: boolean;
     orientation: RsSplitOrientation;
     keyboardStep: number;

package/dist/components/RsSplitPane.impl.js

@@ -40,6 +40,10 @@ var RsSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		withHandle: {
 			type: Boolean,
 			default: false
+		},
+		fill: {
+			type: Boolean,
+			default: false
 		}
 	}, {
 		"sizes": { default: () => [] },
@@ -369,7 +373,10 @@ var RsSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			return openBlock(), createElementBlock("div", {
 				ref_key: "rootRef",
 				ref: rootRef,
-				class: normalizeClass(["rs-split", [`rs-split--${__props.orientation}`, { "rs-split--disabled": __props.disabled }]])
+				class: normalizeClass(["rs-split", [`rs-split--${__props.orientation}`, {
+					"rs-split--disabled": __props.disabled,
+					"rs-split--fill": __props.fill
+				}]])
 			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.panes, (pane, index) => {
 				return openBlock(), createElementBlock(Fragment, { key: pane.key }, [createElementVNode("div", {
 					class: normalizeClass(["rs-split__pane", {

package/dist/components/dropdown-utils.d.ts

@@ -2,6 +2,8 @@ export interface RsDropdownItem {
     label: string;
     value: string;
     icon?: string;
+    /** 次要说明，工具条动作菜单等场景使用 */
+    hint?: string;
     disabled?: boolean;
 }
 export interface RsDropdownItemGroup {
@@ -9,5 +11,7 @@ export interface RsDropdownItemGroup {
     options: RsDropdownItem[];
 }
 export type RsDropdownItems = RsDropdownItem[] | RsDropdownItemGroup[];
+/** 菜单宽度：trigger 对齐触发器；fit 随内容，不跟窄图标按钮 */
+export type RsDropdownContentWidth = 'trigger' | 'fit';
 export declare function isDropdownItemGroup(item: RsDropdownItem | RsDropdownItemGroup): item is RsDropdownItemGroup;
 export declare function flattenDropdownItems(items: RsDropdownItems): RsDropdownItem[];

package/dist/index.d.ts

@@ -109,7 +109,7 @@ export type { RsContainerBreakpoint, RsContainerGap, RsContainerMaxWidth, RsCont
 export type { RsBreadcrumbItem } from './components/RsBreadcrumb.js';
 export type { RsToolbarBorder, RsToolbarSize } from './components/RsToolbar.js';
 export type { RsContextMenuItem } from './components/context-menu-utils';
-export type { RsDropdownItem, RsDropdownItemGroup, RsDropdownItems } from './components/dropdown-utils';
+export type { RsDropdownContentWidth, 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, RsSelectMaxTagCount, RsSelectVariant, RsSelectValue, } from './components/select-utils';

package/dist/locale/messages.js

@@ -144,6 +144,8 @@ var zhCN = {
 	"tree.drag": "拖拽排序",
 	"split.label": "面板分割",
 	"split.resize": "拖动调整面板尺寸",
+	"split.collapse": "收起面板",
+	"split.expand": "展开面板",
 	"drawer.resize": "拖动调整抽屉尺寸",
 	"terminal.copy": "复制",
 	"terminal.paste": "粘贴",
@@ -374,6 +376,8 @@ var enUS = {
 	"tree.drag": "Drag to reorder",
 	"split.label": "Split panes",
 	"split.resize": "Drag to resize panes",
+	"split.collapse": "Collapse pane",
+	"split.expand": "Expand pane",
 	"drawer.resize": "Drag to resize the drawer",
 	"terminal.copy": "Copy",
 	"terminal.paste": "Paste",

package/package.json

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