Skip to content

Commit

Permalink
feat: improve module, composable, and types
Browse files Browse the repository at this point in the history
  • Loading branch information
@cpreston321
cpreston321 committed Mar 22, 2024
1 parent 5a95dcf commit 145b8ab
Show file tree
Hide file tree
Showing 13 changed files with 4,697 additions and 2,240 deletions.
2 changes: 1 addition & 1 deletion .node-version
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
18
20
98 changes: 82 additions & 16 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,16 +58,32 @@ export default defineNuxtConfig({
export interface ModuleOptions {
/**
* Enable custom Swiper composables to help you access Swiper instance.
* @example ```ts
* // Access Swiper instance
* @example ```vue
* <script setup>
* const swiperRef = ref<null>(null)
* const swiper = useSwiper(swiperRef)
* const swiper = useSwiper(swiperRef, { loop: true, autoplay: { delay: 5000 })
*
* const next = () => swiper.next()
* </script>
*
* <template>
* <swiper-container ref="swiperRef" :init="false">
* <swiper-slide>Slide 1</swiper-slide>
* <swiper-slide>Slide 2</swiper-slide>
* </swiper-container>
* </template>
* ```
* @default true
*/
enableComposables?: boolean

/**
* Bundle Swiper custom elements.
* if disabled, you need to import swiper css and modules manually.
* @see https://swiperjs.com/element#core-version--modules
* @default true
*/
bundled?: boolean
}
```

Expand Down Expand Up @@ -122,25 +138,75 @@ swiper-slide {
</style>
```

## 💻 Development
## Advanced Usage

```sh
# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare
```vue
<script setup lang="ts">
const containerRef = ref(null)
const slides = ref(Array.from({ length: 10 }))
const swiper = useSwiper(containerRef, {
effect: 'creative',
loop: true,
autoplay: {
delay: 5000,
},
creativeEffect: {
prev: {
shadow: true,
translate: [0, 0, -400],
},
next: {
shadow: true,
translate: [0, 0, -400],
},
},
})
# Develop with the playground
pnpm run dev
onMounted(() => {
console.log(swiper.instance)
})
</script>
# Build the playground
pnpm run dev:build
<template>
<swiper-container ref="containerRef" :init="false">
<swiper-slide
v-for="(slide, idx) in slides"
:key="idx"
style="background-color: rgb(32, 233, 70); color: white;"
>
Slide {{ idx + 1 }}
</swiper-slide>
</swiper-container>
</template>
# Run ESLint
pnpm run lint
<style lang="css">
swiper-slide {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
height: 20vh;
font-size: 4rem;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
</style>
```

## 💻 Development

<details>
<summary>Local development</summary>

- Clone this repository
- Install the latest LTS version of [Node.js](https://nodejs.org/en/)
- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
- Install dependencies using `pnpm install`
- Generate type stubs using `pnpm dev:prepare`
- Run tests using `pnpm dev`

</details>

## Credits

[`Swiper.js`](https://swiperjs.com/) is developed by [@nolimits4web](https://github.com/nolimits4web).
Expand Down
189 changes: 99 additions & 90 deletions examples/swiper-basic/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,26 +21,50 @@ const slides = ref(
const swiperBasicRef = ref(null)
const swiperCreativeRef = ref(null)
const swiper1 = useSwiper(swiperBasicRef)
/**
* Pass in options to the useSwiper hook to customize the swiper instance
* then automatically bind the swiper instance to the ref
*/
useSwiper(swiperCreativeRef, {
effect: 'creative',
autoplay: {
delay: 8000,
disableOnInteraction: true,
},
creativeEffect: {
prev: {
translate: ['-125%', 0, -800],
rotate: [0, 0, -90],
},
next: {
translate: ['125%', 0, -800],
rotate: [0, 0, 90],
},
},
})
</script>

<template>
<main>
<div class="swiper-wrapper">
<h2>Basic</h2>
<div class="swiper-wrapper__inner">
<swiper-container
class="swiper-basic"
:loop="true"
>
<swiper-slide
v-for="slide in slides"
:key="`slide-basic-${slide.id}`"
class="swiper-slide"
:style="`background-color: ${slide.bg}; color: ${slide.color};`"
<ClientOnly>
<swiper-container
class="swiper-basic"
:loop="true"
>
{{ slide.id }}
</swiper-slide>
</swiper-container>
<swiper-slide
v-for="slide in slides"
:key="`slide-basic-${slide.id}`"
class="swiper-slide"
:style="`background-color: ${slide.bg}; color: ${slide.color};`"
>
{{ slide.id }}
</swiper-slide>
</swiper-container>
</ClientOnly>
</div>
</div>

Expand All @@ -50,98 +74,83 @@ const swiper1 = useSwiper(swiperBasicRef)
<div
class="swiper-wrapper__inner"
>
<swiper-container
ref="swiperBasicRef"
class="swiper-basic"
:loop="true"
>
<div slot="container-start">
Slot component before wrapper
</div>
<div slot="container-end">
Slot component after wrapper
</div>
<swiper-slide
v-for="slide in slides"
:key="`slide-basic-${slide.id}`"
class="swiper-slide"
:style="`background-color: ${slide.bg}; color: ${slide.color};`"
<ClientOnly>
<swiper-container
ref="swiperBasicRef"
class="swiper-basic"
:loop="true"
>
{{ slide.id }}
</swiper-slide>
</swiper-container>

<div class="swiper-basic-buttons">
<button @click="swiper1.prev()">
Prev
</button>
<button @click="swiper1.next()">
Next
</button>
</div>
<div slot="container-start">
Slot component before wrapper
</div>
<div slot="container-end">
Slot component after wrapper
</div>
<swiper-slide
v-for="slide in slides"
:key="`slide-basic-${slide.id}`"
class="swiper-slide"
:style="`background-color: ${slide.bg}; color: ${slide.color};`"
>
{{ slide.id }}
</swiper-slide>
</swiper-container>

<div class="swiper-basic-buttons">
<button @click="swiper1.prev()">
Prev
</button>
<button @click="swiper1.next()">
Next
</button>
</div>
</ClientOnly>
</div>
</div>

<div class="swiper-wrapper">
<h2>Creative Effect (NOT WORKING ATM)</h2>
<h2>Creative Effect</h2>
<div class="swiper-wrapper__inner">
<swiper-container
ref="swiperCreativeRef"
class="swiper-creative"
:loop="true"
effect="creative"
:creative-effect.prop="{
prev: {
shadow: true,
translate: ['-125%', 0, -800],
rotate: [0, 0, -90],
},
next: {
shadow: true,
translate: ['125%', 0, -800],
rotate: [0, 0, 90],
},
}"
:autoplay="{
delay: 8000,
disableOnInteraction: true,
}"
>
<swiper-slide
v-for="slide in slides"
:key="`slide-creative-${slide.id}`"
class="swiper-slide"
:style="`background-color: ${slide.bg}; color: ${slide.color};`"
>
{{ slide.id }}
</swiper-slide>
</swiper-container>
<ClientOnly>
<swiper-container ref="swiperCreativeRef" class="swiper-creative" :loop="true" :init="false">
<swiper-slide
v-for="slide in slides"
:key="`slide-creative-${slide.id}`"
class="swiper-slide"
:style="`background-color: ${slide.bg}; color: ${slide.color};`"
>
{{ slide.id }}
</swiper-slide>
</swiper-container>
</ClientOnly>
</div>
</div>

<div class="swiper-wrapper">
<h2>Card Effect</h2>

<div class="swiper-wrapper__inner">
<swiper-container
class="swiper-cards"
:width="240"
:slides-per-view="1"
:loop="true"
effect="cards"
:autoplay="{
delay: 8000,
disableOnInteraction: true,
}"
>
<swiper-slide
v-for="slide in slides"
:key="`slide-card-${slide.id}`"
:style="`background-color: ${slide.bg}; color: ${slide.color};`"
<ClientOnly>
<swiper-container
class="swiper-cards"
:width="240"
:slides-per-view="1"
:loop="true"
effect="cards"
:autoplay="{
delay: 8000,
disableOnInteraction: true,
}"
>
{{ slide.id }}
</swiper-slide>
</swiper-container>
<swiper-slide
v-for="slide in slides"
:key="`slide-card-${slide.id}`"
:style="`background-color: ${slide.bg}; color: ${slide.color};`"
>
{{ slide.id }}
</swiper-slide>
</swiper-container>
</ClientOnly>
</div>
</div>
</main>
Expand Down
22 changes: 11 additions & 11 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "nuxt-swiper",
"type": "module",
"version": "2.0.0-0",
"packageManager": "pnpm@8.12.1",
"packageManager": "pnpm@8.15.5",
"author": {
"name": "cpreston321 <https://christianpreston.com>",
"url": "https://github.com/cpreston321"
Expand Down Expand Up @@ -46,18 +46,18 @@
"cleanup": "npx rimraf node_modules dist .nuxt **/node_modules/** **/.nuxt/**"
},
"dependencies": {
"@nuxt/kit": "^3.8.2",
"swiper": "^11.0.5"
"@nuxt/kit": "^3.11.1",
"swiper": "^11.0.7"
},
"devDependencies": {
"@antfu/eslint-config": "^2.4.6",
"@nuxt/module-builder": "^0.5.4",
"@nuxt/test-utils": "^3.9.0",
"eslint": "^8.56.0",
"nuxt": "^3.8.2",
"release-it": "^17.0.1",
"typescript": "^5.3.3",
"vitest": "^1.1.0"
"@antfu/eslint-config": "^2.9.0",
"@nuxt/module-builder": "^0.5.5",
"@nuxt/test-utils": "^3.12.0",
"eslint": "^8.57.0",
"nuxt": "^3.11.1",
"release-it": "^17.1.1",
"typescript": "^5.4.3",
"vitest": "^1.4.0"
},
"release-it": {
"git": {
Expand Down

0 comments on commit 145b8ab

Please sign in to comment.