@nil-/doc 0.3.2 → 0.3.4

package/components/block/Block.svelte

@@ -1,19 +1,15 @@
 <script>import { initParams, initDefaults, initControls, initOrientation } from "./context";
 import Base from "../Base.svelte";
-import { getTheme, initTheme } from "../context";
+import { getTheme } from "../context";
 initParams();
 initDefaults();
 initControls();
 const columns = initOrientation();
-export let theme = void 0;
-const parentTheme = getTheme();
-const dark = initTheme();
-$:
-  $dark = theme === void 0 ? $parentTheme : "dark" === theme;
+const dark = getTheme();
 </script>
 
 <!--
-    @component
+    @component3-Block
     See [documentation](https://mono-doc.vercel.app/3-Components/2-Block) for more details.
 -->
 

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

@@ -1,9 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import { type Theme } from "../context";
 declare const __propDef: {
-    props: {
-        theme?: Theme;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -14,7 +11,10 @@ declare const __propDef: {
 export type BlockProps = typeof __propDef.props;
 export type BlockEvents = typeof __propDef.events;
 export type BlockSlots = typeof __propDef.slots;
-/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block) for more details. */
+/**
+ * 3-Block
+ * See [documentation](https://mono-doc.vercel.app/3-Components/2-Block) for more details.
+ */
 export default class Block extends SvelteComponentTyped<BlockProps, BlockEvents, BlockSlots> {
 }
 export {};

package/components/block/Controls.svelte

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

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

@@ -13,7 +13,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/2-Controls) for more details. */
+/** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/2-Controls) for more details. */
 export default class Controls extends SvelteComponentTyped<ControlsProps, ControlsEvents, ControlsSlots> {
 }
 export {};

package/components/block/Instance.svelte

@@ -64,7 +64,7 @@ const populate = (ext) => {
 
 <!--
     @component
-    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/1-Instance) for more details.
+    See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/1-Instance) for more details.
 -->
 
 <div

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

@@ -18,7 +18,7 @@ declare class __sveltets_Render<PropArgs> {
 export type InstanceProps<PropArgs> = ReturnType<__sveltets_Render<PropArgs>['props']>;
 export type InstanceEvents<PropArgs> = ReturnType<__sveltets_Render<PropArgs>['events']>;
 export type InstanceSlots<PropArgs> = ReturnType<__sveltets_Render<PropArgs>['slots']>;
-/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/1-Instance) for more details. */
+/** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/1-Instance) for more details. */
 export default class Instance<PropArgs> extends SvelteComponentTyped<InstanceProps<PropArgs>, InstanceEvents<PropArgs>, InstanceSlots<PropArgs>> {
 }
 export {};

package/components/block/Params.svelte

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

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

@@ -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/1-Content/2-Template/1-Params) for more details. */
+/** See [documentation](https://mono-doc.vercel.app/3-Components/3-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

@@ -20,7 +20,7 @@ const cast = (t) => t;
 
 <!--
     @component
-    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/2-Template) for more details.
+    See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template) for more details.
 -->
 
 {#each $params as param (param.id)}

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

@@ -21,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/1-Content/2-Template) for more details. */
+/** See [documentation](https://mono-doc.vercel.app/3-Components/3-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.js

@@ -15,6 +15,6 @@ export const { init: initDefaults, get: getDefaults } = create(() => ({}));
 // prettier-ignore
 export const { init: initOrientation, get: getOrientation } = create(() => false);
 // prettier-ignore
-export const { init: initControlInfo, get: getControlInfo } = create(() => writable());
+export const { init: initControlInfo, get: getControlInfo } = create(() => null);
 // prettier-ignore
-export const { init: initControlValue, get: getControlValue } = create(() => writable());
+export const { init: initControlValue, get: getControlValue } = create(() => null);

package/components/context.d.ts

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

package/components/layout/DocLayout.svelte

@@ -0,0 +1,34 @@
+<script context="module"></script>
+
+<script>import Layout from "./Layout.svelte";
+import ThemeToggle from "./ThemeToggle.svelte";
+export let settings;
+export let sorter = void 0;
+export let renamer = void 0;
+let { data, current, theme, offset, panel, navigate } = settings;
+$: {
+  data = settings.data;
+  current = settings.current;
+  theme = settings.theme;
+  offset = settings.offset;
+  panel = settings.panel;
+  navigate = settings.navigate;
+}
+</script>
+
+<Layout
+    {data}
+    {sorter}
+    {renamer}
+    current={$current}
+    bind:theme={$theme}
+    bind:offset={$offset}
+    bind:panel={$panel}
+    on:navigate={navigate}
+>
+    <slot slot="title" name="title" />
+    <slot slot="title-misc" name="title-misc">
+        <ThemeToggle bind:theme={$theme} />
+    </slot>
+    <slot />
+</Layout>

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

@@ -0,0 +1,38 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Readable, Writable } from "svelte/store";
+type Settings = {
+    data: string[];
+    current: Readable<string | null>;
+    offset: Writable<number>;
+    theme: Writable<"dark" | "light">;
+    panel: Writable<"bottom" | "right">;
+    navigate: (e: {
+        detail: string;
+    }) => Promise<void>;
+};
+import type { Renamer, Sorter } from "../navigation/types";
+declare const __propDef: {
+    props: {
+        settings: Settings;
+        sorter?: Sorter | undefined;
+        renamer?: Renamer | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        title: {
+            slot: string;
+        };
+        'title-misc': {
+            slot: string;
+        };
+        default: {};
+    };
+};
+export type DocLayoutProps = typeof __propDef.props;
+export type DocLayoutEvents = typeof __propDef.events;
+export type DocLayoutSlots = typeof __propDef.slots;
+export default class DocLayout extends SvelteComponentTyped<DocLayoutProps, DocLayoutEvents, DocLayoutSlots> {
+}
+export {};

package/components/layout/Layout.svelte

@@ -9,13 +9,12 @@ import Controls from "../block/controls/Controls.svelte";
 import Scrollable from "./Scrollable.svelte";
 import VerticalPanel from "./VerticalPanel.svelte";
 import Nav from "../navigation/Nav.svelte";
-import Icon from "./icons/Icon.svelte";
+import ThemeToggle from "./ThemeToggle.svelte";
 import {
   initControlInfo,
   initControlValue
 } from "../block/context";
 import { getTheme, initTheme } from "../context";
-import ThemeIcon from "./icons/Theme.svelte";
 import { get } from "svelte/store";
 export let data;
 export let current = null;
@@ -35,29 +34,21 @@ $:
 const panelChange = (info) => {
   if (info != null) {
     const i = get(info);
-    if (i != null && panelOffset == 4) {
+    if (panelOffset == 4) {
       if (i.props.length > 0) {
         panelOffset = 250;
         mode = "props";
-        return;
       } else if (i.events.length > 0) {
         panelOffset = 250;
         mode = "events";
-        return;
       }
     }
+    return;
   }
   panelOffset = 4;
 };
 $:
   panelChange($activeControl);
-const toggle = () => {
-  if (theme !== void 0) {
-    theme = $dark ? "light" : "dark";
-  } else {
-    $dark = !$dark;
-  }
-};
 </script>
 
 <!--
@@ -72,9 +63,7 @@ const toggle = () => {
                 <slot name="title" />
             </div>
             <slot name="title-misc">
-                <Icon on:click={toggle}>
-                    <ThemeIcon {theme} />
-                </Icon>
+                <ThemeToggle bind:theme />
             </slot>
         </div>
         <Container bind:offset vertical b>

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         current?: string | null | undefined;
         sorter?: Sorter | null | undefined;
         renamer?: Renamer | null | undefined;
-        theme?: Theme;
+        theme?: Theme | undefined;
         offset?: number | undefined;
         panel?: "right" | "bottom" | undefined;
     };

package/components/layout/ThemeToggle.svelte

@@ -0,0 +1,17 @@
+<script>import { getTheme } from "../context";
+import Icon from "./icons/Icon.svelte";
+import ThemeIcon from "./icons/Theme.svelte";
+export let theme;
+const dark = getTheme();
+const toggle = () => {
+  if (theme !== void 0) {
+    theme = $dark ? "light" : "dark";
+  } else {
+    $dark = !$dark;
+  }
+};
+</script>
+
+<Icon on:click={toggle}>
+    <ThemeIcon dark={theme === undefined ? $dark : theme === "dark"} />
+</Icon>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import { type Theme } from "../context";
+declare const __propDef: {
+    props: {
+        theme: Theme | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThemeToggleProps = typeof __propDef.props;
+export type ThemeToggleEvents = typeof __propDef.events;
+export type ThemeToggleSlots = typeof __propDef.slots;
+export default class ThemeToggle extends SvelteComponentTyped<ThemeToggleProps, ThemeToggleEvents, ThemeToggleSlots> {
+}
+export {};

package/components/layout/icons/Theme.svelte

@@ -1,10 +1,8 @@
 <script context="module">let indexer = 0;
 </script>
 
-<script>export let theme = "dark";
+<script>export let dark = true;
 const index = indexer++;
-$:
-  dark = theme === "dark";
 </script>
 
 <svg viewBox="-25 -25 50 50" style:transform={dark ? "rotate(40deg)" : "rotate(180deg)"}>

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

@@ -1,8 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Theme } from "../../context";
 declare const __propDef: {
     props: {
-        theme?: Theme;
+        dark?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/index.d.ts

@@ -2,6 +2,7 @@ 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/Layout.svelte";
+export { default as DocLayout } from "./components/layout/DocLayout.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";

package/index.js

@@ -1,6 +1,7 @@
 export { renamer } from "./components/navigation/utils/renamer";
 export { sorter } from "./components/navigation/utils/sorter";
 export { default as Layout } from "./components/layout/Layout.svelte";
+export { default as DocLayout } from "./components/layout/DocLayout.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";

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@nil-/doc",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
   },
   "license": "ISC",
   "peerDependencies": {
-    "@sveltejs/kit": "^1.15.0",
     "svelte": "^3.58.0"
   },
   "keywords": [
@@ -19,11 +18,10 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "default": "./index.js",
+      "types": "./index.d.ts",
       "svelte": "./index.js",
-      "types": "./index.d.ts"
-    },
-    "./sveltekit": "./sveltekit/index.js"
+      "default": "./index.js"
+    }
   },
   "dependencies": {
     "vanilla-picker": "^2.12.1"

package/sveltekit/index.d.ts

@@ -1,37 +0,0 @@
-import { type Readable, type Writable } from "svelte/store";
-import type { Theme } from "../components/context";
-type Settings = {
-    /**
-     * List of routes
-     */
-    data: string[];
-    /**
-     * Current route but removes unneeded group layout in the route
-     */
-    current: Readable<string | null>;
-    /**
-     * Callback to navigate to other pages
-     * @param e - event that contains detail about the target url
-     */
-    navigate: (e: CustomEvent<string>) => Promise<void>;
-    /**
-     * A store that is responsible in keeping the theme in localStorage
-     * 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>;
-    panel: Writable<"bottom" | "right">;
-};
-/**
- * Dedicated helper method to be used for sveltekit
- * @param detail - vite's `import.meta.glob(...)`
- * @param prefix - only use when layout is not in the root route
- * @returns Settings
- */
-export declare const sveltekit: (detail: Record<string, unknown>, prefix?: string | null) => Settings;
-export {};

