niuma-ui 2.0.3 → 2.0.9

package/dist/components/context-menu/src/RsContextMenu.css

@@ -1,45 +1,61 @@
 
-/* ── 菜单容器：macOS 毛玻璃浮层 ── */
+/* 实底。半透明加 backdrop-filter 在 CEF GPU 崩溃后会被丢掉，菜单会透出下层。 */
+.rs-context-menu__portal {
+  display: contents;
+}
 .rs-context-menu__content,
 .rs-context-menu__sub-content {
-  /* 与 Select/DatePicker 一致：Portal 挂到 body 时须高于 modal，否则 Dialog 内右键会被挡住 */
-  z-index: calc(var(--rs-z-modal) + 2);
+  position: fixed;
+  z-index: var(--rs-ctx-z);
   box-sizing: border-box;
-  min-width: 11rem;
-  max-width: min(22rem, calc(100vw - 1rem));
-  /* 多项 / 多级时贴边：用 popper 可用高度限制，避免溢出视口无法点选 */
-  max-height: var(--reka-context-menu-content-available-height, calc(100vh - 1rem));
-  padding: 5px;
-  border-radius: 10px;
+  min-width: var(--rs-ctx-min-width);
+  max-width: min(var(--rs-ctx-max-width), calc(100vw - 1rem));
+  width: max-content;
+  padding: var(--rs-ctx-pad);
+  border-radius: var(--rs-ctx-radius);
   border: 0.5px solid var(--rs-ctx-border);
-  /* 实底。半透明 + backdrop-filter 在 CEF GPU 崩溃后会被丢掉，菜单会透出下层。 */
   background: var(--rs-ctx-bg);
   box-shadow: var(--rs-ctx-shadow);
+  color: var(--rs-ctx-fg);
   outline: none;
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
 }
-
-/* 主菜单入场动画（从鼠标位置展开） */
 .rs-context-menu__content {
-  transform-origin: var(--reka-context-menu-content-transform-origin, top left);
-  animation: rs-ctx-in 0.13s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+  transform-origin: top left;
 }
