niuma-ui 2.0.4 → 2.0.9

package/dist/components/menu/src/RsMenu.css

@@ -6,7 +6,7 @@
 .rs-menu__list {
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
+  gap: var(--rs-menu-gap);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -15,14 +15,26 @@
   flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: var(--rs-space-sm);
+}
+.rs-menu--ssm {
+  --rs-menu-item-height: var(--rs-control-height-ssm);
+  --rs-menu-item-font-size: var(--rs-font-size-xs);
+}
+.rs-menu--sm {
+  --rs-menu-item-height: var(--rs-control-height-sm);
+  --rs-menu-item-font-size: var(--rs-font-size-xs);
+}
+.rs-menu--lg {
+  --rs-menu-item-height: var(--rs-control-height-lg);
+  --rs-menu-item-font-size: var(--rs-font-size-base);
 }
 .rs-menu__group-label {
   display: block;
-  padding: 0.5rem 0.5rem 0.25rem;
+  padding: var(--rs-space-sm) var(--rs-menu-item-pad-inline) var(--rs-space-xs);
   font-size: var(--rs-font-size-xs);
   font-weight: var(--rs-font-weight-semibold);
-  color: var(--rs-muted);
+  color: var(--rs-menu-group-label-fg);
   letter-spacing: 0.04em;
   line-height: var(--rs-line-height-tight);
   user-select: none;
@@ -42,11 +54,19 @@
 .rs-menu__node {
   list-style: none;
 }
+.rs-menu__divider {
+  display: block;
+  height: 0;
+  border: none;
+  border-block-start: 1px solid var(--rs-border);
+  margin-block: var(--rs-space-xs);
+  margin-inline: var(--rs-menu-item-pad-inline);
+}
 .rs-menu--horizontal > .rs-menu__root-list > .rs-menu__group {
   position: relative;
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--rs-space-xs);
 }
 .rs-menu__collapsible {
   display: block;
@@ -54,17 +74,22 @@
 .rs-menu__item {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--rs-space-sm);
   width: 100%;
   min-height: var(--rs-menu-item-height);
-  padding: 0 0.5rem;
-  padding-inline-start: calc(0.5rem + var(--rs-menu-depth, 0) * 0.875rem);
+  padding-block: 0;
+  padding-inline-end: var(--rs-menu-item-pad-inline);
+  padding-inline-start: calc(
+    var(--rs-menu-item-pad-inline) + var(--rs-menu-depth, 0) * var(--rs-menu-indent)
+  );
   border: none;
   border-radius: var(--rs-menu-item-radius);
   background: transparent;
   color: var(--rs-menu-item-fg);
   font-size: var(--rs-menu-item-font-size);
   text-align: start;
+  text-decoration: none;
+  box-sizing: border-box;
   cursor: pointer;
   transition:
     color var(--rs-transition-fast),
@@ -73,37 +98,38 @@
 .rs-menu--horizontal .rs-menu__item {
   width: auto;
   min-width: 0;
-  padding-inline-start: 0.5rem;
-  padding-inline-end: 0.5rem;
+  padding-inline: var(--rs-menu-item-pad-inline);
 }
 .rs-menu--collapsed .rs-menu__item {
   justify-content: center;
   padding: 0;
-  width: var(--rs-control-height-md);
-  margin: 0 auto;
+  width: var(--rs-menu-item-height);
+  margin-inline: auto;
 }
 .rs-menu--collapsed .rs-menu__list--nested {
   display: none;
 }
 .rs-menu__flyout {
+  position: fixed;
   z-index: var(--rs-z-dropdown);
-  min-width: 10rem;
-  max-width: min(16rem, 90vw);
-  padding: 0.25rem;
+  min-width: var(--rs-menu-flyout-min-width);
+  max-width: min(var(--rs-menu-flyout-max-width), 90vw);
+  padding: var(--rs-menu-flyout-pad);
   border-radius: var(--rs-radius-sm);
   border: 1px solid var(--rs-border);
   background: var(--rs-surface-elevated);
   box-shadow: var(--rs-shadow);
   outline: none;
+  box-sizing: border-box;
 }
 .rs-menu__flyout-title {
   display: block;
-  padding: 0.375rem 0.5rem 0.25rem;
-  margin-bottom: 0.125rem;
+  padding: var(--rs-space-xs) var(--rs-menu-item-pad-inline);
+  margin-bottom: calc(var(--rs-space-xs) / 2);
   border-bottom: 1px solid var(--rs-border);
   font-size: var(--rs-font-size-xs);
   font-weight: var(--rs-font-weight-semibold);
-  color: var(--rs-muted);
+  color: var(--rs-menu-group-label-fg);
   letter-spacing: 0.04em;
   line-height: var(--rs-line-height-tight);
   user-select: none;
@@ -111,7 +137,7 @@
 .rs-menu__flyout .rs-menu__list--nested {
   display: flex;
 }
-.rs-menu__item:hover:not(:disabled):not(.rs-menu__item--active) {
+.rs-menu__item:hover:not(:disabled):not([aria-disabled='true']):not(.rs-menu__item--active) {
   color: var(--rs-menu-item-fg-hover);
   background: var(--rs-menu-item-bg-hover);
 }
@@ -124,7 +150,6 @@
   background: var(--rs-menu-item-active-bg);
   font-weight: var(--rs-menu-item-active-weight);
 }
-/* 子菜单选中时父级仅字体高亮，不加背景 */
 .rs-menu__item--active-parent {
   color: var(--rs-menu-item-active-parent-fg);
   background: var(--rs-menu-item-active-parent-bg);
@@ -134,11 +159,11 @@
   color: var(--rs-menu-item-active-parent-fg);
   background: var(--rs-menu-item-bg-hover);
 }
-.rs-menu__item:disabled {
-  opacity: 0.38;
+.rs-menu__item:disabled,
+.rs-menu__item[aria-disabled='true'] {
+  opacity: var(--rs-menu-disabled-opacity);
   cursor: not-allowed;
 }
-/** 固定图标列宽：有/无图标时文案起点一致，嵌套缩进再叠在左侧 padding 上 */
 .rs-menu__icon-slot {
   display: inline-flex;
   flex-shrink: 0;
@@ -157,9 +182,15 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.rs-menu__extra {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  font-size: var(--rs-font-size-xs);
+  color: var(--rs-text-tertiary);
+}
 .rs-menu__submenu-arrow {
   flex-shrink: 0;
-  color: var(--rs-muted);
+  color: var(--rs-menu-arrow-fg);
   transition: transform var(--rs-transition-fast);
 }
 .rs-menu__item--submenu-trigger[data-state='open'] .rs-menu__submenu-arrow {
@@ -169,7 +200,7 @@
   overflow: hidden;
 }
 .rs-menu__list--nested {
-  margin-top: 0.125rem;
+  margin-top: calc(var(--rs-space-xs) / 2);
 }
 .rs-menu--horizontal > .rs-menu__root-list > .rs-menu__group > .rs-menu__group-label {
   display: none;
@@ -178,15 +209,15 @@
   margin-top: 0;
   flex-direction: row;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--rs-space-xs);
 }
 .rs-menu--horizontal .rs-menu__entry--submenu .rs-menu__submenu {
   position: absolute;
-  top: calc(100% + 0.25rem);
+  top: calc(100% + var(--rs-space-xs));
   inset-inline-start: 0;
   z-index: var(--rs-z-dropdown);
-  min-width: 10rem;
-  padding: 0.25rem;
+  min-width: var(--rs-menu-flyout-min-width);
+  padding: var(--rs-menu-flyout-pad);
   border-radius: var(--rs-radius-sm);
   border: 1px solid var(--rs-border);
   background: var(--rs-surface-elevated);
@@ -198,3 +229,13 @@
   flex-wrap: nowrap;
   margin-top: 0;
 }
+[data-rs-dir='rtl'] .rs-menu__item--submenu-trigger[data-state='open'] .rs-menu__submenu-arrow,
+[dir='rtl'] .rs-menu__item--submenu-trigger[data-state='open'] .rs-menu__submenu-arrow {
+  transform: rotate(-180deg);
+}
+@media (prefers-reduced-motion: reduce) {
+.rs-menu__item,
+  .rs-menu__submenu-arrow {
+    transition: none;
+}
+}

package/dist/components/menu/src/RsMenu.d.ts

@@ -1,28 +1,82 @@
-import { type RsMenuItems as RsMenuData } from './menu-utils';
+import { type RsComponentSize, type RsRadius } from '../../../theme/types';
+import { type RsMenuExpose, type RsMenuGetPopupContainer, type RsMenuItem, type RsMenuItems as RsMenuData, type RsMenuMode, type RsMenuTriggerAction } from './menu-utils';
+export type { RsMenuExpose, RsMenuGetPopupContainer, RsMenuItem, RsMenuItemGroup, RsMenuItemSlot, RsMenuItems, RsMenuInstance, RsMenuMode, RsMenuTriggerAction, } from './menu-utils';
 type __VLS_Props = {
     items: RsMenuData;
-    mode?: 'vertical' | 'horizontal';
+    mode?: RsMenuMode;
     collapsed?: boolean;
     /** 选中叶子时是否同时高亮祖先父级（仅字体色，无背景）；默认 false 只高亮叶子 */
     highlightParent?: boolean;
+    /** 同层只展开一个子菜单 */
+    accordion?: boolean;
+    /** 水平子菜单展开方式；垂直内联仍是点击。默认 click，兼容原行为。 */
+    triggerSubMenuAction?: RsMenuTriggerAction;
+    size?: RsComponentSize;
+    radius?: RsRadius;
+    /** 垂直缩进（px），写入 --rs-menu-indent。未传走 token。 */
+    indent?: number;
+    ariaLabel?: string;
+    id?: string;
+    getPopupContainer?: RsMenuGetPopupContainer;
 };
 type __VLS_ModelProps = {
     modelValue?: string;
     'openKeys'?: string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_12: {
+    item: RsMenuItem;
+    active: boolean;
+    parentActive: boolean;
+    open: boolean;
+    collapsed: boolean;
+    depth: number;
+}, __VLS_15: {
+    item: RsMenuItem;
+    active: boolean;
+    parentActive: boolean;
+    open: boolean;
+    collapsed: boolean;
+    depth: number;
+}, __VLS_18: {
+    item: RsMenuItem;
+    active: boolean;
+    parentActive: boolean;
+    open: boolean;
+    collapsed: boolean;
+    depth: number;
+};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_12) => any;
+} & {
+    icon?: (props: typeof __VLS_15) => any;
+} & {
+    extra?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsMenuExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (key: string) => any;
+    click: (item: RsMenuItem, event: MouseEvent) => any;
     "update:modelValue": (value: string | undefined) => any;
+    openChange: (keys: string[]) => any;
     "update:openKeys": (value: string[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((key: string) => any) | undefined;
+    onClick?: ((item: RsMenuItem, event: MouseEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    onOpenChange?: ((keys: string[]) => any) | undefined;
     "onUpdate:openKeys"?: ((value: string[]) => any) | undefined;
 }>, {
-    mode: "vertical" | "horizontal";
+    mode: RsMenuMode;
     collapsed: boolean;
     highlightParent: boolean;
+    triggerSubMenuAction: RsMenuTriggerAction;
+    accordion: 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/menu/src/RsMenu.impl.js

@@ -1,19 +1,19 @@
+import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
 import { useRsI18n } from "../../../composables/useRsI18n.js";
-import { findMenuParentKeys, isMenuItemGroup } from "./menu-utils.js";
+import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import { rsRadiusCss, useResolvedRsRadius } from "../../_shared/src/resolve-radius.js";
+import { findMenuParentKeys, mergeOpenKeysWithParents, partitionMenuEntries, toggleMenuOpenKeys } from "./menu-utils.js";
 import RsMenuItems_default from "./RsMenuItems.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, watch } from "vue";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx } from "vue";
 //#region src/components/menu/src/RsMenu.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-label"];
+var _hoisted_1 = ["id", "aria-label"];
 var _hoisted_2 = { class: "rs-menu__root-list" };
 var _hoisted_3 = {
-	key: 0,
-	class: "rs-menu__group"
-};
-var _hoisted_4 = {
 	key: 0,
 	class: "rs-menu__group-label"
 };
 var RsMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsMenu",
 	__name: "RsMenu",
 	props: /*@__PURE__*/ mergeModels({
 		items: {},
@@ -25,82 +25,129 @@ var RsMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		highlightParent: {
 			type: Boolean,
 			default: false
-		}
+		},
+		accordion: {
+			type: Boolean,
+			default: false
+		},
+		triggerSubMenuAction: { default: "click" },
+		size: {},
+		radius: {},
+		indent: {},
+		ariaLabel: {},
+		id: {},
+		getPopupContainer: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {},
 		"openKeys": { default: () => [] },
 		"openKeysModifiers": {}
 	}),
-	emits: /*@__PURE__*/ mergeModels(["select"], ["update:modelValue", "update:openKeys"]),
-	setup(__props, { emit: __emit }) {
+	emits: /*@__PURE__*/ mergeModels([
+		"select",
+		"click",
+		"openChange"
+	], ["update:modelValue", "update:openKeys"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const model = useModel(__props, "modelValue");
 		const openKeys = useModel(__props, "openKeys");
 		const props = __props;
 		const emit = __emit;
 		const { t } = useRsI18n();
+		const rootRef = useTemplateRef("rootRef");
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const resolvedRadius = useResolvedRsRadius(() => props.radius, "sm");
+		const iconSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value]);
 		/** collapsed 仅对垂直模式生效；水平模式忽略，避免空气泡子菜单 */
 		const isCollapsedVertical = computed(() => props.mode === "vertical" && props.collapsed);
+		const navLabel = computed(() => props.ariaLabel || t("menu.label"));
+		const renderBlocks = computed(() => partitionMenuEntries(props.items));
+		const rootStyle = computed(() => ({
+			"--rs-menu-item-radius": rsRadiusCss(resolvedRadius.value),
+			...props.indent != null ? { "--rs-menu-indent": `${Math.max(0, props.indent)}px` } : {}
+		}));
 		function onSelect(key) {
 			model.value = key;
 			emit("select", key);
 		}
 		function onToggleOpen(key, open) {
-			const next = new Set(openKeys.value);
-			if (open) next.add(key);
-			else next.delete(key);
-			openKeys.value = [...next];
+			const next = toggleMenuOpenKeys(openKeys.value, key, open, props.items, props.accordion);
+			if (next.length === openKeys.value.length && next.every((item, index) => item === openKeys.value[index])) return;
+			openKeys.value = next;
+			emit("openChange", next);
 		}
 		watch(() => model.value, (key) => {
 			if (!key) return;
 			const parents = findMenuParentKeys(props.items, key);
-			if (!parents.length) return;
-			const next = new Set(openKeys.value);
-			for (const parentKey of parents) next.add(parentKey);
-			openKeys.value = [...next];
+			const next = mergeOpenKeysWithParents(openKeys.value, parents);
+			if (next === openKeys.value) return;
+			openKeys.value = next;
 		}, { immediate: true });
+		__expose({
+			focus() {
+				(rootRef.value?.querySelector(".rs-menu__item:not(:disabled):not([aria-disabled=\"true\"])"))?.focus();
+			},
+			blur() {
+				(rootRef.value?.querySelector(".rs-menu__item:focus"))?.blur();
+			}
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("nav", {
-				class: normalizeClass(["rs-menu", [`rs-menu--${__props.mode}`, { "rs-menu--collapsed": isCollapsedVertical.value }]]),
-				"aria-label": unref(t)("menu.label")
-			}, [createElementVNode("ul", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (entry, index) => {
-				return openBlock(), createElementBlock(Fragment, { key: index }, [unref(isMenuItemGroup)(entry) ? (openBlock(), createElementBlock("li", _hoisted_3, [!isCollapsedVertical.value ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(entry.label), 1)) : createCommentVNode("", true), createVNode(RsMenuItems_default, {
-					items: entry.children,
-					"active-key": model.value,
-					"open-keys": openKeys.value,
-					collapsed: isCollapsedVertical.value,
-					mode: __props.mode,
-					"highlight-parent": __props.highlightParent,
-					onSelect,
-					onToggleOpen
-				}, null, 8, [
-					"items",
-					"active-key",
-					"open-keys",
-					"collapsed",
-					"mode",
-					"highlight-parent"
-				])])) : (openBlock(), createElementBlock("li", {
-					key: entry.key,
-					class: "rs-menu__group rs-menu__group--plain"
-				}, [createVNode(RsMenuItems_default, {
-					items: [entry],
+				id: __props.id,
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(["rs-menu", [
+					`rs-menu--${__props.mode}`,
+					`rs-menu--${unref(resolvedSize)}`,
+					{ "rs-menu--collapsed": isCollapsedVertical.value }
+				]]),
+				style: normalizeStyle(rootStyle.value),
+				"aria-label": navLabel.value
+			}, [createElementVNode("ul", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(renderBlocks.value, (block) => {
+				return openBlock(), createElementBlock("li", {
+					key: block.key,
+					class: normalizeClass(["rs-menu__group", { "rs-menu__group--plain": block.type === "items" }])
+				}, [block.type === "group" && !isCollapsedVertical.value ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(block.entry.label), 1)) : createCommentVNode("", true), createVNode(RsMenuItems_default, {
+					items: block.type === "group" ? block.entry.children : block.items,
 					"active-key": model.value,
 					"open-keys": openKeys.value,
 					collapsed: isCollapsedVertical.value,
 					mode: __props.mode,
 					"highlight-parent": __props.highlightParent,
+					"trigger-sub-menu-action": __props.triggerSubMenuAction,
+					"icon-size": iconSize.value,
+					"get-popup-container": __props.getPopupContainer,
 					onSelect,
+					onClick: _cache[0] || (_cache[0] = (item, event) => emit("click", item, event)),
 					onToggleOpen
-				}, null, 8, [
+				}, createSlots({ _: 2 }, [
+					_ctx.$slots.item ? {
+						name: "item",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, slotProps))]),
+						key: "0"
+					} : void 0,
+					_ctx.$slots.icon ? {
+						name: "icon",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "icon", mergeProps({ ref_for: true }, slotProps))]),
+						key: "1"
+					} : void 0,
+					_ctx.$slots.extra ? {
+						name: "extra",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "extra", mergeProps({ ref_for: true }, slotProps))]),
+						key: "2"
+					} : void 0
+				]), 1032, [
 					"items",
 					"active-key",
 					"open-keys",
 					"collapsed",
 					"mode",
-					"highlight-parent"
-				])]))], 64);
-			}), 128))])], 10, _hoisted_1);
+					"highlight-parent",
+					"trigger-sub-menu-action",
+					"icon-size",
+					"get-popup-container"
+				])], 2);
+			}), 128))])], 14, _hoisted_1);
 		};
 	}
 });

