@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/src-astro/image/Image.astro

@@ -0,0 +1,338 @@
+---
+/**
+ * @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-astro';
+import type { ImageSource } from '../types/image.ts';
+
+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/src-astro/image/ImageEffects.astro

@@ -0,0 +1,34 @@
+---
+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/src-astro/image/ImageLoading.astro

@@ -0,0 +1,37 @@
+---
+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 → src-astro/image}/index.ts

@@ -11,7 +11,7 @@ export { Image, ImageBasic, ImageEffects, ImageLoading };
 
 // 导出示例源代码
 export const ImageExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'Image'),
-	Effects: extractSimpleExample(EffectsSourceCode, 'Image'),
-	Loading: extractSimpleExample(LoadingSourceCode, 'Image'),
+  Basic: extractSimpleExample(BasicSourceCode, 'Image'),
+  Effects: extractSimpleExample(EffectsSourceCode, 'Image'),
+  Loading: extractSimpleExample(LoadingSourceCode, 'Image'),
 };

package/dist/src-astro/integration.ts

@@ -0,0 +1,14 @@
+import { defineIntegration } from 'astro-integration-kit';
+
+export const integration = defineIntegration({
+  name: 'cosy-ui',
+  setup() {
+    return {
+      hooks: {
+        'astro:config:setup': ({ logger }) => {
+          logger.info('cosy-ui integration setup');
+        },
+      },
+    };
+  },
+});

package/dist/{language-switcher → src-astro/language-switcher}/LanguageSwitcher.astro

@@ -27,11 +27,11 @@
  * ```
  */
 
-import { ChevronDownIcon, LanguageUtil } from '../index';
-import '../style.ts';
+import { ChevronDownIcon, LanguageUtil } from '../../index-astro';
+import '../../style.ts';
 
 interface Props {
-	languages: string[];
+  languages: string[];
 }
 
 const { languages = ['zh-cn', 'en'] } = Astro.props;
@@ -42,23 +42,23 @@ const currentLanguageName = LanguageUtil.getLanguageName(currentLocale);
 
 <!-- 语言切换按钮 -->
 <div class="cosy:dropdown cosy:dropdown-end">
