src/components/settings/AccountTableRow.vue - dev - vdele/app

<script setup lang="ts">
import { type PropType} from 'vue';

const { account, idx, currentAccountUid } = defineProps({
    account: {
        type: Object as PropType<{uid: string, name: string}>,
        required: true,
    },
    idx: {
        type: Number,
        required: true,
    },
    currentAccountUid: {
        type: String,
        required: true,
    },
});

const emits = defineEmits(['delete', 'edit']);

const deleteHandler = async () => (emits('delete', { account, idx, currentAccountUid }));

const editHandler = () => (emits('edit', { account, idx, currentAccountUid }));
</script>
<template>
    <tr :class="[currentAccountUid === account.uid ? 'table-warning' : '']">
        <td><button type="button" class="btn btn-danger" :disabled="currentAccountUid === account.uid"
                @click="deleteHandler">Удалить</button></td>
        <th scope="row">{{ idx + 1 }}</th>
        <td><code>{{ account.uid }}</code></td>
        <td>{{ account.name }}</td>
        <td>{{ currentAccountUid === account.uid ? '⚠️Нельзя удалить активный аккаунт.' : '-' }} </td>
        <td style="text-align: end;"><button type="button" class="btn btn-secondary"
                @click="editHandler">Редактировать</button></td>
    </tr>
</template>