@nil-/doc 0.2.32 → 0.2.34

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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
+
+-   [doc] update formatting (camel case use) ([#49](https://github.com/njaldea/mono/pull/49))
+
 ## 0.2.32
 
 ### 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/components/block/utils.js

@@ -35,4 +35,6 @@ const resolveObject = (d, p) => {
     }
     return ret;
 };
-export const resolve = (d, p) => resolveObject(d ?? {}, p);
+export const resolve = (d, p) => {
+    return resolveObject(d ?? {}, p);
+};

package/components/etc/action.js

@@ -5,7 +5,7 @@ export const createDraggable = (offset) => {
         let tm = new Date().getTime();
         let param = parameter ?? { reset: () => 0, vertical: true, reversed: false };
         position.set(param.reset());
-        let current_page = 0;
+        let refPage = 0;
         const disengage = () => param.moving.set(false);
         const checkDoubleTap = () => {
             const tm2 = new Date().getTime();
@@ -21,14 +21,14 @@ export const createDraggable = (offset) => {
             }
             param.moving.set(true);
             position.set(param.reset());
-            current_page = param.vertical ? e.pageX : e.pageY;
+            refPage = param.vertical ? e.pageX : e.pageY;
             param?.tap?.();
         };
         const move = (e) => {
             if (get(param.moving)) {
                 const page = param.vertical ? e.pageX : e.pageY;
-                position.update((v) => v + (page - current_page) * (param.reversed ? -1 : 1));
-                current_page = page;
+                position.update((v) => v + (page - refPage) * (param.reversed ? -1 : 1));
+                refPage = page;
             }
         };
         div.addEventListener("pointerdown", engage);

package/components/navigation/Nav.svelte

@@ -102,7 +102,7 @@ $:
             {renamer}
             bind:states
             on:navigate
-            force_expand={filter.length > 0}
+            expand={filter.length > 0}
         />
     </div>
 </div>

package/components/navigation/Node.svelte

@@ -49,7 +49,7 @@ export let key;
 export let value;
 export let depth;
 export let selected;
-export let force_expand;
+export let expand;
 export let states;
 export let sorter;
 export let renamer;
@@ -57,11 +57,11 @@ const dispatch = createEventDispatcher();
 $:
   style = `padding-left: ${10 + depth * 10}px;`;
 $:
-  has_children = Object.keys(value.sub).length > 0;
+  hasChildren = Object.keys(value.sub).length > 0;
 const click = (link) => {
   if (link != null && selected !== link) {
     dispatch("navigate", link);
-  } else if (has_children) {
+  } else if (hasChildren) {
     states.expanded = !states.expanded;
   }
 };
@@ -74,12 +74,12 @@ const click = (link) => {
         {style}
         class:selected={selected === value.url}
     >
-        <div class="icon" class:expanded={has_children && states.expanded}>
+        <div class="icon" class:expanded={hasChildren && states.expanded}>
             <div>{Object.keys(value.sub).length > 0 ? ">" : "-"}</div>
         </div>
         <span>{renamer(key)}</span>
     </div>
-    {#if force_expand || states.expanded}
+    {#if expand || states.expanded}
         <div class="sub" transition:slide|local>
             {#each sort(value.sub, sorter) as [k, v] (k)}
                 <svelte:self
@@ -89,7 +89,7 @@ const click = (link) => {
                     {selected}
                     {renamer}
                     {sorter}
-                    {force_expand}
+                    {expand}
                     bind:states={states.sub[k]}
                     on:navigate
                 />

package/components/navigation/Node.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         value: Tree;
         depth: number;
         selected: string;
-        force_expand: boolean;
+        expand: boolean;
         states: States;
         sorter: Sorter;
         renamer: Renamer;

package/components/navigation/Tree.svelte

@@ -5,7 +5,7 @@ export let tree;
 export let states;
 export let sorter;
 export let renamer;
-export let force_expand;
+export let expand;
 export let selected;
 </script>
 {#each sort(tree, sorter) as [key, value] (key)}
@@ -16,7 +16,7 @@ export let selected;
         {selected}
         {sorter}
         {renamer}
-        {force_expand}
+        {expand}
         bind:states={states[key]}
         on:navigate
     />

package/components/navigation/Tree.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         states: Record<string, States>;
         sorter: Sorter;
         renamer: Renamer;
-        force_expand: boolean;
+        expand: boolean;
         selected: string;
     };
     events: {

package/package.json

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

package/sveltekit/index.js

@@ -2,14 +2,14 @@ import { derived } from "svelte/store";
 import { page } from "$app/stores";
 import { goto } from "$app/navigation";
 const toRoute = (p) => p.substring(1, p.lastIndexOf("/"));
-const route_advanced_layout_match = /\(.*\)/;
+const routeHasLayoutGroup = /\(.*\)/;
 const collapseLayout = (p) => p
     .split("/")
-    .filter((p) => null == route_advanced_layout_match.exec(p))
+    .filter((p) => null == routeHasLayoutGroup.exec(p))
     .join("/");
 const isNotRoot = (p) => p !== "/";
-const route_rest_match = /.*\[.*\].*/;
-const isRouteDynamic = (p) => null == route_rest_match.exec(p);
+const routeIsDynamic = /.*\[.*\].*/;
+const isRouteDynamic = (p) => null == routeIsDynamic.exec(p);
 /**
  * Dedicated helper method to be used for sveltekit
  * @param detail - vite's `import.meta.glob(..., { eager: true })`