@coffic/cosy-ui 0.3.39 → 0.3.45

package/dist/components/base/Image.astro

@@ -1,11 +1,11 @@
 ---
 /**
  * @component Image
- * 
+ *
  * @description
  * Image 组件是一个增强的图片组件，提供了丰富的功能，包括懒加载、加载状态指示、错误处理、
  * 以及各种视觉效果。它旨在提供更好的用户体验和性能优化。
- * 
+ *
  * @design
  * 设计理念：
  * 1. 用户体验优先 - 提供加载状态反馈，减少用户等待焦虑
@@ -13,141 +13,141 @@
  * 3. 错误处理 - 优雅地处理图片加载失败的情况
  * 4. 视觉一致性 - 提供统一的圆角、阴影和过渡效果
  * 5. 灵活配置 - 支持多种自定义选项，适应不同场景
- * 
+ *
  * @usage
  * 基本用法：
  * ```astro
  * <Image src="/images/photo.jpg" alt="一张照片" />
  * ```
- * 
+ *
  * 带样式效果：
  * ```astro
- * <Image 
- *   src="/images/photo.jpg" 
- *   alt="一张照片" 
- *   rounded="lg" 
- *   shadow="md" 
- *   hover="scale" 
+ * <Image
+ *   src="/images/photo.jpg"
+ *   alt="一张照片"
+ *   rounded="lg"
+ *   shadow="md"
+ *   hover="scale"
  * />
  * ```
- * 
+ *
  * 自定义加载指示器：
  * ```astro
- * <Image 
- *   src="https://example.com/large-image.jpg" 
- *   alt="远程大图" 
- *   loadingIndicator="progress" 
+ * <Image
+ *   src="https://example.com/large-image.jpg"
+ *   alt="远程大图"
+ *   loadingIndicator="progress"
  * />
  * ```
  */
 
