svelte-firekit 0.0.14 → 0.0.15
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/auth/reset-password.svelte +11 -10
- package/dist/auth/reset-password.svelte.d.ts +5 -5
- package/dist/auth/sign-in.svelte +14 -11
- package/dist/auth/sign-in.svelte.d.ts +12 -11
- package/dist/auth/sign-up.svelte +17 -14
- package/dist/auth/sign-up.svelte.d.ts +15 -14
- package/dist/components/app/nav/app-sidebar.svelte +1 -1
- package/dist/components/auth/sign-in-form.svelte +70 -72
- package/dist/components/auth/sign-in-form.svelte.d.ts +1 -0
- package/dist/components/auth/sign-up-form.svelte +6 -4
- package/dist/components/auth/sign-up-form.svelte.d.ts +1 -0
- package/dist/components/auth/user-button/profile-section/phone-user.svelte +1 -1
- package/dist/components/auth/user-button/settings-dialog.svelte +3 -3
- package/dist/components/auth/user-button/user-button.svelte +2 -2
- package/dist/components/auth/user-button/user-button.svelte.d.ts +1 -0
- package/dist/components/ui/select/index.js +13 -0
- package/dist/components/ui/select/select-content.svelte +38 -0
- package/dist/components/ui/select/select-content.svelte.d.ts +5 -0
- package/dist/components/ui/select/select-group-heading.svelte +16 -0
- package/dist/components/ui/select/select-group-heading.svelte.d.ts +3 -0
- package/dist/components/ui/select/select-item.svelte +37 -0
- package/dist/components/ui/select/select-item.svelte.d.ts +3 -0
- package/dist/components/ui/select/select-scroll-down-button.svelte +19 -0
- package/dist/components/ui/select/select-scroll-down-button.svelte.d.ts +3 -0
- package/dist/components/ui/select/select-scroll-up-button.svelte +19 -0
- package/dist/components/ui/select/select-scroll-up-button.svelte.d.ts +3 -0
- package/dist/components/ui/select/select-separator.svelte +13 -0
- package/dist/components/ui/select/select-separator.svelte.d.ts +3 -0
- package/dist/components/ui/select/select-trigger.svelte +24 -0
- package/dist/components/ui/select/select-trigger.svelte.d.ts +3 -0
- package/package.json +1 -1
|
@@ -3,18 +3,19 @@
|
|
|
3
3
|
import Button from "../components/ui/button/button.svelte";
|
|
4
4
|
import * as Card from "../components/ui/card/index.js";
|
|
5
5
|
|
|
6
|
+
|
|
6
7
|
let {
|
|
7
|
-
title,
|
|
8
|
-
subtitle,
|
|
9
|
-
labelLink,
|
|
10
|
-
link,
|
|
11
|
-
redirect
|
|
8
|
+
title="Forgot password?",
|
|
9
|
+
subtitle="Remember your password?",
|
|
10
|
+
labelLink="Sign in here",
|
|
11
|
+
link="/sign-in",
|
|
12
|
+
redirect="/sign-in"
|
|
12
13
|
}: {
|
|
13
|
-
title
|
|
14
|
-
subtitle
|
|
15
|
-
labelLink
|
|
16
|
-
link
|
|
17
|
-
redirect
|
|
14
|
+
title?: string;
|
|
15
|
+
subtitle?: string;
|
|
16
|
+
labelLink?: string;
|
|
17
|
+
link?: string;
|
|
18
|
+
redirect?: string;
|
|
18
19
|
} = $props();
|
|
19
20
|
</script>
|
|
20
21
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
declare const ResetPassword: import("svelte").Component<{
|
|
2
|
-
title
|
|
3
|
-
subtitle
|
|
4
|
-
labelLink
|
|
5
|
-
link
|
|
6
|
-
redirect
|
|
2
|
+
title?: string;
|
|
3
|
+
subtitle?: string;
|
|
4
|
+
labelLink?: string;
|
|
5
|
+
link?: string;
|
|
6
|
+
redirect?: string;
|
|
7
7
|
}, {}, "">;
|
|
8
8
|
export default ResetPassword;
|
package/dist/auth/sign-in.svelte
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
subtitle = "Don't have an account yet?",
|
|
9
9
|
textLink = "Sign up here",
|
|
10
10
|
link = "/sign-up",
|
|
11
|
+
redirectTo = "/dashboard",
|
|
11
12
|
labelBtnGoogle = "Sign in with",
|
|
12
13
|
labelEmail = "Email",
|
|
13
14
|
labelPassword = "Password",
|
|
@@ -16,17 +17,18 @@
|
|
|
16
17
|
labelBtnFormEmail = "Sign",
|
|
17
18
|
labelDivider = "Or",
|
|
18
19
|
}: {
|
|
19
|
-
title
|
|
20
|
-
subtitle
|
|
21
|
-
textLink
|
|
22
|
-
link
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
20
|
+
title?: string;
|
|
21
|
+
subtitle?: string;
|
|
22
|
+
textLink?: string;
|
|
23
|
+
link?: string;
|
|
24
|
+
redirectTo?: string;
|
|
25
|
+
labelBtnGoogle?: string;
|
|
26
|
+
labelEmail?: string;
|
|
27
|
+
labelPassword?: string;
|
|
28
|
+
labellLinkEmailForm?: string;
|
|
29
|
+
linkForgetPassword?: string;
|
|
30
|
+
labelBtnFormEmail?: string;
|
|
31
|
+
labelDivider?: string;
|
|
30
32
|
} = $props();
|
|
31
33
|
</script>
|
|
32
34
|
|
|
@@ -53,6 +55,7 @@
|
|
|
53
55
|
{labellLinkEmailForm}
|
|
54
56
|
{linkForgetPassword}
|
|
55
57
|
{labelBtnFormEmail}
|
|
58
|
+
{redirectTo}
|
|
56
59
|
/>
|
|
57
60
|
</Card.Content>
|
|
58
61
|
</Card.Root>
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
declare const SignIn: import("svelte").Component<{
|
|
2
|
-
title
|
|
3
|
-
subtitle
|
|
4
|
-
textLink
|
|
5
|
-
link
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
2
|
+
title?: string;
|
|
3
|
+
subtitle?: string;
|
|
4
|
+
textLink?: string;
|
|
5
|
+
link?: string;
|
|
6
|
+
redirectTo?: string;
|
|
7
|
+
labelBtnGoogle?: string;
|
|
8
|
+
labelEmail?: string;
|
|
9
|
+
labelPassword?: string;
|
|
10
|
+
labellLinkEmailForm?: string;
|
|
11
|
+
linkForgetPassword?: string;
|
|
12
|
+
labelBtnFormEmail?: string;
|
|
13
|
+
labelDivider?: string;
|
|
13
14
|
}, {}, "">;
|
|
14
15
|
export default SignIn;
|
package/dist/auth/sign-up.svelte
CHANGED
|
@@ -20,21 +20,23 @@
|
|
|
20
20
|
labelLinkTerms = "Terms and Conditions",
|
|
21
21
|
labelBtnFormEmail = "Sign up",
|
|
22
22
|
labelDivider = "Or",
|
|
23
|
+
redirectTo = "/dashboard",
|
|
23
24
|
}: {
|
|
24
|
-
title
|
|
25
|
-
subtitle
|
|
26
|
-
labelLink
|
|
27
|
-
link
|
|
28
|
-
labelBtnGoogle
|
|
29
|
-
labelFisrtName
|
|
30
|
-
labelLastName
|
|
31
|
-
labelEmail
|
|
32
|
-
labelPassword
|
|
33
|
-
linkTerms
|
|
34
|
-
labelTerms
|
|
35
|
-
labelLinkTerms
|
|
36
|
-
labelBtnFormEmail
|
|
37
|
-
labelDivider
|
|
25
|
+
title?: string;
|
|
26
|
+
subtitle?: string;
|
|
27
|
+
labelLink?: string;
|
|
28
|
+
link?: string;
|
|
29
|
+
labelBtnGoogle?: string;
|
|
30
|
+
labelFisrtName?: string;
|
|
31
|
+
labelLastName?: string;
|
|
32
|
+
labelEmail?: string;
|
|
33
|
+
labelPassword?: string;
|
|
34
|
+
linkTerms?: string;
|
|
35
|
+
labelTerms?: string;
|
|
36
|
+
labelLinkTerms?: string;
|
|
37
|
+
labelBtnFormEmail?: string;
|
|
38
|
+
labelDivider?: string;
|
|
39
|
+
redirectTo?: string;
|
|
38
40
|
} = $props();
|
|
39
41
|
</script>
|
|
40
42
|
|
|
@@ -64,6 +66,7 @@
|
|
|
64
66
|
{labelTerms}
|
|
65
67
|
{labelLinkTerms}
|
|
66
68
|
{labelBtnFormEmail}
|
|
69
|
+
{redirectTo}
|
|
67
70
|
/>
|
|
68
71
|
</Card.Content>
|
|
69
72
|
</Card.Root>
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
declare const SignUp: import("svelte").Component<{
|
|
2
|
-
title
|
|
3
|
-
subtitle
|
|
4
|
-
labelLink
|
|
5
|
-
link
|
|
6
|
-
labelBtnGoogle
|
|
7
|
-
labelFisrtName
|
|
8
|
-
labelLastName
|
|
9
|
-
labelEmail
|
|
10
|
-
labelPassword
|
|
11
|
-
linkTerms
|
|
12
|
-
labelTerms
|
|
13
|
-
labelLinkTerms
|
|
14
|
-
labelBtnFormEmail
|
|
15
|
-
labelDivider
|
|
2
|
+
title?: string;
|
|
3
|
+
subtitle?: string;
|
|
4
|
+
labelLink?: string;
|
|
5
|
+
link?: string;
|
|
6
|
+
labelBtnGoogle?: string;
|
|
7
|
+
labelFisrtName?: string;
|
|
8
|
+
labelLastName?: string;
|
|
9
|
+
labelEmail?: string;
|
|
10
|
+
labelPassword?: string;
|
|
11
|
+
linkTerms?: string;
|
|
12
|
+
labelTerms?: string;
|
|
13
|
+
labelLinkTerms?: string;
|
|
14
|
+
labelBtnFormEmail?: string;
|
|
15
|
+
labelDivider?: string;
|
|
16
|
+
redirectTo?: string;
|
|
16
17
|
}, {}, "">;
|
|
17
18
|
export default SignUp;
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<Sidebar.Root bind:ref {collapsible} {...restProps}>
|
|
17
17
|
<Sidebar.Header>
|
|
18
18
|
<section class="flex justify-center items-center gap-2 my-4">
|
|
19
|
-
<UserButton></UserButton>
|
|
19
|
+
<UserButton redirectTo="/sign-in"></UserButton>
|
|
20
20
|
<div class="flex flex-col">
|
|
21
21
|
<small>{firekitAuthManager.data?.displayName}</small>
|
|
22
22
|
<small>{firekitAuthManager.data?.email}</small>
|
|
@@ -1,94 +1,92 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
import { firekitAuth } from "../../firebase/auth/auth.js";
|
|
3
|
+
import { signInSchema } from "../../schemas/sign-in.js";
|
|
4
|
+
import { superForm, defaults } from "sveltekit-superforms";
|
|
5
|
+
import { Input } from "../ui/input/index.js";
|
|
6
|
+
import Button from "../ui/button/button.svelte";
|
|
7
|
+
import { valibot } from "sveltekit-superforms/adapters";
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
let {
|
|
10
10
|
labelEmail = "Email",
|
|
11
11
|
labelPassword = "Password",
|
|
12
12
|
labellLinkEmailForm = "I forgot my password",
|
|
13
13
|
linkForgetPassword = "/reset-password",
|
|
14
|
+
redirectTo = "/dashboard",
|
|
14
15
|
labelBtnFormEmail = "Sign",
|
|
15
16
|
}: {
|
|
16
17
|
labelEmail: string;
|
|
17
18
|
labelPassword: string;
|
|
18
19
|
labellLinkEmailForm: string;
|
|
19
20
|
linkForgetPassword: string;
|
|
21
|
+
redirectTo: string;
|
|
20
22
|
labelBtnFormEmail: string;
|
|
21
23
|
} = $props();
|
|
22
24
|
|
|
23
|
-
|
|
25
|
+
const data = defaults(valibot(signInSchema));
|
|
24
26
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
+
import * as Form from "../ui/form/index.js";
|
|
28
|
+
import { toast } from "svelte-sonner";
|
|
29
|
+
import { goto } from "$app/navigation";
|
|
27
30
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
31
|
+
const form = superForm(data, {
|
|
32
|
+
validators: valibot(signInSchema),
|
|
33
|
+
dataType: "json",
|
|
34
|
+
SPA: true,
|
|
35
|
+
resetForm: false,
|
|
36
|
+
clearOnSubmit: "errors-and-message",
|
|
37
|
+
async onUpdate({ form }) {
|
|
38
|
+
if (!form.valid) return;
|
|
39
|
+
try {
|
|
40
|
+
const { data } = form;
|
|
41
|
+
const { email, password } = data;
|
|
42
|
+
await firekitAuth.signInWithEmail(email, password);
|
|
43
|
+
toast.success("Signed in successfully");
|
|
44
|
+
goto(redirectTo);
|
|
45
|
+
} catch (error) {
|
|
46
|
+
if (error instanceof Error) {
|
|
47
|
+
toast.error(error.message);
|
|
48
|
+
} else {
|
|
49
|
+
toast.error("An error occurred");
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
});
|
|
50
54
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
55
|
+
const { form: formData, enhance } = form;
|
|
54
56
|
</script>
|
|
55
57
|
|
|
56
58
|
<form method="POST" use:enhance class="space-y-2">
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
</Form.Control>
|
|
91
|
-
<Form.FieldErrors />
|
|
92
|
-
</Form.Field>
|
|
93
|
-
<Form.Button class="w-full">{labelBtnFormEmail}</Form.Button>
|
|
59
|
+
<Form.Field {form} name="email">
|
|
60
|
+
<Form.Control>
|
|
61
|
+
{#snippet children({ props })}
|
|
62
|
+
<Form.Label>{labelEmail}</Form.Label>
|
|
63
|
+
<Input
|
|
64
|
+
{...props}
|
|
65
|
+
bind:value={$formData.email}
|
|
66
|
+
placeholder="you@email.com"
|
|
67
|
+
/>
|
|
68
|
+
{/snippet}
|
|
69
|
+
</Form.Control>
|
|
70
|
+
<Form.FieldErrors />
|
|
71
|
+
</Form.Field>
|
|
72
|
+
<Form.Field {form} name="password">
|
|
73
|
+
<Form.Control>
|
|
74
|
+
{#snippet children({ props })}
|
|
75
|
+
<div class="flex w-full items-center justify-between">
|
|
76
|
+
<Form.Label>{labelPassword}</Form.Label>
|
|
77
|
+
<Button variant="link" class="text-sm" href={linkForgetPassword}>
|
|
78
|
+
{labellLinkEmailForm}
|
|
79
|
+
</Button>
|
|
80
|
+
</div>
|
|
81
|
+
<Input
|
|
82
|
+
{...props}
|
|
83
|
+
bind:value={$formData.password}
|
|
84
|
+
placeholder="*********"
|
|
85
|
+
type="password"
|
|
86
|
+
/>
|
|
87
|
+
{/snippet}
|
|
88
|
+
</Form.Control>
|
|
89
|
+
<Form.FieldErrors />
|
|
90
|
+
</Form.Field>
|
|
91
|
+
<Form.Button class="w-full">{labelBtnFormEmail}</Form.Button>
|
|
94
92
|
</form>
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
import { valibot } from "sveltekit-superforms/adapters";
|
|
10
10
|
import Button from "../ui/button/button.svelte";
|
|
11
11
|
import Checkbox from "../ui/checkbox/checkbox.svelte";
|
|
12
|
+
import { goto } from "$app/navigation";
|
|
12
13
|
|
|
13
14
|
let {
|
|
14
15
|
labelFisrtName,
|
|
@@ -16,9 +17,10 @@
|
|
|
16
17
|
labelEmail,
|
|
17
18
|
labelPassword,
|
|
18
19
|
linkTerms,
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
labelTerms,
|
|
21
|
+
labelLinkTerms,
|
|
21
22
|
labelBtnFormEmail,
|
|
23
|
+
redirectTo,
|
|
22
24
|
}: {
|
|
23
25
|
labelFisrtName: string;
|
|
24
26
|
labelLastName: string;
|
|
@@ -28,6 +30,7 @@
|
|
|
28
30
|
labelTerms: string;
|
|
29
31
|
labelLinkTerms: string;
|
|
30
32
|
labelBtnFormEmail: string;
|
|
33
|
+
redirectTo: string;
|
|
31
34
|
} = $props();
|
|
32
35
|
|
|
33
36
|
const data = defaults(valibot(signUpSchema));
|
|
@@ -46,6 +49,7 @@
|
|
|
46
49
|
const displayName = `${firstName} ${lastName}`;
|
|
47
50
|
await firekitAuth.registerWithEmail(email, password, displayName);
|
|
48
51
|
toast.success("Account created successfully");
|
|
52
|
+
goto(redirectTo)
|
|
49
53
|
} catch (error) {
|
|
50
54
|
if (error instanceof Error) {
|
|
51
55
|
toast.error(error.message);
|
|
@@ -57,8 +61,6 @@
|
|
|
57
61
|
});
|
|
58
62
|
|
|
59
63
|
const { form: formData, enhance } = form;
|
|
60
|
-
|
|
61
|
-
|
|
62
64
|
</script>
|
|
63
65
|
|
|
64
66
|
<form method="POST" use:enhance class="space-y-2">
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
</p>
|
|
81
81
|
</div>
|
|
82
82
|
|
|
83
|
-
<div class="sm:col-span-8
|
|
83
|
+
<div class="sm:col-span-8 lg:col-span-6">
|
|
84
84
|
<div class="flex flex-wrap j items-center gap-3 sm:gap-5">
|
|
85
85
|
<div class="flex gap-2 items-center w-full">
|
|
86
86
|
<div class="flex flex-col gap-2 text-sm leading-tight">
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
{/snippet}
|
|
27
27
|
</Dialog.Trigger>
|
|
28
28
|
<Dialog.Content
|
|
29
|
-
class="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]"
|
|
29
|
+
class="overflow-y-auto md:overflow-hidden p-0 max-h-[80dvh] md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]"
|
|
30
30
|
>
|
|
31
31
|
<Dialog.Title class="sr-only">Settings</Dialog.Title>
|
|
32
32
|
<Dialog.Description class="sr-only"
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
</Sidebar.Group>
|
|
59
59
|
</Sidebar.Content>
|
|
60
60
|
</Sidebar.Root>
|
|
61
|
-
<main class="flex h-[480px]
|
|
61
|
+
<main class="flex sm:h-auto md:h-[480px] flex-1 flex-col overflow-hidden">
|
|
62
62
|
<header
|
|
63
63
|
class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"
|
|
64
64
|
>
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
</Breadcrumb.Root>
|
|
77
77
|
</div>
|
|
78
78
|
</header>
|
|
79
|
-
<div class="flex flex-1 flex-col gap-4 overflow-y-auto
|
|
79
|
+
<div class="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0 ">
|
|
80
80
|
{#if section === "Profile"}
|
|
81
81
|
<ProfileSection></ProfileSection>
|
|
82
82
|
{/if}
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
|
|
14
14
|
let isOpen = $state(false);
|
|
15
15
|
|
|
16
|
-
let { nav }: { nav?: NavItem[] } = $props();
|
|
16
|
+
let { nav, redirectTo="/sign-in" }: { nav?: NavItem[], redirectTo:string } = $props();
|
|
17
17
|
async function handleLogout() {
|
|
18
|
-
await firekitAuth.logOut();
|
|
18
|
+
await firekitAuth.logOut(redirectTo);
|
|
19
19
|
}
|
|
20
20
|
</script>
|
|
21
21
|
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Select as SelectPrimitive } from "bits-ui";
|
|
2
|
+
import GroupHeading from "./select-group-heading.svelte";
|
|
3
|
+
import Item from "./select-item.svelte";
|
|
4
|
+
import Content from "./select-content.svelte";
|
|
5
|
+
import Trigger from "./select-trigger.svelte";
|
|
6
|
+
import Separator from "./select-separator.svelte";
|
|
7
|
+
import ScrollDownButton from "./select-scroll-down-button.svelte";
|
|
8
|
+
import ScrollUpButton from "./select-scroll-up-button.svelte";
|
|
9
|
+
const Root = SelectPrimitive.Root;
|
|
10
|
+
const Group = SelectPrimitive.Group;
|
|
11
|
+
export { Root, Item, Group, GroupHeading, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton,
|
|
12
|
+
//
|
|
13
|
+
Root as Select, Item as SelectItem, Group as SelectGroup, GroupHeading as SelectGroupHeading, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
|
|
3
|
+
import * as Select from "./index.js";
|
|
4
|
+
import { cn } from "../../../utils.js";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
sideOffset = 4,
|
|
10
|
+
portalProps,
|
|
11
|
+
children,
|
|
12
|
+
...restProps
|
|
13
|
+
}: WithoutChild<SelectPrimitive.ContentProps> & {
|
|
14
|
+
portalProps?: SelectPrimitive.PortalProps;
|
|
15
|
+
} = $props();
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<SelectPrimitive.Portal {...portalProps}>
|
|
19
|
+
<SelectPrimitive.Content
|
|
20
|
+
bind:ref
|
|
21
|
+
{sideOffset}
|
|
22
|
+
class={cn(
|
|
23
|
+
"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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
24
|
+
className
|
|
25
|
+
)}
|
|
26
|
+
{...restProps}
|
|
27
|
+
>
|
|
28
|
+
<Select.ScrollUpButton />
|
|
29
|
+
<SelectPrimitive.Viewport
|
|
30
|
+
class={cn(
|
|
31
|
+
"h-[var(--bits-select-anchor-height)] w-full min-w-[var(--bits-select-anchor-width)] p-1"
|
|
32
|
+
)}
|
|
33
|
+
>
|
|
34
|
+
{@render children?.()}
|
|
35
|
+
</SelectPrimitive.Viewport>
|
|
36
|
+
<Select.ScrollDownButton />
|
|
37
|
+
</SelectPrimitive.Content>
|
|
38
|
+
</SelectPrimitive.Portal>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Select as SelectPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: SelectPrimitive.GroupHeadingProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<SelectPrimitive.GroupHeading
|
|
13
|
+
bind:ref
|
|
14
|
+
class={cn("px-2 py-1.5 text-sm font-semibold", className)}
|
|
15
|
+
{...restProps}
|
|
16
|
+
/>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
|
|
3
|
+
import Check from "lucide-svelte/icons/check";
|
|
4
|
+
import { cn } from "../../../utils.js";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
value,
|
|
10
|
+
label,
|
|
11
|
+
children: childrenProp,
|
|
12
|
+
...restProps
|
|
13
|
+
}: WithoutChild<SelectPrimitive.ItemProps> = $props();
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<SelectPrimitive.Item
|
|
17
|
+
bind:ref
|
|
18
|
+
{value}
|
|
19
|
+
class={cn(
|
|
20
|
+
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
21
|
+
className
|
|
22
|
+
)}
|
|
23
|
+
{...restProps}
|
|
24
|
+
>
|
|
25
|
+
{#snippet children({ selected, highlighted })}
|
|
26
|
+
<span class="absolute right-2 flex size-3.5 items-center justify-center">
|
|
27
|
+
{#if selected}
|
|
28
|
+
<Check class="size-4" />
|
|
29
|
+
{/if}
|
|
30
|
+
</span>
|
|
31
|
+
{#if childrenProp}
|
|
32
|
+
{@render childrenProp({ selected, highlighted })}
|
|
33
|
+
{:else}
|
|
34
|
+
{label || value}
|
|
35
|
+
{/if}
|
|
36
|
+
{/snippet}
|
|
37
|
+
</SelectPrimitive.Item>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import ChevronDown from "lucide-svelte/icons/chevron-down";
|
|
3
|
+
import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui";
|
|
4
|
+
import { cn } from "../../../utils.js";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<SelectPrimitive.ScrollDownButton
|
|
14
|
+
bind:ref
|
|
15
|
+
class={cn("flex cursor-default items-center justify-center py-1", className)}
|
|
16
|
+
{...restProps}
|
|
17
|
+
>
|
|
18
|
+
<ChevronDown class="size-4" />
|
|
19
|
+
</SelectPrimitive.ScrollDownButton>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import ChevronUp from "lucide-svelte/icons/chevron-up";
|
|
3
|
+
import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui";
|
|
4
|
+
import { cn } from "../../../utils.js";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<SelectPrimitive.ScrollUpButton
|
|
14
|
+
bind:ref
|
|
15
|
+
class={cn("flex cursor-default items-center justify-center py-1", className)}
|
|
16
|
+
{...restProps}
|
|
17
|
+
>
|
|
18
|
+
<ChevronUp class="size-4" />
|
|
19
|
+
</SelectPrimitive.ScrollUpButton>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Separator as SeparatorPrimitive } from "bits-ui";
|
|
3
|
+
import { Separator } from "../separator/index.js";
|
|
4
|
+
import { cn } from "../../../utils.js";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
...restProps
|
|
10
|
+
}: SeparatorPrimitive.RootProps = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<Separator bind:ref class={cn("bg-muted -mx-1 my-1 h-px", className)} {...restProps} />
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
|
|
3
|
+
import ChevronDown from "lucide-svelte/icons/chevron-down";
|
|
4
|
+
import { cn } from "../../../utils.js";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
children,
|
|
10
|
+
...restProps
|
|
11
|
+
}: WithoutChild<SelectPrimitive.TriggerProps> = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<SelectPrimitive.Trigger
|
|
15
|
+
bind:ref
|
|
16
|
+
class={cn(
|
|
17
|
+
"border-input ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
|
18
|
+
className
|
|
19
|
+
)}
|
|
20
|
+
{...restProps}
|
|
21
|
+
>
|
|
22
|
+
{@render children?.()}
|
|
23
|
+
<ChevronDown class="size-4 opacity-50" />
|
|
24
|
+
</SelectPrimitive.Trigger>
|