@coffic/cosy-ui 0.7.4 → 0.8.7

package/dist/index-astro.ts

@@ -0,0 +1,86 @@
+// 基础组件和功能模块 (按字母顺序)
+export * from './src-astro/alert';
+export * from './src-astro/article';
+export * from './src-astro/banner';
+export * from './src-astro/button/index_astro';
+export * from './src-astro/card';
+export * from './src-astro/code-block';
+export * from './src-astro/code-container';
+export * from './src-astro/code-example';
+export * from './src-astro/contact';
+export * from './src-astro/container';
+export * from './src-astro/errors';
+export * from './src-astro/flex';
+export * from './src-astro/footer';
+export * from './src-astro/grid';
+export * from './src-astro/header';
+export * from './src-astro/heading';
+export * from './src-astro/hero';
+export * from './src-astro/icons';
+export * from './src-astro/image';
+export * from './src-astro/language-switcher';
+export * from './src-astro/layout-app';
+export * from './src-astro/layout-basic';
+export * from './src-astro/layout-basic/BaseLayout.astro';
+export * from './src-astro/layout-dashboard';
+export * from './src-astro/link';
+export * from './src-astro/main';
+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/products';
+export * from './src-astro/section';
+export * from './src-astro/sidebar';
+export * from './src-astro/sidebar-nav';
+export * from './src-astro/speak';
+export * from './src-astro/stack';
+export * from './src-astro/team-member';
+export * from './src-astro/text';
+export * from './src-astro/theme-switcher';
+export * from './src-astro/toc';
+
+// 类型定义 (按字母顺序)
+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';
+export * from './src-astro/types/static-path';
+
+// 实体类 (按字母顺序)
+export * from './src-astro/entities/BaseDoc';
+export * from './src-astro/entities/BlogDoc';
+export * from './src-astro/entities/CourseDoc';
+export * from './src-astro/entities/ExperimentDoc';
+export * from './src-astro/entities/LessonDoc';
+export * from './src-astro/entities/MetaDoc';
+export * from './src-astro/entities/SidebarItem';
+export * from './src-astro/entities/Tag';
+
+// 数据库类 (按字母顺序)
+export * from './src-astro/database/BaseDB';
+export * from './src-astro/database/BlogDB';
+export * from './src-astro/database/CourseDB';
+export * from './src-astro/database/ExperimentDB';
+export * from './src-astro/database/LessonDB';
+export * from './src-astro/database/MetaDB';
+
+// 工具类型
+export type { ImageProvider, ImageOptions } from './src-astro/utils/image';
+export * from './src-astro/utils/image';
+export * from './src-astro/utils/i18n';
+export * from './src-astro/utils/path';
+export * from './src-astro/utils/url';
+export * from './src-astro/utils/language';
+export * from './src-astro/utils/lang_package';
+export * from './src-astro/utils/logger';
+export * from './src-astro/utils/link';
+
+// 图标组件
+export * from './src-astro/icons';

package/dist/index-collection.ts

