@coffic/cosy-ui 0.7.4 → 0.8.7

package/dist/banner-box-vue/ExampleCustomBg.vue

@@ -1,32 +0,0 @@
-<!--
-@component BannerBox.CustomBg
-
-@description
-BannerBox 组件的自定义背景示例，展示如何通过 backgroundClassIndex 属性设置背景样式。
-
-@usage
-```vue
-<BannerBoxExamples.CustomBg />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { defineComponent } from 'vue'
-import BannerBox from './BannerBox.vue'
-
-export default defineComponent({
-    name: 'BannerBoxCustomBgExample',
-    components: {
-        BannerBox
-    }
-})
-</script>
-
-<template>
-    <BannerBox :backgroundClassIndex="5">
-        <div class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[200px]">
-            <h2 class="cosy:text-3xl cosy:font-bold">自定义背景颜色</h2>
-        </div>
-    </BannerBox>
-</template>

package/dist/banner-box-vue/ExampleDisplayModeAlways.vue

@@ -1,34 +0,0 @@
-<!--
-@component BannerBox.DisplayModeAlways
-
-@description
-BannerBox 组件的"总是显示下载按钮"模式示例。
-
-@usage
-```vue
-<BannerBoxExamples.DisplayModeAlways />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { defineComponent } from 'vue'
-import BannerBox from './BannerBox.vue'
-
-export default defineComponent({
-    name: 'BannerBoxDisplayModeAlwaysExample',
-    components: {
-        BannerBox
-    }
-})
-</script>
-
-<template>
-    <div>
-        <BannerBox displayMode="always" :backgroundClassIndex="1">
-            <div class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[150px]">
-                <p>下载按钮始终可见</p>
-            </div>
-        </BannerBox>
-    </div>
-</template>

package/dist/banner-box-vue/ExampleDisplayModeHover.vue

@@ -1,34 +0,0 @@
-<!--
-@component BannerBox.DisplayModeHover
-
-@description
-BannerBox 组件的"悬停时显示下载按钮"模式示例，这是默认行为。
-
-@usage
-```vue
-<BannerBoxExamples.DisplayModeHover />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { defineComponent } from 'vue'
-import BannerBox from './BannerBox.vue'
-
-export default defineComponent({
-    name: 'BannerBoxDisplayModeHoverExample',
-    components: {
-        BannerBox
-    }
-})
-</script>
-
-<template>
-    <div>
-        <BannerBox displayMode="hover" :backgroundClassIndex="2">
-            <div class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[150px]">
-                <p>鼠标悬停时显示下载按钮</p>
-            </div>
-        </BannerBox>
-    </div>
-</template>

package/dist/banner-box-vue/ExampleDisplayModeNever.vue

@@ -1,34 +0,0 @@
-<!--
-@component BannerBox.DisplayModeNever
-
-@description
-BannerBox 组件的"不显示下载按钮"模式示例。
-
-@usage
-```vue
-<BannerBoxExamples.DisplayModeNever />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { defineComponent } from 'vue'
-import BannerBox from './BannerBox.vue'
-
-export default defineComponent({
-    name: 'BannerBoxDisplayModeNeverExample',
-    components: {
-        BannerBox
-    }
-})
-</script>
-
-<template>
-    <div>
-        <BannerBox displayMode="never" :backgroundClassIndex="3">
-            <div class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[150px]">
-                <p>不显示下载按钮</p>
-            </div>
-        </BannerBox>
-    </div>
-</template>

package/dist/banner-box-vue/ExampleImageExport.vue

@@ -1,37 +0,0 @@
-<!--
-@component BannerBox.ImageExport
-
-@description
-BannerBox 组件的导出为图片示例，展示如何使用图片导出功能。
-
-@usage
-```vue
-<BannerBoxExamples.ImageExport />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { defineComponent } from 'vue'
-import BannerBox from './BannerBox.vue'
-
-export default defineComponent({
-    name: 'BannerBoxImageExportExample',
-    components: {
-        BannerBox
-    }
-})
-</script>
-
-<template>
-    <div>
-        <p class="cosy:mb-4">悬停在左上角显示下载按钮，点击可下载当前内容为图片。</p>
-        <BannerBox :backgroundClassIndex="8">
-            <div
-                class="cosy:flex cosy:flex-col cosy:items-center cosy:justify-center cosy:min-h-[200px] cosy:p-8 cosy:text-center">
-                <h2 class="cosy:text-3xl cosy:font-bold cosy:mb-4">可导出为图片的内容</h2>
-                <p class="cosy:text-lg">适用于创建社交媒体分享图、营销材料等场景</p>
-            </div>
-        </BannerBox>
-    </div>
-</template>

package/dist/banner-box-vue/ExampleSizePreset.vue

@@ -1,35 +0,0 @@
-<!--
-@component BannerBox.SizePreset
-
-@description
-BannerBox 组件的尺寸预设示例，展示如何使用尺寸选择功能。
-
-@usage
-```vue
-<BannerBoxExamples.SizePreset />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { defineComponent } from 'vue'
-import BannerBox from './BannerBox.vue'
-
-export default defineComponent({
-    name: 'BannerBoxSizePresetExample',
-    components: {
-        BannerBox
-    }
-})
-</script>
-
-<template>
-    <div>
-        <p class="cosy:mb-4">悬停在左上角显示下载按钮，点击可切换尺寸。尺寸会保存在浏览器中。</p>
-        <BannerBox>
-            <div class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[200px]">
-                <h2 class="cosy:text-3xl cosy:font-bold">点击左上角按钮切换尺寸</h2>
-            </div>
-        </BannerBox>
-    </div>
-</template>

