diff --git a/src/components/VnTable/VnContextMenu.vue b/src/components/VnTable/VnContextMenu.vue index f9922538e..7004469a9 100644 --- a/src/components/VnTable/VnContextMenu.vue +++ b/src/components/VnTable/VnContextMenu.vue @@ -9,18 +9,18 @@ const colField = ref(); let colValue = ''; let textValue = ''; +defineExpose({ handler }); + const arrayData = defineModel({ type: Array, }); -defineExpose({ - handler, -}); - function handler(event) { + const clickedElement = event.target.closest('td'); + if (!clickedElement) return; + 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') @@ -45,22 +45,22 @@ function getDeepestText(node) { return lastText; } -function selectionFilter() { - arrayData.value.addFilter({ params: { [colField.value]: colValue } }); +async function selectionFilter() { + await arrayData.value.addFilter({ params: { [colField.value]: colValue } }); } -function selectionExclude() { - arrayData.value.addFilter({ - params: { [colField.value]: { neq: +colValue } }, +async function selectionExclude() { + await arrayData.value.addFilter({ + params: { [colField.value]: { neq: colValue } }, }); } -function selectionRemoveFilter() { - arrayData.value.addFilter({ params: { [colField.value]: undefined } }); +async function selectionRemoveFilter() { + await arrayData.value.addFilter({ params: { [colField.value]: undefined } }); } -function removeAllFilters() { - arrayData.value.applyFilter({ params: {} }); +async function removeAllFilters() { + await arrayData.value.applyFilter({ params: {} }); } function copyValue() { @@ -72,12 +72,42 @@ function copyValue() { } diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue index 82d7c772c..1ebad1abe 100644 --- a/src/components/VnTable/VnFilter.vue +++ b/src/components/VnTable/VnFilter.vue @@ -136,6 +136,9 @@ async function addFilter(value, name) { value = value === '' ? undefined : value; let field = columnFilter.value?.name ?? $props.column.name ?? name; + delete arrayData.store?.userParams?.[field]; + delete arrayData.store?.filter?.where?.[field]; + if (columnFilter.value?.inWhere) { if (columnFilter.value.alias) field = columnFilter.value.alias + '.' + field; return await arrayData.addFilterWhere({ [field]: value }); diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue index c94089604..3eea028d8 100644 --- a/src/components/VnTable/VnTable.vue +++ b/src/components/VnTable/VnTable.vue @@ -210,11 +210,11 @@ onBeforeMount(() => { }); onMounted(async () => { + if ($props.isEditable) document.addEventListener('click', clickHandler); 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 ? CARD_MODE @@ -238,6 +238,7 @@ onMounted(async () => { onUnmounted(async () => { if ($props.isEditable) document.removeEventListener('click', clickHandler); + document.removeEventListener('contextmenu', {}); }); watch( diff --git a/src/components/VnTable/VnTableFilter.vue b/src/components/VnTable/VnTableFilter.vue index a7b2108ed..5d24245ac 100644 --- a/src/components/VnTable/VnTableFilter.vue +++ b/src/components/VnTable/VnTableFilter.vue @@ -77,7 +77,12 @@ function columnName(col) {