mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-08 07:11:03 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(c-alert): added title

Browse source
This commit is contained in:
Corentin Thomasset 2023-11-01 10:53:02 +01:00
parent dfc4d2ea28
commit e43abeeddf
No known key found for this signature in database
GPG key ID: DBD997E935996158
2 changed files with 13 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/ui/c-alert/c-alert.demo.vue
View file

@ -3,9 +3,17 @@ const variants = ['warning', 'error'] as const;
</script> </script>
<template> <template>
<h2>Basic</h2>
<c-alert v-for="variant in variants" :key="variant" :type="variant" mb-4> <c-alert v-for="variant in variants" :key="variant" :type="variant" mb-4>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni reprehenderit itaque enim? Suscipit magni optio velit Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni reprehenderit itaque enim? Suscipit magni optio velit
quia, eveniet repellat pariatur quaerat laudantium dignissimos natus, beatae deleniti adipisci, atque necessitatibus quia, eveniet repellat pariatur quaerat laudantium dignissimos natus, beatae deleniti adipisci, atque necessitatibus
odio! odio!
</c-alert> </c-alert>
<h2>With title</h2>
<c-alert v-for="variant in variants" :key="variant" :type="variant" title="This is the title" mb-4>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni reprehenderit itaque enim? Suscipit magni optio velit
quia, eveniet repellat pariatur quaerat laudantium dignissimos natus, beatae deleniti adipisci, atque necessitatibus
odio!
</c-alert>
</template> </template>

7
src/ui/c-alert/c-alert.vue
View file

@ -1,8 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useTheme } from './c-alert.theme'; import { useTheme } from './c-alert.theme';
const props = withDefaults(defineProps<{ type?: 'warning' }>(), { type: 'warning' }); const props = withDefaults(defineProps<{ type?: 'warning'; title?: string }>(), { type: 'warning', title: undefined });
const { type } = toRefs(props); const { type, title } = toRefs(props);
const theme = useTheme(); const theme = useTheme();
const variantTheme = computed(() => theme.value[type.value]); const variantTheme = computed(() => theme.value[type.value]);
@ -17,6 +17,9 @@ const variantTheme = computed(() => theme.value[type.value]);
</div> </div>
<div class="c-alert--content"> <div class="c-alert--content">
<div v-if="title" class="c-alert--title" text-15px fw-600>
{{ title }}
</div>
<slot /> <slot />
</div> </div>
</div> </div>