70 lines
1.4 KiB
Vue
70 lines
1.4 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
|
|
defineEmits(['edit', 'delete'])
|
|
|
|
const props = defineProps<{
|
|
nameId: string
|
|
}>()
|
|
|
|
const open = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<q-btn
|
|
@click.stop
|
|
icon="more_vert"
|
|
color="grey"
|
|
flat
|
|
dense
|
|
:data-testid="`action${props.nameId}`"
|
|
>
|
|
<q-menu v-model="open">
|
|
<q-list dense>
|
|
<q-item
|
|
clickable
|
|
id="FileltemActionEdit"
|
|
@click.stop="
|
|
() => {
|
|
open = false
|
|
$emit('edit')
|
|
}
|
|
"
|
|
>
|
|
<q-item-section>
|
|
<div class="row items-center white">
|
|
<q-icon name="o_edit" color="positive" />
|
|
<span class="q-ml-sm">แก้ไข</span>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
@click.stop="
|
|
() => {
|
|
open = false
|
|
$emit('delete')
|
|
}
|
|
"
|
|
id="FileltemActiondelete"
|
|
>
|
|
<q-item-section>
|
|
<div class="row items-center white">
|
|
<q-icon name="mdi-trash-can-outline" color="negative" />
|
|
<span class="q-ml-sm">ลบ</span>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.white {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: block;
|
|
}
|
|
</style>
|