refactor: use YAlert everywhere

This commit is contained in:
axolotle 2024-08-13 10:49:37 +02:00
parent 4f0df60458
commit 445b1bdd21
7 changed files with 38 additions and 32 deletions

View file

@ -194,14 +194,15 @@ const Fields = createReusableTemplate<{
</slot>
<slot name="server-error">
<BAlert
<YAlert
v-if="globalErrorFeedback !== ''"
alert
variant="danger"
class="my-3"
icon="ban"
:model-value="globalErrorFeedback !== ''"
>
<div v-html="globalErrorFeedback" />
</BAlert>
</YAlert>
</slot>
</BForm>

View file

@ -73,12 +73,14 @@ const noItemsMessage = computed(() => {
<slot name="top" />
<slot name="forced-default">
<BAlert v-if="noItemsMessage" :model-value="true" variant="warning">
<slot name="alert-message">
<YIcon iname="exclamation-triangle" />
{{ noItemsMessage }}
</slot>
</BAlert>
<YAlert
v-if="noItemsMessage"
alert
icon="exclamation-triangle"
variant="warning"
>
{{ noItemsMessage }}
</YAlert>
<slot v-else name="default" />
</slot>

View file

@ -1,5 +1,6 @@
<script setup lang="ts">
import type { ColorVariant } from 'bootstrap-vue-next'
import { BAlert } from 'bootstrap-vue-next'
import { computed } from 'vue'
import { DEFAULT_VARIANT_ICON } from '@/helpers/yunohostArguments'
@ -7,13 +8,13 @@ import { DEFAULT_VARIANT_ICON } from '@/helpers/yunohostArguments'
const props = withDefaults(
defineProps<{
alert?: boolean
variant?: ColorVariant
icon?: string
variant?: ColorVariant
}>(),
{
alert: false,
variant: 'info',
icon: undefined,
variant: 'info' as const,
},
)
@ -24,10 +25,9 @@ const icon = computed(() => {
<template>
<Component
v-bind="$attrs"
:is="alert ? 'BAlert' : 'div'"
:modelValue="alert ? true : null"
:variant="alert ? variant : null"
:is="alert ? BAlert : 'div'"
:model-value="alert ? true : undefined"
:variant="alert ? variant : undefined"
:class="{ ['alert alert-' + variant]: !alert }"
class="yuno-alert d-flex flex-column flex-md-row align-items-center"
>

View file

@ -10,6 +10,7 @@ const props = withDefaults(defineProps<ReadOnlyAlertItemProps>(), {
})
const icon = computed(() => {
// TODO merge with `DEFAULT_VARIANT_ICON`
const icons = {
success: 'thumbs-up',
info: 'info',
@ -22,14 +23,8 @@ const icon = computed(() => {
</script>
<template>
<BAlert
:id="id"
:model-value="true"
:variant="type"
class="d-flex flex-column flex-md-row align-items-center"
>
<YIcon :iname="icon" :variant="type" class="me-md-3 mb-md-0 mb-2" />
<!-- TODO ally: do we set it as a true alert or is it cosmetic? -->
<YAlert :id="id" alert :icon="icon" :variant="type">
<VueShowdown :markdown="label" tag="span" class="markdown" />
</BAlert>
</YAlert>
</template>

View file

@ -265,10 +265,14 @@ const performInstall = onSubmit(async (onError) => {
<!-- FIXME hum not handled, is it still a thing? -->
<!-- In case of a custom url with no manifest found -->
<BAlert :modelValue="app === null" variant="warning">
<YIcon iname="exclamation-triangle" />
<YAlert
v-if="app === null"
alert
icon="exclamation-triangle"
variant="warning"
>
{{ $t('app_install_custom_no_manifest') }}
</BAlert>
</YAlert>
</div>
</template>

View file

@ -203,9 +203,9 @@ function downloadBackup() {
</BListGroup>
<BFormInvalidFeedback id="backup-restore-feedback" :state="isValid">
<BAlert :modelValue="true" variant="danger" class="mb-0">
<YAlert alert variant="danger" class="mb-0">
{{ serverError }}
</BAlert>
</YAlert>
</BFormInvalidFeedback>
</BFormCheckboxGroup>

View file

@ -28,10 +28,14 @@ const archives = await api
}"
/>
<BAlert v-if="!archives.length" :model-value="true" variant="warning">
<YIcon iname="exclamation-triangle" />
<YAlert
v-if="!archives.length"
alert
icon="exclamation-triangle"
variant="warning"
>
{{ $t('items_verbose_count', { items: $t('items.backups', 0) }, 0) }}
</BAlert>
</YAlert>
<BListGroup v-else>
<BListGroupItem