53 lines
1.5 KiB
Vue
53 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed, getCurrentInstance } from 'vue';
|
|
import { useGeneralStore } from '../stores';
|
|
|
|
const general = useGeneralStore();
|
|
const category = getCurrentInstance()?.parent?.parent?.parent?.parent; // yes indeed
|
|
|
|
const props = defineProps({
|
|
title: String,
|
|
tooltip: String,
|
|
dangerousTooltip: String,
|
|
greytext: String,
|
|
});
|
|
|
|
const searched = computed(() => {
|
|
const term = general.cfgSearchTerm.toLowerCase();
|
|
const categoryTitle = category?.props?.title as string | undefined;
|
|
const res =
|
|
props.title?.toLowerCase().includes(term) ||
|
|
categoryTitle?.toLowerCase().includes(term);
|
|
if (res === true && categoryTitle !== undefined) {
|
|
general.cfgCategories.add(categoryTitle);
|
|
}
|
|
return res;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="searched" class="flex flex-row w-full p-2 gap-2 items-center">
|
|
<div class="grow">
|
|
<span>{{ title }}</span>
|
|
<span
|
|
v-if="tooltip"
|
|
class="pi pi-question-circle ml-2"
|
|
v-tooltip="tooltip"
|
|
></span>
|
|
<span
|
|
v-if="dangerousTooltip"
|
|
class="pi pi-exclamation-circle ml-2 text-red-500"
|
|
v-tooltip="dangerousTooltip"
|
|
></span>
|
|
<span
|
|
v-if="greytext"
|
|
style="font-size: 0.65rem"
|
|
class="ml-2 text-gray-400"
|
|
>{{ greytext }}</span
|
|
>
|
|
</div>
|
|
|
|
<slot />
|
|
</div>
|
|
</template>
|