@coffic/cosy-ui 0.6.12 → 0.6.14

package/dist/vue/{FeatureCard.vue → BannerBox/FeatureCard.vue}

@@ -1,47 +1,28 @@
 <template>
-  <component
-    :is="link ? 'a' : 'div'"
-    :href="link || undefined"
-    :target="link ? '_blank' : undefined"
-    :rel="link ? 'noopener noreferrer' : undefined"
-    :class="[
-      'card bg-base-100/10 backdrop-blur-lg p-8 transition-all duration-300 hover:-translate-y-1 shadow-lg',
-      {
-        'hover:bg-primary/15 cursor-pointer': link,
-        'cursor-default': !link
-      }
-    ]"
-  >
-    <div class="card-body p-0">
-      <div class="mb-4">
-        <component
-          :is="icon"
-          v-if="icon"
-          class="text-4xl text-base-content"
-        />
-        <component
-          :is="getPresetIcon"
-          v-else-if="presetIcon"
-          class="text-4xl text-base-content"
-        />
-        <div
-          v-else
-          class="text-4xl text-base-content"
-        >
-          {{ emoji }}
+    <component :is="link ? 'a' : 'div'" :href="link || undefined" :target="link ? '_blank' : undefined"
+        :rel="link ? 'noopener noreferrer' : undefined" :class="[
+            'card bg-base-100/10 backdrop-blur-lg p-8 transition-all duration-300 hover:-translate-y-1 shadow-lg',
+            {
+                'hover:bg-primary/15 cursor-pointer': link,
+                'cursor-default': !link
+            }
+        ]">
+        <div class="card-body p-0">
+            <div class="mb-4">
+                <component :is="icon" v-if="icon" class="text-4xl text-base-content" />
+                <component :is="getPresetIcon" v-else-if="presetIcon" class="text-4xl text-base-content" />
+                <div v-else class="text-4xl text-base-content">
+                    {{ emoji }}
+                </div>
+            </div>
+            <h3 class="card-title text-lg font-medium text-base-content">
+                {{ title }}
+            </h3>
+            <p v-if="description" class="text-base-content/70">
+                {{ description }}
+            </p>
         </div>
-      </div>
-      <h3 class="card-title text-lg font-medium text-base-content">
-        {{ title }}
-      </h3>
-      <p
-        v-if="description"
-        class="text-base-content/70"
-      >
-        {{ description }}
-      </p>
-    </div>
-  </component>
+    </component>
 </template>
 
 <script setup lang="ts">

package/dist/vue/BannerBox/ImageExport.vue

@@ -0,0 +1,37 @@
+<!--
+@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/vue/BannerBox/SizePreset.vue

@@ -0,0 +1,35 @@
+<!--
+@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/vue/BannerBox/SmartBanner.vue

@@ -0,0 +1,44 @@
+<!--
+@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/vue/BannerBox/index.ts

@@ -0,0 +1,76 @@
+import Basic from './Basic.vue';
+import CustomBg from './CustomBg.vue';
+import DisplayMode from './DisplayMode.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 SmartBannerSource from './SmartBanner.vue?raw';
+import SizePresetSource from './SizePreset.vue?raw';
+import ImageExportSource from './ImageExport.vue?raw';
+import CustomComponentSource from './CustomComponent.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>
+import { BannerBox } from 'cosy-ui'
+`;
+
+	// 从源码中提取导入语句（除了组件的导入和app.css）
+	if (scriptMatch && scriptMatch[1]) {
+		const importLines = scriptMatch[1]
+			.split('\n')
+			.filter(
+				(line) =>
+					line.includes('import') && !line.includes('../../app.css') && !line.includes('BannerBox')
+			);
+
+		if (importLines.length > 0) {
+			importSection += importLines.join('\n') + '\n';
+		}
+	}
+
+	importSection += '</script>\n\n';
+
+	// 提取模板内容，并替换组件路径
+	const templateContent = templateMatch[1].replace('../BannerBox.vue', 'BannerBox');
+
+	return importSection + '<template>' + templateContent + '</template>';
+}
+
+// 获取 BannerBox 和 FeatureCard 组件
+export { default as BannerBox } from './BannerBox.vue';
+export { default as FeatureCard } from './FeatureCard.vue';
+
+// 导出示例组件
+export const BannerBoxExamples = {
+	Basic,
+	CustomBg,
+	DisplayMode,
+	SmartBanner,
+	SizePreset,
+	ImageExport,
+	CustomComponent,
+};
+
+// 导出示例源代码
+export const BannerBoxExampleCodes = {
+	Basic: extractSimpleExample(BasicSource),
+	CustomBg: extractSimpleExample(CustomBgSource),
+	DisplayMode: extractSimpleExample(DisplayModeSource),
+	SmartBanner: extractSimpleExample(SmartBannerSource),
+	SizePreset: extractSimpleExample(SizePresetSource),
+	ImageExport: extractSimpleExample(ImageExportSource),
+	CustomComponent: extractSimpleExample(CustomComponentSource),
+};

package/dist/vue/FeatureButton.vue

@@ -1,30 +1,23 @@
 <template>
-  <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',
-        props.size
-      ]"
-      @click="showPopup"
-    >
-      <slot />
-      {{ props.title }}
-    </button>
+    <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',
+            props.size
+        ]" @click="showPopup">
+            <slot />
+            {{ props.title }}
+        </button>
 
-    <!-- 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">
-          {{ lang === 'zh' ? '这是展示图，不支持操作' : 'This is a preview image, no operation is supported' }}
-        </div>
-      </div>
-    </Transition>
-  </div>
+        <!-- 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">
+                    {{ lang === 'zh' ? '这是展示图，不支持操作' : 'This is a preview image, no operation is supported' }}
+                </div>
+            </div>
+        </Transition>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -92,4 +85,10 @@ const hidePopup = () => {
         opacity: 1;
     }
 }
-</style>
+</style>
+
+<script lang="ts">
+export default {
+    name: 'FeatureButton'
+}
+</script>

package/dist/vue/Icons/AlertTriangleIcon.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="alertTriangle" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/CalendarIcon.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="calendar" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/CheckCircleIcon.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="checkCircle" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/CheckIcon.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="check" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/ChevronDownIcon.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="chevronDown" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/ClipboardIcon.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="clipboard" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/CloseIcon.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="close" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/InfoCircleIcon.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="infoCircle" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/InfoIcon.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="info" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/LinkIcon.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="link" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/MenuIcon.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="menu" :size="size" :color="color" :class="props.class" />
+</template>