List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <ion-button
    :fill="currentFill"
    :color="color"
    :class="buttonClass"
  >
    <slot></slot>
  </ion-button>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from "vue";
import { IonButton } from "@ionic/vue";

const props = withDefaults(defineProps<{
  blink?: boolean;
  color?: string;
  buttonClass?: string;
}>(), {
  blink: false,
  color: "secondary",
  buttonClass: ""
});

const currentFill = ref<"solid" | "outline">("outline");
let blinkInterval: number | null = null;

const startBlinking = () => {
  if (blinkInterval) {
    window.clearInterval(blinkInterval);
  }

  blinkInterval = window.setInterval(() => {
    currentFill.value = currentFill.value === "outline" ? "solid" : "outline";
  }, 500); // Blink every 500ms
};

const stopBlinking = () => {
  if (blinkInterval) {
    window.clearInterval(blinkInterval);
    blinkInterval = null;
  }
  currentFill.value = "outline";
};

watch(() => props.blink, (newValue) => {
  if (newValue) {
    startBlinking();
  } else {
    stopBlinking();
  }
});

onMounted(() => {
  if (props.blink) {
    startBlinking();
  }
});

onUnmounted(() => {
  stopBlinking();
});
</script>

<style scoped>
/* Any additional styles can go here */
</style>