mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 22:57:21 +01:00
dd29c60d87
* Stable: Highlight pet on dragging food / add drag* events * Stable: hatch dialog instead of popover / .btn-flat / update bootstrap-vie * Layout: change sidebar width to fixed 236px - removed .col-2/.col-10 * Stable: Drag&Drop Food Image + Text - refactor directive to use custom event names * Stable: fixes * Stable: click to select food + attached food info box * fix lint issues * Drag&Drop&Click: Potions on Eggs - fix click on item + attached infobox-position in click mode
65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
<template lang="pug">
|
|
b-popover(
|
|
:triggers="['hover']",
|
|
:placement="'top'",
|
|
)
|
|
span(slot="content")
|
|
h4.popover-content-title {{ item.text() }}
|
|
div.popover-content-text(v-html="item.notes()")
|
|
|
|
.item-wrapper(@click="click($event)")
|
|
.item(:class="{'item-active': active }")
|
|
countBadge(
|
|
:show="true",
|
|
:count="itemCount"
|
|
)
|
|
span.item-content(
|
|
:class="'Pet_Food_'+item.key",
|
|
v-drag.food="item.key",
|
|
@itemDragEnd="dragend($event)",
|
|
@itemDragStart="dragstart($event)"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import bPopover from 'bootstrap-vue/lib/components/popover';
|
|
import DragDropDirective from 'client/directives/dragdrop.directive';
|
|
|
|
import CountBadge from './countBadge';
|
|
|
|
export default {
|
|
components: {
|
|
bPopover,
|
|
CountBadge,
|
|
},
|
|
directives: {
|
|
drag: DragDropDirective,
|
|
},
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
},
|
|
itemCount: {
|
|
type: Number,
|
|
},
|
|
itemContentClass: {
|
|
type: String,
|
|
},
|
|
active: {
|
|
type: Boolean,
|
|
},
|
|
},
|
|
methods: {
|
|
dragend ($event) {
|
|
this.$emit('itemDragEnd', $event);
|
|
},
|
|
dragstart ($event) {
|
|
this.$emit('itemDragStart', $event);
|
|
},
|
|
click ($event) {
|
|
this.$emit('itemClick', $event);
|
|
},
|
|
},
|
|
};
|
|
</script>
|