diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/deprecated_modal.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/deprecated_modal.vue | 173 |
1 files changed, 173 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue new file mode 100644 index 00000000000..dcf1489b37c --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue @@ -0,0 +1,173 @@ +<script> + /* eslint-disable vue/require-default-prop */ + export default { + name: 'DeprecatedModal', // use GlModal instead + + props: { + id: { + type: String, + required: false, + }, + 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, + }, + }, + + computed: { + btnKindClass() { + return { + [`btn-${this.kind}`]: true, + }; + }, + btnCancelKindClass() { + return { + [`btn-${this.closeKind}`]: true, + }; + }, + }, + + methods: { + emitCancel(event) { + this.$emit('cancel', event); + }, + emitSubmit(event) { + this.$emit('submit', event); + }, + }, + }; +</script> + +<template> + <div class="modal-open"> + <div + :id="id" + class="modal" + :class="id ? '' : 'show'" + role="dialog" + tabindex="-1" + > + <div + :class="modalDialogClass" + class="modal-dialog" + role="document" + > + <div class="modal-content"> + <div class="modal-header"> + <slot name="header"> + <h4 class="modal-title pull-left"> + {{ title }} + </h4> + <button + type="button" + class="close pull-right" + @click="emitCancel($event)" + data-dismiss="modal" + aria-label="Close" + > + <span aria-hidden="true">×</span> + </button> + </slot> + </div> + <div class="modal-body"> + <slot + name="body" + :text="text" + > + <p>{{ text }}</p> + </slot> + </div> + <div + class="modal-footer" + v-if="!hideFooter" + > + <button + type="button" + class="btn" + :class="btnCancelKindClass" + @click="emitCancel($event)" + data-dismiss="modal" + > + {{ closeButtonLabel }} + </button> + + <slot + v-if="secondaryButtonLabel" + name="secondary-button" + > + <button + v-if="secondaryButtonLabel" + type="button" + class="btn" + data-dismiss="modal" + > + {{ secondaryButtonLabel }} + </button> + </slot> + + <button + v-if="primaryButtonLabel" + type="button" + class="btn js-primary-button" + :disabled="submitDisabled" + :class="btnKindClass" + @click="emitSubmit($event)" + data-dismiss="modal" + > + {{ primaryButtonLabel }} + </button> + </div> + </div> + </div> + </div> + <div + v-if="!id" + class="modal-backdrop fade in" + > + </div> + </div> +</template> |