Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | <template>
<div class="d-flex flex-column">
<select v-model="filter" class="d-flex flex-column mb-2">
<option :value="null">All</option>
<option :value="'packed'">Packed</option>
<option :value="'not_packed'">Not packed</option>
</select>
<vueCustomScrollbar class="scroll overflow-auto" :settings="settings">
<ul class="d-flex flex-column p-0">
<li
v-for="item in currentItems"
:key="item.id"
class="p-0"
v-b-tooltip.hover
:title="item.title || 'undefined'"
>
<div
class="d-flex position-relative align-items-center"
:class="item.packed && 'item'"
>
<p class="text-ellipsis m-0 mr-2">
{{ item.title || "undefined" }}
</p>
<div
class="box"
:style="{ 'background-color': getColor(item.color) }"
/>
</div>
</li>
</ul>
</vueCustomScrollbar>
</div>
</template>
<script>
Iimport * as THREE from "three";
export default {
name: "Items",
props: {
items: Array,
},
data: () => ({
filter: null,
currentItems: [],
settings: {
suppressScrollX: true,
wheelPropagation: false,
},
}),
watch: {
items: function () {
this.filterItems();
},
filter: function () {
this.filterItems();
},
},
methods: {
getColor: function (hex) {
const color = new THREE.Color().set(hex).getHexString();
return `#${color}`;
},
filterItems: function () {
switch (this.filter) {
case null:
this.currentItems = this.items;
break;
case "packed":
this.currentItems = this.items.filter(
(item) => item.packed && item.packed === true
);
break;
case "not_packed":
this.currentItems = this.items.filter(
(item) => !item.packed || (item.packed && item.packed !== true)
);
break;
}
},
},
mounted() {
this.currentItems = this.items;
},
};
</script>
<style scoped>
.scroll {
height: 45vh;
}
.box {
height: 20px;
min-width: 40px;
border: 1px solid black;
}
.item::after {
content: "";
display: block;
width: 100%;
top: 50%;
left: 0;
height: 1px;
position: absolute;
background: #c00;
}
</style> |