Descriptions

<script setup lang="ts">
import { Descriptions } from "@bysages/vue";
</script>

<template>
  <div class="grid gap-6 w-full">
    <Descriptions.Root>
      <Descriptions.Item>
        <Descriptions.Term>Medium</Descriptions.Term>
        <Descriptions.Detail>Ink on xuan paper</Descriptions.Detail>
      </Descriptions.Item>
      <Descriptions.Item>
        <Descriptions.Term>Dated</Descriptions.Term>
        <Descriptions.Detail>Autumn, 1935</Descriptions.Detail>
      </Descriptions.Item>
      <Descriptions.Item>
        <Descriptions.Term>Seal</Descriptions.Term>
        <Descriptions.Detail>Zhusha, square-cut</Descriptions.Detail>
      </Descriptions.Item>
    </Descriptions.Root>
    <Descriptions.Root layout="vertical">
      <Descriptions.Item>
        <Descriptions.Term>Provenance</Descriptions.Term>
        <Descriptions.Detail>Acquired from the studio of the second master</Descriptions.Detail>
      </Descriptions.Item>
    </Descriptions.Root>
  </div>
</template>

<script setup lang="ts">
import { Descriptions } from "@bysages/vue";

const pairs = [
  { term: "Calligrapher", detail: "Lin Wanzhi", span: 1 },
  { term: "Ink", detail: "Qinghua cobalt, first grinding", span: 1 },
  { term: "Inscription", detail: "方寸为章 — the measure held and centered", span: 2 },
  { term: "Paper", detail: "Jingxian xuan, raw edge", span: 1 },
  { term: "Seal", detail: "Square-cut, 6 mm", span: 1 },
];
</script>

<template>
  <!-- One ledger, mixed widths: a pair can hold its one column, or
       stretch across the whole row when the detail asks for it. -->
  <Descriptions.Root bordered :column="2" class="w-full">
    <Descriptions.Item v-for="pair in pairs" :key="pair.term" :span="pair.span">
      <Descriptions.Term>{{ pair.term }}</Descriptions.Term>
      <Descriptions.Detail>{{ pair.detail }}</Descriptions.Detail>
    </Descriptions.Item>
  </Descriptions.Root>
</template>