@coffic/cosy-ui 0.6.42 → 0.7.4

package/dist/button/ButtonBasicContainer.astro

@@ -1,17 +1,11 @@
 ---
 import { CodeContainer } from '../index';
 import ButtonBasic from './ButtonBasic.astro';
-import VueButtonBasic from './ButtonBasic.vue';
 import ButtonBasicSourceCode from './ButtonBasic.astro?raw';
-import VueButtonBasicSourceCode from './ButtonBasic.vue?raw';
 ---
 
-<CodeContainer codes={[ButtonBasicSourceCode, VueButtonBasicSourceCode]} titles={['Astro', 'Vue']}>
+<CodeContainer codes={[ButtonBasicSourceCode]} titles={['Basic']}>
 	<div id="tab-1">
 		<ButtonBasic />
 	</div>
-
-	<div id="tab-2">
-		<VueButtonBasic client:load />
-	</div>
 </CodeContainer>

package/dist/button/ButtonLinkContainer.astro

@@ -1,16 +1,14 @@
 ---
 import { CodeContainer } from '../index';
 import ButtonLink from './ButtonLink.astro';
-import VueButtonLink from './ButtonLink.vue';
 import ButtonLinkExternal from './ButtonLinkExternal.astro';
 import ButtonLinkSourceCode from './ButtonLink.astro?raw';
-import VueButtonLinkSourceCode from './ButtonLink.vue?raw';
 import ButtonLinkExternalSourceCode from './ButtonLinkExternal.astro?raw';
 ---
 
 <CodeContainer
 	titles={['基础链接', '外部链接', 'Vue']}
-	codes={[ButtonLinkSourceCode, ButtonLinkExternalSourceCode, VueButtonLinkSourceCode]}>
+	codes={[ButtonLinkSourceCode, ButtonLinkExternalSourceCode]}>
 	<div id="tab-1">
 		<ButtonLink />
 	</div>
@@ -18,8 +16,4 @@ import ButtonLinkExternalSourceCode from './ButtonLinkExternal.astro?raw';
 	<div id="tab-2">
 		<ButtonLinkExternal />
 	</div>
-
-	<div id="tab-3">
-		<VueButtonLink client:load />
-	</div>
 </CodeContainer>

package/dist/button/ButtonSizesContainer.astro

@@ -1,17 +1,11 @@
 ---
 import { CodeContainer } from '../index';
 import ButtonSizes from './ButtonSizes.astro';
-import VueButtonSizes from './ButtonSizes.vue';
 import ButtonSizesSourceCode from './ButtonSizes.astro?raw';
-import VueButtonSizesSourceCode from './ButtonSizes.vue?raw';
 ---
 
-<CodeContainer codes={[ButtonSizesSourceCode, VueButtonSizesSourceCode]} titles={['Astro', 'Vue']}>
+<CodeContainer codes={[ButtonSizesSourceCode]}>
 	<div id="tab-1">
 		<ButtonSizes />
 	</div>
-
-	<div id="tab-2">
-		<VueButtonSizes client:load />
-	</div>
 </CodeContainer>

package/dist/button/ButtonVariantsContainer.astro

@@ -8,7 +8,6 @@ import ButtonGhost from './ButtonGhost.astro';
 import ButtonLink from './ButtonLink.astro';
 import ButtonOutline from './ButtonOutline.astro';
 import ButtonNeutral from './ButtonNeutral.astro';
-import VueButtonVariants from './ButtonVariants.vue';
 import ButtonInfoSourceCode from './ButtonInfo.astro?raw';
 import ButtonSuccessSourceCode from './ButtonSuccess.astro?raw';
 import ButtonWarningSourceCode from './ButtonWarning.astro?raw';
@@ -17,11 +16,10 @@ import ButtonGhostSourceCode from './ButtonGhost.astro?raw';
 import ButtonLinkSourceCode from './ButtonLink.astro?raw';
 import ButtonOutlineSourceCode from './ButtonOutline.astro?raw';
 import ButtonNeutralSourceCode from './ButtonNeutral.astro?raw';
-import VueButtonVariantsSourceCode from './ButtonVariants.vue?raw';
 ---
 
 <CodeContainer
