VueAlert: Ext component to show text hints and alerts.

tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js

@@ -90,6 +90,9 @@ Ext.extend(Tine.widgets.dialog.MultiOptionsDialog, Ext.FormPanel, {
                     columns: 1,
                     name: 'optionGroup',
                     items: this.getItems()
+                }, {
+                    xtype: 'v-alert',
+                    label: i18n._('Please choose an option.')
                 }]
             }]
         }];

tine20/Tinebase/translations/de.po

@@ -2401,6 +2401,9 @@ msgstr "Passwort generieren"
 msgid "What would you like to do?"
 msgstr "Was möchten Sie machen?"
 
+msgid "Please choose an option."
+msgstr "Bitte wählen Sie eine Option aus."
+
 #: js/widgets/dialog/MultiOptionsDialog.js:32
 #: js/widgets/dialog/MultiOptionsDialog.js:179
 #: js/widgets/dialog/FileListDialog.js:32

tine20/library/ExtJS/ext-custom.js

@@ -227,6 +227,7 @@ require('./src/widgets/form/FieldSet');
 require('./src/widgets/form/HtmlEditor');
 require('./src/widgets/form/TimeField');
 require('./src/widgets/form/Label');
+require('./src/widgets/form/VueAlert');
 require('./src/widgets/form/Action');
 require('./src/widgets/form/VTypes');
 

tine20/library/ExtJS/src/widgets/form/VueAlert/VueAlert.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="bootstrap-scope">
+    <BAlert :model-value="true" variant="primary" class="h-25">{{label}}</BAlert>
+  </div>
+</template>
+
+<script setup>
+import {defineProps} from 'vue'
+
+defineProps({
+  label: String,
+})
+</script>

tine20/library/ExtJS/src/widgets/form/VueAlert/index.js

@@ -0,0 +1,32 @@
+import BootstrapVueNext from 'bootstrap-vue-next'
+
+Ext.form.VueAlert = Ext.extend(Ext.BoxComponent, {
+    vueHandle: null,
+    label: '',
+    props: null,
+
+    initComponent: async function() {
+        const {createApp, h, reactive} = window.vue
+        const {default: VueAlert} = await import(/* webpackChunkName: "Tinebase/vue/VueAlert"*/'./VueAlert.vue')
+        this.props = reactive({
+            label: this.label
+        })
+        this.vueHandle = createApp({
+            render: () => h(VueAlert, this.props)
+        });
+        this.vueHandle.use(BootstrapVueNext)
+        this.vueHandle.mount('#'+this.el.id)
+    },
+
+    beforeDestroy: function() {
+        this.vueHandle.unmount()
+    },
+
+    setText: function(t){
+        // in case the props or vueHandle is not initialized
+        if(!this.props || !this.vueHandle) return;
+        this.props.label = t
+    }
+})
+
+Ext.reg('v-alert', Ext.form.VueAlert)