<template>
  <span ref="element">
    <slot/>
  </span>
</template>

<script setup>
import {ref, watchEffect} from "vue";

const props = defineProps(['touch', 'color'])

const element = ref(null)
let lastValue = props.touch

function pulse() {
  if (props.touch === lastValue) return
  lastValue = props.touch
  const e = element.value;
  if (!e.classList.contains('pulse')) {
    // add class for the first time
    e.classList.add('pulse')
  }
  else {
    // restart
    e.getAnimations().forEach((a) => {
      a.cancel();
      a.play();
    })
  }
}

watchEffect(pulse)
</script>

<style scoped lang="scss">
.pulse {
  animation: forwards;
  animation-duration: 1s;
  animation-name: pulse;
}

@keyframes pulse {
  0% {
    background-color: gray;
  }
  100% {
    background-color: white;
  }
}
</style>