@coffic/cosy-ui 0.8.26 → 0.8.28

package/dist/src-vue/key-catcher/KeyCatcher.vue

@@ -0,0 +1,121 @@
+<!--
+@component KeyCatcher
+
+@description
+KeyCatcher 组件用于全局捕获键盘按键事件，并可通过自定义事件通知外部。支持可选的按键展示浮窗。
+
+@usage
+基本用法：
+```vue
+<KeyCatcher />
+```
+
+显示最近按下的按键：
+```vue
+<KeyCatcher :showKey="true" />
+```
+
+监听全局按键事件：
+```vue
+<KeyCatcher @globalKey="onGlobalKey" />
+```
+
+@props
+@prop {boolean} [showKey=false] - 是否显示最近按下的按键浮窗
+
+@events
+@event globalKey - 当捕获到全局按键时触发，参数为按键字符串
+
+@slots
+无
+-->
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import '../../style';
+
+const lastKey = ref<string | null>(null);
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+const props = defineProps<{ showKey?: boolean }>();
+const emit = defineEmits<{ (e: 'globalKey', key: string): void }>();
+
+const handleKeydown = (event: KeyboardEvent) => {
+    const tag = (event.target as HTMLElement)?.tagName?.toLowerCase();
+    const isEditable =
+        tag === 'input' ||
+        tag === 'textarea' ||
+        (event.target as HTMLElement)?.isContentEditable;
+    if (
+        event.key.length === 1 ||
+        [
+            'Enter',
+            'Escape',
+            'Backspace',
+            'Tab',
+            'Shift',
+            'Control',
+            'Alt',
+            'Meta',
+            'ArrowUp',
+            'ArrowDown',
+            'ArrowLeft',
+            'ArrowRight',
+            'CapsLock',
+            'Delete',
+            'Home',
+            'End',
+            'PageUp',
+            'PageDown',
+        ].includes(event.key)
+    ) {
+        // 只在不是输入框、textarea、contenteditable 时发事件
+        if (/^[a-zA-Z]$/.test(event.key) && !isEditable) {
+            emit('globalKey', event.key);
+        }
+        // 展示按键（如果允许）
+        if (props.showKey) {
+            let key = event.key;
+            if (key === ' ') key = 'Space';
+            lastKey.value = key;
+            if (timer) clearTimeout(timer);
+            timer = setTimeout(() => {
+                lastKey.value = null;
+            }, 3000);
+        }
+    }
+};
+
+onMounted(() => {
+    window.addEventListener('keydown', handleKeydown);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('keydown', handleKeydown);
+    if (timer) clearTimeout(timer);
+});
+</script>
+
+<template>
+    <Transition name="key-fade">
+        <div v-if="props.showKey && lastKey"
+            class="cosy:fixed cosy:bottom-4 cosy:right-4 cosy:bg-accent cosy:shadow-lg cosy:rounded cosy:px-6 cosy:py-3 cosy:z-50 cosy:text-xl cosy:font-bold cosy:text-gray-800 cosy:select-none cosy:pointer-events-none cosy:border cosy:border-gray-200 cosy:backdrop-blur-sm">
+            <span class="cosy:text-blue-600">{{ lastKey }}</span>
+        </div>
+    </Transition>
+</template>
+
+<style scoped>
+.key-fade-enter-active,
+.key-fade-leave-active {
+    transition:
+        opacity 0.2s,
+        transform 0.2s;
+}
+
+.key-fade-enter-from,
+.key-fade-leave-to {
+    opacity: 0;
+    transform: translateY(20px);
+}
+</style>

package/dist/src-vue/key-catcher/index.ts

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

package/dist/src-vue/progress/Progress.vue

