Added spellcasting to the stats page, click the icon next to a spell slot to cast

app/imports/ui/properties/components/attributes/SpellSlotListTile.vue

@@ -1,86 +1,56 @@
 <template lang="html">
   <v-list-tile
     class="spell-slot-list-tile"
-    :class="{hover}"
+    v-on="hasClickListener ? {click} : {}"
   >
-    <v-list-tile-action>
-      <div
-        v-if="value > 4"
-        class="layout row align-center"
-      >
-        <div class="buttons layout column justify-center">
-          <v-btn
-            icon
-            small
-            :disabled="
-              currentValue >= value ||
-                context.editPermission === false
-            "
-            @click="increment(1)"
-          >
-            <v-icon>arrow_drop_up</v-icon>
-          </v-btn>
-          <v-btn
-            icon
-            small
-            :disabled="
-              currentValue <= 0 ||
-                context.editPermission === false
-            "
-            @click="increment(-1)"
-          >
-            <v-icon>arrow_drop_down</v-icon>
-          </v-btn>
-        </div>
+    <v-list-tile-content>
+      <v-list-tile-title>
         <div
+          v-if="model.value > 4"
           class="layout row value"
           style="align-items: baseline;"
         >
-          <div class="display-1">
-            {{ currentValue }}
+          <div
+            style="font-weight: 500; font-size: 24px"
+            class="current-value"
+          >
+            {{ model.currentValue }}
           </div>
-          <div class="title ml-2 max-value">
-            /{{ value }}
+          <div class="ml-2 max-value">
+            /{{ model.value }}
           </div>
         </div>
-      </div>
-
-      <div
-        v-else
-        class="layout row align-center justify-end slot-buttons"
-      >
-        <v-btn
-          v-for="i in value"
-          :key="i"
-          icon
-          small
-          :disabled="
-            !(i === currentValue || i === currentValue + 1) ||
-              context.editPermission === false
-          "
-          @click="increment(i > currentValue ? 1 : -1)"
+        <div
+          v-else
+          class="layout row align-center slot-bubbles"
         >
-          <v-icon>
+          <v-icon
+            v-for="i in model.value"
+            :key="i"
+          >
             {{
-              i > currentValue ?
+              i > model.currentValue ?
                 'radio_button_unchecked' :
                 'radio_button_checked'
             }}
           </v-icon>
-        </v-btn>
-      </div>
-    </v-list-tile-action>
-
-    <v-list-tile-content
-      class="content ml-2"
-      @click="click"
-      @mouseover="hover = true"
-      @mouseleave="hover = false"
-    >
-      <v-list-tile-title>
-        {{ name }}
+        </div>
       </v-list-tile-title>
+      <v-list-tile-sub-title>
+        {{ model.name }}
+      </v-list-tile-sub-title>
     </v-list-tile-content>
+    <v-list-tile-avatar v-if="!hideCastButton">
+      <v-btn
+        icon
+        flat
+        class="primary--text"
+        :data-id="`spell-slot-cast-btn-${model._id}`"
+        @click.stop="$emit('cast')"
+      >
+        <v-icon>$vuetify.icons.spell</v-icon>
+      </v-btn>
+    </v-list-tile-avatar>
   </v-list-tile>
 </template>
 
@@ -88,18 +58,13 @@
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 export default {
 	props: {
-		_id: String,
-		name: String,
-		color: String,
-		value: Number,
-		damage: {
-			type: Number,
-			default: 0,
-		},
+		model: {
+      type: Object,
+      required: true,
+    },
+    dark: Boolean,
+    hideCastButton: Boolean,
 	},
-	data(){ return{
-		hover: false,
-	}},
   inject: {
     context: { default: {} }
   },
@@ -107,15 +72,15 @@ export default {
 		currentValue(){
 			return this.value - this.damage;
 		},
+    hasClickListener(){
+      return this.$listeners && !!this.$listeners.click;
+    },
 	},
 	methods: {
 		signed: numberToSignedString,
 		click(e){
 			this.$emit('click', e);
 		},
-		increment(value){
-			this.$emit('change', {type: 'increment', value})
-		},
 	},
 };
 </script>
@@ -124,22 +89,9 @@ export default {
 	.spell-slot-list-tile {
 		background: inherit;
 	}
-	.spell-slot-list-tile >>> .v-list__tile {
-		height: 56px;
-	}
 	.v-list__tile__action {
 		width: 112px;
-		flex-shrink: 0;
-	}
-	.slot-buttons > .v-btn {
-		margin: 0;
-		flex-shrink: 1;
-	}
-	.buttons {
-		height: 100%;
-	}
-	.buttons > .v-btn {
-		margin: 0;
+    flex-shrink: 0;
 	}
 	.spell-slot-list-tile.hover {
 		background: #f5f5f5 !important;
@@ -156,4 +108,7 @@ export default {
 	.theme--dark .max-value {
 		color: rgba(255, 255, 255, 0.54);
 	}
+  .primary--text .v-icon, .primary--text .max-value, .primary--text .current-value, .primary--text .v-list__tile__sub-title {
+    color: #b71c1c
+  }
 </style>

app/imports/ui/properties/components/attributes/SplitListLayout.vue

@@ -0,0 +1,71 @@
+<template lang="html">
+  <div
+    v-if="$vuetify.breakpoint.smAndUp"
+    class="layout row split"
+  >
+    <v-list
+      class="left"
+      subheader
+      two-line
+      dense
+    >
+      <v-slide-x-transition
+        group
+        leave-absolute
+      >
+        <slot name="left" />
+      </v-slide-x-transition>
+    </v-list>
+    <v-divider
+      class="mx-3"
+      vertical
+    />
+    <v-list
+      class="right"
+      subheader
+      two-line
+      dense
+    >
+      <v-slide-x-transition
+        group
+        leave-absolute
+      >
+        <slot name="right" />
+      </v-slide-x-transition>
+    </v-list>
+  </div>
+  <v-list
+    v-else
+    class="small"
+    subheader
+    two-line
+    dense
+  >
+    <v-slide-x-transition
+      group
+      leave-absolute
+    >
+      <slot name="left" />
+      <slot name="right" />
+    </v-slide-x-transition>
+  </v-list>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="css" scoped>
+.split{
+  height: 100%;
+}
+.left, .right {
+  height: 100%;
+  overflow: auto;
+  flex-basis: 250px;
+}
+.right, .small {
+  flex-grow: 1;
+}
+</style>