@coffic/cosy-ui 0.6.14 → 0.6.18

package/dist/vue/BannerBox/bgStyles.ts

@@ -0,0 +1,55 @@
+/**
+ * BannerBox组件的背景样式类列表
+ * 包含多种渐变和纯色背景
+ */
+export const bgClasses = [
+	// 半透明渐变背景
+	'cosy:bg-gradient-to-b cosy:from-blue-100/50 cosy:to-blue-200/50 dark:cosy:from-blue-500/10 dark:cosy:to-blue-200/10',
+	'cosy:bg-gradient-to-b cosy:from-blue-200/50 cosy:to-purple-200/50 dark:cosy:from-blue-500/10 dark:cosy:to-purple-200/10',
+	'cosy:bg-gradient-to-b cosy:from-yellow-200/50 cosy:to-green-200/50 dark:cosy:from-yellow-500/10 dark:cosy:to-green-200/10',
+	'cosy:bg-gradient-to-b cosy:from-teal-200/50 cosy:to-blue-200/50 dark:cosy:from-teal-500/10 dark:cosy:to-blue-200/10',
+	'cosy:bg-gradient-to-b cosy:from-pink-200/50 cosy:to-indigo-200/20 dark:cosy:from-pink-500/10 dark:cosy:to-indigo-200/10',
+	'cosy:bg-gradient-to-b cosy:from-red-200/50 cosy:to-orange-200/50 dark:cosy:from-red-500/10 dark:cosy:to-orange-200/10',
+	'cosy:bg-gradient-to-b cosy:from-orange-200/50 cosy:to-yellow-200/50 dark:cosy:from-orange-500/10 dark:cosy:to-yellow-200/10',
+	'cosy:bg-gradient-to-b cosy:from-green-200/50 cosy:to-teal-200/50 dark:cosy:from-green-500/10 dark:cosy:to-teal-200/10',
+
+	// 不透明的背景
+	'cosy:bg-gradient-to-b cosy:from-blue-100 cosy:to-blue-200 dark:cosy:from-blue-500 dark:cosy:to-blue-200',
+	'cosy:bg-gradient-to-b cosy:from-blue-200 cosy:to-purple-200 dark:cosy:from-blue-500 dark:cosy:to-purple-200',
+	'cosy:bg-gradient-to-b cosy:from-yellow-200 cosy:to-green-200 dark:cosy:from-yellow-500 dark:cosy:to-green-200',
+	'cosy:bg-gradient-to-b cosy:from-teal-200 cosy:to-blue-200 dark:cosy:from-teal-500 dark:cosy:to-blue-200',
+	'cosy:bg-gradient-to-b cosy:from-pink-200 cosy:to-red-200 dark:cosy:from-pink-500 dark:cosy:to-red-200',
+	'cosy:bg-gradient-to-b cosy:from-red-200 cosy:to-orange-200 dark:cosy:from-red-500 dark:cosy:to-orange-200',
+	'cosy:bg-gradient-to-b cosy:from-orange-200 cosy:to-yellow-200 dark:cosy:from-orange-500 dark:cosy:to-yellow-200',
+	'cosy:bg-gradient-to-b cosy:from-green-200 cosy:to-teal-200 dark:cosy:from-green-500 dark:cosy:to-teal-200',
+
+	// 不透明的深色背景
+	'cosy:bg-gradient-to-b cosy:from-blue-900 cosy:to-blue-200 dark:cosy:from-blue-900 dark:cosy:to-blue-200',
+	'cosy:bg-gradient-to-b cosy:from-blue-900 cosy:to-purple-200 dark:cosy:from-blue-900 dark:cosy:to-purple-200',
+	'cosy:bg-gradient-to-b cosy:from-yellow-900 cosy:to-green-200 dark:cosy:from-yellow-900 dark:cosy:to-green-200',
+	'cosy:bg-gradient-to-b cosy:from-teal-900 cosy:to-blue-200 dark:cosy:from-teal-900 dark:cosy:to-blue-200',
+	'cosy:bg-gradient-to-b cosy:from-pink-900 cosy:to-red-200 dark:cosy:from-pink-900 dark:cosy:to-red-200',
+	'cosy:bg-gradient-to-b cosy:from-red-900 cosy:to-orange-200 dark:cosy:from-red-900 dark:cosy:to-orange-200',
+	'cosy:bg-gradient-to-b cosy:from-orange-900 cosy:to-yellow-200 dark:cosy:from-orange-900 dark:cosy:to-yellow-200',
+	'cosy:bg-gradient-to-b cosy:from-green-900 cosy:to-teal-900 dark:cosy:from-green-900 dark:cosy:to-teal-900',
+
+	// 不透明的渐变背景
+	'cosy:bg-gradient-to-br cosy:from-emerald-400 cosy:to-cyan-400 dark:cosy:from-emerald-600 dark:cosy:to-cyan-600',
+	'cosy:bg-gradient-to-br cosy:from-violet-400 cosy:to-fuchsia-400 dark:cosy:from-violet-600 dark:cosy:to-fuchsia-600',
+	'cosy:bg-gradient-to-br cosy:from-amber-400 cosy:to-orange-400 dark:cosy:from-amber-600 dark:cosy:to-orange-600',
+	'cosy:bg-gradient-to-br cosy:from-rose-400 cosy:to-pink-400 dark:cosy:from-rose-600 dark:cosy:to-pink-600',
+	'cosy:bg-gradient-to-br cosy:from-sky-400 cosy:to-indigo-400 dark:cosy:from-sky-600 dark:cosy:to-indigo-600',
+	'cosy:bg-gradient-to-br cosy:from-lime-400 cosy:to-emerald-400 dark:cosy:from-lime-600 dark:cosy:to-emerald-600',
+	'cosy:bg-gradient-to-br cosy:from-purple-400 cosy:to-indigo-400 dark:cosy:from-purple-600 dark:cosy:to-indigo-600',
+	'cosy:bg-gradient-to-br cosy:from-blue-400 cosy:to-violet-400 dark:cosy:from-blue-600 dark:cosy:to-violet-600',
+
+	// 纯色背景
+	'cosy:bg-emerald-400 dark:cosy:bg-emerald-600',
+	'cosy:bg-violet-400 dark:cosy:bg-violet-600',
+	'cosy:bg-amber-400 dark:cosy:bg-amber-600',
+	'cosy:bg-rose-400 dark:cosy:bg-rose-600',
+	'cosy:bg-sky-400 dark:cosy:bg-sky-600',
+	'cosy:bg-lime-400 dark:cosy:bg-lime-600',
+	'cosy:bg-purple-400 dark:cosy:bg-purple-600',
+	'cosy:bg-blue-400 dark:cosy:bg-blue-600',
+];

