@coffic/cosy-ui 0.8.12 → 0.8.16

package/dist/src-astro/toast/ToastContainer.astro

@@ -0,0 +1,249 @@
+---
+/**
+ * @component ToastContainer
+ *
+ * @description
+ * ToastContainer 是 toast 消息的容器组件，负责管理多个 toast 的显示、动画和生命周期。
+ * 提供完整的 toast 管理系统，包括自动清理、事件监听和全局 API。
+ *
+ * @design
+ * 设计理念：
+ * 1. 集中管理 - 统一管理所有 toast 的生命周期
+ * 2. 事件驱动 - 基于自定义事件的松耦合架构
+ * 3. 自动清理 - 防止内存泄漏，自动清理过期的 toast
+ * 4. 位置固定 - 固定在右上角，不干扰主要内容
+ * 5. 可访问性 - 支持屏幕阅读器和 ARIA 标准
+ *
+ * @usage
+ * 通常由 DashboardLayout 或其他布局组件自动包含：
+ * ```astro
+ * <ToastContainer />
+ * ```
+ *
+ * 提供的全局 API：
+ * ```javascript
+ * // 显示 toast
+ * const id = showToast('消息内容');
+ * const id = showToast({ message: '内容', type: 'success' });
+ *
+ * // 关闭特定 toast
+ * closeToast(id);
+ *
+ * // 清除所有 toast
+ * clearAllToasts();
+ * ```
+ */
+
+import '../../style.ts';
+---
+
+<!-- Toast 容器 -->
+<div
+  id="toast-container"
+  class="cosy:fixed cosy:top-4 cosy:right-4 cosy:z-50 cosy:space-y-2 cosy:w-80 cosy:max-w-sm cosy:pointer-events-none"
+  aria-live="polite"
+  aria-label="通知消息区域">
+  <!-- Toast 项目将通过 JavaScript 动态添加 -->
+</div>
+
+<script is:inline>
+  // Toast 管理系统
+  (function () {
+    // 避免重复初始化
+    if (window.toastSystem) {
+      return;
+    }
+
+    let toastCounter = 0;
+    let activeToasts = new Map();
+
+    // 默认配置
+    const DEFAULT_CONFIG = {
+      type: 'info',
+      duration: 3000,
+    };
+
+    // 创建 toast 元素
+    function createToastElement(config) {
+      const id = config.id || `toast-${++toastCounter}`;
+      const type = config.type || DEFAULT_CONFIG.type;
+      const message = config.message;
+
+      // 图标路径映射
+      const iconMap = {
+        info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+        success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
+        warning:
+          'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z',
+        error:
+          'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z',
+      };
+
+      // 样式映射
+      const styleMap = {
+        info: 'cosy:bg-info cosy:text-info-content cosy:border-info',
+        success:
+          'cosy:bg-success cosy:text-success-content cosy:border-success',
+        warning:
+          'cosy:bg-warning cosy:text-warning-content cosy:border-warning',
+        error: 'cosy:bg-error cosy:text-error-content cosy:border-error',
+      };
+
+      const toastElement = document.createElement('div');
+      toastElement.className = `
+        cosy:alert cosy:shadow-lg cosy:flex cosy:items-center cosy:gap-3 cosy:pr-2 
+        cosy:transform cosy:transition-all cosy:duration-300 cosy:ease-in-out 
+        cosy:translate-x-full cosy:opacity-0 cosy:pointer-events-auto
+        ${styleMap[type]}
+      `
+        .replace(/\s+/g, ' ')
+        .trim();
+
+      toastElement.setAttribute('data-toast-id', id);
+      toastElement.setAttribute('role', 'alert');
+      toastElement.setAttribute('aria-live', 'polite');
+
+      toastElement.innerHTML = `
+        <svg class="cosy:w-5 cosy:h-5 cosy:shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${iconMap[type]}"></path>
+        </svg>
+        <span class="cosy:flex-1 cosy:text-sm cosy:font-medium">${message}</span>
+        <button 
+          class="cosy:btn cosy:btn-ghost cosy:btn-xs cosy:btn-circle cosy:opacity-70 hover:cosy:opacity-100" 
+          onclick="window.closeToast?.('${id}')" 
+          aria-label="关闭通知"
+          type="button"
+        >
+          <svg class="cosy:w-4 cosy:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+        </button>
+      `;
+
+      return { element: toastElement, id };
+    }
+
+    // 显示 toast
+    function showToast(config) {
+      if (typeof config === 'string') {
+        config = { message: config };
+      }
+
+      // 合并默认配置
+      config = { ...DEFAULT_CONFIG, ...config };
+
+      const container = document.getElementById('toast-container');
+      if (!container) {
+        console.warn('Toast container not found');
+        return '';
+      }
+
+      const { element, id } = createToastElement(config);
+      const duration = config.duration || DEFAULT_CONFIG.duration;
+
+      // 添加到容器
+      container.appendChild(element);
+
+      // 记录活跃的 toast
+      activeToasts.set(id, {
+        element,
+        timer: null,
+        config,
+      });
+
+      // 触发入场动画
+      requestAnimationFrame(() => {
+        element.classList.remove('cosy:translate-x-full', 'cosy:opacity-0');
+        element.classList.add('cosy:translate-x-0', 'cosy:opacity-100');
+      });
+
+      // 设置自动关闭
+      if (duration > 0) {
+        const timer = setTimeout(() => {
+          closeToast(id);
+        }, duration);
+
+        activeToasts.get(id).timer = timer;
+      }
+
+      return id;
+    }
+
+    // 关闭 toast
+    function closeToast(id) {
+      const toastData = activeToasts.get(id);
+      if (!toastData) return;
+
+      const { element, timer } = toastData;
+
+      // 清除定时器
+      if (timer) {
+        clearTimeout(timer);
+      }
+
+      // 触发退场动画
+      element.classList.remove('cosy:translate-x-0', 'cosy:opacity-100');
+      element.classList.add('cosy:translate-x-full', 'cosy:opacity-0');
+
+      // 动画结束后移除元素
+      setTimeout(() => {
+        if (element.parentNode) {
+          element.parentNode.removeChild(element);
+        }
+        activeToasts.delete(id);
+      }, 300);
+    }
+
+    // 关闭所有 toast
+    function clearAllToasts() {
+      activeToasts.forEach((_, id) => {
+        closeToast(id);
+      });
+    }
+
+    // 获取活跃的 toast 数量
+    function getActiveToastCount() {
+      return activeToasts.size;
+    }
+
+    // 获取所有活跃的 toast ID
+    function getActiveToastIds() {
+      return Array.from(activeToasts.keys());
+    }
+
+    // 创建 toast 系统对象
+    const toastSystem = {
+      show: showToast,
+      close: closeToast,
+      clearAll: clearAllToasts,
+      getActiveCount: getActiveToastCount,
+      getActiveIds: getActiveToastIds,
+    };
+
+    // 暴露到全局
+    window.showToast = showToast;
+    window.closeToast = closeToast;
+    window.clearAllToasts = clearAllToasts;
+    window.toastSystem = toastSystem;
+
+    // 监听自定义事件
+    document.addEventListener('show-toast', (event) => {
+      showToast(event.detail);
+    });
+
+    document.addEventListener('close-toast', (event) => {
+      closeToast(event.detail.id);
+    });
+
+    document.addEventListener('clear-all-toasts', () => {
+      clearAllToasts();
+    });
+
+    // 页面卸载时清理
+    window.addEventListener('beforeunload', () => {
+      clearAllToasts();
+    });
+
+    console.log('Toast system initialized');
+  })();
+</script>

