h2l-ranking 0.1.0 → 0.1.1

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.
Files changed (4) hide show
  1. package/README.md +2 -2
  2. package/dist/index.css +23 -23
  3. package/dist/index.mjs +1 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # h2l-ranking
2
2
 
3
- 从夯到拉排行组件。
3
+ 一个简单易用的 Vue 3 从夯到拉排行组件
4
4
 
5
- 一个简单易用的 Vue 3 排行展示组件，支持横向滚动和悬停提示。
5
+ ![](https://github.com/imba97/h2l-ranking/blob/main/.github/screenshot/component.png?raw=true)
6
6
 
7
7
  ## 特性
8
8
 
package/dist/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- .h2l-image-viewer[data-v-39bb591c] {
2
+ .h2l-image-viewer[data-v-940de796] {
3
3
  position: fixed;
4
4
  top: 0;
5
5
  left: 0;
@@ -12,7 +12,7 @@
12
12
  z-index: 9999;
13
13
  padding: 20px;
14
14
  }
15
- .h2l-image-viewer__content[data-v-39bb591c] {
15
+ .h2l-image-viewer__content[data-v-940de796] {
16
16
  width: 100%;
17
17
  max-width: 600px;
18
18
  display: flex;
@@ -21,14 +21,14 @@
21
21
  position: relative;
22
22
  z-index: 0;
23
23
  }
24
- .h2l-image-viewer__content img[data-v-39bb591c] {
24
+ .h2l-image-viewer__content img[data-v-940de796] {
25
25
  max-width: 100%;
26
26
  height: auto;
27
27
  user-select: none;
28
28
  -webkit-user-select: none;
29
29
  touch-action: none;
30
30
  }
31
- .h2l-image-viewer__close[data-v-39bb591c] {
31
+ .h2l-image-viewer__close[data-v-940de796] {
32
32
  position: absolute;
33
33
  top: 20px;
34
34
  right: 20px;
@@ -46,10 +46,10 @@
46
46
  transition: background-color 0.2s;
47
47
  z-index: 1;
48
48
  }
49
- .h2l-image-viewer__close[data-v-39bb591c]:hover {
49
+ .h2l-image-viewer__close[data-v-940de796]:hover {
50
50
  background-color: rgba(255, 255, 255, 0.2);
51
51
  }
52
- .h2l-image-viewer__link[data-v-39bb591c] {
52
+ .h2l-image-viewer__link[data-v-940de796] {
53
53
  position: absolute;
54
54
  top: 20px;
55
55
  right: 72px;
@@ -68,10 +68,10 @@
68
68
  text-decoration: none;
69
69
  z-index: 1;
70
70
  }
71
- .h2l-image-viewer__link[data-v-39bb591c]:hover {
71
+ .h2l-image-viewer__link[data-v-940de796]:hover {
72
72
  background-color: rgba(255, 255, 255, 0.2);
73
73
  }
74
- .h2l-image-viewer__info[data-v-39bb591c] {
74
+ .h2l-image-viewer__info[data-v-940de796] {
75
75
  position: absolute;
76
76
  bottom: 0;
77
77
  left: 0;
@@ -83,22 +83,22 @@
83
83
  border-top-right-radius: 16px;
84
84
  padding: 16px 20px;
85
85
  }
86
- .h2l-image-viewer__info-header[data-v-39bb591c] {
86
+ .h2l-image-viewer__info-header[data-v-940de796] {
87
87
  display: flex;
88
88
  align-items: center;
89
89
  justify-content: space-between;
90
90
  gap: 12px;
91
91
  }
92
- .h2l-image-viewer__title[data-v-39bb591c] {
92
+ .h2l-image-viewer__title[data-v-940de796] {
93
93
  font-size: 14px;
94
94
  font-weight: 600;
95
95
  flex: 1;
96
96
  min-width: 0;
97
97
  }
98
- .h2l-image-viewer__description[data-v-39bb591c] {
98
+ .h2l-image-viewer__description[data-v-940de796] {
99
99
  margin-top: 12px;
100
100
  }
101
- .h2l-image-viewer__description-text[data-v-39bb591c] {
101
+ .h2l-image-viewer__description-text[data-v-940de796] {
102
102
  line-height: 1.5;
103
103
  display: -webkit-box;
104
104
  -webkit-box-orient: vertical;
@@ -110,11 +110,11 @@
110
110
  color: rgba(255, 255, 255, 0.85);
111
111
  font-size: 12px;
112
112
  }
113
- .h2l-image-viewer__description-text--expanded[data-v-39bb591c] {
113
+ .h2l-image-viewer__description-text--expanded[data-v-940de796] {
114
114
  -webkit-line-clamp: unset;
115
115
  max-height: none;
116
116
  }
117
- .h2l-image-viewer__more[data-v-39bb591c] {
117
+ .h2l-image-viewer__more[data-v-940de796] {
118
118
  padding: 2px 8px;
119
119
  font-size: 11px;
120
120
  color: rgba(255, 255, 255, 0.7);
@@ -125,26 +125,26 @@
125
125
  transition: all 0.2s;
126
126
  flex-shrink: 0;
127
127
  }
128
- .h2l-image-viewer__more[data-v-39bb591c]:hover {
128
+ .h2l-image-viewer__more[data-v-940de796]:hover {
129
129
  color: #fff;
130
130
  background-color: rgba(255, 255, 255, 0.2);
131
131
  }
132
132
 
133
133
  /* 过渡动画 */
134
- .h2l-image-viewer-enter-active[data-v-39bb591c],
135
- .h2l-image-viewer-leave-active[data-v-39bb591c] {
134
+ .h2l-image-viewer-enter-active[data-v-940de796],
135
+ .h2l-image-viewer-leave-active[data-v-940de796] {
136
136
  transition: opacity 0.2s ease;
137
137
  }
138
- .h2l-image-viewer-enter-active .h2l-image-viewer__content[data-v-39bb591c],
139
- .h2l-image-viewer-leave-active .h2l-image-viewer__content[data-v-39bb591c] {
138
+ .h2l-image-viewer-enter-active .h2l-image-viewer__content[data-v-940de796],
139
+ .h2l-image-viewer-leave-active .h2l-image-viewer__content[data-v-940de796] {
140
140
  transition: opacity 0.2s ease, transform 0.2s ease;
141
141
  }
142
- .h2l-image-viewer-enter-from[data-v-39bb591c],
143
- .h2l-image-viewer-leave-to[data-v-39bb591c] {
142
+ .h2l-image-viewer-enter-from[data-v-940de796],
143
+ .h2l-image-viewer-leave-to[data-v-940de796] {
144
144
  opacity: 0;
145
145
  }
146
- .h2l-image-viewer-enter-from .h2l-image-viewer__content[data-v-39bb591c],
147
- .h2l-image-viewer-leave-to .h2l-image-viewer__content[data-v-39bb591c] {
146
+ .h2l-image-viewer-enter-from .h2l-image-viewer__content[data-v-940de796],
147
+ .h2l-image-viewer-leave-to .h2l-image-viewer__content[data-v-940de796] {
148
148
  opacity: 0;
149
149
  transform: scale(0.9);
150
150
  }
package/dist/index.mjs CHANGED
@@ -1 +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,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)r>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){b.value<=1||(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-39bb591c`]]);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};
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,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 CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "h2l-ranking",
3
3
  "type": "module",
4
- "version": "0.1.0",
4
+ "version": "0.1.1",
5
5
  "description": "hang to la ranking",
6
6
  "author": "imba97",
7
7
  "license": "MIT",