@coffic/cosy-ui 0.6.32 → 0.6.34

package/dist/{components/display → banner}/Banner.astro

@@ -10,13 +10,13 @@
  * 设计理念：
  * 1. 视觉冲击力 - 使用大号字体和醒目的背景，确保信息能够被用户注意到
  * 2. 简洁明了 - 简单的布局和充足的留白，让信息更容易被理解
- * 3. 动态效果 - 使用淡入和上滑动画，增强用户体验
+ * 3. 动态效果 - 支持多种动画效果选择
  * 4. 响应式设计 - 在不同屏幕尺寸下保持良好的可读性
  *
  * 视觉特点：
  * - 圆角设计：柔和的视觉效果
  * - 悬停效果：轻微放大和阴影增强，提供交互反馈
- * - 动画效果：淡入和上滑动画，增强视觉吸引力
+ * - 动画效果：支持淡入、上滑或组合动画
  * - 模糊背景：半透明背景配合模糊效果，现代感强
  *
  * @usage
@@ -25,11 +25,9 @@
  * <Banner>欢迎使用我们的服务</Banner>
  * ```
  *
- * 在页脚中使用：
+ * 指定动画效果：
  * ```astro
- * <footer>
- *   <Banner>构建美好的数字体验</Banner>
- * </footer>
+ * <Banner animation="fade">淡入效果的横幅</Banner>
  * ```
  *
  * @slots
@@ -40,7 +38,7 @@
  * - 动画遵循 prefers-reduced-motion 媒体查询，尊重用户的动画偏好设置
  */
 
-import '../../style.ts';
+import '../style.ts';
 
 interface Props {
 	/**
@@ -59,12 +57,31 @@ interface Props {
 	textColor?: string;
 
 	/**
-	 * 是否启用动画效果，默认为true
+	 * 动画效果类型，可选值：
+	 * - 'none': 无动画
+	 * - 'fade': 仅淡入效果
+	 * - 'slide': 仅上滑效果
+	 * - 'both': 淡入和上滑效果
+	 * 默认为'both'
+	 */
+	animation?: 'none' | 'fade' | 'slide' | 'both';
+
+	/**
+	 * @deprecated 使用animation属性替代
 	 */
 	animated?: boolean;
 }
 
-const { class: className = '', bgColor = 'primary', textColor = '', animated = true } = Astro.props;
+const {
+	class: className = '',
+	bgColor = 'primary',
+	textColor = '',
+	animation = 'both',
+	animated, // 向后兼容
+} = Astro.props;
+
+// 处理向后兼容
+const effectiveAnimation = animated === false ? 'none' : animation;
 
 // 根据背景色自动设置文本颜色
 const getTextColorClass = () => {
@@ -99,7 +116,12 @@ const bannerClasses = [
 ].join(' ');
 
 // 动画类
-const animationClasses = animated ? 'cosy:animate-fadeIn cosy:animate-slideUp' : '';
+const animationClasses = {
+	none: '',
+	fade: 'cosy:animate-fadeIn',
+	slide: 'cosy:animate-slideUp',
+	both: 'cosy:animate-fadeIn cosy:animate-slideUp',
+}[effectiveAnimation];
 ---
 
 <div class={`${bannerClasses} ${animationClasses}`}>
@@ -134,7 +156,6 @@ const animationClasses = animated ? 'cosy:animate-fadeIn cosy:animate-slideUp' :
 		animation: slideUp 0.5s ease-out;
 	}
 
-	/* 尊重用户的减少动画偏好 */
 	@media (prefers-reduced-motion: reduce) {
 		.cosy\:animate-fadeIn,
 		.cosy\:animate-slideUp {

package/dist/banner/BannerAllAnimations.astro

@@ -0,0 +1,10 @@
+---
+import { Banner } from '../index';
+---
+
+<div class="flex flex-col gap-4">
+	<Banner animation="none">这是一个没有动画的横幅</Banner>
+	<Banner animation="fade">这是一个只有淡入动画的横幅</Banner>
+	<Banner animation="slide">这是一个只有上滑动画的横幅</Banner>
+	<Banner animation="both">这是一个同时有淡入和上滑动画的横幅</Banner>
+</div>

package/dist/banner/BannerBasic.astro

@@ -0,0 +1,5 @@
+---
+import { Banner } from '../index';
+---
+
+<Banner>欢迎使用我们的服务</Banner>

package/dist/banner/BannerCustomStyle.astro

@@ -0,0 +1,7 @@
+---
+import { Banner } from '../index';
+---
+
+<Banner class="bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold">
+	这是一个自定义样式的横幅
+</Banner>

package/dist/banner/BannerDanger.astro

@@ -0,0 +1,5 @@
+---
+import { Banner } from '../index';
+---
+
+<Banner bgColor="error">这是一个危险颜色的横幅</Banner>

package/dist/banner/BannerFadeIn.astro

@@ -0,0 +1,5 @@
+---
+import { Banner } from '../index';
+---
+
+<Banner animation="fade"> 这是一个只有淡入动画的横幅 </Banner>

package/dist/banner/BannerInfo.astro

@@ -0,0 +1,5 @@
+---
+import { Banner } from '../index';
+---
+
+<Banner bgColor="info">这是一个信息颜色的横幅</Banner>

package/dist/banner/BannerPrimary.astro

@@ -0,0 +1,5 @@
+---
+import { Banner } from '../index';
+---
+
+<Banner bgColor="primary">这是一个主要颜色的横幅</Banner>

package/dist/banner/BannerSecondary.astro

@@ -0,0 +1,5 @@
+---
+import { Banner } from '../index';
+---
+
+<Banner bgColor="secondary">这是一个次要颜色的横幅</Banner>

package/dist/banner/BannerSlideUp.astro

@@ -0,0 +1,5 @@
+---
+import { Banner } from '../index';
+---
+
+<Banner animation="slide"> 这是一个只有上滑动画的横幅 </Banner>

package/dist/banner/BannerSuccess.astro

@@ -0,0 +1,5 @@
+---
+import { Banner } from '../index';
+---
+
+<Banner bgColor="success">这是一个成功颜色的横幅</Banner>

package/dist/banner/BannerWarning.astro

@@ -0,0 +1,5 @@
+---
+import { Banner } from '../index';
+---
+
+<Banner bgColor="warning">这是一个警告颜色的横幅</Banner>

package/dist/banner/index.ts

@@ -0,0 +1,41 @@
+import Banner from './Banner.astro';
+import BannerBasic from './BannerBasic.astro';
+import BannerPrimary from './BannerPrimary.astro';
+import BannerSecondary from './BannerSecondary.astro';
+import BannerSuccess from './BannerSuccess.astro';
+import BannerWarning from './BannerWarning.astro';
+import BannerDanger from './BannerDanger.astro';
+import BannerInfo from './BannerInfo.astro';
+import BannerCustomStyle from './BannerCustomStyle.astro';
+import BannerFadeIn from './BannerFadeIn.astro';
+import BannerSlideUp from './BannerSlideUp.astro';
+import BannerAllAnimations from './BannerAllAnimations.astro';
+import BasicSourceCode from './BannerBasic.astro?raw';
+import PrimarySourceCode from './BannerPrimary.astro?raw';
+import SecondarySourceCode from './BannerSecondary.astro?raw';
+import SuccessSourceCode from './BannerSuccess.astro?raw';
+import WarningSourceCode from './BannerWarning.astro?raw';
+import DangerSourceCode from './BannerDanger.astro?raw';
+import InfoSourceCode from './BannerInfo.astro?raw';
+import CustomStyleSourceCode from './BannerCustomStyle.astro?raw';
+import FadeInSourceCode from './BannerFadeIn.astro?raw';
+import SlideUpSourceCode from './BannerSlideUp.astro?raw';
+import AllAnimationsSourceCode from './BannerAllAnimations.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Banner, BannerBasic, BannerPrimary, BannerSecondary, BannerSuccess, BannerWarning, BannerDanger, BannerInfo, BannerCustomStyle, BannerFadeIn, BannerSlideUp, BannerAllAnimations };
+
+// 导出示例源代码
+export const BannerExampleCodes = {
+  Basic: extractSimpleExample(BasicSourceCode, 'Banner'),
+  Primary: extractSimpleExample(PrimarySourceCode, 'Banner'),
+  Secondary: extractSimpleExample(SecondarySourceCode, 'Banner'),
+  Success: extractSimpleExample(SuccessSourceCode, 'Banner'),
+  Warning: extractSimpleExample(WarningSourceCode, 'Banner'),
+  Danger: extractSimpleExample(DangerSourceCode, 'Banner'),
+  Info: extractSimpleExample(InfoSourceCode, 'Banner'),
+  CustomStyle: extractSimpleExample(CustomStyleSourceCode, 'Banner'),
+  FadeIn: extractSimpleExample(FadeInSourceCode, 'Banner'),
+  SlideUp: extractSimpleExample(SlideUpSourceCode, 'Banner'),
+  AllAnimations: extractSimpleExample(AllAnimationsSourceCode, 'Banner'),
+};

package/dist/{components/data-display → blog}/Blog.astro

@@ -39,8 +39,8 @@
  * ```
  */
 
-import '../../style.ts';
-import { UserIcon, CalendarIcon } from '../../index';
+import '../style.ts';
+import { UserIcon, CalendarIcon } from '../index';
 
 interface Props {
 	/**

package/dist/blog/index.ts

@@ -0,0 +1 @@
+export {default as Blog} from './Blog.astro';

package/dist/button/Button.astro

@@ -46,6 +46,12 @@
  *   左侧图标
  * </Button>
  * ```
+ *
+ * 链接按钮：
+ * ```astro
+ * <Button href="https://example.com">跳转链接</Button>
+ * <Button href="https://example.com" target="_blank">新窗口打开</Button>
+ * ```
  */
 
 // 导入样式
@@ -74,6 +80,8 @@ interface Props {
 	class?: string;
 	onClick?: string;
 	formmethod?: string;
+	href?: string;
+	target?: string;
 	[key: string]: any; // 允许任意自定义属性
 }
 
@@ -89,6 +97,8 @@ const {
 	class: className,
 	onClick,
 	formmethod,
+	href,
+	target,
 	...rest
 } = Astro.props;
 
@@ -148,17 +158,35 @@ const getButtonClasses = () => {
 const buttonClasses = getButtonClasses();
 ---
 
-<button
-	type={formmethod === 'dialog' ? 'submit' : type}
-	class:list={buttonClasses}
-	disabled={disabled}
-	onclick={onClick}
-	formmethod={formmethod}
-	data-variant={variant}
-	{...rest}>
-	<span class="cosy:flex cosy:items-center cosy:gap-2">
-		<slot name="icon-left" />
-		<slot />
-		<slot name="icon-right" />
-	</span>
-</button>
+{
+	href ? (
+		<a
+			href={href}
+			class:list={buttonClasses}
+			target={target}
+			onclick={onClick}
+			data-variant={variant}
+			{...rest}>
+			<span class="cosy:flex cosy:items-center cosy:gap-2">
+				<slot name="icon-left" />
+				<slot />
+				<slot name="icon-right" />
+			</span>
+		</a>
+	) : (
+		<button
+			type={formmethod === 'dialog' ? 'submit' : type}
+			class:list={buttonClasses}
+			disabled={disabled}
+			onclick={onClick}
+			formmethod={formmethod}
+			data-variant={variant}
+			{...rest}>
+			<span class="cosy:flex cosy:items-center cosy:gap-2">
+				<slot name="icon-left" />
+				<slot />
+				<slot name="icon-right" />
+			</span>
+		</button>
+	)
+}

package/dist/button/Button.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'ghost'
+    | 'link'
+    | 'outline'
+    | 'neutral'
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  shape?: 'circle' | 'square'
+  wide?: boolean
+  block?: boolean
+  loading?: boolean
+  disabled?: boolean
+  type?: 'button' | 'submit' | 'reset'
+  href?: string
+  target?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'md',
+  wide: false,
+  block: false,
+  loading: false,
+  disabled: false,
+  type: 'button'
+})
+
+const buttonClasses = computed(() => {
+  const classes = ['cosy:btn']
+
+  // Variant classes
+  const variantClasses = {
+    primary: 'cosy:btn-primary',
+    secondary: 'cosy:btn-secondary',
+    accent: 'cosy:btn-accent',
+    info: 'cosy:btn-info',
+    success: 'cosy:btn-success',
+    warning: 'cosy:btn-warning',
+    error: 'cosy:btn-error',
+    ghost: 'cosy:btn-ghost',
+    link: 'cosy:btn-link',
+    outline: 'cosy:btn-outline',
+    neutral: 'cosy:btn-neutral',
+  }
+
+  // Size classes
+  const sizeClasses = {
+    lg: 'cosy:btn-lg',
+    md: 'cosy:btn-md',
+    sm: 'cosy:btn-sm',
+    xs: 'cosy:btn-xs',
+  }
+
+  // Shape classes
+  const shapeClasses = {
+    circle: 'cosy:btn-circle',
+    square: 'cosy:btn-square',
+  }
+
+  if (variantClasses[props.variant]) {
+    classes.push(variantClasses[props.variant])
+  }
+
+  if (sizeClasses[props.size]) {
+    classes.push(sizeClasses[props.size])
+  }
+
+  if (props.shape && shapeClasses[props.shape]) {
+    classes.push(shapeClasses[props.shape])
+  }
+
+  if (props.wide) classes.push('cosy:btn-wide')
+  if (props.block) classes.push('cosy:btn-block')
+  if (props.loading) classes.push('cosy:loading')
+
+  return classes
+})
+</script>
+
+<template>
+  <component
+    :is="props.href ? 'a' : 'button'"
+    :class="buttonClasses"
+    :type="props.href ? undefined : props.type"
+    :disabled="props.disabled"
+    :href="props.href"
+    :target="props.target"
+  >
+    <span class="cosy:flex cosy:items-center cosy:gap-2">
+      <slot name="icon-left" />
+      <slot />
+      <slot name="icon-right" />
+    </span>
+  </component>
+</template>