-	titles={['Info', 'Success', 'Warning', 'Error', 'Ghost', 'Link', 'Outline', 'Neutral', 'Vue']}
+	titles={['Info', 'Success', 'Warning', 'Error', 'Ghost', 'Link', 'Outline', 'Neutral']}
 	codes={[
 		ButtonInfoSourceCode,
 		ButtonSuccessSourceCode,
@@ -31,7 +29,6 @@ import VueButtonVariantsSourceCode from './ButtonVariants.vue?raw';
 		ButtonLinkSourceCode,
 		ButtonOutlineSourceCode,
 		ButtonNeutralSourceCode,
-		VueButtonVariantsSourceCode,
 	]}>
 	<div id="tab-1">
 		<ButtonInfo />
@@ -64,8 +61,4 @@ import VueButtonVariantsSourceCode from './ButtonVariants.vue?raw';
 	<div id="tab-8">
 		<ButtonNeutral />
 	</div>
-
-	<div id="tab-9">
-		<VueButtonVariants client:load />
-	</div>
 </CodeContainer>

package/dist/button/ButtonWithIconsContainer.astro

@@ -3,21 +3,14 @@ import { CodeContainer } from '../index';
 import ButtonIconLeft from './ButtonIconLeft.astro';
 import ButtonIconRight from './ButtonIconRight.astro';
 import ButtonIconBoth from './ButtonIconBoth.astro';
-import VueButtonWithIcons from './ButtonWithIcons.vue';
 import ButtonIconLeftSourceCode from './ButtonIconLeft.astro?raw';
 import ButtonIconRightSourceCode from './ButtonIconRight.astro?raw';
 import ButtonIconBothSourceCode from './ButtonIconBoth.astro?raw';
-import VueButtonWithIconsSourceCode from './ButtonWithIcons.vue?raw';
 ---
 
 <CodeContainer
-	titles={['左侧图标', '右侧图标', '两侧图标', 'Vue']}
-	codes={[
-		ButtonIconLeftSourceCode,
-		ButtonIconRightSourceCode,
-		ButtonIconBothSourceCode,
-		VueButtonWithIconsSourceCode,
-	]}>
+	titles={['左侧图标', '右侧图标', '两侧图标']}
+	codes={[ButtonIconLeftSourceCode, ButtonIconRightSourceCode, ButtonIconBothSourceCode]}>
 	<div id="tab-1">
 		<ButtonIconLeft />
 	</div>
@@ -29,8 +22,4 @@ import VueButtonWithIconsSourceCode from './ButtonWithIcons.vue?raw';
 	<div id="tab-3">
 		<ButtonIconBoth />
 	</div>
-
-	<div id="tab-4">
-		<VueButtonWithIcons client:load />
-	</div>
 </CodeContainer>

package/dist/button/index_astro.ts

@@ -24,7 +24,6 @@ import ButtonLink from './ButtonLink.astro';
 import ButtonLinkExternal from './ButtonLinkExternal.astro';
 import ButtonOutline from './ButtonOutline.astro';
 import ButtonNeutral from './ButtonNeutral.astro';
-import ButtonFeatureContainer from './ButtonFeatureContainer.astro';
 
 export {
 	Button
@@ -59,6 +58,5 @@ export const ButtonPackage = {
 		Width: ButtonWidthContainer,
 		Variants: ButtonVariantsContainer,
 		Link: ButtonLinkContainer,
-		Feature: ButtonFeatureContainer,
 	}
-};
+};

package/dist/buttons-vue/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button.vue'

package/dist/card/Card.astro

