@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/{module → src-astro/module}/Module.astro

@@ -28,34 +28,41 @@
 
 import { Image } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
-import '../style.ts';
+import '../../style.ts';
 
 interface Props {
-	/**
-	 * 模块标题
-	 */
-	title: string;
-	/**
-	 * 模块描述
-	 */
-	description: string;
-	/**
-	 * 模块图片
-	 */
-	image: ImageMetadata;
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
+  /**
+   * 模块标题
+   */
+  title: string;
+  /**
+   * 模块描述
+   */
+  description: string;
+  /**
+   * 模块图片
+   */
+  image: ImageMetadata;
+  /**
+   * 自定义类名
+   */
+  class?: string;
 }
 
 const { title, description, image, class: className = '' } = Astro.props;
 ---
 
-<div class={`cosy:flex cosy:flex-col cosy:items-center cosy:gap-4 ${className}`}>
-	<div class="cosy:w-48 cosy:h-48 cosy:relative">
-		<Image src={image} alt={title} class="cosy:w-full cosy:h-full cosy:object-contain" />
-	</div>
-	<h3 class="cosy:text-xl cosy:font-semibold cosy:text-center">{title}</h3>
-	<p class="cosy:text-base-content/70 cosy:text-center cosy:max-w-sm">{description}</p>
+<div
+  class={`cosy:flex cosy:flex-col cosy:items-center cosy:gap-4 ${className}`}>
+  <div class="cosy:w-48 cosy:h-48 cosy:relative">
+    <Image
+      src={image}
+      alt={title}
+      class="cosy:w-full cosy:h-full cosy:object-contain"
+    />
+  </div>
+  <h3 class="cosy:text-xl cosy:font-semibold cosy:text-center">{title}</h3>
+  <p class="cosy:text-base-content/70 cosy:text-center cosy:max-w-sm">
+    {description}
+  </p>
 </div>

package/dist/src-astro/module/ModuleBasic.astro

@@ -0,0 +1,12 @@
+---
+import { Module } from '../../index-astro';
+import demoImage from '../assets/logo-rounded.png';
+---
+
+<div class="cosy:grid cosy:grid-cols-1 cosy:gap-8 cosy:max-w-xl">
+  <Module
+    title="基础模块示例"
+    description="这是一个基础的模块示例，展示了标题、描述和图片的基本布局。"
+    image={demoImage}
+  />
+</div>

package/dist/src-astro/module/ModuleCustom.astro

@@ -0,0 +1,14 @@
+---
+import Module from './Module.astro';
+import customImage from '../assets/logo-rounded.png';
+---
+
+<div class="cosy:bg-base-200 cosy:p-8 cosy:rounded-xl">
+  <div class="cosy:max-w-2xl cosy:mx-auto">
+    <Module
+      title="自定义样式模块"
+      description="这个模块展示了如何通过容器添加自定义样式，比如背景色、内边距和圆角等。"
+      image={customImage}
+    />
+  </div>
+</div>

package/dist/src-astro/module/ModuleGrid.astro

@@ -0,0 +1,27 @@
+---
+import { Module } from '../../index-astro';
+import featureImage1 from '../assets/logo-rounded.png';
+import featureImage2 from '../assets/logo-rounded.png';
+import featureImage3 from '../assets/logo-rounded.png';
+---
+
+<div
+  class="cosy:grid cosy:grid-cols-1 md:cosy:grid-cols-2 lg:cosy:grid-cols-3 cosy:gap-8">
+  <Module
+    title="特性一"
+    description="这是第一个特性的详细描述，介绍了该功能的主要优点和使用场景。"
+    image={featureImage1}
+  />
+
+  <Module
+    title="特性二"
+    description="这是第二个特性的详细描述，展示了该功能如何帮助用户解决问题。"
+    image={featureImage2}
+  />
+
+  <Module
+    title="特性三"
+    description="这是第三个特性的详细描述，说明了该功能带来的独特价值。"
+    image={featureImage3}
+  />
+</div>

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

