feat(nc-gui): add useMenuCloseOnEsc to kanban toolbar

packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { IsLockedInj, IsPublicInj, useKanbanViewStoreOrThrow } from '#imports'
+import { IsLockedInj, IsPublicInj, useKanbanViewStoreOrThrow, useMenuCloseOnEsc } from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
@@ -7,12 +7,14 @@ const { groupingFieldColumn } = useKanbanViewStoreOrThrow()
 
 const isLocked = inject(IsLockedInj, ref(false))
 
-const addOrEditStackDropdown = ref(false)
-
 const IsPublic = inject(IsPublicInj, ref(false))
 
+const open = ref(false)
+
+useMenuCloseOnEsc(open)
+
 const handleSubmit = async () => {
-  addOrEditStackDropdown.value = false
+  open.value = false
 }
 
 provide(IsKanbanInj, ref(true))
@@ -21,7 +23,7 @@ provide(IsKanbanInj, ref(true))
 <template>
   <a-dropdown
     v-if="!IsPublic && isUIAllowed('edit-column')"
-    v-model:visible="addOrEditStackDropdown"
+    v-model:visible="open"
     :trigger="['click']"
     overlay-class-name="nc-dropdown-kanban-add-edit-stack-menu"
   >
@@ -42,10 +44,10 @@ provide(IsKanbanInj, ref(true))
     </div>
     <template #overlay>
       <LazySmartsheetColumnEditOrAddProvider
-        v-if="addOrEditStackDropdown"
+        v-if="open"
         :column="groupingFieldColumn"
         @submit="handleSubmit"
-        @cancel="addOrEditStackDropdown = false"
+        @cancel="open = false"
         @click.stop
         @keydown.stop
       />

packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue

@@ -12,6 +12,7 @@ import {
   inject,
   ref,
   useKanbanViewStoreOrThrow,
+  useMenuCloseOnEsc,
   useViewColumns,
   watch,
 } from '#imports'
@@ -30,7 +31,9 @@ const { fields, loadViewColumns, metaColumnById } = useViewColumns(activeView, m
 
 const { kanbanMetaData, loadKanbanMeta, loadKanbanData, updateKanbanMeta, groupingField } = useKanbanViewStoreOrThrow()
 
-const stackedByDropdown = ref(false)
+const open = ref(false)
+
+useMenuCloseOnEsc(open)
 
 watch(
   () => activeView.value?.id,
@@ -68,14 +71,14 @@ const singleSelectFieldOptions = computed<SelectProps['options']>(() => {
 })
 
 const handleChange = () => {
-  stackedByDropdown.value = false
+  open.value = false
 }
 </script>
 
 <template>
   <a-dropdown
     v-if="!IsPublic"
-    v-model:visible="stackedByDropdown"
+    v-model:visible="open"
     :trigger="['click']"
     overlay-class-name="nc-dropdown-kanban-stacked-by-menu"
   >
@@ -97,7 +100,7 @@ const handleChange = () => {
     </div>
     <template #overlay>
       <div
-        v-if="stackedByDropdown"
+        v-if="open"
         class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
         @click.stop
       >