Added collapsed prop to SuperDebug.

Fixes #279.

Author: ciscoheat

CHANGELOG.md

@@ -9,8 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- By declaring `namespace Superforms` with a `type Message` in `app.d.ts`, the [status messages](https://superforms.rocks/concepts/messages) will always be set to that type. ([#261](https://github.com/ciscoheat/sveltekit-superforms/issues/261))
+- In `app.d.ts`, by declaring `namespace global.Superforms` with a `type Message`, the [status messages](https://superforms.rocks/concepts/messages) will always be set to that type. ([#261](https://github.com/ciscoheat/sveltekit-superforms/issues/261))
 - Added `FormResult<T>`, which can be used in [onResult](https://superforms.rocks/concepts/events#onresult) to make the ActionResult strongly typed.
+- [SuperDebug](https://superforms.rocks/super-debug) now has a `collapsed` prop, to make it initially collapsed. Use together with `collapsible`. ([#279](https://github.com/ciscoheat/sveltekit-superforms/issues/279))
 
 ## [1.8.0]
 

src/lib/client/SuperDebug.svelte

@@ -103,13 +103,17 @@
   ///// Collapse behavior ///////////////////////////////////////////
 
   /**
-   * Will show a collapse bar at the bottom of the component, that can be used to hide and show the output.
-   *
-   * Default is `false`.
+   * Will show a collapse bar at the bottom of the component, that can be used to hide and show the output. Default is `false`.
+   * When toggled, the state is saved in session storage for all SuperDebug components on the page.
    */
   export let collapsible = false;
 
-  let collapsed = false;
+  /**
+   * Initial state for the collapsed component. Use together with the `collapsible` prop.
+   * On subsequent page loads, the session storage will determine the state of all SuperDebug components on the page.
+   */
+  export let collapsed = false;
+
   if (browser && collapsible) setCollapse();
 
   /**
@@ -127,11 +131,11 @@
       data = { collapsed: data && data.collapsed ? data.collapsed : {} };
 
       data.collapsed[route] =
-        status === undefined ? data.collapsed[route] ?? false : status;
+        status === undefined ? data.collapsed[route] ?? collapsed : status;
     } catch {
       data = {
         collapsed: {
-          [route]: false
+          [route]: collapsed
         }
       };
     }

src/routes/super-debug/+page.svelte

@@ -105,6 +105,13 @@
     <p>Label is useful when using multiple instance of SuperDebug.</p>
     <SuperDebug label="Sample User" data={$form} collapsible />
   </section>
+  <section>
+    <h4>SuperDebug, initially collapsed</h4>
+    <p>
+      Use the <code>collapsible</code> and <code>collapsed</code> props for this.
+    </p>
+    <SuperDebug label="Sample User" data={$form} collapsible collapsed />
+  </section>
   <section>
     <h4>SuperDebug without status</h4>
     <SuperDebug label="Sample User" status={false} data={$form} />