@coffic/cosy-ui 0.7.4 → 0.8.6

package/dist/card/Card.astro

@@ -1,140 +0,0 @@
----
-/**
- * @component Card
- *
- * @description
- * Card 组件用于在页面中展示相关内容的容器，通常包含标题、描述和可选的图片。
- * 组件设计简洁大方，具有平滑的动画效果和交互反馈，适合展示产品、文章或功能介绍等内容。
- *
- * @design
- * 设计理念：
- * 1. 视觉层次感 - 通过阴影、悬停效果和微妙的动画创造深度感
- * 2. 内容聚焦 - 简洁的布局让用户关注卡片内容
- * 3. 交互反馈 - 悬停和点击时提供明确的视觉反馈
- * 4. 适应性强 - 响应式设计，适应不同屏幕尺寸
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Card
- *   title="卡片标题"
- *   subtitle="卡片描述文本"
- * >
- *   卡片内容
- * </Card>
- * ```
- *
- * 带图片的卡片：
- * ```astro
- * <Card
- *   title="产品名称"
- *   subtitle="产品描述"
- *   imageUrl="/path/to/image.jpg"
- * >
- *   其他产品信息
- * </Card>
- * ```
- *
- * 可点击的卡片（链接）：
- * ```astro
- * <Card
- *   title="文章标题"
- *   subtitle="文章摘要"
- *   imageUrl="/path/to/image.jpg"
- *   href="/articles/article-slug"
- * />
- * ```
- *
- * 紧凑模式：
- * ```astro
- * <Card
- *   title="紧凑卡片"
- *   subtitle="更小的内边距"
- *   compact
- * >
- *   适合在空间有限的情况下使用
- * </Card>
- * ```
- *
- * @props
- * @prop {string} title - 卡片标题
- * @prop {string} [subtitle] - 卡片副标题或描述
- * @prop {string} [imageUrl] - 卡片顶部图片的URL
- * @prop {string} [href] - 如果提供，卡片将变成可点击的链接
- * @prop {boolean} [compact] - 是否使用紧凑模式
- * @prop {string} [class] - 自定义CSS类，可用于覆盖默认样式
- *
- * @slots
- * @slot default - 卡片的主要内容区域
- */
-
-import '../style.ts';
-
-interface Props {
-	title: string;
-	subtitle?: string;
-	imageUrl?: string;
-	href?: string;
-	compact?: boolean;
-	class?: string;
-}
-
-const { title, subtitle, imageUrl, href, compact, class: className = '' } = Astro.props;
-
-// 构建卡片样式类
-const cardClasses = [
-	'cosy:card',
-	'cosy:w-full',
-	'cosy:bg-base-100',
-	'cosy:shadow-xl',
-	'cosy:hover:shadow-2xl',
-	'cosy:transition-all',
-	'cosy:duration-300',
-	'cosy:ease-in-out',
-	compact ? 'cosy:card-compact' : '',
-	href ? 'cosy:cursor-pointer cosy:hover:scale-105 cosy:transform cosy:no-underline' : '',
-	className,
-]
-	.filter(Boolean)
-	.join(' ');
-
-// 内容区域的padding类
-const contentPadding = compact ? 'cosy:p-4' : 'cosy:p-6';
-
-// 如果是链接卡片，使用a标签，否则使用article标签
-const Tag = href ? 'a' : 'article';
----
-
-<Tag class={cardClasses} href={href} {...href && { target: '_self' }}>
-	{
-		imageUrl && (
-			<figure class="not-prose cosy:m-0 cosy:p-0">
-				<img
-					src={imageUrl}
-					alt={title}
-					class="cosy:w-full cosy:h-48 cosy:object-cover cosy:rounded-t-lg"
-				/>
-			</figure>
-		)
-	}
-
-	<div class={`cosy:card-body ${contentPadding}`}>
-		<h2 class="cosy:card-title cosy:text-xl cosy:font-bold">
-			{title}
-		</h2>
-
-		{
-			subtitle && (
-				<p class="cosy:text-base-content/70 cosy:text-sm cosy:leading-relaxed">{subtitle}</p>
-			)
-		}
-
-		{
-			Astro.slots.has('default') && (
-				<div class="cosy:mt-4">
-					<slot />
-				</div>
-			)
-		}
-	</div>
-</Tag>

package/dist/card/CardCompact.astro