-
-/* 子菜单：仅淡入，避免多层快速切换时 scale 造成抖动感 */
-.rs-context-menu__sub-content {
-  transform-origin: var(--reka-popper-transform-origin, left center);
-  animation: rs-ctx-sub-in 0.1s ease-out;
+.rs-context-menu__content:not([data-placed]) {
+  visibility: hidden;
+  pointer-events: none;
+}
+.rs-context-menu__content[data-origin-x='right'][data-origin-y='top'] {
+  transform-origin: top right;
+}
+.rs-context-menu__content[data-origin-x='left'][data-origin-y='bottom'] {
+  transform-origin: bottom left;
+}
+.rs-context-menu__content[data-origin-x='right'][data-origin-y='bottom'] {
+  transform-origin: bottom right;
+}
+.rs-context-menu__content[data-placed] {
+  animation: rs-ctx-in var(--rs-ctx-motion-in) cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+.rs-context-menu__sub-content[data-placed] {
+  animation: rs-ctx-sub-in var(--rs-ctx-motion-sub) ease-out;
+}
+.rs-context-menu__sub-content[data-origin-x='left'] {
+  transform-origin: left center;
+}
+.rs-context-menu__sub-content[data-origin-x='right'] {
+  transform-origin: right center;
 }
 @keyframes rs-ctx-in {
 from {
     opacity: 0;
-    transform: scale(0.95);
 }
 to {
     opacity: 1;
-    transform: scale(1);
 }
 }
 @keyframes rs-ctx-sub-in {
@@ -50,129 +66,139 @@ to {
     opacity: 1;
 }
 }
-
-/* ── 菜单项 ── */
+.rs-context-menu--ssm {
+  --rs-ctx-item-height: 1.25rem;
+  --rs-ctx-font-size: var(--rs-font-size-xs);
+}
+.rs-context-menu--sm {
+  --rs-ctx-item-height: 1.5rem;
+  --rs-ctx-font-size: var(--rs-font-size-xs);
+}
+.rs-context-menu--md {
+  --rs-ctx-item-height: 2rem;
+  --rs-ctx-font-size: var(--rs-font-size-sm);
+}
+.rs-context-menu--lg {
+  --rs-ctx-item-height: 2.25rem;
+  --rs-ctx-font-size: var(--rs-font-size-sm);
+}
 .rs-context-menu__item {
   display: flex;
   align-items: center;
   gap: 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
   padding: 0 8px 0 0;
-  height: 24px;
-  border-radius: 6px;
-  font-size: var(--rs-font-size-xs);
+  min-height: var(--rs-ctx-item-height);
+  border: 0;
+  border-radius: var(--rs-ctx-item-radius);
+  background: transparent;
+  font: inherit;
+  font-size: var(--rs-ctx-font-size);
   font-weight: var(--rs-font-weight-regular);
-  line-height: 1;
-  color: var(--rs-text);
+  line-height: 1.2;
+  color: inherit;
+  text-align: start;
+  text-decoration: none;
   cursor: default;
+  appearance: none;
   outline: none;
   user-select: none;
-  transition:
-    background 0.08s,
-    color 0.08s;
 }
-
-/* 图标占位列（固定 28px，居中对齐） */
 .rs-context-menu__icon-cell {
   flex-shrink: 0;
-  width: 28px;
+  width: var(--rs-ctx-icon-col);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--rs-ctx-icon);
+  color: var(--rs-ctx-muted);
 }
-
-/* 文本 */
-.rs-context-menu__label {
+.rs-context-menu__text {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+}
+.rs-context-menu__label,
+.rs-context-menu__hint {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-context-menu__hint {
+  color: var(--rs-ctx-muted);
+  font-size: var(--rs-font-size-xs);
 }
-
-/* 键盘快捷键 */
 .rs-context-menu__shortcut {
   flex-shrink: 0;
   margin-inline-start: 16px;
-  font-size: var(--rs-font-size-xs);
+  font-size: var(--rs-ctx-font-size);
   font-weight: var(--rs-font-weight-regular);
-  color: var(--rs-ctx-shortcut);
+  color: var(--rs-ctx-muted);
   letter-spacing: 0.02em;
   font-family: var(--rs-font-sans);
 }
-
-/* 子菜单展开箭头 */
 .rs-context-menu__arrow {
   flex-shrink: 0;
   margin-inline-start: 6px;
-  color: var(--rs-ctx-icon);
+  color: var(--rs-ctx-muted);
+}
+[dir='rtl'] .rs-context-menu__arrow {
+  transform: scaleX(-1);
 }
-
-/* 悬停 / 子菜单已展开：蓝色高亮条（macOS 主色调） */
 .rs-context-menu__item[data-highlighted],
 .rs-context-menu__item[data-state='open'] {
-  background: var(--rs-primary);
-  color: #ffffff;
+  background: var(--rs-ctx-item-active-bg);
+  color: var(--rs-ctx-item-active-fg);
 }
 .rs-context-menu__item[data-highlighted] .rs-context-menu__icon-cell,
 .rs-context-menu__item[data-highlighted] .rs-context-menu__shortcut,
 .rs-context-menu__item[data-highlighted] .rs-context-menu__arrow,
+.rs-context-menu__item[data-highlighted] .rs-context-menu__hint,
 .rs-context-menu__item[data-state='open'] .rs-context-menu__icon-cell,
 .rs-context-menu__item[data-state='open'] .rs-context-menu__shortcut,
-.rs-context-menu__item[data-state='open'] .rs-context-menu__arrow {
-  color: rgba(255 255 255 / 0.75);
+.rs-context-menu__item[data-state='open'] .rs-context-menu__arrow,
+.rs-context-menu__item[data-state='open'] .rs-context-menu__hint {
+  color: var(--rs-ctx-item-active-muted);
+}
+.rs-context-menu__item:focus-visible {
+  outline: var(--rs-focus-ring-width, 2px) solid var(--rs-focus-ring);
+  outline-offset: -2px;
 }
-
-/* 危险项 */
 .rs-context-menu__item--danger {
-  color: var(--rs-danger);
+  color: var(--rs-ctx-danger);
 }
 .rs-context-menu__item--danger .rs-context-menu__icon-cell {
-  color: var(--rs-danger);
+  color: var(--rs-ctx-danger);
 }
 .rs-context-menu__item--danger[data-highlighted],
 .rs-context-menu__item--danger[data-state='open'] {
-  background: var(--rs-danger);
-  color: #ffffff;
+  background: var(--rs-ctx-danger);
+  color: var(--rs-ctx-item-active-fg);
 }
 .rs-context-menu__item--danger[data-highlighted] .rs-context-menu__icon-cell,
 .rs-context-menu__item--danger[data-state='open'] .rs-context-menu__icon-cell {
-  color: rgba(255 255 255 / 0.75);
+  color: var(--rs-ctx-item-active-muted);
 }
-
-/* 禁用态 */
 .rs-context-menu__item[data-disabled] {
-  opacity: 0.38;
+  opacity: var(--rs-ctx-disabled-opacity);
   cursor: not-allowed;
 }
-
-/* 分隔线：更细腻 */
 .rs-context-menu__separator {
   height: 1px;
   margin: 5px 0;
+  border: 0;
   background: var(--rs-ctx-separator);
 }
-
-/* ── 主题变量：深色 ── */
-:root,
-[data-rs-theme='dark'] {
-  --rs-ctx-bg: #2c2c2e;
-  --rs-ctx-border: rgba(255, 255, 255, 0.13);
-  --rs-ctx-shadow:
-    0 0 0 0.5px rgba(255, 255, 255, 0.08),
-    0 2px 8px rgba(0, 0, 0, 0.4),
-    0 8px 32px rgba(0, 0, 0, 0.55);
-  --rs-ctx-icon: rgba(235, 235, 245, 0.5);
-  --rs-ctx-shortcut: rgba(235, 235, 245, 0.4);
-  --rs-ctx-separator: rgba(255, 255, 255, 0.1);
-}
-
-/* ── 主题变量：亮色 ── */
-[data-rs-theme='light'] {
-  --rs-ctx-bg: #f5f5f7;
-  --rs-ctx-border: rgba(0, 0, 0, 0.1);
-  --rs-ctx-shadow:
-    0 0 0 0.5px rgba(0, 0, 0, 0.06),
-    0 2px 6px rgba(0, 0, 0, 0.12),
-    0 8px 28px rgba(0, 0, 0, 0.18);
-  --rs-ctx-icon: rgba(60, 60, 67, 0.5);
-  --rs-ctx-shortcut: rgba(60, 60, 67, 0.4);
-  --rs-ctx-separator: rgba(60, 60, 67, 0.1);
+.rs-context-menu__group {
+  margin: 0;
+  padding: 6px 8px 2px;
+  font-size: var(--rs-font-size-xs);
+  line-height: 1.2;
+  color: var(--rs-ctx-muted);
+  user-select: none;
 }

package/dist/components/context-menu/src/RsContextMenu.d.ts

@@ -1,30 +1,51 @@
-import { type RsContextMenuItem } from './context-menu-utils';
+import { type RsComponentSize, type RsRadius } from '../../../theme/types';
+import { type RsContextMenuExpose, type RsContextMenuGetPopupContainer, type RsContextMenuItem } from './context-menu-utils';
 type __VLS_Props = {
     items: RsContextMenuItem[];
-    /** 禁用时不拦截右键事件，直接透传 slot，浏览器原生菜单正常显示 */
+    /** 禁用时不拦截右键，浏览器原生菜单照常出现 */
     disabled?: boolean;
+    /** 行高。不传保持紧凑的右键密度，不跟 Form / ConfigProvider 的控件 size。 */
+    size?: RsComponentSize;
+    /** 面板与条目圆角。不传用 --rs-ctx-radius。 */
+    radius?: RsRadius;
+    /** 普通项选中后关闭。checkbox / radio 默认保持打开。 */
+    hideOnSelect?: boolean;
+    getPopupContainer?: RsContextMenuGetPopupContainer;
+    popupClassName?: string;
+    /** 面板最大高度（px）。不传则贴视口。 */
+    maxHeight?: number;
+    ariaLabel?: string;
+    id?: string;
+    /** 关闭后卸下面板。false 只隐藏，避免反复创建。 */
+    destroyOnHide?: boolean;
 };
 type __VLS_ModelProps = {
-    /**
-     * 展开状态。不绑定时组件自行维护（与原行为一致）。
-     * 绑定后可由外部主动关闭——例如菜单所依赖的数据已失效时。
-     */
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_18: {}, __VLS_39: {};
+declare var __VLS_6: {}, __VLS_24: {
+    item: RsContextMenuItem;
+    highlighted: boolean;
+    checked: boolean;
+};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_18) => any;
+    default?: (props: typeof __VLS_6) => any;
 } & {
-    default?: (props: typeof __VLS_39) => any;
+    item?: (props: typeof __VLS_24) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsContextMenuExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (key: string) => any;
+    openChange: (open: boolean) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((key: string) => any) | undefined;
+    onOpenChange?: ((open: boolean) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    disabled: boolean;
+    destroyOnHide: boolean;
+    hideOnSelect: boolean;
+}, {}, {}, {}, 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;