@coffic/cosy-ui 0.8.23 → 0.8.25

package/dist/index-astro.ts

@@ -46,6 +46,7 @@ export * from './src-astro/theme-switcher';
 export * from './src-astro/toc';
 export * from './src-astro/toast';
 export * from './src-astro/confirm-dialog';
+export * from './src-astro/list';
 
 // 类型定义 (按字母顺序)
 export * from './src-astro/types/article';

package/dist/src-astro/grid/Grid.astro

@@ -114,29 +114,283 @@ const {
   ...rest
 } = Astro.props;
 
-// 处理响应式列数
+// 处理响应式列数（所有 class 必须静态字符串，不能拼接）
 const getColsClasses = (cols: ResponsiveValue<number>) => {
+  // 单一数字
   if (typeof cols === 'number') {
-    return `cosy:grid-cols-${cols}`;
+    switch (cols) {
+      case 1:
+        return 'cosy:grid-cols-1';
+      case 2:
+        return 'cosy:grid-cols-2';
+      case 3:
+        return 'cosy:grid-cols-3';
+      case 4:
+        return 'cosy:grid-cols-4';
+      case 5:
+        return 'cosy:grid-cols-5';
+      case 6:
+        return 'cosy:grid-cols-6';
+      case 7:
+        return 'cosy:grid-cols-7';
+      case 8:
+        return 'cosy:grid-cols-8';
+      case 9:
+        return 'cosy:grid-cols-9';
+      case 10:
+        return 'cosy:grid-cols-10';
+      case 11:
+        return 'cosy:grid-cols-11';
+      case 12:
+        return 'cosy:grid-cols-12';
+      default:
+        return '';
+    }
   }
-
-  const breakpoints: Record<Breakpoint, string> = {
-    base: '',
-    sm: 'sm:',
-    md: 'md:',
-    lg: 'lg:',
-    xl: 'xl:',
-    '2xl': '2xl:',
-  };
-
-  return Object.entries(cols)
-    .map(([breakpoint, value]) => {
-      if (breakpoint === 'base') {
-        return `cosy:grid-cols-${value}`;
-      }
-      return `cosy:${breakpoints[breakpoint as Breakpoint]}grid-cols-${value}`;
-    })
-    .join(' ');
+  // 响应式对象
+  let result: string[] = [];
+  const responsive = cols as any;
+  if (responsive.base) {
+    switch (responsive.base) {
+      case 1:
+        result.push('cosy:grid-cols-1');
+        break;
+      case 2:
+        result.push('cosy:grid-cols-2');
+        break;
+      case 3:
+        result.push('cosy:grid-cols-3');
+        break;
+      case 4:
+        result.push('cosy:grid-cols-4');
+        break;
+      case 5:
+        result.push('cosy:grid-cols-5');
+        break;
+      case 6:
+        result.push('cosy:grid-cols-6');
+        break;
+      case 7:
+        result.push('cosy:grid-cols-7');
+        break;
+      case 8:
+        result.push('cosy:grid-cols-8');
+        break;
+      case 9:
+        result.push('cosy:grid-cols-9');
+        break;
+      case 10:
+        result.push('cosy:grid-cols-10');
+        break;
+      case 11:
+        result.push('cosy:grid-cols-11');
+        break;
+      case 12:
+        result.push('cosy:grid-cols-12');
+        break;
+    }
+  }
+  if (responsive.sm) {
+    switch (responsive.sm) {
+      case 1:
+        result.push('cosy:sm:grid-cols-1');
+        break;
+      case 2:
+        result.push('cosy:sm:grid-cols-2');
+        break;
+      case 3:
+        result.push('cosy:sm:grid-cols-3');
+        break;
+      case 4:
+        result.push('cosy:sm:grid-cols-4');
+        break;
+      case 5:
+        result.push('cosy:sm:grid-cols-5');
+        break;
+      case 6:
+        result.push('cosy:sm:grid-cols-6');
+        break;
+      case 7:
+        result.push('cosy:sm:grid-cols-7');
+        break;
+      case 8:
+        result.push('cosy:sm:grid-cols-8');
+        break;
+      case 9:
+        result.push('cosy:sm:grid-cols-9');
+        break;
+      case 10:
+        result.push('cosy:sm:grid-cols-10');
+        break;
+      case 11:
+        result.push('cosy:sm:grid-cols-11');
+        break;
+      case 12:
+        result.push('cosy:sm:grid-cols-12');
+        break;
+    }
+  }
+  if (responsive.md) {
+    switch (responsive.md) {
+      case 1:
+        result.push('cosy:md:grid-cols-1');
+        break;
+      case 2:
+        result.push('cosy:md:grid-cols-2');
+        break;
+      case 3:
+        result.push('cosy:md:grid-cols-3');
+        break;
+      case 4:
+        result.push('cosy:md:grid-cols-4');
+        break;
+      case 5:
+        result.push('cosy:md:grid-cols-5');
+        break;
+      case 6:
+        result.push('cosy:md:grid-cols-6');
+        break;
+      case 7:
+        result.push('cosy:md:grid-cols-7');
+        break;
+      case 8:
+        result.push('cosy:md:grid-cols-8');
+        break;
+      case 9:
+        result.push('cosy:md:grid-cols-9');
+        break;
+      case 10:
+        result.push('cosy:md:grid-cols-10');
+        break;
+      case 11:
+        result.push('cosy:md:grid-cols-11');
+        break;
+      case 12:
+        result.push('cosy:md:grid-cols-12');
+        break;
+    }
+  }
+  if (responsive.lg) {
+    switch (responsive.lg) {
+      case 1:
+        result.push('cosy:lg:grid-cols-1');
+        break;
+      case 2:
+        result.push('cosy:lg:grid-cols-2');
+        break;
+      case 3:
+        result.push('cosy:lg:grid-cols-3');
+        break;
+      case 4:
+        result.push('cosy:lg:grid-cols-4');
+        break;
+      case 5:
+        result.push('cosy:lg:grid-cols-5');
+        break;
+      case 6:
+        result.push('cosy:lg:grid-cols-6');
+        break;
+      case 7:
+        result.push('cosy:lg:grid-cols-7');
+        break;
+      case 8:
+        result.push('cosy:lg:grid-cols-8');
+        break;
+      case 9:
+        result.push('cosy:lg:grid-cols-9');
+        break;
+      case 10:
+        result.push('cosy:lg:grid-cols-10');
+        break;
+      case 11:
+        result.push('cosy:lg:grid-cols-11');
+        break;
+      case 12:
+        result.push('cosy:lg:grid-cols-12');
+        break;
+    }
+  }
+  if (responsive.xl) {
+    switch (responsive.xl) {
+      case 1:
+        result.push('cosy:xl:grid-cols-1');
+        break;
+      case 2:
+        result.push('cosy:xl:grid-cols-2');
+        break;
+      case 3:
+        result.push('cosy:xl:grid-cols-3');
+        break;
+      case 4:
+        result.push('cosy:xl:grid-cols-4');
+        break;
+      case 5:
+        result.push('cosy:xl:grid-cols-5');
+        break;
+      case 6:
+        result.push('cosy:xl:grid-cols-6');
+        break;
+      case 7:
+        result.push('cosy:xl:grid-cols-7');
+        break;
+      case 8:
+        result.push('cosy:xl:grid-cols-8');
+        break;
+      case 9:
+        result.push('cosy:xl:grid-cols-9');
+        break;
+      case 10:
+        result.push('cosy:xl:grid-cols-10');
+        break;
+      case 11:
+        result.push('cosy:xl:grid-cols-11');
+        break;
+      case 12:
+        result.push('cosy:xl:grid-cols-12');
+        break;
+    }
+  }
+  if (responsive['2xl']) {
+    switch (responsive['2xl']) {
+      case 1:
+        result.push('cosy:2xl:grid-cols-1');
+        break;
+      case 2:
+        result.push('cosy:2xl:grid-cols-2');
+        break;
+      case 3:
+        result.push('cosy:2xl:grid-cols-3');
+        break;
+      case 4:
+        result.push('cosy:2xl:grid-cols-4');
+        break;
+      case 5:
+        result.push('cosy:2xl:grid-cols-5');
+        break;
+      case 6:
+        result.push('cosy:2xl:grid-cols-6');
+        break;
+      case 7:
+        result.push('cosy:2xl:grid-cols-7');
+        break;
+      case 8:
+        result.push('cosy:2xl:grid-cols-8');
+        break;
+      case 9:
+        result.push('cosy:2xl:grid-cols-9');
+        break;
+      case 10:
+        result.push('cosy:2xl:grid-cols-10');
+        break;
+      case 11:
+        result.push('cosy:2xl:grid-cols-11');
+        break;
+      case 12:
+        result.push('cosy:2xl:grid-cols-12');
+        break;
+    }
+  }
+  return result.join(' ');
 };
 
 // 间距映射

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

@@ -0,0 +1,71 @@
+---
+/**
+ * @component ListItem
+ * @description List item component with loading animations
+ * @props loading?: boolean
+ * @props duration?: number
+ * @props animationType?: string
+ */
+import '../../style.ts';
+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;
+---
+
+{
+  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>