Use embedded property dialog in tree tab. Colors for creature properties

app/.meteor/packages

@@ -49,3 +49,4 @@ aldeed:schema-index
 akryum:vue-component
 accounts-patreon
 bozhao:link-accounts
+peerlibrary:reactive-publish

app/.meteor/versions

@@ -27,6 +27,8 @@ caching-html-compiler@1.1.3
 callback-hook@1.3.0
 check@1.3.1
 chuangbo:marked@0.3.5_1
+coffeescript@2.4.1
+coffeescript-compiler@2.4.1
 dburles:collection-helpers@1.1.0
 dburles:mongo-collection-instances@0.3.5
 ddp@1.4.0
@@ -91,6 +93,12 @@ observe-sequence@1.0.16
 ongoworks:speakingurl@9.0.0
 ordered-dict@1.1.0
 patreon-oauth@0.1.0
+peerlibrary:assert@0.3.0
+peerlibrary:extend-publish@0.6.0
+peerlibrary:fiber-utils@0.10.0
+peerlibrary:reactive-mongo@0.4.0
+peerlibrary:reactive-publish@0.10.0
+peerlibrary:server-autorun@0.8.0
 percolate:migrations@0.9.8
 percolate:synced-cron@1.3.2
 promise@0.11.2

app/imports/api/creature/CreatureProperties.js

@@ -2,6 +2,7 @@ import { Meteor } from 'meteor/meteor';
 import { Mongo } from 'meteor/mongo';
 import { ValidatedMethod } from 'meteor/mdg:validated-method';
 import SimpleSchema from 'simpl-schema';
+import ColorSchema from '/imports/api/properties/subSchemas/ColorSchema.js';
 import ChildSchema, { RefSchema } from '/imports/api/parenting/ChildSchema.js';
 import { recomputeCreature } from '/imports/api/creature/computation/recomputeCreature.js';
 import LibraryNodes from '/imports/api/library/LibraryNodes.js';
