@coffic/cosy-ui 0.3.12 → 0.3.33

package/dist/components/base/Button.astro

@@ -62,6 +62,7 @@ interface Props {
   type?: 'button' | 'submit' | 'reset';
   class?: string;
   onClick?: string;
+  formmethod?: string;
 }
 
 const {
@@ -75,27 +76,74 @@ const {
   type = 'button',
   class: className,
   onClick,
+  formmethod,
 } = Astro.props;
+
+// 计算按钮的类名
+const getButtonClasses = () => {
+  const classes = ['cosy:btn'];
+  
+  // Variant classes
+  const variantClasses = {
+    primary: 'cosy:btn-primary',
+    secondary: 'cosy:btn-secondary',
+    accent: 'cosy:btn-accent',
+    info: 'cosy:btn-info',
+    success: 'cosy:btn-success',
+    warning: 'cosy:btn-warning',
+    error: 'cosy:btn-error',
+    ghost: 'cosy:btn-ghost',
+    link: 'cosy:btn-link',
+    outline: 'cosy:btn-outline',
+    neutral: 'cosy:btn-neutral'
+  };
+  
+  // Size classes
+  const sizeClasses = {
+    lg: 'cosy:btn-lg',
+    md: 'cosy:btn-md',
+    sm: 'cosy:btn-sm',
+    xs: 'cosy:btn-xs'
+  };
+  
+  // Shape classes
+  const shapeClasses = {
+    circle: 'cosy:btn-circle',
+    square: 'cosy:btn-square'
+  };
+
+  if (variantClasses[variant]) {
+    classes.push(variantClasses[variant]);
+  }
+  
+  if (sizeClasses[size]) {
+    classes.push(sizeClasses[size]);
+  }
+  
+  if (shape && shapeClasses[shape]) {
+    classes.push(shapeClasses[shape]);
+  }
+  
+  if (wide) classes.push('cosy:btn-wide');
+  if (block) classes.push('cosy:btn-block');
+  if (loading) classes.push('cosy:loading');
+  if (className) classes.push(className);
+  
+  return classes;
+};
+
+const buttonClasses = getButtonClasses();
 ---
 
 <button
-  type={type}
-  class:list={[
-    'button',
-    `button-${variant}`,
-    `button-${size}`,
-    shape && `button-${shape}`,
-    wide && 'button-wide',
-    block && 'button-block',
-    loading && 'button-loading',
-    className
-  ]}
+  type={formmethod === 'dialog' ? 'submit' : type}
+  class:list={buttonClasses}
   disabled={disabled}
   onclick={onClick}
+  formmethod={formmethod}
   data-variant={variant}
 >
-  {loading && <span class="loading-spinner"></span>}
-  <span class="button-content">
+  <span class="cosy:flex cosy:items-center cosy:gap-2">
     <slot name="icon-left" />
     <slot />
     <slot name="icon-right" />

package/dist/components/base/Image.astro

@@ -157,33 +157,72 @@ const isRemoteImage = typeof src === 'string' && (src.startsWith('http') || src.
 // 获取图片源
 const imgSrc = typeof src === 'string' ? src : src.src;
 
+// 对象映射定义所有可能的类名
+const objectFitClasses = {
+  'contain': 'object-contain',
+  'cover': 'object-cover',
+  'fill': 'object-fill',
+  'none': 'object-none',
+  'scale-down': 'object-scale-down'
+};
+
+const roundedClasses = {
+  'none': '',
+  'sm': 'rounded-sm',
+  'md': 'rounded-md',
+  'lg': 'rounded-lg',
+  'xl': 'rounded-xl',
+  '2xl': 'rounded-2xl',
+  '3xl': 'rounded-3xl',
+  'full': 'rounded-full'
+};
+
+const shadowClasses = {
+  'none': '',
+  'sm': 'shadow-sm',
+  'md': 'shadow-md',
+  'lg': 'shadow-lg',
+  'xl': 'shadow-xl',
+  '2xl': 'shadow-2xl'
+};
+
+const hoverClasses = {
+  'none': '',
+  'scale': 'hover:scale-110',
+  'brightness': 'hover:brightness-110',
+  'blur': 'hover:blur-sm'
+};
+
+const transitionClasses = {
+  'none': '',
+  'fade': 'transition-opacity duration-300',
+  'slide': 'transition-transform duration-300',
+  'zoom': 'transition-all duration-300'
+};
+
 // 构建图片类名
 const imgClasses = [
-  // DaisyUI 和 Tailwind 类
   'object-center',
-  objectFit === 'cover' ? 'object-cover' : `object-${objectFit}`,
-  rounded !== 'none' ? `rounded-${rounded}` : '',
-  shadow !== 'none' ? `shadow-${shadow}` : '',
-  hover === 'scale' ? 'hover:scale-110' : '',
-  hover === 'brightness' ? 'hover:brightness-110' : '',
-  hover === 'blur' ? 'hover:blur-sm' : '',
-  transition !== 'none' ? 'transition-all duration-300' : '',
+  objectFitClasses[objectFit] || objectFitClasses['cover'],
+  roundedClasses[rounded],
+  shadowClasses[shadow],
+  hoverClasses[hover],
+  transitionClasses[transition],
   className
 ].filter(Boolean).join(' ');
 
 // 构建占位图类名
 const placeholderClasses = [
   'absolute inset-0',
-  rounded !== 'none' ? `rounded-${rounded}` : '',
-  loadingIndicator === 'skeleton' ? 'animate-pulse bg-base-300' : '',
-  loadingIndicator === 'pulse' ? 'animate-pulse bg-base-300' : '',
+  roundedClasses[rounded],
+  loadingIndicator === 'skeleton' || loadingIndicator === 'pulse' ? 'animate-pulse bg-base-300' : ''
 ].filter(Boolean).join(' ');
 
 // 构建错误占位图类名
 const errorClasses = [
   'absolute inset-0 flex items-center justify-center',
-  rounded !== 'none' ? `rounded-${rounded}` : '',
-  'bg-error bg-opacity-10',
+  roundedClasses[rounded],
+  'bg-error bg-opacity-10'
 ].filter(Boolean).join(' ');
 ---
 
@@ -204,12 +243,12 @@ const errorClasses = [
     <div class={placeholderClasses} data-placeholder>
       {/* 远程图片加载指示器 */}
       {isRemoteImage && loadingIndicator === 'spinner' && (
-        <div class="loading loading-spinner loading-lg text-primary absolute inset-0 m-auto" />
+        <div class="absolute inset-0 m-auto text-primary loading loading-spinner loading-lg" />
       )}
       
       {isRemoteImage && loadingIndicator === 'progress' && (
-        <div class="absolute bottom-0 left-0 right-0">
-          <progress class="progress progress-primary w-full" />
+        <div class="right-0 bottom-0 left-0 absolute">
+          <progress class="w-full progress progress-primary" />
         </div>
       )}
     </div>

package/dist/components/base/Link.astro

@@ -76,6 +76,8 @@ interface Props extends HTMLAttributes<'a'> {
 	variant?: LinkVariant;
 	animation?: LinkAnimation;
 	size?: LinkSize;
+	debug?: boolean;
+	centerText?: boolean;
 }
 
 const {
@@ -87,6 +89,8 @@ const {
 	size = 'md',
 	class: className = '',
 	'class:list': classList,
+	debug = false,
+	centerText = false,
 	...rest
 } = Astro.props;
 
@@ -119,6 +123,16 @@ const classes = [
 	// 自定义类名
 	className
 ];
+
+// 文本居中样式
+if (centerText) {
+	classes.push('cosy:justify-center cosy:text-center');
+}
+
+// 调试样式
+if (debug) {
+	classes.push('cosy:border cosy:border-dashed cosy:border-red-500');
+}
 ---
 
 <a

package/dist/components/containers/Container.astro

@@ -41,6 +41,13 @@
  *   <p>不居中的容器，靠左对齐</p>
  * </Container>
  * ```
+ * 
+ * 带边框的容器：
+ * ```astro
+ * <Container border>
+ *   <p>带有边框的容器</p>
+ * </Container>
+ * ```
  */
 
 import type { HTMLAttributes } from 'astro/types';
@@ -66,6 +73,12 @@ interface Props extends HTMLAttributes<'div'> {
    * @default true
    */
   centered?: boolean;
+
+  /**
+   * 是否显示边框
+   * @default false
+   */
+  border?: boolean;
   
   /**
    * 自定义类名
@@ -82,17 +95,37 @@ const {
   size = 'md',
   padding = 'md',
   centered = true,
+  border = false,
   class: className = '',
   'class:list': classList,
   ...rest
 } = Astro.props;
 
+// 静态类名映射
+const sizeClasses = {
+  'xs': 'container-xs',
+  'sm': 'container-sm',
+  'md': 'container-md',
+  'lg': 'container-lg',
+  'xl': 'container-xl',
+  'full': 'container-full'
+} as const;
+
+const paddingClasses = {
+  'none': 'container-padding-none',
+  'sm': 'container-padding-sm',
+  'md': 'container-padding-md',
+  'lg': 'container-padding-lg',
+  'xl': 'container-padding-xl'
+} as const;
+
 // 构建CSS类名
 const containerClasses = [
   'container',
-  `container-${size}`,
-  `container-padding-${padding}`,
+  sizeClasses[size],
+  paddingClasses[padding],
   centered ? 'container-centered' : '',
+  border ? 'cosy:border cosy:rounded-lg' : '',
   className
 ];
 ---

package/dist/components/containers/Section.astro

@@ -11,15 +11,16 @@
  *   <p>内容将被包裹在一个合适的区块中</p>
  * </Section>
  * 
- * <Section padding="lg" background="gray" centered={true}>
+ * <Section padding="lg" background="gray" centered={true} border={true}>
  *   <h2>自定义区块</h2>
- *   <p>大内边距，灰色背景，内容居中</p>
+ *   <p>大内边距，灰色背景，内容居中，带边框</p>
  * </Section>
  * ```
  */
 
 import type { HTMLAttributes } from 'astro/types';
 import Container from './Container.astro';
+import "../../app.css"
 
 interface Props extends HTMLAttributes<'section'> {
   /**
@@ -51,6 +52,12 @@ interface Props extends HTMLAttributes<'section'> {
    * @default false
    */
   centered?: boolean;
+
+  /**
+   * 是否显示边框
+   * @default false
+   */
+  border?: boolean;
   
   /**
    * 自定义类名
@@ -79,6 +86,7 @@ const {
   container = true,
   containerSize = 'md',
   centered = false,
+  border = false,
   class: className = '',
   'class:list': classList,
   id,
@@ -88,32 +96,33 @@ const {
 
 // 内边距映射
 const paddingClasses = {
-  'none': 'py-0',
-  'sm': 'py-6',
-  'md': 'py-12',
-  'lg': 'py-16',
-  'xl': 'py-24'
+  'none': 'cosy:py-0',
+  'sm': 'cosy:py-6',
+  'md': 'cosy:py-12',
+  'lg': 'cosy:py-16',
+  'xl': 'cosy:py-24'
 };
 
 // 背景颜色映射
 const backgroundClasses = {
-  'transparent': 'bg-transparent',
-  'white': 'bg-white',
-  'gray': 'bg-gray-100',
-  'primary': 'bg-blue-50',
-  'secondary': 'bg-gray-50',
-  'dark': 'bg-gray-900 text-white'
+  'transparent': 'cosy:bg-transparent',
+  'white': 'cosy:bg-base-100',
+  'gray': 'cosy:bg-base-200',
+  'primary': 'cosy:bg-primary/10',
+  'secondary': 'cosy:bg-secondary/10',
+  'dark': 'cosy:bg-neutral cosy:text-neutral-content'
 };
 
 // 构建最终类名
 const sectionClasses = [
   paddingClasses[padding as keyof typeof paddingClasses],
   backgroundClasses[background as keyof typeof backgroundClasses],
+  border ? 'cosy:border cosy:rounded-lg' : '',
   className
 ].join(' ');
 
 // 内容类名
-const contentClasses = centered ? 'text-center' : '';
+const contentClasses = centered ? 'cosy:text-center' : '';
 ---
 
 <section id={id} class:list={[sectionClasses, classList]} style={style} {...rest}>
@@ -127,19 +136,3 @@ const contentClasses = centered ? 'text-center' : '';
     </div>
   )}
 </section>
-
-<style>
-  /* 背景颜色 */
-  .bg-transparent { background-color: transparent; }
-  .bg-white { background-color: #ffffff; }
-  .bg-gray-50 { background-color: #f9fafb; }
-  .bg-gray-100 { background-color: #f3f4f6; }
-  .bg-blue-50 { background-color: #eff6ff; }
-  .bg-gray-900 { background-color: #111827; }
-  
-  /* 文字颜色 */
-  .text-white { color: #ffffff; }
-  
-  /* 文本对齐 */
-  .text-center { text-align: center; }
-</style> 

package/dist/components/display/Modal.astro

@@ -46,6 +46,7 @@
 
 // 导入样式
 import '../../app.css';
+import Button from '../base/Button.astro';
 
 interface Props {
     /**
@@ -75,26 +76,32 @@ const {
 } = Astro.props;
 ---
 
-<dialog id={id} class="modal">
-    <div class:list={["modal-box", className]}>
+<dialog id={id} class="cosy:modal">
+    <div class:list={["cosy:modal-box", className]}>
         {showCloseButton && (
             <form method="dialog">
-                <button class="modal-close-button">✕</button>
+                <Button 
+                    variant="ghost" 
+                    size="sm" 
+                    shape="circle" 
+                    formmethod="dialog"
+                    class="cosy:modal-close-button"
+                >✕</Button>
             </form>
         )}
         
-        {title && <h3 class="modal-title">{title}</h3>}
+        {title && <h3 class="cosy:modal-title">{title}</h3>}
         
-        <div class="modal-content">
+        <div class="cosy:modal-content">
             <slot />
         </div>
 
-        <div class="modal-action">
+        <div class="cosy:modal-action">
             <slot name="actions" />
         </div>
     </div>
 
-    <form method="dialog" class="modal-backdrop">
+    <form method="dialog" class="cosy:modal-backdrop">
         <button>关闭</button>
     </form>
 </dialog>

package/dist/components/icons/MenuIcon.astro

@@ -1,4 +1,7 @@
 ---
+/**
+ * 菜单图标组件
+ */
 interface Props {
   /**
    * 图标的大小
@@ -14,13 +17,9 @@ interface Props {
    * 自定义类名
    */
   class?: string;
-  /**
-   * 插槽名称
-   */
-  slot?: string;
 }
 
-const { size = '24px', color = 'currentColor', class: className = '', slot } = Astro.props;
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
 ---
 
 <svg 
@@ -35,7 +34,5 @@ const { size = '24px', color = 'currentColor', class: className = '', slot } = A
   stroke-linejoin="round"
   class={className}
 >
-  <line x1="3" y1="12" x2="21" y2="12" />
-  <line x1="3" y1="6" x2="21" y2="6" />
-  <line x1="3" y1="18" x2="21" y2="18" />
+  <path d="M4 6h16M4 12h16M4 18h16" />
 </svg>