@coffic/cosy-ui 0.7.4 → 0.8.6

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

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

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

@@ -0,0 +1,8 @@
+---
+import Button from './Button.astro';
+---
+
+<Button href="https://example.com" target="_blank" variant="primary">
+  外部链接
+  <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/src-astro/button/ButtonShapesContainer.astro

@@ -0,0 +1,29 @@
+---
+import { CodeContainer } from '../../index-astro';
+import ButtonShapeCircle from './ButtonShapeCircle.astro';
+import ButtonShapeSquare from './ButtonShapeSquare.astro';
+import ButtonShapeDefault from './ButtonShapeDefault.astro';
+import ButtonShapeCircleSourceCode from './ButtonShapeCircle.astro?raw';
+import ButtonShapeSquareSourceCode from './ButtonShapeSquare.astro?raw';
+import ButtonShapeDefaultSourceCode from './ButtonShapeDefault.astro?raw';
+---
+
+<CodeContainer
+  titles={['圆形', '方形', '默认']}
+  codes={[
+    ButtonShapeCircleSourceCode,
+    ButtonShapeSquareSourceCode,
+    ButtonShapeDefaultSourceCode,
+  ]}>
+  <div id="tab-1">
+    <ButtonShapeCircle />
+  </div>
+
+  <div id="tab-2">
+    <ButtonShapeSquare />
+  </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/src-astro/button/ButtonSizesContainer.astro

@@ -0,0 +1,11 @@
+---
+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>
+</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/src-astro/button/ButtonStatesContainer.astro

@@ -0,0 +1,11 @@
+---
+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>
+</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/src-astro/button/ButtonVariantsContainer.astro

@@ -0,0 +1,73 @@
+---
+import { CodeContainer } from '../../index-astro';
+import ButtonInfo from './ButtonInfo.astro';
+import ButtonSuccess from './ButtonSuccess.astro';
+import ButtonWarning from './ButtonWarning.astro';
+import ButtonError from './ButtonError.astro';
+import ButtonGhost from './ButtonGhost.astro';
+import ButtonLink from './ButtonLink.astro';
+import ButtonOutline from './ButtonOutline.astro';
+import ButtonNeutral from './ButtonNeutral.astro';
+import ButtonInfoSourceCode from './ButtonInfo.astro?raw';
+import ButtonSuccessSourceCode from './ButtonSuccess.astro?raw';
+import ButtonWarningSourceCode from './ButtonWarning.astro?raw';
+import ButtonErrorSourceCode from './ButtonError.astro?raw';
+import ButtonGhostSourceCode from './ButtonGhost.astro?raw';
+import ButtonLinkSourceCode from './ButtonLink.astro?raw';
+import ButtonOutlineSourceCode from './ButtonOutline.astro?raw';
+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>
+
+  <div id="tab-2">
+    <ButtonSuccess />
+  </div>
+
+  <div id="tab-3">
+    <ButtonWarning />
+  </div>
+
+  <div id="tab-4">
+    <ButtonError />
+  </div>
+
+  <div id="tab-5">
+    <ButtonGhost />
+  </div>
+
+  <div id="tab-6">
+    <ButtonLink />
+  </div>
+
+  <div id="tab-7">
+    <ButtonOutline />
+  </div>
+
+  <div id="tab-8">
+    <ButtonNeutral />
+  </div>
+</CodeContainer>

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

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

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

@@ -0,0 +1,19 @@
+---
+import { CodeContainer } from '../../index-astro';
+import ButtonWide from './ButtonWide.astro';
+import ButtonBlock from './ButtonBlock.astro';
+import ButtonWideSourceCode from './ButtonWide.astro?raw';
+import ButtonBlockSourceCode from './ButtonBlock.astro?raw';
+---
+
+<CodeContainer
+  titles={['宽按钮', '块级按钮']}
+  codes={[ButtonWideSourceCode, ButtonBlockSourceCode]}>
+  <div id="tab-1">
+    <ButtonWide />
+  </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/src-astro/button/ButtonWithIconsContainer.astro

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

package/dist/src-astro/button/index_astro.ts

