@sdata/web-vue 4.5.5 → 4.6.0

package/es/panel-group/core/panel.js

@@ -0,0 +1,277 @@
+import _objectSpread2 from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/objectSpread2.js";
+import { emitter } from "./utils.js";
+import { FILL_ATTRIBUTE, hasFillAfter, isRtl, isSeparator, lockBody } from "./dom.js";
+import { timing } from "./transition.js";
+import { MotionValue } from "./motion.js";
+import { clamp } from "es-toolkit";
+//#region components/panel-group/core/panel.ts
+var KEY_STEP = 10;
+var KEY_STEP_FAST = 50;
+var toPixels = (value, extent) => typeof value === "string" ? Number(value.slice(0, -1)) / 100 * extent : value;
+var createPanel = (group, initial) => {
+	const { axes, fill, panels } = group;
+	const { emit: notify, subscribe, clear } = emitter();
+	let element = null;
+	let options = initial;
+	const extent = () => {
+		var _element$parentElemen3, _element$parentElemen4;
+		return (_element$parentElemen3 = element === null || element === void 0 || (_element$parentElemen4 = element.parentElement) === null || _element$parentElemen4 === void 0 ? void 0 : _element$parentElemen4[axes.client]) !== null && _element$parentElemen3 !== void 0 ? _element$parentElemen3 : 0;
+	};
+	const measure = () => {
+		const pixels = toPixels(options.size, extent());
+		return typeof options.size === "string" ? Math.round(pixels) : pixels;
+	};
+	const report = (value) => {
+		if (typeof options.size !== "string") return value;
+		const total = extent();
+		return `${total > 0 ? Math.round(value / total * 1e4) / 100 : 0}%`;
+	};
+	const size = new MotionValue(initial.collapsed ? 0 : measure());
+	const content = new MotionValue(measure());
+	let target = size.get();
+	let state = {
+		bare: false,
+		dragging: false,
+		end: void 0,
+		folding: false
+	};
+	let unlock;
+	const session = {
+		collapsed: false,
+		max: 0,
+		min: 0,
+		sign: 1,
+		start: 0,
+		wasCollapsed: false
+	};
+	const patch = (next) => {
+		if (Object.entries(next).some(([key, value]) => state[key] !== value)) {
+			state = _objectSpread2(_objectSpread2({}, state), next);
+			notify();
+		}
+	};
+	const available = () => {
+		var _element$parentElemen5, _element$parentElemen6;
+		const filler = [...(_element$parentElemen5 = element === null || element === void 0 || (_element$parentElemen6 = element.parentElement) === null || _element$parentElemen6 === void 0 ? void 0 : _element$parentElemen6.children) !== null && _element$parentElemen5 !== void 0 ? _element$parentElemen5 : []].find((node) => node.hasAttribute(FILL_ATTRIBUTE));
+		let room = filler ? Number.parseFloat(getComputedStyle(filler)[axes.extent]) : 0;
+		for (const panel of panels.values()) room += panel.motion.size.get() - (panel === controller ? 0 : panel.target);
+		return Math.max(0, room);
+	};
+	const bounds = () => {
+		const room = available();
+		const total = extent();
+		const min = Math.min(options.minSize === void 0 ? 0 : toPixels(options.minSize, total), room);
+		const max = options.maxSize === void 0 ? room : toPixels(options.maxSize, total);
+		return {
+			max: Math.max(min, Math.min(max, room)),
+			min
+		};
+	};
+	const growSign = () => (state.end ? 1 : -1) * (axes.point === "x" && isRtl(element) ? -1 : 1);
+	const setFolding = (folding) => {
+		if (folding === state.folding) return;
+		patch({ folding });
+		if (folding) {
+			fill.anchor = state.end ? "flex-end" : "flex-start";
+			fill.size = available() - target;
+		} else if (![...panels.values()].some((panel) => panel.state.folding)) fill.size = "100%";
+	};
+	const fold = (to, from, mounting) => {
+		setFolding(true);
+		const closed = size.get() === 0;
+		if (closed) content.jump(to);
+		const start = () => {
+			if (!closed && to > 0) content.animate(to, timing());
+			const transition = from === 0 || to === 0 ? timing(options.transition) : timing();
+			size.animate(to, transition);
+		};
+		if (closed && mounting) queueMicrotask(start);
+		else start();
+	};
+	const stopSettle = size.on("animationComplete", () => {
+		if (size.get() === target) setFolding(false);
+	});
+	const release = () => {
+		unlock === null || unlock === void 0 || unlock();
+		unlock = void 0;
+	};
+	const stopDragging = () => {
+		release();
+		patch({ dragging: false });
+	};
+	const drag = {
+		start: (cursor = axes.cursor) => {
+			const collapsed = !!options.collapsed;
+			Object.assign(session, _objectSpread2(_objectSpread2({}, bounds()), {}, {
+				collapsed,
+				sign: growSign(),
+				start: size.get(),
+				wasCollapsed: collapsed
+			}));
+			release();
+			unlock = lockBody(cursor, drag.cancel);
+			setFolding(false);
+			patch({ dragging: true });
+		},
+		move: (offset) => {
+			if (!state.dragging) return;
+			const pixels = session.start + offset[axes.point] * session.sign;
+			const collapsed = !!options.onCollapsedChange && pixels < session.min / 2;
+			const next = collapsed ? 0 : Math.round(clamp(pixels, session.min, session.max));
+			if (collapsed !== session.collapsed) {
+				var _options$onCollapsedC;
+				(_options$onCollapsedC = options.onCollapsedChange) === null || _options$onCollapsedC === void 0 || _options$onCollapsedC.call(options, collapsed);
+			}
+			size.jump(next);
+			if (!collapsed) content.jump(next);
+			session.collapsed = collapsed;
+		},
+		end: () => {
+			if (!state.dragging) return;
+			stopDragging();
+			if (!session.collapsed) {
+				var _options$onSizeChange;
+				(_options$onSizeChange = options.onSizeChange) === null || _options$onSizeChange === void 0 || _options$onSizeChange.call(options, report(size.get()));
+			}
+			if (size.get() !== target) fold(target, size.get());
+		},
+		cancel: () => {
+			if (!state.dragging) return;
+			size.jump(session.start);
+			content.jump(session.start);
+			if (session.collapsed !== session.wasCollapsed) {
+				var _options$onCollapsedC2;
+				(_options$onCollapsedC2 = options.onCollapsedChange) === null || _options$onCollapsedC2 === void 0 || _options$onCollapsedC2.call(options, session.wasCollapsed);
+			}
+			stopDragging();
+		}
+	};
+	const resizeByKey = (event) => {
+		var _options$onSizeChange2;
+		if (event.key === "Enter") {
+			if (options.onCollapsedChange) {
+				event.preventDefault();
+				options.onCollapsedChange(!options.collapsed);
+			}
+			return;
+		}
+		const { max, min } = bounds();
+		const step = (event.shiftKey || event.key === "PageUp" || event.key === "PageDown" ? KEY_STEP_FAST : KEY_STEP) * growSign();
+		const next = {
+			End: max,
+			Home: min,
+			PageDown: target + step,
+			PageUp: target - step,
+			[axes.grow]: target + step,
+			[axes.shrink]: target - step
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		const value = clamp(next, min, max);
+		if (options.collapsed && value > 0) {
+			var _options$onCollapsedC3;
+			(_options$onCollapsedC3 = options.onCollapsedChange) === null || _options$onCollapsedC3 === void 0 || _options$onCollapsedC3.call(options, false);
+		}
+		(_options$onSizeChange2 = options.onSizeChange) === null || _options$onSizeChange2 === void 0 || _options$onSizeChange2.call(options, report(value));
+	};
+	const unplace = () => {
+		for (const [side, panel] of panels) if (panel === controller) panels.delete(side);
+	};
+	const place = () => {
+		if (!element) return;
+		const end = hasFillAfter(element);
+		const side = end ? "start" : "end";
+		if (panels.get(side) !== controller) {
+			unplace();
+			panels.set(side, controller);
+			group.notify();
+		}
+		const neighbour = end ? element.nextElementSibling : element.previousElementSibling;
+		patch({
+			bare: !isSeparator(neighbour),
+			end
+		});
+	};
+	const refit = () => {
+		if (typeof options.size !== "string" || state.dragging || state.folding) return;
+		const value = options.collapsed ? 0 : measure();
+		content.jump(measure());
+		if (value === target) return;
+		target = value;
+		size.jump(target);
+		notify();
+		group.notify();
+	};
+	const sync = (next, mounting) => {
+		options = next;
+		place();
+		const measured = measure();
+		if (size.get() === 0 && !state.dragging) content.jump(measured);
+		const value = next.collapsed ? 0 : measured;
+		if (value === target) return;
+		const from = target;
+		target = value;
+		notify();
+		group.notify();
+		if (state.dragging) return;
+		if (size.get() === target) {
+			setFolding(false);
+			size.jump(target);
+			content.jump(target);
+		} else fold(target, from, mounting);
+	};
+	const controller = {
+		attach: (node) => {
+			element = node;
+			place();
+			refit();
+			const parent = node.parentElement;
+			const watch = parent ? new ResizeObserver(refit) : void 0;
+			if (parent) watch === null || watch === void 0 || watch.observe(parent);
+			return () => {
+				watch === null || watch === void 0 || watch.disconnect();
+				release();
+				unplace();
+				element = null;
+				group.notify();
+			};
+		},
+		bounds,
+		destroy: () => {
+			release();
+			size.stop();
+			content.stop();
+			setFolding(false);
+			stopSettle();
+			clear();
+		},
+		drag,
+		motion: {
+			content,
+			size
+		},
+		get options() {
+			return options;
+		},
+		reset: () => {
+			var _options$onSizeChange3, _options$defaultSize;
+			if (options.collapsed) {
+				var _options$onCollapsedC4;
+				(_options$onCollapsedC4 = options.onCollapsedChange) === null || _options$onCollapsedC4 === void 0 || _options$onCollapsedC4.call(options, false);
+			}
+			(_options$onSizeChange3 = options.onSizeChange) === null || _options$onSizeChange3 === void 0 || _options$onSizeChange3.call(options, (_options$defaultSize = options.defaultSize) !== null && _options$defaultSize !== void 0 ? _options$defaultSize : initial.size);
+		},
+		resizeByKey,
+		get state() {
+			return state;
+		},
+		subscribe,
+		sync,
+		get target() {
+			return target;
+		}
+	};
+	return controller;
+};
+//#endregion
+export { createPanel };

package/es/panel-group/core/reorder.d.ts

@@ -0,0 +1,6 @@
+import type { PanelTransition } from '../types';
+import type { Axes } from './axes';
+export declare const reorder: {
+    measure: (root: HTMLElement, axes: Axes) => Map<Element, number>;
+    play: (before: Map<Element, number>, axes: Axes, transition?: PanelTransition) => void;
+};

package/es/panel-group/core/reorder.js

@@ -0,0 +1,23 @@
+import "./dom.js";
+import { cssEasing, timing } from "./transition.js";
+//#region components/panel-group/core/reorder.ts
+var reorder = {
+	measure: (root, axes) => new Map([...root.children].map((child) => [child, child.getBoundingClientRect()[axes.edge]])),
+	play: (before, axes, transition) => {
+		for (const [child, from] of before) {
+			if (!(child instanceof HTMLElement) || !child.isConnected) continue;
+			const delta = from - child.getBoundingClientRect()[axes.edge];
+			if (delta === 0) continue;
+			const lift = !child.hasAttribute("data-sd-panels-fill") && !child.hasAttribute("data-sd-panels-separator");
+			if (lift) child.style.zIndex = "1";
+			child.animate([{ transform: `translate${axes.point.toUpperCase()}(${delta}px)` }, { transform: "none" }], {
+				duration: timing(transition).duration,
+				easing: cssEasing(transition)
+			}).finished.finally(() => {
+				if (lift) child.style.zIndex = "";
+			}).catch(() => {});
+		}
+	}
+};
+//#endregion
+export { reorder };

package/es/panel-group/core/separator.d.ts

@@ -0,0 +1,3 @@
+import type { EngineGroup } from './group';
+import type { PanelController } from './panel';
+export declare const attachSeparator: (element: HTMLElement, group: EngineGroup, own?: PanelController) => () => void;

package/es/panel-group/core/separator.js

@@ -0,0 +1,130 @@
+import { noop } from "./utils.js";
+import { SEPARATOR_ATTRIBUTE, hasFillAfter } from "./dom.js";
+import { grips } from "./grips.js";
+//#region components/panel-group/core/separator.ts
+var PAN_THRESHOLD = 3;
+var attachSeparator = (element, group, own) => {
+	const slot = element.closest(`[${SEPARATOR_ATTRIBUTE}]`);
+	const findPanel = () => own !== null && own !== void 0 ? own : group.panels.get(hasFillAfter(slot) ? "start" : "end");
+	let panel;
+	let unregister = noop;
+	let unwatch = noop;
+	let partners = [];
+	let pressed = null;
+	let dragging = false;
+	let dragged = false;
+	let joint = false;
+	let cursor = "";
+	const resizing = () => grips.state(element) === "held" || !!(panel === null || panel === void 0 ? void 0 : panel.state.dragging);
+	const each = (act) => {
+		for (const target of [panel, ...partners]) if (target) act(target);
+	};
+	const render = () => {
+		const hit = grips.state(element);
+		element.toggleAttribute("data-resizing", resizing());
+		element.toggleAttribute("data-crossing", hit === "crossed" && !resizing());
+		if (joint !== (hit !== null)) {
+			joint = !joint;
+			if (joint) {
+				cursor = element.style.getPropertyValue("cursor");
+				element.style.cursor = "move";
+			} else element.style.cursor = cursor;
+		}
+		if (panel) {
+			const { max, min } = panel.bounds();
+			element.setAttribute("aria-valuenow", String(panel.target));
+			element.setAttribute("aria-valuetext", `${panel.target} pixels`);
+			element.setAttribute("aria-valuemin", String(min));
+			element.setAttribute("aria-valuemax", String(max));
+		}
+	};
+	const bind = () => {
+		const next = findPanel();
+		if (next !== panel) {
+			unregister();
+			unwatch();
+			panel = next;
+			unregister = panel ? grips.register(element, panel) : noop;
+			unwatch = panel ? panel.subscribe(render) : noop;
+		}
+		render();
+	};
+	const settle = () => {
+		partners = [];
+		pressed = null;
+		dragging = false;
+	};
+	const cancel = () => {
+		grips.mark("held", []);
+		each((target) => target.drag.cancel());
+		settle();
+	};
+	const listeners = {
+		pointerdown: (event) => {
+			if (event.button > 0 || pressed) return;
+			dragged = false;
+			pressed = {
+				clientX: event.clientX,
+				clientY: event.clientY
+			};
+			try {
+				element.setPointerCapture(event.pointerId);
+			} catch (_unused) {}
+			grips.invalidate();
+			grips.mark("held", grips.at(event));
+		},
+		pointermove: (event) => {
+			if (!pressed) {
+				if (!resizing()) grips.mark("crossed", grips.at(event));
+				return;
+			}
+			const offset = {
+				x: event.clientX - pressed.clientX,
+				y: event.clientY - pressed.clientY
+			};
+			if (!dragging) {
+				if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;
+				dragging = true;
+				dragged = true;
+				partners = grips.partners(grips.at(pressed), element);
+				each((target) => target.drag.start(partners.length > 0 ? "move" : void 0));
+			}
+			each((target) => target.drag.move(offset));
+		},
+		pointerup: (event) => {
+			grips.mark("held", []);
+			if (dragging) {
+				each((target) => target.drag.end());
+				grips.invalidate();
+				grips.mark("crossed", grips.at(event));
+			}
+			settle();
+		},
+		pointercancel: cancel,
+		lostpointercapture: cancel,
+		pointerenter: () => grips.invalidate(),
+		pointerleave: () => {
+			if (!resizing()) grips.mark("crossed", []);
+		},
+		dblclick: (event) => {
+			if (!dragged) for (const target of [panel, ...grips.partners(grips.at(event), element)]) target === null || target === void 0 || target.reset();
+		},
+		keydown: (event) => panel === null || panel === void 0 ? void 0 : panel.resizeByKey(event)
+	};
+	const controller = new AbortController();
+	window.addEventListener("keydown", (event) => {
+		if (event.key === "Escape" && pressed) cancel();
+	}, { signal: controller.signal });
+	for (const [type, listener] of Object.entries(listeners)) element.addEventListener(type, listener, { signal: controller.signal });
+	const unsubscribe = [group.subscribe(bind), grips.subscribe(render)];
+	bind();
+	return () => {
+		if (pressed) cancel();
+		controller.abort();
+		for (const stop of unsubscribe) stop();
+		unregister();
+		unwatch();
+	};
+};
+//#endregion
+export { attachSeparator };

package/es/panel-group/core/transition.d.ts

@@ -0,0 +1,9 @@
+import type { PanelTransition } from '../types';
+export declare const bezier: (x1: number, y1: number, x2: number, y2: number) => (t: number) => number;
+export declare const DEFAULT_TRANSITION: Required<Pick<PanelTransition, 'duration' | 'easing'>>;
+export interface ResolvedTransition extends Omit<PanelTransition, 'duration' | 'easing'> {
+    duration: number;
+    easing: (t: number) => number;
+}
+export declare const timing: (transition?: PanelTransition) => ResolvedTransition;
+export declare const cssEasing: (transition?: PanelTransition) => string;

package/es/panel-group/core/transition.js

@@ -0,0 +1,56 @@
+import _objectSpread2 from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/objectSpread2.js";
+import { reducedMotion } from "./env.js";
+//#region components/panel-group/core/transition.ts
+/** cubic-bezier 缓动求值器（参数反解 + y 值采样）。 */
+var bezier = (x1, y1, x2, y2) => {
+	const bezier1d = (t, c1, c2) => 3 * t * Math.pow(1 - t, 2) * c1 + 3 * Math.pow(t, 2) * (1 - t) * c2 + Math.pow(t, 3);
+	const invert = (t) => {
+		let lo = 0;
+		let hi = 1;
+		for (let i = 0; i < 12; i += 1) {
+			const mid = (lo + hi) / 2;
+			if (bezier1d(mid, x1, x2) < t) lo = mid;
+			else hi = mid;
+		}
+		return (lo + hi) / 2;
+	};
+	return (t) => {
+		if (t <= 0) return 0;
+		if (t >= 1) return 1;
+		const s = invert(t);
+		return bezier1d(s, y1, y2);
+	};
+};
+/** 默认过渡：与 vendor 一致的缓动曲线，时长单位毫秒。 */
+var DEFAULT_TRANSITION = {
+	duration: 250,
+	easing: [
+		.32,
+		.72,
+		0,
+		1
+	]
+};
+/** 应用 reduced-motion；无自定义时长/缓动时使用默认曲线。 */
+var timing = (transition) => {
+	var _config$easing, _config$duration;
+	if (reducedMotion.get()) return {
+		duration: 0,
+		easing: (t) => t
+	};
+	const config = transition !== null && transition !== void 0 ? transition : DEFAULT_TRANSITION;
+	const easingTuple = (_config$easing = config.easing) !== null && _config$easing !== void 0 ? _config$easing : DEFAULT_TRANSITION.easing;
+	const duration = (_config$duration = config.duration) !== null && _config$duration !== void 0 ? _config$duration : DEFAULT_TRANSITION.duration;
+	return _objectSpread2(_objectSpread2({}, config), {}, {
+		duration,
+		easing: bezier(...easingTuple)
+	});
+};
+/** 转换为 CSS 缓动字符串（供 WAAPI / inline style 使用）。 */
+var cssEasing = (transition) => {
+	var _transition$easing;
+	const [x1, y1, x2, y2] = (_transition$easing = transition === null || transition === void 0 ? void 0 : transition.easing) !== null && _transition$easing !== void 0 ? _transition$easing : DEFAULT_TRANSITION.easing;
+	return `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`;
+};
+//#endregion
+export { DEFAULT_TRANSITION, bezier, cssEasing, timing };

package/es/panel-group/core/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const noop: () => void;
+export interface Emitter {
+    clear: () => void;
+    emit: () => void;
+    subscribe: (listener: () => void) => () => void;
+}
+export declare const emitter: () => {
+    clear: () => void;
+    emit: () => void;
+    subscribe: (listener: () => void) => () => void;
+};

package/es/panel-group/core/utils.js

@@ -0,0 +1,19 @@
+//#region components/panel-group/core/utils.ts
+var noop = () => {};
+var emitter = () => {
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		clear: () => listeners.clear(),
+		emit: () => {
+			for (const listener of [...listeners]) listener();
+		},
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+};
+//#endregion
+export { emitter, noop };

package/es/panel-group/index.d.ts

@@ -0,0 +1,134 @@
+import type { App } from 'vue';
+import type { SDOptions } from '../_utils/types';
+import _PanelGroup from './panel-group.vue';
+import _PanelSeparator from './panel-separator.vue';
+import _Panel from './panel.vue';
+declare const PanelGroup: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
+        orientation?: 'horizontal' | 'vertical';
+        reorder?: boolean;
+        transition?: import("./types").PanelTransition;
+    }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        orientation?: 'horizontal' | 'vertical';
+        reorder?: boolean;
+        transition?: import("./types").PanelTransition;
+    }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<{
+    orientation?: 'horizontal' | 'vertical';
+    reorder?: boolean;
+    transition?: import("./types").PanelTransition;
+}> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default?: () => unknown;
+    };
+}) & {
+    install: (app: App, options?: SDOptions) => void;
+};
+declare const Panel: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
+        size?: import("./types").PanelSize;
+        collapsed?: boolean;
+        defaultSize?: import("./types").PanelSize;
+        fold?: import("./types").PanelFold;
+        minSize?: import("./types").PanelSize;
+        maxSize?: import("./types").PanelSize;
+        pin?: boolean;
+        keepMounted?: boolean;
+        transition?: import("./types").PanelTransition;
+    }> & Readonly<{
+        "onUpdate:collapsed"?: ((collapsed: boolean) => any) | undefined;
+        "onUpdate:size"?: ((size: import("./types").PanelSize) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:collapsed": (collapsed: boolean) => any;
+        "update:size": (size: import("./types").PanelSize) => any;
+    }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        size?: import("./types").PanelSize;
+        collapsed?: boolean;
+        defaultSize?: import("./types").PanelSize;
+        fold?: import("./types").PanelFold;
+        minSize?: import("./types").PanelSize;
+        maxSize?: import("./types").PanelSize;
+        pin?: boolean;
+        keepMounted?: boolean;
+        transition?: import("./types").PanelTransition;
+    }> & Readonly<{
+        "onUpdate:collapsed"?: ((collapsed: boolean) => any) | undefined;
+        "onUpdate:size"?: ((size: import("./types").PanelSize) => any) | undefined;
+    }>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<{
+    size?: import("./types").PanelSize;
+    collapsed?: boolean;
+    defaultSize?: import("./types").PanelSize;
+    fold?: import("./types").PanelFold;
+    minSize?: import("./types").PanelSize;
+    maxSize?: import("./types").PanelSize;
+    pin?: boolean;
+    keepMounted?: boolean;
+    transition?: import("./types").PanelTransition;
+}> & Readonly<{
+    "onUpdate:collapsed"?: ((collapsed: boolean) => any) | undefined;
+    "onUpdate:size"?: ((size: import("./types").PanelSize) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:collapsed": (collapsed: boolean) => any;
+    "update:size": (size: import("./types").PanelSize) => any;
+}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default?: (props: import("./types").PanelSlotProps) => unknown;
+    };
+}) & {
+    install: (app: App, options?: SDOptions) => void;
+};
+declare const PanelSeparator: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
+        ariaLabel?: string;
+        own?: import("./core/panel").PanelController;
+    }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        ariaLabel?: string;
+        own?: import("./core/panel").PanelController;
+    }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<{
+    ariaLabel?: string;
+    own?: import("./core/panel").PanelController;
+}> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default?: () => unknown;
+    };
+}) & {
+    install: (app: App, options?: SDOptions) => void;
+};
+export type PanelGroupInstance = InstanceType<typeof _PanelGroup>;
+export type PanelInstance = InstanceType<typeof _Panel>;
+export type PanelSeparatorInstance = InstanceType<typeof _PanelSeparator>;
+export type { PanelFold, PanelPose, PanelSize, PanelSlotProps, PanelTransition } from './types';
+export { Panel, PanelSeparator };
+export default PanelGroup;