github.com/avenga/couper@v1.12.2/docs/website/components/content/Attributes.vue (about)

     1  <template>
     2    <div>
     3      <h3 id="attributes"><a href="#attributes">Attributes</a></h3>
     4      <table class="table-auto">
     5        <thead>
     6        <tr>
     7          <th v-for="head in header"
     8          :key="head.value"
     9          >{{ head.name }}</th>
    10        </tr>
    11        </thead>
    12        <tbody>
    13        <tr v-for="value in values" :key="value.name">
    14          <td v-for="head in header" :key="head.value+value.name">
    15            <code v-if="head.value === 'name'">{{ value[head.value] ? value[head.value] : '-' }}</code>
    16            <code v-else-if="head.value === 'default' && value[head.value] != ''">{{ value[head.value] }}</code>
    17            <div v-else-if="head.value === 'description'" v-html="micromark(value[head.value])"/>
    18            <div v-else v-html="value[head.value] ? value[head.value] : '-'" />
    19          </td>
    20        </tr>
    21        </tbody>
    22      </table>
    23    </div>
    24  </template>
    25  
    26  <script setup>
    27  import { micromark } from 'micromark'
    28  const props = defineProps({
    29    header: {
    30      type: Array,
    31      required: false,
    32      default: [
    33        {
    34          name: "Name",
    35          value: "name",
    36        },
    37        {
    38          name: "Type",
    39          value: "type",
    40        },
    41        {
    42          name: "Default",
    43          value: "default",
    44        },
    45        {
    46          name: "Description",
    47          value: "description",
    48        },
    49      ],
    50    },
    51    values: {
    52      type: Array,
    53      required: true,
    54    }
    55  })
    56  </script>