@coffic/cosy-ui 0.7.4 → 0.8.6

package/dist/hero/HeroBackgroundImage.astro

@@ -1,12 +0,0 @@
----
-import Hero from './Hero.astro';
-import { getLandscapeImage } from '../index_utils';
----
-
-<Hero
-	title="背景图片"
-	description="使用背景图片增强视觉效果。"
-	backgroundImage={getLandscapeImage({ width: 800, height: 400, provider: 'picsum' })}
-	backgroundOverlay="dark"
-	links={[{ text: '了解更多', href: '/about' }]}
-/>

package/dist/hero/HeroBackgroundImageContainer.astro

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

package/dist/hero/HeroBasic.astro

@@ -1,12 +0,0 @@
----
-import Hero from './Hero.astro';
----
-
-<Hero
-	title="欢迎使用我们的产品"
-	description="这是一个简短的描述，介绍产品的主要特点和价值。"
-	links={[
-		{ text: '开始使用', href: '/getting-started' },
-		{ text: '了解更多', href: '/about' },
-	]}
-/>

package/dist/hero/HeroBasicContainer.astro

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

package/dist/hero/HeroGradientBackground.astro

@@ -1,10 +0,0 @@
----
-import Hero from './Hero.astro';
----
-
-<Hero
-	title="渐变色背景"
-	description="这个例子使用了渐变色背景样式。"
-	background="gradient"
-	links={[{ text: '了解更多', href: '/about' }]}
-/>

package/dist/hero/HeroPlainBackground.astro

@@ -1,10 +0,0 @@
----
-import Hero from './Hero.astro';
----
-
-<Hero
-	title="纯色背景"
-	description="这个例子使用了纯色背景样式。"
-	background="plain"
-	links={[{ text: '了解更多', href: '/about' }]}
-/>

package/dist/hero/HeroWithButton.astro

@@ -1,11 +0,0 @@
----
-import Hero from './Hero.astro';
-import Button from '../button/Button.astro';
----
-
-<Hero title="带自定义按钮的Hero" description="这是一个带有自定义按钮的Hero组件示例。" links={[]}>
-	<div slot="actions" class="cosy:flex cosy:gap-4">
-		<Button variant="primary">主要操作</Button>
-		<Button variant="secondary">次要操作</Button>
-	</div>
-</Hero>

package/dist/hero/HeroWithButtonContainer.astro

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

package/dist/hero/HeroWithImage.astro

@@ -1,16 +0,0 @@
----
-import Hero from './Hero.astro';
-import { getExampleImage } from '../index_utils';
-
-const image = {
-	src: getExampleImage({ width: 400, height: 300, provider: 'picsum' }),
-	alt: '示例图片',
-};
----
-
-<Hero
-	title="带图片的Hero"
-	description="这是一个带有图片的Hero组件示例。"
-	image={image}
-	links={[{ text: '查看详情', href: '#' }]}
-/>

package/dist/hero/HeroWithImageContainer.astro

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

package/dist/hero/index.ts

@@ -1,39 +0,0 @@
-import Hero from './Hero.astro';
-import HeroBasic from './HeroBasic.astro';
-import HeroAlignCenter from './HeroAlignCenter.astro';
-import HeroAlignLeft from './HeroAlignLeft.astro';
-import HeroAlignRight from './HeroAlignRight.astro';
-import HeroWithImage from './HeroWithImage.astro';
-import HeroWithButton from './HeroWithButton.astro';
-import HeroPlainBackground from './HeroPlainBackground.astro';
-import HeroGradientBackground from './HeroGradientBackground.astro';
-import HeroBackgroundImage from './HeroBackgroundImage.astro';
-import HeroBasicContainer from './HeroBasicContainer.astro';
-import HeroAlignContainer from './HeroAlignContainer.astro';
-import HeroWithImageContainer from './HeroWithImageContainer.astro';
-import HeroWithButtonContainer from './HeroWithButtonContainer.astro';
-import HeroBackgroundContainer from './HeroBackgroundContainer.astro';
-import HeroBackgroundImageContainer from './HeroBackgroundImageContainer.astro';
-
-export { Hero };
-
-export const HeroPackage = {
-    Hero,
-    HeroBasic,
-    HeroAlignCenter,
-    HeroAlignLeft,
-    HeroAlignRight,
-    HeroWithImage,
-    HeroWithButton,
-    HeroPlainBackground,
-    HeroGradientBackground,
-    HeroBackgroundImage,
-    HeroContainers: {
-        Basic: HeroBasicContainer,
-        Align: HeroAlignContainer,
-        WithImage: HeroWithImageContainer,
-        WithButton: HeroWithButtonContainer,
-        Background: HeroBackgroundContainer,
-        BackgroundImage: HeroBackgroundImageContainer
-    }
-};

