github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/shared/Btn.vue (about)

     1  <template>
     2    <b-btn
     3      :variant="variant"
     4      :disabled="innerDisabled"
     5      :block="block"
     6      @click="onClick"
     7    >
     8      <b-spinner type="grow" small v-if="spinning"></b-spinner>
     9      <b-spinner type="grow" small v-if="spinning"></b-spinner>
    10      <b-spinner type="grow" small v-if="spinning" class="mr-2"></b-spinner>
    11      {{ label }}
    12      <slot></slot>
    13    </b-btn>
    14  </template>
    15  
    16  <script lang="ts">
    17  import Vue from "vue";
    18  import Component from "vue-class-component";
    19  import { ValidEvent } from "./utils";
    20  
    21  const BtnProps = Vue.extend({
    22    props: {
    23      variant: String,
    24      disabled: {
    25        type: Boolean,
    26        default: false
    27      },
    28      label: String,
    29      block: {
    30        type: Boolean,
    31        default: false
    32      }
    33    }
    34  });
    35  
    36  @Component({})
    37  export default class Btn extends BtnProps {
    38    validEvent: ValidEvent = { spinning: false };
    39  
    40    get spinning() {
    41      return this.validEvent.spinning;
    42    }
    43  
    44    get innerDisabled() {
    45      return this.disabled || this.spinning;
    46    }
    47  
    48    onClick() {
    49      if (this.spinning) {
    50        return; // on annule les multiples requêtes
    51      }
    52      this.$emit("click", this.validEvent);
    53    }
    54  }
    55  </script>
    56  
    57  <style scoped></style>