From f96977e6e4e9bc73174021fc24485f3381a1d26e Mon Sep 17 00:00:00 2001 From: Ricardo Espinoza Date: Mon, 23 Sep 2024 11:33:25 -0400 Subject: [PATCH] refactor(editor): Migrate `TemplatesWorkflowView.vue` to composition API (#10918) --- .../src/components/TemplatesInfoCarousel.vue | 10 +- .../src/views/TemplatesWorkflowView.vue | 171 ++++++++---------- 2 files changed, 85 insertions(+), 96 deletions(-) diff --git a/packages/editor-ui/src/components/TemplatesInfoCarousel.vue b/packages/editor-ui/src/components/TemplatesInfoCarousel.vue index 05999d8f9220b..998a93f870f4b 100644 --- a/packages/editor-ui/src/components/TemplatesInfoCarousel.vue +++ b/packages/editor-ui/src/components/TemplatesInfoCarousel.vue @@ -3,7 +3,7 @@ import { nextTick, onBeforeMount, onMounted, ref, watch } from 'vue'; import type { ITemplatesCollection } from '@/Interface'; import Card from '@/components/CollectionWorkflowCard.vue'; import TemplatesInfoCard from '@/components/TemplatesInfoCard.vue'; -import type { VueAgile } from 'vue-agile'; +import { VueAgile } from 'vue-agile'; type SliderRef = InstanceType; @@ -31,7 +31,7 @@ const carouselScrollPosition = ref(0); const cardWidth = ref(parseInt(props.cardsWidth, 10)); const scrollEnd = ref(false); const listElement = ref(null); -const sliderRef = ref(null); +const sliderRef = ref(null); const updateCarouselScroll = () => { if (listElement.value) { @@ -80,9 +80,11 @@ watch( onMounted(async () => { await nextTick(); + if (!sliderRef.value) { return; } + listElement.value = sliderRef.value.$el.querySelector('.agile__list'); if (listElement.value) { listElement.value.addEventListener('scroll', updateCarouselScroll); @@ -99,7 +101,7 @@ onBeforeMount(() => {