@coffic/cosy-ui 0.7.4 → 0.8.7

package/dist/grid/Grid.astro

@@ -1,190 +0,0 @@
----
-/**
- * @component Grid
- *
- * @description
- * Grid 组件是一个灵活的网格布局组件，用于创建响应式的多列布局。
- * 它封装了 CSS Grid 的常用功能，提供简单易用的接口来控制网格的列数和间距。
- *
- * @design
- * 设计理念：
- * 1. 简单易用 - 通过简洁的 API 控制复杂的 Grid 布局
- * 2. 响应式优先 - 内置响应式断点，轻松创建适应不同屏幕尺寸的布局
- * 3. 灵活可配置 - 支持自定义列数和间距
- * 4. 语义化属性 - 使用直观的属性名称，降低学习成本
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Grid cols={3} gap="md">
- *   <div>第一列</div>
- *   <div>第二列</div>
- *   <div>第三列</div>
- * </Grid>
- * ```
- *
- * 响应式网格：
- * ```astro
- * <Grid cols={{base: 1, md: 2, lg: 3}} gap="lg">
- *   <div>响应式网格</div>
- *   <div>在不同屏幕尺寸下</div>
- *   <div>显示不同的列数</div>
- * </Grid>
- * ```
- *
- * 自定义行列间距：
- * ```astro
- * <Grid cols={2} rowGap="lg" colGap="sm">
- *   <div>行间距大</div>
- *   <div>列间距小</div>
- *   <div>第三项</div>
- *   <div>第四项</div>
- * </Grid>
- * ```
- *
- * @props
- * @prop {number | Object} [cols=1] - 网格列数，可以是固定值或响应式对象
- * @prop {string} [gap="md"] - 网格间距，可选值：none, xs, sm, md, lg, xl
- * @prop {string} [rowGap] - 行间距，默认与 gap 相同
- * @prop {string} [colGap] - 列间距，默认与 gap 相同
- * @prop {string} [class] - 自定义类名
- * @prop {any} [class:list] - 类名列表
- */
-
-// 导入样式
-import '../style.ts';
-
-import type { HTMLAttributes } from 'astro/types';
-
-type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-
-type ResponsiveValue<T> =
-	| T
-	| {
-			base?: T;
-			sm?: T;
-			md?: T;
-			lg?: T;
-			xl?: T;
-			'2xl'?: T;
-	  };
-
-interface Props extends HTMLAttributes<'div'> {
-	/**
-	 * 网格列数，可以是固定值或响应式对象
-	 * @default 1
-	 */
-	cols?: ResponsiveValue<number>;
-
-	/**
-	 * 网格间距
-	 * @default "md"
-	 */
-	gap?: GapSize;
-
-	/**
-	 * 行间距，默认与gap相同
-	 */
-	rowGap?: GapSize;
-
-	/**
-	 * 列间距，默认与gap相同
-	 */
-	colGap?: GapSize;
-
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
-
-	/**
-	 * 类名列表
-	 */
-	'class:list'?: any;
-}
-
-const {
-	cols = 1,
-	gap = 'md',
-	rowGap,
-	colGap,
-	class: className = '',
-	'class:list': classList,
-	...rest
-} = Astro.props;
-
-// 处理响应式列数
-const getColsClasses = (cols: ResponsiveValue<number>) => {
-	if (typeof cols === 'number') {
-		return `cosy:grid-cols-${cols}`;
-	}
-
-	const breakpoints: Record<Breakpoint, string> = {
-		base: '',
-		sm: 'sm:',
-		md: 'md:',
-		lg: 'lg:',
-		xl: 'xl:',
-		'2xl': '2xl:',
-	};
-
-	return Object.entries(cols)
-		.map(([breakpoint, value]) => {
-			if (breakpoint === 'base') {
-				return `cosy:grid-cols-${value}`;
-			}
-			return `cosy:${breakpoints[breakpoint as Breakpoint]}grid-cols-${value}`;
-		})
-		.join(' ');
-};
-
-// 间距映射
-const gapClasses: Record<GapSize, string> = {
-	none: 'cosy:gap-0',
-	xs: 'cosy:gap-2',
-	sm: 'cosy:gap-4',
-	md: 'cosy:gap-6',
-	lg: 'cosy:gap-8',
-	xl: 'cosy:gap-12',
-};
-
-// 行间距映射
-const rowGapClasses: Record<GapSize, string> = {
-	none: 'cosy:row-gap-0',
-	xs: 'cosy:row-gap-2',
-	sm: 'cosy:row-gap-4',
-	md: 'cosy:row-gap-6',
-	lg: 'cosy:row-gap-8',
-	xl: 'cosy:row-gap-12',
-};
-
-// 列间距映射
-const colGapClasses: Record<GapSize, string> = {
-	none: 'cosy:col-gap-0',
-	xs: 'cosy:col-gap-2',
-	sm: 'cosy:col-gap-4',
-	md: 'cosy:col-gap-6',
-	lg: 'cosy:col-gap-8',
-	xl: 'cosy:col-gap-12',
-};
-
-// 构建最终类名
-const gridClasses = [
-	'cosy:grid',
-	getColsClasses(cols),
-	rowGap
-		? rowGapClasses[rowGap as GapSize]
-		: colGap
-			? gapClasses[gap as GapSize]
-			: gapClasses[gap as GapSize],
-	colGap ? colGapClasses[colGap as GapSize] : null,
-	className,
-]
-	.filter(Boolean)
-	.join(' ');
----
-
-<div class:list={[gridClasses, classList]} {...rest}>
-	<slot />
-</div>

