@coffic/cosy-ui 0.7.4 → 0.8.7

package/dist/mac-window-vue/index.ts

@@ -1,36 +0,0 @@
-import Basic from './Basic.vue';
-import WithTabs from './WithTabs.vue';
-import WithEvents from './WithEvents.vue';
-import WithToolbar from './WithToolbar.vue';
-import WithSidebar from './WithSidebar.vue';
-import CustomHeight from './CustomHeight.vue';
-import BasicSource from './Basic.vue?raw';
-import WithTabsSource from './WithTabs.vue?raw';
-import WithEventsSource from './WithEvents.vue?raw';
-import WithToolbarSource from './WithToolbar.vue?raw';
-import WithSidebarSource from './WithSidebar.vue?raw';
-import CustomHeightSource from './CustomHeight.vue?raw';
-import { extractSimpleExample } from '../../utils/component';
-
-// 导出主组件
-export { default as MacWindow } from './MacWindow.vue';
-
-// 将示例组件整合为一个对象导出
-export const MacWindowExamples = {
-	Basic,
-	WithTabs,
-	WithEvents,
-	WithToolbar,
-	WithSidebar,
-	CustomHeight,
-};
-
-// 导出示例组件的源代码（简化版本）
-export const MacWindowExampleCodes = {
-	Basic: extractSimpleExample(BasicSource, 'MacWindow'),
-	WithTabs: extractSimpleExample(WithTabsSource, 'MacWindow'),
-	WithEvents: extractSimpleExample(WithEventsSource, 'MacWindow'),
-	WithToolbar: extractSimpleExample(WithToolbarSource, 'MacWindow'),
-	WithSidebar: extractSimpleExample(WithSidebarSource, 'MacWindow'),
-	CustomHeight: extractSimpleExample(CustomHeightSource, 'MacWindow'),
-};

package/dist/main/Main.astro

@@ -1,147 +0,0 @@
----
-/**
- * @component Main
- *
- * @description
- * Main 组件是页面的主要内容区域，使用 Container 组件提供响应式布局。
- * 它适合作为页面的主体部分，自动处理不同屏幕尺寸下的布局和内边距。
- *
- * @design
- * 设计理念：
- * 1. 结构清晰 - 明确表示页面的主要内容区域，提高语义化
- * 2. 响应式布局 - 在不同屏幕尺寸下自动调整内边距和宽度
- * 3. 灵活配置 - 支持自定义容器尺寸、内边距和背景颜色
- * 4. 与容器集成 - 无缝集成 Container 组件，保持布局一致性
- *
- * @usage
- * 基本用法：
- * ```astro
- * ---
- * import { Main } from '@coffic/cosy-ui';
- * ---
- *
- * <Main>
- *   <h1>页面标题</h1>
- *   <p>页面内容</p>
- * </Main>
- * ```
- *
- * 自定义容器尺寸：
- * ```astro
- * <Main size="lg">
- *   <p>这是一个较宽的主内容区域</p>
- * </Main>
- * ```
- *
- * 自定义内边距：
- * ```astro
- * <Main verticalPadding="lg" padding="xl">
- *   <p>这个主内容区域有更大的内边距</p>
- * </Main>
- * ```
- *
- * 自定义背景颜色：
- * ```astro
- * <Main backgroundColor="primary">
- *   <p>这个主内容区域有主题色背景</p>
- * </Main>
- * ```
- */
-import '../style.ts';
-import { Article, TableOfContents, type IMainContentProps } from '../index';
-
-export interface Props extends IMainContentProps {}
-
-const {
-	size = 'md',
-	padding = 'md',
-	verticalPadding = 'md',
-	centered = true,
-	backgroundColor,
-	layout = 'row',
-	isArticle = false,
-	id,
-	showTableOfContents = false,
-	class: className,
-	'class:list': classList,
-	currentLocale,
-	...rest
-} = Astro.props;
-
-// 新增获取布局类的函数
-function getLayoutClasses(layout: string) {
-	if (layout === 'row') return 'cosy:flex cosy:flex-row';
-	if (layout === 'column') return 'cosy:flex cosy:flex-col';
-	return 'cosy:flex cosy:flex-col'; // 默认列布局
-}
-
-const layoutClass = getLayoutClasses(layout as string);
-
-// 获取垂直内边距的Tailwind类
-function getVerticalPaddingClasses(padding: string) {
-	if (padding === 'none') return 'cosy:py-0';
-	if (padding === 'xs') return 'cosy:py-1';
-	if (padding === 'sm') return 'cosy:py-2';
-	if (padding === 'md') return 'cosy:py-4';
-	if (padding === 'lg') return 'cosy:py-6';
-	if (padding === 'xl') return 'cosy:py-8';
-	if (padding === '2xl') return 'cosy:py-10';
-	if (padding === '3xl') return 'cosy:py-12';
-	if (padding === '4xl') return 'cosy:py-16';
-	if (padding === '5xl') return 'cosy:py-20';
-	return ''; // 对于自定义padding，使用内联样式
-}
-
-// 获取背景颜色的Tailwind类
-function getBgColorClasses(color: string | undefined) {
-	if (!color) return '';
-	if (color === 'primary') return 'cosy:bg-primary';
-	if (color === 'secondary') return 'cosy:bg-secondary';
-	if (color === 'tertiary') return 'cosy:bg-accent';
-	if (color === 'light') return 'cosy:bg-base-100';
-	if (color === 'dark') return 'cosy:bg-base-300';
-	return ''; // 对于自定义颜色，使用内联样式
-}
-
-const verticalPaddingClass = getVerticalPaddingClasses(verticalPadding as string);
-const bgColorClass = getBgColorClasses(backgroundColor);
-
-// 构建自定义样式
-const customStyle = [];
-
-// 只有当没有对应的Tailwind类时，才使用内联样式
-if (!verticalPaddingClass && verticalPadding && verticalPadding !== 'none') {
-	customStyle.push(`padding-top: ${verticalPadding}; padding-bottom: ${verticalPadding};`);
-}
-
-if (!bgColorClass && backgroundColor) {
-	customStyle.push(`background-color: ${backgroundColor};`);
-}
-
-const inlineStyle = customStyle.length > 0 ? customStyle.join(' ') : undefined;
----
-
-<main
-	id={id}
-	class:list={[
-		'cosy:w-full',
-		layoutClass,
-		verticalPaddingClass,
-		bgColorClass,
-		className,
-		classList,
-	]}
-	style={inlineStyle}
-	{...rest}>
-	{
-		isArticle ? (
-			<Article>
-				<slot />
-			</Article>
-		) : (
-			<slot />
-		)
-	}
-
-	{showTableOfContents && <TableOfContents lang={currentLocale} />}
-</main>

