@nil-/doc 0.2.47 → 0.2.49

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nil-/doc
 
+## 0.2.49
+
+### Patch Changes
+
+-   [doc][fix] fix range number formatting ([#83](https://github.com/njaldea/mono/pull/83))
+
+## 0.2.48
+
+### Patch Changes
+
+-   [doc][fix] Fix type support ([#81](https://github.com/njaldea/mono/pull/81))
+
 ## 0.2.47
 
 ### Patch Changes

package/components/Layout.svelte

@@ -121,7 +121,7 @@ const toggle = () => {
         </div>
         <div
             class="icon"
-            title="Double click to open repo: https://github.com/njaldea/mono"
+            title="Open @nil-/mono repo: https://github.com/njaldea/mono"
             on:click={() => window.open("https://github.com/njaldea/mono", "_blank")}
             on:keypress={null}
         >

package/components/block/controls/props/Number.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Name, PropNumber, FlatPropNumber } from "../types";
+import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: number | undefined;
-        info: (Name & PropNumber) | [string, ...FlatPropNumber];
+        info: Unionized<PropType<"number">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

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

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ValueType } from "../../types";
-import type { Name, PropObject, FlatPropObject } from "../types";
+import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: Record<string, ValueType> | undefined;
-        info: (Name & PropObject) | [string, ...FlatPropObject];
+        info: Unionized<PropType<"object">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

package/components/block/controls/props/Range.svelte

@@ -2,7 +2,7 @@
     .input {
         width: 100%;
         display: grid;
-        grid-template-columns: 40px 1fr;
+        grid-template-columns: 65px 1fr;
         gap: 5px;
         position: relative;
     }
@@ -11,7 +11,7 @@
         width: 100%;
         height: 100%;
         display: grid;
-        text-align: right;
+        text-align: left;
         align-items: center;
         font-size: 0.8rem;
         user-select: none;
@@ -19,12 +19,13 @@
     }
 
     .tooltip {
-        padding-right: 10px;
+        left: -110%;
         width: 100%;
         height: 100%;
-        left: -110%;
-        position: absolute;
+        display: grid;
         visibility: hidden;
+        position: absolute;
+        place-items: center;
     }
 
     .input:hover > .tooltip:not(.disabled) {
@@ -34,6 +35,7 @@
 
 <script>import { getDefault } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
+import { nformat } from "./misc/nformat";
 export let value;
 export let info;
 export let depth;
@@ -44,31 +46,33 @@ let enabled = value !== void 0;
 $:
   value = enabled && !disabled ? ivalue : void 0;
 $:
-  flag = !enabled || disabled;
-$:
-  name = info instanceof Array ? info[0] : info.name;
-$:
-  min = info instanceof Array ? info[2] : info.min;
-$:
-  max = info instanceof Array ? info[3] : info.max;
-$:
-  step = info instanceof Array ? info[4] : info.step;
+  i = info instanceof Array ? {
+    name: info[0],
+    min: info[2],
+    max: info[3],
+    step: info[4]
+  } : {
+    name: info.name,
+    min: info.min,
+    max: info.max,
+    step: info.step
+  };
 </script>
 {#if visible}
     <div>
-        <NameHeader {name} {depth} />
+        <NameHeader name={i.name} {depth} />
         <div class="input">
-            <div class="tooltip" class:disabled={flag}>
-                Current Value: {ivalue}
+            <div class="tooltip" class:disabled={!enabled || disabled}>
+                Value: {nformat(ivalue, 6, 11)}
             </div>
-            <div>{ivalue.toFixed(2)}</div>
+            <div>{nformat(ivalue, 3, 5)}</div>
             <input
                 type="range"
                 bind:value={ivalue}
-                {min}
-                {max}
-                {step}
-                disabled={flag}
+                min={i.min}
+                max={i.max}
+                step={i.step}
+                disabled={!enabled || disabled}
             />
         </div>
         <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>

package/components/block/controls/props/Range.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Name, PropRange, FlatPropRange } from "../types";
+import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: number | undefined;
-        info: (Name & PropRange) | [string, ...FlatPropRange];
+        info: Unionized<PropType<"range">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

package/components/block/controls/props/Select.svelte

@@ -1,3 +1,8 @@
+<style>
+    select {
+        text-align: center;
+    }
+</style>
 
 <script>import { getDefault } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
@@ -28,3 +33,4 @@ $:
         <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
     </div>
 {/if}
+

package/components/block/controls/props/Select.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Name, PropSelect, FlatPropSelect } from "../types";
+import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: string | undefined;
-        info: (Name & PropSelect) | [string, ...FlatPropSelect];
+        info: Unionized<PropType<"select">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

package/components/block/controls/props/Switch.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Name, PropSwitch, FlatPropSwitch } from "../types";
+import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: boolean | undefined;
-        info: (Name & PropSwitch) | [string, ...FlatPropSwitch];
+        info: Unionized<PropType<"switch">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

package/components/block/controls/props/Text.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Name, PropText, FlatPropText } from "../types";
+import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: string | undefined;
-        info: (Name & PropText) | [string, ...FlatPropText];
+        info: Unionized<PropType<"text">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

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

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ValueType } from "../../types";
-import type { Name, PropTuple, FlatPropTuple } from "../types";
+import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: ValueType[] | undefined;
-        info: (Name & PropTuple) | [string, ...FlatPropTuple];
+        info: Unionized<PropType<"tuple">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

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

