Fix sidepanel not closable via button (#2772)

This commit is contained in:
Anbraten 2023-11-07 14:22:08 +01:00 committed by GitHub
parent 5a7b689e30
commit 52163b9a3e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 20 deletions

View file

@ -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.0.0",
"@vueuse/core": "^10.5.0",
"ansi_up": "^6.0.0",
"dayjs": "^1.11.9",
"fuse.js": "^7.0.0",

View file

@ -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:

View file

@ -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" />

View file

@ -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>