@coffic/cosy-ui 0.4.9 → 0.5.4

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,24 +26,27 @@
  * />
  * ```
  *
- * 自定义语言选项：
+ * 自定义导航菜单位置：
  * ```astro
  * <Header
  *   logo={import("../assets/logo.png")}
- *   languages={[
- *     { code: "zh-cn", name: "简体中文" },
- *     { code: "en", name: "English" },
- *     { code: "ja", name: "日本語" }
+ *   navPosition="start"
+ *   navItems={[
+ *     { href: "/docs", label: "文档", match: (path) => path.startsWith("/docs") },
+ *     { href: "/components", label: "组件", match: (path) => path.startsWith("/components") }
  *   ]}
- *   currentLocale="zh-cn"
  * />
  * ```
+ * navPosition 可选值：
+ * - start: 导航菜单在左侧
+ * - center: 导航菜单在中间（默认）
+ * - end: 导航菜单在右侧
  *
- * 带有基础路径：
+ * 自定义语言选项：
  * ```astro
  * <Header
  *   logo={import("../assets/logo.png")}
- *   basePath="/my-site"
+ *   languages={["zh-cn", "en", "ja"]}
  * />
  * ```
  *
@@ -57,54 +60,27 @@
 import '../../app.css';
 import Link from '../base/Link.astro';
 import Image from '../base/Image.astro';
-import type { HeaderProps } from '../../index';
+import { LanguageSwitcher, LinkUtil, type HeaderProps, type NavItem } from '../../index';
 import Logo from '../../assets/logo-rounded.png';
 
-interface Props extends HeaderProps {}
+export interface Props extends HeaderProps {
+	debug?: boolean;
+}
 
 const {
-	basePath = '',
-	currentLocale = 'zh-cn',
 	height = 'md',
-	languages = [
-		{ code: 'zh-cn', name: '中文' },
-		{ code: 'en', name: 'English' },
-	],
+	languages = ['zh-cn', 'en'],
 	logo = Logo,
 	logoHref = '/',
 	navItems = [],
 	sticky = true,
+	debug = false,
+	rounded = 'none',
+	paddingHorizontal = 'none',
+	paddingVertical = 'none',
+	navPosition = 'center',
 } = Astro.props;
 
-type NavItem = { href: string; label: string; match: (path: string) => boolean };
-
-// 获取当前路径
-const currentPath = Astro.url.pathname;
-
-// 处理基础路径
-const basePathPattern = basePath ? new RegExp(`^${basePath}`) : null;
-const pathWithoutBase = basePathPattern ? currentPath.replace(basePathPattern, '') : currentPath;
-
-// 提取路径部分，排除语言代码
-const pathWithoutLocale = pathWithoutBase.replace(/^\/(zh-cn|en)/, '');
-
-// 生成语言切换链接
-function getLanguageUrl(langCode: string) {
-	// 如果有基础路径，需要加上
-	return `${basePath}/${langCode}${pathWithoutLocale}`;
-}
-
-// 获取初始高度（优先使用localStorage中的值）
-type HeightType = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-let initialHeight: HeightType;
-if (typeof window !== 'undefined') {
-	const storedHeight = localStorage.getItem('cosy-header-height');
-	initialHeight = (storedHeight as HeightType) || height;
-} else {
-	initialHeight = height;
-}
-
 // 根据高度设置样式
 const headerHeightClasses = {
 	'3xs': 'cosy:h-4',
@@ -116,7 +92,16 @@ const headerHeightClasses = {
 	xl: 'cosy:h-20',
 };
 
-const headerHeightClass = headerHeightClasses[initialHeight];
+const headerHeightClass = headerHeightClasses[height];
+const linkHeightClasses = {
+	'3xs': 'cosy:py-0',
+	'2xs': 'cosy:py-0',
+	xs: 'cosy:py-0',
+	sm: 'cosy:py-1',
+	md: 'cosy:py-1',
+	lg: 'cosy:py-2',
+	xl: 'cosy:py-3',
+};
 
 // 设置logo大小
 const logoSizeClasses = {
@@ -129,101 +114,155 @@ const logoSizeClasses = {
 	xl: 'cosy:w-12 cosy:h-12',
 };
 
-const logoSizeClass = logoSizeClasses[initialHeight];
+const logoSizeClass = logoSizeClasses[height];
+const linkHeightClass = linkHeightClasses[height];
+const currentPath = Astro.url.pathname;
+const activeLink = LinkUtil.getActiveLink(
+	currentPath,
+	navItems.map((item: NavItem) => item.href)
+);
 ---
 
 <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
-			href={logoHref}
-			class:list={[
-				'cosy:btn cosy:btn-ghost',
-				initialHeight === 'xs' || initialHeight === '2xs' || initialHeight === '3xs'
-					? 'cosy:btn-xs cosy:h-auto cosy:min-h-0 cosy:p-1'
-					: initialHeight === 'sm'
-						? 'cosy:btn-sm'
-						: '',
-			]}>
-			<Image transition="none" 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',
-				initialHeight === 'xs' || initialHeight === '2xs' || initialHeight === '3xs'
-					? 'cosy:menu-xs'
-					: initialHeight === 'sm'
-						? 'cosy:menu-sm'
-						: '',
-			]}>
+	<!-- 背景 -->
+	<div
+		class:list={[
+			'cosy:bg-accent/70 cosy:flex cosy:flex-grow cosy:backdrop-blur not-prose cosy:border-base-200',
+			{
+				'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">
 			{
-				navItems.map((item: NavItem) => (
-					<li>
+				navPosition === 'start' ? (
+					<div class="cosy:flex cosy:items-center cosy:gap-4">
 						<Link
-							href={item.href}
+							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
 							class:list={[
-								initialHeight === 'xs' || initialHeight === '2xs' || initialHeight === '3xs'
-									? 'cosy:py-0 cosy:px-2 cosy:min-h-0'
-									: initialHeight === 'sm'
-										? 'cosy:py-1 cosy:min-h-6'
-										: '',
+								'cosy:hidden cosy:lg:flex cosy:px-1 cosy:menu cosy:menu-horizontal',
+								linkHeightClass,
 							]}>
-							{item.label}
-						</Link>
-					</li>
-				))
+							{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">
-		<!-- 语言切换按钮 -->
-		<div class="cosy:dropdown cosy:dropdown-end">
-			<div
-				tabindex="0"
-				role="button"
-				class:list={[
-					'cosy:btn cosy:btn-ghost',
-					initialHeight === 'xs' || initialHeight === '2xs' || initialHeight === '3xs'
-						? 'cosy:btn-xs cosy:h-auto cosy:min-h-0 cosy:p-1'
-						: initialHeight === 'sm'
-							? 'cosy:btn-sm'
-							: 'cosy:btn-sm',
-				]}>
-				<span class="cosy:mr-1">{currentLocale === 'zh-cn' ? '中文' : 'English'}</span>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="cosy:w-4 cosy:h-4"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"
-					></path>
-				</svg>
-			</div>
-			<ul
-				tabindex="0"
-				class="cosy:z-[1] cosy:bg-base-100 cosy:shadow cosy:p-2 cosy:rounded-box cosy:w-32 cosy:dropdown-content cosy:menu">
-				{
-					languages.map((lang) => (
-						<li class={currentLocale === lang.code ? 'cosy:disabled' : ''}>
-							<a
-								href={getLanguageUrl(lang.code)}
-								class={currentLocale === lang.code ? 'cosy:active' : ''}>
-								{lang.name}
-							</a>
-						</li>
-					))
-				}
-			</ul>
+		<!-- 中间 -->
+		{
+			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

@@ -73,7 +73,7 @@ function getVerticalMarginBottomClasses(marginBottom: string) {
 
 // 获取当前活动的一级导航项
 const currentSection = sidebarItems.find((section) =>
-	section.items.some((item) => isPathMatch(currentPath, item.href))
+	section.items?.some((item) => isPathMatch(currentPath, item.href))
 );
 ---
 
@@ -90,16 +90,16 @@ const currentSection = sidebarItems.find((section) =>
 			data-modal-target="mobile-sidebar">
 			<MenuIcon class="cosy:w-5 cosy:h-5" />
 		</button>
-		<span class="cosy:font-medium cosy:text-sm">{currentSection?.title || '导航'}</span>
+		<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,4 @@ 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>