@@ -0,0 +1,60 @@
+import Button from './Button.astro';
+import ButtonBasicContainer from './ButtonBasicContainer.astro';
+import ButtonShapesContainer from './ButtonShapesContainer.astro';
+import ButtonSizesContainer from './ButtonSizesContainer.astro';
+import ButtonStatesContainer from './ButtonStatesContainer.astro';
+import ButtonWithIconsContainer from './ButtonWithIconsContainer.astro';
+import ButtonWidthContainer from './ButtonWidthContainer.astro';
+import ButtonVariantsContainer from './ButtonVariantsContainer.astro';
+import ButtonLinkContainer from './ButtonLinkContainer.astro';
+import ButtonWide from './ButtonWide.astro';
+import ButtonBlock from './ButtonBlock.astro';
+import ButtonIconLeft from './ButtonIconLeft.astro';
+import ButtonIconRight from './ButtonIconRight.astro';
+import ButtonIconBoth from './ButtonIconBoth.astro';
+import ButtonShapeCircle from './ButtonShapeCircle.astro';
+import ButtonShapeSquare from './ButtonShapeSquare.astro';
+import ButtonShapeDefault from './ButtonShapeDefault.astro';
+import ButtonInfo from './ButtonInfo.astro';
+import ButtonSuccess from './ButtonSuccess.astro';
+import ButtonWarning from './ButtonWarning.astro';
+import ButtonError from './ButtonError.astro';
+import ButtonGhost from './ButtonGhost.astro';
+import ButtonLink from './ButtonLink.astro';
+import ButtonLinkExternal from './ButtonLinkExternal.astro';
+import ButtonOutline from './ButtonOutline.astro';
+import ButtonNeutral from './ButtonNeutral.astro';
+
+export { Button };
+
+export const ButtonPackage = {
+  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,
+  },
+};

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

@@ -0,0 +1,151 @@
+---
+/**
+ * @component Card
+ *
+ * @description
+ * Card 组件用于在页面中展示相关内容的容器，通常包含标题、描述和可选的图片。
+ * 组件设计简洁大方，具有平滑的动画效果和交互反馈，适合展示产品、文章或功能介绍等内容。
+ *
+ * @design
+ * 设计理念：
+ * 1. 视觉层次感 - 通过阴影、悬停效果和微妙的动画创造深度感
+ * 2. 内容聚焦 - 简洁的布局让用户关注卡片内容
+ * 3. 交互反馈 - 悬停和点击时提供明确的视觉反馈
+ * 4. 适应性强 - 响应式设计，适应不同屏幕尺寸
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Card
+ *   title="卡片标题"
+ *   subtitle="卡片描述文本"
+ * >
+ *   卡片内容
+ * </Card>
+ * ```
+ *
+ * 带图片的卡片：
+ * ```astro
+ * <Card
+ *   title="产品名称"
+ *   subtitle="产品描述"
+ *   imageUrl="/path/to/image.jpg"
+ * >
+ *   其他产品信息
+ * </Card>
+ * ```
+ *
+ * 可点击的卡片（链接）：
+ * ```astro
+ * <Card
+ *   title="文章标题"
+ *   subtitle="文章摘要"
+ *   imageUrl="/path/to/image.jpg"
+ *   href="/articles/article-slug"
+ * />
+ * ```
+ *
+ * 紧凑模式：
+ * ```astro
+ * <Card
+ *   title="紧凑卡片"
+ *   subtitle="更小的内边距"
+ *   compact
+ * >
+ *   适合在空间有限的情况下使用
+ * </Card>
+ * ```
+ *
+ * @props
+ * @prop {string} title - 卡片标题
+ * @prop {string} [subtitle] - 卡片副标题或描述
+ * @prop {string} [imageUrl] - 卡片顶部图片的URL
+ * @prop {string} [href] - 如果提供，卡片将变成可点击的链接
+ * @prop {boolean} [compact] - 是否使用紧凑模式
+ * @prop {string} [class] - 自定义CSS类，可用于覆盖默认样式
+ *
+ * @slots
+ * @slot default - 卡片的主要内容区域
+ */
+
+import '../../style.ts';
+
+interface Props {
+  title: string;
+  subtitle?: string;
+  imageUrl?: string;
+  href?: string;
+  compact?: boolean;
+  class?: string;
+}
+
+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';
+---
+
+<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>
+      )
+    }
+
+    {
+      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>

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

@@ -0,0 +1,13 @@
+---
+/**
+ * @component Card.Compact
+ *
+ * @description
+ * 紧凑模式的Card组件示例，展示如何使用compact属性。
+ */
+import { Card } from '../../index-astro';
+---
+
+<Card title="紧凑卡片" subtitle="使用compact模式可以减少内边距" compact>
+  这是一个紧凑模式的卡片，适合在空间有限的情况下使用。
+</Card>

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

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

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

@@ -0,0 +1,17 @@
+---
+/**
+ * @component Card.CustomStyle
+ *
+ * @description
+ * 展示如何使用class属性自定义Card组件的样式。
+ */
+import '../../style.ts';
+import { Card } from '../../index-astro';
+---
+
+<Card
+  title="自定义样式卡片"
+  subtitle="这个卡片使用了自定义的背景色和边框"
+  class="cosy:bg-gradient-to-r cosy:from-blue-50 cosy:to-indigo-100 cosy:border-2 cosy:border-blue-200">
+  这是一个自定义样式的卡片，展示了如何通过class属性来覆盖默认样式。
+</Card>

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

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