@coffic/cosy-ui 0.8.16 → 0.8.18

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

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

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

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

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

@@ -1,44 +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>

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

@@ -1,36 +0,0 @@
-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'),
-};