Jakub Zych
2d62924b78
- typed client and useFaq/useFaqApi (SSR, faq:<slug>:<locale> key, server and public bases, x-forwarded-for forwarded also on cached renders) - FaqBlock, FaqList and FaqItem: native details, exclusive and openFirst, server-sanitized description and answers, nothing or #fallback on 404, error or no items - FAQ tokens and base CSS with the .faq-html rules, README - node client tests and a playground SSR smoke against a fixture API
27 lines
703 B
Vue
27 lines
703 B
Vue
<script setup lang="ts">
|
|
// FaqList: the items in API order. With `exclusive`, every item shares one
|
|
// details name, so the browser keeps one open at a time.
|
|
import { useId } from 'vue'
|
|
import type { FaqItem as FaqItemData } from '../../utils/types.ts'
|
|
|
|
withDefaults(defineProps<{ items: FaqItemData[]; exclusive?: boolean; openFirst?: boolean }>(), {
|
|
exclusive: false,
|
|
openFirst: false,
|
|
})
|
|
|
|
const group = `${useId()}-faq`
|
|
</script>
|
|
|
|
<template>
|
|
<div class="faq-list">
|
|
<FaqItem
|
|
v-for="(item, i) in items"
|
|
:key="i"
|
|
:question="item.question"
|
|
:answer="item.answer"
|
|
:name="exclusive ? group : undefined"
|
|
:open="openFirst && i === 0"
|
|
/>
|
|
</div>
|
|
</template>
|