@@ -0,0 +1,104 @@
+import { defineCollection, z } from 'astro:content';
+import { glob } from 'astro/loaders';
+
+export const makeArticleCollection = (base: string) => {
+  return defineCollection({
+    loader: glob({
+      pattern: '**/*.{md,mdx}',
+      base,
+    }),
+    schema: z.object({
+      title: z.string().optional(),
+      folder: z.boolean().optional(),
+      order: z.number().optional(),
+      description: z.string().optional(),
+    }),
+  });
+};
+
+export const makeBlogCollection = (base: string) => {
+  return defineCollection({
+    loader: glob({
+      pattern: '**/*.{md,mdx}',
+      base,
+    }),
+    schema: z.object({
+      title: z.string(),
+      description: z.string().optional(),
+      tags: z.array(z.string()).optional(),
+      date: z.date().optional(),
+      authors: z
+        .array(
+          z.object({
+            name: z.string(),
+            picture: z.string().optional(),
+            url: z.string().optional(),
+          })
+        )
+        .optional(),
+    }),
+  });
+};
+
+export const makeCourseCollection = (base: string) => {
+  return defineCollection({
+    loader: glob({
+      pattern: '**/*.{md,mdx}',
+      base,
+    }),
+    schema: z.object({
+      title: z.string().optional(),
+      description: z.string().optional(),
+      folder: z.boolean().optional(),
+      order: z.number().optional(),
+    }),
+  });
+};
+
+export const makeExperimentCollection = (base: string) => {
+  return defineCollection({
+    loader: glob({
+      pattern: '**/*.{md,mdx}',
+      base,
+    }),
+    schema: z.object({
+      title: z.string().optional(),
+      description: z.string().optional(),
+      pubDate: z.date().optional(),
+    }),
+  });
+};
+
+export const makeLessonCollection = (base: string) => {
+  return defineCollection({
+    loader: glob({
+      pattern: '**/*.{md,mdx}',
+      base,
+    }),
+    schema: z.object({
+      title: z.string().optional(),
+      description: z.string().optional(),
+      authors: z
+        .array(
+          z.object({
+            name: z.string(),
+            picture: z.string().optional(),
+          })
+        )
+        .optional(),
+    }),
+  });
+};
+
+export const makeMetaCollection = (base: string) => {
+  return defineCollection({
+    loader: glob({
+      pattern: '**/*.{md,mdx}',
+      base,
+    }),
+    schema: z.object({
+      title: z.string().optional(),
+      description: z.string().optional(),
+    }),
+  });
+};

package/dist/index-vue.ts

@@ -0,0 +1,33 @@
+// AlertDialog
+export * from './src-vue/alert-dialog-vue/index';
+
+// Banner
+export * from './src-vue/banner-box-vue/index';
+
+// BlogList
+export * from './src-vue/blog-vue/index';
+
+// Counter
+export * from './src-vue/counter-vue/index';
+
+// ConfirmDialog
+export * from './src-vue/confirm-dialog-vue/index';
+
+// Buttons
+export * from './src-vue/buttons-vue/index';
+
+// Icons
+export * from './src-vue/icons-vue/index';
+
+// List
+export * from './src-vue/list-vue/index';
+
+// Windows
+// export { MacWindowExamples, MacWindowExampleCodes, MacWindow } from './vue/MacWindow';
+// export { iPhoneWindowExamples, iPhoneWindowExampleCodes, iPhoneWindow } from './vue/iPhone';
+
+// SmartLink
+// export { default as SmartLink } from './vue/SmartLink.vue';
+
+// TagList
+// export { default as TagList } from './vue/TagList.vue';

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

