Merge branch 'main' into feat_table

src/components/Accordion/Accordion.vue

@@ -1,10 +1,9 @@
 <template>
-  <div class="vp-raw">
-    <slot :accordionId="accordionId"/>
+  <div class="vp-raw" :data-accordion-id="accordionId">
+    <slot />
   </div>
 </template>
 <script lang="ts" setup>
-import { provide } from 'vue'
 import { nanoid } from 'nanoid'
 import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
 
@@ -20,6 +19,5 @@ const props = defineProps({
 })
 
 const accordionId = nanoid()
-provide('accordionId', accordionId)
 useAccordionState(accordionId, { ...props })
 </script>

src/components/Accordion/AccordionContent.vue

@@ -1,13 +1,26 @@
 <template>
-  <div
-    :class="contentClasses"
-  >
-    <slot />
+  <div ref="content">
+    <div
+        v-if="isLoaded"
+        :class="contentClasses"
+    >
+      <slot />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { useAccordionContentClasses } from '@/components/Accordion/composables/useAccordionContentClasses'
+import { onMounted, ref } from 'vue'
 
-const { contentClasses } = useAccordionContentClasses()
+const isLoaded = ref(false)
+const content = ref()
+
+let contentClasses
+
+onMounted(() => {
+  const accordionHeaderClasses = useAccordionContentClasses(content)
+  contentClasses = accordionHeaderClasses.contentClasses
+  isLoaded.value = true
+})
 </script>

src/components/Accordion/AccordionHeader.vue

@@ -1,40 +1,45 @@
 <template>
-  <button
-      type="button"
-      @click="toggleItem"
-      :class="headerClasses"
-  >
-    <span class="w-full"><slot /></span>
-    <svg
-        data-accordion-icon
-        :class="arrowClasses"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
+  <div ref="header">
+    <button
+        v-if="isLoaded"
+        type="button"
+        @click="toggleItem"
+        :class="headerClasses"
     >
-      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path>
-    </svg>
-  </button>
+      <span class="w-full"><slot /></span>
+      <svg
+          data-accordion-icon
+          :class="arrowClasses"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+      >
+        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path>
+      </svg>
+    </button>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
-import { computed, inject } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useAccordionHeaderClasses } from '@/components/Accordion/composables/useAccordionHeaderClasses'
 
-const accordionId: string = inject('accordionId') ?? ''
-const panelId: string = inject('panelId') ?? ''
+const isLoaded = ref(false)
+const header = ref()
+const accordionId = computed(() => header.value.parentElement.parentElement.dataset.accordionId)
+const panelId = computed(() => header.value.parentElement.dataset.panelId)
 
 const { accordionsStates } = useAccordionState()
-const accordionState = computed(() => accordionsStates[accordionId])
-const panelState = computed(() => accordionState.value.panels[panelId])
+const accordionState = computed(() => accordionsStates[accordionId.value])
+const panelState = computed(() => accordionState.value.panels[panelId.value])
 
-const { headerClasses, arrowClasses } = useAccordionHeaderClasses()
+let headerClasses, arrowClasses
 function commonToggleItem() {
   const isSelectedVisible = panelState.value.isVisible
   for (const panelIndex in accordionState.value.panels) {
     const panel = accordionState.value.panels[panelIndex]
-    if (panel.id !== panelId) panel.isVisible = false
+    if (panel.id !== panelId.value) panel.isVisible = false
     else panel.isVisible = !isSelectedVisible
   }
 }
@@ -46,4 +51,10 @@ function toggleItem() {
   commonToggleItem()
 }
 
+onMounted(() => {
+  const accordionHeaderClasses = useAccordionHeaderClasses(header)
+  headerClasses = accordionHeaderClasses.headerClasses
+  arrowClasses = accordionHeaderClasses.arrowClasses
+  isLoaded.value = true
+})
 </script>

src/components/Accordion/AccordionPanel.vue

@@ -1,26 +1,30 @@
 <template>
-  <div>
-    <slot></slot>
+  <div :data-panel-id="panelId" ref="panel">
+    <slot v-if="accordionId"></slot>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeMount, provide } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
 import { nanoid } from 'nanoid'
 
 const { accordionsStates } = useAccordionState()
 
-const panelId = nanoid()
-const accordionId: string = inject('accordionId') ?? ''
-provide('panelId', panelId)
 
