@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/products/ProductCard.astro

@@ -1,375 +0,0 @@
----
-/**
- * @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';
-import '../style.ts';
-import type { ImageSource } from '../types/image';
-
-// 自定义图片元数据接口，替代 astro 的 ImageMetadata
-interface CustomImageMetadata {
-	src: string;
-	width: number;
-	height: number;
-	format: string;
-}
-
-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>

package/dist/products/Products.astro

@@ -1,195 +0,0 @@
----
-/**
- * @component Products
- *
- * @description
- * Products 组件是ProductCard的容器集合，用于展示多个产品卡片。
- * 组件会自动根据父容器大小调整布局，确保在任何视口大小下都能整齐排列产品卡片。
- * 支持网格和列表两种布局模式，并提供多种配置选项以适应不同场景需求。
- *
- * @design
- * 设计理念：
- * 1. 响应式布局 - 自动适应父容器大小，在不同设备上呈现最佳效果
- * 2. 灵活配置 - 提供多种布局选项、间距设置和对齐方式
- * 3. 统一展示 - 确保所有产品卡片视觉一致，提供等高选项
- * 4. 性能优化 - 支持懒加载和分页显示大量产品
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Products
- *   products={[
- *     {
- *       name: "产品1",
- *       image: "/images/products/product1.jpg",
- *       description: "产品1描述",
- *       productUrl: "https://product1.com"
- *     },
- *     {
- *       name: "产品2",
- *       image: "/images/products/product2.jpg",
- *       description: "产品2描述",
- *       appStoreUrl: "https://apps.apple.com/app/product2"
- *     }
- *   ]}
- * />
- * ```
- *
- * 使用网格布局并设置列数：
- * ```astro
- * <Products
- *   layout="grid"
- *   columns={{ base: 1, sm: 2, md: 3, lg: 4 }}
- *   products={products}
- * />
- * ```
- *
- * 使用列表布局：
- * ```astro
- * <Products
- *   layout="list"
- *   products={products}
- * />
- * ```
- *
- * 自定义卡片尺寸和间距：
- * ```astro
- * <Products
- *   cardSize="sm"
- *   gap="lg"
- *   products={products}
- * />
- * ```
- */
-
-import { ProductCard } from '../index';
-import '../style.ts';
-import type { Props as ProductCardProps } from './ProductCard.astro';
-
-// 定义产品项类型
-type ProductItem = Omit<ProductCardProps, 'class'>;
-
-// 定义响应式列数配置
-type ResponsiveColumns = {
-	base?: number; // 默认列数
-	sm?: number; // 小屏幕列数
-	md?: number; // 中等屏幕列数
-	lg?: number; // 大屏幕列数
-	xl?: number; // 超大屏幕列数
-};
-
-// 定义间距大小
-type GapSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-// 定义布局类型
-type LayoutType = 'grid' | 'list';
-
-export interface Props {
-	/**
-	 * 产品数据数组
-	 */
-	products: ProductItem[];
-	/**
-	 * 布局类型
-	 * - grid: 网格布局（默认）
-	 * - list: 列表布局
-	 */
-	layout?: LayoutType;
-	/**
-	 * 列数配置
-	 * 可以为固定数字或响应式对象
-	 * 例如: { base: 1, sm: 2, md: 3, lg: 4 }
-	 */
-	columns?: number | ResponsiveColumns;
-	/**
-	 * 卡片尺寸
-	 * 应用于所有ProductCard
-	 */
-	cardSize?: ProductCardProps['size'];
-	/**
-	 * 卡片间距
-	 * - xs: 超小间距
-	 * - sm: 小间距
-	 * - md: 中等间距（默认）
-	 * - lg: 大间距
-	 * - xl: 超大间距
-	 */
-	gap?: GapSize;
-	/**
-	 * 是否启用等高卡片
-	 * 确保所有卡片高度一致
-	 */
-	equalHeight?: boolean;
-	/**
-	 * 描述文本的最大行数
-	 * 应用于所有ProductCard
-	 */
-	descriptionLines?: number;
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
-}
-
-const {
-	products,
-	layout = 'grid',
-	columns = { base: 1, sm: 2, md: 3, lg: 4 },
-	cardSize = 'md',
-	gap = 'md',
-	equalHeight = true,
-	descriptionLines,
-	class: className = '',
-} = Astro.props;
-
-// 间距映射
-const gapMap = {
-	xs: 'cosy:gap-1',
-	sm: 'cosy:gap-2',
-	md: 'cosy:gap-4',
-	lg: 'cosy:gap-6',
-	xl: 'cosy:gap-8',
-};
-
-// 获取响应式列数类名
-const getColumnsClasses = () => {
-	if (typeof columns === 'number') {
-		return `cosy:grid-cols-${columns}`;
-	}
-
-	const { base = 1, sm, md, lg, xl } = columns;
-	const classes = [`cosy:grid-cols-${base}`];
-
-	if (sm) classes.push(`cosy:sm:grid-cols-${sm}`);
-	if (md) classes.push(`cosy:md:grid-cols-${md}`);
-	if (lg) classes.push(`cosy:lg:grid-cols-${lg}`);
-	if (xl) classes.push(`cosy:xl:grid-cols-${xl}`);
-
-	return classes.join(' ');
-};
-
-// 获取布局类名
-const getLayoutClasses = () => {
-	if (layout === 'grid') {
-		return ['cosy:grid', getColumnsClasses()];
-	} else {
-		return ['cosy:flex', 'cosy:flex-col'];
-	}
-};
-
-// 构建容器类名
-const containerClasses = [...getLayoutClasses(), gapMap[gap], 'cosy:w-full', className];
----
-
-<div class:list={containerClasses}>
-	{
-		products.map((product) => (
-			<ProductCard
-				{...product}
-				size={cardSize}
-				equalHeight={equalHeight}
-				descriptionLines={descriptionLines}
-			/>
-		))
-	}
-</div>

