28 lines
988 B
Vue
28 lines
988 B
Vue
<template>
|
|
<div class="aa-cardlist" :style="{ gridTemplateColumns: `repeat(${cols}, 1fr)` }">
|
|
<div class="aa-cardlist-item" v-for="(it, i) in items" :key="i">
|
|
<div class="aa-card-cover">{{ it.emoji || '📄' }}</div>
|
|
<div class="aa-card-body">
|
|
<div class="aa-card-title">{{ it.title }}</div>
|
|
<div class="aa-card-desc">{{ it.desc }}</div>
|
|
<div class="aa-card-tags" v-if="it.tags && it.tags.length">
|
|
<span class="aa-card-tag" v-for="(t, ti) in it.tags" :key="ti">{{ t }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="aa-card-actions" v-if="it.actions && it.actions.length">
|
|
<button v-for="(a, ai) in it.actions" :key="ai" @click="$emit('action', { item: it, action: a })">{{ a }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
items: { type: Array, default: () => [] },
|
|
cols: { type: Number, default: 3 }
|
|
});
|
|
defineEmits(['action']);
|
|
</script>
|
|
|
|
<style src="./CardList.css"></style>
|