Skip to content
Snippets Groups Projects
DangerousButton.vue 1.67 KiB
Newer Older
  • Learn to ignore specific revisions
  • Eliot Berriot's avatar
    Eliot Berriot committed
      <div @click="showModal = true" :class="['ui', color, {disabled: disabled}, 'button']" :disabled="disabled">
    
        <slot></slot>
    
        <modal class="small" :show.sync="showModal">
          <div class="header">
    
    Eliot Berriot's avatar
    Eliot Berriot committed
            <slot name="modal-header">
    
              <translate :translate-context="'Modal/*/Title'">Do you want to confirm this action?</translate>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
            </slot>
    
          </div>
          <div class="scrolling content">
            <div class="description">
              <slot name="modal-content"></slot>
            </div>
          </div>
          <div class="actions">
    
    Eliot Berriot's avatar
    Eliot Berriot committed
            <div class="ui cancel button">
    
              <translate :translate-context="'Modal/*/Button.Label/Short, Verb'">Cancel</translate>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
            </div>
    
            <div :class="['ui', 'confirm', confirmButtonColor, 'button']" @click="confirm">
    
    Eliot Berriot's avatar
    Eliot Berriot committed
              <slot name="modal-confirm">
    
                <translate :translate-context="'Modal/*/Button.Label/Short, Verb'">Confirm</translate>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
              </slot>
    
            </div>
          </div>
        </modal>
      </div>
    
    </template>
    <script>
    import Modal from '@/components/semantic/Modal'
    
    export default {
    
    Eliot Berriot's avatar
    Eliot Berriot committed
      props: {
    
        action: {type: Function, required: false},
    
    Eliot Berriot's avatar
    Eliot Berriot committed
        disabled: {type: Boolean, default: false},
    
        color: {type: String, default: 'red'},
        confirmColor: {type: String, default: null, required: false}
    
    Eliot Berriot's avatar
    Eliot Berriot committed
      },
    
      components: {
        Modal
      },
      data () {
        return {
          showModal: false
        }
      },
    
      computed: {
        confirmButtonColor () {
          if (this.confirmColor) {
            return this.confirmColor
          }
          return this.color
        }
      },
    
      methods: {
        confirm () {
          this.showModal = false
    
          this.$emit('confirm')
          if (this.action) {
            this.action()
          }