@@ -15,6 +15,7 @@ const dark = getTheme();
     div :global(*::before),
     div :global(*::after) {
         box-sizing: inherit;
+        font-family: inherit;
     }
 
     div > :global(div) {
@@ -26,6 +27,7 @@ const dark = getTheme();
 
     div > :global(div:first-child) {
         text-align: center;
+        font-weight: bold;
     }
 
     div > :global(div > div:not(:first-child) > *) {

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

@@ -1,12 +1,10 @@
 import type { ValueType } from "../../../types";
-import type { Prop, Name } from "../../types";
-import type { PropNumber, PropRange, PropSelect, PropSwitch, PropText, PropTuple, PropObject } from "../../types";
-import type { FlatPropNumber, FlatPropRange, FlatPropSelect, FlatPropSwitch, FlatPropText, FlatPropTuple, FlatPropObject } from "../../types";
-export declare function getDefault(i: (Name & PropTuple) | [string, ...FlatPropTuple]): ValueType[];
-export declare function getDefault(i: (Name & PropObject) | [string, ...FlatPropObject]): Record<string, ValueType>;
-export declare function getDefault(i: (Name & PropNumber) | [string, ...FlatPropNumber]): number;
-export declare function getDefault(i: (Name & PropRange) | [string, ...FlatPropRange]): number;
-export declare function getDefault(i: (Name & PropSelect) | [string, ...FlatPropSelect]): string;
-export declare function getDefault(i: (Name & PropText) | [string, ...FlatPropText]): string;
-export declare function getDefault(i: (Name & PropSwitch) | [string, ...FlatPropSwitch]): boolean;
+import type { Unionized, PropType, Prop } from "../../types";
+export declare function getDefault(i: Unionized<PropType<"tuple">>): ValueType[];
+export declare function getDefault(i: Unionized<PropType<"object">>): Record<string, ValueType>;
+export declare function getDefault(i: Unionized<PropType<"number">>): number;
+export declare function getDefault(i: Unionized<PropType<"range">>): number;
+export declare function getDefault(i: Unionized<PropType<"select">>): string;
+export declare function getDefault(i: Unionized<PropType<"text">>): string;
+export declare function getDefault(i: Unionized<PropType<"switch">>): boolean;
 export declare function getDefault(i: Prop): ValueType;

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

@@ -59,13 +59,13 @@ const getObjectDefaults = (info) => {
 const getTupleDefaults = (info) => {
     const ret = [];
     const values = info instanceof Array ? info[2] : info.values;
-    values.forEach((v, i) => {
+    for (const [i, v] of values.entries()) {
         if (v instanceof Array) {
             ret.push(getDefault([`${i}`, ...v]));
         }
         else {
             ret.push(getDefault({ name: `${i}`, ...v }));
         }
-    });
+    }
     return ret;
 };

package/components/block/controls/props/misc/nformat.d.ts

@@ -0,0 +1 @@
+export declare const nformat: (v: number, fdigits: number, width: number) => string;

package/components/block/controls/props/misc/nformat.js

@@ -0,0 +1,16 @@
+export const nformat = (v, fdigits, width) => {
+    const n = v.toExponential().split("e");
+    const ex = parseInt(n[1]);
+    const absex = Math.abs(ex);
+    const short = absex >= fdigits;
+    const rest = short
+        ? width - 3 + (absex >= 10 ? 0 : 1) - (ex < 0 ? 1 : 0)
+        : width - absex + (ex < 0 ? -ex : 0);
+    return v.toLocaleString(undefined, {
+        signDisplay: "always",
+        useGrouping: false,
+        notation: short ? "scientific" : "standard",
+        maximumFractionDigits: rest,
+        minimumFractionDigits: rest
+    });
+};

package/components/block/controls/types.d.ts

@@ -1,55 +1,79 @@
-// eslint-disable-next-line no-use-before-define
-export type FlatPropTuple = ["tuple", NonNamedProp[]];
-// eslint-disable-next-line no-use-before-define
-export type FlatPropObject = ["object", Prop[]];
-export type FlatPropText = ["text"];
-export type FlatPropNumber = ["number"];
-export type FlatPropRange = ["range", number, number, number];
-export type FlatPropSelect = ["select", string[]];
-export type FlatPropSwitch = ["switch"];
+type Types = "text" | "number" | "select" | "range" | "switch" | "tuple" | "object";
 
-// eslint-disable-next-line no-use-before-define
-export type PropTuple = { type: "tuple" } & { values: NonNamedProp[] };
-// eslint-disable-next-line no-use-before-define
-export type PropObject = { type: "object" } & { values: Prop[] };
-export type PropText = { type: "text" };
-export type PropNumber = { type: "number" };
-export type PropSwitch = { type: "switch" };
-export type PropSelect = { type: "select" } & { values: string[] };
-export type PropRange = { type: "range" } & { min: number; max: number; step: number };
+// prettier-ignore
+export type PropType<T extends Types> =
+    T extends "text" ? [
+        [ name: string, type: T ],
+        { name: string; type: T; }
+    ]
+    : T extends "number" ? [
+        [ name: string, type: T ],
+        { name: string; type: T; }
+    ]
+    : T extends "switch" ? [
+        [ name: string, type: T ],
+        { name: string; type: T; }
+    ]
+    : T extends "select" ? [
+        [ name: string, type: T, values: string[] ],
+        { name: string; type: T; values: string[]; }
+    ]
+    : T extends "range" ? [
+        [ name: string, type: T, min: number, max: number, step: number ],
+        { name: string; type: T; min: number; max: number, step: number; }
+    ]
+    : T extends "tuple" ? [
+        // eslint-disable-next-line no-use-before-define
+        [ name: string, type: T, values: NonNamedProp[] ],
+        // eslint-disable-next-line no-use-before-define
+        { name: string; type: T; values: NonNamedProp[]; }
+    ]
+    : T extends "object" ? [
+        // eslint-disable-next-line no-use-before-define
+        [ name: string, type: T, values: Prop[] ],
+        // eslint-disable-next-line no-use-before-define
+        { name: string; type: T; values: Prop[]; }
+    ]
+    : never;
 
-export type Name = { name: string };
+export type Flattened<T extends PropType> = T[0];
+export type Detailed<T extends PropType> = T[1];
+export type Unionized<T extends PropTyoe> = T[number];
 
+// prettier-ignore
 export type Prop =
-    | (Name & PropTuple)
-    | (Name & PropObject)
-    | (Name & PropText)
-    | (Name & PropNumber)
-    | (Name & PropSwitch)
-    | (Name & PropSelect)
-    | (Name & PropRange)
-    | [string, ...FlatPropTuple]
-    | [string, ...FlatPropObject]
-    | [string, ...FlatPropText]
-    | [string, ...FlatPropNumber]
-    | [string, ...FlatPropSwitch]
-    | [string, ...FlatPropSelect]
-    | [string, ...FlatPropRange];
+    | [ name: string, type: "text" ]
+    | { name: string; type: "text"; }
+    | [ name: string, type: "number" ]
+    | { name: string; type: "number"; }
+    | [ name: string, type: "switch" ]
+    | { name: string; type: "switch"; }
+    | [ name: string, type: "select", values: string[] ]
+    | { name: string; type: "select"; values: string[]; }
+    | [ name: string, type: "range", min: number, max: number, step: number ]
+    | { name: string; type: "range"; min: number; max: number; step: number; }
+    // eslint-disable-next-line no-use-before-define
+    | [ name: string, type: "tuple", values: NonNamedProp[] ]
+    // eslint-disable-next-line no-use-before-define
+    | { name: string; type: "tuple"; values: NonNamedProp[]; }
+    | [ name: string, type: "object", values: Prop[] ]
+    | { name: string; type: "object"; values: Prop[]; };
 
+// prettier-ignore
 type NonNamedProp =
-    | PropTuple
-    | PropObject
-    | PropText
-    | PropNumber
-    | PropRange
-    | PropSelect
-    | PropSwitch
-    | FlatPropTuple
-    | FlatPropObject
-    | FlatPropText
-    | FlatPropNumber
-    | FlatPropRange
-    | FlatPropSelect
-    | FlatPropSwitch;
+    | [ type: "text" ]
+    | { type: "text"; }
+    | [ type: "number" ]
+    | { type: "number"; }
+    | [ type: "switch" ]
+    | { type: "switch"; }
+    | [ type: "select", values: string[] ]
+    | { type: "select"; values: string[]; }
+    | [ type: "range", min: number, max: number, step: number ]
+    | { type: "range"; min: number; max: number; step: number; }
+    | [ type: "tuple", values: NonNamedProp[] ]
+    | { type: "tuple"; values: NonNamedProp[]; }
+    | [ type: "object", values: Prop[] ]
+    | { type: "object"; values: Prop[]; };
 
 export type Event = string;

package/index.d.ts

@@ -1,6 +1,6 @@
 export { renamer } from "./components/navigation/utils/renamer";
 export { sorter } from "./components/navigation/utils/sorter";
-export type { Prop, Event } from "./components/block/controls/types";
+export type { Prop, Event, PropType, Detailed, Flattened, Unionized } from "./components/block/controls/types";
 export { default as Layout } from "./components/Layout.svelte";
 export { default as Instance } from "./components/block/Instance.svelte";
 export { default as Block } from "./components/block/Block.svelte";

package/package.json

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