niuma-ui 1.1.12 → 1.2.0

package/dist/components/RsDrawer.impl.js

@@ -0,0 +1,497 @@
+import { useRsI18n } from "../composables/useRsI18n.js";
+import RsButton_default from "./RsButton.js";
+import { DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from "./reka.js";
+import { RS_DRAWER_MAX_VIEWPORT_RATIO, clampRsDrawerSize, resolveDrawerOverlayStyle, resolveRsDrawerDimensionCss, resolveRsDrawerSizeCss, resolveRsDrawerSizePx, runRsDrawerBeforeClose } from "./drawer-utils.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, toDisplayString, unref, useModel, watch, withCtx } from "vue";
+//#region src/components/RsDrawer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"aria-label",
+	"aria-orientation",
+	"aria-valuenow"
+];
+var _hoisted_2 = {
+	key: 1,
+	class: "rs-drawer__header"
+};
+var _hoisted_3 = { class: "rs-drawer__heading" };
+var _hoisted_4 = { class: "rs-drawer__body" };
+var _hoisted_5 = {
+	key: 4,
+	class: "rs-drawer__footer"
+};
+var RsDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "RsDrawer",
+	props: /*@__PURE__*/ mergeModels({
+		title: { default: "" },
+		description: {},
+		side: { default: "right" },
+		size: { default: "md" },
+		width: {},
+		height: {},
+		resizable: {
+			type: Boolean,
+			default: true
+		},
+		minSize: {},
+		maxSize: {},
+		modal: { type: Boolean },
+		showOverlay: {
+			type: Boolean,
+			default: true
+		},
+		overlayOpacity: {},
+		overlayBlur: {},
+		showClose: {
+			type: Boolean,
+			default: true
+		},
+		closeOnOverlayClick: {
+			type: Boolean,
+			default: true
+		},
+		closeOnEsc: {
+			type: Boolean,
+			default: true
+		},
+		teleportTo: { type: [String, Boolean] },
+		beforeClose: {}
+	}, {
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"openChange",
+		"afterOpen",
+		"afterClose",
+		"resize",
+		"update:width",
+		"update:height"
+	], ["update:open"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const open = useModel(__props, "open");
+		const props = __props;
+		const emit = __emit;
+		const { t } = useRsI18n();
+		/** 挂到自定义容器或就地渲染时按 contained 模式定位，避免盖住布局顶栏 */
+		const contained = computed(() => props.teleportTo !== void 0);
+		/** 未显式传 modal 时：有遮罩=模态，无遮罩=可点背后 */
+		const isModal = computed(() => props.modal ?? props.showOverlay);
+		const overlayStyle = computed(() => resolveDrawerOverlayStyle({
+			overlayOpacity: props.overlayOpacity,
+			overlayBlur: props.overlayBlur
+		}));
+		const isHorizontal = computed(() => props.side === "left" || props.side === "right");
+		const enableResizable = computed(() => props.resizable && props.size !== "full");
+		/** 本次打开后拖拽得到的像素尺寸；关闭时清空，回到 size/width/height */
+		const liveSizePx = ref(void 0);
+		const resizing = ref(false);
+		const contentRef = ref(null);
+		const panelSizeCss = computed(() => {
+			if (liveSizePx.value != null) return `${liveSizePx.value}px`;
+			if (isHorizontal.value) return resolveRsDrawerDimensionCss(props.width) ?? resolveRsDrawerSizeCss(props.size) ?? void 0;
+			return resolveRsDrawerDimensionCss(props.height) ?? resolveRsDrawerSizeCss(props.size) ?? void 0;
+		});
+		const contentStyle = computed(() => {
+			const style = {};
+			const size = panelSizeCss.value;
+			if (size && props.size !== "full") style["--rs-drawer-panel-size"] = size;
+			if (liveSizePx.value != null && props.size !== "full") if (isHorizontal.value) style.width = `${liveSizePx.value}px`;
+			else style.height = `${liveSizePx.value}px`;
+			if (props.side === "right") {
+				style.left = "auto";
+				style.right = "0";
+				style.top = "0";
+				style.bottom = "0";
+				style.height = "100%";
+				style.maxHeight = "none";
+				style.transform = "none";
+			} else if (props.side === "left") {
+				style.left = "0";
+				style.right = "auto";
+				style.top = "0";
+				style.bottom = "0";
+				style.height = "100%";
+				style.maxHeight = "none";
+				style.transform = "none";
+			} else if (props.side === "top") {
+				style.left = "0";
+				style.right = "0";
+				style.top = "0";
+				style.bottom = "auto";
+				style.width = "100%";
+				style.maxWidth = "none";
+				style.transform = "none";
+			} else if (props.side === "bottom") {
+				style.left = "0";
+				style.right = "0";
+				style.top = "auto";
+				style.bottom = "0";
+				style.width = "100%";
+				style.maxWidth = "none";
+				style.transform = "none";
+			}
+			return Object.keys(style).length ? style : void 0;
+		});
+		const contentClass = computed(() => [
+			`rs-drawer__content--${props.side}`,
+			`rs-drawer__content--${props.size}`,
+			{
+				"rs-drawer__content--contained": contained.value,
+				"rs-drawer__content--custom-size": Boolean(panelSizeCss.value) && props.size !== "full",
+				"rs-drawer__content--resizable": enableResizable.value,
+				"rs-drawer__content--resizing": resizing.value
+			}
+		]);
+		const closing = ref(false);
+		let pendingCloseReason = "programmatic";
+		let afterOpenTimer = 0;
+		/** 跟踪当前按下指针数，用于判断打开是否发生在手势中途 */
+		let pointersDown = 0;
+		let pointerTrackingBound = false;
+		function ensurePointerTracking() {
+			if (pointerTrackingBound || typeof window === "undefined") return;
+			pointerTrackingBound = true;
+			window.addEventListener("pointerdown", () => {
+				pointersDown += 1;
+			}, true);
+			window.addEventListener("pointerup", () => {
+				pointersDown = Math.max(0, pointersDown - 1);
+			}, true);
+			window.addEventListener("pointercancel", () => {
+				pointersDown = Math.max(0, pointersDown - 1);
+			}, true);
+		}
+		/**
+		* 打开若发生在 pointer 按下期间（或同轮事件冒泡中），抑制 outside dismiss，
+		* 直到指针抬起，并再刷一次 macrotask（吞掉打开点击残留的 outside）。
+		* 不使用固定毫秒锁，避免拖慢正常点遮罩关闭。
+		*/
+		const suppressOutsideUntilGestureEnd = ref(false);
+		let gestureReleaseBound = false;
+		let gestureMacrotaskTimer = 0;
+		function releaseOutsideSuppress() {
+			suppressOutsideUntilGestureEnd.value = false;
+			if (gestureMacrotaskTimer) {
+				window.clearTimeout(gestureMacrotaskTimer);
+				gestureMacrotaskTimer = 0;
+			}
+			if (!gestureReleaseBound) return;
+			gestureReleaseBound = false;
+			window.removeEventListener("pointerup", onGesturePointerRelease, true);
+			window.removeEventListener("pointercancel", onGesturePointerRelease, true);
+		}
+		function onGesturePointerRelease() {
+			if (pointersDown > 0) return;
+			if (gestureMacrotaskTimer) window.clearTimeout(gestureMacrotaskTimer);
+			gestureMacrotaskTimer = window.setTimeout(() => {
+				gestureMacrotaskTimer = 0;
+				releaseOutsideSuppress();
+			}, 0);
+		}
+		function armOutsideSuppressForOpenGesture() {
+			ensurePointerTracking();
+			releaseOutsideSuppress();
+			suppressOutsideUntilGestureEnd.value = true;
+			if (pointersDown > 0) {
+				gestureReleaseBound = true;
+				window.addEventListener("pointerup", onGesturePointerRelease, true);
+				window.addEventListener("pointercancel", onGesturePointerRelease, true);
+				return;
+			}
+			gestureMacrotaskTimer = window.setTimeout(() => {
+				gestureMacrotaskTimer = 0;
+				releaseOutsideSuppress();
+			}, 0);
+		}
+		function clearAfterOpenTimer() {
+			if (!afterOpenTimer) return;
+			window.clearTimeout(afterOpenTimer);
+			afterOpenTimer = 0;
+		}
+		function queueAfterOpen() {
+			clearAfterOpenTimer();
+			afterOpenTimer = window.setTimeout(() => {
+				afterOpenTimer = 0;
+				if (open.value) emit("afterOpen");
+			}, 280);
+		}
+		watch(open, (isOpen, wasOpen) => {
+			if (isOpen && !wasOpen) {
+				armOutsideSuppressForOpenGesture();
+				emit("openChange", true);
+				queueAfterOpen();
+				return;
+			}
+			if (!isOpen && wasOpen) {
+				liveSizePx.value = void 0;
+				stopResize();
+				releaseOutsideSuppress();
+				clearAfterOpenTimer();
+				emit("openChange", false);
+				if (!closing.value) emit("afterClose", "programmatic");
+			}
+		});
+		onBeforeUnmount(() => {
+			stopResize();
+			releaseOutsideSuppress();
+			clearAfterOpenTimer();
+		});
+		async function requestClose(reason) {
+			if (!open.value || closing.value) return false;
+			closing.value = true;
+			pendingCloseReason = reason;
+			try {
+				if (!await runRsDrawerBeforeClose(props.beforeClose, reason)) return false;
+				open.value = false;
+				await nextTick();
+				emit("afterClose", reason);
+				return true;
+			} finally {
+				closing.value = false;
+			}
+		}
+		/** DialogRoot 受控更新：打开直通；关闭统一走 beforeClose */
+		async function onUpdateOpen(next) {
+			if (next) {
+				open.value = true;
+				return;
+			}
+			await requestClose(pendingCloseReason);
+			pendingCloseReason = "programmatic";
+		}
+		function onEscapeKeyDown(event) {
+			if (!props.closeOnEsc) {
+				event.preventDefault();
+				return;
+			}
+			pendingCloseReason = "escape";
+		}
+		function shouldBlockOutsideDismiss() {
+			return !props.closeOnOverlayClick || suppressOutsideUntilGestureEnd.value || resizing.value;
+		}
+		function onPointerDownOutside(event) {
+			if (shouldBlockOutsideDismiss()) {
+				event.preventDefault();
+				return;
+			}
+			pendingCloseReason = "overlay";
+		}
+		function onInteractOutside(event) {
+			if (shouldBlockOutsideDismiss()) {
+				event.preventDefault();
+				return;
+			}
+			pendingCloseReason = "overlay";
+		}
+		function onFocusOutside(event) {
+			event.preventDefault();
+		}
+		async function onHeaderCloseClick() {
+			await requestClose("close");
+		}
+		function resolveContentEl() {
+			const inst = contentRef.value;
+			if (!inst) return null;
+			if (inst instanceof HTMLElement) return inst;
+			const el = inst.$el;
+			return el instanceof HTMLElement ? el : null;
+		}
+		function rootFontPx() {
+			const raw = getComputedStyle(document.documentElement).fontSize;
+			const n = Number.parseFloat(raw);
+			return Number.isFinite(n) && n > 0 ? n : 16;
+		}
+		function viewportPx() {
+			return isHorizontal.value ? window.innerWidth : window.innerHeight;
+		}
+		function sizeBounds() {
+			const vp = viewportPx();
+			const root = rootFontPx();
+			return {
+				min: resolveRsDrawerSizePx(props.minSize, 256, root, vp),
+				max: resolveRsDrawerSizePx(props.maxSize, Math.round(vp * RS_DRAWER_MAX_VIEWPORT_RATIO), root, vp)
+			};
+		}
+		function applyLiveSize(px) {
+			const { min, max } = sizeBounds();
+			const next = clampRsDrawerSize(px, min, max);
+			const el = resolveContentEl();
+			if (el) {
+				el.style.setProperty("--rs-drawer-panel-size", `${next}px`);
+				if (isHorizontal.value) el.style.width = `${next}px`;
+				else el.style.height = `${next}px`;
+			}
+			return next;
+		}
+		let resizePointerId = null;
+		let resizeStartClient = 0;
+		let resizeStartSize = 0;
+		function stopResize() {
+			if (resizePointerId != null) {
+				window.removeEventListener("pointermove", onResizePointerMove);
+				window.removeEventListener("pointerup", onResizePointerUp);
+				window.removeEventListener("pointercancel", onResizePointerUp);
+				resizePointerId = null;
+			}
+			resizing.value = false;
+			document.body.style.removeProperty("cursor");
+			document.body.style.removeProperty("user-select");
+		}
+		function currentPanelPx() {
+			const el = resolveContentEl();
+			if (!el) return 256;
+			const rect = el.getBoundingClientRect();
+			return isHorizontal.value ? rect.width : rect.height;
+		}
+		function onResizePointerDown(event) {
+			if (!enableResizable.value || event.button !== 0) return;
+			event.preventDefault();
+			event.stopPropagation();
+			resizeStartClient = isHorizontal.value ? event.clientX : event.clientY;
+			resizeStartSize = currentPanelPx();
+			resizePointerId = event.pointerId;
+			resizing.value = true;
+			document.body.style.cursor = isHorizontal.value ? "ew-resize" : "ns-resize";
+			document.body.style.userSelect = "none";
+			window.addEventListener("pointermove", onResizePointerMove);
+			window.addEventListener("pointerup", onResizePointerUp);
+			window.addEventListener("pointercancel", onResizePointerUp);
+		}
+		function deltaForPointer(event) {
+			const raw = (isHorizontal.value ? event.clientX : event.clientY) - resizeStartClient;
+			if (props.side === "right" || props.side === "bottom") return -raw;
+			return raw;
+		}
+		function onResizePointerMove(event) {
+			if (resizePointerId == null || event.pointerId !== resizePointerId) return;
+			const next = applyLiveSize(resizeStartSize + deltaForPointer(event));
+			emit("resize", next);
+		}
+		function commitResize(next) {
+			liveSizePx.value = next;
+			emit("resize", next);
+			if (isHorizontal.value) emit("update:width", next);
+			else emit("update:height", next);
+		}
+		function onResizePointerUp(event) {
+			if (resizePointerId == null || event.pointerId !== resizePointerId) return;
+			const next = applyLiveSize(resizeStartSize + deltaForPointer(event));
+			stopResize();
+			commitResize(next);
+		}
+		function onResizeKeydown(event) {
+			if (!enableResizable.value) return;
+			const step = event.shiftKey ? 48 : 16;
+			let delta = 0;
+			if (props.side === "right") {
+				if (event.key === "ArrowLeft") delta = step;
+				else if (event.key === "ArrowRight") delta = -step;
+			} else if (props.side === "left") {
+				if (event.key === "ArrowRight") delta = step;
+				else if (event.key === "ArrowLeft") delta = -step;
+			} else if (props.side === "top") {
+				if (event.key === "ArrowDown") delta = step;
+				else if (event.key === "ArrowUp") delta = -step;
+			} else if (props.side === "bottom") {
+				if (event.key === "ArrowUp") delta = step;
+				else if (event.key === "ArrowDown") delta = -step;
+			}
+			if (!delta) return;
+			event.preventDefault();
+			commitResize(applyLiveSize(currentPanelPx() + delta));
+		}
+		__expose({
+			/** 请求关闭（走 beforeClose） */
+			close: (reason = "programmatic") => requestClose(reason),
+			/** 打开抽屉 */
+			openDrawer: () => {
+				open.value = true;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DialogRoot), {
+				open: open.value,
+				modal: isModal.value,
+				"onUpdate:open": onUpdateOpen
+			}, {
+				default: withCtx(() => [createVNode(unref(DialogPortal), {
+					disabled: __props.teleportTo === false,
+					to: __props.teleportTo === false ? void 0 : __props.teleportTo
+				}, {
+					default: withCtx(() => [__props.showOverlay ? (openBlock(), createBlock(unref(DialogOverlay), {
+						key: 0,
+						class: normalizeClass(["rs-drawer__overlay rs-motion-reduce", { "rs-drawer__overlay--contained": contained.value }]),
+						style: normalizeStyle(overlayStyle.value)
+					}, null, 8, ["class", "style"])) : createCommentVNode("", true), createVNode(unref(DialogContent), {
+						ref_key: "contentRef",
+						ref: contentRef,
+						class: normalizeClass(["rs-drawer__content rs-motion-reduce", contentClass.value]),
+						style: normalizeStyle(contentStyle.value),
+						onPointerDownOutside,
+						onInteractOutside,
+						onFocusOutside,
+						onEscapeKeyDown
+					}, {
+						default: withCtx(() => [
+							enableResizable.value ? (openBlock(), createElementBlock("button", {
+								key: 0,
+								type: "button",
+								class: "rs-drawer__resize",
+								"aria-label": unref(t)("drawer.resize"),
+								"aria-orientation": isHorizontal.value ? "vertical" : "horizontal",
+								"aria-valuenow": liveSizePx.value != null ? Math.round(liveSizePx.value) : void 0,
+								onPointerdown: onResizePointerDown,
+								onKeydown: onResizeKeydown
+							}, null, 40, _hoisted_1)) : createCommentVNode("", true),
+							__props.title || __props.description || __props.showClose || _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_2, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", _hoisted_3, [__props.title ? (openBlock(), createBlock(unref(DialogTitle), {
+								key: 0,
+								class: "rs-drawer__title"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(__props.title), 1)]),
+								_: 1
+							})) : createCommentVNode("", true), __props.description ? (openBlock(), createBlock(unref(DialogDescription), {
+								key: 1,
+								class: "rs-drawer__description"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(__props.description), 1)]),
+								_: 1
+							})) : createCommentVNode("", true)])]), __props.showClose ? (openBlock(), createBlock(RsButton_default, {
+								key: 0,
+								variant: "ghost",
+								size: "sm",
+								icon: "x",
+								tooltip: unref(t)("dialog.close"),
+								onClick: onHeaderCloseClick
+							}, null, 8, ["tooltip"])) : createCommentVNode("", true)])) : createCommentVNode("", true),
+							_ctx.$slots.header || !__props.title ? (openBlock(), createBlock(unref(DialogTitle), {
+								key: 2,
+								class: "rs-drawer__title rs-drawer__title--sr-only"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(__props.title || " "), 1)]),
+								_: 1
+							})) : createCommentVNode("", true),
+							!__props.description || _ctx.$slots.header ? (openBlock(), createBlock(unref(DialogDescription), {
+								key: 3,
+								class: "rs-drawer__description rs-drawer__description--sr-only"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(__props.description || __props.title || " "), 1)]),
+								_: 1
+							})) : createCommentVNode("", true),
+							createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")]),
+							_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_5, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
+						]),
+						_: 3
+					}, 8, ["class", "style"])]),
+					_: 3
+				}, 8, ["disabled", "to"])]),
+				_: 3
+			}, 8, ["open", "modal"]);
+		};
+	}
+});
+//#endregion
+export { RsDrawer_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/RsDrawer.js

@@ -0,0 +1,7 @@
+import './RsDrawer.css'
+import RsDrawer_vue_vue_type_script_setup_true_lang_default from "./RsDrawer.impl.js";
+
+//#region src/components/RsDrawer.vue
+var RsDrawer_default = RsDrawer_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RsDrawer_default as default };

