@nil-/doc 0.2.41 → 0.2.43

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nil-/doc
 
+## 0.2.43
+
+### Patch Changes
+
+-   [doc][fix] disable Range.svelte tooltip when disabled ([#70](https://github.com/njaldea/mono/pull/70))
+
+-   [doc][new] added auto scroll when content of layout is only one component ([#70](https://github.com/njaldea/mono/pull/70))
+
+## 0.2.42
+
+### Patch Changes
+
+-   [doc][new] added theme store in sveltekit to retain used theme ([#67](https://github.com/njaldea/mono/pull/67))
+
 ## 0.2.41
 
 ### Patch Changes

package/components/Layout.svelte

@@ -47,13 +47,15 @@
     }
 
     /* scrollable */
-    .scrollable {
+    .scrollable,
+    .page > :global(*:only-child) {
         overflow: scroll;
         scrollbar-width: none; /* Firefox */
         -ms-overflow-style: none; /* IE and Edge */
     }
 
-    .scrollable::-webkit-scrollbar {
+    .scrollable::-webkit-scrollbar,
+    .page > :global(*:only-child::-webkit-scrollbar) {
         display: none;
     }
 
@@ -97,6 +99,13 @@ 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
@@ -105,7 +114,7 @@ $:
 <div class="layout" class:dark={$dark}>
     <div class="top">
         <slot name="title"><span>@nil-/doc</span></slot>
-        <div class="icon" on:click={() => ($dark = !$dark)} on:keypress={null}>
+        <div class="icon" on:click={toggle} on:keypress={null}>
             <ThemeIcon bind:dark={$dark} />
         </div>
         <div
@@ -130,7 +139,7 @@ $:
                 </div>
             </svelte:fragment>
             <svelte:fragment slot="B">
-                <div class="content scrollable">
+                <div class="content page">
                     {#key current}
                         <slot />
                     {/key}

package/components/block/controls/Range.svelte

@@ -27,7 +27,7 @@
         visibility: hidden;
     }
 
-    .input:hover > .tooltip {
+    .input:hover > .tooltip:not(.disabled) {
         visibility: visible;
     }
 </style>
@@ -41,11 +41,13 @@ let ivalue = value ?? getDefault(info);
 let enabled = value !== void 0;
 $:
   value = enabled && !disabled ? ivalue : void 0;
+$:
+  flag = !enabled || disabled;
 </script>
 <div>
     <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</div>
     <div class="input">
-        <div class="tooltip">
+        <div class="tooltip" class:disabled={flag}>
             Current Value: {ivalue}
         </div>
         <div>{ivalue.toFixed(2)}</div>
@@ -55,7 +57,7 @@ $:
             min={info.min}
             max={info.max}
             step={info.step}
-            disabled={!enabled || disabled}
+            disabled={flag}
         />
     </div>
     <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.41",
+  "version": "0.2.43",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
@@ -8,15 +8,15 @@
   "license": "ISC",
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^1.0.0",
-    "@sveltejs/kit": "^1.0.1",
-    "@sveltejs/package": "^1.0.1",
+    "@sveltejs/kit": "^1.0.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.4.1",
     "typescript": "^4.9.4",
-    "vite": "^4.0.3",
+    "vite": "^4.0.4",
     "vitest": "^0.26.3"
   },
   "peerDependencies": {

package/sveltekit/index.d.ts

@@ -1,5 +1,6 @@
-import { type Readable } from "svelte/store";
-type Routes = {
+import { type Readable, type Writable } from "svelte/store";
+import type { Theme } from "../components/context";
+type Settings = {
     /**
      * List of routes
      */
@@ -13,12 +14,17 @@ type Routes = {
      * @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>>;
 };
 /**
  * Dedicated helper method to be used for sveltekit
  * @param detail - vite's `import.meta.glob(..., { eager: true })`
  * @param prefix - only use when layout is not in the root route
- * @returns Routes
+ * @returns Settings
  */
-export declare const sveltekit: (detail: Record<string, unknown>, prefix?: string | null) => Routes;
+export declare const sveltekit: (detail: Record<string, unknown>, prefix?: string | null) => Settings;
 export {};

package/sveltekit/index.js

@@ -1,6 +1,7 @@
-import { derived } from "svelte/store";
+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
@@ -14,22 +15,30 @@ 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 prefix - only use when layout is not in the root route
- * @returns Routes
+ * @returns Settings
  */
-export const sveltekit = (detail, prefix = null) => ({
-    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));
+export const sveltekit = (detail, prefix = null) => {
+    const key = "@nil-/doc/theme";
+    const initialValue = browser && "light" === localStorage.getItem(key) ? "light" : "dark";
+    const theme = writable(initialValue);
+    theme.subscribe((v) => browser && localStorage.setItem(key, v));
+    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 collapseLayout($page.route.id);
-        }
-        return null;
-    }),
-    navigate: prefix ? (e) => goto(`${prefix}${e.detail}`) : (e) => goto(e.detail)
-});
+            return null;
+        }),
+        navigate: prefix ? (e) => goto(`${prefix}${e.detail}`) : (e) => goto(e.detail),
+        theme
+    };
+    return result;
+};