@@ -0,0 +1,100 @@
+---
+/**
+ * @component Alert
+ *
+ * @description
+ * Alert 组件用于向用户显示重要的提示信息，支持多种类型的提示样式和交互效果。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Alert type="info">这是一条信息提示</Alert>
+ * ```
+ *
+ * 带标题：
+ * ```astro
+ * <Alert type="success" title="操作成功">您的操作已成功完成</Alert>
+ * ```
+ *
+ * 组合使用：
+ * ```astro
+ * <Alert
+ *   type="error"
+ *   title="提交失败"
+ *   class="my-custom-class"
+ * >
+ *   请检查表单并重新提交
+ * </Alert>
+ * ```
+ *
+ * @props
+ * @prop {('info'|'success'|'warning'|'error')} [type='info'] - 提示类型，影响颜色和图标
+ * @prop {string} [title] - 提示标题，可选
+ * @prop {string} [class] - 自定义 CSS 类名
+ *
+ * @slots
+ * @slot default - 提示内容
+ */
+
+// 注意：
+// 	1. 导入样式文件才能正确处理文件中使用的class
+//  2. 所有的导入必须使用相对路径
+
+import '../../style.ts';
+import {
+  InfoIcon,
+  SuccessIcon,
+  WarningIcon,
+  ErrorIcon,
+} from '../../index-astro';
+
+interface Props {
+  type?: 'info' | 'success' | 'warning' | 'error';
+  title?: string;
+  class?: string;
+}
+
+const { type = 'info', title, class: className = '' } = Astro.props;
+
+// 根据类型设置样式
+const alertClass = {
+  info: 'cosy:alert-info',
+  success: 'cosy:alert-success',
+  warning: 'cosy:alert-warning',
+  error: 'cosy:alert-error',
+}[type as 'info' | 'success' | 'warning' | 'error'];
+
+// 根据类型设置图标组件
+const IconComponent = {
+  info: InfoIcon,
+  success: SuccessIcon,
+  warning: WarningIcon,
+  error: ErrorIcon,
+}[type as 'info' | 'success' | 'warning' | 'error'];
+---
+
+<div class={`cosy:alert ${alertClass} ${className}`} role="alert">
+  <div
+    class="cosy:flex cosy:flex-row cosy:items-center cosy:gap-4 cosy:alert-content">
+    <IconComponent />
+
+    <div class="cosy:flex cosy:flex-col cosy:items-center cosy:h-full">
+      {
+        title && (
+          <h3 class="cosy:font-bold" style="margin-top: 0 !important">
+            {title}
+          </h3>
+        )
+      }
+      {
+        title && (
+          <div class="cosy:text-xs">
+            <slot />
+          </div>
+        )
+      }
+
+      {!title && <slot />}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,11 @@
+---
+/**
+ * @component Alert.Basic
+ *
+ * @description
+ * 基础Alert组件示例，展示最简单的信息提示用法。
+ */
+import { Alert } from '../../index-astro';
+---
+
+<Alert type="info">这是一条信息提示</Alert>

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

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import AlertBasic from './EAlertBasic.astro';
+import AlertBasicSourceCode from './EAlertBasic.astro?raw';
+---
+
+<CodeContainer codes={[AlertBasicSourceCode]}>
+  <div id="tab-1">
+    <AlertBasic />
+  </div>
+</CodeContainer>

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

@@ -0,0 +1,16 @@
+---
+/**
+ * @component Alert.CustomStyle
+ *
+ * @description
+ * 展示如何使用class属性自定义Alert组件的样式。
+ */
+import '../../style.ts';
+import { Alert } from '../../index-astro';
+---
+
+<Alert
+  type="info"
+  class="cosy:bg-purple-100 cosy:text-purple-800 cosy:border-purple-300">
+  这是一个自定义样式的提示框
+</Alert>

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

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import AlertCustomStyle from './EAlertCustomStyle.astro';
+import AlertCustomStyleSourceCode from './EAlertCustomStyle.astro?raw';
+---
+
+<CodeContainer codes={[AlertCustomStyleSourceCode]}>
+  <div id="tab-1">
+    <AlertCustomStyle />
+  </div>
+</CodeContainer>

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

@@ -0,0 +1,6 @@
+---
+import '../../style.ts';
+import { Alert } from '../../index-astro';
+---
+
+<Alert type="error">这是一条错误提示</Alert>

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

@@ -0,0 +1,6 @@
+---
+import '../../style.ts';
+import { Alert } from '../../index-astro';
+---
+
+<Alert type="info">这是一条信息提示</Alert>

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

@@ -0,0 +1,6 @@
+---
+import '../../style.ts';
+import { Alert } from '../../index-astro';
+---
+
+<Alert type="success">这是一条成功提示</Alert>

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

@@ -0,0 +1,43 @@
+---
+/**
+ * @component Alert.Types
+ *
+ * @description
+ * 展示Alert组件的所有类型：info、success、warning、error。
+ */
+import '../../style.ts';
+import { CodeContainer } from '../../index-astro';
+import AlertInfo from './EAlertInfo.astro';
+import AlertSuccess from './EAlertSuccess.astro';
+import AlertWarning from './EAlertWarning.astro';
+import AlertError from './EAlertError.astro';
+import AlertInfoSourceCode from './EAlertInfo.astro?raw';
+import AlertSuccessSourceCode from './EAlertSuccess.astro?raw';
+import AlertWarningSourceCode from './EAlertWarning.astro?raw';
+import AlertErrorSourceCode from './EAlertError.astro?raw';
+---
+
+<CodeContainer
+  titles={['Info', 'Success', 'Warning', 'Error']}
+  codes={[
+    AlertInfoSourceCode,
+    AlertSuccessSourceCode,
+    AlertWarningSourceCode,
+    AlertErrorSourceCode,
+  ]}>
+  <div id="tab-1">
+    <AlertInfo />
+  </div>
+
+  <div id="tab-2">
+    <AlertSuccess />
+  </div>
+
+  <div id="tab-3">
+    <AlertWarning />
+  </div>
+
+  <div id="tab-4">
+    <AlertError />
+  </div>
+</CodeContainer>

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

