@coffic/cosy-ui 0.6.30 → 0.6.34

package/dist/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/button/ButtonNeutral.astro

@@ -0,0 +1,5 @@
+---
+import Button from './Button.astro';
+---
+
+<Button variant="neutral">中性按钮</Button>

package/dist/button/ButtonOutline.astro

@@ -0,0 +1,5 @@
+---
+import Button from './Button.astro';
+---
+
+<Button variant="outline">描边按钮</Button>

package/dist/button/ButtonShapeCircle.astro

@@ -0,0 +1,5 @@
+---
+import Button from './Button.astro';
+---
+
+<Button shape="circle">圆</Button>

package/dist/button/ButtonShapeDefault.astro

@@ -0,0 +1,5 @@
+---
+import Button from './Button.astro';
+---
+
+<Button>默认</Button>

package/dist/button/ButtonShapeSquare.astro

@@ -0,0 +1,5 @@
+---
+import Button from './Button.astro';
+---
+
+<Button shape="square">方</Button>

package/dist/button/ButtonShapesContainer.astro

@@ -0,0 +1,25 @@
+---
+import { CodeContainer } from '../index';
+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/button/ButtonSizes.astro

@@ -9,7 +9,7 @@ import Button from './Button.astro';
 	<Button size="lg">大型按钮</Button>
 </div>
 
-<div class="cosy:mt-4 cosy:flex cosy:items-center cosy:gap-2">
+<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/ButtonSizes.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import VueButton from './Button.vue'
+</script>
+
+<template>
+  <div class="cosy:flex cosy:items-center cosy:gap-2">
+    <VueButton size="xs">超小按钮</VueButton>
+    <VueButton size="sm">小型按钮</VueButton>
+    <VueButton size="md">中等按钮</VueButton>
+    <VueButton size="lg">大型按钮</VueButton>
+  </div>
+</template>

package/dist/button/ButtonSizesContainer.astro

@@ -0,0 +1,17 @@
+---
+import { CodeContainer } from '../index';
+import ButtonSizes from './ButtonSizes.astro';
+import VueButtonSizes from './ButtonSizes.vue';
+import ButtonSizesSourceCode from './ButtonSizes.astro?raw';
+import VueButtonSizesSourceCode from './ButtonSizes.vue?raw';
+---
+
+<CodeContainer codes={[ButtonSizesSourceCode, VueButtonSizesSourceCode]} titles={['Astro', 'Vue']}>
+	<div id="tab-1">
+		<ButtonSizes />
+	</div>
+
+	<div id="tab-2">
+		<VueButtonSizes client:load />
+	</div>
+</CodeContainer>

package/dist/button/ButtonStatesContainer.astro

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

package/dist/button/ButtonSuccess.astro

@@ -0,0 +1,5 @@
+---
+import Button from './Button.astro';
+---
+
+<Button variant="success">成功按钮</Button>

package/dist/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/ButtonVariants.vue

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

package/dist/button/ButtonVariantsContainer.astro

@@ -0,0 +1,71 @@
+---
+import { CodeContainer } from '../index';
+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 VueButtonVariants from './ButtonVariants.vue';
+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';
+import VueButtonVariantsSourceCode from './ButtonVariants.vue?raw';
+---
+
+<CodeContainer
+	titles={['Info', 'Success', 'Warning', 'Error', 'Ghost', 'Link', 'Outline', 'Neutral', 'Vue']}
+	codes={[
+		ButtonInfoSourceCode,
+		ButtonSuccessSourceCode,
+		ButtonWarningSourceCode,
+		ButtonErrorSourceCode,
+		ButtonGhostSourceCode,
+		ButtonLinkSourceCode,
+		ButtonOutlineSourceCode,
+		ButtonNeutralSourceCode,
+		VueButtonVariantsSourceCode,
+	]}>
+	<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>
+
+	<div id="tab-9">
+		<VueButtonVariants client:load />
+	</div>
+</CodeContainer>

package/dist/button/ButtonWarning.astro

@@ -0,0 +1,5 @@
+---
+import Button from './Button.astro';
+---
+
+<Button variant="warning">警告按钮</Button>

package/dist/button/ButtonWide.astro

@@ -0,0 +1,5 @@
+---
+import Button from './Button.astro';
+---
+
+<Button wide>宽按钮</Button>

package/dist/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/button/ButtonWidthContainer.astro

@@ -0,0 +1,19 @@
+---
+import { CodeContainer } from '../index';
+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/button/ButtonWithIcons.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import VueButton from './Button.vue'
+</script>
+
+<template>
+  <div class="cosy:flex cosy:gap-2">
+    <VueButton>
+      <template #icon-left>👈</template>
+      左侧图标
+    </VueButton>
+    <VueButton>
+      右侧图标
+      <template #icon-right>👉</template>
+    </VueButton>
+    <VueButton>
+      <template #icon-left>👈</template>
+      两侧图标
+      <template #icon-right>👉</template>
+    </VueButton>
+  </div>
+</template>

package/dist/button/ButtonWithIconsContainer.astro

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