package/dist/src-astro/toast/index.ts

@@ -0,0 +1,4 @@
+export { default as Toast } from './Toast.astro';
+export { default as ToastContainer } from './ToastContainer.astro';
+export type { ToastType, ToastConfig, ToastItem } from './types';
+export { getToastStyle, toastStyleMap, DEFAULT_TOAST_CONFIG } from './types'; 

package/dist/src-astro/toast/types.ts

@@ -0,0 +1,78 @@
+/**
+ * Toast 组件的类型定义
+ */
+
+/**
+ * Toast 类型
+ */
+export type ToastType = 'info' | 'success' | 'warning' | 'error';
+
+/**
+ * Toast 配置接口
+ */
+export interface ToastConfig {
+    message: string;
+    type?: ToastType;
+    duration?: number; // 毫秒，默认 3000
+    id?: string; // 如果不提供会自动生成
+}
+
+/**
+ * Toast 项接口
+ */
+export interface ToastItem extends Required<ToastConfig> {
+    id: string;
+    createdAt: number;
+}
+
+/**
+ * Toast 样式映射
+ */
+export const toastStyleMap: Record<ToastType, { bg: string; icon: string; border: string }> = {
+    info: {
+        bg: 'cosy:bg-info cosy:text-info-content',
+        icon: 'info',
+        border: 'cosy:border-info'
+    },
+    success: {
+        bg: 'cosy:bg-success cosy:text-success-content',
+        icon: 'check',
+        border: 'cosy:border-success'
+    },
+    warning: {
+        bg: 'cosy:bg-warning cosy:text-warning-content',
+        icon: 'warning',
+        border: 'cosy:border-warning'
+    },
+    error: {
+        bg: 'cosy:bg-error cosy:text-error-content',
+        icon: 'error',
+        border: 'cosy:border-error'
+    }
+};
+
+/**
+ * 获取 Toast 样式
+ * @param type Toast 类型
+ * @returns 对应的样式配置
+ */
+export function getToastStyle(type: ToastType) {
+    return toastStyleMap[type];
+}
+
+/**
+ * 默认 Toast 配置
+ */
+export const DEFAULT_TOAST_CONFIG = {
+    type: 'info' as ToastType,
+    duration: 3000,
+};
+
+// 声明全局 Toast 函数
+declare global {
+    interface Window {
+        showToast: (config: ToastConfig | string) => string;
+        closeToast: (id: string) => void;
+        clearAllToasts: () => void;
+    }
+} 