package/dist/button/ButtonBasic.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Button from './Button.vue'
+</script>
+
+<template>
+  <div class="cosy:flex cosy:gap-2">
+    <Button>默认按钮</Button>
+    <Button variant="primary">主要按钮</Button>
+    <Button variant="secondary">次要按钮</Button>
+  </div>
+</template>

package/dist/button/ButtonBasicContainer.astro

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

package/dist/button/ButtonBlock.astro

@@ -0,0 +1,5 @@
+---
+import Button from './Button.astro';
+---
+
+<Button block>块级按钮</Button>

package/dist/button/ButtonError.astro

@@ -0,0 +1,5 @@
+---
+import Button from './Button.astro';
+---
+
+<Button variant="error">错误按钮</Button>

package/dist/{vue/Buttons/FeatureButton.vue → button/ButtonFeature.vue}

@@ -1,27 +1,4 @@
-<template>
-    <div>
-        <!-- Button with hover effects -->
-        <button :class="[
-            'cosy:bg-cyan-500/20 cosy:text-cyan-500 cosy:border-cyan-500 cosy:border-2 cosy:hover:bg-cyan-500/30 cosy:hover:text-white cosy:hover:border-cyan-500/30 cosy:hover:scale-105 cosy:transition-all cosy:duration-300 cosy:rounded-2xl cosy:text-center cosy:backdrop-blur-lg cosy:text-2xl',
-            props.size
-        ]" @click="showPopup">
-            <slot />
-            {{ props.title }}
-        </button>
 
