@loickit-v/swiper/README.md

loickit swiper components for vue

# @loickit-v/swiper

[中文](./README-zh.md)

## Components

### LSlide
The Slide Component  
#### Props
-   `name`  
    A unique identifier for the slide, which should be obtained via `defineSlide`.  
-   `list <Array>`  
    Only takes effect in `infinite` mode; enables automatic cached rendering.  
-   `loadMore <Function>`  
    Only takes effect in `infinite` mode; triggered when the sliding pointer reaches the end of the list.  


### LSlideItem
The Slide Item Component  
#### Props
-   `index <number>` _optional_  
    Must be passed in `infinite` mode, used for dynamic rendering calculations.  


## Hooks

### `defineSlide`
Defines a slide  

**Parameters**:  
-   `provideKey <string>`  
    Sets a unique identifier for the current slide.  

**Returns**:  
`[createSlide, useSlide]`  

-   `createSlide`  
    Creates a slide state; its return value is used to register the `l-slide` component.  

    **Parameters**:  
    -   `initial <SlideState>`  
    -   `direction <SLIDE_DIRECTION>` _optional_  
        Sliding direction  
        Default value: SLIDE_DIRECTION.HORIZONTAL  
    -   `currentIndex <number>` _optional_  
        Pointer  
        Default value: 0  
    -   `duration <number>` _optional_  
        Animation duration for slide switching  
        Default value: 300 (ms)  
    -   `infinite <boolean>` _optional_  
        Whether to enable infinite mode  
        Default value: false  

    **Returns**:  
    -   `name`  
        A unique identifier for the slide, which should be assigned to the `name` prop of `l-slide`.  
    -   `state <SlideState>`  
        The slide state  

-   `useSlide`  
    **Returns**: `<SlideState>`  
    Use it to get the current slide state in any child component.  


## Slot
**default**  
-   `cacheList`  
    Only takes effect in `infinite` mode; caches the list data.  


## Usage

```vue
<script setup lang="ts">
import {
    defineSlide,
    LSlide,
    LSlideItem,
    SLIDE_DIRECTION,
    type SlideSwitchEvent
} from '@loickit-v/swiper';
import '@loickit-v/swiper/style';
import { reactive } from 'vue';

const handleSwitch = (value: SlideSwitchEvent) => {
    console.log(value);
};

const [createSlide] = defineSlide('one');
const oneSlide = createSlide({
    currentIndex: 1
});

const [createSlide2] = defineSlide('two');
const twoSlide = createSlide2({
    direction: SLIDE_DIRECTION.VERTICAL
});
const oneToTwo = () => {
    oneSlide.state.currentIndex = 1;
};
const list = reactive([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]);
const onLoadMore = () => {
    list.push({ id: list[list.length - 1].id + 1 });
};
</script>

<template>
    <div style="position: fixed; bottom: 0; left: 0; z-index: 999">
        <p>one currentIndex: {{ oneSlide.state.currentIndex }}</p>
        <p>two currentIndex: {{ twoSlide.state.currentIndex }}</p>

        <button @click="oneToTwo">click to two "HORIZONTAL-2"</button>
    </div>
    <LSlide :name="oneSlide.name" @switch="handleSwitch">
        <LSlideItem style="background-color: red; width: 30%">
            <h1>HORIZONTAL-1</h1>
        </LSlideItem>
        <LSlideItem style="background-color: blue">
            <h1>HORIZONTAL-2</h1>
        </LSlideItem>
        <LSlideItem style="background-color: green">
            <LSlide
                infinite
                :name="twoSlide.name"
                :list="list"
                :load-more="onLoadMore"
                @switch="handleSwitch"
            >
                <template #="{ cacheList }">
                    <LSlideItem
                        v-for="(item, idx) in cacheList"
                        :key="item.id"
                        :index="idx"
                    >
                        <h1>INFINITE-VERTICAL</h1>
                        <h2>{{ item.id }}</h2>
                    </LSlideItem>
                </template>
            </LSlide>
        </LSlideItem>
    </LSlide>
</template>

<style lang="scss">
body,
#app {
    background-color: #ccc;
    height: 800px;
    width: 800px;
}
</style>
```