@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/vue/TagList.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="flex flex-col gap-1 card bg-base-100 shadow-xl p-4 rounded-md">
+    <a
+      v-for="tag in tags"
+      :key="tag"
+      :href="`/blogs/tags/${tag}`"
+      class="badge badge-primary no-underline"
+    >
+      {{ tag }}
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tags: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>

package/dist/vue/alert-dialog-vue/AlertDialog.vue

@@ -0,0 +1,130 @@
+<!--
+@component AlertDialog
+
+@description
+AlertDialog 组件用于显示简单的确认对话框，支持国际化，带有淡入淡出动画效果。
+
+@usage
+基本用法：
+```vue
+<AlertDialog v-model="showDialog" message="操作已完成" />
+```
+
+指定语言：
+```vue
+<AlertDialog v-model="showDialog" message="Operation completed" lang="en" />
+```
+
+组合使用：
+```vue
+<template>
+  <button @click="showDialog = true">显示对话框</button>
+  <AlertDialog v-model="showDialog" message="确认要继续吗？" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { AlertDialog } from 'cosy-ui';
+
+const showDialog = ref(false);
+</script>
+```
+
+@props
+@prop {boolean} modelValue - 控制对话框显示状态，支持v-model双向绑定
+@prop {string} message - 对话框显示的消息内容
+@prop {('zh-cn'|'en')} [lang='zh-cn'] - 语言设置，影响按钮文本
+
+@emits
+@emit {update:modelValue} - 当对话框关闭时触发，用于更新v-model绑定值
+-->
+
+<script lang="ts">
+import '../../style';
+import { defineComponent } from 'vue';
+
+type MessageKey = 'confirm';
+
+interface Messages {
+  [key: string]: {
+    [key in MessageKey]: string;
+  };
+}
+
+export default defineComponent({
+  name: 'AlertDialog',
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+    lang: {
+      type: String as () => 'zh-cn' | 'en',
+      default: 'zh-cn',
+    },
+  },
+  emits: ['update:modelValue'],
+  setup(props) {
+    // 多语言文本
+    const t = (key: MessageKey) => {
+      const messages: Messages = {
+        'zh-cn': {
+          confirm: '确定',
+        },
+        en: {
+          confirm: 'OK',
+        },
+      };
+      return messages[props.lang][key];
+    };
+
+    return {
+      t,
+    };
+  },
+});
+</script>
+
+<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 cosy:opacity-100 cosy:enter:opacity-0 cosy:leave:opacity-0"
+    >
+      <!-- 背景遮罩 -->
+      <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-lg cosy:w-[400px] cosy:transform cosy:transition-all"
+      >
+        <!-- 内容区域 -->
+        <div class="cosy:p-6">
+          <p class="cosy:text-base-content">
+            {{ message }}
+          </p>
+        </div>
+
+        <!-- 按钮区域 -->
+        <div class="cosy:flex cosy:border-t cosy:border-base-300">
+          <button
+            class="cosy:btn cosy:btn-ghost cosy:flex-1 cosy:rounded-none cosy:rounded-b-xl"
+            @click="$emit('update:modelValue', false)"
+          >
+            {{ t('confirm') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>

package/dist/vue/alert-dialog-vue/Basic.vue

@@ -0,0 +1,38 @@
+<!--
+@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/alert-dialog-vue/Multilang.vue

@@ -0,0 +1,58 @@
+<!--
+@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/alert-dialog-vue/index.ts

@@ -0,0 +1,20 @@
+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/banner-box-vue/BannerBox.vue

@@ -0,0 +1,336 @@
+<!--
+@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>