package/dist/banner-box-vue/FeatureCard.vue

@@ -1,190 +0,0 @@
-<script setup lang="ts">
-import { computed, type Component } from 'vue';
-import {
-    // 开发相关
-    RiGithubFill,
-    RiGitBranchLine,
-    RiTerminalBoxLine,
-    RiCommandLine,
-    RiCodeSSlashLine,
-    RiBracesLine,
-    RiDatabase2Line,
-    RiServerLine,
-    // 文档相关
-    RiBookOpenLine,
-    RiFileTextLine,
-    RiArticleLine,
-    RiDraftLine,
-    RiFileListLine,
-    // 媒体相关
-    RiImage2Line,
-    RiVideoLine,
-    RiMusic2Line,
-    RiPlayCircleLine,
-    RiMovieLine,
-    // 社交相关
-    RiUserLine,
-    RiTeamLine,
-    RiChat1Line,
-    RiMessage2Line,
-    RiShareLine,
-    // 工具相关
-    RiToolsLine,
-    RiSettings4Line,
-    RiDashboardLine,
-    RiAppsLine,
-    RiPlugLine,
-    // 安全相关
-    RiShieldLine,
-    RiLockLine,
-    RiKeyLine,
-    RiUserSettingsLine,
-    // 云服务相关
-    RiCloudLine,
-    RiUploadCloud2Line,
-    RiDownloadCloud2Line,
-    RiCloudOffLine,
-    // 设备相关
-    RiSmartphoneLine,
-    RiTabletLine,
-    RiComputerLine,
-    RiWifiLine,
-    // 数据相关
-    RiPieChartLine,
-    RiLineChartLine,
-    RiBarChartLine,
-    // AI/机器学习相关
-    RiRobot2Line,
-    RiBrainLine,
-    RiCpuLine,
-    // 其他常用
-    RiRocketLine,
-    RiLightbulbLine,
-    RiStarLine,
-    RiHeartLine,
-    RiThumbUpLine
-} from '@remixicon/vue';
-
-// 预设图标映射
-const presetIcons = {
-    // 开发类
-    github: RiGithubFill,
-    git: RiGitBranchLine,
-    terminal: RiTerminalBoxLine,
-    command: RiCommandLine,
-    code: RiCodeSSlashLine,
-    api: RiBracesLine,
-    database: RiDatabase2Line,
-    server: RiServerLine,
-
-    // 文档类
-    book: RiBookOpenLine,
-    file: RiFileTextLine,
-    article: RiArticleLine,
-    draft: RiDraftLine,
-    list: RiFileListLine,
-
-    // 媒体类
-    image: RiImage2Line,
-    video: RiVideoLine,
-    music: RiMusic2Line,
-    play: RiPlayCircleLine,
-    movie: RiMovieLine,
-
-    // 社交类
-    user: RiUserLine,
-    team: RiTeamLine,
-    chat: RiChat1Line,
-    message: RiMessage2Line,
-    share: RiShareLine,
-
-    // 工具类
-    tools: RiToolsLine,
-    settings: RiSettings4Line,
-    dashboard: RiDashboardLine,
-    apps: RiAppsLine,
-    plugin: RiPlugLine,
-
-    // 安全类
-    shield: RiShieldLine,
-    lock: RiLockLine,
-    key: RiKeyLine,
-    security: RiUserSettingsLine,
-
-    // 云服务类
-    cloud: RiCloudLine,
-    upload: RiUploadCloud2Line,
-    download: RiDownloadCloud2Line,
-    offline: RiCloudOffLine,
-
-    // 设备类
-    mobile: RiSmartphoneLine,
-    tablet: RiTabletLine,
-    computer: RiComputerLine,
-    wifi: RiWifiLine,
-
-    // 数据类
-    chart: RiPieChartLine,
-    line: RiLineChartLine,
-    bar: RiBarChartLine,
-    data: RiDatabase2Line,
-
-    // AI/机器学习类
-    robot: RiRobot2Line,
-    brain: RiBrainLine,
-    cpu: RiCpuLine,
-
-    // 其他常用
-    rocket: RiRocketLine,
-    idea: RiLightbulbLine,
-    star: RiStarLine,
-    heart: RiHeartLine,
-    like: RiThumbUpLine
-} as const;
-
-type PresetIconType = keyof typeof presetIcons;
-
-interface Props {
-    title: string;
-    description?: string;
-    link?: string;
-    emoji?: string;
-    icon?: Component; // 自定义图标组件
-    presetIcon?: PresetIconType; // 预设图标名称
-}
-
-const props = defineProps<Props>();
-
-// 获取预设图标组件
-const getPresetIcon = computed(() => {
-    if (!props.presetIcon) return null;
-    return presetIcons[props.presetIcon];
-});
-</script>
-
-<template>
-    <component :is="link ? 'a' : 'div'" :href="link || undefined" :target="link ? '_blank' : undefined"
-        :rel="link ? 'noopener noreferrer' : undefined" :class="[
-            'cosy:card cosy:no-underline cosy:bg-base-100/10 cosy:backdrop-blur-lg cosy:p-8 cosy:transition-all cosy:duration-300 cosy:hover:-translate-y-1 cosy:shadow-lg',
-            {
-                'cosy:hover:bg-primary/15 cosy:cursor-pointer': link,
-                'cosy:cursor-default': !link
-            }
-        ]">
-        <div class="card-body cosy:p-0">
-            <div class="cosy:mb-4">
-                <component :is="icon" v-if="icon" class="cosy:text-4xl cosy:text-base-content" />
-                <component :is="getPresetIcon" v-else-if="presetIcon" class="cosy:text-4xl cosy:text-base-content" />
-                <div v-else class="cosy:text-4xl cosy:text-base-content">
-                    {{ emoji }}
-                </div>
-            </div>
-            <h3 class="card-title cosy:text-lg cosy:font-medium cosy:text-base-content">
-                {{ title }}
-            </h3>
-            <p v-if="description" class="cosy:text-base-content/70">
-                {{ description }}
-            </p>
-        </div>
-    </component>
-</template>

