@svadmin/ui 0.38.1 → 0.38.5
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/app.css +10 -5
- package/dist/app.theme.css +1374 -0
- package/dist/components/AICommandBar.svelte +16 -15
- package/dist/components/AboutSettings.svelte +12 -11
- package/dist/components/AdminApp.svelte +144 -70
- package/dist/components/AdminApp.svelte.d.ts +6 -3
- package/dist/components/ApiSettings.svelte +19 -16
- package/dist/components/AppearanceSettings.svelte +18 -16
- package/dist/components/AuditLogDrawer.svelte +6 -3
- package/dist/components/AuditLogViewer.svelte +18 -15
- package/dist/components/Authenticated.svelte +4 -4
- package/dist/components/AutoForm.svelte +19 -16
- package/dist/components/AutoSaveIndicator.svelte +7 -5
- package/dist/components/AutoTable.svelte +85 -71
- package/dist/components/AutoTable.svelte.d.ts +1 -1
- package/dist/components/Breadcrumbs.svelte +17 -13
- package/dist/components/CancelTaskButton.svelte +5 -2
- package/dist/components/CatchAllNavigate.svelte +3 -3
- package/dist/components/ChatDialog.svelte +22 -19
- package/dist/components/ComboboxField.svelte +6 -4
- package/dist/components/CommandPalette.svelte +20 -20
- package/dist/components/ConfigErrorScreen.svelte +12 -10
- package/dist/components/ConfirmDialog.svelte +6 -4
- package/dist/components/CreatePage.svelte +4 -2
- package/dist/components/DevTools.svelte +11 -9
- package/dist/components/DrawerForm.svelte +5 -2
- package/dist/components/EditPage.svelte +8 -5
- package/dist/components/EmptyState.svelte +5 -3
- package/dist/components/ErrorBoundary.svelte +5 -3
- package/dist/components/ErrorComponent.svelte +6 -4
- package/dist/components/ErrorPage.svelte +12 -10
- package/dist/components/FieldRenderer.svelte +17 -15
- package/dist/components/ForgotPasswordPage.svelte +22 -19
- package/dist/components/Header.svelte +7 -4
- package/dist/components/InfiniteList.svelte +6 -3
- package/dist/components/IntegrationsSettings.svelte +9 -6
- package/dist/components/KeyboardShortcuts.svelte +4 -2
- package/dist/components/Layout.svelte +12 -13
- package/dist/components/LazyPage.svelte +47 -0
- package/dist/components/LazyPage.svelte.d.ts +14 -0
- package/dist/components/ListPage.svelte +8 -5
- package/dist/components/LoginPage.svelte +24 -22
- package/dist/components/MarkdownRenderer.svelte +89 -35
- package/dist/components/ModalForm.svelte +4 -2
- package/dist/components/NavigateToResource.svelte +3 -3
- package/dist/components/NotificationsSettings.svelte +26 -24
- package/dist/components/PasswordInput.svelte +4 -2
- package/dist/components/PermissionMatrix.svelte +15 -12
- package/dist/components/ProfilePage.svelte +23 -21
- package/dist/components/RegisterPage.svelte +21 -19
- package/dist/components/ResourceOperationsPage.svelte +3 -2
- package/dist/components/RetryTaskButton.svelte +5 -2
- package/dist/components/RolesSettings.svelte +10 -8
- package/dist/components/SecuritySettings.svelte +26 -23
- package/dist/components/SettingsPage.svelte +14 -11
- package/dist/components/ShowPage.svelte +9 -7
- package/dist/components/Sidebar.svelte +36 -28
- package/dist/components/SidebarItem.svelte +4 -4
- package/dist/components/SidebarItem.svelte.d.ts +1 -1
- package/dist/components/StepsForm.svelte +11 -8
- package/dist/components/TaskDetails.svelte +14 -11
- package/dist/components/TaskList.svelte +14 -11
- package/dist/components/TaskQueueDrawer.svelte +34 -32
- package/dist/components/TaskStatusBadge.svelte +5 -2
- package/dist/components/Toast.svelte +18 -4
- package/dist/components/TooltipButton.svelte +25 -3
- package/dist/components/TwoFactorAuthPage.svelte +26 -24
- package/dist/components/UndoableNotification.svelte +5 -2
- package/dist/components/UpdatePasswordPage.svelte +18 -15
- package/dist/components/VirtualTable.svelte +0 -4
- package/dist/components/account/CompanyProfilePage.svelte +13 -11
- package/dist/components/account/GetStartedPage.svelte +15 -13
- package/dist/components/account/ImportMembersPage.svelte +14 -12
- package/dist/components/account/MembersStarterPage.svelte +10 -8
- package/dist/components/account/SecurityLogPage.svelte +24 -22
- package/dist/components/account/SettingsEnterprisePage.svelte +6 -4
- package/dist/components/account/SettingsPlainPage.svelte +14 -12
- package/dist/components/account/SettingsSidebarPage.svelte +11 -9
- package/dist/components/account/TeamMembersPage.svelte +10 -8
- package/dist/components/buttons/CloneButton.svelte +4 -2
- package/dist/components/buttons/CreateButton.svelte +4 -2
- package/dist/components/buttons/DeleteButton.svelte +6 -4
- package/dist/components/buttons/EditButton.svelte +4 -2
- package/dist/components/buttons/ExportButton.svelte +4 -2
- package/dist/components/buttons/ImportButton.svelte +4 -2
- package/dist/components/buttons/RefreshButton.svelte +4 -2
- package/dist/components/buttons/SaveButton.svelte +4 -2
- package/dist/components/buttons/ShowButton.svelte +4 -2
- package/dist/components/fieldComponentMap.js +0 -3
- package/dist/components/fields/ArrayField.svelte +6 -4
- package/dist/components/fields/JsonField.svelte +5 -3
- package/dist/components/fields/RelationField.svelte +3 -3
- package/dist/components/fields/RichTextField.svelte +4 -2
- package/dist/components/network/TeamCrewTablePage.svelte +18 -16
- package/dist/components/network/UserCardsNFTPage.svelte +11 -9
- package/dist/components/profile/ActivityTimeline.svelte +10 -8
- package/dist/components/profile/ProfileCard.svelte +13 -11
- package/dist/components/profile/ProjectsGrid.svelte +7 -5
- package/dist/components/profile/PublicProfilePage.svelte +18 -16
- package/dist/components/profile/TeamsShowcase.svelte +7 -5
- package/dist/components/toast-host.svelte.d.ts +5 -0
- package/dist/components/toast-host.svelte.js +21 -0
- package/dist/components/ui/command/command-dialog.svelte +29 -13
- package/dist/components/ui/command/command-dialog.svelte.d.ts +4 -3
- package/dist/components/ui/command/command-empty.svelte +18 -0
- package/dist/components/ui/command/command-empty.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-group.svelte +41 -0
- package/dist/components/ui/command/command-group.svelte.d.ts +8 -0
- package/dist/components/ui/command/command-input.svelte +23 -0
- package/dist/components/ui/command/command-input.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-item.svelte +43 -0
- package/dist/components/ui/command/command-item.svelte.d.ts +11 -0
- package/dist/components/ui/command/command-list.svelte +18 -0
- package/dist/components/ui/command/command-list.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-loading.svelte +12 -0
- package/dist/components/ui/command/command-loading.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-separator.svelte +23 -0
- package/dist/components/ui/command/command-separator.svelte.d.ts +7 -0
- package/dist/components/ui/command/command.svelte +26 -0
- package/dist/components/ui/command/command.svelte.d.ts +4 -0
- package/dist/components/ui/command/index.d.ts +55 -2
- package/dist/components/ui/command/index.js +21 -2
- package/dist/components/ui/sheet/sheet-content.svelte +1 -4
- package/dist/components/ui/sheet/sheet-content.svelte.d.ts +1 -3
- package/dist/components/ui/tabs/tabs-content.svelte +6 -2
- package/dist/components/ui/tabs/tabs-context.svelte.d.ts +5 -0
- package/dist/components/ui/tabs/tabs-context.svelte.js +2 -0
- package/dist/components/ui/tabs/tabs-trigger.svelte +49 -4
- package/dist/components/ui/tabs/tabs.svelte +12 -1
- package/dist/components/ui/tooltip/index.d.ts +4 -1
- package/dist/components/ui/tooltip/index.js +3 -1
- package/dist/components/ui/tooltip/tooltip-content.svelte +308 -35
- package/dist/components/ui/tooltip/tooltip-content.svelte.d.ts +42 -3
- package/dist/components/ui/tooltip/tooltip-context.svelte.d.ts +37 -0
- package/dist/components/ui/tooltip/tooltip-context.svelte.js +220 -0
- package/dist/components/ui/tooltip/tooltip-layer-registry.svelte.d.ts +11 -0
- package/dist/components/ui/tooltip/tooltip-layer-registry.svelte.js +93 -0
- package/dist/components/ui/tooltip/tooltip-trigger.svelte +56 -3
- package/dist/components/ui/tooltip/tooltip-trigger.svelte.d.ts +23 -2
- package/dist/components/ui/tooltip/tooltip.svelte +63 -3
- package/dist/components/ui/tooltip/tooltip.svelte.d.ts +23 -2
- package/dist/router-state.svelte.d.ts +13 -0
- package/dist/router-state.svelte.js +72 -37
- package/package.json +18 -12
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import {
|
|
2
|
+
import { useTranslation } from '@svadmin/core/i18n';
|
|
3
3
|
import * as Card from '../ui/card/index.js';
|
|
4
4
|
import { Badge } from '../ui/badge/index.js';
|
|
5
5
|
import { Button } from '../ui/button/index.js';
|
|
6
6
|
import { Users, CheckCircle2, ArrowRight } from '@lucide/svelte';
|
|
7
7
|
|
|
8
|
+
const i18n = useTranslation();
|
|
9
|
+
|
|
8
10
|
interface Project {
|
|
9
11
|
id: string;
|
|
10
12
|
name: string;
|
|
@@ -38,14 +40,14 @@
|
|
|
38
40
|
<div class="space-y-4">
|
|
39
41
|
<div class="flex items-center justify-between">
|
|
40
42
|
<h3 class="text-lg font-semibold text-foreground">
|
|
41
|
-
{columns === 2 ? t('publicProfile.projects2Col') : t('publicProfile.projects3Col')}
|
|
43
|
+
{columns === 2 ? i18n.t('publicProfile.projects2Col') : i18n.t('publicProfile.projects3Col')}
|
|
42
44
|
</h3>
|
|
43
45
|
<Badge variant="secondary">{projects.length}</Badge>
|
|
44
46
|
</div>
|
|
45
47
|
|
|
46
48
|
{#if projects.length === 0}
|
|
47
49
|
<div class="rounded-xl border border-dashed border-border/60 p-8 text-center">
|
|
48
|
-
<p class="text-sm text-muted-foreground">{t('publicProfile.noProjects')}</p>
|
|
50
|
+
<p class="text-sm text-muted-foreground">{i18n.t('publicProfile.noProjects')}</p>
|
|
49
51
|
</div>
|
|
50
52
|
{:else}
|
|
51
53
|
<div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 {gridCols}">
|
|
@@ -76,8 +78,8 @@
|
|
|
76
78
|
|
|
77
79
|
<div class="flex items-center justify-between pt-2 border-t">
|
|
78
80
|
<div class="flex items-center gap-3 text-xs text-muted-foreground">
|
|
79
|
-
<span class="flex items-center gap-1"><Users class="h-3 w-3" />{t('publicProfile.projectMembers', { count: project.members })}</span>
|
|
80
|
-
<span class="flex items-center gap-1"><CheckCircle2 class="h-3 w-3" />{t('publicProfile.projectTasks', { count: project.tasks })}</span>
|
|
81
|
+
<span class="flex items-center gap-1"><Users class="h-3 w-3" />{i18n.t('publicProfile.projectMembers', { count: project.members })}</span>
|
|
82
|
+
<span class="flex items-center gap-1"><CheckCircle2 class="h-3 w-3" />{i18n.t('publicProfile.projectTasks', { count: project.tasks })}</span>
|
|
81
83
|
</div>
|
|
82
84
|
<Button variant="ghost" size="icon-sm">
|
|
83
85
|
<ArrowRight class="h-3.5 w-3.5" />
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import {
|
|
2
|
+
import { useTranslation } from '@svadmin/core/i18n';
|
|
3
3
|
import * as Card from '../ui/card/index.js';
|
|
4
4
|
import { Button } from '../ui/button/index.js';
|
|
5
5
|
import { Badge } from '../ui/badge/index.js';
|
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
import TeamsShowcase from './TeamsShowcase.svelte';
|
|
10
10
|
import { MapPin, Link, Calendar, MoreHorizontal } from '@lucide/svelte';
|
|
11
11
|
|
|
12
|
+
const i18n = useTranslation();
|
|
13
|
+
|
|
12
14
|
type ProfileVariant = 'default' | 'company' | 'gamer';
|
|
13
15
|
type ProfileTab = 'projects' | 'activity' | 'teams';
|
|
14
16
|
|
|
@@ -35,9 +37,9 @@
|
|
|
35
37
|
followers: 8420,
|
|
36
38
|
following: 312,
|
|
37
39
|
stats: [
|
|
38
|
-
{ label: t('profile.employees'), value: '1,250' },
|
|
39
|
-
{ label: t('publicProfile.projects'), value: '48' },
|
|
40
|
-
{ label: t('publicProfile.teams'), value: '12' },
|
|
40
|
+
{ label: i18n.t('profile.employees'), value: '1,250' },
|
|
41
|
+
{ label: i18n.t('publicProfile.projects'), value: '48' },
|
|
42
|
+
{ label: i18n.t('publicProfile.teams'), value: '12' },
|
|
41
43
|
],
|
|
42
44
|
tags: ['SaaS', 'Enterprise', 'Cloud', 'AI'],
|
|
43
45
|
};
|
|
@@ -52,9 +54,9 @@
|
|
|
52
54
|
followers: 24600,
|
|
53
55
|
following: 180,
|
|
54
56
|
stats: [
|
|
55
|
-
{ label: t('profile.gamesPlayed'), value: '1,284' },
|
|
56
|
-
{ label: t('profile.winRate'), value: '68%' },
|
|
57
|
-
{ label: t('profile.rank'), value: 'Diamond II' },
|
|
57
|
+
{ label: i18n.t('profile.gamesPlayed'), value: '1,284' },
|
|
58
|
+
{ label: i18n.t('profile.winRate'), value: '68%' },
|
|
59
|
+
{ label: i18n.t('profile.rank'), value: 'Diamond II' },
|
|
58
60
|
],
|
|
59
61
|
tags: ['FPS', 'RPG', 'Streaming', 'Esports'],
|
|
60
62
|
};
|
|
@@ -68,9 +70,9 @@
|
|
|
68
70
|
followers: 1234,
|
|
69
71
|
following: 567,
|
|
70
72
|
stats: [
|
|
71
|
-
{ label: t('publicProfile.projects'), value: '24' },
|
|
72
|
-
{ label: t('publicProfile.followers'), value: '1.2K' },
|
|
73
|
-
{ label: t('publicProfile.following'), value: '567' },
|
|
73
|
+
{ label: i18n.t('publicProfile.projects'), value: '24' },
|
|
74
|
+
{ label: i18n.t('publicProfile.followers'), value: '1.2K' },
|
|
75
|
+
{ label: i18n.t('publicProfile.following'), value: '567' },
|
|
74
76
|
],
|
|
75
77
|
tags: ['TypeScript', 'Svelte', 'Node.js', 'Open Source'],
|
|
76
78
|
};
|
|
@@ -125,13 +127,13 @@
|
|
|
125
127
|
<span class="flex items-center gap-1"><Link class="h-3.5 w-3.5" />{profileData.website}</span>
|
|
126
128
|
{/if}
|
|
127
129
|
{#if 'joinedDate' in profileData && profileData.joinedDate}
|
|
128
|
-
<span class="flex items-center gap-1"><Calendar class="h-3.5 w-3.5" />{t('publicProfile.joinedDate', { date: profileData.joinedDate })}</span>
|
|
130
|
+
<span class="flex items-center gap-1"><Calendar class="h-3.5 w-3.5" />{i18n.t('publicProfile.joinedDate', { date: profileData.joinedDate })}</span>
|
|
129
131
|
{/if}
|
|
130
132
|
</div>
|
|
131
133
|
</div>
|
|
132
134
|
<div class="flex gap-2 shrink-0">
|
|
133
|
-
<Button size="sm">{t('publicProfile.editProfile')}</Button>
|
|
134
|
-
<Button size="sm" variant="outline">{t('publicProfile.sendMessage')}</Button>
|
|
135
|
+
<Button size="sm">{i18n.t('publicProfile.editProfile')}</Button>
|
|
136
|
+
<Button size="sm" variant="outline">{i18n.t('publicProfile.sendMessage')}</Button>
|
|
135
137
|
<Button size="sm" variant="ghost"><MoreHorizontal class="h-4 w-4" /></Button>
|
|
136
138
|
</div>
|
|
137
139
|
</div>
|
|
@@ -162,9 +164,9 @@
|
|
|
162
164
|
<!-- Tabs: Projects / Activity / Teams -->
|
|
163
165
|
<Tabs.Root value={activeTab}>
|
|
164
166
|
<Tabs.List class="w-full justify-start border-b">
|
|
165
|
-
<Tabs.Trigger value="projects" active={activeTab === 'projects'} onclick={() => activeTab = 'projects'} class="gap-1.5">{t('publicProfile.projects')}</Tabs.Trigger>
|
|
166
|
-
<Tabs.Trigger value="activity" active={activeTab === 'activity'} onclick={() => activeTab = 'activity'} class="gap-1.5">{t('publicProfile.activity')}</Tabs.Trigger>
|
|
167
|
-
<Tabs.Trigger value="teams" active={activeTab === 'teams'} onclick={() => activeTab = 'teams'} class="gap-1.5">{t('publicProfile.teams')}</Tabs.Trigger>
|
|
167
|
+
<Tabs.Trigger value="projects" active={activeTab === 'projects'} onclick={() => activeTab = 'projects'} class="gap-1.5">{i18n.t('publicProfile.projects')}</Tabs.Trigger>
|
|
168
|
+
<Tabs.Trigger value="activity" active={activeTab === 'activity'} onclick={() => activeTab = 'activity'} class="gap-1.5">{i18n.t('publicProfile.activity')}</Tabs.Trigger>
|
|
169
|
+
<Tabs.Trigger value="teams" active={activeTab === 'teams'} onclick={() => activeTab = 'teams'} class="gap-1.5">{i18n.t('publicProfile.teams')}</Tabs.Trigger>
|
|
168
170
|
</Tabs.List>
|
|
169
171
|
<Tabs.Content value="projects" active={activeTab === 'projects'} class="mt-4">
|
|
170
172
|
<ProjectsGrid {columns} projects={demoProjects} />
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import {
|
|
2
|
+
import { useTranslation } from '@svadmin/core/i18n';
|
|
3
3
|
import * as Card from '../ui/card/index.js';
|
|
4
4
|
import { Badge } from '../ui/badge/index.js';
|
|
5
5
|
import { Button } from '../ui/button/index.js';
|
|
6
6
|
import { Avatar } from '../ui/avatar/index.js';
|
|
7
7
|
import { Users, ArrowRight } from '@lucide/svelte';
|
|
8
8
|
|
|
9
|
+
const i18n = useTranslation();
|
|
10
|
+
|
|
9
11
|
interface TeamMember {
|
|
10
12
|
name: string;
|
|
11
13
|
avatar?: string;
|
|
@@ -31,11 +33,11 @@
|
|
|
31
33
|
</script>
|
|
32
34
|
|
|
33
35
|
<div class="space-y-4">
|
|
34
|
-
<h3 class="text-lg font-semibold text-foreground">{t('publicProfile.teams')}</h3>
|
|
36
|
+
<h3 class="text-lg font-semibold text-foreground">{i18n.t('publicProfile.teams')}</h3>
|
|
35
37
|
|
|
36
38
|
{#if teams.length === 0}
|
|
37
39
|
<div class="rounded-xl border border-dashed border-border/60 p-8 text-center">
|
|
38
|
-
<p class="text-sm text-muted-foreground">{t('publicProfile.noTeams')}</p>
|
|
40
|
+
<p class="text-sm text-muted-foreground">{i18n.t('publicProfile.noTeams')}</p>
|
|
39
41
|
</div>
|
|
40
42
|
{:else}
|
|
41
43
|
<div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2">
|
|
@@ -55,7 +57,7 @@
|
|
|
55
57
|
{/if}
|
|
56
58
|
<div>
|
|
57
59
|
<h4 class="font-semibold text-foreground">{team.name}</h4>
|
|
58
|
-
<p class="text-xs text-muted-foreground">{team.totalMembers} {t('publicProfile.projectMembers', { count: team.totalMembers })}</p>
|
|
60
|
+
<p class="text-xs text-muted-foreground">{team.totalMembers} {i18n.t('publicProfile.projectMembers', { count: team.totalMembers })}</p>
|
|
59
61
|
</div>
|
|
60
62
|
</div>
|
|
61
63
|
<Badge variant="secondary" class="shrink-0">
|
|
@@ -87,7 +89,7 @@
|
|
|
87
89
|
|
|
88
90
|
<div class="pt-2 border-t">
|
|
89
91
|
<Button variant="ghost" size="sm" class="w-full">
|
|
90
|
-
{t('publicProfile.viewProfile')} <ArrowRight class="h-3.5 w-3.5 ml-1" />
|
|
92
|
+
{i18n.t('publicProfile.viewProfile')} <ArrowRight class="h-3.5 w-3.5 ml-1" />
|
|
91
93
|
</Button>
|
|
92
94
|
</div>
|
|
93
95
|
</Card.CardContent>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
let hostIds = $state.raw([]);
|
|
2
|
+
export function registerToastHost() {
|
|
3
|
+
if (typeof window === 'undefined') {
|
|
4
|
+
return {
|
|
5
|
+
isActive: () => false,
|
|
6
|
+
unregister: () => undefined,
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
const id = Symbol('svadmin-toast-host');
|
|
10
|
+
let registered = true;
|
|
11
|
+
hostIds = [...hostIds, id];
|
|
12
|
+
return {
|
|
13
|
+
isActive: () => hostIds[0] === id,
|
|
14
|
+
unregister: () => {
|
|
15
|
+
if (!registered)
|
|
16
|
+
return;
|
|
17
|
+
registered = false;
|
|
18
|
+
hostIds = hostIds.filter((hostId) => hostId !== id);
|
|
19
|
+
},
|
|
20
|
+
};
|
|
21
|
+
}
|
|
@@ -1,31 +1,47 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { Command } from '
|
|
2
|
+
import { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
|
|
3
|
+
import Root from './command.svelte';
|
|
3
4
|
import * as Dialog from '../dialog/index.js';
|
|
4
5
|
import { cn } from '../../../utils.js';
|
|
5
6
|
import type { Snippet } from 'svelte';
|
|
6
7
|
|
|
8
|
+
type Props = Omit<CommandPrimitive.RootProps, 'children' | 'value'> &
|
|
9
|
+
Omit<DialogPrimitive.RootProps, 'children' | 'open'> & {
|
|
10
|
+
open?: boolean;
|
|
11
|
+
value?: string;
|
|
12
|
+
class?: string;
|
|
13
|
+
children?: Snippet;
|
|
14
|
+
};
|
|
15
|
+
|
|
7
16
|
let {
|
|
8
17
|
open = $bindable(false),
|
|
18
|
+
value = $bindable(''),
|
|
19
|
+
onOpenChange,
|
|
20
|
+
onOpenChangeComplete,
|
|
9
21
|
class: className,
|
|
10
22
|
children,
|
|
11
|
-
...
|
|
12
|
-
}:
|
|
13
|
-
open?: boolean;
|
|
14
|
-
class?: string;
|
|
15
|
-
children?: Snippet;
|
|
16
|
-
[key: string]: unknown;
|
|
17
|
-
} = $props();
|
|
23
|
+
...commandProps
|
|
24
|
+
}: Props = $props();
|
|
18
25
|
</script>
|
|
19
26
|
|
|
20
|
-
<Dialog.Dialog bind:open {
|
|
21
|
-
<Dialog.DialogContent
|
|
22
|
-
|
|
27
|
+
<Dialog.Dialog bind:open {onOpenChange} {onOpenChangeComplete}>
|
|
28
|
+
<Dialog.DialogContent
|
|
29
|
+
data-cmdk-dialog=""
|
|
30
|
+
class="overflow-hidden p-0"
|
|
31
|
+
>
|
|
32
|
+
<Dialog.DialogHeader class="sr-only">
|
|
33
|
+
<Dialog.DialogTitle>{commandProps.label || 'Command menu'}</Dialog.DialogTitle>
|
|
34
|
+
<Dialog.DialogDescription>Search for a command to run.</Dialog.DialogDescription>
|
|
35
|
+
</Dialog.DialogHeader>
|
|
36
|
+
<Root
|
|
37
|
+
bind:value
|
|
38
|
+
{...commandProps}
|
|
23
39
|
class={cn(
|
|
24
|
-
"[&_[data-
|
|
40
|
+
"[&_[data-command-group-heading]]:text-muted-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground [&_[data-command-group-heading]]:px-2 [&_[data-command-group-heading]]:font-medium [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3",
|
|
25
41
|
className
|
|
26
42
|
)}
|
|
27
43
|
>
|
|
28
44
|
{@render children?.()}
|
|
29
|
-
</
|
|
45
|
+
</Root>
|
|
30
46
|
</Dialog.DialogContent>
|
|
31
47
|
</Dialog.Dialog>
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
+
import { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
|
|
1
2
|
import type { Snippet } from 'svelte';
|
|
2
|
-
type
|
|
3
|
+
type Props = Omit<CommandPrimitive.RootProps, 'children' | 'value'> & Omit<DialogPrimitive.RootProps, 'children' | 'open'> & {
|
|
3
4
|
open?: boolean;
|
|
5
|
+
value?: string;
|
|
4
6
|
class?: string;
|
|
5
7
|
children?: Snippet;
|
|
6
|
-
[key: string]: unknown;
|
|
7
8
|
};
|
|
8
|
-
declare const CommandDialog: import("svelte").Component
|
|
9
|
+
declare const CommandDialog: import("svelte").Component<Props, {}, "value" | "open">;
|
|
9
10
|
type CommandDialog = ReturnType<typeof CommandDialog>;
|
|
10
11
|
export default CommandDialog;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command as CommandPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: CommandPrimitive.EmptyProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<CommandPrimitive.Empty
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="command-empty"
|
|
15
|
+
data-cmdk-empty=""
|
|
16
|
+
class={cn("py-6 text-center text-sm", className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
/>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command as CommandPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
heading,
|
|
10
|
+
value,
|
|
11
|
+
alwaysRender,
|
|
12
|
+
forceMount,
|
|
13
|
+
...restProps
|
|
14
|
+
}: CommandPrimitive.GroupProps & {
|
|
15
|
+
heading?: string;
|
|
16
|
+
alwaysRender?: boolean;
|
|
17
|
+
} = $props();
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<CommandPrimitive.Group
|
|
21
|
+
bind:ref
|
|
22
|
+
data-slot="command-group"
|
|
23
|
+
data-cmdk-group=""
|
|
24
|
+
class={cn("text-foreground overflow-hidden p-1", className)}
|
|
25
|
+
value={value ?? heading}
|
|
26
|
+
forceMount={alwaysRender ?? forceMount}
|
|
27
|
+
{...restProps}
|
|
28
|
+
>
|
|
29
|
+
{#if heading}
|
|
30
|
+
<CommandPrimitive.GroupHeading
|
|
31
|
+
data-slot="command-group-heading"
|
|
32
|
+
data-cmdk-group-heading=""
|
|
33
|
+
class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
|
|
34
|
+
>
|
|
35
|
+
{heading}
|
|
36
|
+
</CommandPrimitive.GroupHeading>
|
|
37
|
+
{/if}
|
|
38
|
+
<CommandPrimitive.GroupItems data-slot="command-group-items" data-cmdk-group-items="">
|
|
39
|
+
{@render children?.()}
|
|
40
|
+
</CommandPrimitive.GroupItems>
|
|
41
|
+
</CommandPrimitive.Group>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Command as CommandPrimitive } from "bits-ui";
|
|
2
|
+
type $$ComponentProps = CommandPrimitive.GroupProps & {
|
|
3
|
+
heading?: string;
|
|
4
|
+
alwaysRender?: boolean;
|
|
5
|
+
};
|
|
6
|
+
declare const CommandGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
|
|
7
|
+
type CommandGroup = ReturnType<typeof CommandGroup>;
|
|
8
|
+
export default CommandGroup;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command as CommandPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
value = $bindable(""),
|
|
8
|
+
class: className,
|
|
9
|
+
...restProps
|
|
10
|
+
}: CommandPrimitive.InputProps = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<CommandPrimitive.Input
|
|
14
|
+
bind:ref
|
|
15
|
+
bind:value
|
|
16
|
+
data-slot="command-input"
|
|
17
|
+
data-cmdk-input=""
|
|
18
|
+
class={cn(
|
|
19
|
+
"w-full bg-transparent text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
|
|
20
|
+
className
|
|
21
|
+
)}
|
|
22
|
+
{...restProps}
|
|
23
|
+
/>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command as CommandPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
import type { Snippet } from "svelte";
|
|
5
|
+
|
|
6
|
+
type Props = Omit<CommandPrimitive.ItemProps, "children" | "forceMount" | "onSelect"> & {
|
|
7
|
+
children?: Snippet;
|
|
8
|
+
alwaysRender?: boolean;
|
|
9
|
+
forceMount?: boolean;
|
|
10
|
+
onSelect?: (value: string) => void;
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
let {
|
|
14
|
+
ref = $bindable(null),
|
|
15
|
+
class: className,
|
|
16
|
+
children,
|
|
17
|
+
value = "",
|
|
18
|
+
alwaysRender,
|
|
19
|
+
forceMount,
|
|
20
|
+
onSelect,
|
|
21
|
+
...restProps
|
|
22
|
+
}: Props = $props();
|
|
23
|
+
|
|
24
|
+
function handleSelect() {
|
|
25
|
+
onSelect?.(value || ref?.dataset.value || ref?.textContent?.trim() || "");
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<CommandPrimitive.Item
|
|
30
|
+
bind:ref
|
|
31
|
+
data-slot="command-item"
|
|
32
|
+
data-cmdk-item=""
|
|
33
|
+
class={cn(
|
|
34
|
+
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[selected]:bg-accent data-[selected]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
35
|
+
className
|
|
36
|
+
)}
|
|
37
|
+
{value}
|
|
38
|
+
forceMount={alwaysRender ?? forceMount}
|
|
39
|
+
onSelect={handleSelect}
|
|
40
|
+
{...restProps}
|
|
41
|
+
>
|
|
42
|
+
{@render children?.()}
|
|
43
|
+
</CommandPrimitive.Item>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Command as CommandPrimitive } from "bits-ui";
|
|
2
|
+
import type { Snippet } from "svelte";
|
|
3
|
+
type Props = Omit<CommandPrimitive.ItemProps, "children" | "forceMount" | "onSelect"> & {
|
|
4
|
+
children?: Snippet;
|
|
5
|
+
alwaysRender?: boolean;
|
|
6
|
+
forceMount?: boolean;
|
|
7
|
+
onSelect?: (value: string) => void;
|
|
8
|
+
};
|
|
9
|
+
declare const CommandItem: import("svelte").Component<Props, {}, "ref">;
|
|
10
|
+
type CommandItem = ReturnType<typeof CommandItem>;
|
|
11
|
+
export default CommandItem;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command as CommandPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: CommandPrimitive.ListProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<CommandPrimitive.List
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="command-list"
|
|
15
|
+
data-cmdk-list=""
|
|
16
|
+
class={cn("max-h-72 overflow-x-hidden overflow-y-auto", className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
/>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command as CommandPrimitive } from "bits-ui";
|
|
3
|
+
|
|
4
|
+
let { ref = $bindable(null), ...restProps }: CommandPrimitive.LoadingProps = $props();
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<CommandPrimitive.Loading
|
|
8
|
+
bind:ref
|
|
9
|
+
data-slot="command-loading"
|
|
10
|
+
data-cmdk-loading=""
|
|
11
|
+
{...restProps}
|
|
12
|
+
/>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command as CommandPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
alwaysRender,
|
|
9
|
+
forceMount,
|
|
10
|
+
...restProps
|
|
11
|
+
}: CommandPrimitive.SeparatorProps & {
|
|
12
|
+
alwaysRender?: boolean;
|
|
13
|
+
} = $props();
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<CommandPrimitive.Separator
|
|
17
|
+
bind:ref
|
|
18
|
+
data-slot="command-separator"
|
|
19
|
+
data-cmdk-separator=""
|
|
20
|
+
class={cn("bg-border -mx-1 h-px", className)}
|
|
21
|
+
forceMount={alwaysRender ?? forceMount}
|
|
22
|
+
{...restProps}
|
|
23
|
+
/>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Command as CommandPrimitive } from "bits-ui";
|
|
2
|
+
type $$ComponentProps = CommandPrimitive.SeparatorProps & {
|
|
3
|
+
alwaysRender?: boolean;
|
|
4
|
+
};
|
|
5
|
+
declare const CommandSeparator: import("svelte").Component<$$ComponentProps, {}, "ref">;
|
|
6
|
+
type CommandSeparator = ReturnType<typeof CommandSeparator>;
|
|
7
|
+
export default CommandSeparator;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command as CommandPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
value = $bindable(""),
|
|
8
|
+
class: className,
|
|
9
|
+
children,
|
|
10
|
+
...restProps
|
|
11
|
+
}: CommandPrimitive.RootProps = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<CommandPrimitive.Root
|
|
15
|
+
bind:ref
|
|
16
|
+
bind:value
|
|
17
|
+
data-slot="command"
|
|
18
|
+
data-cmdk-root=""
|
|
19
|
+
class={cn(
|
|
20
|
+
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
|
|
21
|
+
className
|
|
22
|
+
)}
|
|
23
|
+
{...restProps}
|
|
24
|
+
>
|
|
25
|
+
{@render children?.()}
|
|
26
|
+
</CommandPrimitive.Root>
|
|
@@ -1,2 +1,55 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import Root from './command.svelte';
|
|
2
|
+
import Dialog from './command-dialog.svelte';
|
|
3
|
+
import Empty from './command-empty.svelte';
|
|
4
|
+
import Group from './command-group.svelte';
|
|
5
|
+
import Input from './command-input.svelte';
|
|
6
|
+
import Item from './command-item.svelte';
|
|
7
|
+
import List from './command-list.svelte';
|
|
8
|
+
import Loading from './command-loading.svelte';
|
|
9
|
+
import Separator from './command-separator.svelte';
|
|
10
|
+
declare const Command: {
|
|
11
|
+
Root: import("svelte").Component<import("bits-ui").CommandRootProps, {}, "value" | "ref">;
|
|
12
|
+
Dialog: import("svelte").Component<Omit<import("bits-ui").CommandRootProps, "value" | "children"> & Omit<import("bits-ui").AlertDialogRootPropsWithoutHTML, "open" | "children"> & {
|
|
13
|
+
open?: boolean;
|
|
14
|
+
value?: string;
|
|
15
|
+
class?: string;
|
|
16
|
+
children?: import("svelte").Snippet;
|
|
17
|
+
}, {}, "value" | "open">;
|
|
18
|
+
Empty: import("svelte").Component<import("bits-ui").CommandEmptyProps, {}, "ref">;
|
|
19
|
+
Group: import("svelte").Component<Omit<{
|
|
20
|
+
value?: string;
|
|
21
|
+
forceMount?: boolean;
|
|
22
|
+
}, "children" | "child"> & {
|
|
23
|
+
child?: import("svelte").Snippet<[{
|
|
24
|
+
props: Record<string, unknown>;
|
|
25
|
+
}]> | undefined;
|
|
26
|
+
children?: import("svelte").Snippet<[]> | undefined;
|
|
27
|
+
style?: import("bits-ui").StyleProperties | string | null | undefined;
|
|
28
|
+
ref?: HTMLElement | null | undefined;
|
|
29
|
+
} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").CommandGroupPropsWithoutHTML> & {
|
|
30
|
+
heading?: string;
|
|
31
|
+
alwaysRender?: boolean;
|
|
32
|
+
}, {}, "ref">;
|
|
33
|
+
Input: import("svelte").Component<import("bits-ui").CommandInputProps, {}, "value" | "ref">;
|
|
34
|
+
Item: import("svelte").Component<Omit<import("bits-ui").CommandItemProps, "children" | "forceMount" | "onSelect"> & {
|
|
35
|
+
children?: import("svelte").Snippet;
|
|
36
|
+
alwaysRender?: boolean;
|
|
37
|
+
forceMount?: boolean;
|
|
38
|
+
onSelect?: (value: string) => void;
|
|
39
|
+
}, {}, "ref">;
|
|
40
|
+
List: import("svelte").Component<import("bits-ui").CommandListProps, {}, "ref">;
|
|
41
|
+
Loading: import("svelte").Component<import("bits-ui").CommandLoadingProps, {}, "ref">;
|
|
42
|
+
Separator: import("svelte").Component<Omit<{
|
|
43
|
+
forceMount?: boolean;
|
|
44
|
+
}, "children" | "child"> & {
|
|
45
|
+
child?: import("svelte").Snippet<[{
|
|
46
|
+
props: Record<string, unknown>;
|
|
47
|
+
}]> | undefined;
|
|
48
|
+
children?: import("svelte").Snippet<[]> | undefined;
|
|
49
|
+
style?: import("bits-ui").StyleProperties | string | null | undefined;
|
|
50
|
+
ref?: HTMLElement | null | undefined;
|
|
51
|
+
} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").CommandSeparatorPropsWithoutHTML> & {
|
|
52
|
+
alwaysRender?: boolean;
|
|
53
|
+
}, {}, "ref">;
|
|
54
|
+
};
|
|
55
|
+
export { Root, Dialog, Empty, Group, Input, Item, List, Loading, Separator, Command, Root as CommandRoot, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Input as CommandInput, Item as CommandItem, List as CommandList, Loading as CommandLoading, Separator as CommandSeparator, };
|
|
@@ -1,2 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import Root from './command.svelte';
|
|
2
|
+
import Dialog from './command-dialog.svelte';
|
|
3
|
+
import Empty from './command-empty.svelte';
|
|
4
|
+
import Group from './command-group.svelte';
|
|
5
|
+
import Input from './command-input.svelte';
|
|
6
|
+
import Item from './command-item.svelte';
|
|
7
|
+
import List from './command-list.svelte';
|
|
8
|
+
import Loading from './command-loading.svelte';
|
|
9
|
+
import Separator from './command-separator.svelte';
|
|
10
|
+
const Command = {
|
|
11
|
+
Root,
|
|
12
|
+
Dialog,
|
|
13
|
+
Empty,
|
|
14
|
+
Group,
|
|
15
|
+
Input,
|
|
16
|
+
Item,
|
|
17
|
+
List,
|
|
18
|
+
Loading,
|
|
19
|
+
Separator,
|
|
20
|
+
};
|
|
21
|
+
export { Root, Dialog, Empty, Group, Input, Item, List, Loading, Separator, Command, Root as CommandRoot, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Input as CommandInput, Item as CommandItem, List as CommandList, Loading as CommandLoading, Separator as CommandSeparator, };
|