Added skill form, abstracted proficiency selection

app/imports/api/creature/properties/Skills.js

@@ -45,6 +45,7 @@ let SkillSchema = schema({
       "language",
 			"utility", //not displayed anywhere
     ],
+    defaultValue: 'skill',
   },
 	// If the baseValue is higher than the computed value, it will be used as `value`
 	baseValue: {

app/imports/ui/forms/EffectForm.vue

@@ -35,10 +35,6 @@
 		<text-field
 			label="Stat"
 			class="mr-2"
-			append-icon="arrow_drop_down"
-			item-text="name"
-			item-value="variableName"
-			:menu-props="{transition: 'slide-y-transition', lazy: true}"
 			:value="model.stat"
 			:items="stats"
 			@change="(value, ack) => $emit('change', {path: ['stat'], value, ack})"

app/imports/ui/forms/ProficiencyForm.vue

@@ -6,32 +6,28 @@
 			append-icon="arrow_drop_down"
 			item-text="name"
 			item-value="skill"
+			style="flex-basis: 300px;"
 			:menu-props="{transition: 'slide-y-transition', lazy: true}"
 			:value="model.skill"
 			:items="undefined"
 			@change="(value, ack) => $emit('change', {path: ['skill'], value, ack})"
 		/>
-		<smart-select
+		<proficiency-select
 			label="Proficiency"
-			append-icon="arrow_drop_down"
+			style="flex-basis: 300px;"
-			class="mr-2 ml-3"
-			:menu-props="{transition: 'slide-y-transition', lazy: true}"
-			:items="values"
 			:value="model.value"
 			@change="(value, ack) => $emit('change', {path: ['value'], value, ack})"
-		>
+		/>
-			<v-icon
-				class="icon"
-				slot="prepend"
-				:class="iconClass"
-			>{{displayedIcon}}</v-icon>
-		</smart-select>
 	</div>
 </template>
 
 <script>
-	const ICON_SPIN_DURATION = 300;
+	import ProficiencySelect from '/imports/ui/forms/components/ProficiencySelect.vue';
+
 	export default {
+		components: {
+			ProficiencySelect,
+		},
 		props: {
 			model: {
 				type: Object,
@@ -41,75 +37,8 @@
 				type: Array,
 			},
 		},
-		data(){ return {
-			displayedIcon: 'radio_button_unchecked',
-			iconClass: '',
-			values: [
-				{value: 1, text: 'Proficient'},
-				{value: 0.5, text: 'Half proficiency bonus'},
-				{value: 2, text: 'Double proficiency bonuys'},
-			],
-		}},
-		methods: {
-			proficiencyIcon(value){
-				if (value == 0.5){
-					return 'brightness_2';
-				} else if (value == 1) {
-					return 'brightness_1'
-				} else if (value == 2){
-					return 'album'
-				} else {
-					return 'radio_button_unchecked';
-				}
-			},
-		},
-		watch: {
-			'model.value': {
-				immediate: true,
-				handler(newValue, oldValue, e){
-					let newIcon = this.proficiencyIcon(newValue);
-					if (!oldValue){
-						// Skip animation
-						this.displayedIcon = newIcon;
-					} else {
-						this.iconClass="leaving";
-						setTimeout(() => {
-							this.displayedIcon = newIcon;
-							this.iconClass="arriving";
-							requestAnimationFrame(() => {
-								this.iconClass="";
-							});
-						}, ICON_SPIN_DURATION / 2);
-					}
-				},
-			},
-		}
 	};
 </script>
 
 <style lang="css" scoped>
-	.theme--light .icon {
-		color: black;
-	}
-	.icon {
-		min-width: 30px;
-		transition: transform 0.15s linear, opacity 0.15s ease;
-		transform-origin: 18px center;
-		margin-left: -12px;
-	}
-	.icon.leaving {
-		transform: translateY(-24px);
-		opacity: 0;
-	}
-	.icon.arriving {
-		transform: translateY(24px);
-		opacity: 0;
-		transition: none;
-	}
-	.hidden {
-		visibility: hidden;
-	}
-	.proficiency-form > div {
-		flex-basis: 220px;
-	}
 </style>

app/imports/ui/forms/SkillForm.vue

@@ -0,0 +1,114 @@
+<template lang="html">
+  <div class="skill-form">
+		<div class="layout row wrap">
+			<text-field
+				label="Name"
+				:value="model.name"
+				@change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+				:error-messages="errors.name"
+				:debounce-time="debounceTime"
+			/>
+			<text-field
+				label="Variable name"
+				:value="model.variableName"
+				style="flex-basis: 300px;"
+				@change="(value, ack) => $emit('change', {path: ['variableName'], value, ack})"
+				hint="Use this name in formulae to reference this skill"
+				:error-messages="errors.variableName"
+				:debounce-time="debounceTime"
+			/>
+			<text-field
+				label="Ability"
+				:value="model.ability"
+				style="flex-basis: 300px;"
+				@change="(value, ack) => $emit('change', {path: ['ability'], value, ack})"
+				hint="Which ability is this skill based off of"
+				:error-messages="errors.ability"
+				:debounce-time="debounceTime"
+			/>
+		</div>
+		<smart-select
+			label="Type"
+			:items="skillTypes"
+			:value="model.type"
+			:error-messages="errors.type"
+			:menu-props="{auto: true, lazy: true}"
+			@change="(value, ack) => $emit('change', {path: ['type'], value, ack})"
+			:debounce-time="debounceTime"
+		/>
+		<form-section name="Advanced" standalone>
+			<div class="layout row justify-center">
+				<text-field
+					label="Base Value"
+					type="number"
+					class="base-value-field text-xs-center large-format no-flex"
+					:value="model.baseValue"
+					@change="(value, ack) => $emit('change', {path: ['baseValue'], value, ack})"
+					hint="This is the value of the skill before effects are applied"
+					:error-messages="errors.baseValue"
+					:debounce-time="debounceTime"
+				/>
+				<proficiency-select
+					style="flex-basis: 300px;"
+					label="Base Proficiency"
+					clearable
+					:value="model.baseProficiency"
+					:error-messages="errors.baseProficiency"
+					@change="(value, ack) => $emit('change', {path: ['baseProficiency'], value, ack})"
+				/>
+			</div>
+		</form-section>
+  </div>
+</template>
+
+<script>
+	import ProficiencySelect from '/imports/ui/forms/components/ProficiencySelect.vue';
+	import FormSection from '/imports/ui/forms/components/FormSection.vue';
+
+	export default {
+		components: {
+			ProficiencySelect,
+			FormSection,
+		},
+		props: {
+			model: {
+				type: Object,
+				default: () => ({}),
+			},
+			errors: {
+				type: Object,
+				default: () => ({}),
+			},
+			debounceTime: Number,
+		},
+		data(){return{
+			skillTypes: [
+				{
+					text: 'Skill',
+					value: 'skill',
+				}, {
+					text: 'Save',
+					value: 'save',
+				}, {
+					text: 'Check',
+					value: 'check',
+				}, {
+					text: 'Tool',
+					value: 'tool',
+				}, {
+					text: 'Weapon',
+					value: 'weapon',
+				}, {
+					text: 'Language',
+					value: 'language',
+				}, {
+					text: 'Utility',
+					value: 'utility',
+				},
+			]
+		};},
+	};
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/forms/components/ProficiencySelect.vue

@@ -0,0 +1,92 @@
+<template lang="html">
+	<smart-select
+		append-icon="arrow_drop_down"
+		class="ml-3"
+		v-bind="$attrs"
+		:menu-props="{transition: 'slide-y-transition', lazy: true}"
+		:items="values"
+		:value="value"
+		@change="(value, ack) => $emit('change', value, ack)"
+	>
+		<v-icon
+			class="icon"
+			slot="prepend"
+			:class="iconClass"
+		>{{displayedIcon}}</v-icon>
+	</smart-select>
+</template>
+
+<script>
+	const ICON_SPIN_DURATION = 300;
+	let proficiencyIcon = function(value){
+		if (value == 0.5){
+			return 'brightness_2';
+		} else if (value == 1) {
+			return 'brightness_1'
+		} else if (value == 2){
+			return 'album'
+		} else {
+			return 'radio_button_unchecked';
+		}
+	};
+
+	export default {
+		props: {
+			value: Number,
+		},
+		data(){ return {
+			displayedIcon: 'radio_button_unchecked',
+			iconClass: '',
+			values: [
+				{value: 1, text: 'Proficient'},
+				{value: 0.5, text: 'Half proficiency bonus'},
+				{value: 2, text: 'Double proficiency bonus'},
+			],
+		}},
+		watch: {
+			'value': {
+				immediate: true,
+				handler(newValue, oldValue, e){
+					let newIcon = proficiencyIcon(newValue);
+					if (!oldValue){
+						// Skip animation
+						this.displayedIcon = newIcon;
+					} else {
+						this.iconClass="leaving";
+						setTimeout(() => {
+							this.displayedIcon = newIcon;
+							this.iconClass="arriving";
+							requestAnimationFrame(() => {
+								this.iconClass="";
+							});
+						}, ICON_SPIN_DURATION / 2);
+					}
+				},
+			},
+		}
+	}
+</script>
+
+<style lang="css" scoped>
+	.theme--light .icon {
+		color: black;
+	}
+	.icon {
+		min-width: 30px;
+		transition: transform 0.15s linear, opacity 0.15s ease;
+		transform-origin: 18px center;
+		margin-left: -12px;
+	}
+	.icon.leaving {
+		transform: translateY(-24px);
+		opacity: 0;
+	}
+	.icon.arriving {
+		transform: translateY(24px);
+		opacity: 0;
+		transition: none;
+	}
+	.hidden {
+		visibility: hidden;
+	}
+</style>

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

@@ -10,6 +10,7 @@ import FolderForm from '/imports/ui/forms/FolderForm.vue';
 import NoteForm from '/imports/ui/forms/NoteForm.vue';
 import ProficiencyForm from '/imports/ui/forms/ProficiencyForm.vue';
 import RollForm from '/imports/ui/forms/RollForm.vue';
+import SkillForm from '/imports/ui/forms/SkillForm.vue';
 
 export default {
   action: ActionForm,
@@ -24,4 +25,5 @@ export default {
   note: NoteForm,
   proficiency: ProficiencyForm,
   roll: RollForm,
+  skill: SkillForm,
 };