@nil-/doc 0.2.8 → 0.2.10

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nil-/doc
 
+## 0.2.10
+
+### Patch Changes
+
+-   c6de380: [feature] container collapsing now supported
+    [cleanup] styling of container now uses grid for easier handling
+
+## 0.2.9
+
+### Patch Changes
+
+-   5c10f11: [fix] layout fill height
+
 ## 0.2.8
 
 ### 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/block/Block.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/etc/Container.svelte

@@ -1,27 +1,53 @@
 <style>
     .container {
-        display: flex;
-        position: relative;
         width: 100%;
         height: 100%;
+        display: grid;
+        grid-template-areas:
+            "primary"
+            "divider"
+            "secondary";
+        overflow: hidden;
     }
 
-    .primary {
-        flex-shrink: 0;
+    .container.vertical {
+        grid-template-areas: "primary divider secondary";
     }
 
-    .secondary {
-        flex-grow: 1;
-        flex-basis: auto;
+    .container > div {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        outline: rgb(100, 96, 96) solid 1px;
     }
 
-    .divider {
-        z-index: 1;
+    /* need higher specificity than above */
+    .container > .divider {
+        z-index: 10;
+        width: auto;
+        height: 0px;
+        overflow: visible;
         user-select: none;
+        grid-area: divider;
     }
 
-    .container > div {
-        outline: rgb(100, 96, 96) solid 1px;
+    .container > .divider.vertical {
+        width: 0px;
+        height: auto;
+    }
+
+    .container > .divider > .overlay {
+        width: 100%;
+        height: 10px;
+        cursor: row-resize;
+        translate: translateX(-50%);
+    }
+
+    .container > .divider.vertical > .overlay {
+        width: 10px;
+        height: 100%;
+        cursor: col-resize;
+        translate: translateY(-50%);
     }
 </style>
 
@@ -34,8 +60,6 @@ export let offset = 0;
 // if true, the reference content is from slot="b"
 // if false, the reference content is from slot="a"
 export let reversed = false;
-// size of the "draggable" divider
-export let thickness = 10;
 // min distance of divider to the edges
 export let padding = 0;
 let width;
@@ -43,7 +67,7 @@ let height;
 let collapse = false;
 const { position, draggable } = createDraggable(offset);
 function update(w, h, limit, value) {
-    if (w == null || h == null) {
+    if (w == null || h == null || collapse) {
         return;
     }
     const span = vertical ? w : h;
@@ -51,46 +75,29 @@ function update(w, h, limit, value) {
 }
 $: update(width, height, padding, $position);
 $: offsetpx = collapse ? "10px" : `${offset}px`;
-$: thicknesspx = `${thickness}px`;
+$: style = reversed ? `auto 0px ${offsetpx}` : `${offsetpx} 0px auto`;
 </script>
 <div
     class="container"
+    class:vertical
     bind:clientHeight={height}
     bind:clientWidth={width}
-    style:flex-direction={vertical ? "row" : "column"}
+    style:grid-template-columns={vertical ? style : null}
 >
     {#if width != null && height != null}
-        <div
-            class:primary={!reversed}
-            class:secondary={reversed}
-            style:width={!reversed && vertical ? offsetpx : null}
-            style:height={!reversed && !vertical ? offsetpx : null}
-        >
+        <div style:grid-area={!reversed ? "primary" : "secondary"}>
             {#if !collapse || reversed}
                 <slot name="a" />
             {/if}
         </div>
-        <div
-            class="divider"
-            style:width={vertical ? "0px" : null}
-            style:height={!vertical ? "0px" : null}
-        >
+        <div class="divider" class:vertical>
             <div
                 class="overlay"
-                style:width={vertical ? thicknesspx : "100%"}
-                style:height={!vertical ? thicknesspx : "100%"}
-                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:width={reversed && vertical ? offsetpx : null}
-            style:height={reversed && !vertical ? offsetpx : null}
-        >
+        <div style:grid-area={reversed ? "primary" : "secondary"}>
             {#if !collapse || !reversed}
                 <slot name="b" />
             {/if}

package/components/etc/Container.svelte.d.ts

@@ -4,7 +4,6 @@ declare const __propDef: {
         vertical?: boolean | undefined;
         offset?: number | undefined;
         reversed?: boolean | undefined;
-        thickness?: number | undefined;
         padding?: number | undefined;
     };
     events: {

package/components/etc/Font.svelte.d.ts

@@ -1,7 +1,9 @@
 /** @typedef {typeof __propDef.props}  FontProps */
 /** @typedef {typeof __propDef.events}  FontEvents */
 /** @typedef {typeof __propDef.slots}  FontSlots */
-export default class Font extends SvelteComponentTyped<{}, {
+export default class Font extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
 }
@@ -10,7 +12,9 @@ export type FontEvents = typeof __propDef.events;
 export type FontSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/navigation/Nav.svelte

@@ -1,5 +1,9 @@
 <style>
+    @import "../../styles/scrollable.css";
+
     .nav {
+        width: 100%;
+        height: 100%;
         gap: 10px;
         padding-top: 20px;
         display: flex;
@@ -62,7 +66,7 @@ export let renamer;
 let filter = "";
 let states = apply(info, () => ({ expanded: false, sub: {} }), (t, path) => ({ expanded: t.expanded || selected === path, sub: t.sub }), (t) => t.sub);
 </script>
-<div class="nav">
+<div class="nav nil-doc-scrollable">
     <div class="logo"><slot /></div>
     <div class="search-bar">
         <input bind:value={filter} type="text" />

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/adapter-vercel": "next",
     "@sveltejs/kit": "next",
     "@sveltejs/package": "next",
     "mdsvex": "^0.10.6",
     "svelte": "^3.53.1",
-    "svelte-check": "^2.9.2",
+    "svelte-check": "^2.10.0",
     "svelte-markdown": "^0.2.3",
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.1",