@sdata/web-vue 4.5.5 → 4.7.0

package/es/panel-group/context.js

@@ -0,0 +1,13 @@
+import { inject, provide } from "vue";
+//#region components/panel-group/context.ts
+var PanelGroupKey = Symbol("PanelGroupKey");
+var providePanelGroup = (group) => provide(PanelGroupKey, group);
+var usePanelGroup = () => {
+	const group = inject(PanelGroupKey, void 0);
+	if (!group) throw new Error("Panel 组件必须位于 PanelGroup 内使用");
+	return group;
+};
+/** PanelGroup 自身用于判断是否嵌套。 */
+var injectParentPanelGroup = () => inject(PanelGroupKey, void 0);
+//#endregion
+export { injectParentPanelGroup, providePanelGroup, usePanelGroup };

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

@@ -0,0 +1,33 @@
+export declare const AXES: {
+    readonly horizontal: {
+        readonly axis: 'Inline';
+        readonly client: 'clientWidth';
+        readonly cross: 'height';
+        readonly crossAxis: 'Inline';
+        readonly cursor: 'col-resize';
+        readonly direction: 'row';
+        readonly edge: 'left';
+        readonly extent: 'width';
+        readonly grow: 'ArrowRight';
+        readonly point: 'x';
+        readonly separator: 'vertical';
+        readonly shrink: 'ArrowLeft';
+    };
+    readonly vertical: {
+        readonly axis: 'Block';
+        readonly client: 'clientHeight';
+        readonly cross: 'width';
+        readonly crossAxis: 'Block';
+        readonly cursor: 'row-resize';
+        readonly direction: 'column';
+        readonly edge: 'top';
+        readonly extent: 'height';
+        readonly grow: 'ArrowDown';
+        readonly point: 'y';
+        readonly separator: 'horizontal';
+        readonly shrink: 'ArrowUp';
+    };
+};
+export type Orientation = keyof typeof AXES;
+export type Axes = (typeof AXES)[Orientation];
+export type Side = 'end' | 'start';

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

@@ -0,0 +1,33 @@
+//#region components/panel-group/core/axes.ts
+var AXES = {
+	horizontal: {
+		axis: "Inline",
+		client: "clientWidth",
+		cross: "height",
+		crossAxis: "Inline",
+		cursor: "col-resize",
+		direction: "row",
+		edge: "left",
+		extent: "width",
+		grow: "ArrowRight",
+		point: "x",
+		separator: "vertical",
+		shrink: "ArrowLeft"
+	},
+	vertical: {
+		axis: "Block",
+		client: "clientHeight",
+		cross: "width",
+		crossAxis: "Block",
+		cursor: "row-resize",
+		direction: "column",
+		edge: "top",
+		extent: "height",
+		grow: "ArrowDown",
+		point: "y",
+		separator: "horizontal",
+		shrink: "ArrowUp"
+	}
+};
+//#endregion
+export { AXES };

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

@@ -0,0 +1,6 @@
+export declare const FILL_ATTRIBUTE = "data-sd-panels-fill";
+export declare const SEPARATOR_ATTRIBUTE = "data-sd-panels-separator";
+export declare const isRtl: (element: Element | null) => boolean;
+export declare const isSeparator: (node: Element | null) => boolean;
+export declare const hasFillAfter: (node: Element | null) => boolean;
+export declare const lockBody: (cursor: string, onEscape: () => void) => () => void;

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