@@ -0,0 +1,68 @@
+<!--
+Progress 组件
+
+基于DaisyUI的进度条组件，支持多种颜色主题和进度值动态更新。
+当不传入value时，将显示不确定进度的动画效果。
+
+使用示例：
+```vue
+<Progress />
+<Progress :value="40" />
+<Progress :value="70" color="primary" />
+<Progress :value="30" color="secondary" />
+<Progress :value="50" color="accent" />
+<Progress :value="60" color="info" />
+<Progress :value="80" color="success" />
+<Progress :value="90" color="warning" />
+<Progress :value="20" color="error" />
+```
+
+属性说明：
+- value: 当前进度值
+- 类型: number
+- 默认值: undefined (不传入时显示不确定进度动画)
+- max: 最大值
+- 类型: number
+- 默认值: 100
+- color: 颜色主题
+- 可选值: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+- 默认值: 'neutral'
+-->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import '../../style';
+
+interface Props {
+    // 当前进度值
+    value?: number
+    // 最大值
+    max?: number
+    // 颜色主题
+    color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    value: undefined,
+    max: 100,
+    color: 'neutral'
+})
+
+// 计算进度条的类名（不能用字符串拼接，需枚举所有可能）
+const progressClass = computed(() => {
+    const classes = ['cosy:progress', 'cosy:w-56']
+    if (props.color === 'primary') classes.push('cosy:progress-primary')
+    else if (props.color === 'secondary') classes.push('cosy:progress-secondary')
+    else if (props.color === 'accent') classes.push('cosy:progress-accent')
+    else if (props.color === 'info') classes.push('cosy:progress-info')
+    else if (props.color === 'success') classes.push('cosy:progress-success')
+    else if (props.color === 'warning') classes.push('cosy:progress-warning')
+    else if (props.color === 'error') classes.push('cosy:progress-error')
+    // neutral 不加变体类
+    return classes.join(' ')
+})
+</script>
+
+<template>
+    <progress :class="progressClass" :value="value" :max="max"></progress>
+</template>

package/dist/src-vue/progress/index.ts

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

package/dist/src-vue/status-bar/StatusBar.vue

@@ -0,0 +1,101 @@
+<!--
+StatusBar 组件
+
+一个基于DaisyUI的底部状态栏组件，类似VSCode底部状态栏，采用Raycast风格设计。
+支持左右两侧内容布局，可以放置按钮、图标和文字等元素。
+
+使用示例：
+```vue
+<StatusBar>
+  <template #left>
+    <span>左侧状态信息</span>
+  </template>
+  <template #right>
+    <span>右侧状态信息</span>
+  </template>
+</StatusBar>
+
+<StatusBar>
+  <template #left>
+    <StatusBar.Item>
+      <i class="i-carbon-information"></i>
+      <span>分支: main</span>
+    </StatusBar.Item>
+    <StatusBar.Item>
+      <i class="i-carbon-git-commit"></i>
+      <span>3 changes</span>
+    </StatusBar.Item>
+  </template>
+  <template #right>
+    <StatusBar.Item clickable @click="handleClick">
+      <i class="i-carbon-checkmark"></i>
+      <span>Ready</span>
+    </StatusBar.Item>
+  </template>
+</StatusBar>
+```
+
+属性说明：
+- variant: 状态栏变体
+  - 可选值: 'default' | 'compact'
+  - 默认值: 'default'
+- bordered: 是否显示上边框
+  - 类型: boolean
+  - 默认值: true
+
+插槽：
+- left: 左侧内容区域
+- right: 右侧内容区域
+-->
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import '../../style';
+
+interface Props {
+    // 状态栏变体
+    variant?: 'default' | 'compact'
+    // 是否显示上边框
+    bordered?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    variant: 'default',
+    bordered: true
+})
+
+// 计算状态栏类名
+const statusBarClass = computed(() => {
+    return [
+        'cosy:w-full cosy:h-full',
+        'cosy:flex',
+        'cosy:justify-between',
+        'cosy:items-center',
+        'cosy:bg-base-200',
+        'cosy:text-base-content/70',
+        'cosy:text-xs',
+        'no-drag-region',
+        'cosy:transition-all',
+        'cosy:duration-200',
+        {
+            'cosy:h-8': props.variant === 'default',
+            'cosy:h-6': props.variant === 'compact',
+            'cosy:border-t cosy:border-base-300': props.bordered
+        }
+    ]
+})
+</script>
+
+<template>
+    <div :class="statusBarClass">
+        <!-- 左侧内容区域 -->
+        <div class="cosy:flex cosy:items-center cosy:h-full cosy:overflow-hidden">
+            <slot name="left"></slot>
+        </div>
+
+        <!-- 右侧内容区域 -->
+        <div class="cosy:flex cosy:items-center cosy:h-full cosy:overflow-hidden">
+            <slot name="right"></slot>
+        </div>
+    </div>
+</template>

package/dist/src-vue/status-bar/StatusBarItem.vue