package/dist/iPhone-vue/Basic.vue

@@ -1,33 +0,0 @@
-<!--
-@component iPhoneWindow.Basic
-
-@description
-iPhoneWindow 组件的基础示例，展示最基本的 iPhone 窗口外观。
-
-@usage
-```vue
-<iPhoneWindowExamples.Basic />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { defineComponent } from 'vue'
-import iPhoneWindow from './iPhoneWindow.vue'
-
-export default defineComponent({
-    name: 'iPhoneWindowBasicExample',
-    components: {
-        iPhoneWindow
-    }
-})
-</script>
-
-<template>
-    <iPhoneWindow>
-        <div class="cosy:p-4 cosy:text-center">
-            <h2 class="cosy:text-xl cosy:font-bold cosy:mb-2">我的应用</h2>
-            <p>这是一个 iPhone 风格的应用界面</p>
-        </div>
-    </iPhoneWindow>
-</template>

package/dist/iPhone-vue/CustomBackground.vue

@@ -1,33 +0,0 @@
-<!--
-@component iPhoneWindow.CustomBackground
-
-@description
-自定义背景色的 iPhone 窗口示例，展示如何设置不同的背景色。
-
-@usage
-```vue
-<iPhoneWindowExamples.CustomBackground />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { defineComponent } from 'vue'
-import iPhoneWindow from './iPhoneWindow.vue'
-
-export default defineComponent({
-    name: 'iPhoneWindowCustomBackgroundExample',
-    components: {
-        iPhoneWindow
-    }
-})
-</script>
-
-<template>
-    <iPhoneWindow backgroundColor="cosy:bg-blue-50">
-        <div class="cosy:p-4 cosy:text-center">
-            <h2 class="cosy:text-xl cosy:font-bold cosy:mb-2 cosy:text-blue-800">蓝色主题</h2>
-            <p class="cosy:text-blue-600">自定义背景色的应用界面</p>
-        </div>
-    </iPhoneWindow>
-</template>

package/dist/iPhone-vue/NoFrame.vue

