ui-svelte 0.2.7 → 0.2.9

package/dist/display/Carousel.svelte

@@ -31,6 +31,9 @@
 		rootClass?: string;
 		slideClass?: string;
 		onSlideChange?: (index: number) => void;
+		title?: string | Snippet;
+		slideWidth?: number;
+		gap?: number;
 	};
 
 	const {
@@ -48,7 +51,10 @@
 		variant = 'default',
 		size = 'md',
 		indicatorType = 'bar',
-		onSlideChange
+		onSlideChange,
+		title,
+		slideWidth: slideWidthProp,
+		gap = 0
 	}: Props = $props();
 
 	let currentIndex = $state(0);
@@ -59,10 +65,13 @@
 	let currentTranslate = $state(0);
 	let prevTranslate = $state(0);
 	let autoplayTimer: ReturnType<typeof setTimeout> | null = $state(null);
+	let computedSlideWidth = $state(0);
+	let computedSlidesPerView = $state(1);
 
 	const isVertical = $derived(orientation === 'vertical');
+	const maxIndex = $derived(Math.max(0, slides.length - Math.floor(computedSlidesPerView)));
 	const canGoPrev = $derived(loop || currentIndex > 0);
-	const canGoNext = $derived(loop || currentIndex < slides.length - 1);
+	const canGoNext = $derived(loop || currentIndex < maxIndex);
 
 	const sizeClasses = {
 		sm: 'is-sm',
@@ -71,30 +80,71 @@
 	};
 
 	const updateTransform = () => {
-		if (!containerEl) return;
-		const offset = -currentIndex * 100;
+		if (!containerEl || !viewportEl) return;
+		const viewportSize = isVertical ? viewportEl.offsetHeight : viewportEl.offsetWidth;
+
+		let slideWidth: number;
+
+		if (slideWidthProp) {
+			slideWidth = slideWidthProp;
+			computedSlidesPerView = viewportSize / (slideWidth + gap);
+		} else {
+			slideWidth = viewportSize;
+			computedSlidesPerView = 1;
+		}
+
+		computedSlideWidth = slideWidth;
+
+		const slideElements = containerEl.querySelectorAll('.carousel-slide');
+		slideElements.forEach((el) => {
+			(el as HTMLElement).style.width = `${slideWidth}px`;
+		});
+
+		const offset = -currentIndex * (slideWidth + gap);
 		const property = isVertical ? 'translateY' : 'translateX';
-		containerEl.style.transform = `${property}(${offset}%)`;
+		containerEl.style.transform = `${property}(${offset}px)`;
 	};
 
 	const goToSlide = (index: number) => {
-		if (index < 0 || index >= slides.length) return;
+		if (index < 0 || index > maxIndex) return;
 		currentIndex = index;
 		updateTransform();
 		onSlideChange?.(index);
 		resetAutoplay();
 	};
 
+	const goToSlideInstant = (index: number) => {
+		if (index < 0 || index > maxIndex) return;
+		if (containerEl) {
+			containerEl.style.transition = 'none';
+		}
+		currentIndex = index;
+		updateTransform();
+		onSlideChange?.(index);
+		requestAnimationFrame(() => {
+			if (containerEl) {
+				containerEl.style.transition = '';
+			}
+		});
+		resetAutoplay();
+	};
+
 	const goToPrev = () => {
 		if (!canGoPrev) return;
-		const newIndex = currentIndex === 0 ? slides.length - 1 : currentIndex - 1;
-		goToSlide(newIndex);
+		if (currentIndex === 0) {
+			goToSlideInstant(maxIndex);
+		} else {
+			goToSlide(currentIndex - 1);
+		}
 	};
 
 	const goToNext = () => {
 		if (!canGoNext) return;
-		const newIndex = currentIndex === slides.length - 1 ? 0 : currentIndex + 1;
-		goToSlide(newIndex);
+		if (currentIndex === maxIndex) {
+			goToSlideInstant(0);
+		} else {
+			goToSlide(currentIndex + 1);
+		}
 	};
 
 	const startAutoplay = () => {
@@ -154,7 +204,14 @@
 		currentTranslate = prevTranslate + percentageMoved;
 
 		const property = isVertical ? 'translateY' : 'translateX';
-		containerEl.style.transform = `${property}(calc(-${currentIndex * 100}% + ${diff}px))`;
+
+		if (slideWidthProp) {
+			const slideWidth = computedSlideWidth || slideWidthProp;
+			const baseOffset = -currentIndex * (slideWidth + gap);
+			containerEl.style.transform = `${property}(${baseOffset + diff}px)`;
+		} else {
+			containerEl.style.transform = `${property}(calc(-${currentIndex * 100}% + ${diff}px))`;
+		}
 	};
 
 	const handleDragEnd = () => {
@@ -222,6 +279,10 @@
 		}
 	};
 
