@coffic/cosy-ui 0.7.4 → 0.8.7

package/dist/image/Image.astro

@@ -1,342 +0,0 @@
----
-/**
- * @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 '../style.ts';
-import { AlertTriangle } from '../index';
-import type { ImageSource } from '../types/image.ts';
-
-// 自定义图片元数据接口
-interface ImageMetadata {
-	src: string;
-	width: number;
-	height: number;
-	format: string;
-}
-
-interface Props {
-	/**
-	 * 图片源，可以是本地图片或远程URL
-	 */
-	src: ImageSource;
-	/**
-	 * 图片的替代文本
-	 */
-	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: imageSource,
-	alt,
-	width,
-	height,
-	loading = 'lazy',
-	objectFit = 'cover',
-	objectPosition = 'center',
-	showPlaceholder = true,
-	showError = true,
-	class: className = '',
-	rounded = 'none',
-	shadow = 'none',
-	hover = 'none',
-	transition = 'none',
-	loadingIndicator = 'skeleton',
-} = Astro.props;
-
-// 判断是否为远程图片
-const isRemoteImage =
-	typeof imageSource === 'string' &&
-	(imageSource.startsWith('http') || imageSource.startsWith('//'));
-// 获取图片源
-const imgSrc = typeof imageSource === 'string' ? imageSource : imageSource.src;
-
-// 对象映射定义所有可能的类名
-const objectFitClasses = {
-	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: '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: 'cosy:shadow-sm',
-	md: 'cosy:shadow-md',
-	lg: 'cosy:shadow-lg',
-	xl: 'cosy:shadow-xl',
-	'2xl': 'cosy:shadow-2xl',
-};
-
-const hoverClasses = {
-	none: '',
-	scale: 'cosy:hover:scale-110',
-	brightness: 'cosy:hover:brightness-110',
-	blur: 'cosy:hover:blur-sm',
-};
-
-const transitionClasses = {
-	none: '',
-	fade: 'cosy:transition-opacity cosy:duration-300',
-	slide: 'cosy:transition-transform cosy:duration-300',
-	zoom: 'cosy:transition-all cosy:duration-300',
-};
-
-// 构建图片类名
-const imgClasses = [
-	'cosy:object-center',
-	objectFitClasses[objectFit] || objectFitClasses['cover'],
-	roundedClasses[rounded],
-	shadowClasses[shadow],
-	hoverClasses[hover],
-	transitionClasses[transition],
-	className,
-]
-	.filter(Boolean)
-	.join(' ');
-
-// 构建占位图类名
-const placeholderClasses = [
-	'cosy:absolute cosy:inset-0',
-	roundedClasses[rounded],
-	loadingIndicator === 'skeleton' || loadingIndicator === 'pulse'
-		? 'cosy:animate-pulse cosy:bg-base-300'
-		: '',
-]
-	.filter(Boolean)
-	.join(' ');
-
-// 构建错误占位图类名
-const errorClasses = [
-	'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(' ');
----
-
-<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>
-
-<div
-	class="cosy:relative cosy:w-full cosy:h-full cosy:align-middle cosy:mx-auto cosy:my-auto cosy:justify-center cosy:flex cosy:items-center">
-	<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>

package/dist/image/ImageBasic.astro

@@ -1 +0,0 @@
- 

package/dist/image/ImageEffects.astro

@@ -1,32 +0,0 @@
-import Image from './Image.astro';
-
-<div class="cosy:grid cosy:grid-cols-3 cosy:gap-4">
-	<Image
-		src="/placeholder-2.jpg"
-		alt="圆角效果"
-		width={200}
-		height={200}
-		rounded="lg"
-		shadow="md"
-	/>
-
-	<Image
-		src="/placeholder-3.jpg"
-		alt="悬停效果"
-		width={200}
-		height={200}
-		hover="scale"
-		transition="zoom"
-	/>
-
-	<Image
-		src="/placeholder-4.jpg"
-		alt="组合效果"
-		width={200}
-		height={200}
-		rounded="full"
-		shadow="xl"
-		hover="brightness"
-		transition="fade"
-	/>
-</div>

package/dist/image/ImageLoading.astro

@@ -1,35 +0,0 @@
-import Image from './Image.astro';
-
-<div class="cosy:grid cosy:grid-cols-2 cosy:gap-4">
-	<Image
-		src="https://picsum.photos/400/300"
-		alt="骨架屏加载"
-		width={400}
-		height={300}
-		loadingIndicator="skeleton"
-	/>
-
-	<Image
-		src="https://picsum.photos/400/300"
-		alt="进度条加载"
-		width={400}
-		height={300}
-		loadingIndicator="progress"
-	/>
-
-	<Image
-		src="https://picsum.photos/400/300"
-		alt="加载动画"
-		width={400}
-		height={300}
-		loadingIndicator="spinner"
-	/>
-
-	<Image
-		src="https://invalid-image-url.jpg"
-		alt="加载错误示例"
-		width={400}
-		height={300}
-		showError={true}
-	/>
-</div>

package/dist/image/index.ts

@@ -1,17 +0,0 @@
-import Image from './Image.astro';
-import ImageBasic from './ImageBasic.astro';
-import ImageEffects from './ImageEffects.astro';
-import ImageLoading from './ImageLoading.astro';
-import BasicSourceCode from './ImageBasic.astro?raw';
-import EffectsSourceCode from './ImageEffects.astro?raw';
-import LoadingSourceCode from './ImageLoading.astro?raw';
-import { extractSimpleExample } from '../utils/component';
-
-export { Image, ImageBasic, ImageEffects, ImageLoading };
-
-// 导出示例源代码
-export const ImageExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'Image'),
-	Effects: extractSimpleExample(EffectsSourceCode, 'Image'),
-	Loading: extractSimpleExample(LoadingSourceCode, 'Image'),
-};

