@antify/ui 4.1.3 → 4.1.4
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/components/AntToast.vue +17 -18
- package/package.json +1 -1
|
@@ -15,7 +15,7 @@ import {
|
|
|
15
15
|
import AntIcon from './AntIcon.vue';
|
|
16
16
|
import AntButton from './AntButton.vue';
|
|
17
17
|
import {
|
|
18
|
-
|
|
18
|
+
InputState, State,
|
|
19
19
|
} from '../enums';
|
|
20
20
|
import {
|
|
21
21
|
IconSize,
|
|
@@ -43,26 +43,26 @@ const icons = {
|
|
|
43
43
|
const _icon = computed(() => icons[props.state]);
|
|
44
44
|
const classes = computed(() => {
|
|
45
45
|
const variants: Record<InputState, string> = {
|
|
46
|
-
[InputState.base]: '
|
|
47
|
-
[InputState.danger]: '
|
|
48
|
-
[InputState.info]: '
|
|
49
|
-
[InputState.success]: '
|
|
50
|
-
[InputState.warning]: '
|
|
46
|
+
[InputState.base]: 'bg-base-300 text-base-300-font',
|
|
47
|
+
[InputState.danger]: 'bg-danger-500 text-danger-500-font',
|
|
48
|
+
[InputState.info]: 'bg-info-500 text-info-500-font',
|
|
49
|
+
[InputState.success]: 'bg-success-500 text-success-500-font',
|
|
50
|
+
[InputState.warning]: 'bg-warning-500 text-warning-500-font',
|
|
51
51
|
};
|
|
52
52
|
|
|
53
53
|
return {
|
|
54
|
-
'
|
|
54
|
+
'inline-flex flex-col gap-2.5 rounded-md p-2.5 transition-colors shadow-md': true,
|
|
55
55
|
[variants[props.state]]: true,
|
|
56
56
|
};
|
|
57
57
|
});
|
|
58
58
|
const hasDefaultSlot = computed(() => useSlots()['default'] || false);
|
|
59
59
|
const iconColor = computed(() => {
|
|
60
60
|
const variants = {
|
|
61
|
-
[InputState.base]: 'text-base-
|
|
62
|
-
[InputState.danger]: 'text-danger-500',
|
|
63
|
-
[InputState.info]: 'text-info-500',
|
|
64
|
-
[InputState.success]: 'text-success-500',
|
|
65
|
-
[InputState.warning]: 'text-warning-500',
|
|
61
|
+
[InputState.base]: 'text-base-300-font',
|
|
62
|
+
[InputState.danger]: 'text-danger-500-font',
|
|
63
|
+
[InputState.info]: 'text-info-500-font',
|
|
64
|
+
[InputState.success]: 'text-success-500-font',
|
|
65
|
+
[InputState.warning]: 'text-warning-500-font',
|
|
66
66
|
};
|
|
67
67
|
|
|
68
68
|
return variants[props.state];
|
|
@@ -79,17 +79,17 @@ onMounted(() => {
|
|
|
79
79
|
data-e2e="toast"
|
|
80
80
|
:data-e2e-state="props.state"
|
|
81
81
|
>
|
|
82
|
-
<div class="inline-flex items-
|
|
83
|
-
<div class="inline-flex items-
|
|
82
|
+
<div class="inline-flex items-start justify-between min-w-[260px] w-content gap-2.5">
|
|
83
|
+
<div class="inline-flex items-start gap-2.5">
|
|
84
84
|
<AntIcon
|
|
85
85
|
v-if="icon"
|
|
86
86
|
:icon="_icon"
|
|
87
|
+
:size="IconSize.md"
|
|
87
88
|
:color="iconColor"
|
|
88
|
-
:size="IconSize.sm"
|
|
89
89
|
/>
|
|
90
90
|
|
|
91
91
|
<div
|
|
92
|
-
class="whitespace-pre
|
|
92
|
+
class="whitespace-pre"
|
|
93
93
|
:class="{'font-semibold': hasDefaultSlot}"
|
|
94
94
|
>
|
|
95
95
|
<slot name="title">
|
|
@@ -102,6 +102,7 @@ onMounted(() => {
|
|
|
102
102
|
:icon="faXmark"
|
|
103
103
|
class="cursor-pointer"
|
|
104
104
|
:color="iconColor"
|
|
105
|
+
:size="IconSize.md"
|
|
105
106
|
@click="() => $emit('close')"
|
|
106
107
|
/>
|
|
107
108
|
</div>
|
|
@@ -116,8 +117,6 @@ onMounted(() => {
|
|
|
116
117
|
>
|
|
117
118
|
<AntButton
|
|
118
119
|
:state="props.state as unknown as State"
|
|
119
|
-
:size="Size.md"
|
|
120
|
-
filled
|
|
121
120
|
@click="() => $emit('undo')"
|
|
122
121
|
>
|
|
123
122
|
undo
|