added label text for switch component

This commit is contained in:
Burak Civan 2022-12-30 14:49:13 +03:00
parent 1333ecc2f2
commit c4c92c9f32
2 changed files with 15 additions and 5 deletions

View File

@ -1,10 +1,14 @@
<template>
<div class="relative lg:absolute w-12 flex items-center lg:ltr:right-0 lg:rtl:left-0 xl:-top-12 cursor-pointer">
<input type="radio" :name="name" v-show="selected == '0'" @click="enabled = 1" value="1" id="enabled-1" v-model="selected" class="w-full h-full absolute right-0 z-20 opacity-0 cursor-pointer">
<input type="radio" :name="name" v-show="selected == '1'" @click="enabled = 0" value="0" id="enabled-0" v-model="selected" class="w-full h-full absolute left-0 z-20 opacity-0 cursor-pointer">
<div class="lg:absolute w-12 lg:ltr:right-0 lg:rtl:left-0 xl:-top-12">
<label class="lg:hidden">{{ label }}</label>
<div class="absolute left-1 top-1 bg-white w-5 h-5 rounded-full transition transform" :class="selected == '1' ? 'translate-x-full' : 'translate-x-0'"></div>
<div class="block w-full h-7 rounded-full transition transition-color" :class="selected == '1' ? 'bg-green' : 'bg-green-200'"></div>
<div class="relative full flex items-center cursor-pointer">
<input type="radio" :name="name" v-show="selected == '0'" @click="enabled = 1" value="1" id="enabled-1" v-model="selected" class="w-full h-full absolute right-0 z-20 opacity-0 cursor-pointer">
<input type="radio" :name="name" v-show="selected == '1'" @click="enabled = 0" value="0" id="enabled-0" v-model="selected" class="w-full h-full absolute left-0 z-20 opacity-0 cursor-pointer">
<div class="absolute left-1 top-1 bg-white w-5 h-5 rounded-full transition transform" :class="selected == '1' ? 'translate-x-full' : 'translate-x-0'"></div>
<div class="block w-full h-7 rounded-full transition transition-color" :class="selected == '1' ? 'bg-green' : 'bg-green-200'"></div>
</div>
</div>
</template>
@ -21,6 +25,11 @@ export default {
description: "Selectbox selected value"
},
label: {
type: String,
description: "Selectbox selected label"
},
model: {
type: [String, Number, Array, Object, Boolean],
default: '',

View File

@ -3,6 +3,7 @@
<akaunting-switch
name="{{ $name }}"
value="{{ (int) $value }}"
label="{{ trans('general.enabled') }}"
@if (! empty($attributes['model']))
:model="{{ $attributes['model'] }}"