@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/{button → src-astro/button}/ButtonLinkContainer.astro

@@ -1,5 +1,5 @@
 ---
-import { CodeContainer } from '../index';
+import { CodeContainer } from '../../index-astro';
 import ButtonLink from './ButtonLink.astro';
 import ButtonLinkExternal from './ButtonLinkExternal.astro';
 import ButtonLinkSourceCode from './ButtonLink.astro?raw';
@@ -7,13 +7,13 @@ import ButtonLinkExternalSourceCode from './ButtonLinkExternal.astro?raw';
 ---
 
 <CodeContainer
-	titles={['基础链接', '外部链接', 'Vue']}
-	codes={[ButtonLinkSourceCode, ButtonLinkExternalSourceCode]}>
-	<div id="tab-1">
-		<ButtonLink />
-	</div>
+  titles={['基础链接', '外部链接', 'Vue']}
+  codes={[ButtonLinkSourceCode, ButtonLinkExternalSourceCode]}>
+  <div id="tab-1">
+    <ButtonLink />
+  </div>
 
-	<div id="tab-2">
-		<ButtonLinkExternal />
-	</div>
+  <div id="tab-2">
+    <ButtonLinkExternal />
+  </div>
 </CodeContainer>

package/dist/{button → src-astro/button}/ButtonLinkExternal.astro

@@ -3,6 +3,6 @@ import Button from './Button.astro';
 ---
 
 <Button href="https://example.com" target="_blank" variant="primary">
-	外部链接
-	<span slot="icon-right">↗</span>
+  外部链接
+  <span slot="icon-right">↗</span>
 </Button>

package/dist/src-astro/button/ButtonShapes.astro

@@ -0,0 +1,23 @@
+---
+import Button from './Button.astro';
+---
+
+<div class="cosy:flex cosy:flex-wrap cosy:gap-2">
+  <Button>默认形状</Button>
+
+  <Button shape="circle" variant="primary">
+    <span slot="icon-left">🔄</span>
+  </Button>
+
+  <Button shape="square" variant="success">
+    <span slot="icon-left">✨</span>
+  </Button>
+
+  <Button shape="circle" variant="warning" size="lg">
+    <span slot="icon-left">⚡</span>
+  </Button>
+
+  <Button shape="square" variant="error" size="sm">
+    <span slot="icon-left">❌</span>
+  </Button>
+</div>

package/dist/{button → src-astro/button}/ButtonShapesContainer.astro

@@ -1,5 +1,5 @@
 ---
-import { CodeContainer } from '../index';
+import { CodeContainer } from '../../index-astro';
 import ButtonShapeCircle from './ButtonShapeCircle.astro';
 import ButtonShapeSquare from './ButtonShapeSquare.astro';
 import ButtonShapeDefault from './ButtonShapeDefault.astro';
@@ -9,17 +9,21 @@ import ButtonShapeDefaultSourceCode from './ButtonShapeDefault.astro?raw';
 ---
 
 <CodeContainer
-	titles={['圆形', '方形', '默认']}
-	codes={[ButtonShapeCircleSourceCode, ButtonShapeSquareSourceCode, ButtonShapeDefaultSourceCode]}>
-	<div id="tab-1">
-		<ButtonShapeCircle />
-	</div>
+  titles={['圆形', '方形', '默认']}
+  codes={[
+    ButtonShapeCircleSourceCode,
+    ButtonShapeSquareSourceCode,
+    ButtonShapeDefaultSourceCode,
+  ]}>
+  <div id="tab-1">
+    <ButtonShapeCircle />
+  </div>
 
-	<div id="tab-2">
-		<ButtonShapeSquare />
-	</div>
+  <div id="tab-2">
+    <ButtonShapeSquare />
+  </div>
 
-	<div id="tab-3">
-		<ButtonShapeDefault />
-	</div>
+  <div id="tab-3">
+    <ButtonShapeDefault />
+  </div>
 </CodeContainer>

package/dist/src-astro/button/ButtonSizes.astro

@@ -0,0 +1,15 @@
+---
+import Button from './Button.astro';
+---
+
+<div class="cosy:flex cosy:items-center cosy:gap-2">
+  <Button size="xs">超小按钮</Button>
+  <Button size="sm">小型按钮</Button>
+  <Button size="md">中等按钮</Button>
+  <Button size="lg">大型按钮</Button>
+</div>
+
+<div class="cosy:mt-4 cosy:flex cosy:flex-col cosy:items-center cosy:gap-2">
+  <Button size="lg" wide>宽按钮</Button>
+  <Button block>块级按钮</Button>
+</div>