package/dist/index.ts

@@ -1,3 +0,0 @@
-export * from './index_astro';
-export * from './index_utils';
-export * from './index_icons';

package/dist/index_astro.ts

@@ -1,77 +0,0 @@
-// 基础组件和功能模块 (按字母顺序)
-export * from './alert';
-export * from './article';
-export * from './banner';
-export * from './blog';
-export * from './button/index_astro';
-export * from './card';
-export * from './code-block';
-export * from './code-container';
-export * from './code-example';
-export * from './contact';
-export * from './container';
-export * from './errors';
-export * from './flex';
-export * from './footer';
-export * from './grid';
-export * from './header';
-export * from './heading';
-export * from './hero';
-export * from './icons';
-export * from './image';
-export * from './index_icons';
-export * from './language-switcher';
-export * from './layout-app';
-export * from './layout-basic';
-export * from './layout-basic/BaseLayout.astro';
-export * from './layout-dashboard';
-export * from './link';
-export * from './main';
-export * from './modal';
-export * from './module';
-export * from './nav-item';
-export * from './nav-section';
-export * from './products';
-export * from './section';
-export * from './sidebar';
-export * from './sidebar-nav';
-export * from './speak';
-export * from './stack';
-export * from './team-member';
-export * from './text';
-export * from './theme-switcher';
-export * from './toc';
-
-// 类型定义 (按字母顺序)
-export * from './types/article';
-export * from './types/footer';
-export * from './types/header';
-export * from './types/heading';
-export * from './types/layout';
-export * from './types/main';
-export * from './types/meta';
-export * from './types/nav';
-export * from './types/product';
-export * from './types/sidebar';
-export * from './types/static-path';
-
-// 实体类 (按字母顺序)
-export * from './entities/BaseDoc';
-export * from './entities/BlogDoc';
-export * from './entities/CourseDoc';
-export * from './entities/ExperimentDoc';
-export * from './entities/LessonDoc';
-export * from './entities/MetaDoc';
-export * from './entities/SidebarItem';
-export * from './entities/Tag';
-
-// 数据库类 (按字母顺序)
-export * from './database/BaseDB';
-export * from './database/BlogDB';
-export * from './database/CourseDB';
-export * from './database/ExperimentDB';
-export * from './database/LessonDB';
-export * from './database/MetaDB';
-
-// 工具类型
-export type { ImageProvider, ImageOptions } from './utils/image';

package/dist/index_collection.ts

