h2l-ranking 0.0.1 → 0.0.2

package/README.md

@@ -10,6 +10,7 @@
 - 📱 响应式设计
 - 🎨 可自定义样式
 - 💡 悬停显示 tooltip（支持描述信息）
+- 🖼️ 内置图片预览器（点击图片放大，支持滚轮/手势缩放）
 
 ## 安装
 
@@ -74,6 +75,7 @@ const rankings = ref({
 | 属性 | 类型 | 必填 | 说明 |
 |------|------|:----:|------|
 | rankings | `Rankings` | 是 | 排行数据 |
+| enableImageViewer | `boolean` | 否 | `true` | 是否启用图片预览器 |
 
 ### Rankings 类型
 

package/dist/index.css

@@ -1,4 +1,71 @@
 
+.h2l-image-viewer[data-v-09434fce] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  padding: 20px;
+}
+.h2l-image-viewer__content[data-v-09434fce] {
+  width: 100%;
+  max-width: 600px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.h2l-image-viewer__content img[data-v-09434fce] {
+  max-width: 100%;
+  height: auto;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+}
+.h2l-image-viewer__close[data-v-09434fce] {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 50%;
+  color: #fff;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.h2l-image-viewer__close[data-v-09434fce]:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+/* 过渡动画 */
+.h2l-image-viewer-enter-active[data-v-09434fce],
+.h2l-image-viewer-leave-active[data-v-09434fce] {
+  transition: opacity 0.2s ease;
+}
+.h2l-image-viewer-enter-active .h2l-image-viewer__content[data-v-09434fce],
+.h2l-image-viewer-leave-active .h2l-image-viewer__content[data-v-09434fce] {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.h2l-image-viewer-enter-from[data-v-09434fce],
+.h2l-image-viewer-leave-to[data-v-09434fce] {
+  opacity: 0;
+}
+.h2l-image-viewer-enter-from .h2l-image-viewer__content[data-v-09434fce],
+.h2l-image-viewer-leave-to .h2l-image-viewer__content[data-v-09434fce] {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+
 .h2l-tooltip[data-v-4cbefa86] {
   position: relative;
   display: inline-flex;
@@ -51,20 +118,20 @@
 }
 
 
-.h2l-ranking[data-v-3b024fe6] {
+.h2l-ranking[data-v-bcf2d064] {
   display: flex;
   border: 1px solid #000;
   background-color: #1a1a1a;
   overflow: hidden;
 }
-.h2l-ranking__labels[data-v-3b024fe6] {
+.h2l-ranking__labels[data-v-bcf2d064] {
   display: flex;
   flex-direction: column;
   min-width: 100px;
   width: 20%;
   border-right: 1px solid #000;
 }
-.h2l-ranking__label[data-v-3b024fe6] {
+.h2l-ranking__label[data-v-bcf2d064] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -74,44 +141,44 @@
   text-align: center;
   border-bottom: 1px solid #000;
 }
-.h2l-ranking__label[data-v-3b024fe6]:last-child {
+.h2l-ranking__label[data-v-bcf2d064]:last-child {
   border-bottom: none;
 }
-.h2l-ranking__label--hang[data-v-3b024fe6] {
+.h2l-ranking__label--hang[data-v-bcf2d064] {
   background-color: #ff0000;
   color: #fff;
 }
-.h2l-ranking__label--upper[data-v-3b024fe6] {
+.h2l-ranking__label--upper[data-v-bcf2d064] {
   background-color: #ff9500;
   color: #fff;
 }
-.h2l-ranking__label--middle[data-v-3b024fe6] {
+.h2l-ranking__label--middle[data-v-bcf2d064] {
   background-color: #ffcc00;
   color: #000;
 }
-.h2l-ranking__label--lower[data-v-3b024fe6] {
+.h2l-ranking__label--lower[data-v-bcf2d064] {
   background-color: #fef4d1;
   color: #000;
 }
-.h2l-ranking__label--la[data-v-3b024fe6] {
+.h2l-ranking__label--la[data-v-bcf2d064] {
   background-color: #ffffff;
   color: #000;
 }
-.h2l-ranking__content[data-v-3b024fe6] {
+.h2l-ranking__content[data-v-bcf2d064] {
   flex: 1;
   display: flex;
   flex-direction: column;
 }
-.h2l-ranking__row[data-v-3b024fe6] {
+.h2l-ranking__row[data-v-bcf2d064] {
   display: flex;
   height: 100px;
   border-bottom: 1px solid #000;
   overflow: hidden;
 }
-.h2l-ranking__row[data-v-3b024fe6]:last-child {
+.h2l-ranking__row[data-v-bcf2d064]:last-child {
   border-bottom: none;
 }
-.h2l-ranking__items[data-v-3b024fe6] {
+.h2l-ranking__items[data-v-bcf2d064] {
   flex: 1;
   display: flex;
   align-items: center;
@@ -124,10 +191,10 @@
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
-.h2l-ranking__items[data-v-3b024fe6]::-webkit-scrollbar {
+.h2l-ranking__items[data-v-bcf2d064]::-webkit-scrollbar {
   display: none;
 }
-.h2l-ranking__item[data-v-3b024fe6] {
+.h2l-ranking__item[data-v-bcf2d064] {
   position: relative;
   width: 84px;
   height: 84px;
@@ -136,11 +203,9 @@
   background-color: #333;
   cursor: pointer;
 }
-.h2l-ranking__item img[data-v-3b024fe6] {
+.h2l-ranking__item img[data-v-bcf2d064] {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-
-/*# sourceMappingURL=index.css.map*/

package/dist/index.d.mts

@@ -17,9 +17,11 @@ interface Rankings {
 //#region src/components/H2lRanking.vue.d.ts
 interface Props {
   rankings: Rankings;
+  enableImageViewer?: boolean;
 }
-declare const __VLS_export: vue.DefineComponent<Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: vue.DefineComponent<Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Props> & Readonly<{}>, {
+  enableImageViewer: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion
-export { _default as H2lRanking, _default as default, type RankingItem, type Rankings };
-//# sourceMappingURL=index.d.mts.map
+export { _default as H2lRanking, _default as default, type RankingItem, type Rankings };

package/dist/index.mjs

@@ -1,228 +1 @@
-import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createTextVNode, createVNode, defineComponent, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, withCtx } from "vue";
-
-//#region \0/plugin-vue/export-helper
-var export_helper_default = (sfc, props) => {
-	const target = sfc.__vccOpts || sfc;
-	for (const [key, val] of props) target[key] = val;
-	return target;
-};
-
-//#endregion
-//#region src/components/H2lTooltip.vue
-const _hoisted_1$1 = { class: "h2l-tooltip__title" };
-const _hoisted_2$1 = {
-	key: 0,
-	class: "h2l-tooltip__divider"
-};
-const _hoisted_3$1 = {
-	key: 1,
-	class: "h2l-tooltip__description"
-};
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-	__name: "H2lTooltip",
-	setup(__props) {
-		const triggerRef = ref();
-		const showTooltip = ref(false);
-		const position = ref({
-			x: 0,
-			y: 0
-		});
-		function handleMouseEnter() {
-			if (!triggerRef.value) return;
-			const rect = triggerRef.value.getBoundingClientRect();
-			position.value = {
-				x: rect.left + rect.width / 2,
-				y: rect.bottom + 8
-			};
-			showTooltip.value = true;
-		}
-		function handleMouseLeave() {
-			showTooltip.value = false;
-		}
-		onMounted(() => {
-			triggerRef.value?.addEventListener("mouseenter", handleMouseEnter);
-			triggerRef.value?.addEventListener("mouseleave", handleMouseLeave);
-		});
-		onUnmounted(() => {
-			triggerRef.value?.removeEventListener("mouseenter", handleMouseEnter);
-			triggerRef.value?.removeEventListener("mouseleave", handleMouseLeave);
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				ref_key: "triggerRef",
-				ref: triggerRef,
-				class: "h2l-tooltip"
-			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true), (openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, { name: "h2l-tooltip" }, {
-				default: withCtx(() => [showTooltip.value ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					class: "h2l-tooltip__content",
-					style: normalizeStyle({
-						left: `${position.value.x}px`,
-						top: `${position.value.y}px`
-					})
-				}, [
-					createElementVNode("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "content", {}, void 0, true)]),
-					_ctx.$slots.description ? (openBlock(), createElementBlock("div", _hoisted_2$1)) : createCommentVNode("v-if", true),
-					_ctx.$slots.description ? (openBlock(), createElementBlock("div", _hoisted_3$1, [renderSlot(_ctx.$slots, "description", {}, void 0, true)])) : createCommentVNode("v-if", true)
-				], 4)) : createCommentVNode("v-if", true)]),
-				_: 3
-			})]))], 512);
-		};
-	}
-});
-var H2lTooltip_default = /* @__PURE__ */ export_helper_default(_sfc_main$1, [["__scopeId", "data-v-4cbefa86"]]);
-
-//#endregion
-//#region src/components/H2lRanking.vue
-const _hoisted_1 = { class: "h2l-ranking__content" };
-const _hoisted_2 = { class: "h2l-ranking__item" };
-const _hoisted_3 = ["src", "alt"];
-const _hoisted_4 = { class: "h2l-ranking__item" };
-const _hoisted_5 = ["src", "alt"];
-const _hoisted_6 = { class: "h2l-ranking__item" };
-const _hoisted_7 = ["src", "alt"];
-const _hoisted_8 = { class: "h2l-ranking__item" };
-const _hoisted_9 = ["src", "alt"];
-const _hoisted_10 = { class: "h2l-ranking__item" };
-const _hoisted_11 = ["src", "alt"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-	__name: "H2lRanking",
-	props: { rankings: {} },
-	setup(__props) {
-		const rootRef = ref();
-		const labelsRef = ref();
-		const rowWidth = ref(0);
-		const rowStyle = computed(() => ({ width: rowWidth.value > 0 ? `${rowWidth.value}px` : void 0 }));
-		onMounted(() => {
-			if (rootRef.value && labelsRef.value) rowWidth.value = rootRef.value.clientWidth - labelsRef.value.clientWidth;
-		});
-		function handleWheel(e) {
-			const target = e.currentTarget;
-			if (e.deltaY !== 0) {
-				e.preventDefault();
-				target.scrollLeft += e.deltaY * .5;
-			}
-		}
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				ref_key: "rootRef",
-				ref: rootRef,
-				class: "h2l-ranking"
-			}, [createElementVNode("div", {
-				ref_key: "labelsRef",
-				ref: labelsRef,
-				class: "h2l-ranking__labels"
-			}, [..._cache[0] || (_cache[0] = [createStaticVNode("<div class=\"h2l-ranking__label h2l-ranking__label--hang\" data-v-3b024fe6> 夯 </div><div class=\"h2l-ranking__label h2l-ranking__label--upper\" data-v-3b024fe6> 顶级 </div><div class=\"h2l-ranking__label h2l-ranking__label--middle\" data-v-3b024fe6> 人上人 </div><div class=\"h2l-ranking__label h2l-ranking__label--lower\" data-v-3b024fe6> NPC </div><div class=\"h2l-ranking__label h2l-ranking__label--la\" data-v-3b024fe6> 拉完了 </div>", 5)])], 512), createElementVNode("div", _hoisted_1, [
-				createElementVNode("div", {
-					class: "h2l-ranking__row",
-					style: normalizeStyle(rowStyle.value)
-				}, [createElementVNode("div", {
-					class: "h2l-ranking__items",
-					onWheel: handleWheel
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rankings.hang, (item, index) => {
-					return openBlock(), createBlock(H2lTooltip_default, { key: `hang-${index}` }, createSlots({
-						default: withCtx(() => [createElementVNode("div", _hoisted_2, [createElementVNode("img", {
-							src: item.url,
-							alt: item.title
-						}, null, 8, _hoisted_3)])]),
-						content: withCtx(() => [createTextVNode(toDisplayString(item.title), 1)]),
-						_: 2
-					}, [item.description ? {
-						name: "description",
-						fn: withCtx(() => [createTextVNode(toDisplayString(item.description), 1)]),
-						key: "0"
-					} : void 0]), 1024);
-				}), 128))], 32)], 4),
-				createElementVNode("div", {
-					class: "h2l-ranking__row",
-					style: normalizeStyle(rowStyle.value)
-				}, [createElementVNode("div", {
-					class: "h2l-ranking__items",
-					onWheel: handleWheel
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rankings.upper, (item, index) => {
-					return openBlock(), createBlock(H2lTooltip_default, { key: `upper-${index}` }, createSlots({
-						default: withCtx(() => [createElementVNode("div", _hoisted_4, [createElementVNode("img", {
-							src: item.url,
-							alt: item.title
-						}, null, 8, _hoisted_5)])]),
-						content: withCtx(() => [createTextVNode(toDisplayString(item.title), 1)]),
-						_: 2
-					}, [item.description ? {
-						name: "description",
-						fn: withCtx(() => [createTextVNode(toDisplayString(item.description), 1)]),
-						key: "0"
-					} : void 0]), 1024);
-				}), 128))], 32)], 4),
-				createElementVNode("div", {
-					class: "h2l-ranking__row",
-					style: normalizeStyle(rowStyle.value)
-				}, [createElementVNode("div", {
-					class: "h2l-ranking__items",
-					onWheel: handleWheel
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rankings.middle, (item, index) => {
-					return openBlock(), createBlock(H2lTooltip_default, { key: `middle-${index}` }, createSlots({
-						default: withCtx(() => [createElementVNode("div", _hoisted_6, [createElementVNode("img", {
-							src: item.url,
-							alt: item.title
-						}, null, 8, _hoisted_7)])]),
-						content: withCtx(() => [createTextVNode(toDisplayString(item.title), 1)]),
-						_: 2
-					}, [item.description ? {
-						name: "description",
-						fn: withCtx(() => [createTextVNode(toDisplayString(item.description), 1)]),
-						key: "0"
-					} : void 0]), 1024);
-				}), 128))], 32)], 4),
-				createElementVNode("div", {
-					class: "h2l-ranking__row",
-					style: normalizeStyle(rowStyle.value)
-				}, [createElementVNode("div", {
-					class: "h2l-ranking__items",
-					onWheel: handleWheel
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rankings.lower, (item, index) => {
-					return openBlock(), createBlock(H2lTooltip_default, { key: `lower-${index}` }, createSlots({
-						default: withCtx(() => [createElementVNode("div", _hoisted_8, [createElementVNode("img", {
-							src: item.url,
-							alt: item.title
-						}, null, 8, _hoisted_9)])]),
-						content: withCtx(() => [createTextVNode(toDisplayString(item.title), 1)]),
-						_: 2
-					}, [item.description ? {
-						name: "description",
-						fn: withCtx(() => [createTextVNode(toDisplayString(item.description), 1)]),
-						key: "0"
-					} : void 0]), 1024);
-				}), 128))], 32)], 4),
-				createElementVNode("div", {
-					class: "h2l-ranking__row",
-					style: normalizeStyle(rowStyle.value)
-				}, [createElementVNode("div", {
-					class: "h2l-ranking__items",
-					onWheel: handleWheel
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rankings.la, (item, index) => {
-					return openBlock(), createBlock(H2lTooltip_default, { key: `la-${index}` }, createSlots({
-						default: withCtx(() => [createElementVNode("div", _hoisted_10, [createElementVNode("img", {
-							src: item.url,
-							alt: item.title
-						}, null, 8, _hoisted_11)])]),
-						content: withCtx(() => [createTextVNode(toDisplayString(item.title), 1)]),
-						_: 2
-					}, [item.description ? {
-						name: "description",
-						fn: withCtx(() => [createTextVNode(toDisplayString(item.description), 1)]),
-						key: "0"
-					} : void 0]), 1024);
-				}), 128))], 32)], 4)
-			])], 512);
-		};
-	}
-});
-var H2lRanking_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["__scopeId", "data-v-3b024fe6"]]);
-
-//#endregion
-//#region src/index.ts
-var src_default = H2lRanking_default;
-
-//#endregion
-export { H2lRanking_default as H2lRanking, src_default as default };
-//# sourceMappingURL=index.mjs.map
+import{Fragment as e,Teleport as t,Transition as n,computed as r,createBlock as i,createCommentVNode as a,createElementBlock as o,createElementVNode as s,createSlots as c,createStaticVNode as l,createTextVNode as u,createVNode as d,defineComponent as f,normalizeStyle as p,onMounted as m,onUnmounted as h,openBlock as g,ref as _,renderList as v,renderSlot as y,toDisplayString as b,watch as x,withCtx as S,withModifiers as C}from"vue";var w=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n};const T={class:`h2l-image-viewer__content`},E=[`src`],D=.5;var O=w(f({__name:`H2lImageViewer`,props:{show:{type:Boolean},src:{}},emits:[`update:show`],setup(e,{emit:c}){let l=e,u=c,f=_(),v=_(1),y=_({active:!1,startDistance:0,startScale:1,centerX:0,centerY:0}),b=r(()=>({transform:`scale(${v.value})`,transformOrigin:`center center`,transition:y.value.active?`none`:`transform 0.2s ease-out`}));function w(){u(`update:show`,!1),setTimeout(()=>{v.value=1},200)}function O(e){e.preventDefault();let t=e.deltaY>0?-.1:.1;v.value=Math.max(D,Math.min(5,v.value+t))}function k(e){if(e.touches.length===2){e.preventDefault();let t=e.touches[0],n=e.touches[1],r=Math.hypot(n.clientX-t.clientX,n.clientY-t.clientY),i=(t.clientX+n.clientX)/2,a=(t.clientY+n.clientY)/2;y.value={active:!0,startDistance:r,startScale:v.value,centerX:i,centerY:a}}}function A(e){if(e.touches.length===2&&y.value.active){e.preventDefault();let t=e.touches[0],n=e.touches[1],r=Math.hypot(n.clientX-t.clientX,n.clientY-t.clientY)/y.value.startDistance;v.value=Math.max(D,Math.min(5,y.value.startScale*r))}}function j(){y.value.active=!1}function M(e){e.key===`Escape`&&w()}return x(()=>l.show,e=>{e||(v.value=1)}),m(()=>{document.addEventListener(`keydown`,M)}),h(()=>{document.removeEventListener(`keydown`,M)}),(r,c)=>(g(),i(t,{to:`body`},[d(n,{name:`h2l-image-viewer`},{default:S(()=>[e.show?(g(),o(`div`,{key:0,ref_key:`containerRef`,ref:f,class:`h2l-image-viewer`,onWheel:O,onTouchstart:k,onTouchmove:A,onTouchend:j,onClick:C(w,[`self`])},[s(`button`,{class:`h2l-image-viewer__close`,onClick:w},[...c[0]||=[s(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`},[s(`path`,{d:`M18 6L6 18M6 6l12 12`})],-1)]]),s(`div`,T,[s(`img`,{src:e.src,style:p(b.value),alt:`Preview`},null,12,E)])],544)):a(`v-if`,!0)]),_:1})]))}}),[[`__scopeId`,`data-v-09434fce`]]);const k={class:`h2l-tooltip__title`},A={key:0,class:`h2l-tooltip__divider`},j={key:1,class:`h2l-tooltip__description`};var M=w(f({__name:`H2lTooltip`,setup(e){let r=_(),c=_(!1),l=_({x:0,y:0});function u(){if(!r.value)return;let e=r.value.getBoundingClientRect();l.value={x:e.left+e.width/2,y:e.bottom+8},c.value=!0}function f(){c.value=!1}return m(()=>{r.value?.addEventListener(`mouseenter`,u),r.value?.addEventListener(`mouseleave`,f)}),h(()=>{r.value?.removeEventListener(`mouseenter`,u),r.value?.removeEventListener(`mouseleave`,f)}),(e,u)=>(g(),o(`div`,{ref_key:`triggerRef`,ref:r,class:`h2l-tooltip`},[y(e.$slots,`default`,{},void 0,!0),(g(),i(t,{to:`body`},[d(n,{name:`h2l-tooltip`},{default:S(()=>[c.value?(g(),o(`div`,{key:0,class:`h2l-tooltip__content`,style:p({left:`${l.value.x}px`,top:`${l.value.y}px`})},[s(`div`,k,[y(e.$slots,`content`,{},void 0,!0)]),e.$slots.description?(g(),o(`div`,A)):a(`v-if`,!0),e.$slots.description?(g(),o(`div`,j,[y(e.$slots,`description`,{},void 0,!0)])):a(`v-if`,!0)],4)):a(`v-if`,!0)]),_:3})]))],512))}}),[[`__scopeId`,`data-v-4cbefa86`]]);const N={class:`h2l-ranking__content`},P=[`onClick`],F=[`src`,`alt`],I=[`onClick`],L=[`src`,`alt`],R=[`onClick`],z=[`src`,`alt`],B=[`onClick`],V=[`src`,`alt`],H=[`onClick`],U=[`src`,`alt`];var W=w(f({__name:`H2lRanking`,props:{rankings:{},enableImageViewer:{type:Boolean,default:!0}},setup(t){let n=t,a=_(),f=_(),h=_(0),y=_(!1),x=_(``),C=r(()=>({width:h.value>0?`${h.value}px`:void 0}));m(()=>{a.value&&f.value&&(h.value=a.value.clientWidth-f.value.clientWidth)});function w(e){let t=e.currentTarget;e.deltaY!==0&&(e.preventDefault(),t.scrollLeft+=e.deltaY*.5)}function T(e){n.enableImageViewer&&(x.value=e,y.value=!0)}return(n,r)=>(g(),o(`div`,{ref_key:`rootRef`,ref:a,class:`h2l-ranking`},[d(O,{show:y.value,"onUpdate:show":r[0]||=e=>y.value=e,src:x.value},null,8,[`show`,`src`]),s(`div`,{ref_key:`labelsRef`,ref:f,class:`h2l-ranking__labels`},[...r[1]||=[l(`<div class="h2l-ranking__label h2l-ranking__label--hang" data-v-bcf2d064> 夯 </div><div class="h2l-ranking__label h2l-ranking__label--upper" data-v-bcf2d064> 顶级 </div><div class="h2l-ranking__label h2l-ranking__label--middle" data-v-bcf2d064> 人上人 </div><div class="h2l-ranking__label h2l-ranking__label--lower" data-v-bcf2d064> NPC </div><div class="h2l-ranking__label h2l-ranking__label--la" data-v-bcf2d064> 拉完了 </div>`,5)]],512),s(`div`,N,[s(`div`,{class:`h2l-ranking__row`,style:p(C.value)},[s(`div`,{class:`h2l-ranking__items`,onWheel:w},[(g(!0),o(e,null,v(t.rankings.hang,(e,t)=>(g(),i(M,{key:`hang-${t}`},c({default:S(()=>[s(`div`,{class:`h2l-ranking__item`,onClick:t=>T(e.url)},[s(`img`,{src:e.url,alt:e.title},null,8,F)],8,P)]),content:S(()=>[u(b(e.title),1)]),_:2},[e.description?{name:`description`,fn:S(()=>[u(b(e.description),1)]),key:`0`}:void 0]),1024))),128))],32)],4),s(`div`,{class:`h2l-ranking__row`,style:p(C.value)},[s(`div`,{class:`h2l-ranking__items`,onWheel:w},[(g(!0),o(e,null,v(t.rankings.upper,(e,t)=>(g(),i(M,{key:`upper-${t}`},c({default:S(()=>[s(`div`,{class:`h2l-ranking__item`,onClick:t=>T(e.url)},[s(`img`,{src:e.url,alt:e.title},null,8,L)],8,I)]),content:S(()=>[u(b(e.title),1)]),_:2},[e.description?{name:`description`,fn:S(()=>[u(b(e.description),1)]),key:`0`}:void 0]),1024))),128))],32)],4),s(`div`,{class:`h2l-ranking__row`,style:p(C.value)},[s(`div`,{class:`h2l-ranking__items`,onWheel:w},[(g(!0),o(e,null,v(t.rankings.middle,(e,t)=>(g(),i(M,{key:`middle-${t}`},c({default:S(()=>[s(`div`,{class:`h2l-ranking__item`,onClick:t=>T(e.url)},[s(`img`,{src:e.url,alt:e.title},null,8,z)],8,R)]),content:S(()=>[u(b(e.title),1)]),_:2},[e.description?{name:`description`,fn:S(()=>[u(b(e.description),1)]),key:`0`}:void 0]),1024))),128))],32)],4),s(`div`,{class:`h2l-ranking__row`,style:p(C.value)},[s(`div`,{class:`h2l-ranking__items`,onWheel:w},[(g(!0),o(e,null,v(t.rankings.lower,(e,t)=>(g(),i(M,{key:`lower-${t}`},c({default:S(()=>[s(`div`,{class:`h2l-ranking__item`,onClick:t=>T(e.url)},[s(`img`,{src:e.url,alt:e.title},null,8,V)],8,B)]),content:S(()=>[u(b(e.title),1)]),_:2},[e.description?{name:`description`,fn:S(()=>[u(b(e.description),1)]),key:`0`}:void 0]),1024))),128))],32)],4),s(`div`,{class:`h2l-ranking__row`,style:p(C.value)},[s(`div`,{class:`h2l-ranking__items`,onWheel:w},[(g(!0),o(e,null,v(t.rankings.la,(e,t)=>(g(),i(M,{key:`la-${t}`},c({default:S(()=>[s(`div`,{class:`h2l-ranking__item`,onClick:t=>T(e.url)},[s(`img`,{src:e.url,alt:e.title},null,8,U)],8,H)]),content:S(()=>[u(b(e.title),1)]),_:2},[e.description?{name:`description`,fn:S(()=>[u(b(e.description),1)]),key:`0`}:void 0]),1024))),128))],32)],4)])],512))}}),[[`__scopeId`,`data-v-bcf2d064`]]),G=W;export{W as H2lRanking,G as default};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "h2l-ranking",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "hang to la ranking",
   "author": "imba97",
   "license": "MIT",
@@ -57,7 +57,7 @@
   },
   "scripts": {
     "dev": "tsdown --watch",
-    "build": "tsdown",
+    "build": "tsdown --minify",
     "test": "vitest",
     "lint": "eslint . --cache",
     "release": "bumpp"