@coffic/cosy-ui 0.6.18 → 0.6.22

package/dist/icons/InboxArchive.astro

@@ -0,0 +1,23 @@
+---
+import AstroIcon from './AstroIcon.astro';
+interface Props {
+	/**
+	 * 图标的大小
+	 * @default "24px"
+	 */
+	size?: string;
+	/**
+	 * 图标的颜色
+	 * @default "currentColor"
+	 */
+	color?: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
+---
+
+<AstroIcon name="inboxArchive" size={size} color={color} class={className} />

package/dist/index_icons.ts

@@ -19,5 +19,6 @@ export { default as CloseIcon } from './icons/CloseIcon.astro';
 export { default as ErrorIcon } from './icons/ErrorIcon.astro';
 export { default as GithubIcon } from './icons/GithubIcon.astro';
 export { default as InfoCircle } from './icons/InfoCircle.astro';
+export { default as InboxArchive } from './icons/InboxArchive.astro';
 export { default as SettingsIcon } from './icons/SettingsIcon.astro';
 export { default as ChevronDownIcon } from './icons/ChevronDownIcon.astro';

package/dist/index_vue.ts

@@ -4,17 +4,22 @@ export { AlertDialogExamples, AlertDialogExampleCodes, AlertDialog } from './vue
 // Banner
 export { BannerBoxExamples, BannerBoxExampleCodes, BannerBox } from './vue/BannerBox';
 
+// BlogList
+export * from './vue/BlogList';
+
 // Counter
 export { default as VueCounter } from './vue/VueCounter.vue';
 
 // SmartHero
-export { default as SmartHero } from './vue/SmartHero.vue';
+export { SmartHero, SmartHeroExamples, SmartHeroExampleCodes } from './vue/SmartHero';
 
 // ConfirmDialog
-export { default as ConfirmDialog } from './vue/ConfirmDialog.vue';
+export { default as ConfirmDialog } from './vue/ConfirmDialog/ConfirmDialog.vue';
+export { ConfirmDialogExamples, ConfirmDialogExampleCodes } from './vue/ConfirmDialog';
+
+// Buttons
+export * from './vue/Buttons';
 
-// FeatureButton
-export { default as FeatureButton } from './vue/FeatureButton.vue';
 export { default as FeatureCard } from './vue/BannerBox/FeatureCard.vue';
 
 // Icons
@@ -26,6 +31,7 @@ export { default as LinkIcon } from './vue/Icons/LinkIcon.vue';
 export { default as MenuIcon } from './vue/Icons/MenuIcon.vue';
 export { default as UserIcon } from './vue/Icons/UserIcon.vue';
 export { default as XCircleIcon } from './vue/Icons/XCircleIcon.vue';
+export { default as InboxArchiveIcon } from './vue/Icons/InboxArchiveIcon.vue';
 
 // List
 export { default as ListItem } from './vue/ListItem.vue';

package/dist/vue/BlogList/Basic.vue

@@ -0,0 +1,30 @@
+<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/vue/BlogList/BlogList.vue

@@ -0,0 +1,100 @@
+<!--
+@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/vue/BlogList/Empty.vue

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

package/dist/vue/BlogList/EmptyEnglish.vue

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

package/dist/vue/BlogList/English.vue

@@ -0,0 +1,24 @@
+<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/vue/BlogList/index.ts

@@ -0,0 +1,51 @@
+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';
+
+// 转换Vue SFC组件为简化的示例代码（只保留template和setup script）
+function extractSimpleExample(source: string): string {
+	// 提取模板部分
+	const templateMatch = source.match(/<template>([\s\S]*?)<\/template>/);
+	const template = templateMatch ? templateMatch[1].trim() : '';
+
+	// 提取script setup部分（去除import部分）
+	const scriptMatch = source.match(/<script setup lang="ts">([\s\S]*?)<\/script>/);
+	let script = '';
+	if (scriptMatch) {
+		// 只保留相关变量定义，去除导入语句
+		script = scriptMatch[1]
+			.replace(/import [^;]+;/g, '')
+			.replace(/import BlogList from '[^']+';/g, "import { BlogList } from 'cosy-ui';")
+			.trim();
+	}
+
+	// 创建简化版本的代码
+	return `<template>${template}</template>
+
+<script setup lang="ts">${script}</script>`;
+}
+
+// 导出主组件
+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),
+	Empty: extractSimpleExample(EmptySource),
+	English: extractSimpleExample(EnglishSource),
+	EmptyEnglish: extractSimpleExample(EmptyEnglishSource),
+};

