diff options
| author | Leonardo Bishop <me@leonardobishop.com> | 2024-03-10 01:31:42 +0000 |
|---|---|---|
| committer | Leonardo Bishop <me@leonardobishop.com> | 2024-03-10 01:31:42 +0000 |
| commit | 71e4ad2c71efea471923ea47f01bfda841387f81 (patch) | |
| tree | f08293fdc56b4eb2e3d0e520b79b4d8aad78924c /components/Control/ItemStackPicker.vue | |
| parent | 4495c02c41b95ce6df0c34dbf6ac62f7addae7a3 (diff) | |
Use nuxt auto import magic
Diffstat (limited to 'components/Control/ItemStackPicker.vue')
| -rw-r--r-- | components/Control/ItemStackPicker.vue | 100 |
1 files changed, 0 insertions, 100 deletions
diff --git a/components/Control/ItemStackPicker.vue b/components/Control/ItemStackPicker.vue deleted file mode 100644 index d16090e..0000000 --- a/components/Control/ItemStackPicker.vue +++ /dev/null @@ -1,100 +0,0 @@ -<script setup lang="ts"> -import { computed, ref } from 'vue'; -import ItemStackModal from './ItemStackModal.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', 'fa-tag']" /> Quest Item</span> - <span v-if="isItemStack" class="item"><font-awesome-icon :icon="['fas', 'fa-cube']" /> ItemStack of '{{ value.type || value.item || value.material }}'</span> - <span v-if="isMaterial" class="item"><font-awesome-icon :icon="['fas', 'fa-apple-whole']" /> {{ value }}</span> - <span v-if="!empty && !isQuestItem && !isItemStack && !isMaterial" class="invalid"><font-awesome-icon :icon="['fas', 'fa-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>
\ No newline at end of file |