package/dist/src-astro/toc/TableOfContents.astro

@@ -54,8 +54,8 @@
 
 // 导入样式
 import '../../style.ts';
-import { createTextGetter } from '../utils/i18n.ts';
-import { LanguageUtil } from '../utils/language.ts';
+import { createTextGetter } from '../../src/utils/i18n.ts';
+import { LanguageUtil } from '../../src/utils/language.ts';
 
 interface Props {
   /**

package/dist/src-astro/toc/index.ts

@@ -1,7 +1,7 @@
 import TableOfContents from './TableOfContents.astro';
 import TableOfContentsBasic from './TableOfContentsBasic.astro';
 import BasicSourceCode from './TableOfContentsBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { TableOfContents, TableOfContentsBasic };
 

package/dist/src-astro/types/nav.ts

@@ -1 +1,26 @@
-export type INavItem = { href: string; label: string };
+export interface INavItem {
+    /**
+     * 导航项的标题
+     */
+    title: string;
+
+    /**
+     * 导航项的链接地址
+     */
+    href: string;
+
+    /**
+     * 导航项的图标名称
+     */
+    icon?: string;
+
+    /**
+     * 点击事件处理函数
+     */
+    onClick?: string;
+
+    /**
+     * 子导航项
+     */
+    children?: INavItem[];
+}

package/dist/{vue/buttons-vue → src-vue/buttons}/Button.vue

@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import '../../style.ts';
 
 interface Props {
   variant?:
-    | 'primary'
-    | 'secondary'
-    | 'accent'
-    | 'info'
-    | 'success'
-    | 'warning'
-    | 'error'
-    | 'ghost'
-    | 'link'
-    | 'outline'
-    | 'neutral';
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'ghost'
+  | 'link'
+  | 'outline'
+  | 'neutral';
   size?: 'lg' | 'md' | 'sm' | 'xs';
   shape?: 'circle' | 'square';
   wide?: boolean;
@@ -88,14 +89,8 @@ const buttonClasses = computed(() => {
 </script>
 
 <template>
-  <component
-    :is="props.href ? 'a' : 'button'"
-    :class="buttonClasses"
-    :type="props.href ? undefined : props.type"
-    :disabled="props.disabled"
-    :href="props.href"
-    :target="props.target"
-  >
+  <component :is="props.href ? 'a' : 'button'" :class="buttonClasses" :type="props.href ? undefined : props.type"
+    :disabled="props.disabled" :href="props.href" :target="props.target">
     <span class="cosy:flex cosy:items-center cosy:gap-2">
       <slot name="icon-left" />
       <slot />

package/dist/{vue/icons-vue → src-vue/icons}/VueIcon.vue

@@ -28,7 +28,7 @@ import { Icon } from 'cosy-ui';
 -->
 
 <script setup lang="ts">
-import '../../style.ts';
+import '../../style.js';
 import { computed } from 'vue';
 import { iconData } from '../../assets/iconData';
 
@@ -69,18 +69,8 @@ const viewBox = computed(() => {
 </script>
 
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    :width="size"
-    :height="size"
-    :viewBox="viewBox"
-    fill="none"
-    :stroke="color"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    :class="props.class"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" :viewBox="viewBox" fill="none" :stroke="color"
+    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :class="props.class">
     <path v-if="icon" :d="icon.path" />
   </svg>
 </template>