+	const handleResize = () => {
+		updateTransform();
+	};
+
 	onMount(() => {
 		tick();
 		updateTransform();
@@ -230,12 +291,14 @@
 			startAutoplay();
 		}
 
+		window.addEventListener('resize', handleResize);
 		document.addEventListener('mousemove', handleMouseMove);
 		document.addEventListener('mouseup', handleMouseUp);
 		document.addEventListener('keydown', handleKeyDown);
 
 		return () => {
 			stopAutoplay();
+			window.removeEventListener('resize', handleResize);
 			document.removeEventListener('mousemove', handleMouseMove);
 			document.removeEventListener('mouseup', handleMouseUp);
 			document.removeEventListener('keydown', handleKeyDown);
@@ -266,10 +329,53 @@
 		ontouchstart={handleTouchStart}
 		ontouchmove={handleTouchMove}
 		ontouchend={handleTouchEnd}
+		style="--slides-per-view: {computedSlidesPerView}; --gap: {gap}px;"
 	>
+		{#if title}
+			<div class="carousel-header">
+				<div class="carousel-title">
+					{#if typeof title === 'string'}
+						<h2>{title}</h2>
+					{:else}
+						{@render title()}
+					{/if}
+				</div>
+				<div class="carousel-header-controls">
+					<button
+						type="button"
+						class="carousel-header-nav is-prev"
+						onclick={goToPrev}
+						disabled={!canGoPrev}
+						aria-label="Previous slide"
+					>
+						{#if isVertical}
+							<Icon icon={ArrowUp24RegularIcon} />
+						{:else}
+							<Icon icon={ArrowLeft24RegularIcon} />
+						{/if}
+					</button>
+
+					<button
+						type="button"
+						class="carousel-header-nav is-next"
+						onclick={goToNext}
+						disabled={!canGoNext}
+						aria-label="Next slide"
+					>
+						{#if isVertical}
+							<Icon icon={ArrowDown24RegularIcon} />
+						{:else}
+							<Icon icon={ArrowRight24RegularIcon} />
+						{/if}
+					</button>
+				</div>
+			</div>
+		{/if}
+
 		<div
 			class={cn('carousel-container', isDragging && 'is-dragging', isVertical && 'is-vertical')}
 			bind:this={containerEl}
+			style="gap: {gap}px;"
 		>
 			{#each slides as slide (slide.id)}
 				<div class={cn('carousel-slide', slideClass)}>

package/dist/display/Carousel.svelte.d.ts

@@ -19,6 +19,9 @@ type Props = {
     rootClass?: string;
     slideClass?: string;
     onSlideChange?: (index: number) => void;
+    title?: string | Snippet;
+    slideWidth?: number;
+    gap?: number;
 };
 declare const Carousel: import("svelte").Component<Props, {}, "">;
 type Carousel = ReturnType<typeof Carousel>;

package/dist/display/css/carousel.css

@@ -36,7 +36,7 @@
 	}
 
 	.carousel-slide {
-		@apply shrink-0 w-full select-none;
+		@apply shrink-0 select-none;
 		height: 100%;
 		user-select: none;
 		-webkit-user-select: none;
@@ -153,4 +153,30 @@
 	.carousel-counter {
 		@apply text-sm text-on-surface/70 text-center font-medium;
 	}
+
+	.carousel-header {
+		@apply flex items-center justify-between mb-6 px-1;
+
+		.carousel-title {
+			h2 {
+				@apply text-3xl font-bold tracking-tight text-on-surface;
+			}
+		}
+
+		.carousel-header-controls {
+			@apply flex items-center gap-3;
+		}
+
+		.carousel-header-nav {
+			@apply flex items-center justify-center w-12 h-12 rounded-full;
+			@apply bg-surface text-on-surface transition-all duration-200;
+			@apply border border-muted shadow-sm;
+			@apply hover:bg-muted hover:scale-105 active:scale-95;
+			@apply disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-surface disabled:hover:scale-100;
+
+			:global(svg) {
+				@apply w-6 h-6;
+			}
+		}
+	}
 }

package/dist/layout/AppBar.svelte

@@ -18,6 +18,7 @@
 		hideOnScroll?: boolean;
 		solidOnScroll?: boolean;
 		isSticky?: boolean;
+		isFloating?: boolean;
 		isBoxed?: boolean;
 		variant?:
 			| 'primary'
@@ -47,7 +48,8 @@
 		isBoxed,
 		variant = 'ghost',
 		hideOnScroll,
-		solidOnScroll = false
+		solidOnScroll = false,
+		isFloating = false
 	}: Props = $props();
 
 	let headerElement = $state<HTMLElement | null>(null);
@@ -99,6 +101,7 @@
 	const shouldBlur = $derived(isBlurred && scroll.isScrolled);
 	const shouldShowBorder = $derived(isBordered && (!borderOnScrollOnly || scroll.isScrolled));
 	const isTransparent = $derived(solidOnScroll && !scroll.isScrolled);
+	const isFloatingActive = $derived(isFloating && !scroll.isScrolled);
 </script>
 
 <header
@@ -111,6 +114,8 @@
 		isHidden && 'is-hidden',
 		isTransparent && 'is-transparent',
 		isSticky && 'is-sticky',
+		isFloating && 'is-floating-enabled',
+		isFloatingActive && 'is-floating',
 		rootClass
 	)}
 >

package/dist/layout/AppBar.svelte.d.ts

@@ -14,6 +14,7 @@ type Props = {
     hideOnScroll?: boolean;
     solidOnScroll?: boolean;
     isSticky?: boolean;
+    isFloating?: boolean;
     isBoxed?: boolean;
     variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'ghost';
 };

package/dist/layout/css/app-bar.css

@@ -1,6 +1,6 @@
 @layer components {
 	.appbar {
-		@apply w-full z-30;
+		@apply w-full z-30 transition-all duration-300;
 
 		&.is-sticky {
 			@apply fixed top-0;
@@ -14,7 +14,6 @@
 			@apply border-b border-muted;
 		}
 
-
 		&.is-hidden {
 			@apply -translate-y-full;
 		}
@@ -23,6 +22,20 @@
 			@apply bg-transparent border-transparent shadow-none;
 		}
 
+		&.is-floating-enabled {
+			@apply left-1/2 -translate-x-1/2;
+		}
+
+		&.is-floating {
+			@apply mt-4 w-[calc(100%-2rem)] rounded-full shadow-md border border-black/5;
+			@apply bg-background/90 backdrop-blur-md;
+		}
+
+		&.is-floating-enabled:not(.is-floating) {
+			@apply mt-0 w-full rounded-none;
+			@apply bg-background/80 backdrop-blur-md border-b border-muted;
+		}
+
 		.appbar-content {
 			@apply flex flex-nowrap items-center justify-between relative;
 			@apply w-full px-2 h-full min-h-12;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui-svelte",
-	"version": "0.2.7",
+	"version": "0.2.9",
 	"author": {
 		"name": "SappsDev",
 		"email": "info@sappsdev.com"