@coffic/cosy-ui 0.7.4 → 0.8.7

package/dist/src-astro/grid/GridBasic.astro

@@ -0,0 +1,21 @@
+---
+import Grid from './Grid.astro';
+---
+
+<Grid cols={3} gap="md">
+  <div
+    style="background: #60a5fa; color: white; padding: 16px; border-radius: 8px;"
+  >
+    第一列
+  </div>
+  <div
+    style="background: #34d399; color: white; padding: 16px; border-radius: 8px;"
+  >
+    第二列
+  </div>
+  <div
+    style="background: #f59e42; color: white; padding: 16px; border-radius: 8px;"
+  >
+    第三列
+  </div>
+</Grid>

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

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

package/dist/src-astro/header/Header.astro

@@ -0,0 +1,209 @@
+---
+/**
+ * @component Header
+ *
+ * @description
+ * Header 组件是一个用于网站顶部导航的布局组件，提供了logo、导航菜单、语言切换等功能。
+ * 组件支持响应式设计，在不同屏幕尺寸下有良好的显示效果，并可选择固定在页面顶部。
+ *
+ * @design
+ * 设计理念：
+ * 1. 简洁实用 - 提供清晰的导航和品牌展示，不过度占用视觉空间
+ * 2. 响应式适配 - 在移动端和桌面端都有合适的展现形式
+ * 3. 可定制性 - 支持多种配置选项，适应不同网站的风格和需求
+ * 4. 多语言支持 - 内置语言切换功能，便于构建国际化网站
+ */
+import '../../style.ts';
+import {
+  LanguageSwitcher,
+  LinkUtil,
+  type IHeaderProps,
+  type INavItem,
+  NavItems,
+  Link,
+  Image,
+  ThemeSwitcher,
+} from '../../index-astro';
+import Logo from '../assets/logo-rounded.png';
+
+export interface Props extends IHeaderProps {
+  debug?: boolean;
+}
+
+const {
+  height = 'md',
+  languages = ['zh-cn', 'en'],
+  logo = Logo,
+  logoHref = '/',
+  navItems = [],
+  sticky = true,
+  debug = false,
+  rounded = 'none',
+  paddingHorizontal = 'none',
+  paddingVertical = 'none',
+  navPosition = 'center',
+  showThemeSwitcher = true,
+} = Astro.props;
+
+// 根据高度设置样式
+const headerHeightClasses = {
+  '3xs': 'cosy:h-4',
+  '2xs': 'cosy:h-6',
+  xs: 'cosy:h-8',
+  sm: 'cosy:h-10',
+  md: 'cosy:h-12',
+  lg: 'cosy:h-16',
+  xl: 'cosy:h-20',
+};
+
+const headerHeightClass = headerHeightClasses[height];
+const linkHeightClasses = {
+  '3xs': 'cosy:py-0',
+  '2xs': 'cosy:py-0',
+  xs: 'cosy:py-0',
+  sm: 'cosy:py-1',
+  md: 'cosy:py-1',
+  lg: 'cosy:py-2',
+  xl: 'cosy:py-3',
+};
+
+// 设置logo大小
+const logoSizeClasses = {
+  '3xs': 'cosy:w-3 cosy:h-3',
+  '2xs': 'cosy:w-4 cosy:h-4',
+  xs: 'cosy:w-5 cosy:h-5',
+  sm: 'cosy:w-6 cosy:h-6',
+  md: 'cosy:w-8 cosy:h-8',
+  lg: 'cosy:w-10 cosy:h-10',
+  xl: 'cosy:w-12 cosy:h-12',
+};
+
+const logoSizeClass = logoSizeClasses[height];
+const linkHeightClass = linkHeightClasses[height];
+const currentPath = Astro.url.pathname;
+const activeLink = LinkUtil.getActiveLink(
+  currentPath,
+  navItems.map((item: INavItem) => item.href)
+);
+---
+
+<header
+  class:list={[
+    'cosy:w-full cosy:z-50',
+    {
+      'cosy:fixed cosy:top-0': sticky,
+      'cosy:border cosy:bg-amber-300 cosy:border-dashed cosy:border-green-500':
+        debug,
+    },
+    {
+      'cosy:px-2': paddingHorizontal === 'sm',
+      'cosy:px-4': paddingHorizontal === 'md',
+      'cosy:px-6': paddingHorizontal === 'lg',
+      'cosy:px-8': paddingHorizontal === 'xl',
+      'cosy:px-12': paddingHorizontal === '2xl',
+      'cosy:px-16': paddingHorizontal === '3xl',
+    },
+    {
+      'cosy:py-2': paddingVertical === 'sm',
+      'cosy:py-4': paddingVertical === 'md',
+      'cosy:py-6': paddingVertical === 'lg',
+      'cosy:py-8': paddingVertical === 'xl',
+      'cosy:py-12': paddingVertical === '2xl',
+      'cosy:py-16': paddingVertical === '3xl',
+    },
+  ]}>
+  <div
+    class:list={[
+      'cosy:bg-accent/70 cosy:flex cosy:flex-grow cosy:backdrop-blur not-prose cosy:border-base-200',
+      {
+        'cosy:rounded-none': rounded === 'none',
+        'cosy:rounded-sm': rounded === 'sm',
+        'cosy:rounded-md': rounded === 'md',
+        'cosy:rounded-lg': rounded === 'lg',
+        'cosy:rounded-xl': rounded === 'xl',
+        'cosy:rounded-full': rounded === 'full',
+      },
+      headerHeightClass,
+      { 'cosy:border cosy:border-dashed cosy:border-red-500': debug },
+    ]}>
+    <div class="cosy:navbar-start cosy:pl-1">
+      {
+        navPosition === 'start' ? (
+          <div class="cosy:flex cosy:items-center cosy:gap-4">
+            <Link
+              animation="none"
+              debug={debug}
+              href={logoHref}
+              class:list={['cosy:btn cosy:btn-ghost', linkHeightClass]}>
+              <Image
+                rounded="full"
+                showPlaceholder={false}
+                transition="none"
+                lazy={false}
+                src={logo}
+                alt="logo"
+                class={logoSizeClass}
+              />
+            </Link>
+            <div class="cosy:hidden cosy:lg:flex">
+              <NavItems
+                navItems={navItems}
+                activeLink={activeLink}
+                linkHeightClass={linkHeightClass}
+              />
+            </div>
+          </div>
+        ) : (
+          <Link
+            animation="none"
+            debug={debug}
+            href={logoHref}
+            class:list={['cosy:btn cosy:btn-ghost', linkHeightClass]}>
+            <Image
+              rounded="full"
+              showPlaceholder={false}
+              transition="none"
+              lazy={false}
+              src={logo}
+              alt="logo"
+              class={logoSizeClass}
+            />
+          </Link>
+        )
+      }
+      <slot name="navbar-start" />
+    </div>
+
+    <div class="cosy:hidden cosy:lg:flex cosy:navbar-center">
+      {
+        navPosition === 'center' && (
+          <NavItems
+            navItems={navItems}
+            activeLink={activeLink}
+            linkHeightClass={linkHeightClass}
+          />
+        )
+      }
+      <slot name="navbar-center" />
+    </div>
+
+    <div class="cosy:navbar-end cosy:pr-1">
+      {
+        navPosition === 'end' && (
+          <div class="cosy:hidden cosy:lg:flex">
+            <NavItems
+              navItems={navItems}
+              activeLink={activeLink}
+              linkHeightClass={linkHeightClass}
+            />
+          </div>
+        )
+      }
+
+      {showThemeSwitcher && <ThemeSwitcher />}
+      {languages.length > 1 && <LanguageSwitcher languages={languages} />}
+
+      <slot name="navbar-end" />
+    </div>
+  </div>
+</header>

