@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/src-astro/layout-dashboard/DashboardLayoutBasic.astro

@@ -0,0 +1,51 @@
+---
+import DashboardLayout from './DashboardLayout.astro';
+import type { IMenuItem } from '../types/menu';
+
+const menuItems: IMenuItem[] = [
+  {
+    text: '仪表盘',
+    href: '/dashboard',
+    icon: 'dashboard',
+  },
+  {
+    text: '用户管理',
+    href: '/dashboard/users',
+    icon: 'users',
+  },
+  {
+    text: '设置',
+    href: '/dashboard/settings',
+    icon: 'settings',
+  },
+];
+---
+
+<DashboardLayout
+  title="仪表盘布局示例"
+  description="这是一个仪表盘布局的示例页面"
+  navItems={menuItems}
+>
+  <div
+    class="cosy:grid cosy:grid-cols-1 cosy:md:grid-cols-2 cosy:lg:grid-cols-3 cosy:gap-4"
+  >
+    <div class="cosy:card cosy:bg-base-100 cosy:shadow-xl">
+      <div class="cosy:card-body">
+        <h2 class="cosy:card-title">总用户数</h2>
+        <p class="cosy:text-4xl cosy:font-bold">1,234</p>
+      </div>
+    </div>
+    <div class="cosy:card cosy:bg-base-100 cosy:shadow-xl">
+      <div class="cosy:card-body">
+        <h2 class="cosy:card-title">今日活跃</h2>
+        <p class="cosy:text-4xl cosy:font-bold">567</p>
+      </div>
+    </div>
+    <div class="cosy:card cosy:bg-base-100 cosy:shadow-xl">
+      <div class="cosy:card-body">
+        <h2 class="cosy:card-title">转化率</h2>
+        <p class="cosy:text-4xl cosy:font-bold">45.8%</p>
+      </div>
+    </div>
+  </div>
+</DashboardLayout>

package/dist/{layout-dashboard → src-astro/layout-dashboard}/index.ts

@@ -7,5 +7,5 @@ export { DashboardLayout, DashboardLayoutBasic };
 
 // 导出示例源代码
 export const DashboardLayoutExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'DashboardLayout'),
+  Basic: extractSimpleExample(BasicSourceCode, 'DashboardLayout'),
 };

package/dist/{link → src-astro/link}/Link.astro