package/dist/grid/GridBasic.astro

@@ -1,9 +0,0 @@
----
-import Grid from './Grid.astro';
----
-
-<Grid cols={3} gap="md">
-	<div style="background: #60a5fa; color: white; padding: 16px; border-radius: 8px;">第一列</div>
-	<div style="background: #34d399; color: white; padding: 16px; border-radius: 8px;">第二列</div>
-	<div style="background: #f59e42; color: white; padding: 16px; border-radius: 8px;">第三列</div>
-</Grid>

package/dist/grid/index.ts

@@ -1,11 +0,0 @@
-import Grid from './Grid.astro';
-import GridBasic from './GridBasic.astro';
-import BasicSourceCode from './GridBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
-
-export { Grid, GridBasic };
-
-// 导出示例源代码
-export const GridExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'Grid'),
-};

package/dist/header/Header.astro

@@ -1,204 +0,0 @@
----
-/**
- * @component Header
- *
- * @description
- * Header 组件是一个用于网站顶部导航的布局组件，提供了logo、导航菜单、语言切换等功能。
- * 组件支持响应式设计，在不同屏幕尺寸下有良好的显示效果，并可选择固定在页面顶部。
- *
- * @design
- * 设计理念：
- * 1. 简洁实用 - 提供清晰的导航和品牌展示，不过度占用视觉空间
- * 2. 响应式适配 - 在移动端和桌面端都有合适的展现形式
- * 3. 可定制性 - 支持多种配置选项，适应不同网站的风格和需求
- * 4. 多语言支持 - 内置语言切换功能，便于构建国际化网站
- */
-import '../style.ts';
-import {
-	LanguageSwitcher,
-	LinkUtil,
-	type IHeaderProps,
-	type INavItem,
-	NavItems,
-	Link,
-	Image,
-	ThemeSwitcher,
-} from '../index';
-import Logo from '../assets/logo-rounded.png';
-
-export interface Props extends IHeaderProps {
-	debug?: boolean;
-}
-
-const {
-	height = 'md',
-	languages = ['zh-cn', 'en'],
-	logo = Logo,
-	logoHref = '/',
-	navItems = [],
-	sticky = true,
-	debug = false,
-	rounded = 'none',
-	paddingHorizontal = 'none',
-	paddingVertical = 'none',
-	navPosition = 'center',
-	showThemeSwitcher = true,
-} = Astro.props;
-
-// 根据高度设置样式
-const headerHeightClasses = {
-	'3xs': 'cosy:h-4',
-	'2xs': 'cosy:h-6',
-	xs: 'cosy:h-8',
-	sm: 'cosy:h-10',
-	md: 'cosy:h-12',
-	lg: 'cosy:h-16',
-	xl: 'cosy:h-20',
-};
-
-const headerHeightClass = headerHeightClasses[height];
-const linkHeightClasses = {
-	'3xs': 'cosy:py-0',
-	'2xs': 'cosy:py-0',
-	xs: 'cosy:py-0',
-	sm: 'cosy:py-1',
-	md: 'cosy:py-1',
-	lg: 'cosy:py-2',
-	xl: 'cosy:py-3',
-};
-
-// 设置logo大小
-const logoSizeClasses = {
-	'3xs': 'cosy:w-3 cosy:h-3',
-	'2xs': 'cosy:w-4 cosy:h-4',
-	xs: 'cosy:w-5 cosy:h-5',
-	sm: 'cosy:w-6 cosy:h-6',
-	md: 'cosy:w-8 cosy:h-8',
-	lg: 'cosy:w-10 cosy:h-10',
-	xl: 'cosy:w-12 cosy:h-12',
-};
-
-const logoSizeClass = logoSizeClasses[height];
-const linkHeightClass = linkHeightClasses[height];
-const currentPath = Astro.url.pathname;
-const activeLink = LinkUtil.getActiveLink(
-	currentPath,
-	navItems.map((item: INavItem) => item.href)
-);
----
-
-<header
-	class:list={[
-		'cosy:w-full cosy:z-50',
-		{
-			'cosy:fixed cosy:top-0': sticky,
-			'cosy:border cosy:bg-amber-300 cosy:border-dashed cosy:border-green-500': debug,
-		},
-		{
-			'cosy:px-2': paddingHorizontal === 'sm',
-			'cosy:px-4': paddingHorizontal === 'md',
-			'cosy:px-6': paddingHorizontal === 'lg',
-			'cosy:px-8': paddingHorizontal === 'xl',
-			'cosy:px-12': paddingHorizontal === '2xl',
-			'cosy:px-16': paddingHorizontal === '3xl',
-		},
-		{
-			'cosy:py-2': paddingVertical === 'sm',
-			'cosy:py-4': paddingVertical === 'md',
-			'cosy:py-6': paddingVertical === 'lg',
-			'cosy:py-8': paddingVertical === 'xl',
-			'cosy:py-12': paddingVertical === '2xl',
-			'cosy:py-16': paddingVertical === '3xl',
-		},
-	]}>
-	<div
-		class:list={[
-			'cosy:bg-accent/70 cosy:flex cosy:flex-grow cosy:backdrop-blur not-prose cosy:border-base-200',
-			{
-				'cosy:rounded-none': rounded === 'none',
-				'cosy:rounded-sm': rounded === 'sm',
-				'cosy:rounded-md': rounded === 'md',
-				'cosy:rounded-lg': rounded === 'lg',
-				'cosy:rounded-xl': rounded === 'xl',
-				'cosy:rounded-full': rounded === 'full',
-			},
-			headerHeightClass,
-			{ 'cosy:border cosy:border-dashed cosy:border-red-500': debug },
-		]}>
-		<div class="cosy:navbar-start cosy:pl-1">
-			{
-				navPosition === 'start' ? (
-					<div class="cosy:flex cosy:items-center cosy:gap-4">
-						<Link
-							animation="none"
-							debug={debug}
-							href={logoHref}
-							class:list={['cosy:btn cosy:btn-ghost', linkHeightClass]}>
-							<Image
-								rounded="full"
-								showPlaceholder={false}
-								transition="none"
-								lazy={false}
-								src={logo}
-								alt="logo"
-								class={logoSizeClass}
-							/>
-						</Link>
-						<div class="cosy:hidden cosy:lg:flex">
-							<NavItems
-								navItems={navItems}
-								activeLink={activeLink}
-								linkHeightClass={linkHeightClass}
-							/>
-						</div>
-					</div>
-				) : (
-					<Link
-						animation="none"
-						debug={debug}
-						href={logoHref}
-						class:list={['cosy:btn cosy:btn-ghost', linkHeightClass]}>
-						<Image
-							rounded="full"
-							showPlaceholder={false}
-							transition="none"
-							lazy={false}
-							src={logo}
-							alt="logo"
-							class={logoSizeClass}
-						/>
-					</Link>
-				)
-			}
-			<slot name="navbar-start" />
-		</div>
-
-		<div class="cosy:hidden cosy:lg:flex cosy:navbar-center">
-			{
-				navPosition === 'center' && (
-					<NavItems navItems={navItems} activeLink={activeLink} linkHeightClass={linkHeightClass} />
-				)
-			}
-			<slot name="navbar-center" />
-		</div>
-
-		<div class="cosy:navbar-end cosy:pr-1">
-			{
-				navPosition === 'end' && (
-					<div class="cosy:hidden cosy:lg:flex">
-						<NavItems
-							navItems={navItems}
-							activeLink={activeLink}
-							linkHeightClass={linkHeightClass}
-						/>
-					</div>
-				)
-			}
-
-			{showThemeSwitcher && <ThemeSwitcher />}
-			{languages.length > 1 && <LanguageSwitcher languages={languages} />}
-
-			<slot name="navbar-end" />
-		</div>
-	</div>
-</header>

