@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/{footer → src-astro/footer}/index.ts

@@ -13,19 +13,19 @@ export { default as Footer } from './Footer.astro';
 
 // 导出示例源代码
 export const FooterExampleCodes = {
-    Basic: extractSimpleExample(EFooterBasicSourceCode, 'Footer'),
+  Basic: extractSimpleExample(EFooterBasicSourceCode, 'Footer'),
 };
 
 // 导出页脚包
 export const FooterPackage = {
-    Footer,
-    FooterContainers: {
-        Basic: FooterBasicContainer,
-        WithSocial: FooterWithSocialContainer,
-        WithProducts: FooterWithProductsContainer,
-        WithLogo: FooterWithLogoContainer,
-        WithNavigation: FooterWithNavigationContainer,
-        Complete: FooterCompleteContainer,
-        Features: FooterFeaturesContainer,
-    },
+  Footer,
+  FooterContainers: {
+    Basic: FooterBasicContainer,
+    WithSocial: FooterWithSocialContainer,
+    WithProducts: FooterWithProductsContainer,
+    WithLogo: FooterWithLogoContainer,
+    WithNavigation: FooterWithNavigationContainer,
+    Complete: FooterCompleteContainer,
+    Features: FooterFeaturesContainer,
+  },
 };

package/dist/{grid → src-astro/grid}/Grid.astro

@@ -52,7 +52,7 @@
  */
 
 // 导入样式
-import '../style.ts';
+import '../../style.ts';
 
 import type { HTMLAttributes } from 'astro/types';
 
