@coffic/cosy-ui 0.7.4 → 0.8.7

package/dist/vue/utils/theme.ts

@@ -0,0 +1,122 @@
+interface ThemeManager {
+  updateActiveTheme: (currentTheme: string) => void;
+  handleThemeClick: (this: HTMLElement) => void;
+  initialize: () => void;
+  setTheme: (theme: string) => void;
+  detectSystemTheme: () => string;
+}
+
+/**
+ * 创建主题管理器
+ *
+ * 提供主题切换、主题持久化存储和系统主题检测等功能
+ *
+ * @returns ThemeManager 主题管理器对象
+ */
+export function createThemeManager(): ThemeManager {
+  const getThemeItems = () =>
+    document.querySelectorAll<HTMLElement>('[data-theme]');
+
+  const updateActiveTheme = (currentTheme: string) => {
+    const themeItems = getThemeItems();
+    themeItems.forEach((item) => {
+      const themeId = item.getAttribute('data-theme');
+      const isActive = themeId === currentTheme;
+
+      // 设置元素的 data-active 属性
+      item.setAttribute('data-active', String(isActive));
+
+      // 仅对于旧式主题按钮（data-set-theme 属性），保留旧的类切换行为
+      if (item.hasAttribute('data-set-theme')) {
+        item.classList.toggle('cosy:bg-primary', isActive);
+        item.classList.toggle('cosy:text-primary-content', isActive);
+      }
+    });
+  };
+
+  function handleThemeClick(this: HTMLElement) {
+    const theme =
+      this.getAttribute('data-set-theme') || this.getAttribute('data-theme');
+    if (theme) {
+      setTheme(theme);
+    }
+  }
+
+  /**
+   * 设置主题
+   *
+   * @param theme 主题ID
+   */
+  const setTheme = (theme: string) => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+    updateActiveTheme(theme);
+  };
+
+  /**
+   * 检测系统主题偏好（亮色/暗色）
+   *
+   * @returns 'dark' 或 'light'
+   */
+  const detectSystemTheme = (): string => {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light';
+  };
+
+  /**
+   * 初始化主题管理器
+   *
+   * 从本地存储中获取主题设置，如果没有则尝试使用系统主题，最后使用默认主题
+   */
+  const initialize = () => {
+    // 从本地存储中获取主题
+    let savedTheme = localStorage.getItem('theme');
+
+    // 如果没有保存的主题，则尝试使用系统主题
+    if (!savedTheme) {
+      const systemTheme = detectSystemTheme();
+      if (systemTheme === 'dark') {
+        savedTheme = 'dark';
+      } else {
+        savedTheme = 'default'; // 默认使用默认主题
+      }
+    }
+
+    // 设置主题
+    document.documentElement.setAttribute('data-theme', savedTheme);
+    updateActiveTheme(savedTheme);
+
+    // 添加主题切换事件监听器
+    // 支持新旧两种类型的主题切换按钮
+    const themeItems = [
+      ...Array.from(document.querySelectorAll<HTMLElement>('[data-set-theme]')),
+      ...Array.from(
+        document.querySelectorAll<HTMLElement>('.cosy\\:theme-item')
+      ),
+    ];
+
+    themeItems.forEach((item) => {
+      item.removeEventListener('click', handleThemeClick);
+      item.addEventListener('click', handleThemeClick);
+    });
+
+    // 监听系统主题变化
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', (e) => {
+        // 只有当用户没有手动设置过主题时，才跟随系统主题变化
+        if (!localStorage.getItem('theme')) {
+          setTheme(e.matches ? 'dark' : 'default');
+        }
+      });
+  };
+
+  return {
+    updateActiveTheme,
+    handleThemeClick,
+    initialize,
+    setTheme,
+    detectSystemTheme,
+  };
+}

package/dist/vue/utils/url.ts

@@ -0,0 +1,17 @@
+/**
+ * 判断提供的URL是否是GitHub仓库
+ * @param url 需要判断的URL
+ * @returns 是否是GitHub仓库
+ */
+export function isGitHubRepo(url: string): boolean {
+  return url.includes('github.com');
+}
+
+/**
+ * 判断提供的URL是否是GitLab仓库
+ * @param url 需要判断的URL
+ * @returns 是否是GitLab仓库
+ */
+export function isGitLabRepo(url: string): boolean {
+  return url.includes('gitlab.com');
+}

package/package.json

@@ -1,87 +1,90 @@
 {
-    "name": "@coffic/cosy-ui",
-    "version": "0.7.4",
-    "description": "An astro component library",
-    "author": {
-        "name": "nookery",
-        "url": "https://github.com/nookery"
+  "name": "@coffic/cosy-ui",
+  "version": "0.8.7",
+  "description": "An astro component library",
+  "author": {
+    "name": "nookery",
+    "url": "https://github.com/nookery"
+  },
+  "repository": {
+    "url": "https://github.com/CofficLab/cosy-ui"
+  },
+  "license": "MIT",
+  "keywords": [
+    "astro-integration",
+    "astro-component",
+    "withastro",
+    "astro",
+    "cosy-ui"
+  ],
+  "homepage": "https://cofficlab.github.io/cosy-ui/en/",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "./dist/index.ts",
+  "module": "./dist/index.ts",
+  "types": "./dist/index.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index-astro.ts",
+      "types": "./dist/index-astro.ts"
     },
-    "repository": {
-        "url": "https://github.com/CofficLab/cosy-ui"
+    "./vue": {
+      "import": "./dist/index-vue.ts",
+      "types": "./dist/index-vue.ts"
     },
-    "license": "MIT",
-    "keywords": [
-        "astro-integration",
-        "astro-component",
-        "withastro",
-        "astro",
-        "cosy-ui"
-    ],
-    "homepage": "https://cofficlab.github.io/cosy-ui/en/",
-    "publishConfig": {
-        "access": "public"
-    },
-    "sideEffects": false,
-    "main": "./dist/index.js",
-    "exports": {
-        ".": "./dist/index.js",
-        "./collection": "./dist/index_collection.js",
-        "./icons": "./dist/index_icons.js",
-        "./vue": "./dist/index_vue.js"
-    },
-    "files": [
-        "dist",
-        "index.ts"
-    ],
-    "scripts": {
-        "dev": "astro dev --host 0.0.0.0 --port 6688",
-        "preview:docs": "astro preview --host 0.0.0.0 --port 4330 --outDir dist-docs",
-        "preview": "npm run preview:docs",
-        "build": "npm run build:cosy && npm run build:docs",
-        "build:cosy": "vite build && tsx scripts/post-build.ts",
-        "build:docs": "astro build",
-        "check": "astro check",
-        "lint": "eslint ."
-    },
-    "type": "module",
-    "peerDependencies": {
-        "astro": "^5.1.3"
-    },
-    "dependencies": {
-        "astro-integration-kit": "^0.18.0",
-        "fs-extra": "^11.3.0",
-        "html-to-image": "^1.11.13"
-    },
-    "devDependencies": {
-        "@astrojs/check": "^0.9.4",
-        "@astrojs/mdx": "^4.2.6",
-        "@astrojs/ts-plugin": "^1.10.4",
-        "@eslint/js": "^9.27.0",
-        "@tailwindcss/typography": "^0.5.16",
-        "@tailwindcss/vite": "^4.1.7",
-        "@tsconfig/node22": "^22.0.2",
-        "@types/chai": "^5.2.2",
-        "@types/eslint": "^9.6.1",
-        "@types/fs-extra": "^11.0.4",
-        "@types/mocha": "^10.0.10",
-        "@types/node": "^22.15.19",
-        "@types/react": "^19.1.4",
-        "@typescript-eslint/parser": "^8.32.1",
-        "astro": "^5.7.13",
-        "chai": "^4.5.0",
-        "daisyui": "^5.0.35",
-        "eslint": "^9.27.0",
-        "eslint-plugin-astro": "^1.3.1",
-        "globals": "^16.1.0",
-        "mocha": "^10.8.2",
-        "prettier": "^3.5.3",
-        "prettier-plugin-astro": "^0.14.1",
-        "rollup-plugin-copy": "^3.5.0",
-        "sharp": "^0.33.5",
-        "tailwindcss": "^4.1.7",
-        "tsx": "^4.19.4",
-        "typescript": "^5.8.3",
-        "typescript-eslint": "^8.32.1",
-        "vite": "^6.3.5"
+    "./collection": {
+      "import": "./dist/index-collection.ts",
+      "types": "./dist/index-collection.ts"
     }
+  },
+  "files": [
+    "dist",
+    "index.ts"
+  ],
+  "scripts": {
+    "build": "vite build && tsx scripts/post-build.ts"
+  },
+  "type": "module",
+  "peerDependencies": {
+    "astro": "^5.1.3"
+  },
+  "dependencies": {
+    "astro-integration-kit": "^0.18.0",
+    "fs-extra": "^11.3.0",
+    "html-to-image": "^1.11.13"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/mdx": "^4.2.6",
+    "@astrojs/ts-plugin": "^1.10.4",
+    "@eslint/js": "^9.27.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.1.7",
+    "@tsconfig/node22": "^22.0.2",
+    "@types/chai": "^5.2.2",
+    "@types/eslint": "^9.6.1",
+    "@types/fs-extra": "^11.0.4",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^22.15.19",
+    "@types/react": "^19.1.4",
+    "@typescript-eslint/parser": "^8.32.1",
+    "astro": "^5.7.13",
+    "chai": "^4.5.0",
+    "daisyui": "^5.0.35",
+    "eslint": "^9.27.0",
+    "eslint-plugin-astro": "^1.3.1",
+    "globals": "^16.1.0",
+    "mocha": "^10.8.2",
+    "prettier": "^3.5.3",
+    "prettier-plugin-astro": "^0.14.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "sharp": "^0.33.5",
+    "tailwindcss": "^4.1.7",
+    "tsx": "^4.19.4",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.32.1",
+    "vite": "^6.3.5"
+  }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Coffic Lab
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,31 +0,0 @@
-# Cosy UI
-
-[![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)
-![NPM Version](https://img.shields.io/npm/v/%40coffic%2Fcosy-ui)
-[![Coffic](https://img.shields.io/badge/Coffic-green)](https://coffic.cn)
-[![Maintainer](https://img.shields.io/badge/Maintainer-blue)](https://github.com/nookery)
-![GitHub License](https://img.shields.io/github/license/cofficlab/cosy-ui)
-
-This is an Astro component library that provides a unified UI style for multiple projects under the same organization.
-
-## Quick Start
-
-Installation
-
-```bash
-npm install @coffic/cosy-ui
-```
-
-Usage in Astro components:
-
-```js
----
-import { Button } from "@coffic/cosy-ui";
----
-<Button>Hi</Button>
-```

package/dist/alert/Alert.astro

@@ -1,94 +0,0 @@
----
-/**
- * @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';
-
-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/alert/EAlertBasic.astro

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

package/dist/alert/EAlertBasicContainer.astro

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

package/dist/alert/EAlertCustomStyle.astro

@@ -1,14 +0,0 @@
----
-/**
- * @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/EAlertCustomStyleContainer.astro

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

package/dist/alert/EAlertError.astro

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

package/dist/alert/EAlertInfo.astro

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

package/dist/alert/EAlertSuccess.astro

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

package/dist/alert/EAlertTypesContainer.astro

@@ -1,43 +0,0 @@
----
-/**
- * @component Alert.Types
- *
- * @description
- * 展示Alert组件的所有类型：info、success、warning、error。
- */
-import '../style.ts';
-import { CodeContainer } from '../index';
-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/alert/EAlertWarning.astro

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

package/dist/alert/EAlertWithTitle.astro

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

package/dist/alert/EAlertWithTitleContainer.astro

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

package/dist/alert/index.ts

@@ -1,16 +0,0 @@
-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,
-    },
-}