From cb10b53a1062a4926560038f01c2ee30ba6c7dae Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 28 Sep 2021 14:25:11 +0200
Subject: [PATCH] Updated forms and some UI for new data structure

---
 .../tests/computeAttribute.testFn.js          |  2 +
 .../writeAlteredProperties.js                 |  6 +--
 app/imports/api/engine/computeCreature.js     |  2 +
 .../api/engine/oldActions/applyAttack.js      |  2 +-
 .../engine/oldActions/castSpellWithSlot.js    |  2 +-
 app/imports/api/properties/Attacks.js         |  2 -
 .../character/CharacterSheetToolbar.vue       |  5 ---
 .../character/characterSheetTabs/StatsTab.vue |  2 +-
 .../components/actions/ActionCard.vue         | 18 +++-----
 .../actions/AttributeConsumedView.vue         |  2 +-
 .../components/actions/ItemConsumedView.vue   | 11 +++--
 .../components/attributes/AbilityListTile.vue |  8 ++--
 .../components/attributes/AttributeCard.vue   |  4 +-
 .../components/attributes/AttributeEffect.vue | 15 +++++--
 .../components/attributes/HealthBarCard.vue   |  4 +-
 .../components/attributes/HitDiceListTile.vue | 11 ++---
 .../components/attributes/ResourceCard.vue    | 30 ++++++-------
 .../attributes/SpellSlotListTile.vue          | 13 +++---
 .../components/features/FeatureCard.vue       |  2 +-
 .../components/persona/NoteCard.vue           |  9 ++--
 .../ui/properties/forms/ActionForm.vue        | 38 ++++++++---------
 .../ui/properties/forms/AdjustmentForm.vue    |  7 ++--
 .../forms/AttributeConsumedForm.vue           |  8 ++--
 .../ui/properties/forms/AttributeForm.vue     | 21 +++++-----
 app/imports/ui/properties/forms/BuffForm.vue  | 22 +++++-----
 .../ui/properties/forms/ClassLevelForm.vue    | 12 ++----
 .../ui/properties/forms/ContainerForm.vue     | 11 +++--
 .../ui/properties/forms/DamageForm.vue        |  8 ++--
 .../ui/properties/forms/EffectForm.vue        |  9 ++--
 .../ui/properties/forms/FeatureForm.vue       | 20 ++++-----
 .../ui/properties/forms/ItemConsumedForm.vue  |  7 ++--
 app/imports/ui/properties/forms/ItemForm.vue  | 11 +++--
 app/imports/ui/properties/forms/NoteForm.vue  | 20 ++++-----
 app/imports/ui/properties/forms/RollForm.vue  | 10 ++---
 .../ui/properties/forms/SavingThrowForm.vue   |  9 ++--
 app/imports/ui/properties/forms/SkillForm.vue | 21 ++++------
 app/imports/ui/properties/forms/SlotForm.vue  | 28 ++++++-------
 app/imports/ui/properties/forms/SpellForm.vue | 10 ++---
 .../ui/properties/forms/SpellListForm.vue     | 36 +++++++---------
 .../ui/properties/forms/ToggleForm.vue        | 12 ++----
 .../properties/forms/shared/ComputedField.vue |  3 +-
 .../forms/shared/InlineComputationField.vue   | 42 +++++++++++++++++++
 .../forms/shared/propertyFormMixin.js         |  7 ++++
 .../treeNodeViews/AdjustmentTreeNode.vue      | 11 +++--
 .../treeNodeViews/DamageTreeNode.vue          |  2 +-
 .../treeNodeViews/EffectTreeNode.vue          |  3 +-
 .../ui/properties/viewers/ActionViewer.vue    | 32 +++++++-------
 .../properties/viewers/AdjustmentViewer.vue   |  8 ++--
 .../ui/properties/viewers/AttributeViewer.vue | 13 +++---
 .../ui/properties/viewers/BuffViewer.vue      |  8 ++--
 .../properties/viewers/ClassLevelViewer.vue   |  4 +-
 .../ui/properties/viewers/SkillViewer.vue     |  2 +-
 52 files changed, 304 insertions(+), 301 deletions(-)
 create mode 100644 app/imports/ui/properties/forms/shared/InlineComputationField.vue

