feat: refs #8224 add context menu forVnTable

src/components/VnTable/VnContextMenu.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { ref } from 'vue';
+import { useClipboard } from 'src/composables/useClipboard';
+
+const { copyText } = useClipboard();
+const target = ref();
+const qmenuRef = ref();
+const colField = ref();
+let colValue = '';
+let textValue = '';
+
+const arrayData = defineModel({
+    type: Array,
+});
+
+defineExpose({
+    handler,
+});
+
+function handler(event) {
+    target.value = event.target;
+    qmenuRef.value.show();
+    const clickedElement = event.target.closest('td');
+    colField.value = clickedElement.getAttribute('data-col-field');
+    colValue = isNaN(+clickedElement.getAttribute('data-col-value'))
+        ? clickedElement.getAttribute('data-col-value')
+        : +clickedElement.getAttribute('data-col-value');
+    textValue = getDeepestText(clickedElement);
+}
+
+function getDeepestText(node) {
+    const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, {
+        acceptNode: (textNode) => {
+            return textNode.nodeValue.trim()
+                ? NodeFilter.FILTER_ACCEPT
+                : NodeFilter.FILTER_REJECT;
+        },
+    });
+
+    let lastText = '';
+    while (walker.nextNode()) {
+        lastText = walker.currentNode.nodeValue.trim();
+    }
+
+    return lastText;
+}
+
+function selectionFilter() {
+    arrayData.value.addFilter({ params: { [colField.value]: colValue } });
+}
+
+function selectionExclude() {
+    arrayData.value.addFilter({
+        params: { [colField.value]: { neq: +colValue } },
+    });
+}
+
+function selectionRemoveFilter() {
+    arrayData.value.addFilter({ params: { [colField.value]: undefined } });
+}
+
+function removeAllFilters() {
+    arrayData.value.applyFilter({ params: {} });
+}
+
+function copyValue() {
+    copyText(textValue, {
+        component: {
+            copyValue: textValue,
+        },
+    });
+}
+</script>
+<template>
+    <QMenu ref="qmenuRef" :target class="column q-pa-sm" auto-close>
+        <QBtn flat @click="selectionFilter()">{{ $t('Filter by selection') }}</QBtn>
+        <!-- <QBtn flat @click="selectionExclude()">{{ $t('* Exclude selection') }}</QBtn> -->
+        <QBtn flat @click="selectionRemoveFilter()">{{ $t('Remove filter') }}</QBtn>
+        <QBtn flat @click="removeAllFilters()">{{ $t('Remove all filters') }}</QBtn>
+        <QBtn flat @click="copyValue()">{{ $t('Copy value') }}</QBtn>
+    </QMenu>
+</template>
+<i18n>
+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
+</i18n>

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]"
                     >
                         <div
                             class="no-padding no-margin"
@@ -1087,6 +1094,7 @@ const rowCtrlClickFunction = computed(() => {
             </template>
         </FormModelPopup>
     </QDialog>
+    <VnContextMenu ref="contextMenuRef" v-model="arrayData" />
 </template>
 <i18n>
 en: