Skip to content

Commit 59db330

Browse files
hotdogc1017hotdogc1017
committed
fix(alert): the component's content no align
1 parent 9a2e546 commit 59db330

File tree

2 files changed

+105
-111
lines changed

2 files changed

+105
-111
lines changed

‎packages/components/alert/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"build:vite": "vite build",
3737
"build": "rolldown -c rolldown.config.ts",
3838
"dev": "rolldown --watch -c rolldown.config.ts",
39-
"bump": "bump --tag '@vue-nextui/alert@' --sign"
39+
"bump": "bumpp --tag '@vue-nextui/alert@' --sign"
4040
},
4141
"dependencies": {
4242
"@vue-nextui/shared": "workspace: *"

‎packages/components/alert/src/Alert.vue

Lines changed: 104 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,128 @@
11
<script lang="ts" setup>
2-
import { computed, ref } from 'vue'
3-
import { alert } from '@heroui/theme'
4-
import { defaultIconPath, successIconPath, warningIconPath } from './constant'
2+
import { computed } from "vue";
3+
import { alert } from "@heroui/theme";
4+
import { defaultIconPath, successIconPath, warningIconPath } from "./constant";
55
66
export interface AlertProps {
7-
/**
8-
* 警告消息的标题
9-
*/
10-
title?: string
11-
/**
12-
* 警告消息的描述
13-
*/
14-
description?: string
15-
/**
16-
* 警告是否可见。
17-
* @default false
18-
*/
19-
isVisible?: boolean
20-
/**
21-
* 警告默认是否可见。
22-
* @default false
23-
*/
24-
isDefaultVisible?: boolean
25-
/**
26-
* 是否允许用户关闭警告
27-
*/
28-
isClosable?: boolean
7+
/**
8+
* 警告消息的标题
9+
*/
10+
title?: string;
11+
/**
12+
* 警告消息的描述
13+
*/
14+
description?: string;
15+
/**
16+
* 警告是否可见。
17+
* @default false
18+
*/
19+
isVisible?: boolean;
20+
/**
21+
* 警告默认是否可见。
22+
* @default false
23+
*/
24+
isDefaultVisible?: boolean;
25+
/**
26+
* 是否允许用户关闭警告
27+
*/
28+
isClosable?: boolean;
2929
}
3030
3131
export interface AlertVariantProps {
32-
variant?: 'solid' | 'flat' | 'faded' | 'bordered' | undefined
33-
color?:
34-
| 'default'
35-
| 'primary'
36-
| 'secondary'
37-
| 'success'
38-
| 'warning'
39-
| 'danger'
40-
| undefined
41-
radius?: 'sm' | 'none' | 'md' | 'lg' | 'full' | undefined
42-
hideIcon?: boolean | undefined
43-
hideIconWrapper?: boolean | undefined
44-
hasContent?: boolean | undefined
32+
variant?: "solid" | "flat" | "faded" | "bordered" | undefined;
33+
color?:
34+
| "default"
35+
| "primary"
36+
| "secondary"
37+
| "success"
38+
| "warning"
39+
| "danger"
40+
| undefined;
41+
radius?: "sm" | "none" | "md" | "lg" | "full" | undefined;
42+
hideIcon?: boolean | undefined;
43+
hideIconWrapper?: boolean | undefined;
44+
hasContent?: boolean | undefined;
4545
}
4646
47-
const props = withDefaults(defineProps<AlertProps & AlertVariantProps>(), {
48-
49-
})
47+
const props = withDefaults(defineProps<AlertProps & AlertVariantProps>(), {});
5048
5149
const emits = defineEmits<{
52-
/**
53-
* 关闭按钮被点击时调用的函数
54-
*/
55-
(e: 'close'): void
56-
/**
57-
* 警告可见状态变化时的事件处理程序。
58-
* @param isVisible 布尔值，表示是否可见
59-
* @returns void
60-
*/
61-
(e: 'visibleChange', isVisible: boolean): void
62-
}>()
50+
/**
51+
* 关闭按钮被点击时调用的函数
52+
*/
53+
(e: "close"): void;
54+
/**
55+
* 警告可见状态变化时的事件处理程序。
56+
* @param isVisible 布尔值，表示是否可见
57+
* @returns void
58+
*/
59+
(e: "visibleChange", isVisible: boolean): void;
60+
}>();
6361
6462
const { base, mainWrapper, title, description, alertIcon, iconWrapper } = alert(
65-
{
66-
color: props.color ?? 'default',
67-
variant: props.variant ?? 'flat',
68-
hideIconWrapper: props.hideIconWrapper,
69-
},
70-
)
63+
{
64+
color: props.color ?? "default",
65+
variant: props.variant ?? "flat",
66+
hideIconWrapper: props.hideIconWrapper,
67+
hasContent: !!props.description,
68+
},
69+
);
7170
7271
const icon = computed(() => {
73-
const color = props.color
74-
75-
if (color === 'default' || color === 'secondary' || color === 'primary') {
76-
return defaultIconPath
77-
}
78-
else if (color === 'success') {
79-
return successIconPath
80-
}
81-
else if (color === 'warning' || color === 'danger') {
82-
return warningIconPath
83-
}
84-
else {
85-
return defaultIconPath
86-
}
87-
})
72+
const color = props.color;
73+
74+
if (color === "default" || color === "secondary" || color === "primary") {
75+
return defaultIconPath;
76+
} else if (color === "success") {
77+
return successIconPath;
78+
} else if (color === "warning" || color === "danger") {
79+
return warningIconPath;
80+
} else {
81+
return defaultIconPath;
82+
}
83+
});
8884
8985
function onClose() {
90-
emits('close')
86+
emits("close");
9187
}
9288
</script>
9389

