blob: 9141100f5c8456f6df67e6e2a1bb371db5639bf0 (
plain)
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
|
<script setup lang="ts">
import { computed, ref } from 'vue';
import materials from '@/lib/materials';
const props = defineProps<{
value: any;
}>();
const emit = defineEmits(['update']);
const value = ref(props.value);
const showItemStackModal = ref(false);
//TODO unshitify
const empty = computed(() => {
return value.value === undefined
|| value.value === null
|| value.value === ''
|| (Array.isArray(value.value) && value.value.length === 0)
|| (typeof value.value === 'object' && Object.keys(value.value).length === 0);
});
const isQuestItem = computed(() => {
return value.value?.['quest-item'] !== undefined;
});
const isItemStack = computed(() => {
if (typeof value.value !== 'object' || value.value === null) {
return false;
}
const key = 'item' in value.value
? 'item'
: 'type' in value.value
? 'type'
: 'material'
return (!!value.value[key]);
});
const isMaterial = computed(() => {
return typeof value.value === 'string' && materials.includes(value.value)
});
const update = (newValue: any) => {
value.value = newValue;
showItemStackModal.value = false;
emit('update', value.value);
};
</script>
<template>
<div class="itemstack" @click="showItemStackModal = true">
<span v-if="empty" class="empty">ItemStack...</span>
<span v-if="isQuestItem" class="item"><font-awesome-icon :icon="['fas', 'tag']" /> Quest Item</span>
<span v-if="isItemStack" class="item"><font-awesome-icon :icon="['fas', 'cube']" /> ItemStack of '{{ value.type ||
value.item || value.material }}'</span>
<span v-if="isMaterial" class="item"><font-awesome-icon :icon="['fas', 'apple-whole']" /> {{ value }}</span>
<span v-if="!empty && !isQuestItem && !isItemStack && !isMaterial" class="invalid"><font-awesome-icon
:icon="['fas', 'triangle-exclamation']" /> Invalid ItemStack</span>
</div>
<ItemStackModal v-model="showItemStackModal" :value="value" @confirm="update" />
</template>
<style scoped>
.itemstack {
display: flex;
width: 100%;
height: 100%;
cursor: pointer;
align-items: center;
padding: 0.5rem;
user-select: none;
transition: background-color 0.3s;
background-color: var(--color-background-soft);
span {
font-family: monospace;
font-size: 0.8rem;
}
.empty {
color: var(--color-text-mute);
}
.item {
color: var(--color-primary);
}
.invalid {
color: var(--color-false);
}
&:hover {
background-color: var(--color-hover);
}
}
</style>
|