-	<div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
-		<span class="cosy:mr-1">{currentLanguageName}</span>
-		<ChevronDownIcon size="16px" class="cosy:w-4 cosy:h-4" />
-	</div>
-	<ul
-		tabindex="0"
-		class="cosy:z-[1] cosy:bg-base-100 cosy:shadow cosy:p-2 cosy:rounded-box cosy:w-32 cosy:dropdown-content cosy:menu">
-		{
-			languages.map((lang) => (
-				<li class={currentLocale === lang ? 'cosy:disabled' : ''}>
-					<a
-						href={LanguageUtil.getRelativeLink(lang, Astro)}
-						class={currentLocale === lang ? 'cosy:active' : ''}>
-						{LanguageUtil.getLanguageName(lang)}
-					</a>
-				</li>
-			))
-		}
-	</ul>
+  <div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
+    <span class="cosy:mr-1">{currentLanguageName}</span>
+    <ChevronDownIcon size="16px" class="cosy:w-4 cosy:h-4" />
+  </div>
+  <ul
+    tabindex="0"
+    class="cosy:z-[1] cosy:bg-base-100 cosy:shadow cosy:p-2 cosy:rounded-box cosy:w-32 cosy:dropdown-content cosy:menu">
+    {
+      languages.map((lang) => (
+        <li class={currentLocale === lang ? 'cosy:disabled' : ''}>
+          <a
+            href={LanguageUtil.getRelativeLink(lang, Astro)}
+            class={currentLocale === lang ? 'cosy:active' : ''}>
+            {LanguageUtil.getLanguageName(lang)}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
 </div>

package/dist/{language-switcher → src-astro/language-switcher}/LanguageSwitcherBasic.astro

@@ -3,5 +3,5 @@ import LanguageSwitcher from './LanguageSwitcher.astro';
 ---
 
 <div class="cosy:flex cosy:justify-center">
-	<LanguageSwitcher languages={['zh-cn', 'en']} />
+  <LanguageSwitcher languages={['zh-cn', 'en']} />
 </div>

package/dist/{language-switcher → src-astro/language-switcher}/index.ts

@@ -7,5 +7,5 @@ export { LanguageSwitcher, LanguageSwitcherBasic };
 
 // 导出示例源代码
 export const LanguageSwitcherExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'LanguageSwitcher'),
+  Basic: extractSimpleExample(BasicSourceCode, 'LanguageSwitcher'),
 };

package/dist/{layout-app → src-astro/layout-app}/AppLayout.astro

@@ -165,95 +165,103 @@
  * ```
  */
 
-import '../style.ts';
+import '../../style.ts';
 import {
-	BaseLayout,
-	type IAppLayoutProps,
-	Footer,
-	Header,
-	Container,
-	Main,
-	Sidebar,
-} from '../index';
+  BaseLayout,
+  type IAppLayoutProps,
+  Footer,
+  Header,
+  Container,
+  Main,
+  Sidebar,
+} from '../../index-astro';
 import { ClientRouter } from 'astro:transitions';
 
 interface Props extends IAppLayoutProps {}
 
 const {
-	sidebarConfig,
-	showHeader = true,
-	showFooter = true,
-	showSidebar = true,
-	class: className,
-	'class:list': classList,
-	debug = false,
-	mainContentConfig,
-	footerConfig,
-	headerConfig,
-	metaConfig,
-	...rest
+  sidebarConfig,
+  showHeader = true,
+  showFooter = true,
+  showSidebar = true,
+  class: className,
+  'class:list': classList,
+  debug = false,
+  mainContentConfig,
+  footerConfig,
+  headerConfig,
+  metaConfig,
+  ...rest
 }: Props = Astro.props;
 ---
 
 <BaseLayout
-	title={metaConfig.title}
-	description={metaConfig.description}
-	keywords={metaConfig.keywords}
-	author={metaConfig.author}
-	robots={metaConfig.robots}
-	head={metaConfig.head}
-	favicon={metaConfig.favicon}
-	debug={debug}
-	{...rest}>
-	<ClientRouter />
-	{
-		showHeader && (
-			<Header {...headerConfig} debug={debug} transition:persist>
-				<div slot="navbar-start">
-					<slot name="navbar-start" />
-				</div>
-				<div slot="navbar-center">
-					<slot name="navbar-center" />
-				</div>
-				<div slot="navbar-end">
-					<slot name="navbar-end" />
-				</div>
-			</Header>
-		)
-	}
+  title={metaConfig.title}
+  description={metaConfig.description}
+  keywords={metaConfig.keywords}
+  author={metaConfig.author}
+  robots={metaConfig.robots}
+  head={metaConfig.head}
+  favicon={metaConfig.favicon}
+  debug={debug}
+  {...rest}>
+  <ClientRouter />
+  {
+    showHeader && (
+      <Header {...headerConfig} debug={debug} transition:persist>
+        <div slot="navbar-start">
+          <slot name="navbar-start" />
+        </div>
+        <div slot="navbar-center">
+          <slot name="navbar-center" />
+        </div>
+        <div slot="navbar-end">
+          <slot name="navbar-end" />
+        </div>
+      </Header>
+    )
+  }
 
-	<Container flex="row" gap="md" size="full" padding="none">
-		<!-- 侧边栏容器 -->
-		{showSidebar && <Sidebar {...sidebarConfig} transition:name="sidebar" transition:persist />}
+  <Container flex="row" gap="md" size="full" padding="none">
+    <!-- 侧边栏容器 -->
+    {
+      showSidebar && (
+        <Sidebar
+          {...sidebarConfig}
+          transition:name="sidebar"
+          transition:persist
+        />
+      )
+    }
 
-		<!-- 主内容区域 -->
-		<Main {...mainContentConfig}>
-			<slot />
-		</Main>
-	</Container>
+    <!-- 主内容区域 -->
+    <Main {...mainContentConfig}>
+      <slot />
+    </Main>
+  </Container>
 
-	<!-- Footer -->
-	{
-		showFooter && (
-			<Container size="full" padding="none" transition:persist>
-				<Footer {...footerConfig} />
-			</Container>
-		)
-	}
+  <!-- Footer -->
+  {
+    showFooter && (
+      <Container size="full" padding="none" transition:persist>
+        <Footer {...footerConfig} />
+      </Container>
+    )
+  }
 
-	<script>
-		// Handle sidebar toggle
-		const sidebarToggle = document.getElementById('sidebar-toggle');
-		const sidebar = document.getElementById('sidebar-mobile');
-		const sidebarOverlay = document.getElementById('sidebar-overlay');
+  <script>
+    // Handle sidebar toggle
+    const sidebarToggle = document.getElementById('sidebar-toggle');
+    const sidebar = document.getElementById('sidebar-mobile');
+    const sidebarOverlay = document.getElementById('sidebar-overlay');
 
-		function toggleSidebar() {
-			sidebar?.classList.toggle('cosy:hidden');
-			sidebarOverlay?.classList.toggle('cosy:hidden');
-			document.body.classList.toggle('cosy:overflow-hidden');
-		}
+    function toggleSidebar() {
+      sidebar?.classList.toggle('cosy:hidden');
+      sidebarOverlay?.classList.toggle('cosy:hidden');
+      document.body.classList.toggle('cosy:overflow-hidden');
+    }
 
-		sidebarToggle?.addEventListener('click', toggleSidebar);
-		sidebarOverlay?.addEventListener('click', toggleSidebar);
-	</script>
+    sidebarToggle?.addEventListener('click', toggleSidebar);
+    sidebarOverlay?.addEventListener('click', toggleSidebar);
+  </script>
 </BaseLayout>