@nil-/doc 0.3.1 → 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

@@ -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

@@ -11,7 +11,7 @@ $:
   cc = $controls;
 $:
   vv = $values;
-let mode = "props";
+export let mode = "props";
 export let position = "bottom";
 const cyclePosition = () => {
   switch (position) {

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

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        mode?: "props" | "events" | undefined;
         position?: "right" | "bottom" | undefined;
     };
     events: {

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/icons/ControlView.svelte

@@ -1,5 +1,3 @@
-<script context="module"></script>
-
 <script>export let mode = "props";
 </script>
 

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,22 +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;
-export let panel_pos = "bottom";
-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";
@@ -67,7 +92,7 @@ const toggle = () => {
                 </Scrollable>
             </svelte:fragment>
             <svelte:fragment slot="B">
-                <Container offset={100} vertical={panel_pos === "right"}>
+                <Container vertical={panel === "right"} persistent bind:offset={panelOffset}>
                     <svelte:fragment slot="A">
                         <Scrollable>
                             <Content>
@@ -78,7 +103,7 @@ const toggle = () => {
                         </Scrollable>
                     </svelte:fragment>
                     <svelte:fragment slot="B">
-                        <Controls bind:position={panel_pos} />
+                        <Controls bind:position={panel} bind:mode />
                     </svelte:fragment>
                 </Container>
             </svelte:fragment>

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

@@ -9,7 +9,7 @@ declare const __propDef: {
         renamer?: Renamer | null | undefined;
         theme?: Theme;
         offset?: number | undefined;
-        panel_pos?: "right" | "bottom" | 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.1",
+  "version": "0.3.2",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"

package/sveltekit/index.d.ts

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

package/sveltekit/index.js

@@ -22,8 +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_pos";
-    const panel_pos = browser ? localStorage.getItem(keyPos) ?? "bottom" : "bottom";
+    const keyPos = "@nil-/doc/panel";
+    const panelPos = browser ? localStorage.getItem(keyPos) ?? "bottom" : "bottom";
     const result = {
         data: Object.keys(detail)
             .map(toRoute)
@@ -42,10 +42,10 @@ export const sveltekit = (detail, prefix = null) => {
         navigate: prefix ? (e) => goto(`${prefix}${e.detail}`) : (e) => goto(e.detail),
         theme: writable(theme),
         offset: writable(offset),
-        panel_pos: writable(panel_pos)
+        panel: writable(panelPos)
     };
     browser && result.theme.subscribe((v) => localStorage.setItem(keyTheme, v));
     browser && result.offset.subscribe((v) => localStorage.setItem(keyOffset, `${v}`));
-    browser && result.panel_pos.subscribe((v) => localStorage.setItem(keyPos, v));
+    browser && result.panel.subscribe((v) => localStorage.setItem(keyPos, v));
     return result;
 };