Browse Source

fix(gui-v2): close edit/add column window on click outside

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3057/head
Pranav C 2 years ago
parent
commit
5a39c5fa88
  1. 14
      packages/nc-gui-v2/components/smartsheet-header/Menu.vue

14
packages/nc-gui-v2/components/smartsheet-header/Menu.vue

@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onClickOutside } from '@vueuse/core'
import { Modal } from 'ant-design-vue' import { Modal } from 'ant-design-vue'
import { inject } from 'vue' import { inject } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
@ -55,13 +56,24 @@ function onVisibleChange() {
// by clicking cancel button // by clicking cancel button
editColumnDropdown.value = true editColumnDropdown.value = true
} }
const editOrAddCard = ref()
onClickOutside(editOrAddCard, () => {
editColumnDropdown.value = false
})
</script> </script>
<template> <template>
<a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']" @visible-change="onVisibleChange"> <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']" @visible-change="onVisibleChange">
<span /> <span />
<template #overlay> <template #overlay>
<SmartsheetColumnEditOrAdd :edit-column-dropdown="true" @click.stop @cancel="editColumnDropdown = false" /> <SmartsheetColumnEditOrAdd
ref="editOrAddCard"
:edit-column-dropdown="editColumnDropdown"
@click.stop
@cancel="editColumnDropdown = false"
/>
</template> </template>
</a-dropdown> </a-dropdown>
<a-dropdown :trigger="['hover']"> <a-dropdown :trigger="['hover']">

Loading…
Cancel
Save