@coffic/cosy-ui 0.6.26 → 0.6.30

package/README.md

@@ -2,6 +2,7 @@
 
 [![English](https://img.shields.io/badge/English-violet)](README.md)
 [![简体中文](https://img.shields.io/badge/中文文档-gray)](README-zh.md)
+[![Release](https://img.shields.io/github/v/release/cofficlab/cosy-ui?style=flat-square&logo=github&color=blue)](https://github.com/yuaotian/go-cursor-help/releases/latest)
 [![DEV](https://img.shields.io/badge/DEV-gray)](README-dev.md)
 [![NPM](https://img.shields.io/badge/NPM-orange)](https://www.npmjs.com/package/@coffic/cosy-ui)
 ![NPM Downloads](https://img.shields.io/npm/dm/%40coffic%2Fcosy-ui)

package/dist/{components/base → alert}/Alert.astro

@@ -36,9 +36,12 @@
  * @slot default - 提示内容
  */
 
-// 导入其他资源必须使用相对路径
-import '../../style.ts';
-import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../../index';
+// 注意：
+// 	1. 导入样式文件才能正确处理文件中使用的class
+//  2. 所有的导入必须使用相对路径
+
+import '../style.ts';
+import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../index';
 
 interface Props {
 	type?: 'info' | 'success' | 'warning' | 'error';

package/dist/alert/AlertBasic.astro

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

package/dist/alert/AlertCustomStyle.astro

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

package/dist/alert/AlertTypes.astro

@@ -0,0 +1,17 @@
+---
+/**
+ * @component Alert.Types
+ *
+ * @description
+ * 展示Alert组件的所有类型：info、success、warning、error。
+ */
+import '../style.ts';
+import { Alert } from '../index';
+---
+
+<div class="cosy:flex cosy:flex-col cosy:gap-4">
+	<Alert type="info">这是一条信息提示</Alert>
+	<Alert type="success">这是一条成功提示</Alert>
+	<Alert type="warning">这是一条警告提示</Alert>
+	<Alert type="error">这是一条错误提示</Alert>
+</div>

package/dist/alert/AlertWithTitle.astro

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

package/dist/alert/index.ts

@@ -0,0 +1,20 @@
+import Alert from './Alert.astro';
+import AlertBasic from './AlertBasic.astro';
+import AlertWithTitle from './AlertWithTitle.astro';
+import AlertTypes from './AlertTypes.astro';
+import AlertCustomStyle from './AlertCustomStyle.astro';
+import BasicSourceCode from './AlertBasic.astro?raw';
+import WithTitleSourceCode from './AlertWithTitle.astro?raw';
+import TypesSourceCode from './AlertTypes.astro?raw';
+import CustomStyleSourceCode from './AlertCustomStyle.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Alert, AlertBasic, AlertWithTitle, AlertTypes, AlertCustomStyle, };
+
+// 导出示例源代码
+export const AlertExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Alert'),
+	WithTitle: extractSimpleExample(WithTitleSourceCode, 'Alert'),
+	Types: extractSimpleExample(TypesSourceCode, 'Alert'),
+	CustomStyle: extractSimpleExample(CustomStyleSourceCode, 'Alert'),
+};