Completed folder stat grouping UI

app/imports/ui/properties/components/folders/folderGroupComponents/ActionGroupComponent.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    v-if="model.actionType === 'event'"
+    class="d-flex justify-center"
+  >
+    <event-button
+      class="ma-1"
+      :model="model"
+    />
+  </div>
+  <action-card
+    v-else
+    :model="model"
+    @click="$emit('click')"
+    @sub-click="_id => $emit('sub-click', _id)"
+  />
+</template>
+
+<script lang="js">
+import ActionCard from '/imports/ui/properties/components/actions/ActionCard.vue';
+import EventButton from '/imports/ui/properties/components/actions/EventButton.vue';
+
+export default {
+  components: {
+    ActionCard,
+    EventButton,
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+  },
+}
+</script>

app/imports/ui/properties/components/folders/folderGroupComponents/AttributeGroupComponent.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="attribute">
+    <ability-list-tile
+      v-if="model.attributeType === 'ability'"
+      :model="model"
+      @click="$emit('click')"
+    />
+    <hit-dice-list-tile
+      v-else-if="model.attributeType === 'hitDice'"
+      :model="model"
+      @click="$emit('click')"
+      @change="({ type, value }) => damageProperty({type, value: -value})"
+    />
+    <health-bar
+      v-else-if="model.attributeType === 'healthBar'"
+      :model="model"
+      @change="damageProperty"
+      @click="$emit('click')"
+    />
+    <spell-slot-list-tile
+      v-else-if="model.attributeType === 'spellSlot'"
+      :model="model"
+      @click="$emit('click')"
+    />
+    <resource-card-content
+      v-else-if="model.attributeType === 'resource'"
+      :model="model"
+      @click="$emit('click')"
+      @change="({ type, value }) => damageProperty({type, value: -value})"
+      @mouseover="hover = true"
+      @mouseleave="hover = false"
+    />
+    <attribute-card-content
+      v-else-if="model.attributeType !== 'utility'"
+      class="pointer"
+      :model="model"
+      @click="$emit('click')"
+      @mouseover="hover = true"
+      @mouseleave="hover = false"
+    />
+    <card-highlight :active="hover" />
+  </div>
+</template>
+
+<script lang="js">
+import AbilityListTile from '/imports/ui/properties/components/attributes/AbilityListTile.vue';
+import HitDiceListTile from '/imports/ui/properties/components/attributes/HitDiceListTile.vue';
+import HealthBar from '/imports/ui/properties/components/attributes/HealthBar.vue';
+import SpellSlotListTile from '/imports/ui/properties/components/attributes/SpellSlotListTile.vue';
+import ResourceCardContent from '/imports/ui/properties/components/attributes/ResourceCardContent.vue';
+import AttributeCardContent from '/imports/ui/properties/components/attributes/AttributeCardContent.vue';
+import CardHighlight from '/imports/ui/components/CardHighlight.vue';
+
+import damageProperty from '/imports/api/creature/creatureProperties/methods/damageProperty.js';
+
+export default {
+  components: {
+    AbilityListTile,
+    HitDiceListTile,
+    HealthBar,
+    SpellSlotListTile,
+    ResourceCardContent,
+    AttributeCardContent,
+    CardHighlight,
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+    hover: false,
+  }},
+  methods: {
+    damageProperty(change) {
+      damageProperty.call({
+        _id: this.model._id,
+        operation: change.type,
+        value: change.value
+      });
+    },
+  }
+}
+</script>
+
+<style lang="css" scoped>
+  .attribute {
+    position: relative;
+  }
+  .pointer {
+    cursor: pointer;
+  }
+</style>