@coffic/cosy-ui 0.6.40 → 0.7.2

package/dist/vue/AlertDialog/Basic.vue

@@ -1,38 +0,0 @@
-<!--
-@component AlertDialog.Basic
-
-@description
-AlertDialog 组件的基础示例，展示最基本的对话框用法。
-
-@usage
-```vue
-<AlertDialogExamples.Basic />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { ref, defineComponent } from 'vue'
-import AlertDialog from './AlertDialog.vue'
-
-export default defineComponent({
-    name: 'AlertDialogBasicExample',
-    components: {
-        AlertDialog
-    },
-    setup() {
-        const isShow = ref(false)
-
-        return {
-            isShow
-        }
-    }
-})
-</script>
-
-<template>
-    <button @click="isShow = true" class="cosy:btn cosy:btn-primary">
-        显示对话框
-    </button>
-    <AlertDialog v-model="isShow" message="这是一条重要信息" />
-</template>

package/dist/vue/AlertDialog/Multilang.vue

@@ -1,48 +0,0 @@
-<!--
-@component AlertDialog.Multilang
-
-@description
-AlertDialog 组件的多语言示例，展示如何使用不同语言的对话框。
-
-@usage
-```vue
-<AlertDialogExamples.Multilang />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { ref, defineComponent } from 'vue'
-import AlertDialog from './AlertDialog.vue'
-
-export default defineComponent({
-    name: 'AlertDialogMultilangExample',
-    components: {
-        AlertDialog
-    },
-    setup() {
-        const isShowEn = ref(false)
-        const isShowJa = ref(false)
-
-        return {
-            isShowEn,
-            isShowJa
-        }
-    }
-})
-</script>
-
-<template>
-    <div class="flex gap-2">
-        <button @click="isShowEn = true" class="cosy:btn cosy:btn-primary">
-            English
-        </button>
-        <button @click="isShowJa = true" class="cosy:btn cosy:btn-primary">
-            日本語
-        </button>
-    </div>
-
-    <AlertDialog v-model="isShowEn" message="Important information" ok-text="OK" cancel-text="Cancel" />
-
-    <AlertDialog v-model="isShowJa" message="重要なお知らせ" ok-text="確認" cancel-text="キャンセル" />
-</template>

package/dist/vue/AlertDialog/index.ts

@@ -1,20 +0,0 @@
-import Basic from './Basic.vue';
-import Multilang from './Multilang.vue';
-import BasicSource from './Basic.vue?raw';
-import MultilangSource from './Multilang.vue?raw';
-import { extractSimpleExample } from '../../utils/component';
-
-// 导出主组件
-export { default as AlertDialog } from './AlertDialog.vue';
-
-// 导出示例组件
-export const AlertDialogExamples = {
-	Basic,
-	Multilang,
-};
-
-// 导出示例源代码
-export const AlertDialogExampleCodes = {
-	Basic: extractSimpleExample(BasicSource, 'Basic'),
-	Multilang: extractSimpleExample(MultilangSource, 'Multilang'),
-};

package/dist/vue/BannerBox/BannerBox.vue