package/dist/components/RsDropdown.css

@@ -0,0 +1,157 @@
+
+/* Dropdown 为浮层菜单，样式独立于 RsSelect 列表，对齐 RsContextMenu / 设计规范 */
+.rs-dropdown {
+  display: inline-block;
+  min-width: 10rem;
+}
+.rs-dropdown--action {
+  min-width: auto;
+}
+
+/* 自定义 #trigger：不套默认输入框铬边，由业务控制外观 */
+.rs-dropdown__trigger-slot {
+  display: inline-flex;
+  max-width: 100%;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  cursor: pointer;
+}
+.rs-dropdown__trigger-slot[data-disabled] {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+.rs-dropdown__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rs-space-sm);
+  width: 100%;
+  min-height: var(--rs-control-height-md);
+  padding: 0 var(--rs-space-md);
+  border-radius: var(--rs-radius-sm);
+  border: 1px solid var(--rs-input-border, var(--rs-border));
+  background: var(--rs-input-bg);
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-normal);
+  cursor: pointer;
+  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-dropdown__trigger:hover:not([data-disabled]) {
+  border-color: var(--rs-input-border-hover, var(--rs-border));
+}
+.rs-dropdown__trigger:focus-visible {
+  outline: none;
+  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-dropdown__trigger[data-disabled] {
+  opacity: 0.38;
+  cursor: not-allowed;
+  background: var(--rs-surface-hover);
+}
+.rs-dropdown__value {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+}
+.rs-dropdown__label {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-dropdown__label--placeholder {
+  color: var(--rs-placeholder);
+}
+.rs-dropdown__icon {
+  flex-shrink: 0;
+  color: var(--rs-muted);
+}
+.rs-dropdown__content {
+  z-index: var(--rs-z-dropdown);
+  min-width: var(--reka-dropdown-menu-trigger-width);
+  padding: var(--rs-space-xs);
+  border-radius: var(--rs-radius);
+  border: 1px solid var(--rs-border);
+  background: var(--rs-surface-elevated);
+  box-shadow: var(--rs-shadow);
+  outline: none;
+  overflow: hidden;
+}
+.rs-dropdown__group + .rs-dropdown__group {
+  margin-top: var(--rs-space-md);
+  padding-top: 0;
+  border-top: 1px solid var(--rs-border-subtle);
+}
+.rs-dropdown__group-label {
+  display: block;
+  padding: 0.375rem var(--rs-space-md) 0.125rem;
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-semibold);
+  color: var(--rs-muted);
+  letter-spacing: 0.04em;
+  line-height: var(--rs-line-height-tight);
+  user-select: none;
+}
+.rs-dropdown__group + .rs-dropdown__group .rs-dropdown__group-label {
+  position: relative;
+  top: -0.55em;
+  margin-bottom: 0.125rem;
+  padding: 0 0.375rem;
+  margin-left: var(--rs-space-md);
+  width: fit-content;
+  max-width: calc(100% - var(--rs-space-md) * 2);
+  background: var(--rs-surface-elevated);
+  line-height: 1;
+}
+.rs-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-sm);
+  padding: var(--rs-space-sm) var(--rs-space-md);
+  border-radius: var(--rs-radius-sm);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
+  color: var(--rs-text);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  transition:
+    background var(--rs-transition-fast),
+    color var(--rs-transition-fast);
+}
+.rs-dropdown__item-icon {
+  flex-shrink: 0;
+  color: var(--rs-muted);
+}
+.rs-dropdown__item-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-dropdown__item[data-highlighted] {
+  background: var(--rs-item-hover);
+}
+.rs-dropdown__item[data-state='checked'] {
+  color: var(--rs-primary);
+  background: color-mix(in srgb, var(--rs-primary) 12%, transparent);
+}
+.rs-dropdown__item[data-disabled] {
+  opacity: 0.38;
+  cursor: not-allowed;
+}

package/dist/components/RsDropdown.d.ts

@@ -0,0 +1,34 @@
+import { type RsDropdownItems as RsDropdownData } from './dropdown-utils';
+type __VLS_Props = {
+    items: RsDropdownData;
+    placeholder?: string;
+    disabled?: boolean;
+    /** 选中后是否在触发器回显选项 label；false 时固定显示 placeholder（操作菜单） */
+    showSelected?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (value: string) => any;
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    showSelected: 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;
+    };
+};