@@ -41,6 +42,7 @@ for (let key in propertySchemasIndex){
 	let schema = new SimpleSchema({});
 	schema.extend(propertySchemasIndex[key]);
 	schema.extend(CreaturePropertySchema);
+  schema.extend(ColorSchema);
 	schema.extend(ChildSchema);
 	schema.extend(SoftRemovableSchema);
 	CreatureProperties.attachSchema(schema, {
@@ -72,6 +74,7 @@ const insertProperty = new ValidatedMethod({
   name: 'CreatureProperties.methods.insert',
 	validate: null,
   run({creatureProperty}) {
+    delete creatureProperty._id;
     assertPropertyEditPermission(creatureProperty, this.userId);
 		let _id = CreatureProperties.insert(creatureProperty);
 		let property = CreatureProperties.findOne(_id);
@@ -79,6 +82,23 @@ const insertProperty = new ValidatedMethod({
   },
 });
 
+const duplicateProperty = new ValidatedMethod({
+  name: 'CreatureProperties.methods.duplicate',
+  validate: new SimpleSchema({
+    _id: {
+      type: String,
+      regEx: SimpleSchema.RegEx.Id,
+    }
+  }).validator(),
+  run({_id}) {
+    let creatureProperty = CreatureProperties.findOne(_id);
+    assertPropertyEditPermission(creatureProperty, this.userId);
+    delete creatureProperty._id;
+		CreatureProperties.insert(creatureProperty);
+    recomputeCreatures(creatureProperty);
+  },
+});
+
 const insertPropertyFromLibraryNode = new ValidatedMethod({
 	name: 'CreatureProperties.methods.insertPropertyFromLibraryNode',
 	validate: new SimpleSchema({
@@ -288,6 +308,7 @@ export default CreatureProperties;
 export {
 	CreaturePropertySchema,
 	insertProperty,
+  duplicateProperty,
 	insertPropertyFromLibraryNode,
 	updateProperty,
 	damageProperty,

app/imports/api/creature/Creatures.js

@@ -4,6 +4,7 @@ import deathSaveSchema from '/imports/api/properties/subSchemas/DeathSavesSchema
 import ColorSchema from '/imports/api/properties/subSchemas/ColorSchema.js';
 import SharingSchema from '/imports/api/sharing/SharingSchema.js';
 import {assertEditPermission} from '/imports/api/sharing/sharingPermissions.js';
+import { getUserTier } from '/imports/api/users/patreon/tiers.js';
 
 import '/imports/api/creature/removeCreature.js';
 
@@ -108,6 +109,11 @@ const insertCreature = new ValidatedMethod({
       throw new Meteor.Error('Creatures.methods.insert.denied',
       'You need to be logged in to insert a creature');
     }
+    let tier = getUserTier(this.userId);
+    if (!tier.paidBenefits){
+      throw new Meteor.Error('Creatures.methods.insert.denied',
+      `The ${tier.name} tier does not allow you to insert a creature`);
+    }
 
 		// Create the creature document
     let charId = Creatures.insert({

app/imports/api/creature/computation/combineStat.js

@@ -51,7 +51,7 @@ function combineSkill(stat, aggregator, memo){
 
   if (typeof profBonus !== 'number' && memo.statsByVariableName['level']){
     let level = memo.statsByVariableName['level'].value;
-    profBonus = Math.floor(level / 4 + 1.75);
+    profBonus = Math.ceil(level / 4) + 1;
   }
   // Multiply the proficiency bonus by the actual proficiency
   profBonus *= stat.proficiency;
@@ -60,7 +60,6 @@ function combineSkill(stat, aggregator, memo){
   if (result < aggregator.min) result = aggregator.min;
   if (result > aggregator.max) result = aggregator.max;
   result = Math.floor(result);
-  if (aggregator.base > result) result = aggregator.base;
   stat.value = result;
   // Advantage/disadvantage
   if (aggregator.advantage && !aggregator.disadvantage){

app/imports/api/library/Libraries.js

@@ -1,8 +1,10 @@
+import { ValidatedMethod } from 'meteor/mdg:validated-method';
 import SimpleSchema from 'simpl-schema';
 import SharingSchema from '/imports/api/sharing/SharingSchema.js';
 import simpleSchemaMixin from '/imports/api/creature/mixins/simpleSchemaMixin.js';
 import { assertEditPermission, assertOwnership } from '/imports/api/sharing/sharingPermissions.js';
 import LibraryNodes from '/imports/api/library/LibraryNodes.js';
+import { getUserTier } from '/imports/api/users/patreon/tiers.js'
 
 /**
  * Libraries are trees of library nodes where each node represents a character
@@ -38,6 +40,15 @@ const insertLibrary = new ValidatedMethod({
   ],
   schema: LibrarySchema.omit('owner', 'isDefault'),
   run(library) {
+    if (!this.userId) {
+      throw new Meteor.Error('Libraries.methods.insert.denied',
+      'You need to be logged in to insert a library');
+    }
+    let tier = getUserTier(this.userId);
+    if (!tier.paidBenefits){
+      throw new Meteor.Error('Libraries.methods.insert.denied',
+      `The ${tier.name} tier does not allow you to insert a library`);
+    }
     library.owner = this.userId;
 		return Libraries.insert(library);
   },

app/imports/api/library/LibraryNodes.js

@@ -2,6 +2,7 @@ import { Meteor } from 'meteor/meteor';
 import { Mongo } from 'meteor/mongo';
 import { ValidatedMethod } from 'meteor/mdg:validated-method';
 import SimpleSchema from 'simpl-schema';
+import ColorSchema from '/imports/api/properties/subSchemas/ColorSchema.js';
 import ChildSchema from '/imports/api/parenting/ChildSchema.js';
 import propertySchemasIndex from '/imports/api/properties/propertySchemasIndex.js';
 import Libraries from '/imports/api/library/Libraries.js';
@@ -28,6 +29,7 @@ let LibraryNodeSchema = new SimpleSchema({
 for (let key in propertySchemasIndex){
 	let schema = new SimpleSchema({});
 	schema.extend(LibraryNodeSchema);
+  schema.extend(ColorSchema);
 	schema.extend(propertySchemasIndex[key]);
 	schema.extend(ChildSchema);
 	schema.extend(SoftRemovableSchema);
@@ -52,11 +54,28 @@ const insertNode = new ValidatedMethod({
   name: 'LibraryNodes.methods.insert',
 	validate: null,
   run(libraryNode) {
+    delete libraryNode._id;
     assertNodeEditPermission(libraryNode, this.userId);
 		return LibraryNodes.insert(libraryNode);
   },
 });
 
+const duplicateNode = new ValidatedMethod({
+  name: 'LibraryNodes.methods.duplicate',
+	validate: new SimpleSchema({
+    _id: {
+      type: String,
+      regEx: SimpleSchema.RegEx.Id,
+    }
+  }).validator(),
+  run({_id}) {
+    let libraryNode = LibraryNodes.findOne(_id);
+    assertNodeEditPermission(libraryNode, this.userId);
+    delete libraryNode._id;
+		return LibraryNodes.insert(libraryNode);
+  },
+})
+
 const updateLibraryNode = new ValidatedMethod({
   name: 'LibraryNodes.methods.update',
   validate({_id, path}){
@@ -132,6 +151,7 @@ export default LibraryNodes;
 export {
 	LibraryNodeSchema,
 	insertNode,
+  duplicateNode,
 	updateLibraryNode,
 	pullFromLibraryNode,
 	pushToLibraryNode,

app/imports/api/parenting/ChildSchema.js

@@ -22,6 +22,7 @@ let ChildSchema = new SimpleSchema({
   ancestors: {
     type: Array,
     defaultValue: [],
+    max: 100,
   },
   'ancestors.$': {
     type: RefSchema,

app/imports/api/parenting/order.js

@@ -133,7 +133,7 @@ export function reorderDocs({collection, ancestorId}){
       });
     }
   });
-  if (Meteor.isServer){
+  if (Meteor.isServer && bulkWrite.length){
     collection.rawCollection().bulkWrite(
       bulkWrite,
       {ordered : false},

app/imports/api/sharing/sharingPermissions.js

@@ -1,17 +1,18 @@
 import { _ } from 'meteor/underscore';
 import fetchDocByRef from '/imports/api/parenting/fetchDocByRef.js';
+import { getUserTier } from '/imports/api/users/patreon/tiers.js';
 
 function assertIdValid(userId){
   if (!userId || typeof userId !== 'string'){
-    throw new Meteor.Error("Permission denied",
-      "No user ID given for edit permission check");
+    throw new Meteor.Error('Permission denied',
+      'No user ID given for edit permission check');
   }
 }
 
 function assertdocExists(doc){
   if (!doc){
-    throw new Meteor.Error("Permission denied",
-      `No such document exists`);
+    throw new Meteor.Error('Permission denied',
+      'No such document exists');
   }
 }
 
@@ -21,8 +22,8 @@ export function assertOwnership(doc, userId){
   if (doc.owner === userId ){
     return true;
   } else {
-    throw new Meteor.Error("Permission denied",
-      `You are not the owner of this document`);
+    throw new Meteor.Error('Permission denied',
+      'You are not the owner of this document');
   }
 }
 
@@ -35,11 +36,34 @@ export function assertOwnership(doc, userId){
 export function assertEditPermission(doc, userId) {
   assertIdValid(userId);
   assertdocExists(doc);
-  if (doc.owner === userId || _.contains(doc.writers, userId)){
+  let user = Meteor.users.findOne(userId, {
+    fields: {
+      'services.patreon': 1,
+      'roles': 1,
+    }
+  });
+
+  // Admin override
+  if (user.roles && user.roles.includes('admin')){
+    return true;
+  }
+
+  // Ensure the user is of a tier with paid benefits
+  let tier = getUserTier(user);
+  if (!tier.paidBenefits){
+    throw new Meteor.Error('Edit permission denied',
+      `The ${tier.name} tier does not allow you to edit this document`);
+  }
+
+  // Ensure the user is authorized for this specific document
+  if (
+    doc.owner === userId ||
+    _.contains(doc.writers, userId)
+  ){
     return true;
   } else {
-    throw new Meteor.Error("Edit permission denied",
-      `You do not have permission to edit this document`);
+    throw new Meteor.Error('Edit permission denied',
+      'You do not have permission to edit this document');
   }
 }
 
@@ -74,8 +98,8 @@ export function assertViewPermission(doc, userId) {
   ){
     return true;
   } else {
-    throw new Meteor.Error("View permission denied",
-      `You do not have permission to view this character`);
+    throw new Meteor.Error('View permission denied',
+      'You do not have permission to view this character');
   }
 }
 

app/imports/api/users/Users.js

@@ -80,6 +80,7 @@ const userSchema = new SimpleSchema({
   profile: {
     type: Object,
     blackbox: true,
+    optional: true,
   },
 });
 

app/imports/api/users/patreon/tiers.js

@@ -59,7 +59,11 @@ export function getTierByEntitledCents(entitledCents = 0){
 export function getUserTier(user){
   if (!user) throw 'user must be provided';
   if (typeof user === 'string'){
-    user = Meteor.users.findOne(user);
+    user = Meteor.users.findOne(user, {
+      fields: {
+        'services.patreon': 1,
+      }
+    });
     if (!user) throw 'User not found';
   }
   const entitledCents = getEntitledCents(user);

app/imports/server/publications/characterList.js

@@ -2,37 +2,41 @@ import Creatures from '/imports/api/creature/Creatures.js';
 import Parties from '/imports/api/campaign/Parties.js';
 
 Meteor.publish('characterList', function(){
-	var userId = this.userId;
-	if (!userId) {
-		return [];
-	}
-  const user = Meteor.user();
-	const subs = user && user.subscribedCharacters || [];
-	return [
-			Creatures.find({
-        $or: [
-          {readers: userId},
-          {writers: userId},
-          {owner: userId},
-          {_id: {$in: subs}},
-        ],
-        type: 'pc',
-      }, {
-				fields: {
-					name: 1,
-          initial: 1,
-					alignment: 1,
-					gender: 1,
-					readers: 1,
-					writers:1,
-					owner: 1,
-					color: 1,
-          picture: 1,
-					avatarPicture: 1,
-          public: 1,
-				}
-			}
-		),
-		Parties.find({owner: userId}),
-	];
+  this.autorun(function (){
+    var userId = this.userId;
+    if (!userId) {
+      return this.ready();
+    }
+    const user = Meteor.users.findOne(this.userId, {
+      fields: {subscribedCharacters: 1}
+    });
+    const subs = user && user.subscribedCharacters || [];
+    return [
+        Creatures.find({
+          $or: [
+            {readers: userId},
+            {writers: userId},
+            {owner: userId},
+            {_id: {$in: subs}},
+          ],
+          type: 'pc',
+        }, {
+          fields: {
+            name: 1,
+            initial: 1,
+            alignment: 1,
+            gender: 1,
+            readers: 1,
+            writers:1,
+            owner: 1,
+            color: 1,
+            picture: 1,
+            avatarPicture: 1,
+            public: 1,
+          }
+        }
+      ),
+      Parties.find({owner: userId}),
+    ];
+  });
 });

app/imports/server/publications/library.js

@@ -1,44 +1,61 @@
+import SimpleSchema from 'simpl-schema';
 import Libraries from '/imports/api/library/Libraries.js';
 import LibraryNodes from '/imports/api/library/LibraryNodes.js';
 
 const standardLibraryIds = [
-	'SRDLibraryGA3XWsd',
+  'SRDLibraryGA3XWsd',
 ];
 
 Meteor.publish('standardLibraries', function(){
-	return Libraries.find({_id: {$in: standardLibraryIds}});
+  return Libraries.find({_id: {$in: standardLibraryIds}});
 });
 
 Meteor.publish('libraries', function(){
-  if (!this.userId) return [];
-	const user = Meteor.user();
-	const subs = user && user.subscribedLibraries || [];
-	return Libraries.find({
-		$or: [
-			{owner: this.userId},
-			{writers: this.userId},
-			{readers: this.userId},
-			{_id: {$in: subs}},
-		]
-	});
+  this.autorun(function (){
+    if (!this.userId) {
+      return this.ready();
+    }
+    const user = Meteor.users.findOne(this.userId, {
+      fields: {subscribedLibraries: 1}
+    });
+    const subs = user && user.subscribedLibraries || [];
+    return Libraries.find({
+      $or: [
+        {owner: this.userId},
+        {writers: this.userId},
+        {readers: this.userId},
+        {_id: {$in: subs}},
+      ]
+    });
+  });
+});
+
+let libraryIdSchema = new SimpleSchema({
+  libraryId: {
+    type: String,
+    regEx: SimpleSchema.RegEx.Id,
+  },
 });
 
 Meteor.publish('library', function(libraryId){
-	if (!this.userId) return [];
-	let libraryCursor = Libraries.find({
-		_id: libraryId,
-		$or: [
-			{owner: this.userId},
-			{writers: this.userId},
-			{readers: this.userId},
-      {public: true},
-		],
-	});
-	if (!libraryCursor.count()) return [];
-	return [
-		libraryCursor,
-		LibraryNodes.find({
-			'ancestors.id': libraryId,
-		}),
-	];
+  libraryIdSchema.validate({libraryId});
+  this.autorun(function (){
+    if (!this.userId) return [];
+    let libraryCursor = Libraries.find({
+      _id: libraryId,
+      $or: [
+        {owner: this.userId},
+        {writers: this.userId},
+        {readers: this.userId},
+        {public: true},
+      ],
+    });
+    if (!libraryCursor.count()) return this.ready();
+    return [
+      libraryCursor,
+      LibraryNodes.find({
+        'ancestors.id': libraryId,
+      }),
+    ];
+  });
 });

app/imports/server/publications/singleCharacter.js

@@ -1,25 +1,33 @@
+import SimpleSchema from 'simpl-schema';
 import Creatures from '/imports/api/creature/Creatures.js';
 import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
 
-Meteor.publish('singleCharacter', function(charId){
-	let userId = this.userId;
-	var char = Creatures.findOne({
-		_id: charId,
-		$or: [
-			{readers: userId},
-			{writers: userId},
-			{owner: userId},
-			{public: true},
-		],
-	});
-	if (char){
-		return [
-			Creatures.find({_id: charId}),
-			CreatureProperties.find({
-				'ancestors.id': charId,
-			}),
-		];
-	} else {
-		return [];
-	}
+let schema = new SimpleSchema({
+  creatureId: {
+    type: String,
+    regEx: SimpleSchema.RegEx.Id,
+  },
+});
+
+Meteor.publish('singleCharacter', function(creatureId){
+  schema.validate({ creatureId });
+  this.autorun(function (){
+    let userId = this.userId;
+    let creatureCursor = Creatures.find({
+      _id: creatureId,
+      $or: [
+        {readers: userId},
+        {writers: userId},
+        {owner: userId},
+        {public: true},
+      ],
+    });
+    if (!creatureCursor.count()) return this.ready();
+    return [
+      creatureCursor,
+      CreatureProperties.find({
+        'ancestors.id': creatureId,
+      }),
+    ];
+  });
 });

app/imports/server/publications/users.js

@@ -1,3 +1,4 @@
+import SimpleSchema from 'simpl-schema';
 import '/imports/api/users/Users.js';
 import Invites from '/imports/api/users/Invites.js';
 
@@ -32,8 +33,20 @@ Meteor.publish('user', function(){
   ];
 });
 
+let userIdsSchema = new SimpleSchema({
+  ids: {
+    type: Array,
+    optional: true,
+  },
+  'ids.$':{
+    type: String,
+    regEx: SimpleSchema.RegEx.Id,
+  }
+})
+
 Meteor.publish('userPublicProfiles', function(ids){
-	if (!this.userId || !Array.isArray(ids)) return [];
+  userIdsSchema.validate({ids});
+	if (!this.userId || !ids) return this.ready();
 	return Meteor.users.find({
 		_id: {$in: ids}
 	},{

app/imports/ui/components/ColorPicker.Story.vue

@@ -1,26 +0,0 @@
-<template lang="html">
-	<v-layout justify-center>
-		<color-picker v-model="color"/>
-	</v-layout>
-</template>
-
-<script>
-	import ColorPicker from '/imports/ui/components/ColorPicker.vue';
-
-	export default {
-		data(){ return {
-			color: '#CE93D8',
-		}},
-		components: {
-			ColorPicker,
-		},
-		watch: {
-			color(newColor){
-				console.log(`%c${newColor}`, `background: ${newColor};`);
-			},
-		},
-	};
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/components/ColorPicker.vue

@@ -1,193 +1,230 @@
 <template lang="html">
-	<v-menu
-		:close-on-content-click="false"
+  <v-menu
+    v-model="opened"
+    :close-on-content-click="false"
     transition="slide-y-transition"
-		lazy
-		v-model="opened"
-	>
-		<v-btn
-		  slot="activator"
-			icon
-		>
-		  <v-icon>format_paint</v-icon>
-		</v-btn>
-		<v-card class="overflow-hidden">
-			<v-card-text>
-				<v-item-group v-model="color" mandatory>
-		      <v-layout row wrap>
-	          <v-item
-							v-for="kebabColorOption in colors"
-		          :key="kebabColorOption"
-							:value="kebabToCamelCase(kebabColorOption)"
-						>
-	            <div
-	              slot-scope="{ active, toggle }"
-	              :class="[kebabColorOption, kebabShade]"
-								class="color-swatch d-flex align-center"
-	              @click="toggle"
-	            >
-	              <v-scroll-y-transition>
-	                <v-icon
-	                  v-if="active"
-										:class="{dark: isDark(kebabColorOption, kebabShade)}"
-	                >check</v-icon>
-	              </v-scroll-y-transition>
-	            </div>
-	          </v-item>
-						<div class="spacer" v-for="i in 8"/>
-		      </v-layout>
-			  </v-item-group>
-				<v-item-group class="mt-2" v-model="shade" mandatory>
-		      <v-layout wrap>
-	          <v-item
-							v-for="kebabShadeOption in shades"
-							:key="kebabShadeOption"
-							:value="kebabToCamelCase(kebabShadeOption)"
-						>
-	            <div
-	              slot-scope="{ active, toggle }"
-	              :class="[kebabColor, kebabShadeOption]"
-								class="shade-swatch d-flex align-center"
-	              @click="toggle"
-	            >
-	              <v-scroll-y-transition>
-	                <v-icon
-	                  v-if="active"
-										:class="{dark: isDark(kebabColor, kebabShadeOption)}"
-	                >check</v-icon>
-	              </v-scroll-y-transition>
-	            </div>
-	          </v-item>
-						<div class="spacer" v-for="i in 8"/>
-		      </v-layout>
-			  </v-item-group>
-			</v-card-text>
-			<v-card-actions>
-				<v-spacer/>
-				<v-btn flat @click="opened = false">Done</v-btn>
-			</v-card-actions>
-		</v-card>
+    lazy
+    left
+  >
+    <v-btn
+      slot="activator"
+      icon
+    >
+      <v-icon>format_paint</v-icon>
+    </v-btn>
+    <v-card class="overflow-hidden">
+      <v-card-text>
+        <v-layout
+          row
+          wrap
+        >
+          <div
+            v-for="colorOption in colors"
+            :key="colorOption"
+            :class="[colorOption, shade]"
+            class="color-swatch d-flex align-center"
+            @click="color = colorOption"
+          >
+            <v-scroll-y-transition>
+              <v-icon
+                v-if="kebabColor === colorOption"
+                :class="{dark: isDark(colorOption, shade)}"
+              >
+                check
+              </v-icon>
+            </v-scroll-y-transition>
+          </div>
+          <div
+            v-for="i in 8"
+            :key="i"
+            class="spacer"
+          />
+        </v-layout>
+        <v-fade-transition>
+          <v-layout
+            v-show="color"
+            wrap
+            class="mt-2"
+          >
+            <div
+              v-for="shadeOption in shades"
+              :key="shadeOption"
+              :class="[kebabColor, shadeOption]"
+              class="shade-swatch d-flex align-center"
+              @click="shade = shadeOption"
+            >
+              <v-scroll-y-transition>
+                <v-icon
+                  v-if="kebabShade === shadeOption"
+                  :class="{dark: isDark(color, shade)}"
+                >
+                  check
+                </v-icon>
+              </v-scroll-y-transition>
+            </div>
+            <div
+              v-for="i in 8"
+              :key="i"
+              class="spacer"
+            />
+          </v-layout>
+        </v-fade-transition>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn
+          flat
+          @click="$emit('input')"
+        >
+          Clear
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          flat
+          @click="opened = false"
+        >
+          Done
+        </v-btn>
+      </v-card-actions>
+    </v-card>
   </v-menu>
 </template>
 
 <script>
-	import isDarkColor from '/imports/ui/utility/isDarkColor.js';
-	import vuetifyColors from 'vuetify/es5/util/colors';
-	import { kebabToCamelCase, camelToKebabCase } from '/imports/ui/utility/swapCase.js';
+  import isDarkColor from '/imports/ui/utility/isDarkColor.js';
+  import vuetifyColors from 'vuetify/es5/util/colors';
+  import { kebabToCamelCase, camelToKebabCase } from '/imports/ui/utility/swapCase.js';
 
-	function colorToHex(color, shade = 'base'){
-		color = kebabToCamelCase(color);
-		shade = kebabToCamelCase(shade);
-		return vuetifyColors[color][shade];
-	};
+  function colorToHex(color, shade = 'base'){
+    if (!color) return;
+    color = kebabToCamelCase(color);
+    shade = kebabToCamelCase(shade);
+    return vuetifyColors[color] && vuetifyColors[color][shade];
+  }
 
-	// Create an index of hex colors and what color/shade combination makes them
-	let colorIndex = {};
-	for (let color in vuetifyColors){
-		for (let shade in vuetifyColors[color]){
-			colorIndex[vuetifyColors[color][shade]] = {color, shade};
-		}
-	}
-	function hexToColor(hex){
-		return colorIndex[hex.toLowerCase()];
-	};
+  // Create an index of hex colors and what color/shade combination makes them
+  let colorIndex = {};
+  for (let color in vuetifyColors){
+    color = kebabToCamelCase(color);
+    for (let shade in vuetifyColors[color]){
+      shade = kebabToCamelCase(shade);
+      colorIndex[vuetifyColors[color][shade]] = {color, shade};
+    }
+  }
+  function hexToColor(hex){
+    if (!hex) return undefined;
+    return colorIndex[hex.toLowerCase()];
+  }
 
-	export default {
-		props: {
-			value: String, //hex string
-		},
-		data(){ return {
-			colors: [
-				'red',
-				'pink',
-				'purple',
-				'deep-purple',
-				'indigo',
-				'blue',
-				'light-blue',
-				'cyan',
-				'teal',
-				'green',
-				'light-green',
-				'lime',
-				'yellow',
-				'amber',
-				'orange',
-				'deep-orange',
-				'brown',
-				'grey',
-			],
-			shades: [
-				'lighten-4',
-				'lighten-3',
-				'lighten-2',
-				'lighten-1',
-				'base',
-				'darken-1',
-				'darken-2',
-				'darken-3',
-				'darken-4',
-			],
-			opened: false,
-		}},
-		methods: {
-			isDark(kebabColor, kebabShade){
-				color = colorToHex(kebabColor, kebabShade);
-				return isDarkColor(color);
-			},
-			kebabToCamelCase,
-		},
-		computed: {
-			combination (){
-				return hexToColor(this.value) || {};
-			},
-			color: {
-				get(){
-					return this.combination.color;
-				},
-				set(newColor){
-					this.$emit('input', colorToHex(newColor, this.shade));
-				},
-			},
-			shade: {
-				get(){
-					return this.combination.shade;
-				},
-				set(newShade){
-					this.$emit('input', colorToHex(this.color, newShade));
-				},
-			},
-			kebabColor(){
-				return camelToKebabCase(this.color);
-			},
-			kebabShade(){
-				return camelToKebabCase(this.shade);
-			},
-		},
-	};
+  export default {
+    props: {
+     //hex string
+      value: {
+        type: String,
+        default: undefined,
+      },
+    },
+    data(){ return {
+      colors: [
+        'red',
+        'pink',
+        'purple',
+        'deep-purple',
+        'indigo',
+        'blue',
+        'light-blue',
+        'cyan',
+        'teal',
+        'green',
+        'light-green',
+        'lime',
+        'yellow',
+        'amber',
+        'orange',
+        'deep-orange',
+        'brown',
+        'grey',
+      ],
+      shades: [
+        'lighten-4',
+        'lighten-3',
+        'lighten-2',
+        'lighten-1',
+        'base',
+        'darken-1',
+        'darken-2',
+        'darken-3',
+        'darken-4',
+      ],
+      opened: false,
+    }},
+    computed: {
+      combination (){
+        if (!this.value) return;
+        return hexToColor(this.value) || {};
+      },
+      color: {
+        get(){
+          return this.combination && this.combination.color;
+        },
+        set(newColor){
+          this.$emit('input', colorToHex(newColor, this.shade));
+        },
+      },
+      shade: {
+        get(){
+          return this.combination && this.combination.shade;
+        },
+        set(newShade){
+          this.$emit('input', colorToHex(this.color, newShade));
+        },
+      },
+      kebabColor(){
+        return camelToKebabCase(this.color);
+      },
+      kebabShade(){
+        return camelToKebabCase(this.shade);
+      },
+    },
+    methods: {
+      isDark(kebabColor, kebabShade){
+        let color = colorToHex(kebabColor, kebabShade);
+        return isDarkColor(color);
+      },
+      kebabToCamelCase,
+    },
+  };
 </script>
 
 <style lang="css" scoped>
-	.color-swatch, .shade-swatch {
-		height: 30px;
-		width: 30px;
-		flex-grow: 1;
-	}
-	.v-icon {
-		height: 30px;
-	}
-	.v-icon {
-		color: black;
-	}
-	.dark.v-icon {
-		color: white;
-	}
-	.layout {
-		max-width: 270px;
-	}
-	.spacer {
-		width: 30px;
-		height: 0;
-		flex-grow: 1;
-	}
+  .color-swatch, .shade-swatch {
+    height: 30px;
+    width: 30px;
+    flex-grow: 1;
+    cursor: pointer;
+    transition: all 0.2s linear;
+  }
+  .color-swatch:hover{
+    z-index: 1;
+    transform: scale(1.1);
+    box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),
+      0px 1px 1px 0px rgba(0,0,0,0.14),
+      0px 1px 3px 0px rgba(0,0,0,0.12);
+  }
+  .v-icon {
+    height: 30px;
+  }
+  .v-icon {
+    color: black;
+  }
+  .dark.v-icon {
+    color: white;
+  }
+  .layout {
+    max-width: 270px;
+  }
+  .spacer {
+    width: 30px;
+    height: 0;
+    flex-grow: 1;
+  }
 </style>

app/imports/ui/components/ColumnLayout.Story.vue

@@ -1,24 +0,0 @@
-<template lang="html">
-  <column-layout>
-		<div v-for="(height, n) in cardHeights" :key="n">
-			<v-card :height="height"/>
-		</div >
-  </column-layout>
-</template>
-
-<script>
-	import ColumnLayout from "/imports/ui/components/ColumnLayout.vue";
-	import { _ } from "meteor/underscore";
-	export default {
-		dontWrap: true,
-		data(){return{
-			cardHeights: _.times(12, n => `${_.random(100, 500)}px`),
-		}},
-		components: {
-			ColumnLayout,
-		},
-	};
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/components/ColumnLayout.vue

@@ -40,6 +40,7 @@ export default {
       Table and width set because firefox does not support break-inside: avoid
     */
     display: table;
+    table-layout: fixed;
     width: 100%;
 		-webkit-backface-visibility: hidden;
 		-webkit-transform: translateX(0);

app/imports/ui/components/IconSearch.Story.vue

@@ -1,16 +0,0 @@
-<template lang="html">
-	<icon-search/>
-</template>
-
-<script>
-	import IconSearch from '/imports/ui/components/IconSearch.vue';
-
-	export default {
-		components: {
-			IconSearch,
-		},
-	};
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/components/TreeDetailLayout.vue

@@ -0,0 +1,43 @@
+<template lang="html">
+  <div
+    class="layout row"
+    style="height: 100%;"
+  >
+    <div
+      class="layout column justify-start"
+      :style="computedTreeStyle"
+    >
+      <slot name="tree" />
+    </div>
+    <template v-if="$vuetify.breakpoint.mdAndUp">
+      <v-divider vertical />
+      <div
+        class="flex layout column"
+        style="background-color: inherit; overflow: hidden;"
+        data-id="selected-node-card"
+      >
+        <slot name="detail" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  computed:{
+    computedTreeStyle(){
+      if (this.$vuetify.breakpoint.smAndDown) return;
+      let style = 'flex-shrink: 0; flex-grow: 0; ';
+      if (this.$vuetify.breakpoint.xlOnly){
+        style += 'width: 400px;'
+      } else {
+        style += 'width: 320px;'
+      }
+      return style;
+    },
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/computation/ComputedForCreature.vue

@@ -11,7 +11,7 @@ import Computed from '/imports/ui/components/computation/Computed.vue';
 
 export default {
   inject: {
-    computationContext: { default: {} }
+    context: { default: {} }
   },
   components: {
     Computed,
@@ -24,8 +24,8 @@ export default {
   },
   computed: {
     scope(){
-      return this.computationContext.creature &&
-      this.computationContext.creature.variables;
+      return this.context.creature &&
+      this.context.creature.variables;
     }
   }
 }

app/imports/ui/components/global/DatePicker.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-	<v-menu
+  <v-menu
     v-model="menu"
     :close-on-content-click="false"
     lazy
@@ -7,21 +7,25 @@
     full-width
     min-width="290px"
   >
-    <template v-slot:activator="{ on }">
+    <template #activator="{ on }">
       <v-text-field
         :value="formattedSafeValue"
         v-bind="$attrs"
         prepend-icon="event"
         readonly
-        v-on="on"
-				:loading="loading"
+        :loading="loading"
         :error-messages="errors"
-				@focus="focused = true"
-				@blur="focused = false"
-				box
-      ></v-text-field>
+        :disabled="isDisabled"
+        box
+        v-on="on"
+        @focus="focused = true"
+        @blur="focused = false"
+      />
     </template>
-    <v-date-picker :value="formattedSafeValue" @input="dateInput"></v-date-picker>
+    <v-date-picker
+      :value="formattedSafeValue"
+      @input="dateInput"
+    />
   </v-menu>
 </template>
 
@@ -34,17 +38,17 @@ export default {
 	data(){return {
 		menu: false,
 	};},
+	computed: {
+		formattedSafeValue(){
+			return format(this.safeValue, 'YYYY-MM-DD')
+		},
+	},
 	methods: {
 		dateInput(e){
 			this.menu = false;
 			this.input(e);
 		},
 	},
-	computed: {
-		formattedSafeValue(){
-			return format(this.safeValue, 'YYYY-MM-DD')
-		},
-	},
 }
 </script>
 

app/imports/ui/components/global/SmartCheckbox.vue

@@ -0,0 +1,18 @@
+<template lang="html">
+  <v-checkbox
+    v-bind="$attrs"
+    :loading="loading"
+    :error-messages="errors"
+    :input-value="safeValue"
+    :disabled="isDisabled"
+    @change="change"
+  />
+</template>
+
+<script>
+  import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
+
+  export default {
+    mixins: [SmartInput],
+  };
+</script>

app/imports/ui/components/global/SmartCombobox.vue

@@ -6,6 +6,7 @@
     :value="safeValue"
     :menu-props="{auto: true, lazy: true}"
     :search-input.sync="searchInput"
+    :disabled="isDisabled"
     box
     @change="customChange"
     @focus="focused = true"

app/imports/ui/components/global/SmartInput.Story.vue

@@ -1,92 +0,0 @@
-<template lang="html">
-	<v-container grid-list-lg>
-		<v-layout row wrap align-center>
-
-			<v-flex xs6>
-				<text-field
-					:value="value1"
-					@change="value1Change"
-				/>
-			</v-flex>
-			<v-flex xs6>
-				<div class="flex">
-					{{value1}}
-				</div>
-			</v-flex>
-
-			<v-flex xs6>
-				<text-field
-					:value="changingValue"
-					@change="(val, ack) => {changingValue = val; ack()}"
-				/>
-			</v-flex>
-			<v-flex xs6>
-				{{changingValue}}
-			</v-flex>
-
-			<v-flex xs6>
-				<text-area
-					:value="value2"
-					@change="value2Change"
-					label="text-area"
-				/>
-			</v-flex>
-			<v-flex xs6>
-				{{value2}}
-			</v-flex>
-
-			<v-flex xs6>
-				<smart-select
-					:value="value3"
-					:items="['meep', 'moop', 'maap']"
-					label="select"
-					@change="(val, ack) => {setTimeout(() => {value3 = val; ack()}, 700)}"
-				/>
-			</v-flex>
-			<v-flex xs6>
-				{{value3}}
-			</v-flex>
-
-		</v-layout>
-	</v-container>
-</template>
-
-<script>
-	export default {
-		data(){ return {
-			value1: 'Five letters minimum, always trimmed',
-			value2: 'Takes 2s to write',
-			value3: 'meep',
-			changingValue: `Changes every 3s ${Math.random().toFixed(4)}`,
-		}},
-		methods: {
-			value1Change(val, ack){
-				let error;
-				val = val.trim();
-				if (!val || val.length < 5){
-					error = "Too short";
-				} else {
-					this.value1 = val;
-				}
-				ack(error);
-			},
-			value2Change(val, ack){
-				setTimeout(() => {
-					this.value2 = val;
-					ack();
-				}, 2000);
-			},
-		},
-		mounted() {
-	    setInterval(() => {
-	      this.changingValue = `Changes every 3s ${Math.random().toFixed(4)}`;
-	    }, 3000);
-	  },
-	};
-</script>
-
-<style lang="css" scoped>
-	.layout {
-		margin: 20px 0;
-	}
-</style>

app/imports/ui/components/global/SmartInputMixin.js

@@ -9,6 +9,9 @@
 import { debounce } from 'lodash';
 
 export default {
+  inject: {
+    context: { default: {} }
+  },
   inheritAttrs: false,
   data(){ return {
     error: false,
@@ -20,12 +23,9 @@ export default {
     inputValue: this.value,
   };},
   props: {
-    value: [String, Number, Date, Array],
-    debounceTime: {
-      type: Number,
-      default: 750,
-    },
+    value: [String, Number, Date, Array, Boolean],
     errorMessages: [String, Array],
+    disabled: Boolean,
   },
   watch: {
     focused(newFocus){
@@ -54,7 +54,7 @@ export default {
         this.safeValue = newValue;
       }
     },
-    safeValue(newSafeValue){
+    safeValue(){
       // The safe value only gets updated from the parent, so it must be valid
       this.error = false;
       this.ackErrors = null;
@@ -104,6 +104,16 @@ export default {
       }
       return errors;
     },
+    isDisabled(){
+      return this.context.editPermission === false || this.disabled;
+    },
+    debounceTime() {
+      if (Number.isFinite(this.context.debounceTime)){
+        return this.context.debounceTime;
+      } else {
+        return 750;
+      }
+    },
   },
   created(){
     this.debouncedChange = debounce(this.change, this.debounceTime);

app/imports/ui/components/global/SmartSelect.vue

@@ -1,17 +1,21 @@
 <template lang="html">
   <v-select
-		v-bind="$attrs"
-		:loading="loading"
-		:error-messages="errors"
-		:value="safeValue"
-		:menu-props="{auto: true, lazy: true}"
-		@change="change"
-		@focus="focused = true"
-		@blur="focused = false"
-		box
-	>
-		<slot name="prepend" slot="prepend"/>
-	</v-select>
+    v-bind="$attrs"
+    :loading="loading"
+    :error-messages="errors"
+    :value="safeValue"
+    :menu-props="{auto: true, lazy: true}"
+    :disabled="isDisabled"
+    box
+    @change="change"
+    @focus="focused = true"
+    @blur="focused = false"
+  >
+    <slot
+      slot="prepend"
+      name="prepend"
+    />
+  </v-select>
 </template>
 
 <script>

app/imports/ui/components/global/SmartSwitch.vue

@@ -0,0 +1,18 @@
+<template lang="html">
+  <v-switch
+    v-bind="$attrs"
+    :loading="loading"
+    :error-messages="errors"
+    :input-value="safeValue"
+    :disabled="isDisabled"
+    @change="change"
+  />
+</template>
+
+<script>
+  import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
+
+  export default {
+    mixins: [SmartInput],
+  };
+</script>

app/imports/ui/components/global/TextArea.vue

@@ -1,15 +1,16 @@
 <template lang="html">
   <v-textarea
-		v-bind="$attrs"
-		:loading="loading"
-		:error-messages="errors"
-		:value="safeValue"
-		:auto-grow="autoGrow"
-		@input="input"
-		@focus="focused = true"
-		@blur="focused = false"
-		box
-	/>
+    v-bind="$attrs"
+    :loading="loading"
+    :error-messages="errors"
+    :value="safeValue"
+    :disabled="isDisabled"
+    :auto-grow="autoGrow"
+    box
+    @input="input"
+    @focus="focused = true"
+    @blur="focused = false"
+  />
 </template>
 
 <script>
@@ -20,7 +21,7 @@
 		props: {
 			autoGrow: {
 				type: Boolean,
-				default: true,
+				default: false,
 			},
 		},
 	};

app/imports/ui/components/global/TextField.vue

@@ -1,20 +1,21 @@
 <template lang="html">
   <v-text-field
-		v-bind="$attrs"
-		:loading="loading"
-		:error-messages="errors"
-		:value="safeValue"
-		@input="input"
-		@focus="focused = true"
-		@blur="focused = false"
-		box
-	/>
+    v-bind="$attrs"
+    :loading="loading"
+    :error-messages="errors"
+    :value="safeValue"
+    :disabled="isDisabled"
+    box
+    @input="input"
+    @focus="focused = true"
+    @blur="focused = false"
+  />
 </template>
 
 <script>
-	import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
+  import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 
-	export default {
-		mixins: [SmartInput],
-	};
+  export default {
+    mixins: [SmartInput],
+  };
 </script>

app/imports/ui/components/global/globalIndex.js

@@ -5,9 +5,13 @@ import TextField from '/imports/ui/components/global/TextField.vue';
 import TextArea from '/imports/ui/components/global/TextArea.vue';
 import SmartSelect from '/imports/ui/components/global/SmartSelect.vue';
 import SmartCombobox from '/imports/ui/components/global/SmartCombobox.vue';
+import SmartCheckbox from '/imports/ui/components/global/SmartCheckbox.vue';
+import SmartSwitch from '/imports/ui/components/global/SmartSwitch.vue';
 
 Vue.component('DatePicker', DatePicker);
 Vue.component('TextField', TextField);
 Vue.component('TextArea', TextArea);
 Vue.component('SmartSelect', SmartSelect);
 Vue.component('SmartCombobox', SmartCombobox);
+Vue.component('SmartCheckbox', SmartCheckbox);
+Vue.component('SmartSwitch', SmartSwitch);

app/imports/ui/components/propertyToolbar.vue

@@ -0,0 +1,156 @@
+<template lang="html">
+  <v-toolbar
+    :color="color || 'secondary'"
+    :dark="isDark"
+    :flat="flat"
+  >
+    <property-icon
+      :type="model && model.type"
+      class="mr-2"
+    />
+    <v-toolbar-title v-if="model">
+      {{ model.name || getPropertyName(model.type) }}
+    </v-toolbar-title>
+    <v-spacer />
+    <v-slide-y-transition
+      hide-on-leave
+    >
+      <v-layout
+        v-if="editing && model"
+        key="edit-buttons"
+      >
+        <v-spacer />
+        <color-picker
+          v-if="$listeners && $listeners['color-changed']"
+          :value="model.color"
+          @input="colorChanged"
+        />
+        <v-menu
+          v-if="$listeners && (
+            $listeners.move ||
+            $listeners.duplicate ||
+            $listeners.remove
+          )"
+          bottom
+          left
+          transition="slide-y-transition"
+        >
+          <template #activator="{ on }">
+            <v-btn
+              icon
+              data-id="property-toolbar-menu-button"
+              v-on="on"
+            >
+              <v-icon>more_vert</v-icon>
+            </v-btn>
+          </template>
+          <v-list>
+            <v-list-tile
+              v-if="$listeners && $listeners.duplicate"
+              @click="$emit('duplicate')"
+            >
+              <v-list-tile-content>
+                <v-list-tile-title>
+                  Duplicate
+                </v-list-tile-title>
+              </v-list-tile-content>
+              <v-list-tile-action>
+                <v-icon>file_copy</v-icon>
+              </v-list-tile-action>
+            </v-list-tile>
+            <v-list-tile
+              v-if="$listeners && $listeners.move"
+              @click="$emit('move')"
+            >
+              <v-list-tile-content>
+                <v-list-tile-title>
+                  Move
+                </v-list-tile-title>
+              </v-list-tile-content>
+              <v-list-tile-action>
+                <v-icon>send</v-icon>
+              </v-list-tile-action>
+            </v-list-tile>
+            <v-list-tile
+              v-if="$listeners && $listeners.remove"
+              @click="$emit('remove')"
+            >
+              <v-list-tile-content>
+                <v-list-tile-title>
+                  Delete
+                </v-list-tile-title>
+              </v-list-tile-content>
+              <v-list-tile-action>
+                <v-icon>delete</v-icon>
+              </v-list-tile-action>
+            </v-list-tile>
+          </v-list>
+        </v-menu>
+      </v-layout>
+      <v-layout
+        v-else
+        key="blank"
+      />
+    </v-slide-y-transition>
+    <v-btn
+      icon
+      @click="$emit('toggle-editing')"
+    >
+      <v-slide-y-transition
+        hide-on-leave
+      >
+        <v-icon
+          v-if="editing"
+          key="doneIcon"
+        >
+          done
+        </v-icon>
+        <v-icon
+          v-else
+          key="createIcon"
+        >
+          create
+        </v-icon>
+      </v-slide-y-transition>
+    </v-btn>
+  </v-toolbar>
+</template>
+
+<script>
+import isDarkColor from '/imports/ui/utility/isDarkColor.js';
+import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
+import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+import ColorPicker from '/imports/ui/components/ColorPicker.vue';
+
+export default {
+  components: {
+    PropertyIcon,
+    ColorPicker,
+  },
+  props: {
+    model: {
+      type: Object,
+      default: undefined,
+    },
+    flat: Boolean,
+    editing: Boolean,
+  },
+  computed: {
+    isDark(){
+      return isDarkColor(this.color);
+    },
+    color(){
+      return this.model && this.model.color || this.$vuetify.theme.secondary;
+    }
+  },
+  methods: {
+    colorChanged(value){
+      this.$emit('color-changed', value);
+    },
+    getPropertyName,
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/tree/TreeNode.vue

@@ -46,16 +46,26 @@
         v-show="showExpanded"
         class="pl-3"
       >
-        <tree-node-list
-          :node="node"
-          :children="computedChildren"
-          :group="group"
-          :organize="organize"
-          :selected-node-id="selectedNodeId"
-          @reordered="e => $emit('reordered', e)"
-          @reorganized="e => $emit('reorganized', e)"
-          @selected="e => $emit('selected', e)"
-        />
+        <v-fade-transition hide-on-leave>
+          <tree-node-list
+            v-if="showExpanded"
+            :node="node"
+            :children="computedChildren"
+            :group="group"
+            :organize="organize"
+            :selected-node-id="selectedNodeId"
+            @reordered="e => $emit('reordered', e)"
+            @reorganized="e => $emit('reorganized', e)"
+            @selected="e => $emit('selected', e)"
+          />
+          <div v-else>
+            <div
+              v-for="i in children.length"
+              :key="i"
+              class="dummy-node"
+            />
+          </div>
+        </v-fade-transition>
       </div>
     </v-expand-transition>
   </v-sheet>
@@ -156,4 +166,7 @@
 	.theme--light .tree-node-title:hover {
 		background: rgba(0,0,0,.04);
 	}
+  .dummy-node {
+    height: 40px;
+  }
 </style>

app/imports/ui/components/tree/TreeNodeList.Story.vue

@@ -1,60 +0,0 @@
-<template lang="html">
-	<v-card-text>
-		<tree-node-list :children="children" group="example-group" :show-empty="false"/>
-	</v-card-text>
-</template>
-
-<script>
-	import TreeNodeList from '/imports/ui/components/tree/TreeNodeList.vue';
-
-	export default {
-		components: {
-			TreeNodeList,
-		},
-		data(){ return {
-			children: [
-				{name: 'Point buy', children:[
-					{name: 'Strength 14', children:[]},
-					{name: 'Dexterity 8', children:[]},
-					{name: 'Constitution 14', children:[]},
-					{name: 'Intelligence 8', children:[]},
-					{name: 'Wisdom 15', children:[]},
-					{name: 'Charisma 12', children:[]},
-				]},
-				{name: 'Hermit', children:[
-					{name: 'Discovery', children:[]},
-				]},
-				{name: 'Hill Dwarf', children: [
-					{name: 'Dwarven combat training', children:[]},
-					{name: 'Dwarven resilience', children:[]},
-					{name: 'Dwarven toughness', children:[]},
-					{name: 'Stone cutting', children:[]},
-				]},
-				{name: 'Cleric', children:[
-					{name: 'Level 1', children:[
-						{name: 'Spellcasting', children:[
-							{name: 'Light', children:[]},
-							{name: 'Sacred Flame', children:[]},
-							{name: 'Thaumaturgy', children:[]},
-						]},
-						{name: 'Divine domain: Tempest', children:[]},
-					]},
-					{name: 'Level 2', children:[]},
-					{name: 'Level 3', children:[]},
-					{name: 'Level 4', children:[]},
-					{name: 'Level 5', children:[]},
-				]},
-			],
-			otherChildren: [],
-			drag: false,
-		}},
-		computed: {
-			dataString(){
-				return JSON.stringify(this.children, null, 2);
-			}
-		},
-	};
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/creature/CreatureForm.vue

@@ -5,6 +5,7 @@
       :value="model.name"
       :error-messages="errors.name"
       :debounce-time="debounceTime"
+      :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
     />
     <text-field
@@ -12,6 +13,7 @@
       :value="model.alignment"
       :error-messages="errors.alignment"
       :debounce-time="debounceTime"
+      :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['alignment'], value, ack})"
     />
     <text-field
@@ -19,6 +21,7 @@
       :value="model.gender"
       :error-messages="errors.gender"
       :debounce-time="debounceTime"
+      :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['gender'], value, ack})"
     />
     <text-field
@@ -27,6 +30,7 @@
       :value="model.picture"
       :error-messages="errors.picture"
       :debounce-time="debounceTime"
+      :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['picture'], value, ack})"
     />
     <text-field
@@ -35,6 +39,7 @@
       :value="model.avatarPicture"
       :error-messages="errors.avatarPicture"
       :debounce-time="debounceTime"
+      :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['avatarPicture'], value, ack})"
     />
     <!--
@@ -44,18 +49,21 @@
 					label="Use variant encumbrance"
 					:input-value="model.settings.useVariantEncumbrance"
 					:error-messages="errors.useVariantEncumbrance"
+          :disabled="disabled"
 					@change="value => $emit('change', {path: ['settings','useVariantEncumbrance'], value})"
 				/>
 				<v-switch
 					label="Hide spells tab"
 					:input-value="model.settings.hideSpellcasting"
 					:error-messages="errors.hideSpellcasting"
+          :disabled="disabled"
 					@change="value => $emit('change', {path: ['settings','hideSpellcasting'], value})"
 				/>
 				<v-switch
 					label="Swap ability scores and modifiers"
 					:input-value="model.settings.swapStatAndModifier"
 					:error-messages="errors.swapStatAndModifier"
+          :disabled="disabled"
 					@change="value => $emit('change', {path: ['settings','swapStatAndModifier'], value})"
 				/>
 			</form-section>
@@ -88,6 +96,7 @@ export default {
 			type: Boolean,
 		},
 		debounceTime: Number,
+    disabled: Boolean,
 	},
 };
 </script>

app/imports/ui/creature/CreatureFormDialog.vue

@@ -6,6 +6,7 @@
     <div>
       <creature-form
         :model="model"
+        :disabled="editPermission === false"
         @change="change"
       />
     </div>
@@ -25,6 +26,7 @@ import Creatures from '/imports/api/creature/Creatures.js';
 import {updateCreature} from '/imports/api/creature/Creatures.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import CreatureForm from '/imports/ui/creature/CreatureForm.vue'
+import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
 
 export default {
 	components: {
@@ -39,6 +41,14 @@ export default {
 		model(){
 			return Creatures.findOne(this._id);
 		},
+    editPermission(){
+      try {
+        assertEditPermission(this.model, Meteor.userId());
+        return true;
+      } catch (e) {
+        return false;
+      }
+    },
 	},
 	methods: {
 		change({path, value, ack}){

app/imports/ui/creature/character/CharacterSheet.vue

@@ -2,12 +2,40 @@
   <div class="character-sheet fill-height">
     <v-fade-transition mode="out-in">
       <div
-        v-if="$subReady.singleCharacter"
+        v-if="!$subReady.singleCharacter"
+        key="character-loading"
+        class="fill-height layout justify-center align-center"
+      >
+        <v-progress-circular
+          indeterminate
+          color="primary"
+          size="64"
+        />
+      </div>
+      <div
+        v-else-if="!creature"
+      >
+        <v-layout
+          column
+          align-center
+          justify-center
+        >
+          <h2 style="margin: 48px 28px 16px">
+            Character not found
+          </h2>
+          <h3>
+            Either this character does not exist, or you don't have permission
+            to view it.
+          </h3>
+        </v-layout>
+      </div>
+      <div
+        v-else
         key="character-tabs"
         class="fill-height"
       >
         <v-tabs-items
-          v-model="tabs"
+          v-model="activeTab"
         >
           <v-tab-item>
             <stats-tab :creature-id="creatureId" />
@@ -29,17 +57,6 @@
           </v-tab-item>
         </v-tabs-items>
       </div>
-      <div
-        v-else
-        key="character-loading"
-        class="fill-height layout justify-center align-center"
-      >
-        <v-progress-circular
-          indeterminate
-          color="primary"
-          size="64"
-        />
-      </div>
     </v-fade-transition>
   </div>
 </template>
@@ -48,17 +65,13 @@
   //TODO add a "no character found" screen if shown on a false address
   // or on a character the user does not have permission to view
 	import Creatures from '/imports/api/creature/Creatures.js';
-	import removeCreature from '/imports/api/creature/removeCreature.js';
-	import isDarkColor from '/imports/ui/utility/isDarkColor.js';
-	import { mapMutations } from 'vuex';
-	import { theme } from '/imports/ui/theme.js';
 	import StatsTab from '/imports/ui/creature/character/characterSheetTabs/StatsTab.vue';
 	import FeaturesTab from '/imports/ui/creature/character/characterSheetTabs/FeaturesTab.vue';
 	import InventoryTab from '/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue';
 	import SpellsTab from '/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue';
 	import PersonaTab from '/imports/ui/creature/character/characterSheetTabs/PersonaTab.vue';
 	import TreeTab from '/imports/ui/creature/character/characterSheetTabs/TreeTab.vue';
-	import { recomputeCreature } from '/imports/api/creature/computation/recomputeCreature.js';
+  import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
 
 	export default {
 		components: {
@@ -80,8 +93,8 @@
       },
 		},
     reactiveProvide: {
-      name: 'computationContext',
-      include: ['creature'],
+      name: 'context',
+      include: ['creature', 'editPermission'],
     },
     onMounted(){
       this.$store.commit('setPageTitle', this.creature && this.creature.name || 'Character Sheet');
@@ -90,6 +103,16 @@
       'creature.name'(value){
         this.$store.commit('setPageTitle', value || 'Character Sheet');
       },
+    },
+    computed: {
+      activeTab: {
+        get(){
+          return this.tabs;
+        },
+        set(newTab){
+          this.$emit('update:tabs', newTab);
+        },
+      },
     },
 		meteor: {
 			$subscribe: {
@@ -98,8 +121,16 @@
 				},
 			},
 			creature(){
-				return Creatures.findOne(this.creatureId) || {};
+				return Creatures.findOne(this.creatureId);
 			},
+      editPermission(){
+        try {
+          assertEditPermission(this.creature, Meteor.userId());
+          return true;
+        } catch (e) {
+          return false;
+        }
+      },
 		},
 	}
 </script>

app/imports/ui/creature/character/CharacterSheetToolbarExtension.vue

@@ -1,6 +1,8 @@
 <template lang="html">
   <v-tabs
+    v-if="creature"
     slot="extension"
+    color="secondary"
     :value="value"
     centered
     grow
@@ -29,13 +31,20 @@
 </template>
 
 <script>
+import Creatures from '/imports/api/creature/Creatures.js';
+
 export default {
   props: {
     value: {
       type: Number,
       required: true,
     },
-  }
+  },
+  meteor: {
+    creature(){
+      return Creatures.findOne(this.$route.params.id);
+    },
+  },
 }
 </script>
 

app/imports/ui/creature/character/CharacterSheetToolbarItems.vue

@@ -1,6 +1,7 @@
 <template lang="html">
-  <v-toolbar-items>
+  <v-toolbar-items v-if="creature">
     <v-btn
+      v-if="editPermission"
       flat
       icon
       @click="recompute(creature._id)"
@@ -21,7 +22,7 @@
           <v-icon>more_vert</v-icon>
         </v-btn>
       </template>
-      <v-list>
+      <v-list v-if="editPermission">
         <v-list-tile @click="deleteCharacter">
           <v-list-tile-title>
             <v-icon>delete</v-icon> Delete
@@ -38,6 +39,13 @@
           </v-list-tile-title>
         </v-list-tile>
       </v-list>
+      <v-list v-else>
+        <v-list-tile @click="unshareWithMe">
+          <v-list-tile-title>
+            <v-icon>delete</v-icon> Unshare with me
+          </v-list-tile-title>
+        </v-list-tile>
+      </v-list>
     </v-menu>
   </v-toolbar-items>
 </template>
@@ -49,11 +57,18 @@ import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 import { mapMutations } from 'vuex';
 import { theme } from '/imports/ui/theme.js';
 import { recomputeCreature } from '/imports/api/creature/computation/recomputeCreature.js';
+import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
+import { updateUserSharePermissions } from '/imports/api/sharing/sharing.js';
 
 export default {
   data(){return {
     theme,
   }},
+  computed: {
+    creatureId(){
+      return this.$route.params.id;
+    },
+  },
   methods: {
     ...mapMutations([
       'toggleDrawer',
@@ -103,12 +118,23 @@ export default {
 				}
 			});
 		},
-		isDarkColor,
-  },
-  computed: {
-    creatureId(){
-      return this.$route.params.id;
+    unshareWithMe(){
+      updateUserSharePermissions.call({
+        docRef: {
+          collection: 'creatures',
+          id: this.creatureId,
+        },
+        userId: Meteor.userId(),
+        role: 'none',
+      }, (error) => {
+        if (error) {
+          console.error(error);
+        } else {
+          this.$router.push('/characterList');
+        }
+      });
     },
+		isDarkColor,
   },
   meteor: {
     $subscribe: {
@@ -117,7 +143,15 @@ export default {
       },
     },
     creature(){
-      return Creatures.findOne(this.creatureId) || {};
+      return Creatures.findOne(this.creatureId);
+    },
+    editPermission(){
+      try {
+        assertEditPermission(this.creature, Meteor.userId());
+        return true;
+      } catch (e) {
+        return false;
+      }
     },
   },
 }

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

@@ -5,6 +5,7 @@
         <toolbar-card color="">
           <v-spacer slot="toolbar" />
           <v-switch
+            v-if="context.editPermission !== false"
             slot="toolbar"
             v-model="organize"
             label="Organize"
@@ -53,6 +54,9 @@ export default {
 		ContainerCard,
     ToolbarCard,
 	},
+  inject: {
+    context: { default: {} }
+  },
 	props: {
 		creatureId: String,
 	},

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

@@ -5,6 +5,7 @@
         <v-card>
           <v-card-text>
             <v-switch
+              v-if="context.editPermission !== false"
               v-model="organize"
               label="Organize"
               class="justify-end"
@@ -48,6 +49,9 @@ export default {
 		CreaturePropertiesTree,
 		SpellListCard,
 	},
+  inject: {
+    context: { default: {} }
+  },
 	props: {
 		creatureId: {
       type: String,

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

@@ -1,105 +1,60 @@
 <template lang="html">
   <div
-    class="tree-tab pa-4"
+    class="tree-tab pa-4 layout column align-center"
     style="height: calc(100vh - 96px); display: flex;"
   >
     <v-card
-      class="layout row"
-      style="height: 100%;"
+      style="height: 100%; width: 100%; max-width: 1800px;"
       data-id="creature-tree-card"
     >
-      <div
-        class="layout column justify-start"
-        :style="
-          $vuetify.breakpoint.mdAndUp &&
-            'width: 320px; flex-shrink: 0; flex-grow: 0;'
-        "
-      >
-        <v-toolbar
-          flat
-          dense
-        >
-          <v-spacer />
-          <v-switch
-            v-model="organize"
-            label="Organize"
-            class="mx-3"
-            :disabled="organizeDisabled"
-            style="flex-grow: 0; height: 32px;"
-          />
-          <v-combobox
-            ref="searchBox"
-            slot="extension"
-            v-model="filterString"
-            :items="filterOptions"
-            prepend-inner-icon="search"
-            class="mx-4"
-            hide-no-data
-            hide-selected
-            multiple
-            clearable
-            small-chips
-            deletable-chips
-          />
-        </v-toolbar>
-        <creature-properties-tree
-          class="pt-2 flex"
-          style="overflow-y: auto;"
-          :root="{collection: 'creatures', id: creatureId}"
-          :organize="organize"
-          :selected-node-id="selected"
-          :filter="filter"
-          @selected="clickNode"
-        />
-      </div>
-      <template v-if="$vuetify.breakpoint.mdAndUp">
-        <v-divider vertical />
-        <div
-          class="flex layout column"
-          style="background-color: inherit; overflow: hidden;"
-          data-id="selected-node-card"
-        >
+      <tree-detail-layout>
+        <template slot="tree">
           <v-toolbar
-            dense
             flat
-            extended
+            dense
           >
-            <v-fade-transition mode="out-in">
-              <div
-                :key="selectedProperty && selectedProperty._id"
-                class="title"
-              >
-                <property-icon
-                  :key="selectedProperty && selectedProperty._id"
-                  :type="selectedProperty && selectedProperty.type"
-                  class="mr-2"
-                />
-                {{ getPropertyName(selectedProperty && selectedProperty.type) }}
-              </div>
-            </v-fade-transition>
             <v-spacer />
-            <v-btn
-              v-if="selectedProperty"
-              flat
-              icon
-              @click="editCreatureProperty"
-            >
-              <v-icon>create</v-icon>
-            </v-btn>
+            <v-switch
+              v-if="context.editPermission !== false"
+              v-model="organize"
+              label="Organize"
+              class="mx-3"
+              :disabled="organizeDisabled"
+              style="flex-grow: 0; height: 32px;"
+            />
+            <v-combobox
+              ref="searchBox"
+              slot="extension"
+              v-model="filterString"
+              :items="filterOptions"
+              prepend-inner-icon="search"
+              class="mx-4"
+              hide-no-data
+              hide-selected
+              multiple
+              clearable
+              small-chips
+              deletable-chips
+            />
           </v-toolbar>
-          <v-card-text
-            class="flex"
-            style="overflow-y: auto"
-          >
-            <v-fade-transition mode="out-in">
-              <property-viewer
-                :key="selectedProperty && selectedProperty._id"
-                :model="selectedProperty"
-              />
-            </v-fade-transition>
-          </v-card-text>
-        </div>
-      </template>
+          <creature-properties-tree
+            class="pt-2 flex"
+            style="overflow-y: auto;"
+            :root="{collection: 'creatures', id: creatureId}"
+            :organize="organize"
+            :selected-node-id="selected"
+            :filter="filter"
+            @selected="clickNode"
+          />
+        </template>
+        <template slot="detail">
+          <creature-property-dialog
+            embedded
+            :_id="selected"
+            @removed="selected = undefined"
+          />
+        </template>
+      </tree-detail-layout>
     </v-card>
     <v-speed-dial
       v-model="fab"
@@ -135,24 +90,28 @@
 </template>
 
 <script>
+  import TreeDetailLayout from '/imports/ui/components/TreeDetailLayout.vue';
   import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
+  import CreaturePropertyDialog from '/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue';
+  import LabeledFab from '/imports/ui/components/LabeledFab.vue';
+
   import CreatureProperties, {
     insertProperty,
     insertPropertyFromLibraryNode
   } from '/imports/api/creature/CreatureProperties.js';
-  import PropertyViewer from '/imports/ui/properties/shared/PropertyViewer.vue';
   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: {
+      TreeDetailLayout,
       CreaturePropertiesTree,
-      PropertyViewer,
-      PropertyIcon,
+      CreaturePropertyDialog,
       LabeledFab,
     },
+    inject: {
+      context: { default: {} }
+    },
     props: {
       creatureId: {
         type: String,

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

@@ -1,79 +1,40 @@
 <template lang="html">
   <dialog-base>
-    <template slot="toolbar">
-      <property-icon
-        :type="model.type"
-        class="mr-2"
+    <template #replace-toolbar="{flat}">
+      <property-toolbar
+        :model="model"
+        :editing="editing"
+        :flat="flat"
+        @duplicate="duplicate"
+        @remove="remove"
+        @toggle-editing="editing = !editing"
+        @color-changed="value => change({path: ['color'], value})"
       />
-      <v-toolbar-title>
-        {{ model.name || getPropertyName(model.type) }}
-      </v-toolbar-title>
-      <v-spacer />
-      <v-menu
-        v-if="editing"
-        bottom
-        left
-        transition="slide-y-transition"
-      >
-        <template #activator="{ on }">
-          <v-btn
-            icon
-            v-on="on"
-          >
-            <v-icon>more_vert</v-icon>
-          </v-btn>
-        </template>
-        <v-list>
-          <v-list-tile @click="remove">
-            <v-list-tile-title>
-              Delete <v-icon>delete</v-icon>
-            </v-list-tile-title>
-          </v-list-tile>
-        </v-list>
-      </v-menu>
-      <v-btn
-        icon
-        @click="editing = !editing"
-      >
-        <v-slide-y-transition
-          leave-absolute
-          mode="out-in"
-        >
-          <v-icon
-            v-if="editing"
-            key="doneIcon"
-          >
-            done
-          </v-icon>
-          <v-icon
-            v-else
-            key="createIcon"
-          >
-            create
-          </v-icon>
-        </v-slide-y-transition>
-      </v-btn>
     </template>
     <template v-if="model">
-      <component
-        :is="model.type + 'Form'"
-        v-if="editing"
-        class="creature-property-form"
-        :model="model"
-        @change="change"
-        @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-fade-transition
+        mode="out-in"
+      >
+        <component
+          :is="model.type + 'Form'"
+          v-if="editing"
+          class="creature-property-form"
+          :model="model"
+          @change="change"
+          @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>
+      </v-fade-transition>
+      <template v-if="!editing && !embedded">
         <v-divider />
         <creature-properties-tree
           v-if="!editing"
@@ -83,6 +44,7 @@
       </template>
     </template>
     <div
+      v-if="!embedded"
       slot="actions"
       class="layout row justify-end"
     >
@@ -100,17 +62,20 @@
 import CreatureProperties, {
 	updateProperty,
 	damageProperty,
+  duplicateProperty,
 	pushToProperty,
 	pullFromProperty,
 	softRemoveProperty,
 } from '/imports/api/creature/CreatureProperties.js';
 import Creatures from '/imports/api/creature/Creatures.js';
+import PropertyToolbar from '/imports/ui/components/propertyToolbar.vue';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
 import propertyViewerIndex from '/imports/ui/properties/viewers/shared/propertyViewerIndex.js';
 import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
+import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
 import { get, findLast } from 'lodash';
 
 let formIndex = {};
@@ -129,10 +94,12 @@ export default {
 		...viewerIndex,
 		PropertyIcon,
 		DialogBase,
+    PropertyToolbar,
 		CreaturePropertiesTree,
 	},
 	props: {
 		_id: String,
+    embedded: Boolean, // This dialog is embedded in a page
 		startInEditTab: Boolean,
 	},
 	data(){ return {
@@ -142,6 +109,14 @@ export default {
 		model(){
 			return CreatureProperties.findOne(this._id);
 		},
+    editPermission(){
+      try {
+        assertEditPermission(this.creature, Meteor.userId());
+        return true;
+      } catch (e) {
+        return false;
+      }
+    },
 	},
   computed: {
     creature(){
@@ -155,19 +130,37 @@ export default {
     }
   },
   reactiveProvide: {
-    name: 'computationContext',
-    include: ['creature'],
+    name: 'context',
+    include: ['creature', 'editPermission'],
   },
 	methods: {
 		getPropertyName,
+    duplicate(){
+      duplicateProperty.call({_id: this._id}, (error) => {
+        if (error) {
+          console.error(error);
+        }
+        if (this.embedded){
+          this.$emit('duplicated');
+        } else {
+          this.$store.dispatch('popDialogStack');
+        }
+      });
+    },
 		change({path, value, ack}){
-			updateProperty.call({_id: this._id, path, value}, (error, result) =>{
+			updateProperty.call({_id: this._id, path, value}, (error) =>{
+        if (error) console.warn(error);
+				ack && ack(error && error.reason || error);
+			});
+		},
+    damage({operation, value, ack}){
+			damageProperty.call({_id: this._id, operation, value}, (error) =>{
         if (error) console.warn(error);
 				ack && ack(error && error.reason || error);
 			});
 		},
 		push({path, value, ack}){
-			pushToProperty.call({_id: this._id, path, value}, (error, result) =>{
+			pushToProperty.call({_id: this._id, path, value}, (error) =>{
         if (error) console.warn(error);
 				ack && ack(error && error.reason || error);
 			});
@@ -175,7 +168,7 @@ export default {
 		pull({path, ack}){
 			let itemId = get(this.model, path)._id;
 			path.pop();
-			pullFromProperty.call({_id: this._id, path, itemId}, (error, result) =>{
+			pullFromProperty.call({_id: this._id, path, itemId}, (error) =>{
         if (error) console.warn(error);
 				ack && ack(error && error.reason || error);
 			});

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

@@ -6,6 +6,7 @@
     <library-and-node
       slot="unwrapped-content"
       style="height: 100%;"
+      selection
       @selected="val => node = val"
     />
     <template slot="actions">

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

@@ -43,12 +43,17 @@ export default {
 		propertyName: String,
 		type: String,
 	},
+  reactiveProvide: {
+    name: 'context',
+    include: ['debounceTime'],
+  },
 	data(){return {
 		model: {
 			type: this.type,
 		},
 		schema: undefined,
 		validationContext: undefined,
+    debounceTime: 0,
 	};},
 	watch: {
 		type(newType){

app/imports/ui/dialogStack/DialogBase.Story.vue

@@ -1,42 +0,0 @@
-<template>
-  <dialog-base>
-    <v-toolbar-title slot="toolbar">
-      Test Dialog
-    </v-toolbar-title>
-    <div>
-      <v-btn
-        data-id="btn"
-        @click="openDialog('btn')"
-      >
-        Open Dialog
-      </v-btn>
-      <v-btn
-        fab
-        data-id="fab"
-        color="green"
-        @click="openDialog('fab')"
-      >
-        Open Dialog
-      </v-btn>
-    </div>
-  </dialog-base>
-</template>
-
-<script>
-  import store from '/imports/ui/vuexStore.js';
-  import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
-  const component = {
-    methods: {
-      openDialog(elementId){
-        store.commit('pushDialogStack', {
-          component,
-					elementId,
-        });
-      }
-    },
-    components: {
-      DialogBase,
-    },
-  };
-  export default component;
-</script>

app/imports/ui/dialogStack/DialogBase.vue

@@ -1,64 +1,72 @@
 <template>
-	<v-layout column style="height: 100%;">
-    <v-toolbar :color="color || 'secondary'" dark class="base-dialog-toolbar" :flat="!offsetTop">
-			<v-btn icon flat @click="back">
-				<v-icon>arrow_back</v-icon>
-			</v-btn>
-      <slot name="toolbar"/>
-			<template v-if="$slots.edit">
-				<v-spacer/>
-				<v-btn icon flat @click="$emit('remove')" v-if="isEditing">
-					<v-icon>delete</v-icon>
-				</v-btn>
-				<v-btn icon flat @click="isEditing = !isEditing">
-					<v-icon>{{isEditing ? 'check' : 'create'}}</v-icon>
-				</v-btn>
-			</template>
-    </v-toolbar>
-		<template v-if="breadcrumbs">
-			<v-card-text>
-				example > bread > crumb
-			</v-card-text>
-		</template>
-		<div
-			v-if="$slots['unwrapped-content']"
-			class="unwrapped-content"
-		>
-			<slot name="unwrapped-content"/>
-		</div>
-		<v-card-text
-			v-if="!$slots['unwrapped-content']"
-			id="base-dialog-body"
-			v-scroll:#base-dialog-body="onScroll"
-		>
-			<v-tabs-items :value="isEditing ? 1 : 0" touchless>
-				<v-tab-item>
-					<slot/>
-				</v-tab-item>
-				<v-tab-item lazy>
-					<slot name="edit"/>
-				</v-tab-item>
-			</v-tabs-items>
-		</v-card-text>
-		<v-card-actions>
-			<slot name="actions"/>
-		</v-card-actions>
-	</v-layout>
+  <v-layout
+    column
+    style="height: 100%;"
+  >
+    <slot
+      name="replace-toolbar"
+      :flat="!offsetTop"
+    >
+      <v-toolbar
+        :color="computedColor"
+        :dark="isDark"
+        class="base-dialog-toolbar"
+        :flat="!offsetTop"
+      >
+        <v-btn
+          icon
+          flat
+          @click="back"
+        >
+          <v-icon>arrow_back</v-icon>
+        </v-btn>
+        <slot name="toolbar" />
+      </v-toolbar>
+    </slot>
+    <div
+      v-if="$slots['unwrapped-content']"
+      class="unwrapped-content"
+    >
+      <slot name="unwrapped-content" />
+    </div>
+    <v-card-text
+      v-if="!$slots['unwrapped-content']"
+      id="base-dialog-body"
+      v-scroll:#base-dialog-body="onScroll"
+    >
+      <slot />
+    </v-card-text>
+    <v-card-actions v-if="$slots.actions">
+      <slot name="actions" />
+    </v-card-actions>
+  </v-layout>
 </template>
 
 <script>
-	import store from "/imports/ui/vuexStore.js";
+  import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 
 	export default {
 		props: {
-			color: String,
-			breadcrumbs: Object,
-			overrideBackButton: Function,
+			color: {
+        type: String,
+        default: undefined,
+      },
+			overrideBackButton: {
+        type: Function,
+        default: undefined,
+      },
 		},
 		data(){ return {
 			offsetTop: 0,
-			isEditing: false,
 		}},
+    computed: {
+      isDark(){
+        return isDarkColor(this.computedColor);
+      },
+      computedColor(){
+        return this.color || this.$vuetify.theme.secondary;
+      }
+    },
 		methods: {
 			onScroll(e){
 				this.offsetTop = e.target.scrollTop
@@ -71,7 +79,7 @@
 				}
 			},
 			close(){
-        store.dispatch("popDialogStack");
+        this.$store.dispatch('popDialogStack');
       },
 		},
 	}

app/imports/ui/dialogStack/DialogComponentIndex.js

@@ -7,10 +7,13 @@ import InviteDialog from '/imports/ui/user/InviteDialog.vue';
 import LibraryCreationDialog from '/imports/ui/library/LibraryCreationDialog.vue';
 import LibraryEditDialog from '/imports/ui/library/LibraryEditDialog.vue';
 import LibraryNodeCreationDialog from '/imports/ui/library/LibraryNodeCreationDialog.vue';
-import LibraryNodeEditDialog from '/imports/ui/library/LibraryNodeEditDialog.vue';
+import LibraryNodeDialog from '/imports/ui/library/LibraryNodeDialog.vue';
+import MoveLibraryNodeDialog from '/imports/ui/library/MoveLibraryNodeDialog.vue'
 import ShareDialog from '/imports/ui/sharing/ShareDialog.vue';
+import TierTooLowDialog from '/imports/ui/user/TierTooLowDialog.vue';
 import UsernameDialog from '/imports/ui/user/UsernameDialog.vue';
 
+
 export default {
   CreatureFormDialog,
   CreaturePropertyCreationDialog,
@@ -21,7 +24,9 @@ export default {
   LibraryCreationDialog,
   LibraryEditDialog,
   LibraryNodeCreationDialog,
-  LibraryNodeEditDialog,
+  LibraryNodeDialog,
+  MoveLibraryNodeDialog,
 	ShareDialog,
+  TierTooLowDialog,
   UsernameDialog,
 };

app/imports/ui/dialogStack/DialogStack.Story.vue

@@ -1,26 +0,0 @@
-<template lang="html">
-	<v-card-text>
-		<v-layout align-center justify-center>
-			<v-btn @click="openDialog('btn')" data-id="btn">
-				Open Dialog
-			</v-btn>
-		</v-layout>
-	</v-card-text>
-</template>
-
-<script>
-	import DialogBaseStory from '/imports/ui/dialogStack/DialogBase.Story.vue';
-	export default {
-		methods: {
-			openDialog(elementId){
-				this.$store.commit("pushDialogStack", {
-					// DO NOT store your component in the store like this outside the storybook
-					// You should register the dialog component in DialogComponentIndex.js
-					// and commit it to the store as a string: "dialog-base-story"
-					component: DialogBaseStory,
-					elementId,
-				});
-			}
-		},
-	}
-</script>

app/imports/ui/layouts/AppLayout.vue

@@ -54,20 +54,10 @@
       </v-fade-transition>
     </v-toolbar>
     <v-content>
-      <v-alert
-        v-if="$route.path !== '/countdown'"
-        icon="priority_high"
-        type="error"
-        dismissible
-        :value="true"
-      >
-        This version of DiceCloud is in beta. Some data stored here may be destroyed by
-        future updates.
-      </v-alert>
       <v-fade-transition
         mode="out-in"
       >
-        <router-view :tabs="tabs" />
+        <router-view :tabs.sync="tabs" />
       </v-fade-transition>
     </v-content>
 

app/imports/ui/layouts/Sidebar.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="sidebar">
+    <v-alert
+      v-if="$route.path !== '/countdown'"
+      icon="priority_high"
+      type="error"
+      dismissible
+      :value="true"
+    >
+      This version of DiceCloud is in beta. Some data stored here may be destroyed by
+      future updates.
+    </v-alert>
     <v-layout
       v-if="!signedIn"
       row

app/imports/ui/library/LibraryAndNode.vue

@@ -1,20 +1,20 @@
 <template lang="html">
-  <div
-    class="layout row"
-    style="background-color: inherit;"
-  >
+  <tree-detail-layout>
     <div
+      slot="tree"
       class="layout column"
       style="
-				background-color: inherit;
-				width: initial;
-				max-width: 100%;
-				min-width: 320px;
-			"
+        background-color: inherit;
+        width: initial;
+        max-width: 100%;
+        min-width: 320px;
+        height: 100%;
+      "
     >
       <v-toolbar
-        dense
         flat
+        :color="selectedNode && selectedNode.color || 'secondary'"
+        :dark="isDarkColor(selectedNode && selectedNode.color || $vuetify.theme.secondary)"
       >
         <v-spacer />
         <v-switch
@@ -28,91 +28,97 @@
         edit-mode
         :organize-mode="organize"
         :selected-node-id="selected"
-        @selected="e => selected = e"
+        style="overflow-y: auto;"
+        @selected="clickNode"
       />
     </div>
-    <v-divider vertical />
     <div
-      style="width: 100%; background-color: inherit;"
+      slot="detail"
       data-id="selected-node-card"
     >
-      <v-toolbar
-        dense
-        flat
-      >
-        <property-icon
-          :type="selectedNode && selectedNode.type"
-          class="mr-2"
-        />
-        <div class="title">
-          {{ getPropertyName(selectedNode && selectedNode.type) }}
-        </div>
-        <v-spacer />
-        <v-btn
-          v-if="selectedNode"
-          flat
-          icon
-          @click="editLibraryNode"
-        >
-          <v-icon>create</v-icon>
-        </v-btn>
-      </v-toolbar>
-      <v-card-text style="overflow-y: auto;">
-        <property-viewer :model="selectedNode" />
-      </v-card-text>
+      <library-node-dialog
+        :_id="selected"
+        embedded
+        @removed="selected = undefined"
+      />
     </div>
-  </div>
+  </tree-detail-layout>
 </template>
 
 <script>
+import TreeDetailLayout from '/imports/ui/components/TreeDetailLayout.vue';
 import LibraryBrowser from '/imports/ui/library/LibraryBrowser.vue';
-import PropertyViewer from '/imports/ui/properties/shared/PropertyViewer.vue';
+import LibraryNodeDialog from '/imports/ui/library/LibraryNodeDialog.vue';
 import LibraryNodes from '/imports/api/library/LibraryNodes.js';
 import Libraries from '/imports/api/library/Libraries.js';
-import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 
 export default {
-	components: {
-		LibraryBrowser,
-		PropertyViewer,
-		PropertyIcon,
-	},
-	data(){ return {
-		organize: false,
-		selected: undefined,
-	};},
-	watch:{
-		selectedNode(val){
-			this.$emit('selected', val)
-		},
-	},
-	methods: {
-		editLibraryNode(){
-			this.$store.commit('pushDialogStack', {
-				component: 'library-node-edit-dialog',
-				elementId: 'selected-node-card',
-				data: {_id: this.selected},
-			});
-		},
-		getPropertyName,
-	},
-	meteor: {
-		$subscribe: {
-			'libraries': [],
-		},
-		libraries(){
-			return Libraries.find({}, {
-				sort: {name: 1}
-			}).fetch();
-		},
-		selectedNode(){
-			return LibraryNodes.findOne({
-				_id: this.selected,
-				removed: {$ne: true}
-			});
-		}
-	}
+  components: {
+    TreeDetailLayout,
+    LibraryBrowser,
+    LibraryNodeDialog,
+  },
+  props: {
+    selection: Boolean,
+  },
+  data(){ return {
+    organize: false,
+    selected: undefined,
+  };},
+  watch:{
+    selectedNode(val){
+      this.$emit('selected', val)
+    },
+  },
+  methods: {
+    editLibraryNode(){
+      this.$store.commit('pushDialogStack', {
+        component: 'library-node-edit-dialog',
+        elementId: 'selected-node-card',
+        data: {_id: this.selected},
+      });
+    },
+    clickNode(id){
+      if (this.$vuetify.breakpoint.mdAndUp){
+        this.selected = id;
+      } else {
+        this.$store.commit('pushDialogStack', {
+          component: 'library-node-dialog',
+          elementId: `tree-node-${id}`,
+          data: {
+            _id: id,
+            selection: this.selection,
+          },
+          callback: result => {
+            console.log(result)
+            if (result){
+              this.selected = id;
+            }
+          },
+        });
+      }
+    },
+    getPropertyName,
+    isDarkColor,
+  },
+  meteor: {
+    $subscribe: {
+      'libraries': [],
+    },
+    libraries(){
+      return Libraries.find({}, {
+        sort: {name: 1}
+      }).fetch();
+    },
+    selectedNode(){
+      return LibraryNodes.findOne({
+        _id: this.selected,
+        removed: {$ne: true}
+      });
+    },
+  }
 };
 </script>
 

app/imports/ui/library/LibraryBrowser.vue

@@ -1,64 +1,72 @@
 <template lang="html">
-	<div
-		style="
-			background-color: inherit;
-			overflow-y: auto;
-		"
-	>
-		<v-expansion-panel
-			style="box-shadow: none;"
-			v-model="expandedLibrary"
-		>
-			<v-expansion-panel-content
-				lazy
-				v-for="library in libraries"
-				:key="library._id"
-				:data-id="library._id"
-			>
-				<template v-slot:header>
-					<div class="title">{{library.name}}</div>
-				</template>
-				<v-card flat>
-					<library-contents-container
-						:library-id="library._id"
-						:organize-mode="organizeMode"
-						:edit-mode="editMode"
-						@selected="e => $emit('selected', e)"
-						:selected-node-id="selectedNodeId"
-					/>
-					<v-card-actions>
-						<v-btn
-							flat small
-							style="background-color: inherit; margin-top: 0;"
-							@click="insertLibraryNode(library._id)"
-							:data-id="`insert-node-${library._id}`"
-						>
-							<v-icon>add</v-icon>
-							New property
-						</v-btn>
-						<v-spacer/>
-						<v-btn flat small icon
-							@click="editLibrary(library._id)"
-						>
-							<v-icon>create</v-icon>
-						</v-btn>
-					</v-card-actions>
-				</v-card>
-			</v-expansion-panel-content>
-		</v-expansion-panel>
-		<v-btn
-			v-show="expandedLibrary === null"
-			v-if="editMode"
-			flat
-			color="primary"
-			style="background-color: inherit;"
-			@click="insertLibrary"
-			data-id="insert-library-button"
-		>
-			<v-icon>add</v-icon>
-			New library
-		</v-btn>
-	</div>
+  <div
+    style="
+      background-color: inherit;
+      overflow-y: auto;
+    "
+  >
+    <v-expansion-panel
+      v-model="expandedLibrary"
+      style="box-shadow: none;"
+    >
+      <v-expansion-panel-content
+        v-for="library in libraries"
+        :key="library._id"
+        lazy
+        :data-id="library._id"
+      >
+        <template #header>
+          <div class="title">
+            {{ library.name }}
+          </div>
+        </template>
+        <v-card flat>
+          <library-contents-container
+            :library-id="library._id"
+            :organize-mode="organizeMode"
+            :edit-mode="editMode"
+            :selected-node-id="selectedNodeId"
+            @selected="e => $emit('selected', e)"
+          />
+          <v-card-actions>
+            <v-btn
+              flat
+              small
+              style="background-color: inherit; margin-top: 0;"
+              :disabled="!editPermission(library)"
+              :data-id="`insert-node-${library._id}`"
+              @click="insertLibraryNode(library._id)"
+            >
+              <v-icon>add</v-icon>
+              New property
+            </v-btn>
+            <v-spacer />
+            <v-btn
+              flat
+              small
+              icon
+              :disabled="!editPermission(library)"
+              @click="editLibrary(library._id)"
+            >
+              <v-icon>create</v-icon>
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+    <v-btn
+      v-show="expandedLibrary === null"
+      v-if="editMode"
+      flat
+      color="primary"
+      style="background-color: inherit;"
+      data-id="insert-library-button"
+      @click="insertLibrary"
+    >
+      <v-icon>add</v-icon>
+      New library
+    </v-btn>
+  </div>
 </template>
 
 <script>
@@ -66,63 +74,99 @@ import LibraryContentsContainer from '/imports/ui/library/LibraryContentsContain
 import { setDocToLastOrder } from '/imports/api/parenting/order.js';
 import LibraryNodes, { insertNode } from '/imports/api/library/LibraryNodes.js';
 import Libraries, { insertLibrary } from '/imports/api/library/Libraries.js';
+import { getUserTier } from '/imports/api/users/patreon/tiers.js';
+import { assertEditPermission } from '/imports/api/sharing/sharingPermissions.js';
+import { getAncestry } from  '/imports/api/parenting/parenting.js';
 
 export default {
-	components: {
-		LibraryContentsContainer,
-	},
-	props: {
-		organizeMode: Boolean,
-		editMode: Boolean,
-		selectedNodeId: String,
-	},
-	data(){ return {
-		expandedLibrary: null,
-	};},
-	meteor: {
-		$subscribe: {
-			'libraries': [],
-		},
-		libraries(){
-			return Libraries.find({}, {
-				sort: {name: 1}
-			}).fetch();
-		},
-	},
-	methods: {
-		insertLibrary(){
-			this.$store.commit('pushDialogStack', {
-				component: 'library-creation-dialog',
-				elementId: 'insert-library-button',
-				callback(library){
-					if (!library) return;
-					let libraryId = insertLibrary.call(library);
-					return libraryId;
-				}
-			});
-		},
-		editLibrary(_id){
-			this.$store.commit('pushDialogStack', {
-				component: 'library-edit-dialog',
-				elementId: _id,
-				data: {_id},
-			});
-		},
-		insertLibraryNode(libraryId){
-			this.$store.commit('pushDialogStack', {
-				component: 'library-node-creation-dialog',
-				elementId: `insert-node-${libraryId}`,
-				callback(libraryNode){
-					if (!libraryNode) return;
-					libraryNode.parent = {collection: "libraries", id: libraryId};
-					libraryNode.ancestors = [ {collection: "libraries", id: libraryId}];
-					setDocToLastOrder({collection: LibraryNodes, doc: libraryNode});
-					let libraryNodeId = insertNode.call(libraryNode);
-					return `tree-node-${libraryNodeId}`;
-				}
-			});
-		},
-	},
+  components: {
+    LibraryContentsContainer,
+  },
+  props: {
+    organizeMode: Boolean,
+    editMode: Boolean,
+    selectedNodeId: String,
+  },
+  data(){ return {
+    expandedLibrary: null,
+  };},
+  meteor: {
+    $subscribe: {
+      'libraries': [],
+    },
+    libraries(){
+      return Libraries.find({}, {
+        sort: {name: 1}
+      }).fetch();
+    },
+    paidBenefits(){
+      let tier = getUserTier(Meteor.userId());
+      return tier && tier.paidBenefits;
+    },
+  },
+  methods: {
+    insertLibrary(){
+      if (this.paidBenefits){
+        this.$store.commit('pushDialogStack', {
+          component: 'library-creation-dialog',
+          elementId: 'insert-library-button',
+          callback(library){
+            if (!library) return;
+            let libraryId = insertLibrary.call(library);
+            return libraryId;
+          }
+        });
+      } else {
+        this.$store.commit('pushDialogStack', {
+          component: 'tier-too-low-dialog',
+          elementId: 'insert-library-button',
+        });
+      }
+    },
+    editPermission(library){
+      try {
+        assertEditPermission(library, Meteor.userId());
+        return true;
+      } catch (e) {
+        return false;
+      }
+    },
+    editLibrary(_id){
+      this.$store.commit('pushDialogStack', {
+        component: 'library-edit-dialog',
+        elementId: _id,
+        data: {_id},
+      });
+    },
+    insertLibraryNode(libraryId){
+      if (this.paidBenefits){
+        let parentRef;
+        if (this.organizeMode && this.selectedNodeId){
+          parentRef = {collection: 'libraryNodes', id: this.selectedNodeId}
+        } else {
+          parentRef = {collection: 'libraries', id: libraryId};
+        }
+        let {ancestors} = getAncestry({parentRef});
+        this.$store.commit('pushDialogStack', {
+          component: 'library-node-creation-dialog',
+          elementId: `insert-node-${libraryId}`,
+          callback(libraryNode){
+            if (!libraryNode) return;
+            libraryNode.parent = parentRef;
+            libraryNode.ancestors = ancestors;
+            setDocToLastOrder({collection: LibraryNodes, doc: libraryNode});
+            let libraryNodeId = insertNode.call(libraryNode);
+            return `tree-node-${libraryNodeId}`;
+          }
+        });
+      } else {
+        this.$store.commit('pushDialogStack', {
+          component: 'tier-too-low-dialog',
+          elementId: `insert-node-${libraryId}`,
+        });
+      }
+    },
+  },
 }
 </script>
 

app/imports/ui/library/LibraryNodeDialog.vue

@@ -0,0 +1,209 @@
+<template lang="html">
+  <dialog-base>
+    <template #replace-toolbar="{flat}">
+      <property-toolbar
+        :model="model"
+        :editing="editing"
+        :flat="flat"
+        @duplicate="duplicate"
+        @move="move"
+        @remove="remove"
+        @toggle-editing="editing = !editing"
+        @color-changed="value => change({path: ['color'], value})"
+      />
+    </template>
+    <template v-if="model">
+      <v-fade-transition
+        mode="out-in"
+      >
+        <component
+          :is="model.type + 'Form'"
+          v-if="editing"
+          class="library-node-form"
+          :model="model"
+          @change="change"
+          @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>
+      </v-fade-transition>
+    </template>
+    <div
+      v-if="!embedded"
+      slot="actions"
+      class="layout row justify-end"
+    >
+      <template v-if="selection">
+        <v-btn
+          flat
+          @click="$store.dispatch('popDialogStack', false)"
+        >
+          Cancel
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          flat
+          @click="$store.dispatch('popDialogStack', true)"
+        >
+          Select
+        </v-btn>
+      </template>
+      <v-btn
+        v-else
+        flat
+        @click="$store.dispatch('popDialogStack')"
+      >
+        Done
+      </v-btn>
+    </div>
+  </dialog-base>
+</template>
+
+<script>
+  import LibraryNodes, {
+    duplicateNode,
+    updateLibraryNode,
+    pushToLibraryNode,
+    pullFromLibraryNode,
+    softRemoveLibraryNode,
+  } from '/imports/api/library/LibraryNodes.js';
+  import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+  import PropertyToolbar from '/imports/ui/components/propertyToolbar.vue';
+  import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+  import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
+  import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
+  import propertyViewerIndex from '/imports/ui/properties/viewers/shared/propertyViewerIndex.js';
+  import { get } from 'lodash';
+  import { assertDocEditPermission } from '/imports/api/sharing/sharingPermissions.js';
+  import { organizeDoc } from '/imports/api/parenting/organizeMethods.js';
+
+  let formIndex = {};
+  for (let key in propertyFormIndex){
+    formIndex[key + 'Form'] = propertyFormIndex[key];
+  }
+
+  let viewerIndex = {};
+  for (let key in propertyViewerIndex){
+    formIndex[key + 'Viewer'] = propertyViewerIndex[key];
+  }
+
+  export default {
+    components: {
+      PropertyToolbar,
+      PropertyIcon,
+      DialogBase,
+      ...formIndex,
+      ...viewerIndex,
+    },
+    props: {
+      _id: String,
+      startInEditTab: Boolean,
+      embedded: Boolean, // This dialog is embedded in a page
+      selection: Boolean, // This dialog is being used to select a node
+    },
+    reactiveProvide: {
+      name: 'context',
+      include: ['editPermission'],
+    },
+    data(){return {
+      editing: !!this.startInEditTab,
+    }},
+    meteor: {
+      model(){
+        return LibraryNodes.findOne(this._id);
+      },
+      editPermission(){
+        try {
+          assertDocEditPermission(this.model, Meteor.userId());
+          return true;
+        } catch (e) {
+          return false;
+        }
+      },
+    },
+    methods: {
+      getPropertyName,
+      duplicate(){
+        duplicateNode.call({_id: this._id}, (error) => {
+          console.error(error);
+          if (this.embedded){
+            this.$emit('duplicated');
+          } else {
+            this.$store.dispatch('popDialogStack');
+          }
+        });
+      },
+      move(){
+        let that = this;
+        this.$store.commit('pushDialogStack', {
+          component: 'move-library-node-dialog',
+          elementId: 'property-toolbar-menu-button',
+          callback(parentId){
+            if (!parentId) return;
+            organizeDoc.call({
+              docRef: {
+                collection: 'libraryNodes',
+                id: that._id,
+              },
+              parentRef: {
+                collection: 'libraryNodes',
+                id: parentId
+              },
+              order: -0.5
+            }, (error) => {
+              if (error) console.error(error);
+            });
+          }
+        });
+      },
+      change({path, value, ack}){
+        updateLibraryNode.call({_id: this._id, path, value}, (error) =>{
+          if (ack){
+            ack(error && error.reason || error);
+          } else if (error){
+            console.error(error);
+          }
+        });
+      },
+      push({path, value, ack}){
+        pushToLibraryNode.call({_id: this._id, path, value}, (error) =>{
+          if (ack){
+            ack(error && error.reason || error);
+          } else if (error){
+            console.error(error);
+          }
+        });
+      },
+      pull({path, ack}){
+        let itemId = get(this.model, path)._id;
+        path.pop();
+        pullFromLibraryNode.call({_id: this._id, path, itemId}, (error) =>{
+          if (ack){
+            ack(error && error.reason || error);
+          } else if (error){
+            console.error(error);
+          }
+        });
+      },
+      remove(){
+        softRemoveLibraryNode.call({_id: this._id});
+        if (this.embedded){
+          this.$emit('removed');
+        } else {
+          this.$store.dispatch('popDialogStack');
+        }
+      },
+    }
+  };
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/library/LibraryNodeEditDialog.vue

@@ -1,98 +0,0 @@
-<template lang="html">
-  <dialog-base>
-    <template slot="toolbar">
-      <property-icon
-        :type="model.type"
-        class="mr-2"
-      />
-      <v-toolbar-title>
-        {{ getPropertyName(model.type) }}
-      </v-toolbar-title>
-      <v-spacer />
-      <v-btn
-        icon
-        flat
-        @click="remove"
-      >
-        <v-icon>delete</v-icon>
-      </v-btn>
-    </template>
-    <component
-      :is="model.type"
-      v-if="model"
-      class="library-node-form"
-      :model="model"
-      @change="change"
-      @push="push"
-      @pull="pull"
-    />
-    <div
-      slot="actions"
-      class="layout row justify-end"
-    >
-      <v-btn
-        flat
-        @click="$store.dispatch('popDialogStack')"
-      >
-        Done
-      </v-btn>
-    </div>
-  </dialog-base>
-</template>
-
-<script>
-	import LibraryNodes, {
-		updateLibraryNode,
-		pushToLibraryNode,
-		pullFromLibraryNode,
-		softRemoveLibraryNode,
-	} from '/imports/api/library/LibraryNodes.js';
-	import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
-	import { getPropertyName } from '/imports/constants/PROPERTIES.js';
-	import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
-	import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
-	import { get } from 'lodash';
-
-	export default {
-	  components: {
-			...propertyFormIndex,
-			PropertyIcon,
-	    DialogBase,
-	  },
-		props: {
-			_id: String,
-		},
-		meteor: {
-			model(){
-				return LibraryNodes.findOne(this._id);
-			},
-		},
-		methods: {
-			getPropertyName,
-			change({path, value, ack}){
-	      updateLibraryNode.call({_id: this._id, path, value}, (error, result) =>{
-					ack && ack(error && error.reason || error);
-				});
-			},
-	    push({path, value, ack}){
-				pushToLibraryNode.call({_id: this._id, path, value}, (error, result) =>{
-					ack && ack(error && error.reason || error);
-				});
-	    },
-	    pull({path, ack}){
-				let itemId = get(this.model, path)._id;
-				path.pop();
-				pullFromLibraryNode.call({_id: this._id, path, itemId}, (error, result) =>{
-					ack && ack(error && error.reason || error);
-				});
-	    },
-			remove(){
-				softRemoveLibraryNode.call({_id: this._id});
-				this.$store.dispatch('popDialogStack');
-			},
-		}
-	};
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/library/LibraryNodeInsertForm.vue

@@ -44,12 +44,17 @@ export default {
 		propertyName: String,
 		type: String,
 	},
+  reactiveProvide: {
+    name: 'context',
+    include: ['debounceTime'],
+  },
 	data(){return {
 		model: {
 			type: this.type,
 		},
 		schema: undefined,
 		validationContext: undefined,
+    debounceTime: 0,
 	};},
 	watch: {
 		type(newType){

app/imports/ui/library/MoveLibraryNodeDialog.vue

@@ -0,0 +1,37 @@
+<template lang="html">
+  <dialog-base>
+    <v-toolbar-title slot="toolbar">
+      Select new location
+    </v-toolbar-title>
+    <library-and-node
+      slot="unwrapped-content"
+      style="height: 100%;"
+      selection
+      @selected="val => node = val"
+    />
+    <template slot="actions">
+      <v-spacer />
+      <v-btn
+        flat
+        color="primary"
+        @click="$store.dispatch('popDialogStack', node._id)"
+      >
+        Move
+      </v-btn>
+    </template>
+  </dialog-base>
+</template>
+
+<script>
+	import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+	import LibraryAndNode from '/imports/ui/library/LibraryAndNode.vue';
+	export default {
+		components: {
+			DialogBase,
+			LibraryAndNode,
+		},
+		data(){return {
+			node: undefined,
+		};},
+	};
+</script>

app/imports/ui/pages/CharacterList.vue

@@ -53,6 +53,18 @@
         </v-expansion-panel-content>
       </v-expansion-panel>
     </v-card>
+    <v-btn
+      color="accent"
+      fab
+      fixed
+      bottom
+      right
+      data-id="new-character-button"
+      @click="insertCharacter"
+    >
+      <v-icon>add</v-icon>
+    </v-btn>
+    <!--
     <v-speed-dial
       v-model="fab"
       fixed
@@ -72,6 +84,7 @@
       <labeled-fab
         icon="face"
         label="New Character"
+        data-id="new-character-button"
         @click="insertCharacter"
       />
       <labeled-fab
@@ -79,6 +92,7 @@
         label="New Party"
       />
     </v-speed-dial>
+    -->
   </div>
 </template>
 
@@ -86,6 +100,7 @@
   import Creatures, {insertCreature} from '/imports/api/creature/Creatures.js';
   import Parties from '/imports/api/campaign/Parties.js';
   import LabeledFab from '/imports/ui/components/LabeledFab.vue';
+  import { getUserTier } from '/imports/api/users/patreon/tiers.js';
 
   const characterTransform = function(char){
     char.url = `/character/${char._id}/${char.urlName || '-'}`;
@@ -136,26 +151,21 @@
     },
     methods: {
       insertCharacter(){
-        insertCreature.call((error, result) => {
-          if (error){
-            console.error(error);
-          } else {
-            this.$router.push({ path: `/character/${result}`})
-          }
-        });
-
-        /*
-        store.commit("pushDialogStack", {
-           component: CharacterCreationDialog,
-           data: {},
-           element: undefined,
-           returnElement: undefined,
-           callback(result){
-             if (!result) return;
-             insertCreature.call(result);
-           },
-        });
-        */
+        let tier = getUserTier(Meteor.userId());
+        if (tier.paidBenefits){
+          insertCreature.call((error, result) => {
+            if (error){
+              console.error(error);
+            } else {
+              this.$router.push({ path: `/character/${result}`})
+            }
+          });
+        } else {
+          this.$store.commit('pushDialogStack', {
+            component: 'tier-too-low-dialog',
+            elementId: 'new-character-button',
+          });
+        }
       },
     }
   };

app/imports/ui/pages/CharacterSheetPage.vue

@@ -2,7 +2,7 @@
   <character-sheet
     show-menu-button
     :creature-id="$route.params.id"
-    :tabs="tabs"
+    :tabs.sync="activeTab"
   />
 </template>
 
@@ -18,5 +18,15 @@ export default {
       required: true,
     },
   },
+  computed: {
+    activeTab: {
+      get(){
+        return this.tabs;
+      },
+      set(newTab){
+        this.$emit('update:tabs', newTab);
+      },
+    },
+  },
 }
 </script>

app/imports/ui/pages/Library.vue

@@ -1,6 +1,11 @@
 <template lang="html">
-  <div>
-    <v-card class="ma-4">
+  <div
+    class="pa-4 layout column align-center"
+    style="height: calc(100vh - 96px); display: flex;"
+  >
+    <v-card
+      style="height: 100%; width: 100%; max-width: 1800px;"
+    >
       <library-and-node />
     </v-card>
   </div>

app/imports/ui/pages/PatreonLevelTooLow.vue

@@ -12,6 +12,12 @@
         You need to be at least Adventurer tier (or be invited by a Patron of
         a higher tier) to access this beta
       </h3>
+      <v-btn
+        href="https://www.patreon.com/join/dicecloud/checkout?rid=3002853"
+        color="accent"
+      >
+        Join now
+      </v-btn>
     </v-layout>
   </div>
 </template>

app/imports/ui/properties/components/attributes/AbilityListTile.Story.vue

@@ -1,116 +0,0 @@
-<template lang="html">
-	<v-list>
-		<template v-for="(ability, index) in abilities">
-			<v-divider v-if="index !== 0"/>
-			<ability-list-tile
-				:key="ability.name"
-				:data-id="`${_uid}-${ability.name}`"
-				v-bind="ability"
-				@click="click({ability, elementId: `${_uid}-${ability.name}`})"
-			/>
-		</template>
-	</v-list>
-</template>
-
-<script>
-	import AbilityListTile from '/imports/ui/properties/components/attributes/AbilityListTile.vue';
-	import store from "/imports/ui/vuexStore.js";
-
-	export default {
-		data(){ return{
-			abilities: [
-				{
-					name: "Strength",
-					value: 8,
-					mod: -1,
-					effects: [
-						{
-							name: "Ghost Touch",
-							operation: "add",
-							result: -2,
-							enabled: true,
-							_id: Random.id(),
-						},{
-							name: "Some Base",
-							operation: "base",
-							result: 15,
-							enabled: true,
-							_id: Random.id(),
-						},{
-							name: "Some Multiply",
-							operation: "mul",
-							result: 1.5,
-							enabled: true,
-							_id: Random.id(),
-						},{
-							name: "Some Min",
-							operation: "min",
-							result: 8,
-							enabled: true,
-							_id: Random.id(),
-						},{
-							name: "Some Advantage",
-							operation: "advantage",
-							result: 1,
-							enabled: true,
-							_id: Random.id(),
-						},{
-							name: "Some Disadvantage",
-							operation: "disadvantage",
-							result: 1,
-							enabled: true,
-							_id: Random.id(),
-						},{
-							name: "Some Passive",
-							operation: "passiveAdd",
-							result: -2,
-							calculation: "3-5",
-							_id: Random.id(),
-						},{
-							name: "Some Conditional",
-							operation: "conditional",
-							calculation: "+8 Only when asleep",
-							enabled: true,
-							_id: Random.id(),
-						},
-					]
-				}, {
-					name: "Dexterity",
-					value: 18,
-					mod: 4,
-				}, {
-					name: "Constitution",
-					value: 12,
-					mod: 1,
-				}, {
-					name: "Intelligence",
-					value: 20,
-					mod: 5,
-				}, {
-					name: "Wisdom",
-					value: 6,
-					mod: -2,
-				}, {
-					name: "Charisma",
-					value: 28,
-					mod: 9,
-				},
-			]
-		}},
-		components: {
-			AbilityListTile,
-		},
-		methods: {
-			click({ability, elementId}){
-				store.commit("pushDialogStack", {
-					component: "attribute-dialog",
-					elementId,
-					data: ability,
-				});
-			},
-		},
-	};
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/properties/components/attributes/AttributeCard.Story.vue

@@ -1,43 +0,0 @@
-<template lang="html">
-  <v-container grid-list-md>
-  	<v-layout row wrap>
-  		<v-flex xs12 v-for="attribute in attributes" :key="attribute.name">
-  			<attribute-card v-bind="attribute" @click="click"/>
-  		</v-flex>
-  	</v-layout>
-	</v-container>
-</template>
-
-<script>
-	import AttributeCard from '/imports/ui/properties/components/attributes/AttributeCard.vue';
-	export default {
-		components: {
-			AttributeCard
-		},
-		dontWrap: true,
-		data(){ return {
-			attributes: [
-				{
-					name: 'Speed',
-					value: 30,
-				}, {
-					name: 'Initiative',
-					value: 2,
-					modifier: true,
-				},{
-					name: 'Proficiency Bonus',
-					value: -2,
-					modifier: true,
-				},
-			],
-		}},
-		methods: {
-			click() {
-				console.log(...arguments)
-			},
-		},
-	};
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/properties/components/attributes/HealthBar.Story.vue

@@ -1,60 +0,0 @@
-<template lang="html">
-	<div class="pa-1" style="background: inherit;">
-		<health-bar
-		:value="value"
-		:max-value="maxValue"
-		name="Hit Points"
-		@change="healthBarChanged"
-		/>
-		<health-bar
-		:value="50"
-		:max-value="100"
-		name="Temporary Hit Points"
-		/>
-		<health-bar
-		:value="70"
-		:max-value="100"
-		name="Some other bar"
-		@change="healthBarChanged"
-		/>
-		<health-bar
-		:value="90"
-		:max-value="100"
-		name="Cow"
-		/>
-	</div>
-</template>
-
-<script>
-	import HealthBar from '/imports/ui/properties/components/attributes/HealthBar.vue';
-	export default {
-		data(){return{
-			value: 100,
-			maxValue: 100,
-		}},
-		components: {
-			HealthBar,
-		},
-		methods: {
-			healthBarChanged(e){
-				let val = e.value;
-				// Apply the change
-				if (e.type === 'set'){
-					this.value = val;
-				} else if (e.type === 'increment') {
-					this.value += val;
-				}
-				// Clamp the value
-				if (this.value < 0){
-					this.value = 0;
-				}
-				if (this.value > this.maxValue){
-					this.value = this.maxValue;
-				}
-			},
-		},
-	}
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/properties/components/attributes/HealthBar.vue

@@ -1,103 +1,128 @@
 <template>
-	<v-layout
-		row
-		wrap
-		align-center
-		justify-center
-		style="min-height: 48px;"
-		:class="{ hover }"
-		class="my-3 health-bar"
-		:data-id="_id"
-	>
-		<div
-			class="subheading text-truncate pa-2 name"
-			@mouseover="hover = true"
-			@mouseleave="hover = false"
-			@click="$emit('click')"
-		>
-			{{ name }}
-		</div>
-		<v-flex style="height: 20px; flex-basis: 300px; flex-grow: 100;">
-			<v-layout
-				column
-				align-center
-				@click="edit"
-				style="cursor: pointer;"
-				class="bar"
-			>
-				<v-progress-linear
-					:value="(value / maxValue) * 100"
-					height="20"
-					color="green lighten-1"
-					class="ma-0"
-				>
-				</v-progress-linear>
-				<span
-					class="value"
-					style="margin-top: -20px; z-index: 1; font-size: 15px; font-weight: 600; height: 20px;"
-				>
-					{{ value }} / {{ maxValue }}
-				</span>
-			</v-layout>
-			<transition name="transition">
-				<v-toolbar
-					v-if="editing"
-					justify-center
-					height="48"
-					flat
-					class="transparent toolbar"
-				>
-					<v-spacer />
-					<v-btn-toggle
-						:value="operation === 'add' ? 0: operation === 'subtract' ? 1 : null"
-						@click="$refs.editInput.focus()"
-						class="mr-2"
-					>
-						<v-btn
-							@click="toggleAdd(); $nextTick(() => $refs.editInput.focus())"
-							class="filled"
-						>
-							<v-icon>add</v-icon>
-						</v-btn>
-						<v-btn
-							@click="toggleSubtract(); $nextTick(() => $refs.editInput.focus())"
-							class="filled"
-						>
-							<v-icon>remove</v-icon>
-						</v-btn>
-					</v-btn-toggle>
-					<v-text-field
-						solo
-						hide-details
-						type="number"
-						v-if="editing"
-						ref="editInput"
-						style="max-width: 120px;"
-						min="0"
-						:value="editValue"
-						:prepend-inner-icon="operationIcon(operation)"
-						@focus="$event.target.select()"
-						@keypress="keypress"
-					>
-					</v-text-field>
-					<v-btn small fab @click="commitEdit" class="filled" color="red">
-						<v-icon>done</v-icon>
-					</v-btn>
-					<v-btn small fab @click="cancelEdit" class="mx-0 filled">
-						<v-icon>close</v-icon>
-					</v-btn>
-					<v-spacer />
-				</v-toolbar>
-			</transition>
-		</v-flex>
-		<transition name="background-transition">
-			<div v-if="editing" class="page-tint" @click="cancelEdit" />
-		</transition>
-	</v-layout>
+  <v-layout
+    row
+    wrap
+    align-center
+    justify-center
+    style="min-height: 48px;"
+    :class="{ hover }"
+    class="my-3 health-bar"
+    :data-id="_id"
+  >
+    <div
+      class="subheading text-truncate pa-2 name"
+      @mouseover="hover = true"
+      @mouseleave="hover = false"
+      @click="$emit('click')"
+    >
+      {{ name }}
+    </div>
+    <v-flex style="height: 20px; flex-basis: 300px; flex-grow: 100;">
+      <v-layout
+        column
+        align-center
+        style="cursor: pointer;"
+        class="bar"
+        @click="edit"
+      >
+        <v-progress-linear
+          :value="(value / maxValue) * 100"
+          height="20"
+          color="green lighten-1"
+          class="ma-0"
+        />
+        <span
+          class="value"
+          style="margin-top: -20px; z-index: 1; font-size: 15px; font-weight: 600; height: 20px;"
+        >
+          {{ value }} / {{ maxValue }}
+        </span>
+      </v-layout>
+      <transition name="transition">
+        <v-toolbar
+          v-if="editing"
+          justify-center
+          height="48"
+          flat
+          class="transparent toolbar"
+        >
+          <v-spacer />
+          <v-btn-toggle
+            :value="operation === 'add' ? 0: operation === 'subtract' ? 1 : null"
+            class="mr-2"
+            @click="$refs.editInput.focus()"
+          >
+            <v-btn
+              :disabled="context.editPermission === false"
+              class="filled"
+              @click="toggleAdd(); $nextTick(() => $refs.editInput.focus())"
+            >
+              <v-icon>add</v-icon>
+            </v-btn>
+            <v-btn
+              :disabled="context.editPermission === false"
+              class="filled"
+              @click="toggleSubtract(); $nextTick(() => $refs.editInput.focus())"
+            >
+              <v-icon>remove</v-icon>
+            </v-btn>
+          </v-btn-toggle>
+          <v-text-field
+            v-if="editing"
+            ref="editInput"
+            solo
+            hide-details
+            type="number"
+            style="max-width: 120px;"
+            min="0"
+            :value="editValue"
+            :prepend-inner-icon="operationIcon(operation)"
+            :disabled="context.editPermission === false"
+            @focus="$event.target.select()"
+            @keypress="keypress"
+          />
+          <v-btn
+            small
+            fab
+            class="filled"
+            color="red"
+            @click="commitEdit"
+          >
+            <v-icon>done</v-icon>
+          </v-btn>
+          <v-btn
+            small
+            fab
+            class="mx-0 filled"
+            @click="cancelEdit"
+          >
+            <v-icon>close</v-icon>
+          </v-btn>
+          <v-spacer />
+        </v-toolbar>
+      </transition>
+    </v-flex>
+    <transition name="background-transition">
+      <div
+        v-if="editing"
+        class="page-tint"
+        @click="cancelEdit"
+      />
+    </transition>
+  </v-layout>
 </template>
 
 <script>
 	export default {
+    inject: {
+      context: { default: {} }
+    },
+		props: {
+			value: Number,
+			maxValue: Number,
+			name: String,
+			_id: String,
+		},
 		data() {
 			return {
 				editing: false,
@@ -106,12 +131,6 @@
 				hover: false,
 			};
 		},
-		props: {
-			value: Number,
-			maxValue: Number,
-			name: String,
-			_id: String,
-		},
 		methods: {
 			edit() {
 				this.editing = true;
@@ -138,7 +157,7 @@
 					case 'set':
 						return 'forward';
 					case 'add':
-					  return 'add';
+            return 'add';
 					case 'subtract':
 						return 'remove';
 				}

app/imports/ui/properties/components/attributes/HitDiceListTile.Story.vue

@@ -1,66 +0,0 @@
-<template lang="html">
-	<v-list>
-		<v-subheader>Hit Dice</v-subheader>
-		<template v-for="(hitDie, index) in hitDice">
-			<v-divider v-if="index !== 0"/>
-			<hit-dice-list-tile
-				:key="hitDie.dice"
-				v-bind="hitDie"
-				@click="click"
-				@change="e => change(hitDie, e)"
-			/>
-		</template>
-	</v-list>
-</template>
-
-<script>
-	import HitDiceListTile from '/imports/ui/properties/components/attributes/HitDiceListTile.vue';
-	export default {
-		data(){ return{
-			hitDice: [
-				{
-					dice: 6,
-					value: 20,
-					maxValue: 20,
-					conMod: 4,
-				}, {
-					dice: 8,
-					value: 3,
-					maxValue: 3,
-					conMod: 4,
-				}, {
-					dice: 10,
-					value: 3,
-					maxValue: 3,
-					conMod: 4,
-				}, {
-					dice: 12,
-					value: 1,
-					maxValue: 1,
-					conMod: 4,
-				},
-			]
-		}},
-		components: {
-			HitDiceListTile,
-		},
-		methods: {
-			click(e){
-				console.log(e);
-			},
-			change(hitDie, e){
-				if (e.type === 'increment'){
-					hitDie.value += e.value;
-					if (hitDie.value > hitDie.maxValue){
-						hitDie.value = hitDie.maxValue;
-					} else if (hitDie.value < 0){
-						hitDie.value = 0;
-					}
-				}
-			},
-		},
-	};
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/properties/components/attributes/HitDiceListTile.vue

@@ -17,7 +17,7 @@
           <v-btn
             icon
             small
-            :disabled="currentValue >= model.value"
+            :disabled="currentValue >= model.value || context.editPermission === false"
             @click="increment(1)"
           >
             <v-icon>arrow_drop_up</v-icon>
@@ -25,7 +25,7 @@
           <v-btn
             icon
             small
-            :disabled="currentValue <= 0"
+            :disabled="currentValue <= 0 || context.editPermission === false"
             @click="increment(-1)"
           >
             <v-icon>arrow_drop_down</v-icon>
@@ -68,6 +68,9 @@ import ComputedForCreature from '/imports/ui/components/computation/ComputedForC
 export default {
   components: {
     Computed: ComputedForCreature,
+  },
+  inject: {
+    context: { default: {} }
   },
 	props: {
     model: {

app/imports/ui/properties/components/attributes/ResourceCard.Story.vue

@@ -1,47 +0,0 @@
-<template lang="html">
-	<column-layout>
-		<div>
-			<resource-card
-				data-id="abc123"
-				name="Sorcery points"
-				color="#f44336"
-				:value="8"
-				:adjustment="-2"
-			/>
-		</div>
-		<div>
-			<resource-card
-				data-id="abc123"
-				name="Psionic point like things"
-				color="#f44336"
-				:value="34"
-				:adjustment="-12"
-			/>
-		</div>
-		<div>
-			<resource-card
-				data-id="abc123"
-				name="Rages"
-				color="#f44336"
-				:value="1"
-				:adjustment="0"
-			/>
-		</div>
-	</column-layout>
-</template>
-
-<script>
-	import ResourceCard from '/imports/ui/properties/components/attributes/ResourceCard.vue';
-	import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
-
-	export default {
-		dontWrap: true,
-		components: {
-			ColumnLayout,
-			ResourceCard,
-		},
-	};
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/properties/components/attributes/ResourceCard.vue

@@ -1,37 +1,51 @@
 <template lang="html">
-	<v-card class="resource-card layout row" :class="hover ? 'elevation-8': ''">
-		<div class="buttons layout column justify-center pl-3">
-			<v-btn icon small :disabled="currentValue >= value" @click="increment(1)">
-				<v-icon>arrow_drop_up</v-icon>
-			</v-btn>
-			<v-btn icon small :disabled="currentValue <= 0" @click="increment(-1)">
-				<v-icon>arrow_drop_down</v-icon>
-			</v-btn>
-		</div>
-		<div
-			class="layout row align-center value pl-2 pr-3"
-		>
-			<div class="display-1">{{currentValue}}</div>
-			<div class="title ml-2 max-value">/{{value}}</div>
-		</div>
-		<div
-			class="content layout row align-center pr-3"
-			@click="click"
-			@mouseover="hover = true"
-			@mouseleave="hover = false"
-		>
-			<div class="text-truncate ">
-				{{name}}
-			</div>
-		</div>
-	</v-card>
+  <v-card
+    class="resource-card layout row"
+    :class="hover ? 'elevation-8': ''"
+  >
+    <div class="buttons layout column justify-center pl-3">
+      <v-btn
+        icon
+        small
+        :disabled="currentValue >= value || context.editPermission === false"
+        @click="increment(1)"
+      >
+        <v-icon>arrow_drop_up</v-icon>
+      </v-btn>
+      <v-btn
+        icon
+        small
+        :disabled="currentValue <= 0 || context.editPermission === false"
+        @click="increment(-1)"
+      >
+        <v-icon>arrow_drop_down</v-icon>
+      </v-btn>
+    </div>
+    <div
+      class="layout row align-center value pl-2 pr-3"
+    >
+      <div class="display-1">
+        {{ currentValue }}
+      </div>
+      <div class="title ml-2 max-value">
+        /{{ value }}
+      </div>
+    </div>
+    <div
+      class="content layout row align-center pr-3"
+      @click="click"
+      @mouseover="hover = true"
+      @mouseleave="hover = false"
+    >
+      <div class="text-truncate ">
+        {{ name }}
+      </div>
+    </div>
+  </v-card>
 </template>
 
 <script>
 	export default {
-		data(){ return{
-			hover: false,
-		}},
 		props: {
 			_id: String,
 			name: String,
@@ -39,6 +53,12 @@
 			value: Number,
 			damage: Number,
 		},
+		data(){ return{
+			hover: false,
+		}},
+    inject: {
+      context: { default: {} }
+    },
 		computed: {
 			currentValue(){
 				return this.value - (this.damage || 0);

app/imports/ui/properties/components/attributes/SpellSlotListTile.Story.vue

@@ -1,44 +0,0 @@
-<template lang="html">
-	<v-list>
-		<spell-slot-list-tile
-			v-for="(slot, index) in spellSlots"
-			:key="'tile ' + index"
-			v-bind="slot"
-			@change="e => spellSlots[index].adjustment += e.value"
-		/>
-	</v-list>
-</template>
-
-<script>
-	import SpellSlotListTile from '/imports/ui/properties/components/attributes/SpellSlotListTile.vue';
-
-	export default {
-		components: {
-			SpellSlotListTile,
-		},
-		data(){return {
-			spellSlots: [
-				{
-					name: "Level 1",
-					value: 4,
-					adjustment: -2,
-				}, {
-					name: "Level 1",
-					value: 1,
-					adjustment: 0,
-				}, {
-					name: "Level 2",
-					value: 12,
-					adjustment: -8,
-				}, {
-					name: "Level 3",
-					value: 10,
-					adjustment: -5,
-				},
-			],
-		}}
-	};
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/properties/components/attributes/SpellSlotListTile.vue

@@ -1,61 +1,92 @@
 <template lang="html">
-	<v-list-tile class="spell-slot-list-tile" :class="{hover}">
+  <v-list-tile
+    class="spell-slot-list-tile"
+    :class="{hover}"
+  >
+    <v-list-tile-action>
+      <div
+        v-if="value > 4"
+        class="layout row align-center"
+      >
+        <div class="buttons layout column justify-center">
+          <v-btn
+            icon
+            small
+            :disabled="
+              currentValue >= value ||
+                context.editPermission === false
+            "
+            @click="increment(1)"
+          >
+            <v-icon>arrow_drop_up</v-icon>
+          </v-btn>
+          <v-btn
+            icon
+            small
+            :disabled="
+              currentValue <= 0 ||
+                context.editPermission === false
+            "
+            @click="increment(-1)"
+          >
+            <v-icon>arrow_drop_down</v-icon>
+          </v-btn>
+        </div>
+        <div
+          class="layout row value"
+          style="align-items: baseline;"
+        >
+          <div class="display-1">
+            {{ currentValue }}
+          </div>
+          <div class="title ml-2 max-value">
+            /{{ value }}
+          </div>
+        </div>
+      </div>
 
-		<v-list-tile-action>
+      <div
+        v-else
+        class="layout row align-center justify-end slot-buttons"
+      >
+        <v-btn
+          v-for="i in value"
+          :key="i"
+          icon
+          small
+          :disabled="
+            !(i === currentValue || i === currentValue + 1) ||
+              context.editPermission === false
+          "
+          @click="increment(i > currentValue ? 1 : -1)"
+        >
+          <v-icon>
+            {{
+              i > currentValue ?
+                'radio_button_unchecked' :
+                'radio_button_checked'
+            }}
+          </v-icon>
+        </v-btn>
+      </div>
+    </v-list-tile-action>
 
-			<div class="layout row align-center" v-if="value > 4">
-				<div class="buttons layout column justify-center">
-					<v-btn icon small :disabled="currentValue >= value" @click="increment(1)">
-						<v-icon>arrow_drop_up</v-icon>
-					</v-btn>
-					<v-btn icon small :disabled="currentValue <= 0" @click="increment(-1)">
-						<v-icon>arrow_drop_down</v-icon>
-					</v-btn>
-				</div>
-				<div class="layout row value" style="align-items: baseline;">
-					<div class="display-1">{{currentValue}}</div>
-					<div class="title ml-2 max-value">/{{value}}</div>
-				</div>
-			</div>
-
-			<div class="layout row align-center justify-end slot-buttons" v-else>
-				<v-btn
-					icon
-					small
-					v-for="i in value"
-					:disabled="!(i === currentValue || i === currentValue + 1)"
-					:key="i"
-					@click="increment(i > currentValue ? 1 : -1)"
-				>
-					<v-icon>{{
-						i > currentValue ?
-						'radio_button_unchecked' :
-						'radio_button_checked'
-					}}</v-icon>
-				</v-btn>
-			</div>
-
-		</v-list-tile-action>
-
-		<v-list-tile-content
-			class="content ml-2"
-			@click="click"
-			@mouseover="hover = true"
-			@mouseleave="hover = false"
-		>
-			<v-list-tile-title>
-				{{name}}
-			</v-list-tile-title>
-		</v-list-tile-content>
-	</v-list-tile>
+    <v-list-tile-content
+      class="content ml-2"
+      @click="click"
+      @mouseover="hover = true"
+      @mouseleave="hover = false"
+    >
+      <v-list-tile-title>
+        {{ name }}
+      </v-list-tile-title>
+    </v-list-tile-content>
+  </v-list-tile>
 </template>
 
 <script>
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 export default {
-	data(){ return{
-		hover: false,
-	}},
 	props: {
 		_id: String,
 		name: String,
@@ -66,6 +97,12 @@ export default {
 			default: 0,
 		},
 	},
+	data(){ return{
+		hover: false,
+	}},
+  inject: {
+    context: { default: {} }
+  },
 	computed: {
 		currentValue(){
 			return this.value - this.damage;

app/imports/ui/properties/components/features/FeatureCard.Story.vue

@@ -1,51 +0,0 @@
-<template lang="html">
-	<column-layout>
-		<div
-			v-for="(feature, index) in features"
-			:key="index"
-		>
-			<feature-card
-				v-bind="feature"
-			/>
-		</div>
-	</column-layout>
-</template>
-
-<script>
-	import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
-	import FeatureCard from '/imports/ui/properties/components/features/FeatureCard.vue';
-
-	export default {
-		dontWrap: true,
-		components: {
-			ColumnLayout,
-			FeatureCard,
-		},
-		data(){return {
-			features: [
-				{
-					name: 'Feature 1',
-					enabled: true,
-					alwaysEnabled: true,
-					description: `
-
-					blah blah, with
-
-					spacing
-					`,
-					color: '#f44336',
-				}, {
-					name: 'Feature 2',
-					enabled: false,
-					alwaysEnabled: false,
-					description: `Short Description`,
-					uses: 5,
-					used: 2,
-				},
-			],
-		}},
-	}
-</script>
-
-<style lang="css' scoped>
-</style>

app/imports/ui/properties/components/skills/SkillListTile.Story.vue

@@ -1,50 +0,0 @@
-<template lang="html">
-	<v-list>
-		<skill-list-tile
-			v-for="skill in skills"
-			:key="skill.name"
-			v-bind="skill"
-		/>
-	</v-list>
-</template>
-
-<script>
-	import SkillListTile from '/imports/ui/properties/components/skills/SkillListTile.vue';
-	export default {
-		data(){return {
-			skills: [
-				{
-					name: 'Animal Handling',
-					proficiency: 1,
-					value: 4,
-				}, {
-					name: 'Deception',
-					proficiency: 0,
-					value: -0,
-					advantage: 0,
-				}, {
-					name: 'Intimidation',
-					proficiency: 2,
-					value: 6,
-					advantage: 1,
-				}, {
-					name: 'Insight',
-					proficiency: 0.5,
-					value: -2,
-					advantage: -1,
-				}, {
-					name: 'History',
-					conditionalBenefits: 1,
-					fail: 1,
-					advantage: -1,
-				}
-			]
-		}},
-		components: {
-			SkillListTile,
-		},
-	}
-</script>
-
-<style lang="css" scoped>
-</style>

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

@@ -3,9 +3,8 @@
     <text-field
       label="Name"
       :value="model.name"
-      :debounce-time="debounceTime"
       :error-messages="errors.name"
-      @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+      @change="change('name', ...arguments)"
     />
     <smart-select
       label="Action type"
@@ -14,23 +13,20 @@
       :error-messages="errors.actionType"
       :menu-props="{auto: true, lazy: true}"
       :hint="actionTypeHints[model.actionType]"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['actionType'], value, ack})"
+      @change="change('actionType', ...arguments)"
     />
     <text-field
       v-if="attackForm"
       label="Roll bonus"
       :value="model.rollBonus"
       :error-messages="errors.rollBonus"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['rollBonus'], value, ack})"
+      @change="change('rollBonus', ...arguments)"
     />
     <text-area
       label="Description"
       :value="model.description"
       :error-messages="errors.description"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
+      @change="change('description', ...arguments)"
     />
     <form-sections>
       <form-section name="Resources">
@@ -42,14 +38,13 @@
         />
       </form-section>
       <form-section name="Advanced">
-        <v-combobox
+        <smart-combobox
           label="Tags"
           multiple
           chips
           deletable-chips
-          box
           :value="model.tags"
-          @change="(value) => $emit('change', {path: ['tags'], value})"
+          @change="change('tags', ...arguments)"
         />
         <smart-select
           label="Target"
@@ -58,8 +53,7 @@
           :value="model.target"
           :error-messages="errors.target"
           :menu-props="{auto: true, lazy: true}"
-          :debounce-time="debounceTime"
-          @change="(value, ack) => $emit('change', {path: ['target'], value, ack})"
+          @change="change('target', ...arguments)"
         />
         <div class="layout row wrap">
           <text-field
@@ -68,8 +62,7 @@
             style="flex-basis: 300px;"
             :value="model.uses"
             :error-messages="errors.uses"
-            :debounce-time="debounceTime"
-            @change="(value, ack) => $emit('change', {path: ['uses'], value, ack})"
+            @change="change('uses', ...arguments)"
           />
           <text-field
             label="Uses used"
@@ -78,8 +71,7 @@
             style="flex-basis: 300px;"
             :value="model.usesUsed"
             :error-messages="errors.uses"
-            :debounce-time="debounceTime"
-            @change="(value, ack) => $emit('change', {path: ['usesUsed'], value, ack})"
+            @change="change('usesUsed', ...arguments)"
           />
         </div>
         <smart-select
@@ -90,8 +82,7 @@
           :value="model.reset"
           :error-messages="errors.reset"
           :menu-props="{auto: true, lazy: true}"
-          :debounce-time="debounceTime"
-          @change="(value, ack) => $emit('change', {path: ['reset'], value, ack})"
+          @change="change('reset', ...arguments)"
         />
       </form-section>
     </form-sections>
@@ -101,6 +92,7 @@
 <script>
   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';
 
   export default {
     components: {
@@ -108,25 +100,11 @@
       FormSections,
       ResourcesForm,
     },
+    mixins: [propertyFormMixin],
     props: {
-      stored: {
-        type: Boolean,
-      },
-      model: {
-        type: Object,
-        default: () => ({}),
-      },
-      errors: {
-        type: Object,
-        default: () => ({}),
-      },
       attackForm: {
         type: Boolean,
       },
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
     },
     data(){
       let data = {

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

@@ -8,8 +8,7 @@
         :items="attributeList"
         :value="model.stat"
         :error-messages="errors.stat"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['stat'], value, ack})"
+        @change="change('stat', ...arguments)"
       />
       <text-field
         label="Damage"
@@ -17,8 +16,7 @@
         style="flex-basis: 300px;"
         :value="model.amount"
         :error-messages="errors.amount"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['amount'], value, ack})"
+        @change="change('amount', ...arguments)"
       />
     </div>
     <smart-select
@@ -29,34 +27,22 @@
       :value="model.target"
       :error-messages="errors.target"
       :menu-props="{auto: true, lazy: true}"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['target'], value, ack})"
+      @change="change('target', ...arguments)"
     />
   </div>
 </template>
 
 <script>
 import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attributeListMixin.js';
+import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
 export default {
-  mixins: [attributeListMixin],
+  mixins: [propertyFormMixin, attributeListMixin],
 	props: {
-		model: {
-			type: Object,
-			default: () => ({}),
-		},
-		errors: {
-			type: Object,
-			default: () => ({}),
-		},
 		parentTarget: {
 			type: String,
       default: undefined,
 		},
-    debounceTime: {
-      type: Number,
-      default: undefined,
-    },
 	},
 	computed: {
 		targetOptions(){

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

@@ -7,8 +7,7 @@
       :items="attributeList"
       :value="model.variableName"
       :error-messages="errors.variableName"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['variableName'], value, ack})"
+      @change="change('variableName', ...arguments)"
     />
     <text-field
       label="Quantity"
@@ -16,30 +15,16 @@
       style="flex-basis: 300px;"
       :value="model.quantity"
       :error-messages="errors.quantity"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['quantity'], value, ack})"
+      @change="change('quantity', ...arguments)"
     />
   </div>
 </template>
 
 <script>
+import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attributeListMixin.js';
 
 export default {
-  mixins: [attributeListMixin],
-	props: {
-		model: {
-			type: Object,
-			default: () => ({}),
-		},
-		errors: {
-			type: Object,
-			default: () => ({}),
-		},
-    debounceTime: {
-      type: Number,
-      default: undefined,
-    },
-	},
+  mixins: [propertyFormMixin, attributeListMixin],
 }
 </script>

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

@@ -8,8 +8,7 @@
         style="width: 332px;"
         :value="model.baseValueCalculation"
         :error-messages="errors.baseValueCalculation"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['baseValueCalculation'], value, ack})"
+        @change="change('baseValueCalculation', ...arguments)"
       />
     </div>
     <div class="layout row wrap">
@@ -17,8 +16,7 @@
         label="Name"
         :value="model.name"
         :error-messages="errors.name"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+        @change="change('name', ...arguments)"
       />
       <text-field
         label="Variable name"
@@ -26,8 +24,7 @@
         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})"
+        @change="change('variableName', ...arguments)"
       />
     </div>
     <smart-select
@@ -37,8 +34,7 @@
       :error-messages="errors.attributeType"
       :menu-props="{auto: true, lazy: true}"
       :hint="attributeTypeHints[model.attributeType]"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['attributeType'], value, ack})"
+      @change="change('attributeType', ...arguments)"
     />
     <smart-select
       v-if="model.attributeType === 'hitDice'"
@@ -47,28 +43,26 @@
       :value="model.hitDiceSize"
       :error-messages="errors.hitDiceSize"
       :menu-props="{auto: true, lazy: true}"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['hitDiceSize'], value, ack})"
+      @change="change('hitDiceSize', ...arguments)"
     />
     <text-area
       label="Description"
       :value="model.description"
       :error-messages="errors.description"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
+      @change="change('description', ...arguments)"
     />
     <form-section
       name="Advanced"
       standalone
     >
       <div class="layout column align-center">
-        <v-switch
+        <smart-switch
           v-if="model.attributeType !== 'hitDice'"
           label="Allow decimal values"
           class="no-flex"
-          :input-value="model.decimal"
+          :value="model.decimal"
           :error-messages="errors.decimal"
-          @change="e => $emit('change', {path: ['decimal'], value: !!e})"
+          @change="change('decimal', ...arguments)"
         />
         <div
           class="layout row justify-center"
@@ -82,8 +76,7 @@
             hint="The attribute's final value is reduced by this amount"
             :value="model.damage"
             :error-messages="errors.damage"
-            :debounce-time="debounceTime"
-            @change="(value, ack) => $emit('change', {path: ['damage'], value, ack})"
+            @change="change('damage', ...arguments)"
           />
         </div>
       </div>
@@ -97,8 +90,7 @@
           :value="model.reset"
           :error-messages="errors.reset"
           :menu-props="{auto: true, lazy: true}"
-          :debounce-time="debounceTime"
-          @change="(value, ack) => $emit('change', {path: ['reset'], value: value, ack})"
+          @change="change('reset', ...arguments)"
         />
       </div>
     </form-section>
@@ -107,25 +99,13 @@
 
 <script>
 	import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
+  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
 	export default {
 		components: {
 			FormSection,
 		},
-		props: {
-			model: {
-				type: Object,
-				default: () => ({}),
-			},
-			errors: {
-				type: Object,
-				default: () => ({}),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-		},
+    mixins: [propertyFormMixin],
 		data(){
 			let data = {
 				attributeTypes: [

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

@@ -9,7 +9,7 @@
           <div style="flex-grow: 1;">
             <attribute-consumed-form
               :model="attribute"
-              @change="({path, value, ack}) => $emit('change', {path: [i, ...path], value, ack})"
+              @change="({path, value, ack}) => change([i, ...path], value, ack)"
             />
           </div>
           <v-btn
@@ -29,23 +29,12 @@
 
 <script>
 	import AttributeConsumedForm from '/imports/ui/properties/forms/AttributeConsumedForm.vue';
+  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
 	export default {
 		components: {
 			AttributeConsumedForm,
 		},
-		props: {
-			model: {
-				type: Array,
-				default: () => ([]),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-		},
+    mixins: [propertyFormMixin],
 	}
 </script>
-
-<style lang="css" scoped>
-</style>

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

@@ -4,47 +4,34 @@
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+      @change="change('name', ...arguments)"
     />
     <text-area
       label="Description"
       :value="model.description"
       :error-messages="errors.description"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
+      @change="change('description', ...arguments)"
     />
     <text-field
       label="Duration"
       hint="How long the buff lasts"
       :value="model.duration"
       :error-messages="errors.duration"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['duration'], value, ack})"
+      @change="change('duration', ...arguments)"
     />
   </div>
 </template>
 
 <script>
+  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+
 	export default {
+    mixins: [propertyFormMixin],
 		props: {
-			stored: Boolean,
-			model: {
-				type: Object,
-				default: () => ({}),
-			},
-			errors: {
-				type: Object,
-				default: () => ({}),
-			},
 			parentTarget: {
 				type: String,
         default: undefined,
 			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
 		},
 		computed: {
 			targetOptions(){

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

@@ -7,8 +7,7 @@
         class="base-value-field text-xs-center large-format no-flex"
         :value="model.level"
         :error-messages="errors.level"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['level'], value, ack})"
+        @change="change('level', ...arguments)"
       />
     </div>
     <div class="layout row wrap">
@@ -16,8 +15,7 @@
         label="Name"
         :value="model.name"
         :error-messages="errors.name"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+        @change="change('name', ...arguments)"
       />
       <text-field
         label="Class variable name"
@@ -25,30 +23,17 @@
         style="flex-basis: 300px;"
         hint="This should be the same for each level in a class"
         :error-messages="errors.variableName"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['variableName'], value, ack})"
+        @change="change('variableName', ...arguments)"
       />
     </div>
   </div>
 </template>
 
 <script>
+  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
 	export default {
-		props: {
-			model: {
-				type: Object,
-				default: () => ({}),
-			},
-			errors: {
-				type: Object,
-				default: () => ({}),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-		},
+    mixins: [propertyFormMixin],
 	};
 </script>
 

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

@@ -4,8 +4,7 @@
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+      @change="change('name', ...arguments)"
     />
     <div class="layout row wrap">
       <text-field
@@ -18,8 +17,7 @@
         style="flex-basis: 300px;"
         :value="model.value"
         :error-messages="errors.value"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['value'], value, ack})"
+        @change="change('value', ...arguments)"
       />
       <text-field
         label="Weight"
@@ -30,32 +28,30 @@
         style="flex-basis: 300px;"
         :value="model.weight"
         :error-messages="errors.weight"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['weight'], value, ack})"
+        @change="change('weight', ...arguments)"
       />
     </div>
     <text-area
       label="Description"
       :value="model.description"
       :error-messages="errors.description"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
+      @change="change('description', ...arguments)"
     />
     <form-section
       name="Advanced"
       standalone
     >
-      <v-switch
+      <smart-switch
         label="Carried"
-        :input-value="model.carried"
+        :value="model.carried"
         :error-messages="errors.carried"
-        @change="e => $emit('change', {path: ['carried'], value})"
+        @change="change('carried', ...arguments)"
       />
-      <v-switch
+      <smart-switch
         label="Contents are weightless"
-        :input-value="model.contentsWeightless"
+        :value="model.contentsWeightless"
         :error-messages="errors.contentsWeightless"
-        @change="e => $emit('change', {path: ['contentsWeightless'], value})"
+        @change="change('contentsWeightless', ...arguments)"
       />
     </form-section>
   </div>
@@ -63,24 +59,12 @@
 
 <script>
 import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
+import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
 export default {
 	components: {
 		FormSection,
 	},
-	props: {
-		model: {
-			type: Object,
-			default: () => ({}),
-		},
-		errors: {
-			type: Object,
-			default: () => ({}),
-		},
-    debounceTime: {
-      type: Number,
-      default: undefined,
-    },
-	},
-	}
+  mixins: [propertyFormMixin],
+}
 </script>

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

@@ -6,8 +6,7 @@
         style="flex-basis: 300px;"
         :value="model.amount"
         :error-messages="errors.amount"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['amount'], value, ack})"
+        @change="change('amount', ...arguments)"
       />
       <smart-select
         label="Damage Type"
@@ -16,8 +15,7 @@
         :value="model.damageType"
         :error-messages="errors.damageType"
         :menu-props="{auto: true}"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['damageType'], value, ack})"
+        @change="change('damageType', ...arguments)"
       />
     </div>
     <smart-select
@@ -27,33 +25,22 @@
       :value="model.target"
       :error-messages="errors.target"
       :menu-props="{auto: true, lazy: true}"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['target'], value, ack})"
+      @change="change('target', ...arguments)"
     />
   </div>
 </template>
 
 <script>
 import DAMAGE_TYPES from '/imports/constants/DAMAGE_TYPES.js';
+import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
 export default {
+  mixins: [propertyFormMixin],
 	props: {
-		model: {
-			type: Object,
-			default: () => ({}),
-		},
-		errors: {
-			type: Object,
-			default: () => ({}),
-		},
 		parentTarget: {
 			type: String,
       default: undefined,
 		},
-    debounceTime: {
-      type: Number,
-      default: undefined,
-    },
 	},
 	data(){return{
 		DAMAGE_TYPES,

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

@@ -4,8 +4,7 @@
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+      @change="change('name', ...arguments)"
     />
     <div class="layout row wrap">
       <smart-select
@@ -16,8 +15,7 @@
         :value="model.damageTypes"
         :error-messages="errors.damageTypes"
         :menu-props="{auto: true, lazy: true}"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['damageTypes'], value, ack})"
+        @change="change('damageTypes', ...arguments)"
       />
       <smart-select
         label="Value"
@@ -26,29 +24,17 @@
         :value="model.value"
         :error-messages="errors.value"
         :menu-props="{auto: true, lazy: true}"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['value'], value, ack})"
+        @change="change('value', ...arguments)"
       />
     </div>
   </div>
 </template>
 
 <script>
+  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+
 	export default {
-		props: {
-			model: {
-				type: Object,
-				default: () => ({}),
-			},
-			errors: {
-				type: Object,
-				default: () => ({}),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-		},
+    mixins: [propertyFormMixin],
 		data(){return {
 			damageTypes: [
         {

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

@@ -4,8 +4,7 @@
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+      @change="change('name', ...arguments)"
     />
     <div class="layout row wrap justify-start">
       <smart-select
@@ -16,7 +15,7 @@
         :menu-props="{transition: 'slide-y-transition', lazy: true}"
         :items="operations"
         :value="model.operation"
-        @change="(value, ack) => $emit('change', {path: ['operation'], value, ack})"
+        @change="change('operation', ...arguments)"
       >
         <v-icon
           slot="prepend"
@@ -46,8 +45,7 @@
         :disabled="!needsValue"
         :error-messages="errors.calculation"
         :hint="!isFinite(model.calculation) && model.result ? model.result + '' : '' "
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['calculation'], value, ack})"
+        @change="change('calculation', ...arguments)"
       />
     </div>
     <smart-combobox
@@ -59,33 +57,19 @@
       :value="model.stats"
       :items="attributeList"
       :error-messages="errors.stats"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['stats'], value, ack})"
+      @change="change('stats', ...arguments)"
     />
   </div>
 </template>
 
 <script>
 	import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
+  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
   import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attributeListMixin.js';
 
 	const ICON_SPIN_DURATION = 300;
 	export default {
-    mixins: [attributeListMixin],
-		props: {
-			model: {
-				type: Object,
-				default: () => ({}),
-			},
-			errors: {
-				type: Object,
-				default: () => ({}),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-		},
+    mixins: [propertyFormMixin, attributeListMixin],
 		data(){ return {
 			displayedIcon: 'add',
 			iconClass: '',

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

@@ -6,8 +6,7 @@
         style="flex-basis: 300px;"
         :value="model.name"
         :error-messages="errors.name"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+        @change="change('name', ...arguments)"
       />
       <text-field
         label="In-World date"
@@ -15,8 +14,7 @@
         style="flex-basis: 300px;"
         hint="The date in-game that the experience occured"
         :error-messages="errors.worldDate"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['worldDate'], value, ack})"
+        @change="change('worldDate', ...arguments)"
       />
       <date-picker
         label="Real date"
@@ -24,16 +22,14 @@
         style="flex-basis: 300px;"
         hint="Real life date"
         :error-messages="errors.date"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['date'], value, ack})"
+        @change="change('date', ...arguments)"
       />
     </div>
     <text-area
       label="Description"
       :value="model.description"
       :error-messages="errors.description"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
+      @change="change('description', ...arguments)"
     />
     <div class="layout column align-end">
       <text-field
@@ -43,30 +39,18 @@
         hint="The number of experience points gained from this entry"
         :value="model.value"
         :error-messages="errors.value"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['value'], value, ack})"
+        @change="change('value', ...arguments)"
       />
     </div>
   </div>
 </template>
 
 <script>
-	export default {
-		props: {
-			model: {
-				type: Object,
-				default: () => ({}),
-			},
-			errors: {
-				type: Object,
-				default: () => ({}),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-		},
-	};
+import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+
+export default {
+  mixins: [propertyFormMixin],
+};
 </script>
 
 <style lang="css" scoped>

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

@@ -4,44 +4,30 @@
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+      @change="change('name', ...arguments)"
     />
     <text-area
       label="Summary"
       hint="This will appear in the feature card in the character sheet"
       :value="model.summary"
       :error-messages="errors.summary"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['summary'], value, ack})"
+      @change="change('summary', ...arguments)"
     />
     <text-area
       label="Description"
       hint="The rest of the description that doesn't fit in the summary goes here"
       :value="model.description"
       :error-messages="errors.description"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
+      @change="change('description', ...arguments)"
     />
   </div>
 </template>
 
 <script>
+  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+
 	export default {
-		props: {
-			model: {
-				type: Object,
-				default: () => ({}),
-			},
-			errors: {
-				type: Object,
-				default: () => ({}),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-		},
+    mixins: [propertyFormMixin],
 		data(){ return{
 			enabledOptions: [
 				{

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

@@ -6,29 +6,17 @@
         style="flex-basis: 300px;"
         :value="model.name"
         :error-messages="errors.name"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+        @change="change('name', ...arguments)"
       />
     </div>
   </div>
 </template>
 
 <script>
+  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+
 	export default {
-		props: {
-			model: {
-				type: Object,
-				default: () => ({}),
-			},
-			errors: {
-				type: Object,
-				default: () => ({}),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-		},
+    mixins: [propertyFormMixin],
 	};
 </script>
 

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

@@ -6,8 +6,7 @@
       style="flex-basis: 300px;"
       :value="model.tag"
       :error-messages="errors.tag"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['tag'], value, ack})"
+      @change="change('tag', ...arguments)"
     />
     <text-field
       label="Quantity"
@@ -15,27 +14,15 @@
       style="flex-basis: 300px;"
       :value="model.quantity"
       :error-messages="errors.quantity"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['quantity'], value, ack})"
+      @change="change('quantity', ...arguments)"
     />
   </div>
 </template>
 
 <script>
+import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+
 export default {
-	props: {
-		model: {
-			type: Object,
-			default: () => ({}),
-		},
-		errors: {
-			type: Object,
-			default: () => ({}),
-		},
-    debounceTime: {
-      type: Number,
-      default: undefined,
-    },
-	},
-}
+  mixins: [propertyFormMixin],
+};
 </script>

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

@@ -1,12 +1,12 @@
 <template lang="html">
   <div class="item-form">
     <div class="layout column align-center">
-      <v-switch
+      <smart-switch
         label="Equipped"
         class="no-flex"
-        :input-value="model.equipped"
+        :value="model.equipped"
         :error-messages="errors.equipped"
-        @change="e => $emit('change', {path: ['equipped'], value: !!e})"
+        @change="change('equipped', ...arguments)"
       />
     </div>
     <div class="layout row wrap">
@@ -14,15 +14,13 @@
         label="Name"
         :value="model.name"
         :error-messages="errors.name"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+        @change="change('name', ...arguments)"
       />
       <text-field
         label="Plural name"
         :value="model.plural"
         :error-messages="errors.plural"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['plural'], value, ack})"
+        @change="change('plural', ...arguments)"
       />
     </div>
     <div class="layout row wrap">
@@ -36,8 +34,7 @@
         style="flex-basis: 300px;"
         :value="model.value"
         :error-messages="errors.value"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['value'], value, ack})"
+        @change="change('value', ...arguments)"
       />
       <text-field
         label="Weight"
@@ -48,8 +45,7 @@
         style="flex-basis: 300px;"
         :value="model.weight"
         :error-messages="errors.weight"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['weight'], value, ack})"
+        @change="change('weight', ...arguments)"
       />
     </div>
     <text-field
@@ -58,25 +54,23 @@
       min="0"
       :value="model.quantity"
       :error-messages="errors.quantity"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['quantity'], value, ack})"
+      @change="change('quantity', ...arguments)"
     />
     <text-area
       label="Description"
       :value="model.description"
       :error-messages="errors.description"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
+      @change="change('description', ...arguments)"
     />
     <form-section
       name="Advanced"
       standalone
     >
-      <v-switch
+      <smart-switch
         label="Show increment buttons"
-        :input-value="model.showIncrement"
+        :value="model.showIncrement"
         :error-messages="errors.showIncrement"
-        @change="value => $emit('change', {path: ['showIncrement'], value})"
+        @change="change('showIncrement', ...arguments)"
       />
       <smart-combobox
         label="Tags"
@@ -86,25 +80,24 @@
         deletable-chips
         :value="model.tags"
         :error-messages="errors.tags"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['tags'], value, ack})"
+        @change="change('tags', ...arguments)"
       />
-      <v-switch
+      <smart-switch
         label="Requires attunement"
-        :input-value="model.requiresAttunement"
+        :value="model.requiresAttunement"
         :error-messages="errors.requiresAttunement"
-        @change="value => $emit('change', {path: ['requiresAttunement'], value})"
+        @change="change('requiresAttunement', ...arguments)"
       />
       <v-expand-transition>
         <div
           v-show="model.requiresAttunement"
           style="padding-top: 0.1px;"
         >
-          <v-switch
+          <smart-switch
             label="Attuned"
-            :input-value="model.attuned"
+            :value="model.attuned"
             :error-messages="errors.attuned"
-            @change="value => $emit('change', {path: ['attuned'], value})"
+            @change="change('attuned', ...arguments)"
           />
         </div>
       </v-expand-transition>
@@ -114,24 +107,12 @@
 
 <script>
 import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
+import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
 export default {
 	components: {
 		FormSection,
 	},
-	props: {
-		model: {
-			type: Object,
-			default: () => ({}),
-		},
-		errors: {
-			type: Object,
-			default: () => ({}),
-		},
-		debounceTime: {
-      type: Number,
-      default: undefined,
-    },
-	},
+  mixins: [propertyFormMixin],
 	}
 </script>

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

@@ -9,7 +9,7 @@
           <div style="flex-grow: 1;">
             <item-consumed-form
               :model="item"
-              @change="({path, value, ack}) => $emit('change', {path: [i, ...path], value, ack})"
+              @change="({path, value, ack}) => change([i, ...path], value, ack)"
             />
           </div>
           <v-btn
@@ -29,20 +29,12 @@
 
 <script>
 	import ItemConsumedForm from '/imports/ui/properties/forms/ItemConsumedForm.vue';
+  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
 	export default {
 		components: {
 			ItemConsumedForm,
 		},
-		props: {
-			model: {
-				type: Array,
-				default: () => ([]),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-		},
+    mixins: [propertyFormMixin],
 	}
 </script>

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

@@ -4,37 +4,21 @@
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+      @change="change('name', ...arguments)"
     />
     <text-area
       label="Description"
       :value="model.description"
       :error-messages="errors.description"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
+      @change="change('description', ...arguments)"
     />
   </div>
 </template>
 
 <script>
-	export default {
-		props: {
-			model: {
-				type: Object,
-				default: () => ({}),
-			},
-			errors: {
-				type: Object,
-				default: () => ({}),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-		},
-	};
-</script>
+import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
-<style lang="css" scoped>
-</style>
+export default {
+  mixins: [propertyFormMixin],
+}
+</script>

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

@@ -4,8 +4,7 @@
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+      @change="change('name', ...arguments)"
     />
     <div class="layout row wrap justify-start proficiency-form">
       <smart-combobox
@@ -15,15 +14,14 @@
         :value="model.stats"
         :items="skillList"
         :error-messages="errors.stats"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['stats'], value, ack})"
+        @change="change('stats', ...arguments)"
       />
       <proficiency-select
         label="Proficiency"
         style="flex-basis: 300px;"
         :clearable="false"
         :value="model.value"
-        @change="(value, ack) => $emit('change', {path: ['value'], value, ack})"
+        @change="change('stats', ...arguments)"
       />
     </div>
   </div>
@@ -32,30 +30,13 @@
 <script>
 	import ProficiencySelect from '/imports/ui/properties/forms/shared/ProficiencySelect.vue';
   import skillListMixin from '/imports/ui/properties/forms/shared/lists/skillListMixin.js';
+  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
 	export default {
 		components: {
 			ProficiencySelect,
 		},
-    mixins: [skillListMixin],
-		props: {
-      model: {
-				type: Object,
-				default: () => ({}),
-			},
-			errors: {
-				type: Object,
-				default: () => ({}),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-			stats: {
-				type: Array,
-        default: () => [],
-			},
-		},
+    mixins: [propertyFormMixin, skillListMixin],
 	};
 </script>
 

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

@@ -28,7 +28,7 @@
         <template #activator="{ on }">
           <v-btn
             :loading="addResourceLoading"
-            :disabled="addResourceLoading"
+            :disabled="addResourceLoading || context.editPermission === false"
             icon
             large
             outline
@@ -53,20 +53,20 @@
 <script>
   import AttributesConsumedListForm from '/imports/ui/properties/forms/AttributesConsumedListForm.vue';
   import ItemsConsumedListForm from '/imports/ui/properties/forms/ItemsConsumedListForm.vue';
-  import ResourcesSchema from '/imports/api/properties/subSchemas/ResourcesSchema.js';
   import ItemConsumedSchema from '/imports/api/properties/subSchemas/ItemConsumedSchema.js';
   import AttributeConsumedSchema from '/imports/api/properties/subSchemas/AttributeConsumedSchema.js';
+  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
   export default {
     components: {
       AttributesConsumedListForm,
       ItemsConsumedListForm,
     },
+    inject: {
+      context: { default: {} }
+    },
+    mixins: [propertyFormMixin],
     props: {
-      model: {
-        type: Object,
-        default: () => (ResourcesSchema.clean({})),
-      },
       parentTarget: {
         type: String,
         default: undefined,
@@ -74,10 +74,6 @@
       buffsStored: {
         type: Boolean,
       },
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
     },
     data(){return {
 			addResourceLoading: false,

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

@@ -4,19 +4,17 @@
       label="Roll"
       :value="model.roll"
       :error-messages="errors.roll"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['roll'], value, ack})"
+      @change="change('roll', ...arguments)"
     />
     <form-sections>
       <form-section name="Advanced">
-        <v-combobox
+        <smart-combobox
           label="Tags"
           multiple
           chips
           deletable-chips
-          box
           :value="model.tags"
-          @change="(value) => $emit('change', {path: ['tags'], value})"
+          @change="change('tags', ...arguments)"
         />
       </form-section>
     </form-sections>
@@ -25,29 +23,14 @@
 
 <script>
 	import FormSection, {FormSections} from '/imports/ui/properties/forms/shared/FormSection.vue';
+  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
 	export default {
 		components: {
 			FormSection,
 			FormSections,
 		},
-		props: {
-			stored: {
-				type: Boolean,
-			},
-			model: {
-				type: Object,
-				default: () => ({}),
-			},
-			errors: {
-				type: Object,
-				default: () => ({}),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-		},
+    mixins: [propertyFormMixin],
 		data(){return {
 			addResultLoading: false,
 		}},

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

@@ -4,38 +4,24 @@
       label="DC"
       :value="model.dc"
       :error-messages="errors.dc"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['dc'], value, ack})"
+      @change="change('dc', ...arguments)"
     />
-    <text-field
-      label="Ability"
-      hint="Which ability the saving throw targets"
+    <smart-combobox
+      label="Save"
+      hint="Which save the saving throw targets"
       :value="model.ability"
+      :items="saveList"
       :error-messages="errors.ability"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['ability'], value, ack})"
+      @change="change('ability', ...arguments)"
     />
   </div>
 </template>
 
 <script>
-	export default {
-		props: {
-			model: {
-				type: Object,
-				default: () => ({}),
-			},
-			errors: {
-				type: Object,
-				default: () => ({}),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-		},
-	};
-</script>
+import saveListMixin from '/imports/ui/properties/forms/shared/lists/saveListMixin.js';
+import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
-<style lang="css" scoped>
-</style>
+export default {
+  mixins: [saveListMixin, propertyFormMixin],
+};
+</script>

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

@@ -5,8 +5,7 @@
         label="Name"
         :value="model.name"
         :error-messages="errors.name"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+        @change="change('name', ...arguments)"
       />
       <text-field
         label="Variable name"
@@ -14,8 +13,7 @@
         style="flex-basis: 300px;"
         hint="Use this name in formulae to reference this skill"
         :error-messages="errors.variableName"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['variableName'], value, ack})"
+        @change="change('variableName', ...arguments)"
       />
       <smart-combobox
         label="Ability"
@@ -24,8 +22,7 @@
         hint="Which ability is this skill based off of"
         :items="abilityScoreList"
         :error-messages="errors.ability"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['ability'], value, ack})"
+        @change="change('ability', ...arguments)"
       />
     </div>
     <smart-select
@@ -34,15 +31,13 @@
       :value="model.skillType"
       :error-messages="errors.skillType"
       :menu-props="{auto: true, lazy: true}"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['skillType'], value, ack})"
+      @change="change('skillType', ...arguments)"
     />
     <text-area
       label="Description"
       :value="model.description"
       :error-messages="errors.description"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
+      @change="change('description', ...arguments)"
     />
     <form-section
       name="Advanced"
@@ -56,15 +51,14 @@
           :value="model.baseValue"
           hint="This is the value of the skill before effects are applied"
           :error-messages="errors.baseValue"
-          :debounce-time="debounceTime"
-          @change="(value, ack) => $emit('change', {path: ['baseValue'], value, ack})"
+          @change="change('baseValue', ...arguments)"
         />
         <proficiency-select
           style="flex-basis: 300px;"
           label="Base Proficiency"
           :value="model.baseProficiency"
           :error-messages="errors.baseProficiency"
-          @change="(value, ack) => {$emit('change', {path: ['baseProficiency'], value, ack})}"
+          @change="change('baseProficiency', ...arguments)"
         />
       </div>
     </form-section>
@@ -75,26 +69,14 @@
 	import ProficiencySelect from '/imports/ui/properties/forms/shared/ProficiencySelect.vue';
 	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';
 
 	export default {
 		components: {
 			ProficiencySelect,
 			FormSection,
 		},
-		props: {
-			model: {
-				type: Object,
-				default: () => ({}),
-			},
-			errors: {
-				type: Object,
-				default: () => ({}),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-		},
+    mixins: [propertyFormMixin],
 		data(){return{
 			skillTypes: [
 				{

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

@@ -4,8 +4,7 @@
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+      @change="change('name', ...arguments)"
     />
     <div class="layout row wrap">
       <smart-select
@@ -15,8 +14,7 @@
         :items="spellLevels"
         :value="model.level"
         :error-messages="errors.level"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['level'], value, ack})"
+        @change="change('level', ...arguments)"
       />
       <smart-select
         label="School"
@@ -25,94 +23,87 @@
         :items="magicSchools"
         :value="model.school"
         :error-messages="errors.school"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['school'], value, ack})"
+        @change="change('school', ...arguments)"
       />
     </div>
     <div class="layout row wrap">
-      <v-switch
+      <smart-switch
         label="Always prepared"
         style="width: 200px; flex-grow: 0;"
         class="ml-2"
-        :input-value="model.alwaysPrepared"
+        :value="model.alwaysPrepared"
         :error-messages="errors.alwaysPrepared"
-        @change="e => $emit('change', {path: ['alwaysPrepared'], value: !!e})"
+        @change="change('alwaysPrepared', ...arguments)"
       />
     </div>
     <text-field
       label="Casting Time"
       :value="model.castingTime"
       :error-messages="errors.castingTime"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['castingTime'], value, ack})"
+      @change="change('castingTime', ...arguments)"
     />
     <text-field
       label="Range"
       :value="model.range"
       :error-messages="errors.range"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['range'], value, ack})"
+      @change="change('range', ...arguments)"
     />
     <div class="layout row wrap justify-space-between">
-      <v-checkbox
+      <smart-checkbox
         label="Verbal"
-        :input-value="model.verbal"
+        :value="model.verbal"
         :error-messages="errors.verbal"
-        @change="(value) => $emit('change', {path: ['verbal'], value})"
+        @change="change('verbal', ...arguments)"
       />
-      <v-checkbox
+      <smart-checkbox
         label="Somatic"
-        :input-value="model.somatic"
+        :value="model.somatic"
         :error-messages="errors.somatic"
-        @change="(value) => $emit('change', {path: ['somatic'], value})"
+        @change="change('somatic', ...arguments)"
       />
-      <v-checkbox
+      <smart-checkbox
         label="Concentration"
-        :input-value="model.concentration"
+        :value="model.concentration"
         :error-messages="errors.concentration"
-        @change="(value) => $emit('change', {path: ['concentration'], value})"
+        @change="change('concentration', ...arguments)"
       />
-      <v-checkbox
+      <smart-checkbox
         label="Ritual"
-        :input-value="model.ritual"
+        :value="model.ritual"
         :error-messages="errors.ritual"
-        @change="(value) => $emit('change', {path: ['ritual'], value})"
+        @change="change('ritual', ...arguments)"
       />
     </div>
     <text-field
       label="Material"
       :value="model.material"
       :error-messages="errors.material"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['material'], value, ack})"
+      @change="change('material', ...arguments)"
     />
     <text-field
       label="Duration"
       :value="model.duration"
       :error-messages="errors.duration"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['duration'], value, ack})"
