feat: add onclickoutside prop to Menu

.vscode/settings.json

@@ -20,8 +20,8 @@
   "prettier.enable": false,
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.organizeImports": false
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
   },
   // Silence the stylistic rules in your IDE, but still auto fix them
   "eslint.rules.customizations": [

package.json

@@ -69,7 +69,7 @@
     "@types/youtube": "^0.0.47",
     "@unocss/svelte-scoped": "^0.55.7",
     "bumpp": "^9.2.0",
-    "kitbook": "1.0.0-beta.11",
+    "kitbook": "1.0.0-beta.23",
     "publint": "^0.2.2",
     "svelte": "^4.2.10",
     "svelte-check": "^3.5.1",

src/lib/shell/Menu.composition

@@ -0,0 +1,23 @@
+<script context="module" lang="ts">
+  import type { Viewport } from 'kitbook'
+
+  const null_defaults_to_full_width = null
+  export const viewports: Viewport[] = [
+    { width: null_defaults_to_full_width, height: 250 },
+  ]
+</script>
+
+<script lang="ts">
+  import Menu from './Menu.svelte'
+</script>
+
+<Menu onclickoutside={() => alert('clicked outside')}>
+  <div class="px-4 py-2 text-xs font-semibold text-gray-600">John Smith</div>
+  <div class="px-4 py-2 -mt-3 text-xs text-gray-600 border-b">j@jim.com</div>
+  <a href="/admin">
+    Admin Panel
+    <span class="i-fa-solid-key" />
+  </a>
+  <a href="/account"> Settings </a>
+  <button> Log out </button>
+</Menu>

src/lib/shell/Menu.md

@@ -1,39 +1 @@
-<script>
-  import { Story } from 'kitbook';
-  import Menu from '$lib/shell/Menu.svelte';
-  import { portal } from '$lib/actions/portal';
-
-</script>
-
-<Story>
-  <div class="relative bg-white p-3 w-full" style="height: 250px;">
-    <Menu>
-      <div class="px-4 py-2 text-xs font-semibold text-gray-600">John Smith</div>
-      <div class="px-4 py-2 -mt-3 text-xs text-gray-600 border-b">j@jim.com</div>
-      <a href="/admin">
-        Admin Panel
-        <span class="i-fa-solid-key" />
-      </a>
-      <a href="/account"> Settings </a>
-      <button> Log out </button>
-    </Menu>
-  </div>
-</Story>
-
-<Story name="portaled to body">
-  <div class="relative bg-white p-3 w-full" style="height: 250px;">
-    <!-- <Menu class="ltr:right-2 rtl:left-2 top-11" /> -->
-    <Menu {portal}>
-      <div class="px-4 py-2 text-xs font-semibold text-gray-600">John Smith</div>
-      <div class="px-4 py-2 -mt-3 text-xs text-gray-600 border-b">j@jim.com</div>
-      <a href="/admin">
-        Admin Panel
-        <span class="i-fa-solid-key" />
-      </a>
-      <a href="/account"> Settings </a>
-      <button> Log out </button>
-    </Menu>
-  </div>
-</Story>
-
-Use `use:portal` if needed to solve z-index issues.
+Add a `portalTarget` if needed to solve z-index issues.

src/lib/shell/Menu.portaled-to-body.composition

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import Menu from './Menu.svelte'
+</script>
+
+  <div class="relative bg-white p-3 w-full" style="height: 250px;">
+    <Menu portalTarget="body">
+      <div class="px-4 py-2 text-xs font-semibold text-gray-600">John Smith</div>
+      <div class="px-4 py-2 -mt-3 text-xs text-gray-600 border-b">j@jim.com</div>
+      <a href="/admin">
+        Admin Panel
+        <span class="i-fa-solid-key" />
+      </a>
+      <a href="/account"> Settings </a>
+      <button> Log out </button>
+    </Menu>
+  </div>

src/lib/shell/Menu.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
   import { fly } from 'svelte/transition';
   import { portal } from '../actions/portal';
-  export let portalTarget: string; // 'body' | '#direction' for example
+  import { clickoutside } from '$lib/actions/clickoutside';
+
+  /** `body` or `#direction` for example */
+  export let portalTarget: string = undefined;
+  export let onclickoutside: (e: CustomEvent<boolean>) => any = undefined;
 </script>
 
 {#if portalTarget}
   <div
     use:portal={portalTarget}
+    use:clickoutside
+    on:clickoutside={onclickoutside}
     transition:fly={{ y: -10, duration: 150 }}
     class="{$$props.class} absolute z-30 mt-2 w-48 rounded-md
 shadow-lg"
@@ -17,6 +23,8 @@ shadow-lg"
   </div>
 {:else}
   <div
+    use:clickoutside
+    on:clickoutside={onclickoutside}
     transition:fly={{ y: -10, duration: 150 }}
     class="{$$props.class} absolute z-30 mt-2 w-48 rounded-md
 shadow-lg"

src/routes/+layout.js

@@ -8,13 +8,13 @@ import { groupColocatedModulesIntoPages, layoutLoad, pagesStore } from 'kitbook'
  * Kitbook changes in the future will cause this file to be regenerated. Your glob patterns will be preserved as long as you only edit the patterns inside the array brackets and nothing else.
  */
 const components = import.meta.glob(['/src/**/*.svelte']);
-const componentsRaw = import.meta.glob(['/src/**/*.svelte'], { as: 'raw' });
+const componentsRaw = import.meta.glob(['/src/**/*.svelte'], { query: '?raw', import: 'default' });
 const variants = import.meta.glob(['/src/**/*.variants.ts']);
-const variantsRaw = import.meta.glob(['/src/**/*.variants.ts'], { as: 'raw' });
+const variantsRaw = import.meta.glob(['/src/**/*.variants.ts'], { query: '?raw', import: 'default' });
 const compositions = import.meta.glob(['/src/**/*.composition']);
-const compositionsRaw = import.meta.glob(['/src/**/*.composition'], { as: 'raw' });
+const compositionsRaw = import.meta.glob(['/src/**/*.composition'], { query: '?raw', import: 'default' });
 const markdown = import.meta.glob(['/src/**/*.md', '/README.md']);
-const markdownRaw = import.meta.glob(['/src/**/*.md', '/README.md'], { as: 'raw' });
+const markdownRaw = import.meta.glob(['/src/**/*.md', '/README.md'], { query: '?raw', import: 'default' });
 export const _pages = groupColocatedModulesIntoPages({ components, componentsRaw, variants, variantsRaw, compositions, compositionsRaw, markdown, markdownRaw });
 let firstLoad = true;
 if (firstLoad) {

src/routes/[...file]/+page.svelte

@@ -4,4 +4,4 @@ export let data;
 
 <MainPage {data} />
 
-<!-- Kitbook route files were auto-generated by kitbook@1.0.0-beta.6^ - Do not edit as they will be overwritten next time kitbook updates routing. -->
+<!-- Kitbook route files were auto-generated by kitbook@1.0.0-beta.17^ - Do not edit as they will be overwritten next time kitbook updates routing. -->