@coffic/cosy-ui 0.6.26 → 0.6.30

package/dist/article/ArticleBasic.astro

@@ -0,0 +1,31 @@
+---
+import Article from './Article.astro';
+---
+
+<Article>
+	<h1>文章标题</h1>
+	<p>这是一段介绍性文字，可以包含<a href="#">链接</a>和<code>行内代码</code>。</p>
+
+	<h2>二级标题</h2>
+	<p>这是二级标题下的段落内容。</p>
+
+	<blockquote>这是一段引用内容，可以用来强调重要信息或引用他人的话。</blockquote>
+
+	<h3>三级标题</h3>
+	<ul>
+		<li>无序列表项一</li>
+		<li>无序列表项二</li>
+	</ul>
+
+	<h4>四级标题</h4>
+	<ol>
+		<li>有序列表项一</li>
+		<li>有序列表项二</li>
+	</ol>
+
+	<pre><code>// 这是一个代码块
+function example() &#123;
+  return "示例代码";
+&#125;
+</code></pre>
+</Article>

package/dist/article/index.ts

@@ -0,0 +1,11 @@
+import Article from './Article.astro';
+import ArticleBasic from './ArticleBasic.astro';
+import BasicSourceCode from './ArticleBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Article, ArticleBasic };
+
+// 导出示例源代码
+export const ArticleExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Article'),
+};

package/dist/{components/base → button}/Button.astro

@@ -49,7 +49,7 @@
  */
 
 // 导入样式