@@ -54,7 +54,7 @@
  * ```
  */
 
-import '../style.ts';
+import '../../style.ts';
 
 import type { HTMLAttributes } from 'astro/types';
 
@@ -62,84 +62,99 @@ import type { HTMLAttributes } from 'astro/types';
 type LinkSize = 'sm' | 'md' | 'lg';
 
 // 定义链接变体类型
-type LinkVariant = 'default' | 'primary' | 'secondary' | 'text' | 'cta' | 'ghost' | 'light';
+type LinkVariant =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'text'
+  | 'cta'
+  | 'ghost'
+  | 'light';
 
 // 定义链接动画类型
 type LinkAnimation = 'none' | 'hover-lift' | 'hover-glow' | 'hover-scale';
 
 interface Props extends HTMLAttributes<'a'> {
-	href: string;
-	external?: boolean;
-	block?: boolean;
-	class?: string;
-	'class:list'?: any;
-	variant?: LinkVariant;
-	animation?: LinkAnimation;
-	size?: LinkSize;
-	debug?: boolean;
-	centerText?: boolean;
+  href: string;
+  external?: boolean;
+  block?: boolean;
+  class?: string;
+  'class:list'?: any;
+  variant?: LinkVariant;
+  animation?: LinkAnimation;
+  size?: LinkSize;
+  debug?: boolean;
+  centerText?: boolean;
 }
 
 const {
-	href,
-	external = false,
-	block = false,
-	variant = 'default',
-	animation = 'none',
-	size = 'md',
-	class: className = '',
-	'class:list': classList,
-	debug = false,
-	centerText = false,
-	...rest
+  href,
+  external = false,
+  block = false,
+  variant = 'default',
+  animation = 'none',
+  size = 'md',
+  class: className = '',
+  'class:list': classList,
+  debug = false,
+  centerText = false,
+  ...rest
 } = Astro.props;
 
 // 构建类名
 const classes = [
-	// 基础链接样式
-	'cosy:items-center cosy:cursor-pointer cosy:no-underline cosy:transition-all cosy:duration-200',
-
-	// 显示方式
-	block ? 'cosy:flex cosy:w-full' : 'cosy:inline-flex',
-
-	// 变体样式
-	variant === 'primary' && 'cosy:text-primary cosy:hover:text-primary-focus',
-	variant === 'secondary' && 'cosy:text-secondary cosy:hover:text-secondary-focus',
-	variant === 'text' && 'cosy:text-neutral cosy:hover:text-neutral-focus',
-	variant === 'cta' && 'cosy:text-accent cosy:hover:text-accent-focus cosy:font-medium',
-	variant === 'ghost' && 'cosy:text-base-content cosy:hover:text-base-content/80',
-	variant === 'default' && 'cosy:text-base-content cosy:hover:text-base-content/90',
-	variant === 'light' && 'cosy:text-white cosy:hover:text-white/90 cosy:font-medium',
-
-	// 尺寸样式
-	size === 'sm' && 'cosy:text-sm',
-	size === 'md' && 'cosy:text-base',
-	size === 'lg' && 'cosy:text-lg',
-
-	// 动画效果
-	animation === 'hover-lift' && 'cosy:hover:-translate-y-0.5 cosy:transition-transform',
-	animation === 'hover-glow' && 'cosy:hover:brightness-125 cosy:transition-[filter]',
-	animation === 'hover-scale' && 'cosy:hover:scale-105 cosy:transition-transform',
-
-	// 自定义类名
-	className,
+  // 基础链接样式
+  'cosy:items-center cosy:cursor-pointer cosy:no-underline cosy:transition-all cosy:duration-200',
+
+  // 显示方式
+  block ? 'cosy:flex cosy:w-full' : 'cosy:inline-flex',
+
+  // 变体样式
+  variant === 'primary' && 'cosy:text-primary cosy:hover:text-primary-focus',
+  variant === 'secondary' &&
+    'cosy:text-secondary cosy:hover:text-secondary-focus',
+  variant === 'text' && 'cosy:text-neutral cosy:hover:text-neutral-focus',
+  variant === 'cta' &&
+    'cosy:text-accent cosy:hover:text-accent-focus cosy:font-medium',
+  variant === 'ghost' &&
+    'cosy:text-base-content cosy:hover:text-base-content/80',
+  variant === 'default' &&
+    'cosy:text-base-content cosy:hover:text-base-content/90',
+  variant === 'light' &&
+    'cosy:text-white cosy:hover:text-white/90 cosy:font-medium',
+
+  // 尺寸样式
+  size === 'sm' && 'cosy:text-sm',
+  size === 'md' && 'cosy:text-base',
+  size === 'lg' && 'cosy:text-lg',
+
+  // 动画效果
+  animation === 'hover-lift' &&
+    'cosy:hover:-translate-y-0.5 cosy:transition-transform',
+  animation === 'hover-glow' &&
+    'cosy:hover:brightness-125 cosy:transition-[filter]',
+  animation === 'hover-scale' &&
+    'cosy:hover:scale-105 cosy:transition-transform',
+
+  // 自定义类名
+  className,
 ];
 
 // 文本居中样式
 if (centerText) {
-	classes.push('cosy:justify-center cosy:text-center');
+  classes.push('cosy:justify-center cosy:text-center');
 }
 
 // 调试样式
 if (debug) {
-	classes.push('cosy:border cosy:border-dashed cosy:border-red-500');
+  classes.push('cosy:border cosy:border-dashed cosy:border-red-500');
 }
 ---
 
 <a
-	href={href}
-	class:list={[classes, classList]}
-	{...external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}
-	{...rest}>
-	<slot />
+  href={href}
+  class:list={[classes, classList]}
+  {...external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}
+  {...rest}>
+  <slot />
 </a>

package/dist/src-astro/link/LinkAnimations.astro

@@ -0,0 +1,29 @@
+---
+import Link from './Link.astro';
+---
+
+<div class="cosy:space-y-4">
+  <div class="cosy:flex cosy:gap-4">
+    <Link href="/hover-lift" animation="hover-lift" variant="primary">
+      上浮效果
+    </Link>
+
+    <Link href="/hover-glow" animation="hover-glow" variant="secondary">
+      发光效果
+    </Link>
+
+    <Link href="/hover-scale" animation="hover-scale" variant="cta">
+      缩放效果
+    </Link>
+  </div>
+
+  <div class="cosy:flex cosy:gap-4">
+    <Link href="/block-link" block centerText variant="primary">
+      块级居中链接
+    </Link>
+  </div>
+
+  <div class="cosy:bg-base-200 cosy:p-4">
+    <Link href="/light-variant" variant="light"> 浅色背景中的链接 </Link>
+  </div>
+</div>

package/dist/src-astro/link/LinkBasic.astro

@@ -0,0 +1,17 @@
+---
+import Link from './Link.astro';
+---
+
+<div class="cosy:space-y-4">
+  <div>
+    <Link href="/about">默认链接</Link>
+  </div>
+
+  <div>
+    <Link href="https://example.com" external>外部链接</Link>
+  </div>
+
+  <div>
+    <p>这是一段文字，其中包含一个<Link href="/inline">内联链接</Link>。</p>
+  </div>
+</div>

package/dist/src-astro/link/LinkVariants.astro

@@ -0,0 +1,20 @@
+---
+import Link from './Link.astro';
+---
+
+<div class="cosy:space-y-4">
+  <div class="cosy:flex cosy:gap-4">
+    <Link href="/signup" variant="primary">主要链接</Link>
+    <Link href="/learn-more" variant="secondary">次要链接</Link>
+    <Link href="/docs" variant="text">文本链接</Link>
+    <Link href="/get-started" variant="cta">行动号召</Link>
+    <Link href="/preview" variant="ghost">幽灵链接</Link>
+    <Link href="/help" variant="light">浅色链接</Link>
+  </div>
+
+  <div class="cosy:flex cosy:gap-4">
+    <Link href="/small" size="sm">小型链接</Link>
+    <Link href="/medium" size="md">中型链接</Link>
+    <Link href="/large" size="lg">大型链接</Link>
+  </div>
+</div>

package/dist/{link → src-astro/link}/index.ts

@@ -11,7 +11,7 @@ export { Link, LinkBasic, LinkVariants, LinkAnimations };
 
 // 导出示例源代码
 export const LinkExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'Link'),
-	Variants: extractSimpleExample(VariantsSourceCode, 'Link'),
-	Animations: extractSimpleExample(AnimationsSourceCode, 'Link'),
+  Basic: extractSimpleExample(BasicSourceCode, 'Link'),
+  Variants: extractSimpleExample(VariantsSourceCode, 'Link'),
+  Animations: extractSimpleExample(AnimationsSourceCode, 'Link'),
 };

package/dist/{main → src-astro/main}/Main.astro

@@ -47,63 +47,69 @@
  * </Main>
  * ```
  */
