@window-splitter/svelte 0.8.4

package/src/stories/AutosaveCookie.svelte

@@ -0,0 +1,63 @@
+<script>
+  import PanelGroup from "../lib/PanelGroup.svelte";
+  import Panel from "../lib/Panel.svelte";
+  import PanelResizer from "../lib/PanelResizer.svelte";
+
+  const { snapshot, handle } = $props();
+
+  let panelGroup;
+
+  /** @type {import("@window-splitter/interface").PanelGroupHandle} */
+  handle.current = {
+    getId: () => "panel-group",
+    getTemplate: () => panelGroup.getTemplate(),
+    getState: () => panelGroup.getState(),
+    getPixelSizes: () => panelGroup.getPixelSizes(),
+    getPercentageSizes: () => panelGroup.getPercentageSizes(),
+    setSizes: (sizes) => panelGroup.setSizes(sizes),
+  };
+</script>
+
+<PanelGroup
+  bind:this={panelGroup}
+  class="panel-group h-200 w-502"
+  autosaveId="autosave-cookie-svelte"
+  autosaveStrategy="cookie"
+  {snapshot}
+>
+  <Panel id="1" class="panel">Panel 1</Panel>
+  <PanelResizer id="resizer" class="panel-resizer" size="10px" />
+  <Panel id="2" class="panel">Panel 2</Panel>
+</PanelGroup>
+
+<style>
+  :global(.h-200) {
+    height: 200px;
+  }
+
+  :global(.w-502) {
+    width: 502px !important;
+  }
+
+  :global(.panel-group) {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    box-sizing: border-box;
+  }
+
+  :global(.panel) {
+    height: 100%;
+    width: 100%;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  :global(.panel-resizer) {
+    background: red;
+  }
+</style>

package/src/stories/Collapsible.svelte

@@ -0,0 +1,112 @@
+<script module>
+  import PanelGroup from "../lib/PanelGroup.svelte";
+  import Panel from "../lib/Panel.svelte";
+  import PanelResizer from "../lib/PanelResizer.svelte";
+
+  /** @type {import("@window-splitter/interface").PanelGroupHandle} */
+  let panelGroup;
+  /** @type {import("@window-splitter/interface").PanelHandle} */
+  let leftHandleRef;
+  /** @type {import("@window-splitter/interface").PanelHandle} */
+  let rightHandleRef;
+
+  /** @type {import("@window-splitter/interface").PanelGroupHandle} */
+  export const handle = {
+    getId: () => "panel-group",
+    getTemplate: () => panelGroup.getTemplate(),
+    getState: () => panelGroup.getState(),
+    getPixelSizes: () => panelGroup.getPixelSizes(),
+    getPercentageSizes: () => panelGroup.getPercentageSizes(),
+    setSizes: (sizes) => panelGroup.setSizes(sizes),
+  };
+
+  /** @type {import("@window-splitter/interface").PanelHandle} */
+  export const leftHandle = {
+    collapse: () => leftHandleRef.collapse(),
+    isCollapsed: () => leftHandleRef.isCollapsed(),
+    expand: () => leftHandleRef.expand(),
+    isExpanded: () => leftHandleRef.isExpanded(),
+    getId: () => leftHandleRef.getId(),
+    getPixelSize: () => leftHandleRef.getPixelSize(),
+    getPercentageSize: () => leftHandleRef.getPercentageSize(),
+    setSize: (size) => leftHandleRef.setSize(size),
+  };
+
+  /** @type {import("@window-splitter/interface").PanelHandle} */
+  export const rightHandle = {
+    collapse: () => rightHandleRef.collapse(),
+    isCollapsed: () => rightHandleRef.isCollapsed(),
+    expand: () => rightHandleRef.expand(),
+    isExpanded: () => rightHandleRef.isExpanded(),
+    getId: () => rightHandleRef.getId(),
+    getPixelSize: () => rightHandleRef.getPixelSize(),
+    getPercentageSize: () => rightHandleRef.getPercentageSize(),
+  };
+
+  let collapsed = $state(true);
+  const onCollapseChange = (newCollapsed) => {
+    collapsed = newCollapsed;
+  };
+</script>
+
+<PanelGroup bind:this={panelGroup} class="panel-group">
+  <Panel
+    bind:this={leftHandleRef}
+    class="collapsible-example-panel-1 panel"
+    min="100px"
+    collapsible
+    collapsedSize="60px"
+    collapseAnimation={{ easing: "bounce", duration: 1000 }}
+    onCollapseChange={(isCollapsed) => {
+      // eslint-disable-next-line no-console
+      console.log("COLLAPSE PASSIVE", isCollapsed);
+    }}
+  >
+    1
+  </Panel>
+  <PanelResizer class="panel-resizer" id="resizer-1" size="10px" />
+  <Panel min="100px">2</Panel>
+  <PanelResizer class="panel-resizer" id="resizer-2" size="10px" />
+  <Panel
+    bind:this={rightHandleRef}
+    class="collapsible-example-panel-2 panel"
+    min="100px"
+    collapsible
+    collapsedSize="60px"
+    collapseAnimation={{ easing: "bounce", duration: 1000 }}
+    {collapsed}
+    {onCollapseChange}
+  >
+    3
+  </Panel>
+</PanelGroup>
+
+<style>
+  :global(.collapsible-example-panel-1) {
+    border: 10px solid green;
+    box-sizing: border-box;
+  }
+
+  :global(.panel-group) {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    box-sizing: border-box;
+    width: 500px;
+  }
+
+  :global(.panel) {
+    height: 100%;
+    width: 100%;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  :global(.panel-resizer) {
+    background: red;
+  }
+</style>

package/src/stories/Conditional.svelte

@@ -0,0 +1,70 @@
+<script module>
+  import PanelGroup from "../lib/PanelGroup.svelte";
+  import Panel from "../lib/Panel.svelte";
+  import PanelResizer from "../lib/PanelResizer.svelte";
+
+  let panelGroup;
+
+  /** @type {import("@window-splitter/interface").PanelGroupHandle} */
+  export const handle = {
+    getId: () => "panel-group",
+    getTemplate: () => panelGroup.getTemplate(),
+    getState: () => panelGroup.getState(),
+    getPixelSizes: () => panelGroup.getPixelSizes(),
+    getPercentageSizes: () => panelGroup.getPercentageSizes(),
+    setSizes: (sizes) => panelGroup.setSizes(sizes),
+  };
+
+  let isExpanded = $state(false);
+  const toggleExpanded = () => {
+    isExpanded = !isExpanded;
+  };
+</script>
+
+<PanelGroup bind:this={panelGroup} class="panel-group">
+  <Panel
+    id="panel-1"
+    min="100px"
+    collapsible
+    collapsedSize="60px"
+    class="panel"
+  >
+    1
+  </Panel>
+  <PanelResizer id="handle-1" class="panel-resizer" size="10px" />
+  <Panel id="panel-2" min="100px" class="panel">2</Panel>
+
+  {#if isExpanded}
+    <PanelResizer id="handle-2" class="panel-resizer" size="10px" />
+    <Panel id="panel-3" min="100px" class="panel">
+      3
+      <button type="button" onclick={toggleExpanded}>Close</button>
+    </Panel>
+  {/if}
+</PanelGroup>
+<button type="button" onclick={toggleExpanded}>Expand</button>
+
+<style>
+  :global(.panel-group) {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    box-sizing: border-box;
+    width: 500px;
+  }
+
+  :global(.panel) {
+    height: 100%;
+    width: 100%;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  :global(.panel-resizer) {
+    background: red;
+  }
+</style>

package/src/stories/DynamicConstraints.svelte

@@ -0,0 +1,73 @@
+<script module>
+  import PanelGroup from "../lib/PanelGroup.svelte";
+  import Panel from "../lib/Panel.svelte";
+  import PanelResizer from "../lib/PanelResizer.svelte";
+
+  let panelGroup;
+
+  /** @type {import("@window-splitter/interface").PanelGroupHandle} */
+  export const handle = {
+    getId: () => "panel-group",
+    getTemplate: () => panelGroup.getTemplate(),
+    getState: () => panelGroup.getState(),
+    getPixelSizes: () => panelGroup.getPixelSizes(),
+    getPercentageSizes: () => panelGroup.getPercentageSizes(),
+    setSizes: (sizes) => panelGroup.setSizes(sizes),
+  };
+
+  let dynamicConstraints = $state(false);
+  const toggleDynamicConstraints = () => {
+    dynamicConstraints = !dynamicConstraints;
+  };
+</script>
+
+<PanelGroup class="panel-group dynamic-constraints" bind:this={panelGroup}>
+  <Panel
+    default="100px"
+    min={dynamicConstraints ? "200px" : "100px"}
+    class="panel"
+  >
+    Panel 1
+  </Panel>
+  <PanelResizer class="panel-resizer" size="10px" />
+  <Panel min="100px" class="panel">Panel 2</Panel>
+  <PanelResizer class="panel-resizer" size="10px" />
+  <Panel
+    min={dynamicConstraints ? "100px" : "400px"}
+    max={dynamicConstraints ? "300px" : "700px"}
+    class="panel"
+  >
+    Panel 3
+  </Panel>
+</PanelGroup>
+<button type="button" onclick={toggleDynamicConstraints}>
+  Toggle Custom
+</button>
+
+<style>
+  :global(.dynamic-constraints) {
+    width: 1000px !important;
+  }
+
+  :global(.panel-group) {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    box-sizing: border-box;
+  }
+
+  :global(.panel) {
+    height: 100%;
+    width: 100%;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  :global(.panel-resizer) {
+    background: red;
+  }
+</style>

package/src/stories/Simple.svelte

@@ -0,0 +1,48 @@
+<script module>
+  import PanelGroup from "../lib/PanelGroup.svelte";
+  import Panel from "../lib/Panel.svelte";
+  import PanelResizer from "../lib/PanelResizer.svelte";
+
+  let panelGroup;
+
+  /** @type {import("@window-splitter/interface").PanelGroupHandle} */
+  export const handle = {
+    getId: () => "panel-group",
+    getTemplate: () => panelGroup.getTemplate(),
+    getState: () => panelGroup.getState(),
+    getPixelSizes: () => panelGroup.getPixelSizes(),
+    getPercentageSizes: () => panelGroup.getPercentageSizes(),
+    setSizes: (sizes) => panelGroup.setSizes(sizes),
+  };
+</script>
+
+<PanelGroup bind:this={panelGroup} class="panel-group">
+  <Panel class="panel">Panel 1</Panel>
+  <PanelResizer class="panel-resizer" size="10px" />
+  <Panel class="panel" min="100px">Panel 2</Panel>
+</PanelGroup>
+
+<style>
+  :global(.panel-group) {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    box-sizing: border-box;
+    width: 500px;
+  }
+
+  :global(.panel) {
+    height: 100%;
+    width: 100%;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  :global(.panel-resizer) {
+    background: red;
+  }
+</style>