@coffic/cosy-ui 0.7.4 → 0.8.7

package/dist/link/Link.astro

@@ -1,145 +0,0 @@
----
-/**
- * @component Link
- *
- * @description
- * Link 组件是一个增强的链接组件，提供了丰富的样式变体和动画效果。
- * 它可以用于导航、按钮、行动号召等多种场景。
- *
- * @design
- * 设计理念：
- * 1. 灵活多变 - 提供多种样式变体，适应不同场景
- * 2. 视觉反馈 - 通过悬停效果提供用户交互反馈
- * 3. 一致性 - 保持与整体设计系统的一致性
- * 4. 可访问性 - 确保链接可被键盘导航和屏幕阅读器识别
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Link href="/about">关于我们</Link>
- * ```
- *
- * 外部链接：
- * ```astro
- * <Link href="https://example.com" external>访问外部网站</Link>
- * ```
- *
- * 样式变体：
- * ```astro
- * <Link href="/signup" variant="primary">注册</Link>
- * <Link href="/learn-more" variant="secondary">了解更多</Link>
- * <Link href="/docs" variant="text">查看文档</Link>
- * <Link href="/get-started" variant="cta">立即开始</Link>
- * <Link href="/preview" variant="ghost">预览</Link>
- * ```
- *
- * 块级显示：
- * ```astro
- * <Link href="/contact" block>独占一行的链接</Link>
- * <p>这是一段文字，其中包含一个<Link href="/inline">内联链接</Link>。</p>
- * ```
- *
- * 动画效果：
- * ```astro
- * <Link href="/contact" animation="hover-lift">联系我们</Link>
- * <Link href="/features" animation="hover-glow">功能特性</Link>
- * <Link href="/pricing" animation="hover-scale">查看价格</Link>
- * ```
- *
- * 尺寸变体：
- * ```astro
- * <Link href="/small" size="sm">小型链接</Link>
- * <Link href="/medium" size="md">中型链接</Link>
- * <Link href="/large" size="lg">大型链接</Link>
- * ```
- */
-
-import '../style.ts';
-
-import type { HTMLAttributes } from 'astro/types';
-
-// 定义链接尺寸类型
-type LinkSize = 'sm' | 'md' | 'lg';
-
-// 定义链接变体类型
-type LinkVariant = 'default' | 'primary' | 'secondary' | 'text' | 'cta' | 'ghost' | 'light';
-
-// 定义链接动画类型
-type LinkAnimation = 'none' | 'hover-lift' | 'hover-glow' | 'hover-scale';
-
-interface Props extends HTMLAttributes<'a'> {
-	href: string;
-	external?: boolean;
-	block?: boolean;
-	class?: string;
-	'class:list'?: any;
-	variant?: LinkVariant;
-	animation?: LinkAnimation;
-	size?: LinkSize;
-	debug?: boolean;
-	centerText?: boolean;
-}
-
-const {
-	href,
-	external = false,
-	block = false,
-	variant = 'default',
-	animation = 'none',
-	size = 'md',
-	class: className = '',
-	'class:list': classList,
-	debug = false,
-	centerText = false,
-	...rest
-} = Astro.props;
-
-// 构建类名
-const classes = [
-	// 基础链接样式
-	'cosy:items-center cosy:cursor-pointer cosy:no-underline cosy:transition-all cosy:duration-200',
-
-	// 显示方式
-	block ? 'cosy:flex cosy:w-full' : 'cosy:inline-flex',
-
-	// 变体样式
-	variant === 'primary' && 'cosy:text-primary cosy:hover:text-primary-focus',
-	variant === 'secondary' && 'cosy:text-secondary cosy:hover:text-secondary-focus',
-	variant === 'text' && 'cosy:text-neutral cosy:hover:text-neutral-focus',
-	variant === 'cta' && 'cosy:text-accent cosy:hover:text-accent-focus cosy:font-medium',
-	variant === 'ghost' && 'cosy:text-base-content cosy:hover:text-base-content/80',
-	variant === 'default' && 'cosy:text-base-content cosy:hover:text-base-content/90',
-	variant === 'light' && 'cosy:text-white cosy:hover:text-white/90 cosy:font-medium',
-
-	// 尺寸样式
-	size === 'sm' && 'cosy:text-sm',
-	size === 'md' && 'cosy:text-base',
-	size === 'lg' && 'cosy:text-lg',
-
-	// 动画效果
-	animation === 'hover-lift' && 'cosy:hover:-translate-y-0.5 cosy:transition-transform',
-	animation === 'hover-glow' && 'cosy:hover:brightness-125 cosy:transition-[filter]',
-	animation === 'hover-scale' && 'cosy:hover:scale-105 cosy:transition-transform',
-
-	// 自定义类名
-	className,
-];
-
-// 文本居中样式
-if (centerText) {
-	classes.push('cosy:justify-center cosy:text-center');
-}
-
-// 调试样式
-if (debug) {
-	classes.push('cosy:border cosy:border-dashed cosy:border-red-500');
-}
----
-
-<a
-	href={href}
-	class:list={[classes, classList]}
-	{...external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}
-	{...rest}>
-	<slot />
-</a>

