github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/components/ToolbarSwitch.vue (about)

     1  <template>
     2    <div class="toolbar-switch">
     3      <v-tooltip bottom>
     4        <template v-slot:activator="{ on }">
     5          <div v-on="on" class="mx-1" style="height: 100%">
     6            <v-switch
     7              :label="label"
     8              hide-details
     9              :value="value"
    10              @change="$emit('input', $event ? true : false)"
    11              :color="color ? color : 'primary'"
    12            >
    13            </v-switch>
    14          </div>
    15        </template>
    16        <span v-if="value">
    17          {{ tooltipOn }}
    18        </span>
    19        <span v-else>
    20          {{ tooltipOff ? tooltipOff : tooltipOn }}
    21        </span>
    22      </v-tooltip>
    23    </div>
    24  </template>
    25  
    26  <script lang="ts">
    27  import Vue from "vue";
    28  import Component from "vue-class-component";
    29  
    30  const ToolbarSwitchProps = Vue.extend({
    31    props: {
    32      tooltipOn: String,
    33      tooltipOff: String,
    34      value: Boolean,
    35      label: String,
    36      color: String
    37    }
    38  });
    39  
    40  @Component({})
    41  export default class ToolbarSwitch extends ToolbarSwitchProps {}
    42  </script>
    43  
    44  <style>
    45  .toolbar-switch .v-input__control {
    46    margin: auto;
    47  }
    48  .toolbar-switch .v-input__slot {
    49    height: 100%;
    50  }
    51  .toolbar-switch .v-input {
    52    height: 100%;
    53  }
    54  </style>