@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/sidebar/Sidebar.astro

@@ -1,174 +0,0 @@
----
-/**
- * Sidebar组件
- *
- * 用于文档页面的侧边栏导航
- *
- * @example
- * ```astro
- * ---
- * import Sidebar from './Sidebar.astro';
- *
- * const sidebarItems = [
- *   { title: "入门", items: [
- *     { href: "/docs/getting-started", text: "快速开始" },
- *     { href: "/docs/installation", text: "安装" }
- *   ]}
- * ];
- * ---
- *
- * <Sidebar sidebarItems={sidebarItems} />
- * ```
- */
-
-import '../style.ts';
-import { isPathMatch } from '../utils/path';
-import { MenuIcon, SidebarNav, Modal } from '../index';
-import type { ISidebarProps } from '../index';
-
-export interface Props extends ISidebarProps {}
-
-const {
-	sidebarItems,
-	class: className,
-	debug = false,
-	marginTop = 'md',
-	marginBottom = 'md',
-} = Astro.props;
-
-// 自动获取当前路径
-const currentPath = Astro.url.pathname;
-
-const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
-
-function getVerticalMarginTopClasses(marginTop: string) {
-	if (marginTop === 'none') return 'cosy:mt-0';
-	if (marginTop === 'xs') return 'cosy:mt-1';
-	if (marginTop === 'sm') return 'cosy:mt-2';
-	if (marginTop === 'md') return 'cosy:mt-4';
-	if (marginTop === 'lg') return 'cosy:mt-6';
-	if (marginTop === 'xl') return 'cosy:mt-8';
-	if (marginTop === '2xl') return 'cosy:mt-10';
-	if (marginTop === '3xl') return 'cosy:mt-12';
-	if (marginTop === '4xl') return 'cosy:mt-16';
-	if (marginTop === '5xl') return 'cosy:mt-20';
-	return '';
-}
-
-function getVerticalMarginBottomClasses(marginBottom: string) {
-	if (marginBottom === 'none') return 'cosy:mb-0';
-	if (marginBottom === 'xs') return 'cosy:mb-1';
-	if (marginBottom === 'sm') return 'cosy:mb-2';
-	if (marginBottom === 'md') return 'cosy:mb-4';
-	if (marginBottom === 'lg') return 'cosy:mb-6';
-	if (marginBottom === 'xl') return 'cosy:mb-8';
-	if (marginBottom === '2xl') return 'cosy:mb-10';
-	if (marginBottom === '3xl') return 'cosy:mb-12';
-	if (marginBottom === '4xl') return 'cosy:mb-16';
-	if (marginBottom === '5xl') return 'cosy:mb-20';
-	return '';
-}
-
-// 获取当前活动的一级导航项
-const currentSection = sidebarItems.find((section) =>
-	section.items?.some((item) => isPathMatch(currentPath, item.href))
-);
----
-
-{/* 移动端导航栏 */}
-<div
-	class:list={[
-		'cosy:flex cosy:lg:hidden cosy:items-center cosy:justify-between cosy:px-4 cosy:py-2 cosy:border-b cosy:border-base-300 cosy:bg-base-100 cosy:relative cosy:z-10',
-		debugClass,
-	]}>
-	<div class="cosy:flex cosy:items-center cosy:gap-2">
-		<button
-			type="button"
-			class="cosy:p-2 cosy:btn cosy:btn-ghost cosy:btn-sm"
-			data-modal-target="mobile-sidebar">
-			<MenuIcon class="cosy:w-5 cosy:h-5" />
-		</button>
-		<span class="cosy:font-medium cosy:text-sm">{currentSection?.text || '导航'}</span>
-	</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>
-
-{/* 桌面端侧边栏 */}
-<aside
-	data-sidebar
-	data-current-path={currentPath}
-	data-margin-top={marginTop}
-	data-margin-bottom={marginBottom}
-	class:list={[
-		className,
-		debugClass,
-		'cosy:hidden cosy:lg:block',
-		getVerticalMarginTopClasses(marginTop),
-		getVerticalMarginBottomClasses(marginBottom),
-	]}>
-	<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>
-
-<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/sidebar/SidebarBasic.astro

@@ -1 +0,0 @@
- 

package/dist/sidebar-nav/SidebarNav.astro

@@ -1,117 +0,0 @@
----
-/**
- * SidebarNav组件
- *
- * 用于渲染侧边栏的导航内容
- */
-
-import { isPathMatch } from '../utils/path';
-import '../style.ts';
-import type { ISidebarItem } from '../types/sidebar';
-
-interface Props {
-	/**
-	 * 侧边栏项目
-	 */
-	sidebarItems: ISidebarItem[];
-
-	/**
-	 * 当前路径
-	 */
-	currentPath: string;
-
-	/**
-	 * 是否开启调试模式，显示边框
-	 * @default false
-	 */
-	debug?: boolean;
-
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
-}
-
-const { sidebarItems, currentPath, debug = false, class: className } = Astro.props;
-
-const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
----
-
-<nav
-	data-sidebar-nav
-	data-current-path={currentPath}
-	class:list={['cosy:p-4', debugClass, className]}>
-	{
-		sidebarItems.map((section: ISidebarItem) => (
-			<div class:list={['cosy:mb-6', debugClass]}>
-				<h3 class:list={['cosy:font-bold cosy:mb-2 cosy:text-base-content/70', debugClass]}>
-					{section.text}
-				</h3>
-				<ul class:list={['cosy:menu cosy:bg-base-200 cosy:rounded-box cosy:w-56', debugClass]}>
-					{section.items?.map((item: ISidebarItem) => {
-						const isActive = isPathMatch(currentPath, item.href);
-						return (
-							<li class:list={[debugClass]}>
-								<a
-									data-sidebar-item
-									data-current-path={currentPath}
-									href={item.href}
-									class:list={[
-										'cosy:hover:bg-base-300',
-										{ 'cosy:menu-active': isActive },
-										debugClass,
-									]}>
-									{item.text}
-								</a>
-								{item.items && (
-									<ul class:list={[debugClass]}>
-										{item.items.map((subitem: ISidebarItem) => {
-											const isSubActive = isPathMatch(currentPath, subitem.href);
-											return (
-												<li class:list={[debugClass]}>
-													<a
-														data-sidebar-item
-														data-current-path={currentPath}
-														href={subitem.href}
-														class:list={[
-															'cosy:hover:bg-base-300',
-															{ 'cosy:menu-active': isSubActive },
-															debugClass,
-														]}>
-														{subitem.text}
-													</a>
-													{subitem.items && (
-														<ul class:list={[debugClass]}>
-															{subitem.items.map((subsubitem: ISidebarItem) => {
-																const isSubSubActive = isPathMatch(currentPath, subsubitem.href);
-																return (
-																	<li class:list={[debugClass]}>
-																		<a
-																			data-sidebar-item
-																			data-current-path={currentPath}
-																			href={subsubitem.href}
-																			class:list={[
-																				'cosy:hover:bg-base-300',
-																				{ 'cosy:active': isSubSubActive },
-																				debugClass,
-																			]}>
-																			{subsubitem.text}
-																		</a>
-																	</li>
-																);
-															})}
-														</ul>
-													)}
-												</li>
-											);
-										})}
-									</ul>
-								)}
-							</li>
-						);
-					})}
-				</ul>
-			</div>
-		))
-	}
-</nav>

package/dist/sidebar-nav/SidebarNavBasic.astro

