h2l-ranking 0.1.0 → 0.2.0

package/README.md

@@ -1,8 +1,8 @@
 # h2l-ranking
 
-从夯到拉排行组件。
+一个简单易用的 Vue 3 从夯到拉排行组件
 
-一个简单易用的 Vue 3 排行展示组件，支持横向滚动和悬停提示。
+![组件预览](https://github.com/imba97/h2l-ranking/blob/main/.github/screenshot/component.png?raw=true)
 
 ## 特性
 
@@ -81,7 +81,7 @@ const rankings = ref({
 | 属性 | 类型 | 必填 | 说明 |
 |------|------|:----:|------|
 | rankings | `Rankings` | 是 | 排行数据 |
-| enableImageViewer | `boolean` | 否 | `true` | 是否启用图片预览器 |
+| enableImageViewer | `boolean` | 否 | 是否启用图片预览器，默认 `true` |
 
 ### Rankings 类型
 

package/dist/index.css

@@ -1,5 +1,5 @@
 
-.h2l-image-viewer[data-v-39bb591c] {
+.h2l-image-viewer[data-v-f08913b7] {
   position: fixed;
   top: 0;
   left: 0;
@@ -12,7 +12,7 @@
   z-index: 9999;
   padding: 20px;
 }
-.h2l-image-viewer__content[data-v-39bb591c] {
+.h2l-image-viewer__content[data-v-f08913b7] {
   width: 100%;
   max-width: 600px;
   display: flex;
@@ -21,14 +21,14 @@
   position: relative;
   z-index: 0;
 }
-.h2l-image-viewer__content img[data-v-39bb591c] {
+.h2l-image-viewer__content img[data-v-f08913b7] {
   max-width: 100%;
   height: auto;
   user-select: none;
   -webkit-user-select: none;
   touch-action: none;
 }
-.h2l-image-viewer__close[data-v-39bb591c] {
+.h2l-image-viewer__close[data-v-f08913b7] {
   position: absolute;
   top: 20px;
   right: 20px;
@@ -46,10 +46,10 @@
   transition: background-color 0.2s;
   z-index: 1;
 }
-.h2l-image-viewer__close[data-v-39bb591c]:hover {
+.h2l-image-viewer__close[data-v-f08913b7]:hover {
   background-color: rgba(255, 255, 255, 0.2);
 }
-.h2l-image-viewer__link[data-v-39bb591c] {
+.h2l-image-viewer__link[data-v-f08913b7] {
   position: absolute;
   top: 20px;
   right: 72px;
@@ -68,10 +68,10 @@
   text-decoration: none;
   z-index: 1;
 }
-.h2l-image-viewer__link[data-v-39bb591c]:hover {
+.h2l-image-viewer__link[data-v-f08913b7]:hover {
   background-color: rgba(255, 255, 255, 0.2);
 }
-.h2l-image-viewer__info[data-v-39bb591c] {
+.h2l-image-viewer__info[data-v-f08913b7] {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -83,22 +83,22 @@
   border-top-right-radius: 16px;
   padding: 16px 20px;
 }
-.h2l-image-viewer__info-header[data-v-39bb591c] {
+.h2l-image-viewer__info-header[data-v-f08913b7] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
 }
-.h2l-image-viewer__title[data-v-39bb591c] {
+.h2l-image-viewer__title[data-v-f08913b7] {
   font-size: 14px;
   font-weight: 600;
   flex: 1;
   min-width: 0;
 }
-.h2l-image-viewer__description[data-v-39bb591c] {
+.h2l-image-viewer__description[data-v-f08913b7] {
   margin-top: 12px;
 }
-.h2l-image-viewer__description-text[data-v-39bb591c] {
+.h2l-image-viewer__description-text[data-v-f08913b7] {
   line-height: 1.5;
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -110,11 +110,11 @@
   color: rgba(255, 255, 255, 0.85);
   font-size: 12px;
 }
-.h2l-image-viewer__description-text--expanded[data-v-39bb591c] {
+.h2l-image-viewer__description-text--expanded[data-v-f08913b7] {
   -webkit-line-clamp: unset;
   max-height: none;
 }
-.h2l-image-viewer__more[data-v-39bb591c] {
+.h2l-image-viewer__more[data-v-f08913b7] {
   padding: 2px 8px;
   font-size: 11px;
   color: rgba(255, 255, 255, 0.7);
@@ -125,26 +125,26 @@
   transition: all 0.2s;
   flex-shrink: 0;
 }
-.h2l-image-viewer__more[data-v-39bb591c]:hover {
+.h2l-image-viewer__more[data-v-f08913b7]:hover {
   color: #fff;
   background-color: rgba(255, 255, 255, 0.2);
 }
 
 /* 过渡动画 */
-.h2l-image-viewer-enter-active[data-v-39bb591c],
-.h2l-image-viewer-leave-active[data-v-39bb591c] {
+.h2l-image-viewer-enter-active[data-v-f08913b7],
+.h2l-image-viewer-leave-active[data-v-f08913b7] {
   transition: opacity 0.2s ease;
 }
-.h2l-image-viewer-enter-active .h2l-image-viewer__content[data-v-39bb591c],
-.h2l-image-viewer-leave-active .h2l-image-viewer__content[data-v-39bb591c] {
+.h2l-image-viewer-enter-active .h2l-image-viewer__content[data-v-f08913b7],
+.h2l-image-viewer-leave-active .h2l-image-viewer__content[data-v-f08913b7] {
   transition: opacity 0.2s ease, transform 0.2s ease;
 }
-.h2l-image-viewer-enter-from[data-v-39bb591c],
-.h2l-image-viewer-leave-to[data-v-39bb591c] {
+.h2l-image-viewer-enter-from[data-v-f08913b7],
+.h2l-image-viewer-leave-to[data-v-f08913b7] {
   opacity: 0;
 }
-.h2l-image-viewer-enter-from .h2l-image-viewer__content[data-v-39bb591c],
-.h2l-image-viewer-leave-to .h2l-image-viewer__content[data-v-39bb591c] {
+.h2l-image-viewer-enter-from .h2l-image-viewer__content[data-v-f08913b7],
+.h2l-image-viewer-leave-to .h2l-image-viewer__content[data-v-f08913b7] {
   opacity: 0;
   transform: scale(0.9);
 }
@@ -202,13 +202,13 @@
 }
 
 
-.h2l-ranking[data-v-c1a2322f] {
+.h2l-ranking[data-v-8ce434b1] {
   display: flex;
   border: 1px solid #000;
   background-color: #1a1a1a;
   overflow: hidden;
 }
-.h2l-ranking__labels[data-v-c1a2322f] {
+.h2l-ranking__labels[data-v-8ce434b1] {
   display: flex;
   flex-direction: column;
   max-width: 120px;
@@ -216,7 +216,7 @@
   width: 20%;
   border-right: 1px solid #000;
 }
-.h2l-ranking__label[data-v-c1a2322f] {
+.h2l-ranking__label[data-v-8ce434b1] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -226,44 +226,44 @@
   text-align: center;
   border-bottom: 1px solid #000;
 }
-.h2l-ranking__label[data-v-c1a2322f]:last-child {
+.h2l-ranking__label[data-v-8ce434b1]:last-child {
   border-bottom: none;
 }
-.h2l-ranking__label--hang[data-v-c1a2322f] {
+.h2l-ranking__label--hang[data-v-8ce434b1] {
   background-color: #ff0000;
   color: #fff;
 }
-.h2l-ranking__label--upper[data-v-c1a2322f] {
+.h2l-ranking__label--upper[data-v-8ce434b1] {
   background-color: #ff9500;
   color: #fff;
 }
-.h2l-ranking__label--middle[data-v-c1a2322f] {
+.h2l-ranking__label--middle[data-v-8ce434b1] {
   background-color: #ffcc00;
   color: #000;
 }
-.h2l-ranking__label--lower[data-v-c1a2322f] {
+.h2l-ranking__label--lower[data-v-8ce434b1] {
   background-color: #fef4d1;
   color: #000;
 }
-.h2l-ranking__label--la[data-v-c1a2322f] {
+.h2l-ranking__label--la[data-v-8ce434b1] {
   background-color: #ffffff;
   color: #000;
 }
-.h2l-ranking__content[data-v-c1a2322f] {
+.h2l-ranking__content[data-v-8ce434b1] {
   flex: 1;
   display: flex;
   flex-direction: column;
 }
-.h2l-ranking__row[data-v-c1a2322f] {
+.h2l-ranking__row[data-v-8ce434b1] {
   display: flex;
   height: 100px;
   border-bottom: 1px solid #000;
   overflow: hidden;
 }
-.h2l-ranking__row[data-v-c1a2322f]:last-child {
+.h2l-ranking__row[data-v-8ce434b1]:last-child {
   border-bottom: none;
 }
-.h2l-ranking__items[data-v-c1a2322f] {
+.h2l-ranking__items[data-v-8ce434b1] {
   flex: 1;
   display: flex;
   align-items: center;
@@ -272,14 +272,13 @@
   overflow-x: auto;
   overflow-y: hidden;
   min-width: 0;
-  /* 隐藏滚动条但保留滚动功能 */
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
-.h2l-ranking__items[data-v-c1a2322f]::-webkit-scrollbar {
+.h2l-ranking__items[data-v-8ce434b1]::-webkit-scrollbar {
   display: none;
 }
-.h2l-ranking__item[data-v-c1a2322f] {
+.h2l-ranking__item[data-v-8ce434b1] {
   position: relative;
   width: 84px;
   height: 84px;
@@ -288,7 +287,7 @@
   background-color: #333;
   cursor: pointer;
 }
-.h2l-ranking__item img[data-v-c1a2322f] {
+.h2l-ranking__item img[data-v-8ce434b1] {
   width: 100%;
   height: 100%;
   object-fit: cover;

package/dist/index.d.mts

@@ -7,6 +7,7 @@ interface RankingItem {
   url?: string;
   description?: string;
 }
+type RankingTier = keyof Rankings;
 interface Rankings {
   hang: RankingItem[];
   upper: RankingItem[];
@@ -20,9 +21,22 @@ interface Props {
   rankings: Rankings;
   enableImageViewer?: boolean;
 }
-declare const __VLS_export: vue.DefineComponent<Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Props> & Readonly<{}>, {
+declare function openViewer(cover: string, url?: string, title?: string, description?: string): void;
+declare var __VLS_6: {}, __VLS_9: keyof Rankings, __VLS_10: {};
+type __VLS_Slots = {} & { [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any } & {
+  labels?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: vue.DefineComponent<Props, {
+  openViewer: typeof openViewer;
+}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Props> & Readonly<{}>, {
   enableImageViewer: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
 //#endregion
-export { _default as H2lRanking, _default as default, type RankingItem, type Rankings };
+export { _default as H2lRanking, _default as default, type RankingItem, type RankingTier, type Rankings };

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

package/package.json

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