@coffic/cosy-ui 0.6.18 → 0.6.20

package/dist/vue/ConfirmDialog/ConfirmDialog.vue

@@ -0,0 +1,134 @@
+<!--
+@component ConfirmDialog
+
+@description
+ConfirmDialog 组件用于显示确认对话框，带有标题、消息内容和两个按钮（确认和取消），支持自定义按钮文本，并带有淡入淡出动画效果。
+
+@usage
+基本用法：
+```vue
+<ConfirmDialog v-model="showDialog" title="确认操作" message="您确定要执行此操作吗？" @confirm="handleConfirm" />
+```
+
+自定义按钮文本：
+```vue
+<ConfirmDialog 
+  v-model="showDialog" 
+  title="删除确认" 
+  message="您确定要删除此项目吗？此操作无法撤销。" 
+  cancel-text="取消" 
+  confirm-text="删除" 
+  @confirm="handleDelete" 
+/>
+```
+
+组合使用：
+```vue
+<template>
+  <button @click="showDialog = true">删除项目</button>
+  <ConfirmDialog v-model="showDialog" title="删除确认" message="此操作无法撤销" @confirm="handleDelete" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ConfirmDialog } from 'cosy-ui';
+
+const showDialog = ref(false);
+const handleDelete = () => {
+  // 处理确认删除逻辑
+};
+</script>
+```
+
+@props
+@prop {boolean} modelValue - 控制对话框显示状态，支持v-model双向绑定
+@prop {string} [title='Confirm'] - 对话框标题
+@prop {string} [message='Are you sure you want to confirm this action?'] - 对话框显示的消息内容
+@prop {string} [cancel-text='取消'] - 取消按钮的文本
+@prop {string} [confirm-text='确认'] - 确认按钮的文本
+
+@emits
+@emit {update:modelValue} - 当对话框关闭时触发，用于更新v-model绑定值
+@emit {confirm} - 当用户点击确认按钮时触发
+-->
+
+<template>
+    <Transition name="fade" class="cosy:transition-opacity cosy:duration-200 cosy:ease-in-out">
+        <div v-if="modelValue"
+            class="cosy:fixed cosy:inset-0 cosy:z-50 cosy:flex cosy:items-center cosy:justify-center">
+            <!-- 背景遮罩 -->
+            <div class="cosy:absolute cosy:inset-0 cosy:bg-base-200/80 cosy:backdrop-blur-sm"
+                @click="$emit('update:modelValue', false)" />
+
+            <!-- 对话框 -->
+            <div
+                class="cosy:relative cosy:bg-base-100 cosy:rounded-xl cosy:shadow-xl cosy:w-[400px] cosy:transform cosy:transition-all">
+                <!-- 内容区域 -->
+                <div class="cosy:p-6">
+                    <h3 class="cosy:text-lg cosy:font-medium cosy:text-base-content cosy:mb-2">
+                        {{ title }}
+                    </h3>
+                    <p class="cosy:text-base-content/80">
+                        {{ message }}
+                    </p>
+                </div>
+
+                <!-- 按钮区域 -->
+                <div class="cosy:flex cosy:border-t cosy:border-base-300">
+                    <button class="cosy:flex-1 cosy:btn cosy:btn-ghost cosy:rounded-none cosy:rounded-bl-xl"
+                        @click="$emit('update:modelValue', false)">
+                        {{ cancelText }}
+                    </button>
+                    <button
+                        class="cosy:flex-1 cosy:btn cosy:btn-ghost cosy:text-primary cosy:rounded-none cosy:rounded-br-xl cosy:border-l cosy:border-base-300"
+                        @click="handleConfirm">
+                        {{ confirmText }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </Transition>
+</template>
+
+<script setup lang="ts">
+import '../../style'
+
+defineProps({
+    modelValue: Boolean,
+    title: {
+        type: String,
+        default: 'Confirm'
+    },
+    message: {
+        type: String,
+        default: 'Are you sure you want to confirm this action?'
+    },
+    cancelText: {
+        type: String,
+        default: '取消'
+    },
+    confirmText: {
+        type: String,
+        default: '确认'
+    }
+})
+
+const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const handleConfirm = () => {
+    emit('update:modelValue', false)
+    emit('confirm')
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>

package/dist/vue/ConfirmDialog/CustomButtons.vue

@@ -0,0 +1,69 @@
+<!--
+@component ConfirmDialog.CustomButtons
+
+@description
+展示如何自定义 ConfirmDialog 组件的按钮文本。
+
+@usage
+```vue
+<ConfirmDialogExamples.CustomButtons />
+```
+-->
+
+<script lang="ts">
+import '../../app.css'
+import { ref, defineComponent } from 'vue'
+import ConfirmDialog from './ConfirmDialog.vue'
+
+export default defineComponent({
+    name: 'ConfirmDialogCustomButtonsExample',
+    components: {
+        ConfirmDialog
+    },
+    setup() {
+        const isShowDelete = ref(false)
+        const isShowSave = ref(false)
+        const result = ref('')
+
+        const handleConfirm = (action: string) => {
+            result.value = `用户已${action}`
+
+            // 3秒后清除结果
+            setTimeout(() => {
+                result.value = ''
+            }, 3000)
+        }
+
+        return {
+            isShowDelete,
+            isShowSave,
+            result,
+            handleConfirm
+        }
+    }
+})
+</script>
+
+<template>
+    <div class="cosy:flex cosy:flex-col cosy:gap-4">
+        <div class="cosy:flex cosy:gap-4">
+            <button @click="isShowDelete = true" class="cosy:btn cosy:btn-error">
+                删除文件
+            </button>
+
+            <button @click="isShowSave = true" class="cosy:btn cosy:btn-success">
+                保存更改
+            </button>
+        </div>
+
+        <div v-if="result" class="cosy:alert cosy:alert-info cosy:shadow-lg">
+            <span>{{ result }}</span>
+        </div>
+    </div>
+
+    <ConfirmDialog v-model="isShowDelete" title="警告" message="您确定要删除这个文件吗？此操作无法撤销。" cancel-text="取消" confirm-text="删除"
+        @confirm="handleConfirm('删除了文件')" />
+
+    <ConfirmDialog v-model="isShowSave" title="保存更改" message="您的更改尚未保存，确定要保存吗？" cancel-text="稍后再说" confirm-text="保存"
+        @confirm="handleConfirm('保存了更改')" />
+</template>

package/dist/vue/ConfirmDialog/index.ts

@@ -0,0 +1,58 @@
+import Basic from './Basic.vue';
+import CustomButtons from './CustomButtons.vue';
+import BasicSource from './Basic.vue?raw';
+import CustomButtonsSource from './CustomButtons.vue?raw';
+
+// 提取简单示例源代码函数
+function extractSimpleExample(source: string): string {
+	// 提取模板部分
+	const templateMatch = source.match(/<template>([\s\S]*)<\/template>/m);
+	const scriptMatch = source.match(/<script[\s\S]*?>([\s\S]*)<\/script>/m);
+
+	if (!templateMatch) {
+		return source;
+	}
+
+	let importSection = `<script setup lang="ts">
+import { ref } from 'vue'
+import { ConfirmDialog } from '@cosy/index_vue'
+`;
+
+	// 从源码中提取导入语句（除了组件的导入和app.css）
+	if (scriptMatch && scriptMatch[1]) {
+		const importLines = scriptMatch[1]
+			.split('\n')
+			.filter(
+				(line) =>
+					line.includes('import') &&
+					!line.includes('../../app.css') &&
+					!line.includes('ConfirmDialog')
+			);
+
+		if (importLines.length > 0) {
+			importSection += importLines.join('\n') + '\n';
+		}
+	}
+
+	importSection += '</script>\n\n';
+
+	// 提取模板内容，并替换组件路径
+	const templateContent = templateMatch[1].replace('../ConfirmDialog.vue', 'ConfirmDialog');
+
+	return importSection + '<template>' + templateContent + '</template>';
+}
+
+// 导出主组件
+export { default as ConfirmDialog } from './ConfirmDialog.vue';
+
+// 导出示例组件
+export const ConfirmDialogExamples = {
+	Basic,
+	CustomButtons,
+};
+
+// 导出示例源代码
+export const ConfirmDialogExampleCodes = {
+	Basic: extractSimpleExample(BasicSource),
+	CustomButtons: extractSimpleExample(CustomButtonsSource),
+};

package/dist/vue/Icons/InboxArchiveIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="inboxArchive" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/SmartHero/Basic.vue

@@ -0,0 +1,14 @@
+<template>
+    <SmartHero title="智能英雄组件" description="一个现代化的页面英雄区域组件，适合用作页面顶部的展示区域" :links="links" />
+</template>
+
+<script setup lang="ts">
+import '../../style';
+import { ref } from 'vue';
+import SmartHero from './SmartHero.vue';
+
+const links = ref([
+    { text: '了解更多', href: '#' },
+    { text: '查看文档', href: '#docs' }
+]);
+</script>

package/dist/vue/SmartHero/SmartHero.vue

@@ -0,0 +1,132 @@
+<!--
+@component SmartHero
+
+@description
+SmartHero 组件是一个响应式的英雄区域组件，用于展示标题、描述、图片和操作链接。
+支持自定义内容插槽，适合用作页面顶部的展示区域。
+
+@usage
+基本用法：
+```vue
+<SmartHero
+  title="智能英雄组件"
+  description="一个现代化的页面英雄区域组件"
+  :links="[{text: '了解更多', href: '#'}]"
+/>
+```
+
+带图片：
+```vue
+<SmartHero
+  title="智能英雄组件"
+  description="一个现代化的页面英雄区域组件"
+  :image="{src: '/images/hero.png', alt: '英雄图片'}"
+  :links="[{text: '了解更多', href: '#'}, {text: '查看文档', href: '#docs'}]"
+/>
+```
+
+使用插槽：
+```vue
+<SmartHero
+  title="智能英雄组件"
+  description="一个现代化的页面英雄区域组件"
+  :links="[{text: '了解更多', href: '#'}]"
+>
+  <template #app>
+    <div class="demo-app">自定义内容</div>
+  </template>
+</SmartHero>
+```
+
+@props
+@prop {string} title - 标题文本
+@prop {string} description - 描述文本
+@prop {object} [image] - 图片配置对象，包含src和alt属性
+@prop {array} links - 链接数组，每个链接包含text和href属性
+
+@slots
+@slot app - 用于插入自定义应用或组件展示
+-->
+
+<script setup lang="ts">
+import '../../style';
+import type { PropType } from 'vue';
+import LinkButton from '../Buttons/LinkButton.vue';
+
+interface Link {
+    text: string;
+    href: string;
+}
+
+interface ImageProps {
+    src: string;
+    alt: string;
+}
+
+defineProps({
+    title: {
+        type: String,
+        required: true
+    },
+    description: {
+        type: String,
+        required: true
+    },
+    image: {
+        type: Object as PropType<ImageProps>,
+        required: false,
+        default: () => ({
+            src: '',
+            alt: ''
+        })
+    },
+    links: {
+        type: Array as PropType<Link[]>,
+        required: true,
+        default: () => []
+    }
+});
+</script>
+
+<template>
+    <div class="cosy:py-16 cosy:px-8 cosy:text-center cosy:w-full cosy:min-h-screen cosy:relative cosy:overflow-hidden">
+        <div class="cosy:relative cosy:z-10 cosy:rounded-lg cosy:w-full cosy:h-full">
+            <template v-if="image.src">
+                <img :src="image.src" :alt="image.alt" class="cosy:h-1/2 cosy:mx-auto cosy:mb-8 cosy:drop-shadow-xl">
+            </template>
+
+            <h2 class="cosy:text-4xl cosy:mb-4 cosy:animate-fade-up">
+                {{ title }}
+            </h2>
+            <p class="cosy:text-lg cosy:mb-12 cosy:text-center cosy:max-w-2xl cosy:mx-auto">
+                {{ description }}
+            </p>
+
+            <div class="cosy:my-12 cosy:w-full">
+                <slot name="app" />
+            </div>
+
+            <div class="cosy:flex cosy:flex-row cosy:justify-center cosy:gap-8 cosy:mx-auto cosy:w-full">
+                <LinkButton v-for="link in links" :key="link.text" :text="link.text" :href="link.href" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+@keyframes fade-up {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.cosy\:animate-fade-up {
+    animation: fade-up 0.8s ease-out forwards;
+}
+</style>

package/dist/vue/SmartHero/WithCustomContent.vue

@@ -0,0 +1,36 @@
+<template>
+    <SmartHero title="支持自定义内容" description="这个示例展示了如何使用插槽添加自定义内容" :links="links">
+        <template #app>
+            <div class="cosy:p-6 cosy:bg-base-200 cosy:rounded-xl cosy:max-w-lg cosy:mx-auto cosy:shadow-lg">
+                <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-left">
+                    <div class="cosy:font-mono cosy:text-sm cosy:mb-2 cosy:text-success">// 示例代码</div>
+                    <div class="cosy:font-mono cosy:text-sm">
+                        <div><span class="cosy:text-primary">&lt;SmartHero</span></div>
+                        <div class="cosy:pl-4"><span class="cosy:text-info">title</span>=<span
+                                class="cosy:text-warning">"支持自定义内容"</span></div>
+                        <div class="cosy:pl-4"><span class="cosy:text-info">description</span>=<span
+                                class="cosy:text-warning">"自定义内容示例"</span></div>
+                        <div class="cosy:pl-4">...</div>
+                        <div><span class="cosy:text-primary">&gt;</span></div>
+                        <div class="cosy:pl-2"><span class="cosy:text-primary">&lt;template</span> <span
+                                class="cosy:text-info">#app</span><span class="cosy:text-primary">&gt;</span></div>
+                        <div class="cosy:pl-4">// 您的自定义内容</div>
+                        <div class="cosy:pl-2"><span class="cosy:text-primary">&lt;/template&gt;</span></div>
+                        <div><span class="cosy:text-primary">&lt;/SmartHero&gt;</span></div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </SmartHero>
+</template>
+
+<script setup lang="ts">
+import '../../style';
+import { ref } from 'vue';
+import SmartHero from './SmartHero.vue';
+
+const links = ref([
+    { text: '了解插槽', href: '#slots' },
+    { text: '查看文档', href: '#docs' }
+]);
+</script>

package/dist/vue/SmartHero/WithImage.vue

@@ -0,0 +1,19 @@
+<template>
+    <SmartHero title="带图片的英雄组件" description="这是一个包含图片的英雄组件示例，展示了如何在顶部添加图片" :image="image" :links="links" />
+</template>
+
+<script setup lang="ts">
+import '../../style';
+import { ref } from 'vue';
+import SmartHero from './SmartHero.vue';
+
+const image = ref({
+    src: 'https://via.placeholder.com/600x300/4F46E5/FFFFFF?text=Smart+Hero',
+    alt: '英雄图片示例'
+});
+
+const links = ref([
+    { text: '了解更多', href: '#' },
+    { text: '立即开始', href: '#get-started' }
+]);
+</script>

package/dist/vue/SmartHero/index.ts

@@ -0,0 +1,46 @@
+import Basic from './Basic.vue';
+import WithImage from './WithImage.vue';
+import WithCustomContent from './WithCustomContent.vue';
+import BasicSource from './Basic.vue?raw';
+import WithImageSource from './WithImage.vue?raw';
+import WithCustomContentSource from './WithCustomContent.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 SmartHero from '[^']+';/g, "import { SmartHero } from 'cosy-ui';")
+			.trim();
+	}
+
+	// 创建简化版本的代码
+	return `<template>${template}</template>
+
+<script setup lang="ts">${script}</script>`;
+}
+
+// 导出主组件
+export { default as SmartHero } from './SmartHero.vue';
+
+// 将示例组件整合为一个对象导出
+export const SmartHeroExamples = {
+	Basic,
+	WithImage,
+	WithCustomContent,
+};
+
+// 导出示例组件的源代码（简化版本）
+export const SmartHeroExampleCodes = {
+	Basic: extractSimpleExample(BasicSource),
+	WithImage: extractSimpleExample(WithImageSource),
+	WithCustomContent: extractSimpleExample(WithCustomContentSource),
+};

package/dist/vue/SmartLink.vue

@@ -7,15 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <a
-    :href="href"
-    :target="external ? '_blank' : undefined"
-    :rel="external ? 'noopener noreferrer' : undefined"
-    :class="{
-      'no-underline rounded-md p-1 transition-all duration-300 hover:text-primary/80': true,
-      [externalClass]: external
-    }"
-  >
-    <slot />
-  </a>
+    <a :href="href" :target="external ? '_blank' : undefined" :rel="external ? 'noopener noreferrer' : undefined"
+        :class="{
+            'cosy:no-underline cosy:rounded-md cosy:p-1 cosy:transition-all cosy:duration-300 cosy:hover:text-primary/80': true,
+            [externalClass]: external
+        }">
+        <slot />
+    </a>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@coffic/cosy-ui",
-    "version": "0.6.18",
+    "version": "0.6.20",
     "description": "An astro component library",
     "author": {
         "name": "nookery",

package/dist/vue/ConfirmDialog.vue

@@ -1,76 +0,0 @@
-<template>
-  <Transition name="fade">
-    <div
-      v-if="modelValue"
-      class="fixed inset-0 z-50 flex items-center justify-center"
-    >
-      <!-- 背景遮罩 -->
-      <div
-        class="absolute inset-0 bg-black/20 dark:bg-black/40 backdrop-blur-sm"
-        @click="$emit('update:modelValue', false)"
-      />
-
-      <!-- 对话框 -->
-      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl w-[400px] transform transition-all">
-        <!-- 内容区域 -->
-        <div class="p-6">
-          <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
-            {{ title }}
-          </h3>
-          <p class="text-gray-600 dark:text-gray-300">
-            {{ message }}
-          </p>
-        </div>
-
-        <!-- 按钮区域 -->
-        <div class="flex border-t border-gray-200 dark:border-gray-700">
-          <button
-            class="flex-1 px-4 py-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors rounded-bl-xl"
-            @click="$emit('update:modelValue', false)"
-          >
-            取消
-          </button>
-          <button
-            class="flex-1 px-4 py-3 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-colors border-l border-gray-200 dark:border-gray-700 rounded-br-xl font-medium"
-            @click="handleConfirm"
-          >
-            确认
-          </button>
-        </div>
-      </div>
-    </div>
-  </Transition>
-</template>
-
-<script setup>
-defineProps({
-    modelValue: Boolean,
-    title: {
-        type: String,
-        default: 'Confirm'
-    },
-    message: {
-        type: String,
-        default: 'Are you sure you want to confirm this action?'
-    }
-})
-
-const emit = defineEmits(['update:modelValue', 'confirm'])
-
-const handleConfirm = () => {
-    emit('update:modelValue', false)
-    emit('confirm')
-}
-</script>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-</style>