package/dist/{button → src-astro/button}/ButtonSizesContainer.astro

@@ -1,11 +1,11 @@
 ---
-import { CodeContainer } from '../index';
+import { CodeContainer } from '../../index-astro';
 import ButtonSizes from './ButtonSizes.astro';
 import ButtonSizesSourceCode from './ButtonSizes.astro?raw';
 ---
 
 <CodeContainer codes={[ButtonSizesSourceCode]}>
-	<div id="tab-1">
-		<ButtonSizes />
-	</div>
+  <div id="tab-1">
+    <ButtonSizes />
+  </div>
 </CodeContainer>

package/dist/src-astro/button/ButtonStates.astro

@@ -0,0 +1,12 @@
+---
+import Button from './Button.astro';
+---
+
+<div class="cosy:flex cosy:flex-wrap cosy:gap-2">
+  <Button>正常按钮</Button>
+  <Button disabled>禁用按钮</Button>
+  <Button loading>加载中</Button>
+  <Button variant="primary" loading>加载中</Button>
+  <Button variant="success" disabled>禁用成功按钮</Button>
+  <Button variant="error" loading>处理错误中</Button>
+</div>

package/dist/{button → src-astro/button}/ButtonStatesContainer.astro

@@ -1,11 +1,11 @@
 ---
-import { CodeContainer } from '../index';
+import { CodeContainer } from '../../index-astro';
 import ButtonStates from './ButtonStates.astro';
 import ButtonStatesSourceCode from './ButtonStates.astro?raw';
 ---
 
 <CodeContainer codes={[ButtonStatesSourceCode]}>
-	<div id="tab-1">
-		<ButtonStates />
-	</div>
+  <div id="tab-1">
+    <ButtonStates />
+  </div>
 </CodeContainer>

package/dist/src-astro/button/ButtonVariants.astro

@@ -0,0 +1,14 @@
+---
+import Button from './Button.astro';
+---
+
+<div class="cosy:flex cosy:flex-wrap cosy:gap-2">
+  <Button variant="info">信息按钮</Button>
+  <Button variant="success">成功按钮</Button>
+  <Button variant="warning">警告按钮</Button>
+  <Button variant="error">错误按钮</Button>
+  <Button variant="ghost">幽灵按钮</Button>
+  <Button variant="link">链接按钮</Button>
+  <Button variant="outline">描边按钮</Button>
+  <Button variant="neutral">中性按钮</Button>
+</div>

package/dist/{button → src-astro/button}/ButtonVariantsContainer.astro

@@ -1,5 +1,5 @@
 ---
-import { CodeContainer } from '../index';
+import { CodeContainer } from '../../index-astro';
 import ButtonInfo from './ButtonInfo.astro';
 import ButtonSuccess from './ButtonSuccess.astro';
 import ButtonWarning from './ButtonWarning.astro';
@@ -19,46 +19,55 @@ import ButtonNeutralSourceCode from './ButtonNeutral.astro?raw';
 ---
 
 <CodeContainer
-	titles={['Info', 'Success', 'Warning', 'Error', 'Ghost', 'Link', 'Outline', 'Neutral']}
-	codes={[
-		ButtonInfoSourceCode,
-		ButtonSuccessSourceCode,
-		ButtonWarningSourceCode,
-		ButtonErrorSourceCode,
-		ButtonGhostSourceCode,
-		ButtonLinkSourceCode,
-		ButtonOutlineSourceCode,
-		ButtonNeutralSourceCode,
-	]}>
-	<div id="tab-1">
-		<ButtonInfo />
-	</div>
+  titles={[
+    'Info',
+    'Success',
+    'Warning',
+    'Error',
+    'Ghost',
+    'Link',
+    'Outline',
+    'Neutral',
+  ]}
+  codes={[
+    ButtonInfoSourceCode,
+    ButtonSuccessSourceCode,
+    ButtonWarningSourceCode,
+    ButtonErrorSourceCode,
+    ButtonGhostSourceCode,
+    ButtonLinkSourceCode,
+    ButtonOutlineSourceCode,
+    ButtonNeutralSourceCode,
+  ]}>
+  <div id="tab-1">
+    <ButtonInfo />
+  </div>
 
