@coffic/cosy-ui 0.9.20 → 0.9.23

package/dist/index-astro.ts

@@ -37,6 +37,7 @@ export * from './src-astro/modal';
 export * from './src-astro/module';
 export * from './src-astro/nav-item';
 export * from './src-astro/nav-section';
+export * from './src-astro/placeholder';
 export * from './src-astro/products';
 export * from './src-astro/register';
 export * from './src-astro/section';
@@ -59,7 +60,6 @@ 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/alert/Alert.astro

@@ -21,12 +21,18 @@
  * <Alert type="warning" showIcon={false}>不显示图标的警告</Alert>
  * ```
  *
+ * 设置垂直外边距：
+ * ```astro
+ * <Alert type="info" marginY="md">带垂直外边距的提示</Alert>
+ * ```
+ *
  * 组合使用：
  * ```astro
  * <Alert
  *   type="error"
  *   title="提交失败"
  *   class="my-custom-class"
+ *   marginY="lg"
  * >
  *   请检查表单并重新提交
  * </Alert>
@@ -48,7 +54,7 @@
  * @prop {string} [class] - 自定义 CSS 类名
  * @prop {boolean} [closable=true] - 是否可关闭
  * @prop {boolean} [showIcon=true] - 是否显示图标
- * @prop {number} [bgOpacity=1] - 背景色透明度，取值范围 0~1，1 为不透明
+ * @prop {('xs'|'sm'|'md'|'lg'|'xl')} [marginY] - 垂直方向外边距大小
  *
  * @slots
  * @slot default - 提示内容
