mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-08-05 12:07:22 -04:00
43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
withDefaults(defineProps<{
|
|
question: string;
|
|
small?: boolean;
|
|
base?: string;
|
|
}>(), {
|
|
base: 'faq.questions',
|
|
});
|
|
|
|
const details = useTemplateRef('details');
|
|
const focus = () => {
|
|
if (!details.value) {
|
|
return;
|
|
}
|
|
details.value.open = true;
|
|
details.value.focus();
|
|
details.value.scrollIntoView();
|
|
setTimeout((_) => {
|
|
details.value?.scrollIntoView();
|
|
}, 1000);
|
|
};
|
|
|
|
defineExpose({ focus });
|
|
</script>
|
|
|
|
<template>
|
|
<details
|
|
v-if="$t(`${base}.${question}`, {}, false)"
|
|
ref="details"
|
|
:class="['border mb-3', small ? 'small' : '']"
|
|
itemscope
|
|
itemprop="mainEntity"
|
|
itemtype="https://schema.org/Question"
|
|
>
|
|
<summary :class="['bg-light', small ? 'p-2' : 'p-3']" itemprop="name">
|
|
<T>{{ base }}.{{ question }}.question</T>
|
|
</summary>
|
|
<div :class="['border-top', small ? 'p-2' : 'p-3']" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
<T itemprop="text">{{ base }}.{{ question }}.answer</T>
|
|
</div>
|
|
</details>
|
|
</template>
|