package/dist/components/menu/src/RsMenuItems.d.ts

@@ -1,25 +1,42 @@
-import { type RsMenuItem } from './menu-utils';
+import { type RsMenuGetPopupContainer, type RsMenuItem, type RsMenuItemSlot, type RsMenuMode, type RsMenuTriggerAction } from './menu-utils';
 type __VLS_Props = {
     items: RsMenuItem[];
     activeKey?: string;
     openKeys: string[];
     collapsed?: boolean;
-    mode?: 'vertical' | 'horizontal';
+    mode?: RsMenuMode;
     depth?: number;
-    /** 选中叶子时是否同时高亮祖先父级（仅字体色，无背景） */
     highlightParent?: boolean;
+    triggerSubMenuAction?: RsMenuTriggerAction;
+    iconSize?: number;
+    getPopupContainer?: RsMenuGetPopupContainer;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_Slots = {
+    item?: (props: RsMenuItemSlot) => unknown;
+    icon?: (props: RsMenuItemSlot) => unknown;
+    extra?: (props: RsMenuItemSlot) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (key: string) => any;
+    click: (item: RsMenuItem, event: MouseEvent) => any;
     "toggle-open": (key: string, open: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((key: string) => any) | undefined;
+    onClick?: ((item: RsMenuItem, event: MouseEvent) => any) | undefined;
     "onToggle-open"?: ((key: string, open: boolean) => any) | undefined;
 }>, {
-    mode: "vertical" | "horizontal";
+    mode: RsMenuMode;
+    iconSize: number;
     collapsed: boolean;
     depth: number;
     highlightParent: boolean;
+    triggerSubMenuAction: RsMenuTriggerAction;
 }, {}, {}, {}, 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;
+    };
+};