@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/vue/icons-vue/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-vue/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-vue/VueIcon.vue

@@ -0,0 +1,86 @@
+<!--
+@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-vue/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/icons-vue/index.ts

@@ -0,0 +1 @@
+export { default as List } from './InfoIcon.vue';

package/dist/vue/list-vue/ListItem.vue

@@ -0,0 +1,5 @@
+<template>
+  <li class="mb-2 rounded-md p-2 flex items-center gap-3 hover:bg-accent">
+    <slot />
+  </li>
+</template>

package/dist/vue/list-vue/index.ts

@@ -0,0 +1 @@
+export { default as ListItem } from './ListItem.vue';

package/dist/vue/mac-window-vue/Basic.vue

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

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

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

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

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

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

@@ -0,0 +1,44 @@
+<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/vue/mac-window-vue/index.ts

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