tn-data-swiper-pro 1.0.0

package/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

package/dist/tn-data-swiper-pro.css

@@ -0,0 +1,2 @@
+.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%}
+/*$vite$:1*/

package/dist/tn-data-swiper.es.js

@@ -0,0 +1,122 @@
+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";
+//#region src/components/TnSwiper.vue?vue&type=script&setup=true&lang.ts
+var h = { class: "tn-slide-item" }, g = ["src"], _ = ["src"], v = { class: "tn-text-group" }, y = {
+	key: 0,
+	class: "tn-tag-row"
+}, b = { class: "tn-tag" }, x = {
+	key: 1,
+	class: "tn-title"
+}, S = { class: "tn-slide-item" }, C = ["src"], w = ["data-index", "onClick"], T = { class: "tn-thumb-wrapper" }, E = ["src"], D = {
+	key: 0,
+	class: "tn-progress-layer"
+}, O = { class: "tn-progress-track" }, k = /* @__PURE__ */ ((e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+})(/* @__PURE__ */ a({
+	__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(a, { emit: k }) {
+		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(() => {
+			let e = A.items.length;
+			return M.value > e ? 0 : M.value < 1 ? e - 1 : M.value - 1;
+		}), B = t(() => ({
+			"--switch-speed": `${A.switchSpeed}s`,
+			"--blur-val": A.blurValue,
+			"--mask-op": A.maskOpacity
+		})), V = t(() => ({
+			transform: `translate3d(${-M.value * 100}%, 0, 0)`,
+			transition: N.value ? "transform var(--switch-speed) cubic-bezier(0.4, 0, 0.2, 1)" : "none"
+		})), H = (e) => ({
+			backdropFilter: e ? "blur(0px)" : "blur(var(--blur-val))",
+			backgroundColor: e ? "transparent" : "rgba(255, 255, 255, var(--mask-op))"
+		}), U = t(() => ({
+			transform: `scaleX(${P.value / 100})`,
+			transition: F.value ? `transform ${A.interval}ms linear` : "none"
+		})), W = (e) => {
+			e.propertyName === "transform" && P.value === 100 && (L.value = !1);
+		}, G = () => {
+			clearTimeout(R), F.value = !1, P.value = 0, L.value = !0, o(() => {
+				setTimeout(() => {
+					F.value = !0, P.value = 100;
+					let e = () => {
+						I.value ? R = setTimeout(e, 100) : (M.value++, N.value = !0, G());
+					};
+					R = setTimeout(e, A.interval);
+				}, 50);
+			});
+		}, K = (e) => {
+			I.value = !0;
+			let t = document.elementFromPoint(e.clientX, e.clientY)?.closest(".tn-thumb-item");
+			if (t) {
+				let e = parseInt(t.dataset.index || "0") + 1;
+				M.value !== e && (N.value = !0, M.value = e, L.value = !1, G());
+			}
+		}, q = () => {
+			I.value = !1;
+		}, J = (e) => {
+			j("clickItem", e), A.autoLink && e.url && e.url.startsWith("http") && window.open(e.url, "_blank");
+		}, Y = () => {
+			let e = A.items.length;
+			M.value >= e + 1 ? (N.value = !1, M.value = 1) : M.value <= 0 && (N.value = !1, M.value = e);
+		};
+		return l(() => {
+			A.items.length >= 3 && G();
+		}), u(() => clearTimeout(R)), (t, o) => a.items.length >= 3 ? (d(), r("div", {
+			key: 0,
+			class: "tn-swiper-scope",
+			style: c(B.value)
+		}, [i("div", {
+			class: "tn-main-view",
+			onClick: o[0] ||= (e) => J(a.items[z.value])
+		}, [i("div", {
+			class: "tn-swiper-track",
+			style: c(V.value),
+			onTransitionend: Y
+		}, [
+			i("div", h, [i("img", { src: a.items[a.items.length - 1].mainUrl }, null, 8, g)]),
+			(d(!0), r(e, null, p(a.items, (e, t) => (d(), r("div", {
+				key: t,
+				class: "tn-slide-item"
+			}, [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)),
+			i("div", S, [i("img", { src: a.items[0].mainUrl }, null, 8, C)])
+		], 36)]), i("div", {
+			class: "tn-thumb-bar",
+			onPointermove: K,
+			onPointerleave: q
+		}, [(d(!0), r(e, null, p(a.items, (e, t) => (d(), r("div", {
+			key: t,
+			class: s(["tn-thumb-item", { "is-active": z.value === t }]),
+			style: c({ width: 100 / a.items.length + "%" }),
+			"data-index": t,
+			onClick: (t) => J(e)
+		}, [i("div", T, [
+			i("img", { src: e.thumbUrl || e.mainUrl }, null, 8, E),
+			i("div", {
+				class: "tn-mask",
+				style: c(H(z.value === t))
+			}, null, 4),
+			z.value === t && L.value ? (d(), r("div", D, [i("div", O, [i("div", {
+				class: "tn-progress-bar",
+				style: c(U.value),
+				onTransitionend: W
+			}, null, 36)])])) : n("", !0)
+		])], 14, w))), 128))], 32)], 4)) : n("", !0);
+	}
+}), [["__scopeId", "data-v-6364501b"]]), A = { install: (e) => {
+	e.component("TnSwiper", k);
+} };
+//#endregion
+export { k as TnSwiper, A as default };

package/dist/tn-data-swiper.umd.cjs

@@ -0,0 +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)}}});

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "tn-data-swiper-pro",
+  "version": "1.0.0",
+  "description": "高性能 Vue3 跨端轮播组件",
+  "type": "module",
+  "main": "dist/tn-data-swiper.umd.cjs",
+  "module": "dist/tn-data-swiper.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/tn-data-swiper.es.js",
+      "require": "./dist/tn-data-swiper.umd.cjs"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build", 
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.12.2",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/tsconfig": "^0.9.1",
+    "sass-embedded": "^1.99.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.4",
+    "vue": "^3.5.0",
+    "vue-tsc": "^3.2.6"
+  }
+}