Files
DiceCloud/app/imports/ui/components/AttributeEdit.vue
2019-02-06 14:46:21 +02:00

113 lines
2.3 KiB
Vue

<template lang="html">
<div>
<v-text-field
label="Name"
:value="attribute.name"
/>
<v-text-field
label="Variable name"
:value="attribute.variableName"
@change="variableName => $emit('change', {variableName})"
hint="Use this name in formulae to reference this attribute"
/>
<v-text-field
label="Base Value"
type="number"
:value="attribute.baseValue"
@change="baseValue => $emit('change', {baseValue})"
hint="This is the value of the attribute before effects are applied"
/>
<v-text-field
label="Damage"
type="number"
:value="-attribute.adjustment"
@change="damage => $emit('change', {adjustment: -damage})"
/>
<v-select
label="Type"
color="accent"
append-icon="arrow_drop_down"
:items="attributeTypes"
:value="attribute.type"
:menu-props="{auto: true, lazy: true}"
@change="type => $emit('change', {type})"
/>
<v-switch
label="Allow decimal values"
:value="attribute.decimal"
@change="decimal => $emit('change', {decimal})"
/>
<v-select
label="Reset"
color="accent"
append-icon="arrow_drop_down"
:items="resetOptions"
:value="attribute.reset"
:menu-props="{auto: true, lazy: true}"
@change="reset => $emit('change', {reset})"
/>
<v-text-field
label="Reset Multiplier"
type="number"
:value="attribute.resetMultiplier"
@change="resetMultiplier => $emit('change', {resetMultiplier})"
hint="Some attributes, like hit dice, only reset by half their total on a long rest"
/>
</div>
</template>
<script>
export default {
props: {
attribute: {
type: Object,
default: {},
},
},
data(){ return{
attributeTypes: [
{
text: 'Ability score',
value: 'ability',
}, {
text: 'Stat',
value: 'stat',
}, {
text: 'Modifier',
value: 'modifier',
}, {
text: 'Hit dice',
value: 'hitDice',
}, {
text: 'Health bar',
value: 'healthBar',
}, {
text: 'Resource',
value: 'resource',
}, {
text: 'Spell slot',
value: 'spellSlot',
}, {
text: 'Utility',
value: 'utility',
},
],
resetOptions: [
{
text: 'None',
value: undefined,
}, {
text: 'Short rest',
value: 'shortRest',
}, {
text: 'Long rest',
value: 'longRest',
}
]
}},
}
</script>
<style lang="css" scoped>
</style>