cleanup

svecosystem · Feb 23, 2024 · 61dc263 · 61dc263
1 parent 50a0d62
commit 61dc263
Show file tree

Hide file tree

Showing 16 changed files with 43 additions and 50 deletions.
diff --git a/packages/paneforge/src/lib/components/pane-group.svelte b/packages/paneforge/src/lib/components/pane-group.svelte
@@ -14,7 +14,7 @@
 	export let onLayoutChange: PaneGroupOnLayout | null = null;
 	export let storage: PaneGroupStorage = defaultStorage as PaneGroupStorage;
 	export let el: $$Props["el"] = undefined;
-	export let api: $$Props["api"] = undefined;
+	export let paneGroup: $$Props["paneGroup"] = undefined;
 
 	let styleFromProps: $$Props["style"] = undefined;
 	export { styleFromProps as style };
@@ -39,7 +39,7 @@
 	$: updateOption("onLayout", onLayoutChange);
 	$: updateOption("storage", storage);
 
-	api = {
+	paneGroup = {
 		getLayout,
 		setLayout,
 		getId: () => $groupId,

diff --git a/packages/paneforge/src/lib/components/pane-resizer.svelte b/packages/paneforge/src/lib/components/pane-resizer.svelte
@@ -98,11 +98,12 @@
 		}) + styleFromProps ?? "";
 
 	$: attrs = {
-		"data-pane-group-direction": $direction,
+		"data-direction": $direction,
 		"data-pane-group-id": $groupId,
 		"data-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
 		"data-enabled": !disabled,
 		"data-pane-resizer-id": resizeHandleId,
+		"data-pane-resizer": "",
 	} satisfies PaneResizerAttributes;
 </script>
 

diff --git a/packages/paneforge/src/lib/components/pane.svelte b/packages/paneforge/src/lib/components/pane.svelte
@@ -74,18 +74,8 @@
 		getId: () => paneId,
 	};
 
