From 8f689d393dd6acd5b9a67a45cbd980479c8c3bf4 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <hire@ilya-artamonov.ru>
Date: Sat, 17 Dec 2022 12:06:07 +0300
Subject: [PATCH] fix: Fixed types

---
 src/components/Accordion/AccordionContent.vue | 5 ++---
 src/components/Accordion/AccordionHeader.vue  | 7 ++++---
 src/components/Carousel/Carousel.vue          | 8 +++++---
 src/components/Carousel/types.ts              | 4 ++++
 4 files changed, 15 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Carousel/types.ts

diff --git a/src/components/Accordion/AccordionContent.vue b/src/components/Accordion/AccordionContent.vue
index 25e9274..879c1f3 100644
--- a/src/components/Accordion/AccordionContent.vue
+++ b/src/components/Accordion/AccordionContent.vue
@@ -15,12 +15,11 @@ import { onMounted, ref } from 'vue'
 
 const isLoaded = ref(false)
 const content = ref()
-
-let contentClasses
+const contentClasses = ref('')
 
 onMounted(() => {
   const accordionHeaderClasses = useAccordionContentClasses(content)
-  contentClasses = accordionHeaderClasses.contentClasses
+  contentClasses.value = accordionHeaderClasses.contentClasses.value
   isLoaded.value = true
 })
 </script>
diff --git a/src/components/Accordion/AccordionHeader.vue b/src/components/Accordion/AccordionHeader.vue
index 4b34fc6..3fb62ce 100644
--- a/src/components/Accordion/AccordionHeader.vue
+++ b/src/components/Accordion/AccordionHeader.vue
@@ -34,7 +34,8 @@ const { accordionsStates } = useAccordionState()
 const accordionState = computed(() => accordionsStates[accordionId.value])
 const panelState = computed(() => accordionState.value.panels[panelId.value])
 
-let headerClasses, arrowClasses
+const headerClasses = ref('')
+const arrowClasses = ref('')
 function commonToggleItem() {
   const isSelectedVisible = panelState.value.isVisible
   for (const panelIndex in accordionState.value.panels) {
@@ -53,8 +54,8 @@ function toggleItem() {
 
 onMounted(() => {
   const accordionHeaderClasses = useAccordionHeaderClasses(header)
-  headerClasses = accordionHeaderClasses.headerClasses
-  arrowClasses = accordionHeaderClasses.arrowClasses
+  headerClasses.value = accordionHeaderClasses.headerClasses.value
+  arrowClasses.value = accordionHeaderClasses.arrowClasses.value
   isLoaded.value = true
 })
 </script>
diff --git a/src/components/Carousel/Carousel.vue b/src/components/Carousel/Carousel.vue
index 1da32dd..667595a 100644
--- a/src/components/Carousel/Carousel.vue
+++ b/src/components/Carousel/Carousel.vue
@@ -5,13 +5,13 @@
       <!-- Item 1 -->
 <!--      duration-700 ease-in-out-->
       <div :class="index === currentPicture ? 'z-30' : 'z-0'"
-           v-for="(picture, index) in pictures" :key="picture" class="absolute inset-0 -translate-y-0">
+           v-for="(picture, index) in pictures" :key="index" class="absolute inset-0 -translate-y-0">
         <img :src="picture.src" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" :alt="picture.alt">
       </div>
     </div>
     <!-- Slider indicators -->
     <div v-if="indicators" class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
-      <button v-for="(picture, index) in pictures" :key="picture" type="button" :class="index === currentPicture ? 'bg-white' : 'bg-white/50'" class="w-3 h-3 rounded-full bg-white" aria-current="false" :aria-label="'Slide ' + index" @click.prevent="slideTo(index)"></button>
+      <button v-for="(picture, index) in pictures" :key="index" type="button" :class="index === currentPicture ? 'bg-white' : 'bg-white/50'" class="w-3 h-3 rounded-full bg-white" aria-current="false" :aria-label="'Slide ' + index" @click.prevent="slideTo(index)"></button>
     </div>
     <!-- Slider controls -->
     <button v-if="controls" @click.prevent="previousPicture" type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
@@ -30,10 +30,12 @@
 </template>
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
+import type { PropType } from 'vue'
+import type { PictureItem } from '@/components/Carousel/types'
 
 const props = defineProps({
   pictures: {
-    type: Array,
+    type: Array as PropType<PictureItem[]>,
     default() {
       return [
         {
diff --git a/src/components/Carousel/types.ts b/src/components/Carousel/types.ts
new file mode 100644
index 0000000..0d7cbf8
--- /dev/null
+++ b/src/components/Carousel/types.ts
@@ -0,0 +1,4 @@
+export type PictureItem = {
+    src: string,
+    alt?: string
+}