@@ -1,77 +0,0 @@
----
-/**
- * CardCompact - 紧凑模式卡片组件
- *
- * @prop {string} [title] - 卡片标题
- * @prop {string} [subtitle] - 卡片副标题或描述
- * @prop {string} [class] - 自定义CSS类
- */
-
-import '../style.ts';
-
-interface Props {
-	title?: string;
-	subtitle?: string;
-	class?: string;
-}
-
-const { title, subtitle, class: className = '' } = Astro.props;
-
-const cardClasses = [
-	'cosy-card',
-	'cosy:bg-base-100',
-	'cosy:bg-opacity-70',
-	'cosy:backdrop-blur-sm',
-	'cosy:rounded-xl',
-	'cosy:shadow-md',
-	'cosy:overflow-hidden',
-	'cosy:transition-all',
-	'cosy:duration-300',
-	'cosy:ease-in-out',
-	'cosy:hover:shadow-lg',
-	'cosy:hover:scale-[1.02]',
-	'cosy-card--compact',
-	className,
-].join(' ');
----
-
-<article class={cardClasses}>
-	<header class="cosy-card__header">
-		<h3 class="cosy-card__title">{title}</h3>
-		{subtitle && <p class="cosy-card__subtitle">{subtitle}</p>}
-	</header>
-
-	<div class="cosy-card__content">
-		<slot />
-	</div>
-</article>
-
-<style scoped>
-	.cosy-card--compact {
-		padding: 0.75rem;
-	}
-
-	.cosy-card__header {
-		margin-bottom: 0.5rem;
-	}
-
-	.cosy-card__title {
-		font-size: 0.95rem;
-		margin-bottom: 0.25rem;
-	}
-
-	.cosy-card__subtitle {
-		font-size: 0.85rem;
-	}
-
-	.cosy-card__content {
-		font-size: 0.85rem;
-		line-height: 1.4;
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.cosy-card:hover {
-			transform: none !important;
-		}
-	}
-</style>

package/dist/card/CardCourse.astro

@@ -1,32 +0,0 @@
----
-import { Image } from 'astro:assets';
-import bookCover from '../assets/book.png';
-
-interface Props {
-	title: string;
-	link: string;
-}
-
-const { title, link } = Astro.props;
----
-
-<div>
-	<a href={link} class="justify-center flex no-underline text-base-content">
-		<div class="w-56 h-80">
-			<div
-				class="bg-gradient-to-br w-full h-full from-accent/50 to-primary/30 rounded-3xl shadow-lg backdrop-blur-sm">
-				<div
-					class="bg-base-100/60 w-full h-full rounded-3xl border border-base-content/30 hover:scale-105 hover:shadow-2xl transform duration-200 backdrop-filter backdrop-blur-sm">
-					<div class="card-body p-1 h-full">
-						<Image src={bookCover} alt={title} class="h-3/5 w-full" />
-						<div>
-							<h2 class="text-lg text-center font-medium">
-								{title}
-							</h2>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</a>
-</div>

package/dist/card/CardLink.astro

@@ -1,75 +0,0 @@
----
-/**
- * CardLink - 可点击的卡片组件
- *
- * @prop {string} [title] - 卡片标题
- * @prop {string} [subtitle] - 卡片副标题或描述
- * @prop {string} [imageUrl] - 卡片图片URL
- * @prop {string} [href] - 卡片链接地址
- * @prop {string} [class] - 自定义CSS类
- */
-
-import '../style.ts';
-
-interface Props {
-	title?: string;
-	subtitle?: string;
-	imageUrl?: string;
-	href: string;
-	class?: string;
-}
-
-const { title, subtitle, imageUrl, href, class: className = '' } = Astro.props;
-
-const cardClasses = [
-	'cosy-card',
-	'cosy:bg-base-100',
-	'cosy:bg-opacity-70',
-	'cosy:backdrop-blur-sm',
-	'cosy:rounded-xl',
-	'cosy:shadow-md',
-	'cosy:overflow-hidden',
-	'cosy:transition-all',
-	'cosy:duration-300',
-	'cosy:ease-in-out',
-	'cosy:hover:shadow-lg',
-	'cosy:hover:scale-[1.02]',
-	className,
-].join(' ');
----
-
-<a href={href} class={cardClasses} aria-label={`${title} ${subtitle || ''}`.trim()}>
-	{
-		imageUrl && (
-			<div
-				class="cosy-card__image"
-				style={`background-image: url(${imageUrl})`}
-				aria-hidden="true"
-			/>
-		)
-	}
-
-	<header class="cosy-card__header">
-		<h3 class="cosy-card__title">{title}</h3>
-		{subtitle && <p class="cosy-card__subtitle">{subtitle}</p>}
-	</header>
-
-	<div class="cosy-card__content">
-		<slot />
-	</div>
-</a>
-
-<style scoped>
-	.cosy-card__image {
-		height: 180px;
-		background-size: cover;
-		background-position: center;
-		border-radius: 12px 12px 0 0;
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.cosy-card:hover {
-			transform: none !important;
-		}
-	}
-</style>

