@coffic/cosy-ui 0.8.17 → 0.8.19

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

@@ -100,184 +100,163 @@ import AlertDialog from '../alert-dialog/AlertDialog.vue';
 import { ref, defineComponent, type PropType } from 'vue';
 
 export default defineComponent({
-  name: 'MacWindow',
-  components: {
-    AlertDialog,
-  },
-  props: {
-    height: {
-      type: String,
-      default: 'h-96',
+    name: 'MacWindow',
+    components: {
+        AlertDialog,
     },
-    title: {
-      type: String,
-      default: '',
+    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,
+        },
     },
-    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);
+    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;
-    }
+        // 如果没有设置默认标签或默认标签不在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 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 handleMinimizeWindow = () => {
+            alertMessage.value = '最小化窗口（这是演示，不会真实操作）';
+            showAlertDialog.value = true;
+            if (props.onMinimizeWindow) {
+                props.onMinimizeWindow();
+            }
+        };
 
-    const handleMaximizeWindow = () => {
-      alertMessage.value = '最大化窗口（这是演示，不会真实操作）';
-      showAlertDialog.value = true;
-      if (props.onMaximizeWindow) {
-        props.onMaximizeWindow();
-      }
-    };
+        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);
-      }
-    };
+        const handleTabClick = (tab: string) => {
+            activeTab.value = tab;
+            if (props.onTabClick) {
+                props.onTabClick(tab);
+            }
+        };
 
-    return {
-      showAlertDialog,
-      alertMessage,
-      activeTab,
-      handleCloseWindow,
-      handleMinimizeWindow,
-      handleMaximizeWindow,
-      handleTabClick,
-    };
-  },
+        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: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: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>
+            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 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: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" />
+        <!-- 主要内容区域 -->
+        <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>
+                <!-- 主内容插槽 -->
+                <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 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>
     </div>
-  </div>
 
-  <!-- AlertDialog 组件 -->
-  <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
+    <!-- AlertDialog 组件 -->
+    <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
 </template>

package/dist/src-vue/mac-window/index.ts

@@ -1,36 +1,2 @@
-import Basic from './Basic.vue';
-import WithTabs from './WithTabs.vue';
-import WithEvents from './WithEvents.vue';
-import WithToolbar from './WithToolbar.vue';
-import WithSidebar from './WithSidebar.vue';
-import CustomHeight from './CustomHeight.vue';
-import BasicSource from './Basic.vue?raw';
-import WithTabsSource from './WithTabs.vue?raw';
-import WithEventsSource from './WithEvents.vue?raw';
-import WithToolbarSource from './WithToolbar.vue?raw';
-import WithSidebarSource from './WithSidebar.vue?raw';
-import CustomHeightSource from './CustomHeight.vue?raw';
-import { extractSimpleExample } from '../../astro/src/utils/component';
-
 // 导出主组件
 export { default as MacWindow } from './MacWindow.vue';
-
-// 将示例组件整合为一个对象导出
-export const MacWindowExamples = {
-  Basic,
-  WithTabs,
-  WithEvents,
-  WithToolbar,
-  WithSidebar,
-  CustomHeight,
-};
-
-// 导出示例组件的源代码（简化版本）
-export const MacWindowExampleCodes = {
-  Basic: extractSimpleExample(BasicSource, 'MacWindow'),
-  WithTabs: extractSimpleExample(WithTabsSource, 'MacWindow'),
-  WithEvents: extractSimpleExample(WithEventsSource, 'MacWindow'),
-  WithToolbar: extractSimpleExample(WithToolbarSource, 'MacWindow'),
-  WithSidebar: extractSimpleExample(WithSidebarSource, 'MacWindow'),
-  CustomHeight: extractSimpleExample(CustomHeightSource, 'MacWindow'),
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.8.17",
+  "version": "0.8.19",
   "description": "An astro component library",
   "author": {
     "name": "nookery",

package/dist/src-vue/iPhone/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/src-vue/iPhone/CustomBackground.vue

@@ -1,35 +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/src-vue/iPhone/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/src-vue/iPhone/WeatherApp.vue

@@ -1,143 +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/src-vue/mac-window/Basic.vue

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

package/dist/src-vue/mac-window/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>