@coffic/cosy-ui 0.6.30 → 0.6.34

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@coffic/cosy-ui",
-    "version": "0.6.30",
+    "version": "0.6.34",
     "description": "An astro component library",
     "author": {
         "name": "nookery",
@@ -61,6 +61,7 @@
         "@eslint/js": "^9.27.0",
         "@tailwindcss/typography": "^0.5.16",
         "@tailwindcss/vite": "^4.1.7",
+        "@tsconfig/node22": "^22.0.2",
         "@types/chai": "^5.2.2",
         "@types/eslint": "^9.6.1",
         "@types/fs-extra": "^11.0.4",
@@ -68,6 +69,8 @@
         "@types/node": "^22.15.19",
         "@types/react": "^19.1.4",
         "@typescript-eslint/parser": "^8.32.1",
+        "@vitejs/plugin-vue": "^5.2.4",
+        "@vue/tsconfig": "^0.7.0",
         "astro": "^5.7.13",
         "chai": "^4.5.0",
         "daisyui": "^5.0.35",
@@ -84,6 +87,7 @@
         "typescript": "^5.8.3",
         "typescript-eslint": "^8.32.1",
         "vite": "^6.3.5",
+        "vite-plugin-vue-devtools": "^7.7.6",
         "vue": "^3.5.14",
         "vue-eslint-parser": "^10.1.3"
     }

package/dist/alert/AlertTypes.astro

@@ -1,17 +0,0 @@
----
-/**
- * @component Alert.Types
- *
- * @description
- * 展示Alert组件的所有类型：info、success、warning、error。
- */
-import '../style.ts';
-import { Alert } from '../index';
----
-
-<div class="cosy:flex cosy:flex-col cosy:gap-4">
-	<Alert type="info">这是一条信息提示</Alert>
-	<Alert type="success">这是一条成功提示</Alert>
-	<Alert type="warning">这是一条警告提示</Alert>
-	<Alert type="error">这是一条错误提示</Alert>
-</div>

package/dist/button/index.ts

@@ -1,23 +0,0 @@
-import Button from './Button.astro';
-import ButtonBasic from './ButtonBasic.astro';
-import ButtonSizes from './ButtonSizes.astro';
-import ButtonStates from './ButtonStates.astro';
-import ButtonWithIcons from './ButtonWithIcons.astro';
-import ButtonShapes from './ButtonShapes.astro';
-import BasicSourceCode from './ButtonBasic.astro?raw';
-import SizesSourceCode from './ButtonSizes.astro?raw';
-import StatesSourceCode from './ButtonStates.astro?raw';
-import WithIconsSourceCode from './ButtonWithIcons.astro?raw';
-import ShapesSourceCode from './ButtonShapes.astro?raw';
-import { extractSimpleExample } from '../utils/component';
-
-export { Button, ButtonBasic, ButtonSizes, ButtonStates, ButtonWithIcons, ButtonShapes };
-
-// 导出示例源代码
-export const ButtonExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'Button'),
-	Sizes: extractSimpleExample(SizesSourceCode, 'Button'),
-	States: extractSimpleExample(StatesSourceCode, 'Button'),
-	WithIcons: extractSimpleExample(WithIconsSourceCode, 'Button'),
-	Shapes: extractSimpleExample(ShapesSourceCode, 'Button'),
-};

package/dist/components/display/Card.astro