package/dist/src-astro/header/HeaderBasic.astro

@@ -0,0 +1,19 @@
+---
+/**
+ * @component Header.Basic
+ *
+ * @description
+ * Header组件的基础示例，展示最基本的顶部导航栏，包含logo和语言切换功能。
+ */
+import Header from './Header.astro';
+import { getExampleImage } from '../utils/image';
+
+const logo = getExampleImage({
+  width: 100,
+  height: 100,
+  provider: 'picsum',
+  tag: 'tech',
+});
+---
+
+<Header logoHref={logo} rounded="lg" sticky={false} />

package/dist/src-astro/header/HeaderCustomNavbarCenter.astro

@@ -0,0 +1,28 @@
+---
+/**
+ * @component Header.CustomNavbarCenter
+ *
+ * @description
+ * 自定义导航栏中间内容的Header组件示例，展示如何使用slot自定义中间内容。
+ */
+import '../../style.ts';
+import Header from './Header.astro';
+import { getExampleImage } from '../utils/image.ts';
+
+const logo = getExampleImage({
+  width: 100,
+  height: 100,
+  provider: 'picsum',
+  tag: 'tech',
+});
+---
+
+<Header logoHref={logo} rounded="lg" sticky={false}>
+  <div slot="navbar-center" class="cosy:flex cosy:items-center cosy:gap-4">
+    <span class="cosy:badge cosy:badge-accent">新功能</span>
+    <div class="cosy:divider cosy:divider-horizontal"></div>
+    <span class="cosy:badge cosy:badge-secondary">热门</span>
+    <div class="cosy:divider cosy:divider-horizontal"></div>
+    <span class="cosy:badge">推荐</span>
+  </div>
+</Header>

