Skip to content

Commit f45495c

Browse files
gustaavikgustaavik
committed
feat: implement product deletion functionality with confirmation dialog and enhance load dependencies
1 parent 67e0db6 commit f45495c

13 files changed

Lines changed: 305 additions & 5 deletions

‎src/lib/components/ui/alert-dialog/alert-dialog-action.svelte‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script lang="ts">
2+
import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
3+
import { buttonVariants } from "$lib/components/ui/button/index.js";
4+
import { cn } from "$lib/utils.js";
5+
6+
let {
7+
ref = $bindable(null),
8+
class: className,
9+
...restProps
10+
}: AlertDialogPrimitive.ActionProps = $props();
11+
</script>
12+
13+
<AlertDialogPrimitive.Action
14+
bind:ref
15+
data-slot="alert-dialog-action"
16+
class={cn(buttonVariants(), className)}
17+
{...restProps}
18+
/>

‎src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script lang="ts">
2+
import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
3+
import { buttonVariants } from "$lib/components/ui/button/index.js";
4+
import { cn } from "$lib/utils.js";
5+
6+
let {
7+
ref = $bindable(null),
8+
class: className,
9+
...restProps
10+
}: AlertDialogPrimitive.CancelProps = $props();
11+
</script>
12+
13+
<AlertDialogPrimitive.Cancel
14+
bind:ref
15+
data-slot="alert-dialog-cancel"
16+
class={cn(buttonVariants({ variant: "outline" }), className)}
17+
{...restProps}
18+
/>

‎src/lib/components/ui/alert-dialog/alert-dialog-content.svelte‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts">
2+
import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
3+
import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
4+
import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js";
5+
6+
let {
7+
ref = $bindable(null),
8+
class: className,
9+
portalProps,
10+
...restProps
11+
}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
12+
portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>;
13+
} = $props();
14+
</script>
15+
16+
<AlertDialogPrimitive.Portal {...portalProps}>
17+
<AlertDialogOverlay />
18+
<AlertDialogPrimitive.Content
19+
bind:ref
20+
data-slot="alert-dialog-content"
21+
class={cn(
22+
"bg-background 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 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
23+
className
24+
)}
25+
{...restProps}
26+
/>
27+
</AlertDialogPrimitive.Portal>

‎src/lib/components/ui/alert-dialog/alert-dialog-description.svelte‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script lang="ts">
2+
import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
3+
import { cn } from "$lib/utils.js";
4+
5+
let {
6+
ref = $bindable(null),
7+
class: className,
8+
...restProps
9+
}: AlertDialogPrimitive.DescriptionProps = $props();
10+
</script>
11+
12+
<AlertDialogPrimitive.Description
13+
bind:ref
14+
data-slot="alert-dialog-description"
15+
class={cn("text-muted-foreground text-sm", className)}
16+
{...restProps}
17+
/>

‎src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts">
2+
import { cn, type WithElementRef } from "$lib/utils.js";
3+
import type { HTMLAttributes } from "svelte/elements";
4+
5+
let {
6+
ref = $bindable(null),
7+
class: className,
8+
children,
9+
...restProps
10+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
11+
</script>
12+
13+
<div
14+
bind:this={ref}
15+
data-slot="alert-dialog-footer"
16+
class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
17+
{...restProps}
18+
>
19+
{@render children?.()}
20+
</div>

‎src/lib/components/ui/alert-dialog/alert-dialog-header.svelte‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts">
2+
import type { HTMLAttributes } from "svelte/elements";
3+
import { cn, type WithElementRef } from "$lib/utils.js";
4+
5+
let {
6+
ref = $bindable(null),
7+
class: className,
8+
children,
9+
...restProps
10+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
11+
</script>
12+
13+
<div
14+
bind:this={ref}
15+
data-slot="alert-dialog-header"
16+
class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
17+
{...restProps}
18+
>
19+
{@render children?.()}
20+
</div>

‎src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts">
2+
import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
3+
import { cn } from "$lib/utils.js";
4+
5+
let {
6+
ref = $bindable(null),
7+
class: className,
8+
...restProps
9+
}: AlertDialogPrimitive.OverlayProps = $props();
10+
</script>
11+
12+
<AlertDialogPrimitive.Overlay
13+
bind:ref
14+
data-slot="alert-dialog-overlay"
15+
class={cn(
16+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
17+
className
18+
)}
19+
{...restProps}
20+
/>

‎src/lib/components/ui/alert-dialog/alert-dialog-title.svelte‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script lang="ts">
2+
import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
3+
import { cn } from "$lib/utils.js";
4+
5+
let {
6+
ref = $bindable(null),
7+
class: className,
8+
...restProps
9+
}: AlertDialogPrimitive.TitleProps = $props();
10+
</script>
11+
12+
<AlertDialogPrimitive.Title
13+
bind:ref
14+
data-slot="alert-dialog-title"
15+
class={cn("text-lg font-semibold", className)}
16+
{...restProps}
17+
/>

‎src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script lang="ts">
2+
import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
3+
4+
let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
5+
</script>
6+
7+
<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />

‎src/lib/components/ui/alert-dialog/index.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
2+
import Trigger from "./alert-dialog-trigger.svelte";
3+
import Title from "./alert-dialog-title.svelte";
4+
import Action from "./alert-dialog-action.svelte";
5+
import Cancel from "./alert-dialog-cancel.svelte";
6+
import Footer from "./alert-dialog-footer.svelte";
7+
import Header from "./alert-dialog-header.svelte";
8+
import Overlay from "./alert-dialog-overlay.svelte";
9+
import Content from "./alert-dialog-content.svelte";
10+
import Description from "./alert-dialog-description.svelte";
11+
12+
const Root = AlertDialogPrimitive.Root;
13+
const Portal = AlertDialogPrimitive.Portal;
14+
15+
export {
16+
Root,
17+
Title,
18+
Action,
19+
Cancel,
20+
Portal,
21+
Footer,
22+
Header,
23+
Trigger,
24+
Overlay,
25+
Content,
26+
Description,
27+
//
28+
Root as AlertDialog,
29+
Title as AlertDialogTitle,
30+
Action as AlertDialogAction,
31+
Cancel as AlertDialogCancel,
32+
Portal as AlertDialogPortal,
33+
Footer as AlertDialogFooter,
34+
Header as AlertDialogHeader,
35+
Trigger as AlertDialogTrigger,
36+
Overlay as AlertDialogOverlay,
37+
Content as AlertDialogContent,
38+
Description as AlertDialogDescription,
39+
};

0 commit comments

Comments
 (0)