@nil-/doc 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @nil-/doc
 
+## 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
+
+-   a286896: Removed fonts to css
+    Moved common style to css files
+    Moved static in src
+    Moved Controls to its own component
+    Scoped styles by `nil-doc` prefix
+    Fixed css reset for Layout and Block
+    Allow filtering after renaming (url paths)
+    Added title to +layout.svelte
+    Updated layout documentation
+    Update dependencies
+
 ## 0.2.6
 
 ### Patch Changes

package/components/Layout.svelte

@@ -1,14 +1,12 @@
 <style>
-    .wrapper {
-        width: 100%;
-        height: 100%;
-        font-family: "Fira Code", "Courier New", Courier, monospace;
-    }
+    @import "../styles/reset.css";
+    @import "../styles/scrollable.css";
 
-    .wrapper {
-        overflow: hidden;
-        background-color: rgb(34, 36, 37);
+    .root {
+        width: 100%;
         color: rgb(201, 205, 207);
+        background-color: rgb(34, 36, 37);
+        font-family: "Fira Code", "Courier New", Courier, monospace;
     }
 
     .content {
@@ -17,34 +15,24 @@
         display: flex;
         flex-direction: column;
     }
-
-    .scrollable {
-        overflow: scroll;
-        scrollbar-width: none; /* Firefox */
-        -ms-overflow-style: none; /* IE and Edge */
-    }
-
-    .scrollable::-webkit-scrollbar {
-        display: none;
-    }
 </style>
 
 <script>import Container from "./etc/Container.svelte";
 import Nav from "./navigation/Nav.svelte";
-import Font from "./etc/Font.svelte";
+import { inRoot } from "./context";
 export let data;
 export let current = null;
 export let sorter = null;
 export let renamer = null;
+const r = inRoot();
 </script>
-<Font />
-<div class="wrapper">
+<div class="root" 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 ? -1 : l > r ? +1 : 0))}
+                sorter={sorter ?? ((l, r) => (l === r ? 0 : l < r ? -1 : +1))}
                 renamer={renamer ?? ((s) => s)}
                 on:navigate
             >
@@ -52,7 +40,7 @@ export let renamer = null;
             </Nav>
         </svelte:fragment>
         <svelte:fragment slot="b">
