@coffic/cosy-ui 0.8.12 → 0.8.16

package/dist/src-astro/register/Register.astro

@@ -0,0 +1,289 @@
+---
+/**
+ * @component Register
+ *
+ * @description
+ * Register 组件用于创建灵活且功能丰富的注册页面。支持多种注册方式、表单验证和自定义样式。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Register title="创建账号" />
+ * ```
+ *
+ * 自定义注册方式：
+ * ```astro
+ * <Register
+ *   title="加入我们"
+ *   subtitle="创建你的账号"
+ *   socialLogins={['github', 'google']}
+ *   showTerms={true}
+ *   showPrivacy={true}
+ * />
+ * ```
+ *
+ * 完全自定义：
+ * ```astro
+ * <Register
+ *   title="企业注册"
+ *   subtitle="创建企业账号"
+ *   logo="/path/to/logo.png"
+ *   socialLogins={['github', 'google', 'wechat']}
+ *   showTerms={true}
+ *   showPrivacy={true}
+ *   customClass="my-register-page"
+ *   onRegisterSuccess={() => {}}
+ * >
+ *   <div slot="footer">
+ *     自定义页脚内容
+ *   </div>
+ * </Register>
+ * ```
+ *
+ * @props
+ * @prop {string} [title="注册"] - 注册页标题
+ * @prop {string} [subtitle] - 注册页副标题
+ * @prop {string} [logo] - 注册页Logo图片路径
+ * @prop {('github'|'google'|'wechat')[]} [socialLogins] - 社交账号注册方式列表
+ * @prop {boolean} [showTerms=true] - 是否显示服务条款选项
+ * @prop {boolean} [showPrivacy=true] - 是否显示隐私政策选项
+ * @prop {string} [customClass] - 自定义CSS类名
+ * @prop {string} [registerButtonText="注册"] - 注册按钮文本
+ * @prop {string} [usernameLabel="用户名"] - 用户名输入框标签
+ * @prop {string} [emailLabel="邮箱"] - 邮箱输入框标签
+ * @prop {string} [passwordLabel="密码"] - 密码输入框标签
+ * @prop {string} [confirmPasswordLabel="确认密码"] - 确认密码输入框标签
+ * @prop {string} [termsText="我已阅读并同意服务条款"] - 服务条款文本
+ * @prop {string} [privacyText="我已阅读并同意隐私政策"] - 隐私政策文本
+ * @prop {string} [dividerText="或"] - 社交注册分隔符文本
+ *
+ * @slots
+ * @slot header - 页头自定义内容
+ * @slot footer - 页脚自定义内容
+ * @slot socialButtons - 自定义社交注册按钮
+ */
+
+import '../../style.ts';
+import GithubIcon from '../icons/GithubIcon.astro';
+import ChartIcon from '../icons/ChartIcon.astro';
+
+export interface Props {
+  title?: string;
+  subtitle?: string;
+  logo?: string;
+  socialLogins?: ('github' | 'google' | 'wechat')[];
+  showTerms?: boolean;
+  showPrivacy?: boolean;
+  customClass?: string;
+  registerButtonText?: string;
+  usernameLabel?: string;
+  emailLabel?: string;
+  passwordLabel?: string;
+  confirmPasswordLabel?: string;
+  termsText?: string;
+  privacyText?: string;
+  dividerText?: string;
+}
+
+const {
+  title = '注册',
+  subtitle,
+  logo,
+  socialLogins = [],
+  showTerms = true,
+  showPrivacy = true,
+  customClass = '',
+  registerButtonText = '注册',
+  usernameLabel = '用户名',
+  emailLabel = '邮箱',
+  passwordLabel = '密码',
+  confirmPasswordLabel = '确认密码',
+  termsText = '我已阅读并同意服务条款',
+  privacyText = '我已阅读并同意隐私政策',
+  dividerText = '或',
+} = Astro.props;
+
+// 社交登录图标映射
+const socialIcons: Record<'github' | 'google' | 'wechat', any> = {
+  github: GithubIcon,
+  google: ChartIcon,
+  wechat: ChartIcon,
+};
+
+// 社交登录按钮样式映射
+const socialButtonStyles: Record<'github' | 'google' | 'wechat', string> = {
+  github: 'cosy:bg-gray-800 cosy:hover:bg-gray-900',
+  google: 'cosy:bg-red-500 cosy:hover:bg-red-600',
+  wechat: 'cosy:bg-green-500 cosy:hover:bg-green-600',
+};
+---
+
+<div
+  class={`cosy:min-h-screen cosy:flex cosy:items-center cosy:justify-center cosy:bg-base-200 cosy:py-12 cosy:px-4 cosy:sm:px-6 cosy:lg:px-8 ${customClass}`}>
+  <div
+    class="cosy:max-w-md cosy:w-full cosy:space-y-8 cosy:bg-base-100 cosy:p-8 cosy:rounded-lg cosy:shadow-xl">
+    <!-- 头部区域 -->
+    <div class="cosy:text-center">
+      <slot name="header">
+        {
+          logo && (
+            <img
+              class="cosy:mx-auto cosy:h-12 cosy:w-auto"
+              src={logo}
+              alt="Logo"
+            />
+          )
+        }
+        <h2
+          class="cosy:mt-6 cosy:text-3xl cosy:font-extrabold cosy:text-base-content">
+          {title}
+        </h2>
+        {
+          subtitle && (
+            <p class="cosy:mt-2 cosy:text-sm cosy:text-base-content/60">
+              {subtitle}
+            </p>
+          )
+        }
+      </slot>
+    </div>
+
+    <!-- 注册表单 -->
+    <form class="cosy:mt-8 cosy:space-y-6">
+      <div class="cosy:rounded-md cosy:shadow-sm cosy:-space-y-px">
+        <div>
+          <label for="username" class="cosy:sr-only">{usernameLabel}</label>
+          <input
+            id="username"
+            name="username"
+            type="text"
+            required
+            class="cosy:appearance-none cosy:rounded-none cosy:rounded-t-md cosy:relative cosy:block cosy:w-full cosy:px-3 cosy:py-2 cosy:border cosy:border-base-300 cosy:placeholder-base-content/40 cosy:text-base-content focus:cosy:z-10 focus:cosy:border-primary focus:cosy:outline-none focus:cosy:ring-1 focus:cosy:ring-primary"
+            placeholder={usernameLabel}
+          />
+        </div>
+        <div>
+          <label for="email" class="cosy:sr-only">{emailLabel}</label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            required
+            class="cosy:appearance-none cosy:rounded-none cosy:relative cosy:block cosy:w-full cosy:px-3 cosy:py-2 cosy:border cosy:border-base-300 cosy:placeholder-base-content/40 cosy:text-base-content focus:cosy:z-10 focus:cosy:border-primary focus:cosy:outline-none focus:cosy:ring-1 focus:cosy:ring-primary"
+            placeholder={emailLabel}
+          />
+        </div>
+        <div>
+          <label for="password" class="cosy:sr-only">{passwordLabel}</label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            required
+            class="cosy:appearance-none cosy:rounded-none cosy:relative cosy:block cosy:w-full cosy:px-3 cosy:py-2 cosy:border cosy:border-base-300 cosy:placeholder-base-content/40 cosy:text-base-content focus:cosy:z-10 focus:cosy:border-primary focus:cosy:outline-none focus:cosy:ring-1 focus:cosy:ring-primary"
+            placeholder={passwordLabel}
+          />
+        </div>
+        <div>
+          <label for="confirm-password" class="cosy:sr-only"
+            >{confirmPasswordLabel}</label
+          >
+          <input
+            id="confirm-password"
+            name="confirm-password"
+            type="password"
+            required
+            class="cosy:appearance-none cosy:rounded-none cosy:rounded-b-md cosy:relative cosy:block cosy:w-full cosy:px-3 cosy:py-2 cosy:border cosy:border-base-300 cosy:placeholder-base-content/40 cosy:text-base-content focus:cosy:z-10 focus:cosy:border-primary focus:cosy:outline-none focus:cosy:ring-1 focus:cosy:ring-primary"
+            placeholder={confirmPasswordLabel}
+          />
+        </div>
+      </div>
+
+      <div class="cosy:flex cosy:flex-col cosy:gap-3">
+        {
+          showTerms && (
+            <div class="cosy:flex cosy:items-center">
+              <input
+                id="terms"
+                name="terms"
+                type="checkbox"
+                required
+                class="cosy:h-4 cosy:w-4 cosy:text-primary cosy:focus:ring-primary cosy:border-base-300 cosy:rounded"
+              />
+              <label
+                for="terms"
+                class="cosy:ml-2 cosy:block cosy:text-sm cosy:text-base-content">
+                {termsText}
+              </label>
+            </div>
+          )
+        }
+
+        {
+          showPrivacy && (
+            <div class="cosy:flex cosy:items-center">
+              <input
+                id="privacy"
+                name="privacy"
+                type="checkbox"
+                required
+                class="cosy:h-4 cosy:w-4 cosy:text-primary cosy:focus:ring-primary cosy:border-base-300 cosy:rounded"
+              />
+              <label
+                for="privacy"
+                class="cosy:ml-2 cosy:block cosy:text-sm cosy:text-base-content">
+                {privacyText}
+              </label>
+            </div>
+          )
+        }
+      </div>
+
+      <div>
+        <button
+          type="submit"
+          class="cosy:group cosy:relative cosy:w-full cosy:flex cosy:justify-center cosy:py-2 cosy:px-4 cosy:border cosy:border-transparent cosy:text-sm cosy:font-medium cosy:rounded-md cosy:text-white cosy:bg-primary cosy:hover:bg-primary-focus focus:cosy:outline-none focus:cosy:ring-2 focus:cosy:ring-offset-2 focus:cosy:ring-primary">
+          {registerButtonText}
+        </button>
+      </div>
+    </form>
+
+    <!-- 社交注册 -->
+    {
+      socialLogins.length > 0 && (
+        <div class="cosy:mt-6">
+          <div class="cosy:relative">
+            <div class="cosy:absolute cosy:inset-0 cosy:flex cosy:items-center">
+              <div class="cosy:w-full cosy:border-t cosy:border-base-300" />
+            </div>
+            <div class="cosy:relative cosy:flex cosy:justify-center cosy:text-sm">
+              <span class="cosy:px-2 cosy:bg-base-100 cosy:text-base-content/60">
+                {dividerText}
+              </span>
+            </div>
+          </div>
+
+          <slot name="socialButtons">
+            <div class="cosy:mt-6 cosy:grid cosy:grid-cols-{Math.min(socialLogins.length, 3)} cosy:gap-3">
+              {socialLogins.map((provider) => {
+                const Icon = socialIcons[provider];
+                return (
+                  <div>
+                    <a
+                      href="#"
+                      class={`cosy:w-full cosy:inline-flex cosy:justify-center cosy:py-2 cosy:px-4 cosy:rounded-md cosy:shadow-sm cosy:text-sm cosy:font-medium cosy:text-white ${socialButtonStyles[provider]}`}>
+                      <Icon class="cosy:w-5 cosy:h-5" />
+                    </a>
+                  </div>
+                );
+              })}
+            </div>
+          </slot>
+        </div>
+      )
+    }
+
+    <!-- 页脚 -->
+    <slot name="footer" />
+  </div>
+</div>

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