@@ -1,162 +0,0 @@
----
-/**
- * @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"
- * />
- * ```
- *
- * @props
- * @prop {string} [title] - 卡片标题
- * @prop {string} [subtitle] - 卡片副标题或描述
- * @prop {string} [imageUrl] - 卡片顶部图片的URL
- * @prop {string} [href] - 如果提供，卡片将变成可点击的链接
- * @prop {string} [class] - 自定义CSS类，可用于覆盖默认样式
- *
- * @slots
- * @slot default - 卡片的主要内容区域
- *
- * @accessibility
- * - 使用语义化HTML结构
- * - 当作为链接使用时，确保提供有意义的文本内容
- * - 动画遵循 prefers-reduced-motion 媒体查询，尊重用户的动画偏好设置
- */
-
-import '../../style.ts';
-
-interface Props {
-	title?: string;
-	subtitle?: string;
-	imageUrl?: string;
-	href?: string;
-	class?: string;
-}
-
-const { title, subtitle, imageUrl, href, class: className = '' } = Astro.props;
-
-// 定义卡片的CSS类
-const cardClasses = [
-	'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(' ');
-
-// 定义卡片内容的CSS类
-const cardBodyClasses = [
-	'cosy:p-6',
-	'cosy:flex',
-	'cosy:flex-col',
-	'cosy:gap-4',
-	href && 'cosy:cursor-pointer',
-]
-	.filter(Boolean)
-	.join(' ');
-
-// 定义图片容器的CSS类
-const figureClasses = 'cosy:overflow-hidden cosy:mb-4 cosy:-mx-6 cosy:-mt-6';
-
-// 定义图片的CSS类
-const imageClasses =
-	'cosy:w-full cosy:h-auto cosy:object-cover cosy:transition-transform cosy:duration-300 cosy:group-hover:scale-105';
-
-// 定义标题的CSS类
-const titleClasses = 'cosy:text-xl cosy:font-bold cosy:mb-2';
-
-// 定义描述的CSS类
-const subtitleClasses = 'cosy:text-base cosy:text-gray-600 cosy:dark:text-gray-300';
----
-
-<div class="cosy:group cosy:perspective-1000">
-	<div class={cardClasses}>
-		{
-			href ? (
-				<a href={href} class={cardBodyClasses}>
-					{imageUrl && (
-						<figure class={figureClasses}>
-							<img src={imageUrl} alt={title} class={imageClasses} />
-						</figure>
-					)}
-					{title && <h2 class={titleClasses}>{title}</h2>}
-					{subtitle && <p class={subtitleClasses}>{subtitle}</p>}
-					<slot />
-				</a>
-			) : (
-				<div class={cardBodyClasses}>
-					{imageUrl && (
-						<figure class={figureClasses}>
-							<img src={imageUrl} alt={title} class={imageClasses} />
-						</figure>
-					)}
-					{title && <h2 class={titleClasses}>{title}</h2>}
-					{subtitle && <p class={subtitleClasses}>{subtitle}</p>}
-					<slot />
-				</div>
-			)
-		}
-	</div>
-</div>
-
-<style>
-	/* 为了确保prefers-reduced-motion生效 */
-	@media (prefers-reduced-motion: reduce) {
-		.cosy\:hover\:scale-\[1\.02\]:hover,
-		.cosy\:group-hover\:scale-105 {
-			transform: none !important;
-		}
-	}
-</style>

package/dist/theme-item/ThemeItemBasic.astro

@@ -1,10 +0,0 @@
----
-import ThemeItem from './ThemeItem.astro';
----
-
-<div class="cosy:w-48 cosy:space-y-2">
-	<ThemeItem theme="light" label="浅色主题" />
-	<ThemeItem theme="dark" label="深色主题" />
-	<ThemeItem theme="cupcake" label="糖果主题" />
-	<ThemeItem theme="dracula" label="德古拉主题" />
-</div>

package/dist/theme-item/index.ts

@@ -1,11 +0,0 @@
-import ThemeItem from './ThemeItem.astro';
-import ThemeItemBasic from './ThemeItemBasic.astro';
-import BasicSourceCode from './ThemeItemBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
-
-export { ThemeItem, ThemeItemBasic };
-
-// 导出示例源代码
-export const ThemeItemExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'ThemeItem'),
-};

package/dist/vue/Buttons/LinkBasic.vue

@@ -1,8 +0,0 @@
-<script setup lang="ts">
-import '../../style';
-import LinkButton from './LinkButton.vue';
-</script>
-
-<template>
-    <LinkButton text="了解更多" href="#" />
-</template>

package/dist/vue/Buttons/LinkButton.vue

