@nil-/doc 0.2.49 → 0.2.50

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nil-/doc
 
+## 0.2.50
+
+### Patch Changes
+
+-   [doc][new] removed default nil icon ([#86](https://github.com/njaldea/mono/pull/86))
+    [doc][new] allow override of theme icon
+
 ## 0.2.49
 
 ### Patch Changes

package/components/Layout.svelte

@@ -1,3 +1,70 @@
+<script context="module">const defaultSorter = (l, r) => l.localeCompare(r);
+const defaultRenamer = (s) => s;
+</script>
+
+<script>import Container from "./etc/Container.svelte";
+import Nav from "./navigation/Nav.svelte";
+import Icon from "./title/Icon.svelte";
+import { getTheme, initTheme } from "./context";
+import ThemeIcon from "./icons/Theme.svelte";
+export let data;
+export let current = null;
+export let sorter = null;
+export let renamer = null;
+export let theme = void 0;
+const parentTheme = getTheme();
+const dark = initTheme();
+$:
+  $dark = theme === void 0 ? $parentTheme : "dark" === theme;
+const toggle = () => {
+  if (theme !== void 0) {
+    theme = $dark ? "light" : "dark";
+  } else {
+    $dark = !$dark;
+  }
+};
+</script>
+
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/1-Layout) for more details.
+-->
+
+<div class="layout" class:dark={$dark}>
+    <div class="top">
+        <div class="title">
+            <slot name="title" />
+        </div>
+        <slot name="title-misc">
+            <Icon on:click={toggle}>
+                <ThemeIcon {theme} />
+            </Icon>
+        </slot>
+    </div>
+    <div class="main">
+        <Container offset={250} vertical b>
+            <svelte:fragment slot="A">
+                <div class="content scrollable">
+                    <Nav
+                        info={data}
+                        selected={current ?? ""}
+                        sorter={sorter ?? defaultSorter}
+                        renamer={renamer ?? defaultRenamer}
+                        on:navigate
+                    />
+                </div>
+            </svelte:fragment>
+            <svelte:fragment slot="B">
+                <div class="content page">
+                    {#key current}
+                        <slot />
+                    {/key}
+                </div>
+            </svelte:fragment>
+        </Container>
+    </div>
+</div>
+
 <style>
     @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
 
@@ -13,7 +80,9 @@
 
     .top {
         display: grid;
-        grid-template-columns: 1fr 40px 40px;
+        grid-auto-flow: column;
+        grid-auto-columns: 40px;
+        grid-template-columns: 1fr;
         align-items: center;
         padding-left: 10px;
         padding-right: 10px;
@@ -23,20 +92,17 @@
         user-select: none;
     }
 
-    .main {
-        height: 100%;
-        overflow: hidden;
+    .title {
+        display: grid;
+        grid-auto-flow: column;
+        align-items: center;
+        justify-content: left;
+        gap: 5px;
     }
 
-    .icon {
-        width: 100%;
+    .main {
         height: 100%;
-        cursor: pointer;
-        transition: transform 350ms;
-    }
-
-    .icon:hover {
-        transform: scale(1.5);
+        overflow: hidden;
     }
 
     .content {
@@ -83,72 +149,3 @@
         border-bottom-color: hsl(0, 2%, 40%);
     }
 </style>
-
-<script context="module">const defaultSorter = (l, r) => l.localeCompare(r);
-const defaultRenamer = (s) => s;
-</script>
-<script>import Container from "./etc/Container.svelte";
-import Nav from "./navigation/Nav.svelte";
-import { getTheme, initTheme } from "./context";
-import ThemeIcon from "./etc/ThemeIcon.svelte";
-import NilIcon from "./etc/NilIcon.svelte";
-export let data;
-export let current = null;
-export let sorter = null;
-export let renamer = null;
-export let theme = void 0;
-const parentTheme = getTheme();
-const dark = initTheme();
-$:
-  $dark = theme === void 0 ? $parentTheme : "dark" === theme;
-const toggle = () => {
-  if (theme !== void 0) {
-    theme = $dark ? "light" : "dark";
-  } else {
-    $dark = !$dark;
-  }
-};
-</script>
-<!--
-    @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>
-        <div class="icon" on:click={toggle} on:keypress={null}>
-            <ThemeIcon bind:dark={$dark} />
-        </div>
-        <div
-            class="icon"
-            title="Open @nil-/mono repo: https://github.com/njaldea/mono"
-            on:click={() => window.open("https://github.com/njaldea/mono", "_blank")}
-            on:keypress={null}
-        >
-            <NilIcon />
-        </div>
-    </div>
-    <div class="main">
-        <Container offset={250} vertical b>
-            <svelte:fragment slot="A">
-                <div class="content scrollable">
-                    <Nav
-                        info={data}
-                        selected={current ?? ""}
-                        sorter={sorter ?? defaultSorter}
-                        renamer={renamer ?? defaultRenamer}
-                        on:navigate
-                    />
-                </div>
-            </svelte:fragment>
-            <svelte:fragment slot="B">
-                <div class="content page">
-                    {#key current}
-                        <slot />
-                    {/key}
-                </div>
-            </svelte:fragment>
-        </Container>
-    </div>
-</div>
-

package/components/Layout.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
     };
     slots: {
         title: {};
+        'title-misc': {};
         default: {};
     };
 };

package/components/block/Block.svelte

@@ -1,3 +1,32 @@
+<script>import {
+  initParams,
+  initDefaults,
+  initControls,
+  initControlsState,
+  initOrientation
+} from "./context";
+import { getTheme, initTheme } from "../context";
+initParams();
+initDefaults();
+initControls();
+initControlsState();
+const columns = initOrientation();
+export let theme = void 0;
+const parentTheme = getTheme();
+const dark = initTheme();
+$:
+  $dark = theme === void 0 ? $parentTheme : "dark" === theme;
+</script>
+
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block) for more details.
+-->
+
+<div class:columns={$columns} class:dark={$dark}>
+    <slot />
+</div>
+
 <style>
     @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
 
@@ -34,31 +63,3 @@
         background-color: hsl(0, 2%, 40%);
     }
 </style>
-
-<script>import {
-  initParams,
-  initDefaults,
-  initControls,
-  initControlsState,
-  initOrientation
-} from "./context";
-import { getTheme, initTheme } from "../context";
-initParams();
-initDefaults();
-initControls();
-initControlsState();
-const columns = initOrientation();
-export let theme = void 0;
-const parentTheme = getTheme();
-const dark = initTheme();
-$:
-  $dark = theme === void 0 ? $parentTheme : "dark" === theme;
-</script>
-<!--
-    @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/Controls.svelte

@@ -1,4 +1,3 @@
-
 <script>import { getControls, getControlsState } from "./context";
 export let props = [];
 export let events = [];
@@ -13,6 +12,7 @@ $:
 $:
   $state.position = position;
 </script>
+
 <!--
     @component
     See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Controls) for more details.

