@nil-/doc 0.2.50 → 0.2.52

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @nil-/doc
 
+## 0.2.52
+
+### Patch Changes
+
+-   [doc][fix] fix layout scrollable sections ([#90](https://github.com/njaldea/mono/pull/90))
+
+-   [doc][patch] restructure code ([#90](https://github.com/njaldea/mono/pull/90))
+
+-   [doc][patch] use vannilla-color library for color picker ([#90](https://github.com/njaldea/mono/pull/90))
+    [doc][fix] removed position relative and overflow scroll for misc (controls)
+
+-   [doc][fix] content fill width/height ([#90](https://github.com/njaldea/mono/pull/90))
+
+-   [doc][new] added offset Layout.svelte and sveltekit for keeping state ([#90](https://github.com/njaldea/mono/pull/90))
+
+## 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/Base.svelte

@@ -0,0 +1,65 @@
+<script>export let dark = false;
+export let fill = false;
+</script>
+
+<div class:dark class:fill>
+    <slot />
+</div>
+
+<!-- prettier-ignore -->
+<style>
+    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
+
+    div {
+        font-family: "Fira Code", "Courier New", Courier, monospace;
+    }
+
+    .fill {
+        width: 100%;
+        height: 100%;
+    }
+
+    div {
+        --i-nil-doc-color: var(--nil-doc-color, hsl(0, 0%, 0%));
+        --i-nil-doc-color-scheme: var(--nil-doc-color-scheme, light);
+
+        --i-nil-doc-bg-color: var(--nil-doc-bg-color, hsl(0, 0%, 98%));
+        --i-nil-doc-content-outline-color: var(--nil-doc-content-outline-color, hsla(0, 0%, 0%, 0.3));
+
+        --i-nil-doc-block-bg-color: var(--nil-doc-block-bg-color, hsla(0, 0%, 98%, 0.3));
+        --i-nil-doc-block-outline-color: var(--nil-doc-block-outline-color, hsla(0, 0%, 0%, 0.3));
+
+        --i-nil-doc-container-p: var(--nil-doc-container-p, hsl(0, 2%, 70%));
+        --i-nil-doc-container-s: var(--nil-doc-container-s, hsl(0, 0%, 0%));
+
+        --i-nil-doc-controls-p: var(--nil-doc-controls-p, hsl(0, 0%, 100%));
+        --i-nil-doc-controls-s: var(--nil-doc-controls-s, hsl(210, 29%, 97%));
+        --i-nil-doc-controls-hover: var(--nil-doc-controls-hover, hsl(210, 100%, 90%));
+    }
+
+    div.dark {
+        --i-nil-doc-color: var(--nil-doc-color, hsl(0, 0%, 80%));
+        --i-nil-doc-color-scheme: var(--nil-doc-color-scheme, dark);
+
+        --i-nil-doc-bg-color: var(--nil-doc-bg-color, hsl(210, 6%, 7%));
+        --i-nil-doc-content-outline-color: var(--nil-doc-content-outline-color, hsla(0, 0%, 100%, 0.3));
+
+        --i-nil-doc-block-bg-color: var(--nil-doc-block-bg-color, hsla(200, 4%, 7%, 0.3));
+        --i-nil-doc-block-outline-color: var(--nil-doc-block-outline-color, hsla(0, 0%, 1000%, 0.3));
+
+        --i-nil-doc-container-p: var(--nil-doc-container-p, hsl(0, 2%, 40%));
+        --i-nil-doc-container-s: var(--nil-doc-container-s, hsl(0, 0%, 100%));
+
+        --i-nil-doc-controls-p: var(--nil-doc-controls-p, hsl(213, 26%, 7%));
+        --i-nil-doc-controls-s: var(--nil-doc-controls-s, hsl(213, 26%, 11%));
+        --i-nil-doc-controls-hover: var(--nil-doc-controls-hover, hsl(203, 100%, 15%));
+    }
+
+    div {
+        --i-nil-doc-nav-hovered: var(--nil-doc-nav-hovered, hsla(203, 98%, 50%, 0.1));
+        --i-nil-doc-nav-page-hovered: var(--nil-doc-nav-page-hovered, hsla(203, 98%, 50%, 0.5));
+        --i-nil-doc-nav-selected: var(--nil-doc-nav-selected, hsla(203, 98%, 50%, 0.85));
+
+        --i-nil-doc-transition-time: var(--nil-doc-transition-time, 350ms);
+    }
+</style>

package/components/Base.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        dark?: boolean | undefined;
+        fill?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BaseProps = typeof __propDef.props;
+export type BaseEvents = typeof __propDef.events;
+export type BaseSlots = typeof __propDef.slots;
+export default class Base extends SvelteComponentTyped<BaseProps, BaseEvents, BaseSlots> {
+}
+export {};

package/components/block/Block.svelte

@@ -5,17 +5,44 @@
   initControlsState,
   initOrientation
 } from "./context";
+import Base from "../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,63 @@ $:
     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="relative">
+        <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>
+    </div>
+    <div class="block" class:columns={$columns} class:dark={$dark}>
+        <slot />
+    </div>
+</Base>
 
 <style>
-    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
+    .relative {
+        z-index: 10;
+        position: relative;
+    }
 
-    div {
+    .block {
         display: grid;
-        border-radius: 5px;
+        border-radius: 0.5rem;
         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;
+    }
+
+    .buttons {
+        position: absolute;
+        width: 3.5rem;
+        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: 0 0 0.5rem 0 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,46 @@ 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">
+            <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 {
@@ -103,55 +73,35 @@ let handlers;
 
     .cside {
         display: grid;
-        grid-template-columns: 1fr 550px;
+        grid-template-columns: 1fr 35rem;
     }
 
     .content {
-        min-height: 100px;
-        border-radius: 5px;
+        min-height: 6.25rem;
+        border-radius: 0.5rem;
     }
 
     div:not(.cside) > .misc {
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px;
+        border-bottom-left-radius: 0.5rem;
+        border-bottom-right-radius: 0.5rem;
         user-select: none;
     }
 
     .cside > .misc {
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
+        border-top-right-radius: 0.5rem;
+        border-bottom-right-radius: 0.5rem;
         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;
+        border: 1px solid var(--i-nil-doc-block-outline-color);
     }
 
     /* 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

@@ -1,7 +1,3 @@
-<script>import { getTheme } from "../../../../context";
-const dark = getTheme();
-</script>
-
 <!--
     <div> this component
         <div> Header
@@ -15,68 +11,42 @@ const dark = getTheme();
         ...
     </div>
 -->
-<div class:dark={$dark}>
+<div>
     <slot />
 </div>
 
 <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;
+        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>

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

@@ -1,6 +1,22 @@
+/** @typedef {typeof __propDef.props}  StylerProps */
+/** @typedef {typeof __propDef.events}  StylerEvents */
+/** @typedef {typeof __propDef.slots}  StylerSlots */
+export default class Styler extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type StylerProps = typeof __propDef.props;
+export type StylerEvents = typeof __propDef.events;
+export type StylerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -8,9 +24,4 @@ declare const __propDef: {
         default: {};
     };
 };
-export type StylerProps = typeof __propDef.props;
-export type StylerEvents = typeof __propDef.events;
-export type StylerSlots = typeof __propDef.slots;
-export default class Styler extends SvelteComponentTyped<StylerProps, StylerEvents, StylerSlots> {
-}
 export {};