125 lines
3.1 KiB
Vue
125 lines
3.1 KiB
Vue
<script lang="ts" setup>
|
|
import ToggleButton from '../button/ToggleButton.vue';
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
idName: string;
|
|
status: string;
|
|
|
|
disableDelete?: boolean;
|
|
}>(),
|
|
{
|
|
idName: '',
|
|
status: 'ACTIVE',
|
|
},
|
|
);
|
|
|
|
defineEmits<{
|
|
(e: 'view'): void;
|
|
(e: 'edit'): void;
|
|
(e: 'delete'): void;
|
|
(e: 'changeStatus'): void;
|
|
}>();
|
|
</script>
|
|
<template>
|
|
<q-btn
|
|
flat
|
|
dense
|
|
round
|
|
size="sm"
|
|
icon="mdi-dots-vertical"
|
|
:id="`btn-kebab-action-${idName}`"
|
|
@click.stop
|
|
>
|
|
<q-menu class="bordered">
|
|
<q-list>
|
|
<q-item
|
|
v-close-popup
|
|
dense
|
|
clickable
|
|
class="row q-py-sm"
|
|
style="white-space: nowrap"
|
|
:id="`btn-kebab-view-detail-${idName}`"
|
|
@click.stop="() => $emit('view')"
|
|
>
|
|
<q-icon
|
|
size="xs"
|
|
class="col-3"
|
|
name="mdi-eye-outline"
|
|
style="color: hsl(var(--green-6-hsl))"
|
|
/>
|
|
<span class="col-9 q-px-md flex items-center">
|
|
{{ $t('general.viewDetail') }}
|
|
</span>
|
|
</q-item>
|
|
|
|
<q-item
|
|
v-if="status !== 'INACTIVE'"
|
|
v-close-popup
|
|
dense
|
|
clickable
|
|
class="row q-py-sm"
|
|
style="white-space: nowrap"
|
|
:id="`btn-kebab-edit-${idName}`"
|
|
@click.stop="() => $emit('edit')"
|
|
>
|
|
<q-icon
|
|
size="xs"
|
|
class="col-3"
|
|
name="mdi-pencil-outline"
|
|
style="color: hsl(var(--cyan-6-hsl))"
|
|
/>
|
|
<span class="col-9 q-px-md flex items-center">
|
|
{{ $t('general.edit') }}
|
|
</span>
|
|
</q-item>
|
|
<q-item
|
|
v-if="status !== 'INACTIVE'"
|
|
v-close-popup
|
|
dense
|
|
class="row"
|
|
style="white-space: nowrap"
|
|
:clickable="!disableDelete"
|
|
:id="`btn-kebab-delete-${idName}`"
|
|
:class="{
|
|
'surface-3': disableDelete,
|
|
'app-text-muted': disableDelete,
|
|
}"
|
|
@click.stop="() => $emit('delete')"
|
|
>
|
|
<q-icon
|
|
size="xs"
|
|
name="mdi-trash-can-outline"
|
|
class="col-3"
|
|
:class="{
|
|
'app-text-negative': !disableDelete,
|
|
}"
|
|
/>
|
|
<span class="col-9 q-px-md flex items-center">
|
|
{{ $t('general.delete') }}
|
|
</span>
|
|
</q-item>
|
|
|
|
<q-item dense>
|
|
<q-item-section class="q-py-sm">
|
|
<div class="q-pa-sm surface-2 rounded flex items-center">
|
|
<ToggleButton
|
|
two-way
|
|
:id="`btn-kebab-status-${idName}`"
|
|
:model-value="status !== 'INACTIVE'"
|
|
@click="() => $emit('changeStatus')"
|
|
/>
|
|
<span class="q-pl-md">
|
|
{{
|
|
status !== 'INACTIVE'
|
|
? $t('general.open')
|
|
: $t('general.close')
|
|
}}
|
|
</span>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</template>
|