package/dist/button/index_astro.ts

@@ -0,0 +1,64 @@
+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';
+import ButtonFeatureContainer from './ButtonFeatureContainer.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,
+		Feature: ButtonFeatureContainer,
+	}
+};

package/dist/button/index_vue.ts

@@ -0,0 +1,4 @@
+import FeatureButton from './ButtonFeature.vue';
+import Button from './Button.vue';
+
+export { FeatureButton, Button };

package/dist/card/Card.astro

@@ -0,0 +1,91 @@
+---
+/**
+ * @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;
+	class?: string;
+}
+
+const { title, subtitle, class: className } = Astro.props;
+---
+
+<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>
+
+	<div class="cosy-card__content">
+		<slot />
+	</div>
+</article>

package/dist/card/CardBasic.astro

@@ -0,0 +1,5 @@
+---
+import Card from './Card.astro';
+---
+
+<Card title="卡片标题" subtitle="卡片描述文本" />

package/dist/card/CardCompact.astro

@@ -0,0 +1,77 @@
+---
+/**
+ * CardCompact - 紧凑模式卡片组件
+ *
+ * @prop {string} [title] - 卡片标题
+ * @prop {string} [subtitle] - 卡片副标题或描述
+ * @prop {string} [class] - 自定义CSS类
+ */
+
+import '../style.ts';
+
+interface Props {
+	title?: string;
+	subtitle?: string;
+	class?: string;
+}
+
+const { title, subtitle, class: className = '' } = Astro.props;
+
+const cardClasses = [
+	'cosy-card',
+	'cosy:bg-base-100',
+	'cosy:bg-opacity-70',
+	'cosy:backdrop-blur-sm',
+	'cosy:rounded-xl',
+	'cosy:shadow-md',
+	'cosy:overflow-hidden',
+	'cosy:transition-all',
+	'cosy:duration-300',
+	'cosy:ease-in-out',
+	'cosy:hover:shadow-lg',
+	'cosy:hover:scale-[1.02]',
+	'cosy-card--compact',
+	className,
+].join(' ');
+---
+
+<article class={cardClasses}>
+	<header class="cosy-card__header">
+		<h3 class="cosy-card__title">{title}</h3>
+		{subtitle && <p class="cosy-card__subtitle">{subtitle}</p>}
+	</header>
+
+	<div class="cosy-card__content">
+		<slot />
+	</div>
+</article>
+
+<style scoped>
+	.cosy-card--compact {
+		padding: 0.75rem;
+	}
+
+	.cosy-card__header {
+		margin-bottom: 0.5rem;
+	}
+
+	.cosy-card__title {
+		font-size: 0.95rem;
+		margin-bottom: 0.25rem;
+	}
+
+	.cosy-card__subtitle {
+		font-size: 0.85rem;
+	}
+
+	.cosy-card__content {
+		font-size: 0.85rem;
+		line-height: 1.4;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.cosy-card:hover {
+			transform: none !important;
+		}
+	}
+</style>

package/dist/card/CardLink.astro

@@ -0,0 +1,75 @@
+---
+/**
+ * CardLink - 可点击的卡片组件
+ *
+ * @prop {string} [title] - 卡片标题
+ * @prop {string} [subtitle] - 卡片副标题或描述
+ * @prop {string} [imageUrl] - 卡片图片URL
+ * @prop {string} [href] - 卡片链接地址
+ * @prop {string} [class] - 自定义CSS类
+ */
+
+import '../style.ts';
+
+interface Props {
+	title?: string;
+	subtitle?: string;
+	imageUrl?: string;
+	href: string;
+	class?: string;
+}
+
+const { title, subtitle, imageUrl, href, class: className = '' } = Astro.props;
+
+const cardClasses = [
+	'cosy-card',
+	'cosy:bg-base-100',
+	'cosy:bg-opacity-70',
+	'cosy:backdrop-blur-sm',
+	'cosy:rounded-xl',
+	'cosy:shadow-md',
+	'cosy:overflow-hidden',
+	'cosy:transition-all',
+	'cosy:duration-300',
+	'cosy:ease-in-out',
+	'cosy:hover:shadow-lg',
+	'cosy:hover:scale-[1.02]',
+	className,
+].join(' ');
+---
+
+<a href={href} class={cardClasses} aria-label={`${title} ${subtitle || ''}`.trim()}>
+	{
+		imageUrl && (
+			<div
+				class="cosy-card__image"
+				style={`background-image: url(${imageUrl})`}
+				aria-hidden="true"
+			/>
+		)
+	}
+
+	<header class="cosy-card__header">
+		<h3 class="cosy-card__title">{title}</h3>
+		{subtitle && <p class="cosy-card__subtitle">{subtitle}</p>}
+	</header>
+
+	<div class="cosy-card__content">
+		<slot />
+	</div>
+</a>
+
+<style scoped>
+	.cosy-card__image {
+		height: 180px;
+		background-size: cover;
+		background-position: center;
+		border-radius: 12px 12px 0 0;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.cosy-card:hover {
+			transform: none !important;
+		}
+	}
+</style>