@coffic/cosy-ui 0.6.32 → 0.6.34

package/dist/card/CardWithImage.astro

@@ -0,0 +1,39 @@
+---
+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/index.ts

@@ -0,0 +1,7 @@
+
+
+export { default as Card } from './Card.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';

package/dist/{components/display → code-block}/CodeBlock.astro

@@ -47,7 +47,7 @@
  * - 代码使用等宽字体，确保对齐和可读性
  */
 
-import '../../style.ts';
+import '../style.ts';
 
 interface Props {
 	code: string;

package/dist/code-block/index.ts

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

package/dist/code-container/CodeContainer.astro

@@ -0,0 +1,254 @@
+---
+/**
+ * @component CodeContainer
+ *
+ * @description
+ * 用于展示代码示例的容器组件。使用时只需在默认slot中传入内容，
+ * 并为每个示例设置对应的id (tab-1, tab-2等)
+ *
+ * @example
+ * ```astro
+ * <CodeContainer>
+ *   <div id="tab-1">
+ *     <Alert type="info">这是第一个示例</Alert>
+ *   </div>
+ *   <div id="tab-2">
+ *     <Alert type="success">这是第二个示例</Alert>
+ *   </div>
+ * </CodeContainer>
+ * ```
+ */
+
+import { ClipboardIcon, CheckIcon, InfoIcon } from '../index';
+import '../style.ts';
+
+interface Props {
+	/**
+	 * tab的标题，如果不提供则使用"示例 1"这样的默认标题
+	 */
+	titles?: string[];
+	/**
+	 * tab的描述文本
+	 */
+	descriptions?: string[];
+	/**
+	 * 每个示例对应的源代码
+	 */
+	codes: string[];
+}
+
+const { titles = [], descriptions = [], codes } = Astro.props;
+---
+
+<div data-role="code-container" class="cosy:mb-8 cosy:card" ignore-heading>
+	<!-- 工具栏 -->
+	<div
+		class="cosy:flex cosy:justify-between cosy:items-center cosy:bg-base-200 cosy:px-4 cosy:rounded-t">
+		<!-- 标签 -->
+		<div class="cosy:flex cosy:items-center cosy:gap-4">
+			<div role="tablist" class="cosy:tabs cosy:tabs-box">
+				{
+					codes.map((_, index) => (
+						<button
+							role="tab"
+							class={`cosy:tab ${index === 0 ? 'cosy:tab-active' : ''}`}
+							data-tab={`tab-${index + 1}`}>
+							{titles[index] || `示例 ${index + 1}`}
+						</button>
+					))
+				}
+			</div>
+		</div>
+
+		<!-- 工具按钮 -->
+		<div class="cosy:flex cosy:items-center cosy:gap-2">
+			<button
+				role="switch"
+				class="cosy:btn cosy:btn-ghost cosy:btn-sm"
+				aria-checked="false"
+				aria-label="切换代码/预览"
+				data-toggle="code">
+				<span class="cosy:code-icon"><InfoIcon /></span>
+			</button>
+			<button class="cosy:gap-2 cosy:btn cosy:btn-ghost cosy:btn-sm" aria-label="复制代码">
+				<span class="cosy:copy-icon"><ClipboardIcon /></span>
+				<span class="cosy:hidden cosy:check-icon"><CheckIcon /></span>
+			</button>
+		</div>
+	</div>
+
+	{
+		codes.map((code, index) => (
+			<div
+				class={`cosy:example-container ${index === 0 ? 'cosy:block' : 'cosy:hidden'}`}
+				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 ">
+						{descriptions[index]}
+					</p>
+				)}
+
+				<div class="cosy:relative cosy:p-4 cosy:bg-gradient-to-br cosy:from-red-100 cosy:to-green-300 cosy:rounded-b">
+					<div class="cosy:block cosy:code-example-panel" data-panel="preview">
+						<slot />
+					</div>
+
+					<div class="cosy:hidden cosy:code-example-panel" data-panel="code">
+						<pre class="cosy:overflow-x-auto" style="margin:0">
+							<code class="cosy:language-astro">{code}</code>
+						</pre>
+					</div>
+				</div>
+			</div>
+		))
+	}
+</div>
+
+<script>
+	function initializeCodeContainer() {
+		console.log('CodeContainer: 初始化代码容器');
+
+		// 示例切换功能
+		const exampleTabs = document.querySelectorAll('[role="tab"][data-tab^="tab-"]');
+		exampleTabs.forEach((tab) => {
+			tab.addEventListener('click', () => {
+				console.log('CodeContainer: 切换示例', tab);
+				const container = tab.closest('[data-role="code-container"]');
+				if (!container) return;
+
+				// 更新标签状态
+				container.querySelectorAll('[role="tab"][data-tab^="tab-"]').forEach((t) => {
+					t.classList.remove('cosy:tab-active');
+				});
+				tab.classList.add('cosy:tab-active');
+
+				// 获取当前标签对应的内容 id
+				const targetId = tab.getAttribute('data-tab');
+				if (!targetId) return;
+
+				// 切换示例容器
+				container.querySelectorAll('.cosy\\:example-container').forEach((example) => {
+					if (example.getAttribute('data-example') === targetId) {
+						example.classList.remove('cosy:hidden');
+						example.classList.add('cosy:block');
+					} else {
+						example.classList.add('cosy:hidden');
+						example.classList.remove('cosy:block');
+					}
+				});
+
+				// 更新对应内容的可见性
+				const allContent = container.querySelectorAll('[id^="tab-"]');
+				allContent.forEach((content) => {
+					if (content.id === targetId) {
+						content.classList.remove('cosy:hidden');
+						content.classList.add('cosy:block');
+					} else {
+						content.classList.add('cosy:hidden');
+						content.classList.remove('cosy:block');
+					}
+				});
+			});
+		});
+
+		// 代码开关功能
+		const codeToggles = document.querySelectorAll('[data-toggle="code"]');
+		codeToggles.forEach((toggle) => {
+			toggle.addEventListener('click', () => {
+				console.log('code toggle clicked', toggle);
+				const container = toggle.closest('[data-role="code-container"]');
+				if (!container) {
+					console.error('CodeContainer: 无法找到父容器');
+					return;
+				}
+
+				// 切换开关状态
+				const isChecked = toggle.getAttribute('aria-checked') === 'true';
+				console.log('代码按钮 isChecked:', isChecked);
+				toggle.setAttribute('aria-checked', !isChecked ? 'true' : 'false');
+				toggle.classList.toggle('cosy:btn-primary', !isChecked);
+				toggle.classList.toggle('cosy:btn-ghost', isChecked);
+
+				// 找到当前显示的示例
+				const activeExample = container.querySelector(
+					'.cosy\\:example-container:not(.cosy\\:hidden)'
+				);
+				if (!activeExample) {
+					console.error('CodeContainer: 无法找到活动示例');
+					return;
+				}
+
+				// 切换面板
+				activeExample.querySelectorAll('.cosy\\:code-example-panel').forEach((panel) => {
+					if (panel.getAttribute('data-panel') === 'code') {
+						console.log('处理代码面板的展示/隐藏，此时的isChecked:', isChecked);
+						panel.classList.toggle('cosy:hidden', isChecked);
+						panel.classList.toggle('cosy:block', !isChecked);
+					} else {
+						console.log('处理预览面板的展示/隐藏，此时的isChecked:', isChecked);
+						panel.classList.toggle('cosy:hidden', !isChecked);
+						panel.classList.toggle('cosy:block', isChecked);
+					}
+				});
+			});
+		});
+
+		// 复制代码功能
+		const copyButtons = document.querySelectorAll('[aria-label="复制代码"]');
+		copyButtons.forEach((button) => {
+			button.addEventListener('click', () => {
+				const container = button.closest('[data-role="code-container"]');
+				if (!container) return;
+
+				// 确保代码面板是显示的
+				const codeToggle = container.querySelector('[data-toggle="code"]');
+				if (codeToggle?.getAttribute('aria-checked') !== 'true') {
+					(codeToggle as HTMLElement)?.click();
+				}
+
+				// 找到当前显示的示例
+				const activeExample = container.querySelector(
+					'.cosy\\:example-container:not(.cosy\\:hidden)'
+				);
+				if (!activeExample) return;
+
+				const codePanel = activeExample.querySelector('[data-panel="code"]');
+				if (!codePanel) return;
+
+				const codeElement = codePanel.querySelector('code');
+				if (!codeElement) return;
+
+				const code = codeElement.textContent || '';
+
+				// 复制到剪贴板
+				navigator.clipboard.writeText(code).then(() => {
+					button.classList.add('cosy:btn-success');
+					button.querySelector('.cosy\\:copy-icon')?.classList.add('cosy:hidden');
+					button.querySelector('.cosy\\:check-icon')?.classList.remove('cosy:hidden');
+
+					setTimeout(() => {
+						button.classList.remove('cosy:btn-success');
+						button.querySelector('.cosy\\:copy-icon')?.classList.remove('cosy:hidden');
+						button.querySelector('.cosy\\:check-icon')?.classList.add('cosy:hidden');
+					}, 3000);
+				});
+			});
+		});
+
+		// 初始化时隐藏除第一个以外的所有内容
+		document.querySelectorAll('[data-role="code-container"]').forEach((container) => {
+			const contents = container.querySelectorAll('[id^="tab-"]');
+			contents.forEach((content, index) => {
+				if (index !== 0) {
+					content.classList.add('cosy:hidden');
+				}
+			});
+		});
+	}
+
+	document.addEventListener('astro:page-load', () => {
+		console.log('CodeContainer: 页面加载完成，初始化代码容器');
+		initializeCodeContainer();
+	});
+</script>