@@ -60,131 +60,131 @@ 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;
-	  };
+  | 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 `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(' ');
+  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: 'cosy:gap-0',
-	xs: 'cosy:gap-2',
-	sm: 'cosy:gap-4',
-	md: 'cosy:gap-6',
-	lg: 'cosy:gap-8',
-	xl: 'cosy: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: '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',
+  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: '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',
+  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 = [
-	'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,
+  '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(' ');
+  .filter(Boolean)
+  .join(' ');
 ---
 
 <div class:list={[gridClasses, classList]} {...rest}>
-	<slot />
+  <slot />
 </div>

package/dist/src-astro/grid/GridBasic.astro

@@ -0,0 +1,21 @@
+---
+import Grid from './Grid.astro';
+---
+
+<Grid cols={3} gap="md">
+  <div
+    style="background: #60a5fa; color: white; padding: 16px; border-radius: 8px;"
+  >
+    第一列
+  </div>
+  <div
+    style="background: #34d399; color: white; padding: 16px; border-radius: 8px;"
+  >
+    第二列
+  </div>
+  <div
+    style="background: #f59e42; color: white; padding: 16px; border-radius: 8px;"
+  >
+    第三列
+  </div>
+</Grid>

package/dist/{grid → src-astro/grid}/index.ts

@@ -7,5 +7,5 @@ export { Grid, GridBasic };
 
 // 导出示例源代码
 export const GridExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'Grid'),
+  Basic: extractSimpleExample(BasicSourceCode, 'Grid'),
 };

package/dist/src-astro/header/Header.astro

@@ -0,0 +1,209 @@
+---
+/**
+ * @component Header
+ *
+ * @description
+ * Header 组件是一个用于网站顶部导航的布局组件，提供了logo、导航菜单、语言切换等功能。
+ * 组件支持响应式设计，在不同屏幕尺寸下有良好的显示效果，并可选择固定在页面顶部。
+ *
+ * @design
+ * 设计理念：
+ * 1. 简洁实用 - 提供清晰的导航和品牌展示，不过度占用视觉空间
+ * 2. 响应式适配 - 在移动端和桌面端都有合适的展现形式
+ * 3. 可定制性 - 支持多种配置选项，适应不同网站的风格和需求
+ * 4. 多语言支持 - 内置语言切换功能，便于构建国际化网站
+ */
+import '../../style.ts';
+import {
+  LanguageSwitcher,
+  LinkUtil,
+  type IHeaderProps,
+  type INavItem,
+  NavItems,
+  Link,
+  Image,
+  ThemeSwitcher,
+} from '../../index-astro';
+import Logo from '../assets/logo-rounded.png';
+
+export interface Props extends IHeaderProps {
+  debug?: boolean;
+}
+
+const {
+  height = 'md',
+  languages = ['zh-cn', 'en'],
+  logo = Logo,
+  logoHref = '/',
+  navItems = [],
+  sticky = true,
+  debug = false,
+  rounded = 'none',
+  paddingHorizontal = 'none',
+  paddingVertical = 'none',
+  navPosition = 'center',
+  showThemeSwitcher = true,
+} = Astro.props;
+
+// 根据高度设置样式
+const headerHeightClasses = {
+  '3xs': 'cosy:h-4',
+  '2xs': 'cosy:h-6',
+  xs: 'cosy:h-8',
+  sm: 'cosy:h-10',
+  md: 'cosy:h-12',
+  lg: 'cosy:h-16',
+  xl: 'cosy:h-20',
+};
+
+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 = {
+  '3xs': 'cosy:w-3 cosy:h-3',
+  '2xs': 'cosy:w-4 cosy:h-4',
+  xs: 'cosy:w-5 cosy:h-5',
+  sm: 'cosy:w-6 cosy:h-6',
+  md: 'cosy:w-8 cosy:h-8',
+  lg: 'cosy:w-10 cosy:h-10',
+  xl: 'cosy:w-12 cosy:h-12',
+};
+
+const logoSizeClass = logoSizeClasses[height];
+const linkHeightClass = linkHeightClasses[height];
+const currentPath = Astro.url.pathname;
+const activeLink = LinkUtil.getActiveLink(
+  currentPath,
+  navItems.map((item: INavItem) => item.href)
+);
+---
+
+<header
+  class:list={[
+    '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: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">
+      {
+        navPosition === 'start' ? (
+          <div class="cosy:flex cosy:items-center cosy:gap-4">
+            <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>
+            <div class="cosy:hidden cosy:lg:flex">
+              <NavItems
+                navItems={navItems}
+                activeLink={activeLink}
+                linkHeightClass={linkHeightClass}
+              />
+            </div>
+          </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>
+        )
+      }
+      <slot name="navbar-start" />
+    </div>
+
+    <div class="cosy:hidden cosy:lg:flex cosy:navbar-center">
+      {
+        navPosition === 'center' && (
+          <NavItems
+            navItems={navItems}
+            activeLink={activeLink}
+            linkHeightClass={linkHeightClass}
+          />
+        )
+      }
+      <slot name="navbar-center" />
+    </div>
+
+    <div class="cosy:navbar-end cosy:pr-1">
+      {
+        navPosition === 'end' && (
+          <div class="cosy:hidden cosy:lg:flex">
+            <NavItems
+              navItems={navItems}
+              activeLink={activeLink}
+              linkHeightClass={linkHeightClass}
+            />
+          </div>
+        )
+      }
+
+      {showThemeSwitcher && <ThemeSwitcher />}
+      {languages.length > 1 && <LanguageSwitcher languages={languages} />}
+
+      <slot name="navbar-end" />
+    </div>
+  </div>
+</header>

package/dist/{header → src-astro/header}/HeaderBasic.astro

@@ -8,7 +8,12 @@
 import Header from './Header.astro';
 import { getExampleImage } from '../utils/image';
 
-const logo = getExampleImage({ width: 100, height: 100, provider: 'picsum', tag: 'tech' });
+const logo = getExampleImage({
+  width: 100,
+  height: 100,
+  provider: 'picsum',
+  tag: 'tech',
+});
 ---
 
 <Header logoHref={logo} rounded="lg" sticky={false} />

package/dist/src-astro/header/HeaderCustomNavbarCenter.astro

@@ -0,0 +1,28 @@
+---
+/**
+ * @component Header.CustomNavbarCenter
+ *
+ * @description
+ * 自定义导航栏中间内容的Header组件示例，展示如何使用slot自定义中间内容。
+ */
+import '../../style.ts';
+import Header from './Header.astro';
+import { getExampleImage } from '../utils/image.ts';
+
+const logo = getExampleImage({
+  width: 100,
+  height: 100,
+  provider: 'picsum',
+  tag: 'tech',
+});
+---
+
+<Header logoHref={logo} rounded="lg" sticky={false}>
+  <div slot="navbar-center" class="cosy:flex cosy:items-center cosy:gap-4">
+    <span class="cosy:badge cosy:badge-accent">新功能</span>
+    <div class="cosy:divider cosy:divider-horizontal"></div>
+    <span class="cosy:badge cosy:badge-secondary">热门</span>
+    <div class="cosy:divider cosy:divider-horizontal"></div>
+    <span class="cosy:badge">推荐</span>
+  </div>
+</Header>

package/dist/src-astro/header/HeaderCustomNavbarEnd.astro

@@ -0,0 +1,25 @@
+---
+/**
+ * @component Header.CustomNavbarEnd
+ *
+ * @description
+ * 自定义导航栏右侧内容的Header组件示例，展示如何使用slot自定义右侧内容。
+ */
+import '../../style.ts';
+import Header from './Header.astro';
+import { getExampleImage } from '../utils/image.ts';
+
+const logo = getExampleImage({
+  width: 100,
+  height: 100,
+  provider: 'picsum',
+  tag: 'tech',
+});
+---
+
+<Header logoHref={logo} rounded="lg" sticky={false}>
+  <div slot="navbar-end" class="cosy:flex cosy:items-center cosy:gap-2">
+    <button class="cosy:btn cosy:btn-sm cosy:btn-ghost">登录</button>
+    <button class="cosy:btn cosy:btn-sm cosy:btn-primary">注册</button>
+  </div>
+</Header>

package/dist/src-astro/header/HeaderCustomNavbarStart.astro

@@ -0,0 +1,27 @@
+---
+/**
+ * @component Header.CustomNavbarStart
+ *
+ * @description
+ * 自定义导航栏左侧内容的Header组件示例，展示如何使用slot自定义左侧内容。
+ */
+import '../../style.ts';
+import Header from './Header.astro';
+import { getExampleImage } from '../utils/image.ts';
+
+const logo = getExampleImage({
+  width: 100,
+  height: 100,
+  provider: 'picsum',
+  tag: 'tech',
+});
+---
+
+<Header logoHref={logo} rounded="lg" sticky={false}>
+  <div
+    slot="navbar-start"
+    class="cosy:flex cosy:items-center cosy:gap-2 cosy:ml-2">
+    <button class="cosy:btn cosy:btn-sm cosy:btn-primary">联系我们</button>
+    <span class="cosy:badge cosy:badge-outline">在线咨询</span>
+  </div>
+</Header>

package/dist/{header → src-astro/header}/HeaderCustomPosition.astro

@@ -5,19 +5,30 @@
  * @description
  * 自定义导航菜单位置的Header组件示例，展示如何设置导航菜单在左侧、中间或右侧。
  */
-import '../style.ts';
+import '../../style.ts';
 import Header from './Header.astro';
-import { getExampleImage } from '../utils/image';
+import { getExampleImage } from '../utils/image.ts';
 
-const logo = getExampleImage({ width: 100, height: 100, provider: 'picsum', tag: 'tech' });
+const logo = getExampleImage({
+  width: 100,
+  height: 100,
+  provider: 'picsum',
+  tag: 'tech',
+});
 
 const navItems = [
-	{ href: '/docs', label: '文档' },
-	{ href: '/components', label: '组件' },
+  { href: '/docs', label: '文档' },
+  { href: '/components', label: '组件' },
 ];
 
 // 可以通过navPosition属性设置导航菜单位置：start(左侧)、center(中间)、end(右侧)
 const navPosition = 'start';
 ---
 
-<Header logoHref={logo} navItems={navItems} navPosition={navPosition} rounded="lg" sticky={false} />
+<Header
+  logoHref={logo}
+  navItems={navItems}
+  navPosition={navPosition}
+  rounded="lg"
+  sticky={false}
+/>

package/dist/src-astro/header/HeaderWithNavigation.astro

@@ -0,0 +1,27 @@
+---
+/**
+ * @component Header.WithNavigation
+ *
+ * @description
+ * 带导航菜单的Header组件示例，展示如何添加导航菜单项。
+ */
+import '../../style.ts';
+import Header from './Header.astro';
+import { getExampleImage } from '../utils/image.ts';
+
+const logo = getExampleImage({
+  width: 100,
+  height: 100,
+  provider: 'picsum',
+  tag: 'tech',
+});
+
+const navItems = [
+  { href: '/', label: '首页' },
+  { href: '/docs', label: '文档' },
+  { href: '/components', label: '组件' },
+  { href: '/about', label: '关于' },
+];
+---
+
+<Header logoHref={logo} navItems={navItems} rounded="lg" sticky={false} />