-        <!-- Popup message -->
-        <Transition name="fade">
-            <div v-if="isPopupVisible"
-                class="cosy:fixed cosy:inset-0 cosy:flex cosy:items-center cosy:justify-center cosy:z-50"
-                @click="hidePopup">
-                <div
-                    class="cosy:bg-black/80 cosy:backdrop-blur-sm cosy:p-6 cosy:rounded-xl cosy:text-white cosy:animate-popup">
-                    {{ lang === 'zh' ? '这是展示图，不支持操作' : 'This is a preview image, no operation is supported' }}
-                </div>
-            </div>
-        </Transition>
-    </div>
-</template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
@@ -61,7 +38,30 @@ const hidePopup = () => {
     isPopupVisible.value = false
 }
 </script>
+<template>
+    <div>
+        <!-- Button with hover effects -->
+        <button :class="[
+            'cosy:bg-cyan-500/20 cosy:text-cyan-500 cosy:border-cyan-500 cosy:border-2 cosy:hover:bg-cyan-500/30 cosy:hover:text-white cosy:hover:border-cyan-500/30 cosy:hover:scale-105 cosy:transition-all cosy:duration-300 cosy:rounded-2xl cosy:text-center cosy:backdrop-blur-lg cosy:text-2xl',
+            props.size
+        ]" @click="showPopup">
+            <slot />
+            {{ props.title }}
+        </button>
 