-import '../../style.ts';
+import '../style.ts';
 
 interface Props {
 	variant?:
@@ -159,4 +159,3 @@ const buttonClasses = getButtonClasses();
 		<slot name="icon-right" />
 	</span>
 </button>
-

package/dist/button/ButtonBasic.astro

@@ -0,0 +1,18 @@
+---
+import Button from './Button.astro';
+---
+
+<div class="cosy:flex cosy:flex-wrap cosy:gap-2">
+	<Button>默认按钮</Button>
+	<Button variant="primary">主要按钮</Button>
+	<Button variant="secondary">次要按钮</Button>
+	<Button variant="accent">强调按钮</Button>
+	<Button variant="info">信息按钮</Button>
+	<Button variant="success">成功按钮</Button>
+	<Button variant="warning">警告按钮</Button>
+	<Button variant="error">错误按钮</Button>
+	<Button variant="ghost">幽灵按钮</Button>
+	<Button variant="link">链接按钮</Button>
+	<Button variant="outline">轮廓按钮</Button>
+	<Button variant="neutral">中性按钮</Button>
+</div>

package/dist/button/ButtonShapes.astro

@@ -0,0 +1,23 @@
+---
+import Button from './Button.astro';
+---
+
+<div class="cosy:flex cosy:flex-wrap cosy:gap-2">
+	<Button>默认形状</Button>
+
+	<Button shape="circle" variant="primary">
+		<span slot="icon-left">🔄</span>
+	</Button>
+
+	<Button shape="square" variant="success">
+		<span slot="icon-left">✨</span>
+	</Button>
+
+	<Button shape="circle" variant="warning" size="lg">
+		<span slot="icon-left">⚡</span>
+	</Button>
+
+	<Button shape="square" variant="error" size="sm">
+		<span slot="icon-left">❌</span>
+	</Button>
+</div>

package/dist/button/ButtonSizes.astro

@@ -0,0 +1,15 @@
+---
+import Button from './Button.astro';
+---
+
+<div class="cosy:flex cosy:items-center cosy:gap-2">
+	<Button size="xs">超小按钮</Button>
+	<Button size="sm">小型按钮</Button>
+	<Button size="md">中等按钮</Button>
+	<Button size="lg">大型按钮</Button>
+</div>
+
+<div class="cosy:mt-4 cosy:flex cosy:items-center cosy:gap-2">
+	<Button size="lg" wide>宽按钮</Button>
+	<Button block>块级按钮</Button>
+</div>

package/dist/button/ButtonStates.astro

@@ -0,0 +1,12 @@
+---
+import Button from './Button.astro';
+---
+
+<div class="cosy:flex cosy:flex-wrap cosy:gap-2">
+	<Button>正常按钮</Button>
+	<Button disabled>禁用按钮</Button>
+	<Button loading>加载中</Button>
+	<Button variant="primary" loading>加载中</Button>
+	<Button variant="success" disabled>禁用成功按钮</Button>
+	<Button variant="error" loading>处理错误中</Button>
+</div>

package/dist/button/ButtonWithIcons.astro

@@ -0,0 +1,25 @@
+---
+import Button from './Button.astro';
+---
+
+<div class="cosy:flex cosy:flex-wrap cosy:gap-2">
+	<Button variant="primary">
+		<span slot="icon-left">👈</span>
+		返回
+	</Button>
+
+	<Button variant="success">
+		确认
+		<span slot="icon-right">✅</span>
+	</Button>
+
+	<Button variant="info">
+		<span slot="icon-left">💾</span>
+		保存
+		<span slot="icon-right">📁</span>
+	</Button>
+
+	<Button variant="warning" shape="circle">
+		<span slot="icon-left">⚠️</span>
+	</Button>
+</div>

package/dist/button/index.ts

@@ -0,0 +1,23 @@
+import Button from './Button.astro';
+import ButtonBasic from './ButtonBasic.astro';
+import ButtonSizes from './ButtonSizes.astro';
+import ButtonStates from './ButtonStates.astro';
+import ButtonWithIcons from './ButtonWithIcons.astro';
+import ButtonShapes from './ButtonShapes.astro';
+import BasicSourceCode from './ButtonBasic.astro?raw';
+import SizesSourceCode from './ButtonSizes.astro?raw';
+import StatesSourceCode from './ButtonStates.astro?raw';
+import WithIconsSourceCode from './ButtonWithIcons.astro?raw';
+import ShapesSourceCode from './ButtonShapes.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Button, ButtonBasic, ButtonSizes, ButtonStates, ButtonWithIcons, ButtonShapes };
+
+// 导出示例源代码
+export const ButtonExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Button'),
+	Sizes: extractSimpleExample(SizesSourceCode, 'Button'),
+	States: extractSimpleExample(StatesSourceCode, 'Button'),
+	WithIcons: extractSimpleExample(WithIconsSourceCode, 'Button'),
+	Shapes: extractSimpleExample(ShapesSourceCode, 'Button'),
+};

package/dist/components/containers/Main.astro

@@ -49,8 +49,7 @@
  */
 import '../../style.ts';
 import type { IMainContentProps } from '../../index';
-import Article from '../typography/Article.astro';
-import TableOfContents from '../navigation/TableOfContents.astro';
+import { Article, TableOfContents } from '../../index';
 
 export interface Props extends IMainContentProps {}
 

package/dist/components/data-display/ProductCard.astro

@@ -68,6 +68,7 @@
 
 import { SocialIcon, Image, Link } from '../../index';
 import '../../style.ts';
