@coffic/cosy-ui 0.8.12 → 0.8.13

package/dist/src-astro/login/Login.astro

@@ -0,0 +1,251 @@
+---
+/**
+ * @component Login
+ *
+ * @description
+ * Login 组件用于创建灵活且功能丰富的登录页面。支持多种登录方式、自定义样式和布局。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Login title="欢迎回来" />
+ * ```
+ *
+ * 自定义登录方式：
+ * ```astro
+ * <Login
+ *   title="登录到系统"
+ *   subtitle="使用以下方式登录"
+ *   socialLogins={['github', 'google']}
+ *   showRememberMe={true}
+ *   showForgotPassword={true}
+ * />
+ * ```
+ *
+ * 完全自定义：
+ * ```astro
+ * <Login
+ *   title="企业登录"
+ *   subtitle="安全登录到企业系统"
+ *   logo="/path/to/logo.png"
+ *   socialLogins={['github', 'google', 'wechat']}
+ *   showRememberMe={true}
+ *   showForgotPassword={true}
+ *   customClass="my-login-page"
+ *   onLoginSuccess={() => {}}
+ * >
+ *   <div slot="footer">
+ *     自定义页脚内容
+ *   </div>
+ * </Login>
+ * ```
+ *
+ * @props
+ * @prop {string} [title="登录"] - 登录页标题
+ * @prop {string} [subtitle] - 登录页副标题
+ * @prop {string} [logo] - 登录页Logo图片路径
+ * @prop {('github'|'google'|'wechat')[]} [socialLogins] - 社交登录方式列表
+ * @prop {boolean} [showRememberMe=false] - 是否显示"记住我"选项
+ * @prop {boolean} [showForgotPassword=false] - 是否显示"忘记密码"链接
+ * @prop {string} [customClass] - 自定义CSS类名
+ * @prop {string} [loginButtonText="登录"] - 登录按钮文本
+ * @prop {string} [usernameLabel="用户名"] - 用户名输入框标签
+ * @prop {string} [passwordLabel="密码"] - 密码输入框标签
+ * @prop {string} [forgotPasswordText="忘记密码？"] - 忘记密码链接文本
+ * @prop {string} [rememberMeText="记住我"] - 记住我选项文本
+ * @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')[];
+  showRememberMe?: boolean;
+  showForgotPassword?: boolean;
+  customClass?: string;
+  loginButtonText?: string;
+  usernameLabel?: string;
+  passwordLabel?: string;
+  forgotPasswordText?: string;
+  rememberMeText?: string;
+  dividerText?: string;
+}
+
+const {
+  title = '登录',
+  subtitle,
+  logo,
+  socialLogins = [],
+  showRememberMe = false,
+  showForgotPassword = false,
+  customClass = '',
+  loginButtonText = '登录',
+  usernameLabel = '用户名',
+  passwordLabel = '密码',
+  forgotPasswordText = '忘记密码？',
+  rememberMeText = '记住我',
+  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="password" class="cosy:sr-only">{passwordLabel}</label>
+          <input
+            id="password"
+            name="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={passwordLabel}
+          />
+        </div>
+      </div>
+
+      <div class="cosy:flex cosy:items-center cosy:justify-between">
+        {
+          showRememberMe && (
+            <div class="cosy:flex cosy:items-center">
+              <input
+                id="remember-me"
+                name="remember-me"
+                type="checkbox"
+                class="cosy:h-4 cosy:w-4 cosy:text-primary cosy:focus:ring-primary cosy:border-base-300 cosy:rounded"
+              />
+              <label
+                for="remember-me"
+                class="cosy:ml-2 cosy:block cosy:text-sm cosy:text-base-content">
+                {rememberMeText}
+              </label>
+            </div>
+          )
+        }
+
+        {
+          showForgotPassword && (
+            <div class="cosy:text-sm">
+              <a
+                href="#"
+                class="cosy:font-medium cosy:text-primary cosy:hover:text-primary-focus">
+                {forgotPasswordText}
+              </a>
+            </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">
+          {loginButtonText}
+        </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/login/index.ts

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

package/dist/src-astro/logout/Logout.astro

@@ -0,0 +1,117 @@
+---
+/**
+ * @component Logout
+ *
+ * @description
+ * Logout 组件用于创建退出登录确认页面。支持自定义提示信息和按钮文本。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Logout />
+ * ```
+ *
+ * 自定义文本：
+ * ```astro
+ * <Logout
+ *   title="确认退出"
+ *   message="您确定要退出登录吗？"
+ *   confirmText="确认退出"
+ *   cancelText="取消"
+ * />
+ * ```
+ *
+ * 完全自定义：
+ * ```astro
+ * <Logout
+ *   title="退出系统"
+ *   message="退出后需要重新登录才能访问系统"
+ *   logo="/path/to/logo.png"
+ *   confirmText="确认退出"
+ *   cancelText="取消"
+ *   customClass="my-logout-page"
+ * >
+ *   <div slot="footer">
+ *     遇到问题？<a href="#">联系支持</a>
+ *   </div>
+ * </Logout>
+ * ```
+ *
+ * @props
+ * @prop {string} [title="退出登录"] - 页面标题
+ * @prop {string} [message="您确定要退出当前账号吗？"] - 确认提示信息
+ * @prop {string} [logo] - Logo图片路径
+ * @prop {string} [confirmText="退出登录"] - 确认按钮文本
+ * @prop {string} [cancelText="取消"] - 取消按钮文本
+ * @prop {string} [customClass] - 自定义CSS类名
+ *
+ * @slots
+ * @slot header - 页头自定义内容
+ * @slot footer - 页脚自定义内容
+ */
+
+import '../../style.ts';
+
+export interface Props {
+  title?: string;
+  message?: string;
+  logo?: string;
+  confirmText?: string;
+  cancelText?: string;
+  customClass?: string;
+}
+
+const {
+  title = '退出登录',
+  message = '您确定要退出当前账号吗？',
+  logo,
+  confirmText = '退出登录',
+  cancelText = '取消',
+  customClass = '',
+} = Astro.props;
+---
+
+<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>
+        <p class="cosy:mt-2 cosy:text-sm cosy:text-base-content/60">
+          {message}
+        </p>
+      </slot>
+    </div>
+
+    <!-- 按钮区域 -->
+    <div class="cosy:mt-8 cosy:space-y-4">
+      <button
+        type="button"
+        class="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-error cosy:hover:bg-error-focus focus:cosy:outline-none focus:cosy:ring-2 focus:cosy:ring-offset-2 focus:cosy:ring-error">
+        {confirmText}
+      </button>
+      <button
+        type="button"
+        class="cosy:w-full cosy:flex cosy:justify-center cosy:py-2 cosy:px-4 cosy:border cosy:border-base-300 cosy:text-sm cosy:font-medium cosy:rounded-md cosy:text-base-content cosy:bg-base-100 cosy:hover:bg-base-200 focus:cosy:outline-none focus:cosy:ring-2 focus:cosy:ring-offset-2 focus:cosy:ring-base-300">
+        {cancelText}
+      </button>
+    </div>
+
+    <!-- 页脚 -->
+    <slot name="footer" />
+  </div>
+</div>

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

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

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

@@ -5,7 +5,7 @@ import ModuleCustom from './ModuleCustom.astro';
 import BasicSourceCode from './ModuleBasic.astro?raw';
 import GridSourceCode from './ModuleGrid.astro?raw';
 import CustomSourceCode from './ModuleCustom.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { Module, ModuleBasic, ModuleGrid, ModuleCustom };
 

package/dist/src-astro/nav-item/NavItems.astro

@@ -36,7 +36,7 @@ const { navItems, activeLink, linkHeightClass } = Astro.props;
           variant={activeLink === item.href ? 'primary' : 'default'}
           href={item.href}
           class:list={[linkHeightClass]}>
-          {item.label}
+          {item.title}
         </Link>
       </li>
     ))

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

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

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

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