package/dist/code-container/CodeContainerBasic.astro

@@ -0,0 +1,19 @@
+---
+/**
+ * CodeContainerBasic - 基础代码容器示例组件
+ * 展示CodeContainer的基本用法
+ */
+
+import { CodeContainer } from './index';
+import { Alert } from '../alert';
+
+const code = `<Alert type="info">
+  这是一个基础示例
+</Alert>`;
+---
+
+<CodeContainer codes={[code]}>
+	<div id="tab-1">
+		<Alert type="info"> 这是一个基础示例 </Alert>
+	</div>
+</CodeContainer>

package/dist/code-container/CodeContainerMultiple.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * CodeContainerMultiple - 多标签代码容器示例组件
+ * 展示CodeContainer的多标签用法
+ */
+
+import { CodeContainer } from './index';
+import { Alert } from '../alert';
+
+const infoCode = `<Alert type="info" title="信息提示">
+  这是一条信息提示
+</Alert>`;
+
+const successCode = `<Alert type="success" title="成功提示">
+  操作已成功完成
+</Alert>`;
+
+const warningCode = `<Alert type="warning" title="警告提示">
+  请注意可能的风险
+</Alert>`;
+
+const errorCode = `<Alert type="error" title="错误提示">
+  操作失败，请重试
+</Alert>`;
+
+const titles = ['信息', '成功', '警告', '错误'];
+const descriptions = [
+	'用于展示一般信息',
+	'用于展示成功状态',
+	'用于展示警告信息',
+	'用于展示错误信息',
+];
+const codes = [infoCode, successCode, warningCode, errorCode];
+---
+
+<CodeContainer titles={titles} descriptions={descriptions} codes={codes}>
+	<div id="tab-1">
+		<Alert type="info" title="信息提示"> 这是一条信息提示 </Alert>
+	</div>
+	<div id="tab-2">
+		<Alert type="success" title="成功提示"> 操作已成功完成 </Alert>
+	</div>
+	<div id="tab-3">
+		<Alert type="warning" title="警告提示"> 请注意可能的风险 </Alert>
+	</div>
+	<div id="tab-4">
+		<Alert type="error" title="错误提示"> 操作失败，请重试 </Alert>
+	</div>
+</CodeContainer>