-import "../../app.css";
+import '../../app.css';
 import { AlertTriangle } from '../../index';
 
 // 自定义图片元数据接口
 interface ImageMetadata {
-  src: string;
-  width: number;
-  height: number;
-  format: string;
+	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';
+	/**
+	 * 图片源，可以是本地图片或远程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';
+	/**
+	 * 加载指示器类型
+	 * @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',
+	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;
 
 // 判断是否为本地图片
@@ -159,172 +159,184 @@ const imgSrc = typeof src === 'string' ? src : src.src;
 
 // 对象映射定义所有可能的类名
 const objectFitClasses = {
-  'contain': 'object-contain',
-  'cover': 'object-cover',
-  'fill': 'object-fill',
-  'none': 'object-none',
-  'scale-down': 'object-scale-down'
+	contain: 'cosy:object-contain',
+	cover: 'cosy:object-cover',
+	fill: 'cosy:object-fill',
+	none: 'cosy:object-none',
+	'scale-down': 'cosy:object-scale-down',
 };
 
 const roundedClasses = {
-  'none': '',
-  'sm': 'rounded-sm',
-  'md': 'rounded-md',
-  'lg': 'rounded-lg',
-  'xl': 'rounded-xl',
-  '2xl': 'rounded-2xl',
-  '3xl': 'rounded-3xl',
-  'full': 'rounded-full'
+	none: '',
+	sm: 'cosy:rounded-sm',
+	md: 'cosy:rounded-md',
+	lg: 'cosy:rounded-lg',
+	xl: 'cosy:rounded-xl',
+	'2xl': 'cosy:rounded-2xl',
+	'3xl': 'cosy:rounded-3xl',
+	full: 'cosy:rounded-full',
 };
 
 const shadowClasses = {
-  'none': '',
-  'sm': 'shadow-sm',
-  'md': 'shadow-md',
-  'lg': 'shadow-lg',
-  'xl': 'shadow-xl',
-  '2xl': 'shadow-2xl'
+	none: '',
+	sm: 'cosy:shadow-sm',
+	md: 'cosy:shadow-md',
+	lg: 'cosy:shadow-lg',
+	xl: 'cosy:shadow-xl',
+	'2xl': 'cosy:shadow-2xl',
 };
 
 const hoverClasses = {
-  'none': '',
-  'scale': 'hover:scale-110',
-  'brightness': 'hover:brightness-110',
-  'blur': 'hover:blur-sm'
+	none: '',
+	scale: 'cosy:hover:scale-110',
+	brightness: 'cosy:hover:brightness-110',
+	blur: 'cosy:hover:blur-sm',
 };
 
 const transitionClasses = {
-  'none': '',
-  'fade': 'transition-opacity duration-300',
-  'slide': 'transition-transform duration-300',
-  'zoom': 'transition-all duration-300'
+	none: '',
+	fade: 'cosy:transition-opacity cosy:duration-300',
+	slide: 'cosy:transition-transform cosy:duration-300',
+	zoom: 'cosy:transition-all cosy:duration-300',
 };
 
 // 构建图片类名
 const imgClasses = [
-  'object-center',
-  objectFitClasses[objectFit] || objectFitClasses['cover'],
-  roundedClasses[rounded],
-  shadowClasses[shadow],
-  hoverClasses[hover],
-  transitionClasses[transition],
-  className
-].filter(Boolean).join(' ');
+	'cosy:object-center',
+	objectFitClasses[objectFit] || objectFitClasses['cover'],
+	roundedClasses[rounded],
+	shadowClasses[shadow],
+	hoverClasses[hover],
+	transitionClasses[transition],
+	className,
+]
+	.filter(Boolean)
+	.join(' ');
 
 // 构建占位图类名
 const placeholderClasses = [
-  'absolute inset-0',
-  roundedClasses[rounded],
-  loadingIndicator === 'skeleton' || loadingIndicator === 'pulse' ? 'animate-pulse bg-base-300' : ''
-].filter(Boolean).join(' ');
+	'cosy:absolute cosy:inset-0',
+	roundedClasses[rounded],
+	loadingIndicator === 'skeleton' || loadingIndicator === 'pulse'
+		? 'cosy:animate-pulse cosy:bg-base-300'
+		: '',
+]
+	.filter(Boolean)
+	.join(' ');
 
 // 构建错误占位图类名
 const errorClasses = [
-  'absolute inset-0 flex items-center justify-center',
-  roundedClasses[rounded],
-  'bg-error bg-opacity-10'
-].filter(Boolean).join(' ');
+	'cosy:absolute cosy:inset-0 cosy:flex cosy:items-center cosy:justify-center',
+	roundedClasses[rounded],
+	'cosy:bg-error cosy: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'}
-  />
+<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);
+		}
+	}
 
-  {/* 加载占位图 */}
-  {showPlaceholder && (
-    <div class={placeholderClasses} data-placeholder>
-      {/* 远程图片加载指示器 */}
-      {isRemoteImage && loadingIndicator === 'spinner' && (
-        <div class="absolute inset-0 m-auto text-primary loading loading-spinner loading-lg" />
-      )}
-      
-      {isRemoteImage && loadingIndicator === 'progress' && (
-        <div class="right-0 bottom-0 left-0 absolute">
-          <progress class="w-full progress progress-primary" />
-        </div>
-      )}
-    </div>
-  )}
+	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');
+		}
+	}
 
-  {/* 错误占位图 */}
-  {showError && (
-    <div class={errorClasses} data-error hidden>
-      <AlertTriangle size="32px" class="text-error" />
-    </div>
-  )}
-</div>
+	function simulateLoadingProgress(img) {
+		if (!(img instanceof HTMLImageElement) || img.getAttribute('data-remote') !== 'true') return;
+		const progressBar = img.parentElement?.querySelector('progress');
+		if (!progressBar) return;
 
-<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);
-    }
-  }
+		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);
 
-  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');
-    }
-  }
+		img.addEventListener('load', () => {
+			clearInterval(interval);
+			progressBar.value = 100;
+		});
 
-  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);
-    });
-  }
+		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);
-          }
-        }
-      }
-    });
-  }
+	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();
+	document.addEventListener('astro:page-load', initializeImageHandlers);
+	initializeImageHandlers();
 </script>
+
+<div class="cosy:relative cosy:w-full cosy: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="cosy:absolute cosy:inset-0 cosy:m-auto cosy:text-primary cosy:loading cosy:loading-spinner cosy:loading-lg" />
+				)}
+
+				{isRemoteImage && loadingIndicator === 'progress' && (
+					<div class="cosy:right-0 cosy:bottom-0 cosy:left-0 cosy:absolute">
+						<progress class="cosy:w-full cosy:progress cosy:progress-primary" />
+					</div>
+				)}
+			</div>
+		)
+	}
+
+	{/* 错误占位图 */}
+	{
+		showError && (
+			<div class={errorClasses} data-error hidden>
+				<AlertTriangle size="32px" class="cosy:text-error" />
+			</div>
+		)
+	}
+</div>