@coffic/cosy-ui 0.8.24 → 0.8.26

package/dist/src-astro/alert/Alert.astro

@@ -27,13 +27,25 @@
  * </Alert>
  * ```
  *
+ * 自定义操作按钮：
+ * ```astro
+ * <Alert type="info">
+ *   这是带自定义操作的提示
+ *   <slot name="action">
+ *     <button>操作</button>
+ *   </slot>
+ * </Alert>
+ * ```
+ *
  * @props
  * @prop {('info'|'success'|'warning'|'error')} [type='info'] - 提示类型，影响颜色和图标
  * @prop {string} [title] - 提示标题，可选
  * @prop {string} [class] - 自定义 CSS 类名
+ * @prop {boolean} [closable=true] - 是否可关闭
  *
  * @slots
  * @slot default - 提示内容
+ * @slot action - 自定义操作按钮，显示在 alert 右侧
  */
 
 // 注意：
@@ -46,15 +58,22 @@ import {
   SuccessIcon,
   WarningIcon,
   ErrorIcon,
+  CloseIcon,
 } from '../../index-astro';
 
 interface Props {
   type?: 'info' | 'success' | 'warning' | 'error';
   title?: string;
   class?: string;
+  closable?: boolean;
 }
 
-const { type = 'info', title, class: className = '' } = Astro.props;
+const {
+  type = 'info',
+  title,
+  class: className = '',
+  closable = true,
+} = Astro.props;
 
 // 根据类型设置样式
 const alertClass = {
@@ -73,12 +92,17 @@ const IconComponent = {
 }[type as 'info' | 'success' | 'warning' | 'error'];
 ---
 
-<div class={`cosy:alert ${alertClass} ${className}`} role="alert">
+<div
+  class={`cosy:alert cosy:w-full cosy:flex ${alertClass} ${className}`}
+  role="alert">
   <div
-    class="cosy:flex cosy:flex-row cosy:items-center cosy:gap-4 cosy:alert-content">
-    <IconComponent />
+    class="cosy:flex cosy:flex-row cosy:items-center cosy:gap-4 cosy:justify-between cosy:w-full">
+    <IconComponent
+      class="cosy:btn cosy:btn-sm cosy:btn-ghost cosy:btn-circle"
+    />
 
-    <div class="cosy:flex cosy:flex-col cosy:items-center cosy:h-full">
+    <div
+      class="cosy:flex cosy:flex-col cosy:items-start cosy:h-full cosy:flex-1">
       {
         title && (
           <h3 class="cosy:font-bold" style="margin-top: 0 !important">
@@ -96,5 +120,21 @@ const IconComponent = {
 
       {!title && <slot />}
     </div>
+
+    <div
+      class="cosy:flex cosy:flex-row cosy:items-center cosy:gap-2"
+      data-role="actions">
+      <slot name="action" />
+
+      {
+        closable && (
+          <button
+            class="cosy:ml-auto cosy:btn cosy:btn-ghost cosy:btn-sm cosy:btn-circle"
+            onclick="this.parentElement.parentElement.style.display = 'none';">
+            <CloseIcon class="cosy:h-5 cosy:w-5" />
+          </button>
+        )
+      }
+    </div>
   </div>
 </div>

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

@@ -1,45 +1,71 @@
 ---
 /**
  * @component ListItem
- * @description 支持加载中进度条的列表项组件。点击后可显示从左到右的进度条，适合异步操作场景。
- * @usage
- * <ListItem loading={loading} duration={1500} on:click={...}>内容</ListItem>
- * @props loading?: boolean 是否加载中
- * @props duration?: number 进度条动画时长（毫秒），默认1500
- * @slots default 默认插槽，列表项内容
+ * @description List item component with loading animations
+ * @props loading?: boolean
+ * @props duration?: number
+ * @props animationType?: string
  */
 import '../../style.ts';
-const { loading = false, duration = 1500 } = Astro.props;
+import ListItemRing from './ListItemRing.astro';
+import ListItemIconLeft from './ListItemIconLeft.astro';
+import ListItemIconRight from './ListItemIconRight.astro';
+import ListItemBreath from './ListItemBreath.astro';
+import ListItemPulse from './ListItemPulse.astro';
+import ListItemGlow from './ListItemGlow.astro';
+
+const {
+  loading = false,
+  duration,
+  animationType = 'ring',
+  ...restProps
+} = Astro.props;
 ---
 
-<li
-  class="cosy:mb-2 cosy:rounded-md cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:bg-base-300 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden"
-  {...Astro.props}>
-  {
-    loading && (
-      <div
-        class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
-        style={`animation-duration: ${duration}ms;`}
-      />
-    )
-  }
-  <div
-    class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3">
-    <slot />
-  </div>
-</li>
-<style scoped>
-  .loading-bar {
-    width: 0%;
-    height: 100%;
-    animation: loading-bar-anim linear forwards;
-  }
-  @keyframes loading-bar-anim {
-    0% {
-      width: 0%;
-    }
-    100% {
-      width: 100%;
-    }
-  }
-</style>
+{
+  animationType === 'ring' && (
+    <ListItemRing loading={loading} duration={duration} {...restProps}>
+      <slot />
+    </ListItemRing>
+  )
+}
+
+{
+  animationType === 'icon-left' && (
+    <ListItemIconLeft loading={loading} duration={duration} {...restProps}>
+      <slot />
+    </ListItemIconLeft>
+  )
+}
+
+{
+  animationType === 'icon-right' && (
+    <ListItemIconRight loading={loading} duration={duration} {...restProps}>
+      <slot />
+    </ListItemIconRight>
+  )
+}
+
+{
+  animationType === 'breath' && (
+    <ListItemBreath loading={loading} duration={duration} {...restProps}>
+      <slot />
+    </ListItemBreath>
+  )
+}
+
+{
+  animationType === 'pulse' && (
+    <ListItemPulse loading={loading} duration={duration} {...restProps}>
+      <slot />
+    </ListItemPulse>
+  )
+}
+
+{
+  animationType === 'glow' && (
+    <ListItemGlow loading={loading} duration={duration} {...restProps}>
+      <slot />
+    </ListItemGlow>
+  )
+}

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

@@ -0,0 +1,60 @@
+---
+/**
+ * @component ListItemBreath
+ * @description ListItem 背景呼吸动画子组件
+ */
+import '../../style.ts';
+const { loading = false, duration } = Astro.props;
+---
+
+<li
+  class:list={[
+    'cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden',
+    loading && !duration ? 'breath-anim' : '',
+  ]}
+  {...Astro.props}>
+  {
+    loading && duration && (
+      <div
+        class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+        style={`animation-duration: ${duration}ms;`}
+      />
+    )
+  }
+  <div
+    class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3">
+    <slot />
+  </div>
+</li>
+
+<style scoped>
+  /* 背景色呼吸动画 */
+  @keyframes breath {
+    0%,
+    100% {
+      background-color: rgb(55 65 81); /* base-300 等效颜色 */
+    }
+    50% {
+      background-color: rgb(139 92 246 / 0.3); /* accent 色彩 */
+    }
+  }
+  .breath-anim {
+    animation: breath 2s ease-in-out infinite;
+    background-color: rgb(55 65 81); /* 确保有初始背景色 */
+  }
+
+  /* 进度条动画 */
+  .loading-bar {
+    width: 0%;
+    height: 100%;
+    animation: loading-bar-anim linear forwards;
+  }
+  @keyframes loading-bar-anim {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+</style>

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

@@ -0,0 +1,65 @@
+---
+/**
+ * @component ListItemGlow
+ * @description ListItem 发光边框动画子组件
+ */
+import '../../style.ts';
+const { loading = false, duration } = Astro.props;
+---
+
+<li
+  class:list={[
+    'cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden',
+    loading && !duration ? 'glow-anim' : '',
+  ]}
+  {...Astro.props}>
+  {
+    loading && duration && (
+      <div
+        class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+        style={`animation-duration: ${duration}ms;`}
+      />
+    )
+  }
+  <div
+    class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3">
+    <slot />
+  </div>
+</li>
+
+<style scoped>
+  /* 发光边框动画 */
+  @keyframes glow {
+    0%,
+    100% {
+      border: 1px solid rgb(139 92 246 / 0.3);
+      box-shadow: 0 0 5px rgb(139 92 246 / 0.3);
+    }
+    50% {
+      border: 1px solid rgb(139 92 246 / 0.8);
+      box-shadow:
+        0 0 20px rgb(139 92 246 / 0.6),
+        0 0 30px rgb(139 92 246 / 0.4),
+        inset 0 0 10px rgb(139 92 246 / 0.2);
+    }
+  }
+  .glow-anim {
+    animation: glow 2s ease-in-out infinite;
+    border: 1px solid rgb(139 92 246 / 0.3); /* 确保有初始边框 */
+  }
+
+  /* 进度条动画 */
+  .loading-bar {
+    width: 0%;
+    height: 100%;
+    animation: loading-bar-anim linear forwards;
+  }
+  @keyframes loading-bar-anim {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+</style>

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

@@ -0,0 +1,53 @@
+---
+/**
+ * @component ListItemIconLeft
+ * @description ListItem 前置图标加载动画子组件
+ */
+import '../../style.ts';
+const { loading = false, duration } = Astro.props;
+---
+
+<li
+  class="cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden"
+  {...Astro.props}>
+  {
+    loading && duration && (
+      <div
+        class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+        style={`animation-duration: ${duration}ms;`}
+      />
+    )
+  }
+  <div
+    class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3">
+    {/* 前置 loading 图标 */}
+    {
+      loading && !duration && (
+        <div
+          class="cosy:flex-shrink-0 cosy:transform-none"
+          style="transform: none !important;">
+          <div class="cosy:loading cosy:loading-spinner cosy:loading-sm cosy:text-accent" />
+        </div>
+      )
+    }
+
+    <slot />
+  </div>
+</li>
+
+<style scoped>
+  /* 进度条动画 */
+  .loading-bar {
+    width: 0%;
+    height: 100%;
+    animation: loading-bar-anim linear forwards;
+  }
+  @keyframes loading-bar-anim {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+</style>

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

@@ -0,0 +1,53 @@
+---
+/**
+ * @component ListItemIconRight
+ * @description ListItem 后置图标加载动画子组件
+ */
+import '../../style.ts';
+const { loading = false, duration } = Astro.props;
+---
+
+<li
+  class="cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden"
+  {...Astro.props}>
+  {
+    loading && duration && (
+      <div
+        class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+        style={`animation-duration: ${duration}ms;`}
+      />
+    )
+  }
+  <div
+    class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3">
+    <slot />
+
+    {/* 后置 loading 图标 */}
+    {
+      loading && !duration && (
+        <div
+          class="cosy:flex-shrink-0 cosy:ml-auto cosy:transform-none"
+          style="transform: none !important;">
+          <div class="cosy:loading cosy:loading-dots cosy:loading-sm cosy:text-accent" />
+        </div>
+      )
+    }
+  </div>
+</li>
+
+<style scoped>
+  /* 进度条动画 */
+  .loading-bar {
+    width: 0%;
+    height: 100%;
+    animation: loading-bar-anim linear forwards;
+  }
+  @keyframes loading-bar-anim {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+</style>

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

@@ -0,0 +1,61 @@
+---
+/**
+ * @component ListItemPulse
+ * @description ListItem 整体脉冲动画子组件
+ */
+import '../../style.ts';
+const { loading = false, duration } = Astro.props;
+---
+
+<li
+  class:list={[
+    'cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden',
+    loading && !duration ? 'pulse-anim' : '',
+  ]}
+  {...Astro.props}>
+  {
+    loading && duration && (
+      <div
+        class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+        style={`animation-duration: ${duration}ms;`}
+      />
+    )
+  }
+  <div
+    class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3">
+    <slot />
+  </div>
+</li>
+
+<style scoped>
+  /* 整体脉冲动画 */
+  @keyframes pulse-scale {
+    0%,
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(1.01);
+      opacity: 0.9;
+    }
+  }
+  .pulse-anim {
+    animation: pulse-scale 1.5s ease-in-out infinite;
+  }
+
+  /* 进度条动画 */
+  .loading-bar {
+    width: 0%;
+    height: 100%;
+    animation: loading-bar-anim linear forwards;
+  }
+  @keyframes loading-bar-anim {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+</style>

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

@@ -0,0 +1,59 @@
+---
+/**
+ * @component ListItemRing
+ * @description ListItem Ring 外环脉冲动画子组件
+ */
+import '../../style.ts';
+const { loading = false, duration } = Astro.props;
+---
+
+<li
+  class:list={[
+    'cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden',
+    loading && !duration ? 'cosy:ring-2 cosy:ring-accent ring-pulse-anim' : '',
+  ]}
+  {...Astro.props}>
+  {
+    loading && duration && (
+      <div
+        class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+        style={`animation-duration: ${duration}ms;`}
+      />
+    )
+  }
+  <div
+    class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3">
+    <slot />
+  </div>
+</li>
+
+<style scoped>
+  /* Ring 外环脉冲动画 */
+  @keyframes ring-pulse {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.02);
+    }
+  }
+  .ring-pulse-anim {
+    animation: ring-pulse 1.5s ease-in-out infinite;
+  }
+
+  /* 进度条动画 */
+  .loading-bar {
+    width: 0%;
+    height: 100%;
+    animation: loading-bar-anim linear forwards;
+  }
+  @keyframes loading-bar-anim {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+</style>

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

@@ -1 +1,7 @@
-export { default as ListItem } from './ListItem.astro'; 
+export { default as ListItem } from './ListItem.astro';
+
+export type ListItemProps = {
+    loading?: boolean;
+    duration?: number; // 进度条动画时长，毫秒
+    animationType?: 'ring' | 'icon-left' | 'icon-right' | 'breath' | 'pulse' | 'glow'; // 无限动画类型，默认 'ring'
+};