Skip to content

Commit a44fa0a

Browse files
jacob-8jacob-8
committed
feat: add onclickoutside prop to Menu
1 parent e6c6704 commit a44fa0a

File tree

9 files changed

+68
-59
lines changed

9 files changed

+68
-59
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
"prettier.enable": false,
2121
"editor.formatOnSave": false,
2222
"editor.codeActionsOnSave": {
23-
"source.fixAll.eslint": true,
24-
"source.organizeImports": false
23+
"source.fixAll.eslint": "explicit",
24+
"source.organizeImports": "never"
2525
},
2626
// Silence the stylistic rules in your IDE, but still auto fix them
2727
"eslint.rules.customizations": [

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
"@types/youtube": "^0.0.47",
7070
"@unocss/svelte-scoped": "^0.55.7",
7171
"bumpp": "^9.2.0",
72-
"kitbook": "1.0.0-beta.11",
72+
"kitbook": "1.0.0-beta.23",
7373
"publint": "^0.2.2",
7474
"svelte": "^4.2.10",
7575
"svelte-check": "^3.5.1",

‎pnpm-lock.yaml‎

Lines changed: 11 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/shell/Menu.composition‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script context="module" lang="ts">
2+
import type { Viewport } from 'kitbook'
3+
4+
const null_defaults_to_full_width = null
5+
export const viewports: Viewport[] = [
6+
{ width: null_defaults_to_full_width, height: 250 },
7+
]
8+
</script>
9+
10+
<script lang="ts">
11+
import Menu from './Menu.svelte'
12+
</script>
13+
14+
<Menu onclickoutside={() => alert('clicked outside')}>
15+
<div class="px-4 py-2 text-xs font-semibold text-gray-600">John Smith</div>
16+
<div class="px-4 py-2 -mt-3 text-xs text-gray-600 border-b">j@jim.com</div>
17+
<a href="/admin">
18+
Admin Panel
19+
<span class="i-fa-solid-key" />
20+
</a>
21+
<a href="/account"> Settings </a>
22+
<button> Log out </button>
23+
</Menu>

‎src/lib/shell/Menu.md‎

Lines changed: 1 addition & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1 @@
1-
<script>
2-
import { Story } from 'kitbook';
3-
import Menu from '$lib/shell/Menu.svelte';
4-
import { portal } from '$lib/actions/portal';
5-
6-
</script>
7-
8-
<Story>
9-
<div class="relative bg-white p-3 w-full" style="height: 250px;">
10-
<Menu>
11-
<div class="px-4 py-2 text-xs font-semibold text-gray-600">John Smith</div>
12-
<div class="px-4 py-2 -mt-3 text-xs text-gray-600 border-b">j@jim.com</div>
13-
<a href="/admin">
14-
Admin Panel
15-
<span class="i-fa-solid-key" />
16-
</a>
17-
<a href="/account"> Settings </a>
18-
<button> Log out </button>
19-
</Menu>
20-
</div>
21-
</Story>
22-
23-
<Story name="portaled to body">
24-
<div class="relative bg-white p-3 w-full" style="height: 250px;">
25-
<!-- <Menu class="ltr:right-2 rtl:left-2 top-11" /> -->
26-
<Menu {portal}>
27-
<div class="px-4 py-2 text-xs font-semibold text-gray-600">John Smith</div>
28-
<div class="px-4 py-2 -mt-3 text-xs text-gray-600 border-b">j@jim.com</div>
29-
<a href="/admin">
30-
Admin Panel
31-
<span class="i-fa-solid-key" />
32-
</a>
33-
<a href="/account"> Settings </a>
34-
<button> Log out </button>
35-
</Menu>
36-
</div>
37-
</Story>
38-
39-
Use `use:portal` if needed to solve z-index issues.
1+
Add a `portalTarget` if needed to solve z-index issues.

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script lang="ts">
2+
import Menu from './Menu.svelte'
3+
</script>
4+
5+
<div class="relative bg-white p-3 w-full" style="height: 250px;">
6+
<Menu portalTarget="body">
7+
<div class="px-4 py-2 text-xs font-semibold text-gray-600">John Smith</div>
8+
<div class="px-4 py-2 -mt-3 text-xs text-gray-600 border-b">j@jim.com</div>
9+
<a href="/admin">
10+
Admin Panel
11+
<span class="i-fa-solid-key" />
12+
</a>
13+
<a href="/account"> Settings </a>
14+
<button> Log out </button>
15+
</Menu>
16+
</div>

‎src/lib/shell/Menu.svelte‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
<script lang="ts">
22
import { fly } from 'svelte/transition';
33
import { portal } from '../actions/portal';
4-
export let portalTarget: string; // 'body' | '#direction' for example
4+
import { clickoutside } from '$lib/actions/clickoutside';
5+
6+
/** `body` or `#direction` for example */
7+
export let portalTarget: string = undefined;
8+
export let onclickoutside: (e: CustomEvent<boolean>) => any = undefined;
59
</script>
610

711
{#if portalTarget}
812
<div
913
use:portal={portalTarget}
14+
use:clickoutside
15+
on:clickoutside={onclickoutside}
1016
transition:fly={{ y: -10, duration: 150 }}
1117
class="{$$props.class} absolute z-30 mt-2 w-48 rounded-md
1218
shadow-lg"
@@ -17,6 +23,8 @@ shadow-lg"
1723
</div>
1824
{:else}
1925
<div
26+
use:clickoutside
27+
on:clickoutside={onclickoutside}
2028
transition:fly={{ y: -10, duration: 150 }}
2129
class="{$$props.class} absolute z-30 mt-2 w-48 rounded-md
2230
shadow-lg"

‎src/routes/+layout.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ import { groupColocatedModulesIntoPages, layoutLoad, pagesStore } from 'kitbook'
88
* 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.
99
*/
1010
const components = import.meta.glob(['/src/**/*.svelte']);
11-
const componentsRaw = import.meta.glob(['/src/**/*.svelte'], { as: 'raw' });
11+
const componentsRaw = import.meta.glob(['/src/**/*.svelte'], { query: '?raw', import: 'default' });
1212
const variants = import.meta.glob(['/src/**/*.variants.ts']);
13-
const variantsRaw = import.meta.glob(['/src/**/*.variants.ts'], { as: 'raw' });
13+
const variantsRaw = import.meta.glob(['/src/**/*.variants.ts'], { query: '?raw', import: 'default' });
1414
const compositions = import.meta.glob(['/src/**/*.composition']);
15-
const compositionsRaw = import.meta.glob(['/src/**/*.composition'], { as: 'raw' });
15+
const compositionsRaw = import.meta.glob(['/src/**/*.composition'], { query: '?raw', import: 'default' });
1616
const markdown = import.meta.glob(['/src/**/*.md', '/README.md']);
17-
const markdownRaw = import.meta.glob(['/src/**/*.md', '/README.md'], { as: 'raw' });
17+
const markdownRaw = import.meta.glob(['/src/**/*.md', '/README.md'], { query: '?raw', import: 'default' });
1818
export const _pages = groupColocatedModulesIntoPages({ components, componentsRaw, variants, variantsRaw, compositions, compositionsRaw, markdown, markdownRaw });
1919
let firstLoad = true;
2020
if (firstLoad) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ export let data;
44

55
<MainPage {data} />
66

7-
<!-- 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. -->
7+
<!-- 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. -->

0 commit comments

Comments
 (0)