@nil-/doc 0.2.49 → 0.2.51

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @nil-/doc
 
+## 0.2.51
+
+### Patch Changes
+
+-   [doc][fix] components now rely on root font-size ([#88](https://github.com/njaldea/mono/pull/88))
+
+-   [doc][fix] fix object prop control ([#88](https://github.com/njaldea/mono/pull/88))
+
+-   [doc][new] block button controls ([#88](https://github.com/njaldea/mono/pull/88))
+    [doc][new] centralized custom css
+
+-   [doc][misc] change styling ([#88](https://github.com/njaldea/mono/pull/88))
+    [doc][fix] scrolling content of container
+
+## 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,97 +1,14 @@
-<style>
-    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
-
-    .layout {
-        display: grid;
-        grid-template-columns: 1fr;
-        grid-template-rows: minmax(40px, auto) 1fr;
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        font-family: "Fira Code", "Courier New", Courier, monospace;
-    }
-
-    .top {
-        display: grid;
-        grid-template-columns: 1fr 40px 40px;
-        align-items: center;
-        padding-left: 10px;
-        padding-right: 10px;
-        border-bottom-width: 1px;
-        border-bottom-style: solid;
-        box-sizing: border-box;
-        user-select: none;
-    }
-
-    .main {
-        height: 100%;
-        overflow: hidden;
-    }
-
-    .icon {
-        width: 100%;
-        height: 100%;
-        cursor: pointer;
-        transition: transform 350ms;
-    }
-
-    .icon:hover {
-        transform: scale(1.5);
-    }
-
-    .content {
-        height: 100%;
-        padding: 5px;
-        display: flex;
-        flex-direction: column;
-        box-sizing: border-box;
-    }
-
-    /* scrollable */
-    .scrollable,
-    .page > :global(*:only-child) {
-        overflow: scroll;
-        scrollbar-width: none; /* Firefox */
-        -ms-overflow-style: none; /* IE and Edge */
-    }
-
-    .scrollable::-webkit-scrollbar,
-    .page > :global(*:only-child::-webkit-scrollbar) {
-        display: none;
-    }
-
-    /* colors */
-    .layout {
-        color-scheme: light;
-        color: hsl(0, 0%, 0%);
-        background-color: hsl(0, 0%, 100%);
-        transition: color 350ms, background-color 350ms;
-    }
-
-    .layout.dark {
-        color-scheme: dark;
-        color: hsl(0, 0%, 80%);
-        background-color: hsl(200, 4%, 14%);
-    }
-
-    .layout > .top {
-        transition: border-bottom-colo 350ms;
-        border-bottom-color: hsl(0, 2%, 70%);
-    }
-
-    .layout.dark > .top {
-        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";
+
+<script>import Base from "./etc/Base.svelte";
+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 "./etc/ThemeIcon.svelte";
-import NilIcon from "./etc/NilIcon.svelte";
+import ThemeIcon from "./icons/Theme.svelte";
+import Content from "./etc/Content.svelte";
 export let data;
 export let current = null;
 export let sorter = null;
@@ -109,29 +26,27 @@ const toggle = () => {
   }
 };
 </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 />
+
+<Base dark={$dark}>
+    <div class="fill layout">
+        <div class="top">
+            <div class="title">
+                <slot name="title" />
+            </div>
+            <slot name="title-misc">
+                <Icon on:click={toggle}>
+                    <ThemeIcon {theme} />
+                </Icon>
+            </slot>
         </div>
-    </div>
-    <div class="main">
         <Container offset={250} vertical b>
             <svelte:fragment slot="A">
-                <div class="content scrollable">
+                <Content flat>
                     <Nav
                         info={data}
                         selected={current ?? ""}
@@ -139,16 +54,64 @@ const toggle = () => {
                         renamer={renamer ?? defaultRenamer}
                         on:navigate
                     />
-                </div>
+                </Content>
             </svelte:fragment>
             <svelte:fragment slot="B">
-                <div class="content page">
+                <Content>
                     {#key current}
                         <slot />
                     {/key}
-                </div>
+                </Content>
             </svelte:fragment>
         </Container>
     </div>
-</div>
+</Base>
+
+<style>
+    .fill {
+        width: 100%;
+        height: 100%;
+    }
+
+    .layout {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: minmax(2.5rem, auto) 1fr;
+    }
 
+    .top {
+        overflow: hidden;
+        font-size: 1rem;
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: 2.5rem;
+        grid-template-columns: 1fr;
+        align-items: center;
+        padding-left: 0.625rem;
+        padding-right: 0.625rem;
+        border-bottom-width: 1px;
+        border-bottom-style: solid;
+        user-select: none;
+    }
+
+    .title {
+        display: grid;
+        grid-auto-flow: column;
+        align-items: center;
+        justify-content: left;
+        gap: 0.3125rem;
+    }
+
+    .layout {
+        color-scheme: var(--i-nil-doc-color-scheme);
+        color: var(--i-nil-doc-color);
+        background-color: var(--i-nil-doc-bg-color);
+        transition: color var(--i-nil-doc-transition-time),
+            background-color var(--i-nil-doc-transition-time);
+    }
+
+    .layout > .top {
+        transition: border-bottom-color var(--i-nil-doc-transition-time);
+        border-bottom-color: var(--i-nil-doc-container-p);
+    }
+</style>

package/components/Layout.svelte.d.ts

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

package/components/block/Block.svelte

@@ -1,40 +1,3 @@
-<style>
-    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
-
-    div {
-        display: grid;
-        border-radius: 5px;
-        grid-auto-rows: 1fr;
-        grid-auto-columns: auto;
-        grid-auto-flow: row;
-
-        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, 0%, 0%);
-        background-color: hsl(0, 2%, 70%);
-        transition: color 350ms, background-color 350ms;
-    }
-
-    div.dark {
-        color-scheme: dark;
-        color: hsl(0, 0%, 80%);
-        background-color: hsl(0, 2%, 40%);
-    }
-</style>
-
 <script>import {
   initParams,
   initDefaults,
@@ -42,23 +5,103 @@
   initControlsState,
   initOrientation
 } from "./context";
+import Base from "../etc/Base.svelte";
 import { getTheme, initTheme } from "../context";
+import Button from "./icons/Button.svelte";
+import Position from "./icons/Position.svelte";
+import ControlView from "./icons/ControlView.svelte";
 initParams();
 initDefaults();
 initControls();
-initControlsState();
+const state = initControlsState();
 const columns = initOrientation();
 export let theme = void 0;
 const parentTheme = getTheme();
 const dark = initTheme();
 $:
   $dark = theme === void 0 ? $parentTheme : "dark" === theme;
+const cyclePosition = () => {
+  switch ($state.position) {
+    case "hidden":
+      $state.position = "bottom";
+      break;
+    case "bottom":
+      $state.position = "right";
+      break;
+    case "right":
+      $state.position = "hidden";
+      break;
+  }
+};
+const cycleMode = () => {
+  switch ($state.mode) {
+    case "event":
+      $state.mode = "prop";
+      break;
+    case "prop":
+      $state.mode = "event";
+      break;
+  }
+};
 </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>
 
+<Base dark={$dark}>
+    <div class="block" class:columns={$columns} class:dark={$dark}>
+        <div class="buttons">
+            <Button scale on:click={cycleMode} title={$state.mode}>
+                <ControlView mode={$state.mode} />
+            </Button>
+            <Button scale on:click={cyclePosition} title={$state.position}>
+                <Position position={$state.position} />
+            </Button>
+        </div>
+        <slot />
+    </div>
+</Base>
+
+<style>
+    .block {
+        display: grid;
+        border-radius: 0.3125rem;
+        grid-auto-rows: 1fr;
+        grid-auto-columns: auto;
+        grid-auto-flow: row;
+
+        min-width: 10rem;
+
+        padding: 1.75rem 0.2rem 0.5rem 0.2rem;
+        gap: 0.1875rem;
+        position: relative;
+    }
+
+    .buttons {
+        position: absolute;
+        width: calc(1.75rem * 2);
+        height: 1.75rem;
+        right: 1rem;
+        top: 0rem;
+        display: flex;
+        cursor: pointer;
+    }
+
+    .block.columns {
+        grid-auto-rows: auto;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+    }
+
+    .block {
+        color: var(--i-nil-doc-color);
+        color-scheme: var(--i-nil-doc-color-scheme);
+        background-color: var(--i-nil-doc-block-bg-color);
+        box-shadow: 0px 0px 5px 0px var(--i-nil-doc-block-outline-color);
+        outline: 1px solid var(--i-nil-doc-block-outline-color);
+        transition: color var(--i-nil-doc-transition-time),
+            background-color var(--i-nil-doc-transition-time);
+    }
+</style>

package/components/block/Controls.svelte

@@ -1,18 +1,16 @@
-
 <script>import { getControls, getControlsState } from "./context";
 export let props = [];
 export let events = [];
-export let hide = false;
-export let position = void 0;
+export let position = "bottom";
+export let mode = "prop";
 const controls = getControls();
 $:
   $controls = { props, events };
 const state = getControlsState();
 $:
-  $state.hide = hide;
-$:
-  $state.position = position;
+  $state = { position, mode };
 </script>
+
 <!--
     @component
     See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Controls) for more details.

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

@@ -4,8 +4,8 @@ declare const __propDef: {
     props: {
         props?: Prop[] | undefined;
         events?: string[] | undefined;
-        hide?: boolean | undefined;
-        position?: undefined | "bottom" | "right";
+        position?: "bottom" | "right" | "hidden" | undefined;
+        mode?: "prop" | "event" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/Instance.svelte

@@ -1,14 +1,74 @@
-<style>
-    div {
-        box-sizing: border-box;
-    }
+<script>import { beforeUpdate } from "svelte";
+import { getControls, getControlsState } from "./context";
+import Props from "./controls/props/Props.svelte";
+import Events from "./controls/events/Events.svelte";
+import { resolve } from "./utils";
+const controls = getControls();
+const controlsState = getControlsState();
+$:
+  expanded = $controlsState.position !== "hidden";
+export let defaults = void 0;
+export let noreset = false;
+export let scale = false;
+let key = false;
+beforeUpdate(() => key = !key);
+const resolveArgs = resolve;
+let bound = {};
+const updateBound = (d) => bound = resolve(d ?? {}, {});
+$:
+  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 class:cside={expanded && "right" === $controlsState.position}>
+    <div class="content scrollable">
+        {#if noreset}
+            <slot props={resolveArgs(defaults ?? {}, bound)} events={handlers} {key} />
+        {:else}
+            {#key key}
+                <slot props={resolveArgs(defaults ?? {}, bound)} events={handlers} {key} />
+            {/key}
+        {/if}
+    </div>
+    {#if expanded}
+        <div class="misc scrollable">
+            <Props
+                infos={$controls.props}
+                bind:values={bound}
+                visible={$controlsState.mode === "prop"}
+            >
+                <div>
+                    <div>Properties</div>
+                    <div>Value</div>
+                    <div>Use</div>
+                </div>
+            </Props>
+            <Events
+                events={$controls.events}
+                bind:handlers
+                visible={$controlsState.mode === "event"}
+            >
+                <div>
+                    <div>Events</div>
+                    <div>Detail</div>
+                </div>
+            </Events>
+        </div>
+    {/if}
+</div>
 
+<style>
     .instance {
         overflow: hidden;
     }
 
     .instance.scale {
-        transition: transform 350ms;
+        transition: transform var(--i-nil-doc-transition-time);
     }
 
     .instance.scale:hover {
@@ -22,33 +82,33 @@
 
     .content {
         min-height: 100px;
-        border-radius: 5px;
+        border-radius: 0.3125rem;
     }
 
     div:not(.cside) > .misc {
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px;
+        border-bottom-left-radius: 0.3125rem;
+        border-bottom-right-radius: 0.3125rem;
         user-select: none;
     }
 
     .cside > .misc {
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
+        border-top-right-radius: 0.3125rem;
+        border-bottom-right-radius: 0.3125rem;
         user-select: none;
     }
 
     .content,
     .misc {
-        border-style: solid;
-        border-width: 1px;
-        padding: 2px;
+        border: 1px solid var(--i-nil-doc-block-outline-color);
     }
 
     /* scrollable */
     .scrollable {
         overflow: scroll;
-        scrollbar-width: none; /* Firefox */
-        -ms-overflow-style: none; /* IE and Edge */
+        /* Firefox */
+        scrollbar-width: none;
+        /* IE and Edge */
+        -ms-overflow-style: none;
     }
 
     .scrollable::-webkit-scrollbar {
@@ -56,101 +116,9 @@
     }
 
     /* 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%);
+    .instance {
+        transition: background-color 350ms;
+        color: var(--i-nil-doc-color);
+        background-color: var(--i-nil-doc-bg-color);
     }
 </style>
-
-<script>import { beforeUpdate } from "svelte";
-import { cquery } from "./action";
-import { getControls, getControlsState } from "./context";
-import { getTheme } from "../context";
-import Props from "./controls/props/Props.svelte";
-import Events from "./controls/events/Events.svelte";
-import { resolve } from "./utils";
-const controls = getControls();
-const controlsState = getControlsState();
-const dark = getTheme();
-$:
-  hasProps = $controls.props.length > 0;
-$:
-  hasEvents = $controls.events.length > 0;
-let cvisible = null;
-$:
-  if (cvisible == null && hasProps) {
-    cvisible = "props";
-  } else if (cvisible == null && hasEvents) {
-    cvisible = "events";
-  } else if (!hasProps && !hasEvents) {
-    cvisible = null;
-  }
-$:
-  expanded = !$controlsState.hide && cvisible != null;
-export let defaults = void 0;
-export let noreset = false;
-export let scale = false;
-let key = false;
-beforeUpdate(() => key = !key);
-const resolveArgs = resolve;
-let bound = {};
-const updateBound = (d) => bound = resolve(d ?? {}, {});
-$:
-  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
-    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)} events={handlers} {key} />
-        </div>
-    {:else}
-        {#key key}
-            <div class="content scrollable" class:dark={$dark}>
-                <slot props={resolveArgs(defaults ?? {}, bound)} events={handlers} {key} />
-            </div>
-        {/key}
-    {/if}
-    {#if expanded}
-        <div class="misc scrollable" class:dark={$dark}>
-            <Props infos={$controls.props} bind:values={bound} visible={cvisible == "props"}>
-                <div on:dblclick={() => hasEvents && (cvisible = "events")}>
-                    <div>Properties</div>
-                    <div>Value</div>
-                    <div>Use</div>
-                </div>
-            </Props>
-            <Events events={$controls.events} bind:handlers visible={cvisible == "events"}>
-                {#if cvisible == "events"}
-                    <div on:dblclick={() => hasProps && (cvisible = "props")}>
-                        <div>Events</div>
-                        <div>Detail</div>
-                    </div>
-                {/if}
-            </Events>
-        </div>
-    {/if}
-</div>
-

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)}