[fix] close modal on click

src/platform/assets/components/AssetBrowserModal.stories.ts

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { provide } from 'vue'
 
 import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
 import {
   createMockAssets,
   mockAssets
 } from '@/platform/assets/fixtures/ui-mock-assets'
+import { OnCloseKey } from '@/types/widgetTypes'
 
 // Story arguments interface
 interface StoryArgs {
@@ -63,6 +65,9 @@ export const Default: Story = {
         console.log('Modal closed')
       }
 
+      // Provide the close function for BaseModalLayout to inject
+      provide(OnCloseKey, onClose)
+
       return {
         ...args,
         onAssetSelect,
@@ -103,6 +108,9 @@ export const SingleAssetType: Story = {
         console.log('Modal closed')
       }
 
+      // Provide the close function for BaseModalLayout to inject
+      provide(OnCloseKey, onClose)
+
       // Create assets with only one type (checkpoints)
       const singleTypeAssets = createMockAssets(15).map((asset) => ({
         ...asset,
@@ -152,6 +160,9 @@ export const NoLeftPanel: Story = {
         console.log('Modal closed')
       }
 
+      // Provide the close function for BaseModalLayout to inject
+      provide(OnCloseKey, onClose)
+
       return { ...args, onAssetSelect, onClose, assets: mockAssets }
     },
     template: `

src/platform/assets/components/AssetBrowserModal.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, provide } from 'vue'
 
 import SearchBox from '@/components/input/SearchBox.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
@@ -46,6 +46,7 @@ import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { OnCloseKey } from '@/types/widgetTypes'
 import { cn } from '@/utils/tailwindUtil'
 
 const props = defineProps<{
@@ -62,6 +63,9 @@ const emit = defineEmits<{
   close: []
 }>()
 
+// Provide the close function for BaseModalLayout to inject
+provide(OnCloseKey, props.onClose || (() => {}))
+
 // Use AssetBrowser composable for all business logic
 const {
   searchQuery,

src/platform/assets/composables/useAssetBrowserDialog.ts

@@ -31,10 +31,6 @@ export const useAssetBrowserDialog = () => {
       props.onAssetSelected?.(assetPath)
     }
 
-    const handleClose = () => {
-      hide()
-    }
-
     // Default dialog configuration for AssetBrowserModal
     const dialogComponentProps = {
       headless: true,
@@ -74,7 +70,7 @@ export const useAssetBrowserDialog = () => {
         currentValue: props.currentValue,
         assets,
         onSelect: handleAssetSelected,
-        onClose: handleClose
+        onClose: () => hide()
       },
       dialogComponentProps
     })