@@ -0,0 +1,97 @@
+<!--
+StatusBarItem 组件
+
+一个用于在StatusBar中显示单个状态项的组件，支持可点击和不可点击两种状态。
+
+使用示例：
+```vue
+<StatusBarItem>
+  <i class="i-carbon-information"></i>
+  <span>状态信息</span>
+</StatusBarItem>
+
+<StatusBarItem clickable @click="handleClick">
+  <i class="i-carbon-git-branch"></i>
+  <span>main</span>
+</StatusBarItem>
+
+<StatusBarItem variant="primary">主要状态</StatusBarItem>
+<StatusBarItem variant="success">成功状态</StatusBarItem>
+<StatusBarItem variant="warning">警告状态</StatusBarItem>
+<StatusBarItem variant="error">错误状态</StatusBarItem>
+```
+
+属性说明：
+- clickable: 是否可点击
+  - 类型: boolean
+  - 默认值: false
+- variant: 状态项变体
+  - 可选值: 'default' | 'primary' | 'success' | 'warning' | 'error'
+  - 默认值: 'default'
+- active: 是否激活状态
+  - 类型: boolean
+  - 默认值: false
+
+事件：
+- click: 点击状态项时触发（仅在clickable为true时有效）
+-->
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import '../../style';
+
+interface Props {
+    // 是否可点击
+    clickable?: boolean
+    // 状态项变体
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error'
+    // 是否激活状态
+    active?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    clickable: false,
+    variant: 'default',
+    active: false
+})
+
+const emit = defineEmits<{
+    (e: 'click', event: MouseEvent): void
+}>()
+
+const handleClick = (event: MouseEvent) => {
+    if (props.clickable) {
+        emit('click', event)
+    }
+}
+
+// 计算状态项类名
+const itemClass = computed(() => {
+    return [
+        'cosy:status-bar-item',
+        'cosy:h-full',
+        'cosy:flex',
+        'cosy:items-center',
+        'cosy:gap-1',
+        'cosy:px-2',
+        'cosy:text-xs',
+        'cosy:transition-all',
+        'cosy:duration-200',
+        {
+            'cosy:cursor-pointer cosy:hover:bg-base-300': props.clickable,
+            'cosy:cursor-default': !props.clickable,
+            'cosy:bg-base-300': props.active,
+            'cosy:text-primary': props.variant === 'primary',
+            'cosy:text-success': props.variant === 'success',
+            'cosy:text-warning': props.variant === 'warning',
+            'cosy:text-error': props.variant === 'error'
+        }
+    ]
+})
+</script>
+
+<template>
+    <div :class="itemClass" @click="handleClick">
+        <slot></slot>
+    </div>
+</template>

package/dist/src-vue/status-bar/index.ts

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

package/dist/src-vue/tool-bar/ToolBar.vue

@@ -0,0 +1,95 @@
+<!--
+ToolBar 组件
+
+一个基于 DaisyUI navbar 的顶部工具栏组件，采用现代化设计。
+支持左中右三段式布局，可以放置按钮、输入框、图标和文字等元素。
+
+使用示例：
+```vue
+<ToolBar>
+  <template #left>
+    <button class="btn btn-ghost btn-sm">
+      <i class="i-carbon-menu"></i>
+    </button>
+  </template>
+  <template #center>
+    <div class="w-full max-w-2xl">
+      <input type="text" class="input input-sm w-full bg-base-300" placeholder="输入URL地址" />
+    </div>
+  </template>
+  <template #right>
+    <button class="btn btn-ghost btn-sm" @click="handleRefresh">
+      <i class="i-carbon-refresh"></i>
+    </button>
+  </template>
+</ToolBar>
+```
+
+属性说明：
+- variant: 工具栏变体
+  - 可选值: 'default' | 'compact'
+  - 默认值: 'default'
+- bordered: 是否显示下边框
+  - 类型: boolean
+  - 默认值: true
+
+插槽：
+- left: 左侧内容区域
+- center: 中间内容区域
+- right: 右侧内容区域
+-->
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import '../../style';
+
+interface Props {
+    // 工具栏变体
+    variant?: 'default' | 'compact'
+    // 是否显示下边框
+    bordered?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    variant: 'default',
+    bordered: true
+})
+
+// 计算工具栏类名
+const toolBarClass = computed(() => {
+    return [
+        'cosy:navbar',
+        'cosy:bg-base-200',
+        'cosy:text-base-content/70',
+        'cosy:text-sm',
+        'no-drag-region',
+        'cosy:transition-all',
+        'cosy:duration-200',
+        'cosy:rounded-box',
+        {
+            'cosy:min-h-12': props.variant === 'default',
+            'cosy:min-h-10': props.variant === 'compact',
+            'cosy:border-b cosy:border-base-300': props.bordered
+        }
+    ]
+})
+</script>
+
+<template>
+    <div :class="toolBarClass">
+        <!-- 左侧内容区域 -->
+        <div class="cosy:navbar-start">
+            <slot name="left"></slot>
+        </div>
+
+        <!-- 中间内容区域 -->
+        <div class="cosy:navbar-center">
+            <slot name="center"></slot>
+        </div>
+
+        <!-- 右侧内容区域 -->
+        <div class="cosy:navbar-end">
+            <slot name="right"></slot>
+        </div>
+    </div>
+</template>

