@nil-/doc 0.2.7 → 0.2.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nil-/doc
 
+## 0.2.9
+
+### Patch Changes
+
+-   5c10f11: [fix] layout fill height
+
+## 0.2.8
+
+### Patch Changes
+
+-   865eef0: Adjusted Container to allow collapsing (based on primary/secondary and double clicking the divider)
+
 ## 0.2.7
 
 ### Patch Changes

package/components/Layout.svelte

@@ -2,8 +2,9 @@
     @import "../styles/reset.css";
     @import "../styles/scrollable.css";
 
-    .root {
+    .layout {
         width: 100%;
+        height: 100%;
         color: rgb(201, 205, 207);
         background-color: rgb(34, 36, 37);
         font-family: "Fira Code", "Courier New", Courier, monospace;
@@ -26,7 +27,7 @@ export let sorter = null;
 export let renamer = null;
 const r = inRoot();
 </script>
-<div class="root" class:nil-doc-reset={r}>
+<div class="layout" class:nil-doc-reset={r}>
     <Container offset={250} padding={250} vertical>
         <svelte:fragment slot="a">
             <Nav

package/components/etc/Container.svelte

@@ -40,6 +40,7 @@ export let thickness = 10;
 export let padding = 0;
 let width;
 let height;
+let collapse = false;
 const { position, draggable } = createDraggable(offset);
 function update(w, h, limit, value) {
     if (w == null || h == null) {
@@ -49,7 +50,7 @@ function update(w, h, limit, value) {
     offset = Math.max(Math.min(value, span - limit), limit);
 }
 $: update(width, height, padding, $position);
-$: offsetpx = `${offset}px`;
+$: offsetpx = collapse ? "10px" : `${offset}px`;
 $: thicknesspx = `${thickness}px`;
 </script>
 <div
@@ -62,14 +63,12 @@ $: thicknesspx = `${thickness}px`;
         <div
             class:primary={!reversed}
             class:secondary={reversed}
-            style:min-height={!vertical ? `${padding}px` : null}
-            style:max-height={!vertical ? `${height - padding}px` : null}
-            style:min-width={vertical ? `${padding}px` : null}
-            style:max-width={vertical ? `${width - padding}px` : null}
             style:width={!reversed && vertical ? offsetpx : null}
             style:height={!reversed && !vertical ? offsetpx : null}
         >
-            <slot name="a" />
+            {#if !collapse || reversed}
+                <slot name="a" />
+            {/if}
         </div>
         <div
             class="divider"
@@ -83,19 +82,18 @@ $: thicknesspx = `${thickness}px`;
                 style:cursor={vertical ? "col-resize" : "row-resize"}
                 style:transform={vertical ? "translateX(-50%)" : "translateY(-50%)"}
                 use:draggable={{ reset: () => offset, reversed, vertical }}
+                on:dblclick={() => (collapse = !collapse)}
             />
         </div>
         <div
             class:primary={reversed}
             class:secondary={!reversed}
-            style:min-height={!vertical ? `${padding}px` : null}
-            style:max-height={!vertical ? `${height - padding}px` : null}
-            style:min-width={vertical ? `${padding}px` : null}
-            style:max-width={vertical ? `${width - padding}px` : null}
             style:width={reversed && vertical ? offsetpx : null}
             style:height={reversed && !vertical ? offsetpx : null}
         >
-            <slot name="b" />
+            {#if !collapse || !reversed}
+                <slot name="b" />
+            {/if}
         </div>
     {/if}
 </div>

package/components/etc/action.js

@@ -24,6 +24,7 @@ export const createDraggable = (offset) => {
         div.addEventListener("mousedown", engage);
         document.addEventListener("mouseup", disengage);
         document.addEventListener("mousemove", move);
+        document.addEventListener("dblclick", disengage);
         return {
             update: (parameter) => {
                 if (param.reversed !== parameter.reversed ||
@@ -31,12 +32,12 @@ export const createDraggable = (offset) => {
                     moving = false;
                 }
                 param = parameter;
-                position.set(param.reset());
             },
             destroy: () => {
                 div.removeEventListener("mousedown", engage);
                 document.removeEventListener("mouseup", disengage);
                 document.removeEventListener("mousemove", move);
+                document.removeEventListener("dblclick", disengage);
             }
         };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"