niuma-ui 1.3.8 → 2.0.0

package/dist/components/dialog/src/dialog-window.js

@@ -0,0 +1,276 @@
+import { dialogViewportSize, readDialogViewportInsets } from "./dialog-viewport.js";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+//#region src/components/dialog/src/dialog-window.ts
+var widthMap = {
+	sm: 384,
+	md: 448,
+	lg: 512
+};
+var defaultWidthRatio = .8;
+var defaultHeightRatio = .75;
+var minWidth = 320;
+var minHeight = 240;
+function useRsDialogWindow(options) {
+	const isFullscreen = ref(false);
+	const boundsTransitionEnabled = ref(false);
+	const bounds = ref({
+		x: 0,
+		y: 0,
+		width: widthMap.md,
+		height: minHeight
+	});
+	const restoreBounds = ref(null);
+	const resizeHandles = [
+		"n",
+		"s",
+		"e",
+		"w",
+		"ne",
+		"nw",
+		"se",
+		"sw"
+	];
+	let boundsTransitionTimer = null;
+	let cachedInsets = readDialogViewportInsets();
+	/** 交互中的目标面板；有值时 pointermove 只改 DOM，pointerup 再写回 bounds */
+	let panelEl = null;
+	let liveBounds = null;
+	let dragState = null;
+	let resizeState = null;
+	function writePanelBox(next) {
+		if (!panelEl) return;
+		panelEl.style.left = `${next.x}px`;
+		panelEl.style.top = `${next.y}px`;
+		panelEl.style.width = `${next.width}px`;
+		panelEl.style.height = `${next.height}px`;
+		panelEl.style.transform = "none";
+	}
+	/** 绑定可定位的对话框根节点（DialogContent 的 DOM） */
+	function setPanelEl(el) {
+		panelEl = el;
+	}
+	/** 优先用已绑定节点；否则从事件目标向上找面板（Reka DialogContent ref 不一定有 $el） */
+	function ensurePanelEl(from) {
+		if (panelEl?.isConnected) return panelEl;
+		const found = (from instanceof Element ? from : null)?.closest(".rs-dialog__content");
+		if (found instanceof HTMLElement) {
+			panelEl = found;
+			return found;
+		}
+		return null;
+	}
+	function defaultWindowSize() {
+		const { width: maxW, height: maxH } = dialogViewportSize();
+		const customW = options.initialWidth?.value;
+		const customH = options.initialHeight?.value;
+		return {
+			width: customW != null && Number.isFinite(customW) && customW > 0 ? Math.min(maxW, Math.max(minWidth, Math.round(customW))) : Math.min(maxW, Math.max(minWidth, Math.round(maxW * defaultWidthRatio))),
+			height: customH != null && Number.isFinite(customH) && customH > 0 ? Math.min(maxH, Math.max(minHeight, Math.round(customH))) : Math.min(maxH, Math.max(minHeight, Math.round(maxH * defaultHeightRatio)))
+		};
+	}
+	function refreshCachedInsets() {
+		cachedInsets = readDialogViewportInsets();
+	}
+	function clampBounds(next) {
+		const insets = cachedInsets;
+		const maxW = window.innerWidth - insets.left - insets.right;
+		const maxH = window.innerHeight - insets.top - insets.bottom;
+		const width = Math.min(maxW, Math.max(minWidth, next.width));
+		const height = Math.min(maxH, Math.max(minHeight, next.height));
+		return {
+			x: Math.min(window.innerWidth - width - insets.right, Math.max(insets.left, next.x)),
+			y: Math.min(window.innerHeight - height - insets.bottom, Math.max(insets.top, next.y)),
+			width,
+			height
+		};
+	}
+	function resetOnOpen() {
+		isFullscreen.value = false;
+		restoreBounds.value = null;
+		if (options.compact?.value) {
+			bounds.value = {
+				x: bounds.value.x,
+				y: bounds.value.y,
+				width: widthMap[options.widthPreset.value],
+				height: 0
+			};
+			return;
+		}
+		refreshCachedInsets();
+		const insets = cachedInsets;
+		const { width, height } = defaultWindowSize();
+		const availableH = window.innerHeight - insets.top - insets.bottom;
+		bounds.value = clampBounds({
+			x: insets.left + (window.innerWidth - insets.left - insets.right - width) / 2,
+			y: insets.top + (availableH - height) / 2,
+			width,
+			height
+		});
+	}
+	watch(options.open, (value) => {
+		if (value) resetOnOpen();
+		else {
+			stopInteractions();
+			isFullscreen.value = false;
+			restoreBounds.value = null;
+		}
+	}, { immediate: true });
+	const dialogStyle = computed(() => {
+		const insets = cachedInsets;
+		if (isFullscreen.value) return {
+			left: `${insets.left}px`,
+			top: `${insets.top}px`,
+			width: `calc(100vw - ${insets.left + insets.right}px)`,
+			height: `calc(100vh - ${insets.top + insets.bottom}px)`,
+			transform: "none"
+		};
+		if (options.compact?.value) {
+			const customW = options.initialWidth?.value;
+			const width = customW != null && Number.isFinite(customW) && customW > 0 ? customW : widthMap[options.widthPreset.value];
+			return {
+				left: "50%",
+				top: `calc(${insets.top}px + (100vh - ${insets.top + insets.bottom}px) / 2)`,
+				width: `${width}px`,
+				maxWidth: `calc(100vw - ${insets.left + insets.right}px)`,
+				height: "auto",
+				transform: "translate(-50%, -50%)"
+			};
+		}
+		const b = bounds.value;
+		return {
+			left: `${b.x}px`,
+			top: `${b.y}px`,
+			width: `${b.width}px`,
+			height: `${b.height}px`,
+			transform: "none"
+		};
+	});
+	function clearBoundsTransitionTimer() {
+		if (!boundsTransitionTimer) return;
+		clearTimeout(boundsTransitionTimer);
+		boundsTransitionTimer = null;
+	}
+	function enableBoundsTransition() {
+		boundsTransitionEnabled.value = true;
+		clearBoundsTransitionTimer();
+		boundsTransitionTimer = setTimeout(() => {
+			boundsTransitionEnabled.value = false;
+			boundsTransitionTimer = null;
+		}, 280);
+	}
+	function toggleFullscreen() {
+		refreshCachedInsets();
+		if (options.boundsTransition?.value) enableBoundsTransition();
+		if (isFullscreen.value) {
+			isFullscreen.value = false;
+			bounds.value = restoreBounds.value ? { ...restoreBounds.value } : bounds.value;
+			restoreBounds.value = null;
+			return;
+		}
+		restoreBounds.value = { ...bounds.value };
+		isFullscreen.value = true;
+	}
+	function onPointerMove(event) {
+		if (dragState) {
+			const dx = event.clientX - dragState.startX;
+			const dy = event.clientY - dragState.startY;
+			const next = clampBounds({
+				...dragState.origin,
+				x: dragState.origin.x + dx,
+				y: dragState.origin.y + dy
+			});
+			liveBounds = next;
+			writePanelBox(next);
+			return;
+		}
+		if (!resizeState) return;
+		const dx = event.clientX - resizeState.startX;
+		const dy = event.clientY - resizeState.startY;
+		const next = { ...resizeState.origin };
+		if (resizeState.handle.includes("e")) next.width = resizeState.origin.width + dx;
+		if (resizeState.handle.includes("w")) {
+			next.width = resizeState.origin.width - dx;
+			next.x = resizeState.origin.x + dx;
+		}
+		if (resizeState.handle.includes("s")) next.height = resizeState.origin.height + dy;
+		if (resizeState.handle.includes("n")) {
+			next.height = resizeState.origin.height - dy;
+			next.y = resizeState.origin.y + dy;
+		}
+		const clamped = clampBounds(next);
+		liveBounds = clamped;
+		writePanelBox(clamped);
+	}
+	function stopInteractions() {
+		if (liveBounds) {
+			bounds.value = liveBounds;
+			liveBounds = null;
+		}
+		dragState = null;
+		resizeState = null;
+		window.removeEventListener("pointermove", onPointerMove);
+		window.removeEventListener("pointerup", stopInteractions);
+		document.body.style.userSelect = "";
+		document.body.style.cursor = "";
+	}
+	function startInteraction(cursor) {
+		boundsTransitionEnabled.value = false;
+		clearBoundsTransitionTimer();
+		refreshCachedInsets();
+		liveBounds = { ...bounds.value };
+		window.addEventListener("pointermove", onPointerMove);
+		window.addEventListener("pointerup", stopInteractions);
+		document.body.style.userSelect = "none";
+		document.body.style.cursor = cursor;
+	}
+	function onHeaderPointerDown(event) {
+		if (!options.draggable.value || isFullscreen.value) return;
+		if (event.target.closest("button,a,input,textarea,select")) return;
+		event.preventDefault();
+		ensurePanelEl(event.target);
+		dragState = {
+			startX: event.clientX,
+			startY: event.clientY,
+			origin: { ...bounds.value }
+		};
+		startInteraction("move");
+	}
+	const resizeCursor = {
+		n: "ns-resize",
+		s: "ns-resize",
+		e: "ew-resize",
+		w: "ew-resize",
+		ne: "nesw-resize",
+		sw: "nesw-resize",
+		nw: "nwse-resize",
+		se: "nwse-resize"
+	};
+	function onResizePointerDown(handle, event) {
+		if (!options.resizable.value || isFullscreen.value) return;
+		event.preventDefault();
+		ensurePanelEl(event.target);
+		resizeState = {
+			handle,
+			startX: event.clientX,
+			startY: event.clientY,
+			origin: { ...bounds.value }
+		};
+		startInteraction(resizeCursor[handle]);
+	}
+	onBeforeUnmount(() => {
+		stopInteractions();
+		clearBoundsTransitionTimer();
+	});
+	return {
+		isFullscreen,
+		boundsTransitionEnabled,
+		dialogStyle,
+		resizeHandles,
+		setPanelEl,
+		toggleFullscreen,
+		onHeaderPointerDown,
+		onResizePointerDown
+	};
+}
+//#endregion
+export { useRsDialogWindow };

