Kalista Payne
100 lines
1.6 KiB
Vue
100 lines
1.6 KiB
Vue
<template>
|
|
<span
|
|
v-if="show"
|
|
class="badge badge-round badge-item badge-equip"
|
|
:class="{'is-equipped': equipped === true}"
|
|
@click.stop="click"
|
|
>
|
|
<div
|
|
v-once
|
|
class="svg svg-icon color equip-icon"
|
|
v-html="icons.equip"
|
|
>
|
|
</div>
|
|
<div
|
|
v-once
|
|
class="svg svg-icon color unequip-icon"
|
|
v-html="icons.unEquip"
|
|
>
|
|
</div>
|
|
</span>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import '@/assets/scss/colors.scss';
|
|
|
|
.badge-equip {
|
|
cursor: pointer;
|
|
display: none;
|
|
left: -9px;
|
|
color: $gray-200;
|
|
background: $white;
|
|
padding: 0.375rem;
|
|
|
|
.unequip-icon {
|
|
display: none;
|
|
}
|
|
|
|
&.is-equipped {
|
|
display: block;
|
|
background: $teal-50;
|
|
color: $white;
|
|
|
|
&:hover {
|
|
.unequip-icon {
|
|
display: block;
|
|
color: $maroon-50;
|
|
}
|
|
|
|
.equip-icon {
|
|
display: none;
|
|
}
|
|
|
|
background: $white;
|
|
}
|
|
}
|
|
|
|
&:hover:not(.is-equipped) {
|
|
color: $purple-400;
|
|
}
|
|
|
|
.svg-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.item:hover > .badge-equip {
|
|
display: block;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import svgEquip from '@/assets/svg/equip.svg?raw';
|
|
import svgUnEquip from '@/assets/svg/unequip.svg?raw';
|
|
|
|
export default {
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
},
|
|
equipped: {
|
|
type: Boolean,
|
|
},
|
|
},
|
|
data () {
|
|
return {
|
|
icons: Object.freeze({
|
|
equip: svgEquip,
|
|
unEquip: svgUnEquip,
|
|
}),
|
|
};
|
|
},
|
|
methods: {
|
|
click () {
|
|
this.$emit('click');
|
|
},
|
|
},
|
|
};
|
|
</script>
|