@coffic/cosy-ui 0.8.26 → 0.8.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app.css +1 -1
- package/dist/index-astro.ts +1 -0
- package/dist/index-vue.ts +18 -0
- package/dist/src-astro/badge/Badge.astro +67 -0
- package/dist/src-astro/badge/index.ts +1 -0
- package/dist/src-vue/badge/Badge.vue +66 -0
- package/dist/src-vue/badge/index.ts +1 -0
- package/dist/src-vue/card/Card.vue +52 -0
- package/dist/src-vue/card/CardCourse.vue +34 -0
- package/dist/src-vue/card/index.ts +2 -0
- package/dist/src-vue/key-catcher/KeyCatcher.vue +121 -0
- package/dist/src-vue/key-catcher/index.ts +1 -0
- package/dist/src-vue/progress/Progress.vue +68 -0
- package/dist/src-vue/progress/index.ts +1 -0
- package/dist/src-vue/status-bar/StatusBar.vue +101 -0
- package/dist/src-vue/status-bar/StatusBarItem.vue +97 -0
- package/dist/src-vue/status-bar/index.ts +2 -0
- package/dist/src-vue/tool-bar/ToolBar.vue +95 -0
- package/dist/src-vue/tool-bar/index.ts +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
ToolBar 组件
|
|
3
|
+
|
|
4
|
+
一个基于 DaisyUI navbar 的顶部工具栏组件，采用现代化设计。
|
|
5
|
+
支持左中右三段式布局，可以放置按钮、输入框、图标和文字等元素。
|
|
6
|
+
|
|
7
|
+
使用示例：
|
|
8
|
+
```vue
|
|
9
|
+
<ToolBar>
|
|
10
|
+
<template #left>
|
|
11
|
+
<button class="btn btn-ghost btn-sm">
|
|
12
|
+
<i class="i-carbon-menu"></i>
|
|
13
|
+
</button>
|
|
14
|
+
</template>
|
|
15
|
+
<template #center>
|
|
16
|
+
<div class="w-full max-w-2xl">
|
|
17
|
+
<input type="text" class="input input-sm w-full bg-base-300" placeholder="输入URL地址" />
|
|
18
|
+
</div>
|
|
19
|
+
</template>
|
|
20
|
+
<template #right>
|
|
21
|
+
<button class="btn btn-ghost btn-sm" @click="handleRefresh">
|
|
22
|
+
<i class="i-carbon-refresh"></i>
|
|
23
|
+
</button>
|
|
24
|
+
</template>
|
|
25
|
+
</ToolBar>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
属性说明：
|
|
29
|
+
- variant: 工具栏变体
|
|
30
|
+
- 可选值: 'default' | 'compact'
|
|
31
|
+
- 默认值: 'default'
|
|
32
|
+
- bordered: 是否显示下边框
|
|
33
|
+
- 类型: boolean
|
|
34
|
+
- 默认值: true
|
|
35
|
+
|
|
36
|
+
插槽：
|
|
37
|
+
- left: 左侧内容区域
|
|
38
|
+
- center: 中间内容区域
|
|
39
|
+
- right: 右侧内容区域
|
|
40
|
+
-->
|
|
41
|
+
|
|
42
|
+
<script setup lang="ts">
|
|
43
|
+
import { computed } from 'vue';
|
|
44
|
+
import '../../style';
|
|
45
|
+
|
|
46
|
+
interface Props {
|
|
47
|
+
// 工具栏变体
|
|
48
|
+
variant?: 'default' | 'compact'
|
|
49
|
+
// 是否显示下边框
|
|
50
|
+
bordered?: boolean
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
54
|
+
variant: 'default',
|
|
55
|
+
bordered: true
|
|
56
|
+
})
|
|
57
|
+
|
|
58
|
+
// 计算工具栏类名
|
|
59
|
+
const toolBarClass = computed(() => {
|
|
60
|
+
return [
|
|
61
|
+
'cosy:navbar',
|
|
62
|
+
'cosy:bg-base-200',
|
|
63
|
+
'cosy:text-base-content/70',
|
|
64
|
+
'cosy:text-sm',
|
|
65
|
+
'no-drag-region',
|
|
66
|
+
'cosy:transition-all',
|
|
67
|
+
'cosy:duration-200',
|
|
68
|
+
'cosy:rounded-box',
|
|
69
|
+
{
|
|
70
|
+
'cosy:min-h-12': props.variant === 'default',
|
|
71
|
+
'cosy:min-h-10': props.variant === 'compact',
|
|
72
|
+
'cosy:border-b cosy:border-base-300': props.bordered
|
|
73
|
+
}
|
|
74
|
+
]
|
|
75
|
+
})
|
|
76
|
+
</script>
|
|
77
|
+
|
|
78
|
+
<template>
|
|
79
|
+
<div :class="toolBarClass">
|
|
80
|
+
<!-- 左侧内容区域 -->
|
|
81
|
+
<div class="cosy:navbar-start">
|
|
82
|
+
<slot name="left"></slot>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<!-- 中间内容区域 -->
|
|
86
|
+
<div class="cosy:navbar-center">
|
|
87
|
+
<slot name="center"></slot>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<!-- 右侧内容区域 -->
|
|
91
|
+
<div class="cosy:navbar-end">
|
|
92
|
+
<slot name="right"></slot>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
</template>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ToolBar } from './ToolBar.vue';
|