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

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

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

import BulmaButton from "./Button.vue";

const emit = defineEmits<{
  (event: "load"): void;
}>();

type State = "hidden" | "clicked" | "visible";
const state = ref<State>("hidden");

const state_map: Record<State, { color: string; icon: string; next: State }> = {
  hidden: { color: "primary", icon: "eye-slash", next: "clicked" },
  clicked: { color: "warning", icon: "eye-slash", next: "visible" },
  visible: { color: "danger", icon: "eye", next: "hidden" },
} as const;
const record = computed(() => state_map[state.value] ?? state_map.hidden);

function on_click(): void {
  state.value = record.value.next;

  if (state.value === "visible") {
    emit("load");
  }
}
</script>