@@ -72,6 +78,7 @@ export interface AlertProps {
   closable?: boolean;
   showIcon?: boolean;
   variant?: 'solid' | 'outline' | 'dash' | 'soft';
+  marginY?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 }
 
 const {
@@ -82,13 +89,33 @@ const {
   closable = true,
   showIcon = true,
   variant = 'solid',
+  marginY,
 } = Astro.props as AlertProps;
 
+// 根据 marginY 值设置对应的 CSS 类
+const getMarginYClass = (marginY?: string) => {
+  switch (marginY) {
+    case 'xs':
+      return 'cosy:my-1';
+    case 'sm':
+      return 'cosy:my-2';
+    case 'md':
+      return 'cosy:my-4';
+    case 'lg':
+      return 'cosy:my-8';
+    case 'xl':
+      return 'cosy:my-12';
+    default:
+      return '';
+  }
+};
+
 // 组合样式
 const alertClass = [
   `cosy:alert-${type}`,
   variant !== 'solid' ? `cosy:alert-${variant}` : '',
   'cosy:alert-horizontal',
+  getMarginYClass(marginY),
 ]
   .filter(Boolean)
   .join(' ');

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/container/Container.astro

@@ -49,6 +49,13 @@
  * </Container>
  * ```
  *
+ * 设置外边距：
+ * ```astro
+ * <Container margin="lg">
+ *   <p>带有大外边距的容器</p>
+ * </Container>
+ * ```
+ *
  * Flex布局容器（按行排列）：
  * ```astro
  * <Container flex="row" gap="md">
@@ -82,6 +89,23 @@ interface Props extends HTMLAttributes<'div'> {
    */
   padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
 
+  /**
+   * 外边距大小
+   * @default "none"
+   */
+  margin?:
+    | 'none'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl';
+
   /**
    * 是否居中显示
    * @default true
@@ -129,6 +153,7 @@ interface Props extends HTMLAttributes<'div'> {
 const {
   size = 'md',
   padding = 'md',
+  margin = 'none',
   centered = true,
   border = false,
   flex,
@@ -158,6 +183,20 @@ const paddingClasses = {
   xl: 'cosy:p-8',
 } as const;
 
+const marginClasses = {
+  none: '',
+  xs: 'cosy:my-1',
+  sm: 'cosy:my-2',
+  md: 'cosy:my-4',
+  lg: 'cosy:my-6',
+  xl: 'cosy:my-8',
+  '2xl': 'cosy:my-12',
+  '3xl': 'cosy:my-16',
+  '4xl': 'cosy:my-20',
+  '5xl': 'cosy:my-24',
+  '6xl': 'cosy:my-32',
+} as const;
+
 const flexClasses = {
   row: 'cosy:flex cosy:flex-row',
   col: 'cosy:flex cosy:flex-col',
@@ -197,6 +236,7 @@ const containerClasses = [
   centered ? 'cosy:mx-auto' : '',
   sizeClasses[size],
   paddingClasses[padding],
+  marginClasses[margin],
   border ? 'cosy:border cosy:rounded-lg' : '',
   flex ? flexClasses[flex] : '',
   flex ? gapClasses[gap] : '',

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

@@ -1,16 +1 @@
-import Container from './Container.astro';
-import ContainerBasicContainer from './EContainerBasicContainer.astro';
-import ContainerSizesContainer from './EContainerSizesContainer.astro';
-import ContainerPaddingContainer from './EContainerPaddingContainer.astro';
-import ContainerFlexContainer from './EContainerFlexContainer.astro';
-
 export { default as Container } from './Container.astro';
-export const ContainerPackage = {
-  Container,
-  ContainerContainers: {
-    Basic: ContainerBasicContainer,
-    Sizes: ContainerSizesContainer,
-    Padding: ContainerPaddingContainer,
-    Flex: ContainerFlexContainer,
-  },
-};

package/dist/src-astro/errors/404.astro

@@ -37,6 +37,7 @@
 
 import '../../style.ts';
 import { LinkUtil } from '../../src/utils/link.ts';
+import Button from '../button/Button.astro';
 
 const baseUrl = LinkUtil.getBaseUrl();
 const path = Astro.url.pathname;
@@ -105,15 +106,10 @@ const { debugKVs = {} } = Astro.props as Error404Props;
 
     <!-- 操作按钮 -->
     <div class="cosy:space-y-3">
-      <a href={baseUrl} class="btn btn-primary cosy:w-full cosy:no-underline">
-        返回首页
-      </a>
-      <button
-        onclick="history.back()"
-        class="btn btn-outline cosy:w-full"
-        type="button">
+      <Button href={baseUrl} variant="primary" block> 返回首页 </Button>
+      <Button onclick="history.back()" variant="outline" block>
         返回上一页
-      </button>
+      </Button>
     </div>
 
     <!-- 帮助提示 -->

package/dist/src-astro/heading/Heading.astro

@@ -4,6 +4,8 @@
  *
  * @description
  * Heading 组件用于创建各级标题，提供一致的排版样式和灵活的定制选项。
+ * 支持链接功能，当传入 href 属性时，标题会变成可点击的链接。
+ * 组件保持语义化结构：即使作为链接使用时，仍然渲染正确的 h1-h6 标签。
  *
  * @design
  * 设计理念：
@@ -11,12 +13,14 @@
  * 2. 一致性 - 确保整个应用中标题样式的一致性
  * 3. 可定制性 - 支持多种配置选项，适应不同场景需求
  * 4. 无障碍性 - 遵循语义化HTML标准，确保屏幕阅读器可以正确解析内容结构
+ * 5. 链接支持 - 标题可以作为链接使用，提供更好的导航体验
  *
  * 视觉特点：
  * - 字体大小和粗细随级别变化
  * - 可选的下划线或底部边框
  * - 可定制的颜色和间距
  * - 响应式设计，在不同屏幕尺寸下保持良好的可读性
+ * - 链接状态下的悬停效果
  *
  * @usage
  * 基本用法：
@@ -26,6 +30,12 @@
  * <Heading level={3}>这是一个三级标题</Heading>
  * ```
  *
+ * 链接标题：
+ * ```astro
+ * <Heading level={2} href="/about">关于我们</Heading>
+ * <Heading level={3} href="https://example.com" external>外部链接标题</Heading>
+ * ```
+ *
  * 自定义样式：
  * ```astro
  * <Heading level={2} color="primary" underline>带下划线的二级标题</Heading>
@@ -41,13 +51,32 @@
  * <Heading level={1} class="cosy:mb-8">自定义底部间距的标题</Heading>
  * ```
  *
+ * 外边距控制：
+ * ```astro
+ * <Heading level={2} margin="none">无外边距的标题</Heading>
+ * <Heading level={2} margin="sm">小外边距的标题</Heading>
+ * <Heading level={2} margin="lg">大外边距的标题</Heading>
+ * <Heading level={2} margin="xl">超大外边距的标题</Heading>
+ * ```
+ *
+ * 背景色支持：
+ * ```astro
+ * <Heading level={3} background="base-300" padding="sm">带背景色的标题</Heading>
+ * <Heading level={3} background="primary" color="white">主要背景色标题</Heading>
+ * ```
+ *
  * @props
  * @prop {1|2|3|4|5|6} [level=2] - 标题级别，对应 h1-h6 标签
  * @prop {string} [id] - 标题的 ID，用于锚点链接
+ * @prop {string} [href] - 链接地址，传入后标题会变成可点击的链接
+ * @prop {boolean} [external=false] - 是否为外部链接，影响链接的打开方式
  * @prop {boolean} [anchor=false] - 是否显示锚点链接图标
  * @prop {boolean} [underline=false] - 是否显示下划线
  * @prop {string} [align='left'] - 文本对齐方式：'left', 'center', 'right'
  * @prop {'default'|'primary'|'secondary'|'accent'|'muted'} [color='default'] - 标题颜色
+ * @prop {'none'|'sm'|'md'|'lg'|'xl'} [margin='md'] - 上下外边距大小
+ * @prop {string} [background] - 背景色类名，如 'base-300', 'primary', 'secondary'
+ * @prop {'none'|'sm'|'md'|'lg'|'xl'} [padding='none'] - 内边距大小（仅在设置背景色时生效）
  * @prop {string} [class] - 自定义 CSS 类名
  *
  * @slots
@@ -57,32 +86,45 @@
  * - 使用语义化的 h1-h6 标签
  * - 锚点链接带有描述性 aria-label
  * - 遵循标题层次结构的最佳实践
+ * - 链接标题保持良好的可访问性
  *
  * @dependencies
- * 依赖于以下图标组件：
+ * 依赖于以下组件：
  * - LinkIcon (用于锚点链接)
+ * - Link (用于锚点链接)
  */
 
-import { LinkIcon } from '../../index-astro';
+import HeadingAnchor from './HeadingAnchor.astro';
+import Link from '../link/Link.astro';
 import '../../style.ts';
 
 interface Props {
   level?: 1 | 2 | 3 | 4 | 5 | 6;
   id?: string;
+  href?: string;
+  external?: boolean;
   anchor?: boolean;
   underline?: boolean;
   align?: 'left' | 'center' | 'right';
   color?: 'default' | 'primary' | 'secondary' | 'accent' | 'muted';
+  margin?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+  background?: string;
+  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
   class?: string;
 }
 
 const {
   level = 2,
   id,
+  href,
+  external = false,
   anchor = false,
   underline = false,
   align = 'left',
   color = 'default',
+  margin = 'md',
+  background,
+  padding = 'none',
   class: className = '',
 } = Astro.props;
 
@@ -97,7 +139,7 @@ const headingClass = {
 }[(level ?? 2) as 1 | 2 | 3 | 4 | 5 | 6];
 
 const colorClass = {
-  default: 'cosy:text-gray-900 cosy:dark:text-gray-100',
+  default: '',
   primary: 'cosy:text-primary-600 cosy:dark:text-primary-400',
   secondary: 'cosy:text-secondary-600 cosy:dark:text-secondary-400',
   accent: 'cosy:text-accent-600 cosy:dark:text-accent-400',
@@ -121,109 +163,186 @@ const underlineClass = underline
   ? 'cosy:border-b cosy:pb-2 cosy:border-gray-200 cosy:dark:border-gray-700'
   : '';
 
+// 外边距样式
+const marginClass = {
+  none: '',
+  sm: 'cosy:my-2',
+  md: 'cosy:my-4',
+  lg: 'cosy:my-6',
+  xl: 'cosy:my-8',
+}[(margin ?? 'md') as 'none' | 'sm' | 'md' | 'lg' | 'xl'];
+
+// 背景色样式映射
+const backgroundClassMap = {
+  'base-100': 'cosy:bg-base-100 cosy:dark:bg-base-100',
+  'base-200': 'cosy:bg-base-200 cosy:dark:bg-base-200',
+  'base-300': 'cosy:bg-base-300 cosy:dark:bg-base-300',
+  primary: 'cosy:bg-primary cosy:dark:bg-primary',
+  secondary: 'cosy:bg-secondary cosy:dark:bg-secondary',
+  accent: 'cosy:bg-accent cosy:dark:bg-accent',
+  info: 'cosy:bg-info cosy:dark:bg-info',
+  success: 'cosy:bg-success cosy:dark:bg-success',
+  warning: 'cosy:bg-warning cosy:dark:bg-warning',
+  error: 'cosy:bg-error cosy:dark:bg-error',
+} as const;
+
+const backgroundClass = background
+  ? backgroundClassMap[background as keyof typeof backgroundClassMap] || ''
+  : '';
+
+// 内边距样式映射
+const paddingClassMap = {
+  none: '',
+  sm: 'cosy:py-2',
+  md: 'cosy:py-4',
+  lg: 'cosy:py-6',
+  xl: 'cosy:py-8',
+} as const;
+
+const paddingClass =
+  paddingClassMap[padding as keyof typeof paddingClassMap] || '';
+
 // 组合所有类名
-const combinedClass = `heading ${headingClass} ${colorClass} ${alignClass} ${underlineClass} ${className}`;
+const combinedClass = `heading cosy:w-full ${headingClass} ${colorClass} ${alignClass} ${underlineClass} ${marginClass} ${backgroundClass} ${paddingClass} ${className}`;
+
+// 如果有链接，添加链接相关的样式
+const linkClass = href ? 'cosy:hover:opacity-80 cosy:transition-opacity' : '';
 ---
 
 {
-  level === 1 && (
-    <h1 id={id} class={combinedClass}>
-      <slot />
-      {anchor && id && (
-        <a
-          href={`#${id}`}
-          class="cosy:hover:opacity-100 cosy:opacity-0 cosy:ml-2 cosy:transition-opacity heading-anchor"
-          aria-label={`链接到 ${id} 部分`}>
-          <LinkIcon class="cosy:inline-block cosy:w-4 cosy:h-4" />
-        </a>
-      )}
-    </h1>
-  )
+  level === 1 &&
+    (href ? (
+      <Link
+        href={href}
+        external={external}
+        class={`${linkClass}`}
+        noUnderline
+        fullWidth>
+        <h1 id={id} class={combinedClass}>
+          <slot />
+          <HeadingAnchor id={id} show={anchor} />
+        </h1>
+      </Link>
+    ) : (
+      <h1 id={id} class={combinedClass}>
+        <slot />
+        <HeadingAnchor id={id} show={anchor} />
+      </h1>
+    ))
 }
 
 {
-  level === 2 && (
-    <h2 id={id} class={combinedClass}>
-      <slot />
-      {anchor && id && (
-        <a
-          href={`#${id}`}
-          class="cosy:hover:opacity-100 cosy:opacity-0 cosy:ml-2 cosy:transition-opacity heading-anchor"
-          aria-label={`链接到 ${id} 部分`}>
-          <LinkIcon class="cosy:inline-block cosy:w-4 cosy:h-4" />
-        </a>
-      )}
-    </h2>
-  )
+  level === 2 &&
+    (href ? (
+      <Link
+        href={href}
+        external={external}
+        class={`${linkClass}`}
+        noUnderline
+        fullWidth>
+        <h2 id={id} class={combinedClass}>
+          <slot />
+          <HeadingAnchor id={id} show={anchor} />
+        </h2>
+      </Link>
+    ) : (
+      <h2 id={id} class={combinedClass}>
+        <slot />
+        <HeadingAnchor id={id} show={anchor} />
+      </h2>
+    ))
 }
 
 {
-  level === 3 && (
-    <h3 id={id} class={combinedClass}>
-      <slot />
-      {anchor && id && (
-        <a
-          href={`#${id}`}
-          class="cosy:hover:opacity-100 cosy:opacity-0 cosy:ml-2 cosy:transition-opacity heading-anchor"
-          aria-label={`链接到 ${id} 部分`}>
-          <LinkIcon class="cosy:inline-block cosy:w-4 cosy:h-4" />
-        </a>
-      )}
-    </h3>
-  )
+  level === 3 &&
+    (href ? (
+      <Link
+        href={href}
+        external={external}
+        class={`${linkClass}`}
+        noUnderline
+        fullWidth>
+        <h3 id={id} class={combinedClass}>
+          <slot />
+          <HeadingAnchor id={id} show={anchor} />
+        </h3>
+      </Link>
+    ) : (
+      <h3 id={id} class={combinedClass}>
+        <slot />
+        <HeadingAnchor id={id} show={anchor} />
+      </h3>
+    ))
 }
 
 {
-  level === 4 && (
-    <h4 id={id} class={combinedClass}>
-      <slot />
-      {anchor && id && (
-        <a
-          href={`#${id}`}
-          class="cosy:hover:opacity-100 cosy:opacity-0 cosy:ml-2 cosy:transition-opacity heading-anchor"
-          aria-label={`链接到 ${id} 部分`}>
-          <LinkIcon class="cosy:inline-block cosy:w-4 cosy:h-4" />
-        </a>
-      )}
-    </h4>
-  )
+  level === 4 &&
+    (href ? (
+      <Link
+        href={href}
+        external={external}
+        class={`${linkClass}`}
+        noUnderline
+        fullWidth>
+        <h4 id={id} class={combinedClass}>
+          <slot />
+          <HeadingAnchor id={id} show={anchor} />
+        </h4>
+      </Link>
+    ) : (
+      <h4 id={id} class={combinedClass}>
+        <slot />
+        <HeadingAnchor id={id} show={anchor} />
+      </h4>
+    ))
 }
 
 {
-  level === 5 && (
-    <h5 id={id} class={combinedClass}>
-      <slot />
-      {anchor && id && (
-        <a
-          href={`#${id}`}
-          class="cosy:hover:opacity-100 cosy:opacity-0 cosy:ml-2 cosy:transition-opacity heading-anchor"
-          aria-label={`链接到 ${id} 部分`}>
-          <LinkIcon class="cosy:inline-block cosy:w-4 cosy:h-4" />
-        </a>
-      )}
-    </h5>
-  )
+  level === 5 &&
+    (href ? (
+      <Link
+        href={href}
+        external={external}
+        class={`${linkClass}`}
+        noUnderline
+        fullWidth>
+        <h5 id={id} class={combinedClass}>
+          <slot />
+          <HeadingAnchor id={id} show={anchor} />
+        </h5>
+      </Link>
+    ) : (
+      <h5 id={id} class={combinedClass}>
+        <slot />
+        <HeadingAnchor id={id} show={anchor} />
+      </h5>
+    ))
 }
 
 {
-  level === 6 && (
-    <h6 id={id} class={combinedClass}>
-      <slot />
-      {anchor && id && (
-        <a
-          href={`#${id}`}
-          class="cosy:hover:opacity-100 cosy:opacity-0 cosy:ml-2 cosy:transition-opacity heading-anchor"
-          aria-label={`链接到 ${id} 部分`}>
-          <LinkIcon class="cosy:inline-block cosy:w-4 cosy:h-4" />
-        </a>
-      )}
-    </h6>
-  )
+  level === 6 &&
+    (href ? (
+      <Link
+        href={href}
+        external={external}
+        class={`${linkClass}`}
+        noUnderline
+        fullWidth>
+        <h6 id={id} class={combinedClass}>
+          <slot />
+          <HeadingAnchor id={id} show={anchor} />
+        </h6>
+      </Link>
+    ) : (
+      <h6 id={id} class={combinedClass}>
+        <slot />
+        <HeadingAnchor id={id} show={anchor} />
+      </h6>
+    ))
 }
 
 <style>
   .heading {
-    margin-bottom: 0.5em;
     line-height: 1.2;
     scroll-margin-top: 100px;
   }

package/dist/src-astro/heading/HeadingAnchor.astro

@@ -0,0 +1,33 @@
+---
+/**
+ * @component HeadingAnchor
+ *
+ * @description
+ * HeadingAnchor 组件用于在标题中显示锚点链接图标。
+ * 这是一个内部组件，专门为 Heading 组件设计。
+ *
+ * @props
+ * @prop {string} id - 锚点的 ID
+ * @prop {boolean} [show=false] - 是否显示锚点链接
+ */
+
+import { LinkIcon, Link } from '../../index-astro';
+
+interface Props {
+  id?: string;
+  show?: boolean;
+}
+
+const { id, show = false } = Astro.props;
+---
+
+{
+  show && id && (
+    <Link
+      href={`#${id}`}
+      class="cosy:ml-2 heading-anchor"
+      aria-label={`链接到 ${id} 部分`}>
+      <LinkIcon size="16px" class="cosy:inline-block" />
+    </Link>
+  )
+}