@coffic/cosy-ui 0.6.12 → 0.6.16

package/dist/vue/Icons/InfoIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="info" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/LinkIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="link" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/MenuIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="menu" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/SearchIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="search" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/SettingsIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="settings" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/UserIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="user" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/Icons/VueIcon.vue

@@ -0,0 +1,76 @@
+<!--
+@component Icon
+
+@description
+Icon 组件是一个可重用的SVG图标组件，用于显示各种图标。
+使用共享的图标数据，便于维护和一致性。
+
+@usage
+```vue
+<template>
+  <Icon name="alertTriangle" />
+  
+  <Icon name="settings" size="32px" color="red" />
+  
+  <Icon name="check" class="cosy:w-6 cosy:h-6 cosy:text-success" />
+</template>
+
+<script setup>
+import { Icon } from 'cosy-ui';
+</script>
+```
+
+@props
+@prop {string} name - 图标名称，必须在iconData中存在
+@prop {string} [size='24px'] - 图标大小
+@prop {string} [color='currentColor'] - 图标颜色
+@prop {string} [class=''] - 自定义类名
+-->
+
+<script setup lang="ts">
+import '../../style.ts'
+import { computed } from 'vue'
+import { iconData } from '../../assets/iconData'
+
+interface Props {
+    /**
+     * 图标名称，必须在iconData中存在
+     */
+    name: string;
+    /**
+     * 图标大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+})
+
+const icon = computed(() => {
+    return iconData[props.name] || null
+})
+
+const viewBox = computed(() => {
+    return icon.value?.viewBox || '0 0 24 24'
+})
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" :viewBox="viewBox" fill="none" :stroke="color"
+        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :class="props.class">
+        <path v-if="icon" :d="icon.path" />
+    </svg>
+</template>

package/dist/vue/Icons/XCircleIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+    /**
+     * 图标的大小
+     * @default "24px"
+     */
+    size?: string;
+    /**
+     * 图标的颜色
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: '24px',
+    color: 'currentColor',
+    class: ''
+});
+</script>
+
+<template>
+    <Icon name="xCircle" :size="size" :color="color" :class="props.class" />
+</template>

package/dist/vue/MacWindow/Basic.vue

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

package/dist/vue/MacWindow/CustomHeight.vue

@@ -0,0 +1,13 @@
+<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/vue/{MacWindow.vue → MacWindow/MacWindow.vue}

@@ -18,16 +18,15 @@ MacWindow 组件模拟 macOS 风格的应用窗口，包含标题栏、工具栏
 <template>
   <MacWindow
     title="设置"
-    v-model="activeTab"
-    :tabs="[
-      { label: '通用', value: 'general' },
-      { label: '外观', value: 'appearance' },
-      { label: '高级', value: 'advanced' }
-    ]"
+    :tabs="['通用', '外观', '高级']"
+    :onTabClick="(tab) => { 
+      activeTab = tab;
+      console.log('切换到标签:', tab);
+    }"
   >
-    <div v-if="activeTab === 'general'">通用设置内容</div>
-    <div v-if="activeTab === 'appearance'">外观设置内容</div>
-    <div v-if="activeTab === 'advanced'">高级设置内容</div>
+    <div v-if="activeTab === '通用'">通用设置内容</div>
+    <div v-if="activeTab === '外观'">外观设置内容</div>
+    <div v-if="activeTab === '高级'">高级设置内容</div>
   </MacWindow>
 </template>
 
@@ -35,10 +34,21 @@ MacWindow 组件模拟 macOS 风格的应用窗口，包含标题栏、工具栏
 import { ref } from 'vue';
 import { MacWindow } from 'cosy-ui';
 
-const activeTab = ref('general');
+const activeTab = ref('通用');
 </script>
 ```
 
+带自定义事件处理：
+```vue
+<MacWindow 
+  title="文件浏览器"
+  :onCloseWindow="() => handleClose()"
+  :onTabClick="(tab) => handleTabChange(tab)"
+>
+  <div>窗口内容</div>
+</MacWindow>
+```
+
 带工具栏和状态栏：
 ```vue
 <MacWindow title="文件浏览器">
@@ -66,8 +76,11 @@ const activeTab = ref('general');
 @prop {String} [height='h-96'] - 窗口高度
 @prop {String} [title=''] - 窗口标题
 @prop {Boolean} [withShadow=true] - 是否显示阴影效果
-@prop {Array} [tabs=[]] - 标签页数组，每个标签包含label和value属性
-@prop {String} [modelValue=''] - 当前选中的标签页value值，可使用v-model绑定
+@prop {Array} [tabs=[]] - 标签页字符串数组，如 ['标签1', '标签2', '标签3']
+@prop {Function} [onCloseWindow=null] - 关闭窗口时调用的函数
+@prop {Function} [onMinimizeWindow=null] - 最小化窗口时调用的函数
+@prop {Function} [onMaximizeWindow=null] - 最大化窗口时调用的函数
+@prop {Function} [onTabClick=null] - 点击标签页时调用的函数，接收标签页值作为参数
 
 @slots
 @slot default - 窗口主要内容
@@ -76,22 +89,13 @@ const activeTab = ref('general');
 @slot status - 状态栏内容，位于窗口底部
 
 @emits
-@emit {close} - 点击关闭按钮时触发
-@emit {minimize} - 点击最小化按钮时触发
-@emit {maximize} - 点击最大化按钮时触发
 @emit {update:modelValue} - 切换标签页时触发，用于v-model
 -->
 
 <script lang="ts">
-import '../app.css'
-import AlertDialog from './AlertDialog.vue'
-import { ref, defineComponent } from 'vue'
-
-// 定义标签页类型
-interface Tab {
-    label: string;
-    value: string;
-}
+import '../../style.ts'
+import AlertDialog from '../AlertDialog/AlertDialog.vue'
+import { ref, defineComponent, type PropType } from 'vue'
 
 export default defineComponent({
     name: 'MacWindow',
@@ -112,44 +116,71 @@ export default defineComponent({
             default: true
         },
         tabs: {
-            type: Array as () => Tab[],
+            type: Array as PropType<string[]>,
             default: () => []
         },
-        modelValue: {
-            type: String,
-            default: ''
+        onCloseWindow: {
+            type: Function,
+            default: null
+        },
+        onMinimizeWindow: {
+            type: Function,
+            default: null
+        },
+        onMaximizeWindow: {
+            type: Function,
+            default: null
+        },
+        onTabClick: {
+            type: Function,
+            default: null
         }
     },
-    emits: ['close', 'minimize', 'maximize', 'update:modelValue'],
-    setup(props, { emit }) {
+    setup(props) {
         const showAlertDialog = ref(false)
         const alertMessage = ref('')
+        const activeTab = ref('')
+
+        // 默认选择第一个标签
+        if (props.tabs.length > 0 && !activeTab.value) {
+            activeTab.value = props.tabs[0] as string
+        }
 
         const handleCloseWindow = () => {
             alertMessage.value = '关闭APP窗口（这是演示，不会真实操作）'
             showAlertDialog.value = true
-            emit('close')
+            if (props.onCloseWindow) {
+                props.onCloseWindow()
+            }
         }
 
         const handleMinimizeWindow = () => {
             alertMessage.value = '最小化窗口（这是演示，不会真实操作）'
             showAlertDialog.value = true
-            emit('minimize')
+            if (props.onMinimizeWindow) {
+                props.onMinimizeWindow()
+            }
         }
 
         const handleMaximizeWindow = () => {
             alertMessage.value = '最大化窗口（这是演示，不会真实操作）'
             showAlertDialog.value = true
-            emit('maximize')
+            if (props.onMaximizeWindow) {
+                props.onMaximizeWindow()
+            }
         }
 
-        const handleTabClick = (value: string) => {
-            emit('update:modelValue', value)
+        const handleTabClick = (tab: string) => {
+            activeTab.value = tab
+            if (props.onTabClick) {
+                props.onTabClick(tab)
+            }
         }
 
         return {
             showAlertDialog,
             alertMessage,
+            activeTab,
             handleCloseWindow,
             handleMinimizeWindow,
             handleMaximizeWindow,
@@ -185,11 +216,11 @@ export default defineComponent({
                 <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',
-                        modelValue === tab.value
+                        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.value)">
-                        {{ tab.label }}
+                    ]" @click="handleTabClick(tab)">
+                        {{ tab }}
                     </button>
                 </div>
             </div>
@@ -219,6 +250,7 @@ export default defineComponent({
             </div>
         </div>
     </div>
+
     <!-- AlertDialog 组件 -->
     <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
 </template>

package/dist/vue/MacWindow/WithEvents.vue

@@ -0,0 +1,34 @@
+<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/vue/MacWindow/WithSidebar.vue

@@ -0,0 +1,21 @@
+<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/vue/MacWindow/WithTabs.vue

@@ -0,0 +1,21 @@
+<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="['通用', '外观', '高级']" :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/vue/MacWindow/WithToolbar.vue

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