@@ -1,33 +0,0 @@
-<!--
-@component iPhoneWindow.NoFrame
-
-@description
-不显示边框的 iPhone 窗口示例，只展示内容区域。
-
-@usage
-```vue
-<iPhoneWindowExamples.NoFrame />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { defineComponent } from 'vue'
-import iPhoneWindow from './iPhoneWindow.vue'
-
-export default defineComponent({
-    name: 'iPhoneWindowNoFrameExample',
-    components: {
-        iPhoneWindow
-    }
-})
-</script>
-
-<template>
-    <iPhoneWindow :showFrame="false">
-        <div class="cosy:p-4 cosy:text-center">
-            <h2 class="cosy:text-xl cosy:font-bold cosy:mb-2">纯界面模式</h2>
-            <p>不显示 iPhone 边框，只展示内容</p>
-        </div>
-    </iPhoneWindow>
-</template>

package/dist/iPhone-vue/WeatherApp.vue

@@ -1,97 +0,0 @@
-<!--
-@component iPhoneWindow.WeatherApp
-
-@description
-天气应用示例，展示一个更复杂的 iPhone 应用界面，包含标题栏、主内容区和底部导航。
-
-@usage
-```vue
-<iPhoneWindowExamples.WeatherApp />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { defineComponent } from 'vue'
-import iPhoneWindow from './iPhoneWindow.vue'
-
-export default defineComponent({
-    name: 'iPhoneWindowWeatherAppExample',
-    components: {
-        iPhoneWindow
-    }
-})
-</script>
-
-<template>
-    <iPhoneWindow>
-        <div class="cosy:flex cosy:flex-col cosy:h-full">
-            <!-- 应用标题栏 -->
-            <div
-                class="cosy:bg-primary cosy:text-white cosy:px-4 cosy:py-3 cosy:flex cosy:items-center cosy:justify-between">
-                <h2 class="cosy:font-medium">天气预报</h2>
-                <button class="cosy:btn cosy:btn-ghost cosy:btn-sm cosy:p-1">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="cosy:h-5 cosy:w-5" viewBox="0 0 20 20"
-                        fill="currentColor">
-                        <path fill-rule="evenodd"
-                            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-                            clip-rule="evenodd" />
-                    </svg>
-                </button>
-            </div>
-
-            <!-- 主要内容 -->
-            <div class="cosy:flex-1 cosy:p-4 cosy:bg-gradient-to-b cosy:from-blue-400 cosy:to-blue-600">
-                <div class="cosy:text-center cosy:text-white">
-                    <div class="cosy:text-5xl cosy:font-light cosy:mb-2">23°</div>
-                    <div class="cosy:text-xl cosy:mb-4">晴朗</div>
-                    <div class="cosy:text-sm cosy:opacity-90">上海市，今天</div>
-                </div>
-
-                <div class="cosy:mt-8 cosy:bg-white/20 cosy:backdrop-blur-sm cosy:rounded-xl cosy:p-4">
-                    <div class="cosy:grid cosy:grid-cols-3 cosy:gap-4 cosy:text-center cosy:text-white">
-                        <div>
-                            <div class="cosy:text-sm cosy:opacity-80">湿度</div>
-                            <div class="cosy:font-medium">68%</div>
-                        </div>
-                        <div>
-                            <div class="cosy:text-sm cosy:opacity-80">风速</div>
-                            <div class="cosy:font-medium">8 km/h</div>
-                        </div>
-                        <div>
-                            <div class="cosy:text-sm cosy:opacity-80">能见度</div>
-                            <div class="cosy:font-medium">10 km</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 底部导航 -->
-            <div class="cosy:bg-white cosy:border-t cosy:border-gray-200 cosy:flex cosy:justify-around cosy:py-2">
-                <button class="cosy:p-2 cosy:text-primary">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="cosy:h-6 cosy:w-6" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-                    </svg>
-                </button>
-                <button class="cosy:p-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="cosy:h-6 cosy:w-6" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                </button>
-                <button class="cosy:p-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="cosy:h-6 cosy:w-6" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                    </svg>
-                </button>
-            </div>
-        </div>
-    </iPhoneWindow>
-</template>

package/dist/iPhone-vue/iPhoneWindow.vue