@@ -1,104 +0,0 @@
-import { defineCollection, z } from 'astro:content';
-import { glob } from 'astro/loaders';
-
-export const makeArticleCollection = (base: string) => {
-    return defineCollection({
-        loader: glob({
-            pattern: '**/*.{md,mdx}',
-            base,
-        }),
-        schema: z.object({
-            title: z.string().optional(),
-            folder: z.boolean().optional(),
-            order: z.number().optional(),
-            description: z.string().optional(),
-        }),
-    });
-};
-
-export const makeBlogCollection = (base: string) => {
-    return defineCollection({
-        loader: glob({
-            pattern: '**/*.{md,mdx}',
-            base,
-        }),
-        schema: z.object({
-            title: z.string(),
-            description: z.string().optional(),
-            tags: z.array(z.string()).optional(),
-            date: z.date().optional(),
-            authors: z
-                .array(
-                    z.object({
-                        name: z.string(),
-                        picture: z.string().optional(),
-                        url: z.string().optional(),
-                    })
-                )
-                .optional(),
-        }),
-    });
-};
-
-export const makeCourseCollection = (base: string) => {
-    return defineCollection({
-        loader: glob({
-            pattern: '**/*.{md,mdx}',
-            base,
-        }),
-        schema: z.object({
-            title: z.string().optional(),
-            description: z.string().optional(),
-            folder: z.boolean().optional(),
-            order: z.number().optional(),
-        }),
-    });
-};
-
-export const makeExperimentCollection = (base: string) => {
-    return defineCollection({
-        loader: glob({
-            pattern: '**/*.{md,mdx}',
-            base,
-        }),
-        schema: z.object({
-            title: z.string().optional(),
-            description: z.string().optional(),
-            pubDate: z.date().optional(),
-        }),
-    });
-};
-
-export const makeLessonCollection = (base: string) => {
-    return defineCollection({
-        loader: glob({
-            pattern: '**/*.{md,mdx}',
-            base,
-        }),
-        schema: z.object({
-            title: z.string().optional(),
-            description: z.string().optional(),
-            authors: z
-                .array(
-                    z.object({
-                        name: z.string(),
-                        picture: z.string().optional(),
-                    })
-                )
-                .optional(),
-        }),
-    });
-};
-
-export const makeMetaCollection = (base: string) => {
-    return defineCollection({
-        loader: glob({
-            pattern: '**/*.{md,mdx}',
-            base,
-        }),
-        schema: z.object({
-            title: z.string().optional(),
-            description: z.string().optional(),
-        }),
-    });
-};

package/dist/index_icons.ts

@@ -1,24 +0,0 @@
-export { default as SocialIcon } from './icons/SocialIcon.astro';
-export { default as TwitterIcon } from './icons/TwitterIcon.astro';
-export { default as UserIcon } from './icons/UserIcon.astro';
-export { default as WarningIcon } from './icons/WarningIcon.astro';
-export { default as XCircle } from './icons/XCircle.astro';
-export { default as InfoIcon } from './icons/InfoIcon.astro';
-export { default as LinkIcon } from './icons/LinkIcon.astro';
-export { default as LinkedinIcon } from './icons/LinkedinIcon.astro';
-export { default as MenuIcon } from './icons/MenuIcon.astro';
-export { default as SearchIcon } from './icons/SearchIcon.astro';
-export { default as SuccessIcon } from './icons/SuccessIcon.astro';
-export { default as SunCloudyIcon } from './icons/SunCloudyIcon.astro';
-export { default as AlertTriangle } from './icons/AlertTriangle.astro';
-export { default as CalendarIcon } from './icons/CalendarIcon.astro';
-export { default as CheckCircle } from './icons/CheckCircle.astro';
-export { default as CheckIcon } from './icons/CheckIcon.astro';
-export { default as ClipboardIcon } from './icons/ClipboardIcon.astro';
-export { default as CloseIcon } from './icons/CloseIcon.astro';
-export { default as ErrorIcon } from './icons/ErrorIcon.astro';
-export { default as GithubIcon } from './icons/GithubIcon.astro';
-export { default as InfoCircle } from './icons/InfoCircle.astro';
-export { default as InboxArchive } from './icons/InboxArchive.astro';
-export { default as SettingsIcon } from './icons/SettingsIcon.astro';
-export { default as ChevronDownIcon } from './icons/ChevronDownIcon.astro';

package/dist/index_utils.ts

@@ -1,8 +0,0 @@
-export * from './utils/image';
-export * from './utils/i18n';
-export * from './utils/path';
-export * from './utils/url';
-export * from './utils/language';
-export * from './utils/lang_package';
-export * from './utils/logger';
-export * from './utils/link';

package/dist/index_vue.ts

@@ -1,33 +0,0 @@
-// AlertDialog
-export * from './alert-dialog-vue/index';
-
-// Banner
-export * from './banner-box-vue/index';
-
-// BlogList
-export * from './blog-vue/index';
-
-// Counter
-export * from './counter-vue/index';
-
-// ConfirmDialog
-export * from './confirm-dialog-vue/index';
-
-// Buttons
-export * from './buttons-vue/index';
-
-// Icons
-export * from './icons-vue/index';
-
-// List
-export * from './list-vue/index';
-
-// Windows
-// export { MacWindowExamples, MacWindowExampleCodes, MacWindow } from './vue/MacWindow';
-// export { iPhoneWindowExamples, iPhoneWindowExampleCodes, iPhoneWindow } from './vue/iPhone';
-
-// SmartLink
-// export { default as SmartLink } from './vue/SmartLink.vue';
-
-// TagList
-// export { default as TagList } from './vue/TagList.vue';