@coffic/cosy-ui 0.3.39 → 0.3.45

package/dist/components/typography/Text.astro

@@ -1,29 +1,29 @@
 ---
 /**
  * @component Text
- * 
+ *
  * @description
  * Text 组件用于创建各种文本元素，提供一致的排版样式和灵活的定制选项。
- * 
+ *
  * @design
  * 设计理念：
  * 1. 一致性 - 确保整个应用中文本样式的一致性
  * 2. 可读性 - 优化文本的可读性和舒适度
  * 3. 可定制性 - 支持多种配置选项，适应不同场景需求
  * 4. 无障碍性 - 遵循语义化HTML标准，确保屏幕阅读器可以正确解析内容
- * 
+ *
  * 视觉特点：
  * - 不同的字体大小和行高
  * - 可选的字体粗细和样式
  * - 可定制的颜色和对齐方式
  * - 支持截断和省略号
- * 
+ *
  * @usage
  * 基本用法：
  * ```astro
  * <Text>这是一段普通文本</Text>
  * ```
- * 
+ *
  * 不同大小：
  * ```astro
  * <Text size="xs">超小文本</Text>
@@ -32,7 +32,7 @@
  * <Text size="lg">大文本</Text>
  * <Text size="xl">超大文本</Text>
  * ```
- * 
+ *
  * 不同颜色：
  * ```astro
  * <Text color="primary">主要颜色文本</Text>
@@ -40,7 +40,7 @@
  * <Text color="accent">强调色文本</Text>
  * <Text color="muted">柔和色文本</Text>
  * ```
- * 
+ *
  * 字体粗细：
  * ```astro
  * <Text weight="light">细体文本</Text>
@@ -49,7 +49,7 @@
  * <Text weight="semibold">半粗体文本</Text>
  * <Text weight="bold">粗体文本</Text>
  * ```
- * 
+ *
  * 文本对齐：
  * ```astro
  * <Text align="left">左对齐文本</Text>
@@ -57,25 +57,25 @@
  * <Text align="right">右对齐文本</Text>
  * <Text align="justify">两端对齐文本</Text>
  * ```
- * 
+ *
  * 文本截断：
  * ```astro
  * <Text truncate>这是一段很长的文本，将会被截断并显示省略号...</Text>
  * ```
- * 
+ *
  * 组合使用：
  * ```astro
- * <Text 
- *   size="lg" 
- *   color="primary" 
- *   weight="bold" 
+ * <Text
+ *   size="lg"
+ *   color="primary"
+ *   weight="bold"
  *   align="center"
  *   class="my-4"
  * >
  *   这是一段重要的提示文本
  * </Text>
  * ```
- * 
+ *
  * @props
  * @prop {string} [as='p'] - 要渲染的HTML元素，如 'p', 'span', 'div' 等
  * @prop {'xs'|'sm'|'md'|'lg'|'xl'} [size='md'] - 文本大小
@@ -86,102 +86,104 @@
  * @prop {boolean} [underline=false] - 是否添加下划线
  * @prop {boolean} [truncate=false] - 是否截断文本并显示省略号
  * @prop {string} [class] - 自定义 CSS 类名
- * 
+ *
  * @slots
  * @slot default - 文本内容
- * 
+ *
  * @accessibility
  * - 使用语义化的HTML元素
  * - 确保文本颜色与背景色的对比度符合WCAG标准
  */
 
