@coffic/cosy-ui 0.7.4 → 0.8.6

package/dist/src-astro/icons/SunCloudyIcon.astro

@@ -0,0 +1,27 @@
+---
+import AstroIcon from './AstroIcon.astro';
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="sunCloudy" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/TwitterIcon.astro

@@ -0,0 +1,28 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="twitter" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/UserIcon.astro

@@ -0,0 +1,28 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="user" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/WarningIcon.astro

@@ -0,0 +1,31 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+/**
+ * 警告图标组件
+ */
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="warning" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/XCircle.astro

@@ -0,0 +1,28 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="xCircle" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/index.ts

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

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/src-astro/image/index.ts

@@ -0,0 +1,17 @@
+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/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/src-astro/language-switcher/LanguageSwitcher.astro

@@ -0,0 +1,64 @@
+---
+/**
+ * @component LanguageSwitcher
+ *
+ * @description
+ * LanguageSwitcher 组件提供一个语言切换下拉菜单，支持多语言网站的语言切换功能。
+ * 组件会自动处理 URL 路径，确保在切换语言时保留当前页面路径。
+ *
+ * @design
+ * 设计理念：
+ * 1. 简洁直观 - 清晰显示当前语言和可选语言
+ * 2. 无缝集成 - 自动处理 URL 路由，保持用户浏览上下文
+ * 3. 可定制性 - 支持自定义语言列表和当前语言设置
+ * 4. 一致的视觉风格 - 使用与整体设计系统一致的下拉菜单样式
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <LanguageSwitcher />
+ * ```
+ *
+ * 自定义语言列表：
+ * ```astro
+ * <LanguageSwitcher
+ *   languages={['zh-cn', 'en']}
+ * />
+ * ```
+ */
+
+import { ChevronDownIcon, LanguageUtil } from '../../index-astro';
+import '../../style.ts';
+
+interface Props {
+  languages: string[];
+}
+
+const { languages = ['zh-cn', 'en'] } = Astro.props;
+
+const currentLocale = Astro.currentLocale;
+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>

package/dist/src-astro/language-switcher/LanguageSwitcherBasic.astro

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