public/svelte-carousel
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: vulnerable package version usage

Browse Source
This commit is contained in:
Olivers Vītiņš
2024-02-15 20:45:53 +02:00
parent 81165fd872
commit 737bc0c1b0
3 changed files with 4007 additions and 8112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
README.md
View File

@@ -1,73 +1,29 @@
![svelte-carousel](./docs/svelte-carousel-logo-md.png)
# @xxfogs/svelte-carousel
# svelte-carousel
<div align="left">
[![npm](https://img.shields.io/npm/v/svelte-carousel.svg)](https://www.npmjs.com/package/svelte-carousel) [![npm](https://img.shields.io/npm/dm/svelte-carousel.svg)](https://www.npmjs.com/package/svelte-carousel)
<br />
[![GitHub repo](https://img.shields.io/badge/github-repo-green.svg?style=flat)](https://github.com/vadimkorr/svelte-carousel) [![GitHub followers](https://img.shields.io/github/followers/vadimkorr.svg?style=social&label=Follow)](https://github.com/vadimkorr)
</div>
The awesome carousel component for Svelte 3
## Demo
* [vadimkorr.github.io/svelte-carousel](https://vadimkorr.github.io/svelte-carousel)
* [REPL](https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5)
This is a fork of [svelte-carousel](https://github.com/vadimkorr/svelte-carousel) project made due to it's lack of maintainment.
## Installation
```bash
yarn add svelte-carousel
```
```bash
npm install svelte-carousel
yarn add -D @xxfogs/svelte-carousel
```
Import component
```jsx
```bash
pnpm i -D @xxfogs/svelte-carousel
```
```bash
yarn i -D @xxfogs/svelte-carousel
```
## Usage
1. Install as development dependancy
2. Import and use
```svelte
<script>
import Carousel from 'svelte-carousel'
// ...
</script>
```
## SvelteKit support
There are several things to keep in mind when `svelte-carousel` is used with SvelteKit. This is because `svelte-carousel` is a client-side library and depends on `document` and `window`. [See more in SvelteKit FAQ](https://kit.svelte.dev/faq).
1. Install `svelte-carousel` as a dev dependency. [Why as a dev dependency?](https://github.com/sveltejs/sapper-template#using-external-components)
```bash
yarn add svelte-carousel -D
```
```bash
npm install svelte-carousel -D
```
2. Extend `kit` in `svelte.config.js` to include the `vite` property
```js
const config = {
// existing props
kit: {
// existing props
vite: {
optimizeDeps: {
include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']
}
// plugins: []
}
}
}
```
3. Import and use it:
```jsx
<script>
import Carousel from 'svelte-carousel';
import Carousel from '@xxfogs/svelte-carousel';
import { browser } from '$app/environment';
let carousel; // for calling methods of the carousel instance
@@ -90,42 +46,8 @@ const config = {
<button on:click={handleNextClick}>Next</button>
```
## Vite support
1. Extend `optimizeDeps.include` in `vite.config.js`
```js
export default defineConfig({
optimizeDeps: {
include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']
}
})
```
2. Import and use it:
```jsx
<script>
import Carousel from 'svelte-carousel'
let carousel; // for calling methods of the carousel instance
const handleNextClick = () => {
carousel.goToNext()
}
</script>
<Carousel
bind:this={carousel}
>
<div>1</div>
<div>2</div>
<div>3</div>
</Carousel>
<button on:click={handleNextClick}>Next</button>
```
## Props
| Prop | Type | Default | Description |
|---------------------------|------------|-----------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enables next/prev arrows |
@@ -146,13 +68,14 @@ export default defineConfig({
## Events
### `pageChange`
It is dispatched on page change
| Payload field | Type | Description |
|--------------------|-------------|---------------------------------------|
| `event.detail` | `number` | Current page index |
```jsx
```svelte
<Carousel
on:pageChange={
event => console.log(`Current page index: ${event.detail}`)
@@ -165,6 +88,7 @@ It is dispatched on page change
## Slots
### `prev` and `next`
They are used for customizing prev and next buttons.
Slot props:
@@ -174,7 +98,7 @@ Slot props:
| `showPrevPage` | `function` | Call it to switch to the previos page |
| `showNextPage` | `function` | Call it to switch to the next page |
```jsx
```svelte
<Carousel
let:showPrevPage
let:showNextPage
@@ -190,6 +114,7 @@ Slot props:
```
### `dots`
This slot is used for customizing how dots look like.
Slot props:
@@ -200,7 +125,7 @@ Slot props:
| `pagesCount` | `number` | Total pages amount |
| `showPage` | `function` | Takes index as page to be shown |
```jsx
```svelte
<Carousel
let:currentPageIndex
let:pagesCount
@@ -214,6 +139,7 @@ Slot props:
```
### Default slot
This slot takes content for the carousel.
Slot props:
@@ -223,7 +149,7 @@ Slot props:
| `loaded` | `number[]` | Contains indexes of pages to be loaded. Can be used for lazy loading |
| `currentPageIndex` | `number` | Represents current page index (start from 0) |
```jsx
```svelte
<Carousel
let:loaded
>
@@ -237,6 +163,7 @@ Slot props:
## Methods
### `goTo`
Navigates to a page by index. `(pageIndex, options) => Promise<void>`.
Arguments:
@@ -246,7 +173,7 @@ Arguments:
| `pageIndex` | `number` | | Page number |
| `options.animated` | `boolean` | `true` | Should it be animated or not |
```jsx
```svelte
<script>
// ...
let carousel;
@@ -264,6 +191,7 @@ Arguments:
```
### `goToPrev`
Navigates to the previous page. `(options) => Promise<void>`.
Arguments:
@@ -272,7 +200,7 @@ Arguments:
|--------------------|-------------|---------|-------------------------------|
| `options.animated` | `boolean` | `true` | Should it be animated or not |
```jsx
```svelte
<script>
// ...
let carousel;
@@ -290,6 +218,7 @@ Arguments:
```
### `goToNext`
Navigates to the next page. `(options) => Promise<void>`.
Arguments:
@@ -298,7 +227,7 @@ Arguments:
|--------------------|-------------|---------|------------------------------|
| `options.animated` | `boolean` | `true` | Should it be animated or not |
```jsx
```svelte
<script>
// ...
let carousel;

16
package.json
View File

@@ -1,20 +1,20 @@
{
"name": "svelte-carousel",
"version": "1.0.25",
"name": "@xxfogs/svelte-carousel",
"version": "1.0.0",
"description": "Svelte carousel",
"main": "src/main.js",
"module": "src/main.js",
"svelte": "src/main.js",
"author": "vadimkorr",
"author": "xxfogs",
"type": "module",
"repository": {
"type": "git",
"url": "git+https://github.com/vadimkorr/svelte-carousel.git"
"url": "git+https://github.com/xxfogs/svelte-carousel.git"
},
"bugs": {
"url": "https://github.com/vadimkorr/svelte-carousel/issues"
"url": "https://github.com/xxfogs/svelte-carousel/issues"
},
"homepage": "https://github.com/vadimkorr/svelte-carousel#readme",
"homepage": "https://github.com/xxfogs/svelte-carousel#readme",
"keywords": [
"svelte",
"carousel",
@@ -39,9 +39,9 @@
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^11.0.0",
"@storybook/addon-actions": "^6.1.14",
"@storybook/addon-essentials": "^6.1.14",
"@storybook/addon-essentials": "^7.6.16",
"@storybook/addon-links": "^6.1.14",
"@storybook/svelte": "^6.1.14",
"@storybook/svelte": "^7.6.16",
"babel-loader": "^8.2.2",
"jest": "^26.6.3",
"lodash": "^4.17.20",

11964
yarn.lock
View File

File diff suppressed because it is too large Load Diff