vue3-marquee-slider - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/vue3-marquee-slider.es.js

@@ -1,10 +0,10 @@
-import { ref as o, computed as W, onMounted as w, useCssModule as M, openBlock as b, createElementBlock as x, normalizeClass as m, createElementVNode as u, normalizeStyle as I, unref as N, renderSlot as B } from "vue";
-const k = "_marqueeSlider_owl00_3", E = "_marqueeSliderContainer_owl00_11", F = "_animation_owl00_1", V = {
+import { ref as a, computed as W, onMounted as M, useCssModule as b, openBlock as x, createElementBlock as I, normalizeClass as m, createElementVNode as u, normalizeStyle as N, unref as w, renderSlot as B } from "vue";
+const k = "_marqueeSlider_1enfg_3", E = "_marqueeSliderContainer_1enfg_11", F = "_animation_1enfg_1", V = {
   marqueeSlider: k,
   marqueeSliderContainer: E,
   animation: F
-}, j = (a, t) => {
-  const r = a.__vccOpts || a;
-  for (const [s, n] of t)
-    r[s] = n;
+}, j = (o, t) => {
+  const r = o.__vccOpts || o;
+  for (const [l, n] of t)
+    r[l] = n;
   return r;
@@ -48,19 +48,19 @@ }, z = ["id"], L = /* @__PURE__ */ u("div", null, "Hello", -1), O = /* @__PURE__ */ u("div", null, "From", -1), R = /* @__PURE__ */ u("div", null, "MarqueeSlider", -1), H = {
   },
-  setup(a) {
-    const t = a;
-    var r = o(null), s = o(0), n = o([]), l = o(0), d = o([]), c = o(null);
+  setup(o) {
+    const t = o;
+    var r = a(null), l = a(0), n = a([]), s = a(0), d = a([]), c = a(null);
     const p = W(
       () => `
-        animation-duration: ${t.speed}ms;
-        animation-direction: ${t.reverse ? "reverse" : "normal"};
-        animation-play-state: ${t.paused ? "paused" : "running"};
-      `
+      animation-duration: ${t.speed}ms;
+      animation-direction: ${t.reverse ? "reverse" : "normal"};
+      animation-play-state: ${t.paused ? "paused" : "running"};
+    `
     );
-    w(() => {
-      c = M(), $(), _(), v(), f(), g(), h();
+    M(() => {
+      c = b(), C(), _(), v(), f(), $(), h();
     });
     function f() {
-      for (let e = 0; e < l; e++)
-        d.value.push(n[e].offsetWidth), S(e), t.autoWidth ? C(e) : q(e);
-      s = d.value.reduce((e, i) => e + i, 0);
+      for (let e = 0; e < s; e++)
+        d.value.push(n[e].offsetWidth), S(e), t.autoWidth ? q(e) : g(e);
+      l = d.value.reduce((e, i) => e + i, 0);
     }
@@ -79,3 +79,3 @@ function h() {
     function v() {
-      l = n.length;
+      s = n.length;
     }
@@ -85,9 +85,9 @@ function S(e) {
     }
-    function q(e) {
+    function g(e) {
       n[e].style.minWidth = `${t.width}px`;
     }
-    function C(e) {
+    function q(e) {
       n[e].style.objectFit = "contain";
     }
-    function $() {
+    function C() {
       r = document.querySelector(
@@ -97,7 +97,7 @@ `#${t.id} .${c.marqueeSliderContainer}`
     }
-    function g() {
-      t.autoWidth ? r.style.width = `${l * (s / l + t.space)}px` : r.style.width = `${l * (t.width + t.space)}px`;
+    function $() {
+      t.autoWidth ? r.style.width = `${s * (l / s + t.space)}px` : r.style.width = `${s * (t.width + t.space)}px`;
     }
-    return (e, i) => (b(), x("div", {
-      id: a.id,
+    return (e, i) => (x(), I("div", {
+      id: o.id,
       class: m(e.$style.marqueeSlider)
@@ -107,3 +107,3 @@ }, [
         class: m(e.$style.marqueeSliderContainer),
-        style: I(N(p))
+        style: N(w(p))
       }, [
@@ -110,0 +110,0 @@ B(e.$slots, "default", {}, () => [

dist/vue3-marquee-slider.umd.js

@@ -1,5 +0,5 @@
-(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o["vue3-marquee-slider"]={},o.Vue))})(this,function(o,e){"use strict";const m={marqueeSlider:"_marqueeSlider_owl00_3",marqueeSliderContainer:"_marqueeSliderContainer_owl00_11",animation:"_animation_owl00_1"},f=(s,n)=>{const i=s.__vccOpts||s;for(const[d,r]of n)i[d]=r;return i},p=["id"],h=e.createElementVNode("div",null,"Hello",-1),y=e.createElementVNode("div",null,"From",-1),_=e.createElementVNode("div",null,"MarqueeSlider",-1),S=f({__name:"VueMarqueeSlider",props:{autoWidth:{type:Boolean,default:()=>!1},id:{type:String,required:!0,default:()=>"id"},paused:{type:Boolean,default:()=>!1},repeat:{type:Number,default:()=>10},reverse:{type:Boolean,default:()=>!1},space:{type:Number,default:()=>200},speed:{type:Number,default:()=>1500},width:{type:Number,default:()=>100}},setup(s){const n=s;var i=e.ref(null),d=e.ref(0),r=e.ref([]),l=e.ref(0),u=e.ref([]),c=e.ref(null);const q=e.computed(()=>`
-        animation-duration: ${n.speed}ms;
-        animation-direction: ${n.reverse?"reverse":"normal"};
-        animation-play-state: ${n.paused?"paused":"running"};
-      `);e.onMounted(()=>{c=e.useCssModule(),V(),M(),W(),C(),x(),$()});function C(){for(let t=0;t<l;t++)u.value.push(r[t].offsetWidth),N(t),n.autoWidth?w(t):b(t);d=u.value.reduce((t,a)=>t+a,0)}function $(){const t=g();for(let a=0;a<t;a++)i.appendChild(r[a].cloneNode(!0))}function g(){return r.length*n.repeat}function M(){r=i.children}function W(){l=r.length}function N(t){r[t].style.marginRight=`${n.space}px`}function b(t){r[t].style.minWidth=`${n.width}px`}function w(t){r[t].style.objectFit="contain"}function V(){i=document.querySelector(`#${n.id} .${c.marqueeSliderContainer}`)}function x(){n.autoWidth?i.style.width=`${l*(d/l+n.space)}px`:i.style.width=`${l*(n.width+n.space)}px`}return(t,a)=>(e.openBlock(),e.createElementBlock("div",{id:s.id,class:e.normalizeClass(t.$style.marqueeSlider)},[e.createElementVNode("div",{class:e.normalizeClass(t.$style.marqueeSliderContainer),style:e.normalizeStyle(e.unref(q))},[e.renderSlot(t.$slots,"default",{},()=>[h,y,_])],6)],10,p))}},[["__cssModules",{$style:m}]]);o.VueMarqueeSlider=S,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o["vue3-marquee-slider"]={},o.Vue))})(this,function(o,e){"use strict";const f={marqueeSlider:"_marqueeSlider_1enfg_3",marqueeSliderContainer:"_marqueeSliderContainer_1enfg_11",animation:"_animation_1enfg_1"},m=(s,n)=>{const i=s.__vccOpts||s;for(const[d,r]of n)i[d]=r;return i},p=["id"],h=e.createElementVNode("div",null,"Hello",-1),y=e.createElementVNode("div",null,"From",-1),_=e.createElementVNode("div",null,"MarqueeSlider",-1),S=m({__name:"VueMarqueeSlider",props:{autoWidth:{type:Boolean,default:()=>!1},id:{type:String,required:!0,default:()=>"id"},paused:{type:Boolean,default:()=>!1},repeat:{type:Number,default:()=>10},reverse:{type:Boolean,default:()=>!1},space:{type:Number,default:()=>200},speed:{type:Number,default:()=>1500},width:{type:Number,default:()=>100}},setup(s){const n=s;var i=e.ref(null),d=e.ref(0),r=e.ref([]),l=e.ref(0),u=e.ref([]),c=e.ref(null);const q=e.computed(()=>`
+      animation-duration: ${n.speed}ms;
+      animation-direction: ${n.reverse?"reverse":"normal"};
+      animation-play-state: ${n.paused?"paused":"running"};
+    `);e.onMounted(()=>{c=e.useCssModule(),x(),M(),W(),g(),E(),C()});function g(){for(let t=0;t<l;t++)u.value.push(r[t].offsetWidth),N(t),n.autoWidth?V(t):b(t);d=u.value.reduce((t,a)=>t+a,0)}function C(){const t=$();for(let a=0;a<t;a++)i.appendChild(r[a].cloneNode(!0))}function $(){return r.length*n.repeat}function M(){r=i.children}function W(){l=r.length}function N(t){r[t].style.marginRight=`${n.space}px`}function b(t){r[t].style.minWidth=`${n.width}px`}function V(t){r[t].style.objectFit="contain"}function x(){i=document.querySelector(`#${n.id} .${c.marqueeSliderContainer}`)}function E(){n.autoWidth?i.style.width=`${l*(d/l+n.space)}px`:i.style.width=`${l*(n.width+n.space)}px`}return(t,a)=>(e.openBlock(),e.createElementBlock("div",{id:s.id,class:e.normalizeClass(t.$style.marqueeSlider)},[e.createElementVNode("div",{class:e.normalizeClass(t.$style.marqueeSliderContainer),style:e.normalizeStyle(e.unref(q))},[e.renderSlot(t.$slots,"default",{},()=>[h,y,_])],6)],10,p))}},[["__cssModules",{$style:f}]]);o.VueMarqueeSlider=S,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package.json

 {
   "name": "vue3-marquee-slider",
   "description": "Simple and easy-to-use component for Vue that allows you to create customizable marquees with just a few lines of code",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": false,
@@ -6,0 +6,0 @@ "homepage": "https://vue-marquee.com/",

No alert changes

Worsened metrics

Total package byte prevSize

24667

decreased by-0.06%

No dependency changes