30 lines
1023 B
Vue
30 lines
1023 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>
|
|
export default {
|
|
name: 'AaCardList',
|
|
props: {
|
|
items: { type: Array, default: function () { return []; } },
|
|
cols: { type: Number, default: 3 }
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style src="./CardList.css"></style>
|