package/dist/banner-box-vue/SmartBanner.vue

@@ -1,44 +0,0 @@
-<!--
-@component BannerBox.SmartBanner
-
-@description
-BannerBox 组件的智能横幅模式示例，展示如何通过 title、description 和 features 属性创建结构化内容。
-
-@usage
-```vue
-<BannerBoxExamples.SmartBanner />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { defineComponent } from 'vue'
-import BannerBox from './BannerBox.vue'
-
-export default defineComponent({
-    name: 'BannerBoxSmartBannerExample',
-    components: {
-        BannerBox
-    }
-})
-</script>
-
-<template>
-    <BannerBox title="我们的产品特性" description="探索产品提供的所有强大功能" :features="[
-        {
-            emoji: '⚡',
-            title: '快速响应',
-            link: '#speed'
-        },
-        {
-            emoji: '🔒',
-            title: '安全可靠',
-            link: '#security'
-        },
-        {
-            emoji: '🌐',
-            title: '全球支持',
-            link: '#global'
-        }
-    ]" />
-</template>

package/dist/banner-box-vue/bgStyles.ts

@@ -1,55 +0,0 @@
-/**
- * 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/banner-box-vue/index.ts

@@ -1,48 +0,0 @@
-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 './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 './ExampleSizePreset.vue?raw';
-import ImageExportSource from './ExampleImageExport.vue?raw';
-import { extractSimpleExample } from '../../utils/component';
-
-// 获取 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,
-	DisplayModeAlways,
-	DisplayModeHover,
-	DisplayModeNever,
-	SmartBanner,
-	SizePreset,
-	ImageExport,
-};
-
-// 导出示例源代码
-export const BannerBoxExampleCodes = {
-	Basic: extractSimpleExample(BasicSource, 'BannerBox'),
-	CustomBg: extractSimpleExample(CustomBgSource, 'BannerBox'),
-	DisplayModeAlways: extractSimpleExample(DisplayModeAlwaysSource, 'BannerBox'),
-	DisplayModeHover: extractSimpleExample(DisplayModeHoverSource, 'BannerBox'),
-	DisplayModeNever: extractSimpleExample(DisplayModeNeverSource, 'BannerBox'),
-	SmartBanner: extractSimpleExample(SmartBannerSource, 'BannerBox'),
-	SizePreset: extractSimpleExample(SizePresetSource, 'BannerBox'),
-	ImageExport: extractSimpleExample(ImageExportSource, 'BannerBox'),
-};

package/dist/banner-box-vue/sizePresets.ts

@@ -1,23 +0,0 @@
-/**
- * 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]' },
-];