@@ -11,7 +11,7 @@ export { Module, ModuleBasic, ModuleGrid, ModuleCustom };
 
 // 导出示例源代码
 export const ModuleExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'Module'),
-	Grid: extractSimpleExample(GridSourceCode, 'Module'),
-	Custom: extractSimpleExample(CustomSourceCode, 'Module'),
+  Basic: extractSimpleExample(BasicSourceCode, 'Module'),
+  Grid: extractSimpleExample(GridSourceCode, 'Module'),
+  Custom: extractSimpleExample(CustomSourceCode, 'Module'),
 };

package/dist/src-astro/nav-item/NavItems.astro

@@ -0,0 +1,44 @@
+---
+/**
+ * @component NavItems
+ *
+ * @description
+ * NavItems 组件用于渲染导航栏中的导航项目列表。
+ *
+ * @usage
+ * ```astro
+ * <NavItems
+ *   navItems={navItems}
+ *   activeLink={activeLink}
+ *   linkHeightClass={linkHeightClass}
+ * />
+ * ```
+ */
+import '../../style.ts';
+import { type INavItem, Link } from '../../index-astro';
+
+interface Props {
+  navItems: INavItem[];
+  activeLink: string;
+  linkHeightClass: string;
+}
+
+const { navItems, activeLink, linkHeightClass } = Astro.props;
+---
+
+<ul
+  data-active-link={activeLink}
+  class:list={['cosy:px-1 cosy:menu cosy:menu-horizontal', linkHeightClass]}>
+  {
+    navItems.map((item) => (
+      <li>
+        <Link
+          variant={activeLink === item.href ? 'primary' : 'default'}
+          href={item.href}
+          class:list={[linkHeightClass]}>
+          {item.label}
+        </Link>
+      </li>
+    ))
+  }
+</ul>

package/dist/src-astro/nav-item/NavItemsBasic.astro

@@ -0,0 +1,30 @@
+---
+import NavItems from './NavItems.astro';
+
+const navItems = [
+  {
+    label: '首页',
+    href: '/',
+  },
+  {
+    label: '文档',
+    href: '/docs',
+  },
+  {
+    label: '组件',
+    href: '/components',
+  },
+  {
+    label: '博客',
+    href: '/blog',
+  },
+];
+---
+
+<div class="cosy:bg-base-100 cosy:p-4">
+  <NavItems
+    navItems={navItems}
+    activeLink="/docs"
+    linkHeightClass="cosy:h-10"
+  />
+</div>

package/dist/{nav-item → src-astro/nav-item}/index.ts

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

package/dist/src-astro/nav-section/NavSection.astro

@@ -0,0 +1,41 @@
+---
+/**
+ * @component NavSection
+ *
+ * @description
+ * NavSection 组件用于在页脚中创建一个导航部分。
+ *
+ * @props
+ * @prop {string} title - 导航部分的标题
+ * @prop {Array<Object>} links - 链接数组，每个对象包含name、href和可选的external属性
+ *
+ */
+
+import { Link } from '../../index-astro';
+
+interface NavSectionProps {
+  title: string;
+  links: Array<{ name: string; href: string; external?: boolean }>;
+}
+
+const props = Astro.props as NavSectionProps;
+const { title, links } = props;
+---
+
+<nav
+  class="cosy:flex cosy:flex-col cosy:items-center cosy:gap-3 cosy:hover:bg-base-300 cosy:hover:shadow-lg cosy:p-4 cosy:rounded cosy:h-full! cosy:hover:scale-105 cosy:transition-transform cosy:duration-300">
+  <h6 class="cosy:footer-title">{title}</h6>
+  {
+    links.map((link) => (
+      <Link
+        href={link.href}
+        external={link.external}
+        size="sm"
+        block
+        animation="hover-lift"
+        centerText>
+        {link.name}
+      </Link>
+    ))
+  }
+</nav>

package/dist/src-astro/nav-section/NavSectionBasic.astro

@@ -0,0 +1,12 @@
+---
+import NavSection from './NavSection.astro';
+---
+
+<NavSection
+  title="产品"
+  links={[
+    { name: '首页', href: '/' },
+    { name: '文档', href: '/docs' },
+    { name: '组件', href: '/components', external: true },
+  ]}
+/>

