@coffic/cosy-ui 0.9.22 → 0.9.24

package/dist/index-astro.ts

@@ -58,9 +58,7 @@ export * from './src-astro/types/article';
 export * from './src-astro/types/footer';
 export * from './src-astro/types/header';
 export * from './src-astro/types/heading';
-export * from './src-astro/types/layout';
 export * from './src-astro/types/main';
-export * from './src-astro/types/meta';
 export * from './src-astro/types/nav';
 export * from './src-astro/types/product';
 export * from './src-astro/types/sidebar';

package/dist/src-astro/confirm-dialog/ConfirmDialog.astro

@@ -92,11 +92,27 @@ const style = getConfirmDialogStyle();
 
 <script is:inline define:vars={{ id }}>
   // 为了方便使用，我们提供一些辅助方法
-  document.addEventListener('DOMContentLoaded', () => {
+  function initializeConfirmDialog() {
     const dialog = document.getElementById(id);
-    if (!dialog) return;
+    if (!dialog) {
+      console.log('ConfirmDialog: dialog is null', id);
+      return;
+    }
+
+    console.log('ConfirmDialog: 初始化确认对话框', id);
+
+    // 使用事件委托来处理动态加载的内容
+    document.addEventListener('click', (event) => {
+      const target = event.target;
+      // 使用 closest() 查找最近的匹配元素，包括按钮内部的元素
+      const trigger = target.closest(`[data-confirm-dialog-target="${id}"]`);
+      if (trigger) {
+        console.log('ConfirmDialog: 触发确认对话框', id);
+        dialog.showModal();
+      }
+    });
 
-    // 为所有触发这个确认框的按钮添加点击事件
+    // 为已存在的按钮添加点击事件（向后兼容）
     document
       .querySelectorAll(`[data-confirm-dialog-target="${id}"]`)
       .forEach((trigger) => {
@@ -115,5 +131,14 @@ const style = getConfirmDialogStyle();
         document.dispatchEvent(event);
       };
     }
-  });
+  }
+
+  // 初始加载时初始化
+  document.addEventListener('DOMContentLoaded', initializeConfirmDialog);
+
+  // Astro 页面切换时重新初始化
+  document.addEventListener('astro:page-load', initializeConfirmDialog);
+
+  // 确保脚本加载后立即初始化
+  initializeConfirmDialog();
 </script>

package/dist/src-astro/footer/Footer.astro

@@ -233,7 +233,6 @@ const debugClasses = debug
 ---
 
 <footer
-  transition:persist
   class:list={[
     'cosy:footer cosy:z-50 cosy:sm:footer-horizontal cosy:bg-base-200 cosy:text-base-content cosy:p-10',
     debugClasses.footer,

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';
 
@@ -261,6 +336,11 @@ const sidebarHeightClass = getSidebarHeightClass(headerConfig?.height);
           <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>
@@ -305,6 +385,15 @@ const sidebarHeightClass = getSidebarHeightClass(headerConfig?.height);
     )
   }
 
+  <!-- 搜索模态框 -->
+  {
+    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,6 @@
 import BaseLayout from './BaseLayout.astro';
 
 export { BaseLayout };
+
+export type { IMetaProps } from './meta';
+export type { IAppLayoutProps } from './layout';

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

@@ -1,8 +1,8 @@
-import type { IFooterProps } from './footer';
-import type { IHeaderProps } from './header';
-import type { IMainContentProps } from './main';
+import type { IFooterProps } from '../types/footer';
+import type { IHeaderProps } from '../types/header';
+import type { IMainContentProps } from '../types/main';
 import type { IMetaProps } from './meta';
-import type { ISidebarProps } from './sidebar';
+import type { ISidebarProps } from '../types/sidebar';
 
 export interface IAppLayoutProps {
     /**

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/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,56 @@ 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();
+
+        // 在modal显示后自动focus到第一个input元素
+        setTimeout(() => {
+          const firstInput = modal.querySelector(
+            'input, textarea, select, [contenteditable="true"]'
+          );
+          if (firstInput) {
+            firstInput.focus();
+          }
+        }, 100); // 延迟100ms确保modal完全显示
+      }
+    };
+
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.9.22",
+  "version": "0.9.24",
   "description": "An astro component library",
   "author": {
     "name": "nookery",