-            <div class="content scrollable">
+            <div class="content nil-doc-scrollable">
                 {#key current}
                     <slot name="content" />
                 {/key}

package/components/block/Block.svelte

@@ -1,18 +1,22 @@
 <script>import { initCurrent, initParams, initControls } from "./context";
+import { inRoot } from "../context";
 initParams();
 initCurrent();
 initControls();
+const r = inRoot();
 </script>
 <style>
+    @import "../../styles/reset.css";
+
     div {
-        width: 100%;
         display: flex;
         flex-direction: column;
+        font-family: "Fira Code", "Courier New", Courier, monospace;
     }
 </style>
 
 
-<div>
+<div class:nil-doc-reset={r}>
     <slot />
 </div>
 

package/components/block/Template.svelte

@@ -1,4 +1,6 @@
 <style>
+    @import "../../styles/scrollable.css";
+
     .template {
         display: flex;
         flex-direction: column;
@@ -14,53 +16,30 @@
     }
 
     .content {
-        padding: 10px;
+        padding: 3px;
         min-height: 100px;
         border-radius: 5px 5px 5px 5px;
-        background-color: rgb(100, 96, 96);
-    }
-
-    .scrollable {
-        width: 100%;
-        overflow: scroll;
-        scrollbar-width: none; /* Firefox */
-        -ms-overflow-style: none; /* IE and Edge */
+        border: rgb(100, 96, 96) solid 1px;
+        background-color: rgb(33, 36, 37);
     }
 
-    .scrollable::-webkit-scrollbar {
-        display: none;
+    .content > :global(*) {
+        all: initial;
     }
 
     .misc {
-        margin-top: 5px;
-        padding: 5px;
-        background-color: rgb(100, 96, 96);
+        margin-top: 2px;
+        outline: rgb(100, 96, 96) solid 1px;
         border-bottom-left-radius: 5px;
         border-bottom-right-radius: 5px;
         user-select: none;
     }
-
-    .misc > .controls {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 1fr 200px 75px;
-        grid-auto-rows: 1fr;
-    }
-
-    .misc > .controls > .header {
-        text-align: center;
-    }
 </style>
 <svelte:window on:click={() => ($current = null)} />
 
 <script>import { beforeUpdate } from "svelte";
 import { getParams, getCurrent, getControls } from "./context";
-import Text from "./controls/Text.svelte";
-import Number from "./controls/Number.svelte";
-import Range from "./controls/Range.svelte";
-import Switch from "./controls/Switch.svelte";
-import Select from "./controls/Select.svelte";
-import Font from "../etc/Font.svelte";
+import Controls from "./controls/Component.svelte";
 import { slide } from "svelte/transition";
 const params = getParams();
 const current = getCurrent();
@@ -94,7 +73,6 @@ let hovered = null;
 let rerender = false;
 beforeUpdate(() => (rerender = !rerender));
 </script>
-<Font />
 <div class="template">
     {#each $params as { id, tag, values } (id)}
         <div
@@ -105,32 +83,13 @@ beforeUpdate(() => (rerender = !rerender));
             on:keypress={null}
         >
             {#key rerender}
-                <div class="content scrollable">
+                <div class="content nil-doc-scrollable">
                     <slot {tag} props={resolve(defaults, values)} />
                 </div>
             {/key}
             {#if $controls.length > 0 && ($current === id || hovered === id)}
-                <div class="misc scrollable" transition:slide>
-                    <div class="controls">
-                        <div class="header">Name</div>
-                        <div class="header">Value</div>
-                        <div class="header">In Use</div>
-                        {#each $controls as info}
-                            {@const type = info.type}
-                            {@const name = info.name}
-                            {#if type === "text"}
-                                <Text {info} bind:value={values[name]} />
-                            {:else if type === "number"}
-                                <Number {info} bind:value={values[name]} />
-                            {:else if type === "range"}
-                                <Range {info} bind:value={values[name]} />
-                            {:else if type === "select"}
-                                <Select {info} bind:value={values[name]} />
-                            {:else if type === "switch"}
-                                <Switch {info} bind:value={values[name]} />
-                            {/if}
-                        {/each}
-                    </div>
+                <div class="misc nil-doc-scrollable" transition:slide>
+                    <Controls infos={$controls} bind:values />
                 </div>
             {/if}
         </div>

package/components/block/controls/Component.svelte

@@ -0,0 +1,71 @@
+<style>
+    .controls {
+        width: 100%;
+        display: grid;
+        grid-auto-rows: 1fr;
+    }
+
+    .header {
+        text-align: center;
+    }
+
+    .row {
+        width: 100%;
+        display: grid;
+        padding: 2px 0px;
+        grid-template-columns: 1fr 200px 75px;
+        background-color: hsl(205, 50%, 5%);
+    }
+
+    .row:nth-child(even) {
+        background-color: hsl(205, 15%, 15%);
+    }
+
+    .row > :global(div:nth-child(1)) {
+        padding-left: 10px;
+    }
+
+    .row > :global(div) {
+        display: grid;
+        align-items: center;
+    }
+
+    .row > :global(div > *) {
+        width: 100%;
+        height: 100%;
+    }
+</style>
+
+<script>import Text from "./Text.svelte";
+import Number from "./Number.svelte";
+import Range from "./Range.svelte";
+import Switch from "./Switch.svelte";
+import Select from "./Select.svelte";
+export let infos;
+export let values;
+</script>
+<div class="controls">
+    <div class="row">
+        <div class="header">Name</div>
+        <div class="header">Value</div>
+        <div class="header">Use</div>
+    </div>
+    {#each infos as info}
+        {@const type = info.type}
+        {@const name = info.name}
+        <div class="row">
+            {#if type === "text"}
+                <Text {info} bind:value={values[name]} />
+            {:else if type === "number"}
+                <Number {info} bind:value={values[name]} />
+            {:else if type === "range"}
+                <Range {info} bind:value={values[name]} />
+            {:else if type === "select"}
+                <Select {info} bind:value={values[name]} />
+            {:else if type === "switch"}
+                <Switch {info} bind:value={values[name]} />
+            {/if}
+        </div>
+    {/each}
+</div>
+

package/components/block/controls/Component.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Control } from "./types";
+import type { ParamValues } from "../context";
+declare const __propDef: {
+    props: {
+        infos: Control[];
+        values: ParamValues;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentProps = typeof __propDef.props;
+export type ComponentEvents = typeof __propDef.events;
+export type ComponentSlots = typeof __propDef.slots;
+export default class Component extends SvelteComponentTyped<ComponentProps, ComponentEvents, ComponentSlots> {
+}
+export {};

package/components/block/controls/Number.svelte

@@ -5,6 +5,6 @@ let ivalue = value ?? 0;
 let enabled = value !== undefined;
 $: value = enabled ? ivalue : undefined;
 </script>
-<span>{info.name}</span>
-<input type="number" bind:value={ivalue} disabled={!enabled} />
-<input type="checkbox" bind:checked={enabled} />
+<div>{info.name}</div>
+<div><input type="number" bind:value={ivalue} disabled={!enabled} /></div>
+<div><input type="checkbox" bind:checked={enabled} /></div>

package/components/block/controls/Range.svelte

@@ -1,11 +1,11 @@
 <style>
-    div {
+    .input {
         width: 100%;
         display: grid;
         grid-template-columns: 40px 1fr;
     }
 
-    div > span {
+    .input > span {
         text-align: center;
     }
 </style>
@@ -16,8 +16,8 @@ let ivalue = value ?? info.min;
 let enabled = value !== undefined;
 $: value = enabled ? ivalue : undefined;
 </script>
-<span>{info.name}</span>
-<div>
+<div>{info.name}</div>
+<div class="input">
     <span>{ivalue}</span>
     <input
         type="range"
@@ -28,5 +28,5 @@ $: value = enabled ? ivalue : undefined;
         disabled={!enabled}
     />
 </div>
-<input type="checkbox" bind:checked={enabled} />
+<div><input type="checkbox" bind:checked={enabled} /></div>
 

package/components/block/controls/Select.svelte

@@ -5,10 +5,12 @@ let ivalue = value ?? (info.values.length > 0 ? info.values[0] : undefined);
 let enabled = value !== undefined;
 $: value = enabled ? ivalue : undefined;
 </script>
-<span>{info.name}</span>
-<select bind:value={ivalue} disabled={!enabled}>
-    {#each info.values as value}
-        <option {value}>{value}</option>
-    {/each}
-</select>
-<input type="checkbox" bind:checked={enabled} />
+<div>{info.name}</div>
+<div>
+    <select bind:value={ivalue} disabled={!enabled}>
+        {#each info.values as value}
+            <option {value}>{value}</option>
+        {/each}
+    </select>
+</div>
+<div><input type="checkbox" bind:checked={enabled} /></div>

package/components/block/controls/Switch.svelte

@@ -5,6 +5,6 @@ let ivalue = value ?? false;
 let enabled = value !== undefined;
 $: value = enabled ? ivalue : undefined;
 </script>
-<span>{info.name}</span>
-<input type="checkbox" bind:checked={ivalue} disabled={!enabled} />
-<input type="checkbox" bind:checked={enabled} />
+<div>{info.name}</div>
+<div><input type="checkbox" bind:checked={ivalue} disabled={!enabled} /></div>
+<div><input type="checkbox" bind:checked={enabled} /></div>

package/components/block/controls/Text.svelte

@@ -5,6 +5,6 @@ let ivalue = value ?? "";
 let enabled = value !== undefined;
 $: value = enabled ? ivalue : undefined;
 </script>
-<span>{info.name}</span>
-<input type="text" bind:value={ivalue} disabled={!enabled} />
-<input type="checkbox" bind:checked={enabled} />
+<div>{info.name}</div>
+<div><input type="text" bind:value={ivalue} disabled={!enabled} /></div>
+<div><input type="checkbox" bind:checked={enabled} /></div>

package/components/context.d.ts

@@ -0,0 +1 @@
+export declare function inRoot(): boolean;

package/components/context.js

@@ -0,0 +1,7 @@
+import { setContext, getContext } from "svelte";
+const root = Symbol();
+export function inRoot() {
+    const value = getContext(root);
+    setContext(root, false);
+    return value !== false;
+}

package/components/etc/Container.svelte

@@ -1,5 +1,5 @@
 <style>
-    .root {
+    .container {
         display: flex;
         position: relative;
         width: 100%;
@@ -20,8 +20,8 @@
         user-select: none;
     }
 
-    .root > div {
-        outline: white solid 1px;
+    .container > div {
+        outline: rgb(100, 96, 96) solid 1px;
     }
 </style>
 
@@ -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,11 +50,11 @@ 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
-    class="root"
+    class="container"
     bind:clientHeight={height}
     bind:clientWidth={width}
     style:flex-direction={vertical ? "row" : "column"}
@@ -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/components/navigation/Nav.svelte

@@ -1,5 +1,5 @@
 <style>
-    .root {
+    .nav {
         gap: 10px;
         padding-top: 20px;
         display: flex;
@@ -18,8 +18,7 @@
     }
 </style>
 
-<script context="module">"use strict";
-function apply(paths, init, pre, next, post) {
+<script context="module">function apply(paths, init, pre, next, post) {
     const retval = {};
     for (const path of paths) {
         const parts = path.split("/");
@@ -45,6 +44,15 @@ function apply(paths, init, pre, next, post) {
     }
     return retval;
 }
+function filt(path, filter, renamer) {
+    return path.includes(filter) || path.split("/").map(renamer).join("/").includes(filter);
+}
+function populate(filter, info, renamer) {
+    return apply(filter.length > 0 ? info.filter((path) => filt(path, filter, renamer)) : info, () => ({ url: null, sub: {} }), (t) => t, (t) => t.sub, (t, p) => {
+        t.url = p;
+    });
+}
+export {};
 </script>
 <script>import Tree from "./Tree.svelte";
 export let info;
@@ -53,20 +61,15 @@ export let sorter;
 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);
-function populate(f, i) {
-    return apply(f.length > 0 ? i.filter((d) => d.includes(f)) : i, () => ({ url: null, sub: {} }), (t) => t, (t) => t.sub, (t, p) => {
-        t.url = p;
-    });
-}
 </script>
-<div class="root">
+<div class="nav">
     <div class="logo"><slot /></div>
     <div class="search-bar">
         <input bind:value={filter} type="text" />
     </div>
     <div class="tree">
         <Tree
-            tree={populate(filter, info)}
+            tree={populate(filter, info, renamer)}
             {selected}
             {sorter}
             {renamer}

package/components/navigation/Node.svelte

@@ -38,6 +38,7 @@
 
     .header.selected {
         background-color: rgba(2, 157, 253, 0.822);
+        color: black;
     }
 </style>
 

package/package.json

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

package/styles/reset.css

@@ -0,0 +1,19 @@
+@font-face {
+    font-family: "Fira Code";
+    src: url("https://fonts.googleapis.com/css?family=Fira Code");
+}
+
+.nil-doc-reset {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    font-family: "Fira Code", "Courier New", Courier, monospace;
+}
+
+.nil-doc-reset *,
+.nil-doc-reset *::before,
+.nil-doc-reset *::after {
+    box-sizing: inherit;
+    padding: 0px;
+    margin: 0px;
+}

package/styles/scrollable.css

@@ -0,0 +1,9 @@
+.nil-doc-scrollable {
+    overflow: scroll;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+}
+
+.nil-doc-scrollable::-webkit-scrollbar {
+    display: none;
+}