@@ -1,65 +0,0 @@
-<!--
-@component LinkButton
-
-@description
-LinkButton 组件是一个现代化的链接按钮，支持外部链接和路由跳转，带有动画效果。
-
-@usage
-基本用法：
-```vue
-<LinkButton text="了解更多" href="#" />
-```
-
-多个按钮：
-```vue
-<div class="cosy:flex cosy:gap-4">
-  <LinkButton text="了解更多" href="#" />
-  <LinkButton text="立即开始" href="#get-started" />
-</div>
-```
-
-@props
-@prop {string} text - 按钮文本
-@prop {string} href - 链接地址
-@prop {boolean} [openInNewTab=true] - 是否在新标签页打开链接
--->
-
-<script setup lang="ts">
-import '../../style';
-
-defineProps({
-    /**
-     * 按钮文本
-     */
-    text: {
-        type: String,
-        required: true
-    },
-    /**
-     * 链接地址
-     */
-    href: {
-        type: String,
-        required: true
-    },
-    /**
-     * 是否在新标签页打开链接
-     * @default true
-     */
-    openInNewTab: {
-        type: Boolean,
-        default: true
-    }
-});
-</script>
-
-<template>
-    <a :href="href" :target="openInNewTab ? '_blank' : ''" class="cosy:px-6 cosy:py-3 cosy:rounded-lg cosy:bg-blue-600 cosy:text-white cosy:font-medium
-               cosy:transition-all cosy:duration-300 cosy:ease-in-out
-               cosy:no-underline
-               cosy:hover:bg-blue-700 cosy:hover:shadow-lg cosy:hover:-translate-y-0.5
-               cosy:focus:outline-none cosy:focus:ring-2 cosy:focus:ring-blue-500 cosy:focus:ring-offset-2
-               cosy:active:bg-blue-800 cosy:active:translate-y-0">
-        {{ text }}
-    </a>
-</template>

package/dist/vue/Buttons/Multiple.vue

@@ -1,11 +0,0 @@
-<template>
-    <div class="cosy:flex cosy:gap-4">
-        <LinkButton text="了解更多" href="#" />
-        <LinkButton text="立即开始" href="#get-started" />
-    </div>
-</template>
-
-<script setup lang="ts">
-import '../../style';
-import LinkButton from './LinkButton.vue';
-</script>

package/dist/vue/Buttons/index.ts

@@ -1,37 +0,0 @@
-import FeatureBasic from './FeatureBasic.vue';
-import FeatureWithTips from './FeatureWithTips.vue';
-import Multiple from './Multiple.vue';
-import LinkBasic from './LinkBasic.vue';
-import FeatureBasicSource from './FeatureBasic.vue?raw';
-import FeatureWithTipsSource from './FeatureWithTips.vue?raw';
-import MultipleSource from './Multiple.vue?raw';
-import LinkBasicSource from './LinkBasic.vue?raw';
-import { extractSimpleExample } from '../../utils/component';
-
-// 导出组件
-export { default as FeatureButton } from './FeatureButton.vue';
-export { default as LinkButton } from './LinkButton.vue';
-
-// 将示例组件整合为一个对象导出
-export const ButtonsExamples = {
-	FeatureButton: {
-		Basic: FeatureBasic,
-		WithTips: FeatureWithTips,
-	},
-	LinkButton: {
-		Basic: LinkBasic,
-		Multiple: Multiple,
-	},
-};
-
-// 导出示例组件的源代码（简化版本）
-export const ButtonsExampleCodes = {
-	FeatureButton: {
-		Basic: extractSimpleExample(FeatureBasicSource, 'Button'),
-		WithTips: extractSimpleExample(FeatureWithTipsSource, 'Button'),
-	},
-	LinkButton: {
-		Basic: extractSimpleExample(LinkBasicSource, 'Button'),
-		Multiple: extractSimpleExample(MultipleSource, 'Button'),
-	},
-};

package/dist/vue/SmartHero/Basic.vue

