@nil-/doc 0.3.0 → 0.3.2

package/components/Base.svelte

@@ -26,7 +26,6 @@ export let fill = false;
 
         --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-instance-selected-color: var(--nil-doc-instance-selected-color, hsla(203, 98%, 50%, 0.85));
 
         --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%));
@@ -55,10 +54,14 @@ export let fill = false;
     }
 
     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-hovered: var(--nil-doc-nav-hovered, hsla(203, 98%, 50%, 0.25));
+        --i-nil-doc-nav-page-hovered: var(--nil-doc-nav-page-hovered, hsla(203, 98%, 50%, 0.6));
         --i-nil-doc-nav-selected: var(--nil-doc-nav-selected, hsla(203, 98%, 50%, 0.85));
 
+        --i-nil-doc-instance-hovered: var(--nil-doc-instance-hovered, hsla(203, 98%, 50%, 0.25));
+        --i-nil-doc-instance-control-hovered: var(--nil-doc-instance-control-hovered, hsla(203, 98%, 50%, 0.6));
+        --i-nil-doc-instance-selected-color: var(--nil-doc-instance-selected-color, hsla(203, 98%, 50%, 0.85));
+
         --i-nil-doc-transition-time: var(--nil-doc-transition-time, 350ms);
     }
 </style>

package/components/block/Block.svelte

