Merge remote-tracking branch 'origin/feature-24647/Konfigurierbare_Dashboards_api' into feature-24647/Konfigurierbare_Dashboards_widgets

public/js/components/Bootstrap/Alert.js

@@ -0,0 +1,44 @@
+import BsModal from './Modal.js';
+
+export default {
+	components: {
+		BsModal
+	},
+	mixins: [
+		BsModal
+	],
+	props: {
+		dialogClass: {
+			type: [String,Array,Object],
+			default: 'modal-dialog-centered'
+		},
+		/*
+		 * NOTE(chris): 
+		 * Hack to expose in "emits" declared events to $props which we use 
+		 * in the v-bind directive to forward all events.
+		 * @see: https://github.com/vuejs/core/issues/3432
+		*/
+		onHideBsModal: Function,
+		onHiddenBsModal: Function,
+		onHidePreventedBsModal: Function,
+		onShowBsModal: Function,
+		onShownBsModal: Function
+	},
+	data: () => ({
+		result: true
+	}),
+	mounted() {
+		this.modal = this.$refs.modalContainer.modal;
+	},
+	popup(msg, options) {
+		return BsModal.popup.bind(this)(msg, options);
+	},
+	template: `<bs-modal ref="modalContainer" class="bootstrap-alert" v-bind="$props">
+		<template v-slot:default>
+			<slot></slot>
+		</template>
+		<template v-slot:footer>
+			<button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
+		</template>
+	</bs-modal>`
+}

public/js/components/Bootstrap/Confirm.js

@@ -0,0 +1,22 @@
+import BsAlert from './Alert';
+
+export default {
+	mixins: [
+		BsAlert
+	],
+	data: () => ({
+		result: false
+	}),
+	popup(msg, options) {
+		return BsAlert.popup.bind(this)(msg, options);
+	},
+	template: `<bs-modal ref="modalContainer" class="bootstrap-confirm" v-bind="$props">
+		<template v-slot:default>
+			<slot></slot>
+		</template>
+		<template v-slot:footer>
+			<button type="button" class="btn btn-primary" @click="result=true;this.hide()">OK</button>
+			<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+		</template>
+	</bs-modal>`
+}

public/js/components/Bootstrap/Modal.js

@@ -0,0 +1,103 @@
+export default {
+	data: () => ({
+		modal: null
+	}),
+	props: {
+		backdrop: {
+			type: [Boolean,String],
+			default: true,
+			validator(value) {
+				return ['static', true, false].includes(value);
+			}
+		},
+		focus: {
+			type: Boolean,
+			default: true
+		},
+		keyboard: {
+			type: Boolean,
+			default: true
+		},
+		noCloseBtn: Boolean,
+		dialogClass: [String,Array,Object]
+	},
+	emits: [
+		"hideBsModal",
+		"hiddenBsModal",
+		"hidePreventedBsModal",
+		"showBsModal",
+		"shownBsModal"
+	],
+	methods: {
+		dispose() {
+			return this.modal.dispose();
+		},
+		handleUpdate() {
+			return this.modal.handleUpdate();
+		},
+		hide() {
+			return this.modal.hide();
+		},
+		show(relatedTarget) {
+			return this.modal.show(relatedTarget);
+		},
+		toggle() {
+			return this.modal.toggle();
+		}
+	},
+	mounted() {
+		this.modal = new bootstrap.Modal(this.$refs.modal, {
+			backdrop: this.backdrop,
+			focus: this.focus,
+			keyboard: this.keyboard
+		});
+	},
+	popup(body, options, title, footer) {
+		const BsModal = this;
+		return new Promise((resolve,reject) => {
+			const instance = Vue.createApp({
+				setup() {
+					return () => Vue.h(BsModal, {...{
+						class: 'fade'
+					},...options, ...{
+						ref: 'modal',
+						'onHidden.bs.modal': instance.unmount
+					}}, {
+						title: () => title,
+						default: () => body,
+						footer: () => footer
+					});
+				},
+				mounted() {
+					this.$refs.modal.show();
+				},
+				beforeUnmount() {
+					if (this.$refs.modal)
+						this.$refs.modal.result !== false ? resolve(this.$refs.modal.result) : reject();
+				},
+				unmounted() {
+					wrapper.parentElement.removeChild(wrapper);
+				}
+			});
+			const wrapper = document.createElement("div");
+			instance.mount(wrapper);
+			document.body.appendChild(wrapper);
+		});
+	},
+	template: `<div ref="modal" class="bootstrap-modal modal" tabindex="-1" @[\`hide.bs.modal\`]="$emit('hideBsModal')" @[\`hidden.bs.modal\`]="$emit('hiddenBsModal')" @[\`hidePrevented.bs.modal\`]="$emit('hidePreventedBsModal')" @[\`show.bs.modal\`]="$emit('showBsModal')" @[\`shown.bs.modal\`]="$emit('shownBsModal')">
+		<div class="modal-dialog" :class="dialogClass">
+			<div class="modal-content">
+				<div v-if="$slots.title" class="modal-header">
+					<h5 class="modal-title"><slot name="title"/></h5>
+					<button v-if="!noCloseBtn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+				</div>
+				<div class="modal-body">
+					<slot></slot>
+				</div>
+				<div v-if="$slots.footer" class="modal-footer">
+					<slot name="footer"/>
+				</div>
+			</div>
+		</div>
+	</div>`
+}

public/js/components/Bootstrap/Prompt.js

@@ -0,0 +1,36 @@
+import BsAlert from './Alert';
+
+export default {
+	mixins: [
+		BsAlert
+	],
+	props: {
+		placeholder: String,
+		default: String
+	},
+	data: () => ({
+		value: '',
+		result: false
+	}),
+	created() {
+		if (this.default)
+			this.value = this.default;
+	},
+	popup(msg, options) {
+		if (typeof options === 'string')
+			options = { default: options };
+		return BsAlert.popup.bind(this)(msg, options);
+	},
+	template: `<bs-modal ref="modalContainer" class="bootstrap-prompt" v-bind="$props">
+		<template v-slot:default>
+			<slot></slot>
+			<div>
+				<input ref="input" type="text" class="form-control" :placeholder="placeholder" v-model="value">
+			</div>
+		</template>
+		<template v-slot:footer>
+			<button type="button" class="btn btn-primary" @click="result=value;this.hide()">OK</button>
+			<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+		</template>
+	</bs-modal>`
+}