package/dist/link/LinkAnimations.astro

@@ -1,21 +0,0 @@
----
-import Link from './Link.astro';
----
-
-<div class="cosy:space-y-4">
-	<div class="cosy:flex cosy:gap-4">
-		<Link href="/hover-lift" animation="hover-lift" variant="primary"> 上浮效果 </Link>
-
-		<Link href="/hover-glow" animation="hover-glow" variant="secondary"> 发光效果 </Link>
-
-		<Link href="/hover-scale" animation="hover-scale" variant="cta"> 缩放效果 </Link>
-	</div>
-
-	<div class="cosy:flex cosy:gap-4">
-		<Link href="/block-link" block centerText variant="primary"> 块级居中链接 </Link>
-	</div>
-
-	<div class="cosy:bg-base-200 cosy:p-4">
-		<Link href="/light-variant" variant="light"> 浅色背景中的链接 </Link>
-	</div>
-</div>

package/dist/link/LinkBasic.astro

@@ -1,17 +0,0 @@
----
-import Link from './Link.astro';
----
-
-<div class="cosy:space-y-4">
-	<div>
-		<Link href="/about">默认链接</Link>
-	</div>
-
-	<div>
-		<Link href="https://example.com" external>外部链接</Link>
-	</div>
-
-	<div>
-		<p>这是一段文字，其中包含一个<Link href="/inline">内联链接</Link>。</p>
-	</div>
-</div>

package/dist/link/LinkVariants.astro

@@ -1,20 +0,0 @@
----
-import Link from './Link.astro';
----
-
-<div class="cosy:space-y-4">
-	<div class="cosy:flex cosy:gap-4">
-		<Link href="/signup" variant="primary">主要链接</Link>
-		<Link href="/learn-more" variant="secondary">次要链接</Link>
-		<Link href="/docs" variant="text">文本链接</Link>
-		<Link href="/get-started" variant="cta">行动号召</Link>
-		<Link href="/preview" variant="ghost">幽灵链接</Link>
-		<Link href="/help" variant="light">浅色链接</Link>
-	</div>
-
-	<div class="cosy:flex cosy:gap-4">
-		<Link href="/small" size="sm">小型链接</Link>
-		<Link href="/medium" size="md">中型链接</Link>
-		<Link href="/large" size="lg">大型链接</Link>
-	</div>
-</div>

package/dist/link/index.ts