package/dist/vue/Buttons/FeatureBasic.vue

@@ -0,0 +1,8 @@
+<template>
+    <FeatureButton title="特性按钮" />
+</template>
+
+<script setup lang="ts">
+import '../../style';
+import FeatureButton from './FeatureButton.vue';
+</script>

package/dist/vue/{FeatureButton.vue → Buttons/FeatureButton.vue}

@@ -2,7 +2,7 @@
     <div>
         <!-- Button with hover effects -->
         <button :class="[
-            'bg-cyan-500/20 p-4 rounded-2xl text-center backdrop-blur-lg text-2xl transition-all duration-300 hover:scale-105 hover:bg-cyan-500/30',
+            'cosy:bg-cyan-500/20 cosy:text-cyan-500 cosy:border-cyan-500 cosy:border-2 cosy:hover:bg-cyan-500/30 cosy:hover:text-white cosy:hover:border-cyan-500/30 cosy:hover:scale-105 cosy:transition-all cosy:duration-300 cosy:rounded-2xl cosy:text-center cosy:backdrop-blur-lg cosy:text-2xl',
             props.size
         ]" @click="showPopup">
             <slot />
@@ -11,8 +11,11 @@
 
         <!-- Popup message -->
         <Transition name="fade">
-            <div v-if="isPopupVisible" class="fixed inset-0 flex items-center justify-center z-50" @click="hidePopup">
-                <div class="bg-black/80 backdrop-blur-sm p-6 rounded-xl text-white animate-popup">
+            <div v-if="isPopupVisible"
+                class="cosy:fixed cosy:inset-0 cosy:flex cosy:items-center cosy:justify-center cosy:z-50"
+                @click="hidePopup">
+                <div
+                    class="cosy:bg-black/80 cosy:backdrop-blur-sm cosy:p-6 cosy:rounded-xl cosy:text-white cosy:animate-popup">
                     {{ lang === 'zh' ? '这是展示图，不支持操作' : 'This is a preview image, no operation is supported' }}
                 </div>
             </div>
@@ -85,10 +88,4 @@ const hidePopup = () => {
         opacity: 1;
     }
 }
-</style>
-
-<script lang="ts">
-export default {
-    name: 'FeatureButton'
-}
-</script>
+</style>

package/dist/vue/Buttons/FeatureWithTips.vue

@@ -0,0 +1,8 @@
+<template>
+    <FeatureButton title="带提示特性" showTips />
+</template>
+
+<script setup lang="ts">
+import '../../style';
+import FeatureButton from './FeatureButton.vue';
+</script>

package/dist/vue/Buttons/LinkBasic.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import '../../style';
+import LinkButton from './LinkButton.vue';
+</script>
+
+<template>
+    <LinkButton text="了解更多" href="#" />
+</template>

package/dist/vue/Buttons/LinkButton.vue

@@ -0,0 +1,65 @@
+<!--
+@component LinkButton
+
+@description
+LinkButton 组件是一个现代化的链接按钮，支持外部链接和路由跳转，带有动画效果。
+
+@usage
+基本用法：
+```vue
+<LinkButton text="了解更多" href="#" />
+```
+
+多个按钮：
+```vue
+<div class="cosy:flex cosy:gap-4">
+  <LinkButton text="了解更多" href="#" />
+  <LinkButton text="立即开始" href="#get-started" />
+</div>
+```
+
+@props
+@prop {string} text - 按钮文本
+@prop {string} href - 链接地址
+@prop {boolean} [openInNewTab=true] - 是否在新标签页打开链接
+-->
+
+<script setup lang="ts">
+import '../../style';
+
+defineProps({
+    /**
+     * 按钮文本
+     */
+    text: {
+        type: String,
+        required: true
+    },
+    /**
+     * 链接地址
+     */
+    href: {
+        type: String,
+        required: true
+    },
+    /**
+     * 是否在新标签页打开链接
+     * @default true
+     */
+    openInNewTab: {
+        type: Boolean,
+        default: true
+    }
+});
+</script>
+
+<template>
+    <a :href="href" :target="openInNewTab ? '_blank' : ''" class="cosy:px-6 cosy:py-3 cosy:rounded-lg cosy:bg-blue-600 cosy:text-white cosy:font-medium
+               cosy:transition-all cosy:duration-300 cosy:ease-in-out
+               cosy:no-underline
+               cosy:hover:bg-blue-700 cosy:hover:shadow-lg cosy:hover:-translate-y-0.5
+               cosy:focus:outline-none cosy:focus:ring-2 cosy:focus:ring-blue-500 cosy:focus:ring-offset-2
+               cosy:active:bg-blue-800 cosy:active:translate-y-0">
+        {{ text }}
+    </a>
+</template>

