Got library attribute form onto the screen :D

app/imports/ui/StoryBook.vue

@@ -41,7 +41,7 @@
 	import Vue from "vue";
 	import AbilityListTile from '/imports/ui/creature/properties/attributes/AbilityListTile.Story.vue';
 	import AttributeCard from '/imports/ui/creature/properties/attributes/AttributeCard.Story.vue';
-	import AttributeEdit from '/imports/ui/creature/properties/attributes/AttributeEdit.Story.vue';
+	import AttributeForm from '/imports/ui/creature/properties/attributes/AttributeForm.Story.vue';
 	import ColorPicker from '/imports/ui/components/ColorPicker.Story.vue';
 	import ColumnLayout from "/imports/ui/components/ColumnLayout.Story.vue";
 	import DialogStack from '/imports/ui/dialogStack/DialogStack.Story.vue';
@@ -62,7 +62,7 @@
 		components: {
 			AbilityListTile,
 			AttributeCard,
-			AttributeEdit,
+			AttributeForm,
 			ColorPicker,
 			ColumnLayout,
 			DialogStack,

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

@@ -3,7 +3,7 @@
 		<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)">
+					<v-card hover @click="$emit('select', property)">
 						<div class="layout row align-center justify-center" style="min-height: 70px;">
 							<v-icon x-large>{{ property.icon }}</v-icon>
 						</div>

app/imports/ui/creature/properties/attributes/AttributeCreationDialog.vue

@@ -22,13 +22,13 @@
 </template>
 
 <script>
-	import AttributeEdit from '/imports/ui/creature/properties/attributes/AttributeEdit.vue';
+	import AttributeForm from '/imports/ui/creature/properties/attributes/AttributeForm.vue';
 	import Attributes from '/imports/api/creature/properties/Attributes.js';
 	import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 
 	export default {
 		components: {
-			AttributeEdit,
+			AttributeForm,
 			DialogBase,
 		},
 		data(){ return {

app/imports/ui/creature/properties/attributes/AttributeDialog.vue

@@ -36,7 +36,7 @@
 <script>
 	import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
 	import EffectChildList from '/imports/ui/creature/properties/effects/EffectChildList.vue';
-	import AttributeEdit from '/imports/ui/creature/properties/attributes/AttributeEdit.vue';
+	import AttributeForm from '/imports/ui/creature/properties/attributes/AttributeForm.vue';
 	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 
 	export default {
@@ -79,7 +79,7 @@
 		components: {
 			DialogBase,
 			EffectChildList,
-			AttributeEdit,
+			AttributeForm,
 		},
 	};
 </script>

app/imports/ui/creature/properties/attributes/AttributeForm.Story.vue

@@ -13,11 +13,11 @@
 </template>
 
 <script>
-	import AttributeEdit from '/imports/ui/creature/properties/attributes/AttributeEdit.vue';
+	import AttributeForm from '/imports/ui/creature/properties/attributes/AttributeForm.vue';
 	import debounceUpdate from '/imports/ui/utility/debounceUpdate.js';
 	export default {
 		components: {
-			AttributeEdit,
+			AttributeForm,
 		},
 		data(){ return {
 			attributes: [

app/imports/ui/creature/properties/propertyFormIndex.js

@@ -0,0 +1,5 @@
+import AttributeForm from '/imports/ui/creature/properties/attributes/AttributeForm.vue';
+
+export default {
+  attribute: AttributeForm,
+};

app/imports/ui/library/LibraryNodeCreationDialog.vue

@@ -1,37 +1,44 @@
 <template lang="html">
-  <dialog-base :override-back-button="step === 2 && back">
+  <dialog-base :override-back-button="step === 2 ? back : undefined">
+		<div slot="toolbar">{{ step === 2 ? `Add ${property.name}` : 'Add Library Content'}}</div>
 		<v-window v-model="step" slot="unwrapped-content" style="height: 100%;">
 			<v-window-item :value="1">
-				<property-selector @select="setType"/>
+				<property-selector @select="setProperty"/>
 			</v-window-item>
 			<v-window-item :value="2">
 				<v-card-text>
-					{{ type }}
+					<library-node-form :type="property && property.type"/>
 				</v-card-text>
 			</v-window-item>
 		</v-window>
+
+		<div slot="actions" v-if="step === 2" class="layout row justify-end">
+			<v-btn flat>Insert</v-btn>
+		</div>
   </dialog-base>
 </template>
 
 <script>
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
-import PropertySelector from '/imports/ui/components/properties/PropertySelector.vue';
+import PropertySelector from '/imports/ui/creature/properties/PropertySelector.vue';
+import LibraryNodeForm from '/imports/ui/library/LibraryNodeForm.vue';
 
 export default {
   data() { return {
-    type: undefined,
+    property: undefined,
 		step: 1,
   };},
   components: {
     DialogBase,
 		PropertySelector,
+		LibraryNodeForm,
   },
 	methods: {
 		back(){
 			this.step = 1;
 		},
-		setType(type){
+		setProperty(property){
-			this.type = type;
+			this.property = property;
 			this.step = 2;
 		}
 	},

app/imports/ui/library/LibraryNodeForm.vue

@@ -0,0 +1,16 @@
+<template lang="html">
+  <component v-if="type" :is="type" class="library-node-form"/>
+</template>
+
+<script>
+import propertyFormIndex from '/imports/ui/creature/properties/propertyFormIndex.js';
+export default {
+	props: {
+		type: String,
+	},
+	components: propertyFormIndex,
+}
+</script>
+
+<style lang="css" scoped>
+</style>