package/sveltekit/index.js

@@ -1,51 +0,0 @@
-import { derived, writable } from "svelte/store";
-import { page } from "$app/stores";
-import { goto } from "$app/navigation";
-import { browser } from "$app/environment";
-const toRoute = (p) => p.substring(1, p.lastIndexOf("/"));
-const routeHasLayoutGroup = /\(.*\)/;
-const collapseLayout = (p) => p
-    .split("/")
-    .filter((p) => null == routeHasLayoutGroup.exec(p))
-    .join("/");
-const isNotRoot = (p) => p !== "/";
-const routeIsDynamic = /.*\[.*\].*/;
-const isRouteDynamic = (p) => null == routeIsDynamic.exec(p);
-/**
- * Dedicated helper method to be used for sveltekit
- * @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 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 keyPos = "@nil-/doc/panel";
-    const panelPos = browser ? localStorage.getItem(keyPos) ?? "bottom" : "bottom";
-    const result = {
-        data: Object.keys(detail)
-            .map(toRoute)
-            .map(collapseLayout)
-            .filter(isNotRoot)
-            .filter(isRouteDynamic),
-        current: derived(page, ($page) => {
-            if ($page.route.id) {
-                if (prefix) {
-                    return collapseLayout($page.route.id.substring(prefix.length));
-                }
-                return collapseLayout($page.route.id);
-            }
-            return null;
-        }),
-        navigate: prefix ? (e) => goto(`${prefix}${e.detail}`) : (e) => goto(e.detail),
-        theme: writable(theme),
-        offset: writable(offset),
-        panel: writable(panelPos)
-    };
-    browser && result.theme.subscribe((v) => localStorage.setItem(keyTheme, v));
-    browser && result.offset.subscribe((v) => localStorage.setItem(keyOffset, `${v}`));
-    browser && result.panel.subscribe((v) => localStorage.setItem(keyPos, v));
-    return result;
-};