package/dist/card/CardWithImage.astro

@@ -1,39 +0,0 @@
----
-import '../style.ts';
-
-interface Props {
-	title: string;
-	subtitle?: string;
-	imageUrl: string;
-	class?: string;
-}
-
-const { title, subtitle, imageUrl, class: className } = Astro.props;
----
-
-<article class={`cosy-card cosy-card--with-image ${className || ''}`}>
-	<div class="cosy-card__image" style={`background-image: url(${imageUrl})`} aria-hidden="true">
-	</div>
-
-	<header class="cosy-card__header">
-		<h3 class="cosy-card__title">{title}</h3>
-		{subtitle && <p class="cosy-card__subtitle">{subtitle}</p>}
-	</header>
-
-	<div class="cosy-card__content">
-		<slot />
-	</div>
-</article>
-
-<style>
-	.cosy-card__image {
-		height: 160px;
-		background-size: cover;
-		background-position: center;
-		border-radius: 8px 8px 0 0;
-	}
-
-	.cosy-card__header {
-		padding-top: 1rem;
-	}
-</style>

package/dist/card/ECardBasic.astro

@@ -1,11 +0,0 @@
----
-/**
- * @component Card.Basic
- *
- * @description
- * 基础Card组件示例，展示最简单的卡片用法。
- */
-import { Card } from '../index';
----
-
-<Card title="基础卡片"> 这是一个基础的卡片内容，展示了Card组件的最简单用法。 </Card>

package/dist/card/ECardBasicContainer.astro

@@ -1,11 +0,0 @@
----
-import { CodeContainer } from '../index';
-import CardBasic from './ECardBasic.astro';
-import CardBasicSourceCode from './ECardBasic.astro?raw';
----
-
-<CodeContainer codes={[CardBasicSourceCode]}>
-	<div id="tab-1">
-		<CardBasic />
-	</div>
-</CodeContainer>

package/dist/card/ECardClickable.astro

@@ -1,13 +0,0 @@
----
-/**
- * @component Card.Clickable
- *
- * @description
- * 可点击的Card组件示例，展示如何使用href属性创建链接卡片。
- */
-import { Card } from '../index';
----
-
-<Card title="可点击的卡片" subtitle="点击整个卡片区域可以跳转到指定链接" href="#">
-	这是一个可点击的卡片，鼠标悬停时会有缩放效果，点击可以跳转到指定页面。
-</Card>

package/dist/card/ECardClickableContainer.astro

@@ -1,11 +0,0 @@
----
-import { CodeContainer } from '../index';
-import CardClickable from './ECardClickable.astro';
-import CardClickableSourceCode from './ECardClickable.astro?raw';
----
-
-<CodeContainer codes={[CardClickableSourceCode]}>
-	<div id="tab-1">
-		<CardClickable />
-	</div>
-</CodeContainer>

package/dist/card/ECardCompact.astro

@@ -1,13 +0,0 @@
----
-/**
- * @component Card.Compact
- *
- * @description
- * 紧凑模式的Card组件示例，展示如何使用compact属性。
- */
-import { Card } from '../index';
----
-
-<Card title="紧凑卡片" subtitle="使用compact模式可以减少内边距" compact>
-	这是一个紧凑模式的卡片，适合在空间有限的情况下使用。
-</Card>

package/dist/card/ECardCompactContainer.astro

@@ -1,11 +0,0 @@
----
-import { CodeContainer } from '../index';
-import CardCompact from './ECardCompact.astro';
-import CardCompactSourceCode from './ECardCompact.astro?raw';
----
-
-<CodeContainer codes={[CardCompactSourceCode]}>
-	<div id="tab-1">
-		<CardCompact />
-	</div>
-</CodeContainer>

package/dist/card/ECardCustomStyle.astro