@@ -1,17 +0,0 @@
-import Link from './Link.astro';
-import LinkBasic from './LinkBasic.astro';
-import LinkVariants from './LinkVariants.astro';
-import LinkAnimations from './LinkAnimations.astro';
-import BasicSourceCode from './LinkBasic.astro?raw';
-import VariantsSourceCode from './LinkVariants.astro?raw';
-import AnimationsSourceCode from './LinkAnimations.astro?raw';
-import { extractSimpleExample } from '../utils/component';
-
-export { Link, LinkBasic, LinkVariants, LinkAnimations };
-
-// 导出示例源代码
-export const LinkExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'Link'),
-	Variants: extractSimpleExample(VariantsSourceCode, 'Link'),
-	Animations: extractSimpleExample(AnimationsSourceCode, 'Link'),
-};

package/dist/list-vue/ListItem.vue

@@ -1,5 +0,0 @@
-<template>
-  <li class="mb-2 rounded-md p-2 flex items-center gap-3 hover:bg-accent">
-    <slot />
-  </li>
-</template>

package/dist/list-vue/index.ts

@@ -1 +0,0 @@
-export { default as ListItem } from './ListItem.vue'

package/dist/mac-window-vue/Basic.vue

@@ -1,11 +0,0 @@
-<script setup>
-import { MacWindow } from './index';
-</script>
-
-<template>
-    <MacWindow title="代码编辑器">
-        <div class="cosy:p-4">
-            窗口内容区域
-        </div>
-    </MacWindow>
-</template>

package/dist/mac-window-vue/CustomHeight.vue

@@ -1,13 +0,0 @@
-<script setup>
-import { MacWindow } from './index';
-</script>
-
-<template>
-    <MacWindow title="终端" height="cosy:h-64">
-        <div class="cosy:p-4 cosy:bg-gray-900 cosy:text-green-400 cosy:font-mono">
-            $ echo "Hello, World!"<br />
-            Hello, World!<br />
-            $ _
-        </div>
-    </MacWindow>
-</template>

package/dist/mac-window-vue/MacWindow.vue