@@ -0,0 +1,42 @@
+//#region components/panel-group/core/dom.ts
+var FILL_ATTRIBUTE = "data-sd-panels-fill";
+var SEPARATOR_ATTRIBUTE = "data-sd-panels-separator";
+var isRtl = (element) => !!element && getComputedStyle(element).direction === "rtl";
+var isSeparator = (node) => {
+	var _node$hasAttribute;
+	return (_node$hasAttribute = node === null || node === void 0 ? void 0 : node.hasAttribute("data-sd-panels-separator")) !== null && _node$hasAttribute !== void 0 ? _node$hasAttribute : false;
+};
+var hasFillAfter = (node) => {
+	const next = node === null || node === void 0 ? void 0 : node.nextElementSibling;
+	return !!next && (next.hasAttribute("data-sd-panels-fill") || hasFillAfter(next));
+};
+var locks = 0;
+var saved = {};
+var lockBody = (cursor, onEscape) => {
+	const { style } = document.body;
+	const onKeyDown = (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			onEscape();
+		}
+	};
+	if (locks === 0) saved = {
+		cursor: style.cursor,
+		userSelect: style.userSelect,
+		webkitUserSelect: style.webkitUserSelect
+	};
+	locks += 1;
+	Object.assign(style, {
+		cursor,
+		userSelect: "none",
+		webkitUserSelect: "none"
+	});
+	addEventListener("keydown", onKeyDown, true);
+	return () => {
+		locks -= 1;
+		if (locks === 0) Object.assign(style, saved);
+		removeEventListener("keydown", onKeyDown, true);
+	};
+};
+//#endregion
+export { FILL_ATTRIBUTE, SEPARATOR_ATTRIBUTE, hasFillAfter, isRtl, isSeparator, lockBody };

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

@@ -0,0 +1,9 @@
+export declare const coarsePointer: {
+    get: () => boolean;
+    subscribe: (listener: () => void) => () => void | undefined;
+};
+export declare const reducedMotion: {
+    get: () => boolean;
+    subscribe: (listener: () => void) => () => void | undefined;
+};
+export declare const edgeSize: () => 8 | 20;

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

@@ -0,0 +1,31 @@
+//#region components/panel-group/core/env.ts
+var media = (query) => {
+	let list;
+	const get = () => {
+		var _list;
+		(_list = list) !== null && _list !== void 0 || (list = typeof matchMedia === "function" ? matchMedia(query) : void 0);
+		return list;
+	};
+	return {
+		get: () => {
+			var _get$matches, _get;
+			return (_get$matches = (_get = get()) === null || _get === void 0 ? void 0 : _get.matches) !== null && _get$matches !== void 0 ? _get$matches : false;
+		},
+		subscribe: (listener) => {
+			var _get2;
+			(_get2 = get()) === null || _get2 === void 0 || _get2.addEventListener("change", listener);
+			return () => {
+				var _get3;
+				return (_get3 = get()) === null || _get3 === void 0 ? void 0 : _get3.removeEventListener("change", listener);
+			};
+		}
+	};
+};
+var coarsePointer = media("(pointer: coarse)");
+var reducedMotion = media("(prefers-reduced-motion: reduce)");
+var EDGE_SIZE_FINE = 8;
+var EDGE_SIZE_COARSE = 20;
+/** 边缘伸缩杆的命中厚度（px）。 */
+var edgeSize = () => coarsePointer.get() ? EDGE_SIZE_COARSE : EDGE_SIZE_FINE;
+//#endregion
+export { coarsePointer, edgeSize, reducedMotion };

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

@@ -0,0 +1,17 @@
+import type { PanelController } from './panel';
+export type GripState = 'crossed' | 'held' | null;
+export interface Point {
+    clientX: number;
+    clientY: number;
+}
+declare const invalidate: () => void;
+export declare const grips: {
+    at(point: Point): HTMLElement[];
+    invalidate: typeof invalidate;
+    mark(key: 'crossed' | 'held', elements: HTMLElement[]): void;
+    partners(elements: HTMLElement[], self: HTMLElement | null): PanelController[];
+    register(element: HTMLElement, controller: PanelController): () => void;
+    state(element: HTMLElement | null): GripState;
+    subscribe: (listener: () => void) => () => void;
+};
+export {};

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