package/dist/vue/Buttons/Multiple.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="cosy:flex cosy:gap-4">
+        <LinkButton text="了解更多" href="#" />
+        <LinkButton text="立即开始" href="#get-started" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import '../../style';
+import LinkButton from './LinkButton.vue';
+</script>

package/dist/vue/Buttons/index.ts

@@ -0,0 +1,59 @@
+import FeatureBasic from './FeatureBasic.vue';
+import FeatureWithTips from './FeatureWithTips.vue';
+import Multiple from './Multiple.vue';
+import LinkBasic from './LinkBasic.vue';
+import FeatureBasicSource from './FeatureBasic.vue?raw';
+import FeatureWithTipsSource from './FeatureWithTips.vue?raw';
+import MultipleSource from './Multiple.vue?raw';
+import LinkBasicSource from './LinkBasic.vue?raw';
+
+// 转换Vue SFC组件为简化的示例代码（只保留template和setup script）
+function extractSimpleExample(source: string): string {
+	// 提取模板部分
+	const templateMatch = source.match(/<template>([\s\S]*?)<\/template>/);
+	const template = templateMatch ? templateMatch[1].trim() : '';
+
+	// 提取script setup部分（去除import部分）
+	const scriptMatch = source.match(/<script setup lang="ts">([\s\S]*?)<\/script>/);
+	let script = '';
+	if (scriptMatch) {
+		// 只保留相关变量定义，去除导入语句
+		script = scriptMatch[1]
+			.replace(/import [^;]+;/g, '')
+			.replace(/import (FeatureButton|LinkButton) from '[^']+';/g, "import { $1 } from 'cosy-ui';")
+			.trim();
+	}
+
+	// 创建简化版本的代码
+	return `<template>${template}</template>
+
+<script setup lang="ts">${script}</script>`;
+}
+
+// 导出组件
+export { default as FeatureButton } from './FeatureButton.vue';
+export { default as LinkButton } from './LinkButton.vue';
+
+// 将示例组件整合为一个对象导出
+export const ButtonsExamples = {
+	FeatureButton: {
+		Basic: FeatureBasic,
+		WithTips: FeatureWithTips,
+	},
+	LinkButton: {
+		Basic: LinkBasic,
+		Multiple: Multiple,
+	},
+};
+
+// 导出示例组件的源代码（简化版本）
+export const ButtonsExampleCodes = {
+	FeatureButton: {
+		Basic: extractSimpleExample(FeatureBasicSource),
+		WithTips: extractSimpleExample(FeatureWithTipsSource),
+	},
+	LinkButton: {
+		Basic: extractSimpleExample(LinkBasicSource),
+		Multiple: extractSimpleExample(MultipleSource),
+	},
+};

package/dist/vue/ConfirmDialog/Basic.vue

@@ -0,0 +1,57 @@
+<!--
+@component ConfirmDialog.Basic
+
+@description
+ConfirmDialog 组件的基础示例，展示最基本的确认对话框用法。
+
+@usage
+```vue
+<ConfirmDialogExamples.Basic />
+```
+-->
+
+<script lang="ts">
+import '../../app.css'
+import { ref, defineComponent } from 'vue'
+import ConfirmDialog from './ConfirmDialog.vue'
+
+export default defineComponent({
+    name: 'ConfirmDialogBasicExample',
+    components: {
+        ConfirmDialog
+    },
+    setup() {
+        const isShow = ref(false)
+        const result = ref('')
+
+        const handleConfirm = () => {
+            result.value = '用户已确认操作'
+
+            // 3秒后清除结果
+            setTimeout(() => {
+                result.value = ''
+            }, 3000)
+        }
+
+        return {
+            isShow,
+            result,
+            handleConfirm
+        }
+    }
+})
+</script>
+
+<template>
+    <div class="cosy:flex cosy:flex-col cosy:gap-4">
+        <button @click="isShow = true" class="cosy:btn cosy:btn-primary">
+            显示确认对话框
+        </button>
+
+        <div v-if="result" class="cosy:alert cosy:alert-success cosy:shadow-lg">
+            <span>{{ result }}</span>
+        </div>
+    </div>
+
+    <ConfirmDialog v-model="isShow" title="确认操作" message="您确定要执行此操作吗？此操作无法撤销。" @confirm="handleConfirm" />
+</template>