-	<div id="tab-2">
-		<ButtonSuccess />
-	</div>
+  <div id="tab-2">
+    <ButtonSuccess />
+  </div>
 
-	<div id="tab-3">
-		<ButtonWarning />
-	</div>
+  <div id="tab-3">
+    <ButtonWarning />
+  </div>
 
-	<div id="tab-4">
-		<ButtonError />
-	</div>
+  <div id="tab-4">
+    <ButtonError />
+  </div>
 
-	<div id="tab-5">
-		<ButtonGhost />
-	</div>
+  <div id="tab-5">
+    <ButtonGhost />
+  </div>
 
-	<div id="tab-6">
-		<ButtonLink />
-	</div>
+  <div id="tab-6">
+    <ButtonLink />
+  </div>
 
-	<div id="tab-7">
-		<ButtonOutline />
-	</div>
+  <div id="tab-7">
+    <ButtonOutline />
+  </div>
 
-	<div id="tab-8">
-		<ButtonNeutral />
-	</div>
+  <div id="tab-8">
+    <ButtonNeutral />
+  </div>
 </CodeContainer>

package/dist/{button → src-astro/button}/ButtonWidth.astro

@@ -3,6 +3,6 @@ import Button from './Button.astro';
 ---
 
 <div class="cosy:flex cosy:flex-col cosy:gap-2">
-	<Button wide>宽按钮</Button>
-	<Button block>块级按钮</Button>
+  <Button wide>宽按钮</Button>
+  <Button block>块级按钮</Button>
 </div>

package/dist/{button → src-astro/button}/ButtonWidthContainer.astro

@@ -1,5 +1,5 @@
 ---
-import { CodeContainer } from '../index';
+import { CodeContainer } from '../../index-astro';
 import ButtonWide from './ButtonWide.astro';
 import ButtonBlock from './ButtonBlock.astro';
 import ButtonWideSourceCode from './ButtonWide.astro?raw';
@@ -7,13 +7,13 @@ import ButtonBlockSourceCode from './ButtonBlock.astro?raw';
 ---
 
 <CodeContainer
-	titles={['宽按钮', '块级按钮']}
-	codes={[ButtonWideSourceCode, ButtonBlockSourceCode]}>
-	<div id="tab-1">
-		<ButtonWide />
-	</div>
+  titles={['宽按钮', '块级按钮']}
+  codes={[ButtonWideSourceCode, ButtonBlockSourceCode]}>
+  <div id="tab-1">
+    <ButtonWide />
+  </div>
 
-	<div id="tab-2">
-		<ButtonBlock />
-	</div>
+  <div id="tab-2">
+    <ButtonBlock />
+  </div>
 </CodeContainer>

package/dist/src-astro/button/ButtonWithIcons.astro

@@ -0,0 +1,25 @@
+---
+import Button from './Button.astro';
+---
+
+<div class="cosy:flex cosy:flex-wrap cosy:gap-2">
+  <Button variant="primary">
+    <span slot="icon-left">👈</span>
+    返回
+  </Button>
+
+  <Button variant="success">
+    确认
+    <span slot="icon-right">✅</span>
+  </Button>
+
+  <Button variant="info">
+    <span slot="icon-left">💾</span>
+    保存
+    <span slot="icon-right">📁</span>
+  </Button>
+
+  <Button variant="warning" shape="circle">
+    <span slot="icon-left">⚠️</span>
+  </Button>
+</div>

package/dist/{button → src-astro/button}/ButtonWithIconsContainer.astro

@@ -1,5 +1,5 @@
 ---
-import { CodeContainer } from '../index';
+import { CodeContainer } from '../../index-astro';
 import ButtonIconLeft from './ButtonIconLeft.astro';
 import ButtonIconRight from './ButtonIconRight.astro';
 import ButtonIconBoth from './ButtonIconBoth.astro';
@@ -9,17 +9,21 @@ import ButtonIconBothSourceCode from './ButtonIconBoth.astro?raw';
 ---
 
 <CodeContainer
-	titles={['左侧图标', '右侧图标', '两侧图标']}
-	codes={[ButtonIconLeftSourceCode, ButtonIconRightSourceCode, ButtonIconBothSourceCode]}>
-	<div id="tab-1">
-		<ButtonIconLeft />
-	</div>
+  titles={['左侧图标', '右侧图标', '两侧图标']}
+  codes={[
+    ButtonIconLeftSourceCode,
+    ButtonIconRightSourceCode,
+    ButtonIconBothSourceCode,
+  ]}>
+  <div id="tab-1">
+    <ButtonIconLeft />
+  </div>
 
