@nil-/doc 0.2.45 → 0.2.47

package/components/block/controls/{Select.svelte.d.ts → props/Select.svelte.d.ts}

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

package/components/block/controls/{Switch.svelte → props/Switch.svelte}

@@ -1,6 +1,6 @@
 
 <script>import { getDefault } from "./misc/defaulter";
-import Name from "./misc/Name.svelte";
+import NameHeader from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
@@ -10,10 +10,12 @@ let ivalue = value ?? getDefault(info);
 let enabled = value !== void 0;
 $:
   value = enabled && !disabled ? ivalue : void 0;
+$:
+  name = info instanceof Array ? info[0] : info.name;
 </script>
 {#if visible}
     <div>
-        <Name name={info.name} {depth} />
+        <NameHeader {name} {depth} />
         <div><input type="checkbox" bind:checked={ivalue} disabled={!enabled || disabled} /></div>
         <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
     </div>

package/components/block/controls/{Switch.svelte.d.ts → props/Switch.svelte.d.ts}

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

package/components/block/controls/{Text.svelte → props/Text.svelte}

@@ -1,6 +1,6 @@
 
 <script>import { getDefault } from "./misc/defaulter";
-import Name from "./misc/Name.svelte";
+import NameHeader from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
@@ -10,10 +10,12 @@ let ivalue = value ?? getDefault(info);
 let ienabled = value !== void 0;
 $:
   value = ienabled && !disabled ? ivalue : void 0;
+$:
+  name = info instanceof Array ? info[0] : info.name;
 </script>
 {#if visible}
     <div>
-        <Name name={info.name} {depth} />
+        <NameHeader {name} {depth} />
         <div><input type="text" bind:value={ivalue} disabled={!ienabled || disabled} /></div>
         <div><input type="checkbox" bind:checked={ienabled} {disabled} /></div>
     </div>

package/components/block/controls/{Text.svelte.d.ts → props/Text.svelte.d.ts}

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

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

@@ -0,0 +1,39 @@
+
+<script>import Component from "./Component.svelte";
+import Header from "./misc/GroupHeader.svelte";
+import { getDefault } from "./misc/defaulter";
+export let value;
+export let info;
+export let depth;
+export let disabled = false;
+export let visible = false;
+let ivalue = value ?? getDefault(info);
+let enabled = value !== void 0;
+$:
+  value = !disabled && enabled ? ivalue : void 0;
+$:
+  values = info instanceof Array ? info[2] : info.values;
+$:
+  name = info instanceof Array ? info[0] : info.name;
+let expand = info.values.length > 0 ? true : void 0;
+</script>
+<Header {name} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
+{#each values as v, i (i)}
+    {#if v instanceof Array}
+        <Component
+            info={[`${i}`, ...v]}
+            bind:value={ivalue[i]}
+            depth={depth + 10}
+            disabled={!enabled || disabled}
+            visible={visible && expand && enabled && !disabled}
+        />
+    {:else}
+        <Component
+            info={{ ...v, name: `${i}` }}
+            bind:value={ivalue[i]}
+            depth={depth + 10}
+            disabled={!enabled || disabled}
+            visible={visible && expand && enabled && !disabled}
+        />
+    {/if}
+{/each}

package/components/block/controls/{Tuple.svelte.d.ts → props/Tuple.svelte.d.ts}

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

package/components/block/controls/{misc → props/misc}/Styler.svelte

@@ -1,4 +1,4 @@
-<script>import { getTheme } from "../../../context";
+<script>import { getTheme } from "../../../../context";
 const dark = getTheme();
 </script>
 <style>
@@ -24,45 +24,44 @@ const dark = getTheme();
         grid-template-columns: minmax(250px, 1fr) 200px 40px;
     }
 
+    div > :global(div:first-child) {
+        text-align: center;
+    }
+
     div > :global(div > div:not(:first-child) > *) {
         width: 100%;
         height: 100%;
     }
 
     /* colors */
-    div > :global(div) {
-        transition: background-color 150ms;
-        background-color: hsl(0, 0%, 100%);
-    }
-
-    div > :global(div:nth-child(even)) {
-        background-color: hsl(210, 29%, 97%);
-    }
-
-    div > :global(div:nth-child(n + 2):hover) {
-        background-color: hsl(210, 100%, 90%);
-    }
-
-    div > :global(div:hover .tooltip) {
-        background-color: hsl(0, 0%, 100%);
-        outline: hsl(0, 100%, 0%) 1px solid;
+    div {
+        --pri-color: hsl(0, 0%, 100%);
+        --sec-color: hsl(210, 29%, 97%);
+        --hover-color: hsl(210, 100%, 90%);
+        --outline-color: hsl(0, 0%, 0%);
     }
 
-    div.dark > :global(div) {
-        background-color: hsl(213, 26%, 7%);
+    div.dark {
+        --pri-color: hsl(213, 26%, 7%);
+        --sec-color: hsl(213, 26%, 11%);
+        --hover-color: hsl(203, 100%, 15%);
+        --outline-color: hsl(200, 6%, 80%);
     }
 
-    div.dark > :global(div:nth-child(even)) {
-        background-color: hsl(213, 26%, 11%);
+    div {
+        transition: background-color 150ms;
+        background-repeat: repeat;
+        background-size: 100% 60px;
+        background-image: linear-gradient(to bottom, var(--pri-color) 30px, var(--sec-color) 30px);
     }
 
-    div.dark > :global(div:nth-child(n + 2):hover) {
-        background-color: hsl(203, 100%, 15%);
+    div > :global(div:nth-child(n + 2):hover) {
+        background-color: var(--hover-color);
     }
 
-    div.dark > :global(div:hover .tooltip) {
-        background-color: hsl(213, 26%, 7%);
-        outline: hsl(200, 6%, 80%) 1px solid;
+    div > :global(div:hover .tooltip) {
+        background-color: var(--pri-color);
+        outline: var(--outline-color) 1px solid;
     }
 </style>
 

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type StylerProps = typeof __propDef.props;
+export type StylerEvents = typeof __propDef.events;
+export type StylerSlots = typeof __propDef.slots;
+export default class Styler extends SvelteComponentTyped<StylerProps, StylerEvents, StylerSlots> {
+}
+export {};

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

@@ -0,0 +1,12 @@
+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;
+export declare function getDefault(i: Prop): ValueType;

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

@@ -0,0 +1,71 @@
+// eslint-disable-next-line func-style
+export function getDefault(i) {
+    if (i instanceof Array) {
+        switch (i[1]) {
+            case "object":
+                // eslint-disable-next-line no-use-before-define
+                return getObjectDefaults(i);
+            case "tuple":
+                // eslint-disable-next-line no-use-before-define
+                return getTupleDefaults(i);
+            case "text":
+                return "";
+            case "select":
+                return i[2].length > 0 ? i[2][0] : "";
+            case "number":
+                return 0;
+            case "range":
+                return i[2];
+            case "switch":
+            default:
+                return false;
+        }
+    }
+    else {
+        switch (i.type) {
+            case "object":
+                // eslint-disable-next-line no-use-before-define
+                return getObjectDefaults(i);
+            case "tuple":
+                // eslint-disable-next-line no-use-before-define
+                return getTupleDefaults(i);
+            case "text":
+                return "";
+            case "select":
+                return i.values.length > 0 ? i.values[0] : "";
+            case "number":
+                return 0;
+            case "range":
+                return i.min;
+            case "switch":
+            default:
+                return false;
+        }
+    }
+}
+const getObjectDefaults = (info) => {
+    const ret = {};
+    const values = info instanceof Array ? info[2] : info.values;
+    for (const v of values) {
+        if (v instanceof Array) {
+            ret[v[0]] = getDefault(v);
+        }
+        else {
+            ret[v.name] = getDefault(v);
+        }
+    }
+    return ret;
+};
+const getTupleDefaults = (info) => {
+    const ret = [];
+    const values = info instanceof Array ? info[2] : info.values;
+    values.forEach((v, i) => {
+        if (v instanceof Array) {
+            ret.push(getDefault([`${i}`, ...v]));
+        }
+        else {
+            ret.push(getDefault({ name: `${i}`, ...v }));
+        }
+    });
+    return ret;
+};

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

@@ -1,60 +1,55 @@
-export type ControlTuple = {
-    name: string;
-    type: "tuple";
-    // eslint-disable-next-line no-use-before-define
-    values: NonNamedControl[];
-};
-
-export type ControlObject = {
-    name: string;
-    type: "object";
-    // eslint-disable-next-line no-use-before-define
-    values: Control[];
-};
-
-export type ControlText = {
-    name: string;
-    type: "text";
-};
-
-export type ControlNumber = {
-    name: string;
-    type: "number";
-};
-
-export type ControlRange = {
-    name: string;
-    type: "range";
-    min: number;
-    max: number;
-    step: number;
-};
-
-export type ControlSelect = {
-    name: string;
-    type: "select";
-    values: string[];
-};
-
-export type ControlSwitch = {
-    name: string;
-    type: "switch";
-};
-
-export type Control =
-    | ControlTuple
-    | ControlObject
-    | ControlText
-    | ControlNumber
-    | ControlRange
-    | ControlSelect
-    | ControlSwitch;
-
-type NonNamedControl =
-    | Omit<ControlTuple, "name">
-    | Omit<ControlObject, "name">
-    | Omit<ControlText, "name">
-    | Omit<ControlNumber, "name">
-    | Omit<ControlRange, "name">
-    | Omit<ControlSelect, "name">
-    | Omit<ControlSwitch, "name">;
+// 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"];
+
+// 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 };
+
+export type Name = { name: string };
+
+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];
+
+type NonNamedProp =
+    | PropTuple
+    | PropObject
+    | PropText
+    | PropNumber
+    | PropRange
+    | PropSelect
+    | PropSwitch
+    | FlatPropTuple
+    | FlatPropObject
+    | FlatPropText
+    | FlatPropNumber
+    | FlatPropRange
+    | FlatPropSelect
+    | FlatPropSwitch;
+
+export type Event = string;

package/components/etc/Container.svelte

@@ -76,18 +76,22 @@
         background-color: var(--color-p);
     }
 
+    .container:not(.b):not(.vertical) > .divider:hover,
     .container.moving:not(.b):not(.vertical) > .divider {
         border-bottom: var(--color-s) solid 2.5px;
     }
 
+    .container.b:not(.vertical) > .divider:hover,
     .container.moving.b:not(.vertical) > .divider {
         border-top: var(--color-s) solid 2.5px;
     }
 
+    .container:not(.b).vertical > .divider:hover,
     .container.moving:not(.b).vertical > .divider {
         border-right: var(--color-s) solid 2.5px;
     }
 
+    .container.vertical.b > .divider:hover,
     .container.moving.vertical.b > .divider {
         border-left: var(--color-s) solid 2.5px;
     }

package/components/navigation/types.d.ts

@@ -8,5 +8,5 @@ export type States = {
     sub: Record<string, States>;
 };
 
-export type Sorter = (l: string, r: string) => 1 | 0 | -1;
+export type Sorter = (l: string, r: string) => -1 | 0 | 1;
 export type Renamer = (s: string) => string;

package/components/navigation/utils/renamer.d.ts

@@ -1,9 +1,5 @@
-import type { Renamer } from "../types";
 /**
  * If a text follows `<I>-<Name>` format,
  * this method simply removes the Prefix.
- *
- * @param text
- * @returns `<Name>`
  */
-export declare const renamer: Renamer;
+export declare const renamer: (text: string) => string;

package/components/navigation/utils/renamer.js

@@ -2,14 +2,11 @@ const match = /(\d+)-(.+)/;
 /**
  * If a text follows `<I>-<Name>` format,
  * this method simply removes the Prefix.
- *
- * @param text
- * @returns `<Name>`
  */
-export const renamer = (text) => {
+export const renamer = ((text) => {
     const m = match.exec(text);
     if (m) {
         return m[2];
     }
     return text;
-};
+});

package/components/navigation/utils/sorter.d.ts

@@ -1,4 +1,3 @@
-import type { Sorter } from "../types";
 /**
  * Compares two texts for sorting.
  *
@@ -9,9 +8,5 @@ import type { Sorter } from "../types";
  * the text that follows the format is considered as higher in order.
  *
  * Else comparison is done using built-in `string` comparison.
- *
- * @param l - left operand
- * @param r - right operand
- * @returns `-1 | 0 | +1`
  */
-export declare const sorter: Sorter;
+export declare const sorter: (l: string, r: string) => -1 | 0 | 1;

package/components/navigation/utils/sorter.js

@@ -18,12 +18,8 @@ const sorterT = (l, r) => {
  * the text that follows the format is considered as higher in order.
  *
  * Else comparison is done using built-in `string` comparison.
- *
- * @param l - left operand
- * @param r - right operand
- * @returns `-1 | 0 | +1`
  */
-export const sorter = (l, r) => {
+export const sorter = ((l, r) => {
     const lmatch = match.exec(l);
     const rmatch = match.exec(r);
     if (null == lmatch && null == rmatch) {
@@ -36,4 +32,4 @@ export const sorter = (l, r) => {
         return -1;
     }
     return sorterT(parseInt(lmatch[1]), parseInt(rmatch[1])) || sorterT(lmatch[2], rmatch[2]);
-};
+});

package/index.d.ts

@@ -1,6 +1,6 @@
 export { renamer } from "./components/navigation/utils/renamer";
 export { sorter } from "./components/navigation/utils/sorter";
-export type { Control } from "./components/block/controls/types";
+export type { Prop, Event } 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,26 +1,26 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.45",
+  "version": "0.2.47",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
   },
   "license": "ISC",
   "devDependencies": {
-    "@sveltejs/adapter-vercel": "^1.0.0",
-    "@sveltejs/kit": "^1.0.5",
+    "@sveltejs/adapter-vercel": "^1.0.5",
+    "@sveltejs/kit": "^1.3.2",
     "@sveltejs/package": "^1.0.2",
     "@vitest/coverage-c8": "^0.26.3",
     "mdsvex": "^0.10.6",
     "remark-admonitions": "^1.2.1",
     "svelte-check": "^2.10.3",
-    "tslib": "^2.4.1",
+    "tslib": "^2.5.0",
     "typescript": "^4.9.4",
     "vite": "^4.0.4",
     "vitest": "^0.26.3"
   },
   "peerDependencies": {
-    "svelte": "^3.55.0"
+    "svelte": "^3.55.1"
   },
   "publishConfig": {
     "linkDirectory": true

package/components/block/controls/Component.svelte

@@ -1,29 +0,0 @@
-
-<script>import Text from "./Text.svelte";
-import Number from "./Number.svelte";
-import Range from "./Range.svelte";
-import Switch from "./Switch.svelte";
-import Select from "./Select.svelte";
-import Tuple from "./Tuple.svelte";
-import Object from "./Object.svelte";
-export let value;
-export let info;
-export let depth;
-export let disabled = false;
-export let visible = false;
-</script>
-{#if "object" === info.type}
-    <Object {info} bind:value {depth} {disabled} {visible} />
-{:else if "tuple" === info.type}
-    <Tuple {info} bind:value {depth} {disabled} {visible} />
-{:else if "text" === info.type}
-    <Text {info} bind:value {depth} {disabled} {visible} />
-{:else if "number" === info.type}
-    <Number {info} bind:value {depth} {disabled} {visible} />
-{:else if "range" === info.type}
-    <Range {info} bind:value {depth} {disabled} {visible} />
-{:else if "select" === info.type}
-    <Select {info} bind:value {depth} {disabled} {visible} />
-{:else if "switch" === info.type}
-    <Switch {info} bind:value {depth} {disabled} {visible} />
-{/if}

package/components/block/controls/Controls.svelte

@@ -1,13 +0,0 @@
-
-<script>import Component from "./Component.svelte";
-import Header from "./misc/TopHeader.svelte";
-import Styler from "./misc/Styler.svelte";
-export let infos;
-export let values;
-</script>
-<Styler>
-    <Header />
-    {#each infos as info}
-        <Component {info} bind:value={values[info.name]} depth={10} visible />
-    {/each}
-</Styler>

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

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ValueType } from "../types";
-import type { Control } from "./types";
-declare const __propDef: {
-    props: {
-        infos: Control[];
-        values: Record<string, ValueType>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ControlsProps = typeof __propDef.props;
-export type ControlsEvents = typeof __propDef.events;
-export type ControlsSlots = typeof __propDef.slots;
-export default class Controls extends SvelteComponentTyped<ControlsProps, ControlsEvents, ControlsSlots> {
-}
-export {};