Fixed function being replaced with object['value'] accessors

app/imports/api/creature/CreatureProperties.js

@@ -279,6 +279,7 @@ const softRemoveProperty = new ValidatedMethod({
 		let property = CreatureProperties.findOne(_id);
     assertPropertyEditPermission(property, this.userId);
 		softRemove({_id, collection: CreatureProperties});
+		recomputeCreatures(property);
 	}
 });
 

app/imports/api/creature/computation/utility/replaceBareSymbolsWithValueAccessor.js

@@ -1,7 +1,17 @@
 import * as math from 'mathjs';
 
 export default function replaceBareSymbolsWithValueAccessor(node, path) {
-  if (node.isSymbolNode && path !== 'object') {
+  if (node.isFunctionNode){
+    let fn = node.fn;
+    if (fn && fn.isSymbolNode){
+      fn.skipReplacement = true;
+    }
+    return node;
+  } else if (
+    node.isSymbolNode &&
+    path !== 'object' &&
+    node.skipReplacement !== true
+  ) {
     const object = new math.SymbolNode(node.name);
     const address = new math.ConstantNode('value');
     const index = new math.IndexNode([address]);

app/imports/api/properties/Buffs.js

@@ -59,6 +59,7 @@ let AppliedBuffSchema = new SimpleSchema({
 	},
 	appliedBy: {
 		type: Object,
+    optional: true,
 	},
 	'appliedBy.name': {
 		type: String,

app/imports/api/properties/Skills.js

@@ -24,13 +24,14 @@ let SkillSchema = new SimpleSchema({
   skillType: {
     type: String,
     allowedValues: [
-      "skill",
+      'skill',
-      "save",
+      'save',
-			"check",
+			'check',
-      "tool",
+      'tool',
-      "weapon",
+      'weapon',
-      "language",
+      'armor',
-			"utility", //not displayed anywhere
+      'language',
+			'utility', //not displayed anywhere
     ],
     defaultValue: 'skill',
   },

app/imports/ui/components/LabeledFab.vue

@@ -1,8 +1,13 @@
 <template>
-  <v-btn fab small @click="$emit('click')">
+  <v-btn
-    <v-icon>{{icon}}</v-icon>
+    fab
+    small
+    v-bind="$attrs"
+    @click="$emit('click')"
+  >
+    <v-icon>{{ icon }}</v-icon>
     <span id="label">
-      {{label}}
+      {{ label }}
     </span>
   </v-btn>
 </template>
@@ -12,8 +17,9 @@
    * Because speed dials only work well with v-btn's as children, this hacky
    * component creates a v-btn with a label.
    */
+   console.log('labeled fab reporting for duty')
   export default {
-    props: ["icon", "label"],
+    props: ['icon', 'label'],
   }
 </script>
 

app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue

@@ -162,6 +162,17 @@
               :data-id="weapon._id"
               @click="clickProperty({_id: weapon._id})"
             />
+            <v-subheader v-if="armors.length">
+              Armor
+            </v-subheader>
+            <skill-list-tile
+              v-for="armor in armors"
+              :key="armor._id"
+              hide-modifier
+              :model="armor"
+              :data-id="armor._id"
+              @click="clickProperty({_id: armor._id})"
+            />
             <v-subheader v-if="tools.length">
               Tools
             </v-subheader>
@@ -189,7 +200,7 @@
       </div>
 
       <div
-        v-if="actions.length"
+        v-if="actions.length || attacks.length"
         class="actions"
       >
         <v-card>
@@ -308,6 +319,9 @@
       weapons(){
         return getSkillOfType(this.creatureId, 'weapon');
 			},
+      armors(){
+        return getSkillOfType(this.creatureId, 'armor');
+			},
       languages(){
         return getSkillOfType(this.creatureId, 'language');
 			},

app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue

@@ -1,102 +1,112 @@
 <template lang="html">
   <div class="tree-tab">
-		<v-card class="ma-4 layout row" data-id="creature-tree-card">
+    <v-card
-			<div>
+      class="ma-4 layout row"
-				<v-toolbar flat dense>
+      data-id="creature-tree-card"
-					<v-spacer/>
+    >
-					<v-switch
+      <div>
-						label="Organize"
+        <v-toolbar
-						class="mx-3"
+          flat
-						v-model="organize"
+          dense
-						:disabled="organizeDisabled"
+        >
-						style="flex-grow: 0; height: 32px;"
+          <v-spacer />
-					/>
+          <v-switch
-				</v-toolbar>
+            v-model="organize"
-				<v-combobox
+            label="Organize"
-	        v-model="filterString"
+            class="mx-3"
-	        :items="filterOptions"
+            :disabled="organizeDisabled"
-	        prepend-inner-icon="search"
+            style="flex-grow: 0; height: 32px;"
-					class="mx-4"
+          />
-					hide-no-data
+        </v-toolbar>
-					hide-selected
+        <v-combobox
-					multiple
+          ref="searchBox"
-					clearable
+          v-model="filterString"
-					small-chips
+          :items="filterOptions"
-					deletable-chips
+          prepend-inner-icon="search"
-					ref="searchBox"
+          class="mx-4"
-      	/>
+          hide-no-data
-				<creature-properties-tree
+          hide-selected
-					class="pt-0"
+          multiple
-					:root="{collection: 'creatures', id: creatureId}"
+          clearable
-					:organize="organize"
+          small-chips
-					@selected="e => selected = e"
+          deletable-chips
-					:selected-node-id="selected"
+        />
-					:filter="filter"
+        <creature-properties-tree
-					style="min-width: 320px;"
+          class="pt-0"
-				/>
+          :root="{collection: 'creatures', id: creatureId}"
-			</div>
+          :organize="organize"
-			<v-divider vertical/>
+          :selected-node-id="selected"
-			<div style="width: 100%; background-color: inherit;" data-id="selected-node-card">
+          :filter="filter"
-				<v-toolbar dense flat>
+          style="min-width: 320px;"
-					<property-icon :type="selectedProperty && selectedProperty.type" class="mr-2"/>
+          @selected="e => selected = e"
-					<div class="title">
+        />
-						{{getPropertyName(selectedProperty && selectedProperty.type)}}
+      </div>
-					</div>
+      <v-divider vertical />
-					<v-spacer/>
+      <div
-					<v-btn flat icon @click="editCreatureProperty" v-if="selectedProperty">
+        style="width: 100%; background-color: inherit;"
-						<v-icon>create</v-icon>
+        data-id="selected-node-card"
-					</v-btn>
+      >
-				</v-toolbar>
+        <v-toolbar
-				<v-card-text>
+          dense
-					<property-viewer :model="selectedProperty"/>
+          flat
-				</v-card-text>
+        >
-			</div>
+          <property-icon
-		</v-card>
+            :type="selectedProperty && selectedProperty.type"
-		<v-speed-dial
+            class="mr-2"
+          />
+          <div class="title">
+            {{ getPropertyName(selectedProperty && selectedProperty.type) }}
+          </div>
+          <v-spacer />
+          <v-btn
+            v-if="selectedProperty"
+            flat
+            icon
+            @click="editCreatureProperty"
+          >
+            <v-icon>create</v-icon>
+          </v-btn>
+        </v-toolbar>
+        <v-card-text>
+          <property-viewer :model="selectedProperty" />
+        </v-card-text>
+      </div>
+    </v-card>
+    <v-speed-dial
       v-model="fab"
-			fixed
+      fixed
       bottom="bottom"
       right="right"
     >
-      <template v-slot:activator>
+      <template #activator>
         <v-btn
           v-model="fab"
           color="primary"
           fab
-					data-id="insert-creature-property-fab"
+          data-id="insert-creature-property-fab"
         >
           <v-icon>add</v-icon>
           <v-icon>close</v-icon>
         </v-btn>
       </template>
-			<v-tooltip disabled left :value="true" :nudge-left="16">
+      <labeled-fab
-				Property from library
+        color="primary"
-				<v-btn
+        label="Property from library"
-					slot="activator"
+        icon="book"
-					color="primary"
+        @click="propertyFromLibrary"
-					small fab
+      />
-					@click="propertyFromLibrary"
+      <labeled-fab
-				>
+        color="primary"
-					<v-icon>book</v-icon>
+        label="New property"
-				</v-btn>
+        icon="edit"
-			</v-tooltip>
+        @click="insertCreatureProperty"
-			<v-tooltip disabled left :value="true" :nudge-left="16">
+      />
-				New property
-				<v-btn
-					slot="activator"
-					color="primary"
-					small fab
-					@click="insertCreatureProperty"
-				>
-					<v-icon>edit</v-icon>
-				</v-btn>
-			</v-tooltip>
     </v-speed-dial>
   </div>
 </template>
 
 <script>
-import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
+  import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
 	import CreatureProperties, {
 		insertProperty,
 		insertPropertyFromLibraryNode
@@ -105,12 +115,19 @@ import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/Crea
 	import { setDocToLastOrder } from '/imports/api/parenting/order.js';
 	import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 	import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+  import LabeledFab from '/imports/ui/components/LabeledFab.vue';
 
 	export default {
 		components: {
 			CreaturePropertiesTree,
 			PropertyViewer,
 			PropertyIcon,
+      LabeledFab,
+		},
+		props: {
+			creatureId: {
+				type: String,
+			},
 		},
 		data(){ return {
 			organize: false,
@@ -140,63 +157,6 @@ import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/Crea
 				{text: 'Items', value: 'item'},
 			],
 		};},
-		props: {
-			creatureId: {
-				type: String,
-			},
-		},
-		methods: {
-			insertCreatureProperty(){
-				let that = this;
-				this.$store.commit('pushDialogStack', {
-					component: 'creature-property-creation-dialog',
-					elementId: 'insert-creature-property-fab',
-					callback(creatureProperty){
-						if (!creatureProperty) return;
-						creatureProperty.parent = {collection: "creatures", id: that.creatureId};
-						creatureProperty.ancestors = [ {collection: "creatures", id: that.creatureId}];
-						setDocToLastOrder({collection: CreatureProperties, doc: creatureProperty});
-						let creaturePropertyId = insertProperty.call({creatureProperty});
-						return creaturePropertyId;
-					}
-				});
-			},
-			propertyFromLibrary(){
-				let that = this;
-				this.$store.commit('pushDialogStack', {
-					component: 'creature-property-from-library-dialog',
-					elementId: 'insert-creature-property-fab',
-					callback(libraryNode){
-						if (!libraryNode) return;
-						let propertyId = insertPropertyFromLibraryNode.call({
-							nodeId: libraryNode._id,
-							parentRef: {collection: 'creatures', id: that.creatureId},
-						});
-						return;
-					}
-				});
-			},
-			editCreatureProperty(){
-				let that = this;
-				this.$store.commit('pushDialogStack', {
-					component: 'creature-property-dialog',
-					elementId: 'selected-node-card',
-					data: {
-						_id: this.selected,
-						startInEditTab: true,
-					},
-				});
-			},
-			getPropertyName,
-		},
-		meteor: {
-			selectedProperty(){
-				return CreatureProperties.findOne({
-					_id: this.selected,
-					removed: {$ne: true}
-				});
-			}
-		},
 		computed: {
 			filter(){
 				if (!this.filterString.length) return;
@@ -207,8 +167,8 @@ import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/Crea
 						typeFilters.push(filter.value);
 					} else {
 						// escape string
-						let term = filter.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' );
+						let term = filter.replace( /[-/\\^$*+?.()|[\]{}]/g, '\\$&' );
-  					var reg = new RegExp( '.*' + term + '.*', 'i' );
+            var reg = new RegExp( '.*' + term + '.*', 'i' );
 						nameFilters.push(reg)
 					}
 				});
@@ -227,6 +187,56 @@ import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/Crea
 					this.organizeDisabled = false;
 				}
 			},
+		},
+		methods: {
+			insertCreatureProperty(){
+				let that = this;
+				this.$store.commit('pushDialogStack', {
+					component: 'creature-property-creation-dialog',
+					elementId: 'insert-creature-property-fab',
+					callback(creatureProperty){
+						if (!creatureProperty) return;
+						creatureProperty.parent = {collection: 'creatures', id: that.creatureId};
+						creatureProperty.ancestors = [ {collection: 'creatures', id: that.creatureId}];
+						setDocToLastOrder({collection: CreatureProperties, doc: creatureProperty});
+						let creaturePropertyId = insertProperty.call({creatureProperty});
+						return creaturePropertyId;
+					}
+				});
+			},
+			propertyFromLibrary(){
+				let that = this;
+				this.$store.commit('pushDialogStack', {
+					component: 'creature-property-from-library-dialog',
+					elementId: 'insert-creature-property-fab',
+					callback(libraryNode){
+						if (!libraryNode) return;
+						insertPropertyFromLibraryNode.call({
+							nodeId: libraryNode._id,
+							parentRef: {collection: 'creatures', id: that.creatureId},
+						});
+					}
+				});
+			},
+			editCreatureProperty(){
+				this.$store.commit('pushDialogStack', {
+					component: 'creature-property-dialog',
+					elementId: 'selected-node-card',
+					data: {
+						_id: this.selected,
+						startInEditTab: true,
+					},
+				});
+			},
+			getPropertyName,
+		},
+		meteor: {
+			selectedProperty(){
+				return CreatureProperties.findOne({
+					_id: this.selected,
+					removed: {$ne: true}
+				});
+			}
 		}
 	};
 </script>

app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue

@@ -1,67 +1,98 @@
 <template lang="html">
-	<dialog-base>
+  <dialog-base>
- 	 <template slot="toolbar">
+    <template slot="toolbar">
- 		 <property-icon :type="model.type" class="mr-2"/>
+      <property-icon
- 		 <div class="title">
+        :type="model.type"
- 			 {{model.name || getPropertyName(model.type)}}
+        class="mr-2"
- 		 </div>
+      />
- 		 <v-spacer/>
+      <div class="title">
-		 <v-menu v-if="editing" bottom left transition="slide-y-transition">
+        {{ model.name || getPropertyName(model.type) }}
-      <template v-slot:activator="{ on }">
+      </div>
-				<v-btn icon v-on="on">
+      <v-spacer />
-					<v-icon>more_vert</v-icon>
+      <v-menu
-				</v-btn>
+        v-if="editing"
-			</template>
+        bottom
-			<v-list>
+        left
-				<v-list-tile @click="remove">
+        transition="slide-y-transition"
-					<v-list-tile-title>
+      >
-						Delete <v-icon>delete</v-icon>
+        <template #activator="{ on }">
-					</v-list-tile-title>
+          <v-btn
-				</v-list-tile>
+            icon
-			</v-list>
+            v-on="on"
-		 </v-menu>
+          >
-		 <v-btn icon @click="editing = !editing">
+            <v-icon>more_vert</v-icon>
-			 <v-slide-y-transition leave-absolute mode="out-in">
+          </v-btn>
-				 <v-icon v-if="editing" key="doneIcon">done</v-icon>
+        </template>
-				 <v-icon v-else key="createIcon">create</v-icon>
+        <v-list>
-			 </v-slide-y-transition>
+          <v-list-tile @click="remove">
-		 </v-btn>
+            <v-list-tile-title>
- 	 </template>
+              Delete <v-icon>delete</v-icon>
-	 <template v-if="model">
+            </v-list-tile-title>
-	 	 <component
+          </v-list-tile>
-	 		 v-if="editing"
+        </v-list>
-	 		 class="creature-property-form"
+      </v-menu>
-	 		 :is="model.type + 'Form'"
+      <v-btn
-	 		 :model="model"
+        icon
-	 		 @change="change"
+        @click="editing = !editing"
-	 		 @push="push"
+      >
-	 		 @pull="pull"
+        <v-slide-y-transition
-	 	 />
+          leave-absolute
-		 <component
+          mode="out-in"
-	 		 v-else-if="!editing && $options.components[model.type + 'Viewer']"
+        >
-	 		 class="creature-property-viewer"
+          <v-icon
-	 		 :is="model.type + 'Viewer'"
+            v-if="editing"
-	 		 :model="model"
+            key="doneIcon"
-	 	 />
+          >
-		 <p v-else>This property can't be viewed yet.</p>
+            done
-		 <template v-if="!editing">
+          </v-icon>
-		   <v-divider/>
+          <v-icon
-			 <creature-properties-tree
+            v-else
-				 v-if="!editing"
+            key="createIcon"
-				 :root="{collection: 'creatureProperties', id: model._id}"
+          >
-				 @selected="selectSubProperty"
+            create
-			 />
+          </v-icon>
-		 </template>
+        </v-slide-y-transition>
-	 </template>
+      </v-btn>
- 	 <div
+    </template>
- 		 slot="actions"
+    <template v-if="model">
- 		 class="layout row justify-end"
+      <component
- 	 >
+        :is="model.type + 'Form'"
- 		 <v-btn
+        v-if="editing"
- 			 flat
+        class="creature-property-form"
- 			 @click="$store.dispatch('popDialogStack')"
+        :model="model"
- 		 >Done</v-btn>
+        @change="change"
- 	 </div>
+        @push="push"
+        @pull="pull"
+      />
+      <component
+        :is="model.type + 'Viewer'"
+        v-else-if="!editing && $options.components[model.type + 'Viewer']"
+        class="creature-property-viewer"
+        :model="model"
+      />
+      <p v-else>
+        This property can't be viewed yet.
+      </p>
+      <template v-if="!editing">
+        <v-divider />
+        <creature-properties-tree
+          v-if="!editing"
+          :root="{collection: 'creatureProperties', id: model._id}"
+          @selected="selectSubProperty"
+        />
+      </template>
+    </template>
+    <div
+      slot="actions"
+      class="layout row justify-end"
+    >
+      <v-btn
+        flat
+        @click="$store.dispatch('popDialogStack')"
+      >
+        Done
+      </v-btn>
+    </div>
   </dialog-base>
 </template>
 
@@ -117,7 +148,7 @@ export default {
       if (!this.model) return;
       let nearestCreatureAncestor = findLast(
         this.model.ancestors,
-        ref => ref.collection === "creatures"
+        ref => ref.collection === 'creatures'
       );
       if (!nearestCreatureAncestor) return;
       return Creatures.findOne(nearestCreatureAncestor.id);
@@ -131,11 +162,13 @@ export default {
 		getPropertyName,
 		change({path, value, ack}){
 			updateProperty.call({_id: this._id, path, value}, (error, result) =>{
+        if (error) console.warn(error);
 				ack && ack(error && error.reason || error);
 			});
 		},
 		push({path, value, ack}){
 			pushToProperty.call({_id: this._id, path, value}, (error, result) =>{
+        if (error) console.warn(error);
 				ack && ack(error && error.reason || error);
 			});
 		},
@@ -143,6 +176,7 @@ export default {
 			let itemId = get(this.model, path)._id;
 			path.pop();
 			pullFromProperty.call({_id: this._id, path, itemId}, (error, result) =>{
+        if (error) console.warn(error);
 				ack && ack(error && error.reason || error);
 			});
 		},

app/imports/ui/pages/Home.vue

@@ -104,42 +104,6 @@
           </v-btn>
         </v-layout>
       </section>
-      <section>
-        <h1 class="mb-2 text-xs-center">
-          Check out the example characters
-        </h1>
-        <v-layout
-          row
-          align-center
-          justify-space-around
-          class="pa-4"
-        >
-          <a href="/character/yBWwt5XQTTHZiRQxq">
-            <v-hover>
-              <v-card
-                slot-scope="{ hover }"
-                :class="`elevation-${hover ? 12 : 2}`"
-              >
-                <v-card-text>
-                  Starter set archer
-                </v-card-text>
-              </v-card>
-            </v-hover>
-          </a>
-          <a href="/character/yBWwt5XQTTHZiRQxq">
-            <v-hover>
-              <v-card
-                slot-scope="{ hover }"
-                :class="`elevation-${hover ? 12 : 2}`"
-              >
-                <v-card-text>
-                  Starter set wizard
-                </v-card-text>
-              </v-card>
-            </v-hover>
-          </a>
-        </v-layout>
-      </section>
       <section class="text-xs-center grey darken-3 white--text pa-5">
         <h1>
           Get involved in the DiceCloud community
@@ -152,43 +116,20 @@
           class="pa-4"
         >
           <v-btn
-            href="https://reddit.com/r/dicecloud"
+            v-for="btn in [
+              {link: 'https://reddit.com/r/dicecloud', name: 'Reddit'},
+              {link: 'https://discord.gg/qEvdfeB', name: 'Discord'},
+              {link: 'https://www.patreon.com/dicecloud', name: 'Patreon'},
+              {link: 'https://github.com/ThaumRystra/DiceCloud', name: 'Github'},
+            ]"
+            :key="btn.name"
+            :href="btn.link"
             flat
             large
-            color="secondary"
+            color="primary"
           >
-            Reddit
+            {{ btn.name }}
           </v-btn>
-          <v-flex>
-            <v-btn
-              href="https://discord.gg/qEvdfeB"
-              flat
-              large
-              color="secondary"
-            >
-              Discord
-            </v-btn>
-          </v-flex>
-          <v-flex>
-            <v-btn
-              href="https://www.patreon.com/dicecloud"
-              flat
-              large
-              color="secondary"
-            >
-              Patreon
-            </v-btn>
-          </v-flex>
-          <v-flex>
-            <v-btn
-              href="https://github.com/ThaumRystra/DiceCloud"
-              flat
-              large
-              color="secondary"
-            >
-              Github
-            </v-btn>
-          </v-flex>
         </v-layout>
       </section>
     </div>

app/imports/ui/properties/forms/SkillForm.vue

@@ -112,6 +112,9 @@
 				}, {
 					text: 'Weapon',
 					value: 'weapon',
+				}, {
+					text: 'Armor',
+					value: 'armor',
 				}, {
 					text: 'Language',
 					value: 'language',

app/imports/ui/properties/forms/SpellForm.vue

@@ -56,25 +56,25 @@
     <div class="layout row wrap justify-space-between">
       <v-checkbox
         label="Verbal"
-        :value="model.verbal"
+        :input-value="model.verbal"
         :error-messages="errors.verbal"
-        @change="(value) => $emit('change', {path: ['verbal'], value})"
+        @change="(value) => log(value)/*$emit('change', {path: ['verbal'], value})*/"
       />
       <v-checkbox
         label="Somatic"
-        :value="model.somatic"
+        :input-value="model.somatic"
         :error-messages="errors.somatic"
         @change="(value) => $emit('change', {path: ['somatic'], value})"
       />
       <v-checkbox
         label="Concentration"
-        :value="model.concentration"
+        :input-value="model.concentration"
         :error-messages="errors.concentration"
         @change="(value) => $emit('change', {path: ['concentration'], value})"
       />
       <v-checkbox
         label="Ritual"
-        :value="model.ritual"
+        :input-value="model.ritual"
         :error-messages="errors.ritual"
         @change="(value) => $emit('change', {path: ['ritual'], value})"
       />
@@ -213,6 +213,9 @@
 				},
 			],
 		};},