package/dist/vue/BannerBox/index.ts

@@ -1,17 +1,19 @@
-import Basic from './Basic.vue';
-import CustomBg from './CustomBg.vue';
-import DisplayMode from './DisplayMode.vue';
+import Basic from './ExampleBasic.vue';
+import CustomBg from './ExampleCustomBg.vue';
+import DisplayModeAlways from './ExampleDisplayModeAlways.vue';
+import DisplayModeHover from './ExampleDisplayModeHover.vue';
+import DisplayModeNever from './ExampleDisplayModeNever.vue';
 import SmartBanner from './SmartBanner.vue';
-import SizePreset from './SizePreset.vue';
-import ImageExport from './ImageExport.vue';
-import CustomComponent from './CustomComponent.vue';
-import BasicSource from './Basic.vue?raw';
-import CustomBgSource from './CustomBg.vue?raw';
-import DisplayModeSource from './DisplayMode.vue?raw';
+import SizePreset from './ExampleSizePreset.vue';
+import ImageExport from './ExampleImageExport.vue';
+import BasicSource from './ExampleBasic.vue?raw';
+import CustomBgSource from './ExampleCustomBg.vue?raw';
+import DisplayModeAlwaysSource from './ExampleDisplayModeAlways.vue?raw';
+import DisplayModeHoverSource from './ExampleDisplayModeHover.vue?raw';
+import DisplayModeNeverSource from './ExampleDisplayModeNever.vue?raw';
 import SmartBannerSource from './SmartBanner.vue?raw';
