@coffic/cosy-ui 0.8.29 → 0.9.1

package/dist/src/utils/i18n.ts

@@ -1,9 +1,3 @@
-/**
- * 国际化文本配置
- *
- * 提供组件的多语言文本内容
- */
-
 // 定义文本内容的类型
 type TextContent = Record<string, Record<string, string>>;
 

package/dist/src/utils/language.ts

@@ -1,6 +1,4 @@
-import { getRelativeLocaleUrl } from 'astro:i18n';
 import type { AstroGlobal } from 'astro';
-import { cosyLogger } from '../../src-astro/cosy';
 
 // 默认语言
 export const DEFAULT_LANGUAGE = 'en';
@@ -11,111 +9,92 @@ export const DEFAULT_LANGUAGE = 'en';
  * 提供语言相关的工具函数，用于多语言支持
  */
 export class LanguageUtil {
-  static getRelativeLink(locale: string, astro: AstroGlobal): string {
-    const debug = false;
-    const currentLocale = astro.currentLocale;
-    const originalPath = astro.originPathname;
-    const result = getRelativeLocaleUrl(
-      locale,
-      originalPath.replaceAll('/' + currentLocale, '')
-    );
-
-    if (debug) {
-      cosyLogger.debug(
-        `getRelativeLink: locale=${locale}, currentPath=${originalPath}, currentLocale=${currentLocale}, result=${result}`
-      );
-    }
-
-    return result;
-  }
-
-  static getLanguageName(code: string | undefined): string {
-    switch (code) {
-      case 'en':
-        return 'English';
-      case 'zh-cn':
-        return '简体中文';
-      case 'zh':
-        return '中文';
-      case undefined:
-      default:
-        return 'not known';
+    static getLanguageName(code: string | undefined): string {
+        switch (code) {
+            case 'en':
+                return 'English';
+            case 'zh-cn':
+                return '简体中文';
+            case 'zh':
+                return '中文';
+            default:
+                return code || 'not known';
+        }
     }
-  }
 
-  /**
-   * 获取当前语言
-   * @param astro Astro全局对象
-   * @returns 当前应使用的语言代码
-   */
-  static getCurrentLanguage(astro: AstroGlobal): string {
-    // 尝试从Astro全局对象中获取语言
-    const astroLang = astro.currentLocale;
-    if (astroLang) {
-      return astroLang;
-    }
-    // 尝试从URL中获取语言
-    const urlLang = this.getLanguageFromURL(astro.url.pathname);
-    if (urlLang) {
-      return urlLang;
-    }
-
-    // 尝试从浏览器设置中获取语言
-    const browserLang = this.getLanguageFromBrowser();
-    if (browserLang) {
-      return browserLang;
+    /**
+     * 获取当前语言
+     * @param astro Astro全局对象
+     * @returns 当前应使用的语言代码
+     */
+    static getCurrentLanguage(astro: AstroGlobal): string {
+        // 尝试从Astro全局对象中获取语言
+        const astroLang = astro.currentLocale;
+        if (astroLang) {
+            return astroLang;
+        }
+        // 尝试从URL中获取语言
+        const urlLang = this.getLanguageFromURL(astro.url.pathname);
+        if (urlLang) {
+            return urlLang;
+        }
+
+        // 尝试从浏览器设置中获取语言
+        const browserLang = this.getLanguageFromBrowser();
+        if (browserLang) {
+            return browserLang;
+        }
+
+        // 尝试从Astro全局对象中获取语言
+        const preferredLocale = astro.preferredLocale;
+        if (preferredLocale) {
+            return preferredLocale;
+        }
+
+        // 如果无法检测，返回默认语言
+        return DEFAULT_LANGUAGE;
     }
 
-    // 尝试从Astro全局对象中获取语言
-    const preferredLocale = astro.preferredLocale;
-    if (preferredLocale) {
-      return preferredLocale;
+    /**
+     * 从URL中提取语言代码
+     * @param url 当前URL
+     * @returns 从URL中提取的语言代码，如果无法提取则返回undefined
+     */
+    private static getLanguageFromURL(url: string): string | undefined {
+        let currentUrl = url;
+
+        if (currentUrl === undefined) {
+            if (typeof window === 'undefined') return undefined;
+            currentUrl = window.location.href;
+        }
+
+        // 尝试从路径中提取语言代码
+        // 例如: /zh-cn/components/button
+        const pathMatch = currentUrl.match(/^\/([\w-]+)\//);
+        if (pathMatch) {
+            return pathMatch[1];
+        }
+
+        // 尝试从查询参数中提取语言代码
+        // 例如: ?lang=zh-cn
+        const urlParams = new URLSearchParams(currentUrl.split('?')[1]);
+        const langParam = urlParams.get('lang');
+        if (langParam) {
+            return langParam;
+        }
+
+        return undefined;
     }
 
-    // 如果无法检测，返回默认语言
-    return DEFAULT_LANGUAGE;
-  }
-
-  /**
-   * 从URL中提取语言代码
-   * @param url 当前URL
-   * @returns 从URL中提取的语言代码，如果无法提取则返回undefined
-   */
-  private static getLanguageFromURL(url: string): string | undefined {
-    let currentUrl = url;
+    /**
+     * 从浏览器设置中获取首选语言
+     * @returns 从浏览器设置中获取的语言代码，如果无法获取则返回undefined
+     */
+    private static getLanguageFromBrowser(): string | undefined {
+        if (typeof navigator === 'undefined') return undefined;
 
-    if (currentUrl === undefined) {
-      if (typeof window === 'undefined') return undefined;
-      currentUrl = window.location.href;
+        // 获取浏览器语言
+        const browserLang = navigator.language.toLowerCase();
+        return browserLang;
     }
-
-    // 尝试从路径中提取语言代码
-    // 例如: /zh-cn/components/button
-    const pathMatch = currentUrl.match(/^\/([\w-]+)\//);
-    if (pathMatch) {
-      return pathMatch[1];
-    }
-
-    // 尝试从查询参数中提取语言代码
-    // 例如: ?lang=zh-cn
-    const urlParams = new URLSearchParams(currentUrl.split('?')[1]);
-    const langParam = urlParams.get('lang');
-    if (langParam) {
-      return langParam;
-    }
-
-    return undefined;
-  }
-
-  /**
-   * 从浏览器设置中获取首选语言
-   * @returns 从浏览器设置中获取的语言代码，如果无法获取则返回undefined
-   */
-  private static getLanguageFromBrowser(): string | undefined {
-    if (typeof navigator === 'undefined') return undefined;
-
-    // 获取浏览器语言
-    const browserLang = navigator.language.toLowerCase();
-    return browserLang;
-  }
 }

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

@@ -22,8 +22,9 @@ import {
   Link,
   Image,
   ThemeSwitcher,
-} from '@coffic/cosy-ui';
+} from '../../index-astro';
 import Logo from '../../src/assets/logo-rounded.png';
+import { i18n } from 'astro:config/server';
 
 export interface Props extends IHeaderProps {
   debug?: boolean;
@@ -31,7 +32,6 @@ export interface Props extends IHeaderProps {
 
 const {
   height = 'md',
-  languages = ['zh-cn', 'en'],
   logo = Logo,
   logoHref = '/',
   navItems = [],
@@ -200,7 +200,7 @@ const activeLink = LinkUtil.getActiveLink(
       }
 
       {showThemeSwitcher && <ThemeSwitcher />}
-      {languages.length > 1 && <LanguageSwitcher languages={languages} />}
+      {i18n !== undefined && <LanguageSwitcher />}
 
       <slot name="navbar-end" />
     </div>

package/dist/src-astro/language-switcher/LanguageSwitcher.astro

@@ -19,50 +19,59 @@
  * <LanguageSwitcher />
  * ```
  *
- * 自定义语言列表：
- * ```astro
- * <LanguageSwitcher
- *   languages={['zh-cn', 'en']}
- * />
- * ```
  */
 
-import { ChevronDownIcon, LanguageUtil } from '../../index-astro';
+import {
+  ChevronDownIcon,
+  LanguageUtil,
+  Link,
+  ListItem,
+} from '../../index-astro';
 import '../../style.ts';
+import { i18n } from 'astro:config/server';
 
 interface Props {
-  languages: string[];
   /**
    * 自定义类名
    */
   class?: string;
 }
 
-const { languages = ['zh-cn', 'en'], class: className = '' } = Astro.props;
+const { class: className = '' } = Astro.props;
+
+let links: any[] = [];
+let currentLocale: string | undefined = undefined;
+let currentLanguageName: string | undefined = undefined;
 
-const currentLocale = Astro.currentLocale;
-const currentLanguageName = LanguageUtil.getLanguageName(currentLocale);
+if (i18n !== undefined) {
+  const { getSwitcherLinks } = await import('./switcher_util.ts');
+  links = getSwitcherLinks(Astro);
+
+  currentLocale = Astro.currentLocale!;
+  currentLanguageName = LanguageUtil.getLanguageName(currentLocale);
+} else {
+  throw new Error('can not use LanguageSwitcher when i18n is disabled');
+}
 ---
 
-<!-- 语言切换按钮 -->
-<div class={`cosy:dropdown cosy:dropdown-end ${className}`}>
-  <div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
-    <span class="cosy:mr-1">{currentLanguageName}</span>
-    <ChevronDownIcon size="16px" class="cosy:w-4 cosy:h-4" />
-  </div>
-  <ul
-    tabindex="0"
-    class="cosy:z-[1] cosy:bg-base-100 cosy:shadow cosy:p-2 cosy:rounded-box cosy:w-32 cosy:dropdown-content cosy:menu">
-    {
-      languages.map((lang) => (
-        <li class={currentLocale === lang ? 'cosy:disabled' : ''}>
-          <a
-            href={LanguageUtil.getRelativeLink(lang, Astro)}
-            class={currentLocale === lang ? 'cosy:active' : ''}>
-            {LanguageUtil.getLanguageName(lang)}
-          </a>
-        </li>
-      ))
-    }
-  </ul>
-</div>
+{
+  i18n !== undefined && (
+    <div class={`cosy:dropdown cosy:dropdown-end ${className}`}>
+      <div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
+        <span class="cosy:mr-1">{currentLanguageName}</span>
+        <ChevronDownIcon size="16px" class="cosy:w-4 cosy:h-4" />
+      </div>
+      <ul
+        tabindex="0"
+        class="cosy:z-[1] cosy:bg-base-100 cosy:shadow cosy:p-2 cosy:rounded-box cosy:w-32 cosy:dropdown-content cosy:menu">
+        {links.map((link) => (
+          <ListItem>
+            <Link href={link.url} active={currentLocale === link.locale}>
+              {link.name}
+            </Link>
+          </ListItem>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/dist/src-astro/language-switcher/index.ts

@@ -1,11 +1,3 @@
 import LanguageSwitcher from './LanguageSwitcher.astro';
-import LanguageSwitcherBasic from './LanguageSwitcherBasic.astro';
-import BasicSourceCode from './LanguageSwitcherBasic.astro?raw';
-import { extractSimpleExample } from '../../src/utils/component';
 
-export { LanguageSwitcher, LanguageSwitcherBasic };
-
-// 导出示例源代码
-export const LanguageSwitcherExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'LanguageSwitcher'),
-};
+export { LanguageSwitcher };

package/dist/src-astro/language-switcher/switcher_util.ts

@@ -0,0 +1,40 @@
+import { getRelativeLocaleUrl, getRelativeLocaleUrlList } from 'astro:i18n';
+import type { AstroGlobal } from 'astro';
+import { LanguageUtil } from '../../index-astro';
+
+export interface SwitcherLink {
+    locale: string;
+    name: string;
+    url: string;
+}
+
+// 获取基础路径
+const getBaseUrl = (): string => {
+    return import.meta.env.BASE_URL;
+};
+
+const getLocaleFromUrl = (url: string): string => {
+    return url.replace(getBaseUrl(), '').split('/')[0];
+};
+
+export function getSwitcherLinks(astro: AstroGlobal): SwitcherLink[] {
+    const currentLocale = astro.currentLocale;
+
+    if (currentLocale === undefined) {
+        throw new Error('can not get switcher links when i18n is disabled');
+    }
+
+    const currentLocalURLPrefix = getRelativeLocaleUrl(currentLocale, '');
+    const pathname = astro.url.pathname + '/';
+    const slug = pathname.replace(
+        currentLocalURLPrefix,
+        ''
+    );
+    const urls = getRelativeLocaleUrlList(slug);
+
+    return urls.map((url) => ({
+        locale: getLocaleFromUrl(url),
+        name: LanguageUtil.getLanguageName(getLocaleFromUrl(url)),
+        url: url
+    }));
+}

package/dist/src-astro/link/Link.astro

@@ -100,6 +100,7 @@ interface Props extends HTMLAttributes<'a'> {
     | 'warning'
     | 'error';
   align?: 'left' | 'center' | 'right';
+  active?: boolean;
 }
 
 const {
@@ -121,6 +122,7 @@ const {
   fullWidth = false,
   color,
   align,
+  active = false,
   ...rest
 } = Astro.props;
 
@@ -159,7 +161,10 @@ const classes = [
   animation === 'hover-scale' &&
     'cosy:hover:scale-105 cosy:transition-transform',
 
-  // 新增：按钮风格
+  // Active state
+  active && 'cosy:active',
+
+  // 按钮风格
   btn && 'cosy:btn',
   btn && size === 'sm' && 'cosy:btn-sm',
   btn && size === 'lg' && 'cosy:btn-lg',

package/dist/src-astro/list/ListItem.astro

@@ -1,10 +1,35 @@
 ---
 /**
  * @component ListItem
- * @description List item component with loading animations
- * @props loading?: boolean
- * @props duration?: number
- * @props animationType?: string
+ *
+ * @description
+ * ListItem 组件用于在列表中显示单个项目。它内置了多种加载动画效果，可以方便地通过 `loading` 属性来控制加载状态，并通过 `loadingAnimationType` 属性切换不同的加载Loading动画样式。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ListItem>这是一个列表项</ListItem>
+ * ```
+ *
+ * 加载状态：
+ * ```astro
+ * <ListItem loading={true}>加载中的列表项</ListItem>
+ * ```
+ *
+ * 指定加载动画类型：
+ * ```astro
+ * <ListItem loading={true} loadingAnimationType="pulse">使用脉冲动画加载</ListItem>
+ * <ListItem loading={true} loadingAnimationType="icon-left">使用左侧图标动画加载</ListItem>
+ * ```
+ *
+ * @props
+ * @prop {string} [class] - 自定义 CSS 类名。
+ * @prop {boolean} [loading=false] - 控制是否显示加载动画。
+ * @prop {number} [duration] - 动画的持续时间（单位：毫秒）。
+ * @prop {('none'|'ring'|'icon-left'|'icon-right'|'breath'|'pulse'|'glow')} [loadingAnimationType='none'] - 加载动画的类型。
+ *
+ * @slots
+ * @slot default - 列表项的内容。
  */
 import '../../style.ts';
 import ListItemRing from './ListItemRing.astro';
@@ -14,16 +39,38 @@ import ListItemBreath from './ListItemBreath.astro';
 import ListItemPulse from './ListItemPulse.astro';
 import ListItemGlow from './ListItemGlow.astro';
 
+interface Props {
+  class?: string;
+  loading?: boolean;
+  duration?: number;
+  loadingAnimationType?:
+    | 'none'
+    | 'ring'
+    | 'icon-left'
+    | 'icon-right'
+    | 'breath'
+    | 'pulse'
+    | 'glow';
+}
+
 const {
   loading = false,
   duration,
-  animationType = 'ring',
+  loadingAnimationType = 'none',
   ...restProps
 } = Astro.props;
 ---
 
 {
-  animationType === 'ring' && (
+  loadingAnimationType === 'none' && (
+    <li {...restProps}>
+      <slot />
+    </li>
+  )
+}
+
+{
+  loadingAnimationType === 'ring' && (
     <ListItemRing loading={loading} duration={duration} {...restProps}>
       <slot />
     </ListItemRing>
@@ -31,7 +78,7 @@ const {
 }
 
 {
-  animationType === 'icon-left' && (
+  loadingAnimationType === 'icon-left' && (
     <ListItemIconLeft loading={loading} duration={duration} {...restProps}>
       <slot />
     </ListItemIconLeft>
@@ -39,7 +86,7 @@ const {
 }
 
 {
-  animationType === 'icon-right' && (
+  loadingAnimationType === 'icon-right' && (
     <ListItemIconRight loading={loading} duration={duration} {...restProps}>
       <slot />
     </ListItemIconRight>
@@ -47,7 +94,7 @@ const {
 }
 
 {
-  animationType === 'breath' && (
+  loadingAnimationType === 'breath' && (
     <ListItemBreath loading={loading} duration={duration} {...restProps}>
       <slot />
     </ListItemBreath>
@@ -55,7 +102,7 @@ const {
 }
 
 {
-  animationType === 'pulse' && (
+  loadingAnimationType === 'pulse' && (
     <ListItemPulse loading={loading} duration={duration} {...restProps}>
       <slot />
     </ListItemPulse>
@@ -63,7 +110,7 @@ const {
 }
 
 {
-  animationType === 'glow' && (
+  loadingAnimationType === 'glow' && (
     <ListItemGlow loading={loading} duration={duration} {...restProps}>
       <slot />
     </ListItemGlow>

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

@@ -1,87 +1,82 @@
 import type { INavItem } from './nav';
 
 export interface IHeaderProps {
-  /**
-   * 侧边栏是否默认展开
-   * @default false
-   */
-  defaultSidebarOpen?: boolean;
+    /**
+     * 侧边栏是否默认展开
+     * @default false
+     */
+    defaultSidebarOpen?: boolean;
 
-  /**
-   * 导航栏高度
-   * @default "md"
-   */
-  height?: '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * 导航栏高度
+     * @default "md"
+     */
+    height?: '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
-  /**
-   * 语言选项列表
-   */
-  languages?: string[];
+    /**
+     * Logo图片元数据
+     */
+    logo?: ImageMetadata;
 
-  /**
-   * Logo图片元数据
-   */
-  logo?: ImageMetadata;
+    /**
+     * Logo 链接地址
+     * @default "/"
+     */
+    logoHref?: string;
 
-  /**
-   * Logo 链接地址
-   * @default "/"
-   */
-  logoHref?: string;
+    /**
+     * 导航菜单项
+     */
+    navItems?: INavItem[];
 
-  /**
-   * 导航菜单项
-   */
-  navItems?: INavItem[];
+    /**
+     * 导航栏位置
+     * @default "start"
+     */
+    navPosition?: 'start' | 'center' | 'end';
 
-  /**
-   * 导航栏位置
-   * @default "start"
-   */
-  navPosition?: 'start' | 'center' | 'end';
+    /**
+     * 水平内边距
+     * @default "md"
+     */
+    paddingHorizontal?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 
-  /**
-   * 水平内边距
-   * @default "md"
-   */
-  paddingHorizontal?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /**
+     * 垂直内边距
+     * @default "md"
+     */
+    paddingVertical?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 
-  /**
-   * 垂直内边距
-   * @default "md"
-   */
-  paddingVertical?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /**
+     * 圆角大小
+     * @default "md"
+     */
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 
-  /**
-   * 圆角大小
-   * @default "md"
-   */
-  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /**
+     * 是否显示侧边栏切换按钮
+     * @default false
+     */
+    showSidebarToggle?: boolean;
 
-  /**
-   * 是否显示侧边栏切换按钮
-   * @default false
-   */
-  showSidebarToggle?: boolean;
+    /**
+     * 是否显示主题切换按钮
+     * @default false
+     */
+    showThemeSwitcher?: boolean;
 
-  /**
-   * 是否显示主题切换按钮
-   * @default false
-   */
-  showThemeSwitcher?: boolean;
+    /**
+     * 社交媒体链接列表
+     */
+    socialLinks?: Array<{
+        name: string;
+        url: string;
+        icon: any;
+    }>;
 
-  /**
-   * 社交媒体链接列表
-   */
-  socialLinks?: Array<{
-    name: string;
-    url: string;
-    icon: any;
-  }>;
-
-  /**
-   * 是否固定在顶部
-   * @default true
-   */
-  sticky?: boolean;
+    /**
+     * 是否固定在顶部
+     * @default true
+     */
+    sticky?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.8.29",
+  "version": "0.9.1",
   "description": "An astro component library",
   "author": {
     "name": "nookery",

package/dist/src-astro/language-switcher/LanguageSwitcherBasic.astro

@@ -1,7 +0,0 @@
----
-import LanguageSwitcher from './LanguageSwitcher.astro';
----
-
-<div class="cosy:flex cosy:justify-center">
-  <LanguageSwitcher languages={['zh-cn', 'en']} />
-</div>