debian-mirror-gitlab/app/assets/javascripts/vue_shared/components/deprecated_modal.vue

174 lines
3.6 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2018-12-13 13:39:08 +05:30
/* eslint-disable vue/require-default-prop */
export default {
name: 'DeprecatedModal', // use GlModal instead
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
props: {
id: {
type: String,
required: false,
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
title: {
type: String,
required: false,
},
text: {
type: String,
required: false,
},
hideFooter: {
type: Boolean,
required: false,
default: false,
},
kind: {
type: String,
required: false,
default: 'primary',
},
modalDialogClass: {
type: String,
required: false,
default: '',
},
closeKind: {
type: String,
required: false,
default: 'default',
},
closeButtonLabel: {
type: String,
required: false,
default: 'Cancel',
},
primaryButtonLabel: {
type: String,
required: false,
default: '',
},
secondaryButtonLabel: {
type: String,
required: false,
default: '',
},
submitDisabled: {
type: Boolean,
required: false,
default: false,
},
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
computed: {
btnKindClass() {
return {
[`btn-${this.kind}`]: true,
};
},
btnCancelKindClass() {
return {
[`btn-${this.closeKind}`]: true,
};
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
methods: {
emitCancel(event) {
this.$emit('cancel', event);
},
emitSubmit(event) {
this.$emit('submit', event);
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
},
};
2018-03-17 18:26:18 +05:30
</script>
<template>
<div class="modal-open">
2019-01-03 12:48:30 +05:30
<div
:id="id"
:class="id ? '' : 'd-block'"
class="modal"
role="dialog"
tabindex="-1"
>
<div
:class="modalDialogClass"
class="modal-dialog"
role="document"
>
2018-03-17 18:26:18 +05:30
<div class="modal-content">
<div class="modal-header">
<slot name="header">
2019-01-03 12:48:30 +05:30
<h4 class="modal-title float-left">
{{ title }}
</h4>
2018-03-17 18:26:18 +05:30
<button
type="button"
2018-11-08 19:23:39 +05:30
class="close float-right"
2018-03-17 18:26:18 +05:30
data-dismiss="modal"
aria-label="Close"
2019-01-03 12:48:30 +05:30
@click="emitCancel($event)"
2018-03-17 18:26:18 +05:30
>
<span aria-hidden="true">&times;</span>
</button>
</slot>
</div>
<div class="modal-body">
2019-01-03 12:48:30 +05:30
<slot
:text="text"
name="body"
>
2018-03-17 18:26:18 +05:30
<p>{{ text }}</p>
</slot>
</div>
2019-01-03 12:48:30 +05:30
<div
v-if="!hideFooter"
class="modal-footer"
>
2018-03-17 18:26:18 +05:30
<button
2018-11-08 19:23:39 +05:30
:class="btnCancelKindClass"
2018-03-17 18:26:18 +05:30
type="button"
class="btn"
data-dismiss="modal"
2019-01-03 12:48:30 +05:30
@click="emitCancel($event)"
2018-03-17 18:26:18 +05:30
>
{{ closeButtonLabel }}
</button>
2019-01-03 12:48:30 +05:30
<slot
v-if="secondaryButtonLabel"
name="secondary-button"
>
<button
v-if="secondaryButtonLabel"
type="button"
class="btn"
data-dismiss="modal"
>
2018-03-17 18:26:18 +05:30
{{ secondaryButtonLabel }}
</button>
</slot>
<button
v-if="primaryButtonLabel"
:disabled="submitDisabled"
:class="btnKindClass"
2018-11-08 19:23:39 +05:30
type="button"
class="btn js-primary-button"
2018-03-17 18:26:18 +05:30
data-dismiss="modal"
2019-01-03 12:48:30 +05:30
@click="emitSubmit($event)"
2018-03-17 18:26:18 +05:30
>
{{ primaryButtonLabel }}
</button>
</div>
</div>
</div>
</div>
2019-01-03 12:48:30 +05:30
<div
v-if="!id"
class="modal-backdrop fade show"
>
</div>
2018-03-17 18:26:18 +05:30
</div>
</template>