@nil-/doc 0.2.11 → 0.2.12

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nil-/doc
 
+## 0.2.12
+
+### Patch Changes
+
+-   6c2d946: [fix] Nav now is not scrollable
+    [fix] Removes Container's "reversed" flag
+    [fix] Adds "secondary" flag to Container
+    [fix] Changes Container slot name (primary is top or left, seconadry is bottom or right)
+    [fix] load now removes routes with parameters
+    [fix] Template now supports `noreset`
+    [fix] Updates documentation
+
 ## 0.2.11
 
 ### Patch Changes

package/components/Layout.svelte

@@ -28,19 +28,21 @@ export let renamer = null;
 const r = inRoot();
 </script>
 <div class="layout" class:nil-doc-reset={r}>
-    <Container offset={250} padding={250} vertical>
-        <svelte:fragment slot="a">
-            <Nav
-                info={data}
-                selected={current ?? ""}
-                sorter={sorter ?? ((l, r) => (l === r ? 0 : l < r ? -1 : +1))}
-                renamer={renamer ?? ((s) => s)}
-                on:navigate
-            >
-                <slot name="title">@nil-/doc</slot>
-            </Nav>
+    <Container offset={250} padding={250} vertical secondary>
+        <svelte:fragment slot="primary">
+            <div class="content nil-doc-scrollable">
+                <Nav
+                    info={data}
+                    selected={current ?? ""}
+                    sorter={sorter ?? ((l, r) => (l === r ? 0 : l < r ? -1 : +1))}
+                    renamer={renamer ?? ((s) => s)}
+                    on:navigate
+                >
+                    <slot name="title">@nil-/doc</slot>
+                </Nav>
+            </div>
         </svelte:fragment>
-        <svelte:fragment slot="b">
+        <svelte:fragment slot="secondary">
             <div class="content nil-doc-scrollable">
                 {#key current}
                     <slot name="content" />

package/components/block/Template.svelte

@@ -59,6 +59,7 @@ function resolve(d, p) {
     return temporary;
 }
 let hovered = null;
+export let noreset = false;
 /**
  * This flag is to rerender the whole slot component.
  * If the control is disabled, we use the default value provided from the defaults field.
@@ -70,8 +71,8 @@ let hovered = null;
  *
  * Similar case to: https://github.com/sveltejs/svelte/issues/4442
  */
-let rerender = false;
-beforeUpdate(() => (rerender = !rerender));
+let key = false;
+beforeUpdate(() => (key = !key));
 </script>
 <div class="template">
     {#each $params as { id, tag, values } (id)}
@@ -82,11 +83,17 @@ beforeUpdate(() => (rerender = !rerender));
             on:mouseleave={() => (hovered = null)}
             on:keypress={null}
         >
-            {#key rerender}
+            {#if noreset}
                 <div class="content nil-doc-scrollable">
                     <slot {tag} props={resolve(defaults, values)} />
                 </div>
-            {/key}
+            {:else}
+                {#key key}
+                    <div class="content nil-doc-scrollable">
+                        <slot {tag} props={resolve(defaults, values)} />
+                    </div>
+                {/key}
+            {/if}
             {#if $controls.length > 0 && ($current === id || hovered === id)}
                 <div class="misc nil-doc-scrollable" transition:slide>
                     <Controls infos={$controls} bind:values />

package/components/block/Template.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare class __sveltets_Render<Args> {
     props(): {
         defaults: Args;
+        noreset?: boolean | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/components/etc/Container.svelte

@@ -56,10 +56,9 @@
 export let vertical = false;
 // initial value where the divider is located
 export let offset = 0;
-// which position is offset located
-// if true, the reference content is from slot="b"
-// if false, the reference content is from slot="a"
-export let reversed = false;
+// when secondary is enabled, main focus will be the secondary slot
+// collapsing will hide the primary slot
+export let secondary = false;
 // min distance of divider to the edges
 export let padding = 0;
 let width;
@@ -75,7 +74,7 @@ function update(w, h, limit, value) {
 }
 $: update(width, height, padding, $position);
 $: offsetpx = collapse ? "10px" : `${offset}px`;
-$: style = reversed ? `auto 0px ${offsetpx}` : `${offsetpx} 0px auto`;
+$: style = !secondary ? `auto 0px ${offsetpx}` : `${offsetpx} 0px auto`;
 </script>
 <div
     class="container"
@@ -83,23 +82,24 @@ $: style = reversed ? `auto 0px ${offsetpx}` : `${offsetpx} 0px auto`;
     bind:clientHeight={height}
     bind:clientWidth={width}
     style:grid-template-columns={vertical ? style : null}
+    style:grid-template-rows={!vertical ? style : null}
 >
     {#if width != null && height != null}
-        <div style:grid-area={!reversed ? "primary" : "secondary"}>
-            {#if !collapse || reversed}
-                <slot name="a" />
+        <div style:grid-area="primary">
+            {#if !collapse || !secondary}
+                <slot name="primary" />
             {/if}
         </div>
         <div class="divider" class:vertical>
             <div
                 class="overlay"
-                use:draggable={{ reset: () => offset, reversed, vertical }}
+                use:draggable={{ reset: () => offset, reversed: !secondary, vertical }}
                 on:dblclick={() => (collapse = !collapse)}
             />
         </div>
-        <div style:grid-area={reversed ? "primary" : "secondary"}>
-            {#if !collapse || !reversed}
-                <slot name="b" />
+        <div style:grid-area="secondary">
+            {#if !collapse || secondary}
+                <slot name="secondary" />
             {/if}
         </div>
     {/if}

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

@@ -3,15 +3,15 @@ declare const __propDef: {
     props: {
         vertical?: boolean | undefined;
         offset?: number | undefined;
-        reversed?: boolean | undefined;
+        secondary?: boolean | undefined;
         padding?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        a: {};
-        b: {};
+        primary: {};
+        secondary: {};
     };
 };
 export type ContainerProps = typeof __propDef.props;

package/components/load.js

@@ -4,5 +4,6 @@ export function load(files_from_import_meta) {
     const rootlen = "./+page.svelte".length;
     return Object.keys(files_from_import_meta)
         .filter((p) => p.length > rootlen) // remove root page
+        .filter((p) => /.*\[.*\].*/.exec(p) == null)
         .map((p) => p.substring(prefix, p.length - suffix));
 }

package/components/navigation/Nav.svelte

@@ -1,6 +1,4 @@
 <style>
-    @import "../../styles/scrollable.css";
-
     .nav {
         width: 100%;
         height: 100%;
@@ -66,7 +64,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 nil-doc-scrollable">
+<div class="nav">
     <div class="logo"><slot /></div>
     <div class="search-bar">
         <input bind:value={filter} type="text" />

package/package.json

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