tn-data-swiper-pro 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -116,7 +116,7 @@ var h = { class: "tn-slide-item" }, g = ["src"], _ = ["src"], v = { class: "tn-t
|
|
|
116
116
|
])], 14, w))), 128))], 32)], 4)) : n("", !0);
|
|
117
117
|
}
|
|
118
118
|
}), [["__scopeId", "data-v-6364501b"]]), A = { install: (e) => {
|
|
119
|
-
e.component("TnSwiper", k);
|
|
119
|
+
e.component("TnSwiper", k), e.component("tn-data-swiper-pro", k);
|
|
120
120
|
} };
|
|
121
121
|
//#endregion
|
|
122
122
|
export { k as TnSwiper, A as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.TnDataSwiperPro={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n={class:`tn-slide-item`},r=[`src`],i=[`src`],a={class:`tn-text-group`},o={key:0,class:`tn-tag-row`},s={class:`tn-tag`},c={key:1,class:`tn-title`},l={class:`tn-slide-item`},u=[`src`],d=[`data-index`,`onClick`],f={class:`tn-thumb-wrapper`},p=[`src`],m={key:0,class:`tn-progress-layer`},h={class:`tn-progress-track`},g=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({__name:`TnSwiper`,props:{items:{default:()=>[]},interval:{default:5e3},switchSpeed:{default:.7},blurValue:{default:`6px`},maskOpacity:{default:.2},textPosition:{default:`bottom-left`},autoLink:{type:Boolean,default:!0}},emits:[`clickItem`],setup(e,{emit:g}){let _=e,v=g,y=(0,t.ref)(1),b=(0,t.ref)(!0),x=(0,t.ref)(0),S=(0,t.ref)(!1),C=(0,t.ref)(!1),w=(0,t.ref)(!0),T=null,E=(0,t.computed)(()=>{let e=_.items.length;return y.value>e?0:y.value<1?e-1:y.value-1}),D=(0,t.computed)(()=>({"--switch-speed":`${_.switchSpeed}s`,"--blur-val":_.blurValue,"--mask-op":_.maskOpacity})),O=(0,t.computed)(()=>({transform:`translate3d(${-y.value*100}%, 0, 0)`,transition:b.value?`transform var(--switch-speed) cubic-bezier(0.4, 0, 0.2, 1)`:`none`})),k=e=>({backdropFilter:e?`blur(0px)`:`blur(var(--blur-val))`,backgroundColor:e?`transparent`:`rgba(255, 255, 255, var(--mask-op))`}),A=(0,t.computed)(()=>({transform:`scaleX(${x.value/100})`,transition:S.value?`transform ${_.interval}ms linear`:`none`})),j=e=>{e.propertyName===`transform`&&x.value===100&&(w.value=!1)},M=()=>{clearTimeout(T),S.value=!1,x.value=0,w.value=!0,(0,t.nextTick)(()=>{setTimeout(()=>{S.value=!0,x.value=100;let e=()=>{C.value?T=setTimeout(e,100):(y.value++,b.value=!0,M())};T=setTimeout(e,_.interval)},50)})},N=e=>{C.value=!0;let t=document.elementFromPoint(e.clientX,e.clientY)?.closest(`.tn-thumb-item`);if(t){let e=parseInt(t.dataset.index||`0`)+1;y.value!==e&&(b.value=!0,y.value=e,w.value=!1,M())}},P=()=>{C.value=!1},F=e=>{v(`clickItem`,e),_.autoLink&&e.url&&e.url.startsWith(`http`)&&window.open(e.url,`_blank`)},I=()=>{let e=_.items.length;y.value>=e+1?(b.value=!1,y.value=1):y.value<=0&&(b.value=!1,y.value=e)};return(0,t.onMounted)(()=>{_.items.length>=3&&M()}),(0,t.onUnmounted)(()=>clearTimeout(T)),(g,_)=>e.items.length>=3?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`tn-swiper-scope`,style:(0,t.normalizeStyle)(D.value)},[(0,t.createElementVNode)(`div`,{class:`tn-main-view`,onClick:_[0]||=t=>F(e.items[E.value])},[(0,t.createElementVNode)(`div`,{class:`tn-swiper-track`,style:(0,t.normalizeStyle)(O.value),onTransitionend:I},[(0,t.createElementVNode)(`div`,n,[(0,t.createElementVNode)(`img`,{src:e.items[e.items.length-1].mainUrl},null,8,r)]),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.items,(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:r,class:`tn-slide-item`},[(0,t.createElementVNode)(`img`,{src:n.mainUrl},null,8,i),(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`tn-content-overlay`,e.textPosition])},[(0,t.createElementVNode)(`div`,a,[n.tag?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,o,[(0,t.createElementVNode)(`span`,s,(0,t.toDisplayString)(n.tag),1)])):(0,t.createCommentVNode)(``,!0),n.title?((0,t.openBlock)(),(0,t.createElementBlock)(`h2`,c,(0,t.toDisplayString)(n.title),1)):(0,t.createCommentVNode)(``,!0)])],2)]))),128)),(0,t.createElementVNode)(`div`,l,[(0,t.createElementVNode)(`img`,{src:e.items[0].mainUrl},null,8,u)])],36)]),(0,t.createElementVNode)(`div`,{class:`tn-thumb-bar`,onPointermove:N,onPointerleave:P},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.items,(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:r,class:(0,t.normalizeClass)([`tn-thumb-item`,{"is-active":E.value===r}]),style:(0,t.normalizeStyle)({width:100/e.items.length+`%`}),"data-index":r,onClick:e=>F(n)},[(0,t.createElementVNode)(`div`,f,[(0,t.createElementVNode)(`img`,{src:n.thumbUrl||n.mainUrl},null,8,p),(0,t.createElementVNode)(`div`,{class:`tn-mask`,style:(0,t.normalizeStyle)(k(E.value===r))},null,4),E.value===r&&w.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,m,[(0,t.createElementVNode)(`div`,h,[(0,t.createElementVNode)(`div`,{class:`tn-progress-bar`,style:(0,t.normalizeStyle)(A.value),onTransitionend:j},null,36)])])):(0,t.createCommentVNode)(``,!0)])],14,d))),128))],32)],4)):(0,t.createCommentVNode)(``,!0)}}),[[`__scopeId`,`data-v-6364501b`]]);e.TnSwiper=g,e.default={install:e=>{e.component(`TnSwiper`,g)}}});
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.TnDataSwiperPro={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n={class:`tn-slide-item`},r=[`src`],i=[`src`],a={class:`tn-text-group`},o={key:0,class:`tn-tag-row`},s={class:`tn-tag`},c={key:1,class:`tn-title`},l={class:`tn-slide-item`},u=[`src`],d=[`data-index`,`onClick`],f={class:`tn-thumb-wrapper`},p=[`src`],m={key:0,class:`tn-progress-layer`},h={class:`tn-progress-track`},g=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({__name:`TnSwiper`,props:{items:{default:()=>[]},interval:{default:5e3},switchSpeed:{default:.7},blurValue:{default:`6px`},maskOpacity:{default:.2},textPosition:{default:`bottom-left`},autoLink:{type:Boolean,default:!0}},emits:[`clickItem`],setup(e,{emit:g}){let _=e,v=g,y=(0,t.ref)(1),b=(0,t.ref)(!0),x=(0,t.ref)(0),S=(0,t.ref)(!1),C=(0,t.ref)(!1),w=(0,t.ref)(!0),T=null,E=(0,t.computed)(()=>{let e=_.items.length;return y.value>e?0:y.value<1?e-1:y.value-1}),D=(0,t.computed)(()=>({"--switch-speed":`${_.switchSpeed}s`,"--blur-val":_.blurValue,"--mask-op":_.maskOpacity})),O=(0,t.computed)(()=>({transform:`translate3d(${-y.value*100}%, 0, 0)`,transition:b.value?`transform var(--switch-speed) cubic-bezier(0.4, 0, 0.2, 1)`:`none`})),k=e=>({backdropFilter:e?`blur(0px)`:`blur(var(--blur-val))`,backgroundColor:e?`transparent`:`rgba(255, 255, 255, var(--mask-op))`}),A=(0,t.computed)(()=>({transform:`scaleX(${x.value/100})`,transition:S.value?`transform ${_.interval}ms linear`:`none`})),j=e=>{e.propertyName===`transform`&&x.value===100&&(w.value=!1)},M=()=>{clearTimeout(T),S.value=!1,x.value=0,w.value=!0,(0,t.nextTick)(()=>{setTimeout(()=>{S.value=!0,x.value=100;let e=()=>{C.value?T=setTimeout(e,100):(y.value++,b.value=!0,M())};T=setTimeout(e,_.interval)},50)})},N=e=>{C.value=!0;let t=document.elementFromPoint(e.clientX,e.clientY)?.closest(`.tn-thumb-item`);if(t){let e=parseInt(t.dataset.index||`0`)+1;y.value!==e&&(b.value=!0,y.value=e,w.value=!1,M())}},P=()=>{C.value=!1},F=e=>{v(`clickItem`,e),_.autoLink&&e.url&&e.url.startsWith(`http`)&&window.open(e.url,`_blank`)},I=()=>{let e=_.items.length;y.value>=e+1?(b.value=!1,y.value=1):y.value<=0&&(b.value=!1,y.value=e)};return(0,t.onMounted)(()=>{_.items.length>=3&&M()}),(0,t.onUnmounted)(()=>clearTimeout(T)),(g,_)=>e.items.length>=3?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`tn-swiper-scope`,style:(0,t.normalizeStyle)(D.value)},[(0,t.createElementVNode)(`div`,{class:`tn-main-view`,onClick:_[0]||=t=>F(e.items[E.value])},[(0,t.createElementVNode)(`div`,{class:`tn-swiper-track`,style:(0,t.normalizeStyle)(O.value),onTransitionend:I},[(0,t.createElementVNode)(`div`,n,[(0,t.createElementVNode)(`img`,{src:e.items[e.items.length-1].mainUrl},null,8,r)]),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.items,(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:r,class:`tn-slide-item`},[(0,t.createElementVNode)(`img`,{src:n.mainUrl},null,8,i),(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`tn-content-overlay`,e.textPosition])},[(0,t.createElementVNode)(`div`,a,[n.tag?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,o,[(0,t.createElementVNode)(`span`,s,(0,t.toDisplayString)(n.tag),1)])):(0,t.createCommentVNode)(``,!0),n.title?((0,t.openBlock)(),(0,t.createElementBlock)(`h2`,c,(0,t.toDisplayString)(n.title),1)):(0,t.createCommentVNode)(``,!0)])],2)]))),128)),(0,t.createElementVNode)(`div`,l,[(0,t.createElementVNode)(`img`,{src:e.items[0].mainUrl},null,8,u)])],36)]),(0,t.createElementVNode)(`div`,{class:`tn-thumb-bar`,onPointermove:N,onPointerleave:P},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.items,(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:r,class:(0,t.normalizeClass)([`tn-thumb-item`,{"is-active":E.value===r}]),style:(0,t.normalizeStyle)({width:100/e.items.length+`%`}),"data-index":r,onClick:e=>F(n)},[(0,t.createElementVNode)(`div`,f,[(0,t.createElementVNode)(`img`,{src:n.thumbUrl||n.mainUrl},null,8,p),(0,t.createElementVNode)(`div`,{class:`tn-mask`,style:(0,t.normalizeStyle)(k(E.value===r))},null,4),E.value===r&&w.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,m,[(0,t.createElementVNode)(`div`,h,[(0,t.createElementVNode)(`div`,{class:`tn-progress-bar`,style:(0,t.normalizeStyle)(A.value),onTransitionend:j},null,36)])])):(0,t.createCommentVNode)(``,!0)])],14,d))),128))],32)],4)):(0,t.createCommentVNode)(``,!0)}}),[[`__scopeId`,`data-v-6364501b`]]);e.TnSwiper=g,e.default={install:e=>{e.component(`TnSwiper`,g),e.component(`tn-data-swiper-pro`,g)}}});
|