@@ -31,7 +31,7 @@ $:
     .outer {
         position: relative;
         border-radius: 0.5rem;
-        padding: 1.75rem 0.2rem 0.75rem 0.2rem;
+        padding: 1rem 0.2rem 1rem 0.2rem;
         min-width: 10rem;
         margin: 1px;
         outline: solid 1px white;

package/components/block/Instance.svelte

@@ -43,16 +43,16 @@ const populate = (ext) => {
       obj[name] = (ev) => {
         const detail = stringify(ev.detail);
         if ($values.events.length > 0) {
-          const last = $values.events[$values.events.length - 1];
+          const last = $values.events[0];
           if (last.name === name && last.detail === detail && last.count < 99) {
             last.count += 1;
             $values.events = $values.events;
             return;
           }
         }
-        $values.events.push({ name, detail, count: 1 });
-        if ($values.events.length > 10) {
-          $values.events.shift();
+        $values.events.unshift({ name, detail, count: 1 });
+        if ($values.events.length > 50) {
+          $values.events.pop();
         }
         $values.events = $values.events;
       };
@@ -67,7 +67,13 @@ const populate = (ext) => {
     See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/1-Instance) for more details.
 -->
 
-<div class="instance" on:click={focus} on:keypress={null} class:focused={$vv === values}>
+<div
+    class="instance"
+    class:selected={$vv === values}
+    class:controls={$controls.events.length > 0 || $controls.props.length > 0}
+    on:click={focus}
+    on:keypress={null}
+>
     <div class="content">
         {#if noreset}
             <slot
@@ -109,7 +115,16 @@ const populate = (ext) => {
         box-sizing: border-box;
     }
 
-    .instance.focused {
+    .instance:hover {
+        border-color: var(--i-nil-doc-instance-hovered);
+    }
+
+    .instance.controls:hover {
+        border-color: var(--i-nil-doc-instance-control-hovered);
+    }
+
+    .instance.selected,
+    .instance.selected:hover {
         border-color: var(--i-nil-doc-instance-selected-color);
     }
 </style>

package/components/block/controls/Controls.svelte

@@ -2,42 +2,78 @@
 import Props from "./props/Props.svelte";
 import Events from "./events/Events.svelte";
 import { getControlInfo, getControlValue } from "../context";
+import Button from "../icons/Button.svelte";
+import ControlView from "../icons/ControlView.svelte";
+import Position from "../icons/Position.svelte";
 const controls = getControlInfo();
 const values = getControlValue();
 $:
   cc = $controls;
 $:
   vv = $values;
-let style = "props";
-const cycle = () => {
-  if (style === "props") {
-    style = "events";
-  } else {
-    style = "props";
+export let mode = "props";
+export let position = "bottom";
+const cyclePosition = () => {
+  switch (position) {
+    case "bottom":
+      position = "right";
+      break;
+    case "right":
+      position = "bottom";
+      break;
+  }
+};
+const cycleMode = () => {
+  switch (mode) {
+    case "events":
+      mode = "props";
+      break;
+    case "props":
+      mode = "events";
+      break;
   }
 };
 </script>
 
-<Styler type={style}>
-    {#if style === "props"}
-        <div on:dblclick={cycle} on:keypress={null}>
+<Styler type={mode}>
+    <div class="header">
+        <div class="buttons">
+            <Button scale on:click={cyclePosition} title={position}>
+                <Position {position} />
+            </Button>
+            <Button scale on:click={cycleMode} title={mode}>
+                <ControlView {mode} />
+            </Button>
+        </div>
+        {#if mode === "props"}
             <div>Name</div>
             <div>Value</div>
             <div>Use</div>
-        </div>
-    {:else if style === "events"}
-        <div on:dblclick={cycle} on:keypress={null}>
+        {:else if mode === "events"}
             <div>Events</div>
             <div>Detail</div>
-        </div>
-    {/if}
+        {/if}
+    </div>
     {#key $values && $controls}
         {#if cc != null && $cc != null && vv != null && $vv != null}
-            <Props infos={$cc.props} visible={style === "props"} bind:values={$vv.props} />
-            <Events events={$vv.events} visible={style === "events"} />
+            <Props infos={$cc.props} visible={mode === "props"} bind:values={$vv.props} />
+            <Events events={$vv.events} visible={mode === "events"} />
         {/if}
     {/key}
 </Styler>
 
 <style>
+    .header {
+        position: relative;
+    }
+
+    .buttons {
+        position: absolute;
+        width: 3.5rem;
+        height: 1.75rem;
+        left: 0.3rem;
+        top: 0.15rem;
+        display: flex;
+        cursor: pointer;
+    }
 </style>

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

@@ -1,6 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        mode?: "props" | "events" | undefined;
+        position?: "right" | "bottom" | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -31,7 +31,7 @@ const action = (d, { format, P }) => {
   d.style.borderColor = ivalue;
   const picker = new P({
     parent: d,
-    popup: "top",
+    popup: "left",
     editorFormat: format.substring(0, 3),
     editor: true,
     alpha: format.length === 4,

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

@@ -1,5 +1,4 @@
 <script>import Component from "./Component.svelte";
-import Styler from "../Styler.svelte";
 import { getName } from "./misc/utils";
 export let infos;
 export let values;

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

@@ -54,6 +54,10 @@ $:
         place-items: center;
     }
 
+    input {
+        width: 100%;
+    }
+
     .tooltip {
         left: -110%;
         visibility: hidden;

package/components/block/icons/ControlView.svelte

@@ -1,12 +1,10 @@
-<script context="module"></script>
-
-<script>export let mode = "prop";
+<script>export let mode = "props";
 </script>
 
 <svg viewBox="-50 -50 100 100">
     <rect width="60" height="60" x="-30" y="-30" fill="transparent" />
     <rect
-        x={mode === "prop" ? 0 : -20}
+        x={mode === "props" ? 0 : -20}
         class="mv"
         height="40"
         width="20"

package/components/block/icons/ControlView.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        mode?: "prop" | "event" | undefined;
+        mode?: "props" | "events" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/layout/Container.svelte

@@ -2,8 +2,9 @@
 import { tweened } from "svelte/motion";
 import { createDraggable } from "./action";
 export let vertical = false;
-export let offset = 0;
+export let offset = 4;
 export let b = false;
+export let persistent = false;
 let width;
 let height;
 const { position, draggable } = createDraggable(offset);
@@ -65,7 +66,7 @@ const check = (v, flag, s) => {
 >
     {#if width != null && height != null}
         <div style:grid-area="A">
-            {#if check($off, !b, span)}
+            {#if persistent || check($off, !b, span)}
                 <slot name="A" />
             {/if}
         </div>
@@ -84,7 +85,7 @@ const check = (v, flag, s) => {
             />
         </div>
         <div style:grid-area="B">
-            {#if check($off, b, span)}
+            {#if persistent || check($off, b, span)}
                 <slot name="B" />
             {/if}
         </div>

package/components/layout/Container.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         vertical?: boolean | undefined;
         offset?: number | undefined;
         b?: boolean | undefined;
+        persistent?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/layout/Layout.svelte

@@ -10,21 +10,47 @@ import Scrollable from "./Scrollable.svelte";
 import VerticalPanel from "./VerticalPanel.svelte";
 import Nav from "../navigation/Nav.svelte";
 import Icon from "./icons/Icon.svelte";
-import { initControlInfo, initControlValue } from "../block/context";
+import {
+  initControlInfo,
+  initControlValue
+} from "../block/context";
 import { getTheme, initTheme } from "../context";
 import ThemeIcon from "./icons/Theme.svelte";
+import { get } from "svelte/store";
 export let data;
 export let current = null;
 export let sorter = null;
 export let renamer = null;
 export let theme = void 0;
 export let offset = 250;
-initControlInfo();
+export let panel = "bottom";
+let mode = "props";
+let panelOffset = 4;
 initControlValue();
+const activeControl = initControlInfo();
 const parentTheme = getTheme();
 const dark = initTheme();
 $:
   $dark = theme === void 0 ? $parentTheme : "dark" === theme;
+const panelChange = (info) => {
+  if (info != null) {
+    const i = get(info);
+    if (i != null && panelOffset == 4) {
+      if (i.props.length > 0) {
+        panelOffset = 250;
+        mode = "props";
+        return;
+      } else if (i.events.length > 0) {
+        panelOffset = 250;
+        mode = "events";
+        return;
+      }
+    }
+  }
+  panelOffset = 4;
+};
+$:
+  panelChange($activeControl);
 const toggle = () => {
   if (theme !== void 0) {
     theme = $dark ? "light" : "dark";
@@ -66,7 +92,7 @@ const toggle = () => {
                 </Scrollable>
             </svelte:fragment>
             <svelte:fragment slot="B">
-                <Container offset={100}>
+                <Container vertical={panel === "right"} persistent bind:offset={panelOffset}>
                     <svelte:fragment slot="A">
                         <Scrollable>
                             <Content>
@@ -77,7 +103,7 @@ const toggle = () => {
                         </Scrollable>
                     </svelte:fragment>
                     <svelte:fragment slot="B">
-                        <Controls />
+                        <Controls bind:position={panel} bind:mode />
                     </svelte:fragment>
                 </Container>
             </svelte:fragment>

package/components/layout/Layout.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         renamer?: Renamer | null | undefined;
         theme?: Theme;
         offset?: number | undefined;
+        panel?: "right" | "bottom" | undefined;
     };
     events: {
         navigate: CustomEvent<any>;

package/components/navigation/Node.svelte

@@ -90,7 +90,8 @@ const click = (link) => {
         background-color: var(--i-nil-doc-nav-page-hovered);
     }
 
-    .header.selected {
+    .header.selected,
+    .header.selected:hover {
         background-color: var(--i-nil-doc-nav-selected) !important;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"

package/sveltekit/index.d.ts

@@ -25,6 +25,7 @@ type Settings = {
      * Default is 250px
      */
     offset: Writable<number>;
+    panel: Writable<"bottom" | "right">;
 };
 /**
  * Dedicated helper method to be used for sveltekit

package/sveltekit/index.js

@@ -22,6 +22,8 @@ export const sveltekit = (detail, prefix = null) => {
     const theme = browser && "light" === localStorage.getItem(keyTheme) ? "light" : "dark";
     const keyOffset = "@nil-/doc/offset";
     const offset = browser ? parseFloat(localStorage.getItem(keyOffset) ?? "250") : 250;
+    const keyPos = "@nil-/doc/panel";
+    const panelPos = browser ? localStorage.getItem(keyPos) ?? "bottom" : "bottom";
     const result = {
         data: Object.keys(detail)
             .map(toRoute)
@@ -39,9 +41,11 @@ export const sveltekit = (detail, prefix = null) => {
         }),
         navigate: prefix ? (e) => goto(`${prefix}${e.detail}`) : (e) => goto(e.detail),
         theme: writable(theme),
-        offset: writable(offset)
+        offset: writable(offset),
+        panel: writable(panelPos)
     };
     browser && result.theme.subscribe((v) => localStorage.setItem(keyTheme, v));
     browser && result.offset.subscribe((v) => localStorage.setItem(keyOffset, `${v}`));
+    browser && result.panel.subscribe((v) => localStorage.setItem(keyPos, v));
     return result;
 };