-import '../style.ts';
-import { Article, TableOfContents, type IMainContentProps } from '../index';
+import '../../style.ts';
+import {
+  Article,
+  TableOfContents,
+  type IMainContentProps,
+} from '../../index-astro';
 
 export interface Props extends IMainContentProps {}
 
 const {
-	size = 'md',
-	padding = 'md',
-	verticalPadding = 'md',
-	centered = true,
-	backgroundColor,
-	layout = 'row',
-	isArticle = false,
-	id,
-	showTableOfContents = false,
-	class: className,
-	'class:list': classList,
-	currentLocale,
-	...rest
+  size = 'md',
+  padding = 'md',
+  verticalPadding = 'md',
+  centered = true,
+  backgroundColor,
+  layout = 'row',
+  isArticle = false,
+  id,
+  showTableOfContents = false,
+  class: className,
+  'class:list': classList,
+  currentLocale,
+  ...rest
 } = Astro.props;
 
 // 新增获取布局类的函数
 function getLayoutClasses(layout: string) {
-	if (layout === 'row') return 'cosy:flex cosy:flex-row';
-	if (layout === 'column') return 'cosy:flex cosy:flex-col';
-	return 'cosy:flex cosy:flex-col'; // 默认列布局
+  if (layout === 'row') return 'cosy:flex cosy:flex-row';
+  if (layout === 'column') return 'cosy:flex cosy:flex-col';
+  return 'cosy:flex cosy:flex-col'; // 默认列布局
 }
 
 const layoutClass = getLayoutClasses(layout as string);
 
 // 获取垂直内边距的Tailwind类
 function getVerticalPaddingClasses(padding: string) {
-	if (padding === 'none') return 'cosy:py-0';
-	if (padding === 'xs') return 'cosy:py-1';
-	if (padding === 'sm') return 'cosy:py-2';
-	if (padding === 'md') return 'cosy:py-4';
-	if (padding === 'lg') return 'cosy:py-6';
-	if (padding === 'xl') return 'cosy:py-8';
-	if (padding === '2xl') return 'cosy:py-10';
-	if (padding === '3xl') return 'cosy:py-12';
-	if (padding === '4xl') return 'cosy:py-16';
-	if (padding === '5xl') return 'cosy:py-20';
-	return ''; // 对于自定义padding，使用内联样式
+  if (padding === 'none') return 'cosy:py-0';
+  if (padding === 'xs') return 'cosy:py-1';
+  if (padding === 'sm') return 'cosy:py-2';
+  if (padding === 'md') return 'cosy:py-4';
+  if (padding === 'lg') return 'cosy:py-6';
+  if (padding === 'xl') return 'cosy:py-8';
+  if (padding === '2xl') return 'cosy:py-10';
+  if (padding === '3xl') return 'cosy:py-12';
+  if (padding === '4xl') return 'cosy:py-16';
+  if (padding === '5xl') return 'cosy:py-20';
+  return ''; // 对于自定义padding，使用内联样式
 }
 
 // 获取背景颜色的Tailwind类
 function getBgColorClasses(color: string | undefined) {
-	if (!color) return '';
-	if (color === 'primary') return 'cosy:bg-primary';
-	if (color === 'secondary') return 'cosy:bg-secondary';
-	if (color === 'tertiary') return 'cosy:bg-accent';
-	if (color === 'light') return 'cosy:bg-base-100';
-	if (color === 'dark') return 'cosy:bg-base-300';
-	return ''; // 对于自定义颜色，使用内联样式
+  if (!color) return '';
+  if (color === 'primary') return 'cosy:bg-primary';
+  if (color === 'secondary') return 'cosy:bg-secondary';
+  if (color === 'tertiary') return 'cosy:bg-accent';
+  if (color === 'light') return 'cosy:bg-base-100';
+  if (color === 'dark') return 'cosy:bg-base-300';
+  return ''; // 对于自定义颜色，使用内联样式
 }
 
