@coffic/cosy-ui 0.7.4 → 0.8.6

package/dist/src-astro/team-member/TeamMembers.astro

@@ -0,0 +1,96 @@
+---
+/**
+ * @component TeamMembers
+ *
+ * @description
+ * TeamMembers 组件用于展示团队成员列表，以网格布局呈现多个 TeamMember 组件。
+ * 支持响应式布局，可以根据屏幕大小自动调整列数。
+ *
+ * @design
+ * 设计理念：
+ * 1. 一致性展示 - 以统一的卡片形式展示团队成员信息
+ * 2. 响应式布局 - 在不同屏幕尺寸下自动调整列数
+ * 3. 灵活配置 - 支持自定义列数和样式
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <TeamMembers members={teamData} />
+ * ```
+ *
+ * 自定义列数：
+ * ```astro
+ * <TeamMembers members={teamData} columns={2} />
+ * ```
+ *
+ * 添加自定义类名：
+ * ```astro
+ * <TeamMembers members={teamData} class="mt-8" />
+ * ```
+ */
+
+import TeamMember from './TeamMember.astro';
+import '../../style.ts';
+import type { ImageSource } from '../types/image.ts';
+
+interface SocialLink {
+  platform: 'github' | 'twitter' | 'linkedin' | 'website' | 'email';
+  url: string;
+}
+
+interface TeamMemberData {
+  name: string;
+  role: string;
+  avatar: ImageSource;
+  bio: string;
+  socialLinks?: SocialLink[];
+}
+
+interface Props {
+  /**
+   * 团队成员数据数组
+   */
+  members: TeamMemberData[];
+  /**
+   * 网格列数
+   * @default 3
+   */
+  columns?: 2 | 3 | 4;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const { members, columns = 3, class: className = '' } = Astro.props;
+
+// 使用类型断言确保 columns 是有效的键
+const columnsValue = columns as 2 | 3 | 4;
+
+// 根据列数生成对应的类名
+const getGridClasses = (cols: 2 | 3 | 4) => {
+  const baseClass = 'cosy:grid-cols-1';
+  const mdClass = 'cosy:md:grid-cols-2';
+
+  let lgClass = 'cosy:lg:grid-cols-3';
+  if (cols === 2) {
+    lgClass = 'cosy:lg:grid-cols-2';
+  } else if (cols === 4) {
+    lgClass = 'cosy:lg:grid-cols-4';
+  }
+
+  return [baseClass, mdClass, lgClass];
+};
+---
+
+<div class:list={['cosy:w-full cosy:mx-auto cosy:px-4', className]}>
+  <div class:list={['cosy:grid cosy:gap-6', ...getGridClasses(columnsValue)]}>
+    {
+      members.map((member: TeamMemberData) => (
+        <div class="cosy:transition-all cosy:hover:-translate-y-1 cosy:duration-300 cosy:transform">
+          <TeamMember {...member} />
+        </div>
+      ))
+    }
+  </div>
+</div>

package/dist/src-astro/team-member/index.ts

@@ -0,0 +1,30 @@
+import TeamMember from './TeamMember.astro';
+import TeamMemberBasic from './TeamMemberBasic.astro';
+import TeamMemberWithSocial from './TeamMemberWithSocial.astro';
+import TeamMemberCustomStyle from './TeamMemberCustomStyle.astro';
+import TeamMemberGroup from './TeamMemberGroup.astro';
+import TeamMemebrs from './TeamMembers.astro';
+
+import BasicSourceCode from './TeamMemberBasic.astro?raw';
+import WithSocialSourceCode from './TeamMemberWithSocial.astro?raw';
+import CustomStyleSourceCode from './TeamMemberCustomStyle.astro?raw';
+import GroupSourceCode from './TeamMemberGroup.astro?raw';
+
+import { extractSimpleExample } from '../utils/component';
+
+export {
+  TeamMember,
+  TeamMemberBasic,
+  TeamMemberWithSocial,
+  TeamMemberCustomStyle,
+  TeamMemberGroup,
+  TeamMemebrs,
+};
+
+// Export example codes
+export const TeamMemberExampleCodes = {
+  Basic: extractSimpleExample(BasicSourceCode, 'TeamMember'),
+  WithSocial: extractSimpleExample(WithSocialSourceCode, 'TeamMember'),
+  CustomStyle: extractSimpleExample(CustomStyleSourceCode, 'TeamMember'),
+  Group: extractSimpleExample(GroupSourceCode, 'TeamMember'),
+};

package/dist/src-astro/text/Text.astro

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

package/dist/src-astro/text/TextBasic.astro

@@ -0,0 +1,12 @@
+---
+import Text from './Text.astro';
+---
+
+<Text>这是一段普通文本</Text>
+<Text size="xl" color="primary" weight="bold">超大主色粗体文本</Text>
+<Text size="sm" color="secondary" italic>小号次色斜体文本</Text>
+<Text size="lg" align="center" underline>居中大号带下划线文本</Text>
+<Text size="md" weight="light" color="muted">中号柔和色细体文本</Text>
+<Text truncate style="max-width: 120px; display: block;"
+  >这是一段很长的文本，将会被截断并显示省略号...</Text
+>

package/dist/src-astro/text/TextSizes.astro

@@ -0,0 +1,11 @@
+---
+import Text from './Text.astro';
+---
+
+<div class="cosy:space-y-4">
+  <Text size="xs">超小号文本 (xs)</Text>
+  <Text size="sm">小号文本 (sm)</Text>
+  <Text size="md">中号文本 (md)</Text>
+  <Text size="lg">大号文本 (lg)</Text>
+  <Text size="xl">超大号文本 (xl)</Text>
+</div>

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

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

package/dist/src-astro/theme-switcher/ThemeItem.astro

@@ -0,0 +1,45 @@
+---
+/**
+ * @component ThemeItem
+ *
+ * @description
+ * ThemeItem 组件用于主题切换菜单中的单个主题项。
+ * 它基于 Button 组件，提供了主题切换的交互功能。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ThemeItem theme="light" label="浅色主题" />
+ * <ThemeItem theme="dark" label="深色主题" />
+ * ```
+ */
+
+import { Button } from '../../index-astro';
+import '../../style.ts';
+
+interface Props {
+  /**
+   * 主题名称
+   */
+  theme: string;
+  /**
+   * 显示的标签文本
+   */
+  label: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const { theme, label, class: className = '' } = Astro.props;
+---
+
+<Button
+  variant="ghost"
+  size="sm"
+  block
+  class={`cosy:text-left cosy:justify-start ${className} cosy:theme-item`}
+  data-theme={theme}>
+  {label}
+</Button>

package/dist/src-astro/theme-switcher/ThemeSwitcher.astro

@@ -0,0 +1,121 @@
+---
+/**
+ * @component ThemeSwitcher
+ *
+ * @description
+ * ThemeSwitcher 组件提供一个主题切换下拉菜单，允许用户在多个预定义主题之间切换。
+ * 组件会记住用户的主题选择，并在页面重新加载或访问网站的其他页面时保持该主题。
+ *
+ * @design
+ * 设计理念：
+ * 1. 简洁直观 - 使用图标按钮和下拉菜单提供清晰的交互方式
+ * 2. 主题持久化 - 使用本地存储记住用户的主题选择
+ * 3. 无缝集成 - 与 DaisyUI 主题系统无缝集成
+ * 4. 广泛兼容 - 支持多种主题选项，适应不同的视觉偏好
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ThemeSwitcher />
+ * ```
+ *
+ * 自定义样式：
+ * ```astro
+ * <ThemeSwitcher class="cosy:top-4 cosy:right-4 cosy:fixed" />
+ * ```
+ */
+
+import { SunCloudyIcon } from '../../index-astro';
+import ThemeItem from './ThemeItem.astro';
+import '../../style.ts';
+
+interface Props {
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+
+const themes = [
+  { id: 'default', name: 'Default' },
+  { id: 'light', name: 'Light' },
+  { id: 'dark', name: 'Dark' },
+  { id: 'pastel', name: 'Pastel' },
+  { id: 'lemonade', name: 'Lemonade' },
+  { id: 'cupcake', name: 'Cupcake' },
+  { id: 'nord', name: 'Nord' },
+  { id: 'business', name: 'Business' },
+  { id: 'luxury', name: 'Luxury' },
+];
+---
+
+<!-- 主题切换按钮 -->
+<div class:list={['cosy:dropdown-end cosy:dropdown', className]}>
+  <div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
+    <SunCloudyIcon size="16px" class="cosy:w-4 cosy:h-4" />
+  </div>
+  <ul
+    tabindex={0}
+    class="cosy:dropdown-content cosy:menu cosy:bg-base-100 cosy:dark:bg-neutral-800 cosy:rounded-box cosy:z-[1] cosy:w-56 cosy:p-2 cosy:shadow-lg">
+    {themes.map((theme) => <ThemeItem theme={theme.id} label={theme.name} />)}
+  </ul>
+</div>
+
+<script>
+  import { createThemeManager } from '../utils/theme';
+
+  const themeManager = createThemeManager();
+
+  function updateActiveTheme() {
+    const currentTheme =
+      document.documentElement.getAttribute('data-theme') || 'default';
+    document.querySelectorAll('.cosy\\:theme-item').forEach((item) => {
+      const isActive = item.getAttribute('data-theme') === currentTheme;
+      item.setAttribute('data-active', String(isActive));
+
+      // 更新视觉状态
+      const checkmark = item.querySelector('.cosy\\:theme-check');
+      if (checkmark) {
+        if (isActive) {
+          checkmark.classList.remove('cosy:hidden');
+          item.classList.add('cosy:bg-base-200', 'cosy:font-medium');
+        } else {
+          checkmark.classList.add('cosy:hidden');
+          item.classList.remove('cosy:bg-base-200', 'cosy:font-medium');
+        }
+      }
+    });
+  }
+
+  // 初始化主题切换按钮
+  function initThemeSwitcher() {
+    document.querySelectorAll('.cosy\\:theme-item').forEach((item) => {
+      item.addEventListener('click', () => {
+        console.log('Theme item clicked:', item);
+        const theme = item.getAttribute('data-theme');
+        if (theme) {
+          themeManager.setTheme(theme);
+          updateActiveTheme();
+        }
+      });
+    });
+  }
+
+  // 初始加载时初始化
+  function initialize() {
+    themeManager.initialize();
+    initThemeSwitcher();
+    updateActiveTheme();
+  }
+
+  // 初始化
+  document.addEventListener('DOMContentLoaded', initialize);
+
+  // Astro view transitions 后重新初始化
+  document.addEventListener('astro:after-swap', initialize);
+
+  // 确保脚本加载后立即初始化
+  initialize();
+</script>

package/dist/src-astro/theme-switcher/ThemeSwitcherBasic.astro

@@ -0,0 +1,7 @@
+---
+import ThemeSwitcher from './ThemeSwitcher.astro';
+---
+
+<div class="cosy:flex cosy:justify-center">
+  <ThemeSwitcher />
+</div>

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

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