@rxdrag/website-lib 0.0.9 → 0.0.11
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/index.ts +4 -4
- package/package.json +8 -8
- package/src/components/AnimationNumber.astro +19 -80
- package/src/components/Flip.astro +4 -14
- package/src/components/Link.astro +47 -81
- package/src/components/Meta.astro +64 -66
- package/src/components/Modal.astro +5 -60
- package/src/components/ModalCloser.astro +8 -11
- package/src/components/ModalPanel.astro +8 -11
- package/src/components/ModalTrigger.astro +7 -19
- package/src/components/Motion.astro +45 -333
- package/src/components/Popover.astro +18 -57
- package/src/components/PopverPanel.astro +11 -13
- package/src/components/RichTextView.astro +34 -34
- package/src/components/Tabs.astro +23 -124
- package/src/components/TabsBody.astro +2 -4
- package/src/components/TabsHeader.astro +2 -4
- package/src/components/TabsPanel.astro +2 -2
- package/src/components/TabsTab.astro +18 -18
- package/src/components/index.ts +18 -20
- package/src/env.d.ts +1 -1
- package/src/index.ts +0 -1
- package/src/components/AttachmentIcon.astro +0 -45
- package/src/components/FlipLogic.ts +0 -242
- package/src/components/LinkLogic.ts +0 -51
- package/src/components/MotionTypes.ts +0 -71
- package/src/components/Popup.astro +0 -19
- package/src/components/TabsLogic.ts +0 -10
- package/src/lib/formatDate.ts +0 -15
- package/src/lib/index.ts +0 -2
- package/src/lib/pagination.ts +0 -114
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import type { SimpleAnimation, HoverAnimation, ViewportAnimation, TapAnimation, ScrollAnimation, SelectionAnimation } from "@rxdrag/website-lib-core";
|
|
2
|
-
import type { AnimationOptions } from "motion";
|
|
3
|
-
|
|
4
|
-
// 排除不能包含子元素的标签
|
|
5
|
-
export type ExcludedElements =
|
|
6
|
-
| "img"
|
|
7
|
-
| "input"
|
|
8
|
-
| "br"
|
|
9
|
-
| "hr"
|
|
10
|
-
| "area"
|
|
11
|
-
| "base"
|
|
12
|
-
| "col"
|
|
13
|
-
| "embed"
|
|
14
|
-
| "link"
|
|
15
|
-
| "meta"
|
|
16
|
-
| "param"
|
|
17
|
-
| "source"
|
|
18
|
-
| "track"
|
|
19
|
-
| "wbr";
|
|
20
|
-
|
|
21
|
-
export type HTMLElementsWithChildren = Exclude<
|
|
22
|
-
keyof HTMLElementTagNameMap,
|
|
23
|
-
ExcludedElements
|
|
24
|
-
>;
|
|
25
|
-
|
|
26
|
-
// CSS 属性的单位处理映射
|
|
27
|
-
export const cssPropertyUnits = {
|
|
28
|
-
// 无单位的属性
|
|
29
|
-
opacity: "",
|
|
30
|
-
scale: "",
|
|
31
|
-
fontWeight: "",
|
|
32
|
-
lineHeight: "",
|
|
33
|
-
zIndex: "",
|
|
34
|
-
flex: "",
|
|
35
|
-
flexGrow: "",
|
|
36
|
-
flexShrink: "",
|
|
37
|
-
order: "",
|
|
38
|
-
// 使用px的属性
|
|
39
|
-
width: "px",
|
|
40
|
-
height: "px",
|
|
41
|
-
minWidth: "px",
|
|
42
|
-
minHeight: "px",
|
|
43
|
-
maxWidth: "px",
|
|
44
|
-
maxHeight: "px",
|
|
45
|
-
padding: "px",
|
|
46
|
-
margin: "px",
|
|
47
|
-
top: "px",
|
|
48
|
-
right: "px",
|
|
49
|
-
bottom: "px",
|
|
50
|
-
left: "px",
|
|
51
|
-
gap: "px",
|
|
52
|
-
columnGap: "px",
|
|
53
|
-
rowGap: "px",
|
|
54
|
-
// transform 相关的属性
|
|
55
|
-
x: "transform",
|
|
56
|
-
y: "transform",
|
|
57
|
-
z: "transform",
|
|
58
|
-
} as const;
|
|
59
|
-
|
|
60
|
-
export interface IMotionProps {
|
|
61
|
-
animate?: SimpleAnimation;
|
|
62
|
-
whileHover?: HoverAnimation;
|
|
63
|
-
whileInView?: ViewportAnimation;
|
|
64
|
-
whileTap?: TapAnimation;
|
|
65
|
-
whileScroll?: ScrollAnimation;
|
|
66
|
-
whileOpen?: SimpleAnimation;
|
|
67
|
-
whileClose?: SimpleAnimation;
|
|
68
|
-
whileSelection?: SelectionAnimation;
|
|
69
|
-
// 在flip的父元素中使用
|
|
70
|
-
flipTransition?: AnimationOptions;
|
|
71
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import { DATA_POPUP } from "@rxdrag/website-lib-core";
|
|
3
|
-
import Motion from "./Motion.astro";
|
|
4
|
-
import { IMotionProps } from "./MotionTypes";
|
|
5
|
-
|
|
6
|
-
interface Props extends IMotionProps {
|
|
7
|
-
popupKey?: string;
|
|
8
|
-
}
|
|
9
|
-
const { popupKey, ...rest } = Astro.props;
|
|
10
|
-
const popupProps = {
|
|
11
|
-
[DATA_POPUP]: popupKey,
|
|
12
|
-
};
|
|
13
|
-
---
|
|
14
|
-
|
|
15
|
-
<Motion {...popupProps} {...rest}>
|
|
16
|
-
<slot />
|
|
17
|
-
</Motion>
|
|
18
|
-
|
|
19
|
-
<script></script>
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export const DATA_TABS = "data-tabs";
|
|
2
|
-
export const DATA_TABS_HEADER = "data-tabs-header";
|
|
3
|
-
export const DATA_TABS_PANEL = "data-tabs-panel";
|
|
4
|
-
export const DATA_TABS_TAB = "data-tabs-tab";
|
|
5
|
-
export const DATA_TABS_BODY = "data-tabs-body";
|
|
6
|
-
//当前选中的选项卡
|
|
7
|
-
export const DATA_TABS_SELECTION = "data-tabs-selection";
|
|
8
|
-
//选中动画,存动画数据
|
|
9
|
-
export const DATA_MOTION_SELECTION = "data-motion-selection";
|
|
10
|
-
export const DATA_MOTION_FLIP = "data-motion-flip";
|
package/src/lib/formatDate.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* 格式化日期为可读字符串
|
|
3
|
-
* @param date 日期对象或日期字符串
|
|
4
|
-
* @returns 格式化后的日期字符串,例如:2023年1月1日
|
|
5
|
-
*/
|
|
6
|
-
export function formatDate(date: Date | string | number): string {
|
|
7
|
-
const d = new Date(date);
|
|
8
|
-
|
|
9
|
-
// 使用 Intl.DateTimeFormat 进行本地化日期格式化
|
|
10
|
-
return new Intl.DateTimeFormat('zh-CN', {
|
|
11
|
-
year: 'numeric',
|
|
12
|
-
month: 'long',
|
|
13
|
-
day: 'numeric'
|
|
14
|
-
}).format(d);
|
|
15
|
-
}
|
package/src/lib/index.ts
DELETED
package/src/lib/pagination.ts
DELETED
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
export type PageItem = number | "ellipsis";
|
|
2
|
-
|
|
3
|
-
export interface PaginationProps {
|
|
4
|
-
currentPage: number;
|
|
5
|
-
totalPages: number;
|
|
6
|
-
baseUrl: string;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export interface PaginationData {
|
|
10
|
-
pages: PageItem[];
|
|
11
|
-
hasPreviousPage: boolean;
|
|
12
|
-
hasNextPage: boolean;
|
|
13
|
-
previousPageUrl: string;
|
|
14
|
-
nextPageUrl: string;
|
|
15
|
-
pageUrls: Record<number, string>;
|
|
16
|
-
currentPage: number;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export function generatePagination(current: number, total: number) {
|
|
20
|
-
const result: PageItem[] = [];
|
|
21
|
-
const edgePageCount = 1; // 边缘页数
|
|
22
|
-
const middlePagesSiblingCount = 2; // 中间页数的兄弟数量
|
|
23
|
-
const totalVisiblePages = edgePageCount * 2 + middlePagesSiblingCount * 2 + 1;
|
|
24
|
-
|
|
25
|
-
// 如果总页数较少,直接显示所有页码
|
|
26
|
-
if (total <= totalVisiblePages) {
|
|
27
|
-
for (let i = 1; i <= total; i++) {
|
|
28
|
-
result.push(i);
|
|
29
|
-
}
|
|
30
|
-
return result;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
// 始终显示第一页
|
|
34
|
-
result.push(1);
|
|
35
|
-
|
|
36
|
-
// 计算中间区域的起始和结束
|
|
37
|
-
let leftIndex = Math.max(
|
|
38
|
-
edgePageCount + 1,
|
|
39
|
-
current - middlePagesSiblingCount
|
|
40
|
-
);
|
|
41
|
-
let rightIndex = Math.min(
|
|
42
|
-
total - edgePageCount,
|
|
43
|
-
current + middlePagesSiblingCount
|
|
44
|
-
);
|
|
45
|
-
|
|
46
|
-
// 调整以保持固定数量的页码
|
|
47
|
-
if (leftIndex <= edgePageCount + 1) {
|
|
48
|
-
rightIndex = Math.min(
|
|
49
|
-
total - edgePageCount,
|
|
50
|
-
totalVisiblePages - edgePageCount - 1
|
|
51
|
-
);
|
|
52
|
-
}
|
|
53
|
-
if (rightIndex >= total - edgePageCount) {
|
|
54
|
-
leftIndex = Math.max(
|
|
55
|
-
edgePageCount + 1,
|
|
56
|
-
total - totalVisiblePages + edgePageCount + 1
|
|
57
|
-
);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
// 添加左省略号
|
|
61
|
-
if (leftIndex > edgePageCount + 1) {
|
|
62
|
-
result.push("ellipsis");
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
// 添加中间页码
|
|
66
|
-
for (let i = leftIndex; i <= rightIndex; i++) {
|
|
67
|
-
result.push(i);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// 添加右省略号
|
|
71
|
-
if (rightIndex < total - edgePageCount) {
|
|
72
|
-
result.push("ellipsis");
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
// 始终显示最后一页
|
|
76
|
-
if (total > 1) {
|
|
77
|
-
result.push(total);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
return result;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
export function paginate(props: PaginationProps): PaginationData {
|
|
84
|
-
const { currentPage, totalPages, baseUrl } = props;
|
|
85
|
-
|
|
86
|
-
// 生成页码数组
|
|
87
|
-
const pages = generatePagination(currentPage, totalPages);
|
|
88
|
-
|
|
89
|
-
// 判断是否有上一页和下一页
|
|
90
|
-
const hasPreviousPage = currentPage > 1;
|
|
91
|
-
const hasNextPage = currentPage < totalPages;
|
|
92
|
-
|
|
93
|
-
// 生成上一页和下一页的URL
|
|
94
|
-
const previousPageUrl = `${baseUrl}${currentPage - 1}`;
|
|
95
|
-
const nextPageUrl = `${baseUrl}${currentPage + 1}`;
|
|
96
|
-
|
|
97
|
-
// 生成每个页码对应的URL
|
|
98
|
-
const pageUrls: Record<number, string> = {};
|
|
99
|
-
pages.forEach((page) => {
|
|
100
|
-
if (typeof page === "number") {
|
|
101
|
-
pageUrls[page] = `${baseUrl}${page}`;
|
|
102
|
-
}
|
|
103
|
-
});
|
|
104
|
-
|
|
105
|
-
return {
|
|
106
|
-
pages,
|
|
107
|
-
hasPreviousPage,
|
|
108
|
-
hasNextPage,
|
|
109
|
-
previousPageUrl,
|
|
110
|
-
nextPageUrl,
|
|
111
|
-
pageUrls,
|
|
112
|
-
currentPage,
|
|
113
|
-
};
|
|
114
|
-
}
|