@coffic/cosy-ui 0.1.29 → 0.2.2

package/dist/components/base/Image.astro

@@ -0,0 +1,291 @@
+---
+/**
+ * @component Image
+ * 
+ * @description
+ * Image 组件是一个增强的图片组件，提供了丰富的功能，包括懒加载、加载状态指示、错误处理、
+ * 以及各种视觉效果。它旨在提供更好的用户体验和性能优化。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 用户体验优先 - 提供加载状态反馈，减少用户等待焦虑
+ * 2. 性能优化 - 支持懒加载，减少初始加载时间
+ * 3. 错误处理 - 优雅地处理图片加载失败的情况
+ * 4. 视觉一致性 - 提供统一的圆角、阴影和过渡效果
+ * 5. 灵活配置 - 支持多种自定义选项，适应不同场景
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Image src="/images/photo.jpg" alt="一张照片" />
+ * ```
+ * 
+ * 带样式效果：
+ * ```astro
+ * <Image 
+ *   src="/images/photo.jpg" 
+ *   alt="一张照片" 
+ *   rounded="lg" 
+ *   shadow="md" 
+ *   hover="scale" 
+ * />
+ * ```
+ * 
+ * 自定义加载指示器：
+ * ```astro
+ * <Image 
+ *   src="https://example.com/large-image.jpg" 
+ *   alt="远程大图" 
+ *   loadingIndicator="progress" 
+ * />
+ * ```
+ */
+
+import "../../app.css";
+import { AlertTriangle } from '../../index';
+
+// 自定义图片元数据接口
+interface ImageMetadata {
+  src: string;
+  width: number;
+  height: number;
+  format: string;
+}
+
+interface Props {
+  /**
+   * 图片源，可以是本地图片或远程URL
+   */
+  src: ImageMetadata | string;
+  /**
+   * 图片的替代文本
+   */
+  alt: string;
+  /**
+   * 图片的宽度
+   */
+  width?: number;
+  /**
+   * 图片的高度
+   */
+  height?: number;
+  /**
+   * 图片的加载方式
+   * @default "lazy"
+   */
+  loading?: 'lazy' | 'eager';
+  /**
+   * 图片的填充方式
+   * @default "cover"
+   */
+  objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+  /**
+   * 图片的位置
+   * @default "center"
+   */
+  objectPosition?: string;
+  /**
+   * 是否显示加载中的占位图
+   * @default true
+   */
+  showPlaceholder?: boolean;
+  /**
+   * 是否显示加载失败的错误图
+   * @default true
+   */
+  showError?: boolean;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+  /**
+   * 是否启用图片懒加载
+   * @default true
+   */
+  lazy?: boolean;
+  /**
+   * 图片的圆角大小
+   * @default "none"
+   */
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+  /**
+   * 图片的阴影效果
+   * @default "none"
+   */
+  shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * 图片的悬停效果
+   * @default "none"
+   */
+  hover?: 'none' | 'scale' | 'brightness' | 'blur';
+  /**
+   * 图片的过渡动画
+   * @default "none"
+   */
+  transition?: 'none' | 'fade' | 'slide' | 'zoom';
+
+  /**
+   * 加载指示器类型
+   * @default "skeleton"
+   */
+  loadingIndicator?: 'pulse' | 'spinner' | 'progress' | 'skeleton';
+}
+
+const {
+  src,
+  alt,
+  width,
+  height,
+  loading = 'lazy',
+  objectFit = 'cover',
+  objectPosition = 'center',
+  showPlaceholder = true,
+  showError = true,
+  class: className = '',
+  lazy = true,
+  rounded = 'none',
+  shadow = 'none',
+  hover = 'none',
+  transition = 'none',
+  loadingIndicator = 'skeleton',
+} = Astro.props;
+
+// 判断是否为本地图片
+const isLocalImage = typeof src !== 'string' && 'src' in src;
+// 判断是否为远程图片
+const isRemoteImage = typeof src === 'string' && (src.startsWith('http') || src.startsWith('//'));
+// 获取图片源
+const imgSrc = typeof src === 'string' ? src : src.src;
+
+// 构建图片类名
+const imgClasses = [
+  // DaisyUI 和 Tailwind 类
+  'object-center',
+  objectFit === 'cover' ? 'object-cover' : `object-${objectFit}`,
+  rounded !== 'none' ? `rounded-${rounded}` : '',
+  shadow !== 'none' ? `shadow-${shadow}` : '',
+  hover === 'scale' ? 'hover:scale-110' : '',
+  hover === 'brightness' ? 'hover:brightness-110' : '',
+  hover === 'blur' ? 'hover:blur-sm' : '',
+  transition !== 'none' ? 'transition-all duration-300' : '',
+  className
+].filter(Boolean).join(' ');
+
+// 构建占位图类名
+const placeholderClasses = [
+  'absolute inset-0',
+  rounded !== 'none' ? `rounded-${rounded}` : '',
+  loadingIndicator === 'skeleton' ? 'animate-pulse bg-base-300' : '',
+  loadingIndicator === 'pulse' ? 'animate-pulse bg-base-300' : '',
+].filter(Boolean).join(' ');
+
+// 构建错误占位图类名
+const errorClasses = [
+  'absolute inset-0 flex items-center justify-center',
+  rounded !== 'none' ? `rounded-${rounded}` : '',
+  'bg-error bg-opacity-10',
+].filter(Boolean).join(' ');
+---
+
+<div class="relative w-full h-full">
+  <img
+    src={imgSrc}
+    alt={alt}
+    width={width}
+    height={height}
+    loading={loading}
+    class={imgClasses}
+    style={{ objectPosition }}
+    data-remote={isRemoteImage ? 'true' : 'false'}
+  />
+
+  {/* 加载占位图 */}
+  {showPlaceholder && (
+    <div class={placeholderClasses} data-placeholder>
+      {/* 远程图片加载指示器 */}
+      {isRemoteImage && loadingIndicator === 'spinner' && (
+        <div class="loading loading-spinner loading-lg text-primary absolute inset-0 m-auto" />
+      )}
+      
+      {isRemoteImage && loadingIndicator === 'progress' && (
+        <div class="absolute bottom-0 left-0 right-0">
+          <progress class="progress progress-primary w-full" />
+        </div>
+      )}
+    </div>
+  )}
+
+  {/* 错误占位图 */}
+  {showError && (
+    <div class={errorClasses} data-error hidden>
+      <AlertTriangle size="32px" class="text-error" />
+    </div>
+  )}
+</div>
+
+<script is:inline>
+  function handleImageLoad(img) {
+    if (!(img instanceof HTMLImageElement)) return;
+    const placeholder = img.parentElement?.querySelector('[data-placeholder]');
+    if (placeholder) {
+      placeholder.classList.add('opacity-0');
+      setTimeout(() => placeholder.remove(), 300);
+    }
+  }
+
+  function handleImageError(img) {
+    if (!(img instanceof HTMLImageElement)) return;
+    const placeholder = img.parentElement?.querySelector('[data-placeholder]');
+    if (placeholder) {
+      placeholder.remove();
+    }
+    const errorElement = img.parentElement?.querySelector('[data-error]');
+    if (errorElement) {
+      errorElement.classList.remove('hidden');
+    }
+  }
+
+  function simulateLoadingProgress(img) {
+    if (!(img instanceof HTMLImageElement) || img.getAttribute('data-remote') !== 'true') return;
+    const progressBar = img.parentElement?.querySelector('progress');
+    if (!progressBar) return;
+    
+    let progress = 0;
+    const interval = setInterval(() => {
+      progress += Math.random() * 15;
+      if (progress >= 100 || img.complete) {
+        clearInterval(interval);
+        progress = 100;
+      }
+      progressBar.value = Math.min(progress, 100);
+    }, 200);
+    
+    img.addEventListener('load', () => {
+      clearInterval(interval);
+      progressBar.value = 100;
+    });
+    
+    img.addEventListener('error', () => {
+      clearInterval(interval);
+    });
+  }
+
+  function initializeImageHandlers() {
+    document.querySelectorAll('img[data-remote]').forEach(img => {
+      if (img instanceof HTMLImageElement) {
+        if (img.complete) {
+          handleImageLoad(img);
+        } else {
+          img.addEventListener('load', () => handleImageLoad(img));
+          img.addEventListener('error', () => handleImageError(img));
+          if (img.getAttribute('data-remote') === 'true') {
+            simulateLoadingProgress(img);
+          }
+        }
+      }
+    });
+  }
+
+  document.addEventListener('astro:page-load', initializeImageHandlers);
+  initializeImageHandlers();
+</script>

