starred/MediaManager-maxdorninger
1
0
Fork 0
mirror of https://github.com/maxdorninger/MediaManager.git synced 2026-04-22 13:55:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix formatting

Browse Source
This commit is contained in:
maxDorninger
2025-05-25 20:31:48 +02:00
parent 729a7ed647
commit b2dc7a18a6
39 changed files with 855 additions and 832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/lib/components/ui/carousel/carousel-content.svelte
View File

@@ -1,9 +1,9 @@
<script lang="ts">
import emblaCarouselSvelte from "embla-carousel-svelte";
import type {WithElementRef} from "bits-ui";
import type {HTMLAttributes} from "svelte/elements";
import {getEmblaContext} from "./context.js";
import {cn} from "$lib/utils.js";
import emblaCarouselSvelte from 'embla-carousel-svelte';
import type {WithElementRef} from 'bits-ui';
import type {HTMLAttributes} from 'svelte/elements';
import {getEmblaContext} from './context.js';
import {cn} from '$lib/utils.js';
let {
ref = $bindable(null),
@@ -12,7 +12,7 @@
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
const emblaCtx = getEmblaContext("<Carousel.Content/>");
const emblaCtx = getEmblaContext('<Carousel.Content/>');
</script>
<!-- svelte-ignore event_directive_deprecated -->
@@ -21,20 +21,20 @@
on:emblaInit={emblaCtx.onInit}
use:emblaCarouselSvelte={{
options: {
container: "[data-embla-container]",
slides: "[data-embla-slide]",
container: '[data-embla-container]',
slides: '[data-embla-slide]',
...emblaCtx.options,
axis: emblaCtx.orientation === "horizontal" ? "x" : "y",
axis: emblaCtx.orientation === 'horizontal' ? 'x' : 'y'
},
plugins: emblaCtx.plugins,
plugins: emblaCtx.plugins
}}
>
<div
{...restProps}
bind:this={ref}
class={cn(
"flex",
emblaCtx.orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
'flex',
emblaCtx.orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
className
)}
data-embla-container=""

14
web/src/lib/components/ui/carousel/carousel-item.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import type {WithElementRef} from "bits-ui";
import type {HTMLAttributes} from "svelte/elements";
import {getEmblaContext} from "./context.js";
import {cn} from "$lib/utils.js";
import type {WithElementRef} from 'bits-ui';
import type {HTMLAttributes} from 'svelte/elements';
import {getEmblaContext} from './context.js';
import {cn} from '$lib/utils.js';
let {
ref = $bindable(null),
@@ -11,7 +11,7 @@
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
const emblaCtx = getEmblaContext("<Carousel.Item/>");
const emblaCtx = getEmblaContext('<Carousel.Item/>');
</script>
<div
@@ -19,8 +19,8 @@
aria-roledescription="slide"
bind:this={ref}
class={cn(
"min-w-0 shrink-0 grow-0 basis-full",
emblaCtx.orientation === "horizontal" ? "pl-4" : "pt-4",
'min-w-0 shrink-0 grow-0 basis-full',
emblaCtx.orientation === 'horizontal' ? 'pl-4' : 'pt-4',
className
)}
data-embla-slide=""

24
web/src/lib/components/ui/carousel/carousel-next.svelte
View File

@@ -1,29 +1,29 @@
<script lang="ts">
import ArrowRight from "@lucide/svelte/icons/arrow-right";
import type {WithoutChildren} from "bits-ui";
import {getEmblaContext} from "./context.js";
import {cn} from "$lib/utils.js";
import {Button, type Props} from "$lib/components/ui/button/index.js";
import ArrowRight from '@lucide/svelte/icons/arrow-right';
import type {WithoutChildren} from 'bits-ui';
import {getEmblaContext} from './context.js';
import {cn} from '$lib/utils.js';
import {Button, type Props} from '$lib/components/ui/button/index.js';
let {
ref = $bindable(null),
class: className,
variant = "outline",
size = "icon",
variant = 'outline',
size = 'icon',
...restProps
}: WithoutChildren<Props> = $props();
const emblaCtx = getEmblaContext("<Carousel.Next/>");
const emblaCtx = getEmblaContext('<Carousel.Next/>');
</script>
<Button
{...restProps}
bind:ref
class={cn(
"absolute size-8 touch-manipulation rounded-full",
emblaCtx.orientation === "horizontal"
? "-right-12 top-1/2 -translate-y-1/2"
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
'absolute size-8 touch-manipulation rounded-full',
emblaCtx.orientation === 'horizontal'
? '-right-12 top-1/2 -translate-y-1/2'
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
className
)}
disabled={!emblaCtx.canScrollNext}

24
web/src/lib/components/ui/carousel/carousel-previous.svelte
View File

@@ -1,29 +1,29 @@
<script lang="ts">
import ArrowLeft from "@lucide/svelte/icons/arrow-left";
import type {WithoutChildren} from "bits-ui";
import {getEmblaContext} from "./context.js";
import {cn} from "$lib/utils.js";
import {Button, type Props} from "$lib/components/ui/button/index.js";
import ArrowLeft from '@lucide/svelte/icons/arrow-left';
import type {WithoutChildren} from 'bits-ui';
import {getEmblaContext} from './context.js';
import {cn} from '$lib/utils.js';
import {Button, type Props} from '$lib/components/ui/button/index.js';
let {
ref = $bindable(null),
class: className,
variant = "outline",
size = "icon",
variant = 'outline',
size = 'icon',
...restProps
}: WithoutChildren<Props> = $props();
const emblaCtx = getEmblaContext("<Carousel.Previous/>");
const emblaCtx = getEmblaContext('<Carousel.Previous/>');
</script>
<Button
{...restProps}
bind:ref
class={cn(
"absolute size-8 touch-manipulation rounded-full",
emblaCtx.orientation === "horizontal"
? "-left-12 top-1/2 -translate-y-1/2"
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
'absolute size-8 touch-manipulation rounded-full',
emblaCtx.orientation === 'horizontal'
? '-left-12 top-1/2 -translate-y-1/2'
: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
className
)}
disabled={!emblaCtx.canScrollPrev}

22
web/src/lib/components/ui/carousel/carousel.svelte
View File

@@ -3,16 +3,16 @@
type CarouselAPI,
type CarouselProps,
type EmblaContext,
setEmblaContext,
} from "./context.js";
import {cn} from "$lib/utils.js";
setEmblaContext
} from './context.js';
import {cn} from '$lib/utils.js';
let {
opts = {},
plugins = [],
setApi = () => {
},
orientation = "horizontal",
orientation = 'horizontal',
class: className,
children,
...restProps
@@ -31,7 +31,7 @@
onInit,
scrollSnaps: [],
selectedIndex: 0,
scrollTo,
scrollTo
});
setEmblaContext(carouselState);
@@ -58,16 +58,16 @@
$effect(() => {
if (carouselState.api) {
onSelect(carouselState.api);
carouselState.api.on("select", onSelect);
carouselState.api.on("reInit", onSelect);
carouselState.api.on('select', onSelect);
carouselState.api.on('reInit', onSelect);
}
});
function handleKeyDown(e: KeyboardEvent) {
if (e.key === "ArrowLeft") {
if (e.key === 'ArrowLeft') {
e.preventDefault();
scrollPrev();
} else if (e.key === "ArrowRight") {
} else if (e.key === 'ArrowRight') {
e.preventDefault();
scrollNext();
}
@@ -85,11 +85,11 @@
$effect(() => {
return () => {
carouselState.api?.off("select", onSelect);
carouselState.api?.off('select', onSelect);
};
});
</script>
<div {...restProps} aria-roledescription="carousel" class={cn("relative", className)} role="region">
<div {...restProps} aria-roledescription="carousel" class={cn('relative', className)} role="region">
{@render children?.()}
</div>

24
web/src/lib/components/ui/carousel/context.ts
View File

@@ -1,11 +1,11 @@
import type {EmblaCarouselSvelteType} from "embla-carousel-svelte";
import type emblaCarouselSvelte from "embla-carousel-svelte";
import {getContext, hasContext, setContext} from "svelte";
import type {WithElementRef} from "bits-ui";
import type {HTMLAttributes} from "svelte/elements";
import type {EmblaCarouselSvelteType} from 'embla-carousel-svelte';
import type emblaCarouselSvelte from 'embla-carousel-svelte';
import {getContext, hasContext, setContext} from 'svelte';
import type {WithElementRef} from 'bits-ui';
import type {HTMLAttributes} from 'svelte/elements';
export type CarouselAPI =
NonNullable<NonNullable<EmblaCarouselSvelteType["$$_attributes"]>["on:emblaInit"]> extends (
NonNullable<NonNullable<EmblaCarouselSvelteType['$$_attributes']>['on:emblaInit']> extends (
evt: CustomEvent<infer CarouselAPI>
) => void
? CarouselAPI
@@ -13,8 +13,8 @@ export type CarouselAPI =
type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
export type CarouselOptions = EmblaCarouselConfig["options"];
export type CarouselPlugins = EmblaCarouselConfig["plugins"];
export type CarouselOptions = EmblaCarouselConfig['options'];
export type CarouselPlugins = EmblaCarouselConfig['plugins'];
////
@@ -22,14 +22,14 @@ export type CarouselProps = {
opts?: CarouselOptions;
plugins?: CarouselPlugins;
setApi?: (api: CarouselAPI | undefined) => void;
orientation?: "horizontal" | "vertical";
orientation?: 'horizontal' | 'vertical';
} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
const EMBLA_CAROUSEL_CONTEXT = Symbol('EMBLA_CAROUSEL_CONTEXT');
export type EmblaContext = {
api: CarouselAPI | undefined;
orientation: "horizontal" | "vertical";
orientation: 'horizontal' | 'vertical';
scrollNext: () => void;
scrollPrev: () => void;
canScrollNext: boolean;
@@ -48,7 +48,7 @@ export function setEmblaContext(config: EmblaContext): EmblaContext {
return config;
}
export function getEmblaContext(name = "This component") {
export function getEmblaContext(name = 'This component') {
if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
throw new Error(`${name} must be used within a <Carousel.Root> component`);
}

12
web/src/lib/components/ui/carousel/index.ts
View File

@@ -1,8 +1,8 @@
import Root from "./carousel.svelte";
import Content from "./carousel-content.svelte";
import Item from "./carousel-item.svelte";
import Previous from "./carousel-previous.svelte";
import Next from "./carousel-next.svelte";
import Root from './carousel.svelte';
import Content from './carousel-content.svelte';
import Item from './carousel-item.svelte';
import Previous from './carousel-previous.svelte';
import Next from './carousel-next.svelte';
export {
Root,
@@ -15,5 +15,5 @@ export {
Content as CarouselContent,
Item as CarouselItem,
Previous as CarouselPrevious,
Next as CarouselNext,
Next as CarouselNext
};