From bee04adf4cc4fd6d69e93ad94500f5ef604405e7 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Wed, 9 Oct 2024 15:10:22 +0200 Subject: [PATCH] fix(Carousel): move embla plugins to `dependencies` --- docs/content/3.components/carousel.md | 150 -------------------------- package.json | 12 +-- pnpm-lock.yaml | 36 +++---- 3 files changed, 24 insertions(+), 174 deletions(-) diff --git a/docs/content/3.components/carousel.md b/docs/content/3.components/carousel.md index 08420dff..0556543e 100644 --- a/docs/content/3.components/carousel.md +++ b/docs/content/3.components/carousel.md @@ -126,31 +126,6 @@ The Carousel component implements the official [Embla Carousel plugins](https:// This plugin is used to extend Embla Carousel with **autoplay** functionality. -::warning -Install the `embla-carousel-autoplay` package: - -::code-group - -```bash [pnpm] -pnpm add embla-carousel-autoplay -``` - -```bash [yarn] -yarn add embla-carousel-autoplay -``` - -```bash [npm] -npm install embla-carousel-autoplay -``` - -```bash [bun] -bun add embla-carousel-autoplay -``` - -:: - -:: - Use the `autoplay` prop as a boolean or an object to configure the [Autoplay plugin](https://www.embla-carousel.com/plugins/autoplay/). ::component-example @@ -168,31 +143,6 @@ In this example, we're using the `loop` prop for an infinite carousel. This plugin is used to extend Embla Carousel with **auto scroll** functionality. -::warning -Install the `embla-carousel-auto-scroll` package: - -::code-group - -```bash [pnpm] -pnpm add embla-carousel-auto-scroll -``` - -```bash [yarn] -yarn add embla-carousel-auto-scroll -``` - -```bash [npm] -npm install embla-carousel-auto-scroll -``` - -```bash [bun] -bun add embla-carousel-auto-scroll -``` - -:: - -:: - Use the `auto-scroll` prop as a boolean or an object to configure the [Auto Scroll plugin](https://www.embla-carousel.com/plugins/auto-scroll/). ::component-example @@ -210,31 +160,6 @@ In this example, we're using the `loop` prop for an infinite carousel. This plugin is used to extend Embla Carousel with **auto height** functionality. It changes the height of the carousel container to fit the height of the highest slide in view. -::warning -Install the `embla-carousel-auto-height` package: - -::code-group - -```bash [pnpm] -pnpm add embla-carousel-auto-height -``` - -```bash [yarn] -yarn add embla-carousel-auto-height -``` - -```bash [npm] -npm install embla-carousel-auto-height -``` - -```bash [bun] -bun add embla-carousel-auto-height -``` - -:: - -:: - Use the `auto-height` prop as a boolean or an object to configure the [Auto Height plugin](https://www.embla-carousel.com/plugins/auto-height/). ::component-example @@ -252,31 +177,6 @@ In this example, we add the `transition-[height]` class on the container to anim Class Names is a **class name toggle** utility plugin for Embla Carousel that enables you to automate the toggling of class names on your carousel. -::warning -Install the `embla-carousel-class-names` package: - -::code-group - -```bash [pnpm] -pnpm add embla-carousel-class-names -``` - -```bash [yarn] -yarn add embla-carousel-class-names -``` - -```bash [npm] -npm install embla-carousel-class-names -``` - -```bash [bun] -bun add embla-carousel-class-names -``` - -:: - -:: - Use the `class-names` prop as a boolean or an object to configure the [Class Names plugin](https://www.embla-carousel.com/plugins/class-names/). ::component-example @@ -294,31 +194,6 @@ In this example, we add the `transition-opacity [&:not(.is-snapped)]:opacity-10` This plugin is used to replace the Embla Carousel scroll functionality with **fade transitions**. -::warning -Install the `embla-carousel-fade` package: - -::code-group - -```bash [pnpm] -pnpm add embla-carousel-fade -``` - -```bash [yarn] -yarn add embla-carousel-fade -``` - -```bash [npm] -npm install embla-carousel-fade -``` - -```bash [bun] -bun add embla-carousel-fade -``` - -:: - -:: - Use the `fade` prop as a boolean or an object to configure the [Fade plugin](https://www.embla-carousel.com/plugins/fade/). ::component-example @@ -332,31 +207,6 @@ class: 'p-8 pb-12' This plugin is used to extend Embla Carousel with the ability to **use the mouse/trackpad wheel** to navigate the carousel. -::warning -Install the `embla-carousel-wheel-gestures` package: - -::code-group - -```bash [pnpm] -pnpm add embla-carousel-wheel-gestures -``` - -```bash [yarn] -yarn add embla-carousel-wheel-gestures -``` - -```bash [npm] -npm install embla-carousel-wheel-gestures -``` - -```bash [bun] -bun add embla-carousel-wheel-gestures -``` - -:: - -:: - Use the `wheel-gestures` prop as a boolean or an object to configure the [Wheel Gestures plugin](https://www.embla-carousel.com/plugins/wheel-gestures/). ::note diff --git a/package.json b/package.json index 92dd4336..42a72d97 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,13 @@ "@vueuse/core": "^11.1.0", "@vueuse/integrations": "^11.1.0", "defu": "^6.1.4", + "embla-carousel-auto-height": "^8.3.0", + "embla-carousel-auto-scroll": "^8.3.0", + "embla-carousel-autoplay": "^8.3.0", + "embla-carousel-class-names": "^8.3.0", + "embla-carousel-fade": "^8.3.0", "embla-carousel-vue": "^8.3.0", + "embla-carousel-wheel-gestures": "^8.0.1", "fuse.js": "^7.0.0", "ohash": "^1.1.4", "radix-vue": "^1.9.7", @@ -72,12 +78,6 @@ "@standard-schema/spec": "1.0.0-beta.1", "@vue/test-utils": "^2.4.6", "embla-carousel": "^8.3.0", - "embla-carousel-auto-height": "^8.3.0", - "embla-carousel-auto-scroll": "^8.3.0", - "embla-carousel-autoplay": "^8.3.0", - "embla-carousel-class-names": "^8.3.0", - "embla-carousel-fade": "^8.3.0", - "embla-carousel-wheel-gestures": "^8.0.1", "eslint": "^9.11.1", "happy-dom": "^15.7.4", "joi": "^17.13.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c234d89e..b072faf6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -43,9 +43,27 @@ importers: defu: specifier: ^6.1.4 version: 6.1.4 + embla-carousel-auto-height: + specifier: ^8.3.0 + version: 8.3.0(embla-carousel@8.3.0) + embla-carousel-auto-scroll: + specifier: ^8.3.0 + version: 8.3.0(embla-carousel@8.3.0) + embla-carousel-autoplay: + specifier: ^8.3.0 + version: 8.3.0(embla-carousel@8.3.0) + embla-carousel-class-names: + specifier: ^8.3.0 + version: 8.3.0(embla-carousel@8.3.0) + embla-carousel-fade: + specifier: ^8.3.0 + version: 8.3.0(embla-carousel@8.3.0) embla-carousel-vue: specifier: ^8.3.0 version: 8.3.0(vue@3.5.11(typescript@5.6.2)) + embla-carousel-wheel-gestures: + specifier: ^8.0.1 + version: 8.0.1(embla-carousel@8.3.0) fuse.js: specifier: ^7.0.0 version: 7.0.0 @@ -92,24 +110,6 @@ importers: embla-carousel: specifier: ^8.3.0 version: 8.3.0 - embla-carousel-auto-height: - specifier: ^8.3.0 - version: 8.3.0(embla-carousel@8.3.0) - embla-carousel-auto-scroll: - specifier: ^8.3.0 - version: 8.3.0(embla-carousel@8.3.0) - embla-carousel-autoplay: - specifier: ^8.3.0 - version: 8.3.0(embla-carousel@8.3.0) - embla-carousel-class-names: - specifier: ^8.3.0 - version: 8.3.0(embla-carousel@8.3.0) - embla-carousel-fade: - specifier: ^8.3.0 - version: 8.3.0(embla-carousel@8.3.0) - embla-carousel-wheel-gestures: - specifier: ^8.0.1 - version: 8.0.1(embla-carousel@8.3.0) eslint: specifier: ^9.11.1 version: 9.12.0(jiti@2.3.3)