@@ -0,0 +1,6 @@
+---
+import '../../style.ts';
+import { Alert } from '../../index-astro';
+---
+
+<Alert type="warning">这是一条警告提示</Alert>

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

@@ -0,0 +1,12 @@
+---
+/**
+ * @component Alert.WithTitle
+ *
+ * @description
+ * 带标题的Alert组件示例，展示如何使用title属性添加标题。
+ */
+import '../../style.ts';
+import { Alert } from '../../index-astro';
+---
+
+<Alert type="success" title="操作成功">您的操作已成功完成</Alert>

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

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import AlertWithTitle from './EAlertWithTitle.astro';
+import WithTitleSourceCode from './EAlertWithTitle.astro?raw';
+---
+
+<CodeContainer codes={[WithTitleSourceCode]}>
+  <div id="tab-1">
+    <AlertWithTitle />
+  </div>
+</CodeContainer>

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

@@ -0,0 +1,16 @@
+import Alert from './Alert.astro';
+import AlertBasicContainer from './EAlertBasicContainer.astro';
+import AlertWithTitleContainer from './EAlertWithTitleContainer.astro';
+import AlertTypesContainer from './EAlertTypesContainer.astro';
+import AlertCustomStyleContainer from './EAlertCustomStyleContainer.astro';
+
+export { Alert };
+export const AlertPackage = {
+  Alert,
+  AlertContainers: {
+    Basic: AlertBasicContainer,
+    WithTitle: AlertWithTitleContainer,
+    Types: AlertTypesContainer,
+    CustomStyle: AlertCustomStyleContainer,
+  },
+};

package/dist/src-astro/article/Article.astro

