DataView

1<script setup lang="ts">2import { Button, DataView, SelectButton, Tag } from '@vitral/vue';3import { ref } from 'vue';4 5interface Product {6    id: number;7    name: string;8    category: string;9    price: number;10    stock: 'In stock' | 'Low' | 'Out';11    image: number;12}13 14const categories = ['Accessories', 'Clothing', 'Fitness', 'Electronics'];15const products: Product[] = Array.from({ length: 24 }, (_, i) => ({16    id: i,17    name: ['Bamboo Watch', 'Black Jacket', 'Blue Band', 'Game Controller', 'Gaming Set', 'Gold Necklace'][i % 6]! + ` ${i + 1}`,18    category: categories[i % 4]!,19    price: 20 + ((i * 37) % 180),20    stock: (['In stock', 'Low', 'Out'] as const)[i % 3]!,21    image: 20 + i22}));23 24const layout = ref<'list' | 'grid'>('grid');25const sortOrder = ref<1 | -1>(1);26const severity = (stock: Product['stock']) => (stock === 'In stock' ? 'success' : stock === 'Low' ? 'warn' : 'danger');27</script>28 29<template>30    <DataView :value="products" :layout="layout" paginator :rows="6" sort-field="price" :sort-order="sortOrder" data-key="id">31        <template #header>32            <div style="display: flex; justify-content: space-between; align-items: center; gap: 0.5rem">33                <Button :label="sortOrder === 1 ? 'Price: low to high' : 'Price: high to low'" icon="sort" severity="secondary" variant="text" @click="sortOrder = sortOrder === 1 ? -1 : 1" />34                <SelectButton v-model="layout" :options="['list', 'grid']" :allow-empty="false" aria-label="Layout" />35            </div>36        </template>37        <template #list="{ items }">38            <ul style="margin: 0; padding: 0; list-style: none">39                <li v-for="p in items as Product[]" :key="p.id" style="display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--vt-content-border-color)">40                    <img :src="`https://picsum.photos/id/${p.image}/96/96`" alt="" width="48" height="48" style="border-radius: 6px" />41                    <div style="flex: 1">42                        <strong>{{ p.name }}</strong>43                        <div style="font-size: 0.75rem; color: var(--vt-text-muted-color)">{{ p.category }}</div>44                    </div>45                    <Tag :value="p.stock" :severity="severity(p.stock)" />46                    <span style="width: 4rem; text-align: end">${{ p.price }}</span>47                </li>48            </ul>49        </template>50        <template #grid="{ items }">51            <article v-for="p in items as Product[]" :key="p.id" style="border: 1px solid var(--vt-content-border-color); border-radius: 8px; overflow: hidden">52                <img :src="`https://picsum.photos/id/${p.image}/320/200`" :alt="p.name" style="display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover" />53                <div style="padding: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem">54                    <strong>{{ p.name }}</strong>55                    <small style="color: var(--vt-text-muted-color)">{{ p.category }}</small>56                    <div style="display: flex; justify-content: space-between; align-items: center">57                        <span>${{ p.price }}</span>58                        <Tag :value="p.stock" :severity="severity(p.stock)" />59                    </div>60                </div>61            </article>62        </template>63    </DataView>64</template>