@@ -0,0 +1,2 @@
+export { default as Register } from './Register.astro';
+export type { Props as RegisterProps } from './Register.astro'; 

package/dist/src-astro/sidebar/Sidebar.astro

@@ -22,7 +22,7 @@
  */
 
 import '../../style.ts';
-import { isPathMatch } from '../utils/path.ts';
+import { isPathMatch } from '../../src/utils/path.ts';
 import { MenuIcon, SidebarNav, Modal } from '../../index-astro';
 import type { ISidebarProps } from '../../index-astro';
 

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

@@ -1,7 +1,7 @@
 import Sidebar from './Sidebar.astro';
 import SidebarBasic from './SidebarBasic.astro';
 import BasicSourceCode from './SidebarBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { Sidebar, SidebarBasic };
 

package/dist/src-astro/sidebar-nav/SidebarNav.astro

@@ -5,7 +5,7 @@
  * 用于渲染侧边栏的导航内容
  */
 
-import { isPathMatch } from '../utils/path.ts';
+import { isPathMatch } from '../../src/utils/path.ts';
 import '../../style.ts';
 import type { ISidebarItem } from '../types/sidebar.ts';
 

package/dist/src-astro/sidebar-nav/index.ts

@@ -1,7 +1,7 @@
 import SidebarNav from './SidebarNav.astro';
 import SidebarNavBasic from './SidebarNavBasic.astro';
 import BasicSourceCode from './SidebarNavBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { SidebarNav, SidebarNavBasic };
 

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