-const verticalPaddingClass = getVerticalPaddingClasses(verticalPadding as string);
+const verticalPaddingClass = getVerticalPaddingClasses(
+  verticalPadding as string
+);
 const bgColorClass = getBgColorClasses(backgroundColor);
 
 // 构建自定义样式
@@ -111,37 +117,39 @@ const customStyle = [];
 
 // 只有当没有对应的Tailwind类时，才使用内联样式
 if (!verticalPaddingClass && verticalPadding && verticalPadding !== 'none') {
-	customStyle.push(`padding-top: ${verticalPadding}; padding-bottom: ${verticalPadding};`);
+  customStyle.push(
+    `padding-top: ${verticalPadding}; padding-bottom: ${verticalPadding};`
+  );
 }
 
 if (!bgColorClass && backgroundColor) {
-	customStyle.push(`background-color: ${backgroundColor};`);
+  customStyle.push(`background-color: ${backgroundColor};`);
 }
 
 const inlineStyle = customStyle.length > 0 ? customStyle.join(' ') : undefined;
 ---
 
 <main
-	id={id}
-	class:list={[
-		'cosy:w-full',
-		layoutClass,
-		verticalPaddingClass,
-		bgColorClass,
-		className,
-		classList,
-	]}
-	style={inlineStyle}
-	{...rest}>
-	{
-		isArticle ? (
-			<Article>
-				<slot />
-			</Article>
-		) : (
-			<slot />
-		)
-	}
+  id={id}
+  class:list={[
+    'cosy:w-full',
+    layoutClass,
+    verticalPaddingClass,
+    bgColorClass,
+    className,
+    classList,
+  ]}
+  style={inlineStyle}
+  {...rest}>
+  {
+    isArticle ? (
+      <Article>
+        <slot />
+      </Article>
+    ) : (
+      <slot />
+    )
+  }
 
