@coffic/cosy-ui 0.9.26 → 0.9.28

package/dist/src/assets/iconData.ts

@@ -76,6 +76,16 @@ export const iconData: Record<string, IconData> = {
         path: 'M19 9l-7 7-7-7',
     },
 
+    // 左箭头图标
+    chevronLeft: {
+        path: 'M15 18l-6-6 6-6',
+    },
+
+    // 右箭头图标
+    chevronRight: {
+        path: 'M9 18l6-6-6-6',
+    },
+
     // 日历图标
     calendar: {
         path: 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',

package/dist/src-astro/alert/Alert.astro

@@ -49,16 +49,18 @@
  * ```
  *
  * @props
- * @prop {('info'|'success'|'warning'|'error')} [type='info'] - 提示类型，影响颜色和图标
- * @prop {string} [title] - 提示标题，可选
- * @prop {string} [class] - 自定义 CSS 类名
- * @prop {boolean} [closable=true] - 是否可关闭
- * @prop {boolean} [showIcon=true] - 是否显示图标
- * @prop {('xs'|'sm'|'md'|'lg'|'xl')} [marginY] - 垂直方向外边距大小
+ * @prop {string} [class] - 自定义 CSS 类名，用于覆盖默认样式
+ * @prop {boolean} [closable=true] - 是否可关闭，设置为 false 时隐藏关闭按钮
+ * @prop {string} [description] - 描述文本，显示在标题下方，字体较小且透明度降低
+ * @prop {('xs'|'sm'|'md'|'lg'|'xl')} [marginY] - 垂直方向外边距大小，支持预设的尺寸值
+ * @prop {boolean} [showIcon=true] - 是否显示图标，设置为 false 时隐藏类型对应的图标
+ * @prop {string} [title] - 提示标题，可选，显示为粗体文本
+ * @prop {('info'|'success'|'warning'|'error')} [type='info'] - 提示类型，影响颜色和图标，支持 info、success、warning、error 四种类型
+ * @prop {('solid'|'outline'|'dash'|'soft')} [variant='solid'] - 样式变体，支持 solid（实心）、outline（描边）、dash（虚线）、soft（柔和）四种风格
  *
  * @slots
- * @slot default - 提示内容
- * @slot action - 自定义操作按钮，显示在 alert 右侧
+ * @slot default - 提示内容，主要文本内容
+ * @slot action - 自定义操作按钮，显示在 alert 右侧，适合放置自定义按钮或其他操作
  */
 
 import '../../style.ts';

package/dist/src-astro/alert-dialog/AlertDialog.astro

@@ -23,12 +23,15 @@
  * ```
  *
  * @props
- * @prop {string} message - 对话框显示的消息内容
- * @prop {('zh-cn'|'en')} [lang='zh-cn'] - 语言设置，影响按钮文本
- * @prop {string} [id='alert-dialog'] - 对话框的唯一标识符
+ * @prop {string} [id='alert-dialog'] - 对话框的唯一标识符，用于通过 JavaScript 控制对话框的显示和隐藏
+ * @prop {('zh-cn'|'en')} [lang='zh-cn'] - 语言设置，影响按钮文本，支持中文和英文两种语言
+ * @prop {string} message - 对话框显示的消息内容，支持任意文本内容
+ *
+ * @slots
+ * @slot default - 无插槽内容，所有内容通过 message 属性传递
  */
 
-import '../../style';
+import '../../style.ts';
 
 export interface Props {
   message: string;

package/dist/src-astro/badge/Badge.astro

@@ -1,19 +1,39 @@
 ---
 /**
  * @component Badge
- * @description 一个用于高亮信息的小组件。
+ *
+ * @description
+ * Badge 组件用于突出显示少量信息，如标签、状态或计数。
+ *
  * @usage
+ * 基本用法：
  * ```astro
  * <Badge>默认</Badge>
  * <Badge variant="primary">Primary</Badge>
  * ```
+ *
+ * 不同尺寸：
+ * ```astro
+ * <Badge size="xs">超小</Badge>
+ * <Badge size="sm">小</Badge>
+ * <Badge size="md">中</Badge>
+ * <Badge size="lg">大</Badge>
+ * ```
+ *
+ * 描边样式：
+ * ```astro
+ * <Badge outline>描边样式</Badge>
+ * <Badge variant="primary" outline>主要描边</Badge>
+ * ```
+ *
  * @props
- * @prop {('primary'|'secondary'|'accent'|'ghost'|'info'|'success'|'warning'|'error')} [variant] - 徽章的颜色变体。
- * @prop {('xs'|'sm'|'md'|'lg')} [size] - 徽章的尺寸。
- * @prop {boolean} [outline=false] - 徽章是否为描边样式。
- * @prop {string} [class] - 自定义 CSS 类。
+ * @prop {string} [class] - 自定义 CSS 类名，用于覆盖默认样式
+ * @prop {boolean} [outline=false] - 徽章是否为描边样式，设置为 true 时显示为描边风格
+ * @prop {('xs'|'sm'|'md'|'lg')} [size] - 徽章的尺寸，支持 xs、sm、md、lg 四种尺寸
+ * @prop {('primary'|'secondary'|'accent'|'ghost'|'info'|'success'|'warning'|'error')} [variant] - 徽章的颜色变体，支持多种预设颜色主题
+ *
  * @slots
- * @slot default - 徽章内容。
+ * @slot default - 徽章内容，支持任意文本内容
  */
 import '../../style.ts';
 

package/dist/src-astro/button/Button.astro

@@ -52,6 +52,26 @@
  * <Button href="https://example.com">跳转链接</Button>
  * <Button href="https://example.com" target="_blank">新窗口打开</Button>
  * ```
+ *
+ * @props
+ * @prop {boolean} [block=false] - 是否为块级显示，设置为 true 时按钮占满容器宽度
+ * @prop {string} [class] - 自定义 CSS 类名，用于覆盖默认样式
+ * @prop {boolean} [disabled=false] - 是否禁用按钮，设置为 true 时按钮不可点击
+ * @prop {string} [formmethod] - 表单提交方法，支持 dialog 等特殊值
+ * @prop {string} [href] - 链接地址，设置后按钮变为链接形式
+ * @prop {boolean} [loading=false] - 是否显示加载状态，设置为 true 时显示加载动画
+ * @prop {string} [onClick] - 点击事件处理函数，支持内联 JavaScript 代码
+ * @prop {('circle'|'square')} [shape] - 按钮形状，支持 circle（圆形）和 square（方形）
+ * @prop {('lg'|'md'|'sm'|'xs')} [size='md'] - 按钮尺寸，支持 lg、md、sm、xs 四种尺寸
+ * @prop {string} [target] - 链接目标，支持 _self、_blank、_parent、_top
+ * @prop {('button'|'submit'|'reset')} [type='button'] - 按钮类型，支持 button、submit、reset
+ * @prop {('primary'|'secondary'|'accent'|'info'|'success'|'warning'|'error'|'ghost'|'link'|'outline'|'neutral'|'gradient-sky'|'gradient-watermelon'|'gradient-lemon'|'gradient-grape'|'gradient-mango'|'gradient-forest'|'gradient-ocean'|'gradient-sunset'|'gradient-flower'|'gradient-pitaya'|'gradient-banana'|'gradient-blueberry'|'gradient-kiwi')} [variant='primary'] - 按钮样式变体，支持多种预设样式和渐变效果
+ * @prop {boolean} [wide=false] - 是否为宽按钮，设置为 true 时按钮宽度增加
+ *
+ * @slots
+ * @slot default - 按钮内容，支持任意文本内容
+ * @slot icon-left - 左侧图标，显示在按钮内容左侧
+ * @slot icon-right - 右侧图标，显示在按钮内容右侧
  */
 
 // 导入样式

package/dist/src-astro/card/Card.astro

@@ -57,12 +57,12 @@
  * ```
  *
  * @props
- * @prop {string} title - 卡片标题
- * @prop {string} [subtitle] - 卡片副标题或描述
- * @prop {string} [imageUrl] - 卡片顶部图片的URL
- * @prop {string} [href] - 如果提供，卡片将变成可点击的链接
- * @prop {boolean} [compact] - 是否使用紧凑模式
  * @prop {string} [class] - 自定义CSS类，可用于覆盖默认样式
+ * @prop {boolean} [compact] - 是否使用紧凑模式
+ * @prop {string} [href] - 如果提供，卡片将变成可点击的链接
+ * @prop {string} [imageUrl] - 卡片顶部图片的URL
+ * @prop {string} [subtitle] - 卡片副标题或描述
+ * @prop {string} title - 卡片标题
  *
  * @slots
  * @slot default - 卡片的主要内容区域
@@ -74,27 +74,27 @@ import '../../style.ts';
  * Card 组件的 Props 接口
  */
 export interface CardProps {
-  /** 卡片标题 */
-  title: string;
-  /** 卡片副标题或描述 */
-  subtitle?: string;
-  /** 卡片顶部图片的URL */
-  imageUrl?: string;
-  /** 如果提供，卡片将变成可点击的链接 */
-  href?: string;
-  /** 是否使用紧凑模式 */
-  compact?: boolean;
   /** 自定义CSS类，可用于覆盖默认样式 */
   class?: string;
+  /** 是否使用紧凑模式 */
+  compact?: boolean;
+  /** 如果提供，卡片将变成可点击的链接 */
+  href?: string;
+  /** 卡片顶部图片的URL */
+  imageUrl?: string;
+  /** 卡片副标题或描述 */
+  subtitle?: string;
+  /** 卡片标题 */
+  title: string;
 }
 
 const {
-  title,
-  subtitle,
-  imageUrl,
-  href,
-  compact,
   class: className = '',
+  compact,
+  href,
+  imageUrl,
+  subtitle,
+  title,
 } = Astro.props;
 
 // 构建卡片样式类

package/dist/src-astro/card-course/CardCourse.astro

@@ -8,18 +8,18 @@
  * @usage
  * ```astro
  * <CardCourse courseName="React 基础教程" lang="zh" href="/courses/react-basics" />
- * <CardCourse courseName="Vue 进阶" lang="zh" href="/courses/vue" padding="xl" contentPadding="md" />
+ * <CardCourse courseName="Vue 进阶" lang="zh" href="/courses/vue" contentPadding="md" />
  * <CardCourse courseName="AI 编程" keywords={["人工智能", "机器学习", "Python"]} lang="zh" href="/courses/ai" />
  * ```
  *
  * @props
+ * - contentPadding?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" - 内容区域内边距，默认为 "lg"
  * - courseName: string - 课程标题
  * - description?: string - 课程描述
- * - lang: string - 语言（"en" 或 "zh"）
  * - href: string - 课程链接
- * - keywords?: string[] - 图标关键词数组，用于图标匹配
  * - iconSize?: "sm" | "md" | "lg" | "xl" - 图标尺寸，默认为 "md"
- * - contentPadding?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" - 内容区域内边距，默认为 "lg"
+ * - keywords?: string[] - 图标关键词数组，用于图标匹配
+ * - lang: string - 语言（"en" 或 "zh"）
  */
 
 import '../../style.ts';
@@ -35,24 +35,23 @@ import { SmartBg } from '../smart-bg';
 import type { PaddingSize } from './types';
 
 interface Props {
+  contentPadding?: PaddingSize;
   courseName: string;
   description?: string;
-  lang: string;
   href: string;
-  keywords?: string[];
   iconSize?: 'sm' | 'md' | 'lg' | 'xl';
-  padding?: PaddingSize;
-  contentPadding?: PaddingSize;
+  keywords?: string[];
+  lang: string;
 }
 
 const {
+  contentPadding = 'lg',
   courseName,
   description = '',
-  lang,
   href,
-  keywords = [],
   iconSize = 'md',
-  contentPadding = 'lg',
+  keywords = [],
+  lang,
 } = Astro.props;
 
 const displayName = formatDisplayName(courseName);
@@ -90,7 +89,7 @@ const contentPaddingClasses = getContentPaddingClasses(contentPadding);
     />
 
     <div
-      class={`cosy:card-body ${contentPaddingClasses} cosy:bg-base-100/30 cosy:relative cosy:z-10`}>
+      class={`cosy:card-body ${contentPaddingClasses} cosy:bg-base-100/30 cosy:relative cosy:z-10 cosy:h-full`}>
       <!-- 内容区域 -->
       <CardCourseContent displayName={displayName} description={description} />
 

package/dist/src-astro/card-course/types.ts

@@ -7,18 +7,18 @@ export type PaddingSize = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3
  * CardCourse 组件的 Props 接口
  */
 export interface CardCourseProps {
+    /** 内容区域内边距，默认为 "lg" */
+    contentPadding?: PaddingSize;
     /** 课程标题 */
     courseName: string;
     /** 课程描述 */
     description?: string;
-    /** 语言（"en" 或 "zh"） */
-    lang: string;
     /** 课程链接 */
     href: string;
-    /** 图标关键词数组，用于图标匹配 */
-    keywords?: string[];
     /** 图标尺寸，默认为 "md" */
     iconSize?: "sm" | "md" | "lg" | "xl";
-    /** 内容区域内边距，默认为 "lg" */
-    contentPadding?: PaddingSize;
+    /** 图标关键词数组，用于图标匹配 */
+    keywords?: string[];
+    /** 语言（"en" 或 "zh"） */
+    lang: string;
 } 

package/dist/src-astro/container/Container.astro

@@ -73,13 +73,18 @@
  * ```
  *
  * @props
- * @prop {string} size - 容器尺寸
- * @prop {string} padding - 内边距大小
- * @prop {string} margin - 外边距大小
- * @prop {boolean} centered - 是否居中显示
- * @prop {boolean} border - 是否显示边框
- * @prop {string} flex - flex布局方向
- * @prop {string} gap - flex项目间距
+ * @prop {boolean} [border=false] - 是否显示边框，启用后会在容器周围添加边框和圆角
+ * @prop {boolean} [centered=true] - 是否居中显示，设置为false时容器将靠左对齐
+ * @prop {string} [class] - 自定义CSS类名，用于添加额外的样式
+ * @prop {any} [class:list] - 类名列表，支持动态类名组合
+ * @prop {string} [flex] - flex布局方向，可选值：row、col、row-reverse、col-reverse，不设置则不启用flex布局
+ * @prop {string} [gap='none'] - flex项目间距，可选值：none、xs、sm、md、lg、xl，仅在启用flex布局时生效
+ * @prop {string} [items] - flex项目水平对齐方式，可选值：start、end、center、baseline、stretch，仅在启用flex布局时生效
+ * @prop {string} [justify] - flex项目垂直对齐方式，可选值：start、end、center、between、around、evenly，仅在启用flex布局时生效
+ * @prop {string} [margin='none'] - 外边距大小，可选值：none、xs、sm、md、lg、xl、2xl、3xl、4xl、5xl、6xl
+ * @prop {string} [padding='md'] - 内边距大小，可选值：none、sm、md、lg、xl
+ * @prop {string} [size='md'] - 容器尺寸，可选值：xs、sm、md、lg、xl、full，控制容器的最大宽度
+ * @prop {...HTMLAttributes<'div'>} [rest] - 其他HTML div标签属性
  */
 
 import type { HTMLAttributes } from 'astro/types';
@@ -87,33 +92,10 @@ 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 "none"
+   * 是否显示边框
+   * @default false
    */
-  margin?:
-    | 'none'
-    | 'xs'
-    | 'sm'
-    | 'md'
-    | 'lg'
-    | 'xl'
-    | '2xl'
-    | '3xl'
-    | '4xl'
-    | '5xl'
-    | '6xl';
+  border?: boolean;
 
   /**
    * 是否居中显示
@@ -122,10 +104,14 @@ interface Props extends HTMLAttributes<'div'> {
   centered?: boolean;
 
   /**
-   * 是否显示边框
-   * @default false
+   * 自定义类名
    */
-  border?: boolean;
+  class?: string;
+
+  /**
+   * 类名列表
+   */
+  'class:list'?: any;
 
   /**
    * flex布局方向，不设置则不启用flex布局
@@ -149,14 +135,33 @@ interface Props extends HTMLAttributes<'div'> {
   justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
 
   /**
-   * 自定义类名
+   * 外边距大小
+   * @default "none"
    */
-  class?: string;
+  margin?:
+    | 'none'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl';
 
   /**
-   * 类名列表
+   * 内边距大小
+   * @default "md"
    */
-  'class:list'?: any;
+  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /**
+   * 容器尺寸
+   * @default "md"
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 }
 
 const {

package/dist/src-astro/icons/ChevronLeftIcon.astro

@@ -0,0 +1,31 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+/**
+ * 左箭头图标组件
+ */
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="chevronLeft" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/ChevronRightIcon.astro

@@ -0,0 +1,31 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+/**
+ * 右箭头图标组件
+ */
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="chevronRight" size={size} stroke={color} class={className} />

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

@@ -26,6 +26,8 @@ export { default as InfoCircle } from './InfoCircle.astro';
 export { default as InboxArchive } from './InboxArchive.astro';
 export { default as SettingsIcon } from './SettingsIcon.astro';
 export { default as ChevronDownIcon } from './ChevronDownIcon.astro';
+export { default as ChevronLeftIcon } from './ChevronLeftIcon.astro';
+export { default as ChevronRightIcon } from './ChevronRightIcon.astro';
 export { default as HomeIcon } from './HomeIcon.astro';
 export { default as DashboardIcon } from './DashboardIcon.astro';
 export { default as ChartIcon } from './ChartIcon.astro';

package/dist/src-astro/layout-app/AppHeader.astro

@@ -84,7 +84,7 @@ const {
 
   <div slot="navbar-end">
     {
-      showSearch && Astro.slots.has('modal-search') && (
+      showSearch && (
         <Button data-modal-target="modalSearch" variant="ghost" size="sm">
           <SearchIcon size="24px" />
         </Button>

package/dist/src-astro/layout-app/AppLayout.astro

@@ -1,8 +1,28 @@
 ---
 /**
- * AppLayout组件
- *
- * 适用于页面布局，包含头部导航、侧边栏导航和目录
+ * @component AppLayout
+ * @description 应用布局组件，适用于页面布局，包含头部导航、侧边栏导航和目录
+ * @usage 用于创建包含头部、侧边栏、主内容区和页脚的完整页面布局
+ * @props
+ * @prop {boolean} [debug=false] - 是否启用调试模式，显示各个部分的边框
+ * @prop {Object} [footerConfig] - 页脚配置，包含站点信息、社交媒体链接等
+ * @prop {Object} [headerConfig] - 头部配置，传递给AppHeader组件
+ * @prop {number} [loadingDelay=100] - 加载中界面延迟显示的时间（毫秒）
+ * @prop {Object} [mainContentConfig] - 主内容区域配置
+ * @prop {Object} [metaConfig] - 元数据配置，包含页面标题、描述等
+ * @prop {boolean} [showFooter=true] - 是否显示页脚
+ * @prop {boolean} [showHeader=true] - 是否显示头部
+ * @prop {boolean} [showSidebar=true] - 是否显示侧边栏
+ * @prop {Object} [sidebarConfig] - 侧边栏配置，包含导航项等
+ * @prop {string} [class] - 自定义CSS类名
+ * @prop {any} [class:list] - 类名列表
+ * @prop {...HTMLAttributes<'div'>} [rest] - 其他HTML div标签属性
+ * @slots
+ * @slot default - 主内容区域
+ * @slot navbar-start - 导航栏开始位置的内容（传递给AppHeader）
+ * @slot navbar-center - 导航栏中间位置的内容（传递给AppHeader）
+ * @slot navbar-end - 导航栏结束位置的内容（传递给AppHeader）
+ * @slot modal-search - 搜索模态框内容，当提供此slot时会显示搜索按钮（传递给AppHeader）
  *
  * 布局效果：
  *
@@ -36,25 +56,6 @@
  * +------------------+
  * ```
  *
- * @param {Object} sidebarConfig - 侧边栏配置
- * @param {boolean} [showHeader=true] - 是否显示头部
- * @param {boolean} [showFooter=true] - 是否显示页脚
- * @param {boolean} [showSidebar=true] - 是否显示侧边栏
- * @param {string} [className] - 自定义类名
- * @param {Array} [classList] - 自定义类名列表
- * @param {boolean} [debug=true] - 是否启用调试模式
- * @param {Object} mainContentConfig - 主内容区域配置
- * @param {Object} footerConfig - 页脚配置
- * @param {Object} headerConfig - 头部配置（传递给AppHeader组件）
- * @param {Object} metaConfig - 元数据配置
- * @param {Object} rest - 其他属性
- *
- * @slot default - 主内容区域
- * @slot navbar-start - 导航栏开始位置的内容（传递给AppHeader）
- * @slot navbar-center - 导航栏中间位置的内容（传递给AppHeader）
- * @slot navbar-end - 导航栏结束位置的内容（传递给AppHeader）
- * @slot modal-search - 搜索模态框内容，当提供此slot时会显示搜索按钮（传递给AppHeader）
- *
  * @example
  * ```astro
  * ---
@@ -330,11 +331,10 @@ const sidebarHeightClass = getSidebarHeightClass(headerConfig?.height);
         headerConfig={headerConfig}
         debug={debug}
         showSidebar={showSidebar}
-        showSearch={true}>
+        showSearch={Astro.slots.has('modal-search')}>
         <slot name="navbar-start" slot="navbar-start" />
         <slot name="navbar-center" slot="navbar-center" />
         <slot name="navbar-end" slot="navbar-end" />
-        <slot name="modal-search" slot="modal-search" />
       </AppHeader>
     )
   }

package/dist/src-astro/layout-app/SkeletonLoader.astro

@@ -95,7 +95,7 @@ const {
 const loaderId = `skeleton-loader-${Math.random().toString(36).substr(2, 9)}`;
 ---
 
-<div id={loaderId} class="cosy:relative">
+<div id={loaderId} class="cosy:relative cosy:w-full">
   <!-- 骨架屏 -->
   <div
     id={`${loaderId}-skeleton`}