52 lines
1.3 KiB
Vue
52 lines
1.3 KiB
Vue
<template lang="html">
|
|
<v-card
|
|
:hover="hasClickListener"
|
|
:color="model.color"
|
|
:dark="model.color && isDark"
|
|
:light="model.color && !isDark"
|
|
@click="click"
|
|
@mouseover="hasClickListener ? hovering = true : undefined"
|
|
@mouseleave="hasClickListener ? hovering = false : undefined"
|
|
>
|
|
<attribute-card-content :model="model" />
|
|
<card-highlight :active="hasClickListener && hovering" />
|
|
</v-card>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
import CardHighlight from '/imports/client/ui/components/CardHighlight.vue';
|
|
import AttributeCardContent from '/imports/client/ui/properties/components/attributes/AttributeCardContent.vue';
|
|
import isDarkColor from '/imports/client/ui/utility/isDarkColor.js';
|
|
|
|
export default {
|
|
components: {
|
|
CardHighlight,
|
|
AttributeCardContent,
|
|
},
|
|
props: {
|
|
model: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
data(){return {
|
|
checkLoading: false,
|
|
hovering: false,
|
|
}},
|
|
computed: {
|
|
hasClickListener(){
|
|
return this.$listeners && !!this.$listeners.click
|
|
},
|
|
isDark() {
|
|
if (!this.model.color) return;
|
|
return isDarkColor(this.model.color);
|
|
},
|
|
},
|
|
methods: {
|
|
click(e){
|
|
this.$emit('click', e);
|
|
},
|
|
},
|
|
}
|
|
</script>
|