hrms-edm/Services/client/src/components/FileItemAction.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>