@@ -1,32 +0,0 @@
----
-import SidebarNav from './SidebarNav.astro';
-import type { ISidebarItem } from '../types/sidebar';
-
-const sidebarItems: ISidebarItem[] = [
-	{
-		text: '入门指南',
-		href: '/docs/getting-started',
-		items: [
-			{ href: '/docs/getting-started/installation', text: '安装' },
-			{ href: '/docs/getting-started/quick-start', text: '快速开始' },
-		],
-	},
-	{
-		text: '基础组件',
-		href: '/docs/components',
-		items: [
-			{ href: '/docs/components/button', text: 'Button 按钮' },
-			{ href: '/docs/components/alert', text: 'Alert 提示' },
-			{ href: '/docs/components/card', text: 'Card 卡片' },
-		],
-	},
-];
----
-
-<div class="cosy:w-64 cosy:bg-base-100">
-	<SidebarNav
-		sidebarItems={sidebarItems}
-		currentPath="/docs/getting-started/installation"
-		debug={false}
-	/>
-</div>

package/dist/speak/Speak.astro

@@ -1,65 +0,0 @@
----
-/**
- * @component Speak
- *
- * @description
- * Speak 组件用于展示人物语录或评价，包含说话者的头像、姓名、头衔和言论。
- * 适用于用户评价、团队介绍等场景。
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Speak
- *   speakerName="张三"
- *   speakerTitle="产品经理"
- *   image={avatar}
- *   words="这是一个非常棒的产品！"
- * />
- * ```
- */
-
-import { Image } from 'astro:assets';
-import type { ImageMetadata } from 'astro';
-import '../style.ts';
-
-interface Props {
-	/**
-	 * 说话者姓名
-	 */
-	speakerName: string;
-	/**
-	 * 说话者头衔
-	 */
-	speakerTitle: string;
-	/**
-	 * 说话者头像
-	 */
-	image: ImageMetadata;
-	/**
-	 * 说话内容
-	 */
-	words: string;
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
-}
-
-const { speakerName, speakerTitle, image, words, class: className = '' } = Astro.props;
----
-
-<div
-	class={`cosy:flex cosy:flex-col cosy:items-center cosy:gap-4 cosy:p-6 cosy:bg-base-100 cosy:rounded-lg cosy:shadow-lg ${className}`}>
-	<Image
-		src={image}
-		alt={speakerName}
-		class="cosy:w-32 cosy:h-32 cosy:rounded-full cosy:object-cover"
-		width={128}
-		height={128}
-	/>
-	<div class="cosy:text-center">
-		<h3 class="cosy:text-xl cosy:font-semibold cosy:text-base-content">{speakerName}</h3>
-		<p class="cosy:text-base-content/70">{speakerTitle}</p>
-	</div>
-	<p class="cosy:text-base-content/80 cosy:italic cosy:text-center">{words}</p>
-</div>

package/dist/speak/SpeakBasic.astro

@@ -1,13 +0,0 @@
----
-import { Speak } from '../index';
-import avatar from '../assets/logo-rounded.png';
----
-
-<div class="cosy:max-w-md">
-	<Speak
-		speakerName="张三"
-		speakerTitle="产品经理"
-		image={avatar}
-		words="这个组件库的设计非常优雅，使用起来非常方便，完全满足了我们的需求！"
-	/>
-</div>

package/dist/speak/SpeakGrid.astro

@@ -1,29 +0,0 @@
----
-import { Speak } from '../index';
-import avatar1 from '../assets/logo-rounded.png';
-import avatar2 from '../assets/logo-rounded.png';
-import avatar3 from '../assets/logo-rounded.png';
----
-
-<div class="cosy:grid cosy:grid-cols-1 md:cosy:grid-cols-2 lg:cosy:grid-cols-3 cosy:gap-6">
-	<Speak
-		speakerName="李四"
-		speakerTitle="前端开发"
-		image={avatar1}
-		words="组件的代码结构非常清晰，文档详尽，对开发者非常友好。"
-	/>
-
-	<Speak
-		speakerName="王五"
-		speakerTitle="UI 设计师"
-		image={avatar2}
-		words="设计系统的一致性很好，主题切换功能也很实用。"
-	/>
-
-	<Speak
-		speakerName="赵六"
-		speakerTitle="技术总监"
-		image={avatar3}
-		words="这个组件库的性能和可维护性都很出色，是一个值得信赖的选择。"
-	/>
-</div>

