@coffic/cosy-ui 0.5.2 → 0.5.6

package/dist/components/layouts/Grid.astro

@@ -1,18 +1,18 @@
 ---
 /**
  * @component Grid
- * 
+ *
  * @description
  * Grid 组件是一个灵活的网格布局组件，用于创建响应式的多列布局。
  * 它封装了 CSS Grid 的常用功能，提供简单易用的接口来控制网格的列数和间距。
- * 
+ *
  * @design
  * 设计理念：
  * 1. 简单易用 - 通过简洁的 API 控制复杂的 Grid 布局
  * 2. 响应式优先 - 内置响应式断点，轻松创建适应不同屏幕尺寸的布局
  * 3. 灵活可配置 - 支持自定义列数和间距
  * 4. 语义化属性 - 使用直观的属性名称，降低学习成本
- * 
+ *
  * @usage
  * 基本用法：
  * ```astro
@@ -22,7 +22,7 @@
  *   <div>第三列</div>
  * </Grid>
  * ```
- * 
+ *
  * 响应式网格：
  * ```astro
  * <Grid cols={{base: 1, md: 2, lg: 3}} gap="lg">
@@ -31,7 +31,7 @@
  *   <div>显示不同的列数</div>
  * </Grid>
  * ```
- * 
+ *
  * 自定义行列间距：
  * ```astro
  * <Grid cols={2} rowGap="lg" colGap="sm">
@@ -41,7 +41,7 @@
  *   <div>第四项</div>
  * </Grid>
  * ```
- * 
+ *
  * @props
  * @prop {number | Object} [cols=1] - 网格列数，可以是固定值或响应式对象
  * @prop {string} [gap="md"] - 网格间距，可选值：none, xs, sm, md, lg, xl
@@ -59,124 +59,132 @@ import type { HTMLAttributes } from 'astro/types';
 type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
-type ResponsiveValue<T> = T | {
-  base?: T;
-  sm?: T;
-  md?: T;
-  lg?: T;
-  xl?: T;
-  '2xl'?: T;
-};
+type ResponsiveValue<T> =
+	| T
+	| {
+			base?: T;
+			sm?: T;
+			md?: T;
+			lg?: T;
+			xl?: T;
+			'2xl'?: T;
+	  };
 
 interface Props extends HTMLAttributes<'div'> {
-  /**
-   * 网格列数，可以是固定值或响应式对象
-   * @default 1
-   */
-  cols?: ResponsiveValue<number>;
-  
-  /**
-   * 网格间距
-   * @default "md"
-   */
-  gap?: GapSize;
-  
-  /**
-   * 行间距，默认与gap相同
-   */
-  rowGap?: GapSize;
-  
-  /**
-   * 列间距，默认与gap相同
-   */
-  colGap?: GapSize;
-  
-  /**
-   * 自定义类名
-   */
-  class?: string;
-  
-  /**
-   * 类名列表
-   */
-  'class:list'?: any;
+	/**
+	 * 网格列数，可以是固定值或响应式对象
+	 * @default 1
+	 */
+	cols?: ResponsiveValue<number>;
+
+	/**
+	 * 网格间距
+	 * @default "md"
+	 */
+	gap?: GapSize;
+
+	/**
+	 * 行间距，默认与gap相同
+	 */
+	rowGap?: GapSize;
+
+	/**
+	 * 列间距，默认与gap相同
+	 */
+	colGap?: GapSize;
+
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+
+	/**
+	 * 类名列表
+	 */
+	'class:list'?: any;
 }
 
 const {
-  cols = 1,
-  gap = 'md',
-  rowGap,
-  colGap,
-  class: className = '',
-  'class:list': classList,
-  ...rest
+	cols = 1,
+	gap = 'md',
+	rowGap,
+	colGap,
+	class: className = '',
+	'class:list': classList,
+	...rest
 } = Astro.props;
 
 // 处理响应式列数
 const getColsClasses = (cols: ResponsiveValue<number>) => {
-  if (typeof cols === 'number') {
-    return `grid-cols-${cols}`;
-  }
-  
-  const breakpoints: Record<Breakpoint, string> = {
-    base: '',
-    sm: 'sm:',
-    md: 'md:',
-    lg: 'lg:',
-    xl: 'xl:',
-    '2xl': '2xl:'
-  };
-  
-  return Object.entries(cols)
-    .map(([breakpoint, value]) => {
-      if (breakpoint === 'base') {
-        return `grid-cols-${value}`;
-      }
-      return `${breakpoints[breakpoint as Breakpoint]}grid-cols-${value}`;
-    })
-    .join(' ');
+	if (typeof cols === 'number') {
+		return `cosy:grid-cols-${cols}`;
+	}
+
+	const breakpoints: Record<Breakpoint, string> = {
+		base: '',
+		sm: 'sm:',
+		md: 'md:',
+		lg: 'lg:',
+		xl: 'xl:',
+		'2xl': '2xl:',
+	};
+
+	return Object.entries(cols)
+		.map(([breakpoint, value]) => {
+			if (breakpoint === 'base') {
+				return `cosy:grid-cols-${value}`;
+			}
+			return `cosy:${breakpoints[breakpoint as Breakpoint]}grid-cols-${value}`;
+		})
+		.join(' ');
 };
 
 // 间距映射
 const gapClasses: Record<GapSize, string> = {
-  none: 'gap-0',
-  xs: 'gap-2',
-  sm: 'gap-4',
-  md: 'gap-6',
-  lg: 'gap-8',
-  xl: 'gap-12'
+	none: 'cosy:gap-0',
+	xs: 'cosy:gap-2',
+	sm: 'cosy:gap-4',
+	md: 'cosy:gap-6',
+	lg: 'cosy:gap-8',
+	xl: 'cosy:gap-12',
 };
 
 // 行间距映射
 const rowGapClasses: Record<GapSize, string> = {
-  none: 'row-gap-0',
-  xs: 'row-gap-2',
-  sm: 'row-gap-4',
-  md: 'row-gap-6',
-  lg: 'row-gap-8',
-  xl: 'row-gap-12'
+	none: 'cosy:row-gap-0',
+	xs: 'cosy:row-gap-2',
+	sm: 'cosy:row-gap-4',
+	md: 'cosy:row-gap-6',
+	lg: 'cosy:row-gap-8',
+	xl: 'cosy:row-gap-12',
 };
 
 // 列间距映射
 const colGapClasses: Record<GapSize, string> = {
-  none: 'col-gap-0',
-  xs: 'col-gap-2',
-  sm: 'col-gap-4',
-  md: 'col-gap-6',
-  lg: 'col-gap-8',
-  xl: 'col-gap-12'
+	none: 'cosy:col-gap-0',
+	xs: 'cosy:col-gap-2',
+	sm: 'cosy:col-gap-4',
+	md: 'cosy:col-gap-6',
+	lg: 'cosy:col-gap-8',
+	xl: 'cosy:col-gap-12',
 };
 
 // 构建最终类名
 const gridClasses = [
-  'grid',
-  getColsClasses(cols),
-  rowGap ? rowGapClasses[rowGap as GapSize] : colGap ? gapClasses[gap as GapSize] : gapClasses[gap as GapSize],
-  colGap ? colGapClasses[colGap as GapSize] : null,
-  className
-].filter(Boolean).join(' ');
+	'cosy:grid',
+	getColsClasses(cols),
+	rowGap
+		? rowGapClasses[rowGap as GapSize]
+		: colGap
+			? gapClasses[gap as GapSize]
+			: gapClasses[gap as GapSize],
+	colGap ? colGapClasses[colGap as GapSize] : null,
+	className,
+]
+	.filter(Boolean)
+	.join(' ');
 ---
 
 <div class:list={[gridClasses, classList]} {...rest}>