+import '../../app.css';
+
 interface Props {
-  as?: string;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
-  color?: 'default' | 'primary' | 'secondary' | 'accent' | 'muted';
-  align?: 'left' | 'center' | 'right' | 'justify';
-  italic?: boolean;
-  underline?: boolean;
-  truncate?: boolean;
-  class?: string;
+	as?: string;
+	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+	weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+	color?: 'default' | 'primary' | 'secondary' | 'accent' | 'muted';
+	align?: 'left' | 'center' | 'right' | 'justify';
+	italic?: boolean;
+	underline?: boolean;
+	truncate?: boolean;
+	class?: string;
 }
 
 const {
-  as: Element = 'p',
-  size = 'md',
-  weight = 'normal',
-  color = 'default',
-  align = 'left',
-  italic = false,
-  underline = false,
-  truncate = false,
-  class: className = '',
+	as: Element = 'p',
+	size = 'md',
+	weight = 'normal',
+	color = 'default',
+	align = 'left',
+	italic = false,
+	underline = false,
+	truncate = false,
+	class: className = '',
 } = Astro.props;
 
 // 根据大小设置样式
 const sizeClasses = {
-  xs: 'text-xs',
-  sm: 'text-sm',
-  md: 'text-base',
-  lg: 'text-lg',
-  xl: 'text-xl',
+	xs: 'cosy:text-xs',
+	sm: 'cosy:text-sm',
+	md: 'cosy:text-base',
+	lg: 'cosy:text-lg',
+	xl: 'cosy:text-xl',
 };
 const sizeClass = sizeClasses[size as keyof typeof sizeClasses];
 
 // 根据粗细设置样式
 const weightClasses = {
-  light: 'font-light',
-  normal: 'font-normal',
-  medium: 'font-medium',
-  semibold: 'font-semibold',
-  bold: 'font-bold',
+	light: 'cosy:font-light',
+	normal: 'cosy:font-normal',
+	medium: 'cosy:font-medium',
+	semibold: 'cosy:font-semibold',
+	bold: 'cosy:font-bold',
 };
 const weightClass = weightClasses[weight as keyof typeof weightClasses];
 
 // 根据颜色设置样式
 const colorClasses = {
-  default: 'text-gray-900 dark:text-gray-100',
-  primary: 'text-primary-600 dark:text-primary-400',
-  secondary: 'text-secondary-600 dark:text-secondary-400',
-  accent: 'text-accent-600 dark:text-accent-400',
-  muted: 'text-gray-600 dark:text-gray-400',
+	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',
 };
 const colorClass = colorClasses[color as keyof typeof colorClasses];
 
 // 根据对齐方式设置样式
 const alignClasses = {
-  left: 'text-left',
-  center: 'text-center',
-  right: 'text-right',
-  justify: 'text-justify',
+	left: 'cosy:text-left',
+	center: 'cosy:text-center',
+	right: 'cosy:text-right',
+	justify: 'cosy:text-justify',
 };
 const alignClass = alignClasses[align as keyof typeof alignClasses];
 
 // 其他样式
-const italicClass = italic ? 'italic' : '';
-const underlineClass = underline ? 'underline' : '';
-const truncateClass = truncate ? 'truncate' : '';
+const italicClass = italic ? 'cosy:italic' : '';
+const underlineClass = underline ? 'cosy:underline' : '';
+const truncateClass = truncate ? 'cosy:truncate' : '';
 
 // 组合所有类名
 const combinedClass = `text ${sizeClass} ${weightClass} ${colorClass} ${alignClass} ${italicClass} ${underlineClass} ${truncateClass} ${className}`;
 ---
 
 <Element class={combinedClass}>
-  <slot />
+	<slot />
 </Element>
 
 <style>
-  .text {
-    margin-bottom: 1em;
-    line-height: 1.5;
-  }
-  
-  /* 确保截断文本正常工作 */
-  .truncate {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-  }
-</style> 
+	.text {
+		margin-bottom: 1em;
+		line-height: 1.5;
+	}
+
+	/* 确保截断文本正常工作 */
+	.truncate {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 100%;
+	}
+</style>

package/dist/utils/theme.ts

@@ -3,47 +3,105 @@ interface ThemeManager {
     handleThemeClick: (this: HTMLElement) => void;
     initialize: () => void;
     setTheme: (theme: string) => void;
+    detectSystemTheme: () => string;
 }
 
+/**
+ * 创建主题管理器
+ * 
+ * 提供主题切换、主题持久化存储和系统主题检测等功能
+ * 
+ * @returns ThemeManager 主题管理器对象
+ */
 export function createThemeManager(): ThemeManager {
-    const getThemeItems = () => document.querySelectorAll<HTMLElement>('[data-set-theme]');
+    const getThemeItems = () => document.querySelectorAll<HTMLElement>('[data-theme]');
 
     const updateActiveTheme = (currentTheme: string) => {
         const themeItems = getThemeItems();
         themeItems.forEach((item) => {
-            const themeId = item.getAttribute('data-set-theme');
+            const themeId = item.getAttribute('data-theme');
             const isActive = themeId === currentTheme;
-            item.classList.toggle('bg-primary', isActive);
-            item.classList.toggle('text-primary-content', isActive);
+
+            // 设置元素的 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');
-        document.documentElement.setAttribute('data-theme', theme ?? 'default');
-        localStorage.setItem('theme', theme ?? 'default');
-        updateActiveTheme(theme ?? 'default');
+        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 = () => {
-        const themeItems = getThemeItems();
+        // 从本地存储中获取主题
+        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);
         });
 
-        // 从本地存储中获取主题并更新激活状态
-        const savedTheme = localStorage.getItem('theme') || 'default';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        updateActiveTheme(savedTheme);
+        // 监听系统主题变化
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            // 只有当用户没有手动设置过主题时，才跟随系统主题变化
+            if (!localStorage.getItem('theme')) {
+                setTheme(e.matches ? 'dark' : 'default');
+            }
+        });
     };
 
     return {
@@ -51,5 +109,6 @@ export function createThemeManager(): ThemeManager {
         handleThemeClick,
         initialize,
         setTheme,
+        detectSystemTheme,
     };
-} 
+} 

