@coffic/cosy-ui 0.9.20 → 0.9.23

package/dist/src-astro/language-switcher/LanguageSwitcher.astro

@@ -76,9 +76,7 @@ if (renderState.shouldRender && Astro.currentLocale) {
 
 {
   renderState.shouldRender && (
-    <div
-      transition:persist
-      class={`cosy:dropdown cosy:dropdown-end ${className}`}>
+    <div class={`cosy:dropdown cosy:dropdown-end ${className}`}>
       <div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
         <span class="cosy:mr-1">{renderState.currentLanguageName}</span>
         <ChevronDownIcon size="16px" class="cosy:w-4 cosy:h-4" />

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

@@ -49,6 +49,12 @@
  * @param {Object} metaConfig - 元数据配置
  * @param {Object} rest - 其他属性
  *
+ * @slot default - 主内容区域
+ * @slot navbar-start - 导航栏开始位置的内容
+ * @slot navbar-center - 导航栏中间位置的内容
+ * @slot navbar-end - 导航栏结束位置的内容
+ * @slot modal-search - 搜索模态框内容，当提供此slot时会显示搜索按钮
+ *
  * @example
  * ```astro
  * ---
@@ -163,6 +169,72 @@
  *   <p>这是文档的主要内容</p>
  * </AppLayout>
  * ```
+ *
+ * 自定义导航栏示例：
+ * ```astro
+ * <AppLayout
+ *   metaConfig={{
+ *     title: "文档标题",
+ *     description: "文档描述"
+ *   }}
+ *   sidebarConfig={{
+ *     sidebarItems: sidebarItems
+ *   }}
+ * >
+ *   <!-- 导航栏开始位置 -->
+ *   <div slot="navbar-start">
+ *     <h1 class="cosy:text-xl cosy:font-bold">我的应用</h1>
+ *   </div>
+ *
+ *   <!-- 导航栏中间位置 -->
+ *   <div slot="navbar-center">
+ *     <nav class="cosy:flex cosy:gap-4">
+ *       <a href="/docs" class="cosy:link cosy:link-hover">文档</a>
+ *       <a href="/components" class="cosy:link cosy:link-hover">组件</a>
+ *       <a href="/examples" class="cosy:link cosy:link-hover">示例</a>
+ *     </nav>
+ *   </div>
+ *
+ *   <!-- 导航栏结束位置 -->
+ *   <div slot="navbar-end">
+ *     <button class="cosy:btn cosy:btn-primary">登录</button>
+ *   </div>
+ *
+ *   <h1>文档内容</h1>
+ *   <p>这是文档的主要内容</p>
+ * </AppLayout>
+ * ```
+ *
+ * 搜索功能示例：
+ * ```astro
+ * <AppLayout
+ *   metaConfig={{
+ *     title: "文档标题",
+ *     description: "文档描述"
+ *   }}
+ *   sidebarConfig={{
+ *     sidebarItems: sidebarItems
+ *   }}
+ * >
+ *   <h1>文档内容</h1>
+ *   <p>这是文档的主要内容</p>
+ *
+ *   <!-- 提供搜索模态框内容，会自动显示搜索按钮 -->
+ *   <div slot="modal-search">
+ *     <div class="cosy:space-y-4">
+ *       <input
+ *         type="text"
+ *         placeholder="搜索文档..."
+ *         class="cosy:input cosy:input-bordered cosy:w-full"
+ *       />
+ *       <div class="cosy:flex cosy:gap-2">
+ *         <button class="cosy:btn cosy:btn-primary">搜索</button>
+ *         <button class="cosy:btn cosy:btn-ghost">清除</button>
+ *       </div>
+ *     </div>
+ *   </div>
+ * </AppLayout>
+ * ```
  */
 
 import '../../style.ts';
@@ -174,6 +246,9 @@ import {
   Container,
   Main,
   Sidebar,
+  Modal,
+  SearchIcon,
+  Button,
 } from '../../index-astro';
 import SkeletonLoader from './SkeletonLoader.astro';
 
@@ -194,6 +269,60 @@ const {
   loadingDelay = 100,
   ...rest
 }: Props = Astro.props;
+
+// 动态计算Container最小高度
+function getContainerMinHeightClass(headerHeight: string = 'md') {
+  const heightValueMap = {
+    '3xs': 'cosy:min-h-[calc(100vh-1rem)]',
+    '2xs': 'cosy:min-h-[calc(100vh-1.5rem)]',
+    xs: 'cosy:min-h-[calc(100vh-2rem)]',
+    sm: 'cosy:min-h-[calc(100vh-2.5rem)]',
+    md: 'cosy:min-h-[calc(100vh-3rem)]',
+    lg: 'cosy:min-h-[calc(100vh-4rem)]',
+    xl: 'cosy:min-h-[calc(100vh-5rem)]',
+  };
+  return (
+    heightValueMap[headerHeight as keyof typeof heightValueMap] ||
+    'cosy:min-h-[calc(100vh-3rem)]'
+  );
+}
+
+const containerMinHeightClass = getContainerMinHeightClass(
+  headerConfig?.height
+);
+
+// 计算Sidebar的top值和高度值
+function getSidebarTopClass(headerHeight: string = 'md') {
+  const topMap = {
+    '3xs': 'cosy:top-4',
+    '2xs': 'cosy:top-6',
+    xs: 'cosy:top-8',
+    sm: 'cosy:top-10',
+    md: 'cosy:top-12',
+    lg: 'cosy:top-16',
+    xl: 'cosy:top-20',
+  };
+  return topMap[headerHeight as keyof typeof topMap] || 'cosy:top-12';
+}
+
+function getSidebarHeightClass(headerHeight: string = 'md') {
+  const heightValueMap = {
+    '3xs': 'cosy:h-[calc(100vh-1rem)]',
+    '2xs': 'cosy:h-[calc(100vh-1.5rem)]',
+    xs: 'cosy:h-[calc(100vh-2rem)]',
+    sm: 'cosy:h-[calc(100vh-2.5rem)]',
+    md: 'cosy:h-[calc(100vh-3rem)]',
+    lg: 'cosy:h-[calc(100vh-4rem)]',
+    xl: 'cosy:h-[calc(100vh-5rem)]',
+  };
+  return (
+    heightValueMap[headerHeight as keyof typeof heightValueMap] ||
+    'cosy:h-[calc(100vh-3rem)]'
+  );
+}
+
+const sidebarTopClass = getSidebarTopClass(headerConfig?.height);
+const sidebarHeightClass = getSidebarHeightClass(headerConfig?.height);
 ---
 
 <BaseLayout {...metaConfig} debug={debug}>
@@ -207,23 +336,41 @@ const {
           <slot name="navbar-center" />
         </div>
         <div slot="navbar-end">
+          {Astro.slots.has('modal-search') && (
+            <Button data-modal-target="modalSearch" variant="ghost" size="sm">
+              <SearchIcon size="24px" />
+            </Button>
+          )}
           <slot name="navbar-end" />
         </div>
       </Header>
     )
   }
 
-  <Container flex="row" gap="md" size="full" padding="none">
+  <Container
+    flex="row"
+    gap="none"
+    size="full"
+    padding="none"
+    class={containerMinHeightClass}>
     <!-- 侧边栏容器 -->
-    {showSidebar && <Sidebar {...sidebarConfig} />}
+    {
+      showSidebar && (
+        <Sidebar
+          {...sidebarConfig}
+          topClass={sidebarTopClass}
+          heightClass={sidebarHeightClass}
+        />
+      )
+    }
 
     <!-- 主内容区域 -->
-    <Main {...mainContentConfig}>
+    <Main {...mainContentConfig} class="cosy:flex-1 cosy:min-w-0">
       <SkeletonLoader
         showLoading={true}
         loadingSize="xl"
         loadingDelay={loadingDelay}
-        skeletonClass="cosy:w-full cosy:h-screen  cosy:flex cosy:items-center cosy:justify-center">
+        skeletonClass="cosy:w-full cosy:h-screen cosy:flex cosy:items-center cosy:justify-center">
         <slot />
       </SkeletonLoader>
     </Main>
@@ -238,6 +385,15 @@ const {
     )
   }
 
+  <!-- 搜索模态框 -->
+  {
+    Astro.slots.has('modal-search') && (
+      <Modal id="modalSearch" title="搜索">
+        <slot name="modal-search" />
+      </Modal>
+    )
+  }
+
   <script>
     // Handle sidebar toggle
     const sidebarToggle = document.getElementById('sidebar-toggle');

package/dist/src-astro/layout-basic/BaseLayout.astro

@@ -50,13 +50,10 @@
  */
 
 import '../../style.ts';
-import { type IMetaProps } from '../../index-astro';
+import { type IMetaProps } from './meta';
 import { ClientRouter } from 'astro:transitions';
 
-export interface Props extends IMetaProps {
-  /** 最小显示时间（毫秒），默认300ms，确保用户能看到加载状态 */
-  loadingMinDisplayTime?: number;
-}
+export interface Props extends IMetaProps {}
 
 const {
   title,

package/dist/src-astro/layout-basic/index.ts

@@ -1,3 +1,5 @@
 import BaseLayout from './BaseLayout.astro';
 
 export { BaseLayout };
+
+export type { IMetaProps } from './meta';

package/dist/src-astro/{types → layout-basic}/meta.ts

@@ -66,4 +66,8 @@ export interface IMetaProps {
      * @default 'default'
      */
     background?: 'default' | 'white' | 'gray' | 'dark' | 'gradient-blue' | 'gradient-pink' | 'gradient-green';
+
+
+    /** 最小显示时间（毫秒），默认300ms，确保用户能看到加载状态 */
+    loadingMinDisplayTime?: number;
 }

package/dist/src-astro/layout-dashboard/index.ts

@@ -13,5 +13,5 @@ export {
 };
 
 // 导出类型和函数
-export type { NavItem, SidebarSize, UserMenuItem } from './types';
+export type { SidebarSize, UserMenuItem } from './types';
 export { getIconFromHref, getNavItemIcon, getSidebarWidth } from './types';

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

@@ -0,0 +1,28 @@
+---
+/**
+ * @component CloseButton
+ *
+ * @description
+ * 模态框的关闭按钮组件，用于关闭模态对话框。
+ * 使用 form method="dialog" 来关闭模态框。
+ *
+ * @usage
+ * ```astro
+ * <CloseButton />
+ * ```
+ */
+
+import '../../style.ts';
+import { Button } from '../../index-astro';
+---
+
+<form method="dialog">
+  <Button
+    variant="accent"
+    size="sm"
+    shape="circle"
+    formmethod="dialog"
+    class="cosy:modal-close-button">
+    ✕
+  </Button>
+</form>

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

@@ -45,7 +45,8 @@
  */
 
 import '../../style.ts';
-import { Button } from '../../index-astro';
+import { Heading } from '../../index-astro';
+import CloseButton from './CloseButton.astro';
 
 interface Props {
   /**
@@ -56,43 +57,24 @@ interface Props {
    * 模态框的标题
    */
   title?: string;
-  /**
-   * 是否显示关闭按钮
-   * @default true
-   */
-  showCloseButton?: boolean;
   /**
    * 自定义类名
    */
   class?: string;
 }
 
-const {
-  id,
-  title,
-  showCloseButton = true,
-  class: className = '',
-} = Astro.props;
+const { id, title = '', 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:list={['cosy:modal-box cosy:pt-0', className]}>
+    <div
+      class="cosy:flex cosy:justify-between cosy:items-center cosy:border-b-1 cosy:border-base-300 cosy:mb-4 not-prose">
+      <Heading level={4} class="cosy:modal-title cosy:m-0">
+        {title}
+      </Heading>
+      <CloseButton class="cosy:absolute" />
+    </div>
 
     <div class="cosy:modal-content">
       <slot />
@@ -102,25 +84,46 @@ const {
       <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', () => {
+  let handleClick;
+
+  function initializeModal() {
     const modal = document.getElementById(id);
-    if (!modal) return;
+    if (!modal) {
+      return;
+    }
 
-    // 为所有触发这个模态框的按钮添加点击事件
-    document
-      .querySelectorAll(`[data-modal-target="${id}"]`)
-      .forEach((trigger) => {
-        trigger.addEventListener('click', () => {
-          modal.showModal();
-        });
-      });
+    // 移除之前的事件监听器（如果存在）
+    if (handleClick) {
+      document.removeEventListener('click', handleClick);
+    }
+
+    // 使用事件委托来处理动态加载的内容
+    handleClick = (event) => {
+      const target = event.target;
+      // 使用 closest() 查找最近的匹配元素，包括按钮内部的元素
+      const trigger = target.closest(`[data-modal-target="${id}"]`);
+      if (trigger) {
+        console.log('Modal: 触发模态框', id);
+        modal.showModal();
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+  }
+
+  // Astro 页面切换时初始化
+  document.addEventListener('astro:page-load', () => {
+    initializeModal();
+  });
+
+  // 页面卸载时清理事件监听器
+  document.addEventListener('astro:before-preparation', () => {
+    if (handleClick) {
+      document.removeEventListener('click', handleClick);
+      handleClick = null;
+    }
   });
 </script>

package/dist/src-astro/placeholder/PlaceHolder.astro

@@ -0,0 +1,142 @@
+---
+/**
+ * @component PlaceHolder
+ * @description 占位符组件，用于在布局中占用指定的空间
+ * @usage
+ * ```astro
+ * <PlaceHolder width="md" height="lg" padding="md" background="base-200">
+ *   <p>内容</p>
+ * </PlaceHolder>
+ * ```
+ * @props
+ * - width: 宽度尺寸 ('none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full')
+ * - height: 高度尺寸 ('none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full')
+ * - padding: 内边距大小 ('none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl')
+ * - background: 背景色类名，如 'base-200', 'primary', 'secondary'
+ * - class: 自定义 CSS 类名
+ * @slots
+ * - default: 占位符内容
+ */
+import '../../style.ts';
+import type { PlaceHolderProps } from './types';
+
+interface Props extends PlaceHolderProps {
+  width?:
+    | 'none'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | 'full';
+  height?:
+    | 'none'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | 'full';
+  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  background?: string;
+  class?: string;
+}
+
+const {
+  width = 'md',
+  height = 'md',
+  padding = 'none',
+  background,
+  class: className = '',
+} = Astro.props;
+
+// 宽度样式映射
+const widthClassMap = {
+  none: '',
+  xs: 'cosy:w-8',
+  sm: 'cosy:w-16',
+  md: 'cosy:w-24',
+  lg: 'cosy:w-32',
+  xl: 'cosy:w-40',
+  '2xl': 'cosy:w-48',
+  '3xl': 'cosy:w-56',
+  '4xl': 'cosy:w-64',
+  '5xl': 'cosy:w-72',
+  '6xl': 'cosy:w-80',
+  full: 'cosy:w-full',
+} as const;
+
+// 高度样式映射
+const heightClassMap = {
+  none: '',
+  xs: 'cosy:h-8',
+  sm: 'cosy:h-16',
+  md: 'cosy:h-24',
+  lg: 'cosy:h-32',
+  xl: 'cosy:h-40',
+  '2xl': 'cosy:h-48',
+  '3xl': 'cosy:h-56',
+  '4xl': 'cosy:h-64',
+  '5xl': 'cosy:h-72',
+  '6xl': 'cosy:h-80',
+  full: 'cosy:h-full',
+} as const;
+
+// 内边距样式映射
+const paddingClassMap = {
+  none: '',
+  xs: 'cosy:p-1',
+  sm: 'cosy:p-2',
+  md: 'cosy:p-4',
+  lg: 'cosy:p-6',
+  xl: 'cosy:p-8',
+} as const;
+
+// 背景色样式映射
+const backgroundClassMap = {
+  'base-100': 'cosy:bg-base-100',
+  'base-200': 'cosy:bg-base-200',
+  'base-300': 'cosy:bg-base-300',
+  primary: 'cosy:bg-primary',
+  secondary: 'cosy:bg-secondary',
+  accent: 'cosy:bg-accent',
+  info: 'cosy:bg-info',
+  success: 'cosy:bg-success',
+  warning: 'cosy:bg-warning',
+  error: 'cosy:bg-error',
+} as const;
+
+const widthClass = widthClassMap[width as keyof typeof widthClassMap] || '';
+const heightClass = heightClassMap[height as keyof typeof heightClassMap] || '';
+const paddingClass =
+  paddingClassMap[padding as keyof typeof paddingClassMap] || '';
+const backgroundClass = background
+  ? backgroundClassMap[background as keyof typeof backgroundClassMap] || ''
+  : '';
+
+const combinedClass =
+  `placeholder ${widthClass} ${heightClass} ${paddingClass} ${backgroundClass} ${className}`.trim();
+---
+
+<div class={combinedClass}>
+  <slot />
+</div>
+
+<style>
+  .placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.5rem;
+  }
+</style>

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

@@ -0,0 +1,2 @@
+export { default as PlaceHolder } from './PlaceHolder.astro';
+export type { PlaceHolderProps, PlaceHolderWidth, PlaceHolderHeight, PlaceHolderPadding } from './types'; 

package/dist/src-astro/placeholder/types.ts

@@ -0,0 +1,16 @@
+export type PlaceHolderWidth = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full';
+export type PlaceHolderHeight = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full';
+export type PlaceHolderPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface PlaceHolderProps {
+    /** 占位符宽度 */
+    width?: PlaceHolderWidth;
+    /** 占位符高度 */
+    height?: PlaceHolderHeight;
+    /** 内边距大小 */
+    padding?: PlaceHolderPadding;
+    /** 背景色类名，如 'base-200', 'primary', 'secondary' */
+    background?: string;
+    /** 自定义 CSS 类名 */
+    class?: string;
+} 

package/dist/src-astro/products/ProductCard.astro

@@ -81,6 +81,8 @@
  *   description="无阴影的简洁风格"
  * />
  * ```
+ *
+
  */
 
 import {
@@ -321,7 +323,7 @@ const buttonsContainerClass =
 
 <div
   class:list={[
-    'cosy:card cosy:bg-base-100 cosy:transition-shadow cosy:duration-300',
+    'cosy:card cosy:bg-base-200 cosy:transition-shadow cosy:duration-300',
     shadowStyles[shadow],
     currentSize.card,
     equalHeight && currentSize.cardHeight,

package/dist/src-astro/products/Products.astro

@@ -60,6 +60,22 @@
  *   products={products}
  * />
  * ```
+ *
+ * 显示容器边框：
+ * ```astro
+ * <Products
+ *   showBorder={true}
+ *   products={products}
+ * />
+ * ```
+ *
+ * 设置上下外边距：
+ * ```astro
+ * <Products
+ *   margin="lg"
+ *   products={products}
+ * />
+ * ```
  */
 
 import { ProductCard } from '../../index-astro';
@@ -81,6 +97,9 @@ type ResponsiveColumns = {
 // 定义间距大小
 type GapSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
+// 定义外边距大小
+type MarginSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
 // 定义布局类型
 type LayoutType = 'grid' | 'list';
 
@@ -125,6 +144,21 @@ export interface Props {
    * 应用于所有ProductCard
    */
   descriptionLines?: number;
+  /**
+   * 是否显示容器边框
+   * 控制Products组件整体容器的边框显示
+   */
+  showBorder?: boolean;
+  /**
+   * 上下外边距
+   * - none: 无外边距
+   * - xs: 超小外边距
+   * - sm: 小外边距
+   * - md: 中等外边距（默认）
+   * - lg: 大外边距
+   * - xl: 超大外边距
+   */
+  margin?: MarginSize;
   /**
    * 自定义类名
    */
@@ -139,6 +173,8 @@ const {
   gap = 'md',
   equalHeight = true,
   descriptionLines,
+  showBorder = false,
+  margin = 'md',
   class: className = '',
 } = Astro.props;
 
@@ -151,6 +187,16 @@ const gapMap = {
   xl: 'cosy:gap-8',
 };
 
+// 外边距映射
+const marginMap = {
+  none: '',
+  xs: 'cosy:my-1',
+  sm: 'cosy:my-2',
+  md: 'cosy:my-4',
+  lg: 'cosy:my-6',
+  xl: 'cosy:my-8',
+};
+
 // 获取响应式列数类名
 const getColumnsClasses = () => {
   if (typeof columns === 'number') {
@@ -181,7 +227,9 @@ const getLayoutClasses = () => {
 const containerClasses = [
   ...getLayoutClasses(),
   gapMap[gap],
+  marginMap[margin],
   'cosy:w-full',
+  showBorder && 'cosy:border cosy:border-base-300 cosy:p-4 cosy:rounded-lg',
   className,
 ];
 ---