@@ -1,14 +0,0 @@
-<template>
-    <SmartHero title="智能英雄组件" description="一个现代化的页面英雄区域组件，适合用作页面顶部的展示区域" :links="links" />
-</template>
-
-<script setup lang="ts">
-import '../../style';
-import { ref } from 'vue';
-import SmartHero from './SmartHero.vue';
-
-const links = ref([
-    { text: '了解更多', href: '#' },
-    { text: '查看文档', href: '#docs' }
-]);
-</script>

package/dist/vue/SmartHero/SmartHero.vue

@@ -1,132 +0,0 @@
-<!--
-@component SmartHero
-
-@description
-SmartHero 组件是一个响应式的英雄区域组件，用于展示标题、描述、图片和操作链接。
-支持自定义内容插槽，适合用作页面顶部的展示区域。
-
-@usage
-基本用法：
-```vue
-<SmartHero
-  title="智能英雄组件"
-  description="一个现代化的页面英雄区域组件"
-  :links="[{text: '了解更多', href: '#'}]"
-/>
-```
-
-带图片：
-```vue
-<SmartHero
-  title="智能英雄组件"
-  description="一个现代化的页面英雄区域组件"
-  :image="{src: '/images/hero.png', alt: '英雄图片'}"
-  :links="[{text: '了解更多', href: '#'}, {text: '查看文档', href: '#docs'}]"
-/>
-```
-
-使用插槽：
-```vue
-<SmartHero
-  title="智能英雄组件"
-  description="一个现代化的页面英雄区域组件"
-  :links="[{text: '了解更多', href: '#'}]"
->
-  <template #app>
-    <div class="demo-app">自定义内容</div>
-  </template>
-</SmartHero>
-```
-
-@props
-@prop {string} title - 标题文本
-@prop {string} description - 描述文本
-@prop {object} [image] - 图片配置对象，包含src和alt属性
-@prop {array} links - 链接数组，每个链接包含text和href属性
-
-@slots
-@slot app - 用于插入自定义应用或组件展示
--->
-
-<script setup lang="ts">
-import '../../style';
-import type { PropType } from 'vue';
-import LinkButton from '../Buttons/LinkButton.vue';
-
-interface Link {
-    text: string;
-    href: string;
-}
-
-interface ImageProps {
-    src: string;
-    alt: string;
-}
-
-defineProps({
-    title: {
-        type: String,
-        required: true
-    },
-    description: {
-        type: String,
-        required: true
-    },
-    image: {
-        type: Object as PropType<ImageProps>,
-        required: false,
-        default: () => ({
-            src: '',
-            alt: ''
-        })
-    },
-    links: {
-        type: Array as PropType<Link[]>,
-        required: true,
-        default: () => []
-    }
-});
-</script>
-
-<template>
-    <div class="cosy:py-16 cosy:px-8 cosy:text-center cosy:w-full cosy:min-h-screen cosy:relative cosy:overflow-hidden">
-        <div class="cosy:relative cosy:z-10 cosy:rounded-lg cosy:w-full cosy:h-full">
-            <template v-if="image.src">
-                <img :src="image.src" :alt="image.alt" class="cosy:h-1/2 cosy:mx-auto cosy:mb-8 cosy:drop-shadow-xl">
-            </template>
-
-            <h2 class="cosy:text-4xl cosy:mb-4 cosy:animate-fade-up">
-                {{ title }}
-            </h2>
-            <p class="cosy:text-lg cosy:mb-12 cosy:text-center cosy:max-w-2xl cosy:mx-auto">
-                {{ description }}
-            </p>
-
-            <div class="cosy:my-12 cosy:w-full">
-                <slot name="app" />
-            </div>
-
-            <div class="cosy:flex cosy:flex-row cosy:justify-center cosy:gap-8 cosy:mx-auto cosy:w-full">
-                <LinkButton v-for="link in links" :key="link.text" :text="link.text" :href="link.href" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-@keyframes fade-up {
-    from {
-        opacity: 0;
-        transform: translateY(-20px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.cosy\:animate-fade-up {
-    animation: fade-up 0.8s ease-out forwards;
-}
-</style>

package/dist/vue/SmartHero/WithCustomContent.vue

@@ -1,36 +0,0 @@
-<template>
-    <SmartHero title="支持自定义内容" description="这个示例展示了如何使用插槽添加自定义内容" :links="links">
-        <template #app>
-            <div class="cosy:p-6 cosy:bg-base-200 cosy:rounded-xl cosy:max-w-lg cosy:mx-auto cosy:shadow-lg">
-                <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-left">
-                    <div class="cosy:font-mono cosy:text-sm cosy:mb-2 cosy:text-success">// 示例代码</div>
-                    <div class="cosy:font-mono cosy:text-sm">
-                        <div><span class="cosy:text-primary">&lt;SmartHero</span></div>
-                        <div class="cosy:pl-4"><span class="cosy:text-info">title</span>=<span
-                                class="cosy:text-warning">"支持自定义内容"</span></div>
-                        <div class="cosy:pl-4"><span class="cosy:text-info">description</span>=<span
-                                class="cosy:text-warning">"自定义内容示例"</span></div>
-                        <div class="cosy:pl-4">...</div>
-                        <div><span class="cosy:text-primary">&gt;</span></div>
-                        <div class="cosy:pl-2"><span class="cosy:text-primary">&lt;template</span> <span
-                                class="cosy:text-info">#app</span><span class="cosy:text-primary">&gt;</span></div>
-                        <div class="cosy:pl-4">// 您的自定义内容</div>
-                        <div class="cosy:pl-2"><span class="cosy:text-primary">&lt;/template&gt;</span></div>
-                        <div><span class="cosy:text-primary">&lt;/SmartHero&gt;</span></div>
-                    </div>
-                </div>
-            </div>
-        </template>
-    </SmartHero>
-</template>
-
-<script setup lang="ts">
-import '../../style';
-import { ref } from 'vue';
-import SmartHero from './SmartHero.vue';
-
-const links = ref([
-    { text: '了解插槽', href: '#slots' },
-    { text: '查看文档', href: '#docs' }
-]);
-</script>

package/dist/vue/SmartHero/WithImage.vue

@@ -1,19 +0,0 @@
-<template>
-    <SmartHero title="带图片的英雄组件" description="这是一个包含图片的英雄组件示例，展示了如何在顶部添加图片" :image="image" :links="links" />
-</template>
-
-<script setup lang="ts">
-import '../../style';
-import { ref } from 'vue';
-import SmartHero from './SmartHero.vue';
-
-const image = ref({
-    src: 'https://via.placeholder.com/600x300/4F46E5/FFFFFF?text=Smart+Hero',
-    alt: '英雄图片示例'
-});
-
-const links = ref([
-    { text: '了解更多', href: '#' },
-    { text: '立即开始', href: '#get-started' }
-]);
-</script>

package/dist/vue/SmartHero/index.ts

@@ -1,24 +0,0 @@
-import Basic from './Basic.vue';
-import WithImage from './WithImage.vue';
-import WithCustomContent from './WithCustomContent.vue';
-import BasicSource from './Basic.vue?raw';
-import WithImageSource from './WithImage.vue?raw';
-import WithCustomContentSource from './WithCustomContent.vue?raw';
-import { extractSimpleExample } from '../../utils/component';
-
-// 导出主组件
-export { default as SmartHero } from './SmartHero.vue';
-
-// 将示例组件整合为一个对象导出
-export const SmartHeroExamples = {
-	Basic,
-	WithImage,
-	WithCustomContent,
-};
-
-// 导出示例组件的源代码（简化版本）
-export const SmartHeroExampleCodes = {
-	Basic: extractSimpleExample(BasicSource, 'SmartHero'),
-	WithImage: extractSimpleExample(WithImageSource, 'SmartHero'),
-	WithCustomContent: extractSimpleExample(WithCustomContentSource, 'SmartHero'),
-};