@coffic/cosy-ui 0.7.4 → 0.8.7

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/index.ts

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

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/sidebar-nav/index.ts

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

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/speak/index.ts

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

package/dist/stack/Stack.astro

@@ -1,151 +0,0 @@
----
-/**
- * @component Stack
- *
- * @description
- * Stack 组件是一个垂直堆叠布局组件，用于垂直排列元素并控制它们之间的间距。
- * 它提供了灵活的间距控制、对齐方式和分隔线选项，使垂直布局更加简单。
- *
- * @design
- * 设计理念：
- * 1. 简化布局 - 提供简单直观的方式创建垂直堆叠布局
- * 2. 一致性 - 通过预设的间距选项确保布局一致性
- * 3. 灵活性 - 支持多种对齐方式和分隔线选项
- * 4. 可组合性 - 可以与其他布局组件组合使用
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Stack>
- *   <div>第一个元素</div>
- *   <div>第二个元素</div>
- *   <div>第三个元素</div>
- * </Stack>
- * ```
- *
- * 自定义间距：
- * ```astro
- * <Stack gap="lg">
- *   <div>大间距</div>
- *   <div>垂直排列</div>
- * </Stack>
- * ```
- *
- * 带分隔线：
- * ```astro
- * <Stack dividers={true} dividerColor="primary">
- *   <div>带分隔线的堆叠</div>
- *   <div>使用主题色</div>
- * </Stack>
- * ```
- *
- * 自定义对齐：
- * ```astro
- * <Stack align="center">
- *   <div>居中对齐</div>
- *   <div>的元素</div>
- * </Stack>
- * ```
- */
-
-// 导入样式
-import '../style.ts';
-
-// 定义间距类型
-type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-// 定义对齐方式类型
-type AlignType = 'start' | 'center' | 'end' | 'stretch';
-
-// 定义分隔线颜色类型
-type DividerColor = 'gray' | 'light' | 'dark' | 'primary';
-
-interface Props {
-	/**
-	 * 元素间距
-	 * @default "md"
-	 */
-	gap?: GapSize;
-
-	/**
-	 * 是否显示分隔线
-	 * @default false
-	 */
-	dividers?: boolean;
-
-	/**
-	 * 分隔线颜色
-	 * @default "gray"
-	 */
-	dividerColor?: DividerColor;
-
-	/**
-	 * 对齐方式
-	 * @default "stretch"
-	 */
-	align?: AlignType;
-
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
-
-	/**
-	 * 类名列表
-	 */
-	'class:list'?: any;
-
-	[key: string]: any;
-}
-
-const {
-	gap = 'md',
-	dividers = false,
-	dividerColor = 'gray',
-	align = 'stretch',
-	class: className = '',
-	'class:list': classList,
-	...rest
-} = Astro.props;
-
-// 间距映射
-const gapClasses: Record<GapSize, string> = {
-	none: 'stack-gap-none',
-	xs: 'stack-gap-xs',
-	sm: 'stack-gap-sm',
-	md: 'stack-gap-md',
-	lg: 'stack-gap-lg',
-	xl: 'stack-gap-xl',
-};
-
-// 对齐方式映射
-const alignClasses: Record<AlignType, string> = {
-	start: 'stack-align-start',
-	center: 'stack-align-center',
-	end: 'stack-align-end',
-	stretch: 'stack-align-stretch',
-};
-
-// 分隔线颜色映射
-const dividerColorClasses: Record<DividerColor, string> = {
-	gray: 'stack-divider-gray',
-	light: 'stack-divider-light',
-	dark: 'stack-divider-dark',
-	primary: 'stack-divider-primary',
-};
-
-// 构建最终类名
-const stackClasses = [
-	'stack',
-	alignClasses[align as AlignType],
-	gapClasses[gap as GapSize],
-	dividers ? `stack-divider ${dividerColorClasses[dividerColor as DividerColor]}` : '',
-	className,
-]
-	.filter(Boolean)
-	.join(' ');
----
-
-<div class:list={[stackClasses, classList]} {...rest}>
-	<slot />
-</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/stack/index.ts

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