@nil-/doc 0.2.36 → 0.2.38

package/CHANGELOG.md

@@ -1,20 +1,33 @@
 # @nil-/doc
 
+## 0.2.38
+
+### Patch Changes
+
+-   [doc][new] added fuzzy match for nav filter ([#59](https://github.com/njaldea/mono/pull/59))
+
+## 0.2.37
+
+### Patch Changes
+
+-   [doc][fix] params prop is now reactive ([#57](https://github.com/njaldea/mono/pull/57))
+-   [doc][docu] added component documentation link to deployment ([#57](https://github.com/njaldea/mono/pull/57))
+-   [doc][patch] removed inRoot ([#57](https://github.com/njaldea/mono/pull/57))
+-   [doc][patch] refactored Instance/Template/Params ([#57](https://github.com/njaldea/mono/pull/57))
+
 ## 0.2.36
 
 ### Patch Changes
 
 -   [doc][fix] color changes and transition ([#55](https://github.com/njaldea/mono/pull/55))
-
--   [all] added html meta details ([#55](https://github.com/njaldea/mono/pull/55))
+-   [doc][patch] added html meta details ([#55](https://github.com/njaldea/mono/pull/55))
 
 ## 0.2.35
 
 ### Patch Changes
 
--   [doc] changed Control "side" flag to "position" prop ([#53](https://github.com/njaldea/mono/pull/53))
-
--   [misc] added nil icon ([#53](https://github.com/njaldea/mono/pull/53))
+-   [doc][break] changed Control "side" flag to "position" prop ([#53](https://github.com/njaldea/mono/pull/53))
+-   [doc][new] added nil icon ([#53](https://github.com/njaldea/mono/pull/53))
 
 ## 0.2.34
 
@@ -28,21 +41,20 @@
 
 ### Patch Changes
 
--   [doc] update formatting (camel case use) ([#49](https://github.com/njaldea/mono/pull/49))
+-   [doc][patch] update formatting (camel case use) ([#49](https://github.com/njaldea/mono/pull/49))
 
 ## 0.2.32
 
 ### Patch Changes
 
--   [doc] relaxed file extension for sveltekit helper ([#47](https://github.com/njaldea/mono/pull/47))
+-   [doc][new] relaxed file extension for sveltekit helper ([#47](https://github.com/njaldea/mono/pull/47))
 
 ## 0.2.31
 
 ### Patch Changes
 
--   [doc] better container style ([#45](https://github.com/njaldea/mono/pull/45))
-
--   [doc] improved ThemeIcon ([#45](https://github.com/njaldea/mono/pull/45))
+-   [doc][patch] better container style ([#45](https://github.com/njaldea/mono/pull/45))
+-   [doc][patch] improved ThemeIcon ([#45](https://github.com/njaldea/mono/pull/45))
 
 ## 0.2.30
 
@@ -69,56 +81,56 @@
 
 ### Patch Changes
 
--   [doc] fix fira code css import ([#35](https://github.com/njaldea/mono/pull/35))
+-   [doc][fix] fix fira code css import ([#35](https://github.com/njaldea/mono/pull/35))
 
 ## 0.2.26
 
 ### Patch Changes
 
--   [doc] removed fallback page in documentation ([#30](https://github.com/njaldea/mono/pull/30))
+-   [doc][docu] removed fallback page in documentation ([#30](https://github.com/njaldea/mono/pull/30))
 
 ## 0.2.25
 
 ### Patch Changes
 
--   186187c: [doc][breaking] removed layout slot prop for content. all unnamed slots will be part of the default slot
--   186187c: [doc] fix range tooltip styling
--   a82c0de: [doc] support dark/light mode
+-   186187c: [doc][new] removed layout slot prop for content. all unnamed slots will be part of the default slot
+-   186187c: [doc][fix] fix range tooltip styling
+-   a82c0de: [doc][new] support dark/light mode
 
 ## 0.2.24
 
 ### Patch Changes
 
--   782e6fa: [doc][breaking] simplified sveltekit glue layer
--   782e6fa: [doc] added documentation to public methods
+-   782e6fa: [doc][new] simplified sveltekit glue layer
+-   782e6fa: [doc][docu] added documentation to public methods
 
 ## 0.2.23
 
 ### Patch Changes
 
--   5655f86: [feature] added slot prop `key` to Template component
--   5655f86: [Dependencies] moved some devDependencies to peerDependencies
+-   5655f86: [doc][new] added slot prop `key` to Template component
+-   5655f86: [doc][patch] moved some devDependencies to peerDependencies
 
 ## 0.2.22
 
 ### Patch Changes
 
--   3ce0a62: [doc] support for touch event via pointerevent (draggable container)
+-   3ce0a62: [doc][new] support for touch event via pointerevent (draggable container)
 
 ## 0.2.21
 
 ### Patch Changes
 
 -   0398a72: [doc][fix] remove dependency on box-sizing
-    [doc][fix] control min width
-    [doc][feature] made template configurable by column prop
+-   0398a72: [doc][fix] control min width
+-   0398a72: [doc][new] made template configurable by column prop
 
 ## 0.2.20
 
 ### Patch Changes
 
 -   3eee0ce: [doc][fix] removed setting of margin/padding
-    [doc][fix] only propagate box-sizing (inherit)
+-   3eee0ce: [doc][fix] only propagate box-sizing (inherit)
 
 ## 0.2.19
 
@@ -136,68 +148,62 @@
 
 ### Patch Changes
 
--   af86341: [doc] moved default mapping in a common lib
-    [doc] fix typing
-    [doc] if Param's tag is not provided, use stringified id
+-   af86341: [doc][fix] moved default mapping in a common lib
+-   af86341: [doc][fix] fix typing
+-   af86341: [doc][patch] if Param's tag is not provided, use stringified id
 
 ## 0.2.16
 
 ### Patch Changes
 
--   650eb4b: [doc] revived proper ordering of params
-    [doc] each param now has its own defaults (which is resolved from template's default and pram's props)
+-   650eb4b: [doc][fix] revived proper ordering of params
+-   650eb4b: [doc][new] each param now has its own defaults (which is resolved from template's default and pram's props)
 
 ## 0.2.15
 
 ### Patch Changes
 
--   44a7113: [doc] added documentation for internal Container
-    [doc] adjusted api for load (now `routes`)
-    [doc] fix for layout group route
+-   44a7113: [doc][docu] added documentation for internal Container
+-   44a7113: [doc][new] adjusted api for load (now `routes`)
+-   44a7113: [doc][fix] fix for layout group route
 
 ## 0.2.14
 
 ### Patch Changes
 
--   6265fa6: [doc] added Tuple and Object Controls
-    [doc] added temporary internal doc
+-   6265fa6: [doc][new] added Tuple and Object Controls
+-   6265fa6: [doc][docu] added temporary internal doc
 
 ## 0.2.13
 
 ### Patch Changes
 
--   39dbce9: [doc] navigation now automatically opens when redirected to a route that is still collapsed
+-   39dbce9: [doc][new] navigation now automatically opens when redirected to a route that is still collapsed
 
 ## 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
-
--   8d16322: noop
+-   6c2d946: [doc][fix] Nav now is not scrollable
+-   6c2d946: [doc][fix] Removes Container's "reversed" flag
+-   6c2d946: [doc][fix] Adds "secondary" flag to Container
+-   6c2d946: [doc][fix] Changes Container slot name (primary is top or left, seconadry is bottom or right)
+-   6c2d946: [doc][fix] load now removes routes with parameters
+-   6c2d946: [doc][fix] Template now supports `noreset`
+-   6c2d946: [doc][fix] Updates documentation
 
 ## 0.2.10
 
 ### Patch Changes
 
--   c6de380: [feature] container collapsing now supported
-    [cleanup] styling of container now uses grid for easier handling
+-   c6de380: [doc][new] container collapsing now supported
+-   c6de380: [doc][patch] styling of container now uses grid for easier handling
 
 ## 0.2.9
 
 ### Patch Changes
 
--   5c10f11: [fix] layout fill height
+-   5c10f11: [doc][patch] layout fill height
 
 ## 0.2.8
 

package/components/Layout.svelte

@@ -8,6 +8,7 @@
         gap: 1px;
         width: 100%;
         height: 100%;
+        box-sizing: border-box;
         font-family: "Fira Code", "Courier New", Courier, monospace;
     }
 
@@ -26,6 +27,16 @@
         overflow: hidden;
     }
 
+    .icon {
+        width: 100%;
+        height: 100%;
+        transition: transform 350ms;
+    }
+
+    .icon:hover {
+        transform: scale(1.5);
+    }
+
     .content {
         height: 100%;
         padding: 5px;
@@ -34,14 +45,6 @@
         box-sizing: border-box;
     }
 
-    /* reset block */
-    .reset {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        font-family: "Fira Code", "Courier New", Courier, monospace;
-    }
-
     /* scrollable */
     .scrollable {
         overflow: scroll;
@@ -81,7 +84,7 @@
 </script>
 <script>import Container from "./etc/Container.svelte";
 import Nav from "./navigation/Nav.svelte";
-import { inRoot, getTheme, initTheme, evalTheme } from "./context";
+import { getTheme, initTheme, evalTheme } from "./context";
 import ThemeIcon from "./etc/ThemeIcon.svelte";
 import NilIcon from "./etc/NilIcon.svelte";
 export let data;
@@ -89,21 +92,32 @@ export let current = null;
 export let sorter = null;
 export let renamer = null;
 export let theme = void 0;
-const r = inRoot();
 const parentTheme = getTheme();
-const isDark = initTheme();
+const dark = initTheme();
 $:
-  $isDark = evalTheme(parentTheme ? $parentTheme : true, theme);
+  $dark = evalTheme(parentTheme ? $parentTheme : true, theme);
 </script>
-<div class="layout" class:reset={r} class:dark={$isDark}>
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/1-Layout) for more details.
+-->
+<div class="layout" class:dark={$dark}>
     <div class="top">
         <slot name="title"><span>@nil-/doc</span></slot>
-        <ThemeIcon bind:dark={$isDark} />
-        <NilIcon />
+        <div class="icon" on:click={() => ($dark = !$dark)} on:keypress={null}>
+            <ThemeIcon bind:dark={$dark} />
+        </div>
+        <div
+            class="icon"
+            title="Double click to open repo: https://github.com/njaldea/mono"
+            on:dblclick={() => window.open("https://github.com/njaldea/mono", "_blank")}
+        >
+            <NilIcon />
+        </div>
     </div>
     <div class="main">
-        <Container offset={250} vertical secondary>
-            <svelte:fragment slot="primary">
+        <Container offset={250} vertical b>
+            <svelte:fragment slot="A">
                 <div class="content scrollable">
                     <Nav
                         info={data}
@@ -114,7 +128,7 @@ $:
                     />
                 </div>
             </svelte:fragment>
-            <svelte:fragment slot="secondary">
+            <svelte:fragment slot="B">
                 <div class="content scrollable">
                     {#key current}
                         <slot />

package/components/Layout.svelte.d.ts

@@ -22,6 +22,7 @@ declare const __propDef: {
 export type LayoutProps = typeof __propDef.props;
 export type LayoutEvents = typeof __propDef.events;
 export type LayoutSlots = typeof __propDef.slots;
+/** See [documentation](https://mono-doc.vercel.app/3-Components/1-Layout) for more details. */
 export default class Layout extends SvelteComponentTyped<LayoutProps, LayoutEvents, LayoutSlots> {
 }
 export {};

package/components/block/Block.svelte

@@ -2,46 +2,63 @@
     @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
 
     div {
-        display: flex;
-        flex-direction: column;
-        font-family: "Fira Code", "Courier New", Courier, monospace;
-    }
+        display: grid;
+        border-radius: 5px;
+        grid-auto-rows: 1fr;
+        grid-auto-columns: auto;
+        grid-auto-flow: row;
 
-    /* reset block */
-    .reset {
-        width: 100%;
-        height: 100%;
         box-sizing: border-box;
         font-family: "Fira Code", "Courier New", Courier, monospace;
+        padding: 13px 3px;
+        gap: 3px;
+    }
+
+    div.columns {
+        grid-auto-rows: auto;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
     }
 
     /* colors */
     div {
         color-scheme: light;
-        color: hsl(0, 100%, 0%);
-        transition: color 350ms;
+        color: hsl(0, 0%, 0%);
+        background-color: hsl(0, 2%, 70%);
+        transition: color 350ms, background-color 350ms;
     }
 
     div.dark {
         color-scheme: dark;
-        color: hsl(200, 6%, 80%);
+        color: hsl(0, 0%, 80%);
+        background-color: hsl(0, 2%, 40%);
     }
 </style>
 
-<script>import { initParams, initDefaults, initControls, initControlsState } from "./context";
-import { inRoot, getTheme, initTheme, evalTheme } from "../context";
+<script>import {
+  initParams,
+  initDefaults,
+  initControls,
+  initControlsState,
+  initOrientation
+} from "./context";
+import { getTheme, initTheme, evalTheme } from "../context";
 initParams();
 initDefaults();
 initControls();
 initControlsState();
-const r = inRoot();
+const columns = initOrientation();
 export let theme = void 0;
 const parentTheme = getTheme();
-const isDark = initTheme();
+const dark = initTheme();
 $:
-  $isDark = evalTheme(parentTheme ? $parentTheme : false, theme);
+  $dark = evalTheme(parentTheme ? $parentTheme : false, theme);
 </script>
-<div class:reset={r} class:dark={$isDark}>
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block) for more details.
+-->
+<div class:columns={$columns} class:dark={$dark}>
     <slot />
 </div>
 

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

@@ -14,6 +14,7 @@ declare const __propDef: {
 export type BlockProps = typeof __propDef.props;
 export type BlockEvents = typeof __propDef.events;
 export type BlockSlots = typeof __propDef.slots;
+/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block) for more details. */
 export default class Block extends SvelteComponentTyped<BlockProps, BlockEvents, BlockSlots> {
 }
 export {};

package/components/block/Controls.svelte

@@ -4,10 +4,15 @@ export let props = [];
 export let hide = false;
 export let position = void 0;
 const controls = getControls();
-$controls = props;
+$:
+  $controls = props;
 const state = getControlsState();
 $:
   $state.hide = hide;
 $:
   $state.position = position;
 </script>
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/3-Controls) for more details.
+-->

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

@@ -14,6 +14,7 @@ declare const __propDef: {
 export type ControlsProps = typeof __propDef.props;
 export type ControlsEvents = typeof __propDef.events;
 export type ControlsSlots = typeof __propDef.slots;
+/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/3-Controls) for more details. */
 export default class Controls extends SvelteComponentTyped<ControlsProps, ControlsEvents, ControlsSlots> {
 }
 export {};

package/components/block/Instance.svelte

@@ -1,11 +1,115 @@
+<style>
+    div {
+        box-sizing: border-box;
+    }
 
-<script>import Template from "./Template.svelte";
-import Params from "./Params.svelte";
+    .instance {
+        overflow: hidden;
+    }
+
+    .cside {
+        display: grid;
+        grid-template-columns: 1fr 550px;
+    }
+
+    .content {
+        min-height: 100px;
+        border-radius: 5px;
+    }
+
+    div:not(.cside) > .misc {
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+        user-select: none;
+    }
+
+    .cside > .misc {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+        user-select: none;
+    }
+
+    .content,
+    .misc {
+        border-style: solid;
+        border-width: 1px;
+        padding: 2px;
+    }
+
+    /* scrollable */
+    .scrollable {
+        overflow: scroll;
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* IE and Edge */
+    }
+
+    .scrollable::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* colors */
+    .content,
+    .misc {
+        border-color: hsl(0, 2%, 60%);
+        background-color: hsl(0, 0%, 100%);
+        transition: border-color 350ms, background-color 350ms;
+    }
+
+    .dark.content,
+    .dark.misc {
+        border-color: hsl(0, 2%, 40%);
+        background-color: hsl(200, 4%, 14%);
+    }
+</style>
+
+<script>import { beforeUpdate } from "svelte";
+import { cquery } from "./action";
+import { getControls, getControlsState } from "./context";
+import { getTheme } from "../context";
+import Controls from "./controls/Controls.svelte";
+import { resolve } from "./utils";
+const controls = getControls();
+const controlsState = getControlsState();
+const dark = getTheme();
+$:
+  expanded = $controls.length > 0 && !$controlsState.hide;
 export let defaults = void 0;
 export let noreset = false;
-const cast = (t) => t;
+let key = false;
+beforeUpdate(() => key = !key);
+const resolveArgs = resolve;
+let bound = {};
+const updateBound = (d) => {
+  bound = resolve(d ?? {}, {});
+};
+$:
+  updateBound(defaults);
 </script>
-<Template {defaults} {noreset} let:props let:key>
-    <slot props={cast(props)} {key} />
-</Template>
-<Params />
+<div
+    class="instance"
+    class:cside={expanded && "right" === $controlsState.position}
+    use:cquery={{
+        class: "cside",
+        min: 1000,
+        w: true,
+        enabled: expanded && $controlsState.position === undefined
+    }}
+>
+    {#if noreset}
+        <div class="content scrollable" class:dark={$dark}>
+            <slot props={resolveArgs(defaults ?? {}, bound)} {key} />
+        </div>
+    {:else}
+        {#key key}
+            <div class="content scrollable" class:dark={$dark}>
+                <slot props={resolveArgs(defaults ?? {}, bound)} {key} />
+            </div>
+        {/key}
+    {/if}
+    {#if expanded}
+        <div class="misc scrollable" class:dark={$dark}>
+            <Controls infos={$controls} bind:values={bound} />
+        </div>
+    {/if}
+</div>
+

package/components/block/Params.svelte

@@ -1,24 +1,21 @@
 
-<script>import { onMount } from "svelte";
-import { getParams, getDefaults } from "./context";
+<script>import { getParams } from "./context";
 import { resolve } from "./utils";
 export let tag = void 0;
 export let props = {};
-const defaults = getDefaults();
 const params = getParams();
-onMount(
-  () => defaults.subscribe((d) => {
-    if (d != null) {
-      params.update((p) => [
-        ...p,
-        {
-          id: p.length,
-          tag: tag ?? `${p.length}`,
-          values: resolve(d, props),
-          defaults: resolve(d, props)
-        }
-      ]);
-    }
-  })
-);
+const id = $params.length;
+$params.push({
+  id,
+  tag: tag ?? `${id}`,
+  values: resolve(props, {})
+});
+$:
+  $params[id].tag = tag ?? `${id}`;
+$:
+  $params[id].values = resolve(props, {});
 </script>
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Template/1-Params) for more details.
+-->

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

@@ -13,6 +13,7 @@ declare const __propDef: {
 export type ParamsProps = typeof __propDef.props;
 export type ParamsEvents = typeof __propDef.events;
 export type ParamsSlots = typeof __propDef.slots;
+/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Template/1-Params) for more details. */
 export default class Params extends SvelteComponentTyped<ParamsProps, ParamsEvents, ParamsSlots> {
 }
 export {};