@nil-/doc 0.2.51 → 0.2.53

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.51",
+  "version": "0.2.53",
   "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;
 };

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

@@ -1,57 +0,0 @@
-<script>import { getTheme } from "../../../../context";
-const dark = getTheme();
-</script>
-
-<!--
-    <div> this component
-        <div> Header
-            <div></div>
-            <div></div>
-        </div>
-        <div> Controls
-            <div></div>
-            <div></div>
-        </div>
-        ...
-    </div>
--->
-<div class:dark={$dark}>
-    <slot />
-</div>
-
-<style>
-    div {
-        display: grid;
-        overflow: hidden;
-        height: 22rem;
-        min-width: 31.25rem;
-        grid-auto-rows: 2rem;
-    }
-
-    div > :global(div) {
-        display: grid;
-        grid-template-columns: 2fr 3fr;
-        align-items: center;
-    }
-
-    div > :global(div:first-child) {
-        font-weight: bold;
-        justify-items: center;
-    }
-
-    /* colors */
-    div {
-        transition: background-color var(--i-nil-doc-transition-time);
-        background-repeat: repeat;
-        background-size: 100% 4rem;
-        background-image: linear-gradient(
-            to bottom,
-            var(--i-nil-doc-controls-p) 2rem,
-            var(--i-nil-doc-controls-s) 2rem
-        );
-    }
-
-    div > :global(div:nth-child(n + 2):hover) {
-        background-color: var(--i-nil-doc-controls-hover);
-    }
-</style>

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

@@ -1,16 +0,0 @@
-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/etc/Content.svelte

@@ -1,45 +0,0 @@
-<script>export let flat = false;
-</script>
-
-<div class="scrollable">
-    {#if flat}
-        <slot />
-    {:else}
-        <div class="wrapper">
-            <slot />
-        </div>
-    {/if}
-</div>
-
-<style>
-    .wrapper {
-        display: inline-block;
-        box-sizing: border-box;
-        margin: 0.5rem;
-        padding: 0.5rem;
-        border-radius: 0.5rem;
-        min-width: calc(100% - 1rem);
-        min-height: calc(100% - 1rem);
-    }
-
-    /* scrollable */
-    .scrollable {
-        width: 100%;
-        height: 100%;
-        overflow: scroll;
-        /* Firefox */
-        scrollbar-width: none;
-        /* IE and Edge */
-        -ms-overflow-style: none;
-    }
-
-    .scrollable::-webkit-scrollbar {
-        display: none;
-    }
-
-    /* color */
-    .wrapper {
-        border: solid 1px var(--i-nil-doc-content-outline-color);
-        box-shadow: 0px 0px 5px 0px var(--i-nil-doc-content-outline-color);
-    }
-</style>

package/components/icons/NilDoc.svelte.d.ts

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