-	<div id="tab-2">
-		<ButtonIconRight />
-	</div>
+  <div id="tab-2">
+    <ButtonIconRight />
+  </div>
 
-	<div id="tab-3">
-		<ButtonIconBoth />
-	</div>
+  <div id="tab-3">
+    <ButtonIconBoth />
+  </div>
 </CodeContainer>

package/dist/{button → src-astro/button}/index_astro.ts

@@ -25,38 +25,36 @@ import ButtonLinkExternal from './ButtonLinkExternal.astro';
 import ButtonOutline from './ButtonOutline.astro';
 import ButtonNeutral from './ButtonNeutral.astro';
 
-export {
-	Button
-};
+export { Button };
 
 export const ButtonPackage = {
-	Button,
-	ButtonWide,
-	ButtonBlock,
-	ButtonIconLeft,
-	ButtonIconRight,
-	ButtonIconBoth,
-	ButtonShapeCircle,
-	ButtonShapeSquare,
-	ButtonShapeDefault,
-	ButtonInfo,
-	ButtonSuccess,
-	ButtonWarning,
-	ButtonError,
-	ButtonGhost,
-	ButtonLink,
-	ButtonLinkExternal,
-	ButtonOutline,
-	ButtonNeutral,
+  Button,
+  ButtonWide,
+  ButtonBlock,
+  ButtonIconLeft,
+  ButtonIconRight,
+  ButtonIconBoth,
+  ButtonShapeCircle,
+  ButtonShapeSquare,
+  ButtonShapeDefault,
+  ButtonInfo,
+  ButtonSuccess,
+  ButtonWarning,
+  ButtonError,
+  ButtonGhost,
+  ButtonLink,
+  ButtonLinkExternal,
+  ButtonOutline,
+  ButtonNeutral,
 
-	ButtonContainers: {
-		Basic: ButtonBasicContainer,
-		Shapes: ButtonShapesContainer,
-		Sizes: ButtonSizesContainer,
-		States: ButtonStatesContainer,
-		WithIcons: ButtonWithIconsContainer,
-		Width: ButtonWidthContainer,
-		Variants: ButtonVariantsContainer,
-		Link: ButtonLinkContainer,
-	}
+  ButtonContainers: {
+    Basic: ButtonBasicContainer,
+    Shapes: ButtonShapesContainer,
+    Sizes: ButtonSizesContainer,
+    States: ButtonStatesContainer,
+    WithIcons: ButtonWithIconsContainer,
+    Width: ButtonWidthContainer,
+    Variants: ButtonVariantsContainer,
+    Link: ButtonLinkContainer,
+  },
 };

package/dist/{card → src-astro/card}/Card.astro

