@nil-/doc 0.2.15 → 0.2.16

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nil-/doc
 
+## 0.2.16
+
+### Patch Changes
+
+-   650eb4b: [doc] revived proper ordering of params
+    [doc] each param now has its own defaults (which is resolved from template's default and pram's props)
+
 ## 0.2.15
 
 ### Patch Changes

package/components/block/Block.svelte

@@ -1,9 +1,10 @@
-<script>import { initCurrent, initParams, initControls, initDefaults } from "./context";
+<script>import { initParams, initCurrent, initDefaults, initControls, initControlsState } from "./context";
 import { inRoot } from "../context";
 initParams();
 initCurrent();
-initControls();
 initDefaults();
+initControls();
+initControlsState();
 const r = inRoot();
 </script>
 <style>

package/components/block/Controls.svelte

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

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

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

package/components/block/Params.svelte

@@ -1,13 +1,26 @@
 
-<script>import { getParams, getDefaults } from "./context";
+<script>import { onMount } from "svelte";
+import { getParams, getDefaults } from "./context";
+import { resolve } from "./utils";
 export let tag;
 export let props = {};
 const defaults = getDefaults();
 const params = getParams();
-function set(tag, props) {
-    if ($defaults != null) {
-        $params[tag] = { ...$defaults, ...props };
+onMount(() => defaults.subscribe((d) => {
+    if (d != null) {
+        params.update((p) => {
+            const v = [
+                ...p,
+                {
+                    id: p.length,
+                    tag,
+                    values: resolve(d, props),
+                    defaults: resolve(d, props)
+                }
+            ];
+            console.log(v);
+            return v;
+        });
     }
-}
-$: set(tag, props);
+}));
 </script>

package/components/block/Template.svelte

@@ -33,30 +33,25 @@
 </style>
 <svelte:window on:click={() => ($current = null)} />
 
-<script>import { beforeUpdate } from "svelte";
-import { getParams, getCurrent, getControls, getDefaults } from "./context";
+<script>import { getParams, getCurrent, getDefaults } from "./context";
+import { getControls, getControlsState } from "./context";
+import { resolve } from "./utils";
 import Controls from "./controls/Controls.svelte";
+import { beforeUpdate } from "svelte";
 import { slide } from "svelte/transition";
 const params = getParams();
 const current = getCurrent();
 const controls = getControls();
-export let defaults;
-getDefaults().set(defaults);
-$: keys = Object.keys(defaults);
-function resolve(d, p) {
-    if (d === undefined) {
-        return {};
-    }
-    const temporary = { ...d };
-    for (const key of keys) {
-        if (key in p && p[key] !== undefined) {
-            temporary[key] = p[key];
-        }
-    }
-    return temporary;
+const controlsState = getControlsState();
+const defaultsStore = getDefaults();
+export let defaults = undefined;
+export let noreset = false;
+function reset() {
+    $params = [];
+    $defaultsStore = defaults;
 }
+$: $defaultsStore, reset();
 let hovered = null;
-export let noreset = false;
 /**
  * This flag is to rerender the whole slot component.
  * If the control is disabled, we use the default value provided from the defaults field.
@@ -72,28 +67,28 @@ let key = false;
 beforeUpdate(() => (key = !key));
 </script>
 <div class="template">
-    {#each Object.keys($params) as tag (tag)}
+    {#each $params as param (param.id)}
         <div
             class="instance"
-            on:click|stopPropagation={() => ($current = tag)}
-            on:mouseenter={() => (hovered = tag)}
+            on:click|stopPropagation={() => ($current = param.id)}
+            on:mouseenter={() => (hovered = param.id)}
             on:mouseleave={() => (hovered = null)}
             on:keypress={null}
         >
             {#if noreset}
                 <div class="content nil-doc-scrollable">
-                    <slot {tag} props={resolve(defaults, $params[tag])} />
+                    <slot tag={param.tag} props={resolve(param.defaults, param.values)} />
                 </div>
             {:else}
                 {#key key}
                     <div class="content nil-doc-scrollable">
-                        <slot {tag} props={resolve(defaults, $params[tag])} />
+                        <slot tag={param.tag} props={resolve(param.defaults, param.values)} />
                     </div>
                 {/key}
             {/if}
-            {#if $controls.length > 0 && ($current === tag || hovered === tag)}
-                <div class="misc nil-doc-scrollable" transition:slide>
-                    <Controls infos={$controls} bind:values={$params[tag]} />
+            {#if $controls.length > 0 && ($controlsState.expand || $current === param.id || hovered === param.id)}
+                <div class="misc nil-doc-scrollable" transition:slide|local>
+                    <Controls infos={$controls} bind:values={param.values} />
                 </div>
             {/if}
         </div>

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

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare class __sveltets_Render<Args> {
     props(): {
-        defaults: Args;
+        defaults?: Args | undefined;
         noreset?: boolean | undefined;
     };
     events(): {} & {
@@ -9,8 +9,8 @@ declare class __sveltets_Render<Args> {
     };
     slots(): {
         default: {
-            tag: string;
-            props: Args;
+            tag: string | undefined;
+            props: Record<string, any>;
         };
     };
 }

package/components/block/context.d.ts

@@ -1,7 +1,16 @@
 import type { Control } from "./controls/types";
 import type { Writable } from "svelte/store";
-export type Params = Record<string, any>;
-export declare const initCurrent: () => Writable<string | null>, getCurrent: () => Writable<string | null>;
-export declare const initParams: () => Writable<Params>, getParams: () => Writable<Params>;
+export type Params = {
+    id: number;
+    tag?: string;
+    values: Record<string, any>;
+    defaults: Record<string, any>;
+};
+export type ControlState = {
+    expand: 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<Params | null>, getDefaults: () => Writable<Params | null>;
+export declare const initDefaults: () => Writable<Record<string, any> | null>, getDefaults: () => Writable<Record<string, any> | null>;
+export declare const initControlsState: () => Writable<ControlState>, getControlsState: () => Writable<ControlState>;

package/components/block/context.js

@@ -8,6 +8,9 @@ function create(defaulter) {
     };
 }
 export const { init: initCurrent, get: getCurrent } = create(() => null);
-export const { init: initParams, get: getParams } = create(() => ({}));
+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
+}));

package/components/block/controls/Controls.svelte

@@ -3,6 +3,7 @@
 import Header from "./misc/TopHeader.svelte";
 import Styler from "./misc/Styler.svelte";
 export let infos;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export let values;
 </script>
 <Styler>

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

@@ -1,10 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Control } from "./types";
-import type { Params } from "../context";
 declare const __propDef: {
     props: {
         infos: Control[];
-        values: Params;
+        values: Record<string, any>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/controls/misc/Styler.svelte

@@ -17,6 +17,10 @@
         background-color: hsl(205, 15%, 15%);
     }
 
+    div > :global(div:hover) {
+        background-color: rgba(2, 156, 253, 0.07);
+    }
+
     div > :global(div > div) {
         display: grid;
         align-items: center;

package/components/block/utils.d.ts

@@ -0,0 +1 @@
+export declare function resolve<Args>(d: Args | undefined, p: Record<string, any>): Args;

package/components/block/utils.js

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function resolveArray(d, p) {
+    if (d === undefined) {
+        return undefined;
+    }
+    const ret = [];
+    for (const i in d) {
+        if (d[i] instanceof Array) {
+            ret.push(resolveArray(d[i], p[i] ?? []));
+        }
+        else if (d[i] instanceof Object) {
+            ret.push(resolveObject(d[i], p[i] ?? {}));
+        }
+        else {
+            ret.push(p[i] ?? d[i]);
+        }
+    }
+    return ret;
+}
+function resolveObject(d, p) {
+    if (d === undefined) {
+        return undefined;
+    }
+    const ret = {};
+    for (const [key, value] of Object.entries(d)) {
+        if (value instanceof Array) {
+            ret[key] = resolveArray(value, p[key] ?? []);
+        }
+        else if (value instanceof Object) {
+            ret[key] = resolveObject(value, p[key] ?? {});
+        }
+        else {
+            ret[key] = p[key] ?? value;
+        }
+    }
+    return ret;
+}
+export function resolve(d, p) {
+    return resolveObject(d ?? {}, p);
+}

package/package.json

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