Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 3x 3x 3x 3x 3x 1x 1x | <script setup lang="ts">
import { computed, useSlots } from "vue";
const props = withDefaults(defineProps<{
tone?: "neutral" | "success" | "warning" | "danger" | "processing" | "unknown" | "attention" | "refunded";
title?: string;
assertive?: boolean;
}>(), {
tone: "neutral",
assertive: false,
});
const slots = useSlots();
const role = computed(() => props.assertive || ["danger", "attention"].includes(props.tone)
? "alert"
: "status");
const live = computed(() => role.value === "alert" ? "assertive" : "polite");
</script>
<template>
<section
class="pj-status-notice"
:class="`pj-status-notice--${tone}`"
:role="role"
:aria-live="live"
>
<div class="pj-status-notice__body">
<strong v-if="title">{{ title }}</strong>
<div class="pj-status-notice__content"><slot /></div>
</div>
<div v-if="slots.actions" class="pj-status-notice__actions">
<slot name="actions" />
</div>
</section>
</template>
|