@coffic/cosy-ui 0.3.48 → 0.3.53
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/dist/app.css +1 -1
- package/dist/components/containers/Main.astro +103 -108
- package/dist/components/data-display/ProductCard.astro +318 -0
- package/dist/components/layouts/DocumentationLayout.astro +1 -0
- package/dist/components/layouts/SidebarNav.astro +96 -100
- package/dist/index.ts +1 -0
- package/dist/utils/path.ts +33 -5
- package/package.json +3 -2
|
@@ -1,122 +1,118 @@
|
|
|
1
1
|
---
|
|
2
2
|
/**
|
|
3
3
|
* SidebarNav组件
|
|
4
|
-
*
|
|
4
|
+
*
|
|
5
5
|
* 用于渲染侧边栏的导航内容
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { isPathMatch } from '../../utils/path';
|
|
9
|
-
import
|
|
9
|
+
import '../../app.css';
|
|
10
10
|
|
|
11
11
|
export interface SidebarItem {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
href: string;
|
|
13
|
+
text: string;
|
|
14
|
+
items?: SidebarItem[];
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
export interface SidebarSection {
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
title: string;
|
|
19
|
+
items: SidebarItem[];
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
interface Props {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* 当前路径
|
|
30
|
-
*/
|
|
31
|
-
currentPath: string;
|
|
23
|
+
/**
|
|
24
|
+
* 侧边栏项目
|
|
25
|
+
*/
|
|
26
|
+
sidebarItems: SidebarSection[];
|
|
32
27
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
debug?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* 当前路径
|
|
30
|
+
*/
|
|
31
|
+
currentPath: string;
|
|
38
32
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
33
|
+
/**
|
|
34
|
+
* 是否开启调试模式，显示边框
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
37
|
+
debug?: boolean;
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* 自定义类名
|
|
41
|
+
*/
|
|
42
|
+
class?: string;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
const {
|
|
46
|
-
sidebarItems,
|
|
47
|
-
currentPath,
|
|
48
|
-
debug = false,
|
|
49
|
-
class: className
|
|
50
|
-
} = Astro.props;
|
|
45
|
+
const { sidebarItems, currentPath, debug = false, class: className } = Astro.props;
|
|
51
46
|
|
|
52
|
-
const debugClass = debug ?
|
|
47
|
+
const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
|
|
53
48
|
---
|
|
54
49
|
|
|
55
|
-
<nav class:list={[
|
|
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
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
50
|
+
<nav class:list={['cosy:p-4', debugClass, className]}>
|
|
51
|
+
{
|
|
52
|
+
sidebarItems.map((section: SidebarSection) => (
|
|
53
|
+
<div class:list={['cosy:mb-6', debugClass]}>
|
|
54
|
+
<h3 class:list={['cosy:font-bold cosy:mb-2 cosy:text-base-content/70', debugClass]}>
|
|
55
|
+
{section.title}
|
|
56
|
+
</h3>
|
|
57
|
+
<ul class:list={['cosy:menu cosy:bg-base-200 cosy:rounded-box cosy:w-56', debugClass]}>
|
|
58
|
+
{section.items.map((item: SidebarItem) => {
|
|
59
|
+
const isActive = isPathMatch(currentPath, item.href);
|
|
60
|
+
return (
|
|
61
|
+
<li class:list={[debugClass]}>
|
|
62
|
+
<a
|
|
63
|
+
href={item.href}
|
|
64
|
+
class:list={[
|
|
65
|
+
'cosy:hover:bg-base-300',
|
|
66
|
+
{ 'cosy:menu-active': isActive },
|
|
67
|
+
debugClass,
|
|
68
|
+
]}>
|
|
69
|
+
{item.text}
|
|
70
|
+
</a>
|
|
71
|
+
{item.items && (
|
|
72
|
+
<ul class:list={[debugClass]}>
|
|
73
|
+
{item.items.map((subitem: SidebarItem) => {
|
|
74
|
+
const isSubActive = isPathMatch(currentPath, subitem.href);
|
|
75
|
+
return (
|
|
76
|
+
<li class:list={[debugClass]}>
|
|
77
|
+
<a
|
|
78
|
+
href={subitem.href}
|
|
79
|
+
class:list={[
|
|
80
|
+
'cosy:hover:bg-base-300',
|
|
81
|
+
{ 'cosy:active': isSubActive },
|
|
82
|
+
debugClass,
|
|
83
|
+
]}>
|
|
84
|
+
{subitem.text}
|
|
85
|
+
</a>
|
|
86
|
+
{subitem.items && (
|
|
87
|
+
<ul class:list={[debugClass]}>
|
|
88
|
+
{subitem.items.map((subsubitem: SidebarItem) => {
|
|
89
|
+
const isSubSubActive = isPathMatch(currentPath, subsubitem.href);
|
|
90
|
+
return (
|
|
91
|
+
<li class:list={[debugClass]}>
|
|
92
|
+
<a
|
|
93
|
+
href={subsubitem.href}
|
|
94
|
+
class:list={[
|
|
95
|
+
'cosy:hover:bg-base-300',
|
|
96
|
+
{ 'cosy:active': isSubSubActive },
|
|
97
|
+
debugClass,
|
|
98
|
+
]}>
|
|
99
|
+
{subsubitem.text}
|
|
100
|
+
</a>
|
|
101
|
+
</li>
|
|
102
|
+
);
|
|
103
|
+
})}
|
|
104
|
+
</ul>
|
|
105
|
+
)}
|
|
106
|
+
</li>
|
|
107
|
+
);
|
|
108
|
+
})}
|
|
109
|
+
</ul>
|
|
110
|
+
)}
|
|
111
|
+
</li>
|
|
112
|
+
);
|
|
113
|
+
})}
|
|
114
|
+
</ul>
|
|
115
|
+
</div>
|
|
116
|
+
))
|
|
117
|
+
}
|
|
118
|
+
</nav>
|
package/dist/index.ts
CHANGED
|
@@ -21,6 +21,7 @@ export { default as CodeExample } from './components/display/CodeExample.astro';
|
|
|
21
21
|
// Data Display
|
|
22
22
|
export { default as TeamMembers } from './components/data-display/TeamMembers.astro';
|
|
23
23
|
export { default as TeamMember } from './components/data-display/TeamMember.astro';
|
|
24
|
+
export { default as ProductCard } from './components/data-display/ProductCard.astro';
|
|
24
25
|
export { default as Blog } from './components/data-display/Blog.astro';
|
|
25
26
|
|
|
26
27
|
// Layouts
|
package/dist/utils/path.ts
CHANGED
|
@@ -5,8 +5,36 @@
|
|
|
5
5
|
* @returns 是否匹配
|
|
6
6
|
*/
|
|
7
7
|
export function isPathMatch(currentPath: string, targetPath: string): boolean {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
currentPath
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
// 标准化路径，移除最后的斜杠
|
|
9
|
+
const normalizedCurrentPath = currentPath.endsWith('/')
|
|
10
|
+
? currentPath.slice(0, -1)
|
|
11
|
+
: currentPath;
|
|
12
|
+
|
|
13
|
+
const normalizedTargetPath = targetPath.endsWith('/')
|
|
14
|
+
? targetPath.slice(0, -1)
|
|
15
|
+
: targetPath;
|
|
16
|
+
|
|
17
|
+
// 直接比较完整路径
|
|
18
|
+
if (normalizedCurrentPath === normalizedTargetPath) {
|
|
19
|
+
return true;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// 提取不带基础路径的部分进行比较
|
|
23
|
+
// 例如把 /cosy-ui/zh-cn/components/button 中提取 /zh-cn/components/button
|
|
24
|
+
const currentPathSegments = normalizedCurrentPath.split('/').filter(Boolean);
|
|
25
|
+
const targetPathSegments = normalizedTargetPath.split('/').filter(Boolean);
|
|
26
|
+
|
|
27
|
+
// 如果目标路径长度大于当前路径，不可能匹配
|
|
28
|
+
if (targetPathSegments.length > currentPathSegments.length) {
|
|
29
|
+
return false;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// 从后向前比较路径段
|
|
33
|
+
for (let i = 1; i <= targetPathSegments.length; i++) {
|
|
34
|
+
if (currentPathSegments[currentPathSegments.length - i] !== targetPathSegments[targetPathSegments.length - i]) {
|
|
35
|
+
return false;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
return true;
|
|
40
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coffic/cosy-ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.53",
|
|
4
4
|
"description": "An astro component library",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "nookery",
|
|
@@ -33,7 +33,8 @@
|
|
|
33
33
|
"scripts": {
|
|
34
34
|
"dev": "astro dev --host 0.0.0.0 --port 5678",
|
|
35
35
|
"preview:docs": "astro preview --host 0.0.0.0 --port 4330 --outDir dist-docs",
|
|
36
|
-
"
|
|
36
|
+
"preview": "npm run preview:docs",
|
|
37
|
+
"build": "vite build && npm run build:docs && tsx scripts/post-build.ts",
|
|
37
38
|
"build:docs": "astro build"
|
|
38
39
|
},
|
|
39
40
|
"type": "module",
|