120 lines
2.5 KiB
Vue
120 lines
2.5 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import BookListElement from './BookListElement.vue'
|
|
|
|
const props = defineProps({
|
|
isDragover: Boolean,
|
|
id: Number,
|
|
position: Number,
|
|
book: Array,
|
|
})
|
|
|
|
const emit = defineEmits('positionchange')
|
|
|
|
const vFocus = {
|
|
mounted: (el) => el.focus(),
|
|
}
|
|
|
|
const isInputtingPosition = ref(false)
|
|
const inputtedPosition = ref('')
|
|
|
|
function onPositionInput() {
|
|
if (inputtedPosition.value != '' && !isNaN(inputtedPosition.value)) {
|
|
const parsedPosition = parseInt(inputtedPosition.value)
|
|
if (parsedPosition != props.position) {
|
|
emit('positionchange', parsedPosition)
|
|
}
|
|
}
|
|
clearPositionInput()
|
|
}
|
|
|
|
function clearPositionInput() {
|
|
isInputtingPosition.value = false
|
|
inputtedPosition.value = ''
|
|
}
|
|
</script>
|
|
<template>
|
|
<div :class="isDragover ? 'dragover' : ''" draggable="true" class="collectionitembox">
|
|
<BookListElement v-bind="props.book">
|
|
<div class="separator" />
|
|
<div class="centered">
|
|
<div
|
|
v-if="!isInputtingPosition"
|
|
@click="isInputtingPosition = true"
|
|
class="positionindicator centered is-narrow clickable"
|
|
>
|
|
{{ props.position }}
|
|
</div>
|
|
<div v-else>
|
|
<input
|
|
type="text"
|
|
v-model="inputtedPosition"
|
|
v-focus
|
|
@blur="clearPositionInput"
|
|
@keyup.enter="onPositionInput"
|
|
size="1"
|
|
class="positioninput"
|
|
:placeholder="props.position"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="separator" />
|
|
<div class="positionwidget centered is-narrow">
|
|
<b-icon-list />
|
|
</div>
|
|
</BookListElement>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.collectionitembox {
|
|
transition: ease-in-out 0.04s;
|
|
display: flex;
|
|
}
|
|
|
|
.collectionitembox:hover {
|
|
transform: scale(1.01);
|
|
transition: ease-in-out 0.02s;
|
|
}
|
|
|
|
.separator {
|
|
width: 5px;
|
|
background: var(--bulma-scheme-main);
|
|
}
|
|
|
|
.positionindicator {
|
|
font-size: 36px;
|
|
margin-left: 40px;
|
|
margin-right: 40px;
|
|
}
|
|
|
|
.positioninput {
|
|
font-size: 36px;
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
text-align: center;
|
|
background: var(--bulma-scheme-main);
|
|
border-radius: 10%;
|
|
color: var(--bulma-body-color);
|
|
}
|
|
|
|
.positionwidget {
|
|
color: var(--bulma-scheme-main);
|
|
font-size: 48px;
|
|
margin-left: 30px;
|
|
margin-right: 30px;
|
|
border-top-right-radius: var(--bulma-box-radius);
|
|
border-bottom-right-radius: var(--bulma-box-radius);
|
|
cursor: grab;
|
|
}
|
|
|
|
.positionwidget:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.dragover {
|
|
border: 3px solid var(--bulma-primary);
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|