Started work on library node insert forms

app/imports/ui/components/forms/schemaFormMixin.js

@@ -0,0 +1,30 @@
+/**
+ * Forms that take in a schema and a model of the current data, manages smart
+ * inputs, and sends update events when valid data model changes must occur
+ */
+export default function schemaFormMixin(schema){
+	return {
+		data(){ return {
+			valid: true,
+		};},
+		created(){
+			this.validationContext = schema.newContext();
+		},
+		computed: {
+			errors(){
+				this.valid = true;
+				if (!this.model){
+					throw new Error("this.model must be set");
+				}
+				let cleanModel = this.validationContext.clean(this.model);
+				this.validationContext.validate(cleanModel);
+				let errors = {};
+				this.validationContext.validationErrors().forEach(error => {
+					if (this.valid) this.valid = false;
+					errors[error.name] = Attributes.simpleSchema().messageForError(error);
+				});
+				return errors;
+			},
+		},
+	};
+}

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

@@ -79,11 +79,11 @@ export default {
       this.$emit('change', val, this.acknowledgeChange);
     },
     hasChangeListener(){
-      return this.$listeners && this.$listeners.change
+      return this.$listeners && this.$listeners.change;
     },
     forceSafeValueUpdate(){
       // hack to force the value to update on the child component
-      this.safeValue = null
+      this.safeValue = null;
       this.$nextTick(() => this.safeValue = this.value);
     },
   },

app/imports/ui/components/properties/PropertySelector.vue

@@ -0,0 +1,47 @@
+<template lang="html">
+	<div>
+		<v-container fluid grid-list-lg fill-height>
+			<v-layout row wrap>
+				<v-flex v-for="property in properties" :key="property.name" xs4>
+					<v-card hover @click="$emit('select', property.type)">
+						<div class="layout row align-center justify-center" style="min-height: 70px;">
+							<v-icon x-large>{{ property.icon }}</v-icon>
+						</div>
+						<h3 class="subtitle pb-3" style="text-align: center;">
+							{{ property.name }}
+						</h3>
+					</v-card>
+				</v-flex>
+			</v-layout>
+		</v-container>
+	</div>
+</template>
+
+<script>
+export default {
+	data(){return {
+		properties: [
+			{name: 'Creature', icon: 'accessibility', type: 'creature'},
+			{name: 'Action', icon: 'offline-bolt', type: 'action'},
+			{name: 'Attribute', icon: 'star-rate', type: 'attribute'},
+			{name: 'Class', icon: 'school', type: 'class'},
+			{name: 'Class Level', icon: 'plus-one', type: 'classLevel'},
+			{name: 'Damage Multiplier', icon: 'layers', type: 'damageMultiplier'},
+			{name: 'Effect', icon: 'show-chart', type: 'effect'},
+			{name: 'Experience', icon: 'add', type: 'experience'},
+			{name: 'Feature', icon: 'subject', type: 'feature'},
+			{name: 'Folder', icon: 'folder', type: 'folder'},
+			{name: 'Note', icon: 'note', type: 'note'},
+			{name: 'Proficiency', icon: 'radio-button-checked', type: 'proficiency'},
+			{name: 'Skill', icon: 'check-box', type: 'skill'},
+			{name: 'Spell List', icon: 'list', type: 'spellList'},
+			{name: 'Spell', icon: 'whatshot', type: 'spell'},
+			{name: 'Container', icon: 'work', type: 'container'},
+			{name: 'Item', icon: 'category', type: 'item'},
+		],
+	}}
+}
+</script>
+
+<style lang="css" scoped>
+</style>