diff options
Diffstat (limited to 'components/base/ItemStack/ItemStackForm.vue')
| -rw-r--r-- | components/base/ItemStack/ItemStackForm.vue | 262 |
1 files changed, 187 insertions, 75 deletions
diff --git a/components/base/ItemStack/ItemStackForm.vue b/components/base/ItemStack/ItemStackForm.vue index ef13abd..ddf8144 100644 --- a/components/base/ItemStack/ItemStackForm.vue +++ b/components/base/ItemStack/ItemStackForm.vue @@ -16,25 +16,27 @@ const yamlCode = ref(''); const switchToYamlEditor = () => { yamlCode.value = stringify({ - type: model.value.type || model.value.material || model.value.item || "", - ...("name" in model.value && { name: model.value.name }), - ...("lore" in model.value && { lore: model.value.lore }), - ...("enchantments" in model.value && { enchantments: model.value.enchantments }), - ...("itemflags" in model.value && { itemflags: model.value.itemflags }), - ...("custommodeldata" in model.value && { custommodeldata: model.value.custommodeldata }), - ...("unbreakable" in model.value && { unbreakable: model.value.unbreakable }), - ...("attributemodifiers" in model.value && { attributemodifiers: model.value.attributemodifiers }), - ...("owner-base64" in model.value && { ["owner-base64"]: model.value["owner-base64"] }), - ...("owner-username" in model.value && { ["owner-username"]: model.value["owner-username"] }), - ...("owner-uuid" in model.value && { ["owner-uuid"]: model.value["owner-uuid"] }) - }) + type: model.value.type || model.value.material || model.value.item || '', + ...('name' in model.value && { name: model.value.name }), + ...('lore' in model.value && { lore: model.value.lore }), + ...('enchantments' in model.value && { enchantments: model.value.enchantments }), + ...('itemflags' in model.value && { itemflags: model.value.itemflags }), + ...('custommodeldata' in model.value && { custommodeldata: model.value.custommodeldata }), + ...('unbreakable' in model.value && { unbreakable: model.value.unbreakable }), + ...('attributemodifiers' in model.value && { + attributemodifiers: model.value.attributemodifiers, + }), + ...('owner-base64' in model.value && { ['owner-base64']: model.value['owner-base64'] }), + ...('owner-username' in model.value && { ['owner-username']: model.value['owner-username'] }), + ...('owner-uuid' in model.value && { ['owner-uuid']: model.value['owner-uuid'] }), + }); editAsYaml.value = true; -} +}; const switchToGuiEditor = () => { parseAndSetYamlValues(); editAsYaml.value = false; -} +}; const parseAndSetYamlValues = (): boolean => { let newValues; @@ -45,19 +47,31 @@ const parseAndSetYamlValues = (): boolean => { } model.value.type = newValues.type; - if ("name" in newValues) model.value.name = String(newValues.name); - if ("lore" in newValues) model.value.lore = Array.isArray(newValues.lore) ? newValues.lore : [newValues.lore]; - if ("enchantments" in newValues) model.value.enchantments = Array.isArray(newValues.enchantments) ? newValues.enchantments : [newValues.enchantments]; - if ("itemflags" in newValues) model.value.itemflags = Array.isArray(newValues.itemflags) ? newValues.itemflags : [newValues.itemflags]; - if ("custommodeldata" in newValues) model.value.custommodeldata = Number(newValues.custommodeldata) || 0; - if ("unbreakable" in newValues) model.value.unbreakable = !!newValues.unbreakable; - if ("attributemodifiers" in newValues) model.value.attributemodifiers = Array.isArray(newValues.attributemodifiers) ? newValues.attributemodifiers : [newValues.attributemodifiers]; - if ("owner-base64" in newValues) model.value["owner-base64"] = String(newValues["owner-base64"]); - if ("owner-username" in newValues) model.value["owner-username"] = String(newValues["owner-username"]); - if ("owner-uuid" in newValues) model.value["owner-uuid"] = String(newValues["owner-uuid"]); + if ('name' in newValues) model.value.name = String(newValues.name); + if ('lore' in newValues) + model.value.lore = Array.isArray(newValues.lore) ? newValues.lore : [newValues.lore]; + if ('enchantments' in newValues) + model.value.enchantments = Array.isArray(newValues.enchantments) + ? newValues.enchantments + : [newValues.enchantments]; + if ('itemflags' in newValues) + model.value.itemflags = Array.isArray(newValues.itemflags) + ? newValues.itemflags + : [newValues.itemflags]; + if ('custommodeldata' in newValues) + model.value.custommodeldata = Number(newValues.custommodeldata) || 0; + if ('unbreakable' in newValues) model.value.unbreakable = !!newValues.unbreakable; + if ('attributemodifiers' in newValues) + model.value.attributemodifiers = Array.isArray(newValues.attributemodifiers) + ? newValues.attributemodifiers + : [newValues.attributemodifiers]; + if ('owner-base64' in newValues) model.value['owner-base64'] = String(newValues['owner-base64']); + if ('owner-username' in newValues) + model.value['owner-username'] = String(newValues['owner-username']); + if ('owner-uuid' in newValues) model.value['owner-uuid'] = String(newValues['owner-uuid']); return true; -} +}; const itemName = computed({ get() { @@ -70,7 +84,7 @@ const itemName = computed({ const isOptionSet = (option: string) => { return option in model.value; -} +}; const setOption = (option: string, type: 'string' | 'string-list' | 'number' | 'boolean') => { switch (type) { @@ -87,11 +101,11 @@ const setOption = (option: string, type: 'string' | 'string-list' | 'number' | ' model.value[option] = []; break; } -} +}; const removeOption = (option: string) => { delete model.value[option]; -} +}; const itemType = computed({ get() { @@ -114,8 +128,8 @@ const itemLore = computed({ }, set(newValue: string) { model.value.lore = newValue.split('\n'); - } -}) + }, +}); const itemEnchantments = computed({ get() { @@ -123,8 +137,8 @@ const itemEnchantments = computed({ }, set(newValue: any) { model.value.enchantments = newValue; - } -}) + }, +}); const itemCustomModelData = computed({ get() { @@ -132,8 +146,8 @@ const itemCustomModelData = computed({ }, set(newValue: any) { model.value.custommodeldata = newValue; - } -}) + }, +}); const itemItemflags = computed({ get() { @@ -141,8 +155,8 @@ const itemItemflags = computed({ }, set(newValue: any) { model.value.itemflags = newValue; - } -}) + }, +}); </script> <template> @@ -151,69 +165,163 @@ const itemItemflags = computed({ <div class="label-with-button"> <label for="itemstack-type">Type</label> - <Button label="Edit as YAML" :icon="['fas', 'pencil']" @click="switchToYamlEditor()"></Button> + <Button + label="Edit as YAML" + :icon="['fas', 'pencil']" + @click="switchToYamlEditor()" + ></Button> </div> - <multiselect v-model="itemType" :options="materials" :searchable="true" placeholder="Choose a material" /> + <multiselect + v-model="itemType" + :options="materials" + :searchable="true" + placeholder="Choose a material" + /> </div> <div class="option-group" v-if="isOptionSet('name')"> - <ItemStackFormOptionLabel option="name" type="string" label="Name" :is-option-set-fn="isOptionSet" - :set-option-fn="setOption" :remove-option-fn="removeOption" /> + <ItemStackFormOptionLabel + option="name" + type="string" + label="Name" + :is-option-set-fn="isOptionSet" + :set-option-fn="setOption" + :remove-option-fn="removeOption" + /> - <input id="itemstack-name" name="itemstack-name" v-model="itemName" placeholder="Enter display name" /> + <input + id="itemstack-name" + name="itemstack-name" + v-model="itemName" + placeholder="Enter display name" + /> </div> <div class="option-group" v-if="isOptionSet('lore')"> - <ItemStackFormOptionLabel option="lore" type="string-list" label="Lore" :is-option-set-fn="isOptionSet" - :set-option-fn="setOption" :remove-option-fn="removeOption" /> + <ItemStackFormOptionLabel + option="lore" + type="string-list" + label="Lore" + :is-option-set-fn="isOptionSet" + :set-option-fn="setOption" + :remove-option-fn="removeOption" + /> - <textarea rows="5" id="itemstack-lore" name="itemstack-lore" v-model="itemLore" placeholder="Enter item lore" /> + <textarea + rows="5" + id="itemstack-lore" + name="itemstack-lore" + v-model="itemLore" + placeholder="Enter item lore" + /> </div> <div class="option-group" v-if="isOptionSet('enchantments')"> - <ItemStackFormOptionLabel option="enchantments" type="string-list" label="Enchantments" - :is-option-set-fn="isOptionSet" :set-option-fn="setOption" :remove-option-fn="removeOption" /> + <ItemStackFormOptionLabel + option="enchantments" + type="string-list" + label="Enchantments" + :is-option-set-fn="isOptionSet" + :set-option-fn="setOption" + :remove-option-fn="removeOption" + /> - <multiselect v-model="itemEnchantments" :options="enchantments" :searchable="true" :multiple="true" - placeholder="Enter enchantment names" /> + <multiselect + v-model="itemEnchantments" + :options="enchantments" + :searchable="true" + :multiple="true" + placeholder="Enter enchantment names" + /> </div> <div class="option-group" v-if="isOptionSet('itemflags')"> - <ItemStackFormOptionLabel option="itemflags" type="string-list" label="Item flags" :is-option-set-fn="isOptionSet" - :set-option-fn="setOption" :remove-option-fn="removeOption" /> + <ItemStackFormOptionLabel + option="itemflags" + type="string-list" + label="Item flags" + :is-option-set-fn="isOptionSet" + :set-option-fn="setOption" + :remove-option-fn="removeOption" + /> - <multiselect v-model="itemItemflags" :options="itemflags" :searchable="true" :multiple="true" - placeholder="Enter item flags" /> + <multiselect + v-model="itemItemflags" + :options="itemflags" + :searchable="true" + :multiple="true" + placeholder="Enter item flags" + /> </div> <div class="option-group" v-if="isOptionSet('custommodeldata')"> - <ItemStackFormOptionLabel option="custommodeldata" type="number" label="Custom model data" - :is-option-set-fn="isOptionSet" :set-option-fn="setOption" :remove-option-fn="removeOption" /> + <ItemStackFormOptionLabel + option="custommodeldata" + type="number" + label="Custom model data" + :is-option-set-fn="isOptionSet" + :set-option-fn="setOption" + :remove-option-fn="removeOption" + /> - <input id="itemstack-custommodeldata" name="itemstack-custommodeldata" v-model="itemCustomModelData" type="number" - placeholder="Enter custom model data" /> + <input + id="itemstack-custommodeldata" + name="itemstack-custommodeldata" + v-model="itemCustomModelData" + type="number" + placeholder="Enter custom model data" + /> </div> <div> - <Button v-if="!isOptionSet('name')" @click="setOption('name', 'string')" label="Add specific name" - :icon="['fas', 'plus']"></Button> - <Button v-if="!isOptionSet('lore')" @click="setOption('lore', 'string-list')" label="Add specific lore" - :icon="['fas', 'plus']"></Button> - <Button v-if="!isOptionSet('enchantments')" @click="setOption('enchantments', 'string-list')" - label="Add specific enchantments" :icon="['fas', 'plus']"></Button> - <Button v-if="!isOptionSet('itemflags')" @click="setOption('itemflags', 'string-list')" - label="Add specific item flags" :icon="['fas', 'plus']"></Button> - <Button v-if="!isOptionSet('custommodeldata')" @click="setOption('custommodeldata', 'string')" - label="Add specific custom model data" :icon="['fas', 'plus']"></Button> + <Button + v-if="!isOptionSet('name')" + @click="setOption('name', 'string')" + label="Add specific name" + :icon="['fas', 'plus']" + ></Button> + <Button + v-if="!isOptionSet('lore')" + @click="setOption('lore', 'string-list')" + label="Add specific lore" + :icon="['fas', 'plus']" + ></Button> + <Button + v-if="!isOptionSet('enchantments')" + @click="setOption('enchantments', 'string-list')" + label="Add specific enchantments" + :icon="['fas', 'plus']" + ></Button> + <Button + v-if="!isOptionSet('itemflags')" + @click="setOption('itemflags', 'string-list')" + label="Add specific item flags" + :icon="['fas', 'plus']" + ></Button> + <Button + v-if="!isOptionSet('custommodeldata')" + @click="setOption('custommodeldata', 'string')" + label="Add specific custom model data" + :icon="['fas', 'plus']" + ></Button> </div> - <p>For - <NuxtLink to="https://quests.leonardobishop.com/configuration/defining-items.html#unbreakable"> - unbreakable</NuxtLink>, - <NuxtLink to="https://quests.leonardobishop.com/configuration/defining-items.html#attribute-modifiers"> - attribute-modifiers</NuxtLink>, and - <NuxtLink to="https://quests.leonardobishop.com/configuration/defining-items.html#owner">owner</NuxtLink> please - switch to YAML. + <p> + For + <NuxtLink + to="https://quests.leonardobishop.com/configuration/defining-items.html#unbreakable" + > + unbreakable</NuxtLink + >, + <NuxtLink + to="https://quests.leonardobishop.com/configuration/defining-items.html#attribute-modifiers" + > + attribute-modifiers</NuxtLink + >, and + <NuxtLink to="https://quests.leonardobishop.com/configuration/defining-items.html#owner" + >owner</NuxtLink + > + please switch to YAML. </p> </div> @@ -222,7 +330,11 @@ const itemItemflags = computed({ <div class="label-with-button"> <label for="itemstack-name">YAML</label> - <Button label="Use GUI editor" :icon="['fas', 'pencil']" @click="switchToGuiEditor"></Button> + <Button + label="Use GUI editor" + :icon="['fas', 'pencil']" + @click="switchToGuiEditor" + ></Button> </div> <textarea id="yaml-editor" rows="10" v-model="yamlCode"></textarea> @@ -245,4 +357,4 @@ const itemItemflags = computed({ #yaml-editor { font-family: monospace; } -</style>
\ No newline at end of file +</style> |