@nil-/doc 0.2.50 → 0.2.51

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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

package/components/Layout.svelte

@@ -2,11 +2,13 @@
 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 "./icons/Theme.svelte";
+import Content from "./etc/Content.svelte";
 export let data;
 export let current = null;
 export let sorter = null;
@@ -30,21 +32,21 @@ const toggle = () => {
     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" />
+<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>
-        <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">
+                <Content flat>
                     <Nav
                         info={data}
                         selected={current ?? ""}
@@ -52,43 +54,43 @@ 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>
-    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
+    .fill {
+        width: 100%;
+        height: 100%;
+    }
 
     .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;
+        grid-template-rows: minmax(2.5rem, auto) 1fr;
     }
 
     .top {
+        overflow: hidden;
+        font-size: 1rem;
         display: grid;
         grid-auto-flow: column;
-        grid-auto-columns: 40px;
+        grid-auto-columns: 2.5rem;
         grid-template-columns: 1fr;
         align-items: center;
-        padding-left: 10px;
-        padding-right: 10px;
+        padding-left: 0.625rem;
+        padding-right: 0.625rem;
         border-bottom-width: 1px;
         border-bottom-style: solid;
-        box-sizing: border-box;
         user-select: none;
     }
 
@@ -97,55 +99,19 @@ const toggle = () => {
         grid-auto-flow: column;
         align-items: center;
         justify-content: left;
-        gap: 5px;
-    }
-
-    .main {
-        height: 100%;
-        overflow: hidden;
+        gap: 0.3125rem;
     }
 
-    .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%);
+        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-colo 350ms;
-        border-bottom-color: hsl(0, 2%, 70%);
-    }
-
-    .layout.dark > .top {
-        border-bottom-color: hsl(0, 2%, 40%);
+        transition: border-bottom-color var(--i-nil-doc-transition-time);
+        border-bottom-color: var(--i-nil-doc-container-p);
     }
 </style>

package/components/block/Block.svelte

@@ -5,17 +5,44 @@
   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>
 
 <!--
@@ -23,43 +50,58 @@ $:
     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>
-    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
-
-    div {
+    .block {
         display: grid;
-        border-radius: 5px;
+        border-radius: 0.3125rem;
         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;
+        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;
     }
 
-    div.columns {
+    .block.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%);
+    .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,16 +1,14 @@
 <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>
 
 <!--

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,28 +1,12 @@
 <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;
+  expanded = $controlsState.position !== "hidden";
 export let defaults = void 0;
 export let noreset = false;
 export let scale = false;
@@ -33,7 +17,7 @@ let bound = {};
 const updateBound = (d) => bound = resolve(d ?? {}, {});
 $:
   updateBound(defaults);
-let handlers;
+let handlers = {};
 </script>
 
 <!--
@@ -41,60 +25,50 @@ let handlers;
     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}>
