Fix sidepanel not closable via button (#2772)

web/package.json

@@ -19,8 +19,7 @@
   "dependencies": {
     "@intlify/unplugin-vue-i18n": "^1.0.0",
     "@kyvg/vue3-notification": "^3.0.0",
-    "@vueuse/components": "^10.4.0",
+    "@vueuse/core": "^10.5.0",
-    "@vueuse/core": "^10.0.0",
     "ansi_up": "^6.0.0",
     "dayjs": "^1.11.9",
     "fuse.js": "^7.0.0",

web/pnpm-lock.yaml

@@ -14,11 +14,8 @@ dependencies:
   '@kyvg/vue3-notification':
     specifier: ^3.0.0
     version: 3.0.2(vue@3.3.7)
-  '@vueuse/components':
-    specifier: ^10.4.0
-    version: 10.5.0(vue@3.3.7)
   '@vueuse/core':
-    specifier: ^10.0.0
+    specifier: ^10.5.0
     version: 10.5.0(vue@3.3.7)
   ansi_up:
     specifier: ^6.0.0
@@ -1125,17 +1122,6 @@ packages:
   /@vue/shared@3.3.7:
     resolution: {integrity: sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==}
 
-  /@vueuse/components@10.5.0(vue@3.3.7):
-    resolution: {integrity: sha512-zWQZ8zkNBvX++VHfyiUaQ4otb+4PWI8679GR8FvdrNnj+01LXnqvrkyKd8yTCMJ9nHqwRRTJikS5fu4Zspn9DQ==}
-    dependencies:
-      '@vueuse/core': 10.5.0(vue@3.3.7)
-      '@vueuse/shared': 10.5.0(vue@3.3.7)
-      vue-demi: 0.14.6(vue@3.3.7)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: false
-
   /@vueuse/core@10.5.0(vue@3.3.7):
     resolution: {integrity: sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==}
     dependencies:

web/src/components/layout/header/ActivePipelines.vue

@@ -1,5 +1,5 @@
 <template>
-  <IconButton :title="$t('pipeline_feed')" class="!p-1.5 relative text-current" @click="toggle">
+  <IconButton :title="$t('pipeline_feed')" class="!p-1.5 relative text-current active-pipelines-toggle" @click="toggle">
     <div v-if="activePipelines.length > 0" class="spinner m-1">
       <div class="spinner-ring ring1" />
       <div class="spinner-ring ring2" />

web/src/components/pipeline-feed/PipelineFeedSidebar.vue

@@ -1,7 +1,7 @@
 <template>
   <aside
     v-if="isOpen"
-    v-on-click-outside="close"
+    ref="target"
     class="flex flex-col z-50 overflow-y-auto items-center bg-wp-background-100 dark:bg-wp-background-200 border-wp-background-400"
     :aria-label="$t('pipeline_feed')"
   >
@@ -22,11 +22,15 @@
 </template>
 
 <script lang="ts" setup>
-import { vOnClickOutside } from '@vueuse/components';
+import { onClickOutside } from '@vueuse/core';
+import { ref } from 'vue';
 
 import PipelineFeedItem from '~/components/pipeline-feed/PipelineFeedItem.vue';
 import usePipelineFeed from '~/compositions/usePipelineFeed';
 
 const pipelineFeed = usePipelineFeed();
 const { close, isOpen, sortedPipelines } = pipelineFeed;
+
+const target = ref<HTMLElement>();
+onClickOutside(target, close, { ignore: ['.active-pipelines-toggle'] });
 </script>