@nil-/doc 0.2.16 → 0.2.18

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nil-/doc
 
+## 0.2.18
+
+### Patch Changes
+
+-   a63dd42: [doc][fix] added tooltip for range
+
+## 0.2.17
+
+### Patch Changes
+
+-   af86341: [doc] moved default mapping in a common lib
+    [doc] fix typing
+    [doc] if Param's tag is not provided, use stringified id
+
 ## 0.2.16
 
 ### Patch Changes

package/components/block/Params.svelte

@@ -2,25 +2,21 @@
 <script>import { onMount } from "svelte";
 import { getParams, getDefaults } from "./context";
 import { resolve } from "./utils";
-export let tag;
+export let tag = undefined;
 export let props = {};
 const defaults = getDefaults();
 const params = getParams();
 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;
-        });
+        params.update((p) => [
+            ...p,
+            {
+                id: p.length,
+                tag: tag ?? `${p.length}`,
+                values: resolve(d, props),
+                defaults: resolve(d, props)
+            }
+        ]);
     }
 }));
 </script>

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

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import { type ValueType } from "./context";
 declare const __propDef: {
     props: {
-        tag: string;
-        props?: Record<string, unknown> | undefined;
+        tag?: string | undefined;
+        props?: Record<string, ValueType> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/Template.svelte

@@ -65,6 +65,7 @@ let hovered = null;
  */
 let key = false;
 beforeUpdate(() => (key = !key));
+const resolveArgs = (resolve);
 </script>
 <div class="template">
     {#each $params as param (param.id)}
@@ -77,12 +78,20 @@ beforeUpdate(() => (key = !key));
         >
             {#if noreset}
                 <div class="content nil-doc-scrollable">
-                    <slot tag={param.tag} props={resolve(param.defaults, param.values)} />
+                    <slot
+                        id={param.id}
+                        tag={param.tag}
+                        props={resolveArgs(param.defaults, param.values)}
+                    />
                 </div>
             {:else}
                 {#key key}
                     <div class="content nil-doc-scrollable">
-                        <slot tag={param.tag} props={resolve(param.defaults, param.values)} />
+                        <slot
+                            id={param.id}
+                            tag={param.tag}
+                            props={resolveArgs(param.defaults, param.values)}
+                        />
                     </div>
                 {/key}
             {/if}

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

@@ -9,8 +9,9 @@ declare class __sveltets_Render<Args> {
     };
     slots(): {
         default: {
-            tag: string | undefined;
-            props: Record<string, any>;
+            id: number;
+            tag: string;
+            props: Args;
         };
     };
 }

package/components/block/context.d.ts

@@ -1,10 +1,13 @@
 import type { Control } from "./controls/types";
 import type { Writable } from "svelte/store";
+export type ValueType = undefined | boolean | number | string | ValueType[] | {
+    [key: string]: ValueType;
+};
 export type Params = {
     id: number;
-    tag?: string;
-    values: Record<string, any>;
-    defaults: Record<string, any>;
+    tag: string;
+    values: Record<string, ValueType>;
+    defaults: Record<string, ValueType>;
 };
 export type ControlState = {
     expand: boolean;
@@ -12,5 +15,5 @@ export type ControlState = {
 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, any> | null>, getDefaults: () => Writable<Record<string, any> | null>;
+export declare const initDefaults: () => Writable<Record<string, ValueType> | null>, getDefaults: () => Writable<Record<string, ValueType> | null>;
 export declare const initControlsState: () => Writable<ControlState>, getControlsState: () => Writable<ControlState>;

package/components/block/controls/Component.svelte

@@ -6,10 +6,12 @@ import Switch from "./Switch.svelte";
 import Select from "./Select.svelte";
 import Tuple from "./Tuple.svelte";
 import Object from "./Object.svelte";
-export let info;
+// by use, info type is mapped to the value type
+// unfortunately i can't use typescript in the markup part of svelte
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export let value;
-export let depth = 10;
+export let info;
+export let depth;
 export let disabled = false;
 </script>
 {#if info.type === "object"}

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

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 import type { Control } from "./types";
 declare const __propDef: {
     props: {
-        info: Control;
         value: any;
-        depth?: number | undefined;
+        info: Control;
+        depth: number;
         disabled?: boolean | undefined;
     };
     events: {

package/components/block/controls/Controls.svelte

@@ -3,12 +3,11 @@
 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>
     <Header />
     {#each infos as info}
-        <Component {info} bind:value={values[info.name]} />
+        <Component {info} bind:value={values[info.name]} depth={10} disabled={false} />
     {/each}
 </Styler>

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

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

package/components/block/controls/Number.svelte

@@ -1,9 +1,10 @@
 
-<script>export let value;
+<script>import { getDefault } from "./misc/defaulter";
+export let value;
 export let info;
 export let depth;
 export let disabled = false;
-let ivalue = value ?? 0;
+let ivalue = value ?? getDefault(info);
 let enabled = value !== undefined;
 $: value = enabled && !disabled ? ivalue : undefined;
 </script>

package/components/block/controls/Object.svelte

@@ -2,7 +2,6 @@
 <script>import Component from "./Component.svelte";
 import Header from "./misc/GroupHeader.svelte";
 import { getObjectDefaults } from "./misc/defaulter";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export let value;
 export let info;
 export let depth;

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

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ControlObject } from "./types";
+import type { ValueType } from "../context";
 declare const __propDef: {
     props: {
-        value: Record<string, any> | undefined;
+        value: Record<string, ValueType> | undefined;
         info: ControlObject;
         depth: number;
         disabled?: boolean | undefined;

package/components/block/controls/Range.svelte

@@ -3,31 +3,51 @@
         width: 100%;
         display: grid;
         grid-template-columns: 40px 1fr;
+        gap: 5px;
+        position: relative;
     }
 
     .input > div {
         width: 100%;
         height: 100%;
         display: grid;
-        text-align: center;
+        text-align: right;
         align-items: center;
         font-size: 0.8rem;
+        user-select: none;
         margin: auto;
     }
+
+    .tooltip {
+        width: 100%;
+        height: 100%;
+        /* top: -100%; */
+        left: -100%;
+        position: absolute;
+        visibility: hidden;
+    }
+
+    .input:hover > .tooltip {
+        visibility: visible;
+    }
 </style>
 
-<script>export let value;
+<script>import { getDefault } from "./misc/defaulter";
+export let value;
 export let info;
 export let depth;
 export let disabled = false;
-let ivalue = value ?? info.min;
+let ivalue = value ?? getDefault(info);
 let enabled = value !== undefined;
 $: value = enabled && !disabled ? ivalue : undefined;
 </script>
 <div>
     <div style:padding-left={`${depth}px`}>- {info.name}</div>
     <div class="input">
-        <div>{ivalue}</div>
+        <div class="tooltip">
+            Current Value: {ivalue}
+        </div>
+        <div>{ivalue.toFixed(2)}</div>
         <input
             type="range"
             bind:value={ivalue}

package/components/block/controls/Select.svelte

@@ -1,9 +1,10 @@
 
-<script>export let value;
+<script>import { getDefault } from "./misc/defaulter";
+export let value;
 export let info;
 export let depth;
 export let disabled = false;
-let ivalue = value ?? (info.values.length > 0 ? info.values[0] : undefined);
+let ivalue = value ?? getDefault(info);
 let enabled = value !== undefined;
 $: value = enabled && !disabled ? ivalue : undefined;
 </script>

package/components/block/controls/Switch.svelte

@@ -1,9 +1,10 @@
 
-<script>export let value;
+<script>import { getDefault } from "./misc/defaulter";
+export let value;
 export let info;
 export let depth;
 export let disabled = false;
-let ivalue = value ?? false;
+let ivalue = value ?? getDefault(info);
 let enabled = value !== undefined;
 $: value = enabled && !disabled ? ivalue : undefined;
 </script>

package/components/block/controls/Text.svelte

@@ -1,9 +1,10 @@
 
-<script>export let value;
+<script>import { getDefault } from "./misc/defaulter";
+export let value;
 export let info;
 export let depth;
 export let disabled = false;
-let ivalue = value ?? "";
+let ivalue = value ?? getDefault(info);
 let ienabled = value !== undefined;
 $: value = ienabled && !disabled ? ivalue : undefined;
 </script>

package/components/block/controls/Tuple.svelte

@@ -2,7 +2,6 @@
 <script>import Component from "./Component.svelte";
 import Header from "./misc/GroupHeader.svelte";
 import { getTupleDefaults } from "./misc/defaulter";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export let value;
 export let info;
 export let depth;

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

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ControlTuple } from "./types";
+import type { ValueType } from "../context";
 declare const __propDef: {
     props: {
-        value: any[] | undefined;
+        value: ValueType[] | undefined;
         info: ControlTuple;
         depth: number;
         disabled?: boolean | undefined;

package/components/block/controls/misc/defaulter.d.ts

@@ -1,4 +1,5 @@
+import type { ValueType } from "../../context";
 import type { Control, ControlTuple, ControlObject } from "../types";
-export declare function getObjectDefaults(info: ControlObject): Record<string, any>;
-export declare function getTupleDefaults(i: ControlTuple): any[];
-export declare function getDefault(i: Control): any;
+export declare function getObjectDefaults(info: ControlObject): Record<string, ValueType>;
+export declare function getTupleDefaults(i: ControlTuple): ValueType[];
+export declare function getDefault(i: Control): ValueType;

package/components/block/controls/misc/defaulter.js

@@ -1,5 +1,4 @@
 export function getObjectDefaults(info) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const ret = {};
     for (const i of info.values) {
         ret[i.name] = getDefault(i);
@@ -13,16 +12,21 @@ export function getTupleDefaults(i) {
     }
     return ret;
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function getDefault(i) {
+    if (i.type === "switch") {
+        return false;
+    }
     if (i.type === "number") {
         return 0;
     }
     if (i.type === "range") {
         return i.min;
     }
-    if (i.type === "switch") {
-        return false;
+    if (i.type === "text") {
+        return "";
+    }
+    if (i.type === "select") {
+        return i.values.length > 0 ? i.values[0] : "";
     }
     if (i.type === "tuple") {
         return [...getTupleDefaults(i)];
@@ -30,6 +34,5 @@ export function getDefault(i) {
     if (i.type === "object") {
         return getObjectDefaults(i);
     }
-    // "select" | "text"
-    return "";
+    return undefined;
 }

package/components/block/utils.d.ts

@@ -1 +1,6 @@
-export declare function resolve<Args>(d: Args | undefined, p: Record<string, any>): Args;
+import type { ValueType } from "./context";
+type VTObject = {
+    [key: string]: ValueType;
+};
+export declare function resolve<Args>(d: VTObject | undefined, p: VTObject): Args;
+export {};

package/components/block/utils.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 function resolveArray(d, p) {
     if (d === undefined) {
         return undefined;

package/package.json

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