@@ -1,296 +0,0 @@
-<!--
-@component BannerBox
-
-@description
-BannerBox 组件是一个可定制的横幅容器，支持自定义背景、尺寸调整和导出为图片功能。
-可以直接用作容器，也可以通过传入标题、描述和特性列表来显示内容。
-适用于创建营销横幅、特性展示、社交媒体卡片等内容。
-
-@usage
-基本用法：
-```vue
-<BannerBox>
-  <div>横幅内容</div>
-</BannerBox>
-```
-
-使用标题和描述：
-```vue
-<BannerBox
-  title="我的横幅标题"
-  description="这是一段描述文字"
-  :features="[
-    { emoji: '🚀', title: '高性能' },
-    { emoji: '⚡', title: '快速响应' },
-    { emoji: '🔒', title: '安全可靠' }
-  ]"
-/>
-```
-
-自定义背景：
-```vue
-<BannerBox :backgroundClassIndex="5">
-  <div>自定义背景的横幅</div>
-</BannerBox>
-```
-
-设置下载按钮显示模式：
-```vue
-<BannerBox displayMode="always">
-  <div>总是显示下载按钮</div>
-</BannerBox>
-```
-
-@props
-@prop {String} [displayMode='hover'] - 下载按钮显示模式：'always'(总是显示),'hover'(悬停显示),'never'(不显示)
-@prop {Number} [backgroundClassIndex=0] - 背景样式索引，对应内置的背景样式列表
-@prop {String} [title=''] - 横幅标题
-@prop {String} [description=''] - 横幅描述
-@prop {Array} [features=[]] - 特性列表，每项包含{emoji, title, link}
-
-@slots
-@slot default - 横幅内容
--->
-
-<script lang="ts">
-import { ref, onMounted, watch, onUnmounted, computed, defineComponent } from 'vue';
-import { RiDownloadLine } from '@remixicon/vue';
-import { toPng } from 'html-to-image';
-import FeatureCard from './FeatureCard.vue';
-import DownloadButton from './DownloadButton.vue';
-import { bgClasses } from './bgStyles';
-import { sizePresets } from './sizePresets';
-import '../../style'
-
-export interface IFeature {
-    emoji: string;
-    title: string;
-    link?: string;
-}
-
-export default defineComponent({
-    name: 'BannerBox',
-    components: {
-        RiDownloadLine,
-        FeatureCard,
-        DownloadButton
-    },
-    props: {
-        displayMode: {
-            type: String,
-            default: 'hover',
-            validator: (value: string) => ['always', 'hover', 'never'].includes(value)
-        },
-        backgroundClassIndex: {
-            type: Number,
-            default: 0
-        },
-        title: {
-            type: String,
-            default: ''
-        },
-        description: {
-            type: String,
-            default: ''
-        },
-        features: {
-            type: Array as () => IFeature[],
-            default: () => []
-        },
-    },
-    setup(props) {
-        const componentRef = ref<HTMLElement | null>(null);
-        const isDropdownOpen = ref(false);
-        const isLoadedFromStorage = ref(false);
-        const selectedBgIndex = ref(props.backgroundClassIndex);
-
-        const selectedSize = ref(sizePresets[0]);
-
-        const toggleDropdown = () => {
-            console.log("Toggle Dropdown")
-            isDropdownOpen.value = !isDropdownOpen.value;
-        };
-
-        // 监听尺寸变化并保存到 localStorage
-        watch(selectedSize, (newSize) => {
-            localStorage.setItem('bannerBoxSize', JSON.stringify(newSize));
-            // 当尺寸改变时，发出事件通知其他组件
-            window.dispatchEvent(new CustomEvent('bannerBoxSizeChange', {
-                detail: newSize
-            }));
-            // 设置为已加载状态，显示尺寸标签
-            isLoadedFromStorage.value = true;
-        });
-
-        // 创建自定义事件处理函数
-        const handleSizeClear = () => {
-            selectedSize.value = sizePresets[0];
-            isLoadedFromStorage.value = false;
-        };
-
-        // 处理尺寸变化的事件
-        const handleSizeChange = (event: Event) => {
-            const customEvent = event as CustomEvent;
-            selectedSize.value = customEvent.detail;
-            isLoadedFromStorage.value = true;
-        };
-
-        onMounted(() => {
-            const savedSize = localStorage.getItem('bannerBoxSize');
-            if (savedSize) {
-                const parsed = JSON.parse(savedSize);
-                const found = sizePresets.find(preset => preset.name === parsed.name);
-                if (found) {
-                    selectedSize.value = found;
-                    isLoadedFromStorage.value = true;
-                }
-            }
-
-            // 添加事件监听
-            window.addEventListener('bannerBoxClear', handleSizeClear);
-            window.addEventListener('bannerBoxSizeChange', handleSizeChange);
-
-            // 恢复到简单的点击监听方式，但使用正确的选择器
-            document.addEventListener('click', (event) => {
-                if (!isDropdownOpen.value) return; // 如果下拉菜单已经关闭，就不需要处理
-
-                const target = event.target as HTMLElement;
-                // 检查点击的元素是否是下拉菜单中的元素
-                const isClickedOnDropdown = !!target.closest('[data-dropdown]');
-
-                if (!isClickedOnDropdown) {
-                    isDropdownOpen.value = false;
-                }
-            });
-        });
-
-        // Update downloadAsImage function to accept scale parameter
-        const downloadAsImage = async () => {
-            try {
-                const element = componentRef.value;
-                if (!element) {
-                    console.error('Component reference is null');
-                    return;
-                }
-
-                const dataUrl = await toPng(element, {
-                    backgroundColor: undefined,
-                    style: {
-                        transform: 'scale(1)',
-                        transformOrigin: 'top left'
-                    }
-                });
-
-                const link = document.createElement('a');
-                const fileName = `feature-${element.offsetWidth}x${element.offsetHeight}.png`;
-                link.download = fileName;
-                link.href = dataUrl;
-                link.click();
-                isDropdownOpen.value = false;
-            } catch (error) {
-                console.error('Failed to download image:', error);
-            }
-        };
-
-        const getBackgroundClass = (): string => {
-            return bgClasses[selectedBgIndex.value % bgClasses.length];
-        }
-
-        const clearStoredSize = () => {
-            localStorage.removeItem('bannerBoxSize');
-            // 触发自定义事件
-            window.dispatchEvent(new CustomEvent('bannerBoxClear'));
-            isDropdownOpen.value = false;
-        };
-
-        // 确保在组件卸载时清理事件监听器
-        onUnmounted(() => {
-            window.removeEventListener('bannerBoxClear', handleSizeClear);
-            window.removeEventListener('bannerBoxSizeChange', handleSizeChange);
-        });
-
-        // 计算下载按钮是否显示及其样式类
-        const downloadButtonStyles = computed(() => {
-            switch (props.displayMode) {
-                case 'always':
-                    return {
-                        show: true,
-                        classes: 'cosy:opacity-100'
-                    };
-                case 'hover':
-                    return {
-                        show: true,
-                        classes: 'cosy:opacity-0 cosy:hover:opacity-100 cosy:transition-opacity'
-                    };
-                case 'never':
-                    return {
-                        show: false,
-                        classes: ''
-                    };
-                default:
-                    return {
-                        show: true,
-                        classes: 'cosy:opacity-0 cosy:hover:opacity-100 cosy:transition-opacity'
-                    };
-            }
-        });
-
-        return {
-            componentRef,
-            isDropdownOpen,
-            isLoadedFromStorage,
-            selectedSize,
-            sizePresets,
-            selectedBgIndex,
-            toggleDropdown,
-            downloadAsImage,
-            getBackgroundClass,
-            clearStoredSize,
-            downloadButtonStyles,
-            bgClasses
-        };
-    }
-});
-</script>
-
-<template>
-    <div class="cosy:relative cosy:w-full cosy:rounded-2xl cosy:max-w-7xl cosy:mx-auto">
-        <!-- Size indicator -->
-        <div v-if="isLoadedFromStorage"
-            class="cosy:absolute cosy:top-4 cosy:right-4 cosy:bg-yellow-500/30 cosy:backdrop-blur-sm cosy:px-3 cosy:py-1 cosy:rounded-lg cosy:text-sm cosy:text-white">
-            {{ selectedSize.name }}
-        </div>
-
-        <!-- Download button with dropdown menu -->
-        <DownloadButton :displayMode="displayMode" :isLoadedFromStorage="isLoadedFromStorage"
-            :selectedSize="selectedSize" :selectedBgIndex="selectedBgIndex" @update:selectedSize="selectedSize = $event"
-            @update:selectedBgIndex="selectedBgIndex = $event" @clear-stored-size="clearStoredSize"
-            @download-image="downloadAsImage" />
-
-        <div ref="componentRef" class="cosy:flex cosy:p-8 cosy:rounded-2xl cosy:shadow" :class="[
-            getBackgroundClass(),
-            selectedSize.width,
-            selectedSize.height
-        ]">
-            <div class="cosy:py-16 cosy:px-8 cosy:text-center cosy:w-full cosy:rounded-2xl" data-type="smart-banner">
-                <h2 v-if="title.length > 0" class="cosy:text-4xl cosy:mb-4">
-                    {{ title }}
-                </h2>
-
-                <p v-if="description.length > 0" class="cosy:text-lg cosy:text-center cosy:max-w-2xl cosy:mx-auto">
-                    {{ description }}
-                </p>
-
-                <div v-if="features.length > 0"
-                    class="cosy:flex cosy:flex-row cosy:justify-center cosy:gap-8 cosy:mx-auto cosy:w-full cosy:mt-24">
-                    <FeatureCard v-for="feature in features" :key="feature.title" :emoji="feature.emoji"
-                        :title="feature.title" :link="feature.link" />
-                </div>
-
-                <div :class="{ 'cosy:mt-12': title.length > 0 || description.length > 0 || features.length > 0 }">
-                    <slot />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>