package/dist/main/index.ts

@@ -1 +0,0 @@
-export { default as Main } from     './Main.astro';

package/dist/modal/Modal.astro

@@ -1,119 +0,0 @@
----
-/**
- * @component Modal
- *
- * @description
- * Modal 组件是一个模态对话框，用于在不离开当前页面的情况下显示内容、通知或请求用户输入。
- * 它会覆盖在页面内容上方，并提供一个聚焦的交互环境。
- *
- * @design
- * 设计理念：
- * 1. 聚焦交互 - 通过遮罩层和动画效果引导用户注意力
- * 2. 灵活布局 - 支持标题、内容和操作按钮的灵活组合
- * 3. 可访问性 - 支持键盘导航和屏幕阅读器
- * 4. 响应式设计 - 在不同屏幕尺寸下保持良好的用户体验
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Modal id="my-modal" title="提示">
- *   <p>这是一个模态对话框的内容。</p>
- *   <button slot="actions" data-modal-target="my-modal">关闭</button>
- * </Modal>
- *
- * <!-- 触发按钮 -->
- * <button data-modal-target="my-modal">打开模态框</button>
- * ```
- *
- * 自定义操作按钮：
- * ```astro
- * <Modal id="confirm-modal" title="确认操作">
- *   <p>您确定要执行此操作吗？</p>
- *   <div slot="actions">
- *     <button class="btn btn-primary">确认</button>
- *     <button class="btn" data-modal-target="confirm-modal">取消</button>
- *   </div>
- * </Modal>
- * ```
- *
- * 不带标题的模态框：
- * ```astro
- * <Modal id="image-modal">
- *   <img src="/images/large-image.jpg" alt="大图预览" />
- * </Modal>
- * ```
- */
-
-import '../style.ts';
-import { Button } from '../index';
-
-interface Props {
-	/**
-	 * Modal 的唯一标识符
-	 */
-	id: string;
-	/**
-	 * 模态框的标题
-	 */
-	title?: string;
-	/**
-	 * 是否显示关闭按钮
-	 * @default true
-	 */
-	showCloseButton?: boolean;
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
-}
-
-const { id, title, showCloseButton = true, class: className = '' } = Astro.props;
----
-
-<dialog id={id} class="cosy:modal">
-	<div class:list={['cosy:modal-box', className]}>
-		{
-			showCloseButton && (
-				<form method="dialog">
-					<Button
-						variant="ghost"
-						size="sm"
-						shape="circle"
-						formmethod="dialog"
-						class="cosy:modal-close-button">
-						✕
-					</Button>
-				</form>
-			)
-		}
-
-		{title && <h3 class="cosy:modal-title">{title}</h3>}
-
-		<div class="cosy:modal-content">
-			<slot />
-		</div>
-
-		<div class="cosy:modal-action">
-			<slot name="actions" />
-		</div>
-	</div>
-
-	<form method="dialog" class="cosy:modal-backdrop">
-		<button>关闭</button>
-	</form>
-</dialog>
-
-<script is:inline define:vars={{ id }}>
-	// 为了方便使用，我们提供一些辅助方法
-	document.addEventListener('DOMContentLoaded', () => {
-		const modal = document.getElementById(id);
-		if (!modal) return;
-
-		// 为所有触发这个模态框的按钮添加点击事件
-		document.querySelectorAll(`[data-modal-target="${id}"]`).forEach((trigger) => {
-			trigger.addEventListener('click', () => {
-				modal.showModal();
-			});
-		});
-	});
-</script>

