95 lines
3.5 KiB
Plaintext
95 lines
3.5 KiB
Plaintext
component BackToTop {
|
|
props {
|
|
class = ""
|
|
label = "Back to top"
|
|
assistiveLabel = "Return to the top of the page"
|
|
threshold = 500
|
|
}
|
|
|
|
state visible = false
|
|
|
|
functions {
|
|
function updateBackToTopVisibility() {
|
|
visible = window.scrollY > threshold
|
|
}
|
|
|
|
function scrollToTop() {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth"
|
|
})
|
|
}
|
|
}
|
|
|
|
lifecycle {
|
|
mount {
|
|
updateBackToTopVisibility()
|
|
|
|
window.addEventListener(
|
|
"scroll",
|
|
updateBackToTopVisibility,
|
|
{ passive: true }
|
|
)
|
|
}
|
|
|
|
unmount {
|
|
window.removeEventListener(
|
|
"scroll",
|
|
updateBackToTopVisibility
|
|
)
|
|
}
|
|
}
|
|
|
|
watch visible {
|
|
console.debug(
|
|
"Back-to-top visibility:",
|
|
value,
|
|
previous
|
|
)
|
|
}
|
|
|
|
view {
|
|
<div
|
|
class="group fixed bottom-6 right-5 z-[70] flex items-center gap-2 transition-all duration-300 sm:right-6 lg:bottom-8 lg:right-8 {class}"
|
|
class:pointer-events-none="!visible"
|
|
class:translate-y-5="!visible"
|
|
class:scale-90="!visible"
|
|
class:opacity-0="!visible"
|
|
class:pointer-events-auto="visible"
|
|
class:translate-y-0="visible"
|
|
class:scale-100="visible"
|
|
class:opacity-100="visible"
|
|
>
|
|
<!-- Hover label -->
|
|
<span
|
|
class="pointer-events-none hidden translate-x-2 whitespace-nowrap rounded-xl border border-slate-200 bg-white/95 px-3 py-2 text-xs font-semibold text-slate-700 opacity-0 shadow-lg shadow-slate-950/10 backdrop-blur-xl transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 dark:border-white/10 dark:bg-slate-900/95 dark:text-slate-200 dark:shadow-black/30 sm:block"
|
|
>
|
|
{label}
|
|
</span>
|
|
|
|
<!-- Gradient border wrapper -->
|
|
<div
|
|
class="relative rounded-2xl bg-linear-to-br from-indigo-500 via-violet-500 to-cyan-500 p-px shadow-xl shadow-indigo-600/20 transition duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:shadow-indigo-600/30"
|
|
>
|
|
<!-- Glow -->
|
|
<div aria-hidden="true" class="absolute inset-1 rounded-2xl bg-indigo-500/20 opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-100" ></div>
|
|
|
|
<button
|
|
type="button"
|
|
@click="scrollToTop()"
|
|
aria-label="{label}"
|
|
title="{label}"
|
|
class="relative grid h-12 w-12 place-items-center rounded-[15px] bg-white/95 text-indigo-700 backdrop-blur-xl transition duration-300 hover:bg-indigo-600 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 active:scale-95 dark:bg-slate-900/95 dark:text-indigo-300 dark:hover:bg-indigo-500 dark:hover:text-white dark:focus-visible:ring-offset-slate-950 sm:h-13 sm:w-13"
|
|
>
|
|
<!-- Arrow -->
|
|
<span class="icon-[lucide--arrow-up] h-5 w-5 transition-transform duration-300 group-hover:-translate-y-0.5" aria-hidden="true" ></span>
|
|
|
|
<span class="sr-only">
|
|
{assistiveLabel}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|