mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
fix(Carousel): move embla plugins to dependencies
This commit is contained in:
Benjamin Canac
@@ -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
|
||||
|
||||
12
package.json
12
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",
|
||||
|
||||
36
pnpm-lock.yaml
generated
36
pnpm-lock.yaml
generated
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user