@@ -3,7 +3,7 @@ import SpeakBasic from './SpeakBasic.astro';
 import SpeakGrid from './SpeakGrid.astro';
 import BasicSourceCode from './SpeakBasic.astro?raw';
 import GridSourceCode from './SpeakGrid.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { Speak, SpeakBasic, SpeakGrid };
 

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

@@ -1,7 +1,7 @@
 import Stack from './Stack.astro';
 import StackBasic from './StackBasic.astro';
 import BasicSourceCode from './StackBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { Stack, StackBasic };
 

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

@@ -7,7 +7,7 @@
  */
 import '../../style.ts';
 import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../utils/image.ts';
+import { getExampleImage } from '../../src/utils/image.ts';
 
 const avatar = getExampleImage({
   width: 200,

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

@@ -7,7 +7,7 @@
  */
 import '../../style.ts';
 import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../utils/image.ts';
+import { getExampleImage } from '../../src/utils/image.ts';
 
 const avatar = getExampleImage({
   width: 200,

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

@@ -7,7 +7,7 @@
  */
 import '../../style.ts';
 import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../utils/image.ts';
+import { getExampleImage } from '../../src/utils/image.ts';
 
 const members = [
   {

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

@@ -7,7 +7,7 @@
  */
 import '../../style.ts';
 import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../utils/image.ts';
+import { getExampleImage } from '../../src/utils/image.ts';
 
 const avatar = getExampleImage({
   width: 200,

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

@@ -10,7 +10,7 @@ import WithSocialSourceCode from './TeamMemberWithSocial.astro?raw';
 import CustomStyleSourceCode from './TeamMemberCustomStyle.astro?raw';
 import GroupSourceCode from './TeamMemberGroup.astro?raw';
 
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export {
   TeamMember,

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

@@ -1,7 +1,7 @@
 import Text from './Text.astro';
 import TextBasic from './TextBasic.astro';
 import BasicSourceCode from './TextBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { Text, TextBasic };
 

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

@@ -64,7 +64,7 @@ const themes = [
 </div>
 
 <script>
-  import { createThemeManager } from '../utils/theme';
+  import { createThemeManager } from '../../src/utils/theme';
 
   const themeManager = createThemeManager();
 

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

@@ -1,7 +1,7 @@
 import ThemeSwitcher from './ThemeSwitcher.astro';
 import ThemeSwitcherBasic from './ThemeSwitcherBasic.astro';
 import BasicSourceCode from './ThemeSwitcherBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { ThemeSwitcher, ThemeSwitcherBasic };
 

package/dist/src-astro/toast/Toast.astro

@@ -0,0 +1,114 @@
+---
+/**
+ * @component Toast
+ *
+ * @description
+ * Toast 组件用于显示临时的通知消息，支持多种类型和自动消失功能。
+ * 通常不直接使用，而是通过全局的 toast 系统来显示。
+ *
+ * @design
+ * 设计理念：
+ * 1. 非侵入式 - 不阻断用户操作，自动消失
+ * 2. 视觉层次 - 通过颜色和图标清晰表达消息类型
+ * 3. 可关闭性 - 用户可手动关闭消息
+ * 4. 响应式设计 - 适配不同屏幕尺寸
+ * 5. 可访问性 - 支持屏幕阅读器和键盘操作
+ *
+ * @usage
+ * 通过全局函数使用：
+ * ```javascript
+ * // 基本用法
+ * showToast('操作成功完成！');
+ *
+ * // 带类型的用法
+ * showToast({
+ *   message: '保存成功！',
+ *   type: 'success',
+ *   duration: 2000
+ * });
+ *
+ * // 错误提示
+ * showToast({
+ *   message: '网络连接失败，请重试',
+ *   type: 'error',
+ *   duration: 5000
+ * });
+ *
+ * // 关闭特定 toast
+ * const toastId = showToast('正在处理...');
+ * setTimeout(() => closeToast(toastId), 1000);
+ *
+ * // 清除所有 toast
+ * clearAllToasts();
+ * ```
+ *
+ * @props
+ * - message: string - 显示的消息内容
+ * - type: ToastType - 消息类型，影响样式和图标 ('info' | 'success' | 'warning' | 'error')
+ * - id: string - 唯一标识符
+ */
+
+import '../../style.ts';
+import {
+  InfoIcon,
+  SuccessIcon,
+  WarningIcon,
+  ErrorIcon,
+  CloseIcon,
+} from '../../index-astro';
+import type { ToastType } from './types';
+import { getToastStyle } from './types';
+
+export interface Props {
+  /**
+   * 显示的消息内容
+   */
+  message: string;
+
+  /**
+   * 消息类型，影响样式和图标
+   */
+  type: ToastType;
+
+  /**
+   * 唯一标识符
+   */
+  id: string;
+}
+
+const { message, type, id } = Astro.props;
+
+const style = getToastStyle(type);
+
+// 根据类型选择图标
+const IconComponent = {
+  info: InfoIcon,
+  success: SuccessIcon,
+  warning: WarningIcon,
+  error: ErrorIcon,
+}[type];
+---
+
+<div
+  class:list={[
+    'cosy:alert cosy:shadow-lg cosy:flex cosy:items-center cosy:gap-3 cosy:pr-2',
+    'cosy:transform cosy:transition-all cosy:duration-300 cosy:ease-in-out',
+    'cosy:translate-x-full cosy:opacity-0',
+    'toast-enter:cosy:translate-x-0 toast-enter:cosy:opacity-100',
+    'toast-exit:cosy:translate-x-full toast-exit:cosy:opacity-0',
+    style.bg,
+    style.border,
+  ]}
+  data-toast-id={id}
+  role="alert"
+  aria-live="polite">
+  <IconComponent size="20px" />
+  <span class="cosy:flex-1 cosy:text-sm cosy:font-medium">{message}</span>
+  <button
+    class="cosy:btn cosy:btn-ghost cosy:btn-xs cosy:btn-circle cosy:opacity-70 hover:cosy:opacity-100"
+    onclick={`window.closeToast?.('${id}')`}
+    aria-label="关闭通知"
+    type="button">
+    <CloseIcon size="16px" />
+  </button>
+</div>