@hyvor/design 0.0.51 → 0.0.52

package/dist/components/Base/Base.svelte

@@ -2,12 +2,16 @@
 import DarkProvider from "./../Dark/DarkProvider.svelte";
 import "../../index.js";
 import ToastProvider from "../Toast/ToastProvider.svelte";
+export let dark = false;
 </script>
 
 <div id="base">
     <slot />
 </div>
 
-<DarkProvider />
+{#if dark}
+    <DarkProvider />
+{/if}
+
 <ToastProvider />
 <ConfirmModalProvider />

package/dist/components/Base/Base.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponent } from "svelte";
 import '../../index.js';
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        dark?: boolean | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -14,7 +14,7 @@ function handleClose() {
 }
 </script>
 
-<span>
+<span class="color-picker">
     <button
         style:width="{size}px"
         style:height="{size}px"
@@ -23,7 +23,8 @@ function handleClose() {
     ></button>
 
     {#if show}
-        <div 
+        <div
+            class="color-picker-wrap"
             use:clickOutside={{
                 callback: () => handleClose(),
             }}
@@ -39,30 +40,19 @@ function handleClose() {
     {/if}
 </span>
 
-<!-- <span>
-   
-
-    <input 
-        type="color" 
-        bind:value={color}
-        bind:this={inputEl}
-
-        on:change
-        on:input
-    />
-</span> -->
-
 <style>
     span {
         position: relative;
     }
     button {
         border-radius: 50%;
+        border: 1px solid var(--border);
     }
     div {
         position: absolute;
         left: 0;
         top: 100%;
         width: 0;
+        z-index: 1000;
     }
 </style>

package/dist/marketing/Docs/Content/Content.svelte

@@ -132,4 +132,14 @@ content :global(h5 a:not(.heading-anchor-link)),
 content :global(h6 a:not(.heading-anchor-link)) {
   text-decoration: none;
   color: inherit;
+}
+
+@media (max-width: 992px) {
+  .content-wrap {
+    padding-top: 0;
+    order: 2;
+  }
+  content {
+    padding: 20px 25px;
+  }
 }</style>

package/dist/marketing/Docs/Docs.svelte

@@ -1,13 +1,11 @@
 <script>
-	import Toc from "./Toc.svelte";
-
+	import Sidebar from "./Sidebar/Sidebar.svelte";
 </script>
 <div class="docs">
 
     <slot name="nav" />
     <slot name="content" />
-    <Toc />
-
+    <Sidebar />
 </div>
 
 <style>
@@ -22,4 +20,12 @@
         /* min-height: calc(100vh - var(--header-height)); */
     }
 
+
+    @media (max-width: 992px) {
+        .docs {
+            flex-direction: column;
+            width: 100%;
+        }
+    }
+
 </style>

package/dist/marketing/Docs/Nav/Nav.svelte

@@ -1,30 +1,131 @@
-<script>import Box from "../../../components/Box/Box.svelte";
+<script>import { afterNavigate, onNavigate } from "$app/navigation";
+import { page } from "$app/stores";
+import { IconList } from "@hyvor/icons";
+import { onMount } from "svelte";
+import { clickOutside } from "../../../components/index.js";
+let navEl;
+let active = null;
+function setActive() {
+  const activeEl = navEl?.querySelector("a.active");
+  if (!activeEl || !(activeEl instanceof HTMLElement)) {
+    active = null;
+    return;
+  }
+  const category = activeEl.closest(".nav-category")?.querySelector(".name")?.innerText || null;
+  active = {
+    name: activeEl.innerText,
+    category
+  };
+}
+onMount(() => {
+  setActive();
+});
+afterNavigate(() => {
+  setActive();
+  hideNavOnMobile();
+});
+let mobileNavShown = false;
+function handleMobileClick(e) {
+  e.stopPropagation();
+  if (navEl.style.display !== "block") {
+    navEl.style.display = "block";
+    mobileNavShown = true;
+  } else {
+    navEl.style.display = "none";
+    mobileNavShown = false;
+  }
+}
+function handleNavOutsideClick() {
+  if (mobileNavShown) {
+    navEl.style.display = "none";
+    mobileNavShown = false;
+  }
+}
+function hideNavOnMobile() {
+  if (window.innerWidth < 992) {
+    navEl.style.display = "none";
+  }
+}
 </script>
 
 <div class="docs-nav">
 
-    <Box as="nav" class="nav-inner">
-        <slot />
-    </Box>
+    {#if active}
+        <button class="mobile hds-box" on:click={handleMobileClick}>
+            <div class="left">
+                {#if active.category}
+                    <span class="category">{active.category}</span> &raquo;
+                {/if}
+                <span class="name">{active.name}</span>
+            </div>
+            <IconList size={18} />
+        </button>
+    {/if}
 
+    <nav 
+        class="hds-box nav-inner" 
+        bind:this={navEl}
+        use:clickOutside={{
+            callback: handleNavOutsideClick
+        }}
+    >
+        <slot />
+    </nav>
 </div>
 
-<style>
+<style>.docs-nav {
+  width: 220px;
+  top: var(--header-height, 0);
+  padding: 25px 0;
+  position: sticky;
+  flex-shrink: 0;
+  align-self: flex-start;
+  max-height: calc(100vh - var(--header-height));
+}
 
-    .docs-nav {
-        width: 220px;
-        top: var(--header-height, 0);
-        padding: 25px 0;
-        position: sticky;
-        flex-shrink: 0;
-        align-self: flex-start;
-        max-height: calc(100vh - var(--header-height));
-    }
+nav {
+  padding: 15px 0;
+  overflow-y: auto;
+  max-height: calc(100vh - var(--header-height) - 50px);
+}
 
-    .docs-nav :global(.nav-inner) {
-        padding: 15px 0;
-        overflow-y: auto;
-        max-height: calc(100vh - var(--header-height) - 50px);
-    }
+.mobile {
+  display: none;
+  padding: 10px 20px;
+  cursor: pointer;
+}
+.mobile:hover {
+  background-color: var(--hover);
+}
+.mobile .left {
+  flex: 1;
+}
 
-</style>
+@media (max-width: 992px) {
+  .mobile {
+    display: flex;
+    width: 100%;
+    text-align: left;
+  }
+  .nav-inner {
+    display: none;
+  }
+  .docs-nav {
+    width: 100%;
+    position: relative;
+    top: 0;
+    padding: 0 15px;
+    margin: 20px 0;
+    max-height: initial;
+    order: 1;
+  }
+  nav {
+    padding: 0;
+    max-height: initial;
+    position: absolute;
+    width: calc(100% - 30px);
+    margin-top: 10px;
+    max-height: 500px;
+    z-index: 100;
+  }
+}</style>

package/dist/marketing/Docs/Sidebar/Sidebar.svelte

@@ -0,0 +1,32 @@
+<script>
+  import Toc from "../Toc.svelte";
+
+</script>
+<div class="sidebar">
+    <Toc />
+</div>
+
+
+<style>
+
+    .sidebar {
+        width: 220px;
+        top: var(--header-height, 0);
+        padding: 25px 0;
+        position: sticky;
+        flex-shrink: 0;
+        align-self: flex-start;
+    }
+
+    @media (max-width: 992px) {
+        .sidebar {
+            order: 1;
+            position: relative;
+            top: initial;
+            padding: 0 15px;
+            margin-bottom: 20px;
+            width: 100%;
+        }
+    }
+
+</style>

package/dist/marketing/Docs/Sidebar/Sidebar.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SidebarProps */
+/** @typedef {typeof __propDef.events}  SidebarEvents */
+/** @typedef {typeof __propDef.slots}  SidebarSlots */
+export default class Sidebar extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/marketing/Docs/Toc.svelte

@@ -1,23 +1,148 @@
-<script>import Box from "../../components/Box/Box.svelte";
+<script>import { afterNavigate } from "$app/navigation";
+import { onMount } from "svelte";
+import tocbot from "tocbot";
+import Loader from "../../components/Loader/Loader.svelte";
+import { IconCaretDown, IconCaretRight } from "@hyvor/icons";
+import Button from "../../components/Button/Button.svelte";
+let tocElement;
+onMount(() => {
+  tocbot.init({
+    // @ts-ignore
+    tocElement,
+    contentSelector: ".docs .content-wrap",
+    headingSelector: "h2, h3, h4, h5, h6",
+    orderedList: false,
+    hasInnerContainers: true,
+    headingsOffset: 75,
+    scrollSmooth: true
+  });
+});
+afterNavigate(() => {
+  tocbot.refresh();
+});
+let mobileShown = false;
+function handleMobileClick(e) {
+  e.stopPropagation();
+  if (!mobileShown) {
+    tocElement.style.display = "block";
+    mobileShown = true;
+  } else {
+    tocElement.style.display = "none";
+    mobileShown = false;
+  }
+}
 </script>
 
-<div class="toc-wrap">
+<div class="wrap hds-box">
 
-    <Box style="padding: 15px 20px">
-        Table of Contents
-    </Box>
+    <div class="mobile">
+        <Button color="input" on:click={handleMobileClick}>
+            Table of Contents 
+            <svelte:fragment slot="end">
+                {#if mobileShown}
+                    <IconCaretDown size={14} />
+                {:else}
+                    <IconCaretRight size={14} />
+                {/if}
+            </svelte:fragment>
+        </Button>
+    </div>
+
+    <div class="toc-wrap" bind:this={tocElement}>
+        <Loader block padding={30} size="small" />
+    </div>
 
 </div>
 
-<style>
+<style>.wrap {
+  padding: 25px;
+}
+
+.toc-wrap {
+  align-self: flex-start;
+  overflow-y: auto;
+}
+.toc-wrap :global(&.toc) {
+  overflow-y: auto;
+}
+.toc-wrap :global(> .toc-list) {
+  overflow: hidden;
+  position: relative;
+  overflow: hidden;
+  position: relative;
+  margin: 0;
+  padding-left: 15px;
+}
+.toc-wrap :global(> .toc-list) :global(li) {
+  list-style: none;
+}
+.toc-wrap :global(.js-toc) {
+  overflow-y: hidden;
+}
+.toc-wrap :global(.toc-list) {
+  margin: 0;
+  padding-left: 15px;
+}
+.toc-wrap :global(.toc-list) :global(li) {
+  list-style: none;
+}
+.toc-wrap :global(a.toc-link) {
+  color: currentColor;
+  height: 100%;
+  display: inline-block;
+  padding: 3px 0;
+}
+.toc-wrap :global(a.toc-link):hover {
+  text-decoration: underline;
+}
+.toc-wrap :global(.is-collapsible) {
+  max-height: 1000px;
+  overflow: hidden;
+  transition: all 300ms ease-in-out;
+}
+.toc-wrap :global(.is-collapsed) {
+  max-height: 0;
+}
+.toc-wrap :global(.is-position-fixed) {
+  position: fixed !important;
+  top: 0;
+}
+.toc-wrap :global(.is-active-link) {
+  font-weight: 700;
+}
+.toc-wrap :global(.toc-link::before) {
+  background-color: #EEE;
+  content: " ";
+  display: inline-block;
+  height: inherit;
+  left: 0;
+  margin-top: -1px;
+  position: absolute;
+  width: 2px;
+}
+.toc-wrap :global(.is-active-link::before) {
+  background-color: var(--accent);
+}
 
-    .toc-wrap {
-        width: 220px;
-        top: var(--header-height);
-        padding: 25px 0;
-        position: sticky;
-        flex-shrink: 0;
-        align-self: flex-start;
-    }
+.mobile {
+  display: none;
+}
 
-</style>
+@media (max-width: 992px) {
+  .wrap {
+    padding: 10px 15px;
+  }
+  .mobile {
+    display: block;
+  }
+  .toc-wrap {
+    display: none;
+    margin-top: 15px;
+  }
+  :global(.is-active-link) {
+    font-weight: normal !important;
+  }
+  :global(.is-active-link::before) {
+    background-color: #eee !important;
+  }
+}</style>

package/dist/marketing/Header/Header.svelte

@@ -195,4 +195,12 @@ header :global(nav) {
 
 .mobile-content :global(.button) {
   display: flex;
+}
+
+/* 
+	Scroll padding top is used to prevent the content from being hidden behind the header
+	https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
+*/
+:global(html) {
+  scroll-padding-top: calc(var(--header-height) + 20px);
 }</style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.51",
+	"version": "0.0.52",
 	"license": "MIT",
 	"private": false,
 	"scripts": {
@@ -47,7 +47,8 @@
 		"@fontsource/readex-pro": "^5.0.8",
 		"@hyvor/icons": "^0.0.3",
 		"highlight.js": "^11.9.0",
-		"svelte-awesome-color-picker": "^3.0.4"
+		"svelte-awesome-color-picker": "^3.0.4",
+		"tocbot": "^4.25.0"
 	},
 	"type": "module",
 	"publishConfig": {