| 1 |
<template> |
| 2 |
<div class="ivyforms-alert" :class="['ivyforms-alert__type__' + props.type]"> |
| 3 |
<div class="ivyforms-alert__icon"> |
| 4 |
<IvyIcon |
| 5 |
:name="getIconName()" |
| 6 |
type="fill-duo" |
| 7 |
size="l" |
| 8 |
:color="'var(--map-base-dusk-fill--4)'" |
| 9 |
/> |
| 10 |
</div> |
| 11 |
<div v-if="props.title" class="ivyforms-alert__title medium-14">{{ props.title }}</div> |
| 12 |
<div v-if="props.description" class="ivyforms-alert__desc regular-12"> |
| 13 |
{{ props.description }} |
| 14 |
</div> |
| 15 |
</div> |
| 16 |
</template> |
| 17 |
|
| 18 |
<script setup lang="ts"> |
| 19 |
import IvyIcon from '@/views/_components/icon/IvyIcon.vue' |
| 20 |
|
| 21 |
interface Props { |
| 22 |
type?: 'info' | 'success' | 'warning' | 'error' | 'default' |
| 23 |
title?: string |
| 24 |
description?: string |
| 25 |
} |
| 26 |
|
| 27 |
const props = withDefaults(defineProps<Props>(), { |
| 28 |
type: 'info', |
| 29 |
title: '', |
| 30 |
description: '', |
| 31 |
}) |
| 32 |
|
| 33 |
const getIconName = () => { |
| 34 |
if (props.type === 'success') { |
| 35 |
return 'check-circle' |
| 36 |
} |
| 37 |
|
| 38 |
if (props.type === 'warning') { |
| 39 |
return 'danger' |
| 40 |
} |
| 41 |
|
| 42 |
if (props.type === 'error') { |
| 43 |
return 'danger' |
| 44 |
} |
| 45 |
|
| 46 |
if (props.type === 'default') { |
| 47 |
return 'sticker' |
| 48 |
} |
| 49 |
return 'info' |
| 50 |
} |
| 51 |
</script> |
| 52 |
|
| 53 |
<style lang="scss"> |
| 54 |
@use 'sass:list' as *; |
| 55 |
@use 'sass:meta' as *; |
| 56 |
// Alert |
| 57 |
.ivyforms-alert { |
| 58 |
display: inline-flex; |
| 59 |
padding: 8px 16px; |
| 60 |
align-items: center; |
| 61 |
gap: 8px; |
| 62 |
border: 1px solid var(--map-base-dusk-fill--4); |
| 63 |
background: var(--map-base-dusk-fill-4); |
| 64 |
border-radius: 4px; |
| 65 |
|
| 66 |
$title_and_desc: '.ivyforms-alert__title, .ivyforms-alert__desc'; |
| 67 |
|
| 68 |
// Icon |
| 69 |
&__icon { |
| 70 |
display: flex; |
| 71 |
} |
| 72 |
|
| 73 |
// Type |
| 74 |
&__type { |
| 75 |
// Success |
| 76 |
&__success { |
| 77 |
background: var(--map-status-success-fill-0); |
| 78 |
} |
| 79 |
|
| 80 |
// Warning |
| 81 |
&__warning { |
| 82 |
background: var(--map-status-warning-fill-0); |
| 83 |
} |
| 84 |
|
| 85 |
// Error |
| 86 |
&__error { |
| 87 |
background: var(--map-status-error-fill-0); |
| 88 |
} |
| 89 |
|
| 90 |
// Info |
| 91 |
&__info { |
| 92 |
background: var(--map-base-purple-fill-0); |
| 93 |
} |
| 94 |
} |
| 95 |
// Types |
| 96 |
$types: ( |
| 97 |
'info': ( |
| 98 |
var(--primitive-white), |
| 99 |
), |
| 100 |
'success': ( |
| 101 |
var(--primitive-white), |
| 102 |
), |
| 103 |
'warning': ( |
| 104 |
var(--primitive-white), |
| 105 |
), |
| 106 |
'error': ( |
| 107 |
var(--primitive-white), |
| 108 |
), |
| 109 |
'default': ( |
| 110 |
var(--map-base-dusk-fill--4), |
| 111 |
), |
| 112 |
); |
| 113 |
// Function to process each type value if is array |
| 114 |
@each $type, $values in $types { |
| 115 |
&.ivyforms-alert__type__#{$type} { |
| 116 |
.ivyforms-alert__icon { |
| 117 |
svg { |
| 118 |
fill: nth($values, 1); |
| 119 |
} |
| 120 |
} |
| 121 |
// Content |
| 122 |
#{$title_and_desc} { |
| 123 |
color: nth($values, 1); |
| 124 |
text-align: start; |
| 125 |
} |
| 126 |
} |
| 127 |
} |
| 128 |
} |
| 129 |
</style> |
| 130 |
|