-const accordionState = computed(() => {
-  return accordionsStates[accordionId]
+const panelId = nanoid()
+const panel = ref()
+const accordionId = computed(() => {
+  if (panel.value) return panel.value.parentElement.dataset.accordionId
+  return null
 })
 
-onBeforeMount(() => {
-  const panelsCount = Object.keys(accordionState.value.panels).length
+const accordionState = computed(() => {
+  return accordionsStates[accordionId.value]
+})
+
+onMounted(() => {
+  const panelsCount = Object.keys(accordionState?.value?.panels)?.length
   accordionState.value.panels[panelId] = {
     id: panelId,
     order: panelsCount,

src/components/Accordion/composables/useAccordionContentClasses.ts

@@ -1,29 +1,25 @@
-import { computed, inject } from 'vue'
+import { computed } from 'vue'
 import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
 import classNames from 'classnames'
 
-
 const baseContentClasses = 'p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900'
-export function useAccordionContentClasses() {
-  const accordionId: string = inject('accordionId') ?? ''
-  const panelId: string = inject('panelId') ?? ''
-
-
+export function useAccordionContentClasses(contentRef: any) {
+  const accordionId = computed(() => contentRef.value.parentElement.parentElement.dataset.accordionId)
+  const panelId = computed(() => contentRef.value.parentElement.dataset.panelId)
   const { accordionsStates } = useAccordionState()
+  const accordionState = computed(() => accordionsStates[accordionId.value])
+  const panelState = computed(() => accordionsStates[accordionId.value].panels[panelId.value])
+  const panelsCount = computed(() => Object.keys(accordionsStates[accordionId.value].panels[panelId.value]).length)
 
-  const accordionState = computed(() => accordionsStates[accordionId])
-  const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
-  const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
-
-  const contentClasses = computed(() => classNames(baseContentClasses, {
-    hidden: !panelState.value.isVisible,
-    'border-b-0': panelState.value.order !== panelsCount.value - 1 || accordionState.value.flush,
-    'border-t-0': panelState.value.order === panelsCount.value - 1,
-    'border-x-0': accordionState.value.flush,
-  }))
+  const contentClasses = computed(() => {
+    return classNames(baseContentClasses, {
+      hidden: !panelState.value.isVisible,
+      'border-b-0': panelState.value.order !== panelsCount.value - 1 || accordionState.value.flush,
+      'border-t-0': panelState.value.order === panelsCount.value - 1,
+      'border-x-0': accordionState.value.flush,
+    })
+  })
   return {
     contentClasses,
   }
 }
-
-

src/components/Accordion/composables/useAccordionHeaderClasses.ts

@@ -1,35 +1,34 @@
-import { computed, inject } from 'vue'
+import { computed } from 'vue'
 import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
 import classNames from 'classnames'
 
-
-const baseHeaderClasses = 'flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
+const baseHeaderClasses =
+  'flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
 const baseArrowClasses = 'w-6 h-6 shrink-0'
-export function useAccordionHeaderClasses() {
-  const accordionId: string = inject('accordionId') ?? ''
-  const panelId: string = inject('panelId') ?? ''
-
+export function useAccordionHeaderClasses(headerRef: any) {
+  const accordionId = computed(() => headerRef.value.parentElement.parentElement.dataset.accordionId)
+  const panelId = computed(() => headerRef.value.parentElement.dataset.panelId)
   const { accordionsStates } = useAccordionState()
-  const accordionState = computed(() => accordionsStates[accordionId])
-  const panelState = computed(() => accordionState.value.panels[panelId])
+  const accordionState = computed(() => accordionsStates[accordionId.value])
+  const panelState = computed(() => accordionState.value.panels[panelId.value])
   const panelsCount = computed(() => Object.keys(panelState.value).length)
   const isPanelLast = computed(() => panelState.value.order !== panelsCount.value - 1)
-  const isBottomBorderVisibleForFlush = computed(() =>
-    isPanelLast.value ||
-    (accordionState.value.flush && panelState.value.order === panelsCount.value - 1 && !panelState.value.isVisible))
+  const isBottomBorderVisibleForFlush = computed(() => isPanelLast.value || (accordionState.value.flush && panelState.value.order === panelsCount.value - 1 && !panelState.value.isVisible))
 
-  const headerClasses = computed(() => classNames(baseHeaderClasses, {
-    'bg-gray-100 dark:bg-gray-800': panelState.value.isVisible,
-    'rounded-t-xl': panelState.value.order === 0 && !accordionState.value.flush,
-    'border-t-0': panelState.value.order === 0 && accordionState.value.flush,
-    'border-b-0': isBottomBorderVisibleForFlush.value,
-    'border-x-0': accordionState.value.flush,
-  }))
-  const arrowClasses = computed(() => classNames(baseArrowClasses,{ 'rotate-180': panelState.value.isVisible }))
+  const headerClasses = computed(() => {
+    return classNames(baseHeaderClasses, {
+      'bg-gray-100 dark:bg-gray-800': panelState.value.isVisible,
+      'rounded-t-xl': panelState.value.order === 0 && !accordionState.value.flush,
+      'border-t-0': panelState.value.order === 0 && accordionState.value.flush,
+      'border-b-0': isBottomBorderVisibleForFlush.value,
+      'border-x-0': accordionState.value.flush,
+    })
+  })
+  const arrowClasses = computed(() => {
+    return classNames(baseArrowClasses, { 'rotate-180': panelState.value.isVisible })
+  })
   return {
     headerClasses,
     arrowClasses,
   }
 }
-
-

src/components/Carousel/Carousel.vue

@@ -1,35 +1,26 @@
 <template>
-  <div id="default-carousel" class="relative" data-carousel="static">
+  <div id="default-carousel" class="relative">
     <!-- Carousel wrapper -->
     <div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96">
       <!-- Item 1 -->
-      <div class="hidden duration-700 ease-in-out" data-carousel-item>
-        <span class="absolute top-1/2 left-1/2 text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
-<!--        <img src="/docs/images/carousel/carousel-1.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">-->
-      </div>
-      <!-- Item 2 -->
-      <div class="hidden duration-700 ease-in-out" data-carousel-item>
-<!--        <img src="/docs/images/carousel/carousel-2.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">-->
-      </div>
-      <!-- Item 3 -->
-      <div class="hidden duration-700 ease-in-out" data-carousel-item>
-<!--        <img src="/docs/images/carousel/carousel-3.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">-->
+<!--      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">
+        <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 class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
-      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 1" data-carousel-slide-to="0"></button>
-      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
-      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
+    <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>
     </div>
     <!-- Slider controls -->
-    <button 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>
+    <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>
       <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
         <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
         <span class="hidden">Previous</span>
       </span>
     </button>
-    <button type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
+    <button v-if="controls" @click.prevent="nextPicture" type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
       <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
         <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
         <span class="hidden">Next</span>
@@ -38,28 +29,94 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
-import type { PropType } from 'vue'
+import { onMounted, ref } from 'vue'
 
 const props = defineProps({
-  children: {
+  pictures: {
     type: Array,
     default() {
-      return []
+      return [
+        {
+          'src': 'https://flowbite.com/docs/images/carousel/carousel-1.svg',
+          'alt': 'Picture 1',
+        },
+        {
+          'src': 'https://flowbite.com/docs/images/carousel/carousel-2.svg',
+          'alt': 'Picture 2',
+        },
+        {
+          'src': 'https://flowbite.com/docs/images/carousel/carousel-3.svg',
+          'alt': 'Picture 3',
+        },
+      ]
     },
   },
   indicators: {
     type: Boolean,
     default: true,
   },
-  slide: {
+  controls: {
     type: Boolean,
     default: true,
   },
+  slide: {
+    type: Boolean,
+    default: false,
+  },
   slideInterval: {
     type: Number,
     default: 3000,
   },
+  animation: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const currentPicture = ref(0)
+const direction = ref('')
+const interval = ref()
+
+const automaticSlide = () => {
+    interval.value = setInterval(function() {
+      nextPicture()
+    }, props.slideInterval)
+}
+
+const resetInterval = () => {
+  clearInterval(interval.value)
+  automaticSlide()
+}
+
+const slideTo = (index: number) => {
+  currentPicture.value = index
+  resetInterval()
+}
+
+const nextPicture = () => {
+  if (currentPicture.value !== props.pictures.length - 1) {
+    currentPicture.value ++
+  } else {
+    currentPicture.value = 0
+  }
+  direction.value = 'right'
+  resetInterval()
+}
+
+const previousPicture = () => {
+  if (currentPicture.value !== 0) {
+    currentPicture.value --
+  } else {
+    currentPicture.value = props.pictures.length -1
+  }
+  direction.value = 'left'
+  resetInterval()
+}
+
+onMounted(() => {
+  if (props.slide) {
+    automaticSlide()
+  }
 })
 
 </script>