+      @change="change('duration', ...arguments)"
     />
     <text-area
       label="Description"
       :value="model.description"
       :error-messages="errors.description"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
+      @change="change('description', ...arguments)"
     />
     <form-sections>
       <form-section
         name="Advanced"
       >
-        <v-combobox
+        <smart-combobox
           label="Spell lists"
           multiple
           chips
           deletable-chips
-          box
           :value="model.spellLists"
           :error-messages="errors.spellLists"
-          @change="(value) => $emit('change', {path: ['spellLists'], value})"
+          @change="change('spellLists', ...arguments)"
         />
       </form-section>
       <form-section
@@ -130,6 +121,7 @@
 <script>
 	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';
 
 	export default {
 		components: {
@@ -137,20 +129,7 @@
 			FormSection,
       ActionForm,
 		},
-		props: {
-			model: {
-				type: Object,
-				default: () => ({}),
-			},
-			errors: {
-				type: Object,
-				default: () => ({}),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-		},
+    mixins: [propertyFormMixin],
 		data(){return {
 			magicSchools: [
 				{

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

@@ -5,45 +5,31 @@
         label="Name"
         :value="model.name"
         :error-messages="errors.name"
-        :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+        @change="change('name', ...arguments)"
       />
     </div>
     <text-area
       label="Description"
       :value="model.description"
       :error-messages="errors.description"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
+      @change="change('description', ...arguments)"
     />
     <text-field
       label="Maximum prepared spells"
       :value="model.maxPrepared"
       hint="How many spells can be prepared"
       :error-messages="errors.maxPrepared"
-      :debounce-time="debounceTime"
-      @change="(value, ack) => $emit('change', {path: ['maxPrepared'], value, ack})"
+      @change="change('maxPrepared', ...arguments)"
     />
   </div>
 </template>
 
 <script>
-	export default {
-		props: {
-			model: {
-				type: Object,
-				default: () => ({}),
-			},
-			errors: {
-				type: Object,
-				default: () => ({}),
-			},
-      debounceTime: {
-        type: Number,
-        default: undefined,
-      },
-		},
-	};
+import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+
+export default {
+  mixins: [propertyFormMixin],
+};
 </script>
 
 <style lang="css" scoped>