2020-02-21 21:40:46 +01:00
|
|
|
<template>
|
2020-09-07 03:19:08 +02:00
|
|
|
<div
|
|
|
|
class="switch-ctn"
|
2021-10-20 15:14:49 +02:00
|
|
|
:class="{
|
|
|
|
compact,
|
|
|
|
disabled: disabled
|
|
|
|
}"
|
2020-09-07 03:19:08 +02:00
|
|
|
>
|
2020-02-21 21:40:46 +01:00
|
|
|
<input
|
|
|
|
:id="id"
|
2020-06-19 22:20:06 +02:00
|
|
|
v-model="currentValue"
|
|
|
|
type="checkbox"
|
2020-02-21 21:40:46 +01:00
|
|
|
name="set-name"
|
|
|
|
class="switch-input"
|
2020-06-19 22:20:06 +02:00
|
|
|
:checked="currentValue"
|
2020-10-06 15:38:35 +02:00
|
|
|
:disabled="disabled"
|
2020-02-21 21:40:46 +01:00
|
|
|
@change="$emit('change', currentValue)"
|
|
|
|
>
|
|
|
|
<label
|
|
|
|
:for="id"
|
2020-04-12 05:51:29 +02:00
|
|
|
class="switch-label"
|
2020-02-21 21:40:46 +01:00
|
|
|
>
|
2021-10-20 15:14:49 +02:00
|
|
|
<span class="switch-label-text">
|
|
|
|
{{ label }}
|
|
|
|
</span>
|
2020-10-19 17:32:53 +02:00
|
|
|
<ft-tooltip
|
|
|
|
v-if="tooltip !== ''"
|
|
|
|
class="selectTooltip"
|
2021-01-11 16:29:55 +01:00
|
|
|
position="bottom-left"
|
2020-10-19 17:32:53 +02:00
|
|
|
:tooltip="tooltip"
|
|
|
|
/>
|
2020-02-21 21:40:46 +01:00
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script src="./ft-toggle-switch.js" />
|
2020-03-27 12:37:54 +01:00
|
|
|
<style scoped lang="sass" src="./ft-toggle-switch.sass" />
|