package/dist/code-container/index.ts

@@ -0,0 +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 { extractSimpleExample } from '../utils/component';
+
+export { CodeContainer, CodeContainerBasic, CodeContainerMultiple };
+
+// 导出示例源代码
+export const CodeContainerExampleCodes = {
+  Basic: extractSimpleExample(BasicSourceCode, 'CodeContainer'),
+  Multiple: extractSimpleExample(MultipleSourceCode, 'CodeContainer'),
+};

package/dist/{components/display → code-example}/CodeExample.astro

@@ -27,8 +27,8 @@
  * @slot default - 组件的实际渲染内容
  */
 
-import { ClipboardIcon, CheckIcon } from '../../index';
-import '../../style.ts';
+import { ClipboardIcon, CheckIcon } from '../index';
+import '../style.ts';
 
 interface Props {
 	title?: string;
@@ -39,12 +39,12 @@ interface Props {
 const { title, description, code } = Astro.props;
 ---
 
-<div class="cosy:bg-base-100 cosy:shadow-lg cosy:mb-8 cosy:rounded-none cosy:card" ignore-heading>
+<div data-role="code-example" class="cosy:mb-8 cosy:card" ignore-heading>
 	{title && <h3 class="cosy:p-4 cosy:border-b cosy:border-base-300 cosy:card-title">{title}</h3>}
 	{description && <p class="cosy:px-4 cosy:pt-4 cosy:text-base-content/70">{description}</p>}
 
 	<div
-		class="cosy:flex cosy:justify-between cosy:items-center cosy:bg-base-200 cosy:px-4 cosy:rounded-none">
+		class="cosy:flex cosy:justify-between cosy:items-center cosy:bg-base-200 cosy:px-4 cosy:rounded-t">
 		<div role="tablist" class="cosy:tabs cosy:tabs-box">
 			<button role="tab" class="cosy:tab cosy:tab-active" data-tab="preview">预览</button>
 			<button role="tab" class="cosy:tab" data-tab="code">代码</button>
@@ -58,17 +58,16 @@ const { title, description, code } = Astro.props;
 		</div>
 	</div>
 
-	<div class="cosy:relative cosy:p-0">
+	<div
+		class="cosy:relative cosy:p-4 cosy:bg-gradient-to-br cosy:from-red-100 cosy:to-green-300 cosy:rounded-b">
 		<div class="cosy:block cosy:code-example-panel" data-panel="preview">
-			<div class="cosy:bg-base-100 cosy:p-6">
-				<slot />
-			</div>
+			<slot />
 		</div>
 
 		<div class="cosy:hidden cosy:code-example-panel" data-panel="code">
-			<div class="cosy:bg-base-300 cosy:px-6 cosy:py-2">
-				<pre class="cosy:overflow-x-auto"><code class="cosy:language-astro">{code}</code></pre>
-			</div>
+			<pre
+				class="cosy:overflow-x-auto"
+				style="margin:0"><code class="cosy:language-astro">{code}</code></pre>
 		</div>
 	</div>
 </div>

package/dist/code-example/index.ts

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

package/dist/{components/containers → container}/Container.astro

@@ -67,7 +67,7 @@
  */
 
 import type { HTMLAttributes } from 'astro/types';
-import '../../style.ts';
+import '../style.ts';
 
 interface Props extends HTMLAttributes<'div'> {
 	/**

package/dist/container/index.ts

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

package/dist/env.d.ts

@@ -1,11 +1,5 @@
 /// <reference types="vite/client" />
 
-declare module '*.vue' {
-	import type { DefineComponent } from 'vue';
-	const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>;
-	export default component;
-}
-
 declare module '*.vue?raw' {
 	const content: string;
 	export default content;

package/dist/footer/Footer.astro

@@ -145,7 +145,7 @@
  * - 社交媒体图标包含屏幕阅读器专用的文本说明
  */
 
-import { processSocialLink } from '../utils/social.ts';
+import { processSocialLink } from '../utils/social';
 import { SocialIcon, LanguageUtil, type IFooterProps, createTextGetter } from '../index';
 import FooterSection from './FooterSection.astro';
 import '../style.ts';
@@ -317,11 +317,7 @@ const debugClasses = debug
 {/* 横幅 */}
 {
 	inspirationalSlogan && (
-		<aside
-			class:list={[
-				'cosy:p-4 cosy:bg-primary cosy:text-primary-content cosy:w-full',
-				debugClasses.aside,
-			]}>
+		<aside class:list={['cosy:p-4 cosy:w-full', debugClasses.aside]}>
 			<p class="cosy:text-center">{inspirationalSlogan}</p>
 		</aside>
 	)

package/dist/header/Header.astro

@@ -42,6 +42,7 @@ const {
 	paddingHorizontal = 'none',
 	paddingVertical = 'none',
 	navPosition = 'center',
+	showThemeSwitcher = true,
 } = Astro.props;
 
 // 根据高度设置样式
@@ -194,8 +195,8 @@ const activeLink = LinkUtil.getActiveLink(
 				)
 			}
 
-			<ThemeSwitcher />
-			<LanguageSwitcher languages={languages} />
+			{showThemeSwitcher && <ThemeSwitcher />}
+			{languages.length > 1 && <LanguageSwitcher languages={languages} />}
 
 			<slot name="navbar-end" />
 		</div>

package/dist/{components/display → hero}/Hero.astro

@@ -150,8 +150,8 @@
  * @prop {number} [overlayOpacity=0.7] - 遮罩的不透明度，可选值：0-1之间的数字
  */
 
-import '../../style.ts';
-import { Link } from '../../index';
+import '../style.ts';
+import { Link } from '../index';
 
 interface Link {
 	text: string;

package/dist/hero/HeroAlignCenter.astro

@@ -0,0 +1,13 @@
+---
+import  Hero  from './Hero.astro';
+---
+
+<Hero
+	title="居中对齐标题"
+	description="这是一个居中对齐的Hero组件示例。"
+	align="center"
+	links={[
+		{ text: '主要操作', href: '#' },
+		{ text: '次要操作', href: '#' },
+	]}
+/>

package/dist/hero/HeroAlignContainer.astro

@@ -0,0 +1,23 @@
+---
+import { CodeContainer } from '../index';
+import HeroAlignCenter from './HeroAlignCenter.astro';
+import HeroAlignLeft from './HeroAlignLeft.astro';
+import HeroAlignRight from './HeroAlignRight.astro';
+import HeroAlignCenterSourceCode from './HeroAlignCenter.astro?raw';
+import HeroAlignLeftSourceCode from './HeroAlignLeft.astro?raw';
+import HeroAlignRightSourceCode from './HeroAlignRight.astro?raw';
+---
+
+<CodeContainer
+	titles={['居中对齐', '左对齐', '右对齐']}
+	codes={[HeroAlignCenterSourceCode, HeroAlignLeftSourceCode, HeroAlignRightSourceCode]}>
+	<div id="tab-1">
+		<HeroAlignCenter />
+	</div>
+	<div id="tab-2">
+		<HeroAlignLeft />
+	</div>
+	<div id="tab-3">
+		<HeroAlignRight />
+	</div>
+</CodeContainer>

package/dist/hero/HeroAlignLeft.astro

@@ -0,0 +1,13 @@
+---
+import Hero from './Hero.astro';
+---
+
+<Hero
+	title="左对齐标题"
+	description="这是一个左对齐的Hero组件示例。"
+	align="left"
+	links={[
+		{ text: '主要操作', href: '#' },
+		{ text: '次要操作', href: '#' },
+	]}
+/>

package/dist/hero/HeroAlignRight.astro

@@ -0,0 +1,13 @@
+---
+import Hero from './Hero.astro';
+---
+
+<Hero
+	title="右对齐标题"
+	description="这是一个右对齐的Hero组件示例。"
+	align="right"
+	links={[
+		{ text: '主要操作', href: '#' },
+		{ text: '次要操作', href: '#' },
+	]}
+/>

package/dist/hero/HeroBackgroundContainer.astro

@@ -0,0 +1,18 @@
+---
+import { CodeContainer } from '../index';
+import HeroPlainBackground from './HeroPlainBackground.astro';
+import HeroGradientBackground from './HeroGradientBackground.astro';
+import HeroPlainBackgroundSourceCode from './HeroPlainBackground.astro?raw';
+import HeroGradientBackgroundSourceCode from './HeroGradientBackground.astro?raw';
+---
+
+<CodeContainer
+	titles={['纯色背景', '渐变色背景']}
+	codes={[HeroPlainBackgroundSourceCode, HeroGradientBackgroundSourceCode]}>
+	<div id="tab-1">
+		<HeroPlainBackground />
+	</div>
+	<div id="tab-2">
+		<HeroGradientBackground />
+	</div>
+</CodeContainer>

package/dist/hero/HeroBackgroundImage.astro

@@ -0,0 +1,12 @@
+---
+import Hero from './Hero.astro';
+import { getLandscapeImage } from '../index_utils';
+---
+
+<Hero
+	title="背景图片"
+	description="使用背景图片增强视觉效果。"
+	backgroundImage={getLandscapeImage({ width: 800, height: 400, provider: 'picsum' })}
+	backgroundOverlay="dark"
+	links={[{ text: '了解更多', href: '/about' }]}
+/>

package/dist/hero/HeroBackgroundImageContainer.astro

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

package/dist/hero/HeroBasic.astro

@@ -0,0 +1,12 @@
+---
+import Hero from './Hero.astro';
+---
+
+<Hero
+	title="欢迎使用我们的产品"
+	description="这是一个简短的描述，介绍产品的主要特点和价值。"
+	links={[
+		{ text: '开始使用', href: '/getting-started' },
+		{ text: '了解更多', href: '/about' },
+	]}
+/>