+    methods: {
+      log: console.log,
+    },
 	};
 </script>
 

app/imports/ui/properties/forms/SpellListForm.vue

@@ -8,15 +8,6 @@
         :debounce-time="debounceTime"
         @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
       />
-      <text-field
-        label="Variable name"
-        :value="model.variableName"
-        style="flex-basis: 300px;"
-        hint="Use this name in formulae to reference this attribute"
-        :error-messages="errors.variableName"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['variableName'], value, ack})"
-      />
     </div>
     <text-area
       label="Description"

app/imports/ui/properties/shared/PropertyViewer.vue

@@ -1,13 +1,14 @@
 <template lang="html">
-	<component
+  <component
-		v-if="model && $options.components[model.type]"
+    :is="model.type"
-		class="property-viewer"
+    v-if="model && $options.components[model.type]"
-		:is="model.type"
+    :key="model._id"
-		:model="model"
+    class="property-viewer"
-	/>
+    :model="model"
-	<div v-else-if="model">
+  />
-		This property can't be viewed yet.
+  <div v-else-if="model">
-	</div>
+    This property can't be viewed yet.
+  </div>
 </template>
 
 <script>
@@ -19,6 +20,7 @@ export default {
 	props: {
 		model: {
 			type: Object,
+      default: undefined
 		},
 	},
 }