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

<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="id ? '' : 'd-block'"
      class="modal"
      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 float-left">
                {{ title }}
              </h4>
              <button
                type="button"
                class="close float-right"
                data-dismiss="modal"
                aria-label="Close"
                @click="emitCancel($event)"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </slot>
          </div>
          <div class="modal-body">
            <slot
              :text="text"
              name="body"
            >
              <p>{{ text }}</p>
            </slot>
          </div>
          <div
            v-if="!hideFooter"
            class="modal-footer"
          >
            <button
              :class="btnCancelKindClass"
              type="button"
              class="btn"
              data-dismiss="modal"
              @click="emitCancel($event)"
            >
              {{ 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"
              :disabled="submitDisabled"
              :class="btnKindClass"
              type="button"
              class="btn js-primary-button"
              data-dismiss="modal"
              @click="emitSubmit($event)"
            >
              {{ primaryButtonLabel }}
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="!id"
      class="modal-backdrop fade show"
    >
    </div>
  </div>
</template>