package/dist/stack/StackBasic.astro

@@ -1,15 +0,0 @@
----
-import Stack from './Stack.astro';
----
-
-<Stack gap="md" align="center">
-	<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>
-</Stack>

package/dist/team-member/TeamMember.astro

@@ -1,135 +0,0 @@
----
-/**
- * @component TeamMember
- *
- * @description
- * TeamMember 组件用于展示单个团队成员的信息，包括姓名、职位、头像、简介和社交媒体链接。
- * 组件采用卡片式设计，支持悬停效果，并可以链接到成员的社交媒体账号。
- *
- * @design
- * 设计理念：
- * 1. 个人展示 - 突出展示团队成员的个人信息和形象
- * 2. 社交连接 - 提供社交媒体链接，方便与团队成员建立联系
- * 3. 视觉一致性 - 使用卡片组件确保与整体设计风格一致
- * 4. 交互反馈 - 悬停时提供视觉反馈，增强用户体验
- *
- * @usage
- * 基本用法：
- * ```astro
- * <TeamMember
- *   name="张三"
- *   role="前端开发工程师"
- *   avatar="/images/avatars/zhangsan.jpg"
- *   bio="拥有5年前端开发经验，专注于React和Vue生态系统。"
- * />
- * ```
- *
- * 包含社交媒体链接：
- * ```astro
- * <TeamMember
- *   name="李四"
- *   role="UI设计师"
- *   avatar="/images/avatars/lisi.jpg"
- *   bio="专注于用户体验和界面设计，热爱创造直观易用的产品。"
- *   socialLinks={[
- *     { platform: 'github', url: 'https://github.com/lisi' },
- *     { platform: 'twitter', url: 'https://twitter.com/lisi' },
- *     { platform: 'linkedin', url: 'https://linkedin.com/in/lisi' }
- *   ]}
- * />
- * ```
- */
-
-import '../style.ts';
-import { SocialIcon, Image, Link } from '../index';
-import type { ImageSource } from '../types/image';
-
-interface SocialLink {
-	/**
-	 * 社交媒体平台
-	 */
-	platform: 'github' | 'twitter' | 'linkedin' | 'website' | 'email';
-	/**
-	 * 社交媒体链接URL
-	 */
-	url: string;
-}
-
-// 自定义图片元数据接口，替代 astro 的 ImageMetadata
-interface CustomImageMetadata {
-	src: string;
-	width: number;
-	height: number;
-	format: string;
-}
-
-export interface Props {
-	/**
-	 * 团队成员姓名
-	 */
-	name: string;
-	/**
-	 * 团队成员职位
-	 */
-	role: string;
-	/**
-	 * 团队成员头像
-	 */
-	avatar: ImageSource;
-	/**
-	 * 团队成员简介
-	 */
-	bio: string;
-	/**
-	 * 社交媒体链接
-	 */
-	socialLinks?: SocialLink[];
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
-}
-
-const { name, role, avatar, bio, socialLinks, class: className = '' } = Astro.props;
----
-
-<div
-	class:list={[
-		'cosy:card cosy:bg-base-100 cosy:shadow-md cosy:hover:shadow-lg cosy:transition-shadow cosy:duration-300',
-		className,
-	]}>
-	<figure class="cosy:flex cosy:justify-center cosy:p-4">
-		<Image
-			src={avatar}
-			alt={`${name}'s avatar`}
-			width={192}
-			height={192}
-			rounded="xl"
-			transition="fade"
-			hover="brightness"
-			class="cosy:object-cover cosy:aspect-square"
-		/>
-	</figure>
-	<div class="cosy:px-6 cosy:py-4 cosy:card-body cosy:flex cosy:flex-col cosy:items-center">
-		<h2 class="cosy:mb-1 cosy:font-semibold cosy:text-xl cosy:card-title">{name}</h2>
-		<p class="cosy:mb-3 cosy:text-sm cosy:text-base-content/70">{role}</p>
-		<p class="cosy:mb-4 cosy:text-base">{bio}</p>
-
-		{
-			socialLinks && socialLinks.length > 0 && (
-				<div class="cosy:flex cosy:gap-3 cosy:mt-auto">
-					{socialLinks.map((link: SocialLink) => (
-						<Link
-							href={link.url}
-							external
-							variant="ghost"
-							class="cosy:hover:bg-base-200 cosy:p-2 cosy:rounded-full"
-							aria-label={`Visit ${name}'s ${link.platform} profile`}>
-							<SocialIcon platform={link.platform} class="cosy:w-5 cosy:h-5" />
-						</Link>
-					))}
-				</div>
-			)
-		}
-	</div>
-</div>

