tn-data-swiper-pro 1.0.2 → 1.0.4

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.
@@ -1,2 +1,2 @@
1
- .tn-swiper-scope[data-v-6364501b]{-webkit-tap-highlight-color:transparent;flex-direction:column;width:100%;display:flex}@media screen and (width>=769px){.tn-swiper-scope[data-v-6364501b]{width:85vw;max-width:1200px;height:72vh;margin:0 auto}.tn-main-view[data-v-6364501b]{border-radius:20px;height:56vh}.tn-thumb-bar[data-v-6364501b]{height:16vh;padding-top:2vh}.tn-title[data-v-6364501b]{font-size:5.5vh;font-weight:800}.tn-tag[data-v-6364501b]{border-radius:6px;padding:.8vh 1.6vh;font-size:1.6vh}.tn-tag-row[data-v-6364501b]{margin-bottom:2.5vh}}@media screen and (width<=768px){.tn-swiper-scope[data-v-6364501b]{width:94vw;margin:0 auto}.tn-main-view[data-v-6364501b]{aspect-ratio:16/9;border-radius:12px}.tn-thumb-bar[data-v-6364501b]{height:85px;padding:15px 0}.tn-title[data-v-6364501b]{font-size:6.8vw;font-weight:800}.tn-tag[data-v-6364501b]{border-radius:4px;padding:1.2vw 2.8vw;font-size:3.2vw}.tn-tag-row[data-v-6364501b]{margin-bottom:3.5vw}}.tn-main-view[data-v-6364501b]{cursor:pointer;z-index:1;position:relative;overflow:hidden}.tn-swiper-track[data-v-6364501b]{width:100%;height:100%;display:flex}.tn-slide-item[data-v-6364501b]{flex:0 0 100%;height:100%;position:relative}.tn-slide-item img[data-v-6364501b]{object-fit:cover;width:100%;height:100%;display:block}.tn-content-overlay[data-v-6364501b]{z-index:10;color:#fff;pointer-events:none;background:linear-gradient(#0000 35%,#000000b3 100%);flex-direction:column;padding:6%;display:flex;position:absolute;inset:0}.tn-content-overlay.bottom-left[data-v-6364501b]{justify-content:flex-end;align-items:flex-start}.tn-tag[data-v-6364501b]{color:#222;background:#fff;font-weight:800;display:inline-block}.tn-title[data-v-6364501b]{text-shadow:0 4px 15px #00000080;margin:0;line-height:1.2}.tn-thumb-bar[data-v-6364501b]{touch-action:none;justify-content:space-between;width:100%;display:flex}.tn-thumb-item[data-v-6364501b]{box-sizing:border-box;cursor:pointer;height:100%;padding:0 5px}.tn-thumb-wrapper[data-v-6364501b]{pointer-events:none;border-radius:10px;width:100%;height:100%;position:relative;overflow:hidden}.tn-thumb-item.is-active .tn-thumb-wrapper[data-v-6364501b]{transition:transform .3s;transform:scale(1.03)}.tn-thumb-wrapper img[data-v-6364501b]{object-fit:cover;width:100%;height:100%;display:block}.tn-mask[data-v-6364501b]{z-index:2;transition:all .4s;position:absolute;inset:0}.tn-progress-layer[data-v-6364501b]{z-index:5;background:#00000059;justify-content:center;align-items:flex-end;padding-bottom:8px;transition:opacity .2s;display:flex;position:absolute;inset:0}.tn-progress-track[data-v-6364501b]{background:#ffffff4d;border-radius:2px;width:75%;height:3px;overflow:hidden}.tn-progress-bar[data-v-6364501b]{transform-origin:0;will-change:transform;background:#fff;width:100%;height:100%}
1
+ .tn-swiper-scope[data-v-daa852ac]{-webkit-tap-highlight-color:transparent;flex-direction:column;width:100%;display:flex}@keyframes skeleton-blink-daa852ac{0%{background-color:#f0f0f0}50%{background-color:#e0e0e0}to{background-color:#f0f0f0}}.tn-slide-item[data-v-daa852ac],.tn-thumb-wrapper[data-v-daa852ac]{background-color:#f0f0f0;animation:1.5s ease-in-out infinite skeleton-blink-daa852ac}@media screen and (width>=769px){.tn-swiper-scope[data-v-daa852ac]{width:85vw;max-width:1200px;height:72vh;margin:0 auto}.tn-main-view[data-v-daa852ac]{border-radius:20px;height:56vh}.tn-thumb-bar[data-v-daa852ac]{height:16vh;padding-top:2vh}.tn-title[data-v-daa852ac]{font-size:5.5vh;font-weight:800}.tn-tag[data-v-daa852ac]{border-radius:6px;padding:.8vh 1.6vh;font-size:1.6vh}.tn-tag-row[data-v-daa852ac]{margin-bottom:2.5vh}}@media screen and (width<=768px){.tn-swiper-scope[data-v-daa852ac]{width:94vw;margin:0 auto}.tn-main-view[data-v-daa852ac]{aspect-ratio:16/9;border-radius:12px}.tn-thumb-bar[data-v-daa852ac]{height:85px;padding:15px 0}.tn-title[data-v-daa852ac]{font-size:6.8vw;font-weight:800}.tn-tag[data-v-daa852ac]{border-radius:4px;padding:1.2vw 2.8vw;font-size:3.2vw}.tn-tag-row[data-v-daa852ac]{margin-bottom:3.5vw}}.tn-main-view[data-v-daa852ac]{cursor:pointer;z-index:1;position:relative;overflow:hidden}.tn-swiper-track[data-v-daa852ac]{width:100%;height:100%;display:flex}.tn-slide-item[data-v-daa852ac]{flex:0 0 100%;height:100%;position:relative}.tn-slide-item img[data-v-daa852ac],.tn-thumb-wrapper img[data-v-daa852ac]{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .4s ease-out;display:block}.tn-slide-item img[src][data-v-daa852ac],.tn-thumb-wrapper img[src][data-v-daa852ac]{opacity:1}.tn-content-overlay[data-v-daa852ac]{z-index:10;color:#fff;pointer-events:none;background:linear-gradient(#0000 35%,#000000b3 100%);flex-direction:column;padding:6%;display:flex;position:absolute;inset:0}.tn-content-overlay.bottom-left[data-v-daa852ac]{justify-content:flex-end;align-items:flex-start}.tn-tag[data-v-daa852ac]{color:#222;background:#fff;font-weight:800;display:inline-block}.tn-title[data-v-daa852ac]{text-shadow:0 4px 15px #00000080;margin:0;line-height:1.2}.tn-thumb-bar[data-v-daa852ac]{touch-action:none;justify-content:space-between;width:100%;display:flex}.tn-thumb-item[data-v-daa852ac]{box-sizing:border-box;cursor:pointer;height:100%;padding:0 5px}.tn-thumb-wrapper[data-v-daa852ac]{pointer-events:none;border-radius:10px;width:100%;height:100%;position:relative;overflow:hidden}.tn-thumb-item.is-active .tn-thumb-wrapper[data-v-daa852ac]{transition:transform .3s;transform:scale(1.03)}.tn-mask[data-v-daa852ac]{z-index:2;transition:all .4s;position:absolute;inset:0}.tn-progress-layer[data-v-daa852ac]{z-index:5;background:#00000059;justify-content:center;align-items:flex-end;padding-bottom:8px;transition:opacity .2s;display:flex;position:absolute;inset:0}.tn-progress-track[data-v-daa852ac]{background:#ffffff4d;border-radius:2px;width:75%;height:3px;overflow:hidden}.tn-progress-bar[data-v-daa852ac]{transform-origin:0;will-change:transform;background:#fff;width:100%;height:100%}
2
2
  /*$vite$:1*/
@@ -1,122 +1 @@
1
- import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, nextTick as o, normalizeClass as s, normalizeStyle as c, onMounted as l, onUnmounted as u, openBlock as d, ref as f, renderList as p, toDisplayString as m } from "vue";
2
- //#region src/components/TnSwiper.vue?vue&type=script&setup=true&lang.ts
3
- var h = { class: "tn-slide-item" }, g = ["src"], _ = ["src"], v = { class: "tn-text-group" }, y = {
4
- key: 0,
5
- class: "tn-tag-row"
6
- }, b = { class: "tn-tag" }, x = {
7
- key: 1,
8
- class: "tn-title"
9
- }, S = { class: "tn-slide-item" }, C = ["src"], w = ["data-index", "onClick"], T = { class: "tn-thumb-wrapper" }, E = ["src"], D = {
10
- key: 0,
11
- class: "tn-progress-layer"
12
- }, O = { class: "tn-progress-track" }, k = /* @__PURE__ */ ((e, t) => {
13
- let n = e.__vccOpts || e;
14
- for (let [e, r] of t) n[e] = r;
15
- return n;
16
- })(/* @__PURE__ */ a({
17
- __name: "TnSwiper",
18
- props: {
19
- items: { default: () => [] },
20
- interval: { default: 5e3 },
21
- switchSpeed: { default: .7 },
22
- blurValue: { default: "6px" },
23
- maskOpacity: { default: .2 },
24
- textPosition: { default: "bottom-left" },
25
- autoLink: {
26
- type: Boolean,
27
- default: !0
28
- }
29
- },
30
- emits: ["clickItem"],
31
- setup(a, { emit: k }) {
32
- let A = a, j = k, M = f(1), N = f(!0), P = f(0), F = f(!1), I = f(!1), L = f(!0), R = null, z = t(() => {
33
- let e = A.items.length;
34
- return M.value > e ? 0 : M.value < 1 ? e - 1 : M.value - 1;
35
- }), B = t(() => ({
36
- "--switch-speed": `${A.switchSpeed}s`,
37
- "--blur-val": A.blurValue,
38
- "--mask-op": A.maskOpacity
39
- })), V = t(() => ({
40
- transform: `translate3d(${-M.value * 100}%, 0, 0)`,
41
- transition: N.value ? "transform var(--switch-speed) cubic-bezier(0.4, 0, 0.2, 1)" : "none"
42
- })), H = (e) => ({
43
- backdropFilter: e ? "blur(0px)" : "blur(var(--blur-val))",
44
- backgroundColor: e ? "transparent" : "rgba(255, 255, 255, var(--mask-op))"
45
- }), U = t(() => ({
46
- transform: `scaleX(${P.value / 100})`,
47
- transition: F.value ? `transform ${A.interval}ms linear` : "none"
48
- })), W = (e) => {
49
- e.propertyName === "transform" && P.value === 100 && (L.value = !1);
50
- }, G = () => {
51
- clearTimeout(R), F.value = !1, P.value = 0, L.value = !0, o(() => {
52
- setTimeout(() => {
53
- F.value = !0, P.value = 100;
54
- let e = () => {
55
- I.value ? R = setTimeout(e, 100) : (M.value++, N.value = !0, G());
56
- };
57
- R = setTimeout(e, A.interval);
58
- }, 50);
59
- });
60
- }, K = (e) => {
61
- I.value = !0;
62
- let t = document.elementFromPoint(e.clientX, e.clientY)?.closest(".tn-thumb-item");
63
- if (t) {
64
- let e = parseInt(t.dataset.index || "0") + 1;
65
- M.value !== e && (N.value = !0, M.value = e, L.value = !1, G());
66
- }
67
- }, q = () => {
68
- I.value = !1;
69
- }, J = (e) => {
70
- j("clickItem", e), A.autoLink && e.url && e.url.startsWith("http") && window.open(e.url, "_blank");
71
- }, Y = () => {
72
- let e = A.items.length;
73
- M.value >= e + 1 ? (N.value = !1, M.value = 1) : M.value <= 0 && (N.value = !1, M.value = e);
74
- };
75
- return l(() => {
76
- A.items.length >= 3 && G();
77
- }), u(() => clearTimeout(R)), (t, o) => a.items.length >= 3 ? (d(), r("div", {
78
- key: 0,
79
- class: "tn-swiper-scope",
80
- style: c(B.value)
81
- }, [i("div", {
82
- class: "tn-main-view",
83
- onClick: o[0] ||= (e) => J(a.items[z.value])
84
- }, [i("div", {
85
- class: "tn-swiper-track",
86
- style: c(V.value),
87
- onTransitionend: Y
88
- }, [
89
- i("div", h, [i("img", { src: a.items[a.items.length - 1].mainUrl }, null, 8, g)]),
90
- (d(!0), r(e, null, p(a.items, (e, t) => (d(), r("div", {
91
- key: t,
92
- class: "tn-slide-item"
93
- }, [i("img", { src: e.mainUrl }, null, 8, _), i("div", { class: s(["tn-content-overlay", a.textPosition]) }, [i("div", v, [e.tag ? (d(), r("div", y, [i("span", b, m(e.tag), 1)])) : n("", !0), e.title ? (d(), r("h2", x, m(e.title), 1)) : n("", !0)])], 2)]))), 128)),
94
- i("div", S, [i("img", { src: a.items[0].mainUrl }, null, 8, C)])
95
- ], 36)]), i("div", {
96
- class: "tn-thumb-bar",
97
- onPointermove: K,
98
- onPointerleave: q
99
- }, [(d(!0), r(e, null, p(a.items, (e, t) => (d(), r("div", {
100
- key: t,
101
- class: s(["tn-thumb-item", { "is-active": z.value === t }]),
102
- style: c({ width: 100 / a.items.length + "%" }),
103
- "data-index": t,
104
- onClick: (t) => J(e)
105
- }, [i("div", T, [
106
- i("img", { src: e.thumbUrl || e.mainUrl }, null, 8, E),
107
- i("div", {
108
- class: "tn-mask",
109
- style: c(H(z.value === t))
110
- }, null, 4),
111
- z.value === t && L.value ? (d(), r("div", D, [i("div", O, [i("div", {
112
- class: "tn-progress-bar",
113
- style: c(U.value),
114
- onTransitionend: W
115
- }, null, 36)])])) : n("", !0)
116
- ])], 14, w))), 128))], 32)], 4)) : n("", !0);
117
- }
118
- }), [["__scopeId", "data-v-6364501b"]]), A = { install: (e) => {
119
- e.component("TnSwiper", k), e.component("tn-data-swiper-pro", k);
120
- } };
121
- //#endregion
122
- export { k as TnSwiper, A as default };
1
+ import{Fragment as e,computed as t,createCommentVNode as a,createElementBlock as l,createElementVNode as n,defineComponent as s,nextTick as i,normalizeClass as r,normalizeStyle as o,onMounted as u,onUnmounted as c,openBlock as m,ref as v,renderList as d,toDisplayString as p}from"vue";var g={class:"tn-slide-item"},b=["src"],h=["src","alt","loading","decoding"],k={class:"tn-text-group"},y={key:0,class:"tn-tag-row"},f={class:"tn-tag"},w={key:1,class:"tn-title"},T={class:"tn-slide-item"},x=["src"],_=["data-index","onClick"],P={class:"tn-thumb-wrapper"},U=["src","alt"],z={key:0,class:"tn-progress-layer"},C={class:"tn-progress-track"},S=/* @__PURE__ */((e,t)=>{const a=e.__vccOpts||e;for(const[l,n]of t)a[l]=n;return a})(/* @__PURE__ */s({__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(s,{emit:S}){const I=s,$=S,O=v(1),F=v(!0),L=v(0),V=v(!1),X=v(!1),B=v(!0);let D=null;const E=t(()=>{const e=I.items.length;return O.value>e?0:O.value<1?e-1:O.value-1}),N=t(()=>({"--switch-speed":`${I.switchSpeed}s`,"--blur-val":I.blurValue,"--mask-op":I.maskOpacity})),W=t(()=>({transform:`translate3d(${100*-O.value}%, 0, 0)`,transition:F.value?"transform var(--switch-speed) cubic-bezier(0.4, 0, 0.2, 1)":"none"})),Y=t(()=>({transform:`scaleX(${L.value/100})`,transition:V.value?`transform ${I.interval}ms linear`:"none"})),j=e=>{"transform"===e.propertyName&&100===L.value&&(B.value=!1)},q=()=>{clearTimeout(D),V.value=!1,L.value=0,B.value=!0,i(()=>{setTimeout(()=>{V.value=!0,L.value=100;const e=()=>{X.value?D=setTimeout(e,100):(O.value++,F.value=!0,q())};D=setTimeout(e,I.interval)},50)})},A=e=>{X.value=!0;const t=document.elementFromPoint(e.clientX,e.clientY)?.closest(".tn-thumb-item");if(t){const e=parseInt(t.dataset.index||"0")+1;O.value!==e&&(F.value=!0,O.value=e,B.value=!1,q())}},G=()=>{X.value=!1},H=e=>{$("clickItem",e),I.autoLink&&e.url&&e.url.startsWith("http")&&window.open(e.url,"_blank")},J=()=>{const e=I.items.length;O.value>=e+1?(F.value=!1,O.value=1):O.value<=0&&(F.value=!1,O.value=e)};return u(()=>{I.items.length>=3&&((()=>{if(I.items.length>0){const e=I.items[0].mainUrl,t=document.createElement("link");t.rel="preload",t.as="image",t.href=e,document.head.appendChild(t)}})(),q())}),c(()=>clearTimeout(D)),(t,i)=>s.items.length>=3?(m(),l("div",{key:0,class:"tn-swiper-scope",style:o(N.value),role:"region","aria-roledescription":"carousel"},[n("div",{class:"tn-main-view",onClick:i[0]||(i[0]=e=>H(s.items[E.value]))},[n("div",{class:"tn-swiper-track",style:o(W.value),onTransitionend:J},[n("div",g,[n("img",{src:s.items[s.items.length-1].mainUrl,alt:"banner-clone",loading:"lazy"},null,8,b)]),(m(!0),l(e,null,d(s.items,(e,t)=>(m(),l("div",{key:t,class:"tn-slide-item"},[n("img",{src:e.mainUrl,alt:e.title||"banner-image",loading:0===t?"eager":"lazy",decoding:0===t?"sync":"async"},null,8,h),n("div",{class:r(["tn-content-overlay",s.textPosition])},[n("div",k,[e.tag?(m(),l("div",y,[n("span",f,p(e.tag),1)])):a("",!0),e.title?(m(),l("h2",w,p(e.title),1)):a("",!0)])],2)]))),128)),n("div",T,[n("img",{src:s.items[0].mainUrl,alt:"banner-clone",loading:"lazy"},null,8,x)])],36)]),n("div",{class:"tn-thumb-bar",onPointermove:A,onPointerleave:G},[(m(!0),l(e,null,d(s.items,(e,t)=>{return m(),l("div",{key:t,class:r(["tn-thumb-item",{"is-active":E.value===t}]),style:o({width:100/s.items.length+"%"}),"data-index":t,onClick:t=>H(e)},[n("div",P,[n("img",{src:e.thumbUrl||e.mainUrl,alt:"thumb-"+t,loading:"lazy"},null,8,U),n("div",{class:"tn-mask",style:o((i=E.value===t,{backdropFilter:i?"blur(0px)":"blur(var(--blur-val))",backgroundColor:i?"transparent":"rgba(255, 255, 255, var(--mask-op))"}))},null,4),E.value===t&&B.value?(m(),l("div",z,[n("div",C,[n("div",{class:"tn-progress-bar",style:o(Y.value),onTransitionend:j},null,36)])])):a("",!0)])],14,_);var i}),128))],32)],4)):a("",!0)}}),[["__scopeId","data-v-daa852ac"]]),I={install:e=>{e.component("TnDataSwiperPro",S),e.component("tn-data-swiper-pro",S)}};export{S as TnSwiper,I 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),e.component(`tn-data-swiper-pro`,g)}}});
1
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).TnDataSwiperPro={},e.Vue)}(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var l={class:"tn-slide-item"},a=["src"],n=["src","alt","loading","decoding"],o={class:"tn-text-group"},r={key:0,class:"tn-tag-row"},i={class:"tn-tag"},s={key:1,class:"tn-title"},c={class:"tn-slide-item"},m=["src"],u=["data-index","onClick"],d={class:"tn-thumb-wrapper"},v=["src","alt"],p={key:0,class:"tn-progress-layer"},k={class:"tn-progress-track"},f=((e,t)=>{const l=e.__vccOpts||e;for(const[a,n]of t)l[a]=n;return l})((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:f}){const g=e,y=f,b=(0,t.ref)(1),h=(0,t.ref)(!0),E=(0,t.ref)(0),V=(0,t.ref)(!1),N=(0,t.ref)(!1),w=(0,t.ref)(!0);let B=null;const S=(0,t.computed)(()=>{const e=g.items.length;return b.value>e?0:b.value<1?e-1:b.value-1}),T=(0,t.computed)(()=>({"--switch-speed":`${g.switchSpeed}s`,"--blur-val":g.blurValue,"--mask-op":g.maskOpacity})),x=(0,t.computed)(()=>({transform:`translate3d(${100*-b.value}%, 0, 0)`,transition:h.value?"transform var(--switch-speed) cubic-bezier(0.4, 0, 0.2, 1)":"none"})),z=(0,t.computed)(()=>({transform:`scaleX(${E.value/100})`,transition:V.value?`transform ${g.interval}ms linear`:"none"})),C=e=>{"transform"===e.propertyName&&100===E.value&&(w.value=!1)},_=()=>{clearTimeout(B),V.value=!1,E.value=0,w.value=!0,(0,t.nextTick)(()=>{setTimeout(()=>{V.value=!0,E.value=100;const e=()=>{N.value?B=setTimeout(e,100):(b.value++,h.value=!0,_())};B=setTimeout(e,g.interval)},50)})},P=e=>{N.value=!0;const t=document.elementFromPoint(e.clientX,e.clientY)?.closest(".tn-thumb-item");if(t){const e=parseInt(t.dataset.index||"0")+1;b.value!==e&&(h.value=!0,b.value=e,w.value=!1,_())}},U=()=>{N.value=!1},D=e=>{y("clickItem",e),g.autoLink&&e.url&&e.url.startsWith("http")&&window.open(e.url,"_blank")},F=()=>{const e=g.items.length;b.value>=e+1?(h.value=!1,b.value=1):b.value<=0&&(h.value=!1,b.value=e)};return(0,t.onMounted)(()=>{g.items.length>=3&&((()=>{if(g.items.length>0){const e=g.items[0].mainUrl,t=document.createElement("link");t.rel="preload",t.as="image",t.href=e,document.head.appendChild(t)}})(),_())}),(0,t.onUnmounted)(()=>clearTimeout(B)),(f,g)=>e.items.length>=3?((0,t.openBlock)(),(0,t.createElementBlock)("div",{key:0,class:"tn-swiper-scope",style:(0,t.normalizeStyle)(T.value),role:"region","aria-roledescription":"carousel"},[(0,t.createElementVNode)("div",{class:"tn-main-view",onClick:g[0]||(g[0]=t=>D(e.items[S.value]))},[(0,t.createElementVNode)("div",{class:"tn-swiper-track",style:(0,t.normalizeStyle)(x.value),onTransitionend:F},[(0,t.createElementVNode)("div",l,[(0,t.createElementVNode)("img",{src:e.items[e.items.length-1].mainUrl,alt:"banner-clone",loading:"lazy"},null,8,a)]),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.items,(l,a)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{key:a,class:"tn-slide-item"},[(0,t.createElementVNode)("img",{src:l.mainUrl,alt:l.title||"banner-image",loading:0===a?"eager":"lazy",decoding:0===a?"sync":"async"},null,8,n),(0,t.createElementVNode)("div",{class:(0,t.normalizeClass)(["tn-content-overlay",e.textPosition])},[(0,t.createElementVNode)("div",o,[l.tag?((0,t.openBlock)(),(0,t.createElementBlock)("div",r,[(0,t.createElementVNode)("span",i,(0,t.toDisplayString)(l.tag),1)])):(0,t.createCommentVNode)("",!0),l.title?((0,t.openBlock)(),(0,t.createElementBlock)("h2",s,(0,t.toDisplayString)(l.title),1)):(0,t.createCommentVNode)("",!0)])],2)]))),128)),(0,t.createElementVNode)("div",c,[(0,t.createElementVNode)("img",{src:e.items[0].mainUrl,alt:"banner-clone",loading:"lazy"},null,8,m)])],36)]),(0,t.createElementVNode)("div",{class:"tn-thumb-bar",onPointermove:P,onPointerleave:U},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.items,(l,a)=>{return(0,t.openBlock)(),(0,t.createElementBlock)("div",{key:a,class:(0,t.normalizeClass)(["tn-thumb-item",{"is-active":S.value===a}]),style:(0,t.normalizeStyle)({width:100/e.items.length+"%"}),"data-index":a,onClick:e=>D(l)},[(0,t.createElementVNode)("div",d,[(0,t.createElementVNode)("img",{src:l.thumbUrl||l.mainUrl,alt:"thumb-"+a,loading:"lazy"},null,8,v),(0,t.createElementVNode)("div",{class:"tn-mask",style:(0,t.normalizeStyle)((n=S.value===a,{backdropFilter:n?"blur(0px)":"blur(var(--blur-val))",backgroundColor:n?"transparent":"rgba(255, 255, 255, var(--mask-op))"}))},null,4),S.value===a&&w.value?((0,t.openBlock)(),(0,t.createElementBlock)("div",p,[(0,t.createElementVNode)("div",k,[(0,t.createElementVNode)("div",{class:"tn-progress-bar",style:(0,t.normalizeStyle)(z.value),onTransitionend:C},null,36)])])):(0,t.createCommentVNode)("",!0)])],14,u);var n}),128))],32)],4)):(0,t.createCommentVNode)("",!0)}}),[["__scopeId","data-v-daa852ac"]]),g={install:e=>{e.component("TnDataSwiperPro",f),e.component("tn-data-swiper-pro",f)}};e.TnSwiper=f,e.default=g});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tn-data-swiper-pro",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "高性能 Vue3 跨端轮播组件",
5
5
  "type": "module",
6
6
  "main": "dist/tn-data-swiper.umd.cjs",
@@ -30,9 +30,10 @@
30
30
  "@vitejs/plugin-vue": "^6.0.5",
31
31
  "@vue/tsconfig": "^0.9.1",
32
32
  "sass-embedded": "^1.99.0",
33
+ "terser": "^5.46.1",
33
34
  "typescript": "~6.0.2",
34
35
  "vite": "^8.0.4",
35
36
  "vue": "^3.5.0",
36
37
  "vue-tsc": "^3.2.6"
37
38
  }
38
- }
39
+ }