Got library attribute form onto the screen :D

app/imports/ui/creature/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)">
+						<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>

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,
+};