-import SizePresetSource from './SizePreset.vue?raw';
-import ImageExportSource from './ImageExport.vue?raw';
-import CustomComponentSource from './CustomComponent.vue?raw';
+import SizePresetSource from './ExampleSizePreset.vue?raw';
+import ImageExportSource from './ExampleImageExport.vue?raw';
 
 // 提取简单示例源代码函数
 function extractSimpleExample(source: string): string {
@@ -52,25 +54,30 @@ import { BannerBox } from 'cosy-ui'
 // 获取 BannerBox 和 FeatureCard 组件
 export { default as BannerBox } from './BannerBox.vue';
 export { default as FeatureCard } from './FeatureCard.vue';
+export { default as DownloadButton } from './DownloadButton.vue';
+export { bgClasses } from './bgStyles';
+export { sizePresets, type SizePreset } from './sizePresets';
 
 // 导出示例组件
 export const BannerBoxExamples = {
 	Basic,
 	CustomBg,
-	DisplayMode,
+	DisplayModeAlways,
+	DisplayModeHover,
+	DisplayModeNever,
 	SmartBanner,
 	SizePreset,
 	ImageExport,
-	CustomComponent,
 };
 
 // 导出示例源代码
 export const BannerBoxExampleCodes = {
 	Basic: extractSimpleExample(BasicSource),
 	CustomBg: extractSimpleExample(CustomBgSource),
-	DisplayMode: extractSimpleExample(DisplayModeSource),
+	DisplayModeAlways: extractSimpleExample(DisplayModeAlwaysSource),
+	DisplayModeHover: extractSimpleExample(DisplayModeHoverSource),
+	DisplayModeNever: extractSimpleExample(DisplayModeNeverSource),
 	SmartBanner: extractSimpleExample(SmartBannerSource),
 	SizePreset: extractSimpleExample(SizePresetSource),
 	ImageExport: extractSimpleExample(ImageExportSource),
-	CustomComponent: extractSimpleExample(CustomComponentSource),
 };

package/dist/vue/BannerBox/sizePresets.ts

@@ -0,0 +1,23 @@
+/**
+ * BannerBox组件的尺寸预设列表
+ * 包含各种常用尺寸和比例
+ */
+
+export interface SizePreset {
+	name: string;
+	width: string;
+	height: string;
+}
+
+export const sizePresets: SizePreset[] = [
+	{ name: 'Default', width: 'cosy:w-full', height: 'cosy:h-full' },
+	{ name: 'Square', width: 'cosy:w-[600px]', height: 'cosy:h-[600px]' },
+	{ name: 'Landscape', width: 'cosy:w-[800px]', height: 'cosy:h-[450px]' },
+	{ name: 'Portrait', width: 'cosy:w-[450px]', height: 'cosy:h-[800px]' },
+	{ name: 'Wide', width: 'cosy:w-[1200px]', height: 'cosy:h-[675px]' },
+	{ name: 'Banner', width: 'cosy:w-[1200px]', height: 'cosy:h-[300px]' },
+	{ name: '1280 × 800', width: 'cosy:w-[1280px]', height: 'cosy:h-[800px]' },
+	{ name: '1440 × 900', width: 'cosy:w-[1440px]', height: 'cosy:h-[900px]' },
+	{ name: '2560 × 1600', width: 'cosy:w-[2560px]', height: 'cosy:h-[1600px]' },
+	{ name: '2880 × 1800', width: 'cosy:w-[2880px]', height: 'cosy:h-[1800px]' },
+];

package/dist/vue/MacWindow/MacWindow.vue

@@ -19,6 +19,7 @@ MacWindow 组件模拟 macOS 风格的应用窗口，包含标题栏、工具栏
   <MacWindow
     title="设置"
     :tabs="['通用', '外观', '高级']"
+    defaultTab="外观"
     :onTabClick="(tab) => { 
       activeTab = tab;
       console.log('切换到标签:', tab);
@@ -34,7 +35,7 @@ MacWindow 组件模拟 macOS 风格的应用窗口，包含标题栏、工具栏
 import { ref } from 'vue';
 import { MacWindow } from 'cosy-ui';
 
-const activeTab = ref('通用');
+const activeTab = ref('外观');
 </script>
 ```
 
@@ -77,6 +78,7 @@ const activeTab = ref('通用');
 @prop {String} [title=''] - 窗口标题
 @prop {Boolean} [withShadow=true] - 是否显示阴影效果
 @prop {Array} [tabs=[]] - 标签页字符串数组，如 ['标签1', '标签2', '标签3']
+@prop {String} [defaultTab=''] - 默认选中的标签页
 @prop {Function} [onCloseWindow=null] - 关闭窗口时调用的函数
 @prop {Function} [onMinimizeWindow=null] - 最小化窗口时调用的函数
 @prop {Function} [onMaximizeWindow=null] - 最大化窗口时调用的函数
@@ -119,6 +121,10 @@ export default defineComponent({
             type: Array as PropType<string[]>,
             default: () => []
         },
+        defaultTab: {
+            type: String,
+            default: ''
+        },
         onCloseWindow: {
             type: Function,
             default: null
@@ -139,10 +145,10 @@ export default defineComponent({
     setup(props) {
         const showAlertDialog = ref(false)
         const alertMessage = ref('')
-        const activeTab = ref('')
+        const activeTab = ref(props.defaultTab)
 
-        // 默认选择第一个标签
-        if (props.tabs.length > 0 && !activeTab.value) {
+        // 如果没有设置默认标签或默认标签不在tabs中，则选择第一个标签
+        if ((!activeTab.value || !props.tabs.includes(activeTab.value)) && props.tabs.length > 0) {
             activeTab.value = props.tabs[0] as string
         }
 

package/dist/vue/MacWindow/WithTabs.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { MacWindow } from './index';
 
-const activeTab = ref('通用');
+const activeTab = ref('外观');
 
 const handleTabClick = (tab) => {
     activeTab.value = tab;
@@ -11,7 +11,7 @@ const handleTabClick = (tab) => {
 </script>
 
 <template>
-    <MacWindow title="设置" :tabs="['通用', '外观', '高级']" :onTabClick="handleTabClick">
+    <MacWindow title="设置" :tabs="['通用', '外观', '高级']" defaultTab="外观" :onTabClick="handleTabClick">
         <div class="cosy:p-4">
             <div v-if="activeTab === '通用'">通用设置内容</div>
             <div v-if="activeTab === '外观'">外观设置内容</div>

package/package.json

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

package/dist/vue/BannerBox/CustomComponent.vue

@@ -1,60 +0,0 @@
-<!--
-@component BannerBox.CustomComponent
-
-@description
-BannerBox 组件的自定义组件集成示例，展示如何在横幅中插入其他UI组件。
-
-@usage
-```vue
-<BannerBoxExamples.CustomComponent />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { defineComponent } from 'vue'
-import BannerBox from './BannerBox.vue'
-
-export default defineComponent({
-    name: 'BannerBoxCustomComponentExample',
-    components: {
-        BannerBox
-    },
-    setup() {
-        // 模拟按钮组件
-        const Button = {
-            props: ['text', 'variant', 'size'],
-            template: `
-                <button 
-                    class="cosy:btn"
-                    :class="[
-                        variant ? 'cosy:btn-' + variant : '',
-                        size ? 'cosy:btn-' + size : ''
-                    ]"
-                    @click="$emit('click')"
-                >
-                    {{ text }}
-                </button>
-            `
-        };
-
-        return {
-            Button
-        };
-    }
-})
-</script>
-
-<template>
-    <BannerBox title="带自定义组件的横幅" description="在横幅中集成其他UI组件" :features="[
-        {
-            emoji: '🎨',
-            title: '可定制UI',
-            link: '#customize'
-        }
-    ]" :customComponent="Button" :customComponentProps="{
-        text: '立即注册',
-        variant: 'primary',
-        size: 'lg'
-    }" />
-</template>