@@ -1,17 +0,0 @@
----
-/**
- * @component Card.CustomStyle
- *
- * @description
- * 展示如何使用class属性自定义Card组件的样式。
- */
-import '../style.ts';
-import { Card } from '../index';
----
-
-<Card
-	title="自定义样式卡片"
-	subtitle="这个卡片使用了自定义的背景色和边框"
-	class="cosy:bg-gradient-to-r cosy:from-blue-50 cosy:to-indigo-100 cosy:border-2 cosy:border-blue-200">
-	这是一个自定义样式的卡片，展示了如何通过class属性来覆盖默认样式。
-</Card>

package/dist/card/ECardCustomStyleContainer.astro

@@ -1,11 +0,0 @@
----
-import { CodeContainer } from '../index';
-import CardCustomStyle from './ECardCustomStyle.astro';
-import CardCustomStyleSourceCode from './ECardCustomStyle.astro?raw';
----
-
-<CodeContainer codes={[CardCustomStyleSourceCode]}>
-	<div id="tab-1">
-		<CardCustomStyle />
-	</div>
-</CodeContainer>

package/dist/card/ECardWithImage.astro

@@ -1,16 +0,0 @@
----
-/**
- * @component Card.WithImage
- *
- * @description
- * 带图片的Card组件示例，展示如何使用imageUrl属性。
- */
-import { Card } from '../index';
----
-
-<Card
-	title="带图片的卡片"
-	subtitle="这张卡片展示了如何添加顶部图片"
-	imageUrl="https://picsum.photos/400/200?random=1">
-	这是一个带有图片的卡片，图片会自动显示在卡片顶部，并适配卡片宽度。
-</Card>

package/dist/card/ECardWithImageContainer.astro

@@ -1,11 +0,0 @@
----
-import { CodeContainer } from '../index';
-import CardWithImage from './ECardWithImage.astro';
-import CardWithImageSourceCode from './ECardWithImage.astro?raw';
----
-
-<CodeContainer codes={[CardWithImageSourceCode]}>
-	<div id="tab-1">
-		<CardWithImage />
-	</div>
-</CodeContainer>

package/dist/card/ECardWithSubtitle.astro

@@ -1,13 +0,0 @@
----
-/**
- * @component Card.WithSubtitle
- *
- * @description
- * 带副标题的Card组件示例，展示如何使用subtitle属性。
- */
-import { Card } from '../index';
----
-
-<Card title="带副标题的卡片" subtitle="这是卡片的副标题，用于提供更多描述信息">
-	卡片的主要内容区域，可以包含更详细的信息和其他元素。
-</Card>

package/dist/card/ECardWithSubtitleContainer.astro

@@ -1,11 +0,0 @@
----
-import { CodeContainer } from '../index';
-import CardWithSubtitle from './ECardWithSubtitle.astro';
-import CardWithSubtitleSourceCode from './ECardWithSubtitle.astro?raw';
----
-
-<CodeContainer codes={[CardWithSubtitleSourceCode]}>
-	<div id="tab-1">
-		<CardWithSubtitle />
-	</div>
-</CodeContainer>

package/dist/card/index.ts

@@ -1,33 +0,0 @@
-import Card from './Card.astro';
-import CardCourse from './CardCourse.astro';
-import CardBasic from './CardBasic.astro';
-import CardWithImage from './CardWithImage.astro';
-import CardLink from './CardLink.astro';
-import CardCompact from './CardCompact.astro';
-
-// Container components
-import CardBasicContainer from './ECardBasicContainer.astro';
-import CardWithSubtitleContainer from './ECardWithSubtitleContainer.astro';
-import CardWithImageContainer from './ECardWithImageContainer.astro';
-import CardClickableContainer from './ECardClickableContainer.astro';
-import CardCompactContainer from './ECardCompactContainer.astro';
-import CardCustomStyleContainer from './ECardCustomStyleContainer.astro';
-
-export { Card };
-export { CardCourse };
-export { CardBasic };
-export { CardWithImage };
-export { CardLink };
-export { CardCompact };
-
-export const CardPackage = {
-    Card,
-    CardContainers: {
-        Basic: CardBasicContainer,
-        WithSubtitle: CardWithSubtitleContainer,
-        WithImage: CardWithImageContainer,
-        Clickable: CardClickableContainer,
-        Compact: CardCompactContainer,
-        CustomStyle: CardCustomStyleContainer,
-    },
-};