big update

src/components/Alert.vue

@@ -1,13 +1,24 @@
 <script setup lang="ts">
+import type { TColor } from '../colors'
+
+// Props.
 const props = defineProps<{
-	color?: 'primary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+	color?: TColor
 	value?: string
+	close?: boolean
 }>()
+
+const emit = defineEmits<{ (e: 'close'): void }>()
 </script>
 
 <template>
 	<div class="ui-alert" :class="props.color">
-		{{ props.value }}
-		<slot v-if="$slots.default" name="default" />
+		<div v-if="props.close" class="ui-alert-close">
+			<ui-icon name="close" @click="emit('close')" />
+		</div>
+		<div v-if="props.value || $slots.default" class="ui-alert-content">
+			{{ props.value }}
+			<slot v-if="$slots.default" name="default" />
+		</div>
 	</div>
 </template>