mihkelmk/portfolio_site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Run prettier on all files

Browse source
This commit is contained in:
Mihkel Martin Kasterpalu 2025-01-22 14:25:24 +02:00
parent f977fc254a
commit 387b7216a4
30 changed files with 258 additions and 264 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { buttonVariants } from "$lib/components/ui/button/index.js"; import { buttonVariants } from '$lib/components/ui/button/index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
class: className, class: className,

8
src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { buttonVariants } from "$lib/components/ui/button/index.js"; import { buttonVariants } from '$lib/components/ui/button/index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
class: className, class: className,
@ -12,6 +12,6 @@
<AlertDialogPrimitive.Cancel <AlertDialogPrimitive.Cancel
bind:ref bind:ref
class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)} class={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
{...restProps} {...restProps}
/> />

8
src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from 'bits-ui';
import AlertDialogOverlay from "./alert-dialog-overlay.svelte"; import AlertDialogOverlay from './alert-dialog-overlay.svelte';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -18,7 +18,7 @@
<AlertDialogPrimitive.Content <AlertDialogPrimitive.Content
bind:ref bind:ref
class={cn( class={cn(
"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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg", 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
className className
)} )}
{...restProps} {...restProps}

6
src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
class: className, class: className,
@ -11,6 +11,6 @@
<AlertDialogPrimitive.Description <AlertDialogPrimitive.Description
bind:ref bind:ref
class={cn("text-muted-foreground text-sm", className)} class={cn('text-sm text-muted-foreground', className)}
{...restProps} {...restProps}
/> />

8
src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<div <div
bind:this={ref} bind:this={ref}
class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

8
src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<div <div
bind:this={ref} bind:this={ref}
class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} class={cn('flex flex-col space-y-2 text-center sm:text-left', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

6
src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
class: className, class: className,
@ -12,7 +12,7 @@
<AlertDialogPrimitive.Overlay <AlertDialogPrimitive.Overlay
bind:ref bind:ref
class={cn( class={cn(
"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/80", 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
className className
)} )}
{...restProps} {...restProps}

6
src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
class: className, class: className,
@ -12,7 +12,7 @@
<AlertDialogPrimitive.Title <AlertDialogPrimitive.Title
bind:ref bind:ref
class={cn("text-lg font-semibold", className)} class={cn('text-lg font-semibold', className)}
{level} {level}
{...restProps} {...restProps}
/> />

20
src/lib/components/ui/alert-dialog/index.ts
View file

@ -1,13 +1,13 @@
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import Title from "./alert-dialog-title.svelte"; import Title from './alert-dialog-title.svelte';
import Action from "./alert-dialog-action.svelte"; import Action from './alert-dialog-action.svelte';
import Cancel from "./alert-dialog-cancel.svelte"; import Cancel from './alert-dialog-cancel.svelte';
import Footer from "./alert-dialog-footer.svelte"; import Footer from './alert-dialog-footer.svelte';
import Header from "./alert-dialog-header.svelte"; import Header from './alert-dialog-header.svelte';
import Overlay from "./alert-dialog-overlay.svelte"; import Overlay from './alert-dialog-overlay.svelte';
import Content from "./alert-dialog-content.svelte"; import Content from './alert-dialog-content.svelte';
import Description from "./alert-dialog-description.svelte"; import Description from './alert-dialog-description.svelte';
const Root = AlertDialogPrimitive.Root; const Root = AlertDialogPrimitive.Root;
const Trigger = AlertDialogPrimitive.Trigger; const Trigger = AlertDialogPrimitive.Trigger;
@ -36,5 +36,5 @@ export {
Trigger as AlertDialogTrigger, Trigger as AlertDialogTrigger,
Overlay as AlertDialogOverlay, Overlay as AlertDialogOverlay,
Content as AlertDialogContent, Content as AlertDialogContent,
Description as AlertDialogDescription, Description as AlertDialogDescription
}; };

56
src/lib/components/ui/button/button.svelte
View file

@ -1,36 +1,35 @@
<script lang="ts" module> <script lang="ts" module>
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements"; import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
import { type VariantProps, tv } from "tailwind-variants"; import { type VariantProps, tv } from 'tailwind-variants';
export const buttonVariants = tv({ export const buttonVariants = tv({
base: "focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", base: 'focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
variants: { variants: {
variant: { variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow", default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
destructive: destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
outline: outline:
"border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm", 'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm',
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm", secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
ghost: "hover:bg-accent hover:text-accent-foreground", ghost: 'hover:bg-accent hover:text-accent-foreground',
link: "text-primary underline-offset-4 hover:underline", link: 'text-primary underline-offset-4 hover:underline'
}, },
size: { size: {
default: "h-9 px-4 py-2", default: 'h-9 px-4 py-2',
sm: "h-8 rounded-md px-3 text-xs", sm: 'h-8 rounded-md px-3 text-xs',
lg: "h-10 rounded-md px-8", lg: 'h-10 rounded-md px-8',
icon: "h-9 w-9", icon: 'h-9 w-9'
}, }
}, },
defaultVariants: { defaultVariants: {
variant: "default", variant: 'default',
size: "default", size: 'default'
}, }
}); });
export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"]; export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
export type ButtonSize = VariantProps<typeof buttonVariants>["size"]; export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
export type ButtonProps = WithElementRef<HTMLButtonAttributes> & export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
WithElementRef<HTMLAnchorAttributes> & { WithElementRef<HTMLAnchorAttributes> & {
@ -40,27 +39,22 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
class: className, class: className,
variant = "default", variant = 'default',
size = "default", size = 'default',
ref = $bindable(null), ref = $bindable(null),
href = undefined, href = undefined,
type = "button", type = 'button',
children, children,
...restProps ...restProps
}: ButtonProps = $props(); }: ButtonProps = $props();
</script> </script>
{#if href} {#if href}
<a <a bind:this={ref} class={cn(buttonVariants({ variant, size }), className)} {href} {...restProps}>
bind:this={ref}
class={cn(buttonVariants({ variant, size }), className)}
{href}
{...restProps}
>
{@render children?.()} {@render children?.()}
</a> </a>
{:else} {:else}

6
src/lib/components/ui/button/index.ts
View file

@ -2,8 +2,8 @@ import Root, {
type ButtonProps, type ButtonProps,
type ButtonSize, type ButtonSize,
type ButtonVariant, type ButtonVariant,
buttonVariants, buttonVariants
} from "./button.svelte"; } from './button.svelte';
export { export {
Root, Root,
@ -13,5 +13,5 @@ export {
buttonVariants, buttonVariants,
type ButtonProps, type ButtonProps,
type ButtonSize, type ButtonSize,
type ButtonVariant, type ButtonVariant
}; };

8
src/lib/components/ui/card/card-content.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -11,6 +11,6 @@
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props(); }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script> </script>
<div bind:this={ref} class={cn("p-6", className)} {...restProps}> <div bind:this={ref} class={cn('p-6', className)} {...restProps}>
{@render children?.()} {@render children?.()}
</div> </div>

