PronounsPage/components/ModerationRules.vue

40 lines
1.1 KiB
Vue

<script setup lang="ts">
import type { InternalApi } from 'nitropack/types';
import { useFetch } from 'nuxt/app';
const props = withDefaults(defineProps<{
type: keyof InternalApi['/api/admin/moderation']['get'];
label?: string;
emphasise?: boolean;
}>(), {
label: 'Moderation rules',
});
const { $isGranted: isGranted } = useNuxtApp();
const { data: moderation } = await useFetch('/api/admin/moderation', {
immediate: isGranted('panel'),
server: false,
lazy: true,
pick: [props.type],
});
</script>
<template>
<details v-if="moderation" class="border mb-3">
<summary :class="[emphasise ? 'bg-warning' : 'bg-light', 'p-3']">
<h4 class="h5 d-inline">
{{ label }}
</h4>
</summary>
<div class="border-top p-3">
<div v-if="typeof moderation[type] === 'string'" v-html="moderation[type]"></div>
<ul v-else>
<li v-for="k in moderation[type]">
<code>{{ k }}</code>
</li>
</ul>
</div>
</details>
</template>