@nil-/doc 0.3.0 → 0.3.1

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

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";
+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,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        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/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,12 @@
 <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/Layout.svelte

@@ -19,6 +19,7 @@ export let sorter = null;
 export let renamer = null;
 export let theme = void 0;
 export let offset = 250;
+export let panel_pos = "bottom";
 initControlInfo();
 initControlValue();
 const parentTheme = getTheme();
@@ -66,7 +67,7 @@ const toggle = () => {
                 </Scrollable>
             </svelte:fragment>
             <svelte:fragment slot="B">
-                <Container offset={100}>
+                <Container offset={100} vertical={panel_pos === "right"}>
                     <svelte:fragment slot="A">
                         <Scrollable>
                             <Content>
@@ -77,7 +78,7 @@ const toggle = () => {
                         </Scrollable>
                     </svelte:fragment>
                     <svelte:fragment slot="B">
-                        <Controls />
+                        <Controls bind:position={panel_pos} />
                     </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_pos?: "right" | "bottom" | undefined;
     };
     events: {
         navigate: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "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_pos: 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_pos";
+    const panel_pos = 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_pos: writable(panel_pos)
     };
     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));
     return result;
 };