initial: bootstrap from BukidBountyApp base
This commit is contained in:
Jonathan Sykes
149
resources/js/Components/Core/Animations/AnimatedButton.vue
Normal file
149
resources/js/Components/Core/Animations/AnimatedButton.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<button
|
||||
ref="buttonRef"
|
||||
:class="['animated-button', btnClass, { 'is-loading': loading, 'is-success': success, 'is-disabled': disabled || loading }]"
|
||||
:disabled="disabled || loading"
|
||||
@click="handleClick"
|
||||
@mousedown="createRipple"
|
||||
>
|
||||
<div class="button-content" :class="{ 'opacity-0': loading || success }">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="button-overlay">
|
||||
<LottiePlayer
|
||||
path="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/79a4fc375bae.json"
|
||||
width="40px"
|
||||
height="40px"
|
||||
:loop="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Success State -->
|
||||
<div v-if="success" class="button-overlay">
|
||||
<LottiePlayer
|
||||
path="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/11999b7bb57c.json"
|
||||
width="30px"
|
||||
height="30px"
|
||||
:loop="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span v-for="ripple in ripples" :key="ripple.id" class="ripple" :style="ripple.style"></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import LottiePlayer from './LottiePlayer.vue';
|
||||
|
||||
const props = defineProps({
|
||||
btnClass: { type: String, default: 'btn btn-primary' },
|
||||
loading: { type: Boolean, default: false },
|
||||
success: { type: Boolean, default: false },
|
||||
disabled: { type: Boolean, default: false }
|
||||
});
|
||||
|
||||
const emit = defineEmits(['click']);
|
||||
const buttonRef = ref(null);
|
||||
const ripples = reactive([]);
|
||||
|
||||
const handleClick = (e) => {
|
||||
if (props.loading || props.success || props.disabled) return;
|
||||
emit('click', e);
|
||||
};
|
||||
|
||||
const createRipple = (event) => {
|
||||
if (props.disabled || props.loading || props.success) return;
|
||||
|
||||
const button = buttonRef.value;
|
||||
if (!button) return;
|
||||
|
||||
const rect = button.getBoundingClientRect();
|
||||
const size = Math.max(rect.width, rect.height);
|
||||
const x = event.clientX - rect.left - size / 2;
|
||||
const y = event.clientY - rect.top - size / 2;
|
||||
|
||||
const id = Date.now();
|
||||
ripples.push({
|
||||
id,
|
||||
style: {
|
||||
width: `${size}px`,
|
||||
height: `${size}px`,
|
||||
top: `${y}px`,
|
||||
left: `${x}px`
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const index = ripples.findIndex(r => r.id === id);
|
||||
if (index > -1) ripples.splice(index, 1);
|
||||
}, 600);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.animated-button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.button-content {
|
||||
transition: opacity 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.button-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: ripple-animation 0.6s linear;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes ripple-animation {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.is-loading, .is-success {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Base button styles if not provided by framework */
|
||||
.btn {
|
||||
padding: 0.6rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
83
resources/js/Components/Core/Animations/LottiePlayer.vue
Normal file
83
resources/js/Components/Core/Animations/LottiePlayer.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div ref="container" :style="{ width: props.width, height: props.height }" class="lottie-container"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import lottie from 'lottie-web';
|
||||
|
||||
const props = defineProps({
|
||||
path: { type: String, required: true },
|
||||
loop: { type: Boolean, default: true },
|
||||
autoplay: { type: Boolean, default: true },
|
||||
width: { type: String, default: '100%' },
|
||||
height: { type: String, default: '100%' },
|
||||
play: { type: Boolean, default: true },
|
||||
speed: { type: Number, default: 1 }
|
||||
});
|
||||
|
||||
const container = ref(null);
|
||||
let animation = null;
|
||||
|
||||
const initAnimation = () => {
|
||||
if (animation) {
|
||||
animation.destroy();
|
||||
}
|
||||
|
||||
if (!container.value) return;
|
||||
|
||||
animation = lottie.loadAnimation({
|
||||
container: container.value,
|
||||
renderer: 'svg',
|
||||
loop: props.loop,
|
||||
autoplay: props.autoplay,
|
||||
path: props.path
|
||||
});
|
||||
|
||||
if (props.speed !== 1) {
|
||||
animation.setSpeed(props.speed);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initAnimation();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (animation) {
|
||||
animation.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => props.path, () => {
|
||||
initAnimation();
|
||||
});
|
||||
|
||||
watch(() => props.play, (newVal) => {
|
||||
if (animation) {
|
||||
if (newVal) {
|
||||
animation.play();
|
||||
} else {
|
||||
animation.stop();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
play: () => animation?.play(),
|
||||
stop: () => animation?.stop(),
|
||||
pause: () => animation?.pause(),
|
||||
setSpeed: (speed) => animation?.setSpeed(speed),
|
||||
goToAndPlay: (value, isFrame) => animation?.goToAndPlay(value, isFrame)
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lottie-container {
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
44
resources/js/Components/Core/Animations/RouteTransition.vue
Normal file
44
resources/js/Components/Core/Animations/RouteTransition.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<transition
|
||||
:name="transitionName"
|
||||
mode="out-in"
|
||||
>
|
||||
<div :key="routeKey" class="route-wrapper">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
routeKey: { type: String, required: true }
|
||||
});
|
||||
|
||||
const transitionName = ref('route-fade');
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.route-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Fast, lightweight fade transition — keeps navigation feeling instant */
|
||||
.route-fade-enter-active {
|
||||
transition: opacity 0.12s ease-out;
|
||||
}
|
||||
|
||||
.route-fade-leave-active {
|
||||
transition: opacity 0.08s ease-in;
|
||||
}
|
||||
|
||||
.route-fade-enter-from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.route-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user