Added effect edit expansion panel

app/imports/ui/StoryBook.vue

@@ -46,6 +46,7 @@
 	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';
+	import EffectEditExpansionList from '/imports/ui/components/EffectEditExpansionList.Story.vue';
 	import HealthBar from '/imports/ui/components/HealthBar.Story.vue';
 	import HitDiceListTile from '/imports/ui/components/HitDiceListTile.Story.vue';
 	import IconSearch from '/imports/ui/components/IconSearch.Story.vue';
@@ -62,6 +63,7 @@
 			ColumnLayout,
 			DialogStack,
 			EffectEdit,
+			EffectEditExpansionList,
 			HealthBar,
 			HitDiceListTile,
 			IconSearch,

app/imports/ui/components/AttributeEffectList.vue

@@ -4,7 +4,8 @@
 			v-for="effect in sortedEffects"
 			v-bind="effect"
 			v-on="$listeners.click ? { click(e){$emit('click', e)} } : {}"
-		>
+			:key="effect._id"
+		/>
   </v-list>
 </template>
 

app/imports/ui/components/EffectEdit.vue

@@ -3,13 +3,13 @@
 
 		<!-- Operation -->
 		<v-flex class="ma-1">
-			<v-select
+			<smart-select
 				label="Operation"
 				append-icon="arrow_drop_down"
 				:menu-props="{transition: 'slide-y-transition', lazy: true}"
 				:items="operations"
 				:value="this.effect.operation"
-				@input="operation => $emit('change', {operation})"
+				@change="(operation, ack) => $emit('change', {set: {operation}, ack})"
 			>
 				<v-icon
 					class="icon"
@@ -24,18 +24,18 @@
 					</v-icon>
 					{{item.item.text}}
 				</template>
-			</v-select>
+			</smart-select>
 		</v-flex>
 
 		<!-- Value -->
 		<v-flex class="ma-1">
-			<v-text-field
+			<text-field
 				label="Value"
 				:persistent-hint="needsValue"
 				:value="needsValue ? (effect.calculation) : ' '"
 				:disabled="!needsValue"
 				:hint="!isFinite(effect.calculation) && effect.result ? effect.result + '' : '' "
-				@input="calculation => $emit('change', {calculation})"
+				@change="(calculation, ack) => $emit('change', {set: {calculation}, ack})"
 			/>
 		</v-flex>
 
@@ -49,7 +49,7 @@
 				:menu-props="{transition: 'slide-y-transition', lazy: true}"
 				:value="effect.stat"
 				:items="stats"
-				@input="stat => $emit('change', {stat})"
+				@input="stat => $emit('change', {set: {stat}, ack: () => {} })"
 			/>
 		</v-flex>
 
