48 lines
1.1 KiB
Vue
48 lines
1.1 KiB
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<{
|
|
(event: "load"): void;
|
|
}>();
|
|
|
|
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>
|