package/dist/{nav-section → src-astro/nav-section}/index.ts

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

package/dist/src-astro/products/ProductCard.astro

@@ -0,0 +1,374 @@
+---
+/**
+ * @component ProductCard
+ *
+ * @description
+ * ProductCard 组件用于展示产品信息，包括产品名称、图片、描述、App Store链接和产品官网链接。
+ * 组件采用卡片式设计，支持悬停效果，并提供链接到产品相关页面的功能。
+ * 支持多种尺寸选项：xs, sm, md, lg, xl
+ *
+ * @design
+ * 设计理念：
+ * 1. 产品展示 - 突出展示产品的关键信息和图片
+ * 2. 链接跳转 - 提供App Store和产品官网链接
+ * 3. 视觉一致性 - 使用卡片组件确保与整体设计风格一致
+ * 4. 交互反馈 - 悬停时提供视觉反馈，增强用户体验
+ * 5. 尺寸灵活 - 提供多种预设尺寸，适应不同场景需求
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ProductCard
+ *   name="产品名称"
+ *   image="/images/products/product1.jpg"
+ *   description="产品简短描述文本"
+ *   productUrl="https://product-website.com"
+ * />
+ * ```
+ *
+ * 包含App Store链接：
+ * ```astro
+ * <ProductCard
+ *   name="产品名称"
+ *   image="/images/products/product1.jpg"
+ *   description="产品简短描述文本"
+ *   appStoreUrl="https://apps.apple.com/app/product"
+ *   productUrl="https://product-website.com"
+ * />
+ * ```
+ *
+ * 使用不同尺寸：
+ * ```astro
+ * <ProductCard
+ *   size="sm"
+ *   name="小尺寸产品卡片"
+ *   image="/images/products/product1.jpg"
+ *   description="产品简短描述文本"
+ * />
+ * ```
+ *
+ * 统一高度（在Grid或Flex布局中使用）：
+ * ```astro
+ * <div class="cosy:gap-4 cosy:grid cosy:grid-cols-3">
+ *   <ProductCard
+ *     equalHeight
+ *     name="产品1"
+ *     image="/images/products/product1.jpg"
+ *     description="产品描述文本"
+ *   />
+ *   <ProductCard
+ *     equalHeight
+ *     name="产品2"
+ *     image="/images/products/product2.jpg"
+ *     description="另一个产品的描述"
+ *   />
+ * </div>
+ * ```
+ */
+
+import { SocialIcon, Image, Link } from '../../index-astro';
+import '../../style.ts';
+import type { ImageSource } from '../types/image.ts';
+
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface Props {
+  /**
+   * 产品名称
+   */
+  name: string;
+  /**
+   * 产品图片
+   */
+  image: ImageSource;
+  /**
+   * 产品描述
+   */
+  description: string;
+  /**
+   * App Store链接
+   */
+  appStoreUrl?: string;
+  /**
+   * 产品官网链接
+   */
+  productUrl?: string;
+  /**
+   * GitHub仓库链接
+   */
+  githubUrl?: string;
+  /**
+   * 卡片尺寸
+   * - xs: 超小尺寸，适合密集布局
+   * - sm: 小尺寸，适合列表
+   * - md: 中等尺寸，默认
+   * - lg: 大尺寸，适合突出显示
+   * - xl: 超大尺寸，适合特色产品
+   */
+  size?: Size;
+  /**
+   * 主按钮文本（产品官网按钮）
+   */
+  primaryButtonText?: string;
+  /**
+   * 次按钮文本（App Store按钮）
+   */
+  secondaryButtonText?: string;
+  /**
+   * GitHub按钮文本
+   */
+  githubButtonText?: string;
+  /**
+   * 按钮布局方向
+   * - row: 水平布局（默认）
+   * - column: 垂直布局
+   */
+  buttonLayout?: 'row' | 'column';
+  /**
+   * 是否启用等高卡片
+   * 当在grid或flex布局中使用时，设置为true可确保所有卡片高度一致
+   */
+  equalHeight?: boolean;
+  /**
+   * 描述文本的最大行数
+   * 用于控制描述文本的显示行数，超出部分会被截断
+   */
+  descriptionLines?: number;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  name,
+  image,
+  description,
+  appStoreUrl,
+  productUrl,
+  githubUrl,
+  size = 'md',
+  primaryButtonText = '访问官网',
+  secondaryButtonText = 'App Store',
+  githubButtonText = 'GitHub',
+  buttonLayout = 'row',
+  equalHeight = false,
+  descriptionLines,
+  class: className = '',
+} = Astro.props;
+
+// 尺寸样式映射
+const sizeStyles = {
+  xs: {
+    card: 'cosy:max-w-[200px]',
+    figure: 'cosy:p-2',
+    image: {
+      width: 150,
+      height: 100,
+    },
+    title: 'cosy:text-sm',
+    description: 'cosy:text-xs cosy:line-clamp-2',
+    buttons: 'cosy:text-xs cosy:btn-xs',
+    padding: 'cosy:px-3 cosy:py-2',
+    cardHeight: 'cosy:h-[280px]',
+    imageHeight: 'cosy:h-[100px]',
+    bodyHeight: 'cosy:h-[180px]',
+  },
+  sm: {
+    card: 'cosy:max-w-[250px]',
+    figure: 'cosy:p-3',
+    image: {
+      width: 200,
+      height: 133,
+    },
+    title: 'cosy:text-base',
+    description: 'cosy:text-sm cosy:line-clamp-3',
+    buttons: 'cosy:text-sm cosy:btn-sm',
+    padding: 'cosy:px-4 cosy:py-3',
+    cardHeight: 'cosy:h-[360px]',
+    imageHeight: 'cosy:h-[133px]',
+    bodyHeight: 'cosy:h-[227px]',
+  },
+  md: {
+    card: 'cosy:max-w-[320px]',
+    figure: 'cosy:p-4',
+    image: {
+      width: 300,
+      height: 200,
+    },
+    title: 'cosy:text-xl',
+    description: 'cosy:text-base',
+    buttons: '',
+    padding: 'cosy:px-6 cosy:py-4',
+    cardHeight: 'cosy:h-[450px]',
+    imageHeight: 'cosy:h-[200px]',
+    bodyHeight: 'cosy:h-[250px]',
+  },
+  lg: {
+    card: 'cosy:max-w-[400px]',
+    figure: 'cosy:p-5',
+    image: {
+      width: 380,
+      height: 253,
+    },
+    title: 'cosy:text-2xl',
+    description: 'cosy:text-lg',
+    buttons: 'cosy:text-base cosy:btn-lg',
+    padding: 'cosy:px-7 cosy:py-5',
+    cardHeight: 'cosy:h-[550px]',
+    imageHeight: 'cosy:h-[253px]',
+    bodyHeight: 'cosy:h-[297px]',
+  },
+  xl: {
+    card: 'cosy:max-w-[500px]',
+    figure: 'cosy:p-6',
+    image: {
+      width: 480,
+      height: 320,
+    },
+    title: 'cosy:text-3xl',
+    description: 'cosy:text-xl',
+    buttons: 'cosy:text-lg cosy:btn-lg',
+    padding: 'cosy:px-8 cosy:py-6',
+    cardHeight: 'cosy:h-[650px]',
+    imageHeight: 'cosy:h-[320px]',
+    bodyHeight: 'cosy:h-[330px]',
+  },
+};
+
+const currentSize = sizeStyles[size];
+
+// 描述文本的行数限制
+const descriptionClass = descriptionLines
+  ? `cosy:line-clamp-${descriptionLines}`
+  : currentSize.description.includes('line-clamp')
+    ? currentSize.description
+    : `${currentSize.description} cosy:line-clamp-3`;
+
+// 计算按钮布局类名，根据按钮数量和布局方向调整
+const getButtonLayoutClass = () => {
+  let count = 0;
+  if (productUrl) count++;
+  if (appStoreUrl) count++;
+  if (githubUrl) count++;
+
+  // 垂直布局时所有按钮都是全宽
+  if (buttonLayout === 'column') {
+    return 'cosy:w-full';
+  }
+
+  // 水平布局时根据按钮数量选择合适的布局类
+  switch (count) {
+    case 1:
+      return 'cosy:w-full'; // 单个按钮占满一行
+    case 2:
+      return 'cosy:flex-1'; // 两个按钮平分
+    case 3:
+      return 'cosy:flex-1'; // 三个按钮平分
+    default:
+      return '';
+  }
+};
+
+const buttonLayoutClass = getButtonLayoutClass();
+const buttonsContainerClass =
+  buttonLayout === 'column'
+    ? 'cosy:flex cosy:flex-col cosy:gap-2 cosy:mt-auto'
+    : 'cosy:flex cosy:flex-wrap cosy:gap-2 cosy:mt-auto';
+---
+
+<div
+  class:list={[
+    'cosy:card cosy:bg-base-100 cosy:shadow-md cosy:hover:shadow-lg cosy:transition-shadow cosy:duration-300',
+    currentSize.card,
+    equalHeight && currentSize.cardHeight,
+    'cosy:flex cosy:flex-col',
+    className,
+  ]}>
+  <figure
+    class:list={[currentSize.figure, equalHeight && currentSize.imageHeight]}>
+    <Image
+      src={image}
+      alt={`${name} product image`}
+      width={currentSize.image.width}
+      height={currentSize.image.height}
+      rounded="lg"
+      transition="fade"
+      hover="brightness"
+      class="cosy:w-full cosy:h-full cosy:object-cover"
+      loading="lazy"
+      showError={true}
+    />
+  </figure>
+  <div
+    class:list={[
+      currentSize.padding,
+      'cosy:card-body',
+      'cosy:flex cosy:flex-col',
+      equalHeight && currentSize.bodyHeight,
+    ]}>
+    <h2
+      class:list={[
+        'cosy:mb-2 cosy:font-bold cosy:card-title',
+        currentSize.title,
+      ]}>
+      {name}
+    </h2>
+    <p class:list={['cosy:mb-4', descriptionClass]}>{description}</p>
+
+    <div class={buttonsContainerClass}>
+      {
+        productUrl && (
+          <Link
+            href={productUrl}
+            external
+            variant="primary"
+            class:list={[
+              'cosy:btn cosy:bg-[#4468e3] cosy:hover:bg-[#3857cc] cosy:border-0',
+              'cosy:text-white cosy:font-bold cosy:shadow-sm',
+              buttonLayoutClass,
+              currentSize.buttons,
+            ]}
+            aria-label={`Visit ${name}'s website`}>
+            {primaryButtonText}
+          </Link>
+        )
+      }
+      {
+        appStoreUrl && (
+          <Link
+            href={appStoreUrl}
+            external
+            variant="secondary"
+            class:list={[
+              'cosy:btn cosy:bg-[#161616] cosy:hover:bg-black cosy:border-0',
+              'cosy:text-white cosy:font-bold cosy:shadow-sm',
+              buttonLayoutClass,
+              currentSize.buttons,
+            ]}
+            aria-label={`Download ${name} on App Store`}>
+            {secondaryButtonText}
+          </Link>
+        )
+      }
+      {
+        githubUrl && (
+          <Link
+            href={githubUrl}
+            external
+            variant="ghost"
+            class:list={[
+              'cosy:btn cosy:bg-[#f0f0f0] cosy:hover:bg-[#e0e0e0] cosy:border-0',
+              'cosy:text-[#24292f] cosy:font-bold cosy:shadow-sm',
+              buttonLayoutClass,
+              currentSize.buttons,
+            ]}
+            aria-label={`View ${name}'s GitHub repository`}>
+            <SocialIcon platform="github" size="18px" />
+            <span class="cosy:inline-block">{githubButtonText}</span>
+          </Link>
+        )
+      }
+    </div>
+  </div>
+</div>