aboutsummaryrefslogtreecommitdiffstats
path: root/components/Control/ItemStackForm.vue
diff options
context:
space:
mode:
authorLeonardo Bishop <me@leonardobishop.com>2024-03-10 00:13:25 +0000
committerLeonardo Bishop <me@leonardobishop.com>2024-03-10 00:13:25 +0000
commit9a11e0f4a38297006b89cc7bb2a60734111582e0 (patch)
tree5ebddde79e67b659714b5dbdbfcea289f06a4ae5 /components/Control/ItemStackForm.vue
parent817478f3cf357fc09778d9dc3cf67a667e21f042 (diff)
Migrate to nuxt
Diffstat (limited to 'components/Control/ItemStackForm.vue')
-rw-r--r--components/Control/ItemStackForm.vue50
1 files changed, 50 insertions, 0 deletions
diff --git a/components/Control/ItemStackForm.vue b/components/Control/ItemStackForm.vue
new file mode 100644
index 0000000..250e8c9
--- /dev/null
+++ b/components/Control/ItemStackForm.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import materials from '@/lib/materials';
+
+const model = defineModel<any>();
+
+if (typeof model.value !== 'object' || model.value === null) {
+ model.value = {};
+}
+
+const itemName = computed({
+ get() {
+ return model.value.name;
+ },
+ set(newValue: string) {
+ model.value.name = newValue;
+ },
+});
+
+const itemType = computed({
+ get() {
+ return model.value.type || model.value.material || model.value.item;
+ },
+ set(newValue: string) {
+ if (model.value.material) {
+ model.value.material = newValue;
+ } else if (model.value.item) {
+ model.value.item = newValue;
+ } else {
+ model.value.type = newValue;
+ }
+ },
+});
+</script>
+
+<template>
+ <div class="option-group">
+ <label for="itemstack-name">Name</label>
+ <input id="itemstack-name" name="itemstack-name" v-model="itemName" placeholder="Enter a display name" />
+ </div>
+
+ <div class="option-group">
+ <label for="itemstack-name">Type</label>
+ <multiselect v-model="itemType"
+ :options="materials" :searchable="true" placeholder="Choose a material" />
+ </div>
+</template>
+
+<style scoped>
+</style> \ No newline at end of file