@@ -1,193 +0,0 @@
-<!--
-@component iPhoneWindow
-
-@description
-iPhoneWindow 组件模拟 iPhone 设备的外观，包含状态栏、时间显示和设备边框。
-适用于创建移动应用界面原型或展示移动端设计效果。
-
-@usage
-基本用法：
-```vue
-<iPhoneWindow>
-  <div>应用内容</div>
-</iPhoneWindow>
-```
-
-不显示边框：
-```vue
-<iPhoneWindow :showFrame="false">
-  <div>应用内容</div>
-</iPhoneWindow>
-```
-
-自定义背景色：
-```vue
-<iPhoneWindow backgroundColor="bg-blue-50">
-  <div>应用内容</div>
-</iPhoneWindow>
-```
-
-@props
-@prop {String} [height='h-96'] - 窗口高度
-@prop {String} [title=''] - 窗口标题
-@prop {Array} [statusBarButtons=[]] - 状态栏按钮数组
-@prop {Boolean} [withShadow=true] - 是否显示阴影效果
-@prop {Boolean} [showFrame=true] - 是否显示 iPhone 边框
-@prop {String} [backgroundColor=''] - 内容区域背景色
-
-@slots
-@slot default - 主要内容区域
-
-@emits
--->
-<script lang="ts">
-import '../../style.ts'
-import { AlertDialog } from '../../index_vue'
-import { ref, onMounted, onUnmounted, defineComponent } from 'vue'
-// 导入内部图片资源
-import iphoneFrame from './assets/iPhone 14 Pro - Deep Purple - Portrait.png'
-
-export default defineComponent({
-    name: 'iPhoneWindow',
-    components: {
-        AlertDialog
-    },
-    props: {
-        height: {
-            type: String,
-            default: 'h-96'
-        },
-        title: {
-            type: String,
-            default: ''
-        },
-        statusBarButtons: {
-            type: Array,
-            default: () => []
-        },
-        withShadow: {
-            type: Boolean,
-            default: true
-        },
-        showFrame: {
-            type: Boolean,
-            default: true
-        },
-        backgroundColor: {
-            type: String,
-            default: ''
-        }
-    },
-    setup() {
-        const showAlertDialog = ref(false)
-        const alertMessage = ref('')
-        const currentTime = ref('12:00')
-
-        // 获取图片URL
-        const frameSrc = typeof iphoneFrame === 'string' ? iphoneFrame : iphoneFrame.src
-
-        // 更新时间的函数
-        const updateTime = () => {
-            const now = new Date()
-            const hours = now.getHours().toString().padStart(2, '0')
-            const minutes = now.getMinutes().toString().padStart(2, '0')
-            currentTime.value = `${hours}:${minutes}`
-        }
-
-        // 设置定时器更新时间
-        let timeInterval: number
-        onMounted(() => {
-            updateTime()
-            timeInterval = window.setInterval(updateTime, 60000) // 每分钟更新一次
-        })
-
-        onUnmounted(() => {
-            if (timeInterval) {
-                clearInterval(timeInterval)
-            }
-        })
-
-        return {
-            showAlertDialog,
-            alertMessage,
-            currentTime,
-            frameSrc
-        }
-    }
-})
-</script>
-
-<template>
-    <div class="cosy:relative cosy:w-full">
-        <div class="cosy:relative cosy:aspect-[9/19.5]">
-            <!-- iPhone 边框 (放在最底层) -->
-            <img v-if="showFrame" :src="frameSrc" alt="iPhone frame"
-                class="cosy:absolute cosy:inset-0 cosy:w-full cosy:h-full cosy:object-contain">
-
-            <!-- 内容区域 -->
-            <div :class="[
-                'cosy:absolute cosy:inset-0',
-                showFrame ? 'cosy:px-[6%] cosy:pt-[13%] cosy:pb-[13%]' : '',
-            ]">
-                <div :class="[
-                    'cosy:w-full cosy:h-full cosy:flex cosy:flex-col cosy:overflow-hidden',
-                    showFrame ? 'cosy:rounded-t-[2.5em] cosy:rounded-b-[2.5rem]' : 'cosy:rounded-lg cosy:shadow',
-                    backgroundColor || 'cosy:bg-transparent'
-                ]">
-                    <!-- 顶部状态栏 (z-index 设为负数，确保在边框下方) -->
-                    <div class="cosy:flex-none cosy:h-12 cosy:px-4 cosy:z-0 cosy:relative">
-                        <div class="cosy:flex cosy:items-center cosy:h-full cosy:justify-between">
-                            <!-- 左侧时间 -->
-                            <div class="cosy:flex cosy:items-center">
-                                <span
-                                    class="cosy:text-sm cosy:font-medium cosy:text-gray-700 cosy:dark:text-gray-200">{{
-                                        currentTime
-                                    }}</span>
-                            </div>
-                            <!-- 右侧状态图标 -->
-                            <div class="cosy:flex cosy:items-center cosy:space-x-1.5">
-                                <!-- 信号图标 -->
-                                <svg class="cosy:w-5 cosy:h-3.5 cosy:text-gray-700 cosy:dark:text-gray-200"
-                                    viewBox="0 0 20 12" fill="none" stroke="currentColor">
-                                    <path d="M1 11h2V6H1v5zm4 0h2V4H5v7zm4 0h2V2H9v9zm4 0h2V0h-2v11z"
-                                        fill="currentColor" />
-                                    <path d="M17 11h2V0h-2v11z" fill="currentColor" opacity="0.4" />
-                                </svg>
-                                <!-- Wi-Fi图标 -->
-                                <svg class="cosy:w-5 cosy:h-4 cosy:text-gray-700 cosy:dark:text-gray-200"
-                                    viewBox="0 0 16 12" fill="currentColor">
-                                    <path
-                                        d="M8 10.5a1 1 0 100-2 1 1 0 000 2zM4.25 7.25a5 5 0 017.5 0l-1.06 1.06a3.5 3.5 0 00-5.38 0L4.25 7.25z" />
-                                    <path d="M1.75 4.75a8.5 8.5 0 0112.5 0l-1.06 1.06a7 7 0 00-10.38 0L1.75 4.75z" />
-                                </svg>
-                                <!-- 电池图标 -->
-                                <div class="cosy:flex cosy:items-center cosy:space-x-0.5">
-                                    <svg class="cosy:w-6 cosy:h-3.5 cosy:text-gray-700 cosy:dark:text-gray-200"
-                                        viewBox="0 0 25 12" fill="none" stroke="currentColor">
-                                        <rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke-width="1" />
-                                        <rect x="2" y="2" width="18" height="8" rx="1" fill="currentColor" />
-                                        <path d="M23 4h1a1 1 0 011 1v2a1 1 0 01-1 1h-1V4z" fill="currentColor" />
-                                    </svg>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- 主要内容区域 -->
-                    <div class="cosy:flex-1 cosy:flex cosy:flex-col cosy:overflow-hidden cosy:relative">
-                        <slot />
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- 添加 AlertDialog 组件 -->
-    <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
-</template>
-
-<style scoped>
-/* 确保图标渲染更平滑 */
-svg {
-    shape-rendering: geometricPrecision;
-}
-</style>

