ensis-ui 0.0.0-stage → 3.0.0

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

@@ -0,0 +1,298 @@
+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 pointerBound = false;
+	let savedUserSelect = "";
+	let savedCursor = "";
+	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;
+	}
+	/** 优先用已绑定节点；否则从事件目标向上找面板 */
+	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;
+		if (!pointerBound) return;
+		pointerBound = false;
+		window.removeEventListener("pointermove", onPointerMove);
+		window.removeEventListener("pointerup", stopInteractions);
+		window.removeEventListener("pointercancel", stopInteractions);
+		document.body.style.userSelect = savedUserSelect;
+		document.body.style.cursor = savedCursor;
+	}
+	function capturePointer(event) {
+		const el = panelEl;
+		if (!el || typeof el.setPointerCapture !== "function") return;
+		try {
+			if (typeof el.hasPointerCapture === "function" && el.hasPointerCapture(event.pointerId)) return;
+			el.setPointerCapture(event.pointerId);
+		} catch {}
+	}
+	function startInteraction(cursor, event) {
+		boundsTransitionEnabled.value = false;
+		clearBoundsTransitionTimer();
+		refreshCachedInsets();
+		liveBounds = { ...bounds.value };
+		if (!pointerBound) {
+			savedUserSelect = document.body.style.userSelect;
+			savedCursor = document.body.style.cursor;
+			window.addEventListener("pointermove", onPointerMove);
+			window.addEventListener("pointerup", stopInteractions);
+			window.addEventListener("pointercancel", stopInteractions);
+			pointerBound = true;
+		}
+		document.body.style.userSelect = "none";
+		document.body.style.cursor = cursor;
+		capturePointer(event);
+	}
+	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", event);
+	}
+	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], event);
+	}
+	onBeforeUnmount(() => {
+		stopInteractions();
+		clearBoundsTransitionTimer();
+	});
+	return {
+		isFullscreen,
+		boundsTransitionEnabled,
+		dialogStyle,
+		resizeHandles,
+		setPanelEl,
+		stopInteractions,
+		toggleFullscreen,
+		onHeaderPointerDown,
+		onResizePointerDown
+	};
+}
+//#endregion
+export { useRsDialogWindow };

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

@@ -0,0 +1,2 @@
+export { default as RsDivider } from './src/RsDivider.js';
+export type { RsDividerOrientation } from './src/divider-utils';

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

@@ -0,0 +1,66 @@
+
+.rs-divider[data-v-489327cb] {
+  --rs-divider-color: var(--rs-border);
+  --rs-divider-width: 1px;
+  --rs-divider-gap: var(--rs-space-md);
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 0;
+  background: transparent;
+}
+.rs-divider--horizontal[data-v-489327cb] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-block: var(--rs-divider-gap);
+  margin-inline: 0;
+}
+hr.rs-divider--horizontal[data-v-489327cb] {
+  display: block;
+  height: 0;
+  border-block-start: var(--rs-divider-width) solid var(--rs-divider-color);
+}
+hr.rs-divider--horizontal.rs-divider--dashed[data-v-489327cb] {
+  border-block-start-style: dashed;
+}
+.rs-divider--horizontal.rs-divider--with-label[data-v-489327cb]::before,
+.rs-divider--horizontal.rs-divider--with-label[data-v-489327cb]::after {
+  content: '';
+  flex: 1 1 auto;
+  border-block-start: var(--rs-divider-width) solid var(--rs-divider-color);
+}
+.rs-divider--horizontal.rs-divider--dashed.rs-divider--with-label[data-v-489327cb]::before,
+.rs-divider--horizontal.rs-divider--dashed.rs-divider--with-label[data-v-489327cb]::after {
+  border-block-start-style: dashed;
+}
+.rs-divider__label[data-v-489327cb] {
+  flex-shrink: 0;
+  padding-block: 0;
+  padding-inline: var(--rs-divider-gap);
+  font-size: var(--rs-font-size-xs);
+  color: var(--rs-text-secondary);
+  white-space: nowrap;
+}
+.rs-divider--vertical[data-v-489327cb] {
+  display: inline-block;
+  align-self: stretch;
+  width: 0;
+  min-height: 1em;
+  margin-block: 0;
+  margin-inline: var(--rs-divider-gap);
+  border-inline-start: var(--rs-divider-width) solid var(--rs-divider-color);
+  vertical-align: middle;
+}
+.rs-divider--vertical.rs-divider--dashed[data-v-489327cb] {
+  border-inline-start-style: dashed;
+}
+@media (forced-colors: active) {
+hr.rs-divider--horizontal[data-v-489327cb],
+  .rs-divider--horizontal.rs-divider--with-label[data-v-489327cb]::before,
+  .rs-divider--horizontal.rs-divider--with-label[data-v-489327cb]::after {
+    border-block-start-color: CanvasText;
+}
+.rs-divider--vertical[data-v-489327cb] {
+    border-inline-start-color: CanvasText;
+}
+}

package/dist/components/divider/src/RsDivider.d.ts

@@ -0,0 +1,22 @@
+import { type RsDividerOrientation } from './divider-utils';
+export type { RsDividerOrientation };
+type __VLS_Props = {
+    orientation?: RsDividerOrientation;
+    dashed?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: RsDividerOrientation;
+    dashed: 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/divider/src/RsDivider.impl.js

@@ -0,0 +1,45 @@
+import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, useId, useSlots } from "vue";
+//#region src/components/divider/src/RsDivider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-orientation"];
+var _hoisted_2 = ["id"];
+var RsDivider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsDivider",
+	__name: "RsDivider",
+	props: {
+		orientation: { default: "horizontal" },
+		dashed: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const labelId = useId();
+		const hasSlot = computed(() => Boolean(slots.default));
+		const showLabel = computed(() => hasSlot.value && props.orientation === "horizontal");
+		const rootClass = computed(() => [
+			"rs-divider",
+			`rs-divider--${props.orientation}`,
+			{
+				"rs-divider--dashed": props.dashed,
+				"rs-divider--with-label": hasSlot.value
+			}
+		]);
+		return (_ctx, _cache) => {
+			return !showLabel.value ? (openBlock(), createElementBlock("hr", {
+				key: 0,
+				class: normalizeClass(rootClass.value),
+				"aria-orientation": __props.orientation
+			}, null, 10, _hoisted_1)) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(rootClass.value)
+			}, [createElementVNode("span", {
+				id: unref(labelId),
+				class: "rs-divider__label"
+			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 8, _hoisted_2)], 2));
+		};
+	}
+});
+//#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-489327cb"]]);
+//#endregion
+export { RsDivider_default as default };

package/dist/components/divider/src/divider-utils.d.ts

@@ -0,0 +1,4 @@
+export declare const RS_DIVIDER_ORIENTATIONS: readonly ["horizontal", "vertical"];
+export type RsDividerOrientation = (typeof RS_DIVIDER_ORIENTATIONS)[number];
+export declare function isRsDividerOrientation(value: unknown): value is RsDividerOrientation;
+export declare function resolveRsDividerOrientation(orientation?: RsDividerOrientation | null): RsDividerOrientation;

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

@@ -0,0 +1,3 @@
+export { default as RsDrawer } from './src/RsDrawer.js';
+export type { RsDrawerBeforeClose, RsDrawerCloseReason, RsDrawerDimension, RsDrawerExpose, RsDrawerInstance, 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';