@nil-/doc 0.2.57 → 0.3.1

package/components/layout/Layout.svelte

@@ -5,10 +5,12 @@ const defaultRenamer = (s) => s;
 <script>import Base from "../Base.svelte";
 import Container from "./Container.svelte";
 import Content from "./Content.svelte";
+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 { initControlInfo, initControlValue } from "../block/context";
 import { getTheme, initTheme } from "../context";
 import ThemeIcon from "./icons/Theme.svelte";
 export let data;
@@ -17,6 +19,9 @@ export let sorter = null;
 export let renamer = null;
 export let theme = void 0;
 export let offset = 250;
+export let panel_pos = "bottom";
+initControlInfo();
+initControlValue();
 const parentTheme = getTheme();
 const dark = initTheme();
 $:
@@ -62,13 +67,20 @@ const toggle = () => {
                 </Scrollable>
             </svelte:fragment>
             <svelte:fragment slot="B">
-                <Scrollable>
-                    <Content>
-                        {#key current}
-                            <slot />
-                        {/key}
-                    </Content>
-                </Scrollable>
+                <Container offset={100} vertical={panel_pos === "right"}>
+                    <svelte:fragment slot="A">
+                        <Scrollable>
+                            <Content>
+                                {#key current}
+                                    <slot />
+                                {/key}
+                            </Content>
+                        </Scrollable>
+                    </svelte:fragment>
+                    <svelte:fragment slot="B">
+                        <Controls bind:position={panel_pos} />
+                    </svelte:fragment>
+                </Container>
             </svelte:fragment>
         </Container>
     </div>

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         renamer?: Renamer | null | undefined;
         theme?: Theme;
         offset?: number | undefined;
+        panel_pos?: "right" | "bottom" | undefined;
     };
     events: {
         navigate: CustomEvent<any>;

package/components/layout/icons/Theme.svelte

@@ -3,15 +3,17 @@
 
 <script>export let theme = "dark";
 const index = indexer++;
+$:
+  dark = theme === "dark";
 </script>
 
-<svg viewBox="-25 -25 50 50" class:dark={theme === "light"}>
+<svg viewBox="-25 -25 50 50" style:transform={dark ? "rotate(40deg)" : "rotate(180deg)"}>
     <mask id={`nil_doc_theme_icon_${index}`}>
         <rect x="-25" y="-25" fill="white" />
-        <circle r="11" fill="black" stroke="black" />
+        <circle r="11" cy={dark ? -8 : -24} fill="black" stroke="black" />
     </mask>
-    <circle mask={`url(#nil_doc_theme_icon_${index})`} />
-    <g>
+    <circle r={dark ? 10 : 5} mask={`url(#nil_doc_theme_icon_${index})`} />
+    <g opacity={dark ? 0 : 1}>
         <g>
             <line x1="0" y1="9" x2="0" y2="11" />
             <line x1="9" y1="0" x2="11" y2="0" />
@@ -47,37 +49,17 @@ const index = indexer++;
 
     svg {
         transition: transform var(--i-nil-doc-transition-time);
-        transform: rotate(40deg);
     }
 
     svg > g {
         transition: opacity var(--i-nil-doc-transition-time);
-        opacity: 0;
     }
 
     svg > mask > circle {
         transition: cy var(--i-nil-doc-transition-time);
-        cy: -8px;
     }
 
     svg > circle {
         transition: r var(--i-nil-doc-transition-time);
-        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/package.json

@@ -1,34 +1,14 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.57",
+  "version": "0.3.1",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
   },
   "license": "ISC",
-  "devDependencies": {
-    "@sveltejs/adapter-vercel": "^2.3.1",
-    "@sveltejs/kit": "^1.11.0",
-    "@sveltejs/package": "^1.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
-    "@vitest/coverage-c8": "^0.26.3",
-    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^8.7.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "mdsvex": "^0.10.6",
-    "remark-admonitions": "^1.2.1",
-    "svelte-check": "^2.10.3",
-    "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.4",
-    "vitest": "^0.26.3"
-  },
   "peerDependencies": {
-    "svelte": "^3.56.0"
-  },
-  "publishConfig": {
-    "linkDirectory": true
+    "@sveltejs/kit": "^1.15.0",
+    "svelte": "^3.58.0"
   },
   "keywords": [
     "svelte",
@@ -36,14 +16,16 @@
     "component"
   ],
   "type": "module",
-  "dependencies": {
-    "svelte-toggle": "^3.1.0",
-    "vanilla-picker": "^2.12.1"
-  },
   "exports": {
     "./package.json": "./package.json",
-    ".": "./index.js",
+    ".": {
+      "default": "./index.js",
+      "svelte": "./index.js",
+      "types": "./index.d.ts"
+    },
     "./sveltekit": "./sveltekit/index.js"
   },
-  "svelte": "./index.js"
+  "dependencies": {
+    "vanilla-picker": "^2.12.1"
+  }
 }

package/sveltekit/index.d.ts

@@ -25,6 +25,7 @@ type Settings = {
      * Default is 250px
      */
     offset: Writable<number>;
+    panel_pos: Writable<"bottom" | "right">;
 };
 /**
  * Dedicated helper method to be used for sveltekit

package/sveltekit/index.js

@@ -22,6 +22,8 @@ export const sveltekit = (detail, prefix = null) => {
     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_pos";
+    const panel_pos = browser ? localStorage.getItem(keyPos) ?? "bottom" : "bottom";
     const result = {
         data: Object.keys(detail)
             .map(toRoute)
@@ -39,9 +41,11 @@ export const sveltekit = (detail, prefix = null) => {
         }),
         navigate: prefix ? (e) => goto(`${prefix}${e.detail}`) : (e) => goto(e.detail),
         theme: writable(theme),
-        offset: writable(offset)
+        offset: writable(offset),
+        panel_pos: writable(panel_pos)
     };
     browser && result.theme.subscribe((v) => localStorage.setItem(keyTheme, v));
     browser && result.offset.subscribe((v) => localStorage.setItem(keyOffset, `${v}`));
+    browser && result.panel_pos.subscribe((v) => localStorage.setItem(keyPos, v));
     return result;
 };

package/CHANGELOG.md

@@ -1,376 +0,0 @@
-# @nil-/doc
-
-## 0.2.57
-
-### Patch Changes
-
--   [all][patch] UPDATE ALL PACKAGES ([#103](https://github.com/njaldea/mono/pull/103))
-
-## 0.2.56
-
-### Patch Changes
-
--   [doc][patch] use consolas as default font ([#98](https://github.com/njaldea/mono/pull/98))
-
-## 0.2.55
-
-### Patch Changes
-
--   [all][fix] separate eslint configuration ([#96](https://github.com/njaldea/mono/pull/96))
-
--   [doc][docu] fix switch -> toggle ([#96](https://github.com/njaldea/mono/pull/96))
-
--   [all][patch] update deps ([#96](https://github.com/njaldea/mono/pull/96))
-
--   [doc][new] added special prop control "button" ([#96](https://github.com/njaldea/mono/pull/96))
-
-## 0.2.54
-
-### Patch Changes
-
--   [doc][fix] dynamic import of vanilla-picker to avoid ssr document access ([#94](https://github.com/njaldea/mono/pull/94))
--   [doc][patch] temporarily used svelte-toggle for checkbox/toggle ([#94](https://github.com/njaldea/mono/pull/94))
-
-## 0.2.53
-
-### Patch Changes
-
--   [doc][break] removed "scale" prop ([#92](https://github.com/njaldea/mono/pull/92))
--   [doc][fix] better block scrollable handling ([#92](https://github.com/njaldea/mono/pull/92))
--   [doc][fix] better style to vanilla-color popup ([#92](https://github.com/njaldea/mono/pull/92))
-
-## 0.2.52
-
-### Patch Changes
-
--   [doc][fix] fix layout scrollable sections ([#90](https://github.com/njaldea/mono/pull/90))
--   [doc][patch] restructure code ([#90](https://github.com/njaldea/mono/pull/90))
--   [doc][patch] use vannilla-color library for color picker ([#90](https://github.com/njaldea/mono/pull/90))
--   [doc][fix] removed position relative and overflow scroll for misc (controls) ([#90](https://github.com/njaldea/mono/pull/90))
--   [doc][fix] content fill width/height ([#90](https://github.com/njaldea/mono/pull/90))
--   [doc][new] added offset Layout.svelte and sveltekit for keeping state ([#90](https://github.com/njaldea/mono/pull/90))
-
-## 0.2.51
-
-### Patch Changes
-
--   [doc][fix] components now rely on root font-size ([#88](https://github.com/njaldea/mono/pull/88))
--   [doc][fix] fix object prop control ([#88](https://github.com/njaldea/mono/pull/88))
--   [doc][new] block button controls ([#88](https://github.com/njaldea/mono/pull/88))
--   [doc][new] centralized custom css ([#88](https://github.com/njaldea/mono/pull/88))
--   [doc][misc] change styling ([#88](https://github.com/njaldea/mono/pull/88))
--   [doc][fix] scrolling content of container ([#88](https://github.com/njaldea/mono/pull/88))
-
-## 0.2.50
-
-### Patch Changes
-
--   [doc][new] removed default nil icon ([#86](https://github.com/njaldea/mono/pull/86))
--   [doc][new] allow override of theme icon ([#86](https://github.com/njaldea/mono/pull/86))
-
-## 0.2.49
-
-### Patch Changes
-
--   [doc][fix] fix range number formatting ([#83](https://github.com/njaldea/mono/pull/83))
-
-## 0.2.48
-
-### Patch Changes
-
--   [doc][fix] Fix type support ([#81](https://github.com/njaldea/mono/pull/81))
-
-## 0.2.47
-
-### Patch Changes
-
--   [doc][docu] minor adjustments to documentation ([#79](https://github.com/njaldea/mono/pull/79))
--   [doc][new] added support for flattened prop schema ([#79](https://github.com/njaldea/mono/pull/79))
-
-## 0.2.46
-
-### Patch Changes
-
--   [doc][break] added event control support ([#77](https://github.com/njaldea/mono/pull/77))
-
-## 0.2.45
-
-### Patch Changes
-
--   [doc][fix] keep control state when disabled after tuple/object parent toggles expand #[75](https://github.com/njaldea/mono/issues/75) ([#74](https://github.com/njaldea/mono/pull/74))
-
-## 0.2.44
-
-### Patch Changes
-
--   [doc][new] tuple and object controls now collapsible without disabling ([#72](https://github.com/njaldea/mono/pull/72))
-
-## 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
-
--   [doc][docu] added page for fuzzy matching ([#65](https://github.com/njaldea/mono/pull/65))
-
-## 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
-
--   [doc][new] added fuzzy match for nav filter ([#59](https://github.com/njaldea/mono/pull/59))
-
-## 0.2.37
-
-### Patch Changes
-
--   [doc][fix] params prop is now reactive ([#57](https://github.com/njaldea/mono/pull/57))
--   [doc][docu] added component documentation link to deployment ([#57](https://github.com/njaldea/mono/pull/57))
--   [doc][patch] removed inRoot ([#57](https://github.com/njaldea/mono/pull/57))
--   [doc][patch] refactored Instance/Template/Params ([#57](https://github.com/njaldea/mono/pull/57))
-
-## 0.2.36
-
-### Patch Changes
-
--   [doc][fix] color changes and transition ([#55](https://github.com/njaldea/mono/pull/55))
--   [doc][patch] added html meta details ([#55](https://github.com/njaldea/mono/pull/55))
-
-## 0.2.35
-
-### Patch Changes
-
--   [doc][break] changed Control "side" flag to "position" prop ([#53](https://github.com/njaldea/mono/pull/53))
--   [doc][new] added nil icon ([#53](https://github.com/njaldea/mono/pull/53))
-
-## 0.2.34
-
-### Patch Changes
-
--   [doc][new] added Control hide property ([#51](https://github.com/njaldea/mono/pull/51))
-    [doc][break] renamed Control expand property to hide
-    [doc][break] Control now defaults to show
-
-## 0.2.33
-
-### Patch Changes
-
--   [doc][patch] update formatting (camel case use) ([#49](https://github.com/njaldea/mono/pull/49))
-
-## 0.2.32
-
-### Patch Changes
-
--   [doc][new] relaxed file extension for sveltekit helper ([#47](https://github.com/njaldea/mono/pull/47))
-
-## 0.2.31
-
-### Patch Changes
-
--   [doc][patch] better container style ([#45](https://github.com/njaldea/mono/pull/45))
--   [doc][patch] improved ThemeIcon ([#45](https://github.com/njaldea/mono/pull/45))
-
-## 0.2.30
-
-### Patch Changes
-
--   [doc] Added color transition in Layout ([#43](https://github.com/njaldea/mono/pull/43))
--   [doc] added Instance component ([#43](https://github.com/njaldea/mono/pull/43))
-
-## 0.2.29
-
-### Patch Changes
-
--   [doc][feature] ThemeIcon ([#41](https://github.com/njaldea/mono/pull/41))
--   [doc][feature] added top bar to separate title and other controls ([#41](https://github.com/njaldea/mono/pull/41))
-
-## 0.2.28
-
-### Patch Changes
-
--   [doc][fix] reorder css style ([#37](https://github.com/njaldea/mono/pull/37))
-
-## 0.2.27
-
-### Patch Changes
-
--   [doc][fix] fix fira code css import ([#35](https://github.com/njaldea/mono/pull/35))
-
-## 0.2.26
-
-### Patch Changes
-
--   [doc][docu] removed fallback page in documentation ([#30](https://github.com/njaldea/mono/pull/30))
-
-## 0.2.25
-
-### Patch Changes
-
--   186187c: [doc][new] removed layout slot prop for content. all unnamed slots will be part of the default slot
--   186187c: [doc][fix] fix range tooltip styling
--   a82c0de: [doc][new] support dark/light mode
-
-## 0.2.24
-
-### Patch Changes
-
--   782e6fa: [doc][new] simplified sveltekit glue layer
--   782e6fa: [doc][docu] added documentation to public methods
-
-## 0.2.23
-
-### Patch Changes
-
--   5655f86: [doc][new] added slot prop `key` to Template component
--   5655f86: [doc][patch] moved some devDependencies to peerDependencies
-
-## 0.2.22
-
-### Patch Changes
-
--   3ce0a62: [doc][new] support for touch event via pointerevent (draggable container)
-
-## 0.2.21
-
-### Patch Changes
-
--   0398a72: [doc][fix] remove dependency on box-sizing
--   0398a72: [doc][fix] control min width
--   0398a72: [doc][new] made template configurable by column prop
-
-## 0.2.20
-
-### Patch Changes
-
--   3eee0ce: [doc][fix] removed setting of margin/padding
--   3eee0ce: [doc][fix] only propagate box-sizing (inherit)
-
-## 0.2.19
-
-### Patch Changes
-
--   1dad00f: [doc][fix] removed external css. inlined css even duplicating some of them.
-
-## 0.2.18
-
-### Patch Changes
-
--   a63dd42: [doc][fix] added tooltip for range
-
-## 0.2.17
-
-### Patch Changes
-
--   af86341: [doc][fix] moved default mapping in a common lib
--   af86341: [doc][fix] fix typing
--   af86341: [doc][patch] if Param's tag is not provided, use stringified id
-
-## 0.2.16
-
-### Patch Changes
-
--   650eb4b: [doc][fix] revived proper ordering of params
--   650eb4b: [doc][new] each param now has its own defaults (which is resolved from template's default and pram's props)
-
-## 0.2.15
-
-### Patch Changes
-
--   44a7113: [doc][docu] added documentation for internal Container
--   44a7113: [doc][new] adjusted api for load (now `routes`)
--   44a7113: [doc][fix] fix for layout group route
-
-## 0.2.14
-
-### Patch Changes
-
--   6265fa6: [doc][new] added Tuple and Object Controls
--   6265fa6: [doc][docu] added temporary internal doc
-
-## 0.2.13
-
-### Patch Changes
-
--   39dbce9: [doc][new] navigation now automatically opens when redirected to a route that is still collapsed
-
-## 0.2.12
-
-### Patch Changes
-
--   6c2d946: [doc][fix] Nav now is not scrollable
--   6c2d946: [doc][fix] Removes Container's "reversed" flag
--   6c2d946: [doc][fix] Adds "secondary" flag to Container
--   6c2d946: [doc][fix] Changes Container slot name (primary is top or left, seconadry is bottom or right)
--   6c2d946: [doc][fix] load now removes routes with parameters
--   6c2d946: [doc][fix] Template now supports `noreset`
--   6c2d946: [doc][fix] Updates documentation
-
-## 0.2.10
-
-### Patch Changes
-
--   c6de380: [doc][new] container collapsing now supported
--   c6de380: [doc][patch] styling of container now uses grid for easier handling
-
-## 0.2.9
-
-### Patch Changes
-
--   5c10f11: [doc][patch] layout fill height
-
-## 0.2.8
-
-### Patch Changes
-
--   865eef0: Adjusted Container to allow collapsing (based on primary/secondary and double clicking the divider)
-
-## 0.2.7
-
-### Patch Changes
-
--   a286896: Removed fonts to css
-    Moved common style to css files
-    Moved static in src
-    Moved Controls to its own component
-    Scoped styles by `nil-doc` prefix
-    Fixed css reset for Layout and Block
-    Allow filtering after renaming (url paths)
-    Added title to +layout.svelte
-    Updated layout documentation
-    Update dependencies
-
-## 0.1.0
-
-### Minor Changes
-
--   Alpha release