@destyler/splitter 0.1.0 → 0.2.0

package/dist/{index.js → index.mjs}

@@ -27,10 +27,9 @@ const dom = createScope({
 		return cursor;
 	},
 	getPanelStyle(ctx, id) {
-		const flexGrow = ctx.panels.find((panel) => panel.id === id)?.size ?? "0";
 		return {
 			flexBasis: 0,
-			flexGrow,
+			flexGrow: ctx.panels.find((panel) => panel.id === id)?.size ?? "0",
 			flexShrink: 1,
 			overflow: "hidden"
 		};
@@ -85,7 +84,7 @@ function getNormalizedPanels(ctx) {
 	validateSize("size", totalSize);
 	let end = 0;
 	let remainingSize = 0;
-	const result = panels.map((panel) => {
+	return panels.map((panel) => {
 		const start = end;
 		if (panel.size != null) {
 			end += panel.size;
@@ -108,7 +107,6 @@ function getNormalizedPanels(ctx) {
 			remainingSize
 		};
 	});
-	return result;
 }
 function getHandlePanels(ctx, id = ctx.activeResizeId) {
 	const [beforeId, afterId] = id?.split(":") ?? [];
@@ -189,8 +187,7 @@ function connect(state, send, normalize) {
 	const panels = state.context.panels;
 	function getResizeTriggerState(props$1) {
 		const { id, disabled } = props$1;
-		const ids = id.split(":");
-		const panelIds = ids.map((id$1) => dom.getPanelId(state.context, id$1));
+		const panelIds = id.split(":").map((id$1) => dom.getPanelId(state.context, id$1));
 		const panels$1 = getHandleBounds(state.context, id);
 		return {
 			disabled: !!disabled,
@@ -207,20 +204,18 @@ function connect(state, send, normalize) {
 		getResizeTriggerState,
 		bounds: getHandleBounds(state.context),
 		setToMinSize(id) {
-			const panel = panels.find((panel$1) => panel$1.id === id);
 			send({
 				type: "SET_PANEL_SIZE",
 				id,
-				size: panel?.minSize,
+				size: panels.find((panel) => panel.id === id)?.minSize,
 				src: "setToMinSize"
 			});
 		},
 		setToMaxSize(id) {
-			const panel = panels.find((panel$1) => panel$1.id === id);
 			send({
 				type: "SET_PANEL_SIZE",
 				id,
-				size: panel?.maxSize,
+				size: panels.find((panel) => panel.id === id)?.maxSize,
 				src: "setToMaxSize"
 			});
 		},
@@ -335,7 +330,7 @@ function connect(state, send, normalize) {
 					if (event.defaultPrevented) return;
 					if (disabled) return;
 					const moveStep = getEventStep(event) * step;
-					const keyMap = {
+					const exec = {
 						Enter() {
 							send("ENTER");
 						},
@@ -369,9 +364,7 @@ function connect(state, send, normalize) {
 						End() {
 							send("END");
 						}
-					};
-					const key = getEventKey(event, state.context);
-					const exec = keyMap[key];
+					}[getEventKey(event, state.context)];
 					if (exec) {
 						exec(event);
 						event.preventDefault();
@@ -385,7 +378,6 @@ function connect(state, send, normalize) {
 //#endregion
 //#region src/machine.ts
 function machine(userContext) {
-	const ctx = compact(userContext);
 	return createMachine({
 		id: "splitter",
 		initial: "idle",
@@ -399,13 +391,13 @@ function machine(userContext) {
 				isAtMin: false,
 				isAtMax: false
 			},
-			...ctx
+			...compact(userContext)
 		},
 		created: ["setPreviousPanels", "setInitialSize"],
 		watch: { size: ["setActiveResizeState"] },
 		computed: {
-			isHorizontal: (ctx$1) => ctx$1.orientation === "horizontal",
-			panels: (ctx$1) => getNormalizedPanels(ctx$1)
+			isHorizontal: (ctx) => ctx.orientation === "horizontal",
+			panels: (ctx) => getNormalizedPanels(ctx)
 		},
 		on: { SET_PANEL_SIZE: { actions: "setPanelSize" } },
 		states: {
@@ -495,9 +487,8 @@ function machine(userContext) {
 			}
 		}
 	}, {
-		activities: { trackPointerMove: (ctx$1, _evt, { send }) => {
-			const doc = dom.getDoc(ctx$1);
-			return trackPointerMove(doc, {
+		activities: { trackPointerMove: (ctx, _evt, { send }) => {
+			return trackPointerMove(dom.getDoc(ctx), {
 				onPointerMove(info) {
 					send({
 						type: "POINTER_MOVE",
@@ -510,46 +501,46 @@ function machine(userContext) {
 			});
 		} },
 		guards: {
-			isStartPanelAtMin: (ctx$1) => ctx$1.activeResizeState.isAtMin,
-			isStartPanelAtMax: (ctx$1) => ctx$1.activeResizeState.isAtMax,
-			isHorizontal: (ctx$1) => ctx$1.isHorizontal,
-			isVertical: (ctx$1) => !ctx$1.isHorizontal
+			isStartPanelAtMin: (ctx) => ctx.activeResizeState.isAtMin,
+			isStartPanelAtMax: (ctx) => ctx.activeResizeState.isAtMax,
+			isHorizontal: (ctx) => ctx.isHorizontal,
+			isVertical: (ctx) => !ctx.isHorizontal
 		},
 		delays: { HOVER_DELAY: 250 },
 		actions: {
-			setGlobalCursor(ctx$1) {
-				dom.setupGlobalCursor(ctx$1);
+			setGlobalCursor(ctx) {
+				dom.setupGlobalCursor(ctx);
 			},
-			clearGlobalCursor(ctx$1) {
-				dom.removeGlobalCursor(ctx$1);
+			clearGlobalCursor(ctx) {
+				dom.removeGlobalCursor(ctx);
 			},
-			invokeOnResize(ctx$1) {
-				ctx$1.onSizeChange?.({
-					size: Array.from(ctx$1.size),
-					activeHandleId: ctx$1.activeResizeId
+			invokeOnResize(ctx) {
+				ctx.onSizeChange?.({
+					size: Array.from(ctx.size),
+					activeHandleId: ctx.activeResizeId
 				});
 			},
-			invokeOnResizeEnd(ctx$1) {
-				ctx$1.onSizeChangeEnd?.({
-					size: Array.from(ctx$1.size),
-					activeHandleId: ctx$1.activeResizeId
+			invokeOnResizeEnd(ctx) {
+				ctx.onSizeChangeEnd?.({
+					size: Array.from(ctx.size),
+					activeHandleId: ctx.activeResizeId
 				});
 			},
-			setActiveHandleId(ctx$1, evt) {
-				ctx$1.activeResizeId = evt.id;
+			setActiveHandleId(ctx, evt) {
+				ctx.activeResizeId = evt.id;
 			},
-			clearActiveHandleId(ctx$1) {
-				ctx$1.activeResizeId = null;
+			clearActiveHandleId(ctx) {
+				ctx.activeResizeId = null;
 			},
-			setInitialSize(ctx$1) {
-				ctx$1.initialSize = ctx$1.panels.slice().map((panel) => ({
+			setInitialSize(ctx) {
+				ctx.initialSize = ctx.panels.slice().map((panel) => ({
 					id: panel.id,
 					size: panel.size
 				}));
 			},
-			setPanelSize(ctx$1, evt) {
+			setPanelSize(ctx, evt) {
 				const { id, size } = evt;
-				ctx$1.size = ctx$1.size.map((panel) => {
+				ctx.size = ctx.size.map((panel) => {
 					const panelSize = clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100);
 					return panel.id === id ? {
 						...panel,
@@ -557,84 +548,82 @@ function machine(userContext) {
 					} : panel;
 				});
 			},
-			setStartPanelToMin(ctx$1) {
-				const bounds = getPanelBounds(ctx$1);
+			setStartPanelToMin(ctx) {
+				const bounds = getPanelBounds(ctx);
 				if (!bounds) return;
 				const { before, after } = bounds;
-				ctx$1.size[before.index].size = before.min;
-				ctx$1.size[after.index].size = after.min;
+				ctx.size[before.index].size = before.min;
+				ctx.size[after.index].size = after.min;
 			},
-			setStartPanelToMax(ctx$1) {
-				const bounds = getPanelBounds(ctx$1);
+			setStartPanelToMax(ctx) {
+				const bounds = getPanelBounds(ctx);
 				if (!bounds) return;
 				const { before, after } = bounds;
-				ctx$1.size[before.index].size = before.max;
-				ctx$1.size[after.index].size = after.max;
+				ctx.size[before.index].size = before.max;
+				ctx.size[after.index].size = after.max;
 			},
-			expandStartPanel(ctx$1, evt) {
-				const bounds = getPanelBounds(ctx$1);
+			expandStartPanel(ctx, evt) {
+				const bounds = getPanelBounds(ctx);
 				if (!bounds) return;
 				const { before, after } = bounds;
-				ctx$1.size[before.index].size = before.up(evt.step);
-				ctx$1.size[after.index].size = after.down(evt.step);
+				ctx.size[before.index].size = before.up(evt.step);
+				ctx.size[after.index].size = after.down(evt.step);
 			},
-			shrinkStartPanel(ctx$1, evt) {
-				const bounds = getPanelBounds(ctx$1);
+			shrinkStartPanel(ctx, evt) {
+				const bounds = getPanelBounds(ctx);
 				if (!bounds) return;
 				const { before, after } = bounds;
-				ctx$1.size[before.index].size = before.down(evt.step);
-				ctx$1.size[after.index].size = after.up(evt.step);
+				ctx.size[before.index].size = before.down(evt.step);
+				ctx.size[after.index].size = after.up(evt.step);
 			},
-			resetStartPanel(ctx$1, evt) {
-				const bounds = getPanelBounds(ctx$1, evt.id);
+			resetStartPanel(ctx, evt) {
+				const bounds = getPanelBounds(ctx, evt.id);
 				if (!bounds) return;
 				const { before, after } = bounds;
-				ctx$1.size[before.index].size = ctx$1.initialSize[before.index].size;
-				ctx$1.size[after.index].size = ctx$1.initialSize[after.index].size;
+				ctx.size[before.index].size = ctx.initialSize[before.index].size;
+				ctx.size[after.index].size = ctx.initialSize[after.index].size;
 			},
-			focusResizeHandle(ctx$1) {
+			focusResizeHandle(ctx) {
 				raf(() => {
-					dom.getActiveHandleEl(ctx$1)?.focus({ preventScroll: true });
+					dom.getActiveHandleEl(ctx)?.focus({ preventScroll: true });
 				});
 			},
-			blurResizeHandle(ctx$1) {
+			blurResizeHandle(ctx) {
 				raf(() => {
-					dom.getActiveHandleEl(ctx$1)?.blur();
+					dom.getActiveHandleEl(ctx)?.blur();
 				});
 			},
-			setPreviousPanels(ctx$1) {
-				ctx$1.previousPanels = ctx$1.panels.slice();
+			setPreviousPanels(ctx) {
+				ctx.previousPanels = ctx.panels.slice();
 			},
-			setActiveResizeState(ctx$1) {
-				const panels = getPanelBounds(ctx$1);
+			setActiveResizeState(ctx) {
+				const panels = getPanelBounds(ctx);
 				if (!panels) return;
 				const { before } = panels;
-				ctx$1.activeResizeState = {
+				ctx.activeResizeState = {
 					isAtMin: before.isAtMin,
 					isAtMax: before.isAtMax
 				};
 			},
-			setPointerValue(ctx$1, evt) {
-				const panels = getHandlePanels(ctx$1);
-				const bounds = getHandleBounds(ctx$1);
+			setPointerValue(ctx, evt) {
+				const panels = getHandlePanels(ctx);
+				const bounds = getHandleBounds(ctx);
 				if (!panels || !bounds) return;
-				const rootEl = dom.getRootEl(ctx$1);
+				const rootEl = dom.getRootEl(ctx);
 				if (!rootEl) return;
-				const relativePoint = getRelativePoint(evt.point, rootEl);
-				const percentValue = relativePoint.getPercentValue({
-					dir: ctx$1.dir,
-					orientation: ctx$1.orientation
-				});
-				let pointValue = percentValue * 100;
-				ctx$1.activeResizeState = {
+				let pointValue = getRelativePoint(evt.point, rootEl).getPercentValue({
+					dir: ctx.dir,
+					orientation: ctx.orientation
+				}) * 100;
+				ctx.activeResizeState = {
 					isAtMin: pointValue < bounds.min,
 					isAtMax: pointValue > bounds.max
 				};
 				pointValue = clamp(pointValue, bounds.min, bounds.max);
 				const { before, after } = panels;
 				const offset = pointValue - before.end;
-				ctx$1.size[before.index].size = before.size + offset;
-				ctx$1.size[after.index].size = after.size - offset;
+				ctx.size[before.index].size = before.size + offset;
+				ctx.size[after.index].size = after.size - offset;
 			}
 		}
 	});

package/package.json

@@ -1,26 +1,35 @@
 {
   "name": "@destyler/splitter",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A component that divides your layout into resizable sections.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
+  "homepage": "https://github.com/destyler/destyler",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/destyler/destyler.git",
+    "directory": "packages/components/splitter"
+  },
   "exports": {
-    ".": "./dist/index.js"
+    ".": "./dist/index.mjs"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.mts",
   "files": [
     "*.d.ts",
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.1.0",
-    "@destyler/types": "0.1.0",
-    "@destyler/xstate": "0.1.0",
-    "@destyler/dom": "0.1.0",
-    "@destyler/utils": "0.1.0"
+    "@destyler/anatomy": "0.2.0",
+    "@destyler/dom": "0.2.0",
+    "@destyler/utils": "0.2.0",
+    "@destyler/types": "0.2.0",
+    "@destyler/xstate": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
   },
   "scripts": {
     "clear": "rimraf ./dist",