@fuzdev/fuz_ui 0.169.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +93 -0
- package/dist/Alert.svelte +108 -0
- package/dist/Alert.svelte.d.ts +16 -0
- package/dist/Alert.svelte.d.ts.map +1 -0
- package/dist/ApiDeclarationList.svelte +35 -0
- package/dist/ApiDeclarationList.svelte.d.ts +9 -0
- package/dist/ApiDeclarationList.svelte.d.ts.map +1 -0
- package/dist/ApiIndex.svelte +65 -0
- package/dist/ApiIndex.svelte.d.ts +23 -0
- package/dist/ApiIndex.svelte.d.ts.map +1 -0
- package/dist/ApiModule.svelte +124 -0
- package/dist/ApiModule.svelte.d.ts +22 -0
- package/dist/ApiModule.svelte.d.ts.map +1 -0
- package/dist/Breadcrumb.svelte +83 -0
- package/dist/Breadcrumb.svelte.d.ts +23 -0
- package/dist/Breadcrumb.svelte.d.ts.map +1 -0
- package/dist/Card.svelte +157 -0
- package/dist/Card.svelte.d.ts +13 -0
- package/dist/Card.svelte.d.ts.map +1 -0
- package/dist/ColorSchemeInput.svelte +65 -0
- package/dist/ColorSchemeInput.svelte.d.ts +11 -0
- package/dist/ColorSchemeInput.svelte.d.ts.map +1 -0
- package/dist/Contextmenu.svelte +30 -0
- package/dist/Contextmenu.svelte.d.ts +32 -0
- package/dist/Contextmenu.svelte.d.ts.map +1 -0
- package/dist/ContextmenuEntry.svelte +74 -0
- package/dist/ContextmenuEntry.svelte.d.ts +12 -0
- package/dist/ContextmenuEntry.svelte.d.ts.map +1 -0
- package/dist/ContextmenuLinkEntry.svelte +112 -0
- package/dist/ContextmenuLinkEntry.svelte.d.ts +12 -0
- package/dist/ContextmenuLinkEntry.svelte.d.ts.map +1 -0
- package/dist/ContextmenuRoot.svelte +372 -0
- package/dist/ContextmenuRoot.svelte.d.ts +71 -0
- package/dist/ContextmenuRoot.svelte.d.ts.map +1 -0
- package/dist/ContextmenuRootForSafariCompatibility.svelte +541 -0
- package/dist/ContextmenuRootForSafariCompatibility.svelte.d.ts +79 -0
- package/dist/ContextmenuRootForSafariCompatibility.svelte.d.ts.map +1 -0
- package/dist/ContextmenuSeparator.svelte +16 -0
- package/dist/ContextmenuSeparator.svelte.d.ts +4 -0
- package/dist/ContextmenuSeparator.svelte.d.ts.map +1 -0
- package/dist/ContextmenuSubmenu.svelte +116 -0
- package/dist/ContextmenuSubmenu.svelte.d.ts +10 -0
- package/dist/ContextmenuSubmenu.svelte.d.ts.map +1 -0
- package/dist/ContextmenuTextEntry.svelte +21 -0
- package/dist/ContextmenuTextEntry.svelte.d.ts +10 -0
- package/dist/ContextmenuTextEntry.svelte.d.ts.map +1 -0
- package/dist/CopyToClipboard.svelte +81 -0
- package/dist/CopyToClipboard.svelte.d.ts +18 -0
- package/dist/CopyToClipboard.svelte.d.ts.map +1 -0
- package/dist/DeclarationDetail.svelte +340 -0
- package/dist/DeclarationDetail.svelte.d.ts +8 -0
- package/dist/DeclarationDetail.svelte.d.ts.map +1 -0
- package/dist/DeclarationLink.svelte +50 -0
- package/dist/DeclarationLink.svelte.d.ts +8 -0
- package/dist/DeclarationLink.svelte.d.ts.map +1 -0
- package/dist/Details.svelte +51 -0
- package/dist/Details.svelte.d.ts +20 -0
- package/dist/Details.svelte.d.ts.map +1 -0
- package/dist/Dialog.svelte +217 -0
- package/dist/Dialog.svelte.d.ts +30 -0
- package/dist/Dialog.svelte.d.ts.map +1 -0
- package/dist/Dialogs.svelte +28 -0
- package/dist/Dialogs.svelte.d.ts +11 -0
- package/dist/Dialogs.svelte.d.ts.map +1 -0
- package/dist/Docs.svelte +179 -0
- package/dist/Docs.svelte.d.ts +13 -0
- package/dist/Docs.svelte.d.ts.map +1 -0
- package/dist/DocsContent.svelte +40 -0
- package/dist/DocsContent.svelte.d.ts +14 -0
- package/dist/DocsContent.svelte.d.ts.map +1 -0
- package/dist/DocsFooter.svelte +64 -0
- package/dist/DocsFooter.svelte.d.ts +15 -0
- package/dist/DocsFooter.svelte.d.ts.map +1 -0
- package/dist/DocsLink.svelte +41 -0
- package/dist/DocsLink.svelte.d.ts +12 -0
- package/dist/DocsLink.svelte.d.ts.map +1 -0
- package/dist/DocsList.svelte +44 -0
- package/dist/DocsList.svelte.d.ts +11 -0
- package/dist/DocsList.svelte.d.ts.map +1 -0
- package/dist/DocsMenu.svelte +55 -0
- package/dist/DocsMenu.svelte.d.ts +11 -0
- package/dist/DocsMenu.svelte.d.ts.map +1 -0
- package/dist/DocsMenuHeader.svelte +15 -0
- package/dist/DocsMenuHeader.svelte.d.ts +9 -0
- package/dist/DocsMenuHeader.svelte.d.ts.map +1 -0
- package/dist/DocsModulesList.svelte +32 -0
- package/dist/DocsModulesList.svelte.d.ts +7 -0
- package/dist/DocsModulesList.svelte.d.ts.map +1 -0
- package/dist/DocsPageLinks.svelte +61 -0
- package/dist/DocsPageLinks.svelte.d.ts +8 -0
- package/dist/DocsPageLinks.svelte.d.ts.map +1 -0
- package/dist/DocsPrimaryNav.svelte +93 -0
- package/dist/DocsPrimaryNav.svelte.d.ts +11 -0
- package/dist/DocsPrimaryNav.svelte.d.ts.map +1 -0
- package/dist/DocsSearch.svelte +48 -0
- package/dist/DocsSearch.svelte.d.ts +11 -0
- package/dist/DocsSearch.svelte.d.ts.map +1 -0
- package/dist/DocsSecondaryNav.svelte +63 -0
- package/dist/DocsSecondaryNav.svelte.d.ts +9 -0
- package/dist/DocsSecondaryNav.svelte.d.ts.map +1 -0
- package/dist/DocsTertiaryNav.svelte +118 -0
- package/dist/DocsTertiaryNav.svelte.d.ts +10 -0
- package/dist/DocsTertiaryNav.svelte.d.ts.map +1 -0
- package/dist/EcosystemLinks.svelte +53 -0
- package/dist/EcosystemLinks.svelte.d.ts +7 -0
- package/dist/EcosystemLinks.svelte.d.ts.map +1 -0
- package/dist/EcosystemLinksPanel.svelte +22 -0
- package/dist/EcosystemLinksPanel.svelte.d.ts +8 -0
- package/dist/EcosystemLinksPanel.svelte.d.ts.map +1 -0
- package/dist/GithubLink.svelte +75 -0
- package/dist/GithubLink.svelte.d.ts +14 -0
- package/dist/GithubLink.svelte.d.ts.map +1 -0
- package/dist/Glyph.svelte +28 -0
- package/dist/Glyph.svelte.d.ts +9 -0
- package/dist/Glyph.svelte.d.ts.map +1 -0
- package/dist/Hashlink.svelte +41 -0
- package/dist/Hashlink.svelte.d.ts +8 -0
- package/dist/Hashlink.svelte.d.ts.map +1 -0
- package/dist/HiddenPersonalLinks.svelte +6 -0
- package/dist/HiddenPersonalLinks.svelte.d.ts +27 -0
- package/dist/HiddenPersonalLinks.svelte.d.ts.map +1 -0
- package/dist/HueInput.svelte +127 -0
- package/dist/HueInput.svelte.d.ts +11 -0
- package/dist/HueInput.svelte.d.ts.map +1 -0
- package/dist/ImgOrSvg.svelte +58 -0
- package/dist/ImgOrSvg.svelte.d.ts +25 -0
- package/dist/ImgOrSvg.svelte.d.ts.map +1 -0
- package/dist/LibraryDetail.svelte +297 -0
- package/dist/LibraryDetail.svelte.d.ts +15 -0
- package/dist/LibraryDetail.svelte.d.ts.map +1 -0
- package/dist/LibrarySummary.svelte +151 -0
- package/dist/LibrarySummary.svelte.d.ts +16 -0
- package/dist/LibrarySummary.svelte.d.ts.map +1 -0
- package/dist/MdnLink.svelte +40 -0
- package/dist/MdnLink.svelte.d.ts +8 -0
- package/dist/MdnLink.svelte.d.ts.map +1 -0
- package/dist/Mdz.svelte +30 -0
- package/dist/Mdz.svelte.d.ts +10 -0
- package/dist/Mdz.svelte.d.ts.map +1 -0
- package/dist/MdzNodeView.svelte +93 -0
- package/dist/MdzNodeView.svelte.d.ts +9 -0
- package/dist/MdzNodeView.svelte.d.ts.map +1 -0
- package/dist/ModuleLink.svelte +48 -0
- package/dist/ModuleLink.svelte.d.ts +8 -0
- package/dist/ModuleLink.svelte.d.ts.map +1 -0
- package/dist/PasteFromClipboard.svelte +35 -0
- package/dist/PasteFromClipboard.svelte.d.ts +9 -0
- package/dist/PasteFromClipboard.svelte.d.ts.map +1 -0
- package/dist/PendingAnimation.svelte +62 -0
- package/dist/PendingAnimation.svelte.d.ts +13 -0
- package/dist/PendingAnimation.svelte.d.ts.map +1 -0
- package/dist/PendingButton.svelte +75 -0
- package/dist/PendingButton.svelte.d.ts +17 -0
- package/dist/PendingButton.svelte.d.ts.map +1 -0
- package/dist/ProjectLinks.svelte +54 -0
- package/dist/ProjectLinks.svelte.d.ts +19 -0
- package/dist/ProjectLinks.svelte.d.ts.map +1 -0
- package/dist/Redirect.svelte +44 -0
- package/dist/Redirect.svelte.d.ts +23 -0
- package/dist/Redirect.svelte.d.ts.map +1 -0
- package/dist/Spiders.svelte +57 -0
- package/dist/Spiders.svelte.d.ts +9 -0
- package/dist/Spiders.svelte.d.ts.map +1 -0
- package/dist/Svg.svelte +99 -0
- package/dist/Svg.svelte.d.ts +54 -0
- package/dist/Svg.svelte.d.ts.map +1 -0
- package/dist/Teleport.svelte +48 -0
- package/dist/Teleport.svelte.d.ts +15 -0
- package/dist/Teleport.svelte.d.ts.map +1 -0
- package/dist/ThemeInput.svelte +75 -0
- package/dist/ThemeInput.svelte.d.ts +15 -0
- package/dist/ThemeInput.svelte.d.ts.map +1 -0
- package/dist/Themed.svelte +101 -0
- package/dist/Themed.svelte.d.ts +24 -0
- package/dist/Themed.svelte.d.ts.map +1 -0
- package/dist/TomeContent.svelte +67 -0
- package/dist/TomeContent.svelte.d.ts +12 -0
- package/dist/TomeContent.svelte.d.ts.map +1 -0
- package/dist/TomeHeader.svelte +56 -0
- package/dist/TomeHeader.svelte.d.ts +4 -0
- package/dist/TomeHeader.svelte.d.ts.map +1 -0
- package/dist/TomeLink.svelte +29 -0
- package/dist/TomeLink.svelte.d.ts +10 -0
- package/dist/TomeLink.svelte.d.ts.map +1 -0
- package/dist/TomeSection.svelte +65 -0
- package/dist/TomeSection.svelte.d.ts +24 -0
- package/dist/TomeSection.svelte.d.ts.map +1 -0
- package/dist/TomeSectionHeader.svelte +90 -0
- package/dist/TomeSectionHeader.svelte.d.ts +13 -0
- package/dist/TomeSectionHeader.svelte.d.ts.map +1 -0
- package/dist/TypeLink.svelte +19 -0
- package/dist/TypeLink.svelte.d.ts +7 -0
- package/dist/TypeLink.svelte.d.ts.map +1 -0
- package/dist/alert.d.ts +7 -0
- package/dist/alert.d.ts.map +1 -0
- package/dist/alert.js +6 -0
- package/dist/api_search.svelte.d.ts +16 -0
- package/dist/api_search.svelte.d.ts.map +1 -0
- package/dist/api_search.svelte.js +61 -0
- package/dist/constants.d.ts +2 -0
- package/dist/constants.d.ts.map +1 -0
- package/dist/constants.js +3 -0
- package/dist/context_helpers.d.ts +17 -0
- package/dist/context_helpers.d.ts.map +1 -0
- package/dist/context_helpers.js +19 -0
- package/dist/contextmenu_helpers.d.ts +16 -0
- package/dist/contextmenu_helpers.d.ts.map +1 -0
- package/dist/contextmenu_helpers.js +39 -0
- package/dist/contextmenu_state.svelte.d.ts +152 -0
- package/dist/contextmenu_state.svelte.d.ts.map +1 -0
- package/dist/contextmenu_state.svelte.js +424 -0
- package/dist/csp.d.ts +160 -0
- package/dist/csp.d.ts.map +1 -0
- package/dist/csp.js +354 -0
- package/dist/csp_of_ryanatkn.d.ts +6 -0
- package/dist/csp_of_ryanatkn.d.ts.map +1 -0
- package/dist/csp_of_ryanatkn.js +14 -0
- package/dist/declaration.svelte.d.ts +84 -0
- package/dist/declaration.svelte.d.ts.map +1 -0
- package/dist/declaration.svelte.js +66 -0
- package/dist/declaration_contextmenu.d.ts +4 -0
- package/dist/declaration_contextmenu.d.ts.map +1 -0
- package/dist/declaration_contextmenu.js +14 -0
- package/dist/dialog.d.ts +24 -0
- package/dist/dialog.d.ts.map +1 -0
- package/dist/dialog.js +12 -0
- package/dist/dimensions.svelte.d.ts +5 -0
- package/dist/dimensions.svelte.d.ts.map +1 -0
- package/dist/dimensions.svelte.js +4 -0
- package/dist/docs_helpers.svelte.d.ts +48 -0
- package/dist/docs_helpers.svelte.d.ts.map +1 -0
- package/dist/docs_helpers.svelte.js +99 -0
- package/dist/helpers.d.ts +2 -0
- package/dist/helpers.d.ts.map +1 -0
- package/dist/helpers.js +16 -0
- package/dist/intersect.svelte.d.ts +47 -0
- package/dist/intersect.svelte.d.ts.map +1 -0
- package/dist/intersect.svelte.js +92 -0
- package/dist/library.svelte.d.ts +197 -0
- package/dist/library.svelte.d.ts.map +1 -0
- package/dist/library.svelte.js +130 -0
- package/dist/library_gen.d.ts +34 -0
- package/dist/library_gen.d.ts.map +1 -0
- package/dist/library_gen.js +123 -0
- package/dist/library_gen_helpers.d.ts +85 -0
- package/dist/library_gen_helpers.d.ts.map +1 -0
- package/dist/library_gen_helpers.js +188 -0
- package/dist/library_helpers.d.ts +54 -0
- package/dist/library_helpers.d.ts.map +1 -0
- package/dist/library_helpers.js +102 -0
- package/dist/logos.d.ts +134 -0
- package/dist/logos.d.ts.map +1 -0
- package/dist/logos.js +281 -0
- package/dist/mdz.d.ts +106 -0
- package/dist/mdz.d.ts.map +1 -0
- package/dist/mdz.js +1481 -0
- package/dist/mdz_components.d.ts +37 -0
- package/dist/mdz_components.d.ts.map +1 -0
- package/dist/mdz_components.js +12 -0
- package/dist/module.svelte.d.ts +47 -0
- package/dist/module.svelte.d.ts.map +1 -0
- package/dist/module.svelte.js +56 -0
- package/dist/module_contextmenu.d.ts +4 -0
- package/dist/module_contextmenu.d.ts.map +1 -0
- package/dist/module_contextmenu.js +14 -0
- package/dist/module_helpers.d.ts +69 -0
- package/dist/module_helpers.d.ts.map +1 -0
- package/dist/module_helpers.js +87 -0
- package/dist/rune_helpers.svelte.d.ts +6 -0
- package/dist/rune_helpers.svelte.d.ts.map +1 -0
- package/dist/rune_helpers.svelte.js +10 -0
- package/dist/storage.d.ts +13 -0
- package/dist/storage.d.ts.map +1 -0
- package/dist/storage.js +43 -0
- package/dist/svelte_helpers.d.ts +37 -0
- package/dist/svelte_helpers.d.ts.map +1 -0
- package/dist/svelte_helpers.js +245 -0
- package/dist/themer.svelte.d.ts +24 -0
- package/dist/themer.svelte.d.ts.map +1 -0
- package/dist/themer.svelte.js +43 -0
- package/dist/tome.d.ts +80 -0
- package/dist/tome.d.ts.map +1 -0
- package/dist/tome.js +27 -0
- package/dist/ts_helpers.d.ts +110 -0
- package/dist/ts_helpers.d.ts.map +1 -0
- package/dist/ts_helpers.js +533 -0
- package/dist/tsdoc_helpers.d.ts +98 -0
- package/dist/tsdoc_helpers.d.ts.map +1 -0
- package/dist/tsdoc_helpers.js +221 -0
- package/package.json +128 -0
- package/src/lib/alert.ts +14 -0
- package/src/lib/api_search.svelte.ts +85 -0
- package/src/lib/constants.ts +3 -0
- package/src/lib/context_helpers.ts +47 -0
- package/src/lib/contextmenu_helpers.ts +63 -0
- package/src/lib/contextmenu_state.svelte.ts +515 -0
- package/src/lib/csp.ts +576 -0
- package/src/lib/csp_of_ryanatkn.ts +16 -0
- package/src/lib/declaration.svelte.ts +102 -0
- package/src/lib/declaration_contextmenu.ts +22 -0
- package/src/lib/dialog.ts +35 -0
- package/src/lib/dimensions.svelte.ts +4 -0
- package/src/lib/docs_helpers.svelte.ts +149 -0
- package/src/lib/helpers.ts +10 -0
- package/src/lib/intersect.svelte.ts +152 -0
- package/src/lib/library.svelte.ts +162 -0
- package/src/lib/library_gen.ts +160 -0
- package/src/lib/library_gen_helpers.ts +262 -0
- package/src/lib/library_helpers.ts +123 -0
- package/src/lib/logos.ts +302 -0
- package/src/lib/mdz.ts +1819 -0
- package/src/lib/mdz_components.ts +34 -0
- package/src/lib/module.svelte.ts +78 -0
- package/src/lib/module_contextmenu.ts +20 -0
- package/src/lib/module_helpers.ts +113 -0
- package/src/lib/rune_helpers.svelte.ts +10 -0
- package/src/lib/storage.ts +48 -0
- package/src/lib/svelte_helpers.ts +303 -0
- package/src/lib/themer.svelte.ts +68 -0
- package/src/lib/tome.ts +38 -0
- package/src/lib/ts_helpers.ts +662 -0
- package/src/lib/tsdoc_helpers.ts +259 -0
package/dist/Card.svelte
ADDED
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import {page} from '$app/state';
|
|
3
|
+
import type {Snippet} from 'svelte';
|
|
4
|
+
|
|
5
|
+
// TODO think through Alert+Card APIs together, one can be a button and the other a link atm
|
|
6
|
+
|
|
7
|
+
const {
|
|
8
|
+
tag,
|
|
9
|
+
href,
|
|
10
|
+
align = 'left',
|
|
11
|
+
attrs,
|
|
12
|
+
icon,
|
|
13
|
+
children,
|
|
14
|
+
}: {
|
|
15
|
+
tag?: string | undefined;
|
|
16
|
+
href?: string | undefined;
|
|
17
|
+
align?: 'left' | 'right' | 'above' | 'below';
|
|
18
|
+
attrs?: any; // type? what about the optional tag though? (button etc - maybe API should be more explicit)
|
|
19
|
+
icon?: string | Snippet;
|
|
20
|
+
children: Snippet;
|
|
21
|
+
} = $props();
|
|
22
|
+
|
|
23
|
+
const link = $derived(!!href);
|
|
24
|
+
const selected = $derived(link && page.url.pathname === href);
|
|
25
|
+
const final_tag = $derived(tag ?? (link ? 'a' : 'div'));
|
|
26
|
+
const inferred_attrs = $derived(link ? {href} : undefined);
|
|
27
|
+
|
|
28
|
+
const left = $derived(align === 'left');
|
|
29
|
+
const right = $derived(align === 'right');
|
|
30
|
+
const above = $derived(align === 'above');
|
|
31
|
+
const below = $derived(align === 'below');
|
|
32
|
+
|
|
33
|
+
const fallback_icon = $derived(link ? '🔗' : '🪧');
|
|
34
|
+
const final_icon: string | Snippet = $derived(icon ?? fallback_icon);
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<svelte:element
|
|
38
|
+
this={final_tag}
|
|
39
|
+
class="card"
|
|
40
|
+
{...attrs}
|
|
41
|
+
{...inferred_attrs}
|
|
42
|
+
class:link
|
|
43
|
+
class:selected
|
|
44
|
+
class:left
|
|
45
|
+
class:right
|
|
46
|
+
class:above
|
|
47
|
+
class:below
|
|
48
|
+
>
|
|
49
|
+
{#if align === 'left' || align === 'above'}
|
|
50
|
+
{@render icon_snippet()}
|
|
51
|
+
{/if}
|
|
52
|
+
<div class="content">
|
|
53
|
+
{@render children()}
|
|
54
|
+
</div>
|
|
55
|
+
{#if align === 'right' || align === 'below'}
|
|
56
|
+
{@render icon_snippet()}
|
|
57
|
+
{/if}
|
|
58
|
+
</svelte:element>
|
|
59
|
+
|
|
60
|
+
<!-- TODO name? -->
|
|
61
|
+
{#snippet icon_snippet()}
|
|
62
|
+
<div class="icon">
|
|
63
|
+
{#if typeof final_icon === 'string'}
|
|
64
|
+
{final_icon}
|
|
65
|
+
{:else}
|
|
66
|
+
{@render final_icon()}
|
|
67
|
+
{/if}
|
|
68
|
+
</div>
|
|
69
|
+
{/snippet}
|
|
70
|
+
|
|
71
|
+
<style>
|
|
72
|
+
.card {
|
|
73
|
+
--icon_size: var(--icon_size_lg);
|
|
74
|
+
--icon_margin: var(--space_lg);
|
|
75
|
+
display: flex;
|
|
76
|
+
font-size: var(--font_size_xl2);
|
|
77
|
+
align-items: center;
|
|
78
|
+
padding: var(--space_lg);
|
|
79
|
+
width: var(--card_width);
|
|
80
|
+
background-color: var(--fg_1);
|
|
81
|
+
border-radius: var(--border_radius, var(--border_radius_md));
|
|
82
|
+
text-decoration: none;
|
|
83
|
+
text-align: left;
|
|
84
|
+
}
|
|
85
|
+
.right {
|
|
86
|
+
justify-content: flex-end;
|
|
87
|
+
}
|
|
88
|
+
.above,
|
|
89
|
+
.below {
|
|
90
|
+
flex-direction: column;
|
|
91
|
+
text-align: center;
|
|
92
|
+
}
|
|
93
|
+
.link {
|
|
94
|
+
box-shadow: var(
|
|
95
|
+
--shadow,
|
|
96
|
+
var(--shadow_inset_bottom_sm)
|
|
97
|
+
color-mix(in hsl, var(--shadow_color) var(--shadow_alpha_2), transparent)
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
.link:active {
|
|
101
|
+
box-shadow: var(
|
|
102
|
+
--shadow,
|
|
103
|
+
var(--shadow_inset_top_sm)
|
|
104
|
+
color-mix(in hsl, var(--shadow_color) var(--shadow_alpha_2), transparent)
|
|
105
|
+
);
|
|
106
|
+
}
|
|
107
|
+
.link.selected .content,
|
|
108
|
+
.link:hover .content {
|
|
109
|
+
text-decoration: underline;
|
|
110
|
+
}
|
|
111
|
+
.left .content {
|
|
112
|
+
padding-right: var(--space_sm);
|
|
113
|
+
}
|
|
114
|
+
.right .content {
|
|
115
|
+
text-align: right;
|
|
116
|
+
padding-left: var(--space_sm);
|
|
117
|
+
}
|
|
118
|
+
.icon {
|
|
119
|
+
font-size: var(--icon_size, var(--icon_size_md));
|
|
120
|
+
text-align: center;
|
|
121
|
+
display: flex;
|
|
122
|
+
justify-content: center;
|
|
123
|
+
}
|
|
124
|
+
/* TODO @many remove all :global usage after https://github.com/sveltejs/svelte/issues/10143 */
|
|
125
|
+
.left :global(.icon) {
|
|
126
|
+
margin-right: var(--icon_margin);
|
|
127
|
+
}
|
|
128
|
+
.right :global(.icon) {
|
|
129
|
+
margin-left: var(--icon_margin);
|
|
130
|
+
}
|
|
131
|
+
.above :global(.icon) {
|
|
132
|
+
margin-bottom: var(--icon_margin);
|
|
133
|
+
}
|
|
134
|
+
.below :global(.icon) {
|
|
135
|
+
margin-top: var(--icon_margin);
|
|
136
|
+
}
|
|
137
|
+
@media (max-width: 460px) {
|
|
138
|
+
.card {
|
|
139
|
+
font-size: var(--font_size_xl);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
@media (max-width: 380px) {
|
|
143
|
+
.card {
|
|
144
|
+
--icon_size: var(--icon_size_md);
|
|
145
|
+
--icon_margin: var(--space_sm);
|
|
146
|
+
font-size: var(--font_size_lg);
|
|
147
|
+
}
|
|
148
|
+
.icon {
|
|
149
|
+
font-size: var(--icon_size_md);
|
|
150
|
+
margin-right: var(--space_sm);
|
|
151
|
+
}
|
|
152
|
+
.right :global(.icon) {
|
|
153
|
+
margin-right: 0;
|
|
154
|
+
margin-left: var(--space_sm);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
</style>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
tag?: string | undefined;
|
|
4
|
+
href?: string | undefined;
|
|
5
|
+
align?: 'left' | 'right' | 'above' | 'below';
|
|
6
|
+
attrs?: any;
|
|
7
|
+
icon?: string | Snippet;
|
|
8
|
+
children: Snippet;
|
|
9
|
+
};
|
|
10
|
+
declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
11
|
+
type Card = ReturnType<typeof Card>;
|
|
12
|
+
export default Card;
|
|
13
|
+
//# sourceMappingURL=Card.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Card.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEnC,KAAK,gBAAgB,GAAI;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAC7C,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAyDH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import {swallow} from '@fuzdev/fuz_util/dom.js';
|
|
3
|
+
import {color_schemes, type ColorScheme} from '@fuzdev/fuz_css/theme.js';
|
|
4
|
+
|
|
5
|
+
import {themer_context} from './themer.svelte.js';
|
|
6
|
+
|
|
7
|
+
const {
|
|
8
|
+
value = themer_context.get(),
|
|
9
|
+
onchange = (color_scheme) => {
|
|
10
|
+
value.color_scheme = color_scheme; // won't work with POJOs but users could provide their own onchange in that case
|
|
11
|
+
},
|
|
12
|
+
}: {
|
|
13
|
+
value?: {color_scheme: ColorScheme};
|
|
14
|
+
onchange?: (color_scheme: ColorScheme) => void;
|
|
15
|
+
} = $props();
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<!-- TODO maybe support menubar aria
|
|
19
|
+
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role -->
|
|
20
|
+
<menu class="color_scheme_control unstyled">
|
|
21
|
+
{#each color_schemes as color_scheme (color_scheme)}
|
|
22
|
+
{@const selected = color_scheme === value.color_scheme}
|
|
23
|
+
<button
|
|
24
|
+
type="button"
|
|
25
|
+
class="color_scheme color_a"
|
|
26
|
+
role="menuitemradio"
|
|
27
|
+
title={selected
|
|
28
|
+
? `${color_scheme} color scheme is selected`
|
|
29
|
+
: `select ${color_scheme} color scheme`}
|
|
30
|
+
class:selected
|
|
31
|
+
aria-checked={selected}
|
|
32
|
+
onclick={(e) => {
|
|
33
|
+
swallow(e);
|
|
34
|
+
onchange(color_scheme);
|
|
35
|
+
}}
|
|
36
|
+
>
|
|
37
|
+
<div class="content">{color_scheme}</div>
|
|
38
|
+
</button>
|
|
39
|
+
{/each}
|
|
40
|
+
</menu>
|
|
41
|
+
|
|
42
|
+
<style>
|
|
43
|
+
.color_scheme_control {
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: row;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
}
|
|
48
|
+
.content {
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
justify-content: center;
|
|
52
|
+
padding: 0 var(--space_lg);
|
|
53
|
+
}
|
|
54
|
+
.color_scheme {
|
|
55
|
+
border-radius: 0;
|
|
56
|
+
}
|
|
57
|
+
.color_scheme:first-child {
|
|
58
|
+
border-top-left-radius: var(--border_radius, var(--border_radius_md));
|
|
59
|
+
border-bottom-left-radius: var(--border_radius, var(--border_radius_md));
|
|
60
|
+
}
|
|
61
|
+
.color_scheme:last-child {
|
|
62
|
+
border-top-right-radius: var(--border_radius, var(--border_radius_md));
|
|
63
|
+
border-bottom-right-radius: var(--border_radius, var(--border_radius_md));
|
|
64
|
+
}
|
|
65
|
+
</style>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type ColorScheme } from '@fuzdev/fuz_css/theme.js';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
value?: {
|
|
4
|
+
color_scheme: ColorScheme;
|
|
5
|
+
};
|
|
6
|
+
onchange?: (color_scheme: ColorScheme) => void;
|
|
7
|
+
};
|
|
8
|
+
declare const ColorSchemeInput: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
9
|
+
type ColorSchemeInput = ReturnType<typeof ColorSchemeInput>;
|
|
10
|
+
export default ColorSchemeInput;
|
|
11
|
+
//# sourceMappingURL=ColorSchemeInput.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorSchemeInput.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ColorSchemeInput.svelte"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,0BAA0B,CAAC;AAIxE,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE;QAAC,YAAY,EAAE,WAAW,CAAA;KAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,KAAK,IAAI,CAAC;CAC/C,CAAC;AAkCH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script lang="ts" generics="T extends string = 'span'">
|
|
2
|
+
import type {Snippet} from 'svelte';
|
|
3
|
+
import type {SvelteHTMLElements} from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
import {contextmenu_attachment} from './contextmenu_state.svelte.js';
|
|
6
|
+
|
|
7
|
+
const {
|
|
8
|
+
tag = 'span' as T, // TODO why is casting needed?
|
|
9
|
+
attrs,
|
|
10
|
+
entries,
|
|
11
|
+
children,
|
|
12
|
+
}: {
|
|
13
|
+
// TODO custom tag?
|
|
14
|
+
tag?: T;
|
|
15
|
+
attrs?: SvelteHTMLElements[T];
|
|
16
|
+
entries: Snippet;
|
|
17
|
+
children: Snippet;
|
|
18
|
+
} = $props();
|
|
19
|
+
|
|
20
|
+
// Ideally this wouldn't have a wrapper element,
|
|
21
|
+
// but I don't see a decent way to map DOM click events
|
|
22
|
+
// from anywhere to the Svelte context without gross overhead.
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<svelte:element
|
|
26
|
+
this={tag}
|
|
27
|
+
class="display_contents"
|
|
28
|
+
{...attrs}
|
|
29
|
+
{@attach contextmenu_attachment(entries)}>{@render children()}</svelte:element
|
|
30
|
+
>
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { SvelteHTMLElements } from 'svelte/elements';
|
|
3
|
+
declare function $$render<T extends string = 'span'>(): {
|
|
4
|
+
props: {
|
|
5
|
+
tag?: T;
|
|
6
|
+
attrs?: SvelteHTMLElements[T];
|
|
7
|
+
entries: Snippet;
|
|
8
|
+
children: Snippet;
|
|
9
|
+
};
|
|
10
|
+
exports: {};
|
|
11
|
+
bindings: "";
|
|
12
|
+
slots: {};
|
|
13
|
+
events: {};
|
|
14
|
+
};
|
|
15
|
+
declare class __sveltets_Render<T extends string = 'span'> {
|
|
16
|
+
props(): ReturnType<typeof $$render<T>>['props'];
|
|
17
|
+
events(): ReturnType<typeof $$render<T>>['events'];
|
|
18
|
+
slots(): ReturnType<typeof $$render<T>>['slots'];
|
|
19
|
+
bindings(): "";
|
|
20
|
+
exports(): {};
|
|
21
|
+
}
|
|
22
|
+
interface $$IsomorphicComponent {
|
|
23
|
+
new <T extends string = 'span'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
|
|
24
|
+
$$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
|
|
25
|
+
} & ReturnType<__sveltets_Render<T>['exports']>;
|
|
26
|
+
<T extends string = 'span'>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
|
|
27
|
+
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
28
|
+
}
|
|
29
|
+
declare const Contextmenu: $$IsomorphicComponent;
|
|
30
|
+
type Contextmenu<T extends string = 'span'> = InstanceType<typeof Contextmenu<T>>;
|
|
31
|
+
export default Contextmenu;
|
|
32
|
+
//# sourceMappingURL=Contextmenu.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Contextmenu.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Contextmenu.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGxD,iBAAS,QAAQ,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;;cAOnC,CAAC;gBACC,kBAAkB,CAAC,CAAC,CAAC;iBACpB,OAAO;kBACN,OAAO;;;;;;EAkBsG;AACzH,cAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC7C,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACpZ,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACnJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,WAAW,EAAE,qBAAmC,CAAC;AACrC,KAAK,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACpF,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type {Snippet} from 'svelte';
|
|
3
|
+
import {swallow} from '@fuzdev/fuz_util/dom.js';
|
|
4
|
+
|
|
5
|
+
import PendingAnimation from './PendingAnimation.svelte';
|
|
6
|
+
import {contextmenu_context, type ContextmenuRun} from './contextmenu_state.svelte.js';
|
|
7
|
+
|
|
8
|
+
const {
|
|
9
|
+
run,
|
|
10
|
+
icon,
|
|
11
|
+
children,
|
|
12
|
+
disabled: disabled_prop = false,
|
|
13
|
+
}: {
|
|
14
|
+
run: ContextmenuRun;
|
|
15
|
+
icon?: string | Snippet;
|
|
16
|
+
children: Snippet;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
} = $props();
|
|
19
|
+
|
|
20
|
+
const contextmenu = contextmenu_context.get();
|
|
21
|
+
|
|
22
|
+
const entry = contextmenu.add_entry(
|
|
23
|
+
() => run,
|
|
24
|
+
() => disabled_prop,
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
const {selected, pending, error_message} = $derived(entry);
|
|
28
|
+
const disabled = $derived(entry.disabled());
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<!-- disabling the a11y warning because a parent element handles keyboard events -->
|
|
32
|
+
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
33
|
+
<li
|
|
34
|
+
class="menu_item plain selectable deselectable"
|
|
35
|
+
class:selected
|
|
36
|
+
class:disabled
|
|
37
|
+
role="menuitem"
|
|
38
|
+
aria-label="contextmenu entry"
|
|
39
|
+
aria-disabled={disabled}
|
|
40
|
+
tabindex="-1"
|
|
41
|
+
title={error_message ? `Error: ${error_message}` : undefined}
|
|
42
|
+
onclick={disabled
|
|
43
|
+
? undefined
|
|
44
|
+
: () => {
|
|
45
|
+
// This timeout lets event handlers react to the current DOM
|
|
46
|
+
// before the item's changes are applied.
|
|
47
|
+
setTimeout(() => contextmenu.activate(entry));
|
|
48
|
+
}}
|
|
49
|
+
onmouseenter={disabled
|
|
50
|
+
? undefined
|
|
51
|
+
: (e) => {
|
|
52
|
+
swallow(e);
|
|
53
|
+
contextmenu.select(entry);
|
|
54
|
+
}}
|
|
55
|
+
>
|
|
56
|
+
<div class="content">
|
|
57
|
+
<div class="icon">
|
|
58
|
+
{#if typeof icon === 'string'}
|
|
59
|
+
{icon}
|
|
60
|
+
{:else if icon}
|
|
61
|
+
{@render icon()}
|
|
62
|
+
{/if}
|
|
63
|
+
</div>
|
|
64
|
+
<div class="title">{@render children()}</div>
|
|
65
|
+
{#if pending}<PendingAnimation />{:else if error_message}⚠️{/if}
|
|
66
|
+
</div>
|
|
67
|
+
</li>
|
|
68
|
+
|
|
69
|
+
<style>
|
|
70
|
+
/* TODO hacky, needed because the base `.menu_item` added z-index */
|
|
71
|
+
.menu_item {
|
|
72
|
+
z-index: unset;
|
|
73
|
+
}
|
|
74
|
+
</style>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import { type ContextmenuRun } from './contextmenu_state.svelte.js';
|
|
3
|
+
type $$ComponentProps = {
|
|
4
|
+
run: ContextmenuRun;
|
|
5
|
+
icon?: string | Snippet;
|
|
6
|
+
children: Snippet;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
};
|
|
9
|
+
declare const ContextmenuEntry: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
10
|
+
type ContextmenuEntry = ReturnType<typeof ContextmenuEntry>;
|
|
11
|
+
export default ContextmenuEntry;
|
|
12
|
+
//# sourceMappingURL=ContextmenuEntry.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ContextmenuEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuEntry.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAIpC,OAAO,EAAsB,KAAK,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAEtF,KAAK,gBAAgB,GAAI;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAyDH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import {strip_start} from '@fuzdev/fuz_util/string.js';
|
|
3
|
+
import {swallow} from '@fuzdev/fuz_util/dom.js';
|
|
4
|
+
import type {Snippet} from 'svelte';
|
|
5
|
+
import {page} from '$app/state';
|
|
6
|
+
|
|
7
|
+
import {contextmenu_context} from './contextmenu_state.svelte.js';
|
|
8
|
+
|
|
9
|
+
const {
|
|
10
|
+
href,
|
|
11
|
+
icon,
|
|
12
|
+
children,
|
|
13
|
+
disabled: disabled_prop = false,
|
|
14
|
+
external_rel = 'noreferrer', // TODO smarter defaults
|
|
15
|
+
}: {
|
|
16
|
+
href: string;
|
|
17
|
+
icon?: string | Snippet; // TODO @many rethink this API, add svg icon fallback
|
|
18
|
+
children?: Snippet; // TODO @many rethink this API
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
external_rel?: string;
|
|
21
|
+
} = $props();
|
|
22
|
+
|
|
23
|
+
const contextmenu = contextmenu_context.get();
|
|
24
|
+
|
|
25
|
+
let anchor_el: HTMLAnchorElement | undefined = $state();
|
|
26
|
+
|
|
27
|
+
// Register with state management for keyboard navigation
|
|
28
|
+
// When activated via keyboard, programmatically click the anchor to trigger navigation
|
|
29
|
+
const entry = contextmenu.add_entry(
|
|
30
|
+
() => () => {
|
|
31
|
+
if (anchor_el) anchor_el.click();
|
|
32
|
+
},
|
|
33
|
+
() => disabled_prop,
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
const disabled = $derived(entry.disabled());
|
|
37
|
+
|
|
38
|
+
// TODO move or upstream? rename? `print_url`?
|
|
39
|
+
const format_url = (url: string, host: string = location.host): string => {
|
|
40
|
+
const formatted = strip_start(strip_start(url, 'https://'), 'http://');
|
|
41
|
+
return formatted.startsWith(host + '/') ? strip_start(formatted, host) : formatted;
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
const text = $derived(format_url(href));
|
|
45
|
+
const external = $derived(!(text[0] === '.' || (text[0] === '/' && text[1] !== '/')));
|
|
46
|
+
const rel = $derived(external ? external_rel : undefined);
|
|
47
|
+
|
|
48
|
+
const selected = $derived(page.url.pathname === href);
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<li role="none">
|
|
52
|
+
<!-- TODO -next-line doesnt work? -->
|
|
53
|
+
<!-- eslint-disable svelte/no-navigation-without-resolve -->
|
|
54
|
+
<a
|
|
55
|
+
bind:this={anchor_el}
|
|
56
|
+
class="menu_item plain"
|
|
57
|
+
class:selected
|
|
58
|
+
class:disabled
|
|
59
|
+
role="menuitem"
|
|
60
|
+
aria-disabled={disabled}
|
|
61
|
+
tabindex="-1"
|
|
62
|
+
{href}
|
|
63
|
+
{rel}
|
|
64
|
+
onclick={disabled ? undefined : () => contextmenu.close()}
|
|
65
|
+
oncontextmenu={(e) => {
|
|
66
|
+
// Stop propagation to prevent the window handler from opening another Fuz contextmenu.
|
|
67
|
+
// Without this, the event would bubble to the window handler, which calls
|
|
68
|
+
// `contextmenu_query_params` (contextmenu_state.svelte.ts:410), which auto-detects
|
|
69
|
+
// `<a>` tags and reopens the Fuz contextmenu instead of showing the browser's native menu.
|
|
70
|
+
// Allow default behavior to show the browser's native contextmenu for the link.
|
|
71
|
+
e.stopPropagation();
|
|
72
|
+
}}
|
|
73
|
+
onmouseenter={disabled
|
|
74
|
+
? undefined
|
|
75
|
+
: (e) => {
|
|
76
|
+
swallow(e);
|
|
77
|
+
contextmenu.select(entry);
|
|
78
|
+
}}
|
|
79
|
+
>
|
|
80
|
+
<div class="content">
|
|
81
|
+
<div class="icon">
|
|
82
|
+
{#if typeof icon === 'string'}
|
|
83
|
+
{icon}
|
|
84
|
+
{:else if icon}
|
|
85
|
+
{@render icon()}
|
|
86
|
+
{/if}
|
|
87
|
+
</div>
|
|
88
|
+
<div class="title">
|
|
89
|
+
<span class="text"
|
|
90
|
+
>{#if children}{@render children()}{:else}{text}{/if}</span
|
|
91
|
+
>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
</a>
|
|
95
|
+
</li>
|
|
96
|
+
|
|
97
|
+
<style>
|
|
98
|
+
li {
|
|
99
|
+
display: flex;
|
|
100
|
+
}
|
|
101
|
+
/* Underline only the link text, not the icon. */
|
|
102
|
+
a:hover {
|
|
103
|
+
text-decoration: none;
|
|
104
|
+
}
|
|
105
|
+
a:hover .text {
|
|
106
|
+
text-decoration: underline;
|
|
107
|
+
}
|
|
108
|
+
/* TODO hacky, needed because the base `.menu_item` added z-index */
|
|
109
|
+
.menu_item {
|
|
110
|
+
z-index: unset;
|
|
111
|
+
}
|
|
112
|
+
</style>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
href: string;
|
|
4
|
+
icon?: string | Snippet;
|
|
5
|
+
children?: Snippet;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
external_rel?: string;
|
|
8
|
+
};
|
|
9
|
+
declare const ContextmenuLinkEntry: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
10
|
+
type ContextmenuLinkEntry = ReturnType<typeof ContextmenuLinkEntry>;
|
|
11
|
+
export default ContextmenuLinkEntry;
|
|
12
|
+
//# sourceMappingURL=ContextmenuLinkEntry.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ContextmenuLinkEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuLinkEntry.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKnC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAgFH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
|