@@ -1,262 +0,0 @@
-<!--
-@component MacWindow
-
-@description
-MacWindow 组件模拟 macOS 风格的应用窗口，包含标题栏、工具栏按钮、标签页和状态栏。
-适用于创建模拟桌面应用界面或代码编辑器等场景。
-
-@usage
-基本用法：
-```vue
-<MacWindow title="代码编辑器">
-  <div>窗口内容</div>
-</MacWindow>
-```
-
-带标签页：
-```vue
-<template>
-  <MacWindow
-    title="设置"
-    :tabs="['通用', '外观', '高级']"
-    defaultTab="外观"
-    :onTabClick="(tab) => { 
-      activeTab = tab;
-      console.log('切换到标签:', tab);
-    }"
-  >
-    <div v-if="activeTab === '通用'">通用设置内容</div>
-    <div v-if="activeTab === '外观'">外观设置内容</div>
-    <div v-if="activeTab === '高级'">高级设置内容</div>
-  </MacWindow>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { MacWindow } from 'cosy-ui';
-
-const activeTab = ref('外观');
-</script>
-```
-
-带自定义事件处理：
-```vue
-<MacWindow 
-  title="文件浏览器"
-  :onCloseWindow="() => handleClose()"
-  :onTabClick="(tab) => handleTabChange(tab)"
->
-  <div>窗口内容</div>
-</MacWindow>
-```
-
-带工具栏和状态栏：
-```vue
-<MacWindow title="文件浏览器">
-<template #toolbar>
-    <button class="cosy:btn cosy:btn-ghost cosy:btn-sm">
-      <SearchIcon class="cosy:w-4 cosy:h-4" />
-    </button>
-    <button class="cosy:btn cosy:btn-ghost cosy:btn-sm">
-      <SettingsIcon class="cosy:w-4 cosy:h-4" />
-    </button>
-  </template>
-
-<div>窗口内容</div>
-
-<template #status>
-    <div class="cosy:text-xs">就绪</div>
-    <button class="cosy:btn cosy:btn-ghost cosy:btn-xs">
-      <InfoIcon class="cosy:w-4 cosy:h-4" />
-    </button>
-  </template>
-</MacWindow>
-```
-
-@props
-@prop {String} [height='h-96'] - 窗口高度
-@prop {String} [title=''] - 窗口标题
-@prop {Boolean} [withShadow=true] - 是否显示阴影效果
-@prop {Array} [tabs=[]] - 标签页字符串数组，如 ['标签1', '标签2', '标签3']
-@prop {String} [defaultTab=''] - 默认选中的标签页
-@prop {Function} [onCloseWindow=null] - 关闭窗口时调用的函数
-@prop {Function} [onMinimizeWindow=null] - 最小化窗口时调用的函数
-@prop {Function} [onMaximizeWindow=null] - 最大化窗口时调用的函数
-@prop {Function} [onTabClick=null] - 点击标签页时调用的函数，接收标签页值作为参数
-
-@slots
-@slot default - 窗口主要内容
-@slot sidebar - 侧边栏内容
-@slot toolbar - 工具栏内容，位于标题栏右侧
-@slot status - 状态栏内容，位于窗口底部
-
-@emits
-@emit {update:modelValue} - 切换标签页时触发，用于v-model
--->
-
-<script lang="ts">
-import '../../style.ts'
-import AlertDialog from '../alert-dialog-vue/AlertDialog.vue'
-import { ref, defineComponent, type PropType } from 'vue'
-
-export default defineComponent({
-    name: 'MacWindow',
-    components: {
-        AlertDialog
-    },
-    props: {
-        height: {
-            type: String,
-            default: 'h-96'
-        },
-        title: {
-            type: String,
-            default: ''
-        },
-        withShadow: {
-            type: Boolean,
-            default: true
-        },
-        tabs: {
-            type: Array as PropType<string[]>,
-            default: () => []
-        },
-        defaultTab: {
-            type: String,
-            default: ''
-        },
-        onCloseWindow: {
-            type: Function,
-            default: null
-        },
-        onMinimizeWindow: {
-            type: Function,
-            default: null
-        },
-        onMaximizeWindow: {
-            type: Function,
-            default: null
-        },
-        onTabClick: {
-            type: Function,
-            default: null
-        }
-    },
-    setup(props) {
-        const showAlertDialog = ref(false)
-        const alertMessage = ref('')
-        const activeTab = ref(props.defaultTab)
-
-        // 如果没有设置默认标签或默认标签不在tabs中，则选择第一个标签
-        if ((!activeTab.value || !props.tabs.includes(activeTab.value)) && props.tabs.length > 0) {
-            activeTab.value = props.tabs[0] as string
-        }
-
-        const handleCloseWindow = () => {
-            alertMessage.value = '关闭APP窗口（这是演示，不会真实操作）'
-            showAlertDialog.value = true
-            if (props.onCloseWindow) {
-                props.onCloseWindow()
-            }
-        }
-
-        const handleMinimizeWindow = () => {
-            alertMessage.value = '最小化窗口（这是演示，不会真实操作）'
-            showAlertDialog.value = true
-            if (props.onMinimizeWindow) {
-                props.onMinimizeWindow()
-            }
-        }
-
-        const handleMaximizeWindow = () => {
-            alertMessage.value = '最大化窗口（这是演示，不会真实操作）'
-            showAlertDialog.value = true
-            if (props.onMaximizeWindow) {
-                props.onMaximizeWindow()
-            }
-        }
-
-        const handleTabClick = (tab: string) => {
-            activeTab.value = tab
-            if (props.onTabClick) {
-                props.onTabClick(tab)
-            }
-        }
-
-        return {
-            showAlertDialog,
-            alertMessage,
-            activeTab,
-            handleCloseWindow,
-            handleMinimizeWindow,
-            handleMaximizeWindow,
-            handleTabClick
-        }
-    }
-})
-</script>
-
-<template>
-    <div class="cosy:flex cosy:max-w-5xl cosy:mx-auto cosy:bg-base-100 cosy:relative cosy:rounded-2xl cosy:overflow-hidden"
-        :class="[
-            height,
-            withShadow ? 'cosy:shadow-lg' : ''
-        ]">
-        <!-- 窗口控制按钮 -->
-        <div
-            class="cosy:absolute cosy:top-0 cosy:left-0 cosy:right-0 cosy:flex cosy:items-center cosy:h-12 cosy:px-4 cosy:bg-base-200 cosy:border-b cosy:border-base-300">
-            <div class="cosy:flex cosy:items-center cosy:space-x-2">
-                <div class="cosy:w-3 cosy:h-3 cosy:rounded-full cosy:bg-error cosy:cursor-pointer hover:cosy:opacity-80 cosy:transition-opacity"
-                    @click="handleCloseWindow" />
-                <div class="cosy:w-3 cosy:h-3 cosy:rounded-full cosy:bg-warning cosy:cursor-pointer hover:cosy:opacity-80 cosy:transition-opacity"
-                    @click="handleMinimizeWindow" />
-                <div class="cosy:w-3 cosy:h-3 cosy:rounded-full cosy:bg-success cosy:cursor-pointer hover:cosy:opacity-80 cosy:transition-opacity"
-                    @click="handleMaximizeWindow" />
-            </div>
-            <div class="cosy:ml-6 cosy:text-sm cosy:font-medium cosy:text-base-content">
-                {{ title }}
-            </div>
-
-            <!-- 标签选择器 -->
-            <div v-if="tabs?.length" class="cosy:flex-1 cosy:flex cosy:justify-center">
-                <div class="cosy:inline-flex cosy:rounded-lg cosy:bg-base-300 cosy:p-1">
-                    <button v-for="(tab, index) in tabs" :key="index" :class="[
-                        'cosy:px-3 cosy:py-1 cosy:text-sm cosy:rounded-md cosy:transition-colors',
-                        activeTab === tab
-                            ? 'cosy:bg-base-100 cosy:text-base-content cosy:shadow'
-                            : 'cosy:text-base-content/70 hover:cosy:text-base-content'
-                    ]" @click="handleTabClick(tab)">
-                        {{ tab }}
-                    </button>
-                </div>
-            </div>
-
-            <!-- 工具栏插槽 -->
-            <div class="cosy:ml-auto cosy:flex cosy:items-center cosy:space-x-2">
-                <slot name="toolbar"></slot>
-            </div>
-        </div>
-
-        <!-- 主要内容区域 -->
-        <div class="cosy:flex-1 cosy:flex cosy:flex-col cosy:pt-12 cosy:h-full">
-            <div class="cosy:flex cosy:flex-1 cosy:h-full cosy:overflow-hidden">
-                <!-- 左侧栏插槽 -->
-                <slot name="sidebar" />
-
-                <!-- 主内容插槽 -->
-                <slot />
-            </div>
-
-            <!-- 底部状态栏 -->
-            <div v-if="$slots.status"
-                class="cosy:h-6 cosy:bg-base-200/95 cosy:border-t cosy:border-base-300 cosy:flex cosy:items-center cosy:justify-end cosy:px-4 cosy:text-sm">
-                <div class="cosy:flex cosy:items-center cosy:space-x-2">
-                    <slot name="status"></slot>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- AlertDialog 组件 -->
-    <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
-</template>