package/dist/components/base/Link.astro

@@ -0,0 +1,131 @@
+---
+/**
+ * @component Link
+ * 
+ * @description
+ * Link 组件是一个增强的链接组件，提供了丰富的样式变体和动画效果。
+ * 它可以用于导航、按钮、行动号召等多种场景。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 灵活多变 - 提供多种样式变体，适应不同场景
+ * 2. 视觉反馈 - 通过悬停效果提供用户交互反馈
+ * 3. 一致性 - 保持与整体设计系统的一致性
+ * 4. 可访问性 - 确保链接可被键盘导航和屏幕阅读器识别
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Link href="/about">关于我们</Link>
+ * ```
+ * 
+ * 外部链接：
+ * ```astro
+ * <Link href="https://example.com" external>访问外部网站</Link>
+ * ```
+ * 
+ * 样式变体：
+ * ```astro
+ * <Link href="/signup" variant="primary">注册</Link>
+ * <Link href="/learn-more" variant="secondary">了解更多</Link>
+ * <Link href="/docs" variant="text">查看文档</Link>
+ * <Link href="/get-started" variant="cta">立即开始</Link>
+ * <Link href="/preview" variant="ghost">预览</Link>
+ * ```
+ * 
+ * 块级显示：
+ * ```astro
+ * <Link href="/contact" block>独占一行的链接</Link>
+ * <p>这是一段文字，其中包含一个<Link href="/inline">内联链接</Link>。</p>
+ * ```
+ * 
+ * 动画效果：
+ * ```astro
+ * <Link href="/contact" animation="hover-lift">联系我们</Link>
+ * <Link href="/features" animation="hover-glow">功能特性</Link>
+ * <Link href="/pricing" animation="hover-scale">查看价格</Link>
+ * ```
+ * 
+ * 尺寸变体：
+ * ```astro
+ * <Link href="/small" size="sm">小型链接</Link>
+ * <Link href="/medium" size="md">中型链接</Link>
+ * <Link href="/large" size="lg">大型链接</Link>
+ * ```
+ */
+
+import "../../app.css";
+
+import type { HTMLAttributes } from 'astro/types';
+
+// 定义链接尺寸类型
+type LinkSize = 'sm' | 'md' | 'lg';
+
+// 定义链接变体类型
+type LinkVariant = 'default' | 'primary' | 'secondary' | 'text' | 'cta' | 'ghost';
+
+// 定义链接动画类型
+type LinkAnimation = 'none' | 'hover-lift' | 'hover-glow' | 'hover-scale';
+
+interface Props extends HTMLAttributes<'a'> {
+	href: string;
+	external?: boolean;
+	block?: boolean;
+	class?: string;
+	'class:list'?: any;
+	variant?: LinkVariant;
+	animation?: LinkAnimation;
+	size?: LinkSize;
+}
+
+const {
+	href,
+	external = false,
+	block = false,
+	variant = 'default',
+	animation = 'none',
+	size = 'md',
+	class: className = '',
+	'class:list': classList,
+	...rest
+} = Astro.props;
+
+// 构建类名
+const classes = [
+	// 基础链接样式
+	'items-center cursor-pointer no-underline transition-all duration-200',
+	
+	// 显示方式
+	block ? 'flex w-full' : 'inline-flex',
+	
+	// 变体样式
+	variant === 'primary' && 'text-primary hover:text-primary-focus',
+	variant === 'secondary' && 'text-secondary hover:text-secondary-focus',
+	variant === 'text' && 'text-neutral hover:text-neutral-focus',
+	variant === 'cta' && 'text-accent hover:text-accent-focus font-medium',
+	variant === 'ghost' && 'text-base-content hover:text-base-content/80',
+	variant === 'default' && 'text-base-content hover:text-base-content/90',
+	
+	// 尺寸样式
+	size === 'sm' && 'text-sm',
+	size === 'md' && 'text-base',
+	size === 'lg' && 'text-lg',
+	
+	// 动画效果
+	animation === 'hover-lift' && 'hover:-translate-y-0.5 transition-transform',
+	animation === 'hover-glow' && 'hover:brightness-125 transition-[filter]',
+	animation === 'hover-scale' && 'hover:scale-105 transition-transform',
+	
+	// 自定义类名
+	className
+];
+---
+
+<a
+	href={href}
+	class:list={[classes, classList]}
+	{...external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}
+	{...rest}
+>
+	<slot />
+</a>