8
src/lib/components/ui/card/card-description.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -11,6 +11,6 @@
}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props(); }: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
</script> </script>
<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}> <p bind:this={ref} class={cn('text-sm text-muted-foreground', className)} {...restProps}>
{@render children?.()} {@render children?.()}
</p> </p>

8
src/lib/components/ui/card/card-footer.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -11,6 +11,6 @@
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props(); }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script> </script>
<div bind:this={ref} class={cn("flex items-center p-6 pt-0", className)} {...restProps}> <div bind:this={ref} class={cn('flex items-center p-6 pt-0', className)} {...restProps}>
{@render children?.()} {@render children?.()}
</div> </div>

8
src/lib/components/ui/card/card-header.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -11,6 +11,6 @@
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props(); }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script> </script>
<div bind:this={ref} class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...restProps}> <div bind:this={ref} class={cn('flex flex-col space-y-1.5 p-6 pb-0', className)} {...restProps}>
{@render children?.()} {@render children?.()}
</div> </div>

8
src/lib/components/ui/card/card-title.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -18,7 +18,7 @@
role="heading" role="heading"
aria-level={level} aria-level={level}
bind:this={ref} bind:this={ref}
class={cn("font-semibold leading-none tracking-tight", className)} class={cn('font-semibold leading-none tracking-tight', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

8
src/lib/components/ui/card/card.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<div <div
bind:this={ref} bind:this={ref}
class={cn("bg-card text-card-foreground rounded-xl border shadow", className)} class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

14
src/lib/components/ui/card/index.ts
View file

@ -1,9 +1,9 @@
import Root from "./card.svelte"; import Root from './card.svelte';
import Content from "./card-content.svelte"; import Content from './card-content.svelte';
import Description from "./card-description.svelte"; import Description from './card-description.svelte';
import Footer from "./card-footer.svelte"; import Footer from './card-footer.svelte';
import Header from "./card-header.svelte"; import Header from './card-header.svelte';
import Title from "./card-title.svelte"; import Title from './card-title.svelte';
export { export {
Root, Root,
@ -18,5 +18,5 @@ export {
Description as CardDescription, Description as CardDescription,
Footer as CardFooter, Footer as CardFooter,
Header as CardHeader, Header as CardHeader,
Title as CardTitle, Title as CardTitle
}; };

4
src/lib/components/ui/separator/index.ts
View file

@ -1,7 +1,7 @@
import Root from "./separator.svelte"; import Root from './separator.svelte';
export { export {
Root, Root,
// //
Root as Separator, Root as Separator
}; };

10
src/lib/components/ui/separator/separator.svelte
View file

@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { Separator as SeparatorPrimitive } from "bits-ui"; import { Separator as SeparatorPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
orientation = "horizontal", orientation = 'horizontal',
...restProps ...restProps
}: SeparatorPrimitive.RootProps = $props(); }: SeparatorPrimitive.RootProps = $props();
</script> </script>
@ -13,8 +13,8 @@
<SeparatorPrimitive.Root <SeparatorPrimitive.Root
bind:ref bind:ref
class={cn( class={cn(
"bg-border shrink-0", 'shrink-0 bg-border',
orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]", orientation === 'horizontal' ? 'h-[1px] w-full' : 'min-h-full w-[1px]',
className className
)} )}
{orientation} {orientation}

4
src/lib/components/ui/skeleton/index.ts
View file

@ -1,7 +1,7 @@
import Root from "./skeleton.svelte"; import Root from './skeleton.svelte';
export { export {
Root, Root,
// //
Root as Skeleton, Root as Skeleton
}; };

8
src/lib/components/ui/skeleton/skeleton.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef, WithoutChildren } from "bits-ui"; import type { WithElementRef, WithoutChildren } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -12,6 +12,6 @@
<div <div
bind:this={ref} bind:this={ref}
class={cn("bg-primary/10 animate-pulse rounded-md", className)} class={cn('animate-pulse rounded-md bg-primary/10', className)}
{...restProps} {...restProps}
></div> ></div>