package/components/block/Instance.svelte

@@ -1,75 +1,3 @@
-<style>
-    div {
-        box-sizing: border-box;
-    }
-
-    .instance {
-        overflow: hidden;
-    }
-
-    .instance.scale {
-        transition: transform 350ms;
-    }
-
-    .instance.scale:hover {
-        transform: scale(1.015);
-    }
-
-    .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";
@@ -107,10 +35,12 @@ $:
   updateBound(defaults);
 let handlers;
 </script>
+
 <!--
     @component
     See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/1-Instance) for more details.
 -->
+
 <div
     class="instance"
     class:scale
@@ -154,3 +84,74 @@ let handlers;
     {/if}
 </div>
 
+<style>
+    div {
+        box-sizing: border-box;
+    }
+
+    .instance {
+        overflow: hidden;
+    }
+
+    .instance.scale {
+        transition: transform 350ms;
+    }
+
+    .instance.scale:hover {
+        transform: scale(1.015);
+    }
+
+    .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>

package/components/block/Params.svelte

@@ -1,4 +1,3 @@
-
 <script>import { getParams } from "./context";
 import { resolve } from "./utils";
 export let tag = void 0;
@@ -15,6 +14,7 @@ $:
 $:
   $params[id].values = resolve(props, {});
 </script>
+
 <!--
     @component
     See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/2-Template/1-Params) for more details.

package/components/block/Template.svelte

@@ -1,4 +1,3 @@
-
 <script>import { beforeUpdate } from "svelte";
 import { getDefaults, getParams, getOrientation } from "./context";
 import { resolve } from "./utils";
@@ -19,10 +18,12 @@ beforeUpdate(() => key = !key);
 const resolveArgs = resolve;
 const cast = (t) => t;
 </script>
+
 <!--
     @component
     See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/2-Template) for more details.
 -->