package/dist/team-member/TeamMemberBasic.astro

@@ -1,25 +0,0 @@
----
-/**
- * @component TeamMember.Basic
- *
- * @description
- * 基础的团队成员展示组件示例，展示最简单的成员信息展示方式。
- */
-import '../style.ts';
-import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../utils/image';
-
-const avatar = getExampleImage({
-	width: 200,
-	height: 200,
-	provider: 'robohash',
-	randomSeed: 'member1',
-});
----
-
-<TeamMember
-	name="张三"
-	role="产品设计师"
-	avatar={avatar}
-	bio="专注于用户体验设计，拥有5年产品设计经验"
-/>

package/dist/team-member/TeamMemberCustomStyle.astro

@@ -1,26 +0,0 @@
----
-/**
- * @component TeamMember.CustomStyle
- *
- * @description
- * 自定义样式的团队成员展示组件示例，展示如何使用class属性自定义样式。
- */
-import '../style.ts';
-import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../utils/image';
-
-const avatar = getExampleImage({
-	width: 200,
-	height: 200,
-	provider: 'robohash',
-	randomSeed: 'member3',
-});
----
-
-<TeamMember
-	name="王五"
-	role="市场总监"
-	avatar={avatar}
-	bio="负责产品市场策略和品牌推广，拥有丰富的市场营销经验"
-	class="cosy:bg-gradient-to-r cosy:from-purple-100 cosy:to-pink-100 cosy:shadow-lg cosy:w-72"
-/>

package/dist/team-member/TeamMemberGroup.astro

@@ -1,60 +0,0 @@
----
-/**
- * @component TeamMember.Group
- *
- * @description
- * 团队成员组展示组件示例，展示如何组合多个团队成员。
- */
-import '../style.ts';
-import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../utils/image';
-
-const members = [
-	{
-		name: '张三',
-		title: '产品设计师',
-		avatar: getExampleImage({
-			width: 200,
-			height: 200,
-			provider: 'robohash',
-			randomSeed: 'member1',
-		}),
-		description: '专注于用户体验设计，拥有5年产品设计经验',
-	},
-	{
-		name: '李四',
-		title: '高级开发工程师',
-		avatar: getExampleImage({
-			width: 200,
-			height: 200,
-			provider: 'robohash',
-			randomSeed: 'member2',
-		}),
-		description: '全栈开发专家，热爱开源项目，专注于前端框架和性能优化',
-	},
-	{
-		name: '王五',
-		title: '市场总监',
-		avatar: getExampleImage({
-			width: 200,
-			height: 200,
-			provider: 'robohash',
-			randomSeed: 'member3',
-		}),
-		description: '负责产品市场策略和品牌推广，拥有丰富的市场营销经验',
-	},
-];
----
-
-<div class="cosy:grid cosy:grid-cols-3 md:cosy:grid-cols-3 cosy:gap-8">
-	{
-		members.map((member) => (
-			<TeamMember
-				name={member.name}
-				role={member.title}
-				avatar={member.avatar}
-				bio={member.description}
-			/>
-		))
-	}
-</div>