package/dist/iPhone-vue/index.ts

@@ -1,28 +0,0 @@
-import Basic from './Basic.vue';
-import WeatherApp from './WeatherApp.vue';
-import NoFrame from './NoFrame.vue';
-import CustomBackground from './CustomBackground.vue';
-import BasicSource from './Basic.vue?raw';
-import NoFrameSource from './NoFrame.vue?raw';
-import CustomBackgroundSource from './CustomBackground.vue?raw';
-import WeatherAppSource from './WeatherApp.vue?raw';
-import { extractSimpleExample } from '../../utils/component';
-
-// 导出主组件
-export { default as iPhoneWindow } from './iPhoneWindow.vue';
-
-// 将示例组件整合为一个对象导出
-export const iPhoneWindowExamples = {
-	Basic,
-	WeatherApp,
-	NoFrame,
-	CustomBackground,
-};
-
-// 导出示例组件的源代码（简化版本）
-export const iPhoneWindowExampleCodes = {
-	Basic: extractSimpleExample(BasicSource, 'iPhoneWindow'),
-	NoFrame: extractSimpleExample(NoFrameSource, 'iPhoneWindow'),
-	CustomBackground: extractSimpleExample(CustomBackgroundSource, 'iPhoneWindow'),
-	WeatherApp: extractSimpleExample(WeatherAppSource, 'iPhoneWindow'),
-};

package/dist/icons/AlertTriangle.astro

@@ -1,24 +0,0 @@
----
-import AstroIcon from './AstroIcon.astro';
-
-interface Props {
-	/**
-	 * 图标的大小
-	 * @default "24px"
-	 */
-	size?: string;
-	/**
-	 * 图标的颜色
-	 * @default "currentColor"
-	 */
-	color?: string;
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
-}
-
-const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
----
-
-<AstroIcon name="alertTriangle" size={size} stroke={color} class={className} />