package/package.json

@@ -1,72 +1,77 @@
 {
-	"name": "@coffic/cosy-ui",
-	"version": "0.3.39",
-	"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://github.com/CofficLab/cosy-ui",
-	"publishConfig": {
-		"access": "public"
-	},
-	"sideEffects": false,
-	"main": "./dist/index.js",
-	"exports": {
-		".": "./dist/index.js"
-	},
-	"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"
-	},
-	"devDependencies": {
-		"@astrojs/check": "^0.9.4",
-		"@astrojs/mdx": "^4.2.0",
-		"@astrojs/ts-plugin": "^1.10.4",
-		"@tailwindcss/typography": "^0.5.16",
-		"@tailwindcss/vite": "^4.0.14",
-		"@types/chai": "^5.2.0",
-		"@types/eslint": "^9.6.1",
-		"@types/fs-extra": "^11.0.4",
-		"@types/mocha": "^10.0.10",
-		"@types/node": "^22.13.10",
-		"@types/react": "^19.0.10",
-		"@typescript-eslint/parser": "^8.26.1",
-		"astro": "^5.5.2",
-		"chai": "^4.5.0",
-		"daisyui": "^5.0.4",
-		"eslint": "^8.57.1",
-		"eslint-plugin-astro": "^1.3.1",
-		"mocha": "^10.8.2",
-		"prettier": "^3.5.3",
-		"prettier-plugin-astro": "^0.14.1",
-		"rollup-plugin-copy": "^3.5.0",
-		"sharp": "^0.33.2",
-		"tailwindcss": "^4.0.14",
-		"tsx": "^4.19.3",
-		"typescript": "^5.8.2",
-		"vite": "^6.2.2"
-	}
+    "name": "@coffic/cosy-ui",
+    "version": "0.3.45",
+    "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://github.com/CofficLab/cosy-ui",
+    "publishConfig": {
+        "access": "public"
+    },
+    "sideEffects": false,
+    "main": "./dist/index.js",
+    "exports": {
+        ".": "./dist/index.js"
+    },
+    "files": [
+        "dist",
+        "index.ts"
+    ],
+    "scripts": {
+        "dev": "astro dev --host 0.0.0.0 --port 5678",
+        "preview:docs": "astro preview --host 0.0.0.0 --port 4330 --outDir dist-docs",
+        "build": "vite build && tsx scripts/post-build.ts",
+        "build:docs": "astro build"
+    },
+    "type": "module",
+    "peerDependencies": {
+        "astro": "^5.1.3"
+    },
+    "dependencies": {
+        "astro-integration-kit": "^0.18.0",
+        "fs-extra": "^11.3.0"
+    },
+    "devDependencies": {
+        "@astrojs/check": "^0.9.4",
+        "@astrojs/mdx": "^4.2.0",
+        "@astrojs/ts-plugin": "^1.10.4",
+        "@astrojs/vue": "^5.0.8",
+        "@tailwindcss/typography": "^0.5.16",
+        "@tailwindcss/vite": "^4.1.4",
+        "@types/chai": "^5.2.0",
+        "@types/eslint": "^9.6.1",
+        "@types/fs-extra": "^11.0.4",
+        "@types/mocha": "^10.0.10",
+        "@types/node": "^22.13.10",
+        "@types/react": "^19.0.10",
+        "@typescript-eslint/parser": "^8.26.1",
+        "astro": "^5.5.2",
+        "chai": "^4.5.0",
+        "daisyui": "^5.0.4",
+        "eslint": "^8.57.1",
+        "eslint-plugin-astro": "^1.3.1",
+        "mocha": "^10.8.2",
+        "prettier": "^3.5.3",
+        "prettier-plugin-astro": "^0.14.1",
+        "rollup-plugin-copy": "^3.5.0",
+        "sharp": "^0.33.2",
+        "tailwindcss": "^4.1.4",
+        "tsx": "^4.19.3",
+        "typescript": "^5.8.2",
+        "vite": "^6.2.2",
+        "vue": "^3.5.13"
+    }
 }