@coffic/cosy-ui 0.6.26 → 0.6.30

package/dist/header/HeaderCustomPosition.astro

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

package/dist/header/HeaderWithNavigation.astro

@@ -0,0 +1,22 @@
+---
+/**
+ * @component Header.WithNavigation
+ *
+ * @description
+ * 带导航菜单的Header组件示例，展示如何添加导航菜单项。
+ */
+import '../style.ts';
+import Header from './Header.astro';
+import { getExampleImage } from '../utils/image';
+
+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} />

package/dist/header/index.ts

@@ -0,0 +1,26 @@
+import Header from './Header.astro';
+import HeaderBasic from './HeaderBasic.astro';
+import HeaderWithNavigation from './HeaderWithNavigation.astro';
+import HeaderCustomPosition from './HeaderCustomPosition.astro';
+import HeaderCustomNavbarEnd from './HeaderCustomNavbarEnd.astro';
+import HeaderCustomNavbarStart from './HeaderCustomNavbarStart.astro';
+import HeaderCustomNavbarCenter from './HeaderCustomNavbarCenter.astro';
+import BasicSourceCode from './HeaderBasic.astro?raw';
+import WithNavigationSourceCode from './HeaderWithNavigation.astro?raw';
+import CustomPositionSourceCode from './HeaderCustomPosition.astro?raw';
+import CustomNavbarEndSourceCode from './HeaderCustomNavbarEnd.astro?raw';
+import CustomNavbarStartSourceCode from './HeaderCustomNavbarStart.astro?raw';
+import CustomNavbarCenterSourceCode from './HeaderCustomNavbarCenter.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Header, HeaderBasic, HeaderWithNavigation, HeaderCustomPosition, HeaderCustomNavbarEnd, HeaderCustomNavbarStart, HeaderCustomNavbarCenter };
+
+// 导出示例源代码
+export const HeaderExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Header'),
+	WithNavigation: extractSimpleExample(WithNavigationSourceCode, 'Header'),
+	CustomPosition: extractSimpleExample(CustomPositionSourceCode, 'Header'),
+	CustomNavbarEnd: extractSimpleExample(CustomNavbarEndSourceCode, 'Header'),
+	CustomNavbarStart: extractSimpleExample(CustomNavbarStartSourceCode, 'Header'),
+	CustomNavbarCenter: extractSimpleExample(CustomNavbarCenterSourceCode, 'Header'),
+};

package/dist/{components/typography → heading}/Heading.astro

@@ -63,8 +63,8 @@
  * - LinkIcon (用于锚点链接)
  */
 
