diff --git a/src/components/VnTable/VnContextMenu.vue b/src/components/VnTable/VnContextMenu.vue new file mode 100644 index 000000000..f9922538e --- /dev/null +++ b/src/components/VnTable/VnContextMenu.vue @@ -0,0 +1,90 @@ + + + +es: + Filter by selection: Filtro por selección + Exclude selection: Excluir selección + Remove filter: Quitar filtro por selección + Remove all filters: Eliminar todos los filtros + Copy value: Copiar valor + diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue index 29a9200f0..7353c3726 100644 --- a/src/components/VnTable/VnTable.vue +++ b/src/components/VnTable/VnTable.vue @@ -33,6 +33,7 @@ import VnTableOrder from 'src/components/VnTable/VnOrder.vue'; import VnTableFilter from './VnTableFilter.vue'; import { getColAlign } from 'src/composables/getColAlign'; import RightMenu from '../common/RightMenu.vue'; +import VnContextMenu from './VnContextMenu.vue'; const arrayData = useArrayData(useAttrs()['data-key']); const $props = defineProps({ @@ -169,8 +170,9 @@ const orders = ref(useFilterParams($attrs['data-key']).orders); const app = inject('app'); const tableHeight = useTableHeight(); -const editingRow = ref(null); -const editingField = ref(null); +const editingRow = ref(); +const editingField = ref(); +const contextMenuRef = ref({}); const isTableMode = computed(() => mode.value == TABLE_MODE); const selectRegex = /select/; const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']); @@ -195,6 +197,10 @@ onBeforeMount(() => { }); onMounted(async () => { + document.addEventListener('contextmenu', (event) => { + event.preventDefault(); + contextMenuRef.value.handler(event); + }); if ($props.isEditable) document.addEventListener('click', clickHandler); mode.value = quasar.platform.is.mobile && !$props.disableOption?.card @@ -777,6 +783,7 @@ const rowCtrlClickFunction = computed(() => { ]" :data-row-index="rowIndex" :data-col-field="col?.name" + :data-col-value="row?.[col?.name]" >
{ + en: