@coffic/cosy-ui 0.8.25 → 0.8.26
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.
|
@@ -27,13 +27,25 @@
|
|
|
27
27
|
* </Alert>
|
|
28
28
|
* ```
|
|
29
29
|
*
|
|
30
|
+
* 自定义操作按钮：
|
|
31
|
+
* ```astro
|
|
32
|
+
* <Alert type="info">
|
|
33
|
+
* 这是带自定义操作的提示
|
|
34
|
+
* <slot name="action">
|
|
35
|
+
* <button>操作</button>
|
|
36
|
+
* </slot>
|
|
37
|
+
* </Alert>
|
|
38
|
+
* ```
|
|
39
|
+
*
|
|
30
40
|
* @props
|
|
31
41
|
* @prop {('info'|'success'|'warning'|'error')} [type='info'] - 提示类型，影响颜色和图标
|
|
32
42
|
* @prop {string} [title] - 提示标题，可选
|
|
33
43
|
* @prop {string} [class] - 自定义 CSS 类名
|
|
44
|
+
* @prop {boolean} [closable=true] - 是否可关闭
|
|
34
45
|
*
|
|
35
46
|
* @slots
|
|
36
47
|
* @slot default - 提示内容
|
|
48
|
+
* @slot action - 自定义操作按钮，显示在 alert 右侧
|
|
37
49
|
*/
|
|
38
50
|
|
|
39
51
|
// 注意：
|
|
@@ -46,15 +58,22 @@ import {
|
|
|
46
58
|
SuccessIcon,
|
|
47
59
|
WarningIcon,
|
|
48
60
|
ErrorIcon,
|
|
61
|
+
CloseIcon,
|
|
49
62
|
} from '../../index-astro';
|
|
50
63
|
|
|
51
64
|
interface Props {
|
|
52
65
|
type?: 'info' | 'success' | 'warning' | 'error';
|
|
53
66
|
title?: string;
|
|
54
67
|
class?: string;
|
|
68
|
+
closable?: boolean;
|
|
55
69
|
}
|
|
56
70
|
|
|
57
|
-
const {
|
|
71
|
+
const {
|
|
72
|
+
type = 'info',
|
|
73
|
+
title,
|
|
74
|
+
class: className = '',
|
|
75
|
+
closable = true,
|
|
76
|
+
} = Astro.props;
|
|
58
77
|
|
|
59
78
|
// 根据类型设置样式
|
|
60
79
|
const alertClass = {
|
|
@@ -73,12 +92,17 @@ const IconComponent = {
|
|
|
73
92
|
}[type as 'info' | 'success' | 'warning' | 'error'];
|
|
74
93
|
---
|
|
75
94
|
|
|
76
|
-
<div
|
|
95
|
+
<div
|
|
96
|
+
class={`cosy:alert cosy:w-full cosy:flex ${alertClass} ${className}`}
|
|
97
|
+
role="alert">
|
|
77
98
|
<div
|
|
78
|
-
class="cosy:flex cosy:flex-row cosy:items-center cosy:gap-4 cosy:
|
|
79
|
-
<IconComponent
|
|
99
|
+
class="cosy:flex cosy:flex-row cosy:items-center cosy:gap-4 cosy:justify-between cosy:w-full">
|
|
100
|
+
<IconComponent
|
|
101
|
+
class="cosy:btn cosy:btn-sm cosy:btn-ghost cosy:btn-circle"
|
|
102
|
+
/>
|
|
80
103
|
|
|
81
|
-
<div
|
|
104
|
+
<div
|
|
105
|
+
class="cosy:flex cosy:flex-col cosy:items-start cosy:h-full cosy:flex-1">
|
|
82
106
|
{
|
|
83
107
|
title && (
|
|
84
108
|
<h3 class="cosy:font-bold" style="margin-top: 0 !important">
|
|
@@ -96,5 +120,21 @@ const IconComponent = {
|
|
|
96
120
|
|
|
97
121
|
{!title && <slot />}
|
|
98
122
|
</div>
|
|
123
|
+
|
|
124
|
+
<div
|
|
125
|
+
class="cosy:flex cosy:flex-row cosy:items-center cosy:gap-2"
|
|
126
|
+
data-role="actions">
|
|
127
|
+
<slot name="action" />
|
|
128
|
+
|
|
129
|
+
{
|
|
130
|
+
closable && (
|
|
131
|
+
<button
|
|
132
|
+
class="cosy:ml-auto cosy:btn cosy:btn-ghost cosy:btn-sm cosy:btn-circle"
|
|
133
|
+
onclick="this.parentElement.parentElement.style.display = 'none';">
|
|
134
|
+
<CloseIcon class="cosy:h-5 cosy:w-5" />
|
|
135
|
+
</button>
|
|
136
|
+
)
|
|
137
|
+
}
|
|
138
|
+
</div>
|
|
99
139
|
</div>
|
|
100
140
|
</div>
|
|
@@ -26,75 +26,101 @@ Alert 组件用于向用户显示重要的提示信息，支持多种类型的
|
|
|
26
26
|
</Alert>
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
+
自定义操作按钮：
|
|
30
|
+
```vue
|
|
31
|
+
<Alert type="info">
|
|
32
|
+
这是带自定义操作的提示
|
|
33
|
+
<template #action>
|
|
34
|
+
<button @click="doSomething">操作</button>
|
|
35
|
+
</template>
|
|
36
|
+
</Alert>
|
|
37
|
+
```
|
|
38
|
+
|
|
29
39
|
@props
|
|
30
40
|
@prop {('info'|'success'|'warning'|'error')} [type='info'] - 提示类型，影响颜色和图标
|
|
31
41
|
@prop {string} [title] - 提示标题，可选
|
|
32
42
|
@prop {string} [class] - 自定义 CSS 类名
|
|
43
|
+
@prop {boolean} [closable] - 是否可关闭，默认可关闭
|
|
33
44
|
|
|
34
45
|
@slots
|
|
35
46
|
@slot default - 提示内容
|
|
47
|
+
@slot action - 自定义操作按钮，显示在 alert 右侧
|
|
36
48
|
-->
|
|
37
49
|
|
|
38
50
|
<script setup lang="ts">
|
|
39
51
|
import '../../style';
|
|
40
52
|
import { computed } from 'vue';
|
|
41
53
|
import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../icons/index';
|
|
54
|
+
import { RiCloseLine } from '@remixicon/vue';
|
|
42
55
|
|
|
43
56
|
interface Props {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
57
|
+
type?: 'info' | 'success' | 'warning' | 'error';
|
|
58
|
+
title?: string;
|
|
59
|
+
class?: string;
|
|
60
|
+
closable?: boolean;
|
|
47
61
|
}
|
|
48
62
|
|
|
49
63
|
const props = withDefaults(defineProps<Props>(), {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
64
|
+
type: 'info',
|
|
65
|
+
title: '',
|
|
66
|
+
class: '',
|
|
67
|
+
closable: true,
|
|
53
68
|
});
|
|
54
69
|
|
|
70
|
+
const emit = defineEmits(['close']);
|
|
71
|
+
|
|
72
|
+
const handleClose = () => {
|
|
73
|
+
emit('close');
|
|
74
|
+
};
|
|
75
|
+
|
|
55
76
|
// 根据类型设置样式
|
|
56
77
|
const alertClass = computed(() => {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
78
|
+
const alertClasses = {
|
|
79
|
+
info: 'cosy:alert-info',
|
|
80
|
+
success: 'cosy:alert-success',
|
|
81
|
+
warning: 'cosy:alert-warning',
|
|
82
|
+
error: 'cosy:alert-error',
|
|
83
|
+
};
|
|
84
|
+
return alertClasses[props.type];
|
|
64
85
|
});
|
|
65
86
|
|
|
66
87
|
// 根据类型设置图标组件
|
|
67
88
|
const IconComponent = computed(() => {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
89
|
+
const iconComponents = {
|
|
90
|
+
info: InfoIcon,
|
|
91
|
+
success: SuccessIcon,
|
|
92
|
+
warning: WarningIcon,
|
|
93
|
+
error: ErrorIcon,
|
|
94
|
+
};
|
|
95
|
+
return iconComponents[props.type];
|
|
75
96
|
});
|
|
76
97
|
</script>
|
|
77
98
|
|
|
78
99
|
<template>
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
100
|
+
<div :class="['cosy:alert cosy:w-full cosy:flex', alertClass, props.class]" role="alert">
|
|
101
|
+
<div class="cosy:flex cosy:flex-row cosy:items-center cosy:gap-4 cosy:justify-between cosy:w-full">
|
|
102
|
+
<div class="cosy:flex cosy:items-center cosy:gap-4">
|
|
103
|
+
<component :is="IconComponent" class="cosy:btn cosy:btn-sm cosy:btn-ghost cosy:btn-circle" />
|
|
104
|
+
|
|
105
|
+
<div class="cosy:flex cosy:flex-col cosy:items-start cosy:h-full cosy:flex-1">
|
|
106
|
+
<h3 v-if="props.title" class="cosy:font-bold" style="margin-top: 0 !important">
|
|
107
|
+
{{ props.title }}
|
|
108
|
+
</h3>
|
|
109
|
+
<div v-if="props.title" class="cosy:text-xs">
|
|
110
|
+
<slot />
|
|
111
|
+
</div>
|
|
112
|
+
<slot v-else />
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div class="cosy:flex cosy:flex-row cosy:items-center cosy:gap-2" data-role="actions">
|
|
117
|
+
<slot name="action" />
|
|
118
|
+
|
|
119
|
+
<button v-if="props.closable" @click="handleClose"
|
|
120
|
+
class="cosy:btn cosy:btn-ghost cosy:btn-sm cosy:btn-circle">
|
|
121
|
+
<RiCloseLine class="cosy:h-5 cosy:w-5" />
|
|
122
|
+
</button>
|
|
123
|
+
</div>
|
|
95
124
|
</div>
|
|
96
|
-
<slot v-else />
|
|
97
|
-
</div>
|
|
98
125
|
</div>
|
|
99
|
-
</div>
|
|
100
126
|
</template>
|