@rxdrag/website-lib 0.0.146 → 0.0.147
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.
|
@@ -96,10 +96,13 @@ const {
|
|
|
96
96
|
slide.setAttribute("aria-label", `Slide ${i + 1} of ${slideCount}`);
|
|
97
97
|
});
|
|
98
98
|
|
|
99
|
+
const paginationWrapper = root.querySelector("[data-carousel-pagination]");
|
|
99
100
|
const paginationEl = root.querySelector(".carousel-pagination");
|
|
100
101
|
const progressBar = root.querySelector(".carousel-progress-bar");
|
|
101
102
|
const fractionCurrent = root.querySelector(".carousel-fraction-current");
|
|
102
103
|
const fractionTotal = root.querySelector(".carousel-fraction-total");
|
|
104
|
+
const bulletClass = paginationWrapper?.dataset.bulletClass || "";
|
|
105
|
+
const bulletActiveClass = paginationWrapper?.dataset.bulletActiveClass || "";
|
|
103
106
|
let bullets = [];
|
|
104
107
|
|
|
105
108
|
const updateUI = () => {
|
|
@@ -108,6 +111,11 @@ const {
|
|
|
108
111
|
bullets.forEach((b, i) => {
|
|
109
112
|
const isActive = i === currentIndex;
|
|
110
113
|
b.classList.toggle("carousel-bullet-active", isActive);
|
|
114
|
+
if (bulletActiveClass) {
|
|
115
|
+
bulletActiveClass.split(" ").filter(Boolean).forEach(cls => {
|
|
116
|
+
b.classList.toggle(cls, isActive);
|
|
117
|
+
});
|
|
118
|
+
}
|
|
111
119
|
b.setAttribute("aria-current", isActive ? "true" : "false");
|
|
112
120
|
b.setAttribute("aria-selected", isActive ? "true" : "false");
|
|
113
121
|
});
|
|
@@ -163,7 +171,7 @@ const {
|
|
|
163
171
|
|
|
164
172
|
for (let i = 0; i < slideCount; i++) {
|
|
165
173
|
const bullet = document.createElement("button");
|
|
166
|
-
bullet.className =
|
|
174
|
+
bullet.className = `carousel-bullet ${bulletClass}`.trim();
|
|
167
175
|
bullet.type = "button";
|
|
168
176
|
bullet.setAttribute("role", "tab");
|
|
169
177
|
bullet.setAttribute("aria-label", `Go to slide ${i + 1}`);
|
|
@@ -1,148 +1,76 @@
|
|
|
1
|
-
---
|
|
2
|
-
export interface
|
|
3
|
-
class
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
type
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.carousel-pagination :global(.carousel-bullet:hover) {
|
|
80
|
-
color: var(--bullet-color-hover, #ffffff);
|
|
81
|
-
transform: var(--bullet-hover-transform, scale(1.1));
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.carousel-pagination :global(.carousel-bullet:focus-visible) {
|
|
85
|
-
outline: 2px solid var(--bullet-bg-active, #fff);
|
|
86
|
-
outline-offset: 2px;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.carousel-pagination :global(.carousel-bullet-active) {
|
|
90
|
-
background: var(--bullet-bg-active, #fff);
|
|
91
|
-
color: var(--bullet-color-active, #fff);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
/* Variant: dots (default) */
|
|
95
|
-
.carousel-pagination--dots .carousel-pagination :global(.carousel-bullet) {
|
|
96
|
-
width: var(--bullet-size, 10px);
|
|
97
|
-
height: var(--bullet-size, 10px);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
/* Variant: lines */
|
|
101
|
-
.carousel-pagination--lines .carousel-pagination :global(.carousel-bullet) {
|
|
102
|
-
width: 24px;
|
|
103
|
-
height: 4px;
|
|
104
|
-
border-radius: 2px;
|
|
105
|
-
}
|
|
106
|
-
.carousel-pagination--lines .carousel-pagination :global(.carousel-bullet-active) {
|
|
107
|
-
width: 32px;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
/* Variant: numbers */
|
|
111
|
-
.carousel-pagination--numbers .carousel-pagination :global(.carousel-bullet) {
|
|
112
|
-
width: auto;
|
|
113
|
-
min-width: 2rem;
|
|
114
|
-
height: 2rem;
|
|
115
|
-
padding: 0 0.5rem;
|
|
116
|
-
}
|
|
117
|
-
.carousel-pagination--numbers .carousel-pagination :global(.carousel-bullet::before) {
|
|
118
|
-
content: counter(carouselPage, decimal-leading-zero);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
/* Fraction */
|
|
122
|
-
.carousel-fraction {
|
|
123
|
-
display: flex;
|
|
124
|
-
align-items: center;
|
|
125
|
-
gap: 0.25rem;
|
|
126
|
-
font-size: 0.875rem;
|
|
127
|
-
font-weight: 500;
|
|
128
|
-
color: #fff;
|
|
129
|
-
}
|
|
130
|
-
.carousel-fraction-separator {
|
|
131
|
-
opacity: 0.5;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
/* Progressbar */
|
|
135
|
-
.carousel-progressbar {
|
|
136
|
-
width: 100px;
|
|
137
|
-
height: 4px;
|
|
138
|
-
background: rgba(255, 255, 255, 0.2);
|
|
139
|
-
border-radius: 2px;
|
|
140
|
-
overflow: hidden;
|
|
141
|
-
}
|
|
142
|
-
.carousel-progress-bar {
|
|
143
|
-
height: 100%;
|
|
144
|
-
background: var(--bullet-bg-active, #fff);
|
|
145
|
-
transition: width 0.3s ease;
|
|
146
|
-
width: 0;
|
|
147
|
-
}
|
|
148
|
-
</style>
|
|
1
|
+
---
|
|
2
|
+
export interface ClassNames {
|
|
3
|
+
/** bullet 按钮 class */
|
|
4
|
+
bullet?: string;
|
|
5
|
+
/** 激活态 bullet 追加的 class */
|
|
6
|
+
bulletActive?: string;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export interface Props {
|
|
10
|
+
class?: string;
|
|
11
|
+
/** 分页类型 */
|
|
12
|
+
type?: "bullets" | "fraction" | "progressbar";
|
|
13
|
+
/** 主体形式 */
|
|
14
|
+
variant?: "dots" | "numbers" | "lines";
|
|
15
|
+
/** 样式类名配置 */
|
|
16
|
+
classNames?: ClassNames;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const variantDefaults: Record<string, ClassNames> = {
|
|
20
|
+
dots: {
|
|
21
|
+
bullet: "w-2.5 h-2.5 rounded-full bg-white/40 hover:bg-white/60",
|
|
22
|
+
bulletActive: "bg-white",
|
|
23
|
+
},
|
|
24
|
+
lines: {
|
|
25
|
+
bullet: "w-6 h-1 rounded-sm bg-white/40 hover:bg-white/60",
|
|
26
|
+
bulletActive: "w-8 bg-white",
|
|
27
|
+
},
|
|
28
|
+
numbers: {
|
|
29
|
+
bullet: "min-w-8 h-8 px-2 rounded-full bg-white/10 text-white/50 text-xs font-medium tracking-wider hover:bg-white/20",
|
|
30
|
+
bulletActive: "bg-white/10 text-white",
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
const {
|
|
35
|
+
class: className,
|
|
36
|
+
type = "bullets",
|
|
37
|
+
variant = "dots",
|
|
38
|
+
classNames = {},
|
|
39
|
+
} = Astro.props;
|
|
40
|
+
|
|
41
|
+
const defaults = variantDefaults[variant] || variantDefaults.dots;
|
|
42
|
+
const mergedClassNames = {
|
|
43
|
+
bullet: classNames.bullet || defaults.bullet,
|
|
44
|
+
bulletActive: classNames.bulletActive || defaults.bulletActive,
|
|
45
|
+
};
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
<div
|
|
49
|
+
class:list={["carousel-pagination-wrapper flex items-center gap-2 pointer-events-auto", className]}
|
|
50
|
+
data-carousel-pagination
|
|
51
|
+
data-bullet-class={mergedClassNames.bullet}
|
|
52
|
+
data-bullet-active-class={mergedClassNames.bulletActive}
|
|
53
|
+
>
|
|
54
|
+
{type === "bullets" && (
|
|
55
|
+
<div class="carousel-pagination flex items-center gap-2" role="tablist" aria-label="Slide navigation"></div>
|
|
56
|
+
)}
|
|
57
|
+
|
|
58
|
+
{type === "fraction" && (
|
|
59
|
+
<div class="carousel-fraction flex items-center gap-1 text-sm font-medium text-white">
|
|
60
|
+
<span class="carousel-fraction-current">1</span>
|
|
61
|
+
<span class="carousel-fraction-separator opacity-50">/</span>
|
|
62
|
+
<span class="carousel-fraction-total">1</span>
|
|
63
|
+
</div>
|
|
64
|
+
)}
|
|
65
|
+
|
|
66
|
+
{type === "progressbar" && (
|
|
67
|
+
<div class="carousel-progressbar w-[100px] h-1 bg-white/20 rounded overflow-hidden">
|
|
68
|
+
<div class="carousel-progress-bar h-full bg-white transition-[width] duration-300 w-0"></div>
|
|
69
|
+
</div>
|
|
70
|
+
)}
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<style>
|
|
74
|
+
.carousel-pagination { counter-reset: carouselPage; }
|
|
75
|
+
.carousel-pagination :global(.carousel-bullet) { counter-increment: carouselPage; }
|
|
76
|
+
</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rxdrag/website-lib",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.147",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": "./index.ts",
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
"gsap": "^3.12.7",
|
|
30
30
|
"typescript": "^5",
|
|
31
31
|
"@rxdrag/entify-hooks": "0.2.79",
|
|
32
|
+
"@rxdrag/rxcms-models": "0.3.106",
|
|
32
33
|
"@rxdrag/eslint-config-custom": "0.2.13",
|
|
33
34
|
"@rxdrag/tiptap-preview": "0.0.3",
|
|
34
|
-
"@rxdrag/tsconfig": "0.2.1"
|
|
35
|
-
"@rxdrag/rxcms-models": "0.3.106"
|
|
35
|
+
"@rxdrag/tsconfig": "0.2.1"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"aos": "3.0.0-beta.6",
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"react": "^19.1.0",
|
|
41
41
|
"react-dom": "^19.1.0",
|
|
42
42
|
"vanilla-cookieconsent": "3.1.0",
|
|
43
|
-
"@rxdrag/
|
|
44
|
-
"@rxdrag/
|
|
43
|
+
"@rxdrag/rxcms-models": "0.3.106",
|
|
44
|
+
"@rxdrag/website-lib-core": "0.0.125"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"astro": "^5.16.6"
|