package/dist/header/HeaderBasic.astro

@@ -1,14 +0,0 @@
----
-/**
- * @component Header.Basic
- *
- * @description
- * Header组件的基础示例，展示最基本的顶部导航栏，包含logo和语言切换功能。
- */
-import Header from './Header.astro';
-import { getExampleImage } from '../utils/image';
-
-const logo = getExampleImage({ width: 100, height: 100, provider: 'picsum', tag: 'tech' });
----
-
-<Header logoHref={logo} rounded="lg" sticky={false} />

package/dist/header/HeaderCustomNavbarCenter.astro

@@ -1,23 +0,0 @@
----
-/**
- * @component Header.CustomNavbarCenter
- *
- * @description
- * 自定义导航栏中间内容的Header组件示例，展示如何使用slot自定义中间内容。
- */
-import '../style.ts';
-import Header from './Header.astro';
-import { getExampleImage } from '../utils/image';
-
-const logo = getExampleImage({ width: 100, height: 100, provider: 'picsum', tag: 'tech' });
----
-
-<Header logoHref={logo} rounded="lg" sticky={false}>
-	<div slot="navbar-center" class="cosy:flex cosy:items-center cosy:gap-4">
-		<span class="cosy:badge cosy:badge-accent">新功能</span>
-		<div class="cosy:divider cosy:divider-horizontal"></div>
-		<span class="cosy:badge cosy:badge-secondary">热门</span>
-		<div class="cosy:divider cosy:divider-horizontal"></div>
-		<span class="cosy:badge">推荐</span>
-	</div>
-</Header>

