Browse Source

fix(gui-v2): carousel not opening correct slide on start

pull/2972/head
braks 2 years ago
parent
commit
e24496c5c9
  1. 20
      packages/nc-gui-v2/components/cell/attachment/Carousel.vue
  2. 2
      packages/nc-gui-v2/components/cell/attachment/Modal.vue

20
packages/nc-gui-v2/components/cell/attachment/Carousel.vue

@ -1,16 +1,15 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Carousel as AntCarousel } from 'ant-design-vue'
import { onKeyDown } from '@vueuse/core' import { onKeyDown } from '@vueuse/core'
import { useAttachmentCell } from './utils' import { useAttachmentCell } from './utils'
import { isImage } from '~/utils' import { isImage } from '~/utils'
import { computed, ref } from '#imports' import { computed, onClickOutside, ref, watch } from '#imports'
import MaterialSymbolsArrowCircleRightRounded from '~icons/material-symbols/arrow-circle-right-rounded' import MaterialSymbolsArrowCircleRightRounded from '~icons/material-symbols/arrow-circle-right-rounded'
import MaterialSymbolsArrowCircleLeftRounded from '~icons/material-symbols/arrow-circle-left-rounded' import MaterialSymbolsArrowCircleLeftRounded from '~icons/material-symbols/arrow-circle-left-rounded'
import MdiCloseCircle from '~icons/mdi/close-circle' import MdiCloseCircle from '~icons/mdi/close-circle'
const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()! const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()!
const carouselRef = ref<typeof AntCarousel>() const carouselRef = ref()
const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype))) const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype)))
@ -31,6 +30,21 @@ onKeyDown(
function onSlideChange(index: number) { function onSlideChange(index: number) {
selectedImage.value = imageItems.value[index] selectedImage.value = imageItems.value[index]
} }
watch(
carouselRef,
() => {
carouselRef.value?.goTo(
imageItems.value.findIndex((item) => item === selectedImage.value),
true,
)
},
{ immediate: true },
)
onClickOutside(carouselRef, () => {
selectedImage.value = false
})
</script> </script>
<template> <template>

2
packages/nc-gui-v2/components/cell/attachment/Modal.vue

@ -26,6 +26,7 @@ const {
onDrop, onDrop,
downloadFile, downloadFile,
updateModelValue, updateModelValue,
selectedImage,
} = useAttachmentCell()! } = useAttachmentCell()!
// todo: replace placeholder var // todo: replace placeholder var
@ -102,6 +103,7 @@ onKeyDown('Escape', () => {
v-if="isImage(item.title, item.mimetype)" v-if="isImage(item.title, item.mimetype)"
:style="{ backgroundImage: `url('${item.url}')` }" :style="{ backgroundImage: `url('${item.url}')` }"
class="w-full h-full bg-contain bg-center bg-no-repeat" class="w-full h-full bg-contain bg-center bg-no-repeat"
@click.stop="() => (selectedImage = item) && (modalVisible = false)"
/> />
<component <component

Loading…
Cancel
Save