package/dist/vue/BannerBox/DownloadButton.vue

@@ -1,202 +0,0 @@
-<!--
-@component DownloadButton
-
-@description
-DownloadButton 组件提供了一个下载按钮，带有可展开的下拉菜单，用于调整尺寸、背景和下载图片。
-
-@usage
-基本用法：
-```vue
-<DownloadButton 
-  :displayMode="'hover'" 
-  :isLoadedFromStorage="true"
-  :selectedSize="selectedSize"
-  :selectedBgIndex="selectedBgIndex"
-  :sizePresets="sizePresets"
-  :bgClasses="bgClasses"
-  @update:selectedSize="selectedSize = $event"
-  @update:selectedBgIndex="selectedBgIndex = $event"
-  @clear-stored-size="clearStoredSize"
-  @download-image="downloadAsImage"
-/>
-```
-
-@props
-@prop {String} [displayMode='hover'] - 下载按钮显示模式：'always'(总是显示),'hover'(悬停显示),'never'(不显示)
-@prop {Boolean} [isLoadedFromStorage=false] - 是否已从存储中加载尺寸
-@prop {Object} [selectedSize] - 当前选中的尺寸预设
-@prop {Number} [selectedBgIndex=0] - 当前选中的背景样式索引
-@prop {Array} [sizePresets] - 尺寸预设列表
-@prop {Array} [bgClasses] - 背景样式类列表
-
-@emits
-@emit update:selectedSize - 当选择新的尺寸预设时触发
-@emit update:selectedBgIndex - 当选择新的背景样式时触发
-@emit clear-stored-size - 当清除存储的尺寸时触发
-@emit download-image - 当请求下载图片时触发
--->
-
-<script lang="ts">
-import { ref, computed, defineComponent } from 'vue';
-import { RiDownloadLine } from '@remixicon/vue';
-import { bgClasses } from './bgStyles';
-import { sizePresets, type SizePreset } from './sizePresets';
-import '../../style'
-
-export default defineComponent({
-    name: 'DownloadButton',
-    components: {
-        RiDownloadLine
-    },
-    props: {
-        displayMode: {
-            type: String,
-            default: 'hover',
-            validator: (value: string) => ['always', 'hover', 'never'].includes(value)
-        },
-        isLoadedFromStorage: {
-            type: Boolean,
-            default: false
-        },
-        selectedSize: {
-            type: Object as () => SizePreset,
-            required: true
-        },
-        selectedBgIndex: {
-            type: Number,
-            default: 0
-        }
-    },
-    emits: ['update:selectedSize', 'update:selectedBgIndex', 'clear-stored-size', 'download-image'],
-    setup(props, { emit }) {
-        const isDropdownOpen = ref(false);
-
-        const toggleDropdown = () => {
-            isDropdownOpen.value = !isDropdownOpen.value;
-        };
-
-        // 计算下载按钮是否显示及其样式类
-        const downloadButtonStyles = computed(() => {
-            switch (props.displayMode) {
-                case 'always':
-                    return {
-                        show: true,
-                        classes: 'cosy:opacity-100'
-                    };
-                case 'hover':
-                    return {
-                        show: true,
-                        classes: 'cosy:opacity-0 cosy:hover:opacity-100 cosy:transition-opacity'
-                    };
-                case 'never':
-                    return {
-                        show: false,
-                        classes: ''
-                    };
-                default:
-                    return {
-                        show: true,
-                        classes: 'cosy:opacity-0 cosy:hover:opacity-100 cosy:transition-opacity'
-                    };
-            }
-        });
-
-        const selectSize = (size: SizePreset) => {
-            emit('update:selectedSize', size);
-        };
-
-        const selectBackground = (index: number) => {
-            emit('update:selectedBgIndex', index);
-        };
-
-        const clearStoredSize = () => {
-            emit('clear-stored-size');
-            isDropdownOpen.value = false;
-        };
-
-        const downloadImage = () => {
-            emit('download-image');
-            isDropdownOpen.value = false;
-        };
-
-        return {
-            isDropdownOpen,
-            toggleDropdown,
-            downloadButtonStyles,
-            selectSize,
-            selectBackground,
-            clearStoredSize,
-            downloadImage,
-            bgClasses,
-            sizePresets
-        };
-    }
-});
-</script>
-
-<template>
-    <div v-if="downloadButtonStyles.show" class="cosy:absolute cosy:top-4 cosy:left-4"
-        :class="downloadButtonStyles.classes">
-        <div class="cosy:relative" data-dropdown>
-            <button
-                class="cosy:bg-yellow-500/30 cosy:backdrop-blur-sm cosy:p-2 cosy:rounded-lg hover:cosy:bg-yellow-500/40"
-                @click="toggleDropdown">
-                <RiDownloadLine class="cosy:w-6 cosy:h-6 cosy:text-white" />
-            </button>
-            <!-- Size selection dropdown -->
-            <div v-if="isDropdownOpen"
-                class="cosy:absolute cosy:left-0 cosy:mt-2 cosy:w-96 cosy:bg-white dark:cosy:bg-gray-800 cosy:rounded-lg cosy:shadow-lg cosy:py-2 cosy:z-50">
-                <!-- Component size presets -->
-                <div class="cosy:px-4 cosy:py-2 cosy:border-b cosy:border-gray-200 dark:cosy:border-gray-700">
-                    <div class="cosy:grid cosy:grid-cols-3 cosy:gap-2">
-                        <button v-for="preset in sizePresets" :key="preset.name" :class="[
-                            'cosy:p-2 cosy:text-left cosy:rounded cosy:text-sm',
-                            selectedSize.name === preset.name
-                                ? 'cosy:bg-yellow-500/30 cosy:text-yellow-900 dark:cosy:text-yellow-100'
-                                : 'hover:cosy:bg-gray-100 dark:hover:cosy:bg-gray-700'
-                        ]" @click="selectSize(preset)">
-                            <div class="cosy:flex cosy:flex-col">
-                                <span class="cosy:font-medium">{{ preset.name }}</span>
-                                <span class="cosy:text-xs cosy:text-gray-500 dark:cosy:text-gray-400">
-                                    {{ preset.width.replace('cosy:w-[', '').replace(']', '') }}
-                                </span>
-                            </div>
-                        </button>
-                        <!-- Clear size button -->
-                        <button
-                            class="cosy:p-2 cosy:text-left cosy:rounded cosy:text-sm hover:cosy:bg-gray-100 dark:hover:cosy:bg-gray-700"
-                            @click="clearStoredSize">
-                            <div class="cosy:flex cosy:flex-col">
-                                <span class="cosy:font-medium cosy:text-red-600 dark:cosy:text-red-400">清除记住的尺寸</span>
-                                <span class="cosy:text-xs cosy:text-gray-500 dark:cosy:text-gray-400">重置为默认尺寸</span>
-                            </div>
-                        </button>
-                    </div>
-                </div>
-                <!-- Background settings -->
-                <div class="cosy:px-4 cosy:py-2 cosy:border-b cosy:border-gray-200 dark:cosy:border-gray-700">
-                    <div class="cosy:mt-2">
-                        <div class="cosy:grid cosy:grid-cols-8 cosy:gap-2">
-                            <button v-for="(className, index) in bgClasses" :key="index" :class="[
-                                className,
-                                'cosy:w-8 cosy:h-8 cosy:rounded-lg cosy:border-2',
-                                selectedBgIndex === index ? 'cosy:border-yellow-500' : 'cosy:border-transparent'
-                            ]" @click="selectBackground(index)" />
-                        </div>
-                    </div>
-                </div>
-                <!-- Size options -->
-                <div class="cosy:p-4">
-                    <button
-                        class="cosy:w-full cosy:p-2 cosy:text-center cosy:rounded hover:cosy:bg-gray-100 dark:hover:cosy:bg-gray-700"
-                        @click="downloadImage">
-                        <div class="cosy:flex cosy:items-center cosy:justify-center cosy:gap-2">
-                            <RiDownloadLine class="cosy:w-4 cosy:h-4" />
-                            <span class="cosy:font-medium">下载图片</span>
-                        </div>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>

package/dist/vue/BannerBox/ExampleBasic.vue

@@ -1,32 +0,0 @@
-<!--
-@component BannerBox.Basic
-
-@description
-BannerBox 组件的基础示例，展示最基本的横幅容器用法。
-
-@usage
-```vue
-<BannerBoxExamples.Basic />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { defineComponent } from 'vue'
-import BannerBox from './BannerBox.vue'
-
-export default defineComponent({
-    name: 'BannerBoxBasicExample',
-    components: {
-        BannerBox
-    }
-})
-</script>
-
-<template>
-    <BannerBox>
-        <div class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[200px]">
-            <h2 class="cosy:text-3xl cosy:font-bold">欢迎使用 BannerBox</h2>
-        </div>
-    </BannerBox>
-</template>

package/dist/vue/BannerBox/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>