package/dist/header/HeaderCustomNavbarEnd.astro

@@ -1,20 +0,0 @@
----
-/**
- * @component Header.CustomNavbarEnd
- *
- * @description
- * 自定义导航栏右侧内容的Header组件示例，展示如何使用slot自定义右侧内容。
- */
-import '../style.ts';
-import Header from './Header.astro';
-import { getExampleImage } from '../utils/image';
-
-const logo = getExampleImage({ width: 100, height: 100, provider: 'picsum', tag: 'tech' });
----
-
-<Header logoHref={logo} rounded="lg" sticky={false}>
-	<div slot="navbar-end" class="cosy:flex cosy:items-center cosy:gap-2">
-		<button class="cosy:btn cosy:btn-sm cosy:btn-ghost">登录</button>
-		<button class="cosy:btn cosy:btn-sm cosy:btn-primary">注册</button>
-	</div>
-</Header>

package/dist/header/HeaderCustomNavbarStart.astro

@@ -1,20 +0,0 @@
----
-/**
- * @component Header.CustomNavbarStart
- *
- * @description
- * 自定义导航栏左侧内容的Header组件示例，展示如何使用slot自定义左侧内容。
- */
-import '../style.ts';
-import Header from './Header.astro';
-import { getExampleImage } from '../utils/image';
-
-const logo = getExampleImage({ width: 100, height: 100, provider: 'picsum', tag: 'tech' });
----
-
-<Header logoHref={logo} rounded="lg" sticky={false}>
-	<div slot="navbar-start" class="cosy:flex cosy:items-center cosy:gap-2 cosy:ml-2">
-		<button class="cosy:btn cosy:btn-sm cosy:btn-primary">联系我们</button>
-		<span class="cosy:badge cosy:badge-outline">在线咨询</span>
-	</div>
-</Header>