-	{showTableOfContents && <TableOfContents lang={currentLocale} />}
+  {showTableOfContents && <TableOfContents lang={currentLocale} />}
 </main>

package/dist/src-astro/main/index.ts

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

package/dist/src-astro/modal/Modal.astro

@@ -0,0 +1,126 @@
+---
+/**
+ * @component Modal
+ *
+ * @description
+ * Modal 组件是一个模态对话框，用于在不离开当前页面的情况下显示内容、通知或请求用户输入。
+ * 它会覆盖在页面内容上方，并提供一个聚焦的交互环境。
+ *
+ * @design
+ * 设计理念：
+ * 1. 聚焦交互 - 通过遮罩层和动画效果引导用户注意力
+ * 2. 灵活布局 - 支持标题、内容和操作按钮的灵活组合
+ * 3. 可访问性 - 支持键盘导航和屏幕阅读器
+ * 4. 响应式设计 - 在不同屏幕尺寸下保持良好的用户体验
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Modal id="my-modal" title="提示">
+ *   <p>这是一个模态对话框的内容。</p>
+ *   <button slot="actions" data-modal-target="my-modal">关闭</button>
+ * </Modal>
+ *
+ * <!-- 触发按钮 -->
+ * <button data-modal-target="my-modal">打开模态框</button>
+ * ```
+ *
+ * 自定义操作按钮：
+ * ```astro
+ * <Modal id="confirm-modal" title="确认操作">
+ *   <p>您确定要执行此操作吗？</p>
+ *   <div slot="actions">
+ *     <button class="btn btn-primary">确认</button>
+ *     <button class="btn" data-modal-target="confirm-modal">取消</button>
+ *   </div>
+ * </Modal>
+ * ```
+ *
+ * 不带标题的模态框：
+ * ```astro
+ * <Modal id="image-modal">
+ *   <img src="/images/large-image.jpg" alt="大图预览" />
+ * </Modal>
+ * ```
+ */
+
+import '../../style.ts';
+import { Button } from '../../index-astro';
+
+interface Props {
+  /**
+   * Modal 的唯一标识符
+   */
+  id: string;
+  /**
+   * 模态框的标题
+   */
+  title?: string;
+  /**
+   * 是否显示关闭按钮
+   * @default true
+   */
+  showCloseButton?: boolean;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  id,
+  title,
+  showCloseButton = true,
+  class: className = '',
+} = Astro.props;
+---
+
+<dialog id={id} class="cosy:modal">
+  <div class:list={['cosy:modal-box', className]}>
+    {
+      showCloseButton && (
+        <form method="dialog">
+          <Button
+            variant="ghost"
+            size="sm"
+            shape="circle"
+            formmethod="dialog"
+            class="cosy:modal-close-button">
+            ✕
+          </Button>
+        </form>
+      )
+    }
+
+    {title && <h3 class="cosy:modal-title">{title}</h3>}
+
+    <div class="cosy:modal-content">
+      <slot />
+    </div>
+
+    <div class="cosy:modal-action">
+      <slot name="actions" />
+    </div>
+  </div>
+
+  <form method="dialog" class="cosy:modal-backdrop">
+    <button>关闭</button>
+  </form>
+</dialog>
+
+<script is:inline define:vars={{ id }}>
+  // 为了方便使用，我们提供一些辅助方法
+  document.addEventListener('DOMContentLoaded', () => {
+    const modal = document.getElementById(id);
+    if (!modal) return;
+
+    // 为所有触发这个模态框的按钮添加点击事件
+    document
+      .querySelectorAll(`[data-modal-target="${id}"]`)
+      .forEach((trigger) => {
+        trigger.addEventListener('click', () => {
+          modal.showModal();
+        });
+      });
+  });
+</script>

package/dist/src-astro/modal/index.ts

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