@coffic/cosy-ui 0.7.4 → 0.8.7

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/src-astro/layout-dashboard/index.ts

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

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

@@ -0,0 +1,160 @@
+---
+/**
+ * @component Link
+ *
+ * @description
+ * Link 组件是一个增强的链接组件，提供了丰富的样式变体和动画效果。
+ * 它可以用于导航、按钮、行动号召等多种场景。
+ *
+ * @design
+ * 设计理念：
+ * 1. 灵活多变 - 提供多种样式变体，适应不同场景
+ * 2. 视觉反馈 - 通过悬停效果提供用户交互反馈
+ * 3. 一致性 - 保持与整体设计系统的一致性
+ * 4. 可访问性 - 确保链接可被键盘导航和屏幕阅读器识别
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Link href="/about">关于我们</Link>
+ * ```
+ *
+ * 外部链接：
+ * ```astro
+ * <Link href="https://example.com" external>访问外部网站</Link>
+ * ```
+ *
+ * 样式变体：
+ * ```astro
+ * <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>
+ * ```
+ *
+ * 块级显示：
+ * ```astro
+ * <Link href="/contact" block>独占一行的链接</Link>
+ * <p>这是一段文字，其中包含一个<Link href="/inline">内联链接</Link>。</p>
+ * ```
+ *
+ * 动画效果：
+ * ```astro
+ * <Link href="/contact" animation="hover-lift">联系我们</Link>
+ * <Link href="/features" animation="hover-glow">功能特性</Link>
+ * <Link href="/pricing" animation="hover-scale">查看价格</Link>
+ * ```
+ *
+ * 尺寸变体：
+ * ```astro
+ * <Link href="/small" size="sm">小型链接</Link>
+ * <Link href="/medium" size="md">中型链接</Link>
+ * <Link href="/large" size="lg">大型链接</Link>
+ * ```
+ */
+
+import '../../style.ts';
+
+import type { HTMLAttributes } from 'astro/types';
+
+// 定义链接尺寸类型
+type LinkSize = 'sm' | 'md' | 'lg';
+
+// 定义链接变体类型
+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;
+}
+
+const {
+  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,
+];
+
+// 文本居中样式
+if (centerText) {
+  classes.push('cosy:justify-center cosy:text-center');
+}
+
+// 调试样式
+if (debug) {
+  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 />
+</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/src-astro/link/index.ts

@@ -0,0 +1,17 @@
+import Link from './Link.astro';
+import LinkBasic from './LinkBasic.astro';
+import LinkVariants from './LinkVariants.astro';
+import LinkAnimations from './LinkAnimations.astro';
+import BasicSourceCode from './LinkBasic.astro?raw';
+import VariantsSourceCode from './LinkVariants.astro?raw';
+import AnimationsSourceCode from './LinkAnimations.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Link, LinkBasic, LinkVariants, LinkAnimations };
+
+// 导出示例源代码
+export const LinkExampleCodes = {
+  Basic: extractSimpleExample(BasicSourceCode, 'Link'),
+  Variants: extractSimpleExample(VariantsSourceCode, 'Link'),
+  Animations: extractSimpleExample(AnimationsSourceCode, 'Link'),
+};

package/dist/src-astro/main/Main.astro

@@ -0,0 +1,155 @@
+---
+/**
+ * @component Main
+ *
+ * @description
+ * Main 组件是页面的主要内容区域，使用 Container 组件提供响应式布局。
+ * 它适合作为页面的主体部分，自动处理不同屏幕尺寸下的布局和内边距。
+ *
+ * @design
+ * 设计理念：
+ * 1. 结构清晰 - 明确表示页面的主要内容区域，提高语义化
+ * 2. 响应式布局 - 在不同屏幕尺寸下自动调整内边距和宽度
+ * 3. 灵活配置 - 支持自定义容器尺寸、内边距和背景颜色
+ * 4. 与容器集成 - 无缝集成 Container 组件，保持布局一致性
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * ---
+ * import { Main } from '@coffic/cosy-ui';
+ * ---
+ *
+ * <Main>
+ *   <h1>页面标题</h1>
+ *   <p>页面内容</p>
+ * </Main>
+ * ```
+ *
+ * 自定义容器尺寸：
+ * ```astro
+ * <Main size="lg">
+ *   <p>这是一个较宽的主内容区域</p>
+ * </Main>
+ * ```
+ *
+ * 自定义内边距：
+ * ```astro
+ * <Main verticalPadding="lg" padding="xl">
+ *   <p>这个主内容区域有更大的内边距</p>
+ * </Main>
+ * ```
+ *
+ * 自定义背景颜色：
+ * ```astro
+ * <Main backgroundColor="primary">
+ *   <p>这个主内容区域有主题色背景</p>
+ * </Main>
+ * ```
+ */
+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
+} = 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'; // 默认列布局
+}
+
+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，使用内联样式
+}
+
+// 获取背景颜色的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 ''; // 对于自定义颜色，使用内联样式
+}
+
+const verticalPaddingClass = getVerticalPaddingClasses(
+  verticalPadding as string
+);
+const bgColorClass = getBgColorClasses(backgroundColor);
+
+// 构建自定义样式
+const customStyle = [];
+
+// 只有当没有对应的Tailwind类时，才使用内联样式
+if (!verticalPaddingClass && verticalPadding && verticalPadding !== 'none') {
+  customStyle.push(
+    `padding-top: ${verticalPadding}; padding-bottom: ${verticalPadding};`
+  );
+}
+
+if (!bgColorClass && 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 />
+    )
+  }
+
+  {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';

package/dist/src-astro/module/Module.astro

@@ -0,0 +1,68 @@
+---
+/**
+ * @component Module
+ *
+ * @description
+ * Module 组件用于展示包含图片、标题和描述的内容模块。
+ * 适用于特性展示、产品介绍等场景。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Module
+ *   title="模块标题"
+ *   description="模块描述文本"
+ *   image={moduleImage}
+ * />
+ * ```
+ *
+ * 在网格中使用：
+ * ```astro
+ * <div class="cosy:grid cosy:grid-cols-3 cosy:gap-8">
+ *   <Module title="特性一" description="描述" image={image1} />
+ *   <Module title="特性二" description="描述" image={image2} />
+ *   <Module title="特性三" description="描述" image={image3} />
+ * </div>
+ * ```
+ */
+
+import { Image } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+import '../../style.ts';
+
+interface Props {
+  /**
+   * 模块标题
+   */
+  title: string;
+  /**
+   * 模块描述
+   */
+  description: string;
+  /**
+   * 模块图片
+   */
+  image: ImageMetadata;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const { title, description, image, class: className = '' } = Astro.props;
+---
+
+<div
+  class={`cosy:flex cosy:flex-col cosy:items-center cosy:gap-4 ${className}`}>
+  <div class="cosy:w-48 cosy:h-48 cosy:relative">
+    <Image
+      src={image}
+      alt={title}
+      class="cosy:w-full cosy:h-full cosy:object-contain"
+    />
+  </div>
+  <h3 class="cosy:text-xl cosy:font-semibold cosy:text-center">{title}</h3>
+  <p class="cosy:text-base-content/70 cosy:text-center cosy:max-w-sm">
+    {description}
+  </p>
+</div>

package/dist/src-astro/module/ModuleBasic.astro

@@ -0,0 +1,12 @@
+---
+import { Module } from '../../index-astro';
+import demoImage from '../assets/logo-rounded.png';
+---
+
+<div class="cosy:grid cosy:grid-cols-1 cosy:gap-8 cosy:max-w-xl">
+  <Module
+    title="基础模块示例"
+    description="这是一个基础的模块示例，展示了标题、描述和图片的基本布局。"
+    image={demoImage}
+  />
+</div>