package/dist/header/HeaderCustomPosition.astro

@@ -1,23 +0,0 @@
----
-/**
- * @component Header.CustomPosition
- *
- * @description
- * 自定义导航菜单位置的Header组件示例，展示如何设置导航菜单在左侧、中间或右侧。
- */
-import '../style.ts';
-import Header from './Header.astro';
-import { getExampleImage } from '../utils/image';
-
-const logo = getExampleImage({ width: 100, height: 100, provider: 'picsum', tag: 'tech' });
-
-const navItems = [
-	{ href: '/docs', label: '文档' },
-	{ href: '/components', label: '组件' },
-];
-
-// 可以通过navPosition属性设置导航菜单位置：start(左侧)、center(中间)、end(右侧)
-const navPosition = 'start';
----
-
-<Header logoHref={logo} navItems={navItems} navPosition={navPosition} rounded="lg" sticky={false} />

package/dist/header/HeaderWithNavigation.astro

@@ -1,22 +0,0 @@
----
-/**
- * @component Header.WithNavigation
- *
- * @description
- * 带导航菜单的Header组件示例，展示如何添加导航菜单项。
- */
-import '../style.ts';
-import Header from './Header.astro';
-import { getExampleImage } from '../utils/image';
-
-const logo = getExampleImage({ width: 100, height: 100, provider: 'picsum', tag: 'tech' });
-
-const navItems = [
-	{ href: '/', label: '首页' },
-	{ href: '/docs', label: '文档' },
-	{ href: '/components', label: '组件' },
-	{ href: '/about', label: '关于' },
-];
----
-
-<Header logoHref={logo} navItems={navItems} rounded="lg" sticky={false} />

package/dist/header/index.ts

@@ -1,26 +0,0 @@
-import Header from './Header.astro';
-import HeaderBasic from './HeaderBasic.astro';
-import HeaderWithNavigation from './HeaderWithNavigation.astro';
-import HeaderCustomPosition from './HeaderCustomPosition.astro';
-import HeaderCustomNavbarEnd from './HeaderCustomNavbarEnd.astro';
-import HeaderCustomNavbarStart from './HeaderCustomNavbarStart.astro';
-import HeaderCustomNavbarCenter from './HeaderCustomNavbarCenter.astro';
-import BasicSourceCode from './HeaderBasic.astro?raw';
-import WithNavigationSourceCode from './HeaderWithNavigation.astro?raw';
-import CustomPositionSourceCode from './HeaderCustomPosition.astro?raw';
-import CustomNavbarEndSourceCode from './HeaderCustomNavbarEnd.astro?raw';
-import CustomNavbarStartSourceCode from './HeaderCustomNavbarStart.astro?raw';
-import CustomNavbarCenterSourceCode from './HeaderCustomNavbarCenter.astro?raw';
-import { extractSimpleExample } from '../utils/component';
-
-export { Header, HeaderBasic, HeaderWithNavigation, HeaderCustomPosition, HeaderCustomNavbarEnd, HeaderCustomNavbarStart, HeaderCustomNavbarCenter };
-
-// 导出示例源代码
-export const HeaderExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'Header'),
-	WithNavigation: extractSimpleExample(WithNavigationSourceCode, 'Header'),
-	CustomPosition: extractSimpleExample(CustomPositionSourceCode, 'Header'),
-	CustomNavbarEnd: extractSimpleExample(CustomNavbarEndSourceCode, 'Header'),
-	CustomNavbarStart: extractSimpleExample(CustomNavbarStartSourceCode, 'Header'),
-	CustomNavbarCenter: extractSimpleExample(CustomNavbarCenterSourceCode, 'Header'),
-};