diff --git a/app/imports/api/engine/computation/computeComputation/tests/computeAttribute.testFn.js b/app/imports/api/engine/computation/computeComputation/tests/computeAttribute.testFn.js
index 2a9e4f3c..9eb5858a 100644
--- a/app/imports/api/engine/computation/computeComputation/tests/computeAttribute.testFn.js
+++ b/app/imports/api/engine/computation/computeComputation/tests/computeAttribute.testFn.js
@@ -7,10 +7,12 @@ export default function(){
   const computation = buildComputationFromProps(testProperties);
   computeCreatureComputation(computation);
   const prop = id => computation.propsById[id];
+  const scope = variableName => computation.scope[variableName];
   assert.equal(prop('emptyId').value, 0);
   assert.equal(prop('noVariableNameId').value, 8);
   assert.equal(prop('strengthId').value, 12);
   assert.equal(prop('strengthId').modifier, 1);
+  assert.equal(scope('strength').modifier, 1);
   assert.equal(prop('referencesDexId').value, 4);
   assert.equal(prop('hitDiceId').constitutionMod, 5);
   assert.equal(
diff --git a/app/imports/api/engine/computation/writeComputation/writeAlteredProperties.js b/app/imports/api/engine/computation/writeComputation/writeAlteredProperties.js
index 0d7bcbe6..932975e6 100644
--- a/app/imports/api/engine/computation/writeComputation/writeAlteredProperties.js
+++ b/app/imports/api/engine/computation/writeComputation/writeAlteredProperties.js
@@ -36,9 +36,6 @@ function addChangedKeysToOp(op, keys, original, changed) {
   // and compile an operation that sets all those keys
   for (let key of keys){
     if (!isEqual(original[key], changed[key])){
-      console.log('not equal: ', key);
-      console.log(original[key])
-      console.log(changed[key])
       if (!op) op = newOperation(original._id, changed.type);
       let value = changed[key];
       if (value === undefined){
@@ -86,7 +83,6 @@ function addUnsetOp(op, key){
 // compensation without needing to roll back changes, which causes multiple
 // expensive redraws of the character sheet
 function writePropertiesSequentially(bulkWriteOps){
-  console.log({opsLength: bulkWriteOps.length});
   bulkWriteOps.forEach(op => {
     let updateOneOrMany = op.updateOne || op.updateMany;
     CreatureProperties.update(updateOneOrMany.filter, updateOneOrMany.update, {
@@ -95,7 +91,7 @@ function writePropertiesSequentially(bulkWriteOps){
       bypassCollection2: true,
     });
   });
-  console.log('finished writing ops');
+  if (bulkWriteOps.length) console.log(`Wrote ${bulkWriteOps.length} props`);
 }
 
 // This is more efficient on the database, but significantly less efficient
diff --git a/app/imports/api/engine/computeCreature.js b/app/imports/api/engine/computeCreature.js
index 9d404289..9817f754 100644
--- a/app/imports/api/engine/computeCreature.js
+++ b/app/imports/api/engine/computeCreature.js
@@ -3,9 +3,11 @@ import computeCreatureComputation from './computation/computeCreatureComputation
 import writeAlteredProperties from './computation/writeComputation/writeAlteredProperties.js';
 
 export default function computeCreature(creatureId){
+  console.time('Compute creature');
   const computation = buildCreatureComputation(creatureId);
   computeCreatureComputation(computation);
   writeAlteredProperties(computation);
+  console.timeEnd('Compute creature');
 }
 
 // For now just recompute the whole creature, TODO only recompute a single
diff --git a/app/imports/api/engine/oldActions/applyAttack.js b/app/imports/api/engine/oldActions/applyAttack.js
index e3774041..fb157ec5 100644
--- a/app/imports/api/engine/oldActions/applyAttack.js
+++ b/app/imports/api/engine/oldActions/applyAttack.js
@@ -9,7 +9,7 @@ export default function applyAttack({
   let value = roll(1, 20)[0];
   actionContext.attackRoll = {value};
   let criticalHitTarget = creature.variables.criticalHitTarget &&
-    creature.variables.criticalHitTarget.currentValue || 20;
+    creature.variables.criticalHitTarget.value || 20;
   let criticalHit = value >= criticalHitTarget;
   if (criticalHit) actionContext.criticalHit = {value: true};
   let result = value + prop.rollBonusResult;
diff --git a/app/imports/api/engine/oldActions/castSpellWithSlot.js b/app/imports/api/engine/oldActions/castSpellWithSlot.js
index 54d4686c..74ef41c3 100644
--- a/app/imports/api/engine/oldActions/castSpellWithSlot.js
+++ b/app/imports/api/engine/oldActions/castSpellWithSlot.js
@@ -49,7 +49,7 @@ const castSpellWithSlot = new ValidatedMethod({
         throw new Meteor.Error('No slot',
           'Slot not found to cast spell');
       }
-      if (!slot.currentValue){
+      if (!slot.value){
         throw new Meteor.Error('No slot',
           'Slot depleted');
       }
diff --git a/app/imports/api/properties/Attacks.js b/app/imports/api/properties/Attacks.js
index c0e947d5..ce4a6687 100644
--- a/app/imports/api/properties/Attacks.js
+++ b/app/imports/api/properties/Attacks.js
@@ -10,7 +10,6 @@ let AttackSchema = new SimpleSchema()
     // What gets added to the d20 roll
     rollBonus: {
       type: 'fieldToCompute',
-      parseLevel: 'compile',
       optional: true,
       defaultValue: 'strength.modifier + proficiencyBonus',
     },
@@ -36,7 +35,6 @@ const ComputedOnlyAttackSchema = new SimpleSchema()
   .extend(createPropertySchema({
     rollBonus: {
       type: 'computedOnlyField',
-      parseLevel: 'compile',
       optional: true,
     },
   }));
diff --git a/app/imports/ui/creature/character/CharacterSheetToolbar.vue b/app/imports/ui/creature/character/CharacterSheetToolbar.vue
index d8b4c549..ab087d56 100644
--- a/app/imports/ui/creature/character/CharacterSheetToolbar.vue
+++ b/app/imports/ui/creature/character/CharacterSheetToolbar.vue
@@ -225,11 +225,6 @@ export default {
     },
   },
   meteor: {
-    $subscribe: {
-      'singleCharacter'(){
-        return [this.creatureId];
-      },
-    },
     creature(){
       return Creatures.findOne(this.creatureId);
     },
diff --git a/app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue b/app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue
index 678f55ca..e36938e8 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue
@@ -142,7 +142,7 @@
         class="resource"
       >
         <resource-card
-          v-bind="resource"
+          :model="resource"
           :data-id="resource._id"
           @click="clickProperty({_id: resource._id})"
           @change="e => incrementChange(resource._id, e)"
diff --git a/app/imports/ui/properties/components/actions/ActionCard.vue b/app/imports/ui/properties/components/actions/ActionCard.vue
index 1f2e5b60..5ec693fd 100644
--- a/app/imports/ui/properties/components/actions/ActionCard.vue
+++ b/app/imports/ui/properties/components/actions/ActionCard.vue
@@ -40,8 +40,8 @@
           <div class="flex">
             {{ model.actionType }}
           </div>
-          <div v-if="model.uses">
-            {{ usesLeft }} uses
+          <div v-if="Number.isFinite(model.usesLeft)">
+            {{ model.usesLeft }} uses
           </div>
         </div>
       </div>
@@ -71,9 +71,7 @@
       </template>
       <template v-if="model.summary">
         <property-description
-          :string="model.summary"
-          :calculations="model.summaryCalculations"
-          :inactive="model.inactive"
+          :model="model.summary"
         />
         <v-divider
           v-if="children.length"
@@ -135,18 +133,12 @@ export default {
   }},
   computed: {
     rollBonus(){
-      if (!this.attack) return;
-      return numberToSignedString(this.model.rollBonusResult);
+      if (!this.attack || !this.model.rollBonus) return;
+      return numberToSignedString(this.model.rollBonus.value);
     },
     rollBonusTooLong(){
       return this.rollBonus && this.rollBonus.length > 3;
     },
-    totalUses(){
-      return Math.max(this.model.usesResult, 0);
-    },
-    usesLeft(){
-      return Math.max(this.model.usesResult - (this.model.usesUsed || 0), 0);
-    },
     propertyName(){
       return getPropertyName(this.model.type);
     },
diff --git a/app/imports/ui/properties/components/actions/AttributeConsumedView.vue b/app/imports/ui/properties/components/actions/AttributeConsumedView.vue
index 2266d6e3..26571332 100644
--- a/app/imports/ui/properties/components/actions/AttributeConsumedView.vue
+++ b/app/imports/ui/properties/components/actions/AttributeConsumedView.vue
@@ -7,7 +7,7 @@
       class="mr-2"
       style="width: 24px; text-align: center;"
     >
-      {{ model.quantity }}
+      {{ model.quantity && model.quantity.value }}
     </div>
     <div
       class="text-no-wrap text-truncate"
diff --git a/app/imports/ui/properties/components/actions/ItemConsumedView.vue b/app/imports/ui/properties/components/actions/ItemConsumedView.vue
index 696a5d76..083292e6 100644
--- a/app/imports/ui/properties/components/actions/ItemConsumedView.vue
+++ b/app/imports/ui/properties/components/actions/ItemConsumedView.vue
@@ -31,8 +31,8 @@
             class="mr-2 text-no-wrap"
             style="min-width: 24px; text-align: center;"
           >
-            <template v-if="model.quantity !== 0 && insufficient">
-              {{ model.available }} / {{ model.quantity }}
+            <template v-if="quantity !== 0 && insufficient">
+              {{ model.available }} / {{ quantity }}
             </template>
             <template v-else>
               {{ model.available }}
@@ -70,7 +70,7 @@
         class="mr-2"
         style="width: 24px; text-align: center;"
       >
-        {{ model.quantity }}
+        {{ quantity }}
       </div>
       <div
         class="text-no-wrap text-truncate"
@@ -110,7 +110,10 @@ export default {
   },
   computed: {
     insufficient(){
-      return this.model.quantity > this.model.available;
+      return this.quantity > this.model.available;
+    },
+    quantity(){
+      return this.model.quantity && this.model.quantity.value || 0;
     },
   },
 }
diff --git a/app/imports/ui/properties/components/attributes/AbilityListTile.vue b/app/imports/ui/properties/components/attributes/AbilityListTile.vue
index 0797d710..80921808 100644
--- a/app/imports/ui/properties/components/attributes/AbilityListTile.vue
+++ b/app/imports/ui/properties/components/attributes/AbilityListTile.vue
@@ -9,8 +9,8 @@
     >
       <div class="text-h4 mod">
         <template v-if="swapScoresAndMods">
-          <span :class="{'primary--text': model.currentValue !== model.value}">
-            {{ model.currentValue }}
+          <span :class="{'primary--text': model.total !== model.value}">
+            {{ model.value }}
           </span>
         </template>
         <template v-else>
@@ -22,8 +22,8 @@
           {{ numberToSignedString(model.modifier) }}
         </template>
         <template v-else>
-          <span :class="{'primary--text': model.currentValue !== model.value}">
-            {{ model.currentValue }}
+          <span :class="{'primary--text': model.total !== model.value}">
+            {{ model.value }}
           </span>
         </template>
       </div>
diff --git a/app/imports/ui/properties/components/attributes/AttributeCard.vue b/app/imports/ui/properties/components/attributes/AttributeCard.vue
index 5a695e6d..bb4d871a 100644
--- a/app/imports/ui/properties/components/attributes/AttributeCard.vue
+++ b/app/imports/ui/properties/components/attributes/AttributeCard.vue
@@ -30,9 +30,9 @@
       computedValue(){
         if (this.model.type === 'attribute'){
           if (this.model.attributeType === 'modifier'){
-            return numberToSignedString(this.model.currentValue);
+            return numberToSignedString(this.model.value);
           } else {
-            return this.model.currentValue
+            return this.model.value
           }
         } else {
           return this.model.value;
diff --git a/app/imports/ui/properties/components/attributes/AttributeEffect.vue b/app/imports/ui/properties/components/attributes/AttributeEffect.vue
index 823d0948..623a26b8 100644
--- a/app/imports/ui/properties/components/attributes/AttributeEffect.vue
+++ b/app/imports/ui/properties/components/attributes/AttributeEffect.vue
@@ -25,7 +25,7 @@
     </div>
     <div class="layout column my-2">
       <div class="text-body-1 mb-1">
-        {{ model.name || operation }}
+        {{ displayedText }}
       </div>
       <div v-if="!hideBreadcrumbs">
         <breadcrumbs
@@ -57,9 +57,18 @@
 		computed: {
       hasClickListener(){
         return this.$listeners && this.$listeners.click
+      },
+      displayedText(){
+        if (this.model.operation === 'conditional'){
+          return this.model.text || this.model.name || this.operation
+        } else {
+          return this.model.name || this.operation
+        }
       },
 			resolvedValue(){
-				return this.model.result !== undefined ? this.model.result : this.model.calculation;
+        let amount = this.model.amount;
+        if (!amount) return;
+				return amount.value !== undefined ? amount.value : amount.calculation;
 			},
 			effectIcon(){
 				let value = this.resolvedValue;
@@ -107,7 +116,7 @@
 					case 'disadvantage': return;
 					case 'passiveAdd': return isFinite(value) ? Math.abs(value) : value;
 					case 'fail': return;
-					case 'conditional': return;
+					case 'conditional': return undefined;
           default: return undefined;
 				}
 			}
diff --git a/app/imports/ui/properties/components/attributes/HealthBarCard.vue b/app/imports/ui/properties/components/attributes/HealthBarCard.vue
index 9465b86a..496aa7e7 100644
--- a/app/imports/ui/properties/components/attributes/HealthBarCard.vue
+++ b/app/imports/ui/properties/components/attributes/HealthBarCard.vue
@@ -3,8 +3,8 @@
     <health-bar
       v-for="attribute in attributes"
       :key="attribute._id"
-      :value="attribute.currentValue"
-      :max-value="attribute.value"
+      :value="attribute.value"
+      :max-value="attribute.total"
       :name="attribute.name"
       :_id="attribute._id"
       @change="e => $emit('change', {_id: attribute._id, change: e})"
diff --git a/app/imports/ui/properties/components/attributes/HitDiceListTile.vue b/app/imports/ui/properties/components/attributes/HitDiceListTile.vue
index 6a0f1644..e26f1abd 100644
--- a/app/imports/ui/properties/components/attributes/HitDiceListTile.vue
+++ b/app/imports/ui/properties/components/attributes/HitDiceListTile.vue
@@ -16,7 +16,7 @@
           <v-btn
             icon
             small
-            :disabled="currentValue >= model.value || context.editPermission === false"
+            :disabled="model.value >= model.total || context.editPermission === false"
             @click="increment(1)"
           >
             <v-icon>mdi-chevron-up</v-icon>
@@ -24,7 +24,7 @@
           <v-btn
             icon
             small
-            :disabled="currentValue <= 0 || context.editPermission === false"
+            :disabled="model.value <= 0 || context.editPermission === false"
             @click="increment(-1)"
           >
             <v-icon>mdi-chevron-down</v-icon>
@@ -35,10 +35,10 @@
           align-end
         >
           <div class="text-h4">
-            {{ currentValue }}
+            {{ model.value }}
           </div>
           <div class="text-h6 max-value ml-2">
-            /{{ model.value }}
+            /{{ model.total }}
           </div>
         </v-layout>
       </v-layout>
@@ -73,9 +73,6 @@ export default {
 		hover: false,
 	}},
   computed: {
-    currentValue(){
-      return this.model.value - (this.model.damage || 0);
-    },
     signedConMod(){
       return numberToSignedString(this.model.constitutionMod);
     },
diff --git a/app/imports/ui/properties/components/attributes/ResourceCard.vue b/app/imports/ui/properties/components/attributes/ResourceCard.vue
index a9546d18..6f3482a9 100644
--- a/app/imports/ui/properties/components/attributes/ResourceCard.vue
+++ b/app/imports/ui/properties/components/attributes/ResourceCard.vue
@@ -8,7 +8,7 @@
         <v-btn
           icon
           small
-          :disabled="currentValue >= value || context.editPermission === false"
+          :disabled="model.value >= model.total || context.editPermission === false"
           @click="increment(1)"
         >
           <v-icon>mdi-chevron-up</v-icon>
@@ -16,7 +16,7 @@
         <v-btn
           icon
           small
-          :disabled="currentValue <= 0 || context.editPermission === false"
+          :disabled="model.value <= 0 || context.editPermission === false"
           @click="increment(-1)"
         >
           <v-icon>mdi-chevron-down</v-icon>
@@ -26,10 +26,10 @@
         class="layout align-center value pl-2 pr-3"
       >
         <div class="text-h4">
-          {{ currentValue }}
+          {{ model.value }}
         </div>
         <div class="text-h6 ml-2 max-value">
-          /{{ value }}
+          /{{ model.total }}
         </div>
       </div>
       <div
@@ -39,7 +39,7 @@
         @mouseleave="hover = false"
       >
         <div class="text-truncate ">
-          {{ name }}
+          {{ model.name }}
         </div>
       </div>
     </v-layout>
@@ -48,24 +48,18 @@
 
 <script lang="js">
 	export default {
+    inject: {
+      context: { default: {} }
+    },
 		props: {
-			_id: String,
-			name: String,
-			color: String,
-			value: Number,
-			damage: Number,
+			model: {
+        type: Object,
+        required: true,
+      }
 		},
 		data(){ return{
 			hover: false,
 		}},
-    inject: {
-      context: { default: {} }
-    },
-		computed: {
-			currentValue(){
-				return this.value - (this.damage || 0);
-			},
-		},
 		methods: {
 			click(e){
 				this.$emit('click', e);
diff --git a/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue b/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue
index 4156f467..67fcd039 100644
--- a/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue
+++ b/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue
@@ -6,7 +6,7 @@
     <v-list-item-content>
       <v-list-item-title>
         <div
-          v-if="model.value > 4"
+          v-if="model.total > 4"
           class="layout value"
           style="align-items: baseline;"
         >
@@ -14,10 +14,10 @@
             style="font-weight: 500; font-size: 24px"
             class="current-value"
           >
-            {{ model.currentValue }}
+            {{ model.value }}
           </div>
           <div class="ml-2 max-value">
-            /{{ model.value }}
+            /{{ model.total }}
           </div>
         </div>
         <div
@@ -25,11 +25,11 @@
           class="layout align-center slot-bubbles"
         >
           <v-icon
-            v-for="i in model.value"
+            v-for="i in model.total"
             :key="i"
           >
             {{
-              i > model.currentValue ?
+              i > model.value ?
                 'mdi-radiobox-blank' :
                 'mdi-radiobox-marked'
             }}
@@ -66,9 +66,6 @@ export default {
     hideCastButton: Boolean,
 	},
 	computed: {
-		currentValue(){
-			return this.value - this.damage;
-		},
     hasClickListener(){
       return this.$listeners && !!this.$listeners.click;
     },
diff --git a/app/imports/ui/properties/components/features/FeatureCard.vue b/app/imports/ui/properties/components/features/FeatureCard.vue
index b4d086ea..9580db99 100644
--- a/app/imports/ui/properties/components/features/FeatureCard.vue
+++ b/app/imports/ui/properties/components/features/FeatureCard.vue
@@ -11,7 +11,7 @@
       <v-spacer />
     </template>
     <v-card-text v-if="model.summary">
-      <PropertyDescription
+      <property-description
         :model="model.summary"
       />
     </v-card-text>
diff --git a/app/imports/ui/properties/components/persona/NoteCard.vue b/app/imports/ui/properties/components/persona/NoteCard.vue
index d99fedf1..0fc91bb8 100644
--- a/app/imports/ui/properties/components/persona/NoteCard.vue
+++ b/app/imports/ui/properties/components/persona/NoteCard.vue
@@ -12,9 +12,7 @@
     </v-card-title>
     <v-card-text v-if="model.summary">
       <property-description
-        :string="model.summary"
-        :calculations="model.summaryCalculations"
-        :inactive="model.inactive"
+        :model="model.summary"
       />
     </v-card-text>
   </v-card>
@@ -29,7 +27,10 @@ export default {
 		PropertyDescription,
 	},
 	props: {
-		model: Object,
+		model: {
+      type: Object,
+      required: true,
+    },
 	},
   computed: {
     isDark(){
diff --git a/app/imports/ui/properties/forms/ActionForm.vue b/app/imports/ui/properties/forms/ActionForm.vue
index d347dd1a..72c11204 100644
--- a/app/imports/ui/properties/forms/ActionForm.vue
+++ b/app/imports/ui/properties/forms/ActionForm.vue
@@ -25,33 +25,32 @@
       @change="change('actionType', ...arguments)"
     />
 
-    <text-field
-      v-if="attackForm"
+    <computed-field
       label="Roll bonus"
-      :value="model.rollBonus"
-      :error-messages="errors.rollBonus"
       hint="A number (or calculation which returns a number) that is added to a d20 when making the attack roll"
-      @change="change('rollBonus', ...arguments)"
+      :model="model.rollBonus"
+      :error-messages="errors.rollBonus"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['rollBonus', ...path], value, ack})"
     />
-    <calculation-error-list :errors="model.rollBonusErrors" />
 
-    <text-area
+    <inline-computation-field
       label="Summary"
       hint="This will appear in the action card in the character sheet"
-      :value="model.summary"
+      :model="model.summary"
       :error-messages="errors.summary"
-      @change="change('summary', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['summary', ...path], value, ack})"
     />
-    <calculation-error-list :calculations="model.summaryCalculations" />
 
-    <text-area
+    <inline-computation-field
       label="Description"
       hint="The rest of the description that doesn't fit in the summary goes here"
-      :value="model.description"
+      :model="model.description"
       :error-messages="errors.description"
-      @change="change('description', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <calculation-error-list :calculations="model.descriptionCalculations" />
 
     <form-sections>
       <form-section name="Resources">
@@ -84,15 +83,14 @@
         />
         -->
         <div class="layout wrap">
-          <text-field
+          <computed-field
             label="Uses"
             hint="How many times this action can be used before needing to be reset"
-            style="flex-basis: 300px;"
-            :value="model.uses"
+            :model="model.uses"
             :error-messages="errors.uses"
-            @change="change('uses', ...arguments)"
+            @change="({path, value, ack}) =>
+              $emit('change', {path: ['uses', ...path], value, ack})"
           />
-          <calculation-error-list :errors="model.usesErrors" />
           <text-field
             label="Uses used"
             type="number"
@@ -123,14 +121,12 @@
   import FormSection, {FormSections} from '/imports/ui/properties/forms/shared/FormSection.vue';
   import ResourcesForm from '/imports/ui/properties/forms/ResourcesForm.vue';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
-  import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
   export default {
     components: {
       FormSection,
       FormSections,
       ResourcesForm,
-      CalculationErrorList,
     },
     mixins: [propertyFormMixin],
     props: {
diff --git a/app/imports/ui/properties/forms/AdjustmentForm.vue b/app/imports/ui/properties/forms/AdjustmentForm.vue
index 12f51a2e..5bc0e484 100644
--- a/app/imports/ui/properties/forms/AdjustmentForm.vue
+++ b/app/imports/ui/properties/forms/AdjustmentForm.vue
@@ -10,13 +10,14 @@
         :error-messages="errors.stat"
         @change="change('stat', ...arguments)"
       />
-      <text-field
+      <computed-field
         label="Amount"
         hint="The amount of damage to apply to the selected stat, can be a calculation or roll. Negative values will restore the selected from previous damage. If the operation is set, this is the final value of the stat instead."
         style="flex-basis: 300px;"
-        :value="model.amount"
+        :model="model.amount"
         :error-messages="errors.amount"
-        @change="change('amount', ...arguments)"
+        @change="({path, value, ack}) =>
+          $emit('change', {path: ['amount', ...path], value, ack})"
       />
     </div>
     <smart-select
diff --git a/app/imports/ui/properties/forms/AttributeConsumedForm.vue b/app/imports/ui/properties/forms/AttributeConsumedForm.vue
index f26469b8..9436d399 100644
--- a/app/imports/ui/properties/forms/AttributeConsumedForm.vue
+++ b/app/imports/ui/properties/forms/AttributeConsumedForm.vue
@@ -9,13 +9,13 @@
       :error-messages="errors.variableName"
       @change="change('variableName', ...arguments)"
     />
-    <text-field
+    <computed-field
       label="Quantity"
       hint="How much of the attribute will be consumed. If this amount is not available in the attribute, the action can't be taken"
-      style="flex-basis: 300px;"
-      :value="model.quantity"
+      :model="model.quantity"
       :error-messages="errors.quantity"
-      @change="change('quantity', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['quantity', ...path], value, ack})"
     />
   </div>
 </template>
diff --git a/app/imports/ui/properties/forms/AttributeForm.vue b/app/imports/ui/properties/forms/AttributeForm.vue
index 0fdcfafe..bebf448f 100644
--- a/app/imports/ui/properties/forms/AttributeForm.vue
+++ b/app/imports/ui/properties/forms/AttributeForm.vue
@@ -9,7 +9,8 @@
         style="width: 332px;"
         :model="model.baseValue"
         :error-messages="errors.baseValue"
-        @change="({path, value, ack}) => $emit('change', {path: ['baseValue', ...path], value, ack})"
+        @change="({path, value, ack}) =>
+          $emit('change', {path: ['baseValue', ...path], value, ack})"
       />
     </div>
     <div class="layout wrap">
@@ -46,18 +47,20 @@
       :menu-props="{auto: true, lazy: true}"
       @change="change('hitDiceSize', ...arguments)"
     />
-    <text-field
+    <computed-field
       v-if="model.attributeType === 'spellSlot'"
       label="Spell slot level"
-      :value="model.spellSlotLevelCalculation"
-      :error-messages="errors.spellSlotLevelCalculation"
-      @change="change('spellSlotLevelCalculation', ...arguments)"
+      :model="model.spellSlotLevel"
+      :error-messages="errors.spellSlotLevel"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['spellSlotLevel', ...path], value, ack})"
     />
-    <text-area
+    <inline-computation-field
       label="Description"
-      :value="model.description"
+      :model="model.description"
       :error-messages="errors.description"
-      @change="change('description', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['description', ...path], value, ack})"
     />
     <form-section
       name="Advanced"
@@ -119,12 +122,10 @@
 <script lang="js">
 	import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
-  import ComputedField from '/imports/ui/properties/forms/shared/ComputedField.vue';
 
 	export default {
 		components: {
 			FormSection,
-      ComputedField,
 		},
     mixins: [propertyFormMixin],
     inject: {
diff --git a/app/imports/ui/properties/forms/BuffForm.vue b/app/imports/ui/properties/forms/BuffForm.vue
index dab578ec..da60eadf 100644
--- a/app/imports/ui/properties/forms/BuffForm.vue
+++ b/app/imports/ui/properties/forms/BuffForm.vue
@@ -26,21 +26,23 @@
         </v-alert>
       </div>
     </v-expand-transition>
-    <text-area
+
+    <inline-computation-field
       label="Description"
-      :value="model.description"
+      :model="model.description"
       :error-messages="errors.description"
-      @change="change('description', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <calculation-error-list :calculations="model.descriptionCalculations" />
 
     <!-- Duration not implemented yet
-    <text-field
+    <computed-field
       label="Duration"
-      hint="How long the buff lasts"
-      :value="model.duration"
+      hint="How many rounds the buff lasts"
+      :model="model.duration"
       :error-messages="errors.duration"
-      @change="change('duration', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['duration', ...path], value, ack})"
     />
     -->
     <v-expand-transition>
@@ -69,12 +71,8 @@
 
 <script lang="js">
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
-  import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 	export default {
-    components: {
-      CalculationErrorList,
-    },
     mixins: [propertyFormMixin],
 		props: {
 			parentTarget: {
diff --git a/app/imports/ui/properties/forms/ClassLevelForm.vue b/app/imports/ui/properties/forms/ClassLevelForm.vue
index b3d53f11..5e4e986a 100644
--- a/app/imports/ui/properties/forms/ClassLevelForm.vue
+++ b/app/imports/ui/properties/forms/ClassLevelForm.vue
@@ -28,14 +28,14 @@
       />
     </div>
 
-    <text-area
+    <inline-computation-field
       label="Description"
       hint="A brief description of what this class level gives a character"
-      :value="model.description"
+      :model="model.description"
       :error-messages="errors.description"
-      @change="change('description', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <calculation-error-list :calculations="model.descriptionCalculations" />
 
     <text-field
       label="Condition"
@@ -60,12 +60,8 @@
 
 <script lang="js">
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
-  import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 	export default {
-    components: {
-      CalculationErrorList,
-    },
     mixins: [propertyFormMixin],
 	};
 </script>
diff --git a/app/imports/ui/properties/forms/ContainerForm.vue b/app/imports/ui/properties/forms/ContainerForm.vue
index 0c91809d..39b9defd 100644
--- a/app/imports/ui/properties/forms/ContainerForm.vue
+++ b/app/imports/ui/properties/forms/ContainerForm.vue
@@ -46,13 +46,14 @@
         @change="change('weight', ...arguments)"
       />
     </div>
-    <text-area
+
+    <inline-computation-field
       label="Description"
-      :value="model.description"
+      :model="model.description"
       :error-messages="errors.description"
-      @change="change('description', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <calculation-error-list :calculations="model.descriptionCalculations" />
 
     <form-section
       name="Advanced"
@@ -84,12 +85,10 @@
 <script lang="js">
 import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
-import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 export default {
 	components: {
 		FormSection,
-    CalculationErrorList,
 	},
   mixins: [propertyFormMixin],
 }
diff --git a/app/imports/ui/properties/forms/DamageForm.vue b/app/imports/ui/properties/forms/DamageForm.vue
index 45cfbd76..fdc8ca00 100644
--- a/app/imports/ui/properties/forms/DamageForm.vue
+++ b/app/imports/ui/properties/forms/DamageForm.vue
@@ -1,14 +1,14 @@
 <template lang="html">
   <div>
     <div class="layout">
-      <text-field
+      <computed-field
         ref="focusFirst"
         label="Damage"
-        style="flex-basis: 300px;"
         hint="A caculation including dice rolls of the damge to deal to the target when activated by an action"
-        :value="model.amount"
+        :model="model.amount"
         :error-messages="errors.amount"
-        @change="change('amount', ...arguments)"
+        @change="({path, value, ack}) =>
+          $emit('change', {path: ['amount', ...path], value, ack})"
       />
       <calculation-error-list :errors="model.amountErrors" />
       <smart-select
diff --git a/app/imports/ui/properties/forms/EffectForm.vue b/app/imports/ui/properties/forms/EffectForm.vue
index 2d012805..60bc25a3 100644
--- a/app/imports/ui/properties/forms/EffectForm.vue
+++ b/app/imports/ui/properties/forms/EffectForm.vue
@@ -49,15 +49,16 @@
       :error-messages="errors.stats"
       @change="change('stats', ...arguments)"
     />
-    <text-field
+    <computed-field
       label="Value"
       class="mr-2"
       hint="Number or calculation to determine the value of this effect"
       :persistent-hint="needsValue"
-      :value="needsValue ? (model.calculation) : ' '"
       :disabled="!needsValue"
-      :error-messages="errors.calculation"
-      @change="change('calculation', ...arguments)"
+      :model="model.amount"
+      :error-messages="errors.amount"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['amount', ...path], value, ack})"
     />
     <v-expand-transition>
       <text-field
diff --git a/app/imports/ui/properties/forms/FeatureForm.vue b/app/imports/ui/properties/forms/FeatureForm.vue
index 4f8bf154..77f3a77b 100644
--- a/app/imports/ui/properties/forms/FeatureForm.vue
+++ b/app/imports/ui/properties/forms/FeatureForm.vue
@@ -7,23 +7,23 @@
       :error-messages="errors.name"
       @change="change('name', ...arguments)"
     />
-    <text-area
+    <inline-computation-field
       label="Summary"
       hint="This will appear in the feature card in the character sheet"
-      :value="model.summary"
+      :model="model.summary"
       :error-messages="errors.summary"
-      @change="change('summary', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['summary', ...path], value, ack})"
     />
-    <calculation-error-list :calculations="model.summaryCalculations" />
 
-    <text-area
+    <inline-computation-field
       label="Description"
       hint="The rest of the description that doesn't fit in the summary goes here"
-      :value="model.description"
+      :model="model.description"
       :error-messages="errors.description"
-      @change="change('description', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <calculation-error-list :calculations="model.descriptionCalculations" />
 
     <smart-combobox
       label="Tags"
@@ -40,12 +40,8 @@
 
 <script lang="js">
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
-  import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 	export default {
-    components: {
-      CalculationErrorList,
-    },
     mixins: [propertyFormMixin],
 		data(){ return{
 			enabledOptions: [
diff --git a/app/imports/ui/properties/forms/ItemConsumedForm.vue b/app/imports/ui/properties/forms/ItemConsumedForm.vue
index 634fe171..4a7d5b3c 100644
--- a/app/imports/ui/properties/forms/ItemConsumedForm.vue
+++ b/app/imports/ui/properties/forms/ItemConsumedForm.vue
@@ -8,13 +8,14 @@
       :error-messages="errors.tag"
       @change="change('tag', ...arguments)"
     />
-    <text-field
+    <computed-field
       label="Quantity"
       hint="How many will be consumed"
       style="flex-basis: 300px;"
-      :value="model.quantity"
+      :model="model.quantity"
       :error-messages="errors.quantity"
-      @change="change('quantity', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['quantity', ...path], value, ack})"
     />
   </div>
 </template>
diff --git a/app/imports/ui/properties/forms/ItemForm.vue b/app/imports/ui/properties/forms/ItemForm.vue
index 8d7f2954..2e3643d5 100644
--- a/app/imports/ui/properties/forms/ItemForm.vue
+++ b/app/imports/ui/properties/forms/ItemForm.vue
@@ -71,13 +71,14 @@
       :error-messages="errors.quantity"
       @change="change('quantity', ...arguments)"
     />
-    <text-area
+
+    <inline-computation-field
       label="Description"
-      :value="model.description"
+      :model="model.description"
       :error-messages="errors.description"
-      @change="change('description', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <calculation-error-list :calculations="model.descriptionCalculations" />
 
     <form-section
       name="Advanced"
@@ -126,12 +127,10 @@
 <script lang="js">
 import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
-import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 export default {
 	components: {
 		FormSection,
-    CalculationErrorList,
 	},
   mixins: [propertyFormMixin],
 	}
diff --git a/app/imports/ui/properties/forms/NoteForm.vue b/app/imports/ui/properties/forms/NoteForm.vue
index 05aaf18f..a328de80 100644
--- a/app/imports/ui/properties/forms/NoteForm.vue
+++ b/app/imports/ui/properties/forms/NoteForm.vue
@@ -8,23 +8,23 @@
       @change="change('name', ...arguments)"
     />
 
-    <text-area
+    <inline-computation-field
       label="Summary"
       hint="This will appear in the card in the character sheet"
-      :value="model.summary"
+      :model="model.summary"
       :error-messages="errors.summary"
-      @change="change('summary', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['summary', ...path], value, ack})"
     />
-    <calculation-error-list :calculations="model.summaryCalculations" />
 
-    <text-area
+    <inline-computation-field
       label="Description"
       hint="Text that does not fit in the summary"
-      :value="model.description"
+      :model="model.description"
       :error-messages="errors.description"
-      @change="change('description', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <calculation-error-list :calculations="model.descriptionCalculations" />
 
     <smart-combobox
       label="Tags"
@@ -40,12 +40,8 @@
 
 <script lang="js">
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
-import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 export default {
-  components: {
-    CalculationErrorList,
-  },
   mixins: [propertyFormMixin],
 }
 </script>
diff --git a/app/imports/ui/properties/forms/RollForm.vue b/app/imports/ui/properties/forms/RollForm.vue
index 3d575a6b..27530a93 100644
--- a/app/imports/ui/properties/forms/RollForm.vue
+++ b/app/imports/ui/properties/forms/RollForm.vue
@@ -16,13 +16,13 @@
         @change="change('variableName', ...arguments)"
       />
     </div>
-    <text-field
-      ref="focusFirst"
-      label="Roll"
+    <computed-field
+      label="Roll bonus"
       hint="The calculation that will be evaluated when the roll is triggered by an action. The result will be saved as the variable name in the context of the roll."
-      :value="model.roll"
+      :model="model.roll"
       :error-messages="errors.roll"
-      @change="change('roll', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['roll', ...path], value, ack})"
     />
     <form-sections>
       <form-section name="Advanced">
diff --git a/app/imports/ui/properties/forms/SavingThrowForm.vue b/app/imports/ui/properties/forms/SavingThrowForm.vue
index 3e8a83a9..1cf03925 100644
--- a/app/imports/ui/properties/forms/SavingThrowForm.vue
+++ b/app/imports/ui/properties/forms/SavingThrowForm.vue
@@ -7,14 +7,15 @@
       :error-messages="errors.name"
       @change="change('name', ...arguments)"
     />
-    <text-field
+
+    <computed-field
       label="DC"
       hint="A calculation of the DC that the target of an action needs to save against in order to succeed. If the saving throw is lower than the DC, the children of this property will be activated."
-      :value="model.dc"
+      :model="model.dc"
       :error-messages="errors.dc"
-      @change="change('dc', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['dc', ...path], value, ack})"
     />
-    <calculation-error-list :errors="model.dcErrors" />
 
     <smart-combobox
       label="Save"
diff --git a/app/imports/ui/properties/forms/SkillForm.vue b/app/imports/ui/properties/forms/SkillForm.vue
index 6f185ead..eb4ee772 100644
--- a/app/imports/ui/properties/forms/SkillForm.vue
+++ b/app/imports/ui/properties/forms/SkillForm.vue
@@ -36,13 +36,13 @@
       @change="change('skillType', ...arguments)"
     />
 
-    <text-area
+    <inline-computation-field
       label="Description"
-      :value="model.description"
+      :model="model.description"
       :error-messages="errors.description"
-      @change="change('description', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <calculation-error-list :calculations="model.descriptionCalculations" />
 
     <form-section
       name="Advanced"
@@ -57,13 +57,13 @@
         @change="change('tags', ...arguments)"
       />
       <div class="layout justify-center">
-        <text-field
+        <computed-field
           label="Base Value"
-          class="base-value-field no-flex"
-          :value="model.baseValueCalculation"
           hint="This is the value of the skill before effects are applied"
-          :error-messages="errors.baseValueCalculation"
-          @change="change('baseValueCalculation', ...arguments)"
+          :model="model.baseValue"
+          :error-messages="errors.baseValue"
+          @change="({path, value, ack}) =>
+            $emit('change', {path: ['baseValue', ...path], value, ack})"
         />
         <proficiency-select
           style="flex-basis: 300px;"
@@ -73,7 +73,6 @@
           @change="change('baseProficiency', ...arguments)"
         />
       </div>
-      <calculation-error-list :errors="model.baseValueErrors" />
     </form-section>
   </div>
 </template>
@@ -83,13 +82,11 @@
 	import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
   import createListOfProperties from '/imports/ui/properties/forms/shared/lists/createListOfProperties.js';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
-  import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 	export default {
 		components: {
 			ProficiencySelect,
 			FormSection,
-      CalculationErrorList,
 		},
     mixins: [propertyFormMixin],
 		data(){return{
diff --git a/app/imports/ui/properties/forms/SlotForm.vue b/app/imports/ui/properties/forms/SlotForm.vue
index a29a5a6a..1422580e 100644
--- a/app/imports/ui/properties/forms/SlotForm.vue
+++ b/app/imports/ui/properties/forms/SlotForm.vue
@@ -74,23 +74,25 @@
         </v-btn>
       </div>
     </v-slide-x-transition>
-    <text-field
+
+    <computed-field
       label="Quantity"
       hint="How many matching properties must be used to fill this slot, 0 is unlimited"
-      :value="model.quantityExpected"
+      :model="model.quantityExpected"
       :error-messages="errors.quantityExpected"
-      @change="change('quantityExpected', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['quantityExpected', ...path], value, ack})"
     />
-    <calculation-error-list :errors="model.quantityExpectedErrors" />
-    <text-field
+
+    <computed-field
       label="Condition"
       hint="A caclulation to determine if this slot should be active"
       placeholder="Always active"
-      :value="model.slotCondition"
+      :model="model.slotCondition"
       :error-messages="errors.slotCondition"
-      @change="change('slotCondition', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['slotCondition', ...path], value, ack})"
     />
-    <calculation-error-list :errors="model.slotConditionErrors" />
 
     <smart-select
       label="Unique"
@@ -115,13 +117,13 @@
       </v-btn>
     </v-layout>
 
-    <text-area
+    <inline-computation-field
       label="Description"
-      :value="model.description"
+      :model="model.description"
       :error-messages="errors.description"
-      @change="change('description', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <calculation-error-list :calculations="model.descriptionCalculations" />
 
     <form-section
       name="Advanced"
@@ -161,14 +163,12 @@
 <script lang="js">
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
   import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
-  import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
   import PROPERTIES from '/imports/constants/PROPERTIES.js';
   import { SlotSchema } from '/imports/api/properties/Slots.js';
 
 	export default {
     components: {
 			FormSection,
-      CalculationErrorList,
 		},
     mixins: [propertyFormMixin],
     inject: {
diff --git a/app/imports/ui/properties/forms/SpellForm.vue b/app/imports/ui/properties/forms/SpellForm.vue
index bc03a38e..3f7b7867 100644
--- a/app/imports/ui/properties/forms/SpellForm.vue
+++ b/app/imports/ui/properties/forms/SpellForm.vue
@@ -98,13 +98,13 @@
       @change="change('duration', ...arguments)"
     />
 
-    <text-area
+    <inline-computation-field
       label="Description"
-      :value="model.description"
+      :model="model.description"
       :error-messages="errors.description"
-      @change="change('description', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <calculation-error-list :calculations="model.descriptionCalculations" />
 
     <smart-combobox
       label="Tags"
@@ -133,14 +133,12 @@
 	import FormSection, { FormSections } from '/imports/ui/properties/forms/shared/FormSection.vue';
   import ActionForm from '/imports/ui/properties/forms/ActionForm.vue'
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
-  import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 	export default {
 		components: {
       FormSections,
 			FormSection,
       ActionForm,
-      CalculationErrorList,
 		},
     mixins: [propertyFormMixin],
 		data(){return {
diff --git a/app/imports/ui/properties/forms/SpellListForm.vue b/app/imports/ui/properties/forms/SpellListForm.vue
index cb5bd3bd..e2040971 100644
--- a/app/imports/ui/properties/forms/SpellListForm.vue
+++ b/app/imports/ui/properties/forms/SpellListForm.vue
@@ -10,40 +10,40 @@
       />
     </div>
 
-    <text-area
+    <inline-computation-field
       label="Description"
-      :value="model.description"
+      :model="model.description"
       :error-messages="errors.description"
-      @change="change('description', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <calculation-error-list :calculations="model.descriptionCalculations" />
 
-    <text-field
+    <computed-field
       label="Maximum prepared spells"
-      :value="model.maxPrepared"
       hint="How many spells can be prepared"
+      :model="model.maxPrepared"
       :error-messages="errors.maxPrepared"
-      @change="change('maxPrepared', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['maxPrepared', ...path], value, ack})"
     />
-    <calculation-error-list :errors="model.maxPreparedErrors" />
 
-    <text-field
+    <computed-field
       label="Spell save DC"
-      :value="model.dc"
       hint="The spell save DC of spells in this list"
+      :model="model.dc"
       :error-messages="errors.dc"
-      @change="change('dc', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['dc', ...path], value, ack})"
     />
-    <calculation-error-list :errors="model.dcErrors" />
 
-    <text-field
+    <computed-field
       label="Attack roll bonus"
-      :value="model.attackRollBonus"
       hint="The attack roll bonus of spell attacks made by spells in this list"
+      :model="model.attackRollBonus"
       :error-messages="errors.attackRollBonus"
-      @change="change('attackRollBonus', ...arguments)"
+      @change="({path, value, ack}) =>
+        $emit('change', {path: ['attackRollBonus', ...path], value, ack})"
     />
-    <calculation-error-list :errors="model.attackRollBonusErrors" />
 
     <smart-combobox
       label="Tags"
@@ -59,12 +59,8 @@
 
 <script lang="js">
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
-import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 export default {
-  components: {
-    CalculationErrorList,
-  },
   mixins: [propertyFormMixin],
 };
 </script>
diff --git a/app/imports/ui/properties/forms/ToggleForm.vue b/app/imports/ui/properties/forms/ToggleForm.vue
index a9d5f8da..37910937 100644
--- a/app/imports/ui/properties/forms/ToggleForm.vue
+++ b/app/imports/ui/properties/forms/ToggleForm.vue
@@ -30,16 +30,16 @@
       </v-radio-group>
     </v-layout>
     <v-fade-transition>
-      <text-field
+      <computed-field
         v-show="radioSelection === 'calculated'"
         label="Condition"
         hint="When this calculation returns a value that isn't false or zero the children will be active"
-        :value="model.condition"
+        :model="model.condition"
         :error-messages="errors.condition"
-        @change="change('condition', ...arguments)"
+        @change="({path, value, ack}) =>
+          $emit('change', {path: ['condition', ...path], value, ack})"
       />
     </v-fade-transition>
-    <calculation-error-list :errors="model.errors" />
     <smart-combobox
       label="Tags"
       multiple
@@ -54,12 +54,8 @@
 
 <script lang="js">
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
-  import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 	export default {
-    components: {
-      CalculationErrorList,
-    },
     mixins: [propertyFormMixin],
     computed: {
       radioSelection(){
diff --git a/app/imports/ui/properties/forms/shared/ComputedField.vue b/app/imports/ui/properties/forms/shared/ComputedField.vue
index c7d5b8a2..13895868 100644
--- a/app/imports/ui/properties/forms/shared/ComputedField.vue
+++ b/app/imports/ui/properties/forms/shared/ComputedField.vue
@@ -2,7 +2,6 @@
   <div class="computed-field">
     <text-field
       :value="model.calculation"
-      :rows="1"
       v-bind="$attrs"
       @change="(value, ack) => $emit('change', {path: ['calculation'], value, ack})"
     >
@@ -17,7 +16,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 export default {
diff --git a/app/imports/ui/properties/forms/shared/InlineComputationField.vue b/app/imports/ui/properties/forms/shared/InlineComputationField.vue
new file mode 100644
index 00000000..8b58921f
--- /dev/null
+++ b/app/imports/ui/properties/forms/shared/InlineComputationField.vue
@@ -0,0 +1,42 @@
+<template lang="html">
+  <div class="inline-computation-field">
+    <text-area
+      :value="model.text"
+      v-bind="$attrs"
+      @change="(value, ack) => $emit('change', {path: ['text'], value, ack})"
+    />
+    <template v-for="calc in model.inlineCalculations">
+      <div
+        v-if="calc && calc.calculation && calc.errors.length"
+        :key="calc.calculation"
+      >
+        <v-subheader
+          class="warning--text"
+          style="font-family: monospace;"
+        >
+          { {{ calc.calculation }} }
+        </v-subheader>
+        <calculation-error-list :errors="calc.errors" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="js">
+import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
+
+export default {
+  components: {
+    CalculationErrorList,
+  },
+  props: {
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/properties/forms/shared/propertyFormMixin.js b/app/imports/ui/properties/forms/shared/propertyFormMixin.js
index 7d5bd384..e9eed2f4 100644
--- a/app/imports/ui/properties/forms/shared/propertyFormMixin.js
+++ b/app/imports/ui/properties/forms/shared/propertyFormMixin.js
@@ -1,4 +1,11 @@
+import ComputedField from '/imports/ui/properties/forms/shared/ComputedField.vue';
+import InlineComputationField from '/imports/ui/properties/forms/shared/InlineComputationField.vue';
+
 export default {
+  components: {
+    ComputedField,
+    InlineComputationField,
+  },
   props: {
     model: {
       type: [Object, Array],
diff --git a/app/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue b/app/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue
index 523ab5fc..796a87de 100644
--- a/app/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue
+++ b/app/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue
@@ -10,7 +10,7 @@
     <div
       class="text-no-wrap text-truncate"
     >
-      <span v-if="model.amountResult < 0">+</span>
+      <span v-if="amount < 0">+</span>
       {{ absoluteAmount }} {{ model.stat }}
       <span v-if="typeof absoluteAmount === 'string' || absoluteAmount >= 0">
         damage
@@ -25,11 +25,14 @@ import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeView
 export default {
   mixins: [treeNodeViewMixin],
   computed: {
+    amount(){
+      return this.model.amount && this.model.amount.value;
+    },
     absoluteAmount(){
-      if (typeof this.model.amountResult === 'number'){
-        return Math.abs(this.model.amountResult);
+      if (typeof this.amount === 'number'){
+        return Math.abs(this.amount);
       } else {
-        return this.model.amountResult;
+        return this.amount;
       }
     },
   }
diff --git a/app/imports/ui/properties/treeNodeViews/DamageTreeNode.vue b/app/imports/ui/properties/treeNodeViews/DamageTreeNode.vue
index 813c6782..47aee106 100644
--- a/app/imports/ui/properties/treeNodeViews/DamageTreeNode.vue
+++ b/app/imports/ui/properties/treeNodeViews/DamageTreeNode.vue
@@ -11,7 +11,7 @@
     <div
       class="text-no-wrap text-truncate"
     >
-      {{ model.amountResult }}
+      {{ model.amount && model.amount.value }}
       {{ model.damageType }}<span
         v-if="model.damageType !== 'healing'"
       >&nbsp;damage</span>
diff --git a/app/imports/ui/properties/treeNodeViews/EffectTreeNode.vue b/app/imports/ui/properties/treeNodeViews/EffectTreeNode.vue
index a3d73f7a..d56a48f0 100644
--- a/app/imports/ui/properties/treeNodeViews/EffectTreeNode.vue
+++ b/app/imports/ui/properties/treeNodeViews/EffectTreeNode.vue
@@ -37,7 +37,8 @@ export default {
   mixins: [treeNodeViewMixin],
   computed: {
     resolvedValue(){
-      return this.model.result !== undefined ? this.model.result : this.model.calculation;
+      return (this.model.amount && this.model.amount.value) !== undefined ?
+        this.model.amount.value : this.model.amount && this.model.amount.calculation;
     },
     effectIcon(){
       let value = this.resolvedValue;
diff --git a/app/imports/ui/properties/viewers/ActionViewer.vue b/app/imports/ui/properties/viewers/ActionViewer.vue
index 70ff8fae..7f1baacd 100644
--- a/app/imports/ui/properties/viewers/ActionViewer.vue
+++ b/app/imports/ui/properties/viewers/ActionViewer.vue
@@ -38,7 +38,7 @@
         style="font-size: 18px;"
         class="ma-2"
       >
-        <code>{{ model.rollBonus }}</code>
+        <code>{{ model.rollBonus && model.rollBonus.value }}</code>
         <span
           class="mx-1"
           style="font-size: 14px"
@@ -46,13 +46,13 @@
       </div>
       <div v-if="model.uses">
         <span
-          v-if="context.creatureId"
+          v-if="context.creatureId && model.uses.value"
           class="uses mx-2"
         >
-          {{ usesLeft }}/{{ model.usesResult }} uses
+          {{ usesLeft }}/{{ model.uses.value }} uses
         </span>
         <span v-else>
-          <code>{{ model.uses }}</code>
+          <code>{{ model.uses.calculation }}</code>
           <span class="mx-1">
             uses
           </span>
@@ -97,24 +97,21 @@
       left-pad
     />
     <v-divider
-      v-if="model.summary || model.description"
+      v-if="(model.summary && model.summary.text) ||
+        (model.description && model.description.text)"
       class="my-3"
     />
-    <template v-if="model.summary">
+    <template v-if="(model.summary && model.summary.text)">
       <property-description
-        :string="model.summary"
-        :calculations="model.summaryCalculations"
-        :inactive="model.inactive"
+        :model="model.summary"
       />
       <v-divider
-        v-if="model.description"
+        v-if="model.description && model.description.text"
         class="my-3"
       />
     </template>
     <property-description
-      :string="model.description"
-      :calculations="model.descriptionCalculations"
-      :inactive="model.inactive"
+      :model="model.description"
     />
   </div>
 </template>
@@ -157,17 +154,18 @@ export default {
       return undefined;
     },
     rollBonus(){
-      if (!this.attack) return;
-      return numberToSignedString(this.model.rollBonusResult);
+      if (!this.attack || !this.model.rollBonus) return;
+      return numberToSignedString(this.model.rollBonus.value);
     },
     rollBonusTooLong(){
       return this.rollBonus && this.rollBonus.length > 3;
     },
     totalUses(){
-      return Math.max(this.model.usesResult, 0);
+      if (!this.model.uses) return 0;
+      return Math.max(this.model.uses.value || 0, 0);
     },
     usesLeft(){
-      return Math.max(this.model.usesResult - (this.model.usesUsed || 0), 0);
+      return Math.max(this.totalUses - (this.model.usesUsed || 0), 0);
     },
     actionTypeIcon() {
       return `$vuetify.icons.${this.model.actionType}`;
diff --git a/app/imports/ui/properties/viewers/AdjustmentViewer.vue b/app/imports/ui/properties/viewers/AdjustmentViewer.vue
index 2a615d49..ee311f77 100644
--- a/app/imports/ui/properties/viewers/AdjustmentViewer.vue
+++ b/app/imports/ui/properties/viewers/AdjustmentViewer.vue
@@ -47,9 +47,11 @@
         return getEffectIcon(effectOp, -value);
 			},
       value(){
-        return 'amountResult' in this.model ?
-          this.model.amountResult :
-          this.model.amount;
+        if (this.model.amount && 'value' in this.model.amount){
+          return this.model.amount.value;
+        } else {
+          return this.model.amount.calculation;
+        }
       },
       displayedValue(){
         if (
diff --git a/app/imports/ui/properties/viewers/AttributeViewer.vue b/app/imports/ui/properties/viewers/AttributeViewer.vue
index 7119d389..f48872a2 100644
--- a/app/imports/ui/properties/viewers/AttributeViewer.vue
+++ b/app/imports/ui/properties/viewers/AttributeViewer.vue
@@ -11,7 +11,7 @@
           <div
             v-if="model.damage !== undefined"
           >
-            {{ model.value - model.damage }} / {{ model.value }}
+            {{ model.value }} / {{ model.total }}
           </div>
           <div v-else>
             {{ model.value }}
@@ -24,7 +24,7 @@
           large
           outlined
           color="primary"
-          :value="model.value - (model.damage || 0)"
+          :value="model.value"
           @change="damageProperty"
         >
           <v-icon>$vuetify.icons.abacus</v-icon>
@@ -52,9 +52,7 @@
       :value="reset"
     />
     <property-description
-      :string="model.description"
-      :calculations="model.descriptionCalculations"
-      :inactive="model.inactive"
+      :model="model.description"
     />
     <v-list>
       <attribute-effect
@@ -135,11 +133,10 @@
             _id: prop._id,
             name: 'Attribute base value',
             operation: 'base',
-            calculation: prop.baseValueCalculation,
-            result: prop.baseValue,
+            amount: prop.baseValue,
             stats: [prop.variableName],
             ancestors: prop.ancestors,
-          }) ).filter(effect => effect.result);
+          }) ).filter(effect => effect.amount);
         } else {
           return [];
         }
diff --git a/app/imports/ui/properties/viewers/BuffViewer.vue b/app/imports/ui/properties/viewers/BuffViewer.vue
index 613b8464..4b3dc033 100644
--- a/app/imports/ui/properties/viewers/BuffViewer.vue
+++ b/app/imports/ui/properties/viewers/BuffViewer.vue
@@ -1,14 +1,12 @@
 <template lang="html">
   <div class="buff-viewer">
     <property-name :value="model.name" />
-    <property-field
+    <!--<property-field
       name="Duration"
       :value="model.duration"
-    />
+    />-->
     <property-description
-      :string="model.description"
-      :calculations="model.descriptionCalculations"
-      :inactive="model.inactive"
+      :model="model.description"
     />
   </div>
 </template>
diff --git a/app/imports/ui/properties/viewers/ClassLevelViewer.vue b/app/imports/ui/properties/viewers/ClassLevelViewer.vue
index 6d8f9c02..4ef5c83b 100644
--- a/app/imports/ui/properties/viewers/ClassLevelViewer.vue
+++ b/app/imports/ui/properties/viewers/ClassLevelViewer.vue
@@ -9,9 +9,7 @@
       <code>{{ model.variableName }}</code>
     </p>
     <property-description
-      :string="model.description"
-      :calculations="model.descriptionCalculations"
-      :inactive="model.inactive"
+      :model="model.description"
     />
   </div>
 </template>
diff --git a/app/imports/ui/properties/viewers/SkillViewer.vue b/app/imports/ui/properties/viewers/SkillViewer.vue
index df8be16a..8f78a69b 100644
--- a/app/imports/ui/properties/viewers/SkillViewer.vue
+++ b/app/imports/ui/properties/viewers/SkillViewer.vue
@@ -222,7 +222,7 @@ export default {
       let creature = Creatures.findOne(creatureId)
       return creature &&
         creature.variables.proficiencyBonus &&
-        creature.variables.proficiencyBonus.currentValue;
+        creature.variables.proficiencyBonus.value;
     },
   },
 }