150 lines
3.3 KiB
Vue
150 lines
3.3 KiB
Vue
<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>
|