@classic-homes/theme-svelte 1.34.1 → 1.36.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/dist/lib/components/AppLauncher.svelte +102 -0
- package/dist/lib/components/AppLauncher.svelte.d.ts +46 -0
- package/dist/lib/components/AppLauncherGrid.svelte +91 -0
- package/dist/lib/components/AppLauncherGrid.svelte.d.ts +24 -0
- package/dist/lib/index.d.ts +2 -0
- package/dist/lib/index.js +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { IconName } from './Icon.svelte';
|
|
3
|
+
|
|
4
|
+
export interface AppLauncherItem {
|
|
5
|
+
id: string;
|
|
6
|
+
/** Name under the tile */
|
|
7
|
+
label: string;
|
|
8
|
+
/** Where the tile goes: a real link, so Ctrl/middle-click open a new tab */
|
|
9
|
+
href: string;
|
|
10
|
+
/** Tile icon (ignored when the `icon` snippet is set) */
|
|
11
|
+
icon?: IconName;
|
|
12
|
+
/** Opens in a new tab (`target="_blank"`, `rel="noopener noreferrer"`) */
|
|
13
|
+
external?: boolean;
|
|
14
|
+
/** Shown as the tile's tooltip */
|
|
15
|
+
description?: string;
|
|
16
|
+
}
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<script lang="ts">
|
|
20
|
+
import { Popover } from 'bits-ui';
|
|
21
|
+
import type { Snippet } from 'svelte';
|
|
22
|
+
import { cn } from '../utils.js';
|
|
23
|
+
import Icon from './Icon.svelte';
|
|
24
|
+
import AppLauncherGrid from './AppLauncherGrid.svelte';
|
|
25
|
+
import { buttonVariants } from './button-variants.js';
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* AppLauncher - the header's "apps" grid: a grid-icon button that opens a
|
|
29
|
+
* panel of tiles linking to the other systems people use.
|
|
30
|
+
*
|
|
31
|
+
* Tiles are plain links, so Ctrl/middle-click open a new tab; external ones
|
|
32
|
+
* open in a new tab anyway. Arrow keys move between tiles, Home/End jump to
|
|
33
|
+
* the first/last, Escape closes and returns focus to the button.
|
|
34
|
+
*/
|
|
35
|
+
interface Props {
|
|
36
|
+
apps: AppLauncherItem[];
|
|
37
|
+
/** Accessible name of the button and the panel (default: "Apps") */
|
|
38
|
+
triggerLabel?: string;
|
|
39
|
+
/** Heading at the top of the panel; none when unset */
|
|
40
|
+
title?: string;
|
|
41
|
+
/** Tiles per row (default: 3) */
|
|
42
|
+
columns?: number;
|
|
43
|
+
/** Panel alignment against the button (default: end) */
|
|
44
|
+
align?: 'start' | 'center' | 'end';
|
|
45
|
+
/** Panel open (bindable) */
|
|
46
|
+
open?: boolean;
|
|
47
|
+
onOpenChange?: (open: boolean) => void;
|
|
48
|
+
/** Classes for the panel */
|
|
49
|
+
class?: string;
|
|
50
|
+
/** Classes for the trigger button */
|
|
51
|
+
triggerClass?: string;
|
|
52
|
+
/** Draws a tile's icon instead of `item.icon`, e.g. an app's own mark */
|
|
53
|
+
icon?: Snippet<[AppLauncherItem]>;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
let {
|
|
57
|
+
apps,
|
|
58
|
+
triggerLabel = 'Apps',
|
|
59
|
+
title,
|
|
60
|
+
columns = 3,
|
|
61
|
+
align = 'end',
|
|
62
|
+
open = $bindable(false),
|
|
63
|
+
onOpenChange,
|
|
64
|
+
class: className,
|
|
65
|
+
triggerClass,
|
|
66
|
+
icon,
|
|
67
|
+
}: Props = $props();
|
|
68
|
+
|
|
69
|
+
function handleOpenChange(next: boolean) {
|
|
70
|
+
open = next;
|
|
71
|
+
onOpenChange?.(next);
|
|
72
|
+
}
|
|
73
|
+
</script>
|
|
74
|
+
|
|
75
|
+
<Popover.Root bind:open onOpenChange={handleOpenChange}>
|
|
76
|
+
<Popover.Trigger
|
|
77
|
+
class={cn(buttonVariants({ variant: 'ghost', size: 'icon' }), triggerClass)}
|
|
78
|
+
aria-label={triggerLabel}
|
|
79
|
+
>
|
|
80
|
+
<Icon name="grid" size={20} aria-hidden="true" />
|
|
81
|
+
</Popover.Trigger>
|
|
82
|
+
<Popover.Portal>
|
|
83
|
+
<Popover.Content
|
|
84
|
+
{align}
|
|
85
|
+
sideOffset={6}
|
|
86
|
+
collisionPadding={8}
|
|
87
|
+
class={cn(
|
|
88
|
+
'z-50 max-h-[calc(100dvh-5rem)] w-[min(20rem,calc(100vw-2rem))] overflow-y-auto rounded-lg border border-border bg-popover p-2 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
|
|
89
|
+
className
|
|
90
|
+
)}
|
|
91
|
+
>
|
|
92
|
+
<AppLauncherGrid
|
|
93
|
+
{apps}
|
|
94
|
+
label={title ?? triggerLabel}
|
|
95
|
+
{title}
|
|
96
|
+
{columns}
|
|
97
|
+
{icon}
|
|
98
|
+
onSelect={() => handleOpenChange(false)}
|
|
99
|
+
/>
|
|
100
|
+
</Popover.Content>
|
|
101
|
+
</Popover.Portal>
|
|
102
|
+
</Popover.Root>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import type { IconName } from './Icon.svelte';
|
|
2
|
+
export interface AppLauncherItem {
|
|
3
|
+
id: string;
|
|
4
|
+
/** Name under the tile */
|
|
5
|
+
label: string;
|
|
6
|
+
/** Where the tile goes: a real link, so Ctrl/middle-click open a new tab */
|
|
7
|
+
href: string;
|
|
8
|
+
/** Tile icon (ignored when the `icon` snippet is set) */
|
|
9
|
+
icon?: IconName;
|
|
10
|
+
/** Opens in a new tab (`target="_blank"`, `rel="noopener noreferrer"`) */
|
|
11
|
+
external?: boolean;
|
|
12
|
+
/** Shown as the tile's tooltip */
|
|
13
|
+
description?: string;
|
|
14
|
+
}
|
|
15
|
+
import type { Snippet } from 'svelte';
|
|
16
|
+
/**
|
|
17
|
+
* AppLauncher - the header's "apps" grid: a grid-icon button that opens a
|
|
18
|
+
* panel of tiles linking to the other systems people use.
|
|
19
|
+
*
|
|
20
|
+
* Tiles are plain links, so Ctrl/middle-click open a new tab; external ones
|
|
21
|
+
* open in a new tab anyway. Arrow keys move between tiles, Home/End jump to
|
|
22
|
+
* the first/last, Escape closes and returns focus to the button.
|
|
23
|
+
*/
|
|
24
|
+
interface Props {
|
|
25
|
+
apps: AppLauncherItem[];
|
|
26
|
+
/** Accessible name of the button and the panel (default: "Apps") */
|
|
27
|
+
triggerLabel?: string;
|
|
28
|
+
/** Heading at the top of the panel; none when unset */
|
|
29
|
+
title?: string;
|
|
30
|
+
/** Tiles per row (default: 3) */
|
|
31
|
+
columns?: number;
|
|
32
|
+
/** Panel alignment against the button (default: end) */
|
|
33
|
+
align?: 'start' | 'center' | 'end';
|
|
34
|
+
/** Panel open (bindable) */
|
|
35
|
+
open?: boolean;
|
|
36
|
+
onOpenChange?: (open: boolean) => void;
|
|
37
|
+
/** Classes for the panel */
|
|
38
|
+
class?: string;
|
|
39
|
+
/** Classes for the trigger button */
|
|
40
|
+
triggerClass?: string;
|
|
41
|
+
/** Draws a tile's icon instead of `item.icon`, e.g. an app's own mark */
|
|
42
|
+
icon?: Snippet<[AppLauncherItem]>;
|
|
43
|
+
}
|
|
44
|
+
declare const AppLauncher: import("svelte").Component<Props, {}, "open">;
|
|
45
|
+
type AppLauncher = ReturnType<typeof AppLauncher>;
|
|
46
|
+
export default AppLauncher;
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
import type { AppLauncherItem } from './AppLauncher.svelte';
|
|
4
|
+
import Icon from './Icon.svelte';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* AppLauncherGrid - AppLauncher's tile grid on its own, for showing the apps
|
|
8
|
+
* somewhere other than the header popover (a phone's bottom Sheet, a home
|
|
9
|
+
* page). Tiles are links; arrow keys walk the grid, Home/End go to the ends.
|
|
10
|
+
*/
|
|
11
|
+
interface Props {
|
|
12
|
+
apps: AppLauncherItem[];
|
|
13
|
+
/** Accessible name of the grid's `nav` */
|
|
14
|
+
label: string;
|
|
15
|
+
/** Visible heading above the tiles; none when unset */
|
|
16
|
+
title?: string;
|
|
17
|
+
/** Tiles per row (default: 3) */
|
|
18
|
+
columns?: number;
|
|
19
|
+
/** Called when a tile is picked, e.g. to close the surface around it */
|
|
20
|
+
onSelect?: (app: AppLauncherItem) => void;
|
|
21
|
+
/** Draws a tile's icon instead of `item.icon`, e.g. an app's own mark */
|
|
22
|
+
icon?: Snippet<[AppLauncherItem]>;
|
|
23
|
+
class?: string;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
let { apps, label, title, columns = 3, onSelect, icon, class: className }: Props = $props();
|
|
27
|
+
|
|
28
|
+
/** Arrow keys walk the grid by row and column; Home/End go to the ends. */
|
|
29
|
+
function handleKeydown(event: KeyboardEvent) {
|
|
30
|
+
const tiles = Array.from(
|
|
31
|
+
(event.currentTarget as HTMLElement).querySelectorAll<HTMLElement>('[data-app-launcher-tile]')
|
|
32
|
+
);
|
|
33
|
+
const current = tiles.indexOf(document.activeElement as HTMLElement);
|
|
34
|
+
if (current === -1) return;
|
|
35
|
+
const last = tiles.length - 1;
|
|
36
|
+
const step: Record<string, number> = {
|
|
37
|
+
ArrowRight: 1,
|
|
38
|
+
ArrowLeft: -1,
|
|
39
|
+
ArrowDown: columns,
|
|
40
|
+
ArrowUp: -columns,
|
|
41
|
+
};
|
|
42
|
+
let next: number;
|
|
43
|
+
if (event.key === 'Home') next = 0;
|
|
44
|
+
else if (event.key === 'End') next = last;
|
|
45
|
+
else if (event.key in step) next = current + step[event.key];
|
|
46
|
+
else return;
|
|
47
|
+
event.preventDefault();
|
|
48
|
+
tiles[Math.min(Math.max(next, 0), last)].focus();
|
|
49
|
+
}
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<nav aria-label={label} class={className}>
|
|
53
|
+
{#if title}
|
|
54
|
+
<p class="px-2 pb-2 pt-1 text-sm font-semibold">{title}</p>
|
|
55
|
+
{/if}
|
|
56
|
+
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
|
57
|
+
<ul
|
|
58
|
+
class="grid gap-1"
|
|
59
|
+
style:grid-template-columns="repeat({columns}, minmax(0, 1fr))"
|
|
60
|
+
onkeydown={handleKeydown}
|
|
61
|
+
>
|
|
62
|
+
{#each apps as app (app.id)}
|
|
63
|
+
<li>
|
|
64
|
+
<a
|
|
65
|
+
href={app.href}
|
|
66
|
+
target={app.external ? '_blank' : undefined}
|
|
67
|
+
rel={app.external ? 'noopener noreferrer' : undefined}
|
|
68
|
+
title={app.description}
|
|
69
|
+
data-app-launcher-tile={app.id}
|
|
70
|
+
class="flex h-full flex-col items-center gap-1.5 rounded-md px-1 py-3 text-center text-xs font-medium text-foreground hover:bg-muted-hover focus-visible:bg-muted-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
71
|
+
onclick={() => onSelect?.(app)}
|
|
72
|
+
>
|
|
73
|
+
<span
|
|
74
|
+
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"
|
|
75
|
+
aria-hidden="true"
|
|
76
|
+
>
|
|
77
|
+
{#if icon}
|
|
78
|
+
{@render icon(app)}
|
|
79
|
+
{:else}
|
|
80
|
+
<Icon name={app.icon ?? 'external-link'} size={22} />
|
|
81
|
+
{/if}
|
|
82
|
+
</span>
|
|
83
|
+
<span class="line-clamp-2 break-words">{app.label}</span>
|
|
84
|
+
{#if app.external}
|
|
85
|
+
<span class="sr-only">(opens in a new tab)</span>
|
|
86
|
+
{/if}
|
|
87
|
+
</a>
|
|
88
|
+
</li>
|
|
89
|
+
{/each}
|
|
90
|
+
</ul>
|
|
91
|
+
</nav>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { AppLauncherItem } from './AppLauncher.svelte';
|
|
3
|
+
/**
|
|
4
|
+
* AppLauncherGrid - AppLauncher's tile grid on its own, for showing the apps
|
|
5
|
+
* somewhere other than the header popover (a phone's bottom Sheet, a home
|
|
6
|
+
* page). Tiles are links; arrow keys walk the grid, Home/End go to the ends.
|
|
7
|
+
*/
|
|
8
|
+
interface Props {
|
|
9
|
+
apps: AppLauncherItem[];
|
|
10
|
+
/** Accessible name of the grid's `nav` */
|
|
11
|
+
label: string;
|
|
12
|
+
/** Visible heading above the tiles; none when unset */
|
|
13
|
+
title?: string;
|
|
14
|
+
/** Tiles per row (default: 3) */
|
|
15
|
+
columns?: number;
|
|
16
|
+
/** Called when a tile is picked, e.g. to close the surface around it */
|
|
17
|
+
onSelect?: (app: AppLauncherItem) => void;
|
|
18
|
+
/** Draws a tile's icon instead of `item.icon`, e.g. an app's own mark */
|
|
19
|
+
icon?: Snippet<[AppLauncherItem]>;
|
|
20
|
+
class?: string;
|
|
21
|
+
}
|
|
22
|
+
declare const AppLauncherGrid: import("svelte").Component<Props, {}, "">;
|
|
23
|
+
type AppLauncherGrid = ReturnType<typeof AppLauncherGrid>;
|
|
24
|
+
export default AppLauncherGrid;
|
package/dist/lib/index.d.ts
CHANGED
|
@@ -41,6 +41,8 @@ export { default as Dialog } from './components/Dialog.svelte';
|
|
|
41
41
|
export { default as AlertDialog } from './components/AlertDialog.svelte';
|
|
42
42
|
export { default as Tooltip } from './components/Tooltip.svelte';
|
|
43
43
|
export { default as DropdownMenu } from './components/DropdownMenu.svelte';
|
|
44
|
+
export { default as AppLauncher, type AppLauncherItem } from './components/AppLauncher.svelte';
|
|
45
|
+
export { default as AppLauncherGrid } from './components/AppLauncherGrid.svelte';
|
|
44
46
|
export { default as DataPanel } from './components/DataPanel.svelte';
|
|
45
47
|
export { default as DataPanelHeader } from './components/DataPanelHeader.svelte';
|
|
46
48
|
export { default as DataPanelContent } from './components/DataPanelContent.svelte';
|
package/dist/lib/index.js
CHANGED
|
@@ -49,6 +49,8 @@ export { default as Dialog } from './components/Dialog.svelte';
|
|
|
49
49
|
export { default as AlertDialog } from './components/AlertDialog.svelte';
|
|
50
50
|
export { default as Tooltip } from './components/Tooltip.svelte';
|
|
51
51
|
export { default as DropdownMenu } from './components/DropdownMenu.svelte';
|
|
52
|
+
export { default as AppLauncher } from './components/AppLauncher.svelte';
|
|
53
|
+
export { default as AppLauncherGrid } from './components/AppLauncherGrid.svelte';
|
|
52
54
|
// DataPanel Components
|
|
53
55
|
export { default as DataPanel } from './components/DataPanel.svelte';
|
|
54
56
|
export { default as DataPanelHeader } from './components/DataPanelHeader.svelte';
|