+import type { ImageSource } from '../../types/image';
 
 // 自定义图片元数据接口，替代 astro 的 ImageMetadata
 interface CustomImageMetadata {
@@ -87,7 +88,7 @@ export interface Props {
 	/**
 	 * 产品图片
 	 */
-	image: CustomImageMetadata | string;
+	image: ImageSource;
 	/**
 	 * 产品描述
 	 */

package/dist/components/data-display/TeamMember.astro

@@ -42,6 +42,7 @@
 
 import { SocialIcon, Image, Link } from '../../index';
 import '../../style.ts';
+import type { ImageSource } from '../../types/image';
 
 interface SocialLink {
 	/**
@@ -74,7 +75,7 @@ export interface Props {
 	/**
 	 * 团队成员头像
 	 */
-	avatar: CustomImageMetadata | string;
+	avatar: ImageSource;
 	/**
 	 * 团队成员简介
 	 */

package/dist/components/data-display/TeamMembers.astro

@@ -31,6 +31,7 @@
 
 import TeamMember from './TeamMember.astro';
 import '../../style.ts';
+import type { ImageSource } from '../../types/image';
 
 // 自定义图片元数据接口
 interface ImageMetadata {
@@ -48,7 +49,7 @@ interface SocialLink {
 interface TeamMemberData {
 	name: string;
 	role: string;
-	avatar: ImageMetadata | string;
+	avatar: ImageSource;
 	bio: string;
 	socialLinks?: SocialLink[];
 }

package/dist/components/display/Hero.astro

@@ -151,7 +151,7 @@
  */
 
 import '../../style.ts';
-import Link from '../base/Link.astro';
+import { Link } from '../../index';
 
 interface Link {
 	text: string;

package/dist/components/display/Modal.astro

@@ -45,7 +45,7 @@
  */
 
 import '../../style.ts';
-import Button from '../base/Button.astro';
+import { Button } from '../../index';
 
 interface Props {
 	/**

package/dist/{components/errors → errors}/404.astro

@@ -1,5 +1,5 @@
 ---
-import { LinkUtil } from '../../utils/link';
+import { LinkUtil } from '../utils/link';
 const baseUrl = LinkUtil.getBaseUrl();
 const path = Astro.url.pathname;
 

package/dist/errors/404Basic.astro

@@ -0,0 +1,5 @@
+---
+import Error404 from './404.astro';
+---
+
+<Error404 debugKVs={{ reason: '示例：页面不存在', try: '请检查链接是否正确' }} />

package/dist/errors/index.ts

@@ -0,0 +1,11 @@
+import Error404 from './404.astro';
+import Error404Basic from './404Basic.astro';
+import BasicSourceCode from './404Basic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Error404, Error404Basic };
+
+// 导出示例源代码
+export const Error404ExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Error404'),
+};

package/dist/flex/FlexBasic.astro

@@ -0,0 +1,9 @@
+---
+import Flex from './Flex.astro';
+---
+
+<Flex gap="md" justify="center" align="center" style="height: 200px; background: #f3f4f6;">
+	<div style="background: #60a5fa; color: white; padding: 16px; border-radius: 8px;">元素 1</div>
+	<div style="background: #34d399; color: white; padding: 16px; border-radius: 8px;">元素 2</div>
+	<div style="background: #f59e42; color: white; padding: 16px; border-radius: 8px;">元素 3</div>
+</Flex>

package/dist/flex/index.ts

@@ -0,0 +1,11 @@
+import Flex from './Flex.astro';
+import FlexBasic from './FlexBasic.astro';
+import BasicSourceCode from './FlexBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Flex, FlexBasic };
+
+// 导出示例源代码
+export const FlexExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Flex'),
+};

package/dist/{components/layouts → footer}/Footer.astro

@@ -145,10 +145,10 @@
  * - 社交媒体图标包含屏幕阅读器专用的文本说明
  */
 
-import { processSocialLink } from '../../utils/social';
-import { SocialIcon, LanguageUtil, type IFooterProps, createTextGetter } from '../../index';
-import NavSection from './NavSection.astro';
-import '../../style.ts';
+import { processSocialLink } from '../utils/social.ts';
+import { SocialIcon, LanguageUtil, type IFooterProps, createTextGetter } from '../index';
+import FooterSection from './FooterSection.astro';
+import '../style.ts';
 
 const {
 	siteName,
@@ -259,12 +259,12 @@ const debugClasses = debug
 				debugClasses.section,
 			]}>
 			{/* 产品导航 */}
-			{products.length > 0 && <NavSection title={t('products')} links={products} />}
+			{products.length > 0 && <FooterSection title={t('products')} links={products} />}
 
 			{/* 关于导航 */}
 			{
 				(aboutLink || contactLink || teamLink || careersLink) && (
-					<NavSection
+					<FooterSection
 						title={t('about')}
 						links={[
 							{ name: t('aboutUs'), href: aboutLink },
@@ -285,7 +285,7 @@ const debugClasses = debug
 					faqLink ||
 					mediaLink ||
 					techStackLink) && (
-					<NavSection
+					<FooterSection
 						title={t('resources')}
 						links={[
 							{ name: t('news'), href: newsLink },
@@ -301,7 +301,7 @@ const debugClasses = debug
 			{/* 法律导航 */}
 			{
 				(termsLink || privacyLink) && (
-					<NavSection
+					<FooterSection
 						title={t('legal')}
 						links={[
 							{ name: t('terms'), href: termsLink },

package/dist/footer/FooterBasic.astro

@@ -0,0 +1,12 @@
+---
+import Footer from './Footer.astro';
+---
+
+<Footer
+	siteName="我的网站"
+	homeLink="/"
+	slogan="简单而强大"
+	company="我的公司"
+	copyright="保留所有权利"
+	inspirationalSlogan="构建美好的数字体验"
+/>

package/dist/footer/FooterSection.astro

@@ -0,0 +1,46 @@
+---
+/**
+ * @component FooterSection
+ *
+ * @description
+ * FooterSection 组件用于在页脚中显示一组链接，通常用于导航、产品列表等。
+ */
+
+interface Link {
+	name: string;
+	href?: string;
+}
+
+interface Props {
+	/**
+	 * 区块标题
+	 */
+	title: string;
+
+	/**
+	 * 链接列表
+	 */
+	links: Link[];
+}
+
+const { title, links } = Astro.props;
+---
+
+<nav class="cosy:flex cosy:flex-col cosy:gap-2">
+	<h6 class="cosy:footer-title">{title}</h6>
+	<ul class="cosy:flex cosy:flex-col cosy:gap-2">
+		{
+			links.map((link) => (
+				<li>
+					{link.href ? (
+						<a href={link.href} class="cosy:link cosy:link-hover">
+							{link.name}
+						</a>
+					) : (
+						<span class="cosy:opacity-50">{link.name}</span>
+					)}
+				</li>
+			))
+		}
+	</ul>
+</nav>

package/dist/footer/index.ts

@@ -0,0 +1,11 @@
+import Footer from './Footer.astro';
+import FooterBasic from './FooterBasic.astro';
+import BasicSourceCode from './FooterBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Footer, FooterBasic };
+
+// 导出示例源代码
+export const FooterExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Footer'),
+};

package/dist/{components/layouts → grid}/Grid.astro

@@ -52,7 +52,7 @@
  */
 
 // 导入样式
-import '../../style.ts';
+import '../style.ts';
 
 import type { HTMLAttributes } from 'astro/types';
 

package/dist/grid/GridBasic.astro

@@ -0,0 +1,9 @@
+---
+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/index.ts

@@ -0,0 +1,11 @@
+import Grid from './Grid.astro';
+import GridBasic from './GridBasic.astro';
+import BasicSourceCode from './GridBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Grid, GridBasic };
+
+// 导出示例源代码
+export const GridExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Grid'),
+};

package/dist/{components/layouts → header}/Header.astro

@@ -12,57 +12,18 @@
  * 2. 响应式适配 - 在移动端和桌面端都有合适的展现形式
  * 3. 可定制性 - 支持多种配置选项，适应不同网站的风格和需求
  * 4. 多语言支持 - 内置语言切换功能，便于构建国际化网站
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Header
- *   logo={import("../assets/logo.png")}
- *   logoHref="/"
- *   navItems={[
- *     { href: "/docs", label: "文档", match: (path) => path.startsWith("/docs") },
- *     { href: "/components", label: "组件", match: (path) => path.startsWith("/components") }
- *   ]}
- * />
- * ```
- *
- * 自定义导航菜单位置：
- * ```astro
- * <Header
- *   logo={import("../assets/logo.png")}
- *   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")}
- *   languages={["zh-cn", "en", "ja"]}
- * />
- * ```
- *
- * 自定义高度：
- * ```astro
- * <Header
- *   logo={import("../assets/logo.png")}
- *   height="lg"
- * />
  */
-import '../../style.ts';
-import Link from '../base/Link.astro';
-import Image from '../base/Image.astro';
-import NavItems from './NavItems.astro';
-import { LanguageSwitcher, LinkUtil, type IHeaderProps, type INavItem } from '../../index';
-import Logo from '../../assets/logo-rounded.png';
+import '../style.ts';
+import {
+	LanguageSwitcher,
+	LinkUtil,
+	type IHeaderProps,
+	type INavItem,
+	NavItems,
+	Link,
+	Image,
+} from '../index';
+import Logo from '../assets/logo-rounded.png';
 
 export interface Props extends IHeaderProps {
 	debug?: boolean;
@@ -207,15 +168,17 @@ const activeLink = LinkUtil.getActiveLink(
 					</Link>
 				)
 			}
+			<slot name="navbar-start" />
 		</div>
 
-		{
-			navPosition === 'center' && (
-				<div class="cosy:hidden cosy:lg:flex cosy:navbar-center">
+		<div class="cosy:hidden cosy:lg:flex cosy:navbar-center">
+			{
+				navPosition === 'center' && (
 					<NavItems navItems={navItems} activeLink={activeLink} linkHeightClass={linkHeightClass} />
-				</div>
-			)
-		}
+				)
+			}
+			<slot name="navbar-center" />
+		</div>
 
 		<div class="cosy:navbar-end cosy:pr-1">
 			{
@@ -230,6 +193,7 @@ const activeLink = LinkUtil.getActiveLink(
 				)
 			}
 			<LanguageSwitcher languages={languages} />
+			<slot name="navbar-end" />
 		</div>
 	</div>
 </header>

package/dist/header/HeaderBasic.astro

@@ -0,0 +1,14 @@
+---
+/**
+ * @component Header.Basic
+ *
+ * @description
+ * Header组件的基础示例，展示最基本的顶部导航栏，包含logo和语言切换功能。
+ */
+import Header from './Header.astro';
+import { getExampleImage } from '../utils/image';
+
+const logo = getExampleImage({ width: 100, height: 100, provider: 'picsum', tag: 'tech' });
+---
+
+<Header logoHref={logo} rounded="lg" sticky={false} />

package/dist/header/HeaderCustomNavbarCenter.astro

@@ -0,0 +1,23 @@
+---
+/**
+ * @component Header.CustomNavbarCenter
+ *
+ * @description
+ * 自定义导航栏中间内容的Header组件示例，展示如何使用slot自定义中间内容。
+ */
+import '../style.ts';
+import Header from './Header.astro';
+import { getExampleImage } from '../utils/image';
+
+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/header/HeaderCustomNavbarEnd.astro

@@ -0,0 +1,20 @@
+---
+/**
+ * @component Header.CustomNavbarEnd
+ *
+ * @description
+ * 自定义导航栏右侧内容的Header组件示例，展示如何使用slot自定义右侧内容。
+ */
+import '../style.ts';
+import Header from './Header.astro';
+import { getExampleImage } from '../utils/image';
+
+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/header/HeaderCustomNavbarStart.astro

@@ -0,0 +1,20 @@
+---
+/**
+ * @component Header.CustomNavbarStart
+ *
+ * @description
+ * 自定义导航栏左侧内容的Header组件示例，展示如何使用slot自定义左侧内容。
+ */
+import '../style.ts';
+import Header from './Header.astro';
+import { getExampleImage } from '../utils/image';
+
+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>