@nil-/doc 0.2.50 → 0.2.52

package/components/layout/Layout.svelte

@@ -0,0 +1,124 @@
+<script context="module">const defaultSorter = (l, r) => l.localeCompare(r);
+const defaultRenamer = (s) => s;
+</script>
+
+<script>import Base from "../Base.svelte";
+import Container from "./Container.svelte";
+import Content from "./Content.svelte";
+import Scrollable from "./Scrollable.svelte";
+import VerticalPanel from "./VerticalPanel.svelte";
+import Nav from "../navigation/Nav.svelte";
+import Icon from "./icons/Icon.svelte";
+import { getTheme, initTheme } from "../context";
+import ThemeIcon from "./icons/Theme.svelte";
+export let data;
+export let current = null;
+export let sorter = null;
+export let renamer = null;
+export let theme = void 0;
+export let offset = 250;
+const parentTheme = getTheme();
+const dark = initTheme();
+$:
+  $dark = theme === void 0 ? $parentTheme : "dark" === theme;
+const toggle = () => {
+  if (theme !== void 0) {
+    theme = $dark ? "light" : "dark";
+  } else {
+    $dark = !$dark;
+  }
+};
+</script>
+
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/1-Layout) for more details.
+-->
+
+<Base dark={$dark} fill>
+    <div class="fill layout">
+        <div class="top">
+            <div class="title">
+                <slot name="title" />
+            </div>
+            <slot name="title-misc">
+                <Icon on:click={toggle}>
+                    <ThemeIcon {theme} />
+                </Icon>
+            </slot>
+        </div>
+        <Container bind:offset vertical b>
+            <svelte:fragment slot="A">
+                <Scrollable>
+                    <VerticalPanel>
+                        <Nav
+                            info={data}
+                            selected={current ?? ""}
+                            sorter={sorter ?? defaultSorter}
+                            renamer={renamer ?? defaultRenamer}
+                            on:navigate
+                        />
+                    </VerticalPanel>
+                </Scrollable>
+            </svelte:fragment>
+            <svelte:fragment slot="B">
+                <Scrollable>
+                    <Content>
+                        {#key current}
+                            <slot />
+                        {/key}
+                    </Content>
+                </Scrollable>
+            </svelte:fragment>
+        </Container>
+    </div>
+</Base>
+
+<style>
+    .fill {
+        width: 100%;
+        height: 100%;
+    }
+
+    .layout {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: minmax(2.5rem, auto) 1fr;
+    }
+
+    .top {
+        overflow: hidden;
+        font-size: 1rem;
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: 2.5rem;
+        grid-template-columns: 1fr;
+        align-items: center;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+        border-bottom-width: 1px;
+        border-bottom-style: solid;
+        user-select: none;
+    }
+
+    .title {
+        display: grid;
+        grid-auto-flow: column;
+        align-items: center;
+        justify-content: left;
+        gap: 0.25rem;
+    }
+
+    .layout {
+        color-scheme: var(--i-nil-doc-color-scheme);
+        color: var(--i-nil-doc-color);
+        background-color: var(--i-nil-doc-bg-color);
+        transition: color var(--i-nil-doc-transition-time),
+            background-color var(--i-nil-doc-transition-time);
+    }
+
+    .layout > .top {
+        transition: border-bottom-color var(--i-nil-doc-transition-time);
+        border-bottom-color: var(--i-nil-doc-container-p);
+    }
+</style>

package/components/{Layout.svelte.d.ts → layout/Layout.svelte.d.ts}

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Sorter, Renamer } from "./navigation/types";
-import { type Theme } from "./context";
+import type { Sorter, Renamer } from "../navigation/types";
+import { type Theme } from "../context";
 declare const __propDef: {
     props: {
         data: string[];
@@ -8,6 +8,7 @@ declare const __propDef: {
         sorter?: Sorter | null | undefined;
         renamer?: Renamer | null | undefined;
         theme?: Theme;
+        offset?: number | undefined;
     };
     events: {
         navigate: CustomEvent<any>;

package/components/layout/Scrollable.svelte

@@ -0,0 +1,20 @@
+<div>
+    <slot />
+</div>
+
+<style>
+    /* scrollable */
+    div {
+        width: 100%;
+        height: 100%;
+        overflow: scroll;
+        /* Firefox */
+        scrollbar-width: none;
+        /* IE and Edge */
+        -ms-overflow-style: none;
+    }
+
+    div::-webkit-scrollbar {
+        display: none;
+    }
+</style>

package/components/layout/Scrollable.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ScrollableProps */
+/** @typedef {typeof __propDef.events}  ScrollableEvents */
+/** @typedef {typeof __propDef.slots}  ScrollableSlots */
+export default class Scrollable extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ScrollableProps = typeof __propDef.props;
+export type ScrollableEvents = typeof __propDef.events;
+export type ScrollableSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/layout/VerticalPanel.svelte

@@ -0,0 +1,12 @@
+<div>
+    <slot />
+</div>
+
+<style>
+    div {
+        width: 100%;
+        box-sizing: border-box;
+        min-width: min-content;
+        display: inline-block;
+    }
+</style>

package/components/layout/VerticalPanel.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  VerticalPanelProps */
+/** @typedef {typeof __propDef.events}  VerticalPanelEvents */
+/** @typedef {typeof __propDef.slots}  VerticalPanelSlots */
+export default class VerticalPanel extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type VerticalPanelProps = typeof __propDef.props;
+export type VerticalPanelEvents = typeof __propDef.events;
+export type VerticalPanelSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/{title → layout/icons}/Icon.svelte

@@ -7,10 +7,10 @@
 
 <style>
     div {
-        width: 40px;
-        height: 40px;
+        width: 2.5rem;
+        height: 2.5rem;
         cursor: pointer;
-        transition: transform 350ms;
+        transition: transform var(--i-nil-doc-transition-time);
     }
 
     div:hover {

package/components/{icons/NilDoc.svelte → layout/icons/Nil.svelte}

@@ -21,10 +21,10 @@ $:
 
 <svg viewBox="-35 -35 70 70" on:pointerenter={trigger}>
     <g transform="rotate(45 0 0)">
-        <path {d} use:action={$length} />
+        <path {d} use:action={$length} pathLength={100} />
     </g>
     <g transform="rotate(225 0 0)">
-        <path {d} use:action={$length} />
+        <path {d} use:action={$length} pathLength={100} />
     </g>
 </svg>
 
@@ -32,7 +32,7 @@ $:
     svg {
         width: 100%;
         height: 100%;
-        stroke-width: 4;
+        stroke-width: 3;
         stroke-linejoin: miter;
         stroke: currentColor;
         fill: transparent;

package/components/layout/icons/Nil.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NilProps = typeof __propDef.props;
+export type NilEvents = typeof __propDef.events;
+export type NilSlots = typeof __propDef.slots;
+export default class Nil extends SvelteComponentTyped<NilProps, NilEvents, NilSlots> {
+}
+export {};

package/components/{icons → layout/icons}/Theme.svelte

@@ -1,35 +1,17 @@
 <script context="module">let indexer = 0;
-const vlight = {
-  rotate: 40,
-  mcy: -8,
-  cr: 10,
-  v: 0
-};
-const vdark = {
-  rotate: 180,
-  mcy: -24,
-  cr: 5,
-  v: 1
-};
 </script>
 
-<script>import { tweened } from "svelte/motion";
-export let theme = "dark";
-$:
-  dark = theme === "dark";
-const values = tweened(dark ? vdark : vlight);
-$:
-  $values = dark ? vdark : vlight;
+<script>export let theme = "dark";
 const index = indexer++;
 </script>
 
-<svg class:dark viewBox="-25 -25 50 50" transform={`rotate(${$values.rotate})`}>
+<svg viewBox="-25 -25 50 50" class:dark={theme === "light"}>
     <mask id={`nil_doc_theme_icon_${index}`}>
         <rect x="-25" y="-25" fill="white" />
-        <circle cy={$values.mcy} r="11" />
+        <circle r="11" fill="black" stroke="black" />
     </mask>
-    <circle r={$values.cr} mask={`url(#nil_doc_theme_icon_${index})`} />
-    <g style={`opacity: ${$values.v}`}>
+    <circle mask={`url(#nil_doc_theme_icon_${index})`} />
+    <g>
         <g>
             <line x1="0" y1="9" x2="0" y2="11" />
             <line x1="9" y1="0" x2="11" y2="0" />
@@ -49,11 +31,6 @@ const index = indexer++;
     svg {
         fill: currentColor;
         stroke: currentColor;
-
-        -webkit-tap-highlight-color: transparent;
-        -moz-tap-highlight-color: transparent;
-        -o-tap-highlight-color: transparent;
-        /* tap-highlight-color: transparent; */
     }
 
     svg,
@@ -67,4 +44,40 @@ const index = indexer++;
         stroke-linecap: round;
         stroke-linejoin: round;
     }
+
+    svg {
+        transition: transform 350ms;
+        transform: rotate(40deg);
+    }
+
+    svg > g {
+        transition: opacity 350ms;
+        opacity: 0;
+    }
+
+    svg > mask > circle {
+        transition: cy 350ms;
+        cy: -8px;
+    }
+
+    svg > circle {
+        transition: r 350ms;
+        r: 10px;
+    }
+
+    svg.dark {
+        transform: rotate(180deg);
+    }
+
+    svg.dark > g {
+        opacity: 1;
+    }
+
+    svg.dark > mask > circle {
+        cy: -24px;
+    }
+
+    svg.dark > circle {
+        r: 5px;
+    }
 </style>

package/components/{icons → layout/icons}/Theme.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Theme } from "../context";
+import type { Theme } from "../../context";
 declare const __propDef: {
     props: {
         theme?: Theme;

package/components/navigation/Nav.svelte

@@ -88,28 +88,24 @@ $:
     .nav {
         width: 100%;
         height: 100%;
-        min-width: 200px;
+        min-width: 12.5rem;
         display: flex;
         flex-direction: column;
     }
 
     .search-bar {
-        padding: 5px;
+        padding: 0.25rem;
     }
 
     input {
-        height: 30px;
+        font-size: 0.75rem;
+        height: 1.75rem;
         width: 100%;
-        padding: 0px 10px;
+        padding: 0px 0.5rem;
+        box-sizing: border-box;
     }
 
     input:focus {
         outline: none;
     }
-
-    * {
-        box-sizing: border-box;
-        padding: 0px;
-        margin: 0px;
-    }
 </style>

package/components/navigation/Node.svelte

@@ -11,12 +11,15 @@ export let sorter;
 export let renamer;
 const dispatch = createEventDispatcher();
 $:
-  style = `padding-left: ${10 + depth * 10}px;`;
+  style = `padding-left: ${0.5 + depth}rem; padding-right: 0.5rem`;
 $:
   hasChildren = Object.keys(value.sub).length > 0;
 const click = (link) => {
   if (link != null && selected !== link) {
     dispatch("navigate", link);
+    if (hasChildren && !states.expanded) {
+      states.expanded = true;
+    }
   } else if (hasChildren) {
     states.expanded = !states.expanded;
   }
@@ -30,6 +33,7 @@ const click = (link) => {
         on:keypress={null}
         {style}
         class:selected={selected === value.url}
+        class:paged={value.url != null}
     >
         <div class="icon" class:expanded={hasChildren && (expand || states.expanded)}>
             <div>{Object.keys(value.sub).length > 0 ? ">" : "-"}</div>
@@ -68,29 +72,33 @@ const click = (link) => {
     }
 
     .header {
-        height: 30px;
+        height: 1.75rem;
         display: grid;
-        grid-template-columns: 15px 1fr;
+        grid-template-columns: 1rem 1fr;
         align-items: center;
         cursor: pointer;
-        gap: 5px;
-        box-sizing: border-box;
+        gap: 0.25rem;
+        white-space: nowrap;
+        padding-right: 0.5rem;
     }
 
     .header:hover {
-        background-color: hsla(203, 98%, 50%, 0.07);
+        background-color: var(--i-nil-doc-nav-hovered);
+    }
+
+    .header.paged:hover {
+        background-color: var(--i-nil-doc-nav-page-hovered);
     }
 
     .header.selected {
-        background-color: hsla(203, 98%, 50%, 0.822);
-        color: black;
+        background-color: var(--i-nil-doc-nav-selected) !important;
     }
 
     .icon {
         justify-content: center;
-        height: 15px;
-        width: 15px;
-        transition: transform 350ms;
+        height: 1rem;
+        width: 1rem;
+        transition: transform var(--i-nil-doc-transition-time);
     }
 
     .icon.expanded {

package/index.d.ts

@@ -1,12 +1,12 @@
 export { renamer } from "./components/navigation/utils/renamer";
 export { sorter } from "./components/navigation/utils/sorter";
 export type { Prop, Event, PropType, Detailed, Flattened, Unionized } from "./components/block/controls/types";
-export { default as Layout } from "./components/Layout.svelte";
+export { default as Layout } from "./components/layout/Layout.svelte";
 export { default as Instance } from "./components/block/Instance.svelte";
 export { default as Block } from "./components/block/Block.svelte";
 export { default as Template } from "./components/block/Template.svelte";
 export { default as Controls } from "./components/block/Controls.svelte";
 export { default as Params } from "./components/block/Params.svelte";
-export { default as Icon } from "./components/title/Icon.svelte";
-export { default as NilDoc } from "./components/icons/NilDoc.svelte";
-export { default as Theme } from "./components/icons/Theme.svelte";
+export { default as Icon } from "./components/layout/icons/Icon.svelte";
+export { default as Nil } from "./components/layout/icons/Nil.svelte";
+export { default as Theme } from "./components/layout/icons/Theme.svelte";

package/index.js

@@ -1,11 +1,11 @@
 export { renamer } from "./components/navigation/utils/renamer";
 export { sorter } from "./components/navigation/utils/sorter";
-export { default as Layout } from "./components/Layout.svelte";
+export { default as Layout } from "./components/layout/Layout.svelte";
 export { default as Instance } from "./components/block/Instance.svelte";
 export { default as Block } from "./components/block/Block.svelte";
 export { default as Template } from "./components/block/Template.svelte";
 export { default as Controls } from "./components/block/Controls.svelte";
 export { default as Params } from "./components/block/Params.svelte";
-export { default as Icon } from "./components/title/Icon.svelte";
-export { default as NilDoc } from "./components/icons/NilDoc.svelte";
-export { default as Theme } from "./components/icons/Theme.svelte";
+export { default as Icon } from "./components/layout/icons/Icon.svelte";
+export { default as Nil } from "./components/layout/icons/Nil.svelte";
+export { default as Theme } from "./components/layout/icons/Theme.svelte";

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.50",
+  "version": "0.2.52",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
   },
   "license": "ISC",
   "devDependencies": {
-    "@sveltejs/adapter-vercel": "^1.0.5",
-    "@sveltejs/kit": "^1.3.2",
+    "@sveltejs/adapter-vercel": "^1.0.6",
+    "@sveltejs/kit": "^1.5.5",
     "@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.5.0",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.1",
     "vitest": "^0.26.3"
   },
   "peerDependencies": {
@@ -31,6 +31,9 @@
     "component"
   ],
   "type": "module",
+  "dependencies": {
+    "vanilla-picker": "^2.12.1"
+  },
   "exports": {
     "./package.json": "./package.json",
     ".": "./index.js",

package/sveltekit/index.d.ts

@@ -19,10 +19,16 @@ type Settings = {
      * Default is "dark"
      */
     theme: Writable<Exclude<Theme, undefined>>;
+    /**
+     * A store that is responsible in keeping the offset in localStorage
+     * offset is the width of the navigation panel.
+     * Default is 250px
+     */
+    offset: Writable<number>;
 };
 /**
  * Dedicated helper method to be used for sveltekit
- * @param detail - vite's `import.meta.glob(..., { eager: true })`
+ * @param detail - vite's `import.meta.glob(...)`
  * @param prefix - only use when layout is not in the root route
  * @returns Settings
  */

package/sveltekit/index.js

@@ -13,13 +13,15 @@ const routeIsDynamic = /.*\[.*\].*/;
 const isRouteDynamic = (p) => null == routeIsDynamic.exec(p);
 /**
  * Dedicated helper method to be used for sveltekit
- * @param detail - vite's `import.meta.glob(..., { eager: true })`
+ * @param detail - vite's `import.meta.glob(...)`
  * @param prefix - only use when layout is not in the root route
  * @returns Settings
  */
 export const sveltekit = (detail, prefix = null) => {
-    const key = "@nil-/doc/theme";
-    const initialValue = browser && "light" === localStorage.getItem(key) ? "light" : "dark";
+    const keyTheme = "@nil-/doc/theme";
+    const theme = browser && "light" === localStorage.getItem(keyTheme) ? "light" : "dark";
+    const keyOffset = "@nil-/doc/offset";
+    const offset = browser ? parseFloat(localStorage.getItem(keyOffset) ?? "250") : 250;
     const result = {
         data: Object.keys(detail)
             .map(toRoute)
@@ -36,8 +38,10 @@ export const sveltekit = (detail, prefix = null) => {
             return null;
         }),
         navigate: prefix ? (e) => goto(`${prefix}${e.detail}`) : (e) => goto(e.detail),
-        theme: writable(initialValue)
+        theme: writable(theme),
+        offset: writable(offset)
     };
-    browser && result.theme.subscribe((v) => localStorage.setItem(key, v));
+    browser && result.theme.subscribe((v) => localStorage.setItem(keyTheme, v));
+    browser && result.offset.subscribe((v) => localStorage.setItem(keyOffset, `${v}`));
     return result;
 };