@coffic/cosy-ui 0.3.15 → 0.3.35

package/dist/components/base/Alert.astro

@@ -1,186 +1,91 @@
 ---
 /**
  * @component Alert
- * 
+ *
  * @description
  * Alert 组件用于向用户显示重要的提示信息，支持多种类型的提示样式和交互效果。
- * 
- * @design
- * 设计理念：
- * 1. 简洁明了 - 使用清晰的视觉层次和颜色编码传达信息的重要性和类型
- * 2. 响应式交互 - 提供丰富的动画和交互反馈，增强用户体验
- * 3. 可定制性 - 支持多种配置选项，适应不同场景需求
- * 4. 无障碍性 - 遵循 WAI-ARIA 实践，确保所有用户都能获得良好体验
- * 
- * 视觉特点：
- * - 入场/退出动画：平滑的滑入/滑出效果
- * - 悬停效果：轻微上浮和阴影增强
- * - 图标动画：悬停时轻微放大
- * - 左侧彩色边框：直观区分不同类型的提示
- * - 进度条：自动关闭时的视觉倒计时
- * 
+ *
  * @usage
  * 基本用法：
  * ```astro
  * <Alert type="info">这是一条信息提示</Alert>
  * ```
- * 
+ *
  * 带标题：
  * ```astro
  * <Alert type="success" title="操作成功">您的操作已成功完成</Alert>
  * ```
- * 
- * 可关闭的提示：
- * ```astro
- * <Alert type="warning" closeable={true}>请注意这个警告信息</Alert>
- * ```
- * 
- * 自动关闭：
- * ```astro
- * <Alert type="success" autoClose={5000}>5秒后自动关闭</Alert>
- * ```
- * 
+ *
  * 组合使用：
  * ```astro
- * <Alert 
- *   type="error" 
- *   title="提交失败" 
- *   closeable={true} 
- *   autoClose={10000}
+ * <Alert
+ *   type="error"
+ *   title="提交失败"
  *   class="my-custom-class"
  * >
  *   请检查表单并重新提交
  * </Alert>
  * ```
- * 
+ *
  * @props
  * @prop {('info'|'success'|'warning'|'error')} [type='info'] - 提示类型，影响颜色和图标
  * @prop {string} [title] - 提示标题，可选
- * @prop {boolean} [closeable=false] - 是否显示关闭按钮
  * @prop {string} [class] - 自定义 CSS 类名
- * @prop {number} [autoClose] - 自动关闭的时间（毫秒），不设置则不自动关闭
- * 
+ *
  * @slots
  * @slot default - 提示内容
- * 
- * @cssVariables
- * 组件内部使用的 CSS 变量：
- * --auto-close-duration: 进度条动画持续时间，自动设置为 autoClose 属性值
- * 
- * @accessibility
- * - 使用适当的 ARIA 角色（role="alert"）
- * - 关闭按钮带有描述性 aria-label
- * - 动画遵循 prefers-reduced-motion 媒体查询（待实现）
- * 
- * @dependencies
- * 依赖于以下图标组件：
- * - InfoIcon, SuccessIcon, WarningIcon, ErrorIcon, CloseIcon
  */
 
-// 导入样式
-import "../../app.css";
-
+// 导入其他资源必须使用相对路径
+import '../../app.css';
 import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon, CloseIcon } from '../../index';
 
 interface Props {
-  type?: 'info' | 'success' | 'warning' | 'error';
-  title?: string;
-  closeable?: boolean;
-  class?: string;
-  autoClose?: number; // 自动关闭的时间（毫秒），如果不设置则不自动关闭
+	type?: 'info' | 'success' | 'warning' | 'error';
+	title?: string;
+	class?: string;
 }
 
-const {
-  type = 'info',
-  title,
-  closeable = false,
-  class: className = '',
-  autoClose,
-} = Astro.props;
+const { type = 'info', title, class: className = '' } = Astro.props;
 
 // 根据类型设置样式
 const alertClass = {
-  info: 'cosy:alert-info',
-  success: 'cosy:alert-success',
-  warning: 'cosy:alert-warning',
-  error: 'cosy:alert-error',
+	info: 'cosy:alert-info',
+	success: 'cosy:alert-success',
+	warning: 'cosy:alert-warning',
+	error: 'cosy:alert-error',
 }[type as 'info' | 'success' | 'warning' | 'error'];
 
 // 根据类型设置图标组件
 const IconComponent = {
-  info: InfoIcon,
-  success: SuccessIcon,
-  warning: WarningIcon,
-  error: ErrorIcon,
+	info: InfoIcon,
+	success: SuccessIcon,
+	warning: WarningIcon,
+	error: ErrorIcon,
 }[type as 'info' | 'success' | 'warning' | 'error'];
 ---
 
-<div class={`cosy:alert ${alertClass} ${className}`} role="alert" data-auto-close={autoClose}>
-  <div class="cosy:alert-content">
-    <div class="cosy:alert-icon">
-      <IconComponent />
-    </div>
-    <div class="cosy:alert-body">
-      {title && <h3 class="cosy:alert-title">{title}</h3>}
-      <div class="cosy:alert-message"><slot /></div>
-    </div>
-    {closeable && (
-      <button class="cosy:alert-close-btn" aria-label="关闭提示">
-        <CloseIcon />
-      </button>
-    )}
-  </div>
-  {autoClose && <div class="cosy:alert-progress"></div>}
-</div>
-
-<script define:vars={{ closeable, autoClose }}>
-  /**
-   * 初始化所有 Alert 组件
-   * 设置关闭按钮事件和自动关闭功能
-   */
-  function initializeAlerts() {
-    const alerts = document.querySelectorAll('.cosy\\:alert');
-    
-    alerts.forEach(alert => {
-      // 设置关闭按钮
-      if (closeable) {
-        const closeBtn = alert.querySelector('.cosy\\:alert-close-btn');
-        if (closeBtn) {
-          closeBtn.addEventListener('click', () => closeAlert(alert));
-        }
-      }
-      
-      // 设置自动关闭
-      const autoCloseTime = alert.dataset.autoClose;
-      if (autoCloseTime) {
-        // 设置进度条动画时间
-        alert.style.setProperty('--auto-close-duration', `${autoCloseTime}ms`);
-        
-        // 设置定时器自动关闭
-        setTimeout(() => {
-          closeAlert(alert);
-        }, parseInt(autoCloseTime));
-      }
-    });
-  }
-  
-  /**
-   * 关闭 Alert 的动画处理
-   * @param {HTMLElement} alert - 要关闭的 Alert 元素
-   */
-  function closeAlert(alert) {
-    // 添加关闭动画类
-    alert.classList.add('cosy:closing');
-    
-    // 动画结束后移除元素
-    setTimeout(() => {
-      alert.remove();
-    }, 300); // 与动画时长相匹配
-  }
+<div class={`cosy:alert ${alertClass} ${className}`} role="alert">
+	<div class="cosy:alert-content cosy:flex cosy:flex-row cosy:gap-4 cosy:items-center">
+		<IconComponent />
 
-  // 初始化
-  initializeAlerts();
+		<div class="cosy:flex cosy:items-center cosy:h-full cosy:flex-col">
+			{
+				title && (
+					<h3 class="cosy:font-bold" style="margin-top: 0 !important">
+						{title}
+					</h3>
+				)
+			}
+			{
+				title && (
+					<div class="cosy:text-xs">
+						<slot />
+					</div>
+				)
+			}
 
-  // Astro 页面切换时重新初始化
-  document.addEventListener('astro:page-load', initializeAlerts);
-</script> 
+			{!title && <slot />}
+		</div>
+	</div>
+</div>