bagus-arie05
108 lines
2.4 KiB
Vue
108 lines
2.4 KiB
Vue
<template>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="items"
|
|
:items-per-page="itemsPerPage"
|
|
class="elevation-0 data-table"
|
|
>
|
|
<template v-slot:item.namaKlinik="{ item }">
|
|
<v-chip size="small" class="chip-success-outline">
|
|
{{ item.kodeKlinik }}
|
|
</v-chip>
|
|
<span class="ml-2 body-3 text-medium">{{ item.namaKlinik }}</span>
|
|
</template>
|
|
|
|
<template v-slot:item.aksi="{ item }">
|
|
<v-btn
|
|
size="small"
|
|
@click="$emit('edit', item)"
|
|
class="btn-edit mr-2"
|
|
variant="flat"
|
|
>
|
|
<v-icon size="16" left>mdi-pencil</v-icon>
|
|
Edit
|
|
</v-btn>
|
|
<v-btn
|
|
size="small"
|
|
@click="$emit('delete', item)"
|
|
class="btn-delete"
|
|
variant="outlined"
|
|
>
|
|
<v-icon size="16" left>mdi-delete</v-icon>
|
|
Delete
|
|
</v-btn>
|
|
</template>
|
|
</v-data-table>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
items: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
itemsPerPage: {
|
|
type: Number,
|
|
default: 10
|
|
}
|
|
});
|
|
|
|
const headers = [
|
|
{ title: 'No', value: 'no', sortable: true },
|
|
{ title: 'Nama Klinik', value: 'namaKlinik', sortable: true },
|
|
{ title: 'Kode', value: 'kodeKlinik', sortable: true },
|
|
{ title: 'Nama Ruang', value: 'namaRuang', sortable: true },
|
|
{ title: 'Aksi', value: 'aksi', sortable: false },
|
|
];
|
|
|
|
defineEmits(['edit', 'delete']);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$neutral-100: #FFFFFF;
|
|
$success-600: #009262;
|
|
$danger-600: #E02B1D;
|
|
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
$font-weight-medium: 500;
|
|
$font-weight-semibold: 600;
|
|
|
|
.data-table {
|
|
font-family: $font-family-base;
|
|
}
|
|
|
|
.chip-success-outline {
|
|
border: 1px solid $success-600;
|
|
background-color: transparent !important;
|
|
color: $success-600 !important;
|
|
font-weight: $font-weight-medium;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.body-3 {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.text-medium {
|
|
font-weight: $font-weight-medium !important;
|
|
}
|
|
|
|
.btn-edit {
|
|
background-color: $success-600 !important;
|
|
color: $neutral-100 !important;
|
|
text-transform: none;
|
|
font-weight: $font-weight-semibold;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.btn-delete {
|
|
border-color: $danger-600 !important;
|
|
color: $danger-600 !important;
|
|
text-transform: none;
|
|
font-weight: $font-weight-semibold;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
</style> |