Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2026-01-10 07:03:04 +00:00
Code Issues Projects Releases Packages Wiki Activity

🔧 ui: BulmaSecret state machine rework

Browse source
This commit is contained in:
Jörn-Michael Miehe 2025-12-28 01:55:01 +00:00
parent 7cca8c4825
commit 2aff1f3a99
1 changed files with 17 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
ui/src/components/bulma/Secret.vue
View file

@ -1,17 +1,17 @@
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<slot v-if="state === 'show'" name="default" />
<slot v-if="state === 'visible'" name="default" />
<span v-else>***</span>
<BulmaButton
:class="`is-small is-${button_class} ml-2`"
:icon="['fas', `${button_icon}`]"
:busy="state === 'click'"
:class="`is-small is-${record.color} ml-2`"
:icon="['fas', `${record.icon}`]"
:busy="state === 'clicked'"
@click="on_click"
/>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { computed, ref } from "vue";
import BulmaButton from "./Button.vue";
@ -19,30 +19,21 @@ 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");
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 {
switch (state.value) {
case "show":
state.value = "start";
button_class.value = "primary";
button_icon.value = "eye-slash";
break;
state.value = record.value.next;
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;
if (state.value === "visible") {
emit("load");
}
}
</script>