From 145b8ab2668d4753f29f17108bec6aa3ddc69fab Mon Sep 17 00:00:00 2001 From: Christian Preston Date: Fri, 22 Mar 2024 15:26:48 -0400 Subject: [PATCH] feat: improve module, composable, and types --- .node-version | 2 +- README.md | 98 +- examples/swiper-basic/app.vue | 189 +- package.json | 22 +- playground/app.vue | 212 +- playground/nuxt.config.ts | 4 + pnpm-lock.yaml | 6236 +++++++++++------ src/module.ts | 47 +- src/runtime/components.d.ts | 27 +- .../{useSwiper.ts => useSwiper.client.ts} | 35 +- src/runtime/plugins/components.client.ts | 17 +- test/fixture.test.ts | 16 +- test/fixtures/basic/app.vue | 32 +- 13 files changed, 4697 insertions(+), 2240 deletions(-) rename src/runtime/composables/{useSwiper.ts => useSwiper.client.ts} (55%) diff --git a/.node-version b/.node-version index 3c03207..209e3ef 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -18 +20 diff --git a/README.md b/README.md index 8170021..6b6d555 100644 --- a/README.md +++ b/README.md @@ -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 + * + * + * * ``` * @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 } ``` @@ -122,25 +138,75 @@ swiper-slide { ``` -## 💻 Development +## Advanced Usage -```sh -# Install dependencies -pnpm install - -# Generate type stubs -pnpm run dev:prepare +```vue + -# Build the playground -pnpm run dev:build + -# Run ESLint -pnpm run lint + ``` +## 💻 Development + +
+ Local development + +- 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` + +
+ ## Credits [`Swiper.js`](https://swiperjs.com/) is developed by [@nolimits4web](https://github.com/nolimits4web). diff --git a/examples/swiper-basic/app.vue b/examples/swiper-basic/app.vue index 39de732..c528530 100644 --- a/examples/swiper-basic/app.vue +++ b/examples/swiper-basic/app.vue @@ -21,6 +21,28 @@ 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], + }, + }, +})