package/dist/vue/BannerBox/DisplayMode.vue

@@ -1,49 +0,0 @@
-<!--
-@component BannerBox.DisplayMode
-
-@description
-BannerBox 组件的显示模式示例，展示如何通过 displayMode 属性控制下载按钮的显示方式。
-
-@usage
-```vue
-<BannerBoxExamples.DisplayMode />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { defineComponent } from 'vue'
-import BannerBox from './BannerBox.vue'
-
-export default defineComponent({
-    name: 'BannerBoxDisplayModeExample',
-    components: {
-        BannerBox
-    }
-})
-</script>
-
-<template>
-    <div class="cosy:space-y-4">
-        <h3 class="cosy:text-lg cosy:font-medium">总是显示下载按钮</h3>
-        <BannerBox displayMode="always">
-            <div class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[100px]">
-                <p>下载按钮始终可见</p>
-            </div>
-        </BannerBox>
-
-        <h3 class="cosy:text-lg cosy:font-medium">悬停时显示下载按钮（默认）</h3>
-        <BannerBox displayMode="hover">
-            <div class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[100px]">
-                <p>鼠标悬停时显示下载按钮</p>
-            </div>
-        </BannerBox>
-
-        <h3 class="cosy:text-lg cosy:font-medium">隐藏下载按钮</h3>
-        <BannerBox displayMode="never">
-            <div class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[100px]">
-                <p>不显示下载按钮</p>
-            </div>
-        </BannerBox>
-    </div>
-</template>

package/dist/vue/shims-vue.d.ts

@@ -1,5 +0,0 @@
-declare module '*.vue' {
-	import { DefineComponent } from 'vue';
-	const component: DefineComponent<{}, {}, any>;
-	export default component;
-}