package/dist/components/divider/index.d.ts

@@ -0,0 +1 @@
+export { default as RsDivider } from './src/RsDivider.js';

package/dist/components/divider/src/RsDivider.css

@@ -0,0 +1,51 @@
+
+.rs-divider[data-v-b8b44303] {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 0;
+  background: transparent;
+}
+.rs-divider--horizontal[data-v-b8b44303] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: var(--rs-space-md) 0;
+}
+.rs-divider--horizontal[data-v-b8b44303]:not(.rs-divider--with-label)::before {
+  content: '';
+  display: block;
+  width: 100%;
+  border-top: 1px solid var(--rs-border);
+}
+.rs-divider--horizontal.rs-divider--dashed[data-v-b8b44303]:not(.rs-divider--with-label)::before {
+  border-top-style: dashed;
+}
+.rs-divider--horizontal.rs-divider--with-label[data-v-b8b44303]::before,
+.rs-divider--horizontal.rs-divider--with-label[data-v-b8b44303]::after {
+  content: '';
+  flex: 1 1 auto;
+  border-top: 1px solid var(--rs-border);
+}
+.rs-divider--horizontal.rs-divider--dashed.rs-divider--with-label[data-v-b8b44303]::before,
+.rs-divider--horizontal.rs-divider--dashed.rs-divider--with-label[data-v-b8b44303]::after {
+  border-top-style: dashed;
+}
+.rs-divider__label[data-v-b8b44303] {
+  flex-shrink: 0;
+  padding: 0 var(--rs-space-md);
+  font-size: var(--rs-font-size-xs);
+  color: var(--rs-muted);
+  white-space: nowrap;
+}
+.rs-divider--vertical[data-v-b8b44303] {
+  display: inline-block;
+  align-self: stretch;
+  width: 0;
+  min-height: 1em;
+  margin: 0 var(--rs-space-md);
+  border-left: 1px solid var(--rs-border);
+  vertical-align: middle;
+}
+.rs-divider--vertical.rs-divider--dashed[data-v-b8b44303] {
+  border-left-style: dashed;
+}