package/dist/modal/index.ts

@@ -1 +0,0 @@
-export { default as Modal } from    './Modal.astro';

package/dist/module/Module.astro

@@ -1,61 +0,0 @@
----
-/**
- * @component Module
- *
- * @description
- * Module 组件用于展示包含图片、标题和描述的内容模块。
- * 适用于特性展示、产品介绍等场景。
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Module
- *   title="模块标题"
- *   description="模块描述文本"
- *   image={moduleImage}
- * />
- * ```
- *
- * 在网格中使用：
- * ```astro
- * <div class="cosy:grid cosy:grid-cols-3 cosy:gap-8">
- *   <Module title="特性一" description="描述" image={image1} />
- *   <Module title="特性二" description="描述" image={image2} />
- *   <Module title="特性三" description="描述" image={image3} />
- * </div>
- * ```
- */
-
-import { Image } from 'astro:assets';
-import type { ImageMetadata } from 'astro';
-import '../style.ts';
-
-interface Props {
-	/**
-	 * 模块标题
-	 */
-	title: string;
-	/**
-	 * 模块描述
-	 */
-	description: string;
-	/**
-	 * 模块图片
-	 */
-	image: ImageMetadata;
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
-}
-
-const { title, description, image, class: className = '' } = Astro.props;
----
-
-<div class={`cosy:flex cosy:flex-col cosy:items-center cosy:gap-4 ${className}`}>
-	<div class="cosy:w-48 cosy:h-48 cosy:relative">
-		<Image src={image} alt={title} class="cosy:w-full cosy:h-full cosy:object-contain" />
-	</div>
-	<h3 class="cosy:text-xl cosy:font-semibold cosy:text-center">{title}</h3>
-	<p class="cosy:text-base-content/70 cosy:text-center cosy:max-w-sm">{description}</p>
-</div>

package/dist/module/ModuleBasic.astro

@@ -1,12 +0,0 @@
----
-import { Module } from '../index';
-import demoImage from '../assets/logo-rounded.png';
----
-
-<div class="cosy:grid cosy:grid-cols-1 cosy:gap-8 cosy:max-w-xl">
-	<Module
-		title="基础模块示例"
-		description="这是一个基础的模块示例，展示了标题、描述和图片的基本布局。"
-		image={demoImage}
-	/>
-</div>

package/dist/module/ModuleCustom.astro

@@ -1,14 +0,0 @@
----
-import Module from './Module.astro';
-import customImage from '../assets/logo-rounded.png';
----
-
-<div class="cosy:bg-base-200 cosy:p-8 cosy:rounded-xl">
-	<div class="cosy:max-w-2xl cosy:mx-auto">
-		<Module
-			title="自定义样式模块"
-			description="这个模块展示了如何通过容器添加自定义样式，比如背景色、内边距和圆角等。"
-			image={customImage}
-		/>
-	</div>
-</div>

package/dist/module/ModuleGrid.astro

@@ -1,26 +0,0 @@
----
-import { Module } from '../index';
-import featureImage1 from '../assets/logo-rounded.png';
-import featureImage2 from '../assets/logo-rounded.png';
-import featureImage3 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-8">
-	<Module
-		title="特性一"
-		description="这是第一个特性的详细描述，介绍了该功能的主要优点和使用场景。"
-		image={featureImage1}
-	/>
-
-	<Module
-		title="特性二"
-		description="这是第二个特性的详细描述，展示了该功能如何帮助用户解决问题。"
-		image={featureImage2}
-	/>
-
-	<Module
-		title="特性三"
-		description="这是第三个特性的详细描述，说明了该功能带来的独特价值。"
-		image={featureImage3}
-	/>
-</div>

package/dist/module/index.ts

@@ -1,17 +0,0 @@
-import Module from './Module.astro';
-import ModuleBasic from './ModuleBasic.astro';
-import ModuleGrid from './ModuleGrid.astro';
-import ModuleCustom from './ModuleCustom.astro';
-import BasicSourceCode from './ModuleBasic.astro?raw';
-import GridSourceCode from './ModuleGrid.astro?raw';
-import CustomSourceCode from './ModuleCustom.astro?raw';
-import { extractSimpleExample } from '../utils/component';
-
-export { Module, ModuleBasic, ModuleGrid, ModuleCustom };
-
-// 导出示例源代码
-export const ModuleExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'Module'),
-	Grid: extractSimpleExample(GridSourceCode, 'Module'),
-	Custom: extractSimpleExample(CustomSourceCode, 'Module'),
-};

package/dist/nav-item/NavItems.astro

@@ -1,44 +0,0 @@
----
-/**
- * @component NavItems
- *
- * @description
- * NavItems 组件用于渲染导航栏中的导航项目列表。
- *
- * @usage
- * ```astro
- * <NavItems
- *   navItems={navItems}
- *   activeLink={activeLink}
- *   linkHeightClass={linkHeightClass}
- * />
- * ```
- */
-import '../style.ts';
-import { type INavItem, Link } from '../index';
-
-interface Props {
-	navItems: INavItem[];
-	activeLink: string;
-	linkHeightClass: string;
-}
-
-const { navItems, activeLink, linkHeightClass } = Astro.props;
----
-
-<ul
-	data-active-link={activeLink}
-	class:list={['cosy:px-1 cosy:menu cosy:menu-horizontal', linkHeightClass]}>
-	{
-		navItems.map((item) => (
-			<li>
-				<Link
-					variant={activeLink === item.href ? 'primary' : 'default'}
-					href={item.href}
-					class:list={[linkHeightClass]}>
-					{item.label}
-				</Link>
-			</li>
-		))
-	}
-</ul>

package/dist/nav-item/NavItemsBasic.astro

@@ -1,27 +0,0 @@
----
-import NavItems from './NavItems.astro';
-
-const navItems = [
-	{
-		label: '首页',
-		href: '/',
-	},
-	{
-		label: '文档',
-		href: '/docs',
-	},
-	{
-		label: '组件',
-		href: '/components',
-	},
-	{
-		label: '博客',
-		href: '/blog',
-	},
-];
----
-
-<div class="cosy:bg-base-100 cosy:p-4">
-	<NavItems navItems={navItems} activeLink="/docs" linkHeightClass="cosy:h-10" />
-</div>
-

package/dist/nav-item/index.ts

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

package/dist/nav-section/NavSection.astro

@@ -1,42 +0,0 @@
----
-/**
- * @component NavSection
- *
- * @description
- * NavSection 组件用于在页脚中创建一个导航部分。
- *
- * @props
- * @prop {string} title - 导航部分的标题
- * @prop {Array<Object>} links - 链接数组，每个对象包含name、href和可选的external属性
- *
- */
-
-import { Link } from '../index';
-
-interface NavSectionProps {
-	title: string;
-	links: Array<{ name: string; href: string; external?: boolean }>;
-}
-
-const props = Astro.props as NavSectionProps;
-const { title, links } = props;
----
-
-<nav
-	class="cosy:flex cosy:flex-col cosy:items-center cosy:gap-3 cosy:hover:bg-base-300 cosy:hover:shadow-lg cosy:p-4 cosy:rounded cosy:h-full! cosy:hover:scale-105 cosy:transition-transform cosy:duration-300">
-	<h6 class="cosy:footer-title">{title}</h6>
-	{
-		links.map((link) => (
-			<Link
-				href={link.href}
-				external={link.external}
-				size="sm"
-				block
-				animation="hover-lift"
-				centerText>
-				{link.name}
-			</Link>
-		))
-	}
-</nav>
-

package/dist/nav-section/NavSectionBasic.astro

@@ -1,12 +0,0 @@
----
-import NavSection from './NavSection.astro';
----
-
-<NavSection
-	title="产品"
-	links={[
-		{ name: '首页', href: '/' },
-		{ name: '文档', href: '/docs' },
-		{ name: '组件', href: '/components', external: true },
-	]}
-/>

package/dist/nav-section/index.ts

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