+<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} />
-        </div>
-    {:else}
-        {#key key}
-            <div class="content scrollable" class:dark={$dark}>
+        {:else}
+            {#key key}
                 <slot props={resolveArgs(defaults ?? {}, bound)} events={handlers} {key} />
-            </div>
-        {/key}
-    {/if}
+            {/key}
+        {/if}
+    </div>
     {#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 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={cvisible == "events"}>
-                {#if cvisible == "events"}
-                    <div on:dblclick={() => hasProps && (cvisible = "props")}>
-                        <div>Events</div>
-                        <div>Detail</div>
-                    </div>
-                {/if}
+            <Events
+                events={$controls.events}
+                bind:handlers
+                visible={$controlsState.mode === "event"}
+            >
+                <div>
+                    <div>Events</div>
+                    <div>Detail</div>
+                </div>
             </Events>
         </div>
     {/if}
 </div>
 
 <style>
-    div {
-        box-sizing: border-box;
-    }
-
     .instance {
         overflow: hidden;
     }
 
     .instance.scale {
-        transition: transform 350ms;
+        transition: transform var(--i-nil-doc-transition-time);
     }
 
     .instance.scale:hover {
@@ -108,33 +82,33 @@ let handlers;
 
     .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 {
@@ -142,16 +116,9 @@ let handlers;
     }
 
     /* 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>

package/components/block/context.d.ts

@@ -7,8 +7,8 @@ export type Params = {
     values: Record<string, ValueType>;
 };
 export type ControlState = {
-    hide: boolean;
-    position?: "bottom" | "right";
+    position: "bottom" | "right" | "hidden";
+    mode: "prop" | "event";
 };
 export declare const initParams: () => Writable<Params[]>, getParams: () => Writable<Params[]>;
 type Controls = {

package/components/block/context.js

@@ -14,6 +14,7 @@ export const { init: initControls, get: getControls } = create(() => ({
 }));
 export const { init: initDefaults, get: getDefaults } = create(() => ({}));
 export const { init: initControlsState, get: getControlsState } = create(() => ({
-    hide: false
+    position: "hidden",
+    mode: "prop"
 }));
 export const { init: initOrientation, get: getOrientation } = create(() => false);

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

@@ -45,13 +45,13 @@ $:
         <slot />
         {#each history as { count, detail, name }, i (i)}
             <div>
-                <div>
+                <div class="name">
                     <div>{name}</div>
-                    <div class="count">
-                        {#if count > 1}
+                    {#if count > 1}
+                        <div class="count">
                             [{count.toString().padStart(2, "0")}]
-                        {/if}
-                    </div>
+                        </div>
+                    {/if}
                 </div>
                 <div>{detail}</div>
             </div>
@@ -60,6 +60,15 @@ $:
 {/if}
 
 <style>
+    .name {
+        padding: 0rem 0.5rem;
+        display: grid;
+        place-content: center;
+        grid-auto-flow: column;
+        grid-auto-columns: 1.875rem;
+        grid-template-columns: 1fr;
+    }
+
     .count {
         display: grid;
         place-items: center;

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

@@ -21,62 +21,37 @@ const dark = getTheme();
 
 <style>
     div {
-        width: 100%;
-        height: 330px;
-        min-width: 500px;
-        overflow: hidden;
         display: grid;
-        grid-auto-rows: 30px;
-        box-sizing: border-box;
-    }
-
-    div :global(*),
-    div :global(*::before),
-    div :global(*::after) {
-        box-sizing: inherit;
+        overflow: hidden;
+        height: 22rem;
+        min-width: 31.25rem;
+        grid-auto-rows: 2rem;
     }
 
     div > :global(div) {
         display: grid;
-        width: 100%;
-        padding: 2px 0px;
-        grid-template-columns: 1fr 2fr;
-    }
-
-    div > :global(div > div) {
-        padding: 0px 10px;
+        grid-template-columns: 2fr 3fr;
+        align-items: center;
     }
 
     div > :global(div:first-child) {
-        text-align: center;
-    }
-
-    div > :global(div:not(:first-child) > div:first-child) {
-        display: grid;
-        grid-template-columns: 1fr 30px;
+        font-weight: bold;
+        justify-items: center;
     }
 
     /* colors */
     div {
-        --pri-color: hsl(0, 0%, 100%);
-        --sec-color: hsl(210, 29%, 97%);
-        --hover-color: hsl(210, 100%, 90%);
-    }
-
-    div.dark {
-        --pri-color: hsl(213, 26%, 7%);
-        --sec-color: hsl(213, 26%, 11%);
-        --hover-color: hsl(203, 100%, 15%);
-    }
-
-    div {
-        transition: background-color 150ms;
+        transition: background-color var(--i-nil-doc-transition-time);
         background-repeat: repeat;
-        background-size: 100% 60px;
-        background-image: linear-gradient(to bottom, var(--pri-color) 30px, var(--sec-color) 30px);
+        background-size: 100% 4rem;
+        background-image: linear-gradient(
+            to bottom,
+            var(--i-nil-doc-controls-p) 2rem,
+            var(--i-nil-doc-controls-s) 2rem
+        );
     }
 
     div > :global(div:nth-child(n + 2):hover) {
-        background-color: var(--hover-color);
+        background-color: var(--i-nil-doc-controls-hover);
     }
 </style>