package/dist/components/divider/src/RsDivider.impl.js

@@ -0,0 +1,31 @@
+import { createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot } from "vue";
+//#region src/components/divider/src/RsDivider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-orientation"];
+var _hoisted_2 = {
+	key: 0,
+	class: "rs-divider__label"
+};
+var RsDivider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsDivider",
+	props: {
+		orientation: { default: "horizontal" },
+		dashed: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["rs-divider", [`rs-divider--${__props.orientation}`, {
+					"rs-divider--dashed": __props.dashed,
+					"rs-divider--with-label": _ctx.$slots.default
+				}]]),
+				role: "separator",
+				"aria-orientation": __props.orientation
+			}, [_ctx.$slots.default && __props.orientation === "horizontal" ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])) : createCommentVNode("", true)], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RsDivider_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/divider/src/RsDivider.js

@@ -0,0 +1,8 @@
+import './RsDivider.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import RsDivider_vue_vue_type_script_setup_true_lang_default from "./RsDivider.impl.js";
+
+//#region src/components/divider/src/RsDivider.vue
+var RsDivider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsDivider_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b8b44303"]]);
+//#endregion
+export { RsDivider_default as default };

package/dist/components/drawer/index.d.ts

@@ -0,0 +1,3 @@
+export { default as RsDrawer } from './src/RsDrawer.js';
+export type { RsDrawerBeforeClose, RsDrawerCloseReason, RsDrawerDimension, RsDrawerSide, RsDrawerSize, } from './src/drawer-utils';
+export { clampRsDrawerSize, resolveDrawerOverlayStyle, resolveRsDrawerDimensionCss, resolveRsDrawerSizeCss, resolveRsDrawerSizePx, RS_DRAWER_MAX_VIEWPORT_RATIO, RS_DRAWER_MIN_SIZE_PX, runRsDrawerBeforeClose, } from './src/drawer-utils';