package/dist/mac-window-vue/WithEvents.vue

@@ -1,34 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { MacWindow } from './index';
-
-const activeTab = ref('信息');
-
-const handleTabClick = (tab) => {
-    activeTab.value = tab;
-    console.log('切换到标签:', tab);
-};
-
-const handleClose = () => {
-    alert('关闭窗口');
-};
-
-const handleMinimize = () => {
-    alert('最小化窗口');
-};
-
-const handleMaximize = () => {
-    alert('最大化窗口');
-};
-</script>
-
-<template>
-    <MacWindow title="应用窗口" :tabs="['信息', '设置', '帮助']" :onTabClick="handleTabClick" :onCloseWindow="handleClose"
-        :onMinimizeWindow="handleMinimize" :onMaximizeWindow="handleMaximize">
-        <div class="cosy:p-4">
-            <div v-if="activeTab === '信息'">信息内容</div>
-            <div v-if="activeTab === '设置'">设置内容</div>
-            <div v-if="activeTab === '帮助'">帮助内容</div>
-        </div>
-    </MacWindow>
-</template>

package/dist/mac-window-vue/WithSidebar.vue

@@ -1,21 +0,0 @@
-<script setup>
-import { MacWindow } from './index';
-</script>
-
-<template>
-    <MacWindow title="文件浏览器">
-        <template #sidebar>
-            <div class="cosy:w-48 cosy:border-r cosy:border-base-300 cosy:p-2">
-                <div class="cosy:font-medium cosy:mb-2">文件夹</div>
-                <ul>
-                    <li class="cosy:py-1 cosy:px-2 hover:cosy:bg-base-200 cosy:rounded cosy:cursor-pointer">文档</li>
-                    <li class="cosy:py-1 cosy:px-2 hover:cosy:bg-base-200 cosy:rounded cosy:cursor-pointer">下载</li>
-                    <li class="cosy:py-1 cosy:px-2 hover:cosy:bg-base-200 cosy:rounded cosy:cursor-pointer">图片</li>
-                </ul>
-            </div>
-        </template>
-        <div class="cosy:p-4">
-            主内容区域
-        </div>
-    </MacWindow>
-</template>

