Generalize radiobuttons and checkboxes
This commit is contained in:
Ramon Wenger
parent
daddb24fcc
commit
4a9eb441af
|
|
@ -1,19 +1,14 @@
|
|||
<template>
|
||||
<label class="checkbox-container">
|
||||
<input type="checkbox"
|
||||
class="checkbox-container__input"
|
||||
<base-input :label="label"
|
||||
:checked="checked"
|
||||
v-on:input="$emit('input', $event.target.checked, item)">
|
||||
<span class="checkbox-container__checkbox">
|
||||
<tick></tick>
|
||||
</span>
|
||||
<span class="checkbox-container__label">{{label}}</span>
|
||||
</label>
|
||||
|
||||
:item="item"
|
||||
v-on:input="passOn"
|
||||
:type="'checkbox'"
|
||||
></base-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tick from '@/components/icons/Tick.vue';
|
||||
import BaseInput from '@/components/inputs/BaseInput';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -25,61 +20,13 @@
|
|||
},
|
||||
|
||||
components: {
|
||||
Tick
|
||||
BaseInput
|
||||
},
|
||||
|
||||
methods: {
|
||||
passOn() {
|
||||
this.$emit('input', ...arguments);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
|
||||
.checkbox-container {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__input:checked + &__checkbox {
|
||||
border: 0;
|
||||
background-color: $color-brand;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
fill: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&__checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
border: 2px solid $color-grey;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 10px;
|
||||
|
||||
transition: background-color 0.5s;
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
transition: all 0.7s;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-family: $sans-serif-font-family;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<base-input :label="label"
|
||||
:checked="checked"
|
||||
:item="item"
|
||||
v-on:input="passOn"
|
||||
:type="'radiobutton'"
|
||||
></base-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseInput from '@/components/inputs/BaseInput';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
label: String,
|
||||
checked: {
|
||||
type: Boolean
|
||||
},
|
||||
item: Object
|
||||
},
|
||||
|
||||
components: {
|
||||
BaseInput
|
||||
},
|
||||
|
||||
methods: {
|
||||
passOn() {
|
||||
this.$emit('input', ...arguments);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="6 6 88 88"><title>add</title>
|
||||
<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="6 6 88 88">
|
||||
<path
|
||||
d="M50,6.48A43.62,43.62,0,0,0,6.56,47.08S6.5,48.46,6.5,50s.06,2.83.06,2.92A43.52,43.52,0,1,0,50,6.48Zm0,82.15A38.62,38.62,0,1,1,88.6,50,38.67,38.67,0,0,1,50,88.62Z"/>
|
||||
<path
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<circle r="25" cx="50" cy="50"></circle>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<label class="base-input-container">
|
||||
<input type="checkbox"
|
||||
class="base-input-container__input"
|
||||
:checked="checked"
|
||||
@click.prevent="$emit('input', $event.target.checked, item)"
|
||||
v-on:input.prevent="$emit('input', $event.target.checked, item)">
|
||||
<span class="base-input-container__icon"
|
||||
:class="{'base-input-container__checkbox': type==='checkbox', 'base-input-container__radiobutton': type === 'radiobutton'}">
|
||||
<tick v-if="type === 'checkbox'"></tick>
|
||||
<circle-icon v-if="type === 'radiobutton'"></circle-icon>
|
||||
</span>
|
||||
<span class="base-input-container__label">{{label}}</span>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tick from '@/components/icons/Tick';
|
||||
import CircleIcon from '@/components/icons/CircleIcon';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
label: String,
|
||||
checked: {
|
||||
type: Boolean
|
||||
},
|
||||
item: Object,
|
||||
type: String
|
||||
},
|
||||
|
||||
components: {
|
||||
Tick,
|
||||
CircleIcon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
|
||||
.base-input-container {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__input:checked + &__checkbox {
|
||||
border: 0;
|
||||
background-color: $color-brand;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
fill: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
border: 2px solid $color-grey;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin-right: 10px;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
&__checkbox {
|
||||
border-radius: 3px;
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
transition: all 0.7s;
|
||||
}
|
||||
}
|
||||
|
||||
&__radiobutton {
|
||||
border-radius: 20px;
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
fill: $color-brand;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__input:checked + &__radiobutton {
|
||||
border-color: $color-brand;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-family: $sans-serif-font-family;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue