@coffic/cosy-ui 0.7.4 → 0.8.7

package/dist/blog/Blog.astro

@@ -1,249 +0,0 @@
----
-/**
- * @component Blog
- *
- * @description
- * Blog 组件是一个用于展示博客文章的容器组件，提供了标题、副标题、作者信息、日期、封面图片和标签等元素的布局。
- * 组件内部使用了响应式设计，确保在不同屏幕尺寸下都有良好的显示效果。
- *
- * @design
- * 设计理念：
- * 1. 内容优先 - 突出展示文章的核心内容和相关元数据
- * 2. 视觉层次 - 通过字体大小、间距和颜色建立清晰的视觉层次
- * 3. 响应式布局 - 自适应不同屏幕尺寸，优化阅读体验
- * 4. 视觉一致性 - 与整体设计系统保持一致的视觉风格
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Blog title="这是一篇博客文章">
- *   <p>这里是博客文章的内容...</p>
- * </Blog>
- * ```
- *
- * 完整用法：
- * ```astro
- * <Blog
- *   title="使用 Astro 构建现代网站"
- *   subtitle="探索 Astro 的强大功能和使用技巧"
- *   author="张三"
- *   date={new Date('2023-12-15')}
- *   cover={{
- *     src: "/images/blog/astro-cover.jpg",
- *     alt: "Astro 框架封面图"
- *   }}
- *   tags={["Astro", "前端", "教程"]}
- * >
- *   <p>这里是博客文章的详细内容...</p>
- * </Blog>
- * ```
- */
-
-import '../style.ts';
-import { UserIcon, CalendarIcon } from '../index';
-
-interface Props {
-	/**
-	 * 文章标题
-	 */
-	title: string;
-	/**
-	 * 文章副标题
-	 */
-	subtitle?: string;
-	/**
-	 * 文章作者
-	 */
-	author?: string;
-	/**
-	 * 发布日期
-	 */
-	date?: Date;
-	/**
-	 * 封面图片
-	 */
-	cover?: {
-		src: string;
-		alt?: string;
-	};
-	/**
-	 * 文章标签
-	 */
-	tags?: string[];
-}
-
-const { title, subtitle, author, date, cover, tags = [] } = Astro.props;
-
-// 格式化日期
-const formatDate = (date?: Date) => {
-	if (!date) return '';
-	return new Intl.DateTimeFormat('zh-CN', {
-		year: 'numeric',
-		month: 'long',
-		day: 'numeric',
-	}).format(date);
-};
----
-
-<article class="article">
-	<header class="article-header">
-		{
-			cover && (
-				<div class="cover-container">
-					<img src={cover.src} alt={cover.alt || title} class="cover-image" />
-				</div>
-			)
-		}
-
-		<div class="header-content">
-			<h1 class="article-title">{title}</h1>
-			{subtitle && <p class="article-subtitle">{subtitle}</p>}
-
-			<div class="article-meta">
-				{
-					author && (
-						<div class="meta-item">
-							<UserIcon size="16px" />
-							<span>{author}</span>
-						</div>
-					)
-				}
-
-				{
-					date && (
-						<div class="meta-item">
-							<CalendarIcon size="16px" />
-							<time datetime={date.toISOString()}>{formatDate(date)}</time>
-						</div>
-					)
-				}
-			</div>
-
-			{
-				tags.length > 0 && (
-					<div class="article-tags">
-						{tags.map((tag: string) => (
-							<span class="tag">{tag}</span>
-						))}
-					</div>
-				)
-			}
-		</div>
-	</header>
-
-	<div class="article-content">
-		<slot />
-	</div>
-</article>
-
-<style>
-	/* 基础样式 */
-	.article {
-		container-type: inline-size;
-	}
-
-	/* 文章头部 */
-	.article-header {
-		margin-bottom: 2rem;
-	}
-
-	/* 封面图片 */
-	.cover-container {
-		position: relative;
-		width: 100%;
-		height: 300px;
-		margin-bottom: 1.5rem;
-		border-radius: 0.5rem;
-		overflow: hidden;
-	}
-
-	.cover-image {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-
-	/* 标题和副标题 */
-	.header-content {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-	}
-
-	.article-title {
-		font-size: 2.25rem;
-		font-weight: 700;
-		line-height: 1.2;
-		letter-spacing: -0.025em;
-	}
-
-	.article-subtitle {
-		font-size: 1.25rem;
-		color: var(--text-secondary, rgba(0, 0, 0, 0.7));
-	}
-
-	/* 元数据 */
-	.article-meta {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 1rem;
-		font-size: 0.875rem;
-		color: var(--text-secondary, rgba(0, 0, 0, 0.6));
-	}
-
-	.meta-item {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
-	/* 标签 */
-	.article-tags {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.5rem;
-	}
-
-	.tag {
-		display: inline-block;
-		padding: 0.25rem 0.75rem;
-		border: 1px solid var(--border-color, #e2e8f0);
-		border-radius: 9999px;
-		font-size: 0.75rem;
-		line-height: 1.5;
-	}
-
-	/* 文章内容 */
-	.article-content {
-		max-width: none;
-		font-size: 1.125rem;
-		line-height: 1.75;
-	}
-
-	/* 响应式调整 */
-	@media (min-width: 768px) {
-		.article-title {
-			font-size: 3rem;
-		}
-
-		.cover-container {
-			height: 400px;
-		}
-	}
-
-	/* 暗色主题适配 */
-	@media (prefers-color-scheme: dark) {
-		.article-subtitle {
-			color: var(--text-secondary, rgba(255, 255, 255, 0.7));
-		}
-
-		.article-meta {
-			color: var(--text-secondary, rgba(255, 255, 255, 0.6));
-		}
-
-		.tag {
-			border-color: var(--border-color, #2d3748);
-		}
-	}
-</style>

package/dist/blog/index.ts

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

package/dist/blog-vue/Basic.vue

@@ -1,30 +0,0 @@
-<template>
-    <BlogList :blogs="blogs" lang="zh" />
-</template>
-
-<script setup lang="ts">
-import '../../style';
-import { ref } from 'vue';
-import BlogList from './BlogList.vue';
-
-const blogs = ref([
-    {
-        id: '1',
-        title: '如何在Vue 3中使用组合式API',
-        link: '/blog/vue3-composition-api',
-        tags: ['Vue', '前端']
-    },
-    {
-        id: '2',
-        title: 'TypeScript高级类型技巧',
-        link: '/blog/typescript-advanced-types',
-        tags: ['TypeScript', '编程']
-    },
-    {
-        id: '3',
-        title: '响应式设计最佳实践',
-        link: '/blog/responsive-design-best-practices',
-        tags: ['CSS', '设计']
-    }
-]);
-</script>

package/dist/blog-vue/BlogList.vue

@@ -1,100 +0,0 @@
-<!--
-@component BlogList
-
-@description
-BlogList 组件用于展示博客文章列表，支持国际化，提供空状态显示。
-
-@usage
-基本用法：
-```vue
-<BlogList :blogs="blogPosts" lang="zh" />
-```
-
-多语言支持：
-```vue
-<BlogList :blogs="blogPosts" lang="en" />
-```
-
-组合使用：
-```vue
-<template>
-  <BlogList :blogs="blogPosts" :lang="currentLang" />
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { BlogList } from 'cosy-ui';
-
-const blogPosts = ref([
-  { id: '1', title: '文章标题', link: '/blog/post-1', tags: ['技术', 'Vue'] }
-]);
-const currentLang = ref('zh');
-</script>
-```
-
-@props
-@prop {IBlog[]} blogs - 博客文章数组
-@prop {('zh'|'en')} [lang='zh'] - 语言设置，影响空状态显示文本
--->
-
-<script setup lang="ts">
-import '../../style';
-import InboxArchiveIcon from '../Icons/InboxArchiveIcon.vue';
-import Link from '../SmartLink.vue';
-import ListItem from '../ListItem.vue';
-
-export interface IBlog {
-    id: string;
-    title: string;
-    link: string;
-    tags: string[];
-}
-
-interface Props {
-    blogs: IBlog[];
-    lang?: 'zh' | 'en';
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    lang: 'zh'
-});
-
-// 多语言文本
-const messages = {
-    'zh': {
-        empty: '暂无博客文章',
-        checkLater: '稍后再来看看吧'
-    },
-    'en': {
-        empty: 'No blog posts yet',
-        checkLater: 'Check back later'
-    }
-};
-
-const t = (key: keyof typeof messages['zh']) => {
-    return messages[props.lang][key];
-};
-</script>
-
-<template>
-    <div class="cosy:py-4">
-        <ul v-if="blogs.length > 0" class="cosy:list-none">
-            <ListItem v-for="blog in blogs" :key="blog.id">
-                <Link :href="blog.link">
-                {{ blog.title }}
-                </Link>
-            </ListItem>
-        </ul>
-        <div v-else class="cosy:text-center cosy:py-8">
-            <div class="cosy:flex cosy:flex-col cosy:items-center cosy:text-base-content/50">
-                <InboxArchiveIcon class="cosy:text-5xl cosy:mb-4 cosy:h-36 cosy:w-36" />
-                <p class="cosy:text-lg">
-                    {{ t('empty') }}
-                </p>
-                <p class="cosy:text-sm">
-                    {{ t('checkLater') }}
-                </p>
-            </div>
-        </div>
-    </div>
-</template>

package/dist/blog-vue/Empty.vue

@@ -1,8 +0,0 @@
-<template>
-    <BlogList :blogs="[]" lang="zh" />
-</template>
-
-<script setup lang="ts">
-import '../../style';
-import BlogList from './BlogList.vue';
-</script>

package/dist/blog-vue/EmptyEnglish.vue

@@ -1,8 +0,0 @@
-<template>
-    <BlogList :blogs="[]" lang="en" />
-</template>
-
-<script setup lang="ts">
-import '../../style';
-import BlogList from './BlogList.vue';
-</script>

package/dist/blog-vue/English.vue

@@ -1,24 +0,0 @@
-<template>
-    <BlogList :blogs="blogs" lang="en" />
-</template>
-
-<script setup lang="ts">
-import '../../style';
-import { ref } from 'vue';
-import BlogList from './BlogList.vue';
-
-const blogs = ref([
-    {
-        id: '1',
-        title: 'Getting Started with Vue 3 Composition API',
-        link: '/blog/vue3-composition-api',
-        tags: ['Vue', 'Frontend']
-    },
-    {
-        id: '2',
-        title: 'Advanced TypeScript Type Techniques',
-        link: '/blog/typescript-advanced-types',
-        tags: ['TypeScript', 'Programming']
-    }
-]);
-</script>

package/dist/blog-vue/index.ts

@@ -1,29 +0,0 @@
-import Basic from './Basic.vue';
-import Empty from './Empty.vue';
-import English from './English.vue';
-import EmptyEnglish from './EmptyEnglish.vue';
-import BasicSource from './Basic.vue?raw';
-import EmptySource from './Empty.vue?raw';
-import EnglishSource from './English.vue?raw';
-import EmptyEnglishSource from './EmptyEnglish.vue?raw';
-import { extractSimpleExample } from '../../utils/component';
-
-// 导出主组件
-export { default as BlogList } from './BlogList.vue';
-export type { IBlog } from './BlogList.vue';
-
-// 将示例组件整合为一个对象导出
-export const BlogListExamples = {
-	Basic,
-	Empty,
-	English,
-	EmptyEnglish,
-};
-
-// 导出示例组件的源代码（简化版本）
-export const BlogListExampleCodes = {
-	Basic: extractSimpleExample(BasicSource, 'BlogList'),
-	Empty: extractSimpleExample(EmptySource, 'BlogList'),
-	English: extractSimpleExample(EnglishSource, 'BlogList'),
-	EmptyEnglish: extractSimpleExample(EmptyEnglishSource, 'BlogList'),
-};

package/dist/button/Button.astro

@@ -1,192 +0,0 @@
----
-/**
- * @component Button
- *
- * @description
- * Button 组件用于触发一个即时操作，如表单提交、打开对话框等。
- * 支持多种样式变体、尺寸和状态，可以满足不同场景的需求。
- *
- * @design
- * 设计理念：
- * 1. 直观易用 - 通过视觉差异清晰传达按钮的重要性和功能
- * 2. 响应式交互 - 提供丰富的状态反馈，增强用户体验
- * 3. 可定制性 - 支持多种配置选项，适应不同场景需求
- * 4. 无障碍性 - 确保所有用户都能获得良好体验
- *
- * 视觉特点：
- * - 悬停效果：轻微上浮和阴影增强
- * - 点击效果：轻微下沉
- * - 加载状态：显示加载动画
- * - 多种颜色变体：适应不同场景和语义
- * - 多种尺寸：适应不同布局需求
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Button>默认按钮</Button>
- * <Button variant="primary">主要按钮</Button>
- * ```
- *
- * 不同尺寸：
- * ```astro
- * <Button size="sm">小型按钮</Button>
- * <Button size="lg">大型按钮</Button>
- * ```
- *
- * 状态变化：
- * ```astro
- * <Button disabled>禁用按钮</Button>
- * <Button loading>加载中</Button>
- * ```
- *
- * 带图标：
- * ```astro
- * <Button>
- *   <span slot="icon-left">👈</span>
- *   左侧图标
- * </Button>
- * ```
- *
- * 链接按钮：
- * ```astro
- * <Button href="https://example.com">跳转链接</Button>
- * <Button href="https://example.com" target="_blank">新窗口打开</Button>
- * ```
- */
-
-// 导入样式
-import '../style.ts';
-
-interface Props {
-	variant?:
-		| 'primary'
-		| 'secondary'
-		| 'accent'
-		| 'info'
-		| 'success'
-		| 'warning'
-		| 'error'
-		| 'ghost'
-		| 'link'
-		| 'outline'
-		| 'neutral';
-	size?: 'lg' | 'md' | 'sm' | 'xs';
-	shape?: 'circle' | 'square';
-	wide?: boolean;
-	block?: boolean;
-	loading?: boolean;
-	disabled?: boolean;
-	type?: 'button' | 'submit' | 'reset';
-	class?: string;
-	onClick?: string;
-	formmethod?: string;
-	href?: string;
-	target?: string;
-	[key: string]: any; // 允许任意自定义属性
-}
-
-const {
-	variant = 'primary',
-	size = 'md',
-	shape,
-	wide = false,
-	block = false,
-	loading = false,
-	disabled = false,
-	type = 'button',
-	class: className,
-	onClick,
-	formmethod,
-	href,
-	target,
-	...rest
-} = Astro.props;
-
-// 计算按钮的类名
-const getButtonClasses = () => {
-	const classes = ['cosy:btn'];
-
-	// Variant classes
-	const variantClasses = {
-		primary: 'cosy:btn-primary',
-		secondary: 'cosy:btn-secondary',
-		accent: 'cosy:btn-accent',
-		info: 'cosy:btn-info',
-		success: 'cosy:btn-success',
-		warning: 'cosy:btn-warning',
-		error: 'cosy:btn-error',
-		ghost: 'cosy:btn-ghost',
-		link: 'cosy:btn-link',
-		outline: 'cosy:btn-outline',
-		neutral: 'cosy:btn-neutral',
-	};
-
-	// Size classes
-	const sizeClasses = {
-		lg: 'cosy:btn-lg',
-		md: 'cosy:btn-md',
-		sm: 'cosy:btn-sm',
-		xs: 'cosy:btn-xs',
-	};
-
-	// Shape classes
-	const shapeClasses = {
-		circle: 'cosy:btn-circle',
-		square: 'cosy:btn-square',
-	};
-
-	if (variantClasses[variant]) {
-		classes.push(variantClasses[variant]);
-	}
-
-	if (sizeClasses[size]) {
-		classes.push(sizeClasses[size]);
-	}
-
-	if (shape && shapeClasses[shape]) {
-		classes.push(shapeClasses[shape]);
-	}
-
-	if (wide) classes.push('cosy:btn-wide');
-	if (block) classes.push('cosy:btn-block');
-	if (loading) classes.push('cosy:loading');
-	if (className) classes.push(className);
-
-	return classes;
-};
-
-const buttonClasses = getButtonClasses();
----
-
-{
-	href ? (
-		<a
-			href={href}
-			class:list={buttonClasses}
-			target={target}
-			onclick={onClick}
-			data-variant={variant}
-			{...rest}>
-			<span class="cosy:flex cosy:items-center cosy:gap-2">
-				<slot name="icon-left" />
-				<slot />
-				<slot name="icon-right" />
-			</span>
-		</a>
-	) : (
-		<button
-			type={formmethod === 'dialog' ? 'submit' : type}
-			class:list={buttonClasses}
-			disabled={disabled}
-			onclick={onClick}
-			formmethod={formmethod}
-			data-variant={variant}
-			{...rest}>
-			<span class="cosy:flex cosy:items-center cosy:gap-2">
-				<slot name="icon-left" />
-				<slot />
-				<slot name="icon-right" />
-			</span>
-		</button>
-	)
-}

package/dist/button/ButtonBasic.astro

@@ -1,18 +0,0 @@
----
-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/ButtonBasicContainer.astro

@@ -1,11 +0,0 @@
----
-import { CodeContainer } from '../index';
-import ButtonBasic from './ButtonBasic.astro';
-import ButtonBasicSourceCode from './ButtonBasic.astro?raw';
----
-
-<CodeContainer codes={[ButtonBasicSourceCode]} titles={['Basic']}>
-	<div id="tab-1">
-		<ButtonBasic />
-	</div>
-</CodeContainer>

package/dist/button/ButtonIconBoth.astro

@@ -1,9 +0,0 @@
----
-import Button from './Button.astro';
----
-
-<Button>
-	<span slot="icon-left">←</span>
-	两侧图标按钮
-	<span slot="icon-right">→</span>
-</Button>

package/dist/button/ButtonIconLeft.astro

@@ -1,8 +0,0 @@
----
-import Button from './Button.astro';
----
-
-<Button>
-	<span slot="icon-left">←</span>
-	左侧图标按钮
-</Button>