Add position for book in collection

front/src/CollectionFormElement.vue

@@ -0,0 +1,58 @@
+<script setup>
+import BookListElement from './BookListElement.vue'
+
+const props = defineProps({
+  position: Number,
+  book: Array,
+})
+</script>
+<template>
+  <div class="collectionitembox">
+    <BookListElement v-bind="props.book">
+      <div class="separator" />
+      <div class="positionindicator centered is-narrow">
+        {{ props.position }}
+      </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;
+}
+
+.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);
+}
+
+.positionwidget:hover {
+  cursor: move;
+}
+</style>