package/dist/products/index.ts

@@ -1,2 +0,0 @@
-export { default as Products } from './Products.astro';
-export { default as ProductCard } from './ProductCard.astro';

package/dist/section/Section.astro

@@ -1,140 +0,0 @@
----
-/**
- * Section组件
- *
- * 一个用于页面内容区块的组件，支持不同的内边距、背景和间距
- *
- * @example
- * ```astro
- * <Section>
- *   <h2>默认区块</h2>
- *   <p>内容将被包裹在一个合适的区块中</p>
- * </Section>
- *
- * <Section padding="lg" background="gray" centered={true} border={true}>
- *   <h2>自定义区块</h2>
- *   <p>大内边距，灰色背景，内容居中，带边框</p>
- * </Section>
- * ```
- */
-
-import type { HTMLAttributes } from 'astro/types';
-import Container from '../container/Container.astro';
-import '../style.ts';
-
-interface Props extends HTMLAttributes<'section'> {
-	/**
-	 * 内边距大小
-	 * @default "md"
-	 */
-	padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-
-	/**
-	 * 背景颜色
-	 * @default "transparent"
-	 */
-	background?: 'transparent' | 'white' | 'gray' | 'primary' | 'secondary' | 'dark';
-
-	/**
-	 * 是否使用容器包裹内容
-	 * @default true
-	 */
-	container?: boolean;
-
-	/**
-	 * 容器尺寸，仅当container为true时有效
-	 * @default "md"
-	 */
-	containerSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-
-	/**
-	 * 内容是否居中
-	 * @default false
-	 */
-	centered?: boolean;
-
-	/**
-	 * 是否显示边框
-	 * @default false
-	 */
-	border?: boolean;
-
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
-
-	/**
-	 * 类名列表
-	 */
-	'class:list'?: any;
-
-	/**
-	 * 自定义ID
-	 */
-	id?: string;
-
-	/**
-	 * 自定义内联样式
-	 */
-	style?: string;
-}
-
-const {
-	padding = 'md',
-	background = 'transparent',
-	container = true,
-	containerSize = 'md',
-	centered = false,
-	border = false,
-	class: className = '',
-	'class:list': classList,
-	id,
-	style,
-	...rest
-} = Astro.props;
-
-// 内边距映射
-const paddingClasses = {
-	none: 'cosy:py-0',
-	sm: 'cosy:py-6',
-	md: 'cosy:py-12',
-	lg: 'cosy:py-16',
-	xl: 'cosy:py-24',
-};
-
-// 背景颜色映射
-const backgroundClasses = {
-	transparent: 'cosy:bg-transparent',
-	white: 'cosy:bg-base-100',
-	gray: 'cosy:bg-base-200',
-	primary: 'cosy:bg-primary/10',
-	secondary: 'cosy:bg-secondary/10',
-	dark: 'cosy:bg-neutral cosy:text-neutral-content',
-};
-
-// 构建最终类名
-const sectionClasses = [
-	paddingClasses[padding as keyof typeof paddingClasses],
-	backgroundClasses[background as keyof typeof backgroundClasses],
-	border ? 'cosy:border cosy:rounded-lg' : '',
-	className,
-].join(' ');
-
-// 内容类名
-const contentClasses = centered ? 'cosy:text-center' : '';
----
-
-<section id={id} class:list={[sectionClasses, classList]} style={style} {...rest}>
-	{
-		container ? (
-			<Container size={containerSize} class={contentClasses}>
-				<slot />
-			</Container>
-		) : (
-			<div class={contentClasses}>
-				<slot />
-			</div>
-		)
-	}
-</section>

package/dist/section/index.ts

@@ -1 +0,0 @@
-export { default as Section } from './Section.astro';