@nil-/doc 0.2.33 → 0.2.34

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nil-/doc
 
+## 0.2.34
+
+### Patch Changes
+
+-   [doc][new] added Control hide property ([#51](https://github.com/njaldea/mono/pull/51))
+    [doc][break] renamed Control expand property to hide
+    [doc][break] Control now defaults to show
+
 ## 0.2.33
 
 ### Patch Changes

package/components/block/Block.svelte

@@ -27,16 +27,9 @@
     }
 </style>
 
-<script>import {
-  initParams,
-  initCurrent,
-  initDefaults,
-  initControls,
-  initControlsState
-} from "./context";
+<script>import { initParams, initDefaults, initControls, initControlsState } from "./context";
 import { inRoot, getTheme, initTheme, evalTheme } from "../context";
 initParams();
-initCurrent();
 initDefaults();
 initControls();
 initControlsState();

package/components/block/Controls.svelte

@@ -1,10 +1,13 @@
 
 <script>import { getControls, getControlsState } from "./context";
 export let props = [];
-export let expand = false;
+export let hide = false;
+export let side = false;
 const controls = getControls();
 $controls = props;
 const state = getControlsState();
 $:
-  $state.expand = expand;
+  $state.hide = hide;
+$:
+  $state.side = side;
 </script>

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

@@ -3,7 +3,8 @@ import type { Control } from "./controls/types";
 declare const __propDef: {
     props: {
         props?: Control[] | undefined;
-        expand?: boolean | undefined;
+        hide?: boolean | undefined;
+        side?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/Template.svelte

@@ -4,9 +4,6 @@
         gap: 5px;
         padding-bottom: 10px;
         padding-top: 10px;
-    }
-
-    .template:not(.column) {
         grid-auto-rows: 1fr;
         grid-auto-columns: auto;
         grid-auto-flow: row;
@@ -18,17 +15,28 @@
         grid-auto-flow: column;
     }
 
+    .template > .cside {
+        display: grid;
+        grid-template-columns: 1fr 550px;
+    }
+
     .content {
         min-height: 100px;
         border-radius: 5px 5px 5px 5px;
     }
 
-    .misc {
+    div:not(.cside) > .misc {
         border-bottom-left-radius: 5px;
         border-bottom-right-radius: 5px;
         user-select: none;
     }
 
+    .cside > .misc {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+        user-select: none;
+    }
+
     .template > div > div {
         margin: 3px;
     }
@@ -63,17 +71,14 @@
         outline: hsl(0, 2%, 40%) solid 1px;
     }
 </style>
-<svelte:window on:click={() => ($current = null)} />
 
-<script>import { getParams, getCurrent, getDefaults } from "./context";
+<script>import { getParams, getDefaults } from "./context";
 import { getControls, getControlsState } from "./context";
 import { resolve } from "./utils";
 import { getTheme } from "../context";
 import Controls from "./controls/Controls.svelte";
 import { beforeUpdate } from "svelte";
-import { slide } from "svelte/transition";
 const params = getParams();
-const current = getCurrent();
 const controls = getControls();
 const controlsState = getControlsState();
 const defaultsStore = getDefaults();
@@ -87,20 +92,15 @@ const reset = () => {
 };
 $:
   $defaultsStore, reset();
-let hovered = null;
 let key = false;
 beforeUpdate(() => key = !key);
 const resolveArgs = resolve;
+$:
+  expanded = $controls.length > 0 && !$controlsState.hide;
 </script>
 <div class="template" class:columns>
     {#each $params as param (param.id)}
-        <div
-            class="scrollable"
-            on:click|stopPropagation={() => ($current = param.id)}
-            on:mouseenter={() => (hovered = param.id)}
-            on:mouseleave={() => (hovered = null)}
-            on:keypress={null}
-        >
+        <div class="scrollable" class:cside={$controlsState.side && expanded}>
             {#if noreset}
                 <div class="content scrollable" class:dark={$isDark}>
                     <slot
@@ -122,8 +122,8 @@ const resolveArgs = resolve;
                     </div>
                 {/key}
             {/if}
-            {#if $controls.length > 0 && ($controlsState.expand || $current === param.id || hovered === param.id)}
-                <div class="misc scrollable" class:dark={$isDark} transition:slide|local>
+            {#if expanded}
+                <div class="misc scrollable" class:dark={$isDark}>
                     <Controls infos={$controls} bind:values={param.values} />
                 </div>
             {/if}

package/components/block/context.d.ts

@@ -10,9 +10,9 @@ export type Params = {
     defaults: Record<string, ValueType>;
 };
 export type ControlState = {
-    expand: boolean;
+    hide: boolean;
+    side: boolean;
 };
-export declare const initCurrent: () => Writable<number | null>, getCurrent: () => Writable<number | null>;
 export declare const initParams: () => Writable<Params[]>, getParams: () => Writable<Params[]>;
 export declare const initControls: () => Writable<Control[]>, getControls: () => Writable<Control[]>;
 export declare const initDefaults: () => Writable<Record<string, ValueType> | null>, getDefaults: () => Writable<Record<string, ValueType> | null>;

package/components/block/context.js

@@ -7,10 +7,10 @@ const create = (defaulter) => {
         get: () => getContext(symbol)
     };
 };
-export const { init: initCurrent, get: getCurrent } = create(() => null);
 export const { init: initParams, get: getParams } = create(() => []);
 export const { init: initControls, get: getControls } = create(() => []);
 export const { init: initDefaults, get: getDefaults } = create(() => null);
 export const { init: initControlsState, get: getControlsState } = create(() => ({
-    expand: false
+    hide: false,
+    side: false
 }));

package/package.json

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