@@ -0,0 +1,76 @@
+import { emitter } from "./utils.js";
+import { coarsePointer } from "./env.js";
+//#region components/panel-group/core/grips.ts
+var HIT_MARGIN_FINE = 5;
+var HIT_MARGIN_COARSE = 12;
+var registry = /* @__PURE__ */ new Map();
+var bus = emitter();
+var marks = {
+	crossed: /* @__PURE__ */ new Set(),
+	held: /* @__PURE__ */ new Set()
+};
+var rects = null;
+var watching;
+var invalidate = () => {
+	rects = null;
+};
+var sameSet = (elements, current) => elements.length === current.size && elements.every((element) => current.has(element));
+var measure = () => {
+	var _rects;
+	(_rects = rects) !== null && _rects !== void 0 || (rects = [...registry.keys()].map((element) => ({
+		element,
+		rect: element.getBoundingClientRect()
+	})));
+	return rects;
+};
+var grips = {
+	/** 返回与该点相交（需 ≥2 个杆同时命中）的元素列表。 */
+	at(point) {
+		if (registry.size < 2) return [];
+		const margin = coarsePointer.get() ? HIT_MARGIN_COARSE : HIT_MARGIN_FINE;
+		const hits = measure().filter(({ rect }) => point.clientX >= rect.left - margin && point.clientX <= rect.right + margin && point.clientY >= rect.top - margin && point.clientY <= rect.bottom + margin).map(({ element }) => element);
+		return hits.length > 1 ? hits : [];
+	},
+	invalidate,
+	mark(key, elements) {
+		if (sameSet(elements, marks[key])) return;
+		marks[key] = new Set(elements);
+		bus.emit();
+	},
+	partners(elements, self) {
+		return elements.filter((element) => element !== self).map((element) => registry.get(element)).filter((controller) => controller !== void 0);
+	},
+	register(element, controller) {
+		registry.set(element, controller);
+		invalidate();
+		if (!watching && typeof window !== "undefined") {
+			watching = new AbortController();
+			const { signal } = watching;
+			addEventListener("resize", invalidate, { signal });
+			addEventListener("scroll", invalidate, {
+				capture: true,
+				passive: true,
+				signal
+			});
+		}
+		const stop = controller.motion.size.on("change", invalidate);
+		return () => {
+			stop();
+			registry.delete(element);
+			marks.crossed.delete(element);
+			marks.held.delete(element);
+			invalidate();
+			if (registry.size === 0) {
+				watching === null || watching === void 0 || watching.abort();
+				watching = void 0;
+			}
+		};
+	},
+	state(element) {
+		if (!element) return null;
+		return marks.held.has(element) ? "held" : marks.crossed.has(element) ? "crossed" : null;
+	},
+	subscribe: bus.subscribe
+};
+//#endregion
+export { grips };

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

@@ -0,0 +1,13 @@
+import type { Axes, Orientation, Side } from './axes';
+import type { PanelController } from './panel';
+export interface EngineGroup {
+    axes: Axes;
+    fill: {
+        anchor: 'flex-start' | 'flex-end';
+        size: number | '100%';
+    };
+    notify: () => void;
+    panels: Map<Side, PanelController>;
+    subscribe: (listener: () => void) => () => void;
+}
+export declare const createEngineGroup: (orientation?: Orientation) => EngineGroup;

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

@@ -0,0 +1,19 @@
+import { AXES } from "./axes.js";
+import { emitter } from "./utils.js";
+import { reactive } from "vue";
+//#region components/panel-group/core/group.ts
+var createEngineGroup = (orientation = "horizontal") => {
+	const bus = emitter();
+	return {
+		axes: AXES[orientation],
+		fill: reactive({
+			anchor: "flex-start",
+			size: "100%"
+		}),
+		notify: () => bus.emit(),
+		panels: /* @__PURE__ */ new Map(),
+		subscribe: bus.subscribe
+	};
+};
+//#endregion
+export { createEngineGroup };

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