-	let paneHasBeenRegistered = false;
-
-	function handlePaneRegistration() {
-		if (paneHasBeenRegistered) {
-			unregisterPane(paneData);
-		}
-
-		registerPane(paneData);
-	}
-
 	onMount(() => {
-		handlePaneRegistration();
+		registerPane(paneData);
 
 		return () => {
 			unregisterPane(paneData);

diff --git a/packages/paneforge/src/lib/components/types.ts b/packages/paneforge/src/lib/components/types.ts
@@ -155,7 +155,7 @@ export type PaneGroupProps = {
 	 * An imperative API for the pane group. `bind` to this prop to get access
 	 * to methods for controlling the pane group.
 	 */
-	api?: PaneGroupAPI;
+	paneGroup?: PaneGroupAPI;
 } & Omit<HTMLAttributes<HTMLDivElement>, "id">;
 
 export type PaneAPI = {
@@ -201,14 +201,16 @@ export type PaneGroupAttributes = {
 	/** Applied to every pane group element. */
 	"data-pane-group": string;
 	/** The direction of the pane group. */
-	"data-pane-group-direction": Direction;
+	"data-direction": Direction;
 	/** The ID of the pane group. */
 	"data-pane-group-id": string;
 };
 
 export type PaneResizerAttributes = {
+	/** Applied to all resizer elements */
+	"data-pane-resizer": string;
 	/** The direction of the pane group the resize handle belongs to. */
-	"data-pane-group-direction": Direction;
+	"data-direction": Direction;
 	/** The ID of the pane group the resize handle belongs to. */
 	"data-pane-group-id": string;
 	/** Whether the resize handle is active or not. */

diff --git a/packages/paneforge/src/lib/internal/paneforge.ts b/packages/paneforge/src/lib/internal/paneforge.ts
@@ -491,7 +491,7 @@ export function createPaneForge(props: CreatePaneForgeProps) {
 	const paneGroupSelectors = derived([direction, groupId], ([$direction, $groupId]) => {
 		return {
 			"data-pane-group": "",
-			"data-pane-group-direction": $direction,
+			"data-direction": $direction,
 			"data-pane-group-id": $groupId,
 		} satisfies PaneGroupAttributes;
 	});

diff --git a/sites/docs/.eslintignore b/sites/docs/.eslintignore
@@ -12,4 +12,4 @@ pnpm-lock.yaml
 package-lock.json
 yarn.lock
 CHANGELOG.md
-/.contentlayer
+/.contentlayer
diff --git a/sites/docs/content/components/pane-group.md b/sites/docs/content/components/pane-group.md
@@ -103,7 +103,7 @@ export type PaneGroupAttributes = {
 	/** Applied to every pane group element. */
 	"data-pane-group": string;
 	/** The direction of the pane group. */
-	"data-pane-group-direction": "horizontal" | "vertical";
+	"data-direction": "horizontal" | "vertical";
 	/** The ID of the pane group. */
 	"data-pane-group-id": string;
 };

diff --git a/.../content/components/pane-resize-handle.md → ...s/docs/content/components/pane-resizer.md b/.../content/components/pane-resize-handle.md → ...s/docs/content/components/pane-resizer.md
@@ -1,31 +1,31 @@
 ---
-title: PaneResizeHandle
+title: PaneResizer
 description: A draggable handle between two panes that allows the user to resize them.
 tagline: Components
 ---
 
-The `PaneResizeHandle` component is used to create a draggable handle between two panes that allows the user to resize them.
+The `PaneResizer` component is used to create a draggable handle between two panes that allows the user to resize them.
 
 ## Usage
 
 ```svelte {7}
 <script lang="ts">
-	import { PaneGroup, Pane, PaneResizeHandle } from "svelte-pane";
+	import { PaneGroup, Pane, PaneResizer } from "svelte-pane";
 </script>
 
 <PaneGroup direction="horizontal">
 	<Pane defaultSize={50}>Pane 1</Pane>
-	<PaneResizeHandle />
+	<PaneResizer />
 	<Pane defaultSize={50}>Pane 2</Pane>
 </PaneGroup>
 ```
 
 ## Props
 
-Here are the props available for the `PaneResizeHandle` component:
+Here are the props available for the `PaneResizer` component:
 
 ```ts
-export type PaneResizeHandleProps = {
+export type PaneResizerProps = {
 	/**
 	 * Whether the resize handle is disabled.
 	 *
@@ -53,12 +53,12 @@ export type PaneResizeHandleProps = {
 
 ## Data Attributes
 
-The following data attributes are available for the `PaneResizeHandle` component:
+The following data attributes are available for the `PaneResizer` component:
 
 ```ts
-export type PaneResizeHandleAttributes = {
+export type PaneResizerAttributes = {
 	/** The direction of the pane group the handle belongs to. */
-	"data-pane-group-direction": "horizontal" | "vertical";
+	"data-direction": "horizontal" | "vertical";
 	/** The ID of the pane group the handle belongs to. */
 	"data-pane-group-id": string;
 	/** Whether the resize handle is active or not. */

diff --git a/sites/docs/content/examples/collapsible-panes.md b/sites/docs/content/examples/collapsible-panes.md
@@ -17,7 +17,7 @@ Here's a high-level structure of the example above:
 
 ```svelte
 <script lang="ts">
-	import { PaneGroup, Pane, PaneResizeHandle, type PaneAPI } from "paneforge";
+	import { PaneGroup, Pane, PaneResizer, type PaneAPI } from "paneforge";
 
 	let paneOneApi: PaneAPI;
 	let collapsed = false;
@@ -50,11 +50,11 @@ Here's a high-level structure of the example above:
 		onCollapse={() => (collapsed = true)}
 		onExpand={() => (collapsed = false)}
 	/>
-	<PaneResizeHandle />
+	<PaneResizer />
 	<Pane defaultSize={50}>
 		<PaneGroup direction="vertical">
 			<Pane defaultSize={50} />
-			<PaneResizeHandle />
+			<PaneResizer />
 			<Pane defaultSize={50} />
 		</PaneGroup>
 	</Pane>

diff --git a/sites/docs/content/examples/conditional-panes.md b/sites/docs/content/examples/conditional-panes.md
@@ -17,7 +17,7 @@ Here's a high-level structure of the example above:
 
 ```svelte
 <script lang="ts">
-	import { PaneGroup, Pane, PaneResizeHandle } from "paneforge";
+	import { PaneGroup, Pane, PaneResizer } from "paneforge";
 
 	let showPaneOne = true;
 	let showPaneThree = true;
@@ -33,11 +33,11 @@ Here's a high-level structure of the example above:
 <PaneGroup direction="horizontal">
 	{#if showPaneOne}
 		<Pane defaultSize={1 / 3} order={1} />
-		<PaneResizeHandle />
+		<PaneResizer />
 	{/if}
 	<Pane defaultSize={1 / 3} order={2} />
 	{#if showPaneThree}
-		<PaneResizeHandle />
+		<PaneResizer />
 		<Pane defaultSize={1 / 3} order={3} />
 	{/if}
 </PaneGroup>

diff --git a/sites/docs/content/examples/horizontal-groups.md b/sites/docs/content/examples/horizontal-groups.md
@@ -15,12 +15,12 @@ Here's a high-level structure of the example above:
 
 ```svelte
 <script lang="ts">
-	import { PaneGroup, Pane, PaneResizeHandle } from "paneforge";
+	import { PaneGroup, Pane, PaneResizer } from "paneforge";
 </script>
 
 <PaneGroup direction="horizontal">
 	<Pane defaultSize={50} />
-	<PaneResizeHandle />
+	<PaneResizer />
 	<Pane defaultSize={50} />
 </PaneGroup>
 ```
diff --git a/sites/docs/content/examples/nested-groups.md b/sites/docs/content/examples/nested-groups.md
@@ -15,16 +15,16 @@ Here's a high-level structure of the example above:
 
 ```svelte
 <script lang="ts">
-	import { PaneGroup, Pane, PaneResizeHandle } from "paneforge";
+	import { PaneGroup, Pane, PaneResizer } from "paneforge";
 </script>
 
 <PaneGroup direction="horizontal">
 	<Pane defaultSize={50} />
-	<PaneResizeHandle />
+	<PaneResizer />
 	<Pane defaultSize={50}>
 		<PaneGroup direction="vertical">
 			<Pane defaultSize={50} />
-			<PaneResizeHandle />
+			<PaneResizer />
 			<Pane defaultSize={50} />
 		</PaneGroup>
 	</Pane>

diff --git a/sites/docs/content/examples/overflowing-panes.md b/sites/docs/content/examples/overflowing-panes.md
@@ -15,7 +15,7 @@ Here's a high-level structure of the example above:
 
 ```svelte
 <script lang="ts">
-	import { PaneGroup, Pane, PaneResizeHandle } from "paneforge";
+	import { PaneGroup, Pane, PaneResizer } from "paneforge";
 </script>
 
 <PaneGroup direction="horizontal">
@@ -24,15 +24,15 @@ Here's a high-level structure of the example above:
 			<!-- ... content here-->
 		</div>
 	</Pane>
-	<PaneResizeHandle />
+	<PaneResizer />
 	<Pane defaultSize={50}>
 		<PaneGroup direction="vertical">
 			<Pane defaultSize={25}>
 				<div class="overflow-auto">
 					<!-- ... content here-->
 				</div>
 			</Pane>
-			<PaneResizeHandle />
+			<PaneResizer />
 			<Pane defaultSize={75}>
 				<div class="overflow-auto">
 					<!-- ... content here-->

diff --git a/sites/docs/content/examples/vertical-groups.md b/sites/docs/content/examples/vertical-groups.md
@@ -15,12 +15,12 @@ Here's a high-level structure of the example above:
 
 ```svelte
 <script lang="ts">
-	import { PaneGroup, Pane, PaneResizeHandle } from "paneforge";
+	import { PaneGroup, Pane, PaneResizer } from "paneforge";
 </script>
 
 <PaneGroup direction="vertical">
 	<Pane defaultSize={50} />
-	<PaneResizeHandle />
+	<PaneResizer />
 	<Pane defaultSize={50} />
 </PaneGroup>
 ```
diff --git a/sites/docs/src/lib/components/ui/resizable/resizable-handle.svelte b/sites/docs/src/lib/components/ui/resizable/resizable-handle.svelte
@@ -14,13 +14,13 @@
 
 <ResizablePrimitive.PaneResizeHandle
 	class={cn(
-		"relative flex w-[3px] items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[pane-group-direction=vertical]:h-[3px] data-[pane-group-direction=vertical]:w-full data-[resize-handle-active=pointer]:bg-muted-foreground data-[pane-group-direction=vertical]:after:left-0 data-[pane-group-direction=vertical]:after:h-1 data-[pane-group-direction=vertical]:after:w-full data-[pane-group-direction=vertical]:after:-translate-y-1/2 data-[pane-group-direction=vertical]:after:translate-x-0 [&[data-pane-group-direction=vertical]>div]:rotate-90",
+		"bg-border focus-visible:ring-ring data-[resize-handle-active=pointer]:bg-muted-foreground relative flex w-[3px] items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[pane-group-direction=vertical]:h-[3px] data-[pane-group-direction=vertical]:w-full data-[pane-group-direction=vertical]:after:left-0 data-[pane-group-direction=vertical]:after:h-1 data-[pane-group-direction=vertical]:after:w-full data-[pane-group-direction=vertical]:after:-translate-y-1/2 data-[pane-group-direction=vertical]:after:translate-x-0 [&[data-direction=vertical]>div]:rotate-90",
 		className
 	)}
 	{...$$restProps}
 >
 	{#if withHandle}
-		<div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+		<div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
 			<DotsSixVertical class="size-2.5" />
 		</div>
 	{/if}

diff --git a/sites/docs/src/lib/config/site.ts b/sites/docs/src/lib/config/site.ts
@@ -4,19 +4,19 @@ export const siteConfig = {
 	description: "Resizable pane components for Svelte and SvelteKit.",
 	links: {
 		x: "https://x.com/huntabyte",
-		github: "https://github.com/huntabyte/paneforge",
+		github: "https://github.com/svecosystem/paneforge",
 	},
 	author: "Huntabyte",
 	keywords:
-		"Svelte resizable panels,svelte panels,svelte panes,paneforge,svelte pane,svelte pane forge",
+		"Svelte resizable panels,svelte panels,svelte panes,paneforge,svelte pane,svelte pane forge,svelte resizable",
 	ogImage: {
 		url: "https://paneforge.com/og.png",
 		width: "1200",
 		height: "630",
 	},
 	license: {
 		name: "MIT",
-		url: "https://github.com/huntabyte/paneforge/blob/main/LICENSE",
+		url: "https://github.com/svecosystem/paneforge/blob/main/LICENSE",
 	},
 };