tethys.backend/resources/js/Components/NCNoteCard.vue

<template>
    <!-- <div class="notecard" :class="`notecard--${color}`" :role="shouldShowAlert ? 'alert' : 'note'"> -->
    <div class="notecard" :class="colorsBgLight[type]" :role="shouldShowAlert ? 'alert' : 'note'">
    <!-- @slot Manually provide icon -->
    <slot name="icon">
        <component :is="icon" class="notecard__icon" :class="{ 'notecard__icon--heading': heading }" :fill-color="color"
            :size="20" />
    </slot>
    <div>
        <p v-if="heading" class="font-bold">
            {{ heading }}
        </p>
        <!-- @slot The main content (overwrites the `text` prop) -->
        <slot>
            <p class="notecard__text">
                {{ text }}
            </p>
        </slot>
    </div>
    </div>
</template>

<!-- <div v-if="flash && flash.message" class="flex flex-col mt-6 animate-fade-in">
    <div class="bg-yellow-500 border-l-4 border-orange-400 text-white p-4" role="alert">
        <p class="font-bold">Be Warned</p>
        <p>{{ flash.message }}</p>
    </div>
</div> -->

<script lang="ts">
import CheckboxMarkedCircle from './Icons/CheckboxMarkedCircle.vue';
import AlertDecagram from './Icons/AlertDecagram.vue';
import Alert from './Icons/Alert.vue';
import Information from './Icons/Information.vue';
import { colorsBgLight } from '@/colors';

export default {
    name: 'NcNoteCard',

    data() {
        return {
            colorsBgLight: colorsBgLight,
        };
    },

    props: {
        /**
         * Type or severity of the message
         */
        type: {
            type: String,
            default: 'warning',
            validator: (type: string) => ['success', 'info', 'warning', 'danger'].includes(type),
        },
        /**
         * Enforce the `alert` role on the note card.
         *
         * The [`alert` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role)
         * should only be used for information that requires the user's immediate attention.
         */
        showAlert: {
            type: Boolean,
            default: false,
        },
        /**
         * Optional text to show as a heading of the note card
         */
        heading: {
            type: String,
            default: '',
        },
        /**
         * The message text of the note card
         */
        text: {
            type: String,
            default: '',
        },
    },

    computed: {
        shouldShowAlert() {
            return this.showAlert || this.type === 'error';
        },
        icon() {
            switch (this.type) {
                case 'error':
                    return AlertDecagram;
                case 'success':
                    return CheckboxMarkedCircle;
                case 'info':
                    return Information;
                case 'warning':
                    return Alert;
                default:
                    return Alert;
            }
        },
        color() {
            switch (this.type) {
                case 'error':
                    return 'var(--color-error)';
                case 'success':
                    return 'var(--color-success)';
                case 'info':
                    return 'var(--color-info)';
                case 'warning':
                    return 'var(--color-warning)';
                default:
                    return 'var(--color-warning)';
            }
        },
    },
};
</script>

<style lang="css" scoped>
.notecard {
    --note-card-icon-size: 20px;
    --note-card-padding: calc(2 * var(--default-grid-baseline));
    /* color: var(--color-main-text) !important; */
    /* background-color: var(--note-background) !important;
    border-inline-start: var(--default-grid-baseline) solid var(--note-theme);
    border-radius: var(--border-radius); */
    margin: 1rem 0;
    padding: var(--note-card-padding);
    display: flex;
    flex-direction: row;
    gap: var(--note-card-padding);

    &__heading {
        font-size: var(--note-card-icon-size); 
        font-weight: 600;
    }

    &__icon {
        &--heading {
            font-size: 20px;
            margin-block: calc((1lh - 1em) / 2) auto;
        }
    }

    /* &--success {
        --note-background: rgba(var(--color-success-rgb), 0.1);
        --note-theme: var(--color-success);
    }

    &--info {
        --note-background: rgba(var(--color-info-rgb), 0.1);
        --note-theme: var(--color-info);
    }

    &--error {
        --note-background: rgba(var(--color-error-rgb), 0.1);
        --note-theme: var(--color-error);
    }

    &--warning {
        --note-background: rgba(var(--color-warning-rgb), 0.1);
        --note-theme: var(--color-warning);
    } */
}
</style>