jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into feat_table

Browse Source
This commit is contained in:
victor
2022-12-13 19:55:08 +04:00
parent 59a5ed46f5 cb30c50c59
commit f0ad3a8d6a
17 changed files with 421 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -238,7 +238,7 @@ module.exports = {
</tr>
<tr>
<td width="33.3333%">:construction: Footer</td>
<td width="33.3333%">:construction: Accordion</td>
<td width="33.3333%">Accordion</td>
<td width="33.3333%">:construction: Sidebar</td>
</tr>
<tr>
@@ -259,7 +259,7 @@ module.exports = {
</td>
</tr>
<tr>
<td width="33.3333%">:construction: Carousel</td>
<td width="33.3333%">Carousel</td>
<td width="33.3333%">Avatar</td>
<td width="33.3333%">:construction: Rating</td>
</tr>

3
docs/.vitepress/config.ts
View File

@@ -42,6 +42,7 @@ function getComponents() {
{ text: 'Badge', link: 'components/badge/badge.md' },
{ text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
{ text: 'Card', link: 'components/card/card.md' },
{ text: 'Carousel', link: 'components/carousel/carousel.md' },
{ text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
{ text: 'Progress', link: 'components/progress/progress.md' },
{ text: 'Spinner', link: '/components/spinner/spinner.md' },
@@ -53,7 +54,6 @@ function getComponents() {
{ text: 'Modal', link: 'components/modal/modal.md' },
{ text: 'Navbar', link: 'components/navbar/navbar.md' },
{ text: '- Carousel', link: 'components/carousel/carousel.md' },
{ text: '- Footer', link: 'components/footer/footer.md' },
{ text: '- Pagination', link: 'components/pagination/pagination.md' },
{ text: '- Rating', link: 'components/rating/rating.md' },
@@ -82,6 +82,7 @@ function getUtils() {
*/
export default defineConfig({
title: 'Flowbite Vue 3',
cleanUrls: 'without-subfolders',
head: [
['link', { rel: "icon", type: "image/svg", href: "/assets/logo.svg"}],
],

158
docs/components/carousel/carousel.md
View File

@@ -1,8 +1,17 @@
<script setup>
import CarouselExample from './examples/CarouselExample.vue'
import CarouselDefaultExample from './examples/CarouselDefaultExample.vue';
import CarouselNoControlsExample from './examples/CarouselNoControlsExample.vue';
import CarouselNoIndicatorsExample from './examples/CarouselNoIndicatorsExample.vue';
import CarouselSlideExample from './examples/CarouselSlideExample.vue';
import CarouselSlideIntervalExample from './examples/CarouselSlideIntervalExample.vue';
import CarouselPicturesExample from './examples/CarouselPicturesExample.vue';
</script>
# Vue Carousel Component - Flowbite
Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options
## Default slider
```vue
<script setup>
import { Carousel } from 'flowbite-vue'
@@ -12,4 +21,149 @@ import { Carousel } from 'flowbite-vue'
</template>
```
<CarouselExample />
<CarouselDefaultExample />
## Prop - controls
```typescript
const props = defineProps({
controls: {
type: Boolean,
default: true,
},
})
```
<CarouselNoControlsExample />
```vue
<script setup>
import { Carousel } from 'flowbite-vue'
</script>
<template>
<Carousel :controls="false"></Carousel>
</template>
```
## Prop - indicators
```typescript
const props = defineProps({
indicators: {
type: Boolean,
default: true,
},
})
```
<CarouselNoIndicatorsExample />
```vue
<script setup>
import { Carousel } from 'flowbite-vue'
</script>
<template>
<Carousel :indicators="false"></Carousel>
</template>
```
## Prop - slide
```typescript
const props = defineProps({
slide: {
type: Boolean,
default: false,
},
})
```
<CarouselSlideExample />
```vue
<script setup>
import { Carousel } from 'flowbite-vue'
</script>
<template>
<Carousel :slide="true"></Carousel>
</template>
```
## Prop - slide interval
```typescript
const props = defineProps({
slideInterval: {
type: Number,
default: 3000,
},
})
```
<CarouselSlideIntervalExample />
```vue
<script setup>
import { Carousel } from 'flowbite-vue'
</script>
<template>
<Carousel :slide="true" :slide-interval="1000"></Carousel>
</template>
```
## Prop - pictures
```typescript
const props = defineProps({
pictures: {
type: Array,
default() {
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',
},
]
},
},
})
```
<CarouselPicturesExample />
```vue
<script setup>
import { Carousel } from 'flowbite-vue'
const pictures = [
{
'src': 'https://i.picsum.photos/id/221/1920/1080.jpg?grayscale&hmac=GWPBzHGEhEh-BrPn1i-PuximCxLtUpKHcNwyACiTRHk',
'alt': 'Picture 1',
},
{
'src': 'https://i.picsum.photos/id/608/1920/1080.jpg?grayscale&hmac=kkVc8-M3ovbO-sFr02WmRbrHx5YcfWmOtkP8rNF9fO4',
'alt': 'Picture 2',
},
{
'src': 'https://i.picsum.photos/id/1012/1920/1080.jpg?grayscale&hmac=Zy9JmZ_sl88DXTF502k_0QqaeCyqjhkn60DjyE5F8Eo',
'alt': 'Picture 3',
},
{
'src': 'https://i.picsum.photos/id/1004/1920/1080.jpg?grayscale&hmac=48C-T9K-36l8jpzJntPTu40OiDuXflIlG_YB-lQWYZI',
'alt': 'Picture 4',
},
{
'src': 'https://i.picsum.photos/id/244/1920/1080.jpg?grayscale&hmac=lLcfHciI-EqaOIHGB_Gab7OpUjVSmDLw6GOq6B5THak',
'alt': 'Picture 5',
},]
</script>
<template>
<Carousel :pictures="pictures"></Carousel>
</template>
```

8
docs/components/carousel/examples/CarouselAutomaticSlideExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Carousel :slide="true"></Carousel>
</div>
</template>
<script setup>
import { Carousel } from '../../../../src/index'
</script>

8
docs/components/carousel/examples/CarouselDefaultExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Carousel></Carousel>
</div>
</template>
<script setup>
import { Carousel } from '../../../../src/index'
</script>

8
docs/components/carousel/examples/CarouselNoControlsExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Carousel :controls="false"></Carousel>
</div>
</template>
<script setup>
import { Carousel } from '../../../../src/index'
</script>

8
docs/components/carousel/examples/CarouselNoIndicatorsExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Carousel :indicators="false"></Carousel>
</div>
</template>
<script setup>
import { Carousel } from '../../../../src/index'
</script>

30
docs/components/carousel/examples/CarouselPicturesExample.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<div class="vp-raw flex flex-col">
<Carousel :pictures="pictures"></Carousel>
</div>
</template>
<script setup>
import { Carousel } from '../../../../src/index'
const pictures = [
{
'src': 'https://i.picsum.photos/id/221/1920/1080.jpg?grayscale&hmac=GWPBzHGEhEh-BrPn1i-PuximCxLtUpKHcNwyACiTRHk',
'alt': 'Picture 1',
},
{
'src': 'https://i.picsum.photos/id/608/1920/1080.jpg?grayscale&hmac=kkVc8-M3ovbO-sFr02WmRbrHx5YcfWmOtkP8rNF9fO4',
'alt': 'Picture 2',
},
{
'src': 'https://i.picsum.photos/id/1012/1920/1080.jpg?grayscale&hmac=Zy9JmZ_sl88DXTF502k_0QqaeCyqjhkn60DjyE5F8Eo',
'alt': 'Picture 3',
},
{
'src': 'https://i.picsum.photos/id/1004/1920/1080.jpg?grayscale&hmac=48C-T9K-36l8jpzJntPTu40OiDuXflIlG_YB-lQWYZI',
'alt': 'Picture 4',
},
{
'src': 'https://i.picsum.photos/id/244/1920/1080.jpg?grayscale&hmac=lLcfHciI-EqaOIHGB_Gab7OpUjVSmDLw6GOq6B5THak',
'alt': 'Picture 5',
},
]
</script>

8
docs/components/carousel/examples/CarouselSlideExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Carousel :slide="true"></Carousel>
</div>
</template>
<script setup>
import { Carousel } from '../../../../src/index'
</script>

8
docs/components/carousel/examples/CarouselSlideIntervalExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Carousel :slide="true" :slide-interval="1000"></Carousel>
</div>
</template>
<script setup>
import { Carousel } from '../../../../src/index'
</script>

6
src/components/Accordion/Accordion.vue
View File

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

23
src/components/Accordion/AccordionContent.vue
View File

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

55
src/components/Accordion/AccordionHeader.vue
View File

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

24
src/components/Accordion/AccordionPanel.vue
View File

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

34
src/components/Accordion/composables/useAccordionContentClasses.ts
View File

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

43
src/components/Accordion/composables/useAccordionHeaderClasses.ts
View File

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

103
src/components/Carousel/Carousel.vue
View File

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