package/dist/components/containers/Container.astro

@@ -0,0 +1,103 @@
+---
+/**
+ * @component Container
+ * 
+ * @description
+ * Container 组件是一个基础的布局容器，用于限制内容宽度并居中显示。
+ * 它提供了多种尺寸和内边距选项，适用于各种布局需求。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 内容约束 - 限制内容宽度，提高可读性和视觉美感
+ * 2. 响应式设计 - 在不同屏幕尺寸下自动调整内边距
+ * 3. 灵活配置 - 支持多种尺寸和内边距选项
+ * 4. 简单易用 - 提供直观的API，易于集成到各种页面布局中
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Container>
+ *   <p>内容将被限制在一个合理的宽度内并居中显示</p>
+ * </Container>
+ * ```
+ * 
+ * 自定义尺寸和内边距：
+ * ```astro
+ * <Container size="sm" padding="lg">
+ *   <p>小尺寸容器，大内边距</p>
+ * </Container>
+ * ```
+ * 
+ * 全宽容器：
+ * ```astro
+ * <Container size="full" padding="none">
+ *   <p>全宽容器，无内边距</p>
+ * </Container>
+ * ```
+ * 
+ * 不居中的容器：
+ * ```astro
+ * <Container centered={false}>
+ *   <p>不居中的容器，靠左对齐</p>
+ * </Container>
+ * ```
+ */
+
+import type { HTMLAttributes } from 'astro/types';
+
+// 导入样式
+import '../../app.css';
+
+interface Props extends HTMLAttributes<'div'> {
+  /**
+   * 容器尺寸
+   * @default "md"
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  
+  /**
+   * 内边距大小
+   * @default "md"
+   */
+  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+  
+  /**
+   * 是否居中显示
+   * @default true
+   */
+  centered?: boolean;
+  
+  /**
+   * 自定义类名
+   */
+  class?: string;
+  
+  /**
+   * 类名列表
+   */
+  'class:list'?: any;
+}
+
+const {
+  size = 'md',
+  padding = 'md',
+  centered = true,
+  class: className = '',
+  'class:list': classList,
+  ...rest
+} = Astro.props;
+
+// 构建CSS类名
+const containerClasses = [
+  'container',
+  `container-${size}`,
+  `container-padding-${padding}`,
+  centered ? 'container-centered' : '',
+  className
+];
+---
+
+<div class:list={[containerClasses, classList]} {...rest}>
+  <slot />
+</div>
+

