@coffic/cosy-ui 0.8.25 → 0.8.27

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.25",
+  "version": "0.8.27",
   "description": "An astro component library",
   "author": {
     "name": "nookery",