@@ -57,7 +57,7 @@
  * ```
  *
  * @props
- * @prop {string} [title] - 卡片标题
+ * @prop {string} title - 卡片标题
  * @prop {string} [subtitle] - 卡片副标题或描述
  * @prop {string} [imageUrl] - 卡片顶部图片的URL
  * @prop {string} [href] - 如果提供，卡片将变成可点击的链接
@@ -73,19 +73,68 @@ import '../style.ts';
 interface Props {
 	title: string;
 	subtitle?: string;
+	imageUrl?: string;
+	href?: string;
+	compact?: boolean;
 	class?: string;
 }
 
-const { title, subtitle, class: className } = Astro.props;
+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';
 ---
 
-<article class={`cosy-card ${className || ''}`}>
-	<header class="cosy-card__header">
-		<h3 class="cosy-card__title">{title}</h3>
-		{subtitle && <p class="cosy-card__subtitle">{subtitle}</p>}
-	</header>
+<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>
+			)
+		}
 
-	<div class="cosy-card__content">
-		<slot />
+		{
+			Astro.slots.has('default') && (
+				<div class="cosy:mt-4">
+					<slot />
+				</div>
+			)
+		}
 	</div>
-</article>
+</Tag>

package/dist/card/ECardBasic.astro

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

package/dist/card/ECardBasicContainer.astro

@@ -0,0 +1,11 @@
+---
+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

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

package/dist/card/ECardClickableContainer.astro

@@ -0,0 +1,11 @@
+---
+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

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

package/dist/card/ECardCompactContainer.astro

@@ -0,0 +1,11 @@
+---
+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

@@ -0,0 +1,17 @@
+---
+/**
+ * @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

@@ -0,0 +1,11 @@
+---
+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

@@ -0,0 +1,16 @@
+---
+/**
+ * @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

@@ -0,0 +1,11 @@
+---
+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

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

package/dist/card/ECardWithSubtitleContainer.astro

@@ -0,0 +1,11 @@
+---
+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,7 +1,33 @@
+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';
 
-export { default as Card } from './Card.astro';
-export { default as CardCourse } from './CardCourse.astro';
-export { default as CardBasic } from './CardBasic.astro';
-export { default as CardWithImage } from './CardWithImage.astro';
-export { default as CardLink } from './CardLink.astro';
-export { default as 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,
+    },
+};

package/dist/code-container/CodeContainer.astro

@@ -84,7 +84,7 @@ const { titles = [], descriptions = [], codes } = Astro.props;
 				data-example={`tab-${index + 1}`}>
 				{/* 描述 */}
 				{descriptions[index] && (
-					<p class="cosy:px-4 cosy:py-2  cosy:bg-gradient-to-b not-prose cosy:from-blue-100/50 cosy:to-blue-100/90 ">
+					<p class="cosy:px-4 cosy:py-2 cosy:text-sm cosy:bg-gradient-to-b not-prose cosy:from-blue-100/50 cosy:to-blue-100/90 ">
 						{descriptions[index]}
 					</p>
 				)}
@@ -113,7 +113,7 @@ const { titles = [], descriptions = [], codes } = Astro.props;
 		const exampleTabs = document.querySelectorAll('[role="tab"][data-tab^="tab-"]');
 		exampleTabs.forEach((tab) => {
 			tab.addEventListener('click', () => {
-				console.log('CodeContainer: 切换示例', tab);
+				console.log('CodeContainer: 切换示例', tab.getAttribute('data-tab'));
 				const container = tab.closest('[data-role="code-container"]');
 				if (!container) return;
 

package/dist/code-container/index.ts

@@ -1,14 +1,14 @@
 import { default as CodeContainer } from './CodeContainer.astro';
-import { default as CodeContainerBasic } from './CodeContainerBasic.astro';
-import { default as CodeContainerMultiple } from './CodeContainerMultiple.astro';
-import BasicSourceCode from './CodeContainerBasic.astro?raw';
-import MultipleSourceCode from './CodeContainerMultiple.astro?raw';
+import { default as CodeContainerBasic } from './ECodeContainerBasic.astro';
+import { default as CodeContainerMultiple } from './ECodeContainerMultiple.astro';
+import BasicSourceCode from './ECodeContainerBasic.astro?raw';
+import MultipleSourceCode from './ECodeContainerMultiple.astro?raw';
 import { extractSimpleExample } from '../utils/component';
 
 export { CodeContainer, CodeContainerBasic, CodeContainerMultiple };
 
 // 导出示例源代码
 export const CodeContainerExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'CodeContainer'),
-  Multiple: extractSimpleExample(MultipleSourceCode, 'CodeContainer'),
-};
+    Basic: extractSimpleExample(BasicSourceCode, 'CodeContainer'),
+    Multiple: extractSimpleExample(MultipleSourceCode, 'CodeContainer'),
+};