package/dist/components/drawer/src/RsDrawer.d.ts

@@ -0,0 +1,104 @@
+import { type RsDrawerBeforeClose, type RsDrawerCloseReason, type RsDrawerDimension, type RsDrawerSide, type RsDrawerSize } from './drawer-utils';
+type __VLS_Props = {
+    /** 标题文案；也可用 `#header` 插槽 */
+    title?: string;
+    description?: string;
+    side?: RsDrawerSide;
+    /** 预设尺寸；与 width/height 同时存在时自定义优先 */
+    size?: RsDrawerSize;
+    /** 左右抽屉自定义宽度（覆盖 size） */
+    width?: RsDrawerDimension;
+    /** 上下抽屉自定义高度（覆盖 size） */
+    height?: RsDrawerDimension;
+    /**
+     * 内边缘拖拽改尺寸。full 始终不可拖。
+     * 控制台 / 帮助栏等侧栏场景建议保持开启。
+     */
+    resizable?: boolean;
+    /** 可拖下限（px / CSS）；默认 256px */
+    minSize?: RsDrawerDimension;
+    /** 可拖上限（px / CSS）；默认视口 90% */
+    maxSize?: RsDrawerDimension;
+    /**
+     * 是否模态：锁焦点并拦截背后交互。
+     * 未显式传入时跟随 showOverlay（有遮罩=模态，无遮罩=非模态）。
+     */
+    modal?: boolean;
+    /** 是否渲染遮罩（与 modal / closeOnOverlayClick 解耦） */
+    showOverlay?: boolean;
+    /**
+     * 遮罩不透明度 0–1；覆盖主题默认。
+     * 例：0.08 最浅、0.35 适中、0.55 较深。
+     */
+    overlayOpacity?: number;
+    /** 遮罩模糊；number 为 px */
+    overlayBlur?: number | string;
+    showClose?: boolean;
+    /**
+     * 点击抽屉外是否关闭（含无遮罩时的 interact-outside）。
+     * 与 modal 独立：非模态也可保持打开。
+     */
+    closeOnOverlayClick?: boolean;
+    /** 按 Esc 是否关闭；默认 true */
+    closeOnEsc?: boolean;
+    /**
+     * DialogPortal 挂载目标
+     * - string / HTMLElement：Teleport 到指定节点（容器需 position:relative）
+     * - false：禁用 Teleport，就地渲染
+     * - undefined：走 Reka 默认（通常为 body）
+     */
+    teleportTo?: string | HTMLElement | false;
+    /** 关闭前钩子；返回 false 可阻止关闭（支持 async） */
+    beforeClose?: RsDrawerBeforeClose;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_34: {}, __VLS_67: {}, __VLS_69: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_34) => any;
+} & {
+    default?: (props: typeof __VLS_67) => any;
+} & {
+    footer?: (props: typeof __VLS_69) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** 请求关闭（走 beforeClose） */
+    close: (reason?: RsDrawerCloseReason) => Promise<boolean>;
+    /** 打开抽屉 */
+    openDrawer: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    resize: (size: number) => any;
+    "update:open": (value: boolean) => any;
+    openChange: (open: boolean) => any;
+    afterOpen: () => any;
+    afterClose: (reason: import("../../dialog").RsDialogCloseReason) => any;
+    "update:width": (value: number) => any;
+    "update:height": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onResize?: ((size: number) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onOpenChange?: ((open: boolean) => any) | undefined;
+    onAfterOpen?: (() => any) | undefined;
+    onAfterClose?: ((reason: import("../../dialog").RsDialogCloseReason) => any) | undefined;
+    "onUpdate:width"?: ((value: number) => any) | undefined;
+    "onUpdate:height"?: ((value: number) => any) | undefined;
+}>, {
+    title: string;
+    size: RsDrawerSize;
+    side: RsDrawerSide;
+    resizable: boolean;
+    showOverlay: boolean;
+    showClose: boolean;
+    closeOnOverlayClick: boolean;
+    closeOnEsc: 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;
+    };
+};