mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-25 01:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(encryption): alert on decryption error (#711)

Browse source 
* update(c-alert): Add variant 'error'

* fix(encryption): Alert decryption error (#652)

* feat(c-alert): added title

* refactor(composable): mutualized computedCatch

---------

Co-authored-by: code2933 <code2933@outlook.com>
This commit is contained in:
Corentin THOMASSET 2023-11-01 11:11:51 +01:00 • committed by GitHub
parent 4d5a67d96d
commit 02b0d0d1a1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 58 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,19 @@
<script lang="ts" setup>
const variants = ['warning'] as const;
const variants = ['warning', 'error'] as const;
</script>
<template>
<h2>Basic</h2>
<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
quia, eveniet repellat pariatur quaerat laudantium dignissimos natus, beatae deleniti adipisci, atque necessitatibus
odio!
</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>

13
src/ui/c-alert/c-alert.theme.ts
View file

@ -3,6 +3,7 @@ import { defineThemes } from '../theme/theme.models';
import { appThemes } from '../theme/themes';
import WarningIcon from '~icons/mdi/alert-circle-outline';
import ErrorIcon from '~icons/mdi/close-circle-outline';
export const { useTheme } = defineThemes({
dark: {
@ -12,6 +13,12 @@ export const { useTheme } = defineThemes({
textColor: appThemes.dark.warning.color,
icon: WarningIcon,
},
error: {
backgroundColor: appThemes.dark.error.colorFaded,
borderColor: appThemes.dark.error.color,
textColor: appThemes.dark.error.color,
icon: ErrorIcon,
},
},
light: {
warning: {
@ -20,5 +27,11 @@ export const { useTheme } = defineThemes({
textColor: darken(appThemes.light.warning.color, 40),
icon: WarningIcon,
},
error: {
backgroundColor: appThemes.light.error.colorFaded,
borderColor: appThemes.light.error.color,
textColor: darken(appThemes.light.error.color, 40),
icon: ErrorIcon,
},
},
});

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

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