h2l-ranking 0.0.3 → 0.1.1

package/README.md

@@ -1,16 +1,22 @@
 # h2l-ranking
 
-从夯到拉排行组件。
+一个简单易用的 Vue 3 从夯到拉排行组件
 
-一个简单易用的 Vue 3 排行展示组件，支持横向滚动和悬停提示。
+![](https://github.com/imba97/h2l-ranking/blob/main/.github/screenshot/component.png?raw=true)
 
 ## 特性
 
 - 🖱️ 鼠标滚轮横向滚动
-- 📱 响应式设计
+- 📱 响应式设计，自适应窗口大小
 - 🎨 可自定义样式
-- 💡 悬停显示 tooltip（支持描述信息）
-- 🖼️ 内置图片预览器（点击图片放大，支持滚轮/手势缩放）
+- 💡 悬停显示 tooltip（PC 端，支持标题和描述）
+- 🖼️ 内置图片预览器
+  - 点击图片放大预览
+  - PC 端滚轮缩放，移动端双指缩放
+  - 缩放后支持拖拽移动
+  - 显示标题和描述信息
+  - 支持外部链接跳转
+- ⌨️ ESC 键关闭预览
 
 ## 安装
 

package/dist/index.css

@@ -1,5 +1,5 @@
 
-.h2l-image-viewer[data-v-ff56aeed] {
+.h2l-image-viewer[data-v-940de796] {
   position: fixed;
   top: 0;
   left: 0;
@@ -12,21 +12,23 @@
   z-index: 9999;
   padding: 20px;
 }
-.h2l-image-viewer__content[data-v-ff56aeed] {
+.h2l-image-viewer__content[data-v-940de796] {
   width: 100%;
   max-width: 600px;
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
+  z-index: 0;
 }
-.h2l-image-viewer__content img[data-v-ff56aeed] {
+.h2l-image-viewer__content img[data-v-940de796] {
   max-width: 100%;
   height: auto;
   user-select: none;
   -webkit-user-select: none;
   touch-action: none;
 }
-.h2l-image-viewer__close[data-v-ff56aeed] {
+.h2l-image-viewer__close[data-v-940de796] {
   position: absolute;
   top: 20px;
   right: 20px;
@@ -36,16 +38,18 @@
   align-items: center;
   justify-content: center;
   background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(4px);
   border: none;
   border-radius: 50%;
   color: #fff;
   cursor: pointer;
   transition: background-color 0.2s;
+  z-index: 1;
 }
-.h2l-image-viewer__close[data-v-ff56aeed]:hover {
+.h2l-image-viewer__close[data-v-940de796]:hover {
   background-color: rgba(255, 255, 255, 0.2);
 }
-.h2l-image-viewer__link[data-v-ff56aeed] {
+.h2l-image-viewer__link[data-v-940de796] {
   position: absolute;
   top: 20px;
   right: 72px;
@@ -55,42 +59,102 @@
   align-items: center;
   justify-content: center;
   background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(4px);
   border: none;
   border-radius: 50%;
   color: #fff;
   cursor: pointer;
   transition: background-color 0.2s;
   text-decoration: none;
+  z-index: 1;
+}
+.h2l-image-viewer__link[data-v-940de796]:hover {
+  background-color: rgba(255, 255, 255, 0.2);
 }
-.h2l-image-viewer__link[data-v-ff56aeed]:hover {
+.h2l-image-viewer__info[data-v-940de796] {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10px);
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  padding: 16px 20px;
+}
+.h2l-image-viewer__info-header[data-v-940de796] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.h2l-image-viewer__title[data-v-940de796] {
+  font-size: 14px;
+  font-weight: 600;
+  flex: 1;
+  min-width: 0;
+}
+.h2l-image-viewer__description[data-v-940de796] {
+  margin-top: 12px;
+}
+.h2l-image-viewer__description-text[data-v-940de796] {
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  transition: -webkit-line-clamp 0.3s ease;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 12px;
+}
+.h2l-image-viewer__description-text--expanded[data-v-940de796] {
+  -webkit-line-clamp: unset;
+  max-height: none;
+}
+.h2l-image-viewer__more[data-v-940de796] {
+  padding: 2px 8px;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+.h2l-image-viewer__more[data-v-940de796]:hover {
+  color: #fff;
   background-color: rgba(255, 255, 255, 0.2);
 }
 
 /* 过渡动画 */
-.h2l-image-viewer-enter-active[data-v-ff56aeed],
-.h2l-image-viewer-leave-active[data-v-ff56aeed] {
+.h2l-image-viewer-enter-active[data-v-940de796],
+.h2l-image-viewer-leave-active[data-v-940de796] {
   transition: opacity 0.2s ease;
 }
-.h2l-image-viewer-enter-active .h2l-image-viewer__content[data-v-ff56aeed],
-.h2l-image-viewer-leave-active .h2l-image-viewer__content[data-v-ff56aeed] {
+.h2l-image-viewer-enter-active .h2l-image-viewer__content[data-v-940de796],
+.h2l-image-viewer-leave-active .h2l-image-viewer__content[data-v-940de796] {
   transition: opacity 0.2s ease, transform 0.2s ease;
 }
-.h2l-image-viewer-enter-from[data-v-ff56aeed],
-.h2l-image-viewer-leave-to[data-v-ff56aeed] {
+.h2l-image-viewer-enter-from[data-v-940de796],
+.h2l-image-viewer-leave-to[data-v-940de796] {
   opacity: 0;
 }
-.h2l-image-viewer-enter-from .h2l-image-viewer__content[data-v-ff56aeed],
-.h2l-image-viewer-leave-to .h2l-image-viewer__content[data-v-ff56aeed] {
+.h2l-image-viewer-enter-from .h2l-image-viewer__content[data-v-940de796],
+.h2l-image-viewer-leave-to .h2l-image-viewer__content[data-v-940de796] {
   opacity: 0;
   transform: scale(0.9);
 }
 
 
-.h2l-tooltip[data-v-4cbefa86] {
+.h2l-tooltip[data-v-c8ed1c2a] {
   position: relative;
   display: inline-flex;
 }
-.h2l-tooltip__content[data-v-4cbefa86] {
+.h2l-tooltip__content[data-v-c8ed1c2a] {
   position: fixed;
   transform: translate(-50%, 0);
   padding: 6px 12px;
@@ -105,7 +169,7 @@
   flex-direction: column;
   gap: 4px;
 }
-.h2l-tooltip__content[data-v-4cbefa86]::after {
+.h2l-tooltip__content[data-v-c8ed1c2a]::after {
   content: '';
   position: absolute;
   bottom: 100%;
@@ -114,12 +178,12 @@
   border: 4px solid transparent;
   border-bottom-color: rgba(0, 0, 0, 0.85);
 }
-.h2l-tooltip__divider[data-v-4cbefa86] {
+.h2l-tooltip__divider[data-v-c8ed1c2a] {
   height: 1px;
   background-color: rgba(255, 255, 255, 0.2);
   margin: 2px 0;
 }
-.h2l-tooltip__description[data-v-4cbefa86] {
+.h2l-tooltip__description[data-v-c8ed1c2a] {
   font-size: 11px;
   color: rgba(255, 255, 255, 0.8);
   word-wrap: break-word;
@@ -127,31 +191,32 @@
 }
 
 /* 进入和离开动画 */
-.h2l-tooltip-enter-active[data-v-4cbefa86],
-.h2l-tooltip-leave-active[data-v-4cbefa86] {
+.h2l-tooltip-enter-active[data-v-c8ed1c2a],
+.h2l-tooltip-leave-active[data-v-c8ed1c2a] {
   transition: all 0.25s ease;
 }
-.h2l-tooltip-enter-from[data-v-4cbefa86],
-.h2l-tooltip-leave-to[data-v-4cbefa86] {
+.h2l-tooltip-enter-from[data-v-c8ed1c2a],
+.h2l-tooltip-leave-to[data-v-c8ed1c2a] {
   opacity: 0;
   transform: translate(-50%, -10px);
 }
 
 
-.h2l-ranking[data-v-5e5b9727] {
+.h2l-ranking[data-v-c1a2322f] {
   display: flex;
   border: 1px solid #000;
   background-color: #1a1a1a;
   overflow: hidden;
 }
-.h2l-ranking__labels[data-v-5e5b9727] {
+.h2l-ranking__labels[data-v-c1a2322f] {
   display: flex;
   flex-direction: column;
+  max-width: 120px;
   min-width: 100px;
   width: 20%;
   border-right: 1px solid #000;
 }
-.h2l-ranking__label[data-v-5e5b9727] {
+.h2l-ranking__label[data-v-c1a2322f] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -161,44 +226,44 @@
   text-align: center;
   border-bottom: 1px solid #000;
 }
-.h2l-ranking__label[data-v-5e5b9727]:last-child {
+.h2l-ranking__label[data-v-c1a2322f]:last-child {
   border-bottom: none;
 }
-.h2l-ranking__label--hang[data-v-5e5b9727] {
+.h2l-ranking__label--hang[data-v-c1a2322f] {
   background-color: #ff0000;
   color: #fff;
 }
-.h2l-ranking__label--upper[data-v-5e5b9727] {
+.h2l-ranking__label--upper[data-v-c1a2322f] {
   background-color: #ff9500;
   color: #fff;
 }
-.h2l-ranking__label--middle[data-v-5e5b9727] {
+.h2l-ranking__label--middle[data-v-c1a2322f] {
   background-color: #ffcc00;
   color: #000;
 }
-.h2l-ranking__label--lower[data-v-5e5b9727] {
+.h2l-ranking__label--lower[data-v-c1a2322f] {
   background-color: #fef4d1;
   color: #000;
 }
-.h2l-ranking__label--la[data-v-5e5b9727] {
+.h2l-ranking__label--la[data-v-c1a2322f] {
   background-color: #ffffff;
   color: #000;
 }
-.h2l-ranking__content[data-v-5e5b9727] {
+.h2l-ranking__content[data-v-c1a2322f] {
   flex: 1;
   display: flex;
   flex-direction: column;
 }
-.h2l-ranking__row[data-v-5e5b9727] {
+.h2l-ranking__row[data-v-c1a2322f] {
   display: flex;
   height: 100px;
   border-bottom: 1px solid #000;
   overflow: hidden;
 }
-.h2l-ranking__row[data-v-5e5b9727]:last-child {
+.h2l-ranking__row[data-v-c1a2322f]:last-child {
   border-bottom: none;
 }
-.h2l-ranking__items[data-v-5e5b9727] {
+.h2l-ranking__items[data-v-c1a2322f] {
   flex: 1;
   display: flex;
   align-items: center;
@@ -211,10 +276,10 @@
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
-.h2l-ranking__items[data-v-5e5b9727]::-webkit-scrollbar {
+.h2l-ranking__items[data-v-c1a2322f]::-webkit-scrollbar {
   display: none;
 }
-.h2l-ranking__item[data-v-5e5b9727] {
+.h2l-ranking__item[data-v-c1a2322f] {
   position: relative;
   width: 84px;
   height: 84px;
@@ -223,7 +288,7 @@
   background-color: #333;
   cursor: pointer;
 }
-.h2l-ranking__item img[data-v-5e5b9727] {
+.h2l-ranking__item img[data-v-c1a2322f] {
   width: 100%;
   height: 100%;
   object-fit: cover;

package/dist/index.mjs

@@ -1 +1 @@
-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,unref as x,watch as S,withCtx as C,withModifiers as w}from"vue";const T={xmlns:`http://www.w3.org/2000/svg`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`},E=f({__name:`CloseIcon`,setup(e){return(e,t)=>(g(),o(`svg`,T,[...t[0]||=[s(`path`,{d:`M18 6L6 18M6 6l12 12`},null,-1)]]))}}),D={xmlns:`http://www.w3.org/2000/svg`,width:`24`,height:`24`,viewBox:`0 0 24 24`},O=f({__name:`ExternalLinkIcon`,setup(e){return(e,t)=>(g(),o(`svg`,D,[...t[0]||=[s(`path`,{fill:`currentColor`,d:`M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2zM14 3v2h3.59l-9.83 9.83l1.41 1.41L19 6.41V10h2V3z`},null,-1)]]))}});var k=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n};const A=[`href`],j={class:`h2l-image-viewer__content`},M=[`src`],N=.5;var P=k(f({__name:`H2lImageViewer`,props:{show:{type:Boolean},src:{},url:{}},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 T(){u(`update:show`,!1),setTimeout(()=>{v.value=1},200)}function D(e){e.preventDefault();let t=e.deltaY>0?-.1:.1;v.value=Math.max(N,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 P(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(N,Math.min(5,y.value.startScale*r))}}function F(){y.value.active=!1}function I(e){e.key===`Escape`&&T()}return S(()=>l.show,e=>{e||(v.value=1)}),m(()=>{document.addEventListener(`keydown`,I)}),h(()=>{document.removeEventListener(`keydown`,I)}),(r,c)=>(g(),i(t,{to:`body`},[d(n,{name:`h2l-image-viewer`},{default:C(()=>[e.show?(g(),o(`div`,{key:0,ref_key:`containerRef`,ref:f,class:`h2l-image-viewer`,onWheel:D,onTouchstart:k,onTouchmove:P,onTouchend:F,onClick:w(T,[`self`])},[s(`button`,{class:`h2l-image-viewer__close`,onClick:T},[d(x(E))]),e.url?(g(),o(`a`,{key:0,href:e.url,target:`_blank`,rel:`noopener noreferrer`,class:`h2l-image-viewer__link`,title:`打开链接`},[d(x(O))],8,A)):a(`v-if`,!0),s(`div`,j,[s(`img`,{src:e.src,style:p(b.value),alt:`Preview`},null,12,M)])],544)):a(`v-if`,!0)]),_:1})]))}}),[[`__scopeId`,`data-v-ff56aeed`]]);const F={class:`h2l-tooltip__title`},I={key:0,class:`h2l-tooltip__divider`},L={key:1,class:`h2l-tooltip__description`};var R=k(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:C(()=>[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`,F,[y(e.$slots,`content`,{},void 0,!0)]),e.$slots.description?(g(),o(`div`,I)):a(`v-if`,!0),e.$slots.description?(g(),o(`div`,L,[y(e.$slots,`description`,{},void 0,!0)])):a(`v-if`,!0)],4)):a(`v-if`,!0)]),_:3})]))],512))}}),[[`__scopeId`,`data-v-4cbefa86`]]);const z={class:`h2l-ranking__content`},B=[`onClick`],V=[`src`,`alt`],H=[`onClick`],U=[`src`,`alt`],W=[`onClick`],G=[`src`,`alt`],K=[`onClick`],q=[`src`,`alt`],J=[`onClick`],Y=[`src`,`alt`];var X=k(f({__name:`H2lRanking`,props:{rankings:{},enableImageViewer:{type:Boolean,default:!0}},setup(t){let n=t,a=_(),f=_(),h=_(0),y=_(!1),x=_(``),S=_(``),w=r(()=>({width:h.value>0?`${h.value}px`:void 0}));m(()=>{a.value&&f.value&&(h.value=a.value.clientWidth-f.value.clientWidth)});function T(e){let t=e.currentTarget;e.deltaY!==0&&(e.preventDefault(),t.scrollLeft+=e.deltaY*.5)}function E(e,t){n.enableImageViewer&&(x.value=e,S.value=t||``,y.value=!0)}return(n,r)=>(g(),o(`div`,{ref_key:`rootRef`,ref:a,class:`h2l-ranking`},[d(P,{show:y.value,"onUpdate:show":r[0]||=e=>y.value=e,src:x.value,url:S.value},null,8,[`show`,`src`,`url`]),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-5e5b9727> 夯 </div><div class="h2l-ranking__label h2l-ranking__label--upper" data-v-5e5b9727> 顶级 </div><div class="h2l-ranking__label h2l-ranking__label--middle" data-v-5e5b9727> 人上人 </div><div class="h2l-ranking__label h2l-ranking__label--lower" data-v-5e5b9727> NPC </div><div class="h2l-ranking__label h2l-ranking__label--la" data-v-5e5b9727> 拉完了 </div>`,5)]],512),s(`div`,z,[s(`div`,{class:`h2l-ranking__row`,style:p(w.value)},[s(`div`,{class:`h2l-ranking__items`,onWheel:T},[(g(!0),o(e,null,v(t.rankings.hang,(e,t)=>(g(),i(R,{key:`hang-${t}`},c({default:C(()=>[s(`div`,{class:`h2l-ranking__item`,onClick:t=>E(e.cover,e.url)},[s(`img`,{src:e.cover,alt:e.title},null,8,V)],8,B)]),content:C(()=>[u(b(e.title),1)]),_:2},[e.description?{name:`description`,fn:C(()=>[u(b(e.description),1)]),key:`0`}:void 0]),1024))),128))],32)],4),s(`div`,{class:`h2l-ranking__row`,style:p(w.value)},[s(`div`,{class:`h2l-ranking__items`,onWheel:T},[(g(!0),o(e,null,v(t.rankings.upper,(e,t)=>(g(),i(R,{key:`upper-${t}`},c({default:C(()=>[s(`div`,{class:`h2l-ranking__item`,onClick:t=>E(e.cover,e.url)},[s(`img`,{src:e.cover,alt:e.title},null,8,U)],8,H)]),content:C(()=>[u(b(e.title),1)]),_:2},[e.description?{name:`description`,fn:C(()=>[u(b(e.description),1)]),key:`0`}:void 0]),1024))),128))],32)],4),s(`div`,{class:`h2l-ranking__row`,style:p(w.value)},[s(`div`,{class:`h2l-ranking__items`,onWheel:T},[(g(!0),o(e,null,v(t.rankings.middle,(e,t)=>(g(),i(R,{key:`middle-${t}`},c({default:C(()=>[s(`div`,{class:`h2l-ranking__item`,onClick:t=>E(e.cover,e.url)},[s(`img`,{src:e.cover,alt:e.title},null,8,G)],8,W)]),content:C(()=>[u(b(e.title),1)]),_:2},[e.description?{name:`description`,fn:C(()=>[u(b(e.description),1)]),key:`0`}:void 0]),1024))),128))],32)],4),s(`div`,{class:`h2l-ranking__row`,style:p(w.value)},[s(`div`,{class:`h2l-ranking__items`,onWheel:T},[(g(!0),o(e,null,v(t.rankings.lower,(e,t)=>(g(),i(R,{key:`lower-${t}`},c({default:C(()=>[s(`div`,{class:`h2l-ranking__item`,onClick:t=>E(e.cover,e.url)},[s(`img`,{src:e.cover,alt:e.title},null,8,q)],8,K)]),content:C(()=>[u(b(e.title),1)]),_:2},[e.description?{name:`description`,fn:C(()=>[u(b(e.description),1)]),key:`0`}:void 0]),1024))),128))],32)],4),s(`div`,{class:`h2l-ranking__row`,style:p(w.value)},[s(`div`,{class:`h2l-ranking__items`,onWheel:T},[(g(!0),o(e,null,v(t.rankings.la,(e,t)=>(g(),i(R,{key:`la-${t}`},c({default:C(()=>[s(`div`,{class:`h2l-ranking__item`,onClick:t=>E(e.cover,e.url)},[s(`img`,{src:e.cover,alt:e.title},null,8,Y)],8,J)]),content:C(()=>[u(b(e.title),1)]),_:2},[e.description?{name:`description`,fn:C(()=>[u(b(e.description),1)]),key:`0`}:void 0]),1024))),128))],32)],4)])],512))}}),[[`__scopeId`,`data-v-5e5b9727`]]),Z=X;export{X as H2lRanking,Z as default};
+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,nextTick as p,normalizeClass as m,normalizeStyle as h,onMounted as g,onUnmounted as _,openBlock as v,ref as y,renderList as b,renderSlot as x,toDisplayString as S,unref as C,watch as w,withCtx as T,withModifiers as E}from"vue";function D(e,t=200){let n=null;function r(){n&&clearTimeout(n),n=setTimeout(e,t)}g(()=>{typeof window<`u`&&window.addEventListener(`resize`,r)}),_(()=>{typeof window<`u`&&window.removeEventListener(`resize`,r),n&&clearTimeout(n)})}function O(){if(typeof window>`u`||!navigator.userAgent)return!1;let e=navigator.userAgent.toLowerCase();return[`android`,`iphone`,`ipad`,`ipod`,`windows phone`,`mobi`,`tablet`,`webos`,`blackberry`].some(t=>e.includes(t))}function k(){let e=y(!1);function t(){if(typeof window>`u`)return;let t=window.innerWidth<768,n=`ontouchstart`in window,r=O();e.value=t||n||r}return D(t,200),g(()=>{t()}),{isMobile:e}}function A(){let e=y({active:!1,startX:0,startY:0,translateX:0,translateY:0});function t(t,n){e.value.active=!0,e.value.startX=t,e.value.startY=n}function n(t,n){if(!e.value.active)return;let r=t-e.value.startX,i=n-e.value.startY;e.value.translateX+=r,e.value.translateY+=i,e.value.startX=t,e.value.startY=n}function r(){e.value.active=!1}function i(){e.value.translateX=0,e.value.translateY=0}return{dragState:e,startDrag:t,onDragMove:n,endDrag:r,resetPosition:i}}function j(e){let t=y({active:!1,startDistance:0,startScale:1,centerX:0,centerY:0,isDragging:!1,startX:0,startY:0,startTranslateX:0,startTranslateY:0});function n(n,r){if(n.touches.length===1)t.value.isDragging=!0,t.value.startX=n.touches[0].clientX,t.value.startY=n.touches[0].clientY,t.value.startTranslateX=e.value.translateX,t.value.startTranslateY=e.value.translateY;else if(n.touches.length===2){n.preventDefault();let e=n.touches[0],i=n.touches[1],a=Math.hypot(i.clientX-e.clientX,i.clientY-e.clientY),o=(e.clientX+i.clientX)/2,s=(e.clientY+i.clientY)/2;t.value.active=!0,t.value.startDistance=a,t.value.startScale=r,t.value.centerX=o,t.value.centerY=s,t.value.isDragging=!1}}function r(n,r,i,a){if(n.touches.length===1&&t.value.isDragging){n.preventDefault();let r=n.touches[0].clientX-t.value.startX,i=n.touches[0].clientY-t.value.startY;e.value.translateX=t.value.startTranslateX+r,e.value.translateY=t.value.startTranslateY+i}else if(n.touches.length===2&&t.value.active){n.preventDefault();let e=n.touches[0],o=n.touches[1],s=Math.hypot(o.clientX-e.clientX,o.clientY-e.clientY)/t.value.startDistance;r.value=Math.max(i,Math.min(a,t.value.startScale*s))}}function i(){t.value.active=!1,t.value.isDragging=!1}return{touchState:t,onTouchStart:n,onTouchMove:r,onTouchEnd:i}}const M={xmlns:`http://www.w3.org/2000/svg`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`},ee=f({__name:`CloseIcon`,setup(e){return(e,t)=>(v(),o(`svg`,M,[...t[0]||=[s(`path`,{d:`M18 6L6 18M6 6l12 12`},null,-1)]]))}}),N={xmlns:`http://www.w3.org/2000/svg`,width:`24`,height:`24`,viewBox:`0 0 24 24`},te=f({__name:`ExternalLinkIcon`,setup(e){return(e,t)=>(v(),o(`svg`,N,[...t[0]||=[s(`path`,{fill:`currentColor`,d:`M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2zM14 3v2h3.59l-9.83 9.83l1.41 1.41L19 6.41V10h2V3z`},null,-1)]]))}});var P=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n};const F=[`href`],ne={class:`h2l-image-viewer__content`},re=[`src`],ie={key:1,class:`h2l-image-viewer__info`},ae={class:`h2l-image-viewer__info-header`},oe={key:0,class:`h2l-image-viewer__title`},se={key:0,class:`h2l-image-viewer__description`},I=.5;var L=P(f({__name:`H2lImageViewer`,props:{show:{type:Boolean},src:{},url:{},title:{},description:{}},emits:[`update:show`],setup(e,{emit:c}){let l=e,u=c,f=y(),b=y(1),x=y(!1),D=y(!1),O=y(),{dragState:k,startDrag:M,onDragMove:N,endDrag:P,resetPosition:L}=A(),{touchState:R,onTouchStart:z,onTouchMove:B,onTouchEnd:V}=j(k),H=r(()=>{let e=k.value.active||R.value.isDragging;return{transform:`translate(${k.value.translateX}px, ${k.value.translateY}px) scale(${b.value})`,transformOrigin:`center center`,transition:e||R.value.active?`none`:`transform 0.2s ease-out`}});async function U(){await p(),O.value&&(D.value=O.value.scrollHeight>O.value.clientHeight)}function W(){x.value=!x.value}function G(){u(`update:show`,!1),setTimeout(()=>{b.value=1,L(),x.value=!1},200)}function K(e){e.preventDefault();let t=e.deltaY>0?-.1:.1;b.value=Math.max(I,Math.min(5,b.value+t))}function q(e){e.preventDefault(),M(e.clientX,e.clientY)}function J(e){N(e.clientX,e.clientY)}function Y(){P()}function X(e){z(e,b.value)}function Z(e){B(e,b,I,5)}function Q(){V()}function $(e){e.key===`Escape`&&G()}return w(()=>l.show,e=>{e?U():(b.value=1,L(),x.value=!1)}),w(()=>l.description,()=>{l.show&&U()}),g(()=>{document.addEventListener(`keydown`,$),document.addEventListener(`mousemove`,J),document.addEventListener(`mouseup`,Y)}),_(()=>{document.removeEventListener(`keydown`,$),document.removeEventListener(`mousemove`,J),document.removeEventListener(`mouseup`,Y)}),(r,c)=>(v(),i(t,{to:`body`},[d(n,{name:`h2l-image-viewer`},{default:T(()=>[e.show?(v(),o(`div`,{key:0,ref_key:`containerRef`,ref:f,class:`h2l-image-viewer`,onWheel:K,onTouchstart:X,onTouchmove:Z,onTouchend:Q,onClick:E(G,[`self`])},[s(`button`,{class:`h2l-image-viewer__close`,onClick:G},[d(C(ee))]),e.url?(v(),o(`a`,{key:0,href:e.url,target:`_blank`,rel:`noopener noreferrer`,class:`h2l-image-viewer__link`,title:`打开链接`},[d(C(te))],8,F)):a(`v-if`,!0),s(`div`,ne,[s(`img`,{src:e.src,style:h(H.value),alt:`Preview`,onMousedown:q},null,44,re)]),a(` 标题和描述信息 `),e.title||e.description?(v(),o(`div`,ie,[s(`div`,ae,[e.title?(v(),o(`div`,oe,S(e.title),1)):a(`v-if`,!0),e.description&&D.value?(v(),o(`button`,{key:1,class:`h2l-image-viewer__more`,onClick:W},S(x.value?`收起`:`更多`),1)):a(`v-if`,!0)]),e.description?(v(),o(`div`,se,[s(`div`,{ref_key:`descriptionTextRef`,ref:O,class:m([`h2l-image-viewer__description-text`,{"h2l-image-viewer__description-text--expanded":x.value}])},S(e.description),3)])):a(`v-if`,!0)])):a(`v-if`,!0)],544)):a(`v-if`,!0)]),_:1})]))}}),[[`__scopeId`,`data-v-940de796`]]);const R={class:`h2l-tooltip__title`},z={key:0,class:`h2l-tooltip__divider`},B={key:1,class:`h2l-tooltip__description`};var V=P(f({__name:`H2lTooltip`,setup(e){let c=y(),l=y(!1),u=y({x:0,y:0}),{isMobile:f}=k(),p=r(()=>l.value&&!f.value);function m(){if(!c.value||f.value)return;let e=c.value.getBoundingClientRect();u.value={x:e.left+e.width/2,y:e.bottom+8},l.value=!0}function b(){l.value=!1}return g(()=>{c.value?.addEventListener(`mouseenter`,m),c.value?.addEventListener(`mouseleave`,b)}),_(()=>{c.value?.removeEventListener(`mouseenter`,m),c.value?.removeEventListener(`mouseleave`,b)}),(e,r)=>(v(),o(`div`,{ref_key:`triggerRef`,ref:c,class:`h2l-tooltip`},[x(e.$slots,`default`,{},void 0,!0),(v(),i(t,{to:`body`},[d(n,{name:`h2l-tooltip`},{default:T(()=>[p.value?(v(),o(`div`,{key:0,class:`h2l-tooltip__content`,style:h({left:`${u.value.x}px`,top:`${u.value.y}px`})},[s(`div`,R,[x(e.$slots,`content`,{},void 0,!0)]),e.$slots.description?(v(),o(`div`,z)):a(`v-if`,!0),e.$slots.description?(v(),o(`div`,B,[x(e.$slots,`description`,{},void 0,!0)])):a(`v-if`,!0)],4)):a(`v-if`,!0)]),_:3})]))],512))}}),[[`__scopeId`,`data-v-c8ed1c2a`]]);const H={class:`h2l-ranking__content`},U=[`onClick`],W=[`src`,`alt`],G=[`onClick`],K=[`src`,`alt`],q=[`onClick`],J=[`src`,`alt`],Y=[`onClick`],X=[`src`,`alt`],Z=[`onClick`],Q=[`src`,`alt`];var $=P(f({__name:`H2lRanking`,props:{rankings:{},enableImageViewer:{type:Boolean,default:!0}},setup(t){let n=t,a=y(),f=y(),m=y(0),_=y(!1),x=y(``),C=y(``),w=y(``),E=y(``),O=r(()=>({width:m.value>0?`${m.value}px`:void 0}));function k(){a.value&&f.value&&(m.value=a.value.clientWidth-f.value.clientWidth)}D(k,200),g(()=>{p(()=>{k()})});function A(e){let t=e.currentTarget;e.deltaY!==0&&(e.preventDefault(),t.scrollLeft+=e.deltaY*.5)}function j(e,t,r,i){n.enableImageViewer&&(x.value=e,C.value=t||``,w.value=r||``,E.value=i||``,_.value=!0)}return(n,r)=>(v(),o(`div`,{ref_key:`rootRef`,ref:a,class:`h2l-ranking`},[d(L,{show:_.value,"onUpdate:show":r[0]||=e=>_.value=e,src:x.value,url:C.value,title:w.value,description:E.value},null,8,[`show`,`src`,`url`,`title`,`description`]),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-c1a2322f> 夯 </div><div class="h2l-ranking__label h2l-ranking__label--upper" data-v-c1a2322f> 顶级 </div><div class="h2l-ranking__label h2l-ranking__label--middle" data-v-c1a2322f> 人上人 </div><div class="h2l-ranking__label h2l-ranking__label--lower" data-v-c1a2322f> NPC </div><div class="h2l-ranking__label h2l-ranking__label--la" data-v-c1a2322f> 拉完了 </div>`,5)]],512),s(`div`,H,[s(`div`,{class:`h2l-ranking__row`,style:h(O.value)},[s(`div`,{class:`h2l-ranking__items`,onWheel:A},[(v(!0),o(e,null,b(t.rankings.hang,(e,t)=>(v(),i(V,{key:`hang-${t}`},c({default:T(()=>[s(`div`,{class:`h2l-ranking__item`,onClick:t=>j(e.cover,e.url,e.title,e.description)},[s(`img`,{src:e.cover,alt:e.title},null,8,W)],8,U)]),content:T(()=>[u(S(e.title),1)]),_:2},[e.description?{name:`description`,fn:T(()=>[u(S(e.description),1)]),key:`0`}:void 0]),1024))),128))],32)],4),s(`div`,{class:`h2l-ranking__row`,style:h(O.value)},[s(`div`,{class:`h2l-ranking__items`,onWheel:A},[(v(!0),o(e,null,b(t.rankings.upper,(e,t)=>(v(),i(V,{key:`upper-${t}`},c({default:T(()=>[s(`div`,{class:`h2l-ranking__item`,onClick:t=>j(e.cover,e.url,e.title,e.description)},[s(`img`,{src:e.cover,alt:e.title},null,8,K)],8,G)]),content:T(()=>[u(S(e.title),1)]),_:2},[e.description?{name:`description`,fn:T(()=>[u(S(e.description),1)]),key:`0`}:void 0]),1024))),128))],32)],4),s(`div`,{class:`h2l-ranking__row`,style:h(O.value)},[s(`div`,{class:`h2l-ranking__items`,onWheel:A},[(v(!0),o(e,null,b(t.rankings.middle,(e,t)=>(v(),i(V,{key:`middle-${t}`},c({default:T(()=>[s(`div`,{class:`h2l-ranking__item`,onClick:t=>j(e.cover,e.url,e.title,e.description)},[s(`img`,{src:e.cover,alt:e.title},null,8,J)],8,q)]),content:T(()=>[u(S(e.title),1)]),_:2},[e.description?{name:`description`,fn:T(()=>[u(S(e.description),1)]),key:`0`}:void 0]),1024))),128))],32)],4),s(`div`,{class:`h2l-ranking__row`,style:h(O.value)},[s(`div`,{class:`h2l-ranking__items`,onWheel:A},[(v(!0),o(e,null,b(t.rankings.lower,(e,t)=>(v(),i(V,{key:`lower-${t}`},c({default:T(()=>[s(`div`,{class:`h2l-ranking__item`,onClick:t=>j(e.cover,e.url,e.title,e.description)},[s(`img`,{src:e.cover,alt:e.title},null,8,X)],8,Y)]),content:T(()=>[u(S(e.title),1)]),_:2},[e.description?{name:`description`,fn:T(()=>[u(S(e.description),1)]),key:`0`}:void 0]),1024))),128))],32)],4),s(`div`,{class:`h2l-ranking__row`,style:h(O.value)},[s(`div`,{class:`h2l-ranking__items`,onWheel:A},[(v(!0),o(e,null,b(t.rankings.la,(e,t)=>(v(),i(V,{key:`la-${t}`},c({default:T(()=>[s(`div`,{class:`h2l-ranking__item`,onClick:t=>j(e.cover,e.url,e.title,e.description)},[s(`img`,{src:e.cover,alt:e.title},null,8,Q)],8,Z)]),content:T(()=>[u(S(e.title),1)]),_:2},[e.description?{name:`description`,fn:T(()=>[u(S(e.description),1)]),key:`0`}:void 0]),1024))),128))],32)],4)])],512))}}),[[`__scopeId`,`data-v-c1a2322f`]]),ce=$;export{$ as H2lRanking,ce as default};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "h2l-ranking",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.1.1",
   "description": "hang to la ranking",
   "author": "imba97",
   "license": "MIT",