40 lines
1.2 KiB
Vue
40 lines
1.2 KiB
Vue
<template>
|
|
<v-tooltip v-model="show" :close-on-content-click="true" :close-on-back="false" :close-delay="null"/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {computed, ref} from "vue";
|
|
import {usePrefStore} from "@/store/store.js";
|
|
|
|
const prefs = usePrefStore()
|
|
|
|
const props = defineProps({
|
|
name: {type: String, required: true},
|
|
when: {type: Boolean, default: true}, // optional conditional for when to show
|
|
after: {type: String, default: null}, // set to the name of another hint that must happen before this hint, to chain hints into a tutorial.
|
|
onComplete: {type: Function, default: null},
|
|
})
|
|
|
|
const forceClose = ref(false)
|
|
const shown = ref(false)
|
|
|
|
const show = computed({
|
|
get() {
|
|
const shownBefore = prefs.hints[props.name];
|
|
const whenOk = props.when;
|
|
const afterOk = props.after === null || prefs.hints[props.after];
|
|
const result = !forceClose.value && !shownBefore && whenOk && afterOk
|
|
// console.log(`show ${props.name}? ${result} <=`, !forceClose.value, whenOk, afterOk, prefs.hints)
|
|
if (result) {
|
|
shown.value = true
|
|
prefs.hints[props.name] = true
|
|
}
|
|
return result
|
|
},
|
|
set(v) { if(!v) { forceClose.value=true; if (shown.value && props.onComplete) props.onComplete(); } }
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style> |