@coffic/cosy-ui 0.6.12 → 0.6.14

package/dist/vue/VueCounter.vue

@@ -0,0 +1,29 @@
+<!-- 简单的Vue计数器组件 -->
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const count = ref(0);
+
+const increment = () => {
+    count.value++;
+};
+
+const decrement = () => {
+    count.value--;
+};
+</script>
+
+<template>
+    <div class="cosy:p-4 cosy:bg-base-200 cosy:rounded-lg cosy:shadow-md cosy:max-w-xs cosy:mx-auto">
+        <h2 class="cosy:text-xl cosy:font-bold cosy:mb-4 cosy:text-center">Vue 计数器测试</h2>
+        <div class="cosy:flex cosy:items-center cosy:justify-center cosy:gap-4">
+            <button @click="decrement" class="cosy:btn cosy:btn-primary">
+                -
+            </button>
+            <span class="cosy:text-2xl cosy:font-bold">{{ count }}</span>
+            <button @click="increment" class="cosy:btn cosy:btn-primary">
+                +
+            </button>
+        </div>
+    </div>
+</template>

package/dist/vue/iPhone/Basic.vue

@@ -0,0 +1,33 @@
+<!--
+@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/vue/iPhone/CustomBackground.vue

@@ -0,0 +1,33 @@
+<!--
+@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/vue/iPhone/NoFrame.vue

@@ -0,0 +1,33 @@
+<!--
+@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/vue/iPhone/WeatherApp.vue

@@ -0,0 +1,97 @@
+<!--
+@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/vue/{iPhoneWindow.vue → iPhone/iPhoneWindow.vue}

@@ -41,9 +41,11 @@ iPhoneWindow 组件模拟 iPhone 设备的外观，包含状态栏、时间显
 @emits
 -->
 <script lang="ts">
