All files / src/BaseParam BaseParamToggle.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template lang="pug">
ParamCard.b-param-toggle(:title='title' :isPrimary='true')
  template(#title)
    slot(name='title' v-bind='$props' :editValue='editValue')
  .input-group.col-12(@focusin='setHasFocus(true)' @focusout='setHasFocus(false)')
    .row.flex-grow-1.no-gutters.align-content-center(v-if='inEdit')
      include ../BaseInput/BaseToggle.vue.pug
    .row.flex-grow-1.no-gutters.align-content-center.b-param-toggle-icon(v-else ref='input' tabindex='-1')
      .col(v-if="value")
        slot(name='trueIcon')
          i.fas.fa-check.b-focus-highlight
      .col(v-else)
        slot(name='falseIcon')
          i.fas.fa-times.b-focus-highlight
    BaseAnimationBlock(anim='width')
      .input-group-append(key='0' v-if='inEdit'
                          @mousedown.prevent='' @click="emitEditRequest(false)")
        label.mt-auto.input-group-text.b-clickable #[i.fa.fa-edit.px-1.ml-1]
      .input-group-append(key='1' v-else-if='showEditIcon'
                          @mousedown.prevent='' @click="emitEditRequest(true)")
        label.mt-auto.input-group-text.b-clickable #[i.fa.fa-edit.px-1.ml-1.text-primary]
</template>
<script>
 
export { default } from "./BaseParamToggle.vue.js";
 
</script>
<style>
.b-param-toggle .b-param-toggle-icon:focus-within {
  box-shadow: inset 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
</style>