@coffic/cosy-ui 0.7.4 → 0.8.6

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>

package/dist/code-container/ECodeContainerBasic.astro

@@ -1,19 +0,0 @@
----
-/**
- * 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/ECodeContainerMultiple.astro

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

@@ -1,14 +0,0 @@
-import { default as CodeContainer } from './CodeContainer.astro';
-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'),
-};

package/dist/code-example/CodeExample.astro

@@ -1,157 +0,0 @@
----
-/**
- * @component CodeExample
- *
- * @description
- * 用于展示组件示例及其源代码的组件。
- * 采用标签形式，默认显示预览，用户可以点击标签切换到源代码视图。
- * 支持亮色和暗黑模式，会根据系统设置自动切换主题。
- *
- * @usage
- * ```astro
- * <CodeExample
- *   title="示例标题"
- *   description="示例描述"
- *   code={`<Alert type="info">这是一个示例</Alert>`}
- * >
- *   <Alert type="info">这是一个示例</Alert>
- * </CodeExample>
- * ```
- *
- * @props
- * @prop {string} [title] - 示例标题
- * @prop {string} [description] - 示例描述
- * @prop {string} code - 要展示的源代码
- *
- * @slots
- * @slot default - 组件的实际渲染内容
- */
-
-import { ClipboardIcon, CheckIcon } from '../index';
-import '../style.ts';
-
-interface Props {
-	title?: string;
-	description?: string;
-	code: string;
-}
-
-const { title, description, code } = Astro.props;
----
-
-<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-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>
-		</div>
-		<div class="cosy:flex cosy:items-center cosy:gap-2">
-			<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:text-success cosy:check-icon"><CheckIcon /></span>
-				<span class="cosy:copy-text">复制代码</span>
-			</button>
-		</div>
-	</div>
-
-	<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>
-
-<script>
-	function initializeCodeExample() {
-		// 标签切换功能
-		const tabs = document.querySelectorAll('.cosy\\:tab');
-
-		tabs.forEach((tab) => {
-			tab.addEventListener('click', () => {
-				// 获取当前标签组
-				const tabGroup = tab.closest('.cosy\\:tabs');
-				if (!tabGroup) return;
-
-				const codeExample = tab.closest('.cosy\\:card');
-				if (!codeExample) return;
-
-				const contentContainer = codeExample.querySelector('.cosy\\:relative');
-				if (!contentContainer) return;
-
-				// 获取目标面板
-				const targetTab = tab.getAttribute('data-tab');
-				if (!targetTab) return;
-
-				// 更新标签状态
-				tabGroup.querySelectorAll('.cosy\\:tab').forEach((t) => {
-					t.classList.remove('cosy:tab-active');
-				});
-				tab.classList.add('cosy:tab-active');
-
-				// 更新面板状态
-				const panels = contentContainer.querySelectorAll('[data-panel]');
-				panels.forEach((panel) => {
-					if (panel.getAttribute('data-panel') === targetTab) {
-						panel.classList.remove('cosy:hidden');
-						panel.classList.add('cosy:block');
-					} else {
-						panel.classList.add('cosy:hidden');
-						panel.classList.remove('cosy:block');
-					}
-				});
-			});
-		});
-
-		// 复制代码功能
-		const copyButtons = document.querySelectorAll('.cosy\\:btn-ghost');
-
-		copyButtons.forEach((button) => {
-			button.addEventListener('click', () => {
-				const codeExample = button.closest('.cosy\\:card');
-				if (!codeExample) return;
-
-				const codePanel = codeExample.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');
-					button.querySelector('.cosy\\:copy-text')?.classList.add('cosy:text-success');
-
-					// 3秒后恢复原状
-					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');
-						button.querySelector('.cosy\\:copy-text')?.classList.remove('cosy:text-success');
-					}, 3000);
-				});
-			});
-		});
-	}
-
-	// 初始化
-	initializeCodeExample();
-
-	// Astro 页面切换时重新初始化
-	document.addEventListener('astro:page-load', initializeCodeExample);
-</script>

package/dist/code-example/index.ts

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