@nil-/doc 0.2.38 → 0.2.40

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @nil-/doc
 
+## 0.2.40
+
+### Patch Changes
+
+-   [doc][new] added scale flag prop for Instance/Template componen ([#63](https://github.com/njaldea/mono/pull/63))
+
+-   [doc][patch] fixed jsdoc link for public components ([#63](https://github.com/njaldea/mono/pull/63))
+
+-   [doc][docu] moved Sorting and Renaming section to their own pages ([#63](https://github.com/njaldea/mono/pull/63))
+
+-   [doc][new] added placeholder to search bar ([#63](https://github.com/njaldea/mono/pull/63))
+
+-   [doc][docu] added admonitions plugin ([#63](https://github.com/njaldea/mono/pull/63))
+
+## 0.2.39
+
+### Patch Changes
+
+-   [doc][fix] force state of navigation expand icon when filtering ([#61](https://github.com/njaldea/mono/pull/61))
+
+-   [doc][patch] tighter eslint ([#61](https://github.com/njaldea/mono/pull/61))
+
+-   [doc][patch] added tests for non-UI related code ([#61](https://github.com/njaldea/mono/pull/61))
+
+-   [doc][patch] moved type definition ([#61](https://github.com/njaldea/mono/pull/61))
+
+-   [doc][patch] enabled typescript eslint rules ([#61](https://github.com/njaldea/mono/pull/61))
+
 ## 0.2.38
 
 ### Patch Changes

package/components/Layout.svelte

@@ -5,7 +5,6 @@
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: minmax(40px, auto) 1fr;
-        gap: 1px;
         width: 100%;
         height: 100%;
         box-sizing: border-box;
@@ -18,6 +17,8 @@
         align-items: center;
         padding-left: 10px;
         padding-right: 10px;
+        border-bottom-width: 1px;
+        border-bottom-style: solid;
         box-sizing: border-box;
         user-select: none;
     }
@@ -60,23 +61,23 @@
     .layout {
         color-scheme: light;
         color: hsl(0, 0%, 0%);
-        background-color: hsl(0, 2%, 70%);
+        background-color: hsl(0, 0%, 100%);
         transition: color 350ms, background-color 350ms;
     }
 
     .layout.dark {
         color-scheme: dark;
         color: hsl(0, 0%, 80%);
-        background-color: hsl(0, 2%, 40%);
+        background-color: hsl(200, 4%, 14%);
     }
 
-    .layout > div {
-        background-color: hsl(0, 0%, 100%);
-        transition: background-color 350ms;
+    .layout > .top {
+        transition: border-bottom-colo 350ms;
+        border-bottom-color: hsl(0, 2%, 70%);
     }
 
-    .layout.dark > div {
-        background-color: hsl(200, 4%, 14%);
+    .layout.dark > .top {
+        border-bottom-color: hsl(0, 2%, 40%);
     }
 </style>
 
@@ -84,7 +85,7 @@
 </script>
 <script>import Container from "./etc/Container.svelte";
 import Nav from "./navigation/Nav.svelte";
-import { getTheme, initTheme, evalTheme } from "./context";
+import { getTheme, initTheme } from "./context";
 import ThemeIcon from "./etc/ThemeIcon.svelte";
 import NilIcon from "./etc/NilIcon.svelte";
 export let data;
@@ -95,7 +96,7 @@ export let theme = void 0;
 const parentTheme = getTheme();
 const dark = initTheme();
 $:
-  $dark = evalTheme(parentTheme ? $parentTheme : true, theme);
+  $dark = theme === void 0 ? $parentTheme : "dark" === theme;
 </script>
 <!--
     @component

package/components/block/Block.svelte

@@ -42,7 +42,7 @@
   initControlsState,
   initOrientation
 } from "./context";
-import { getTheme, initTheme, evalTheme } from "../context";
+import { getTheme, initTheme } from "../context";
 initParams();
 initDefaults();
 initControls();
@@ -52,7 +52,7 @@ export let theme = void 0;
 const parentTheme = getTheme();
 const dark = initTheme();
 $:
-  $dark = evalTheme(parentTheme ? $parentTheme : false, theme);
+  $dark = theme === void 0 ? $parentTheme : "dark" === theme;
 </script>
 <!--
     @component

package/components/block/Controls.svelte

@@ -14,5 +14,5 @@ $:
 </script>
 <!--
     @component
-    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/3-Controls) for more details.
+    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Controls) for more details.
 -->

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

@@ -14,7 +14,7 @@ declare const __propDef: {
 export type ControlsProps = typeof __propDef.props;
 export type ControlsEvents = typeof __propDef.events;
 export type ControlsSlots = typeof __propDef.slots;
-/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/3-Controls) for more details. */
+/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Controls) for more details. */
 export default class Controls extends SvelteComponentTyped<ControlsProps, ControlsEvents, ControlsSlots> {
 }
 export {};

package/components/block/Instance.svelte

@@ -7,6 +7,14 @@
         overflow: hidden;
     }
 
+    .instance.scale {
+        transition: transform 350ms;
+    }
+
+    .instance.scale:hover {
+        transform: scale(1.015);
+    }
+
     .cside {
         display: grid;
         grid-template-columns: 1fr 550px;
@@ -75,6 +83,7 @@ $:
   expanded = $controls.length > 0 && !$controlsState.hide;
 export let defaults = void 0;
 export let noreset = false;
+export let scale = false;
 let key = false;
 beforeUpdate(() => key = !key);
 const resolveArgs = resolve;
@@ -87,6 +96,7 @@ $:
 </script>
 <div
     class="instance"
+    class:scale
     class:cside={expanded && "right" === $controlsState.position}
     use:cquery={{
         class: "cside",

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

@@ -3,6 +3,7 @@ declare class __sveltets_Render<Args> {
     props(): {
         defaults?: Args | undefined;
         noreset?: boolean | undefined;
+        scale?: boolean | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/components/block/Params.svelte

@@ -17,5 +17,5 @@ $:
 </script>
 <!--
     @component
-    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Template/1-Params) for more details.
+    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/2-Template/1-Params) for more details.
 -->

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { type ValueType } from "./context";
+import type { ValueType } from "./types";
 declare const __propDef: {
     props: {
         tag?: string | undefined;
@@ -13,7 +13,7 @@ declare const __propDef: {
 export type ParamsProps = typeof __propDef.props;
 export type ParamsEvents = typeof __propDef.events;
 export type ParamsSlots = typeof __propDef.slots;
-/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Template/1-Params) for more details. */
+/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/2-Template/1-Params) for more details. */
 export default class Params extends SvelteComponentTyped<ParamsProps, ParamsEvents, ParamsSlots> {
 }
 export {};

package/components/block/Template.svelte

@@ -9,6 +9,7 @@ const orientation = getOrientation();
 export let defaults = void 0;
 export let noreset = false;
 export let columns = false;
+export let scale = false;
 $:
   $defaultsStore = defaults ?? {};
 $:
@@ -20,10 +21,16 @@ const cast = (t) => t;
 </script>
 <!--
     @component
-    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Template) for more details.
+    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/2-Template) for more details.
 -->
 {#each $params as param (param.id)}
-    <Instance defaults={resolveArgs($defaultsStore, param.values)} {noreset} let:key let:props>
+    <Instance
+        defaults={resolveArgs($defaultsStore, param.values)}
+        {noreset}
+        {scale}
+        let:key
+        let:props
+    >
         <slot id={param.id} tag={param.tag} props={cast(props)} {key} />
     </Instance>
 {/each}

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

@@ -4,6 +4,7 @@ declare class __sveltets_Render<Args> {
         defaults?: Args | undefined;
         noreset?: boolean | undefined;
         columns?: boolean | undefined;
+        scale?: boolean | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
@@ -20,7 +21,7 @@ declare class __sveltets_Render<Args> {
 export type TemplateProps<Args> = ReturnType<__sveltets_Render<Args>['props']>;
 export type TemplateEvents<Args> = ReturnType<__sveltets_Render<Args>['events']>;
 export type TemplateSlots<Args> = ReturnType<__sveltets_Render<Args>['slots']>;
-/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Template) for more details. */
+/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/2-Template) for more details. */
 export default class Template<Args> extends SvelteComponentTyped<TemplateProps<Args>, TemplateEvents<Args>, TemplateSlots<Args>> {
 }
 export {};

package/components/block/context.d.ts

@@ -1,8 +1,6 @@
-import type { Control } from "./controls/types";
 import type { Writable } from "svelte/store";
-export type ValueType = undefined | boolean | number | string | ValueType[] | {
-    [key: string]: ValueType;
-};
+import type { Control } from "./controls/types";
+import type { ValueType } from "./types";
 export type Params = {
     id: number;
     tag: string;

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ValueType } from "../types";
 import type { Control } from "./types";
-import type { ValueType } from "../context";
 declare const __propDef: {
     props: {
         infos: Control[];

package/components/block/controls/Object.svelte

@@ -1,19 +1,21 @@
 
 <script>import Component from "./Component.svelte";
 import Header from "./misc/GroupHeader.svelte";
-import { getObjectDefaults } from "./misc/defaulter";
+import { getDefault } from "./misc/defaulter";
 export let value;
 export let info;
 export let depth;
 export let disabled = false;
-let ivalue = value ?? getObjectDefaults(info);
+let ivalue = value ?? getDefault(info);
 let enabled = value !== void 0;
 $:
   value = !disabled && enabled ? ivalue : void 0;
+$:
+  values = info.values;
 </script>
 <Header name={info.name} bind:checked={enabled} {depth} {disabled} />
 {#if enabled && !disabled}
-    {#each info.values as info, i (i)}
+    {#each values as info, i (i)}
         <Component
             {info}
             bind:value={ivalue[info.name]}

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ValueType } from "../types";
 import type { ControlObject } from "./types";
-import type { ValueType } from "../context";
 declare const __propDef: {
     props: {
         value: Record<string, ValueType> | undefined;

package/components/block/controls/Tuple.svelte

@@ -1,19 +1,21 @@
 
 <script>import Component from "./Component.svelte";
 import Header from "./misc/GroupHeader.svelte";
-import { getTupleDefaults } from "./misc/defaulter";
+import { getDefault } from "./misc/defaulter";
 export let value;
 export let info;
 export let depth;
 export let disabled = false;
-let ivalue = value ?? getTupleDefaults(info);
+let ivalue = value ?? getDefault(info);
 let enabled = value !== void 0;
 $:
   value = !disabled && enabled ? ivalue : void 0;
+$:
+  values = info.values;
 </script>
 <Header name={info.name} bind:checked={enabled} {depth} {disabled} />
 {#if enabled && !disabled}
-    {#each info.values as info, i (i)}
+    {#each values as info, i (i)}
         <Component
             info={{ ...info, name: `${i}` }}
             bind:value={ivalue[i]}

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ValueType } from "../types";
 import type { ControlTuple } from "./types";
-import type { ValueType } from "../context";
 declare const __propDef: {
     props: {
         value: ValueType[] | undefined;

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

@@ -1,5 +1,10 @@
-import type { ValueType } from "../../context";
-import type { Control, ControlTuple, ControlObject } from "../types";
-export declare const getDefault: (i: Control) => ValueType;
-export declare const getObjectDefaults: (info: ControlObject) => Record<string, ValueType>;
-export declare const getTupleDefaults: (i: ControlTuple) => ValueType[];
+import type { ValueType } from "../../types";
+import type { Control, ControlNumber, ControlRange, ControlSelect, ControlSwitch, ControlText, ControlTuple, ControlObject } from "../types";
+export declare function getDefault(i: ControlTuple): ValueType[];
+export declare function getDefault(i: ControlObject): Record<string, ValueType>;
+export declare function getDefault(i: ControlNumber): number;
+export declare function getDefault(i: ControlRange): number;
+export declare function getDefault(i: ControlSelect): string;
+export declare function getDefault(i: ControlText): string;
+export declare function getDefault(i: ControlSwitch): boolean;
+export declare function getDefault(i: Control): ValueType;

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

@@ -1,37 +1,33 @@
-export const getDefault = (i) => {
-    if ("switch" === i.type) {
-        return false;
-    }
-    if ("number" === i.type) {
-        return 0;
-    }
-    if ("range" === i.type) {
-        return i.min;
-    }
-    if ("text" === i.type) {
-        return "";
-    }
-    if ("select" === i.type) {
-        return i.values.length > 0 ? i.values[0] : "";
-    }
-    if ("tuple" === i.type) {
-        // eslint-disable-next-line no-use-before-define
-        return [...getTupleDefaults(i)];
-    }
-    if ("object" === i.type) {
-        // eslint-disable-next-line no-use-before-define
-        return getObjectDefaults(i);
-    }
-    return undefined;
-};
-export const getObjectDefaults = (info) => {
+// eslint-disable-next-line func-style
+export function getDefault(i) {
+    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 = {};
     for (const i of info.values) {
         ret[i.name] = getDefault(i);
     }
     return ret;
 };
-export const getTupleDefaults = (i) => {
+const getTupleDefaults = (i) => {
     const ret = [];
     for (const info of i.values) {
         ret.push(getDefault(info));

package/components/block/types.d.ts

@@ -0,0 +1,9 @@
+export type ValueType =
+    | undefined
+    | boolean
+    | number
+    | string
+    | ValueType[]
+    | {
+          [key: string]: ValueType;
+      };

package/components/block/utils.d.ts

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

package/components/block/utils.js

@@ -1,15 +1,12 @@
 const resolveArray = (d, p) => {
-    if (d === undefined) {
-        return undefined;
-    }
     const ret = [];
-    for (const i in d) {
+    for (let i = 0; i < d.length; ++i) {
         if (d[i] instanceof Array) {
-            ret.push(resolveArray(d[i], p[i] ?? []));
+            ret.push(resolveArray(d[i], (p[i] ?? [])));
         }
         else if (d[i] instanceof Object) {
             // eslint-disable-next-line no-use-before-define
-            ret.push(resolveObject(d[i], p[i] ?? {}));
+            ret.push(resolveObject(d[i], (p[i] ?? {})));
         }
         else {
             ret.push(p[i] ?? d[i]);
@@ -18,16 +15,13 @@ const resolveArray = (d, p) => {
     return ret;
 };
 const 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] ?? []);
+            ret[key] = resolveArray(value, (p[key] ?? []));
         }
         else if (value instanceof Object) {
-            ret[key] = resolveObject(value, p[key] ?? {});
+            ret[key] = resolveObject(value, (p[key] ?? {}));
         }
         else {
             ret[key] = p[key] ?? value;
@@ -35,6 +29,6 @@ const resolveObject = (d, p) => {
     }
     return ret;
 };
-export const resolve = (d, p) => {
-    return resolveObject(d ?? {}, p);
+export const resolve = (destination, override) => {
+    return resolveObject(destination, override);
 };

package/components/context.d.ts

@@ -2,4 +2,3 @@ import type { Writable } from "svelte/store";
 export type Theme = undefined | "light" | "dark";
 export declare const getTheme: () => Writable<boolean>;
 export declare const initTheme: () => Writable<boolean>;
-export declare const evalTheme: (parent: boolean, theme: Theme) => boolean;

package/components/context.js

@@ -1,11 +1,5 @@
 import { setContext, getContext } from "svelte";
 import { writable } from "svelte/store";
 const theme = Symbol();
-export const getTheme = () => getContext(theme);
+export const getTheme = () => getContext(theme) ?? writable(true);
 export const initTheme = () => setContext(theme, writable(true));
-export const evalTheme = (parent, theme) => {
-    if (theme === undefined) {
-        return parent;
-    }
-    return "dark" === theme;
-};

package/components/etc/NilIcon.svelte

@@ -22,7 +22,7 @@ const action = (p, options) => {
   };
 };
 const d = "M 0 -15 L 15 -15 L 15 0 L 0 0 -9 0 A 6 8 135 0 1 9 0";
-const length = tweened(0);
+const length = tweened(1);
 let out = false;
 const click = () => {
   if (0 === $length) {

package/components/etc/action.js

@@ -3,7 +3,7 @@ export const createDraggable = (offset) => {
     const position = writable(offset);
     const draggable = (div, parameter) => {
         let tm = new Date().getTime();
-        let param = parameter ?? { reset: () => 0, vertical: true, reversed: false };
+        let param = parameter;
         position.set(param.reset());
         let refPage = 0;
         const disengage = () => param.moving.set(false);
@@ -15,14 +15,14 @@ export const createDraggable = (offset) => {
         };
         const engage = (e) => {
             if (checkDoubleTap()) {
-                param?.dbltap?.();
+                param.dbltap?.();
                 disengage();
                 return;
             }
             param.moving.set(true);
             position.set(param.reset());
             refPage = param.vertical ? e.pageX : e.pageY;
-            param?.tap?.();
+            param.tap?.();
         };
         const move = (e) => {
             if (get(param.moving)) {

package/components/navigation/Nav.svelte

@@ -57,15 +57,15 @@ const apply = (paths, init, pre, next, post) => {
 const filt = (path, filter, renamer) => {
   return fuzz(path, filter) || fuzz(path.split("/").map(renamer).join("/"), filter);
 };
-const populate = (filter, info, renamer) => apply(
-  filter.length > 0 ? info.filter((path) => filt(path, filter, renamer)) : info,
-  () => ({ url: null, sub: {} }),
-  (t) => t,
-  (t) => t.sub,
-  (t, p) => {
-    t.url = p;
-  }
-);
+const populate = (filter, info, renamer) => {
+  return apply(
+    filter.length > 0 ? info.filter((path) => filt(path, filter, renamer)) : info,
+    () => ({ url: null, sub: {} }),
+    (t) => t,
+    (t) => t.sub,
+    (t, p) => void (t.url = p)
+  );
+};
 </script>
 <script>import Tree from "./Tree.svelte";
 export let info;
@@ -97,7 +97,7 @@ $:
 </script>
 <div class="nav">
     <div class="search-bar">
-        <input bind:value={filter} type="text" />
+        <input bind:value={filter} type="text" placeholder="Search for page..." />
     </div>
     <div class="tree">
         <Tree

package/components/navigation/Node.svelte

@@ -74,7 +74,7 @@ const click = (link) => {
         {style}
         class:selected={selected === value.url}
     >
-        <div class="icon" class:expanded={hasChildren && states.expanded}>
+        <div class="icon" class:expanded={hasChildren && (expand || states.expanded)}>
             <div>{Object.keys(value.sub).length > 0 ? ">" : "-"}</div>
         </div>
         <span>{renamer(key)}</span>

package/components/navigation/types.d.ts

@@ -1,12 +1,12 @@
-export interface Tree {
+export type Tree = {
     url: string | null;
     sub: Record<string, Tree>;
-}
+};
 
-export interface States {
+export type States = {
     expanded: boolean;
     sub: Record<string, States>;
-}
+};
 
 export type Sorter = (l: string, r: string) => 1 | 0 | -1;
 export type Renamer = (s: string) => string;

package/components/navigation/utils/sorter.js

@@ -35,5 +35,5 @@ export const sorter = (l, r) => {
     if (null == rmatch) {
         return -1;
     }
-    return sorterT(parseInt(lmatch[1]), parseInt(rmatch[1]));
+    return sorterT(parseInt(lmatch[1]), parseInt(rmatch[1])) || sorterT(lmatch[2], rmatch[2]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.38",
+  "version": "0.2.40",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
@@ -10,11 +10,14 @@
     "@sveltejs/adapter-vercel": "^1.0.0",
     "@sveltejs/kit": "^1.0.1",
     "@sveltejs/package": "^1.0.1",
+    "@vitest/coverage-c8": "^0.26.3",
     "mdsvex": "^0.10.6",
+    "remark-admonitions": "^1.2.1",
     "svelte-check": "^2.10.3",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
-    "vite": "^4.0.3"
+    "vite": "^4.0.3",
+    "vitest": "^0.26.3"
   },
   "peerDependencies": {
     "svelte": "^3.55.0"

package/sveltekit/index.d.ts

@@ -12,7 +12,7 @@ type Routes = {
      * Callback to navigate to other pages
      * @param e - event that contains detail about the target url
      */
-    navigate: (e: CustomEvent<string>) => void;
+    navigate: (e: CustomEvent<string>) => Promise<void>;
 };
 /**
  * Dedicated helper method to be used for sveltekit