9490
<template>
95-
<div :class="base()">
96-
<slot name="startContent" />
97-
98-
<div v-if="!props.hideIcon" :class="iconWrapper()">
99-
<slot name="icon">
100-
<svg
101-
fill="none"
102-
height="24"
103-
viewBox="0 0 24 24"
104-
width="24"
105-
xmlns="http://www.w3.org/2000/svg"
106-
:class="alertIcon()"
107-
>
108-
<path :d="icon" />
109-
</svg>
110-
</slot>
111-
</div>
112-
113-
<div :class="mainWrapper()">
114-
<div v-if="props.title" :class="title()">
115-
{{ props.title }}
116-
</div>
117-
<slot v-else />
118-
119-
<div v-if="props.description" :class="description()">
120-
{{ props.description }}
121-
</div>
122-
<slot v-else name="description" />
91+
<div :class="base()">
92+
<slot name="startContent" />
93+
94+
<div v-if="!props.hideIcon" :class="iconWrapper()">
95+
<slot name="icon">
96+
<svg
97+
fill="none"
98+
height="24"
99+
viewBox="0 0 24 24"
100+
width="24"
101+
xmlns="http://www.w3.org/2000/svg"
102+
:class="alertIcon()"
103+
>
104+
<path :d="icon" />
105+
</svg>
106+
</slot>
107+
</div>
108+
109+
<div :class="mainWrapper()">
110+
<div v-if="props.title" :class="title()">
111+
{{ props.title }}
112+
</div>
113+
<slot v-else />
114+
115+
<div v-if="props.description" :class="description()">
116+
{{ props.description }}
117+
</div>
118+
<slot v-else name="description" />
119+
</div>
120+
121+
<slot name="endContent" />
122+
123+
<!-- Improve: use the `Button` component instead -->
124+
<button v-if="props.isClosable" @click="onClose">close</button>
123125
</div>
124-
125-
<slot name="endContent" />
126-
127-
<!-- Improve: use the `Button` component instead -->
128-
<button v-if="props.isClosable" @click="onClose">
129-
close
130-
</button>
131-
</div>
132126
</template>
133127

134128
<style scoped></style>

0 commit comments

Comments
 (0)