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

     1  <template>
     2    <div>
     3      <h3 id="blocks"><a href="#blocks">Nested Blocks</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            <div v-else-if="head.value === 'description'" v-html="micromark(value[head.value])"/>
    17            <div v-else v-html="value[head.value] ? value[head.value] : '-'" />
    18          </td>
    19        </tr>
    20        </tbody>
    21      </table>
    22    </div>
    23  </template>
    24  
    25  <script setup>
    26  import { micromark } from 'micromark'
    27  const props = defineProps({
    28    header: {
    29      type: Array,
    30      required: false,
    31      default: [
    32        {
    33          name: "Name",
    34          value: "name",
    35        },
    36        {
    37          name: "Description",
    38          value: "description",
    39        },
    40      ],
    41    },
    42    values: {
    43      type: Array,
    44      required: true,
    45    }
    46  })
    47  </script>