-import { LinkIcon } from '../../index';
-import '../../style.ts';
+import { LinkIcon } from '../index';
+import '../style.ts';
 
 interface Props {
 	level?: 1 | 2 | 3 | 4 | 5 | 6;

package/dist/heading/HeadingBasic.astro

@@ -0,0 +1,10 @@
+---
+import Heading from './Heading.astro';
+---
+
+<Heading level={1}>一级标题</Heading>
+<Heading level={2} underline color="primary">带下划线的二级标题</Heading>
+<Heading level={3} color="secondary">三级标题</Heading>
+<Heading level={4} align="center">居中的四级标题</Heading>
+<Heading level={5} color="muted">五级标题</Heading>
+<Heading level={6} anchor id="section-6">带锚点的六级标题</Heading>

package/dist/heading/index.ts

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

package/dist/{components/base → image}/Image.astro

@@ -41,8 +41,9 @@
  * ```
  */
 
-import '../../style.ts';
-import { AlertTriangle } from '../../index';
+import '../style.ts';
+import { AlertTriangle } from '../index';
+import type { ImageSource } from '../types/image.ts';
 
 // 自定义图片元数据接口
 interface ImageMetadata {
@@ -56,7 +57,7 @@ interface Props {
 	/**
 	 * 图片源，可以是本地图片或远程URL
 	 */
-	src: ImageMetadata | string;
+	src: ImageSource;
 	/**
 	 * 图片的替代文本
 	 */
@@ -123,7 +124,6 @@ interface Props {
 	 * @default "none"
 	 */
 	transition?: 'none' | 'fade' | 'slide' | 'zoom';
-
 	/**
 	 * 加载指示器类型
 	 * @default "skeleton"
@@ -132,7 +132,7 @@ interface Props {
 }
 
 const {
-	src,
+	src: imageSource,
 	alt,
 	width,
 	height,
@@ -150,9 +150,11 @@ const {
 } = Astro.props;
 
 // 判断是否为远程图片
-const isRemoteImage = typeof src === 'string' && (src.startsWith('http') || src.startsWith('//'));
+const isRemoteImage =
+	typeof imageSource === 'string' &&
+	(imageSource.startsWith('http') || imageSource.startsWith('//'));
 // 获取图片源
-const imgSrc = typeof src === 'string' ? src : src.src;
+const imgSrc = typeof imageSource === 'string' ? imageSource : imageSource.src;
 
 // 对象映射定义所有可能的类名
 const objectFitClasses = {

package/dist/image/ImageBasic.astro

@@ -0,0 +1 @@
+ 

package/dist/image/ImageEffects.astro

@@ -0,0 +1,32 @@
+import Image from './Image.astro';
+
+<div class="cosy:grid cosy:grid-cols-3 cosy:gap-4">
+	<Image
+		src="/placeholder-2.jpg"
+		alt="圆角效果"
+		width={200}
+		height={200}
+		rounded="lg"
+		shadow="md"
+	/>
+
+	<Image
+		src="/placeholder-3.jpg"
+		alt="悬停效果"
+		width={200}
+		height={200}
+		hover="scale"
+		transition="zoom"
+	/>
+
+	<Image
+		src="/placeholder-4.jpg"
+		alt="组合效果"
+		width={200}
+		height={200}
+		rounded="full"
+		shadow="xl"
+		hover="brightness"
+		transition="fade"
+	/>
+</div>

package/dist/image/ImageLoading.astro

@@ -0,0 +1,35 @@
+import Image from './Image.astro';
+
+<div class="cosy:grid cosy:grid-cols-2 cosy:gap-4">
+	<Image
+		src="https://picsum.photos/400/300"
+		alt="骨架屏加载"
+		width={400}
+		height={300}
+		loadingIndicator="skeleton"
+	/>
+
+	<Image
+		src="https://picsum.photos/400/300"
+		alt="进度条加载"
+		width={400}
+		height={300}
+		loadingIndicator="progress"
+	/>
+
+	<Image
+		src="https://picsum.photos/400/300"
+		alt="加载动画"
+		width={400}
+		height={300}
+		loadingIndicator="spinner"
+	/>
+
+	<Image
+		src="https://invalid-image-url.jpg"
+		alt="加载错误示例"
+		width={400}
+		height={300}
+		showError={true}
+	/>
+</div>

package/dist/image/index.ts

@@ -0,0 +1,17 @@
+import Image from './Image.astro';
+import ImageBasic from './ImageBasic.astro';
+import ImageEffects from './ImageEffects.astro';
+import ImageLoading from './ImageLoading.astro';
+import BasicSourceCode from './ImageBasic.astro?raw';
+import EffectsSourceCode from './ImageEffects.astro?raw';
+import LoadingSourceCode from './ImageLoading.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Image, ImageBasic, ImageEffects, ImageLoading };
+
+// 导出示例源代码
+export const ImageExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Image'),
+	Effects: extractSimpleExample(EffectsSourceCode, 'Image'),
+	Loading: extractSimpleExample(LoadingSourceCode, 'Image'),
+};

package/dist/index.ts

@@ -1,96 +1,3 @@
-// Base
-export { default as Button } from './components/base/Button.astro';
-export { default as Link } from './components/base/Link.astro';
-export { default as Image } from './components/base/Image.astro';
-export { default as ThemeItem } from './components/base/ThemeItem.astro';
-export { default as Alert } from './components/base/Alert.astro';
-export { default as Speak } from './components/base/Speak.astro';
-export { default as Module } from './components/base/Module.astro';
-
-// Navigation
-export { default as ThemeSwitcher } from './components/navigation/ThemeSwitcher.astro';
-export { default as TableOfContents } from './components/navigation/TableOfContents.astro';
-export { default as LanguageSwitcher } from './components/navigation/LanguageSwitcher.astro';
-
-// Display
-export { default as CodeBlock } from './components/display/CodeBlock.astro';
-export { default as Modal } from './components/display/Modal.astro';
-export { default as Hero } from './components/display/Hero.astro';
-export { default as Banner } from './components/display/Banner.astro';
-export { default as Card } from './components/display/Card.astro';
-export { default as CodeExample } from './components/display/CodeExample.astro';
-
-// Data Display
-export { default as TeamMembers } from './components/data-display/TeamMembers.astro';
-export { default as TeamMember } from './components/data-display/TeamMember.astro';
-export { default as ProductCard } from './components/data-display/ProductCard.astro';
-export { default as Products } from './components/data-display/Products.astro';
-export { default as Blog } from './components/data-display/Blog.astro';
-
-// Layouts
-export { default as Footer } from './components/layouts/Footer.astro';
-export { default as Header } from './components/layouts/Header.astro';
-export { default as AppLayout } from './components/layouts/AppLayout.astro';
-export { default as Stack } from './components/layouts/Stack.astro';
-export { default as Grid } from './components/layouts/Grid.astro';
-export { default as BaseLayout } from './components/layouts/BaseLayout.astro';
-export { default as DashboardLayout } from './components/layouts/DashboardLayout.astro';
-export { default as Flex } from './components/layouts/Flex.astro';
-
-// Typography
-export { default as Article } from './components/typography/Article.astro';
-export { default as Text } from './components/typography/Text.astro';
-export { default as Heading } from './components/typography/Heading.astro';
-
-// Errors Page
-export { default as ErrorPage404 } from './components/errors/404.astro';
-
-// Icons
+export * from './index_astro';
+export * from './index_utils';
 export * from './index_icons';
-
-// Containers
-export { default as Container } from './components/containers/Container.astro';
-export { default as Main } from './components/containers/Main.astro';
-export { default as Section } from './components/containers/Section.astro';
-
-// Utils
-export * from './utils/image';
-export * from './utils/i18n';
-export * from './utils/path';
-export * from './utils/url';
-export * from './utils/language';
-export * from './utils/lang_package';
-export * from './utils/logger';
-export * from './utils/link';
-
-// Types
-export * from './types/sidebar';
-export * from './types/main';
-export * from './types/article';
-export * from './types/layout';
-export * from './types/header';
-export * from './types/heading';
-export * from './types/meta';
-export * from './types/nav';
-export * from './types/product';
-export * from './types/footer';
-export * from './types/static-path';
-export type { ImageProvider, ImageOptions } from './utils/image';
-
-// Entities
-export * from './entities/BaseDoc';
-export * from './entities/BlogDoc';
-export * from './entities/CourseDoc';
-export * from './entities/ExperimentDoc';
-export * from './entities/LessonDoc';
-export * from './entities/MetaDoc';
-export * from './entities/SidebarItem';
-export * from './entities/Tag';
-
-// Database
-export * from './database/BaseDB';
-export * from './database/BlogDB';
-export * from './database/CourseDB';
-export * from './database/ExperimentDB';
-export * from './database/LessonDB';
-export * from './database/MetaDB';

package/dist/index_astro.ts

@@ -0,0 +1,78 @@
+export * from './button';
+export * from './article';
+export * from './link';
+export * from './image';
+export * from './theme-item';
+export * from './alert';
+export * from './footer';
+export * from './layout-app';
+export * from './layout-basic';
+export * from './speak';
+export * from './module';
+export * from './nav-item';
+export * from './language-switcher';
+export * from './toc';
+export * from './sidebar';
+export * from './sidebar-nav';
+export * from './theme-switcher';
+export * from './header';
+export * from './errors';
+export * from './flex';
+export * from './grid';
+export * from './heading';
+export * from './stack';
+export * from './text';
+export * from './nav-section';
+export { default as CodeBlock } from './components/display/CodeBlock.astro';
+export { default as Modal } from './components/display/Modal.astro';
+export { default as Hero } from './components/display/Hero.astro';
+export { default as Banner } from './components/display/Banner.astro';
+export { default as Card } from './components/display/Card.astro';
+export { default as CodeExample } from './components/display/CodeExample.astro';
+export { default as TeamMembers } from './components/data-display/TeamMembers.astro';
+export { default as TeamMember } from './components/data-display/TeamMember.astro';
+export { default as ProductCard } from './components/data-display/ProductCard.astro';
+export { default as Products } from './components/data-display/Products.astro';
+export { default as Blog } from './components/data-display/Blog.astro';
+export * from './layout-basic/BaseLayout.astro';
+export { default as DashboardLayout } from './layout-dashboard/DashboardLayout.astro';
+
+// Icons
+export * from './index_icons';
+
+// Containers
+export { default as Container } from './components/containers/Container.astro';
+export { default as Main } from './components/containers/Main.astro';
+export { default as Section } from './components/containers/Section.astro';
+
+// Types
+export * from './types/sidebar';
+export * from './types/main';
+export * from './types/article';
+export * from './types/layout';
+export * from './types/header';
+export * from './types/heading';
+export * from './types/meta';
+export * from './types/nav';
+export * from './types/product';
+export * from './types/footer';
+export * from './types/static-path';
+export type { ImageProvider, ImageOptions } from './utils/image';
+
+// Entities
+export * from './entities/BaseDoc';
+export * from './entities/BlogDoc';
+export * from './entities/CourseDoc';
+export * from './entities/ExperimentDoc';
+export * from './entities/LessonDoc';
+export * from './entities/MetaDoc';
+export * from './entities/SidebarItem';
+export * from './entities/Tag';
+
+// Database
+export * from './database/BaseDB';
+export * from './database/BlogDB';
+export * from './database/CourseDB';
+export * from './database/ExperimentDB';
+export * from './database/LessonDB';
+export * from './database/MetaDB';

package/dist/index_utils.ts

@@ -0,0 +1,8 @@
+export * from './utils/image';
+export * from './utils/i18n';
+export * from './utils/path';
+export * from './utils/url';
+export * from './utils/language';
+export * from './utils/lang_package';
+export * from './utils/logger';
+export * from './utils/link';

package/dist/{components/navigation → language-switcher}/LanguageSwitcher.astro

@@ -27,9 +27,9 @@
  * ```
  */
 
-import { ChevronDownIcon } from '../../index';
-import '../../style.ts';
-import { LanguageUtil } from '../../utils/language';
+import { ChevronDownIcon } from '../index';
+import '../style.ts';
+import { LanguageUtil } from '../utils/language.ts';
 
 interface Props {
 	languages: string[];

package/dist/language-switcher/LanguageSwitcherBasic.astro

@@ -0,0 +1,7 @@
+---
+import LanguageSwitcher from './LanguageSwitcher.astro';
+---
+
+<div class="cosy:flex cosy:justify-center">
+	<LanguageSwitcher languages={['zh-cn', 'en']} />
+</div>

package/dist/language-switcher/index.ts

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

package/dist/{components/layouts → layout-app}/AppLayout.astro

@@ -165,10 +165,16 @@
  * ```
  */
 
-import '../../style.ts';
-import { BaseLayout, type IAppLayoutProps, Footer, Header, Container } from '../../index';
-import Main from '../containers/Main.astro';
-import Sidebar from './Sidebar.astro';
+import '../style.ts';
+import {
+	BaseLayout,
+	type IAppLayoutProps,
+	Footer,
+	Header,
+	Container,
+	Main,
+	Sidebar,
+} from '../index';
 import { ClientRouter } from 'astro:transitions';
 
 interface Props extends IAppLayoutProps {}
@@ -199,7 +205,21 @@ const {
 	debug={debug}
 	{...rest}>
 	<ClientRouter />
-	{showHeader && <Header {...headerConfig} debug={debug} transition:persist />}
+	{
+		showHeader && (
+			<Header {...headerConfig} debug={debug} transition:persist>
+				<div slot="navbar-start">
+					<slot name="navbar-start" />
+				</div>
+				<div slot="navbar-center">
+					<slot name="navbar-center" />
+				</div>
+				<div slot="navbar-end">
+					<slot name="navbar-end" />
+				</div>
+			</Header>
+		)
+	}
 
 	<Container flex="row" gap="md" size="full" padding="none">
 		<!-- 侧边栏容器 -->

package/dist/layout-app/AppLayoutBasic.astro

@@ -0,0 +1,53 @@
+---
+import AppLayout from './AppLayout.astro';
+import type { ISidebarItem } from '../types/sidebar';
+
+const sidebarItems: ISidebarItem[] = [
+	{
+		text: '入门',
+		href: '/docs/getting-started',
+		items: [
+			{ href: '/docs/getting-started', text: '快速开始' },
+			{ href: '/docs/installation', text: '安装' },
+		],
+	},
+	{
+		text: '组件',
+		href: '/docs/components',
+		items: [
+			{ href: '/docs/components/button', text: 'Button 按钮' },
+			{ href: '/docs/components/card', text: 'Card 卡片' },
+		],
+	},
+];
+---
+
+<AppLayout
+	metaConfig={{
+		title: '应用布局示例',
+		description: '这是一个应用布局的示例页面',
+		keywords: '布局,示例,应用布局',
+		author: 'CofficLab',
+		robots: 'noindex,nofollow',
+	}}
+	sidebarConfig={{
+		sidebarItems: sidebarItems,
+	}}
+	headerConfig={{
+		height: 'md',
+	}}
+	footerConfig={{
+		siteName: '我的文档站点',
+		homeLink: '/',
+		slogan: '简单而强大的组件库',
+		company: 'CofficLab',
+		copyright: '保留所有权利',
+		inspirationalSlogan: '让开发更加愉悦',
+	}}
+	mainContentConfig={{
+		padding: 'md',
+	}}>
+	<h1 class="cosy:text-2xl cosy:font-bold cosy:mb-4">欢迎使用应用布局</h1>
+	<p class="cosy:mb-2">这是一个包含侧边栏、头部和页脚的完整布局示例。</p>
+	<p>应用布局适合用于文档站点、管理后台等场景。</p>
+</AppLayout>

package/dist/layout-app/index.ts

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

package/dist/{components/layouts → layout-basic}/BaseLayout.astro

@@ -49,8 +49,8 @@
  * ```
  */
 
-import '../../style.ts';
-import { LinkUtil, type IMetaProps } from '../../index';
+import '../style.ts';
+import { LinkUtil, type IMetaProps } from '../index';
 
 export interface Props extends IMetaProps {
 	debug?: boolean;

package/dist/layout-basic/BaseLayoutBasic.astro

@@ -0,0 +1,16 @@
+---
+import BaseLayout from './BaseLayout.astro';
+---
+
+<BaseLayout
+	title="基本布局示例"
+	description="这是一个基本布局的示例页面"
+	keywords="布局,示例,基本布局"
+	author="CofficLab"
+	robots="noindex,nofollow">
+	<main class="cosy:p-4">
+		<h1 class="cosy:text-2xl cosy:font-bold cosy:mb-4">欢迎使用基本布局</h1>
+		<p class="cosy:mb-2">这是一个简单的页面内容示例。</p>
+		<p>基本布局提供了完整的 HTML 结构和元数据设置。</p>
+	</main>
+</BaseLayout>

package/dist/layout-basic/index.ts

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

package/dist/{components/layouts → layout-dashboard}/DashboardLayout.astro

@@ -36,8 +36,8 @@
  * ```
  */
 
-import BaseLayout from './BaseLayout.astro';
-import '../../style.ts';
+import { BaseLayout } from '../index';
+import '../style.ts';
 
 export interface NavItem {
 	href: string;