@@ -0,0 +1,139 @@
+---
+/**
+ * @component Article
+ *
+ * @description
+ * Article 组件用于展示格式化的文章内容，提供了一套完整的排版样式，使文章内容更易于阅读和理解。
+ * 该组件适用于博客文章、文档页面、新闻内容等需要良好排版的场景。
+ *
+ * @design
+ * 设计理念：
+ * 1. 可读性优先 - 使用合理的行高、字体大小和间距，提高长文本的阅读体验
+ * 2. 层次分明 - 通过不同级别标题的样式区分，建立清晰的内容层次结构
+ * 3. 响应式设计 - 在不同设备上保持良好的阅读体验
+ * 4. 暗黑模式支持 - 自动适应系统的暗黑模式设置
+ *
+ * 视觉特点：
+ * - 合理的文本行高和段落间距
+ * - 标题使用较粗的字重和较小的行高
+ * - 列表项有适当的缩进和间距
+ * - 引用块使用左侧边框和斜体样式
+ * - 代码块和行内代码有不同的背景色
+ * - 表格有清晰的边框和背景色区分
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Article>
+ *   <h1>文章标题</h1>
+ *   <p>这是一段文章内容...</p>
+ * </Article>
+ * ```
+ *
+ * 添加自定义类名：
+ * ```astro
+ * <Article class="my-custom-article">
+ *   <h2>带自定义类的文章</h2>
+ *   <p>这是一段文章内容...</p>
+ * </Article>
+ * ```
+ *
+ * 设置文章宽度：
+ * ```astro
+ * <Article width="narrow">
+ *   <h2>窄宽度文章</h2>
+ *   <p>这是一段文章内容...</p>
+ * </Article>
+ * ```
+ *
+ * 完整示例：
+ * ```astro
+ * <Article>
+ *   <h1>文章标题</h1>
+ *   <p>这是一段介绍性文字，可以包含<a href="#">链接</a>和<code>行内代码</code>。</p>
+ *
+ *   <h2>二级标题</h2>
+ *   <p>这是二级标题下的段落内容。</p>
+ *
+ *   <blockquote>
+ *     这是一段引用内容，可以用来强调重要信息或引用他人的话。
+ *   </blockquote>
+ *
+ *   <h3>三级标题</h3>
+ *   <ul>
+ *     <li>无序列表项一</li>
+ *     <li>无序列表项二</li>
+ *   </ul>
+ *
+ *   <h4>四级标题</h4>
+ *   <ol>
+ *     <li>有序列表项一</li>
+ *     <li>有序列表项二</li>
+ *   </ol>
+ *
+ *   <pre><code>// 这是一个代码块
+ * function example() {
+ *   return "示例代码";
+ * }</code></pre>
+ * </Article>
+ * ```
+ *
+ * @props
+ * @prop {string} [class] - 自定义 CSS 类名，会与组件内置的类名合并
+ * @prop {string} [width="medium"] - 文章宽度，可选值为 "narrow"(窄), "medium"(中等), "wide"(宽), "full"(全宽)
+ *
+ * @slots
+ * @slot default - 文章内容，可以包含任何 HTML 元素
+ *
+ * @cssFeatures
+ * 组件支持的 HTML 元素样式：
+ * - 标题 (h1-h6)：不同级别的标题有不同的大小和间距
+ * - 段落 (p)：适当的行高和段落间距
+ * - 列表 (ul, ol, li)：合理的缩进和项目间距
+ * - 链接 (a)：带下划线的彩色文本
+ * - 引用块 (blockquote)：带左侧边框的斜体文本
+ * - 代码 (code, pre)：带背景色的等宽字体
+ * - 图片 (img)：自适应宽度
+ * - 水平线 (hr)：简洁的分隔线
+ * - 表格 (table, th, td)：清晰的表格样式
+ *
+ * @accessibility
+ * - 使用语义化的 article 元素作为容器
+ * - 保持足够的颜色对比度，确保在不同模式下的可读性
+ * - 支持系统的暗黑模式设置
+ */
+
+// 导入样式
+import '../../style.ts';
+import type { IArticleProps } from '../types/article.ts';
+
+export interface Props extends IArticleProps {}
+
+const { class: className = '', width = 'medium', style = '' } = Astro.props;
+
+// 根据宽度设置对应的 Tailwind 类名
+const widthClasses = {
+  narrow: 'cosy:max-w-2xl',
+  medium: 'cosy:max-w-4xl',
+  wide: 'cosy:max-w-6xl',
+  full: 'cosy:w-full',
+}[width];
+
+// 基础样式类
+const baseClasses = [
+  'cosy:prose', // 使用 Tailwind Typography 插件的基础类
+  'cosy:prose-slate',
+  'cosy:w-full',
+  'cosy:mx-auto',
+  'cosy:dark:prose-invert', // 暗黑模式支持,
+  'cosy:m-0',
+  'cosy:min-h-screen',
+  'cosy:pb-96',
+  widthClasses,
+  className,
+];
+---
+
+<article class:list={baseClasses} style={style}>
+  <slot />
+</article>

package/dist/src-astro/article/ArticleBasic.astro

@@ -0,0 +1,35 @@
+---
+import Article from './Article.astro';
+---
+
+<Article>
+  <h1>文章标题</h1>
+  <p>
+    这是一段介绍性文字，可以包含<a href="#">链接</a>和<code>行内代码</code>。
+  </p>
+
+  <h2>二级标题</h2>
+  <p>这是二级标题下的段落内容。</p>
+
+  <blockquote>
+    这是一段引用内容，可以用来强调重要信息或引用他人的话。
+  </blockquote>
+
+  <h3>三级标题</h3>
+  <ul>
+    <li>无序列表项一</li>
+    <li>无序列表项二</li>
+  </ul>
+
+  <h4>四级标题</h4>
+  <ol>
+    <li>有序列表项一</li>
+    <li>有序列表项二</li>
+  </ol>
+
+  <pre><code>// 这是一个代码块
+function example() &#123;
+  return "示例代码";
+&#125;
+</code></pre>
+</Article>

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

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