package/dist/src-vue/tool-bar/index.ts

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

package/package.json

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

package/dist/src-astro/code-container/CodePanel.astro

@@ -1,14 +0,0 @@
----
-interface Props {
-  code: string;
-}
-const { code = '' } = Astro.props;
----
-
-<div class="cosy:hidden cosy:code-example-panel" data-panel="code">
-  <pre
-    class="cosy:overflow-x-auto"
-    style="margin:0">
-    <code class="cosy:language-astro">{code}</code>
-  </pre>
-</div>

package/dist/src-astro/team-member/TeamMemberBasic.astro

@@ -1,25 +0,0 @@
----
-/**
- * @component TeamMember.Basic
- *
- * @description
- * 基础的团队成员展示组件示例，展示最简单的成员信息展示方式。
- */
-import '../../style.ts';
-import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../../src/utils/image.ts';
-
-const avatar = getExampleImage({
-  width: 200,
-  height: 200,
-  provider: 'robohash',
-  randomSeed: 'member1',
-});
----
-
-<TeamMember
-  name="张三"
-  role="产品设计师"
-  avatar={avatar}
-  bio="专注于用户体验设计，拥有5年产品设计经验"
-/>

package/dist/src-astro/team-member/TeamMemberCustomStyle.astro

@@ -1,26 +0,0 @@
----
-/**
- * @component TeamMember.CustomStyle
- *
- * @description
- * 自定义样式的团队成员展示组件示例，展示如何使用class属性自定义样式。
- */
-import '../../style.ts';
-import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../../src/utils/image.ts';
-
-const avatar = getExampleImage({
-  width: 200,
-  height: 200,
-  provider: 'robohash',
-  randomSeed: 'member3',
-});
----
-
-<TeamMember
-  name="王五"
-  role="市场总监"
-  avatar={avatar}
-  bio="负责产品市场策略和品牌推广，拥有丰富的市场营销经验"
-  class="cosy:bg-gradient-to-r cosy:from-purple-100 cosy:to-pink-100 cosy:shadow-lg cosy:w-72"
-/>

package/dist/src-astro/team-member/TeamMemberGroup.astro

@@ -1,60 +0,0 @@
----
-/**
- * @component TeamMember.Group
- *
- * @description
- * 团队成员组展示组件示例，展示如何组合多个团队成员。
- */
-import '../../style.ts';
-import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../../src/utils/image.ts';
-
-const members = [
-  {
-    name: '张三',
-    title: '产品设计师',
-    avatar: getExampleImage({
-      width: 200,
-      height: 200,
-      provider: 'robohash',
-      randomSeed: 'member1',
-    }),
-    description: '专注于用户体验设计，拥有5年产品设计经验',
-  },
-  {
-    name: '李四',
-    title: '高级开发工程师',
-    avatar: getExampleImage({
-      width: 200,
-      height: 200,
-      provider: 'robohash',
-      randomSeed: 'member2',
-    }),
-    description: '全栈开发专家，热爱开源项目，专注于前端框架和性能优化',
-  },
-  {
-    name: '王五',
-    title: '市场总监',
-    avatar: getExampleImage({
-      width: 200,
-      height: 200,
-      provider: 'robohash',
-      randomSeed: 'member3',
-    }),
-    description: '负责产品市场策略和品牌推广，拥有丰富的市场营销经验',
-  },
-];
----
-
-<div class="cosy:grid cosy:grid-cols-3 md:cosy:grid-cols-3 cosy:gap-8">
-  {
-    members.map((member) => (
-      <TeamMember
-        name={member.name}
-        role={member.title}
-        avatar={member.avatar}
-        bio={member.description}
-      />
-    ))
-  }
-</div>

package/dist/src-astro/team-member/TeamMemberWithSocial.astro

@@ -1,30 +0,0 @@
----
-/**
- * @component TeamMember.WithSocial
- *
- * @description
- * 带社交媒体链接的团队成员展示组件示例，展示如何添加社交媒体链接。
- */
-import '../../style.ts';
-import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../../src/utils/image.ts';
-
-const avatar = getExampleImage({
-  width: 200,
-  height: 200,
-  provider: 'robohash',
-  randomSeed: 'member2',
-});
----
-
-<TeamMember
-  name="李四"
-  role="高级开发工程师"
-  avatar={avatar}
-  bio="全栈开发专家，热爱开源项目，专注于前端框架和性能优化"
-  socialLinks={[
-    { platform: 'github', url: 'https://github.com' },
-    { platform: 'twitter', url: 'https://twitter.com' },
-    { platform: 'linkedin', url: 'https://linkedin.com' },
-  ]}
-/>