fix: Version Bump
All checks were successful
Publish Svelte Tailwind Library / build-and-publish (push) Successful in 24s
All checks were successful
Publish Svelte Tailwind Library / build-and-publish (push) Successful in 24s
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@luke-else/component-lib",
|
"name": "@luke-else/component-lib",
|
||||||
"version": "1.0.5",
|
"version": "1.0.6",
|
||||||
"description": "",
|
"description": "",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"package": "svelte-package && pnpm run build:css",
|
"package": "svelte-package && pnpm run build:css",
|
||||||
|
@@ -1,91 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { spring } from 'svelte/motion';
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
|
|
||||||
export let items: any[] = []; // Array of components/items to display
|
|
||||||
|
|
||||||
let container: HTMLElement;
|
|
||||||
let isDragging = false;
|
|
||||||
let startX: number;
|
|
||||||
let scrollLeft: number;
|
|
||||||
|
|
||||||
const centerOffset = spring(0);
|
|
||||||
|
|
||||||
function handleMouseDown(e: MouseEvent) {
|
|
||||||
isDragging = true;
|
|
||||||
startX = e.pageX - container.offsetLeft;
|
|
||||||
scrollLeft = container.scrollLeft;
|
|
||||||
container.style.cursor = 'grabbing';
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleMouseMove(e: MouseEvent) {
|
|
||||||
if (!isDragging) return;
|
|
||||||
e.preventDefault();
|
|
||||||
const x = e.pageX - container.offsetLeft;
|
|
||||||
const walk = (x - startX) * 2;
|
|
||||||
container.scrollLeft = scrollLeft - walk;
|
|
||||||
updateItemScales();
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleMouseUp() {
|
|
||||||
isDragging = false;
|
|
||||||
container.style.cursor = 'grab';
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateItemScales() {
|
|
||||||
const containerCenter = container.offsetWidth / 2;
|
|
||||||
$centerOffset = container.scrollLeft + containerCenter;
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
container.addEventListener('scroll', updateItemScales);
|
|
||||||
return () => container.removeEventListener('scroll', updateItemScales);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="gallery-container"
|
|
||||||
bind:this={container}
|
|
||||||
on:mousedown={handleMouseDown}
|
|
||||||
on:mousemove={handleMouseMove}
|
|
||||||
on:mouseup={handleMouseUp}
|
|
||||||
on:mouseleave={handleMouseUp}>
|
|
||||||
|
|
||||||
{#each items as item, i}
|
|
||||||
<div class="gallery-item"
|
|
||||||
style="
|
|
||||||
--scale: {Math.max(0.6, 1 - Math.abs($centerOffset - (i * 300 + 150)) / 1000)};
|
|
||||||
--opacity: {Math.max(0.3, 1 - Math.abs($centerOffset - (i * 300 + 150)) / 1000)};
|
|
||||||
">
|
|
||||||
<svelte:component this={item} />
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.gallery-container {
|
|
||||||
width: 100%;
|
|
||||||
overflow-x: scroll;
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
padding: 2rem;
|
|
||||||
cursor: grab;
|
|
||||||
scrollbar-width: none;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-container::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-item {
|
|
||||||
min-width: 300px;
|
|
||||||
height: 400px;
|
|
||||||
transform: scale(var(--scale, 1));
|
|
||||||
opacity: var(--opacity, 1);
|
|
||||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
Reference in New Issue
Block a user