@@ -0,0 +1,16 @@
+import type { ResolvedTransition } from './transition';
+export type MotionValueEvent = 'change' | 'animationComplete';
+export type MotionValueListener = (value: number) => void;
+export declare class MotionValue {
+    private current;
+    private changeListeners;
+    private completeListeners;
+    private stopAnimation;
+    constructor(initial?: number);
+    get(): number;
+    jump(value: number): void;
+    private set;
+    animate(target: number, transition?: ResolvedTransition): void;
+    stop(): void;
+    on(event: MotionValueEvent, listener: MotionValueListener | (() => void)): () => void;
+}

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

@@ -0,0 +1,58 @@
+import _objectSpread2 from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/objectSpread2.js";
+import _objectWithoutProperties from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/objectWithoutProperties.js";
+import { timing } from "./transition.js";
+import { animate } from "motion-v";
+//#region components/panel-group/core/motion.ts
+var _excluded = ["duration", "easing"];
+var MotionValue = class {
+	constructor(initial = 0) {
+		this.changeListeners = /* @__PURE__ */ new Set();
+		this.completeListeners = /* @__PURE__ */ new Set();
+		this.current = initial;
+	}
+	get() {
+		return this.current;
+	}
+	jump(value) {
+		this.stop();
+		this.set(value);
+	}
+	set(value) {
+		if (value === this.current) return;
+		this.current = value;
+		this.changeListeners.forEach((listener) => listener(value));
+	}
+	animate(target, transition = timing()) {
+		this.stop();
+		const { duration, easing } = transition, options = _objectWithoutProperties(transition, _excluded);
+		const complete = () => {
+			this.set(target);
+			this.completeListeners.forEach((listener) => listener());
+		};
+		if (target === this.current || duration <= 0) {
+			complete();
+			return;
+		}
+		const animation = animate(this.current, target, _objectSpread2(_objectSpread2({}, options), {}, {
+			duration: duration / 1e3,
+			ease: easing,
+			onUpdate: (value) => this.set(value),
+			onComplete: complete
+		}));
+		this.stopAnimation = () => animation.stop();
+	}
+	stop() {
+		var _this$stopAnimation;
+		(_this$stopAnimation = this.stopAnimation) === null || _this$stopAnimation === void 0 || _this$stopAnimation.call(this);
+		this.stopAnimation = void 0;
+	}
+	on(event, listener) {
+		const set = event === "change" ? this.changeListeners : this.completeListeners;
+		set.add(listener);
+		return () => {
+			set.delete(listener);
+		};
+	}
+};
+//#endregion
+export { MotionValue };

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

@@ -0,0 +1,54 @@
+import type { PanelSize, PanelTransition } from '../types';
+import type { EngineGroup } from './group';
+import { MotionValue } from './motion';
+export interface PanelOptions {
+    collapsed?: boolean;
+    defaultSize?: PanelSize;
+    maxSize?: PanelSize;
+    minSize?: PanelSize;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    onSizeChange?: (size: PanelSize) => void;
+    size: PanelSize;
+    transition?: PanelTransition;
+}
+export interface PanelState {
+    bare: boolean;
+    dragging: boolean;
+    end: boolean | undefined;
+    folding: boolean;
+}
+export interface PanelKeyEvent {
+    key: string;
+    preventDefault: () => void;
+    shiftKey: boolean;
+}
+export interface PanelDrag {
+    cancel: () => void;
+    end: () => void;
+    move: (offset: {
+        x: number;
+        y: number;
+    }) => void;
+    start: (cursor?: string) => void;
+}
+export interface PanelController {
+    attach: (element: HTMLElement) => () => void;
+    bounds: () => {
+        max: number;
+        min: number;
+    };
+    destroy: () => void;
+    drag: PanelDrag;
+    motion: {
+        content: MotionValue;
+        size: MotionValue;
+    };
+    options: PanelOptions;
+    reset: () => void;
+    resizeByKey: (event: PanelKeyEvent) => void;
+    state: PanelState;
+    subscribe: (listener: () => void) => () => void;
+    sync: (options: PanelOptions, mounting?: boolean) => void;
+    target: number;
+}
+export declare const createPanel: (group: EngineGroup, initial: PanelOptions) => PanelController;