New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue3-carousel

Package Overview
Dependencies
Maintainers
0
Versions
78
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-carousel - npm Package Compare versions

Comparing version 0.3.4 to 0.4.0

11

CHANGELOG.md

@@ -5,4 +5,13 @@ # Changelog

## [0.3.4](https://github.com/ismail9k/vue3-carousel/releases/tag/v0.3.3) - 2024-04-02
## [0.4.0](https://github.com/ismail9k/vue3-carousel/releases/tag/v0.4.0) - 2024-10-23
- feat: Stop using Capture phase events (#398) @coofercat
- chore: Export all types (#397) @Tofandel
- fix: Properly prevent click on drag finished (#396) @Tofandel
- docs: update pagination example code to match the component (#395) @Tofandel
- docs: update vitepress to version 1.3.4
- feat: improvements in generating default config
## [0.3.4](https://github.com/ismail9k/vue3-carousel/releases/tag/v0.3.4) - 2024-04-02
- Full support for esm (#373) @Iran-110

@@ -9,0 +18,0 @@

14

dist/carousel.d.ts
import * as vue from 'vue';
import { VNode } from 'vue';
interface Data$1 {
[key: string]: unknown
}
type Breakpoints = { [key: number]: Partial<CarouselConfig> }

@@ -38,2 +42,10 @@

interface CarouselNav {
[key: string]: any
}
interface ElementStyleObject {
[key: string]: any
}
declare const _default$1: vue.DefineComponent<{

@@ -248,2 +260,2 @@ itemsToShow: {

export { _default$1 as Carousel, Icon, Navigation, Pagination, _default as Slide };
export { type Breakpoints, _default$1 as Carousel, type CarouselConfig, type CarouselNav, type Data$1 as Data, type Dir, type ElementStyleObject, type I18nKeys, Icon, Navigation, Pagination, _default as Slide, type SnapAlign };

85

dist/carousel.es.js
/**
* Vue 3 Carousel 0.3.4
* Vue 3 Carousel 0.4.0
* (c) 2024
* @license MIT
*/
import { Fragment, defineComponent, inject, reactive, ref, h, provide, onMounted, nextTick, onUnmounted, computed, watch, cloneVNode } from 'vue';
import { Fragment, defineComponent, inject, reactive, ref, h, provide, computed, onMounted, nextTick, onUnmounted, watch, cloneVNode } from 'vue';
const defaultConfigs = {
const defaultConfig = {
itemsToShow: 1,

@@ -38,3 +38,3 @@ itemsToScroll: 1,

itemsToShow: {
default: defaultConfigs.itemsToShow,
default: defaultConfig.itemsToShow,
type: Number,

@@ -44,3 +44,3 @@ },

itemsToScroll: {
default: defaultConfigs.itemsToScroll,
default: defaultConfig.itemsToScroll,
type: Number,

@@ -50,3 +50,3 @@ },

wrapAround: {
default: defaultConfigs.wrapAround,
default: defaultConfig.wrapAround,
type: Boolean,

@@ -56,3 +56,3 @@ },

throttle: {
default: defaultConfigs.throttle,
default: defaultConfig.throttle,
type: Number,

@@ -62,3 +62,3 @@ },

snapAlign: {
default: defaultConfigs.snapAlign,
default: defaultConfig.snapAlign,
validator(value) {

@@ -71,3 +71,3 @@ // The value must match one of these strings

transition: {
default: defaultConfigs.transition,
default: defaultConfig.transition,
type: Number,

@@ -77,3 +77,3 @@ },

breakpoints: {
default: defaultConfigs.breakpoints,
default: defaultConfig.breakpoints,
type: Object,

@@ -83,3 +83,3 @@ },

autoplay: {
default: defaultConfigs.autoplay,
default: defaultConfig.autoplay,
type: Number,

@@ -89,3 +89,3 @@ },

pauseAutoplayOnHover: {
default: defaultConfigs.pauseAutoplayOnHover,
default: defaultConfig.pauseAutoplayOnHover,
type: Boolean,

@@ -100,3 +100,3 @@ },

mouseDrag: {
default: defaultConfigs.mouseDrag,
default: defaultConfig.mouseDrag,
type: Boolean,

@@ -106,3 +106,3 @@ },

touchDrag: {
default: defaultConfigs.touchDrag,
default: defaultConfig.touchDrag,
type: Boolean,

@@ -112,3 +112,3 @@ },

dir: {
default: defaultConfigs.dir,
default: defaultConfig.dir,
validator(value) {

@@ -121,3 +121,3 @@ // The value must match one of these strings

i18n: {
default: defaultConfigs.i18n,
default: defaultConfig.i18n,
type: Object,

@@ -292,3 +292,3 @@ },

setup() {
const config = inject('config', reactive(Object.assign({}, defaultConfigs)));
const config = inject('config', reactive(Object.assign({}, defaultConfig)));
const currentSlide = inject('currentSlide', ref(0));

@@ -317,7 +317,3 @@ const slidesCount = inject('slidesCount', ref(0));

// current config
const config = reactive(Object.assign({}, defaultConfigs));
// default carousel configs
let __defaultConfig = Object.assign({}, defaultConfigs);
// breakpoints configs
let breakpoints;
const config = reactive(Object.assign({}, defaultConfig));
// slides

@@ -329,4 +325,4 @@ const currentSlideIndex = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : 0);

const minSlideIndex = ref(0);
let autoplayTimer;
let transitionTimer;
let autoplayTimer = null;
let transitionTimer = null;
provide('config', config);

@@ -341,18 +337,13 @@ provide('slidesCount', slidesCount);

*/
function initDefaultConfigs() {
breakpoints = Object.assign({}, props.breakpoints);
__defaultConfig = Object.assign(Object.assign(Object.assign({}, __defaultConfig), props), { i18n: Object.assign(Object.assign({}, __defaultConfig.i18n), props.i18n), breakpoints: undefined });
bindConfigs(__defaultConfig);
}
const breakpoints = computed(() => (Object.assign({}, props.breakpoints)));
const __defaultConfig = computed(() => (Object.assign(Object.assign(Object.assign({}, defaultConfig), props), { i18n: Object.assign(Object.assign({}, defaultConfig.i18n), props.i18n), breakpoints: undefined })));
function updateBreakpointsConfigs() {
if (!breakpoints || !Object.keys(breakpoints).length)
return;
const breakpointsArray = Object.keys(breakpoints)
const breakpointsArray = Object.keys(breakpoints.value || {})
.map((key) => Number(key))
.sort((a, b) => +b - +a);
let newConfig = Object.assign({}, __defaultConfig);
let newConfig = Object.assign({}, __defaultConfig.value);
breakpointsArray.some((breakpoint) => {
const isMatched = window.matchMedia(`(min-width: ${breakpoint}px)`).matches;
if (isMatched) {
newConfig = Object.assign(Object.assign({}, newConfig), breakpoints[breakpoint]);
newConfig = Object.assign(Object.assign({}, newConfig), breakpoints.value[breakpoint]);
}

@@ -444,4 +435,4 @@ return isMatched;

startPosition.y = isTouch ? event.touches[0].clientY : event.clientY;
document.addEventListener(isTouch ? 'touchmove' : 'mousemove', handleDragging, true);
document.addEventListener(isTouch ? 'touchend' : 'mouseup', handleDragEnd, true);
document.addEventListener(isTouch ? 'touchmove' : 'mousemove', handleDragging);
document.addEventListener(isTouch ? 'touchend' : 'mouseup', handleDragEnd);
}

@@ -464,5 +455,6 @@ const handleDragging = throttle((event) => {

const captureClick = (e) => {
window.removeEventListener('click', captureClick, true);
e.preventDefault();
window.removeEventListener('click', captureClick);
};
window.addEventListener('click', captureClick, true);
window.addEventListener('click', captureClick);
}

@@ -473,4 +465,4 @@ slideTo(currentSlideIndex.value - draggedSlides);

isDragging.value = false;
document.removeEventListener(isTouch ? 'touchmove' : 'mousemove', handleDragging, true);
document.removeEventListener(isTouch ? 'touchend' : 'mouseup', handleDragEnd, true);
document.removeEventListener(isTouch ? 'touchmove' : 'mousemove', handleDragging);
document.removeEventListener(isTouch ? 'touchend' : 'mouseup', handleDragEnd);
}

@@ -576,3 +568,2 @@ /**

function restartCarousel() {
initDefaultConfigs();
updateBreakpointsConfigs();

@@ -600,3 +591,2 @@ updateSlidesData();

emit('before-init');
initDefaultConfigs();
const data = {

@@ -618,3 +608,2 @@ config,

updateSlideWidth,
initDefaultConfigs,
restartCarousel,

@@ -694,3 +683,3 @@ slideTo,

const Icon = (props) => {
const config = inject('config', reactive(Object.assign({}, defaultConfigs)));
const config = inject('config', reactive(Object.assign({}, defaultConfig)));
const iconName = String(props.name);

@@ -716,3 +705,3 @@ const iconI18n = `icon${iconName.charAt(0).toUpperCase() + iconName.slice(1)}`;

const { next: slotNext, prev: slotPrev } = slots || {};
const config = inject('config', reactive(Object.assign({}, defaultConfigs)));
const config = inject('config', reactive(Object.assign({}, defaultConfig)));
const maxSlide = inject('maxSlide', ref(1));

@@ -748,3 +737,3 @@ const minSlide = inject('minSlide', ref(1));

const Pagination = () => {
const config = inject('config', reactive(Object.assign({}, defaultConfigs)));
const config = inject('config', reactive(Object.assign({}, defaultConfig)));
const maxSlide = inject('maxSlide', ref(1));

@@ -791,3 +780,3 @@ const minSlide = inject('minSlide', ref(1));

setup(props, { slots }) {
const config = inject('config', reactive(Object.assign({}, defaultConfigs)));
const config = inject('config', reactive(Object.assign({}, defaultConfig)));
const currentSlide = inject('currentSlide', ref(0));

@@ -824,3 +813,3 @@ const slidesToScroll = inject('slidesToScroll', ref(0));

isSliding: isSliding.value,
isVisible: isVisible.value
isVisible: isVisible.value,
}));

@@ -827,0 +816,0 @@ };

83

dist/carousel.js
/**
* Vue 3 Carousel 0.3.4
* Vue 3 Carousel 0.4.0
* (c) 2024

@@ -12,3 +12,3 @@ * @license MIT

const defaultConfigs = {
const defaultConfig = {
itemsToShow: 1,

@@ -43,3 +43,3 @@ itemsToScroll: 1,

itemsToShow: {
default: defaultConfigs.itemsToShow,
default: defaultConfig.itemsToShow,
type: Number,

@@ -49,3 +49,3 @@ },

itemsToScroll: {
default: defaultConfigs.itemsToScroll,
default: defaultConfig.itemsToScroll,
type: Number,

@@ -55,3 +55,3 @@ },

wrapAround: {
default: defaultConfigs.wrapAround,
default: defaultConfig.wrapAround,
type: Boolean,

@@ -61,3 +61,3 @@ },

throttle: {
default: defaultConfigs.throttle,
default: defaultConfig.throttle,
type: Number,

@@ -67,3 +67,3 @@ },

snapAlign: {
default: defaultConfigs.snapAlign,
default: defaultConfig.snapAlign,
validator(value) {

@@ -76,3 +76,3 @@ // The value must match one of these strings

transition: {
default: defaultConfigs.transition,
default: defaultConfig.transition,
type: Number,

@@ -82,3 +82,3 @@ },

breakpoints: {
default: defaultConfigs.breakpoints,
default: defaultConfig.breakpoints,
type: Object,

@@ -88,3 +88,3 @@ },

autoplay: {
default: defaultConfigs.autoplay,
default: defaultConfig.autoplay,
type: Number,

@@ -94,3 +94,3 @@ },

pauseAutoplayOnHover: {
default: defaultConfigs.pauseAutoplayOnHover,
default: defaultConfig.pauseAutoplayOnHover,
type: Boolean,

@@ -105,3 +105,3 @@ },

mouseDrag: {
default: defaultConfigs.mouseDrag,
default: defaultConfig.mouseDrag,
type: Boolean,

@@ -111,3 +111,3 @@ },

touchDrag: {
default: defaultConfigs.touchDrag,
default: defaultConfig.touchDrag,
type: Boolean,

@@ -117,3 +117,3 @@ },

dir: {
default: defaultConfigs.dir,
default: defaultConfig.dir,
validator(value) {

@@ -126,3 +126,3 @@ // The value must match one of these strings

i18n: {
default: defaultConfigs.i18n,
default: defaultConfig.i18n,
type: Object,

@@ -297,3 +297,3 @@ },

setup() {
const config = vue.inject('config', vue.reactive(Object.assign({}, defaultConfigs)));
const config = vue.inject('config', vue.reactive(Object.assign({}, defaultConfig)));
const currentSlide = vue.inject('currentSlide', vue.ref(0));

@@ -322,7 +322,3 @@ const slidesCount = vue.inject('slidesCount', vue.ref(0));

// current config
const config = vue.reactive(Object.assign({}, defaultConfigs));
// default carousel configs
let __defaultConfig = Object.assign({}, defaultConfigs);
// breakpoints configs
let breakpoints;
const config = vue.reactive(Object.assign({}, defaultConfig));
// slides

@@ -334,4 +330,4 @@ const currentSlideIndex = vue.ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : 0);

const minSlideIndex = vue.ref(0);
let autoplayTimer;
let transitionTimer;
let autoplayTimer = null;
let transitionTimer = null;
vue.provide('config', config);

@@ -346,18 +342,13 @@ vue.provide('slidesCount', slidesCount);

*/
function initDefaultConfigs() {
breakpoints = Object.assign({}, props.breakpoints);
__defaultConfig = Object.assign(Object.assign(Object.assign({}, __defaultConfig), props), { i18n: Object.assign(Object.assign({}, __defaultConfig.i18n), props.i18n), breakpoints: undefined });
bindConfigs(__defaultConfig);
}
const breakpoints = vue.computed(() => (Object.assign({}, props.breakpoints)));
const __defaultConfig = vue.computed(() => (Object.assign(Object.assign(Object.assign({}, defaultConfig), props), { i18n: Object.assign(Object.assign({}, defaultConfig.i18n), props.i18n), breakpoints: undefined })));
function updateBreakpointsConfigs() {
if (!breakpoints || !Object.keys(breakpoints).length)
return;
const breakpointsArray = Object.keys(breakpoints)
const breakpointsArray = Object.keys(breakpoints.value || {})
.map((key) => Number(key))
.sort((a, b) => +b - +a);
let newConfig = Object.assign({}, __defaultConfig);
let newConfig = Object.assign({}, __defaultConfig.value);
breakpointsArray.some((breakpoint) => {
const isMatched = window.matchMedia(`(min-width: ${breakpoint}px)`).matches;
if (isMatched) {
newConfig = Object.assign(Object.assign({}, newConfig), breakpoints[breakpoint]);
newConfig = Object.assign(Object.assign({}, newConfig), breakpoints.value[breakpoint]);
}

@@ -449,4 +440,4 @@ return isMatched;

startPosition.y = isTouch ? event.touches[0].clientY : event.clientY;
document.addEventListener(isTouch ? 'touchmove' : 'mousemove', handleDragging, true);
document.addEventListener(isTouch ? 'touchend' : 'mouseup', handleDragEnd, true);
document.addEventListener(isTouch ? 'touchmove' : 'mousemove', handleDragging);
document.addEventListener(isTouch ? 'touchend' : 'mouseup', handleDragEnd);
}

@@ -469,5 +460,6 @@ const handleDragging = throttle((event) => {

const captureClick = (e) => {
window.removeEventListener('click', captureClick, true);
e.preventDefault();
window.removeEventListener('click', captureClick);
};
window.addEventListener('click', captureClick, true);
window.addEventListener('click', captureClick);
}

@@ -478,4 +470,4 @@ slideTo(currentSlideIndex.value - draggedSlides);

isDragging.value = false;
document.removeEventListener(isTouch ? 'touchmove' : 'mousemove', handleDragging, true);
document.removeEventListener(isTouch ? 'touchend' : 'mouseup', handleDragEnd, true);
document.removeEventListener(isTouch ? 'touchmove' : 'mousemove', handleDragging);
document.removeEventListener(isTouch ? 'touchend' : 'mouseup', handleDragEnd);
}

@@ -581,3 +573,2 @@ /**

function restartCarousel() {
initDefaultConfigs();
updateBreakpointsConfigs();

@@ -605,3 +596,2 @@ updateSlidesData();

emit('before-init');
initDefaultConfigs();
const data = {

@@ -623,3 +613,2 @@ config,

updateSlideWidth,
initDefaultConfigs,
restartCarousel,

@@ -699,3 +688,3 @@ slideTo,

const Icon = (props) => {
const config = vue.inject('config', vue.reactive(Object.assign({}, defaultConfigs)));
const config = vue.inject('config', vue.reactive(Object.assign({}, defaultConfig)));
const iconName = String(props.name);

@@ -721,3 +710,3 @@ const iconI18n = `icon${iconName.charAt(0).toUpperCase() + iconName.slice(1)}`;

const { next: slotNext, prev: slotPrev } = slots || {};
const config = vue.inject('config', vue.reactive(Object.assign({}, defaultConfigs)));
const config = vue.inject('config', vue.reactive(Object.assign({}, defaultConfig)));
const maxSlide = vue.inject('maxSlide', vue.ref(1));

@@ -753,3 +742,3 @@ const minSlide = vue.inject('minSlide', vue.ref(1));

const Pagination = () => {
const config = vue.inject('config', vue.reactive(Object.assign({}, defaultConfigs)));
const config = vue.inject('config', vue.reactive(Object.assign({}, defaultConfig)));
const maxSlide = vue.inject('maxSlide', vue.ref(1));

@@ -796,3 +785,3 @@ const minSlide = vue.inject('minSlide', vue.ref(1));

setup(props, { slots }) {
const config = vue.inject('config', vue.reactive(Object.assign({}, defaultConfigs)));
const config = vue.inject('config', vue.reactive(Object.assign({}, defaultConfig)));
const currentSlide = vue.inject('currentSlide', vue.ref(0));

@@ -829,3 +818,3 @@ const slidesToScroll = vue.inject('slidesToScroll', vue.ref(0));

isSliding: isSliding.value,
isVisible: isVisible.value
isVisible: isVisible.value,
}));

@@ -832,0 +821,0 @@ };

4

package.json
{
"name": "vue3-carousel",
"version": "0.3.4",
"version": "0.4.0",
"type": "module",

@@ -66,3 +66,3 @@ "scripts": {

"typescript": "^5.4.3",
"vitepress": "^1.0.2",
"vitepress": "^1.3.4",
"vue": "^3.2.0",

@@ -69,0 +69,0 @@ "vue-jest": "^3.0.7"

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc