Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: PaneForgeConfig #60

Open
wants to merge 4 commits into
base: next
Choose a base branch
from
Open

feat: PaneForgeConfig #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7dcd93d
feat: `PaneForgeConfig`
huntabyte Dec 18, 2024
5f896a4
env updates
huntabyte Dec 18, 2024
1d8c152
more
huntabyte Dec 18, 2024
e14cefa
cache default environmnet
huntabyte Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/chilled-news-promise.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"paneforge": patch
---

add `PaneForgeConfig` component to enable shadow dom/iframe/custom dom environments
151 changes: 65 additions & 86 deletions docs/src/content/components/pane-group.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,80 +4,74 @@ description: A container for panes or nested pane groups.
section: Components
---

The `PaneGroup` component wraps a collection of panes or nested `PaneGroup`s and is used to initialize and manage the layout of the panes.
<script>
import { PropField, Collapsible } from '@svecodocs/kit';
</script>

The `PaneGroup` component wraps a collection of `Pane`s or nested `PaneGroup`s and is used to initialize and manage the layout of the panes.

## API Reference

### Props

<PropField name="direction" required type="'horizontal' | 'vertical'">
The direction of the panes within the group.
</PropField>

<PropField name="autoSaveId" type="string">
The id to save the layout of the panes to in local storage.
</PropField>

<PropField name="keyboardResizeBy" type="number">
The amount of space to add to the pane group when the keyboard resize event is triggered.
</PropField>

<PropField name="onLayoutChange" type="(layout: number) => void | null">
A callback called when the layout of the panes within the group changes.
</PropField>

<PropField name="storage" type="PaneGroupStorage" defaultValue="localStorage">
<Collapsible title="properties">
<PropField name="getItem" type="(name: string) => string | null" required>
Retrieves the item from storage.
</PropField>
<PropField name="setItem" type="(name: string, value: string) => void" required>
Sets the item to storage.
</PropField>
</Collapsible>
</PropField>

<PropField name="ref" type="HTMLElement | null">
A reference to the underlying DOM element of the pane group. You can bind to this prop to get a reference to the element.
</PropField>

<PropField name="this" type="PaneGroup">
Retrieve a reference to the component to access methods for controlling the pane group.
<Collapsible title="methods">
<PropField name="getLayout" type="() => number[]">
Get the layout of the pane group.
</PropField>
<PropField name="setLayout" type="(layout: number[]) => void">
Set the layout of the pane group.
</PropField>
<PropField name="getId" type="() => string">
Get the ID of the pane group.
</PropField>
</Collapsible>
</PropField>

### Data Attributes

## Props

Here are the props available for the `PaneGroup` component:

```ts
export type PaneGroupProps = {
/**
* The id to save the layout of the panes to in local storage.
*/
autoSaveId?: string | null;

/**
* The direction of the panes.
* @required
*/
direction: "horizontal" | "vertical";

/**
* The id of the pane group DOM element.
*/
id?: string | null;

/**
* The amount of space to add to the pane group when the keyboard
* resize event is triggered.
*/
keyboardResizeBy?: number | null;

/**
* A callback called when the layout of the panes within the group changes.
*/
onLayoutChange?: (layout: number[]) => void | null;

/**
* The storage object to use for saving the layout of the panes in the group.
*
* Defaults to use `localStorage` if an `autoSaveId` is provided and no storage is provided.
*/
storage?: PaneGroupStorage;

/**
* The style of the pane group. This will be appended to styles applied by
* the library.
*/
style?: string;

/**
* The underlying DOM element of the pane group. You can `bind` to this
* prop to get a reference to the element.
*/
el?: HTMLElement | null;

/**
* An imperative API for the pane group. `bind` to this prop to get access
* to methods for controlling the pane group.
*/
paneGroup?: PaneGroupAPI;
} & Omit<HTMLAttributes<HTMLDivElement>, "id">;
```

## Imperative API

The `PaneGroup` component provides an imperative API for controlling the pane group which can be accessed by binding a variable to the `api` prop. Here are the methods available on the `PaneGroupAPI`:
The following data attributes are available for the `PaneGroup` component:

```ts
export type PaneGroupAPI = {
/** Get the ID of the PaneGroup */
getId: () => string;
/** Get the layout of the PaneGroup */
getLayout: () => number[];
/** Set the layout of the PaneGroup */
setLayout: (layout: number[]) => void;
export type PaneGroupAttributes = {
/** Applied to every pane group element. */
"data-pane-group": "";
/** The direction of the pane group. */
"data-direction": "horizontal" | "vertical";
/** The ID of the pane group. */
"data-pane-group-id": string;
};
```

Expand All @@ -93,18 +87,3 @@ export type PaneGroupStorage = {
setItem(name: string, value: string): void;
};
```

## Data Attributes

The following data attributes are available for the `PaneGroup` component:

```ts
export type PaneGroupAttributes = {
/** Applied to every pane group element. */
"data-pane-group": "";
/** The direction of the pane group. */
"data-direction": "horizontal" | "vertical";
/** The ID of the pane group. */
"data-pane-group-id": string;
};
```
53 changes: 24 additions & 29 deletions docs/src/content/components/pane-resizer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ description: A draggable handle between two panes that allows the user to resize
section: Components
---

<script>
import { PropField } from '@svecodocs/kit'
</script>

The `PaneResizer` component is used to create a draggable handle between two panes that allows the user to resize them.

## Usage
Expand All @@ -20,38 +24,29 @@ The `PaneResizer` component is used to create a draggable handle between two pan
</PaneGroup>
```

## Props
## API Reference

Here are the props available for the `PaneResizer` component:
### Props

```ts
export type PaneResizerProps = {
/**
* Whether the resize handle is disabled.
*
* @defaultValue `false`
*/
disabled?: boolean;

/**
* A callback that is called when the resize handle's dragging state changes.
*/
onDraggingChange?: (isDragging: boolean) => void;

/**
* The tabIndex of the resize handle.
*/
tabIndex?: number;

/**
* The underlying DOM element of the resize handle. You can `bind` to this
* prop to get a reference to the element.
*/
el?: HTMLElement | null;
} & HTMLAttributes<HTMLDivElement>;
```
<PropField name="disabled" type="boolean" defaultValue="false">
Whether the resize handle is disabled.
</PropField>

<PropField name="onDraggingChange" type="(isDragging: boolean) => void">
A callback that is called when the resize handle's dragging state changes.
</PropField>

<PropField name="tabIndex" type="number">
The tabIndex of the resize handle.
</PropField>

<PropField name="ref" type="HTMLElement | null">

The underlying DOM element of the resize handle. You can `bind` to this prop to get a reference to the element.

</PropField>

## Data Attributes
### Data Attributes

The following data attributes are available for the `PaneResizer` component:

Expand Down
Loading