package/dist/src-astro/header/HeaderCustomNavbarEnd.astro

@@ -0,0 +1,25 @@
+---
+/**
+ * @component Header.CustomNavbarEnd
+ *
+ * @description
+ * 自定义导航栏右侧内容的Header组件示例，展示如何使用slot自定义右侧内容。
+ */
+import '../../style.ts';
+import Header from './Header.astro';
+import { getExampleImage } from '../utils/image.ts';
+
+const logo = getExampleImage({
+  width: 100,
+  height: 100,
+  provider: 'picsum',
+  tag: 'tech',
+});
+---
+
+<Header logoHref={logo} rounded="lg" sticky={false}>
+  <div slot="navbar-end" class="cosy:flex cosy:items-center cosy:gap-2">
+    <button class="cosy:btn cosy:btn-sm cosy:btn-ghost">登录</button>
+    <button class="cosy:btn cosy:btn-sm cosy:btn-primary">注册</button>
+  </div>
+</Header>

package/dist/src-astro/header/HeaderCustomNavbarStart.astro

@@ -0,0 +1,27 @@
+---
+/**
+ * @component Header.CustomNavbarStart
+ *
+ * @description
+ * 自定义导航栏左侧内容的Header组件示例，展示如何使用slot自定义左侧内容。
+ */
+import '../../style.ts';
+import Header from './Header.astro';
+import { getExampleImage } from '../utils/image.ts';
+
+const logo = getExampleImage({
+  width: 100,
+  height: 100,
+  provider: 'picsum',
+  tag: 'tech',
+});
+---
+
+<Header logoHref={logo} rounded="lg" sticky={false}>
+  <div
+    slot="navbar-start"
+    class="cosy:flex cosy:items-center cosy:gap-2 cosy:ml-2">
+    <button class="cosy:btn cosy:btn-sm cosy:btn-primary">联系我们</button>
+    <span class="cosy:badge cosy:badge-outline">在线咨询</span>
+  </div>
+</Header>

package/dist/src-astro/header/HeaderCustomPosition.astro

@@ -0,0 +1,34 @@
+---
+/**
+ * @component Header.CustomPosition
+ *
+ * @description
+ * 自定义导航菜单位置的Header组件示例，展示如何设置导航菜单在左侧、中间或右侧。
+ */
+import '../../style.ts';
+import Header from './Header.astro';
+import { getExampleImage } from '../utils/image.ts';
+
+const logo = getExampleImage({
+  width: 100,
+  height: 100,
+  provider: 'picsum',
+  tag: 'tech',
+});
+
+const navItems = [
+  { href: '/docs', label: '文档' },
+  { href: '/components', label: '组件' },
+];
+
+// 可以通过navPosition属性设置导航菜单位置：start(左侧)、center(中间)、end(右侧)
+const navPosition = 'start';
+---
+
+<Header
+  logoHref={logo}
+  navItems={navItems}
+  navPosition={navPosition}
+  rounded="lg"
+  sticky={false}
+/>