package/dist/components/containers/Main.astro

@@ -0,0 +1,167 @@
+---
+/**
+ * @component Main
+ * 
+ * @description
+ * Main 组件是页面的主要内容区域，使用 Container 组件提供响应式布局。
+ * 它适合作为页面的主体部分，自动处理不同屏幕尺寸下的布局和内边距。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 结构清晰 - 明确表示页面的主要内容区域，提高语义化
+ * 2. 响应式布局 - 在不同屏幕尺寸下自动调整内边距和宽度
+ * 3. 灵活配置 - 支持自定义容器尺寸、内边距和背景颜色
+ * 4. 与容器集成 - 无缝集成 Container 组件，保持布局一致性
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * ---
+ * import { Main } from '@coffic/cosy-ui';
+ * ---
+ * 
+ * <Main>
+ *   <h1>页面标题</h1>
+ *   <p>页面内容</p>
+ * </Main>
+ * ```
+ * 
+ * 自定义容器尺寸：
+ * ```astro
+ * <Main size="lg">
+ *   <p>这是一个较宽的主内容区域</p>
+ * </Main>
+ * ```
+ * 
+ * 自定义内边距：
+ * ```astro
+ * <Main verticalPadding="lg" padding="xl">
+ *   <p>这个主内容区域有更大的内边距</p>
+ * </Main>
+ * ```
+ * 
+ * 自定义背景颜色：
+ * ```astro
+ * <Main backgroundColor="primary">
+ *   <p>这个主内容区域有主题色背景</p>
+ * </Main>
+ * ```
+ */
+
+import Container from './Container.astro';
+
+// 导入样式
+import '../../app.css';
+
+export interface Props {
+  /**
+   * 容器大小
+   * @default "md"
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  
+  /**
+   * 水平内边距（通过 Container 组件的 padding 属性设置）
+   * @default "md"
+   */
+  padding?: "none" | "sm" | "md" | "lg" | "xl";
+  
+  /**
+   * 垂直内边距
+   * @default "md"
+   */
+  verticalPadding?: "none" | "sm" | "md" | "lg" | "xl" | string;
+  
+  /**
+   * 是否居中显示内容
+   * @default true
+   */
+  centered?: boolean;
+  
+  /**
+   * 背景颜色
+   * @default undefined
+   */
+  backgroundColor?: "primary" | "secondary" | "tertiary" | "light" | "dark" | string;
+  
+  /**
+   * HTML id 属性
+   */
+  id?: string;
+  
+  /**
+   * 类名
+   */
+  class?: string;
+  
+  /**
+   * 类名列表
+   */
+  'class:list'?: any;
+}
+
+const {
+  size = 'md',
+  padding = 'md',
+  verticalPadding = "md",
+  centered = true,
+  backgroundColor,
+  id,
+  class: className,
+  'class:list': classList,
+  ...rest
+} = Astro.props;
+
+// 处理垂直内边距
+const verticalPaddingClass = 
+  verticalPadding === "none" || verticalPadding === "sm" || 
+  verticalPadding === "md" || verticalPadding === "lg" || 
+  verticalPadding === "xl" 
+    ? `main-padding-${verticalPadding}` 
+    : "main-padding-custom";
+
+// 处理背景颜色
+const bgColorClass = backgroundColor && 
+  (backgroundColor === "primary" || backgroundColor === "secondary" || 
+   backgroundColor === "tertiary" || backgroundColor === "light" || 
+   backgroundColor === "dark")
+    ? `main-bg-${backgroundColor}`
+    : "";
+
+// 构建自定义样式
+const customStyle = 
+  (verticalPadding && verticalPaddingClass === "main-padding-custom") 
+    ? `padding-top: ${verticalPadding}; padding-bottom: ${verticalPadding};` 
+    : "";
+
+const customBgColor = 
+  (backgroundColor && !bgColorClass) 
+    ? `background-color: ${backgroundColor};` 
+    : "";
+
+const inlineStyle = (customStyle || customBgColor) 
+  ? `${customStyle} ${customBgColor}`.trim() 
+  : undefined;
+---
+
+<main
+  id={id}
+  class:list={[
+    "main-content",
+    verticalPaddingClass,
+    bgColorClass,
+    className,
+    classList
+  ]}
+  style={inlineStyle}
+  {...rest}
+>
+  <Container
+    size={size}
+    padding={padding}
+    centered={centered}
+    class="main-container"
+  >
+    <slot />
+  </Container>
+</main>