Popover: DT demo updates
parent
78b8c8330a
commit
627a932ab2
|
@ -180,17 +180,16 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
displayProduct(event, product) {
|
displayProduct(event, product) {
|
||||||
|
this.$refs.op.hide();
|
||||||
|
|
||||||
if (this.selectedProduct?.id === product.id) {
|
if (this.selectedProduct?.id === product.id) {
|
||||||
this.$refs.op.hide();
|
|
||||||
this.selectedProduct = null;
|
this.selectedProduct = null;
|
||||||
} else {
|
} else {
|
||||||
this.selectedProduct = product;
|
this.selectedProduct = product;
|
||||||
this.$refs.op.show(event);
|
|
||||||
|
|
||||||
// will not be needed with v4.0.6 as Popover will auto align
|
this.$nextTick(() => {
|
||||||
if (this.$refs.op.container) {
|
this.$refs.op.show(event);
|
||||||
this.$refs.op.alignOverlay();
|
});
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
hidePopover() {
|
hidePopover() {
|
||||||
|
@ -269,7 +268,7 @@ export default {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from "vue";
|
import { ref, onMounted, nextTick } from "vue";
|
||||||
import { useToast } from "primevue/usetoast";
|
import { useToast } from "primevue/usetoast";
|
||||||
import { ProductService } from '@/service/ProductService';
|
import { ProductService } from '@/service/ProductService';
|
||||||
|
|
||||||
|
@ -282,17 +281,16 @@ const products = ref();
|
||||||
const selectedProduct = ref();
|
const selectedProduct = ref();
|
||||||
|
|
||||||
const displayProduct = (event, product) => {
|
const displayProduct = (event, product) => {
|
||||||
|
op.value.hide();
|
||||||
|
|
||||||
if (selectedProduct.value?.id === product.id) {
|
if (selectedProduct.value?.id === product.id) {
|
||||||
op.value.hide();
|
|
||||||
selectedProduct.value = null;
|
selectedProduct.value = null;
|
||||||
} else {
|
} else {
|
||||||
selectedProduct.value = product;
|
selectedProduct.value = product;
|
||||||
op.value.show(event);
|
|
||||||
|
|
||||||
// will not be needed with v4.0.6 as Popover will auto align
|
nextTick(() => {
|
||||||
if (op.value.container) {
|
op.value.show(event);
|
||||||
op.value.alignOverlay();
|
});
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -341,16 +339,16 @@ const getSeverity = (product) => {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
displayProduct(event, product) {
|
displayProduct(event, product) {
|
||||||
|
this.$refs.op.hide();
|
||||||
|
|
||||||
if (this.selectedProduct?.id === product.id) {
|
if (this.selectedProduct?.id === product.id) {
|
||||||
this.$refs.op.hide();
|
|
||||||
this.selectedProduct = null;
|
this.selectedProduct = null;
|
||||||
} else {
|
} else {
|
||||||
this.selectedProduct = product;
|
this.selectedProduct = product;
|
||||||
this.$refs.op.show(event);
|
|
||||||
|
|
||||||
if (this.$refs.op.container) {
|
this.$nextTick(() => {
|
||||||
this.$refs.op.alignOverlay();
|
this.$refs.op.show(event);
|
||||||
}
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
hidePopover() {
|
hidePopover() {
|
||||||
|
|
Loading…
Reference in New Issue