svelte-fluentui 1.3.2 → 1.4.0

package/dist/components/layout/MultiSplitter.svelte.d.ts

@@ -1,25 +1,35 @@
-import type { SlotType } from "../../types/index.js";
-type Orientation = "horizontal" | "vertical";
-export type MultiSplitterEventArgs = {
+export type { MultiSplitterContext, PaneHandle, PaneRegistration } from "../../types/multi-splitter.js";
+export type MultiSplitterResizeDetail = {
     index: number;
     pane: HTMLElement;
+    size: number;
 };
-export type MultiSplitterResizeEventArgs = {
+export type MultiSplitterToggleDetail = {
     index: number;
     pane: HTMLElement;
-    size: number;
 };
+import type { SlotType } from "../../types/index.js";
+type Orientation = "horizontal" | "vertical";
 type Props = {
     children?: SlotType;
     orientation?: Orientation;
-    barSize?: string;
+    /** localStorage persistence key — saves under "fluent-multi-splitter:<id>". */
+    id?: string;
+    /** Keyboard step in px when a gutter is focused. */
+    step?: number;
+    /** Rail width in px when a pane is minimized. */
+    railSize?: number;
+    /** Drag-to-rail snap threshold as ratio of the drag-start size (0–1). */
+    minimizeThreshold?: number;
     width?: string;
     height?: string;
-    onCollapse?: (args: MultiSplitterEventArgs) => void;
-    onExpand?: (args: MultiSplitterEventArgs) => void;
-    onResize?: (args: MultiSplitterResizeEventArgs) => void;
     class?: string;
     style?: string;
+    /** Logs drag / minimize transitions to console (development aid). */
+    debug?: boolean;
+    onresize?: (detail: MultiSplitterResizeDetail) => void;
+    oncollapse?: (detail: MultiSplitterToggleDetail) => void;
+    onexpand?: (detail: MultiSplitterToggleDetail) => void;
 };
 declare const MultiSplitter: import("svelte").Component<Props, {}, "">;
 type MultiSplitter = ReturnType<typeof MultiSplitter>;

package/dist/components/layout/MultiSplitterPane.svelte

@@ -1,16 +1,34 @@
+<!--
+ * MultiSplitterPane
+ *
+ * Child component of MultiSplitter. Registers itself with the parent via
+ * "multi-splitter" context on mount, receives a stable handle, and reads
+ * back a reactive `index` + `isLast` so it knows whether to render the
+ * trailing gutter (every pane except the last renders one — gutters
+ * alternate with panes in the parent flex row/column).
+ *
+ * Sizing/min/max/minimize are passed by prop instead of data-attrs.
+ *
+ * Drag/keyboard/click logic lives entirely in MultiSplitter; this component
+ * just forwards events to the context with its own handle so the parent
+ * knows which gutter was hit.
+-->
+
 <script lang="ts">
-	import type {SlotType} from "../../types/index.js"
 	import {getContext, onMount, onDestroy} from "svelte"
-
-	type PaneStatus = "normal" | "collapsed" | "expanded"
+	import type {SlotType} from "../../types/index.js"
+	import type {MultiSplitterContext, PaneHandle} from "../../types/multi-splitter.js"
 
 	type Props = {
 		children?: SlotType
+		/** Initial size: "200px" or "30%". If omitted, shares leftover with other unsized panes. */
 		size?: string
-		minSize?: string
-		maxSize?: string
-		resizable?: boolean
-		collapsible?: boolean
+		/** Min size: "150px" or "10%". Default 0. */
+		min?: string
+		/** Max size: "400px" or "50%". Default unbounded. */
+		max?: string
+		/** If true, pane can collapse to a rail. */
+		minimize?: boolean
 		class?: string
 		style?: string
 	}
@@ -18,119 +36,80 @@
 	let {
 		children = undefined,
 		size = undefined,
-		minSize = undefined,
-		maxSize = undefined,
-		resizable = true,
-		collapsible = false,
+		min = undefined,
+		max = undefined,
+		minimize = false,
 		class: className = "",
 		style = ""
 	}: Props = $props()
 
-	let element: HTMLDivElement | undefined = $state()
-	let index = $state(-1)
-	let status = $state<PaneStatus>("normal")
-	let isLast = $state(false)
+	const ctx = getContext<MultiSplitterContext>("multi-splitter")
+	if (!ctx) {
+		throw new Error("MultiSplitterPane must be a direct child of MultiSplitter")
+	}
 
-	const splitter = getContext<{
-		orientation: "horizontal" | "vertical"
-		registerPane: (pane: any) => number
-		unregisterPane: (index: number) => void
-		resizeExec: (e: MouseEvent, index: number) => void
-		collapseExec: (e: MouseEvent, index: number) => void
-		expandExec: (e: MouseEvent, index: number) => void
-	}>("multisplitter")
+	let paneEl: HTMLDivElement | undefined = $state()
+	let gutterEl: HTMLDivElement | undefined = $state()
+	let handle: PaneHandle | undefined = $state()
 
 	onMount(() => {
-		if (splitter && element) {
-			index = splitter.registerPane({
-				element,
-				size,
-				minSize,
-				maxSize,
-				resizable,
-				collapsible,
-				status
-			})
-		}
+		if (!paneEl) return
+		handle = ctx.registerPane({
+			el: paneEl,
+			getGutterEl: () => gutterEl,
+			size,
+			min,
+			max,
+			canMin: minimize
+		})
 	})
 
 	onDestroy(() => {
-		if (splitter && index >= 0) {
-			splitter.unregisterPane(index)
-		}
+		if (handle) ctx.unregisterPane(handle)
 	})
 
-	let computedStyle = $derived(
-		[
-			size && (splitter.orientation === "horizontal" ? `width: ${size};` : `height: ${size};`),
-			minSize &&
-				(splitter.orientation === "horizontal"
-					? `min-width: ${minSize};`
-					: `min-height: ${minSize};`),
-			maxSize &&
-				(splitter.orientation === "horizontal"
-					? `max-width: ${maxSize};`
-					: `max-height: ${maxSize};`),
-			!size && "flex: 1;",
-			style
-		]
-			.filter(Boolean)
-			.join(" ")
-	)
+	const index = $derived(handle ? ctx.indexOf(handle) : -1)
+	const isLast = $derived(handle ? ctx.isLast(handle) : false)
+	const isMinimized = $derived(handle ? ctx.isMinimized(handle) : false)
 
-	let isExpandable = $derived(status === "collapsed")
-	let isCollapsible = $derived(collapsible && status !== "collapsed")
-	let isResizable = $derived(resizable && status !== "collapsed")
+	function handleGutterPointerDown(e: PointerEvent) {
+		if (handle) ctx.onGutterPointerDown(e, handle)
+	}
+	function handleGutterKeydown(e: KeyboardEvent) {
+		if (handle) ctx.onGutterKeydown(e, handle)
+	}
+	function handleGutterDblClick(e: MouseEvent) {
+		if (handle) ctx.onGutterDblClick(e, handle)
+	}
+	function handlePaneClick(e: MouseEvent) {
+		if (handle) ctx.onPaneClick(e, handle)
+	}
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
-	bind:this={element}
-	class="fluent-multi-splitter-pane {className}"
-	style={computedStyle}
+	bind:this={paneEl}
+	class="fluent-multi-splitter-pane fluent-multi-splitter-pane--{ctx.orientation} {className}"
+	class:fluent-multi-splitter-pane--minimized={isMinimized}
 	data-index={index}
-	data-status={status}
+	style={style}
+	onclick={handlePaneClick}
 >
 	{@render children?.()}
 </div>
 
 {#if !isLast}
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<div
-		class="fluent-multi-splitter-bar"
-		data-status={status}
-		onmousedown={(e) => splitter.resizeExec(e, index)}
-		onclick={(e) => {
-			e.preventDefault()
-			e.stopPropagation()
-		}}
-	>
-		{#if isCollapsible}
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<span
-				data-part="collapse"
-				onmousedown={(e) => {
-					e.preventDefault()
-					e.stopPropagation()
-					splitter.collapseExec(e, index)
-				}}
-			></span>
-		{/if}
-
-		{#if isResizable}
-			<span data-part="resize"></span>
-		{/if}
-
-		{#if isExpandable}
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<span
-				data-part="expand"
-				onmousedown={(e) => {
-					e.preventDefault()
-					e.stopPropagation()
-					splitter.expandExec(e, index)
-				}}
-			></span>
-		{/if}
-	</div>
+		bind:this={gutterEl}
+		class="fluent-multi-splitter-gutter"
+		role="separator"
+		aria-orientation={ctx.orientation === "vertical" ? "horizontal" : "vertical"}
+		tabindex="0"
+		onpointerdown={handleGutterPointerDown}
+		onkeydown={handleGutterKeydown}
+		ondblclick={handleGutterDblClick}
+	></div>
 {/if}

package/dist/components/layout/MultiSplitterPane.svelte.d.ts

@@ -1,11 +1,14 @@
 import type { SlotType } from "../../types/index.js";
 type Props = {
     children?: SlotType;
+    /** Initial size: "200px" or "30%". If omitted, shares leftover with other unsized panes. */
     size?: string;
-    minSize?: string;
-    maxSize?: string;
-    resizable?: boolean;
-    collapsible?: boolean;
+    /** Min size: "150px" or "10%". Default 0. */
+    min?: string;
+    /** Max size: "400px" or "50%". Default unbounded. */
+    max?: string;
+    /** If true, pane can collapse to a rail. */
+    minimize?: boolean;
     class?: string;
     style?: string;
 };

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

@@ -8,5 +8,6 @@ export { default as BodyContent } from "./BodyContent.svelte";
 export { default as Grid } from "./Grid.svelte";
 export { default as GridItem } from "./GridItem.svelte";
 export { default as MultiSplitter } from "./MultiSplitter.svelte";
+export type { MultiSplitterResizeDetail, MultiSplitterToggleDetail } from "./MultiSplitter.svelte";
 export { default as MultiSplitterPane } from "./MultiSplitterPane.svelte";
 export { default as Panel } from "./Panel.svelte";

package/dist/types/multi-splitter.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Shared types for MultiSplitter / MultiSplitterPane communication via the
+ * "multi-splitter" Svelte context.
+ *
+ * PaneHandle is intentionally opaque from the pane's POV — it just holds it
+ * and passes it back to context methods for identity. The parent owns all
+ * working state attached to the handle.
+ */
+export type PaneRegistration = {
+    el: HTMLElement;
+    getGutterEl: () => HTMLElement | undefined;
+    size?: string;
+    min?: string;
+    max?: string;
+    canMin: boolean;
+};
+export type PaneHandle = {
+    /** Opaque identity. Carries reactive `isMin` for the pane to read. */
+    readonly id: number;
+    readonly state: {
+        isMin: boolean;
+    };
+};
+export type MultiSplitterContext = {
+    readonly orientation: "horizontal" | "vertical";
+    registerPane(opts: PaneRegistration): PaneHandle;
+    unregisterPane(handle: PaneHandle): void;
+    indexOf(handle: PaneHandle): number;
+    isLast(handle: PaneHandle): boolean;
+    isMinimized(handle: PaneHandle): boolean;
+    onGutterPointerDown(e: PointerEvent, handle: PaneHandle): void;
+    onGutterKeydown(e: KeyboardEvent, handle: PaneHandle): void;
+    onGutterDblClick(e: MouseEvent, handle: PaneHandle): void;
+    onPaneClick(e: MouseEvent, handle: PaneHandle): void;
+};

package/dist/types/multi-splitter.js

@@ -0,0 +1,9 @@
+/**
+ * Shared types for MultiSplitter / MultiSplitterPane communication via the
+ * "multi-splitter" Svelte context.
+ *
+ * PaneHandle is intentionally opaque from the pane's POV — it just holds it
+ * and passes it back to context methods for identity. The parent owns all
+ * working state attached to the handle.
+ */
+export {};

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.3.2";
+export declare const VERSION = "1.4.0";

package/dist/version.js

@@ -1,4 +1,4 @@
 // Auto-generated by scripts/pre-package.js — do NOT edit by hand.
 // In dev this file holds whatever value was committed last; on each `npm run package`
 // the pre-package script overwrites it with the current package.json version.
-export const VERSION = "1.3.2";
+export const VERSION = "1.4.0";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-fluentui",
-	"version": "1.3.2",
+	"version": "1.4.0",
 	"description": "A Svelte wrapper library for Microsoft FluentUI web components",
 	"license": "MIT",
 	"author": "KeenMate",