package/dist/mac-window-vue/WithTabs.vue

@@ -1,21 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { MacWindow } from './index';
-
-const activeTab = ref('外观');
-
-const handleTabClick = (tab) => {
-    activeTab.value = tab;
-    console.log('当前标签:', tab);
-};
-</script>
-
-<template>
-    <MacWindow title="设置" :tabs="['通用', '外观', '高级']" defaultTab="外观" :onTabClick="handleTabClick">
-        <div class="cosy:p-4">
-            <div v-if="activeTab === '通用'">通用设置内容</div>
-            <div v-if="activeTab === '外观'">外观设置内容</div>
-            <div v-if="activeTab === '高级'">高级设置内容</div>
-        </div>
-    </MacWindow>
-</template>

package/dist/mac-window-vue/WithToolbar.vue

@@ -1,43 +0,0 @@
-<script setup>
-import { MacWindow } from './index';
-import { SearchIcon, SettingsIcon, InfoIcon } from '../../index_vue';
-
-const handleSearch = () => {
-    console.log('搜索');
-};
-
-const handleSettings = () => {
-    console.log('设置');
-};
-
-const handleInfo = () => {
-    console.log('信息');
-};
-</script>
-
-<template>
-    <MacWindow title="文件浏览器">
-        <!-- 工具栏插槽 -->
-        <template #toolbar>
-            <button class="cosy:btn cosy:btn-ghost cosy:btn-sm" @click="handleSearch">
-                <SearchIcon class="cosy:w-4 cosy:h-4" />
-            </button>
-            <button class="cosy:btn cosy:btn-ghost cosy:btn-sm" @click="handleSettings">
-                <SettingsIcon class="cosy:w-4 cosy:h-4" />
-            </button>
-        </template>
-
-        <!-- 主内容 -->
-        <div class="cosy:p-4">
-            窗口内容区域
-        </div>
-
-        <!-- 状态栏插槽 -->
-        <template #status>
-            <div class="cosy:text-xs">就绪</div>
-            <button class="cosy:btn cosy:btn-ghost cosy:btn-xs" @click="handleInfo">
-                <InfoIcon class="cosy:w-4 cosy:h-4" />
-            </button>
-        </template>
-    </MacWindow>
-</template>