panel-splitjs 0.2.1__tar.gz → 0.3.1__tar.gz

{panel_splitjs-0.2.1 → panel_splitjs-0.3.1}/.github/workflows/build.yml

@@ -18,7 +18,7 @@ jobs:
         with:
           fetch-depth: 0
       - name: Set up pixi
-        uses: prefix-dev/setup-pixi@194d461b21b6c5717c722ffc597fa91ed2ff29fa # v0.9.1
+        uses: prefix-dev/setup-pixi@28eb668aafebd9dede9d97c4ba1cd9989a4d0004 # v0.9.2
         with:
           environments: build
       - name: Build project
@@ -26,12 +26,12 @@ jobs:
       - name: Check package
         run: pixi run -e build check-wheel
       - name: Upload package
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           name: pip
           path: dist/*
       - name: Upload bundle
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           name: cdn
           path: src/panel_splitjs/dist/
@@ -44,7 +44,7 @@ jobs:
       id-token: write
     environment: pypi
     steps:
-      - uses: actions/download-artifact@v5
+      - uses: actions/download-artifact@v6
         with:
           name: pip
           path: dist/
@@ -56,7 +56,7 @@ jobs:
     needs: [build]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/download-artifact@v5
+      - uses: actions/download-artifact@v6
         with:
           name: cdn
           path: dist/

{panel_splitjs-0.2.1 → panel_splitjs-0.3.1}/.github/workflows/test.yml

@@ -44,7 +44,7 @@ jobs:
     steps:
       - uses: actions/checkout@v5.0.0
       - name: Set up pixi
-        uses: prefix-dev/setup-pixi@v0.9.1
+        uses: prefix-dev/setup-pixi@v0.9.2
       - uses: holoviz-dev/holoviz_tasks/pre-commit@v0
       - uses: pre-commit/action@v3.0.1
         if: needs.setup.outputs.img_change == 'true'
@@ -169,7 +169,7 @@ jobs:
           FAIL="--screenshot only-on-failure --full-page-screenshot --output ui_screenshots --tracing retain-on-failure"
           pixi run -e ${{ matrix.environment }} test-ui $COV --cov-config=.uicoveragerc $FAIL
       - name: Upload UI Screenshots
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         if: always()
         with:
           name: ui_screenshots_${{ runner.os }}

{panel_splitjs-0.2.1 → panel_splitjs-0.3.1}/.github/workflows/update-lockfiles.yml

@@ -14,7 +14,7 @@ jobs:
     steps:
       - uses: actions/checkout@ff7abcd0c3c05ccf6adc123a8cd1fd4fb30fb493 # v4.2.2
       - name: Set up pixi
-        uses: prefix-dev/setup-pixi@194d461b21b6c5717c722ffc597fa91ed2ff29fa # v0.9.1
+        uses: prefix-dev/setup-pixi@28eb668aafebd9dede9d97c4ba1cd9989a4d0004 # v0.9.2
         with:
           run-install: false
       - name: Update lockfiles

{panel_splitjs-0.2.1 → panel_splitjs-0.3.1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: panel-splitjs
-Version: 0.2.1
+Version: 0.3.1
 Summary: Provides split.js components for Panel.
 Project-URL: Homepage, https://github.com/panel-extensions/panel-splitjs
 Project-URL: Source, https://github.com/panel-extensions/panel-splitjs
@@ -81,16 +81,18 @@ pn.extension()
 
 # Create a simple split layout
 split = Split(
-    pn.pane.Markdown("## Left Panel\nContent here"),
-    pn.pane.Markdown("## Right Panel\nMore content"),
+    pn.pane.Markdown("## Left Panel\nContent here", width=150),
+    pn.pane.Markdown("## Right Panel\nMore content", width=150),
     sizes=(50, 50),  # Equal sizing initially
-    min_size=100,     # Minimum 100px for each panel
-    show_buttons=True
+    min_size=150,     # Minimum 150px for each panel
+    sizing_mode="stretch_both",
 )
 
 split.servable()
 ```
 
+![Quick Start Example](docs/assets/images/quick-start.gif)
+
 ## Usage Examples
 
 ### Basic Horizontal Split
@@ -99,30 +101,35 @@ split.servable()
 import panel as pn
 from panel_splitjs import HSplit
 
-pn.extension()
+pn.extension(sizing_mode="stretch_width")
 
 left_panel = pn.Column(
     "# Main Content",
     pn.widgets.TextInput(name="Input"),
-    pn.pane.Markdown("This is the main content area.")
+    pn.pane.Markdown("This is the main content area."),
+    margin=25, # To separate toggle button and column
 )
 
 right_panel = pn.Column(
     "# Sidebar",
     pn.widgets.Select(name="Options", options=["A", "B", "C"]),
+    margin=25, # To separate toggle button and column
 )
 
 split = HSplit(
     left_panel,
     right_panel,
     sizes=(70, 30),  # 70% left, 30% right
-    min_size=200,    # Minimum 200px for each panel
-    show_buttons=True
+    min_size=300,    # Minimum 300px for each panel
+    sizing_mode="stretch_width",
+    height=250,
 )
 
 split.servable()
 ```
 
+![Basic Horizontal Split Example](docs/assets/images/basic-horizontal-split.png)
+
 ### Vertical Split
 
 ```python
@@ -137,13 +144,40 @@ bottom_panel = pn.pane.Markdown("## Bottom Section\nFooter content")
 split = VSplit(
     top_panel,
     bottom_panel,
-    sizes=(60, 40),
-    min_size=150
+    sizes=(70, 30),
+    min_size=200,
+    height=600,
+    sizing_mode="stretch_width"
+)
+
+split.servable()
+```
+
+![Basic Vertical Split Example](docs/assets/images/basic-vertical-split.png)
+
+### Show Buttons
+
+```python
+import panel as pn
+from panel_splitjs import Split
+
+pn.extension()
+
+# Create a simple split layout
+split = Split(
+    pn.pane.Markdown("## Left Panel\nContent here", width=150),
+    pn.pane.Markdown("## Right Panel\nMore content", width=150),
+    sizes=(50, 50),  # Equal sizing initially
+    min_size=150,     # Minimum 150px for each panel
+    show_buttons=True,
+    sizing_mode="stretch_both",
 )
 
 split.servable()
 ```
 
+![Show Buttons Example](docs/assets/images/show-buttons.png)
+
 ### Collapsible Sidebar
 
 ```python
@@ -153,24 +187,27 @@ from panel_splitjs import Split
 pn.extension()
 
 # Start with right panel collapsed
+button = pn.widgets.Button(name="Toggle Sidebar")
+
 split = Split(
-    pn.pane.Markdown("## Main Content"),
-    pn.pane.Markdown("## Collapsible Sidebar"),
+    pn.Column(pn.pane.Markdown("## Main Content"), button),
+    pn.pane.Markdown("## Collapsible Sidebar", margin=(10,10,10,25)),
     collapsed=1,  # 0 for first panel, 1 for second panel, None for not collapsed
-    expanded_sizes=(65, 35),  # When expanded, 65% main, 35% sidebar
-    show_buttons=True,
-    min_size=(200, 200)  # Minimum 200px for each panel
+    expanded_sizes=(80, 20),  # When expanded, 80% main, 20% sidebar
+    sizing_mode="stretch_both",
 )
 
 # Toggle collapse programmatically
-button = pn.widgets.Button(name="Toggle Sidebar")
+
 def toggle(event):
     split.collapsed = None if split.collapsed == 1 else 1
 button.on_click(toggle)
 
-pn.Column(button, split).servable()
+split.servable()
 ```
 
+![Collapsible Sidebar Example](docs/assets/images/collapsable-sidebar.gif)
+
 ### Multi-Panel Split
 
 ```python
@@ -186,12 +223,15 @@ multi = MultiSplit(
     pn.pane.Markdown("## Panel 3"),
     sizes=(30, 40, 30),  # Three panels with custom sizing
     min_size=100,        # Minimum 100px for each panel
-    orientation="horizontal"
+    orientation="horizontal",
+    sizing_mode="stretch_both",
 )
 
 multi.servable()
 ```
 
+![MultiSplit Example](docs/assets/images/multisplit.png)
+
 ## API Reference
 
 ### Split
@@ -206,7 +246,7 @@ The main split panel component for creating two-panel layouts with collapsible f
 - `max_size` (int | tuple, default=None): Maximum sizes in pixels - single value applies to both panels, tuple for individual sizes
 - `min_size` (int | tuple, default=0): Minimum sizes in pixels - single value applies to both panels, tuple for individual sizes
 - `orientation` (str, default="horizontal"): Either `"horizontal"` or `"vertical"`
-- `show_buttons` (bool, default=True): Show collapse/expand toggle buttons on the divider
+- `show_buttons` (bool, default=False): Show collapse/expand toggle buttons on the divider
 - `sizes` (tuple, default=(50, 50)): Initial percentage sizes of the panels
 - `snap_size` (int, default=30): Snap to minimum size at this offset in pixels
 - `step_size` (int, default=1): Step size in pixels at which panel sizes can be changed
@@ -247,21 +287,24 @@ from panel_splitjs import Split
 
 pn.extension()
 
-chat = pn.chat.ChatInterface()
-output = pn.Column("# Output Area")
+with pn.config.set(sizing_mode="stretch_width"):
+    chat = pn.chat.ChatInterface(margin=(5,25,5,5))
+    output = pn.Column("# Output Area")
 
 split = Split(
     chat,
     output,
     collapsed=None,  # Both panels visible
     expanded_sizes=(50, 50),
-    show_buttons=True,
-    min_size=(300, 300)  # Minimum 300px for each panel
+    min_size=(600, 300),  # Minimum 600px for the first panel, 300px for the second panel
+    sizing_mode="stretch_both",
 )
 
 split.servable()
 ```
 
+![Chat Example](docs/assets/images/chat-example.png)
+
 ### Dashboard with Collapsible Controls
 
 ```python
@@ -270,26 +313,30 @@ from panel_splitjs import Split
 
 pn.extension()
 
-controls = pn.Column(
-    pn.widgets.Select(name="Dataset", options=["A", "B", "C"]),
-    pn.widgets.IntSlider(name="Threshold", start=0, end=100),
-    pn.widgets.Button(name="Update")
-)
+with pn.config.set(sizing_mode="stretch_width"):
+    controls = pn.Column(
+        pn.widgets.Select(name="Dataset", options=["A", "B", "C"]),
+        pn.widgets.IntSlider(name="Threshold", start=0, end=100),
+        pn.widgets.Button(name="Update"),
+        margin=(5,20,5,5),
+    )
 
-visualization = pn.pane.Markdown("## Main Visualization Area")
+    visualization = pn.pane.Markdown("## Main Visualization Area")
 
 split = Split(
     controls,
     visualization,
-    collapsed=0,  # Start with controls collapsed
-    expanded_sizes=(25, 75),
+    sizes=(20, 80),
+    min_size=(300, 0),
     show_buttons=True,
-    min_size=(250, 400)  # Minimum sizes for each panel
+    sizing_mode="stretch_both",
 )
 
 split.servable()
 ```
 
+![Dashboard with Collapsible Controls](docs/assets/images/dashboard-with-collapsable-controls.png)
+
 ### Responsive Layout with Size Constraints
 
 ```python
@@ -299,18 +346,21 @@ from panel_splitjs import Split
 pn.extension()
 
 split = Split(
-    pn.pane.Markdown("## Panel 1\nResponsive content"),
-    pn.pane.Markdown("## Panel 2\nMore responsive content"),
+    pn.pane.Markdown("## Panel 1\nResponsive content", sizing_mode="stretch_width", margin=(5,25,5,5)),
+    pn.pane.Markdown("## Panel 2\nMore responsive content", sizing_mode="stretch_width", margin=(5,5,5,25)),
     sizes=(50, 50),
     min_size=200,        # Minimum 200px per panel
     max_size=800,        # Maximum 800px per panel
     snap_size=50,        # Snap to min size when within 50px
-    show_buttons=True
+    show_buttons=True,
+    sizing_mode="stretch_both",
 )
 
 split.servable()
 ```
 
+![Responsive Layout with Size Constraints](docs/assets/images/responsive-layout-with-size-constraints.png)
+
 ### Complex Multi-Panel Layout
 
 ```python
@@ -320,10 +370,11 @@ from panel_splitjs import MultiSplit
 pn.extension()
 
 # Create a four-panel layout
-sidebar = pn.Column("## Sidebar", pn.widgets.Select(options=["A", "B", "C"]))
-main = pn.pane.Markdown("## Main Content Area")
-detail = pn.pane.Markdown("## Detail Panel")
-console = pn.pane.Markdown("## Console Output")
+with pn.config.set(sizing_mode="stretch_width"):
+    sidebar = pn.Column("## Sidebar", pn.widgets.Select(options=["A", "B", "C"]))
+    main = pn.pane.Markdown("## Main Content Area")
+    detail = pn.pane.Markdown("## Detail Panel")
+    console = pn.pane.Markdown("## Console Output")
 
 multi = MultiSplit(
     sidebar,
@@ -332,12 +383,15 @@ multi = MultiSplit(
     console,
     sizes=(15, 40, 25, 20),  # Custom sizing for each panel
     min_size=(150, 300, 200, 150),  # Individual minimums
-    orientation="horizontal"
+    orientation="horizontal",
+    sizing_mode="stretch_both",
 )
 
 multi.servable()
 ```
 
+![Complex Multi-Panel Layout](docs/assets/images/complex-multi-panel-layout.png)
+
 ### Nested Splits
 
 ```python
@@ -350,21 +404,25 @@ pn.extension()
 left = pn.pane.Markdown("## Left Panel")
 
 # Right side has a vertical split
-top_right = pn.pane.Markdown("## Top Right")
-bottom_right = pn.pane.Markdown("## Bottom Right")
-right = VSplit(top_right, bottom_right, sizes=(60, 40))
-
-# Main horizontal split
-layout = HSplit(
-    left,
-    right,
-    sizes=(30, 70),
-    min_size=200
-)
+with pn.config.set(sizing_mode="stretch_both"):
+    top_right = pn.pane.Markdown("## Top Right")
+    bottom_right = pn.pane.Markdown("## Bottom Right")
+    right = VSplit(top_right, bottom_right, sizes=(60, 40))
+
+    # Main horizontal split
+    layout = HSplit(
+        left,
+        right,
+        sizes=(30, 70),
+        min_size=200,
+        sizing_mode="stretch_both",
+    )
 
 layout.servable()
 ```
 
+![Nested Splits](docs/assets/images/nested-splits.png)
+
 ## Development
 
 This project is managed by [pixi](https://pixi.sh).
@@ -392,6 +450,15 @@ pixi run build
 pixi run test
 ```
 
+### Pre-commit
+
+Before committing the first time please install `pre-commit`:
+
+```bash
+pip install pre-commit
+pre-commit install
+```
+
 ## Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.