vue3-marquee-slider
Advanced tools
Comparing version 1.0.1 to 1.0.2
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", j = { | ||
const k = "_marqueeSlider_owl00_3", E = "_marqueeSliderContainer_owl00_11", F = "_animation_owl00_1", V = { | ||
marqueeSlider: k, | ||
marqueeSliderContainer: E, | ||
animation: F | ||
}, z = (a, t) => { | ||
}, j = (a, t) => { | ||
const r = a.__vccOpts || a; | ||
@@ -11,4 +11,4 @@ for (const [s, n] of t) | ||
return r; | ||
}, L = ["id"], O = /* @__PURE__ */ u("div", null, "Hello", -1), R = /* @__PURE__ */ u("div", null, "From", -1), H = /* @__PURE__ */ u("div", null, "MarqueeSlider", -1), V = { | ||
__name: "MarqueeSlider", | ||
}, z = ["id"], L = /* @__PURE__ */ u("div", null, "Hello", -1), O = /* @__PURE__ */ u("div", null, "From", -1), R = /* @__PURE__ */ u("div", null, "MarqueeSlider", -1), H = { | ||
__name: "VueMarqueeSlider", | ||
props: { | ||
@@ -107,14 +107,14 @@ autoWidth: { | ||
B(e.$slots, "default", {}, () => [ | ||
L, | ||
O, | ||
R, | ||
H | ||
R | ||
]) | ||
], 6) | ||
], 10, L)); | ||
], 10, z)); | ||
} | ||
}, A = { | ||
$style: j | ||
}, G = /* @__PURE__ */ z(V, [["__cssModules", A]]); | ||
$style: V | ||
}, G = /* @__PURE__ */ j(H, [["__cssModules", A]]); | ||
export { | ||
G as MarqueeSlider | ||
G as VueMarqueeSlider | ||
}; |
@@ -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:"MarqueeSlider",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(()=>` | ||
(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(),x(),M(),W(),C(),E(),$()});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 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:m}]]);o.MarqueeSlider=S,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}); | ||
`);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"})}); |
{ | ||
"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.1", | ||
"version": "1.0.2", | ||
"private": false, | ||
@@ -6,0 +6,0 @@ "homepage": "https://vue-marquee.com/", |
@@ -78,3 +78,3 @@ [![Contributors][contributors-shield]][contributors-url] | ||
```html | ||
<marquee-slider | ||
<vue-marquee-slider | ||
id="marquee-slider" | ||
@@ -89,7 +89,7 @@ :speed="1000" | ||
<img src="https://app.imgforce.com/images/user/jY4_1670885309_angular-logo.png" /> | ||
</marquee-slider> | ||
</vue-marquee-slider> | ||
``` | ||
```js | ||
import { MarqueeSlider } from 'vue3-marquee-slider'; | ||
import { VueMarqueeSlider } from 'vue3-marquee-slider'; | ||
import '../node_modules/vue3-marquee-slider/dist/style.css' | ||
@@ -99,3 +99,3 @@ | ||
components: { | ||
MarqueeSlider | ||
VueMarqueeSlider | ||
} | ||
@@ -108,3 +108,3 @@ } | ||
```js | ||
import { MarqueeSlider } from 'vue3-marquee-slider'; | ||
import { VueMarqueeSlider } from 'vue3-marquee-slider'; | ||
import '../node_modules/vue3-marquee-slider/dist/style.css' | ||
@@ -116,3 +116,3 @@ ``` | ||
```html | ||
<marquee-slider | ||
<vue-marquee-slider | ||
id="marquee-slider-loop" | ||
@@ -127,3 +127,3 @@ :speed="1000" | ||
/> | ||
</marquee-slider> | ||
</vue-marquee-slider> | ||
``` | ||
@@ -170,3 +170,3 @@ | ||
```html | ||
<marquee-slider | ||
<vue-marquee-slider | ||
id="marquee-slider" | ||
@@ -180,3 +180,3 @@ :speed="15000" | ||
<img src="https://app.imgforce.com/images/user/jY4_1670885309_angular-logo.png" /> | ||
</marquee-slider> | ||
</vue-marquee-slider> | ||
``` | ||
@@ -187,3 +187,3 @@ | ||
```html | ||
<marquee-slider | ||
<vue-marquee-slider | ||
id="marquee-slider-width" | ||
@@ -198,3 +198,3 @@ :speed="10000" | ||
<img src="https://app.imgforce.com/images/user/jY4_1670885309_angular-logo.png" /> | ||
</marquee-slider> | ||
</vue-marquee-slider> | ||
``` | ||
@@ -205,3 +205,3 @@ | ||
```html | ||
<marquee-slider | ||
<vue-marquee-slider | ||
id="marquee-slider-space" | ||
@@ -217,3 +217,3 @@ :space="50" | ||
<img src="https://app.imgforce.com/images/user/jY4_1670885309_angular-logo.png" /> | ||
</marquee-slider> | ||
</vue-marquee-slider> | ||
``` | ||
@@ -224,3 +224,3 @@ | ||
```html | ||
<marquee-slider | ||
<vue-marquee-slider | ||
id="marquee-slider-text" | ||
@@ -235,3 +235,3 @@ :space="150" | ||
<span>vue3-marquee-slider</span> | ||
</marquee-slider> | ||
</vue-marquee-slider> | ||
``` | ||
@@ -242,3 +242,3 @@ | ||
```html | ||
<marquee-slider | ||
<vue-marquee-slider | ||
id="marquee-slider-cards" | ||
@@ -252,3 +252,3 @@ :space="50" | ||
<div>Some Cards</div> | ||
</marquee-slider> | ||
</vue-marquee-slider> | ||
``` | ||
@@ -259,3 +259,3 @@ | ||
```html | ||
<marquee-slider | ||
<vue-marquee-slider | ||
id="marquee-slider-reverse" | ||
@@ -272,3 +272,3 @@ :space="50" | ||
<img src="https://app.imgforce.com/images/user/jY4_1670885309_angular-logo.png" /> | ||
</marquee-slider> | ||
</vue-marquee-slider> | ||
``` | ||
@@ -275,0 +275,0 @@ |
24683