package/dist/src-astro/header/HeaderWithNavigation.astro

@@ -0,0 +1,27 @@
+---
+/**
+ * @component Header.WithNavigation
+ *
+ * @description
+ * 带导航菜单的Header组件示例，展示如何添加导航菜单项。
+ */
+import '../../style.ts';
+import Header from './Header.astro';
+import { getExampleImage } from '../utils/image.ts';
+
+const logo = getExampleImage({
+  width: 100,
+  height: 100,
+  provider: 'picsum',
+  tag: 'tech',
+});
+
+const navItems = [
+  { href: '/', label: '首页' },
+  { href: '/docs', label: '文档' },
+  { href: '/components', label: '组件' },
+  { href: '/about', label: '关于' },
+];
+---
+
+<Header logoHref={logo} navItems={navItems} rounded="lg" sticky={false} />

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

@@ -0,0 +1,40 @@
+import Header from './Header.astro';
+import HeaderBasic from './HeaderBasic.astro';
+import HeaderWithNavigation from './HeaderWithNavigation.astro';
+import HeaderCustomPosition from './HeaderCustomPosition.astro';
+import HeaderCustomNavbarEnd from './HeaderCustomNavbarEnd.astro';
+import HeaderCustomNavbarStart from './HeaderCustomNavbarStart.astro';
+import HeaderCustomNavbarCenter from './HeaderCustomNavbarCenter.astro';
+import BasicSourceCode from './HeaderBasic.astro?raw';
+import WithNavigationSourceCode from './HeaderWithNavigation.astro?raw';
+import CustomPositionSourceCode from './HeaderCustomPosition.astro?raw';
+import CustomNavbarEndSourceCode from './HeaderCustomNavbarEnd.astro?raw';
+import CustomNavbarStartSourceCode from './HeaderCustomNavbarStart.astro?raw';
+import CustomNavbarCenterSourceCode from './HeaderCustomNavbarCenter.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export {
+  Header,
+  HeaderBasic,
+  HeaderWithNavigation,
+  HeaderCustomPosition,
+  HeaderCustomNavbarEnd,
+  HeaderCustomNavbarStart,
+  HeaderCustomNavbarCenter,
+};
+
+// 导出示例源代码
+export const HeaderExampleCodes = {
+  Basic: extractSimpleExample(BasicSourceCode, 'Header'),
+  WithNavigation: extractSimpleExample(WithNavigationSourceCode, 'Header'),
+  CustomPosition: extractSimpleExample(CustomPositionSourceCode, 'Header'),
+  CustomNavbarEnd: extractSimpleExample(CustomNavbarEndSourceCode, 'Header'),
+  CustomNavbarStart: extractSimpleExample(
+    CustomNavbarStartSourceCode,
+    'Header'
+  ),
+  CustomNavbarCenter: extractSimpleExample(
+    CustomNavbarCenterSourceCode,
+    'Header'
+  ),
+};

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

