advent22/ui/src/components/bulma/Secret.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <slot v-if="state === 'show'" name="default" />
  <span v-else>***</span>
  <BulmaButton
    :class="`is-small is-${button_class} ml-2`"
    :icon="['fas', `${button_icon}`]"
    :busy="state === 'click'"
    @click="on_click"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";

import BulmaButton from "./Button.vue";

const emit = defineEmits<{
  load: [];
}>();

const state = ref<"start" | "click" | "show">("start");
const button_class = ref<"primary" | "warning" | "danger">("primary");
const button_icon = ref<"eye-slash" | "eye">("eye-slash");

function on_click(): void {
  switch (state.value) {
    case "show":
      state.value = "start";
      button_class.value = "primary";
      button_icon.value = "eye-slash";
      break;

    case "start":
      state.value = "click";
      button_class.value = "warning";
      button_icon.value = "eye-slash";
      break;

    case "click":
      state.value = "show";
      button_class.value = "danger";
      button_icon.value = "eye";
      emit("load");
      break;
  }
}
</script>