+
 {#each $params as param (param.id)}
     <Instance
         defaults={resolveArgs($defaultsStore, param.values)}

package/components/block/controls/events/Events.svelte

@@ -1,12 +1,3 @@
-<style>
-    .count {
-        display: grid;
-        place-items: center;
-        text-align: center;
-        font-size: 0.8rem;
-    }
-</style>
-
 <script>import Styler from "./misc/Styler.svelte";
 export let visible;
 export let events;
@@ -48,6 +39,7 @@ const wrap = (ext) => {
 $:
   handlers = wrap(events);
 </script>
+
 {#if visible}
     <Styler>
         <slot />
@@ -67,3 +59,11 @@ $:
     </Styler>
 {/if}
 
+<style>
+    .count {
+        display: grid;
+        place-items: center;
+        text-align: center;
+        font-size: 0.8rem;
+    }
+</style>

package/components/block/controls/events/misc/Styler.svelte

@@ -1,6 +1,24 @@
 <script>import { getTheme } from "../../../../context";
 const dark = getTheme();
 </script>
+
+<!--
+    <div> this component
+        <div> Header
+            <div></div>
+            <div></div>
+        </div>
+        <div> Controls
+            <div></div>
+            <div></div>
+        </div>
+        ...
+    </div>
+-->
+<div class:dark={$dark}>
+    <slot />
+</div>
+
 <style>
     div {
         width: 100%;
@@ -62,22 +80,3 @@ const dark = getTheme();
         background-color: var(--hover-color);
     }
 </style>
-
-
-<!--
-    <div> this component
-        <div> Header
-            <div></div>
-            <div></div>
-        </div>
-        <div> Controls
-            <div></div>
-            <div></div>
-        </div>
-        ...
-    </div>
--->
-<div class:dark={$dark}>
-    <slot />
-</div>
-

package/components/block/controls/props/Component.svelte

@@ -1,4 +1,3 @@
-
 <script>import Text from "./Text.svelte";
 import Number from "./Number.svelte";
 import Range from "./Range.svelte";
@@ -12,6 +11,7 @@ export let depth;
 export let disabled = false;
 export let visible = false;
 </script>
+
 {#if info instanceof Array}
     {@const type = info[1]}
     {#if "object" === type}

package/components/block/controls/props/Number.svelte

@@ -1,4 +1,3 @@
-
 <script>import { getDefault } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
 export let value;
@@ -13,6 +12,7 @@ $:
 $:
   name = info instanceof Array ? info[0] : info.name;
 </script>
+
 {#if visible}
     <div>
         <NameHeader {name} {depth} />

package/components/block/controls/props/Object.svelte

@@ -1,4 +1,3 @@
-
 <script>import Component from "./Component.svelte";
 import Header from "./misc/GroupHeader.svelte";
 import { getDefault } from "./misc/defaulter";
@@ -17,7 +16,9 @@ $:
 $:
   name = info instanceof Array ? info[0] : info.name;
 </script>
+
 <Header {name} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
+
 {#each values as info, i (i)}
     <Component
         {info}

package/components/block/controls/props/Props.svelte

@@ -1,10 +1,10 @@
-
 <script>import Component from "./Component.svelte";
 import Styler from "./misc/Styler.svelte";
 export let infos;
 export let values;
 export let visible;
 </script>
+
 <Styler>
     {#if visible}
         <slot />

package/components/block/controls/props/Range.svelte

@@ -1,38 +1,3 @@
-<style>
-    .input {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 65px 1fr;
-        gap: 5px;
-        position: relative;
-    }
-
-    .input > div {
-        width: 100%;
-        height: 100%;
-        display: grid;
-        text-align: left;
-        align-items: center;
-        font-size: 0.8rem;
-        user-select: none;
-        margin: auto;
-    }
-
-    .tooltip {
-        left: -110%;
-        width: 100%;
-        height: 100%;
-        display: grid;
-        visibility: hidden;
-        position: absolute;
-        place-items: center;
-    }
-
-    .input:hover > .tooltip:not(.disabled) {
-        visibility: visible;
-    }
-</style>
-
 <script>import { getDefault } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
 import { nformat } from "./misc/nformat";
@@ -58,6 +23,7 @@ $:
     step: info.step
   };
 </script>
+
 {#if visible}
     <div>
         <NameHeader name={i.name} {depth} />
@@ -79,3 +45,37 @@ $:
     </div>
 {/if}
 
+<style>
+    .input {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 65px 1fr;
+        gap: 5px;
+        position: relative;
+    }
+
+    .input > div {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        text-align: left;
+        align-items: center;
+        font-size: 0.8rem;
+        user-select: none;
+        margin: auto;
+    }
+
+    .tooltip {
+        left: -110%;
+        width: 100%;
+        height: 100%;
+        display: grid;
+        visibility: hidden;
+        position: absolute;
+        place-items: center;
+    }
+
+    .input:hover > .tooltip:not(.disabled) {
+        visibility: visible;
+    }
+</style>