List

<script setup lang="ts">
import { Avatar, Button, List } from "@bysages/vue";

const rows = [
  {
    initials: "SW",
    title: "Seal registry",
    description: "Who pressed which seal, and when.",
  },
  {
    initials: "LW",
    title: "Letter room",
    description: "Correspondence awaiting the registrar.",
  },
  {
    initials: "AB",
    title: "Archive annex",
    description: "Shelved records, fourth row, eastern cabinet.",
  },
];
</script>

<template>
  <List.Root class="w-full">
    <List.Item v-for="row in rows" :key="row.title">
      <List.Leading>
        <Avatar.Root>
          <Avatar.Fallback>{{ row.initials }}</Avatar.Fallback>
        </Avatar.Root>
      </List.Leading>
      <List.Content>
        <template #title>{{ row.title }}</template>
        <template #description>{{ row.description }}</template>
      </List.Content>
      <List.Actions>
        <Button variant="ghost" size="sm">Open</Button>
      </List.Actions>
    </List.Item>
  </List.Root>
</template>

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

const opened = ref("");

const ledger = [
  { title: "Morning readings", description: "Barometer steady, ink flows well." },
  { title: "Noon deliveries", description: "Two crates of paper from the mill." },
  { title: "Evening closings", description: "The lamps are trimmed at dusk." },
];

const open = (title: string) => {
  opened.value = title;
};
</script>

<template>
  <div class="w-full">
    <List.Root bordered hoverable class="w-full">
      <List.Item
        v-for="row in ledger"
        :key="row.title"
        role="button"
        tabindex="0"
        @click="open(row.title)"
        @keydown.enter.prevent="open(row.title)"
        @keydown.space.prevent="open(row.title)"
      >
        <List.Content>
          <template #title>{{ row.title }}</template>
          <template #description>{{ row.description }}</template>
        </List.Content>
      </List.Item>
    </List.Root>
    <p role="status" class="mt-4 text-sm text-tertiary">
      {{ opened ? `Opened “${opened}”.` : "Nothing opened yet." }}
    </p>
  </div>
</template>