@coffic/cosy-ui 0.7.2 → 0.8.6

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';

package/dist/container/Container.astro

@@ -1,211 +0,0 @@
----
-/**
- * @component Container
- *
- * @description
- * Container 组件是一个基础的布局容器，用于限制内容宽度并居中显示。
- * 它提供了多种尺寸和内边距选项，适用于各种布局需求。
- *
- * @design
- * 设计理念：
- * 1. 内容约束 - 限制内容宽度，提高可读性和视觉美感
- * 2. 响应式设计 - 在不同屏幕尺寸下自动调整内边距
- * 3. 灵活配置 - 支持多种尺寸和内边距选项
- * 4. 简单易用 - 提供直观的API，易于集成到各种页面布局中
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Container>
- *   <p>内容将被限制在一个合理的宽度内并居中显示</p>
- * </Container>
- * ```
- *
- * 自定义尺寸和内边距：
- * ```astro
- * <Container size="sm" padding="lg">
- *   <p>小尺寸容器，大内边距</p>
- * </Container>
- * ```
- *
- * 全宽容器：
- * ```astro
- * <Container size="full" padding="none">
- *   <p>全宽容器，无内边距</p>
- * </Container>
- * ```
- *
- * 不居中的容器：
- * ```astro
- * <Container centered={false}>
- *   <p>不居中的容器，靠左对齐</p>
- * </Container>
- * ```
- *
- * 带边框的容器：
- * ```astro
- * <Container border>
- *   <p>带有边框的容器</p>
- * </Container>
- * ```
- *
- * Flex布局容器（按行排列）：
- * ```astro
- * <Container flex="row" gap="md">
- *   <div>第一项</div>
- *   <div>第二项</div>
- * </Container>
- * ```
- *
- * Flex布局容器（按列排列）：
- * ```astro
- * <Container flex="col" gap="md" items="center" justify="between">
- *   <div>第一项</div>
- *   <div>第二项</div>
- * </Container>
- * ```
- */
-
-import type { HTMLAttributes } from 'astro/types';
-import '../style.ts';
-
-interface Props extends HTMLAttributes<'div'> {
-	/**
-	 * 容器尺寸
-	 * @default "md"
-	 */
-	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-
-	/**
-	 * 内边距大小
-	 * @default "md"
-	 */
-	padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-
-	/**
-	 * 是否居中显示
-	 * @default true
-	 */
-	centered?: boolean;
-
-	/**
-	 * 是否显示边框
-	 * @default false
-	 */
-	border?: boolean;
-
-	/**
-	 * flex布局方向，不设置则不启用flex布局
-	 */
-	flex?: 'row' | 'col' | 'row-reverse' | 'col-reverse';
-
-	/**
-	 * flex项目间距
-	 * @default "none"
-	 */
-	gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-	/**
-	 * flex项目水平对齐方式
-	 */
-	items?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
-
-	/**
-	 * flex项目垂直对齐方式
-	 */
-	justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
-
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
-
-	/**
-	 * 类名列表
-	 */
-	'class:list'?: any;
-}
-
-const {
-	size = 'md',
-	padding = 'md',
-	centered = true,
-	border = false,
-	flex,
-	gap = 'none',
-	items,
-	justify,
-	class: className = '',
-	'class:list': classList,
-	...rest
-} = Astro.props;
-
-// 静态类名映射
-const sizeClasses = {
-	xs: 'cosy:max-w-xs',
-	sm: 'cosy:max-w-sm',
-	md: 'cosy:max-w-2xl',
-	lg: 'cosy:max-w-4xl',
-	xl: 'cosy:max-w-6xl',
-	full: 'cosy:w-full',
-} as const;
-
-const paddingClasses = {
-	none: 'cosy:p-0',
-	sm: 'cosy:p-2',
-	md: 'cosy:p-4',
-	lg: 'cosy:p-6',
-	xl: 'cosy:p-8',
-} as const;
-
-const flexClasses = {
-	row: 'cosy:flex cosy:flex-row',
-	col: 'cosy:flex cosy:flex-col',
-	'row-reverse': 'cosy:flex cosy:flex-row-reverse',
-	'col-reverse': 'cosy:flex cosy:flex-col-reverse',
-} as const;
-
-const gapClasses = {
-	none: 'cosy:gap-0',
-	xs: 'cosy:gap-1',
-	sm: 'cosy:gap-2',
-	md: 'cosy:gap-4',
-	lg: 'cosy:gap-6',
-	xl: 'cosy:gap-8',
-} as const;
-
-const itemsClasses = {
-	start: 'cosy:items-start',
-	end: 'cosy:items-end',
-	center: 'cosy:items-center',
-	baseline: 'cosy:items-baseline',
-	stretch: 'cosy:items-stretch',
-} as const;
-
-const justifyClasses = {
-	start: 'cosy:justify-start',
-	end: 'cosy:justify-end',
-	center: 'cosy:justify-center',
-	between: 'cosy:justify-between',
-	around: 'cosy:justify-around',
-	evenly: 'cosy:justify-evenly',
-} as const;
-
-// 构建CSS类名
-const containerClasses = [
-	'cosy:w-full',
-	centered ? 'cosy:mx-auto' : '',
-	sizeClasses[size],
-	paddingClasses[padding],
-	border ? 'cosy:border cosy:rounded-lg' : '',
-	flex ? flexClasses[flex] : '',
-	flex ? gapClasses[gap] : '',
-	items && flex ? itemsClasses[items] : '',
-	justify && flex ? justifyClasses[justify] : '',
-	className,
-];
----
-
-<section class:list={[containerClasses, classList]} {...rest}>
-	<slot />
-</section>