+        <!-- Popup message -->
+        <Transition name="fade">
+            <div v-if="isPopupVisible"
+                class="cosy:fixed cosy:inset-0 cosy:flex cosy:items-center cosy:justify-center cosy:z-50"
+                @click="hidePopup">
+                <div
+                    class="cosy:bg-black/80 cosy:backdrop-blur-sm cosy:p-6 cosy:rounded-xl cosy:text-white cosy:animate-popup">
+                    {{ lang === 'zh' ? '这是展示图，不支持操作' : 'This is a preview image, no operation is supported' }}
+                </div>
+            </div>
+        </Transition>
+    </div>
+</template>
 <style scoped>
 .fade-enter-active,
 .fade-leave-active {

package/dist/{vue/Buttons/FeatureBasic.vue → button/ButtonFeatureBasic.vue}

@@ -3,6 +3,6 @@
 </template>
 
 <script setup lang="ts">
-import '../../style';
-import FeatureButton from './FeatureButton.vue';
+import '../style';
+import FeatureButton from './ButtonFeature.vue';
 </script>

package/dist/button/ButtonFeatureContainer.astro

@@ -0,0 +1,18 @@
+---
+import { CodeContainer } from '../index';
+import ButtonFeatureBasic from './ButtonFeatureBasic.vue';
+import ButtonFeatureWithTips from './ButtonFeatureWithTips.vue';
+import ButtonFeatureBasicSourceCode from './ButtonFeatureBasic.vue?raw';
+import ButtonFeatureWithTipsSourceCode from './ButtonFeatureWithTips.vue?raw';
+---
+
+<CodeContainer
+	titles={['Vue-基础用法', 'Vue-带提示功能']}
+	codes={[ButtonFeatureBasicSourceCode, ButtonFeatureWithTipsSourceCode]}>
+	<div id="tab-1">
+		<ButtonFeatureBasic client:load />
+	</div>
+	<div id="tab-2">
+		<ButtonFeatureWithTips client:load />
+	</div>
+</CodeContainer>

package/dist/{vue/Buttons/FeatureWithTips.vue → button/ButtonFeatureWithTips.vue}

@@ -3,6 +3,5 @@
 </template>
 
 <script setup lang="ts">
-import '../../style';
-import FeatureButton from './FeatureButton.vue';
+import FeatureButton from './ButtonFeature.vue';
 </script>

package/dist/button/ButtonGhost.astro

@@ -0,0 +1,5 @@
+---
+import Button from './Button.astro';
+---
+
+<Button variant="ghost">幽灵按钮</Button>

package/dist/button/ButtonIconBoth.astro

@@ -0,0 +1,9 @@
+---
+import Button from './Button.astro';
+---
+
+<Button>
+	<span slot="icon-left">←</span>
+	两侧图标按钮
+	<span slot="icon-right">→</span>
+</Button>

package/dist/button/ButtonIconLeft.astro

@@ -0,0 +1,8 @@
+---
+import Button from './Button.astro';
+---
+
+<Button>
+	<span slot="icon-left">←</span>
+	左侧图标按钮
+</Button>

package/dist/button/ButtonIconRight.astro

@@ -0,0 +1,8 @@
+---
+import Button from './Button.astro';
+---
+
+<Button>
+	右侧图标按钮
+	<span slot="icon-right">→</span>
+</Button>

package/dist/button/ButtonInfo.astro

@@ -0,0 +1,5 @@
+---
+import Button from './Button.astro';
+---
+
+<Button variant="info">信息按钮</Button>

package/dist/button/ButtonLink.astro

@@ -0,0 +1,5 @@
+---
+import Button from './Button.astro';
+---
+
+<Button href="#" variant="primary">链接按钮</Button>

package/dist/button/ButtonLink.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import VueButton from './Button.vue'
+</script>
+
+<template>
+  <div class="cosy:flex cosy:gap-2">
+    <VueButton href="#" variant="primary">内部链接</VueButton>
+    <VueButton href="https://example.com" target="_blank" variant="primary">
+      外部链接
+      <template #icon-right>↗</template>
+    </VueButton>
+  </div>
+</template>

package/dist/button/ButtonLinkContainer.astro

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

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>