Added basic attribute edit form

app/imports/ui/StoryBook.vue

@@ -10,7 +10,7 @@
 			</v-btn>
     </v-layout>
 		<v-navigation-drawer right app v-model="sidebar">
-			<v-toolbar color="primary" dark>
+			<v-toolbar color="secondary" dark>
 				Components
 			</v-toolbar>
 			<v-list>
@@ -40,6 +40,7 @@
 	import Vue from "vue";
 	import AbilityListTile from '/imports/ui/components/AbilityListTile.Story.vue';
 	import AttributeCard from '/imports/ui/components/AttributeCard.Story.vue';
+	import AttributeEdit from '/imports/ui/components/AttributeEdit.Story.vue';
 	import ColumnLayout from "/imports/ui/components/ColumnLayout.Story.vue";
 	import DialogStack from '/imports/ui/dialogStack/DialogStack.Story.vue';
 	import EffectEdit from '/imports/ui/components/EffectEdit.Story.vue';
@@ -53,6 +54,7 @@
 		components: {
 			AbilityListTile,
 			AttributeCard,
+			AttributeEdit,
 			ColumnLayout,
 			DialogStack,
 			EffectEdit,

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

@@ -0,0 +1,49 @@
+<template lang="html">
+	<div>
+		<attribute-edit
+			v-for="attribute in attributes"
+			:key="attribute._id"
+			:attribute="attribute"
+			@change="log"
+		/>
+	</div>
+</template>
+
+<script>
+	import AttributeEdit from '/imports/ui/components/AttributeEdit.vue';
+	export default {
+		components: {
+			AttributeEdit,
+		},
+		data(){ return {
+			attributes: [
+				{
+					_id: Random.id(),
+					name: 'Strength',
+					variableName: 'strength',
+					order: 4,
+					type: 'ability',
+					baseValue: 10,
+					value: 14,
+					mod: 2,
+					adjustment: -2,
+					decimal: false,
+					reset: undefined,
+					resetMultiplier: undefined,
+					color: '#aa0000',
+				},
+			],
+		}},
+		methods: {
+			log: console.log,
+			change(index, e){
+				for (let i in e){
+					this.attributes[index][i] = e[i];
+				}
+			},
+		},
+	}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/AttributeEdit.vue

@@ -0,0 +1,108 @@
+<template lang="html">
+  <div>
+  	<v-text-field
+			label="Name"
+			:value="attribute.name"
+		/>
+		<v-text-field
+			label="Variable name"
+			:value="attribute.variableName"
+			@change="variableName => $emit('change', {variableName})"
+			hint="Use this name in formulae to reference this attribute"
+		/>
+		<v-text-field
+			label="Base Value"
+			type="number"
+			:value="attribute.baseValue"
+			@change="baseValue => $emit('change', {baseValue})"
+			hint="This is the value of the attribute before effects are applied"
+		/>
+		<v-text-field
+			label="Damage"
+			type="number"
+			:value="-attribute.adjustment"
+			@change="damage => $emit('change', {adjustment: -damage})"
+		/>
+		<v-select
+			label="Type"
+			color="accent"
+			:items="attributeTypes"
+			:value="attribute.type"
+			@change="type => $emit('change', {type})"
+		/>
+		<v-switch
+			label="Allow decimal values"
+			:value="attribute.decimal"
+			@change="decimal => $emit('change', {decimal})"
+		/>
+		<v-select
+			label="Reset"
+			color="accent"
+			:items="resetOptions"
+			:value="attribute.reset"
+			@change="reset => $emit('change', {reset})"
+		/>
+		<v-text-field
+			label="Reset Multiplier"
+			type="number"
+			:value="attribute.resetMultiplier"
+			@change="resetMultiplier => $emit('change', {resetMultiplier})"
+			hint="Some attributes, like hit dice, only reset by half their total on a long rest"
+		/>
+  </div>
+</template>
+
+<script>
+export default {
+	props: {
+		attribute: {
+			type: Object,
+			default: {},
+		},
+	},
+	data(){ return{
+		attributeTypes: [
+			{
+				text: 'Ability score',
+				value: 'ability',
+			}, {
+				text: 'Stat',
+				value: 'stat',
+			}, {
+				text: 'Modifier',
+				value: 'modifier',
+			}, {
+				text: 'Hit dice',
+				value: 'hitDice',
+			}, {
+				text: 'Health bar',
+				value: 'healthBar',
+			}, {
+				text: 'Resource',
+				value: 'resource',
+			}, {
+				text: 'Spell slot',
+				value: 'spellSlot',
+			}, {
+				text: 'Utility',
+				value: 'utility',
+			},
+		],
+		resetOptions: [
+			{
+				text: 'None',
+				value: undefined,
+			}, {
+				text: 'Short rest',
+				value: 'shortRest',
+			}, {
+				text: 'Long rest',
+				value: 'longRest',
+			}
+		]
+	}},
+}
+</script>
+
+<style lang="css" scoped>
+</style>