-import '../app.css'
-import AlertDialog from './AlertDialog.vue'
+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',
@@ -79,9 +81,11 @@ export default defineComponent({
     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()
@@ -106,7 +110,8 @@ export default defineComponent({
         return {
             showAlertDialog,
             alertMessage,
-            currentTime
+            currentTime,
+            frameSrc
         }
     }
 })
@@ -116,9 +121,8 @@ export default defineComponent({
     <div class="cosy:relative cosy:w-full">
         <div class="cosy:relative cosy:aspect-[9/19.5]">
             <!-- iPhone 边框 (放在最底层) -->
-            <img v-if="showFrame"
-                src="/assets/iPhone 14 Pro/iPhone 14 Pro - Deep Purple - Portrait.imageset/iPhone 14 Pro - Deep Purple - Portrait.png"
-                alt="iPhone frame" class="cosy:absolute cosy:inset-0 cosy:w-full cosy:h-full cosy:object-contain">
+            <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="[

package/dist/vue/iPhone/index.ts

@@ -0,0 +1,41 @@
+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';
+
+// 转换Vue SFC组件为简化的示例代码（只保留template和setup script）
+function extractSimpleExample(source: string): string {
+	// 提取模板部分
+	const templateMatch = source.match(/<template>([\s\S]*?)<\/template>/);
+	const template = templateMatch ? templateMatch[1].trim() : '';
+
+	// 创建简化版本的代码
+	return `<template>${template}</template>
+
+<script setup>
+import { iPhoneWindow } from 'cosy-ui';
+</script>`;
+}
+
+// 导出主组件
+export { default as iPhoneWindow } from './iPhoneWindow.vue';
+
+// 将示例组件整合为一个对象导出
+export const iPhoneWindowExamples = {
+	Basic,
+	WeatherApp,
+	NoFrame,
+	CustomBackground,
+};
+
+// 导出示例组件的源代码（简化版本）
+export const iPhoneWindowExampleCodes = {
+	Basic: extractSimpleExample(BasicSource),
+	NoFrame: extractSimpleExample(NoFrameSource),
+	CustomBackground: extractSimpleExample(CustomBackgroundSource),
+	WeatherApp: extractSimpleExample(WeatherAppSource),
+};

package/dist/vue/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+	import { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@coffic/cosy-ui",
-    "version": "0.6.12",
+    "version": "0.6.14",
     "description": "An astro component library",
     "author": {
         "name": "nookery",
@@ -25,9 +25,9 @@
     "main": "./dist/index.js",
     "exports": {
         ".": "./dist/index.js",
-        "./collection": "./dist/collection.js",
-        "./icons": "./dist/icons.js",
-        "./vue": "./dist/vue.js"
+        "./collection": "./dist/index_collection.js",
+        "./icons": "./dist/index_icons.js",
+        "./vue": "./dist/index_vue.js"
     },
     "files": [
         "dist",
@@ -37,7 +37,8 @@
         "dev": "astro dev --host 0.0.0.0 --port 6677",
         "preview:docs": "astro preview --host 0.0.0.0 --port 4330 --outDir dist-docs",
         "preview": "npm run preview:docs",
-        "build": "vite build && npm run build:docs && tsx scripts/post-build.ts",
+        "build": "npm run build:cosy && npm run build:docs",
+        "build:cosy": "vite build && tsx scripts/post-build.ts",
         "build:docs": "astro build",
         "check": "astro check",
         "lint": "eslint ."
@@ -59,15 +60,15 @@
         "@astrojs/vue": "^5.0.13",
         "@eslint/js": "^9.26.0",
         "@tailwindcss/typography": "^0.5.16",
-        "@tailwindcss/vite": "^4.1.5",
+        "@tailwindcss/vite": "^4.1.6",
         "@types/chai": "^5.2.2",
         "@types/eslint": "^9.6.1",
         "@types/fs-extra": "^11.0.4",
         "@types/mocha": "^10.0.10",
-        "@types/node": "^22.15.17",
-        "@types/react": "^19.1.3",
-        "@typescript-eslint/parser": "^8.32.0",
-        "astro": "^5.7.12",
+        "@types/node": "^22.15.18",
+        "@types/react": "^19.1.4",
+        "@typescript-eslint/parser": "^8.32.1",
+        "astro": "^5.7.13",
         "chai": "^4.5.0",
         "daisyui": "^5.0.35",
         "eslint": "^9.26.0",
@@ -78,10 +79,10 @@
         "prettier-plugin-astro": "^0.14.1",
         "rollup-plugin-copy": "^3.5.0",
         "sharp": "^0.33.5",
-        "tailwindcss": "^4.1.5",
+        "tailwindcss": "^4.1.6",
         "tsx": "^4.19.4",
         "typescript": "^5.8.3",
-        "typescript-eslint": "^8.32.0",
+        "typescript-eslint": "^8.32.1",
         "vite": "^6.3.5",
         "vue": "^3.5.13",
         "vue-eslint-parser": "^10.1.3"

package/dist/components/icons/AlertTriangle.astro

@@ -1,35 +0,0 @@
----
-interface Props {
-  /**
-   * 图标的大小
-   * @default "24px"
-   */
-  size?: string;
-  /**
-   * 图标的颜色
-   * @default "currentColor"
-   */
-  color?: string;
-  /**
-   * 自定义类名
-   */
-  class?: string;
-}
-
-const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
----
-
-<svg 
-  xmlns="http://www.w3.org/2000/svg" 
-  width={size} 
-  height={size} 
-  viewBox="0 0 24 24" 
-  fill="none" 
-  stroke={color} 
-  stroke-width="2" 
-  stroke-linecap="round" 
-  stroke-linejoin="round"
-  class={className}
->
-  <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-</svg> 

package/dist/components/icons/CalendarIcon.astro

@@ -1,38 +0,0 @@
----
-interface Props {
-  /**
-   * 图标的大小
-   * @default "24px"
-   */
-  size?: string;
-  /**
-   * 图标的颜色
-   * @default "currentColor"
-   */
-  color?: string;
-  /**
-   * 自定义类名
-   */
-  class?: string;
-}
-
-const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
----
-
-<svg 
-  xmlns="http://www.w3.org/2000/svg" 
-  width={size} 
-  height={size} 
-  viewBox="0 0 24 24" 
-  fill="none" 
-  stroke={color} 
-  stroke-width="2" 
-  stroke-linecap="round" 
-  stroke-linejoin="round"
-  class={className}
->
-  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-  <line x1="16" y1="2" x2="16" y2="6"></line>
-  <line x1="8" y1="2" x2="8" y2="6"></line>
-  <line x1="3" y1="10" x2="21" y2="10"></line>
-</svg> 

package/dist/components/icons/CheckCircle.astro

@@ -1,36 +0,0 @@
----
-interface Props {
-  /**
-   * 图标的大小
-   * @default "24px"
-   */
-  size?: string;
-  /**
-   * 图标的颜色
-   * @default "currentColor"
-   */
-  color?: string;
-  /**
-   * 自定义类名
-   */
-  class?: string;
-}
-
-const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
----
-
-<svg 
-  xmlns="http://www.w3.org/2000/svg" 
-  width={size} 
-  height={size} 
-  viewBox="0 0 24 24" 
-  fill="none" 
-  stroke={color} 
-  stroke-width="2" 
-  stroke-linecap="round" 
-  stroke-linejoin="round"
-  class={className}
->
-  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-  <polyline points="22 4 12 14.01 9 11.01"></polyline>
-</svg> 

package/dist/components/icons/CheckIcon.astro

@@ -1,38 +0,0 @@
----
-/**
- * 检查图标组件
- */
-interface Props {
-  /**
-   * 图标的大小
-   * @default "24px"
-   */
-  size?: string;
-  /**
-   * 图标的颜色
-   * @default "currentColor"
-   */
-  color?: string;
-  /**
-   * 自定义类名
-   */
-  class?: string;
-}
-
-const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
----
-
-<svg 
-  xmlns="http://www.w3.org/2000/svg" 
-  width={size} 
-  height={size} 
-  viewBox="0 0 24 24" 
-  fill="none" 
-  stroke={color} 
-  stroke-width="2" 
-  stroke-linecap="round" 
-  stroke-linejoin="round"
-  class={className}
->
-  <polyline points="20 6 9 17 4 12"></polyline>
-</svg> 

package/dist/components/icons/ClipboardIcon.astro

@@ -1,39 +0,0 @@
----
-/**
- * 剪贴板图标组件
- */
-interface Props {
-  /**
-   * 图标的大小
-   * @default "24px"
-   */
-  size?: string;
-  /**
-   * 图标的颜色
-   * @default "currentColor"
-   */
-  color?: string;
-  /**
-   * 自定义类名
-   */
-  class?: string;
-}
-
-const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
----
-
-<svg 
-  xmlns="http://www.w3.org/2000/svg" 
-  width={size} 
-  height={size} 
-  viewBox="0 0 24 24" 
-  fill="none" 
-  stroke={color} 
-  stroke-width="2" 
-  stroke-linecap="round" 
-  stroke-linejoin="round"
-  class={className}
->
-  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-</svg> 

package/dist/components/icons/CloseIcon.astro

@@ -1,38 +0,0 @@
----
-/**
- * 关闭图标组件
- */
-interface Props {
-  /**
-   * 图标的大小
-   * @default "16px"
-   */
-  size?: string;
-  /**
-   * 图标的颜色
-   * @default "currentColor"
-   */
-  color?: string;
-  /**
-   * 自定义类名
-   */
-  class?: string;
-}
-
-const { size = '16px', color = 'currentColor', class: className = '' } = Astro.props;
----
-
-<svg 
-  xmlns="http://www.w3.org/2000/svg" 
-  width={size} 
-  height={size} 
-  viewBox="0 0 24 24" 
-  fill="none" 
-  stroke={color} 
-  stroke-width="2" 
-  stroke-linecap="round" 
-  stroke-linejoin="round"
-  class={className}
->
-  <path d="M6 18L18 6M6 6l12 12" />
-</svg>