- added @adonisjs/mail

- mail_settings_controller for setting smtp settings - added view ror rjecting dataset for editor - added new model AppConfig for stroing appwide config values - better validate_chesum.ts command with process chunking - added vue3 apps 'BasicSettings' like email, profile settings - started with 2 multilingual capabilities - npm updates
2024-09-16 17:59:46 +02:00 · 2024-09-16 17:59:46 +02:00 · b06ccae603
commit b06ccae603
parent 010bead723
67 changed files with 7820 additions and 1463 deletions
--- a/resources/js/Components/NCNoteCard.vue
+++ b/resources/js/Components/NCNoteCard.vue
@ -0,0 +1,163 @@
+<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>