@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/button/ButtonVariants.astro

@@ -1,14 +0,0 @@
----
-import Button from './Button.astro';
----
-
-<div class="cosy:flex cosy:flex-wrap cosy:gap-2">
-	<Button variant="info">信息按钮</Button>
-	<Button variant="success">成功按钮</Button>
-	<Button variant="warning">警告按钮</Button>
-	<Button variant="error">错误按钮</Button>
-	<Button variant="ghost">幽灵按钮</Button>
-	<Button variant="link">链接按钮</Button>
-	<Button variant="outline">描边按钮</Button>
-	<Button variant="neutral">中性按钮</Button>
-</div>

package/dist/button/ButtonWithIcons.astro

@@ -1,25 +0,0 @@
----
-import Button from './Button.astro';
----
-
-<div class="cosy:flex cosy:flex-wrap cosy:gap-2">
-	<Button variant="primary">
-		<span slot="icon-left">👈</span>
-		返回
-	</Button>
-
-	<Button variant="success">
-		确认
-		<span slot="icon-right">✅</span>
-	</Button>
-
-	<Button variant="info">
-		<span slot="icon-left">💾</span>
-		保存
-		<span slot="icon-right">📁</span>
-	</Button>
-
-	<Button variant="warning" shape="circle">
-		<span slot="icon-left">⚠️</span>
-	</Button>
-</div>

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/index.ts

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

package/dist/code-block/CodeBlock.astro

@@ -1,152 +0,0 @@
----
-/**
- * @component CodeBlock
- *
- * @description
- * CodeBlock 组件用于在页面中展示格式化的代码片段，支持语法高亮、行号显示和代码复制功能。
- * 组件设计简洁美观，提供良好的代码可读性和用户交互体验。
- *
- * @design
- * 设计理念：
- * 1. 可读性优先 - 清晰的字体、合适的间距和语法高亮，确保代码易于阅读
- * 2. 功能完备 - 支持行号显示、代码复制等实用功能
- * 3. 视觉一致性 - 与整体设计系统保持一致的视觉风格
- * 4. 响应式设计 - 在不同屏幕尺寸下保持良好的可用性
- *
- * 视觉特点：
- * - 语法高亮：使用北欧风格的配色方案，柔和且易于阅读
- * - 行号显示：可选的行号显示，帮助定位代码位置
- * - 标题栏：可选的标题栏，显示文件名或代码类型
- * - 复制按钮：便捷的代码复制功能，带有状态反馈
- *
- * @usage
- * 基本用法：
- * ```astro
- * <CodeBlock code={`console.log('Hello, world!');`} lang="js" />
- * ```
- *
- * 带标题和行号：
- * ```astro
- * <CodeBlock
- *   code={`function greet(name) {\n  return 'Hello, ' + name + '!';\n}`}
- *   lang="js"
- *   title="greeting.js"
- *   showLineNumbers={true}
- * />
- * ```
- *
- * @props
- * @prop {string} code - 要显示的代码字符串
- * @prop {string} [lang="plaintext"] - 代码语言，用于语法高亮
- * @prop {string} [title] - 代码块的标题，通常是文件名
- * @prop {boolean} [showLineNumbers=true] - 是否显示行号
- *
- * @accessibility
- * - 使用语义化HTML结构
- * - 复制按钮提供清晰的视觉反馈
- * - 代码使用等宽字体，确保对齐和可读性
- */
-
-import '../style.ts';
-
-interface Props {
-	code: string;
-	title?: string;
-	showLineNumbers?: boolean;
-}
-
-const { code, title, showLineNumbers = true } = Astro.props;
-
-// 移除代码字符串开头和结尾的空行
-const trimmedCode = code.trim();
-
-// 生成行号
-const lines = trimmedCode.split('\n');
-const lineNumbers = Array.from({ length: lines.length }, (_, i) => i + 1);
----
-
-<div class="cosy:border cosy:border-base-300 cosy:rounded-lg cosy:overflow-hidden cosy:not-prose">
-	{/* 标题栏 */}
-	{
-		title && (
-			<div class="cosy:flex cosy:justify-between cosy:items-center cosy:bg-base-200 cosy:px-4 cosy:py-2 cosy:border-b cosy:border-base-300">
-				<span class="cosy:font-medium cosy:text-base-content">{title}</span>
-				<button
-					class="cosy:flex cosy:items-center cosy:gap-1 cosy:hover:bg-base-300 cosy:px-2 cosy:py-1 cosy:rounded-md cosy:text-sm cosy:text-base-content cosy:transition-colors"
-					data-code={trimmedCode}
-					title="复制代码">
-					<svg
-						class="cosy:w-4 cosy:h-4"
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor">
-						<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-						<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-					</svg>
-					<span class="cosy:copy-text">复制</span>
-				</button>
-			</div>
-		)
-	}
-
-	{/* 代码区域 */}
-	<div class="cosy:flex cosy:overflow-auto">
-		{/* 行号 */}
-		{
-			showLineNumbers && (
-				<div class="cosy:flex cosy:flex-col cosy:bg-base-100 cosy:py-2 cosy:pr-2 cosy:pl-3 cosy:border-r cosy:border-base-300 cosy:text-base-content cosy:text-right cosy:text-opacity-50 cosy:select-none">
-					{lineNumbers.map((num) => (
-						<div class="cosy:font-mono cosy:text-xs cosy:leading-5">{num}</div>
-					))}
-				</div>
-			)
-		}
-
-		{/* 代码内容 */}
-		<pre
-			class:list={[
-				'cosy:p-2 cosy:overflow-auto cosy:font-mono cosy:text-sm cosy:bg-base-100 cosy:text-base-content cosy:w-full',
-				{ 'cosy:pl-0': showLineNumbers },
-			]}>
-      <code class="cosy:block cosy:font-mono" set:html={trimmedCode} />
-    </pre>
-	</div>
-</div>
-
-<script>
-	function initializeCopyButtons() {
-		const copyButtons = document.querySelectorAll('.cosy\\:flex.cosy\\:items-center.cosy\\:gap-1');
-
-		copyButtons.forEach((button) => {
-			button.addEventListener('click', async () => {
-				const code = button.getAttribute('data-code') || '';
-				const copyText = button.querySelector('.cosy\\:copy-text');
-
-				try {
-					await navigator.clipboard.writeText(code);
-					if (copyText) {
-						copyText.textContent = '已复制！';
-						setTimeout(() => {
-							copyText.textContent = '复制';
-						}, 2000);
-					}
-				} catch (err) {
-					console.error('复制失败:', err);
-					if (copyText) {
-						copyText.textContent = '复制失败';
-						setTimeout(() => {
-							copyText.textContent = '复制';
-						}, 2000);
-					}
-				}
-			});
-		});
-	}
-
-	// 在页面加载时初始化
-	initializeCopyButtons();
-
-	// 在 Astro 页面切换时重新初始化
-	document.addEventListener('astro:page-load', initializeCopyButtons);
-</script>

package/dist/code-block/index.ts

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

package/dist/code-container/CodeContainer.astro

@@ -1,254 +0,0 @@
----
-/**
- * @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:text-sm 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.getAttribute('data-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>