You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

vue-flux

Package Overview
Dependencies
Maintainers
1
Versions
119
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-flux - npm Package Compare versions

Comparing version

7.0.0-alpha.5
to
7.0.0-alpha.6

6

dist/vue-flux.d.ts

@@ -2004,5 +2004,5 @@ import { AllowedComponentProps } from 'vue';

}, {
show: (resourceIndex?: number | Direction, transitionIndex?: number | Direction) => Promise<void>;
play: (resourceIndex?: number | Direction, delay?: number | undefined) => void;
stop: (cancelTransition?: boolean) => void;
show: (resourceIndex: number | Directions | undefined, transitionIndex: number | Directions | undefined) => Promise<void>;
play: (resourceIndex: number | Directions | undefined, delay: number | undefined) => void;
stop: (cancelTransition: boolean | undefined) => void;
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{

@@ -2009,0 +2009,0 @@ options: {

2

package.json
{
"name": "vue-flux",
"type": "module",
"version": "7.0.0-alpha.5",
"version": "7.0.0-alpha.6",
"description": "Vue image slider",

@@ -6,0 +6,0 @@ "author": "ragnar lotus",

154

README.md
## Documentation and demos
**[Version 5 documentation](https://deulos.github.io/vue-flux-docs/v5/)**
**[Version 5 documentation](https://ragnarlotus.github.io/vue-flux-docs/documentation/v5/overview)**
**[Version 6 documentation](https://deulos.github.io/vue-flux-docs/v6/)**
**[Version 6 documentation](https://ragnarlotus.github.io/vue-flux-docs/documentation/v6/overview)**
**[Version 6 demos](https://deulos.github.io/vue-flux-docs/demos/)**
**[Version 7 documentation](https://ragnarlotus.github.io/vue-flux-docs/documentation/v7/overview)**
## Overview
**[Version 7 demos](https://ragnarlotus.github.io/vue-flux-docs/demos/demos)**
This is an image slider developed with [Vuejs](https://vuejs.org/) 2 which comes with 20 cool transitions out of the box.
# Overview
This is an image slider developed with [vue](https://vuejs.org/) 3 which comes with 20 cool transitions out of the box.
![npm](https://img.shields.io/npm/v/vue-flux/latest.svg?style=flat-square)

@@ -17,3 +19,3 @@ ![npm](https://img.shields.io/npm/dt/vue-flux.svg?style=flat-square)

![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/vue-flux/latest.svg?style=flat-square)
![GitHub issues](https://img.shields.io/github/issues-raw/deulos/vue-flux.svg?style=flat-square)
![GitHub issues](https://img.shields.io/github/issues-raw/ragnarlotus/vue-flux.svg?style=flat-square)
![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)

@@ -33,3 +35,3 @@

## Quickstart
## Quick start

@@ -39,74 +41,68 @@ Install and save the package.

``` bash
npm install --save vue-flux
npm install --save vue-flux@latest
```
Add the component to the template. This one has all the complements, so you can remove the ones you don't want.
Add component. This one has all the complements, so you can remove the ones you don't want.
``` html
<vue-flux
:options="vfOptions"
:images="vfImages"
:transitions="vfTransitions"
:captions="vfCaptions"
ref="slider">
<script setup>
import { ref, shallowReactive } from 'vue';
import {
VueFlux,
FluxCaption,
FluxControls,
FluxIndex,
FluxPagination,
FluxPreloader,
Img,
Book,
Zip,
} from 'vue-flux';
import 'vue-flux/style.css';
<template v-slot:preloader>
<flux-preloader />
</template>
const $vueFlux = ref();
<template v-slot:caption>
<flux-caption />
</template>
const vfOptions = shallowReactive({
autoplay: true,
});
<template v-slot:controls>
<flux-controls />
</template>
const vfRscs = shallowReactive([
new Img('URL1' 'img 1'),
new Img('URL2' 'img 2'),
new Img('URL3' 'img 3'),
]);
<template v-slot:pagination>
<flux-pagination />
</template>
const vfTransitions = shallowReactive([Book, Zip]);
</script>
<template v-slot:index>
<flux-index />
</template>
</vue-flux>
<template>
<VueFlux
:options="vfOptions"
:rscs="vfRscs"
:transitions="vfTransitions"
ref="$vueFlux">
<button @click="$refs.slider.show('next')">NEXT</button>
```
<template #preloader="preloaderProps">
<FluxPreloader v-bind="preloaderProps" />
</template>
Add it to the component, and like before you can remove the complements you don't use.
<template #caption="captionProps">
<FluxCaption v-bind="captionProps" />
</template>
``` javascript
import {
VueFlux,
FluxCaption,
FluxControls,
FluxIndex,
FluxPagination,
FluxPreloader,
} from 'vue-flux';
<template #controls="controlsProps">
<FluxControls v-bind="controlsProps" />
</template>
export default {
components: {
VueFlux,
FluxCaption,
FluxControls,
FluxIndex,
FluxPagination,
FluxPreloader,
},
<template #pagination="paginationProps">
<FluxPagination v-bind="paginationProps" />
</template>
data: () => ({
vfOptions: {
autoplay: true
},
vfImages: [ 'URL1', 'URL2', 'URL3' ],
vfTransitions: [ 'fade', 'cube', 'book', 'wave' ],
vfCaptions: [
'Caption for image 1',
'Caption for image 2',
'Caption for image 3',
],
}),
}
<template #index="indexProps">
<FluxIndex v-bind="indexProps" />
</template>
</VueFlux>
<button @click="$vueFlux.show('next')">NEXT</button>
</template>
```

@@ -116,3 +112,3 @@

Weight is about 130KB so is pretty light having only the essential CSS. It also does not require a high end computer as animations are performed with CSS3 hardware acceleration.
Weight is about 60 KB so is pretty light having only the essential CSS. It also does not require a high end computer as animations are performed with CSS3 hardware acceleration.

@@ -130,4 +126,4 @@ ## Included transitions

* Blinds 2D: divides the image in vertical bars that blinds and fades out.
* Blocks 1: the image is splited in blocks that shrink and fade out randomly.
* Blocks 2: the image is splited in blocks that shrink and fade out in wave from a corner to the opposite.
* Blocks 1: the image is split in blocks that shrink and fade out randomly.
* Blocks 2: the image is split in blocks that shrink and fade out in wave from a corner to the opposite.
* Concentric: a concentric effect is performed by rotating the image converted into circles.

@@ -144,3 +140,3 @@ * Warp: a concentric effect is performed by rotating the image converted into circles in alternate direction.

* Blinds 3D: divides the image in vertical bars that blinds 180 deg to form the next image.
* Round 1: the image is splited in blocks that turn 180 deg horizontally to form next image.
* Round 1: the image is split in blocks that turn 180 deg horizontally to form next image.
* Round 2: panels start to round vertically revealing the next image in upper arrow form leaving trail.

@@ -154,5 +150,13 @@ * Explode: the image starts to explode from the center to outside.

``` html
<flux-parallax src="url" style="height: 300px;">
<div>CONTENT</div>
</flux-parallax>
<script setup>
import { FluxParallax, Img } from 'vue-flux';
const rsc = new Img('URL1' 'img 1');
</script>
<template>
<FluxParallax :rsc="rsc" style="height: 300px;">
<div>CONTENT</div>
</FluxParallax>
</template>
```

@@ -162,11 +166,11 @@

If you find yourself running into issues during installation or running the slider, please check our [documentation](https://deulos.github.io/vue-flux-docs/v6/). If still needs help open an [issue](https://github.com/deulos/vue-flux/issues/new). We would be happy to discuss how they can be solved.
If you find yourself running into issues during installation or running the slider, please check our [documentation](https://ragnarlotus.github.io/vue-flux-docs/documentation/v7/overview). If still needs help open an [issue](https://github.com/ragnarlotus/vue-flux/issues/new). I will be happy to discuss how they can be solved.
## Documentation
You can view the full documentation at the project's [documentation](https://deulos.github.io/vue-flux-docs/v6/) with examples and detailed information.
You can view the full documentation at the project's [documentation](https://ragnarlotus.github.io/vue-flux-docs/documentation/v7/overview) with examples and detailed information.
## Changelog
Check the [changelog](https://deulos.github.io/vue-flux-docs/v6/changelog) for update info.
Check the [changelog](https://ragnarlotus.github.io/vue-flux-docs/documentation/v7/changelog) for update info.

@@ -173,0 +177,0 @@ ## Inspiration

dist/vue-flux.js

Sorry, the diff of this file is too big to display

dist/vue-flux.umd.cjs

Sorry, the diff of this file is not supported yet