forked from Wroclaw/WorkshopTasker
56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
records: Array<any>,
|
|
recordKey: string,
|
|
fields: Array<string>,
|
|
buttons: boolean,
|
|
}>();
|
|
|
|
// eslint-disable-next-line func-call-spacing
|
|
defineEmits<{
|
|
(e: "click", recordKey: string): void,
|
|
(e: "click:edit", recordKey: string): void,
|
|
(e: "click:delete", recordKey: string): void,
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<tbody>
|
|
<tr v-for="record in props.records" :key="record[props.recordKey]">
|
|
<td
|
|
v-for="field in props.fields"
|
|
:key="field"
|
|
@click="$emit('click', record[recordKey])"
|
|
>
|
|
{{ record[field] }}
|
|
</td>
|
|
<td v-if="buttons" class="buttons">
|
|
<div>
|
|
<VBtn
|
|
icon="mdi-pencil"
|
|
variant="text"
|
|
@click="$emit('click:edit', record[recordKey])"
|
|
/>
|
|
<VBtn
|
|
icon="mdi-delete"
|
|
color="red"
|
|
variant="text"
|
|
@click="$emit('click:delete', record[recordKey])"
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.buttons {
|
|
width: 0;
|
|
padding-right: 4px !important;
|
|
}
|
|
.buttons > div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
}
|
|
</style>
|