h2l-ranking 0.0.0 → 0.0.2
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.
- package/LICENSE +21 -21
- package/README.md +96 -94
- package/dist/index.css +120 -55
- package/dist/index.d.mts +5 -3
- package/dist/index.mjs +1 -228
- package/package.json +9 -10
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2026 imba97 <https://github.com/imba97>
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 imba97 <https://github.com/imba97>
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,94 +1,96 @@
|
|
|
1
|
-
# h2l-ranking
|
|
2
|
-
|
|
3
|
-
从夯到拉排行组件。
|
|
4
|
-
|
|
5
|
-
一个简单易用的 Vue 3 排行展示组件，支持横向滚动和悬停提示。
|
|
6
|
-
|
|
7
|
-
## 特性
|
|
8
|
-
|
|
9
|
-
- 🖱️ 鼠标滚轮横向滚动
|
|
10
|
-
- 📱 响应式设计
|
|
11
|
-
- 🎨 可自定义样式
|
|
12
|
-
- 💡 悬停显示 tooltip（支持描述信息）
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
import
|
|
26
|
-
import '
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
{ title: '
|
|
32
|
-
{ title: '
|
|
33
|
-
{ title: '
|
|
34
|
-
{ title: '
|
|
35
|
-
{ title: '
|
|
36
|
-
{ title: '
|
|
37
|
-
{ title: '
|
|
38
|
-
{ title: '
|
|
39
|
-
{ title: '《
|
|
40
|
-
{ title: '
|
|
41
|
-
{ title: '
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
{ title: '
|
|
46
|
-
{ title: '
|
|
47
|
-
{ title: '
|
|
48
|
-
{ title: '
|
|
49
|
-
{ title: '
|
|
50
|
-
{ title: '
|
|
51
|
-
{ title: '
|
|
52
|
-
{ title: '
|
|
53
|
-
{ title: '
|
|
54
|
-
{ title: '
|
|
55
|
-
{ title: '
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
1
|
+
# h2l-ranking
|
|
2
|
+
|
|
3
|
+
从夯到拉排行组件。
|
|
4
|
+
|
|
5
|
+
一个简单易用的 Vue 3 排行展示组件，支持横向滚动和悬停提示。
|
|
6
|
+
|
|
7
|
+
## 特性
|
|
8
|
+
|
|
9
|
+
- 🖱️ 鼠标滚轮横向滚动
|
|
10
|
+
- 📱 响应式设计
|
|
11
|
+
- 🎨 可自定义样式
|
|
12
|
+
- 💡 悬停显示 tooltip（支持描述信息）
|
|
13
|
+
- 🖼️ 内置图片预览器（点击图片放大，支持滚轮/手势缩放）
|
|
14
|
+
|
|
15
|
+
## 安装
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
pnpm add h2l-ranking
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## 使用
|
|
22
|
+
|
|
23
|
+
```vue
|
|
24
|
+
<script setup lang="ts">
|
|
25
|
+
import H2lRanking from 'h2l-ranking'
|
|
26
|
+
import { ref } from 'vue'
|
|
27
|
+
import 'h2l-ranking/style.css'
|
|
28
|
+
|
|
29
|
+
const rankings = ref({
|
|
30
|
+
hang: [
|
|
31
|
+
{ title: '《中二病也要谈恋爱》', url: '/images/1.png', description: '本人入宅作，给到一个夯' },
|
|
32
|
+
{ title: '《玉子爱情故事》', url: '/images/2.png' },
|
|
33
|
+
{ title: '《葬送的芙莉莲》', url: '/images/3.png' },
|
|
34
|
+
{ title: '《我心里危险的东西》', url: '/images/4.png' },
|
|
35
|
+
{ title: '《碧蓝之海 第一季》', url: '/images/5.png' },
|
|
36
|
+
{ title: '《双城之战》', url: '/images/6.png' },
|
|
37
|
+
{ title: '《男子高中生的日常》', url: '/images/7.png' },
|
|
38
|
+
{ title: '《樱花庄的宠物女孩》', url: '/images/8.png' },
|
|
39
|
+
{ title: '《NO GAME NO LIFE 游戏人生》', url: '/images/9.png' },
|
|
40
|
+
{ title: '《OVERLORD》', url: '/images/10.png' },
|
|
41
|
+
{ title: '《言叶之庭》', url: '/images/11.png' },
|
|
42
|
+
{ title: '《命运石之门》', url: '/images/12.png' }
|
|
43
|
+
],
|
|
44
|
+
upper: [
|
|
45
|
+
{ title: '《搞笑漫画日和》', url: '/images/13.png' },
|
|
46
|
+
{ title: '《胆大党》', url: '/images/14.png' },
|
|
47
|
+
{ title: '《荒川爆笑团》', url: '/images/15.png' },
|
|
48
|
+
{ title: '《银魂》', url: '/images/16.png' },
|
|
49
|
+
{ title: '《某科学的超电磁炮》', url: '/images/17.png' },
|
|
50
|
+
{ title: '《魔法禁书目录》', url: '/images/18.png' },
|
|
51
|
+
{ title: '《花牌情缘》', url: '/images/19.png' },
|
|
52
|
+
{ title: '《热带雨林的爆笑生活》', url: '/images/20.png' },
|
|
53
|
+
{ title: '《零之使魔》', url: '/images/21.png' },
|
|
54
|
+
{ title: '《魔法少女小圆》', url: '/images/22.png' },
|
|
55
|
+
{ title: '《齐木楠雄的灾难》', url: '/images/23.png' },
|
|
56
|
+
{ title: '《Re：从零开始的异世界生活》', url: '/images/24.png' }
|
|
57
|
+
],
|
|
58
|
+
middle: [],
|
|
59
|
+
lower: [],
|
|
60
|
+
la: []
|
|
61
|
+
})
|
|
62
|
+
</script>
|
|
63
|
+
|
|
64
|
+
<template>
|
|
65
|
+
<H2lRanking :rankings="rankings" />
|
|
66
|
+
</template>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
算了，太多了，详情请观看[追番列表](https://space.bilibili.com/2198461/bangumi)
|
|
70
|
+
|
|
71
|
+
## API
|
|
72
|
+
|
|
73
|
+
### Props
|
|
74
|
+
|
|
75
|
+
| 属性 | 类型 | 必填 | 说明 |
|
|
76
|
+
|------|------|:----:|------|
|
|
77
|
+
| rankings | `Rankings` | 是 | 排行数据 |
|
|
78
|
+
| enableImageViewer | `boolean` | 否 | `true` | 是否启用图片预览器 |
|
|
79
|
+
|
|
80
|
+
### Rankings 类型
|
|
81
|
+
|
|
82
|
+
```ts
|
|
83
|
+
interface RankingItem {
|
|
84
|
+
title: string // 标题
|
|
85
|
+
url: string // 图片地址
|
|
86
|
+
description?: string // 描述（可选）
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
interface Rankings {
|
|
90
|
+
hang: RankingItem[] // 夯 - 最强
|
|
91
|
+
upper: RankingItem[] // 顶级
|
|
92
|
+
middle: RankingItem[] // 人上人 - 中等
|
|
93
|
+
lower: RankingItem[] // NPC
|
|
94
|
+
la: RankingItem[] // 拉完了 - 最差
|
|
95
|
+
}
|
|
96
|
+
```
|
package/dist/index.css
CHANGED
|
@@ -1,70 +1,137 @@
|
|
|
1
1
|
|
|
2
|
-
.h2l-
|
|
3
|
-
position:
|
|
2
|
+
.h2l-image-viewer[data-v-09434fce] {
|
|
3
|
+
position: fixed;
|
|
4
|
+
top: 0;
|
|
5
|
+
left: 0;
|
|
6
|
+
right: 0;
|
|
7
|
+
bottom: 0;
|
|
8
|
+
background-color: rgba(0, 0, 0, 0.9);
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
z-index: 9999;
|
|
13
|
+
padding: 20px;
|
|
14
|
+
}
|
|
15
|
+
.h2l-image-viewer__content[data-v-09434fce] {
|
|
16
|
+
width: 100%;
|
|
17
|
+
max-width: 600px;
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
justify-content: center;
|
|
21
|
+
}
|
|
22
|
+
.h2l-image-viewer__content img[data-v-09434fce] {
|
|
23
|
+
max-width: 100%;
|
|
24
|
+
height: auto;
|
|
25
|
+
user-select: none;
|
|
26
|
+
-webkit-user-select: none;
|
|
27
|
+
touch-action: none;
|
|
28
|
+
}
|
|
29
|
+
.h2l-image-viewer__close[data-v-09434fce] {
|
|
30
|
+
position: absolute;
|
|
31
|
+
top: 20px;
|
|
32
|
+
right: 20px;
|
|
33
|
+
width: 44px;
|
|
34
|
+
height: 44px;
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
justify-content: center;
|
|
38
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
39
|
+
border: none;
|
|
40
|
+
border-radius: 50%;
|
|
41
|
+
color: #fff;
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
transition: background-color 0.2s;
|
|
44
|
+
}
|
|
45
|
+
.h2l-image-viewer__close[data-v-09434fce]:hover {
|
|
46
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* 过渡动画 */
|
|
50
|
+
.h2l-image-viewer-enter-active[data-v-09434fce],
|
|
51
|
+
.h2l-image-viewer-leave-active[data-v-09434fce] {
|
|
52
|
+
transition: opacity 0.2s ease;
|
|
53
|
+
}
|
|
54
|
+
.h2l-image-viewer-enter-active .h2l-image-viewer__content[data-v-09434fce],
|
|
55
|
+
.h2l-image-viewer-leave-active .h2l-image-viewer__content[data-v-09434fce] {
|
|
56
|
+
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
57
|
+
}
|
|
58
|
+
.h2l-image-viewer-enter-from[data-v-09434fce],
|
|
59
|
+
.h2l-image-viewer-leave-to[data-v-09434fce] {
|
|
60
|
+
opacity: 0;
|
|
61
|
+
}
|
|
62
|
+
.h2l-image-viewer-enter-from .h2l-image-viewer__content[data-v-09434fce],
|
|
63
|
+
.h2l-image-viewer-leave-to .h2l-image-viewer__content[data-v-09434fce] {
|
|
64
|
+
opacity: 0;
|
|
65
|
+
transform: scale(0.9);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
.h2l-tooltip[data-v-4cbefa86] {
|
|
70
|
+
position: relative;
|
|
4
71
|
display: inline-flex;
|
|
5
72
|
}
|
|
6
|
-
.h2l-tooltip__content[data-v-
|
|
7
|
-
position: fixed;
|
|
8
|
-
transform: translate(-50%, 0);
|
|
9
|
-
padding: 6px 12px;
|
|
10
|
-
background-color: rgba(0, 0, 0, 0.85);
|
|
11
|
-
border-radius: 6px;
|
|
12
|
-
font-size: 12px;
|
|
13
|
-
color: #fff;
|
|
14
|
-
pointer-events: none;
|
|
15
|
-
z-index: 9999;
|
|
16
|
-
max-width: 160px;
|
|
17
|
-
display: flex;
|
|
18
|
-
flex-direction: column;
|
|
73
|
+
.h2l-tooltip__content[data-v-4cbefa86] {
|
|
74
|
+
position: fixed;
|
|
75
|
+
transform: translate(-50%, 0);
|
|
76
|
+
padding: 6px 12px;
|
|
77
|
+
background-color: rgba(0, 0, 0, 0.85);
|
|
78
|
+
border-radius: 6px;
|
|
79
|
+
font-size: 12px;
|
|
80
|
+
color: #fff;
|
|
81
|
+
pointer-events: none;
|
|
82
|
+
z-index: 9999;
|
|
83
|
+
max-width: 160px;
|
|
84
|
+
display: flex;
|
|
85
|
+
flex-direction: column;
|
|
19
86
|
gap: 4px;
|
|
20
87
|
}
|
|
21
|
-
.h2l-tooltip__content[data-v-
|
|
22
|
-
content: '';
|
|
23
|
-
position: absolute;
|
|
24
|
-
bottom: 100%;
|
|
25
|
-
left: 50%;
|
|
26
|
-
transform: translateX(-50%);
|
|
27
|
-
border: 4px solid transparent;
|
|
88
|
+
.h2l-tooltip__content[data-v-4cbefa86]::after {
|
|
89
|
+
content: '';
|
|
90
|
+
position: absolute;
|
|
91
|
+
bottom: 100%;
|
|
92
|
+
left: 50%;
|
|
93
|
+
transform: translateX(-50%);
|
|
94
|
+
border: 4px solid transparent;
|
|
28
95
|
border-bottom-color: rgba(0, 0, 0, 0.85);
|
|
29
96
|
}
|
|
30
|
-
.h2l-tooltip__divider[data-v-
|
|
31
|
-
height: 1px;
|
|
32
|
-
background-color: rgba(255, 255, 255, 0.2);
|
|
97
|
+
.h2l-tooltip__divider[data-v-4cbefa86] {
|
|
98
|
+
height: 1px;
|
|
99
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
33
100
|
margin: 2px 0;
|
|
34
101
|
}
|
|
35
|
-
.h2l-tooltip__description[data-v-
|
|
36
|
-
font-size: 11px;
|
|
37
|
-
color: rgba(255, 255, 255, 0.8);
|
|
38
|
-
word-wrap: break-word;
|
|
102
|
+
.h2l-tooltip__description[data-v-4cbefa86] {
|
|
103
|
+
font-size: 11px;
|
|
104
|
+
color: rgba(255, 255, 255, 0.8);
|
|
105
|
+
word-wrap: break-word;
|
|
39
106
|
white-space: normal;
|
|
40
|
-
}
|
|
41
|
-
|
|
107
|
+
}
|
|
108
|
+
|
|
42
109
|
/* 进入和离开动画 */
|
|
43
|
-
.h2l-tooltip-enter-active[data-v-
|
|
44
|
-
.h2l-tooltip-leave-active[data-v-
|
|
110
|
+
.h2l-tooltip-enter-active[data-v-4cbefa86],
|
|
111
|
+
.h2l-tooltip-leave-active[data-v-4cbefa86] {
|
|
45
112
|
transition: all 0.25s ease;
|
|
46
113
|
}
|
|
47
|
-
.h2l-tooltip-enter-from[data-v-
|
|
48
|
-
.h2l-tooltip-leave-to[data-v-
|
|
49
|
-
opacity: 0;
|
|
114
|
+
.h2l-tooltip-enter-from[data-v-4cbefa86],
|
|
115
|
+
.h2l-tooltip-leave-to[data-v-4cbefa86] {
|
|
116
|
+
opacity: 0;
|
|
50
117
|
transform: translate(-50%, -10px);
|
|
51
|
-
}
|
|
118
|
+
}
|
|
52
119
|
|
|
53
120
|
|
|
54
|
-
.h2l-ranking[data-v-
|
|
121
|
+
.h2l-ranking[data-v-bcf2d064] {
|
|
55
122
|
display: flex;
|
|
56
123
|
border: 1px solid #000;
|
|
57
124
|
background-color: #1a1a1a;
|
|
58
125
|
overflow: hidden;
|
|
59
126
|
}
|
|
60
|
-
.h2l-ranking__labels[data-v-
|
|
127
|
+
.h2l-ranking__labels[data-v-bcf2d064] {
|
|
61
128
|
display: flex;
|
|
62
129
|
flex-direction: column;
|
|
63
130
|
min-width: 100px;
|
|
64
131
|
width: 20%;
|
|
65
132
|
border-right: 1px solid #000;
|
|
66
133
|
}
|
|
67
|
-
.h2l-ranking__label[data-v-
|
|
134
|
+
.h2l-ranking__label[data-v-bcf2d064] {
|
|
68
135
|
display: flex;
|
|
69
136
|
align-items: center;
|
|
70
137
|
justify-content: center;
|
|
@@ -74,44 +141,44 @@
|
|
|
74
141
|
text-align: center;
|
|
75
142
|
border-bottom: 1px solid #000;
|
|
76
143
|
}
|
|
77
|
-
.h2l-ranking__label[data-v-
|
|
144
|
+
.h2l-ranking__label[data-v-bcf2d064]:last-child {
|
|
78
145
|
border-bottom: none;
|
|
79
146
|
}
|
|
80
|
-
.h2l-ranking__label--hang[data-v-
|
|
147
|
+
.h2l-ranking__label--hang[data-v-bcf2d064] {
|
|
81
148
|
background-color: #ff0000;
|
|
82
149
|
color: #fff;
|
|
83
150
|
}
|
|
84
|
-
.h2l-ranking__label--upper[data-v-
|
|
151
|
+
.h2l-ranking__label--upper[data-v-bcf2d064] {
|
|
85
152
|
background-color: #ff9500;
|
|
86
153
|
color: #fff;
|
|
87
154
|
}
|
|
88
|
-
.h2l-ranking__label--middle[data-v-
|
|
155
|
+
.h2l-ranking__label--middle[data-v-bcf2d064] {
|
|
89
156
|
background-color: #ffcc00;
|
|
90
157
|
color: #000;
|
|
91
158
|
}
|
|
92
|
-
.h2l-ranking__label--lower[data-v-
|
|
159
|
+
.h2l-ranking__label--lower[data-v-bcf2d064] {
|
|
93
160
|
background-color: #fef4d1;
|
|
94
161
|
color: #000;
|
|
95
162
|
}
|
|
96
|
-
.h2l-ranking__label--la[data-v-
|
|
163
|
+
.h2l-ranking__label--la[data-v-bcf2d064] {
|
|
97
164
|
background-color: #ffffff;
|
|
98
165
|
color: #000;
|
|
99
166
|
}
|
|
100
|
-
.h2l-ranking__content[data-v-
|
|
167
|
+
.h2l-ranking__content[data-v-bcf2d064] {
|
|
101
168
|
flex: 1;
|
|
102
169
|
display: flex;
|
|
103
170
|
flex-direction: column;
|
|
104
171
|
}
|
|
105
|
-
.h2l-ranking__row[data-v-
|
|
172
|
+
.h2l-ranking__row[data-v-bcf2d064] {
|
|
106
173
|
display: flex;
|
|
107
174
|
height: 100px;
|
|
108
175
|
border-bottom: 1px solid #000;
|
|
109
176
|
overflow: hidden;
|
|
110
177
|
}
|
|
111
|
-
.h2l-ranking__row[data-v-
|
|
178
|
+
.h2l-ranking__row[data-v-bcf2d064]:last-child {
|
|
112
179
|
border-bottom: none;
|
|
113
180
|
}
|
|
114
|
-
.h2l-ranking__items[data-v-
|
|
181
|
+
.h2l-ranking__items[data-v-bcf2d064] {
|
|
115
182
|
flex: 1;
|
|
116
183
|
display: flex;
|
|
117
184
|
align-items: center;
|
|
@@ -124,10 +191,10 @@
|
|
|
124
191
|
scrollbar-width: none;
|
|
125
192
|
-ms-overflow-style: none;
|
|
126
193
|
}
|
|
127
|
-
.h2l-ranking__items[data-v-
|
|
194
|
+
.h2l-ranking__items[data-v-bcf2d064]::-webkit-scrollbar {
|
|
128
195
|
display: none;
|
|
129
196
|
}
|
|
130
|
-
.h2l-ranking__item[data-v-
|
|
197
|
+
.h2l-ranking__item[data-v-bcf2d064] {
|
|
131
198
|
position: relative;
|
|
132
199
|
width: 84px;
|
|
133
200
|
height: 84px;
|
|
@@ -136,11 +203,9 @@
|
|
|
136
203
|
background-color: #333;
|
|
137
204
|
cursor: pointer;
|
|
138
205
|
}
|
|
139
|
-
.h2l-ranking__item img[data-v-
|
|
206
|
+
.h2l-ranking__item img[data-v-bcf2d064] {
|
|
140
207
|
width: 100%;
|
|
141
208
|
height: 100%;
|
|
142
209
|
object-fit: cover;
|
|
143
210
|
}
|
|
144
211
|
|
|
145
|
-
|
|
146
|
-
/*# sourceMappingURL=index.css.map*/
|
package/dist/index.d.mts
CHANGED
|
@@ -17,9 +17,11 @@ interface Rankings {
|
|
|
17
17
|
//#region src/components/H2lRanking.vue.d.ts
|
|
18
18
|
interface Props {
|
|
19
19
|
rankings: Rankings;
|
|
20
|
+
enableImageViewer?: boolean;
|
|
20
21
|
}
|
|
21
|
-
declare const __VLS_export: vue.DefineComponent<Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
22
|
+
declare const __VLS_export: vue.DefineComponent<Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
23
|
+
enableImageViewer: boolean;
|
|
24
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
|
|
22
25
|
declare const _default: typeof __VLS_export;
|
|
23
26
|
//#endregion
|
|
24
|
-
export { _default as H2lRanking, _default as default, type RankingItem, type Rankings };
|
|
25
|
-
//# sourceMappingURL=index.d.mts.map
|
|
27
|
+
export { _default as H2lRanking, _default as default, type RankingItem, type Rankings };
|
package/dist/index.mjs
CHANGED
|
@@ -1,228 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
//#region \0/plugin-vue/export-helper
|
|
4
|
-
var export_helper_default = (sfc, props) => {
|
|
5
|
-
const target = sfc.__vccOpts || sfc;
|
|
6
|
-
for (const [key, val] of props) target[key] = val;
|
|
7
|
-
return target;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
//#endregion
|
|
11
|
-
//#region src/components/H2lTooltip.vue
|
|
12
|
-
const _hoisted_1$1 = { class: "h2l-tooltip__title" };
|
|
13
|
-
const _hoisted_2$1 = {
|
|
14
|
-
key: 0,
|
|
15
|
-
class: "h2l-tooltip__divider"
|
|
16
|
-
};
|
|
17
|
-
const _hoisted_3$1 = {
|
|
18
|
-
key: 1,
|
|
19
|
-
class: "h2l-tooltip__description"
|
|
20
|
-
};
|
|
21
|
-
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
22
|
-
__name: "H2lTooltip",
|
|
23
|
-
setup(__props) {
|
|
24
|
-
const triggerRef = ref();
|
|
25
|
-
const showTooltip = ref(false);
|
|
26
|
-
const position = ref({
|
|
27
|
-
x: 0,
|
|
28
|
-
y: 0
|
|
29
|
-
});
|
|
30
|
-
function handleMouseEnter() {
|
|
31
|
-
if (!triggerRef.value) return;
|
|
32
|
-
const rect = triggerRef.value.getBoundingClientRect();
|
|
33
|
-
position.value = {
|
|
34
|
-
x: rect.left + rect.width / 2,
|
|
35
|
-
y: rect.bottom + 8
|
|
36
|
-
};
|
|
37
|
-
showTooltip.value = true;
|
|
38
|
-
}
|
|
39
|
-
function handleMouseLeave() {
|
|
40
|
-
showTooltip.value = false;
|
|
41
|
-
}
|
|
42
|
-
onMounted(() => {
|
|
43
|
-
triggerRef.value?.addEventListener("mouseenter", handleMouseEnter);
|
|
44
|
-
triggerRef.value?.addEventListener("mouseleave", handleMouseLeave);
|
|
45
|
-
});
|
|
46
|
-
onUnmounted(() => {
|
|
47
|
-
triggerRef.value?.removeEventListener("mouseenter", handleMouseEnter);
|
|
48
|
-
triggerRef.value?.removeEventListener("mouseleave", handleMouseLeave);
|
|
49
|
-
});
|
|
50
|
-
return (_ctx, _cache) => {
|
|
51
|
-
return openBlock(), createElementBlock("div", {
|
|
52
|
-
ref_key: "triggerRef",
|
|
53
|
-
ref: triggerRef,
|
|
54
|
-
class: "h2l-tooltip"
|
|
55
|
-
}, [renderSlot(_ctx.$slots, "default", {}, void 0, true), (openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, { name: "h2l-tooltip" }, {
|
|
56
|
-
default: withCtx(() => [showTooltip.value ? (openBlock(), createElementBlock("div", {
|
|
57
|
-
key: 0,
|
|
58
|
-
class: "h2l-tooltip__content",
|
|
59
|
-
style: normalizeStyle({
|
|
60
|
-
left: `${position.value.x}px`,
|
|
61
|
-
top: `${position.value.y}px`
|
|
62
|
-
})
|
|
63
|
-
}, [
|
|
64
|
-
createElementVNode("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "content", {}, void 0, true)]),
|
|
65
|
-
_ctx.$slots.description ? (openBlock(), createElementBlock("div", _hoisted_2$1)) : createCommentVNode("v-if", true),
|
|
66
|
-
_ctx.$slots.description ? (openBlock(), createElementBlock("div", _hoisted_3$1, [renderSlot(_ctx.$slots, "description", {}, void 0, true)])) : createCommentVNode("v-if", true)
|
|
67
|
-
], 4)) : createCommentVNode("v-if", true)]),
|
|
68
|
-
_: 3
|
|
69
|
-
})]))], 512);
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
});
|
|
73
|
-
var H2lTooltip_default = /* @__PURE__ */ export_helper_default(_sfc_main$1, [["__scopeId", "data-v-514ac2d6"]]);
|
|
74
|
-
|
|
75
|
-
//#endregion
|
|
76
|
-
//#region src/components/H2lRanking.vue
|
|
77
|
-
const _hoisted_1 = { class: "h2l-ranking__content" };
|
|
78
|
-
const _hoisted_2 = { class: "h2l-ranking__item" };
|
|
79
|
-
const _hoisted_3 = ["src", "alt"];
|
|
80
|
-
const _hoisted_4 = { class: "h2l-ranking__item" };
|
|
81
|
-
const _hoisted_5 = ["src", "alt"];
|
|
82
|
-
const _hoisted_6 = { class: "h2l-ranking__item" };
|
|
83
|
-
const _hoisted_7 = ["src", "alt"];
|
|
84
|
-
const _hoisted_8 = { class: "h2l-ranking__item" };
|
|
85
|
-
const _hoisted_9 = ["src", "alt"];
|
|
86
|
-
const _hoisted_10 = { class: "h2l-ranking__item" };
|
|
87
|
-
const _hoisted_11 = ["src", "alt"];
|
|
88
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
89
|
-
__name: "H2lRanking",
|
|
90
|
-
props: { rankings: {} },
|
|
91
|
-
setup(__props) {
|
|
92
|
-
const rootRef = ref();
|
|
93
|
-
const labelsRef = ref();
|
|
94
|
-
const rowWidth = ref(0);
|
|
95
|
-
const rowStyle = computed(() => ({ width: rowWidth.value > 0 ? `${rowWidth.value}px` : void 0 }));
|
|
96
|
-
onMounted(() => {
|
|
97
|
-
if (rootRef.value && labelsRef.value) rowWidth.value = rootRef.value.clientWidth - labelsRef.value.clientWidth;
|
|
98
|
-
});
|
|
99
|
-
function handleWheel(e) {
|
|
100
|
-
const target = e.currentTarget;
|
|
101
|
-
if (e.deltaY !== 0) {
|
|
102
|
-
e.preventDefault();
|
|
103
|
-
target.scrollLeft += e.deltaY * .5;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
return (_ctx, _cache) => {
|
|
107
|
-
return openBlock(), createElementBlock("div", {
|
|
108
|
-
ref_key: "rootRef",
|
|
109
|
-
ref: rootRef,
|
|
110
|
-
class: "h2l-ranking"
|
|
111
|
-
}, [createElementVNode("div", {
|
|
112
|
-
ref_key: "labelsRef",
|
|
113
|
-
ref: labelsRef,
|
|
114
|
-
class: "h2l-ranking__labels"
|
|
115
|
-
}, [..._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, [
|
|
116
|
-
createElementVNode("div", {
|
|
117
|
-
class: "h2l-ranking__row",
|
|
118
|
-
style: normalizeStyle(rowStyle.value)
|
|
119
|
-
}, [createElementVNode("div", {
|
|
120
|
-
class: "h2l-ranking__items",
|
|
121
|
-
onWheel: handleWheel
|
|
122
|
-
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rankings.hang, (item, index) => {
|
|
123
|
-
return openBlock(), createBlock(H2lTooltip_default, { key: `hang-${index}` }, createSlots({
|
|
124
|
-
default: withCtx(() => [createElementVNode("div", _hoisted_2, [createElementVNode("img", {
|
|
125
|
-
src: item.url,
|
|
126
|
-
alt: item.title
|
|
127
|
-
}, null, 8, _hoisted_3)])]),
|
|
128
|
-
content: withCtx(() => [createTextVNode(toDisplayString(item.title), 1)]),
|
|
129
|
-
_: 2
|
|
130
|
-
}, [item.description ? {
|
|
131
|
-
name: "description",
|
|
132
|
-
fn: withCtx(() => [createTextVNode(toDisplayString(item.description), 1)]),
|
|
133
|
-
key: "0"
|
|
134
|
-
} : void 0]), 1024);
|
|
135
|
-
}), 128))], 32)], 4),
|
|
136
|
-
createElementVNode("div", {
|
|
137
|
-
class: "h2l-ranking__row",
|
|
138
|
-
style: normalizeStyle(rowStyle.value)
|
|
139
|
-
}, [createElementVNode("div", {
|
|
140
|
-
class: "h2l-ranking__items",
|
|
141
|
-
onWheel: handleWheel
|
|
142
|
-
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rankings.upper, (item, index) => {
|
|
143
|
-
return openBlock(), createBlock(H2lTooltip_default, { key: `upper-${index}` }, createSlots({
|
|
144
|
-
default: withCtx(() => [createElementVNode("div", _hoisted_4, [createElementVNode("img", {
|
|
145
|
-
src: item.url,
|
|
146
|
-
alt: item.title
|
|
147
|
-
}, null, 8, _hoisted_5)])]),
|
|
148
|
-
content: withCtx(() => [createTextVNode(toDisplayString(item.title), 1)]),
|
|
149
|
-
_: 2
|
|
150
|
-
}, [item.description ? {
|
|
151
|
-
name: "description",
|
|
152
|
-
fn: withCtx(() => [createTextVNode(toDisplayString(item.description), 1)]),
|
|
153
|
-
key: "0"
|
|
154
|
-
} : void 0]), 1024);
|
|
155
|
-
}), 128))], 32)], 4),
|
|
156
|
-
createElementVNode("div", {
|
|
157
|
-
class: "h2l-ranking__row",
|
|
158
|
-
style: normalizeStyle(rowStyle.value)
|
|
159
|
-
}, [createElementVNode("div", {
|
|
160
|
-
class: "h2l-ranking__items",
|
|
161
|
-
onWheel: handleWheel
|
|
162
|
-
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rankings.middle, (item, index) => {
|
|
163
|
-
return openBlock(), createBlock(H2lTooltip_default, { key: `middle-${index}` }, createSlots({
|
|
164
|
-
default: withCtx(() => [createElementVNode("div", _hoisted_6, [createElementVNode("img", {
|
|
165
|
-
src: item.url,
|
|
166
|
-
alt: item.title
|
|
167
|
-
}, null, 8, _hoisted_7)])]),
|
|
168
|
-
content: withCtx(() => [createTextVNode(toDisplayString(item.title), 1)]),
|
|
169
|
-
_: 2
|
|
170
|
-
}, [item.description ? {
|
|
171
|
-
name: "description",
|
|
172
|
-
fn: withCtx(() => [createTextVNode(toDisplayString(item.description), 1)]),
|
|
173
|
-
key: "0"
|
|
174
|
-
} : void 0]), 1024);
|
|
175
|
-
}), 128))], 32)], 4),
|
|
176
|
-
createElementVNode("div", {
|
|
177
|
-
class: "h2l-ranking__row",
|
|
178
|
-
style: normalizeStyle(rowStyle.value)
|
|
179
|
-
}, [createElementVNode("div", {
|
|
180
|
-
class: "h2l-ranking__items",
|
|
181
|
-
onWheel: handleWheel
|
|
182
|
-
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rankings.lower, (item, index) => {
|
|
183
|
-
return openBlock(), createBlock(H2lTooltip_default, { key: `lower-${index}` }, createSlots({
|
|
184
|
-
default: withCtx(() => [createElementVNode("div", _hoisted_8, [createElementVNode("img", {
|
|
185
|
-
src: item.url,
|
|
186
|
-
alt: item.title
|
|
187
|
-
}, null, 8, _hoisted_9)])]),
|
|
188
|
-
content: withCtx(() => [createTextVNode(toDisplayString(item.title), 1)]),
|
|
189
|
-
_: 2
|
|
190
|
-
}, [item.description ? {
|
|
191
|
-
name: "description",
|
|
192
|
-
fn: withCtx(() => [createTextVNode(toDisplayString(item.description), 1)]),
|
|
193
|
-
key: "0"
|
|
194
|
-
} : void 0]), 1024);
|
|
195
|
-
}), 128))], 32)], 4),
|
|
196
|
-
createElementVNode("div", {
|
|
197
|
-
class: "h2l-ranking__row",
|
|
198
|
-
style: normalizeStyle(rowStyle.value)
|
|
199
|
-
}, [createElementVNode("div", {
|
|
200
|
-
class: "h2l-ranking__items",
|
|
201
|
-
onWheel: handleWheel
|
|
202
|
-
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rankings.la, (item, index) => {
|
|
203
|
-
return openBlock(), createBlock(H2lTooltip_default, { key: `la-${index}` }, createSlots({
|
|
204
|
-
default: withCtx(() => [createElementVNode("div", _hoisted_10, [createElementVNode("img", {
|
|
205
|
-
src: item.url,
|
|
206
|
-
alt: item.title
|
|
207
|
-
}, null, 8, _hoisted_11)])]),
|
|
208
|
-
content: withCtx(() => [createTextVNode(toDisplayString(item.title), 1)]),
|
|
209
|
-
_: 2
|
|
210
|
-
}, [item.description ? {
|
|
211
|
-
name: "description",
|
|
212
|
-
fn: withCtx(() => [createTextVNode(toDisplayString(item.description), 1)]),
|
|
213
|
-
key: "0"
|
|
214
|
-
} : void 0]), 1024);
|
|
215
|
-
}), 128))], 32)], 4)
|
|
216
|
-
])], 512);
|
|
217
|
-
};
|
|
218
|
-
}
|
|
219
|
-
});
|
|
220
|
-
var H2lRanking_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["__scopeId", "data-v-3b024fe6"]]);
|
|
221
|
-
|
|
222
|
-
//#endregion
|
|
223
|
-
//#region src/index.ts
|
|
224
|
-
var src_default = H2lRanking_default;
|
|
225
|
-
|
|
226
|
-
//#endregion
|
|
227
|
-
export { H2lRanking_default as H2lRanking, src_default as default };
|
|
228
|
-
//# sourceMappingURL=index.mjs.map
|
|
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,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
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "h2l-ranking",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
5
|
-
"packageManager": "pnpm@10.28.2",
|
|
4
|
+
"version": "0.0.2",
|
|
6
5
|
"description": "hang to la ranking",
|
|
7
6
|
"author": "imba97",
|
|
8
7
|
"license": "MIT",
|
|
@@ -35,13 +34,6 @@
|
|
|
35
34
|
"dist/index.d.mts",
|
|
36
35
|
"dist/index.mjs"
|
|
37
36
|
],
|
|
38
|
-
"scripts": {
|
|
39
|
-
"dev": "tsdown --watch",
|
|
40
|
-
"build": "tsdown",
|
|
41
|
-
"test": "vitest",
|
|
42
|
-
"lint": "eslint . --cache",
|
|
43
|
-
"release": "bumpp"
|
|
44
|
-
},
|
|
45
37
|
"peerDependencies": {
|
|
46
38
|
"vue": "^3.0.0"
|
|
47
39
|
},
|
|
@@ -62,5 +54,12 @@
|
|
|
62
54
|
},
|
|
63
55
|
"lint-staged": {
|
|
64
56
|
"*": "eslint --cache --fix"
|
|
57
|
+
},
|
|
58
|
+
"scripts": {
|
|
59
|
+
"dev": "tsdown --watch",
|
|
60
|
+
"build": "tsdown --minify",
|
|
61
|
+
"test": "vitest",
|
|
62
|
+
"lint": "eslint . --cache",
|
|
63
|
+
"release": "bumpp"
|
|
65
64
|
}
|
|
66
|
-
}
|
|
65
|
+
}
|