@@ -57,7 +57,7 @@
  * ```
  *
  * @props
- * @prop {string} [title] - 卡片标题
+ * @prop {string} title - 卡片标题
  * @prop {string} [subtitle] - 卡片副标题或描述
  * @prop {string} [imageUrl] - 卡片顶部图片的URL
  * @prop {string} [href] - 如果提供，卡片将变成可点击的链接
@@ -68,24 +68,84 @@
  * @slot default - 卡片的主要内容区域
  */
 
-import '../style.ts';
+import '../../style.ts';
 
 interface Props {
-	title: string;
-	subtitle?: string;
-	class?: string;
+  title: string;
+  subtitle?: string;
+  imageUrl?: string;
+  href?: string;
+  compact?: boolean;
+  class?: string;
 }
 
-const { title, subtitle, class: className } = Astro.props;
+const {
+  title,
+  subtitle,
+  imageUrl,
+  href,
+  compact,
+  class: className = '',
+} = Astro.props;
+
+// 构建卡片样式类
+const cardClasses = [
+  'cosy:card',
+  'cosy:w-full',
+  'cosy:bg-base-100',
+  'cosy:shadow-xl',
+  'cosy:hover:shadow-2xl',
+  'cosy:transition-all',
+  'cosy:duration-300',
+  'cosy:ease-in-out',
+  compact ? 'cosy:card-compact' : '',
+  href
+    ? 'cosy:cursor-pointer cosy:hover:scale-105 cosy:transform cosy:no-underline'
+    : '',
+  className,
+]
+  .filter(Boolean)
+  .join(' ');
+
+// 内容区域的padding类
+const contentPadding = compact ? 'cosy:p-4' : 'cosy:p-6';
+
+// 如果是链接卡片，使用a标签，否则使用article标签
+const Tag = href ? 'a' : 'article';
 ---
 
-<article class={`cosy-card ${className || ''}`}>
-	<header class="cosy-card__header">
-		<h3 class="cosy-card__title">{title}</h3>
-		{subtitle && <p class="cosy-card__subtitle">{subtitle}</p>}
-	</header>
+<Tag class={cardClasses} href={href} {...href && { target: '_self' }}>
+  {
+    imageUrl && (
+      <figure class="not-prose cosy:m-0 cosy:p-0">
+        <img
+          src={imageUrl}
+          alt={title}
+          class="cosy:w-full cosy:h-48 cosy:object-cover cosy:rounded-t-lg"
+        />
+      </figure>
+    )
+  }
+
+  <div class={`cosy:card-body ${contentPadding}`}>
+    <h2 class="cosy:card-title cosy:text-xl cosy:font-bold">
+      {title}
+    </h2>
+
+    {
+      subtitle && (
+        <p class="cosy:text-base-content/70 cosy:text-sm cosy:leading-relaxed">
+          {subtitle}
+        </p>
+      )
+    }
 
-	<div class="cosy-card__content">
-		<slot />
-	</div>
-</article>
+    {
+      Astro.slots.has('default') && (
+        <div class="cosy:mt-4">
+          <slot />
+        </div>
+      )
+    }
+  </div>
+</Tag>

package/dist/src-astro/card/CardCourse.astro

@@ -0,0 +1,34 @@
+---
+import { Image } from 'astro:assets';
+import bookCover from '../assets/book.png';
+
+interface Props {
+  title: string;
+  link: string;
+}
+
+const { title, link } = Astro.props;
+---
+
+<div>
+  <a href={link} class="justify-center flex no-underline text-base-content">
+    <div class="w-56 h-80">
+      <div
+        class="bg-gradient-to-br w-full h-full from-accent/50 to-primary/30 rounded-3xl shadow-lg backdrop-blur-sm"
+      >
+        <div
+          class="bg-base-100/60 w-full h-full rounded-3xl border border-base-content/30 hover:scale-105 hover:shadow-2xl transform duration-200 backdrop-filter backdrop-blur-sm"
+        >
+          <div class="card-body p-1 h-full">
+            <Image src={bookCover} alt={title} class="h-3/5 w-full" />
+            <div>
+              <h2 class="text-lg text-center font-medium">
+                {title}
+              </h2>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </a>
+</div>

package/dist/src-astro/card/ECardBasic.astro

@@ -0,0 +1,13 @@
+---
+/**
+ * @component Card.Basic
+ *
+ * @description
+ * 基础Card组件示例，展示最简单的卡片用法。
+ */
+import { Card } from '../../index-astro';
+---
+
+<Card title="基础卡片">
+  这是一个基础的卡片内容，展示了Card组件的最简单用法。
+</Card>

package/dist/src-astro/card/ECardBasicContainer.astro

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import CardBasic from './ECardBasic.astro';
+import CardBasicSourceCode from './ECardBasic.astro?raw';
+---
+
+<CodeContainer codes={[CardBasicSourceCode]}>
+  <div id="tab-1">
+    <CardBasic />
+  </div>
+</CodeContainer>

package/dist/src-astro/card/ECardClickable.astro

@@ -0,0 +1,16 @@
+---
+/**
+ * @component Card.Clickable
+ *
+ * @description
+ * 可点击的Card组件示例，展示如何使用href属性创建链接卡片。
+ */
+import { Card } from '../../index-astro';
+---
+
+<Card
+  title="可点击的卡片"
+  subtitle="点击整个卡片区域可以跳转到指定链接"
+  href="#">
+  这是一个可点击的卡片，鼠标悬停时会有缩放效果，点击可以跳转到指定页面。
+</Card>

package/dist/src-astro/card/ECardClickableContainer.astro

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import CardClickable from './ECardClickable.astro';
+import CardClickableSourceCode from './ECardClickable.astro?raw';
+---
+
+<CodeContainer codes={[CardClickableSourceCode]}>
+  <div id="tab-1">
+    <CardClickable />
+  </div>
+</CodeContainer>