mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-29 11:20:36 +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.
|
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/).
|
Use the `autoplay` prop as a boolean or an object to configure the [Autoplay plugin](https://www.embla-carousel.com/plugins/autoplay/).
|
||||||
|
|
||||||
::component-example
|
::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.
|
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/).
|
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
|
::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.
|
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/).
|
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
|
::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.
|
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/).
|
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
|
::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**.
|
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/).
|
Use the `fade` prop as a boolean or an object to configure the [Fade plugin](https://www.embla-carousel.com/plugins/fade/).
|
||||||
|
|
||||||
::component-example
|
::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.
|
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/).
|
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
|
::note
|
||||||
|
|||||||
12
package.json
12
package.json
@@ -55,7 +55,13 @@
|
|||||||
"@vueuse/core": "^11.1.0",
|
"@vueuse/core": "^11.1.0",
|
||||||
"@vueuse/integrations": "^11.1.0",
|
"@vueuse/integrations": "^11.1.0",
|
||||||
"defu": "^6.1.4",
|
"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-vue": "^8.3.0",
|
||||||
|
"embla-carousel-wheel-gestures": "^8.0.1",
|
||||||
"fuse.js": "^7.0.0",
|
"fuse.js": "^7.0.0",
|
||||||
"ohash": "^1.1.4",
|
"ohash": "^1.1.4",
|
||||||
"radix-vue": "^1.9.7",
|
"radix-vue": "^1.9.7",
|
||||||
@@ -72,12 +78,6 @@
|
|||||||
"@standard-schema/spec": "1.0.0-beta.1",
|
"@standard-schema/spec": "1.0.0-beta.1",
|
||||||
"@vue/test-utils": "^2.4.6",
|
"@vue/test-utils": "^2.4.6",
|
||||||
"embla-carousel": "^8.3.0",
|
"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",
|
"eslint": "^9.11.1",
|
||||||
"happy-dom": "^15.7.4",
|
"happy-dom": "^15.7.4",
|
||||||
"joi": "^17.13.3",
|
"joi": "^17.13.3",
|
||||||
|
|||||||
36
pnpm-lock.yaml
generated
36
pnpm-lock.yaml
generated
@@ -43,9 +43,27 @@ importers:
|
|||||||
defu:
|
defu:
|
||||||
specifier: ^6.1.4
|
specifier: ^6.1.4
|
||||||
version: 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:
|
embla-carousel-vue:
|
||||||
specifier: ^8.3.0
|
specifier: ^8.3.0
|
||||||
version: 8.3.0(vue@3.5.11(typescript@5.6.2))
|
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:
|
fuse.js:
|
||||||
specifier: ^7.0.0
|
specifier: ^7.0.0
|
||||||
version: 7.0.0
|
version: 7.0.0
|
||||||
@@ -92,24 +110,6 @@ importers:
|
|||||||
embla-carousel:
|
embla-carousel:
|
||||||
specifier: ^8.3.0
|
specifier: ^8.3.0
|
||||||
version: 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:
|
eslint:
|
||||||
specifier: ^9.11.1
|
specifier: ^9.11.1
|
||||||
version: 9.12.0(jiti@2.3.3)
|
version: 9.12.0(jiti@2.3.3)
|
||||||
|
|||||||
Reference in New Issue
Block a user