32 lines
687 B
Vue
32 lines
687 B
Vue
<script setup lang="ts">
|
|
withDefaults(
|
|
defineProps<{
|
|
variant?: "primary" | "danger" | "quiet";
|
|
type?: "button" | "submit";
|
|
disabled?: boolean;
|
|
}>(),
|
|
{ variant: "quiet", type: "button" },
|
|
);
|
|
const ripple = ref(false);
|
|
let timer: ReturnType<typeof setTimeout>;
|
|
function press() {
|
|
ripple.value = false;
|
|
requestAnimationFrame(() => {
|
|
ripple.value = true;
|
|
timer = setTimeout(() => (ripple.value = false), 500);
|
|
});
|
|
}
|
|
onBeforeUnmount(() => clearTimeout(timer));
|
|
</script>
|
|
<template>
|
|
<button
|
|
:type="type"
|
|
:disabled="disabled"
|
|
class="glass-button"
|
|
:class="[variant, { ripple }]"
|
|
@pointerdown="press"
|
|
>
|
|
<slot />
|
|
</button>
|
|
</template>
|