@@ -0,0 +1,245 @@
+---
+/**
+ * @component Heading
+ *
+ * @description
+ * Heading 组件用于创建各级标题，提供一致的排版样式和灵活的定制选项。
+ *
+ * @design
+ * 设计理念：
+ * 1. 层次清晰 - 通过不同级别的标题建立内容的视觉层次结构
+ * 2. 一致性 - 确保整个应用中标题样式的一致性
+ * 3. 可定制性 - 支持多种配置选项，适应不同场景需求
+ * 4. 无障碍性 - 遵循语义化HTML标准，确保屏幕阅读器可以正确解析内容结构
+ *
+ * 视觉特点：
+ * - 字体大小和粗细随级别变化
+ * - 可选的下划线或底部边框
+ * - 可定制的颜色和间距
+ * - 响应式设计，在不同屏幕尺寸下保持良好的可读性
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Heading level={1}>这是一个一级标题</Heading>
+ * <Heading level={2}>这是一个二级标题</Heading>
+ * <Heading level={3}>这是一个三级标题</Heading>
+ * ```
+ *
+ * 自定义样式：
+ * ```astro
+ * <Heading level={2} color="primary" underline>带下划线的二级标题</Heading>
+ * ```
+ *
+ * 带锚点链接：
+ * ```astro
+ * <Heading level={2} id="section-1" anchor>带锚点的标题</Heading>
+ * ```
+ *
+ * 自定义间距：
+ * ```astro
+ * <Heading level={1} class="cosy:mb-8">自定义底部间距的标题</Heading>
+ * ```
+ *
+ * @props
+ * @prop {1|2|3|4|5|6} [level=2] - 标题级别，对应 h1-h6 标签
+ * @prop {string} [id] - 标题的 ID，用于锚点链接
+ * @prop {boolean} [anchor=false] - 是否显示锚点链接图标
+ * @prop {boolean} [underline=false] - 是否显示下划线
+ * @prop {string} [align='left'] - 文本对齐方式：'left', 'center', 'right'
+ * @prop {'default'|'primary'|'secondary'|'accent'|'muted'} [color='default'] - 标题颜色
+ * @prop {string} [class] - 自定义 CSS 类名
+ *
+ * @slots
+ * @slot default - 标题内容
+ *
+ * @accessibility
+ * - 使用语义化的 h1-h6 标签
+ * - 锚点链接带有描述性 aria-label
+ * - 遵循标题层次结构的最佳实践
+ *
+ * @dependencies
+ * 依赖于以下图标组件：
+ * - LinkIcon (用于锚点链接)
+ */
+
+import { LinkIcon } from '../../index-astro';
+import '../../style.ts';
+
+interface Props {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  id?: string;
+  anchor?: boolean;
+  underline?: boolean;
+  align?: 'left' | 'center' | 'right';
+  color?: 'default' | 'primary' | 'secondary' | 'accent' | 'muted';
+  class?: string;
+}
+
+const {
+  level = 2,
+  id,
+  anchor = false,
+  underline = false,
+  align = 'left',
+  color = 'default',
+  class: className = '',
+} = Astro.props;
+
+// 根据级别和颜色设置样式
+const headingClass = {
+  1: 'cosy:text-4xl cosy:font-bold',
+  2: 'cosy:text-3xl cosy:font-semibold',
+  3: 'cosy:text-2xl cosy:font-semibold',
+  4: 'cosy:text-xl cosy:font-medium',
+  5: 'cosy:text-lg cosy:font-medium',
+  6: 'cosy:text-base cosy:font-medium',
+}[(level ?? 2) as 1 | 2 | 3 | 4 | 5 | 6];
+
+const colorClass = {
+  default: 'cosy:text-gray-900 cosy:dark:text-gray-100',
+  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',
+  muted: 'cosy:text-gray-600 cosy:dark:text-gray-400',
+}[
+  (color ?? 'default') as
+    | 'default'
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'muted'
+];
+
+const alignClass = {
+  left: 'cosy:text-left',
+  center: 'cosy:text-center',
+  right: 'cosy:text-right',
+}[(align ?? 'left') as 'left' | 'center' | 'right'];
+
+const underlineClass = underline
+  ? 'cosy:border-b cosy:pb-2 cosy:border-gray-200 cosy:dark:border-gray-700'
+  : '';
+
+// 组合所有类名
+const combinedClass = `heading ${headingClass} ${colorClass} ${alignClass} ${underlineClass} ${className}`;
+---
+
+{
+  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 === 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 === 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 === 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 === 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 === 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>
+  )
+}
+
+<style>
+  .heading {
+    margin-bottom: 0.5em;
+    line-height: 1.2;
+    scroll-margin-top: 100px;
+  }
+
+  .heading-anchor {
+    color: inherit;
+    text-decoration: none;
+    vertical-align: middle;
+  }
+
+  /* 悬停效果 */
+  .heading:hover .heading-anchor {
+    opacity: 0.7 !important;
+  }
+
+  .heading-anchor:hover {
+    opacity: 1 !important;
+  }
+</style>