@@ -64,7 +64,7 @@
 		props: {
 			effect: {
 				type: Object,
-				default: {},
+				default: () => ({}),
 			},
 			stats: {
 				type: Array,

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

@@ -0,0 +1,104 @@
+<template lang="html">
+	<effect-edit-expansion-list
+		:effects="effects"
+		:stats="stats"
+		@change="change"
+	/>
+</template>
+
+<script>
+import EffectEditExpansionList from '/imports/ui/components/EffectEditExpansionList.vue';
+export default {
+	data(){ return {
+		effects: [
+			{
+				name: "Ghost Touch",
+				stat: 'Strength',
+				operation: "add",
+				result: -2,
+				calculation: '-2',
+				enabled: true,
+				_id: Random.id(),
+			},{
+				name: "Some Base",
+				stat: 'Strength',
+				operation: "base",
+				result: 15,
+				calculation: '15',
+				enabled: true,
+				_id: Random.id(),
+			},{
+				name: "Some Multiply",
+				stat: 'Strength',
+				operation: "mul",
+				result: 1.5,
+				calculation: '1.5',
+				enabled: true,
+				_id: Random.id(),
+			},{
+				name: "Some Min",
+				stat: 'Strength',
+				operation: "min",
+				result: 8,
+				calculation: '8',
+				enabled: true,
+				_id: Random.id(),
+			},{
+				name: "Some Advantage",
+				stat: 'Strength',
+				operation: "advantage",
+				result: 1,
+				calculation: '1',
+				enabled: true,
+				_id: Random.id(),
+			},{
+				name: "Some Disadvantage",
+				stat: 'Strength',
+				operation: "disadvantage",
+				result: 1,
+				calculation: '1',
+				enabled: true,
+				_id: Random.id(),
+			},{
+				name: "Some Passive",
+				stat: 'Strength',
+				operation: "passiveAdd",
+				result: -2,
+				calculation: '-2',
+				calculation: "3-5",
+				_id: Random.id(),
+			},{
+				name: "Some Conditional",
+				stat: 'Strength',
+				operation: "conditional",
+				calculation: "+8 Only when asleep",
+				result: "+8 Only when asleep",
+				enabled: true,
+				_id: Random.id(),
+			},
+		],
+		stats: ["Strength", "Dexterity", "Constitution", "Speed"].map( a => ({
+			name: a,
+			variableName: a,
+		})),
+	}},
+	components: {
+		EffectEditExpansionList,
+	},
+	methods: {
+		change({set, ack, effectId, index}){
+			console.log({set, ack, effectId, index});
+			for (let key in set){
+				this.effects[index][key] = set[key];
+				if (key === 'calculation'){
+					this.effects[index].result = set[key]
+				}
+				ack();
+			}
+		},
+	},
+};
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/EffectEditExpansionList.vue

@@ -0,0 +1,54 @@
+<template lang="html">
+  <v-expansion-panel
+		class="effect-edit-expansion-list"
+		v-model="expanded"
+	>
+  	<v-expansion-panel-content
+			v-for="(effect, index) in effects"
+			:key="effect._id"
+			lazy
+		>
+  		<effect-list-tile
+				slot="header"
+				class="effect-list-tile"
+				:class="{'primary--text': expanded === index}"
+				v-bind="effect"
+			/>
+			<effect-edit
+				:effect="effect"
+				:stats="stats"
+				@change="({set, ack}) => $emit('change', {set, ack, effectId: effect._id, index})"
+			/>
+  	</v-expansion-panel-content>
+  </v-expansion-panel>
+</template>
+
+<script>
+	import EffectEdit from '/imports/ui/components/EffectEdit.vue';
+	import EffectListTile from '/imports/ui/components/EffectListTile.vue';
+	export default {
+		props: {
+			effects: Array,
+			stats: Array,
+		},
+		components: {
+			EffectEdit,
+			EffectListTile,
+		},
+		data(){ return {
+			expanded: null,
+		}},
+	};
+</script>
+
+<style lang="css" scoped>
+	.effect-edit-expansion-list >>> .v-expansion-panel__header {
+		padding-left: 0;
+		padding-right: 8px;
+		max-width: 100%;
+		overflow: hidden;
+	}
+	.effect-list-tile {
+		width: calc(100% - 26px);
+	}
+</style>

app/imports/ui/components/EffectListTile.vue

@@ -3,7 +3,6 @@
 		class="effect-list-tile"
 		:class="{disabled: !enabled}"
 		:id="elementId"
-		:key="_id"
 		v-on="$listeners.click ? { click(e){
 				$emit('click', {$props, elementId})
 			} } : {}"
@@ -16,11 +15,14 @@
 				{{getValue(operation, result)}}
 			</div>
 			<div class="calculation body-2 pr-2" v-else>
-				{{calculation}}
+				{{operation === 'conditional' ? calculation : ''}}
 			</div>
 		</v-layout>
 		<v-list-tile-content>
-			<v-list-tile-title class="name">
+			<v-list-tile-title class="stat" v-if="statName">
+				{{statName}}
+			</v-list-tile-title>
+			<v-list-tile-title class="name" v-else>
 				{{name}}
 			</v-list-tile-title>
 			<v-list-tile-sub-title class="operation">
@@ -41,6 +43,8 @@
 			result: [String, Number],
 			calculation: String,
 			name: String,
+			stat: String,
+			statName: String,
 		},
 		computed: {
 			elementId(){
@@ -99,11 +103,12 @@
 	.icon {
 		min-width: 30px;
 	}
-	.theme--light .icon {
-		color: black;
+	.icon {
+		color: inherit !important;
 	}
 	.net-effect {
 		flex-grow: 0;
+		flex-shrink: 0;
 	}
 	.value, .calculation {
 		min-width: 80px;

app/imports/ui/components/global/SmartSelect.vue

@@ -8,7 +8,9 @@
 		@change="change"
 		@focus="focused = true"
 		@blur="focused = false"
-	/>
+	>
+		<slot name="prepend" slot="prepend"/>
+	</v-select>
 </template>
 
 <script>