-  <slot />
+	<slot />
 </div>

package/dist/components/layouts/Header.astro

@@ -26,19 +26,27 @@
  * />
  * ```
  *
- * 自定义语言选项：
+ * 自定义导航菜单位置：
  * ```astro
  * <Header
  *   logo={import("../assets/logo.png")}
- *   languages={["zh-cn", "en", "ja"]}
+ *   navPosition="start"
+ *   navItems={[
+ *     { href: "/docs", label: "文档", match: (path) => path.startsWith("/docs") },
+ *     { href: "/components", label: "组件", match: (path) => path.startsWith("/components") }
+ *   ]}
  * />
  * ```
+ * navPosition 可选值：
+ * - start: 导航菜单在左侧
+ * - center: 导航菜单在中间（默认）
+ * - end: 导航菜单在右侧
  *
- * 带有基础路径：
+ * 自定义语言选项：
  * ```astro
  * <Header
  *   logo={import("../assets/logo.png")}
- *   basePath="/my-site"
+ *   languages={["zh-cn", "en", "ja"]}
  * />
  * ```
  *
@@ -55,7 +63,9 @@ import Image from '../base/Image.astro';
 import { LanguageSwitcher, LinkUtil, type HeaderProps, type NavItem } from '../../index';
 import Logo from '../../assets/logo-rounded.png';
 
-export interface Props extends HeaderProps {}
+export interface Props extends HeaderProps {
+	debug?: boolean;
+}
 
 const {
 	height = 'md',
@@ -64,6 +74,11 @@ const {
 	logoHref = '/',
 	navItems = [],
 	sticky = true,
+	debug = false,
+	rounded = 'none',
+	paddingHorizontal = 'none',
+	paddingVertical = 'none',
+	navPosition = 'center',
 } = Astro.props;
 
 // 根据高度设置样式
@@ -110,45 +125,144 @@ const activeLink = LinkUtil.getActiveLink(
 
 <header
 	class:list={[
-		'cosy:navbar cosy:bg-accent/70 cosy:backdrop-blur cosy:border-base-200 cosy:z-50 cosy:w-full cosy:m-0 cosy:p-0 cosy:min-h-1',
-		headerHeightClass,
-		{ 'cosy:fixed cosy:top-0': sticky },
+		'cosy:w-full cosy:z-50',
+		{
+			'cosy:fixed cosy:top-0': sticky,
+			'cosy:border cosy:bg-amber-300 cosy:border-dashed cosy:border-green-500': debug,
+		},
+		{
+			'cosy:px-2': paddingHorizontal === 'sm',
+			'cosy:px-4': paddingHorizontal === 'md',
+			'cosy:px-6': paddingHorizontal === 'lg',
+			'cosy:px-8': paddingHorizontal === 'xl',
+			'cosy:px-12': paddingHorizontal === '2xl',
+			'cosy:px-16': paddingHorizontal === '3xl',
+		},
+		{
+			'cosy:py-2': paddingVertical === 'sm',
+			'cosy:py-4': paddingVertical === 'md',
+			'cosy:py-6': paddingVertical === 'lg',
+			'cosy:py-8': paddingVertical === 'xl',
+			'cosy:py-12': paddingVertical === '2xl',
+			'cosy:py-16': paddingVertical === '3xl',
+		},
 	]}>
-	<div class="cosy:navbar-start">
-		<Link
-			animation="none"
-			href={logoHref}
-			class:list={['cosy:btn cosy:btn-ghost', linkHeightClass]}>
-			<Image
-				showPlaceholder={false}
-				transition="none"
-				lazy={false}
-				src={logo}
-				alt="logo"
-				class={logoSizeClass}
-			/>
-		</Link>
-	</div>
-
-	<!-- 导航 -->
-	<div class="cosy:hidden cosy:lg:flex cosy:navbar-center">
-		<ul class:list={['cosy:px-1 cosy:menu cosy:menu-horizontal', linkHeightClass]}>
+	<!-- 背景 -->
+	<div
+		class:list={[
+			'cosy:bg-accent/70 cosy:flex cosy:flex-grow cosy:backdrop-blur not-prose cosy:border-base-200',
 			{
-				navItems.map((item: NavItem) => (
-					<li>
+				'cosy:rounded-none': rounded === 'none',
+				'cosy:rounded-sm': rounded === 'sm',
+				'cosy:rounded-md': rounded === 'md',
+				'cosy:rounded-lg': rounded === 'lg',
+				'cosy:rounded-xl': rounded === 'xl',
+				'cosy:rounded-full': rounded === 'full',
+			},
+			headerHeightClass,
+			{ 'cosy:border cosy:border-dashed cosy:border-red-500': debug },
+		]}>
+		<!-- 左侧 -->
+		<div class="cosy:navbar-start cosy:pl-1">
+			{
+				navPosition === 'start' ? (
+					<div class="cosy:flex cosy:items-center cosy:gap-4">
 						<Link
-							variant={activeLink == item.href ? 'primary' : 'default'}
-							href={item.href}
-							class:list={[linkHeightClass]}>
-							{item.label}
+							animation="none"
+							debug={debug}
+							href={logoHref}
+							class:list={['cosy:btn cosy:btn-ghost', linkHeightClass]}>
+							<Image
+								rounded="full"
+								showPlaceholder={false}
+								transition="none"
+								lazy={false}
+								src={logo}
+								alt="logo"
+								class={logoSizeClass}
+							/>
 						</Link>
-					</li>
-				))
+						<ul
+							class:list={[
+								'cosy:hidden cosy:lg:flex cosy:px-1 cosy:menu cosy:menu-horizontal',
+								linkHeightClass,
+							]}>
+							{navItems.map((item: NavItem) => (
+								<li>
+									<Link
+										variant={activeLink == item.href ? 'primary' : 'default'}
+										href={item.href}
+										class:list={[linkHeightClass]}>
+										{item.label}
+									</Link>
+								</li>
+							))}
+						</ul>
+					</div>
+				) : (
+					<Link
+						animation="none"
+						debug={debug}
+						href={logoHref}
+						class:list={['cosy:btn cosy:btn-ghost', linkHeightClass]}>
+						<Image
+							rounded="full"
+							showPlaceholder={false}
+							transition="none"
+							lazy={false}
+							src={logo}
+							alt="logo"
+							class={logoSizeClass}
+						/>
+					</Link>
+				)
 			}
-		</ul>
-	</div>
+		</div>
 
-	<div class="cosy:navbar-end">
-		<LanguageSwitcher languages={languages} />
+		<!-- 中间 -->
+		{
+			navPosition === 'center' && (
+				<div class="cosy:hidden cosy:lg:flex cosy:navbar-center">
+					<ul class:list={['cosy:px-1 cosy:menu cosy:menu-horizontal', linkHeightClass]}>
+						{navItems.map((item: NavItem) => (
+							<li>
+								<Link
+									variant={activeLink == item.href ? 'primary' : 'default'}
+									href={item.href}
+									class:list={[linkHeightClass]}>
+									{item.label}
+								</Link>
+							</li>
+						))}
+					</ul>
+				</div>
+			)
+		}
+
+		<!-- 右侧 -->
+		<div class="cosy:navbar-end cosy:pr-1">
+			{
+				navPosition === 'end' && (
+					<ul
+						class:list={[
+							'cosy:hidden cosy:lg:flex cosy:px-1 cosy:menu cosy:menu-horizontal',
+							linkHeightClass,
+						]}>
+						{navItems.map((item: NavItem) => (
+							<li>
+								<Link
+									variant={activeLink == item.href ? 'primary' : 'default'}
+									href={item.href}
+									class:list={[linkHeightClass]}>
+									{item.label}
+								</Link>
+							</li>
+						))}
+					</ul>
+				)
+			}
+			<!-- 语言切换 -->
+			<LanguageSwitcher languages={languages} />
+		</div>
 	</div>
 </header>

package/dist/components/layouts/Sidebar.astro

@@ -92,14 +92,14 @@ const currentSection = sidebarItems.find((section) =>
 		</button>
 		<span class="cosy:font-medium cosy:text-sm">{currentSection?.text || '导航'}</span>
 	</div>
-</div>;
+</div>
 
 {/* 移动端侧边栏弹出层 */}
 <Modal id="mobile-sidebar" class="cosy:mx-4 cosy:lg:w-80 cosy:w-[calc(100vw-2rem)] cosy:max-w-full">
 	<div class="cosy:h-[calc(100vh-8rem)] cosy:overflow-y-auto">
 		<SidebarNav sidebarItems={sidebarItems} currentPath={currentPath} debug={debug} />
 	</div>
-</Modal>;
+</Modal>
 
 {/* 桌面端侧边栏 */}
 <aside
@@ -116,4 +116,60 @@ const currentSection = sidebarItems.find((section) =>
 	<div class="cosy:top-16 cosy:sticky cosy:pb-48 cosy:h-[calc(100vh-0rem)] cosy:overflow-y-auto">
 		<SidebarNav sidebarItems={sidebarItems} currentPath={currentPath} debug={debug} />
 	</div>
-</aside>; ---
+</aside>
+
+<script>
+	// 处理侧边栏滚动位置保存和恢复
+	document.addEventListener('astro:before-preparation', () => {
+		// 获取桌面侧边栏滚动容器
+		const desktopSidebarContent = document.querySelector(
+			'aside[data-sidebar] .cosy\\:overflow-y-auto'
+		);
+
+		// 保存滚动位置到localStorage
+		if (desktopSidebarContent) {
+			localStorage.setItem('sidebarScrollPosition', desktopSidebarContent.scrollTop.toString());
+		}
+
+		// 获取移动端侧边栏滚动容器
+		const mobileSidebarContent = document.querySelector(
+			'.cosy\\:h-\\[calc\\(100vh-8rem\\)\\].cosy\\:overflow-y-auto'
+		);
+
+		// 保存移动端滚动位置
+		if (mobileSidebarContent) {
+			localStorage.setItem(
+				'mobileSidebarScrollPosition',
+				mobileSidebarContent.scrollTop.toString()
+			);
+		}
+	});
+
+	document.addEventListener('astro:page-load', () => {
+		// 获取桌面侧边栏滚动容器
+		const desktopSidebarContent = document.querySelector(
+			'aside[data-sidebar] .cosy\\:overflow-y-auto'
+		);
+
+		// 恢复滚动位置
+		if (desktopSidebarContent) {
+			const savedPosition = localStorage.getItem('sidebarScrollPosition');
+			if (savedPosition) {
+				desktopSidebarContent.scrollTop = parseInt(savedPosition, 10);
+			}
+		}
+
+		// 获取移动端侧边栏滚动容器
+		const mobileSidebarContent = document.querySelector(
+			'.cosy\\:h-\\[calc\\(100vh-8rem\\)\\].cosy\\:overflow-y-auto'
+		);
+
+		// 恢复移动端滚动位置
+		if (mobileSidebarContent) {
+			const savedMobilePosition = localStorage.getItem('mobileSidebarScrollPosition');
+			if (savedMobilePosition) {
+				mobileSidebarContent.scrollTop = parseInt(savedMobilePosition, 10);
+			}
+		}
+	});
+</script>

package/dist/components/navigation/TableOfContents.astro

@@ -106,12 +106,11 @@ const {
 	maxDepth = 3,
 	containerSelector = 'main',
 	minHeadings = 2,
-	lang: userLang,
 	title,
 } = Astro.props;
 
 // 获取当前语言
-const langInfo = LanguageUtil.getCurrentLanguage(userLang);
+const langInfo = LanguageUtil.getCurrentLanguage(Astro);
 // 创建文本获取函数
 const t = createTextGetter(langInfo, 'tableOfContents');
 // 获取标题文本，如果用户提供了标题则使用用户提供的标题
@@ -126,7 +125,8 @@ const tocId = `toc-${Math.random().toString(36).substring(2, 9)}`;
 		<div
 			class={`toc-container toc-scroll-container ${fixed ? 'cosy:w-64' : 'cosy:w-full cosy:max-w-xs'}`}
 			id={`${tocId}-container`}
-			style="display: none;">
+			style="display: none;"
+		>
 			<div class="cosy:bg-base-100 cosy:shadow-inner cosy:card">
 				<div class="cosy:p-4 cosy:card-body">
 					<div class="cosy:mb-2 cosy:font-bold cosy:text-lg cosy:card-title">{titleText}</div>

package/dist/integration.ts

@@ -1,12 +1,12 @@
-import { defineIntegration } from "astro-integration-kit";
+import { defineIntegration } from 'astro-integration-kit';
 
 export const integration = defineIntegration({
-	name: "astro-cosy",
+	name: 'cosy-ui',
 	setup() {
 		return {
 			hooks: {
-				"astro:config:setup": ({ logger }) => {
-					logger.info("astro-cosy integration setup");
+				'astro:config:setup': ({ logger }) => {
+					logger.info('cosy-ui integration setup');
 				},
 			},
 		};

package/dist/style.ts

@@ -1 +1,2 @@
-import './app.css'; 
+// 为了让vite处理css文件，所以建立这个文件
+import './app.css';