package/dist/container/EContainerBasic.astro

@@ -1,13 +0,0 @@
----
-/**
- * @component Container.Basic
- *
- * @description
- * 基础Container组件示例，展示最简单的容器用法。
- */
-import { Container } from '../index';
----
-
-<Container>
-	<p class="cosy:text-center">这是一个基础容器，内容会被限制在一个合理的宽度内并居中显示</p>
-</Container>

package/dist/container/EContainerFlexBetween.astro

@@ -1,16 +0,0 @@
----
-/**
- * @component Container.FlexBetween
- *
- * @description
- * 展示Container组件的两端对齐(justify="between")布局功能。
- */
-import '../style.ts';
-import { Container } from '../index';
----
-
-<Container flex="row" justify="between" border padding="md">
-	<div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">左侧</div>
-	<div class="cosy:bg-secondary cosy:text-secondary-content cosy:p-4 cosy:rounded">中间</div>
-	<div class="cosy:bg-accent cosy:text-accent-content cosy:p-4 cosy:rounded">右侧</div>
-</Container>

package/dist/container/EContainerFlexCenter.astro

@@ -1,23 +0,0 @@
----
-/**
- * @component Container.FlexCenter
- *
- * @description
- * 展示Container组件的居中对齐(items="center" justify="center")布局功能。
- */
-import '../style.ts';
-import { Container } from '../index';
----
-
-<Container
-	flex="row"
-	gap="md"
-	items="center"
-	justify="center"
-	border
-	padding="md"
-	class="cosy:h-32">
-	<div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">居中项</div>
-	<div class="cosy:bg-secondary cosy:text-secondary-content cosy:p-6 cosy:rounded">较大项</div>
-	<div class="cosy:bg-accent cosy:text-accent-content cosy:p-2 cosy:rounded">较小项</div>
-</Container>

package/dist/container/EContainerFlexColumn.astro

@@ -1,16 +0,0 @@
----
-/**
- * @component Container.FlexColumn
- *
- * @description
- * 展示Container组件的列排列(flex="col")布局功能。
- */
-import '../style.ts';
-import { Container } from '../index';
----
-
-<Container flex="col" gap="md" border padding="md">
-	<div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">第一项</div>
-	<div class="cosy:bg-secondary cosy:text-secondary-content cosy:p-4 cosy:rounded">第二项</div>
-	<div class="cosy:bg-accent cosy:text-accent-content cosy:p-4 cosy:rounded">第三项</div>
-</Container>

package/dist/container/EContainerFlexRow.astro

@@ -1,16 +0,0 @@
----
-/**
- * @component Container.FlexRow
- *
- * @description
- * 展示Container组件的行排列(flex="row")布局功能。
- */
-import '../style.ts';
-import { Container } from '../index';
----
-
-<Container flex="row" gap="md" border padding="md">
-	<div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">第一项</div>
-	<div class="cosy:bg-secondary cosy:text-secondary-content cosy:p-4 cosy:rounded">第二项</div>
-	<div class="cosy:bg-accent cosy:text-accent-content cosy:p-4 cosy:rounded">第三项</div>
-</Container>

package/dist/container/EContainerPadding.astro

@@ -1,32 +0,0 @@
----
-/**
- * @component Container.Padding
- *
- * @description
- * 展示Container组件的不同内边距选项：none、sm、md、lg、xl。
- */
-import '../style.ts';
-import { Container } from '../index';
----
-
-<div class="cosy:space-y-4">
-	<Container padding="none" border>
-		<p class="cosy:text-center">无内边距 (none)</p>
-	</Container>
-
-	<Container padding="sm" border>
-		<p class="cosy:text-center">小内边距 (sm)</p>
-	</Container>
-
-	<Container padding="md" border>
-		<p class="cosy:text-center">中等内边距 (md) - 默认</p>
-	</Container>
-
-	<Container padding="lg" border>
-		<p class="cosy:text-center">大内边距 (lg)</p>
-	</Container>
-
-	<Container padding="xl" border>
-		<p class="cosy:text-center">超大内边距 (xl)</p>
-	</Container>
-</div>

package/dist/container/EContainerSizes.astro

@@ -1,36 +0,0 @@
----
-/**
- * @component Container.Sizes
- *
- * @description
- * 展示Container组件的不同尺寸选项：xs、sm、md、lg、xl、full。
- */
-import '../style.ts';
-import { Container } from '../index';
----
-
-<div class="cosy:space-y-4">
-	<Container size="xs" border>
-		<p class="cosy:text-center">超小尺寸容器 (xs)</p>
-	</Container>
-
-	<Container size="sm" border>
-		<p class="cosy:text-center">小尺寸容器 (sm)</p>
-	</Container>
-
-	<Container size="md" border>
-		<p class="cosy:text-center">中等尺寸容器 (md) - 默认</p>
-	</Container>
-
-	<Container size="lg" border>
-		<p class="cosy:text-center">大尺寸容器 (lg)</p>
-	</Container>
-
-	<Container size="xl" border>
-		<p class="cosy:text-center">超大尺寸容器 (xl)</p>
-	</Container>
-
-	<Container size="full" border>
-		<p class="cosy:text-center">全宽容器 (full)</p>
-	</Container>
-</div>