Kappa / Property List

Run details

Status: Completed
Solver: simpleFoam
Cells: 2,480,000
Elapsed time: 12 min 34 s

<script setup lang="ts">
import { PropertyList } from "@dicehub/kappa/components/property-list";

const run = {
  solver: "simpleFoam",
  cells: 2_480_000,
  elapsed: "12 min 34 s",
};
</script>

<template>
  <PropertyList aria-label="Run details">
    <PropertyList.Item label="Solver">{{ run.solver }}</PropertyList.Item>
    <PropertyList.Item label="Cells">{{ run.cells.toLocaleString() }}</PropertyList.Item>
    <PropertyList.Item label="Elapsed time">{{ run.elapsed }}</PropertyList.Item>
  </PropertyList>
</template>

Installation

import { PropertyList } from "@dicehub/kappa";
// Or: "@dicehub/kappa/components/property-list"

Composition

The root renders a native dl. Each Item groups a term and value with a div. Set label for the short form, or use Term and Value for custom content. No interactive primitive is required.

Use this for properties of one resource. Use Table to compare several resources.

Examples

Compact

Small text and short rows for side panels and technical summaries.

Mesh summary

Status: Completed
Solver: simpleFoam
Cells: 2,480,000

<script setup lang="ts">
const summary = { solver: "simpleFoam", cells: 2_480_000 };
</script>

<template>
  <PropertyList size="sm">
    <PropertyList.Item label="Solver">{{ summary.solver }}</PropertyList.Item>
    <PropertyList.Item label="Cells">{{ summary.cells.toLocaleString() }}</PropertyList.Item>
  </PropertyList>
</template>

Stacked and custom content

Place each value below its label. Slots accept links, badges, and controls.

Run details

Status: Completed
Solver: simpleFoam
Cells: 2,480,000
Elapsed time: 12 min 34 s
Mesh verification

<script setup lang="ts">
import { ref } from "vue";

const showChecks = ref(false);
const checkResult = "No negative volumes.";
</script>

<template>
  <PropertyList layout="stacked">
    <PropertyList.Item>
      <PropertyList.Term>Mesh verification</PropertyList.Term>
      <PropertyList.Value>
        <Button size="sm" variant="link" @click="showChecks = !showChecks">Show checks</Button>
        <p v-if="showChecks">{{ checkResult }}</p>
      </PropertyList.Value>
    </PropertyList.Item>
  </PropertyList>
</template>

Long values

Long paths and notes wrap. Horizontal rows stack when the list is narrower than 24rem.

Run details

Status: Completed
Solver: simpleFoam
Cells: 2,480,000
Elapsed time: 12 min 34 s
Output directory: /projects/external-aerodynamics/runs/2026-09-21/steady-state-reference-simulation/postProcessing/forceCoeffs/0
Notes: The case uses a refined boundary layer near the wing surface. All residuals reached the specified tolerance. The pressure and velocity fields are ready for review.

<script setup lang="ts">
const outputDirectory = "/projects/external-aerodynamics/runs/reference/postProcessing/forceCoeffs/0";
const notes = "All residuals reached the specified tolerance.";
</script>

<template>
  <PropertyList divided style="--kappa-property-list-label-width: 10rem">
    <PropertyList.Item label="Output directory">
      <code>{{ outputDirectory }}</code>
    </PropertyList.Item>
    <PropertyList.Item label="Notes">{{ notes }}</PropertyList.Item>
  </PropertyList>
</template>

Native definition-list markup preserves each label and value relationship. Add aria-label or aria-labelledby to name the list. Custom controls keep their own keyboard and focus behavior. Text follows the document direction and wraps without truncation.

API Reference

PropertyList and PropertyList.Root accept size="sm | base" (base), layout="horizontal | stacked" (horizontal), and divided (false). Native attributes and listeners reach the definition list.

PropertyList.Item accepts label?: string and a label slot. With either, its default slot is the value. Without them, provide Term and Value explicitly. All parts forward native attributes.

Set --kappa-property-list-label-width on the root to change the label column (default 10rem). Horizontal rows stack inside containers narrower than 24rem.

Named exports: PropertyListRoot, PropertyListItem, PropertyListTerm, PropertyListValue. Public types: PropertyListProps, PropertyListItemProps, PropertyListSize, and PropertyListLayout.